xt-element-ui 2.2.3 → 2.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/README.md +140 -192
  2. package/docs/README.md +162 -88
  3. package/docs/components/base/theme.md +248 -0
  4. package/docs/components/base/xt-list.md +1 -1
  5. package/docs/components/base/xt-scroll-arrow.md +87 -1
  6. package/docs/components/base/xt-scroll.md +237 -0
  7. package/docs/components/utils/config.md +18 -4
  8. package/docs/components/utils/theme.md +280 -183
  9. package/lib/index.common.1.js +4 -26
  10. package/lib/index.common.2.js +1 -1
  11. package/lib/index.common.js +1871 -671
  12. package/lib/index.css +1 -1
  13. package/lib/index.umd.1.js +4 -26
  14. package/lib/index.umd.2.js +1 -1
  15. package/lib/index.umd.js +1871 -671
  16. package/lib/index.umd.min.1.js +1 -1
  17. package/lib/index.umd.min.js +1 -1
  18. package/lib/theme/element-overrides.css +607 -0
  19. package/lib/theme/element-vars.css +280 -0
  20. package/lib/xt-badge/xt-badge.common.js +1 -1
  21. package/lib/xt-badge/xt-badge.umd.js +1 -1
  22. package/lib/xt-button/xt-button.common.js +1 -1
  23. package/lib/xt-button/xt-button.umd.js +1 -1
  24. package/lib/xt-card/xt-card.common.js +1 -1
  25. package/lib/xt-card/xt-card.umd.js +1 -1
  26. package/lib/xt-card-item/xt-card-item.common.js +1 -1
  27. package/lib/xt-card-item/xt-card-item.umd.js +1 -1
  28. package/lib/xt-chart/xt-chart.common.js +5 -5
  29. package/lib/xt-chart/xt-chart.umd.js +5 -5
  30. package/lib/xt-config-provider/xt-config-provider.css +1 -1
  31. package/lib/xt-date-picker/xt-date-picker.common.1.js +4 -26
  32. package/lib/xt-date-picker/xt-date-picker.common.2.js +1 -1
  33. package/lib/xt-date-picker/xt-date-picker.common.js +1 -47
  34. package/lib/xt-date-picker/xt-date-picker.css +1 -1
  35. package/lib/xt-date-picker/xt-date-picker.umd.1.js +4 -26
  36. package/lib/xt-date-picker/xt-date-picker.umd.2.js +1 -1
  37. package/lib/xt-date-picker/xt-date-picker.umd.js +1 -47
  38. package/lib/xt-date-picker/xt-date-picker.umd.min.1.js +1 -1
  39. package/lib/xt-date-picker/xt-date-picker.umd.min.js +1 -1
  40. package/lib/xt-flex-box/xt-flex-box.common.js +1 -1
  41. package/lib/xt-flex-box/xt-flex-box.umd.js +1 -1
  42. package/lib/xt-flow/xt-flow.common.js +1 -1
  43. package/lib/xt-flow/xt-flow.umd.js +1 -1
  44. package/lib/xt-form-schema/xt-form-schema.common.js +1 -1
  45. package/lib/xt-form-schema/xt-form-schema.umd.js +1 -1
  46. package/lib/xt-grid-box/xt-grid-box.common.js +1 -1
  47. package/lib/xt-grid-box/xt-grid-box.umd.js +1 -1
  48. package/lib/xt-grid-item/xt-grid-item.common.js +1 -1
  49. package/lib/xt-grid-item/xt-grid-item.umd.js +1 -1
  50. package/lib/xt-icon/xt-icon.common.js +1 -1
  51. package/lib/xt-icon/xt-icon.umd.js +1 -1
  52. package/lib/xt-input/xt-input.common.js +1 -1
  53. package/lib/xt-input/xt-input.umd.js +1 -1
  54. package/lib/xt-list/xt-list.common.js +457 -118
  55. package/lib/xt-list/xt-list.css +1 -1
  56. package/lib/xt-list/xt-list.umd.js +457 -118
  57. package/lib/xt-list/xt-list.umd.min.js +1 -1
  58. package/lib/xt-map/xt-map.common.js +1 -1
  59. package/lib/xt-map/xt-map.umd.js +1 -1
  60. package/lib/xt-map-provider/xt-map-provider.common.js +1 -1
  61. package/lib/xt-map-provider/xt-map-provider.umd.js +1 -1
  62. package/lib/xt-page/xt-page.common.js +1 -1
  63. package/lib/xt-page/xt-page.umd.js +1 -1
  64. package/lib/xt-progress/xt-progress.common.js +1 -1
  65. package/lib/xt-progress/xt-progress.umd.js +1 -1
  66. package/lib/xt-scroll/demo.html +10 -0
  67. package/lib/xt-scroll/index.js +1 -0
  68. package/lib/xt-scroll/xt-scroll.common.js +551 -0
  69. package/lib/xt-scroll/xt-scroll.css +1 -0
  70. package/lib/xt-scroll/xt-scroll.umd.js +561 -0
  71. package/lib/xt-scroll/xt-scroll.umd.min.js +1 -0
  72. package/lib/xt-scroll-arrow/xt-scroll-arrow.common.js +591 -170
  73. package/lib/xt-scroll-arrow/xt-scroll-arrow.css +1 -1
  74. package/lib/xt-scroll-arrow/xt-scroll-arrow.umd.js +591 -170
  75. package/lib/xt-scroll-arrow/xt-scroll-arrow.umd.min.js +1 -1
  76. package/lib/xt-select-tree/xt-select-tree.common.js +1 -1
  77. package/lib/xt-select-tree/xt-select-tree.umd.js +1 -1
  78. package/lib/xt-step-price/xt-step-price.common.js +2 -2
  79. package/lib/xt-step-price/xt-step-price.umd.js +2 -2
  80. package/lib/xt-step-price-item/xt-step-price-item.common.js +1 -1
  81. package/lib/xt-step-price-item/xt-step-price-item.umd.js +1 -1
  82. package/lib/xt-tab-pane/xt-tab-pane.common.js +1 -1
  83. package/lib/xt-tab-pane/xt-tab-pane.umd.js +1 -1
  84. package/lib/xt-table/xt-table.common.js +2 -2
  85. package/lib/xt-table/xt-table.umd.js +2 -2
  86. package/lib/xt-tabs/xt-tabs.common.js +1 -1
  87. package/lib/xt-tabs/xt-tabs.umd.js +1 -1
  88. package/lib/xt-text/xt-text.common.js +1 -1
  89. package/lib/xt-text/xt-text.umd.js +1 -1
  90. package/lib/xt-time/xt-time.common.js +1 -1
  91. package/lib/xt-time/xt-time.umd.js +1 -1
  92. package/lib/xt-transfer-tree/xt-transfer-tree.common.js +1 -1
  93. package/lib/xt-transfer-tree/xt-transfer-tree.umd.js +1 -1
  94. package/lib/xt-upload/xt-upload.common.js +2 -2
  95. package/lib/xt-upload/xt-upload.umd.js +2 -2
  96. package/package.json +5 -3
  97. package/src/components/index.scss +3 -0
  98. package/src/components/theme/element-overrides.css +607 -0
  99. package/src/components/theme/element-vars.css +280 -0
  100. package/src/components/theme/iframe-injector.js +502 -0
  101. package/src/components/theme/index.js +64 -0
  102. package/src/components/xt-config-provider/style/index.scss +0 -11
  103. package/src/components/xt-date-picker/component/RangeDate.vue +1 -29
  104. package/src/components/xt-date-picker/style/index.scss +80 -53
  105. package/src/components/xt-list/index.vue +23 -12
  106. package/src/components/xt-scroll/index.js +9 -0
  107. package/src/components/xt-scroll/index.vue +363 -0
  108. package/src/components/xt-scroll/style/index.scss +107 -0
  109. package/src/components/xt-scroll-arrow/index.vue +200 -83
  110. package/src/components/xt-scroll-arrow/style/index.scss +16 -5
  111. package/src/index.js +9 -2
  112. package/src/utils/color.js +105 -0
  113. package/src/utils/index.js +456 -468
  114. package/src/utils/theme-vars.js +134 -0
  115. package/lib/css/1.87a493be.css +0 -1
  116. package/lib/xt-date-picker/css/1.87a493be.css +0 -1
