windLifecontrolPro/src/assets/css/eleCss/el-popper.less

.el-select__popper {
    background: #606769 !important;

    .el-select-dropdown {
        background: #606769;

        .el-scrollbar {
            .el-select-dropdown__wrap {
                .el-select-dropdown__list {
                    .el-select-dropdown__item {
                        background: #606769;
                        color: #B3BDC0;
                    }

                    .selected {
                        background: #606769;
                    }

                    .hover {
                        background: #504bb5;
                    }
                }
            }
        }
    }

}



.el-picker__popper {
    background: #606769 !important;

    .el-picker-panel {

        // el datetimerange  picker Start
        &.el-date-range-picker {
            color: @gray-l;
            background: transparent;

            .el-date-range-picker__time-header {
                border-color: @gray;

                .el-icon-arrow-right {
                    color: @gray-l;
                }

                .el-input__wapper {
                    background: #606266;

                    .el-input__inner {
                        color: @gray-l;
                        border-color: @gray;
                    }
                }


                .el-date-range-picker__time-picker-wrap {
                    .el-time-panel {
                        background-color: @picker-bg-color;

                        // .el-time-spinner__item.active:not(.disabled) {
                        //     color: @green;
                        // }

                        // .el-time-spinner__item:hover:not(.disabled):not(.active) {
                        //     background: transparent;
                        //     color: @green;
                        // }
                    }

                    // .el-time-panel__btn.confirm {
                    //     color: @green;
                    // }

                    .el-time-panel__btn.cancel {
                        color: @gray;
                    }
                }
            }

            .el-date-range-picker__content {
                border-color: @gray;

                .el-date-table {
                    th {
                        color: @gray-l;
                    }

                    td {
                        //     &.available:hover {
                        //         color: @green;
                        //     }

                        &.in-range div,
                        &.in-range div:hover {
                            background: fade(@gray, 40);
                        }

                        //     &.end-date span,
                        //     &.start-date span {
                        //         background: @green;
                        //     }

                        // &.today {
                        //     span {
                        //         color: @green;
                        //     }

                        //     &.end-date span,
                        //     &.start-date span {
                        //         color: @white;
                        //     }
                        // }

                        //     &.next-month,
                        //     &.prev-month {
                        //         color: @gray;
                        //     }
                    }
                }
            }
        }

        // el datetimerange  picker End

        .el-picker-panel__body {
            border-color: @gray;
        }

        .el-picker-panel__footer {
            background: transparent;
            border-color: @gray;

            // .el-button--text {
            //     color: @gray;
            // }

            // .el-button.is-plain {
            //     background: transparent;
            //     border-color: @green;
            //     color: @green;
            // }
        }

        // .el-time-panel__btn.confirm {
        //     color: @green;
        // }

        // .el-time-panel__btn.cancel {
        //     color: @gray;
        // }
    }
}

.el-picker__popper {
    background: #606769 !important;

    .el-picker-panel {
        background: #606769 !important;

        .el-picker-panel__body-wrapper {
            .el-picker-panel__body {
                color: #fff !important;

                .el-date-picker__header {
                    .el-date-picker__prev-btn,
                    .el-date-picker__next-btn {
                        .el-picker-panel__icon-btn {
                            color: @gray-l;
                        }
                    }

                    .el-date-picker__header-label,
                    .el-date-picker__header-label {
                        color: @gray-l;
                    }
                }

                .el-picker-panel__content {
                    border-color: @gray;

                    .el-date-table {
                        th {
                            color: @gray-l;
                        }

                    }

                    .el-year-table {
                        .today {
                            .cell {
                                color: #409eff !important;
                            }
                        }

                        .current {
                            .cell {
                                color: #fff !important;
                            }
                        }

                        .available {
                            .cell {
                                color: #B3BDC0;
                            }

                        }


                    }

                    .el-month-table {
                        .cell {
                            color: #B3BDC0 !important;
                        }

                        .today {
                            .cell {
                                color: #409eff !important;
                            }
                        }

                        .current {
                            .cell {
                                color: #fff !important;
                            }
                        }
                    }

                }
                .el-date-range-picker__content{
                    .el-date-range-picker__header{
                        color: #fff !important;
                    }
                }
            }

        }
    }
}