earthnut 0.1.7 → 0.2.1

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 (17) hide show
  1. package/README.md +105 -2
  2. package/components/ripples/RipplesEle.d.ts +1 -1
  3. package/customHooks/use-xcn/index.d.ts +14 -0
  4. package/customHooks/useAnimationFrame.d.ts +36 -17
  5. package/customHooks/useInputIsComposing.d.ts +7 -7
  6. package/customHooks/useRipples/index.d.ts +2 -4
  7. package/customHooks/useTimeId.d.ts +0 -2
  8. package/index.cjs +1 -1
  9. package/index.d.ts +4 -1
  10. package/index.mjs +1 -1
  11. package/package.json +2 -2
  12. package/styles/common.css +295 -137
  13. package/styles/common.scss +59 -96
  14. package/styles/reset.scss +103 -0
  15. package/styles/respond.scss +54 -0
  16. package/styles/root.scss +94 -0
  17. package/styles/vars.scss +248 -0
package/styles/common.css CHANGED
@@ -1,163 +1,306 @@
1
1
  @charset "UTF-8";
2
2
  :root {
3
- --primary-white: #ffffff;
4
- --primary-black: #1b1b1b;
5
- --primary-dust: #6f6f6f;
6
- --primary-red: #d30038;
7
- --primary-green: #007936;
8
- --primary-blue: #0069c2;
9
- --primary-yellow: #746a00;
10
- --primary-super-yellow: #ffff00;
11
- --text-primary: #1b1b1b;
12
- --text-secondary: #4e4e4e;
13
- --text-invert: var(--primary-white);
14
- --text-muted: var(--primary-dust);
15
- --text-link: #0069c2;
16
- --text-visited: #551a8b;
17
- --text-hover: var(--primary-red);
18
- --text-visited: #551a8b;
19
- --text-active: #858585;
20
- --text-inactive: #9e9e9ea6;
21
- --background-primary: var(--primary-white);
22
- --background-tab-level-1: var(--primary-black);
23
- --background-tab-level-2: var(--primary-dust);
24
- --background-tab-transparent: #6666;
25
- --table-border-color: #000;
26
- --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
27
- --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
28
- --box-shadow: 1px 1px 12px #6666;
29
- --box-shadow-primary: 1px 1px 12px #6666;
30
- --box-shadow-primary-small: 1px 1px 3px #6666;
31
- --box-shadow-primary-large: 1px 1px 24px #6666;
3
+ --en-primary-white: $color-white;
4
+ --en-primary-black: #1b1b1b;
5
+ --en-primary-dust: #6f6f6f;
6
+ --en-primary-red: #d30038;
7
+ --en-primary-green: #007936;
8
+ --en-primary-blue: #0069c2;
9
+ --en-primary-yellow: #746a00;
10
+ --en-primary-super-yellow: #ffff00;
11
+ --en-text-primary: #1b1b1b;
12
+ --en-text-secondary: #4e4e4e;
13
+ --en-text-invert: var(--en-primary-white);
14
+ --en-text-muted: var(--en-primary-dust);
15
+ --en-text-link: #0069c2;
16
+ --en-text-visited: #551a8b;
17
+ --en-text-hover: var(--en-primary-red);
18
+ --en-text-visited: #551a8b;
19
+ --en-text-active: #858585;
20
+ --en-text-inactive: #9e9e9ea6;
21
+ --en-background-primary: var(--en-primary-white);
22
+ --en-background-tab-level-1: var(--en-primary-black);
23
+ --en-background-tab-level-2: var(--en-primary-dust);
24
+ --en-background-tab-transparent: #6666;
25
+ --en-table-border-color: #000;
26
+ --en-curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
27
+ --en-curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
28
+ --en-box-shadow: 1px 1px 12px #6666;
29
+ --en-box-shadow-primary: 1px 1px 12px #6666;
30
+ --en-box-shadow-primary-small: 1px 1px 3px #6666;
31
+ --en-box-shadow-primary-large: 1px 1px 24px #6666;
32
32
  color-scheme: light;
33
33
  }
