WGShare.Client.Electron/src/utils/styles/App.scss

$btn-background-color: #3F51B5;
$btn-border-background-color: #1E1E1F;
$btn-border-text-color: #5575F2;
$input-background-color: #28282C;
$input-border-color: #404145;
$table-header-background-color: #1B1E24;
$table-content-background-color: rgb(22, 25, 30);
$pagination-background-color: #20242C;
$pagination-hover-background-color: #5575F2;

.ant-select {
  .ant-select-selector {
    background-color: $input-background-color !important;
    border: 1px solid $input-border-color !important;
    box-sizing: border-box;

    .ant-select-selection-item {
      color: white;
    }

    .ant-select-selection-placeholder {
      color: #EEEEEE;
    }
  }

  .ant-select-suffix {
    color: white !important;
  }
}

// input
.ant-input {
  background-color: $input-background-color !important;
  border: 1px solid $input-border-color;
  color: white !important;
  box-sizing: border-box;

  &::placeholder {
    color: #E6E6E6;
  }
}

.ant-input-disabled {
  background-color: lighten($input-background-color, 10%) !important;
}

.ant-input-affix-wrapper {
  background-color: $input-background-color !important;
  border: 1px solid $input-border-color;
  box-sizing: border-box;

  .ant-input {
    color: white !important;
  }

  .ant-input-password-icon {
    color: white !important;
  }

  .ant-input-show-count-suffix {
    color: white;
  }
}

.ant-input-disabled {
  background-color: lighten($input-background-color, 10%) !important;
}

// button
.m-ant-btn.ant-btn {
  background-color: $btn-background-color;
  box-shadow: none;

  &:hover {
    background-color: lighten($btn-background-color, 10%) !important;
  }

  &:active {
    background-color: darken($btn-background-color, 10%) !important;
  }
}

.m-border-ant-button.ant-btn {
  border: 1px solid $btn-border-text-color !important;
  color: $btn-border-text-color !important;
  background-color: $btn-border-background-color !important;
}

// checkbox
.ant-checkbox-wrapper {
  color: #848484;

  .ant-checkbox {
    .ant-checkbox-inner {
      background-color: $input-background-color !important;
      border: 1px solid $input-border-color;

      &::after {
        background-color: $btn-background-color !important;
      }
    }
  }

  .ant-checkbox-checked {
    .ant-checkbox-inner {
      background-color: $btn-background-color !important;
      border: 1px solid $input-border-color;
    }
  }
}

.ant-checkbox-wrapper-disabled {
  .ant-checkbox {
    .ant-checkbox-inner {
      background-color: lighten($input-background-color, 20%) !important;

    }
  }

  .ant-checkbox-checked {
    .ant-checkbox-inner {
      background-color: lighten($input-background-color, 20%) !important;
    }
  }
}

// table
.ant-table {
  background-color: $table-header-background-color !important;
  border-radius: 0px !important;

  .ant-table-header {
    .ant-table-cell {
      background-color: $table-header-background-color;
      color: #808080;
      box-shadow: none;
      border-bottom: 1px solid transparent;

      &::before {
        visibility: hidden;
      }
    }
  }

  .ant-table-body {
    .ant-table-row {
      background-color: $table-content-background-color;
      color: white;

      .ant-table-cell {
        border-bottom: 1px solid #292F3A;
      }
    }

    .ant-table-row-selected {
      .ant-table-cell {
        background-color: darken($table-content-background-color, 4%) !important;
        color: white;
      }
    }

    .ant-table-cell-row-hover {
      background-color: darken($table-content-background-color, 4%) !important;
    }

    .ant-table-placeholder {
      background: transparent !important;

      .ant-table-cell {
        border: none;
      }
    }
  }
}

:where(.css-dev-only-do-not-override-98ntnt).ant-table-wrapper .ant-table-tbody>tr.ant-table-placeholder:hover>th,
:where(.css-dev-only-do-not-override-98ntnt).ant-table-wrapper .ant-table-tbody>tr.ant-table-placeholder:hover>td,
:where(.css-dev-only-do-not-override-98ntnt).ant-table-wrapper .ant-table-tbody>tr.ant-table-placeholder {
  background: transparent;
}

// pagination
.ant-pagination {
  -webkit-app-region: no-drag;

  .ant-pagination-prev {
    margin-right: 10px !important;
  }

  .ant-pagination-prev,
  .ant-pagination-next {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    background: $pagination-background-color;

    .anticon {
      color: #808080;
    }
  }

  .ant-pagination-item {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    border-radius: 50%;
    background: $pagination-background-color !important;
    margin-right: 10px !important;

    >a {
      color: #878787 !important;
    }

    &:hover {
      background: $pagination-hover-background-color !important;
      border: none;
      box-shadow: 0px 0px 10px 0px #66C8FF;

      a {
        color: black !important;
      }
    }
  }

  .ant-pagination-item-active {
    background: $pagination-hover-background-color !important;
    border: none;
    box-shadow: 0px 0px 10px 0px #66C8FF;

    a {
      color: black !important;
    }
  }

  .ant-pagination-item-ellipsis {
    color: white !important;
  }
}

// popover
.ant-popover {
  -webkit-app-region: no-drag;
}

.ant-popover:not(.ant-popconfirm) {
  .ant-popover-arrow {
    &::before {
      background-color: #07090B !important;
    }
  }

  .ant-popover-content {
    .ant-popover-inner {
      background-color: #07090B;
    }
  }
}

// modal
.ant-modal-mask {
  background-color: rgba(0, 0, 0, 0.25) !important;
}

.ant-modal {
  -webkit-app-region: no-drag;

  .ant-modal-close-icon {
    color: white;
  }

  .ant-modal-content {
    background-color: #07090B;

    .ant-modal-header {
      background-color: #07090B;

      .ant-modal-title {
        text-align: center;
        color: #EEEEEE;
        font-weight: bold;
      }
    }

    .ant-modal-body {
      max-height: 80vh;
      overflow-y: auto;
    }
  }

  .ant-modal-confirm-title {
    color: white;
  }

  .ant-modal-confirm-content {
    color: white;
  }
}

.modal-padding {
  .ant-modal-content {
    padding: 0;
  }
}

// Slider
.ant-slider {
  &:hover {
    .ant-slider-rail {
      background-color: lighten(#D9D9D9, 100%);
    }
  }

  .ant-slider-rail {
    background-color: #D9D9D9;
  }

  .ant-slider-track {
    background-color: #3672E9;
  }

  .ant-slider-handle {
    &::after {
      background-color: #3672E9;
      box-shadow: 0 0 0 2px #3672E9;
    }
  }
}

:where(.css-dev-only-do-not-override-98ntnt).ant-slider.ant-slider-disabled .ant-slider-rail {
  background-color: darken(#D9D9D9, 50%) !important;
}

// empty
.ant-empty {
  .ant-empty-description {
    color: #808080;
  }
}

.ant-radio-group {
  .ant-radio-wrapper {
    color: white;
  }

  .ant-radio-checked .ant-radio-inner {
    border-color: $btn-background-color;
    background-color: $btn-background-color;
  }
}

// ant-notification
.ant-notification {
  .ant-notification-notice-wrapper {
    background-color: #1F2022;

    .ant-notification-notice-message {
      color: white;
    }

    .ant-notification-notice-description {
      color: white;
    }

    .ant-notification-notice-close {
      color: #ccc;

      &:hover {
        color: white;
        background-color: #0f0f10;
      }
    }
  }
}