integrated_traffic_vue/src/assets/css/element.scss

:root {
  --el-header-height: 69px;
  --el-aside-scrollbar-height: calc(100vh - var(--el-header-height));
  --el-main-scrollbar-height: calc(100vh - var(--el-header-height) - 40px);
  --el-border-color: #273868 !important; // 边框颜色
  --el-text-color-regular: #fff !important;
  --el-fill-color-light: #0e1d44 !important; //hover背景色
  --el-color-check: #14affe !important; //hover、选中 文字颜色
  --el-aside-bg-color: #1d3065 !important;
  --el-input-bg-color: #081435 !important;
  --el-fill-color-blank: #081435 !important; // 背景色
  --el-border-color-lighter: var(--el-border-color) !important;
  --el-bullet-frame-bg-color: #08163b !important;
  --el-text-color-primary: #fff !important;
}

.el-button:focus, .el-button:hover {
  --el-button-hover-text-color: var(--el-button-text-color);
  --el-button-hover-border-color: var(--el-button-border-color);
  --el-button-hover-bg-color: var(--el-button-bg-color);
}

.el-header {
  --el-header-padding: 0 !important;
  --el-header-height: 69px !important;
}

.el-main {
  --el-main-padding: 0 !important;
}

.el-aside {
  --el-aside-width: 250px;
  background-color: var(--el-aside-bg-color);
}

.el-card {
  margin: 10px 20px;
  --el-card-padding: 18px 18px 0 18px !important;
  --el-card-bg-color: rgba(8, 24, 58, 0.5) !important;
  --el-card-border-color: var(--el-border-color) !important;
  color: var(--el-text-color-regular) !important;
  position: relative;
}

.el-popper {
  --el-bg-color-overlay: var(--el-fill-color-blank) !important;
  --el-border-color-light: var(--el-border-color) !important;
}

.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
  --el-cascader-node-background-hover: var(--el-fill-color-light);
  color: var(--el-color-check);
}

.el-cascader {
  --el-cascader-tag-background: #214082 !important;
  --el-color-info: var(--el-text-color-regular);
}

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  color: var(--el-color-check);
}

.el-dropdown-menu__item {
  &:not(.is-disabled):focus {
    --el-dropdown-menuItem-hover-fill: var(--el-fill-color-light);
    --el-dropdown-menuItem-hover-color: var(--el-color-check);
  }
}