34
34
 
35
35
  @media (prefers-color-scheme: light) {
36
36
  :root:not(.en-light):not(.en-dark) {
37
- --primary-white: #ffffff;
38
- --primary-black: #1b1b1b;
39
- --primary-dust: #6f6f6f;
40
- --primary-red: #d30038;
41
- --primary-green: #007936;
42
- --primary-blue: #0069c2;
43
- --primary-yellow: #746a00;
44
- --primary-super-yellow: #ffff00;
45
- --text-primary: #1b1b1b;
46
- --text-secondary: #4e4e4e;
47
- --text-invert: var(--primary-white);
48
- --text-muted: var(--primary-dust);
49
- --text-link: #0069c2;
50
- --text-visited: #551a8b;
51
- --text-hover: var(--primary-red);
52
- --text-visited: #551a8b;
53
- --text-active: #858585;
54
- --text-inactive: #9e9e9ea6;
55
- --background-primary: var(--primary-white);
56
- --background-tab-level-1: var(--primary-black);
57
- --background-tab-level-2: var(--primary-dust);
58
- --background-tab-transparent: #6666;
59
- --table-border-color: #000;
60
- --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
61
- --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
62
- --box-shadow: 1px 1px 12px #6666;
63
- --box-shadow-primary: 1px 1px 12px #6666;
64
- --box-shadow-primary-small: 1px 1px 3px #6666;
65
- --box-shadow-primary-large: 1px 1px 24px #6666;
37
+ --en-primary-white: $color-white;
38
+ --en-primary-black: #1b1b1b;
39
+ --en-primary-dust: #6f6f6f;
40
+ --en-primary-red: #d30038;
41
+ --en-primary-green: #007936;
42
+ --en-primary-blue: #0069c2;
43
+ --en-primary-yellow: #746a00;
44
+ --en-primary-super-yellow: #ffff00;
45
+ --en-text-primary: #1b1b1b;
46
+ --en-text-secondary: #4e4e4e;
47
+ --en-text-invert: var(--en-primary-white);
48
+ --en-text-muted: var(--en-primary-dust);
49
+ --en-text-link: #0069c2;
50
+ --en-text-visited: #551a8b;
51
+ --en-text-hover: var(--en-primary-red);
52
+ --en-text-visited: #551a8b;
53
+ --en-text-active: #858585;
54
+ --en-text-inactive: #9e9e9ea6;
55
+ --en-background-primary: var(--en-primary-white);
56
+ --en-background-tab-level-1: var(--en-primary-black);
57
+ --en-background-tab-level-2: var(--en-primary-dust);
58
+ --en-background-tab-transparent: #6666;
59
+ --en-table-border-color: #000;
60
+ --en-curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
61
+ --en-curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
62
+ --en-box-shadow: 1px 1px 12px #6666;
63
+ --en-box-shadow-primary: 1px 1px 12px #6666;
64
+ --en-box-shadow-primary-small: 1px 1px 3px #6666;
65
+ --en-box-shadow-primary-large: 1px 1px 24px #6666;
66
66
  color-scheme: light;
67
67
  }
68
68
  }
