@3deye-toolkit/react-camera 0.0.1 → 0.0.3-alpha.0

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 +237 -259
  2. package/dist/react-camera.d.ts +61 -36
  3. package/dist/react-camera.js +1 -16
  4. package/dist/tsdoc-metadata.json +1 -1
  5. package/package.json +14 -15
package/dist/react-camera.css CHANGED
@@ -1,31 +1,104 @@
1
1
  .x-3deye-player * {
2
- box-sizing: border-box;
2
+ box-sizing: border-box;
3
3
  }
4
4
 
5
5
  .x-3deye-player {
6
- position: relative;
7
- background-color: black;
6
+ position: relative;
7
+ background-color: black;
8
8
  }
9
9
 
10
10
  .x-3deye-player__zoomable-wrapper {
11
- width: 100%;
12
- height: 100%;
13
- overflow: hidden;
11
+ width: 100%;
12
+ height: 100%;
13
+ overflow: hidden;
14
14
  }
15
15
 
16
16
  .x-3deye-player__zoomable {
17
- width: 100%;
18
- height: 100%;
17
+ width: 100%;
18
+ height: 100%;
19
19
  }
20
20
 
21
21
  .x-3deye-player video {
22
- width: 100%;
23
- height: 100%;
24
- position: absolute;
25
- top: 0;
26
- left: 0;
27
- bottom: 0;
28
- right: 0;
22
+ width: 100%;
23
+ height: 100%;
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ bottom: 0;
28
+ right: 0;
29
+ }
30
+
31
+ .spinner {
32
+ animation: spinner-rotation 1.5s linear infinite;
33
+ width: 65px;
34
+ height: 65px;
35
+ }
36
+
37
+ .spinner circle {
38
+ stroke-dasharray: 207.34;
39
+ stroke-dashoffset: 0;
40
+ transform-origin: center;
41
+ animation: spinner-dash 1.5s ease-in-out infinite;
42
+ }
43
+
44
+ @keyframes spinner-rotation {
45
+ 0% {
46
+ transform: rotate(0deg);
47
+ }
48
+ 100% {
49
+ transform: rotate(270deg);
50
+ }
51
+ }
52
+
53
+ @keyframes spinner-dash {
54
+ 0% {
55
+ stroke-dashoffset: 207.34;
56
+ }
57
+ 50% {
58
+ stroke-dashoffset: 51.835; /* offset / 4 */
59
+ transform: rotate(135deg);
60
+ }
61
+ 100% {
62
+ stroke-dashoffset: 207.34;
63
+ transform: rotate(450deg);
64
+ }
65
+ }
66
+
67
+ .x-3deye-player__camera-name-popover {
68
+ background-color: rgba(15, 15, 20, 0.8);
69
+ box-shadow: none;
70
+ color: white;
71
+ white-space: nowrap;
72
+ }
73
+
74
+ .x-3deye-popover-container.x-3deye-player__camera-name-popover svg {
75
+ --tip-background: rgb(15, 15, 20);
76
+ opacity: 0.8;
77
+ }
78
+
79
+ .x-3deye-player__camera-name-popover button.x-3deye-button {
80
+ pointer-events: auto;
81
+ font-size: inherit;
82
+ }
83
+
84
+ .x-3deye-player__camera-name-popover button.x-3deye-button:hover {
85
+ text-decoration: underline;
86
+ }
87
+
88
+ .x-3deye-player__camera-name {
89
+ background-color: rgba(0, 0, 0, 0.25);
90
+ text-shadow: 1px 1px 1px black;
91
+ opacity: 0.8;
92
+ padding: 2px 16px;
93
+ border-radius: 16px;
94
+ line-height: 16px;
95
+ cursor: pointer;
96
+ -webkit-backdrop-filter: blur(3px);
97
+ backdrop-filter: blur(3px);
98
+ }
99
+
100
+ .x-3deye-player__camera-name:hover {
101
+ text-decoration: underline;
29
102
  }
30
103
 
31
104
  .x-3deye-button {
@@ -37,7 +110,6 @@
37
110
  height: 32px;
38
111
  -webkit-user-select: none;
39
112
  -moz-user-select: none;
40
- -ms-user-select: none;
41
113
  user-select: none;
42
114
  display: inline-flex;
43
115
  justify-content: center;
@@ -72,6 +144,14 @@
72
144
  justify-content: center;
73
145
  }
