rk-web-core 0.13.206 → 0.13.208

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/{1.3cf6f8adb7fd1899de82.js → 1.606f54398cee833f1045.js} +1 -1
  2. package/package.json +1 -2
  3. package/rk-web-core.css +0 -3672
  4. package/rk-web-core.js +28 -28
package/rk-web-core.css CHANGED
@@ -2323,3675 +2323,3 @@ html {
2323
2323
  }
2324
2324
  }
2325
2325
 
2326
- @charset "UTF-8";
2327
- *,
2328
- :before,
2329
- :after {
2330
- --tw-border-spacing-x: 0;
2331
- --tw-border-spacing-y: 0;
2332
- --tw-translate-x: 0;
2333
- --tw-translate-y: 0;
2334
- --tw-rotate: 0;
2335
- --tw-skew-x: 0;
2336
- --tw-skew-y: 0;
2337
- --tw-scale-x: 1;
2338
- --tw-scale-y: 1;
2339
- --tw-pan-x: 0;
2340
- --tw-pan-y: 0;
2341
- --tw-pinch-zoom: 0;
2342
- --tw-scroll-snap-strictness: proximity;
2343
- --tw-gradient-from-position: 0;
2344
- --tw-gradient-via-position: 0;
2345
- --tw-gradient-to-position: 0;
2346
- --tw-ordinal: 0;
2347
- --tw-slashed-zero: 0;
2348
- --tw-numeric-figure: 0;
2349
- --tw-numeric-spacing: 0;
2350
- --tw-numeric-fraction: 0;
2351
- --tw-ring-inset: 0;
2352
- --tw-ring-offset-width: 0px;
2353
- --tw-ring-offset-color: #fff;
2354
- --tw-ring-color: rgb(59 130 492);
2355
- --tw-ring-offset-shadow: 0 0 #0000;
2356
- --tw-ring-shadow: 0 0 #0000;
2357
- --tw-shadow: 0 0 #0000;
2358
- --tw-shadow-colored: 0 0 #0000;
2359
- --tw-blur: 0;
2360
- --tw-brightness: 0;
2361
- --tw-contrast: 0;
2362
- --tw-grayscale: 0;
2363
- --tw-hue-rotate: 0;
2364
- --tw-invert: 0;
2365
- --tw-saturate: 0;
2366
- --tw-sepia: 0;
2367
- --tw-drop-shadow: 0;
2368
- --tw-backdrop-blur: 0;
2369
- --tw-backdrop-brightness: 0;
2370
- --tw-backdrop-contrast: 0;
2371
- --tw-backdrop-grayscale: 0;
2372
- --tw-backdrop-hue-rotate: 0;
2373
- --tw-backdrop-invert: 0;
2374
- --tw-backdrop-opacity: 0;
2375
- --tw-backdrop-saturate: 0;
2376
- --tw-backdrop-sepia: 0;
2377
- }
2378
- ::backdrop {
2379
- --tw-border-spacing-x: 0;
2380
- --tw-border-spacing-y: 0;
2381
- --tw-translate-x: 0;
2382
- --tw-translate-y: 0;
2383
- --tw-rotate: 0;
2384
- --tw-skew-x: 0;
2385
- --tw-skew-y: 0;
2386
- --tw-scale-x: 1;
2387
- --tw-scale-y: 1;
2388
- --tw-pan-x: 0;
2389
- --tw-pan-y: 0;
2390
- --tw-pinch-zoom: 0;
2391
- --tw-scroll-snap-strictness: proximity;
2392
- --tw-gradient-from-position: 0;
2393
- --tw-gradient-via-position: 0;
2394
- --tw-gradient-to-position: 0;
2395
- --tw-ordinal: 0;
2396
- --tw-slashed-zero: 0;
2397
- --tw-numeric-figure: 0;
2398
- --tw-numeric-spacing: 0;
2399
- --tw-numeric-fraction: 0;
2400
- --tw-ring-inset: 0;
2401
- --tw-ring-offset-width: 0px;
2402
- --tw-ring-offset-color: #fff;
2403
- --tw-ring-color: rgb(59 130 492);
2404
- --tw-ring-offset-shadow: 0 0 #0000;
2405
- --tw-ring-shadow: 0 0 #0000;
2406
- --tw-shadow: 0 0 #0000;
2407
- --tw-shadow-colored: 0 0 #0000;
2408
- --tw-blur: 0;
2409
- --tw-brightness: 0;
2410
- --tw-contrast: 0;
2411
- --tw-grayscale: 0;
2412
- --tw-hue-rotate: 0;
2413
- --tw-invert: 0;
2414
- --tw-saturate: 0;
2415
- --tw-sepia: 0;
2416
- --tw-drop-shadow: 0;
2417
- --tw-backdrop-blur: 0;
2418
- --tw-backdrop-brightness: 0;
2419
- --tw-backdrop-contrast: 0;
2420
- --tw-backdrop-grayscale: 0;
2421
- --tw-backdrop-hue-rotate: 0;
2422
- --tw-backdrop-invert: 0;
2423
- --tw-backdrop-opacity: 0;
2424
- --tw-backdrop-saturate: 0;
2425
- --tw-backdrop-sepia: 0;
2426
- }
2427
- .fixed {
2428
- position: fixed;
2429
- }
2430
- .absolute {
2431
- position: absolute;
2432
- }
2433
- .relative {
2434
- position: relative;
2435
- }
2436
- .flex {
2437
- display: flex;
2438
- }
2439
- .hidden {
2440
- display: none;
2441
- }
2442
- .border {
2443
- border-width: 1px;
2444
- }
2445
- :root {
2446
- --ui-blue: #2a80eb;
2447
- --ui-dark-blue: #0057c3;
2448
- --ui-dark: #4c5161;
2449
- --ui-gray: #a2a9b6;
2450
- --ui-dark-gray: #b6bbc6;
2451
- --ui-light: #f7f9fa;
2452
- --ui-white: #ffffff;
2453
- --ui-green: #1cad70;
2454
- --ui-orange: #f59b00;
2455
- --ui-red: #eb4646;
2456
- --ui-list-hover: #f0f7ff;
2457
- --ui-list-selected: #e0f0ff;
2458
- --ui-disabled: #ccd0d7;
2459
- --ui-border: #d0d0d5;
2460
- --ui-dark-border: #ababaf;
2461
- --ui-light-border: #ededef;
2462
- --ui-opacity: 0.4;
2463
- --ui-radius: 4px;
2464
- --ui-font: 14px;
2465
- --ui-animate-time: 0.2s;
2466
- --ui-line-height: 20px;
2467
- --ui-component-height: 40px;
2468
- }
2469
- :root {
2470
- --ui-button-height: var(--ui-component-height, 40px);
2471
- --ui-button-line-height: var(--ui-line-height, 20px);
2472
- --ui-button-color: var(--ui-dark, #4c5161);
2473
- --ui-button-loading-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 1024q-104 0-199-40-92-39-163-110T40 711Q0 616 0 512q0-15 10.5-25.5T36 476t25.5 10.5T72 512q0 90 35 171 33 79 94 140t140 95q81 34 171 34t171-35q79-33 140-94t95-140q34-81 34-171t-35-171q-33-79-94-140t-140-95q-81-34-171-34-15 0-25.5-10.5T476 36t10.5-25.5T512 0q104 0 199 40 92 39 163 110t110 163q40 95 40 199t-40 199q-39 92-110 163T711 984q-95 40-199 40z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat;
2474
- }
2475
- .ui-button,
2476
- [is='ui-button'] {
2477
- display: inline-block;
2478
- line-height: var(--ui-button-line-height);
2479
- font-size: var(--ui-font, 14px);
2480
- text-align: center;
2481
- color: var(--ui-white, #fff);
2482
- border-radius: var(--ui-radius, 4px);
2483
- border: 1px solid var(--ui-button-color);
2484
- padding: calc((var(--ui-button-height) - var(--ui-button-line-height) - 2px) / 2) calc(var(--ui-button-height) / 2.5);
2485
- min-width: 80px;
2486
- background: var(--ui-button-color) no-repeat center;
2487
- text-decoration: none;
2488
- box-sizing: border-box;
2489
- transition: border-color var(--ui-animate-time, 0.2s), box-shadow var(--ui-animate-time, 0.2s), opacity var(--ui-animate-time, 0.2s);
2490
- fill: currentColor;
2491
- font-family: inherit;
2492
- cursor: pointer;
2493
- overflow: visible;
2494
- }
2495
- @media (prefers-reduced-motion: reduce) {
2496
- .ui-button,
2497
- [is='ui-button'] {
2498
- transition: none;
2499
- }
2500
- }
2501
- .ui-button[width='100%'],
2502
- [is='ui-button'][width='100%'] {
2503
- width: 100%;
2504
- }
2505
- div.ui-button,
2506
- div[is='ui-button'] {
2507
- display: block;
2508
- }
2509
- [type='submit']:not([class]):not([is]) {
2510
- position: absolute;
2511
- clip: rect(0 0 0 0);
2512
- }
2513
- @supports (-webkit-mask: none) {
2514
- button,
2515
- [type='button'],
2516
- [type='submit'],
2517
- [tabindex] {
2518
- outline: 0 none;
2519
- }
2520
- }
2521
- ::-moz-focus-inner {
2522
- border: 0;
2523
- }
2524
- .ui-button:hover,
2525
- [is='ui-button']:hover {
2526
- color: var(--ui-white, #fff);
2527
- text-decoration: none;
2528
- }
2529
- .ui-button:not(.disabled):not(.loading):not(:disabled):hover,
2530
- [is='ui-button']:not(.disabled):not(.loading):not(:disabled):hover {
2531
- filter: brightness(1.05);
2532
- }
2533
- .ui-button:not(.disabled):not(.loading):active,
2534
- [is='ui-button']:not(.disabled):not(.loading):active {
2535
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 0 0 100px rgba(0, 0, 0, 0.1);
2536
- }
2537
- .ui-button[type='normal'],
2538
- .ui-button[data-type='normal'],
2539
- [is='ui-button'][type='normal'],
2540
- [is='ui-button'][data-type='normal'] {
2541
- --ui-button-color: var(--ui-white, #fff);
2542
- color: var(--ui-dark, #4c5161);
2543
- border-color: var(--ui-border);
2544
- }
2545
- .ui-button[data-type='primary'],
2546
- .ui-button[data-type='remind'],
2547
- .ui-button[type='primary'],
2548
- .ui-button[type='remind'],
2549
- [is='ui-button'][data-type='primary'],
2550
- [is='ui-button'][data-type='remind'],
2551
- [is='ui-button'][type='primary'],
2552
- [is='ui-button'][type='remind'] {
2553
- --ui-button-color: var(--ui-blue, #2a80eb);
2554
- }
2555
- .ui-button[data-type='success'],
2556
- .ui-button[type='success'],
2557
- [is='ui-button'][data-type='success'],
2558
- [is='ui-button'][type='success'] {
2559
- --ui-button-color: var(--ui-green, #1cad70);
2560
- }
2561
- .ui-button[data-type^='warn'],
2562
- .ui-button[type^='warn'],
2563
- [is='ui-button'][data-type^='warn'],
2564
- [is='ui-button'][type^='warn'] {
2565
- --ui-button-color: var(--ui-orange, #f59b00);
2566
- }
2567
- .ui-button[data-type='danger'],
2568
- .ui-button[data-type='error'],
2569
- .ui-button[type='danger'],
2570
- .ui-button[type='error'],
2571
- [is='ui-button'][data-type='danger'],
2572
- [is='ui-button'][data-type='error'],
2573
- [is='ui-button'][type='danger'],
2574
- [is='ui-button'][type='error'] {
2575
- --ui-button-color: var(--ui-red, #eb4646);
2576
- }
2577
- .ui-button.disabled,
2578
- .ui-button:disabled,
2579
- [is='ui-button'].disabled,
2580
- [is='ui-button']:disabled {
2581
- opacity: var(--ui-opacity, 0.4);
2582
- cursor: default;
2583
- }
2584
- .ui-button.loading,
2585
- [is='ui-button'].loading {
2586
- color: transparent !important;
2587
- pointer-events: none;
2588
- position: relative;
2589
- cursor: default;
2590
- }
2591
- input.ui-button.loading,
2592
- input[is='ui-button'].loading {
2593
- --ui-loading-color: var(--ui-white, #fff);
2594
- --ui-loading-radial: radial-gradient(3px circle, var(--ui-loading-color), var(--ui-loading-color) 2px, transparent 3px);
2595
- background-image: var(--ui-loading-radial), var(--ui-loading-radial), var(--ui-loading-radial);
2596
- background-position-y: 50%;
2597
- background-size: 5px 5px;
2598
- animation: bubbling 1s infinite;
2599
- }
2600
- input[data-type='normal'].loading {
2601
- --ui-loading-color: var(--ui-blue, #2a80eb);
2602
- }
2603
- .ui-button.loading:before,
2604
- [is='ui-button'].loading:before {
2605
- content: '';
2606
- position: absolute;
2607
- left: 0;
2608
- top: 0;
2609
- right: 0;
2610
- bottom: 0;
2611
- width: 20px;
2612
- height: 20px;
2613
- background-color: var(--ui-white, #fff);
2614
- -webkit-mask: var(--ui-button-loading-img);
2615
- mask: var(--ui-button-loading-img);
2616
- -webkit-mask-size: 100% 100%;
2617
- mask-size: 100% 100%;
2618
- margin: auto;
2619
- animation: spin 1s linear infinite;
2620
- }
2621
- [data-type='normal'].loading:before,
2622
- [type='normal'].loading:before {
2623
- background-color: var(--ui-blue, #2a80eb);
2624
- }
2625
- .ui-button[is-error],
2626
- [is='ui-button'][is-error] {
2627
- border-color: var(--ui-red, #eb4646) !important;
2628
- }
2629
- :root {
2630
- --ui-checkbox-width: 20px;
2631
- --ui-checkbox-height: 20px;
2632
- }
2633
- [is='ui-checkbox'] {
2634
- -webkit-appearance: none;
2635
- width: var(--ui-checkbox-width, 20px);
2636
- height: var(--ui-checkbox-height, 20px);
2637
- display: inline-flex;
2638
- border: solid 1px rgba(0, 0, 0, 0);
2639
- outline: none;
2640
- border-radius: var(--ui-radius, 4px);
2641
- box-sizing: border-box;
2642
- box-shadow: inset 0 1px, inset 1px 0, inset -1px 0, inset 0 -1px;
2643
- background-color: var(--ui-white, #ffffff);
2644
- background-clip: content-box;
2645
- color: var(--ui-border, #d0d0d5);
2646
- transition: color var(--ui-animate-time, 0.2s), background-color var(--ui-animate-time, 0.2s);
2647
- -webkit-user-select: none;
2648
- -moz-user-select: none;
2649
- user-select: none;
2650
- vertical-align: -0.5ex;
2651
- }
2652
- [is='ui-checkbox']:after {
2653
- content: '';
2654
- width: 100%;
2655
- height: 100%;
2656
- background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M920.185 224.838c-33.782-33.935-88.619-33.935-122.464 0L409.955 614.564 226.231 429.952c-33.782-33.935-88.68-33.935-122.461 0-33.784 33.997-33.784 89.108 0 123.044l244.925 246.118c33.782 33.998 88.68 33.998 122.463 0l449.028-451.201c33.843-33.967 33.843-89.048-.001-123.075z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
2657
- background-size: 12px 12px;
2658
- visibility: hidden;
2659
- opacity: 0;
2660
- transition: opacity var(--ui-animate-time, 0.2s);
2661
- }
2662
- [is='ui-checkbox']:not(:disabled):hover,
2663
- [is='ui-checkbox']:disabled {
2664
- color: var(--ui-dark-border, #ababaf);
2665
- }
2666
- [is='ui-checkbox']:focus {
2667
- color: var(--ui-blue, #2a80eb);
2668
- }
2669
- [is='ui-checkbox']:focus:hover {
2670
- color: var(--ui-dark-blue, #0057c3);
2671
- }
2672
- [is='ui-checkbox']:checked {
2673
- color: var(--ui-blue, #2a80eb);
2674
- background-color: var(--ui-blue, #2a80eb);
2675
- }
2676
- [is='ui-checkbox']:not(:disabled):checked:focus,
2677
- [is='ui-checkbox']:not(:disabled):checked:hover {
2678
- color: var(--ui-dark-blue, #0057c3);
2679
- background-color: var(--ui-dark-blue, #0057c3);
2680
- }
2681
- [is='ui-checkbox']:checked:after {
2682
- opacity: 1;
2683
- visibility: visible;
2684
- }
2685
- [is='ui-checkbox']:indeterminate:after {
2686
- opacity: 1;
2687
- visibility: visible;
2688
- color: var(--ui-blue, #2a80eb);
2689
- background-image: linear-gradient(currentColor, currentColor);
2690
- background-size: 8px 8px;
2691
- }
2692
- [is='ui-checkbox']:not(:disabled):indeterminate:focus,
2693
- [is='ui-checkbox']:not(:disabled):indeterminate:hover {
2694
- color: var(--ui-dark-blue, #0057c3);
2695
- }
2696
- [is='ui-checkbox']:disabled {
2697
- opacity: var(--ui-opacity, 0.4);
2698
- }
2699
- [is='ui-checkbox'][is-error] {
2700
- color: var(--ui-red, #eb4646) !important;
2701
- }
2702
- @media (prefers-reduced-motion: reduce) {
2703
- [is='ui-checkbox'],
2704
- [is='ui-checkbox']:after {
2705
- transition: none;
2706
- }
2707
- }
2708
- [is='ui-color'] {
2709
- width: 40px;
2710
- height: 40px;
2711
- padding: 0;
2712
- vertical-align: middle;
2713
- border: 0;
2714
- border-radius: var(--ui-radius, 4px);
2715
- background-color: rgba(25, 28, 34, 0.2);
2716
- outline: none;
2717
- cursor: pointer;
2718
- }
2719
- [is='ui-color']::-webkit-color-swatch-wrapper {
2720
- padding: 0;
2721
- margin: 8px auto;
2722
- width: 24px;
2723
- height: 24px;
2724
- }
2725
- [is='ui-color']::-webkit-color-swatch {
2726
- border: 1px solid var(--ui-light, #f7f9fa);
2727
- border-radius: calc(var(--ui-radius, 4px) - 1px);
2728
- }
2729
- [is='ui-color']:disabled::-webkit-color-swatch {
2730
- background-image: linear-gradient(to right bottom, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px)), linear-gradient(to top right, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px));
2731
- }
2732
- [is='ui-color'],
2733
- _::-moz-color-swatch {
2734
- padding: 8px;
2735
- }
2736
- [is='ui-color']::-moz-color-swatch {
2737
- border: 1px solid var(--ui-light, #f7f9fa);
2738
- }
2739
- .ui-color-container {
2740
- display: none;
2741
- position: absolute;
2742
- width: 241px;
2743
- padding: 10px 12px;
2744
- border-radius: var(--ui-radius, 4px);
2745
- background-color: var(--ui-light, #f7f9fa);
2746
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
2747
- font-size: var(--ui-font, 14px);
2748
- animation: fadeIn var(--ui-animate-time, 0.2s);
2749
- touch-action: none;
2750
- --safe-area: 3px;
2751
- z-index: 21;
2752
- }
2753
- .ui-color-switch {
2754
- position: absolute;
2755
- top: 12px;
2756
- right: 12px;
2757
- color: var(--ui-blue, #2a80eb);
2758
- border: 1px solid transparent;
2759
- height: 20px;
2760
- line-height: 20px;
2761
- padding: 2px 5px;
2762
- border-radius: calc(var(--ui-radius, 4px) - 1px);
2763
- background: none;
2764
- font-family: inherit;
2765
- transition: border-color var(--ui-animate-time, 0.2s), background-color var(--ui-animate-time, 0.2s);
2766
- box-sizing: content-box;
2767
- }
2768
- .ui-color-switch:hover {
2769
- border-color: #d0d0d5;
2770
- background-color: var(--ui-white, #ffffff);
2771
- }
2772
- .ui-color-switch:active {
2773
- line-height: normal;
2774
- }
2775
- .ui-color-switch[data-mode]:before {
2776
- content: '';
2777
- display: inline-block;
2778
- width: 14px;
2779
- height: 14px;
2780
- vertical-align: -2px;
2781
- margin-right: 4px;
2782
- pointer-events: none;
2783
- }
2784
- .ui-color-switch[data-mode='basic']:before {
2785
- background: conic-gradient(red 120deg, blue 120deg 240deg, lime 240deg);
2786
- transform: rotate(-60deg);
2787
- border-radius: 50%;
2788
- }
2789
- .ui-color-switch[data-mode='more']:before {
2790
- background: radial-gradient(closest-side, white, transparent), conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
2791
- border-radius: 50%;
2792
- }
2793
- [type='color-opacity'] {
2794
- background: linear-gradient(var(--ui-color-opacity, #000000), var(--ui-color-opacity, #000000)), conic-gradient(black 45deg, white 45deg, white 225deg, black 225deg);
2795
- box-sizing: border-box;
2796
- background-clip: content-box;
2797
- border: 8px solid rgba(25, 28, 34, 0.2);
2798
- padding: 1px;
2799
- font-size: 0;
2800
- }
2801
- .ui-color-current {
2802
- padding-bottom: 20px;
2803
- }
2804
- .ui-color-current-square,
2805
- .ui-color-current-square-opacity {
2806
- display: inline-block;
2807
- width: 20px;
2808
- height: 20px;
2809
- margin-right: 5px;
2810
- border-radius: calc(var(--ui-radius, 4px) - 1px);
2811
- box-shadow: inset 0 1px rgba(0, 0, 0, 0.25), inset 0 -1px rgba(0, 0, 0, 0.25), inset 1px 0 rgba(0, 0, 0, 0.25), inset -1px 0 rgba(0, 0, 0, 0.25);
2812
- background-color: currentColor;
2813
- vertical-align: middle;
2814
- }
2815
- .ui-color-current-square-opacity {
2816
- background: linear-gradient(var(--ui-color-opacity, #000000), var(--ui-color-opacity, #000000)), conic-gradient(black 45deg, white 45deg, white 225deg, black 225deg);
2817
- }
2818
- .ui-color-current-input {
2819
- width: 72px;
2820
- border: 1px solid var(--ui-border, #d0d0d5);
2821
- background-color: var(--ui-white, #ffffff);
2822
- height: 20px;
2823
- line-height: 20px;
2824
- padding: 2px 5px;
2825
- border-radius: calc(var(--ui-radius, 4px) - 1px);
2826
- margin-left: 5px;
2827
- font-size: 13px;
2828
- vertical-align: middle;
2829
- box-sizing: content-box;
2830
- text-transform: uppercase;
2831
- color: inherit;
2832
- }
2833
- .ui-color-body {
2834
- min-height: 100px;
2835
- }
2836
- .ui-color-basic {
2837
- overflow: hidden;
2838
- }
2839
- .ui-color-lump-group {
2840
- width: 72px;
2841
- float: left;
2842
- }
2843
- .ui-color-lump {
2844
- display: block;
2845
- width: 11px;
2846
- height: 11px;
2847
- margin: 0 1px 1px 0;
2848
- box-sizing: border-box;
2849
- background-color: currentColor;
2850
- }
2851
- .ui-color-lump:hover,
2852
- .ui-color-basic a.active,
2853
- .ui-color-lump-preset:hover {
2854
- border: 1px solid var(--ui-white, #ffffff);
2855
- }
2856
- .ui-color-lump-preset {
2857
- display: block;
2858
- height: 35px;
2859
- margin: 0 1px 1px 0;
2860
- box-sizing: border-box;
2861
- background-color: currentColor;
2862
- border: 1px solid transparent;
2863
- }
2864
- .ui-color-basic-l {
2865
- width: 12px;
2866
- float: left;
2867
- overflow: hidden;
2868
- }
2869
- .ui-color-basic-r {
2870
- margin-left: 25px;
2871
- overflow: hidden;
2872
- display: flex;
2873
- flex-direction: column;
2874
- height: 150px;
2875
- flex-wrap: wrap;
2876
- }
2877
- .ui-color-basic-r .ui-color-lump {
2878
- float: left;
2879
- }
2880
- .ui-color-more {
2881
- display: none;
2882
- height: 150px;
2883
- }
2884
- .ui-color-more .ui-color-gradient {
2885
- width: 100%;
2886
- height: 100%;
2887
- }
2888
- .ui-color-more-l {
2889
- width: 180px;
2890
- height: inherit;
2891
- float: left;
2892
- position: relative;
2893
- }
2894
- .ui-color-more-l .ui-color-gradient {
2895
- background: linear-gradient(90deg, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%);
2896
- }
2897
- .ui-color-cover-white {
2898
- background-color: rgba(0, 0, 0, 0);
2899
- background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #808080);
2900
- cursor: crosshair;
2901
- }
2902
- .ui-color-circle {
2903
- position: absolute;
2904
- left: 0;
2905
- top: 0;
2906
- width: 16px;
2907
- height: 16px;
2908
- border: 3px solid var(--ui-white, #ffffff);
2909
- border-radius: 20px;
2910
- background-color: red;
2911
- background-clip: content-box;
2912
- transform: translate(-11px, -11px);
2913
- pointer-events: none;
2914
- }
2915
- .ui-color-more-r {
2916
- height: inherit;
2917
- float: right;
2918
- padding-right: 8px;
2919
- position: relative;
2920
- }
2921
- .ui-color-more-fill {
2922
- display: block;
2923
- width: 16px;
2924
- height: 100%;
2925
- background-color: red;
2926
- }
2927
- .ui-color-cover-white,
2928
- .ui-color-more-cover {
2929
- position: absolute;
2930
- left: 0;
2931
- top: 0;
2932
- width: inherit;
2933
- height: 150px;
2934
- }
2935
- .ui-color-more-cover {
2936
- background-color: rgba(0, 0, 0, 0.01);
2937
- -webkit-tap-highlight-color: transparent;
2938
- }
2939
- .ui-color-more-arrow {
2940
- position: absolute;
2941
- right: 0;
2942
- top: 100%;
2943
- }
2944
- .ui-color-more-arrow:before {
2945
- content: '';
2946
- position: absolute;
2947
- right: 0;
2948
- top: -5px;
2949
- width: 0;
2950
- height: 0;
2951
- border-width: 5px 6px;
2952
- border-style: solid;
2953
- border-color: transparent;
2954
- border-right-color: #36383f;
2955
- overflow: hidden;
2956
- }
2957
- .ui-color-opacity {
2958
- margin-top: 12px;
2959
- text-align: center;
2960
- }
2961
- .ui-color-opacity-range {
2962
- width: 180px;
2963
- }
2964
- .ui-color-footer {
2965
- margin-top: 15px;
2966
- padding-bottom: 5px;
2967
- text-align: right;
2968
- }
2969
- .ui-color-button-cancel,
2970
- .ui-color-button-ensure {
2971
- display: inline-block;
2972
- width: 80px;
2973
- line-height: 20px;
2974
- padding-top: 8px;
2975
- padding-bottom: 8px;
2976
- margin-left: 15px;
2977
- border-radius: var(--ui-radius, 4px);
2978
- text-align: center;
2979
- font-size: var(--ui-font, 14px);
2980
- font-family: inherit;
2981
- transition: box-shadow var(--ui-animate-time, 0.2s), border-color var(--ui-animate-time, 0.2s);
2982
- cursor: pointer;
2983
- }
2984
- .ui-color-button-cancel {
2985
- border: 1px solid var(--ui-border, #d0d0d5);
2986
- background-color: var(--ui-white, #ffffff);
2987
- color: var(--ui-dark, #4c5161);
2988
- }
2989
- .ui-color-button-cancel:hover {
2990
- border-color: var(--ui-dark-border, #ababaf);
2991
- color: var(--ui-dark, #4c5161);
2992
- }
2993
- .ui-color-button-ensure {
2994
- border: 1px solid var(--ui-blue, #2a80eb);
2995
- background-color: var(--ui-blue, #2a80eb);
2996
- color: var(--ui-white, #ffffff);
2997
- }
2998
- .ui-color-button-ensure:hover {
2999
- color: var(--ui-white, #ffffff);
3000
- }
3001
- .ui-color-button-cancel:hover,
3002
- .ui-color-button-ensure:hover {
3003
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.01), inset 0 0 0 100px rgba(0, 0, 0, 0.05);
3004
- }
3005
- .ui-color-button-cancel:active,
3006
- .ui-color-button-ensure:active {
3007
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 0 0 100px rgba(0, 0, 0, 0.1);
3008
- }
3009
- @media (prefers-reduced-motion: reduce) {
3010
- .ui-color-container {
3011
- animation: none;
3012
- }
3013
- .ui-color-switch,
3014
- .ui-color-button-cancel,
3015
- .ui-color-button-ensure {
3016
- transition: none;
3017
- }
3018
- }
3019
- datalist {
3020
- display: none;
3021
- }
3022
- .ui-datalist {
3023
- display: none;
3024
- position: absolute;
3025
- animation: fadeIn var(--ui-animate-time, 0.2s);
3026
- z-index: 19;
3027
- }
3028
- .ui-datalist-datalist {
3029
- max-height: 304px;
3030
- background-color: var(--ui-white, #ffffff);
3031
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
3032
- margin: 0;
3033
- padding: 0;
3034
- list-style: none;
3035
- border: 1px solid var(--ui-border, #d0d0d5);
3036
- border: 0 rgba(0, 0, 0, 0.2);
3037
- font-size: var(--ui-font, 14px);
3038
- position: relative;
3039
- overflow: auto;
3040
- overscroll-behavior: none;
3041
- -ms-scroll-chaining: none;
3042
- }
3043
- .ui-datalist-datalist::-webkit-scrollbar {
3044
- width: 8px;
3045
- height: 8px;
3046
- }
3047
- .ui-datalist-datalist::-webkit-scrollbar-thumb {
3048
- background-color: #bbb;
3049
- border-radius: calc(var(--ui-radius, 4px) + 4px);
3050
- }
3051
- .ui-datalist-datalist::-webkit-scrollbar-thumb:hover {
3052
- background-color: #aaa;
3053
- }
3054
- .ui-datalist-datalist::-webkit-scrollbar-track-piece {
3055
- background-color: #ddd;
3056
- }
3057
- .ui-datalist-option {
3058
- line-height: 20px;
3059
- padding: 9px 12px;
3060
- background-color: var(--ui-white, #ffffff);
3061
- transition: background-color var(--ui-animate-time, 0.2s);
3062
- overflow: hidden;
3063
- cursor: pointer;
3064
- }
3065
- .ui-datalist:empty,
3066
- .ui-datalist-option:empty {
3067
- display: none;
3068
- }
3069
- .ui-datalist-option:not(.disabled):hover {
3070
- background-color: var(--ui-list-hover, #f0f7ff);
3071
- }
3072
- .ui-datalist-datalist > .selected {
3073
- background-color: var(--ui-list-selected, #e0f0ff);
3074
- }
3075
- .ui-datalist-datalist > .disabled {
3076
- opacity: var(--ui-opacity, 0.4);
3077
- cursor: default;
3078
- -webkit-user-select: none;
3079
- -moz-user-select: none;
3080
- user-select: none;
3081
- }
3082
- .ui-datalist-value {
3083
- display: block;
3084
- text-overflow: ellipsis;
3085
- white-space: nowrap;
3086
- color: inherit;
3087
- overflow: hidden;
3088
- }
3089
- .ui-datalist-label {
3090
- float: right;
3091
- color: var(--ui-gray, #a2a9b6);
3092
- font-size: calc(var(--ui-font, 14px) - 2px);
3093
- }
3094
- .ui-datalist-label + .ui-datalist-value {
3095
- margin-right: 60px;
3096
- }
3097
- @media (prefers-reduced-motion: reduce) {
3098
- .ui-datalist {
3099
- animation: none;
3100
- }
3101
- .ui-datalist-option {
3102
- transition: none;
3103
- }
3104
- }
3105
- [is='ui-datetime']::-webkit-clear-button,
3106
- [is='ui-datetime']::-webkit-inner-spin-button,
3107
- [is='ui-datetime']::-webkit-calendar-picker-indicator {
3108
- display: none;
3109
- }
3110
- [type='date'][is='ui-datetime']::-webkit-datetime-edit-text {
3111
- color: transparent;
3112
- background: linear-gradient(to bottom, transparent 9px, var(--ui-dark, #4c5161) 9px, var(--ui-dark, #4c5161) 10px, transparent 10px) no-repeat center;
3113
- background-size: 80% 100%;
3114
- }
3115
- [is='ui-datetime']::-webkit-datetime-edit-text,
3116
- [is='ui-datetime']::-webkit-datetime-edit-year-field,
3117
- [is='ui-datetime']::-webkit-datetime-edit-month-field,
3118
- [is='ui-datetime']::-webkit-datetime-edit-day-field,
3119
- [is='ui-datetime']::-webkit-datetime-edit-hour-field,
3120
- [is='ui-datetime']:disabled::-webkit-datetime-edit-text,
3121
- [is='ui-datetime']:disabled::-webkit-datetime-edit-year-field,
3122
- [is='ui-datetime']:disabled::-webkit-datetime-edit-month-field,
3123
- [is='ui-datetime']:disabled::-webkit-datetime-edit-day-field,
3124
- [is='ui-datetime']:disabled::-webkit-datetime-edit-hour-field,
3125
- [is='ui-datetime'] {
3126
- font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
3127
- height: var(--ui-input-height);
3128
- line-height: var(--ui-input-line-height);
3129
- padding: calc((var(--ui-input-height) - var(--ui-input-line-height) - 2px) / 2) 8px;
3130
- padding-right: 20px;
3131
- border: 1px solid var(--ui-border, #d0d0d5);
3132
- border-radius: var(--ui-radius, 4px);
3133
- box-sizing: border-box;
3134
- font-size: var(--ui-font, 14px);
3135
- outline: none;
3136
- color: var(--ui-dark, #4c5161);
3137
- transition: border-color var(--ui-animate-time, 0.2s), background-color var(--ui-animate-time, 0.2s);
3138
- -webkit-tap-highlight-color: transparent;
3139
- -webkit-appearance: none;
3140
- background: var(--ui-white, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 297 200 200'%3E%3Cpath d='M-59.3 365.9c-5.1-5.2-13.4-5.2-18.5 0l-27.7 28.3-27.7-28.3c-5.1-5.2-13.4-5.2-18.5 0s-5.1 13.6 0 18.9l46.2 47.1 46.2-47.1c5.1-5.2 5.1-13.6 0-18.9z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat right 3px center;
3141
- background-size: 20px 20px;
3142
- -webkit-user-select: none;
3143
- -moz-user-select: none;
3144
- user-select: none;
3145
- cursor: pointer;
3146
- }
3147
- [is='ui-datetime']:-moz-read-write {
3148
- box-shadow: none;
3149
- color: transparent;
3150
- }
3151
- [is='ui-datetime']:read-write {
3152
- box-shadow: none;
3153
- color: transparent;
3154
- }
3155
- :disabled[is='ui-datetime'] {
3156
- color: var(--ui-gray, #a2a9b6);
3157
- background: var(--ui-light, #f7f9fa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 297 200 200'%3E%3Cpath d='M-59.3 365.9c-5.1-5.2-13.4-5.2-18.5 0l-27.7 28.3-27.7-28.3c-5.1-5.2-13.4-5.2-18.5 0s-5.1 13.6 0 18.9l46.2 47.1 46.2-47.1c5.1-5.2 5.1-13.6 0-18.9z' fill='%232a80eb' fill-opacity='0.4' /%3E%3C/svg%3E") no-repeat right 3px center;
3158
- background-size: 20px 20px;
3159
- cursor: default;
3160
- }
3161
- :active[is='ui-datetime'] {
3162
- background-color: var(--ui-light, #f7f9fa);
3163
- }
3164
- [is-error][is='ui-datetime'] {
3165
- border-color: var(--ui-red, #eb4646);
3166
- }
3167
- [is='ui-datetime']:not(:disabled):hover {
3168
- border-color: var(--ui-dark-border, #ababaf);
3169
- }
3170
- [is='ui-datetime']:not(:disabled):active {
3171
- background-color: var(--ui-light, #f7f9fa);
3172
- }
3173
- [is='ui-datetime']:not([type]) {
3174
- width: 125px;
3175
- }
3176
- [is='ui-datetime'][type='date'] {
3177
- min-width: 125px;
3178
- }
3179
- [is='ui-datetime'][type='year'],
3180
- [is='ui-datetime'][type='time'],
3181
- [is='ui-datetime'][type='hour'],
3182
- [is='ui-datetime'][type='minute'] {
3183
- width: 85px;
3184
- }
3185
- [is='ui-datetime'][type='month'] {
3186
- width: 125px;
3187
- }
3188
- [is='ui-datetime'][type='date-range'] {
3189
- width: 210px;
3190
- }
3191
- [is='ui-datetime'][type='month-range'] {
3192
- width: 170px;
3193
- }
3194
- [is='ui-datetime'][type='time'] {
3195
- width: auto;
3196
- }
3197
- @supports not ((-moz-text-align-last: auto) or (text-align-last: auto)) {
3198
- [is='ui-datetime'][type='time'] {
3199
- max-width: 125px;
3200
- }
3201
- }
3202
- @supports not (-moz-appearance: none) {
3203
- [is='ui-datetime'][type='time'] {
3204
- padding-right: 33px;
3205
- }
3206
- }
3207
- .ui-date-container {
3208
- display: inline-block;
3209
- background-color: var(--ui-white, #ffffff);
3210
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
3211
- border: 1px solid var(--ui-border, #d0d0d5);
3212
- border-radius: var(--ui-radius, 4px);
3213
- font-size: var(--ui-font, 14px);
3214
- font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
3215
- animation: fadeIn var(--ui-animate-time, 0.2s);
3216
- --safe-area: 3px;
3217
- -webkit-user-select: none;
3218
- -moz-user-select: none;
3219
- user-select: none;
3220
- }
3221
- body > .ui-date-container {
3222
- display: none;
3223
- position: absolute;
3224
- z-index: 9;
3225
- }
3226
- .ui-date-container a {
3227
- text-decoration: none;
3228
- transition: background-color var(--ui-animate-time, 0.2s), color var(--ui-animate-time, 0.2s);
3229
- }
3230
- .ui-date-head {
3231
- padding: 5px 0 0;
3232
- overflow: hidden;
3233
- }
3234
- .ui-date-half {
3235
- width: 50%;
3236
- float: left;
3237
- }
3238
- .ui-date-prev,
3239
- .ui-date-next {
3240
- width: 35px;
3241
- height: 30px;
3242
- text-align: center;
3243
- color: #b6bbc6;
3244
- }
3245
- a.ui-date-prev:hover {
3246
- color: var(--ui-blue, #2a80eb);
3247
- }
3248
- span.ui-date-prev {
3249
- color: var(--ui-diabled, #ccd0d7);
3250
- }
3251
- a.ui-date-next:hover {
3252
- color: var(--ui-blue, #2a80eb);
3253
- }
3254
- span.ui-date-next {
3255
- color: var(--ui-diabled, #ccd0d7);
3256
- }
3257
- .ui-date-prev:before,
3258
- .ui-date-next:before {
3259
- content: '';
3260
- display: block;
3261
- width: 20px;
3262
- height: 20px;
3263
- background-color: currentColor;
3264
- margin: 5px auto 0;
3265
- --mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M85.876 100.5l49.537-50.526c4.089-4.215 4.089-11.049 0-15.262-4.089-4.218-10.719-4.218-14.808 0L63.586 92.868c-4.089 4.215-4.089 11.049 0 15.264l57.018 58.156c4.089 4.215 10.719 4.215 14.808 0s4.089-11.049 0-15.262L85.876 100.5z'/%3E%3C/svg%3E");
3266
- -webkit-mask: var(--mask-image);
3267
- mask: var(--mask-image);
3268
- -webkit-mask-size: 100% 100%;
3269
- mask-size: 100% 100%;
3270
- }
3271
- .ui-date-next:before {
3272
- transform: rotate(180deg);
3273
- }
3274
- .ui-date-prev {
3275
- float: left;
3276
- }
3277
- .ui-date-next {
3278
- float: right;
3279
- }
3280
- .ui-date-switch {
3281
- display: block;
3282
- line-height: 30px;
3283
- margin: 0 35px;
3284
- border-radius: calc(var(--ui-radius, 4px) - 2px);
3285
- color: var(--ui-dark, #4c5161);
3286
- text-align: center;
3287
- }
3288
- a.ui-date-switch:hover,
3289
- a.ui-date-item:not(.selected):hover {
3290
- color: var(--ui-dark, #4c5161);
3291
- background-color: #f0f0f2;
3292
- }
3293
- .ui-minute-x,
3294
- .ui-hour-x,
3295
- .ui-year-x,
3296
- .ui-month-x,
3297
- .ui-date-x {
3298
- width: 225px;
3299
- }
3300
- .ui-minute-x[data-step='1'] {
3301
- width: 328px;
3302
- }
3303
- .ui-minute-x[data-step='2'] {
3304
- width: 276px;
3305
- }
3306
- .ui-minute-body {
3307
- padding-left: 12px;
3308
- padding-bottom: 12px;
3309
- }
3310
- .ui-hour-body {
3311
- padding: 8px 0 12px 12px;
3312
- }
3313
- .ui-year-body,
3314
- .ui-month-body,
3315
- .ui-date-body {
3316
- padding-left: 5px;
3317
- padding-right: 2px;
3318
- padding-bottom: 5px;
3319
- }
3320
- .ui-date-item {
3321
- display: inline-block;
3322
- border-radius: calc(var(--ui-radius, 4px) - 2px);
3323
- text-align: center;
3324
- font-size: 13px;
3325
- color: var(--ui-dark, #4c5161);
3326
- }
3327
- span.ui-date-item {
3328
- opacity: var(--ui-opacity, 0.4);
3329
- }
3330
- .ui-date-item.col0,
3331
- .ui-date-item.col6,
3332
- .ui-day-item.col0,
3333
- .ui-day-item.col6 {
3334
- color: var(--ui-red, #eb4646);
3335
- }
3336
- .ui-date-tr:last-child .ui-date-item:empty {
3337
- display: none;
3338
- }
3339
- .ui-minute-body .ui-date-item,
3340
- .ui-hour-body .ui-date-item {
3341
- width: 45px;
3342
- line-height: 26px;
3343
- margin-top: 4px;
3344
- margin-right: 7px;
3345
- }
3346
- .ui-year-body .ui-date-item,
3347
- .ui-month-body .ui-date-item {
3348
- width: 45px;
3349
- line-height: 54px;
3350
- margin-top: 5px;
3351
- margin-left: 7px;
3352
- }
3353
- .ui-date-now {
3354
- display: block;
3355
- line-height: 30px;
3356
- margin: 0 5px 5px;
3357
- text-align: center;
3358
- }
3359
- .ui-day-x {
3360
- padding: 0 2px 0 5px;
3361
- text-align: center;
3362
- }
3363
- .ui-day-item,
3364
- .ui-date-body .ui-date-item {
3365
- display: inline-block;
3366
- width: 28px;
3367
- line-height: 28px;
3368
- margin-right: 3px;
3369
- margin-top: 1px;
3370
- vertical-align: top;
3371
- }
3372
- .ui-range-x {
3373
- width: 458px;
3374
- }
3375
- .ui-range-body {
3376
- overflow: hidden;
3377
- }
3378
- .ui-range-body .ui-date-half + .ui-date-half {
3379
- border-left: 1px solid #f0f0f2;
3380
- margin-left: -1px;
3381
- }
3382
- .ui-range-footer {
3383
- padding: 5px 15px 15px;
3384
- text-align: right;
3385
- }
3386
- .ui-range-footer > .ui-button {
3387
- margin-left: 10px;
3388
- }
3389
- .ui-date-container .selected {
3390
- background-color: var(--ui-blue, #2a80eb);
3391
- color: var(--ui-white, #ffffff);
3392
- cursor: default;
3393
- }
3394
- .ui-date-container span.selected {
3395
- opacity: var(--ui-opacity, 0.4);
3396
- }
3397
- .ui-range-body .ui-date-half {
3398
- width: 229px;
3399
- }
3400
- .ui-range-body .ui-date-body {
3401
- padding-left: 6px;
3402
- padding-right: 0;
3403
- }
3404
- .ui-range-body .ui-month-body {
3405
- margin-bottom: 15px;
3406
- }
3407
- .ui-range-date-body .selected {
3408
- width: 26px;
3409
- line-height: 26px;
3410
- border: 1px solid var(--ui-blue, #2a80eb);
3411
- border-right-width: 4px;
3412
- margin-right: 0;
3413
- border-radius: 0;
3414
- }
3415
- .ui-range-body .selected.col0 {
3416
- margin-left: -6px;
3417
- border-left-width: 7px;
3418
- }
3419
- .ui-range-body .selected.col6 {
3420
- border-right-width: 10px;
3421
- }
3422
- .ui-range-body .selected.ui-date-first:not(.col0) {
3423
- border-top-left-radius: 2px;
3424
- border-bottom-left-radius: 2px;
3425
- }
3426
- .ui-range-body .selected.ui-date-last:not(.col6) {
3427
- border-top-right-radius: 2px;
3428
- border-bottom-right-radius: 2px;
3429
- }
3430
- .ui-range-body .ui-date-begin,
3431
- .ui-range-body .ui-date-end {
3432
- border-radius: 0;
3433
- width: 26px;
3434
- background-color: var(--ui-white, #ffffff);
3435
- color: var(--ui-dark, #4c5161);
3436
- }
3437
- .ui-range-body .ui-date-begin {
3438
- border-right-width: 4px;
3439
- border-left-width: 1px;
3440
- border-top-left-radius: 2px;
3441
- border-bottom-left-radius: 2px;
3442
- }
3443
- .ui-range-body .ui-date-end {
3444
- margin-right: 3px;
3445
- border-right-width: 1px;
3446
- border-top-right-radius: 2px;
3447
- border-bottom-right-radius: 2px;
3448
- }
3449
- .ui-range-body .ui-date-begin:hover,
3450
- .ui-range-body .ui-date-end:hover {
3451
- background-color: var(--ui-white, #ffffff);
3452
- color: var(--ui-dark, #4c5161);
3453
- }
3454
- .ui-range-body .ui-date-begin.col6 {
3455
- border-right-width: 0;
3456
- padding-right: 9px;
3457
- }
3458
- .ui-range-body .ui-date-begin.col0 {
3459
- border-left-width: 1px;
3460
- margin-left: 0;
3461
- }
3462
- .ui-range-body .ui-date-end.col0 {
3463
- border-left-width: 0;
3464
- padding-left: 7px;
3465
- }
3466
- .ui-range-body .ui-date-end.col6 {
3467
- border-right-width: 1px;
3468
- }
3469
- .ui-range-body .ui-date-begin.ui-date-end {
3470
- margin-right: 3px;
3471
- padding: 0;
3472
- border: 1px solid var(--ui-blue, #2a80eb);
3473
- border-radius: calc(var(--ui-radius, 4px) - 2px);
3474
- }
3475
- .ui-range-body .ui-date-begin + .ui-date-end {
3476
- border-left-width: 1px;
3477
- margin-right: 3px;
3478
- }
3479
- .ui-time-x {
3480
- display: inline-flex;
3481
- gap: 5px;
3482
- padding: 5px;
3483
- }
3484
- .ui-time-col {
3485
- height: 290px;
3486
- overflow: auto;
3487
- scrollbar-width: none;
3488
- overscroll-behavior: contain;
3489
- }
3490
- .ui-time-col::-webkit-scrollbar {
3491
- display: none;
3492
- }
3493
- .ui-time-item {
3494
- display: block;
3495
- border: 0;
3496
- background-color: var(--ui-white, #fff);
3497
- padding: 0 1em;
3498
- height: var(--ui-component-height, 40px);
3499
- color: var(--ui-dark, #4c5161);
3500
- }
3501
- .ui-time-item:disabled {
3502
- opacity: var(--ui-opacity, 0.4);
3503
- }
3504
- .ui-time-item:not(:disabled):not(.selected):hover {
3505
- background-color: var(--ui-list-hover, #f0f7ff);
3506
- }
3507
- .ui-time-item[data-visibility='false'] {
3508
- display: none;
3509
- }
3510
- @media (prefers-reduced-motion: reduce) {
3511
- .ui-date-container {
3512
- animation: none;
3513
- }
3514
- [is='ui-datetime'],
3515
- .ui-date-container a {
3516
- transition: none;
3517
- }
3518
- }
3519
- :root {
3520
- --ui-url-close: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M594.698 511.995l186.788-186.808a37.693 37.693 0 0 0 0-53.35l-26.7-26.702c-14.7-14.75-38.6-14.75-53.351 0L514.637 431.933 327.839 245.13a37.755 37.755 0 0 0-53.402 0l-26.65 26.701a37.693 37.693 0 0 0 0 53.35L434.576 511.99 247.788 698.778a37.755 37.755 0 0 0 0 53.401l26.65 26.701a37.847 37.847 0 0 0 53.4 0l186.799-186.819L701.44 778.885c14.75 14.7 38.65 14.7 53.35 0l26.701-26.7a37.755 37.755 0 0 0 0-53.402L594.698 511.995z' fill='%23bbb'/%3E%3C/svg%3E");
3521
- --ui-dialog-icon-url: url("data:image/svg+xml,%3Csvg width='401' height='401' viewBox='0 0 401 401' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M200.501.5C310.958.5 400.5 90.042 400.5 200.5c0 110.457-89.542 199.999-199.999 199.999C90.043 400.499.5 310.957.5 200.5.5 90.042 90.043.5 200.501.5zm5.002 280.002h-10a5 5 0 0 0-5 4.999v20.002a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5v-20.002a5 5 0 0 0-5-4.999zm0-179.999h-10a5 5 0 0 0-5 5v150a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5v-150a5 5 0 0 0-5-5z' fill='%23F59B00' fill-rule='nonzero'/%3E%3C/svg%3E");
3522
- --ui-dialog-success-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cpath fill='%231cad70' d='M400.5 200.5c0 110.457-89.542 199.999-199.999 199.999C90.043 400.499.5 310.957.5 200.5m0 0C.5 90.042 90.043.5 200.501.5 310.958.5 400.5 90.042 400.5 200.5'/%3E%3Cpath fill='%23FFF' d='M286.398 147.132c-1.654-1.134-3.306-2.395-6.801-4.293-4.271-2.336-9.259 2.624-12.391 6.816l-77.641 102.279-47.916-63.522c-3.144-4.188-4.902-8.468-13.073-1.859-3.097 2.123.234-.361-3.969 2.881-3.884 3.064-4.105 8.598-.971 12.774 0 0 38.641 55.817 45.883 65.074 10.625 13.22 29.944 12.57 40.087 0 7.483-9.473 77.757-107.584 77.757-107.584 3.14-4.194 2.898-9.697-.965-12.566z'/%3E%3C/svg%3E");
3523
- }
3524
- [is='ui-dialog'] {
3525
- position: fixed;
3526
- left: 0;
3527
- top: 0;
3528
- height: 100%;
3529
- width: 100%;
3530
- padding: 0;
3531
- border: 0;
3532
- background-color: rgba(25, 28, 34, 0.88);
3533
- color: var(--ui-dark, #4c5161);
3534
- font-size: var(--ui-font, 14px);
3535
- overflow: auto;
3536
- z-index: 19;
3537
- display: grid;
3538
- place-items: center;
3539
- }
3540
- [is='ui-dialog']:not([open]) {
3541
- display: none;
3542
- }
3543
- .ui-dialog-animation {
3544
- animation: fadeIn var(--ui-animate-time, 0.2s) both;
3545
- }
3546
- [is='ui-dialog'] + [is='ui-dialog'] {
3547
- transition: background-color var(--ui-animate-time, 0.2s);
3548
- background-color: transparent;
3549
- }
3550
- .ui-dialog {
3551
- display: flex;
3552
- flex-direction: column;
3553
- min-width: 400px;
3554
- max-width: calc(100vw - 16px);
3555
- border-radius: var(--ui-radius, 4px);
3556
- background-color: var(--ui-light, #f7f9fa);
3557
- outline: none;
3558
- position: relative;
3559
- }
3560
- .ui-dialog[style^='width:'],
3561
- .ui-dialog[style*=' width:'] {
3562
- min-width: initial;
3563
- }
3564
- .ui-dialog-animation .ui-dialog {
3565
- animation: tinydown var(--ui-animate-time, 0.2s);
3566
- }
3567
- .ui-dialog-title {
3568
- margin: 0;
3569
- line-height: 30px;
3570
- padding: 15px 50px 0 25px;
3571
- font-weight: 700;
3572
- font-size: var(--ui-font, 14px);
3573
- color: var(--ui-dark, #4c5161);
3574
- -webkit-user-select: none;
3575
- -moz-user-select: none;
3576
- user-select: none;
3577
- cursor: default;
3578
- }
3579
- .ui-dialog-close {
3580
- position: absolute;
3581
- top: 8px;
3582
- right: 7px;
3583
- width: 40px;
3584
- height: 40px;
3585
- border: 0;
3586
- background: none;
3587
- font-size: 0;
3588
- cursor: pointer;
3589
- z-index: 1;
3590
- }
3591
- .ui-dialog-close:before {
3592
- content: '';
3593
- position: absolute;
3594
- left: 0;
3595
- top: 0;
3596
- width: inherit;
3597
- height: inherit;
3598
- background-color: var(--ui-gray, #a2a9b6);
3599
- transition: background-color var(--ui-animate-time, 0.2s);
3600
- -webkit-mask: var(--ui-url-close) no-repeat center / 24px;
3601
- mask: var(--ui-url-close) no-repeat center / 24px;
3602
- }
3603
- .ui-dialog-close:hover:before {
3604
- background-color: var(--ui-dark, #4c5161);
3605
- }
3606
- .ui-dialog-body {
3607
- display: flow-root;
3608
- min-height: 60px;
3609
- padding: 10px 25px 20px;
3610
- }
3611
- .ui-dialog-title:empty ~ .ui-dialog-body {
3612
- min-height: 40px;
3613
- padding-top: 30px;
3614
- }
3615
- @supports not (display: flow-root) {
3616
- .ui-dialog-body:after {
3617
- content: '';
3618
- display: table;
3619
- clear: both;
3620
- }
3621
- }
3622
- .ui-dialog-footer {
3623
- padding: 3px 25px 25px;
3624
- margin-top: auto;
3625
- text-align: right;
3626
- max-height: 40px;
3627
- opacity: 1;
3628
- transition: max-height var(--ui-animate-time, 0.2s), opacity var(--ui-animate-time, 0.2s) var(--ui-animate-time, 0.2s);
3629
- overflow: hidden;
3630
- }
3631
- .ui-dialog-footer:empty {
3632
- max-height: 0;
3633
- opacity: 0;
3634
- }
3635
- .ui-dialog-footer .ui-button {
3636
- margin-left: 15px;
3637
- }
3638
- .ui-dialog-footer .ui-button:first-child {
3639
- margin-left: 0;
3640
- }
3641
- .ui-dialog-stretch {
3642
- max-height: 2000px;
3643
- height: calc(100% - 50px);
3644
- }
3645
- .ui-dialog-stretch .ui-dialog-footer {
3646
- position: absolute;
3647
- left: 0;
3648
- bottom: 0;
3649
- right: 0;
3650
- }
3651
- .ui-dialog-stretch .ui-dialog-body {
3652
- position: absolute;
3653
- left: 0;
3654
- right: 0;
3655
- top: 50px;
3656
- bottom: 90px;
3657
- padding: 0 0 0 25px;
3658
- overflow: auto;
3659
- }
3660
- .ui-dialog-confirm:before,
3661
- .ui-dialog-alert:before {
3662
- content: '';
3663
- position: absolute;
3664
- width: 40px;
3665
- height: 40px;
3666
- top: 0;
3667
- left: 0;
3668
- background-size: contain;
3669
- background-repeat: no-repeat;
3670
- background-position: 50% 50%;
3671
- }
3672
- .ui-dialog-success:before {
3673
- background-image: var(--ui-dialog-success-url), none;
3674
- }
3675
- .ui-dialog-warning:before,
3676
- .ui-dialog-danger:before,
3677
- .ui-dialog-remind:before {
3678
- -webkit-mask-image: var(--ui-dialog-icon-url);
3679
- mask-image: var(--ui-dialog-icon-url);
3680
- -webkit-mask-repeat: no-repeat;
3681
- mask-repeat: no-repeat;
3682
- -webkit-mask-position: 50% 50%;
3683
- mask-position: 50% 50%;
3684
- -webkit-mask-size: 40px;
3685
- mask-size: 40px;
3686
- }
3687
- .ui-dialog-remind:before {
3688
- background-color: var(--ui-blue, #2a80eb);
3689
- }
3690
- .ui-dialog-warning:before {
3691
- background-color: var(--ui-orange, #f59b00);
3692
- }
3693
- .ui-dialog-danger:before {
3694
- background-color: var(--ui-red, #eb4646);
3695
- }
3696
- .ui-dialog-alert,
3697
- .ui-dialog-confirm {
3698
- max-width: 340px;
3699
- min-height: 40px;
3700
- font-size: calc(var(--ui-font, 14px) + 2px);
3701
- word-wrap: break-word;
3702
- overflow: hidden;
3703
- position: relative;
3704
- }
3705
- .ui-dialog-wrap > h6 {
3706
- font-size: calc(var(--ui-font, 14px) + 1px);
3707
- margin-bottom: 5px;
3708
- margin-top: 0;
3709
- }
3710
- .ui-dialog-wrap > h6 ~ p {
3711
- font-size: var(--ui-font, 14px);
3712
- }
3713
- .ui-dialog-wrap > p {
3714
- margin: 0;
3715
- }
3716
- .ui-dialog-remind,
3717
- .ui-dialog-success,
3718
- .ui-dialog-warning,
3719
- .ui-dialog-danger {
3720
- display: flex;
3721
- flex-direction: column;
3722
- justify-content: center;
3723
- margin-bottom: 20px;
3724
- padding: 0 0 0 60px;
3725
- background-repeat: no-repeat;
3726
- background-position: 0 0;
3727
- background-size: 40px 40px;
3728
- }
3729
- .ui-dialog-loading .ui-dialog-title,
3730
- .ui-dialog-loading .ui-dialog-close,
3731
- .ui-dialog-loading .ui-dialog-footer {
3732
- visibility: hidden;
3733
- }
3734
- @media (pointer: coarse) {
3735
- .ui-dialog-footer {
3736
- display: flex;
3737
- }
3738
- .ui-dialog-footer .ui-button {
3739
- flex: 1;
3740
- }
3741
- }
3742
- @media (prefers-reduced-motion: reduce) {
3743
- .ui-dialog-animation,
3744
- .ui-dialog-animation .ui-dialog {
3745
- animation: none;
3746
- }
3747
- [is='ui-dialog'] + [is='ui-dialog'],
3748
- .ui-dialog-close:before,
3749
- .ui-dialog-footer {
3750
- transition: none;
3751
- }
3752
- }
3753
- ui-drop[tabindex='0'] {
3754
- cursor: pointer;
3755
- }
3756
- ui-drop ~ .ui-drop-target {
3757
- position: absolute;
3758
- z-index: 9;
3759
- }
3760
- ui-drop:not([open]) ~ .ui-drop-target {
3761
- display: none;
3762
- }
3763
- .ui-droplist-x {
3764
- position: absolute;
3765
- width: 111px;
3766
- padding: 7px 0;
3767
- background-color: var(--ui-white, #ffffff);
3768
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
3769
- --safe-area: 3px;
3770
- border: 1px solid var(--ui-border, #d0d0d5);
3771
- border-radius: var(--ui-radius, 4px);
3772
- font-size: var(--ui-font, 14px);
3773
- animation: fadeIn var(--ui-animate-time, 0.2s);
3774
- z-index: 9;
3775
- }
3776
- .ui-droplist-li {
3777
- display: block;
3778
- line-height: 20px;
3779
- padding: 7px 12px 8px;
3780
- color: var(--ui-dark, #4c5161);
3781
- text-decoration: none;
3782
- cursor: pointer;
3783
- white-space: nowrap;
3784
- text-overflow: ellipsis;
3785
- overflow: hidden;
3786
- }
3787
- .ui-droplist-hr {
3788
- border: 0;
3789
- border-bottom: 1px solid var(--ui-border, #d0d0d5);
3790
- margin: 7px 12px;
3791
- opacity: 0.4;
3792
- }
3793
- .ui-droplist-hr:first-child {
3794
- display: none;
3795
- }
3796
- a.ui-droplist-li:hover {
3797
- color: var(--ui-dark, #4c5161);
3798
- background-color: var(--ui-list-hover, #f0f7ff);
3799
- }
3800
- a.ui-droplist-li:hover:after {
3801
- background-position: 0 -20px;
3802
- }
3803
- span.ui-droplist-li {
3804
- color: var(--ui-gray, #a2a9b6);
3805
- cursor: default;
3806
- }
3807
- .ui-droplist-li[role='heading'] {
3808
- font-weight: 700;
3809
- padding-bottom: 5px;
3810
- cursor: default;
3811
- }
3812
- [role='heading'] ~ .ui-droplist-li:not([role='heading']) {
3813
- padding-left: 24px;
3814
- }
3815
- .ui-droplist-li.disabled {
3816
- opacity: var(--ui-opacity, 0.4);
3817
- }
3818
- .ui-droplist-li[data-sublist]:before {
3819
- transform: rotate(-90deg);
3820
- margin-top: 1px;
3821
- float: right;
3822
- }
3823
- .ui-droplist-x > .selected {
3824
- background-color: var(--ui-list-selected, #e0f0ff);
3825
- }
3826
- .selected + .ui-droplist-xx > .ui-droplist-x {
3827
- display: block;
3828
- }
3829
- .ui-droplist-xx {
3830
- position: relative;
3831
- }
3832
- .ui-droplist-xx > .ui-droplist-x {
3833
- display: none;
3834
- left: calc(100% - 5px);
3835
- top: -35px;
3836
- }
3837
- .ui-droplist-xx > .reverse {
3838
- left: auto;
3839
- right: calc(100% - 5px);
3840
- }
3841
- .ui-droplist-arrow:empty,
3842
- .ui-droplist-arrow:not(:empty):after,
3843
- .ui-droplist-li[data-sublist]:before {
3844
- content: '';
3845
- display: inline-block;
3846
- width: 20px;
3847
- height: 20px;
3848
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 197 200 400'%3E%3Cpath d='M-59.7 271.6c-4.2-4.1-11-4.1-15.3 0l-30.5 29.6-30.5-29.6c-4.2-4.1-11-4.1-15.3 0-4.2 4.1-4.2 10.7 0 14.8l38.2 37c4.2 4.1 11 4.1 15.3 0l38.2-37c4.1-4.1 4.1-10.7-.1-14.8z' fill='%23a2a9b6'/%3E%3Cpath d='M-58.7 471.6c-4.2-4.1-11-4.1-15.3 0l-30.5 29.6-30.5-29.6c-4.2-4.1-11-4.1-15.3 0-4.2 4.1-4.2 10.7 0 14.8l38.2 37c4.2 4.1 11 4.1 15.3 0l38.2-37c4.1-4.1 4.1-10.7-.1-14.8z' fill='%232a80eb'/%3E%3C/svg%3E"), none;
3849
- background-size: 20px 40px;
3850
- vertical-align: -5px;
3851
- }
3852
- a:hover .ui-droplist-arrow:empty,
3853
- .ui-droplist-arrow:not(:empty):hover:after {
3854
- background-position: 0 -20px;
3855
- }
3856
- .ui-dropanel-x {
3857
- position: absolute;
3858
- width: 260px;
3859
- padding: 20px;
3860
- background-color: var(--ui-white, #ffffff);
3861
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
3862
- --safe-area: 3px;
3863
- border: 1px solid var(--ui-border, #d0d0d5);
3864
- border: 0 rgba(0, 0, 0, 0.2);
3865
- font-size: var(--ui-font, 14px);
3866
- animation: fadeIn var(--ui-animate-time, 0.2s);
3867
- z-index: 9;
3868
- }
3869
- .ui-dropanel-title {
3870
- line-height: 20px;
3871
- margin-top: -2px;
3872
- margin-bottom: 0;
3873
- font-size: var(--ui-font, 14px);
3874
- font-weight: 700;
3875
- }
3876
- .ui-dropanel-close {
3877
- position: absolute;
3878
- top: 12px;
3879
- right: 12px;
3880
- width: 20px;
3881
- height: 20px;
3882
- border: 0;
3883
- padding: 0;
3884
- background: none;
3885
- cursor: pointer;
3886
- z-index: 1;
3887
- }
3888
- .ui-dropanel-close:before {
3889
- content: '';
3890
- position: absolute;
3891
- left: 0;
3892
- right: 0;
3893
- top: 0;
3894
- bottom: 0;
3895
- background: var(--ui-dark-gray, #b6bbc6);
3896
- transition: background-color var(--ui-animate-time, 0.2s);
3897
- --mask-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20%3E%3Cpath%20d%3D%22M116.152%2C99.999l36.482-36.486c2.881-2.881%2C2.881-7.54%2C0-10.42%20l-5.215-5.215c-2.871-2.881-7.539-2.881-10.42%2C0l-36.484%2C36.484L64.031%2C47.877c-2.881-2.881-7.549-2.881-10.43%2C0l-5.205%2C5.215%20c-2.881%2C2.881-2.881%2C7.54%2C0%2C10.42l36.482%2C36.486l-36.482%2C36.482c-2.881%2C2.881-2.881%2C7.549%2C0%2C10.43l5.205%2C5.215%20c2.881%2C2.871%2C7.549%2C2.871%2C10.43%2C0l36.484-36.488L137%2C152.126c2.881%2C2.871%2C7.549%2C2.871%2C10.42%2C0l5.215-5.215%20c2.881-2.881%2C2.881-7.549%2C0-10.43L116.152%2C99.999z%22%2F%3E%3C%2Fsvg%3E);
3898
- -webkit-mask: var(--mask-image) no-repeat center / 100% 100%;
3899
- mask: var(--mask-image) no-repeat center / 100% 100%;
3900
- }
3901
- .ui-dropanel-close:hover:before {
3902
- background-color: var(--ui-dark, #4c5161);
3903
- }
3904
- .ui-dropanel-content {
3905
- display: block;
3906
- min-height: 40px;
3907
- padding: 10px 0 20px;
3908
- }
3909
- .ui-dropanel-footer {
3910
- text-align: right;
3911
- }
3912
- .ui-dropanel-footer .ui-button {
3913
- margin-left: 15px;
3914
- }
3915
- .ui-dropanel-footer .ui-button:first-child {
3916
- margin-left: 0;
3917
- }
3918
- @media (prefers-reduced-motion: reduce) {
3919
- .ui-droplist-x,
3920
- .ui-dropanel-x {
3921
- animation: none;
3922
- }
3923
- .ui-dropanel-close:before {
3924
- transition: none;
3925
- }
3926
- }
3927
- :root {
3928
- --ui-input-height: var(--ui-component-height, 40px);
3929
- --ui-input-line-height: var(--ui-line-height, 20px);
3930
- --ui-input-search-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M638.72 638.72a256 256 0 1 0-361.984-361.984A256 256 0 0 0 638.72 638.72zm58.71 119.04a384 384 0 1 1 85.418-95.573l202.24 202.24a64.256 64.256 0 0 1 .597 91.136 63.744 63.744 0 0 1-91.05-.598l-197.206-197.12z' fill='%23b6bbc6'/%3E%3C/svg%3E") no-repeat;
3931
- }
3932
- [type='search'] {
3933
- -webkit-appearance: none;
3934
- }
3935
- [type='search']::-webkit-search-cancel-button {
3936
- -webkit-appearance: none;
3937
- width: 20px;
3938
- height: 20px;
3939
- margin-right: -2px;
3940
- background: var(--ui-dark-gray, #b6bbc6) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkYiIGQ9Ik0wIDB2MjAwaDIwMFYwSDB6bTE1MS42MzYgMTM2LjQ4MmE3LjM3NCA3LjM3NCAwIDAgMSAwIDEwLjQyN2wtNS4yMTIgNS4yMWE3LjM3MiA3LjM3MiAwIDAgMS0xMC40MjYgMGwtMzYuNDgzLTM2LjQ4NUw2My4wMyAxNTIuMTJhNy4zNyA3LjM3IDAgMCAxLTEwLjQyNCAwbC01LjIxLTUuMjFhNy4zNyA3LjM3IDAgMCAxIDAtMTAuNDI4TDgzLjg4IDEwMCA0Ny4zOTYgNjMuNTE0YTcuMzY4IDcuMzY4IDAgMCAxIDAtMTAuNDI1bDUuMjEtNS4yMWE3LjM2OCA3LjM2OCAwIDAgMSAxMC40MjYgMEw5OS41MTYgODQuMzYgMTM2IDQ3Ljg4YTcuMzcgNy4zNyAwIDAgMSAxMC40MjUgMGw1LjIxMiA1LjIxYTcuMzcgNy4zNyAwIDAgMSAwIDEwLjQyNUwxMTUuMTUzIDEwMGwzNi40ODMgMzYuNDgyeiIvPjwvc3ZnPg==) no-repeat center;
3941
- background-size: 20px 20px;
3942
- -webkit-transition: background-color var(--ui-animate-time, 0.2s);
3943
- transition: background-color var(--ui-animate-time, 0.2s);
3944
- cursor: pointer;
3945
- }
3946
- [type='search']::-webkit-search-cancel-button:hover {
3947
- background-color: var(--ui-dark, #4c5161);
3948
- }
3949
- input[type='search']::-webkit-search-results-decoration {
3950
- display: none;
3951
- }
3952
- input:-webkit-autofill {
3953
- -webkit-box-shadow: 0 0 0 1000px var(--ui-white, #fff) inset;
3954
- background-color: transparent;
3955
- }
3956
- input:disabled,
3957
- input:read-only {
3958
- cursor: default;
3959
- }
3960
- input:-moz-read-only {
3961
- cursor: default;
3962
- }
3963
- input.ui-input,
3964
- .ui-input > input,
3965
- [is='ui-input'] {
3966
- height: var(--ui-input-height);
3967
- line-height: var(--ui-input-line-height);
3968
- padding: calc((var(--ui-input-height) - var(--ui-input-line-height) - 2px) / 2) 8px;
3969
- border: 1px solid var(--ui-border, #d0d0d5);
3970
- border-radius: var(--ui-radius, 4px);
3971
- background-color: var(--ui-white, #fff);
3972
- box-sizing: border-box;
3973
- font-size: var(--ui-font, 14px);
3974
- outline: none;
3975
- color: var(--ui-dark, #4c5161);
3976
- transition: border-color var(--ui-animate-time, 0.2s), background-color var(--ui-animate-time, 0.2s);
3977
- }
3978
- .ui-input:hover,
3979
- .ui-input:hover > input,
3980
- [is='ui-input']:hover {
3981
- border-color: var(--ui-dark-border, #ababaf);
3982
- }
3983
- .ui-input:focus,
3984
- .ui-input > input:focus,
3985
- [is='ui-input']:focus {
3986
- border-color: var(--ui-blue, #2a80eb);
3987
- }
3988
- span.ui-input {
3989
- display: inline-block;
3990
- }
3991
- div.ui-input > input,
3992
- input[width='100%'] {
3993
- width: 100%;
3994
- }
3995
- .ui-input-x {
3996
- position: relative;
3997
- }
3998
- span.ui-input-x {
3999
- display: inline-block;
4000
- }
4001
- .ui-input-x > input {
4002
- display: block;
4003
- width: 100%;
4004
- padding-right: 56px;
4005
- }
4006
- input ~ .ui-input-count {
4007
- line-height: 38px;
4008
- padding: 0 2px;
4009
- color: var(--ui-gray, #a2a9b6);
4010
- font-size: calc(var(--ui-font, 14px) - 2px);
4011
- white-space: nowrap;
4012
- position: absolute;
4013
- font-family: sans-serif;
4014
- right: 8px;
4015
- top: 1px;
4016
- pointer-events: none;
4017
- }
4018
- .ui-input-count slash {
4019
- margin: 0 1px;
4020
- }
4021
- .ui-input-search:not(input) {
4022
- position: relative;
4023
- }
4024
- .ui-input-search > input:not(.ui-icon-search) {
4025
- padding-left: 40px;
4026
- }
4027
- .ui-input-search[align='end'] > :not(.ui-icon-search) {
4028
- padding-right: 40px;
4029
- padding-left: 9px;
4030
- }
4031
- .ui-icon-search {
4032
- position: absolute;
4033
- left: 3px;
4034
- top: 0;
4035
- bottom: 0;
4036
- margin: auto 0;
4037
- width: 20px;
4038
- height: 20px;
4039
- color: var(--ui-dark-gray, #b6bbc6);
4040
- background-color: transparent;
4041
- border: solid transparent;
4042
- border-width: 9px 8px;
4043
- box-sizing: content-box;
4044
- transition: color var(--ui-animate-time, 0.2s);
4045
- padding: 0;
4046
- text-indent: -99px;
4047
- font-size: 0;
4048
- cursor: pointer;
4049
- outline: 0 none;
4050
- overflow: hidden;
4051
- }
4052
- [align='end'] > .ui-icon-search {
4053
- left: auto;
4054
- right: 3px;
4055
- }
4056
- .ui-input-search:hover .ui-icon-search {
4057
- color: var(--ui-gray, #a2a9b6);
4058
- }
4059
- .ui-input-search > :disabled ~ .ui-icon-search {
4060
- color: var(--ui-disabled, #ccd0d7);
4061
- cursor: default;
4062
- }
4063
- .ui-input-search > :focus ~ .ui-icon-search {
4064
- color: var(--ui-blue, #2a80eb);
4065
- }
4066
- .ui-input-search > [is-error] ~ .ui-icon-search {
4067
- color: var(--ui-red, #eb4646);
4068
- }
4069
- .ui-icon-search:before,
4070
- .ui-icon-search:after {
4071
- content: '';
4072
- position: absolute;
4073
- }
4074
- .ui-icon-search:before {
4075
- width: 9px;
4076
- height: 9px;
4077
- border: 2px solid;
4078
- border-radius: 50%;
4079
- left: 2px;
4080
- top: 2px;
4081
- }
4082
- .ui-icon-search:after {
4083
- width: 6px;
4084
- border-top: 2px solid;
4085
- transform-origin: left;
4086
- transform: scaleY(1.25) rotate(30deg);
4087
- left: 13px;
4088
- top: 11px;
4089
- }
4090
- input.ui-icon-search {
4091
- border: 0;
4092
- margin: auto 6px;
4093
- width: 18px;
4094
- height: 18px;
4095
- -webkit-mask: var(--ui-input-search-img);
4096
- mask: var(--ui-input-search-img);
4097
- -webkit-mask-size: 100% 100%;
4098
- mask-size: 100% 100%;
4099
- background-color: var(--ui-dark-gray, #b6bbc6);
4100
- cursor: pointer;
4101
- }
4102
- :focus ~ input.ui-icon-search {
4103
- background-color: var(--ui-blue, #2a80eb);
4104
- }
4105
- [is-error] ~ input.ui-icon-search {
4106
- background-color: var(--ui-red, #eb4646);
4107
- }
4108
- input.ui-input:disabled,
4109
- [is='ui-input']:disabled,
4110
- .ui-input > input:disabled,
4111
- .ui-input-x > :disabled ~ .ui-input {
4112
- background-color: var(--ui-light, #f7f9fa);
4113
- }
4114
- input.ui-input:disabled,
4115
- [is='ui-input']:disabled,
4116
- .ui-input > input:disabled,
4117
- .ui-input-x > input:disabled {
4118
- color: var(--ui-gray, #a2a9b6);
4119
- }
4120
- .ui-input:disabled:hover,
4121
- [is='ui-input']:disabled:hover,
4122
- .ui-input > input:disabled:hover,
4123
- .ui-input:hover > input:disabled {
4124
- border-color: var(--ui-border, #d0d0d5);
4125
- }
4126
- .ui-input:-moz-read-only:hover,
4127
- .ui-input:-moz-read-only:focus,
4128
- [is='ui-input']:-moz-read-only:hover,
4129
- [is='ui-input']:-moz-read-only:focus,
4130
- .ui-input > input:-moz-read-only:hover,
4131
- .ui-input > input:-moz-read-only:focus {
4132
- border-color: var(--ui-border, #d0d0d5);
4133
- }
4134
- .ui-input:read-only:hover,
4135
- .ui-input:read-only:focus,
4136
- [is='ui-input']:read-only:hover,
4137
- [is='ui-input']:read-only:focus,
4138
- .ui-input > input:read-only:hover,
4139
- .ui-input > input:read-only:focus {
4140
- border-color: var(--ui-border, #d0d0d5);
4141
- }
4142
- .ui-input:-moz-read-only:hover,
4143
- [is='ui-input']:-moz-read-only:hover,
4144
- .ui-input > input:-moz-read-only:hover,
4145
- .ui-input:-moz-read-only:focus,
4146
- [is='ui-input']:-moz-read-only:focus,
4147
- .ui-input > input:-moz-read-only:focus {
4148
- border-color: var(--ui-border, #d0d0d5);
4149
- }
4150
- .ui-input[is-error],
4151
- [is='ui-input'][is-error],
4152
- .ui-input > [is-error] {
4153
- border-color: var(--ui-red, #eb4646) !important;
4154
- }
4155
- .ui-input-count > [is-error],
4156
- .ui-input-count[is-error] {
4157
- color: var(--ui-red, #eb4646);
4158
- }
4159
- @media (prefers-reduced-motion: reduce) {
4160
- [type='search']::-webkit-search-cancel-button,
4161
- input.ui-input,
4162
- .ui-input > input,
4163
- [is='ui-input'],
4164
- .ui-icon-search {
4165
- -webkit-transition: none;
4166
- transition: none;
4167
- }
4168
- }
4169
- .ui-kbd-tips {
4170
- position: absolute;
4171
- left: -9em;
4172
- top: -9em;
4173
- font-family: consolas, Liberation Mono, courier, monospace;
4174
- font-size: 12px;
4175
- border-radius: 2px;
4176
- color: var(--ui-white, #ffffff);
4177
- background: rgba(0, 0, 0, 0.75);
4178
- opacity: 0.8;
4179
- line-height: 13px;
4180
- padding: 0 3px;
4181
- z-index: 99;
4182
- }
4183
- .ui-kbd-tips kbd {
4184
- font-family: inherit;
4185
- }
4186
- .ui-outline.ui-outline {
4187
- outline: 1px dotted var(--ui-blue, #2a80eb);
4188
- outline: 5px auto -webkit-focus-ring-color;
4189
- }
4190
- :root {
4191
- --ui-lighttip-width: 25em;
4192
- --ui-loading-lighttip: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 1024q-104 0-199-40-92-39-163-110T40 711Q0 616 0 512q0-15 10.5-25.5T36 476t25.5 10.5T72 512q0 90 35 171 33 79 94 140t140 95q81 34 171 34t171-35q79-33 140-94t95-140q34-81 34-171t-35-171q-33-79-94-140t-140-95q-81-34-171-34-15 0-25.5-10.5T476 36t10.5-25.5T512 0q104 0 199 40 92 39 163 110t110 163q40 95 40 199t-40 199q-39 92-110 163T711 984q-95 40-199 40z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat;
4193
- }
4194
- ui-lighttip {
4195
- display: flex;
4196
- justify-content: center;
4197
- width: var(--ui-lighttip-width, 25em);
4198
- font-size: var(--ui-font, 14px);
4199
- text-align: left;
4200
- line-height: 20px;
4201
- color: var(--ui-white, #ffffff);
4202
- background-color: var(--ui-dark, #4c5161);
4203
- border-radius: calc(var(--ui-radius, 4px) - 2px);
4204
- padding: 15px 10px;
4205
- position: fixed;
4206
- top: calc(var(--ui-sort-index, 0) * 60px + 10px);
4207
- left: 50%;
4208
- transform: translate(-50%);
4209
- z-index: 19;
4210
- outline: none;
4211
- cursor: default;
4212
- transition: top var(--ui-animate-time, 0.2s);
4213
- animation: fadeIn 0.25s both;
4214
- }
4215
- ui-lighttip:not([open]) {
4216
- display: none;
4217
- }
4218
- ui-lighttip[type='success'] {
4219
- background-color: var(--ui-green, #1cad70);
4220
- }
4221
- ui-lighttip[type='error'] {
4222
- background-color: var(--ui-red, #eb4646);
4223
- }
4224
- ui-lighttip[type='warning'] {
4225
- background-color: var(--ui-orange, #f59b00);
4226
- }
4227
- ui-lighttip[type='success']:before,
4228
- ui-lighttip[type='error']:before,
4229
- ui-lighttip[type='warning']:before {
4230
- content: '';
4231
- width: 20px;
4232
- height: 20px;
4233
- flex-shrink: 0;
4234
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%23FFF' d='M163.038 57.226c-5.217-4.162-5.713-4.289-11.674-7.244-2.683-1.344-6.633 2.113-8.569 4.67l-52.648 67.042-34.301-43.387c-1.94-2.558-5.516-3.499-8.2-2.293-6.11 3.095-5.496 2.992-10.715 7.029-2.386 1.883-2.535 5.245-.597 7.793 0 0 36.97 46.917 41.44 52.565 6.557 8.068 18.483 7.669 24.744 0 4.62-5.781 61.117-78.506 61.117-78.506 1.937-2.559 1.788-5.918-.597-7.669z'/%3E%3C/svg%3E") no-repeat;
4235
- background-size: contain;
4236
- transform: translate(-5px);
4237
- }
4238
- ui-lighttip[type='error']:before {
4239
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%23FFF' d='M116.153 99.999l36.484-36.486a7.369 7.369 0 0 0 0-10.423l-5.212-5.213a7.375 7.375 0 0 0-10.425 0l-36.484 36.485-36.485-36.485a7.374 7.374 0 0 0-10.424 0l-5.211 5.213a7.365 7.365 0 0 0 0 10.423L84.88 99.999l-36.483 36.485a7.369 7.369 0 0 0 0 10.426l5.211 5.213a7.38 7.38 0 0 0 10.424 0l36.485-36.486L137 152.122a7.38 7.38 0 0 0 10.425 0l5.212-5.213a7.372 7.372 0 0 0 0-10.426l-36.484-36.484z'/%3E%3C/svg%3E");
4240
- }
4241
- ui-lighttip[type='warning']:before {
4242
- background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxwYXRoIGQ9Ik00MTMgMTc4YzUuNSAwIDEwLjEgNC42IDEwLjEgMTAuMVY0MTNjMCA1LjUtNC42IDEwLjEtMTAuMSAxMC4xSDE4OC4xYy01LjUgMC0xMC4xLTQuNi0xMC4xLTEwLjFWMTg4LjFjMC01LjUgNC42LTEwLjEgMTAuMS0xMC4xSDQxM20wLTUwSDE4OC4xYy0zMy4xIDAtNjAuMSAyNy02MC4xIDYwLjFWNDEzYzAgMzMuMSAyNyA2MC4xIDYwLjEgNjAuMUg0MTNjMzMuMSAwIDYwLjEtMjcgNjAuMS02MC4xVjE4OC4xYzAtMzMuMS0yNy02MC4xLTYwLjEtNjAuMXptNDIzLjEgMzQ1LjFINjExLjJjLTMzLjEgMC02MC4xLTI3LTYwLjEtNjAuMVYxODguMWMwLTMzLjEgMjctNjAuMSA2MC4xLTYwLjFoMjI0LjljMzMuMSAwIDYwLjEgMjcgNjAuMSA2MC4xVjQxM2MwIDMzLTI3LjEgNjAuMS02MC4xIDYwLjF6TTQxMyA2MDEuM2M1LjUgMCAxMC4xIDQuNiAxMC4xIDEwLjF2MjI0LjljMCA1LjUtNC42IDEwLjEtMTAuMSAxMC4xSDE4OC4xYy01LjUgMC0xMC4xLTQuNi0xMC4xLTEwLjFWNjExLjRjMC01LjUgNC42LTEwLjEgMTAuMS0xMC4xSDQxM20wLTUwSDE4OC4xYy0zMy4xIDAtNjAuMSAyNy02MC4xIDYwLjF2MjI0LjljMCAzMy4xIDI3IDYwLjEgNjAuMSA2MC4xSDQxM2MzMy4xIDAgNjAuMS0yNyA2MC4xLTYwLjFWNjExLjRjMC0zMy0yNy02MC4xLTYwLjEtNjAuMXptNDIzLjEgNTBjNS41IDAgMTAuMSA0LjYgMTAuMSAxMC4xdjIyNC45YzAgNS41LTQuNiAxMC4xLTEwLjEgMTAuMUg2MTEuMmMtNS41IDAtMTAuMS00LjYtMTAuMS0xMC4xVjYxMS40YzAtNS41IDQuNi0xMC4xIDEwLjEtMTAuMWgyMjQuOW0wLTUwSDYxMS4yYy0zMy4xIDAtNjAuMSAyNy02MC4xIDYwLjF2MjI0LjljMCAzMy4xIDI3IDYwLjEgNjAuMSA2MC4xaDIyNC45YzMzLjEgMCA2MC4xLTI3IDYwLjEtNjAuMVY2MTEuNGMwLTMzLTI3LjEtNjAuMS02MC4xLTYwLjF6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
4243
- }
4244
- @media (max-width: 640px) {
4245
- ui-lighttip {
4246
- width: auto;
4247
- padding-left: 1rem;
4248
- padding-right: 1rem;
4249
- max-width: calc(100% - 2rem - 2em);
4250
- }
4251
- }
4252
- ui-lighttip[type='loading'] {
4253
- top: 50%;
4254
- left: 50%;
4255
- width: auto;
4256
- padding-right: calc(10px + 0.5em);
4257
- max-width: calc(100% - 2rem - 2em);
4258
- transform: translate(-50%, -50%);
4259
- border-radius: var(--ui-radius, 4px);
4260
- background-color: rgba(25, 28, 34, 0.88);
4261
- visibility: hidden;
4262
- opacity: 0;
4263
- }
4264
- ui-lighttip[type='loading'][open]:before {
4265
- content: '';
4266
- display: inline-block;
4267
- width: 20px;
4268
- height: 20px;
4269
- margin: 0 0.5em;
4270
- background: var(--ui-loading-lighttip) no-repeat center / 100%;
4271
- animation: spin 1s linear infinite;
4272
- filter: brightness(100);
4273
- }
4274
- ui-lighttip[type='loading'][open] {
4275
- visibility: visible;
4276
- opacity: 1;
4277
- }
4278
- ui-lighttip[type='loading']:before {
4279
- display: none;
4280
- }
4281
- @media (prefers-reduced-motion: reduce) {
4282
- ui-lighttip {
4283
- animation: none;
4284
- }
4285
- }
4286
- :root {
4287
- --ui-loading-img: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 1024q-104 0-199-40-92-39-163-110T40 711Q0 616 0 512q0-15 10.5-25.5T36 476t25.5 10.5T72 512q0 90 35 171 33 79 94 140t140 95q81 34 171 34t171-35q79-33 140-94t95-140q34-81 34-171t-35-171q-33-79-94-140t-140-95q-81-34-171-34-15 0-25.5-10.5T476 36t10.5-25.5T512 0q104 0 199 40 92 39 163 110t110 163q40 95 40 199t-40 199q-39 92-110 163T711 984q-95 40-199 40z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat;
4288
- }
4289
- ui-loading,
4290
- .ui-loading {
4291
- text-align: center;
4292
- cursor: default;
4293
- box-sizing: border-box;
4294
- }
4295
- ui-loading {
4296
- display: inline-block;
4297
- font-size: var(--ui-font, 14px);
4298
- line-height: 20px;
4299
- vertical-align: middle;
4300
- }
4301
- ui-loading[rows] {
4302
- display: block;
4303
- }
4304
- ui-loading:not([rows]):not([spin]):before {
4305
- display: block;
4306
- }
4307
- ui-loading:not([rows]):not([spin]):after {
4308
- display: none;
4309
- }
4310
- ui-loading[rows='2'] {
4311
- height: 40px;
4312
- }
4313
- ui-loading[rows='3'] {
4314
- height: 60px;
4315
- }
4316
- ui-loading[rows='4'] {
4317
- height: 80px;
4318
- }
4319
- ui-loading[rows='5'] {
4320
- height: 100px;
4321
- }
4322
- ui-loading[rows='6'] {
4323
- height: 120px;
4324
- }
4325
- ui-loading[rows='7'] {
4326
- height: 140px;
4327
- }
4328
- ui-loading[rows='8'] {
4329
- height: 160px;
4330
- }
4331
- ui-loading[rows='9'] {
4332
- height: 180px;
4333
- }
4334
- ui-loading[rows='10'] {
4335
- height: 200px;
4336
- }
4337
- ui-loading[rows='11'] {
4338
- height: 220px;
4339
- }
4340
- ui-loading[rows='12'] {
4341
- height: 240px;
4342
- }
4343
- ui-loading[rows='13'] {
4344
- height: 260px;
4345
- }
4346
- ui-loading[rows='14'] {
4347
- height: 280px;
4348
- }
4349
- ui-loading[rows='15'] {
4350
- height: 300px;
4351
- }
4352
- ui-loading[width='100%'] {
4353
- width: 100%;
4354
- }
4355
- ui-loading[height='100%'] {
4356
- height: 100%;
4357
- }
4358
- ui-loading:after,
4359
- .ui-loading:after {
4360
- content: '';
4361
- display: inline-block;
4362
- height: 100%;
4363
- vertical-align: middle;
4364
- }
4365
- ui-loading:before,
4366
- .ui-loading:before {
4367
- content: '';
4368
- display: inline-block;
4369
- width: 20px;
4370
- height: 20px;
4371
- margin: 0 0.5em;
4372
- background-color: var(--color, #2a80eb);
4373
- -webkit-mask: var(--ui-loading-img);
4374
- mask: var(--ui-loading-img);
4375
- -webkit-mask-size: 100% 100%;
4376
- mask-size: 100% 100%;
4377
- animation: spin 1s linear infinite;
4378
- vertical-align: -4px;
4379
- }
4380
- ui-loading[spin]:before,
4381
- .ui-loading[spin]:before {
4382
- display: none;
4383
- }
4384
- ui-loading[size='1']:before,
4385
- .ui-loading[size='1']:before {
4386
- width: 10px;
4387
- height: 10px;
4388
- vertical-align: 0;
4389
- }
4390
- ui-loading[size='3']:before,
4391
- .ui-loading[size='3']:before {
4392
- width: 30px;
4393
- height: 30px;
4394
- vertical-align: -8px;
4395
- }
4396
- ui-loading[size='4']:before,
4397
- .ui-loading[size='4']:before {
4398
- width: 40px;
4399
- height: 40px;
4400
- vertical-align: -12px;
4401
- }
4402
- @keyframes spin {
4403
- 0% {
4404
- transform: rotate(0);
4405
- }
4406
- to {
4407
- transform: rotate(360deg);
4408
- }
4409
- }
4410
- ui-dot,
4411
- [is-dot] {
4412
- display: inline-block;
4413
- height: 1em;
4414
- line-height: 1;
4415
- text-align: left;
4416
- vertical-align: -0.25em;
4417
- overflow: hidden;
4418
- }
4419
- ui-dot:before,
4420
- [is-dot]:before {
4421
- display: block;
4422
- content: '...\a..\a.';
4423
- white-space: pre-wrap;
4424
- animation: dot 3s infinite step-start both;
4425
- }
4426
- @keyframes dot {
4427
- 33% {
4428
- transform: translateY(-2em);
4429
- }
4430
- 66% {
4431
- transform: translateY(-1em);
4432
- }
4433
- }
4434
- ui-pagination:not(:defined),
4435
- [is-pagination]:not([defined]) {
4436
- display: flex;
4437
- height: 30px;
4438
- }
4439
- ::-moz-placeholder {
4440
- -moz-transition: opacity var(--ui-animate-time, 0.2s);
4441
- transition: opacity var(--ui-animate-time, 0.2s);
4442
- color: var(--ui-gray, #a2a9b6);
4443
- font-size: var(--ui-font, 14px);
4444
- opacity: 1;
4445
- }
4446
- ::placeholder {
4447
- transition: opacity var(--ui-animate-time, 0.2s);
4448
- color: var(--ui-gray, #a2a9b6);
4449
- font-size: var(--ui-font, 14px);
4450
- opacity: 1;
4451
- }
4452
- :focus::-moz-placeholder {
4453
- opacity: var(--ui-opacity, 0.4);
4454
- }
4455
- :focus::placeholder {
4456
- opacity: var(--ui-opacity, 0.4);
4457
- }
4458
- @media (prefers-reduced-motion: reduce) {
4459
- ::-moz-placeholder {
4460
- -moz-transition: none;
4461
- transition: none;
4462
- }
4463
- ::placeholder {
4464
- transition: none;
4465
- }
4466
- }
4467
- :root {
4468
- --ui-progress-width: 10em;
4469
- --ui-progress-height: 0.25em;
4470
- --ui-progress-background-color: var(--ui-border, #d0d0d5);
4471
- }
4472
- .ui-progress,
4473
- [is='ui-progress'] {
4474
- display: inline-block;
4475
- width: var(--ui-progress-width, 10em);
4476
- height: var(--ui-progress-height, 0.25em);
4477
- vertical-align: calc(0.25em - 2px);
4478
- border: 0;
4479
- background-color: var(--ui-progress-background-color);
4480
- border-radius: 1em;
4481
- overflow: hidden;
4482
- }
4483
- .ui-progress::-moz-progress-bar,
4484
- [is='ui-progress']::-moz-progress-bar {
4485
- background-color: var(--ui-blue);
4486
- }
4487
- .ui-progress::-webkit-progress-bar,
4488
- [is='ui-progress']::-webkit-progress-bar {
4489
- background-color: var(--ui-progress-background-color);
4490
- }
4491
- .ui-progress::-webkit-progress-value,
4492
- [is='ui-progress']::-webkit-progress-value {
4493
- background-color: var(--ui-blue);
4494
- }
4495
- progress[width='100%'] {
4496
- width: 100%;
4497
- }
4498
- .ui-progress:indeterminate::-moz-progress-bar,
4499
- [is='ui-progress']:indeterminate::-moz-progress-bar {
4500
- background-color: inherit;
4501
- }
4502
- :root {
4503
- --ui-radio-width: 20px;
4504
- --ui-radio-height: 20px;
4505
- }
4506
- [is='ui-radio'] {
4507
- -moz-appearance: none;
4508
- -webkit-appearance: none;
4509
- width: var(--ui-radio-width, 20px);
4510
- height: var(--ui-radio-height, 20px);
4511
- cursor: pointer;
4512
- display: inline-flex;
4513
- outline: none;
4514
- border: solid 1px var(--ui-border, #d0d0d5);
4515
- background-color: var(--ui-white, #ffffff);
4516
- border-radius: 100%;
4517
- box-sizing: border-box;
4518
- vertical-align: -0.5ex;
4519
- -webkit-user-select: none;
4520
- -moz-user-select: none;
4521
- user-select: none;
4522
- transition: border-color var(--ui-animate-time, 0.2s);
4523
- }
4524
- [is='ui-radio']:after {
4525
- content: '';
4526
- width: 100%;
4527
- height: 100%;
4528
- background-color: var(--ui-blue, #2a80eb);
4529
- transform: scale(0);
4530
- opacity: 0;
4531
- border-radius: 100%;
4532
- }
4533
- [is='ui-radio']:not(:disabled):hover {
4534
- border-color: var(--ui-dark-border, #ababaf);
4535
- }
4536
- [is='ui-radio']:focus {
4537
- border-color: var(--ui-blue, #2a80eb);
4538
- }
4539
- [is='ui-radio']:checked:after {
4540
- transform: scale(0.5);
4541
- opacity: 1;
4542
- }
4543
- [is='ui-radio']:disabled {
4544
- border-color: var(--ui-dark-border, #ababaf);
4545
- opacity: var(--ui-opacity, 0.4);
4546
- cursor: default;
4547
- }
4548
- [is='ui-radio'][is-error] {
4549
- border-color: var(--ui-red, #eb4646) !important;
4550
- }
4551
- @media (prefers-reduced-motion: reduce) {
4552
- [is='ui-radio'] {
4553
- transition: none;
4554
- }
4555
- }
4556
- :root {
4557
- --ui-range-track-hegiht: 4px;
4558
- --ui-range-thumb-size: 16px;
4559
- }
4560
- [is='ui-range'] {
4561
- -webkit-appearance: none;
4562
- -moz-appearance: none;
4563
- appearance: none;
4564
- margin: 0;
4565
- outline: 0;
4566
- background-color: transparent;
4567
- vertical-align: middle;
4568
- }
4569
- [is='ui-range']:disabled {
4570
- opacity: var(--ui-opacity, 0.4);
4571
- }
4572
- [is='ui-range']::-webkit-slider-runnable-track {
4573
- display: flex;
4574
- align-items: flex-start;
4575
- position: relative;
4576
- height: var(--ui-range-track-hegiht);
4577
- border-radius: var(--ui-range-track-hegiht);
4578
- background: linear-gradient(to right, var(--ui-blue, #2a80eb) calc(100% * var(--percent, 100)), var(--ui-gray, #a2a9b6) 0%);
4579
- }
4580
- [is='ui-range']::-webkit-slider-thumb {
4581
- -webkit-appearance: none;
4582
- appearance: none;
4583
- width: var(--ui-range-thumb-size);
4584
- height: var(--ui-range-thumb-size);
4585
- border-radius: 50%;
4586
- background-color: #fff;
4587
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
4588
- -webkit-transition: border-color var(-ui-animate-time, 0.2s), background-color var(-ui-animate-time, 0.2s);
4589
- transition: border-color var(-ui-animate-time, 0.2s), background-color var(-ui-animate-time, 0.2s);
4590
- margin-top: calc((var(--ui-range-thumb-size) - var(--ui-range-track-hegiht)) * -0.5);
4591
- }
4592
- [is='ui-range']::-webkit-slider-thumb:active {
4593
- background-color: var(--ui-light, #f7f9fa);
4594
- box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
4595
- }
4596
- [is='ui-range']::-moz-range-track {
4597
- background: var(--ui-light-border, #ededef);
4598
- height: 4px;
4599
- }
4600
- [is='ui-rate']::-moz-range-track {
4601
- background: var(--ui-light-border, #ededef);
4602
- height: inherit;
4603
- }
4604
- [is='ui-range']::-moz-range-progress {
4605
- background: var(--ui-blue, #2a80eb);
4606
- height: 4px;
4607
- }
4608
- [is='ui-range']::-moz-range-thumb {
4609
- width: var(--ui-range-thumb-size);
4610
- height: var(--ui-range-thumb-size);
4611
- border: none;
4612
- border-radius: 50%;
4613
- background-color: #fff;
4614
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
4615
- }
4616
- input[data-tips] {
4617
- position: relative;
4618
- }
4619
- [is='ui-range'][data-tips] {
4620
- box-sizing: border-box;
4621
- border-style: solid;
4622
- border-color: transparent;
4623
- border-width: 0 calc(var(--ui-range-thumb-size) * 0.5);
4624
- }
4625
- [is='ui-range'][data-tips]::-webkit-slider-runnable-track {
4626
- margin: 0 calc(var(--ui-range-thumb-size) * -0.5);
4627
- }
4628
- input[data-tips]:before,
4629
- input[data-tips]:after {
4630
- content: '';
4631
- display: block;
4632
- position: absolute;
4633
- z-index: 1;
4634
- transform: translate(-50%, -20px);
4635
- opacity: 0;
4636
- transition: all 0.15s 0.15s, left 0s, top 0s;
4637
- color: #373c42;
4638
- visibility: hidden;
4639
- pointer-events: none;
4640
- }
4641
- input[data-tips]:before {
4642
- content: attr(data-tips);
4643
- border-radius: 3px;
4644
- padding: 6px 10px;
4645
- line-height: 18px;
4646
- text-align: left;
4647
- background-color: #373c42;
4648
- color: #fff;
4649
- font-size: 12px;
4650
- font-style: normal;
4651
- width: -moz-max-content;
4652
- width: max-content;
4653
- max-width: 200px;
4654
- left: calc(var(--percent, 0.5) * 100%);
4655
- bottom: 100%;
4656
- transform: translate(-50%, -20px);
4657
- }
4658
- input[data-tips]:after {
4659
- width: 0;
4660
- height: 0;
4661
- overflow: hidden;
4662
- border: 6px solid transparent;
4663
- left: calc(var(--percent, 0.5) * 100%);
4664
- bottom: 100%;
4665
- transform: translate(-50%, -20px);
4666
- margin-bottom: -12px;
4667
- border-top-color: currentColor;
4668
- }
4669
- input[data-tips][reverse]:before {
4670
- left: calc(var(--percent, 0.5) * 100%);
4671
- bottom: auto;
4672
- top: 100%;
4673
- transform: translate(-50%, 20px);
4674
- }
4675
- input[data-tips][reverse]:after {
4676
- bottom: auto;
4677
- top: 100%;
4678
- transform: translate(-50%, 20px);
4679
- margin-top: -12px;
4680
- border-top-color: transparent;
4681
- border-bottom-color: currentColor;
4682
- }
4683
- input[data-tips]:not([data-tips*='$']):hover:before,
4684
- input[data-tips]:not([data-tips*='$']):hover:after,
4685
- input[data-tips]:not([data-tips*='$']):active:before,
4686
- input[data-tips]:not([data-tips*='$']):active:after {
4687
- visibility: visible;
4688
- opacity: 1;
4689
- transform: translate(-50%, calc(var(--ui-range-thumb-size) * -1));
4690
- }
4691
- input[data-tips][reverse]:not([data-tips*='$']):hover:before,
4692
- input[data-tips][reverse]:not([data-tips*='$']):hover:after,
4693
- input[data-tips][reverse]:not([data-tips*='$']):active:before,
4694
- input[data-tips][reverse]:not([data-tips*='$']):active:after {
4695
- transform: translate(-50%, var(--ui-range-thumb-size));
4696
- }
4697
- [is='ui-range'][multiple] {
4698
- pointer-events: none;
4699
- vertical-align: top;
4700
- }
4701
- [is='ui-range'][multiple]::-webkit-slider-runnable-track {
4702
- background: linear-gradient(to right, var(--ui-gray, #a2a9b6) calc(1% * var(--from, 0)), var(--ui-blue, #2a80eb) calc(1% * var(--from, 0)) calc(1% * var(--to, 100)), var(--ui-gray, #a2a9b6) 0%);
4703
- }
4704
- [is='ui-range'][multiple][data-range='from'] {
4705
- display: block;
4706
- position: absolute;
4707
- }
4708
- [is='ui-range'][multiple][data-range='to'] {
4709
- opacity: 1;
4710
- }
4711
- [is='ui-range'][multiple][data-range='to']:disabled::-webkit-slider-thumb {
4712
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
4713
- }
4714
- [is='ui-range'][multiple][data-range='to']::-webkit-slider-runnable-track {
4715
- background: none;
4716
- }
4717
- [is='ui-range'][multiple]::-webkit-slider-thumb {
4718
- pointer-events: all;
4719
- position: relative;
4720
- }
4721
- [is='ui-range'][multiple]::-webkit-slider-thumb:active {
4722
- z-index: 1;
4723
- }
4724
- [is='ui-range'][multiple]::-moz-range-thumb {
4725
- pointer-events: initial;
4726
- }
4727
- [is='ui-range'][multiple]::-moz-range-track {
4728
- background: linear-gradient(to right, var(--ui-gray, #a2a9b6) calc(1% * var(--from, 0)), var(--ui-blue, #2a80eb) calc(1% * var(--from, 0)) calc(1% * var(--to, 100)), var(--ui-gray, #a2a9b6) 0%);
4729
- }
4730
- [is='ui-range'][multiple][data-range='to']::-moz-range-progress {
4731
- background: none;
4732
- }
4733
- [is='ui-rate']:enabled {
4734
- cursor: pointer;
4735
- }
4736
- [is='ui-rate']:disabled {
4737
- opacity: var(--ui-opacity, 0.4);
4738
- }
4739
- [is='ui-rate'] {
4740
- -webkit-appearance: none;
4741
- -moz-appearance: none;
4742
- appearance: none;
4743
- margin: 0;
4744
- outline: 0;
4745
- background-color: transparent;
4746
- vertical-align: middle;
4747
- width: calc(var(--number, 5) * 2em);
4748
- --mask-url: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0l1.693 3.67 4.013.476L8.74 6.89l.788 3.964L6 8.88l-3.527 1.974.788-3.964L.294 4.146l4.013-.476L6 0z'/%3E%3C/svg%3E");
4749
- --mask: var(--mask-url) repeat-x left / 2em 100%;
4750
- }
4751
- [is='ui-rate']::-webkit-slider-runnable-track {
4752
- background: var(--ui-orange, #f59b00);
4753
- height: 2em;
4754
- -webkit-mask: var(--mask);
4755
- mask: var(--mask);
4756
- }
4757
- [is='ui-rate']::-webkit-slider-thumb {
4758
- -webkit-appearance: none;
4759
- width: 1px;
4760
- height: 100%;
4761
- box-shadow: 999em 0 0 999em var(--ui-light-border, #ededef);
4762
- }
4763
- [is='ui-rate']:focus::-webkit-slider-thumb {
4764
- box-shadow: 999em 0 0 999em var(--ui-light-border, #ededef);
4765
- background: var(--ui-orange, #f59b00);
4766
- }
4767
- [is='ui-rate'][readonly] {
4768
- cursor: default;
4769
- pointer-events: none;
4770
- }
4771
- [is='ui-rate'],
4772
- _::-moz-range-track {
4773
- -moz-appearance: none;
4774
- appearance: none;
4775
- -webkit-mask: var(--mask);
4776
- mask: var(--mask);
4777
- height: 2em;
4778
- }
4779
- [is='ui-rate']::-moz-range-progress {
4780
- background: var(--ui-orange, #f59b00);
4781
- height: inherit;
4782
- }
4783
- [is='ui-rate']::-moz-range-thumb {
4784
- width: 0;
4785
- opacity: 0;
4786
- }
4787
- @media (prefers-reduced-motion: reduce) {
4788
- [is='ui-range']::-webkit-slider-thumb,
4789
- input[data-tips]:before,
4790
- input[data-tips]:after,
4791
- [is='ui-range'][data-tips][vertical]:before,
4792
- [is='ui-range'][data-tips][vertical]:after,
4793
- [is='ui-range'][data-tips][vertical][reverse]:before,
4794
- [is='ui-range'][data-tips][vertical][reverse]:after {
4795
- -webkit-transition: none;
4796
- transition: none;
4797
- }
4798
- }
4799
- [is='ui-select'] {
4800
- display: inline-block;
4801
- height: 40px;
4802
- margin: 0;
4803
- border: 1px solid var(--ui-border, #d0d0d5);
4804
- font-size: var(--ui-font, 14px);
4805
- font-family: inherit;
4806
- vertical-align: middle;
4807
- }
4808
- [is='ui-select'][width='100%'] {
4809
- width: 100%;
4810
- }
4811
- [is='ui-select'] {
4812
- transform-origin: left;
4813
- border-right: 27px solid var(--ui-border, #d0d0d5);
4814
- opacity: 0.0001;
4815
- pointer-events: none;
4816
- visibility: hidden;
4817
- z-index: 1;
4818
- }
4819
- [is='ui-select'][multiple] {
4820
- visibility: visible;
4821
- pointer-events: auto;
4822
- }
4823
- [is='ui-select'] option {
4824
- min-height: 38px;
4825
- height: 38px;
4826
- padding: 0;
4827
- font-size: inherit;
4828
- }
4829
- [is='ui-select'][multiple] {
4830
- height: auto;
4831
- font-size: 33px;
4832
- font-size: var(--ui-font, 14px);
4833
- padding: 0;
4834
- border-right-width: 13px;
4835
- border-left: 13px solid;
4836
- vertical-align: top;
4837
- cursor: pointer;
4838
- }
4839
- [is='ui-select'][multiple] > option {
4840
- min-height: 38px;
4841
- height: 38px;
4842
- padding: 0;
4843
- font-size: inherit;
4844
- }
4845
- select[multiple] > option:disabled {
4846
- cursor: default;
4847
- }
4848
- .ui-select {
4849
- display: inline-block;
4850
- height: 40px;
4851
- line-height: 20px;
4852
- vertical-align: middle;
4853
- font-size: var(--ui-font, 14px);
4854
- transition: opacity var(--ui-animate-time, 0.2s);
4855
- text-align: start;
4856
- position: relative;
4857
- }
4858
- [disabled] + .ui-select {
4859
- pointer-events: none;
4860
- }
4861
- select[hidden],
4862
- select[hidden] + .ui-select {
4863
- display: none;
4864
- }
4865
- [is='ui-select'][multiple] + .ui-select {
4866
- vertical-align: top;
4867
- }
4868
- .ui-select.active {
4869
- z-index: 3;
4870
- }
4871
- .ui-select-button {
4872
- display: block;
4873
- height: 20px;
4874
- padding: 9px 27px 9px 12px;
4875
- color: var(--ui-dark, #4c5161);
4876
- border: 1px solid var(--ui-border, #d0d0d5);
4877
- border-radius: var(--ui-radius, 4px);
4878
- background-color: var(--ui-white, #fff);
4879
- text-decoration: none;
4880
- transition: border-color var(--ui-animate-time, 0.2s), background-color var(--ui-animate-time, 0.2s);
4881
- cursor: pointer;
4882
- }
4883
- .ui-select-button:hover {
4884
- color: var(--ui-dark, #4c5161);
4885
- border-color: var(--ui-dark-border, #ababaf);
4886
- }
4887
- :not(:disabled) + .ui-select > .ui-select-button:active {
4888
- background-color: var(--ui-light, #f7f9fa);
4889
- }
4890
- .active > a.ui-select-button {
4891
- border-color: var(--ui-blue, #2a80eb);
4892
- border-radius: var(--ui-radius, 4px) var(--ui-radius, 4px) 0 0;
4893
- }
4894
- .reverse > a.ui-select-button {
4895
- border-radius: 0 0 var(--ui-radius, 4px) var(--ui-radius, 4px);
4896
- }
4897
- .ui-select-text {
4898
- display: block;
4899
- width: 100%;
4900
- text-overflow: ellipsis;
4901
- white-space: nowrap;
4902
- overflow: hidden;
4903
- }
4904
- .ui-select-icon,
4905
- .ui-select-text:only-child:after,
4906
- .ui-select-button:empty:after {
4907
- position: absolute;
4908
- width: 20px;
4909
- height: 20px;
4910
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%232a80eb' d='M145.659 68.949a12.874 12.874 0 0 0-18.473 0L99.479 97.233 71.772 68.949a12.874 12.874 0 0 0-18.473 0c-5.099 5.208-5.099 13.648 0 18.857l46.18 47.14 46.181-47.14c5.099-5.208 5.099-13.649-.001-18.857z'/%3E%3C/svg%3E") no-repeat center;
4911
- background-size: 20px 20px;
4912
- right: 7px;
4913
- top: 10px;
4914
- }
4915
- .ui-select-text:only-child:after,
4916
- .ui-select-button:empty:after {
4917
- content: '';
4918
- }
4919
- .ui-select-datalist {
4920
- position: absolute;
4921
- left: 0;
4922
- right: 0;
4923
- top: 39px;
4924
- display: none;
4925
- box-sizing: border-box;
4926
- max-height: 306px;
4927
- padding: 0;
4928
- border: 1px solid var(--ui-blue, #2a80eb);
4929
- background-color: var(--ui-white, #fff);
4930
- font-size: 14px;
4931
- overflow: auto;
4932
- overscroll-behavior: none;
4933
- -ms-scroll-chaining: none;
4934
- scrollbar-width: thin;
4935
- text-align: left;
4936
- }
4937
- [multiple] ~ .ui-select > .ui-select-datalist {
4938
- position: static;
4939
- display: block;
4940
- max-height: none;
4941
- height: inherit;
4942
- border-color: #d0d0d5;
4943
- border-radius: var(--ui-radius, 4px);
4944
- box-sizing: border-box;
4945
- }
4946
- [multiple]:hover ~ .ui-select > .ui-select-datalist {
4947
- border-color: var(--ui-dark-border, #ababaf);
4948
- }
4949
- [multiple]:focus ~ .ui-select > .ui-select-datalist {
4950
- border-color: var(--ui-blue, #2a80eb);
4951
- }
4952
- [data-custom-scroll='true']::-webkit-scrollbar {
4953
- width: 8px;
4954
- height: 8px;
4955
- }
4956
- [data-custom-scroll='true']::-webkit-scrollbar-thumb {
4957
- background-color: #bbb;
4958
- border-radius: calc(var(--ui-radius, 4px) + 4px);
4959
- }
4960
- [data-custom-scroll='true']::-webkit-scrollbar-thumb:hover {
4961
- background-color: #aaa;
4962
- }
4963
- [data-custom-scroll='true']::-webkit-scrollbar-track-piece {
4964
- background-color: #ddd;
4965
- }
4966
- .active > .ui-select-datalist,
4967
- .ui-select-datalist.active {
4968
- display: block;
4969
- }
4970
- .reverse > .ui-select-datalist {
4971
- top: auto;
4972
- bottom: 39px;
4973
- }
4974
- .ui-select-intent {
4975
- text-indent: 1em;
4976
- }
4977
- .ui-select-datalist-li {
4978
- display: block;
4979
- line-height: 20px;
4980
- padding: 9px 12px;
4981
- color: var(--ui-dark, #4c5161);
4982
- background-color: var(--ui-white, #fff);
4983
- text-decoration: none;
4984
- text-overflow: ellipsis;
4985
- white-space: nowrap;
4986
- transition: background-color var(--ui-animate-time, 0.2s);
4987
- overflow: hidden;
4988
- }
4989
- h6.ui-select-datalist-li,
4990
- .ui-select-datalist-li[role='heading'] {
4991
- font-weight: 700;
4992
- margin: 0;
4993
- padding-bottom: 6px;
4994
- }
4995
- .ui-select-datalist-li[href] {
4996
- cursor: pointer;
4997
- }
4998
- .ui-select-datalist-li:not(:only-child):empty {
4999
- display: none;
5000
- }
5001
- .ui-select-datalist-hr:not(:first-child) {
5002
- border: 0;
5003
- height: 1px;
5004
- padding: 7px 12px;
5005
- background-color: var(--ui-white, #fff);
5006
- }
5007
- .ui-select-datalist-hr:not(:first-child):before {
5008
- content: '';
5009
- display: block;
5010
- border-top: 1px solid var(--ui-border, #d0d0d5);
5011
- opacity: var(--ui-opacity, 0.4);
5012
- }
5013
- .ui-select-datalist-li:hover {
5014
- color: var(--ui-dark, #4c5161);
5015
- }
5016
- .ui-select-datalist > .disabled {
5017
- color: var(--ui-gray, #a2a9b6);
5018
- cursor: default;
5019
- }
5020
- .ui-select-datalist > .selected {
5021
- background-color: var(--ui-list-selected, #e0f0ff);
5022
- }
5023
- .ui-select-datalist-li[href]:hover,
5024
- [multiple] ~ .ui-select .ui-select-datalist-li[href] {
5025
- color: var(--ui-dark, #4c5161);
5026
- background-color: var(--ui-list-hover, #f0f7ff);
5027
- }
5028
- select:disabled {
5029
- cursor: default;
5030
- }
5031
- select:disabled + .ui-select {
5032
- opacity: var(--ui-opacity, 0.4);
5033
- }
5034
- select:disabled + .ui-select .ui-select-button,
5035
- select:disabled + .ui-select .ui-select-datalist {
5036
- cursor: default;
5037
- border-color: var(--ui-dark-border, #ababaf);
5038
- }
5039
- [is-error] .ui-select-button,
5040
- [is-error][multiple] ~ .ui-select .ui-select-datalist,
5041
- select[is-error] {
5042
- border-color: var(--ui-red, #eb4646);
5043
- }
5044
- @media (prefers-reduced-motion: reduce) {
5045
- .ui-select-button,
5046
- .ui-select,
5047
- .ui-select-datalist-li {
5048
- transition: none;
5049
- }
5050
- }
5051
- :root {
5052
- --ui-switch-width: 44px;
5053
- --ui-switch-height: 26px;
5054
- }
5055
- input[is='ui-switch'] {
5056
- display: inline-flex;
5057
- outline: none;
5058
- box-sizing: border-box;
5059
- box-shadow: inset 0 1px, inset 1px 0, inset -1px 0, inset 0 -1px;
5060
- background-clip: content-box;
5061
- -webkit-appearance: none;
5062
- width: var(--ui-switch-width, 44px);
5063
- height: var(--ui-switch-height, 26px);
5064
- border: 2px solid;
5065
- border-radius: var(--ui-switch-height, 26px);
5066
- background-color: currentColor;
5067
- color: var(--ui-dark-gray, #b6bbc6);
5068
- font-size: 0;
5069
- transition: all var(--ui-animate-time, 0.2s);
5070
- cursor: pointer;
5071
- -webkit-user-select: none;
5072
- -moz-user-select: none;
5073
- user-select: none;
5074
- -webkit-tap-highlight-color: transparent;
5075
- }
5076
- input[is='ui-switch']:checked {
5077
- color: var(--ui-blue, #2a80eb);
5078
- background-color: var(--ui-blue, #2a80eb);
5079
- }
5080
- input[is='ui-switch']:before {
5081
- content: '';
5082
- flex: 0;
5083
- transition: flex var(--ui-animate-time, 0.2s);
5084
- }
5085
- input[is='ui-switch']:after {
5086
- content: '';
5087
- width: 22px;
5088
- height: 22px;
5089
- border-radius: 100%;
5090
- background-color: var(--ui-white, #ffffff);
5091
- opacity: 1;
5092
- visibility: visible;
5093
- }
5094
- input[is='ui-switch']:active {
5095
- box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
5096
- }
5097
- input[is='ui-switch']:checked:before {
5098
- flex: 1;
5099
- }
5100
- input[is='ui-switch']:disabled {
5101
- opacity: var(--ui-opacity, 0.4);
5102
- cursor: default;
5103
- }
5104
- input[is='ui-switch']:focus:not(:disabled),
5105
- input[is='ui-switch']:hover:not(:disabled) {
5106
- color: var(--ui-gray, #a2a9b6);
5107
- }
5108
- input[is='ui-switch']:checked:focus:not(:disabled),
5109
- input[is='ui-switch']:checked:hover:not(:disabled) {
5110
- color: var(--ui-dark-blue, #0057c3);
5111
- background-color: var(--ui-dark-blue, #0057c3);
5112
- }
5113
- input[is='ui-switch']:checked:focus:disabled,
5114
- input[is='ui-switch']:checked:disabled:hover {
5115
- color: var(--ui-blue, #2a80eb);
5116
- background-color: var(--ui-blue, #2a80eb);
5117
- }
5118
- @media (prefers-reduced-motion: reduce) {
5119
- input[is='ui-switch'],
5120
- input[is='ui-switch']:before {
5121
- transition: none;
5122
- }
5123
- }
5124
- ui-tab {
5125
- cursor: pointer;
5126
- }
5127
- .ui-tab-tabs {
5128
- height: 40px;
5129
- line-height: 40px;
5130
- border-bottom: 1px solid var(--ui-border, #d0d0d5);
5131
- position: relative;
5132
- display: flex;
5133
- }
5134
- .ui-tab-tab {
5135
- margin-right: 50px;
5136
- font-size: calc(var(--ui-font, 14px) + 2px);
5137
- text-align: center;
5138
- color: var(--ui-dark, #4c5161);
5139
- text-decoration: none;
5140
- border: 0;
5141
- background: none;
5142
- overflow: hidden;
5143
- cursor: pointer;
5144
- }
5145
- .ui-tab-tab a {
5146
- display: block;
5147
- color: inherit;
5148
- }
5149
- .ui-tab-tab:hover {
5150
- color: var(--ui-blue, #2a80eb);
5151
- }
5152
- .ui-tab-tabs [open] {
5153
- line-height: 36px;
5154
- padding-top: 2px;
5155
- margin-bottom: -1px;
5156
- border-bottom: solid;
5157
- color: var(--ui-blue, #2a80eb);
5158
- cursor: default;
5159
- }
5160
- .ui-tab-tabs[style*='--ui-tab']:after {
5161
- content: '';
5162
- position: absolute;
5163
- bottom: -1px;
5164
- left: calc(1px * var(--ui-tab-left));
5165
- width: calc(1px * var(--ui-tab-width));
5166
- border-bottom: solid var(--ui-blue, #2a80eb);
5167
- transition: all var(--ui-animate-time, 0.2s);
5168
- }
5169
- [style*='--ui-tab'] > .ui-tab-tab {
5170
- line-height: 40px;
5171
- padding-top: 0;
5172
- border-bottom: 0;
5173
- margin-bottom: 0;
5174
- }
5175
- .ui-tab-contents {
5176
- margin-top: 30px;
5177
- }
5178
- .ui-tab-content[role]:not(.active),
5179
- .ui-tab-content:not([role]):not(:target) {
5180
- display: none;
5181
- }
5182
- .ui-tab-contents:target-within .ui-tab-content:not(:target) {
5183
- display: none;
5184
- }
5185
- @media (prefers-reduced-motion: reduce) {
5186
- .ui-tab-tabs[style*='--ui-tab']:after {
5187
- transition: none;
5188
- }
5189
- }
5190
- :root {
5191
- --ui-table-cell-height: 50px;
5192
- --ui-table-line-height: var(--ui-line-height, 20px);
5193
- }
5194
- .ui-table,
5195
- [is='ui-table'] {
5196
- line-height: var(--ui-table-line-height);
5197
- table-layout: fixed;
5198
- border-spacing: 0;
5199
- font-size: var(--ui-font, 14px);
5200
- border: 1px solid var(--ui-border, #d0d0d5);
5201
- }
5202
- .ui-table[width='100%'],
5203
- [is='ui-table'][width='100%'] {
5204
- width: 100%;
5205
- }
5206
- .ui-table thead td,
5207
- .ui-table th,
5208
- [is='ui-table'] thead td,
5209
- [is='ui-table'] th {
5210
- background-color: var(--ui-light, #f7f9fa);
5211
- border-bottom: 1px solid var(--ui-light-border, #ededef);
5212
- font-weight: 400;
5213
- font-style: normal;
5214
- margin: 0;
5215
- }
5216
- .ui-table thead td:not([class]):not([align]),
5217
- .ui-table th:not([class]):not([align]),
5218
- [is='ui-table'] thead td:not([class]):not([align]),
5219
- [is='ui-table'] th:not([class]):not([align]) {
5220
- text-align: left;
5221
- }
5222
- .ui-table tbody td,
5223
- [is='ui-table'] tbody td {
5224
- background-color: var(--ui-white, #ffffff);
5225
- border-bottom: 1px solid var(--ui-light-border, #ededef);
5226
- }
5227
- .ui-table td,
5228
- .ui-table th,
5229
- [is='ui-table'] td,
5230
- [is='ui-table'] th {
5231
- padding-top: calc((var(--ui-table-cell-height) - var(--ui-table-line-height)) / 2);
5232
- padding-bottom: calc((var(--ui-table-cell-height) - var(--ui-table-line-height)) / 2 - 1px);
5233
- padding-right: 20px;
5234
- }
5235
- .ui-table td:first-child,
5236
- .ui-table th:first-child,
5237
- [is='ui-table'] td:first-child,
5238
- [is='ui-table'] th:first-child {
5239
- padding-left: 20px;
5240
- }
5241
- .ui-table tr,
5242
- [is='ui-table'] tr {
5243
- cursor: default;
5244
- }
5245
- .ui-table tr:last-child td,
5246
- [is='ui-table'] tr:last-child td {
5247
- padding-bottom: calc((var(--ui-table-cell-height) - var(--ui-table-line-height)) / 2);
5248
- border-bottom: 0;
5249
- }
5250
- .ui-table ~ .ui-loading,
5251
- [is='ui-table'] ~ .ui-loading {
5252
- height: 300px;
5253
- }
5254
- :root {
5255
- --ui-textarea-line-height: var(--ui-line-height, 20px);
5256
- }
5257
- textarea {
5258
- font-family: inherit;
5259
- }
5260
- textarea.ui-textarea,
5261
- [is='ui-textarea'],
5262
- .ui-textarea > textarea,
5263
- textarea ~ .ui-textarea-count {
5264
- line-height: var(--ui-textarea-line-height);
5265
- padding: 9px 8px;
5266
- border: 1px solid var(--ui-border, #d0d0d5);
5267
- border-radius: var(--ui-radius, 4px);
5268
- background-color: var(--ui-white, #ffffff);
5269
- outline: none;
5270
- color: var(--ui-dark, #4c5161);
5271
- font-size: var(--ui-font, 14px);
5272
- transition: border-color var(--ui-animate-time, 0.2s), background-color var(--ui-animate-time, 0.2s);
5273
- word-break: break-all;
5274
- vertical-align: top;
5275
- box-sizing: border-box;
5276
- max-width: 100%;
5277
- resize: none;
5278
- overflow: auto;
5279
- }
5280
- textarea[resize] {
5281
- resize: both;
5282
- }
5283
- textarea[resize='vertical'] {
5284
- resize: vertical;
5285
- }
5286
- textarea[resize='horizontal'] {
5287
- resize: horizontal;
5288
- }
5289
- div.ui-textarea > textarea,
5290
- textarea[width='100%'] {
5291
- width: 100%;
5292
- }
5293
- .ui-textarea:hover,
5294
- .ui-textarea > textarea:hover,
5295
- [is='ui-textarea']:hover,
5296
- :hover > .ui-textarea-count {
5297
- border-color: var(--ui-dark-border, #ababaf);
5298
- }
5299
- .ui-textarea:focus,
5300
- .ui-textarea > textarea:focus,
5301
- [is='ui-textarea']:focus,
5302
- :focus ~ .ui-textarea-count {
5303
- border-color: var(--ui-blue, #2a80eb);
5304
- }
5305
- .ui-textarea-x {
5306
- position: relative;
5307
- z-index: 0;
5308
- overflow: hidden;
5309
- }
5310
- span.ui-textarea-x {
5311
- display: inline-block;
5312
- }
5313
- .ui-textarea-x > textarea:only-child {
5314
- padding-bottom: 32px;
5315
- }
5316
- .ui-textarea-x > textarea:not(:only-child) {
5317
- padding-bottom: 0;
5318
- margin: 1px 1px 33px;
5319
- width: calc(100% - 2px);
5320
- border: 0;
5321
- background: none;
5322
- }
5323
- .ui-textarea-x > textarea {
5324
- display: block;
5325
- width: 100%;
5326
- margin: 0;
5327
- }
5328
- textarea ~ .ui-textarea-count {
5329
- position: absolute;
5330
- left: 0;
5331
- right: 0;
5332
- bottom: 0;
5333
- top: 0;
5334
- padding-bottom: 5px;
5335
- color: var(--ui-gray, #a2a9b6);
5336
- font-size: calc(var(--ui-font, 14px) - 2px);
5337
- display: flex;
5338
- align-items: flex-end;
5339
- justify-content: flex-end;
5340
- z-index: -1;
5341
- }
5342
- .ui-textarea-count slash {
5343
- margin: 0 1px;
5344
- }
5345
- .ui-textarea:disabled,
5346
- [is='ui-textarea']:disabled,
5347
- .ui-textarea > textarea:disabled,
5348
- :disabled ~ .ui-textarea-count {
5349
- background-color: var(--ui-light, #f7f9fa);
5350
- }
5351
- .ui-textarea:read-only,
5352
- [is='ui-textarea']:read-only,
5353
- .ui-textarea > textarea:read-only,
5354
- :read-only ~ .ui-textarea-count {
5355
- background-color: var(--ui-white, #ffffff);
5356
- }
5357
- .ui-textarea:-moz-read-only,
5358
- [is='ui-textarea']:-moz-read-only,
5359
- .ui-textarea > textarea:-moz-read-only,
5360
- :-moz-read-only ~ .ui-textarea-count {
5361
- background-color: var(--ui-white, #ffffff);
5362
- }
5363
- .ui-textarea:disabled:hover,
5364
- [is='ui-textarea']:disabled:hover,
5365
- .ui-textarea > textarea:disabled:hover,
5366
- .ui-textarea-x:hover :disabled ~ .ui-textarea-count {
5367
- border-color: var(--ui-border, #d0d0d5);
5368
- }
5369
- .ui-textarea:-moz-read-only:hover,
5370
- .ui-textarea:-moz-read-only:focus,
5371
- [is='ui-textarea']:-moz-read-only:hover,
5372
- [is='ui-textarea']:-moz-read-only:focus,
5373
- .ui-textarea > textarea:-moz-read-only:hover,
5374
- .ui-textarea > textarea:-moz-read-only:focus,
5375
- :-moz-read-only ~ .ui-textarea-count:hover,
5376
- :-moz-read-only ~ .ui-textarea-count:focus {
5377
- border-color: var(--ui-border, #d0d0d5);
5378
- }
5379
- .ui-textarea:read-only:hover,
5380
- .ui-textarea:read-only:focus,
5381
- [is='ui-textarea']:read-only:hover,
5382
- [is='ui-textarea']:read-only:focus,
5383
- .ui-textarea > textarea:read-only:hover,
5384
- .ui-textarea > textarea:read-only:focus,
5385
- :read-only ~ .ui-textarea-count:hover,
5386
- :read-only ~ .ui-textarea-count:focus {
5387
- border-color: var(--ui-border, #d0d0d5);
5388
- }
5389
- .ui-textarea:-moz-read-only:hover,
5390
- .ui-textarea:-moz-read-only:focus,
5391
- [is='ui-textarea']:-moz-read-only:hover,
5392
- [is='ui-textarea']:-moz-read-only:focus,
5393
- .ui-textarea > textarea:-moz-read-only:hover,
5394
- .ui-textarea > textarea:-moz-read-only:focus {
5395
- border-color: var(--ui-border, #d0d0d5);
5396
- }
5397
- textarea:read-only,
5398
- textarea:disabled {
5399
- resize: none;
5400
- }
5401
- textarea:-moz-read-only {
5402
- resize: none;
5403
- }
5404
- .ui-textarea[is-error],
5405
- [is='ui-textarea'][is-error],
5406
- .ui-textarea > [is-error],
5407
- [is-error] ~ .ui-textarea-count {
5408
- border-color: var(--ui-red, #eb4646) !important;
5409
- }
5410
- .ui-textarea-count > [is-error],
5411
- .ui-textarea-count[is-error] {
5412
- color: var(--ui-red, #eb4646);
5413
- }
5414
- @media (prefers-reduced-motion: reduce) {
5415
- textarea.ui-textarea,
5416
- [is='ui-textarea'],
5417
- .ui-textarea > textarea,
5418
- textarea ~ .ui-textarea-count {
5419
- transition: none;
5420
- }
5421
- }
5422
- :root {
5423
- --ui-tips-triangle-size: 6px;
5424
- --ui-tips-bg: #373c42;
5425
- --ui-tips-error-bg: linear-gradient(90deg, #ff8da2, #ec5b60);
5426
- }
5427
- .ui-tips[data-title],
5428
- [is-tips='css'][data-title] {
5429
- text-indent: 0;
5430
- position: relative;
5431
- overflow: visible;
5432
- }
5433
- .ui-tips[data-title]:before,
5434
- .ui-tips[data-title]:after,
5435
- [is-tips='css'][data-title]:before,
5436
- [is-tips='css'][data-title]:after {
5437
- position: absolute;
5438
- left: 50%;
5439
- -ms-pointer-events: none;
5440
- pointer-events: none;
5441
- transform: translate(-50%);
5442
- visibility: hidden;
5443
- content: attr(data-title);
5444
- bottom: calc(100% + 6px);
5445
- max-width: 250px;
5446
- padding: calc(6px + var(--ui-tips-triangle-size)) calc(10px + var(--ui-tips-triangle-size));
5447
- line-height: 18px;
5448
- background: var(--ui-tips-bg);
5449
- text-align: left;
5450
- color: var(--ui-white, #ffffff);
5451
- font-size: calc(var(--ui-font, 14px) - 2px);
5452
- font-style: normal;
5453
- white-space: nowrap;
5454
- }
5455
- .ui-tips[data-title]:before,
5456
- [is-tips='css'][data-title]:before {
5457
- -webkit-clip-path: inset(var(--ui-tips-triangle-size) var(--ui-tips-triangle-size) var(--ui-tips-triangle-size) var(--ui-tips-triangle-size) round calc(var(--ui-radius, 4px) - 1px));
5458
- clip-path: inset(var(--ui-tips-triangle-size) var(--ui-tips-triangle-size) var(--ui-tips-triangle-size) var(--ui-tips-triangle-size) round calc(var(--ui-radius, 4px) - 1px));
5459
- }
5460
- .ui-tips[data-title]:after,
5461
- [is-tips='css'][data-title]:after {
5462
- -webkit-clip-path: polygon(calc(50% - var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)), calc(50% + var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)), 50% 100%);
5463
- clip-path: polygon(calc(50% - var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)), calc(50% + var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)), 50% 100%);
5464
- }
5465
- .ui-tips[data-title]:hover:before,
5466
- .ui-tips[data-title]:hover:after,
5467
- .ui-tips[data-title]:focus:before,
5468
- .ui-tips[data-title]:focus:after,
5469
- [is-tips='css'][data-title]:hover:before,
5470
- [is-tips='css'][data-title]:hover:after,
5471
- [is-tips='css'][data-title]:focus:before,
5472
- [is-tips='css'][data-title]:focus:after {
5473
- transition: visibility var(--ui-animate-time, 0.2s) var(--ui-animate-time, 0.2s);
5474
- visibility: visible;
5475
- }
5476
- .ui-tips[data-title]:hover,
5477
- [is-tips='css'][data-title]:hover {
5478
- outline: none;
5479
- }
5480
- .reverse.ui-tips[data-title]:before,
5481
- .reverse.ui-tips[data-title]:after,
5482
- .reverse[is-tips='css'][data-title]:before,
5483
- .reverse[is-tips='css'][data-title]:after {
5484
- bottom: auto;
5485
- top: calc(100% + 6px);
5486
- }
5487
- .reverse.ui-tips[data-title]:after,
5488
- .reverse[is-tips='css'][data-title]:after {
5489
- -webkit-clip-path: polygon(calc(50% - var(--ui-tips-triangle-size)) calc(0% + var(--ui-tips-triangle-size) + 1px), calc(50% + var(--ui-tips-triangle-size)) calc(0% + var(--ui-tips-triangle-size) + 1px), 50% 0%);
5490
- clip-path: polygon(calc(50% - var(--ui-tips-triangle-size)) calc(0% + var(--ui-tips-triangle-size) + 1px), calc(50% + var(--ui-tips-triangle-size)) calc(0% + var(--ui-tips-triangle-size) + 1px), 50% 0%);
5491
- }
5492
- .ui-tips-x {
5493
- position: absolute;
5494
- width: fit-content;
5495
- z-index: 99;
5496
- margin-top: -6px;
5497
- max-width: 20em;
5498
- padding: calc(6px + var(--ui-tips-triangle-size)) calc(10px + var(--ui-tips-triangle-size));
5499
- line-height: 18px;
5500
- color: var(--ui-white, #fff);
5501
- font-size: calc(var(--ui-font, 14px) - 2px);
5502
- font-style: normal;
5503
- text-align: left;
5504
- }
5505
- .ui-tips-x:before,
5506
- .ui-tips-x:after {
5507
- content: '';
5508
- display: block;
5509
- position: absolute;
5510
- width: 100%;
5511
- height: 100%;
5512
- left: 0;
5513
- top: 0;
5514
- background: var(--ui-tips-bg);
5515
- }
5516
- .ui-tips-x:before {
5517
- z-index: -1;
5518
- -webkit-clip-path: inset(var(--ui-tips-triangle-size) var(--ui-tips-triangle-size) var(--ui-tips-triangle-size) var(--ui-tips-triangle-size) round calc(var(--ui-radius, 4px) - 1px));
5519
- clip-path: inset(var(--ui-tips-triangle-size) var(--ui-tips-triangle-size) var(--ui-tips-triangle-size) var(--ui-tips-triangle-size) round calc(var(--ui-radius, 4px) - 1px));
5520
- }
5521
- .ui-tips-x:after {
5522
- -webkit-clip-path: polygon(calc(50% - var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)), calc(50% + var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)), 50% 100%);
5523
- clip-path: polygon(calc(50% - var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)), calc(50% + var(--ui-tips-triangle-size)) calc(100% - (var(--ui-tips-triangle-size) + 1px)), 50% 100%);
5524
- }
5525
- @media (any-hover: none) {
5526
- html {
5527
- --hoverNone: 'true';
5528
- }
5529
- }
5530
- .ui-tips-x[data-align='8-6'],
5531
- .ui-tips-x[data-align='6-8'] {
5532
- max-width: 600px;
5533
- }
5534
- .ui-tips-x[data-align='7-5'] {
5535
- margin-top: 6px;
5536
- }
5537
- .ui-tips-x[data-align='7-5']:after {
5538
- -webkit-clip-path: polygon(calc(50% - var(--ui-tips-triangle-size)) calc(0% + (var(--ui-tips-triangle-size) + 1px)), calc(50% + var(--ui-tips-triangle-size)) calc(0% + (var(--ui-tips-triangle-size) + 1px)), 50% 0%);
5539
- clip-path: polygon(calc(50% - var(--ui-tips-triangle-size)) calc(0% + (var(--ui-tips-triangle-size) + 1px)), calc(50% + var(--ui-tips-triangle-size)) calc(0% + (var(--ui-tips-triangle-size) + 1px)), 50% 0%);
5540
- }
5541
- .ui-tips-x[data-align='2-3'] {
5542
- margin-left: 12px;
5543
- margin-top: -6px;
5544
- }
5545
- .ui-tips-x[data-align='2-3']:after {
5546
- -webkit-clip-path: polygon(calc(100% - 16px) calc(100% - (var(--ui-tips-triangle-size) + 1px)), calc(100% - (16px + var(--ui-tips-triangle-size) * 2)) calc(100% - (var(--ui-tips-triangle-size) + 1px)), calc(100% - (16px + var(--ui-tips-triangle-size))) 100%);
5547
- clip-path: polygon(calc(100% - 16px) calc(100% - (var(--ui-tips-triangle-size) + 1px)), calc(100% - (16px + var(--ui-tips-triangle-size) * 2)) calc(100% - (var(--ui-tips-triangle-size) + 1px)), calc(100% - (16px + var(--ui-tips-triangle-size))) 100%);
5548
- }
5549
- .ui-tips-x[data-align='1-4'] {
5550
- margin-left: -12px;
5551
- margin-top: -6px;
5552
- }
5553
- .ui-tips-x[data-align='1-4']:after {
5554
- -webkit-clip-path: polygon(16px calc(100% - (var(--ui-tips-triangle-size) + 1px)), calc(16px + var(--ui-tips-triangle-size) * 2) calc(100% - (var(--ui-tips-triangle-size) + 1px)), calc(16px + var(--ui-tips-triangle-size)) 100%);
5555
- clip-path: polygon(16px calc(100% - (var(--ui-tips-triangle-size) + 1px)), calc(16px + var(--ui-tips-triangle-size) * 2) calc(100% - (var(--ui-tips-triangle-size) + 1px)), calc(16px + var(--ui-tips-triangle-size)) 100%);
5556
- }
5557
- .ui-tips-x[data-align='8-6'] {
5558
- margin-left: -6px;
5559
- margin-top: 0;
5560
- }
5561
- .ui-tips-x[data-align='8-6']:after {
5562
- -webkit-clip-path: polygon(calc(100% - (var(--ui-tips-triangle-size) + 1px)) calc(50% - var(--ui-tips-triangle-size)), calc(100% - (var(--ui-tips-triangle-size) + 1px)) calc(50% + var(--ui-tips-triangle-size)), 100% 50%);
5563
- clip-path: polygon(calc(100% - (var(--ui-tips-triangle-size) + 1px)) calc(50% - var(--ui-tips-triangle-size)), calc(100% - (var(--ui-tips-triangle-size) + 1px)) calc(50% + var(--ui-tips-triangle-size)), 100% 50%);
5564
- }
5565
- .ui-tips-x[data-align='6-8'] {
5566
- margin-left: 6px;
5567
- margin-top: 0;
5568
- }
5569
- .ui-tips-x[data-align='6-8']:after {
5570
- -webkit-clip-path: polygon(calc(0% + (var(--ui-tips-triangle-size) + 1px)) calc(50% - var(--ui-tips-triangle-size)), calc(0% + (var(--ui-tips-triangle-size) + 1px)) calc(50% + var(--ui-tips-triangle-size)), 0% 50%);
5571
- clip-path: polygon(calc(0% + (var(--ui-tips-triangle-size) + 1px)) calc(50% - var(--ui-tips-triangle-size)), calc(0% + (var(--ui-tips-triangle-size) + 1px)) calc(50% + var(--ui-tips-triangle-size)), 0% 50%);
5572
- }
5573
- .ui-tips-x[data-align='3-2'] {
5574
- margin-left: 12px;
5575
- margin-top: 6px;
5576
- }
5577
- .ui-tips-x[data-align='3-2']:after {
5578
- -webkit-clip-path: polygon(calc(100% - 16px) calc(0% + (var(--ui-tips-triangle-size) + 1px)), calc(100% - (16px + var(--ui-tips-triangle-size) * 2)) calc(0% + (var(--ui-tips-triangle-size) + 1px)), calc(100% - (16px + var(--ui-tips-triangle-size))) 0%);
5579
- clip-path: polygon(calc(100% - 16px) calc(0% + (var(--ui-tips-triangle-size) + 1px)), calc(100% - (16px + var(--ui-tips-triangle-size) * 2)) calc(0% + (var(--ui-tips-triangle-size) + 1px)), calc(100% - (16px + var(--ui-tips-triangle-size))) 0%);
5580
- }
5581
- .ui-tips-x[data-align='4-1'] {
5582
- margin-left: -12px;
5583
- margin-top: 6px;
5584
- }
5585
- .ui-tips-x[data-align='4-1']:after {
5586
- -webkit-clip-path: polygon(16px calc(0% + (var(--ui-tips-triangle-size) + 1px)), calc(16px + var(--ui-tips-triangle-size) * 2) calc(0% + (var(--ui-tips-triangle-size) + 1px)), calc(16px + var(--ui-tips-triangle-size)) 0%);
5587
- clip-path: polygon(16px calc(0% + (var(--ui-tips-triangle-size) + 1px)), calc(16px + var(--ui-tips-triangle-size) * 2) calc(0% + (var(--ui-tips-triangle-size) + 1px)), calc(16px + var(--ui-tips-triangle-size)) 0%);
5588
- }
5589
- .ui-tips-error:not(.none) {
5590
- animation: fadeIn var(--ui-animate-time, 0.2s), fallDown var(--ui-animate-time, 0.2s);
5591
- }
5592
- .ui-tips-error.ui-tips-x:before,
5593
- .ui-tips-error.ui-tips-x:after {
5594
- background: var(--ui-tips-error-bg);
5595
- }
5596
- .table-x {
5597
- background-color: #fff;
5598
- border: 1px solid var(--ui-border, #d0d0d5);
5599
- }
5600
- .table-x table {
5601
- border: 0;
5602
- }
5603
- .table-null-x,
5604
- .table-error-x {
5605
- display: none;
5606
- align-items: center;
5607
- justify-content: center;
5608
- height: 300px;
5609
- flex-direction: column;
5610
- text-align: center;
5611
- -webkit-user-select: none;
5612
- -moz-user-select: none;
5613
- user-select: none;
5614
- }
5615
- .table-null-x:empty:before {
5616
- content: '\6682\65e0\6570\636e';
5617
- }
5618
- .table-error-x:empty:before {
5619
- content: '\6570\636e\83b7\53d6\5931\8d25';
5620
- }
5621
- .table-page-x,
5622
- .table-x > ui-pagination {
5623
- padding: 10px 10px 10px 20px;
5624
- margin-top: -1px;
5625
- border-top: 1px solid var(--ui-light-border, #ededed);
5626
- background-color: var(--ui-light, #f7f9fa);
5627
- position: relative;
5628
- overflow: hidden;
5629
- }
5630
- .table-x > ui-pagination {
5631
- justify-content: flex-end;
5632
- }
5633
- .table-x > ui-pagination:not([current]) {
5634
- --ui-visibility: hidden;
5635
- }
5636
- @media screen and (max-width: 640px) {
5637
- .table-page-x {
5638
- padding-left: 10px;
5639
- padding-right: 5px;
5640
- }
5641
- }
5642
- .table-page-data {
5643
- float: left;
5644
- line-height: 20px;
5645
- padding-top: 5px;
5646
- font-size: 14px;
5647
- }
5648
- .table-page-total {
5649
- margin: 0 3px;
5650
- }
5651
- .table-page-per {
5652
- display: inline-block;
5653
- margin-left: 5px;
5654
- color: var(--ui-blue, #2a80eb);
5655
- cursor: pointer;
5656
- }
5657
- .table-page-per:after {
5658
- content: '';
5659
- display: inline-block;
5660
- width: 20px;
5661
- height: 20px;
5662
- background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-205 197 200 400'%3E%3Cpath d='M-59.7 271.6c-4.2-4.1-11-4.1-15.3 0l-30.5 29.6-30.5-29.6c-4.2-4.1-11-4.1-15.3 0-4.2 4.1-4.2 10.7 0 14.8l38.2 37c4.2 4.1 11 4.1 15.3 0l38.2-37c4.1-4.1 4.1-10.7-.1-14.8z' fill='%23a2a9b6'/%3E%3Cpath d='M-58.7 471.6c-4.2-4.1-11-4.1-15.3 0l-30.5 29.6-30.5-29.6c-4.2-4.1-11-4.1-15.3 0-4.2 4.1-4.2 10.7 0 14.8l38.2 37c4.2 4.1 11 4.1 15.3 0l38.2-37c4.1-4.1 4.1-10.7-.1-14.8z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat;
5663
- background-size: 20px 40px;
5664
- vertical-align: -5px;
5665
- }
5666
- .table-page-per:hover:after {
5667
- color: var(--ui-blue, #2a80eb);
5668
- background-position: 0 -20px;
5669
- }
5670
- .table-page {
5671
- float: right;
5672
- padding-top: 2px;
5673
- }
5674
- .table-checkbox td:first-child,
5675
- .table-checkbox th:first-child {
5676
- width: 20px;
5677
- padding-right: 0;
5678
- padding-left: 18px;
5679
- text-align: right;
5680
- }
5681
- .table-checkbox td:first-child + td,
5682
- .table-checkbox th:first-child + th {
5683
- padding-left: 13px;
5684
- }
5685
- .table-checkbox tr:hover td {
5686
- background-color: var(--ui-list-hover, #f0f7ff);
5687
- }
5688
- .table-checkbox tr.selected td {
5689
- background-color: var(--ui-list-selected, #e0f0ff);
5690
- }
5691
- .table-header {
5692
- padding: 12px 20px;
5693
- border-bottom: 1px solid var(--ui-light-border, #ededed);
5694
- }
5695
- .table-title {
5696
- line-height: 56px;
5697
- font-size: 24px;
5698
- margin: 0;
5699
- }
5700
- .gpt-container {
5701
- height: 100%;
5702
- display: flex;
5703
- position: relative;
5704
- flex-direction: column;
5705
- }
5706
- .gpt-container * {
5707
- box-sizing: border-box;
5708
- }
5709
- .gpt-container .scroll-container {
5710
- flex: 1;
5711
- padding: 18px;
5712
- overflow: auto;
5713
- }
5714
- .gpt-container .scroll-container .common-container {
5715
- width: 100%;
5716
- display: flex;
5717
- font-size: 14px;
5718
- letter-spacing: 1.8px;
5719
- font-weight: 400;
5720
- margin-bottom: 16px;
5721
- }
5722
- .gpt-container .scroll-container .reply-container {
5723
- justify-content: flex-start;
5724
- }
5725
- .gpt-container .scroll-container .question-container {
5726
- justify-content: flex-end;
5727
- }
5728
- .gpt-container .scroll-container .stop-container {
5729
- justify-content: center;
5730
- }
5731
- .gpt-container .scroll-container .stop-content {
5732
- width: 100px;
5733
- height: 32px;
5734
- border-radius: 16px;
5735
- background: #4b9af91a;
5736
- color: #4b9af9;
5737
- font-size: 16px;
5738
- display: flex;
5739
- align-items: center;
5740
- justify-content: center;
5741
- }
5742
- .gpt-container .scroll-container .stop-content .icon {
5743
- margin-right: 10px;
5744
- }
5745
- .gpt-container .scroll-container .reply-content {
5746
- max-width: 90%;
5747
- padding: 8px;
5748
- background: #f2f5fc;
5749
- border-radius: 0 10px 10px;
5750
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
5751
- }
5752
- .gpt-container .scroll-container .reply-content .rk-markdown-body {
5753
- color: #323232;
5754
- }
5755
- .gpt-container .scroll-container .reply-content .disclaimer {
5756
- font-size: 12px;
5757
- color: #959595;
5758
- letter-spacing: 0;
5759
- margin-top: 10px;
5760
- }
5761
- .gpt-container .scroll-container .gpt-input > span:after {
5762
- animation: blink 1s steps(5, start) infinite;
5763
- content: '\258b';
5764
- margin-left: 10px;
5765
- vertical-align: baseline;
5766
- color: #468ffc;
5767
- }
5768
- .gpt-container .scroll-container .question-content {
5769
- color: #fff;
5770
- max-width: 300px;
5771
- padding: 10px 12px;
5772
- font-size: 15px;
5773
- font-weight: 500;
5774
- background: linear-gradient(to right, #356fff, #6383f7);
5775
- border-radius: 16px 16px 0;
5776
- }
5777
- .gpt-container .to-working-table {
5778
- height: 40px;
5779
- display: flex;
5780
- align-items: center;
5781
- }
5782
- .gpt-container .to-working-table .btn {
5783
- height: 28px;
5784
- cursor: pointer;
5785
- color: #3770fe;
5786
- margin-left: 10px;
5787
- text-align: center;
5788
- font-size: 12px;
5789
- font-weight: 700;
5790
- border-radius: 4px;
5791
- padding: 0 5px;
5792
- line-height: 28px;
5793
- background: rgba(55, 112, 254, 0.1);
5794
- box-sizing: border-box;
5795
- border: 1px solid #3770fe;
5796
- }
5797
- .gpt-container .send-message {
5798
- height: 120px;
5799
- display: flex;
5800
- flex-direction: column;
5801
- justify-content: space-between;
5802
- border-top: 1px solid #e7eced;
5803
- }
5804
- .gpt-container .send-message .btn-container {
5805
- margin-right: 10px;
5806
- margin-bottom: 10px;
5807
- text-align: right;
5808
- }
5809
- .gpt-container .send-message .btn-container .ui-button {
5810
- height: 30px;
5811
- line-height: 10px;
5812
- }
5813
- .gpt-container .send-message .btn-container .send-btn {
5814
- background: #3770fe;
5815
- }
5816
- .gpt-container .send-message .ui-textarea {
5817
- width: 100%;
5818
- border: none;
5819
- flex: 1;
5820
- }
5821
- .gpt-container .send-message .default-view {
5822
- height: 100%;
5823
- display: flex;
5824
- flex-direction: column;
5825
- align-items: center;
5826
- }
5827
- .gpt-container .send-message .default-view > div {
5828
- height: 30px;
5829
- width: 200px;
5830
- line-height: 30px;
5831
- text-align: center;
5832
- border-radius: 6px;
5833
- background: rgba(54, 110, 248, 0.1);
5834
- color: #3770fe;
5835
- font-size: 12px;
5836
- font-weight: 500;
5837
- margin-top: 10px;
5838
- cursor: pointer;
5839
- }
5840
- .gpt-container .send-message .default-view .ui-button {
5841
- height: 30px;
5842
- line-height: 10px;
5843
- margin-top: 10px;
5844
- background: #3770fe;
5845
- }
5846
- .register-container input::-webkit-outer-spin-button,
5847
- .register-container input::-webkit-inner-spin-button {
5848
- -webkit-appearance: none;
5849
- }
5850
- .register-container input[type='number'] {
5851
- -moz-appearance: textfield;
5852
- }
5853
- .register-container {
5854
- padding: 50px 15px 0;
5855
- }
5856
- .register-container .register-title {
5857
- color: #323232;
5858
- font-size: 18px;
5859
- font-weight: 500;
5860
- text-align: center;
5861
- }
5862
- .register-container .form-item {
5863
- margin-top: 20px;
5864
- }
5865
- .register-container .form-item .form-label {
5866
- padding-left: 5px;
5867
- color: #828e9a;
5868
- font-size: 12px;
5869
- font-weight: 500;
5870
- margin-bottom: 6px;
5871
- }
5872
- .register-container .form-item .ver-code-input {
5873
- position: relative;
5874
- }
5875
- .register-container .form-item .ver-code-input .btn {
5876
- cursor: pointer;
5877
- position: absolute;
5878
- right: 0;
5879
- height: 40px;
5880
- padding: 0 10px;
5881
- line-height: 40px;
5882
- font-size: 14px;
5883
- color: #3770fe;
5884
- font-weight: 500;
5885
- }
5886
- .register-container .form-item .ver-code-input .btn-disabled {
5887
- color: #828e9a;
5888
- }
5889
- .register-container .form-item .ui-input {
5890
- width: 100%;
5891
- }
5892
- .register-container .register-submit {
5893
- margin-top: 100px;
5894
- width: 100%;
5895
- background: #3770fe;
5896
- }
5897
- .register-container .result-container {
5898
- text-align: center;
5899
- padding-top: 40px;
5900
- }
5901
- .register-container .result-container img {
5902
- width: 120px;
5903
- height: 120px;
5904
- }
5905
- .gpt-logo {
5906
- width: 56px;
5907
- height: 56px;
5908
- border-radius: 50%;
5909
- position: fixed;
5910
- right: 20px;
5911
- bottom: 20px;
5912
- background: linear-gradient(170deg, #356fff 6%, #6383f7 111%);
5913
- box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.1), inset 6px 5px 10px rgba(255, 255, 255, 0.12);
5914
- }
5915
- .gpt-logo .img-container {
5916
- width: 100%;
5917
- height: 100%;
5918
- display: flex;
5919
- align-items: center;
5920
- justify-content: center;
5921
- cursor: pointer;
5922
- }
5923
- .gpt-logo .img-container .logo-img {
5924
- width: 40px;
5925
- height: 40px;
5926
- }
5927
- .gpt-logo .rk-gpt-container {
5928
- left: -330px;
5929
- bottom: 0;
5930
- height: 600px;
5931
- width: 320px;
5932
- overflow: hidden;
5933
- position: absolute;
5934
- border-radius: 14px;
5935
- background-color: #fff;
5936
- flex-direction: column;
5937
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
5938
- }
5939
- .gpt-logo .rk-gpt-container ::-webkit-scrollbar {
5940
- width: 3px;
5941
- }
5942
- .gpt-logo .rk-gpt-container ::-webkit-scrollbar-track {
5943
- background-color: transparent;
5944
- }
5945
- .gpt-logo .rk-gpt-container ::-webkit-scrollbar-thumb {
5946
- background-color: #d4d4d4;
5947
- border-radius: 2em;
5948
- }
5949
- .gpt-logo .rk-gpt-container .common-title {
5950
- padding: 0 20px;
5951
- height: 70px;
5952
- display: flex;
5953
- align-items: center;
5954
- justify-content: space-between;
5955
- background: linear-gradient(180deg, #356fff 0%, #6383f7 100%);
5956
- }
5957
- .gpt-logo .rk-gpt-container .common-title .title-left {
5958
- display: flex;
5959
- align-items: center;
5960
- }
5961
- .gpt-logo .rk-gpt-container .common-title .title-left .logo {
5962
- width: 36px;
5963
- height: 36px;
5964
- margin-right: 11px;
5965
- }
5966
- .gpt-logo .rk-gpt-container .common-title .title-left .title {
5967
- color: #fff;
5968
- font-size: 16px;
5969
- font-weight: 500;
5970
- }
5971
- .gpt-logo .rk-gpt-container .common-title .close-view {
5972
- width: 40px;
5973
- text-align: right;
5974
- cursor: pointer;
5975
- margin-top: 10px;
5976
- color: #fff;
5977
- font-size: 24px;
5978
- font-weight: 700;
5979
- }
5980
- .gpt-logo .rk-gpt-container .toast-container {
5981
- position: absolute;
5982
- top: 50%;
5983
- left: calc(50% - 90px);
5984
- width: 180px;
5985
- text-align: center;
5986
- }
5987
- .gpt-logo .rk-gpt-container .toast-container .toast-view {
5988
- max-width: 180px;
5989
- text-align: center;
5990
- padding: 5px 10px;
5991
- font-size: 14px;
5992
- font-weight: 500;
5993
- color: #fff;
5994
- border-radius: 3px;
5995
- background: rgba(0, 0, 0, 0.7);
5996
- }
5997
-