data-room/data-room-ui/packages/assets/style/common/index.scss

/* theme color */

/* icon font path, required */
$--font-path: "~element-ui/lib/theme-chalk/fonts";

@import "~element-ui/packages/theme-chalk/src/index";
// 布局样式
.bs-container {
  position: relative;
  height: 100% !important;
  // width: 100%;
  // position: absolute;
  box-sizing: border-box;
  // padding: 16px;
  background-color: var(--bs-background-1);
  .inner-container {
    height: 100% !important;
    background-color: var(--bs-background-2) !important;

    .filter-container {
      padding: 16px 16px 6px;

      .filter-item:not(:last-child) {
        margin-right: 10px;
      }

      .filter-item {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 10px;
      }

      .el-input {
        width: auto;
      }

      .el-select {
        width: auto;
      }
    }

    // page页样式
    .bs-pagination {
      position: absolute;
      right: 0;
      bottom: 16px;
      padding: 0 10px 0px 16px;
    }

    //输入框样式
    .el-input__inner {
      height: 30px;
      line-height: 30px;
      font-size: 12px;
    }

    .el-input__icon {
      line-height: 30px;
    }

    .el-form {
      .el-input__inner {
        width: 300px;
      }

      .el-select {
        .el-input__inner {
          width: auto;
        }
      }
    }

    //时间选择器样式
    .el-date-editor .el-range-input {
      height: 94%;
      font-size: 12px;
    }

    .el-date-editor .el-range__icon {
      line-height: 26px;
    }

    .el-date-editor .el-range-separator {
      line-height: 26px;
      font-size: 12px;
    }
  }
}
//表格样式

.bs-table-box {
  padding: 0 16px;
  // height: calc(100vh - 340px);
  // margin-bottom: 16px;
  .el-table {
    // height: 100%;
    overflow-y: auto !important;
    background-color: transparent !important;
    border: 1px solid #e4e4e4 !important;

    th > .cell {
      padding-left: 14px !important;
    }

    th.gutter {
      background-color: #fafafa;
    }

    tr td {
      border-bottom: none !important;
    }

    tr:last-child td {
      border-bottom: none !important;
    }

    /ddeep/ .el-table::before {
      display: none !important;
    }

    .el-table thead {
      color: #36474f !important;
    }

    .el-table td {
      border-bottom: none !important;
    }

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

    .el-table .cell {
      line-height: 24px !important;
    }

    .gc-table--grey th.is-leaf {
      border: none !important;
      background: #f5f5f5;
    }

    .el-table th,
    .el-table td {
      padding: 8px 0 !important;
    }

    // th.is-leaf {
    //   border-bottom: 2px solid var(--bs-el-color-primary) !important;
    // }

    /* 滚动条样式设置*/
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 12px !important;
      height: 12px !important;
    }

    .el-table__body-wrapper::-webkit-scrollbar-corner {
      background: transparent !important;
    }

    .el-table__body-wrapper::-webkit-scrollbar-track {
      border-radius: 10px !important;
    }

    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      min-height: 20px !important;
      background-clip: content-box !important;
      border: 2px solid transparent !important;
      border-radius: 10px !important;
      // background-color: #ddd;
    }

    .el-table__fixed::before,
    .el-table__fixed-right::before {
      display: none !important;
    }
  }

  // 全局表格内部button行样式

  .el-table .cell {
    line-height: 22px;
  }

  .cell .el-button {
    padding: 5px 8px !important;
  }
}
//分页样式
.bs-pagination {
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .el-pager li {
    color: #bfbfbf;
    background-color: var(--bs-el-background-2);

    &:hover {
      color: var(--bs-el-text);
      background-color: var(--bs-el-color-primary);
    }
  }

  .el-pagination.is-background .btn-prev:disabled,
  .el-pagination.is-background .btn-next:disabled {
    color: #bfbfbf;
    background-color: var(--bs-el-background-2);
  }

  .el-pagination__total {
    color: #bfbfbf;
  }

  .el-pagination .el-select .el-input .el-input__inner {
    color: #bfbfbf;

    &:hover {
      color: var(--bs-el-color-primary);
    }
  }

  .el-pagination {
    padding: 0 !important;
    text-align: right !important;
    font-weight: normal !important;
    .el-pagination__sizes{
      margin: 0 !important;
    }
  }

  .el-pager li {
    padding: 0 !important;
    min-width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    border-radius: 2px !important;
  }

  .el-pager li:not(.disabled).active {
    background-color: var(--bs-el-color-primary) !important;
  }

  .el-pagination span:not([class*="suffix"]),
  .el-pagination button {
    font-size: 14px !important;
    min-width: 0 !important;
    height: 32px !important;
    line-height: 32px !important;
  }

  .el-pagination .el-input--mini .el-input__inner {
    height: 32px !important;
    line-height: 32px !important;
  }

  .el-pagination__editor.el-input .el-input__inner {
    height: 32px !important;
  }
}

/*解决el-scroll底部出现空白滚动条*/
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}

// dialog设置
.bs-dialog-wrap {
  .el-select {
    display: inline-block !important;
    position: relative !important;
    width: auto !important;
  }
  .el-dialog {
    margin-top: 13vh !important;
    margin-bottom: 0 !important;
  }
  .el-dialog__wrapper {
    overflow: hidden !important;
  }

  .el-dialog__body {
    padding: 16px !important;
    max-height: calc(90vh - 170px) !important;
    min-height: 200px;
    overflow-y: auto;
  }

  // dialog头部
  .el-dialog__header {
    background: #f5f5f5;
    background-color: #f5f5f5;
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    font-weight: 700;

    .el-dialog__headerbtn {
      position: absolute;
      top: 10px;
      right: 20px;
      padding: 0;
      background: 0 0;
      border: none;
      outline: 0;
      cursor: pointer;
      font-size: 16px;
    }
  }

  .el-dialog__title {
    display: inline-block;
    font-size: 16px;
    position: relative;
    padding-left: 20px;
    border-left: none !important;
  }

  .el-dialog__title::before {
    content: "" !important;
    height: 16px !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-left: 4px solid var(--bs-el-color-primary) !important;
  }
}

.el-scrollbar__thumb {
  background: rgba(144, 147, 153, 0.3) !important;
  background-color: rgba(144, 147, 153, 0.3) !important;
}