$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 { border-radius: 50%; background: $pagination-background-color; .anticon { color: #808080; } } .ant-pagination-item { 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: 90vh; 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 { background-color: $btn-background-color; border-color: $btn-background-color; } } :where(.css-dev-only-do-not-override-98ntnt).ant-radio-wrapper .ant-radio-disabled .ant-radio-inner { background-color: #28282C; border-color: #28282C; } // ant-notification .ant-notification { -webkit-app-region: no-drag; .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; } } } } // ant-message .ant-message { -webkit-app-region: no-drag; } // ant-spin-fullscreen .ant-spin-fullscreen { z-index: 10000; } .ant-picker-dropdown { -webkit-app-region: no-drag; } .ant-tabs { -webkit-app-region: no-drag; }