mirror-web/static/css/_dark.scss

// .nav-right {
//   display: flex;
//   flex-direction: row;
//   align-items: center;
// }

.navbar .container {
  display: flex;
  align-items: center;

  > * {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .navbar-nav {
    display: flex;
  }
  .navbar-nav > li {
    float: none !important;
  }
}

.dark-switch {
  $this: &;
  flex: 1;
  position: relative;
  height: 36px;

  @media (max-width: 991px) and (min-width: 768px) {
    margin-right: -20px;
  }

  &-inner {
    height: 36px;
    width: 36px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }

  &-icon {
    opacity: 0;
    transform: scale(0.8);

    font-size: 18px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    right: 0;
    top: 0;

    transition: opacity .2s ease-in;
    pointer-events: none;

    @keyframes icon-exit {
      0% {
        transform: none;
      }

      100% {
        transform: translateY(-10px);
      }
    }

    animation-duration: 0.2s;
    animation-timing-function: ease-in;
    animation-name: icon-exit;

    &::after {
      font-size: 12px;
      position: absolute;
      right: 100%;
      bottom: 50%;
      opacity: 0;
      @media (max-width: 991px) and (min-width: 768px) {
        right: unset;
        bottom: calc(100% - 10px);
        right: 50%;
      }
    }
  }

  @each $mode in "light", "dark", "darker", "lighter" {
    &[data-mode="#{$mode}"] {
      #{$this}-icon[data-active="#{$mode}"] {
        position: relative;
        transition: transform .2s ease-out, opacity .2s ease-out;
        transition-delay: .15s;
        opacity: .8;
        transform: none;
        pointer-events: all;

        @keyframes icon-enter {
          0% {
            transform: translateY(10px);
          }

          100% {
            transform: none;
          }
        }

        animation-duration: 0.2s;
        animation-timing-function: ease-in;
        animation-name: icon-enter;
        animation-delay: .1s;

        &:hover {
          opacity: 1;
        }

        @keyframes hint-reveal {
          0% {
            transform: translate(0, 50%);
            opacity: 1;
          }

          100% {
            transform: translate(10px, 50%);
            opacity: 0;
          }
        }

        @keyframes hint-reveal-top {
          0% {
            transform: translate(50%, 0);
            opacity: 1;
          }

          100% {
            transform: translate(50%, -10px);
            opacity: 0;
          }
        }

        &::after {
          content: "#{$mode}";
          animation-fill-mode: both;
          animation-iteration-count: 1;
          animation-name: hint-reveal;
          @media (max-width: 991px) and (min-width: 768px) {
            animation-name: hint-reveal-top;
          }
          animation-duration: .2s;
          animation-delay: 2s;
          @if $mode == "darker" {
            animation-delay: 20s;
          }
        }
      }
    }
  }
}

.darker-surrogate {
  z-index: -1;
  fill: transparent;
}

.darker-canvases > canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  mix-blend-mode: normal;
}

.darker-canvases {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 100000;
  pointer-events: none;
  mix-blend-mode: multiply;

  body.darker-cleanup & {
    transition: opacity 1s ease-in;
    opacity: 0;
  }
}

.darker-engage {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in;

  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 100001;
  background: black;

  body.darker-engaging & {
    transition: none;
    opacity: 1;
    pointer-events: all;
  }
}

.label-status, .label-new {
  position: relative;
}

.darker-text {
  position: relative;
}

.darker-rounded-surrogate {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  fill: none;
}

.input-wrapper {
  display: inline-block;
  position: relative;
  &-search {
    margin: 20px 10px 0 0;
    float: right;
    border-radius: 1px;

    input#search {
      margin: 0;
    }
  }
}

#mirror-list tbody .row:not([display="true"]) {
  display: none;
}

.brand-img-text {
  fill: #2f4b68;

  @include dark(&) {
    fill: white;
  }
}

@keyframes flame-jump {
  0% {
    transform: translate(-50%, -50%) scale(1.5);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.7);
  }

  100% {
    transform: translate(-50%, -50%) scale(1.5);
  }
}

.flames {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;

  svg {
    position: absolute;
    transform: translate(-50%, -50%);
    animation: flame-jump .2s infinite linear;
    use {
      fill: rgb(240, 100, 24);
    }
  }
}

.dark-switch-hint {
  width: 200px;
  position: absolute;
  right: 18px;
  top: 100%;
  transform: translate(50%, 0px);
  border-radius: 8px;
  box-shadow: rgba(0,0,0,.3) 0 4px 12px;

  text-align: center;
  padding: 10px 20px;
  font-size: 12px;
  z-index: 10;
  background: white;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;

  @include dark(&) {
    background: $color_bg_dark;
  }

  &-ack {
    transform: translate(50%, 20px);
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 767.999px) {
  .navbar-right {
    position: absolute;
    top: 80px;
    width: 100vw;
    right: 0;
    background: white;
    z-index: 20;
    @include dark(&) {
      background: $color_bg_dark;
    }
  }
}


@font-face {
    font-family: 'Source Han Sans SC';
    src: url('../fonts/sss-regular.otf') format('otf'),
         url('../fonts/sss-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Source Han Sans SC';
    src: url('../fonts/sss-bold.otf') format('otf'),
         url('../fonts/sss-bold.woff2') format('woff2');
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}