69
69
  @media (prefers-color-scheme: dark) {
70
70
  :root:not(.en-light):not(.en-dark) {
71
- --primary-white: #ffffff;
72
- --primary-black: #1b1b1b;
73
- --primary-dust: #858585;
74
- --primary-red: #ff97a0;
75
- --primary-green: #00d061;
76
- --primary-blue: #8cb4ff;
77
- --primary-yellow: #c7b700;
78
- --text-primary: #fff;
79
- --text-secondary: #cdcdcd;
80
- --text-invert: var(--primary-black);
81
- --text-muted: var(--primary-dust);
82
- --text-link: #8cb4ff;
83
- --text-visited: #ffadff;
84
- --text-hover: var(--primary-red);
85
- --text-active: #858585;
86
- --text-inactive: #cdcdcda6;
87
- --background-primary: var(--primary-black);
88
- --background-tab-level-1: #666666;
89
- --background-tab-level-2: var(--primary-dust);
90
- --background-tab-transparent: #6666;
91
- --table-border-color: #ff3663;
92
- --box-shadow: 1px 1px 12px #6666;
93
- --box-shadow-primary: 1px 1px 12px #6666;
94
- --box-shadow-primary-small: 1px 1px 3px #6666;
95
- --box-shadow-primary-large: 1px 1px 24px #6666;
71
+ --en-primary-white: #ffffff;
72
+ --en-primary-black: #1b1b1b;
73
+ --en-primary-dust: #858585;
74
+ --en-primary-red: #ff97a0;
75
+ --en-primary-green: #00d061;
76
+ --en-primary-blue: #8cb4ff;
77
+ --en-primary-yellow: #c7b700;
78
+ --en-text-primary: #fff;
79
+ --en-text-secondary: #cdcdcd;
80
+ --en-text-invert: var(--en-primary-black);
81
+ --en-text-muted: var(--en-primary-dust);
82
+ --en-text-link: #8cb4ff;
83
+ --en-text-visited: #ffadff;
84
+ --en-text-hover: var(--en-primary-red);
85
+ --en-text-active: #858585;
86
+ --en-text-inactive: #cdcdcda6;
87
+ --en-background-primary: var(--en-primary-black);
88
+ --en-background-tab-level-1: #666666;
89
+ --en-background-tab-level-2: var(--en-primary-dust);
90
+ --en-background-tab-transparent: #6666;
91
+ --en-table-border-color: #ff3663;
92
+ --en-box-shadow: 1px 1px 12px #6666;
93
+ --en-box-shadow-primary: 1px 1px 12px #6666;
94
+ --en-box-shadow-primary-small: 1px 1px 3px #6666;
95
+ --en-box-shadow-primary-large: 1px 1px 24px #6666;
96
96
  color-scheme: dark;
97
97
  }
98
98
  }
99
99
  .en-light {
100
- --primary-white: #ffffff;
101
- --primary-black: #1b1b1b;
102
- --primary-dust: #6f6f6f;
103
- --primary-red: #d30038;
104
- --primary-green: #007936;
105
- --primary-blue: #0069c2;
106
- --primary-yellow: #746a00;
107
- --primary-super-yellow: #ffff00;
108
- --text-primary: #1b1b1b;
109
- --text-secondary: #4e4e4e;
110
- --text-invert: var(--primary-white);
111
- --text-muted: var(--primary-dust);
112
- --text-link: #0069c2;
113
- --text-visited: #551a8b;
114
- --text-hover: var(--primary-red);
115
- --text-visited: #551a8b;
116
- --text-active: #858585;
117
- --text-inactive: #9e9e9ea6;
118
- --background-primary: var(--primary-white);
119
- --background-tab-level-1: var(--primary-black);
120
- --background-tab-level-2: var(--primary-dust);
121
- --background-tab-transparent: #6666;
122
- --table-border-color: #000;
123
- --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
124
- --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
125
- --box-shadow: 1px 1px 12px #6666;
126
- --box-shadow-primary: 1px 1px 12px #6666;
127
- --box-shadow-primary-small: 1px 1px 3px #6666;
128
- --box-shadow-primary-large: 1px 1px 24px #6666;
100
+ --en-primary-white: $color-white;
101
+ --en-primary-black: #1b1b1b;
102
+ --en-primary-dust: #6f6f6f;
103
+ --en-primary-red: #d30038;
104
+ --en-primary-green: #007936;
105
+ --en-primary-blue: #0069c2;
106
+ --en-primary-yellow: #746a00;
107
+ --en-primary-super-yellow: #ffff00;
108
+ --en-text-primary: #1b1b1b;
109
+ --en-text-secondary: #4e4e4e;
110
+ --en-text-invert: var(--en-primary-white);
111
+ --en-text-muted: var(--en-primary-dust);
112
+ --en-text-link: #0069c2;
113
+ --en-text-visited: #551a8b;
114
+ --en-text-hover: var(--en-primary-red);
115
+ --en-text-visited: #551a8b;
116
+ --en-text-active: #858585;
117
+ --en-text-inactive: #9e9e9ea6;
118
+ --en-background-primary: var(--en-primary-white);
119
+ --en-background-tab-level-1: var(--en-primary-black);
120
+ --en-background-tab-level-2: var(--en-primary-dust);
121
+ --en-background-tab-transparent: #6666;
122
+ --en-table-border-color: #000;
123
+ --en-curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
124
+ --en-curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
125
+ --en-box-shadow: 1px 1px 12px #6666;
126
+ --en-box-shadow-primary: 1px 1px 12px #6666;
127
+ --en-box-shadow-primary-small: 1px 1px 3px #6666;
128
+ --en-box-shadow-primary-large: 1px 1px 24px #6666;
129
129
  color-scheme: light;
130
130
  }
