/* * @Describe: 覆写dark * @Author: kexu9 * @Date: 2021-08-06 11:16:50 * @Last Modified by: kexu9 * @Last Modified time: 2021-08-06 15:17:29 */ @import './default.less'; @import 'antd/lib/style/themes/dark.less'; // @import '../color/dark-colors.less'; /* 以下是原变量修改 */ @red-5: #DB599D; @red-3: #582B4B; @red-1: #28172D; @red-deep-1: #AB487F; @gold-6: #DBAD30; @gold-3: #584925; @gold-1: #28221D; @blue-3: #2a3362; @blue-1: #161935; @blue-6: #5970DD; @green-6: #51C88F; @green-3: #275247; @green-1: #15272B; @blue-deep-1: #15192D; @blue-deep-2: #8296E9; @blue-independent-18: #8296ED; @primary-color: @blue-6; @success-color: @green-6; @info-color: #6680ff; @warning-color: @gold-6; @error-color: @red-5; @highlight-color: @red-5; @processing-color: @blue-6; // Background color for `` @body-background: #15205f; // Base background color for most components @component-background: @blue-deep-1; @icon-color-hover: fade(@white, 75%); @heading-color: fade(@white, 85%); @text-color: rgba(255, 255, 255, 65%); @text-color-secondary: fade(@white, 45%); @popover-background: @blue-deep-1; // 弹出层居多是这个颜色 @text-selection-bg: @info-color; @border-style-base: solid; @layout-body-background: #0d0e18; @layout-header-background: #1c2342; @layout-sider-background: @component-background; @layout-trigger-background: @component-background; @font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif; @font-feature-settings-base: tnum; @background-color-light: #191C35; @background-color-base: fade(@blue-6, 20%); @item-hover-bg: fade(@white, 8%); @btn-shadow: 0 2px 0 rgba(5, 6, 10, 0.015); @btn-primary-shadow: 0 2px 0 rgba(5, 6, 10, 0.045); @btn-text-shadow: 0 -1px 0 rgba(5, 6, 10, 0.12); @btn-default-bg: transparent; @select-item-selected-font-weight: 600; @popover-bg: @popover-background; @modal-header-bg: @popover-background; @menu-popup-bg: @popover-background; @menu-dark-submenu-bg: @black; @badge-text-color: @white; @card-actions-background: fade(@white, 4%); @card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36), 0 5px 12px 4px rgba(0, 0, 0, 0.27); @avatar-bg: #5a5a5a; @pagination-item-bg-active: transparent; @skeleton-color: #303030; @alert-success-border-color: @green-3; @alert-success-bg-color: @green-1; @alert-info-border-color: @blue-3; @alert-info-bg-color: @blue-1; @alert-warning-border-color: @gold-3; @alert-warning-bg-color: @gold-1; @alert-error-border-color: @red-3; @alert-error-bg-color: @red-1; // Outline @outline-blur-size: 0; @outline-width: 0; @outline-color: @blue-independent-18; @outline-fade: 0; // Link @link-color: @blue-6; @link-hover-color: @blue-independent-18; @link-active-color: #485AB1; // Disabled states @disabled-bg: fade(@blue-6, 8%); @disabled-active-bg: #262E56; @disabled-color: fade(@white, 30%); @disabled-color-dark: fade(@white, 30%); @disabled-border-color: @background-color-base; // Border color @border-color-base: @blue-3; // base border outline a component @border-color-split: fade(@blue-6, 12%); // split border inside a component // The background colors for active and hover states for things like // list items or table cells. @item-active-bg: fade(@blue-6, 30%); @item-hover-bg: fade(@blue-6, 12%); // Shadow @shadow-color: rgba(5, 6, 10, 0.15); @shadow-color-inverse: @component-background; @box-shadow-base: @shadow-2; @shadow-1-up: 0 -6px 16px -8px rgba(5, 6, 10, 0.08), 0 -9px 28px 0 rgba(5, 6, 10, 0.05), 0 -12px 48px 16px rgba(5, 6, 10, 0.03); @shadow-1-down: 0 6px 16px -8px rgba(5, 6, 10, 0.08), 0 9px 28px 0 rgba(5, 6, 10, 0.05), 0 12px 48px 16px rgba(5, 6, 10, 0.03); @shadow-1-left: -6px 0 16px -8px rgba(5, 6, 10, 0.08), -9px 0 28px 0 rgba(5, 6, 10, 0.05), -12px 0 48px 16px rgba(5, 6, 10, 0.03); @shadow-1-right: 6px 0 16px -8px rgba(5, 6, 10, 0.08), 9px 0 28px 0 rgba(5, 6, 10, 0.05), 12px 0 48px 16px rgba(5, 6, 10, 0.03); @shadow-2: 0 3px 6px -4px rgba(5, 6, 10, 0.12), 0 6px 16px 0 rgba(5, 6, 10, 0.08), 0 9px 28px 8px rgba(5, 6, 10, 0.05); // scrollbar @linglong-custom-scrollbar-thumb-color: fade(@blue-6, 0.45); @linglong-custom-scrollbar-width: 8px; // TODO: scrollbar thumb 和 antd-custom-style 重合 .linglong-custom-scrollbar-thumb { background-color: @linglong-custom-scrollbar-thumb-color !important; } .linglong-custom-list-scrollbar-content { &::-webkit-scrollbar { width: @linglong-custom-scrollbar-width; background-color: transparent; } &::-webkit-scrollbar-thumb { border-radius: 99px; background-color: @linglong-custom-scrollbar-thumb-color; } } // popover @popover-bg: #1E2444; // calendar @calendar-bg: @dropdown-background-color; // Divider @divider-color: @border-color-split; // List // --- @list-header-background: fade(@blue-6, 8%); @list-footer-background: fade(@blue-6, 8%); // Card // --- @card-background: @component-background; // Buttons @btn-default-color: @blue-6; @btn-default-border: @blue-3; @btn-disable-border: @disabled-border-color; @btn-danger-border: #7C3762; @btn-default-ghost-color: @text-color; @btn-default-ghost-border: rgba(255, 255, 255, 20%); // select @select-dropdown-bg: @dropdown-background-color; @select-item-selected-bg: @item-active-bg; @select-item-active-bg: @item-hover-bg; @select-multiple-disabled-background: @disabled-bg; @select-multiple-item-disabled-color: @disabled-color; @select-border-color: rgba(89, 112, 221, 20%); // Menu @menu-item-active-bg: @item-active-bg; @menu-dark-bg: @background-color-light; @menu-dark-inline-submenu-bg: @background-color-light; @menu-dark-item-active-bg: @item-active-bg; @menu-dark-selected-item-text-color: @blue-6; @menu-dark-selected-item-icon-color: @blue-6; @menu-dark-color: @text-color; @menu-item-group-title-color: @text-color; // Dropdown @dropdown-background-color: @blue-deep-1; @dropdown-menu-bg: @background-color-light; // Timeline @timeline-color: @border-color-split; @timeline-dot-color: @blue-6; @timeline-dot-bg: @component-background; // Avatar @avatar-bg: fade(@white, 30%); @avatar-color: rgba(0, 0, 0, 65%); // Message @message-notice-content-bg: @popover-background; // tooltip @tooltip-bg: #1E2444; // input @input-placeholder-color: fade(@white, 25%); @input-disabled-color: fade(@white, 25%); @input-disabled-bg: fade(@blue-6, 8%); @input-disabled-border: fade(@blue-6, 20%); // 新增 @input-addon-bg: @blue-1; @input-bg: transparent; @input-hover-border-color: @blue-independent-18; @input-number-handler-active-bg: @popover-background; // input number // @input-number-handler-border-color: @blue-independent-18; // Badge @badge-color: @error-color; @badge-text-color: @white; // Popover // Popover body background color @popover-bg: @dropdown-background-color; // Modal @modal-content-bg: @component-background; @modal-header-bg: @component-background; // table @table-header-bg: fade(@blue-6, 8%); @table-header-sort-bg: #262626; @table-body-sort-bg: fade(@white, 1%); @table-row-hover-bg: fade(@blue-6, 8%); @table-header-filter-active-bg: transparent; // Pagination @pagination-item-bg-active: @blue-6; @pagination-item-disabled-color-active: @disabled-color; @pagination-item-disabled-bg-active: @disabled-active-bg; // BackTop // MISS-WARN:act #485AB1 @back-top-color: @blue-1; @back-top-bg: #303B73; @back-top-hover-bg: @blue-independent-18; // Collapse @collapse-header-bg: fade(@blue-6, 12%); @back-top-hover-bg: @blue-independent-18; // Rate @rate-star-color: @gold-6; @rate-star-bg: fade(@white, 8%); // Anchor @anchor-border-color: fade(@blue-6, 20%); // Slider @slider-rail-background-color: fade(@blue-6, 20%); @slider-track-background-color: fade(@blue-6, 45%); @slider-handle-background-color: #10121E; @slider-handle-color: fade(@blue-6, 30%); // Steps @process-icon-color: fade(@blue-6, 100%); @process-title-color: fade(@white, 85%); @process-description-color: fade(@white, 85%); @process-icon-text-color: fade(@white, 100%); @wait-icon-color: @disabled-color; @wait-title-color: fade(@white, 65%); @wait-description-color: fade(@white, 45%); @wait-tail-color: @process-tail-color; @finish-icon-color: @process-icon-color; @finish-title-color: fade(@white, 65%); @finish-description-color: fade(@white, 45%); @finish-tail-color: @primary-color; // Transfer @transfer-item-hover-bg: rgba(89, 112, 221, 12%); //Card @card-actions-background: #15192D; // Skeleton @skeleton-color: rgba(89, 112, 221, 12%); // TODO：书写一些dark覆写.. @ant-prefix: ant; // Buttons @btn-primary-hover-bg: @blue-independent-18; @btn-primary-active-bg: #485AB1; // @btn-primary-color: #fff; @btn-danger-hover-bg: #E783B3; @btn-danger-active-bg: #AB487F; // @btn-danger-color: #fff; @btn-ghost-hover-bg: @btn-primary-hover-bg; @btn-ghost-active-bg: @btn-primary-active-bg; @btn-text-color: fade(@white, 65%); // Pagination @pagination-hover-active-color: @blue-independent-18; // Checkbox @checkbox-disabled-color: rgba(255, 255, 255, 25%); @checkbox-disabled-border-color: rgba(89, 112, 221, 20%); @checkbox-disabled-tick-color: #262E56; // Rate @rate-star-half-second-bg: rgba(89, 112, 221, 20%); // Tabs @tabs-default-color: fade(@white, 85%); @tabs-disabled-color: rgba(255, 255, 255, 35%); @tabs-card-bg: rgba(89, 112, 221, 8%); @tabs-card-active-bg: transparent; @tabs-card-border-color-split: rgba(89, 112, 221, 20%); @tabs-card-active-border-color-split: #2A3362; // Radio @radio-checked-inner-color: #5970DD; @radio-disabled-color: rgba(255, 255, 255, 25%); @radio-disabled-border-color: rgba(89, 112, 221, 20%); @radio-disabled-checked-inner-color: #262E56; // Alert @alert-message-color: fade(@white, 85%); @alert-description-color: fade(@white, 65%); @alert-message-color-width-description: fade(@white, 85%); // Notification @notification-description-color: fade(@white, 65%); // scrollbar ::-webkit-scrollbar { width: 6px; height: 2px; } // TODO: 带修复依赖 ::-webkit-scrollbar-thumb { background: rgba(102, 128, 255, 0.24); border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-track { background: rgba(21, 26, 52, 1); border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); } .skeleton-color() { background: linear-gradient( 90deg, rgba(89, 112, 221, 20%), rgba(89, 112, 221, 12%), rgba(89, 112, 221, 20%), ); background-size: 400% 100%; } .ant-popover-message > .anticon { color: #d89614; } // Checkbox .ant-checkbox-checked { &::after { display: none; } } .ant-checkbox-disabled { .ant-checkbox-inner { border-color: @checkbox-disabled-border-color !important; } &.ant-checkbox-checked { .ant-checkbox-inner { &::after { border-color: @checkbox-disabled-tick-color; } } } & + span { color: @checkbox-disabled-color; } } // Tabs .ant-tabs { &-tab { &&-disabled { color: @tabs-disabled-color; } &:not(&&-disabled):hover { color: #8296E9; } } } .ant-tabs-card { > .ant-tabs-nav { .ant-tabs-tab { background: @tabs-card-bg; border-color: @tabs-card-border-color-split; &-active { background-color: @tabs-card-active-bg; border-color: @tabs-card-active-border-color-split; } } } } // Radio .ant-radio { &-inner { &::after { background-color: @radio-checked-inner-color; } } } .ant-radio-checked { &::after { display: none; } } .ant-radio-disabled { .ant-radio-inner { border-color: @radio-disabled-border-color !important; &::after { background-color: @radio-disabled-checked-inner-color; } } & + span { color: @radio-disabled-color; } } .ant-tag:not([class*="ant-tag-"]) { background: rgba(89, 112, 221, .08); border: 1px solid rgba(89, 112, 221, .20); } .site-tag-plus { color: @blue-6; border-color: #374484; } .ant-upload { .ant-btn { border: 1px solid #2A3362; } } .ant-upload-list-picture .ant-upload-list-item-error, .ant-upload-list-picture-card .ant-upload-list-item-error { border-color: @red-deep-1; } .ant-upload-list-item-error, .ant-upload-list-item-error .ant-upload-text-icon > .anticon, .ant-upload-list-item-error .ant-upload-list-item-name { color: @red-deep-1; } .ant-progress-status-success .ant-progress-bg { background: @blue-6; } .ant-progress-status-error .ant-progress-bg { background: @red-deep-1; } .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title::after { background-color: fade(@white, 12%); } .ant-steps .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process) > .ant-steps-item-container[role='button']:hover .ant-steps-item-icon { border-color: @blue-deep-2; .ant-steps-icon { color: @blue-deep-2; } } .ant-steps .ant-steps-item:not(.ant-steps-item-active) > .ant-steps-item-container[role='button']:hover .ant-steps-item-title, .ant-steps .ant-steps-item:not(.ant-steps-item-active) > .ant-steps-item-container[role='button']:hover .ant-steps-item-subtitle, .ant-steps .ant-steps-item:not(.ant-steps-item-active) > .ant-steps-item-container[role='button']:hover .ant-steps-item-description { color: @blue-deep-2; } .ant-upload.ant-upload-select-picture-card > .ant-upload { color: @blue-6; border-color: @blue-6; } .ant-upload.ant-upload-select-picture-card:hover, .ant-upload.ant-upload-drag:not(.ant-upload-disabled):hover { border-color: @blue-deep-2; } .ant-picker-cell-disabled::before { background-color: rgba(89, 112, 221, .08); } .ant-picker-decade-panel .ant-picker-cell-disabled .ant-picker-cell-inner, .ant-picker-year-panel .ant-picker-cell-disabled .ant-picker-cell-inner, .ant-picker-quarter-panel .ant-picker-cell-disabled .ant-picker-cell-inner, .ant-picker-month-panel .ant-picker-cell-disabled .ant-picker-cell-inner { background-color: transparent; } .ant-tag-red-inverse { background: @red-5; border-color: @red-5; } .ant-tag-red, .ant-tag-error { color: @red-5; } .ant-tag-blue { color:@blue-6; } .ant-tag-gold, .ant-tag-warning { color: @gold-6; } .ant-tag-green { color: @green-6; }