.el-menu {
  border-right: none !important;
  --el-menu-bg-color: var(--el-aside-bg-color);
  --el-menu-text-color: var(--el-text-color-regular);
  --el-menu-hover-text-color: var(--el-text-color-regular);
  --el-menu-active-color: var(--el-text-color-regular);
  --el-menu-hover-bg-color: transparent;

  span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.el-sub-menu__title *, .el-menu-item * {
  vertical-align: middle !important;
}

.el-menu-item {
  &:hover, &.is-active {
    //background: #1d3f77;
    background-image: linear-gradient(to right, #2c6ee9, rgba(0, 0, 0, 0));
  }
}

//.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item {
//  padding-left: calc(var(--el-menu-base-level-padding) + var(--el-menu-level) * var(--el-menu-level-padding) + 20px) !important;
//}

.el-breadcrumb {
  margin-left: 10px;
  height: 30px;
  line-height: 30px !important;

  .el-breadcrumb__inner {
    --el-text-color-regular: #cacbce;

    a {
      font-weight: normal;
      --el-text-color-primary: #cacbce;
    }
  }

  .el-breadcrumb__separator {
    --el-text-color-placeholder: #cacbce;
  }
}

.el-select, .el-cascader, .el-date-editor.el-input, .el-date-editor.el-input__wrapper, .el-input__wrapper, .el-input-number, .el-select-v2 {
  width: 100% !important;
}

.el-textarea.is-disabled .el-textarea__inner, .el-select {
  --el-disabled-border-color: var(--el-border-color);
}

.el-table {
  --el-table-bg-color: #071a43 !important;
  --el-bg-color: #071a43 !important;
  --el-table-header-bg-color: #0f2049 !important;
  --el-table-border-color: var(--el-border-color) !important;
  --el-table-tr-bg-color: #071a43 !important;
  --el-fill-color-lighter: #111e40 !important;
  --el-table-text-color: #e0e0e0 !important;
  --el-table-header-text-color: var(--el-text-color-regular) !important;
  --el-table-row-hover-bg-color: #0d5aa3 !important;
  --el-table-current-row-bg-color: #0d5aa3 !important;

  .el-table__cell {
    text-align: center !important;
  }

  .el-table__empty-text {
    --el-text-color-secondary: var(--el-text-color-regular) !important;
  }
}

.el-pagination {
  --el-pagination-button-color: var(--el-text-color-regular) !important;
  --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank) !important;
  --el-pagination-bg-color: var(--el-fill-color-blank) !important;
}

.el-pagination .el-select {
  width: 128px !important;
}

.el-pagination--small .el-select {
  width: 100px !important;
}

.el-radio {
  --el-radio-input-bg-color: #091839 !important;
}

.el-radio__input.is-checked .el-radio__inner {
  background: var(--el-radio-input-bg-color) !important;
  border-color: var(--el-color-check);
}

.el-radio__inner {
  &::after {
    --el-color-white: var(--el-color-check);
  }
}

.el-radio__input.is-disabled.is-checked .el-radio__inner {
  --el-disabled-border-color: var(--el-color-check);

  &::after {
    --el-text-color-placeholder: var(--el-color-check);
  }
}

.el-radio__input.is-disabled .el-radio__inner {
  --el-disabled-bg-color: var(--el-radio-input-bg-color);
  --el-disabled-border-color: var(--el-border-color);
}

.el-checkbox {
  --el-checkbox-bg-color: #091839 !important;
  --el-checkbox-checked-bg-color: #091839 !important;
  --el-checkbox-checked-input-border-color: var(--el-color-check) !important;
}

.el-checkbox__input.is-disabled .el-checkbox__inner {
  --el-checkbox-disabled-input-fill: var(--el-checkbox-bg-color);
  --el-checkbox-disabled-border-color: var(--el-border-color);
}

.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner, .el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner {
  --el-checkbox-disabled-checked-input-fill: var(--el-checkbox-bg-color);
  --el-checkbox-disabled-checked-input-border-color: var(--el-color-check);
}

.el-picker__popper, .el-date-picker {
  --el-datepicker-border-color: var(--el-border-color) !important;
}

.el-time-panel__btn {
  --el-text-color-primary: var(--el-text-color-regular);
}

.el-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
  color: var(--el-color-check);
}

.el-button.is-plain {
  --el-fill-color-blank: var(--el-fill-color-blank);
}

.el-button.is-text:not(.is-disabled):active {
  background-color: var(--el-fill-color-light) !important;
}

.el-button.is-text:not(.is-disabled):focus, .el-button.is-text:not(.is-disabled):hover {
  color: var(--el-color-check);
}

.el-time-spinner__item.is-active:not(.is-disabled) {
  --el-text-color-primary: var(--el-color-check);
}

.el-picker-panel__icon-btn {
  color: var(--el-text-color-regular);

  .el-icon {
    color: var(--el-text-color-regular);
  }
}

.el-date-range-picker {
  --el-datepicker-border-color: var(--el-fill-color-light) !important;
  --el-datepicker-inrange-bg-color: var(--el-fill-color-light) !important;
  --el-datepicker-inrange-hover-bg-color: var(--el-fill-color-light) !important;
}

.el-date-editor .el-range-separator {
  color: var(--el-text-color-regular) !important;
}

.el-date-table.is-week-mode .el-date-table__row {
  &.current, &:hover {
    .el-date-table-cell {
      --el-datepicker-inrange-bg-color: var(--el-fill-color-light) !important;
    }
  }
}

.el-input.is-disabled .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
}

