@3deye-toolkit/react-event-search 0.0.1-alpha.21 → 0.0.1-alpha.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,77 +1,87 @@
1
1
  .x-3deye-button {
2
- color: inherit;
3
- background: none;
4
- border: none;
5
- position: relative;
6
- padding: 4px;
7
- text-transform: uppercase;
8
- -webkit-user-select: none;
9
- -moz-user-select: none;
10
- -ms-user-select: none;
11
- user-select: none;
12
- font-family: 'Roboto', sans-serif;
13
- text-align: center;
14
- align-items: flex-start;
2
+ color: inherit;
3
+ background: none;
4
+ border: none;
5
+ position: relative;
6
+ padding: 0 8px;
7
+ height: 32px;
8
+ text-transform: uppercase;
9
+ -webkit-user-select: none;
10
+ -moz-user-select: none;
11
+ -ms-user-select: none;
12
+ user-select: none;
13
+ text-align: center;
14
+ align-items: flex-start;
15
+ border-radius: 4px;
15
16
  }
16
17
 
17
18
  .x-3deye-button.fullwidth {
18
- width: 100%;
19
+ width: 100%;
19
20
  }
20
21
 
21
- .x-3deye-button:focus, .x-3deye-button.x-3deye-button--icon:not(:disabled):hover {
22
- background-color: rgba(var(--surface-highlight-rgb), 0.1);
22
+ .x-3deye-button:focus,
23
+ .x-3deye-button.x-3deye-button:not(:disabled):hover {
24
+ background-color: rgba(var(--surface-highlight-rgb), 0.1);
23
25
  }
24
26
 
25
27
  .x-3deye-button--icon {
26
- border-radius: 16px;
27
- width: 32px;
28
- height: 32px;
29
- display: inline-flex;
30
- align-items: center;
31
- justify-content: center;
28
+ border-radius: 16px;
29
+ padding: 4px;
30
+ width: 32px;
31
+ height: 32px;
32
+ display: inline-flex;
33
+ align-items: center;
34
+ justify-content: center;
32
35
  }
33
36
 
34
37
  .x-3deye-button:disabled {
35
- opacity: 0.4;
38
+ opacity: 0.4;
36
39
  }
37
40
 
38
- .x-3deye-button.x-3deye-button--save, .x-3deye-button.x-3deye-button--cancel {
39
- color: white;
40
- border-radius: 4px;
41
- text-transform: none;
42
- margin: 4px;
43
- min-width: 80px;
41
+ .x-3deye-button.x-3deye-button--ok,
42
+ .x-3deye-button.x-3deye-button--cancel {
43
+ color: white;
44
+ text-transform: none;
45
+ min-width: 80px;
44
46
  }
45
47
 
46
- .x-3deye-button.x-3deye-button--save.fullwidth, .x-3deye-button.x-3deye-button--cancel.fullwidth {
47
- width: calc(100% - 8px);
48
+ .x-3deye-button.x-3deye-button--ok.fullwidth,
49
+ .x-3deye-button.x-3deye-button--cancel.fullwidth {
50
+ width: calc(100% - 8px);
48
51
  }
49
52
 
50
53
  .x-3deye-button:not(:disabled) {
51
- cursor: pointer;
54
+ cursor: pointer;
55
+ }
56
+
57
+ .x-3deye-button.x-3deye-button--ok {
58
+ background-color: #27b9a1;
52
59
  }
53
60
 
54
- .x-3deye-button.x-3deye-button--save {
55
- background-color: #27B9A1;
61
+ .x-3deye-button.x-3deye-button--ok:not(:disabled):hover {
62
+ background-color: #61beaf;
56
63
  }
57
64
 
58
- .x-3deye-button.x-3deye-button--save:focus {
59
- transition: box-shadow 0.2s cubic-bezier(0.215, 0.610, 0.355, 1);
60
- box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
65
+ .x-3deye-button.x-3deye-button--ok:focus {
66
+ transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
67
+ box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
61
68
  }
62
69
 
63
70
  .x-3deye-button.x-3deye-button--cancel {
64
- background-color: rgb(119, 87, 178);
71
+ background-color: rgb(119, 87, 178);
65
72
  }
66
73
 
67
- .x-3deye-button.x-3deye-button--cancel:focus {
68
- transition: box-shadow 0.2s cubic-bezier(0.215, 0.610, 0.355, 1);
69
- box-shadow: 0 0 0 2px rgba(119, 87, 178, 0.33);
74
+ .x-3deye-button.x-3deye-button--cancel:not(:disabled):hover {
75
+ background-color: rgb(142, 122, 180);
70
76
  }
71
77
 
78
+ .x-3deye-button.x-3deye-button--cancel:focus {
79
+ transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
80
+ box-shadow: 0 0 0 2px rgba(119, 87, 178, 0.33);
81
+ }
72
82
 
73
83
  .x-3deye-button canvas {
74
- color: rgb(var(--surface-highlight-rgb));
84
+ color: rgb(var(--surface-highlight-rgb));
75
85
  }
76
86
 
77
87
  :root {
@@ -92,43 +102,50 @@
92
102
  }
93
103
 
94
104
  .color-selector {
95
- display: flex;
96
- z-index: 1;
97
- padding: 5px 8px;
98
- justify-content: space-between;
99
- align-items: center;
105
+ display: flex;
106
+ z-index: 1;
107
+ padding: 5px 0 5px 8px;
108
+ justify-content: space-between;
109
+ align-items: center;
100
110
  }
101
111
 
102
112
  .color-selector__items {
103
- display: flex;
113
+ display: flex;
114
+ align-items: center;
104
115
  }
105
116
 
106
117
  .color-selector__item {
107
- border: none;
108
- width: 20px;
109
- height: 20px;
110
- border-radius: 20px;
111
- margin: 4px;
112
- padding: 0;
113
- box-shadow: 0 0 0 1.5px white;
114
- transition: box-shadow 0.2s ease-in;
118
+ border: none;
119
+ width: 20px;
120
+ height: 20px;
121
+ border-radius: 20px;
122
+ margin: 4px;
123
+ padding: 0;
124
+ box-shadow: 0 0 0 1.5px currentColor;
125
+ transition: box-shadow 0.2s ease-in;
126
+ color: currentColor;
115
127
  }
116
128
 
117
- .color-selector__item:focus {
118
- box-shadow: 0 0 0 1.5px white, 0 0 0 5px rgba(255, 255, 255, 0.2);
129
+ .color-selector__item:focus {
130
+ box-shadow: 0 0 0 1.5px currentColor, 0 0 0 5px rgba(var(--surface-highlight-rgb), 0.2);
119
131
  }
120
132
 
121
133
  .color-selector__item:focus:active {
122
- box-shadow: 0 0 0 1.5px white;
134
+ box-shadow: 0 0 0 1.5px currentColor;
123
135
  }
124
136
 
125
137
  .color-selector__item .icon {
126
- opacity: 0;
127
- transition: opacity 0.2s ease-in;
138
+ opacity: 0;
139
+ transition: opacity 0.2s ease-in;
128
140
  }
129
141
 
130
142
  .color-selector__item.selected .icon {
131
- opacity: 1;
143
+ opacity: 1;
144
+ }
145
+
146
+ .color-selector__clear {
147
+ border-radius: 50%;
148
+ padding: 6px;
132
149
  }
133
150
 
134
151
  /**
@@ -402,254 +419,14 @@
402
419
  .mdc-slider--discrete.mdc-slider--display-markers .mdc-slider__track-marker-container {
403
420
  visibility: visible;
404
421
  }
405
- .menu-items-container {
406
- background: rgba(0, 0, 0, 0.9);
407
- box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2),0 2px 4px 0 rgb(0 0 0 / 0.1),inset 0 0 0 1px rgb(255 255 255 /0.05);
408
- border-radius: 4px;
409
- padding: 4px;
410
- }
411
-
412
- .menu-items-container .x-3deye-button {
413
- text-transform: none;
414
- }
415
-
416
- .menu-items-container button {
417
- background: none;
418
- border: none;
419
- text-align: left;
420
- color: white;
421
- padding: 8px 16px;
422
- display: block;
423
- width: 100%;
424
- border-radius: 4px;
425
- }
426
-
427
- .menu-items-container button:hover {
428
- background-color: rgba(255, 255, 255, 0.22);
429
- }
430
-
431
- .themed-menu.menu-items-container {
432
- background-color: var(--background);
433
- }
434
-
435
- .themed-menu.menu-items-container button {
422
+ .preloader-container {
436
423
  color: var(--primary-text);
424
+ flex: 1;
425
+ display: flex;
426
+ justify-content: center;
427
+ align-items: center;
437
428
  }
438
429
 
439
- .themed-menu.menu-items-container button:hover {
440
- background-color: rgba(var(--surface-highlight-rgb), var(--surface-highlight-opacity));
441
- }
442
-
443
- /**
444
- * @license
445
- * Copyright Google LLC All Rights Reserved.
446
- *
447
- * Use of this source code is governed by an MIT-style license that can be
448
- * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
449
- */
450
- @-webkit-keyframes mdc-ripple-fg-radius-in {
451
- from {
452
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
453
- animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
454
- transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
455
- }
456
- to {
457
- transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
458
- }
459
- }
460
- @keyframes mdc-ripple-fg-radius-in {
461
- from {
462
- -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
463
- animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
464
- transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
465
- }
466
- to {
467
- transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
468
- }
469
- }
470
- @-webkit-keyframes mdc-ripple-fg-opacity-in {
471
- from {
472
- -webkit-animation-timing-function: linear;
473
- animation-timing-function: linear;
474
- opacity: 0;
475
- }
476
- to {
477
- opacity: var(--mdc-ripple-fg-opacity, 0);
478
- }
479
- }
480
- @keyframes mdc-ripple-fg-opacity-in {
481
- from {
482
- -webkit-animation-timing-function: linear;
483
- animation-timing-function: linear;
484
- opacity: 0;
485
- }
486
- to {
487
- opacity: var(--mdc-ripple-fg-opacity, 0);
488
- }
489
- }
490
- @-webkit-keyframes mdc-ripple-fg-opacity-out {
491
- from {
492
- -webkit-animation-timing-function: linear;
493
- animation-timing-function: linear;
494
- opacity: var(--mdc-ripple-fg-opacity, 0);
495
- }
496
- to {
497
- opacity: 0;
498
- }
499
- }
500
- @keyframes mdc-ripple-fg-opacity-out {
501
- from {
502
- -webkit-animation-timing-function: linear;
503
- animation-timing-function: linear;
504
- opacity: var(--mdc-ripple-fg-opacity, 0);
505
- }
506
- to {
507
- opacity: 0;
508
- }
509
- }
510
- .mdc-ripple-surface {
511
- --mdc-ripple-fg-size: 0;
512
- --mdc-ripple-left: 0;
513
- --mdc-ripple-top: 0;
514
- --mdc-ripple-fg-scale: 1;
515
- --mdc-ripple-fg-translate-end: 0;
516
- --mdc-ripple-fg-translate-start: 0;
517
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
518
- position: relative;
519
- outline: none;
520
- overflow: hidden;
521
- }
522
- .mdc-ripple-surface::before, .mdc-ripple-surface::after {
523
- position: absolute;
524
- border-radius: 50%;
525
- opacity: 0;
526
- pointer-events: none;
527
- content: "";
528
- }
529
- .mdc-ripple-surface::before {
530
- transition: opacity 15ms linear, background-color 15ms linear;
531
- z-index: 1;
532
- }
533
- .mdc-ripple-surface.mdc-ripple-upgraded::before {
534
- transform: scale(var(--mdc-ripple-fg-scale, 1));
535
- }
536
- .mdc-ripple-surface.mdc-ripple-upgraded::after {
537
- top: 0;
538
- /* @noflip */
539
- left: 0;
540
- transform: scale(0);
541
- transform-origin: center center;
542
- }
543
- .mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after {
544
- top: var(--mdc-ripple-top, 0);
545
- /* @noflip */
546
- left: var(--mdc-ripple-left, 0);
547
- }
548
- .mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after {
549
- -webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
550
- animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
551
- }
552
- .mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after {
553
- -webkit-animation: mdc-ripple-fg-opacity-out 150ms;
554
- animation: mdc-ripple-fg-opacity-out 150ms;
555
- transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
556
- }
557
- .mdc-ripple-surface::before, .mdc-ripple-surface::after {
558
- background-color: #000;
559
- }
560
- .mdc-ripple-surface:hover::before {
561
- opacity: 0.04;
562
- }
563
- .mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before {
564
- transition-duration: 75ms;
565
- opacity: 0.12;
566
- }
567
- .mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
568
- transition: opacity 150ms linear;
569
- }
570
- .mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
571
- transition-duration: 75ms;
572
- opacity: 0.12;
573
- }
574
- .mdc-ripple-surface.mdc-ripple-upgraded {
575
- --mdc-ripple-fg-opacity: 0.12;
576
- }
577
- .mdc-ripple-surface::before, .mdc-ripple-surface::after {
578
- top: calc(50% - 100%);
579
- /* @noflip */
580
- left: calc(50% - 100%);
581
- width: 200%;
582
- height: 200%;
583
- }
584
- .mdc-ripple-surface.mdc-ripple-upgraded::after {
585
- width: var(--mdc-ripple-fg-size, 100%);
586
- height: var(--mdc-ripple-fg-size, 100%);
587
- }
588
- .mdc-ripple-surface[data-mdc-ripple-is-unbounded] {
589
- overflow: visible;
590
- }
591
- .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after {
592
- top: calc(50% - 50%);
593
- /* @noflip */
594
- left: calc(50% - 50%);
595
- width: 100%;
596
- height: 100%;
597
- }
598
- .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
599
- top: var(--mdc-ripple-top, calc(50% - 50%));
600
- /* @noflip */
601
- left: var(--mdc-ripple-left, calc(50% - 50%));
602
- width: var(--mdc-ripple-fg-size, 100%);
603
- height: var(--mdc-ripple-fg-size, 100%);
604
- }
605
- .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
606
- width: var(--mdc-ripple-fg-size, 100%);
607
- height: var(--mdc-ripple-fg-size, 100%);
608
- }
609
- .mdc-ripple-surface--primary::before, .mdc-ripple-surface--primary::after {
610
- background-color: #6200ee;
611
- /* @alternate */
612
- background-color: var(--mdc-theme-primary, #6200ee);
613
- }
614
- .mdc-ripple-surface--primary:hover::before {
615
- opacity: 0.04;
616
- }
617
- .mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before {
618
- transition-duration: 75ms;
619
- opacity: 0.12;
620
- }
621
- .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after {
622
- transition: opacity 150ms linear;
623
- }
624
- .mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after {
625
- transition-duration: 75ms;
626
- opacity: 0.12;
627
- }
628
- .mdc-ripple-surface--primary.mdc-ripple-upgraded {
629
- --mdc-ripple-fg-opacity: 0.12;
630
- }
631
- .mdc-ripple-surface--accent::before, .mdc-ripple-surface--accent::after {
632
- background-color: #018786;
633
- /* @alternate */
634
- background-color: var(--mdc-theme-secondary, #018786);
635
- }
636
- .mdc-ripple-surface--accent:hover::before {
637
- opacity: 0.04;
638
- }
639
- .mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before {
640
- transition-duration: 75ms;
641
- opacity: 0.12;
642
- }
643
- .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after {
644
- transition: opacity 150ms linear;
645
- }
646
- .mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after {
647
- transition-duration: 75ms;
648
- opacity: 0.12;
649
- }
650
- .mdc-ripple-surface--accent.mdc-ripple-upgraded {
651
- --mdc-ripple-fg-opacity: 0.12;
652
- }
653
430
  .event-list-item {
654
431
  -webkit-user-select: none;
655
432
  -moz-user-select: none;
@@ -657,13 +434,14 @@
657
434
  user-select: none;
658
435
  position: absolute;
659
436
  font-size: 12px;
660
- color: rgba(255, 255, 255, 0.8);
437
+ color: rgba(255, 255, 255, 0.75);
661
438
  background-color: rgba(255, 255, 255, 0.1);
662
439
  top: 0;
663
- bottom: 2px;
440
+ bottom: 0;
664
441
  left: 0;
665
442
  right: 0;
666
- --mdc-theme-primary: white;
443
+ overflow: hidden;
444
+ --license-plate-color: rgb(0, 229, 255);
667
445
  }
668
446
 
669
447
  .event-list-item.mdc-ripple-surface {
@@ -678,9 +456,9 @@
678
456
  .event-list-item .acknowledged-overlay {
679
457
  position: absolute;
680
458
  top: 0;
681
- left: 0;
682
- bottom: 0;
683
- right: 0;
459
+ left: 0;
460
+ bottom: 0;
461
+ right: 0;
684
462
  pointer-events: none;
685
463
  display: grid;
686
464
  place-items: center;
@@ -716,31 +494,31 @@
716
494
  right: 0;
717
495
  z-index: 1;
718
496
  pointer-events: none;
719
- display: flex;
720
- flex-direction: column;
721
- justify-content: flex-end;
497
+ display: flex;
498
+ flex-direction: column;
499
+ justify-content: flex-end;
722
500
  }
723
501
 
724
502
  .event-list-item:hover .event-list-item__time {
725
- text-decoration: underline;
503
+ color: white;
726
504
  }
727
505
 
728
506
  .event-list-item__time {
729
- text-shadow: 0 1px 2px black;
730
- font-size: 12px;
731
- /* order: 2;
732
- line-height: 20px; */
507
+ text-shadow: 0 1px 2px black;
508
+ font-size: 14px;
509
+ order: 1;
510
+ font-weight: bold;
733
511
  }
734
512
 
735
513
  .event-list-item__camera-name {
736
514
  white-space: nowrap;
737
515
  overflow: hidden;
738
516
  text-overflow: ellipsis;
739
- font-weight: bold;
740
- font-size: 16px;
741
- line-height: 24px;
742
- font-family: 'Roboto', sans-serif;
743
- /* text-shadow: 0 1px 2px black;
517
+ font-weight: bold;
518
+ font-size: 13px;
519
+ line-height: 24px;
520
+ font-family: 'Roboto', sans-serif;
521
+ /* text-shadow: 0 1px 2px black;
744
522
  line-height: 20px; */
745
523
  }
746
524
 
@@ -754,40 +532,174 @@
754
532
  opacity: 0.9;
755
533
  }
756
534
 
757
- .event-list-item-face {
535
+ .event-list-item__temperature {
536
+ font-size: 14px;
537
+ font-weight: bold;
538
+ padding: 0 4px;
539
+ position: absolute;
540
+ right: 2px;
541
+ bottom: 4px;
542
+ display: flex;
543
+ align-items: center;
544
+ text-shadow: 0 1px 2px black;
545
+ }
546
+
547
+ .event-list-item .frame {
548
+ --frame-color-hsl: 186 100% 50%;
549
+ position: absolute;
550
+ top: 0;
551
+ left: 0;
552
+ right: 0;
553
+ border: 1px solid hsl(var(--frame-color-hsl) / 0.2);
554
+ }
555
+
556
+ .event-list-item .preview {
758
557
  opacity: 0;
759
558
  position: absolute;
760
559
  pointer-events: none;
761
560
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.75);
561
+ transition: opacity 0s linear 0.2s;
762
562
  }
763
563
 
764
- .event-list-item-face-trigger:hover + .event-list-item-face {
564
+ .event-list-item .trigger:hover ~ .preview {
765
565
  opacity: 1;
766
566
  }
767
567
 
768
- /**
769
- * Corners
770
- */
568
+ .event-list-item__license-plate-trigger {
569
+ outline: 2px solid var(--license-plate-color);
570
+ }
771
571
 
772
- .event-list-item-face .frame {
572
+ .event-list-item__license-plate .plate-number {
573
+ font-family: 'Roboto Mono', monospace;
574
+ color: white;
575
+ }
576
+
577
+ .event-list-item__license-plate .plate-number .digit {
578
+ color: var(--license-plate-color);
579
+ }
580
+
581
+ .event-list-item__license-plate .plate-number .digit:first-of-type {
582
+ margin-left: 2px;
583
+ }
584
+
585
+ .event-list-item__license-plate-caption {
773
586
  position: absolute;
774
- top: 0;
587
+ left: 0;
588
+ right: 0;
589
+ bottom: 0;
590
+ height: 60px;
591
+ display: flex;
592
+ align-items: center;
593
+ justify-content: space-between;
594
+ gap: 10px;
595
+ background-color: black;
596
+ z-index: 1;
597
+ padding-left: 10px;
598
+ }
599
+
600
+ .event-list-item__license-plate-caption .plate-number {
601
+ font-family: 'Roboto Mono', monospace;
602
+ font-size: 16px;
603
+ color: white;
604
+ border: 2px solid rgba(255, 255, 255, 0.5);
605
+ padding: 0 8px;
606
+ border-radius: 4px;
607
+ letter-spacing: 1px;
608
+ }
609
+
610
+ .event-list-item__license-plate-caption .plate-number .digit {
611
+ color: var(--license-plate-color);
612
+ }
613
+
614
+ .event-list-item__license-plate-caption .plate-number .digit:first-of-type {
615
+ margin-left: 4px;
616
+ }
617
+
618
+ .event-list-item__detected-object-label {
619
+ display: flex;
620
+ flex-direction: column;
621
+ background-color: rgba(0, 0, 0, 0.5);
622
+ position: absolute;
623
+ font-size: 13px;
624
+ font-family: 'Roboto Mono', monospace;
625
+ white-space: nowrap;
626
+ color: white;
627
+ font-weight: bold;
628
+ min-width: 64px;
629
+ }
630
+
631
+ .event-list-item__detected-object-label__caption {
632
+ padding-left: 4px;
633
+ font-size: 9px;
634
+ line-height: 14px;
635
+ opacity: 0.75;
636
+ color: black;
637
+ }
638
+
639
+ .event-list-item__license-plate-label {
640
+ display: flex;
641
+ flex-direction: column;
642
+ background-color: rgba(0, 0, 0, 0.5);
643
+ position: absolute;
644
+ font-size: 14px;
645
+ font-family: 'Roboto Mono', monospace;
646
+ white-space: nowrap;
647
+ color: white;
648
+ }
649
+
650
+ .event-list-item__license-plate-label .digit {
651
+ color: var(--license-plate-color);
652
+ }
653
+
654
+ .event-list-item__license-plate-label .digit:first-of-type {
655
+ margin-left: 2px;
656
+ }
657
+
658
+ .event-list-item__license-plate-label__caption {
659
+ padding-left: 4px;
660
+ background-color: var(--license-plate-color);
661
+ color: black;
662
+ opacity: 0.75;
663
+ font-size: 10px;
664
+ }
665
+
666
+ .event-list-item__license-plate .plate-number {
667
+ position: absolute;
668
+ background: black;
669
+ padding-left: 2px;
670
+ padding-right: 2px;
775
671
  bottom: 0;
776
672
  left: 0;
777
673
  right: 0;
778
- border: 1px solid rgba(255, 165, 0, 0.2);
674
+ height: 16px;
675
+ }
676
+
677
+
678
+ .event-list-item__license-plate .frame {
679
+ --frame-color-hsl: 186 100% 50%;
680
+ }
681
+
682
+ .event-list-item-face .frame {
683
+ --frame-color-hsl: 42 100% 50%;
684
+ bottom: 0;
685
+ }
686
+
687
+ .event-list-item .menu-button {
688
+ position: absolute;
689
+ top: 0;
690
+ right: 0;
779
691
  }
780
692
 
781
- .event-list-item-face .corner-highlight-tl {
693
+ .frame .corner-highlight-tl {
782
694
  position: absolute;
783
695
  top: -1px;
784
696
  left: -1px;
785
697
  width: 10px;
786
698
  height: 2px;
787
- background-color: orange;
699
+ background-color: hsl(var(--frame-color-hsl));
788
700
  }
789
701
 
790
- .event-list-item-face .corner-highlight-tl::before {
702
+ .frame .corner-highlight-tl::before {
791
703
  content: '';
792
704
  display: block;
793
705
  position: absolute;
@@ -795,19 +707,19 @@
795
707
  left: 0;
796
708
  height: 10px;
797
709
  width: 2px;
798
- background-color: orange;
710
+ background-color: hsl(var(--frame-color-hsl));
799
711
  }
800
712
 
801
- .event-list-item-face .corner-highlight-tr {
713
+ .frame .corner-highlight-tr {
802
714
  position: absolute;
803
715
  top: -1px;
804
716
  right: -1px;
805
717
  width: 10px;
806
718
  height: 2px;
807
- background-color: orange;
719
+ background-color: hsl(var(--frame-color-hsl));
808
720
  }
809
721
 
810
- .event-list-item-face .corner-highlight-tr::before {
722
+ .frame .corner-highlight-tr::before {
811
723
  content: '';
812
724
  display: block;
813
725
  position: absolute;
@@ -815,19 +727,19 @@
815
727
  right: 0;
816
728
  height: 10px;
817
729
  width: 2px;
818
- background-color: orange;
730
+ background-color: hsl(var(--frame-color-hsl));
819
731
  }
820
732
 
821
- .event-list-item-face .corner-highlight-br {
733
+ .frame .corner-highlight-br {
822
734
  position: absolute;
823
735
  bottom: -1px;
824
736
  right: -1px;
825
737
  width: 10px;
826
738
  height: 2px;
827
- background-color: orange;
739
+ background-color: hsl(var(--frame-color-hsl));
828
740
  }
829
741
 
830
- .event-list-item-face .corner-highlight-br::before {
742
+ .frame .corner-highlight-br::before {
831
743
  content: '';
832
744
  display: block;
833
745
  position: absolute;
@@ -835,19 +747,19 @@
835
747
  right: 0;
836
748
  height: 10px;
837
749
  width: 2px;
838
- background-color: orange;
750
+ background-color: hsl(var(--frame-color-hsl));
839
751
  }
840
752
 
841
- .event-list-item-face .corner-highlight-bl {
753
+ .frame .corner-highlight-bl {
842
754
  position: absolute;
843
755
  bottom: -1px;
844
756
  left: -1px;
845
757
  width: 10px;
846
758
  height: 2px;
847
- background-color: orange;
759
+ background-color: hsl(var(--frame-color-hsl));
848
760
  }
849
761
 
850
- .event-list-item-face .corner-highlight-bl::before {
762
+ .frame .corner-highlight-bl::before {
851
763
  content: '';
852
764
  display: block;
853
765
  position: absolute;
@@ -855,20 +767,13 @@
855
767
  left: 0;
856
768
  height: 10px;
857
769
  width: 2px;
858
- background-color: orange;
770
+ background-color: hsl(var(--frame-color-hsl));
859
771
  }
860
772
 
861
- .preloader-container {
862
- color: var(--primary-text);
863
- flex: 1;
864
- display: flex;
865
- justify-content: center;
866
- align-items: center;
867
- }
868
-
869
- .react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
773
+ @charset "UTF-8";
774
+ .react-datepicker__year-read-view--down-arrow,
870
775
  .react-datepicker__month-read-view--down-arrow,
871
- .react-datepicker__month-year-read-view--down-arrow {
776
+ .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
872
777
  border-color: #ccc;
873
778
  border-style: solid;
874
779
  border-width: 3px 3px 0 0;
@@ -879,14 +784,12 @@
879
784
  top: 6px;
880
785
  width: 9px;
881
786
  }
882
-
883
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
787
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
884
788
  margin-left: -4px;
885
789
  position: absolute;
886
790
  width: 0;
887
791
  }
888
-
889
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
792
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
890
793
  box-sizing: content-box;
891
794
  position: absolute;
892
795
  border: 8px solid transparent;
@@ -897,45 +800,38 @@
897
800
  border-width: 8px;
898
801
  left: -8px;
899
802
  }
900
-
901
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before {
803
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
902
804
  border-bottom-color: #aeaeae;
903
805
  }
904
806
 
905
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
807
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
906
808
  top: 0;
907
809
  margin-top: -8px;
908
810
  }
909
-
910
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
811
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
911
812
  border-top: none;
912
813
  border-bottom-color: #f0f0f0;
913
814
  }
914
-
915
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
815
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
916
816
  top: 0;
917
817
  }
918
-
919
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
818
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
920
819
  top: -1px;
921
820
  border-bottom-color: #aeaeae;
922
821
  }
923
822
 
924
- .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
823
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
925
824
  bottom: 0;
926
825
  margin-bottom: -8px;
927
826
  }
928
-
929
- .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
827
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
930
828
  border-bottom: none;
931
829
  border-top-color: #fff;
932
830
  }
933
-
934
- .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
831
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
935
832
  bottom: 0;
936
833
  }
937
-
938
- .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before {
834
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
939
835
  bottom: -1px;
940
836
  border-top-color: #aeaeae;
941
837
  }
@@ -944,6 +840,7 @@
944
840
  display: inline-block;
945
841
  padding: 0;
946
842
  border: 0;
843
+ width: 100%;
947
844
  }
948
845
 
949
846
  .react-datepicker {
@@ -960,11 +857,9 @@
960
857
  .react-datepicker--time-only .react-datepicker__triangle {
961
858
  left: 35px;
962
859
  }
963
-
964
860
  .react-datepicker--time-only .react-datepicker__time-container {
965
861
  border-left: 0;
966
862
  }
967
-
968
863
  .react-datepicker--time-only .react-datepicker__time,
969
864
  .react-datepicker--time-only .react-datepicker__time-box {
970
865
  border-bottom-left-radius: 0.3rem;
@@ -979,34 +874,27 @@
979
874
  .react-datepicker-popper {
980
875
  z-index: 1;
981
876
  }
982
-
983
- .react-datepicker-popper[data-placement^="bottom"] {
877
+ .react-datepicker-popper[data-placement^=bottom] {
984
878
  padding-top: 10px;
985
879
  }
986
-
987
- .react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle, .react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
880
+ .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
988
881
  left: auto;
989
882
  right: 50px;
990
883
  }
991
-
992
- .react-datepicker-popper[data-placement^="top"] {
884
+ .react-datepicker-popper[data-placement^=top] {
993
885
  padding-bottom: 10px;
994
886
  }
995
-
996
- .react-datepicker-popper[data-placement^="right"] {
887
+ .react-datepicker-popper[data-placement^=right] {
997
888
  padding-left: 8px;
998
889
  }
999
-
1000
- .react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
890
+ .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
1001
891
  left: auto;
1002
892
  right: 42px;
1003
893
  }
1004
-
1005
- .react-datepicker-popper[data-placement^="left"] {
894
+ .react-datepicker-popper[data-placement^=left] {
1006
895
  padding-right: 8px;
1007
896
  }
1008
-
1009
- .react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
897
+ .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
1010
898
  left: 42px;
1011
899
  right: auto;
1012
900
  }
@@ -1019,17 +907,14 @@
1019
907
  padding: 8px 0;
1020
908
  position: relative;
1021
909
  }
1022
-
1023
910
  .react-datepicker__header--time {
1024
911
  padding-bottom: 8px;
1025
912
  padding-left: 5px;
1026
913
  padding-right: 5px;
1027
914
  }
1028
-
1029
915
  .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
1030
916
  border-top-left-radius: 0;
1031
917
  }
1032
-
1033
918
  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
1034
919
  border-top-right-radius: 0.3rem;
1035
920
  }
@@ -1076,19 +961,15 @@
1076
961
  text-indent: -999em;
1077
962
  overflow: hidden;
1078
963
  }
1079
-
1080
964
  .react-datepicker__navigation--previous {
1081
965
  left: 2px;
1082
966
  }
1083
-
1084
967
  .react-datepicker__navigation--next {
1085
968
  right: 2px;
1086
969
  }
1087
-
1088
970
  .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
1089
971
  right: 85px;
1090
972
  }
1091
-
1092
973
  .react-datepicker__navigation--years {
1093
974
  position: relative;
1094
975
  top: 0;
@@ -1096,15 +977,12 @@
1096
977
  margin-left: auto;
1097
978
  margin-right: auto;
1098
979
  }
1099
-
1100
980
  .react-datepicker__navigation--years-previous {
1101
981
  top: 4px;
1102
982
  }
1103
-
1104
983
  .react-datepicker__navigation--years-upcoming {
1105
984
  top: -4px;
1106
985
  }
1107
-
1108
986
  .react-datepicker__navigation:hover *::before {
1109
987
  border-color: #a6a6a6;
1110
988
  }
@@ -1113,21 +991,18 @@
1113
991
  position: relative;
1114
992
  top: -1px;
1115
993
  font-size: 20px;
994
+ width: 0;
1116
995
  }
1117
-
1118
996
  .react-datepicker__navigation-icon--next {
1119
997
  left: -2px;
1120
998
  }
1121
-
1122
999
  .react-datepicker__navigation-icon--next::before {
1123
1000
  transform: rotate(45deg);
1124
1001
  left: -7px;
1125
1002
  }
1126
-
1127
1003
  .react-datepicker__navigation-icon--previous {
1128
1004
  right: -2px;
1129
1005
  }
1130
-
1131
1006
  .react-datepicker__navigation-icon--previous::before {
1132
1007
  transform: rotate(225deg);
1133
1008
  right: -7px;
@@ -1141,13 +1016,11 @@
1141
1016
  margin: 0.4rem;
1142
1017
  text-align: center;
1143
1018
  }
1144
-
1145
1019
  .react-datepicker__year-wrapper {
1146
1020
  display: flex;
1147
1021
  flex-wrap: wrap;
1148
1022
  max-width: 180px;
1149
1023
  }
1150
-
1151
1024
  .react-datepicker__year .react-datepicker__year-text {
1152
1025
  display: inline-block;
1153
1026
  width: 4rem;
@@ -1158,7 +1031,6 @@
1158
1031
  margin: 0.4rem;
1159
1032
  text-align: center;
1160
1033
  }
1161
-
1162
1034
  .react-datepicker__month .react-datepicker__month-text,
1163
1035
  .react-datepicker__month .react-datepicker__quarter-text {
1164
1036
  display: inline-block;
@@ -1173,34 +1045,27 @@
1173
1045
  margin: 5px 0 10px 15px;
1174
1046
  text-align: left;
1175
1047
  }
1176
-
1177
1048
  .react-datepicker__input-time-container .react-datepicker-time__caption {
1178
1049
  display: inline-block;
1179
1050
  }
1180
-
1181
1051
  .react-datepicker__input-time-container .react-datepicker-time__input-container {
1182
1052
  display: inline-block;
1183
1053
  }
1184
-
1185
1054
  .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
1186
1055
  display: inline-block;
1187
1056
  margin-left: 10px;
1188
1057
  }
1189
-
1190
1058
  .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
1191
1059
  width: auto;
1192
1060
  }
