@3deye-toolkit/react-event-list 0.0.1-alpha.9 → 0.0.2

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