74
146
 
147
+ .x-3deye-button--action .icon {
148
+ opacity: 0.5;
149
+ }
150
+
151
+ .x-3deye-button--action:hover .icon {
152
+ opacity: 1;
153
+ }
154
+
75
155
  .x-3deye-button:disabled {
76
156
  opacity: 0.4;
77
157
  }
@@ -122,8 +202,12 @@
122
202
  border: 2px solid rgba(255, 255, 255, 0.5);
123
203
  }
124
204
 
125
- .x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(:disabled),
126
- .x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(:disabled):hover {
205
+ .x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(
206
+ :disabled
207
+ ),
208
+ .x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(
209
+ :disabled
210
+ ):hover {
127
211
  background-color: rgba(156, 51, 49, 0.5);
128
212
  }
129
213
 
@@ -137,104 +221,6 @@
137
221
  border: rgb(255 255 255 / 0.15) 1px solid;
138
222
  }
139
223
 
140
- .spinner {
141
- -webkit-animation: spinner-rotation 1.5s linear infinite;
142
- animation: spinner-rotation 1.5s linear infinite;
143
- width: 65px;
144
- height: 65px;
145
- }
146
-
147
- .spinner circle {
148
- stroke-dasharray: 207.34;
149
- stroke-dashoffset: 0;
150
- transform-origin: center;
151
- -webkit-animation: spinner-dash 1.5s ease-in-out infinite;
152
- animation: spinner-dash 1.5s ease-in-out infinite;
153
- }
154
-
155
- @-webkit-keyframes spinner-rotation {
156
- 0% {
157
- transform: rotate(0deg);
158
- }
159
- 100% {
160
- transform: rotate(270deg);
161
- }
162
- }
163
-
164
- @keyframes spinner-rotation {
165
- 0% {
166
- transform: rotate(0deg);
167
- }
168
- 100% {
169
- transform: rotate(270deg);
170
- }
171
- }
172
-
173
- @-webkit-keyframes spinner-dash {
174
- 0% {
175
- stroke-dashoffset: 207.34;
176
- }
177
- 50% {
178
- stroke-dashoffset: 51.835; /* offset / 4 */
179
- transform: rotate(135deg);
180
- }
181
- 100% {
182
- stroke-dashoffset: 207.34;
183
- transform: rotate(450deg);
184
- }
185
- }
186
-
187
- @keyframes spinner-dash {
188
- 0% {
189
- stroke-dashoffset: 207.34;
190
- }
191
- 50% {
192
- stroke-dashoffset: 51.835; /* offset / 4 */
193
- transform: rotate(135deg);
194
- }
195
- 100% {
196
- stroke-dashoffset: 207.34;
197
- transform: rotate(450deg);
198
- }
199
- }
200
-
201
- .x-3deye-player__camera-name-popover {
202
- background-color: rgba(15, 15, 20, 0.8);
203
- box-shadow: none;
204
- color: white;
205
- white-space: nowrap;
206
- }
207
-
208
- .x-3deye-popover-container.x-3deye-player__camera-name-popover svg {
209
- --tip-background: rgb(15, 15, 20);
210
- opacity: 0.8;
211
- }
212
-
213
- .x-3deye-player__camera-name-popover button.x-3deye-button {
214
- pointer-events: auto;
215
- font-size: inherit;
216
- }
217
-
218
- .x-3deye-player__camera-name-popover button.x-3deye-button:hover {
219
- text-decoration: underline;
220
- }
221
-
222
- .x-3deye-player__camera-name {
223
- background-color: rgba(0, 0, 0, 0.25);
224
- text-shadow: 1px 1px 1px black;
225
- opacity: 0.8;
226
- padding: 2px 16px;
227
- border-radius: 16px;
228
- line-height: 16px;
229
- cursor: pointer;
230
- -webkit-backdrop-filter: blur(3px);
231
- backdrop-filter: blur(3px);
232
- }
233
-
234
- .x-3deye-player__camera-name:hover {
235
- text-decoration: underline;
236
- }
237
-
238
224
  .x-3deye-popover-container {
239
225
  background: #222;
240
226
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgb(0 0 0 / 0.1),
@@ -243,21 +229,18 @@
243
229
  border-radius: 6px;
244
230
  padding: 8px;
245
231
  text-align: left;
246
- -webkit-animation: slide-in 0.15s ease-in;
247
- animation: slide-in 0.15s ease-in;
232
+ animation: slide-in 0.15s ease-in;
248
233
  }