1193
-
1194
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
1195
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
1061
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
1062
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
1196
1063
  -webkit-appearance: none;
1197
1064
  margin: 0;
1198
1065
  }
1199
-
1200
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
1066
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
1201
1067
  -moz-appearance: textfield;
1202
1068
  }
1203
-
1204
1069
  .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
1205
1070
  margin-left: 5px;
1206
1071
  display: inline-block;
@@ -1211,7 +1076,6 @@
1211
1076
  border-left: 1px solid #aeaeae;
1212
1077
  width: 85px;
1213
1078
  }
1214
-
1215
1079
  .react-datepicker__time-container--with-today-button {
1216
1080
  display: inline;
1217
1081
  border: 1px solid #aeaeae;
@@ -1220,13 +1084,11 @@
1220
1084
  right: -72px;
1221
1085
  top: 0;
1222
1086
  }
1223
-
1224
1087
  .react-datepicker__time-container .react-datepicker__time {
1225
1088
  position: relative;
1226
1089
  background: white;
1227
1090
  border-bottom-right-radius: 0.3rem;
1228
1091
  }
1229
-
1230
1092
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
1231
1093
  width: 85px;
1232
1094
  overflow-x: hidden;
@@ -1234,7 +1096,6 @@
1234
1096
  text-align: center;
