/* 主页面背景 */
.app-main {
  background: #212121;
}

/* 侧边栏菜单 logo */
.sidebar-logo-container {
  background: #393939;
  & .sidebar-logo-link {
    & .sidebar-title {
      color: #fff;
    }
  }
}

/* 菜单 */
.el-scrollbar {
  background: #303030;
}

/* 导航栏 */
.navbar {
  background: #303030;
  /* 与tagViews的间隔 */
  border-bottom: 1px solid #535353;
  /* 收缩图标 */
  >.hamburger-container {
    fill: #ffffff;
    &:hover {
      background: rgba(0, 0, 0, .05)
    }
  }
  /* 右侧功能区 */
  >.right-menu {
    /* 功能项 */
    >.right-menu-item {
      color: #fff;
      &.hover-effect {
        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }
  }
}

/* 打开的菜单视图 */
.tags-view-container {
  background: #303030;
  >.tags-view-wrapper {
    /* 显示区域 */
    .tags-view-item {
      color: #fff;
      border-left: 1px solid #5a6171;
      /* 关闭图标 */
      &>.el-icon-close {
        color: #fff;
      }
      &:hover {
        color: #dbd4d4;
        & .el-icon-close {
          color: red;
        }
      }
      /* 边框 */
      &:last-of-type {
        border-right: 1px solid #5a6171;
      }
      /* 激活项 */
      &.active {
        /* 图标 */
        &::before {
          background: #85ef47!important;
          box-shadow: 0 0 7px #b7eb8f;
        }
      }
    }
  }
  /* 菜单弹出功能区 */
  >.contextmenu {
    background: #fff;
    color: #333;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    /* 功能项 */
    li {
      &:hover {
        background-color: #e8f4ff;
        color: #46a6ff;
      }
    }
  }
}

/* 功能区背景 */
.head-menu-container .tags-view-container {
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
}

/* 头部菜单右侧功能区字体颜色 */
.headMenu {
  .navbar {
    background-color: rgb(39, 44, 51);
    .svg-icon.search-icon{
      color: rgba(255, 255, 255, 0.8);
    }

    .right-menu .right-menu-item .user-name{
      color: rgba(255, 255, 255, 0.8);
    }
  }
  #screenfull {
    color: rgba(255, 255, 255, 0.8);
  }
}

.app-container,.content-container {
  background: #303030;
}

//.drawer-bg {
//  background: #000;
//}

/* 底部商标区 */
.footer {
  background: #303030;
  color: #fff;
}

/* 仪表盘 */
.main {
  /* 用户信息区 */
  .user-wrapper {
    background: #393939;
    .user-info {
      .random-message {
        color: #fff;
      }
      .user-dept, .user-login-info {
        color: #dddbdb;
      }
    }
  }
  /* 访问量块 */
  .count-header {
    background: #303030;
    span {
      color: #fff;
    }
  }
  .todayIp {
    color: #27c6da !important;
  }
  .todayVisit {
    color: #fc573b !important;
  }
  .totalVisit {
    color: #be63f9 !important;
  }
}

/* 对话框 */
.el-dialog__body {
  color: #ddd;
}

/* 表格 */
.el-table{
  background-color: #303030 !important;
  & tr {
    background-color: #393939;
  }
  /* 表头 */
  & thead {
    color: #fff;
  }
  & th.is-leaf:first-child, & td:first-child {
    border: 1px solid #303030;
  }
  & td,& th.is-leaf,&--border, &--group{
    border: 1px solid #303030;
  }
  /* 斑马纹 */
  &--striped &__body tr.el-table__row--striped td {
    background: #464646;
  }
  &--enable-row-hover &__body tr:hover>td {
    background-color: #2b2a2a;
  }
}

/* 表格操作图标 */
.table-operation, .el-icon-{
  &view{
      color: #87d068;
  }
  &unlock{
    color: #87d068;
  }
  &setting {
    color: #2db7f5;
  }
  &delete {
    color: #f50;
  }
}

/* 卡片组件 */
.el-card {
  background-color: #303030;
  color: #fff;
}

/* 树形选择组件 */
.vue-treeselect__menu-container {
  color: #303030;
}
.vue-treeselect__single-value {
  color: #606266 !important;
}

/* 树组件 */
.el-tree{
  background: #393939;
  color: #fff;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#000000}

/* 表单组件 */
.el-form-item__label{
  color: #fff;
}

/* 输入组件 */
.el-input {
  &-group__append, &-group__prepend {
    background-color: #F5F7FA;
  }
  /* 数字输入组件 */
  &-number__increase, &-number__decrease {
    background-color: #F5F7FA;
  }
}

/* 日期组件 */
.el-picker-panel__icon-btn {
  color: #303133;
}

/* markdown组件 */
aside {
  background: #393939;
}
.tui-editor-defaultUI {
  border: 1px solid #737070;
  &-toolbar{
    background: #303030;
    & button{
      background-color: #303030;
      border: 1px solid #303030;
      &:hover,&:active,&:hover {
        border: 1px solid #737070;
        background-color: #303030;
      }
    }
  }
  & .te-mode-switch-section {
    background-color: #303030;
    border-top: 1px solid #737070;
  }
  & .te-switch-button{
    background: #303030;
    border-left: 1px solid #737070;
    border-right: 1px solid #737070;
  }
  & .te-switch-button.active {
    background-color: #393939;
    color: #fff;
    border-left: 1px solid #737070;
    border-right: 1px solid #737070;
  }
  & .te-markdown-tab-section {
    background: #393939;
  }
}

/* 分割线 */
.el-divider__text {
  background-color: #303030;
}

.te-toolbar-section{
  border-bottom: 1px solid #737070;
}
.tui-popup-wrapper{
  background: #393939;
  border: 1px solid #737070;
}
.tui-popup-body {
  color: #fff;
}
.te-heading-add ul :hover {
  background: #212121 !important
}
.CodeMirror{
  color:#fff;
  &-scroll{
    background: #393939;
  }
}
.tui-editor .te-md-splitter{
  border-left: 1px solid #737070;
}