@kaiheila/ui-components 0.1.12 → 0.1.13

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