1235
1097
  border-bottom-right-radius: 0.3rem;
1236
1098
  }
1237
-
1238
1099
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
1239
1100
  list-style: none;
1240
1101
  margin: 0;
@@ -1245,32 +1106,26 @@
1245
1106
  width: 100%;
1246
1107
  box-sizing: content-box;
1247
1108
  }
1248
-
1249
1109
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
1250
1110
  height: 30px;
1251
1111
  padding: 5px 10px;
1252
1112
  white-space: nowrap;
1253
1113
  }
1254
-
1255
1114
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
1256
1115
  cursor: pointer;
1257
1116
  background-color: #f0f0f0;
1258
1117
  }
1259
-
1260
1118
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
1261
1119
  background-color: #216ba5;
1262
1120
  color: white;
1263
1121
  font-weight: bold;
1264
1122
  }
1265
-
1266
1123
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
1267
1124
  background-color: #216ba5;
1268
1125
  }
1269
-
1270
1126
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
1271
1127
  color: #ccc;
1272
1128
  }
1273
-
1274
1129
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
1275
1130
  cursor: default;
1276
1131
  background-color: transparent;
@@ -1284,11 +1139,9 @@
1284
1139
  text-align: center;
1285
1140
  margin: 0.166rem;
1286
1141
  }
1287
-
1288
1142
  .react-datepicker__week-number.react-datepicker__week-number--clickable {
1289
1143
  cursor: pointer;
1290
1144
  }
