@3deye-toolkit/react-event-search 0.0.4 → 0.0.5

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-event-search.css +1 -904
  2. package/dist/react-event-search.d.ts +38 -154
  3. package/dist/react-event-search.js +1 -1
  4. package/dist/tsdoc-metadata.json +1 -1
  5. package/package.json +2 -4
package/dist/react-event-search.css CHANGED
@@ -1,904 +1 @@
1
- .x-3deye-button {
2
- color: inherit;
3
- background: none;
4
- border: none;
5
- position: relative;
6
- padding: 0 8px;
7
- height: 32px;
8
- -webkit-user-select: none;
9
- -moz-user-select: none;
10
- user-select: none;
11
- display: inline-flex;
12
- justify-content: center;
13
- align-items: center;
14
- border-radius: 4px;
15
- letter-spacing: 0.0107142857em;
16
- font-weight: 500;
17
- }
18
-
19
- .x-3deye-button sup {
20
- position: relative;
21
- top: -0.5em;
22
- left: 0.25em;
23
- }
24
-
25
- .x-3deye-button.x-3deye-button--fullwidth {
26
- width: 100%;
27
- }
28
-
29
- .x-3deye-button:focus,
30
- .x-3deye-button.x-3deye-button:not(:disabled):hover {
31
- background-color: rgba(var(--surface-highlight-rgb), 0.1);
32
- }
33
-
34
- .x-3deye-button--icon {
35
- border-radius: 16px;
36
- padding: 4px;
37
- width: 32px;
38
- height: 32px;
39
- display: inline-flex;
40
- align-items: center;
41
- justify-content: center;
42
- }
43
-
44
- .x-3deye-button--action .icon {
45
- opacity: 0.5;
46
- }
47
-
48
- .x-3deye-button--action:hover .icon {
49
- opacity: 1;
50
- }
51
-
52
- .x-3deye-button:disabled {
53
- opacity: 0.4;
54
- }
55
-
56
- .x-3deye-button:not(:disabled) {
57
- cursor: pointer;
58
- }
59
-
60
- .x-3deye-button.x-3deye-button--filled,
61
- .x-3deye-button.x-3deye-button--text {
62
- min-width: 80px;
63
- text-transform: capitalize;
64
- font-family: 'Roboto', sans-serif;
65
- font-size: 0.875rem;
66
- font-weight: 500;
67
- border-radius: 0.25rem;
68
- padding: 0 1rem;
69
- }
70
-
71
- .x-3deye-button.x-3deye-button--filled {
72
- background-color: rgb(39, 185, 161);
73
- color: white;
74
- }
75
-
76
- .x-3deye-button.x-3deye-button--filled:not(:disabled):hover {
77
- background-color: rgb(34, 163, 142);
78
- }
79
-
80
- .x-3deye-button.x-3deye-button--filled:focus {
81
- transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
82
- box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
83
- }
84
-
85
- .x-3deye-button canvas {
86
- color: rgb(var(--surface-highlight-rgb));
87
- }
88
-
89
- .x-3deye-button--overlay {
90
- pointer-events: auto;
91
- background: rgba(0, 0, 0, 0.5);
92
- border: 2px solid rgba(255, 255, 255, 0.25);
93
- color: white;
94
- }
95
-
96
- .x-3deye-button.x-3deye-button--overlay:focus,
97
- .x-3deye-button.x-3deye-button--overlay:not(:disabled):hover {
98
- background: rgba(0, 0, 0, 0.5);
99
- border: 2px solid rgba(255, 255, 255, 0.5);
100
- }
101
-
102
- .x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(
103
- :disabled
104
- ),
105
- .x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(
106
- :disabled
107
- ):hover {
108
- background-color: rgba(156, 51, 49, 0.5);
109
- }
110
-
111
- .x-3deye-tooltip {
112
- background: rgb(0 0 0 / 0.9);
113
- color: white;
114
- border: none;
115
- border-radius: 4px;
116
- padding: 0.5em 1em;
117
- font-size: 12px;
118
- border: rgb(255 255 255 / 0.15) 1px solid;
119
- }
120
-
121
- .color-selector {
122
- display: flex;
123
- z-index: 1;
124
- padding: 5px 0 5px 8px;
125
- justify-content: space-between;
126
- align-items: center;
127
- }
128
-
129
- .color-selector__items {
130
- display: flex;
131
- align-items: center;
132
- }
133
-
134
- .color-selector__item {
135
- border: none;
136
- width: 20px;
137
- height: 20px;
138
- border-radius: 20px;
139
- margin: 4px;
140
- padding: 0;
141
- box-shadow: 0 0 0 1.5px currentColor;
142
- transition: box-shadow 0.2s ease-in;
143
- color: currentColor;
144
- }
145
-
146
- .color-selector__item:focus {
147
- box-shadow: 0 0 0 1.5px currentColor,
148
- 0 0 0 5px rgba(var(--surface-highlight-rgb), 0.2);
149
- }
150
-
151
- .color-selector__item:focus:active {
152
- box-shadow: 0 0 0 1.5px currentColor;
153
- }
154
-
155
- .color-selector__item .icon {
156
- opacity: 0;
157
- transition: opacity 0.2s ease-in;
158
- }
159
-
160
- .color-selector__item.selected .icon {
161
- opacity: 1;
162
- }
163
-
164
- .color-selector__clear {
165
- border-radius: 50%;
166
- padding: 6px;
167
- }
168
-
169
- .x-3deye-slider {
170
- position: relative;
171
- display: flex;
172
- align-items: center;
173
- }
174
-
175
- .x-3deye-slider:focus-visible {
176
- outline: none;
177
- }
178
-
179
- .x-3deye-slider.horizontal {
180
- width: 100%;
181
- height: 20px;
182
- }
183
-
184
- .x-3deye-slider.vertical {
185
- width: 20px;
186
- height: 100%;
187
- flex-direction: column;
188
- }
189
-
190
- .x-3deye-slider__track {
191
- background: var(--surface-inverse, gainsboro);
192
- position: relative;
193
- flex: 1;
194
- }
195
-
196
- .x-3deye-slider__bar {
197
- background-color: var(--primary-color, #0067ac);
198
- position: absolute;
199
- }
200
-
201
- .x-3deye-slider.disabled .x-3deye-slider__bar {
202
- background-color: rgb(165, 165, 165);
203
- }
204
-
205
- .x-3deye-slider.horizontal .x-3deye-slider__bar {
206
- top: 0;
207
- bottom: 0;
208
- left: 0;
209
- }
210
-
211
- .x-3deye-slider.vertical .x-3deye-slider__bar {
212
- bottom: 0;
213
- left: 0;
214
- right: 0;
215
- }
216
-
217
- .x-3deye-slider.horizontal .x-3deye-slider__track {
218
- height: 3px;
219
- }
220
-
221
- .x-3deye-slider.vertical .x-3deye-slider__track {
222
- width: 3px;
223
- }
224
-
225
- .x-3deye-slider__thumb {
226
- will-change: transform box-shadow;
227
- background: white;
228
- box-shadow: 0 0 0 6px rgba(0, 100, 255, 0), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
229
- 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
230
- width: 20px;
231
- height: 20px;
232
- border-radius: 50%;
233
- transition: box-shadow 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
234
- }
235
-
236
- .x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover,
237
- .x-3deye-slider:focus .x-3deye-slider__thumb {
238
- box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.1),
239
- 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
240
- }
241
-
242
- .x-3deye-slider:focus .x-3deye-slider__thumb.active {
243
- box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.2),
244
- 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
245
- }
246
-
247
- .x-3deye-slider.horizontal .x-3deye-slider__thumb {
248
- margin-left: -10px;
249
- }
250
-
251
- .x-3deye-slider.vertical .x-3deye-slider__thumb {
252
- margin-bottom: -10px;
253
- }
254
-
255
- .x-3deye-slider__label {
256
- pointer-events: none;
257
- touch-action: none;
258
- will-change: transform;
259
- transform: translate(-50%, -100%) scale(0);
260
- background: var(--primary-color, #0067ac);
261
- bottom: 50%;
262
- left: 50%;
263
- color: var(--on-primary-color, white);
264
- font-size: 0.75rem;
265
- border-radius: 4px;
266
- width: -moz-fit-content;
267
- width: fit-content;
268
- min-width: 24px;
269
- padding: 4px 8px;
270
- position: relative;
271
- transition: transform 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
272
- transform-origin: center bottom;
273
- }
274
-
275
- .x-3deye-slider__label.open,
276
- .x-3deye-slider:not(.disabled)
277
- .x-3deye-slider__thumb:hover
278
- .x-3deye-slider__label,
279
- .x-3deye-slider:focus .x-3deye-slider__label {
280
- transform: translate(-50%, -100%) scale(1);
281
- }
282
-
283
- .x-3deye-slider__label::before {
284
- content: '';
285
- display: block;
286
- position: absolute;
287
- top: 100%;
288
- left: calc(50% - 5px);
289
- width: 0;
290
- height: 0;
291
- border-left: 5px solid transparent;
292
- border-right: 5px solid transparent;
293
- border-top: 5px solid var(--primary-color, #0067ac);
294
- }
295
-
296
- .event-list-item {
297
- -webkit-user-select: none;
298
- -moz-user-select: none;
299
- user-select: none;
300
- position: absolute;
301
- font-size: 12px;
302
- color: rgba(255, 255, 255, 0.75);
303
- background-color: rgba(255, 255, 255, 0.1);
304
- top: 0;
305
- bottom: 0;
306
- left: 0;
307
- right: 0;
308
- overflow: hidden;
309
- --license-plate-color: rgb(0, 229, 255);
310
- }
311
-
312
- .event-list-item .x-3deye-button--icon:hover,
313
- .event-list-item .x-3deye-button--icon:focus {
314
- background-color: rgba(0, 0, 0, 0.2);
315
- }
316
-
317
- .event-list-item .acknowledged-overlay {
318
- position: absolute;
319
- top: 0;
320
- left: 0;
321
- bottom: 0;
322
- right: 0;
323
- pointer-events: none;
324
- display: grid;
325
- place-items: center;
326
- background-color: rgba(0, 0, 0, 0.4);
327
- color: white;
328
- text-transform: uppercase;
329
- font-weight: bold;
330
- }
331
-
332
- .event-list-item .no-preview-overlay {
333
- display: block;
334
- position: absolute;
335
- top: 0;
336
- left: 0;
337
- bottom: 0;
338
- right: 0;
339
- pointer-events: none;
340
- background-position: center;
341
- background-repeat: no-repeat;
342
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABaCAYAAABzAJLvAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIDBB8ysGG6bgAAAy1JREFUeNrtnD1oFFEUhc8s6Y0gCDHrT64/EE0UCVEQxB9ioSgWFoqNRgQFG0EQUlhYCXYRBSFuIogkTSKCoNhY2FpYiDYHEYJYiRYuiOhY5EVWFyNxNzvv3T1ftc2+eXO/uWd29s0MIIQQQgghhBBCCCGEEEIIIYQQQgghxILkea4ieIWkqQrNpRTZfF6QnEytk0n2k/xGco8EL8w2AEdIVrIsi1ry/NxIbgXwEsBtM3umzPh3N3SR/EGyksBcyyRzkqMyt3jJ1ZjjmuRAkDsiY/9XwLVBciUWyTWxPBjkXtcvf2dxTXJDkHtNhpzFNcldQe5FmXES1zWxvDvIvapYdhbX4To3J3lFJpzFNcn9Qe55GXAS1zWxPBTkXlYsO4trkjuD3EuquLO4JnkoyD2tSjuJ65pYPhzkXlAsO4trkvuC3HOqrLO4JnksyD3hqTaZI8n9mFu2mwAwBaBjEV8vA7gFYNjMxvM8R5Zlv6J7/rMEFyv4HoCTjYxhZtkfY54xszsp16UEP3Q2+YA5CmAs9aJ4Epw3Ue5BADMeiuJJcDM795GX/ZHgernTnvapQ1p/Y8bbDqmDnSPBEtxWvJVgx5hZjzfJElxPH4BXEuyXKoAdXjpZl0n1MZ0D+AKgh+RndXA8TDT4/Y9A3VLjJnVwwdQs523H3P/RfWa2qHMoyTKAN+GpxuH5Mc3sgzItAkjeCIv1GxsYI5mnGttN7miQu6UJY0X/VGNbUHOD3M0g15p4wET3VGO7du7dIHf1EoytuC5Y7lij51zFdbyxPB5eeLKqBQeS4rrFnTsdOndlC7epuG5Roe8HuesK2LbieoljeSoUeEWBB1iScZ0l0LlPABwAsNzMPhU8ly4AswAmzGw4BcGlyOU+ADAEoFy0XAAws/cAugEcTyWuSxHLfQhgL4BlZjYby7yC5F4k8ka+LFK5zwEMAug0s2qkc0wirksRFu4xgIEQy9VYC5dKXGeRyX2KuReSdpvZ10Qu39YAeA1gEsBZM/uuDv47vQC6UpEbOvkdgPUATgHYrItbp5DU7U9CCCGEEEIIIYQQQgghhBBCCCGEEEIIIUTK/ASpxrk/iYZ2rgAAAABJRU5ErkJggg==');
343
- background-color: rgba(128, 128, 128, 0.8);
344
- }
345
-
346
- .event-list-item-caption {
347
- background: linear-gradient(
348
- to bottom,
349
- rgba(0, 0, 0, 0) 0%,
350
- rgba(0, 0, 0, 0.65) 100%
351
- );
352
- padding-left: 8px;
353
- padding-bottom: 8px;
354
- padding-top: 8px;
355
- position: absolute;
356
- font-size: 11px;
357
- bottom: 0;
358
- left: 0;
359
- right: 0;
360
- z-index: 1;
361
- pointer-events: none;
362
- display: flex;
363
- flex-direction: column;
364
- justify-content: flex-end;
365
- }
366
-
367
- .event-list-item:hover .event-list-item__time {
368
- color: white;
369
- }
370
-
371
- .event-list-item__time {
372
- text-shadow: 0 1px 2px black;
373
- font-size: 14px;
374
- order: 1;
375
- font-weight: bold;
376
- }
377
-
378
- .event-list-item__camera-name {
379
- white-space: nowrap;
380
- overflow: hidden;
381
- text-overflow: ellipsis;
382
- font-weight: bold;
383
- font-size: 13px;
384
- line-height: 24px;
385
- font-family: 'Roboto', sans-serif;
386
- /* text-shadow: 0 1px 2px black;
387
- line-height: 20px; */
388
- }
389
-
390
- .event-list-item__duration {
391
- background-color: rgba(0, 0, 0, 0.75);
392
- font-size: 12px;
393
- padding: 0 4px;
394
- position: absolute;
395
- right: 2px;
396
- bottom: 32px;
397
- opacity: 0.9;
398
- }
399
-
400
- .event-list-item__temperature {
401
- font-size: 14px;
402
- font-weight: bold;
403
- padding: 0 4px;
404
- position: absolute;
405
- right: 2px;
406
- bottom: 4px;
407
- display: flex;
408
- align-items: center;
409
- text-shadow: 0 1px 2px black;
410
- }
411
-
412
- .event-list-item .frame {
413
- --frame-color-hsl: 186 100% 50%;
414
- position: absolute;
415
- top: 0;
416
- left: 0;
417
- right: 0;
418
- border: 1px solid hsl(var(--frame-color-hsl) / 0.2);
419
- }
420
-
421
- .event-list-item .preview {
422
- opacity: 0;
423
- position: absolute;
424
- pointer-events: none;
425
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.75);
426
- transition: opacity 0s linear 0.2s;
427
- }
428
-
429
- .event-list-item .trigger:hover ~ .preview {
430
- opacity: 1;
431
- }
432
-
433
- .event-list-item__license-plate-trigger {
434
- outline: 2px solid var(--license-plate-color);
435
- }
436
-
437
- .event-list-item__license-plate .plate-number {
438
- font-family: 'Roboto Mono', monospace;
439
- color: white;
440
- }
441
-
442
- .event-list-item__license-plate .plate-number .digit {
443
- color: var(--license-plate-color);
444
- }
445
-
446
- .event-list-item__license-plate .plate-number .digit:first-of-type {
447
- margin-left: 2px;
448
- }
449
-
450
- .event-list-item__license-plate-caption {
451
- position: absolute;
452
- left: 0;
453
- right: 0;
454
- bottom: 0;
455
- height: 60px;
456
- display: flex;
457
- align-items: center;
458
- justify-content: space-between;
459
- gap: 10px;
460
- background-color: black;
461
- z-index: 1;
462
- padding-left: 10px;
463
- }
464
-
465
- .event-list-item__license-plate-caption .plate-number {
466
- font-family: 'Roboto Mono', monospace;
467
- font-size: 16px;
468
- color: white;
469
- border: 2px solid rgba(255, 255, 255, 0.5);
470
- padding: 0 8px;
471
- border-radius: 4px;
472
- letter-spacing: 1px;
473
- }
474
-
475
- .event-list-item__license-plate-caption .plate-number .digit {
476
- color: var(--license-plate-color);
477
- }
478
-
479
- .event-list-item__license-plate-caption .plate-number :is(.char + .digit) {
480
- margin-left: 0.25rem;
481
- }
482
-
483
- .event-list-item__license-plate-caption .plate-number :is(.digit + .char) {
484
- margin-left: 0.25rem;
485
- }
486
-
487
- .event-list-item__detected-object-label {
488
- display: flex;
489
- flex-direction: column;
490
- background-color: rgba(0, 0, 0, 0.5);
491
- position: absolute;
492
- font-size: 13px;
493
- font-family: 'Roboto Mono', monospace;
494
- white-space: nowrap;
495
- color: white;
496
- font-weight: bold;
497
- min-width: 64px;
498
- }
499
-
500
- .event-list-item__detected-object-label__caption {
501
- padding-left: 4px;
502
- font-size: 9px;
503
- line-height: 14px;
504
- opacity: 0.75;
505
- color: black;
506
- }
507
-
508
- .event-list-item__license-plate-label {
509
- display: flex;
510
- flex-direction: column;
511
- background-color: rgba(0, 0, 0, 0.5);
512
- position: absolute;
513
- font-size: 14px;
514
- font-family: 'Roboto Mono', monospace;
515
- white-space: nowrap;
516
- color: white;
517
- }
518
-
519
- .event-list-item__license-plate-label .digit {
520
- color: var(--license-plate-color);
521
- }
522
-
523
- .event-list-item__license-plate-label .digit:first-of-type {
524
- margin-left: 2px;
525
- }
526
-
527
- .event-list-item__license-plate-label__caption {
528
- padding-left: 4px;
529
- background-color: var(--license-plate-color);
530
- color: black;
531
- opacity: 0.75;
532
- font-size: 10px;
533
- }
534
-
535
- .event-list-item__license-plate .plate-number {
536
- position: absolute;
537
- background: black;
538
- padding-left: 2px;
539
- padding-right: 2px;
540
- bottom: 0;
541
- left: 0;
542
- right: 0;
543
- height: 16px;
544
- }
545
-
546
- .event-list-item__license-plate .frame {
547
- --frame-color-hsl: 186 100% 50%;
548
- }
549
-
550
- .event-list-item-face .frame {
551
- --frame-color-hsl: 42 100% 50%;
552
- bottom: 0;
553
- }
554
-
555
- .event-list-item .menu-button {
556
- position: absolute;
557
- top: 0;
558
- right: 0;
559
- }
560
-
561
- .menu-button {
562
- border: none;
563
- background: none;
564
- }
565
-
566
- .menu-button[data-open],
567
- .menu-button:hover {
568
- background-color: rgba(var(--surface-highlight-rgb), 0.1);
569
- }
570
-
571
- .menu-list {
572
- background-color: var(--container);
573
- color: var(--on-container);
574
- -webkit-backdrop-filter: blur(10px);
575
- backdrop-filter: blur(10px);
576
- padding: 4px;
577
- border-radius: 6px;
578
- box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgb(0 0 0 / 0.1),
579
- inset 0 0 0 1px rgb(255 255 255 /0.05);
580
- outline: 0;
581
- }
582
-
583
- .menu-item {
584
- display: flex;
585
- justify-content: space-between;
586
- align-items: center;
587
- background: none;
588
- width: 100%;
589
- border: none;
590
- border-radius: 4px;
591
- text-align: left;
592
- min-width: 120px;
593
- margin: 0;
594
- outline: 0;
595
- }
596
-
597
- .menu-item--danger {
598
- color: var(--danger-color);
599
- }
600
-
601
- .menu-item.x-3deye-button {
602
- font-size: 14px;
603
- background: none;
604
- border: none;
605
- text-align: left;
606
- padding: 8px 16px;
607
- width: 100%;
608
- letter-spacing: 0.5px;
609
- height: -moz-fit-content;
610
- height: fit-content;
611
- }
612
-
613
- .menu-item:focus {
614
- background-color: rgba(var(--surface-highlight-rgb), 0.1);
615
- }
616
-
617
- .menu-item[data-focus-inside][data-open] {
618
- background-color: rgba(var(--surface-highlight-rgb), 0.1);
619
- }
620
-
621
- .preloader-container {
622
- flex: 1;
623
- display: flex;
624
- justify-content: center;
625
- align-items: center;
626
- }
627
-
628
- .frame .corner-highlight-tl {
629
- position: absolute;
630
- top: -1px;
631
- left: -1px;
632
- width: 10px;
633
- height: 2px;
634
- background-color: hsl(var(--frame-color-hsl));
635
- }
636
-
637
- .frame .corner-highlight-tl::before {
638
- content: '';
639
- display: block;
640
- position: absolute;
641
- top: 0;
642
- left: 0;
643
- height: 10px;
644
- width: 2px;
645
- background-color: hsl(var(--frame-color-hsl));
646
- }
647
-
648
- .frame .corner-highlight-tr {
649
- position: absolute;
650
- top: -1px;
651
- right: -1px;
652
- width: 10px;
653
- height: 2px;
654
- background-color: hsl(var(--frame-color-hsl));
655
- }
656
-
657
- .frame .corner-highlight-tr::before {
658
- content: '';
659
- display: block;
660
- position: absolute;
661
- top: 0;
662
- right: 0;
663
- height: 10px;
664
- width: 2px;
665
- background-color: hsl(var(--frame-color-hsl));
666
- }
667
-
668
- .frame .corner-highlight-br {
669
- position: absolute;
670
- bottom: -1px;
671
- right: -1px;
672
- width: 10px;
673
- height: 2px;
674
- background-color: hsl(var(--frame-color-hsl));
675
- }
676
-
677
- .frame .corner-highlight-br::before {
678
- content: '';
679
- display: block;
680
- position: absolute;
681
- bottom: 0;
682
- right: 0;
683
- height: 10px;
684
- width: 2px;
685
- background-color: hsl(var(--frame-color-hsl));
686
- }
687
-
688
- .frame .corner-highlight-bl {
689
- position: absolute;
690
- bottom: -1px;
691
- left: -1px;
692
- width: 10px;
693
- height: 2px;
694
- background-color: hsl(var(--frame-color-hsl));
695
- }
696
-
697
- .frame .corner-highlight-bl::before {
698
- content: '';
699
- display: block;
700
- position: absolute;
701
- bottom: 0;
702
- left: 0;
703
- height: 10px;
704
- width: 2px;
705
- background-color: hsl(var(--frame-color-hsl));
706
- }
707
-
708
- .x-3deye-button-group {
709
- display: flex;
710
- padding: 4px;
711
- gap: 4px;
712
- }
713
-
714
- .x-3deye-button-group > .x-3deye-button {
715
- flex: 1;
716
- height: 35px;
717
- font-size: 11px;
718
- text-transform: uppercase;
719
- }
720
-
721
- .x-3deye-button-group > .x-3deye-button.button-selected,
722
- .x-3deye-button-group > .x-3deye-button.button-selected:hover {
723
- color: var(--on-container);
724
- background-color: var(--container);
725
- }
726
-
727
- .x-3deye-button-group > .x-3deye-button + .x-3deye-button {
728
- margin-left: 1px;
729
- }
730
-
731
- .x-3deye-button-group > .x-3deye-button:hover {
732
- color: var(--on-container);
733
- }
734
-
735
- .x-3deye-button-group > .x-3deye-button.button-unselected {
736
- color: var(--on-surface);
737
- }
738
-
739
- .x-3deye-button-group > .x-3deye-button.button-selected canvas {
740
- color: var(--container);
741
- }
742
-
743
- .x-3deye-popover-container {
744
- background: #222;
745
- box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgb(0 0 0 / 0.1),
746
- inset 0 0 0 1px rgb(255 255 255 /0.05);
747
- color: white;
748
- border-radius: 6px;
749
- padding: 8px;
750
- text-align: left;
751
- animation: slide-in 0.15s ease-in;
752
- }
753
-
754
- @media (prefers-reduced-motion: reduce) {
755
- .x-3deye-popover-container {
756
- animation: none;
757
- }
758
- }
759
-
760
- .x-3deye-popover-container .tip {
761
- --tip-background: #222;
762
- --tip-border: rgb(255 255 255 /0.05);
763
- }
764
-
765
- .x-3deye-datetimepicker {
766
- width: -moz-max-content;
767
- width: max-content;
768
- }
769
-
770
- .x-3deye-button.button-date {
771
- text-transform: none;
772
- font-family: 'Roboto Mono', monospace;
773
- }
774
-
775
- .x-3deye-button.button-date:hover {
776
- text-decoration: underline;
777
- }
778
-
779
- .x-3deye-timepicker {
780
- height: 260px;
781
- overflow: hidden;
782
- }
783
-
784
- .x-3deye-timepicker__column {
785
- text-align: center;
786
- overflow: hidden;
787
- overflow-x: hidden;
788
- width: 60px;
789
- font-size: 0.85rem;
790
- flex: 1;
791
- }
792
-
793
- .x-3deye-timepicker--alt .x-3deye-timepicker__column {
794
- height: 100%;
795
- white-space: nowrap;
796
- width: -moz-max-content;
797
- width: max-content;
798
- overflow-y: scroll;
799
- }
800
-
801
- .x-3deye-timepicker--alt .x-3deye-timepicker__column > div {
802
- width: -moz-max-content;
803
- width: max-content;
804
- }
805
-
806
- .x-3deye-timepicker__column:hover {
807
- overflow-y: scroll;
808
- }
809
-
810
- .x-3deye-timepicker__value {
811
- border-radius: 0.25rem;
812
- height: 30px;
813
- line-height: 30px;
814
- padding: 0 10px;
815
- }
816
-
817
- .x-3deye-datepicker__day {
818
- font-weight: 500;
819
- width: 1.75rem;
820
- height: 1.75rem;
821
- display: flex;
822
- justify-content: center;
823
- align-items: center;
824
- border-radius: 0.25rem;
825
- }
826
-
827
- .x-3deye-datepicker__day:not(.x-3deye-datepicker__day--selected):not(
828
- .x-3deye-datepicker__day--disabled
829
- ):hover {
830
- background-color: rgba(0, 0, 0, 0.05);
831
- color: currentColor;
832
- }
833
-
834
- .x-3deye-datepicker__day--next-month,
835
- .x-3deye-datepicker__day--previous-month {
836
- color: oklch(0.7 0 0);
837
- }
838
-
839
- .x-3deye-datepicker__day--disabled {
840
- color: oklch(0.9 0 0);
841
- }
842
-
843
- .x-3deye-datepicker__day--selected {
844
- background-color: #0067ac;
845
- color: white;
846
- }
847
-
848
- .x-3deye-datepicker__day--today {
849
- font-weight: 700;
850
- border: 2px solid #0067ac66;
851
- }
852
-
853
- .x-3deye-timepicker__column > div {
854
- height: 40px;
855
- width: 60px;
856
- padding: 5px 10px;
857
- }
858
-
859
- .x-3deye-timepicker__column > div:hover .x-3deye-timepicker__value {
860
- background-color: rgba(0, 0, 0, 0.05);
861
- }
862
-
863
- .x-3deye-timepicker__column > div.selected .x-3deye-timepicker__value {
864
- background-color: #0067ac;
865
- color: white;
866
- }
867
-
868
- .x-3deye-datepicker__button--previous-month,
869
- .x-3deye-datepicker__button--next-month {
870
- padding: 0;
871
-
872
- opacity: 0.3;
873
- }
874
-
875
- .x-3deye-datepicker__button--previous-month:disabled, .x-3deye-datepicker__button--next-month:disabled {
876
- opacity: 0.1;
877
- }
878
-
879
- .x-3deye-datepicker__button--previous-month:hover:not(:disabled), .x-3deye-datepicker__button--next-month:hover:not(:disabled) {
880
- opacity: 1;
881
- }
882
-
883
- .event-search-results {
884
- display: grid;
885
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
886
- grid-gap: 4px;
887
- padding: 4px;
888
- }
889
-
890
- .event-search-results .event-list-item {
891
- position: relative !important;
892
- width: 100%;
893
- height: 0;
894
- padding-bottom: 56.25%;
895
- }
896
-
897
- .people-histogram .bar rect {
898
- fill: #e91e63;
899
- }
900
-
901
- .people-histogram .bar text {
902
- font-size: 10px;
903
- fill: currentColor;
904
- }
1
+ .event-search-results{grid-gap:4px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding:4px;display:grid}.event-search-results .event-list-item{width:100%;height:0;padding-bottom:56.25%;position:relative!important}.color-selector{z-index:1;justify-content:space-between;align-items:center;padding:5px 0 5px 8px;display:flex}.color-selector__items{align-items:center;display:flex}.color-selector__item{color:currentColor;border:none;border-radius:20px;width:20px;height:20px;margin:4px;padding:0;transition:box-shadow .2s ease-in;box-shadow:0 0 0 1.5px}.color-selector__item:focus{box-shadow:0 0 0 1.5px currentColor,0 0 0 5px rgba(var(--surface-highlight-rgb),.2)}.color-selector__item:focus:active{box-shadow:0 0 0 1.5px}.color-selector__item .icon{opacity:0;transition:opacity .2s ease-in}.color-selector__item.selected .icon{opacity:1}.color-selector__clear{border-radius:50%;padding:6px}#x-3deye-floating-ui-root{z-index:calc(infinity);width:100%;position:absolute}.x-3deye-select-container{background-color:#00000080;border-radius:.5rem;display:flex;& *{box-sizing:border-box}& .x-3deye-select-body{padding:.375rem .5rem;display:grid;&>*{grid-area:1/1}}& .x-3deye-multi-select-body{flex-wrap:wrap;gap:4px;padding:.375rem .5rem;display:flex}& .x-3deye-select-value{color:#333;background-color:var(--color,#e6e6e6);border-radius:2px;align-items:center;gap:4px;min-height:24px;padding-left:6px;font-size:.75rem;display:inline-flex;&>.icon{flex-shrink:0}& .close-button{background-color:var(--color,#e6e6e6);color:inherit;border:none;border-top-right-radius:2px;border-bottom-right-radius:2px;justify-content:center;align-items:center;width:24px;min-width:24px;height:100%;margin:0 0 0 3px;padding:0;display:flex;&:hover,&:focus{background-color:var(--background-color,#ffbdad);color:var(--color,#de350b)}}}}.x-3deye-select-indicators{color:#ccc;&:hover{color:#e6e6e6}}.x-3deye-select-container--open,.x-3deye-select-container:has(.x-3deye-select input:focus){background-color:#fff;& .x-3deye-select-indicators{color:#747474;&:hover{color:#747474}}& .x-3deye-select-single-value{color:#000}}.x-3deye-select{line-height:0;display:inline-grid}.x-3deye-select-placeholder{color:#b3b3b3;pointer-events:none;grid-area:1/1;align-items:center;gap:4px;display:flex}.x-3deye-select-single-value{color:#fff;grid-area:1/1;align-content:center;padding:.25em .25em .25em 0}.x-3deye-select:after,.x-3deye-select input{font:inherit;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:none;grid-area:1/1;min-width:1em;margin:0;padding:.25em .25em .25em 0}.x-3deye-select input{height:24px;&:focus{outline:none}}.x-3deye-select:after{content:attr(data-value)" ";visibility:hidden;white-space:pre-wrap}.x-3deye-select-menu{background:#fff;border-radius:.25rem;box-shadow:0 12px 28px #0003,0 2px 4px #0000001a,inset 0 0 0 1px #6666660d}.x-3deye-select-option{cursor:default;align-items:center;padding:8px;font-size:.875rem;display:flex}.x-3deye-select-option--selected{color:#fff;background-color:#2196f3!important}.people-histogram .bar rect{fill:#e91e63}.people-histogram .bar text{fill:currentColor;font-size:10px}.event-list-item{user-select:none;color:#ffffffbf;--license-plate-color:#00e5ff;background-color:#ffffff1a;font-size:12px;position:absolute;inset:0;overflow:hidden}.event-list-item .x-3deye-button--icon:hover,.event-list-item .x-3deye-button--icon:focus{background-color:#0003}.event-list-item .acknowledged-overlay{pointer-events:none;color:#fff;text-transform:uppercase;background-color:#0006;place-items:center;font-weight:700;display:grid;position:absolute;inset:0}.event-list-item .no-preview-overlay{pointer-events:none;background-color:#808080cc;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABaCAYAAABzAJLvAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIDBB8ysGG6bgAAAy1JREFUeNrtnD1oFFEUhc8s6Y0gCDHrT64/EE0UCVEQxB9ioSgWFoqNRgQFG0EQUlhYCXYRBSFuIogkTSKCoNhY2FpYiDYHEYJYiRYuiOhY5EVWFyNxNzvv3T1ftc2+eXO/uWd29s0MIIQQQgghhBBCCCGEEEIIIYQQQgghxILkea4ieIWkqQrNpRTZfF6QnEytk0n2k/xGco8EL8w2AEdIVrIsi1ry/NxIbgXwEsBtM3umzPh3N3SR/EGyksBcyyRzkqMyt3jJ1ZjjmuRAkDsiY/9XwLVBciUWyTWxPBjkXtcvf2dxTXJDkHtNhpzFNcldQe5FmXES1zWxvDvIvapYdhbX4To3J3lFJpzFNcn9Qe55GXAS1zWxPBTkXlYsO4trkjuD3EuquLO4JnkoyD2tSjuJ65pYPhzkXlAsO4trkvuC3HOqrLO4JnksyD3hqTaZI8n9mFu2mwAwBaBjEV8vA7gFYNjMxvM8R5Zlv6J7/rMEFyv4HoCTjYxhZtkfY54xszsp16UEP3Q2+YA5CmAs9aJ4Epw3Ue5BADMeiuJJcDM795GX/ZHgernTnvapQ1p/Y8bbDqmDnSPBEtxWvJVgx5hZjzfJElxPH4BXEuyXKoAdXjpZl0n1MZ0D+AKgh+RndXA8TDT4/Y9A3VLjJnVwwdQs523H3P/RfWa2qHMoyTKAN+GpxuH5Mc3sgzItAkjeCIv1GxsYI5mnGttN7miQu6UJY0X/VGNbUHOD3M0g15p4wET3VGO7du7dIHf1EoytuC5Y7lij51zFdbyxPB5eeLKqBQeS4rrFnTsdOndlC7epuG5Roe8HuesK2LbieoljeSoUeEWBB1iScZ0l0LlPABwAsNzMPhU8ly4AswAmzGw4BcGlyOU+ADAEoFy0XAAws/cAugEcTyWuSxHLfQhgL4BlZjYby7yC5F4k8ka+LFK5zwEMAug0s2qkc0wirksRFu4xgIEQy9VYC5dKXGeRyX2KuReSdpvZ10Qu39YAeA1gEsBZM/uuDv47vQC6UpEbOvkdgPUATgHYrItbp5DU7U9CCCGEEEIIIYQQQgghhBBCCCGEEEIIIUTK/ASpxrk/iYZ2rgAAAABJRU5ErkJggg==);background-position:50%;background-repeat:no-repeat;display:block;position:absolute;inset:0}.event-list-item-caption{z-index:1;pointer-events:none;background:linear-gradient(#0000 0%,#000000a6 100%);flex-direction:column;justify-content:flex-end;padding-top:8px;padding-bottom:8px;padding-left:8px;font-size:11px;display:flex;position:absolute;bottom:0;left:0;right:0}.event-list-item:hover .event-list-item__time{color:#fff}.event-list-item__time{text-shadow:0 1px 2px #000;order:1;font-size:14px;font-weight:700}.event-list-item__camera-name{white-space:nowrap;text-overflow:ellipsis;font-family:Roboto,sans-serif;font-size:13px;font-weight:700;line-height:24px;overflow:hidden}.event-list-item__duration{opacity:.9;background-color:#000000bf;padding:0 4px;font-size:12px;position:absolute;bottom:32px;right:2px}.event-list-item__temperature{text-shadow:0 1px 2px #000;align-items:center;padding:0 4px;font-size:14px;font-weight:700;display:flex;position:absolute;bottom:4px;right:2px}.event-list-item .frame{--frame-color-hsl:186 100% 50%;border:1px solid hsl(var(--frame-color-hsl)/.2);position:absolute;top:0;left:0;right:0}.event-list-item .preview{opacity:0;pointer-events:none;transition:opacity 0s linear .2s;position:absolute;box-shadow:0 0 4px #000000bf}.event-list-item .trigger:hover~.preview{opacity:1}.event-list-item__license-plate-trigger{outline:2px solid var(--license-plate-color)}.event-list-item__license-plate .plate-number{color:#fff;font-family:Roboto Mono,monospace}.event-list-item__license-plate .plate-number .digit{color:var(--license-plate-color)}.event-list-item__license-plate .plate-number .digit:first-of-type{margin-left:2px}.event-list-item__license-plate-caption{z-index:1;background-color:#000;justify-content:space-between;align-items:center;gap:10px;height:60px;padding-left:10px;display:flex;position:absolute;bottom:0;left:0;right:0}.event-list-item__license-plate-caption .plate-number{color:#fff;letter-spacing:1px;border:2px solid #ffffff80;border-radius:4px;padding:0 8px;font-family:Roboto Mono,monospace;font-size:16px;& .digit{color:var(--license-plate-color)}& :is(.char+.digit),& :is(.digit+.char){margin-left:.25rem}}.event-list-item__detected-object-label{white-space:nowrap;color:#fff;background-color:#00000080;flex-direction:column;min-width:64px;font-family:Roboto Mono,monospace;font-size:13px;font-weight:700;display:flex;position:absolute}.event-list-item__detected-object-label__caption{opacity:.75;color:#000;padding-left:4px;font-size:9px;line-height:14px}.event-list-item__license-plate-label{white-space:nowrap;color:#fff;background-color:#00000080;flex-direction:column;font-family:Roboto Mono,monospace;font-size:14px;display:flex;position:absolute}.event-list-item__license-plate-label .digit{color:var(--license-plate-color)}.event-list-item__license-plate-label .digit:first-of-type{margin-left:2px}.event-list-item__license-plate-label__caption{background-color:var(--license-plate-color);color:#000;opacity:.75;padding-left:4px;font-size:10px}.event-list-item__license-plate .plate-number{background:#000;height:16px;padding-left:2px;padding-right:2px;position:absolute;bottom:0;left:0;right:0}.event-list-item__license-plate .frame{--frame-color-hsl:186 100% 50%}.event-list-item-face .frame{--frame-color-hsl:42 100% 50%;bottom:0}.event-list-item .menu-button{position:absolute;top:0;right:0}.x-3deye-button{color:inherit;user-select:none;letter-spacing:.0107143em;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;height:32px;padding:0 8px;font-weight:500;display:inline-flex;position:relative}.x-3deye-button sup{position:relative;top:-.5em;left:.25em}.x-3deye-button.x-3deye-button--fullwidth{width:100%}.x-3deye-button:focus,.x-3deye-button.x-3deye-button:not(:disabled):hover{background-color:rgba(var(--surface-highlight-rgb),.1)}.x-3deye-button--icon{border-radius:16px;justify-content:center;align-items:center;width:32px;height:32px;padding:4px;display:inline-flex}.x-3deye-button--action .icon{opacity:.5}.x-3deye-button--action:hover .icon{opacity:1}.x-3deye-button:disabled{opacity:.4}.x-3deye-button:not(:disabled){cursor:pointer}.x-3deye-button.x-3deye-button--filled,.x-3deye-button.x-3deye-button--text{text-transform:capitalize;border-radius:.25rem;min-width:80px;padding:0 1rem;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500}.x-3deye-button.x-3deye-button--filled{color:#fff;background-color:#27b9a1}.x-3deye-button.x-3deye-button--filled:not(:disabled):hover{background-color:#22a38e}.x-3deye-button.x-3deye-button--filled:focus{transition:box-shadow .2s cubic-bezier(.215,.61,.355,1);box-shadow:0 0 0 2px #27b9a154}.x-3deye-button canvas{color:rgb(var(--surface-highlight-rgb))}.x-3deye-button--overlay{pointer-events:auto;color:#fff;background:#00000080;border:2px solid #ffffff40}.x-3deye-button.x-3deye-button--overlay:focus,.x-3deye-button.x-3deye-button--overlay:not(:disabled):hover{background:#00000080;border:2px solid #ffffff80}.x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(:disabled),.x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(:disabled):hover{background-color:#9c333180}.preloader-container{flex:1;justify-content:center;align-items:center;display:flex}.x-3deye-slider{align-items:center;display:flex;position:relative}.x-3deye-slider:focus-visible{outline:none}.x-3deye-slider.horizontal{width:100%;height:20px}.x-3deye-slider.vertical{flex-direction:column;width:20px;height:100%}.x-3deye-slider__track{background:var(--surface-inverse,gainsboro);flex:1;position:relative}.x-3deye-slider__bar{background-color:var(--primary-color,#0067ac);position:absolute}.x-3deye-slider.disabled .x-3deye-slider__bar{background-color:#a5a5a5}.x-3deye-slider.horizontal .x-3deye-slider__bar{top:0;bottom:0;left:0}.x-3deye-slider.vertical .x-3deye-slider__bar{bottom:0;left:0;right:0}.x-3deye-slider.horizontal .x-3deye-slider__track{height:3px}.x-3deye-slider.vertical .x-3deye-slider__track{width:3px}.x-3deye-slider__thumb{will-change:transform box-shadow;background:#fff;border-radius:50%;width:20px;height:20px;transition:box-shadow .15s cubic-bezier(.45,.05,.55,.95);box-shadow:0 0 0 6px #0064ff00,inset 0 0 0 1px #0000001a,1px 1px 2px #00000040}.x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover,.x-3deye-slider:focus .x-3deye-slider__thumb{box-shadow:0 0 0 6px rgba(var(--surface-highlight-rgb,0,100,255),.1),0 0 0 1px #0000001a inset,1px 1px 2px 0 #00000040}.x-3deye-slider:focus .x-3deye-slider__thumb.active{box-shadow:0 0 0 6px rgba(var(--surface-highlight-rgb,0,100,255),.2),0 0 0 1px #0000001a inset,1px 1px 2px 0 #00000040}.x-3deye-slider.horizontal .x-3deye-slider__thumb{margin-left:-10px}.x-3deye-slider.vertical .x-3deye-slider__thumb{margin-bottom:-10px}.x-3deye-slider__label{pointer-events:none;touch-action:none;will-change:transform;background:var(--primary-color,#0067ac);color:var(--on-primary-color,white);transform-origin:bottom;border-radius:4px;width:fit-content;min-width:24px;padding:4px 8px;font-size:.75rem;transition:transform .15s cubic-bezier(.45,.05,.55,.95);position:relative;bottom:50%;left:50%;transform:translate(-50%,-100%)scale(0)}.x-3deye-slider__label.open,.x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover .x-3deye-slider__label,.x-3deye-slider:focus .x-3deye-slider__label{transform:translate(-50%,-100%)scale(1)}.x-3deye-slider__label:before{content:"";border-left:5px solid #0000;border-right:5px solid #0000;border-top:5px solid var(--primary-color,#0067ac);width:0;height:0;display:block;position:absolute;top:100%;left:calc(50% - 5px)}.x-3deye-button-group{gap:4px;padding:4px;display:flex}.x-3deye-button-group>.x-3deye-button{text-transform:uppercase;flex:1;height:35px;font-size:11px}.x-3deye-button-group>.x-3deye-button.button-selected,.x-3deye-button-group>.x-3deye-button.button-selected:hover{color:var(--on-container);background-color:var(--container)}.x-3deye-button-group>.x-3deye-button+.x-3deye-button{margin-left:1px}.x-3deye-button-group>.x-3deye-button:hover{color:var(--on-container)}.x-3deye-button-group>.x-3deye-button.button-unselected{color:var(--on-surface)}.x-3deye-button-group>.x-3deye-button.button-selected canvas{color:var(--container)}.x-3deye-datetimepicker{width:max-content}.x-3deye-button.button-date{text-transform:none;font-family:Roboto Mono,monospace}.x-3deye-button.button-date:hover{text-decoration:underline}.x-3deye-timepicker{height:260px;overflow:hidden}.x-3deye-timepicker__column{text-align:center;flex:1;width:60px;font-size:.85rem;overflow:hidden}.x-3deye-timepicker--alt .x-3deye-timepicker__column{white-space:nowrap;width:max-content;height:100%;overflow-y:scroll}.x-3deye-timepicker--alt .x-3deye-timepicker__column>div{width:max-content}.x-3deye-timepicker__column:hover{overflow-y:scroll}.x-3deye-timepicker__value{border-radius:.25rem;height:30px;padding:0 10px;line-height:30px}.x-3deye-datepicker__day{border-radius:.25rem;justify-content:center;align-items:center;width:1.75rem;height:1.75rem;font-weight:500;display:flex}.x-3deye-datepicker__day:not(.x-3deye-datepicker__day--selected):not(.x-3deye-datepicker__day--disabled):hover{color:currentColor;background-color:#0000000d}.x-3deye-datepicker__day--next-month,.x-3deye-datepicker__day--previous-month{color:oklch(.7 0 0)}.x-3deye-datepicker__day--disabled{color:oklch(.9 0 0)}.x-3deye-datepicker__day--selected{color:#fff;background-color:#0067ac}.x-3deye-datepicker__day--today{border:2px solid #0067ac66;font-weight:700}.x-3deye-timepicker__column>div{width:60px;height:40px;padding:5px 10px;&:hover .x-3deye-timepicker__value{background-color:#0000000d}&.selected .x-3deye-timepicker__value{color:#fff;background-color:#0067ac}}.x-3deye-datepicker__button--previous-month,.x-3deye-datepicker__button--next-month{opacity:.3;padding:0;&:disabled{opacity:.1}&:hover:not(:disabled){opacity:1}}.x-3deye-popover-container{color:#fff;text-align:left;background:#222;border-radius:6px;padding:8px;animation:.15s ease-in slide-in;box-shadow:0 12px 28px #0003,0 2px 4px #0000001a,inset 0 0 0 1px #ffffff0d}@media (prefers-reduced-motion:reduce){.x-3deye-popover-container{animation:none}}.x-3deye-popover-container .tip{--tip-background:#222;--tip-border:#ffffff0d}.x-3deye-tooltip{color:#fff;background:#000000e6;border:1px solid #ffffff26;border-radius:4px;padding:.5em 1em;font-size:12px}.menu-button{background:0 0;border:none}.menu-button[data-open],.menu-button:hover{background-color:rgba(var(--surface-highlight-rgb),.1)}.menu-list{background-color:var(--container);color:var(--on-container);backdrop-filter:blur(10px);border-radius:6px;outline:0;padding:4px;box-shadow:0 12px 28px #0003,0 2px 4px #0000001a,inset 0 0 0 1px #ffffff0d}.menu-item{text-align:left;background:0 0;border:none;border-radius:4px;outline:0;justify-content:space-between;align-items:center;width:100%;min-width:120px;margin:0;display:flex}.menu-item--danger{color:var(--danger-color)}.menu-item.x-3deye-button{text-align:left;letter-spacing:.5px;background:0 0;border:none;width:100%;height:fit-content;padding:8px 16px;font-size:14px}.menu-item:focus,.menu-item[data-focus-inside][data-open]{background-color:rgba(var(--surface-highlight-rgb),.1)}.frame .corner-highlight-tl{background-color:hsl(var(--frame-color-hsl));width:10px;height:2px;position:absolute;top:-1px;left:-1px}.frame .corner-highlight-tl:before{content:"";background-color:hsl(var(--frame-color-hsl));width:2px;height:10px;display:block;position:absolute;top:0;left:0}.frame .corner-highlight-tr{background-color:hsl(var(--frame-color-hsl));width:10px;height:2px;position:absolute;top:-1px;right:-1px}.frame .corner-highlight-tr:before{content:"";background-color:hsl(var(--frame-color-hsl));width:2px;height:10px;display:block;position:absolute;top:0;right:0}.frame .corner-highlight-br{background-color:hsl(var(--frame-color-hsl));width:10px;height:2px;position:absolute;bottom:-1px;right:-1px}.frame .corner-highlight-br:before{content:"";background-color:hsl(var(--frame-color-hsl));width:2px;height:10px;display:block;position:absolute;bottom:0;right:0}.frame .corner-highlight-bl{background-color:hsl(var(--frame-color-hsl));width:10px;height:2px;position:absolute;bottom:-1px;left:-1px}.frame .corner-highlight-bl:before{content:"";background-color:hsl(var(--frame-color-hsl));width:2px;height:10px;display:block;position:absolute;bottom:0;left:0}