$border-color: #13537e;
$dark-bg-color: #051E44;
.listview-dark::v-deep {
  //滚动条
  ::-webkit-scrollbar {
    width: 4px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(1, 245, 255, 0.2) !important;
  }

  /*el-aside的公共样式**********************************************************************************************/
  .el-aside {
    .aside-tree-content {
      border-color: rgba(26, 179, 255, 0.5) !important;
    }
  }

  .el-header {
    .el-card {
      border-color: transparent;
      background-color: transparent;
    }

    .el-card.isShowAllSearch {
      background-color: $dark-bg-color;
    }
  }

  .el-table {
    color: rgba(255, 255, 255, 1);
    background-color: transparent;

    th, td {
      padding: 0;
      height: 50px;
      line-height: 50px;
    }

    table {
      //border-color: transparent !important;
    }

    thead {
      color: rgba(255, 255, 255, 1);
      font-weight: 400;

      tr, th {
        background: transparent;
        //background: $dark-bg-color;
        border-right: none;
        border-bottom: none;
      }
      tr > th.el-table__cell.gutter {
        border-bottom: none;
      }

      .cell {
        .el-checkbox {
          .el-checkbox__inner {
            border: 1px solid rgba(1, 245, 255, 1) !important;
            background-color: transparent !important;
          }

          .el-checkbox__input.is-indeterminate .el-checkbox__inner {

            &::before {
              background-color: rgba(1, 245, 255, 1) !important;
            }
          }

          .el-checkbox__input.is-checked .el-checkbox__inner {

            &::after {
              border-color: rgba(1, 245, 255, 1) !important;
            }
          }
        }
      }
    }

    tbody {
      tr.el-table__row, td.el-table__cell {
        border: none;
        //background-color: rgba(26, 179, 255, .16);
        background-color: transparent;
      }

      tr.el-table__row--striped > td.el-table__cell {
        background-color: rgba(46, 116, 203, 0.1);
        //background-color: rgba(26, 179, 255, 0.06);
      }
    }

    .el-table__footer-wrapper {
      tbody {
        tr {
          > td {
            color: #FFFFFF !important;
            border-top: 1px solid $border-color;
            background-color: $dark-bg-color !important;
          }
          > th.el-table__cell.gutter {
            border-bottom: none;
            background-color: $dark-bg-color !important;
          }
        }
      }
    }

    .el-table__fixed {
      color: #FFFFFF;
      //background-color: transparent;
      //background-color: $dark-bg-color;

      &::before {
        background-color: transparent;
      }
    }

    .el-table__fixed-right {
      //background-color: #051E44;

      .cell {
        color: #FFFFFF;
      }

      &::before {
        background-color: transparent;
      }
    }

    .el-table__fixed-right-patch {
      top: 0;
      background-color: #051E44;
      border-bottom: none;
    }

    //.el-table__fixed-right::before, .el-table__fixed::before {
    //  background-color: transparent !important;
    //}

    //表格固定列头部样式
    .el-table__fixed-header-wrapper {
      thead {
        tr, th {
          background: rgba(26, 179, 255, 0);
        }
      }
    }

    //表格固定列身体样式
    .el-table__fixed-body-wrapper {
      tbody {
        tr, td {
          border: none;
          //background-color: $dark-bg-color !important;
        }

        .el-table__row.el-table__row--striped td {
          background: transparent;
          //background: rgba(46, 116, 203, 0.1);
        }

        tr:hover > td {
          cursor: pointer;
          color: rgba(1, 245, 255, 1);
        }
      }
    }

    .el-table__fixed-footer-wrapper {
      tbody {
        tr > td {
          color: #FFFFFF !important;
          border-top: 1px solid $border-color;
          background-color: $dark-bg-color !important;
        }
      }
    }

    &::before {
      background-color: transparent;
    }

    &::after {
      background-color: transparent;
    }

    &.el-table--border {
      border: 1px solid #13537e;
    }
  }

  /*el-select的公共样式*********************************************************************************************/
  .el-select {
    //.el-input__inner {
    //  border: 1px solid rgba(1, 245, 255, 0.30);
    //  color: rgba(255, 255, 255, 1) !important;
    //}

    .el-input__inner:focus {
      border: 1px solid rgba(1, 245, 255, 1);
    }

    input::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.7) !important;
    }

    input::-ms-input-placeholder {
      color: rgba(255, 255, 255, 0.7) !important;
    }

    .el-select__caret {
      color: rgba(1, 245, 255, 1) !important;
      transition: none !important;
    }
  }

  /*el-collapse的公共样式************************************************************************************************/
  .el-collapse{
    border-top: 1px solid rgba(26, 179, 255, 0.5) !important;
    border-bottom: 1px solid rgba(26, 179, 255, 0.5) !important;
    .el-collapse-item{
      &.is-active  .el-collapse-item__header{
        border-bottom: none !important;
      }
      .el-collapse-item__header{
        color: rgba(255, 255, 255, 1) !important;
        background-color: transparent !important;
        border-bottom: 1px solid rgba(26, 179, 255, 0.5) !important;
        .el-collapse-item__arrow{
          color: rgba(26, 179, 255, 1) !important;
        }
      }
      .el-collapse-item__wrap{
        background-color: transparent !important;
        border-bottom: 1px solid rgba(26, 179, 255, 0.5) !important;
      }
    }
  }

  /*[日期||时间]选择器的公共样式************************************************************************************/
  .el-date-table td.disabled div {
    background-color: transparent;
  }

  .el-date-editor {
    color: rgba(255, 255, 255, 1);
    background: rgba(1, 245, 255, 0.10);
    border: 1px solid rgba(1, 245, 255, 0.30);
    padding: 0 !important;

    &.el-input {
      background: transparent;
      border: none;

      .el-input__prefix, .el-input__suffix {
        background: transparent;
      }
    }

    .el-range-input {
      color: rgba(255, 255, 255, 1);
      background: transparent;
    }

    .el-range-separator {
      line-height: 30px;
      color: rgba(255, 255, 255, 1);
    }

    .el-input__prefix, .el-input__suffix {
      color: rgba(255, 255, 255, 1);
      background: rgba(26, 179, 255, 0.10);
    }

    i {
      margin-left: 0;
      color: rgba(255, 255, 255, 1);
    }

    .el-range__icon {
      padding-left: 10px;
    }

    .el-range__close-icon {
      padding-left: 0;
      padding-right: 10px;
    }

    &:focus, &.is-active {
      border: 1px solid rgba(26, 179, 255, 1);
    }
  }

  /*el-dropdown-menu弹出的公共样式**********************************************************************************/
  .el-dropdown-menu {
    background: linear-gradient(180deg, rgba(6, 39, 80, 1), rgba(9, 61, 113, 1));
    border: 1px solid rgba(1, 245, 255, 0.30);

    &.setting{
      top: 91px !important;
      left: calc(100% - 177px) !important;
    }

    .el-dropdown-menu__item {
      color: rgba(255, 255, 255, 1) !important;
      padding: 0 30px !important;

      i {
        font-size: 18px;
        vertical-align: middle;
      }

      .quit {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        margin-right: 5px;
        //background: url("../image/dark/pheader/icon_quit.png") 100% 100%;
      }
    }

    .el-dropdown-menu__item:hover .quit {
      cursor: pointer;
      //background: url("../image/dark/pheader/icon_quit_active.png") 100% 100%;
    }

    .el-dropdown-menu__item:focus, .el-dropdown-menu__item:hover {
      background-color: transparent !important;
      color: rgba(1, 245, 255, 1) !important;
    }

    .popper__arrow {
      display: none;
    }
  }

  /*el-message弹出的公共样式****************************************************************************************/
  .el-message-box__wrapper{
    .el-message-box{
      background: rgba(2, 13, 47, 1);
      border: 1px solid rgba(2, 13, 47, 1);
      .el-message-box__header{
        .el-message-box__title{
          color: rgba(255, 255, 255, 1);
        }
        .el-message-box__close.el-icon-close{
          color: rgba(255, 255, 255, 1);
        }
      }
      .el-message-box__content{
        color: rgba(255, 255, 255, 1);
      }
    }
  }

  /*el-tree的公共样式***********************************************************************************************/
  .el-tree {
    background: transparent;
    color: #FFFFFF;

    .el-tree-node.is-current > .el-tree-node__content, .el-tree-node:focus > .el-tree-node__content {
      color: rgba(1, 245, 255, 1);
      background-color: transparent;
    }

    .el-tree-node__content:hover {
      color: rgba(1, 245, 255, 1);
      background-color: transparent;
    }
  }

  /*el-tag的公共样式************************************************************************************************/
  .el-tag {
    font-family: PingFangSC, PingFangSC-Regular;
    border-radius: 3px;

    &.el-tag--primary {
      background: rgba(26, 179, 255, 0.20);
      border: 1px solid rgba(26, 179, 255, 1);
      color: rgba(26, 179, 255, 1);

      &:hover, &:focus {
        background: rgba(26, 179, 255, 0.34);
      }
    }

    &.el-tag--success {
      background: rgba(1, 245, 255, 0.2);
      border: 1px solid rgba(1, 245, 255, 0.80);
      color: rgba(1, 245, 255, 1);

      &:hover, &:focus {
        background: rgba(1, 245, 255, 0.34);
      }
    }

    &.el-tag--info {
      background: rgba(127, 127, 127, 0.20);
      border: 1px solid rgba(127, 127, 127, 1);
      color: rgba(190, 190, 190, 1);

      &:hover, &:focus {
        background: rgba(127, 127, 127, 0.40);
      }
    }

    &.el-tag--warning {
      background: rgba(255, 185, 2, 0.20);
      border: 1px solid rgba(255, 185, 2, 1);
      color: rgba(255, 185, 2, 1);

      &:hover, &:focus {
        background: rgba(255, 185, 2, 0.34);
      }
    }

    &.el-tag--danger {
      background: rgba(255, 66, 66, 0.2);
      border: 1px solid rgba(255, 66, 66, 1);
      color: rgba(255, 66, 66, 1);

      &:hover, &:focus {
        background: rgba(255, 66, 66, 0.34);
      }
    }
  }

  /*el-pagination的公共样式*****************************************************************************************/
  .el-pagination {
    padding: 0;
    font-family: PingFangSC, PingFangSC-Medium;

    .el-input__inner {
      //height: 26px !important;
      //background-color: transparent !important;
      //border: 1px solid rgba(1, 245, 255, 0.3) !important;
      //border-radius: 0 !important;
    }

    .el-pagination__total {
      color: #FFFFFF;
    }

    .el-pagination__sizes {

      .el-select:hover .el-input__inner {
        border-color: rgba(1, 245, 255, 0.30) !important;
      }

      .el-icon-arrow-up {
        color: #FFFFFF;
      }

      .el-input__icon.el-input__validateIcon.el-icon-circle-close {
        display: none;
      }
    }

    .btn-prev {
      //margin-right: 8px;
      //height: 26px;

      //.el-icon-arrow-left:before {
      //  content: "\e792";
      //}
    }

    //.btn-next {
    //  padding-left: 0 !important;
    //
    //  .el-icon-arrow-right:before {
    //    content: "\e791";
    //  }
    //}

    button {
      color: #FFFFFF;
      background: linear-gradient(180deg, rgba(24, 158, 255, 0.00), rgba(24, 158, 255, 0.20));
      border: 1px solid rgba(1, 245, 255, 0.3);
    }

    .el-pager {
      li {
        font-size: 14px;
        font-weight: 500;
        color: #FFFFFF;
        background: linear-gradient(180deg, rgba(24, 158, 255, 0.00), rgba(24, 158, 255, 0.20));
        border: 1px solid rgba(1, 245, 255, 0.3);
      }
    }

    .el-pagination__jump {
      color: #FFFFFF;
    }
  }
}