1291
-
1292
1145
  .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
1293
1146
  border-radius: 0.3rem;
1294
1147
  background-color: #f0f0f0;
@@ -1322,20 +1175,17 @@
1322
1175
  background-color: #216ba5;
1323
1176
  color: #fff;
1324
1177
  }
1325
-
1326
1178
  .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
1327
1179
  .react-datepicker__quarter--selected:hover,
1328
1180
  .react-datepicker__quarter--in-selecting-range:hover,
1329
1181
  .react-datepicker__quarter--in-range:hover {
1330
1182
  background-color: #1d5d90;
1331
1183
  }
1332
-
1333
1184
  .react-datepicker__month--disabled,
1334
1185
  .react-datepicker__quarter--disabled {
1335
1186
  color: #ccc;
1336
1187
  pointer-events: none;
1337
1188
  }
1338
-
1339
1189
  .react-datepicker__month--disabled:hover,
1340
1190
  .react-datepicker__quarter--disabled:hover {
1341
1191
  cursor: default;
@@ -1348,7 +1198,6 @@
1348
1198
  .react-datepicker__year-text {
1349
1199
  cursor: pointer;
1350
1200
  }
1351
-
1352
1201
  .react-datepicker__day:hover,
1353
1202
  .react-datepicker__month-text:hover,
1354
1203
  .react-datepicker__quarter-text:hover,
@@ -1356,14 +1205,12 @@
1356
1205
  border-radius: 0.3rem;
1357
1206
  background-color: #f0f0f0;
1358
1207
  }
