//default var
$bg:#fff;
$color:#000;
$table-color:#424242;
$active-color:#409EFF;
$td-hover:#e6f7ff;
$table-empty: #f1f5f7;
$border-color:#eaeaea;
$sub-title-color:#fff;
$button-color:#fff;//默认搜索按钮颜色
$el-image-error-bg:#666;
$el-image-error-color:#fff;
#app.white-theme{
  &{
    --menuText:#222222;
    --menuActiveText:#409EFF;
    --subMenuActiveText:#409EFF; // https://github.com/ElemeFE/element/issues/12951
    --menuBg:#fff;
    --menuHover:#fff;
    --subMenuBg:#fff;
    --subMenuHover:#fff;   
    background-color:$bg;
  }  
  .app-wrapper{
      .el-drawer{
        background-color: $bg;
        .el-drawer__header{
          color: $color;
          border-bottom: 1px solid #ccc;
          margin-bottom: 0;
          padding-bottom: 10px;
        }
        .drawer-head{
          .tab-item {
            color: $color;
            &.active{
              color: $active-color;
            }
          }
        }
      }
      p{
        color: $color;
      }  
      .el-input input, .el-input textarea, .el-textarea input, .el-textarea textarea,select,.vue-treeselect__single-value{
        background: $bg !important;
        color: $color !important;
      }   
      // 个人中心
      .group-box{
        background: $bg ;
        color: $color;
        .group-title{
          -webkit-text-fill-color:unset;
           color: $color;
        }
      }
      .sidebar-container{
        .sidebar-logo-container{
          background-color: #071A29;
        }
        .el-menu-item i,.el-submenu__title i{
          color:  $color;
        }      
      }
      .main-container{
        .app-main{
            &{background-color: #f0f2f5;}
            .content-container{
              background-color: $bg;
              color: $color;
              .page-title{
                background: $bg;
                color: $color;
                -webkit-text-fill-color:unset;
              }  
              // 右侧分组区域
              .title-bar{
                border-color: $active-color
              }
              .list-group{
                  &{
                    background: $bg;
                    color:  $color;  
                  }     
                  .el-tree{color: $color;}
                  .sub-title-bar{
                    border-left: 0;
                    .sub-title{
                      color: $sub-title-color;
                      background-color: $active-color;
                      border-color: $active-color;
                    }              
                  }
                  .page-title{
                    font-weight: 600;               
                  }
                  .el-tree .el-tree-node.is-current > .el-tree-node__content, .el-tree .el-tree-node__content:hover{
                    color: $color;
                    background-color: $active-color !important;
                    border-color: $active-color;                  
                  }
                  .list-item{
                    color: $color;
                    border-bottom: 1px solid $border-color;
                  }
              }             
              // 表格上端的搜索区块
              .custom-search-form{
                background: $bg;
                color:  $color;
              }
              .search-item,.search-input{
                .lable{
                  color: $color;
                }
                .el-input-group__append{
                  color: $button-color;
                  background-color: $active-color;
                  border-color: $active-color;              
                }
              }            
              // 表格
              .el-table{
                &{
                  background-color: $bg;
                  border-top:1px solid $border-color;
                }
                tr,td,th{
                  background-color: $bg !important;
                  color: $table-color !important;
                }
                th,td{
                  border-bottom: 1px solid $border-color;
                }
                tr{
                  cursor: pointer;
                }
                tr:hover > td {
                  background-color: $td-hover !important;
                }
                .el-table__empty-block{
                  background-color:$table-empty;
                }
              } 
             .ck-table{
                background-color: $bg;
                border-color:$border-color;
                color: $table-color;
              }
              // 分页器
              .el-pagination {
                .el-input input, .el-input textarea, .el-textarea input, .el-textarea textarea{
                  background: $bg !important;
                  color: $color !important;
                  &.el-input__inner{
                    color: $color !important;
                  }
                }            
                span:not([class*=suffix]){
                  color: $color !important;
                }
              } 
            } 
            .el-tree,.content-title{
              color:$color ;
            }   
                        
        }
        // 表单重置
        .el-form{
          .el-form-item__label{
            color: $color !important;
          }
        }
      }
    /*滚动条里面小方块*/
    ::-webkit-scrollbar-thumb {
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px rgba(24, 143, 255, 0.767);
      background: rgba(24, 143, 255, 0.349);
    }
  
    /*滚动条里面轨道*/
    ::-webkit-scrollbar-track {
      -webkit-box-shadow:  unset;
      border-radius: 0;
      background: unset;
      background-color: #1890ff;
    }    
  }  
// cover  element-ui-reset
// el-dialog
  .el-dialog {
    background: $bg;
    border-radius: 2px;
  }
  .el-dialog__title {
    color: $color;
  }
// el-drawer
  .el-drawer {
    background-color:  $bg;
    .el-drawer__header{
      color: $color;
    }    
  }
// el-switch
  .el-switch__label,.el-switch__label--left{
    color: $color;
  }
// el-table
  .el-table thead {
    color: $color;
  }
  .custom-table-search{
    .search-handle-wrap{
      .search-handle-item{
        &.moreBt{
          color: $color;
        }
      }
    }
  }
  .search-input{
    .el-input-group__append, .el-input-group__prepend{
      border-color:$border-color;
      background: $bg;
      color:$color;
    }
  }
// el-tabs
  .el-tabs{
      .el-tabs__item{
        color: $color;
      }
      .el-tabs__item.is-active{
        color: #1890ff;
      }
  }
// el-tree
  .el-tree{
    color: $color;
  }
// .el-image
  .el-image{
    .el-image__placeholder{
      background: $el-image-error-bg;
    }   
    .el-image__error{
      background: $el-image-error-bg;
      color: $el-image-error-color;
    }
  }
  input ,textarea{
    caret-color: $color;
  }
  .ql-editor p,
  .ql-editor ol,
  .ql-editor ul,
  .ql-editor pre,
  .ql-editor blockquote,
  .ql-editor h1,
  .ql-editor h2,
  .ql-editor h3,
  .ql-editor h4,
  .ql-editor h5,
  .ql-editor h6 {
    color: $color;
  }
  
  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    background: $bg;
  }
  
  .ql-toolbar.ql-snow, .ql-container.ql-snow {
    border-color: $border-color !important;
  }
  .ql-container,.ql-editor{
    min-height: 150px;
  }
  .ql-snow .ql-picker ,.ql-editor.ql-blank::before{
    color: $color !important;
  }
  
  .ql-snow .ql-stroke, .ql-snow .ql-fill {
    stroke: $table-color !important;
  }
  .ql-snow .ql-stroke.ql-fill {
    fill: $table-color !important;
  }
}