@kaiheila/ui-components 0.1.22 → 0.1.24

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 (3) hide show
  1. package/dist/main.css +1613 -1613
  2. package/dist/ui-components.js +7320 -7310
  3. package/package.json +1 -1
package/dist/main.css CHANGED
@@ -1,1613 +1,1613 @@
1
- input,
2
- textarea {
3
- outline: none;
4
- }
5
- .custom-scroll-bar {
6
- overflow-x: hidden;
7
- overflow-y: scroll;
8
- overflow-y: overlay;
9
- scrollbar-width: thin;
10
- scrollbar-color: var(--color-bbb) transparent;
11
- }
12
- .custom-scroll-bar::-webkit-scrollbar {
13
- width: 0;
14
- }
15
- .custom-scroll-bar:hover::-webkit-scrollbar {
16
- width: 8px;
17
- }
18
- .custom-scroll-bar::-webkit-scrollbar-track {
19
- background-color: transparent;
20
- }
21
- .custom-scroll-bar::-webkit-scrollbar-thumb {
22
- border: 2px solid transparent;
23
- background-color: var(--color-bbb);
24
- border-radius: 4px;
25
- background-clip: content-box;
26
- }
27
-
28
- @font-face {
29
- font-family: "xy-iconfont";
30
- /* Project id 2850126 */
31
- src: url(data:font/woff2;base64,d09GMgABAAAAAAVcAAsAAAAACywAAAUNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDfAqGbIYGATYCJAMwCxoABCAFhQsHggAb6gkjEaaLciPZPzV50IxBAokg2BjEAI0ZA25YRAUWZsaAIEADJLhAAQAAAABBPMn1ztvdO3/KsdQnVUqJJdXmBuc0U2NHavegPn1AN5nkBJSoAcMtkSVMTxAAS3O2R1R7F2EKm5x90myvlINCclS6WlObCzh2kYBGxyqiDWyQSoT2XWk8oARCl6lSbCtca5yuMvDaCbwEAZzkUo1qbNZA4D1p+NwECMegUQXC+jJp/GA3sLNeTIlAsDutdU80yDYsoNarawBb3beXL6jFDgqLRrtMtzENfeDC+6b3PZp4CPoNNgUBOyvAAmggc2Z+GVceHYH2SzLROPOihmJia4PA+xEez/t+tn7eVcGFEwdLbP/wLBg0CgGxotndYO2yuXbNYOpD6A/ECRgAxAEYCMQOGATEBhgMxAoYAsQCGArEAIYB0YDhQBRgBIwnbJjTCaGAL/AbmYTGHoRDdKIN/kMUYjVut/Hx8fVy2KMSVNLgsVVosKKvt9J68CJE5RhWNuIq1Djb6PWIJBt2yZHbuFo8V7LI0BNSRWTo07jzUqUIGxHcTaRVkMNUzuhGxAq9Bg5utCEQEsaMh1KOgxsfyL3hkT4NehmX9Vd5+agxD3BZIpITiRAZCjyeU0S3xGK58KjXKEeNXm/a7ffJIHK7fa6UR4EhfWDGE/AqG7GHruIXHu3D6XwDfOYTxDYTG/si987eVjTSMzyNXszIGHl+Huzj2d3OhcJylDeWDnpLLIXohWV9wrW34UhLy7VWCxLnXv//X4OrqEiYtH6ZwciXvyGw22N3jo6Z4uiFNED90QInKPB/8N3reRvh15rCGWn9N6851jaya3vI5Mmn+4bU1ob0PX3gf3TSzp2VdsRTkIOS+yVuWpPaV7VcMzSOJjCwjUYsze6SldVlEKkhXYP8kqzeCX7NelXSDx7M6JNhVsKz6b/OP6axRkx0qtKctC5i3TytZu+/+nZude9A1jX3jv4rNSfHuV0vti6Cwtx906dnt/brntqY3NCQ0piy39CQWoQb96f4F25Ibkzt3rcte/r00/ZL3bJl81vLh5eVDp8F/vDSWZYyaJCF4WWcf9mx44xjq1u+7fbZmX+xf03N7W10Xajj2N+PpT9J2qvooWoIQNvVOgB1R2kA1DXhAKAfqXuXscVGbiBqOYA6pNQAup+qG29U9f/uz/DnqvW806f8n11sAHi74o0jvIb6cTvqRdj5U2FQzWGNnAtuk9c/ZmsEcJPOb16kAKeeBI+a9OfdGPEACMOCizVArrARLde4SCKGlUssrApiZTXLnWTQXdfb7ovQiHEAyWyFXAjmqFzhzW25JpiXxLB+0CwcsRArK0LupI+UXcxFsqy97dVjGbGBagVTM0kjPy5rIsz/jWrsS5/qDNE/+mCmwi7Nc8o/kdB3d0iY1D5GCdLzAB/M7bDvGaznFuuY6hjtIctkXlbSmofNq8cyYgPVCqZmknY4LpL65P18oxr70pf3AlX/0QdWh+WBXZrXI592qtvtDDcLk9rHKO0O0vMAH+3C2OslDDZ/uxbrmOoWRfaQEcPJuvZ0fMfwAOYAzo32m91HSrQYsYhVbGIXhzjFJW7x4sFzj0L5kqJgi/QcX9eQRm/iI79p3XPAZ1OLkhSbaXim3O+sd7YMYWbfiKB5joW1aapuTHaMgsahQi8GUMfwlCy2/Ri2A0SSAaVWScDS1zoZqIfMwvsvDsLZAuuu4kWEzQYAAA==) format('woff2'), url(data:font/woff;base64,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) format('woff'), url(data:font/ttf;base64,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KCgoKERFUVdKcgwhIRkJCf6GOmI5OWJ0Yjo6YphySVhRRUQoKCgoREWjRUQnKS9yDAkJGSEhSTpidGI5OWJ0YjoAAAAAAQAAAAADRAJEABUAAAEnLgEOAhYfARYyNwE+AS4CBgcBAcCTDCEiGQkKDcASNhIBQA0KCRkiIQz+7QEakw0KCRkiIQzAExMBQAwhIhkJCg3+7gAAAAASAN4AAQAAAAAAAAATAAAAAQAAAAAAAQALABMAAQAAAAAAAgAHAB4AAQAAAAAAAwALACUAAQAAAAAABAALADAAAQAAAAAABQALADsAAQAAAAAABgALAEYAAQAAAAAACgArAFEAAQAAAAAACwATAHwAAwABBAkAAAAmAI8AAwABBAkAAQAWALUAAwABBAkAAgAOAMsAAwABBAkAAwAWANkAAwABBAkABAAWAO8AAwABBAkABQAWAQUAAwABBAkABgAWARsAAwABBAkACgBWATEAAwABBAkACwAmAYdDcmVhdGVkIGJ5IGljb25mb250eHktaWNvbmZvbnRSZWd1bGFyeHktaWNvbmZvbnR4eS1pY29uZm9udFZlcnNpb24gMS4weHktaWNvbmZvbnRHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQBDAHIAZQBhAHQAZQBkACAAYgB5ACAAaQBjAG8AbgBmAG8AbgB0AHgAeQAtAGkAYwBvAG4AZgBvAG4AdABSAGUAZwB1AGwAYQByAHgAeQAtAGkAYwBvAG4AZgBvAG4AdAB4AHkALQBpAGMAbwBuAGYAbwBuAHQAVgBlAHIAcwBpAG8AbgAgADEALgAwAHgAeQAtAGkAYwBvAG4AZgBvAG4AdABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAHMAdgBnADIAdAB0AGYAIABmAHIAbwBtACAARgBvAG4AdABlAGwAbABvACAAcAByAG8AagBlAGMAdAAuAGgAdAB0AHAAOgAvAC8AZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQAPcm9sZV9ncmFudF9vcGVuEnJvbGVfZ3JhbnRfaW5oZXJpdBByb2xlX2dyYW50X2Nsb3NlEmljX2FuZ2xlX2Rvd25fZ3JheQ1wYXNzd29yZF9zaG93DXBhc3N3b3JkX2hpZGUSaW5wdXRfbnVtYmVyX21pbnVzEWlucHV0X251bWJlcl9wbHVzGHJvbGUtbWVtYmVyLXNlYXJjaC1jbG9zZRJyb2xlLW1lbWJlci1zZWFyY2gOUW9zX2NoZWNrYm94X3MAAA==) format('truetype');
32
- }
33
- .xy-iconfont {
34
- font-family: "xy-iconfont" !important;
35
- font-size: 16px;
36
- font-style: normal;
37
- -webkit-font-smoothing: antialiased;
38
- -moz-osx-font-smoothing: grayscale;
39
- }
40
- .xy-icon-role_grant_open:before {
41
- content: "\e662";
42
- }
43
- .xy-icon-role_grant_inherit:before {
44
- content: "\e661";
45
- }
46
- .xy-icon-role_grant_close:before {
47
- content: "\e660";
48
- }
49
- .xy-icon-ic_angle_down_gray:before {
50
- content: "\e65f";
51
- }
52
- .xy-icon-password_show:before {
53
- content: "\e65e";
54
- }
55
- .xy-icon-password_hide:before {
56
- content: "\e65d";
57
- }
58
- .xy-icon-input_number_minus:before {
59
- content: "\e65c";
60
- }
61
- .xy-icon-input_number_plus:before {
62
- content: "\e65b";
63
- }
64
- .xy-icon-role-member-search-close:before {
65
- content: "\e65a";
66
- }
67
- .xy-icon-role-member-search:before {
68
- content: "\e659";
69
- }
70
- .xy-icon-Qos_checkbox_s:before {
71
- content: "\e658";
72
- }
73
-
74
- @keyframes loaderSpin {
75
- 0% {
76
- -webkit-transform: rotate(0);
77
- transform: rotate(0);
78
- }
79
- to {
80
- -webkit-transform: rotate(1turn);
81
- transform: rotate(1turn);
82
- }
83
- }
84
- .kaihei-loading-spin {
85
- width: 18px;
86
- height: 18px;
87
- display: inline-block;
88
- position: relative;
89
- }
90
- .kaihei-loading-spin:before,
91
- .kaihei-loading-spin:after {
92
- box-sizing: border-box;
93
- width: 100%;
94
- height: 100%;
95
- content: "";
96
- position: absolute;
97
- left: 0;
98
- right: 0;
99
- display: block;
100
- border-radius: 50%;
101
- }
102
- .kaihei-loading-spin:before {
103
- border: 3px solid rgba(0, 0, 0, 0.12);
104
- }
105
- .theme-dark .kaihei-loading-spin:before {
106
- border-color: rgba(255, 255, 255, 0.12);
107
- }
108
- .kaihei-loading-spin:after {
109
- animation-duration: 0.6s;
110
- border: 3px solid transparent;
111
- border-top-color: rgba(0, 0, 0, 0.32);
112
- -webkit-animation: loaderSpin 0.6s linear infinite;
113
- animation: loaderSpin 0.6s linear infinite;
114
- }
115
- .theme-dark .kaihei-loading-spin:after {
116
- border-top-color: rgba(255, 255, 255, 0.32);
117
- }
118
- .kaihei-loading-spin.block-loading-spin {
119
- display: block;
120
- margin-left: auto;
121
- margin-right: auto;
122
- }
123
- .kaihei-image-loading-spin {
124
- display: inline-block;
125
- position: relative;
126
- height: 16px;
127
- width: 27px;
128
- margin-left: -12px / 2;
129
- }
130
- .kaihei-image-loading-spin:before,
131
- .kaihei-image-loading-spin:after {
132
- content: "";
133
- display: block;
134
- height: 12px;
135
- width: 12px;
136
- position: absolute;
137
- border-radius: 50%;
138
- }
139
- .kaihei-image-loading-spin:before {
140
- animation: k-loadingK 1.2s linear infinite, k-loadingM 1.2s linear infinite;
141
- background: #666ccc;
142
- }
143
- .kaihei-image-loading-spin:after {
144
- animation: k-loadingL 1.2s linear infinite, k-loadingN 1.2s linear infinite;
145
- background: #ff9900;
146
- }
147
- @keyframes k-loadingK {
148
- 0% {
149
- left: 0;
150
- transform: scale(1);
151
- }
152
- 25% {
153
- transform: scale(1.25);
154
- }
155
- 50% {
156
- left: 100%;
157
- transform: scale(1);
158
- }
159
- 75% {
160
- transform: scale(0.75);
161
- }
162
- 100% {
163
- left: 0;
164
- transform: scale(1);
165
- }
166
- }
167
- @keyframes k-loadingL {
168
- 0% {
169
- left: 100%;
170
- transform: scale(1);
171
- }
172
- 25% {
173
- transform: scale(0.75);
174
- }
175
- 50% {
176
- left: 0;
177
- transform: scale(1);
178
- }
179
- 75% {
180
- transform: scale(1.25);
181
- }
182
- 100% {
183
- left: 100%;
184
- transform: scale(1);
185
- }
186
- }
187
- @keyframes k-loadingN {
188
- 0% {
189
- z-index: 0;
190
- }
191
- 25% {
192
- z-index: 0;
193
- }
194
- 50% {
195
- z-index: 1;
196
- }
197
- 75% {
198
- z-index: 1;
199
- }
200
- 100% {
201
- z-index: 0;
202
- }
203
- }
204
- @keyframes k-loadingM {
205
- 0% {
206
- z-index: 1;
207
- }
208
- 25% {
209
- z-index: 1;
210
- }
211
- 50% {
212
- z-index: 0;
213
- }
214
- 75% {
215
- z-index: 0;
216
- }
217
- 100% {
218
- z-index: 1;
219
- }
220
- }
221
-
222
- @keyframes rotate {
223
- from {
224
- transform: translate(-50%, -50%) rotate(0deg);
225
- }
226
- to {
227
- transform: translate(-50%, -50%) rotate(360deg);
228
- }
229
- }
230
- .chuanyu-button {
231
- position: relative;
232
- color: #ffffff;
233
- text-align: center;
234
- outline: none;
235
- border: 0 none;
236
- overflow: hidden;
237
- white-space: nowrap;
238
- text-overflow: ellipsis;
239
- max-width: 100%;
240
- /*按钮大小*/
241
- /*按钮颜色样式*/
242
- }
243
- .chuanyu-button.disabled,
244
- .chuanyu-button:disabled {
245
- cursor: not-allowed;
246
- opacity: 0.5;
247
- }
248
- .chuanyu-button.size-xs {
249
- font-size: 12px;
250
- height: 24px;
251
- padding: 0 8px;
252
- line-height: 24px;
253
- border-radius: 8px;
254
- }
255
- .chuanyu-button.size-sm {
256
- height: 32px;
257
- min-width: 80px;
258
- font-size: 14px;
259
- padding: 0 12px;
260
- border-radius: 8px;
261
- line-height: 32px;
262
- }
263
- .chuanyu-button.size-md {
264
- height: 36px;
265
- min-width: 80px;
266
- font-size: 14px;
267
- line-height: 36px;
268
- padding: 0 12px;
269
- border-radius: 12px;
270
- }
271
- .chuanyu-button.size-lg {
272
- height: 40px;
273
- min-width: 88px;
274
- font-size: 14px;
275
- padding: 0 16px;
276
- border-radius: 12px;
277
- }
278
- .chuanyu-button.block-button {
279
- width: 100%;
280
- display: block;
281
- }
282
- .chuanyu-button.block-button.size-md {
283
- font-weight: bold;
284
- font-size: 14px;
285
- }
286
- .chuanyu-button.block-button.size-sm {
287
- font-size: 16px;
288
- }
289
- .chuanyu-button.type-primary {
290
- background-color: var(--color-primary);
291
- }
292
- .chuanyu-button.type-primary:not(.disabled):hover {
293
- background-color: var(--color-primary-hover);
294
- }
295
- .chuanyu-button.type-primary:not(.disabled):active {
296
- background-color: var(--color-primary-active);
297
- }
298
- .chuanyu-button.type-simple-primary {
299
- background-color: transparent;
300
- color: var(--color-primary);
301
- }
302
- .chuanyu-button.type-simple-primary:not(.disabled):hover {
303
- background-color: var(--color-primary);
304
- color: #fff;
305
- }
306
- .chuanyu-button.type-simple-primary:not(.disabled):active {
307
- background-color: var(--color-primary-active);
308
- color: #fff;
309
- }
310
- .chuanyu-button.type-appprimary {
311
- background-color: var(--color-primary);
312
- }
313
- .chuanyu-button.type-appprimary:not(.disabled):hover {
314
- background-color: var(--color-primary-hover);
315
- }
316
- .chuanyu-button.type-appprimary:not(.disabled):active {
317
- background-color: var(--color-primary-active);
318
- }
319
- .chuanyu-button.type-danger {
320
- background-color: var(--color-error);
321
- }
322
- .chuanyu-button.type-danger:hover {
323
- background-color: var(--color-error-hover);
324
- }
325
- .chuanyu-button.type-danger:active {
326
- background-color: var(--color-error-active);
327
- }
328
- .chuanyu-button.type-danger:disabled {
329
- opacity: 0.5;
330
- background-color: var(--color-error);
331
- }
332
- .chuanyu-button.type-success {
333
- background-color: var(--color-success);
334
- }
335
- .chuanyu-button.type-success:hover {
336
- background-color: var(--color-success-hover);
337
- }
338
- .chuanyu-button.type-success:active {
339
- background-color: var(--color-success-active);
340
- }
341
- .chuanyu-button.type-success:disabled {
342
- opacity: 0.5;
343
- background-color: var(--color-success);
344
- }
345
- .chuanyu-button.type-warning {
346
- background-color: var(--color-warn);
347
- }
348
- .chuanyu-button.type-warning:hover {
349
- background-color: var(--color-warn-hover);
350
- }
351
- .chuanyu-button.type-warning:active {
352
- background-color: var(--color-warn-active);
353
- }
354
- .chuanyu-button.type-warning:disabled {
355
- opacity: 0.5;
356
- background-color: var(--color-warn);
357
- }
358
- .chuanyu-button.type-simple {
359
- background-color: var(--button-simple);
360
- color: var(--text-description-color);
361
- }
362
- .chuanyu-button.type-simple:not(.disabled):hover {
363
- background-color: var(--button-simple-hover);
364
- }
365
- .chuanyu-button.type-simple:not(.disabled):active {
366
- background-color: var(--button-simple-active);
367
- }
368
- .chuanyu-button.type-default {
369
- color: var(--text-description-color);
370
- background-color: var(--button-default);
371
- }
372
- .chuanyu-button.type-default:hover {
373
- background-color: var(--button-default-hover);
374
- }
375
- .chuanyu-button.type-default:active {
376
- background-color: var(--button-default-active);
377
- }
378
- .chuanyu-button.type-default:disabled {
379
- opacity: 0.5;
380
- background-color: var(--button-default);
381
- }
382
- .chuanyu-button.type-ghost {
383
- color: var(--text-description-color);
384
- background-color: var(--button-simple);
385
- border: 1px solid var(--border-color);
386
- }
387
- .chuanyu-button.type-ghost:not(.disabled):hover {
388
- background-color: var(--button-simple-hover);
389
- }
390
- .chuanyu-button.type-ghost:not(.disabled):active {
391
- background-color: var(--button-simple-active);
392
- }
393
- .chuanyu-button.type-ghost-danger {
394
- color: var(--color-error);
395
- border-color: var(--color-error);
396
- border-width: 1px;
397
- border-style: solid;
398
- }
399
- .chuanyu-button.type-ghost-danger:not(.disabled):hover {
400
- color: var(--color-error-hover);
401
- border-color: var(--color-error-hover);
402
- }
403
- .chuanyu-button.type-ghost-danger:not(.disabled):active {
404
- color: var(--color-error-hover);
405
- border-color: var(--color-error-hover);
406
- }
407
- .chuanyu-button.type-simple-danger {
408
- color: var(--color-error);
409
- background-color: transparent;
410
- border: 1px solid rgba(228, 75, 77);
411
- }
412
- .chuanyu-button.type-simple-danger:not(.disabled):hover {
413
- border: 1px solid rgba(230, 93, 95);
414
- }
415
- .chuanyu-button.type-simple-danger:not(.disabled):active {
416
- background-color: rgba(228, 75, 77, 0.1);
417
- }
418
- .chuanyu-button.loading .loading-ico {
419
- position: absolute;
420
- top: 50%;
421
- left: 50%;
422
- display: block;
423
- animation: rotate 1s linear infinite;
424
- }
425
- .chuanyu-button.loading .button-text {
426
- visibility: hidden;
427
- }
428
- .chuanyu-button.loading .btn-loading-ico {
429
- position: absolute;
430
- top: 50%;
431
- left: 50%;
432
- display: block;
433
- transform: translate(-50%, -50%);
434
- height: 18px;
435
- width: 18px;
436
- line-height: 1;
437
- }
438
- .chuanyu-button.loading .btn-loading-ico .kaihei-loading-spin:before {
439
- border-color: rgba(255, 255, 255, 0.4);
440
- }
441
- .chuanyu-button.loading .btn-loading-ico .kaihei-loading-spin:after {
442
- border-top-color: rgba(255, 255, 255, 0.72);
443
- }
444
- .size-sm .button-loading-spin {
445
- transform-origin: 50%;
446
- transform: scale(0.9);
447
- }
448
- .buttons-group .chuanyu-button:not(:first-child) {
449
- margin-left: 8px;
450
- }
451
-
452
- .kaihei-checkbox {
453
- position: relative;
454
- display: inline-block;
455
- width: 18px;
456
- height: 18px;
457
- border-width: 2px;
458
- border-style: solid;
459
- border-radius: 4px;
460
- border-color: var(--border-color);
461
- margin-right: 10px;
462
- vertical-align: middle;
463
- box-sizing: border-box;
464
- }
465
- .kaihei-checkbox.active {
466
- display: inline-flex;
467
- justify-content: center;
468
- align-items: center;
469
- border-color: white;
470
- }
471
- .kaihei-checkbox.active:after {
472
- position: absolute;
473
- top: 2px;
474
- left: 2px;
475
- content: "";
476
- width: 10px;
477
- height: 10px;
478
- background-color: white;
479
- border-radius: 2px;
480
- }
481
- .kaihei-checkbox.disabled {
482
- opacity: 0.5;
483
- cursor: not-allowed;
484
- }
485
- .theme-light .kaihei-checkbox.active {
486
- border-color: var(--color-primary);
487
- }
488
- .theme-light .kaihei-checkbox.active:after {
489
- background-color: var(--color-primary);
490
- }
491
- .checkbox-box {
492
- display: inline-flex;
493
- align-items: center;
494
- }
495
- .kaihei-checkbox-mute {
496
- display: inline-block;
497
- width: 16px;
498
- height: 16px;
499
- font-size: 14px;
500
- line-height: 14px;
501
- color: var(--text-tip-color);
502
- border: 2px solid var(--text-tip-color);
503
- border-radius: 4px;
504
- margin-right: 8px;
505
- vertical-align: middle;
506
- box-sizing: border-box;
507
- }
508
- .kaihei-checkbox-mute.type-appprimary:hover:not(.disabled) {
509
- border-color: var(--color-primary);
510
- }
511
- .kaihei-checkbox-mute.type-danger:hover:not(.disabled) {
512
- border-color: var(--color-error);
513
- }
514
- .kaihei-checkbox-mute svg {
515
- visibility: hidden;
516
- }
517
- .kaihei-checkbox-mute.active {
518
- display: inline-flex;
519
- justify-content: center;
520
- align-items: center;
521
- }
522
- .kaihei-checkbox-mute.active.type-appprimary {
523
- border-color: var(--color-primary);
524
- background-color: var(--color-primary);
525
- }
526
- .kaihei-checkbox-mute.active.type-danger {
527
- border-color: var(--color-error);
528
- background-color: var(--color-error);
529
- }
530
- .kaihei-checkbox-mute.active:before {
531
- color: white;
532
- }
533
- .kaihei-checkbox-mute.active svg {
534
- visibility: visible;
535
- }
536
- .kaihei-checkbox-mute.disabled {
537
- opacity: 0.5;
538
- cursor: not-allowed;
539
- }
540
-
541
- .arc-progress-wrapper {
542
- position: absolute;
543
- top: 0;
544
- left: 0;
545
- width: 100%;
546
- height: 100%;
547
- display: flex;
548
- align-items: center;
549
- justify-content: center;
550
- background-color: rgba(0, 0, 0, 0.4);
551
- }
552
- .arc-progress-wrapper .arc-progress-track {
553
- stroke: rgba(255, 255, 255, 0.4);
554
- }
555
- .arc-progress-wrapper .arc-progress-bar {
556
- stroke: #fff;
557
- }
558
-
559
- .friendship-level {
560
- display: flex;
561
- color: var(--color-error);
562
- }
563
- .friendship-level.minus {
564
- color: var(--text-description-color);
565
- }
566
- .friendship-level .friendship-item {
567
- width: 14px;
568
- height: 14px;
569
- margin-left: 2px;
570
- display: inline-block;
571
- }
572
- .friendship-level .friendship-item svg {
573
- width: 100%;
574
- height: 100%;
575
- }
576
- .friendship-level.md {
577
- width: 16px;
578
- height: 16px;
579
- margin-left: 4px;
580
- }
581
-
582
- /*
583
- * input基本样式
584
- */
585
- .chuanyu-input {
586
- outline: none;
587
- width: 276px;
588
- height: 40px;
589
- padding: 0 16px;
590
- border-radius: 12px;
591
- background-color: var(--color-f2f);
592
- color: var(--main-color);
593
- font-size: 14px;
594
- border: 1px solid transparent;
595
- }
596
- .chuanyu-input.ghost {
597
- background-color: transparent;
598
- border-color: var(--border-color);
599
- }
600
- .chuanyu-input:hover {
601
- border-color: var(--border-hover-color);
602
- }
603
- .chuanyu-input:focus {
604
- border-color: var(--border-hover-color);
605
- box-shadow: 0 0 0 3px var(--border-active-color);
606
- }
607
- .chuanyu-input.block {
608
- width: 100%;
609
- }
610
- .chuanyu-input::placeholder {
611
- color: var(--text-tip-color);
612
- }
613
- .chuanyu-input:-webkit-autofill {
614
- -webkit-text-fill-color: #fff !important;
615
- transition: background-color 5000s ease-in-out 0s;
616
- font-size: 14px;
617
- -webkit-text-fill-color: white;
618
- }
619
- .chuanyu-input:-webkit-autofill:hover,
620
- .chuanyu-input:-webkit-autofill:focus,
621
- .chuanyu-input:-webkit-autofill:active {
622
- font-size: 14px;
623
- }
624
- /*
625
- * input后缀
626
- */
627
- .suffix-input-wrapper {
628
- position: relative;
629
- }
630
- .suffix-input-wrapper .suffix-content {
631
- position: absolute;
632
- right: 0;
633
- top: 0;
634
- height: 100%;
635
- display: flex;
636
- align-items: center;
637
- text-align: right;
638
- padding-right: 10px;
639
- color: #ffffff;
640
- font-size: 14px;
641
- }
642
- .suffix-input-wrapper .chuanyu-input {
643
- padding-right: 93px;
644
- }
645
- .normal-input {
646
- height: 40px;
647
- width: 100%;
648
- padding: 0 16px;
649
- text-align: left;
650
- border: 1px solid var(--border-color);
651
- border-radius: 12px;
652
- font-size: 14px;
653
- }
654
- .normal-input.noTheme {
655
- border-color: transparent;
656
- background-color: #f2f3f5;
657
- }
658
- .normal-input:hover {
659
- border-color: var(--border-hover-color);
660
- }
661
- .normal-input:focus {
662
- border-color: var(--border-hover-color);
663
- box-shadow: 0 0 0 3px var(--border-active-color);
664
- }
665
- .normal-input::placeholder {
666
- color: var(--text-tip-color);
667
- }
668
- .normal-input:disabled {
669
- opacity: 0.5;
670
- cursor: not-allowed;
671
- border-color: var(--border-color);
672
- }
673
- .passowrd-input {
674
- position: relative;
675
- }
676
- .passowrd-input input {
677
- height: 40px;
678
- line-height: 14px;
679
- font-size: 14px;
680
- padding: 0 16px;
681
- text-align: left;
682
- border: 1px solid var(--border-color);
683
- width: 100%;
684
- border-radius: 12px;
685
- }
686
- .passowrd-input input::placeholder {
687
- color: var(--text-tip-color);
688
- }
689
- .passowrd-input .switch-btn {
690
- position: absolute;
691
- top: 50%;
692
- transform: translateY(-50%);
693
- right: 12px;
694
- font-size: 20px;
695
- color: var(--text-tip-color);
696
- }
697
- .normal-textarea {
698
- height: 105px;
699
- font-size: 14px;
700
- padding: 10px 16px;
701
- width: 100%;
702
- outline: none;
703
- border-radius: 12px;
704
- border: 1px solid var(--border-color);
705
- }
706
- .normal-textarea:hover {
707
- border-color: var(--border-hover-color);
708
- }
709
- .normal-textarea:focus {
710
- border-color: var(--border-hover-color);
711
- box-shadow: 0 0 0 3px var(--border-active-color);
712
- }
713
- .normal-textarea:disabled {
714
- opacity: 0.5;
715
- cursor: not-allowed;
716
- border-color: var(--border-color);
717
- }
718
- .normal-textarea::placeholder {
719
- color: var(--text-tip-color);
720
- }
721
- .search-input {
722
- position: relative;
723
- display: flex;
724
- align-items: center;
725
- padding: 0 16px;
726
- height: 40px;
727
- font-size: 14px;
728
- border-radius: 12px;
729
- border: 1px solid var(--border-color);
730
- }
731
- .search-input.noborder {
732
- border-color: transparent;
733
- background-color: var(--color-f2f);
734
- }
735
- .search-input:hover {
736
- border-color: var(--border-hover-color);
737
- }
738
- .search-input.active {
739
- border-color: var(--border-hover-color);
740
- box-shadow: 0 0 0 3px var(--border-active-color);
741
- }
742
- .search-input input {
743
- flex: 1;
744
- min-width: 0;
745
- height: 100%;
746
- border: none;
747
- background: transparent;
748
- color: var(--text-color);
749
- }
750
- .search-input input::placeholder {
751
- color: var(--text-tip-color);
752
- }
753
- .search-input .button-clear,
754
- .search-input .button-search {
755
- display: flex;
756
- margin-left: 16px;
757
- width: 24px;
758
- height: 24px;
759
- font-size: 24px;
760
- color: var(--text-tip-color);
761
- cursor: pointer;
762
- }
763
- .search-input .button-clear:hover,
764
- .search-input .button-search:hover {
765
- color: var(--text-description-color);
766
- }
767
- .search-input .button-clear:active,
768
- .search-input .button-search:active {
769
- color: var(--text-color);
770
- }
771
- .search-input .button-clear svg,
772
- .search-input .button-search svg {
773
- width: 24px;
774
- height: 24px;
775
- }
776
- .search-input.sm {
777
- height: 32px;
778
- padding: 0 8px;
779
- }
780
- .search-input.sm .button-clear,
781
- .search-input.sm .button-search {
782
- margin-left: 8px;
783
- }
784
- .number-input {
785
- display: flex;
786
- }
787
- .number-input.sm input {
788
- height: 24px;
789
- }
790
- .number-input.sm .xy-iconfont {
791
- width: 24px;
792
- height: 24px;
793
- border-radius: 6px;
794
- }
795
- .number-input.sm .xy-iconfont svg {
796
- width: 12px;
797
- height: 12px;
798
- }
799
- .number-input input {
800
- color: var(--text-color);
801
- border: none;
802
- padding: 0;
803
- width: 42px;
804
- height: 32px;
805
- font-size: 14px;
806
- background-color: transparent;
807
- display: flex;
808
- align-items: center;
809
- justify-content: center;
810
- text-align: center;
811
- }
812
- .number-input .xy-iconfont {
813
- display: flex;
814
- width: 32px;
815
- height: 32px;
816
- border-radius: 8px;
817
- border: 1px solid var(--color-controls);
818
- align-items: center;
819
- justify-content: center;
820
- cursor: pointer;
821
- }
822
- .number-input .xy-iconfont svg {
823
- width: 16px;
824
- height: 16px;
825
- }
826
- .number-input .xy-iconfont:not(.disabled):hover {
827
- background: var(--menu-hover);
828
- }
829
- .number-input .xy-iconfont:not(.disabled):active {
830
- background: var(--menu-active);
831
- }
832
- .number-input .xy-iconfont.disabled {
833
- opacity: 0.5;
834
- cursor: not-allowed;
835
- }
836
-
837
- .number-step {
838
- display: flex;
839
- width: 110px;
840
- height: 28px;
841
- line-height: 28px;
842
- font-size: 14px;
843
- border-radius: 4px;
844
- border: 1px solid var(--border-color);
845
- color: var(--text-color);
846
- }
847
- .number-step button {
848
- height: 24px;
849
- width: 32px;
850
- text-align: center;
851
- font-size: 18px;
852
- font-weight: bold;
853
- border: none;
854
- background-color: transparent;
855
- color: var(--text-color);
856
- }
857
- .number-step button:disabled {
858
- color: var(--text-tip-color);
859
- }
860
- .number-step .value-label {
861
- flex: 1;
862
- }
863
-
864
- .kaihei-radio {
865
- width: 16px;
866
- height: 16px;
867
- border-radius: 50%;
868
- display: inline-flex;
869
- flex-shrink: 0;
870
- justify-content: center;
871
- align-items: center;
872
- position: relative;
873
- border: 2px solid var(--text-tip-color);
874
- }
875
- .kaihei-radio.checked {
876
- border-color: var(--color-primary);
877
- }
878
- .kaihei-radio.checked::after {
879
- position: absolute;
880
- content: "";
881
- width: 8px;
882
- height: 8px;
883
- background-color: var(--color-primary);
884
- border-radius: 50%;
885
- }
886
- .form-item-radio {
887
- display: flex;
888
- align-items: center;
889
- }
890
- .form-item-radio .label {
891
- display: inline-block;
892
- }
893
-
894
- .selector-contain {
895
- position: relative;
896
- font-size: 14px;
897
- color: var(--text-color);
898
- }
899
- .selector-contain[disabled] {
900
- opacity: 0.5;
901
- }
902
- .selector-contain[disabled] .selector-select {
903
- cursor: not-allowed;
904
- }
905
- .selector-contain[disabled] .selector-select:hover {
906
- border-color: var(--border-color);
907
- }
908
- .selector-contain[disabled] .selector-select:active {
909
- box-shadow: none;
910
- }
911
- .selector-contain.size-sm {
912
- width: 220px;
913
- }
914
- .selector-contain.size-md {
915
- width: 320px;
916
- }
917
- .selector-contain.type-ghost {
918
- color: var(--text-description-color);
919
- }
920
- .selector-contain.type-ghost .selector-select {
921
- padding: 6px 32px 6px 16px;
922
- border-radius: 16px;
923
- background-color: var(--menu-background);
924
- }
925
- .selector-contain.simple .selector-select {
926
- border: none;
927
- padding: 0 16px 0 0;
928
- line-height: 1;
929
- box-shadow: none;
930
- color: var(--text-description-color);
931
- }
932
- .selector-contain.simple .selector-select:hover,
933
- .selector-contain.simple .selector-select.active {
934
- border-color: transparent;
935
- box-shadow: none;
936
- color: var(--text-color);
937
- }
938
- .selector-contain.simple .selector-select .dropdown-icon {
939
- right: 0;
940
- }
941
- .selector-option.simple {
942
- margin-left: 50%;
943
- margin-top: 10px;
944
- transform: translate(-50%);
945
- width: 220px;
946
- padding: 10px;
947
- border-radius: 12px;
948
- border: none;
949
- }
950
- .selector-option.simple .selector-option-item {
951
- border-radius: 8px;
952
- }
953
- .selector-option.simple .selector-option-item.selected {
954
- background-color: transparent;
955
- }
956
- .selector-option.simple .selector-option-item:hover {
957
- background-color: var(--menu-hover);
958
- }
959
- .selector-select {
960
- display: flex;
961
- position: relative;
962
- width: 100%;
963
- padding: 9px 48px 9px 16px;
964
- border: 1px solid var(--border-color);
965
- border-radius: 12px;
966
- cursor: pointer;
967
- }
968
- .selector-select:hover {
969
- border-color: var(--border-hover-color);
970
- }
971
- .selector-select:active,
972
- .selector-select.active:not([disabled]) {
973
- border-color: var(--border-hover-color);
974
- box-shadow: 0 0 0 3px var(--border-active-color);
975
- }
976
- .selector-select.active .dropdown-icon {
977
- transform: translateY(-50%) rotate(180deg);
978
- }
979
- .selector-select .selector-label {
980
- display: inline-block;
981
- width: 100%;
982
- white-space: nowrap;
983
- overflow: hidden;
984
- text-overflow: ellipsis;
985
- vertical-align: middle;
986
- line-height: 20px;
987
- }
988
- .selector-select .selector-label .emoji {
989
- height: 15px;
990
- display: inline-block;
991
- margin-top: -3px;
992
- }
993
- .selector-select .dropdown-icon {
994
- position: absolute;
995
- display: flex;
996
- top: 50%;
997
- transform: translateY(-50%);
998
- right: 16px;
999
- font-size: 24px;
1000
- transition: transform 0.2s;
1001
- }
1002
- .selector-select .dropdown-icon svg {
1003
- width: 16px;
1004
- height: 16px;
1005
- }
1006
- .selector-option {
1007
- position: absolute;
1008
- width: 100%;
1009
- margin-top: 4px;
1010
- border-radius: 12px;
1011
- padding: 8px;
1012
- max-height: 240px;
1013
- font-size: 14px;
1014
- line-height: 20px;
1015
- overflow-y: auto;
1016
- background-color: var(--color-grey-bg);
1017
- box-shadow: var(--box-shadow);
1018
- z-index: 1000;
1019
- }
1020
- .selector-option.fixed {
1021
- position: fixed;
1022
- }
1023
- .ab-shadow {
1024
- position: absolute;
1025
- width: 100%;
1026
- }
1027
- .selector-option-item {
1028
- padding: 0 8px;
1029
- height: 32px;
1030
- line-height: 32px;
1031
- white-space: nowrap;
1032
- overflow: hidden;
1033
- text-overflow: ellipsis;
1034
- cursor: pointer;
1035
- border-radius: 8px;
1036
- margin-bottom: 2px;
1037
- }
1038
- .selector-option-item:last-child {
1039
- margin-bottom: 0;
1040
- }
1041
- .selector-option-item:hover {
1042
- background-color: var(--menu-hover);
1043
- }
1044
- .selector-option-item:active {
1045
- background-color: var(--menu-active);
1046
- }
1047
- .selector-option-item.selected {
1048
- background-color: var(--menu-active);
1049
- }
1050
- .selector-option-item .emoji {
1051
- height: 14px;
1052
- display: inline-block;
1053
- margin-top: -3px;
1054
- }
1055
-
1056
- .selector-search-contain {
1057
- position: relative;
1058
- font-size: 14px;
1059
- color: var(--text-color);
1060
- }
1061
- .selector-search-select {
1062
- position: relative;
1063
- display: flex;
1064
- width: 100%;
1065
- padding: 9px 48px 9px 16px;
1066
- border-radius: 12px;
1067
- border: 1px solid var(--border-color);
1068
- }
1069
- .selector-search-select.disabled {
1070
- cursor: not-allowed;
1071
- opacity: 0.5;
1072
- }
1073
- .selector-search-select:not(.disabled):hover {
1074
- border-color: var(--border-hover-color);
1075
- }
1076
- .selector-search-select:not(.disabled):active,
1077
- .selector-search-select:not(.disabled).active {
1078
- border-color: var(--border-hover-color);
1079
- box-shadow: 0 0 0 3px var(--border-active-color);
1080
- }
1081
- .selector-search-select:not(.disabled):active .dropdown-icon,
1082
- .selector-search-select:not(.disabled).active .dropdown-icon {
1083
- transform: translateY(-50%) rotate(180deg);
1084
- }
1085
- .selector-search-select .selector-search-label {
1086
- position: absolute;
1087
- top: 50%;
1088
- transform: translateY(-50%);
1089
- left: 16px;
1090
- display: inline-block;
1091
- width: calc(100% - 44px);
1092
- white-space: nowrap;
1093
- overflow: hidden;
1094
- text-overflow: ellipsis;
1095
- vertical-align: middle;
1096
- line-height: 20px;
1097
- }
1098
- .selector-search-select .selector-search-label.none {
1099
- color: var(--text-tip-color);
1100
- }
1101
- .selector-search-select .dropdown-icon {
1102
- position: absolute;
1103
- display: flex;
1104
- top: 50%;
1105
- transform: translateY(-50%);
1106
- right: 16px;
1107
- font-size: 24px;
1108
- transition: transform 0.2s;
1109
- }
1110
- .selector-search-select .dropdown-icon svg {
1111
- width: 16px;
1112
- height: 16px;
1113
- }
1114
- .selector-search-select input {
1115
- padding: 0;
1116
- height: 20px;
1117
- width: 100%;
1118
- border: none;
1119
- cursor: default;
1120
- color: var(--text-color);
1121
- }
1122
- .theme-dark .selector-search-select input {
1123
- background-color: transparent;
1124
- }
1125
- .selector-search-option {
1126
- position: fixed;
1127
- padding: 8px;
1128
- width: 100%;
1129
- margin-top: 4px;
1130
- max-height: 400px;
1131
- background-color: var(--menu-background);
1132
- border-radius: 12px;
1133
- z-index: 1000;
1134
- box-shadow: var(--box-shadow);
1135
- overflow-y: auto;
1136
- }
1137
- .selector-search-option-item {
1138
- margin-bottom: 2px;
1139
- padding: 0 8px;
1140
- height: 32px;
1141
- line-height: 32px;
1142
- white-space: nowrap;
1143
- overflow: hidden;
1144
- text-overflow: ellipsis;
1145
- border-radius: 6px;
1146
- cursor: pointer;
1147
- }
1148
- .selector-search-option-item:hover {
1149
- background-color: var(--menu-hover);
1150
- }
1151
- .selector-search-option-item.disabled {
1152
- cursor: not-allowed;
1153
- }
1154
-
1155
- .custom-tooltip {
1156
- padding: 4px 8px;
1157
- color: #fff;
1158
- font-size: 14px;
1159
- line-height: 20px;
1160
- word-break: break-all;
1161
- text-align: left;
1162
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
1163
- z-index: 100;
1164
- pointer-events: none;
1165
- border-radius: 10px;
1166
- }
1167
- .custom-tooltip.useMaxWidth {
1168
- max-width: 160px;
1169
- }
1170
- .custom-tooltip.show {
1171
- opacity: 1;
1172
- }
1173
- .custom-tooltip .user-avatar {
1174
- width: 18px;
1175
- height: 18px;
1176
- vertical-align: middle;
1177
- margin-right: 4px;
1178
- }
1179
- .custom-tooltip .user-fullname {
1180
- vertical-align: middle;
1181
- }
1182
- body .__react_component_tooltip.type-info {
1183
- background-color: #121315;
1184
- padding: 4px 8px;
1185
- color: #fff;
1186
- font-size: 14px;
1187
- line-height: 20px;
1188
- word-break: break-all;
1189
- text-align: left;
1190
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
1191
- z-index: 100;
1192
- pointer-events: none;
1193
- border-radius: 10px;
1194
- }
1195
- body .__react_component_tooltip.type-info.useMaxWidth {
1196
- max-width: 160px;
1197
- }
1198
- body .__react_component_tooltip.type-info.show {
1199
- opacity: 1;
1200
- }
1201
- body .__react_component_tooltip.type-info .user-avatar {
1202
- width: 18px;
1203
- height: 18px;
1204
- vertical-align: middle;
1205
- margin-right: 4px;
1206
- }
1207
- body .__react_component_tooltip.type-info .user-fullname {
1208
- vertical-align: middle;
1209
- }
1210
- body .__react_component_tooltip.type-info.place-right:after {
1211
- border-right-color: #121315;
1212
- }
1213
- body .__react_component_tooltip.type-info.place-top:after {
1214
- border-top-color: #121315;
1215
- }
1216
- body .__react_component_tooltip.type-info.place-bottom:after {
1217
- border-bottom-color: #121315;
1218
- }
1219
- body .__react_component_tooltip.type-info.place-left:after {
1220
- border-left-color: #121315;
1221
- }
1222
- .body-tooltip {
1223
- z-index: 1888 !important;
1224
- }
1225
- .kaihei-tips {
1226
- pointer-events: none;
1227
- }
1228
- .kaihei-tips.useMaxWidth {
1229
- max-width: 160px;
1230
- }
1231
- .kaihei-tips .description {
1232
- white-space: nowrap;
1233
- text-overflow: ellipsis;
1234
- overflow: hidden;
1235
- color: rgba(237, 238, 240, 0.7);
1236
- font-size: 12px;
1237
- line-height: 18px;
1238
- }
1239
- body .__react_component_tooltip.type-success {
1240
- padding: 4px 8px;
1241
- color: #fff;
1242
- font-size: 14px;
1243
- line-height: 20px;
1244
- word-break: break-all;
1245
- text-align: left;
1246
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
1247
- z-index: 100;
1248
- pointer-events: none;
1249
- border-radius: 10px;
1250
- background-color: #7acc35;
1251
- }
1252
- body .__react_component_tooltip.type-success.useMaxWidth {
1253
- max-width: 160px;
1254
- }
1255
- body .__react_component_tooltip.type-success.show {
1256
- opacity: 1;
1257
- }
1258
- body .__react_component_tooltip.type-success .user-avatar {
1259
- width: 18px;
1260
- height: 18px;
1261
- vertical-align: middle;
1262
- margin-right: 4px;
1263
- }
1264
- body .__react_component_tooltip.type-success .user-fullname {
1265
- vertical-align: middle;
1266
- }
1267
- body .__react_component_tooltip.type-success.place-right:after {
1268
- border-right-color: #7acc35;
1269
- }
1270
- body .__react_component_tooltip.type-success.place-top:after {
1271
- border-top-color: #7acc35;
1272
- }
1273
- body .__react_component_tooltip.type-success.place-bottom:after {
1274
- border-bottom-color: #7acc35;
1275
- }
1276
- body .__react_component_tooltip.type-success.place-left:after {
1277
- border-left-color: #7acc35;
1278
- }
1279
- body .__react_component_tooltip.type-dark {
1280
- margin-top: 0;
1281
- padding: 4px 8px;
1282
- border-radius: 10px;
1283
- max-width: 136px;
1284
- max-height: 62px;
1285
- font-size: 12px;
1286
- line-height: 1.3;
1287
- overflow: hidden;
1288
- color: rgba(255, 255, 255, 0.87);
1289
- background-color: rgba(0, 0, 0, 0.87);
1290
- pointer-events: none;
1291
- }
1292
- body .__react_component_tooltip.type-dark.place-right {
1293
- margin: 0;
1294
- }
1295
- body .__react_component_tooltip.type-dark.place-right:after {
1296
- display: none;
1297
- }
1298
- .theme-dark .__react_component_tooltip.type-dark {
1299
- color: rgba(0, 0, 0, 0.87);
1300
- background-color: rgba(255, 255, 255, 0.87);
1301
- }
1302
-
1303
- .ui-switch {
1304
- position: relative;
1305
- display: inline-block;
1306
- box-sizing: border-box;
1307
- overflow: visible;
1308
- width: 32px;
1309
- height: 20px;
1310
- border-radius: 10px;
1311
- border: 2px solid var(--text-tip-color);
1312
- cursor: pointer;
1313
- transition: 0.3s ease-out all;
1314
- }
1315
- /*adding a wide width for larger switch text*/
1316
- .ui-switch.wide {
1317
- width: 80px;
1318
- }
1319
- .ui-switch small {
1320
- width: 12px;
1321
- height: 12px;
1322
- position: absolute;
1323
- top: 50%;
1324
- margin-top: -6px;
1325
- left: 2px;
1326
- transition: 200ms ease-out all;
1327
- }
1328
- .ui-switch small::before {
1329
- content: "";
1330
- position: absolute;
1331
- left: 0;
1332
- top: 0;
1333
- bottom: 0;
1334
- right: 0;
1335
- border-radius: 6px;
1336
- background-color: var(--text-tip-color);
1337
- transition: 200ms ease-out all;
1338
- }
1339
- .ui-switch.checked {
1340
- border-color: var(--color-primary);
1341
- }
1342
- .ui-switch.checked small {
1343
- left: calc(100% - 14px);
1344
- }
1345
- .ui-switch.checked small::before {
1346
- background-color: var(--color-primary);
1347
- }
1348
- .ui-switch:active:not(.disabled) small::before {
1349
- left: 0;
1350
- right: -100%;
1351
- }
1352
- .ui-switch.checked:active:not(.disabled) small::before {
1353
- right: 0;
1354
- left: -100%;
1355
- }
1356
- /*wider switch text moves small further to the right*/
1357
- .ui-switch.wide.checked small {
1358
- left: 52px;
1359
- }
1360
- /*styles for switch-text*/
1361
- .ui-switch .switch-text {
1362
- font-size: 13px;
1363
- }
1364
- .ui-switch .off {
1365
- display: block;
1366
- position: absolute;
1367
- right: 10%;
1368
- top: 25%;
1369
- z-index: 0;
1370
- color: #a9a9a9;
1371
- }
1372
- .ui-switch .on {
1373
- display: none;
1374
- z-index: 0;
1375
- color: #fff;
1376
- position: absolute;
1377
- top: 25%;
1378
- left: 9%;
1379
- }
1380
- .ui-switch.checked .off {
1381
- display: none;
1382
- }
1383
- .ui-switch.checked .on {
1384
- display: block;
1385
- }
1386
- .ui-switch.disabled {
1387
- cursor: not-allowed;
1388
- opacity: 0.5;
1389
- }
1390
- .ui-switch.disabled small {
1391
- box-shadow: none;
1392
- }
1393
- /* Switchery sizes. */
1394
- /* Switchery size shorthand classes */
1395
- .kaihei-auth-switch {
1396
- display: inline-flex;
1397
- width: 100px;
1398
- height: 30px;
1399
- border-radius: 4px;
1400
- cursor: pointer;
1401
- }
1402
- .kaihei-auth-switch.disabled {
1403
- opacity: 0.5;
1404
- cursor: not-allowed;
1405
- }
1406
- .kaihei-auth-switch:not(.disabled) .auth-status-item:hover {
1407
- background-color: var(--menu-hover);
1408
- }
1409
- .kaihei-auth-switch .auth-status-item {
1410
- flex: 1;
1411
- display: flex;
1412
- justify-content: center;
1413
- align-items: center;
1414
- border: 1px solid var(--border-color);
1415
- }
1416
- .kaihei-auth-switch .auth-status-item .xy-iconfont {
1417
- font-size: 24px;
1418
- }
1419
- .kaihei-auth-switch .auth-status-item.close-status {
1420
- border-top-left-radius: 8px;
1421
- border-bottom-left-radius: 8px;
1422
- color: var(--color-error);
1423
- }
1424
- .kaihei-auth-switch .auth-status-item.close-status.active {
1425
- color: white;
1426
- background-color: var(--color-error);
1427
- border-color: var(--color-error);
1428
- }
1429
- .kaihei-auth-switch .auth-status-item.open-status {
1430
- border-top-right-radius: 8px;
1431
- border-bottom-right-radius: 8px;
1432
- color: var(--color-primary);
1433
- }
1434
- .kaihei-auth-switch .auth-status-item.open-status.active {
1435
- color: white;
1436
- background-color: var(--color-primary);
1437
- border-color: var(--color-primary);
1438
- }
1439
- .kaihei-auth-switch .auth-status-item.default-status {
1440
- border-left-width: 0;
1441
- border-right-width: 0;
1442
- color: var(--text-tip-color);
1443
- }
1444
- .kaihei-auth-switch .auth-status-item.default-status.active {
1445
- color: white;
1446
- background-color: var(--text-tip-color);
1447
- border-color: var(--text-tip-color);
1448
- }
1449
-
1450
- .textarea-box {
1451
- position: relative;
1452
- border: 1px solid var(--border-color);
1453
- border-radius: 12px;
1454
- padding: 12px 16px;
1455
- }
1456
- .textarea-box.show-max-length {
1457
- padding-bottom: 30px;
1458
- }
1459
- .textarea-box textarea {
1460
- padding: 0;
1461
- margin: 0;
1462
- width: 100%;
1463
- height: 70px;
1464
- border: none;
1465
- background-color: initial;
1466
- color: inherit;
1467
- line-height: 1.5;
1468
- resize: none;
1469
- }
1470
- .textarea-box textarea::placeholder {
1471
- color: var(--text-tip-color);
1472
- }
1473
- .textarea-box:hover:not(.disabled) {
1474
- border-color: var(--border-hover-color);
1475
- }
1476
- .textarea-box:active {
1477
- box-shadow: 0 0 3px var(--border-active-color);
1478
- }
1479
- .textarea-box:active:not(.disabled) {
1480
- border-color: var(--border-hover-color);
1481
- }
1482
- .textarea-box:focus,
1483
- .textarea-box.theme-focus {
1484
- outline: none;
1485
- border-color: var(--border-hover-color);
1486
- box-shadow: 0 0 0 3px var(--border-active-color);
1487
- }
1488
- .textarea-box.disabled {
1489
- opacity: 0.5;
1490
- }
1491
- .textarea-box .footer {
1492
- font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
1493
- position: absolute;
1494
- bottom: 7px;
1495
- right: 16px;
1496
- font-size: 12px;
1497
- color: var(--text-tip-color);
1498
- }
1499
- .textarea-box .footer.error {
1500
- color: var(--color-error);
1501
- }
1502
- .textarea-box.size-sm {
1503
- border-width: 0px;
1504
- }
1505
- .textarea-box.size-sm textarea {
1506
- padding: 0;
1507
- width: 224px;
1508
- line-height: 20px;
1509
- border-radius: 4px;
1510
- font-size: 12px;
1511
- }
1512
- .textarea-box.size-sm .footer {
1513
- bottom: 0px;
1514
- }
1515
-
1516
- .time-selector {
1517
- position: relative;
1518
- }
1519
- .time-selector-select {
1520
- position: relative;
1521
- height: 40px;
1522
- padding: 0 48px 0 16px;
1523
- line-height: 40px;
1524
- border: 1px solid var(--border-color);
1525
- border-radius: 12px;
1526
- font-size: 16px;
1527
- color: var(--text-color);
1528
- }
1529
- .time-selector-select:hover {
1530
- border-color: var(--border-hover-color);
1531
- }
1532
- .time-selector-select:active,
1533
- .time-selector-select.active {
1534
- border-color: var(--border-hover-color);
1535
- box-shadow: 0 0 0 3px var(--border-active-color);
1536
- }
1537
- .time-selector-select:active .dropdown-icon,
1538
- .time-selector-select.active .dropdown-icon {
1539
- transform: translateY(-50%) rotate(180deg);
1540
- }
1541
- .time-selector-select .dropdown-icon {
1542
- position: absolute;
1543
- display: flex;
1544
- top: 50%;
1545
- transform: translateY(-50%);
1546
- right: 16px;
1547
- font-size: 24px;
1548
- color: var(--text-description-color);
1549
- transition: transform 200ms linear;
1550
- }
1551
- .time-selector-select .dropdown-icon svg {
1552
- width: 16px;
1553
- height: 16px;
1554
- }
1555
- .time-selector-option {
1556
- position: absolute;
1557
- width: 100%;
1558
- display: flex;
1559
- flex-wrap: wrap;
1560
- margin-top: 4px;
1561
- border-radius: 12px;
1562
- background-color: var(--color-grey-bg);
1563
- box-shadow: var(--box-shadow);
1564
- overflow: hidden;
1565
- font-size: 14px;
1566
- color: var(--text-color);
1567
- z-index: 1000;
1568
- }
1569
- .time-selector-option .footer {
1570
- height: 40px;
1571
- width: 100%;
1572
- text-align: center;
1573
- line-height: 40px;
1574
- border-top: 1px solid var(--color-line);
1575
- cursor: pointer;
1576
- }
1577
- .time-selector-option .footer:hover {
1578
- background-color: var(--menu-hover);
1579
- }
1580
- .time-selector-option .footer:active {
1581
- background-color: var(--menu-active);
1582
- }
1583
- .time-selector-minute,
1584
- .time-selector-hour {
1585
- width: 50%;
1586
- padding: 8px;
1587
- height: 210px;
1588
- }
1589
- .time-selector-hour {
1590
- border-right: 1px solid var(--color-line);
1591
- }
1592
- .time-selector-item {
1593
- height: 32px;
1594
- line-height: 32px;
1595
- border-radius: 8px;
1596
- text-align: center;
1597
- margin-bottom: 2px;
1598
- }
1599
- .time-selector-item:hover {
1600
- background-color: var(--menu-hover);
1601
- }
1602
- .time-selector-item:active,
1603
- .time-selector-item.active {
1604
- background-color: var(--menu-active);
1605
- }
1606
- .time-selector-item.disabled {
1607
- opacity: 0.5;
1608
- background-color: transparent;
1609
- }
1610
- .time-selector-item:last-child {
1611
- margin-bottom: 0;
1612
- }
1613
-
1
+ input,
2
+ textarea {
3
+ outline: none;
4
+ }
5
+ .custom-scroll-bar {
6
+ overflow-x: hidden;
7
+ overflow-y: scroll;
8
+ overflow-y: overlay;
9
+ scrollbar-width: thin;
10
+ scrollbar-color: var(--color-bbb) transparent;
11
+ }
12
+ .custom-scroll-bar::-webkit-scrollbar {
13
+ width: 0;
14
+ }
15
+ .custom-scroll-bar:hover::-webkit-scrollbar {
16
+ width: 8px;
17
+ }
18
+ .custom-scroll-bar::-webkit-scrollbar-track {
19
+ background-color: transparent;
20
+ }
21
+ .custom-scroll-bar::-webkit-scrollbar-thumb {
22
+ border: 2px solid transparent;
23
+ background-color: var(--color-bbb);
24
+ border-radius: 4px;
25
+ background-clip: content-box;
26
+ }
27
+
28
+ @font-face {
29
+ font-family: "xy-iconfont";
30
+ /* Project id 2850126 */
31
+ src: url(data:font/woff2;base64,d09GMgABAAAAAAVcAAsAAAAACywAAAUNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDfAqGbIYGATYCJAMwCxoABCAFhQsHggAb6gkjEaaLciPZPzV50IxBAokg2BjEAI0ZA25YRAUWZsaAIEADJLhAAQAAAABBPMn1ztvdO3/KsdQnVUqJJdXmBuc0U2NHavegPn1AN5nkBJSoAcMtkSVMTxAAS3O2R1R7F2EKm5x90myvlINCclS6WlObCzh2kYBGxyqiDWyQSoT2XWk8oARCl6lSbCtca5yuMvDaCbwEAZzkUo1qbNZA4D1p+NwECMegUQXC+jJp/GA3sLNeTIlAsDutdU80yDYsoNarawBb3beXL6jFDgqLRrtMtzENfeDC+6b3PZp4CPoNNgUBOyvAAmggc2Z+GVceHYH2SzLROPOihmJia4PA+xEez/t+tn7eVcGFEwdLbP/wLBg0CgGxotndYO2yuXbNYOpD6A/ECRgAxAEYCMQOGATEBhgMxAoYAsQCGArEAIYB0YDhQBRgBIwnbJjTCaGAL/AbmYTGHoRDdKIN/kMUYjVut/Hx8fVy2KMSVNLgsVVosKKvt9J68CJE5RhWNuIq1Djb6PWIJBt2yZHbuFo8V7LI0BNSRWTo07jzUqUIGxHcTaRVkMNUzuhGxAq9Bg5utCEQEsaMh1KOgxsfyL3hkT4NehmX9Vd5+agxD3BZIpITiRAZCjyeU0S3xGK58KjXKEeNXm/a7ffJIHK7fa6UR4EhfWDGE/AqG7GHruIXHu3D6XwDfOYTxDYTG/si987eVjTSMzyNXszIGHl+Huzj2d3OhcJylDeWDnpLLIXohWV9wrW34UhLy7VWCxLnXv//X4OrqEiYtH6ZwciXvyGw22N3jo6Z4uiFNED90QInKPB/8N3reRvh15rCGWn9N6851jaya3vI5Mmn+4bU1ob0PX3gf3TSzp2VdsRTkIOS+yVuWpPaV7VcMzSOJjCwjUYsze6SldVlEKkhXYP8kqzeCX7NelXSDx7M6JNhVsKz6b/OP6axRkx0qtKctC5i3TytZu+/+nZude9A1jX3jv4rNSfHuV0vti6Cwtx906dnt/brntqY3NCQ0piy39CQWoQb96f4F25Ibkzt3rcte/r00/ZL3bJl81vLh5eVDp8F/vDSWZYyaJCF4WWcf9mx44xjq1u+7fbZmX+xf03N7W10Xajj2N+PpT9J2qvooWoIQNvVOgB1R2kA1DXhAKAfqXuXscVGbiBqOYA6pNQAup+qG29U9f/uz/DnqvW806f8n11sAHi74o0jvIb6cTvqRdj5U2FQzWGNnAtuk9c/ZmsEcJPOb16kAKeeBI+a9OfdGPEACMOCizVArrARLde4SCKGlUssrApiZTXLnWTQXdfb7ovQiHEAyWyFXAjmqFzhzW25JpiXxLB+0CwcsRArK0LupI+UXcxFsqy97dVjGbGBagVTM0kjPy5rIsz/jWrsS5/qDNE/+mCmwi7Nc8o/kdB3d0iY1D5GCdLzAB/M7bDvGaznFuuY6hjtIctkXlbSmofNq8cyYgPVCqZmknY4LpL65P18oxr70pf3AlX/0QdWh+WBXZrXI592qtvtDDcLk9rHKO0O0vMAH+3C2OslDDZ/uxbrmOoWRfaQEcPJuvZ0fMfwAOYAzo32m91HSrQYsYhVbGIXhzjFJW7x4sFzj0L5kqJgi/QcX9eQRm/iI79p3XPAZ1OLkhSbaXim3O+sd7YMYWbfiKB5joW1aapuTHaMgsahQi8GUMfwlCy2/Ri2A0SSAaVWScDS1zoZqIfMwvsvDsLZAuuu4kWEzQYAAA==) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAAcEAAsAAAAACywAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAARAAAAGA8bUkyY21hcAAAAYgAAACHAAAB/Oe1tztnbHlmAAACEAAAAngAAANsbGna+2hlYWQAAASIAAAALAAAADYeI/d/aGhlYQAABLQAAAAcAAAAJAfeA41obXR4AAAE0AAAAA8AAAAwMAAAAGxvY2EAAATgAAAAGgAAABoEyAPobWF4cAAABPwAAAAfAAAAIAEZADZuYW1lAAAFHAAAAUcAAAKLddh/+3Bvc3QAAAZkAAAAnQAAAQAqa8CSeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGFhYJzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnkU8S2Ju+N/AwMB8hwFIMjCiKGICAHgDDRp4nO2RyxHCMAxEn4kJgVAKZ2oBwjcnCqJGtRFWXspAM09j7Ug+7AJroBMHUaG8KWTNUkvTO3ZNrxzbTk095mVRP2XXrEtG7W0Z2NDr16q7VW6Wnn/tW//8pjGdM+19NulzXIycJCYjT4mrkbvEzchn4m4yx3iYTCOeJrONl1Eeys1Qvi5SJW0AeJxtUkFPE0EYnW8KO0zdtrSUXVZ0m93aHUthG4fSDTWuEAsJqCFcakWNSTUGLxyqBziY4EW8yAUOnujBeKE3D3DlxIkD8cAf8Kz/gOq3S4sxcQ5v3zffm7z3zQ4BgivynK6SfkLA00EHiLp78GSisw7v3FZIUHKhG6AfSYSQnEBZbgJ+TKwHQHp9ekIfkCtYMJ0JJjzh6R49abXcvT03RGr2GGL3zDGchWe8spO1bCUDmqT8gDHe2eWMHfRFAatEAlkYIYTv9BRZilh4TgcBmh6nWVt4mk+LIHXmxCmC8GnkVuZ81aStl1Nj24cvlu6vjddnR9SvPbIb7tPTzPlrkw48fLOytTiypo7M1sd/d7+74eZf3zZJkGskh75SNwFtbRfQR7fjkDZB+lBygUktrdhOqUzJq2ePP+XR4vhweyxI4C657tLTANyslPNS0rbIbdXRYnFrBXGz20WoBe15eXn3BNqEYWHJNN5TCQqwXyh0agVo12o9DdD3mA6zaddhMkhRgOEgyh3IBnluw1QQKmXspwwjtW/c6BG6+U8Zkt4//UYlsbEoywx4PphUSQCOHqdOEVgcXFq+C8IpwQof5RsbymAy1tevIOnviyUHA5JMquEOpw7nYUNNJpX/SfkooeEcdXqGc+SDl1aeKglHODZTmJLWNV2blB7a+9TJ4dWXfJAmpOMQudcs5kV17stc9Sau6tzyo8WmalkG550Plcb0dONto1JpfG4u1Jd7EtSKfLGpcm5Y1kIFFReyy/ccqdIqGcZCuDivFjxND3wcWWEARzuqZRs8GjtKlVMwE4tyw7bUzk+4utPlR0NDMNMVdX6RPyUhoDV4nGNgZGBgAGLmo/0n4vltvjJwszCAwN2mm9eQaRYGJhDNwcAE4gEAQAkK0nicY2BkYGBu+N/AEMPCAAJAkpEBFfAAAEcSAnV4nGNhYGBgIQEDAAUQADEAAAAAAAAUACQAPgBYAJQA0gDkAQ4BSAGMAbYAAHicY2BkYGDgYdBiYGYAASYg5gJCBob/YD4DAA3tAVAAeJx10btuwjAUBuA/3KqC1KGVWCpVXspSES4jHZFgLgM7BIeLkjhyDAKpe8c+TZ+iT9Clr9BX6E84SIjSRLY+/z7HsRQAt/iGh8Nzx3GwhxpXBxdwhQdxkfmjuES3xWX6WVyhB+IqnvAi3p/4yhO80jVXDbyLPdTxIS7gBp/iIvMvcYn+EZdR98riCn0vrmLsdcQ1NLy3vtUTp2dqulPLwCShSdx21zxypOfraGJPkhOOtc2WJlEdv32SDnWi7fHIbDPvOheq0JpYDbiro8io1JqVDpy/cC7ttVqh5H5gYvRhoTGB4zyDwhQ7zksEMEgQ5rPDlmnzTzpizxxrROy3/9RcTsfstMiY79cKHfj8bZdrh6xN8vrzW2bY8Ptdpo7VisOyJ6YG0qt5t4hWSPO9FZOAuY9F3pWihxbf8Kzez+8Q/wIYYnd7AHicbY1bDoIwEEU7+EbwwZebYDGuoCmloY0w03Ro0N0L4UOM3r97zk2uSMScVPxPBgmsYA0b2MIO9nCAFI6QQS7OgVojm6Cwl+QNFovu0Jrg+ssC6ZbYFE5Lhc0IaxpwMq/cK+aBQi3Z0vBp1tXjHH3sJcauMkF2DiNfv5BvI9+mk7IzEyjZqKBtOZ/9itOdWGpr9KOip2Qh3lWbTLAAAAA=) format('woff'), url(data:font/ttf;base64,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KCgoKERFUVdKcgwhIRkJCf6GOmI5OWJ0Yjo6YphySVhRRUQoKCgoREWjRUQnKS9yDAkJGSEhSTpidGI5OWJ0YjoAAAAAAQAAAAADRAJEABUAAAEnLgEOAhYfARYyNwE+AS4CBgcBAcCTDCEiGQkKDcASNhIBQA0KCRkiIQz+7QEakw0KCRkiIQzAExMBQAwhIhkJCg3+7gAAAAASAN4AAQAAAAAAAAATAAAAAQAAAAAAAQALABMAAQAAAAAAAgAHAB4AAQAAAAAAAwALACUAAQAAAAAABAALADAAAQAAAAAABQALADsAAQAAAAAABgALAEYAAQAAAAAACgArAFEAAQAAAAAACwATAHwAAwABBAkAAAAmAI8AAwABBAkAAQAWALUAAwABBAkAAgAOAMsAAwABBAkAAwAWANkAAwABBAkABAAWAO8AAwABBAkABQAWAQUAAwABBAkABgAWARsAAwABBAkACgBWATEAAwABBAkACwAmAYdDcmVhdGVkIGJ5IGljb25mb250eHktaWNvbmZvbnRSZWd1bGFyeHktaWNvbmZvbnR4eS1pY29uZm9udFZlcnNpb24gMS4weHktaWNvbmZvbnRHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQBDAHIAZQBhAHQAZQBkACAAYgB5ACAAaQBjAG8AbgBmAG8AbgB0AHgAeQAtAGkAYwBvAG4AZgBvAG4AdABSAGUAZwB1AGwAYQByAHgAeQAtAGkAYwBvAG4AZgBvAG4AdAB4AHkALQBpAGMAbwBuAGYAbwBuAHQAVgBlAHIAcwBpAG8AbgAgADEALgAwAHgAeQAtAGkAYwBvAG4AZgBvAG4AdABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAHMAdgBnADIAdAB0AGYAIABmAHIAbwBtACAARgBvAG4AdABlAGwAbABvACAAcAByAG8AagBlAGMAdAAuAGgAdAB0AHAAOgAvAC8AZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQAPcm9sZV9ncmFudF9vcGVuEnJvbGVfZ3JhbnRfaW5oZXJpdBByb2xlX2dyYW50X2Nsb3NlEmljX2FuZ2xlX2Rvd25fZ3JheQ1wYXNzd29yZF9zaG93DXBhc3N3b3JkX2hpZGUSaW5wdXRfbnVtYmVyX21pbnVzEWlucHV0X251bWJlcl9wbHVzGHJvbGUtbWVtYmVyLXNlYXJjaC1jbG9zZRJyb2xlLW1lbWJlci1zZWFyY2gOUW9zX2NoZWNrYm94X3MAAA==) format('truetype');
32
+ }
33
+ .xy-iconfont {
34
+ font-family: "xy-iconfont" !important;
35
+ font-size: 16px;
36
+ font-style: normal;
37
+ -webkit-font-smoothing: antialiased;
38
+ -moz-osx-font-smoothing: grayscale;
39
+ }
40
+ .xy-icon-role_grant_open:before {
41
+ content: "\e662";
42
+ }
43
+ .xy-icon-role_grant_inherit:before {
44
+ content: "\e661";
45
+ }
46
+ .xy-icon-role_grant_close:before {
47
+ content: "\e660";
48
+ }
49
+ .xy-icon-ic_angle_down_gray:before {
50
+ content: "\e65f";
51
+ }
52
+ .xy-icon-password_show:before {
53
+ content: "\e65e";
54
+ }
55
+ .xy-icon-password_hide:before {
56
+ content: "\e65d";
57
+ }
58
+ .xy-icon-input_number_minus:before {
59
+ content: "\e65c";
60
+ }
61
+ .xy-icon-input_number_plus:before {
62
+ content: "\e65b";
63
+ }
64
+ .xy-icon-role-member-search-close:before {
65
+ content: "\e65a";
66
+ }
67
+ .xy-icon-role-member-search:before {
68
+ content: "\e659";
69
+ }
70
+ .xy-icon-Qos_checkbox_s:before {
71
+ content: "\e658";
72
+ }
73
+
74
+ @keyframes loaderSpin {
75
+ 0% {
76
+ -webkit-transform: rotate(0);
77
+ transform: rotate(0);
78
+ }
79
+ to {
80
+ -webkit-transform: rotate(1turn);
81
+ transform: rotate(1turn);
82
+ }
83
+ }
84
+ .kaihei-loading-spin {
85
+ width: 18px;
86
+ height: 18px;
87
+ display: inline-block;
88
+ position: relative;
89
+ }
90
+ .kaihei-loading-spin:before,
91
+ .kaihei-loading-spin:after {
92
+ box-sizing: border-box;
93
+ width: 100%;
94
+ height: 100%;
95
+ content: "";
96
+ position: absolute;
97
+ left: 0;
98
+ right: 0;
99
+ display: block;
100
+ border-radius: 50%;
101
+ }
102
+ .kaihei-loading-spin:before {
103
+ border: 3px solid rgba(0, 0, 0, 0.12);
104
+ }
105
+ .theme-dark .kaihei-loading-spin:before {
106
+ border-color: rgba(255, 255, 255, 0.12);
107
+ }
108
+ .kaihei-loading-spin:after {
109
+ animation-duration: 0.6s;
110
+ border: 3px solid transparent;
111
+ border-top-color: rgba(0, 0, 0, 0.32);
112
+ -webkit-animation: loaderSpin 0.6s linear infinite;
113
+ animation: loaderSpin 0.6s linear infinite;
114
+ }
115
+ .theme-dark .kaihei-loading-spin:after {
116
+ border-top-color: rgba(255, 255, 255, 0.32);
117
+ }
118
+ .kaihei-loading-spin.block-loading-spin {
119
+ display: block;
120
+ margin-left: auto;
121
+ margin-right: auto;
122
+ }
123
+ .kaihei-image-loading-spin {
124
+ display: inline-block;
125
+ position: relative;
126
+ height: 16px;
127
+ width: 27px;
128
+ margin-left: -12px / 2;
129
+ }
130
+ .kaihei-image-loading-spin:before,
131
+ .kaihei-image-loading-spin:after {
132
+ content: "";
133
+ display: block;
134
+ height: 12px;
135
+ width: 12px;
136
+ position: absolute;
137
+ border-radius: 50%;
138
+ }
139
+ .kaihei-image-loading-spin:before {
140
+ animation: k-loadingK 1.2s linear infinite, k-loadingM 1.2s linear infinite;
141
+ background: #666ccc;
142
+ }
143
+ .kaihei-image-loading-spin:after {
144
+ animation: k-loadingL 1.2s linear infinite, k-loadingN 1.2s linear infinite;
145
+ background: #ff9900;
146
+ }
147
+ @keyframes k-loadingK {
148
+ 0% {
149
+ left: 0;
150
+ transform: scale(1);
151
+ }
152
+ 25% {
153
+ transform: scale(1.25);
154
+ }
155
+ 50% {
156
+ left: 100%;
157
+ transform: scale(1);
158
+ }
159
+ 75% {
160
+ transform: scale(0.75);
161
+ }
162
+ 100% {
163
+ left: 0;
164
+ transform: scale(1);
165
+ }
166
+ }
167
+ @keyframes k-loadingL {
168
+ 0% {
169
+ left: 100%;
170
+ transform: scale(1);
171
+ }
172
+ 25% {
173
+ transform: scale(0.75);
174
+ }
175
+ 50% {
176
+ left: 0;
177
+ transform: scale(1);
178
+ }
179
+ 75% {
180
+ transform: scale(1.25);
181
+ }
182
+ 100% {
183
+ left: 100%;
184
+ transform: scale(1);
185
+ }
186
+ }
187
+ @keyframes k-loadingN {
188
+ 0% {
189
+ z-index: 0;
190
+ }
191
+ 25% {
192
+ z-index: 0;
193
+ }
194
+ 50% {
195
+ z-index: 1;
196
+ }
197
+ 75% {
198
+ z-index: 1;
199
+ }
200
+ 100% {
201
+ z-index: 0;
202
+ }
203
+ }
204
+ @keyframes k-loadingM {
205
+ 0% {
206
+ z-index: 1;
207
+ }
208
+ 25% {
209
+ z-index: 1;
210
+ }
211
+ 50% {
212
+ z-index: 0;
213
+ }
214
+ 75% {
215
+ z-index: 0;
216
+ }
217
+ 100% {
218
+ z-index: 1;
219
+ }
220
+ }
221
+
222
+ @keyframes rotate {
223
+ from {
224
+ transform: translate(-50%, -50%) rotate(0deg);
225
+ }
226
+ to {
227
+ transform: translate(-50%, -50%) rotate(360deg);
228
+ }
229
+ }
230
+ .chuanyu-button {
231
+ position: relative;
232
+ color: #ffffff;
233
+ text-align: center;
234
+ outline: none;
235
+ border: 0 none;
236
+ overflow: hidden;
237
+ white-space: nowrap;
238
+ text-overflow: ellipsis;
239
+ max-width: 100%;
240
+ /*按钮大小*/
241
+ /*按钮颜色样式*/
242
+ }
243
+ .chuanyu-button.disabled,
244
+ .chuanyu-button:disabled {
245
+ cursor: not-allowed;
246
+ opacity: 0.5;
247
+ }
248
+ .chuanyu-button.size-xs {
249
+ font-size: 12px;
250
+ height: 24px;
251
+ padding: 0 8px;
252
+ line-height: 24px;
253
+ border-radius: 8px;
254
+ }
255
+ .chuanyu-button.size-sm {
256
+ height: 32px;
257
+ min-width: 80px;
258
+ font-size: 14px;
259
+ padding: 0 12px;
260
+ border-radius: 8px;
261
+ line-height: 32px;
262
+ }
263
+ .chuanyu-button.size-md {
264
+ height: 36px;
265
+ min-width: 80px;
266
+ font-size: 14px;
267
+ line-height: 36px;
268
+ padding: 0 12px;
269
+ border-radius: 12px;
270
+ }
271
+ .chuanyu-button.size-lg {
272
+ height: 40px;
273
+ min-width: 88px;
274
+ font-size: 14px;
275
+ padding: 0 16px;
276
+ border-radius: 12px;
277
+ }
278
+ .chuanyu-button.block-button {
279
+ width: 100%;
280
+ display: block;
281
+ }
282
+ .chuanyu-button.block-button.size-md {
283
+ font-weight: bold;
284
+ font-size: 14px;
285
+ }
286
+ .chuanyu-button.block-button.size-sm {
287
+ font-size: 16px;
288
+ }
289
+ .chuanyu-button.type-primary {
290
+ background-color: var(--color-primary);
291
+ }
292
+ .chuanyu-button.type-primary:not(.disabled):hover {
293
+ background-color: var(--color-primary-hover);
294
+ }
295
+ .chuanyu-button.type-primary:not(.disabled):active {
296
+ background-color: var(--color-primary-active);
297
+ }
298
+ .chuanyu-button.type-simple-primary {
299
+ background-color: transparent;
300
+ color: var(--color-primary);
301
+ }
302
+ .chuanyu-button.type-simple-primary:not(.disabled):hover {
303
+ background-color: var(--color-primary);
304
+ color: #fff;
305
+ }
306
+ .chuanyu-button.type-simple-primary:not(.disabled):active {
307
+ background-color: var(--color-primary-active);
308
+ color: #fff;
309
+ }
310
+ .chuanyu-button.type-appprimary {
311
+ background-color: var(--color-primary);
312
+ }
313
+ .chuanyu-button.type-appprimary:not(.disabled):hover {
314
+ background-color: var(--color-primary-hover);
315
+ }
316
+ .chuanyu-button.type-appprimary:not(.disabled):active {
317
+ background-color: var(--color-primary-active);
318
+ }
319
+ .chuanyu-button.type-danger {
320
+ background-color: var(--color-error);
321
+ }
322
+ .chuanyu-button.type-danger:hover {
323
+ background-color: var(--color-error-hover);
324
+ }
325
+ .chuanyu-button.type-danger:active {
326
+ background-color: var(--color-error-active);
327
+ }
328
+ .chuanyu-button.type-danger:disabled {
329
+ opacity: 0.5;
330
+ background-color: var(--color-error);
331
+ }
332
+ .chuanyu-button.type-success {
333
+ background-color: var(--color-success);
334
+ }
335
+ .chuanyu-button.type-success:hover {
336
+ background-color: var(--color-success-hover);
337
+ }
338
+ .chuanyu-button.type-success:active {
339
+ background-color: var(--color-success-active);
340
+ }
341
+ .chuanyu-button.type-success:disabled {
342
+ opacity: 0.5;
343
+ background-color: var(--color-success);
344
+ }
345
+ .chuanyu-button.type-warning {
346
+ background-color: var(--color-warn);
347
+ }
348
+ .chuanyu-button.type-warning:hover {
349
+ background-color: var(--color-warn-hover);
350
+ }
351
+ .chuanyu-button.type-warning:active {
352
+ background-color: var(--color-warn-active);
353
+ }
354
+ .chuanyu-button.type-warning:disabled {
355
+ opacity: 0.5;
356
+ background-color: var(--color-warn);
357
+ }
358
+ .chuanyu-button.type-simple {
359
+ background-color: var(--button-simple);
360
+ color: var(--text-description-color);
361
+ }
362
+ .chuanyu-button.type-simple:not(.disabled):hover {
363
+ background-color: var(--button-simple-hover);
364
+ }
365
+ .chuanyu-button.type-simple:not(.disabled):active {
366
+ background-color: var(--button-simple-active);
367
+ }
368
+ .chuanyu-button.type-default {
369
+ color: var(--text-description-color);
370
+ background-color: var(--button-default);
371
+ }
372
+ .chuanyu-button.type-default:hover {
373
+ background-color: var(--button-default-hover);
374
+ }
375
+ .chuanyu-button.type-default:active {
376
+ background-color: var(--button-default-active);
377
+ }
378
+ .chuanyu-button.type-default:disabled {
379
+ opacity: 0.5;
380
+ background-color: var(--button-default);
381
+ }
382
+ .chuanyu-button.type-ghost {
383
+ color: var(--text-description-color);
384
+ background-color: var(--button-simple);
385
+ border: 1px solid var(--border-color);
386
+ }
387
+ .chuanyu-button.type-ghost:not(.disabled):hover {
388
+ background-color: var(--button-simple-hover);
389
+ }
390
+ .chuanyu-button.type-ghost:not(.disabled):active {
391
+ background-color: var(--button-simple-active);
392
+ }
393
+ .chuanyu-button.type-ghost-danger {
394
+ color: var(--color-error);
395
+ border-color: var(--color-error);
396
+ border-width: 1px;
397
+ border-style: solid;
398
+ }
399
+ .chuanyu-button.type-ghost-danger:not(.disabled):hover {
400
+ color: var(--color-error-hover);
401
+ border-color: var(--color-error-hover);
402
+ }
403
+ .chuanyu-button.type-ghost-danger:not(.disabled):active {
404
+ color: var(--color-error-hover);
405
+ border-color: var(--color-error-hover);
406
+ }
407
+ .chuanyu-button.type-simple-danger {
408
+ color: var(--color-error);
409
+ background-color: transparent;
410
+ border: 1px solid rgba(228, 75, 77);
411
+ }
412
+ .chuanyu-button.type-simple-danger:not(.disabled):hover {
413
+ border: 1px solid rgba(230, 93, 95);
414
+ }
415
+ .chuanyu-button.type-simple-danger:not(.disabled):active {
416
+ background-color: rgba(228, 75, 77, 0.1);
417
+ }
418
+ .chuanyu-button.loading .loading-ico {
419
+ position: absolute;
420
+ top: 50%;
421
+ left: 50%;
422
+ display: block;
423
+ animation: rotate 1s linear infinite;
424
+ }
425
+ .chuanyu-button.loading .button-text {
426
+ visibility: hidden;
427
+ }
428
+ .chuanyu-button.loading .btn-loading-ico {
429
+ position: absolute;
430
+ top: 50%;
431
+ left: 50%;
432
+ display: block;
433
+ transform: translate(-50%, -50%);
434
+ height: 18px;
435
+ width: 18px;
436
+ line-height: 1;
437
+ }
438
+ .chuanyu-button.loading .btn-loading-ico .kaihei-loading-spin:before {
439
+ border-color: rgba(255, 255, 255, 0.4);
440
+ }
441
+ .chuanyu-button.loading .btn-loading-ico .kaihei-loading-spin:after {
442
+ border-top-color: rgba(255, 255, 255, 0.72);
443
+ }
444
+ .size-sm .button-loading-spin {
445
+ transform-origin: 50%;
446
+ transform: scale(0.9);
447
+ }
448
+ .buttons-group .chuanyu-button:not(:first-child) {
449
+ margin-left: 8px;
450
+ }
451
+
452
+ .kaihei-checkbox {
453
+ position: relative;
454
+ display: inline-block;
455
+ width: 18px;
456
+ height: 18px;
457
+ border-width: 2px;
458
+ border-style: solid;
459
+ border-radius: 4px;
460
+ border-color: var(--border-color);
461
+ margin-right: 10px;
462
+ vertical-align: middle;
463
+ box-sizing: border-box;
464
+ }
465
+ .kaihei-checkbox.active {
466
+ display: inline-flex;
467
+ justify-content: center;
468
+ align-items: center;
469
+ border-color: white;
470
+ }
471
+ .kaihei-checkbox.active:after {
472
+ position: absolute;
473
+ top: 2px;
474
+ left: 2px;
475
+ content: "";
476
+ width: 10px;
477
+ height: 10px;
478
+ background-color: white;
479
+ border-radius: 2px;
480
+ }
481
+ .kaihei-checkbox.disabled {
482
+ opacity: 0.5;
483
+ cursor: not-allowed;
484
+ }
485
+ .theme-light .kaihei-checkbox.active {
486
+ border-color: var(--color-primary);
487
+ }
488
+ .theme-light .kaihei-checkbox.active:after {
489
+ background-color: var(--color-primary);
490
+ }
491
+ .checkbox-box {
492
+ display: inline-flex;
493
+ align-items: center;
494
+ }
495
+ .kaihei-checkbox-mute {
496
+ display: inline-block;
497
+ width: 16px;
498
+ height: 16px;
499
+ font-size: 14px;
500
+ line-height: 14px;
501
+ color: var(--text-tip-color);
502
+ border: 2px solid var(--text-tip-color);
503
+ border-radius: 4px;
504
+ margin-right: 8px;
505
+ vertical-align: middle;
506
+ box-sizing: border-box;
507
+ }
508
+ .kaihei-checkbox-mute.type-appprimary:hover:not(.disabled) {
509
+ border-color: var(--color-primary);
510
+ }
511
+ .kaihei-checkbox-mute.type-danger:hover:not(.disabled) {
512
+ border-color: var(--color-error);
513
+ }
514
+ .kaihei-checkbox-mute svg {
515
+ visibility: hidden;
516
+ }
517
+ .kaihei-checkbox-mute.active {
518
+ display: inline-flex;
519
+ justify-content: center;
520
+ align-items: center;
521
+ }
522
+ .kaihei-checkbox-mute.active.type-appprimary {
523
+ border-color: var(--color-primary);
524
+ background-color: var(--color-primary);
525
+ }
526
+ .kaihei-checkbox-mute.active.type-danger {
527
+ border-color: var(--color-error);
528
+ background-color: var(--color-error);
529
+ }
530
+ .kaihei-checkbox-mute.active:before {
531
+ color: white;
532
+ }
533
+ .kaihei-checkbox-mute.active svg {
534
+ visibility: visible;
535
+ }
536
+ .kaihei-checkbox-mute.disabled {
537
+ opacity: 0.5;
538
+ cursor: not-allowed;
539
+ }
540
+
541
+ .arc-progress-wrapper {
542
+ position: absolute;
543
+ top: 0;
544
+ left: 0;
545
+ width: 100%;
546
+ height: 100%;
547
+ display: flex;
548
+ align-items: center;
549
+ justify-content: center;
550
+ background-color: rgba(0, 0, 0, 0.4);
551
+ }
552
+ .arc-progress-wrapper .arc-progress-track {
553
+ stroke: rgba(255, 255, 255, 0.4);
554
+ }
555
+ .arc-progress-wrapper .arc-progress-bar {
556
+ stroke: #fff;
557
+ }
558
+
559
+ .friendship-level {
560
+ display: flex;
561
+ color: var(--color-error);
562
+ }
563
+ .friendship-level.minus {
564
+ color: var(--text-description-color);
565
+ }
566
+ .friendship-level .friendship-item {
567
+ width: 14px;
568
+ height: 14px;
569
+ margin-left: 2px;
570
+ display: inline-block;
571
+ }
572
+ .friendship-level .friendship-item svg {
573
+ width: 100%;
574
+ height: 100%;
575
+ }
576
+ .friendship-level.md {
577
+ width: 16px;
578
+ height: 16px;
579
+ margin-left: 4px;
580
+ }
581
+
582
+ /*
583
+ * input基本样式
584
+ */
585
+ .chuanyu-input {
586
+ outline: none;
587
+ width: 276px;
588
+ height: 40px;
589
+ padding: 0 16px;
590
+ border-radius: 12px;
591
+ background-color: var(--color-f2f);
592
+ color: var(--main-color);
593
+ font-size: 14px;
594
+ border: 1px solid transparent;
595
+ }
596
+ .chuanyu-input.ghost {
597
+ background-color: transparent;
598
+ border-color: var(--border-color);
599
+ }
600
+ .chuanyu-input:hover {
601
+ border-color: var(--border-hover-color);
602
+ }
603
+ .chuanyu-input:focus {
604
+ border-color: var(--border-hover-color);
605
+ box-shadow: 0 0 0 3px var(--border-active-color);
606
+ }
607
+ .chuanyu-input.block {
608
+ width: 100%;
609
+ }
610
+ .chuanyu-input::placeholder {
611
+ color: var(--text-tip-color);
612
+ }
613
+ .chuanyu-input:-webkit-autofill {
614
+ -webkit-text-fill-color: #fff !important;
615
+ transition: background-color 5000s ease-in-out 0s;
616
+ font-size: 14px;
617
+ -webkit-text-fill-color: white;
618
+ }
619
+ .chuanyu-input:-webkit-autofill:hover,
620
+ .chuanyu-input:-webkit-autofill:focus,
621
+ .chuanyu-input:-webkit-autofill:active {
622
+ font-size: 14px;
623
+ }
624
+ /*
625
+ * input后缀
626
+ */
627
+ .suffix-input-wrapper {
628
+ position: relative;
629
+ }
630
+ .suffix-input-wrapper .suffix-content {
631
+ position: absolute;
632
+ right: 0;
633
+ top: 0;
634
+ height: 100%;
635
+ display: flex;
636
+ align-items: center;
637
+ text-align: right;
638
+ padding-right: 10px;
639
+ color: #ffffff;
640
+ font-size: 14px;
641
+ }
642
+ .suffix-input-wrapper .chuanyu-input {
643
+ padding-right: 93px;
644
+ }
645
+ .normal-input {
646
+ height: 40px;
647
+ width: 100%;
648
+ padding: 0 16px;
649
+ text-align: left;
650
+ border: 1px solid var(--border-color);
651
+ border-radius: 12px;
652
+ font-size: 14px;
653
+ }
654
+ .normal-input.noTheme {
655
+ border-color: transparent;
656
+ background-color: #f2f3f5;
657
+ }
658
+ .normal-input:hover {
659
+ border-color: var(--border-hover-color);
660
+ }
661
+ .normal-input:focus {
662
+ border-color: var(--border-hover-color);
663
+ box-shadow: 0 0 0 3px var(--border-active-color);
664
+ }
665
+ .normal-input::placeholder {
666
+ color: var(--text-tip-color);
667
+ }
668
+ .normal-input:disabled {
669
+ opacity: 0.5;
670
+ cursor: not-allowed;
671
+ border-color: var(--border-color);
672
+ }
673
+ .passowrd-input {
674
+ position: relative;
675
+ }
676
+ .passowrd-input input {
677
+ height: 40px;
678
+ line-height: 14px;
679
+ font-size: 14px;
680
+ padding: 0 16px;
681
+ text-align: left;
682
+ border: 1px solid var(--border-color);
683
+ width: 100%;
684
+ border-radius: 12px;
685
+ }
686
+ .passowrd-input input::placeholder {
687
+ color: var(--text-tip-color);
688
+ }
689
+ .passowrd-input .switch-btn {
690
+ position: absolute;
691
+ top: 50%;
692
+ transform: translateY(-50%);
693
+ right: 12px;
694
+ font-size: 20px;
695
+ color: var(--text-tip-color);
696
+ }
697
+ .normal-textarea {
698
+ height: 105px;
699
+ font-size: 14px;
700
+ padding: 10px 16px;
701
+ width: 100%;
702
+ outline: none;
703
+ border-radius: 12px;
704
+ border: 1px solid var(--border-color);
705
+ }
706
+ .normal-textarea:hover {
707
+ border-color: var(--border-hover-color);
708
+ }
709
+ .normal-textarea:focus {
710
+ border-color: var(--border-hover-color);
711
+ box-shadow: 0 0 0 3px var(--border-active-color);
712
+ }
713
+ .normal-textarea:disabled {
714
+ opacity: 0.5;
715
+ cursor: not-allowed;
716
+ border-color: var(--border-color);
717
+ }
718
+ .normal-textarea::placeholder {
719
+ color: var(--text-tip-color);
720
+ }
721
+ .search-input {
722
+ position: relative;
723
+ display: flex;
724
+ align-items: center;
725
+ padding: 0 16px;
726
+ height: 40px;
727
+ font-size: 14px;
728
+ border-radius: 12px;
729
+ border: 1px solid var(--border-color);
730
+ }
731
+ .search-input.noborder {
732
+ border-color: transparent;
733
+ background-color: var(--color-f2f);
734
+ }
735
+ .search-input:hover {
736
+ border-color: var(--border-hover-color);
737
+ }
738
+ .search-input.active {
739
+ border-color: var(--border-hover-color);
740
+ box-shadow: 0 0 0 3px var(--border-active-color);
741
+ }
742
+ .search-input input {
743
+ flex: 1;
744
+ min-width: 0;
745
+ height: 100%;
746
+ border: none;
747
+ background: transparent;
748
+ color: var(--text-color);
749
+ }
750
+ .search-input input::placeholder {
751
+ color: var(--text-tip-color);
752
+ }
753
+ .search-input .button-clear,
754
+ .search-input .button-search {
755
+ display: flex;
756
+ margin-left: 16px;
757
+ width: 24px;
758
+ height: 24px;
759
+ font-size: 24px;
760
+ color: var(--text-tip-color);
761
+ cursor: pointer;
762
+ }
763
+ .search-input .button-clear:hover,
764
+ .search-input .button-search:hover {
765
+ color: var(--text-description-color);
766
+ }
767
+ .search-input .button-clear:active,
768
+ .search-input .button-search:active {
769
+ color: var(--text-color);
770
+ }
771
+ .search-input .button-clear svg,
772
+ .search-input .button-search svg {
773
+ width: 24px;
774
+ height: 24px;
775
+ }
776
+ .search-input.sm {
777
+ height: 32px;
778
+ padding: 0 8px;
779
+ }
780
+ .search-input.sm .button-clear,
781
+ .search-input.sm .button-search {
782
+ margin-left: 8px;
783
+ }
784
+ .number-input {
785
+ display: flex;
786
+ }
787
+ .number-input.sm input {
788
+ height: 24px;
789
+ }
790
+ .number-input.sm .xy-iconfont {
791
+ width: 24px;
792
+ height: 24px;
793
+ border-radius: 6px;
794
+ }
795
+ .number-input.sm .xy-iconfont svg {
796
+ width: 12px;
797
+ height: 12px;
798
+ }
799
+ .number-input input {
800
+ color: var(--text-color);
801
+ border: none;
802
+ padding: 0;
803
+ width: 42px;
804
+ height: 32px;
805
+ font-size: 14px;
806
+ background-color: transparent;
807
+ display: flex;
808
+ align-items: center;
809
+ justify-content: center;
810
+ text-align: center;
811
+ }
812
+ .number-input .xy-iconfont {
813
+ display: flex;
814
+ width: 32px;
815
+ height: 32px;
816
+ border-radius: 8px;
817
+ border: 1px solid var(--color-controls);
818
+ align-items: center;
819
+ justify-content: center;
820
+ cursor: pointer;
821
+ }
822
+ .number-input .xy-iconfont svg {
823
+ width: 16px;
824
+ height: 16px;
825
+ }
826
+ .number-input .xy-iconfont:not(.disabled):hover {
827
+ background: var(--menu-hover);
828
+ }
829
+ .number-input .xy-iconfont:not(.disabled):active {
830
+ background: var(--menu-active);
831
+ }
832
+ .number-input .xy-iconfont.disabled {
833
+ opacity: 0.5;
834
+ cursor: not-allowed;
835
+ }
836
+
837
+ .number-step {
838
+ display: flex;
839
+ width: 110px;
840
+ height: 28px;
841
+ line-height: 28px;
842
+ font-size: 14px;
843
+ border-radius: 4px;
844
+ border: 1px solid var(--border-color);
845
+ color: var(--text-color);
846
+ }
847
+ .number-step button {
848
+ height: 24px;
849
+ width: 32px;
850
+ text-align: center;
851
+ font-size: 18px;
852
+ font-weight: bold;
853
+ border: none;
854
+ background-color: transparent;
855
+ color: var(--text-color);
856
+ }
857
+ .number-step button:disabled {
858
+ color: var(--text-tip-color);
859
+ }
860
+ .number-step .value-label {
861
+ flex: 1;
862
+ }
863
+
864
+ .kaihei-radio {
865
+ width: 16px;
866
+ height: 16px;
867
+ border-radius: 50%;
868
+ display: inline-flex;
869
+ flex-shrink: 0;
870
+ justify-content: center;
871
+ align-items: center;
872
+ position: relative;
873
+ border: 2px solid var(--text-tip-color);
874
+ }
875
+ .kaihei-radio.checked {
876
+ border-color: var(--color-primary);
877
+ }
878
+ .kaihei-radio.checked::after {
879
+ position: absolute;
880
+ content: "";
881
+ width: 8px;
882
+ height: 8px;
883
+ background-color: var(--color-primary);
884
+ border-radius: 50%;
885
+ }
886
+ .form-item-radio {
887
+ display: flex;
888
+ align-items: center;
889
+ }
890
+ .form-item-radio .label {
891
+ display: inline-block;
892
+ }
893
+
894
+ .selector-contain {
895
+ position: relative;
896
+ font-size: 14px;
897
+ color: var(--text-color);
898
+ }
899
+ .selector-contain[disabled] {
900
+ opacity: 0.5;
901
+ }
902
+ .selector-contain[disabled] .selector-select {
903
+ cursor: not-allowed;
904
+ }
905
+ .selector-contain[disabled] .selector-select:hover {
906
+ border-color: var(--border-color);
907
+ }
908
+ .selector-contain[disabled] .selector-select:active {
909
+ box-shadow: none;
910
+ }
911
+ .selector-contain.size-sm {
912
+ width: 220px;
913
+ }
914
+ .selector-contain.size-md {
915
+ width: 320px;
916
+ }
917
+ .selector-contain.type-ghost {
918
+ color: var(--text-description-color);
919
+ }
920
+ .selector-contain.type-ghost .selector-select {
921
+ padding: 6px 32px 6px 16px;
922
+ border-radius: 16px;
923
+ background-color: var(--menu-background);
924
+ }
925
+ .selector-contain.simple .selector-select {
926
+ border: none;
927
+ padding: 0 16px 0 0;
928
+ line-height: 1;
929
+ box-shadow: none;
930
+ color: var(--text-description-color);
931
+ }
932
+ .selector-contain.simple .selector-select:hover,
933
+ .selector-contain.simple .selector-select.active {
934
+ border-color: transparent;
935
+ box-shadow: none;
936
+ color: var(--text-color);
937
+ }
938
+ .selector-contain.simple .selector-select .dropdown-icon {
939
+ right: 0;
940
+ }
941
+ .selector-option.simple {
942
+ margin-left: 50%;
943
+ margin-top: 10px;
944
+ transform: translate(-50%);
945
+ width: 220px;
946
+ padding: 10px;
947
+ border-radius: 12px;
948
+ border: none;
949
+ }
950
+ .selector-option.simple .selector-option-item {
951
+ border-radius: 8px;
952
+ }
953
+ .selector-option.simple .selector-option-item.selected {
954
+ background-color: transparent;
955
+ }
956
+ .selector-option.simple .selector-option-item:hover {
957
+ background-color: var(--menu-hover);
958
+ }
959
+ .selector-select {
960
+ display: flex;
961
+ position: relative;
962
+ width: 100%;
963
+ padding: 9px 48px 9px 16px;
964
+ border: 1px solid var(--border-color);
965
+ border-radius: 12px;
966
+ cursor: pointer;
967
+ }
968
+ .selector-select:hover {
969
+ border-color: var(--border-hover-color);
970
+ }
971
+ .selector-select:active,
972
+ .selector-select.active:not([disabled]) {
973
+ border-color: var(--border-hover-color);
974
+ box-shadow: 0 0 0 3px var(--border-active-color);
975
+ }
976
+ .selector-select.active .dropdown-icon {
977
+ transform: translateY(-50%) rotate(180deg);
978
+ }
979
+ .selector-select .selector-label {
980
+ display: inline-block;
981
+ width: 100%;
982
+ white-space: nowrap;
983
+ overflow: hidden;
984
+ text-overflow: ellipsis;
985
+ vertical-align: middle;
986
+ line-height: 20px;
987
+ }
988
+ .selector-select .selector-label .emoji {
989
+ height: 15px;
990
+ display: inline-block;
991
+ margin-top: -3px;
992
+ }
993
+ .selector-select .dropdown-icon {
994
+ position: absolute;
995
+ display: flex;
996
+ top: 50%;
997
+ transform: translateY(-50%);
998
+ right: 16px;
999
+ font-size: 24px;
1000
+ transition: transform 0.2s;
1001
+ }
1002
+ .selector-select .dropdown-icon svg {
1003
+ width: 16px;
1004
+ height: 16px;
1005
+ }
1006
+ .selector-option {
1007
+ position: absolute;
1008
+ width: 100%;
1009
+ margin-top: 4px;
1010
+ border-radius: 12px;
1011
+ padding: 8px;
1012
+ max-height: 240px;
1013
+ font-size: 14px;
1014
+ line-height: 20px;
1015
+ overflow-y: auto;
1016
+ background-color: var(--color-grey-bg);
1017
+ box-shadow: var(--box-shadow);
1018
+ z-index: 1000;
1019
+ }
1020
+ .selector-option.fixed {
1021
+ position: fixed;
1022
+ }
1023
+ .ab-shadow {
1024
+ position: absolute;
1025
+ width: 100%;
1026
+ }
1027
+ .selector-option-item {
1028
+ padding: 0 8px;
1029
+ height: 32px;
1030
+ line-height: 32px;
1031
+ white-space: nowrap;
1032
+ overflow: hidden;
1033
+ text-overflow: ellipsis;
1034
+ cursor: pointer;
1035
+ border-radius: 8px;
1036
+ margin-bottom: 2px;
1037
+ }
1038
+ .selector-option-item:last-child {
1039
+ margin-bottom: 0;
1040
+ }
1041
+ .selector-option-item:hover {
1042
+ background-color: var(--menu-hover);
1043
+ }
1044
+ .selector-option-item:active {
1045
+ background-color: var(--menu-active);
1046
+ }
1047
+ .selector-option-item.selected {
1048
+ background-color: var(--menu-active);
1049
+ }
1050
+ .selector-option-item .emoji {
1051
+ height: 14px;
1052
+ display: inline-block;
1053
+ margin-top: -3px;
1054
+ }
1055
+
1056
+ .selector-search-contain {
1057
+ position: relative;
1058
+ font-size: 14px;
1059
+ color: var(--text-color);
1060
+ }
1061
+ .selector-search-select {
1062
+ position: relative;
1063
+ display: flex;
1064
+ width: 100%;
1065
+ padding: 9px 48px 9px 16px;
1066
+ border-radius: 12px;
1067
+ border: 1px solid var(--border-color);
1068
+ }
1069
+ .selector-search-select.disabled {
1070
+ cursor: not-allowed;
1071
+ opacity: 0.5;
1072
+ }
1073
+ .selector-search-select:not(.disabled):hover {
1074
+ border-color: var(--border-hover-color);
1075
+ }
1076
+ .selector-search-select:not(.disabled):active,
1077
+ .selector-search-select:not(.disabled).active {
1078
+ border-color: var(--border-hover-color);
1079
+ box-shadow: 0 0 0 3px var(--border-active-color);
1080
+ }
1081
+ .selector-search-select:not(.disabled):active .dropdown-icon,
1082
+ .selector-search-select:not(.disabled).active .dropdown-icon {
1083
+ transform: translateY(-50%) rotate(180deg);
1084
+ }
1085
+ .selector-search-select .selector-search-label {
1086
+ position: absolute;
1087
+ top: 50%;
1088
+ transform: translateY(-50%);
1089
+ left: 16px;
1090
+ display: inline-block;
1091
+ width: calc(100% - 44px);
1092
+ white-space: nowrap;
1093
+ overflow: hidden;
1094
+ text-overflow: ellipsis;
1095
+ vertical-align: middle;
1096
+ line-height: 20px;
1097
+ }
1098
+ .selector-search-select .selector-search-label.none {
1099
+ color: var(--text-tip-color);
1100
+ }
1101
+ .selector-search-select .dropdown-icon {
1102
+ position: absolute;
1103
+ display: flex;
1104
+ top: 50%;
1105
+ transform: translateY(-50%);
1106
+ right: 16px;
1107
+ font-size: 24px;
1108
+ transition: transform 0.2s;
1109
+ }
1110
+ .selector-search-select .dropdown-icon svg {
1111
+ width: 16px;
1112
+ height: 16px;
1113
+ }
1114
+ .selector-search-select input {
1115
+ padding: 0;
1116
+ height: 20px;
1117
+ width: 100%;
1118
+ border: none;
1119
+ cursor: default;
1120
+ color: var(--text-color);
1121
+ }
1122
+ .theme-dark .selector-search-select input {
1123
+ background-color: transparent;
1124
+ }
1125
+ .selector-search-option {
1126
+ position: fixed;
1127
+ padding: 8px;
1128
+ width: 100%;
1129
+ margin-top: 4px;
1130
+ max-height: 400px;
1131
+ background-color: var(--menu-background);
1132
+ border-radius: 12px;
1133
+ z-index: 1000;
1134
+ box-shadow: var(--box-shadow);
1135
+ overflow-y: auto;
1136
+ }
1137
+ .selector-search-option-item {
1138
+ margin-bottom: 2px;
1139
+ padding: 0 8px;
1140
+ height: 32px;
1141
+ line-height: 32px;
1142
+ white-space: nowrap;
1143
+ overflow: hidden;
1144
+ text-overflow: ellipsis;
1145
+ border-radius: 6px;
1146
+ cursor: pointer;
1147
+ }
1148
+ .selector-search-option-item:hover {
1149
+ background-color: var(--menu-hover);
1150
+ }
1151
+ .selector-search-option-item.disabled {
1152
+ cursor: not-allowed;
1153
+ }
1154
+
1155
+ .custom-tooltip {
1156
+ padding: 4px 8px;
1157
+ color: #fff;
1158
+ font-size: 14px;
1159
+ line-height: 20px;
1160
+ word-break: break-all;
1161
+ text-align: left;
1162
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
1163
+ z-index: 100;
1164
+ pointer-events: none;
1165
+ border-radius: 10px;
1166
+ }
1167
+ .custom-tooltip.useMaxWidth {
1168
+ max-width: 160px;
1169
+ }
1170
+ .custom-tooltip.show {
1171
+ opacity: 1;
1172
+ }
1173
+ .custom-tooltip .user-avatar {
1174
+ width: 18px;
1175
+ height: 18px;
1176
+ vertical-align: middle;
1177
+ margin-right: 4px;
1178
+ }
1179
+ .custom-tooltip .user-fullname {
1180
+ vertical-align: middle;
1181
+ }
1182
+ body .__react_component_tooltip.type-info {
1183
+ background-color: #121315;
1184
+ padding: 4px 8px;
1185
+ color: #fff;
1186
+ font-size: 14px;
1187
+ line-height: 20px;
1188
+ word-break: break-all;
1189
+ text-align: left;
1190
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
1191
+ z-index: 100;
1192
+ pointer-events: none;
1193
+ border-radius: 10px;
1194
+ }
1195
+ body .__react_component_tooltip.type-info.useMaxWidth {
1196
+ max-width: 160px;
1197
+ }
1198
+ body .__react_component_tooltip.type-info.show {
1199
+ opacity: 1;
1200
+ }
1201
+ body .__react_component_tooltip.type-info .user-avatar {
1202
+ width: 18px;
1203
+ height: 18px;
1204
+ vertical-align: middle;
1205
+ margin-right: 4px;
1206
+ }
1207
+ body .__react_component_tooltip.type-info .user-fullname {
1208
+ vertical-align: middle;
1209
+ }
1210
+ body .__react_component_tooltip.type-info.place-right:after {
1211
+ border-right-color: #121315;
1212
+ }
1213
+ body .__react_component_tooltip.type-info.place-top:after {
1214
+ border-top-color: #121315;
1215
+ }
1216
+ body .__react_component_tooltip.type-info.place-bottom:after {
1217
+ border-bottom-color: #121315;
1218
+ }
1219
+ body .__react_component_tooltip.type-info.place-left:after {
1220
+ border-left-color: #121315;
1221
+ }
1222
+ .body-tooltip {
1223
+ z-index: 1888 !important;
1224
+ }
1225
+ .kaihei-tips {
1226
+ pointer-events: none;
1227
+ }
1228
+ .kaihei-tips.useMaxWidth {
1229
+ max-width: 160px;
1230
+ }
1231
+ .kaihei-tips .description {
1232
+ white-space: nowrap;
1233
+ text-overflow: ellipsis;
1234
+ overflow: hidden;
1235
+ color: rgba(237, 238, 240, 0.7);
1236
+ font-size: 12px;
1237
+ line-height: 18px;
1238
+ }
1239
+ body .__react_component_tooltip.type-success {
1240
+ padding: 4px 8px;
1241
+ color: #fff;
1242
+ font-size: 14px;
1243
+ line-height: 20px;
1244
+ word-break: break-all;
1245
+ text-align: left;
1246
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
1247
+ z-index: 100;
1248
+ pointer-events: none;
1249
+ border-radius: 10px;
1250
+ background-color: #7acc35;
1251
+ }
1252
+ body .__react_component_tooltip.type-success.useMaxWidth {
1253
+ max-width: 160px;
1254
+ }
1255
+ body .__react_component_tooltip.type-success.show {
1256
+ opacity: 1;
1257
+ }
1258
+ body .__react_component_tooltip.type-success .user-avatar {
1259
+ width: 18px;
1260
+ height: 18px;
1261
+ vertical-align: middle;
1262
+ margin-right: 4px;
1263
+ }
1264
+ body .__react_component_tooltip.type-success .user-fullname {
1265
+ vertical-align: middle;
1266
+ }
1267
+ body .__react_component_tooltip.type-success.place-right:after {
1268
+ border-right-color: #7acc35;
1269
+ }
1270
+ body .__react_component_tooltip.type-success.place-top:after {
1271
+ border-top-color: #7acc35;
1272
+ }
1273
+ body .__react_component_tooltip.type-success.place-bottom:after {
1274
+ border-bottom-color: #7acc35;
1275
+ }
1276
+ body .__react_component_tooltip.type-success.place-left:after {
1277
+ border-left-color: #7acc35;
1278
+ }
1279
+ body .__react_component_tooltip.type-dark {
1280
+ margin-top: 0;
1281
+ padding: 4px 8px;
1282
+ border-radius: 10px;
1283
+ max-width: 136px;
1284
+ max-height: 62px;
1285
+ font-size: 12px;
1286
+ line-height: 1.3;
1287
+ overflow: hidden;
1288
+ color: rgba(255, 255, 255, 0.87);
1289
+ background-color: rgba(0, 0, 0, 0.87);
1290
+ pointer-events: none;
1291
+ }
1292
+ body .__react_component_tooltip.type-dark.place-right {
1293
+ margin: 0;
1294
+ }
1295
+ body .__react_component_tooltip.type-dark.place-right:after {
1296
+ display: none;
1297
+ }
1298
+ .theme-dark .__react_component_tooltip.type-dark {
1299
+ color: rgba(0, 0, 0, 0.87);
1300
+ background-color: rgba(255, 255, 255, 0.87);
1301
+ }
1302
+
1303
+ .ui-switch {
1304
+ position: relative;
1305
+ display: inline-block;
1306
+ box-sizing: border-box;
1307
+ overflow: visible;
1308
+ width: 32px;
1309
+ height: 20px;
1310
+ border-radius: 10px;
1311
+ border: 2px solid var(--text-tip-color);
1312
+ cursor: pointer;
1313
+ transition: 0.3s ease-out all;
1314
+ }
1315
+ /*adding a wide width for larger switch text*/
1316
+ .ui-switch.wide {
1317
+ width: 80px;
1318
+ }
1319
+ .ui-switch small {
1320
+ width: 12px;
1321
+ height: 12px;
1322
+ position: absolute;
1323
+ top: 50%;
1324
+ margin-top: -6px;
1325
+ left: 2px;
1326
+ transition: 200ms ease-out all;
1327
+ }
1328
+ .ui-switch small::before {
1329
+ content: "";
1330
+ position: absolute;
1331
+ left: 0;
1332
+ top: 0;
1333
+ bottom: 0;
1334
+ right: 0;
1335
+ border-radius: 6px;
1336
+ background-color: var(--text-tip-color);
1337
+ transition: 200ms ease-out all;
1338
+ }
1339
+ .ui-switch.checked {
1340
+ border-color: var(--color-primary);
1341
+ }
1342
+ .ui-switch.checked small {
1343
+ left: calc(100% - 14px);
1344
+ }
1345
+ .ui-switch.checked small::before {
1346
+ background-color: var(--color-primary);
1347
+ }
1348
+ .ui-switch:active:not(.disabled) small::before {
1349
+ left: 0;
1350
+ right: -100%;
1351
+ }
1352
+ .ui-switch.checked:active:not(.disabled) small::before {
1353
+ right: 0;
1354
+ left: -100%;
1355
+ }
1356
+ /*wider switch text moves small further to the right*/
1357
+ .ui-switch.wide.checked small {
1358
+ left: 52px;
1359
+ }
1360
+ /*styles for switch-text*/
1361
+ .ui-switch .switch-text {
1362
+ font-size: 13px;
1363
+ }
1364
+ .ui-switch .off {
1365
+ display: block;
1366
+ position: absolute;
1367
+ right: 10%;
1368
+ top: 25%;
1369
+ z-index: 0;
1370
+ color: #a9a9a9;
1371
+ }
1372
+ .ui-switch .on {
1373
+ display: none;
1374
+ z-index: 0;
1375
+ color: #fff;
1376
+ position: absolute;
1377
+ top: 25%;
1378
+ left: 9%;
1379
+ }
1380
+ .ui-switch.checked .off {
1381
+ display: none;
1382
+ }
1383
+ .ui-switch.checked .on {
1384
+ display: block;
1385
+ }
1386
+ .ui-switch.disabled {
1387
+ cursor: not-allowed;
1388
+ opacity: 0.5;
1389
+ }
1390
+ .ui-switch.disabled small {
1391
+ box-shadow: none;
1392
+ }
1393
+ /* Switchery sizes. */
1394
+ /* Switchery size shorthand classes */
1395
+ .kaihei-auth-switch {
1396
+ display: inline-flex;
1397
+ width: 100px;
1398
+ height: 30px;
1399
+ border-radius: 4px;
1400
+ cursor: pointer;
1401
+ }
1402
+ .kaihei-auth-switch.disabled {
1403
+ opacity: 0.5;
1404
+ cursor: not-allowed;
1405
+ }
1406
+ .kaihei-auth-switch:not(.disabled) .auth-status-item:hover {
1407
+ background-color: var(--menu-hover);
1408
+ }
1409
+ .kaihei-auth-switch .auth-status-item {
1410
+ flex: 1;
1411
+ display: flex;
1412
+ justify-content: center;
1413
+ align-items: center;
1414
+ border: 1px solid var(--border-color);
1415
+ }
1416
+ .kaihei-auth-switch .auth-status-item .xy-iconfont {
1417
+ font-size: 24px;
1418
+ }
1419
+ .kaihei-auth-switch .auth-status-item.close-status {
1420
+ border-top-left-radius: 8px;
1421
+ border-bottom-left-radius: 8px;
1422
+ color: var(--color-error);
1423
+ }
1424
+ .kaihei-auth-switch .auth-status-item.close-status.active {
1425
+ color: white;
1426
+ background-color: var(--color-error);
1427
+ border-color: var(--color-error);
1428
+ }
1429
+ .kaihei-auth-switch .auth-status-item.open-status {
1430
+ border-top-right-radius: 8px;
1431
+ border-bottom-right-radius: 8px;
1432
+ color: var(--color-primary);
1433
+ }
1434
+ .kaihei-auth-switch .auth-status-item.open-status.active {
1435
+ color: white;
1436
+ background-color: var(--color-primary);
1437
+ border-color: var(--color-primary);
1438
+ }
1439
+ .kaihei-auth-switch .auth-status-item.default-status {
1440
+ border-left-width: 0;
1441
+ border-right-width: 0;
1442
+ color: var(--text-tip-color);
1443
+ }
1444
+ .kaihei-auth-switch .auth-status-item.default-status.active {
1445
+ color: white;
1446
+ background-color: var(--text-tip-color);
1447
+ border-color: var(--text-tip-color);
1448
+ }
1449
+
1450
+ .textarea-box {
1451
+ position: relative;
1452
+ border: 1px solid var(--border-color);
1453
+ border-radius: 12px;
1454
+ padding: 12px 16px;
1455
+ }
1456
+ .textarea-box.show-max-length {
1457
+ padding-bottom: 30px;
1458
+ }
1459
+ .textarea-box textarea {
1460
+ padding: 0;
1461
+ margin: 0;
1462
+ width: 100%;
1463
+ height: 70px;
1464
+ border: none;
1465
+ background-color: initial;
1466
+ color: inherit;
1467
+ line-height: 1.5;
1468
+ resize: none;
1469
+ }
1470
+ .textarea-box textarea::placeholder {
1471
+ color: var(--text-tip-color);
1472
+ }
1473
+ .textarea-box:hover:not(.disabled) {
1474
+ border-color: var(--border-hover-color);
1475
+ }
1476
+ .textarea-box:active {
1477
+ box-shadow: 0 0 3px var(--border-active-color);
1478
+ }
1479
+ .textarea-box:active:not(.disabled) {
1480
+ border-color: var(--border-hover-color);
1481
+ }
1482
+ .textarea-box:focus,
1483
+ .textarea-box.theme-focus {
1484
+ outline: none;
1485
+ border-color: var(--border-hover-color);
1486
+ box-shadow: 0 0 0 3px var(--border-active-color);
1487
+ }
1488
+ .textarea-box.disabled {
1489
+ opacity: 0.5;
1490
+ }
1491
+ .textarea-box .footer {
1492
+ font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
1493
+ position: absolute;
1494
+ bottom: 7px;
1495
+ right: 16px;
1496
+ font-size: 12px;
1497
+ color: var(--text-tip-color);
1498
+ }
1499
+ .textarea-box .footer.error {
1500
+ color: var(--color-error);
1501
+ }
1502
+ .textarea-box.size-sm {
1503
+ border-width: 0px;
1504
+ }
1505
+ .textarea-box.size-sm textarea {
1506
+ padding: 0;
1507
+ width: 224px;
1508
+ line-height: 20px;
1509
+ border-radius: 4px;
1510
+ font-size: 12px;
1511
+ }
1512
+ .textarea-box.size-sm .footer {
1513
+ bottom: 0px;
1514
+ }
1515
+
1516
+ .time-selector {
1517
+ position: relative;
1518
+ }
1519
+ .time-selector-select {
1520
+ position: relative;
1521
+ height: 40px;
1522
+ padding: 0 48px 0 16px;
1523
+ line-height: 40px;
1524
+ border: 1px solid var(--border-color);
1525
+ border-radius: 12px;
1526
+ font-size: 16px;
1527
+ color: var(--text-color);
1528
+ }
1529
+ .time-selector-select:hover {
1530
+ border-color: var(--border-hover-color);
1531
+ }
1532
+ .time-selector-select:active,
1533
+ .time-selector-select.active {
1534
+ border-color: var(--border-hover-color);
1535
+ box-shadow: 0 0 0 3px var(--border-active-color);
1536
+ }
1537
+ .time-selector-select:active .dropdown-icon,
1538
+ .time-selector-select.active .dropdown-icon {
1539
+ transform: translateY(-50%) rotate(180deg);
1540
+ }
1541
+ .time-selector-select .dropdown-icon {
1542
+ position: absolute;
1543
+ display: flex;
1544
+ top: 50%;
1545
+ transform: translateY(-50%);
1546
+ right: 16px;
1547
+ font-size: 24px;
1548
+ color: var(--text-description-color);
1549
+ transition: transform 200ms linear;
1550
+ }
1551
+ .time-selector-select .dropdown-icon svg {
1552
+ width: 16px;
1553
+ height: 16px;
1554
+ }
1555
+ .time-selector-option {
1556
+ position: absolute;
1557
+ width: 100%;
1558
+ display: flex;
1559
+ flex-wrap: wrap;
1560
+ margin-top: 4px;
1561
+ border-radius: 12px;
1562
+ background-color: var(--color-grey-bg);
1563
+ box-shadow: var(--box-shadow);
1564
+ overflow: hidden;
1565
+ font-size: 14px;
1566
+ color: var(--text-color);
1567
+ z-index: 1000;
1568
+ }
1569
+ .time-selector-option .footer {
1570
+ height: 40px;
1571
+ width: 100%;
1572
+ text-align: center;
1573
+ line-height: 40px;
1574
+ border-top: 1px solid var(--color-line);
1575
+ cursor: pointer;
1576
+ }
1577
+ .time-selector-option .footer:hover {
1578
+ background-color: var(--menu-hover);
1579
+ }
1580
+ .time-selector-option .footer:active {
1581
+ background-color: var(--menu-active);
1582
+ }
1583
+ .time-selector-minute,
1584
+ .time-selector-hour {
1585
+ width: 50%;
1586
+ padding: 8px;
1587
+ height: 210px;
1588
+ }
1589
+ .time-selector-hour {
1590
+ border-right: 1px solid var(--color-line);
1591
+ }
1592
+ .time-selector-item {
1593
+ height: 32px;
1594
+ line-height: 32px;
1595
+ border-radius: 8px;
1596
+ text-align: center;
1597
+ margin-bottom: 2px;
1598
+ }
1599
+ .time-selector-item:hover {
1600
+ background-color: var(--menu-hover);
1601
+ }
1602
+ .time-selector-item:active,
1603
+ .time-selector-item.active {
1604
+ background-color: var(--menu-active);
1605
+ }
1606
+ .time-selector-item.disabled {
1607
+ opacity: 0.5;
1608
+ background-color: transparent;
1609
+ }
1610
+ .time-selector-item:last-child {
1611
+ margin-bottom: 0;
1612
+ }
1613
+