249
234
 
250
- @media(prefers-reduced-motion: reduce) {
251
- .x-3deye-popover-container {
252
- -webkit-animation: none;
253
- animation: none;
254
- }
235
+ @media (prefers-reduced-motion: reduce) {
236
+ .x-3deye-popover-container {
237
+ animation: none;
238
+ }
255
239
  }
256
240
 
257
-
258
241
  .x-3deye-popover-container .tip {
259
- --tip-background: #222;
260
- --tip-border: rgb(255 255 255 /0.05);
242
+ --tip-background: #222;
243
+ --tip-border: rgb(255 255 255 /0.05);
261
244
  }
262
245
 
263
246
  .x-3deye-player__stats > summary {
@@ -294,7 +277,6 @@
294
277
  .x-3deye-live-indicator {
295
278
  -webkit-user-select: none;
296
279
  -moz-user-select: none;
297
- -ms-user-select: none;
298
280
  user-select: none;
299
281
  padding: 0 5px;
300
282
  color: rgba(0, 0, 0, 0.7);
@@ -330,43 +312,30 @@
330
312
  }
331
313
 
332
314
  .x-3deye-player__playback-indicator {
333
- pointer-events: none;
334
- position: absolute;
335
- top: 50%;
336
- left: 50%;
337
- transform: translate(-50%, -50%);
338
- -webkit-animation: playback-indicator-fade-out 0.5s linear forwards;
339
- animation: playback-indicator-fade-out 0.5s linear forwards;
340
- display: none;
341
- background-color: rgba(0, 0, 0, 0.5);
342
- width: 48px;
343
- height: 48px;
344
- padding: 8px;
345
- border-radius: 48px;
346
- }
347
-
348
- @-webkit-keyframes playback-indicator-fade-out {
349
- 0% {
350
- opacity: 1;
351
- transform: translate(-50%, -50%) scale(1);
352
- }
353
-
354
- 100% {
355
- opacity: 0;
356
- transform: translate(-50%, -50%) scale(2);
357
- }
315
+ pointer-events: none;
316
+ position: absolute;
317
+ top: 50%;
318
+ left: 50%;
319
+ transform: translate(-50%, -50%);
320
+ animation: playback-indicator-fade-out 0.5s linear forwards;
321
+ display: none;
322
+ background-color: rgba(0, 0, 0, 0.5);
323
+ width: 48px;
324
+ height: 48px;
325
+ padding: 8px;
326
+ border-radius: 48px;
358
327
  }
359
328
 
360
329
  @keyframes playback-indicator-fade-out {
361
- 0% {
362
- opacity: 1;
363
- transform: translate(-50%, -50%) scale(1);
364
- }
330
+ 0% {
331
+ opacity: 1;
332
+ transform: translate(-50%, -50%) scale(1);
333
+ }
365
334
 
366
- 100% {
367
- opacity: 0;
368
- transform: translate(-50%, -50%) scale(2);
369
- }
335
+ 100% {
336
+ opacity: 0;
337
+ transform: translate(-50%, -50%) scale(2);
338
+ }
370
339
  }
371
340
 
372
341
  .x-3deye-player__overlay {
@@ -520,41 +489,48 @@
520
489
  display: block;
521
490
  }
522
491
 
492
+ .x-3deye-player__zoom-slider:is(:hover, :focus),
493
+ .x-3deye-player__zoom-slider:has(
494
+ + .x-3deye-player__zoom-preview:is(:focus, :hover)
495
+ ) {
496
+ display: block;
497
+ }
498
+
523
499
  .x-3deye-player__controls {
524
- display: flex;
525
- padding: 8px;
500
+ display: flex;
501
+ padding: 8px;
526
502
  }
527
503
 
528
504
  .x-3deye-player__controls .spacer {
529
- pointer-events: none;
530
- flex: 1;
505
+ pointer-events: none;
506
+ flex: 1;
531
507
  }
532
508
 
533
509
  .x-3deye-button.x-3deye-player__control {
534
- width: 38px;
535
- height: 38px;
536
- background-color: rgb(26,30,29, 0.8);
537
- color: rgba(255, 255, 255, 0.6);
538
- border-radius: 0;
539
- display: flex;
540
- justify-content: center;
541
- align-items: center;
510
+ width: 38px;
511
+ height: 38px;
512
+ background-color: rgb(26, 30, 29, 0.8);
513
+ color: rgba(255, 255, 255, 0.6);
514
+ border-radius: 0;
515
+ display: flex;
516
+ justify-content: center;
517
+ align-items: center;
542
518
  }
543
519
 
544
520
  .x-3deye-player__controls--compact .x-3deye-player__control {
545
- padding: 0;
521
+ padding: 0;
546
522
  }
547
523
 
548
524
  .x-3deye-player__controls--compact .x-3deye-player__control .icon {
549
- width: 20px;
525
+ width: 20px;
550
526
  }
551
527
 
552
528
  .x-3deye-player__control--reflowed {
553
- width: 20px;
529
+ width: 20px;
554
530
  }
555
531
 
556
532
  .x-3deye-player__control + .x-3deye-player__control {
557
- border-left: 1px solid rgb(26,30,29);
533
+ border-left: 1px solid rgb(26, 30, 29);
558
534
  }
559
535
 
560
536
  .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control:hover {
@@ -563,9 +539,9 @@
563
539
  }
564
540
 
565
541
  .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control:focus {
566
- box-shadow: 0 0 0 0.2rem rgba(52,58,64,.5);
567
- background-color: rgb(26,30,29, 0.8);
568
- z-index: 1;
542
+ box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
543
+ background-color: rgb(26, 30, 29, 0.8);
544
+ z-index: 1;
569
545
  }
570
546
 
571
547
  .x-3deye-player__control:first-child {
@@ -574,53 +550,69 @@
574
550
  }
575
551
 
576
552
  .x-3deye-player__controls > .x-3deye-player__control:last-child {
577
- border-top-right-radius: 4px;
553
+ border-top-right-radius: 4px;
578
554
  border-bottom-right-radius: 4px;
579
555
  }
580
556
 
581
- .x-3deye-player__controls--spaced > .spacer+.x-3deye-player__control {
582
- border-top-left-radius: 4px;
557
+ .x-3deye-player__controls--spaced > .spacer + .x-3deye-player__control {
558
+ border-top-left-radius: 4px;
583
559
  border-bottom-left-radius: 4px;
584
560
  }
585
561
 
586
562
  .x-3deye-player__controls--spaced > .x-3deye-player__control.before-spacer {
587
- border-top-right-radius: 4px;
563
+ border-top-right-radius: 4px;
588
564
  border-bottom-right-radius: 4px;
589
565
  }
590
566
 
591
567
  .x-3deye-button.x-3deye-player__control-close {
592
- background-color: rgba(156, 51, 49, 0.8);
568
+ background-color: rgba(156, 51, 49, 0.8);
593
569
  }
594
570
 
595
- .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-close:hover {
596
- background-color: rgba(156, 51, 49);
571
+ .x-3deye-button.x-3deye-button:not(
572
+ :disabled
573
+ ).x-3deye-player__control-close:hover {
574
+ background-color: rgba(156, 51, 49);
597
575
  }
598
576
 
599
- .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-close:focus {
600
- background-color: rgba(156, 51, 49, 0.8);
601
- box-shadow: 0 0 0 0.2rem rgba(101, 20, 46, 0.5);
577
+ .x-3deye-button.x-3deye-button:not(
578
+ :disabled
579
+ ).x-3deye-player__control-close:focus {
580
+ background-color: rgba(156, 51, 49, 0.8);
581
+ box-shadow: 0 0 0 0.2rem rgba(101, 20, 46, 0.5);
602
582
  }
603
583
 
604
- .x-3deye-player--paused .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-playpause {
605
- background-color: rgba(49, 106, 156, 0.8);
584
+ .x-3deye-player--paused
585
+ .x-3deye-button.x-3deye-button:not(
586
+ :disabled
587
+ ).x-3deye-player__control-playpause {
588
+ background-color: rgba(49, 106, 156, 0.8);
606
589
  }
607
590
 
608
- .x-3deye-player--paused .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-playpause:hover {
609
- background-color: rgba(49, 106, 156);
591
+ .x-3deye-player--paused
592
+ .x-3deye-button.x-3deye-button:not(
593
+ :disabled
594
+ ).x-3deye-player__control-playpause:hover {
595
+ background-color: rgba(49, 106, 156);
610
596
  }
611
597
 
612
- .x-3deye-player--paused .x-3deye-button.x-3deye-button:not(:disabled).x-3deye-player__control-playpause:focus {
613
- background-color: rgba(49, 106, 156, 0.8);
614
- box-shadow: 0 0 0 0.2rem rgba(20, 69, 101, 0.5);
598
+ .x-3deye-player--paused
599
+ .x-3deye-button.x-3deye-button:not(
600
+ :disabled
601
+ ).x-3deye-player__control-playpause:focus {
602
+ background-color: rgba(49, 106, 156, 0.8);
603
+ box-shadow: 0 0 0 0.2rem rgba(20, 69, 101, 0.5);
615
604
  }
616
605
 
617
606
  .x-3deye-popover-container.popover-playbackrate {
618
- background: white;
619
- color: black;
607
+ background: rgba(26, 30, 29, 0.8);
608
+ -webkit-backdrop-filter: blur(2px);
609
+ backdrop-filter: blur(2px);
610
+ color: white;
611
+ display: grid;
620
612
  }
621
613
 
622
614
  .x-3deye-popover-container.popover-playbackrate .tip {
623
- --tip-background: white;
615
+ --tip-background: rgba(26, 30, 29, 0.8);
624
616
  --tip-border: transparent;
625
617
  }
626
618
 
@@ -632,7 +624,7 @@
632
624
  }
633
625
 
634
626
  .volume-range {
635
- --surface-inverse: rgba(255, 255, 255, 0.15);
627
+ --surface-inverse: rgba(255, 255, 255, 0.15);
636
628
  --surface-highlight-rgb: 255, 255, 255;
637
629
  --primary-color: #0067ac;
638
630
  --on-primary-color: white;
@@ -710,7 +702,8 @@
710
702
  .x-3deye-slider__thumb {
711
703
  will-change: transform box-shadow;
712
704
  background: white;
713
- 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);
705
+ box-shadow: 0 0 0 6px rgba(0, 100, 255, 0), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
706
+ 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
714
707
  width: 20px;
715
708
  height: 20px;
716
709
  border-radius: 50%;
@@ -719,13 +712,13 @@
719
712
 
720
713
  .x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover,
721
714
  .x-3deye-slider:focus .x-3deye-slider__thumb {
722
- 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,
723
- 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
715
+ box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.1),
716
+ 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
724
717
  }
725
718
 
726
719
  .x-3deye-slider:focus .x-3deye-slider__thumb.active {
727
- 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,
728
- 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
720
+ box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.2),
721
+ 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
729
722
  }
730
723
 
731
724
  .x-3deye-slider.horizontal .x-3deye-slider__thumb {
@@ -747,7 +740,6 @@
747
740
  color: var(--on-primary-color, white);
748
741
  font-size: 0.75rem;
749
742
  border-radius: 4px;
750
- width: -webkit-fit-content;
751
743
  width: -moz-fit-content;
752
744
  width: fit-content;
753
745
  min-width: 24px;
@@ -758,7 +750,9 @@
758
750
  }
759
751
 
760
752
  .x-3deye-slider__label.open,
761
- .x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover .x-3deye-slider__label,
753
+ .x-3deye-slider:not(.disabled)
754
+ .x-3deye-slider__thumb:hover
755
+ .x-3deye-slider__label,
762
756
  .x-3deye-slider:focus .x-3deye-slider__label {
763
757
  transform: translate(-50%, -100%) scale(1);
764
758
  }
@@ -788,7 +782,7 @@
788
782
 
789
783
  .ptz-popover .tip {
790
784
  --tip-background: rgba(15, 15, 20, 0.5);
791
- --tip-border: rgba(255, 255, 255, 0.2);
785
+ --tip-border: rgba(255, 255, 255, 0.2);
792
786
  }
793
787
 
794
788
  .ptz-popover {
@@ -801,15 +795,15 @@
801
795
  .segmented-control-wrapper {
802
796
  display: inline-grid;
803
797
  border-radius: 6px;
804
- background-color: var(--surface-inverse);
798
+ background-color: var(--surface-inverse);
805
799
  }
806
800
 
807
801
  .segmented-control {
808
802
  display: grid;
809
- margin: 2px;
803
+ margin: 2px;
810
804
  position: relative;
811
- grid-auto-flow: column;
812
- grid-auto-columns: 1fr;
805
+ grid-auto-flow: column;
806
+ grid-auto-columns: 1fr;
813
807
  --indicator-offset: 0%;
814
808
  }
815
809
 
@@ -841,13 +835,12 @@
841
835
  margin: 2px;
842
836
  background: none;
843
837
  border: none;
844
- color: currentColor;
838
+ color: currentColor;
845
839
  -webkit-user-select: none;
846
840
  -moz-user-select: none;
847
- -ms-user-select: none;
848
841
  user-select: none;
849
- text-overflow: ellipsis;
850
- overflow: hidden;
842
+ text-overflow: ellipsis;
843
+ overflow: hidden;
851
844
  z-index: 1;
852
845
  }
853
846
 
@@ -875,55 +868,40 @@
875
868
  }
876
869
 
877
870
  .box-selector-preview {
878
- width: 40px;
879
- height: 40px;
880
- position: relative;
881
- margin: 20px 20px 0px 10px;
882
- }
883
-
884
- @-webkit-keyframes expand-box-selector-preview {
885
- from {
886
- width: 20px;
887
- height: 16px;
888
- }
889
-
890
- to {
891
- width: 50px;
892
- height: 30px;
893
- }
871
+ width: 40px;
872
+ height: 40px;
873
+ position: relative;
874
+ margin: 20px 20px 0px 10px;
894
875
  }
895
876
 
896
877
  @keyframes expand-box-selector-preview {
897
- from {
898
- width: 20px;
899
- height: 16px;
900
- }
878
+ from {
879
+ width: 20px;
880
+ height: 16px;
881
+ }
901
882
 
902
- to {
903
- width: 50px;
904
- height: 30px;
905
- }
883
+ to {
884
+ width: 50px;
885
+ height: 30px;
886
+ }
906
887
  }
907
888
 
908
889
  .box-selector-preview .box-selector {
909
- /* width: 20px;
890
+ /* width: 20px;
910
891
  height: 16px; */
911
- width: 50px;
912
- height: 30px;
913
- position: relative;
914
- will-change: width, height;
915
-
916
- -webkit-animation-duration: 0.5s;
892
+ width: 50px;
893
+ height: 30px;
894
+ position: relative;
895
+ will-change: width, height;
917
896
 
918
- animation-duration: 0.5s;
919
- -webkit-animation-name: expand-box-selector-preview;
920
- animation-name: expand-box-selector-preview;
897
+ animation-duration: 0.5s;
898
+ animation-name: expand-box-selector-preview;
921
899
  }
922
900
 
923
901
  .box-selector-preview .icon {
924
- position: absolute;
925
- bottom: -7px;
926
- right: -7px;
902
+ position: absolute;
903
+ bottom: -7px;
904
+ right: -7px;
927
905
  }
928
906
 
929
907
  /* .box-selector-select:hover .box-selector {
@@ -933,17 +911,17 @@
933
911
 
934
912
  .box-selector-select {
935
913
  color: rgba(255, 255, 255, 0.8);
936
- background-color: rgba(0, 0, 0, 0.5);
937
- -webkit-backdrop-filter: blur(2px);
938
- backdrop-filter: blur(2px);
914
+ background-color: rgba(0, 0, 0, 0.5);
915
+ -webkit-backdrop-filter: blur(2px);
916
+ backdrop-filter: blur(2px);
939
917
  text-transform: uppercase;
940
- font-weight: bold;
941
- text-align: center;
918
+ font-weight: bold;
919
+ text-align: center;
942
920
  border-radius: 4px;
943
921
  padding: 8px;
944
922
  width: content-width;
945
923
  }
946
924
 
947
925
  .box-selector-cancel {
948
- pointer-events: auto;
926
+ pointer-events: auto;
949
927
  }