data-room/data-room-ui/packages/assets/style/bsTheme.scss

.bs-body-theme-wrap {
  .big-screen-home-wrap {
    // 加载效果
    .el-loading-mask {
      opacity: 0.9 !important;
      background-color: var(--bs-el-background-2) !important;
    }
  }

  // 空状态
  .el-empty__image {
    filter: opacity(0.5) !important;
  }
}

// input
.bs-el-input {
  .el-input__inner {
    font-family:-apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    border: none !important;
    color: var(--bs-el-text) !important;
    background: var(--bs-background-1) !important;
    width: 100% !important;
  }

  .el-textarea__inner {
    font-family:-apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
    color: var(--bs-el-text) !important;
    background: var(--bs-el-background-1) !important;
    border-color: var(--bs-el-border) !important;
  }
}

// el-input-number
.bs-el-input-number {
  .el-input__inner {
    width: 100% !important;
    color: var(--bs-el-text) !important;
    background: var(--bs-el-background-1) !important;
    border-color: var(--bs-el-border) !important;
  }

  .el-input-number__decrease {
    color: var(--bs-el-text) !important;
    font-size: 16px !important;
    background: var(--bs-el-background-1) !important;
    border-color: var(--bs-el-border) !important;
  }

  .el-input-number__increase {
    color: var(--bs-el-text) !important;
    font-size: 16px !important;
    background: var(--bs-el-background-1) !important;
    border-color: var(--bs-el-border) !important;
  }
}

// button
.bs-el-button-default {
  color: var(--bs-el-text) !important;
  border-color: var(--bs-el-border) !important;
  background-color: var(--bs-el-background-2) !important;

  &:hover {
    color: var(--bs-el-color-primary) !important;
    border-color: var(--bs-el-color-primary) !important;
    background-color: var(--bs-background-2) !important;
  }
}

// table
.bs-el-table {
  border-color: var(--bs-el-border) !important;
  background: var(--bs-background-2) !important;
  background-color: var(--bs-background-2) !important;
  th.el-table__cell.is-leaf {
    border-color: var(--bs-el-border) !important;
  }

  th.gutter {
    background-color: var(--bs-el-background-3) !important;
  }

  &:before {
    display: none !important;
  }

  &:after {
    display: none !important;
  }

  .el-radio__input .is-checked {
    .el-radio__inner {
      background-color: var(--bs-el-color-primary) !important;
    }
  }

  .el-radio__inner {
    background-color: var(--bs-background-1) !important;
  }

  .el-radio__label {
    color: var(--bs-el-text) !important;
  }

  ::v-deep .el-table__cell {
    color: var(--bs-el-text) !important;
    border-color: var(--bs-el-border) !important;

    .cell {
      color: var(--bs-el-text) !important;
    }
    th.is-leaf {
      background-color: var(--bs-el-background-1) !important;
    }

    bs-el-pagination .cell {
      color: var(--bs-el-text) !important;

      li:hover {
        color: var(--bs-el-text) !important;
      }
    }

    .el-input__inner {
      color: var(--bs-el-text) !important;
      background-color: var(--bs-background-1) !important;

      &::placeholder {
        color: var(--bs-el-title) !important;
      }
    }

    .el-checkbox__inner {
      background-color: var(--bs-background-1) !important;
    }

    .el-popper {
      background: var(--bs-background-1) !important;
      background-color: var(--bs-background-1) !important;
    }
  }

  td.el-table__cell {
    background-color: var(--bs-background-2) !important;
  }

  .el-table__cell.is-leaf {
    background-color: var(--bs-el-background-3) !important;
  }
}

