$white: #fff;
$default-border-color: #2986ce;
$table-border-color: #3e6b98;
$table-header-background-color: #284266;

#app {

  .main-container {
    color: white;
    //background-color: $base-menu-background;
    background-color: #101C38;
    background-image: url('../images/pageBg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .el-tabs__item {
      color: $white;
    }

    .el-tabs__item.is-active {
      color: #1890ff;
    }
  }
}

#app, .app-container {
  background-image: url('../images/pageBg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.app-title-bg {
  width: 100%;
  background-color: #101C38;
  background-image: url('../images/pageBg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;

  .titleBg {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-image: url('../images/topTitleBg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .title-text {
      font-size: 30px;
      font-weight: bold;
    }
  }

  .sys-time {
    width: 10%;
    height: 50px;
    font-size: 16px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 1%;
  }
}

.navbar {
  //background-color: $base-menu-background !important;
  background-color: transparent !important;
  background-image: url('../images/pageBg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  //width: 100px;
  position: absolute !important;
  right: 0;

  .avatar-container {
    .avatar-wrapper {
      .el-icon-caret-bottom {
        color: $white;
      }
    }
  }
}

.tags-view-container {
  //background-color: $base-menu-background !important;
  background-color: transparent !important;
  background-image: url('../images/pageBg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #fff;

  .tags-view-wrapper {
    .tags-view-item {
      border-radius: 2px;
    }
  }
}

.el-breadcrumb__inner.is-link, .el-breadcrumb__inner a {
  color: $white;
}

// 按钮背景
.cpp-btu-background {
  background-image: url('../images/topRightBtuBg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/*vxe表格*/
.vxe-table--render-default.border--default .vxe-table--header-wrapper, .vxe-table--render-default.border--full .vxe-table--header-wrapper, .vxe-table--render-default.border--outer .vxe-table--header-wrapper {
  background-color: $table-header-background-color !important;
  color: $white;
}

.vxe-table--render-default .vxe-table--body-wrapper, .vxe-table--render-default .vxe-table--footer-wrapper {
  background-color: transparent !important;
  color: $white !important;
}

.vxe-pager {
  background-color: transparent !important;
}

.vxe-pager--jump, .vxe-pager--total {
  color: $white;
}

.vxe-table--render-default .vxe-body--row.row--current {
  background-color: $base-menu-background !important;
}

.vxe-table--render-default .vxe-body--row.row--hover, .vxe-table-render-default .vxe-body--row.row--hover.row--stripe {
  background-color: $base-menu-background !important;
}

// 边框
.vxe-table--render-default.border--full .vxe-body--column, .vxe-table--render-default.border--full .vxe-footer--column, .vxe-table--render-default.border--full .vxe-header--column {
  background-image: linear-gradient($table-border-color, $table-border-color), linear-gradient($table-border-color, $table-border-color) !important;
}

.vxe-table .vxe-table--header-wrapper .vxe-table--header-border-line, .vxe-table--render-default .vxe-table--border-line, .vxe-pager.is--perfect {
  border: 1px solid $table-border-color !important;
}

.vxe-table--render-default.border--full .vxe-table--fixed-left-wrapper {
  border-right: 1px solid $table-border-color !important;
  background-image: url('../images/pageBg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*element表格*/
.el-table, .el-table tr {
  background-color: transparent !important;
  color: $white !important;
}

.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: transparent !important;
}

.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
  background: $table-header-background-color !important;
  color: white !important;
}

.el-table [class*=el-table__row--level] .el-table__expand-icon {
  color: white;
}

.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
  border-bottom: 1px solid $table-border-color;
}

.el-table--border .el-table__cell {
  border-right: 1px solid $table-border-color;
}

.el-table--group, .el-table--border {
  border: 1px solid $table-border-color;
}

.el-table::before, .el-table--group::after, .el-table--border::after {
  background-color: $table-border-color;
}

/*element 分頁*/
.el-pagination__total, .el-pagination__jump {
  color: $white !important;
}

.el-pagination .btn-prev, .el-pagination .btn-next {
  background: transparent !important;
  color: white !important;
}

.el-pager li {
  background: transparent !important;
  color: white;
}

.el-pager li:hover {
  color: #1890ff;
}

/*element 弹窗*/
.el-dialog__header, .el-dialog__body, .el-dialog__footer {
  //background-color: $base-menu-background !important;
  color: white !important;
  background-color: #406e90 !important;
}

.el-dialog__title {
  color: $white !important;
}

.el-form-item__label {
  color: $white !important;
}

.el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
  color: #083d5c;
}

.el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.el-radio__label {
  color: white;
}

.dark-el-dialog {
  .el-input__inner {
    background-color: transparent;
    border: 1px solid $white;
    color: #cddef1;
  }

  .el-button {
    background-color: transparent !important;
    border-top: none;
    border-bottom: none;
    border-color: #1890ff;
    background-image: url('../images/topRightBtuBg.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
  }

  .el-dialog.is-fullscreen {
    background: transparent;
  }

  .el-table, .el-table tr {
    background-color: #083d5c !important;
    color: $white !important;
  }
  .el-radio__input.is-checked + .el-radio__label {
     color: white;
  }
}

/*element-tree*/
.el-tree {
  background: transparent !important;
  color: white !important;
  border: .5px solid white;
}

.el-tree-node__content:hover {
  background-color: $base-menu-background;
}

/*element card*/
.el-card {
  border: 0.001rem solid $default-border-color;
  background-color: transparent;
  color: #FFFFFF;

  .el-table th.el-table__cell {
    background: $table-header-background-color !important;
  }
}

/*element input*/
.dark-el-input {
  .el-input__inner {
    background-color: rgba(15, 28, 49, 0.8);
    border: 1px solid $default-border-color;
    color: #cddef1;
  }
}

/*element btu */
.dark-el-button {
  .el-button, .el-button-group .el-button {
    background-color: transparent !important;
    border-top: none;
    border-bottom: none;
    border-color: #1890ff;
    background-image: url('../images/topRightBtuBg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
  }
}

/*element select*/
// 日期选择范围
.el-date-editor .el-range-input {
  color: white !important;
  background: transparent;
}

.el-date-editor .el-range-separator {
  color: $white !important;
}

.el-picker-panel__body-wrapper {
  .el-input__inner {
    background-color: rgba(15, 28, 49, 0.8);
    border: 1px solid $default-border-color;
    color: #cddef1;
  }
}

.el-picker-panel__footer {
  border-top: 1px solid rgba(29, 128, 218, 1) !important;
  background: rgba(30, 84, 128, 0.8) !important;
}

.cpp-popper {
  background: rgba(30, 84, 128, 0.8);
  border: 1px solid rgba(29, 128, 218, 1);
  box-shadow: rgba(30, 84, 128, 0.8);

  //日期控件样式
  .el-picker-panel__body-wrapper {
    color: #cddef1 !important;
    background: rgba(15, 28, 49, 0.65);
  }

  //日期区间选择面板分割线
  .el-date-range-picker__content.is-left {
    border-right: 1px solid $default-border-color;
  }

  //日期区间选择面板左右箭头图标颜色
  .el-picker-panel__icon-btn {
    color: #cddef1;
  }

  //不可选择字体色
  .is-disabled {
    color: #bbbbbb;
  }

  //星期表头字体样式
  .el-date-table th {
    color: #cddef1 !important;
    border-bottom: 1px solid $default-border-color;
  }

  //日期和选中范围背景样式
  .el-date-table td.in-range div {
    color: #cddef1 !important;
    background-color: rgba(23, 88, 137, 0.90);
  }

  //不可选择日期背景色
  .el-date-table td.disabled div {
    background-color: rgb(57, 83, 114);
  }

  // 弹出框外部尖三角样式 - 边框色
  .popper__arrow {
    border-bottom-color: rgba(29, 128, 218, 1) !important;
  }

  // 弹出框外部尖三角样式 - 填充色
  .popper__arrow::after {
    border-bottom-color: rgba(29, 128, 218, 1) !important;
  }

  //下拉列表选择项
  .el-select-dropdown__item {
    color: #cddef1;
  }

  //下拉列表选中项
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: rgba(15, 28, 49, 0.65);
  }
}

