marking-cet-web/src/assets/styles/element/custom.scss

// @use 'sass:color';
@use '../common-var.scss' as *;

@function darken($color, $weight) {
  @return mix(#141414, $color, $weight);
}

@function tint($color, $weight) {
  @return mix(#fff, $color, $weight);
}

@each $type in map-keys($cst-button-colors) {
  $color: map-get($cst-button-colors, $type);
  [#{$type}],
  .el-button[#{$type}] {
    --el-button-bg-color: #{$color};
    --el-button-text-color: var(--el-color-white);
    --el-button-border-color: #{$color};
    --el-button-hover-bg-color: #{tint($color, 30%)};
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-border-color: #{tint($color, 30%)};
    --el-button-active-bg-color: #{darken($color, 20%)};
    --el-button-active-border-color: #{darken($color, 20%)};
    &.is-disabled {
      --el-button-disabled-bg-color: #{tint($color, 50%)};
      --el-button-disabled-text-color: var(--el-color-white);
      --el-button-disabled-border-color: #{tint($color, 50%)};
    }
    &.is-plain {
      --el-button-bg-color: #{tint($color, 90%)};
      --el-button-text-color: #{$color};
      --el-button-border-color: #{tint($color, 50%)};
      --el-button-hover-bg-color: #{$color};
      --el-button-hover-text-color: var(--el-color-white);
      --el-button-hover-border-color: #{$color};
      --el-button-active-bg-color: #{darken($color, 20%)};
      --el-button-active-border-color: #{darken($color, 20%)};
      --el-button-active-text-color: var(--el-color-white);
      &.is-disabled {
        --el-button-disabled-bg-color: #{tint($color, 90%)};
        --el-button-disabled-text-color: #{tint($color, 50%)};
        --el-button-disabled-border-color: #{tint($color, 80%)};
      }
    }
    &.is-link {
      --el-button-text-color: #{$color};
      --el-button-hover-text-color: #{$color};
      --el-button-hover-link-text-color: #{darken($color, 20%)};
      --el-button-active-color: #{darken($color, 30%)};
    }
    &[special] {
      --el-button-text-color: var(--el-color-primary);
      --el-button-hover-text-color: var(--el-color-primary);
      --el-button-hover-bg-color: var(--el-color-primary-light-8);
      --el-button-active-bg-color: var(--el-color-primary-light-9);
    }
  }
}

button.el-button {
  &:not(.is-plain, .is-round, .is-circle) {
    border: none;
  }
  &:not(.is-link) {
    min-width: 64px;
  }
}

/** 显示table的Card */
.el-card[table] {
  border: none;
  &:not([shadow]) {
    box-shadow: none;
  }
  /** table上方无操作按钮区域 */
  &[less] {
    .el-card__body {
      padding-top: map-get($cst-gap-space, 'medium-mini');
    }
  }
}

/** 自定义pagination 样式 */
.el-pagination:not(.m-t-unset) {
  margin-top: map-get($cst-gap-space, 'base');
}

/** 靠右对齐 */
.el-pagination[right] {
  justify-content: flex-end;
}

.el-dialog[custom] {
  .el-dialog__header {
    height: var(--el-dialog-header-height);
    line-height: var(--el-dialog-header-height);
    background-color: var(--el-dialog-header-bg-color);
    border-radius: var(--el-dialog-border-radius) var(--el-dialog-border-radius) 0 0;
    font-size: var(--el-dialog-header-font-size);
    color: var(--el-dialog-header-font-color);
    padding: 0 var(--el-dialog-padding-primary);
    margin: 0;
    overflow: hidden;
    .el-dialog__headerbtn {
      width: var(--el-dialog-header-height);
      height: var(--el-dialog-header-height);
      top: 0;
    }
  }

  .el-dialog__body {
    max-width: 100%;
    overflow-x: auto;
  }
  &[unless] {
    .el-dialog__header {
      display: none;
    }
  }
  &[canoverflow] {
    & > .el-dialog__body {
      overflow: visible;
    }
  }
  &[less] {
    .el-dialog__header {
      display: block !important;
    }
  }

  &[small] .el-dialog__body {
    padding: map-get($ep-dialog-body-padding, 'small');
  }
  .el-dialog__body,
  &[base] .el-dialog__body {
    padding: map-get($ep-dialog-body-padding, 'base');
  }
  &[medium] .el-dialog__body {
    padding: map-get($ep-dialog-body-padding, 'medium');
  }
  &[large] .el-dialog__body {
    padding: map-get($ep-dialog-body-padding, 'large');
  }
}

.el-menu {
  border-right: none;
}

.el-input-number {
  width: 100%;
  .el-input__inner {
    text-align: left;
  }
  .el-input-number__increase,
  .el-input-number__decrease {
    top: 3px;
  }
}

.el-table--border::after,
.el-table--border::before,
.el-table--border .el-table__inner-wrapper::after,
.el-table__inner-wrapper::before {
  // display: none;
}

.el-table__empty-block {
  .el-table__empty-text {
    line-height: 40px;
  }
}
.preview-clear-mask {
  // width:0;
  // height:0;
}
.no-mask,
.no-mask .el-overlay-dialog {
  pointer-events: none;
  .el-dialog {
    pointer-events: all;
    .el-dialog__body {
      max-height: calc(100vh - var(--el-dialog-header-height));
      overflow: auto;
    }
  }
}

.el-popover.el-popper.color-picker-popover {
  background-color: map-get($ep-fill-color, 'light');
}

.el-message__badge {
  display: none;
}

.el-table__border-left-patch {
  background-color: #ddd !important;
}
.el-table--border:after,
.el-table--border:before,
.el-table--border .el-table__inner-wrapper:after,
.el-table__inner-wrapper:before {
  background-color: #ddd !important;
}
.el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
}
.el-table--group .el-table__inner-wrapper tr:first-child td:first-child,
.el-table--group .el-table__inner-wrapper tr:first-child th:first-child,
.el-table--group .el-table__footer-wrapper tr:first-child td:first-child,
.el-table--group .el-table__footer-wrapper tr:first-child th:first-child,
.el-table--border .el-table__inner-wrapper tr:first-child td:first-child,
.el-table--border .el-table__inner-wrapper tr:first-child th:first-child,
.el-table--border .el-table__footer-wrapper tr:first-child td:first-child,
.el-table--border .el-table__footer-wrapper tr:first-child th:first-child {
  border-left: 1px solid #ddd !important;
}
.el-input__wrapper {
  box-shadow: 0 0 0 1px #ddd inset !important;
}

.el-table.el-table--small .el-table__body {
  font-size: 14px;
}
.el-table.el-table--small .el-table__header{
  font-size:13px;
}
.el-table__header .el-table__cell,.el-table-v2__header .el-table-v2__header-cell{
  background:#eaeaea !important;
}
.el-table .el-table__cell{
  text-align:center !important;
}
.el-table .cell.el-tooltip{
  min-width:30px !important;
}

#app {
  .el-table__body {
    .el-table__row.current-row .el-table__cell {
      background-color: #a1d6ff;
    }
    .el-table__row:not(.current-row, .el-table__row--striped, .top-three-row, .last-three-row) .el-table__cell {
      background-color: #fff;
    }
  }
}
body {
  .el-message {
    z-index: 10001 !important;
    padding: 30px 35px;
    * {
      font-size: 22px !important;
    }
  }
  .el-loading-mask {
    z-index: 1200 !important;
  }
  .el-loading-parent--relative {
    pointer-events: auto !important;
  }
}

// .el-table--striped .el-table__body tr.el-table__row--striped.current-row td.el-table__cell,.el-table__body tr.el-table__row--striped.current-row td.el-table__cell,.el-table__body tr.current-row > td.el-table__cell{
//   background-color: #A1D6FF;

// }

// .el-table__body tr.current-row > td.el-table__cell{
//   background-color: #A1D6FF;
// }

.keybord-dialog {
  .el-dialog__header {
    padding: 0 10px !important;
  }
  .el-dialog__body {
    padding: 10px !important;
    height: calc(100% - 104px);
  }
  .el-dialog__footer {
    padding: 10px !important;
  }
}

.el-table-v2 {
  .el-table-v2__header-row {
    // border-bottom:1px solid #ddd !important;
    // border-top:1px solid #ddd !important;
    border-bottom: none;
    .el-table-v2__header-cell {
      border-left: 1px solid #ddd;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      &:last-child {
        position: relative;
        border-right: 1px solid #ddd;
      }
    }
  }
  .el-table-v2__row {
    border-bottom: 1px solid #ddd !important;
    .el-table-v2__row-cell {
      border-left: 1px solid #ddd;
      &:last-child {
        border-right: 1px solid #ddd;
      }
    }
  }
  // .el-empty{
  //   display:none;
  // }
  .el-table-v2__empty {
    height: 60px;
    .el-empty {
      display: none;
    }
    border-left: 1px solid #ddd;
    &:before {
      content: '';
      width: 1px;
      height: 100%;
      background: #ddd;
      position: absolute;
      right: 1px;
    }
    &:after {
      content: '';
      height: 1px;
      width: calc(100% - 1px);
      background: #ddd;
      position: absolute;
      bottom: 0;
    }
  }
  .el-table-v2__header-row {
    font-size: 12px;
  }
  .el-table-v2__row-cell {
    color: #666;
    font-size: 13px;
  }
}
.el-scrollbar__bar{
  display:block !important;
  &.is-horizontal{
    height:9px !important;
  }
  &.is-vertical{
    width:9px !important;
  }
}
.el-scrollbar__thumb{
  background-color:#555 !important;
}