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

/* 侧边菜单栏背景 */
.sidebar-container .el-scrollbar {
  background: #303030;
}

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

/* 打开的菜单视图 */
.tags-view-container {
  background: #fff;
  >.tags-view-wrapper {
    /* 显示区域 */
    .tags-view-item {
      color: #999;
      border-left: 1px solid #f1f1f1;
      /* 关闭图标 */
      &>.el-icon-close {
        color: #000;
      }
      &:hover {
        color: #495060;
        &>.el-icon-close {
          color: red;
        }
      }
      /* 边框 */
      &:last-of-type {
        border-right: 1px solid #f1f1f1;
      }
      /* 激活项 */
      &.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;
      }
    }
  }
}

/* 功能区背景 */
.app-container,.content-container {
  background: #fff;
}

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

/* 仪表盘 */
.main {
  /* 访问量块 */
  .todayIp {
    color: #27c6da !important;
  }
  .todayVisit {
    color: #fc573b !important;
  }
  .totalVisit {
    color: #be63f9 !important;
  }
}

/* 表格 */
.el-table{
  /* 表头 */
  & thead {
    color: #606266;
  }
}

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

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

/* 头部导航栏一级菜单 */
.head-menu-container {
  /* 显示区域 */
  .el-submenu__title {
    /* 图标 */
    i {
      color: #909399;
    }
    &:active {
      color:#000 !important;
    }
    &:hover {
      background-color: #f0f0f0 !important;
    }
  }
  /* 激活项 */
  .el-submenu.is-active .el-submenu__title {
    color: #000 !important;
  }
}

/* 头部导航栏子菜单 */
.el-menu--horizontal {
  /* 头部导航栏子菜单 */
  >.el-menu {
    background: #fff !important;
  }
  .headMenu-wrapper {
    /* 显示区域 */
    .el-menu-item, .el-submenu__title {
      color: #909399;
      background-color: white;
      /* 激活项 */
      &.is-active {
        color:#000 !important;
        background-color: #f0f0f0 !important;
      }
      &:hover {
        background-color: #f0f0f0 !important;
      }
    }
  }
}