ezuikit-js 8.2.0 → 8.2.1-beta.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.
@@ -1,1257 +0,0 @@
1
- .ezuikit-spin {
2
- box-sizing: border-box;
3
- margin: 0;
4
- padding: 0;
5
- color: #595959;
6
- font-size: 14px;
7
- line-height: 1.5715;
8
- list-style: none;
9
- font-feature-settings: "tnum";
10
- position: absolute;
11
- display: none;
12
- color: #407AFF;
13
- text-align: center;
14
- vertical-align: middle;
15
- opacity: 0;
16
- transition: transform .3s cubic-bezier(.78,.14,.15,.86)
17
- }
18
-
19
- .ezuikit-spin-spinning {
20
- position: static;
21
- display: inline-block;
22
- opacity: 1
23
- }
24
-
25
- .ezuikit-spin-nested-loading {
26
- position: relative
27
- }
28
-
29
- .ezuikit-spin-nested-loading>div>.ezuikit-spin {
30
- position: absolute;
31
- top: 0;
32
- left: 0;
33
- z-index: 4;
34
- display: block;
35
- width: 100%;
36
- height: 100%;
37
- max-height: 400px
38
- }
39
-
40
- .ezuikit-spin-nested-loading>div>.ezuikit-spin .ezuikit-spin-dot {
41
- position: absolute;
42
- top: 50%;
43
- left: 50%;
44
- margin: -10px
45
- }
46
-
47
- .ezuikit-spin-nested-loading>div>.ezuikit-spin .ezuikit-spin-text {
48
- position: absolute;
49
- top: 50%;
50
- width: 100%;
51
- padding-top: 5px;
52
- text-shadow: 0 1px 2px #fff
53
- }
54
-
55
- .ezuikit-spin-nested-loading>div>.ezuikit-spin.ezuikit-spin-show-text .ezuikit-spin-dot {
56
- margin-top: -20px
57
- }
58
-
59
- .ezuikit-spin-nested-loading>div>.ezuikit-spin-sm .ezuikit-spin-dot {
60
- margin: -10px
61
- }
62
-
63
- .ezuikit-spin-nested-loading>div>.ezuikit-spin-sm .ezuikit-spin-text {
64
- padding-top: 5px
65
- }
66
-
67
- .ezuikit-spin-nested-loading>div>.ezuikit-spin-sm.ezuikit-spin-show-text .ezuikit-spin-dot {
68
- margin-top: -20px
69
- }
70
-
71
- .ezuikit-spin-nested-loading>div>.ezuikit-spin-lg .ezuikit-spin-dot {
72
- margin: -15px
73
- }
74
-
75
- .ezuikit-spin-nested-loading>div>.ezuikit-spin-lg .ezuikit-spin-text {
76
- padding-top: 10px
77
- }
78
-
79
- .ezuikit-spin-nested-loading>div>.ezuikit-spin-lg.ezuikit-spin-show-text .ezuikit-spin-dot {
80
- margin-top: -25px
81
- }
82
-
83
- .ezuikit-spin-container {
84
- position: relative;
85
- transition: opacity .3s
86
- }
87
-
88
- .ezuikit-spin-container:after {
89
- position: absolute;
90
- inset: 0;
91
- z-index: 10;
92
- display: none \ ;
93
- width: 100%;
94
- height: 100%;
95
- background: #fff;
96
- opacity: 0;
97
- transition: all .3s;
98
- content: "";
99
- pointer-events: none
100
- }
101
-
102
- .ezuikit-spin-blur {
103
- clear: both;
104
- opacity: .5;
105
- -webkit-user-select: none;
106
- -moz-user-select: none;
107
- -ms-user-select: none;
108
- user-select: none;
109
- pointer-events: none
110
- }
111
-
112
- .ezuikit-spin-blur:after {
113
- opacity: .4;
114
- pointer-events: auto
115
- }
116
-
117
- .ezuikit-spin-tip {
118
- color: #00000073
119
- }
120
-
121
- .ezuikit-spin-dot {
122
- position: relative;
123
- display: inline-block;
124
- font-size: 20px;
125
- width: 1em;
126
- height: 1em
127
- }
128
-
129
- .ezuikit-spin-dot-white i {
130
- background-color: #fff
131
- }
132
-
133
- .ezuikit-spin-dot-item {
134
- position: absolute;
135
- display: block;
136
- width: 9px;
137
- height: 9px;
138
- background-color: #407AFF;
139
- border-radius: 2px;
140
- transform-origin: 50% 50%
141
- }
142
-
143
- .ezuikit-spin-dot-item:nth-child(1) {
144
- top: 0;
145
- left: 0;
146
- animation: smallAnimationShape1 2s linear 0s infinite normal;
147
- opacity: 1
148
- }
149
-
150
- .ezuikit-spin-dot-item:nth-child(2) {
151
- top: 0;
152
- left: 12px;
153
- animation: smallAnimationShape2 2s linear 0s infinite normal;
154
- opacity: .8
155
- }
156
-
157
- .ezuikit-spin-dot-item:nth-child(3) {
158
- top: 12px;
159
- left: 0;
160
- animation: smallAnimationShape3 2s linear 0s infinite normal;
161
- opacity: .5
162
- }
163
-
164
- .ezuikit-spin-dot-item:nth-child(4) {
165
- top: 12px;
166
- left: 12px;
167
- animation: smallAnimationShape4 2s linear 0s infinite normal;
168
- opacity: .3
169
- }
170
-
171
- .ezuikit-spin-dot-spin {
172
- animation: rotation 1s infinite
173
- }
174
-
175
- .ezuikit-spin-sm .ezuikit-spin-dot {
176
- font-size: 20px
177
- }
178
-
179
- .ezuikit-spin-sm .ezuikit-spin-dot i {
180
- width: 8px;
181
- height: 8px
182
- }
183
-
184
- .ezuikit-spin-lg .ezuikit-spin-dot {
185
- font-size: 30px
186
- }
187
-
188
- .ezuikit-spin-lg .ezuikit-spin-dot-item:nth-child(1) {
189
- top: 0;
190
- left: 0;
191
- opacity: 1;
192
- animation: animationShape1 2s linear 0s infinite normal
193
- }
194
-
195
- .ezuikit-spin-lg .ezuikit-spin-dot-item:nth-child(2) {
196
- top: 0;
197
- left: 18px;
198
- opacity: .8;
199
- animation: animationShape2 2s linear 0s infinite normal
200
- }
201
-
202
- .ezuikit-spin-lg .ezuikit-spin-dot-item:nth-child(3) {
203
- top: 18px;
204
- left: 0;
205
- opacity: .5;
206
- animation: animationShape3 2s linear 0s infinite normal
207
- }
208
-
209
- .ezuikit-spin-lg .ezuikit-spin-dot-item:nth-child(4) {
210
- top: 18px;
211
- left: 18px;
212
- opacity: .3;
213
- animation: animationShape4 2s linear 0s infinite normal
214
- }
215
-
216
-
217
- .ezuikit-spin-lg .ezuikit-spin-dot i {
218
- width: 12px;
219
- height: 12px
220
- }
221
-
222
- .ezuikit-spin.ezuikit-spin-show-text .ezuikit-spin-text {
223
- display: block
224
- }
225
-
226
- @keyframes ezuikitSpinMove {
227
- to {
228
- opacity: 1
229
- }
230
- }
231
-
232
- @keyframes ezuikitRotate {
233
- to {
234
- transform: rotate(405deg)
235
- }
236
- }
237
-
238
- @keyframes rotation {
239
- 0% {
240
- transform: rotate(0)
241
- }
242
-
243
- to {
244
- transform: rotate(360deg)
245
- }
246
- }
247
-
248
- @keyframes smallAnimationShape1 {
249
- 0% {
250
- transform: translate(0)
251
- }
252
-
253
- 25% {
254
- transform: translateY(12px)
255
- }
256
-
257
- 50% {
258
- transform: translate(12px,12px)
259
- }
260
-
261
- 75% {
262
- transform: translate(12px)
263
- }
264
- }
265
-
266
- @keyframes smallAnimationShape2 {
267
- 0% {
268
- transform: translate(0)
269
- }
270
-
271
- 25% {
272
- transform: translate(-12px)
273
- }
274
-
275
- 50% {
276
- transform: translate(-12px,12px)
277
- }
278
-
279
- 75% {
280
- transform: translateY(12px)
281
- }
282
- }
283
-
284
- @keyframes smallAnimationShape3 {
285
- 0% {
286
- transform: translate(0)
287
- }
288
-
289
- 25% {
290
- transform: translate(12px)
291
- }
292
-
293
- 50% {
294
- transform: translate(12px,-12px)
295
- }
296
-
297
- 75% {
298
- transform: translateY(-12px)
299
- }
300
- }
301
-
302
- @keyframes smallAnimationShape4 {
303
- 0% {
304
- transform: translate(0)
305
- }
306
-
307
- 25% {
308
- transform: translateY(-12px)
309
- }
310
-
311
- 50% {
312
- transform: translate(-12px,-12px)
313
- }
314
-
315
- 75% {
316
- transform: translate(-12px)
317
- }
318
- }
319
-
320
- @keyframes animationShape1 {
321
- 0% {
322
- transform: translate(0)
323
- }
324
-
325
- 25% {
326
- transform: translateY(18px)
327
- }
328
-
329
- 50% {
330
- transform: translate(18px,18px)
331
- }
332
-
333
- 75% {
334
- transform: translate(18px)
335
- }
336
- }
337
-
338
- @keyframes animationShape2 {
339
- 0% {
340
- transform: translate(0)
341
- }
342
-
343
- 25% {
344
- transform: translate(-18px)
345
- }
346
-
347
- 50% {
348
- transform: translate(-18px,18px)
349
- }
350
-
351
- 75% {
352
- transform: translateY(18px)
353
- }
354
- }
355
-
356
- @keyframes animationShape3 {
357
- 0% {
358
- transform: translate(0)
359
- }
360
-
361
- 25% {
362
- transform: translate(18px)
363
- }
364
-
365
- 50% {
366
- transform: translate(18px,-18px)
367
- }
368
-
369
- 75% {
370
- transform: translateY(-18px)
371
- }
372
- }
373
-
374
- @keyframes animationShape4 {
375
- 0% {
376
- transform: translate(0)
377
- }
378
-
379
- 25% {
380
- transform: translateY(-18px)
381
- }
382
-
383
- 50% {
384
- transform: translate(-18px,-18px)
385
- }
386
-
387
- 75% {
388
- transform: translate(-18px)
389
- }
390
- }
391
-
392
- .ezuikit-btn {
393
- position: relative;
394
- display: inline-block;
395
- font-weight: 400;
396
- white-space: nowrap;
397
- text-align: center;
398
- background-image: none;
399
- border: 1px solid transparent;
400
- box-shadow: 0 2px #00000004;
401
- cursor: pointer;
402
- -webkit-user-select: none;
403
- -moz-user-select: none;
404
- -ms-user-select: none;
405
- user-select: none;
406
- touch-action: manipulation;
407
- min-width: 60px;
408
- height: 32px;
409
- padding: 4px 15px;
410
- font-size: 14px;
411
- border-radius: 2px;
412
- color: #595959;
413
- border-color: #d9d9d9;
414
- background: #fff
415
- }
416
- .ezuikit-btn::before {
417
- position: absolute;
418
- top: -1px;
419
- right: -1px;
420
- bottom: -1px;
421
- left: -1px;
422
- z-index: 1;
423
- display: none;
424
- background: #fff;
425
- border-radius: inherit;
426
- opacity: 0.35;
427
- transition: opacity 0.2s;
428
- content: '';
429
- pointer-events: none;
430
- }
431
- .ezuikit-btn-primary {
432
- color: #fff;
433
- border-color: #407AFF;
434
- background:#407AFF;
435
- text-shadow: 0 -1px 0 rgba(0,0,0,.12);
436
- box-shadow: 0 2px #0000000b
437
- }
438
-
439
- .ezuikit-btn-primary>a:only-child {
440
- color: currentColor
441
- }
442
-
443
- .ezuikit-btn-primary>a:only-child:after {
444
- position: absolute;
445
- inset: 0;
446
- background: transparent;
447
- content: ""
448
- }
449
-
450
- .ezuikit-btn-primary:hover {
451
- color: #fff;
452
- border-color: #699bff;
453
- background: #699bff
454
- }
455
-
456
- .ezuikit-btn[disabled] {
457
- cursor: not-allowed;
458
- }
459
- .ezuikit-btn[disabled] > * {
460
- pointer-events: none;
461
- }
462
-
463
- .ezuikit-btn[disabled],
464
- .ezuikit-btn[disabled]:hover,
465
- .ezuikit-btn[disabled]:focus,
466
- .ezuikit-btn[disabled]:active {
467
- color: #fff;
468
- border-color: #bfbfbf;
469
- background: #BFBFBF;
470
- text-shadow: none;
471
- box-shadow: none;
472
- }
473
- .ezuikit-btn[disabled] > a:only-child,
474
- .ezuikit-btn[disabled]:hover > a:only-child,
475
- .ezuikit-btn[disabled]:focus > a:only-child,
476
- .ezuikit-btn[disabled]:active > a:only-child {
477
- color: currentColor;
478
- }
479
- .ezuikit-btn[disabled] > a:only-child::after,
480
- .ezuikit-btn[disabled]:hover > a:only-child::after,
481
- .ezuikit-btn[disabled]:focus > a:only-child::after,
482
- .ezuikit-btn[disabled]:active > a:only-child::after {
483
- position: absolute;
484
- top: 0;
485
- right: 0;
486
- bottom: 0;
487
- left: 0;
488
- background: transparent;
489
- content: '';
490
- }
491
-
492
- .ezuikit-input {
493
- box-sizing: border-box;
494
- margin: 0;
495
- padding: 0;
496
- list-style: none;
497
- font-feature-settings: 'tnum';
498
- position: relative;
499
- display: inline-block;
500
- width: 100%;
501
- min-width: 0;
502
- padding: 4px 11px;
503
- color: #595959;
504
- font-size: 14px;
505
- line-height: 1.5715;
506
- background-color: #fff;
507
- background-image: none;
508
- border: 1px solid #d9d9d9;
509
- border-radius: 2px;
510
- transition: all 0.3s;
511
- /* stylelint-disable-next-line selector-no-vendor-prefix */
512
- /* stylelint-disable-next-line selector-no-vendor-prefix */
513
- padding: 4px 8px;
514
- }
515
-
516
- .ezuikit-input.input-has-error {
517
- background-color: #fff;
518
- border-color: #ff4d4f!important;
519
- }
520
- .ezuikit-input.input-has-error:focus {
521
- border-color: #ff4d4f!important;
522
- box-shadow: none;
523
- outline: 0;
524
- }
525
-
526
- .ezuikit-input::-moz-placeholder {
527
- opacity: 1;
528
- }
529
- .ezuikit-input:-ms-input-placeholder {
530
- color: #bfbfbf;
531
- }
532
- .ezuikit-input::placeholder {
533
- color: #bfbfbf;
534
- }
535
- .ezuikit-input:-moz-placeholder-shown {
536
- text-overflow: ellipsis;
537
- }
538
- .ezuikit-input:-ms-input-placeholder {
539
- text-overflow: ellipsis;
540
- }
541
- .ezuikit-input:placeholder-shown {
542
- text-overflow: ellipsis;
543
- }
544
- .ezuikit-input::-webkit-input-placeholder {
545
- -webkit-user-select: none;
546
- user-select: none;
547
- }
548
- .ezuikit-input:hover {
549
- border-color: #699bff;
550
- }
551
- .ezuikit-input-rtl .ezuikit-input:hover {
552
- border-right-width: 0;
553
- border-left-width: 1px !important;
554
- }
555
- .ezuikit-input:focus,
556
- .ezuikit-input-focused {
557
- border-color: #699bff;
558
- box-shadow: 0 0 0 2px rgba(64, 122, 255, 0.2);
559
- border-right-width: 1px !important;
560
- outline: 0;
561
- }
562
- .ezuikit-input-rtl .ezuikit-input:focus,
563
- .ezuikit-input-rtl .ezuikit-input-focused {
564
- border-right-width: 0;
565
- border-left-width: 1px !important;
566
- }
567
- .ezuikit-input-disabled {
568
- color: #BFBFBF;
569
- background-color: #f5f5f5;
570
- border-color: #d9d9d9;
571
- box-shadow: none;
572
- cursor: not-allowed;
573
- opacity: 1;
574
- }
575
- .ezuikit-input-disabled:hover {
576
- border-color: #d9d9d9;
577
- }
578
- .ezuikit-input[disabled] {
579
- color: #BFBFBF;
580
- background-color: #f5f5f5;
581
- border-color: #d9d9d9;
582
- box-shadow: none;
583
- cursor: not-allowed;
584
- opacity: 1;
585
- }
586
- .ezuikit-input[disabled]:hover {
587
- border-color: #d9d9d9;
588
- }
589
- .ezuikit-input-borderless,
590
- .ezuikit-input-borderless:hover,
591
- .ezuikit-input-borderless:focus,
592
- .ezuikit-input-borderless-focused,
593
- .ezuikit-input-borderless-disabled,
594
- .ezuikit-input-borderless[disabled] {
595
- background-color: transparent;
596
- border: none;
597
- box-shadow: none;
598
- }
599
- textarea.ezuikit-input {
600
- max-width: 100%;
601
- height: auto;
602
- min-height: 32px;
603
- line-height: 1.5715;
604
- vertical-align: bottom;
605
- transition: all 0.3s, height 0s;
606
- border: 0;
607
- margin-bottom: 24px;
608
- resize: none;
609
- }
610
- textarea.ezuikit-input:focus {
611
- box-shadow: none;
612
- }
613
-
614
- .ezuikit-input-textarea-focus {
615
- box-shadow: 0 0 0 2px rgba(64, 122, 255, 0.2);
616
- border: 1px solid #699bff !important;
617
- }
618
-
619
- .ezuikit-input-textarea {
620
- position: relative;
621
- border: 1px solid #d9d9d9;
622
- }
623
-
624
- .ezuikit-input-textarea-show-count::after {
625
- position: absolute;
626
- right: 9px;
627
- bottom: 1px;
628
- color: #bfbfbf;
629
- font-size: 12px;
630
- white-space: nowrap;
631
- content: attr(data-count);
632
- pointer-events: none;
633
- background-color: #fff;
634
- left: 1px;
635
- text-align: right;
636
- }
637
-
638
- .ezuikit-form-item-explain-error {
639
- color: #ff4d4f;
640
- font-size: 12px;
641
- color: #FF4D4F;
642
- line-height: 20px;
643
- }
644
-
645
- .ezuikit-btn.ezuikit-btn-loading {
646
- position: relative;
647
- cursor: default;
648
- }
649
- .ezuikit-btn.ezuikit-btn-loading::before {
650
- display: block;
651
- }
652
-
653
- .ezuikit-btn-loading svg {
654
- animation: loadingCircle 1s infinite linear;
655
- margin-right: 8px;
656
- }
657
-
658
- @keyframes loadingCircle {
659
- 100% {
660
- transform: rotate(360deg);
661
- }
662
- }
663
-
664
-
665
- .ezuikit-image,
666
- .ezuikit-video {
667
- position: relative;
668
- display: inline-block;
669
- }
670
- .ezuikit-image-img,
671
- .ezuikit-video-img {
672
- display: block;
673
- width: 100%;
674
- height: 100%;
675
- object-fit: contain;
676
- }
677
-
678
- .ezuikit-image-mask,
679
- .ezuikit-video-mask {
680
- position: absolute;
681
- top: 0;
682
- right: 0;
683
- bottom: 0;
684
- left: 0;
685
- display: flex;
686
- align-items: center;
687
- justify-content: center;
688
- color: #fff;
689
- cursor: pointer;
690
- opacity: 0;
691
- transition: opacity 0.3s;
692
- }
693
-
694
- .ezuikit-video-mask {
695
- opacity: 1;
696
- }
697
- .ezuikit-image-mask-info,
698
- .ezuikit-video-mask-info {
699
- padding: 0 4px;
700
- overflow: hidden;
701
- white-space: nowrap;
702
- text-overflow: ellipsis;
703
- }
704
-
705
- .ezuikit-image-anticon-eye,
706
- .ezuikit-video-anticon-eye {
707
- font-size: 14px;
708
- display: flex;
709
- align-items: center;
710
- }
711
-
712
- .ezuikit-image-anticon-eye svg {
713
- fill: #ffffff !important;;
714
- margin-right: 4px;
715
- }
716
-
717
- .ezuikit-image-mask:hover {
718
- /* background: rgba(0, 0, 0, 0.5); */
719
- opacity: 1;
720
- }
721
-
722
- .ezuikit-image-preview,
723
- .ezuikit-video-preview {
724
- pointer-events: none;
725
- height: 100%;
726
- text-align: center;
727
- }
728
-
729
- .ezuikit-image-preview-mask,
730
- .ezuikit-video-preview-mask {
731
- position: fixed;
732
- top: 0;
733
- right: 0;
734
- bottom: 0;
735
- left: 0;
736
- z-index: 1000;
737
- height: 100%;
738
- background-color: rgba(0, 0, 0, 0.45);
739
- }
740
-
741
- .ezuikit-image-preview-wrap,
742
- .ezuikit-video-preview-wrap {
743
- position: fixed;
744
- top: 0;
745
- right: 0;
746
- bottom: 0;
747
- left: 0;
748
- overflow: auto;
749
- outline: 0;
750
- -webkit-overflow-scrolling: touch;
751
- }
752
- .ezuikit-image-preview-body,
753
- .ezuikit-video-preview-body {
754
- position: absolute;
755
- top: 0;
756
- right: 0;
757
- bottom: 0;
758
- left: 0;
759
- overflow: hidden;
760
- }
761
- .ezuikit-image-preview-img,
762
- .ezuikit-video-preview-img {
763
- max-width: 80%;
764
- max-height: 80%;
765
- vertical-align: middle;
766
- transform: scale3d(1, 1, 1);
767
- transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
768
- -webkit-user-select: none;
769
- -moz-user-select: none;
770
- -ms-user-select: none;
771
- user-select: none;
772
- pointer-events: auto;
773
- }
774
- .ezuikit-image-preview-img-wrapper,
775
- .ezuikit-image-preview-img-main,
776
- .ezuikit-video-preview-img-wrapper {
777
- top: 40px !important;
778
- bottom: 40px !important;
779
- position: absolute;
780
- top: 0;
781
- right: 0;
782
- bottom: 0;
783
- left: 0;
784
- transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
785
- }
786
- .ezuikit-video-preview-img-wrapper {
787
- text-align: center;
788
- }
789
-
790
- .ezuikit-image-preview-img-wrapper::before,
791
- .ezuikit-image-preview-img-main::before,
792
- .ezuikit-video-preview-img-wrapper::before {
793
- display: inline-block;
794
- width: 1px;
795
- height: 50%;
796
- margin-right: -1px;
797
- content: '';
798
- }
799
- .ezuikit-image-preview-wrap,
800
- .ezuikit-video-preview-wrap {
801
- z-index: 1080;
802
- }
803
-
804
-
805
- .ezuikit-image-preview-operations,
806
- .ezuikit-video-preview-operations {
807
- box-sizing: border-box;
808
- margin: 0;
809
- padding: 0;
810
- color: #595959;
811
- font-size: 14px;
812
- line-height: 1.5715;
813
- font-feature-settings: 'tnum';
814
- position: fixed;
815
- top: 40px;
816
- right: 0;
817
- z-index: 1100;
818
- display: flex;
819
- flex-direction: row-reverse;
820
- align-items: center;
821
- width: 100%;
822
- color: rgba(255, 255, 255, 0.85);
823
- list-style: none;
824
- pointer-events: auto;
825
- }
826
-
827
-
828
- .ezuikit-image-preview-operations-operation,
829
- .ezuikit-video-preview-operations-operation {
830
- cursor: pointer;
831
- background: rgba(0, 0, 0, 0.7);
832
- margin-right: 40px;
833
- border-radius: 20px;
834
- width: 40px;
835
- height: 40px;
836
- display: flex;
837
- align-items: center;
838
- justify-content: center;
839
- }
840
- .ezuikit-image-preview-operations-icon,
841
- .ezuikit-video-preview-operations-icon {
842
- font-size: 18px;
843
- color: #fff;
844
- display: flex;
845
- }
846
-
847
- .ezuikit-message {
848
- box-sizing: border-box;
849
- margin: 0;
850
- padding: 0;
851
- color: #595959;
852
- font-size: 14px;
853
- line-height: 1.5715;
854
- list-style: none;
855
- font-feature-settings: 'tnum';
856
- position: absolute;
857
- top: 8px;
858
- left: 0;
859
- z-index: 1200;
860
- width: 100%;
861
- pointer-events: none;
862
- }
863
- .ezuikit-message-notice {
864
- padding: 8px;
865
- text-align: center;
866
- }
867
- .ezuikit-message-notice-content {
868
- display: inline-block;
869
- padding: 10px 16px;
870
- background: #fff;
871
- border-radius: 2px;
872
- box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
873
- pointer-events: all;
874
- }
875
- .ezuikit-message-success .ezdicon {
876
- color: #52c41a;
877
- }
878
-
879
- .ezuikit-message-error .ezdicon {
880
- color: #ff4d4f;
881
- }
882
-
883
- .ezuikit-message-warning .ezdicon {
884
- color: #faad14;
885
- }
886
-
887
- .ezuikit-message-info .ezdicon,
888
- .ezuikit-message-loading .ezdicon {
889
- color: #407AFF;
890
- }
891
-
892
- .ezuikit-message-custom-content {
893
- display: flex;
894
- text-align: left;
895
- }
896
- .ezuikit-message .ezdicon {
897
- position: relative;
898
- margin-right: 8px;
899
- font-size: 14px;
900
- display: flex;
901
- padding-top: 3px;
902
- }
903
-
904
- .ezuikit-popover {
905
- box-sizing: border-box;
906
- margin: 0;
907
- padding: 0;
908
- color: #595959;
909
- font-size: 14px;
910
- line-height: 1.5715;
911
- list-style: none;
912
- font-feature-settings: 'tnum';
913
- position: absolute;
914
- top: 0;
915
- left: 0;
916
- z-index: 1030;
917
- font-weight: normal;
918
- white-space: normal;
919
- text-align: left;
920
- cursor: auto;
921
- -webkit-user-select: text;
922
- -moz-user-select: text;
923
- -ms-user-select: text;
924
- user-select: text;
925
- }
926
- .ezuikit-popover::after {
927
- position: absolute;
928
- background: rgba(255, 255, 255, 0.01);
929
- content: '';
930
- }
931
- .ezuikit-popover-hidden {
932
- display: none;
933
- }
934
- .ezuikit-popover-placement-top,
935
- .ezuikit-popover-placement-topLeft,
936
- .ezuikit-popover-placement-topRight {
937
- padding-bottom: 8.48528137px;
938
- }
939
- .ezuikit-popover-placement-right,
940
- .ezuikit-popover-placement-rightTop,
941
- .ezuikit-popover-placement-rightBottom {
942
- padding-left: 8.48528137px;
943
- }
944
- .ezuikit-popover-placement-bottom,
945
- .ezuikit-popover-placement-bottomLeft,
946
- .ezuikit-popover-placement-bottomRight {
947
- padding-top: 8.48528137px;
948
- }
949
- .ezuikit-popover-placement-left,
950
- .ezuikit-popover-placement-leftTop,
951
- .ezuikit-popover-placement-leftBottom {
952
- padding-right: 8.48528137px;
953
- }
954
- .ezuikit-popover-inner {
955
- background-color: #fff;
956
- background-clip: padding-box;
957
- border-radius: 2px;
958
- box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
959
- box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) \9;
960
- }
961
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
962
- .ezuikit-popover {
963
- /* IE10+ */
964
- }
965
- .ezuikit-popover-inner {
966
- box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
967
- }
968
- }
969
- .ezuikit-popover-title {
970
- min-width: 177px;
971
- min-height: 32px;
972
- margin: 0;
973
- padding: 5px 16px 4px;
974
- color: rgba(0, 0, 0, 0.85);
975
- font-weight: 500;
976
- line-height: 32px;
977
- border-bottom: 1px solid #f0f0f0;
978
- }
979
- .ezuikit-popover-inner-content {
980
- padding: 12px 16px;
981
- color: #595959;
982
- }
983
- .ezuikit-popover-message {
984
- position: relative;
985
- padding: 4px 0 12px;
986
- color: #595959;
987
- font-size: 14px;
988
- }
989
- .ezuikit-popover-message > .ezdicon {
990
- position: absolute;
991
- top: 8.0005px;
992
- color: #faad14;
993
- font-size: 14px;
994
- }
995
- .ezuikit-popover-message-title {
996
- padding-left: 22px;
997
- }
998
- .ezuikit-popover-buttons {
999
- margin-bottom: 4px;
1000
- text-align: right;
1001
- }
1002
- .ezuikit-popover-buttons button {
1003
- margin-left: 8px;
1004
- }
1005
- .ezuikit-popover-arrow {
1006
- position: absolute;
1007
- display: block;
1008
- width: 8.48528137px;
1009
- height: 8.48528137px;
1010
- overflow: hidden;
1011
- background: transparent;
1012
- pointer-events: none;
1013
- }
1014
- .ezuikit-popover-arrow-content {
1015
- position: absolute;
1016
- top: 0;
1017
- right: 0;
1018
- bottom: 0;
1019
- left: 0;
1020
- display: block;
1021
- width: 6px;
1022
- height: 6px;
1023
- margin: auto;
1024
- background-color: #fff;
1025
- content: '';
1026
- pointer-events: auto;
1027
- }
1028
- .ezuikit-popover-placement-top .ezuikit-popover-arrow,
1029
- .ezuikit-popover-placement-topLeft .ezuikit-popover-arrow,
1030
- .ezuikit-popover-placement-topRight .ezuikit-popover-arrow {
1031
- bottom: 1.51471863px;
1032
- }
1033
- .ezuikit-popover-placement-top .ezuikit-popover-arrow-content,
1034
- .ezuikit-popover-placement-topLeft .ezuikit-popover-arrow-content,
1035
- .ezuikit-popover-placement-topRight .ezuikit-popover-arrow-content {
1036
- box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
1037
- transform: translateY(-4.24264069px) rotate(45deg);
1038
- }
1039
- .ezuikit-popover-placement-top .ezuikit-popover-arrow {
1040
- left: 50%;
1041
- transform: translateX(-50%);
1042
- }
1043
- .ezuikit-popover-placement-topLeft .ezuikit-popover-arrow {
1044
- left: 16px;
1045
- }
1046
- .ezuikit-popover-placement-topRight .ezuikit-popover-arrow {
1047
- right: 16px;
1048
- }
1049
- .ezuikit-popover-placement-right .ezuikit-popover-arrow,
1050
- .ezuikit-popover-placement-rightTop .ezuikit-popover-arrow,
1051
- .ezuikit-popover-placement-rightBottom .ezuikit-popover-arrow {
1052
- left: 1.51471863px;
1053
- }
1054
- .ezuikit-popover-placement-right .ezuikit-popover-arrow-content,
1055
- .ezuikit-popover-placement-rightTop .ezuikit-popover-arrow-content,
1056
- .ezuikit-popover-placement-rightBottom .ezuikit-popover-arrow-content {
1057
- box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
1058
- transform: translateX(4.24264069px) rotate(45deg);
1059
- }
1060
- .ezuikit-popover-placement-right .ezuikit-popover-arrow {
1061
- top: 50%;
1062
- transform: translateY(-50%);
1063
- }
1064
- .ezuikit-popover-placement-rightTop .ezuikit-popover-arrow {
1065
- top: 12px;
1066
- }
1067
- .ezuikit-popover-placement-rightBottom .ezuikit-popover-arrow {
1068
- bottom: 12px;
1069
- }
1070
- .ezuikit-popover-placement-bottom .ezuikit-popover-arrow,
1071
- .ezuikit-popover-placement-bottomLeft .ezuikit-popover-arrow,
1072
- .ezuikit-popover-placement-bottomRight .ezuikit-popover-arrow {
1073
- top: 1.51471863px;
1074
- }
1075
- .ezuikit-popover-placement-bottom .ezuikit-popover-arrow-content,
1076
- .ezuikit-popover-placement-bottomLeft .ezuikit-popover-arrow-content,
1077
- .ezuikit-popover-placement-bottomRight .ezuikit-popover-arrow-content {
1078
- box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06);
1079
- transform: translateY(4.24264069px) rotate(45deg);
1080
- }
1081
- .ezuikit-popover-placement-bottom .ezuikit-popover-arrow {
1082
- left: 50%;
1083
- transform: translateX(-50%);
1084
- }
1085
- .ezuikit-popover-placement-bottomLeft .ezuikit-popover-arrow {
1086
- left: 16px;
1087
- }
1088
- .ezuikit-popover-placement-bottomRight .ezuikit-popover-arrow {
1089
- right: 16px;
1090
- }
1091
- .ezuikit-popover-placement-left .ezuikit-popover-arrow,
1092
- .ezuikit-popover-placement-leftTop .ezuikit-popover-arrow,
1093
- .ezuikit-popover-placement-leftBottom .ezuikit-popover-arrow {
1094
- right: 1.51471863px;
1095
- }
1096
- .ezuikit-popover-placement-left .ezuikit-popover-arrow-content,
1097
- .ezuikit-popover-placement-leftTop .ezuikit-popover-arrow-content,
1098
- .ezuikit-popover-placement-leftBottom .ezuikit-popover-arrow-content {
1099
- box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
1100
- transform: translateX(-4.24264069px) rotate(45deg);
1101
- }
1102
- .ezuikit-popover-placement-left .ezuikit-popover-arrow {
1103
- top: 50%;
1104
- transform: translateY(-50%);
1105
- }
1106
- .ezuikit-popover-placement-leftTop .ezuikit-popover-arrow {
1107
- top: 12px;
1108
- }
1109
- .ezuikit-popover-placement-leftBottom .ezuikit-popover-arrow {
1110
- bottom: 12px;
1111
- }
1112
- .ezuikit-popover-pink .ezuikit-popover-inner {
1113
- background-color: #eb2f96;
1114
- }
1115
- .ezuikit-popover-pink .ezuikit-popover-arrow-content {
1116
- background-color: #eb2f96;
1117
- }
1118
- .ezuikit-popover-magenta .ezuikit-popover-inner {
1119
- background-color: #eb2f96;
1120
- }
1121
- .ezuikit-popover-magenta .ezuikit-popover-arrow-content {
1122
- background-color: #eb2f96;
1123
- }
1124
- .ezuikit-popover-red .ezuikit-popover-inner {
1125
- background-color: #f5222d;
1126
- }
1127
- .ezuikit-popover-red .ezuikit-popover-arrow-content {
1128
- background-color: #f5222d;
1129
- }
1130
- .ezuikit-popover-volcano .ezuikit-popover-inner {
1131
- background-color: #fa541c;
1132
- }
1133
- .ezuikit-popover-volcano .ezuikit-popover-arrow-content {
1134
- background-color: #fa541c;
1135
- }
1136
- .ezuikit-popover-orange .ezuikit-popover-inner {
1137
- background-color: #FAAD14;
1138
- }
1139
- .ezuikit-popover-orange .ezuikit-popover-arrow-content {
1140
- background-color: #FAAD14;
1141
- }
1142
- .ezuikit-popover-yellow .ezuikit-popover-inner {
1143
- background-color: #fadb14;
1144
- }
1145
- .ezuikit-popover-yellow .ezuikit-popover-arrow-content {
1146
- background-color: #fadb14;
1147
- }
1148
- .ezuikit-popover-gold .ezuikit-popover-inner {
1149
- background-color: #faad14;
1150
- }
1151
- .ezuikit-popover-gold .ezuikit-popover-arrow-content {
1152
- background-color: #faad14;
1153
- }
1154
- .ezuikit-popover-cyan .ezuikit-popover-inner {
1155
- background-color: #13c2c2;
1156
- }
1157
- .ezuikit-popover-cyan .ezuikit-popover-arrow-content {
1158
- background-color: #13c2c2;
1159
- }
1160
- .ezuikit-popover-lime .ezuikit-popover-inner {
1161
- background-color: #a0d911;
1162
- }
1163
- .ezuikit-popover-lime .ezuikit-popover-arrow-content {
1164
- background-color: #a0d911;
1165
- }
1166
- .ezuikit-popover-green .ezuikit-popover-inner {
1167
- background-color: #52c41a;
1168
- }
1169
- .ezuikit-popover-green .ezuikit-popover-arrow-content {
1170
- background-color: #52c41a;
1171
- }
1172
- .ezuikit-popover-blue .ezuikit-popover-inner {
1173
- background-color: #407AFF;
1174
- }
1175
- .ezuikit-popover-blue .ezuikit-popover-arrow-content {
1176
- background-color: #407AFF;
1177
- }
1178
- .ezuikit-popover-geekblue .ezuikit-popover-inner {
1179
- background-color: #2f54eb;
1180
- }
1181
- .ezuikit-popover-geekblue .ezuikit-popover-arrow-content {
1182
- background-color: #2f54eb;
1183
- }
1184
- .ezuikit-popover-purple .ezuikit-popover-inner {
1185
- background-color: #722ed1;
1186
- }
1187
- .ezuikit-popover-purple .ezuikit-popover-arrow-content {
1188
- background-color: #722ed1;
1189
- }
1190
- .ezuikit-popover-rtl {
1191
- direction: rtl;
1192
- text-align: right;
1193
- }
1194
- .ezuikit-popover-rtl .ezuikit-popover-message-title {
1195
- padding-right: 22px;
1196
- padding-left: 16px;
1197
- }
1198
- .ezuikit-popover-rtl .ezuikit-popover-buttons {
1199
- text-align: left;
1200
- }
1201
- .ezuikit-popover-rtl .ezuikit-popover-buttons button {
1202
- margin-right: 8px;
1203
- margin-left: 0;
1204
- }
1205
-
1206
- .ezuikit-confirm {
1207
- padding: 12px 8px;
1208
- }
1209
-
1210
- .ezuikit-confirm-content {
1211
- width: 272px;
1212
- box-sizing: border-box;
1213
- margin-bottom: 24px;
1214
-
1215
- }
1216
- .ezuikit-confirm-content {
1217
- display: flex;
1218
- }
1219
-
1220
- .ezuikit-confirm-content-label {
1221
- font-size: 16px;
1222
- color: #262626;
1223
- line-height: 24px;
1224
- font-weight: bold;
1225
- }
1226
-
1227
- .ezuikit-confirm-content .ezuikit-confirm-icon {
1228
- color: #FAAD14 ;
1229
- margin-right: 16px;
1230
- }
1231
-
1232
- /* 隐藏 Safari 和 Chrome 浏览器中的控制按钮 */
1233
- video::-webkit-media-controls-rewind-button,
1234
- video::-webkit-media-controls-fast-forward-button,
1235
- video::-webkit-media-controls-seek-forward-button,
1236
- video::-webkit-media-controls-seek-back-button,
1237
- video::-webkit-media-controls-toggle-closed-captions-button,
1238
- video::-webkit-media-controls-picture-in-picture-button,
1239
- video::-webkit-media-controls-step-forward-button,
1240
- video::-webkit-media-controls-step-back-button{
1241
- display: none !important;
1242
- }
1243
-
1244
- /* 隐藏 Firefox 浏览器中的控制按钮 */
1245
- video::-moz-full-screen-button,
1246
- video::-moz-focus-outer {
1247
- display: none;
1248
- }
1249
-
1250
- /* 隐藏 Edge 浏览器中的控制按钮 */
1251
- video:-ms-fullscreen {
1252
- display: none;
1253
- }
1254
-
1255
- :focus-visible {
1256
- outline: none;
1257
- }