// 引入变量
@import "./reportChart.public.less";

/*样式颜色边距修改-在上面的变量修改即可*/
.reportChart-main-review {
  background-color: @main-bg;
  color: @main_color;
  min-height: 100vh;

  //按钮样式
  .el-button {
    // 按钮颜色
    &.el-button--primary {
      background: @btn-bg;
    }
  }
  // 输入框样式
  .el-input__inner {
    color: @main_color;
    border:@main-border;
    background-color: @main-bg;

    .el-range-input,
    .el-range-separator {
      color: @main_color;
      background-color: @main-bg;
    }
  }

  /*----------------- 表报统计-from表单样式Start--------------*/
  .el-form {
    .el-form-item {
      margin-bottom: .625rem;

      //按钮样式
      .el-button {
        padding: .375rem 1.25rem;
      }

      .el-form-item__label {
        color: @main_color;
      }
    }

  }

  /*----------------- 表报统计-from表单样式endt--------------*/
  .reportChart-content {
    margin: @main_P;

    // 删格样式
    .el-row.el-row-x-1 {
      padding-bottom: .625rem;
    }

    .el-row.el-row-y-2 {
      &>.el-col:first-of-type {
        padding-bottom: .3125rem;
      }

      &>.el-col:last-of-type {
        padding-top: .3125rem;
      }
    }

    /*----------------- 表报统计-dialog对话框样式Start--------------*/
    .el-dialog {
      border-radius: .375rem;
      overflow: hidden;
    }

    .el-dialog__header {
      background: @dialog-header_bg;

      .el-dialog__title {
        color: @dialog-header_color;
      }
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: @dialog-header_color;
      }

      &:hover .el-dialog__close {
        color: rgba(255, 255, 255, 0.5);
      }
    }

    .el-dialog__body {
      background-color: @main-bg;
      padding-bottom: .625rem;
      .tools{
        border-bottom: @main-border ;
      }
    }

    .el-dialog__footer {
      background-color: @main-bg;
      border-top:@main-border;
    }

    /*-----------------  表报统计-dialog对话框样式End--------------*/
    /*----------------- 表报统计-el-tree样式Start--------------*/
    .el-tree{
      background-color: @main-bg;
      color:@tree-color;
      .el-tree-node .el-tree-node__content{
        background-color: @main-bg;
        &:hover{
          background-color: @main-bg;
        }
      }
      .is-current{
        background-color: @main-bg;
      }
    }
    /*----------------- 表报统计-el-tree样式end--------------*/
    /*----------------- 表报统计-分页样式Start--------------*/
    .el-pagination {
      .el-pagination__total {
        color: @main_color;
      }

      .btn-prev,
      .btn-next,
      .el-pager .number {
        color: @main_color;
        border: 1px solid @main-border-color;
        background-color: @highlight-bg;
      }

      .el-pagination__jump {
        color: @main_color;
      }

      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }

      .el-pagination__total {
        margin-right: 0px;
        margin-left: .625rem;
        float: right;
      }
    }

    /*----------------- 表报统计-分页框样式End--------------*/
    // echart 块样式
    .reportChart_crud {
      box-sizing: border-box;
      height: 100%;
      width: 100%;
      background-color: @highlight-bg;
      padding: @main_P;

      &>dt {
        height: 2.5rem;
        line-height: 2.5rem;
        background: url(~@/assets/img/statisticalAnalysis/reportChart/u25.png) left center no-repeat;
        background-size: 1.5rem auto;
        text-indent: 1.75rem;
        color: @text-ighlight;
        font-weight: 500;

        &>p.right {
          float: right;

          span.lin {
            color: @main_color;
          }

          span:not(.lin) {
            cursor: pointer;
          }
        }
      }

      &>dd {
        height: calc(100% - 2.5rem);

        &>div.echart-dom {
          width: 100% !important;
          height: 100% !important;
        }
      }
    }

    // echrt-table 表格样式
    .reportChart_tableChart_content .reportChart_tableChart {
      background-color: @highlight-bg;
    }
  }
}
// el-select 选择框 弹框样式
.el-select-reportChart{
  background-color: @highlight-bg;
  border: @main-border;
  .el-select-dropdown__wrap{
    .el-select-dropdown__list{
      .el-select-dropdown__item{
        color:@main_color_rgba;
        &.selected,&.hover{
          color:@main_color;
          background-color: @main-bg;
        }
      }
    }
  }
}
//  el-toop 提示样式
.reportChart_tooltip {
  background-color: @highlight-bg  !important;
  color:@main_color_rgba !important;
  border: @main-border;
}

