colors

app.R

@@ -15,9 +15,7 @@ source("globals.R")
 source("data.R")
 
 # Colors
-primary <- "#72CDF4"
-info <- helpcol <- "#B43880"
-success <- "#B4DC55"
+success <- "#60D0DA"
 
 #' Create protein visualization shinylive app
 #'
@@ -91,12 +89,7 @@ rtemisseq <- function(
       theme = bslib::bs_theme(
         bg = "#fff",
         fg = "#000",
-        # primary = primary,
-        secondary = "#704071",
         success = success,
-        # info = info,
-        # `tooltip-bg` = "#303030",
-        # `tooltip-color` = helpcol,
         `tooltip-opacity` = 1,
         `tooltip-border-radius` = "10px",
         `tooltip-padding-x` = "1rem",

www/rtemislive.scss

@@ -2,8 +2,8 @@
 
 // Define your custom colors
 // primary color
-$light-primary: #1295D8;
-$dark-primary: #72CDF4;
+$light-primary: #178CCB;
+$dark-primary: #B8E6FA;
 // info color
 $light-info: #E44C9A; // Default Bootstrap info color
 $dark-info: #FEB2E0; // Darker shade for better contrast in dark mode
@@ -19,6 +19,10 @@ $dark-tooltipbg: #333333;
   // info color
   --bs-info: #{$light-info};
   --bs-info-rgb: #{red($light-info)}, #{green($light-info)}, #{blue($light-info)};
+  // button color
+  --bs-button: #{$light-primary};
+  // radio button color
+  --bs-radio: #{$light-primary};
 
   --rt-tooltipbg: #{$light-tooltipbg};
 }
@@ -30,6 +34,10 @@ $dark-tooltipbg: #333333;
   // info color
   --bs-info: #{$dark-info};
   --bs-info-rgb: #{red($dark-info)}, #{green($dark-info)}, #{blue($dark-info)};
+  // button color
+  --bs-button: #{$dark-primary};
+  // radio button color
+  --bs-radio: #{$dark-primary};
 
   --rt-tooltipbg: #{$dark-tooltipbg};
 }
@@ -69,11 +77,11 @@ $dark-tooltipbg: #333333;
 //   color: $primary !important;
 // }
 
-.rt-tooltip {
-  background-color: #282828aa;
-  color: orange;
-  border-radius: 10px;
-}
+// .rt-tooltip {
+//   background-color: #282828aa;
+//   color: orange;
+//   border-radius: 10px;
+// }
 
 // Border animation
 .rthelp,
@@ -126,3 +134,91 @@ $dark-tooltipbg: #333333;
 a {
   text-decoration: none;
 }
+
+// Buttons
+// .btn-primary {
+//   background-color: var(--bs-primary);
+//   border-color: var(--bs-primary);
+// }
+
+// .btn-outline-primary {
+//   border-color: var(--bs-primary);
+//   color: var(--bs-primary);
+
+// }
+
+// .btn-link {
+//   color: var(--bs-primary);
+// }
+
+// .form-check-input:checked,
+// .form-check-input:focus {
+//   background-color: var(--bs-primary);
+//   border-color: var(--bs-primary);
+// }
+
+// Custom styles for buttons
+// .btn-primary {
+//   @include button-variant($primary, $primary);
+// }
+
+// // Custom styles for radio buttons
+// .btn-check {
+//   &:checked+.btn-primary {
+//     @include button-variant($primary, $primary);
+
+//     &:hover {
+//       background-color: darken($primary, 10%);
+//       border-color: darken($primary, 10%);
+//     }
+//   }
+// }
+
+// Define a SCSS variable that uses the CSS custom property
+$primary-color: var(--bs-primary);
+
+// Customize Bootstrap buttons
+.btn-primary {
+  background-color: $primary-color;
+  border-color: $primary-color;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: rgba($primary-color, 0.8);
+    border-color: rgba($primary-color, 0.8);
+  }
+}
+
+.btn-outline-primary {
+  color: $primary-color;
+  border-color: $primary-color;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $primary-color;
+    border-color: $primary-color;
+  }
+}
+
+// Customize radio buttons
+.form-check-input {
+  &:checked {
+    background-color: $primary-color;
+    border-color: $primary-color;
+  }
+
+  &:focus {
+    border-color: $primary-color;
+    box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.25);
+  }
+}
+
+// Customize focus state for buttons
+.btn-primary,
+.btn-outline-primary {
+  &:focus {
+    box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.5);
+  }
+}