// 绿色背景变量
// $inputBorderColor: #c1fcff;
// $inputBgColor: #092c31;
// $buttonBorderColor: #5cf0e1;
// $searchButtonBgColor: #037f79;
// $buttonBgColor: rgba(3, 127, 121, 0.1);
// $tableHeaderBgColor: rgba(11, 93, 99, 0.7);
// $tableHoverBgColor: rgba(11, 66, 70, 0.5);
// $dialogHeaderBgColor: #177a82;
// $dialogBodyBgColor: rgba(9, 69, 73, 0.9);
// 蓝色背景变量
$inputBorderColor: #5bd6ff;
$inputBgColor: rgba(0, 33, 85, 0.78);
// rgba(0,31,96,0.20)
$buttonBorderColor: #5bd6ff;
$searchButtonBgColor: rgba(0, 159, 221, 0.8);
$buttonBgColor: rgba(7, 51, 121, 0.1);
$tableHeaderBgColor: rgba(0, 83, 173, 0.4);
$tableHoverBgColor: rgba(0, 83, 173, 0.3);
$dialogHeaderBgColor: #005dff;
$dialogBodyBgColor: rgba(0, 37, 118, 0.9);
// html {
//   ::-webkit-scrollbar {
//     width: 0; /* Safari,Chrome 隐藏滚动条 */
//     height: 0; /* Safari,Chrome 隐藏滚动条 */
//     display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
//   }
// &:hover {
//   ::-webkit-scrollbar {
//     display: block;
//     width: 12px;
//     height: 100px;
//   }
// }
// ::-webkit-scrollbar {
//   width: 8px;
// }
// ::-webkit-scrollbar-track {
//   background-color: rgba(107, 187, 238, 0.4);
// } /* 滚动条的滑轨背景颜色 */

// ::-webkit-scrollbar-thumb {
//   background-color: rgba(107, 187, 238, 0.8);
// } /* 滑块颜色 */

// ::-webkit-scrollbar-button {
//   background-color: rgba(107, 187, 238, 0.4);
// } /* 滑轨两头的监听按钮颜色 */

// ::-webkit-scrollbar-corner {
//   background-color: #6bbbee;
// } /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
// }

// 滚动条样式优化
body {
  margin: 0;
  overflow: overlay;
}
::-webkit-scrollbar {
  background-color: transparent;
  width: 12px;
}
::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 8px;
  background-clip: content-box;
  border: 2px solid transparent;
}
body[scroll]::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