131
131
 
132
132
  .en-dark {
133
- --primary-white: #ffffff;
134
- --primary-black: #1b1b1b;
135
- --primary-dust: #858585;
136
- --primary-red: #ff97a0;
137
- --primary-green: #00d061;
138
- --primary-blue: #8cb4ff;
139
- --primary-yellow: #c7b700;
140
- --text-primary: #fff;
141
- --text-secondary: #cdcdcd;
142
- --text-invert: var(--primary-black);
143
- --text-muted: var(--primary-dust);
144
- --text-link: #8cb4ff;
145
- --text-visited: #ffadff;
146
- --text-hover: var(--primary-red);
147
- --text-active: #858585;
148
- --text-inactive: #cdcdcda6;
149
- --background-primary: var(--primary-black);
150
- --background-tab-level-1: #666666;
151
- --background-tab-level-2: var(--primary-dust);
152
- --background-tab-transparent: #6666;
153
- --table-border-color: #ff3663;
154
- --box-shadow: 1px 1px 12px #6666;
155
- --box-shadow-primary: 1px 1px 12px #6666;
156
- --box-shadow-primary-small: 1px 1px 3px #6666;
157
- --box-shadow-primary-large: 1px 1px 24px #6666;
133
+ --en-primary-white: #ffffff;
134
+ --en-primary-black: #1b1b1b;
135
+ --en-primary-dust: #858585;
136
+ --en-primary-red: #ff97a0;
137
+ --en-primary-green: #00d061;
138
+ --en-primary-blue: #8cb4ff;
139
+ --en-primary-yellow: #c7b700;
140
+ --en-text-primary: #fff;
141
+ --en-text-secondary: #cdcdcd;
142
+ --en-text-invert: var(--en-primary-black);
143
+ --en-text-muted: var(--en-primary-dust);
144
+ --en-text-link: #8cb4ff;
145
+ --en-text-visited: #ffadff;
146
+ --en-text-hover: var(--en-primary-red);
147
+ --en-text-active: #858585;
148
+ --en-text-inactive: #cdcdcda6;
149
+ --en-background-primary: var(--en-primary-black);
150
+ --en-background-tab-level-1: #666666;
151
+ --en-background-tab-level-2: var(--en-primary-dust);
152
+ --en-background-tab-transparent: #6666;
153
+ --en-table-border-color: #ff3663;
154
+ --en-box-shadow: 1px 1px 12px #6666;
155
+ --en-box-shadow-primary: 1px 1px 12px #6666;
156
+ --en-box-shadow-primary-small: 1px 1px 3px #6666;
157
+ --en-box-shadow-primary-large: 1px 1px 24px #6666;
158
158
  color-scheme: dark;
159
159
  }
160
160
 
