@3deye-toolkit/react-camera 0.0.1-alpha.22 → 0.0.1-alpha.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/react-camera.css +367 -204
  2. package/dist/react-camera.js +2 -2
  3. package/dist/tsdoc-metadata.json +1 -1
  4. package/package.json +19 -18
  5. package/dist/react-camera.d.ts +0 -902
package/dist/react-camera.css CHANGED
@@ -5,6 +5,11 @@
5
5
  .x-3deye-player {
6
6
  position: relative;
7
7
  background-color: black;
8
+ }
9
+
10
+ .x-3deye-player__zoomable-wrapper {
11
+ width: 100%;
12
+ height: 100%;
8
13
  overflow: hidden;
9
14
  }
10
15
 
@@ -28,18 +33,28 @@
28
33
  background: none;
29
34
  border: none;
30
35
  position: relative;
31
- padding: 4px;
36
+ padding: 0 8px;
37
+ height: 32px;
32
38
  text-transform: uppercase;
33
39
  -webkit-user-select: none;
34
40
  -moz-user-select: none;
35
41
  -ms-user-select: none;
36
42
  user-select: none;
37
- font-family: 'Roboto', sans-serif;
38
- text-align: center;
39
- align-items: flex-start;
43
+ display: inline-flex;
44
+ justify-content: center;
45
+ align-items: center;
46
+ border-radius: 4px;
47
+ letter-spacing: .0107142857em;
48
+ font-weight: 500;
49
+ }
50
+
51
+ .x-3deye-button sup {
52
+ position: relative;
53
+ top: -0.5em;
54
+ left: 0.25em;
40
55
  }
41
56
 
