-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbase.css
More file actions
155 lines (132 loc) · 4.86 KB
/
base.css
File metadata and controls
155 lines (132 loc) · 4.86 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
/* color palette from <https://github.com/vuejs/theme> */
/* https://material-foundation.github.io/material-theme-builder/ */
:root {
--main-1000: #01151f;
--main-900: #023944;
--main-800: #035065;
--main-700: #046a82;
--main-600: #24839a;
--main-500: #3996ae;
--main-400: #5faec2;
--main-300: #82c3d6;
--main-200: #a3d8e8;
--main-100: #c4eaf5;
--main-50: #e1f6fb;
--main-40: #eaf3f5;
--main-30: #f7fbfd;
--main-20: #f6f9fa;
--main-10: #fafcfd;
--main-5: #fcfefe;
--main-1: #fefefe;
--main-0: #ffffff;
--gray-10000: #000000; /* 保持纯黑 */
--gray-2000: #0c0d0d; /* 更精致的暗灰，用于极深背景 */
--gray-1000: #151616; /* 深灰黑，适用于主文本 */
--gray-900: #1e1f1f;
--gray-800: #323333; /* 标准深灰，适合背景 */
--gray-700: #4c4d4d;
--gray-600: #697070; /* 调和中灰，适合次要文本 */
--gray-500: #979999; /* 更柔和的中灰色 */
--gray-400: #bdbfbf;
--gray-300: #d7d9d9; /* 修正了原300/200重复 */
--gray-200: #e4e6e6; /* 稍微加深一点，便于分层 */
--gray-150: #eef0f0;
--gray-100: #eff2f2;
--gray-50: #f5f7f7;
--gray-25: #f8fafa;
--gray-10: #fbfcfc;
--gray-0: #ffffff;
/* Standard Color System - 标准5档色阶系统 */
--color-primary-50: #e1f6fb; /* 主色调-最浅 */
--color-primary-100: #a3d8e8; /* 主色调-浅 */
--color-primary-500: #3996ae; /* 主色调-标准 */
--color-primary-700: #046a82; /* 主色调-深 */
--color-primary-900: #023944; /* 主色调-最深 */
/* 保留原有的 main 变量 */
--main-color: #016179;
--main-bright: #0188a6;
--color-secondary-50: #f5f7f7; /* 次要色-最浅 */
--color-secondary-100: #eff2f2; /* 次要色-浅 */
--color-secondary-500: #4e616d; /* 次要色-标准 */
--color-secondary-700: #3a4a56; /* 次要色-深 */
--color-secondary-900: #2c3843; /* 次要色-最深 */
--color-success-50: #f6ffed; /* 成功色-最浅 */
--color-success-100: #b7eb8f; /* 成功色-浅 */
--color-success-500: #52c41a; /* 成功色-标准 */
--color-success-700: #389e0d; /* 成功色-深 */
--color-success-900: #135200; /* 成功色-最深 */
--color-error-50: #fff2f0; /* 错误色-最浅 */
--color-error-100: #ffccc7; /* 错误色-浅 */
--color-error-500: #ff4d4f; /* 错误色-标准 */
--color-error-700: #cf1322; /* 错误色-深 */
--color-error-900: #820014; /* 错误色-最深 */
--color-warning-50: #fffbe6; /* 警告色-最浅 */
--color-warning-100: #ffe58f; /* 警告色-浅 */
--color-warning-500: #faad14; /* 警告色-标准 */
--color-warning-700: #d48806; /* 警告色-深 */
--color-warning-900: #ad6800; /* 警告色-最深 */
--color-info-50: #e6f7ff; /* 信息色-最浅 */
--color-info-100: #bae7ff; /* 信息色-浅 */
--color-info-500: #1890ff; /* 信息色-标准 */
--color-info-700: #096dd9; /* 信息色-深 */
--color-info-900: #0050b3; /* 信息色-最深 */
--color-accent-50: #e6fffb; /* 强调色-最浅 */
--color-accent-100: #87e8de; /* 强调色-浅 */
--color-accent-500: #13c2c2; /* 强调色-标准 */
--color-accent-700: #08979c; /* 强调色-深 */
--color-accent-900: #006d75; /* 强调色-最深 */
/* Chart Palette - 图表调色板 */
--chart-palette-1: var(--main-500);
--chart-palette-2: #5AD8A6;
--chart-palette-3: #F6BD16;
--chart-palette-4: #F27C7C;
--chart-palette-5: #9581CC;
--chart-palette-6: #6DC8EC;
--chart-palette-7: #FF9D4D;
--chart-palette-8: #92D050;
--chart-palette-9: #E885BA;
--chart-palette-10: #8C8C8C;
--bg-sider: var(--main-5);
--color-text: var(--c-black);
/* Shadow System - 阴影系统 */
--shadow-0: rgba(0, 0, 0, 0.02);
--shadow-1: rgba(0, 0, 0, 0.05);
--shadow-2: rgba(0, 0, 0, 0.08);
--shadow-3: rgba(0, 0, 0, 0.12);
--shadow-4: rgba(0, 0, 0, 0.16);
--shadow-5: rgba(0, 0, 0, 0.20);
--min-width: 400px;
/* Ant Design 兼容变量 */
--color-bg-container: var(--main-0);
--color-bg-elevated: var(--gray-10);
--color-text-secondary: rgba(0, 0, 0, 0.65);
--color-text-tertiary: rgba(0, 0, 0, 0.45);
--color-trans-light: rgba(255, 255, 255, 0.85);
--color-trans-dark: rgba(0, 0, 0, 0.85);
}
:root {
--scrollbar-width: 4px;
}
/* 全局滚动条样式 */
::-webkit-scrollbar {
width: var(--scrollbar-width);
height: var(--scrollbar-width);
}
::-webkit-scrollbar-track {
background: var(--gray-100);
border-radius: calc(var(--scrollbar-width) / 2);
}
::-webkit-scrollbar-thumb {
background: var(--gray-200);
border-radius: calc(var(--scrollbar-width) / 2);
transition: background 0.2s ease;
cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gray-100);
}
/* Firefox 滚动条样式 */
* {
scrollbar-width: thin;
scrollbar-color: var(--gray-200) transparent;
}