161
+ /* 盒模型 规则 */
162
+ *,
163
+ *::before,
164
+ *::after {
165
+ box-sizing: border-box;
166
+ }
167
+
168
+ /* 移除默认的 margin 外边距 */
169
+ body,
170
+ h1,
171
+ h2,
172
+ h3,
173
+ h4,
174
+ p,
175
+ figure,
176
+ blockquote,
177
+ dl,
178
+ dd {
179
+ margin: 0;
180
+ }
181
+
182
+ ul,
183
+ ol {
184
+ list-style: none;
185
+ margin: 0;
186
+ padding: 0;
187
+ }
188
+
189
+ /* 设置根元素 html 默认样式 */
190
+ html {
191
+ scroll-behavior: smooth;
192
+ }
193
+
194
+ /* 设置默认的 body 元素的样式 */
195
+ body {
196
+ font-family: var(--en-font-body);
197
+ font-size: var(--en-base-font-size);
198
+ line-height: var(--en-font-content-line-height);
199
+ text-rendering: optimizeSpeed;
200
+ }
201
+
202
+ /* 链接元素没有 class 类时的展示 */
203
+ a:not([class]) {
204
+ text-decoration-skip-ink: auto;
205
+ }
206
+
207
+ a {
208
+ text-decoration: none;
209
+ }
210
+
211
+ /* 设置图片样式 */
212
+ img,
213
+ picture {
214
+ display: block;
215
+ max-width: 100%;
216
+ }
217
+
218
+ /* Fix Inter font bug: 'em' not slanted in Safari. See issue: https://github.com/mdn/yari/issues/7203 */
219
+ em {
220
+ font-variation-settings: "slnt" -10;
221
+ }
222
+
223
+ /* Inherit fonts for inputs and buttons */
224
+ input,
225
+ button,
226
+ textarea,
227
+ select {
228
+ font: inherit;
229
+ }
230
+
231
+ /* 自动填充的密码的背景色设置动画已取消背景色 */
232
+ input:-webkit-autofill,
233
+ input:-webkit-autofill:hover,
234
+ input:-webkit-autofill:focus,
235
+ input:-webkit-autofill:active {
236
+ transition-delay: 99999s;
237
+ transition: color 99999s ease-out, background-color 99999s ease-out;
238
+ -webkit-transition-delay: 99999s;
239
+ -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
240
+ -webkit-text-fill-color: var(--text-primary);
241
+ }
242
+
243
+ /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
244
+ @media (prefers-reduced-motion: reduce) {
245
+ html {
246
+ scroll-behavior: auto;
247
+ }
248
+ *,
249
+ *::before,
250
+ *::after {
251
+ animation-duration: 0.01ms !important;
252
+ animation-iteration-count: 1 !important;
253
+ scroll-behavior: auto !important;
254
+ transition-duration: 0.01ms !important;
255
+ }
256
+ }
257
+ .en-full-container {
258
+ width: 100%;
259
+ height: 100%;
260
+ }
261
+
262
+ .en-relative {
263
+ position: relative;
264
+ }
265
+
266
+ .en-flex,
267
+ .en-flex-row,
268
+ .en-flex-column,
269
+ .en-flex-row-reverse,
270
+ .en-flex-column-reverse {
271
+ display: flex;
272
+ flex-wrap: nowrap;
273
+ }
274
+
275
+ .en-flex,
276
+ .en-flex-row {
277
+ flex-direction: row;
278
+ }
279
+
280
+ .en-flex-row-reverse {
281
+ flex-direction: row-reverse;
282
+ }
283
+
284
+ .en-flex-column {
285
+ flex-direction: column;
286
+ }
287
+
288
+ .en-flex-column {
289
+ flex-direction: column-reverse;
290
+ }
291
+
292
+ .en-flex-wrap {
293
+ flex-wrap: wrap;
294
+ }
295
+
296
+ .en-flex-nowrap {
297
+ flex-wrap: nowrap;
298
+ }
299
+
300
+ .en-flex-warp-reverse {
301
+ flex-wrap: wrap-reverse;
302
+ }
303
+
161
304
  .en-center {
162
305
  position: absolute;
163
306
  left: 50%;
@@ -165,6 +308,10 @@
165
308
  transform: translate(-50%, -50%);
166
309
  }
167
310
 
311
+ .en-dust {
312
+ color: var(--primary-dust);
313
+ }
314
+
168
315
  /** 文本显示一行，超出点点点 */
