_dark.scss

/* purgecss start ignore */

$background-color: rgb(43, 58, 66);
$button-hover-color: rgb(33, 48, 56);
$light-background-color: rgb(51, 71, 82);
$input-background-color: rgb(189, 211, 222);
$loading-background-color: rgba(43, 58, 66, 0.9);
$text-color: rgb(223, 235, 240);
$discrete-text-color: rgba(223, 235, 240, 0.904);
$border-color: rgb(63, 88, 102);
$light-shadow-color: rgba(223, 235, 240, 0.15);
$shadow-color: rgba(63, 102, 97, 0.95);
$box-shadow: 0px 1px 3px 0px rgba(63, 88, 102, 0.95),
  0px 0px 0px 1px rgba(63, 88, 102, 0.98);
$link-color: rgb(255, 144, 0);

.theme-dark {
  background-color: $background-color;
  .ui.labeled.input {
    input,
    .label {
      background-color: $input-background-color;
      &::placeholder {
        color: $light-background-color;
      }
    }
  }
  .ui.statistics .statistic {
    > .label,
    > .value {
      color: $text-color;
    }
  }
  .main.with-background, .opaque {
    background-color: $background-color;
  }
  .ui.link.list.list .active.item,
  .ui.link.list.list .active.item a:not(.ui) {
    color: inherit;
  }
  .ui.form textarea,
  .ui.form select,
  .ui.selection.dropdown,
  .ui.dropdown.selected,
  .ui.dropdown .menu .selected.item,
  .ui.form input:not([type]),
  .ui.form input[type="date"],
  .ui.form input[type="datetime-local"],
  .ui.form input[type="email"],
  .ui.form input[type="number"],
  .ui.form input[type="password"],
  .ui.form input[type="search"],
  .ui.form input[type="tel"],
  .ui.form input[type="time"],
  .ui.form input[type="text"],
  .ui.form input[type="file"],
  .ui.form input[type="url"] {
    background-color: $input-background-color;
    &::placeholder {
      color: $light-background-color;
    }
  }
  .ui.dropdown .menu .item:hover {
    background-color: $light-background-color;
    color: $text-color;
  }
  .main.pusher > .ui.secondary.menu {
    background-color: $background-color;
    box-shadow: inset 0px -2px 0px 0px $light-background-color;
    .ui.item {
      color: $text-color;
      &.active {
        box-shadow: inset 0px -2px 0px 0px $shadow-color;
      }
    }
  }
  .ui.modal {
    > .header,
    > .content,
    > .actions {
      background-color: $background-color;
    }
    > .header {
      border-bottom: 1px solid $border-color;
    }

    > .actions {
      border-top: 1px solid $border-color;
    }
  }
  main,
  .main,
  footer,
  .modal {
    .ui.menu {
      background-color: $light-background-color;
      .item {
        color: $text-color;
      }
    }
    .ui.secondary.menu .dropdown.item:hover,
    .ui.secondary.menu .link.item:hover,
    .ui.secondary.menu a.item:hover {
      background: $background-color;
      color: $text-color;
    }
    .header,
    .ui.form .field > label,
    .sub.header {
      color: $text-color;
    }
    .ui.attached.header {
      background-color: transparent;
    }
    .ui.toggle.checkbox input:checked ~ .box,
    .ui.toggle.checkbox input:checked ~ label {
      color: $text-color !important;
    }
    .ui.toggle.checkbox .box::before,
    .ui.toggle.checkbox label::before {
      background-color: $light-background-color;
    }
    a:not(.ui):not(.discrete) {
      color: $link-color;
    }
    .ui.segment:not(.basic) {
      background-color: $light-background-color;
    }
    .link {
      color: $link-color;
    }
    .ui.list,
    .ui.dropdown {
      .item,
      div.item,
      a.item,
      .button.item {
        background-color: $background-color;
        color: $discrete-text-color;
      }
      .selected.item:not(:hover) {
        color: $background-color;
      }
    }
    .segment .ui.list .item {
      background-color: transparent;
    }
    .ui.divided.items > .item:not(:first-child) {
      border-top: 1px solid $border-color;
    }
    .ui.items {
      .extra {
        color: $discrete-text-color;
      }
    }
    label,
    .toggle label {
      color: $text-color !important;
    }
    &,
    .main.pusher,
    .ui.vertical.segment {
      color: $text-color;
      background-color: $background-color;
    }

    .discrete {
      color: $discrete-text-color;
    }

    .ui.table thead th,
    .ui.table {
      color: $text-color;
    }
    .ui.divider:not(.vertical):not(.horizontal) {
      border-top: 1px solid $border-color;
      border-bottom: 1px solid $border-color;
    }
    .ui.cards > .card,
    .ui.card {
      color: $text-color;
      background-color: $background-color;
      &:not(.flat) {
        box-shadow: $box-shadow;
      }
      .content,
      .header,
      .description {
        color: $text-color;
      }
      .extra,
      .meta {
        color: $discrete-text-color;
      }
    }
    .playlist.card {
      .attached.button {
        background-color: $light-background-color;
      }
    }

    // buttons
    [class="ui button ui button"],
    [class="ui button"],
    [class="ui icon button"],
    [class="ui fluid button"],
    [class="ui cancel button"] {
      background-color: $light-background-color;
      color: $text-color;
      &:hover {
        background-color: $button-hover-color;
      }
    }
    .ui.buttons > .ui.button:not(.basic):not(.inverted),
    .ui.buttons:not(.basic):not(.inverted) > .button {
      box-shadow: 0px 0px 0px 1px $light-shadow-color inset;
    }
    .ui.basic.buttons:not(:hover):not(.green):not(.orange):not(.yellow):not(.red)
      .button,
    .ui.basic.button {
      box-shadow: 0px 0px 0px 1px $text-color inset;
      &:not(:hover):not(.green):not(.orange):not(.yellow):not(.red) {
        color: $text-color !important;
      }
    }
    .ui.basic.buttons .button,
    .ui.basic.button {
      &:hover {
        color: $text-color !important;
      }
    }
    .ui.basic.buttons:not(.green):not(.orange):not(.yellow):not(.red)
      .button:hover,
    .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):hover,
    .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):active,
    .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):focus {
      color: $background-color !important;
    }
    // loading /dimmers
    .ui.loading.form::before {
      background-color: $loading-background-color;
    }
    .ui.inverted.dimmer {
      background-color: $loading-background-color;
    }
    // table
    .ui.basic.table tbody tr,
    .ui.table tr td {
      border-bottom: 1px solid $border-color;
    }
    .ui.table thead th {
      border-bottom: 1px solid $border-color;
    }
    .ui.table {
      &:not(.basic) {
        &,
        thead th {
          background-color: $light-background-color;
        }
      }
    }
  }
  .ui.list > .item .description {
    color: $text-color;
  }
  .ui.link.list.list a.item:hover,
  .ui.link.list.list .item a:not(.ui):not(.button):hover, .ui.list > .item a.header {
    color: $link-color !important;
  }
  [data-tooltip]::after {
    background-color: $light-background-color;
    color: $text-color;
  }
  .ui.progress > .label {
    color: $text-color;
  }
  i.grey.icon {
    color: $text-color !important;
  }
  input {
    &::selection,
    &::-moz-selection {
      background: $background-color;
      color: $text-color;
    }
  }

  .ui.fixed-header.segment {
    background-color: $background-color;
    box-shadow: inset 0px -1px 0px 0px rgba(34, 36, 38, 0.15);
  }
  .ui.fixed-footer.segment {
    box-shadow: inset 0px 1px 0px 0px rgba(34, 36, 38, 0.15);
  }
  @include media("<desktop") {
    background-color: $background-color;
  }
}

/* purgecss end ignore */