//  el-date-picker 时间选择器 日期选择弹框样式
.reportChart_date-picker {
  color: @main_color ;
  // 提示框小箭头
  .popper__arrow{
    // border-bottom-color:@main_color_rgba;
    &::after{
    // border-bottom-color:@main_color_rgba;
    }
  }
  .el-icon-arrow-right ,.el-picker-panel__icon-btn{
    color: @main_color;
  }
  background-color: @highlight-bg;
  border:@main-border;
    .el-date-range-picker__time-header{
      border-bottom:@main-border;
      .el-time-panel{
        .el-time-panel__content{
          &::before{
            border-top:@main-border;
            border-bottom:@main-border;
          }
          &::after{
            border: none;
          }
        }
        border:@main-border;
        background-color: @highlight-bg;
        .el-time-spinner__item{
          color: @main_color_rgba ;
          &:hover{
            background-color: @main-bg ;
            color: @main_color ;
          }
        }
        .el-time-spinner__item.active{
          color: @main_color ;

        }
        .el-time-panel__footer{
          border-top:@main-border;
          .el-time-panel__btn.cancel{
            color: @main_color_rgba ;
          }
        }

      }
      .el-date-range-picker__editor{
        // 输入框样式
        .el-input__inner {
          color: @main_color;
          border:@main-border;
          background-color: @highlight-bg;

          .el-range-input,
          .el-range-separator {
            background-color: @highlight-bg;
          }
        }
      }
    }
  .el-date-range-picker__content.is-left{
    border-right:@main-border;
  }
  .el-date-table th {
    border-bottom:@main-border;
    color: @main_color;
  }
  .el-date-table td.in-range div {
    background-color: @main-bg ;
  }
  .el-month-table{
    td  .cell{
      color: @main_color_rgba;
      
    }
    .in-range  div{
      background-color: @main-bg;
      &:hover{
        background-color: @main-bg ;
      }
      .cell{
        color: @main_color;
      }
    }
  }

  .el-picker-panel__footer {
    background-color: @highlight-bg;
    border: @highlight-bg;
    .el-picker-panel__link-btn.el-button--default{
      background: @btn-bg;
      color: @main_color;
    }
  }

}
//  el-date-picker 选择年月选择器 年月选择弹框样式
.el-date-editor--year,.el-date-editor--month{
  .el-input__inner{
    // width: 114px;
  }
  .el-input__prefix{
    display: none;
  }
}
.el-date-picker-year,.el-date-picker-month{
  border:@main-border;
  background-color: @main-bg ;
  .el-date-picker__header{
    border-bottom:@main-border;
    .el-picker-panel__icon-btn,.el-date-picker__header-label{
      color: @main_color;
    }
  }
  .el-year-table{
    td .cell{
      color: @main_color_rgba;
    }
  }
  .el-picker-panel__body-wrapper{
    .el-month-table{
      .cell{
        color: @main_color;
      }
    }
  }
}
.el-date-picker-month-input{
  width:130px !important;
}
// 屏蔽掉头部
.el-date-picker_header_none{
  .el-date-picker__header{
    display: none;
  }
}
//  el-date-picker 选择年月选择器 年月选择弹框样式-end