RootZanli & NinjaCr3

: / home / o5t6x7pgljbm / public_html / tuitioncoin.org / assets / scss /
Filename : _dark-mode.scss
back
//
// Theme dark mode
// --------------------------------------------------

@if $enable-dark-mode {
  .dark-mode {

    --#{$prefix}gray-600: rgba(#{to-rgb($white)}, .5);
    --#{$prefix}gray-700: rgba(#{to-rgb($white)}, .7);
    --#{$prefix}gray-800: rgba(#{to-rgb($white)}, .85);
    --#{$prefix}gray-900: #{$white};
    --#{$prefix}body-bg: #{$body-dark-mode-bg};
    --#{$prefix}body-color: #{$body-dark-mode-color};
    --#{$prefix}secondary-bg: rgba(#{to-rgb($white)}, .04);
    --#{$prefix}heading-link-color: #{$nav-link-dark-mode-color};
    --#{$prefix}heading-link-hover-color: #{$nav-link-dark-mode-hover-color};
    --#{$prefix}nav-link-color: #{$nav-link-dark-mode-color};
    --#{$prefix}border-color: #{$border-light-color};
    --#{$prefix}code-color: #{$code-dark-mode-color};


    // Utilities

    .d-dark-mode-none {
      display: none !important;
    }
    .d-dark-mode-block {
      display: block !important;
    }
    .d-dark-mode-inline {
      display: inline !important;
    }
    .d-dark-mode-inline-block {
      display: inline-block !important;
    }
    .d-dark-mode-inline-flex {
      display: inline-flex !important;
    }
    .d-dark-mode-flex {
      display: flex !important;
    }
    .text-border {
      color: var(--#{$prefix}border-color) !important;
    }
    .text-dark:not(.badge) {
      color: $white !important;
    }
    .text-nav:not(.badge.bg-white) {
      color: $nav-link-dark-mode-color !important;
    }
    .text-body {
      color: $body-dark-mode-color !important;
    }
    .border-dark {
      border-color: var(--#{$prefix}border-color) !important;
    }
    .bg-light:not(.badge),
    .card.card-hover.bg-light {
      background-color: $dark !important;
    }
    .bg-secondary,
    .card.bg-light {
      background-color: var(--#{$prefix}secondary-bg) !important;
    }
    .bg-secondary.badge {
      color: var(--#{$prefix}body-color);
    }
    .shadow-dark-mode-none {
      box-shadow: none !important;
    }

    // Restore to defaults when inside white background
    .bg-white,
    .ignore-dark-mode {
      --#{$prefix}body-color: #{$body-color};
      --#{$prefix}nav-link-color: #{$nav-link-color};
      --#{$prefix}border-color: #{$border-color};
      h1, .h1, h2, .h2, h3, .h3,
      h4, .h4, h5, .h5, h6, .h6 {
        color: $dark;
      }
      p, ul, ol, span, dd {
        color: var(--#{$prefix}body-color);
      }
      .text-body {
        color: var(--#{$prefix}body-color) !important;
      }
      .text-muted {
        color: $gray-600 !important;
      }
      .text-dark {
        color: $dark !important;
      }
    }


    // Images / figures

    .img-thumbnail {
      background-color: $thumbnail-dark-mode-bg;
    }
    .dark-mode-img {
      display: block;
    }
    .light-mode-img {
      display: none;
    }


    // Tables

    .table {
      --#{$prefix}table-striped-bg: rgba(#{to-rgb($white)}, #{$table-striped-bg-factor});
      --#{$prefix}table-hover-bg: rgba(#{to-rgb($white)}, #{$table-hover-bg-factor});
      --#{$prefix}table-hover-color: #{$table-hover-color};
      > :not(:last-child) > :last-child > * {
        border-bottom-color: rgba($white, .3);
      }
    }


    // Buttons

    .btn-outline-secondary {
      --#{$prefix}btn-color: rgba(#{to-rgb($light)}, .85);
      --#{$prefix}btn-hover-color: #{$gray-800};
      --#{$prefix}btn-active-color: #{$gray-800};
      --#{$prefix}btn-border-color: rgba(#{to-rgb($light)}, .25);
      --#{$prefix}btn-hover-bg: #{$light};
      --#{$prefix}btn-active-bg: #{$light};
    }
    .btn-secondary:not(.bg-white) {
      --#{$prefix}btn-color: rgba(#{to-rgb($light)}, .85);
      --#{$prefix}btn-hover-color: #{$light};
      --#{$prefix}btn-active-color: #{$light};
      --#{$prefix}btn-border-color: transparent;
      --#{$prefix}btn-hover-border-color: transparent;
      --#{$prefix}btn-active-border-color: transparent;
      --#{$prefix}btn-bg: rgba(#{to-rgb($light)}, .06);
      --#{$prefix}btn-hover-bg: rgba(#{to-rgb($light)}, .12);
      --#{$prefix}btn-active-bg: rgba(#{to-rgb($light)}, .12);
    }
    .btn-secondary,
    .btn-outline-secondary,
    .btn-light,
    .btn-outline-light {
      --#{$prefix}btn-disabled-color: rgba(#{to-rgb($white)}, .5);
    }
    .btn-dark {
      --#{$prefix}btn-color: #{$gray-800} !important;
      --#{$prefix}btn-hover-color: #{$gray-800} !important;
      --#{$prefix}btn-active-color: #{$gray-800} !important;
      --#{$prefix}btn-bg: #{$gray-200};
      --#{$prefix}btn-hover-bg: #{darken($gray-200, 6%)};
      --#{$prefix}btn-active-bg: #{darken($gray-200, 6%)};
    }


    // Video button

    .btn-video {
      --#{$prefix}btn-video-bg: #{$btn-video-dark-mode-bg};
      --#{$prefix}btn-video-hover-bg: #{$btn-video-dark-mode-hover-bg};
      --#{$prefix}btn-video-color: #{$btn-video-dark-mode-color};
      --#{$prefix}btn-video-hover-color: #{$btn-video-dark-mode-hover-color};
      --#{$prefix}btn-video-shadow: #{$btn-video-dark-mode-box-shadow};
      --#{$prefix}btn-video-hover-shadow: #{$btn-video-dark-mode-hover-box-shadow};
    }
    

    // Scroll to top button

    .btn-scroll-top {
      --#{$prefix}btn-scroll-top-color: #{$btn-scroll-top-dark-mode-color};
      --#{$prefix}btn-scroll-top-hover-color: #{$btn-scroll-top-dark-mode-hover-color};
      --#{$prefix}btn-scroll-top-bg: #{$btn-scroll-top-dark-mode-bg};
      --#{$prefix}btn-scroll-top-hover-bg: #{$btn-scroll-top-dark-mode-hover-bg};
    }


    // Forms

    .form-label,
    .col-form-label {
      color: $form-label-dark-mode-color;
    }
    .form-text {
      color: $form-text-dark-mode-color;
    }
    .form-control,
    .form-select {
      border-color: $input-dark-mode-border-color;
      background-color: $input-dark-mode-bg;
      color: $input-dark-mode-color;
      &:focus {
        border-color: $input-dark-mode-focus-border-color;
        box-shadow: none;
      }
      &:disabled,
      &[readonly] {
        border-color: $input-dark-mode-disabled-border-color;
        background-color: $input-dark-mode-disabled-bg;
      }      
    }
    .form-control {
      &::placeholder {
        color: $input-dark-mode-placeholder-color;
      }
      &::file-selector-button {
        @include gradient-bg($form-file-dark-mode-button-bg);
        color: $form-file-dark-mode-button-color;
      }
      &:hover:not(:disabled):not([readonly])::file-selector-button {
        @include gradient-bg($form-file-dark-mode-button-bg);
        color: $form-file-dark-mode-button-color;
      }
      &::-webkit-file-upload-button {
        @include gradient-bg($form-file-dark-mode-button-bg);
        color: $form-file-dark-mode-button-color;
      }
      &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
        @include gradient-bg($form-file-dark-mode-button-bg);
        color: $form-file-dark-mode-button-color;
      }
      &:focus:not(:disabled):not([readonly])::file-selector-button {
        @include gradient-bg($form-file-button-hover-bg);
        color: $form-file-button-color;
      }
      &:focus:not(:disabled):not([readonly])::-webkit-file-upload-button {
        @include gradient-bg($form-file-button-hover-bg);
        color: $form-file-button-color;
      }
    }
    .form-select {
      background-image: escape-svg($form-select-dark-mode-indicator);
    }
    .form-floating .form-control,
    .form-floating .form-select {
      &::placeholder {
        color: transparent;
      }
      &:focus ~ label {
        color: $form-label-dark-mode-focus-color;
      }
    }

    .form-range {
      &::-webkit-slider-runnable-track {
        background-color: $form-range-dark-mode-track-bg;
      }
      &::-moz-range-track {
        background-color: $form-range-dark-mode-track-bg;
      }
    }
  
    .form-check-label {
      color: $body-dark-mode-color;
    }
    .form-check-input:not(:checked):not(.is-invalid):not(:invalid) {
      border-color: $form-check-input-dark-mode-border-color;
    }
    .form-check-input:not(:checked) {
      background-color: $form-check-input-dark-mode-bg;
    }
    .form-switch {
      .form-check-input {
        background-color: $form-switch-dark-mode-bg;
        &:checked {
          background-color: $form-switch-dark-mode-checked-bg;
        }
      }
      &.mode-switch,
      &.price-switch {
        .form-check-label:first-of-type {
          color: $white;
        }
        .form-check-input {
          background-color: $form-switch-checked-bg;
          &:checked {
            & ~ .form-check-label:first-of-type {
              color: rgba($white, .6);
            }
            & ~ .form-check-label:last-of-type {
              color: $white;
            }
          }
        }
      }

      &.form-switch-success .form-check-input:checked {
        background-color: $success;
      }    
    }

    .form-control ~ .password-toggle-btn .password-toggle-indicator {
      color: rgba($white, .4);
      &:hover {
        color: rgba($white, .85);
      }
    }

    .input-group-text {
      border-color: $input-group-dark-mode-addon-border-color;
      background-color: $input-group-dark-mode-addon-bg;
      color: $input-group-dark-mode-addon-color;
    }

    .range-slider {
      --#{$prefix}range-slider-bg: #{$range-slider-dark-mode-bg};
      --#{$prefix}range-slider-handle-bg: #{$gray-200};
      --#{$prefix}range-slider-pips-border-color: rgba(#{to-rgb($white)}, .2);
    }

    .input-group {
      .input-group-text {
        &:first-of-type:not(:last-child) {
          border-right-color: transparent;
        }
        &:last-of-type:not(:first-child) {
          border-left-color: transparent;
        }
        &:first-child + .input-group-text {
          border-left-color: $input-dark-mode-border-color;
        }
      }
    }

    .was-validated :valid:not(:required):not(.btn),
    .is-valid:not(:required):not(.btn) {
      border-color: $input-dark-mode-border-color !important;
    }

    .credit-card-icon {
      background-position: 0 -26px;
    }


    // Navs

    .nav {
      --#{$prefix}nav-link-color: #{$nav-link-dark-mode-color};
      --#{$prefix}nav-link-hover-color: #{$nav-link-dark-mode-hover-color};
      --#{$prefix}nav-link-active-color: #{$nav-link-dark-mode-active-color};
      --#{$prefix}nav-link-disabled-color: #{$nav-link-dark-mode-disabled-color};
    }

    .nav-tabs {
      --#{$prefix}nav-tabs-link-bg: #{$nav-tabs-dark-mode-link-bg};
      --#{$prefix}nav-tabs-link-hover-bg: #{$nav-tabs-dark-mode-link-hover-bg};
      --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-dark-mode-link-active-bg};
      --#{$prefix}nav-tabs-link-disabled-bg: #{$nav-tabs-dark-mode-link-disabled-bg};
      --#{$prefix}nav-tabs-link-color: #{$nav-tabs-dark-mode-link-color};
      --#{$prefix}nav-tabs-link-hover-color: #{$nav-tabs-dark-mode-link-hover-color};
      --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-dark-mode-link-active-color};
      --#{$prefix}nav-tabs-link-disabled-color: #{$nav-tabs-dark-mode-link-disabled-color};
    
    }

    .nav-tabs-alt {
      --#{$prefix}nav-tabs-alt-border-color: #{$border-light-color};
    }

    .side-nav {
      --#{$prefix}side-nav-border-color: #{$side-nav-dark-mode-border-color};
    }


    // Navbar

    .navbar {
      --#{$prefix}navbar-stuck-bg: #{$dark};
      --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
      --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
      --#{$prefix}navbar-toggler-color: #{$navbar-dark-toggler-bar-color};
      --#{$prefix}navbar-color: #{$navbar-dark-color};
      --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
      --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
      --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
    }
    .navbar-stuck {
      box-shadow: none;
    }


    // Dropdowns

    .dropdown-menu {
      @extend .dropdown-menu-dark;
    }


    // Placeholders

    .placeholder {
      opacity: $placeholder-dark-mode-opacity-max;
    }
    @keyframes placeholder-glow {
      50% {
        opacity: $placeholder-dark-mode-opacity-min;
      }
    }
    .placeholder-wave {
      mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-dark-mode-opacity-min)) 75%, $black 95%);
    }

 
    // Cards

    .card {
      --#{$prefix}card-border-color: #{$card-dark-mode-border-color};
      --#{$prefix}card-bg: #{$card-dark-mode-bg};
      --#{$prefix}card-color: #{$card-dark-mode-color};
      &.shadow-sm, &.shadow,
      &.shadow-lg, &.border-0 {
        background-color: var(--#{$prefix}secondary-bg);
      }
    }
    .card-hover {
      &:hover {
        border-color: rgba($white, .3);
        background-color: var(--#{$prefix}secondary-bg);
      }
      &.border-0:not(.bg-transparent):not(.bg-light) {
        border: var(--#{$prefix}border-width) solid transparent !important;
        &:hover {
          border-color: var(--#{$prefix}card-border-color) !important;
        }
      }
      &.bg-light:hover {
        background-color: var(--#{$prefix}secondary-bg) !important;
      }
    }


    // Accordion

    .accordion {
      --#{$prefix}accordion-border-color: #{$accordion-dark-mode-border-color};
      --#{$prefix}accordion-bg: #{$accordion-dark-mode-bg};
      --#{$prefix}accordion-btn-bg: #{$accordion-dark-mode-bg};
      --#{$prefix}accordion-active-bg: #{$accordion-dark-mode-bg};
      --#{$prefix}accordion-btn-color: #{$accordion-dark-mode-button-color};
      --#{$prefix}accordion-active-color: #{$accordion-dark-mode-button-color};
      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-dark-mode-button-icon)};
      --#{$prefix}accordion-btn-icon-box-bg: #{$accordion-dark-mode-icon-box-bg};
      --#{$prefix}accordion-btn-icon-box-active-bg: #{$accordion-dark-mode-icon-box-active-bg};
    }
    .accordion-item.border-0 {
      background-color: var(--#{$prefix}secondary-bg);
    }
    .accordion-button.shadow-none {
      background-color: transparent !important;
    }


    // Popovers

    .popover {
      --#{$prefix}popover-bg: #{$popover-dark-mode-bg};
      --#{$prefix}popover-border-color: var(--#{$prefix}border-color);
      --#{$prefix}popover-body-color: var(--#{$prefix}body-color);
      --#{$prefix}popover-header-color: var(--#{$prefix}heading-color);
      --#{$prefix}popover-arrow-border: rgba(#{to-rgb($white)}, .2);
    }


    // Modal

    .modal {
      --#{$prefix}modal-bg: #{$modal-dark-mode-content-bg};
      --#{$prefix}modal-border-color: #{$modal-dark-mode-content-border-color};
      --#{$prefix}modal-border-width: #{$modal-dark-mode-content-border-width};
      --#{$prefix}modal-header-border-color: #{$modal-dark-mode-content-border-color};
      --#{$prefix}modal-footer-border-color: #{$modal-dark-mode-content-border-color};
    }


    // Alerts

    @each $color, $value in $theme-colors {
      .alert-#{$color} {
        --#{$prefix}alert-bg: rgba(#{to-rgb($value)}, .05);
        --#{$prefix}alert-border-color: rgba(#{to-rgb($value)}, .25);
      }
    }
    .alert-secondary,
    .alert-light,
    .alert-dark {
      --#{$prefix}alert-border-color: var( --#{$prefix}border-color);
    }
    .alert-secondary,
    .alert-light {
      --#{$prefix}alert-bg: var(--#{$prefix}secondary-bg);
      --#{$prefix}alert-color: var(--#{$prefix}body-color);
      --#{$prefix}alert-link-color: #{$white};
    }


    // Progress bars

    .progress {
      --#{$prefix}progress-bg: #{$progress-dark-mode-bg};
    }
    .progress-bar.bg-dark {
      --#{$prefix}progress-bar-bg: #{$light};
      --#{$prefix}progress-bar-color: #{$gray-900};
      background-color: var(--#{$prefix}progress-bar-bg) !important;
      &.progress-bar-striped {
        background-image: linear-gradient(45deg, rgba($dark, .15) 25%, transparent 25%, transparent 50%, rgba($dark, .15) 50%, rgba($dark, .15) 75%, transparent 75%, transparent);
      }
    }
    

    // List group

    .list-group {
      --#{$prefix}list-group-color: #{$list-group-dark-mode-color};
      --#{$prefix}list-group-border-color: #{$list-group-dark-mode-border-color};
      --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
      --#{$prefix}list-group-disabled-color: #{$list-group-dark-mode-disabled-color};
      --#{$prefix}list-group-action-color: #{$list-group-dark-mode-action-color};
      --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
    }


    // Toasts

    .toast {
      --#{$prefix}toast-bg: #{$toast-dark-mode-bg};
      --#{$prefix}toast-border-color: var(--#{$prefix}border-color);

      background: var(--#{$prefix}toast-bg);
    }


    // Breadcrumb

    .breadcrumb-item {
      --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-dark-mode-active-color};
    }


    // Pagination

    .pagination {
      --#{$prefix}pagination-color: #{$pagination-dark-mode-color};
      --#{$prefix}pagination-hover-color: #{$pagination-dark-mode-hover-color};
      --#{$prefix}pagination-hover-bg: #{$pagination-dark-mode-hover-bg};
      --#{$prefix}pagination-focus-bg: #{$pagination-dark-mode-hover-bg};
      --#{$prefix}pagination-disabled-color: #{$pagination-dark-mode-disabled-color};
    }


    // Close

    .btn-close {
      filter: $btn-close-white-filter;
    }


    // Offcanvas
    
    .offcanvas, .offcanvas-sm, .offcanvas-md,
    .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl {
      --#{$prefix}offcanvas-bg: #{$offcanvas-dark-mode-bg-color};
      &.bg-secondary {
        background-color: #14171f !important;
      }
    }


    // Code

    :not(pre) > code[class*='language-'],
    pre[class*='language-'],
    pre {
      --#{$prefix}pre-bg: #{$pre-dark-mode-bg};
      --#{$prefix}pre-line-numbers-border-color: #{$pre-dark-mode-line-numbers-border-color};
      --#{$prefix}pre-line-numbers-color: #{$pre-dark-mode-line-numbers-color};
      --#{$prefix}pre-tag-color: #5960f3;
      --#{$prefix}pre-comment-color: rgba(#{to-rgb($white)}, .5);
      --#{$prefix}pre-attr-name-color: #4da2f7;
      --#{$prefix}pre-attr-value-color: #f33185;
      --#{$prefix}pre-class-name-color: #4ddcda;    

      box-shadow: none;
    }
    code[class*="language-"],
    pre[class*="language-"],
    pre > code,
    pre {
      --#{$prefix}pre-color: #{$pre-dark-mode-color};
    }
    kbd {
      background-color: $kbd-dark-mode-bg;
      color: $kbd-dark-mode-color;
    }


    // Carousel

    .btn-prev, .btn-next {
      --#{$prefix}carousel-nav-btn-bg: #{$carousel-dark-mode-nav-btn-bg};
      --#{$prefix}carousel-nav-btn-color: #{$carousel-dark-mode-nav-btn-color};
      --#{$prefix}carousel-nav-btn-box-shadow: none;
      --#{$prefix}carousel-nav-btn-disabled-color: rgba(#{to-rgb($carousel-dark-mode-nav-btn-color)}, .5);
    }
    .swiper-pagination {
      --#{$prefix}carousel-pagination-bullet-bg: #{$carousel-dark-mode-bullet-bg};
      --#{$prefix}carousel-pagination-bullet-active-bg: #{$carousel-dark-mode-bullet-active-bg};
      --#{$prefix}carousel-pagination-progressbar-bg: #{$carousel-dark-mode-progressbar-bg};
    }
    .swiper-scrollbar {
      --#{$prefix}carousel-scrollbar-bg: #{$carousel-dark-mode-scrollbar-bg};
      --#{$prefix}carousel-scrollbar-drag-bg: #{$carousel-dark-mode-scrollbar-drag-bg};
    }
    .offcanvas, .offcanvas-sm, .offcanvas-md,
    .offcanvas-lg, .offcanvas-xl, .offcanvas-xl {
      .swiper-scrollbar-drag {
        opacity: .55;
      }
    }
    

    // Steps

    .steps {
      --#{$prefix}steps-number-bg: #{$steps-dark-mode-number-bg};
      --#{$prefix}steps-number-inner-bg: #{$steps-dark-mode-number-inner-bg};
    }


    // Audio player

    .ap-seek-slider::-webkit-slider-runnable-track {
      background: linear-gradient(to right, rgba($white, .55) var(--buffered-width), rgba($white, .3) var(--buffered-width));
    }
  }
}