open-redirect/web/src/styles/theme.scss

.open-redirect {
  $headerColor: #ef9d0d;

  // generated with https://colorffy.com/dark-theme-generator?colors=314390-121212
  $textColor: #fff;
  $textColorHighlight: #ef9d0d;
  $textColorHighlight2: #b76f00;

  // https://tailwindcss.com/docs/customizing-colors
  $backgroundColor: #1e293b; // slate-800
  $backgroundColor2: #0f172a; // slate-900
  $backgroundColor3: #334155; // slate-700

  $accentColor: #475569; // slate-600
  $infoColor: #1ea97c;
  $warningColor: #ffc107;
  $errorColor: #ff5252;

  background-color: $backgroundColor2;

  @layer utilities {
    .highlight {
      color: $textColorHighlight;
    }

    .highlight2 {
      color: $textColorHighlight2 !important;
    }

    .bg {
      background-color: $backgroundColor;
    }

    .bg2 {
      background-color: $backgroundColor2;
    }

    .bg3 {
      background-color: $backgroundColor3;
    }

    .accent {
      color: $accentColor;
    }

    .info {
      color: $infoColor;
    }

    .warning {
      color: $warningColor;
    }

    .error {
      color: $errorColor;
    }

    .deleted {
      color: $accentColor !important;
    }

    .divider {
      border-bottom: 1px solid $accentColor;
    }
  }

  h1,
  h2,
  h3 {
    color: $headerColor;
  }

  input, .p-checkbox-box, .p-dropdown {
    border: 1px solid $accentColor;
  }

  .app {
    .component {
      background-color: $backgroundColor;
    }
  }

  .btn-base {
    color: $textColor;
    background: $textColorHighlight !important;
    border: 1px solid $textColorHighlight;

    &:focus {
      box-shadow: none !important;
    }

    &:hover {
      background: transparent !important;
    }
  }

  .btn {
    .p-button {
      @extend .btn-base;
    }
  }

  .icon-btn {
    background-color: transparent !important;
    border: none;

    .p-button {
      color: $textColor;
      background: transparent !important;
      padding: 0;

      &:hover {
        color: $textColorHighlight;
      }
    }
  }

  .text-btn {
    background-color: transparent !important;

    .p-button {
      color: $textColor;
      background: transparent !important;
      border: none !important;

      &:hover {
        color: $textColorHighlight;
        background-color: transparent !important;
      }
    }
  }

  .icon-btn-without-hover {
    &:hover {
      background-color: transparent !important;
    }
  }

  .icon-btn {
    &:hover {
      background-color: transparent !important;
    }
  }

  .danger-btn,
  .danger-icon-btn {
    background-color: transparent !important;

    .p-button {
      color: $textColor;
      background: transparent !important;

      &:hover {
        color: $errorColor;
      }
    }
  }

  .hidden-columns-select {
    .active-while-panel-open {
      .p-button {
        color: $textColorHighlight;
      }
    }
  }

  .custom-spinner {
    .p-progress-spinner-circle {
      stroke: $textColorHighlight !important;
    }
  }

  p-paginator {
    .p-paginator-element {
      &:hover {
        color: $textColorHighlight;
      }
    }
  }

  .p-highlight {
    color: $textColorHighlight2;
    box-shadow: none !important;

    &:hover {
      color: $textColorHighlight2 !important;
    }
  }

  .p-multiselect,
  .p-paginator,
  .p-dropdown,
  input {
    background-color: $backgroundColor;
  }

  .p-inputtext:enabled:focus,
  .p-inputtext:enabled:hover,
  .p-multiselect:not(.p-disabled):hover,
  .p-multiselect:not(.p-disabled).p-focus,
  .p-dropdown:not(.p-disabled):hover,
  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover,
  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
    border-color: $textColorHighlight;
    box-shadow: none !important;
  }

  .p-checkbox .p-checkbox-box.p-highlight {
    border-color: $textColorHighlight;
    background: $textColorHighlight;
    box-shadow: none !important;
  }

  p-checkbox {
    .p-checkbox {
      .p-checkbox-box {
        background-color: $backgroundColor;
      }

      .p-checkbox-box.p-highlight {
        border-color: $textColorHighlight;
        background-color: $textColorHighlight;
      }
    }
  }

  p-inputSwitch {
    .p-inputswitch {
      &.p-focus .p-inputswitch-slider {
        box-shadow: none !important;
      }

      .p-inputswitch-slider {
        background-color: $headerColor;

        &.p-highlight {
          border-color: $textColorHighlight;
          background: $textColorHighlight;
          box-shadow: none !important;
        }
      }

      &.p-inputswitch-checked {
        .p-inputswitch-slider {
          background-color: $headerColor;

          &:before {
            background-color: $textColor;
          }
        }
      }
    }
  }

  p-panel-menu {
    .p-panelmenu {
      .p-panelmenu-content
      .p-menuitem:not(.p-highlight):not(.p-disabled)
      > .p-menuitem-content:hover
      .p-menuitem-link
      .p-menuitem-text,
      .p-panelmenu-content
      .p-menuitem:not(.p-highlight):not(.p-disabled)
      > .p-menuitem-content:hover
      .p-menuitem-link
      .p-menuitem-icon,
      .p-panelmenu
      .p-panelmenu-content
      .p-menuitem:not(.p-highlight):not(.p-disabled)
      > .p-menuitem-content:hover
      .p-menuitem-link
      .p-submenu-icon {
        color: $textColorHighlight;
      }

      .p-panelmenu-header-content {
        &:hover {
          .p-panelmenu-header-action {
            color: $textColorHighlight;
          }
        }
      }
    }
  }

  p-menubar {
    .p-menubar {
      background-color: $backgroundColor2;
    }

    .p-menubar-root-list {
      display: flex;
      gap: 10px;
    }

    .p-menuitem {
      border-radius: 0.5rem;

      &:hover {
        .p-menuitem-content .p-menuitem-link .p-menuitem-text {
          color: $textColorHighlight2;
        }
      }
    }

    .p-focus {
      background-color: $backgroundColor2;

      .p-menuitem-content {
        background-color: $backgroundColor2;
      }
    }
  }

  p-dropdown {
    .p-dropdown:not(.p-disabled).p-focus {
      box-shadow: none !important;
      border-color: $headerColor !important;
    }

    .p-dropdown-panel {
      background-color: $backgroundColor2;
    }
  }

  p-multiselect {
    .p-multiselect-panel,
    .p-multiselect-panel .p-multiselect-header {
      background-color: $backgroundColor2;
    }
  }

  p-table {
    .p-datatable {
      .p-datatable-header,
      .p-datatable-footer,
      .p-datatable-thead > tr > th,
      .p-datatable-tbody > tr {
        background-color: $backgroundColor;
        border-bottom: 1px solid $accentColor;
      }

      .p-sortable-column.p-highlight,
      .p-sortable-column:not(.p-highlight):hover {
        background-color: transparent !important;
      }

      .p-sortable-column:not(.p-highlight):hover,
      .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
        color: $textColorHighlight;
      }
    }
  }

  p-sidebar {
    .p-sidebar {
      background-color: $backgroundColor;
    }
  }

  .p-steps .p-steps-item.p-highlight .p-steps-number {
    background-color: $headerColor;
    color: $textColor;
  }

  .p-dialog {
    .p-dialog-header {
      background-color: $backgroundColor;
    }

    .p-dialog-content {
      background-color: $backgroundColor;
      padding-top: 1rem;
    }

    .p-dialog-footer {
      background-color: $backgroundColor;
    }
  }

  .p-badge {
    background: $headerColor;
    color: $textColor;
  }

  p-password {
    background-color: transparent;
    border: none;

    .p-password-panel {
      background-color: transparent;
    }
  }

  p-slider {
    .p-slider {
      .p-slider-range {
        background: $headerColor;
      }

      .p-slider-handle {
        border-color: $headerColor;

        &:hover {
          background: $headerColor;
        }

        &:focus {
          box-shadow: none !important;
        }
      }
    }
  }
}