1359
-
1360
1208
  .react-datepicker__day--today,
1361
1209
  .react-datepicker__month-text--today,
1362
1210
  .react-datepicker__quarter-text--today,
1363
1211
  .react-datepicker__year-text--today {
1364
1212
  font-weight: bold;
1365
1213
  }
1366
-
1367
1214
  .react-datepicker__day--highlighted,
1368
1215
  .react-datepicker__month-text--highlighted,
1369
1216
  .react-datepicker__quarter-text--highlighted,
@@ -1372,28 +1219,24 @@
1372
1219
  background-color: #3dcc4a;
1373
1220
  color: #fff;
1374
1221
  }
1375
-
1376
1222
  .react-datepicker__day--highlighted:hover,
1377
1223
  .react-datepicker__month-text--highlighted:hover,
1378
1224
  .react-datepicker__quarter-text--highlighted:hover,
1379
1225
  .react-datepicker__year-text--highlighted:hover {
1380
1226
  background-color: #32be3f;
1381
1227
  }
1382
-
1383
1228
  .react-datepicker__day--highlighted-custom-1,
1384
1229
  .react-datepicker__month-text--highlighted-custom-1,
1385
1230
  .react-datepicker__quarter-text--highlighted-custom-1,
1386
1231
  .react-datepicker__year-text--highlighted-custom-1 {
1387
1232
  color: magenta;
1388
1233
  }
