@import './sidebar.scss';
@import './font-style.scss';

.blue .el-dialog__header {
  padding: 10px 10px 10px;
}

.blue .el-dialog__body {
  padding: 10px 10px;
}

.blue {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN, Arial, sans-serif;
  font-size: 14px;
  color: #4A4A4A;

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }


  html {
    height: 100%;
    box-sizing: border-box;
  }

  #app {
    height: 100%;
  }

  a,
  a:focus,
  a:hover {
    cursor: pointer;
    color: inherit;
    outline: none;
    text-decoration: none;
  }

  div:focus {
    outline: none;
  }

  a:focus,
  a:active {
    outline: none;
  }

  a,
  a:focus,
  a:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
  }

  .clearfix {
    &:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }
  }

  //main-container全局样式
  .app-main {
    min-height: 100%
  }

  .app-container {
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0px 1px 8px 0px #00000019;
  }

  .operation-area {
    margin-bottom: 10px;
    height: 40px;
  }
  .operation-area-chart {
    float: right;
    padding-right: 24px;
    padding-top: 10px;
  }


  // 解决tab页签中内容多时没有滚动条问题
  .el-tabs__content {
    flex-grow: 1;
    overflow-y: auto;
  }

  // 解决在edge浏览器中dialog有遮罩层 或 MessageBox的$confirm时，遮罩层偏移，导致弹框中组件元素无法操作问题。
  // .el-dialog__wrapper、.el-message-box__wrapper、.v-modal默认position是relative，改为absolute就不会出现偏移了。
  // dialog弹框的样式
  .el-dialog__wrapper {
    position: absolute;
  }

  //  MessageBox的样式，必须这样修改，否则会导致点击确定、取消按钮不好用
  .el-message-box__wrapper {
    position: absolute;
  }

  // dialog遮罩层的样式
  .v-modal {
    position: absolute;
  }

  .el-tree-node.is-current>.el-tree-node__content {
    background-color: #c2d6ea !important;
  }

  .el-pagination {
    background: #fff;
    text-align: center;
    padding: 5px 0;
    color: #777;
  }

  .el-pager li.active {
    color: #4A4A4A;
    background: #FBE997;
    border-radius: 50px;
  }

  .el-table td,
  .el-table th {
    padding: 10px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #FFF3CB
  }

  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
  .el-table__body tr.current-row>td,
  .el-table__body tr.hover-row.current-row>td,
  .el-table__body tr.hover-row.el-table__row--striped.current-row>td,
  .el-table__body tr.hover-row.el-table__row--striped>td,
  .el-table__body tr.hover-row>td {
    background-color: #FFF3CB
  }

  .el-table th {
    background-color: #eee;
    color: #555
  }

  // 列表表头整个都有背景色
  .el-table .el-table__header-wrapper {
    background: #eee;
  }
}