// 暗黑模式自定义样式
html.dark {
  /* 自定义深色背景颜色 */
  //--el-bg-color: #141414;
  //--el-color-primary: #409eff;
  //--el-color-primary-light-3: #3375b9;
  //--el-color-primary-light-5: #2a598a;
  //--el-color-primary-light-7: #213d5b;
  //--el-color-primary-light-8: #1d3043;
  //--el-color-primary-light-9: #18222c;
  //--el-color-primary-dark-2: #66b1ff;
  //--el-color-success: #67c23a;
  //--el-color-success-light-3: #4e8e2f;
  //--el-color-success-light-5: #3e6b27;
  //--el-color-success-light-7: #2d481f;
  //--el-color-success-light-8: #25371c;
  //--el-color-success-light-9: #1c2518;
  //--el-color-success-dark-2: #85ce61;
  //--el-color-warning: #e6a23c;
  //--el-color-warning-light-3: #a77730;
  //--el-color-warning-light-5: #7d5b28;
  //--el-color-warning-light-7: #533f20;
  //--el-color-warning-light-8: #3e301c;
  //--el-color-warning-light-9: #292218;
  //--el-color-warning-dark-2: #ebb563;
  //--el-color-danger: #f56c6c;
  //--el-color-danger-light-3: #b25252;
  //--el-color-danger-light-5: #854040;
  //--el-color-danger-light-7: #582e2e;
  //--el-color-danger-light-8: #412626;
  //--el-color-danger-light-9: #2b1d1d;
  //--el-color-danger-dark-2: #f78989;
  //--el-color-error: #f56c6c;
  //--el-color-error-light-3: #b25252;
  //--el-color-error-light-5: #854040;
  //--el-color-error-light-7: #582e2e;
  //--el-color-error-light-8: #412626;
  //--el-color-error-light-9: #2b1d1d;
  //--el-color-error-dark-2: #f78989;
  //--el-color-info: #909399;
  //--el-color-info-light-3: #6b6d71;
  //--el-color-info-light-5: #525457;
  //--el-color-info-light-7: #393a3c;
  //--el-color-info-light-8: #2d2d2f;
  //--el-color-info-light-9: #202121;
  //--el-color-info-dark-2: #a6a9ad;
  //--el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36),0px 8px 20px rgba(0, 0, 0, 0.72);
  //--el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
  //--el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
  //--el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72),0px 12px 32px #000000,0px 8px 16px -8px #000000;
  //--el-bg-color-page: #0a0a0a;
  //--el-bg-color: #141414;
  //--el-bg-color-overlay: #1d1e1f;

  --zb-border-light: 1px solid #4c4d4f;


  body{
    background: none;
  }
  .tags-wrap-container{
    border: var(--zb-border-light);
    border-top:none ;
    border-left: none;
    box-sizing: border-box;

    .tags-view{
      background: none;
    }
  }
  .m-container-layout{
    .m-container-layout-inner{
      background: none;
      color: var(--el-text-color-primary) !important;
    }
  }
  // 编辑器
  .w-e-toolbar, .w-e-text-container, .w-e-menu-panel{
    background: none!important;
  }
  // 富文本
  .md{
    background: none!important;
  }

  #app{
    .sidebar-container{
      background: none!important;
      & .el-menu .el-sub-menu > .el-sub-menu__title,
      & .el-sub-menu .el-menu-item {
        background-color: var(--el-bg-color) !important;

        &:hover {
          background-color: var(--el-bg-color) !important;
        }
        &.is-active{
          background-color: #060708!important;
        }
      }
      .el-sub-menu__title {
        &:hover {
          background-color: var(--el-bg-color) !important;
        }
      }
    }
  }
  .zb-pro-table .header{
    background: none!important;
    border: var(--zb-border-light);
  }
  .zb-pro-table .footer{
    background: none!important;
    border: var(--zb-border-light);
  }
  // m-layout-header
  .m-layout-header{
    color: var(--el-text-color-primary) !important;
    background: none;
    .header{
      border:var(--zb-border-light);
      border-left:none ;
    }

  }
  .el-scrollbar{
    border:var(--zb-border-light);
    border-top:none ;
  }
  .sidebar-logo-container{
    background: none;
    height: 60px;
    box-sizing: border-box;
    border:var(--zb-border-light);
  }

  // el-drawer__header
  .el-drawer__header {
    span {
      color: var(--el-text-color-primary) !important;
    }
  }
  .theme-item{
    color: var(--el-text-color-primary) !important;
  }

  // icon
  .m-info .bell,
  .m-setting .bell,
  .m-headerSearch .bell{
    color: white!important;
  }

  .el-table__header th {
    font-weight: bold;
    color: white;
  }
  .footer-layout{
    background: none;
    color: white;
  }
  .app-container-inner{
    background: none;
  }
  .list-group-item{
    background: none!important;
    border: 1px solid white;
  }
  .app-container{
    .header{
      background: none;
    }
    .footer{
      background: none;
    }
  }
  .zb-pro-table .el-table__header th{
    color: white!important;
  }

}