1389
-
1390
1234
  .react-datepicker__day--highlighted-custom-2,
1391
1235
  .react-datepicker__month-text--highlighted-custom-2,
1392
1236
  .react-datepicker__quarter-text--highlighted-custom-2,
1393
1237
  .react-datepicker__year-text--highlighted-custom-2 {
1394
1238
  color: green;
1395
1239
  }
1396
-
1397
1240
  .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
1398
1241
  .react-datepicker__month-text--selected,
1399
1242
  .react-datepicker__month-text--in-selecting-range,
@@ -1408,7 +1251,6 @@
1408
1251
  background-color: #216ba5;
1409
1252
  color: #fff;
1410
1253
  }
1411
-
1412
1254
  .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
1413
1255
  .react-datepicker__month-text--selected:hover,
1414
1256
  .react-datepicker__month-text--in-selecting-range:hover,
@@ -1421,7 +1263,6 @@
1421
1263
  .react-datepicker__year-text--in-range:hover {
1422
1264
  background-color: #1d5d90;
1423
1265
  }
1424
-
1425
1266
  .react-datepicker__day--keyboard-selected,
1426
1267
  .react-datepicker__month-text--keyboard-selected,
1427
1268
  .react-datepicker__quarter-text--keyboard-selected,
@@ -1430,29 +1271,49 @@
1430
1271
  background-color: #2a87d0;
