• 欢迎光临~

样式重置

开发技术 开发技术 2022-08-04 次浏览
@import url('./theme.less');
//
@color: #2D2FAD;
.theme1{
  .theme(#2D2FAD,#2D2FAD,rgb(209, 211, 213),#ff943e,#333);

}
.theme2{
  .theme(#4288ca,#4288ca,rgb(209, 211, 213),#ff943e,#333);
}

.theme3{
  .theme(#0076F5,#0076F5,rgb(209, 211, 213),#ff943e,#333);
}
.theme4{
  .theme(#6a6876,#6a6876,rgb(209, 211, 213),#ff943e,#333);
}
.theme5{
  .theme(#ff676f,#ff676f,rgb(209, 211, 213),#ff943e,#333);
}
@import '~view-design/src/styles/index.less';

.theme(@backcolor:#2d2fad,@color: #2d2fad,@color1,@navActive,@leftColor) {
    .color {
        color: @color !important;
    }
    .noColor{
        color: #333333 !important;
    }
    .color1 {
        color: @navActive !important;
    }
    .background {
        background: @backcolor !important;
    }
    .borderActive {
        border-color: @color1 !important;
    }
    // .hover1:hover {
    //     background: @color1 !important;
    // }
    .Select-icon{
        border-color: @color1 !important;

    }
    .disp-time-sort{
        .ivu-select-selection{
            border-color: @color1 !important;
        }
    }
    .borderRa{
        border-color: @color1 !important;
    }
    .navActive {
        border-color: @navActive !important;
    }
    .navHover:hover {
        border-color: @navActive !important;
    }
    .leftColor {
        color: @leftColor !important;
    }
    .leftHover:hover {
        background: @color1 !important;
    }
    .dataCloud-left-btn{
        .ivu-input-default{
            border: 1px solid @leftColor !important;
        }
    }
    .backgroundActive {
        background: @color1 !important;
    }
    .borderColor {
        border-color: @color !important;
    }
    .borderColorHo:hover {
        border-color: @color !important;
    }
    .backgroundColor {
        background-color: @backcolor!important;
    }
    .backgroundColorOp {
        background-color: fade(@backcolor,30%)!important;
    }
    .backgroundColorOp:hover{
        background-color: fade(@backcolor,100%)!important;
    }

    .report-box > .ptul1 {
      border-bottom: 1px solid @color1 !important;
    }
    .ptActive{
      border-bottom: 2px solid  @color;
    }
    .detaCloud-tree::-webkit-scrollbar-track {
        background: #061840;
        border: 0;
        box-shadow: none;
    }
    .detaCloud-tree::-webkit-scrollbar-thumb {
        background: @color !important;
        opacity: 0.4;
    }
    .colorHover:hover {
        color: @color !important;
    }
    .hover:hover {
        background-image: linear-gradient(to right, @color, rgba(18, 212, 201, 0.2)) !important;
    }
    .gradient {
        background-image: linear-gradient(to right, @color, rgba(18, 212, 201, 0.2)) !important;
    }
    /* qinyh 样式重置 */
    .el-input__inner:focus{
        border-color:@color !important;
    }
    .el-textarea__inner:focus{
        border-color:@color !important;
    }
    .el-range-editor.is-active{
        border-color:@color !important;
    }
    .el-tabs__nav .el-tabs__item.is-active{
        color: @color !important;
    }
    .el-tabs__nav .el-tabs__active-bar.is-top{
        background-color: @color !important;
    }
    .el-form-item__content .el-radio-group .el-radio__input.is-checked{
        color: @color !important;
    }
    .el-form-item__content .el-radio-group .el-radio__input.is-checked>.el-radio__inner{
        color: @color !important;
    }
    .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color: @color !important;
        border-color: @color !important;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner{
        border-color: @color !important;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label{
        color: @color !important;
    }
    .el-loading-spinner .el-loading-text{
        color: @color !important;
    }
    .el-tabs__item:hover{
        color: @color !important;
    }
    .el-radio__input.is-checked + .el-radio__label{
        color: @color !important;
    }
    .el-radio__input.is-checked .el-radio__inner{
        background-color: @color !important;
        border-color: @color !important;
    }
    /* qinyh 样式重置 */
    .el-button--primary{
        background-color: @color !important;
        border-color: @color !important;
        height: 30px ;
        //width: 80px ;
        line-height: 6px ;
        //border-radius: 7px ;
    }
    .el-button--default{
        height: 30px ;
        //width: 80px ;
        line-height: 6px ;
        //border-radius: 7px ;
    }
    .el-button--default:hover{
        color: @color !important;
        background-color: fade(@backcolor,20%)!important;
    }
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background: transparent;
        > span:nth-child(2) {
            > div:first-child {
                color: @color !important;
            }
        }
    }
    .el-checkbox__inner:hover {
        border-color: @color !important;
    }
    .el-message-box__headerbtn:hover .el-message-box__close {
        color: @color !important;
    }
    //.el-button:hover, .el-button:focus {
    //    opacity: 0.8;
    //    //color: @color;
    //    //background: #fff !important;
    //    // border-color: #b8f2ef;
    //    // background-color: #e7fbfa;
    //}
    .el-button:hover {
        opacity: 0.8;
        //color: @color;
        //background: #fff !important;
        // border-color: #b8f2ef;
        // background-color: #e7fbfa;
    }
    .el-pager li.active {
        color: @color !important;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
        background: @color !important;
        border-color: @color !important;
    }
    .el-loading-spinner .path {
        stroke: @color !important;
    }
    .ivu-checkbox-wrapper-checked {
        color: @color !important;
    }
    .ivu-checkbox-checked .ivu-checkbox-inner {
        background:  @color;
        border-color:  @color;
    }
    .AllMonitorItemContent .rowsItems .items .rows.active .title{
        color:  @color;
    }
    .AllMonitorItemContent .rowsItems .items .rows.active .forward i {
        color:  @color;
    }
    .AllMonitorItemContent .rowsItems .items .rows:hover .title{
        color:  @color;
    }
    .AllMonitorItemContent .rowsItems .items .rows:hover .forward i{
        color:  @color;
    }
    .ivu-btn-primary {
        border-color:  @color;
        background:  @color;
        height: 30px ;
        //width: 80px ;
        line-height: 6px ;
        //border-radius: 7px ;
    }
    .ivu-radio-checked .ivu-radio-inner {
       border-color:  @color;
    }
    .ivu-radio-inner:after {
        background:  @color;
    }
    .ivu-select-item-selected, .ivu-select-item-selected:hover {
        color:  @color;
    }

    .ivu-radio-group-button .ivu-radio-wrapper-checked,
    .ivu-radio-group-button .ivu-radio-wrapper-checked:hover  {
        border-color:  @color !important;
        box-shadow: -1px 0 0 0  @color !important;
        //background-color:  @color !important;
        color: @color !important;

    }
    .ivu-radio-group-button .ivu-radio-wrapper-checked:first-child,
    .ivu-radio-group-button .ivu-radio-wrapper-checked:first-child:hover {
        box-shadow: 0 0 0 0  @color !important;
    }
    .ivu-radio-group-button .ivu-radio-wrapper:hover {
        color:  @color;
    }
    .ivu-input:hover {
        border-color:  @color;
    }
    .ivu-input:focus {
        border-color:  @color;
        box-shadow: -1px 0 0 0 rgba(144,147,153,0);
    }
    .ivu-select-selection:hover {
        border-color:  @color;
    }
    .ivu-select-selection:focus {
        border-color:  @color;
        box-shadow: 0px 0 0 0 rgba(144,147,153,0);
    }
    .ivu-btn{
        height: 30px ;
        //width: 80px ;
        line-height: 6px ;
        //border-radius: 7px ;
    }
    .ivu-btn-primary:hover {
        background: @color;
        border-color:  @color;

    }
    .ivu-progress-bg {
        background: @color !important;
    }

    // zml
    // .item:hover {
    //     color: @color;
    //     border-bottom: 1px solid @color;
    // }
}

main.js引入

import '../styles/color.less'
程序员灯塔
转载请注明原文链接:样式重置
喜欢 (0)