42
- .x-3deye-button.fullwidth {
57
+ .x-3deye-button.x-3deye-button--fullwidth {
43
58
  width: 100%;
44
59
  }
45
60
 
@@ -50,6 +65,7 @@
50
65
 
51
66
  .x-3deye-button--icon {
52
67
  border-radius: 16px;
68
+ padding: 4px;
53
69
  width: 32px;
54
70
  height: 32px;
55
71
  display: inline-flex;
@@ -61,52 +77,49 @@
61
77
  opacity: 0.4;
62
78
  }
63
79
 
64
- .x-3deye-button.x-3deye-button--ok,
65
- .x-3deye-button.x-3deye-button--cancel {
66
- color: white;
67
- border-radius: 4px;
68
- text-transform: none;
69
- margin: 4px;
70
- min-width: 80px;
71
- }
72
-
73
- .x-3deye-button.x-3deye-button--ok.fullwidth,
74
- .x-3deye-button.x-3deye-button--cancel.fullwidth {
75
- width: calc(100% - 8px);
76
- }
77
-
78
80
  .x-3deye-button:not(:disabled) {
79
81
  cursor: pointer;
80
82
  }
81
83
 
82
- .x-3deye-button.x-3deye-button--ok {
83
- background-color: #27b9a1;
84
+ .x-3deye-button.x-3deye-button--filled,
85
+ .x-3deye-button.x-3deye-button--text {
86
+ min-width: 80px;
87
+ text-transform: capitalize;
88
+ font-family: 'Roboto', sans-serif;
89
+ font-size: 0.875rem;
90
+ font-weight: 500;
91
+ border-radius: 0.25rem;
92
+ padding: 0 1rem;
84
93
  }
85
94
 
86
- .x-3deye-button.x-3deye-button--ok:not(:disabled):hover {
95
+ .x-3deye-button.x-3deye-button--filled {
96
+ background-color: #27b9a1;
97
+ color: white;
98
+ }
99
+
100
+ .x-3deye-button.x-3deye-button--filled:not(:disabled):hover {
87
101
  background-color: #61beaf;
88
102
  }
89
103
 
90
- .x-3deye-button.x-3deye-button--ok:focus {
104
+ .x-3deye-button.x-3deye-button--filled:focus {
91
105
  transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
92
106
  box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
93
107
  }
94
108
 
95
- .x-3deye-button.x-3deye-button--cancel {
96
- background-color: rgb(119, 87, 178);
97
- }
98
-
99
- .x-3deye-button.x-3deye-button--cancel:not(:disabled):hover {
100
- background-color: rgb(142, 122, 180);
109
+ .x-3deye-button canvas {
110
+ color: rgb(var(--surface-highlight-rgb));
101
111
  }
102
112
 
103
- .x-3deye-button.x-3deye-button--cancel:focus {
104
- transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
105
- box-shadow: 0 0 0 2px rgba(119, 87, 178, 0.33);
113
+ .x-3deye-button--overlay {
114
+ pointer-events: auto;
115
+ background: rgba(0, 0, 0, 0.5);
116
+ border: 2px solid rgba(255, 255, 255, 0.25);
117
+ color: white;
106
118
  }
107
119
 
108
- .x-3deye-button canvas {
109
- color: rgb(var(--surface-highlight-rgb));
120
+ .x-3deye-button.x-3deye-button--overlay:focus, .x-3deye-button.x-3deye-button--overlay:not(:disabled):hover {
121
+ background: rgba(0, 0, 0, 0.5);
122
+ border: 2px solid rgba(255, 255, 255, 0.5);
110
123
  }
111
124
 
112
125
  :root {
@@ -333,149 +346,154 @@
333
346
  }
334
347
 
335
348
  .x-3deye-player__overlay {
336
- position: absolute;
337
- top: 0;
338
- left: 0;
339
- bottom: 0;
340
- right: 0;
341
- color: white;
349
+ position: absolute;
350
+ top: 0;
351
+ left: 0;
352
+ bottom: 0;
353
+ right: 0;
354
+ color: white;
342
355
  }
343
356
 
344
357
  .x-3deye-player__controls {
345
- position: absolute;
346
- left: 0;
347
- bottom: 0;
348
- right: 0;
349
- height: 54px;
350
- opacity: 0;
351
- display: flex;
352
- pointer-events: none;
358
+ position: absolute;
359
+ left: 0;
360
+ bottom: 0;
361
+ right: 0;
362
+ height: 54px;
363
+ opacity: 0;
364
+ display: flex;
365
+ pointer-events: none;
353
366
  }
354
367
 
355
368
  .x-3deye-player__controls > * {
356
- pointer-events: auto;
369
+ pointer-events: auto;
357
370
  }
358
371
 
359
- .x-3deye-player__overlay:hover .x-3deye-player__controls, .x-3deye-player__controls:focus-within, .x-3deye-player--paused .x-3deye-player__controls {
360
- opacity: 1;
372
+ .x-3deye-player__overlay:hover .x-3deye-player__controls,
373
+ .x-3deye-player__controls:focus-within,
374
+ .x-3deye-player--paused .x-3deye-player__controls {
375
+ opacity: 1;
361
376
  }
362
377
 
363
378
  .x-3deye-player__indicators {
364
- display: flex;
365
- pointer-events: none;
366
- align-items: center;
379
+ display: flex;
380
+ pointer-events: none;
381
+ align-items: center;
367
382
  }
368
383
 
369
384
  .x-3deye-player__indicators > * {
370
- margin: 5px;
385
+ margin: 5px;
371
386
  }
372
387
 
373
388
  .x-3deye-player__overlay .x-3deye-button--live {
374
- opacity: 0;
375
- margin: 3px 5px;
389
+ opacity: 0;
390
+ margin: 3px 5px;
376
391
  }
377
392
 
378
- .x-3deye-player__overlay:hover .x-3deye-button--live, .x-3deye-button--live:focus {
379
- opacity: 1;
393
+ .x-3deye-player__overlay:hover .x-3deye-button--live,
394
+ .x-3deye-button--live:focus {
395
+ opacity: 1;
380
396
  }
381
397
 
382
398
  .x-3deye-player__overlay .x-3deye-player__camera-name {
383
- pointer-events: auto;
399
+ pointer-events: auto;
384
400
  }
385
401
 
386
402
  .x-3deye-player__current-time {
387
- line-height: 16px;
388
- font-size: 11px;
389
- text-shadow: 1px 1px 1px black;
390
- background-color: rgba(0, 0, 0, 0.25);
391
- padding: 2px 16px;
392
- border-radius: 16px;
403
+ line-height: 16px;
404
+ font-size: 11px;
405
+ text-shadow: 1px 1px 1px black;
406
+ background-color: rgba(0, 0, 0, 0.25);
407
+ padding: 2px 16px;
408
+ border-radius: 16px;
393
409
  }
394
410
 
395
411
  .x-3deye-player__current-time--synced {
396
- background-color: rgb(147, 221, 30, 0.6);
412
+ background-color: rgb(147, 221, 30, 0.6);
397
413
  }
398
414
 
399
415
  .x-3deye-player__zoom-preview {
400
- display: flex;
401
- flex-direction: column;
402
- position: absolute;
403
- right: 40px;
404
- top: 50%;
405
- transform: translateY(-50%);
406
- background-color: rgba(0, 0, 0, 0.7);
407
- border: 1px solid white;
416
+ display: flex;
417
+ flex-direction: column;
418
+ position: absolute;
419
+ right: 44px;
420
+ top: 50%;
421
+ transform: translateY(-50%);
422
+ background-color: rgba(0, 0, 0, 0.7);
423
+ border: 1px solid white;
408
424
  }
409
425
 
410
426
  .x-3deye-player__zoom-preview .zoom-value {
411
- position: absolute;
412
- top: 0;
413
- left: 0;
414
- right: 0;
415
- bottom: 0;
416
- display: flex;
417
- justify-content: center;
418
- align-items: center;
419
- font-family: monospace;
420
- font-size: 32px;
421
- font-weight: bold;
422
- color: white;
423
- text-shadow: 0 1px 1px black;
427
+ position: absolute;
428
+ top: 0;
429
+ left: 0;
430
+ right: 0;
431
+ bottom: 0;
432
+ display: flex;
433
+ justify-content: center;
434
+ align-items: center;
435
+ font-family: monospace;
436
+ font-size: 32px;
437
+ font-weight: bold;
438
+ color: white;
439
+ text-shadow: 0 1px 1px black;
424
440
  }
425
441
 
426
442
  .x-3deye-player__zoom-preview .x-3deye-player__zoomable {
427
- position: relative;
428
- flex: 1;
429
- background-color: rgba(255, 255, 255, 0.5);
443
+ position: relative;
444
+ flex: 1;
445
+ background-color: rgba(255, 255, 255, 0.5);
430
446
  }
431
447
 
432
448
  .x-3deye-player__zoom-slider {
433
- position: absolute;
434
- right: 10px;
435
- top: 50%;
436
- transform: translateY(-50%);
437
- width: 30px;
438
- padding: 10px 5px;
439
- background-color: rgba(0, 0, 0, 0.5);
440
- border-radius: 4px;
441
- -webkit-backdrop-filter: blur(2px);
442
- backdrop-filter: blur(2px);
449
+ position: absolute;
450
+ right: 10px;
451
+ top: 50%;
452
+ transform: translateY(-50%);
453
+ width: 34px;
454
+ padding: 10px 5px;
455
+ background-color: rgba(0, 0, 0, 0.5);
456
+ border: 2px solid rgba(255, 255, 255, 0.25);
457
+ border-radius: 4px;
458
+ -webkit-backdrop-filter: blur(2px);
459
+ backdrop-filter: blur(2px);
443
460
  }
444
461
 
445
462
  .x-3deye-player__zoom-slider .tick {
446
- margin-left: 4px;
447
- width: 12px;
448
- height: 10px;
449
- border-top: 1px solid rgba(255, 255, 255, 0.4);
463
+ margin-left: 4px;
464
+ width: 12px;
465
+ height: 10px;
466
+ border-top: 1px solid rgba(255, 255, 255, 0.4);
450
467
  }
451
468
 
452
469
  .x-3deye-player__zoom-slider .tick:nth-child(5n + 1) {
453
- margin-left: 0px;
454
- width: 20px;
455
- border-top-width: 2px;
470
+ margin-left: 0px;
471
+ width: 20px;
472
+ border-top-width: 2px;
456
473
  }
457
474
 
458
475
  .x-3deye-player__zoom-slider .tick:last-child {
459
- height: 0;
476
+ height: 0;
460
477
  }
461
478
 
462
479
  .x-3deye-player__zoom-slider .rotation-button {
463
- margin-left: -4px;
464
- margin-bottom: -4px;
465
- width: 28px;
466
- text-align: right;
467
- color: white;
480
+ padding: 0;
481
+ margin-left: -4px;
482
+ margin-bottom: -4px;
483
+ width: 28px;
484
+ text-align: right;
485
+ color: white;
468
486
  }
469
487
 
470
488
  .x-3deye-player__zoom-preview {
471
- display: none;
489
+ display: none;
472
490
  }
473
491
 
474
492
  .x-3deye-player__zoom-slider:hover + .x-3deye-player__zoom-preview,
475
493
  .x-3deye-player__zoom-slider + .x-3deye-player__zoom-preview:focus,
476
494
  .x-3deye-player__zoom-preview:hover,
477
495
  .x-3deye-player__zoom-preview:focus {
478
- display: block;
496
+ display: block;
479
497
  }
480
498
 
481
499
  .x-3deye-player__controls {
@@ -488,11 +506,12 @@
488
506
  flex: 1;
489
507
  }
490
508
 
491
- .x-3deye-player__control {
509
+ .x-3deye-button.x-3deye-player__control {
492
510
  width: 38px;
493
511
  height: 38px;
494
512
  background-color: rgb(26,30,29, 0.8);
495
513
  color: rgba(255, 255, 255, 0.6);
514
+ border-radius: 0;
496
515
  display: flex;
497
516
  justify-content: center;
498
517
  align-items: center;
@@ -502,6 +521,10 @@
502
521
  padding: 0;
503
522
  }
504
523
 
524
+ .x-3deye-player__controls--compact .x-3deye-player__control .icon {
525
+ width: 20px;
526
+ }
527
+
505
528
  .x-3deye-player__control--reflowed {
506
529
  width: 20px;
507
530
  }
@@ -541,7 +564,7 @@
541
564
  border-bottom-right-radius: 4px;
542
565
  }
543
566
 
544
- .x-3deye-player__control-close {
567
+ .x-3deye-button.x-3deye-player__control-close {
545
568
  background-color: rgba(156, 51, 49, 0.8);
546
569
  }
547
570
 
@@ -567,133 +590,184 @@
567
590
  box-shadow: 0 0 0 0.2rem rgba(20, 69, 101, 0.5);
568
591
  }
569
592
 
570
- .volume-control:hover .volume-range, .volume-control:focus .volume-range {
571
- visibility: visible;
572
- transition: visibility 0s;
593
+ .volume-control:hover .volume-range,
594
+ .volume-control:focus .volume-range,
595
+ .volume-control:focus-within .volume-range {
596
+ visibility: visible;
597
+ transition: visibility 0s;
573
598
  }
574
599
 
575
600
  .volume-range {
576
- background-color: rgba(26,30,29, 0.5);
577
- padding: 4px;
578
- border-radius: 4px;
579
- position: absolute;
580
- height: 32px;
581
- top: -28px;
582
- left: 0;
583
- visibility: hidden;
584
- transition: visibility 0s 0.5s;
585
- transform-origin: 16px 12px;
586
- transform: rotate(270deg);
601
+ --surface-inverse: rgba(255, 255, 255, 0.15);
602
+ --surface-highlight-rgb: 255, 255, 255;
603
+ --primary-color: #0067ac;
604
+ --on-primary-color: white;
605
+ background-color: rgba(26, 30, 29, 0.5);
606
+ padding: 16px 4px;
607
+ border-radius: 4px;
608
+ position: absolute;
609
+ display: flex;
610
+ justify-content: center;
611
+ width: 32px;
612
+ height: 140px;
613
+ bottom: 100%;
614
+ left: 0;
615
+ visibility: hidden;
616
+ transition: visibility 0s 0.5s;
617
+ transform-origin: 16px 12px;
587
618
  }
588
619
 
620
+ .x-3deye-slider {
621
+ position: relative;
622
+ display: flex;
623
+ align-items: center;
624
+ }
589
625
 
590
- .box-selector {
591
- border: 2px solid deepskyblue;
592
- background-color: rgba(0, 191, 255, 0.5);
626
+ .x-3deye-slider:focus-visible {
627
+ outline: none;
593
628
  }
594
629
 
595
- .box-selector-close {
596
- background-color: skyblue;
597
- transition: 0.2s ease-in;
598
- color: #026282;
630
+ .x-3deye-slider.horizontal {
631
+ width: 100%;
632
+ height: 20px;
599
633
  }
600
634
 
601
- .box-selector-close:hover {
602
- color: white;
635
+ .x-3deye-slider.vertical {
636
+ width: 20px;
637
+ height: 100%;
638
+ flex-direction: column;
603
639
  }
604
640
 
605
- .box-selector-preview {
606
- width: 40px;
607
- height: 40px;
608
- position: relative;
609
- margin: 20px 20px 0px 10px;
641
+ .x-3deye-slider__track {
642
+ background: var(--surface-inverse, gainsboro);
643
+ position: relative;
644
+ flex: 1;
610
645
  }
611
646
 
612
- @-webkit-keyframes expand-box-selector-preview {
613
- from {
614
- width: 20px;
615
- height: 16px;
616
- }
647
+ .x-3deye-slider__bar {
648
+ background-color: var(--primary-color, #0067ac);
649
+ position: absolute;
650
+ }
617
651
 
618
- to {
619
- width: 50px;
620
- height: 30px;
621
- }
652
+ .x-3deye-slider.disabled .x-3deye-slider__bar {
653
+ background-color: rgb(165, 165, 165);
622
654
  }
623
655
 
624
- @keyframes expand-box-selector-preview {
625
- from {
626
- width: 20px;
627
- height: 16px;
628
- }
656
+ .x-3deye-slider.horizontal .x-3deye-slider__bar {
657
+ top: 0;
658
+ bottom: 0;
659
+ left: 0;
660
+ }
629
661
 
630
- to {
631
- width: 50px;
632
- height: 30px;
633
- }
662
+ .x-3deye-slider.vertical .x-3deye-slider__bar {
663
+ bottom: 0;
664
+ left: 0;
665
+ right: 0;
634
666
  }
635
667
 
636
- .box-selector-preview .box-selector {
637
- /* width: 20px;
638
- height: 16px; */
639
- width: 50px;
640
- height: 30px;
641
- position: relative;
642
- will-change: width, height;
668
+ .x-3deye-slider.horizontal .x-3deye-slider__track {
669
+ height: 3px;
670
+ }
643
671
 
644
- -webkit-animation-duration: 0.5s;
672
+ .x-3deye-slider.vertical .x-3deye-slider__track {
673
+ width: 3px;
674
+ }
645
675
 
646
- animation-duration: 0.5s;
647
- -webkit-animation-name: expand-box-selector-preview;
648
- animation-name: expand-box-selector-preview;
676
+ .x-3deye-slider__thumb {
677
+ will-change: transform box-shadow;
678
+ background: white;
679
+ box-shadow: 0 0 0 6px rgba(0, 100, 255, 0), 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
680
+ width: 20px;
681
+ height: 20px;
682
+ border-radius: 50%;
683
+ transition: box-shadow 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
649
684
  }
650
685
 
651
- .box-selector-preview .icon {
652
- position: absolute;
653
- bottom: -7px;
654
- right: -7px;
686
+ .x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover,
687
+ .x-3deye-slider:focus .x-3deye-slider__thumb {
688
+ box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
689
+ 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
655
690
  }
656
691
 
657
- /* .box-selector-select:hover .box-selector {
658
- width: 50px;
659
- height: 30px;
660
- } */
692
+ .x-3deye-slider:focus .x-3deye-slider__thumb.active {
693
+ box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
694
+ 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
695
+ }
661
696
 
662
- .box-selector-select {
663
- color: rgba(255, 255, 255, 0.8);
664
- background-color: rgba(0, 0, 0, 0.5);
665
- -webkit-backdrop-filter: blur(2px);
666
- backdrop-filter: blur(2px);
667
- text-transform: uppercase;
668
- font-weight: bold;
669
- text-align: center;
697
+ .x-3deye-slider.horizontal .x-3deye-slider__thumb {
698
+ margin-left: -10px;
699
+ }
700
+
701
+ .x-3deye-slider.vertical .x-3deye-slider__thumb {
702
+ margin-bottom: -10px;
703
+ }
704
+
705
+ .x-3deye-slider__label {
706
+ pointer-events: none;
707
+ touch-action: none;
708
+ will-change: transform;
709
+ transform: translate(-50%, -100%) scale(0);
710
+ background: var(--primary-color, #0067ac);
711
+ bottom: 50%;
712
+ left: 50%;
713
+ color: var(--on-primary-color, white);
714
+ font-size: 0.75rem;
670
715
  border-radius: 4px;
671
- padding: 8px;
672
- width: content-width;
716
+ width: -webkit-fit-content;
717
+ width: -moz-fit-content;
718
+ width: fit-content;
719
+ min-width: 24px;
720
+ padding: 4px 8px;
721
+ position: relative;
722
+ transition: transform 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
723
+ transform-origin: center bottom;
673
724
  }
674
725
 
675
- .box-selector-cancel {
676
- pointer-events: auto;
726
+ .x-3deye-slider__label.open,
727
+ .x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover .x-3deye-slider__label,
728
+ .x-3deye-slider:focus .x-3deye-slider__label {
729
+ transform: translate(-50%, -100%) scale(1);
730
+ }
731
+
732
+ .x-3deye-slider__label::before {
733
+ content: '';
734
+ display: block;
735
+ position: absolute;
736
+ top: 100%;
737
+ left: calc(50% - 5px);
738
+ width: 0;
739
+ height: 0;
740
+ border-left: 5px solid transparent;
741
+ border-right: 5px solid transparent;
742
+ border-top: 5px solid var(--primary-color, #0067ac);
677
743
  }
678
744
 
679
745
  .ptz-popover.x-3deye-popover-body {
680
- border-radius: 6px;
681
- background-color: rgba(15, 15, 20, 0.7);
682
- box-shadow: none;
683
- color: rgba(255, 255, 255, 0.8);
684
- border: 1px solid rgba(255, 255, 255, 0.2);
685
- -webkit-backdrop-filter: blur(1px);
686
- backdrop-filter: blur(1px);
746
+ border-radius: 6px;
747
+ background-color: rgba(15, 15, 20, 0.7);
748
+ box-shadow: none;
749
+ color: rgba(255, 255, 255, 0.8);
750
+ border: 1px solid rgba(255, 255, 255, 0.2);
751
+ -webkit-backdrop-filter: blur(1px);
752
+ backdrop-filter: blur(1px);
687
753
  }
688
754
 
689
755
  .ptz-popover .tip {
690
- fill: rgba(15, 15, 20, 0.5);
756
+ fill: rgba(15, 15, 20, 0.5);
757
+ }
758
+
759
+ .ptz-popover {
760
+ --surface-inverse: rgba(255, 255, 255, 0.15);
761
+ --surface-highlight-rgb: 255, 255, 255;
762
+ --primary-color: #0067ac;
763
+ --on-primary-color: white;
691
764
  }
692
765
 
693
766
  .segmented-control-wrapper {
694
767
  display: inline-grid;
695
768
  border-radius: 6px;
696
- background: rgba(0, 0, 0, 0.065);
769
+ /* background: rgba(0, 0, 0, 0.065); */
770
+ background-color: var(--surface-inverse);
697
771
  }
698
772
 
699
773
  .segmented-control {
@@ -750,3 +824,92 @@
750
824
  .segmented-control-button.current {
751
825
  color: black;
752
826
  }
827
+
828
+ .box-selector {
829
+ border: 2px solid deepskyblue;
830
+ background-color: rgba(0, 191, 255, 0.5);
831
+ }
832
+
833
+ .box-selector-close {
834
+ background-color: skyblue;
835
+ transition: 0.2s ease-in;
836
+ color: #026282;
837
+ }
838
+
839
+ .box-selector-close:hover {
840
+ color: white;
841
+ }
842
+
843
+ .box-selector-preview {
844
+ width: 40px;
845
+ height: 40px;
846
+ position: relative;
847
+ margin: 20px 20px 0px 10px;
848
+ }
849
+
850
+ @-webkit-keyframes expand-box-selector-preview {
851
+ from {
852
+ width: 20px;
853
+ height: 16px;
854
+ }
855
+
856
+ to {
857
+ width: 50px;
858
+ height: 30px;
859
+ }
860
+ }
861
+
862
+ @keyframes expand-box-selector-preview {
863
+ from {
864
+ width: 20px;
865
+ height: 16px;
866
+ }
867
+
868
+ to {
869
+ width: 50px;
870
+ height: 30px;
871
+ }
872
+ }
873
+
874
+ .box-selector-preview .box-selector {
875
+ /* width: 20px;
876
+ height: 16px; */
877
+ width: 50px;
878
+ height: 30px;
879
+ position: relative;
880
+ will-change: width, height;
881
+
882
+ -webkit-animation-duration: 0.5s;
883
+
884
+ animation-duration: 0.5s;
885
+ -webkit-animation-name: expand-box-selector-preview;
886
+ animation-name: expand-box-selector-preview;
887
+ }
888
+
889
+ .box-selector-preview .icon {
890
+ position: absolute;
891
+ bottom: -7px;
892
+ right: -7px;
893
+ }
894
+
895
+ /* .box-selector-select:hover .box-selector {
896
+ width: 50px;
897
+ height: 30px;
898
+ } */
899
+
900
+ .box-selector-select {
901
+ color: rgba(255, 255, 255, 0.8);
902
+ background-color: rgba(0, 0, 0, 0.5);
903
+ -webkit-backdrop-filter: blur(2px);
904
+ backdrop-filter: blur(2px);
905
+ text-transform: uppercase;
906
+ font-weight: bold;
907
+ text-align: center;
908
+ border-radius: 4px;
909
+ padding: 8px;
910
+ width: content-width;
911
+ }
912
+
913
+ .box-selector-cancel {
914
+ pointer-events: auto;
915
+ }