.el-select .el-tag.el-tag--info {
  background-color: #214082 !important;
  --el-tag-text-color: var(--el-text-color-regular) !important;
}

.el-tag .el-tag__close:hover {
  color: var(--el-color-check) !important;
  background-color: var(--el-fill-color-light) !important;
}

.el-upload--picture-card {
  --el-fill-color-lighter: var(--el-fill-color-blank) !important;
  border: 1px solid var(--el-border-color) !important;
}

.el-collapse {
  --el-collapse-header-text-color: var(--el-text-color-regular) !important;
  --el-collapse-content-text-color: var(--el-text-color-regular) !important;
}

.el-tabs__item {
  color: var(--el-text-color-regular) !important;

  &.is-active {
    color: var(--el-color-primary) !important;
  }
}

.el-tabs__nav-wrap::after {
  --el-border-color-light: var(--el-border-color);
}

.el-dialog {
  background: transparent !important;
  --el-dialog-margin-top: 50px !important;
  padding: 0 !important;

  .el-dialog__header {
    background-image: url("/src/assets/images/public/tctitlebg.png");
    height: 31px;
    line-height: 31px;
    padding-left: 30px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 0 !important;
    --el-dialog-padding-primary: 0 !important;
    padding-bottom: 0;

    .el-dialog__title {
      color: var(--el-text-color-regular);
      --el-dialog-title-font-size: 14px;
    }

    .el-dialog__headerbtn {
      height: 31px;
      top: 0;
    }
  }

  .el-dialog__body {
    background-color: var(--el-bullet-frame-bg-color);
    padding: calc(var(--el-dialog-padding-primary) + 10px) var(--el-dialog-padding-primary);
  }

  .el-dialog__footer {
    background-color: var(--el-bullet-frame-bg-color);
    padding: var(--el-dialog-padding-primary);
  }
}

.el-drawer {
  --el-drawer-bg-color: var(--el-bullet-frame-bg-color) !important;

  .el-drawer__header {
    color: var(--el-text-color-regular);
  }
}

.el-popper.is-dark {
  background: var(--el-fill-color-blank) !important;
  border: 1px solid var(--el-border-color) !important;
  color: var(--el-text-color-regular) !important;

  .el-popper__arrow::before {
    background: var(--el-fill-color-blank) !important;
    border: 1px solid var(--el-border-color) !important;
  }
}

.el-message-box {
  background-color: var(--el-fill-color-blank) !important;
  --el-messagebox-title-color: var(--el-text-color-regular) !important;
}

.el-divider__text {
  font-size: 16px !important;
  font-weight: 700 !important;
  background-color: var(--el-fill-color-blank) !important;
  color: var(--el-text-color-regular) !important;
}

.el-calendar {
  --el-calendar-selected-bg-color: var(--el-fill-color-light) !important;
}

.el-steps {
  --el-text-color-primary: var(--el-text-color-regular);

  .el-step__icon {
    background: var(--el-fill-color-blank);
  }
}

.el-descriptions {
  --el-text-color-primary: var(--el-text-color-regular);
}

.el-descriptions__label {
  width: 200px;
}

.el-descriptions__content {
  width: auto;
}

.el-descriptions__title {
  &:before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 19px;
    background-color: #04a9f5;
    margin-right: 10px;
    vertical-align: text-bottom;
  }
}

.el-statistic__content {
  color: var(--el-text-color-regular) !important;
}

.el-step__title, .el-select-dropdown__option-item {
  font-size: 14px !important;
}

.el-step__description {
  * {
    font-size: 12px !important;
  }
}

.el-notification {
  --el-notification-title-color: #000 !important;

  .el-notification__closeBtn:hover {
    --el-notification-close-hover-color: #000 !important;
  }
}

.el-color-predefine__color-selector.selected {
  --el-color-primary: #fff !important;
}

.el-input-number.is-disabled .el-input-number__decrease, .el-input-number.is-disabled .el-input-number__increase{
  border-color: var(--el-border-color) !important;
}