theme-styles.scss

:root {
  --drgstn-primary: #347eee;
  --drgstn-secondary: #fd6818;
  --drgstn-success: #48C774;
  --drgstn-warning: #ffdd00;
  --drgstn-danger: #c527ff;
  --drgstn-background: #ffffff;
  --drgstn-panel: #f8f8f8;
  --drgstn-info: #61c43d;
  --drgstn-text-primary: #020202;
  --drgstn-text-secondary: #eeeeee;
  --drgstn-border: rgba(0, 0, 0, 0.2);
  --drgstn-tooltip: rgba(74, 74, 74, 0.9);
  --drgstn-panel-secondary: #ffffff
}

#appWindow {
  background-color: var(--drgstn-background);


  .card-header-title, .card-content, .title {
    color: var(--drgstn-text-primary) !important;
  }

  .card {
    background-color: var(--drgstn-panel) !important;
  }

  .card-footer, .card-footer-item:not(:last-child), .tabs ul, .tabs a .tabs a:hover {
    border-color: var(--drgstn-border) !important;
  }

  .tabs a {
    color: var(--drgstn-text-primary) !important;
  }

  .tabs.is-toggle a {
    border-color: var(--drgstn-border) !important;
  }

  .tabs.is-toggle a:hover {
    background-color: var(--drgstn-panel) !important;
  }

  .tabs li.is-active a, .tabs.is-toggle li.is-active a, .tabs a:hover {
    border-color: var(--drgstn-primary) !important;
    color: var(--drgstn-primary) !important;
  }

  .content h4, .content h6 {
    color: var(--drgstn-text-primary) !important;
  }

  .has-text-normal, .modal-card-title {
    color: var(--drgstn-text-primary) !important;
  }

  .modal-card, .modal-card-body {
    background-color: var(--drgstn-panel) !important;
  }

  .modal-card-head, .modal-card-foot {
    border-color: var(--drgstn-border) !important;
    background-color: var(--drgstn-border) !important;
  }

  .modal-card-body {
    .label {
      color: var(--drgstn-text-primary) !important;
    }

    .input, .select select, .textarea, .box {
      background-color: var(--drgstn-panel) !important;
      border-color: var(--drgstn-border) !important;
      color: var(--drgstn-text-primary) !important;
    }
  }


  .fa-check {
    color: var(--drgstn-success) !important;
  }

  app-task-list a, a.card-header-icon {
    color: var(--drgstn-secondary) !important;
  }

  a:hover {
    color: var(--drgstn-primary) !important;
  }

  .button.is-primary {
    background-color: var(--drgstn-primary) !important;
    border-color: transparent !important;
    color: var(--drgstn-text-secondary) !important;
  }

  .button.is-primary.is-outlined {
    background-color: transparent !important;
    border-color: var(--drgstn-border) !important;
    color: var(--drgstn-primary) !important;
  }


  .button.is-primary.is-focused, .button.is-primary:focus {
    background-color: var(--drgstn-primary) !important;
    border-color: transparent !important;
    color: var(--drgstn-text-secondary) !important;
  }

  .button.is-primary.button.is-hovered, .button.is-primary.button:hover {
    color: var(--drgstn-text-secondary) !important;
    background-color: var(--drgstn-primary) !important;
  }

  .button.is-primary.is-focused:not(:active), .button.is-primary:focus:not(:active) {
    box-shadow: none !important;
  }

  .button.is-danger.is-outlined {
    border-color: var(--drgstn-danger) !important;
    color: var(--drgstn-danger) !important;
  }

  .button.is-success {
    background-color: var(--drgstn-success) !important;
    color: var(--drgstn-text-secondary) !important;
  }


  .text-primary {
    color: var(--drgstn-primary) !important;
  }

  footer a .text-danger:focus, footer a .text-danger:hover {
    color: var(--drgstn-danger) !important;
  }

  footer .text-danger, a .text-danger {
    color: var(--drgstn-danger) !important;
  }

  .is-primary {
    background-color: var(--drgstn-primary) !important;
  }


  .ng-select .ng-select-container .ng-value-container .ng-input > input {
    color: var(--drgstn-text-primary) !important;
  }

  .fa-search.investigational, .fa-pause {
    color: var(--drgstn-warning) !important;
  }


  .fa-exclamation-triangle, .fa-times, .help, .delete:after, .delete:before, .modal-close:after, .modal-close:before {
    color: var(--drgstn-danger) !important;
  }

  .fa-check {
    color: var(--drgstn-success) !important;
  }

  .table {
    background-color: var(--drgstn-panel) !important;
    color: var(--drgstn-text-primary) !important;
  }

  .table thead td, .table thead th {
    color: var(--drgstn-text-primary) !important;
  }


  .button.is-hovered, .button:hover, .button {
    background-color: var(--drgstn-panel) !important;
    color: var(--drgstn-text-primary) !important;
    border-color: var(--drgstn-border) !important;
  }

  a {
    color: var(--drgstn-secondary);
  }

  a:hover {
    color: var(--drgstn-text-primary)
  }


  ::-webkit-scrollbar {
    width: 5px;
  }

  ::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--thumbBG);
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
  }

  ::-moz-scrollbar-button:decrement,
  ::-moz-scrollbar-button:increment,
  ::-webkit-scrollbar-button:decrement,
  ::-webkit-scrollbar-button:increment {
    width: 0px;
  }
}

// scrolllbar styles
network-expander {
  --thumbBG: var(--drgstn-primary);
  --scrollbarBG: var(--drgstn-background);
}

network-expander {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}