// 经济运行模块白色主题样式

@import "./setting.less";

#appBody.light {
    .static-main {
        background   : #fff;
        border-color : @deepblue;
        border-radius: @borderRaduis;
        transition   : @transition;
        flex         : 0 0 130px;
        margin-right : 5px;
        transition   : @transition;

        .icon i {
            background  : @deepblue;
            border-color: rgb(128, 128, 128);
            transition  : @transition;

            svg use {
                fill      : #fff;
                transition: @transition;
            }
        }

        .info .value {
            color     : @deepblue;
            transition: @transition;
        }
    }

    .static-items {
        background   : #fff;
        margin-right : 4px;
        border-radius: @borderRaduis;
        transition   : @transition;

        .static-items-title {
            color      : @deepblue;
            font-weight: 700;
            transition : @transition;
        }

        .items {
            .item {
                margin-left  : 4px;
                border-radius: @borderRaduis;
                background   : rgba(128, 128, 128, 0.15);
                transition   : @transition;
                font-weight  : 700;

                .title {
                    color      : @deepblue;
                    font-weight: 700;
                    transition : @transition;
                }
            }
        }
    }

    .power-benchmarking-page .top .top-left .top-left-header .header-right>div.active,
    .power-benchmarking-page .top .top-left .top-left-header .header-right>div:hover {
        background  : rgba(54, 52, 142, 0.2);
        border-color: @deepblue;
        color       : @deepblue;
        transition  : @transition;
    }

    .power-benchmarking-page .top .top-right .rank-title::before {
        background: linear-gradient(135deg, rgba(54, 52, 142, 0.4), transparent, transparent, transparent, rgba(54, 52, 142, 0.4));
    }

    .power-benchmarking-page .top .top-right .rank-title {
        border-color: @deepblue;
        color       : @deepblue;
        transition  : @transition;
    }

    .power-benchmarking-page .top .top-right .rank-title .border {
        border-color: @deepblue;
        transition  : @transition;
    }

    .power-benchmarking-page .top .top-right .rank-table.el-table thead tr th {
        background : rgba(54, 52, 142, 0.05);
        color      : @black;
        font-weight: 700;
        transition : @transition;
    }

    .power-benchmarking-page .top .top-right .rank-block {
        border-color: @deepblue;
        background  : rgba(54, 52, 142, 0.2);
        transition  : @transition;
    }

    .power-benchmarking-page .top .top-right .rank-table {
        border-color: @deepblue;
        transition  : @transition;
    }

    .top-right .el-table__body-wrapper {
        background: #fff;
        transition: @transition;
    }

    .main-body .el-table td,
    .main-body .custom-table.el-table td {
        color      : @black;
        font-weight: 700;
        transition : @transition;
    }

    .main-body .el-table tr:hover td,
    .main-body .custom-table.el-table tr:hover td {
        color      : @deepblue;
        font-weight: 700;
        transition : @transition;
    }

    .power-benchmarking-page .top .top-right .rank-table.el-table.el-table--striped .el-table__body tr.el-table__row--striped td {
        background: rgba(54, 52, 142, 0.1);
        transition: @transition;
    }

    .power-benchmarking-page .top .top-right .rank-table.el-table.el-table--striped .el-table__body tr.el-table__row--striped:hover td {
        background: rgba(54, 52, 142, 0.1) !important;
        transition: @transition;
    }

    .top-left .el-table {
        // background: #fff;
        // transition: @transition;

        table {
            background: #fff;
            transition: @transition;
        }

        th,
        td {
            font-weight: bold;
            font-weight: 700;
        }

        thead tr:first-child th {
            background: rgba(128, 128, 128, 0.3);
            color     : @black;
            transition: @transition;
        }

        thead tr:last-child th {
            background: rgba(128, 128, 128, 0.1);
            color     : @black;
            transition: @transition;
        }



        th.light,
        td.light {
            color     : @deepblue  !important;
            transition: @transition;
        }
    }
}