@kaiheila/ui-components 1.0.2 → 1.0.3

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