@kaiheila/ui-components 0.1.13 → 0.1.14

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