@kaiheila/ui-components 0.1.16 → 0.1.18

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