www/rtemislive.scss

/* rtemislive.scss */

// To-do:
// edit .selectize-dropdown .selected {
//   background-color: #007bc2;
//   color: #ffffff;
// }

@import url('https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap');
// Apply Geist font to body
body {
  font-family: 'Geist', sans-serif;
}

// Define background color for light and dark mode
$light-bg: #efefef;
$dark-bg: #161616;

// Define your custom colors
// primary color
// $light-primary: #1295D8;
// $dark-primary: #1295D8;
$light-primary: #16A0AC;
$dark-primary: #16A0AC;
$light-primary-rgb: #{red($light-primary)}, #{green($light-primary)}, #{blue($light-primary)};
$dark-primary-rgb: #{red($dark-primary)}, #{green($dark-primary)}, #{blue($dark-primary)};
// info color
// $light-info: #E44C9A;
// $dark-info: #FEB2E0;
// $light-info: #C42882;
// $dark-info: #C42882;
$light-info: #ff004c;
$dark-info: #ff004c;
$light-info-rgb: #{red($light-info)}, #{green($light-info)}, #{blue($light-info)};
$dark-info-rgb: #{red($dark-info)}, #{green($dark-info)}, #{blue($dark-info)};
// tooltip-bg
$light-tooltipbg: #cdcdcd;
$dark-tooltipbg: #333333;

// Customize the theme colors
@include color-mode(light) {
  // background color
  --bs-body-bg: #{$light-bg};
  // primary color
  --bs-primary: #{$light-primary};
  --bs-primary-rgb: #{$light-primary-rgb};
  // info color
  --bs-info: #{$light-info};
  --bs-info-rgb: #{$light-info-rgb};
  // button color
  --bs-button: #{$light-primary};
  --bs-button-rgb: #{$light-primary-rgb};
  // link color
  --bs-link-color: #{$light-primary};
  --bs-link-color-rgb: #{$light-primary-rgb};
  // dropdown link active bg
  // --bs-dropdown-link-active-bg: #{$light-primary};
  // form select bg
  --bs-select-bg: #{$light-primary};

  --rt-tooltipbg: #{$light-tooltipbg};
}

@include color-mode(dark) {
  // background color
  --bs-body-bg: #{$dark-bg};
  // primary color
  --bs-primary: #{$dark-primary};
  --bs-primary-rgb: #{$dark-primary-rgb};
  // info color
  --bs-info: #{$dark-info};
  --bs-info-rgb: #{$dark-info-rgb};
  // button color
  --bs-button: #{$dark-primary};
  --bs-button-rgb: #{$dark-primary-rgb};
  // link color
  --bs-link-color: #{$dark-primary};
  --bs-link-color-rgb: #{$dark-primary-rgb};
  // dropdown link active bg
  // --bs-dropdown-link-active-bg: #{$dark-primary};
  // form select bg
  --bs-select-bg: #{$dark-primary};

  --rt-tooltipbg: #{$dark-tooltipbg};
}

/* rthelp */
.rthelp {
  position: fixed !important;
  top: 33% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  color: var(--bs-info) !important;
  margin: 11px;
  border: 0.5px solid transparent;
  border-radius: 10px;
  padding: 11px;
}

.rthelp-inline {
  display: inline-block;
  color: var(--bs-info) !important;
  margin: 11px;
  border: 0.5px solid transparent;
  border-radius: 10px;
  padding: 11px;
  text-align: left;
}

.rthelplist {
  color: var(--bs-info) !important;
  background-color: var(--rt-tooltipbg) !important;
  text-align: left;
}


// modify bs link color only for body links
// card-body a {
//   color: $primary !important;
// }

// .rt-tooltip {
//   background-color: #282828aa;
//   color: orange;
//   border-radius: 10px;
// }

// Border animation
.rthelp,
.rthelp-inline {
  // animation: highlight-border 1s ease-in-out forwards;
  animation-name: highlight-border;
  animation-duration: 6s;
  animation-timing-function: ease-in-out;
  // animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

@keyframes highlight-border {
  0% {
    // border-color: transparent;
    // Make border-color var(--bs-info) at 10% transparency
    border-color: rgba(var(--bs-info-rgb), 0.10);
  }

  50% {
    border-color: var(--bs-info);
  }

  100% {
    // border-color: transparent;
    border-color: rgba(var(--bs-info-rgb), 0.10);
  }
}

// theme switch
#lightson {
  margin-top: auto;
  margin-bottom: auto;
}

// Bootstrap tooltips
// set tooltip, tooltip-inner and tooltip-arrow colors to rt-tooltipbg
.tooltip {
  --bs-tooltip-bg: var(--rt-tooltipbg);
  --bs-tooltip-arrow-color: var(--rt-tooltipbg);
  border-radius: 10px;
}

.tooltip-inner {
  background-color: var(--rt-tooltipbg);
  color: var(--bs-info) !important;
}

// Remove underscore from all links
a {
  text-decoration: none;
}

// 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);
  // }
}

// Radio buttons
.form-check-input:checked,
.shiny-input-container .checkbox input:checked,
.shiny-input-container .checkbox-inline input:checked,
.shiny-input-container .radio input:checked,
.shiny-input-container .radio-inline input:checked {
  background-color: $primary-color;
  border-color: $primary-color;
}