package/src/components/theme/element-overrides.css ADDED
@@ -0,0 +1,607 @@
1
+ /* ============================================================
2
+ * XT-Element-UI Element UI 组件样式覆盖
3
+ * 用于注入到子系统 iframe 的 <head> 中
4
+ *
5
+ * 设计原则：
6
+ * 1. 覆盖 Element UI 编译后的固定颜色值，使其使用 CSS 变量
7
+ * 2. 使用 !important 确保覆盖编译后的样式
8
+ * 3. 子系统无需任何改造，注入此 CSS 后主题变量即生效
9
+ * 4. 覆盖范围：所有核心颜色属性（背景、文字、边框、主色）
10
+ * ============================================================ */
11
+
12
+ /* ==================== Button 按钮 ==================== */
13
+ .el-button--primary {
14
+ background-color: var(--el-color-primary) !important;
15
+ border-color: var(--el-color-primary) !important;
16
+ color: var(--el-color-white) !important;
17
+ }
18
+ .el-button--primary:hover,
19
+ .el-button--primary:focus {
20
+ background-color: var(--el-color-primary-light-3) !important;
21
+ border-color: var(--el-color-primary-light-3) !important;
22
+ }
23
+ .el-button--primary:active {
24
+ background-color: var(--el-color-primary-dark-2) !important;
25
+ border-color: var(--el-color-primary-dark-2) !important;
26
+ }
27
+ .el-button--primary.is-plain {
28
+ background-color: var(--el-color-primary-light-9) !important;
29
+ border-color: var(--el-color-primary-light-5) !important;
30
+ color: var(--el-color-primary) !important;
31
+ }
32
+ .el-button--primary.is-plain:hover,
33
+ .el-button--primary.is-plain:focus {
34
+ background-color: var(--el-color-primary) !important;
35
+ border-color: var(--el-color-primary) !important;
36
+ color: var(--el-color-white) !important;
37
+ }
38
+ .el-button--primary.is-disabled,
39
+ .el-button--primary.is-disabled:hover {
40
+ background-color: var(--el-color-primary-light-5) !important;
41
+ border-color: var(--el-color-primary-light-5) !important;
42
+ }
43
+
44
+ /* 成功按钮 */
45
+ .el-button--success {
46
+ background-color: var(--el-color-success) !important;
47
+ border-color: var(--el-color-success) !important;
48
+ }
49
+ .el-button--success.is-plain {
50
+ color: var(--el-color-success) !important;
51
+ border-color: var(--el-color-success-light-5) !important;
52
+ background-color: var(--el-color-success-light-9) !important;
53
+ }
54
+
55
+ /* 警告按钮 */
56
+ .el-button--warning {
57
+ background-color: var(--el-color-warning) !important;
58
+ border-color: var(--el-color-warning) !important;
59
+ }
60
+ .el-button--warning.is-plain {
61
+ color: var(--el-color-warning) !important;
62
+ border-color: var(--el-color-warning-light-5) !important;
63
+ background-color: var(--el-color-warning-light-9) !important;
64
+ }
65
+
66
+ /* 危险按钮 */
67
+ .el-button--danger {
68
+ background-color: var(--el-color-danger) !important;
69
+ border-color: var(--el-color-danger) !important;
70
+ }
71
+ .el-button--danger.is-plain {
72
+ color: var(--el-color-danger) !important;
73
+ border-color: var(--el-color-danger-light-5) !important;
74
+ background-color: var(--el-color-danger-light-9) !important;
75
+ }
76
+
77
+ /* 信息按钮 */
78
+ .el-button--info {
79
+ background-color: var(--el-color-info) !important;
80
+ border-color: var(--el-color-info) !important;
81
+ }
82
+ .el-button--info.is-plain {
83
+ color: var(--el-color-info) !important;
84
+ border-color: var(--el-color-info-light-5) !important;
85
+ background-color: var(--el-color-info-light-9) !important;
86
+ }
87
+
88
+ /* 默认按钮 */
89
+ .el-button--default {
90
+ background-color: var(--el-bg-color) !important;
91
+ border-color: var(--el-border-color) !important;
92
+ color: var(--el-text-color-regular) !important;
93
+ }
94
+ .el-button--default:hover {
95
+ color: var(--el-color-primary) !important;
96
+ border-color: var(--el-color-primary-light-5) !important;
97
+ background-color: var(--el-color-primary-light-9) !important;
98
+ }
99
+
100
+ /* 文字按钮 */
101
+ .el-button--text {
102
+ color: var(--el-color-primary) !important;
103
+ }
104
+
105
+ /* ==================== Input 输入框 ==================== */
106
+ .el-input__inner {
107
+ background-color: var(--el-bg-color) !important;
108
+ border-color: var(--el-border-color) !important;
109
+ color: var(--el-text-color-regular) !important;
110
+ }
111
+ .el-input__inner:hover {
112
+ border-color: var(--el-border-color-dark) !important;
113
+ }
114
+ .el-input__inner:focus {
115
+ border-color: var(--el-color-primary) !important;
116
+ }
117
+ .el-input__inner::placeholder {
118
+ color: var(--el-text-color-placeholder) !important;
119
+ }
120
+ .el-input.is-disabled .el-input__inner {
121
+ background-color: var(--el-fill-color-light) !important;
122
+ border-color: var(--el-border-color-lighter) !important;
123
+ color: var(--el-text-color-disabled) !important;
124
+ }
125
+
126
+ /* Textarea */
127
+ .el-textarea__inner {
128
+ background-color: var(--el-bg-color) !important;
129
+ border-color: var(--el-border-color) !important;
130
+ color: var(--el-text-color-regular) !important;
131
+ }
132
+ .el-textarea__inner:hover {
133
+ border-color: var(--el-border-color-dark) !important;
134
+ }
135
+ .el-textarea__inner:focus {
136
+ border-color: var(--el-color-primary) !important;
137
+ }
138
+
139
+ /* ==================== Select 选择器 ==================== */
140
+ .el-select .el-input__inner {
141
+ background-color: var(--el-bg-color) !important;
142
+ border-color: var(--el-border-color) !important;
143
+ color: var(--el-text-color-regular) !important;
144
+ }
145
+ .el-select-dropdown {
146
+ background-color: var(--el-bg-color-overlay) !important;
147
+ border-color: var(--el-border-color-light) !important;
148
+ }
149
+ .el-select-dropdown__item {
150
+ color: var(--el-text-color-regular) !important;
151
+ }
152
+ .el-select-dropdown__item:hover {
153
+ background-color: var(--el-fill-color-light) !important;
154
+ }
155
+ .el-select-dropdown__item.selected {
156
+ color: var(--el-color-primary) !important;
157
+ }
158
+ .el-select-dropdown__item.is-disabled {
159
+ color: var(--el-text-color-disabled) !important;
160
+ }
161
+
162
+ /* ==================== Table 表格 ==================== */
163
+ .el-table {
164
+ background-color: var(--el-bg-color) !important;
165
+ color: var(--el-text-color-regular) !important;
166
+ }
167
+ .el-table th {
168
+ background-color: var(--el-fill-color) !important;
169
+ color: var(--el-text-color-primary) !important;
170
+ border-color: var(--el-border-color-lighter) !important;
171
+ }
172
+ .el-table td {
173
+ border-color: var(--el-border-color-lighter) !important;
174
+ }
175
+ .el-table--striped .el-table__body tr.el-table__row--striped td {
176
+ background-color: var(--el-fill-color-lighter) !important;
177
+ }
178
+ .el-table--enable-row-hover .el-table__body tr:hover > td {
179
+ background-color: var(--el-fill-color-light) !important;
180
+ }
181
+ .el-table__body tr.current-row > td {
182
+ background-color: var(--el-color-primary-light-9) !important;
183
+ }
184
+ .el-table__fixed-right::before,
185
+ .el-table__fixed::before {
186
+ background-color: var(--el-border-color-lighter) !important;
187
+ }
188
+ .el-table__border::after {
189
+ background-color: var(--el-border-color-lighter) !important;
190
+ }
191
+
192
+ /* ==================== Dialog 对话框 ==================== */
193
+ .el-dialog {
194
+ background-color: var(--el-bg-color-overlay) !important;
195
+ }
196
+ .el-dialog__title {
197
+ color: var(--el-text-color-primary) !important;
198
+ }
199
+ .el-dialog__header {
200
+ border-bottom-color: var(--el-border-color-lighter) !important;
201
+ }
202
+ .el-dialog__footer {
203
+ border-top-color: var(--el-border-color-lighter) !important;
204
+ }
205
+ .el-dialog__body {
206
+ color: var(--el-text-color-regular) !important;
207
+ }
208
+
209
+ /* ==================== Menu 菜单 ==================== */
210
+ .el-menu {
211
+ background-color: var(--el-bg-color) !important;
212
+ border-color: var(--el-border-color-lighter) !important;
213
+ }
214
+ .el-menu-item {
215
+ color: var(--el-text-color-regular) !important;
216
+ }
217
+ .el-menu-item:hover {
218
+ background-color: var(--el-fill-color-light) !important;
219
+ }
220
+ .el-menu-item.is-active {
221
+ color: var(--el-color-primary) !important;
222
+ border-bottom-color: var(--el-color-primary) !important;
223
+ }
224
+ .el-submenu__title {
225
+ color: var(--el-text-color-regular) !important;
226
+ }
227
+ .el-submenu__title:hover {
228
+ background-color: var(--el-fill-color-light) !important;
229
+ }
230
+
231
+ /* 暗色菜单 */
232
+ .el-menu--dark {
233
+ background-color: var(--el-bg-color) !important;
234
+ }
235
+ .el-menu--dark .el-menu-item {
236
+ color: var(--el-text-color-primary) !important;
237
+ }
238
+ .el-menu--dark .el-menu-item:hover {
239
+ background-color: var(--el-fill-color) !important;
240
+ }
241
+
242
+ /* ==================== Tabs 标签页 ==================== */
243
+ .el-tabs__header {
244
+ border-bottom-color: var(--el-border-color-lighter) !important;
245
+ }
246
+ .el-tabs__item {
247
+ color: var(--el-text-color-regular) !important;
248
+ }
249
+ .el-tabs__item:hover {
250
+ color: var(--el-color-primary) !important;
251
+ }
252
+ .el-tabs__item.is-active {
253
+ color: var(--el-color-primary) !important;
254
+ }
255
+ .el-tabs__active-bar {
256
+ background-color: var(--el-color-primary) !important;
257
+ }
258
+ .el-tabs__nav-wrap::after {
259
+ background-color: var(--el-border-color-light) !important;
260
+ }
261
+
262
+ /* ==================== Tag 标签 ==================== */
263
+ .el-tag {
264
+ background-color: var(--el-fill-color-light) !important;
265
+ border-color: var(--el-border-color-lighter) !important;
266
+ color: var(--el-text-color-primary) !important;
267
+ }
268
+ .el-tag--primary {
269
+ background-color: var(--el-color-primary-light-9) !important;
270
+ border-color: var(--el-color-primary-light-7) !important;
271
+ color: var(--el-color-primary) !important;
272
+ }
273
+ .el-tag--success {
274
+ background-color: var(--el-color-success-light-9) !important;
275
+ border-color: var(--el-color-success-light-7) !important;
276
+ color: var(--el-color-success) !important;
277
+ }
278
+ .el-tag--warning {
279
+ background-color: var(--el-color-warning-light-9) !important;
280
+ border-color: var(--el-color-warning-light-7) !important;
281
+ color: var(--el-color-warning) !important;
282
+ }
283
+ .el-tag--danger {
284
+ background-color: var(--el-color-danger-light-9) !important;
285
+ border-color: var(--el-color-danger-light-7) !important;
286
+ color: var(--el-color-danger) !important;
287
+ }
288
+ .el-tag--info {
289
+ background-color: var(--el-color-info-light-9) !important;
290
+ border-color: var(--el-color-info-light-7) !important;
291
+ color: var(--el-color-info) !important;
292
+ }
293
+
294
+ /* ==================== Pagination 分页 ==================== */
295
+ .el-pagination {
296
+ color: var(--el-text-color-regular) !important;
297
+ }
298
+ .el-pagination button {
299
+ background-color: var(--el-bg-color) !important;
300
+ color: var(--el-text-color-regular) !important;
301
+ }
302
+ .el-pagination button:hover {
303
+ color: var(--el-color-primary) !important;
304
+ }
305
+ .el-pagination .el-pager li {
306
+ background-color: var(--el-bg-color) !important;
307
+ color: var(--el-text-color-regular) !important;
308
+ }
309
+ .el-pagination .el-pager li:hover {
310
+ color: var(--el-color-primary) !important;
311
+ }
312
+ .el-pagination .el-pager li.active {
313
+ background-color: var(--el-color-primary) !important;
314
+ color: var(--el-color-white) !important;
315
+ }
316
+
317
+ /* ==================== Form 表单 ==================== */
318
+ .el-form-item__label {
319
+ color: var(--el-text-color-regular) !important;
320
+ }
321
+ .el-form-item__error {
322
+ color: var(--el-color-danger) !important;
323
+ }
324
+
325
+ /* ==================== Checkbox 复选框 ==================== */
326
+ .el-checkbox__input.is-checked .el-checkbox__inner {
327
+ background-color: var(--el-color-primary) !important;
328
+ border-color: var(--el-color-primary) !important;
329
+ }
330
+ .el-checkbox__input.is-checked + .el-checkbox__label {
331
+ color: var(--el-color-primary) !important;
332
+ }
333
+ .el-checkbox__label {
334
+ color: var(--el-text-color-regular) !important;
335
+ }
336
+
337
+ /* ==================== Radio 单选框 ==================== */
338
+ .el-radio__input.is-checked .el-radio__inner {
339
+ background-color: var(--el-color-primary) !important;
340
+ border-color: var(--el-color-primary) !important;
341
+ }
342
+ .el-radio__input.is-checked + .el-radio__label {
343
+ color: var(--el-color-primary) !important;
344
+ }
345
+ .el-radio__label {
346
+ color: var(--el-text-color-regular) !important;
347
+ }
348
+
349
+ /* ==================== Switch 开关 ==================== */
350
+ .el-switch.is-checked .el-switch__core {
351
+ background-color: var(--el-color-primary) !important;
352
+ border-color: var(--el-color-primary) !important;
353
+ }
354
+
355
+ /* ==================== DatePicker 日期选择器 ==================== */
356
+ .el-date-table td.current:not(.disabled) span {
357
+ background-color: var(--el-color-primary) !important;
358
+ color: var(--el-color-white) !important;
359
+ }
360
+ .el-date-table td.today span {
361
+ color: var(--el-color-primary) !important;
362
+ }
363
+ .el-date-table td.available:hover {
364
+ color: var(--el-color-primary) !important;
365
+ }
366
+ .el-picker-panel {
367
+ background-color: var(--el-bg-color-overlay) !important;
368
+ color: var(--el-text-color-regular) !important;
369
+ border-color: var(--el-border-color-light) !important;
370
+ }
371
+ .el-picker-panel__icon-btn:hover {
372
+ color: var(--el-color-primary) !important;
373
+ }
374
+
375
+ /* ==================== Dropdown 下拉菜单 ==================== */
376
+ .el-dropdown-menu {
377
+ background-color: var(--el-bg-color-overlay) !important;
378
+ border-color: var(--el-border-color-light) !important;
379
+ }
380
+ .el-dropdown-menu__item {
381
+ color: var(--el-text-color-regular) !important;
382
+ }
383
+ .el-dropdown-menu__item:hover {
384
+ background-color: var(--el-fill-color-light) !important;
385
+ color: var(--el-color-primary) !important;
386
+ }
387
+
388
+ /* ==================== Cascader 级联选择器 ==================== */
389
+ .el-cascader-menu {
390
+ background-color: var(--el-bg-color-overlay) !important;
391
+ color: var(--el-text-color-regular) !important;
392
+ border-color: var(--el-border-color-light) !important;
393
+ }
394
+ .el-cascader-node:not(.is-disabled):hover {
395
+ background-color: var(--el-fill-color-light) !important;
396
+ }
397
+ .el-cascader-node.is-active {
398
+ color: var(--el-color-primary) !important;
399
+ }
400
+
401
+ /* ==================== Tree 树形控件 ==================== */
402
+ .el-tree {
403
+ background-color: var(--el-bg-color) !important;
404
+ color: var(--el-text-color-regular) !important;
405
+ }
406
+ .el-tree-node__content:hover {
407
+ background-color: var(--el-fill-color-light) !important;
408
+ }
409
+ .el-tree-node:focus > .el-tree-node__content {
410
+ background-color: var(--el-fill-color-light) !important;
411
+ }
412
+ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
413
+ background-color: var(--el-color-primary-light-9) !important;
414
+ }
415
+
416
+ /* ==================== Loading / Message / Notification ==================== */
417
+ .el-loading-mask {
418
+ background-color: var(--el-mask-color-extra-light) !important;
419
+ }
420
+
421
+ .el-message {
422
+ background-color: var(--el-bg-color-overlay) !important;
423
+ border-color: var(--el-border-color-light) !important;
424
+ }
425
+ .el-message--success {
426
+ background-color: var(--el-color-success-light-9) !important;
427
+ border-color: var(--el-color-success-light-7) !important;
428
+ }
429
+ .el-message--warning {
430
+ background-color: var(--el-color-warning-light-9) !important;
431
+ border-color: var(--el-color-warning-light-7) !important;
432
+ }
433
+ .el-message--error {
434
+ background-color: var(--el-color-error-light-9) !important;
435
+ border-color: var(--el-color-error-light-7) !important;
436
+ }
437
+ .el-message--info {
438
+ background-color: var(--el-color-info-light-9) !important;
439
+ border-color: var(--el-color-info-light-7) !important;
440
+ }
441
+
442
+ .el-notification {
443
+ background-color: var(--el-bg-color-overlay) !important;
444
+ border-color: var(--el-border-color-light) !important;
445
+ }
446
+
447
+ /* ==================== Breadcrumb 面包屑 ==================== */
448
+ .el-breadcrumb__inner {
449
+ color: var(--el-text-color-regular) !important;
450
+ }
451
+ .el-breadcrumb__inner.is-link:hover {
452
+ color: var(--el-color-primary) !important;
453
+ }
454
+
455
+ /* ==================== Steps 步骤条 ==================== */
456
+ .el-step__title.is-process {
457
+ color: var(--el-text-color-primary) !important;
458
+ }
459
+ .el-step__title.is-wait {
460
+ color: var(--el-text-color-placeholder) !important;
461
+ }
462
+ .el-step__head.is-process {
463
+ color: var(--el-color-primary) !important;
464
+ border-color: var(--el-color-primary) !important;
465
+ }
466
+ .el-step__head.is-finish {
467
+ color: var(--el-color-primary) !important;
468
+ border-color: var(--el-color-primary) !important;
469
+ }
470
+ .el-step__line-inner {
471
+ background-color: var(--el-border-color) !important;
472
+ }
473
+
474
+ /* ==================== Card 卡片 ==================== */
475
+ .el-card {
476
+ background-color: var(--el-bg-color) !important;
477
+ border-color: var(--el-border-color-light) !important;
478
+ color: var(--el-text-color-regular) !important;
479
+ }
480
+ .el-card__header {
481
+ border-bottom-color: var(--el-border-color-lighter) !important;
482
+ }
483
+
484
+ /* ==================== Collapse 折叠面板 ==================== */
485
+ .el-collapse {
486
+ border-color: var(--el-border-color-light) !important;
487
+ }
488
+ .el-collapse-item__header {
489
+ background-color: var(--el-bg-color) !important;
490
+ color: var(--el-text-color-primary) !important;
491
+ border-bottom-color: var(--el-border-color-lighter) !important;
492
+ }
493
+ .el-collapse-item__wrap {
494
+ background-color: var(--el-bg-color) !important;
495
+ border-bottom-color: var(--el-border-color-lighter) !important;
496
+ }
497
+ .el-collapse-item__content {
498
+ color: var(--el-text-color-regular) !important;
499
+ }
500
+
501
+ /* ==================== Alert 警告 ==================== */
502
+ .el-alert--success {
503
+ background-color: var(--el-color-success-light-9) !important;
504
+ }
505
+ .el-alert--warning {
506
+ background-color: var(--el-color-warning-light-9) !important;
507
+ }
508
+ .el-alert--error {
509
+ background-color: var(--el-color-danger-light-9) !important;
510
+ }
511
+ .el-alert--info {
512
+ background-color: var(--el-color-info-light-9) !important;
513
+ }
514
+
515
+ /* ==================== Badge 标记 ==================== */
516
+ .el-badge__content--primary {
517
+ background-color: var(--el-color-primary) !important;
518
+ }
519
+ .el-badge__content--success {
520
+ background-color: var(--el-color-success) !important;
521
+ }
522
+ .el-badge__content--warning {
523
+ background-color: var(--el-color-warning) !important;
524
+ }
525
+ .el-badge__content--danger {
526
+ background-color: var(--el-color-danger) !important;
527
+ }
528
+ .el-badge__content--info {
529
+ background-color: var(--el-color-info) !important;
530
+ }
531
+
532
+ /* ==================== Progress 进度条 ==================== */
533
+ .el-progress-bar__inner {
534
+ background-color: var(--el-color-primary) !important;
535
+ }
536
+ .el-progress-bar__outer {
537
+ background-color: var(--el-fill-color) !important;
538
+ }
539
+ .el-progress--success .el-progress-bar__inner {
540
+ background-color: var(--el-color-success) !important;
541
+ }
542
+ .el-progress--exception .el-progress-bar__inner {
543
+ background-color: var(--el-color-danger) !important;
544
+ }
545
+
546
+ /* ==================== Slider 滑块 ==================== */
547
+ .el-slider__bar {
548
+ background-color: var(--el-color-primary) !important;
549
+ }
550
+ .el-slider__button {
551
+ border-color: var(--el-color-primary) !important;
552
+ }
553
+
554
+ /* ==================== Transfer 穿梭框 ==================== */
555
+ .el-transfer-panel {
556
+ background-color: var(--el-bg-color) !important;
557
+ border-color: var(--el-border-color-light) !important;
558
+ }
559
+ .el-transfer-panel__header {
560
+ background-color: var(--el-fill-color-light) !important;
561
+ border-bottom-color: var(--el-border-color-lighter) !important;
562
+ color: var(--el-text-color-primary) !important;
563
+ }
564
+ .el-transfer-panel__item.el-checkbox {
565
+ color: var(--el-text-color-regular) !important;
566
+ }
567
+
568
+ /* ==================== Drawer 抽屉 ==================== */
569
+ .el-drawer {
570
+ background-color: var(--el-bg-color-overlay) !important;
571
+ }
572
+ .el-drawer__header {
573
+ color: var(--el-text-color-primary) !important;
574
+ }
575
+ .el-drawer__body {
576
+ color: var(--el-text-color-regular) !important;
577
+ }
578
+
579
+ /* ==================== Popover / Tooltip ==================== */
580
+ .el-popover {
581
+ background-color: var(--el-bg-color-overlay) !important;
582
+ border-color: var(--el-border-color-light) !important;
583
+ color: var(--el-text-color-regular) !important;
584
+ }
585
+
586
+ /* ==================== 全局背景/文字 ==================== */
587
+ body {
588
+ background-color: var(--el-bg-color-page) !important;
589
+ color: var(--el-text-color-primary) !important;
590
+ }
591
+
592
+ /* 链接色 */
593
+ a {
594
+ color: var(--el-color-primary) !important;
595
+ }
596
+ a:hover {
597
+ color: var(--el-color-primary-light-3) !important;
598
+ }
599
+
600
+ /* 分割线 */
601
+ .el-divider__text {
602
+ background-color: var(--el-bg-color) !important;
603
+ color: var(--el-text-color-primary) !important;
604
+ }
605
+ .el-divider--horizontal {
606
+ border-top-color: var(--el-border-color-lighter) !important;
607
+ }