color.less
4.26 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
156
:root {
// header
--header-bg-color: #394664;
--header-bg-hover-color: #273352;
--header-active-menu-bg-color: #273352;
// sider
--sider-dark-bg-color: #273352;
--sider-dark-darken-bg-color: #273352;
--sider-dark-lighten-1-bg-color: #273352;
--sider-dark-lighten-2-bg-color: #273352;
--sider-dark-lighten-3-bg-color: #273352;
}
@white: #fff;
@info-color: @primary-color;
@basic-mask-color: fade(@white, 30%);
// :export {
// name: "less";
// mainColor: @mainColor;
// fontSize: @fontSize;
// }
@iconify-bg-color: #5551;
// =================================
// ==============border-color============
// =================================
// Dark-dark
@border-color-dark: #b6b7b9;
// Dark-light
@border-color-shallow-dark: #cececd;
// Light-dark
@border-color-light: #ebeef5;
// Light-light
@border-color-shallow-light: #f2f6fc;
// =================================
// ==============message==============
// =================================
// success-bg-color
@success-background-color: #f1f9ec;
// info-bg-color
@info-background-color: #e8eff8;
// warn-bg-color
@warning-background-color: #fdf6ed;
// danger-bg-color
@danger-background-color: #fef0f0;
// =================================
// ==============bg color============
// =================================
// dark
@background-color-dark: #f0f2f5;
// light
@background-color-light: #f5f7fa;
// layout content background
@layout-content-bg-color: #f1f1f6;
// =================================
// ==============Header=============
// =================================
@header-dark-bg-color: var(--header-bg-color);
@header-dark-bg-hover-color: var(--header-bg-hover-color);
@header-light-bg-hover-color: #f6f6f6;
@header-light-desc-color: #7c8087;
@header-light-bottom-border-color: #eee;
// top-menu
@top-menu-active-bg-color: var(--header-active-menu-bg-color);
// =================================
// ==============Menu============
// =================================
// let -menu
@sider-dark-bg-color: var(--sider-dark-bg-color);
@sider-dark-darken-bg-color: var(--sider-dark-darken-bg-color);
@sider-dark-lighten-1-bg-color: var(--sider-dark-lighten-1-bg-color);
@sider-dark-lighten-2-bg-color: var(--sider-dark-lighten-2-bg-color);
@sider-dark-lighten-3-bg-color: var(--sider-dark-lighten-3-bg-color);
// trigger
@trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);
@trigger-dark-bg-color: rgba(255, 255, 255, 0.1);
@trigger-light-bg-color: @white;
@trigger-light-hover-bg-color: rgba(255, 255, 255, 0.7);
// =================================
// ==============tree============
// =================================
// tree item hover background
@tree-hover-background-color: #f5f7fa;
// tree item hover font color
@tree-hover-font-color: #f5f7fa;
// =================================
// ==============link============
// =================================
@link-hover-color: @primary-color;
@link-active-color: darken(@primary-color, 10%);
// =================================
// ==============Text color-=============
// =================================
// Main text color
@text-color-base: @text-color;
// Label color
@text-color-call-out: #606266;
// Auxiliary information color-dark
@text-color-help-dark: #909399;
// Auxiliary information color-light color
@text-color-help-light: #c0c4cc;
// =================================
// ==============breadcrumb=========
// =================================
@breadcrumb-item-normal-color: #6e90a7;
// =================================
// ==============button=============
// =================================
@button-primary-color: @primary-color;
@button-primary-hover-color: darken(@primary-color, 5%);
@button-ghost-color: @primary-color;
@button-ghost-hover-color: lighten(@primary-color, 10%);
@button-ghost-hover-bg-color: #e1ebf6;
@button-success-color: @success-color;
@button-success-hover-color: darken(@success-color, 10%);
@button-warn-color: @warning-color;
@button-warn-hover-color: darken(@warning-color, 10%);
@button-error-color: @error-color;
@button-error-hover-color: darken(@error-color, 10%);
@button-cancel-color: @text-color-call-out;
@button-cancel-bg-color: @white;
@button-cancel-border-color: @border-color-shallow-dark;
// Mouse over
@button-cancel-hover-color: @primary-color;
@button-cancel-hover-bg-color: @white;
@button-cancel-hover-border-color: @primary-color;