dark.scss

@charset "utf-8";
@import "variables.scss";
body.dark {
  background-color: $almost-black;
  color: $almost-white;
  code, pre {
    background-color: $almost-black!important;
  }
  a:hover,
  a:focus-visible {
    color: $has-text-link;
  }
  strong {
    color: $almost-white;
  }
  input,
  select {
    border: none!important;
    background: transparent!important;
    color: white!important;
  }
  input[type="text"],
  input[type="search"],
  textarea {
    background: $darker-grey!important;
    border: none;
    color: white;
  }
  input:focus,
  select:focus {
    background-color: $darker-grey!important;
  }
  .is-focused .inputWrapper,
  .inputWrapper.is-focused {
    label,
    i.fa-search,
    .todoTableSearchQuestionmark i {
      color: $almost-white!important;
    }
  }
  input::placeholder {
    color: $dark-grey!important;
  }
  input[type="checkbox"]:focus,
  input[type="checkbox"]:active {
    outline: none;
    box-shadow: none!important;
  }
  input[type="range"] {
    background: $dark-grey!important;
  }
  input[type="range"]::-webkit-slider-thumb {
    background: $almost-white;
  }
  button {
    color: $almost-white;
    background: $almost-black;
    i {
      color: $almost-white;
    }
  }
  ::after {
    border-color: $almost-white!important;
  }
  table {
    width: 100%;
    background-color: transparent!important;
    color: $lighter-grey!important;
  }
  table tr td {
    border-color: $almost-black!important;
  }
  table tr th {
    color: white!important;
  }
  table.files {
    tr {
      td:last-child {
        a,
        a:hover {
          color: $almost-white!important;
        }
        a:focus-visible {
          color: $almost-black!important;
        }
      }
    }
    button {
      color: $almost-white;
      background: $almost-black;
    }
    button:focus-visible {
      color: $almost-black!important;
      background: $almost-white!important;
    }
    button:disabled {
      opacity: 0.5;
    }
  }
  nav {
    background-color: $darker-grey;
    svg {
      color: $lighter-grey;
    }
    ul {
      li.logo {
        color: $almost-white!important;
        background: none;
      }
      li a {
        color: $almost-white!important;
        border-bottom: 1px solid $even-darker-grey;
      }
      li a:hover,
      li a:focus {
        color: $lighter-grey!important;
        border-bottom: none;
        background-color: $even-darker-grey;
      }
      li a.is-highlighted {
        color: $lighter-grey!important;
        border-bottom: none;
        background-color: $even-darker-grey;
      }
    }
    ul:nth-child(2) {
      #versionNumber {
        color: $lighter-grey!important;
      }
      #versionNumber:hover {
        color: $lighter-grey!important;
      }
    }
  }
  #drawerContainer {
    .zoom {
      svg {
        color: white!important;
      }
      #zoomStatus {
        color: white!important;
      }
    }
  }
  #todoTableSearchContainer {
    background-color: $almost-black;
    input[type="search"]::-webkit-search-cancel-button {
      background-color: $almost-white;
    }
    #todoTableSearchAddTodo {
      background: $lighter-grey!important;
      color: $almost-black!important;
      i {
        color: inherit;
      }
    }
    #todoTableSearchAddTodo:hover,
    #todoTableSearchAddTodo:focus,
    #todoTableSearchAddTodo:focus-visible {
      color: $almost-black!important;
      background: white!important;
    }
    #btnToggleViewContainer {
      background: transparent!important;
    }
  }
  #resultStats {
    .tag {
      color: $lighter-grey!important;
      strong {
        color: white!important;
      }
    }
  }
  #todoTable {
    .todo#previousItem.is-highlighted {
      background-color: $even-darker-grey;
    }
    .todo:hover .cell,
    .todo.due {
      button {
        color: $almost-white;
      }
    }
    .group.due {
      color: $light-grey;
      button {
        color: inherit;
      }
    }
    .todo {
      border-color: $even-darker-grey;
      .cell.checkbox {
        a {
          color: $has-text-link;
          font-size: 1.25em;
        }
        a:focus-visible {
          color: white!important;
        }
        a:hover {
          color: white!important;
        }
      }
      .cell.checkbox,
      .cell.archive {
        a:focus-visible {
          color: $lighter-grey!important;
        }
      }
      a.cell.text {
        color: $almost-white!important;
      }
      a.cell.text:focus-visible {
        background: $darker-grey!important;
      }
      .cell.itemDueDate {
        color: white;
        i {
          color: inherit;
        }
        i.fa-sort-down {
          color: $dark-grey;
        }
      }
      .cell.itemDueDate.isToday,
      .cell.itemDueDate.isPast {
        color: $has-text-danger;
        i {
          color: inherit;
        }
      }
      .cell.itemDueDate.isTomorrow {
        i {
          color: $has-text-attention!important;
        }
      }
      .cell {
        span.contexts {
          color: $sleek-contexts-button!important;
          background: darken($sleek-contexts-button, 60%)!important;
        }
        span.projects {
          color: $sleek-projects-button!important;
          background: darken($sleek-projects-button, 60%)!important;
        }
        .is-white {
          color: $lighter-grey;
          background: none;
        }
      }
    }
  }
  #modalForm {
    i {
      color: $lighter-grey!important;
    }
    .field {
      input,
      select {
        color: white!important;
      }
      select option {
        background: $even-darker-grey;
      }
    }
    #autoCompleteContainer {
      background: $darker-grey;
      h4 {
        color: white;
      }
      section::-webkit-scrollbar-thumb:window-inactive,
      section::-webkit-scrollbar-thumb {
        background: $dark-grey;
      }
    }
  }
  #recurrencePicker {
    #recurrencePickerInput,
    .radio {
      cursor: pointer;
      background: none!important;
      color: white!important;
    }
    .radio:hover {
      color: $lighter-grey!important;
    }
    #recurrencePickerContainer {
      background: $darker-grey;
      .card-footer {
        border-color: $almost-black;
      }
    }
  }
  #drawerContainer {
    .drawer {
      background: $even-darker-grey!important;
      h4.is-4 {
        color: white;
      }
      button {
        span.tag {
          color: $dark-grey;
        }
      }
      #sortByContainer {
        li {
          background: $darker-grey;
          color: white;
          i {
            color: $light-grey;
          }
        }
        li.drag-sort-active {
          border-left: 0.2em solid white;
        }
      }
    }
    .drawer::-webkit-scrollbar-thumb:window-inactive,
    .drawer::-webkit-scrollbar-thumb {
      background: $dark-grey;
    }
    #drawerClose {
      background: $even-darker-grey!important;
    }
  }
  #todoTableWrapper {
    header {
      background-color: $almost-black;
    }
  }
  #todoTableWrapper::-webkit-scrollbar-thumb:window-inactive,
  #todoTableWrapper::-webkit-scrollbar-thumb {
    background: $even-darker-grey;
  }
  #filterContext,
  #todoContext {
    box-shadow: 0 0 1em $darker-grey!important;
    a {
      color: $almost-white!important;
    }
    a:hover {
      color: $lighter-grey!important;
      background: $darker-grey!important;
    }
    .card {
      background: $even-darker-grey;
      #filterContextDelete {
        color: $has-text-danger!important;
      }
    }
  }
  #fileTabBar {
    ul {
      background-color: $darker-grey;
      li {
        color: $mid-grey;
        i {
          color: $darker-grey;
        }
      }
      li:hover,
      li.is-highlighted:hover {
        i {
          color: $has-text-link;
        }
      }
      li.is-highlighted {
        background: $almost-black;
        color: white;
        i {
          color: $almost-black;
        }
      }
    }
  }
  .contexts {
    button {
      color: $sleek-contexts-button;
      background: darken($sleek-contexts-button, 55%);
      span.tag {
        color: darken($sleek-contexts-button, 65%)!important;
        background: lighten($sleek-contexts-button, 1%);
      }
    }
    button.is-dark,
    button:focus-visible {
      background: darken($sleek-contexts-button, 65%)!important;
      color: white;
    }
  }
  .projects {
    button {
      color: $sleek-projects-button;
      background: darken($sleek-projects-button, 55%);
      span.tag {
        color: darken($sleek-projects-button, 65%)!important;
        background: lighten($sleek-projects-button, 1%);
      }
    }
    button.is-dark,
    button:focus-visible {
      background: darken($sleek-projects-button, 65%)!important;
      color: white;
    }
  }
  .priority {
    button:not(.A):not(.B):not(.C) {
      color: white;
      background: $mid-grey;
    }
    button.is-dark:not(.A):not(.B):not(.C) {
      color: white;
      background: darken($mid-grey, 10%)!important;
    }
  }
  .toggle {
    .switch {
      .slider {
        background-color: $dark-grey;
      }
      input:checked + .slider {
        background-color: $darker-grey !important;
      }
      input:focus + .slider {
        box-shadow: none;
      }
      input:focus-visible {
        outline: 2px solid white!important;
      }
    }
  }

  .card {
    background: $even-darker-grey;
    color: $lighter-grey;
    .card-footer-item:hover {
      color: $lighter-grey!important;
    }
    .card-footer-item:focus-visible {
      color: $almost-white!important;
      background: $darker-grey!important;
    }
    .card-footer {
      border-color: $darker-grey!important;
    }
    .card-footer-item {
      border-color: $darker-grey!important;
      background: transparent;
      color: $almost-white!important;
    }
  }

  .modal.content {
    color: $lighter-grey!important;
    button,
    button,
    select {
      background: $darker-grey!important;
    }
    .select:not(.is-multiple):not(.is-loading)::after {
      border-color: white!important;
    }
    .delete,
    .modal-close,
    .tag.is-info {
      background: white!important;
      color: $even-darker-grey!important;
    }
    .tag:not(body).is-dark {
      background: $almost-black!important;
    }
    .modal-close::before,
    .modal-close::after {
      color: $even-darker-grey!important;
      background: $even-darker-grey!important;
    }
    .modal-card,
    table {
      background: $even-darker-grey;
      color: $lighter-grey!important;
      .modal-card-body::-webkit-scrollbar-thumb:window-inactive,
      .modal-card-body::-webkit-scrollbar-thumb {
        background: $darker-grey;
      }
    }
    .title,
    table th {
      color: white;
    }
    table tr,
    table th,
    table td {
      border-color: $darker-grey!important;
    }
    .tabs ul {
      border-color: transparent;
    }
    .tabs li a {
      color: white!important;
      border-color: $dark-grey!important;
    }
    .tabs li.is-active a {
      color: $has-text-link!important;
      border-color: $has-text-link!important;
    }
  }
  .message.fixed {
    background: transparent!important;
    i {
      color: white!important;
    }
    .message-body {
      color: $lighter-grey;
      background: $even-darker-grey!important;
      button {
        background: $darker-grey!important;
      }
    }
  }
  .dueDate {
    #datePickerInput,
    #datePickerInput::placeholder {
      cursor: pointer;
    }
  }
  .datepicker {
    background: transparent;
    button {
      background: transparent!important;
    }
    .datepicker-picker {
      background: $darker-grey;
      color: white;
      button,
      button:hover,
      .datepicker-header .datepicker-controls button:hover {
        background: none;
        color: inherit;
      }
      .datepicker-footer .datepicker-controls button {
        color: inherit;
      }
      .datepicker-cell {
        border-color: $darker-grey;
        background: $darker-grey;
      }
      .datepicker-cell.today,
      .datepicker-cell.today.selected {
        color: $darker-grey!important;
        background: $mid-grey!important;
      }
      .datepicker-cell.selected,
      .datepicker-cell.selected:hover,
      .datepicker-cell.selected.focused, {
        color: white!important;
        background: $has-text-link!important;
      }
      .datepicker-cell:hover,
      .datepicker-cell.focused {
        border-color: $has-text-link;
      }
    }
  }
  .contentContainer {
    .title.is-1 {
      color: white;
    }
    .subtitle,
    .subtitle strong {
      color: $lighter-grey;
    }
    .btnOnboarding:focus-visible {
      color: $lighter-grey;
    }
  }
}