body {
  .withoutTop {
    .el-descriptions {
      color: #fff;
      .el-descriptions__body {
        color: #fff;
        background-color: transparent;
      }
    }
  }

  &.green {
    &[scroll]::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
    background: transparent;
    // 头部样式
    .head-container {
      .el-input__inner {
        background: $inputBgColor;
        border: 0.5px solid $inputBorderColor;
        border-radius: 5px;
        color: #fff;
      }
      .el-range-input {
        background: $inputBgColor;
        color: #fff;
      }
      .el-range-separator {
        color: #fff;
      }

      & > div:first-child {
        .el-button {
          background: $searchButtonBgColor;
          border: 1px solid $buttonBorderColor;
          border-radius: 5px;
        }
      }
      .crud-opts {
        .crud-opts-left .el-button {
          background: $buttonBgColor;
          border: 1px solid $buttonBorderColor;
          border-radius: 5px;
        }
        .crud-opts-right .el-button {
          background: $buttonBgColor;
          border: 1px solid $buttonBorderColor;
          // border-radius: 5px;
          color: #fff;
        }
      }
    }

    /* 表格内背景颜色 */
    .el-table,
    .el-table__expanded-cell {
      background-color: transparent !important;
      color: #fff !important;
    }

    .el-table th,
    .el-table tr,
    .el-table td {
      background-color: transparent !important;
      color: #fff !important;
      border: 0 !important;
    }
    .el-table__header-wrapper .el-table__header thead th {
      background-color: $tableHeaderBgColor !important;
      height: 40px;
    }
    .el-table__body td {
      height: 60px;
    }

    .el-table::before,
    .el-table--group::after,
    .el-table--border::after,
    .el-table__fixed::before,
    .el-table__fixed-right::before {
      height: 0px;
    }
    .el-table__body-wrapper .el-table__body .el-table__row:nth-of-type(even) td {
      background: $tableHoverBgColor !important; /*隔行变色*/
    }
    .el-table tbody tr:hover > td {
      background-color: $tableHoverBgColor !important;
    }

    .el-checkbox__inner {
      background: rgba(216, 216, 216, 0);
      border: 1px solid $buttonBorderColor;
    }

    .el-table .el-button:not(.el-button--text) {
      background: $buttonBgColor;
      border: 1px solid $buttonBorderColor;
      border-radius: 5px;
    }
    // 分页
    .el-pagination {
      color: #fff;
      .el-pagination__total {
        color: #fff;
      }
      .btn-prev,
      .btn-next {
        background-color: $searchButtonBgColor;
        color: #fff;
      }
      button:disabled {
        color: #c0c4cc;
        background-color: $searchButtonBgColor;
        cursor: not-allowed;
      }
      .el-pager li {
        background: $searchButtonBgColor;
      }
      .el-input__inner {
        color: #fff;
        background-color: $buttonBgColor;
        border: 1px solid $buttonBorderColor;
      }
    }
    // 新增编辑弹窗
    .el-dialog__wrapper {
      .el-dialog {
        border: 1px solid $buttonBorderColor;
        margin-top: 5vh !important;
        background-color: $dialogBodyBgColor;
        .el-dialog__header {
          background-color: $dialogHeaderBgColor;
          border-bottom: 1px solid $buttonBorderColor;
          .el-dialog__close {
            color: #fff;
          }
        }
        .el-dialog__body {
          overflow-y: hidden;
          .el-form {
            .el-form-item__label {
              color: #fff;
            }
            .el-input__inner,
            .el-textarea__inner {
              background: $inputBgColor;
              border: 0.5px solid $inputBorderColor;
              border-radius: 5px;
              color: #fff;
            }
            .el-input-number__decrease,
            .el-input-number__increase {
              background: $inputBgColor;
              border-color: $inputBorderColor;
              color: #fff;
            }
          }
        }
        .el-button:not(.el-button--text) {
          background: $searchButtonBgColor;
          border: 1px solid $buttonBorderColor;
          border-radius: 5px;
        }
        .el-button.el-button--text {
          color: #fff;
        }
      }
    }

    // 删除下拉框
    .el-popover {
      background-color: $searchButtonBgColor;
      color: #fff;
      border: 1px solid $buttonBorderColor;
      .el-button:not(.el-button--text) {
        background: $buttonBgColor;
        border: 1px solid $buttonBorderColor;
        border-radius: 5px;
      }
    }
    // 选择框下拉框
    .el-select-dropdown,
    .el-cascader__dropdown {
      background: $searchButtonBgColor;
      color: #fff;
      border: 1px solid $buttonBorderColor;
      .el-select-dropdown__wrap {
        margin-bottom: 0 !important;
      }
      .el-select-dropdown__item {
        color: #fff;
        background: $searchButtonBgColor;
        &:hover {
          background: rgba(0, 225, 219, 0.7);
        }
        &.selected {
          color: $buttonBorderColor;
        }
      }
      .el-cascader-node {
        color: #fff;
        background: $searchButtonBgColor;
        &:hover {
          background: rgba(0, 225, 219, 0.7);
        }
        &.selected {
          color: $buttonBorderColor;
        }
      }
      .el-popper .popper__arrow,
      .el-popper .popper__arrow::after {
        display: none;
      }
    }
    // 角色列表左右card样式
    .el-card {
      background-color: transparent;
      color: #fff;
      .el-button {
        background: $buttonBgColor;
        border: 1px solid $buttonBorderColor;
        border-radius: 5px;
      }
    }
    // 树的样式
    .el-tree {
      background-color: transparent;
      color: #fff;
      // .el-tree-node__expand-icon.expanded {
      //   -webkit-transform: rotate(0deg);
      //   transform: rotate(0deg);
      // }
      .el-tree-node.is-current > .el-tree-node__content {
        background-color: transparent;
        color: #73ffd2;
      }
      .el-tree-node:focus > .el-tree-node__content {
        background-color: transparent;
        color: #73ffd2;
      }
      .el-tree-node__content:hover {
        background-color: transparent;
        color: #73ffd2;
      }
    }

    // 时间选择器下拉样式

    .el-date-picker.has-sidebar.has-time {
      background: $searchButtonBgColor;
      color: #fff;
      border: 1px solid $buttonBorderColor;
    }
    .el-date-editor {
      .el-range-input {
        background: $inputBgColor;
        color: #fff;
      }
      .el-range-separator {
        color: #fff;
      }
    }
    .el-date-picker__header-label {
      color: #ffffff;
    }
    .el-date-table th {
      color: #fff;
    }
    .el-icon-d-arrow-left:before {
      color: #fff;
    }
    .el-icon-arrow-left:before {
      color: #fff;
    }
    .el-icon-arrow-right:before {
      color: #fff;
    }
    .el-icon-d-arrow-right:before {
      color: #fff;
    }
    .el-picker-panel__footer {
      background-color: $searchButtonBgColor;
      border: 1px solid $buttonBorderColor;
      .el-button:not(.el-button--text) {
        background: $searchButtonBgColor;
        border: 1px solid $buttonBorderColor;
        border-radius: 5px;
        color: #fff;
      }
      .el-button.el-button--text {
        color: #fff;
      }
    }
    .el-picker-panel [slot='sidebar'],
    .el-picker-panel__sidebar {
      background-color: $searchButtonBgColor;
      border-right: 1px solid $buttonBorderColor;
    }
    .el-picker-panel__shortcut {
      color: #fff;
    }
    .el-date-picker__time-header {
      border-bottom: 1px solid $buttonBorderColor;
    }
    .el-picker-panel__body {
      .el-input__inner {
        background: $inputBgColor;
        border: 0.5px solid $inputBorderColor;
        border-radius: 5px;
        color: #fff;
      }
    }

    .el-time-spinner {
      .el-time-spinner__item {
        color: #fff;
        &:hover {
          background: rgba(0, 225, 219, 0.7);
        }
        &.active {
          color: $buttonBorderColor;
        }
      }
    }

    .el-popper[x-placement^='bottom'] .popper__arrow::after {
      top: 1px;
      margin-left: -6px;
      border-top-width: 0;
      border-bottom-color: $searchButtonBgColor;
    }
    .el-popper[x-placement^='top'] .popper__arrow::after {
      bottom: 1px;
      margin-left: -6px;
      border-top-color: $buttonBorderColor;
      border-bottom-width: 0;
    }
    .el-picker-panel,
    .el-time-panel {
      background: $searchButtonBgColor;
      color: #fff;
    }
    .el-date-table td.in-range div,
    .el-date-table td.in-range div:hover,
    .el-date-table.is-week-mode .el-date-table__row.current div,
    .el-date-table.is-week-mode .el-date-table__row:hover div {
      background-color: $buttonBorderColor;
    }

    // vue-treeselect插件
    .vue-treeselect {
      .vue-treeselect__control {
        background: $inputBgColor;
        border: 0.5px solid $inputBorderColor;
        border-radius: 5px;
        .vue-treeselect__single-value {
          color: #fff;
        }
      }
    }
    .el-message-box {
      background-color: $dialogBodyBgColor;
      border: 1px solid $buttonBorderColor;
      width: 360px;
      .el-message-box__title,
      .el-message-box__content {
        color: #fff;
      }
      .el-button,
      .el-button--primary {
        background: transparent !important;
        border: 1px solid $buttonBorderColor !important;
        color: #fff !important;
        font-size: 14px;
        &:hover,
        &:active {
          color: #fff !important;
          background: #093070 !important;
          border: 1px solid $buttonBorderColor !important;
        }
      }
    }
    // 滚动条隐藏
    // scrollbar-width: none; /* Firefox隐藏滚动条 */
    // -ms-overflow-style: none; /* Internet Explorer 10+隐藏滚动条 */
    // ::-webkit-scrollbar {
    //   width: 0; /* Safari,Chrome 隐藏滚动条 */
    //   height: 0; /* Safari,Chrome 隐藏滚动条 */
    //   display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
    // }

    // 访客登记页面
    .register-container {
      background-color: transparent;
      .page-header {
        span {
          color: #fff;
        }
        .el-button {
          background: $searchButtonBgColor;
          border: 1px solid $buttonBorderColor;
          border-radius: 5px;
        }
      }
      .page-content {
        .content-item {
          border-radius: 0;
          background: transparent;
          .title {
            height: 42px;
            background-image: url(~@/assets/images/visitor/title_bg3@2x.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            color: #fff;
            .title-line {
              display: none;
            }
            .title-icon {
              display: block;
            }
          }
          .content-main {
            background-image: linear-gradient(
              0deg,
              rgba(1, 29, 108, 0.7) 0%,
              rgba(0, 39, 145, 0.6) 100%
            );
            border: 1px solid rgba(0, 162, 255, 0.5);
            margin-top: 10px;
            .el-steps {
              .el-step__head {
                .el-step__line {
                  background-color: rgba(0, 251, 255, 0.15);
                }
                &.is-process,
                &.is-wait {
                  .el-step__icon {
                    color: #00fbff;
                    border-color: #00fbff;
                    background-color: #001f65;
                  }
                  // color: rgba(0, 251, 255, 0.15);
                  // border-color: rgba(0, 251, 255, 0.15);
                  // .el-step__line {
                  //   background-color: rgba(0, 251, 255, 0.15);
                  // }
                }
                &.is-finish {
                  color: #00fbff;
                  border-color: #00fbff;
                  .el-step__icon {
                    color: #004e4f;
                    border-color: #004e4f;
                    background-color: #00fbff;
                  }
                  // border-color: #004e4f;
                  // .el-step__line {
                  //   background-color: #00fbff;
                  // }
                }
              }
            }
            .form-box {
              border-top: 0;
              .el-form-item__label {
                color: #fff;
              }
              .el-input__inner,
              .el-textarea__inner {
                background: rgba(0, 31, 96, 0.2);
                border: 0.5px solid #0093c4;
                border-radius: 5px;
                color: #fff;
              }
              .person-info,
              .card-info,
              .type-box {
                border-color: rgba(0, 162, 255, 0.5);
              }
              .btn-box {
                .el-button--primary {
                  background-color: #00a3ff;
                }
                .el-button--success {
                  background-color: #00c6e1;
                }
              }
            }
          }
        }
        .out {
          .el-step__title {
            background-image: url('~@/assets/images/visitor/img_time axis_bg5.png');
            color: #fff;
          }
        }
        .entry {
          .el-step__title {
            background-image: url('~@/assets/images/visitor/img_time axis_bg6.png');
            color: #84e3ff;
            &.is-finish {
              background-image: url('~@/assets/images/visitor/img_time axis_bg5.png');
              color: #fff;
            }
          }
        }
      }
    }
  }
}
