@aifuxi/semi-theme-default 1.2.0 → 2.0.0

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 (92) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +10 -1
  3. package/dist/SBOM.spdx.json +4 -4
  4. package/dist/ai-chat-dialogue.css +2 -4911
  5. package/dist/ai-chat-input.css +1 -3363
  6. package/dist/anchor.css +1 -1517
  7. package/dist/audio-player.css +1 -699
  8. package/dist/auto-complete.css +1 -1913
  9. package/dist/avatar.css +1 -780
  10. package/dist/back-top.css +1 -1462
  11. package/dist/badge.css +1 -699
  12. package/dist/banner.css +1 -1775
  13. package/dist/base.css +737 -0
  14. package/dist/breadcrumb.css +1 -1554
  15. package/dist/button.css +1 -949
  16. package/dist/calendar.css +1 -1669
  17. package/dist/card.css +1 -1644
  18. package/dist/carousel.css +1 -780
  19. package/dist/cascader.css +1 -3154
  20. package/dist/chat.css +1 -4510
  21. package/dist/checkbox.css +1 -743
  22. package/dist/code-highlight.css +1 -699
  23. package/dist/collapse.css +1 -740
  24. package/dist/collapsible.css +1 -736
  25. package/dist/color-picker.css +1 -3739
  26. package/dist/config-provider.css +1 -698
  27. package/dist/cropper.css +1 -699
  28. package/dist/date-picker.css +2 -2824
  29. package/dist/descriptions.css +1 -736
  30. package/dist/divider.css +1 -699
  31. package/dist/drag-move.css +1 -698
  32. package/dist/dropdown.css +1 -1008
  33. package/dist/empty.css +1 -1050
  34. package/dist/feedback.css +1 -3957
  35. package/dist/float-button.css +2 -873
  36. package/dist/form.css +212 -15984
  37. package/dist/grid.css +1 -699
  38. package/dist/highlight.css +1 -699
  39. package/dist/hot-keys.css +1 -699
  40. package/dist/icon-button.css +1 -1293
  41. package/dist/icon.css +1 -736
  42. package/dist/image.css +1 -1512
  43. package/dist/index.css +2 -1
  44. package/dist/input-number.css +1 -1391
  45. package/dist/input.css +1 -1331
  46. package/dist/json-viewer.css +2 -1904
  47. package/dist/layout.css +1 -699
  48. package/dist/list.css +1 -6143
  49. package/dist/locale.css +1 -698
  50. package/dist/lottie.css +1 -698
  51. package/dist/markdown-render.css +1 -2331
  52. package/dist/modal.css +1 -1825
  53. package/dist/navigation.css +2 -1826
  54. package/dist/notification.css +1 -1424
  55. package/dist/overflow-list.css +1 -699
  56. package/dist/pagination.css +1 -3226
  57. package/dist/pin-code.css +1 -1347
  58. package/dist/popconfirm.css +1 -1669
  59. package/dist/popover.css +1 -964
  60. package/dist/progress.css +1 -736
  61. package/dist/radio.css +1 -743
  62. package/dist/rating.css +1 -743
  63. package/dist/resizable.css +1 -743
  64. package/dist/scroll-list.css +1 -736
  65. package/dist/select.css +1 -2516
  66. package/dist/shared/foundation-input-textarea.css +304 -0
  67. package/dist/shared/foundation-portal-portal.css +15 -0
  68. package/dist/side-sheet.css +1 -1474
  69. package/dist/sidebar.css +1 -3661
  70. package/dist/skeleton.css +1 -736
  71. package/dist/slider.css +1 -964
  72. package/dist/space.css +1 -699
  73. package/dist/spin.css +1 -699
  74. package/dist/steps.css +1 -6118
  75. package/dist/style-dependencies.json +1647 -0
  76. package/dist/switch.css +1 -805
  77. package/dist/table.css +1 -4365
  78. package/dist/tabs.css +1 -1674
  79. package/dist/tag-input.css +1 -2784
  80. package/dist/tag.css +1 -1902
  81. package/dist/time-picker.css +1 -2035
  82. package/dist/timeline.css +1 -699
  83. package/dist/toast.css +1 -1424
  84. package/dist/tooltip.css +1 -749
  85. package/dist/transfer.css +1 -3256
  86. package/dist/tree-select.css +1 -3602
  87. package/dist/tree.css +1 -1852
  88. package/dist/typography.css +1 -1166
  89. package/dist/upload.css +1 -2592
  90. package/dist/user-guide.css +1 -2272
  91. package/dist/video-player.css +1 -885
  92. package/package.json +5 -3
package/dist/chat.css CHANGED
@@ -1,4471 +1,6 @@
1
1
  /* shadow */
2
2
  /* sizing */
3
3
  /* spacing */
