// 驾驶舱模块黑色主题样式

@import "./setting.less";

#appBody.dark {
    transition: @transition;

    .gray {
        transition: @transition;
    }

    .green {
        transition: @transition;
    }

    .white {
        transition: @transition;
    }

    #app {
        transition: @transition;
    }

    .panel-title {
        transition: @transition;
    }

    .panel-tools {
        transition: @transition;
    }

    .weather {
        .other-info {
            .text {
                transition: @transition;
            }

            div.svg-icon svg use {
                transition: @transition;
            }
        }
    }

    .security-days {
        .text {
            transition: @transition;
        }

        .num {
            transition: @transition;
        }
    }

    .tab-box {
        .tab-item {
            span {
                svg {
                    use {
                        transition: @transition;
                    }
                }
            }
        }
    }

    .header-body {
        .header-title {
            svg {
                g:nth-child(1) {

                    path,
                    polygon {
                        transition: @transition;
                    }
                }
            }
        }
    }

    .weather-info {
        span svg use {
            transition: @transition;
        }
    }

    .map .tab-box .tab-item.active {
        background-image: linear-gradient(to top,
                rgba(5, 187, 76, 0.5),
                rgba(5, 187, 76, 0));
        transition: @transition;
    }

    .map .tab-box .tab-item.active::after {
        transition: @transition;
    }

    .header-menu .header-menu-list .header-menu-item.active::after {
        transition: @transition;
    }

    .header-menu .header-menu-list .header-menu-item.active {
        background: linear-gradient(to top,
                rgba(5, 187, 76, 0.5),
                rgba(5, 187, 76, 0));
        border    : 0.093vh solid @green;
        transition: color @transition ease-in-out;
    }

    .coulometric-analysis {
        .card-1 {
            .card-icon {
                svg use {
                    transition: @transition;
                }
            }
        }
    }

    .map .compass {
        svg g:nth-child(3) {
            g g path {
                transition: @transition;
            }
        }

        svg g:nth-child(4) {
            g g path {
                transition: @transition;
            }
        }

        &::after {
            transition: @transition;
        }
    }

    .name-box-period-label {
        transition: @transition;
    }

    .name-box-period-value {
        transition: @transition;
    }

    .svg-map-nx {
        .item-label {
            rect {
                transition: @transition;
            }

            .mapKey {
                transition: @transition;
            }
        }

        .popup-layer-svg {
            .mapKey {
                transition: @transition;
            }
        }

        #popup-box-svg rect {
            transition: @transition;
        }
    }

    .com-panel-3,
    .com-panel,
    .header-body {
        transition: @transition;
    }

    .com-panel-3 .dot,
    .com-panel.line:before {
        transition: @transition;
    }

    .panel-header {
        transition: @transition;
    }

    .fengji-icon {
        svg use {
            transition: @transition;
        }
    }

    .modal.el-dialog {
        transition: @transition;
    }

    .modal.el-dialog .el-dialog__title {
        transition: @transition;
    }

    .situation-body {
        .value span:nth-child(2) {
            transition: @transition;
        }
    }

    .coulometric-analysis .card-title {
        transition: @transition;
    }

    .com-panel,
    .panel-header,
    .home .table-card,
    .com-panel-3.situation,
    .el-menu--collapse,
    .el-sub-menu,
    .el-sub-menu__title,
    .el-menu--popup,
    .el-menu-item {
        transition: @transition;
    }

    .com-panel.line::before {
        transition: @transition;
    }

    .lightMenu {
        width        : 0;
        height       : calc(100% - 71px);
        position     : absolute;
        left         : 0;
        top          : 57px;
        z-index      : 100;
        border-radius: 20px;
        border       : 0;
        overflow     : hidden;
        transition   : @transition;
    }

    .lightMenu.hidden {
        width     : 0;
        transition: @transition;
    }

    .main-body {
        margin-left: 0;
        transition : @transition;
    }

    .dot.top-left {
        transition: @transition;
    }

    .dot.bottom-left {
        transition: @transition;
    }

    .dot.top-rignt {
        transition: @transition;
    }

    .dot.bottom-right {
        transition: @transition;
    }

    .lightMenu .el-menu--collapse {
        transition: @transition;
    }

    .lightMenu .el-menu--collapse {
        height: 100%;
    }

    .lightMenu .el-sub-menu__title {
        transition: @transition;
    }

    .lightMenu .el-sub-menu__title i {
        transition: @transition;
    }

    transition: @transition;
}