169
316
  .en-text-in-one-line {
170
317
  white-space: nowrap;
@@ -240,6 +387,17 @@
240
387
  font-size: 0.6rem;
241
388
  }
242
389
 
390
+ .en-user-select-text {
391
+ -khtml-user-select: text;
392
+ -moz-user-select: text;
393
+ -ms-user-select: text;
394
+ user-select: text;
395
+ }
396
+
397
+ .en-cursor-pointer {
398
+ cursor: pointer;
399
+ }
400
+
243
401
  @keyframes loading {
244
402
  100%, 0% {
245
403
  background-size: 10% 10%, 10% 10%, 10% 10%, 10% 10%;
package/styles/common.scss CHANGED
@@ -1,94 +1,52 @@
1
- @mixin light {
2
- // 基色
3
- --primary-white: #ffffff;
4
- --primary-black: #1b1b1b;
5
- --primary-dust: #6f6f6f;
6
- --primary-red: #d30038;
7
- --primary-green: #007936;
8
- --primary-blue: #0069c2;
9
- --primary-yellow: #746a00;
10
- --primary-super-yellow: #ffff00;
11
- // 文本色
12
- --text-primary: #1b1b1b;
13
- --text-secondary: #4e4e4e;
14
- --text-invert: var(--primary-white); // 文本反转色
15
- --text-muted: var(--primary-dust); // 温和文本色
16
- // 链接文本色
17
- --text-link: #0069c2;
18
- --text-visited: #551a8b;
19
- --text-hover: var(--primary-red);
20
- --text-visited: #551a8b;
21
- --text-active: #858585;
22
- --text-inactive: #9e9e9ea6; // 无效链接色
23
- // 背景色
24
- --background-primary: var(--primary-white);
25
- --background-tab-level-1: var(--primary-black);
26
- --background-tab-level-2: var(--primary-dust);
27
- --background-tab-transparent: #6666;
28
- --table-border-color: #000;
29
- --curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
30
- --curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
31
- --box-shadow: 1px 1px 12px #6666;
32
- --box-shadow-primary: 1px 1px 12px #6666;
33
- --box-shadow-primary-small: 1px 1px 3px #6666;
34
- --box-shadow-primary-large: 1px 1px 24px #6666;
35
- color-scheme: light;
1
+ @use "./root";
2
+ @use "./reset.scss";
3
+ @use "./respond" as rp;
4
+
5
+ .en-full-container {
6
+ width: 100%;
7
+ height: 100%;
36
8
  }
37
9
 
38
- @mixin dark {
39
- // 基色
40
- --primary-white: #ffffff;
41
- --primary-black: #1b1b1b;
42
- --primary-dust: #858585;
43
- --primary-red: #ff97a0;
44
- --primary-green: #00d061;
45
- --primary-blue: #8cb4ff;
46
- --primary-yellow: #c7b700;
47
- // 文本色
48
- --text-primary: #fff;
49
- --text-secondary: #cdcdcd;
50
- --text-invert: var(--primary-black); // 文本反转色
51
- --text-muted: var(--primary-dust); // 温和文本色
52
- // 普通链接文本色
53
- --text-link: #8cb4ff;
54
- --text-visited: #ffadff;
55
- --text-hover: var(--primary-red);
56
- --text-active: #858585;
57
- --text-inactive: #cdcdcda6; // 无效链接色
58
- // 背景色
59
- --background-primary: var(--primary-black);
60
- --background-tab-level-1: #666666;
61
- --background-tab-level-2: var(--primary-dust);
62
- --background-tab-transparent: #6666;
63
- --table-border-color: #ff3663;
64
- --box-shadow: 1px 1px 12px #6666;
65
- --box-shadow-primary: 1px 1px 12px #6666;
66
- --box-shadow-primary-small: 1px 1px 3px #6666;
67
- --box-shadow-primary-large: 1px 1px 24px #6666;
68
- color-scheme: dark;
10
+ .en-relative {
11
+ position: relative;
69
12
  }
70
13
 
71
- :root {
72
- @include light();
14
+ .en-flex,
15
+ .en-flex-row,
16
+ .en-flex-column,
17
+ .en-flex-row-reverse,
18
+ .en-flex-column-reverse {
19
+ display: flex;
20
+ flex-wrap: nowrap;
73
21
  }
74
22
 
75
- @media (prefers-color-scheme: light) {
76
- :root:not(.en-light):not(.en-dark) {
77
- @include light();
78
- }
23
+ .en-flex,
24
+ .en-flex-row {
25
+ flex-direction: row;
79
26
  }
80
- @media (prefers-color-scheme: dark) {
81
- :root:not(.en-light):not(.en-dark) {
82
- @include dark();
83
- }
27
+
28
+ .en-flex-row-reverse {
29
+ flex-direction: row-reverse;
30
+ }
31
+
32
+ .en-flex-column {
33
+ flex-direction: column;
34
+ }
35
+
36
+ .en-flex-column {
37
+ flex-direction: column-reverse;
38
+ }
39
+
40
+ .en-flex-wrap {
41
+ flex-wrap: wrap;
84
42
  }
85
43
 
86
- .en-light {
87
- @include light();
44
+ .en-flex-nowrap {
45
+ flex-wrap: nowrap;
88
46
  }
89
47
 
90
- .en-dark {
91
- @include dark();
48
+ .en-flex-warp-reverse {
49
+ flex-wrap: wrap-reverse;
92
50
  }
93
51
 
94
52
  .en-center {
@@ -98,6 +56,10 @@
98
56
  transform: translate(-50%, -50%);
99
57
  }
100
58
 
59
+ .en-dust {
60
+ color: var(--primary-dust);
61
+ }
62
+
101
63
  /** 文本显示一行，超出点点点 */
102
64
  .en-text-in-one-line {
103
65
  white-space: nowrap;
@@ -178,6 +140,19 @@
178
140
  .en-text-small {
179
141
  font-size: 0.6rem;
180
142
  }
143
+
144
+ // 用户可操作
145
+ .en-user-select-text {
146
+ -khtml-user-select: text;
147
+ -moz-user-select: text;
148
+ -ms-user-select: text;
149
+ user-select: text;
150
+ }
151
+
152
+ .en-cursor-pointer {
153
+ cursor: pointer;
154
+ }
155
+
181
156
  @keyframes loading {
182
157
  // 45 - 25 * Math.sin((Math.PI * 5) / 12)
183
158
  // 位置公式 35 - 25 * Math.cos((Math.PI * 5) / 12)
@@ -312,22 +287,10 @@
312
287
  @for $i from 18 through 33 {
313
288
  #{calc($i / 50 * 100%)} {
314
289
  background-position:
315
- #{(50 - (25 * cos(($Pi * ($i - 10)) / 12))) *
316
- 1%}
317
- #{(45 - 25 * sin(($Pi * ($i - 10)) / 12)) *
318
- 1%},
319
- #{(50 - (25 * cos(($Pi * ($i - 13)) / 12))) *
320
- 1%}
321
- #{(45 - 25 * sin(($Pi * ($i - 13)) / 12)) *
322
- 1%},
323
- #{(50 - (25 * cos(($Pi * ($i - 15)) / 12))) *
324
- 1%}
325
- #{(45 - 25 * sin(($Pi * ($i - 15)) / 12)) *
326
- 1%},
327
- #{(50 - (25 * cos(($Pi * ($i - 17)) / 12))) *
328
- 1%}
329
- #{(45 - 25 * sin(($Pi * ($i - 17)) / 12)) *
330
- 1%};
290
+ #{(50 - (25 * cos(($Pi * ($i - 10)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 10)) / 12)) * 1%},
291
+ #{(50 - (25 * cos(($Pi * ($i - 13)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 13)) / 12)) * 1%},
292
+ #{(50 - (25 * cos(($Pi * ($i - 15)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 15)) / 12)) * 1%},
293
+ #{(50 - (25 * cos(($Pi * ($i - 17)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 17)) / 12)) * 1%};
331
294
  }
332
295
  }
333
296