4
- body, body .semi-always-light, :host, :host .semi-always-light {
5
- --semi-amber-0: 254,251,235;
6
- --semi-amber-1: 252,245,206;
7
- --semi-amber-2: 249,232,158;
8
- --semi-amber-3: 246,216,111;
9
- --semi-amber-4: 243,198,65;
10
- --semi-amber-5: 240,177,20;
11
- --semi-amber-6: 200,138,15;
12
- --semi-amber-7: 160,102,10;
13
- --semi-amber-8: 120,70,6;
14
- --semi-amber-9: 80,43,3;
15
- --semi-black: 0,0,0;
16
- --semi-blue-0: 234,245,255;
17
- --semi-blue-1: 203,231,254;
18
- --semi-blue-2: 152,205,253;
19
- --semi-blue-3: 101,178,252;
20
- --semi-blue-4: 50,149,251;
21
- --semi-blue-5: 0,100,250;
22
- --semi-blue-6: 0,98,214;
23
- --semi-blue-7: 0,79,179;
24
- --semi-blue-8: 0,61,143;
25
- --semi-blue-9: 0,44,107;
26
- --semi-cyan-0: 229,247,248;
27
- --semi-cyan-1: 194,239,240;
28
- --semi-cyan-2: 138,221,226;
29
- --semi-cyan-3: 88,203,211;
30
- --semi-cyan-4: 44,184,197;
31
- --semi-cyan-5: 5,164,182;
32
- --semi-cyan-6: 3,134,152;
33
- --semi-cyan-7: 1,105,121;
34
- --semi-cyan-8: 0,77,91;
35
- --semi-cyan-9: 0,50,61;
36
- --semi-green-0: 236,247,236;
37
- --semi-green-1: 208,240,209;
38
- --semi-green-2: 164,224,167;
39
- --semi-green-3: 125,209,130;
40
- --semi-green-4: 90,194,98;
41
- --semi-green-5: 59,179,70;
42
- --semi-green-6: 48,149,59;
43
- --semi-green-7: 37,119,47;
44
- --semi-green-8: 27,89,36;
45
- --semi-green-9: 17,60,24;
46
- --semi-grey-0: 249,249,249;
47
- --semi-grey-1: 230,232,234;
48
- --semi-grey-2: 198,202,205;
49
- --semi-grey-3: 167,171,176;
50
- --semi-grey-4: 136,141,146;
51
- --semi-grey-5: 107,112,117;
52
- --semi-grey-6: 85,91,97;
53
- --semi-grey-7: 65,70,76;
54
- --semi-grey-8: 46,50,56;
55
- --semi-grey-9: 28,31,35;
56
- --semi-indigo-0: 236,239,248;
57
- --semi-indigo-1: 209,216,240;
58
- --semi-indigo-2: 167,179,225;
59
- --semi-indigo-3: 128,144,211;
60
- --semi-indigo-4: 94,111,196;
61
- --semi-indigo-5: 63,81,181;
62
- --semi-indigo-6: 51,66,161;
63
- --semi-indigo-7: 40,52,140;
64
- --semi-indigo-8: 31,40,120;
65
- --semi-indigo-9: 23,29,99;
66
- --semi-light-blue-0: 233,247,253;
67
- --semi-light-blue-1: 201,236,252;
68
- --semi-light-blue-2: 149,216,248;
69
- --semi-light-blue-3: 98,195,245;
70
- --semi-light-blue-4: 48,172,241;
71
- --semi-light-blue-5: 0,149,238;
72
- --semi-light-blue-6: 0,123,202;
73
- --semi-light-blue-7: 0,99,167;
74
- --semi-light-blue-8: 0,75,131;
75
- --semi-light-blue-9: 0,53,95;
76
- --semi-light-green-0: 243,248,236;
77
- --semi-light-green-1: 227,240,208;
78
- --semi-light-green-2: 200,226,165;
79
- --semi-light-green-3: 173,211,126;
80
- --semi-light-green-4: 147,197,91;
81
- --semi-light-green-5: 123,182,60;
82
- --semi-light-green-6: 100,152,48;
83
- --semi-light-green-7: 78,121,38;
84
- --semi-light-green-8: 57,91,27;
85
- --semi-light-green-9: 37,61,18;
86
- --semi-lime-0: 242,250,230;
87
- --semi-lime-1: 227,246,197;
88
- --semi-lime-2: 203,237,142;
89
- --semi-lime-3: 183,227,91;
90
- --semi-lime-4: 167,218,44;
91
- --semi-lime-5: 155,209,0;
92
- --semi-lime-6: 126,174,0;
93
- --semi-lime-7: 99,139,0;
94
- --semi-lime-8: 72,104,0;
95
- --semi-lime-9: 47,70,0;
96
- --semi-orange-0: 255,248,234;
97
- --semi-orange-1: 254,238,204;
98
- --semi-orange-2: 254,217,152;
99
- --semi-orange-3: 253,193,101;
100
- --semi-orange-4: 253,166,51;
101
- --semi-orange-5: 252,136,0;
102
- --semi-orange-6: 210,103,0;
103
- --semi-orange-7: 168,74,0;
104
- --semi-orange-8: 126,49,0;
105
- --semi-orange-9: 84,29,0;
106
- --semi-pink-0: 253,236,239;
107
- --semi-pink-1: 251,207,216;
108
- --semi-pink-2: 246,160,181;
109
- --semi-pink-3: 242,115,150;
110
- --semi-pink-4: 237,72,123;
111
- --semi-pink-5: 233,30,99;
112
- --semi-pink-6: 197,19,86;
113
- --semi-pink-7: 162,11,72;
114
- --semi-pink-8: 126,5,58;
115
- --semi-pink-9: 90,1,43;
116
- --semi-purple-0: 247,233,247;
117
- --semi-purple-1: 239,202,240;
118
- --semi-purple-2: 221,155,224;
119
- --semi-purple-3: 201,111,209;
120
- --semi-purple-4: 180,73,194;
121
- --semi-purple-5: 158,40,179;
122
- --semi-purple-6: 135,30,158;
123
- --semi-purple-7: 113,22,138;
124
- --semi-purple-8: 92,15,117;
125
- --semi-purple-9: 73,10,97;
126
- --semi-red-0: 254,242,237;
127
- --semi-red-1: 254,221,210;
128
- --semi-red-2: 253,183,165;
129
- --semi-red-3: 251,144,120;
130
- --semi-red-4: 250,102,76;
131
- --semi-red-5: 249,57,32;
132
- --semi-red-6: 213,37,21;
133
- --semi-red-7: 178,20,12;
134
- --semi-red-8: 142,8,5;
135
- --semi-red-9: 106,1,3;
136
- --semi-teal-0: 228,247,244;
137
- --semi-teal-1: 192,240,232;
138
- --semi-teal-2: 135,224,211;
139
- --semi-teal-3: 84,209,193;
140
- --semi-teal-4: 39,194,176;
141
- --semi-teal-5: 0,179,161;
142
- --semi-teal-6: 0,149,137;
143
- --semi-teal-7: 0,119,111;
144
- --semi-teal-8: 0,89,85;
145
- --semi-teal-9: 0,60,58;
146
- --semi-violet-0: 243,237,249;
147
- --semi-violet-1: 226,209,244;
148
- --semi-violet-2: 196,167,233;
149
- --semi-violet-3: 166,127,221;
150
- --semi-violet-4: 136,91,210;
151
- --semi-violet-5: 106,58,199;
152
- --semi-violet-6: 87,47,179;
153
- --semi-violet-7: 70,37,158;
154
- --semi-violet-8: 54,28,138;
155
- --semi-violet-9: 40,20,117;
156
- --semi-white: 255,255,255;
157
- --semi-yellow-0: 255,253,234;
158
- --semi-yellow-1: 254,251,203;
159
- --semi-yellow-2: 253,243,152;
160
- --semi-yellow-3: 252,232,101;
161
- --semi-yellow-4: 251,218,50;
162
- --semi-yellow-5: 250,200,0;
163
- --semi-yellow-6: 208,170,0;
164
- --semi-yellow-7: 167,139,0;
165
- --semi-yellow-8: 125,106,0;
166
- --semi-yellow-9: 83,72,0;
167
- --semi-ai-purple-0: 248,237,255;
168
- --semi-ai-purple-1: 242,218,255;
169
- --semi-ai-purple-2: 227,181,255;
170
- --semi-ai-purple-3: 209,145,255;
171
- --semi-ai-purple-4: 189,108,255;
172
- --semi-ai-purple-5: 166,71,255;
173
- --semi-ai-purple-6: 134,54,219;
174
- --semi-ai-purple-7: 105,40,184;
175
- --semi-ai-purple-8: 78,28,148;
176
- --semi-ai-purple-9: 54,18,112;
177
- --semi-ai-general-0-3: 239,247,255;
178
- --semi-ai-general-0-2: 244,244,255;
179
- --semi-ai-general-0-1: 248,237,255;
180
- --semi-ai-general-0-0: 255,242,255;
181
- --semi-ai-general-1-3: 213,235,255;
182
- --semi-ai-general-1-2: 223,224,255;
183
- --semi-ai-general-1-1: 242,218,255;
184
- --semi-ai-general-1-0: 255,218,254;
185
- --semi-ai-general-2-3: 171,213,255;
186
- --semi-ai-general-2-2: 193,192,255;
187
- --semi-ai-general-2-1: 227,181,255;
188
- --semi-ai-general-2-0: 254,181,255;
189
- --semi-ai-general-3-3: 130,190,255;
190
- --semi-ai-general-3-2: 163,160,255;
191
- --semi-ai-general-3-1: 209,145,255;
192
- --semi-ai-general-3-0: 249,143,255;
193
- --semi-ai-general-4-3: 88,166,255;
194
- --semi-ai-general-4-2: 134,129,255;
195
- --semi-ai-general-4-1: 189,108,255;
196
- --semi-ai-general-4-0: 242,106,255;
197
- --semi-ai-general-5-3: 46,140,255;
198
- --semi-ai-general-5-2: 107,97,255;
199
- --semi-ai-general-5-1: 166,71,255;
200
- --semi-ai-general-5-0: 233,69,255;
201
- --semi-ai-general-6-3: 33,114,219;
202
- --semi-ai-general-6-2: 88,77,219;
203
- --semi-ai-general-6-1: 134,54,219;
204
- --semi-ai-general-6-0: 194,53,219;
205
- --semi-ai-general-7-3: 22,89,184;
206
- --semi-ai-general-7-2: 71,59,184;
207
- --semi-ai-general-7-1: 105,40,184;
208
- --semi-ai-general-7-0: 157,39,184;
209
- --semi-ai-general-8-3: 13,67,148;
210
- --semi-ai-general-8-2: 55,43,148;
211
- --semi-ai-general-8-1: 78,28,148;
212
- --semi-ai-general-8-0: 121,27,148;
213
- --semi-ai-general-9-3: 7,47,112;
214
- --semi-ai-general-9-2: 40,29,112;
215
- --semi-ai-general-9-1: 54,18,112;
216
- --semi-ai-general-9-0: 88,17,112;
217
- --semi-ai-general-0: linear-gradient(278deg, rgba(var(--semi-ai-general-0-0)) 0%, rgba(var(--semi-ai-general-0-1)) 30%, rgba(var(--semi-ai-general-0-2)) 60%, rgba(var(--semi-ai-general-0-3)) 100%);
218
- --semi-ai-general-1: linear-gradient(278deg, rgba(var(--semi-ai-general-1-0)) 0%, rgba(var(--semi-ai-general-1-1)) 30%, rgba(var(--semi-ai-general-1-2)) 60%, rgba(var(--semi-ai-general-1-3)) 100%);
219
- --semi-ai-general-2: linear-gradient(278deg, rgba(var(--semi-ai-general-2-0)) 0%, rgba(var(--semi-ai-general-2-1)) 30%, rgba(var(--semi-ai-general-2-2)) 60%, rgba(var(--semi-ai-general-2-3)) 100%);
220
- --semi-ai-general-3: linear-gradient(278deg, rgba(var(--semi-ai-general-3-0)) 0%, rgba(var(--semi-ai-general-3-1)) 30%, rgba(var(--semi-ai-general-3-2)) 60%, rgba(var(--semi-ai-general-3-3)) 100%);
221
- --semi-ai-general-4: linear-gradient(278deg, rgba(var(--semi-ai-general-4-0)) 0%, rgba(var(--semi-ai-general-4-1)) 30%, rgba(var(--semi-ai-general-4-2)) 60%, rgba(var(--semi-ai-general-4-3)) 100%);
222
- --semi-ai-general-5: linear-gradient(278deg, rgba(var(--semi-ai-general-5-0)) 0%, rgba(var(--semi-ai-general-5-1)) 30%, rgba(var(--semi-ai-general-5-2)) 60%, rgba(var(--semi-ai-general-5-3)) 100%);
223
- --semi-ai-general-6: linear-gradient(278deg, rgba(var(--semi-ai-general-6-0)) 0%, rgba(var(--semi-ai-general-6-1)) 30%, rgba(var(--semi-ai-general-6-2)) 60%, rgba(var(--semi-ai-general-6-3)) 100%);
224
- --semi-ai-general-7: linear-gradient(278deg, rgba(var(--semi-ai-general-7-0)) 0%, rgba(var(--semi-ai-general-7-1)) 30%, rgba(var(--semi-ai-general-7-2)) 60%, rgba(var(--semi-ai-general-7-3)) 100%);
225
- --semi-ai-general-8: linear-gradient(278deg, rgba(var(--semi-ai-general-8-0)) 0%, rgba(var(--semi-ai-general-8-1)) 30%, rgba(var(--semi-ai-general-8-2)) 60%, rgba(var(--semi-ai-general-8-3)) 100%);
226
- --semi-ai-general-9: linear-gradient(278deg, rgba(var(--semi-ai-general-9-0)) 0%, rgba(var(--semi-ai-general-9-1)) 30%, rgba(var(--semi-ai-general-9-2)) 60%, rgba(var(--semi-ai-general-9-3)) 100%);
227
- }
228
-
229
- body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
230
- --semi-red-0: 108,9,11;
231
- --semi-red-1: 144,17,16;
232
- --semi-red-2: 180,32,25;
233
- --semi-red-3: 215,51,36;
234
- --semi-red-4: 251,73,50;
235
- --semi-red-5: 252,114,90;
236
- --semi-red-6: 253,153,131;
237
- --semi-red-7: 253,190,172;
238
- --semi-red-8: 254,224,213;
239
- --semi-red-9: 255,243,239;
240
- --semi-pink-0: 92,7,48;
241
- --semi-pink-1: 128,14,65;
242
- --semi-pink-2: 164,23,81;
243
- --semi-pink-3: 199,34,97;
244
- --semi-pink-4: 235,47,113;
245
- --semi-pink-5: 239,86,134;
246
- --semi-pink-6: 243,126,159;
247
- --semi-pink-7: 247,168,188;
248
- --semi-pink-8: 251,211,220;
249
- --semi-pink-9: 253,238,241;
250
- --semi-purple-0: 74,16,97;
251
- --semi-purple-1: 94,23,118;
252
- --semi-purple-2: 115,31,138;
253
- --semi-purple-3: 137,40,159;
254
- --semi-purple-4: 160,51,179;
255
- --semi-purple-5: 181,83,194;
256
- --semi-purple-6: 202,120,209;
257
- --semi-purple-7: 221,160,225;
258
- --semi-purple-8: 239,206,240;
259
- --semi-purple-9: 247,235,247;
260
- --semi-violet-0: 64,27,119;
261
- --semi-violet-1: 76,36,140;
262
- --semi-violet-2: 88,46,160;
263
- --semi-violet-3: 100,57,181;
264
- --semi-violet-4: 114,70,201;
265
- --semi-violet-5: 136,101,212;
266
- --semi-violet-6: 162,136,223;
267
- --semi-violet-7: 190,173,233;
268
- --semi-violet-8: 221,212,244;
269
- --semi-violet-9: 241,238,250;
270
- --semi-indigo-0: 23,30,101;
271
- --semi-indigo-1: 32,41,122;
272
- --semi-indigo-2: 41,54,142;
273
- --semi-indigo-3: 52,68,163;
274
- --semi-indigo-4: 64,83,183;
275
- --semi-indigo-5: 95,113,197;
276
- --semi-indigo-6: 129,145,212;
277
- --semi-indigo-7: 167,180,226;
278
- --semi-indigo-8: 209,216,241;
279
- --semi-indigo-9: 237,239,248;
280
- --semi-blue-0: 5,49,112;
281
- --semi-blue-1: 10,70,148;
282
- --semi-blue-2: 19,92,184;
283
- --semi-blue-3: 29,117,219;
284
- --semi-blue-4: 41,144,255;
285
- --semi-blue-5: 84,169,255;
286
- --semi-blue-6: 127,193,255;
287
- --semi-blue-7: 169,215,255;
288
- --semi-blue-8: 212,236,255;
289
- --semi-blue-9: 239,248,255;
290
- --semi-light-blue-0: 0,55,97;
291
- --semi-light-blue-1: 0,77,133;
292
- --semi-light-blue-2: 3,102,169;
293
- --semi-light-blue-3: 10,129,204;
294
- --semi-light-blue-4: 19,159,240;
295
- --semi-light-blue-5: 64,180,243;
296
- --semi-light-blue-6: 110,200,246;
297
- --semi-light-blue-7: 157,220,249;
298
- --semi-light-blue-8: 206,238,252;
299
- --semi-light-blue-9: 235,248,254;
300
- --semi-cyan-0: 4,52,61;
301
- --semi-cyan-1: 7,79,92;
302
- --semi-cyan-2: 10,108,123;
303
- --semi-cyan-3: 14,137,153;
304
- --semi-cyan-4: 19,168,184;
305
- --semi-cyan-5: 56,187,198;
306
- --semi-cyan-6: 98,205,212;
307
- --semi-cyan-7: 145,223,227;
308
- --semi-cyan-8: 198,239,241;
309
- --semi-cyan-9: 231,247,248;
310
- --semi-teal-0: 2,60,57;
311
- --semi-teal-1: 4,90,85;
312
- --semi-teal-2: 7,119,111;
313
- --semi-teal-3: 10,149,136;
314
- --semi-teal-4: 14,179,161;
315
- --semi-teal-5: 51,194,176;
316
- --semi-teal-6: 94,209,193;
317
- --semi-teal-7: 142,225,211;
318
- --semi-teal-8: 196,240,232;
319
- --semi-teal-9: 230,247,244;
320
- --semi-green-0: 18,60,25;
321
- --semi-green-1: 28,90,37;
322
- --semi-green-2: 39,119,49;
323
- --semi-green-3: 50,149,61;
324
- --semi-green-4: 62,179,73;
325
- --semi-green-5: 93,194,100;
326
- --semi-green-6: 127,209,132;
327
- --semi-green-7: 166,225,168;
328
- --semi-green-8: 208,240,209;
329
- --semi-green-9: 236,247,236;
330
- --semi-light-green-0: 38,61,19;
331
- --semi-light-green-1: 59,92,29;
332
- --semi-light-green-2: 81,123,40;
333
- --semi-light-green-3: 103,153,52;
334
- --semi-light-green-4: 127,184,64;
335
- --semi-light-green-5: 151,198,95;
336
- --semi-light-green-6: 176,212,129;
337
- --semi-light-green-7: 201,227,167;
338
- --semi-light-green-8: 228,241,209;
339
- --semi-light-green-9: 243,248,237;
340
- --semi-lime-0: 49,70,3;
341
- --semi-lime-1: 75,105,5;
342
- --semi-lime-2: 103,141,9;
343
- --semi-lime-3: 132,176,12;
344
- --semi-lime-4: 162,211,17;
345
- --semi-lime-5: 174,220,58;
346
- --semi-lime-6: 189,229,102;
347
- --semi-lime-7: 207,237,150;
348
- --semi-lime-8: 229,246,201;
349
- --semi-lime-9: 243,251,233;
350
- --semi-yellow-0: 84,73,3;
351
- --semi-yellow-1: 126,108,6;
352
- --semi-yellow-2: 168,142,10;
353
- --semi-yellow-3: 210,175,15;
354
- --semi-yellow-4: 252,206,20;
355
- --semi-yellow-5: 253,222,67;
356
- --semi-yellow-6: 253,235,113;
357
- --semi-yellow-7: 254,245,160;
358
- --semi-yellow-8: 254,251,208;
359
- --semi-yellow-9: 255,254,236;
360
- --semi-amber-0: 81,46,9;
361
- --semi-amber-1: 121,75,15;
362
- --semi-amber-2: 161,107,22;
363
- --semi-amber-3: 202,143,30;
364
- --semi-amber-4: 242,183,38;
365
- --semi-amber-5: 245,202,80;
366
- --semi-amber-6: 247,219,122;
367
- --semi-amber-7: 250,234,166;
368
- --semi-amber-8: 252,246,210;
369
- --semi-amber-9: 254,251,237;
370
- --semi-orange-0: 85,31,3;
371
- --semi-orange-1: 128,53,6;
372
- --semi-orange-2: 170,80,10;
373
- --semi-orange-3: 213,111,15;
374
- --semi-orange-4: 255,146,20;
375
- --semi-orange-5: 255,174,67;
376
- --semi-orange-6: 255,199,114;
377
- --semi-orange-7: 255,221,161;
378
- --semi-orange-8: 255,239,208;
379
- --semi-orange-9: 255,249,237;
380
- --semi-grey-0: 28,31,35;
381
- --semi-grey-1: 46,50,56;
382
- --semi-grey-2: 65,70,76;
383
- --semi-grey-3: 85,91,97;
384
- --semi-grey-4: 107,112,117;
385
- --semi-grey-5: 136,141,146;
386
- --semi-grey-6: 167,171,176;
387
- --semi-grey-7: 198,202,205;
388
- --semi-grey-8: 230,232,234;
389
- --semi-grey-9: 249,249,249;
390
- --semi-white: 255, 255, 255;
391
- --semi-black: 0, 0, 0;
392
- --semi-ai-purple-0: 58,23,112;
393
- --semi-ai-purple-1: 83,35,148;
394
- --semi-ai-purple-2: 111,49,184;
395
- --semi-ai-purple-3: 141,65,219;
396
- --semi-ai-purple-4: 167,68,255;
397
- --semi-ai-purple-5: 195,117,255;
398
- --semi-ai-purple-6: 213,152,255;
399
- --semi-ai-purple-7: 229,186,255;
400
- --semi-ai-purple-8: 243,221,255;
401
- --semi-ai-purple-9: 251,243,255;
402
- --semi-ai-general-0-0: 9,44,100;
403
- --semi-ai-general-0-1: 39,29,108;
404
- --semi-ai-general-0-2: 58,23,112;
405
- --semi-ai-general-0-3: 80,18,101;
406
- --semi-ai-general-1-0: 17,64,136;
407
- --semi-ai-general-1-1: 54,43,144;
408
- --semi-ai-general-1-2: 83,35,148;
409
- --semi-ai-general-1-3: 113,28,137;
410
- --semi-ai-general-2-0: 26,86,172;
411
- --semi-ai-general-2-1: 70,59,180;
412
- --semi-ai-general-2-2: 111,49,184;
413
- --semi-ai-general-2-3: 148,41,173;
414
- --semi-ai-general-3-0: 38,111,207;
415
- --semi-ai-general-3-1: 88,78,215;
416
- --semi-ai-general-3-2: 141,65,219;
417
- --semi-ai-general-3-3: 185,55,208;
418
- --semi-ai-general-4-0: 35,127,240;
419
- --semi-ai-general-4-1: 94,84,248;
420
- --semi-ai-general-4-2: 167,68,255;
421
- --semi-ai-general-4-3: 219,56,241;
422
- --semi-ai-general-5-0: 91,162,245;
423
- --semi-ai-general-5-1: 134,129,252;
424
- --semi-ai-general-5-2: 195,117,255;
425
- --semi-ai-general-5-3: 234,107,246;
426
- --semi-ai-general-6-0: 131,187,248;
427
- --semi-ai-general-6-1: 163,160,253;
428
- --semi-ai-general-6-2: 213,152,255;
429
- --semi-ai-general-6-3: 243,143,248;
430
- --semi-ai-general-7-0: 172,210,250;
431
- --semi-ai-general-7-1: 192,192,253;
432
- --semi-ai-general-7-2: 229,186,255;
433
- --semi-ai-general-7-3: 249,180,251;
434
- --semi-ai-general-8-0: 213,233,253;
435
- --semi-ai-general-8-1: 223,223,254;
436
- --semi-ai-general-8-2: 243,221,255;
437
- --semi-ai-general-8-3: 253,217,252;
438
- --semi-ai-general-9-0: 239,247,254;
439
- --semi-ai-general-9-1: 244,244,255;
440
- --semi-ai-general-9-2: 251,243,255;
441
- --semi-ai-general-9-3: 254,241,254;
442
- --semi-ai-general-0: linear-gradient(278deg, rgba(var(--semi-ai-general-0-0)) 0%, rgba(var(--semi-ai-general-0-1)) 30%, rgba(var(--semi-ai-general-0-2)) 60%, rgba(var(--semi-ai-general-0-3)) 100%);
443
- --semi-ai-general-1: linear-gradient(278deg, rgba(var(--semi-ai-general-1-0)) 0%, rgba(var(--semi-ai-general-1-1)) 30%, rgba(var(--semi-ai-general-1-2)) 60%, rgba(var(--semi-ai-general-1-3)) 100%);
444
- --semi-ai-general-2: linear-gradient(278deg, rgba(var(--semi-ai-general-2-0)) 0%, rgba(var(--semi-ai-general-2-1)) 30%, rgba(var(--semi-ai-general-2-2)) 60%, rgba(var(--semi-ai-general-2-3)) 100%);
445
- --semi-ai-general-3: linear-gradient(278deg, rgba(var(--semi-ai-general-3-0)) 0%, rgba(var(--semi-ai-general-3-1)) 30%, rgba(var(--semi-ai-general-3-2)) 60%, rgba(var(--semi-ai-general-3-3)) 100%);
446
- --semi-ai-general-4: linear-gradient(278deg, rgba(var(--semi-ai-general-4-0)) 0%, rgba(var(--semi-ai-general-4-1)) 30%, rgba(var(--semi-ai-general-4-2)) 60%, rgba(var(--semi-ai-general-4-3)) 100%);
447
- --semi-ai-general-5: linear-gradient(278deg, rgba(var(--semi-ai-general-5-0)) 0%, rgba(var(--semi-ai-general-5-1)) 30%, rgba(var(--semi-ai-general-5-2)) 60%, rgba(var(--semi-ai-general-5-3)) 100%);
448
- --semi-ai-general-6: linear-gradient(278deg, rgba(var(--semi-ai-general-6-0)) 0%, rgba(var(--semi-ai-general-6-1)) 30%, rgba(var(--semi-ai-general-6-2)) 60%, rgba(var(--semi-ai-general-6-3)) 100%);
449
- --semi-ai-general-7: linear-gradient(278deg, rgba(var(--semi-ai-general-7-0)) 0%, rgba(var(--semi-ai-general-7-1)) 30%, rgba(var(--semi-ai-general-7-2)) 60%, rgba(var(--semi-ai-general-7-3)) 100%);
450
- --semi-ai-general-8: linear-gradient(278deg, rgba(var(--semi-ai-general-8-0)) 0%, rgba(var(--semi-ai-general-8-1)) 30%, rgba(var(--semi-ai-general-8-2)) 60%, rgba(var(--semi-ai-general-8-3)) 100%);
451
- --semi-ai-general-9: linear-gradient(278deg, rgba(var(--semi-ai-general-9-0)) 0%, rgba(var(--semi-ai-general-9-1)) 30%, rgba(var(--semi-ai-general-9-2)) 60%, rgba(var(--semi-ai-general-9-3)) 100%);
452
- }
453
-
454
- body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light {
455
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
456
- -webkit-font-smoothing: antialiased;
457
- --semi-color-white: rgba(var(--semi-white), 1);
458
- --semi-color-black: rgba(var(--semi-black), 1);
459
- --semi-color-primary: rgba(var(--semi-blue-5), 1);
460
- --semi-color-primary-hover: rgba(var(--semi-blue-6), 1);
461
- --semi-color-primary-active: rgba(var(--semi-blue-7), 1);
462
- --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1);
463
- --semi-color-primary-light-default: rgba(var(--semi-blue-0), 1);
464
- --semi-color-primary-light-hover: rgba(var(--semi-blue-1), 1);
465
- --semi-color-primary-light-active: rgba(var(--semi-blue-2), 1);
466
- --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
467
- --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
468
- --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
469
- --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
470
- --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1);
471
- --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1), 1);
472
- --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2), 1);
473
- --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
474
- --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
475
- --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
476
- --semi-color-tertiary-light-default: rgba(var(--semi-grey-0), 1);
477
- --semi-color-tertiary-light-hover: rgba(var(--semi-grey-1), 1);
478
- --semi-color-tertiary-light-active: rgba(var(--semi-grey-2), 1);
479
- --semi-color-default: rgba(var(--semi-grey-0), 1);
480
- --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
481
- --semi-color-default-active: rgba(var(--semi-grey-2), 1);
482
- --semi-color-info: rgba(var(--semi-blue-5), 1);
483
- --semi-color-info-hover: rgba(var(--semi-blue-6), 1);
484
- --semi-color-info-active: rgba(var(--semi-blue-7), 1);
485
- --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
486
- --semi-color-info-light-default: rgba(var(--semi-blue-0), 1);
487
- --semi-color-info-light-hover: rgba(var(--semi-blue-1), 1);
488
- --semi-color-info-light-active: rgba(var(--semi-blue-2), 1);
489
- --semi-color-success: rgba(var(--semi-green-5), 1);
490
- --semi-color-success-hover: rgba(var(--semi-green-6), 1);
491
- --semi-color-success-active: rgba(var(--semi-green-7), 1);
492
- --semi-color-success-disabled: rgba(var(--semi-green-2), 1);
493
- --semi-color-success-light-default: rgba(var(--semi-green-0), 1);
494
- --semi-color-success-light-hover: rgba(var(--semi-green-1), 1);
495
- --semi-color-success-light-active: rgba(var(--semi-green-2), 1);
496
- --semi-color-danger: rgba(var(--semi-red-5), 1);
497
- --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
498
- --semi-color-danger-active: rgba(var(--semi-red-7), 1);
499
- --semi-color-danger-light-default: rgba(var(--semi-red-0), 1);
500
- --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1);
501
- --semi-color-danger-light-active: rgba(var(--semi-red-2), 1);
502
- --semi-color-warning: rgba(var(--semi-orange-5), 1);
503
- --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
504
- --semi-color-warning-active: rgba(var(--semi-orange-7), 1);
505
- --semi-color-warning-light-default: rgba(var(--semi-orange-0), 1);
506
- --semi-color-warning-light-hover: rgba(var(--semi-orange-1), 1);
507
- --semi-color-warning-light-active: rgba(var(--semi-orange-2), 1);
508
- --semi-color-focus-border: rgba(var(--semi-blue-5), 1);
509
- --semi-color-disabled-text: rgba(var(--semi-grey-9), .35);
510
- --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
511
- --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
512
- --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04);
513
- --semi-color-shadow: rgba(var(--semi-black), .04);
514
- --semi-color-link: rgba(var(--semi-blue-5), 1);
515
- --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
516
- --semi-color-link-active: rgba(var(--semi-blue-7), 1);
517
- --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
518
- --semi-color-border: rgba(var(--semi-grey-9), .08);
519
- --semi-color-nav-bg: rgba(var(--semi-white), 1);
520
- --semi-color-overlay-bg: rgba(22, 22, 26, .6);
521
- --semi-color-fill-0: rgba(var(--semi-grey-8), .05);
522
- --semi-color-fill-1: rgba(var(--semi-grey-8), .09);
523
- --semi-color-fill-2: rgba(var(--semi-grey-8), .13);
524
- --semi-color-bg-0: rgba(var(--semi-white), 1);
525
- --semi-color-bg-1: rgba(var(--semi-white), 1);
526
- --semi-color-bg-2: rgba(var(--semi-white), 1);
527
- --semi-color-bg-3: rgba(var(--semi-white), 1);
528
- --semi-color-bg-4: rgba(var(--semi-white), 1);
529
- --semi-color-text-0: rgba(var(--semi-grey-9), 1);
530
- --semi-color-text-1: rgba(var(--semi-grey-9), .8);
531
- --semi-color-text-2: rgba(var(--semi-grey-9), .62);
532
- --semi-color-text-3: rgba(var(--semi-grey-9), .35);
533
- --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1);
534
- --semi-border-radius-extra-small: 3px;
535
- --semi-border-radius-small: 3px;
536
- --semi-border-radius-medium: 6px;
537
- --semi-border-radius-large: 12px;
538
- --semi-border-radius-circle: 50%;
539
- --semi-border-radius-full: 9999px;
540
- --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
541
- --semi-color-highlight: rgba(var(--semi-black), 1);
542
- --semi-color-data-0: rgba(87, 105, 255, 1);
543
- --semi-color-data-1: rgba(142, 212, 231, 1);
544
- --semi-color-data-2: rgba(245, 135, 0, 1);
545
- --semi-color-data-3: rgba(220, 183, 252, 1);
546
- --semi-color-data-4: rgba(74, 156, 247, 1);
547
- --semi-color-data-5: rgba(243, 204, 53, 1);
548
- --semi-color-data-6: rgba(254, 128, 144, 1);
549
- --semi-color-data-7: rgba(139, 215, 210, 1);
550
- --semi-color-data-8: rgba(131, 176, 35, 1);
551
- --semi-color-data-9: rgba(233, 165, 229, 1);
552
- --semi-color-data-10: rgba(48, 167, 206, 1);
553
- --semi-color-data-11: rgba(249, 192, 100, 1);
554
- --semi-color-data-12: rgba(177, 113, 249, 1);
555
- --semi-color-data-13: rgba(119, 182, 249, 1);
556
- --semi-color-data-14: rgba(200, 143, 2, 1);
557
- --semi-color-data-15: rgba(255, 170, 178, 1);
558
- --semi-color-data-16: rgba(51, 176, 171, 1);
559
- --semi-color-data-17: rgba(182, 215, 129, 1);
560
- --semi-color-data-18: rgba(212, 88, 212, 1);
561
- --semi-color-data-19: rgba(188, 198, 255, 1);
562
- --semi-color-ai-general: var(--semi-ai-general-5);
563
- --semi-color-ai-general-hover: var(--semi-ai-general-6);
564
- --semi-color-ai-general-active: var(--semi-ai-general-7);
565
- --semi-color-ai-general-disabled: var(--semi-ai-general-2);
566
- --semi-color-ai-purple: rgba(var(--semi-ai-purple-5));
567
- --semi-color-ai-purple-hover: rgba(var(--semi-ai-purple-6));
568
- --semi-color-ai-purple-active: rgba(var(--semi-ai-purple-7));
569
- --semi-color-ai-purple-disabled: rgba(var(--semi-ai-purple-2));
570
- --semi-color-ai-background-bottom: linear-gradient(201.15deg, rgba(255, 255, 255, 0.04) 6.58%, rgba(255, 226, 138, 0.04) 32.88%, rgba(231, 45, 255, 0.04) 67.93%, rgba(0, 115, 255, 0.04) 94.23%);
571
- --semi-color-ai-background-bottom-hover: linear-gradient(201.15deg, rgba(255, 255, 255, 0.08) 6.58%, rgba(255, 226, 138, 0.08) 32.88%, rgba(231, 45, 255, 0.08) 67.93%, rgba(0, 115, 255, 0.08) 94.23%);
572
- --semi-color-ai-background-bottom-active: linear-gradient(201.15deg, rgba(255, 255, 255, 0.12) 6.58%, rgba(255, 226, 138, 0.12) 32.88%, rgba(231, 45, 255, 0.12) 67.93%, rgba(0, 115, 255, 0.12) 94.23%);
573
- --semi-color-ai-background-top: linear-gradient(201.15deg, rgba(83, 56, 255, 0.16) 6.58%, rgba(176, 48, 240, 0.096) 32.88%, rgba(231, 45, 255, 0.048) 59.17%, rgba(255, 255, 255, 0) 94.23%);
574
- --semi-color-ai-background-top-hover: linear-gradient(201.15deg, rgba(83, 56, 255, 0.24) 6.58%, rgba(176, 48, 240, 0.144) 32.88%, rgba(231, 45, 255, 0.072) 59.17%, rgba(255, 255, 255, 0) 94.23%);
575
- --semi-color-ai-background-top-hover: linear-gradient(201.15deg, rgba(83, 56, 255, 0.32) 6.58%, rgba(176, 48, 240, 0.192) 32.88%, rgba(231, 45, 255, 0.096) 59.17%, rgba(255, 255, 255, 0) 94.23%);
576
- }
577
-
578
- body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
579
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
580
- -webkit-font-smoothing: antialiased;
581
- --semi-color-white: rgba(228, 231, 245, 1);
582
- --semi-color-black: rgba(var(--semi-black), 1);
583
- --semi-color-primary: rgba(var(--semi-blue-5), 1);
584
- --semi-color-primary-hover: rgba(var(--semi-blue-6), 1);
585
- --semi-color-primary-active: rgba(var(--semi-blue-7), 1);
586
- --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1);
587
- --semi-color-primary-light-default: rgba(var(--semi-blue-5), .2);
588
- --semi-color-primary-light-hover: rgba(var(--semi-blue-5), .3);
589
- --semi-color-primary-light-active: rgba(var(--semi-blue-5), .4);
590
- --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
591
- --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
592
- --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
593
- --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
594
- --semi-color-secondary-light-default: rgba(var(--semi-light-blue-5), .2);
595
- --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5), .3);
596
- --semi-color-secondary-light-active: rgba(var(--semi-light-blue-5), .4);
597
- --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
598
- --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
599
- --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
600
- --semi-color-tertiary-light-default: rgba(var(--semi-grey-5), .2);
601
- --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), .3);
602
- --semi-color-tertiary-light-active: rgba(var(--semi-grey-5), .4);
603
- --semi-color-default: rgba(var(--semi-grey-0), 1);
604
- --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
605
- --semi-color-default-active: rgba(var(--semi-grey-2), 1);
606
- --semi-color-info: rgba(var(--semi-blue-5), 1);
607
- --semi-color-info-hover: rgba(var(--semi-blue-6), 1);
608
- --semi-color-info-active: rgba(var(--semi-blue-7), 1);
609
- --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
610
- --semi-color-info-light-default: rgba(var(--semi-blue-5), .2);
611
- --semi-color-info-light-hover: rgba(var(--semi-blue-5), .3);
612
- --semi-color-info-light-active: rgba(var(--semi-blue-5), .4);
613
- --semi-color-success: rgba(var(--semi-green-5), 1);
614
- --semi-color-success-hover: rgba(var(--semi-green-6), 1);
615
- --semi-color-success-active: rgba(var(--semi-green-7), 1);
616
- --semi-color-success-disabled: rgba(var(--semi-green-2), 1);
617
- --semi-color-success-light-default: rgba(var(--semi-green-5), .2);
618
- --semi-color-success-light-hover: rgba(var(--semi-green-5), .3);
619
- --semi-color-success-light-active: rgba(var(--semi-green-5), .4);
620
- --semi-color-danger: rgba(var(--semi-red-5), 1);
621
- --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
622
- --semi-color-danger-active: rgba(var(--semi-red-7), 1);
623
- --semi-color-danger-light-default: rgba(var(--semi-red-5), .2);
624
- --semi-color-danger-light-hover: rgba(var(--semi-red-5), .3);
625
- --semi-color-danger-light-active: rgba(var(--semi-red-5), .4);
626
- --semi-color-warning: rgba(var(--semi-orange-5), 1);
627
- --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
628
- --semi-color-warning-active: rgba(var(--semi-orange-7), 1);
629
- --semi-color-warning-light-default: rgba(var(--semi-orange-5), .2);
630
- --semi-color-warning-light-hover: rgba(var(--semi-orange-5), .3);
631
- --semi-color-warning-light-active: rgba(var(--semi-orange-5), .4);
632
- --semi-color-focus-border: rgba(var(--semi-blue-5), 1);
633
- --semi-color-disabled-text: rgba(var(--semi-grey-9), .35);
634
- --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
635
- --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
636
- --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04);
637
- --semi-color-link: rgba(var(--semi-blue-5), 1);
638
- --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
639
- --semi-color-link-active: rgba(var(--semi-blue-7), 1);
640
- --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
641
- --semi-color-nav-bg: rgba(35, 36, 41, 1);
642
- --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
643
- --semi-color-overlay-bg: rgba(22, 22, 26, .6);
644
- --semi-color-fill-0: rgba(var(--semi-white), .12);
645
- --semi-color-fill-1: rgba(var(--semi-white), .16);
646
- --semi-color-fill-2: rgba(var(--semi-white), .20);
647
- --semi-color-border: rgba(var(--semi-white), .08);
648
- --semi-color-shadow: rgba(var(--semi-black), .04);
649
- --semi-color-bg-0: rgba(22, 22, 26, 1);
650
- --semi-color-bg-1: rgba(35, 36, 41, 1);
651
- --semi-color-bg-2: rgba(53, 54, 60, 1);
652
- --semi-color-bg-3: rgba(67, 68, 74, 1);
653
- --semi-color-bg-4: rgba(79, 81, 89, 1);
654
- --semi-color-text-0: rgba(var(--semi-grey-9), 1);
655
- --semi-color-text-1: rgba(var(--semi-grey-9), .8);
656
- --semi-color-text-2: rgba(var(--semi-grey-9), .6);
657
- --semi-color-text-3: rgba(var(--semi-grey-9), .35);
658
- --semi-border-radius-extra-small: 3px;
659
- --semi-border-radius-small: 3px;
660
- --semi-border-radius-medium: 6px;
661
- --semi-border-radius-large: 12px;
662
- --semi-border-radius-circle: 50%;
663
- --semi-border-radius-full: 9999px;
664
- --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
665
- --semi-color-highlight: rgba(var(--semi-white), 1);
666
- --semi-color-data-0: rgba(94, 109, 194, 1);
667
- --semi-color-data-1: rgba(8, 104, 120, 1);
668
- --semi-color-data-2: rgba(250, 173, 63, 1);
669
- --semi-color-data-3: rgba(76, 43, 156, 1);
670
- --semi-color-data-4: rgba(16, 125, 248, 1);
671
- --semi-color-data-5: rgba(248, 202, 16, 1);
672
- --semi-color-data-6: rgba(195, 30, 87, 1);
673
- --semi-color-data-7: rgba(5, 119, 115, 1);
674
- --semi-color-data-8: rgba(154, 207, 13, 1);
675
- --semi-color-data-9: rgba(117, 29, 138, 1);
676
- --semi-color-data-10: rgba(16, 162, 180, 1);
677
- --semi-color-data-11: rgba(208, 110, 11, 1);
678
- --semi-color-data-12: rgba(113, 66, 197, 1);
679
- --semi-color-data-13: rgba(7, 100, 212, 1);
680
- --semi-color-data-14: rgba(251, 232, 110, 1);
681
- --semi-color-data-15: rgba(160, 19, 73, 1);
682
- --semi-color-data-16: rgba(11, 179, 167, 1);
683
- --semi-color-data-17: rgba(98, 138, 6, 1);
684
- --semi-color-data-18: rgba(162, 48, 179, 1);
685
- --semi-color-data-19: rgba(40, 51, 138, 1);
686
- --semi-color-ai-general: var(--semi-ai-general-5);
687
- --semi-color-ai-general-hover: var(--semi-ai-general-6);
688
- --semi-color-ai-general-active: var(--semi-ai-general-7);
689
- --semi-color-ai-general-disabled: var(--semi-ai-general-2);
690
- --semi-color-ai-purple: rgba(var(--semi-ai-purple-5));
691
- --semi-color-ai-purple-hover: rgba(var(--semi-ai-purple-6));
692
- --semi-color-ai-purple-active: rgba(var(--semi-ai-purple-7));
693
- --semi-color-ai-purple-disabled: rgba(var(--semi-ai-purple-2));
694
- --semi-color-ai-background-bottom: linear-gradient(201.15deg, rgba(255, 226, 138, 0.2) 6.58%, rgba(231, 45, 255, 0.2) 50.4%, rgba(0, 115, 255, 0.2) 94.23%);
695
- --semi-color-ai-background-bottom-hover: linear-gradient(201.15deg, rgba(255, 226, 138, 0.3) 6.58%, rgba(231, 45, 255, 0.3) 50.4%, rgba(0, 115, 255, 0.3) 94.23%);
696
- --semi-color-ai-background-bottom-active: linear-gradient(201.15deg, rgba(255, 226, 138, 0.4) 6.58%, rgba(231, 45, 255, 0.4) 50.4%, rgba(0, 115, 255, 0.4) 94.23%);
697
- --semi-color-ai-background-top: linear-gradient(201.15deg, rgba(83, 56, 255, 0.36) 6.58%, rgba(176, 48, 240, 0.216) 32.88%, rgba(154, 0, 174, 0.108) 59.17%, rgba(0, 0, 0, 0) 94.23%);
698
- --semi-color-ai-background-top-hover: linear-gradient(201.15deg, rgba(83, 56, 255, 0.54) 6.58%, rgba(176, 48, 240, 0.324) 32.88%, rgba(154, 0, 174, 0.162) 59.17%, rgba(0, 0, 0, 0) 94.23%);
699
- --semi-color-ai-background-top-hover: linear-gradient(201.15deg, rgba(83, 56, 255, 0.72) 6.58%, rgba(176, 48, 240, 0.432) 32.88%, rgba(154, 0, 174, 0.216) 59.17%, rgba(0, 0, 0, 0) 94.23%);
700
- }
701
-
702
- .semi-button-split {
703
- display: inline-block;
704
- }
705
- .semi-button-split .semi-button {
706
- border-radius: 0;
707
- margin-right: 1px;
708
- }
709
- .semi-button-split .semi-button-first {
710
- border-top-left-radius: var(--semi-border-radius-small);
711
- border-bottom-left-radius: var(--semi-border-radius-small);
712
- }
713
- .semi-button-split .semi-button-last {
714
- border-top-right-radius: var(--semi-border-radius-small);
715
- border-bottom-right-radius: var(--semi-border-radius-small);
716
- margin-right: unset;
717
- }
718
- .semi-button-split:hover .semi-button-borderless:active {
719
- background-color: var(--semi-color-fill-1);
720
- }
721
-
722
- .semi-button {
723
- --semi-button-colorful-multiple-fill-0: rgba(var(--semi-ai-general-5-3));
724
- --semi-button-colorful-multiple-fill-1: rgba(var(--semi-ai-general-5-2));
725
- --semi-button-colorful-multiple-fill-2: rgba(var(--semi-ai-general-5-1));
726
- --semi-button-colorful-multiple-fill-3: rgba(var(--semi-ai-general-5-0));
727
- --semi-button-colorful-disabled-fill: var(--semi-color-disabled-text);
728
- --semi-button-colorful-fill-primary: var(--semi-color-ai-purple);
729
- --semi-button-colorful-fill-secondary: var(--semi-color-text-0);
730
- }
731
-
732
- .semi-button {
733
- box-shadow: none;
734
- height: 32px;
735
- display: inline-flex;
736
- align-items: center;
737
- justify-content: center;
738
- cursor: pointer;
739
- user-select: none;
740
- border: 0 transparent solid;
741
- border-radius: var(--semi-border-radius-small);
742
- padding-left: 12px;
743
- padding-right: 12px;
744
- padding-top: 6px;
745
- padding-bottom: 6px;
746
- font-family: inherit;
747
- font-size: 14px;
748
- line-height: 20px;
749
- font-weight: 600;
750
- outline: none;
751
- vertical-align: middle;
752
- white-space: nowrap;
753
- }
754
- .semi-button.semi-button-primary:focus-visible, .semi-button.semi-button-secondary:focus-visible, .semi-button.semi-button-tertiary:focus-visible, .semi-button.semi-button-warning:focus-visible, .semi-button.semi-button-danger:focus-visible {
755
- outline: 2px solid var(--semi-color-primary-light-active);
756
- }
757
- .semi-button-content {
758
- display: flex;
759
- align-items: center;
760
- }
761
- .semi-button-danger {
762
- background-color: var(--semi-color-danger);
763
- color: rgba(var(--semi-white), 1);
764
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
765
- transform: scale(var(--semi-transform_scale-none));
766
- }
767
- .semi-button-danger-disabled {
768
- background-color: var(--semi-color-disabled-bg);
769
- }
770
- .semi-button-danger-disabled.semi-button-outline {
771
- background-color: transparent;
772
- border: 1px solid var(--semi-color-border);
773
- }
774
- .semi-button-danger-disabled.semi-button-light {
775
- background-color: var(--semi-color-fill-0);
776
- }
777
- .semi-button-danger:hover {
778
- background-color: var(--semi-color-danger-hover);
779
- }
780
- .semi-button-danger:active {
781
- background-color: var(--semi-color-danger-active);
782
- }
783
- .semi-button-danger.semi-button-outline {
784
- background-color: transparent;
785
- border: 1px solid var(--semi-color-danger);
786
- }
787
- .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-outline, .semi-button-danger.semi-button-borderless {
788
- color: var(--semi-color-danger);
789
- }
790
- .semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
791
- outline: 2px solid var(--semi-color-danger-light-active);
792
- }
793
- .semi-button-warning {
794
- background-color: var(--semi-color-warning);
795
- color: rgba(var(--semi-white), 1);
796
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
797
- transform: scale(var(--semi-transform_scale-none));
798
- }
799
- .semi-button-warning-disabled {
800
- background-color: var(--semi-color-disabled-bg);
801
- }
802
- .semi-button-warning-disabled.semi-button-outline {
803
- background-color: transparent;
804
- border: 1px solid var(--semi-color-border);
805
- }
806
- .semi-button-warning-disabled.semi-button-light {
807
- background-color: var(--semi-color-fill-0);
808
- }
809
- .semi-button-warning:hover {
810
- background-color: var(--semi-color-warning-hover);
811
- }
812
- .semi-button-warning:active {
813
- background-color: var(--semi-color-warning-active);
814
- }
815
- .semi-button-warning.semi-button-outline {
816
- background-color: transparent;
817
- border: 1px solid var(--semi-color-warning);
818
- }
819
- .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-outline, .semi-button-warning.semi-button-borderless {
820
- color: var(--semi-color-warning);
821
- }
822
- .semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
823
- outline: 2px solid var(--semi-color-warning-light-active);
824
- }
825
- .semi-button-tertiary {
826
- background-color: var(--semi-color-tertiary);
827
- color: rgba(var(--semi-white), 1);
828
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
829
- transform: scale(var(--semi-transform_scale-none));
830
- }
831
- .semi-button-tertiary.semi-button-colorful.semi-button-solid {
832
- background: var(--semi-ai-general-0);
833
- }
834
- .semi-button-tertiary.semi-button-colorful.semi-button-solid:hover {
835
- background: var(--semi-ai-general-1);
836
- }
837
- .semi-button-tertiary.semi-button-colorful.semi-button-solid:active {
838
- background: var(--semi-ai-general-2);
839
- }
840
- .semi-button-tertiary.semi-button-colorful.semi-button-solid .semi-button-content-right, .semi-button-tertiary.semi-button-colorful.semi-button-solid .semi-button-content:not(:has(> .semi-button-content-right)) {
841
- background: var(--semi-color-ai-general);
842
- background-clip: text;
843
- color: transparent;
844
- }
845
- .semi-button-tertiary-disabled {
846
- background-color: var(--semi-color-disabled-bg);
847
- }
848
- .semi-button-tertiary-disabled.semi-button-outline {
849
- background-color: transparent;
850
- border: 1px solid var(--semi-color-border);
851
- }
852
- .semi-button-tertiary-disabled.semi-button-light {
853
- background-color: var(--semi-color-fill-0);
854
- }
855
- .semi-button-tertiary:hover {
856
- background-color: var(--semi-color-tertiary-hover);
857
- }
858
- .semi-button-tertiary:active {
859
- background-color: var(--semi-color-tertiary-active);
860
- }
861
- .semi-button-tertiary.semi-button-outline {
862
- background-color: transparent;
863
- border: 1px solid var(--semi-color-border);
864
- }
865
- .semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-outline, .semi-button-tertiary.semi-button-borderless {
866
- color: var(--semi-color-text-1);
867
- }
868
- .semi-button-primary {
869
- background-color: var(--semi-color-primary);
870
- color: rgba(var(--semi-white), 1);
871
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
872
- transform: scale(var(--semi-transform_scale-none));
873
- }
874
- .semi-button-primary.semi-button-colorful.semi-button-solid {
875
- background: var(--semi-color-ai-general);
876
- }
877
- .semi-button-primary.semi-button-colorful.semi-button-solid:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
878
- background: var(--semi-color-ai-general-hover);
879
- }
880
- .semi-button-primary.semi-button-colorful.semi-button-solid:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):active {
881
- background: var(--semi-color-ai-general-active);
882
- }
883
- .semi-button-primary.semi-button-colorful.semi-button-light .semi-button-content-right, .semi-button-primary.semi-button-colorful.semi-button-light .semi-button-content:not(:has(> .semi-button-content-right)) {
884
- background: var(--semi-color-ai-general);
885
- background-clip: text;
886
- color: transparent;
887
- }
888
- .semi-button-primary.semi-button-colorful.semi-button-outline {
889
- color: var(--semi-color-ai-purple);
890
- border-color: var(--semi-color-ai-purple);
891
- }
892
- .semi-button-primary.semi-button-colorful.semi-button-borderless .semi-button-content-right, .semi-button-primary.semi-button-colorful.semi-button-borderless .semi-button-content:not(:has(> .semi-button-content-right)) {
893
- background: var(--semi-color-ai-general);
894
- background-clip: text;
895
- color: transparent;
896
- }
897
- .semi-button-primary-disabled {
898
- background-color: var(--semi-color-disabled-bg);
899
- }
900
- .semi-button-primary-disabled.semi-button-light {
901
- background: var(--semi-color-fill-0);
902
- }
903
- .semi-button-primary-disabled.semi-button-outline {
904
- background-color: transparent;
905
- border: 1px solid var(--semi-color-border);
906
- }
907
- .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
908
- background-color: var(--semi-color-primary-hover);
909
- }
910
- .semi-button-primary.semi-button-outline {
911
- background-color: transparent;
912
- border: 1px solid var(--semi-color-border);
913
- }
914
- .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):active {
915
- background-color: var(--semi-color-primary-active);
916
- }
917
- .semi-button-primary.semi-button-light, .semi-button-primary.semi-button-outline, .semi-button-primary.semi-button-borderless {
918
- color: var(--semi-color-primary);
919
- }
920
- .semi-button-secondary {
921
- background-color: var(--semi-color-secondary);
922
- outline-color: var(--semi-color-secondary);
923
- color: rgba(var(--semi-white), 1);
924
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
925
- transform: scale(var(--semi-transform_scale-none));
926
- }
927
- .semi-button-secondary-disabled {
928
- background-color: var(--semi-color-disabled-bg);
929
- }
930
- .semi-button-secondary-disabled.semi-button-outline {
931
- background-color: transparent;
932
- border: 1px solid var(--semi-color-border);
933
- }
934
- .semi-button-secondary-disabled.semi-button-light {
935
- background-color: var(--semi-color-fill-0);
936
- }
937
- .semi-button-secondary.semi-button-outline {
938
- background-color: transparent;
939
- border: 1px solid var(--semi-color-border);
940
- }
941
- .semi-button-secondary:hover {
942
- background-color: var(--semi-color-secondary-hover);
943
- }
944
- .semi-button-secondary:active {
945
- background-color: var(--semi-color-secondary-active);
946
- }
947
- .semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-outline, .semi-button-secondary.semi-button-borderless {
948
- color: var(--semi-color-secondary);
949
- }
950
- .semi-button-disabled {
951
- color: var(--semi-color-disabled-text);
952
- cursor: not-allowed;
953
- }
954
- .semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
955
- color: var(--semi-color-disabled-text);
956
- }
957
- .semi-button-disabled.semi-button-light, .semi-button-disabled.semi-button-borderless {
958
- color: var(--semi-color-disabled-text);
959
- }
960
- .semi-button-disabled.semi-button-outline {
961
- color: var(--semi-color-disabled-text);
962
- }
963
- .semi-button-borderless {
964
- background-color: transparent;
965
- border: 0 transparent solid;
966
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
967
- transform: scale(var(--semi-transform_scale-none));
968
- }
969
- .semi-button-borderless:not(.semi-button-disabled):hover {
970
- background-color: var(--semi-color-fill-0);
971
- border: 0 transparent solid;
972
- }
973
- .semi-button-borderless:not(.semi-button-disabled):active {
974
- background-color: var(--semi-color-fill-1);
975
- border: 0 transparent solid;
976
- }
977
- .semi-button-outline {
978
- background-color: transparent;
979
- }
980
- .semi-button-outline:not(.semi-button-disabled):hover {
981
- background-color: var(--semi-color-fill-0);
982
- }
983
- .semi-button-outline:not(.semi-button-disabled):active {
984
- background-color: var(--semi-color-fill-1);
985
- }
986
- .semi-button-light {
987
- background-color: var(--semi-color-fill-0);
988
- border: 0 transparent solid;
989
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
990
- transform: scale(var(--semi-transform_scale-none));
991
- }
992
- .semi-button-light:not(.semi-button-disabled):hover {
993
- background-color: var(--semi-color-fill-1);
994
- border: 0 transparent solid;
995
- }
996
- .semi-button-light:not(.semi-button-disabled):active {
997
- background-color: var(--semi-color-fill-2);
998
- border: 0 transparent solid;
999
- }
1000
- .semi-button-size-small {
1001
- height: 24px;
1002
- padding-top: 2px;
1003
- padding-bottom: 2px;
1004
- padding-left: 12px;
1005
- padding-right: 12px;
1006
- font-size: 14px;
1007
- line-height: 20px;
1008
- font-weight: 600;
1009
- }
1010
- .semi-button-size-large {
1011
- height: 40px;
1012
- padding-top: 10px;
1013
- padding-bottom: 10px;
1014
- padding-left: 16px;
1015
- padding-right: 16px;
1016
- font-size: 14px;
1017
- line-height: 20px;
1018
- font-weight: 600;
1019
- }
1020
- .semi-button-block {
1021
- width: 100%;
1022
- }
1023
- .semi-button-group {
1024
- display: flex;
1025
- flex-wrap: wrap;
1026
- }
1027
- .semi-button-group > .semi-button {
1028
- margin: 0;
1029
- padding-left: 0;
1030
- padding-right: 0;
1031
- border-radius: 0;
1032
- }
1033
- .semi-button-group > .semi-button .semi-button-content {
1034
- padding-left: 12px;
1035
- padding-right: 12px;
1036
- }
1037
- .semi-button-group > .semi-button-size-large .semi-button-content {
1038
- padding-left: 16px;
1039
- padding-right: 16px;
1040
- }
1041
- .semi-button-group > .semi-button-size-small .semi-button-content {
1042
- padding-left: 12px;
1043
- padding-right: 12px;
1044
- }
1045
- .semi-button-group > .semi-button.semi-button-with-icon-only {
1046
- padding-left: 0;
1047
- padding-right: 0;
1048
- }
1049
- .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content {
1050
- padding-left: 8px;
1051
- padding-right: 8px;
1052
- }
1053
- .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content {
1054
- padding-left: 4px;
1055
- padding-right: 4px;
1056
- }
1057
- .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content {
1058
- padding-left: 12px;
1059
- padding-right: 12px;
1060
- }
1061
- .semi-button-group > .semi-button:first-child {
1062
- border-top-left-radius: var(--semi-border-radius-small);
1063
- border-bottom-left-radius: var(--semi-border-radius-small);
1064
- }
1065
- .semi-button-group > .semi-button:last-child {
1066
- border-top-right-radius: var(--semi-border-radius-small);
1067
- border-bottom-right-radius: var(--semi-border-radius-small);
1068
- }
1069
- .semi-button-group > .semi-button-outline:not(:last-child) {
1070
- border-right-color: transparent;
1071
- margin-right: -1px;
1072
- }
1073
- .semi-button-group-line {
1074
- display: inline-flex;
1075
- align-items: center;
1076
- background-color: var(--semi-color-border);
1077
- }
1078
- .semi-button-group-line-primary {
1079
- background-color: var(--semi-color-primary);
1080
- }
1081
- .semi-button-group-line-secondary {
1082
- background-color: var(--semi-color-secondary);
1083
- }
1084
- .semi-button-group-line-tertiary {
1085
- background-color: var(--semi-color-tertiary);
1086
- }
1087
- .semi-button-group-line-warning {
1088
- background-color: var(--semi-color-warning);
1089
- }
1090
- .semi-button-group-line-danger {
1091
- background-color: var(--semi-color-danger);
1092
- }
1093
- .semi-button-group-line-disabled {
1094
- background-color: var(--semi-color-disabled-bg);
1095
- }
1096
- .semi-button-group-line-light {
1097
- background-color: var(--semi-color-fill-0);
1098
- }
1099
- .semi-button-group-line-borderless {
1100
- background-color: transparent;
1101
- }
1102
- .semi-button-group-line::before {
1103
- display: block;
1104
- content: "";
1105
- width: 1px;
1106
- height: 20px;
1107
- background-color: var(--semi-color-border);
1108
- }
1109
-
1110
- .semi-rtl .semi-button,
1111
- .semi-portal-rtl .semi-button {
1112
- direction: rtl;
1113
- padding-left: 12px;
1114
- padding-right: 12px;
1115
- }
1116
- .semi-rtl .semi-button-size-small,
1117
- .semi-portal-rtl .semi-button-size-small {
1118
- padding-left: 12px;
1119
- padding-right: 12px;
1120
- }
1121
- .semi-rtl .semi-button-size-large,
1122
- .semi-portal-rtl .semi-button-size-large {
1123
- padding-left: 16px;
1124
- padding-right: 16px;
1125
- }
1126
- .semi-rtl .semi-button-group,
1127
- .semi-portal-rtl .semi-button-group {
1128
- direction: rtl;
1129
- }
1130
- .semi-rtl .semi-button-group > .semi-button,
1131
- .semi-portal-rtl .semi-button-group > .semi-button {
1132
- padding-left: 0;
1133
- padding-right: 0;
1134
- }
1135
- .semi-rtl .semi-button-group > .semi-button .semi-button-content,
1136
- .semi-portal-rtl .semi-button-group > .semi-button .semi-button-content {
1137
- padding-left: 12px;
1138
- padding-right: 12px;
1139
- }
1140
- .semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content,
1141
- .semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content {
1142
- padding-left: 16px;
1143
- padding-right: 16px;
1144
- }
1145
- .semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content,
1146
- .semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content {
1147
- padding-left: 12px;
1148
- padding-right: 12px;
1149
- }
1150
- .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only,
1151
- .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only {
1152
- padding-left: 0;
1153
- padding-right: 0;
1154
- }
1155
- .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content,
1156
- .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content {
1157
- padding-left: 8px;
1158
- padding-right: 8px;
1159
- }
1160
- .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content,
1161
- .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content {
1162
- padding-left: 4px;
1163
- padding-right: 4px;
1164
- }
1165
- .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content,
1166
- .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content {
1167
- padding-left: 12px;
1168
- padding-right: 12px;
1169
- }
1170
- .semi-rtl .semi-button-group > .semi-button:first-child,
1171
- .semi-portal-rtl .semi-button-group > .semi-button:first-child {
1172
- border-top-left-radius: 0;
1173
- border-bottom-left-radius: 0;
1174
- border-top-right-radius: var(--semi-border-radius-small);
1175
- border-bottom-right-radius: var(--semi-border-radius-small);
1176
- }
1177
- .semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content,
1178
- .semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content {
1179
- border-left: 1px var(--semi-color-border) solid;
1180
- border-right: 0;
1181
- }
1182
- .semi-rtl .semi-button-group > .semi-button:last-child,
1183
- .semi-portal-rtl .semi-button-group > .semi-button:last-child {
1184
- border-top-right-radius: 0;
1185
- border-bottom-right-radius: 0;
1186
- border-top-left-radius: var(--semi-border-radius-small);
1187
- border-bottom-left-radius: var(--semi-border-radius-small);
1188
- }
1189
- .semi-rtl .semi-button.semi-button-with-icon-only,
1190
- .semi-portal-rtl .semi-button.semi-button-with-icon-only {
1191
- padding-left: 8px;
1192
- padding-right: 8px;
1193
- }
1194
- .semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small,
1195
- .semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small {
1196
- padding-left: 4px;
1197
- padding-right: 4px;
1198
- }
1199
- .semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large,
1200
- .semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large {
1201
- padding-left: 12px;
1202
- padding-right: 12px;
1203
- }
1204
- .semi-rtl .semi-button-content-left,
1205
- .semi-portal-rtl .semi-button-content-left {
1206
- margin-left: 8px;
1207
- margin-right: 0;
1208
- }
1209
- .semi-rtl .semi-button-content-right,
1210
- .semi-portal-rtl .semi-button-content-right {
1211
- margin-right: 8px;
1212
- margin-left: 0;
1213
- }
1214
-
1215
- @keyframes semi-input-active {
1216
- from {
1217
- transform: scale(1);
1218
- }
1219
- to {
1220
- transform: scale(0.97);
1221
- }
1222
- }
1223
- @keyframes semi-input-inactive {
1224
- from {
1225
- transform: scale(0.97);
1226
- }
1227
- to {
1228
- transform: scale(1);
1229
- }
1230
- }
1231
- .semi-input {
1232
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
1233
- transform: scale(var(--semi-transform_scale-none));
1234
- }
1235
-
1236
- .semi-input-wrapper {
1237
- display: inline-block;
1238
- position: relative;
1239
- vertical-align: middle;
1240
- box-shadow: none;
1241
- font-size: 14px;
1242
- line-height: 20px;
1243
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
1244
- background-color: var(--semi-color-fill-0);
1245
- border: 1px transparent solid;
1246
- border-radius: var(--semi-border-radius-small);
1247
- width: 100%;
1248
- outline: none;
1249
- cursor: text;
1250
- box-sizing: border-box;
1251
- color: var(--semi-color-text-0);
1252
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
1253
- transform: scale(var(--semi-transform_scale-none));
1254
- }
1255
- .semi-input-wrapper-default {
1256
- height: 32px;
1257
- font-size: 14px;
1258
- line-height: 20px;
1259
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
1260
- line-height: 30px;
1261
- }
1262
- .semi-input-wrapper-small {
1263
- height: 24px;
1264
- font-size: 14px;
1265
- line-height: 20px;
1266
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
1267
- line-height: 22px;
1268
- }
1269
- .semi-input-wrapper-large {
1270
- height: 40px;
1271
- font-size: 16px;
1272
- line-height: 22px;
1273
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
1274
- line-height: 38px;
1275
- }
1276
- .semi-input-wrapper:hover {
1277
- background-color: var(--semi-color-fill-1);
1278
- border-color: transparent;
1279
- }
1280
- .semi-input-wrapper-focus {
1281
- background-color: var(--semi-color-fill-0);
1282
- border: var(--semi-color-focus-border) solid 1px;
1283
- }
1284
- .semi-input-wrapper-focus:hover {
1285
- background-color: var(--semi-color-fill-0);
1286
- border-color: var(--semi-color-focus-border);
1287
- }
1288
- .semi-input-wrapper-focus:active {
1289
- background-color: var(--semi-color-fill-2);
1290
- border-color: var(--semi-color-focus-border);
1291
- }
1292
- .semi-input-wrapper.semi-input-readonly {
1293
- cursor: default;
1294
- }
1295
- .semi-input-wrapper-error {
1296
- background-color: var(--semi-color-danger-light-default);
1297
- border-color: var(--semi-color-danger-light-default);
1298
- }
1299
- .semi-input-wrapper-error:hover {
1300
- background-color: var(--semi-color-danger-light-hover);
1301
- border-color: var(--semi-color-danger-light-hover);
1302
- }
1303
- .semi-input-wrapper-error.semi-input-wrapper-focus {
1304
- background-color: var(--semi-color-danger-light-default);
1305
- border-color: var(--semi-color-danger);
1306
- }
1307
- .semi-input-wrapper-error:active {
1308
- background-color: var(--semi-color-danger-light-active);
1309
- border-color: var(--semi-color-danger);
1310
- }
1311
- .semi-input-wrapper-warning {
1312
- background-color: var(--semi-color-warning-light-default);
1313
- border-color: var(--semi-color-warning-light-default);
1314
- }
1315
- .semi-input-wrapper-warning:hover {
1316
- background-color: var(--semi-color-warning-light-hover);
1317
- border-color: var(--semi-color-warning-light-hover);
1318
- }
1319
- .semi-input-wrapper-warning.semi-input-wrapper-focus {
1320
- background-color: var(--semi-color-warning-light-default);
1321
- border-color: var(--semi-color-warning);
1322
- }
1323
- .semi-input-wrapper-warning:active {
1324
- background-color: var(--semi-color-warning-light-active);
1325
- border-color: var(--semi-color-warning);
1326
- }
1327
- .semi-input-wrapper__with-prefix {
1328
- display: inline-flex;
1329
- align-items: center;
1330
- }
1331
- .semi-input-wrapper__with-prefix .semi-input {
1332
- padding-left: 0;
1333
- }
1334
- .semi-input-wrapper__with-suffix {
1335
- display: inline-flex;
1336
- align-items: center;
1337
- }
1338
- .semi-input-wrapper__with-suffix .semi-input {
1339
- padding-right: 0;
1340
- }
1341
- .semi-input-wrapper-clearable, .semi-input-wrapper-modebtn {
1342
- display: inline-flex;
1343
- align-items: center;
1344
- }
1345
- .semi-input-wrapper-hidden {
1346
- border: none;
1347
- }
1348
- .semi-input-wrapper .semi-icon {
1349
- color: var(--semi-color-text-2);
1350
- }
1351
- .semi-input-wrapper .semi-input-clearbtn,
1352
- .semi-input-wrapper .semi-input-modebtn {
1353
- color: var(--semi-color-primary-hover);
1354
- }
1355
- .semi-input-wrapper .semi-input-clearbtn > svg,
1356
- .semi-input-wrapper .semi-input-modebtn > svg {
1357
- pointer-events: none;
1358
- }
1359
- .semi-input-wrapper .semi-input-clearbtn:hover,
1360
- .semi-input-wrapper .semi-input-modebtn:hover {
1361
- cursor: pointer;
1362
- }
1363
- .semi-input-wrapper .semi-input-clearbtn:hover .semi-icon,
1364
- .semi-input-wrapper .semi-input-modebtn:hover .semi-icon {
1365
- color: var(--semi-color-primary-hover);
1366
- }
1367
- .semi-input-wrapper .semi-input-clearbtn:focus-visible,
1368
- .semi-input-wrapper .semi-input-modebtn:focus-visible {
1369
- border-radius: var(--semi-border-radius-small);
1370
- outline: 2px solid var(--semi-color-primary-light-active);
1371
- outline-offset: -1px;
1372
- }
1373
- .semi-input-wrapper__with-suffix-icon.semi-input-wrapper-clearable:not(.semi-input-wrapper__with-suffix-hidden) .semi-input-clearbtn {
1374
- min-width: 24px;
1375
- justify-content: flex-end;
1376
- }
1377
- .semi-input-wrapper-modebtn.semi-input-wrapper-clearable .semi-input-clearbtn {
1378
- min-width: 16px;
1379
- justify-content: center;
1380
- }
1381
- .semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input {
1382
- border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
1383
- }
1384
- .semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input:not(:last-child) {
1385
- border-right-style: none;
1386
- border-radius: 0;
1387
- }
1388
- .semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input {
1389
- border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
1390
- }
1391
- .semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input:not(:last-child) {
1392
- border-right-style: none;
1393
- }
1394
- .semi-input-wrapper.semi-input-wrapper__with-prepend, .semi-input-wrapper.semi-input-wrapper__with-append {
1395
- display: inline-flex;
1396
- align-items: center;
1397
- background-color: transparent;
1398
- }
1399
- .semi-input-wrapper.semi-input-wrapper__with-prepend:hover, .semi-input-wrapper.semi-input-wrapper__with-append:hover {
1400
- background-color: transparent;
1401
- }
1402
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-focus {
1403
- border: 1px transparent solid;
1404
- background-color: transparent;
1405
- }
1406
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input {
1407
- background-color: var(--semi-color-fill-0);
1408
- border: 1px transparent solid;
1409
- }
1410
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover {
1411
- background-color: var(--semi-color-fill-1);
1412
- }
1413
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover ~ .semi-input-modebtn {
1414
- background-color: var(--semi-color-fill-1);
1415
- }
1416
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus {
1417
- border: 1px var(--semi-color-focus-border) solid;
1418
- background-color: var(--semi-color-fill-0);
1419
- }
1420
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn {
1421
- border-right-style: none;
1422
- }
1423
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn + .semi-input-clearbtn {
1424
- border-right-style: none;
1425
- }
1426
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn {
1427
- box-sizing: border-box;
1428
- background-color: var(--semi-color-fill-0);
1429
- }
1430
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn {
1431
- border: 1px var(--semi-color-focus-border) solid;
1432
- border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
1433
- border-left-style: none;
1434
- }
1435
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn:not(:last-child) {
1436
- border-radius: 0;
1437
- }
1438
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn {
1439
- border: 1px var(--semi-color-focus-border) solid;
1440
- border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
1441
- border-left-style: none;
1442
- }
1443
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) {
1444
- border-radius: 0;
1445
- }
1446
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active {
1447
- background-color: var(--semi-color-fill-2);
1448
- }
1449
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn {
1450
- background-color: var(--semi-color-fill-2);
1451
- }
1452
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover {
1453
- background-color: var(--semi-color-fill-0);
1454
- }
1455
- .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover:last-child {
1456
- border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
1457
- }
1458
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error {
1459
- border-color: transparent;
1460
- }
1461
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input {
1462
- background-color: var(--semi-color-danger-light-default);
1463
- border-color: var(--semi-color-danger-light-default);
1464
- }
1465
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover {
1466
- background-color: var(--semi-color-danger-light-hover);
1467
- border-color: var(--semi-color-danger-light-hover);
1468
- }
1469
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover + .semi-input-modebtn {
1470
- background-color: var(--semi-color-danger-light-hover);
1471
- }
1472
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus {
1473
- background-color: var(--semi-color-danger-light-default);
1474
- border-color: var(--semi-color-danger);
1475
- }
1476
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus + .semi-input-modebtn {
1477
- background-color: var(--semi-color-danger-light-default);
1478
- border-color: var(--semi-color-danger);
1479
- }
1480
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active {
1481
- background-color: var(--semi-color-danger-light-active);
1482
- }
1483
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn {
1484
- background-color: var(--semi-color-danger-light-active);
1485
- border-color: var(--semi-color-danger);
1486
- }
1487
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover {
1488
- background-color: var(--semi-color-danger-light-default);
1489
- }
1490
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover:last-child {
1491
- border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
1492
- }
1493
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning {
1494
- border-color: transparent;
1495
- }
1496
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input {
1497
- background-color: var(--semi-color-warning-light-default);
1498
- border-color: var(--semi-color-warning-light-default);
1499
- }
1500
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover {
1501
- background-color: var(--semi-color-warning-light-hover);
1502
- border-color: var(--semi-color-warning-light-hover);
1503
- }
1504
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover + .semi-input-modebtn {
1505
- background-color: var(--semi-color-warning-light-hover);
1506
- }
1507
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus {
1508
- background-color: var(--semi-color-warning-light-default);
1509
- border-color: var(--semi-color-warning);
1510
- }
1511
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus + .semi-input-modebtn {
1512
- background-color: var(--semi-color-warning-light-default);
1513
- border-color: var(--semi-color-warning);
1514
- }
1515
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active {
1516
- background-color: var(--semi-color-warning-light-active);
1517
- }
1518
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn {
1519
- background-color: var(--semi-color-warning-light-active);
1520
- border-color: var(--semi-color-warning);
1521
- }
1522
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover {
1523
- background-color: var(--semi-color-warning-light-default);
1524
- }
1525
- .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child {
1526
- border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
1527
- }
1528
- .semi-input-wrapper-disabled {
1529
- cursor: not-allowed;
1530
- color: var(--semi-color-disabled-text);
1531
- background-color: var(--semi-color-disabled-fill);
1532
- -webkit-text-fill-color: var(--semi-color-disabled-text);
1533
- }
1534
- .semi-input-wrapper-disabled:hover {
1535
- background-color: var(--semi-color-disabled-fill);
1536
- }
1537
- .semi-input-wrapper-disabled .semi-input-append,
1538
- .semi-input-wrapper-disabled .semi-input-prepend,
1539
- .semi-input-wrapper-disabled .semi-input-suffix,
1540
- .semi-input-wrapper-disabled .semi-input-prefix,
1541
- .semi-input-wrapper-disabled .semi-icon {
1542
- color: var(--semi-color-disabled-text);
1543
- }
1544
-
1545
- .semi-input {
1546
- border: none;
1547
- outline: none;
1548
- width: 100%;
1549
- color: inherit;
1550
- padding-left: 12px;
1551
- padding-right: 12px;
1552
- background-color: transparent;
1553
- box-sizing: border-box;
1554
- }
1555
- .semi-input:placeholder-shown {
1556
- text-overflow: ellipsis;
1557
- }
1558
- .semi-input[type=password]::-ms-reveal, .semi-input[type=password]::-ms-clear {
1559
- display: none;
1560
- }
1561
- .semi-input[type=search]::-webkit-search-cancel-button {
1562
- display: none;
1563
- }
1564
- .semi-input::placeholder {
1565
- color: var(--semi-color-text-2);
1566
- }
1567
- .semi-input-large {
1568
- height: 38px;
1569
- font-size: 16px;
1570
- line-height: 22px;
1571
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
1572
- line-height: 38px;
1573
- }
1574
- .semi-input-small {
1575
- height: 22px;
1576
- font-size: 14px;
1577
- line-height: 20px;
1578
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
1579
- line-height: 22px;
1580
- }
1581
- .semi-input-default {
1582
- height: 30px;
1583
- font-size: 14px;
1584
- line-height: 20px;
1585
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
1586
- line-height: 30px;
1587
- }
1588
- .semi-input-disabled {
1589
- cursor: not-allowed;
1590
- color: inherit;
1591
- }
1592
- .semi-input-inset-label {
1593
- margin: 0 12px;
1594
- font-weight: 600;
1595
- color: var(--semi-color-text-2);
1596
- flex-shrink: 0;
1597
- white-space: nowrap;
1598
- }
1599
- .semi-input-prefix, .semi-input-suffix {
1600
- display: flex;
1601
- justify-content: center;
1602
- align-items: center;
1603
- }
1604
- .semi-input-prefix-text, .semi-input-suffix-text {
1605
- margin: 0 12px;
1606
- color: var(--semi-color-text-2);
1607
- font-weight: 600;
1608
- white-space: nowrap;
1609
- }
1610
- .semi-input-prefix-icon, .semi-input-suffix-icon {
1611
- color: var(--semi-color-text-2);
1612
- margin: 0 8px;
1613
- }
1614
- .semi-input-suffix {
1615
- display: flex;
1616
- justify-content: center;
1617
- align-items: center;
1618
- }
1619
- .semi-input-clearbtn, .semi-input-modebtn {
1620
- display: flex;
1621
- align-items: center;
1622
- height: 100%;
1623
- justify-content: center;
1624
- min-width: 32px;
1625
- }
1626
- .semi-input-clearbtn + .semi-input-suffix + .semi-input-suffix-text {
1627
- margin-left: 0;
1628
- }
1629
- .semi-input-clearbtn + .semi-input-suffix + .semi-input-suffix-icon {
1630
- margin-left: 0;
1631
- }
1632
- .semi-input-suffix-hidden {
1633
- display: none;
1634
- }
1635
- .semi-input-prepend, .semi-input-append {
1636
- height: 100%;
1637
- display: flex;
1638
- align-items: center;
1639
- background-color: var(--semi-color-fill-0);
1640
- color: var(--semi-color-text-2);
1641
- font-size: 14px;
1642
- line-height: 20px;
1643
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
1644
- flex-shrink: 0;
1645
- }
1646
- .semi-input-prepend-icon, .semi-input-prepend-text, .semi-input-append-icon, .semi-input-append-text {
1647
- padding: 0 12px;
1648
- }
1649
- .semi-input-append {
1650
- border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
1651
- border-left: 1px transparent solid;
1652
- }
1653
- .semi-input-prepend {
1654
- border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
1655
- border-right: 1px transparent solid;
1656
- }
1657
- .semi-input-disabled::placeholder {
1658
- color: var(--semi-color-disabled-text);
1659
- }
1660
- .semi-input-group {
1661
- display: inline-flex;
1662
- align-items: center;
1663
- align-content: center;
1664
- flex-wrap: wrap;
1665
- }
1666
- .semi-input-group .semi-select,
1667
- .semi-input-group .semi-tagInput,
1668
- .semi-input-group .semi-cascader,
1669
- .semi-input-group .semi-tree-select, .semi-input-group > .semi-input-wrapper {
1670
- border-radius: 0;
1671
- }
1672
- .semi-input-group .semi-select:first-child,
1673
- .semi-input-group .semi-tagInput:first-child,
1674
- .semi-input-group .semi-cascader:first-child,
1675
- .semi-input-group .semi-tree-select:first-child, .semi-input-group > .semi-input-wrapper:first-child {
1676
- border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
1677
- }
1678
- .semi-input-group .semi-select:last-child,
1679
- .semi-input-group .semi-tagInput:last-child,
1680
- .semi-input-group .semi-cascader:last-child,
1681
- .semi-input-group .semi-tree-select:last-child, .semi-input-group > .semi-input-wrapper:last-child {
1682
- border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
1683
- }
1684
- .semi-input-group .semi-select:not(:last-child),
1685
- .semi-input-group .semi-tagInput:not(:last-child),
1686
- .semi-input-group .semi-cascader:not(:last-child),
1687
- .semi-input-group .semi-tree-select:not(:last-child), .semi-input-group > .semi-input-wrapper:not(:last-child) {
1688
- position: relative;
1689
- }
1690
- .semi-input-group .semi-select:not(:last-child)::after,
1691
- .semi-input-group .semi-tagInput:not(:last-child)::after,
1692
- .semi-input-group .semi-cascader:not(:last-child)::after,
1693
- .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
1694
- content: "";
1695
- background-color: var(--semi-color-border);
1696
- width: 1px;
1697
- position: absolute;
1698
- right: -1px;
1699
- top: 1px;
1700
- bottom: 1px;
1701
- }
1702
- .semi-input-group .semi-select {
1703
- overflow-y: visible;
1704
- }
1705
- .semi-input-group .semi-input-number .semi-input-wrapper,
1706
- .semi-input-group .semi-input-number .semi-datepicker-range-input,
1707
- .semi-input-group .semi-datepicker .semi-input-wrapper,
1708
- .semi-input-group .semi-datepicker .semi-datepicker-range-input,
1709
- .semi-input-group .semi-timepicker .semi-input-wrapper,
1710
- .semi-input-group .semi-timepicker .semi-datepicker-range-input,
1711
- .semi-input-group .semi-autocomplete .semi-input-wrapper,
1712
- .semi-input-group .semi-autocomplete .semi-datepicker-range-input {
1713
- border-radius: 0;
1714
- }
1715
- .semi-input-group .semi-input-number:first-child .semi-input-wrapper,
1716
- .semi-input-group .semi-input-number:first-child .semi-datepicker-range-input,
1717
- .semi-input-group .semi-datepicker:first-child .semi-input-wrapper,
1718
- .semi-input-group .semi-datepicker:first-child .semi-datepicker-range-input,
1719
- .semi-input-group .semi-timepicker:first-child .semi-input-wrapper,
1720
- .semi-input-group .semi-timepicker:first-child .semi-datepicker-range-input,
1721
- .semi-input-group .semi-autocomplete:first-child .semi-input-wrapper,
1722
- .semi-input-group .semi-autocomplete:first-child .semi-datepicker-range-input {
1723
- border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
1724
- }
1725
- .semi-input-group .semi-input-number:last-child .semi-input-wrapper,
1726
- .semi-input-group .semi-input-number:last-child .semi-datepicker-range-input,
1727
- .semi-input-group .semi-datepicker:last-child .semi-input-wrapper,
1728
- .semi-input-group .semi-datepicker:last-child .semi-datepicker-range-input,
1729
- .semi-input-group .semi-timepicker:last-child .semi-input-wrapper,
1730
- .semi-input-group .semi-timepicker:last-child .semi-datepicker-range-input,
1731
- .semi-input-group .semi-autocomplete:last-child .semi-input-wrapper,
1732
- .semi-input-group .semi-autocomplete:last-child .semi-datepicker-range-input {
1733
- border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
1734
- }
1735
- .semi-input-group .semi-input-number:not(:last-child),
1736
- .semi-input-group .semi-datepicker:not(:last-child),
1737
- .semi-input-group .semi-timepicker:not(:last-child),
1738
- .semi-input-group .semi-autocomplete:not(:last-child) {
1739
- position: relative;
1740
- }
1741
- .semi-input-group .semi-input-number:not(:last-child)::after,
1742
- .semi-input-group .semi-datepicker:not(:last-child)::after,
1743
- .semi-input-group .semi-timepicker:not(:last-child)::after,
1744
- .semi-input-group .semi-autocomplete:not(:last-child)::after {
1745
- content: "";
1746
- background-color: var(--semi-color-border);
1747
- width: 1px;
1748
- position: absolute;
1749
- right: -1px;
1750
- top: 1px;
1751
- bottom: 1px;
1752
- }
1753
- .semi-input-group-wrapper-with-top-label {
1754
- margin-top: 16px;
1755
- margin-bottom: 16px;
1756
- }
1757
- .semi-input-group-wrapper-with-top-label .semi-input-group {
1758
- display: flex;
1759
- }
1760
- .semi-input-group-wrapper-with-top-label .semi-input-group .semi-form-field {
1761
- margin-top: 0;
1762
- margin-bottom: 0;
1763
- }
1764
-
1765
- .semi-input-only_border {
1766
- background: transparent;
1767
- border-color: var(--semi-color-border);
1768
- }
1769
- .semi-input-only_border:hover {
1770
- background: transparent;
1771
- border-color: var(--semi-color-border);
1772
- }
1773
- .semi-input-only_border:focus-within {
1774
- background: transparent;
1775
- }
1776
-
1777
- .semi-input-borderless:not(:focus-within):not(:hover) {
1778
- background-color: transparent;
1779
- border-color: transparent;
1780
- }
1781
- .semi-input-borderless:focus-within:not(:active) {
1782
- background-color: transparent;
1783
- }
1784
- .semi-input-borderless.semi-input-wrapper-error:not(:focus-within) {
1785
- border-color: var(--semi-color-danger);
1786
- }
1787
- .semi-input-borderless.semi-input-wrapper-warning:not(:focus-within) {
1788
- border-color: var(--semi-color-warning);
1789
- }
1790
-
1791
- .semi-rtl .semi-input-wrapper,
1792
- .semi-portal-rtl .semi-input-wrapper {
1793
- direction: rtl;
1794
- }
1795
- .semi-rtl .semi-input-wrapper__with-prefix .semi-input,
1796
- .semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input {
1797
- padding-left: auto;
1798
- padding-right: 0;
1799
- }
1800
- .semi-rtl .semi-input-wrapper__with-suffix .semi-input,
1801
- .semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input {
1802
- padding-right: auto;
1803
- padding-left: 0;
1804
- }
1805
- .semi-rtl .semi-input,
1806
- .semi-portal-rtl .semi-input {
1807
- padding-left: 12px;
1808
- padding-right: 12px;
1809
- }
1810
- .semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
1811
- .semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text,
1812
- .semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
1813
- .semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text {
1814
- margin-left: auto;
1815
- margin-right: 0;
1816
- }
1817
- .semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
1818
- .semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon,
1819
- .semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
1820
- .semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon {
1821
- margin-left: auto;
1822
- margin-right: 0;
1823
- }
1824
- .semi-rtl .semi-input-append,
1825
- .semi-portal-rtl .semi-input-append {
1826
- border-left: 0;
1827
- border-right: 1px transparent solid;
1828
- }
1829
- .semi-rtl .semi-input-prepend,
1830
- .semi-portal-rtl .semi-input-prepend {
1831
- border-right: 0;
1832
- border-left: 1px transparent solid;
1833
- }
1834
- .semi-rtl .semi-input-group .semi-select:not(:last-child)::after,
1835
- .semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
1836
- .semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after,
1837
- .semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after,
1838
- .semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
1839
- .semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after,
1840
- .semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
1841
- right: auto;
1842
- left: -1px;
1843
- }
1844
- .semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after,
1845
- .semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after {
1846
- right: auto;
1847
- left: -1px;
1848
- }
1849
- .semi-rtl .semi-input-textarea-wrapper,
1850
- .semi-portal-rtl .semi-input-textarea-wrapper {
1851
- direction: rtl;
1852
- }
1853
- .semi-rtl .semi-input-textarea-counter,
1854
- .semi-portal-rtl .semi-input-textarea-counter {
1855
- text-align: left;
1856
- }
1857
- .semi-rtl .semi-input-textarea-showClear,
1858
- .semi-portal-rtl .semi-input-textarea-showClear {
1859
- padding-right: 0;
1860
- padding-left: 36px;
1861
- }
1862
-
1863
- .semi-input-textarea-wrapper {
1864
- box-sizing: border-box;
1865
- display: inline-block;
1866
- position: relative;
1867
- width: 100%;
1868
- border: 1px transparent solid;
1869
- border-radius: var(--semi-border-radius-small);
1870
- vertical-align: bottom;
1871
- background-color: var(--semi-color-fill-0);
1872
- transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
1873
- }
1874
- .semi-input-textarea-wrapper-resizeX {
1875
- display: inline-block;
1876
- width: fit-content;
1877
- max-width: 100%;
1878
- }
1879
- .semi-input-textarea-wrapper:hover {
1880
- background-color: var(--semi-color-fill-1);
1881
- }
1882
- .semi-input-textarea-wrapper-focus {
1883
- background-color: var(--semi-color-fill-0);
1884
- border: 1px var(--semi-color-focus-border) solid;
1885
- }
1886
- .semi-input-textarea-wrapper-focus:hover, .semi-input-textarea-wrapper-focus:active {
1887
- background-color: var(--semi-color-fill-0);
1888
- }
1889
- .semi-input-textarea-wrapper:active {
1890
- background-color: var(--semi-color-fill-2);
1891
- }
1892
- .semi-input-textarea-wrapper .semi-input-clearbtn {
1893
- position: absolute;
1894
- top: 0;
1895
- min-width: 24px;
1896
- color: var(--semi-color-text-2);
1897
- right: 4px;
1898
- height: 32px;
1899
- display: flex;
1900
- align-items: center;
1901
- justify-content: center;
1902
- }
1903
- .semi-input-textarea-wrapper .semi-input-clearbtn > svg {
1904
- pointer-events: none;
1905
- }
1906
- .semi-input-textarea-wrapper .semi-input-clearbtn:hover {
1907
- cursor: pointer;
1908
- }
1909
- .semi-input-textarea-wrapper .semi-input-clearbtn:hover .semi-icon {
1910
- color: var(--semi-color-primary-hover);
1911
- }
1912
- .semi-input-textarea-wrapper .semi-input-clearbtn-hidden {
1913
- visibility: hidden;
1914
- }
1915
- .semi-input-textarea-wrapper-disabled, .semi-input-textarea-wrapper-readonly {
1916
- cursor: not-allowed;
1917
- color: var(--semi-color-disabled-text);
1918
- background-color: var(--semi-color-disabled-fill);
1919
- }
1920
- .semi-input-textarea-wrapper-disabled:hover, .semi-input-textarea-wrapper-readonly:hover {
1921
- background-color: var(--semi-color-disabled-fill);
1922
- }
1923
- .semi-input-textarea-wrapper-disabled::placeholder, .semi-input-textarea-wrapper-readonly::placeholder {
1924
- color: var(--semi-color-disabled-text);
1925
- }
1926
- .semi-input-textarea-wrapper-readonly {
1927
- cursor: text;
1928
- }
1929
- .semi-input-textarea-wrapper-error {
1930
- background-color: var(--semi-color-danger-light-default);
1931
- border-color: var(--semi-color-danger-light-default);
1932
- }
1933
- .semi-input-textarea-wrapper-error:hover {
1934
- background-color: var(--semi-color-danger-light-hover);
1935
- border-color: var(--semi-color-danger-light-hover);
1936
- }
1937
- .semi-input-textarea-wrapper-error.semi-input-textarea-wrapper-focus {
1938
- background-color: var(--semi-color-danger-light-default);
1939
- border-color: var(--semi-color-danger);
1940
- }
1941
- .semi-input-textarea-wrapper-error:active {
1942
- background-color: var(--semi-color-danger-light-active);
1943
- border-color: var(--semi-color-danger);
1944
- }
1945
- .semi-input-textarea-wrapper-warning {
1946
- background-color: var(--semi-color-warning-light-default);
1947
- border-color: var(--semi-color-warning-light-default);
1948
- }
1949
- .semi-input-textarea-wrapper-warning:hover {
1950
- background-color: var(--semi-color-warning-light-hover);
1951
- border-color: var(--semi-color-warning-light-hover);
1952
- }
1953
- .semi-input-textarea-wrapper-warning.semi-input-textarea-wrapper-focus {
1954
- background-color: var(--semi-color-warning-light-default);
1955
- border-color: var(--semi-color-warning);
1956
- }
1957
- .semi-input-textarea-wrapper-warning:active {
1958
- background-color: var(--semi-color-warning-light-active);
1959
- border-color: var(--semi-color-warning);
1960
- }
1961
-
1962
- .semi-input-textarea {
1963
- position: relative;
1964
- resize: none;
1965
- padding: 5px 12px;
1966
- box-shadow: none;
1967
- font-size: 14px;
1968
- line-height: 20px;
1969
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
1970
- background-color: transparent;
1971
- border: 0 solid transparent;
1972
- vertical-align: bottom;
1973
- width: 100%;
1974
- outline: none;
1975
- cursor: text;
1976
- box-sizing: border-box;
1977
- color: var(--semi-color-text-0);
1978
- }
1979
- .semi-input-textarea:hover {
1980
- border-color: transparent;
1981
- }
1982
- .semi-input-textarea::placeholder {
1983
- color: var(--semi-color-text-2);
1984
- }
1985
- .semi-input-textarea-showClear {
1986
- padding-right: 36px;
1987
- }
1988
- .semi-input-textarea-disabled, .semi-input-textarea-readonly {
1989
- cursor: not-allowed;
1990
- color: var(--semi-color-disabled-text);
1991
- background-color: transparent;
1992
- }
1993
- .semi-input-textarea-disabled:hover, .semi-input-textarea-readonly:hover {
1994
- background-color: transparent;
1995
- }
1996
- .semi-input-textarea-disabled::placeholder, .semi-input-textarea-readonly::placeholder {
1997
- color: var(--semi-color-disabled-text);
1998
- }
1999
- .semi-input-textarea-readonly {
2000
- cursor: text;
2001
- }
2002
- .semi-input-textarea-autosize {
2003
- overflow: hidden;
2004
- resize: none;
2005
- }
2006
- .semi-input-textarea-counter {
2007
- font-size: 12px;
2008
- line-height: 16px;
2009
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
2010
- display: flex;
2011
- flex-direction: column;
2012
- justify-content: center;
2013
- padding: 3px 12px 5px 12px;
2014
- min-height: 24px;
2015
- text-align: right;
2016
- color: var(--semi-color-text-2);
2017
- }
2018
- .semi-input-textarea-counter-exceed {
2019
- color: var(--semi-color-danger);
2020
- }
2021
-
2022
- .semi-input-textarea-borderless:not(:focus-within):not(:hover) {
2023
- background-color: transparent;
2024
- border-color: transparent;
2025
- }
2026
- .semi-input-textarea-borderless:focus-within:not(:active) {
2027
- background-color: transparent;
2028
- }
2029
- .semi-input-textarea-borderless.semi-input-textarea-wrapper-error:not(:focus-within) {
2030
- border-color: var(--semi-color-danger);
2031
- }
2032
- .semi-input-textarea-borderless.semi-input-textarea-wrapper-warning:not(:focus-within) {
2033
- border-color: var(--semi-color-warning);
2034
- }
2035
- .semi-input-textarea-borderless.semi-input-textarea-wrapper-error .semi-input-textarea-counter {
2036
- color: var(--semi-color-danger);
2037
- }
2038
- .semi-input-textarea-borderless.semi-input-textarea-wrapper-warning .semi-input-textarea-counter {
2039
- color: var(--semi-color-warning);
2040
- }
2041
-
2042
- .semi-input-textarea-wrapper-withLineNumber {
2043
- display: flex;
2044
- padding: 0;
2045
- align-items: flex-start;
2046
- }
2047
- .semi-input-textarea-wrapper-withLineNumber.semi-input-textarea-wrapper-resizeX {
2048
- display: inline-flex;
2049
- width: fit-content;
2050
- max-width: 100%;
2051
- }
2052
- .semi-input-textarea-wrapper-withLineNumber.semi-input-textarea-wrapper-resizeX .semi-input-textarea-content {
2053
- flex: 0 0 auto;
2054
- }
2055
- .semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber {
2056
- flex-shrink: 0;
2057
- padding: 5px 12px;
2058
- background-color: var(--semi-color-fill-1);
2059
- border-right: 1px solid var(--semi-color-border);
2060
- color: var(--semi-color-text-2);
2061
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
2062
- font-size: inherit;
2063
- line-height: 1.5;
2064
- text-align: right;
2065
- user-select: none;
2066
- min-width: 36px;
2067
- border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
2068
- overflow-y: auto;
2069
- overflow-x: hidden;
2070
- scrollbar-width: none;
2071
- -ms-overflow-style: none;
2072
- }
2073
- .semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber::-webkit-scrollbar {
2074
- display: none;
2075
- }
2076
- .semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-content {
2077
- display: flex;
2078
- flex: 1;
2079
- min-width: 0;
2080
- }
2081
- .semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber-item {
2082
- display: flex;
2083
- align-items: flex-start;
2084
- justify-content: flex-end;
2085
- box-sizing: border-box;
2086
- }
2087
- .semi-input-textarea-wrapper-withLineNumber .semi-input-textarea {
2088
- border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
2089
- line-height: 1.5;
2090
- flex: 1;
2091
- }
2092
-
2093
- .semi-rtl .semi-input-wrapper,
2094
- .semi-portal-rtl .semi-input-wrapper {
2095
- direction: rtl;
2096
- }
2097
- .semi-rtl .semi-input-wrapper__with-prefix .semi-input,
2098
- .semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input {
2099
- padding-left: auto;
2100
- padding-right: 0;
2101
- }
2102
- .semi-rtl .semi-input-wrapper__with-suffix .semi-input,
2103
- .semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input {
2104
- padding-right: auto;
2105
- padding-left: 0;
2106
- }
2107
- .semi-rtl .semi-input,
2108
- .semi-portal-rtl .semi-input {
2109
- padding-left: 12px;
2110
- padding-right: 12px;
2111
- }
2112
- .semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
2113
- .semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text,
2114
- .semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
2115
- .semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text {
2116
- margin-left: auto;
2117
- margin-right: 0;
2118
- }
2119
- .semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
2120
- .semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon,
2121
- .semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
2122
- .semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon {
2123
- margin-left: auto;
2124
- margin-right: 0;
2125
- }
2126
- .semi-rtl .semi-input-append,
2127
- .semi-portal-rtl .semi-input-append {
2128
- border-left: 0;
2129
- border-right: 1px transparent solid;
2130
- }
2131
- .semi-rtl .semi-input-prepend,
2132
- .semi-portal-rtl .semi-input-prepend {
2133
- border-right: 0;
2134
- border-left: 1px transparent solid;
2135
- }
2136
- .semi-rtl .semi-input-group .semi-select:not(:last-child)::after,
2137
- .semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
2138
- .semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after,
2139
- .semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after,
2140
- .semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
2141
- .semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after,
2142
- .semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
2143
- right: auto;
2144
- left: -1px;
2145
- }
2146
- .semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after,
2147
- .semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after {
2148
- right: auto;
2149
- left: -1px;
2150
- }
2151
- .semi-rtl .semi-input-textarea-wrapper,
2152
- .semi-portal-rtl .semi-input-textarea-wrapper {
2153
- direction: rtl;
2154
- }
2155
- .semi-rtl .semi-input-textarea-counter,
2156
- .semi-portal-rtl .semi-input-textarea-counter {
2157
- text-align: left;
2158
- }
2159
- .semi-rtl .semi-input-textarea-showClear,
2160
- .semi-portal-rtl .semi-input-textarea-showClear {
2161
- padding-right: 0;
2162
- padding-left: 36px;
2163
- }
2164
-
2165
- .semi-avatar {
2166
- position: relative;
2167
- display: inline-flex;
2168
- overflow: hidden;
2169
- align-items: center;
2170
- justify-content: center;
2171
- white-space: nowrap;
2172
- text-align: center;
2173
- vertical-align: middle;
2174
- }
2175
- .semi-avatar:focus-visible {
2176
- outline: 2px solid var(--semi-color-primary-light-active);
2177
- }
2178
- .semi-avatar-focus {
2179
- outline: 2px solid var(--semi-color-primary-light-active);
2180
- }
2181
- .semi-avatar-no-focus-visible:focus-visible {
2182
- outline: none;
2183
- }
2184
- .semi-avatar .semi-avatar-label {
2185
- display: flex;
2186
- align-items: center;
2187
- font-size: 14px;
2188
- line-height: 20px;
2189
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
2190
- font-weight: 600;
2191
- }
2192
- .semi-avatar-content {
2193
- user-select: none;
2194
- }
2195
- .semi-avatar-extra-extra-small {
2196
- width: 20px;
2197
- height: 20px;
2198
- border-radius: 3px;
2199
- }
2200
- .semi-avatar-extra-extra-small .semi-avatar-content {
2201
- transform-origin: center;
2202
- transform: scale(0.8);
2203
- }
2204
- .semi-avatar-extra-extra-small .semi-avatar-label {
2205
- font-size: 10px;
2206
- line-height: 15px;
2207
- }
2208
- .semi-avatar-extra-small {
2209
- width: 24px;
2210
- height: 24px;
2211
- border-radius: 3px;
2212
- }
2213
- .semi-avatar-extra-small .semi-avatar-content {
2214
- transform-origin: center;
2215
- transform: scale(0.8);
2216
- }
2217
- .semi-avatar-extra-small .semi-avatar-label {
2218
- font-size: 10px;
2219
- line-height: 15px;
2220
- }
2221
- .semi-avatar-small {
2222
- width: 32px;
2223
- height: 32px;
2224
- border-radius: 3px;
2225
- }
2226
- .semi-avatar-small .semi-avatar-label {
2227
- font-size: 12px;
2228
- line-height: 16px;
2229
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
2230
- }
2231
- .semi-avatar-default {
2232
- width: 40px;
2233
- height: 40px;
2234
- border-radius: 3px;
2235
- }
2236
- .semi-avatar-default .semi-avatar-label {
2237
- font-size: 18px;
2238
- line-height: 24px;
2239
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
2240
- }
2241
- .semi-avatar-medium {
2242
- width: 48px;
2243
- height: 48px;
2244
- border-radius: 3px;
2245
- }
2246
- .semi-avatar-medium .semi-avatar-label {
2247
- font-size: 20px;
2248
- line-height: 28px;
2249
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
2250
- }
2251
- .semi-avatar-large {
2252
- width: 72px;
2253
- height: 72px;
2254
- border-radius: 6px;
2255
- }
2256
- .semi-avatar-large .semi-avatar-label {
2257
- font-size: 32px;
2258
- line-height: 44px;
2259
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
2260
- }
2261
- .semi-avatar-extra-large {
2262
- width: 128px;
2263
- height: 128px;
2264
- border-radius: 12px;
2265
- }
2266
- .semi-avatar-extra-large .semi-avatar-label {
2267
- font-size: 64px;
2268
- line-height: 77px;
2269
- }
2270
- .semi-avatar-circle {
2271
- border-radius: var(--semi-border-radius-circle);
2272
- }
2273
- .semi-avatar-image {
2274
- background-color: transparent;
2275
- }
2276
- .semi-avatar > img {
2277
- display: block;
2278
- width: 100%;
2279
- height: 100%;
2280
- object-fit: cover;
2281
- }
2282
- .semi-avatar-hover {
2283
- position: absolute;
2284
- left: 0;
2285
- top: 0;
2286
- width: 100%;
2287
- height: 100%;
2288
- }
2289
- .semi-avatar:hover {
2290
- cursor: pointer;
2291
- }
2292
-
2293
- .semi-avatar-wrapper {
2294
- position: relative;
2295
- display: inline-flex;
2296
- flex-direction: column;
2297
- align-items: center;
2298
- width: fit-content;
2299
- }
2300
- .semi-avatar-wrapper .semi-avatar-top_slot-bg {
2301
- position: absolute;
2302
- display: flex;
2303
- justify-content: center;
2304
- border-radius: 50%;
2305
- overflow: hidden;
2306
- }
2307
- .semi-avatar-wrapper .semi-avatar-top_slot-bg-small {
2308
- width: 32px;
2309
- height: 32px;
2310
- }
2311
- .semi-avatar-wrapper .semi-avatar-top_slot-bg-default {
2312
- width: 40px;
2313
- height: 40px;
2314
- }
2315
- .semi-avatar-wrapper .semi-avatar-top_slot-bg-medium {
2316
- width: 48px;
2317
- height: 48px;
2318
- }
2319
- .semi-avatar-wrapper .semi-avatar-top_slot-bg-large {
2320
- width: 72px;
2321
- height: 72px;
2322
- }
2323
- .semi-avatar-wrapper .semi-avatar-top_slot-bg-extra-large {
2324
- width: 128px;
2325
- height: 128px;
2326
- }
2327
- .semi-avatar-wrapper .semi-avatar-top_slot-bg-svg {
2328
- position: absolute;
2329
- }
2330
- .semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-small {
2331
- top: -28px;
2332
- scale: 0.4;
2333
- }
2334
- .semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-default {
2335
- top: -32px;
2336
- scale: 0.7;
2337
- }
2338
- .semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-medium {
2339
- top: -30px;
2340
- scale: 0.8;
2341
- }
2342
- .semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-large {
2343
- top: -30px;
2344
- scale: 1.1;
2345
- }
2346
- .semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-extra-large {
2347
- top: -32px;
2348
- scale: 1.4;
2349
- }
2350
- .semi-avatar-wrapper .semi-avatar-top_slot-wrapper {
2351
- position: absolute;
2352
- display: flex;
2353
- justify-content: center;
2354
- }
2355
- .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot {
2356
- color: var(--semi-color-bg-0);
2357
- font-weight: 600;
2358
- }
2359
- .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content {
2360
- user-select: none;
2361
- position: relative;
2362
- line-height: normal;
2363
- }
2364
- .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-small {
2365
- font-size: 5px;
2366
- margin-top: 0px;
2367
- }
2368
- .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-default {
2369
- font-size: 6px;
2370
- margin-top: -2px;
2371
- }
2372
- .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-medium {
2373
- font-size: 8px;
2374
- margin-top: 0px;
2375
- }
2376
- .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-large {
2377
- font-size: 14px;
2378
- margin-top: 0px;
2379
- }
2380
- .semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-extra-large {
2381
- font-size: 16px;
2382
- margin-top: 0px;
2383
- }
2384
- .semi-avatar-wrapper .semi-avatar-bottom_slot {
2385
- color: var(--semi-color-bg-0);
2386
- position: absolute;
2387
- cursor: pointer;
2388
- bottom: 3.5px;
2389
- transform: translateY(50%);
2390
- user-select: none;
2391
- }
2392
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle {
2393
- display: flex;
2394
- justify-content: center;
2395
- align-items: center;
2396
- background: var(--semi-color-primary);
2397
- border-radius: var(--semi-border-radius-circle);
2398
- line-height: normal;
2399
- }
2400
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-extra-small {
2401
- width: 12px;
2402
- height: 12px;
2403
- font-size: 5px;
2404
- }
2405
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-small {
2406
- width: 12px;
2407
- height: 12px;
2408
- font-size: 5px;
2409
- }
2410
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-default {
2411
- width: 16px;
2412
- height: 16px;
2413
- font-size: 12px;
2414
- }
2415
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-medium {
2416
- width: 18px;
2417
- height: 18px;
2418
- font-size: 12px;
2419
- }
2420
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-large {
2421
- width: 28px;
2422
- height: 28px;
2423
- font-size: 12px;
2424
- }
2425
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-extra-large {
2426
- width: 28px;
2427
- height: 28px;
2428
- font-size: 14px;
2429
- }
2430
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square {
2431
- display: flex;
2432
- justify-content: center;
2433
- align-items: center;
2434
- background: var(--semi-color-primary);
2435
- border-radius: 4px;
2436
- padding: 1px 4px;
2437
- font-weight: 600;
2438
- border-style: solid;
2439
- border-color: var(--semi-color-bg-0);
2440
- }
2441
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-extra_small {
2442
- font-size: 5px;
2443
- border-width: 2px;
2444
- }
2445
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-small {
2446
- font-size: 5px;
2447
- border-width: 2px;
2448
- }
2449
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-default {
2450
- font-size: 12px;
2451
- border-width: 2px;
2452
- }
2453
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-medium {
2454
- font-size: 12px;
2455
- border-width: 2px;
2456
- }
2457
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-large {
2458
- font-size: 12px;
2459
- border-width: 2px;
2460
- }
2461
- .semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-extra-large {
2462
- font-size: 14px;
2463
- border-width: 2px;
2464
- }
2465
-
2466
- .semi-avatar-group {
2467
- display: inline-block;
2468
- }
2469
- .semi-avatar-group .semi-avatar {
2470
- box-sizing: border-box;
2471
- }
2472
- .semi-avatar-group .semi-avatar:first-child {
2473
- margin-left: 0;
2474
- }
2475
- .semi-avatar-group .semi-avatar-extra-large {
2476
- border: 3px var(--semi-color-bg-1) solid;
2477
- margin-left: -32px;
2478
- }
2479
- .semi-avatar-group .semi-avatar-large {
2480
- border: 3px var(--semi-color-bg-1) solid;
2481
- margin-left: -18px;
2482
- }
2483
- .semi-avatar-group .semi-avatar-medium {
2484
- border: 2px var(--semi-color-bg-1) solid;
2485
- margin-left: -12px;
2486
- }
2487
- .semi-avatar-group .semi-avatar-default {
2488
- border: 2px var(--semi-color-bg-1) solid;
2489
- margin-left: -12px;
2490
- }
2491
- .semi-avatar-group .semi-avatar-small {
2492
- border: 2px var(--semi-color-bg-1) solid;
2493
- margin-left: -12px;
2494
- }
2495
- .semi-avatar-group .semi-avatar-extra-small {
2496
- border: 1px var(--semi-color-bg-1) solid;
2497
- margin-left: -10px;
2498
- }
2499
- .semi-avatar-group .semi-avatar-extra-extra-small {
2500
- border: 1px var(--semi-color-bg-1) solid;
2501
- margin-left: -4px;
2502
- }
2503
- .semi-avatar-group .semi-avatar-item-start-0 {
2504
- z-index: 100;
2505
- }
2506
- .semi-avatar-group .semi-avatar-item-end-0 {
2507
- z-index: 80;
2508
- }
2509
- .semi-avatar-group .semi-avatar-item-start-1 {
2510
- z-index: 99;
2511
- }
2512
- .semi-avatar-group .semi-avatar-item-end-1 {
2513
- z-index: 81;
2514
- }
2515
- .semi-avatar-group .semi-avatar-item-start-2 {
2516
- z-index: 98;
2517
- }
2518
- .semi-avatar-group .semi-avatar-item-end-2 {
2519
- z-index: 82;
2520
- }
2521
- .semi-avatar-group .semi-avatar-item-start-3 {
2522
- z-index: 97;
2523
- }
2524
- .semi-avatar-group .semi-avatar-item-end-3 {
2525
- z-index: 83;
2526
- }
2527
- .semi-avatar-group .semi-avatar-item-start-4 {
2528
- z-index: 96;
2529
- }
2530
- .semi-avatar-group .semi-avatar-item-end-4 {
2531
- z-index: 84;
2532
- }
2533
- .semi-avatar-group .semi-avatar-item-start-5 {
2534
- z-index: 95;
2535
- }
2536
- .semi-avatar-group .semi-avatar-item-end-5 {
2537
- z-index: 85;
2538
- }
2539
- .semi-avatar-group .semi-avatar-item-start-6 {
2540
- z-index: 94;
2541
- }
2542
- .semi-avatar-group .semi-avatar-item-end-6 {
2543
- z-index: 86;
2544
- }
2545
- .semi-avatar-group .semi-avatar-item-start-7 {
2546
- z-index: 93;
2547
- }
2548
- .semi-avatar-group .semi-avatar-item-end-7 {
2549
- z-index: 87;
2550
- }
2551
- .semi-avatar-group .semi-avatar-item-start-8 {
2552
- z-index: 92;
2553
- }
2554
- .semi-avatar-group .semi-avatar-item-end-8 {
2555
- z-index: 88;
2556
- }
2557
- .semi-avatar-group .semi-avatar-item-start-9 {
2558
- z-index: 91;
2559
- }
2560
- .semi-avatar-group .semi-avatar-item-end-9 {
2561
- z-index: 89;
2562
- }
2563
- .semi-avatar-group .semi-avatar-item-start-10 {
2564
- z-index: 90;
2565
- }
2566
- .semi-avatar-group .semi-avatar-item-end-10 {
2567
- z-index: 90;
2568
- }
2569
- .semi-avatar-group .semi-avatar-item-start-11 {
2570
- z-index: 89;
2571
- }
2572
- .semi-avatar-group .semi-avatar-item-end-11 {
2573
- z-index: 91;
2574
- }
2575
- .semi-avatar-group .semi-avatar-item-start-12 {
2576
- z-index: 88;
2577
- }
2578
- .semi-avatar-group .semi-avatar-item-end-12 {
2579
- z-index: 92;
2580
- }
2581
- .semi-avatar-group .semi-avatar-item-start-13 {
2582
- z-index: 87;
2583
- }
2584
- .semi-avatar-group .semi-avatar-item-end-13 {
2585
- z-index: 93;
2586
- }
2587
- .semi-avatar-group .semi-avatar-item-start-14 {
2588
- z-index: 86;
2589
- }
2590
- .semi-avatar-group .semi-avatar-item-end-14 {
2591
- z-index: 94;
2592
- }
2593
- .semi-avatar-group .semi-avatar-item-start-15 {
2594
- z-index: 85;
2595
- }
2596
- .semi-avatar-group .semi-avatar-item-end-15 {
2597
- z-index: 95;
2598
- }
2599
- .semi-avatar-group .semi-avatar-item-start-16 {
2600
- z-index: 84;
2601
- }
2602
- .semi-avatar-group .semi-avatar-item-end-16 {
2603
- z-index: 96;
2604
- }
2605
- .semi-avatar-group .semi-avatar-item-start-17 {
2606
- z-index: 83;
2607
- }
2608
- .semi-avatar-group .semi-avatar-item-end-17 {
2609
- z-index: 97;
2610
- }
2611
- .semi-avatar-group .semi-avatar-item-start-18 {
2612
- z-index: 82;
2613
- }
2614
- .semi-avatar-group .semi-avatar-item-end-18 {
2615
- z-index: 98;
2616
- }
2617
- .semi-avatar-group .semi-avatar-item-start-19 {
2618
- z-index: 81;
2619
- }
2620
- .semi-avatar-group .semi-avatar-item-end-19 {
2621
- z-index: 99;
2622
- }
2623
- .semi-avatar-group .semi-avatar-item-start-20 {
2624
- z-index: 80;
2625
- }
2626
- .semi-avatar-group .semi-avatar-item-end-20 {
2627
- z-index: 100;
2628
- }
2629
- .semi-avatar-group .semi-avatar-item-more {
2630
- background-color: rgba(var(--semi-grey-5), 1);
2631
- }
2632
-
2633
- .semi-avatar-amber {
2634
- background-color: rgba(var(--semi-amber-3), 1);
2635
- color: rgba(var(--semi-white), 1);
2636
- }
2637
-
2638
- .semi-avatar-blue {
2639
- background-color: rgba(var(--semi-blue-3), 1);
2640
- color: rgba(var(--semi-white), 1);
2641
- }
2642
-
2643
- .semi-avatar-cyan {
2644
- background-color: rgba(var(--semi-cyan-3), 1);
2645
- color: rgba(var(--semi-white), 1);
2646
- }
2647
-
2648
- .semi-avatar-green {
2649
- background-color: rgba(var(--semi-green-3), 1);
2650
- color: rgba(var(--semi-white), 1);
2651
- }
2652
-
2653
- .semi-avatar-grey {
2654
- background-color: rgba(var(--semi-grey-3), 1);
2655
- color: rgba(var(--semi-white), 1);
2656
- }
2657
-
2658
- .semi-avatar-indigo {
2659
- background-color: rgba(var(--semi-indigo-3), 1);
2660
- color: rgba(var(--semi-white), 1);
2661
- }
2662
-
2663
- .semi-avatar-light-blue {
2664
- background-color: rgba(var(--semi-light-blue-3), 1);
2665
- color: rgba(var(--semi-white), 1);
2666
- }
2667
-
2668
- .semi-avatar-light-green {
2669
- background-color: rgba(var(--semi-light-green-3), 1);
2670
- color: rgba(var(--semi-white), 1);
2671
- }
2672
-
2673
- .semi-avatar-lime {
2674
- background-color: rgba(var(--semi-lime-3), 1);
2675
- color: rgba(var(--semi-white), 1);
2676
- }
2677
-
2678
- .semi-avatar-orange {
2679
- background-color: rgba(var(--semi-orange-3), 1);
2680
- color: rgba(var(--semi-white), 1);
2681
- }
2682
-
2683
- .semi-avatar-pink {
2684
- background-color: rgba(var(--semi-pink-3), 1);
2685
- color: rgba(var(--semi-white), 1);
2686
- }
2687
-
2688
- .semi-avatar-purple {
2689
- background-color: rgba(var(--semi-purple-3), 1);
2690
- color: rgba(var(--semi-white), 1);
2691
- }
2692
-
2693
- .semi-avatar-red {
2694
- background-color: rgba(var(--semi-red-3), 1);
2695
- color: rgba(var(--semi-white), 1);
2696
- }
2697
-
2698
- .semi-avatar-teal {
2699
- background-color: rgba(var(--semi-teal-3), 1);
2700
- color: rgba(var(--semi-white), 1);
2701
- }
2702
-
2703
- .semi-avatar-violet {
2704
- background-color: rgba(var(--semi-violet-3), 1);
2705
- color: rgba(var(--semi-white), 1);
2706
- }
2707
-
2708
- .semi-avatar-yellow {
2709
- background-color: rgba(var(--semi-yellow-3), 1);
2710
- color: rgba(var(--semi-white), 1);
2711
- }
2712
-
2713
- .semi-avatar-additionalBorder {
2714
- border-style: solid;
2715
- border-color: var(--semi-color-primary);
2716
- display: inline-block;
2717
- box-sizing: border-box;
2718
- position: absolute;
2719
- border-width: 1.5px;
2720
- top: -3.5px;
2721
- left: -3.5px;
2722
- }
2723
- .semi-avatar-additionalBorder-extra-extra-small {
2724
- width: 27px;
2725
- height: 27px;
2726
- }
2727
- .semi-avatar-additionalBorder-extra-small {
2728
- width: 31px;
2729
- height: 31px;
2730
- }
2731
- .semi-avatar-additionalBorder-small {
2732
- width: 39px;
2733
- height: 39px;
2734
- }
2735
- .semi-avatar-additionalBorder-default {
2736
- width: 47px;
2737
- height: 47px;
2738
- }
2739
- .semi-avatar-additionalBorder-medium {
2740
- width: 55px;
2741
- height: 55px;
2742
- }
2743
- .semi-avatar-additionalBorder-large {
2744
- width: 79px;
2745
- height: 79px;
2746
- }
2747
- .semi-avatar-additionalBorder-extra-large {
2748
- width: 135px;
2749
- height: 135px;
2750
- }
2751
-
2752
- .semi-avatar-square.semi-avatar-additionalBorder-extra_extra_small {
2753
- border-radius: 3px;
2754
- }
2755
-
2756
- .semi-avatar-square.semi-avatar-additionalBorder-extra_small {
2757
- border-radius: 3px;
2758
- }
2759
-
2760
- .semi-avatar-square.semi-avatar-additionalBorder-small {
2761
- border-radius: 3px;
2762
- }
2763
-
2764
- .semi-avatar-square.semi-avatar-additionalBorder-default {
2765
- border-radius: 3px;
2766
- }
2767
-
2768
- .semi-avatar-square.semi-avatar-additionalBorder-medium {
2769
- border-radius: 3px;
2770
- }
2771
-
2772
- .semi-avatar-square.semi-avatar-additionalBorder-large {
2773
- border-radius: 6px;
2774
- }
2775
-
2776
- .semi-avatar-additionalBorder-circle {
2777
- border-radius: var(--semi-border-radius-circle);
2778
- }
2779
-
2780
- .semi-avatar-additionalBorder-animated {
2781
- animation: 800ms linear infinite semi-avatar-additionalBorder;
2782
- }
2783
-
2784
- .semi-avatar-animated {
2785
- animation: 1000ms linear infinite semi-avatar-content;
2786
- }
2787
-
2788
- @keyframes semi-avatar-additionalBorder {
2789
- 0% {
2790
- opacity: 1;
2791
- transform: scale(1);
2792
- }
2793
- to {
2794
- border-width: 0;
2795
- opacity: 0;
2796
- transform: scale(1.15);
2797
- }
2798
- }
2799
- @keyframes semi-avatar-content {
2800
- 0% {
2801
- transform: scale(1);
2802
- }
2803
- 50% {
2804
- transform: scale(0.9);
2805
- }
2806
- to {
2807
- transform: scale(1);
2808
- }
2809
- }
2810
- .semi-rtl .semi-avatar,
2811
- .semi-portal-rtl .semi-avatar {
2812
- direction: rtl;
2813
- }
2814
- .semi-rtl .semi-avatar-extra-extra-small .semi-avatar-content,
2815
- .semi-portal-rtl .semi-avatar-extra-extra-small .semi-avatar-content {
2816
- transform: scale(0.8);
2817
- }
2818
- .semi-rtl .semi-avatar-extra-small .semi-avatar-content,
2819
- .semi-portal-rtl .semi-avatar-extra-small .semi-avatar-content {
2820
- transform: scale(0.8);
2821
- }
2822
- .semi-rtl .semi-avatar-hover,
2823
- .semi-portal-rtl .semi-avatar-hover {
2824
- left: auto;
2825
- right: 0;
2826
- }
2827
- .semi-rtl .semi-avatar-group,
2828
- .semi-portal-rtl .semi-avatar-group {
2829
- direction: rtl;
2830
- }
2831
- .semi-rtl .semi-avatar-group .semi-avatar:first-child,
2832
- .semi-portal-rtl .semi-avatar-group .semi-avatar:first-child {
2833
- margin-left: auto;
2834
- margin-right: 0;
2835
- }
2836
- .semi-rtl .semi-avatar-group .semi-avatar-extra-large,
2837
- .semi-portal-rtl .semi-avatar-group .semi-avatar-extra-large {
2838
- margin-left: auto;
2839
- margin-right: -32px;
2840
- }
2841
- .semi-rtl .semi-avatar-group .semi-avatar-large,
2842
- .semi-portal-rtl .semi-avatar-group .semi-avatar-large {
2843
- margin-left: auto;
2844
- margin-right: -18px;
2845
- }
2846
- .semi-rtl .semi-avatar-group .semi-avatar-medium,
2847
- .semi-rtl .semi-avatar-group .semi-avatar-small,
2848
- .semi-portal-rtl .semi-avatar-group .semi-avatar-medium,
2849
- .semi-portal-rtl .semi-avatar-group .semi-avatar-small {
2850
- margin-left: auto;
2851
- margin-right: -12px;
2852
- }
2853
- .semi-rtl .semi-avatar-group .semi-avatar-extra-small,
2854
- .semi-portal-rtl .semi-avatar-group .semi-avatar-extra-small {
2855
- margin-left: auto;
2856
- margin-right: -10px;
2857
- }
2858
- .semi-rtl .semi-avatar-group .semi-avatar-extra-extra-small,
2859
- .semi-portal-rtl .semi-avatar-group .semi-avatar-extra-extra-small {
2860
- margin-left: auto;
2861
- margin-right: -4px;
2862
- }
2863
-
2864
- .semi-divider {
2865
- margin: 1px 0px 1px 0px;
2866
- border-bottom: 1px solid var(--semi-color-border);
2867
- color: var(--semi-color-text-0);
2868
- box-sizing: border-box;
2869
- }
2870
- .semi-divider-dashed {
2871
- border-bottom-style: dashed;
2872
- }
2873
- .semi-divider-horizontal {
2874
- width: 100%;
2875
- display: flex;
2876
- }
2877
- .semi-divider-vertical {
2878
- border-bottom: 0;
2879
- display: inline-block;
2880
- margin: 0px 1px 0px 1px;
2881
- border-left: 1px solid var(--semi-color-border);
2882
- height: 20px;
2883
- vertical-align: middle;
2884
- }
2885
- .semi-divider-with-text {
2886
- display: flex;
2887
- border-bottom: 0;
2888
- white-space: nowrap;
2889
- align-items: center;
2890
- }
2891
- .semi-divider-with-text .semi-divider_inner-text {
2892
- font-weight: 600;
2893
- padding: 0px 8px 0px 8px;
2894
- display: inline-block;
2895
- }
2896
- .semi-divider-with-text::before, .semi-divider-with-text::after {
2897
- content: "";
2898
- width: 50%;
2899
- border-bottom: 1px solid var(--semi-color-border);
2900
- }
2901
- .semi-divider-with-text-left::before {
2902
- width: 40px;
2903
- }
2904
- .semi-divider-with-text-left::after {
2905
- flex: 1;
2906
- }
2907
- .semi-divider-with-text-right::before {
2908
- flex: 1;
2909
- }
2910
- .semi-divider-with-text-right::after {
2911
- width: 40px;
2912
- }
2913
-
2914
- .semi-divider-dashed::before, .semi-divider-dashed::after {
2915
- border-bottom: 1px dashed var(--semi-color-border);
2916
- }
2917
-
2918
- .semi-divider-vertical.semi-divider-dashed {
2919
- border-left: 1px dashed var(--semi-color-border);
2920
- }
2921
-
2922
- .semi-image {
2923
- border-radius: var(--semi-border-radius-small);
2924
- position: relative;
2925
- display: inline-block;
2926
- overflow: hidden;
2927
- }
2928
- .semi-image img {
2929
- /**
2930
- * In tailwind, the max-width of img/video is set to 100%,
2931
- * which will affect the amplification effect of the picture.
2932
- * So we need to set max-width to none.
2933
- */
2934
- max-width: none;
2935
- }
2936
- .semi-image-tooltip-children-wrapper {
2937
- display: inline-flex;
2938
- width: fit-content;
2939
- height: fit-content;
2940
- vertical-align: middle;
2941
- }
2942
- .semi-image-img {
2943
- vertical-align: top;
2944
- border-radius: inherit;
2945
- user-select: none;
2946
- }
2947
- .semi-image-img-preview {
2948
- cursor: zoom-in;
2949
- }
2950
- .semi-image-img-error {
2951
- opacity: 0;
2952
- }
2953
- .semi-image-overlay {
2954
- position: absolute;
2955
- top: 0;
2956
- left: 0;
2957
- width: 100%;
2958
- height: 100%;
2959
- }
2960
-
2961
- .semi-image-status {
2962
- width: 100%;
2963
- height: 100%;
2964
- display: flex;
2965
- justify-content: center;
2966
- align-items: center;
2967
- border-radius: var(--semi-border-radius-small);
2968
- background-color: var(--semi-color-fill-0);
2969
- color: var(--semi-color-disabled-text);
2970
- }
2971
-
2972
- .semi-image-preview {
2973
- position: fixed;
2974
- top: 0;
2975
- left: 0;
2976
- width: 100%;
2977
- height: 100%;
2978
- z-index: 1070;
2979
- background-color: var(--semi-color-overlay-bg);
2980
- transition: opacity 500ms;
2981
- overflow: hidden;
2982
- }
2983
- .semi-image-preview-popup {
2984
- position: absolute;
2985
- }
2986
- .semi-image-preview .semi-image-preview-hide {
2987
- opacity: 0;
2988
- }
2989
- .semi-image-preview-icon {
2990
- display: flex;
2991
- justify-content: center;
2992
- align-items: center;
2993
- width: 40px;
2994
- height: 40px;
2995
- border-radius: 50%;
2996
- position: absolute;
2997
- top: 50%;
2998
- transform: translateY(-50%);
2999
- background: rgba(0, 0, 0, 0.75);
3000
- cursor: pointer;
3001
- color: var(--semi-color-white);
3002
- }
3003
- .semi-image-preview-prev {
3004
- left: 24px;
3005
- }
3006
- .semi-image-preview-next {
3007
- right: 24px;
3008
- }
3009
- .semi-image-preview-header {
3010
- position: absolute;
3011
- top: 0;
3012
- left: 0;
3013
- right: 0;
3014
- font-weight: normal;
3015
- font-size: 14px;
3016
- line-height: 20px;
3017
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
3018
- color: var(--semi-color-white);
3019
- height: 60px;
3020
- display: flex;
3021
- justify-content: space-between;
3022
- align-items: center;
3023
- padding: 0 24px;
3024
- z-index: 1;
3025
- pointer-events: none;
3026
- }
3027
- .semi-image-preview-header-title {
3028
- flex: 1;
3029
- }
3030
- .semi-image-preview-header-close {
3031
- display: flex;
3032
- justify-content: center;
3033
- align-items: center;
3034
- cursor: pointer;
3035
- width: 30px;
3036
- height: 30px;
3037
- border-radius: 50%;
3038
- pointer-events: auto;
3039
- }
3040
- .semi-image-preview-header-close:hover {
3041
- background-color: rgba(0, 0, 0, 0.75);
3042
- }
3043
- .semi-image-preview-footer {
3044
- display: flex;
3045
- align-items: center;
3046
- }
3047
- .semi-image-preview-footer-content {
3048
- padding: 0 16px;
3049
- background: rgba(0, 0, 0, 0.75);
3050
- border-radius: var(--semi-border-radius-medium);
3051
- height: 48px;
3052
- }
3053
- .semi-image-preview-footer-wrapper {
3054
- position: absolute;
3055
- left: 50%;
3056
- bottom: 16px;
3057
- transform: translateX(-50%);
3058
- }
3059
- .semi-image-preview-footer-page {
3060
- user-select: none;
3061
- color: var(--semi-color-white);
3062
- font-size: 16px;
3063
- line-height: 22px;
3064
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
3065
- margin: 0 12px;
3066
- }
3067
- .semi-image-preview-footer .semi-icon {
3068
- color: var(--semi-color-white);
3069
- cursor: pointer;
3070
- }
3071
- .semi-image-preview-footer-gap {
3072
- margin-left: 16px;
3073
- }
3074
- .semi-image-preview-footer .semi-slider {
3075
- width: 132px;
3076
- padding: 0 16px;
3077
- }
3078
- .semi-image-preview-footer .semi-slider .semi-slider-rail {
3079
- color: var(--semi-color-white);
3080
- height: 2px;
3081
- }
3082
- .semi-image-preview-footer .semi-slider .semi-slider-track {
3083
- height: 2px;
3084
- }
3085
- .semi-image-preview-footer .semi-slider .semi-slider-handle {
3086
- width: 16px;
3087
- height: 16px;
3088
- margin-top: 8px;
3089
- box-sizing: border-box;
3090
- }
3091
- .semi-image-preview-footer .semi-divider {
3092
- background: rgba(255, 255, 255, 0.5);
3093
- margin: 0 16px;
3094
- }
3095
- .semi-image-preview-footer .semi-image-preview-footer-disabled {
3096
- color: rgba(249, 249, 249, 0.35);
3097
- cursor: default;
3098
- pointer-events: none;
3099
- }
3100
- .semi-image-preview-image {
3101
- position: relative;
3102
- height: 100%;
3103
- display: flex;
3104
- justify-content: center;
3105
- align-items: center;
3106
- }
3107
- .semi-image-preview-image-img {
3108
- position: absolute;
3109
- transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
3110
- z-index: 0;
3111
- user-select: none;
3112
- }
3113
- .semi-image-preview-image-spin {
3114
- position: absolute;
3115
- top: 50%;
3116
- left: 50%;
3117
- transform: translate(-50%, -50%);
3118
- }
3119
- .semi-image-preview-image-spin .semi-spin-wrapper {
3120
- color: #ccc;
3121
- }
3122
- @keyframes spinner {
3123
- to {
3124
- transform: var(--semi-transform_rotate-clockwise360deg);
3125
- }
3126
- }
3127
-
3128
- img[src=""], img:not([src]) {
3129
- opacity: 0;
3130
- }
3131
-
3132
- .semi-rtl .semi-image-preview,
3133
- .semi-portal-rtl .semi-image-preview {
3134
- direction: rtl;
3135
- }
3136
- .semi-rtl .semi-image-preview-group,
3137
- .semi-portal-rtl .semi-image-preview-group {
3138
- direction: rtl;
3139
- }
3140
- .semi-rtl .semi-image-preview-prev,
3141
- .semi-portal-rtl .semi-image-preview-prev {
3142
- right: 24px;
3143
- left: auto;
3144
- transform: var(--semi-transform_rotate-clockwise180deg);
3145
- }
3146
- .semi-rtl .semi-image-preview-next,
3147
- .semi-portal-rtl .semi-image-preview-next {
3148
- left: 24px;
3149
- right: auto;
3150
- transform: var(--semi-transform_rotate-clockwise180deg);
3151
- }
3152
- .semi-rtl .semi-image-preview-footer-page,
3153
- .semi-portal-rtl .semi-image-preview-footer-page {
3154
- display: flex;
3155
- direction: rtl;
3156
- }
3157
- .semi-rtl .semi-image-preview-footer-gap,
3158
- .semi-portal-rtl .semi-image-preview-footer-gap {
3159
- margin-right: 16px;
3160
- margin-left: 0;
3161
- }
3162
- .semi-rtl .semi-image-preview-footer .semi-icon-chevron_left,
3163
- .semi-portal-rtl .semi-image-preview-footer .semi-icon-chevron_left {
3164
- transform: var(--semi-transform_rotate-clockwise180deg);
3165
- }
3166
- .semi-rtl .semi-image-preview-footer .semi-icon-chevron_right,
3167
- .semi-portal-rtl .semi-image-preview-footer .semi-icon-chevron_right {
3168
- transform: var(--semi-transform_rotate-clockwise180deg);
3169
- }
3170
-
3171
- .semi-progress {
3172
- display: flex;
3173
- align-items: center;
3174
- }
3175
- .semi-progress-track {
3176
- background-color: var(--semi-color-fill-0);
3177
- border-radius: var(--semi-border-radius-small);
3178
- }
3179
- .semi-progress-horizontal {
3180
- height: 4px;
3181
- margin-top: 4px;
3182
- margin-bottom: 4px;
3183
- }
3184
- .semi-progress-horizontal.semi-progress-large {
3185
- height: 6px;
3186
- }
3187
- .semi-progress-horizontal .semi-progress-track {
3188
- height: 100%;
3189
- width: 100%;
3190
- }
3191
- .semi-progress-horizontal .semi-progress-track-inner {
3192
- height: 100%;
3193
- background-color: var(--semi-color-success);
3194
- border-radius: var(--semi-border-radius-small);
3195
- transition: width 0.3s;
3196
- transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
3197
- }
3198
- .semi-progress-horizontal .semi-progress-line-text {
3199
- min-width: 45px;
3200
- font-weight: 600;
3201
- margin-left: 16px;
3202
- color: var(--semi-color-text-0);
3203
- }
3204
- .semi-progress-vertical {
3205
- width: 4px;
3206
- display: inline-flex;
3207
- height: 100%;
3208
- margin-left: 4px;
3209
- margin-right: 4px;
3210
- flex-direction: column;
3211
- }
3212
- .semi-progress-vertical.semi-progress-large {
3213
- width: 6px;
3214
- }
3215
- .semi-progress-vertical .semi-progress-track {
3216
- height: 100%;
3217
- width: 100%;
3218
- }
3219
- .semi-progress-vertical .semi-progress-track-inner {
3220
- background-color: var(--semi-color-success);
3221
- border-radius: var(--semi-border-radius-small);
3222
- width: 100%;
3223
- transition: height 0.3s;
3224
- transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
3225
- }
3226
- .semi-progress-vertical .semi-progress-line-text {
3227
- font-weight: 600;
3228
- margin-top: 8px;
3229
- }
3230
- .semi-progress-circle {
3231
- position: relative;
3232
- display: inline-block;
3233
- }
3234
- .semi-progress-circle-ring {
3235
- display: block;
3236
- }
3237
- .semi-progress-circle-ring-track {
3238
- stroke: var(--semi-color-fill-0);
3239
- }
3240
- .semi-progress-circle-ring-inner {
3241
- transition: stroke-dashoffset 0.3s;
3242
- transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
3243
- transform: rotate(-90deg);
3244
- transform-origin: 50% 50%;
3245
- stroke: var(--semi-color-success);
3246
- }
3247
- .semi-progress-circle-text {
3248
- position: absolute;
3249
- top: 50%;
3250
- left: 50%;
3251
- width: 100%;
3252
- text-align: center;
3253
- transform: translate(-50%, -50%);
3254
- user-select: none;
3255
- color: var(--semi-color-mode-minor-text);
3256
- }
3257
-
3258
- .semi-rtl .semi-progress,
3259
- .semi-portal-rtl .semi-progress {
3260
- direction: rtl;
3261
- }
3262
- .semi-rtl .semi-progress-horizontal .semi-progress-line-text,
3263
- .semi-portal-rtl .semi-progress-horizontal .semi-progress-line-text {
3264
- margin-left: 0;
3265
- margin-right: 16px;
3266
- }
3267
- .semi-rtl .semi-progress-circle-ring-inner,
3268
- .semi-portal-rtl .semi-progress-circle-ring-inner {
3269
- transform: rotate(-90deg);
3270
- transform-origin: 50% 50%;
3271
- }
3272
- .semi-rtl .semi-progress-circle-text,
3273
- .semi-portal-rtl .semi-progress-circle-text {
3274
- left: auto;
3275
- right: 50%;
3276
- transform: translate(50%, -50%);
3277
- }
3278
-
3279
- .semi-upload {
3280
- display: flex;
3281
- flex-wrap: wrap;
3282
- }
3283
- .semi-upload-tooltip-children-wrapper {
3284
- display: inline-flex;
3285
- width: fit-content;
3286
- height: fit-content;
3287
- vertical-align: middle;
3288
- }
3289
- .semi-upload-disabled {
3290
- cursor: not-allowed;
3291
- }
3292
- .semi-upload-disabled .semi-upload-file-card {
3293
- cursor: not-allowed;
3294
- }
3295
- .semi-upload-disabled .semi-upload-file-card-close {
3296
- cursor: not-allowed;
3297
- }
3298
- .semi-upload-disabled .semi-upload-drag-area {
3299
- border: none;
3300
- cursor: not-allowed;
3301
- }
3302
- .semi-upload-disabled .semi-upload-drag-area:hover {
3303
- background-color: var(--semi-color-tertiary-light-default);
3304
- }
3305
- .semi-upload-disabled .semi-upload-drag-area-main-text, .semi-upload-disabled .semi-upload-drag-area-sub-text, .semi-upload-disabled .semi-upload-drag-area-icon {
3306
- cursor: not-allowed;
3307
- color: var(--semi-color-disabled-text);
3308
- }
3309
- .semi-upload-hidden-input {
3310
- display: none;
3311
- }
3312
- .semi-upload-hidden-input-replace {
3313
- display: none;
3314
- }
3315
- .semi-upload-add {
3316
- display: flex;
3317
- align-items: center;
3318
- }
3319
- .semi-upload[x-prompt-pos=right] .semi-upload-add {
3320
- display: inline-flex;
3321
- }
3322
- .semi-upload[x-prompt-pos=right] .semi-upload-prompt {
3323
- display: inline-flex;
3324
- }
3325
- .semi-upload[x-prompt-pos=bottom] .semi-upload-add {
3326
- display: flex;
3327
- }
3328
- .semi-upload[x-prompt-pos=bottom] .semi-upload-prompt {
3329
- display: flex;
3330
- flex-basis: 100%;
3331
- }
3332
- .semi-upload[x-prompt-pos=bottom] .semi-upload-file-list {
3333
- flex-basis: 100%;
3334
- }
3335
- .semi-upload[x-prompt-pos=left] .semi-upload-add {
3336
- display: inline-flex;
3337
- }
3338
- .semi-upload[x-prompt-pos=left] .semi-upload-prompt {
3339
- display: inline-flex;
3340
- order: -1;
3341
- }
3342
- .semi-upload[x-prompt-pos=left] .semi-upload-file-list {
3343
- order: 2;
3344
- }
3345
- .semi-upload-file-list {
3346
- flex-basis: 100%;
3347
- flex-shrink: 0;
3348
- display: block;
3349
- margin-top: 8px;
3350
- margin-bottom: 8px;
3351
- }
3352
- .semi-upload-file-list-main {
3353
- display: flex;
3354
- flex-wrap: wrap;
3355
- flex-shrink: 0;
3356
- gap: 8px;
3357
- margin-bottom: 8px;
3358
- }
3359
- .semi-upload-file-list-main p {
3360
- display: flex;
3361
- align-items: center;
3362
- }
3363
- .semi-upload-file-list-title {
3364
- font-size: 12px;
3365
- line-height: 16px;
3366
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
3367
- color: var(--semi-color-text-2);
3368
- margin-bottom: 4px;
3369
- }
3370
- .semi-upload-file-list-title-choosen {
3371
- margin-right: 8px;
3372
- }
3373
- .semi-upload-file-list-title-clear {
3374
- cursor: pointer;
3375
- color: var(--semi-color-primary);
3376
- }
3377
- .semi-upload-file-card {
3378
- border-radius: var(--semi-border-radius-medium);
3379
- display: inline-flex;
3380
- align-items: center;
3381
- justify-content: space-between;
3382
- height: 52px;
3383
- width: 250px;
3384
- background-color: var(--semi-color-fill-0);
3385
- cursor: pointer;
3386
- }
3387
- .semi-upload-file-card:hover {
3388
- background-color: var(--semi-color-fill-1);
3389
- }
3390
- .semi-upload-file-card a {
3391
- text-decoration: none;
3392
- }
3393
- .semi-upload-file-card-preview {
3394
- height: 36px;
3395
- width: 36px;
3396
- color: var(--semi-color-text-2);
3397
- margin: 8px;
3398
- display: flex;
3399
- justify-content: center;
3400
- align-items: center;
3401
- border-radius: var(--semi-border-radius-small);
3402
- flex-shrink: 0;
3403
- }
3404
- .semi-upload-file-card-preview img {
3405
- width: 36px;
3406
- height: 36px;
3407
- object-fit: cover;
3408
- }
3409
- .semi-upload-file-card-preview-placeholder {
3410
- background-color: rgba(var(--semi-grey-3), 1);
3411
- color: rgba(var(--semi-white), 1);
3412
- }
3413
- .semi-upload-file-card-show-pointer {
3414
- cursor: pointer;
3415
- }
3416
- .semi-upload-file-card-info {
3417
- display: flex;
3418
- align-items: center;
3419
- }
3420
- .semi-upload-file-card-info-main {
3421
- display: flex;
3422
- flex-wrap: wrap;
3423
- flex: 1;
3424
- }
3425
- .semi-upload-file-card-info-main-text {
3426
- display: flex;
3427
- align-items: center;
3428
- flex-basis: 100%;
3429
- }
3430
- .semi-upload-file-card-info-main-control {
3431
- display: flex;
3432
- }
3433
- .semi-upload-file-card-info-name {
3434
- width: 0;
3435
- flex: 1;
3436
- overflow: hidden;
3437
- text-overflow: ellipsis;
3438
- white-space: nowrap;
3439
- display: inline-block;
3440
- font-size: 14px;
3441
- line-height: 20px;
3442
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
3443
- font-weight: 600;
3444
- color: var(--semi-color-text-0);
3445
- }
3446
- .semi-upload-file-card-info-size {
3447
- font-size: 12px;
3448
- line-height: 16px;
3449
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
3450
- font-weight: 400;
3451
- margin-left: 8px;
3452
- color: var(--semi-color-text-2);
3453
- margin-top: 1px;
3454
- }
3455
- .semi-upload-file-card-info-replace {
3456
- display: inline-flex;
3457
- margin-left: 8px;
3458
- color: var(--semi-color-text-2);
3459
- }
3460
- .semi-upload-file-card-info-validate-message {
3461
- font-size: 12px;
3462
- line-height: 16px;
3463
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
3464
- display: flex;
3465
- align-items: center;
3466
- color: var(--semi-color-text-0);
3467
- }
3468
- .semi-upload-file-card-info-retry {
3469
- font-size: 12px;
3470
- line-height: 16px;
3471
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
3472
- color: var(--semi-color-primary);
3473
- cursor: pointer;
3474
- margin-left: 8px;
3475
- }
3476
- .semi-upload-file-card-info .semi-progress {
3477
- flex-basis: 100%;
3478
- margin-top: 4px;
3479
- }
3480
- .semi-upload-file-card-close {
3481
- margin-left: 8px;
3482
- margin-right: 8px;
3483
- flex-shrink: 0;
3484
- }
3485
- .semi-upload-file-card-replace {
3486
- margin-left: 8px;
3487
- width: 24px;
3488
- flex-shrink: 0;
3489
- }
3490
- .semi-upload-file-card-icon-loading, .semi-upload-file-card-icon-error.semi-icon {
3491
- font-size: 11px;
3492
- margin-right: 2px;
3493
- }
3494
- .semi-upload-file-card-icon-error {
3495
- position: relative;
3496
- top: -1px;
3497
- }
3498
- .semi-upload-file-card-icon-loading {
3499
- line-height: 0;
3500
- }
3501
- .semi-upload-file-card-icon-loading .semi-spin-wrapper svg {
3502
- height: 11px;
3503
- width: 11px;
3504
- }
3505
- .semi-upload-file-card-fail {
3506
- background-color: var(--semi-color-danger-light-default);
3507
- }
3508
- .semi-upload-file-card-fail:hover {
3509
- background-color: var(--semi-color-danger-light-hover);
3510
- }
3511
- .semi-upload-file-card-fail .semi-upload-file-card-info-validate-message {
3512
- color: var(--semi-color-danger);
3513
- }
3514
- .semi-upload-picture {
3515
- display: flex;
3516
- }
3517
- .semi-upload-picture[x-prompt-pos=bottom] {
3518
- flex-direction: column;
3519
- }
3520
- .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-prompt {
3521
- order: 1;
3522
- }
3523
- .semi-upload-picture[x-prompt-pos=right] .semi-upload-prompt {
3524
- order: 1;
3525
- }
3526
- .semi-upload-picture-add {
3527
- background-color: var(--semi-color-fill-0);
3528
- height: 96px;
3529
- width: 96px;
3530
- box-sizing: border-box;
3531
- display: inline-flex;
3532
- justify-content: center;
3533
- align-items: center;
3534
- border: 2px dashed var(--semi-color-border);
3535
- color: var(--semi-color-tertiary);
3536
- border-radius: var(--semi-border-radius-small);
3537
- cursor: pointer;
3538
- }
3539
- .semi-upload-picture-add:hover {
3540
- background-color: var(--semi-color-fill-1);
3541
- }
3542
- .semi-upload-picture-add:active {
3543
- background-color: var(--semi-color-fill-2);
3544
- }
3545
- .semi-upload-picture-add-disabled {
3546
- cursor: not-allowed;
3547
- }
3548
- .semi-upload-picture-add-disabled:hover {
3549
- background-color: var(--semi-color-fill-0);
3550
- }
3551
- .semi-upload-picture-add-disabled:active {
3552
- background-color: var(--semi-color-fill-0);
3553
- }
3554
- .semi-upload-picture-file-list {
3555
- flex-basis: inherit;
3556
- margin-top: 0;
3557
- margin-bottom: 0;
3558
- }
3559
- .semi-upload-picture-file-card {
3560
- display: flex;
3561
- align-items: center;
3562
- justify-content: center;
3563
- height: 96px;
3564
- width: 96px;
3565
- border-radius: var(--semi-border-radius-small);
3566
- box-sizing: border-box;
3567
- position: relative;
3568
- overflow: hidden;
3569
- }
3570
- .semi-upload-picture-file-card img {
3571
- height: 96px;
3572
- width: 96px;
3573
- object-fit: cover;
3574
- border-radius: var(--semi-border-radius-small);
3575
- }
3576
- .semi-upload-picture-file-card-custom-thumbnail .semi-image img {
3577
- width: inherit;
3578
- height: inherit;
3579
- }
3580
- .semi-upload-picture-file-card-close {
3581
- visibility: hidden;
3582
- display: inline-flex;
3583
- position: absolute;
3584
- top: 8px;
3585
- right: 8px;
3586
- border-radius: var(--semi-border-radius-circle);
3587
- cursor: pointer;
3588
- transition: all 0s;
3589
- }
3590
- .semi-upload-picture-file-card-icon-close {
3591
- font-size: 16px;
3592
- color: var(--semi-color-white);
3593
- }
3594
- .semi-upload-picture-file-card::before {
3595
- visibility: hidden;
3596
- background-color: var(--semi-color-overlay-bg);
3597
- content: "";
3598
- position: absolute;
3599
- left: 0;
3600
- right: 0;
3601
- top: 0;
3602
- bottom: 0;
3603
- }
3604
- .semi-upload-picture-file-card-retry {
3605
- visibility: hidden;
3606
- background-color: var(--semi-color-white);
3607
- width: 24px;
3608
- height: 24px;
3609
- position: absolute;
3610
- top: 50%;
3611
- left: 50%;
3612
- transform: translate(-50%, -50%);
3613
- color: var(--semi-color-primary);
3614
- border-radius: var(--semi-border-radius-circle);
3615
- display: flex;
3616
- align-items: center;
3617
- justify-content: center;
3618
- cursor: pointer;
3619
- }
3620
- .semi-upload-picture-file-card-icon-retry {
3621
- transform: scale(-1, 1);
3622
- font-size: 13px;
3623
- }
3624
- .semi-upload-picture-file-card-replace {
3625
- visibility: hidden;
3626
- display: inline-flex;
3627
- position: absolute;
3628
- cursor: pointer;
3629
- top: 50%;
3630
- left: 50%;
3631
- color: var(--semi-color-white);
3632
- transform: translate3D(-50%, -50%, 0);
3633
- }
3634
- .semi-upload-picture-file-card-preview {
3635
- visibility: hidden;
3636
- display: inline-flex;
3637
- position: absolute;
3638
- cursor: pointer;
3639
- top: 50%;
3640
- left: 50%;
3641
- transform: translate3D(-50%, -50%, 0);
3642
- }
3643
- .semi-upload-picture-file-card-preview-fallback {
3644
- background-color: var(--semi-color-fill-0);
3645
- border: 2px var(--semi-color-border);
3646
- color: var(--semi-color-tertiary);
3647
- border-radius: var(--semi-border-radius-small);
3648
- }
3649
- .semi-upload-picture-file-card-pic-info {
3650
- display: inline-flex;
3651
- box-sizing: border-box;
3652
- justify-content: space-between;
3653
- align-items: center;
3654
- position: absolute;
3655
- width: 100%;
3656
- height: 24px;
3657
- padding: 0 10px;
3658
- bottom: 0;
3659
- left: 0;
3660
- color: var(--semi-color-white);
3661
- font-size: 12px;
3662
- font-weight: 600;
3663
- background: linear-gradient(0deg, rgba(22, 22, 26, 0.3) 0%, rgba(22, 22, 26, 0) 77.08%);
3664
- }
3665
- .semi-upload-picture-file-card-icon-loading, .semi-upload-picture-file-card-icon-error {
3666
- position: absolute;
3667
- bottom: 6px;
3668
- right: 6px;
3669
- color: var(--semi-color-danger);
3670
- }
3671
- .semi-upload-picture-file-card-icon-loading {
3672
- font-size: 14px;
3673
- }
3674
- .semi-upload-picture-file-card-show-pointer {
3675
- cursor: pointer;
3676
- }
3677
- .semi-upload-picture-file-card-error {
3678
- border: 1px solid var(--semi-color-danger);
3679
- outline: 1px solid var(--semi-color-danger);
3680
- }
3681
- .semi-upload-picture-file-card:hover::before {
3682
- visibility: visible;
3683
- }
3684
- .semi-upload-picture-file-card:hover .semi-upload-picture-file-card-close {
3685
- visibility: visible;
3686
- }
3687
- .semi-upload-picture-file-card:hover .semi-upload-picture-file-card-replace {
3688
- visibility: visible;
3689
- }
3690
- .semi-upload-picture-file-card:hover .semi-upload-picture-file-card-retry {
3691
- visibility: visible;
3692
- }
3693
- .semi-upload-picture-file-card:hover .semi-upload-picture-file-card-preview {
3694
- visibility: visible;
3695
- }
3696
- .semi-upload-picture-file-card-uploading::before {
3697
- visibility: visible;
3698
- }
3699
- .semi-upload-picture-file-card .semi-progress-circle {
3700
- position: absolute;
3701
- top: 50%;
3702
- left: 50%;
3703
- transform: translate(-50%, -50%);
3704
- }
3705
- .semi-upload-drag-area {
3706
- border-radius: var(--semi-border-radius-small);
3707
- border: 2px dashed var(--semi-color-border);
3708
- width: 100%;
3709
- padding: 12px;
3710
- background-color: var(--semi-color-tertiary-light-default);
3711
- display: flex;
3712
- justify-content: center;
3713
- align-items: center;
3714
- flex-direction: column;
3715
- cursor: pointer;
3716
- }
3717
- .semi-upload-drag-area:hover {
3718
- background-color: var(--semi-color-primary-light-default);
3719
- border-color: var(--semi-color-primary);
3720
- }
3721
- .semi-upload-drag-area-custom {
3722
- border: none;
3723
- padding: 0;
3724
- background-color: inherit;
3725
- }
3726
- .semi-upload-drag-area-custom:hover {
3727
- background-color: inherit;
3728
- }
3729
- .semi-upload-drag-area-legal {
3730
- background-color: var(--semi-color-primary-light-default);
3731
- border-color: var(--semi-color-primary);
3732
- }
3733
- .semi-upload-drag-area-legal .semi-upload-drag-area-sub-text {
3734
- display: none;
3735
- }
3736
- .semi-upload-drag-area-icon {
3737
- color: var(--semi-color-primary);
3738
- }
3739
- .semi-upload-drag-area-text {
3740
- text-align: center;
3741
- }
3742
- .semi-upload-drag-area-main-text {
3743
- cursor: pointer;
3744
- font-size: 14px;
3745
- line-height: 20px;
3746
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
3747
- margin-bottom: 4px;
3748
- color: var(--semi-color-text-0);
3749
- }
3750
- .semi-upload-drag-area-main-text:hover {
3751
- color: var(--semi-color-text-0);
3752
- }
3753
- .semi-upload-drag-area-main-text:active {
3754
- color: var(--semi-color-text-0);
3755
- }
3756
- .semi-upload-drag-area-sub-text {
3757
- cursor: pointer;
3758
- font-size: 12px;
3759
- line-height: 16px;
3760
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
3761
- color: var(--semi-color-text-0);
3762
- }
3763
- .semi-upload-drag-area-sub-text:hover {
3764
- color: var(--semi-color-text-0);
3765
- }
3766
- .semi-upload-drag-area-sub-text:active {
3767
- color: var(--semi-color-text-0);
3768
- }
3769
- .semi-upload-drag-area-tips {
3770
- font-size: 12px;
3771
- line-height: 16px;
3772
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
3773
- font-weight: 600;
3774
- }
3775
- .semi-upload-drag-area-tips-legal {
3776
- color: var(--semi-color-primary);
3777
- }
3778
- .semi-upload-validate-message {
3779
- flex-basis: 100%;
3780
- flex-shrink: 0;
3781
- display: block;
3782
- color: var(--semi-color-danger);
3783
- }
3784
-
3785
- .semi-rtl .semi-upload,
3786
- .semi-portal-rtl .semi-upload {
3787
- direction: rtl;
3788
- }
3789
- .semi-rtl .semi-upload-file-list-title-choosen,
3790
- .semi-portal-rtl .semi-upload-file-list-title-choosen {
3791
- margin-right: 0;
3792
- margin-left: 8px;
3793
- }
3794
- .semi-rtl .semi-upload-file-list-title-choosen, .semi-rtl .semi-upload-file-list-title-clear,
3795
- .semi-portal-rtl .semi-upload-file-list-title-choosen,
3796
- .semi-portal-rtl .semi-upload-file-list-title-clear {
3797
- display: inline-block;
3798
- }
3799
- .semi-rtl .semi-upload-file-card-info-size,
3800
- .semi-portal-rtl .semi-upload-file-card-info-size {
3801
- margin-left: 0;
3802
- margin-right: 8px;
3803
- }
3804
- .semi-rtl .semi-upload-file-card-info-retry,
3805
- .semi-portal-rtl .semi-upload-file-card-info-retry {
3806
- margin-left: 0;
3807
- margin-right: 8px;
3808
- }
3809
- .semi-rtl .semi-upload-file-card-icon-loading, .semi-rtl .semi-upload-file-card-icon-error,
3810
- .semi-portal-rtl .semi-upload-file-card-icon-loading,
3811
- .semi-portal-rtl .semi-upload-file-card-icon-error {
3812
- margin-right: 0;
3813
- margin-left: 2px;
3814
- }
3815
- .semi-rtl .semi-upload-picture-file-card-close,
3816
- .semi-portal-rtl .semi-upload-picture-file-card-close {
3817
- right: auto;
3818
- left: 8px;
3819
- }
3820
- .semi-rtl .semi-upload-picture-file-card .semi-progress-circle,
3821
- .semi-portal-rtl .semi-upload-picture-file-card .semi-progress-circle {
3822
- left: auto;
3823
- right: 50%;
3824
- transform: translate(50%, -50%);
3825
- }
3826
- .semi-rtl .semi-upload-picture-file-card-retry,
3827
- .semi-portal-rtl .semi-upload-picture-file-card-retry {
3828
- left: auto;
3829
- right: 50%;
3830
- transform: translate(50%, -50%);
3831
- }
3832
- .semi-rtl .semi-upload-picture-file-card-icon-loading, .semi-rtl .semi-upload-picture-file-card-icon-error,
3833
- .semi-portal-rtl .semi-upload-picture-file-card-icon-loading,
3834
- .semi-portal-rtl .semi-upload-picture-file-card-icon-error {
3835
- right: 0;
3836
- left: 6px;
3837
- }
3838
-
3839
- @keyframes semi-tooltip-zoomIn {
3840
- from {
3841
- opacity: 0;
3842
- transform: scale(0.8, 0.8);
3843
- }
3844
- 50% {
3845
- opacity: 1;
3846
- }
3847
- }
3848
- @keyframes semi-tooltip-bounceIn {
3849
- from {
3850
- opacity: 0;
3851
- transform: scale(0.6, 0.6);
3852
- }
3853
- 70% {
3854
- opacity: 1;
3855
- transform: scale(1.01, 1.01);
3856
- }
3857
- to {
3858
- opacity: 1;
3859
- transform: scale(1, 1);
3860
- animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
3861
- }
3862
- }
3863
- @keyframes semi-tooltip-zoomOut {
3864
- from {
3865
- opacity: 1;
3866
- }
3867
- 60% {
3868
- opacity: 0;
3869
- transform: scale(0.8, 0.8);
3870
- }
3871
- to {
3872
- opacity: 0;
3873
- }
3874
- }
3875
- .semi-tooltip-wrapper {
3876
- position: relative;
3877
- background-color: rgba(var(--semi-grey-7), 1);
3878
- backdrop-filter: none;
3879
- color: var(--semi-color-bg-0);
3880
- border-radius: var(--semi-border-radius-medium);
3881
- padding-top: 8px;
3882
- padding-right: 12px;
3883
- padding-bottom: 8px;
3884
- padding-left: 12px;
3885
- font-size: 14px;
3886
- left: 0;
3887
- top: 0;
3888
- word-wrap: break-word;
3889
- overflow-wrap: break-word;
3890
- font-size: 14px;
3891
- line-height: 20px;
3892
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
3893
- opacity: 0;
3894
- max-width: 240px;
3895
- }
3896
- .semi-tooltip-wrapper-show {
3897
- opacity: 1;
3898
- }
3899
- .semi-tooltip-content {
3900
- min-width: 0;
3901
- }
3902
- .semi-tooltip-trigger {
3903
- display: inline-block;
3904
- width: auto;
3905
- height: auto;
3906
- }
3907
- .semi-tooltip-with-arrow {
3908
- display: flex;
3909
- align-items: center;
3910
- justify-content: center;
3911
- box-sizing: border-box;
3912
- }
3913
- .semi-tooltip-animation-show {
3914
- animation: semi-tooltip-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
3915
- animation-fill-mode: forwards;
3916
- }
3917
- .semi-tooltip-animation-hide {
3918
- animation: semi-tooltip-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
3919
- animation-fill-mode: forwards;
3920
- }
3921
-
3922
- .semi-tooltip-wrapper .semi-tooltip-icon-arrow {
3923
- height: 7px;
3924
- width: 24px;
3925
- position: absolute;
3926
- color: rgba(var(--semi-grey-7), 1);
3927
- }
3928
- .semi-tooltip-wrapper[x-placement=top] .semi-tooltip-icon-arrow {
3929
- left: var(--semi-tooltip-arrow-offset-x, 50%);
3930
- transform: translateX(-50%);
3931
- bottom: -6px;
3932
- }
3933
- .semi-tooltip-wrapper[x-placement=top].semi-tooltip-with-arrow,
3934
- .semi-tooltip-wrapper[x-placement=top] .semi-tooltip-with-arrow {
3935
- min-width: 36px;
3936
- }
3937
- .semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-icon-arrow {
3938
- bottom: -6px;
3939
- left: 6px;
3940
- }
3941
- .semi-tooltip-wrapper[x-placement=topLeft].semi-tooltip-with-arrow,
3942
- .semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-with-arrow {
3943
- min-width: 36px;
3944
- }
3945
- .semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-icon-arrow {
3946
- bottom: -6px;
3947
- right: 6px;
3948
- }
3949
- .semi-tooltip-wrapper[x-placement=topRight].semi-tooltip-with-arrow,
3950
- .semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-with-arrow {
3951
- min-width: 36px;
3952
- }
3953
- .semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-icon-arrow {
3954
- width: 7px;
3955
- height: 24px;
3956
- right: -6px;
3957
- top: 5px;
3958
- }
3959
- .semi-tooltip-wrapper[x-placement=leftTop].semi-tooltip-with-arrow,
3960
- .semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-with-arrow {
3961
- min-height: 34px;
3962
- }
3963
- .semi-tooltip-wrapper[x-placement=left] .semi-tooltip-icon-arrow {
3964
- width: 7px;
3965
- height: 24px;
3966
- right: -6px;
3967
- top: var(--semi-tooltip-arrow-offset-y, 50%);
3968
- transform: translateY(-50%);
3969
- }
3970
- .semi-tooltip-wrapper[x-placement=left].semi-tooltip-with-arrow,
3971
- .semi-tooltip-wrapper[x-placement=left] .semi-tooltip-with-arrow {
3972
- min-height: 34px;
3973
- }
3974
- .semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-icon-arrow {
3975
- width: 7px;
3976
- height: 24px;
3977
- right: -6px;
3978
- bottom: 5px;
3979
- }
3980
- .semi-tooltip-wrapper[x-placement=leftBottom].semi-tooltip-with-arrow,
3981
- .semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-with-arrow {
3982
- min-height: 34px;
3983
- }
3984
- .semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-icon-arrow {
3985
- width: 7px;
3986
- height: 24px;
3987
- left: -6px;
3988
- top: 5px;
3989
- transform: rotate(180deg);
3990
- }
3991
- .semi-tooltip-wrapper[x-placement=rightTop].semi-tooltip-with-arrow,
3992
- .semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-with-arrow {
3993
- min-height: 34px;
3994
- }
3995
- .semi-tooltip-wrapper[x-placement=right] .semi-tooltip-icon-arrow {
3996
- width: 7px;
3997
- height: 24px;
3998
- left: -6px;
3999
- top: var(--semi-tooltip-arrow-offset-y, 50%);
4000
- transform: translateY(-50%) rotate(180deg);
4001
- }
4002
- .semi-tooltip-wrapper[x-placement=right].semi-tooltip-with-arrow,
4003
- .semi-tooltip-wrapper[x-placement=right] .semi-tooltip-with-arrow {
4004
- min-height: 34px;
4005
- }
4006
- .semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-icon-arrow {
4007
- width: 7px;
4008
- height: 24px;
4009
- left: -6px;
4010
- bottom: 5px;
4011
- transform: rotate(180deg);
4012
- }
4013
- .semi-tooltip-wrapper[x-placement=rightBottom].semi-tooltip-with-arrow,
4014
- .semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-with-arrow {
4015
- min-height: 34px;
4016
- }
4017
- .semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-icon-arrow {
4018
- top: -6px;
4019
- left: 6px;
4020
- transform: rotate(180deg);
4021
- }
4022
- .semi-tooltip-wrapper[x-placement=bottomLeft].semi-tooltip-with-arrow,
4023
- .semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-with-arrow {
4024
- min-width: 36px;
4025
- }
4026
- .semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-icon-arrow {
4027
- top: -6px;
4028
- left: var(--semi-tooltip-arrow-offset-x, 50%);
4029
- transform: translateX(-50%) rotate(180deg);
4030
- }
4031
- .semi-tooltip-wrapper[x-placement=bottom].semi-tooltip-with-arrow,
4032
- .semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-with-arrow {
4033
- min-width: 36px;
4034
- }
4035
- .semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-icon-arrow {
4036
- right: 6px;
4037
- top: -6px;
4038
- transform: rotate(180deg);
4039
- }
4040
- .semi-tooltip-wrapper[x-placement=bottomRight].semi-tooltip-with-arrow,
4041
- .semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-with-arrow {
4042
- min-width: 36px;
4043
- }
4044
-
4045
- .semi-rtl .semi-tooltip-wrapper,
4046
- .semi-portal-rtl .semi-tooltip-wrapper {
4047
- direction: rtl;
4048
- padding-right: 12px;
4049
- padding-left: 12px;
4050
- left: auto;
4051
- right: 0;
4052
- }
4053
-
4054
- @keyframes semi-popover-zoomIn {
4055
- from {
4056
- opacity: 0;
4057
- transform: scale(0.8, 0.8);
4058
- }
4059
- 50% {
4060
- opacity: 1;
4061
- }
4062
- }
4063
- @keyframes semi-popover-zoomOut {
4064
- from {
4065
- opacity: 1;
4066
- }
4067
- 60% {
4068
- opacity: 0;
4069
- transform: scale(0.8, 0.8);
4070
- }
4071
- to {
4072
- opacity: 0;
4073
- }
4074
- }
4075
- .semi-popover-wrapper {
4076
- position: relative;
4077
- background-color: var(--semi-color-bg-3);
4078
- backdrop-filter: none;
4079
- box-shadow: var(--semi-shadow-elevated);
4080
- z-index: 1030;
4081
- border-radius: var(--semi-border-radius-medium);
4082
- font-size: 14px;
4083
- line-height: 20px;
4084
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
4085
- opacity: 0;
4086
- }
4087
- .semi-popover-wrapper-show {
4088
- opacity: 1;
4089
- }
4090
- .semi-popover-trigger {
4091
- display: inline-block;
4092
- width: auto;
4093
- height: auto;
4094
- }
4095
- .semi-popover-title {
4096
- padding: 8px;
4097
- border-bottom: 1px solid var(--semi-color-border);
4098
- }
4099
- .semi-popover-confirm {
4100
- position: absolute;
4101
- }
4102
- .semi-popover-with-arrow {
4103
- padding: 12px;
4104
- box-sizing: border-box;
4105
- }
4106
- .semi-popover-animation-show {
4107
- animation: semi-popover-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
4108
- animation-fill-mode: forwards;
4109
- }
4110
- .semi-popover-animation-hide {
4111
- animation: semi-popover-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
4112
- animation-fill-mode: forwards;
4113
- }
4114
-
4115
- .semi-popover-icon-arrow path:nth-child(1) {
4116
- fill: var(--semi-color-border);
4117
- }
4118
- .semi-popover-icon-arrow path:nth-child(2) {
4119
- fill: var(--semi-color-bg-3);
4120
- }
4121
-
4122
- .semi-popover-wrapper .semi-popover-icon-arrow {
4123
- height: 8px;
4124
- width: 24px;
4125
- position: absolute;
4126
- color: unset;
4127
- }
4128
- .semi-popover-wrapper[x-placement=top] .semi-popover-icon-arrow {
4129
- left: var(--semi-tooltip-arrow-offset-x, 50%);
4130
- transform: translateX(-50%);
4131
- bottom: -7px;
4132
- }
4133
- .semi-popover-wrapper[x-placement=top].semi-popover-with-arrow,
4134
- .semi-popover-wrapper[x-placement=top] .semi-popover-with-arrow {
4135
- min-width: 36px;
4136
- }
4137
- .semi-popover-wrapper[x-placement=topLeft] .semi-popover-icon-arrow {
4138
- bottom: -7px;
4139
- left: 6px;
4140
- }
4141
- .semi-popover-wrapper[x-placement=topLeft].semi-popover-with-arrow,
4142
- .semi-popover-wrapper[x-placement=topLeft] .semi-popover-with-arrow {
4143
- min-width: 36px;
4144
- }
4145
- .semi-popover-wrapper[x-placement=topRight] .semi-popover-icon-arrow {
4146
- bottom: -7px;
4147
- right: 6px;
4148
- }
4149
- .semi-popover-wrapper[x-placement=topRight].semi-popover-with-arrow,
4150
- .semi-popover-wrapper[x-placement=topRight] .semi-popover-with-arrow {
4151
- min-width: 36px;
4152
- }
4153
- .semi-popover-wrapper[x-placement=leftTop] .semi-popover-icon-arrow {
4154
- width: 8px;
4155
- height: 24px;
4156
- right: -7px;
4157
- top: 6px;
4158
- }
4159
- .semi-popover-wrapper[x-placement=leftTop].semi-popover-with-arrow,
4160
- .semi-popover-wrapper[x-placement=leftTop] .semi-popover-with-arrow {
4161
- min-height: 36px;
4162
- }
4163
- .semi-popover-wrapper[x-placement=left] .semi-popover-icon-arrow {
4164
- width: 8px;
4165
- height: 24px;
4166
- right: -7px;
4167
- top: var(--semi-tooltip-arrow-offset-y, 50%);
4168
- transform: translateY(-50%);
4169
- }
4170
- .semi-popover-wrapper[x-placement=left].semi-popover-with-arrow,
4171
- .semi-popover-wrapper[x-placement=left] .semi-popover-with-arrow {
4172
- min-height: 36px;
4173
- }
4174
- .semi-popover-wrapper[x-placement=leftBottom] .semi-popover-icon-arrow {
4175
- width: 8px;
4176
- height: 24px;
4177
- right: -7px;
4178
- bottom: 6px;
4179
- }
4180
- .semi-popover-wrapper[x-placement=leftBottom].semi-popover-with-arrow,
4181
- .semi-popover-wrapper[x-placement=leftBottom] .semi-popover-with-arrow {
4182
- min-height: 36px;
4183
- }
4184
- .semi-popover-wrapper[x-placement=rightTop] .semi-popover-icon-arrow {
4185
- width: 8px;
4186
- height: 24px;
4187
- left: -7px;
4188
- top: 6px;
4189
- transform: rotate(180deg);
4190
- }
4191
- .semi-popover-wrapper[x-placement=rightTop].semi-popover-with-arrow,
4192
- .semi-popover-wrapper[x-placement=rightTop] .semi-popover-with-arrow {
4193
- min-height: 36px;
4194
- }
4195
- .semi-popover-wrapper[x-placement=right] .semi-popover-icon-arrow {
4196
- width: 8px;
4197
- height: 24px;
4198
- left: -7px;
4199
- top: var(--semi-tooltip-arrow-offset-y, 50%);
4200
- transform: translateY(-50%) rotate(180deg);
4201
- }
4202
- .semi-popover-wrapper[x-placement=right].semi-popover-with-arrow,
4203
- .semi-popover-wrapper[x-placement=right] .semi-popover-with-arrow {
4204
- min-height: 36px;
4205
- }
4206
- .semi-popover-wrapper[x-placement=rightBottom] .semi-popover-icon-arrow {
4207
- width: 8px;
4208
- height: 24px;
4209
- left: -7px;
4210
- bottom: 6px;
4211
- transform: rotate(180deg);
4212
- }
4213
- .semi-popover-wrapper[x-placement=rightBottom].semi-popover-with-arrow,
4214
- .semi-popover-wrapper[x-placement=rightBottom] .semi-popover-with-arrow {
4215
- min-height: 36px;
4216
- }
4217
- .semi-popover-wrapper[x-placement=bottomLeft] .semi-popover-icon-arrow {
4218
- top: -7px;
4219
- left: 6px;
4220
- transform: rotate(180deg);
4221
- }
4222
- .semi-popover-wrapper[x-placement=bottomLeft].semi-popover-with-arrow,
4223
- .semi-popover-wrapper[x-placement=bottomLeft] .semi-popover-with-arrow {
4224
- min-width: 36px;
4225
- }
4226
- .semi-popover-wrapper[x-placement=bottom] .semi-popover-icon-arrow {
4227
- top: -7px;
4228
- left: var(--semi-tooltip-arrow-offset-x, 50%);
4229
- transform: translateX(-50%) rotate(180deg);
4230
- }
4231
- .semi-popover-wrapper[x-placement=bottom].semi-popover-with-arrow,
4232
- .semi-popover-wrapper[x-placement=bottom] .semi-popover-with-arrow {
4233
- min-width: 36px;
4234
- }
4235
- .semi-popover-wrapper[x-placement=bottomRight] .semi-popover-icon-arrow {
4236
- right: 6px;
4237
- top: -7px;
4238
- transform: rotate(180deg);
4239
- }
4240
- .semi-popover-wrapper[x-placement=bottomRight].semi-popover-with-arrow,
4241
- .semi-popover-wrapper[x-placement=bottomRight] .semi-popover-with-arrow {
4242
- min-width: 36px;
4243
- }
4244
-
4245
- .semi-popover.semi-popover-rtl {
4246
- direction: rtl;
4247
- }
4248
-
4249
- .semi-popconfirm {
4250
- box-sizing: border-box;
4251
- max-width: 400px;
4252
- }
4253
- .semi-popconfirm-inner {
4254
- display: flex;
4255
- flex-direction: column;
4256
- padding: 24px 24px 24px 20px;
4257
- position: relative;
4258
- }
4259
- .semi-popconfirm-header {
4260
- display: flex;
4261
- justify-content: flex-start;
4262
- }
4263
- .semi-popconfirm-header-title {
4264
- font-size: 16px;
4265
- line-height: 22px;
4266
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
4267
- font-weight: 600;
4268
- margin-bottom: 8px;
4269
- color: var(--semi-color-text-0);
4270
- }
4271
- .semi-popconfirm-header-icon {
4272
- width: 24px;
4273
- height: 24px;
4274
- margin-right: 12px;
4275
- }
4276
- .semi-popconfirm-header .semi-icon-alert_triangle {
4277
- color: var(--semi-color-warning);
4278
- }
4279
- .semi-popconfirm-header-body {
4280
- display: inline-flex;
4281
- flex-grow: 1;
4282
- flex-direction: column;
4283
- }
4284
- .semi-popconfirm-body {
4285
- color: var(--semi-color-text-2);
4286
- }
4287
- .semi-popconfirm-body-withIcon {
4288
- margin-left: 36px;
4289
- }
4290
- .semi-popconfirm-body > p {
4291
- margin: 0;
4292
- padding: 0;
4293
- }
4294
- .semi-popconfirm-footer {
4295
- margin-top: 25px;
4296
- display: flex;
4297
- justify-content: flex-end;
4298
- }
4299
- .semi-popconfirm-footer > .semi-button:first-child:not(:last-child) {
4300
- margin-right: 8px;
4301
- }
4302
- .semi-popconfirm-popover {
4303
- border-radius: var(--semi-border-radius-medium);
4304
- }
4305
-
4306
- .semi-popover-with-arrow .semi-popconfirm-inner {
4307
- padding: 12px 12px 12px 8px;
4308
- }
4309
-
4310
- .semi-popconfirm-rtl {
4311
- direction: rtl;
4312
- }
4313
- .semi-popconfirm-rtl .semi-popconfirm-inner {
4314
- padding: 24px 20px 24px 24px;
4315
- }
4316
- .semi-popconfirm-rtl .semi-popconfirm-header {
4317
- margin-right: 0;
4318
- }
4319
- .semi-popconfirm-rtl .semi-popconfirm-header-icon {
4320
- margin-right: 0;
4321
- margin-left: 12px;
4322
- }
4323
- .semi-popconfirm-rtl .semi-popconfirm-footer {
4324
- justify-content: flex-end;
4325
- }
4326
- .semi-popconfirm-rtl .semi-popconfirm-footer > .semi-button:first-child:not(:last-child) {
4327
- margin-right: 0;
4328
- margin-left: 8px;
4329
- }
4330
-
4331
- .semi-popover-with-arrow.semi-popconfirm-rtl {
4332
- direction: rtl;
4333
- }
4334
- .semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner {
4335
- padding: 12px 8px 12px 12px;
4336
- }
4337
-
4338
- .semi-toast {
4339
- pointer-events: none;
4340
- }
4341
- .semi-toast-wrapper {
4342
- position: fixed;
4343
- height: 0;
4344
- top: 0;
4345
- width: 100%;
4346
- display: flex;
4347
- justify-content: center;
4348
- z-index: 1010;
4349
- }
4350
- .semi-toast-wrapper .semi-toast-innerWrapper {
4351
- width: fit-content;
4352
- height: fit-content;
4353
- text-align: center;
4354
- }
4355
- .semi-toast-wrapper .semi-toast-innerWrapper-hover .semi-toast-zero-height-wrapper {
4356
- perspective: unset;
4357
- perspective-origin: center center;
4358
- }
4359
- .semi-toast-zero-height-wrapper {
4360
- transition: all 300ms cubic-bezier(0.22, 0.57, 0.02, 1.2);
4361
- perspective-origin: center 280px;
4362
- perspective: 280px;
4363
- height: 0;
4364
- overflow: visible;
4365
- }
4366
- .semi-toast-content {
4367
- pointer-events: all;
4368
- box-shadow: var(--semi-shadow-elevated);
4369
- font-size: 14px;
4370
- line-height: 20px;
4371
- font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
4372
- background-color: var(--semi-color-bg-3);
4373
- border-radius: var(--semi-border-radius-medium);
4374
- padding: 12px 8px 12px 8px;
4375
- display: inline-flex;
4376
- align-items: flex-start;
4377
- justify-content: center;
4378
- margin: 12px;
4379
- font-weight: 600;
4380
- color: var(--semi-color-text-0);
4381
- }
4382
- .semi-toast-content .semi-toast-close-button {
4383
- margin-top: -2px;
4384
- height: 20px;
4385
- }
4386
- .semi-toast-content .semi-toast-content-text {
4387
- margin-left: 12px;
4388
- margin-right: 12px;
4389
- text-align: left;
4390
- word-wrap: break-word;
4391
- overflow-wrap: break-word;
4392
- }
4393
- .semi-toast-light.semi-toast-warning .semi-toast-content {
4394
- background-color: var(--semi-color-warning-light-default);
4395
- border: 1px solid var(--semi-color-warning);
4396
- }
4397
- .semi-toast-light.semi-toast-warning .semi-toast-icon-warning {
4398
- color: var(--semi-color-warning);
4399
- }
4400
- .semi-toast-light.semi-toast-success .semi-toast-content {
4401
- background-color: var(--semi-color-success-light-default);
4402
- border: 1px solid var(--semi-color-success);
4403
- }
4404
- .semi-toast-light.semi-toast-success .semi-toast-icon-success {
4405
- color: var(--semi-color-success);
4406
- }
4407
- .semi-toast-light.semi-toast-info .semi-toast-content {
4408
- background-color: var(--semi-color-info-light-default);
4409
- border: 1px solid var(--semi-color-info);
4410
- }
4411
- .semi-toast-light.semi-toast-info .semi-toast-icon-info {
4412
- color: var(--semi-color-info);
4413
- }
4414
- .semi-toast-light.semi-toast-error .semi-toast-content {
4415
- background-color: var(--semi-color-danger-light-default);
4416
- border: 1px solid var(--semi-color-danger);
4417
- }
4418
- .semi-toast-light.semi-toast-error .semi-toast-icon-error {
4419
- color: var(--semi-color-danger);
4420
- }
4421
- .semi-toast .semi-toast-icon-warning {
4422
- color: var(--semi-color-warning);
4423
- }
4424
- .semi-toast .semi-toast-icon-success {
4425
- color: var(--semi-color-success);
4426
- }
4427
- .semi-toast .semi-toast-icon-info {
4428
- color: var(--semi-color-info);
4429
- }
4430
- .semi-toast .semi-toast-icon-error {
4431
- color: var(--semi-color-danger);
4432
- }
4433
- .semi-toast-animation-show {
4434
- animation: 300ms semi-toast-keyframe-toast-show cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
4435
- animation-fill-mode: forwards;
4436
- }
4437
- .semi-toast-animation-hide {
4438
- animation: 300ms semi-toast-keyframe-toast-hide cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
4439
- animation-fill-mode: forwards;
4440
- }
4441
- @keyframes semi-toast-keyframe-toast-show {
4442
- 0% {
4443
- opacity: 0;
4444
- transform: translateY(-100%);
4445
- }
4446
- 100% {
4447
- opacity: 1;
4448
- }
4449
- }
4450
- @keyframes semi-toast-keyframe-toast-hide {
4451
- 0% {
4452
- opacity: 1;
4453
- }
4454
- 100% {
4455
- opacity: 0;
4456
- transform: translateY(-100%);
4457
- }
4458
- }
4459
-
4460
- .semi-toast-rtl {
4461
- direction: rtl;
4462
- }
4463
- .semi-toast-rtl .semi-toast-content .semi-toast-content-text {
4464
- text-align: right;
4465
- margin-left: 12px;
4466
- margin-right: 12px;
4467
- }
4468
-
4469
4
  .semi-chat {
4470
5
  padding-top: 12px;
4471
6
  padding-bottom: 12px;
@@ -4961,48 +496,4 @@ img[src=""], img:not([src]) {
4961
496
  .semi-rtl .semi-chat-chatBox-action-icon-redo,
4962
497
  .semi-portal-rtl .semi-chat-chatBox-action-icon-redo {
4963
498
  transform: scaleX(-1);
4964
- }
4965
-
4966
- .semi-icon {
4967
- display: inline-block;
4968
- font-style: normal;
4969
- line-height: 0;
4970
- text-align: center;
4971
- text-transform: none;
4972
- text-rendering: optimizeLegibility;
4973
- fill: currentColor;
4974
- }
4975
-
4976
- .semi-icon-extra-small {
4977
- font-size: 8px;
4978
- }
4979
-
4980
- .semi-icon-small {
4981
- font-size: 12px;
4982
- }
4983
-
4984
- .semi-icon-default {
4985
- font-size: 16px;
4986
- }
4987
-
4988
- .semi-icon-large {
4989
- font-size: 20px;
4990
- }
4991
-
4992
- .semi-icon-extra-large {
4993
- font-size: 24px;
4994
- }
4995
-
4996
- .semi-icon-spinning {
4997
- animation: 0.6s linear infinite semi-icon-animation-rotate;
4998
- animation-fill-mode: forwards;
4999
- }
5000
-
5001
- @keyframes semi-icon-animation-rotate {
5002
- from {
5003
- transform: rotate(0);
5004
- }
5005
- to {
5006
- transform: rotate(360deg);
5007
- }
5008
- }
499
+ }