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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,18 +3,28 @@
3
3
  background: none;
4
4
  border: none;
5
5
  position: relative;
6
- padding: 4px;
6
+ padding: 0 8px;
7
+ height: 32px;
7
8
  text-transform: uppercase;
8
9
  -webkit-user-select: none;
9
10
  -moz-user-select: none;
10
11
  -ms-user-select: none;
11
12
  user-select: none;
12
- font-family: 'Roboto', sans-serif;
13
- text-align: center;
14
- align-items: flex-start;
13
+ display: inline-flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ border-radius: 4px;
17
+ letter-spacing: .0107142857em;
18
+ font-weight: 500;
15
19
  }
16
20
 
17
- .x-3deye-button.fullwidth {
21
+ .x-3deye-button sup {
22
+ position: relative;
23
+ top: -0.5em;
24
+ left: 0.25em;
25
+ }
26
+
27
+ .x-3deye-button.x-3deye-button--fullwidth {
18
28
  width: 100%;
19
29
  }
20
30
 
@@ -25,6 +35,7 @@
25
35
 
26
36
  .x-3deye-button--icon {
27
37
  border-radius: 16px;
38
+ padding: 4px;
28
39
  width: 32px;
29
40
  height: 32px;
30
41
  display: inline-flex;
@@ -36,52 +47,49 @@
36
47
  opacity: 0.4;
37
48
  }
38
49
 
39
- .x-3deye-button.x-3deye-button--ok,
40
- .x-3deye-button.x-3deye-button--cancel {
41
- color: white;
42
- border-radius: 4px;
43
- text-transform: none;
44
- margin: 4px;
45
- min-width: 80px;
46
- }
47
-
48
- .x-3deye-button.x-3deye-button--ok.fullwidth,
49
- .x-3deye-button.x-3deye-button--cancel.fullwidth {
50
- width: calc(100% - 8px);
51
- }
52
-
53
50
  .x-3deye-button:not(:disabled) {
54
51
  cursor: pointer;
55
52
  }
56
53
 
57
- .x-3deye-button.x-3deye-button--ok {
58
- background-color: #27b9a1;
54
+ .x-3deye-button.x-3deye-button--filled,
55
+ .x-3deye-button.x-3deye-button--text {
56
+ min-width: 80px;
57
+ text-transform: capitalize;
58
+ font-family: 'Roboto', sans-serif;
59
+ font-size: 0.875rem;
60
+ font-weight: 500;
61
+ border-radius: 0.25rem;
62
+ padding: 0 1rem;
59
63
  }
60
64
 
61
- .x-3deye-button.x-3deye-button--ok:not(:disabled):hover {
65
+ .x-3deye-button.x-3deye-button--filled {
66
+ background-color: #27b9a1;
67
+ color: white;
68
+ }
69
+
70
+ .x-3deye-button.x-3deye-button--filled:not(:disabled):hover {
62
71
  background-color: #61beaf;
63
72
  }
64
73
 
65
- .x-3deye-button.x-3deye-button--ok:focus {
74
+ .x-3deye-button.x-3deye-button--filled:focus {
66
75
  transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
67
76
  box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
68
77
  }
69
78
 
70
- .x-3deye-button.x-3deye-button--cancel {
71
- background-color: rgb(119, 87, 178);
72
- }
73
-
74
- .x-3deye-button.x-3deye-button--cancel:not(:disabled):hover {
75
- background-color: rgb(142, 122, 180);
79
+ .x-3deye-button canvas {
80
+ color: rgb(var(--surface-highlight-rgb));
76
81
  }
77
82
 
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);
83
+ .x-3deye-button--overlay {
84
+ pointer-events: auto;
85
+ background: rgba(0, 0, 0, 0.5);
86
+ border: 2px solid rgba(255, 255, 255, 0.25);
87
+ color: white;
81
88
  }
82
89
 
83
- .x-3deye-button canvas {
84
- color: rgb(var(--surface-highlight-rgb));
90
+ .x-3deye-button.x-3deye-button--overlay:focus, .x-3deye-button.x-3deye-button--overlay:not(:disabled):hover {
91
+ background: rgba(0, 0, 0, 0.5);
92
+ border: 2px solid rgba(255, 255, 255, 0.5);
85
93
  }
86
94
 
87
95
  :root {
@@ -102,316 +110,185 @@
102
110
  }
103
111
 
104
112
  .color-selector {
105
- display: flex;
106
- z-index: 1;
107
- padding: 5px 8px;
108
- justify-content: space-between;
109
- align-items: center;
113
+ display: flex;
114
+ z-index: 1;
115
+ padding: 5px 0 5px 8px;
116
+ justify-content: space-between;
117
+ align-items: center;
110
118
  }
111
119
 
112
120
  .color-selector__items {
113
- display: flex;
121
+ display: flex;
122
+ align-items: center;
114
123
  }
115
124
 
116
125
  .color-selector__item {
117
- border: none;
118
- width: 20px;
119
- height: 20px;
120
- border-radius: 20px;
121
- margin: 4px;
122
- padding: 0;
123
- box-shadow: 0 0 0 1.5px white;
124
- transition: box-shadow 0.2s ease-in;
126
+ border: none;
127
+ width: 20px;
128
+ height: 20px;
129
+ border-radius: 20px;
130
+ margin: 4px;
131
+ padding: 0;
132
+ box-shadow: 0 0 0 1.5px currentColor;
133
+ transition: box-shadow 0.2s ease-in;
134
+ color: currentColor;
125
135
  }
126
136
 
127
- .color-selector__item:focus {
128
- box-shadow: 0 0 0 1.5px white, 0 0 0 5px rgba(255, 255, 255, 0.2);
137
+ .color-selector__item:focus {
138
+ box-shadow: 0 0 0 1.5px currentColor, 0 0 0 5px rgba(var(--surface-highlight-rgb), 0.2);
129
139
  }
130
140
 
131
141
  .color-selector__item:focus:active {
132
- box-shadow: 0 0 0 1.5px white;
142
+ box-shadow: 0 0 0 1.5px currentColor;
133
143
  }
134
144
 
135
145
  .color-selector__item .icon {
136
- opacity: 0;
137
- transition: opacity 0.2s ease-in;
146
+ opacity: 0;
147
+ transition: opacity 0.2s ease-in;
138
148
  }
139
149
 
140
150
  .color-selector__item.selected .icon {
141
- opacity: 1;
142
- }
143
-
144
- /**
145
- * @license
146
- * Copyright Google LLC All Rights Reserved.
147
- *
148
- * Use of this source code is governed by an MIT-style license that can be
149
- * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
150
- */
151
- @-webkit-keyframes mdc-slider-emphasize {
152
- 0% {
153
- -webkit-animation-timing-function: ease-out;
154
- animation-timing-function: ease-out;
155
- }
156
- 50% {
157
- -webkit-animation-timing-function: ease-in;
158
- animation-timing-function: ease-in;
159
- transform: scale(0.85);
160
- }
161
- 100% {
162
- transform: scale(0.571);
163
- }
164
- }
165
- @keyframes mdc-slider-emphasize {
166
- 0% {
167
- -webkit-animation-timing-function: ease-out;
168
- animation-timing-function: ease-out;
169
- }
170
- 50% {
171
- -webkit-animation-timing-function: ease-in;
172
- animation-timing-function: ease-in;
173
- transform: scale(0.85);
174
- }
175
- 100% {
176
- transform: scale(0.571);
177
- }
178
- }
179
- .mdc-slider {
180
- position: relative;
181
- width: 100%;
182
- height: 48px;
183
- cursor: pointer;
184
- touch-action: pan-x;
185
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
186
- }
187
- .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track {
188
- background-color: #018786;
189
- /* @alternate */
190
- background-color: var(--mdc-theme-secondary, #018786);
191
- }
192
- .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track-container::after {
193
- background-color: #018786;
194
- /* @alternate */
195
- background-color: var(--mdc-theme-secondary, #018786);
196
- opacity: 0.26;
197
- }
198
- .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track-marker-container {
199
- background-color: #018786;
200
- /* @alternate */
201
- background-color: var(--mdc-theme-secondary, #018786);
202
- }
203
- .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb {
204
- fill: #018786;
205
- /* @alternate */
206
- fill: var(--mdc-theme-secondary, #018786);
207
- stroke: #018786;
208
- /* @alternate */
209
- stroke: var(--mdc-theme-secondary, #018786);
210
- }
211
- .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__focus-ring {
212
- background-color: #018786;
213
- /* @alternate */
214
- background-color: var(--mdc-theme-secondary, #018786);
215
- }
216
- .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
217
- background-color: #018786;
218
- /* @alternate */
219
- background-color: var(--mdc-theme-secondary, #018786);
220
- }
221
- .mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
222
- color: white;
223
- /* @alternate */
224
- color: var(--mdc-theme-text-primary-on-dark, white);
225
- }
226
- .mdc-slider--disabled {
227
- cursor: auto;
228
- }
229
- .mdc-slider--disabled .mdc-slider__track {
230
- background-color: #9a9a9a;
231
- }
232
- .mdc-slider--disabled .mdc-slider__track-container::after {
233
- background-color: #9a9a9a;
234
- opacity: 0.26;
235
- }
236
- .mdc-slider--disabled .mdc-slider__track-marker-container {
237
- background-color: #9a9a9a;
238
- }
239
- .mdc-slider--disabled .mdc-slider__thumb {
240
- fill: #9a9a9a;
241
- stroke: #9a9a9a;
242
- }
243
- .mdc-slider--disabled .mdc-slider__thumb {
244
- /* @alternate */
245
- stroke: white;
246
- stroke: var(--mdc-slider-bg-color-behind-component, white);
247
- }
248
- .mdc-slider:focus {
249
- outline: none;
250
- }
251
- .mdc-slider__track-container {
252
- position: absolute;
253
- top: 50%;
254
- width: 100%;
255
- height: 2px;
256
- overflow: hidden;
257
- }
258
- .mdc-slider__track-container::after {
259
- position: absolute;
260
- top: 0;
261
- left: 0;
262
- display: block;
263
- width: 100%;
264
- height: 100%;
265
- content: "";
151
+ opacity: 1;
266
152
  }
267
- .mdc-slider__track {
268
- position: absolute;
269
- width: 100%;
270
- height: 100%;
271
- transform-origin: left top;
272
- will-change: transform;
153
+
154
+ .color-selector__clear {
155
+ border-radius: 50%;
156
+ padding: 6px;
273
157
  }
274
- .mdc-slider[dir=rtl] .mdc-slider__track, [dir=rtl] .mdc-slider .mdc-slider__track {
275
- transform-origin: right top;
158
+
159
+ .x-3deye-slider {
160
+ position: relative;
161
+ display: flex;
162
+ align-items: center;
276
163
  }
277
164
 
278
- .mdc-slider__track-marker-container {
279
- display: flex;
280
- margin-right: 0;
281
- margin-left: -1px;
282
- visibility: hidden;
165
+ .x-3deye-slider:focus-visible {
166
+ outline: none;
283
167
  }
284
- .mdc-slider[dir=rtl] .mdc-slider__track-marker-container, [dir=rtl] .mdc-slider .mdc-slider__track-marker-container {
285
- margin-right: -1px;
286
- margin-left: 0;
168
+
169
+ .x-3deye-slider.horizontal {
170
+ width: 100%;
171
+ height: 20px;
287
172
  }
288
173
 
289
- .mdc-slider__track-marker-container::after {
290
- display: block;
291
- width: 2px;
292
- height: 2px;
293
- content: "";
174
+ .x-3deye-slider.vertical {
175
+ width: 20px;
176
+ height: 100%;
177
+ flex-direction: column;
294
178
  }
295
- .mdc-slider__track-marker {
296
- flex: 1;
179
+
180
+ .x-3deye-slider__track {
181
+ background: var(--surface-inverse, gainsboro);
182
+ position: relative;
183
+ flex: 1;
297
184
  }
298
- .mdc-slider__track-marker::after {
299
- display: block;
300
- width: 2px;
301
- height: 2px;
302
- content: "";
185
+
186
+ .x-3deye-slider__bar {
187
+ background-color: var(--primary-color, #0067ac);
188
+ position: absolute;
303
189
  }
304
- .mdc-slider__track-marker:first-child::after {
305
- width: 3px;
190
+
191
+ .x-3deye-slider.disabled .x-3deye-slider__bar {
192
+ background-color: rgb(165, 165, 165);
306
193
  }
307
- .mdc-slider__thumb-container {
308
- position: absolute;
309
- top: 15px;
310
- left: 0;
311
- width: 21px;
312
- height: 100%;
313
- -webkit-user-select: none;
314
- -moz-user-select: none;
315
- -ms-user-select: none;
316
- user-select: none;
317
- will-change: transform;
194
+
195
+ .x-3deye-slider.horizontal .x-3deye-slider__bar {
196
+ top: 0;
197
+ bottom: 0;
198
+ left: 0;
318
199
  }
319
- .mdc-slider__thumb {
320
- position: absolute;
321
- top: 0;
322
- left: 0;
323
- transform: scale(0.571);
324
- stroke-width: 3.5;
325
- transition: transform 100ms ease-out, fill 100ms ease-out, stroke 100ms ease-out;
200
+
201
+ .x-3deye-slider.vertical .x-3deye-slider__bar {
202
+ bottom: 0;
203
+ left: 0;
204
+ right: 0;
326
205
  }
327
- .mdc-slider__focus-ring {
328
- width: 21px;
329
- height: 21px;
330
- border-radius: 50%;
331
- opacity: 0;
332
- transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out;
206
+
207
+ .x-3deye-slider.horizontal .x-3deye-slider__track {
208
+ height: 3px;
333
209
  }
334
- .mdc-slider__pin {
335
- display: flex;
336
- position: absolute;
337
- top: 0;
338
- left: 0;
339
- align-items: center;
340
- justify-content: center;
341
- width: 26px;
342
- height: 26px;
343
- margin-top: -2px;
344
- margin-left: -2px;
345
- transform: rotate(-45deg) scale(0) translate(0, 0);
346
- border-radius: 50% 50% 50% 0%;
347
- z-index: 1;
348
- transition: transform 100ms ease-out;
349
- }
350
- .mdc-slider__pin-value-marker {
351
- -moz-osx-font-smoothing: grayscale;
352
- -webkit-font-smoothing: antialiased;
353
- font-family: Roboto, sans-serif;
354
- /* @alternate */
355
- font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
356
- font-size: 0.875rem;
357
- /* @alternate */
358
- font-size: var(--mdc-typography-body2-font-size, 0.875rem);
359
- line-height: 1.25rem;
360
- /* @alternate */
361
- line-height: var(--mdc-typography-body2-line-height, 1.25rem);
362
- font-weight: 400;
363
- /* @alternate */
364
- font-weight: var(--mdc-typography-body2-font-weight, 400);
365
- letter-spacing: 0.0178571429em;
366
- /* @alternate */
367
- letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
368
- text-decoration: inherit;
369
- /* @alternate */
370
- -webkit-text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
371
- text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
372
- text-transform: inherit;
373
- /* @alternate */
374
- text-transform: var(--mdc-typography-body2-text-transform, inherit);
375
- transform: rotate(45deg);
210
+
211
+ .x-3deye-slider.vertical .x-3deye-slider__track {
212
+ width: 3px;
376
213
  }
377
214
 
378
- .mdc-slider--active .mdc-slider__thumb {
379
- transform: scale3d(1, 1, 1);
215
+ .x-3deye-slider__thumb {
216
+ will-change: transform box-shadow;
217
+ background: white;
218
+ box-shadow: 0 0 0 6px rgba(0, 100, 255, 0), 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
219
+ width: 20px;
220
+ height: 20px;
221
+ border-radius: 50%;
222
+ transition: box-shadow 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
380
223
  }
381
224
 
382
- .mdc-slider--focus .mdc-slider__thumb {
383
- -webkit-animation: mdc-slider-emphasize 266.67ms linear;
384
- animation: mdc-slider-emphasize 266.67ms linear;
225
+ .x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover,
226
+ .x-3deye-slider:focus .x-3deye-slider__thumb {
227
+ box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
228
+ 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
385
229
  }
386
- .mdc-slider--focus .mdc-slider__focus-ring {
387
- transform: scale3d(1.55, 1.55, 1.55);
388
- opacity: 0.25;
230
+
231
+ .x-3deye-slider:focus .x-3deye-slider__thumb.active {
232
+ box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
233
+ 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
389
234
  }
390
235
 
391
- .mdc-slider--in-transit .mdc-slider__thumb {
392
- transition-delay: 140ms;
236
+ .x-3deye-slider.horizontal .x-3deye-slider__thumb {
237
+ margin-left: -10px;
393
238
  }
394
239
 
395
- .mdc-slider--in-transit .mdc-slider__thumb-container,
396
- .mdc-slider--in-transit .mdc-slider__track,
397
- .mdc-slider:focus:not(.mdc-slider--active) .mdc-slider__thumb-container,
398
- .mdc-slider:focus:not(.mdc-slider--active) .mdc-slider__track {
399
- transition: transform 80ms ease;
240
+ .x-3deye-slider.vertical .x-3deye-slider__thumb {
241
+ margin-bottom: -10px;
400
242
  }
401
243
 
402
- .mdc-slider--discrete.mdc-slider--active .mdc-slider__thumb {
403
- transform: scale(calc(12 / 21));
244
+ .x-3deye-slider__label {
245
+ pointer-events: none;
246
+ touch-action: none;
247
+ will-change: transform;
248
+ transform: translate(-50%, -100%) scale(0);
249
+ background: var(--primary-color, #0067ac);
250
+ bottom: 50%;
251
+ left: 50%;
252
+ color: var(--on-primary-color, white);
253
+ font-size: 0.75rem;
254
+ border-radius: 4px;
255
+ width: -webkit-fit-content;
256
+ width: -moz-fit-content;
257
+ width: fit-content;
258
+ min-width: 24px;
259
+ padding: 4px 8px;
260
+ position: relative;
261
+ transition: transform 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
262
+ transform-origin: center bottom;
404
263
  }
405
- .mdc-slider--discrete.mdc-slider--active .mdc-slider__pin {
406
- transform: rotate(-45deg) scale(1) translate(19px, -20px);
264
+
265
+ .x-3deye-slider__label.open,
266
+ .x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover .x-3deye-slider__label,
267
+ .x-3deye-slider:focus .x-3deye-slider__label {
268
+ transform: translate(-50%, -100%) scale(1);
407
269
  }
408
- .mdc-slider--discrete.mdc-slider--focus .mdc-slider__thumb {
409
- -webkit-animation: none;
410
- animation: none;
270
+
271
+ .x-3deye-slider__label::before {
272
+ content: '';
273
+ display: block;
274
+ position: absolute;
275
+ top: 100%;
276
+ left: calc(50% - 5px);
277
+ width: 0;
278
+ height: 0;
279
+ border-left: 5px solid transparent;
280
+ border-right: 5px solid transparent;
281
+ border-top: 5px solid var(--primary-color, #0067ac);
411
282
  }
412
- .mdc-slider--discrete.mdc-slider--display-markers .mdc-slider__track-marker-container {
413
- visibility: visible;
283
+
284
+ .preloader-container {
285
+ color: var(--on-container);
286
+ flex: 1;
287
+ display: flex;
288
+ justify-content: center;
289
+ align-items: center;
414
290
  }
291
+
415
292
  .event-list-item {
416
293
  -webkit-user-select: none;
417
294
  -moz-user-select: none;
@@ -419,13 +296,14 @@
419
296
  user-select: none;
420
297
  position: absolute;
421
298
  font-size: 12px;
422
- color: rgba(255, 255, 255, 0.8);
299
+ color: rgba(255, 255, 255, 0.75);
423
300
  background-color: rgba(255, 255, 255, 0.1);
424
301
  top: 0;
425
- bottom: 2px;
302
+ bottom: 0;
426
303
  left: 0;
427
304
  right: 0;
428
- overflow: hidden;
305
+ overflow: hidden;
306
+ --license-plate-color: rgb(0, 229, 255);
429
307
  }
430
308
 
431
309
  .event-list-item.mdc-ripple-surface {
@@ -440,9 +318,9 @@
440
318
  .event-list-item .acknowledged-overlay {
441
319
  position: absolute;
442
320
  top: 0;
443
- left: 0;
444
- bottom: 0;
445
- right: 0;
321
+ left: 0;
322
+ bottom: 0;
323
+ right: 0;
446
324
  pointer-events: none;
447
325
  display: grid;
448
326
  place-items: center;
@@ -478,31 +356,31 @@
478
356
  right: 0;
479
357
  z-index: 1;
480
358
  pointer-events: none;
481
- display: flex;
482
- flex-direction: column;
483
- justify-content: flex-end;
359
+ display: flex;
360
+ flex-direction: column;
361
+ justify-content: flex-end;
484
362
  }
485
363
 
486
364
  .event-list-item:hover .event-list-item__time {
487
- text-decoration: underline;
365
+ color: white;
488
366
  }
489
367
 
490
368
  .event-list-item__time {
491
- text-shadow: 0 1px 2px black;
492
- font-size: 12px;
493
- /* order: 2;
494
- line-height: 20px; */
369
+ text-shadow: 0 1px 2px black;
370
+ font-size: 14px;
371
+ order: 1;
372
+ font-weight: bold;
495
373
  }
496
374
 
497
375
  .event-list-item__camera-name {
498
376
  white-space: nowrap;
499
377
  overflow: hidden;
500
378
  text-overflow: ellipsis;
501
- font-weight: bold;
502
- font-size: 16px;
503
- line-height: 24px;
504
- font-family: 'Roboto', sans-serif;
505
- /* text-shadow: 0 1px 2px black;
379
+ font-weight: bold;
380
+ font-size: 13px;
381
+ line-height: 24px;
382
+ font-family: 'Roboto', sans-serif;
383
+ /* text-shadow: 0 1px 2px black;
506
384
  line-height: 20px; */
507
385
  }
508
386
 
@@ -516,40 +394,174 @@
516
394
  opacity: 0.9;
517
395
  }
518
396
 
519
- .event-list-item-face {
397
+ .event-list-item__temperature {
398
+ font-size: 14px;
399
+ font-weight: bold;
400
+ padding: 0 4px;
401
+ position: absolute;
402
+ right: 2px;
403
+ bottom: 4px;
404
+ display: flex;
405
+ align-items: center;
406
+ text-shadow: 0 1px 2px black;
407
+ }
408
+
409
+ .event-list-item .frame {
410
+ --frame-color-hsl: 186 100% 50%;
411
+ position: absolute;
412
+ top: 0;
413
+ left: 0;
414
+ right: 0;
415
+ border: 1px solid hsl(var(--frame-color-hsl) / 0.2);
416
+ }
417
+
418
+ .event-list-item .preview {
520
419
  opacity: 0;
521
420
  position: absolute;
522
421
  pointer-events: none;
523
422
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.75);
423
+ transition: opacity 0s linear 0.2s;
524
424
  }
525
425
 
526
- .event-list-item-face-trigger:hover + .event-list-item-face {
426
+ .event-list-item .trigger:hover ~ .preview {
527
427
  opacity: 1;
528
428
  }
529
429
 
530
- /**
531
- * Corners
532
- */
430
+ .event-list-item__license-plate-trigger {
431
+ outline: 2px solid var(--license-plate-color);
432
+ }
533
433
 
534
- .event-list-item-face .frame {
434
+ .event-list-item__license-plate .plate-number {
435
+ font-family: 'Roboto Mono', monospace;
436
+ color: white;
437
+ }
438
+
439
+ .event-list-item__license-plate .plate-number .digit {
440
+ color: var(--license-plate-color);
441
+ }
442
+
443
+ .event-list-item__license-plate .plate-number .digit:first-of-type {
444
+ margin-left: 2px;
445
+ }
446
+
447
+ .event-list-item__license-plate-caption {
535
448
  position: absolute;
536
- top: 0;
449
+ left: 0;
450
+ right: 0;
451
+ bottom: 0;
452
+ height: 60px;
453
+ display: flex;
454
+ align-items: center;
455
+ justify-content: space-between;
456
+ gap: 10px;
457
+ background-color: black;
458
+ z-index: 1;
459
+ padding-left: 10px;
460
+ }
461
+
462
+ .event-list-item__license-plate-caption .plate-number {
463
+ font-family: 'Roboto Mono', monospace;
464
+ font-size: 16px;
465
+ color: white;
466
+ border: 2px solid rgba(255, 255, 255, 0.5);
467
+ padding: 0 8px;
468
+ border-radius: 4px;
469
+ letter-spacing: 1px;
470
+ }
471
+
472
+ .event-list-item__license-plate-caption .plate-number .digit {
473
+ color: var(--license-plate-color);
474
+ }
475
+
476
+ .event-list-item__license-plate-caption .plate-number .digit:first-of-type {
477
+ margin-left: 4px;
478
+ }
479
+
480
+ .event-list-item__detected-object-label {
481
+ display: flex;
482
+ flex-direction: column;
483
+ background-color: rgba(0, 0, 0, 0.5);
484
+ position: absolute;
485
+ font-size: 13px;
486
+ font-family: 'Roboto Mono', monospace;
487
+ white-space: nowrap;
488
+ color: white;
489
+ font-weight: bold;
490
+ min-width: 64px;
491
+ }
492
+
493
+ .event-list-item__detected-object-label__caption {
494
+ padding-left: 4px;
495
+ font-size: 9px;
496
+ line-height: 14px;
497
+ opacity: 0.75;
498
+ color: black;
499
+ }
500
+
501
+ .event-list-item__license-plate-label {
502
+ display: flex;
503
+ flex-direction: column;
504
+ background-color: rgba(0, 0, 0, 0.5);
505
+ position: absolute;
506
+ font-size: 14px;
507
+ font-family: 'Roboto Mono', monospace;
508
+ white-space: nowrap;
509
+ color: white;
510
+ }
511
+
512
+ .event-list-item__license-plate-label .digit {
513
+ color: var(--license-plate-color);
514
+ }
515
+
516
+ .event-list-item__license-plate-label .digit:first-of-type {
517
+ margin-left: 2px;
518
+ }
519
+
520
+ .event-list-item__license-plate-label__caption {
521
+ padding-left: 4px;
522
+ background-color: var(--license-plate-color);
523
+ color: black;
524
+ opacity: 0.75;
525
+ font-size: 10px;
526
+ }
527
+
528
+ .event-list-item__license-plate .plate-number {
529
+ position: absolute;
530
+ background: black;
531
+ padding-left: 2px;
532
+ padding-right: 2px;
537
533
  bottom: 0;
538
534
  left: 0;
539
535
  right: 0;
540
- border: 1px solid rgba(255, 165, 0, 0.2);
536
+ height: 16px;
541
537
  }
542
538
 
543
- .event-list-item-face .corner-highlight-tl {
539
+
540
+ .event-list-item__license-plate .frame {
541
+ --frame-color-hsl: 186 100% 50%;
542
+ }
543
+
544
+ .event-list-item-face .frame {
545
+ --frame-color-hsl: 42 100% 50%;
546
+ bottom: 0;
547
+ }
548
+
549
+ .event-list-item .menu-button {
550
+ position: absolute;
551
+ top: 0;
552
+ right: 0;
553
+ }
554
+
555
+ .frame .corner-highlight-tl {
544
556
  position: absolute;
545
557
  top: -1px;
546
558
  left: -1px;
547
559
  width: 10px;
548
560
  height: 2px;
549
- background-color: orange;
561
+ background-color: hsl(var(--frame-color-hsl));
550
562
  }
551
563
 
552
- .event-list-item-face .corner-highlight-tl::before {
564
+ .frame .corner-highlight-tl::before {
553
565
  content: '';
554
566
  display: block;
555
567
  position: absolute;
@@ -557,19 +569,19 @@
557
569
  left: 0;
558
570
  height: 10px;
559
571
  width: 2px;
560
- background-color: orange;
572
+ background-color: hsl(var(--frame-color-hsl));
561
573
  }
562
574
 
563
- .event-list-item-face .corner-highlight-tr {
575
+ .frame .corner-highlight-tr {
564
576
  position: absolute;
565
577
  top: -1px;
566
578
  right: -1px;
567
579
  width: 10px;
568
580
  height: 2px;
569
- background-color: orange;
581
+ background-color: hsl(var(--frame-color-hsl));
570
582
  }
571
583
 
572
- .event-list-item-face .corner-highlight-tr::before {
584
+ .frame .corner-highlight-tr::before {
573
585
  content: '';
574
586
  display: block;
575
587
  position: absolute;
@@ -577,19 +589,19 @@
577
589
  right: 0;
578
590
  height: 10px;
579
591
  width: 2px;
580
- background-color: orange;
592
+ background-color: hsl(var(--frame-color-hsl));
581
593
  }
582
594
 
583
- .event-list-item-face .corner-highlight-br {
595
+ .frame .corner-highlight-br {
584
596
  position: absolute;
585
597
  bottom: -1px;
586
598
  right: -1px;
587
599
  width: 10px;
588
600
  height: 2px;
589
- background-color: orange;
601
+ background-color: hsl(var(--frame-color-hsl));
590
602
  }
591
603
 
592
- .event-list-item-face .corner-highlight-br::before {
604
+ .frame .corner-highlight-br::before {
593
605
  content: '';
594
606
  display: block;
595
607
  position: absolute;
@@ -597,19 +609,19 @@
597
609
  right: 0;
598
610
  height: 10px;
599
611
  width: 2px;
600
- background-color: orange;
612
+ background-color: hsl(var(--frame-color-hsl));
601
613
  }
602
614
 
603
- .event-list-item-face .corner-highlight-bl {
615
+ .frame .corner-highlight-bl {
604
616
  position: absolute;
605
617
  bottom: -1px;
606
618
  left: -1px;
607
619
  width: 10px;
608
620
  height: 2px;
609
- background-color: orange;
621
+ background-color: hsl(var(--frame-color-hsl));
610
622
  }
611
623
 
612
- .event-list-item-face .corner-highlight-bl::before {
624
+ .frame .corner-highlight-bl::before {
613
625
  content: '';
614
626
  display: block;
615
627
  position: absolute;
@@ -617,125 +629,13 @@
617
629
  left: 0;
618
630
  height: 10px;
619
631
  width: 2px;
620
- background-color: orange;
621
- }
622
-
623
- .event-list-item .menu-button {
624
- position: absolute;
625
- top: 0;
626
- right: 0;
627
- }
628
-
629
- @-webkit-keyframes slide-in {
630
- 0% {
631
- opacity: 0;
632
- transform: scale(0.9);
633
- }
634
- 100% {
635
- opacity: 1;
636
- transform: scale(1);
637
- }
638
- }
639
-
640
- @keyframes slide-in {
641
- 0% {
642
- opacity: 0;
643
- transform: scale(0.9);
644
- }
645
- 100% {
646
- opacity: 1;
647
- transform: scale(1);
648
- }
632
+ background-color: hsl(var(--frame-color-hsl));
649
633
  }
650
634
 
651
- .menu-items-container {
652
- transform-origin: right top;
653
- position: absolute;
654
- z-index: 10000001;
655
- background: rgba(0, 0, 0, 0.9);
656
- 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);
657
- border-radius: 4px;
658
- padding: 4px;
659
- -webkit-animation: slide-in 0.15s ease-in;
660
- animation: slide-in 0.15s ease-in;
661
- }
662
-
663
- @media (prefers-reduced-motion) {
664
- .menu-items-container {
665
- -webkit-animation: none;
666
- animation: none;
667
- }
668
- }
669
-
670
- .menu-items-container[data-placement='top-start'] {
671
- transform-origin: left bottom;
672
- }
673
-
674
- .menu-items-container[data-placement='top-end'] {
675
- transform-origin: right bottom;
676
- }
677
-
678
- .menu-items-container[data-placement='bottom-start'] {
679
- transform-origin: left top;
680
- }
681
-
682
- .menu-items-container[data-placement='bottom-end'] {
683
- transform-origin: right top;
684
- }
685
-
686
- .menu-items-container[data-placement='top'] {
687
- transform-origin: center bottom;
688
- }
689
-
690
- .menu-items-container .x-3deye-button {
691
- text-transform: none;
692
- }
693
-
694
- .menu-items-container button {
695
- font-size: 14px;
696
- background: none;
697
- border: none;
698
- text-align: left;
699
- color: white;
700
- padding: 8px 16px;
701
- display: block;
702
- width: 100%;
703
- border-radius: 4px;
704
- letter-spacing: 0.5px;
705
- }
706
-
707
- .menu-items-container .x-3deye-button.menu-item:hover,
708
- .menu-items-container .x-3deye-button.menu-item:focus {
709
- background-color: rgba(255, 255, 255, 0.22);
710
- }
711
-
712
- .menu-items-container .menu-item--danger {
713
- color: #f44336;
714
- }
715
-
716
- .themed-menu.menu-items-container {
717
- background-color: var(--background);
718
- }
719
-
720
- .themed-menu.menu-items-container .x-3deye-button.menu-item {
721
- color: var(--primary-text);
722
- }
723
-
724
- .themed-menu.menu-items-container .x-3deye-button.menu-item:hover {
725
- background-color: rgba(var(--surface-highlight-rgb), var(--surface-highlight-opacity));
726
- }
727
-
728
- .preloader-container {
729
- color: var(--primary-text);
730
- flex: 1;
731
- display: flex;
732
- justify-content: center;
733
- align-items: center;
734
- }
735
-
736
- .react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
635
+ @charset "UTF-8";
636
+ .react-datepicker__year-read-view--down-arrow,
737
637
  .react-datepicker__month-read-view--down-arrow,
738
- .react-datepicker__month-year-read-view--down-arrow {
638
+ .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
739
639
  border-color: #ccc;
740
640
  border-style: solid;
741
641
  border-width: 3px 3px 0 0;
@@ -746,14 +646,12 @@
746
646
  top: 6px;
747
647
  width: 9px;
748
648
  }
749
-
750
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
649
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
751
650
  margin-left: -4px;
752
651
  position: absolute;
753
652
  width: 0;
754
653
  }
755
-
756
- .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 {
654
+ .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 {
757
655
  box-sizing: content-box;
758
656
  position: absolute;
759
657
  border: 8px solid transparent;
@@ -764,45 +662,38 @@
764
662
  border-width: 8px;
765
663
  left: -8px;
766
664
  }
767
-
768
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before {
665
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
769
666
  border-bottom-color: #aeaeae;
770
667
  }
771
668
 
772
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
669
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
773
670
  top: 0;
774
671
  margin-top: -8px;
775
672
  }
776
-
777
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
673
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
778
674
  border-top: none;
779
675
  border-bottom-color: #f0f0f0;
780
676
  }
781
-
782
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
677
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
783
678
  top: 0;
784
679
  }
785
-
786
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
680
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
787
681
  top: -1px;
788
682
  border-bottom-color: #aeaeae;
789
683
  }
790
684
 
791
- .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
685
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
792
686
  bottom: 0;
793
687
  margin-bottom: -8px;
794
688
  }
795
-
796
- .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
689
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
797
690
  border-bottom: none;
798
691
  border-top-color: #fff;
799
692
  }
800
-
801
- .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
693
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
802
694
  bottom: 0;
803
695
  }
804
-
805
- .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before {
696
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
806
697
  bottom: -1px;
807
698
  border-top-color: #aeaeae;
808
699
  }
@@ -811,6 +702,7 @@
811
702
  display: inline-block;
812
703
  padding: 0;
813
704
  border: 0;
705
+ width: 100%;
814
706
  }
815
707
 
816
708
  .react-datepicker {
@@ -827,11 +719,9 @@
827
719
  .react-datepicker--time-only .react-datepicker__triangle {
828
720
  left: 35px;
829
721
  }
830
-
831
722
  .react-datepicker--time-only .react-datepicker__time-container {
832
723
  border-left: 0;
833
724
  }
834
-
835
725
  .react-datepicker--time-only .react-datepicker__time,
836
726
  .react-datepicker--time-only .react-datepicker__time-box {
837
727
  border-bottom-left-radius: 0.3rem;
@@ -846,34 +736,27 @@
846
736
  .react-datepicker-popper {
847
737
  z-index: 1;
848
738
  }
849
-
850
- .react-datepicker-popper[data-placement^="bottom"] {
739
+ .react-datepicker-popper[data-placement^=bottom] {
851
740
  padding-top: 10px;
852
741
  }
853
-
854
- .react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle, .react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
742
+ .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
855
743
  left: auto;
856
744
  right: 50px;
857
745
  }
858
-
859
- .react-datepicker-popper[data-placement^="top"] {
746
+ .react-datepicker-popper[data-placement^=top] {
860
747
  padding-bottom: 10px;
861
748
  }
862
-
863
- .react-datepicker-popper[data-placement^="right"] {
749
+ .react-datepicker-popper[data-placement^=right] {
864
750
  padding-left: 8px;
865
751
  }
866
-
867
- .react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
752
+ .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
868
753
  left: auto;
869
754
  right: 42px;
870
755
  }
871
-
872
- .react-datepicker-popper[data-placement^="left"] {
756
+ .react-datepicker-popper[data-placement^=left] {
873
757
  padding-right: 8px;
874
758
  }
875
-
876
- .react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
759
+ .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
877
760
  left: 42px;
878
761
  right: auto;
879
762
  }
@@ -886,17 +769,14 @@
886
769
  padding: 8px 0;
887
770
  position: relative;
888
771
  }
889
-
890
772
  .react-datepicker__header--time {
891
773
  padding-bottom: 8px;
892
774
  padding-left: 5px;
893
775
  padding-right: 5px;
894
776
  }
895
-
896
777
  .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
897
778
  border-top-left-radius: 0;
898
779
  }
899
-
900
780
  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
901
781
  border-top-right-radius: 0.3rem;
902
782
  }
@@ -943,19 +823,15 @@
943
823
  text-indent: -999em;
944
824
  overflow: hidden;
945
825
  }
946
-
947
826
  .react-datepicker__navigation--previous {
948
827
  left: 2px;
949
828
  }
950
-
951
829
  .react-datepicker__navigation--next {
952
830
  right: 2px;
953
831
  }
954
-
955
832
  .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
956
833
  right: 85px;
957
834
  }
958
-
959
835
  .react-datepicker__navigation--years {
960
836
  position: relative;
961
837
  top: 0;
@@ -963,15 +839,12 @@
963
839
  margin-left: auto;
964
840
  margin-right: auto;
965
841
  }
966
-
967
842
  .react-datepicker__navigation--years-previous {
968
843
  top: 4px;
969
844
  }
970
-
971
845
  .react-datepicker__navigation--years-upcoming {
972
846
  top: -4px;
973
847
  }
974
-
975
848
  .react-datepicker__navigation:hover *::before {
976
849
  border-color: #a6a6a6;
977
850
  }
@@ -980,21 +853,18 @@
980
853
  position: relative;
981
854
  top: -1px;
982
855
  font-size: 20px;
856
+ width: 0;
983
857
  }
984
-
985
858
  .react-datepicker__navigation-icon--next {
986
859
  left: -2px;
987
860
  }
988
-
989
861
  .react-datepicker__navigation-icon--next::before {
990
862
  transform: rotate(45deg);
991
863
  left: -7px;
992
864
  }
993
-
994
865
  .react-datepicker__navigation-icon--previous {
995
866
  right: -2px;
996
867
  }
997
-
998
868
  .react-datepicker__navigation-icon--previous::before {
999
869
  transform: rotate(225deg);
1000
870
  right: -7px;
@@ -1008,13 +878,11 @@
1008
878
  margin: 0.4rem;
1009
879
  text-align: center;
1010
880
  }
1011
-
1012
881
  .react-datepicker__year-wrapper {
1013
882
  display: flex;
1014
883
  flex-wrap: wrap;
1015
884
  max-width: 180px;
1016
885
  }
1017
-
1018
886
  .react-datepicker__year .react-datepicker__year-text {
1019
887
  display: inline-block;
1020
888
  width: 4rem;
@@ -1025,7 +893,6 @@
1025
893
  margin: 0.4rem;
1026
894
  text-align: center;
1027
895
  }
1028
-
1029
896
  .react-datepicker__month .react-datepicker__month-text,
1030
897
  .react-datepicker__month .react-datepicker__quarter-text {
1031
898
  display: inline-block;
@@ -1040,34 +907,27 @@
1040
907
  margin: 5px 0 10px 15px;
1041
908
  text-align: left;
1042
909
  }
1043
-
1044
910
  .react-datepicker__input-time-container .react-datepicker-time__caption {
1045
911
  display: inline-block;
1046
912
  }
1047
-
1048
913
  .react-datepicker__input-time-container .react-datepicker-time__input-container {
1049
914
  display: inline-block;
1050
915
  }
1051
-
1052
916
  .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
1053
917
  display: inline-block;
1054
918
  margin-left: 10px;
1055
919
  }
1056
-
1057
920
  .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
1058
921
  width: auto;
1059
922
  }
1060
-
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 {
923
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
924
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
1063
925
  -webkit-appearance: none;
1064
926
  margin: 0;
1065
927
  }
1066
-
1067
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
928
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
1068
929
  -moz-appearance: textfield;
1069
930
  }
1070
-
1071
931
  .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
1072
932
  margin-left: 5px;
1073
933
  display: inline-block;
@@ -1078,7 +938,6 @@
1078
938
  border-left: 1px solid #aeaeae;
1079
939
  width: 85px;
1080
940
  }
1081
-
1082
941
  .react-datepicker__time-container--with-today-button {
1083
942
  display: inline;
1084
943
  border: 1px solid #aeaeae;
@@ -1087,13 +946,11 @@
1087
946
  right: -72px;
1088
947
  top: 0;
1089
948
  }
1090
-
1091
949
  .react-datepicker__time-container .react-datepicker__time {
1092
950
  position: relative;
1093
951
  background: white;
1094
952
  border-bottom-right-radius: 0.3rem;
1095
953
  }
1096
-
1097
954
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
1098
955
  width: 85px;
1099
956
  overflow-x: hidden;
@@ -1101,7 +958,6 @@
1101
958
  text-align: center;
1102
959
  border-bottom-right-radius: 0.3rem;
1103
960
  }
1104
-
1105
961
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
1106
962
  list-style: none;
1107
963
  margin: 0;
@@ -1112,32 +968,26 @@
1112
968
  width: 100%;
1113
969
  box-sizing: content-box;
1114
970
  }
1115
-
1116
971
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
1117
972
  height: 30px;
1118
973
  padding: 5px 10px;
1119
974
  white-space: nowrap;
1120
975
  }
1121
-
1122
976
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
1123
977
  cursor: pointer;
1124
978
  background-color: #f0f0f0;
1125
979
  }
1126
-
1127
980
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
1128
981
  background-color: #216ba5;
1129
982
  color: white;
1130
983
  font-weight: bold;
1131
984
  }
1132
-
1133
985
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
1134
986
  background-color: #216ba5;
1135
987
  }
1136
-
1137
988
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
1138
989
  color: #ccc;
1139
990
  }
1140
-
1141
991
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
1142
992
  cursor: default;
1143
993
  background-color: transparent;
@@ -1151,11 +1001,9 @@
1151
1001
  text-align: center;
1152
1002
  margin: 0.166rem;
1153
1003
  }
1154
-
1155
1004
  .react-datepicker__week-number.react-datepicker__week-number--clickable {
1156
1005
  cursor: pointer;
1157
1006
  }
1158
-
1159
1007
  .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
1160
1008
  border-radius: 0.3rem;
1161
1009
  background-color: #f0f0f0;
@@ -1189,20 +1037,17 @@
1189
1037
  background-color: #216ba5;
1190
1038
  color: #fff;
1191
1039
  }
1192
-
1193
1040
  .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
1194
1041
  .react-datepicker__quarter--selected:hover,
1195
1042
  .react-datepicker__quarter--in-selecting-range:hover,
1196
1043
  .react-datepicker__quarter--in-range:hover {
1197
1044
  background-color: #1d5d90;
1198
1045
  }
1199
-
1200
1046
  .react-datepicker__month--disabled,
1201
1047
  .react-datepicker__quarter--disabled {
1202
1048
  color: #ccc;
1203
1049
  pointer-events: none;
1204
1050
  }
1205
-
1206
1051
  .react-datepicker__month--disabled:hover,
1207
1052
  .react-datepicker__quarter--disabled:hover {
1208
1053
  cursor: default;
@@ -1215,7 +1060,6 @@
1215
1060
  .react-datepicker__year-text {
1216
1061
  cursor: pointer;
1217
1062
  }
1218
-
1219
1063
  .react-datepicker__day:hover,
1220
1064
  .react-datepicker__month-text:hover,
1221
1065
  .react-datepicker__quarter-text:hover,
@@ -1223,14 +1067,12 @@
1223
1067
  border-radius: 0.3rem;
1224
1068
  background-color: #f0f0f0;
1225
1069
  }
1226
-
1227
1070
  .react-datepicker__day--today,
1228
1071
  .react-datepicker__month-text--today,
1229
1072
  .react-datepicker__quarter-text--today,
1230
1073
  .react-datepicker__year-text--today {
1231
1074
  font-weight: bold;
1232
1075
  }
1233
-
1234
1076
  .react-datepicker__day--highlighted,
1235
1077
  .react-datepicker__month-text--highlighted,
1236
1078
  .react-datepicker__quarter-text--highlighted,
@@ -1239,28 +1081,24 @@
1239
1081
  background-color: #3dcc4a;
1240
1082
  color: #fff;
1241
1083
  }
1242
-
1243
1084
  .react-datepicker__day--highlighted:hover,
1244
1085
  .react-datepicker__month-text--highlighted:hover,
1245
1086
  .react-datepicker__quarter-text--highlighted:hover,
1246
1087
  .react-datepicker__year-text--highlighted:hover {
1247
1088
  background-color: #32be3f;
1248
1089
  }
1249
-
1250
1090
  .react-datepicker__day--highlighted-custom-1,
1251
1091
  .react-datepicker__month-text--highlighted-custom-1,
1252
1092
  .react-datepicker__quarter-text--highlighted-custom-1,
1253
1093
  .react-datepicker__year-text--highlighted-custom-1 {
1254
1094
  color: magenta;
1255
1095
  }
1256
-
1257
1096
  .react-datepicker__day--highlighted-custom-2,
1258
1097
  .react-datepicker__month-text--highlighted-custom-2,
1259
1098
  .react-datepicker__quarter-text--highlighted-custom-2,
1260
1099
  .react-datepicker__year-text--highlighted-custom-2 {
1261
1100
  color: green;
1262
1101
  }
1263
-
1264
1102
  .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
1265
1103
  .react-datepicker__month-text--selected,
1266
1104
  .react-datepicker__month-text--in-selecting-range,
@@ -1275,7 +1113,6 @@
1275
1113
  background-color: #216ba5;
1276
1114
  color: #fff;
1277
1115
  }
1278
-
1279
1116
  .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
1280
1117
  .react-datepicker__month-text--selected:hover,
1281
1118
  .react-datepicker__month-text--in-selecting-range:hover,
@@ -1288,38 +1125,57 @@
1288
1125
  .react-datepicker__year-text--in-range:hover {
1289
1126
  background-color: #1d5d90;
1290
1127
  }
1291
-
1292
1128
  .react-datepicker__day--keyboard-selected,
1293
1129
  .react-datepicker__month-text--keyboard-selected,
1294
1130
  .react-datepicker__quarter-text--keyboard-selected,
1295
1131
  .react-datepicker__year-text--keyboard-selected {
1296
1132
  border-radius: 0.3rem;
1297
- background-color: #2a87d0;
1133
+ background-color: #2579ba;
1298
1134
  color: #fff;
1299
1135
  }
1300
-
1301
1136
  .react-datepicker__day--keyboard-selected:hover,
1302
1137
  .react-datepicker__month-text--keyboard-selected:hover,
1303
1138
  .react-datepicker__quarter-text--keyboard-selected:hover,
1304
1139
  .react-datepicker__year-text--keyboard-selected:hover {
1305
1140
  background-color: #1d5d90;
1306
1141
  }
1307
-
1308
- .react-datepicker__day--in-selecting-range ,
1309
- .react-datepicker__month-text--in-selecting-range ,
1310
- .react-datepicker__quarter-text--in-selecting-range ,
1311
- .react-datepicker__year-text--in-selecting-range {
1142
+ .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
1143
+ .react-datepicker__month-text--in-range,
1144
+ .react-datepicker__quarter-text--in-range,
1145
+ .react-datepicker__year-text--in-range),
1146
+ .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
1147
+ .react-datepicker__month-text--in-range,
1148
+ .react-datepicker__quarter-text--in-range,
1149
+ .react-datepicker__year-text--in-range),
1150
+ .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
1151
+ .react-datepicker__month-text--in-range,
1152
+ .react-datepicker__quarter-text--in-range,
1153
+ .react-datepicker__year-text--in-range),
1154
+ .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
1155
+ .react-datepicker__month-text--in-range,
1156
+ .react-datepicker__quarter-text--in-range,
1157
+ .react-datepicker__year-text--in-range) {
1312
1158
  background-color: rgba(33, 107, 165, 0.5);
1313
1159
  }
1314
-
1315
- .react-datepicker__month--selecting-range .react-datepicker__day--in-range , .react-datepicker__month--selecting-range
1316
- .react-datepicker__month-text--in-range , .react-datepicker__month--selecting-range
1317
- .react-datepicker__quarter-text--in-range , .react-datepicker__month--selecting-range
1318
- .react-datepicker__year-text--in-range {
1160
+ .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
1161
+ .react-datepicker__month-text--in-selecting-range,
1162
+ .react-datepicker__quarter-text--in-selecting-range,
1163
+ .react-datepicker__year-text--in-selecting-range),
1164
+ .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
1165
+ .react-datepicker__month-text--in-selecting-range,
1166
+ .react-datepicker__quarter-text--in-selecting-range,
1167
+ .react-datepicker__year-text--in-selecting-range),
1168
+ .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
1169
+ .react-datepicker__month-text--in-selecting-range,
1170
+ .react-datepicker__quarter-text--in-selecting-range,
1171
+ .react-datepicker__year-text--in-selecting-range),
1172
+ .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
1173
+ .react-datepicker__month-text--in-selecting-range,
1174
+ .react-datepicker__quarter-text--in-selecting-range,
1175
+ .react-datepicker__year-text--in-selecting-range) {
1319
1176
  background-color: #f0f0f0;
1320
1177
  color: #000;
1321
1178
  }
1322
-
1323
1179
  .react-datepicker__day--disabled,
1324
1180
  .react-datepicker__month-text--disabled,
1325
1181
  .react-datepicker__quarter-text--disabled,
@@ -1327,7 +1183,6 @@
1327
1183
  cursor: default;
1328
1184
  color: #ccc;
1329
1185
  }
1330
-
1331
1186
  .react-datepicker__day--disabled:hover,
1332
1187
  .react-datepicker__month-text--disabled:hover,
1333
1188
  .react-datepicker__quarter-text--disabled:hover,
@@ -1342,7 +1197,6 @@
1342
1197
  .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
1343
1198
  background-color: #216ba5;
1344
1199
  }
1345
-
1346
1200
  .react-datepicker__month-text:hover,
1347
1201
  .react-datepicker__quarter-text:hover {
1348
1202
  background-color: #f0f0f0;
@@ -1361,13 +1215,11 @@
1361
1215
  border-radius: 0.3rem;
1362
1216
  position: relative;
1363
1217
  }
1364
-
1365
1218
  .react-datepicker__year-read-view:hover,
1366
1219
  .react-datepicker__month-read-view:hover,
1367
1220
  .react-datepicker__month-year-read-view:hover {
1368
1221
  cursor: pointer;
1369
1222
  }
1370
-
1371
1223
  .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
1372
1224
  .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
1373
1225
  .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
@@ -1376,7 +1228,6 @@
1376
1228
  .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
1377
1229
  border-top-color: #b3b3b3;
1378
1230
  }
1379
-
1380
1231
  .react-datepicker__year-read-view--down-arrow,
1381
1232
  .react-datepicker__month-read-view--down-arrow,
1382
1233
  .react-datepicker__month-year-read-view--down-arrow {
@@ -1398,13 +1249,11 @@
1398
1249
  border-radius: 0.3rem;
1399
1250
  border: 1px solid #aeaeae;
1400
1251
  }
1401
-
1402
1252
  .react-datepicker__year-dropdown:hover,
1403
1253
  .react-datepicker__month-dropdown:hover,
1404
1254
  .react-datepicker__month-year-dropdown:hover {
1405
1255
  cursor: pointer;
1406
1256
  }
1407
-
1408
1257
  .react-datepicker__year-dropdown--scrollable,
1409
1258
  .react-datepicker__month-dropdown--scrollable,
1410
1259
  .react-datepicker__month-year-dropdown--scrollable {
@@ -1421,14 +1270,12 @@
1421
1270
  margin-left: auto;
1422
1271
  margin-right: auto;
1423
1272
  }
1424
-
1425
1273
  .react-datepicker__year-option:first-of-type,
1426
1274
  .react-datepicker__month-option:first-of-type,
1427
1275
  .react-datepicker__month-year-option:first-of-type {
1428
1276
  border-top-left-radius: 0.3rem;
1429
1277
  border-top-right-radius: 0.3rem;
1430
1278
  }
1431
-
1432
1279
  .react-datepicker__year-option:last-of-type,
1433
1280
  .react-datepicker__month-option:last-of-type,
1434
1281
  .react-datepicker__month-year-option:last-of-type {
@@ -1439,25 +1286,21 @@
1439
1286
  border-bottom-left-radius: 0.3rem;
1440
1287
  border-bottom-right-radius: 0.3rem;
1441
1288
  }
1442
-
1443
1289
  .react-datepicker__year-option:hover,
1444
1290
  .react-datepicker__month-option:hover,
1445
1291
  .react-datepicker__month-year-option:hover {
1446
1292
  background-color: #ccc;
1447
1293
  }
1448
-
1449
1294
  .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
1450
1295
  .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
1451
1296
  .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
1452
1297
  border-bottom-color: #b3b3b3;
1453
1298
  }
1454
-
1455
1299
  .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
1456
1300
  .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
1457
1301
  .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
1458
1302
  border-top-color: #b3b3b3;
1459
1303
  }
1460
-
1461
1304
  .react-datepicker__year-option--selected,
1462
1305
  .react-datepicker__month-option--selected,
1463
1306
  .react-datepicker__month-year-option--selected {
@@ -1478,7 +1321,6 @@
1478
1321
  display: table-cell;
1479
1322
  vertical-align: middle;
1480
1323
  }
1481
-
1482
1324
  .react-datepicker__close-icon::after {
1483
1325
  cursor: pointer;
1484
1326
  background-color: #216ba5;
@@ -1492,7 +1334,7 @@
1492
1334
  text-align: center;
1493
1335
  display: table-cell;
1494
1336
  vertical-align: middle;
1495
- content: "\00d7";
1337
+ content: "×";
1496
1338
  }
1497
1339
 
1498
1340
  .react-datepicker__today-button {
@@ -1518,65 +1360,62 @@
1518
1360
  z-index: 2147483647;
1519
1361
  }
1520
1362
 
1521
- @supports (-webkit-touch-callout: none) {
1522
-
1523
- .react-datepicker__portal {
1363
+ @supports (-webkit-touch-callout: none){
1364
+ .react-datepicker__portal{
1524
1365
  height: -webkit-fill-available;
1525
1366
  }
1526
1367
  }
1527
-
1528
1368
  .react-datepicker__portal .react-datepicker__day-name,
1529
1369
  .react-datepicker__portal .react-datepicker__day,
1530
1370
  .react-datepicker__portal .react-datepicker__time-name {
1531
1371
  width: 3rem;
1532
1372
  line-height: 3rem;
1533
1373
  }
1534
-
1535
1374
  @media (max-width: 400px), (max-height: 550px) {
1536
1375
  .react-datepicker__portal .react-datepicker__day-name,
1537
- .react-datepicker__portal .react-datepicker__day,
1538
- .react-datepicker__portal .react-datepicker__time-name {
1376
+ .react-datepicker__portal .react-datepicker__day,
1377
+ .react-datepicker__portal .react-datepicker__time-name {
1539
1378
  width: 2rem;
1540
1379
  line-height: 2rem;
1541
1380
  }
1542
1381
  }
1543
-
1544
1382
  .react-datepicker__portal .react-datepicker__current-month,
1545
1383
  .react-datepicker__portal .react-datepicker-time__header {
1546
1384
  font-size: 1.44rem;
1547
1385
  }
1548
1386
 
1549
1387
  .x-3deye-button-group {
1550
- display: flex;
1388
+ display: flex;
1389
+ padding: 4px;
1390
+ gap: 4px;
1551
1391
  }
1552
1392
 
1553
1393
  .x-3deye-button-group > .x-3deye-button {
1554
- flex: 1;
1555
- color: var(--secondary-text);
1556
- height: 35px;
1557
- background-color: var(--background);
1558
- font-size: 11px;
1394
+ flex: 1;
1395
+ height: 35px;
1396
+ font-size: 11px;
1559
1397
  }
1560
1398
 
1561
- .x-3deye-button-group > .x-3deye-button.button-selected {
1562
- color: var(--primary-text);
1563
- background: none;
1399
+ .x-3deye-button-group > .x-3deye-button.button-selected,
1400
+ .x-3deye-button-group > .x-3deye-button.button-selected:hover {
1401
+ color: var(--on-container);
1402
+ background-color: var(--container);
1564
1403
  }
1565
1404
 
1566
1405
  .x-3deye-button-group > .x-3deye-button + .x-3deye-button {
1567
- margin-left: 1px;
1406
+ margin-left: 1px;
1568
1407
  }
1569
1408
 
1570
1409
  .x-3deye-button-group > .x-3deye-button:hover {
1571
- color: var(--primary-text);
1410
+ color: var(--on-container);
1572
1411
  }
1573
1412
 
1574
1413
  .x-3deye-button-group > .x-3deye-button.button-unselected {
1575
- color: var(--secondary-text);
1414
+ color: var(--on-surface);
1576
1415
  }
1577
1416
 
1578
1417
  .x-3deye-button-group > .x-3deye-button.button-selected canvas {
1579
- color: var(--background);
1418
+ color: var(--container);
1580
1419
  }
1581
1420
 
1582
1421
  .x-3deye-popover {