// card
.bs-el-card {
  background-color: var(--bs-el-background-1) !important;

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

// cascader
.bs-el-cascader {
  border-color: var(--bs-el-border) !important;
  background-color: var(--bs-el-background-1) !important;
  background: var(--bs-el-background-1) !important;

  .el-cascader-menu {
    // 选项的未选中时颜色
    color: var(--bs-el-text) !important;
    border: var(--bs-el-border) !important;
  }

  .el-cascader-node.hover,
  .el-cascader-node:hover {
    // hover状态的选项颜色和背景色
    color: var(--bs-el-color-primary) !important;
    background-color: var(--bs-el-background-3) !important;
  }

  .in-active-path {
    // 选中项的路径项的文本颜色和背景颜色
    color: var(--bs-el-color-primary) !important;
    background-color: var(--bs-el-background-3) !important;
  }

  .popper__arrow {
    bottom: 0 !important;
    border-top-color: var(--bs-el-background-1) !important;
    border-bottom-color: var(--bs-el-background-1) !important;

    &:after {
      bottom: 0 !important;
      border-top-color: var(--bs-el-background-1) !important;
      border-bottom-color: var(--bs-el-background-1) !important;
    }
  }

  // 弹出层，有滚动条下最后一项显示不全
  .el-cascader-menu__wrap {
    margin-bottom: 0px !important;
  }

}

// select
.bs-el-select {
  border-color: var(--bs-el-border) !important;
  background-color: var(--bs-el-background-1) !important;

  .el-tag.el-tag--info {
    color: var(--bs-el-text) !important;
    border-color: var(--bs-el-border) !important;
    background-color: var(--bs-el-background-3) !important;
  }

  .popper__arrow {
    bottom: 0 !important;
    border-top-color: var(--bs-el-background-1) !important;
    border-bottom-color: var(--bs-el-background-1) !important;

    &:after {
      bottom: 0 !important;
      border-top-color: var(--bs-el-background-1) !important;
      border-bottom-color: var(--bs-el-background-1) !important;
    }
  }

  .el-select-dropdown__item {
    color: var(--bs-el-text) !important;

    .el-checkbox__label {
      color: var(--bs-el-text) !important;
    }
  }

  .el-checkbox__inner {
    background-color: var(--bs-background-2) !important;
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    color: var(--bs-el-color-primary) !important;
    background-color: var(--bs-el-background-3) !important;
  }

  .el-input__inner {
    border-color: var(--bs-el-border) !important;
    background: var(--bs-el-background-1) !important;
    background-color: var(--bs-el-background-1) !important;
    color: var(--bs-el-text) !important;
  }

  .el-select-dropdown__item.selected {
    color: var(--bs-el-color-primary) !important;
    background-color: var(--bs-background-1) !important;

    &:hover {
      color: var(--bs-el-color-primary) !important;
      background-color: var(--bs-el-background-3) !important;
    }
  }

  // 弹出层，有滚动条下最后一项显示不全
  .el-select-dropdown__wrap {
    margin-bottom: 0px !important;
  }

  .el-select-group__wrap:not(:last-of-type)::after {
    background-color: transparent !important;
  }
}

// dialog
.bs-el-dialog {
  .el-dialog__header {
    background: var(--bs-background-2) !important;
    background-color: var(--bs-background-2) !important;
    border-bottom: 2px solid var(--bs-background-1) !important;

    .el-dialog__title {
      color: var(--bs-el-text) !important;
    }
  }

  .el-dialog__footer {
    background: var(--bs-background-2) !important;
    background-color: var(--bs-background-2) !important;
  }

  ::v-deep .el-dialog__body {
    .el-loading-mask {
      opacity: 0.9 !important;
      background-color: var(--bs-el-background-2) !important;
    }

    background: var(--bs-background-2) !important;
    overflow-y: auto !important;

    .el-empty__image {
      filter: opacity(0.5) !important;
    }
  }

  ::v-deep .el-scrollbar {
    max-height: 440px !important;
    overflow-x: hidden !important;

    .el-scrollbar__view {
      overflow-x: hidden !important;
    }
  }

  ::v-deep ::-webkit-scrollbar {
    width: 6px !important;
    border-radius: 4px !important;
    height: 4px !important;
  }

  ::v-deep ::-webkit-scrollbar-thumb {
    background: var(--bs-el-background-3) !important;
    border-radius: 10px !important;
  }
}

// tree
.bs-el-tree {
  .el-tree-node__content {
    color: var(--bs-el-text) !important;
    background-color: var(--bs-el-background-1) !important;
  }

  background-color: var(--bs-el-background-1) !important;
  color: var(--bs-el-text) !important;

  .el-tree-node__content:hover {
    color: var(--bs-el-color-primary) !important;
    background-color: var(--bs-el-background-3) !important;
  }

  .el-tree-node.is-current > .el-tree-node__content {
    color: var(--bs-el-color-primary) !important;
    background-color: var(--bs-el-background-1) !important;
  }
}

// 数据集头部样式
.bs-el-page-header {
  padding: 0 0px 16px 0 !important;

  .el-page-header__left {
    display: none !important;
  }

  .el-page-header__content {
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bs-el-text) !important;
    border-bottom: 1px solid var(--bs-background-1) !important;
    padding: 10px 0px 14px 0 !important;
    padding-left: 12px !important;
    position: relative !important;

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

.bs-el-pagination {
  border: none !important;

  li:hover {
    color: var(--bs-el-text) !important;
  }

  .popper__arrow {
    border-bottom-color: var(--bs-el-background-1) !important;
    border-top-color: var(--bs-el-background-1) !important;

    &:after {
      border-bottom-color: var(--bs-el-background-1) !important;
      border-top-color: var(--bs-el-background-1) !important;
      display: none !important;
    }
  }

  .el-select-dropdown__list {
    padding: 0 0 6px 0;
    margin-bottom: 6px !important;
  }

  ::v-deep .el-select-dropdown {
    width: 100px;
    min-width: 100px;
    border-color: var(--bs-el-border) !important;
  }

  .el-select-dropdown__wrap {
    background-color: var(--bs-background-1) !important;

    .selected {
      span {
        color: var(--bs-el-color-primary) !important;
      }
    }

    .el-select-dropdown__item {
      color: var(--bs-el-text) !important;
    }
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    color: var(--bs-el-color-primary) !important;
    background: var(--bs-el-background-3) !important;
  }

  ::v-deep .el-select-dropdown {
    background: var(--bs-el-background-1) !important;
  }

  ::v-deep .el-input__inner {
    border-color: var(--bs-el-border) !important;
  }
}

.bs-el-message-box {
  background: var(--bs-background-1) !important;
  border-color: var(--bs-el-border) !important;

  .el-message-box__title {
    color: var(--bs-el-title) !important;
  }

  p {
    color: var(--bs-el-text) !important;
  }

  .el-button--default {
    color: var(--bs-el-text) !important;
    border-color: var(--bs-el-border) !important;
    background-color: var(--bs-el-background-2) !important;

    &:hover {
      color: var(--bs-el-color-primary) !important;
      border-color: var(--bs-el-color-primary) !important;
      background-color: var(--bs-background-2) !important;
    }
  }

  .el-button--primary {
    color: #ffffff;
    background-color: var(--bs-el-color-primary) !important;
    border-color: var(--bs-el-color-primary) !important;

    &:hover {
      color: #ffffff !important;
      background-color: #66b1ff !important;
      border-color: #66b1ff !important;
    }
  }
}

.bs-title-style {
  color: var(--bs-el-text) !important;
  background-color: var(--bs-el-background-3) !important;

  .field-item {
    color: var(--bs-el-text) !important;
    background-color: var(--bs-background-2) !important;

    &:hover {
      color: var(--bs-el-color-primary) !important;
      background-color: var(--bs-el-background-3) !important;
    }
  }
}

.bs-field-wrap {
  .field-item {
    color: var(--bs-el-text) !important;
    background-color: var(--bs-background-2) !important;

    &:hover {
      color: var(--bs-el-color-primary) !important;
      background-color: var(--bs-el-background-3) !important;
    }
  }
}

.bs-el-dropdown-menu {
  border-color: var(--bs-el-border) !important;
  background-color: var(--bs-background-1) !important;

  .el-dropdown-menu__item,
  .el-dropdown-menu__item {
    border-color: var(--bs-el-border) !important;
    background-color: var(--bs-background-1) !important;
    color: var(--bs-el-text) !important;

    &:hover {
      color: var(--bs-el-color-primary) !important;
      background-color: var(--bs-el-background-3) !important;
    }
  }

  .popper__arrow {
    border-top-color: var(--bs-el-background-1) !important;
    border-bottom-color: var(--bs-el-background-1) !important;

    &:after {
      border-bottom-color: var(--bs-el-background-1) !important;
      border-top-color: var(--bs-el-background-1) !important;
      display: none !important;
    }
  }
}

.bs-slider-wrap {
  .el-slider__runway {
    background-color: #a6a7aa !important;
  }

  .el-slider__bar {
    background-color: #7e7e7e !important;
  }

  .el-slider__button {
    background-color: #929292 !important;
    border: solid 2px #7e7e7e !important;
  }
}

.bs-scrollbar {
  &::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 6px !important;
    background-color: transparent !important;
  }

  &::-webkit-scrollbar-track {
    border-radius: 6px !important;
  }

  &:hover {
    &::-webkit-scrollbar-thumb {
      background-color: rgba(144, 147, 153, 0.3) !important;
    }
  }
}

// upload
.bs-el-upload {
  .el-upload {
    color: var(--bs-el-color-primary) !important;
    background-color: var(--bs-el-background-2) !important;
  }

  &:hover {
    color: var(--bs-el-color-primary) !important;
    border-color: var(--bs-el-color-primary) !important;
    background-color: var(--bs-background-2) !important;
  }
}

// radio
.bs-el-radio-group {
  .el-radio__label {
    color: var(--bs-el-text) !important;
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: var(--bs-el-color-primary) !important;
  }
  .el-radio__inner {
    border: 1px solid #dcdfe6 !important;
    background: var(--bs-background-1) !important;
    background-color: var(--bs-background-1) !important;
  }
  .el-radio__input.is-checked .el-radio__inner::after {
    background-color: var(--bs-el-color-primary) !important;
  }
}

.bs-codemirror-bottom-text {
  line-height: 32px;
  padding-left: 10px;
  color: var(--bs-el-text) !important;
  background-color: var(--bs-el-background-2) !important;
}

.bs-el-color-picker {
  background: var(--bs-background-2) !important;
  border-color: var(--bs-background-1) !important;
  background-color: var(--bs-background-2) !important;
  .el-button--default {
    color: var(--bs-el-text) !important;
    border-color: var(--bs-background-1) !important;
    background-color: var(--bs-background-2) !important;
  }
  .el-color-picker__trigger {
    border-color: var(--bs-background-1) !important;
  }
  .el-color-picker__panel {
    border-color: var(--bs-background-1) !important;
  }
  .el-input__inner {
    color: var(--bs-el-text) !important;
    border-color: var(--bs-el-border) !important;
    background-color: var(--bs-background-2) !important;
  }
}

.bs-context-menu-class {
  background-color: var(--bs-background-1) !important;

  .menu_item__available {
    color: var(--bs-el-text) !important;
  }

  .menu_item__available:hover {
    background: var(--bs-el-background-3) !important;
    color: var(--bs-el-color-primary) !important;
  }
}

//img
.bs-el-img {
  ::v-deep .el-image__error {
    background-color: var(--bs-background-1) !important;
  }

  ::v-deep .close-icon {
    color: var(--bs-el-title);
  }
}

// switch
.bs-el-switch {

  .el-switch.is-checked .el-switch__core {
    background: var(--bs-el-color-primary) !important;
    background-color: var(--bs-el-color-primary) !important;
  }
  .el-switch__core {
    background: var(--bs-el-background-1);
    background-color: var(--bs-el-background-1);
    border-color: var(--bs-el-border);
  }
}

.bs-el-form {
  .el-form-item__label {
    color: var(--bs-el-title) !important;
  }
}

//el-date-picker
.bs-el-date-picker {
  left: -115px !important;
  background-color: var(--bs-background-1) !important;
  .el-date-picker__time-header {
    border-color: var(--bs-el-border) !important;
  }

  .popper__arrow::after {
    border-bottom-color: var(--bs-background-1) !important;
    border-top-color: var(--bs-background-1) !important;
  }
  .el-date-picker__header {
    background: var(--bs-el-background-1) !important;
    background-color: var(--bs-el-background-1) !important;
    .el-date-picker__header-label {
      color: var(--bs-el-text) !important;
    }
    .el-picker-panel__icon-btn {
      color: var(--bs-el-text) !important;
    }
  }
  .el-date-table {
    background: var(--bs-el-background-1) !important;
    background-color: var(--bs-el-background-1) !important;
    th {
      color: var(--bs-el-text) !important;
      border-color: var(--bs-el-border) !important;
    }
    .el-button--text {
      color: var(--bs-el-text) !important;
      background: var(--bs-background-2) !important;
      background-color: var(--bs-background-2) !important;
    }
  }
  .el-year-table {
    background: var(--bs-el-background-1) !important;
    background-color: var(--bs-el-background-1) !important;
    .disabled {
      .cell {
        background-color: var(--bs-background-2) !important;
      }
    }
    td {
      .cell {
        color: var(--bs-el-text) !important;
      }
    }
  }
  .el-month-table {
    background: var(--bs-el-background-1) !important;
    background-color: var(--bs-el-background-1) !important;
    .disabled {
      .cell {
        background-color: var(--bs-background-2) !important;
      }
    }
    td {
      .cell {
        color: var(--bs-el-text) !important;
      }
    }
  }
  .el-date-table {
    .available {
      color: var(--bs-el-text) !important;
    }
  }
  .el-picker-panel__footer {
    background-color: var(--bs-background-1) !important;
    border-top: 1px solid var(--bs-el-border) !important;
  }
  .el-picker-panel {
    .el-button--text {
      color: var(--bs-el-text) !important;
    }
  }
  .el-date-table td.disabled div {
    background-color: var(--bs-background-2) !important;
  }
  .popper__arrow {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .el-button + .el-button {
    color: var(--bs-el-text) !important;
    border-color: var(--bs-el-border) !important;
    background-color: var(--bs-el-color-primary) !important;
  }
  .el-input__inner {
    border: 1px solid #dcdfe6 !important;
  }
  .el-time-panel {
    left: -33px !important;
    background-color: var(--bs-background-2) !important;
  }
  .el-time-spinner__item.active:not(.disabled) {
    color: var(--bs-el-text) !important;
  }
  .el-time-panel__btn {
    color: var(--bs-el-text) !important;
  }
  .el-time-panel__btn.confirm {
    color: var(--bs-el-color-primary) !important;
  }
}

.bs-el-divider {
  background-color: var(--bs-background-1) !important;
  .el-divider__text.is-left {
    background-color: var(--bs-background-1) !important;
    color: var(--bs-el-text) !important;
  }
}

.bs-el-tooltip-dark {
  color: var(--bs-el-text) !important;
  background: var(--bs-background-2) !important;
  .popper__arrow {
    &:after {
      border-bottom-color: var(--bs-background-2) !important;
    }
  }
}

.bs-el-tabs {
  .el-tabs__item {
    color: var(--bs-el-text) !important;
  }
  .is-active {
    color: var(--bs-el-color-primary) !important;
  }
  .el-tabs__nav-wrap {
    &:after {
      background-color: var(--bs-background-1) !important;
    }
  }
}