variables.scss
2.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
// 黑白灰主题变量
:root {
// 主色调 - 黑色主题
--el-color-primary: #000000;
--el-color-primary-light-3: #333333;
--el-color-primary-light-5: #666666;
--el-color-primary-light-7: #999999;
--el-color-primary-light-8: #cccccc;
--el-color-primary-light-9: #f5f5f5;
--el-color-primary-dark-2: #000000;
// 成功色 - 深灰色
--el-color-success: #4a4a4a;
--el-color-success-light-3: #6b6b6b;
--el-color-success-light-5: #8c8c8c;
--el-color-success-light-7: #adadad;
--el-color-success-light-8: #cecece;
--el-color-success-light-9: #efefef;
// 警告色 - 中灰色
--el-color-warning: #666666;
--el-color-warning-light-3: #808080;
--el-color-warning-light-5: #999999;
--el-color-warning-light-7: #b3b3b3;
--el-color-warning-light-8: #cccccc;
--el-color-warning-light-9: #e6e6e6;
// 危险色 - 深灰色
--el-color-danger: #333333;
--el-color-danger-light-3: #555555;
--el-color-danger-light-5: #777777;
--el-color-danger-light-7: #999999;
--el-color-danger-light-8: #bbbbbb;
--el-color-danger-light-9: #dddddd;
// 信息色 - 浅灰色
--el-color-info: #999999;
--el-color-info-light-3: #b3b3b3;
--el-color-info-light-5: #cccccc;
--el-color-info-light-7: #e0e0e0;
--el-color-info-light-8: #e9e9e9;
--el-color-info-light-9: #f2f2f2;
// 文本颜色 - 黑白灰渐变
--el-text-color-primary: #000000;
--el-text-color-regular: #333333;
--el-text-color-secondary: #666666;
--el-text-color-placeholder: #999999;
--el-text-color-disabled: #cccccc;
// 边框颜色 - 灰色渐变
--el-border-color: #e0e0e0;
--el-border-color-light: #e8e8e8;
--el-border-color-lighter: #f0f0f0;
--el-border-color-extra-light: #f8f8f8;
// 背景色 - 白色到浅灰
--el-bg-color: #ffffff;
--el-bg-color-page: #fafafa;
--el-bg-color-overlay: #ffffff;
// 布局相关
--sidebar-width: 210px;
--sidebar-collapsed-width: 64px;
--header-height: 50px;
--breadcrumb-height: 40px;
// 阴影 - 黑白灰阴影
--el-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.04);
--el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
--el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.04);
--el-box-shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.08);
// 圆角
--el-border-radius-base: 4px;
--el-border-radius-small: 2px;
--el-border-radius-round: 20px;
--el-border-radius-circle: 100%;
// 字体
--el-font-size-extra-large: 20px;
--el-font-size-large: 18px;
--el-font-size-medium: 16px;
--el-font-size-base: 14px;
--el-font-size-small: 13px;
--el-font-size-extra-small: 12px;
// 间距
--el-spacing-extra-large: 24px;
--el-spacing-large: 20px;
--el-spacing-medium: 16px;
--el-spacing-base: 12px;
--el-spacing-small: 8px;
--el-spacing-extra-small: 4px;
}