~yxh/opo-web.git

// ============================================================
// 运行时主题层（CSS 变量消费方）
// ------------------------------------------------------------
// Element UI 2.x 的主题色是 SCSS 编译期常量，无法在运行时修改。
// 本文件不改 Element 源码，只"重写用到主色的选择器"，值改为
// var(--opo-primary*)；这些变量由 utils/theme.js 在切换皮肤时写入
// :root，因此换肤无需重新编译、无需刷新页面。
//
// 覆盖顺序很关键：本文件必须在 element-ui 与 ruoyi.scss 之后引入
// （见 main.js 的 import 顺序）。
// 覆盖范围：按钮/链接/输入/单选复选开关/Tabs/分页/表格/步骤条/
//          日期/下拉/加载/进度，其余组件按需补充。
// ============================================================
 
$opo-fallback: #0E768F;
 
// ---------- 按钮 ----------
.el-button--primary {
  background-color: var(--opo-primary, #{$opo-fallback});
  border-color: var(--opo-primary, #{$opo-fallback});
  color: #fff;
 
  &:hover,
  &:focus {
    background-color: var(--opo-primary-hover, #{$opo-fallback});
    border-color: var(--opo-primary-hover, #{$opo-fallback});
    color: #fff;
  }
 
  &:active {
    background-color: var(--opo-primary-active, #{$opo-fallback});
    border-color: var(--opo-primary-active, #{$opo-fallback});
    color: #fff;
  }
 
  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus,
  &.is-disabled:active {
    background-color: var(--opo-primary-light-5, #{$opo-fallback});
    border-color: var(--opo-primary-light-5, #{$opo-fallback});
    color: #fff;
  }
 
  &.is-plain {
    background-color: var(--opo-primary-light-9, #fff);
    border-color: var(--opo-primary-light-5, #{$opo-fallback});
    color: var(--opo-primary, #{$opo-fallback});
 
    &:hover,
    &:focus,
    &:active {
      background-color: var(--opo-primary, #{$opo-fallback});
      border-color: var(--opo-primary, #{$opo-fallback});
      color: #fff;
    }
  }
}
 
.el-button--text {
  color: var(--opo-primary, #{$opo-fallback});
 
  &:hover,
  &:focus {
    color: var(--opo-primary-hover, #{$opo-fallback});
  }
 
  &.is-disabled,
  &.is-disabled:hover {
    color: var(--opo-primary-light-5, #{$opo-fallback});
  }
}
 
// 默认按钮 hover 时透出品牌色（原来是一片灰）
.el-button--default:hover,
.el-button--default:focus {
  color: var(--opo-primary, #{$opo-fallback});
  border-color: var(--opo-primary-light-5, #{$opo-fallback});
  background-color: var(--opo-primary-light-9, #fff);
}
 
// ---------- 链接 ----------
.el-link.el-link--primary {
  color: var(--opo-primary, #{$opo-fallback});
 
  &:hover {
    color: var(--opo-primary-light-3, #{$opo-fallback});
  }
}
 
// ---------- 输入类 ----------
.el-input__inner:focus,
.el-textarea__inner:focus,
.el-input__inner:hover {
  border-color: var(--opo-primary-light-5, #{$opo-fallback});
}
 
.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: var(--opo-primary, #{$opo-fallback});
}
 
.el-select .el-input.is-focus .el-input__inner,
.el-select .el-input__inner:focus {
  border-color: var(--opo-primary, #{$opo-fallback});
}
 
.el-select-dropdown__item.selected {
  color: var(--opo-primary, #{$opo-fallback});
  font-weight: 600;
}
 
.el-input-number__decrease:hover,
.el-input-number__increase:hover {
  color: var(--opo-primary, #{$opo-fallback});
}
 
// ---------- 单选 / 复选 ----------
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: var(--opo-primary, #{$opo-fallback});
  background-color: var(--opo-primary, #{$opo-fallback});
}
 
.el-radio__input.is-checked + .el-radio__label,
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--opo-primary, #{$opo-fallback});
}
 
.el-radio-button__orig-radio:checked + .el-radio-button__inner,
.el-checkbox-button__orig-radio:checked + .el-checkbox-button__inner {
  background-color: var(--opo-primary, #{$opo-fallback});
  border-color: var(--opo-primary, #{$opo-fallback});
  box-shadow: -1px 0 0 0 var(--opo-primary, #{$opo-fallback});
  color: #fff;
}
 
// ---------- 开关 ----------
.el-switch.is-checked .el-switch__core {
  border-color: var(--opo-primary, #{$opo-fallback});
  background-color: var(--opo-primary, #{$opo-fallback});
}
 
// ---------- Tabs ----------
.el-tabs__item.is-active,
.el-tabs__item:hover {
  color: var(--opo-primary, #{$opo-fallback});
}
 
.el-tabs__active-bar {
  background-color: var(--opo-primary, #{$opo-fallback});
}
 
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: var(--opo-primary, #{$opo-fallback});
  border-bottom-color: transparent;
}
 
// ---------- 分页 ----------
.el-pager li.active,
.el-pager li:hover {
  color: var(--opo-primary, #{$opo-fallback});
}
 
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--opo-primary, #{$opo-fallback});
  color: #fff;
}
 
.el-pagination button:hover {
  color: var(--opo-primary, #{$opo-fallback});
}
 
// ---------- 表格 ----------
.el-table .ascending .sort-caret.ascending {
  border-bottom-color: var(--opo-primary, #{$opo-fallback});
}
 
.el-table .descending .sort-caret.descending {
  border-top-color: var(--opo-primary, #{$opo-fallback});
}
 
.el-table__body tr.current-row > td {
  background-color: var(--opo-primary-light-9, #fff) !important;
}
 
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: var(--opo-primary-light-95, #f5f9fd) !important;
}
 
// ---------- 步骤条 ----------
.el-step__head.is-process {
  color: var(--opo-primary, #{$opo-fallback});
  border-color: var(--opo-primary, #{$opo-fallback});
}
 
.el-step__title.is-process {
  color: var(--opo-primary, #{$opo-fallback});
  font-weight: 600;
}
 
.el-step__head.is-finish {
  color: var(--opo-primary, #{$opo-fallback});
  border-color: var(--opo-primary, #{$opo-fallback});
}
 
.el-step__title.is-finish {
  color: var(--opo-primary, #{$opo-fallback});
}
 
// ---------- 日期 / 时间 ----------
.el-date-table td.today span {
  color: var(--opo-primary, #{$opo-fallback});
  font-weight: 700;
}
 
.el-date-table td.current:not(.disabled) span {
  background-color: var(--opo-primary, #{$opo-fallback});
  color: #fff;
}
 
.el-date-table td.available:hover {
  color: var(--opo-primary, #{$opo-fallback});
}
 
.el-date-picker__header-label.active,
.el-date-picker__header-label:hover {
  color: var(--opo-primary, #{$opo-fallback});
}
 
// ---------- 下拉 / 弹出菜单（只作用于弹出层，避免影响深色侧边栏） ----------
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
  color: var(--opo-primary, #{$opo-fallback});
  background-color: var(--opo-primary-light-9, #fff);
}
 
.el-menu--popup .el-menu-item.is-active,
.el-menu--popup .el-menu-item:hover {
  color: var(--opo-primary, #{$opo-fallback});
}
 
// ---------- 级联 ----------
.el-cascader .el-input.is-focus .el-input__inner {
  border-color: var(--opo-primary, #{$opo-fallback});
}
 
.el-cascader-node.in-active-path,
.el-cascader-node.is-active {
  color: var(--opo-primary, #{$opo-fallback});
}
 
// ---------- 加载 / 进度 ----------
.el-loading-spinner .path {
  stroke: var(--opo-primary, #{$opo-fallback});
}
 
.el-progress-bar__inner {
  background-color: var(--opo-primary, #{$opo-fallback});
}
 
// ---------- 滑块 ----------
.el-slider__bar {
  background-color: var(--opo-primary, #{$opo-fallback});
}
 
.el-slider__button {
  border-color: var(--opo-primary, #{$opo-fallback});
}