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

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