@kaiheila/ui-components 0.0.1

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