1431
1272
  color: #fff;
1432
1273
  }
1433
-
1434
1274
  .react-datepicker__day--keyboard-selected:hover,
1435
1275
  .react-datepicker__month-text--keyboard-selected:hover,
1436
1276
  .react-datepicker__quarter-text--keyboard-selected:hover,
1437
1277
  .react-datepicker__year-text--keyboard-selected:hover {
1438
1278
  background-color: #1d5d90;
1439
1279
  }
1440
-
1441
- .react-datepicker__day--in-selecting-range ,
1442
- .react-datepicker__month-text--in-selecting-range ,
1443
- .react-datepicker__quarter-text--in-selecting-range ,
1444
- .react-datepicker__year-text--in-selecting-range {
1280
+ .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
1281
+ .react-datepicker__month-text--in-range,
1282
+ .react-datepicker__quarter-text--in-range,
1283
+ .react-datepicker__year-text--in-range),
1284
+ .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
1285
+ .react-datepicker__month-text--in-range,
1286
+ .react-datepicker__quarter-text--in-range,
1287
+ .react-datepicker__year-text--in-range),
1288
+ .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
1289
+ .react-datepicker__month-text--in-range,
1290
+ .react-datepicker__quarter-text--in-range,
1291
+ .react-datepicker__year-text--in-range),
1292
+ .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
1293
+ .react-datepicker__month-text--in-range,
1294
+ .react-datepicker__quarter-text--in-range,
1295
+ .react-datepicker__year-text--in-range) {
1445
1296
  background-color: rgba(33, 107, 165, 0.5);
1446
1297
  }
1447
-
1448
- .react-datepicker__month--selecting-range .react-datepicker__day--in-range , .react-datepicker__month--selecting-range
1449
- .react-datepicker__month-text--in-range , .react-datepicker__month--selecting-range
1450
- .react-datepicker__quarter-text--in-range , .react-datepicker__month--selecting-range
1451
- .react-datepicker__year-text--in-range {
1298
+ .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
1299
+ .react-datepicker__month-text--in-selecting-range,
1300
+ .react-datepicker__quarter-text--in-selecting-range,
1301
+ .react-datepicker__year-text--in-selecting-range),
1302
+ .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
1303
+ .react-datepicker__month-text--in-selecting-range,
1304
+ .react-datepicker__quarter-text--in-selecting-range,
1305
+ .react-datepicker__year-text--in-selecting-range),
1306
+ .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
1307
+ .react-datepicker__month-text--in-selecting-range,
1308
+ .react-datepicker__quarter-text--in-selecting-range,
1309
+ .react-datepicker__year-text--in-selecting-range),
1310
+ .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
1311
+ .react-datepicker__month-text--in-selecting-range,
1312
+ .react-datepicker__quarter-text--in-selecting-range,
1313
+ .react-datepicker__year-text--in-selecting-range) {
1452
1314
  background-color: #f0f0f0;
1453
1315
  color: #000;
1454
1316
  }
1455
-
1456
1317
  .react-datepicker__day--disabled,
1457
1318
  .react-datepicker__month-text--disabled,
1458
1319
  .react-datepicker__quarter-text--disabled,
@@ -1460,7 +1321,6 @@
1460
1321
  cursor: default;
1461
1322
  color: #ccc;
1462
1323
  }
1463
-
1464
1324
  .react-datepicker__day--disabled:hover,
1465
1325
  .react-datepicker__month-text--disabled:hover,
1466
1326
  .react-datepicker__quarter-text--disabled:hover,
@@ -1475,7 +1335,6 @@
1475
1335
  .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
1476
1336
  background-color: #216ba5;
1477
1337
  }
1478
-
1479
1338
  .react-datepicker__month-text:hover,
1480
1339
  .react-datepicker__quarter-text:hover {
1481
1340
  background-color: #f0f0f0;
@@ -1494,13 +1353,11 @@
1494
1353
  border-radius: 0.3rem;
1495
1354
  position: relative;
1496
1355
  }
1497
-
1498
1356
  .react-datepicker__year-read-view:hover,
1499
1357
  .react-datepicker__month-read-view:hover,
1500
1358
  .react-datepicker__month-year-read-view:hover {
1501
1359
  cursor: pointer;
1502
1360
  }
1503
-
1504
1361
  .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
1505
1362
  .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
