windLifecontrolPro/src/themeDark.less

// 主色
@mc1: #09172b;
@mc2: #142446;
@mc3: #2169c3;

// 辅助色
@fzs1: #2999a0;
@fzs2: #67b9ff;
@fzs3: #ff6271;

// 文字颜色
@fc1 : #a6b8dd;
@fc2 : #f9fbff;
@fc3 : #c3e1ff;
@fc4 : #4d72b8;
@fc5 : #94e5ff;
@fc6 : #7a8385;
@fc7 : #e4ecff;

// 渐变色
@jbs1: linear-gradient(to right, #16a4dc, #142446);
@jbs2: linear-gradient(to right, #175dd2, #70d0f4);
@jbs3: linear-gradient(to right, #42bf54, #cff4d8);
@jbs4: linear-gradient(to right, #f5d023, #fff7cb);
@jbs5: linear-gradient(to right, #f1880c, #ffd179);
@jbs6: linear-gradient(to right, #ff293d, #ff9ea7);

@green          : #05bb4c;
@gray           : #606769;
@gray-l         : #B3BDC0;
@picker-bg-color: fade(rgb(3, 7, 19), 95);

@primary-color    : #2568c4;
@border-color     : transparent;
@text-color       : #fff;
@placeholder-color: #c0c4cc;
@disabled-color   : #c0c4cc;
@disabled-bg      : #f5f7fa;

.nsfStyle {
    #app {

        .themeDarkHome {
            background: @mc1  !important;
        }

        .themeDark {

            // 顶部 header
            .proheader {
                background: @mc2;

                .proMenu {
                    .defaultBacksty {
                        color: @fc6  !important;
                    }

                    .changeBacksty {
                        color       : @fzs2  !important;
                        border-color: @mc3;
                    }
                }
            }

            // 首页右侧切换主题 switch
            .settingStop {
                .el-switch {
                    .el-switch__core {
                        border-color: @fc1;

                        .el-switch__action {
                            background: @mc3;
                        }
                    }
                }
            }

            // 首页指标标题 header
            .headerRight {
                background: @mc2;

                .headerName,
                .headerNa2 {
                    color: @fc7;
                }

                .headerZsN {
                    background: @mc3;
                }
            }

            // 首页天气
            .weaMain {
                .pTwo {
                    color: @fc6;
                }
            }

            // 首页右侧预测电量 charts 顶部描述文本
            .electricMain {
                .powerName {
                    color: @fc7;
                }
            }

            // 首页设备台数
            .emInfoBox {
                .t {
                    background: @mc2 ;

                    .headerZs {
                        background: #0f0f0f;

                        .headerZsN {
                            background: @mc3;
                        }
                    }

                }

                .b {
                    .genre {
                        color: @fc6;
                    }
                }
            }

            // 首页预测电量
            .powerCharts {
                .powerValue {
                    span:last-child {
                        color: #fff
                    }
                }
            }

            // 首页底部 echarts
            .hover72Power,
            .monthPower {
                background: @mc2;
            }

            // 首页点击地图风场后左侧的滑出窗口
            .infoBox {
                .el-button {
                    color: @fzs2  !important;
                }

                p,
                .el-tooltip__trigger {
                    color: #fff;
                }
            }

            // 首页计划电量完成情况下方文字描述
            .analysMain_Msg_bot {
                background: @mc2;

                span {
                    color: #fff;
                }
            }

            .el-tree-node {
                background: transparent;
            }

            .el-dropdown-link.nodeLabel {
                color: #c3c3c4;
            }


            // 菜单
            .elmenuSty {
                background: @mc1;

                .el-menu {
                    .el-menu-item {
                        color: #777;

                        &.is-active {
                            color: #fff;

                            .elMenuTitle {
                                background: #1a66c6;
                            }

                            path {
                                fill: #fff;
                            }
                        }

                        path {
                            fill: #777;
                        }
                    }

                }
            }

            .dataFilePrepareMain,
            .dataFileProcessMain {

                .treeDataMain,
                .excelDataMain,
                .tableDataMain {
                    background: @mc2;
                    padding   : 10px 5px;

                    .main {
                        background: #13171e;
                    }

                }
            }

            // el-table
            .el-table,
            .custom-table.el-table {
                background: rgb(3, 7, 19);
                border    : 0px; // 包裹表格父元素边框

                .el-table__row {
                    background: transparent; // 表格底色，因表格上层有其他颜色遮挡所以视觉效果看起来仿佛是表格边框

                    & .el-table__cell {
                        border-bottom: 1px solid rgb(17, 58, 120) !important; // 表格单元格底部边框颜色

                        .el-button {
                            color: rgb(71, 174, 231) !important;

                            &:active {
                                color: #70d0f4 !important;
                            }
                        }
                    }
                }

                &.el-table--border::after,
                &.el-table--group::after,
                &::before {
                    background-color: transparent;
                }

                tr {
                    td {
                        background-color: rgb(3, 7, 19); // 表格基数行背景颜色
                    }

                    &:hover td {
                        color           : #67b9ff; // 表格基数行 hover 文字颜色
                        background-color: rgb(3, 7, 19) !important; // 表格基数行 hover 背景颜色
                    }
                }

                td {
                    border     : 0px; // 表格内部除了最后一行底部以外的上下左右边框
                    padding    : 0;
                    height     : 37px;
                    line-height: 37px;
                    color      : rgb(194, 225, 255);

                    &.light,
                    &.always-light {
                        color: #67b9ff !important;
                    }
                }

                th {
                    border     : 0px;
                    padding    : 0px;
                    height     : 37px;
                    line-height: 37px;
                    font-weight: normal;
                    text-align : center;
                    color      : rgb(85, 113, 166);
                    cursor     : pointer;

                    &.is-leaf {
                        border: 0px;
                    }

                    &.light,
                    &.always-light {
                        color: #67b9ff !important;
                    }
                }

                th,
                tr {
                    background-color: transparent;
                    border          : 0px;
                }

                thead {
                    color      : @gray-l;
                    font-weight: 500;
                    font-size  : 14px;
                    border     : 0px;

                    th,
                    &.is-group th {
                        &.el-table__cell {
                            background  : rgb(19, 35, 71);
                            border-color: transparent !important;
                            color       : #bcd2ff;
                        }
                    }
                }

                .el-table__body {
                    border   : 0px; // 表格最外侧除右边以外边框
                    font-size: 14px;
                }

                &.el-table--striped .el-table__body tr.el-table__row--striped {
                    td {
                        background-color: rgb(16, 25, 46); // 表格偶数行背景颜色
                    }

                    &:hover td {
                        color           : #67b9ff;
                        background-color: rgb(16, 25, 46) !important; // 表格偶数行 hover 背景颜色
                    }


                }

                &.el-table--border,
                &.el-table--group {
                    border: none;
                }

                .ascending .sort-caret.ascending {
                    border-bottom-color: #2169c3;
                }

                .descending .sort-caret.descending {
                    border-top-color: #2169c3;
                }
            }

            .warn-table,
            .df-table {

                .tableData_tit p {
                    color: #fff !important;
                }

                .el-table,
                .custom-table.el-table {
                    background: rgb(3, 7, 19);
                    border    : 1px solid rgba(33, 105, 195, 0.5) !important; // 包裹表格父元素边框

                    .el-table__row {
                        background: transparent; // 表格底色，因表格上层有其他颜色遮挡所以视觉效果看起来仿佛是表格边框

                        & .el-table__cell {
                            border-bottom: 1px solid rgb(17, 58, 120) !important; // 表格单元格底部边框颜色

                            .el-button {
                                color: rgb(71, 174, 231) !important;

                                &:active {
                                    color: #70d0f4 !important;
                                }
                            }
                        }

                        &:hover .cell {
                            color: rgb(71, 174, 231) !important;
                        }
                    }

                    &.el-table--border::after,
                    &.el-table--group::after,
                    &::before {
                        background-color: transparent;
                    }

                    tr {
                        td {
                            background-color: rgb(3, 7, 19); // 表格基数行背景颜色
                        }

                        &:hover td {
                            color           : #67b9ff; // 表格基数行 hover 文字颜色
                            background-color: rgb(3, 7, 19) !important; // 表格基数行 hover 背景颜色
                        }
                    }

                    td {
                        border     : 0px; // 表格内部除了最后一行底部以外的上下左右边框
                        padding    : 0;
                        height     : 37px;
                        line-height: 37px;
                        color      : rgb(194, 225, 255);

                        &.light,
                        &.always-light {
                            color: #67b9ff !important;
                        }
                    }

                    th {
                        border     : 0px;
                        padding    : 0px;
                        height     : 37px;
                        line-height: 37px;
                        font-weight: normal;
                        text-align : center;
                        color      : rgb(85, 113, 166);
                        cursor     : pointer;

                        &.is-leaf {
                            border: 0px;
                        }

                        &.light,
                        &.always-light {
                            color: #67b9ff !important;
                        }
                    }

                    th,
                    tr {
                        background-color: transparent;
                        border          : 0px;
                    }

                    thead {
                        color      : @gray-l;
                        font-weight: 500;
                        font-size  : 14px;
                        border     : 0px;

                        th,
                        &.is-group th {
                            &.el-table__cell {
                                background  : rgb(19, 35, 71) !important;
                                border-color: transparent !important;
                                color       : #bcd2ff;
                            }
                        }
                    }

                    .el-table__body {
                        border   : 0px; // 表格最外侧除右边以外边框
                        font-size: 14px;
                    }

                    &.el-table--striped .el-table__body tr.el-table__row--striped {
                        td {
                            background-color: rgb(16, 25, 46); // 表格偶数行背景颜色
                        }

                        &:hover td {
                            color           : #67b9ff;
                            background-color: rgb(16, 25, 46) !important; // 表格偶数行 hover 背景颜色
                        }


                    }

                    &.el-table--border,
                    &.el-table--group {
                        border: none;
                    }

                    .ascending .sort-caret.ascending {
                        border-bottom-color: #2169c3;
                    }

                    .descending .sort-caret.descending {
                        border-top-color: #2169c3;
                    }
                }

                .el-table__expanded-cell {
                    background: transparent;
                }

                .el-table__footer-wrapper tbody td {
                    background: #1a1f2fcc;
                }
            }

            .el-table__expanded-cell {
                background: transparent;
            }

            .el-table__footer-wrapper tbody td {
                background: #1a1f2fcc;
            }

            // 去除表格顶、左、底部边框
            .el-table__border-left-patch,
            .el-table__inner-wrapper::after,
            .el-table__inner-wrapper::before {
                background: transparent;
            }
        }

        // el-input
        .el-input {

            // 基本样式
            .el-input__wrapper {
                background-color: rgba(83, 98, 104, .2);
                border-radius   : 4px;
                border          : 1px solid @border-color;

                // 输入框
                .el-input__inner {
                    color    : @text-color;
                    font-size: 14px;

                    &::placeholder {
                        color: @placeholder-color;
                    }
                }

                // 悬停状态
                &:hover {
                    border-color: darken(@border-color, 10%);
                }

                // 聚焦状态
                &.is-focus {
                    border-color: @primary-color;
                    box-shadow  : 0 0 0 2px fade(@primary-color, 20%);
                }
            }

            // 禁用状态
            &.is-disabled {
                .el-input__wrapper {
                    background-color: @disabled-bg;
                    border-color    : @border-color;

                    .el-input__inner {
                        color: @disabled-color;
                    }
                }
            }

            // 清除按钮
            .el-input__clear {
                color: @placeholder-color;

                &:hover {
                    color: @text-color;
                }
            }

            // 前缀和后缀图标
            .el-input__prefix,
            .el-input__suffix {
                color: @placeholder-color;

                .el-input__icon {
                    font-size: 16px;
                }
            }
        }

        .el-select {

            // 基本样式
            .el-select__wrapper {
                background-color: rgba(83, 98, 104, .2);
                border-radius   : 4px;
                border          : 1px solid @border-color;

                .el-select__placeholder {
                    color: #fff;
                }

                // 悬停状态
                &:hover {
                    border-color: darken(@border-color, 10%);
                }

                // 聚焦状态
                &.is-focus {
                    border-color: @primary-color;
                    box-shadow  : 0 0 0 2px fade(@primary-color, 20%);
                }
            }

            // 禁用状态
            &.is-disabled {
                .el-input__wrapper {
                    background-color: @disabled-bg;
                    border-color    : @border-color;

                    .el-input__inner {
                        color: @disabled-color;
                    }
                }
            }

            // 下拉箭头
            .el-select__caret {
                color    : @placeholder-color;
                font-size: 14px;

                &.is-reverse {
                    transform: rotateZ(180deg);
                }
            }

            // 清除按钮
            .el-select__clear {
                color: @placeholder-color;

                &:hover {
                    color: @text-color;
                }
            }

            .el-select__selection.is-near {
                width: 95%;
            }
        }

        .el-button.el-button--danger {
            span {
                color: #fff;
            }
        }

        // /generatingCap/dataFilter/process
        .main_top {
            background: #13171e;

            .topPsty {
                color     : #1c99ff;
                background: #1e2126;
            }
        }

        .main {
            background: #13171e;
        }

        // /generatingCap/dataAnalysis/jjyxReport
        .analysisReport {
            .infoBox {
                background: rgb(4, 12, 11);
            }
        }

    }

    // el-dialogv
    .el-dialog.currentDialog,
    .el-dialog[custom-class="windLifeDialog"] {
        background: rgba(3, 7, 19, 0.95);
        border    : 1px solid rgba(33, 105, 195, 0.5);
        box-shadow: 0px 8px 17px 1px rgba(33, 105, 195, 0.3);

        .el-dialog__title {
            color: #fff;
        }
    }

    .reportDia {
        #pdfDom {
            p {
                color: #fff;

                span {
                    color: #fff;
                }
            }
        }
    }

    // 下拉菜单
    .el-popper {
        // border: 1px solid rgb(10, 23, 42) !important;
    }

    .el-select-dropdown__wrap {
        background-color: rgb(10, 23, 42);
        border          : 1px solid rgb(10, 23, 42);
        border-radius   : 4px;
        box-shadow      : 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .el-select-dropdown__item {
            font-size    : 14px;
            padding      : 0 20px;
            position     : relative;
            white-space  : nowrap;
            overflow     : hidden;
            text-overflow: ellipsis;
            color        : @text-color;
            height       : 34px;
            line-height  : 34px;

            &.hover,
            &.is-hovering,
            &:hover {
                background-color: @fzs2;
            }

            &.is-selected {
                color      : @fzs2;
                font-weight: 400;

                &:hover {
                    background: @fzs2;
                    color     : #fff;
                }

                &.is-hovering {
                    background: @fzs2;
                    color     : #fff;
                }
            }

            &.is-disabled {
                color : @disabled-color;
                cursor: not-allowed;
            }
        }
    }

    // 多选样式
    .el-select .el-select__selection.is-near {
        position   : absolute;
        line-height: normal;
        white-space: normal;
        z-index    : 1;
        top        : 50%;
        transform  : translateY(-50%);
        display    : flex;
        align-items: center;
        flex-wrap  : wrap;

        .el-tag {
            background: #000;
            color     : @text-color;
        }
    }

    // el-radio-group
    .el-radio-group {
        .el-radio {
            .el-radio__label {
                color: #fff;
            }

            &.is-checked {
                .el-radio__inner {
                    background  : @fzs2;
                    border-color: @fzs2;
                }

                .el-radio__label {
                    color: @fzs2;
                }
            }
        }
    }

    .el-picker__popper.el-popper {
        background-color: rgb(3, 7, 19);

        .el-date-picker {
            background: rgb(3, 7, 19)
        }

        .el-date-picker__header {

            .el-date-picker__prev-btn button,
            .el-date-picker__next-btn button,
            .el-date-picker__header-label {
                color: #fff;

                &:hover {
                    color: @fzs2;
                }
            }
        }

        .el-picker-panel__content {
            .el-date-table {
                tbody {
                    tr:first-child {
                        th {
                            color: #fff;
                        }
                    }

                    td.prev-month,
                    td.next-month {
                        color: #606769;
                    }

                    td.available {
                        color: #fff;

                        &:hover {
                            color: @fzs2;
                        }
                    }

                    td.current:not(.disabled) {
                        .el-date-table-cell__text {
                            background: @fzs2;
                            color     : #fff;
                        }
                    }


                }
            }

            .el-year-table,
            .el-month-table {
                td.current:not(.disabled) {
                    .cell {
                        background: @fzs2;
                        color     : #fff;
                    }
                }
            }
        }
    }

    .el-picker-panel {
        background-color: rgb(3, 7, 19);

        .start-date,
        .in-range,
        .end-date {
            .el-date-table-cell {
                background: @mc3;

                &:hover {
                    background: @mc3;
                    color     : @fc1;
                }
            }

        }

        .el-input__wrapper {
            background-color: rgba(83, 98, 104, .2);
            border          : 1px solid @border-color;

            .el-input__inner {
                color: #fff;
            }
        }

        .el-time-panel {
            border-color    : #fff;
            background-color: rgb(3, 7, 19);
            box-shadow      : var(--el-box-shadow-light);
        }

        .el-time-spinner__item {
            color: rgb(223, 232, 250);

            &.is-active {
                color: #67b9ff;
            }

            &:hover:not(.disabled):not(.is-active) {
                background: fade(rgb(26, 92, 175), 75);
            }
        }

        .el-time-panel__footer {
            background: rgb(3, 7, 19);
        }

        .el-time-panel__btn.cancel {
            color: #fff,
        }

        .el-time-panel__btn.confirm {
            color: #67b9ff,
        }
    }

    .el-picker-panel__footer {
        background: @picker-bg-color ;

        .el-button--text {
            color: #fff;
        }

        .el-button.is-plain {
            color       : #67b9ff;
            border-color: #67b9ff;
        }
    }

    .el-input-number {

        .el-input-number__decrease,
        .el-input-number__increase {
            background: #1e3f9a !important;
        }
    }

    .el-loading-mask {
        background: rgba(rgb(3, 7, 19, 0.5));
    }
}