1506
1363
  .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
@@ -1509,7 +1366,6 @@
1509
1366
  .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
1510
1367
  border-top-color: #b3b3b3;
1511
1368
  }
1512
-
1513
1369
  .react-datepicker__year-read-view--down-arrow,
1514
1370
  .react-datepicker__month-read-view--down-arrow,
1515
1371
  .react-datepicker__month-year-read-view--down-arrow {
@@ -1531,13 +1387,11 @@
1531
1387
  border-radius: 0.3rem;
1532
1388
  border: 1px solid #aeaeae;
1533
1389
  }
1534
-
1535
1390
  .react-datepicker__year-dropdown:hover,
1536
1391
  .react-datepicker__month-dropdown:hover,
1537
1392
  .react-datepicker__month-year-dropdown:hover {
1538
1393
  cursor: pointer;
1539
1394
  }
1540
-
1541
1395
  .react-datepicker__year-dropdown--scrollable,
1542
1396
  .react-datepicker__month-dropdown--scrollable,
1543
1397
  .react-datepicker__month-year-dropdown--scrollable {
@@ -1554,14 +1408,12 @@
1554
1408
  margin-left: auto;
1555
1409
  margin-right: auto;
1556
1410
  }
1557
-
1558
1411
  .react-datepicker__year-option:first-of-type,
1559
1412
  .react-datepicker__month-option:first-of-type,
1560
1413
  .react-datepicker__month-year-option:first-of-type {
1561
1414
  border-top-left-radius: 0.3rem;
1562
1415
  border-top-right-radius: 0.3rem;
1563
1416
  }
1564
-
1565
1417
  .react-datepicker__year-option:last-of-type,
1566
1418
  .react-datepicker__month-option:last-of-type,
1567
1419
  .react-datepicker__month-year-option:last-of-type {
@@ -1572,25 +1424,21 @@
1572
1424
  border-bottom-left-radius: 0.3rem;
1573
1425
  border-bottom-right-radius: 0.3rem;
1574
1426
  }
1575
-
1576
1427
  .react-datepicker__year-option:hover,
1577
1428
  .react-datepicker__month-option:hover,
1578
1429
  .react-datepicker__month-year-option:hover {
1579
1430
  background-color: #ccc;
1580
1431
  }
1581
-
1582
1432
  .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
1583
1433
  .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
1584
1434
  .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
1585
1435
  border-bottom-color: #b3b3b3;
1586
1436
  }
1587
-
1588
1437
  .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
1589
1438
  .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
1590
1439
  .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
1591
1440
  border-top-color: #b3b3b3;
1592
1441
  }
1593
-
1594
1442
  .react-datepicker__year-option--selected,
1595
1443
  .react-datepicker__month-option--selected,
1596
1444
  .react-datepicker__month-year-option--selected {
@@ -1611,7 +1459,6 @@
1611
1459
  display: table-cell;
1612
1460
  vertical-align: middle;
1613
1461
  }
1614
-
1615
1462
  .react-datepicker__close-icon::after {
1616
1463
  cursor: pointer;
1617
1464
  background-color: #216ba5;
@@ -1625,7 +1472,7 @@
1625
1472
  text-align: center;
1626
1473
  display: table-cell;
1627
1474
  vertical-align: middle;
1628
- content: "\00d7";
1475
+ content: "×";
1629
1476
  }
1630
1477
 
1631
1478
  .react-datepicker__today-button {
@@ -1651,65 +1498,62 @@
1651
1498
  z-index: 2147483647;
1652
1499
  }
1653
1500
 
1654
- @supports (-webkit-touch-callout: none) {
1655
-
1656
- .react-datepicker__portal {
1501
+ @supports (-webkit-touch-callout: none){
1502
+ .react-datepicker__portal{
1657
1503
  height: -webkit-fill-available;
1658
1504
  }
1659
1505
  }
1660
-
1661
1506
  .react-datepicker__portal .react-datepicker__day-name,
1662
1507
  .react-datepicker__portal .react-datepicker__day,
1663
1508
  .react-datepicker__portal .react-datepicker__time-name {
1664
1509
  width: 3rem;
1665
1510
  line-height: 3rem;
1666
1511
  }
1667
-
1668
1512
  @media (max-width: 400px), (max-height: 550px) {
1669
1513
  .react-datepicker__portal .react-datepicker__day-name,
1670
- .react-datepicker__portal .react-datepicker__day,
1671
- .react-datepicker__portal .react-datepicker__time-name {
1514
+ .react-datepicker__portal .react-datepicker__day,
1515
+ .react-datepicker__portal .react-datepicker__time-name {
1672
1516
  width: 2rem;
1673
1517
  line-height: 2rem;
1674
1518
  }
1675
1519
  }
1676
-
1677
1520
  .react-datepicker__portal .react-datepicker__current-month,
1678
1521
  .react-datepicker__portal .react-datepicker-time__header {
1679
1522
  font-size: 1.44rem;
1680
1523
  }
1681
1524
 
1682
1525
  .x-3deye-button-group {
1683
- display: flex;
1526
+ display: flex;
1527
+ padding: 4px;
1528
+ gap: 4px;
1684
1529
  }
1685
1530
 
1686
1531
  .x-3deye-button-group > .x-3deye-button {
1687
- flex: 1;
1688
- color: var(--secondary-text);
1689
- height: 35px;
1690
- background-color: var(--background);
1691
- font-size: 11px;
1532
+ flex: 1;
1533
+ color: var(--secondary-text);
1534
+ height: 35px;
1535
+ font-size: 11px;
1692
1536
  }
1693
1537
 
1694
1538
  .x-3deye-button-group > .x-3deye-button.button-selected {
1695
- color: var(--primary-text);
1696
- background: none;
1539
+ color: var(--primary-text);
1540
+ background-color: var(--background);
1697
1541
  }
1698
1542
 
1699
1543
  .x-3deye-button-group > .x-3deye-button + .x-3deye-button {
1700
- margin-left: 1px;
1544
+ margin-left: 1px;
1701
1545
  }
1702
1546
 
1703
1547
  .x-3deye-button-group > .x-3deye-button:hover {
1704
- color: var(--primary-text);
1548
+ color: var(--primary-text);
1705
1549
  }
1706
1550
 
1707
1551
  .x-3deye-button-group > .x-3deye-button.button-unselected {
1708
- color: var(--secondary-text);
1552
+ color: var(--secondary-text);
1709
1553
  }
1710
1554
 
1711
1555
  .x-3deye-button-group > .x-3deye-button.button-selected canvas {
1712
- color: var(--background);
1556
+ color: var(--background);
1713
1557
  }
1714
1558
 
1715
1559
  .x-3deye-popover {