]> git.proxmox.com Git - framework7.git/blame - framework7/css/framework7.bundle.rtl.css
bump version to 4.4.7-2
[framework7.git] / framework7 / css / framework7.bundle.rtl.css
CommitLineData
5309fbda 1/**
5d51ea26 2 * Framework7 4.4.7
5309fbda
DC
3 * Full featured mobile HTML framework for building iOS & Android apps
4 * http://framework7.io/
5 *
6 * Copyright 2014-2019 Vladimir Kharlampidi
7 *
8 * Released under the MIT License
9 *
5d51ea26 10 * Released on: July 19, 2019
5309fbda
DC
11 */
12
13/*====================
14 Core
15 ==================== */
16:root {
17 --f7-theme-color: #007aff;
18 --f7-theme-color-rgb: 0, 122, 255;
19 --f7-theme-color-shade: #0066d6;
20 --f7-theme-color-tint: #298fff;
21 --f7-safe-area-left: 0px;
22 --f7-safe-area-right: 0px;
23 --f7-safe-area-top: 0px;
24 --f7-safe-area-bottom: 0px;
25 --f7-safe-area-outer-left: 0px;
26 --f7-safe-area-outer-right: 0px;
27 --f7-device-pixel-ratio: 1;
28}
29@supports (left: env(safe-area-inset-left)) {
30 :root {
31 --f7-safe-area-top: env(safe-area-inset-top);
32 --f7-safe-area-bottom: env(safe-area-inset-bottom);
33 }
34 :root .ios-left-edge,
35 :root .ios-edges,
36 :root .safe-area-left,
37 :root .safe-areas,
38 :root .popup,
39 :root .sheet-modal,
40 :root .panel-left {
41 --f7-safe-area-left: env(safe-area-inset-left);
42 --f7-safe-area-outer-left: env(safe-area-inset-left);
43 }
44 :root .ios-right-edge,
45 :root .ios-edges,
46 :root .safe-area-right,
47 :root .safe-areas,
48 :root .popup,
49 :root .sheet-modal,
50 :root .panel-right {
51 --f7-safe-area-right: env(safe-area-inset-right);
52 --f7-safe-area-outer-right: env(safe-area-inset-right);
53 }
54 :root .no-safe-areas,
55 :root .no-safe-area-left,
56 :root .no-ios-edges,
57 :root .no-ios-left-edge {
58 --f7-safe-area-left: 0px;
59 --f7-safe-area-outer-left: 0px;
60 }
61 :root .no-safe-areas,
62 :root .no-safe-area-right,
63 :root .no-ios-edges,
64 :root .no-ios-right-edge {
65 --f7-safe-area-right: 0px;
66 --f7-safe-area-outer-right: 0px;
67 }
68}
69@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
70 :root {
71 --f7-device-pixel-ratio: 2;
72 }
73}
74@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
75 :root {
76 --f7-device-pixel-ratio: 3;
77 }
78}
79/*====================
80 Fonts
81 ==================== */
5d51ea26
DC
82:root {
83 --f7-font-size: 14px;
84}
5309fbda
DC
85.ios {
86 --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
87 --f7-text-color: #000;
5309fbda
DC
88 --f7-line-height: 1.4;
89}
90.ios .theme-dark,
91.ios.theme-dark {
92 --f7-text-color: #fff;
93}
94.md {
95 --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
96 --f7-text-color: #212121;
5309fbda
DC
97 --f7-line-height: 1.5;
98}
99.md .theme-dark,
100.md.theme-dark {
101 --f7-text-color: rgba(255, 255, 255, 0.87);
102}
5d51ea26
DC
103.aurora {
104 --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
105 --f7-text-color: #000;
106 --f7-line-height: 1.5;
107}
108.aurora .theme-dark,
109.aurora.theme-dark {
110 --f7-text-color: #fff;
111}
5309fbda
DC
112/*====================
113 Bars
114 ==================== */
115:root {
116 /*
117 --f7-bars-link-color: var(--f7-theme-color);
118 */
119 --f7-bars-bg-image: none;
120 --f7-bars-bg-color: #f7f7f8;
121 --f7-bars-bg-color-rgb: 247, 247, 248;
122 --f7-bars-text-color: #000;
123 --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
124 --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
125}
126.theme-dark {
127 --f7-bars-bg-color: #1b1b1b;
128 --f7-bars-text-color: #fff;
129}
130.ios {
131 --f7-bars-border-color: #c4c4c4;
132}
133.ios .theme-dark,
134.ios.theme-dark {
135 --f7-bars-border-color: #282829;
136}
137.md {
138 --f7-bars-border-color: transparent;
139}
5d51ea26
DC
140.aurora {
141 --f7-bars-border-color: rgba(0, 0, 0, 0.2);
142}
143.aurora .theme-dark,
144.aurora.theme-dark {
145 --f7-bars-border-color: #282829;
146}
5309fbda
DC
147/*====================
148 Color Themes
149 ==================== */
150.text-color-primary {
151 --f7-theme-color-text-color: var(--f7-theme-color);
152}
153.bg-color-primary {
154 --f7-theme-color-bg-color: var(--f7-theme-color);
155}
156.border-color-primary {
157 --f7-theme-color-border-color: var(--f7-theme-color);
158}
159.ripple-color-primary {
160 --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
161}
162:root {
163 --f7-color-red: #ff3b30;
164 --f7-color-red-rgb: 255, 59, 48;
165 --f7-color-red-shade: #ff1407;
166 --f7-color-red-tint: #ff6259;
167 --f7-color-green: #4cd964;
168 --f7-color-green-rgb: 76, 217, 100;
169 --f7-color-green-shade: #2cd048;
170 --f7-color-green-tint: #6ee081;
171 --f7-color-blue: #2196f3;
172 --f7-color-blue-rgb: 33, 150, 243;
173 --f7-color-blue-shade: #0c82df;
174 --f7-color-blue-tint: #48a8f5;
175 --f7-color-pink: #ff2d55;
176 --f7-color-pink-rgb: 255, 45, 85;
177 --f7-color-pink-shade: #ff0434;
178 --f7-color-pink-tint: #ff5676;
179 --f7-color-yellow: #ffcc00;
180 --f7-color-yellow-rgb: 255, 204, 0;
181 --f7-color-yellow-shade: #d6ab00;
182 --f7-color-yellow-tint: #ffd429;
183 --f7-color-orange: #ff9500;
184 --f7-color-orange-rgb: 255, 149, 0;
185 --f7-color-orange-shade: #d67d00;
186 --f7-color-orange-tint: #ffa629;
187 --f7-color-purple: #9c27b0;
188 --f7-color-purple-rgb: 156, 39, 176;
189 --f7-color-purple-shade: #7e208f;
190 --f7-color-purple-tint: #b92fd1;
191 --f7-color-deeppurple: #673ab7;
192 --f7-color-deeppurple-rgb: 103, 58, 183;
193 --f7-color-deeppurple-shade: #563098;
194 --f7-color-deeppurple-tint: #7c52c8;
195 --f7-color-lightblue: #5ac8fa;
196 --f7-color-lightblue-rgb: 90, 200, 250;
197 --f7-color-lightblue-shade: #32bbf9;
198 --f7-color-lightblue-tint: #82d5fb;
199 --f7-color-teal: #009688;
200 --f7-color-teal-rgb: 0, 150, 136;
201 --f7-color-teal-shade: #006d63;
202 --f7-color-teal-tint: #00bfad;
203 --f7-color-lime: #cddc39;
204 --f7-color-lime-rgb: 205, 220, 57;
205 --f7-color-lime-shade: #bac923;
206 --f7-color-lime-tint: #d6e25c;
207 --f7-color-deeporange: #ff6b22;
208 --f7-color-deeporange-rgb: 255, 107, 34;
209 --f7-color-deeporange-shade: #f85200;
210 --f7-color-deeporange-tint: #ff864b;
211 --f7-color-gray: #8e8e93;
212 --f7-color-gray-rgb: 142, 142, 147;
213 --f7-color-gray-shade: #79797f;
214 --f7-color-gray-tint: #a3a3a7;
215 --f7-color-white: #ffffff;
216 --f7-color-white-rgb: 255, 255, 255;
217 --f7-color-white-shade: #ebebeb;
218 --f7-color-white-tint: #ffffff;
219 --f7-color-black: #000000;
220 --f7-color-black-rgb: 0, 0, 0;
221 --f7-color-black-shade: #000000;
222 --f7-color-black-tint: #141414;
223}
224.color-theme-red {
225 --f7-theme-color: #ff3b30;
226 --f7-theme-color-rgb: 255, 59, 48;
227 --f7-theme-color-shade: #ff1407;
228 --f7-theme-color-tint: #ff6259;
229}
230.color-theme-green {
231 --f7-theme-color: #4cd964;
232 --f7-theme-color-rgb: 76, 217, 100;
233 --f7-theme-color-shade: #2cd048;
234 --f7-theme-color-tint: #6ee081;
235}
236.color-theme-blue {
237 --f7-theme-color: #2196f3;
238 --f7-theme-color-rgb: 33, 150, 243;
239 --f7-theme-color-shade: #0c82df;
240 --f7-theme-color-tint: #48a8f5;
241}
242.color-theme-pink {
243 --f7-theme-color: #ff2d55;
244 --f7-theme-color-rgb: 255, 45, 85;
245 --f7-theme-color-shade: #ff0434;
246 --f7-theme-color-tint: #ff5676;
247}
248.color-theme-yellow {
249 --f7-theme-color: #ffcc00;
250 --f7-theme-color-rgb: 255, 204, 0;
251 --f7-theme-color-shade: #d6ab00;
252 --f7-theme-color-tint: #ffd429;
253}
254.color-theme-orange {
255 --f7-theme-color: #ff9500;
256 --f7-theme-color-rgb: 255, 149, 0;
257 --f7-theme-color-shade: #d67d00;
258 --f7-theme-color-tint: #ffa629;
259}
260.color-theme-purple {
261 --f7-theme-color: #9c27b0;
262 --f7-theme-color-rgb: 156, 39, 176;
263 --f7-theme-color-shade: #7e208f;
264 --f7-theme-color-tint: #b92fd1;
265}
266.color-theme-deeppurple {
267 --f7-theme-color: #673ab7;
268 --f7-theme-color-rgb: 103, 58, 183;
269 --f7-theme-color-shade: #563098;
270 --f7-theme-color-tint: #7c52c8;
271}
272.color-theme-lightblue {
273 --f7-theme-color: #5ac8fa;
274 --f7-theme-color-rgb: 90, 200, 250;
275 --f7-theme-color-shade: #32bbf9;
276 --f7-theme-color-tint: #82d5fb;
277}
278.color-theme-teal {
279 --f7-theme-color: #009688;
280 --f7-theme-color-rgb: 0, 150, 136;
281 --f7-theme-color-shade: #006d63;
282 --f7-theme-color-tint: #00bfad;
283}
284.color-theme-lime {
285 --f7-theme-color: #cddc39;
286 --f7-theme-color-rgb: 205, 220, 57;
287 --f7-theme-color-shade: #bac923;
288 --f7-theme-color-tint: #d6e25c;
289}
290.color-theme-deeporange {
291 --f7-theme-color: #ff6b22;
292 --f7-theme-color-rgb: 255, 107, 34;
293 --f7-theme-color-shade: #f85200;
294 --f7-theme-color-tint: #ff864b;
295}
296.color-theme-gray {
297 --f7-theme-color: #8e8e93;
298 --f7-theme-color-rgb: 142, 142, 147;
299 --f7-theme-color-shade: #79797f;
300 --f7-theme-color-tint: #a3a3a7;
301}
302.color-theme-white {
303 --f7-theme-color: #ffffff;
304 --f7-theme-color-rgb: 255, 255, 255;
305 --f7-theme-color-shade: #ebebeb;
306 --f7-theme-color-tint: #ffffff;
307}
308.color-theme-black {
309 --f7-theme-color: #000000;
310 --f7-theme-color-rgb: 0, 0, 0;
311 --f7-theme-color-shade: #000000;
312 --f7-theme-color-tint: #141414;
313}
314.color-red {
315 --f7-theme-color: #ff3b30;
316 --f7-theme-color-rgb: 255, 59, 48;
317 --f7-theme-color-shade: #ff1407;
318 --f7-theme-color-tint: #ff6259;
319}
320.text-color-red {
321 --f7-theme-color-text-color: #ff3b30;
322}
323.bg-color-red {
324 --f7-theme-color-bg-color: #ff3b30;
325}
326.border-color-red {
327 --f7-theme-color-border-color: #ff3b30;
328}
329.ripple-color-red,
330.ripple-red {
331 --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
332}
333.color-green {
334 --f7-theme-color: #4cd964;
335 --f7-theme-color-rgb: 76, 217, 100;
336 --f7-theme-color-shade: #2cd048;
337 --f7-theme-color-tint: #6ee081;
338}
339.text-color-green {
340 --f7-theme-color-text-color: #4cd964;
341}
342.bg-color-green {
343 --f7-theme-color-bg-color: #4cd964;
344}
345.border-color-green {
346 --f7-theme-color-border-color: #4cd964;
347}
348.ripple-color-green,
349.ripple-green {
350 --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
351}
352.color-blue {
353 --f7-theme-color: #2196f3;
354 --f7-theme-color-rgb: 33, 150, 243;
355 --f7-theme-color-shade: #0c82df;
356 --f7-theme-color-tint: #48a8f5;
357}
358.text-color-blue {
359 --f7-theme-color-text-color: #2196f3;
360}
361.bg-color-blue {
362 --f7-theme-color-bg-color: #2196f3;
363}
364.border-color-blue {
365 --f7-theme-color-border-color: #2196f3;
366}
367.ripple-color-blue,
368.ripple-blue {
369 --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
370}
371.color-pink {
372 --f7-theme-color: #ff2d55;
373 --f7-theme-color-rgb: 255, 45, 85;
374 --f7-theme-color-shade: #ff0434;
375 --f7-theme-color-tint: #ff5676;
376}
377.text-color-pink {
378 --f7-theme-color-text-color: #ff2d55;
379}
380.bg-color-pink {
381 --f7-theme-color-bg-color: #ff2d55;
382}
383.border-color-pink {
384 --f7-theme-color-border-color: #ff2d55;
385}
386.ripple-color-pink,
387.ripple-pink {
388 --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
389}
390.color-yellow {
391 --f7-theme-color: #ffcc00;
392 --f7-theme-color-rgb: 255, 204, 0;
393 --f7-theme-color-shade: #d6ab00;
394 --f7-theme-color-tint: #ffd429;
395}
396.text-color-yellow {
397 --f7-theme-color-text-color: #ffcc00;
398}
399.bg-color-yellow {
400 --f7-theme-color-bg-color: #ffcc00;
401}
402.border-color-yellow {
403 --f7-theme-color-border-color: #ffcc00;
404}
405.ripple-color-yellow,
406.ripple-yellow {
407 --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
408}
409.color-orange {
410 --f7-theme-color: #ff9500;
411 --f7-theme-color-rgb: 255, 149, 0;
412 --f7-theme-color-shade: #d67d00;
413 --f7-theme-color-tint: #ffa629;
414}
415.text-color-orange {
416 --f7-theme-color-text-color: #ff9500;
417}
418.bg-color-orange {
419 --f7-theme-color-bg-color: #ff9500;
420}
421.border-color-orange {
422 --f7-theme-color-border-color: #ff9500;
423}
424.ripple-color-orange,
425.ripple-orange {
426 --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
427}
428.color-purple {
429 --f7-theme-color: #9c27b0;
430 --f7-theme-color-rgb: 156, 39, 176;
431 --f7-theme-color-shade: #7e208f;
432 --f7-theme-color-tint: #b92fd1;
433}
434.text-color-purple {
435 --f7-theme-color-text-color: #9c27b0;
436}
437.bg-color-purple {
438 --f7-theme-color-bg-color: #9c27b0;
439}
440.border-color-purple {
441 --f7-theme-color-border-color: #9c27b0;
442}
443.ripple-color-purple,
444.ripple-purple {
445 --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
446}
447.color-deeppurple {
448 --f7-theme-color: #673ab7;
449 --f7-theme-color-rgb: 103, 58, 183;
450 --f7-theme-color-shade: #563098;
451 --f7-theme-color-tint: #7c52c8;
452}
453.text-color-deeppurple {
454 --f7-theme-color-text-color: #673ab7;
455}
456.bg-color-deeppurple {
457 --f7-theme-color-bg-color: #673ab7;
458}
459.border-color-deeppurple {
460 --f7-theme-color-border-color: #673ab7;
461}
462.ripple-color-deeppurple,
463.ripple-deeppurple {
464 --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
465}
466.color-lightblue {
467 --f7-theme-color: #5ac8fa;
468 --f7-theme-color-rgb: 90, 200, 250;
469 --f7-theme-color-shade: #32bbf9;
470 --f7-theme-color-tint: #82d5fb;
471}
472.text-color-lightblue {
473 --f7-theme-color-text-color: #5ac8fa;
474}
475.bg-color-lightblue {
476 --f7-theme-color-bg-color: #5ac8fa;
477}
478.border-color-lightblue {
479 --f7-theme-color-border-color: #5ac8fa;
480}
481.ripple-color-lightblue,
482.ripple-lightblue {
483 --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
484}
485.color-teal {
486 --f7-theme-color: #009688;
487 --f7-theme-color-rgb: 0, 150, 136;
488 --f7-theme-color-shade: #006d63;
489 --f7-theme-color-tint: #00bfad;
490}
491.text-color-teal {
492 --f7-theme-color-text-color: #009688;
493}
494.bg-color-teal {
495 --f7-theme-color-bg-color: #009688;
496}
497.border-color-teal {
498 --f7-theme-color-border-color: #009688;
499}
500.ripple-color-teal,
501.ripple-teal {
502 --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
503}
504.color-lime {
505 --f7-theme-color: #cddc39;
506 --f7-theme-color-rgb: 205, 220, 57;
507 --f7-theme-color-shade: #bac923;
508 --f7-theme-color-tint: #d6e25c;
509}
510.text-color-lime {
511 --f7-theme-color-text-color: #cddc39;
512}
513.bg-color-lime {
514 --f7-theme-color-bg-color: #cddc39;
515}
516.border-color-lime {
517 --f7-theme-color-border-color: #cddc39;
518}
519.ripple-color-lime,
520.ripple-lime {
521 --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
522}
523.color-deeporange {
524 --f7-theme-color: #ff6b22;
525 --f7-theme-color-rgb: 255, 107, 34;
526 --f7-theme-color-shade: #f85200;
527 --f7-theme-color-tint: #ff864b;
528}
529.text-color-deeporange {
530 --f7-theme-color-text-color: #ff6b22;
531}
532.bg-color-deeporange {
533 --f7-theme-color-bg-color: #ff6b22;
534}
535.border-color-deeporange {
536 --f7-theme-color-border-color: #ff6b22;
537}
538.ripple-color-deeporange,
539.ripple-deeporange {
540 --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
541}
542.color-gray {
543 --f7-theme-color: #8e8e93;
544 --f7-theme-color-rgb: 142, 142, 147;
545 --f7-theme-color-shade: #79797f;
546 --f7-theme-color-tint: #a3a3a7;
547}
548.text-color-gray {
549 --f7-theme-color-text-color: #8e8e93;
550}
551.bg-color-gray {
552 --f7-theme-color-bg-color: #8e8e93;
553}
554.border-color-gray {
555 --f7-theme-color-border-color: #8e8e93;
556}
557.ripple-color-gray,
558.ripple-gray {
559 --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
560}
561.color-white {
562 --f7-theme-color: #ffffff;
563 --f7-theme-color-rgb: 255, 255, 255;
564 --f7-theme-color-shade: #ebebeb;
565 --f7-theme-color-tint: #ffffff;
566}
567.text-color-white {
568 --f7-theme-color-text-color: #ffffff;
569}
570.bg-color-white {
571 --f7-theme-color-bg-color: #ffffff;
572}
573.border-color-white {
574 --f7-theme-color-border-color: #ffffff;
575}
576.ripple-color-white,
577.ripple-white {
578 --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
579}
580.color-black {
581 --f7-theme-color: #000000;
582 --f7-theme-color-rgb: 0, 0, 0;
583 --f7-theme-color-shade: #000000;
584 --f7-theme-color-tint: #141414;
585}
586.text-color-black {
587 --f7-theme-color-text-color: #000000;
588}
589.bg-color-black {
590 --f7-theme-color-bg-color: #000000;
591}
592.border-color-black {
593 --f7-theme-color-border-color: #000000;
594}
595.ripple-color-black,
596.ripple-black {
597 --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
598}
599@font-face {
600 font-family: 'framework7-core-icons';
5d51ea26 601 src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAz4ABAAAAAAGNgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAM3AAAABkAAAAciZuB7UdERUYAAArUAAAAIwAAACQAfQBXR1BPUwAADKwAAAAuAAAANuAY7+xHU1VCAAAK+AAAAbMAAAQuAxQJ5U9TLzIAAAHcAAAASgAAAGBRKF+WY21hcAAAAogAAACIAAABYt6F0cBjdnQgAAADEAAAAAQAAAAEABEBRGdhc3AAAArMAAAACAAAAAj//wADZ2x5ZgAAA6gAAAR1AAAJzOg6B0doZWFkAAABbAAAADAAAAA2FLiY/WhoZWEAAAGcAAAAIAAAACQHgQM9aG10eAAAAigAAABeAAABJC9JAAJsb2NhAAADFAAAAJQAAACUReRIiG1heHAAAAG8AAAAHwAAACAAjwBLbmFtZQAACCAAAAFSAAAC2WG9Sh5wb3N0AAAJdAAAAVYAAAJ2B5LxL3jaY2BkYGAA4r3NMlLx/DZfGbiZGEDgxtw1DjD6/49/vSxpTJ+BXA4GsDQARmkM0njaY2BkYGD6/K+XQY8l7f8PBgaWNAagCArwBACRVQXFeNpjYGRgYPBkkGJgYQABJiBmZACJOTDogQQADbgA2wB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPabPjMUwNYwHwEoUGMQAQ7UMZAAAeNpj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wKxExCfBWIJoNzZ/z8Y3YBsF6g4kM2UBpFjBNJMQD0Mu4FsY4jZTGch5jAZQ8QBlR0UZwAAeNpjYGBgZoBgGQZGBhCIAfIYwXwWBgcgzcPAwcAEZCsw6DJYMsQzVP3/DxQF8QyAvMT///8//n/9/9X/G/6vh5oAB4xsDHAhRiYgwcSApgBiNRywMDCwsrFzcHJx8/DyMRAD+BkEBIWERUTFxCUkpaRlZOXkFRSVlFVU1dQ1NBkGAwAAxH4T6AARAUQAAAAqACoAKgA0AD4ASABSAFwAZgBwAHoAhACOAJgAogCsALYAwADKANQA3gDoAPIA/AEGARABGgEkAS4BOAFCAUwBVgFgAWoBdAF+AYgBkgGcAaYBsgHeAgACKgI8AlICZAKEApQCpALWAuwC/gMeAzADQgNgA3IDlgO0A8QD6gP8BBYEKgRKBFwEbgSWBKwExgTmeNrtVc9vG0UUfm8de9y43rVje204lNjZ7AYBKcna3lKcxCIJhwgCqhIIuTSpKp8CaoRsbnZujSosI5QqitVbpCLBKT8EUiUSwyW9mEoWB4RyChKpEJxyoVKz5s2sDXH6H6BKM34z387OfvO9741BgiAAbOAsuIDB4BbC5cw264K/hrc87sPMtkuiIWy5OOzm8Dbz4NPMNnLcDJpBwwz2BVc/y+Vw1v4miCbthtRqotMoOMTHz7Hn2P8ek85gLkLfkAQMXdQv4Ps4TxWmQASiAD0JT1gdTif1YTXsSehJt2UoGLWMr2cymZnMvaWpqaUpHPffkuVleRmzmZmRkZkPpjj8RL7l56DDofkDmvSRHoD+hCLxncbQ0JPp4ZdQRQMRf/P1qr79fZ8a9x0p25J05FN7fXv7HD1SHM7NY6zhfboHXqBdosxIGZ6+BN9DjYRZNMFZElvMrugrbHBscnHxzo0B9u3CxMTCeHlFL0XYwOKdxcXJ0UE2vjA+viB4gQ57dF43QIjRltZeoaBVq5gWAVrcT7CKZfDSVyNxvijKsGo/rGj1ulb5NenE1lrw4494k+9nYRQNq4KKZtcr2mwrAjafkBavkBZ0n1npMST6YZKUy3sZdTfSyenMe3v8/EfKI3QdcU1o7ijBvxGGA4ezRWQM62BTK5W07+i32N/5PEVUo6z1uL9Y0oSOdrkrJ52Aj+e336AFUYsyahlSryYFerTerp6AJGUP0gft9qb9k326vo4uHEbX+vofB1b7kfX08F/YPuXLntWMC0b3r4VVrpP5RY0HvEICtjXL4ruYBQ9NomyIVuPL2uGyRhiFvnecNUv4FuoQoBGXS2gl3GOlMSmzVaZSl1VvPu9FXeYTjsksn2fizDCPdXqf/3fACMYj7lQ8gnXbxPqJaW6YpuBcwxjlhXTrR64rxpoQe/w4VnMC8Wj+DR/Bz/gayACUuaiqoIzExEpHpxa6A4Huj90hz1W/rFz8/Eul26d85UWWVS76ZecM1/Ft4sC9Ri5ixqZIDOoigONxUHGCcuen6gNK3hmHe1r+/nMuNKe9bk1PfzK9NTc6Oje68mFo7hLNpq2hq2Mc6dSLO4yKTNiL8cLrEEuV19tSFQqEdfIkEcgbDs/rm1qxqIk6LEs5PCElQwDJAJELeBJI52k7adfe3bWh+WIu125ZhJ2dJuzgxhkQOjVPIfcqQuz4OFbDluLtmsrhp+RXQCaEE7QwV6lo7YbvnZnwd+yaVJVq3FMWec+8gL/Xj+2afb8smaci7e29L8EDvMF1Sjue+q8gH3TaaDDgXfWGqQdUx1XO+5N0r+nCu8K6FpqPbvZc+x7DIpy/Y/jtYdDNouXzOE+hUGjlvTkv1SUdLvC8k6YmF7UvETpTnY21u43G3bW1YrpIrcR/X8WBRsP+pYH3SlaxaJXE7/n6E9+Mp+JGnded/RCvVLDMh0lRfy7OTzKJH68N0jiYcqqDdy6W00mZ5Ipo53ULOPbiNelc6mSs24zd9jqWwmvP6PYPnHjkAAAAAHjarZC9TsMwFIWP+yfBgBjI7rGtmsjx0p+RSl26IIbsITWt1Sau3EhVxcuwsTGy8RQsTOx9C65dDwwdGBrpyl+Oz7XPNYAbvIPh9HXxGJghwlvgBq7xFbiJlN0HbiFir4HbuGXfgTuIGhE5WeuK/h58l2OGPl4CN3CHz8BNPOEncAt9Vgdug7OPwB3Sj5jCYIsDLDSWWKEGp8wFerRKCKQYY0CcYYMcC3KVVJaUOblzIqeXdIb2u5ia7cHq5arm3aLHpUjHA55t8oUuteXzVW43ebnVC3I+U7NrVdhTCIs1hojpaseKSHuusCOrzUu1N3Y9jAtjVawLU5F81vvXMPNi7VdL8yk/VUJzcUyo/h/h5JcYkSp9nd4GM1PVM2OXistE8Ak/G5V0OYpl7J7jEoNn5LO0r72PUxaXJvGrmw2ZsjttKi5Emggh+AUu/QVMMIYbAAB42m2QCU/CQBSEZ8ADECzIJXj+FuN937dpartKI3TJdjn+vNGFUqGJmzTpvm/evNmHFMbn5xvEf+fIfEQKaRRRRgVV1FDHKhpoYg3r2MEu9rCPAxwa7TFOcIoznOMCl7jCNW5wizvc4wGPeMIzXvCKN6aY5hznucBFZphljkvMs8BlWiyyxBWWWWGVNda5ygabXOM6N7jJLW7nQuEot2X7Miy5LdFXMrCV/9nSo0p2AjueFbO2+NDmXnCUkoP4tmSo+/Uuh+a/mFAak0LCNj+La4HU/ofvOto3FbctQzHqsCLzd6m17BjLrHI8X45IOe725CCwnZ6SylkMpRqHCAd+Vyg7EENt/QWKNLm4r9ctTN4UgdIUTCr52RGWJ9pCC1vJXuDNzOgq0c9OmFlGVys7yjybcbyAqWmUxwiKyT2blSWmGMVyZBbzzPiFpl5JdkbevxMrvisAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQYPIJsFLMYAAA12ANUAeNp1UklOAkEUfUV3Ao4goHSUQQbBIM6z4qxoPIMbNhoT4sIQD+DCMxjjOVx6BuMRjAtvge9XAz2FdLqr+r1X/7/6/0MBGEYWNahWs/2ACEwi6HQgjGrd3zWJwf4jZ+o1AmX8IowknkLt0LdhGiWjDoP4PBrYQBR5PlmUuZvgWuSTRZp/aSSoGHfxeViYQooKm13CmIudYY7JPhfFLK7xiDd84keZqqwa6lY9q3f1ob7UH66oTvGd0+czvugxlDSe5+6U0bxKJ5NbtxXQJbSzjE9X5z29uhJyPs1CQON2ZxErYIW6Qb5sxXlA4a/gItdBMYTf7fJxTOvuVHw+V9mBQRnOMBo4a/ta6zLBrAcBplfDZYwEoonDPc5ksJoyX1X2/4Iekzp6kW9Ua0pUJfpeDrkbpJD4xxjy8ILJdK/zljKtFn1bdBXTe9tBnHqJnexnkRMnrFWR8aWCztQ6/CYzxRhdkB4eJlJjH284yS94xT5jJPX5OG/t7cURK1TmuRwVkiXHr9Rlx4dnuFbopMrKuWPZGWv6vg4q971kNSWHM1nbdNZD7IqI0zh3GZ238A+0lkTEAHjaY2BkYGDgYpBjMGFgzEksyWPgYGABijD8/88AkmEszqxKhYp9YIADAMCOBtEAAHjaY2BgYGQAghsJmjlgeu4aBxgNAELpBpEAAAA=") format("woff");
5309fbda
DC
602 font-weight: 400;
603 font-style: normal;
604}
605@font-face {
606 font-family: 'framework7-skeleton';
607 src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAYQAA0AAAAAEcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAF9AAAABkAAAAciVvoDU9TLzIAAAGcAAAASwAAAGBRtV1jY21hcAAAAfwAAAC8AAABamglddJjdnQgAAACuAAAAAQAAAAEABEBRGdhc3AAAAXsAAAACAAAAAj //wADZ2x5ZgAAA2wAAACUAAAJjHCzhiRoZWFkAAABMAAAAC4AAAA2ERr/HWhoZWEAAAFgAAAAGgAAACQC8ADFaG10eAAAAegAAAATAAAAtAMAABFsb2NhAAACvAAAAK4AAACuaNBmhG1heHAAAAF8AAAAHwAAACAAmgA5bmFtZQAABAAAAAFQAAACuLf6wytwb3N0AAAFUAAAAJkAAADOCKMIc3jaY2BkYGAA4lUx8ibx/DZfGbiZGEDgRu39AAT9/wAjA+MBIJeDASwNACBICpsAAHjaY2BkYGA88P8Agx6QAQSMYIQCWABQZgK3AAB42mNgZGBgCGPgYGBiAAEQycgAEnNg0AMJAAANJwDUAHjaY2BhZGCcwMDKwMDow5jGwMDgDqW/MkgytDAwMDGwcjLAACMDEghIc01haGBQYKhlPPD/AIMe4wEGB5gaxgNAHgNQjhEA6dgLvQB42mNkYBBkAAJGKB4KAAAOfQAVAHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMSgxWDNEMsQz1D7/z9QXIFBjUGHwRHIT/z////j/w/+3/9/6//N/zeg5iABRjYGuCAjE5BgQlcAdAILK5DBxs7BycXAzcPLxy8gKCQsIiomLiEpBVYjLSMrJ6+gqKSsoqqmrqGppa2jq6dvYGhkbGJqZs5gwWBpZW1ja2fv4Ojk7OLq5u7h6eXt4+vnHxAYFBwSyjDgAABJLiG7ABEBRAAAACoAKgAqADgARgBUAGIAcAB+AIwAmgCoALYAxADYAOYA9AECARABHgEsAToBSAFWAWQBcgGAAY4BnAGqAbgBxgHUAeIB8AH+AgwCGgIoAjYCRAJSAmACbgJ8AooCmAKmArQCwgLQAt4C8gMAAw4DHAMqAzgDRgNUA2IDcAN+A4wDmgOoA7YDxAPSA+AD7gP8BAoEGAQmBDQEQgRQBF4EbAR6BIgEnASqBLgExgAAeNpjYGIQZGBgmMkYysDMwM6gt5GRQd9mEzsLw1ujjWysd2w2MTMBmQwbmUHCrCDhTexsjH9sNjGCxI0FjQXVjQWVBTvK09IYQ/+tFmQ0BprGyMDw/wAjA+MBoJkMooKKgowMDkwM/xgYRuVwyjEhybFDZBXBKv4zQFVBVI6G36jcqNyo3GiZMSo3Kjes8hQAx51w5njapZC9agJBFIXP+EfSBMEXmEoU3GVcBNFWsLEJKbYKhEUnOrjryrggkgfIQ6RMnzZVHiBNijxM6pydHUiRFAEXLvebc8+duXcBXOEFAtXXw41ngQ6ePddwgXfPdYRCeW6gIx49N9EWb55b1L/oFI1Lnq5dV8kCXTx4rqGNV8913OLTcwNdcee5CSmePLeof2CGHHucYGGwxgYFJGdeos8cQWGICQbkGCkSrOjKGJbKgu6EVOoZ7zCuilm+P1mz3hSyt+zLSA0nAxmnycpkxsrFJrFpku3Nis57NpetGkcOYbHFGAEOzJqXao6SY0ebTTJ9zO12HBy2OtVFTvGX66c0d0LhsuVO2m0ScheJKeN/z1beESuRi+pPYJ7vinlu11pGoZJT+cdwVEdBFJSbn7djzLql1/iBlBsidLlcBrG2B8MHlRqGSil51nPfEi6AO3jaXc5ZM4IBAEbhp9RF1FhCRbmyVNYskSXG0CaEQvaf2j/LN112bt6Zc/HOETZiOJAJJmSc15ENmxARFTNpSlzCtBmz5iTNW7AoJR08LFmWlbNi1Zp1G/IKijZt2bZj156SfQcOHSk7dqLi1JlzF6ouXbl241ZNXUNTy522ew8edTx59qKrF3S9edf34dOXbz9+/f0DgycTFgAAAAAAAAH//wACeNpjYGBgZACCGwmaOWC69n4AjAYARC0G1wAAAA==") format("woff");
608 font-weight: 300, 400, 500, 600, 700;
609 font-style: normal, italic;
610}
611html {
612 direction: rtl;
613}
614html,
615body,
616.framework7-root {
617 position: relative;
618 height: 100%;
619 width: 100%;
620 overflow-x: hidden;
621}
622body {
623 margin: 0;
624 padding: 0;
625 width: 100%;
626 background: #fff;
627 overflow: hidden;
628 -webkit-text-size-adjust: 100%;
629 -webkit-font-smoothing: antialiased;
630 font-family: var(--f7-font-family);
631 font-size: var(--f7-font-size);
632 line-height: var(--f7-line-height);
633 color: var(--f7-text-color);
634}
635.theme-dark {
636 color: var(--f7-text-color);
637}
638.framework7-root {
639 overflow: hidden;
640 box-sizing: border-box;
641}
642.framework7-initializing *,
643.framework7-initializing *:before,
644.framework7-initializing *:after {
645 transition-duration: 0ms !important;
646}
647.device-ios,
648.device-android {
649 cursor: pointer;
650}
651.device-ios {
652 touch-action: manipulation;
653}
654@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
655 html,
656 body,
657 .framework7-root {
658 height: 671px;
659 }
660}
661@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
662 html,
663 body,
664 .framework7-root {
665 height: 672px;
666 }
667}
668* {
669 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
670 -webkit-touch-callout: none;
671}
672a,
673input,
674textarea,
675select {
676 outline: 0;
677}
678a {
679 cursor: pointer;
680 text-decoration: none;
681 color: var(--f7-theme-color);
682}
5d51ea26
DC
683.link,
684.item-link {
685 cursor: pointer;
686}
5309fbda
DC
687p {
688 margin: 1em 0;
689}
690.disabled {
691 opacity: 0.55 !important;
692 pointer-events: none !important;
693}
694html.device-full-viewport,
695html.device-full-viewport body {
696 height: 100vh;
697}
698.ios .md-only,
5d51ea26
DC
699.ios .if-md,
700.ios .aurora-only,
701.ios .if-aurora,
702.ios .if-not-ios,
703.ios .not-ios {
5309fbda
DC
704 display: none !important;
705}
706@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
707 .ios,
708 .ios body,
709 .ios .framework7-root {
710 height: 671px;
711 }
712}
713@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
714 .ios,
715 .ios body,
716 .ios .framework7-root {
717 height: 672px;
718 }
719}
720.md .ios-only,
5d51ea26
DC
721.md .if-ios,
722.md .aurora-only,
723.md .if-aurora,
724.md .if-not-md,
725.md .not-md {
726 display: none !important;
727}
728.aurora .ios-only,
729.aurora .if-ios,
730.aurora .md-only,
731.aurora .if-md,
732.aurora .if-not-aurora,
733.aurora .not-aurora {
5309fbda
DC
734 display: none !important;
735}
736/* === Statusbar === */
737:root {
738 --f7-statusbar-height: 0px;
739 --f7-statusbar-bg-color: var(--f7-bars-bg-color);
740}
741.device-ios {
742 --f7-statusbar-height: var(--f7-safe-area-top, 20px);
743}
744.device-android {
745 --f7-statusbar-height: var(--f7-safe-area-top, 24px);
746}
747.with-statusbar.ios:not(.device-ios):not(.device-android) {
748 --f7-statusbar-height: 20px;
749}
750.with-statusbar.md:not(.device-ios):not(.device-android) {
751 --f7-statusbar-height: 24px;
752}
753@supports not (top: env(safe-area-inset-top)) {
754 .with-statusbar.device-ios {
755 --f7-statusbar-height: 20px;
756 }
757}
758@supports not (top: env(safe-area-inset-top)) {
759 .with-statusbar.device-android {
760 --f7-statusbar-height: 24px;
761 }
762}
763.statusbar {
764 position: absolute;
765 left: 0;
766 top: 0;
767 width: 100%;
768 z-index: 10000;
769 box-sizing: border-box;
770 display: block;
771 height: var(--f7-statusbar-height);
5d51ea26 772 background: var(--f7-statusbar-bg-color, var(--f7-bars-bg-color));
5309fbda
DC
773}
774.framework7-root {
775 padding-top: var(--f7-statusbar-height);
776}
5309fbda
DC
777/* === Views === */
778.views,
779.view {
780 position: relative;
781 height: 100%;
782 z-index: 5000;
783 overflow: hidden;
784 box-sizing: border-box;
785}
5d51ea26
DC
786.framework7-root > .view,
787.framework7-root > .views {
788 height: calc(100% - var(--f7-appbar-app-offset, 0px));
789}
5309fbda
DC
790/* === Pages === */
791:root {
792 --f7-page-master-width: 320px;
793 --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
794 --f7-page-master-border-width: 1px;
5d51ea26
DC
795 --f7-page-swipeback-transition-duration: 400ms;
796 /*
797 --f7-page-content-extra-padding-top: 0px;
798 --f7-page-content-extra-padding-bottom: 0px;
799 */
5309fbda
DC
800}
801.ios {
802 --f7-page-bg-color: #efeff4;
803 --f7-page-transition-duration: 400ms;
5309fbda
DC
804}
805.md {
806 --f7-page-bg-color: #fff;
807 --f7-page-transition-duration: 250ms;
5d51ea26
DC
808}
809.aurora {
810 --f7-page-bg-color: #f3f3f3;
811 --f7-page-transition-duration: 400ms;
5309fbda
DC
812}
813.theme-dark {
814 --f7-page-bg-color: #171717;
815 --f7-page-master-border-color: rgba(255, 255, 255, 0.1);
816}
817.pages {
818 position: relative;
819 width: 100%;
820 height: 100%;
821 overflow: hidden;
822}
823.page {
824 box-sizing: border-box;
825 position: absolute;
826 left: 0;
827 top: 0;
828 width: 100%;
829 height: 100%;
5d51ea26 830 transform: none;
5309fbda 831 background-color: var(--f7-page-bg-color);
5d51ea26 832 z-index: 1;
5309fbda
DC
833}
834.page.stacked {
835 display: none;
836}
837.page-with-navbar-large-collapsed {
838 --f7-navbar-large-collapse-progress: 1;
839}
840.page-previous {
841 pointer-events: none;
842}
843.page-content {
844 will-change: scroll-position;
845 overflow: auto;
846 -webkit-overflow-scrolling: touch;
847 box-sizing: border-box;
848 height: 100%;
849 position: relative;
850 z-index: 1;
5d51ea26
DC
851 padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
852 padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
5309fbda
DC
853}
854.page-transitioning,
855.page-transitioning .page-shadow-effect,
856.page-transitioning .page-opacity-effect {
857 transition-duration: var(--f7-page-transition-duration);
858}
859.page-transitioning-swipeback,
860.page-transitioning-swipeback .page-shadow-effect,
861.page-transitioning-swipeback .page-opacity-effect {
862 transition-duration: var(--f7-page-swipeback-transition-duration);
863}
864.router-transition-forward .page-next,
865.router-transition-backward .page-next,
866.router-transition-forward .page-current,
867.router-transition-backward .page-current,
868.router-transition-forward .page-previous:not(.stacked),
869.router-transition-backward .page-previous:not(.stacked) {
870 pointer-events: none;
871}
872.page-shadow-effect {
873 position: absolute;
874 top: 0;
875 width: 16px;
876 bottom: 0;
877 z-index: -1;
878 content: '';
879 opacity: 0;
880 left: 100%;
881 background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
882}
883.page-opacity-effect {
884 position: absolute;
885 left: 0;
886 top: 0;
887 background: rgba(0, 0, 0, 0.1);
888 width: 100%;
889 bottom: 0;
890 content: '';
891 opacity: 0;
892 z-index: 10000;
893}
894.ios .page-previous {
895 transform: translate3d(20%, 0, 0);
896}
897.ios .page-next {
898 transform: translate3d(-100%, 0, 0);
899}
900.ios .page-previous .page-opacity-effect {
901 opacity: 1;
902}
903.ios .page-previous:after {
904 opacity: 1;
905}
906.ios .page-current .page-shadow-effect {
907 opacity: 1;
908}
909.ios .router-transition-forward .page-next,
910.ios .router-transition-forward .page-current {
911 will-change: transform;
912}
913.ios .router-transition-forward .page-next {
914 animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
915}
916.ios .router-transition-forward .page-next:before {
917 position: absolute;
918 top: 0;
919 width: 16px;
920 bottom: 0;
921 z-index: -1;
922 content: '';
923 opacity: 0;
924 left: 100%;
925 background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
926 animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
927}
928.ios .router-transition-forward .page-current {
929 animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
930}
931.ios .router-transition-forward .page-current:after {
932 position: absolute;
933 left: 0;
934 top: 0;
935 background: rgba(0, 0, 0, 0.1);
936 width: 100%;
937 bottom: 0;
938 content: '';
939 opacity: 0;
940 z-index: 10000;
941 animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
942}
943.ios .router-transition-backward .page-previous,
944.ios .router-transition-backward .page-current {
945 will-change: transform;
946}
947.ios .router-transition-backward .page-previous {
948 animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
949}
950.ios .router-transition-backward .page-previous:after {
951 position: absolute;
952 left: 0;
953 top: 0;
954 background: rgba(0, 0, 0, 0.1);
955 width: 100%;
956 bottom: 0;
957 content: '';
958 opacity: 0;
959 z-index: 10000;
960 animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
961}
962.ios .router-transition-backward .page-current {
963 animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
964}
965.ios .router-transition-backward .page-current:before {
966 position: absolute;
967 top: 0;
968 width: 16px;
969 bottom: 0;
970 z-index: -1;
971 content: '';
972 opacity: 0;
973 left: 100%;
974 background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
975 animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
976}
977.ios .router-dynamic-navbar-inside .page-shadow-effect,
978.ios .router-dynamic-navbar-inside .page-opacity-effect {
979 top: var(--f7-navbar-height);
980}
981.ios .router-dynamic-navbar-inside .page-next:before,
982.ios .router-dynamic-navbar-inside .page-current:after,
983.ios .router-dynamic-navbar-inside .page-current:before,
984.ios .router-dynamic-navbar-inside .page-previous:after {
985 top: var(--f7-navbar-height);
986}
987@keyframes ios-page-next-to-current {
988 from {
989 transform: translate3d(-100%, 0, 0);
990 }
991 to {
992 transform: translate3d(0%, 0, 0);
993 }
994}
995@keyframes ios-page-previous-to-current {
996 from {
997 transform: translate3d(20%, 0, 0);
998 }
999 to {
1000 transform: translate3d(0%, 0, 0);
1001 }
1002}
1003@keyframes ios-page-current-to-previous {
1004 from {
1005 transform: translate3d(0, 0, 0);
1006 }
1007 to {
1008 transform: translate3d(20%, 0, 0);
1009 }
1010}
1011@keyframes ios-page-current-to-next {
1012 from {
1013 transform: translate3d(0, 0, 0);
1014 }
1015 to {
1016 transform: translate3d(-100%, 0, 0);
1017 }
1018}
1019@keyframes ios-page-element-fade-in {
1020 from {
1021 opacity: 0;
1022 }
1023 to {
1024 opacity: 1;
1025 }
1026}
1027@keyframes ios-page-element-fade-out {
1028 from {
1029 opacity: 1;
1030 }
1031 to {
1032 opacity: 0;
1033 }
1034}
1035.md .page-next {
1036 transform: translate3d(0, 56px, 0);
1037 opacity: 0;
1038 pointer-events: none;
1039}
1040.md .page-next.page-next-on-right {
1041 transform: translate3d(-100%, 0, 0);
1042}
1043.md .router-transition-forward .page-next {
1044 will-change: transform, opacity;
1045 animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
1046}
1047.md .router-transition-forward .page-current {
1048 animation: none;
1049}
1050.md .router-transition-backward .page-current {
1051 will-change: transform, opacity;
1052 animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
1053}
1054.md .router-transition-backward .page-previous {
1055 animation: none;
1056}
1057@keyframes md-page-next-to-current {
1058 from {
1059 transform: translate3d(0, 56px, 0);
1060 opacity: 0;
1061 }
1062 to {
1063 transform: translate3d(0, 0px, 0);
1064 opacity: 1;
1065 }
1066}
1067@keyframes md-page-current-to-next {
1068 from {
1069 transform: translate3d(0, 0, 0);
1070 opacity: 1;
1071 }
1072 to {
1073 transform: translate3d(0, 56px, 0);
1074 opacity: 0;
1075 }
1076}
5d51ea26
DC
1077.aurora .page-next {
1078 pointer-events: none;
1079 transform: translate3d(-100%, 0px, 0);
1080}
1081.aurora .page-next.page-next-on-right {
1082 transform: translate3d(-100%, 0, 0);
1083}
1084.aurora .page-previous .page-opacity-effect {
1085 opacity: 1;
1086}
1087.aurora .page-previous:after {
1088 opacity: 1;
1089}
1090.aurora .router-transition-forward .page-next {
1091 will-change: transform;
1092 animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
1093}
1094.aurora .router-transition-forward .page-current {
1095 animation: none;
1096}
1097.aurora .router-transition-forward .page-current:after {
1098 position: absolute;
1099 left: 0;
1100 top: 0;
1101 background: rgba(0, 0, 0, 0.1);
1102 width: 100%;
1103 bottom: 0;
1104 content: '';
1105 opacity: 0;
1106 z-index: 10000;
1107 animation: aurora-page-element-fade-in var(--f7-page-transition-duration) forwards;
1108}
1109.aurora .router-transition-backward .page-current {
1110 will-change: transform, opacity;
1111 animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
1112}
1113.aurora .router-transition-backward .page-previous {
1114 animation: none;
1115}
1116.aurora .router-transition-backward .page-previous:after {
1117 position: absolute;
1118 left: 0;
1119 top: 0;
1120 background: rgba(0, 0, 0, 0.1);
1121 width: 100%;
1122 bottom: 0;
1123 content: '';
1124 opacity: 0;
1125 z-index: 10000;
1126 animation: aurora-page-element-fade-out var(--f7-page-transition-duration) forwards;
1127}
1128@keyframes aurora-page-next-to-current {
1129 from {
1130 transform: translate3d(-100%, 0, 0);
1131 }
1132 to {
1133 transform: translate3d(0, 0px, 0);
1134 }
1135}
1136@keyframes aurora-page-current-to-next {
1137 from {
1138 transform: translate3d(0, 0, 0);
1139 }
1140 to {
1141 transform: translate3d(-100%, 0, 0);
1142 }
1143}
1144@keyframes aurora-page-element-fade-in {
1145 from {
1146 opacity: 0;
1147 }
1148 to {
1149 opacity: 1;
1150 }
1151}
1152@keyframes aurora-page-element-fade-out {
1153 from {
1154 opacity: 1;
1155 }
1156 to {
1157 opacity: 0;
1158 }
1159}
5309fbda
DC
1160.view:not(.view-master-detail) .page-master-stacked {
1161 display: none;
1162}
1163.view:not(.view-master-detail) .navbar-master-stacked {
1164 display: none;
1165}
1166.view-master-detail .page-master,
1167.view-master-detail .navbar-master {
1168 width: var(--f7-page-master-width);
1169 left: auto;
1170 right: 0;
1171 --f7-safe-area-left: 0px;
1172 --f7-safe-area-outer-left: 0px;
1173 border-left: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
1174}
1175.view-master-detail .page-master-detail,
1176.view-master-detail .navbar-master-detail {
1177 width: calc(100% - var(--f7-page-master-width));
1178 --f7-safe-area-right: 0px;
1179 --f7-safe-area-outer-right: 0px;
1180 right: var(--f7-page-master-width);
1181}
1182.view-master-detail .page-master {
5d51ea26 1183 z-index: 2;
5309fbda
DC
1184 transform: none;
1185 pointer-events: auto;
1186}
1187.view-master-detail .page-master:before,
1188.view-master-detail .page-master:after {
1189 display: none;
1190}
1191.view-master-detail.router-transition .page-master {
1192 animation: none;
1193}
1194/* === Link === */
1195:root {
1196 --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
1197 --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
1198 --f7-link-highlight-color: var(--f7-link-highlight-black);
1199}
1200.theme-dark {
1201 --f7-link-highlight-color: var(--f7-link-highlight-white);
1202}
1203.link,
1204.tab-link {
1205 display: inline-flex;
1206 align-items: center;
1207 align-content: center;
1208 justify-content: center;
1209 position: relative;
1210 box-sizing: border-box;
1211 transform: translate3d(0, 0, 0);
1212 z-index: 1;
1213}
1214.link i + span,
1215.link i + i,
1216.link span + i,
1217.link span + span {
1218 margin-right: 4px;
1219}
1220.ios .link {
1221 transition: opacity 300ms;
1222}
1223.ios .link.active-state {
1224 opacity: 0.3;
1225 transition-duration: 0ms;
1226}
5d51ea26
DC
1227.aurora .link {
1228 transition: opacity 300ms;
1229}
1230.aurora .link.active-state {
1231 opacity: 0.3;
1232 transition-duration: 0ms;
1233}
5309fbda
DC
1234/* === Navbar === */
1235:root {
1236 /*
1237 --f7-navbar-bg-color: var(--f7-bars-bg-color);
1238 --f7-navbar-bg-image: var(--f7-bars-bg-image);
1239 --f7-navbar-border-color: var(--f7-bars-border-color);
1240 --f7-navbar-link-color: var(--f7-bars-link-color);
1241 --f7-navbar-text-color: var(--f7-bars-text-color);
1242 */
1243 --f7-navbar-hide-show-transition-duration: 400ms;
1244 --f7-navbar-title-line-height: 1.2;
5d51ea26
DC
1245 --f7-navbar-title-font-size: inherit;
1246 --f7-navbar-subtitle-text-align: inherit;
1247 --f7-navbar-large-title-line-height: 1.2;
1248 --f7-navbar-large-title-text-color: inherit;
5309fbda
DC
1249}
1250.ios {
1251 --f7-navbar-height: 44px;
1252 --f7-navbar-tablet-height: 44px;
1253 --f7-navbar-font-size: 17px;
1254 --f7-navbar-inner-padding-left: 8px;
1255 --f7-navbar-inner-padding-right: 8px;
1256 --f7-navbar-title-font-weight: 600;
1257 --f7-navbar-title-margin-left: 0;
1258 --f7-navbar-title-margin-right: 0;
1259 --f7-navbar-title-text-align: center;
1260 --f7-navbar-subtitle-text-color: #6d6d72;
1261 --f7-navbar-subtitle-font-size: 10px;
1262 --f7-navbar-subtitle-line-height: 1;
5309fbda
DC
1263 --f7-navbar-shadow-image: none;
1264 --f7-navbar-large-title-height: 52px;
1265 --f7-navbar-large-title-font-size: 34px;
1266 --f7-navbar-large-title-font-weight: 700;
5309fbda
DC
1267 --f7-navbar-large-title-letter-spacing: -0.03em;
1268 --f7-navbar-large-title-padding-left: 15px;
1269 --f7-navbar-large-title-padding-right: 15px;
5d51ea26
DC
1270 /*
1271 --f7-navbar-link-height: var(--f7-navbar-height);
1272 --f7-navbar-link-line-height: var(--f7-navbar-height);
1273 */
5309fbda
DC
1274}
1275.ios .theme-dark,
1276.ios.theme-dark {
1277 --f7-navbar-subtitle-text-color: #8e8e93;
1278}
1279.md {
1280 --f7-navbar-height: 56px;
1281 --f7-navbar-tablet-height: 64px;
1282 --f7-navbar-font-size: 20px;
1283 --f7-navbar-inner-padding-left: 0px;
1284 --f7-navbar-inner-padding-right: 0px;
1285 --f7-navbar-title-font-weight: 500;
1286 --f7-navbar-title-margin-left: 16px;
1287 --f7-navbar-title-margin-right: 16px;
1288 --f7-navbar-title-text-align: left;
1289 --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
1290 --f7-navbar-subtitle-font-size: 14px;
1291 --f7-navbar-subtitle-line-height: 1.2;
5309fbda
DC
1292 --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
1293 --f7-navbar-large-title-font-size: 34px;
1294 --f7-navbar-large-title-height: 56px;
1295 --f7-navbar-large-title-font-weight: 500;
5309fbda
DC
1296 --f7-navbar-large-title-letter-spacing: 0;
1297 --f7-navbar-large-title-padding-left: 16px;
1298 --f7-navbar-large-title-padding-right: 16px;
5d51ea26
DC
1299 /*
1300 --f7-navbar-link-height: var(--f7-navbar-height);
1301 --f7-navbar-link-line-height: var(--f7-navbar-height);
1302 */
5309fbda
DC
1303}
1304.md .theme-dark,
1305.md.theme-dark {
1306 --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
1307}
5d51ea26
DC
1308.aurora {
1309 --f7-navbar-height: 38px;
1310 --f7-navbar-tablet-height: 38px;
1311 --f7-navbar-font-size: 14px;
1312 --f7-navbar-inner-padding-left: 15px;
1313 --f7-navbar-inner-padding-right: 15px;
1314 --f7-navbar-title-font-weight: 600;
1315 --f7-navbar-title-margin-left: 0;
1316 --f7-navbar-title-margin-right: 0;
1317 --f7-navbar-title-text-align: center;
1318 --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
1319 --f7-navbar-subtitle-font-size: 12px;
1320 --f7-navbar-subtitle-line-height: 1;
1321 --f7-navbar-shadow-image: none;
1322 --f7-navbar-large-title-height: 38px;
1323 --f7-navbar-large-title-font-size: 26px;
1324 --f7-navbar-large-title-font-weight: bold;
1325 --f7-navbar-large-title-letter-spacing: -0.03em;
1326 --f7-navbar-large-title-padding-left: 15px;
1327 --f7-navbar-large-title-padding-right: 15px;
1328 --f7-navbar-link-height: auto;
1329 --f7-navbar-link-line-height: inherit;
1330}
1331.aurora .theme-dark,
1332.aurora.theme-dark {
1333 --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
1334}
5309fbda
DC
1335.navbar {
1336 --f7-navbar-large-collapse-progress: 0;
1337 position: relative;
1338 left: 0;
1339 top: 0;
1340 width: 100%;
1341 z-index: 500;
1342 -webkit-backface-visibility: hidden;
1343 backface-visibility: hidden;
1344 box-sizing: border-box;
1345 margin: 0;
1346 transform: translate3d(0, 0, 0);
1347 height: var(--f7-navbar-height);
1348 background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1349 background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
1350 color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
1351 font-size: var(--f7-navbar-font-size);
1352}
5309fbda
DC
1353.navbar b {
1354 font-weight: 500;
1355}
1356.navbar a {
1357 color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
1358}
1359.navbar a.link {
1360 display: flex;
1361 justify-content: flex-start;
5d51ea26
DC
1362 line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
1363 height: var(--f7-navbar-link-height, var(--f7-navbar-height));
5309fbda
DC
1364}
1365.navbar .title,
1366.navbar .left,
1367.navbar .right {
1368 position: relative;
1369 z-index: 10;
1370}
1371.navbar .title {
5309fbda
DC
1372 position: relative;
1373 overflow: hidden;
1374 text-overflow: ellipsis;
1375 white-space: nowrap;
1376 flex-shrink: 10;
1377 font-weight: var(--f7-navbar-title-font-weight);
1378 display: inline-block;
1379 line-height: var(--f7-navbar-title-line-height);
1380 text-align: var(--f7-navbar-title-text-align);
5d51ea26 1381 font-size: var(--f7-navbar-title-font-size);
5309fbda
DC
1382 margin-right: var(--f7-navbar-title-margin-left);
1383 margin-left: var(--f7-navbar-title-margin-left);
1384}
1385.navbar .subtitle {
1386 display: block;
1387 color: var(--f7-navbar-subtitle-text-color);
1388 font-weight: normal;
1389 font-size: var(--f7-navbar-subtitle-font-size);
1390 line-height: var(--f7-navbar-subtitle-line-height);
1391 text-align: var(--f7-navbar-subtitle-text-align);
1392}
1393.navbar .left,
1394.navbar .right {
1395 flex-shrink: 0;
1396 display: flex;
1397 justify-content: flex-start;
1398 align-items: center;
1399 transform: translate3d(0, 0, 0);
1400}
1401.navbar .right:first-child {
1402 position: absolute;
1403 height: 100%;
1404}
1405.navbar.no-hairline:after,
1406.navbar.no-border:after {
1407 display: none !important;
1408}
1409.navbar.no-hairline .title-large:after,
1410.navbar.no-border .title-large:after {
1411 display: none !important;
1412}
1413.navbar.no-shadow:before {
1414 display: none !important;
1415}
1416.navbar.navbar-hidden:before {
1417 opacity: 0 !important;
1418}
1419.navbar:after,
1420.navbar:before {
1421 -webkit-backface-visibility: hidden;
1422 backface-visibility: hidden;
1423}
1424.navbar:after {
1425 content: '';
1426 position: absolute;
1427 background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1428 display: block;
1429 z-index: 15;
1430 top: auto;
1431 right: auto;
1432 bottom: 0;
1433 left: 0;
1434 height: 1px;
1435 width: 100%;
1436 transform-origin: 50% 100%;
1437 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1438}
1439.navbar:before {
1440 content: '';
1441 position: absolute;
1442 right: 0;
1443 width: 100%;
1444 top: 100%;
1445 bottom: auto;
1446 height: 8px;
1447 pointer-events: none;
5d51ea26 1448 background: var(--f7-navbar-shadow-image);
5309fbda
DC
1449}
1450.navbar:after {
1451 z-index: 1;
1452}
1453@media (min-width: 768px) {
1454 :root {
1455 --f7-navbar-height: var(--f7-navbar-tablet-height);
1456 }
1457}
1458.navbar-transitioning,
1459.navbar-transitioning:before,
1460.navbar-transitioning .title,
1461.navbar-transitioning .title-large,
1462.navbar-transitioning .title-large-inner,
1463.navbar-transitioning .title-large-text,
1464.navbar-transitioning .subnavbar {
1465 transition-duration: var(--f7-navbar-hide-show-transition-duration);
1466}
1467.navbar-page-transitioning {
1468 transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1469}
1470.navbar-page-transitioning .title-large-text,
1471.navbar-page-transitioning .title-large-inner {
1472 transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1473}
1474.navbar-hidden {
1475 transform: translate3d(0, -100%, 0);
1476}
1477.navbar-large-hidden {
1478 --f7-navbar-large-collapse-progress: 1;
1479}
1480.navbar-inner {
1481 position: absolute;
1482 left: 0;
1483 top: 0;
1484 width: 100%;
1485 height: var(--f7-navbar-height);
1486 display: flex;
1487 align-items: center;
1488 box-sizing: border-box;
5d51ea26 1489 padding: 0 calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-left) + var(--f7-safe-area-left));
5309fbda
DC
1490}
1491.navbar-inner.stacked {
1492 display: none;
1493}
1494.views > .navbar,
1495.view > .navbar,
1496.page > .navbar {
1497 position: absolute;
1498}
1499.navbar-large:before {
1500 transform: translateY(calc((1 - var(--f7-navbar-large-collapse-progress)) * var(--f7-navbar-large-title-height)));
1501}
1502.navbar-inner-large > .title {
1503 opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress));
1504}
1505.navbar-large-collapsed,
1506.navbar-inner-large-collapsed {
1507 --f7-navbar-large-collapse-progress: 1;
1508}
1509.navbar .title-large {
1510 box-sizing: border-box;
1511 position: absolute;
1512 left: 0;
1513 right: 0;
1514 top: 100%;
1515 display: flex;
1516 align-items: center;
1517 white-space: nowrap;
1518 transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1519 will-change: transform, opacity;
1520 transition-property: transform;
1521 overflow: hidden;
1522 background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1523 background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
1524 height: calc(var(--f7-navbar-large-title-height) + 1px);
1525 z-index: 5;
1526 margin-top: -1px;
1527 transform-origin: calc(100% - var(--f7-navbar-large-title-padding-left) - var(--f7-safe-area-left)) center;
1528}
1529.navbar .title-large:after {
1530 content: '';
1531 position: absolute;
1532 background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1533 display: block;
1534 z-index: 15;
1535 top: auto;
1536 right: auto;
1537 bottom: 0;
1538 left: 0;
1539 height: 1px;
1540 width: 100%;
1541 transform-origin: 50% 100%;
1542 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1543}
1544.title-large-text,
1545.title-large-inner .title {
1546 text-overflow: ellipsis;
1547 white-space: nowrap;
1548 color: var(--f7-navbar-large-title-text-color);
1549 letter-spacing: var(--f7-navbar-large-title-letter-spacing);
1550 font-size: var(--f7-navbar-large-title-font-size);
1551 font-weight: var(--f7-navbar-large-title-font-weight);
1552 line-height: var(--f7-navbar-large-title-line-height);
1553 padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
1554 padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
1555 transform-origin: calc(100% - var(--f7-navbar-large-title-padding-left) - var(--f7-safe-area-left)) center;
1556}
1557.title-large-text,
1558.title-large-inner {
1559 box-sizing: border-box;
1560 overflow: hidden;
1561 transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1562 transition-property: transform, opacity;
1563 width: 100%;
1564}
1565.navbar-no-title-large-transition .title-large,
1566.navbar-no-title-large-transition .title-large-text,
1567.navbar-no-title-large-transition .title-large-inner {
1568 transition-duration: 0ms;
1569}
5d51ea26
DC
1570.navbar ~ * {
1571 --f7-page-navbar-offset: var(--f7-navbar-height);
5309fbda 1572}
5d51ea26
DC
1573.navbar ~ * .page-with-navbar-large,
1574.navbar ~ .page-with-navbar-large,
1575.page-with-navbar-large .navbar ~ * {
1576 --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
1577}
1578.page.no-navbar,
1579.page.no-navbar .navbar ~ * {
1580 --f7-page-navbar-offset: 0px;
5309fbda
DC
1581}
1582.ios {
1583 --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
1584 --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
1585}
5d51ea26
DC
1586.ios .navbar .material-icons {
1587 width: 24px;
1588}
1589.ios .navbar .f7-icons {
1590 width: 28px;
1591}
5309fbda
DC
1592.ios .navbar a.icon-only {
1593 width: 44px;
1594 margin: 0;
1595 justify-content: center;
1596}
1597.ios .navbar .left a + a,
1598.ios .navbar .right a + a {
1599 margin-right: 15px;
1600}
1601.ios .navbar b {
1602 font-weight: 600;
1603}
1604.ios .navbar .left {
1605 margin-left: 10px;
1606}
1607.ios .navbar .right {
1608 margin-right: 10px;
1609}
1610.ios .navbar .right:first-child {
1611 left: calc(8px + var(--f7-safe-area-left));
1612}
1613.ios .navbar-inner {
1614 justify-content: space-between;
1615}
1616.ios .navbar-inner-left-title {
1617 justify-content: flex-start;
1618}
1619.ios .navbar-inner-left-title .right {
1620 margin-right: auto;
1621}
1622.ios .navbar-inner-left-title .title {
1623 text-align: left;
1624 margin-left: 10px;
1625}
1626.ios .view-master-detail .navbar-previous:not(.navbar-master),
1627.ios .view:not(.view-master-detail) .navbar-previous {
1628 pointer-events: none;
1629}
1630.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
1631.ios .view:not(.view-master-detail) .navbar-previous .title-large {
1632 transform: translateY(-100%);
1633 opacity: 0;
1634 transition: 0ms;
1635}
1636.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
1637.ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
1638 transform: scale(0.5);
1639 transition: 0ms;
1640}
1641.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-inner,
1642.ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner {
1643 transform: translateX(-100%);
1644 opacity: 0;
1645 transition: 0ms;
1646}
1647.ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
1648.ios .view:not(.view-master-detail) .navbar-previous .left,
1649.ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
1650.ios .view:not(.view-master-detail) .navbar-previous .right,
1651.ios .view-master-detail .navbar-previous:not(.navbar-master) > .title,
1652.ios .view:not(.view-master-detail) .navbar-previous > .title,
1653.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
1654.ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
1655.ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
1656.ios .view:not(.view-master-detail) .navbar-previous .fading {
1657 opacity: 0;
1658}
1659.ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding,
1660.ios .view:not(.view-master-detail) .navbar-previous .sliding {
1661 opacity: 0;
1662}
1663.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
1664.ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
1665.ios .view-master-detail .navbar-previous:not(.navbar-master).sliding .subnavbar,
1666.ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar {
1667 opacity: 1;
1668 transform: translate3d(-100%, 0, 0);
1669}
1670.ios .navbar-next {
1671 pointer-events: none;
1672}
1673.ios .navbar-next .title-large {
1674 transform: translateX(100%);
1675 transition: 0ms;
1676}
1677.ios .navbar-next .title-large .title-large-text,
1678.ios .navbar-next .title-large .title-large-inner {
1679 transition: 0ms;
1680}
1681.ios .navbar-next .left,
1682.ios .navbar-next .right,
1683.ios .navbar-next > .title,
1684.ios .navbar-next .subnavbar,
1685.ios .navbar-next .fading {
1686 opacity: 0;
1687}
1688.ios .navbar-next .sliding {
1689 opacity: 0;
1690}
1691.ios .navbar-next.sliding .left,
1692.ios .navbar-next.sliding .right,
1693.ios .navbar-next.sliding > .title,
1694.ios .navbar-next.sliding .subnavbar {
1695 opacity: 0;
1696}
1697.ios .navbar-next .subnavbar.sliding,
1698.ios .navbar-next.sliding .subnavbar {
1699 opacity: 1;
1700 transform: translate3d(100%, 0, 0);
1701}
1702.ios .router-dynamic-navbar-inside .navbar-next .title-large,
1703.ios .router-dynamic-navbar-inside .navbar-next .title-large-text,
1704.ios .router-dynamic-navbar-inside .navbar-next .title-large-inner {
1705 transform: none;
1706}
1707.ios .router-dynamic-navbar-inside .navbar-previous .title-large {
1708 opacity: 1;
1709 transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1710}
1711.ios .router-dynamic-navbar-inside .navbar-previous .title-large-text,
1712.ios .router-dynamic-navbar-inside .navbar-previous .title-large-inner {
1713 transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1714}
1715.ios .router-transition .navbar {
1716 transition-duration: var(--f7-page-transition-duration);
1717}
1718.ios .router-transition .title-large {
1719 transition: 0ms;
1720}
1721.ios .router-transition .navbar-current .left,
1722.ios .router-transition .navbar-current > .title,
1723.ios .router-transition .navbar-current .right,
1724.ios .router-transition .navbar-current .subnavbar {
1725 animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
1726}
1727.ios .router-transition .navbar-current .sliding,
1728.ios .router-transition .navbar-current .left.sliding .icon + span,
1729.ios .router-transition .navbar-current.sliding .left,
1730.ios .router-transition .navbar-current.sliding .left .icon + span,
1731.ios .router-transition .navbar-current.sliding > .title,
1732.ios .router-transition .navbar-current.sliding .right {
1733 transition-duration: var(--f7-page-transition-duration);
1734 opacity: 0 !important;
1735 animation: none;
1736}
1737.ios .router-transition .navbar-current.sliding .subnavbar,
1738.ios .router-transition .navbar-current .sliding.subnavbar {
1739 transition-duration: var(--f7-page-transition-duration);
1740 animation: none;
1741 opacity: 1;
1742}
1743.ios .router-transition-forward .navbar-next .left,
1744.ios .router-transition-backward .navbar-previous .left,
1745.ios .router-transition-forward .navbar-next > .title,
1746.ios .router-transition-backward .navbar-previous > .title,
1747.ios .router-transition-forward .navbar-next .right,
1748.ios .router-transition-backward .navbar-previous .right,
1749.ios .router-transition-forward .navbar-next .subnavbar,
1750.ios .router-transition-backward .navbar-previous .subnavbar {
1751 animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
1752}
1753.ios .router-transition-forward .navbar-next .sliding,
1754.ios .router-transition-backward .navbar-previous .sliding,
1755.ios .router-transition-forward .navbar-next .left.sliding .icon + span,
1756.ios .router-transition-backward .navbar-previous .left.sliding .icon + span,
1757.ios .router-transition-forward .navbar-next.sliding .left,
1758.ios .router-transition-backward .navbar-previous.sliding .left,
1759.ios .router-transition-forward .navbar-next.sliding .left .icon + span,
1760.ios .router-transition-backward .navbar-previous.sliding .left .icon + span,
1761.ios .router-transition-forward .navbar-next.sliding > .title,
1762.ios .router-transition-backward .navbar-previous.sliding > .title,
1763.ios .router-transition-forward .navbar-next.sliding .right,
1764.ios .router-transition-backward .navbar-previous.sliding .right,
1765.ios .router-transition-forward .navbar-next.sliding .subnavbar,
1766.ios .router-transition-backward .navbar-previous.sliding .subnavbar {
1767 transition-duration: var(--f7-page-transition-duration);
1768 animation: none;
1769 transform: translate3d(0, 0, 0) !important;
1770 opacity: 1 !important;
1771}
1772.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1773 overflow: visible;
1774}
1775.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1776 animation: ios-navbar-title-large-text-slide-up var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards;
1777}
1778.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1779 animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
1780}
1781.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
1782 animation: ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-scale-out var(--f7-page-transition-duration) forwards;
1783}
1784.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large .title-large-inner {
1785 animation: ios-navbar-title-large-inner-current-to-previous var(--f7-page-transition-duration) forwards;
1786}
1787.ios .router-transition-forward:not(.router-dynamic-navbar-inside) .navbar-next.router-navbar-transition-from-large .left .back span {
1788 animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
1789 transition: none;
1790 transform-origin: right center;
1791}
1792.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1793 overflow: visible;
1794}
1795.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
1796.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1797 animation: ios-navbar-title-large-text-slide-left var(--f7-page-transition-duration) forwards;
1798}
1799.ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1800 animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
1801}
1802.ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text,
1803.ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-inner {
1804 animation: ios-navbar-title-large-text-slide-left-top var(--f7-page-transition-duration) forwards;
1805}
1806.ios .router-transition-forward .navbar-next.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
1807.ios .router-transition-forward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1808 animation: none;
1809 opacity: 0 !important;
1810 transition-duration: 0;
1811}
1812.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large,
1813.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large,
1814.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-text,
1815.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-text,
1816.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-inner,
1817.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1818 animation: none !important;
1819}
1820.ios .router-transition-backward:not(.router-dynamic-navbar-inside) .navbar-current.router-navbar-transition-to-large .left .back span {
1821 animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards;
1822 transition: none;
1823 transform-origin: right center;
1824}
1825.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1826 overflow: visible;
1827 transform: translateX(100%);
1828}
1829.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
1830.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1831 animation: ios-navbar-title-large-text-slide-right var(--f7-page-transition-duration) forwards;
1832}
1833.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1834 animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
1835}
1836.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text,
1837.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-inner {
1838 animation: ios-navbar-title-large-text-slide-right-bottom var(--f7-page-transition-duration) forwards;
1839}
1840.ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1841 opacity: 0;
1842}
1843.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1844 overflow: visible;
1845 opacity: 1;
1846 transform: translateY(0);
1847}
1848.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1849 animation: ios-navbar-title-large-text-slide-down var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards;
1850}
1851.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1852 opacity: 1;
1853 animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
1854}
1855.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
1856 animation: ios-navbar-title-large-text-scale-in var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards;
1857}
1858.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large .title-large-inner {
1859 animation: ios-navbar-title-large-inner-previous-to-current var(--f7-page-transition-duration) forwards;
1860}
1861.ios .router-transition-backward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
1862.ios .router-transition-backward .navbar-previous.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1863 animation: none;
1864 opacity: 0 !important;
1865 transition-duration: 0;
1866}
1867.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large,
1868.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large,
1869.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-text,
1870.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-text,
1871.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-inner,
1872.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1873 animation: none !important;
1874}
1875.view-master-detail .navbar-master.navbar-previous {
1876 pointer-events: auto;
1877}
1878.view-master-detail .navbar-master.navbar-previous .left,
1879.view-master-detail .navbar-master.navbar-previous:not(.navbar-inner-large) .title,
1880.view-master-detail .navbar-master.navbar-previous .right,
1881.view-master-detail .navbar-master.navbar-previous .subnavbar {
1882 opacity: 1;
1883}
1884.ios .view-master-detail.router-transition .navbar-master .left,
1885.ios .view-master-detail.router-transition .navbar-master .left .icon + span,
1886.ios .view-master-detail.router-transition .navbar-master:not(.navbar-inner-large) .title,
1887.ios .view-master-detail.router-transition .navbar-master .right,
1888.ios .view-master-detail.router-transition .navbar-master .subnavbar,
1889.ios .view-master-detail.router-transition .navbar-master .sliding,
1890.ios .view-master-detail.router-transition .navbar-master .fading {
1891 opacity: 1 !important;
1892 transition-duration: 0ms;
1893 transform: none !important;
1894 animation: none !important;
1895}
1896.ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title {
1897 opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
1898 transition-duration: 0ms;
1899 transform: none !important;
1900 animation: none !important;
1901}
1902.ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large,
1903.ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-text,
1904.ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-inner {
1905 transition-duration: 0ms;
1906 animation: none !important;
1907}
1908@keyframes ios-navbar-element-fade-in {
1909 from {
1910 opacity: 0;
1911 }
1912 to {
1913 opacity: 1;
1914 }
1915}
1916@keyframes ios-navbar-element-fade-out {
1917 from {
1918 opacity: 1;
1919 }
1920 to {
1921 opacity: 0;
1922 }
1923}
1924@keyframes ios-navbar-title-large-slide-up {
1925 0% {
1926 transform: translateY(0%);
1927 }
1928 100% {
1929 transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
1930 }
1931}
1932@keyframes ios-navbar-title-large-slide-down {
1933 0% {
1934 transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
1935 }
1936 100% {
1937 transform: translateY(0%);
1938 }
1939}
1940@keyframes ios-navbar-title-large-text-slide-up {
1941 0% {
1942 transform: translateX(0px) translateY(0%) scale(1);
1943 }
1944 100% {
1945 transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5);
1946 }
1947}
1948@keyframes ios-navbar-title-large-text-slide-down {
1949 0% {
1950 transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5);
1951 }
1952 100% {
1953 transform: translateX(0px) translateY(0%) scale(1);
1954 }
1955}
1956@keyframes ios-navbar-title-large-text-slide-left {
1957 0% {
1958 transform: translateX(-200%) scale(1);
1959 }
1960 100% {
1961 transform: translateX(-100%) scale(1);
1962 }
1963}
1964@keyframes ios-navbar-title-large-text-slide-right {
1965 0% {
1966 transform: translateX(-100%) scale(1);
1967 }
1968 100% {
1969 transform: translateX(-200%) scale(1);
1970 }
1971}
1972@keyframes ios-navbar-title-large-text-slide-left-top {
1973 0% {
1974 transform: translateX(-100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
1975 }
1976 100% {
1977 transform: translateX(0%) translateY(0%) scale(1);
1978 }
1979}
1980@keyframes ios-navbar-title-large-text-slide-right-bottom {
1981 0% {
1982 transform: translateX(0%) translateY(0%) scale(1);
1983 }
1984 100% {
1985 transform: translateX(-100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
1986 }
1987}
1988@keyframes ios-navbar-title-large-text-fade-out {
1989 0% {
1990 opacity: 1;
1991 }
1992 80% {
1993 opacity: 0;
1994 }
1995 100% {
1996 opacity: 0;
1997 }
1998}
1999@keyframes ios-navbar-title-large-text-fade-in {
2000 0% {
2001 opacity: 0;
2002 }
2003 20% {
2004 opacity: 0;
2005 }
2006 100% {
2007 opacity: 1;
2008 }
2009}
2010@keyframes ios-navbar-title-large-text-scale-out {
2011 0% {
2012 transform: translateY(0%) scale(1);
2013 }
2014 100% {
2015 transform: translateY(0%) scale(0.5);
2016 }
2017}
2018@keyframes ios-navbar-title-large-text-scale-in {
2019 0% {
2020 transform: translateY(0%) scale(0.5);
2021 }
2022 100% {
2023 transform: translateY(0%) scale(1);
2024 }
2025}
2026@keyframes ios-navbar-back-text-current-to-previous {
2027 0% {
2028 opacity: 1;
2029 transform: translateY(0px) translateX(0px) scale(1);
2030 }
2031 80% {
2032 opacity: 0;
2033 }
2034 100% {
2035 opacity: 0;
2036 transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
2037 }
2038}
2039@keyframes ios-navbar-back-text-next-to-current {
2040 0% {
2041 opacity: 0;
2042 transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
2043 }
2044 20% {
2045 opacity: 0;
2046 }
2047 100% {
2048 opacity: 1;
2049 transform: translateX(0px) translateY(0px) scale(1);
2050 }
2051}
2052@keyframes ios-navbar-title-large-inner-current-to-previous {
2053 0% {
2054 transform: translateX(0%);
2055 opacity: 1;
2056 }
2057 100% {
2058 transform: translateX(100%);
2059 opacity: 0;
2060 }
2061}
2062@keyframes ios-navbar-title-large-inner-previous-to-current {
2063 0% {
2064 transform: translateX(100%);
2065 opacity: 0;
2066 }
2067 100% {
2068 transform: translateX(0%);
2069 opacity: 1;
2070 }
2071}
5d51ea26
DC
2072.md .navbar .material-icons {
2073 width: 24px;
2074}
2075.md .navbar .f7-icons {
2076 width: 28px;
2077}
5309fbda
DC
2078.md .navbar a.link {
2079 padding: 0 16px;
2080 min-width: 48px;
2081}
2082.md .navbar a.link:before {
2083 content: '';
2084 width: 152%;
2085 height: 152%;
2086 position: absolute;
2087 left: -26%;
2088 top: -26%;
2089 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2090 background-repeat: no-repeat;
2091 background-position: center;
2092 background-size: 100% 100%;
2093 opacity: 0;
2094 pointer-events: none;
2095 transition-duration: 600ms;
2096}
2097.md .navbar a.link.active-state:before {
2098 opacity: 1;
2099 transition-duration: 150ms;
2100}
2101.md .navbar a.icon-only {
2102 min-width: 0;
2103 flex-shrink: 0;
2104 width: 56px;
2105}
2106.md .navbar .right {
2107 margin-right: auto;
2108}
2109.md .navbar .right:first-child {
2110 left: var(--f7-safe-area-left);
2111}
2112.md .navbar-inner {
2113 justify-content: flex-start;
2114 overflow: hidden;
2115}
2116.md .navbar-inner-large:not(.navbar-inner-large-collapsed) {
2117 overflow: visible;
2118}
2119.md .page.page-with-subnavbar .navbar-inner {
2120 overflow: visible;
2121}
2122.md .navbar-inner-centered-title {
2123 justify-content: space-between;
2124}
2125.md .navbar-inner-centered-title .right {
2126 margin-right: 0;
2127}
2128.md .navbar-inner-centered-title .title {
2129 text-align: center;
2130}
5d51ea26
DC
2131.aurora .navbar a.icon-only {
2132 margin: 0;
2133 justify-content: center;
2134}
2135.aurora .navbar .left a + a,
2136.aurora .navbar .right a + a {
2137 margin-right: 10px;
2138}
2139.aurora .navbar b {
2140 font-weight: bold;
2141}
2142.aurora .navbar .left {
2143 margin-left: 10px;
2144}
2145.aurora .navbar .right {
2146 margin-right: 10px;
2147}
2148.aurora .navbar .right:first-child {
2149 left: calc(15px + var(--f7-safe-area-left));
2150}
2151.aurora .navbar-inner {
2152 justify-content: space-between;
2153}
2154.aurora .navbar-inner-left-title {
2155 justify-content: flex-start;
2156}
2157.aurora .navbar-inner-left-title .right {
2158 margin-right: auto;
2159}
2160.aurora .navbar-inner-left-title .title {
2161 text-align: left;
2162 margin-left: 10px;
2163}
5309fbda
DC
2164/* === Toolbar === */
2165:root {
2166 /*
2167 --f7-toolbar-bg-color: var(--f7-bars-bg-color);
2168 --f7-toolbar-bg-image: var(--f7-bars-bg-image);
2169 --f7-toolbar-border-color: var(--f7-bars-border-color);
2170 --f7-toolbar-link-color: var(--f7-bars-link-color);
2171 --f7-toolbar-text-color: var(--f7-bars-text-color);
5d51ea26 2172 --f7-tabbar-link-active-color: var(--f7-theme-color);
5309fbda 2173 */
5d51ea26
DC
2174 --f7-tabbar-link-active-bg-color: transparent;
2175 --f7-tabbar-label-text-transform: none;
5309fbda
DC
2176 --f7-toolbar-hide-show-transition-duration: 400ms;
2177}
2178.ios {
2179 --f7-toolbar-height: 44px;
2180 --f7-toolbar-font-size: 17px;
5d51ea26
DC
2181 --f7-toolbar-inner-padding-left: 8px;
2182 --f7-toolbar-inner-padding-right: 8px;
2183 /*
2184 --f7-toolbar-link-height: var(--f7-toolbar-height);
2185 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2186 */
5309fbda
DC
2187 --f7-tabbar-labels-height: 50px;
2188 --f7-tabbar-labels-tablet-height: 56px;
2189 --f7-tabbar-link-inactive-color: #929292;
5309fbda
DC
2190 --f7-toolbar-top-shadow-image: none;
2191 --f7-toolbar-bottom-shadow-image: none;
2192 --f7-tabbar-icon-size: 28px;
2193 --f7-tabbar-link-text-transform: none;
2194 --f7-tabbar-link-font-weight: 400;
2195 --f7-tabbar-link-letter-spacing: 0;
2196 --f7-tabbar-label-font-size: 10px;
2197 --f7-tabbar-label-tablet-font-size: 14px;
5309fbda
DC
2198 --f7-tabbar-label-font-weight: 400;
2199 --f7-tabbar-label-letter-spacing: 0.01;
2200}
2201.md {
2202 --f7-toolbar-height: 48px;
2203 --f7-toolbar-font-size: 14px;
5d51ea26
DC
2204 --f7-toolbar-inner-padding-left: 0px;
2205 --f7-toolbar-inner-padding-right: 0px;
2206 /*
2207 --f7-toolbar-link-height: var(--f7-toolbar-height);
2208 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2209 */
5309fbda
DC
2210 --f7-tabbar-labels-height: 56px;
2211 --f7-tabbar-labels-tablet-height: 56px;
2212 --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
2213 /*
5309fbda
DC
2214 --f7-tabbar-link-active-border-color: var(--f7-theme-color);
2215 */
2216 --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
2217 --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
2218 --f7-tabbar-icon-size: 24px;
2219 --f7-tabbar-link-text-transform: uppercase;
2220 --f7-tabbar-link-font-weight: 500;
2221 --f7-tabbar-link-letter-spacing: 0.03em;
2222 --f7-tabbar-label-font-size: 14px;
2223 --f7-tabbar-label-tablet-font-size: 14px;
5309fbda
DC
2224 --f7-tabbar-label-font-weight: 400;
2225 --f7-tabbar-label-letter-spacing: 0;
2226}
2227.md .theme-dark,
2228.md.theme-dark {
2229 --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2230}
5d51ea26
DC
2231.aurora {
2232 --f7-toolbar-height: 38px;
2233 --f7-toolbar-font-size: 14px;
2234 --f7-toolbar-inner-padding-left: 15px;
2235 --f7-toolbar-inner-padding-right: 15px;
2236 --f7-toolbar-link-height: auto;
2237 --f7-toolbar-link-line-height: inherit;
2238 --f7-tabbar-labels-height: 44px;
2239 --f7-tabbar-labels-tablet-height: 44px;
2240 --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
2241 --f7-tabbar-link-inactive-bg-color: rgba(0, 0, 0, 0.2);
2242 --f7-toolbar-top-shadow-image: none;
2243 --f7-toolbar-bottom-shadow-image: none;
2244 --f7-tabbar-icon-size: 18px;
2245 --f7-tabbar-link-text-transform: none;
2246 --f7-tabbar-link-font-weight: 400;
2247 --f7-tabbar-link-letter-spacing: 0;
2248 --f7-tabbar-label-font-size: 12px;
2249 --f7-tabbar-label-tablet-font-size: 12px;
2250 --f7-tabbar-label-font-weight: 500;
2251 --f7-tabbar-label-letter-spacing: 0.01;
2252}
2253.aurora .theme-dark,
2254.aurora.theme-dark {
2255 --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
2256}
5309fbda
DC
2257.toolbar {
2258 width: 100%;
2259 position: relative;
2260 margin: 0;
2261 transform: translate3d(0, 0, 0);
2262 -webkit-backface-visibility: hidden;
2263 backface-visibility: hidden;
2264 z-index: 500;
2265 box-sizing: border-box;
2266 left: 0;
2267 height: var(--f7-toolbar-height);
2268 background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
2269 background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
2270 color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
2271 font-size: var(--f7-toolbar-font-size);
2272}
2273.toolbar b {
2274 font-weight: 600;
2275}
2276.toolbar a {
2277 color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2278 box-sizing: border-box;
2279 flex-shrink: 1;
2280 position: relative;
2281 white-space: nowrap;
2282 text-overflow: ellipsis;
2283}
2284.toolbar a.link {
2285 display: flex;
5d51ea26
DC
2286 line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
2287 height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
5309fbda
DC
2288}
2289.toolbar i.icon {
2290 display: block;
2291}
2292.toolbar:after,
2293.toolbar:before {
2294 -webkit-backface-visibility: hidden;
2295 backface-visibility: hidden;
2296}
2297.views > .toolbar,
2298.view > .toolbar,
2299.page > .toolbar {
2300 position: absolute;
2301}
2302.toolbar-top,
2303.ios .toolbar-top-ios,
5d51ea26
DC
2304.md .toolbar-top-md,
2305.aurora .toolbar-top-aurora {
5309fbda
DC
2306 top: 0;
2307}
2308.toolbar-top .tab-link-highlight,
2309.ios .toolbar-top-ios .tab-link-highlight,
5d51ea26
DC
2310.md .toolbar-top-md .tab-link-highlight,
2311.aurora .toolbar-top-aurora .tab-link-highlight {
5309fbda
DC
2312 bottom: 0;
2313}
2314.toolbar-top.no-hairline:after,
2315.ios .toolbar-top-ios.no-hairline:after,
2316.md .toolbar-top-md.no-hairline:after,
5d51ea26 2317.aurora .toolbar-top-aurora.no-hairline:after,
5309fbda
DC
2318.toolbar-top.no-border:after,
2319.ios .toolbar-top-ios.no-border:after,
5d51ea26
DC
2320.md .toolbar-top-md.no-border:after,
2321.aurora .toolbar-top-aurora.no-border:after {
5309fbda
DC
2322 display: none !important;
2323}
2324.toolbar-top.no-shadow:before,
2325.ios .toolbar-top-ios.no-shadow:before,
2326.md .toolbar-top-md.no-shadow:before,
5d51ea26 2327.aurora .toolbar-top-aurora.no-shadow:before,
5309fbda
DC
2328.toolbar-top.toolbar-hidden:before,
2329.ios .toolbar-top-ios.toolbar-hidden:before,
5d51ea26
DC
2330.md .toolbar-top-md.toolbar-hidden:before,
2331.aurora .toolbar-top-aurora.toolbar-hidden:before {
5309fbda
DC
2332 display: none !important;
2333}
2334.toolbar-top:after,
2335.ios .toolbar-top-ios:after,
2336.md .toolbar-top-md:after,
5d51ea26 2337.aurora .toolbar-top-aurora:after,
5309fbda
DC
2338.toolbar-top:before,
2339.ios .toolbar-top-ios:before,
5d51ea26
DC
2340.md .toolbar-top-md:before,
2341.aurora .toolbar-top-aurora:before {
5309fbda
DC
2342 -webkit-backface-visibility: hidden;
2343 backface-visibility: hidden;
2344}
2345.toolbar-top:after,
2346.ios .toolbar-top-ios:after,
5d51ea26
DC
2347.md .toolbar-top-md:after,
2348.aurora .toolbar-top-aurora:after {
5309fbda
DC
2349 content: '';
2350 position: absolute;
2351 background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2352 display: block;
2353 z-index: 15;
2354 top: auto;
2355 right: auto;
2356 bottom: 0;
2357 left: 0;
2358 height: 1px;
2359 width: 100%;
2360 transform-origin: 50% 100%;
2361 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2362}
2363.toolbar-top:before,
2364.ios .toolbar-top-ios:before,
5d51ea26
DC
2365.md .toolbar-top-md:before,
2366.aurora .toolbar-top-aurora:before {
5309fbda
DC
2367 content: '';
2368 position: absolute;
2369 right: 0;
2370 width: 100%;
2371 top: 100%;
2372 bottom: auto;
2373 height: 8px;
2374 pointer-events: none;
5d51ea26 2375 background: var(--f7-toolbar-top-shadow-image);
5309fbda
DC
2376}
2377.toolbar-bottom,
2378.ios .toolbar-bottom-ios,
5d51ea26
DC
2379.md .toolbar-bottom-md,
2380.aurora .toolbar-bottom-aurora {
5309fbda
DC
2381 bottom: 0;
2382 height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
2383}
2384.toolbar-bottom .tab-link-highlight,
2385.ios .toolbar-bottom-ios .tab-link-highlight,
5d51ea26
DC
2386.md .toolbar-bottom-md .tab-link-highlight,
2387.aurora .toolbar-bottom-aurora .tab-link-highlight {
5309fbda
DC
2388 top: 0;
2389}
2390.toolbar-bottom .toolbar-inner,
2391.ios .toolbar-bottom-ios .toolbar-inner,
5d51ea26
DC
2392.md .toolbar-bottom-md .toolbar-inner,
2393.aurora .toolbar-bottom-aurora .toolbar-inner {
5309fbda
DC
2394 height: auto;
2395 top: 0;
2396 bottom: var(--f7-safe-area-bottom);
2397}
2398.toolbar-bottom.no-hairline:before,
2399.ios .toolbar-bottom-ios.no-hairline:before,
2400.md .toolbar-bottom-md.no-hairline:before,
5d51ea26 2401.aurora .toolbar-bottom-aurora.no-hairline:before,
5309fbda
DC
2402.toolbar-bottom.no-border:before,
2403.ios .toolbar-bottom-ios.no-border:before,
5d51ea26
DC
2404.md .toolbar-bottom-md.no-border:before,
2405.aurora .toolbar-bottom-aurora.no-border:before {
5309fbda
DC
2406 display: none !important;
2407}
2408.toolbar-bottom.no-shadow:after,
2409.ios .toolbar-bottom-ios.no-shadow:after,
2410.md .toolbar-bottom-md.no-shadow:after,
5d51ea26 2411.aurora .toolbar-bottom-aurora.no-shadow:after,
5309fbda
DC
2412.toolbar-bottom.toolbar-hidden:after,
2413.ios .toolbar-bottom-ios.toolbar-hidden:after,
5d51ea26
DC
2414.md .toolbar-bottom-md.toolbar-hidden:after,
2415.aurora .toolbar-bottom-aurora.toolbar-hidden:after {
5309fbda
DC
2416 display: none !important;
2417}
2418.toolbar-bottom:before,
2419.ios .toolbar-bottom-ios:before,
5d51ea26
DC
2420.md .toolbar-bottom-md:before,
2421.aurora .toolbar-bottom-aurora:before {
5309fbda
DC
2422 content: '';
2423 position: absolute;
2424 background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2425 display: block;
2426 z-index: 15;
2427 top: 0;
2428 right: auto;
2429 bottom: auto;
2430 left: 0;
2431 height: 1px;
2432 width: 100%;
2433 transform-origin: 50% 0%;
2434 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2435}
2436.toolbar-bottom:after,
2437.ios .toolbar-bottom-ios:after,
5d51ea26
DC
2438.md .toolbar-bottom-md:after,
2439.aurora .toolbar-bottom-aurora:after {
5309fbda
DC
2440 content: '';
2441 position: absolute;
2442 right: 0;
2443 width: 100%;
2444 bottom: 100%;
2445 height: 8px;
2446 top: auto;
2447 pointer-events: none;
5d51ea26 2448 background: var(--f7-toolbar-bottom-shadow-image);
5309fbda
DC
2449}
2450.toolbar-inner {
2451 position: absolute;
2452 left: 0;
2453 top: 0;
2454 width: 100%;
2455 height: 100%;
2456 display: flex;
2457 justify-content: space-between;
2458 box-sizing: border-box;
2459 align-items: center;
2460 align-content: center;
2461 overflow: hidden;
5d51ea26 2462 padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));
5309fbda
DC
2463}
2464.views > .tabbar,
2465.views > .tabbar-labels {
2466 z-index: 5001;
2467}
2468.tabbar a,
2469.tabbar-labels a {
2470 color: var(--f7-tabbar-link-inactive-color);
2471}
5d51ea26
DC
2472.tabbar a.tab-link:not(.tab-link-active),
2473.tabbar-labels a.tab-link:not(.tab-link-active) {
2474 background-color: var(--f7-tabbar-link-inactive-bg-color, transparent);
2475}
5309fbda
DC
2476.tabbar a.link,
2477.tabbar-labels a.link {
2478 line-height: 1.4;
2479}
2480.tabbar a.tab-link,
2481.tabbar-labels a.tab-link,
2482.tabbar a.link,
2483.tabbar-labels a.link {
2484 height: 100%;
2485 width: 100%;
2486 box-sizing: border-box;
2487 display: flex;
2488 justify-content: center;
2489 align-items: center;
2490 flex-direction: column;
2491 text-transform: var(--f7-tabbar-link-text-transform);
2492 font-weight: var(--f7-tabbar-link-font-weight);
2493 letter-spacing: var(--f7-tabbar-link-letter-spacing);
2494 overflow: hidden;
2495}
2496.tabbar .tab-link-active,
2497.tabbar-labels .tab-link-active {
2498 color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
5d51ea26 2499 background-color: var(--f7-tabbar-link-active-bg-color, transparent);
5309fbda
DC
2500}
2501.tabbar i.icon,
2502.tabbar-labels i.icon {
2503 font-size: var(--f7-tabbar-icon-size);
2504 height: var(--f7-tabbar-icon-size);
2505 line-height: var(--f7-tabbar-icon-size);
2506}
2507.tabbar-labels {
2508 --f7-toolbar-height: var(--f7-tabbar-labels-height);
2509}
2510.tabbar-labels a.tab-link,
2511.tabbar-labels a.link {
2512 height: 100%;
2513 justify-content: space-between;
2514 align-items: center;
2515}
2516.tabbar-labels .tabbar-label {
2517 display: block;
2518 line-height: 1;
2519 margin: 0;
2520 position: relative;
2521 text-overflow: ellipsis;
2522 white-space: nowrap;
2523 font-size: var(--f7-tabbar-label-font-size);
2524 text-transform: var(--f7-tabbar-label-text-transform);
2525 font-weight: var(--f7-tabbar-label-font-weight);
2526 letter-spacing: var(--f7-tabbar-label-letter-spacing);
2527}
2528@media (min-width: 768px) {
2529 :root {
2530 --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
2531 --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
2532 }
2533}
2534.tabbar-scrollable .toolbar-inner {
5d51ea26 2535 justify-content: flex-start;
5309fbda
DC
2536 will-change: scroll-position;
2537 overflow: auto;
2538 -webkit-overflow-scrolling: touch;
2539}
2540.tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
2541 display: none !important;
2542 width: 0 !important;
2543 height: 0 !important;
2544 -webkit-appearance: none;
2545 opacity: 0 !important;
2546}
2547.tabbar-scrollable a.tab-link,
2548.tabbar-scrollable a.link {
2549 width: auto;
2550 flex-shrink: 0;
2551}
2552.toolbar-transitioning,
2553.navbar-transitioning + .toolbar,
2554.navbar-transitioning ~ * .toolbar {
2555 transition-duration: var(--f7-toolbar-hide-show-transition-duration);
2556}
5d51ea26
DC
2557.toolbar-bottom ~ *,
2558.ios .toolbar-bottom-ios ~ *,
2559.md .toolbar-bottom-md ~ *,
2560.aurora .toolbar-bottom-aurora ~ * {
2561 --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
2562}
2563.toolbar-bottom.tabbar-labels ~ *,
2564.ios .toolbar-bottom-ios.tabbar-labels ~ *,
2565.md .toolbar-bottom-md.tabbar-labels ~ *,
2566.aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
2567 --f7-page-toolbar-bottom-offset: var(--f7-tabbar-labels-height);
2568}
5309fbda
DC
2569.toolbar-bottom.toolbar-hidden,
2570.ios .toolbar-bottom-ios.toolbar-hidden,
5d51ea26
DC
2571.md .toolbar-bottom-md.toolbar-hidden,
2572.aurora .toolbar-bottom-aurora.toolbar-hidden {
5309fbda
DC
2573 transform: translate3d(0, 100%, 0);
2574}
5d51ea26
DC
2575.toolbar-top ~ *,
2576.ios .toolbar-top-ios ~ *,
2577.md .toolbar-top-md ~ *,
2578.aurora .toolbar-top-aurora ~ * {
2579 --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
2580}
2581.toolbar-top.tabbar-labels ~ *,
2582.ios .toolbar-top-ios.tabbar-labels ~ *,
2583.md .toolbar-top-md.tabbar-labels ~ *,
2584.aurora .toolbar-top-aurora.tabbar-labels ~ * {
2585 --f7-page-toolbar-top-offset: var(--f7-tabbar-labels-height);
5309fbda
DC
2586}
2587.toolbar-top.toolbar-hidden,
2588.ios .toolbar-top-ios.toolbar-hidden,
5d51ea26
DC
2589.md .toolbar-top-md.toolbar-hidden,
2590.aurora .toolbar-top-aurora.toolbar-hidden {
5309fbda
DC
2591 transform: translate3d(0, -100%, 0);
2592}
5309fbda
DC
2593.navbar ~ .toolbar-top,
2594.ios .navbar ~ .toolbar-top-ios,
2595.md .navbar ~ .toolbar-top-md,
5d51ea26 2596.aurora .navbar ~ .toolbar-top-aurora,
5309fbda
DC
2597.navbar ~ * .toolbar-top,
2598.ios .navbar ~ * .toolbar-top-ios,
2599.md .navbar ~ * .toolbar-top-md,
5d51ea26 2600.aurora .navbar ~ * .toolbar-top-aurora,
5309fbda
DC
2601.navbar ~ .page:not(.no-navbar) .toolbar-top,
2602.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
5d51ea26
DC
2603.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
2604.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
5309fbda
DC
2605 top: var(--f7-navbar-height);
2606}
5309fbda
DC
2607.navbar ~ .toolbar-top.toolbar-hidden,
2608.ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
2609.md .navbar ~ .toolbar-top-md.toolbar-hidden,
5d51ea26 2610.aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden,
5309fbda
DC
2611.navbar ~ * .toolbar-top.toolbar-hidden,
2612.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
2613.md .navbar ~ * .toolbar-top-md.toolbar-hidden,
5d51ea26 2614.aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden,
5309fbda
DC
2615.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
2616.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
5d51ea26
DC
2617.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
2618.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
5309fbda
DC
2619 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height))), 0);
2620}
2621.navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
2622.ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2623.md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
5d51ea26 2624.aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
5309fbda
DC
2625.navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
2626.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2627.md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
5d51ea26 2628.aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
5309fbda
DC
2629.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
2630.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
5d51ea26
DC
2631.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels,
2632.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
5309fbda
DC
2633 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height))), 0);
2634}
2635.navbar-hidden + .toolbar-top:not(.toolbar-hidden),
2636.ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
2637.md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
5d51ea26 2638.aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
5309fbda
DC
2639.navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
2640.ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
5d51ea26
DC
2641.md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
2642.aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
5309fbda
DC
2643 transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
2644}
2645.navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
2646.ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
2647.md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
2648.navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
2649.ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
5d51ea26
DC
2650.md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
2651.aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
5309fbda
DC
2652 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height))), 0);
2653}
2654.ios .toolbar a.icon-only {
2655 min-height: var(--f7-toolbar-height);
2656 display: flex;
2657 justify-content: center;
2658 align-items: center;
2659 margin: 0;
2660 min-width: 44px;
2661}
5309fbda
DC
2662.ios .tabbar-labels a.tab-link,
2663.ios .tabbar-labels a.link {
2664 padding-top: 4px;
2665 padding-bottom: 4px;
2666}
2667.ios .tabbar-labels a.tab-link i + span,
2668.ios .tabbar-labels a.link i + span {
2669 margin: 0;
2670}
2671@media (min-width: 768px) {
2672 .ios .tabbar .toolbar-inner,
2673 .ios .tabbar-labels .toolbar-inner {
2674 justify-content: center;
2675 }
2676 .ios .tabbar a.tab-link,
2677 .ios .tabbar-labels a.tab-link,
2678 .ios .tabbar a.link,
2679 .ios .tabbar-labels a.link {
2680 width: auto;
2681 min-width: 105px;
2682 }
2683}
2684.ios .tabbar-scrollable .toolbar-inner {
2685 justify-content: flex-start;
2686}
2687.ios .tabbar-scrollable a.tab-link,
2688.ios .tabbar-scrollable a.link {
2689 padding: 0 8px;
2690}
2691.md .toolbar a.link {
2692 justify-content: center;
2693 padding: 0 16px;
2694 min-width: 48px;
2695}
2696.md .toolbar a.link:before {
2697 content: '';
2698 width: 152%;
2699 height: 152%;
2700 position: absolute;
2701 left: -26%;
2702 top: -26%;
2703 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2704 background-repeat: no-repeat;
2705 background-position: center;
2706 background-size: 100% 100%;
2707 opacity: 0;
2708 pointer-events: none;
2709 transition-duration: 600ms;
2710}
2711.md .toolbar a.link.active-state:before {
2712 opacity: 1;
2713 transition-duration: 150ms;
2714}
2715.md .toolbar a.icon-only {
2716 min-width: 0;
2717 flex-shrink: 0;
2718}
5309fbda
DC
2719.md .tabbar a.tab-link,
2720.md .tabbar-labels a.tab-link,
2721.md .tabbar a.link,
2722.md .tabbar-labels a.link {
2723 padding-left: 0;
2724 padding-right: 0;
2725}
5d51ea26
DC
2726.md .tabbar a.icon-only,
2727.md .tabbar-labels a.icon-only {
2728 flex-shrink: initial;
2729}
5309fbda
DC
2730.md .tabbar a.tab-link,
2731.md .tabbar-labels a.tab-link {
2732 transition-duration: 300ms;
2733 overflow: hidden;
2734 position: relative;
2735}
2736.md .tabbar .tab-link-highlight,
2737.md .tabbar-labels .tab-link-highlight {
2738 position: absolute;
2739 left: 0;
2740 height: 2px;
2741 background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
2742 transition-duration: 300ms;
2743 right: 0;
2744}
2745.md .tabbar-labels a.tab-link,
2746.md .tabbar-labels a.link {
2747 padding-top: 7px;
2748 padding-bottom: 7px;
2749}
2750.md .tabbar-label {
2751 max-width: 100%;
2752 overflow: hidden;
2753 line-height: 1.2;
2754}
2755.md .tabbar-scrollable .toolbar-inner {
2756 overflow: auto;
5309fbda
DC
2757}
2758.md .tabbar-scrollable a.tab-link,
2759.md .tabbar-scrollable a.link {
2760 padding: 0 16px;
2761}
5d51ea26
DC
2762.aurora .toolbar a.icon-only {
2763 min-height: var(--f7-toolbar-height);
2764 display: flex;
2765 justify-content: center;
2766 align-items: center;
2767 margin: 0;
2768}
2769.aurora .tabbar .toolbar-inner,
2770.aurora .tabbar-labels .toolbar-inner {
2771 padding-left: 0;
2772 padding-right: 0;
2773}
2774.aurora .tabbar a.tab-link,
2775.aurora .tabbar-labels a.tab-link,
2776.aurora .tabbar a.link,
2777.aurora .tabbar-labels a.link {
2778 transition-duration: 200ms;
2779}
2780.aurora .tabbar-labels a.tab-link,
2781.aurora .tabbar-labels a.link {
2782 padding-top: 5px;
2783 padding-bottom: 5px;
2784}
2785.aurora .tabbar-labels a.tab-link i + span,
2786.aurora .tabbar-labels a.link i + span {
2787 margin: 0;
2788}
2789.aurora .tabbar-scrollable .toolbar-inner {
2790 justify-content: flex-start;
2791}
2792.aurora .tabbar-scrollable a.tab-link,
2793.aurora .tabbar-scrollable a.link {
2794 padding: 0 15px;
2795}
5309fbda
DC
2796/* === Subnavbar === */
2797:root {
2798 /*
2799 --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
2800 --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
2801 --f7-subnavbar-border-color: var(--f7-bars-border-color);
2802 --f7-subnavbar-link-color: var(--f7-bars-link-color);
2803 --f7-subnavbar-text-color: var(--f7-bars-text-color);
2804 */
5d51ea26 2805 --f7-subnavbar-title-line-height: 1.2;
5309fbda
DC
2806}
2807.ios {
2808 --f7-subnavbar-height: 44px;
2809 --f7-subnavbar-inner-padding-left: 8px;
2810 --f7-subnavbar-inner-padding-right: 8px;
2811 --f7-subnavbar-title-font-size: 34px;
2812 --f7-subnavbar-title-font-weight: 700;
5309fbda
DC
2813 --f7-subnavbar-title-letter-spacing: -0.03em;
2814 --f7-subnavbar-title-margin-left: 7px;
5d51ea26
DC
2815 --f7-subnavbar-shadow-image: none;
2816 /*
2817 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
2818 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
2819 */
5309fbda
DC
2820}
2821.md {
2822 --f7-subnavbar-height: 48px;
2823 --f7-subnavbar-inner-padding-left: 16px;
2824 --f7-subnavbar-inner-padding-right: 16px;
2825 --f7-subnavbar-title-font-size: 20px;
2826 --f7-subnavbar-title-font-weight: 500;
5309fbda
DC
2827 --f7-subnavbar-title-letter-spacing: 0;
2828 --f7-subnavbar-title-margin-left: 0px;
5d51ea26
DC
2829 --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
2830 /*
2831 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
2832 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
2833 */
2834}
2835.aurora {
2836 --f7-subnavbar-height: 38px;
2837 --f7-subnavbar-inner-padding-left: 15px;
2838 --f7-subnavbar-inner-padding-right: 15px;
2839 --f7-subnavbar-title-font-size: 26px;
2840 --f7-subnavbar-title-font-weight: bold;
2841 --f7-subnavbar-title-letter-spacing: -0.03em;
2842 --f7-subnavbar-title-margin-left: 0px;
2843 --f7-subnavbar-shadow-image: none;
2844 --f7-subnavbar-link-height: auto;
2845 --f7-subnavbar-link-line-height: inherit;
5309fbda
DC
2846}
2847.subnavbar {
2848 width: 100%;
2849 position: absolute;
2850 left: 0;
2851 top: 0;
2852 z-index: 500;
2853 box-sizing: border-box;
2854 display: flex;
2855 justify-content: space-between;
2856 align-items: center;
2857 background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
2858 background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
2859 color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
2860}
2861.subnavbar .title {
2862 position: relative;
2863 overflow: hidden;
2864 text-overflow: ellpsis;
2865 white-space: nowrap;
2866 font-size: var(--f7-subnavbar-title-font-size);
2867 font-weight: var(--f7-subnavbar-title-font-weight);
2868 text-align: left;
2869 display: inline-block;
2870 line-height: var(--f7-subnavbar-title-line-height);
2871 letter-spacing: var(--f7-subnavbar-title-letter-spacing);
2872 margin-right: var(--f7-subnavbar-title-margin-left);
2873}
2874.subnavbar .left,
2875.subnavbar .right {
2876 flex-shrink: 0;
2877 display: flex;
2878 justify-content: flex-start;
2879 align-items: center;
2880}
2881.subnavbar .right:first-child {
2882 position: absolute;
2883 height: 100%;
2884}
2885.subnavbar a {
2886 color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2887}
2888.subnavbar a.link {
5d51ea26
DC
2889 line-height: var(--f7-subnavbar-link-line-height, var(--f7-subnavbar-height));
2890 height: var(--f7-subnavbar-link-height, var(--f7-subnavbar-height));
5309fbda
DC
2891}
2892.subnavbar a.icon-only {
2893 min-width: var(--f7-subnavbar-height);
2894}
2895.subnavbar.no-hairline:after,
2896.subnavbar.no-border:after {
2897 display: none !important;
2898}
2899.subnavbar.no-shadow:before,
2900.subnavbar.navbar-hidden:before {
2901 display: none !important;
2902}
2903.subnavbar:after,
2904.subnavbar:before {
2905 -webkit-backface-visibility: hidden;
2906 backface-visibility: hidden;
2907}
2908.subnavbar:after {
2909 content: '';
2910 position: absolute;
5d51ea26 2911 background-color: var(--f7-subnavbar-border-color, var(--f7-bars-border-color));
5309fbda
DC
2912 display: block;
2913 z-index: 15;
2914 top: auto;
2915 right: auto;
2916 bottom: 0;
2917 left: 0;
2918 height: 1px;
2919 width: 100%;
2920 transform-origin: 50% 100%;
2921 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2922}
2923.subnavbar:before {
2924 content: '';
2925 position: absolute;
2926 right: 0;
2927 width: 100%;
2928 top: 100%;
2929 bottom: auto;
2930 height: 8px;
2931 pointer-events: none;
5d51ea26 2932 background: var(--f7-subnavbar-shadow-image);
5309fbda
DC
2933}
2934.subnavbar-inner {
2935 width: 100%;
2936 height: 100%;
2937 display: flex;
2938 align-items: center;
2939 box-sizing: border-box;
2940 justify-content: space-between;
2941 overflow: hidden;
2942 padding: 0 calc(var(--f7-subnavbar-inner-padding-left) + var(--f7-safe-area-right)) 0 calc(var(--f7-subnavbar-inner-padding-right) + var(--f7-safe-area-left));
2943}
2944.subnavbar-inner.stacked {
2945 display: none;
2946}
2947.navbar .subnavbar {
2948 top: 100%;
2949}
2950.views > .subnavbar,
2951.view > .subnavbar,
2952.page > .subnavbar {
2953 position: absolute;
2954}
2955.navbar ~ * .subnavbar,
2956.page-with-subnavbar .navbar ~ .subnavbar,
2957.page-with-subnavbar .navbar ~ * .subnavbar,
2958.navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
2959.navbar ~ .subnavbar {
2960 top: var(--f7-navbar-height);
2961}
2962.navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
2963.page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
2964.page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar {
2965 top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
2966 transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2967}
2968.navbar .title-large ~ .subnavbar {
2969 top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
2970 transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2971}
5d51ea26
DC
2972.page-with-subnavbar,
2973.subnavbar ~ * {
2974 --f7-page-subnavbar-offset: var(--f7-subnavbar-height);
5309fbda
DC
2975}
2976.ios .subnavbar {
2977 height: calc(var(--f7-subnavbar-height) + 1px);
2978 margin-top: -1px;
2979 padding-top: 1px;
2980}
2981.ios .subnavbar .title {
2982 align-self: flex-start;
2983 flex-shrink: 10;
2984}
2985.ios .subnavbar .left a + a,
2986.ios .subnavbar .right a + a {
2987 margin-right: 15px;
2988}
2989.ios .subnavbar .left {
2990 margin-left: 10px;
2991}
2992.ios .subnavbar .right {
2993 margin-right: 10px;
2994}
2995.ios .subnavbar .right:first-child {
2996 left: 8px;
2997}
2998.ios .subnavbar a.link {
2999 justify-content: flex-start;
3000}
3001.ios .subnavbar a.icon-only {
3002 justify-content: center;
3003 margin: 0;
3004}
3005.md .subnavbar {
3006 height: var(--f7-subnavbar-height);
3007}
3008.md .subnavbar .right {
3009 margin-right: auto;
3010}
3011.md .subnavbar .right:first-child {
3012 left: 16px;
3013}
3014.md .subnavbar a.link {
3015 justify-content: center;
3016 padding: 0 16px;
3017}
3018.md .subnavbar a.link:before {
3019 content: '';
3020 width: 152%;
3021 height: 152%;
3022 position: absolute;
3023 left: -26%;
3024 top: -26%;
3025 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
3026 background-repeat: no-repeat;
3027 background-position: center;
3028 background-size: 100% 100%;
3029 opacity: 0;
3030 pointer-events: none;
3031 transition-duration: 600ms;
3032}
3033.md .subnavbar a.link.active-state:before {
3034 opacity: 1;
3035 transition-duration: 150ms;
3036}
3037.md .subnavbar a.icon-only {
3038 flex-shrink: 0;
3039}
3040.md .subnavbar-inner > a.link:first-child {
3041 margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
3042}
3043.md .subnavbar-inner > a.link:last-child {
3044 margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
3045}
5d51ea26
DC
3046.aurora .subnavbar {
3047 height: calc(var(--f7-subnavbar-height) + 1px);
3048 margin-top: -1px;
3049 padding-top: 1px;
3050}
3051.aurora .subnavbar .title {
3052 align-self: flex-start;
3053 flex-shrink: 10;
3054}
3055.aurora .subnavbar .left a + a,
3056.aurora .subnavbar .right a + a {
3057 margin-right: 10px;
3058}
3059.aurora .subnavbar .left {
3060 margin-left: 10px;
3061}
3062.aurora .subnavbar .right {
3063 margin-right: 10px;
3064}
3065.aurora .subnavbar .right:first-child {
3066 left: 15px;
3067}
3068.aurora .subnavbar a.link {
3069 justify-content: flex-start;
3070}
3071.aurora .subnavbar a.icon-only {
3072 justify-content: center;
3073 margin: 0;
3074}
5309fbda
DC
3075/* === Content Block === */
3076:root {
3077 --f7-block-font-size: inherit;
3078 --f7-block-strong-bg-color: #fff;
3079 --f7-block-title-font-size: inherit;
3080 --f7-block-header-margin: 10px;
3081 --f7-block-footer-margin: 10px;
3082 --f7-block-header-font-size: 14px;
3083 --f7-block-footer-font-size: 14px;
3084 --f7-block-title-white-space: nowrap;
3085 --f7-block-title-medium-text-color: #000;
3086 --f7-block-title-medium-text-transform: none;
3087 --f7-block-title-large-text-color: #000;
3088 --f7-block-title-large-text-transform: none;
3089}
3090:root .theme-dark,
3091:root.theme-dark {
5d51ea26 3092 --f7-block-strong-border-color: #282829;
5309fbda
DC
3093 --f7-block-title-medium-text-color: #fff;
3094 --f7-block-title-large-text-color: #fff;
5d51ea26 3095 --f7-block-strong-bg-color: #1c1c1d;
5309fbda
DC
3096}
3097.ios {
3098 --f7-block-text-color: #6d6d72;
3099 --f7-block-padding-horizontal: 15px;
3100 --f7-block-padding-vertical: 15px;
3101 --f7-block-margin-vertical: 35px;
3102 --f7-block-strong-text-color: #000;
3103 --f7-block-strong-border-color: #c8c7cc;
3104 --f7-block-title-text-transform: uppercase;
3105 --f7-block-title-text-color: #6d6d72;
3106 --f7-block-title-font-weight: 400;
3107 --f7-block-title-line-height: 17px;
3108 --f7-block-title-margin-bottom: 10px;
3109 --f7-block-title-medium-font-size: 22px;
3110 --f7-block-title-medium-font-weight: bold;
3111 --f7-block-title-medium-line-height: 1.4;
3112 --f7-block-title-large-font-size: 29px;
3113 --f7-block-title-large-font-weight: bold;
3114 --f7-block-title-large-line-height: 1.3;
3115 --f7-block-inset-side-margin: 15px;
3116 --f7-block-inset-border-radius: 7px;
3117 --f7-block-header-text-color: #8f8f94;
3118 --f7-block-footer-text-color: #8f8f94;
3119}
3120.ios .theme-dark,
3121.ios.theme-dark {
5309fbda
DC
3122 --f7-block-title-text-color: #8E8E93;
3123 --f7-block-header-text-color: #8E8E93;
3124 --f7-block-footer-text-color: #8E8E93;
5309fbda
DC
3125 --f7-block-strong-text-color: #fff;
3126}
3127.md {
3128 --f7-block-text-color: inherit;
3129 --f7-block-padding-horizontal: 16px;
3130 --f7-block-padding-vertical: 16px;
3131 --f7-block-margin-vertical: 32px;
3132 --f7-block-strong-text-color: inherit;
3133 --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3134 --f7-block-title-text-transform: none;
3135 --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
3136 --f7-block-title-font-weight: 500;
3137 --f7-block-title-line-height: 16px;
3138 --f7-block-title-margin-bottom: 16px;
3139 --f7-block-title-medium-font-size: 24px;
3140 --f7-block-title-medium-font-weight: 500;
3141 --f7-block-title-medium-line-height: 1.3;
3142 --f7-block-title-large-font-size: 34px;
3143 --f7-block-title-large-font-weight: 500;
3144 --f7-block-title-large-line-height: 1.2;
3145 --f7-block-inset-side-margin: 16px;
3146 --f7-block-inset-border-radius: 4px;
3147 --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
3148 --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
3149}
3150.md .theme-dark,
3151.md.theme-dark {
5309fbda
DC
3152 --f7-block-title-text-color: #fff;
3153 --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
3154 --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
5309fbda 3155}
5d51ea26
DC
3156.aurora {
3157 --f7-block-text-color: inherit;
3158 --f7-block-padding-horizontal: 15px;
3159 --f7-block-padding-vertical: 15px;
3160 --f7-block-margin-vertical: 15px;
3161 --f7-block-strong-text-color: inherit;
3162 --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3163 --f7-block-title-text-transform: none;
3164 --f7-block-title-text-color: rgba(0, 0, 0, 0.7);
3165 --f7-block-title-font-weight: 600;
3166 --f7-block-title-line-height: 1.5;
3167 --f7-block-title-margin-bottom: 5px;
3168 --f7-block-title-medium-font-size: 20px;
3169 --f7-block-title-medium-font-weight: 600;
3170 --f7-block-title-medium-line-height: 1.4;
3171 --f7-block-title-large-font-size: 28px;
3172 --f7-block-title-large-font-weight: bold;
3173 --f7-block-title-large-line-height: 1.3;
3174 --f7-block-inset-side-margin: 15px;
3175 --f7-block-inset-border-radius: 4px;
3176 --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
3177 --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
3178}
3179.aurora .theme-dark,
3180.aurora.theme-dark {
3181 --f7-block-title-text-color: #fff;
3182 --f7-block-header-text-color: rgba(255, 255, 255, 0.52);
3183 --f7-block-footer-text-color: rgba(255, 255, 255, 0.52);
3184 --f7-block-strong-text-color: #fff;
3185}
3186.block {
3187 box-sizing: border-box;
5309fbda
DC
3188 position: relative;
3189 z-index: 1;
3190 color: var(--f7-block-text-color);
3191 margin: var(--f7-block-margin-vertical) 0;
3192 padding-top: 0;
3193 padding-bottom: 0;
3194 padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3195 padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3196 font-size: var(--f7-block-font-size);
3197}
3198.block.no-hairlines:before,
3199.block.no-hairlines ul:before,
3200.md .block.no-hairlines-md:before,
3201.md .block.no-hairlines-md ul:before,
3202.ios .block.no-hairlines-ios:before,
5d51ea26
DC
3203.ios .block.no-hairlines-ios ul:before,
3204.aurora .block.no-hairlines-aurora:before,
3205.aurora .block.no-hairlines-aurora ul:before {
5309fbda
DC
3206 display: none !important;
3207}
3208.block.no-hairlines:after,
3209.block.no-hairlines ul:after,
3210.md .block.no-hairlines-md:after,
3211.md .block.no-hairlines-md ul:after,
3212.ios .block.no-hairlines-ios:after,
5d51ea26
DC
3213.ios .block.no-hairlines-ios ul:after,
3214.aurora .block.no-hairlines-aurora:after,
3215.aurora .block.no-hairlines-aurora ul:after {
5309fbda
DC
3216 display: none !important;
3217}
3218.block.no-hairline-top:before,
3219.block.no-hairline-top ul:before,
3220.md .block.no-hairline-top-md:before,
3221.md .block.no-hairline-top-md ul:before,
3222.ios .block.no-hairline-top-ios:before,
5d51ea26
DC
3223.ios .block.no-hairline-top-ios ul:before,
3224.aurora .block.no-hairline-top-aurora:before,
3225.aurora .block.no-hairline-top-aurora ul:before {
5309fbda
DC
3226 display: none !important;
3227}
3228.block.no-hairline-bottom:after,
3229.block.no-hairline-bottom ul:after,
3230.md .block.no-hairline-bottom-md:after,
3231.md .block.no-hairline-bottom-md ul:after,
3232.ios .block.no-hairline-bottom-ios:after,
5d51ea26
DC
3233.ios .block.no-hairline-bottom-ios ul:after,
3234.aurora .block.no-hairline-bottom-aurora:after,
3235.aurora .block.no-hairline-bottom-aurora ul:after {
5309fbda
DC
3236 display: none !important;
3237}
3238.block > h1:first-child,
3239.block > h2:first-child,
3240.block > h3:first-child,
3241.block > h4:first-child,
3242.block > p:first-child {
3243 margin-top: 0;
3244}
3245.block > h1:last-child,
3246.block > h2:last-child,
3247.block > h3:last-child,
3248.block > h4:last-child,
3249.block > p:last-child {
3250 margin-bottom: 0;
3251}
3252.block-strong {
3253 color: var(--f7-block-strong-text-color);
3254 padding-top: var(--f7-block-padding-vertical);
3255 padding-bottom: var(--f7-block-padding-vertical);
3256 background-color: var(--f7-block-strong-bg-color);
3257}
3258.block-strong:before {
3259 content: '';
3260 position: absolute;
3261 background-color: var(--f7-block-strong-border-color);
3262 display: block;
3263 z-index: 15;
3264 top: 0;
3265 right: auto;
3266 bottom: auto;
3267 left: 0;
3268 height: 1px;
3269 width: 100%;
3270 transform-origin: 50% 0%;
3271 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3272}
3273.block-strong:after {
3274 content: '';
3275 position: absolute;
3276 background-color: var(--f7-block-strong-border-color);
3277 display: block;
3278 z-index: 15;
3279 top: auto;
3280 right: auto;
3281 bottom: 0;
3282 left: 0;
3283 height: 1px;
3284 width: 100%;
3285 transform-origin: 50% 100%;
3286 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3287}
3288.block-title {
3289 position: relative;
3290 overflow: hidden;
3291 margin: 0;
3292 white-space: var(--f7-block-title-white-space);
3293 text-overflow: ellipsis;
3294 text-transform: var(--f7-block-title-text-transform);
3295 color: var(--f7-block-title-text-color);
3296 font-size: var(--f7-block-title-font-size, inherit);
3297 font-weight: var(--f7-block-title-font-weight);
3298 line-height: var(--f7-block-title-line-height);
3299 margin-top: var(--f7-block-margin-vertical);
3300 margin-bottom: var(--f7-block-title-margin-bottom);
3301 margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3302 margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3303}
3304.block-title + .list,
3305.block-title + .block,
3306.block-title + .card,
3307.block-title + .timeline,
3308.block-title + .block-header {
3309 margin-top: 0px;
3310}
3311.block-title-medium {
3312 font-size: var(--f7-block-title-medium-font-size);
3313 text-transform: var(--f7-block-title-medium-text-transform);
3314 color: var(--f7-block-title-medium-text-color);
3315 font-weight: var(--f7-block-title-medium-font-weight);
3316 line-height: var(--f7-block-title-medium-line-height);
3317}
3318.block-title-large {
3319 font-size: var(--f7-block-title-large-font-size);
3320 text-transform: var(--f7-block-title-large-text-transform);
3321 color: var(--f7-block-title-large-text-color);
3322 font-weight: var(--f7-block-title-large-font-weight);
3323 line-height: var(--f7-block-title-large-line-height);
3324}
3325.block > .block-title:first-child,
3326.list > .block-title:first-child {
3327 margin-top: 0;
3328 margin-left: 0;
3329 margin-right: 0;
3330}
3331.block-header {
3332 color: var(--f7-block-header-text-color);
3333 font-size: var(--f7-block-header-font-size);
3334 margin-bottom: var(--f7-block-header-margin);
3335 margin-top: var(--f7-block-margin-vertical);
3336}
3337.block-header + .list,
3338.block-header + .block,
3339.block-header + .card,
3340.block-header + .timeline {
3341 margin-top: var(--f7-block-header-margin);
3342}
3343.block-footer {
3344 color: var(--f7-block-footer-text-color);
3345 font-size: var(--f7-block-footer-font-size);
3346 margin-top: var(--f7-block-footer-margin);
3347 margin-bottom: var(--f7-block-margin-vertical);
3348}
3349.block-footer,
3350.block-header {
3351 padding-top: 0;
3352 padding-bottom: 0;
3353 padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3354 padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3355}
3356.block-footer ul:first-child,
3357.block-header ul:first-child,
3358.block-footer p:first-child,
3359.block-header p:first-child,
3360.block-footer h1:first-child,
3361.block-header h1:first-child,
3362.block-footer h2:first-child,
3363.block-header h2:first-child,
3364.block-footer h3:first-child,
3365.block-header h3:first-child,
3366.block-footer h4:first-child,
3367.block-header h4:first-child {
3368 margin-top: 0;
3369}
3370.block-footer ul:last-child,
3371.block-header ul:last-child,
3372.block-footer p:last-child,
3373.block-header p:last-child,
3374.block-footer h1:last-child,
3375.block-header h1:last-child,
3376.block-footer h2:last-child,
3377.block-header h2:last-child,
3378.block-footer h3:last-child,
3379.block-header h3:last-child,
3380.block-footer h4:last-child,
3381.block-header h4:last-child {
3382 margin-bottom: 0;
3383}
3384.block-footer ul:first-child:last-child,
3385.block-header ul:first-child:last-child,
3386.block-footer p:first-child:last-child,
3387.block-header p:first-child:last-child,
3388.block-footer h1:first-child:last-child,
3389.block-header h1:first-child:last-child,
3390.block-footer h2:first-child:last-child,
3391.block-header h2:first-child:last-child,
3392.block-footer h3:first-child:last-child,
3393.block-header h3:first-child:last-child,
3394.block-footer h4:first-child:last-child,
3395.block-header h4:first-child:last-child {
3396 margin-top: 0;
3397 margin-bottom: 0;
3398}
3399.list .block-header,
3400.block .block-header,
3401.card .block-header,
3402.timeline .block-header {
3403 margin-top: 0;
3404}
3405.list .block-footer,
3406.block .block-footer,
3407.card .block-footer,
3408.timeline .block-footer {
3409 margin-bottom: 0;
3410}
3411.list + .block-footer,
3412.block + .block-footer,
3413.card + .block-footer,
3414.timeline + .block-footer {
3415 margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
3416}
3417.block + .block-footer {
3418 margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
3419 margin-bottom: var(--f7-block-margin-vertical);
3420}
3421.block .block-header,
3422.block .block-footer {
3423 padding: 0;
3424}
3425.block.inset {
3426 border-radius: var(--f7-block-inset-border-radius);
3427 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
3428 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
3429 --f7-safe-area-left: 0px;
3430 --f7-safe-area-right: 0px;
3431}
3432.block-strong.inset:before {
3433 display: none !important;
3434}
3435.block-strong.inset:after {
3436 display: none !important;
3437}
3438@media (min-width: 768px) {
3439 .block.tablet-inset {
3440 border-radius: var(--f7-block-inset-border-radius);
3441 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
3442 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
3443 --f7-safe-area-left: 0px;
3444 --f7-safe-area-right: 0px;
3445 }
3446 .block-strong.tablet-inset:before {
3447 display: none !important;
3448 }
3449 .block-strong.tablet-inset:after {
3450 display: none !important;
3451 }
3452}
3453/* === List View === */
3454:root {
3455 --f7-list-bg-color: #fff;
3456 --f7-list-item-text-max-lines: 2;
3457 --f7-list-chevron-icon-color: #c7c7cc;
5d51ea26 3458 --f7-list-chevron-icon-font-size: 20px;
5309fbda
DC
3459 --f7-list-item-title-font-size: inherit;
3460 --f7-list-item-title-font-weight: 400;
3461 --f7-list-item-title-text-color: inherit;
3462 --f7-list-item-title-line-height: inherit;
3463 --f7-list-item-title-white-space: nowrap;
3464 --f7-list-item-subtitle-font-weight: 400;
3465 --f7-list-item-subtitle-text-color: inherit;
3466 --f7-list-item-subtitle-line-height: inherit;
5d51ea26
DC
3467 --f7-list-item-text-font-weight: 400;
3468 --f7-list-item-after-font-weight: 400;
5309fbda
DC
3469 --f7-list-item-header-text-color: inherit;
3470 --f7-list-item-header-font-size: 12px;
3471 --f7-list-item-header-font-weight: 400;
3472 --f7-list-item-header-line-height: 1.2;
3473 --f7-list-item-footer-font-size: 12px;
3474 --f7-list-item-footer-font-weight: 400;
3475 --f7-list-item-footer-line-height: 1.2;
5d51ea26
DC
3476 --f7-list-button-font-size: inherit;
3477 --f7-list-button-font-weight: 400;
3478 --f7-list-item-divider-line-height: inherit;
3479 --f7-list-group-title-line-height: inherit;
3480}
3481:root .theme-dark,
3482:root.theme-dark {
3483 --f7-list-bg-color: #1c1c1d;
3484 --f7-list-border-color: #282829;
3485 --f7-list-item-border-color: #282829;
3486 --f7-list-item-divider-border-color: #282829;
3487 --f7-list-item-divider-bg-color: #232323;
3488 --f7-list-group-title-bg-color: #232323;
3489 --f7-list-chevron-icon-color: #434345;
5309fbda
DC
3490}
3491.ios {
5d51ea26 3492 --f7-list-in-list-padding-left: 30px;
5309fbda
DC
3493 --f7-list-inset-side-margin: 15px;
3494 --f7-list-inset-border-radius: 7px;
3495 --f7-list-margin-vertical: 35px;
3496 --f7-list-font-size: 17px;
3497 --f7-list-chevron-icon-area: 20px;
3498 --f7-list-border-color: #c8c7cc;
3499 --f7-list-item-border-color: #c8c7cc;
3500 --f7-list-link-pressed-bg-color: #d9d9d9;
3501 --f7-list-item-subtitle-font-size: 15px;
3502 --f7-list-item-text-font-size: 15px;
5309fbda
DC
3503 --f7-list-item-text-text-color: #8e8e93;
3504 --f7-list-item-text-line-height: 21px;
3505 --f7-list-item-after-font-size: inherit;
5309fbda
DC
3506 --f7-list-item-after-text-color: #8e8e93;
3507 --f7-list-item-after-line-height: inherit;
3508 --f7-list-item-after-padding: 5px;
3509 --f7-list-item-footer-text-color: #8e8e93;
3510 --f7-list-item-min-height: 44px;
3511 --f7-list-item-media-margin: 15px;
3512 --f7-list-item-media-icons-margin: 5px;
3513 --f7-list-item-cell-margin: 15px;
3514 --f7-list-item-padding-vertical: 8px;
3515 --f7-list-item-padding-horizontal: 15px;
3516 --f7-list-media-item-padding-vertical: 10px;
3517 --f7-list-media-item-padding-horizontal: 15px;
5d51ea26 3518 --f7-list-media-item-title-font-weight: 600;
5309fbda
DC
3519 /*
3520 --f7-list-button-text-color: var(--f7-theme-color);
3521 */
5309fbda
DC
3522 --f7-list-button-text-align: center;
3523 --f7-list-button-border-color: #c8c7cc;
3524 --f7-list-button-pressed-bg-color: #d9d9d9;
3525 --f7-list-item-divider-height: 31px;
3526 --f7-list-item-divider-text-color: #8e8e93;
3527 --f7-list-item-divider-font-size: inherit;
3528 --f7-list-item-divider-font-weight: 400;
3529 --f7-list-item-divider-bg-color: #f7f7f7;
5309fbda
DC
3530 --f7-list-item-divider-border-color: #c8c7cc;
3531 --f7-list-group-title-height: 31px;
3532 --f7-list-group-title-text-color: #8e8e93;
3533 --f7-list-group-title-font-size: inherit;
3534 --f7-list-group-title-font-weight: 400;
3535 --f7-list-group-title-bg-color: #f7f7f7;
5309fbda
DC
3536}
3537.ios .theme-dark,
3538.ios.theme-dark {
5309fbda 3539 --f7-list-button-border-color: #282829;
5309fbda
DC
3540 --f7-list-link-pressed-bg-color: #363636;
3541 --f7-list-button-pressed-bg-color: #363636;
5309fbda
DC
3542}
3543.md {
5d51ea26 3544 --f7-list-in-list-padding-left: 40px;
5309fbda
DC
3545 --f7-list-inset-side-margin: 16px;
3546 --f7-list-inset-border-radius: 4px;
3547 --f7-list-margin-vertical: 32px;
3548 --f7-list-font-size: 16px;
3549 --f7-list-chevron-icon-area: 26px;
3550 --f7-list-border-color: rgba(0, 0, 0, 0.12);
3551 --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
3552 --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
3553 --f7-list-item-subtitle-font-size: 14px;
3554 --f7-list-item-text-font-size: 14px;
5309fbda
DC
3555 --f7-list-item-text-text-color: #757575;
3556 --f7-list-item-text-line-height: 20px;
3557 --f7-list-item-after-font-size: 14px;
5309fbda
DC
3558 --f7-list-item-after-text-color: #757575;
3559 --f7-list-item-after-line-height: inherit;
3560 --f7-list-item-after-padding: 8px;
3561 --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
3562 --f7-list-item-min-height: 48px;
3563 --f7-list-item-media-margin: 16px;
3564 --f7-list-item-media-icons-margin: 8px;
3565 --f7-list-item-cell-margin: 16px;
3566 --f7-list-item-padding-vertical: 8px;
3567 --f7-list-item-padding-horizontal: 16px;
3568 --f7-list-media-item-padding-vertical: 14px;
3569 --f7-list-media-item-padding-horizontal: 16px;
5d51ea26
DC
3570 /*
3571 --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
3572 */
5309fbda 3573 --f7-list-button-text-color: #212121;
5309fbda
DC
3574 --f7-list-button-text-align: left;
3575 --f7-list-button-border-color: transparent;
3576 --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
3577 --f7-list-item-divider-height: 48px;
3578 --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
3579 --f7-list-item-divider-font-size: 14px;
3580 --f7-list-item-divider-font-weight: 400;
3581 --f7-list-item-divider-bg-color: #f4f4f4;
5309fbda
DC
3582 --f7-list-item-divider-border-color: transparent;
3583 --f7-list-group-title-height: 48px;
3584 --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
3585 --f7-list-group-title-font-size: 14px;
3586 --f7-list-group-title-font-weight: 400;
3587 --f7-list-group-title-bg-color: #f4f4f4;
5309fbda
DC
3588}
3589.md .theme-dark,
3590.md.theme-dark {
5309fbda 3591 --f7-list-button-text-color: #fff;
5309fbda 3592 --f7-list-item-divider-text-color: #fff;
5309fbda
DC
3593 --f7-list-group-title-text-color: #fff;
3594 --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
3595 --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
5309fbda
DC
3596 --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
3597 --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
3598 --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
3599}
5d51ea26
DC
3600.aurora {
3601 --f7-list-in-list-padding-left: 15px;
3602 --f7-list-inset-side-margin: 15px;
3603 --f7-list-inset-border-radius: 4px;
3604 --f7-list-margin-vertical: 15px;
3605 --f7-list-font-size: 14px;
3606 --f7-list-chevron-icon-area: 15px;
3607 --f7-list-chevron-icon-font-size: 16px;
3608 --f7-list-border-color: rgba(0, 0, 0, 0.12);
3609 --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
3610 --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
3611 --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
3612 --f7-list-item-title-line-height: 1.3;
3613 --f7-list-item-subtitle-font-size: 14px;
3614 --f7-list-item-subtitle-line-height: 1.3;
3615 --f7-list-item-text-font-size: 12px;
3616 --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
3617 --f7-list-item-text-line-height: 16px;
3618 --f7-list-item-after-font-size: 13px;
3619 --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
3620 --f7-list-item-after-line-height: 1.2;
3621 --f7-list-item-after-padding: 5px;
3622 --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
3623 --f7-list-item-min-height: 32px;
3624 --f7-list-item-media-margin: 10px;
3625 --f7-list-item-media-icons-margin: 5px;
3626 --f7-list-item-cell-margin: 15px;
3627 --f7-list-item-padding-vertical: 5px;
3628 --f7-list-item-padding-horizontal: 15px;
3629 --f7-list-media-item-padding-vertical: 5px;
3630 --f7-list-media-item-padding-horizontal: 15px;
3631 --f7-list-media-item-title-font-weight: 600;
3632 /*
3633 --f7-list-button-text-color: var(--f7-theme-color);
3634 */
3635 --f7-list-button-text-align: center;
3636 --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
3637 --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
3638 --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
3639 --f7-list-item-divider-height: 19px;
3640 --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
3641 --f7-list-item-divider-font-size: inherit;
3642 --f7-list-item-divider-font-weight: 500;
3643 --f7-list-item-divider-bg-color: #f7f7f7;
3644 --f7-list-item-divider-border-color: transparent;
3645 --f7-list-group-title-height: 19px;
3646 --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
3647 --f7-list-group-title-font-size: inherit;
3648 --f7-list-group-title-font-weight: 500;
3649 --f7-list-group-title-bg-color: #f7f7f7;
3650}
3651.aurora .theme-dark,
3652.aurora.theme-dark {
3653 --f7-list-button-border-color: #282829;
3654 --f7-list-item-text-text-color: rgba(255, 255, 255, 0.52);
3655 --f7-list-item-after-text-color: rgba(255, 255, 255, 0.52);
3656 --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.52);
3657 --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
3658 --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
3659 --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
3660 --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
3661 --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
3662 --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
3663}
5309fbda
DC
3664.list {
3665 position: relative;
3666 z-index: 1;
3667 font-size: var(--f7-list-font-size);
3668 margin: var(--f7-list-margin-vertical) 0;
3669}
3670.list ul {
3671 list-style: none;
3672 margin: 0;
3673 padding: 0;
3674 position: relative;
3675 background: var(--f7-list-bg-color);
3676}
3677.list ul:before {
3678 content: '';
3679 position: absolute;
3680 background-color: var(--f7-list-border-color);
3681 display: block;
3682 z-index: 15;
3683 top: 0;
3684 right: auto;
3685 bottom: auto;
3686 left: 0;
3687 height: 1px;
3688 width: 100%;
3689 transform-origin: 50% 0%;
3690 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3691}
3692.list ul:after {
3693 content: '';
3694 position: absolute;
3695 background-color: var(--f7-list-border-color);
3696 display: block;
3697 z-index: 15;
3698 top: auto;
3699 right: auto;
3700 bottom: 0;
3701 left: 0;
3702 height: 1px;
3703 width: 100%;
3704 transform-origin: 50% 100%;
3705 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3706}
5d51ea26
DC
3707.list ul ul {
3708 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left));
3709}
5309fbda
DC
3710.list ul ul:before {
3711 display: none !important;
3712}
3713.list ul ul:after {
3714 display: none !important;
3715}
3716.list li {
3717 position: relative;
3718 box-sizing: border-box;
3719}
3720.list .item-media {
3721 display: flex;
3722 flex-shrink: 0;
3723 flex-wrap: nowrap;
3724 align-items: center;
3725 box-sizing: border-box;
3726 padding-bottom: var(--f7-list-item-padding-vertical);
3727 padding-top: var(--f7-list-item-padding-vertical);
3728}
3729.list .item-media + .item-inner {
3730 margin-right: var(--f7-list-item-media-margin);
3731}
3732.list .item-media i + i,
3733.list .item-media i + img {
3734 margin-right: var(--f7-list-item-media-icons-margin);
3735}
3736.list .item-after {
3737 padding-right: var(--f7-list-item-after-padding);
3738}
3739.list .item-inner {
3740 position: relative;
3741 width: 100%;
3742 min-width: 0;
3743 display: flex;
3744 justify-content: space-between;
3745 box-sizing: border-box;
3746 align-items: center;
3747 align-self: stretch;
3748 padding-top: var(--f7-list-item-padding-vertical);
3749 padding-bottom: var(--f7-list-item-padding-vertical);
3750 min-height: var(--f7-list-item-min-height);
3751 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3752}
3753.list .item-title {
3754 min-width: 0;
3755 flex-shrink: 1;
3756 white-space: var(--f7-list-item-title-white-space);
3757 position: relative;
3758 overflow: hidden;
3759 text-overflow: ellipsis;
3760 max-width: 100%;
3761 font-size: var(--f7-list-item-title-font-size);
3762 font-weight: var(--f7-list-item-title-font-weight);
3763 color: var(--f7-list-item-title-text-color);
3764 line-height: var(--f7-list-item-title-line-height);
3765}
3766.list .item-after {
3767 white-space: nowrap;
3768 flex-shrink: 0;
3769 display: flex;
3770 font-size: var(--f7-list-item-after-font-size);
3771 font-weight: var(--f7-list-item-after-font-weight);
3772 color: var(--f7-list-item-after-text-color);
3773 line-height: var(--f7-list-item-after-line-height);
3774 margin-right: auto;
3775}
3776.list .item-header,
3777.list .item-footer {
3778 white-space: normal;
3779}
3780.list .item-header {
3781 color: var(--f7-list-item-header-text-color);
3782 font-size: var(--f7-list-item-header-font-size);
3783 font-weight: var(--f7-list-item-header-font-weight);
3784 line-height: var(--f7-list-item-header-line-height);
3785}
3786.list .item-footer {
3787 color: var(--f7-list-item-footer-text-color);
3788 font-size: var(--f7-list-item-footer-font-size);
3789 font-weight: var(--f7-list-item-footer-font-weight);
3790 line-height: var(--f7-list-item-footer-line-height);
3791}
3792.list .item-link,
3793.list .list-button {
3794 transition-duration: 300ms;
3795 transition-property: background-color;
3796 display: block;
3797 position: relative;
3798 overflow: hidden;
3799 z-index: 0;
3800}
3801.list .item-link {
3802 color: inherit;
3803}
3804.list .item-link.active-state {
3805 background-color: var(--f7-list-link-pressed-bg-color);
3806}
3807.list .item-link .item-inner {
3808 padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3809}
3810.list .item-content {
3811 display: flex;
3812 justify-content: space-between;
3813 box-sizing: border-box;
3814 align-items: center;
3815 min-height: var(--f7-list-item-min-height);
3816 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3817}
3818.list .item-subtitle {
3819 position: relative;
3820 overflow: hidden;
3821 white-space: nowrap;
3822 max-width: 100%;
3823 text-overflow: ellipsis;
3824 font-size: var(--f7-list-item-subtitle-font-size);
3825 font-weight: var(--f7-list-item-subtitle-font-weight);
3826 color: var(--f7-list-item-subtitle-text-color);
3827 line-height: var(--f7-list-item-subtitle-line-height);
3828}
3829.list .item-text {
3830 position: relative;
3831 overflow: hidden;
3832 text-overflow: hidden;
3833 -webkit-line-clamp: var(--f7-list-item-text-max-lines);
3834 display: -webkit-box;
3835 font-size: var(--f7-list-item-text-font-size);
3836 font-weight: var(--f7-list-item-text-font-weight);
3837 color: var(--f7-list-item-text-text-color);
3838 line-height: var(--f7-list-item-text-line-height);
3839 max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines));
3840}
3841.list .item-title-row {
3842 position: relative;
3843 display: flex;
3844 justify-content: space-between;
3845 box-sizing: border-box;
3846}
3847.list .item-title-row .item-after {
3848 align-self: center;
3849}
3850.list .item-row {
3851 display: flex;
3852 justify-content: space-between;
3853 box-sizing: border-box;
3854}
3855.list .item-cell {
3856 display: block;
3857 align-self: center;
3858 box-sizing: border-box;
3859 width: 100%;
3860 min-width: 0;
3861 margin-right: var(--f7-list-item-cell-margin);
3862 flex-shrink: 1;
3863}
3864.list .item-cell:first-child {
3865 margin-right: 0;
3866}
3867.list li:last-child .list-button:after {
3868 display: none !important;
3869}
3870.list li:last-child > .item-inner:after,
3871.list li:last-child li:last-child > .item-inner:after,
3872.list li:last-child > .item-content > .item-inner:after,
3873.list li:last-child li:last-child > .item-content > .item-inner:after,
3874.list li:last-child > .swipeout-content > .item-content > .item-inner:after,
3875.list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after,
3876.list li:last-child > .item-link > .item-content > .item-inner:after,
3877.list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
3878 display: none !important;
3879}
3880.list li li:last-child .item-inner:after,
3881.list li:last-child li .item-inner:after {
3882 content: '';
3883 position: absolute;
3884 background-color: var(--f7-list-item-border-color);
3885 display: block;
3886 z-index: 15;
3887 top: auto;
3888 right: auto;
3889 bottom: 0;
3890 left: 0;
3891 height: 1px;
3892 width: 100%;
3893 transform-origin: 50% 100%;
3894 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3895}
3896.list.no-hairlines:before,
3897.list.no-hairlines ul:before,
3898.md .list.no-hairlines-md:before,
3899.md .list.no-hairlines-md ul:before,
3900.ios .list.no-hairlines-ios:before,
5d51ea26
DC
3901.ios .list.no-hairlines-ios ul:before,
3902.aurora .list.no-hairlines-aurora:before,
3903.aurora .list.no-hairlines-aurora ul:before {
5309fbda
DC
3904 display: none !important;
3905}
3906.list.no-hairlines:after,
3907.list.no-hairlines ul:after,
3908.md .list.no-hairlines-md:after,
3909.md .list.no-hairlines-md ul:after,
3910.ios .list.no-hairlines-ios:after,
5d51ea26
DC
3911.ios .list.no-hairlines-ios ul:after,
3912.aurora .list.no-hairlines-aurora:after,
3913.aurora .list.no-hairlines-aurora ul:after {
5309fbda
DC
3914 display: none !important;
3915}
3916.list.no-hairline-top:before,
3917.list.no-hairline-top ul:before,
3918.md .list.no-hairline-top-md:before,
3919.md .list.no-hairline-top-md ul:before,
3920.ios .list.no-hairline-top-ios:before,
5d51ea26
DC
3921.ios .list.no-hairline-top-ios ul:before,
3922.aurora .list.no-hairline-top-aurora:before,
3923.aurora .list.no-hairline-top-aurora ul:before {
5309fbda
DC
3924 display: none !important;
3925}
3926.list.no-hairline-bottom:after,
3927.list.no-hairline-bottom ul:after,
3928.md .list.no-hairline-bottom-md:after,
3929.md .list.no-hairline-bottom-md ul:after,
3930.ios .list.no-hairline-bottom-ios:after,
5d51ea26
DC
3931.ios .list.no-hairline-bottom-ios ul:after,
3932.aurora .list.no-hairline-bottom-aurora:after,
3933.aurora .list.no-hairline-bottom-aurora ul:after {
5309fbda
DC
3934 display: none !important;
3935}
3936.list.no-hairlines-between .item-inner:after,
3937.md .list.no-hairlines-between-md .item-inner:after,
3938.ios .list.no-hairlines-between-ios .item-inner:after,
5d51ea26 3939.aurora .list.no-hairlines-between-aurora .item-inner:after,
5309fbda
DC
3940.list.no-hairlines-between .list-button:after,
3941.md .list.no-hairlines-between-md .list-button:after,
3942.ios .list.no-hairlines-between-ios .list-button:after,
5d51ea26 3943.aurora .list.no-hairlines-between-aurora .list-button:after,
5309fbda
DC
3944.list.no-hairlines-between .item-divider:after,
3945.md .list.no-hairlines-between-md .item-divider:after,
3946.ios .list.no-hairlines-between-ios .item-divider:after,
5d51ea26 3947.aurora .list.no-hairlines-between-aurora .item-divider:after,
5309fbda
DC
3948.list.no-hairlines-between .list-group-title:after,
3949.md .list.no-hairlines-between-md .list-group-title:after,
3950.ios .list.no-hairlines-between-ios .list-group-title:after,
5d51ea26 3951.aurora .list.no-hairlines-between-aurora .list-group-title:after,
5309fbda
DC
3952.list.no-hairlines-between .list-group-title:after,
3953.md .list.no-hairlines-between-md .list-group-title:after,
5d51ea26
DC
3954.ios .list.no-hairlines-between-ios .list-group-title:after,
3955.aurora .list.no-hairlines-between-aurora .list-group-title:after {
5309fbda
DC
3956 display: none !important;
3957}
3958.list.no-hairlines-between.simple-list li:after,
3959.md .list.no-hairlines-between-md.simple-list li:after,
5d51ea26
DC
3960.ios .list.no-hairlines-between-ios.simple-list li:after,
3961.aurora .list.no-hairlines-between-aurora.simple-list li:after {
5309fbda
DC
3962 display: none !important;
3963}
3964.list.no-hairlines-between.links-list a:after,
3965.md .list.no-hairlines-between-md.links-list a:after,
5d51ea26
DC
3966.ios .list.no-hairlines-between-ios.links-list a:after,
3967.aurora .list.no-hairlines-between-aurora.links-list a:after {
5309fbda
DC
3968 display: none !important;
3969}
3970.list-button {
3971 padding: 0 var(--f7-list-item-padding-horizontal);
3972 line-height: var(--f7-list-item-min-height);
3973 color: var(--f7-list-button-text-color, var(--f7-theme-color));
3974 font-size: var(--f7-list-button-font-size);
3975 font-weight: var(--f7-list-button-font-weight);
3976 text-align: var(--f7-list-button-text-align);
3977}
3978.list-button:after {
3979 content: '';
3980 position: absolute;
3981 background-color: var(--f7-list-button-border-color);
3982 display: block;
3983 z-index: 15;
3984 top: auto;
3985 right: auto;
3986 bottom: 0;
3987 left: 0;
3988 height: 1px;
3989 width: 100%;
3990 transform-origin: 50% 100%;
3991 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3992}
3993.list-button.active-state {
3994 background-color: var(--f7-list-button-pressed-bg-color);
3995}
3996.list-button[class*="color-"] {
3997 --f7-list-button-text-color: var(--f7-theme-color);
3998}
3999.simple-list li {
4000 position: relative;
4001 white-space: nowrap;
4002 text-overflow: ellipsis;
4003 max-width: 100%;
4004 box-sizing: border-box;
4005 display: flex;
4006 justify-content: space-between;
4007 align-items: center;
4008 align-content: center;
4009 line-height: var(--f7-list-item-min-height);
4010 height: var(--f7-list-item-min-height);
4011 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4012 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4013}
4014.simple-list li:after {
4015 left: var(--f7-list-item-padding-horizontal);
4016 right: 0;
4017 width: auto;
4018 right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4019 left: 0;
4020}
4021.simple-list li:last-child:after {
4022 display: none !important;
4023}
4024.links-list li {
4025 z-index: 1;
4026}
4027.links-list a {
4028 transition-duration: 300ms;
4029 transition-property: background-color;
4030 display: block;
4031 position: relative;
4032 overflow: hidden;
4033 display: flex;
4034 align-items: center;
4035 align-content: center;
4036 justify-content: space-between;
4037 box-sizing: border-box;
4038 white-space: nowrap;
4039 text-overflow: ellipsis;
4040 max-width: 100%;
4041 height: var(--f7-list-item-min-height);
4042 color: inherit;
4043}
4044.links-list a .ripple-wave {
4045 z-index: 0;
4046}
4047.links-list a:after {
4048 width: auto;
4049}
4050.links-list a.active-state {
4051 background-color: var(--f7-list-link-pressed-bg-color);
4052}
4053.links-list a {
4054 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4055 padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4056}
4057.links-list a:after {
4058 right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4059 left: 0;
4060}
4061.links-list li:last-child a:after {
4062 display: none !important;
4063}
4064.simple-list li:after,
4065.links-list a:after,
4066.list .item-inner:after {
4067 content: '';
4068 position: absolute;
4069 background-color: var(--f7-list-item-border-color);
4070 display: block;
4071 z-index: 15;
4072 top: auto;
4073 right: auto;
4074 bottom: 0;
4075 left: 0;
4076 height: 1px;
4077 width: 100%;
4078 transform-origin: 50% 100%;
4079 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4080}
4081.media-list,
4082li.media-item {
4083 --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
4084 --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal);
4085}
5d51ea26
DC
4086.media-list .item-title,
4087li.media-item .item-title {
4088 font-weight: var(--f7-list-media-item-title-font-weight, var(--f7-list-item-title-font-weight, inherit));
4089}
5309fbda
DC
4090.media-list .item-inner,
4091li.media-item .item-inner {
4092 display: block;
4093 align-self: stretch;
4094}
4095.media-list .item-media,
4096li.media-item .item-media {
4097 align-self: flex-start;
4098}
4099.media-list .item-media img,
4100li.media-item .item-media img {
4101 display: block;
4102}
4103.media-list .item-link .item-inner,
4104li.media-item .item-link .item-inner {
4105 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4106}
4107.media-list .item-link .item-title-row,
4108li.media-item .item-link .item-title-row {
4109 padding-left: calc(var(--f7-list-chevron-icon-area));
4110}
4111.media-list.chevron-center .item-link .item-inner,
4112.media-list .chevron-center .item-link .item-inner,
4113.media-list .item-link.chevron-center .item-inner,
4114li.media-item.chevron-center .item-link .item-inner,
4115li.media-item .item-link.chevron-center .item-inner,
4116li.media-item .chevron-center .item-link .item-inner {
4117 padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4118}
4119.media-list.chevron-center .item-title-row,
4120.media-list .chevron-center .item-title-row,
4121li.media-item.chevron-center .item-title-row,
4122li.media-item .chevron-center .item-title-row {
4123 padding-left: 0;
4124}
4125.list .item-link .item-inner:before,
4126.links-list a:before,
4127.media-list .item-link .item-title-row:before,
4128li.media-item .item-link .item-title-row:before,
4129.media-list.chevron-center .item-link .item-inner:before,
4130.media-list .chevron-center .item-link .item-inner:before,
4131.media-list .item-link.chevron-center .item-inner:before,
4132li.media-item.chevron-center .item-link .item-inner:before,
4133li.media-item .chevron-center .item-link .item-inner:before,
4134li.media-item .item-link.chevron-center .item-inner:before {
4135 font-family: 'framework7-core-icons';
4136 font-weight: normal;
4137 font-style: normal;
4138 line-height: 1;
4139 letter-spacing: normal;
4140 text-transform: none;
4141 white-space: nowrap;
4142 word-wrap: normal;
4143 direction: ltr;
4144 -webkit-font-smoothing: antialiased;
4145 text-rendering: optimizeLegibility;
4146 -moz-osx-font-smoothing: grayscale;
4147 -moz-font-feature-settings: "liga";
4148 font-feature-settings: "liga";
4149 text-align: center;
4150 display: block;
4151 width: 100%;
4152 height: 100%;
5d51ea26 4153 font-size: 20px;
5309fbda
DC
4154 position: absolute;
4155 top: 50%;
4156 width: 8px;
4157 height: 14px;
4158 margin-top: -7px;
5d51ea26 4159 font-size: var(--f7-list-chevron-icon-font-size);
5309fbda
DC
4160 line-height: 14px;
4161 color: var(--f7-list-chevron-icon-color);
4162 pointer-events: none;
4163 left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4164 content: 'chevron_left';
4165}
4166.media-list.chevron-center .item-title-row:before,
4167.media-list .chevron-center .item-title-row:before,
4168li.media-item.chevron-center .item-title-row:before,
4169li.media-item .chevron-center .item-title-row:before {
4170 display: none;
4171}
4172.media-list .item-link .item-inner:before,
4173li.media-item .item-link .item-inner:before {
4174 display: none;
4175}
4176.media-list .item-link .item-title-row:before,
4177li.media-item .item-link .item-title-row:before {
4178 left: 0;
4179}
4180.list-group ul:after,
4181.list-group ul:before {
4182 z-index: 25 !important;
4183}
4184.list-group + .list-group ul:before {
4185 display: none !important;
4186}
4187li.item-divider,
4188.item-divider,
4189li.list-group-title {
4190 white-space: nowrap;
4191 position: relative;
4192 max-width: 100%;
4193 text-overflow: ellipsis;
4194 overflow: hidden;
4195 z-index: 15;
4196 padding-top: 0;
4197 padding-bottom: 0;
4198 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4199 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4200 box-sizing: border-box;
4201 display: flex;
4202 align-items: center;
4203 align-content: center;
4204}
4205li.item-divider:after,
4206.item-divider:after,
4207li.list-group-title:after {
4208 display: none !important;
4209}
4210li.item-divider,
4211.item-divider {
4212 margin-top: -1px;
4213 height: var(--f7-list-item-divider-height);
4214 color: var(--f7-list-item-divider-text-color);
4215 font-size: var(--f7-list-item-divider-font-size);
4216 font-weight: var(--f7-list-item-divider-font-weight);
4217 background-color: var(--f7-list-item-divider-bg-color);
4218 line-height: var(--f7-list-item-divider-line-height);
4219}
4220li.item-divider:before,
4221.item-divider:before {
4222 content: '';
4223 position: absolute;
4224 background-color: var(--f7-list-item-divider-border-color);
4225 display: block;
4226 z-index: 15;
4227 top: 0;
4228 right: auto;
4229 bottom: auto;
4230 left: 0;
4231 height: 1px;
4232 width: 100%;
4233 transform-origin: 50% 0%;
4234 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4235}
4236li.list-group-title,
4237.list li.list-group-title {
4238 position: relative;
4239 position: -webkit-sticky;
4240 position: sticky;
4241 top: 0;
4242 margin-top: 0;
4243 z-index: 20;
4244 height: var(--f7-list-group-title-height);
4245 color: var(--f7-list-group-title-text-color);
4246 font-size: var(--f7-list-group-title-font-size);
4247 font-weight: var(--f7-list-group-title-font-weight);
4248 background-color: var(--f7-list-group-title-bg-color);
4249 line-height: var(--f7-list-group-title-line-height);
4250}
5d51ea26
DC
4251.page-with-navbar-large li.list-group-title,
4252.page-with-navbar-large .list li.list-group-title {
4253 top: calc(-1 * var(--f7-navbar-large-title-height));
4254}
5309fbda
DC
4255.list.inset {
4256 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
4257 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
4258 border-radius: var(--f7-list-inset-border-radius);
4259 --f7-safe-area-left: 0px;
4260 --f7-safe-area-right: 0px;
4261}
4262.list.inset .block-title {
4263 margin-left: 0;
4264 margin-right: 0;
4265}
4266.list.inset ul {
4267 border-radius: var(--f7-list-inset-border-radius);
4268}
4269.list.inset ul:before {
4270 display: none !important;
4271}
4272.list.inset ul:after {
4273 display: none !important;
4274}
4275.list.inset li.swipeout:first-child,
4276.list.inset li:first-child > a {
4277 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
4278}
4279.list.inset li.swipeout:last-child,
4280.list.inset li:last-child > a {
4281 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
4282}
4283.list.inset li.swipeout:first-child:last-child,
4284.list.inset li:first-child:last-child > a {
4285 border-radius: var(--f7-list-inset-border-radius);
4286}
4287@media (min-width: 768px) {
4288 .list.tablet-inset {
4289 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
4290 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
4291 border-radius: var(--f7-list-inset-border-radius);
4292 --f7-safe-area-left: 0px;
4293 --f7-safe-area-right: 0px;
4294 }
4295 .list.tablet-inset .block-title {
4296 margin-left: 0;
4297 margin-right: 0;
4298 }
4299 .list.tablet-inset ul {
4300 border-radius: var(--f7-list-inset-border-radius);
4301 }
4302 .list.tablet-inset ul:before {
4303 display: none !important;
4304 }
4305 .list.tablet-inset ul:after {
4306 display: none !important;
4307 }
4308 .list.tablet-inset li:first-child > a {
4309 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
4310 }
4311 .list.tablet-inset li:last-child > a {
4312 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
4313 }
4314 .list.tablet-inset li:first-child:last-child > a {
4315 border-radius: var(--f7-list-inset-border-radius);
4316 }
4317}
4318.list.no-chevron,
4319.list .no-chevron {
4320 --f7-list-chevron-icon-color: transparent;
4321 --f7-list-chevron-icon-area: 0px;
4322}
5309fbda
DC
4323.ios .item-link.active-state .item-inner:after,
4324.ios .list-button.active-state:after,
4325.ios .links-list a.active-state:after {
4326 background-color: transparent;
4327}
4328.ios .links-list a.active-state,
4329.ios .list .item-link.active-state,
4330.ios .list .list-button.active-state {
4331 transition-duration: 0ms;
4332}
5309fbda
DC
4333.md .list .item-media {
4334 min-width: 40px;
4335}
5d51ea26
DC
4336.aurora .list .item-media {
4337 min-width: 18px;
4338}
4339.aurora .list .item-link .item-inner:before,
4340.aurora .links-list a:before,
4341.aurora .media-list .item-link .item-title-row:before,
4342.aurora li.media-item .item-link .item-title-row:before,
4343.aurora .media-list.chevron-center .item-link .item-inner:before,
4344.aurora .media-list .chevron-center .item-link .item-inner:before,
4345.aurora .media-list .item-link.chevron-center .item-inner:before,
4346.aurora li.media-item.chevron-center .item-link .item-inner:before,
4347.aurora li.media-item .chevron-center .item-link .item-inner:before,
4348.aurora li.media-item .item-link.chevron-center .item-inner:before {
4349 content: 'chevron_left_aurora';
4350}
4351.aurora .links-list a,
4352.aurora .list .item-link,
4353.aurora .list .list-button {
4354 transition-duration: 0ms;
4355}
4356.aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
4357.aurora.device-desktop .list .item-link:hover:not(.active-state):not(.no-hover) {
4358 background: var(--f7-list-link-hover-bg-color);
4359}
4360.aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
4361 background: var(--f7-list-button-hover-bg-color);
4362}
5309fbda
DC
4363/* === Badge === */
4364:root {
4365 --f7-badge-text-color: #fff;
4366 --f7-badge-bg-color: #8e8e93;
4367 --f7-badge-padding: 0 4px;
4368 --f7-badge-in-icon-size: 16px;
4369 --f7-badge-in-icon-font-size: 10px;
4370 --f7-badge-font-weight: normal;
4371 --f7-badge-font-size: 12px;
4372}
4373.ios {
4374 --f7-badge-size: 20px;
4375}
4376.md {
4377 --f7-badge-size: 18px;
4378}
5d51ea26
DC
4379.aurora {
4380 --f7-badge-size: 18px;
4381 --f7-badge-font-weight: 600;
4382 --f7-badge-in-icon-size: 15px;
4383}
5309fbda
DC
4384.badge {
4385 display: inline-flex;
4386 align-items: center;
4387 align-content: center;
4388 justify-content: center;
4389 color: var(--f7-badge-text-color);
4390 background: var(--f7-badge-bg-color);
4391 position: relative;
4392 box-sizing: border-box;
4393 text-align: center;
4394 vertical-align: middle;
4395 font-weight: var(--f7-badge-font-weight);
4396 font-size: var(--f7-badge-font-size);
4397 border-radius: var(--f7-badge-size);
4398 padding: var(--f7-badge-padding);
4399 height: var(--f7-badge-size);
4400 min-width: var(--f7-badge-size);
4401}
4402.icon .badge,
4403.f7-icons .badge,
4404.framework7-icons .badge,
4405.material-icons .badge {
4406 position: absolute;
4407 left: 100%;
4408 margin-left: -10px;
4409 top: -2px;
4410 font-family: var(--f7-font-family);
4411 --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
4412 --f7-badge-size: var(--f7-badge-in-icon-size);
4413}
4414.badge[class*="color-"] {
4415 --f7-badge-bg-color: var(--f7-theme-color);
4416}
4417:root {
4418 --f7-button-font-size: 14px;
4419 --f7-button-min-width: 32px;
4420 --f7-button-bg-color: transparent;
4421 --f7-button-border-width: 0px;
4422 /*
4423 --f7-button-text-color: var(--f7-theme-color);
4424 --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
4425 --f7-button-border-color: var(--f7-theme-color);
4426 --f7-button-fill-text-color: #fff;
4427 --f7-button-fill-bg-color: var(--f7-theme-color);
4428 --f7-button-outline-border-color: var(--f7-theme-color);
4429 */
4430 --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
4431 --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
4432 --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
4433}
4434.ios {
4435 --f7-button-height: 29px;
4436 --f7-button-padding-horizontal: 10px;
4437 --f7-button-border-radius: 5px;
4438 --f7-button-font-weight: 400;
4439 --f7-button-letter-spacing: 0;
4440 --f7-button-text-transform: none;
4441 /*
4442 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4443 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
4444 */
4445 --f7-button-outline-border-width: 1px;
4446 --f7-button-large-height: 44px;
4447 --f7-button-large-font-size: 17px;
5d51ea26 4448 --f7-button-large-font-weight: 400;
5309fbda
DC
4449 --f7-button-small-height: 26px;
4450 --f7-button-small-font-size: 13px;
4451 --f7-button-small-font-weight: 600;
4452 --f7-button-small-text-transform: uppercase;
4453 --f7-button-small-outline-border-width: 2px;
4454}
4455.md {
4456 --f7-button-height: 36px;
4457 --f7-button-padding-horizontal: 8px;
4458 --f7-button-border-radius: 4px;
4459 --f7-button-font-weight: 500;
4460 --f7-button-letter-spacing: 0.03em;
4461 --f7-button-text-transform: uppercase;
4462 --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
4463 /*
4464 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4465 */
4466 --f7-button-outline-border-width: 2px;
4467 --f7-button-large-height: 48px;
4468 --f7-button-large-font-size: 14px;
5d51ea26 4469 --f7-button-large-font-weight: 500;
5309fbda 4470 --f7-button-small-height: 28px;
5d51ea26 4471 --f7-button-small-font-size: 12px;
5309fbda
DC
4472 --f7-button-small-font-weight: 500;
4473 --f7-button-small-text-transform: uppercase;
4474 --f7-button-small-outline-border-width: 2px;
4475}
4476.md .theme-dark,
4477.md.theme-dark {
4478 --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
4479}
5d51ea26
DC
4480.aurora {
4481 /*
4482 --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
4483 --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
4484 */
4485 --f7-button-font-size: 14px;
4486 --f7-button-height: 28px;
4487 --f7-button-min-width: 24px;
4488 --f7-button-padding-horizontal: 10px;
4489 --f7-button-border-radius: 4px;
4490 --f7-button-font-weight: 400;
4491 --f7-button-letter-spacing: 0.02;
4492 --f7-button-text-transform: none;
4493 /*
4494 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4495 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4496 */
4497 --f7-button-outline-border-width: 2px;
4498 --f7-button-large-height: 34px;
4499 --f7-button-large-font-size: 14px;
4500 --f7-button-large-font-weight: 600;
4501 --f7-button-small-height: 22px;
4502 --f7-button-small-font-size: 12px;
4503 --f7-button-small-font-weight: 600;
4504 --f7-button-small-text-transform: none;
4505 --f7-button-small-outline-border-width: 1px;
4506}
5309fbda
DC
4507button {
4508 -webkit-appearance: none;
4509 -moz-appearance: none;
4510 appearance: none;
4511 width: 100%;
4512}
4513.button {
4514 text-decoration: none;
4515 text-align: center;
4516 display: block;
4517 -webkit-appearance: none;
4518 -moz-appearance: none;
4519 appearance: none;
4520 background: none;
4521 margin: 0;
4522 white-space: nowrap;
4523 text-overflow: ellipsis;
4524 position: relative;
4525 overflow: hidden;
4526 font-family: inherit;
4527 cursor: pointer;
4528 outline: 0;
4529 box-sizing: border-box;
4530 vertical-align: middle;
5d51ea26
DC
4531 justify-content: center;
4532 align-items: center;
5309fbda
DC
4533 border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
4534 font-size: var(--f7-button-font-size);
4535 color: var(--f7-button-text-color, var(--f7-theme-color));
4536 height: var(--f7-button-height);
4537 line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
5d51ea26 4538 padding: var(--f7-button-padding-vertical, 0px) var(--f7-button-padding-horizontal);
5309fbda
DC
4539 border-radius: var(--f7-button-border-radius);
4540 min-width: var(--f7-button-min-width);
4541 font-weight: var(--f7-button-font-weight);
4542 letter-spacing: var(--f7-button-letter-spacing);
4543 text-transform: var(--f7-button-text-transform);
4544 background-color: var(--f7-button-bg-color);
4545 box-shadow: var(--f7-button-box-shadow);
4546}
4547.button.active-state {
4548 background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
4549 color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
4550}
4551input[type="submit"].button,
4552input[type="button"].button {
4553 width: 100%;
4554}
4555.button > i + span,
4556.button > span + span,
4557.button > span + i,
4558.button > i + i {
4559 margin-right: 4px;
4560}
4561.subnavbar .button,
4562.navbar .button,
4563.toolbar .button,
5d51ea26
DC
4564.searchbar .button,
4565.appbar .button {
5309fbda
DC
4566 color: var(--f7-button-text-color, var(--f7-theme-color));
4567}
4568.button-round,
4569.ios .button-round-ios,
5d51ea26
DC
4570.md .button-round-md,
4571.aurora .button-round-aurora {
5309fbda
DC
4572 --f7-button-border-radius: var(--f7-button-height);
4573}
4574.button-fill,
4575.ios .button-fill-ios,
4576.md .button-fill-md,
5d51ea26 4577.aurora .button-fill-aurora,
5309fbda
DC
4578.button-active,
4579.button.tab-link-active {
4580 --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
4581 --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
4582 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
4583}
4584.button-fill,
4585.ios .button-fill-ios,
5d51ea26
DC
4586.md .button-fill-md,
4587.aurora .button-fill-aurora {
5309fbda
DC
4588 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
4589}
4590.button-active,
4591.button.tab-link-active {
4592 --f7-button-pressed-bg-color: var(--f7-button-bg-color);
4593}
4594.button-outline,
4595.ios .button-outline-ios,
5d51ea26
DC
4596.md .button-outline-md,
4597.aurora .button-outline-aurora {
5309fbda
DC
4598 --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
4599 --f7-button-border-width: var(--f7-button-outline-border-width);
4600}
4601.button-large,
4602.ios .button-large-ios,
5d51ea26
DC
4603.md .button-large-md,
4604.aurora .button-large-aurora {
5309fbda
DC
4605 --f7-button-height: var(--f7-button-large-height);
4606 --f7-button-font-size: var(--f7-button-large-font-size);
5d51ea26 4607 --f7-button-font-weight: var(--f7-button-large-font-weight);
5309fbda
DC
4608}
4609.button-small,
4610.ios .button-small-ios,
5d51ea26
DC
4611.md .button-small-md,
4612.aurora .button-small-aurora {
5309fbda
DC
4613 --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
4614 --f7-button-height: var(--f7-button-small-height);
4615 --f7-button-font-size: var(--f7-button-small-font-size);
4616 --f7-button-font-weight: var(--f7-button-small-font-weight);
4617 --f7-button-text-transform: var(--f7-button-small-text-transform);
4618}
4619.ios .button-small.button-fill,
4620.ios .button-small-ios.button-fill,
4621.ios .button-small.button-fill-ios {
4622 --f7-button-border-width: var(--f7-button-small-outline-border-width);
4623 --f7-button-pressed-text-color: var(--f7-theme-color);
4624 --f7-button-pressed-bg-color: transparent;
4625}
4626.segmented {
4627 align-self: center;
4628 display: flex;
4629 flex-wrap: nowrap;
4630 border-radius: var(--f7-button-border-radius);
4631 box-shadow: var(--f7-button-box-shadow);
4632}
4633.segmented .button,
4634.segmented button {
4635 width: 100%;
4636 flex-shrink: 1;
4637 min-width: 0;
4638 border-radius: 0;
4639}
4640.segmented .button:first-child {
4641 border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
4642}
4643.segmented .button:not(.button-outline):first-child {
4644 border-right: none;
4645}
4646.segmented .button.button-outline:nth-child(n + 2) {
4647 border-right: none;
4648}
4649.segmented .button:last-child {
4650 border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
4651}
4652.segmented .button-round:first-child {
4653 border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
4654}
4655.segmented .button-round:last-child {
4656 border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
4657}
4658.segmented .button:first-child:last-child {
4659 border-radius: var(--f7-button-border-radius);
4660}
4661.segmented-round,
4662.ios .segmented-round-ios,
5d51ea26
DC
4663.md .segmented-round-md,
4664.aurora .segmented-round-aurora {
5309fbda
DC
4665 border-radius: var(--f7-button-height);
4666}
4667.segmented-raised,
4668.ios .segmented-raised-ios,
5d51ea26
DC
4669.md .segmented-raised-md,
4670.aurora .segmented-raised-aurora {
5309fbda
DC
4671 box-shadow: var(--f7-button-raised-box-shadow);
4672}
4673.segmented-raised .button:not(.button-outline),
4674.ios .segmented-raised-ios .button:not(.button-outline),
5d51ea26
DC
4675.md .segmented-raised-md .button:not(.button-outline),
4676.aurora .segmented-raised-aurora .button:not(.button-outline) {
5309fbda
DC
4677 border-right: 1px solid var(--f7-segmented-raised-divider-color);
4678}
4679.button-raised,
4680.ios .button-raised-ios,
5d51ea26
DC
4681.md .button-raised-md,
4682.aurora .button-raised-aurora {
5309fbda
DC
4683 --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
4684}
4685.button-raised.active-state,
4686.ios .button-raised-ios.active-state,
5d51ea26
DC
4687.md .button-raised-md.active-state,
4688.aurora .button-raised-aurora.active-state {
5309fbda
DC
4689 --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
4690}
4691.subnavbar .segmented {
4692 width: 100%;
4693}
4694.ios .button {
4695 transition-duration: 100ms;
4696}
4697.ios .button-fill,
4698.ios .button-fill-ios {
4699 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
4700}
4701.ios .button-small,
4702.ios .button-small-ios {
4703 transition-duration: 200ms;
4704}
4705.md .button {
4706 transition-duration: 300ms;
4707 transform: translate3d(0, 0, 0);
4708}
4709.md .button-fill,
4710.md .button-fill-md {
4711 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
4712}
5d51ea26
DC
4713.aurora .button {
4714 transition-duration: 100ms;
4715 transform: translate3d(0, 0, 0);
4716}
4717.aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
4718 background-color: var(--f7-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
4719}
4720.aurora .button-fill,
4721.aurora .button-fill-aurora {
4722 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
4723}
4724.aurora .button-fill,
4725.aurora .button-active,
4726.aurora .button.tab-link-active,
4727.aurora .button-fill-aurora {
4728 --f7-button-hover-bg-color: var(--f7-button-fill-hover-bg-color, var(--f7-theme-color-tint));
4729}
5309fbda
DC
4730/* === Touch Ripple === */
4731:root {
4732 --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
4733 --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
4734 --f7-touch-ripple-color: var(--f7-touch-ripple-black);
4735}
4736.theme-dark {
4737 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
4738}
4739.ripple,
4740.fab a,
5d51ea26
DC
4741.link,
4742.item-link,
4743.list-button,
5309fbda
DC
4744.button,
4745.dialog-button,
4746.tab-link,
4747.radio,
4748.checkbox,
4749.actions-button,
4750.speed-dial-buttons a {
4751 -webkit-user-select: none;
4752 -moz-user-select: none;
4753 -ms-user-select: none;
4754 user-select: none;
4755}
4756.ripple-wave {
4757 left: 0;
4758 top: 0;
4759 position: absolute !important;
4760 border-radius: 50%;
4761 pointer-events: none;
4762 z-index: -1;
4763 padding: 0;
4764 margin: 0;
4765 font-size: 0;
4766 transform: translate3d(0px, 0px, 0) scale(0);
4767 transition-duration: 1400ms;
4768 background-color: var(--f7-touch-ripple-color);
4769 will-change: transform, opacity;
4770}
4771.ripple-wave.ripple-wave-fill {
4772 transition-duration: 300ms;
4773 opacity: 0.35;
4774}
4775.ripple-wave.ripple-wave-out {
4776 transition-duration: 600ms;
4777 opacity: 0;
4778}
4779.button-fill .ripple-wave,
4780.picker-calendar-day .ripple-wave,
4781.menu .ripple-wave {
4782 z-index: 1;
4783}
4784.checkbox .ripple-wave,
4785.radio .ripple-wave,
4786.data-table .sortable-cell .ripple-wave {
4787 z-index: 0;
4788}
4789[class*="ripple-color-"] {
4790 --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
4791}
4792/* === Icon === */
4793i.icon {
4794 display: inline-block;
4795 vertical-align: middle;
4796 background-size: 100% auto;
4797 background-position: center;
4798 background-repeat: no-repeat;
4799 font-style: normal;
4800 position: relative;
4801}
4802.icon-back:after,
4803.icon-prev:after,
4804.icon-forward:after,
4805.icon-next:after {
4806 font-family: 'framework7-core-icons';
4807 font-weight: normal;
4808 font-style: normal;
4809 line-height: 1;
4810 letter-spacing: normal;
4811 text-transform: none;
4812 white-space: nowrap;
4813 word-wrap: normal;
4814 direction: ltr;
4815 -webkit-font-smoothing: antialiased;
4816 text-rendering: optimizeLegibility;
4817 -moz-osx-font-smoothing: grayscale;
4818 -moz-font-feature-settings: "liga";
4819 font-feature-settings: "liga";
4820 text-align: center;
4821 display: block;
4822 width: 100%;
4823 height: 100%;
4824 font-size: 20px;
4825}
4826.icon[class*="color-"] {
4827 color: var(--f7-theme-color);
4828}
4829.ios .icon-back,
4830.ios .icon-prev,
4831.ios .icon-forward,
4832.ios .icon-next {
4833 width: 12px;
4834 height: 20px;
4835 line-height: 20px;
4836}
4837.ios .icon-back:after,
4838.ios .icon-prev:after,
4839.ios .icon-forward:after,
4840.ios .icon-next:after {
4841 line-height: inherit;
4842}
4843.ios .icon-prev:after,
4844.ios .icon-next:after {
4845 font-size: 16px;
4846}
4847.ios .item-media .icon {
4848 color: #808080;
4849}
4850.ios .item-media .f7-icons {
4851 font-size: 28px;
4852 width: 28px;
4853 height: 28px;
4854}
4855.ios .icon-back:after,
4856.ios .icon-prev:after {
4857 content: 'chevron_right_ios';
4858}
4859.ios .icon-forward:after,
4860.ios .icon-next:after {
4861 content: 'chevron_left_ios';
4862}
4863.md .icon-back,
4864.md .icon-forward,
4865.md .icon-next,
4866.md .icon-prev {
4867 width: 24px;
4868 height: 24px;
4869}
4870.md .icon-back:after,
4871.md .icon-forward:after,
4872.md .icon-next:after,
4873.md .icon-prev:after {
4874 line-height: 1.2;
4875}
4876.md .item-media .icon {
4877 color: #737373;
4878}
4879.md .item-media .material-icons {
4880 font-size: 24px;
4881 width: 24px;
4882 height: 24px;
4883}
4884.md .icon-back:after {
4885 content: 'arrow_right_md';
4886}
4887.md .icon-forward:after {
4888 content: 'arrow_left_md';
4889}
4890.md .icon-next:after {
4891 content: 'chevron_left_md';
4892}
4893.md .icon-prev:after {
4894 content: 'chevron_right_md';
4895}
5d51ea26
DC
4896.aurora .f7-icons,
4897.aurora .material-icons {
4898 font-size: 18px;
4899}
4900.aurora .icon-back,
4901.aurora .icon-prev,
4902.aurora .icon-forward,
4903.aurora .icon-next {
4904 width: 9px;
4905 height: 14px;
4906 line-height: 14px;
4907}
4908.aurora .icon-back:after,
4909.aurora .icon-prev:after,
4910.aurora .icon-forward:after,
4911.aurora .icon-next:after {
4912 line-height: inherit;
4913}
4914.aurora .item-media .icon {
4915 color: #808080;
4916}
4917.aurora .item-media .f7-icons {
4918 font-size: 18px;
4919 width: 18px;
4920 height: 18px;
4921}
4922.aurora .icon-back:after,
4923.aurora .icon-prev:after {
4924 content: 'chevron_right_aurora';
4925}
4926.aurora .icon-forward:after,
4927.aurora .icon-next:after {
4928 content: 'chevron_left_aurora';
4929}
5309fbda
DC
4930.custom-modal-backdrop {
4931 z-index: 10500;
4932}
4933.custom-modal-backdrop,
4934.actions-backdrop,
4935.dialog-backdrop,
4936.popover-backdrop,
4937.popup-backdrop,
4938.preloader-backdrop,
4939.sheet-backdrop {
4940 position: absolute;
4941 left: 0;
4942 top: 0;
4943 width: 100%;
4944 height: 100%;
4945 background: rgba(0, 0, 0, 0.4);
4946 z-index: 13000;
4947 visibility: hidden;
4948 opacity: 0;
4949 transition-duration: 400ms;
4950}
4951.custom-modal-backdrop.not-animated,
4952.actions-backdrop.not-animated,
4953.dialog-backdrop.not-animated,
4954.popover-backdrop.not-animated,
4955.popup-backdrop.not-animated,
4956.preloader-backdrop.not-animated,
4957.sheet-backdrop.not-animated {
4958 transition-duration: 0ms;
4959}
4960.custom-modal-backdrop.backdrop-in,
4961.actions-backdrop.backdrop-in,
4962.dialog-backdrop.backdrop-in,
4963.popover-backdrop.backdrop-in,
4964.popup-backdrop.backdrop-in,
4965.preloader-backdrop.backdrop-in,
4966.sheet-backdrop.backdrop-in {
4967 visibility: visible;
4968 opacity: 1;
4969}
5d51ea26
DC
4970/* === Appbar === */
4971:root {
4972 /*
4973 --f7-appbar-offset: var(--f7-appbar-height);
4974 --f7-appbar-extra-offset: 0px;
4975 --f7-appbar-bg-color: var(--f7-bars-bg-color);
4976 --f7-appbar-bg-image: var(--f7-bars-bg-image);
4977 --f7-appbar-border-color: var(--f7-bars-border-color);
4978 --f7-appbar-link-color: var(--f7-bars-link-color);
4979 --f7-appbar-text-color: var(--f7-bars-text-color);
4980 */
4981 --f7-appbar-shadow-image: none;
4982}
4983.ios {
4984 --f7-appbar-height: 44px;
4985 --f7-appbar-inner-padding-left: 8px;
4986 --f7-appbar-inner-padding-right: 8px;
4987}
4988.md {
4989 --f7-appbar-height: 48px;
4990 --f7-appbar-inner-padding-left: 16px;
4991 --f7-appbar-inner-padding-right: 16px;
4992}
4993.aurora {
4994 --f7-appbar-height: 38px;
4995 --f7-appbar-inner-padding-left: 15px;
4996 --f7-appbar-inner-padding-right: 15px;
4997}
4998.appbar {
4999 position: relative;
5000 left: 0;
5001 top: 0;
5002 width: 100%;
5003 z-index: 500;
5004 -webkit-backface-visibility: hidden;
5005 backface-visibility: hidden;
5006 box-sizing: border-box;
5007 margin: 0;
5008 transform: translate3d(0, 0, 0);
5009 height: var(--f7-appbar-height);
5010 background-image: var(--f7-appbar-bg-image, var(--f7-bars-bg-image));
5011 background-color: var(--f7-appbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
5012 color: var(--f7-appbar-text-color, var(--f7-bars-text-color));
5013 font-size: var(--f7-appbar-font-size);
5014 z-index: 7000;
5015}
5016.appbar .panel ~ .appbar {
5017 z-index: 5500;
5018}
5019.appbar a {
5020 color: var(--f7-appbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
5021}
5022.appbar a.link {
5023 display: flex;
5024 justify-content: flex-start;
5025 line-height: var(--f7-appbar-link-line-height, var(--f7-appbar-height));
5026 height: var(--f7-appbar-link-height, var(--f7-appbar-height));
5027}
5028.appbar .left,
5029.appbar .center,
5030.appbar .right {
5031 display: flex;
5032 align-items: center;
5033}
5034.appbar.no-hairline:after,
5035.appbar.no-border:after {
5036 display: none !important;
5037}
5038.appbar.no-hairline .title-large:after,
5039.appbar.no-border .title-large:after {
5040 display: none !important;
5041}
5042.appbar.no-shadow:before {
5043 display: none !important;
5044}
5045.appbar:after,
5046.appbar:before {
5047 -webkit-backface-visibility: hidden;
5048 backface-visibility: hidden;
5049}
5050.appbar:after {
5051 content: '';
5052 position: absolute;
5053 background-color: var(--f7-appbar-border-color, var(--f7-bars-border-color));
5054 display: block;
5055 z-index: 15;
5056 top: auto;
5057 right: auto;
5058 bottom: 0;
5059 left: 0;
5060 height: 1px;
5061 width: 100%;
5062 transform-origin: 50% 100%;
5063 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5064}
5065.appbar:before {
5066 content: '';
5067 position: absolute;
5068 right: 0;
5069 width: 100%;
5070 top: 100%;
5071 bottom: auto;
5072 height: 8px;
5073 pointer-events: none;
5074 background: var(--f7-appbar-shadow-image);
5075}
5076.appbar:after {
5077 z-index: 1;
5078}
5079.appbar ~ * {
5080 --f7-appbar-app-offset: calc(var(--f7-appbar-height) + var(--f7-appbar-extra-offset, 0px));
5081}
5082.appbar-inner {
5083 position: absolute;
5084 left: 0;
5085 top: 0;
5086 width: 100%;
5087 height: var(--f7-appbar-height);
5088 display: flex;
5089 align-items: center;
5090 justify-content: space-between;
5091 box-sizing: border-box;
5092 padding: 0 calc(var(--f7-appbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-appbar-inner-padding-left) + var(--f7-safe-area-left));
5093}
5094.appbar-inner.stacked {
5095 display: none;
5096}
5309fbda
DC
5097/* === Dialog === */
5098:root {
5099 --f7-dialog-button-text-color: var(--f7-theme-color);
5d51ea26
DC
5100 --f7-dialog-button-text-align: center;
5101 --f7-dialog-input-bg-color: #fff;
5309fbda
DC
5102}
5103.ios {
5104 --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
5105 --f7-dialog-box-shadow: none;
5106 --f7-dialog-width: 270px;
5d51ea26 5107 --f7-dialog-inner-padding: 15px;
5309fbda
DC
5108 --f7-dialog-border-radius: 13px;
5109 --f7-dialog-text-color: #000;
5110 --f7-dialog-text-align: center;
5111 --f7-dialog-font-size: 14px;
5112 --f7-dialog-title-text-color: inherit;
5113 --f7-dialog-title-font-size: 18px;
5114 --f7-dialog-title-font-weight: 600;
5115 --f7-dialog-title-line-height: inherit;
5116 --f7-dialog-button-font-size: 17px;
5117 --f7-dialog-button-height: 44px;
5118 --f7-dialog-button-letter-spacing: 0;
5309fbda
DC
5119 --f7-dialog-button-font-weight: 400;
5120 --f7-dialog-button-text-transform: none;
5121 --f7-dialog-button-pressed-bg-color: rgba(230, 230, 230, 0.95);
5d51ea26 5122 --f7-dialog-input-border-radius: 4px;
5309fbda
DC
5123 --f7-dialog-input-font-size: 14px;
5124 --f7-dialog-input-height: 32px;
5309fbda
DC
5125 --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
5126 --f7-dialog-input-border-width: 1px;
5127 --f7-dialog-input-placeholder-color: #a9a9a9;
5128 --f7-dialog-preloader-size: 34px;
5129}
5130.md {
5131 --f7-dialog-bg-color: #fff;
5132 --f7-dialog-box-shadow: var(--f7-elevation-24);
5133 --f7-dialog-width: 280px;
5d51ea26 5134 --f7-dialog-inner-padding: 24px;
5309fbda
DC
5135 --f7-dialog-border-radius: 4px;
5136 --f7-dialog-text-color: #757575;
5d51ea26 5137 --f7-dialog-text-align: right;
5309fbda
DC
5138 --f7-dialog-font-size: 16px;
5139 --f7-dialog-title-text-color: #212121;
5140 --f7-dialog-title-font-size: 20px;
5141 --f7-dialog-title-font-weight: 500;
5142 --f7-dialog-title-line-height: 1.3;
5143 --f7-dialog-button-font-size: 14px;
5144 --f7-dialog-button-height: 36px;
5145 --f7-dialog-button-letter-spacing: 0.03em;
5309fbda
DC
5146 --f7-dialog-button-font-weight: 500;
5147 --f7-dialog-button-text-transform: uppercase;
5148 --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
5d51ea26 5149 --f7-dialog-input-border-radius: 0px;
5309fbda
DC
5150 --f7-dialog-input-font-size: 16px;
5151 --f7-dialog-input-height: 36px;
5309fbda
DC
5152 --f7-dialog-input-border-color: transparent;
5153 --f7-dialog-input-border-width: 0px;
5154 --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
5155 --f7-dialog-preloader-size: 32px;
5156}
5d51ea26
DC
5157.aurora {
5158 --f7-dialog-bg-color: #fff;
5159 --f7-dialog-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15), 0 25px 30px 0 rgba(0,0,0,0.35);
5160 --f7-dialog-width: 300px;
5161 --f7-dialog-inner-padding: 20px;
5162 --f7-dialog-border-radius: 4px;
5163 --f7-dialog-text-color: #000;
5164 --f7-dialog-text-align: right;
5165 --f7-dialog-font-size: 14px;
5166 --f7-dialog-title-text-color: inherit;
5167 --f7-dialog-title-font-size: 14px;
5168 --f7-dialog-title-font-weight: 700;
5169 --f7-dialog-title-line-height: inherit;
5170 --f7-dialog-button-text-color: #fff;
5171 --f7-dialog-button-font-size: 13px;
5172 --f7-dialog-button-height: 28px;
5173 --f7-dialog-button-letter-spacing: 0;
5174 --f7-dialog-button-font-weight: 500;
5175 --f7-dialog-button-text-transform: none;
5176 /*
5177 --f7-dialog-button-pressed-bg-color: var(--f7-theme-color-shade);
5178 */
5179 --f7-dialog-input-border-radius: 4px;
5180 --f7-dialog-input-font-size: 13px;
5181 --f7-dialog-input-height: 24px;
5182 --f7-dialog-input-border-color: rgba(0, 0, 0, 0.12);
5183 --f7-dialog-input-border-width: 1px;
5184 --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.32);
5185 --f7-dialog-preloader-size: 24px;
5186}
5309fbda
DC
5187.dialog {
5188 position: absolute;
5189 z-index: 13500;
5190 left: 50%;
5191 margin-top: 0;
5192 top: 50%;
5193 overflow: hidden;
5194 opacity: 0;
5195 transform: translate3d(0, -50%, 0) scale(1.185);
5196 transition-property: transform, opacity;
5197 display: none;
5198 transition-duration: 400ms;
5199 box-shadow: var(--f7-dialog-box-shadow);
5200 width: var(--f7-dialog-width);
5201 margin-left: calc(-1 * var(--f7-dialog-width) / 2);
5202 border-radius: var(--f7-dialog-border-radius);
5203 text-align: var(--f7-dialog-text-align);
5204 color: var(--f7-dialog-text-color);
5205 font-size: var(--f7-dialog-font-size);
5206 will-change: transform, opacity;
5207}
5208.dialog.modal-in {
5209 opacity: 1;
5210 transform: translate3d(0, -50%, 0) scale(1);
5211}
5212.dialog.modal-out {
5213 opacity: 0;
5214 z-index: 13499;
5215}
5216.dialog.not-animated {
5217 transition-duration: 0ms;
5218}
5219.dialog-inner {
5220 position: relative;
5d51ea26 5221 padding: var(--f7-dialog-inner-padding);
5309fbda
DC
5222}
5223.dialog-title {
5224 color: var(--f7-dialog-title-text-color);
5225 font-size: var(--f7-dialog-title-font-size);
5226 font-weight: var(--f7-dialog-title-font-weight);
5227 line-height: var(--f7-dialog-title-line-height);
5228}
5229.dialog-buttons {
5230 position: relative;
5231 display: flex;
5232 flex-direction: row-reverse;
5233}
5234.dialog-buttons-vertical .dialog-buttons {
5235 display: block;
5236 height: auto !important;
5237}
5238.dialog-button {
5239 box-sizing: border-box;
5240 overflow: hidden;
5241 position: relative;
5242 white-space: nowrap;
5243 text-overflow: ellipsis;
5244 color: var(--f7-dialog-button-text-color);
5245 font-size: var(--f7-dialog-button-font-size);
5246 height: var(--f7-dialog-button-height);
5247 line-height: var(--f7-dialog-button-height);
5248 letter-spacing: var(--f7-dialog-button-letter-spacing);
5249 text-align: var(--f7-dialog-button-text-align);
5250 font-weight: var(--f7-dialog-button-font-weight);
5251 text-transform: var(--f7-dialog-button-text-transform);
5252 display: block;
5253 cursor: pointer;
5254}
5309fbda
DC
5255.dialog-no-buttons .dialog-buttons {
5256 display: none;
5257}
5258.dialog-input-field {
5259 position: relative;
5260}
5261input.dialog-input[type] {
5262 box-sizing: border-box;
5263 margin: 0;
5264 margin-top: 15px;
5d51ea26 5265 border-radius: var(--f7-dialog-input-border-radius);
5309fbda
DC
5266 -webkit-appearance: none;
5267 -moz-appearance: none;
5268 appearance: none;
5269 width: 100%;
5270 display: block;
5271 font-family: inherit;
5272 box-shadow: none;
5273 font-size: var(--f7-dialog-input-font-size);
5274 height: var(--f7-dialog-input-height);
5275 background-color: var(--f7-dialog-input-bg-color);
5276 border: var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color);
5277}
5278input.dialog-input[type]::-webkit-input-placeholder {
5279 color: var(--f7-dialog-input-placeholder-color);
5280}
5281input.dialog-input[type]::-moz-placeholder {
5282 color: var(--f7-dialog-input-placeholder-color);
5283}
5284input.dialog-input[type]::-ms-input-placeholder {
5285 color: var(--f7-dialog-input-placeholder-color);
5286}
5287input.dialog-input[type]::placeholder {
5288 color: var(--f7-dialog-input-placeholder-color);
5289}
5d51ea26
DC
5290.dialog-input-double input.dialog-input {
5291 border-radius: var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius) 0 0;
5292}
5293.dialog-input-double + .dialog-input-double input.dialog-input {
5294 border-radius: 0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius);
5295}
5309fbda
DC
5296.dialog-preloader .preloader {
5297 --f7-preloader-size: var(--f7-dialog-preloader-size);
5298}
5299html.with-modal-dialog .page-content {
5300 overflow: hidden;
5301 -webkit-overflow-scrolling: auto;
5302}
5303.ios .dialog.modal-out {
5304 transform: translate3d(0, -50%, 0) scale(1);
5305}
5306.ios .dialog-inner {
5309fbda
DC
5307 border-radius: var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0;
5308 background: var(--f7-dialog-bg-color);
5309}
5310.ios .dialog-inner:after {
5311 content: '';
5312 position: absolute;
5313 background-color: rgba(0, 0, 0, 0.2);
5314 display: block;
5315 z-index: 15;
5316 top: auto;
5317 right: auto;
5318 bottom: 0;
5319 left: 0;
5320 height: 1px;
5321 width: 100%;
5322 transform-origin: 50% 100%;
5323 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5324}
5325.ios .dialog-title + .dialog-text {
5326 margin-top: 5px;
5327}
5328.ios .dialog-buttons {
5329 height: 44px;
5330 justify-content: center;
5331}
5332.ios .dialog-button {
5333 width: 100%;
5334 padding: 0 5px;
5335 -webkit-box-flex: 1;
5336 -ms-flex: 1;
5337 background: var(--f7-dialog-bg-color);
5338}
5339.ios .dialog-button:after {
5340 content: '';
5341 position: absolute;
5342 background-color: rgba(0, 0, 0, 0.2);
5343 display: block;
5344 z-index: 15;
5345 top: 0;
5346 right: 0;
5347 bottom: auto;
5348 left: auto;
5349 width: 1px;
5350 height: 100%;
5351 transform-origin: 100% 50%;
5352 transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
5353}
5354.ios .dialog-button.active-state {
5355 background-color: var(--f7-dialog-button-pressed-bg-color);
5356}
5357.ios .dialog-button:first-child {
5358 border-radius: 0 0 0 var(--f7-dialog-border-radius);
5359}
5360.ios .dialog-button:last-child {
5361 border-radius: 0 0 var(--f7-dialog-border-radius) 0;
5362}
5363.ios .dialog-button:last-child:after {
5364 display: none !important;
5365}
5366.ios .dialog-button:first-child:last-child {
5367 border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
5368}
5369.ios .dialog-button.dialog-button-bold {
5370 font-weight: 500;
5371}
5d51ea26
DC
5372.ios .dialog-button[class*="color-"] {
5373 --f7-dialog-button-text-color: var(--f7-theme-color);
5374}
5309fbda
DC
5375.ios .dialog-buttons-vertical .dialog-buttons {
5376 height: auto;
5377}
5378.ios .dialog-buttons-vertical .dialog-button {
5379 border-radius: 0;
5380}
5381.ios .dialog-buttons-vertical .dialog-button:after {
5382 content: '';
5383 position: absolute;
5384 background-color: rgba(0, 0, 0, 0.2);
5385 display: block;
5386 z-index: 15;
5387 top: auto;
5388 right: auto;
5389 bottom: 0;
5390 left: 0;
5391 height: 1px;
5392 width: 100%;
5393 transform-origin: 50% 100%;
5394 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5395}
5396.ios .dialog-buttons-vertical .dialog-button:last-child {
5397 border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
5398}
5399.ios .dialog-buttons-vertical .dialog-button:last-child:after {
5400 display: none !important;
5401}
5402.ios .dialog-no-buttons .dialog-inner {
5403 border-radius: var(--f7-dialog-border-radius);
5404}
5405.ios .dialog-no-buttons .dialog-inner:after {
5406 display: none !important;
5407}
5408.ios .dialog-input-field {
5409 margin-top: 15px;
5410}
5411.ios .dialog-input {
5412 padding: 0 5px;
5413}
5414.ios .dialog-input + .dialog-input {
5415 margin-top: 5px;
5416}
5417.ios .dialog-input-double + .dialog-input-double {
5418 margin-top: 0;
5419}
5420.ios .dialog-input-double + .dialog-input-double .dialog-input {
5421 border-top: 0;
5422 margin-top: 0;
5423}
5424.ios .dialog-preloader .dialog-title ~ .preloader,
5425.ios .dialog-preloader .dialog-text ~ .preloader {
5426 margin-top: 15px;
5427}
5428.ios .dialog-progress .dialog-title ~ .progressbar,
5429.ios .dialog-progress .dialog-text ~ .progressbar,
5430.ios .dialog-progress .dialog-title ~ .progressbar-infinite,
5431.ios .dialog-progress .dialog-text ~ .progressbar-infinite {
5432 margin-top: 15px;
5433}
5434.md .dialog {
5435 background: var(--f7-dialog-bg-color);
5436}
5437.md .dialog.modal-out {
5438 transform: translate3d(0, -50%, 0) scale(0.815);
5439}
5309fbda
DC
5440.md .dialog-title + .dialog-text {
5441 margin-top: 20px;
5442}
5443.md .dialog-text {
5444 line-height: 1.5;
5445}
5446.md .dialog-buttons {
5447 height: 48px;
5448 padding: 6px 8px;
5449 overflow: hidden;
5450 box-sizing: border-box;
5451 justify-content: flex-end;
5452}
5453.md .dialog-button {
5454 border-radius: 4px;
5455 min-width: 64px;
5456 padding: 0 8px;
5457 border: none;
5458 transition-duration: 300ms;
5459 transform: translate3d(0, 0, 0);
5460}
5461.md .dialog-button.active-state {
5462 background-color: var(--f7-dialog-button-pressed-bg-color);
5463}
5464.md .dialog-button.dialog-button-bold {
5465 font-weight: 700;
5466}
5467.md .dialog-button + .dialog-button {
5468 margin-left: 4px;
5469}
5d51ea26
DC
5470.md .dialog-button[class*="color-"] {
5471 --f7-dialog-button-text-color: var(--f7-theme-color);
5472}
5309fbda
DC
5473.md .dialog-buttons-vertical .dialog-buttons {
5474 padding: 0 0 8px 0;
5475}
5476.md .dialog-buttons-vertical .dialog-button {
5477 margin-left: 0;
5478 text-align: right;
5479 height: 48px;
5480 line-height: 48px;
5481 border-radius: 0;
5482 padding-left: 16px;
5483 padding-right: 16px;
5484}
5485.md .dialog-input {
5486 padding: 0;
5487 transition-duration: 200ms;
5488 position: relative;
5489}
5490.md .dialog-input + .dialog-input {
5491 margin-top: 16px;
5492}
5493.md .dialog-preloader .dialog-title,
5494.md .dialog-progress .dialog-title,
5495.md .dialog-preloader .dialog-inner,
5496.md .dialog-progress .dialog-inner {
5497 text-align: center;
5498}
5499.md .dialog-preloader .dialog-title ~ .preloader,
5500.md .dialog-preloader .dialog-text ~ .preloader {
5501 margin-top: 20px;
5502}
5503.md .dialog-progress .dialog-title ~ .progressbar,
5504.md .dialog-progress .dialog-text ~ .progressbar,
5505.md .dialog-progress .dialog-title ~ .progressbar-infinite,
5506.md .dialog-progress .dialog-text ~ .progressbar-infinite {
5507 margin-top: 16px;
5508}
5d51ea26
DC
5509.aurora .dialog {
5510 background: var(--f7-dialog-bg-color);
5309fbda 5511}
5d51ea26
DC
5512.aurora .dialog.modal-out {
5513 transform: translate3d(0, -50%, 0) scale(0.815);
5514}
5515.aurora .dialog-title + .dialog-text {
5516 margin-top: 10px;
5517}
5518.aurora .dialog-text {
5519 line-height: 1.5;
5520}
5521.aurora .dialog-buttons {
5522 padding: var(--f7-dialog-inner-padding);
5523 padding-top: 0;
5524 overflow: hidden;
5525 box-sizing: border-box;
5526 justify-content: flex-end;
5527}
5528.aurora .dialog-button {
5529 border-radius: 4px;
5530 min-width: 64px;
5531 padding: 0 10px;
5532 border: none;
5533 transition-duration: 300ms;
5534 transform: translate3d(0, 0, 0);
5535 background: var(--f7-theme-color);
5536}
5537.aurora .dialog-button.active-state {
5538 background-color: var(--f7-dialog-button-pressed-bg-color, var(--f7-theme-color-shade));
5539}
5540.aurora .dialog-button.dialog-button-bold {
5541 font-weight: 600;
5542}
5543.aurora .dialog-button + .dialog-button {
5544 margin-left: 15px;
5545}
5546.aurora .dialog-buttons-vertical .dialog-buttons {
5547 display: flex;
5548 flex-direction: column;
5549 align-items: flex-end;
5550}
5551.aurora .dialog-buttons-vertical .dialog-button {
5552 margin-left: 0;
5553 flex-shrink: 0;
5554}
5555.aurora .dialog-buttons-vertical .dialog-button + .dialog-button {
5556 margin-top: 5px;
5557}
5558.aurora .dialog-input-field {
5559 margin-top: 10px;
5560}
5561.aurora .dialog-input-field input.dialog-input {
5562 margin-top: 0;
5563}
5564.aurora .dialog-input {
5565 padding: 0 4px;
5566 transition-duration: 200ms;
5567 position: relative;
5568}
5569.aurora .dialog-input + .dialog-input {
5570 margin-top: 10px;
5571}
5572.aurora .dialog-input-double + .dialog-input-double {
5573 margin-top: 0;
5574}
5575.aurora .dialog-input-double + .dialog-input-double .dialog-input {
5576 border-top: 0;
5577 margin-top: 0;
5578}
5579.aurora .dialog-preloader .dialog-title,
5580.aurora .dialog-progress .dialog-title,
5581.aurora .dialog-preloader .dialog-inner,
5582.aurora .dialog-progress .dialog-inner {
5583 text-align: center;
5584}
5585.aurora .dialog-preloader .dialog-title ~ .preloader,
5586.aurora .dialog-preloader .dialog-text ~ .preloader {
5587 margin-top: 10px;
5588}
5589.aurora .dialog-progress .dialog-title ~ .progressbar,
5590.aurora .dialog-progress .dialog-text ~ .progressbar,
5591.aurora .dialog-progress .dialog-title ~ .progressbar-infinite,
5592.aurora .dialog-progress .dialog-text ~ .progressbar-infinite {
5593 margin-top: 15px;
5594}
5595/* === Popup === */
5596:root {
5597 --f7-popup-border-radius: 0px;
5598 --f7-popup-tablet-width: 630px;
5599 --f7-popup-tablet-height: 630px;
5600 /*
5601 --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
5602 */
5603}
5604.ios {
5605 --f7-popup-box-shadow: none;
5309fbda
DC
5606}
5607.md {
5608 --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
5609}
5d51ea26
DC
5610.aurora {
5611 --f7-popup-tablet-border-radius: 4px;
5612 --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
5613}
5309fbda
DC
5614.popup-backdrop {
5615 z-index: 10500;
5616}
5617.popup {
5618 position: absolute;
5619 left: 0;
5620 top: var(--f7-statusbar-height);
5621 width: 100%;
5622 height: calc(100% - var(--f7-statusbar-height));
5623 display: none;
5624 box-sizing: border-box;
5625 transition-property: transform;
5626 transform: translate3d(0, 100%, 0);
5627 background: #fff;
5628 z-index: 11000;
5629 will-change: transform;
5630 overflow: hidden;
5631 border-radius: var(--f7-popup-border-radius);
5632}
5633.popup.modal-in,
5634.popup.modal-out {
5635 transition-duration: 400ms;
5636}
5637.popup.not-animated {
5638 transition-duration: 0ms;
5639}
5640.popup.modal-in {
5641 display: block;
5642 transform: translate3d(0, 0, 0);
5643}
5644.popup.modal-out {
5645 transform: translate3d(0, 100%, 0);
5646}
5d51ea26
DC
5647.popup.swipe-close-to-top.modal-out {
5648 transform: translate3d(0, -100%, 0);
5649}
5309fbda
DC
5650@media (min-width: 630px) and (min-height: 630px) {
5651 .popup:not(.popup-tablet-fullscreen) {
5652 width: var(--f7-popup-tablet-width);
5653 height: var(--f7-popup-tablet-height);
5654 left: 50%;
5655 top: 50%;
5656 margin-left: calc(-1 * var(--f7-popup-tablet-width) / 2);
5657 margin-top: calc(-1 * var(--f7-popup-tablet-height) / 2);
5658 transform: translate3d(0, 100vh, 0);
5659 box-shadow: var(--f7-popup-box-shadow);
5660 border-radius: var(--f7-popup-tablet-border-radius, var(--f7-popup-border-radius));
5661 }
5662 .popup:not(.popup-tablet-fullscreen).modal-in {
5663 transform: translate3d(0, 0, 0);
5664 }
5665 .popup:not(.popup-tablet-fullscreen).modal-out {
5666 transform: translate3d(0, 100vh, 0);
5667 }
5d51ea26
DC
5668 .popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out {
5669 transform: translate3d(0, -100vh, 0);
5670 }
5309fbda
DC
5671}
5672@media (max-width: 629px), (max-height: 629px) {
5673 .popup-backdrop {
5674 z-index: 9500;
5675 }
5676}
5677html.with-modal-popup .framework7-root > .views .page-content,
5678html.with-modal-popup .framework7-root > .view .page-content,
5679html.with-modal-popup .framework7-root > .panel .page-content {
5680 overflow: hidden;
5681 -webkit-overflow-scrolling: auto;
5682}
5683/* === Login Screen === */
5684:root {
5685 --f7-login-screen-bg-color: #fff;
5686 --f7-login-screen-content-bg-color: #fff;
5687 --f7-login-screen-blocks-max-width: 480px;
5688 /*
5689 --f7-login-screen-list-button-text-color: var(--f7-theme-color);
5690 */
5691 --f7-login-screen-title-text-align: center;
5692 --f7-login-screen-title-text-color: inherit;
5693 --f7-login-screen-title-letter-spacing: 0;
5694}
5695:root .theme-dark,
5696:root.theme-dark {
5697 --f7-login-screen-bg-color: #171717;
5698 --f7-login-screen-content-bg-color: transparent;
5699}
5700.ios {
5701 --f7-login-screen-blocks-margin-vertical: 25px;
5702 --f7-login-screen-title-font-size: 30px;
5703 --f7-login-screen-title-font-weight: normal;
5704}
5705.md {
5706 --f7-login-screen-blocks-margin-vertical: 24px;
5707 --f7-login-screen-title-font-size: 34px;
5708 --f7-login-screen-title-font-weight: normal;
5709}
5d51ea26
DC
5710.aurora {
5711 --f7-login-screen-blocks-margin-vertical: 15px;
5712 --f7-login-screen-title-font-size: 28px;
5713 --f7-login-screen-title-font-weight: 500;
5714}
5309fbda
DC
5715.login-screen {
5716 position: absolute;
5717 left: 0;
5718 top: var(--f7-statusbar-height);
5719 width: 100%;
5720 height: calc(100% - var(--f7-statusbar-height));
5721 display: none;
5722 box-sizing: border-box;
5723 transition-property: transform;
5724 transform: translate3d(0, 100%, 0);
5725 background: var(--f7-login-screen-bg-color);
5726 z-index: 11000;
5727 will-change: transform;
5728}
5729.login-screen.modal-in,
5730.login-screen.modal-out {
5731 transition-duration: 400ms;
5732}
5733.login-screen.not-animated {
5734 transition-duration: 0ms;
5735}
5736.login-screen.modal-in {
5737 display: block;
5738 transform: translate3d(0, 0, 0);
5739}
5740.login-screen.modal-out {
5741 transform: translate3d(0, 100%, 0);
5742}
5743.login-screen-content {
5744 background: var(--f7-login-screen-content-bg-color);
5745}
5746.login-screen-content .list-button {
5747 text-align: center;
5748 color: var(--f7-login-screen-list-button-text-color, var(--f7-theme-color));
5749}
5750.login-screen-content .login-screen-title,
5751.login-screen-content .list,
5752.login-screen-content .block {
5753 margin: var(--f7-login-screen-blocks-margin-vertical) auto;
5754}
5755.login-screen-content .login-screen-title,
5756.login-screen-content .list,
5757.login-screen-content .block,
5758.login-screen-content .block-footer,
5759.login-screen-content .block-header {
5760 max-width: var(--f7-login-screen-blocks-max-width);
5761}
5762.login-screen-content .list ul {
5763 background: none;
5764}
5765.login-screen-content .list ul:before {
5766 display: none !important;
5767}
5768.login-screen-content .list ul:after {
5769 display: none !important;
5770}
5771.login-screen-content .block-footer,
5772.login-screen-content .block-header {
5773 text-align: center;
5774 margin-left: auto;
5775 margin-right: auto;
5776}
5777.login-screen-title {
5778 text-align: var(--f7-login-screen-title-text-align);
5779 font-size: var(--f7-login-screen-title-font-size);
5780 font-weight: var(--f7-login-screen-title-font-weight);
5781 color: var(--f7-login-screen-title-text-color);
5782 letter-spacing: var(--f7-login-screen-title-letter-spacing);
5783}
5784.theme-dark .login-screen-content .list ul,
5785.theme-dark .login-screen-content .block-strong {
5786 background-color: transparent;
5787}
5788/* === Popover === */
5789:root {
5790 --f7-popover-width: 260px;
5791}
5792.ios {
5793 --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
5794 --f7-popover-border-radius: 13px;
5795 --f7-popover-box-shadow: none;
5796 --f7-popover-actions-icon-size: 28px;
5797 --f7-popover-actions-label-text-color: #8a8a8a;
5798}
5799.ios .theme-dark,
5800.ios.theme-dark {
5801 --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
5802}
5803.md {
5804 --f7-popover-bg-color: #fff;
5805 --f7-popover-border-radius: 4px;
5806 --f7-popover-box-shadow: var(--f7-elevation-8);
5807 --f7-popover-actions-icon-size: 24px;
5808 --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.54);
5809}
5810.md .theme-dark,
5811.md.theme-dark {
5812 --f7-popover-bg-color: #202020;
5813 --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.54);
5814}
5d51ea26
DC
5815.aurora {
5816 --f7-popover-width: 200px;
5817 --f7-popover-bg-color: #fff;
5818 --f7-popover-border-radius: 4px;
5819 --f7-popover-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1), 0 5px 11px 0 rgba(0,0,0,0.28);
5820 --f7-popover-actions-icon-size: 24px;
5821 --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.6);
5822}
5823.aurora .theme-dark,
5824.aurora.theme-dark {
5825 --f7-popover-bg-color: #202020;
5826 --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.6);
5827}
5309fbda
DC
5828.popover {
5829 width: var(--f7-popover-width);
5830 z-index: 13500;
5831 margin: 0;
5832 top: 0;
5833 opacity: 0;
5834 left: 0;
5835 position: absolute;
5836 display: none;
5837 transition-duration: 300ms;
5838 background-color: var(--f7-popover-bg-color);
5839 border-radius: var(--f7-popover-border-radius);
5840 box-shadow: var(--f7-popover-box-shadow);
5841 will-change: transform, opacity;
5842}
5843.popover .list {
5844 margin: 0;
5845}
5846.popover .list ul {
5847 background: none;
5848}
5849.popover .list:first-child ul:before {
5850 display: none !important;
5851}
5852.popover .list:last-child ul:after {
5853 display: none !important;
5854}
5855.popover .list:first-child ul {
5856 border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
5857}
5858.popover .list:first-child li:first-child,
5859.popover .list:first-child li:first-child a,
5860.popover .list:first-child li:first-child > label {
5861 border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
5862}
5863.popover .list:last-child ul {
5864 border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
5865}
5866.popover .list:last-child li:last-child,
5867.popover .list:last-child li:last-child a,
5868.popover .list:last-child li:last-child > label {
5869 border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
5870}
5871.popover .list:first-child:last-child li:first-child:last-child,
5872.popover .list:first-child:last-child li:first-child:last-child a,
5873.popover .list:first-child:last-child li:first-child:last-child > label,
5874.popover .list:first-child:last-child ul {
5875 border-radius: var(--f7-popover-border-radius);
5876}
5877.popover .list + .list {
5878 margin-top: var(--f7-list-margin-vertical);
5879}
5880.popover.modal-in {
5881 opacity: 1;
5882}
5883.popover.not-animated {
5884 transition-duration: 0ms;
5885}
5886.popover-inner {
5887 will-change: scroll-position;
5888 overflow: auto;
5889 -webkit-overflow-scrolling: touch;
5890}
5891.popover-from-actions .item-link i.icon {
5892 width: var(--f7-popover-actions-icon-size);
5893 height: var(--f7-popover-actions-icon-size);
5894 font-size: var(--f7-popover-actions-icon-size);
5895}
5896.popover-from-actions-bold {
5897 font-weight: 600;
5898}
5899.popover-from-actions-label {
5900 line-height: 1.3;
5901 position: relative;
5902 display: flex;
5903 align-items: center;
5904 padding: var(--f7-actions-label-padding);
5905 color: var(--f7-popover-actions-label-text-color);
5906 font-size: var(--f7-actions-label-font-size);
5907 justify-content: var(--f7-actions-label-justify-content);
5908}
5909.popover-from-actions-label:after {
5910 content: '';
5911 position: absolute;
5912 background-color: var(--f7-list-item-border-color);
5913 display: block;
5914 z-index: 15;
5915 top: auto;
5916 right: auto;
5917 bottom: 0;
5918 left: 0;
5919 height: 1px;
5920 width: 100%;
5921 transform-origin: 50% 100%;
5922 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5923}
5924.popover-from-actions-label:last-child:after {
5925 display: none !important;
5926}
5927.ios .popover {
5928 transform: none;
5929 transition-property: opacity;
5930}
5931.ios .popover-angle {
5932 width: 26px;
5933 height: 26px;
5934 position: absolute;
5935 left: -26px;
5936 top: 0;
5937 z-index: 100;
5938 overflow: hidden;
5939}
5940.ios .popover-angle:after {
5941 content: '';
5942 background: var(--f7-popover-bg-color);
5943 width: 26px;
5944 height: 26px;
5945 position: absolute;
5946 left: 0;
5947 top: 0;
5948 border-radius: 3px;
5949 transform: rotate(45deg);
5950}
5951.ios .popover-angle.on-left {
5952 left: -26px;
5953}
5954.ios .popover-angle.on-left:after {
5955 left: 19px;
5956 top: 0;
5957}
5958.ios .popover-angle.on-right {
5959 left: 100%;
5960}
5961.ios .popover-angle.on-right:after {
5962 left: -19px;
5963 top: 0;
5964}
5965.ios .popover-angle.on-top {
5966 left: 0;
5967 top: -26px;
5968}
5969.ios .popover-angle.on-top:after {
5970 left: 0;
5971 top: 19px;
5972}
5973.ios .popover-angle.on-bottom {
5974 left: 0;
5975 top: 100%;
5976}
5977.ios .popover-angle.on-bottom:after {
5978 left: 0;
5979 top: -19px;
5980}
5981.md .popover {
5982 transform: scale(0.85, 0.6);
5983 transition-property: opacity, transform;
5984}
5985.md .popover.modal-in {
5986 opacity: 1;
5987 transform: scale(1);
5988}
5989.md .popover.modal-out {
5990 opacity: 0;
5991 transform: scale(1);
5992}
5993.md .popover-on-top {
5994 transform-origin: center bottom;
5995}
5d51ea26
DC
5996.md .popover-on-top.popover-on-right {
5997 transform-origin: left bottom;
5998}
5999.md .popover-on-top.popover-on-left {
6000 transform-origin: right bottom;
6001}
6002.md .popover-on-middle {
6003 transform-origin: center center;
6004}
6005.md .popover-on-middle.popover-on-right {
6006 transform-origin: left center;
6007}
6008.md .popover-on-middle.popover-on-left {
6009 transform-origin: right center;
6010}
5309fbda
DC
6011.md .popover-on-bottom {
6012 transform-origin: center top;
6013}
5d51ea26
DC
6014.md .popover-on-bottom.popover-on-right {
6015 transform-origin: left top;
6016}
6017.md .popover-on-bottom.popover-on-left {
6018 transform-origin: right top;
6019}
6020.aurora .popover {
6021 transform: none;
6022 transition-property: opacity;
6023}
6024.aurora .popover-angle {
6025 width: 18px;
6026 height: 18px;
6027 position: absolute;
6028 left: -18px;
6029 top: 0;
6030 z-index: 100;
6031 overflow: hidden;
6032}
6033.aurora .popover-angle:after {
6034 content: '';
6035 background: var(--f7-popover-bg-color);
6036 width: 18px;
6037 height: 18px;
6038 position: absolute;
6039 left: 0;
6040 top: 0;
6041 border-radius: 2px;
6042 transform: rotate(45deg);
6043}
6044.aurora .popover-angle.on-left {
6045 left: -18px;
6046}
6047.aurora .popover-angle.on-left:after {
6048 left: 13px;
6049 top: 0;
6050}
6051.aurora .popover-angle.on-right {
6052 left: 100%;
6053}
6054.aurora .popover-angle.on-right:after {
6055 left: -13px;
6056 top: 0;
6057}
6058.aurora .popover-angle.on-top {
6059 left: 0;
6060 top: -18px;
6061}
6062.aurora .popover-angle.on-top:after {
6063 left: 0;
6064 top: 13px;
6065}
6066.aurora .popover-angle.on-bottom {
6067 left: 0;
6068 top: 100%;
6069}
6070.aurora .popover-angle.on-bottom:after {
6071 left: 0;
6072 top: -13px;
6073}
5309fbda 6074/* === Actions === */
5d51ea26
DC
6075:root {
6076 --f7-actions-grid-button-font-size: 12px;
6077 --f7-actions-grid-button-text-color: #757575;
6078}
5309fbda
DC
6079.ios {
6080 --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
6081 --f7-actions-border-radius: 13px;
6082 --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
5d51ea26 6083 /*
5309fbda 6084 --f7-actions-button-text-color: var(--f7-theme-color);
5d51ea26 6085 */
5309fbda
DC
6086 --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
6087 --f7-actions-button-padding: 0px;
6088 --f7-actions-button-text-align: center;
6089 --f7-actions-button-height: 57px;
6090 --f7-actions-button-height-landscape: 44px;
6091 --f7-actions-button-font-size: 20px;
6092 --f7-actions-button-icon-size: 28px;
6093 --f7-actions-button-justify-content: center;
6094 --f7-actions-label-padding: 8px 10px;
6095 --f7-actions-label-text-color: #8a8a8a;
6096 --f7-actions-label-font-size: 13px;
6097 --f7-actions-label-justify-content: center;
6098 --f7-actions-group-border-color: transparent;
6099 --f7-actions-group-margin: 8px;
5309fbda 6100 --f7-actions-grid-button-icon-size: 48px;
5309fbda
DC
6101}
6102.md {
6103 --f7-actions-bg-color: #fff;
6104 --f7-actions-border-radius: 0px;
6105 --f7-actions-button-border-color: transparent;
6106 --f7-actions-button-text-color: rgba(0, 0, 0, 0.87);
6107 --f7-actions-button-pressed-bg-color: #e5e5e5;
6108 --f7-actions-button-padding: 0 16px;
6109 --f7-actions-button-text-align: left;
6110 --f7-actions-button-height: 48px;
6111 --f7-actions-button-height-landscape: 48px;
6112 --f7-actions-button-font-size: 16px;
6113 --f7-actions-button-icon-size: 24px;
6114 --f7-actions-button-justify-content: space-between;
6115 --f7-actions-label-padding: 12px 16px;
6116 --f7-actions-label-text-color: rgba(0, 0, 0, 0.54);
6117 --f7-actions-label-font-size: 16px;
6118 --f7-actions-label-justify-content: flex-start;
6119 --f7-actions-group-border-color: #d2d2d6;
6120 --f7-actions-group-margin: 0px;
5309fbda 6121 --f7-actions-grid-button-icon-size: 48px;
5d51ea26
DC
6122}
6123.aurora {
6124 --f7-actions-bg-color: #fff;
6125 --f7-actions-border-radius: 4px;
6126 --f7-actions-button-border-color: rgba(0, 0, 0, 0.12);
6127 /*
6128 --f7-actions-button-text-color: var(--f7-theme-color);
6129 */
6130 --f7-actions-button-pressed-bg-color: #e5e5e5;
6131 --f7-actions-button-padding: 0 15px;
6132 --f7-actions-button-text-align: center;
6133 --f7-actions-button-height: 32px;
6134 --f7-actions-button-height-landscape: 32px;
6135 --f7-actions-button-font-size: 14px;
6136 --f7-actions-button-icon-size: 18px;
6137 --f7-actions-button-justify-content: space-between;
6138 --f7-actions-label-padding: 10px 15px;
6139 --f7-actions-label-text-color: rgba(0, 0, 0, 0.5);
6140 --f7-actions-label-font-size: 12px;
6141 --f7-actions-label-justify-content: center;
6142 --f7-actions-group-border-color: rgba(0, 0, 0, 0.1);
6143 --f7-actions-group-margin: 15px;
6144 --f7-actions-grid-button-icon-size: 32px;
5309fbda
DC
6145}
6146.actions-modal {
6147 position: absolute;
6148 left: 0;
6149 bottom: 0;
6150 z-index: 13500;
6151 width: 100%;
6152 transform: translate3d(0, 100%, 0);
6153 display: none;
6154 max-height: 100%;
6155 will-change: scroll-position;
6156 overflow: auto;
6157 -webkit-overflow-scrolling: touch;
6158 transition-property: transform;
6159 will-change: transform;
6160}
6161.actions-modal.modal-in,
6162.actions-modal.modal-out {
6163 transition-duration: 300ms;
6164}
6165.actions-modal.not-animated {
6166 transition-duration: 0ms;
6167}
6168.actions-modal.modal-in {
6169 transform: translate3d(0, calc(-1 * var(--f7-safe-area-bottom)), 0);
6170}
6171.actions-modal.modal-out {
6172 z-index: 13499;
6173 transform: translate3d(0, 100%, 0);
6174}
6175@media (min-width: 496px) {
6176 .actions-modal {
6177 width: 480px;
6178 left: 50%;
6179 margin-left: -240px;
6180 }
6181}
6182@media (orientation: landscape) {
6183 .actions-modal {
6184 --f7-actions-button-height: var(--f7-actions-button-height-landscape);
6185 }
6186}
6187.actions-group {
6188 overflow: hidden;
6189 position: relative;
6190 margin: var(--f7-actions-group-margin);
6191 border-radius: var(--f7-actions-border-radius);
6192 transform: translate3d(0, 0, 0);
6193}
6194.actions-group:after {
6195 content: '';
6196 position: absolute;
6197 background-color: var(--f7-actions-group-border-color);
6198 display: block;
6199 z-index: 15;
6200 top: auto;
6201 right: auto;
6202 bottom: 0;
6203 left: 0;
6204 height: 1px;
6205 width: 100%;
6206 transform-origin: 50% 100%;
6207 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
6208}
6209.actions-group:last-child:after {
6210 display: none !important;
6211}
6212.actions-button,
6213.actions-label {
6214 width: 100%;
6215 font-weight: normal;
6216 margin: 0;
6217 box-sizing: border-box;
6218 display: block;
6219 position: relative;
6220 overflow: hidden;
6221 text-align: var(--f7-actions-button-text-align);
6222 background: var(--f7-actions-bg-color);
6223}
6224.actions-button:after,
6225.actions-label:after {
6226 content: '';
6227 position: absolute;
6228 background-color: var(--f7-actions-button-border-color);
6229 display: block;
6230 z-index: 15;
6231 top: auto;
6232 right: auto;
6233 bottom: 0;
6234 left: 0;
6235 height: 1px;
6236 width: 100%;
6237 transform-origin: 50% 100%;
6238 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
6239}
6240.actions-button:first-child,
6241.actions-label:first-child {
6242 border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
6243}
6244.actions-button:last-child,
6245.actions-label:last-child {
6246 border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
6247}
6248.actions-button:last-child:after,
6249.actions-label:last-child:after {
6250 display: none !important;
6251}
6252.actions-button:first-child:last-child,
6253.actions-label:first-child:last-child {
6254 border-radius: var(--f7-actions-border-radius);
6255}
6256.actions-button a,
6257.actions-label a {
6258 text-decoration: none;
6259 color: inherit;
6260 display: block;
6261}
6262.actions-button b,
6263.actions-label b,
6264.actions-button.actions-button-bold,
6265.actions-label.actions-button-bold {
6266 font-weight: 600;
6267}
6268.actions-button {
6269 cursor: pointer;
6270 display: flex;
5d51ea26 6271 color: var(--f7-actions-button-text-color, var(--f7-theme-color));
5309fbda
DC
6272 font-size: var(--f7-actions-button-font-size);
6273 height: var(--f7-actions-button-height);
6274 line-height: var(--f7-actions-button-height);
6275 padding: var(--f7-actions-button-padding);
6276 justify-content: var(--f7-actions-button-justify-content);
6277 z-index: 10;
6278}
6279.actions-button.active-state {
6280 background-color: var(--f7-actions-button-pressed-bg-color) !important;
6281}
6282.actions-button[class*="color-"] {
6283 color: var(--f7-theme-color);
6284}
6285.actions-button-media {
6286 flex-shrink: 0;
6287 display: flex;
6288 align-items: center;
6289}
6290.actions-button-media i.icon {
6291 width: var(--f7-actions-button-icon-size);
6292 height: var(--f7-actions-button-icon-size);
6293 font-size: var(--f7-actions-button-icon-size);
6294}
6295.actions-button a,
6296.actions-button-text {
6297 position: relative;
6298 overflow: hidden;
6299 white-space: nowrap;
6300 text-overflow: ellipsis;
6301}
6302.actions-button-text {
6303 width: 100%;
6304 flex-shrink: 1;
6305 text-align: var(--f7-actions-button-text-align);
6306}
6307.actions-label {
6308 line-height: 1.3;
6309 display: flex;
6310 align-items: center;
6311 font-size: var(--f7-actions-label-font-size);
6312 color: var(--f7-actions-label-text-color);
6313 padding: var(--f7-actions-label-padding);
6314 justify-content: var(--f7-actions-label-justify-content);
6315 min-height: var(--f7-actions-label-min-height, var(--f7-actions-button-height));
6316}
6317.actions-label[class*=" color-"] {
6318 --f7-actions-label-text-color: var(--f7-theme-color);
6319}
6320.actions-grid .actions-group {
6321 display: flex;
6322 flex-wrap: wrap;
6323 justify-content: flex-start;
6324 border-radius: 0;
6325 background: var(--f7-actions-bg-color);
6326 margin-top: 0;
6327}
6328.actions-grid .actions-group:first-child {
6329 border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
6330}
6331.actions-grid .actions-group:last-child {
6332 border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
6333}
6334.actions-grid .actions-group:first-child:last-child {
6335 border-radius: var(--f7-actions-border-radius);
6336}
6337.actions-grid .actions-group:not(:last-child) {
6338 margin-bottom: 0;
6339}
6340.actions-grid .actions-button,
6341.actions-grid .actions-label {
6342 border-radius: 0 !important;
6343 background: none;
6344}
6345.actions-grid .actions-button {
6346 width: 33.33333333%;
6347 display: block;
6348 color: var(--f7-actions-grid-button-text-color);
6349 height: auto;
6350 line-height: 1;
6351 padding: 16px;
6352}
6353.actions-grid .actions-button:after {
6354 display: none !important;
6355}
6356.actions-grid .actions-button-media {
6357 margin-left: auto !important;
6358 margin-right: auto !important;
6359 width: var(--f7-actions-grid-button-icon-size);
6360 height: var(--f7-actions-grid-button-icon-size);
6361}
6362.actions-grid .actions-button-media i.icon {
6363 width: var(--f7-actions-grid-button-icon-size);
6364 height: var(--f7-actions-grid-button-icon-size);
6365 font-size: var(--f7-actions-grid-button-icon-size);
6366}
6367.actions-grid .actions-button-text {
6368 margin-left: 0 !important;
6369 text-align: center !important;
6370 margin-top: 8px;
6371 line-height: 1.33em;
6372 height: 1.33em;
6373 font-size: var(--f7-actions-grid-button-font-size);
6374}
6375.ios .actions-button-media {
6376 margin-left: 15px;
6377}
6378.ios .actions-button-media + .actions-button-text {
6379 text-align: left;
6380 margin-left: 15px;
6381}
6382.md .actions-button {
6383 transition-duration: 300ms;
6384}
6385.md .actions-button-media {
6386 min-width: 40px;
6387}
6388.md .actions-button-media + .actions-button-text {
6389 margin-left: 16px;
6390}
5d51ea26
DC
6391.aurora .actions-button-media {
6392 margin-left: 15px;
6393}
6394.aurora .actions-button-media + .actions-button-text {
6395 text-align: left;
6396 margin-left: 15px;
6397}
5309fbda
DC
6398/* === Sheet Modal === */
6399:root {
6400 --f7-sheet-height: 260px;
6401}
6402.ios {
6403 --f7-sheet-bg-color: #cfd5da;
6404 --f7-sheet-border-color: #929499;
6405}
6406.ios .theme-dark,
6407.ios.theme-dark {
6408 --f7-sheet-bg-color: #171717;
6409 --f7-sheet-border-color: var(--f7-bars-border-color);
6410}
6411.md {
6412 --f7-sheet-bg-color: #fff;
6413 --f7-sheet-border-color: transparent;
6414}
6415.md .theme-dark,
6416.md.theme-dark {
6417 --f7-sheet-bg-color: #202020;
6418 --f7-sheet-border-color: transparent;
6419}
5d51ea26
DC
6420.aurora {
6421 --f7-sheet-bg-color: #fff;
6422 --f7-sheet-border-color: transparent;
6423}
6424.aurora .theme-dark,
6425.aurora.theme-dark {
6426 --f7-sheet-bg-color: #202020;
6427 --f7-sheet-border-color: transparent;
6428}
5309fbda
DC
6429.sheet-backdrop {
6430 z-index: 11000;
6431}
6432.sheet-modal {
6433 position: absolute;
6434 left: 0;
6435 bottom: 0;
6436 width: 100%;
6437 height: var(--f7-sheet-height);
6438 display: none;
6439 box-sizing: border-box;
6440 transition-property: transform;
6441 transform: translate3d(0, 100%, 0);
6442 background: var(--f7-sheet-bg-color);
6443 z-index: 12500;
6444 will-change: transform;
6445}
5309fbda
DC
6446.sheet-modal.modal-in,
6447.sheet-modal.modal-out {
6448 transition-duration: 300ms;
6449}
6450.sheet-modal.not-animated {
6451 transition-duration: 0ms;
6452}
6453.sheet-modal.modal-in {
6454 display: block;
6455 transform: translate3d(0, 0, 0);
6456}
5d51ea26
DC
6457.sheet-modal.modal-in-swipe-step {
6458 display: block;
6459 transform: translate3d(0, var(--f7-sheet-swipe-step, 0), 0);
6460}
5309fbda
DC
6461.sheet-modal.modal-out {
6462 transform: translate3d(0, 100%, 0);
6463}
6464.sheet-modal .sheet-modal-inner {
6465 height: 100%;
6466 position: relative;
6467 overflow: hidden;
6468}
6469.sheet-modal .toolbar {
6470 position: relative;
6471 width: 100%;
6472}
6473.sheet-modal .toolbar:after,
6474.sheet-modal .toolbar:before {
6475 display: none;
6476}
6477.sheet-modal .toolbar ~ * .page-content {
6478 padding-top: 0;
6479 padding-bottom: 0;
6480}
6481.sheet-modal .toolbar + .sheet-modal-inner {
6482 height: calc(100% - var(--f7-toolbar-height));
6483}
6484.sheet-modal .toolbar ~ .sheet-modal-inner .page-content {
6485 padding-bottom: 0;
6486 padding-top: 0;
6487}
5d51ea26
DC
6488.sheet-modal-top:after {
6489 content: '';
6490 position: absolute;
6491 background-color: var(--f7-sheet-border-color);
6492 display: block;
6493 z-index: 15;
6494 top: auto;
6495 right: auto;
6496 bottom: 0;
6497 left: 0;
6498 height: 1px;
6499 width: 100%;
6500 transform-origin: 50% 100%;
6501 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
6502}
6503.sheet-modal-top:after {
6504 z-index: 600;
6505 -webkit-backface-visibility: hidden;
6506 backface-visibility: hidden;
6507 transform-style: preserve-3d;
6508}
6509.sheet-modal-bottom:before,
6510.sheet-modal:not(.sheet-modal-top):before {
6511 content: '';
6512 position: absolute;
6513 background-color: var(--f7-sheet-border-color);
6514 display: block;
6515 z-index: 15;
6516 top: 0;
6517 right: auto;
6518 bottom: auto;
6519 left: 0;
6520 height: 1px;
6521 width: 100%;
6522 transform-origin: 50% 0%;
6523 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
6524}
6525.sheet-modal-bottom:before,
6526.sheet-modal:not(.sheet-modal-top):before {
6527 z-index: 600;
6528 -webkit-backface-visibility: hidden;
6529 backface-visibility: hidden;
6530 transform-style: preserve-3d;
6531}
6532.sheet-modal-bottom .toolbar ~ .sheet-modal-inner .page-content,
6533.sheet-modal:not(.sheet-modal-top) .toolbar ~ .sheet-modal-inner .page-content,
6534.sheet-modal-bottom .sheet-modal-inner > .page-content,
6535.sheet-modal:not(.sheet-modal-top) .sheet-modal-inner > .page-content {
5309fbda
DC
6536 padding-bottom: var(--f7-safe-area-bottom);
6537}
5d51ea26
DC
6538.sheet-modal-top {
6539 bottom: auto;
6540 top: var(--f7-statusbar-height);
6541 transform: translate3d(0, calc(-100% - var(--f7-statusbar-height)), 0);
6542}
6543.sheet-modal-top.modal-out {
6544 transform: translate3d(0, calc(-100% - var(--f7-statusbar-height)), 0);
6545}
6546.sheet-modal-top .toolbar-bottom {
6547 position: absolute;
6548}
6549.sheet-modal-top .toolbar-top ~ .sheet-modal-inner .page-content {
6550 padding-top: 0;
6551}
5309fbda
DC
6552.md .sheet-modal .toolbar a.link:not(.tab-link) {
6553 flex-shrink: 0;
6554}
6555/* === Toast === */
5d51ea26 6556:root {
5309fbda
DC
6557 --f7-toast-text-color: #fff;
6558 --f7-toast-font-size: 14px;
5d51ea26
DC
6559 --f7-toast-icon-size: 48px;
6560}
6561.ios {
5309fbda
DC
6562 --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
6563 --f7-toast-translucent-bg-color-ios: rgba(0, 0, 0, 0.75);
6564 --f7-toast-padding-horizontal: 15px;
6565 --f7-toast-padding-vertical: 12px;
6566 --f7-toast-border-radius: 8px;
6567 --f7-toast-button-min-width: 64px;
5309fbda
DC
6568}
6569.md {
5309fbda
DC
6570 --f7-toast-bg-color: #323232;
6571 --f7-toast-padding-horizontal: 24px;
6572 --f7-toast-padding-vertical: 14px;
6573 --f7-toast-border-radius: 4px;
6574 --f7-toast-button-min-width: 64px;
5d51ea26
DC
6575}
6576.aurora {
6577 --f7-toast-bg-color: rgba(0, 0, 0, 0.85);
6578 --f7-toast-padding-horizontal: 10px;
6579 --f7-toast-padding-vertical: 10px;
6580 --f7-toast-border-radius: 4px;
6581 --f7-toast-button-min-width: 32px;
5309fbda
DC
6582}
6583.toast {
6584 transition-property: transform, opacity;
6585 position: absolute;
6586 max-width: 568px;
6587 z-index: 20000;
6588 color: var(--f7-toast-text-color);
6589 font-size: var(--f7-toast-font-size);
6590 box-sizing: border-box;
6591 background-color: var(--f7-toast-bg-color);
6592 opacity: 0;
6593 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
6594}
6595.toast.modal-in {
6596 opacity: 1;
6597}
6598.toast .toast-content {
6599 display: flex;
6600 justify-content: space-between;
6601 align-items: center;
6602 box-sizing: border-box;
6603 padding: var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal);
6604}
6605.toast .toast-text {
6606 line-height: 20px;
6607 flex-shrink: 1;
6608 min-width: 0;
6609}
6610.toast .toast-button {
6611 flex-shrink: 0;
6612 min-width: var(--f7-toast-button-min-width);
6613 margin-top: -8px;
6614 margin-bottom: -8px;
6615}
6616.toast.toast-with-icon .toast-content {
6617 display: block;
6618 text-align: center;
6619}
6620.toast.toast-with-icon .toast-text {
6621 text-align: center;
6622}
6623.toast.toast-with-icon .toast-icon .f7-icons,
6624.toast.toast-with-icon .toast-icon .material-icons {
6625 font-size: var(--f7-toast-icon-size);
6626 width: var(--f7-toast-icon-size);
6627 height: var(--f7-toast-icon-size);
6628}
6629.toast.toast-center {
6630 top: 50%;
6631}
6632.toast.toast-top {
6633 margin-top: var(--f7-statusbar-height);
6634}
6635.ios .toast {
6636 transition-duration: 300ms;
6637 width: 100%;
6638 left: 0;
6639}
6640@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
6641 .ios .toast {
6642 background: var(--f7-toast-translucent-bg-color-ios);
6643 -webkit-backdrop-filter: blur(10px);
6644 backdrop-filter: blur(10px);
6645 }
6646}
6647.ios .toast.toast-top {
6648 top: 0;
6649 transform: translate3d(0, -100%, 0);
6650}
6651.ios .toast.toast-top.modal-in {
6652 transform: translate3d(0, 0%, 0);
6653}
6654.ios .toast.toast-center {
6655 width: auto;
6656 left: 50%;
6657 border-radius: var(--f7-toast-border-radius);
6658 transform: translate3d(-50%, -50%, 0);
6659}
6660.ios .toast.toast-center.modal-in {
6661 transform: translate3d(-50%, -50%, 0);
6662}
6663.ios .toast.toast-bottom {
6664 bottom: 0;
6665 transform: translate3d(0, 100%, 0);
6666}
6667.ios .toast.toast-bottom.modal-in {
6668 transform: translate3d(0, 0%, 0);
6669}
6670@media (max-width: 568px) {
6671 .ios .toast.toast-bottom .toast-content {
6672 padding-bottom: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom));
6673 }
6674}
6675@media (min-width: 569px) {
6676 .ios .toast {
6677 left: 50%;
6678 margin-left: -284px;
6679 border-radius: var(--f7-toast-border-radius);
6680 }
6681 .ios .toast.toast-top {
6682 top: 15px;
6683 }
6684 .ios .toast.toast-center {
6685 margin-left: 0;
6686 }
6687 .ios .toast.toast-bottom {
6688 margin-bottom: calc(15px + var(--f7-safe-area-bottom));
6689 }
6690}
6691@media (min-width: 1024px) {
6692 .ios .toast {
6693 margin-left: 0;
6694 width: auto;
6695 }
6696 .ios .toast.toast-bottom,
6697 .ios .toast.toast-top {
6698 left: 15px;
6699 }
6700}
6701.ios .toast-button {
6702 margin-right: 15px;
6703 margin-left: calc(-1 * var(--f7-button-padding-horizontal));
6704}
6705.md .toast {
6706 transition-duration: 200ms;
6707 border-radius: var(--f7-toast-border-radius);
6708 left: 8px;
6709 width: calc(100% - 16px);
6710 transform: scale(0.9);
6711}
6712.md .toast.modal-in {
6713 transform: scale(1);
6714}
6715.md .toast.modal-out {
6716 transform: scale(1);
6717}
6718.md .toast.toast-top {
6719 top: 8px;
6720}
6721.md .toast.toast-center {
6722 left: 50%;
6723 width: auto;
6724 transform: scale(0.9) translate3d(-55%, -55%, 0);
6725}
6726.md .toast.toast-center.modal-in {
6727 transform: scale(1) translate3d(-50%, -50%, 0);
6728}
6729.md .toast.toast-center.modal-out {
6730 transform: scale(1) translate3d(-50%, -50%, 0);
6731}
6732.md .toast.toast-bottom {
6733 bottom: calc(8px + var(--f7-safe-area-bottom));
6734}
6735@media (min-width: 584px) {
6736 .md .toast {
6737 left: 50%;
6738 margin-left: -284px;
6739 }
6740 .md .toast.toast-center {
6741 margin-left: 0;
6742 }
6743}
6744@media (min-width: 1024px) {
6745 .md .toast {
6746 margin-left: 0;
6747 width: auto;
6748 }
6749 .md .toast.toast-bottom,
6750 .md .toast.toast-top {
6751 left: 24px;
6752 }
6753 .md .toast.toast-bottom {
6754 bottom: calc(24px + var(--f7-safe-area-bottom));
6755 }
6756 .md .toast.toast-top {
6757 top: 24px;
6758 }
6759}
6760.md .toast-button {
6761 margin-right: 16px;
6762 margin-left: -8px;
6763}
5d51ea26
DC
6764.aurora .toast {
6765 transition-duration: 200ms;
6766 border-radius: var(--f7-toast-border-radius);
6767 left: 10px;
6768 width: calc(100% - 20px);
6769 transform: scale(0.9);
5309fbda 6770}
5d51ea26
DC
6771.aurora .toast.modal-in {
6772 transform: scale(1);
5309fbda 6773}
5d51ea26
DC
6774.aurora .toast.modal-out {
6775 transform: scale(1);
5309fbda 6776}
5d51ea26
DC
6777.aurora .toast.toast-top {
6778 top: 10px;
6779}
6780.aurora .toast.toast-center {
6781 left: 50%;
6782 width: auto;
6783 transform: scale(0.9) translate3d(-55%, -55%, 0);
6784}
6785.aurora .toast.toast-center.modal-in {
6786 transform: scale(1) translate3d(-50%, -50%, 0);
6787}
6788.aurora .toast.toast-center.modal-out {
6789 transform: scale(1) translate3d(-50%, -50%, 0);
6790}
6791.aurora .toast.toast-bottom {
6792 bottom: calc(10px + var(--f7-safe-area-bottom));
6793}
6794@media (min-width: 584px) {
6795 .aurora .toast {
6796 left: 50%;
6797 margin-left: -284px;
6798 }
6799 .aurora .toast.toast-center {
6800 margin-left: 0;
6801 }
6802}
6803@media (min-width: 1024px) {
6804 .aurora .toast {
6805 margin-left: 0;
6806 width: auto;
6807 }
6808 .aurora .toast.toast-bottom,
6809 .aurora .toast.toast-top {
6810 left: 10px;
6811 }
6812}
6813.aurora .toast-button {
6814 margin-right: 10px;
6815}
6816/* === Preloader === */
6817:root {
6818 --f7-preloader-modal-padding: 8px;
6819 --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
6820}
6821.ios {
6822 --f7-preloader-color: #6c6c6c;
6823 --f7-preloader-size: 20px;
6824 --f7-preloader-modal-preloader-size: 34px;
6825 --f7-preloader-modal-border-radius: 5px;
6826}
6827.md {
6828 --f7-preloader-color: #757575;
6829 --f7-preloader-size: 32px;
6830 --f7-preloader-modal-preloader-size: 32px;
6831 --f7-preloader-modal-border-radius: 4px;
6832}
6833.aurora {
6834 --f7-preloader-color: #757575;
6835 --f7-preloader-size: 24px;
6836 --f7-preloader-modal-preloader-size: 24px;
6837 --f7-preloader-modal-border-radius: 4px;
6838}
6839.preloader {
6840 display: inline-block;
6841 vertical-align: middle;
6842 width: var(--f7-preloader-size);
6843 height: var(--f7-preloader-size);
6844 font-size: 0;
6845 position: relative;
5309fbda
DC
6846}
6847/* === Preloader Modal === */
6848.preloader-backdrop {
6849 visibility: visible;
6850 opacity: 0;
6851 background: none;
6852 z-index: 14000;
6853}
6854.preloader-modal {
6855 position: absolute;
6856 left: 50%;
6857 top: 50%;
6858 padding: var(--f7-preloader-modal-padding);
6859 background: var(--f7-preloader-modal-bg-color);
6860 z-index: 14500;
6861 transform: translateX(-50%) translateY(-50%);
6862 border-radius: var(--f7-preloader-modal-border-radius);
6863}
6864.preloader-modal .preloader {
6865 --f7-preloader-size: var(--f7-preloader-modal-preloader-size);
6866 display: block !important;
6867}
6868html.with-modal-preloader .page-content {
6869 overflow: hidden;
6870 -webkit-overflow-scrolling: auto;
6871}
6872.preloader[class*="color-"] {
6873 --f7-preloader-color: var(--f7-theme-color);
6874}
6875.ios .preloader {
6876 animation: ios-preloader-spin 1s steps(12, end) infinite;
6877}
6878.ios .preloader .preloader-inner-line {
6879 display: block;
6880 width: 10%;
6881 height: 25%;
6882 border-radius: 100px;
6883 background: var(--f7-preloader-color);
6884 position: absolute;
6885 left: 50%;
6886 top: 50%;
6887 transform-origin: center 200%;
6888}
6889.ios .preloader .preloader-inner-line:nth-child(1) {
6890 transform: translate(-50%, -200%) rotate(0deg);
6891 opacity: 0.27;
6892}
6893.ios .preloader .preloader-inner-line:nth-child(2) {
6894 transform: translate(-50%, -200%) rotate(30deg);
6895 opacity: 0.32272727;
6896}
6897.ios .preloader .preloader-inner-line:nth-child(3) {
6898 transform: translate(-50%, -200%) rotate(60deg);
6899 opacity: 0.37545455;
6900}
6901.ios .preloader .preloader-inner-line:nth-child(4) {
6902 transform: translate(-50%, -200%) rotate(90deg);
6903 opacity: 0.42818182;
6904}
6905.ios .preloader .preloader-inner-line:nth-child(5) {
6906 transform: translate(-50%, -200%) rotate(120deg);
6907 opacity: 0.48090909;
6908}
6909.ios .preloader .preloader-inner-line:nth-child(6) {
6910 transform: translate(-50%, -200%) rotate(150deg);
6911 opacity: 0.53363636;
6912}
6913.ios .preloader .preloader-inner-line:nth-child(7) {
6914 transform: translate(-50%, -200%) rotate(180deg);
6915 opacity: 0.58636364;
6916}
6917.ios .preloader .preloader-inner-line:nth-child(8) {
6918 transform: translate(-50%, -200%) rotate(210deg);
6919 opacity: 0.63909091;
6920}
6921.ios .preloader .preloader-inner-line:nth-child(9) {
6922 transform: translate(-50%, -200%) rotate(240deg);
6923 opacity: 0.69181818;
6924}
6925.ios .preloader .preloader-inner-line:nth-child(10) {
6926 transform: translate(-50%, -200%) rotate(270deg);
6927 opacity: 0.74454545;
6928}
6929.ios .preloader .preloader-inner-line:nth-child(11) {
6930 transform: translate(-50%, -200%) rotate(300deg);
6931 opacity: 0.79727273;
6932}
6933.ios .preloader .preloader-inner-line:nth-child(12) {
6934 transform: translate(-50%, -200%) rotate(330deg);
6935 opacity: 0.85;
6936}
6937@keyframes ios-preloader-spin {
6938 100% {
6939 transform: rotate(360deg);
6940 }
6941}
6942.md .preloader {
6943 animation: md-preloader-outer 3300ms linear infinite;
6944}
6945@keyframes md-preloader-outer {
6946 0% {
6947 transform: rotate(0);
6948 }
6949 100% {
6950 transform: rotate(360deg);
6951 }
6952}
6953.md .preloader-inner {
6954 position: relative;
6955 display: block;
6956 width: 100%;
6957 height: 100%;
6958 animation: md-preloader-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
6959}
6960.md .preloader-inner .preloader-inner-gap {
6961 position: absolute;
6962 width: 2px;
6963 left: 50%;
6964 margin-left: -1px;
6965 top: 0;
6966 bottom: 0;
6967 box-sizing: border-box;
6968 border-top: 4px solid var(--f7-preloader-color);
6969}
6970.md .preloader-inner .preloader-inner-left,
6971.md .preloader-inner .preloader-inner-right {
6972 position: absolute;
6973 top: 0;
6974 height: 100%;
6975 width: 50%;
6976 overflow: hidden;
6977}
6978.md .preloader-inner .preloader-inner-half-circle {
6979 position: absolute;
6980 top: 0;
6981 height: 100%;
6982 width: 200%;
6983 box-sizing: border-box;
6984 border: 4px solid var(--f7-preloader-color);
6985 border-bottom-color: transparent !important;
6986 border-radius: 50%;
6987 animation-iteration-count: infinite;
6988 animation-duration: 1.3125s;
6989 animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
6990}
6991.md .preloader-inner .preloader-inner-left {
6992 left: 0;
6993}
6994.md .preloader-inner .preloader-inner-left .preloader-inner-half-circle {
6995 left: 0;
6996 border-right-color: transparent !important;
6997 animation-name: md-preloader-left-rotate;
6998}
6999.md .preloader-inner .preloader-inner-right {
7000 right: 0;
7001}
7002.md .preloader-inner .preloader-inner-right .preloader-inner-half-circle {
7003 right: 0;
7004 border-left-color: transparent !important;
7005 animation-name: md-preloader-right-rotate;
7006}
7007.md .preloader.color-multi .preloader-inner-left .preloader-inner-half-circle {
7008 animation-name: md-preloader-left-rotate-multicolor;
7009}
7010.md .preloader.color-multi .preloader-inner-right .preloader-inner-half-circle {
7011 animation-name: md-preloader-right-rotate-multicolor;
7012}
7013@keyframes md-preloader-left-rotate {
7014 0%,
7015 100% {
7016 transform: rotate(130deg);
7017 }
7018 50% {
7019 transform: rotate(-5deg);
7020 }
7021}
7022@keyframes md-preloader-right-rotate {
7023 0%,
7024 100% {
7025 transform: rotate(-130deg);
7026 }
7027 50% {
7028 transform: rotate(5deg);
7029 }
7030}
7031@keyframes md-preloader-inner-rotate {
7032 12.5% {
7033 transform: rotate(135deg);
7034 }
7035 25% {
7036 transform: rotate(270deg);
7037 }
7038 37.5% {
7039 transform: rotate(405deg);
7040 }
7041 50% {
7042 transform: rotate(540deg);
7043 }
7044 62.5% {
7045 transform: rotate(675deg);
7046 }
7047 75% {
7048 transform: rotate(810deg);
7049 }
7050 87.5% {
7051 transform: rotate(945deg);
7052 }
7053 100% {
7054 transform: rotate(1080deg);
7055 }
7056}
7057@keyframes md-preloader-left-rotate-multicolor {
7058 0%,
7059 100% {
7060 border-left-color: #4285F4;
7061 transform: rotate(130deg);
7062 }
7063 75% {
7064 border-left-color: #1B9A59;
7065 border-top-color: #1B9A59;
7066 }
7067 50% {
7068 border-left-color: #F7C223;
7069 border-top-color: #F7C223;
7070 transform: rotate(-5deg);
7071 }
7072 25% {
7073 border-left-color: #DE3E35;
7074 border-top-color: #DE3E35;
7075 }
7076}
7077@keyframes md-preloader-right-rotate-multicolor {
7078 0%,
7079 100% {
7080 border-right-color: #4285F4;
7081 transform: rotate(-130deg);
7082 }
7083 75% {
7084 border-right-color: #1B9A59;
7085 border-top-color: #1B9A59;
7086 }
7087 50% {
7088 border-right-color: #F7C223;
7089 border-top-color: #F7C223;
7090 transform: rotate(5deg);
7091 }
7092 25% {
7093 border-top-color: #DE3E35;
7094 border-right-color: #DE3E35;
7095 }
7096}
5d51ea26
DC
7097.aurora .preloader-inner {
7098 position: absolute;
7099 left: 0;
7100 top: 0;
7101 width: 100%;
7102 height: 100%;
7103}
7104.aurora .preloader-inner-circle {
7105 width: 100%;
7106 height: 100%;
7107 position: absolute;
7108 left: 0;
7109 top: 0;
7110 border-radius: 50%;
7111 border: calc(var(--f7-preloader-size) / 8) solid var(--f7-preloader-color);
7112 border-top-color: transparent;
7113 box-sizing: border-box;
7114 animation: aurora-preloader-rotate 1s linear infinite;
7115}
7116.aurora .preloader.color-multi .preloader-inner-circle {
7117 animation: aurora-preloader-rotate 1s linear infinite, aurora-preloader-multicolor 2s linear infinite;
7118}
7119@keyframes aurora-preloader-rotate {
7120 0% {
7121 transform: rotate(0deg);
7122 }
7123 100% {
7124 transform: rotate(360deg);
7125 }
7126}
7127@keyframes aurora-preloader-multicolor {
7128 0%,
7129 100% {
7130 border-color: #2196f3;
7131 border-top-color: transparent;
7132 }
7133 25% {
7134 border-color: #ff3b30;
7135 border-top-color: transparent;
7136 }
7137 50% {
7138 border-color: #4cd964;
7139 border-top-color: transparent;
7140 }
7141 75% {
7142 border-color: #ff9500;
7143 border-top-color: transparent;
7144 }
7145}
5309fbda 7146/* === Progressbar === */
5d51ea26 7147:root {
5309fbda
DC
7148 /*
7149 --f7-progressbar-progress-color: var(--f7-theme-color);
7150 */
5d51ea26
DC
7151}
7152.ios {
5309fbda
DC
7153 --f7-progressbar-bg-color: #b6b6b6;
7154 --f7-progressbar-height: 2px;
7155 --f7-progressbar-border-radius: 2px;
7156}
7157.md {
7158 /*
5309fbda
DC
7159 --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
7160 */
7161 --f7-progressbar-height: 4px;
7162 --f7-progressbar-border-radius: 0px;
7163}
5d51ea26
DC
7164.aurora {
7165 --f7-progressbar-bg-color: #dbdbdb;
7166 --f7-progressbar-height: 6px;
7167 --f7-progressbar-border-radius: 3px;
7168}
7169.aurora .theme-dark,
7170.aurora.theme-dark {
7171 --f7-progressbar-bg-color: #444;
7172}
5309fbda
DC
7173.progressbar,
7174.progressbar-infinite {
7175 width: 100%;
7176 overflow: hidden;
7177 position: relative;
7178 display: block;
7179 transform-style: preserve-3d;
7180 background: var(--f7-progressbar-bg-color, rgba(var(--f7-theme-color-rgb), 0.5));
7181 transform-origin: center top;
7182 height: var(--f7-progressbar-height);
7183 border-radius: var(--f7-progressbar-border-radius);
7184}
7185.progressbar {
7186 vertical-align: middle;
7187}
7188.progressbar span {
7189 background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
7190 width: 100%;
7191 height: 100%;
7192 position: absolute;
7193 left: 0;
7194 top: 0;
7195 transform: translate3d(-100%, 0, 0);
7196 transition-duration: 150ms;
7197}
7198.progressbar-infinite {
7199 z-index: 15000;
7200}
7201.progressbar-infinite:before,
7202.progressbar-infinite:after {
7203 content: '';
7204 position: absolute;
7205 left: 0;
7206 top: 0;
7207 width: 100%;
7208 height: 100%;
7209 transform-origin: left center;
7210 transform: translate3d(0, 0, 0);
7211 display: block;
7212 background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
7213}
7214.progressbar-infinite.color-multi {
7215 background: none !important;
7216}
7217.progressbar-in {
7218 animation: progressbar-in 150ms forwards;
7219}
7220.progressbar-out {
7221 animation: progressbar-out 150ms forwards;
7222}
7223body > .progressbar,
7224.view > .progressbar,
7225.views > .progressbar,
7226.page > .progressbar,
7227.panel > .progressbar,
7228.popup > .progressbar,
7229.framework7-root > .progressbar,
7230body > .progressbar-infinite,
7231.view > .progressbar-infinite,
7232.views > .progressbar-infinite,
7233.page > .progressbar-infinite,
7234.panel > .progressbar-infinite,
7235.popup > .progressbar-infinite,
7236.framework7-root > .progressbar-infinite {
7237 position: absolute;
7238 left: 0;
7239 top: 0;
7240 z-index: 15000;
7241 border-radius: 0 !important;
7242 transform-origin: center top !important;
7243}
7244body > .progressbar,
7245.framework7-root > .progressbar,
7246body > .progressbar-infinite,
7247.framework7-root > .progressbar-infinite {
7248 top: var(--f7-statusbar-height);
7249}
7250@keyframes progressbar-in {
7251 from {
7252 opacity: 0;
7253 transform: scaleY(0);
7254 }
7255 to {
7256 opacity: 1;
7257 transform: scaleY(1);
7258 }
7259}
7260@keyframes progressbar-out {
7261 from {
7262 opacity: 1;
7263 transform: scaleY(1);
7264 }
7265 to {
7266 opacity: 0;
7267 transform: scaleY(0);
7268 }
7269}
7270.ios .progressbar-infinite:before {
7271 animation: ios-progressbar-infinite 1s linear infinite;
7272}
7273.ios .progressbar-infinite:after {
7274 display: none;
7275}
7276.ios .progressbar-infinite.color-multi:before {
7277 width: 400%;
7278 background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
7279 background-size: 25% 100%;
7280 background-repeat: repeat-x;
7281 animation: ios-progressbar-infinite-multicolor 3s linear infinite;
7282}
7283@keyframes ios-progressbar-infinite {
7284 0% {
7285 transform: translate3d(-100%, 0, 0);
7286 }
7287 100% {
7288 transform: translate3d(100%, 0, 0);
7289 }
7290}
7291@keyframes ios-progressbar-infinite-multicolor {
7292 0% {
7293 transform: translate3d(0%, 0, 0);
7294 }
7295 100% {
7296 transform: translate3d(-50%, 0, 0);
7297 }
7298}
7299.md .progressbar-infinite:before {
7300 animation: md-progressbar-infinite-1 2s linear infinite;
7301}
7302.md .progressbar-infinite:after {
7303 animation: md-progressbar-infinite-2 2s linear infinite;
7304}
7305.md .progressbar-infinite.color-multi:before {
7306 background: none;
7307 animation: md-progressbar-infinite-multicolor-bg 3s step-end infinite;
7308}
7309.md .progressbar-infinite.color-multi:after {
7310 background: none;
7311 animation: md-progressbar-infinite-multicolor-fill 3s linear infinite;
7312 transform-origin: center center;
7313}
7314@keyframes md-progressbar-infinite-1 {
7315 0% {
7316 transform: translateX(-10%) scaleX(0.1);
7317 }
7318 25% {
7319 transform: translateX(30%) scaleX(0.6);
7320 }
7321 50% {
7322 transform: translateX(100%) scaleX(1);
7323 }
7324 100% {
7325 transform: translateX(100%) scaleX(1);
7326 }
7327}
7328@keyframes md-progressbar-infinite-2 {
7329 0% {
7330 transform: translateX(-100%) scaleX(1);
7331 }
7332 40% {
7333 transform: translateX(-100%) scaleX(1);
7334 }
7335 75% {
7336 transform: translateX(60%) scaleX(0.35);
7337 }
7338 90% {
7339 transform: translateX(100%) scaleX(0.1);
7340 }
7341 100% {
7342 transform: translateX(100%) scaleX(0.1);
7343 }
7344}
7345@keyframes md-progressbar-infinite-multicolor-bg {
7346 0% {
7347 background-color: #4caf50;
7348 }
7349 25% {
7350 background-color: #f44336;
7351 }
7352 50% {
7353 background-color: #2196f3;
7354 }
7355 75% {
7356 background-color: #ffeb3b;
7357 }
7358}
7359@keyframes md-progressbar-infinite-multicolor-fill {
7360 0% {
7361 transform: scaleX(0);
7362 background-color: #f44336;
7363 }
7364 24.9% {
7365 transform: scaleX(1);
7366 background-color: #f44336;
7367 }
7368 25% {
7369 transform: scaleX(0);
7370 background-color: #2196f3;
7371 }
7372 49.9% {
7373 transform: scaleX(1);
7374 background-color: #2196f3;
7375 }
7376 50% {
7377 transform: scaleX(0);
7378 background-color: #ffeb3b;
7379 }
7380 74.9% {
7381 transform: scaleX(1);
7382 background-color: #ffeb3b;
7383 }
7384 75% {
7385 transform: scaleX(0);
7386 background-color: #4caf50;
7387 }
7388 100% {
7389 transform: scaleX(1);
7390 background-color: #4caf50;
7391 }
7392}
5d51ea26
DC
7393.aurora .progressbar,
7394.aurora .progressbar-infinite,
7395.aurora .progressbar span,
7396.aurora .progressbar-infinite:before {
7397 box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
7398}
7399.aurora .progressbar-infinite:before {
7400 animation: aurora-progressbar-infinite 1s linear infinite;
7401}
7402.aurora .progressbar-infinite:after {
7403 display: none;
7404}
7405.aurora .progressbar-infinite.color-multi:before {
7406 width: 400%;
7407 background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
7408 background-size: 25% 100%;
7409 background-repeat: repeat-x;
7410 animation: aurora-progressbar-infinite-multicolor 3s linear infinite;
7411}
7412@keyframes aurora-progressbar-infinite {
7413 0% {
7414 transform: translate3d(-100%, 0, 0);
7415 }
7416 100% {
7417 transform: translate3d(100%, 0, 0);
7418 }
7419}
7420@keyframes aurora-progressbar-infinite-multicolor {
7421 0% {
7422 transform: translate3d(0%, 0, 0);
7423 }
7424 100% {
7425 transform: translate3d(-50%, 0, 0);
7426 }
7427}
5309fbda
DC
7428/* === Sortable === */
7429:root {
7430 --f7-sortable-handler-color: #c7c7cc;
7431 --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8);
7432}
7433:root .theme-dark,
7434:root.theme-dark {
7435 --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8);
7436}
7437.ios {
7438 --f7-sortable-handler-width: 35px;
7439 --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
7440}
7441.md {
7442 --f7-sortable-handler-width: 42px;
7443 --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
7444}
5d51ea26
DC
7445.aurora {
7446 --f7-sortable-handler-width: 32px;
7447 --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
7448}
5309fbda
DC
7449.sortable .sortable-handler {
7450 width: var(--f7-sortable-handler-width);
7451 height: 100%;
7452 position: absolute;
7453 top: 0;
7454 z-index: 10;
7455 opacity: 0;
7456 pointer-events: none;
7457 cursor: move;
7458 transition-duration: 300ms;
7459 display: flex;
7460 align-items: center;
7461 justify-content: center;
7462 overflow: hidden;
7463 left: var(--f7-safe-area-left);
7464}
7465.sortable .sortable-handler:after {
7466 font-family: 'framework7-core-icons';
7467 font-weight: normal;
7468 font-style: normal;
7469 line-height: 1;
7470 letter-spacing: normal;
7471 text-transform: none;
7472 white-space: nowrap;
7473 word-wrap: normal;
7474 direction: ltr;
7475 -webkit-font-smoothing: antialiased;
7476 text-rendering: optimizeLegibility;
7477 -moz-osx-font-smoothing: grayscale;
7478 -moz-font-feature-settings: "liga";
7479 font-feature-settings: "liga";
7480 text-align: center;
7481 display: block;
7482 width: 100%;
7483 height: 100%;
7484 font-size: 20px;
7485 transition-duration: 300ms;
7486 transform: translateX(10px);
7487 color: var(--f7-sortable-handler-color);
7488 overflow: hidden;
7489 height: 20px;
7490 width: 18px;
7491}
7492.sortable .item-inner {
7493 transition-duration: 300ms;
7494}
7495.sortable li.sorting {
7496 z-index: 50;
7497 background: var(--f7-sortable-sorting-item-bg-color);
7498 transition-duration: 0ms;
7499 box-shadow: var(--f7-sortable-sorting-item-box-shadow);
7500}
7501.sortable li.sorting .item-inner:after {
7502 display: none !important;
7503}
7504.sortable-sorting li {
7505 transition-duration: 300ms;
7506}
7507.sortable-enabled .sortable-handler {
7508 pointer-events: auto;
7509 opacity: 1;
7510}
7511.sortable-enabled .sortable-handler:after {
7512 transform: translateX(0px);
7513}
7514.sortable-enabled .item-link .item-inner,
7515.sortable-enabled .item-link .item-title-row {
7516 background-image: none !important;
7517}
7518.list.sortable-enabled .item-inner,
7519.list.sortable-enabled .item-link .item-inner,
7520.list.sortable-enabled .item-link.no-chevron .item-inner,
7521.list.sortable-enabled.no-chevron .item-link .item-inner,
7522.list.sortable-enabled .no-chevron .item-link .item-inner,
7523.no-chevron .list.sortable-enabled .item-link .item-inner {
7524 padding-left: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
7525}
7526.ios .sortable-handler:after {
7527 content: 'sort_ios';
7528}
7529.md .sortable-handler:after {
7530 content: 'sort_md';
7531}
5d51ea26
DC
7532.aurora .sortable-handler:after {
7533 content: 'sort_md';
7534 font-size: 16px;
7535 height: 16px;
7536}
5309fbda
DC
7537/* === Swipeout === */
7538:root {
7539 --f7-swipeout-button-text-color: #fff;
7540 --f7-swipeout-button-bg-color: #c7c7cc;
7541 --f7-swipeout-delete-button-bg-color: #ff3b30;
5d51ea26
DC
7542 --f7-swipeout-button-font-size: inherit;
7543 --f7-swipeout-button-font-weight: inherit;
5309fbda
DC
7544}
7545.ios {
7546 --f7-swipeout-button-padding: 0 30px;
7547}
7548.md {
7549 --f7-swipeout-button-padding: 0 24px;
7550}
5d51ea26
DC
7551.aurora {
7552 --f7-swipeout-button-padding: 0 12px;
7553 --f7-swipeout-button-font-weight: 500;
7554}
5309fbda
DC
7555.swipeout {
7556 overflow: hidden;
7557 transform-style: preserve-3d;
7558}
7559.swipeout-deleting {
7560 transition-duration: 300ms;
7561}
7562.swipeout-deleting .swipeout-content {
7563 transform: translateX(-100%);
7564}
7565.swipeout-transitioning .swipeout-content,
7566.swipeout-transitioning .swipeout-actions-right a,
7567.swipeout-transitioning .swipeout-actions-left a,
7568.swipeout-transitioning .swipeout-overswipe {
7569 transition-duration: 300ms;
7570 transition-property: transform, left;
7571}
7572.swipeout-content {
7573 position: relative;
7574 z-index: 10;
7575}
7576.swipeout-overswipe {
7577 transition-duration: 200ms;
7578 transition-property: left;
7579}
7580.swipeout-actions-left,
7581.swipeout-actions-right {
7582 position: absolute;
7583 top: 0;
7584 height: 100%;
7585 display: flex;
7586 direction: ltr;
7587}
7588.swipeout-actions-left > a,
7589.swipeout-actions-right > a,
7590.swipeout-actions-left > button,
7591.swipeout-actions-right > button,
7592.swipeout-actions-left > span,
7593.swipeout-actions-right > span,
7594.swipeout-actions-left > div,
7595.swipeout-actions-right > div {
7596 color: var(--f7-swipeout-button-text-color);
7597 background: var(--f7-swipeout-button-bg-color);
7598 padding: var(--f7-swipeout-button-padding);
7599 display: flex;
7600 align-items: center;
7601 position: relative;
7602 left: 0;
5d51ea26
DC
7603 font-size: var(--f7-swipeout-button-font-size);
7604 font-weight: var(--f7-swipeout-button-font-weight);
5309fbda
DC
7605}
7606.swipeout-actions-left > a:after,
7607.swipeout-actions-right > a:after,
7608.swipeout-actions-left > button:after,
7609.swipeout-actions-right > button:after,
7610.swipeout-actions-left > span:after,
7611.swipeout-actions-right > span:after,
7612.swipeout-actions-left > div:after,
7613.swipeout-actions-right > div:after {
7614 content: '';
7615 position: absolute;
7616 top: 0;
7617 width: 600%;
7618 height: 100%;
7619 background: inherit;
7620 z-index: -1;
7621 transform: translate3d(0, 0, 0);
7622 pointer-events: none;
7623}
7624.swipeout-actions-left .swipeout-delete,
7625.swipeout-actions-right .swipeout-delete {
7626 background: var(--f7-swipeout-delete-button-bg-color);
7627}
7628.swipeout-actions-right {
7629 right: 0%;
7630 transform: translateX(100%);
7631}
7632.swipeout-actions-right > a:after,
7633.swipeout-actions-right > button:after,
7634.swipeout-actions-right > span:after,
7635.swipeout-actions-right > div:after {
7636 left: 100%;
7637 margin-left: -1px;
7638}
7639.swipeout-actions-left {
7640 left: 0%;
7641 transform: translateX(-100%);
7642}
7643.swipeout-actions-left > a:after,
7644.swipeout-actions-left > button:after,
7645.swipeout-actions-left > span:after,
7646.swipeout-actions-left > div:after {
7647 right: 100%;
7648 margin-right: -1px;
7649}
7650.swipeout-actions-left [class*="color-"],
7651.swipeout-actions-right [class*="color-"] {
7652 --f7-swipeout-button-bg-color: var(--f7-theme-color);
7653}
7654/* === Accordion === */
7655.accordion-item-toggle {
7656 cursor: pointer;
7657 transition-duration: 300ms;
7658}
7659.accordion-item-toggle.active-state {
7660 transition-duration: 300ms;
7661}
7662.accordion-item-toggle.active-state > .item-inner:after {
7663 background-color: transparent;
7664}
7665.accordion-item-toggle .item-inner {
7666 transition-duration: 300ms;
7667 transition-property: background-color;
7668}
7669.accordion-item-toggle .item-inner:after {
7670 transition-duration: 300ms;
7671}
7672.accordion-item .item-link .item-inner:after {
7673 transition-duration: 300ms;
7674}
7675.accordion-item .list,
7676.accordion-item .block {
7677 margin-top: 0;
7678 margin-bottom: 0;
7679}
7680.accordion-item .block > h1:first-child,
7681.accordion-item .block > h2:first-child,
7682.accordion-item .block > h3:first-child,
7683.accordion-item .block > h4:first-child,
7684.accordion-item .block > p:first-child {
7685 margin-top: 10px;
7686}
7687.accordion-item .block > h1:last-child,
7688.accordion-item .block > h2:last-child,
7689.accordion-item .block > h3:last-child,
7690.accordion-item .block > h4:last-child,
7691.accordion-item .block > p:last-child {
7692 margin-bottom: 10px;
7693}
7694.accordion-item-opened .accordion-item-toggle .item-inner:after,
7695.accordion-item-opened > .item-link .item-inner:after {
7696 background-color: transparent;
7697}
7698.list li.accordion-item ul {
7699 padding-right: 0;
7700}
7701.accordion-item-content {
7702 position: relative;
7703 overflow: hidden;
7704 height: 0;
7705 font-size: 14px;
7706 transition-duration: 300ms;
7707}
7708.accordion-item-opened > .accordion-item-content {
7709 height: auto;
7710}
7711html.device-android-4 .accordion-item-content {
7712 transform: none;
7713}
7714.list .accordion-item-toggle .item-inner {
7715 padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-safe-area-left));
7716}
7717.list .accordion-item-toggle .item-inner:before {
7718 font-family: 'framework7-core-icons';
7719 font-weight: normal;
7720 font-style: normal;
7721 line-height: 1;
7722 letter-spacing: normal;
7723 text-transform: none;
7724 white-space: nowrap;
7725 word-wrap: normal;
7726 direction: ltr;
7727 -webkit-font-smoothing: antialiased;
7728 text-rendering: optimizeLegibility;
7729 -moz-osx-font-smoothing: grayscale;
7730 -moz-font-feature-settings: "liga";
7731 font-feature-settings: "liga";
7732 text-align: center;
7733 display: block;
7734 width: 100%;
7735 height: 100%;
7736 position: absolute;
7737 top: 50%;
7738 width: 14px;
7739 height: 8px;
7740 margin-top: -4px;
7741 font-size: 20px;
7742 line-height: 14px;
7743 color: var(--f7-list-chevron-icon-color);
7744 pointer-events: none;
7745 left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
7746 content: 'chevron_left';
7747}
7748.list .accordion-item-toggle.active-state {
7749 background-color: var(--f7-list-link-pressed-bg-color);
7750}
7751.list .accordion-item-toggle .item-inner:before,
7752.list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,
7753.list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner:before,
7754.media-list .accordion-item .accordion-item-toggle .item-title-row:before,
7755.media-list .accordion-item > .item-link .item-title-row:before,
7756.accordion-item.media-item .accordion-item-toggle .item-title-row:before,
7757.accordion-item.media-item > .item-link .item-title-row:before,
7758.links-list .accordion-item > a:before {
7759 content: 'chevron_down';
7760 width: 14px;
7761 height: 8px;
7762 margin-top: -4px;
7763 line-height: 8px;
7764}
7765.list .accordion-item-toggle.accordion-item-opened .item-inner:before,
7766.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,
7767.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner:before,
7768.media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,
7769.media-list .accordion-item-opened > .item-link .item-title-row:before,
7770.accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,
7771.accordion-item-opened.media-item > .item-link .item-title-row:before,
7772.links-list .accordion-item-opened > a:before {
7773 content: 'chevron_up';
7774 width: 14px;
7775 height: 8px;
7776 margin-top: -4px;
7777 line-height: 8px;
7778}
5d51ea26
DC
7779.aurora .list .accordion-item-toggle .item-inner:before,
7780.aurora .list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,
7781.aurora .list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner:before,
7782.aurora .media-list .accordion-item .accordion-item-toggle .item-title-row:before,
7783.aurora .media-list .accordion-item > .item-link .item-title-row:before,
7784.aurora .accordion-item.media-item .accordion-item-toggle .item-title-row:before,
7785.aurora .accordion-item.media-item > .item-link .item-title-row:before,
7786.aurora .links-list .accordion-item > a:before {
7787 content: 'chevron_down_aurora';
7788}
7789.aurora .list .accordion-item-toggle.accordion-item-opened .item-inner:before,
7790.aurora .list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,
7791.aurora .list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner:before,
7792.aurora .media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,
7793.aurora .media-list .accordion-item-opened > .item-link .item-title-row:before,
7794.aurora .accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,
7795.aurora .accordion-item-opened.media-item > .item-link .item-title-row:before,
7796.aurora .links-list .accordion-item-opened > a:before {
7797 content: 'chevron_up_aurora';
7798}
5309fbda 7799/* === Contacts === */
5d51ea26
DC
7800:root .theme-dark,
7801:root.theme-dark {
7802 --f7-contacts-list-title-text-color: #fff;
7803}
5309fbda
DC
7804.ios {
7805 --f7-contacts-list-title-font-size: inherit;
7806 --f7-contacts-list-title-font-weight: 600;
7807 --f7-contacts-list-title-text-color: #000;
7808 --f7-contacts-list-title-height: 22px;
7809 --f7-contacts-list-title-bg-color: #f7f7f7;
7810}
7811.ios .theme-dark,
7812.ios.theme-dark {
5309fbda
DC
7813 --f7-contacts-list-title-bg-color: #232323;
7814}
7815.md {
7816 --f7-contacts-list-title-font-size: 20px;
7817 --f7-contacts-list-title-font-weight: 500;
5d51ea26 7818 /*
5309fbda 7819 --f7-contacts-list-title-text-color: var(--f7-theme-color);
5d51ea26 7820 */
5309fbda
DC
7821 --f7-contacts-list-title-height: 48px;
7822 --f7-contacts-list-title-bg-color: transparent;
7823}
5d51ea26
DC
7824.aurora {
7825 --f7-contacts-list-title-font-weight: 600;
7826 --f7-contacts-list-title-text-color: #000;
7827 /*
7828 --f7-contacts-list-title-bg-color: var(--f7-list-group-title-bg-color);
7829 --f7-contacts-list-title-font-size: var(--f7-list-group-title-font-size);
7830 --f7-contacts-list-title-line-height: var(--f7-list-group-title-height);
7831 --f7-contacts-list-title-height: var(--f7-list-group-title-height);
7832 */
5309fbda
DC
7833}
7834.contacts-list {
7835 --f7-list-margin-vertical: 0px;
7836}
7837.contacts-list .list-group-title,
7838.contacts-list li.list-group-title {
5d51ea26
DC
7839 background-color: var(--f7-contacts-list-title-bg-color, var(--f7-list-group-title-bg-color));
7840 font-weight: var(--f7-contacts-list-title-font-weight, var(--f7-list-group-title-font-weight));
7841 font-size: var(--f7-contacts-list-title-font-size, var(--f7-list-group-title-font-size));
5309fbda 7842 color: var(--f7-contacts-list-title-text-color, var(--f7-theme-color));
5d51ea26
DC
7843 line-height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
7844 height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
5309fbda
DC
7845}
7846.contacts-list .list-group:first-child ul:before {
7847 display: none !important;
7848}
7849.contacts-list .list-group:last-child ul:after {
7850 display: none !important;
7851}
7852.md .contacts-list .list-group-title {
7853 pointer-events: none;
7854 overflow: visible;
7855 width: 56px;
7856}
7857.md .contacts-list .list-group-title + li {
7858 margin-top: calc(var(--f7-contacts-list-title-height) * -1);
7859}
7860.md .contacts-list li:not(.list-group-title) {
7861 padding-right: 56px;
7862}
7863/* === Virtual List === */
7864/* === Indexed List === */
7865:root {
7866 --f7-list-index-width: 16px;
7867 --f7-list-index-font-size: 11px;
7868 --f7-list-index-font-weight: 600;
7869 /* --f7-list-index-text-color: var(--f7-theme-color); */
7870 --f7-list-index-item-height: 14px;
7871 --f7-list-index-label-text-color: #fff;
7872 /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
7873 --f7-list-index-label-font-weight: 500;
7874}
7875.ios {
7876 --f7-list-index-label-size: 44px;
7877 --f7-list-index-label-font-size: 17px;
7878 --f7-list-index-skip-dot-size: 6px;
7879}
7880.md {
7881 --f7-list-index-label-size: 56px;
7882 --f7-list-index-label-font-size: 20px;
7883 --f7-list-index-skip-dot-size: 4px;
7884}
5d51ea26
DC
7885.aurora {
7886 --f7-list-index-font-size: 12px;
7887 --f7-list-index-label-size: 32px;
7888 --f7-list-index-label-font-size: 12px;
7889 --f7-list-index-label-font-weight: 600;
7890 --f7-list-index-skip-dot-size: 4px;
7891}
5309fbda
DC
7892.list-index {
7893 position: absolute;
7894 top: 0;
7895 bottom: 0;
7896 text-align: center;
7897 z-index: 10;
7898 width: var(--f7-list-index-width);
7899 cursor: pointer;
7900 -webkit-user-select: none;
7901 -moz-user-select: none;
7902 -ms-user-select: none;
7903 user-select: none;
7904 left: var(--f7-safe-area-left);
7905}
7906.list-index:before {
7907 content: '';
7908 position: absolute;
7909 width: 20px;
7910 top: 0;
7911 right: 100%;
7912 height: 100%;
7913}
7914.list-index ul {
7915 color: var(--f7-list-index-text-color, var(--f7-theme-color));
7916 font-size: var(--f7-list-index-font-size);
7917 font-weight: var(--f7-list-index-font-weight);
7918 list-style: none;
7919 margin: 0;
7920 padding: 0;
7921 display: flex;
7922 flex-direction: column;
7923 justify-content: center;
7924 align-items: center;
7925 flex-shrink: 0;
7926 height: 100%;
7927 width: 100%;
7928 position: relative;
7929}
7930.list-index li {
7931 margin: 0;
7932 padding: 0;
7933 list-style: none;
7934 position: relative;
7935 height: var(--f7-list-index-item-height);
7936 line-height: var(--f7-list-index-item-height);
7937 flex-shrink: 0;
7938 display: block;
7939 width: 100%;
7940}
7941.list-index .list-index-skip-placeholder:after {
7942 content: '';
7943 position: absolute;
7944 left: 50%;
7945 top: 50%;
7946 border-radius: 50%;
7947 width: var(--f7-list-index-skip-dot-size);
7948 height: var(--f7-list-index-skip-dot-size);
7949 margin-left: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
7950 margin-top: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
7951 background: var(--f7-list-index-text-color, var(--f7-theme-color));
7952}
7953.list-index .list-index-label {
7954 position: absolute;
7955 bottom: 0;
7956 right: 100%;
7957 text-align: center;
7958 background-color: var(--f7-list-index-label-bg-color, var(--f7-theme-color));
7959 color: var(--f7-list-index-label-text-color);
7960 width: var(--f7-list-index-label-size);
7961 height: var(--f7-list-index-label-size);
7962 line-height: var(--f7-list-index-label-size);
7963 font-size: var(--f7-list-index-label-font-size);
7964 font-weight: var(--f7-list-index-label-font-weight);
7965}
7966.navbar ~ .page > .list-index,
7967.navbar ~ .list-index {
7968 top: var(--f7-navbar-height);
7969}
7970.navbar ~ .toolbar-top ~ .list-index,
7971.ios .navbar ~ .toolbar-top-ios ~ .list-index,
7972.md .navbar ~ .toolbar-top-md ~ .list-index {
7973 top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
7974}
7975.navbar ~ .toolbar-top.tabbar-labels ~ .list-index,
7976.ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .list-index,
7977.md .navbar ~ .toolbar-top-md.tabbar-labels ~ .list-index {
7978 top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
7979}
7980.navbar ~ .subnavbar ~ .list-index,
7981.page-with-subnavbar .navbar ~ .list-index {
7982 top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height));
7983}
7984.toolbar-bottom ~ .page > .list-index,
7985.ios .toolbar-bottom-ios ~ .page > .list-index,
7986.md .toolbar-bottom-md ~ .page > .list-index,
7987.toolbar-bottom ~ * .page > .list-index,
7988.ios .toolbar-bottom-ios ~ * .page > .list-index,
7989.md .toolbar-bottom-md ~ * .page > .list-index,
7990.toolbar-bottom ~ .list-index,
7991.ios .toolbar-bottom-ios ~ .list-index,
7992.md .toolbar-bottom-md ~ .list-index {
7993 bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
7994}
7995.toolbar-bottom.tabbar-labels ~ .page > .list-index,
7996.ios .toolbar-bottom-ios.tabbar-labels ~ .page > .list-index,
7997.md .toolbar-bottom-md.tabbar-labels ~ .page > .list-index,
7998.toolbar-bottom.tabbar-labels ~ * .page > .list-index,
7999.ios .toolbar-bottom-ios.tabbar-labels ~ * .page > .list-index,
8000.md .toolbar-bottom-md.tabbar-labels ~ * .page > .list-index,
8001.toolbar-bottom.tabbar-labels ~ .list-index,
8002.ios .toolbar-bottom-ios.tabbar-labels ~ .list-index,
8003.md .toolbar-bottom-md.tabbar-labels ~ .list-index {
8004 bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom));
8005}
8006.ios .list-index .list-index-label {
8007 margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
8008 margin-right: calc(var(--f7-list-index-width) - 1px);
8009 border-radius: 50%;
8010}
8011.ios .list-index .list-index-label:before {
8012 position: absolute;
8013 width: 100%;
8014 height: 100%;
8015 border-radius: 50% 0% 50% 50%;
8016 content: '';
8017 background-color: inherit;
8018 left: 0;
8019 top: 0;
8020 transform: rotate(45deg);
8021 z-index: -1;
8022}
8023.md .list-index .list-index-label {
8024 border-radius: 50% 50% 0 50%;
8025}
5d51ea26
DC
8026.aurora .list-index .list-index-label {
8027 margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
8028 margin-right: calc(var(--f7-list-index-width) - 1px);
8029 border-radius: 50%;
8030}
8031.aurora .list-index .list-index-label:before {
8032 position: absolute;
8033 width: 100%;
8034 height: 100%;
8035 border-radius: 50% 1px 50% 50%;
8036 content: '';
8037 background-color: inherit;
8038 left: 0;
8039 top: 0;
8040 transform: rotate(45deg);
8041 z-index: -1;
8042}
5309fbda
DC
8043/* === Timeline === */
8044:root {
8045 --f7-timeline-horizontal-date-height: 34px;
8046 --f7-timeline-year-height: 24px;
5d51ea26 8047 --f7-timeline-year-font-weight: inherit;
5309fbda 8048 --f7-timeline-month-height: 24px;
5d51ea26
DC
8049 --f7-timeline-month-font-size: inherit;
8050 --f7-timeline-month-font-weight: inherit;
5309fbda 8051 --f7-timeline-item-inner-bg-color: #fff;
5d51ea26
DC
8052 --f7-timeline-item-text-font-weight: inherit;
8053 --f7-timeline-item-subtitle-font-weight: inherit;
5309fbda
DC
8054}
8055:root .theme-dark,
8056:root.theme-dark {
8057 --f7-timeline-item-inner-bg-color: #1c1c1d;
5d51ea26
DC
8058 --f7-timeline-horizontal-item-border-color: #282829;
8059 --f7-timeline-horizontal-item-date-border-color: #282829;
5309fbda
DC
8060}
8061.ios {
8062 --f7-timeline-padding-horizontal: 15px;
8063 --f7-timeline-margin-vertical: 35px;
8064 --f7-timeline-divider-margin-horizontal: 15px;
8065 --f7-timeline-inner-block-margin-vertical: 15px;
8066 --f7-timeline-item-inner-border-radius: 7px;
8067 --f7-timeline-item-inner-box-shadow: none;
8068 --f7-timeline-item-time-font-size: 13px;
8069 --f7-timeline-item-time-text-color: #6d6d72;
8070 --f7-timeline-item-title-font-size: 17px;
5d51ea26 8071 --f7-timeline-item-title-line-height: inherit;
5309fbda
DC
8072 --f7-timeline-item-title-font-weight: 600;
8073 --f7-timeline-item-subtitle-font-size: 15px;
5d51ea26
DC
8074 --f7-timeline-item-subtitle-line-height: inherit;
8075 --f7-timeline-item-text-font-size: inherit;
8076 --f7-timeline-item-text-color: inherit;
8077 --f7-timeline-item-text-line-height: inherit;
8078 --f7-timeline-year-font-size: 16px;
5309fbda
DC
8079 --f7-timeline-horizontal-item-padding: 10px;
8080 --f7-timeline-horizontal-item-border-color: #c4c4c4;
8081 --f7-timeline-horizontal-item-date-border-color: #c4c4c4;
8082 --f7-timeline-horizontal-item-date-shadow-image: none;
8083}
8084.ios .theme-dark,
8085.ios.theme-dark {
8086 --f7-timeline-item-time-text-color: #8E8E93;
8087}
8088.md {
8089 --f7-timeline-padding-horizontal: 16px;
8090 --f7-timeline-margin-vertical: 32px;
8091 --f7-timeline-divider-margin-horizontal: 16px;
8092 --f7-timeline-inner-block-margin-vertical: 16px;
8093 --f7-timeline-item-inner-border-radius: 4px;
8094 --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
8095 --f7-timeline-item-time-font-size: 13px;
8096 --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
8097 --f7-timeline-item-title-font-size: 16px;
5d51ea26 8098 --f7-timeline-item-title-line-height: inherit;
5309fbda
DC
8099 --f7-timeline-item-title-font-weight: 400;
8100 --f7-timeline-item-subtitle-font-size: inherit;
5d51ea26
DC
8101 --f7-timeline-item-subtitle-line-height: inherit;
8102 --f7-timeline-item-text-font-size: inherit;
8103 --f7-timeline-item-text-line-height: inherit;
8104 --f7-timeline-item-text-color: inherit;
8105 --f7-timeline-year-font-size: 16px;
5309fbda
DC
8106 --f7-timeline-horizontal-item-padding: 12px;
8107 --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
8108 --f7-timeline-horizontal-item-date-border-color: transparent;
8109 --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
8110}
8111.md .theme-dark,
8112.md.theme-dark {
8113 --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
8114}
5d51ea26
DC
8115.aurora {
8116 --f7-timeline-padding-horizontal: 10px;
8117 --f7-timeline-margin-vertical: 15px;
8118 --f7-timeline-divider-margin-horizontal: 15px;
8119 --f7-timeline-inner-block-margin-vertical: 15px;
8120 --f7-timeline-item-inner-border-radius: 4px;
8121 --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
8122 --f7-timeline-item-time-font-size: 12px;
8123 --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.5);
8124 --f7-timeline-item-title-font-size: 14px;
8125 --f7-timeline-item-title-line-height: 1.3;
8126 --f7-timeline-item-title-font-weight: 600;
8127 --f7-timeline-item-subtitle-font-size: 14px;
8128 --f7-timeline-item-subtitle-line-height: 1.3;
8129 --f7-timeline-item-text-color: rgba(0, 0, 0, 0.6);
8130 --f7-timeline-item-text-font-size: 12px;
8131 --f7-timeline-item-text-line-height: 1.33;
8132 --f7-timeline-year-font-size: 14px;
8133 --f7-timeline-year-font-weight: 500;
8134 --f7-timeline-horizontal-item-padding: 10px;
8135 --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.2);
8136 --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.2);
8137 --f7-timeline-horizontal-item-date-shadow-image: none;
8138}
8139.aurora .theme-dark,
8140.aurora.theme-dark {
8141 --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.52);
8142 --f7-timeline-item-text-color: rgba(255, 255, 255, 0.52);
8143}
5309fbda
DC
8144.timeline {
8145 box-sizing: border-box;
8146 margin: var(--f7-timeline-margin-vertical) 0;
8147 padding: 0 var(--f7-timeline-padding-horizontal);
8148 padding-top: 0;
8149 padding-bottom: 0;
8150 padding-left: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));
8151 padding-right: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right));
8152}
8153.block-strong .timeline {
8154 padding: 0;
8155 margin: 0;
8156}
8157.timeline-item {
8158 display: flex;
8159 justify-content: flex-start;
8160 overflow: hidden;
8161 box-sizing: border-box;
8162 position: relative;
8163 padding: 2px 0px var(--f7-timeline-padding-horizontal);
8164}
8165.timeline-item:last-child {
8166 padding-bottom: 2px;
8167}
8168.timeline-item-date {
8169 flex-shrink: 0;
8170 width: 50px;
8171 text-align: right;
8172 box-sizing: border-box;
8173}
8174.timeline-item-date small {
8175 font-size: 10px;
8176}
8177.timeline-item-content {
8178 margin: 2px;
8179 min-width: 0;
8180 position: relative;
8181 flex-shrink: 10;
8182}
8183.timeline-item-content .card,
8184.timeline-item-content.card,
8185.timeline-item-content .list,
8186.timeline-item-content.list,
8187.timeline-item-content .block,
8188.timeline-item-content.block {
8189 margin: 0;
8190 width: 100%;
8191}
8192.timeline-item-content .card + .card,
8193.timeline-item-content .list + .card,
8194.timeline-item-content .block + .card,
8195.timeline-item-content .card + .list,
8196.timeline-item-content .list + .list,
8197.timeline-item-content .block + .list,
8198.timeline-item-content .card + .block,
8199.timeline-item-content .list + .block,
8200.timeline-item-content .block + .block {
8201 margin: var(--f7-timeline-inner-block-margin-vertical) 0 0;
8202}
8203.timeline-item-content p:first-child,
8204.timeline-item-content ul:first-child,
8205.timeline-item-content ol:first-child,
8206.timeline-item-content h1:first-child,
8207.timeline-item-content h2:first-child,
8208.timeline-item-content h3:first-child,
8209.timeline-item-content h4:first-child {
8210 margin-top: 0;
8211}
8212.timeline-item-content p:last-child,
8213.timeline-item-content ul:last-child,
8214.timeline-item-content ol:last-child,
8215.timeline-item-content h1:last-child,
8216.timeline-item-content h2:last-child,
8217.timeline-item-content h3:last-child,
8218.timeline-item-content h4:last-child {
8219 margin-bottom: 0;
8220}
8221.timeline-item-inner {
8222 background: var(--f7-timeline-item-inner-bg-color);
8223 box-sizing: border-box;
8224 border-radius: var(--f7-timeline-item-inner-border-radius);
8225 padding: 8px var(--f7-timeline-padding-horizontal);
8226 box-shadow: var(--f7-timeline-item-inner-box-shadow);
8227}
8228.timeline-item-inner + .timeline-item-inner {
8229 margin-top: var(--f7-timeline-inner-block-margin-vertical);
8230}
8231.timeline-item-inner .block {
8232 padding: 0;
8233 color: inherit;
8234}
8235.timeline-item-inner .block-strong {
8236 padding-left: 0;
8237 padding-right: 0;
8238 margin: 0;
8239}
8240.timeline-item-inner .block-strong:before {
8241 display: none !important;
8242}
8243.timeline-item-inner .block-strong:after {
8244 display: none !important;
8245}
8246.timeline-item-inner .list ul:before {
8247 display: none !important;
8248}
8249.timeline-item-inner .list ul:after {
8250 display: none !important;
8251}
8252.timeline-item-divider {
8253 width: 1px;
8254 position: relative;
8255 width: 10px;
8256 height: 10px;
8257 background: #bbb;
8258 border-radius: 50%;
8259 flex-shrink: 0;
8260 margin: 3px var(--f7-timeline-divider-margin-horizontal) 0;
8261}
8262.timeline-item-divider:after,
8263.timeline-item-divider:before {
8264 content: ' ';
8265 width: 1px;
8266 height: 100vh;
8267 position: absolute;
8268 left: 50%;
8269 background: inherit;
8270 transform: translate3d(-50%, 0, 0);
8271}
8272.timeline-item-divider:after {
8273 top: 100%;
8274}
8275.timeline-item-divider:before {
8276 bottom: 100%;
8277}
8278.timeline-item:last-child .timeline-item-divider:after {
8279 display: none;
8280}
8281.timeline-item:first-child .timeline-item-divider:before {
8282 display: none;
8283}
8284.timeline-item-time {
8285 font-size: var(--f7-timeline-item-time-font-size);
8286 margin-top: var(--f7-timeline-inner-block-margin-vertical);
8287 color: var(--f7-timeline-item-time-text-color);
8288}
8289.timeline-item-time:first-child,
8290.timeline-item-time:last-child {
8291 margin-top: 0;
8292}
8293.timeline-item-title + .timeline-item-time {
8294 margin-top: 0;
8295}
8296.timeline-item-title {
8297 font-size: var(--f7-timeline-item-title-font-size);
8298 font-weight: var(--f7-timeline-item-title-font-weight);
5d51ea26 8299 line-height: var(--f7-timeline-item-title-line-height);
5309fbda
DC
8300}
8301.timeline-item-subtitle {
8302 font-size: var(--f7-timeline-item-subtitle-font-size);
8303 font-weight: var(--f7-timeline-item-subtitle-font-weight);
5d51ea26
DC
8304 line-height: var(--f7-timeline-item-subtitle-line-height);
8305}
8306.timeline-item-text {
8307 color: var(--f7-timeline-item-text-color);
8308 font-size: var(--f7-timeline-item-text-font-size);
8309 font-weight: var(--f7-timeline-item-text-font-weight);
8310 line-height: var(--f7-timeline-item-text-line-height);
5309fbda
DC
8311}
8312.timeline-sides .timeline-item-right,
8313.timeline-sides .timeline-item {
8314 margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
8315 margin-left: 0;
8316}
8317.timeline-sides .timeline-item-right .timeline-item-date,
8318.timeline-sides .timeline-item .timeline-item-date {
8319 text-align: left;
8320}
8321.timeline-sides .timeline-item-left,
8322.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
8323 flex-direction: row-reverse;
8324 margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
8325 margin-right: 0;
8326}
8327.timeline-sides .timeline-item-left .timeline-item-date,
8328.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
8329 text-align: right;
8330}
8331@media (min-width: 768px) {
8332 .tablet-sides .timeline-item-right,
8333 .tablet-sides .timeline-item {
8334 margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
8335 margin-left: 0;
8336 }
8337 .tablet-sides .timeline-item-right .timeline-item-date,
8338 .tablet-sides .timeline-item .timeline-item-date {
8339 text-align: left;
8340 }
8341 .tablet-sides .timeline-item-left,
8342 .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
8343 flex-direction: row-reverse;
8344 margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
8345 margin-right: 0;
8346 }
8347 .tablet-sides .timeline-item-left .timeline-item-date,
8348 .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
8349 text-align: right;
8350 }
8351}
8352.timeline-horizontal {
8353 height: 100%;
8354 display: flex;
8355 padding: 0;
8356 margin: 0;
8357 position: relative;
8358 padding-left: var(--f7-safe-area-left);
8359 padding-right: 0;
8360}
8361.timeline-horizontal .timeline-item {
8362 display: block;
8363 width: 33.33333333vw;
8364 margin: 0;
8365 padding: 0;
8366 flex-shrink: 0;
8367 position: relative;
8368 height: 100%;
8369 padding-top: var(--f7-timeline-horizontal-date-height) !important;
8370 padding-bottom: var(--f7-timeline-horizontal-item-padding);
8371}
8372.timeline-horizontal .timeline-item:after {
8373 content: '';
8374 position: absolute;
8375 background-color: var(--f7-timeline-horizontal-item-border-color);
8376 display: block;
8377 z-index: 15;
8378 top: 0;
8379 right: 0;
8380 bottom: auto;
8381 left: auto;
8382 width: 1px;
8383 height: 100%;
8384 transform-origin: 100% 50%;
8385 transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
8386}
8387.timeline-horizontal .timeline-item-date {
8388 padding: 0px var(--f7-timeline-horizontal-item-padding);
8389 width: auto;
8390 text-align: left;
8391 line-height: var(--f7-timeline-horizontal-date-height);
8392 position: absolute;
8393 left: 0;
8394 top: 0;
8395 width: 100%;
8396 height: var(--f7-timeline-horizontal-date-height);
8397 background-color: var(--f7-bars-bg-color, var(--f7-theme-color));
8398 color: var(--f7-bars-text-color);
8399 text-align: right;
8400}
8401.timeline-horizontal .timeline-item-date:after {
8402 content: '';
8403 position: absolute;
8404 background-color: var(--f7-timeline-horizontal-item-date-border-color);
8405 display: block;
8406 z-index: 15;
8407 top: auto;
8408 right: auto;
8409 bottom: 0;
8410 left: 0;
8411 height: 1px;
8412 width: 100%;
8413 transform-origin: 50% 100%;
8414 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
8415}
8416.timeline-horizontal .timeline-item-date:before {
8417 content: '';
8418 position: absolute;
8419 right: 0;
8420 width: 100%;
8421 top: 100%;
8422 bottom: auto;
8423 height: 8px;
8424 pointer-events: none;
8425 background: var(--f7-timeline-horizontal-item-date-shadow-image);
8426}
8427.timeline-horizontal.no-shadow .timeline-item-date:before {
8428 display: none;
8429}
8430.timeline-horizontal .timeline-item-content {
8431 padding: var(--f7-timeline-horizontal-item-padding);
8432 height: calc(100% - var(--f7-timeline-horizontal-item-padding));
8433 will-change: scroll-position;
8434 overflow: auto;
8435 -webkit-overflow-scrolling: touch;
8436 margin: 0;
8437}
8438.timeline-horizontal .timeline-item-divider {
8439 display: none;
8440}
8441.timeline-horizontal > .timeline-item:last-child:after,
8442.timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after {
8443 display: none !important;
8444}
8445.timeline-horizontal.col-5 .timeline-item {
8446 width: 5vw;
8447}
8448.timeline-horizontal.col-10 .timeline-item {
8449 width: 10vw;
8450}
8451.timeline-horizontal.col-15 .timeline-item {
8452 width: 15vw;
8453}
8454.timeline-horizontal.col-20 .timeline-item {
8455 width: 20vw;
8456}
8457.timeline-horizontal.col-25 .timeline-item {
8458 width: 25vw;
8459}
8460.timeline-horizontal.col-30 .timeline-item {
8461 width: 30vw;
8462}
8463.timeline-horizontal.col-33 .timeline-item {
8464 width: 33.333333333333336vw;
8465}
8466.timeline-horizontal.col-35 .timeline-item {
8467 width: 35vw;
8468}
8469.timeline-horizontal.col-40 .timeline-item {
8470 width: 40vw;
8471}
8472.timeline-horizontal.col-45 .timeline-item {
8473 width: 45vw;
8474}
8475.timeline-horizontal.col-50 .timeline-item {
8476 width: 50vw;
8477}
8478.timeline-horizontal.col-55 .timeline-item {
8479 width: 55vw;
8480}
8481.timeline-horizontal.col-60 .timeline-item {
8482 width: 60vw;
8483}
8484.timeline-horizontal.col-65 .timeline-item {
8485 width: 65vw;
8486}
8487.timeline-horizontal.col-66 .timeline-item {
8488 width: 66.66666666666666vw;
8489}
8490.timeline-horizontal.col-70 .timeline-item {
8491 width: 70vw;
8492}
8493.timeline-horizontal.col-75 .timeline-item {
8494 width: 75vw;
8495}
8496.timeline-horizontal.col-80 .timeline-item {
8497 width: 80vw;
8498}
8499.timeline-horizontal.col-85 .timeline-item {
8500 width: 85vw;
8501}
8502.timeline-horizontal.col-90 .timeline-item {
8503 width: 90vw;
8504}
8505.timeline-horizontal.col-95 .timeline-item {
8506 width: 95vw;
8507}
8508.timeline-horizontal.col-100 .timeline-item {
8509 width: 100vw;
8510}
8511@media (min-width: 768px) {
8512 .timeline-horizontal.tablet-5 .timeline-item {
8513 width: 5vw;
8514 }
8515 .timeline-horizontal.tablet-10 .timeline-item {
8516 width: 10vw;
8517 }
8518 .timeline-horizontal.tablet-15 .timeline-item {
8519 width: 15vw;
8520 }
8521 .timeline-horizontal.tablet-20 .timeline-item {
8522 width: 20vw;
8523 }
8524 .timeline-horizontal.tablet-25 .timeline-item {
8525 width: 25vw;
8526 }
8527 .timeline-horizontal.tablet-30 .timeline-item {
8528 width: 30vw;
8529 }
8530 .timeline-horizontal.tablet-33 .timeline-item {
8531 width: 33.333333333333336vw;
8532 }
8533 .timeline-horizontal.tablet-35 .timeline-item {
8534 width: 35vw;
8535 }
8536 .timeline-horizontal.tablet-40 .timeline-item {
8537 width: 40vw;
8538 }
8539 .timeline-horizontal.tablet-45 .timeline-item {
8540 width: 45vw;
8541 }
8542 .timeline-horizontal.tablet-50 .timeline-item {
8543 width: 50vw;
8544 }
8545 .timeline-horizontal.tablet-55 .timeline-item {
8546 width: 55vw;
8547 }
8548 .timeline-horizontal.tablet-60 .timeline-item {
8549 width: 60vw;
8550 }
8551 .timeline-horizontal.tablet-65 .timeline-item {
8552 width: 65vw;
8553 }
8554 .timeline-horizontal.tablet-66 .timeline-item {
8555 width: 66.66666666666666vw;
8556 }
8557 .timeline-horizontal.tablet-70 .timeline-item {
8558 width: 70vw;
8559 }
8560 .timeline-horizontal.tablet-75 .timeline-item {
8561 width: 75vw;
8562 }
8563 .timeline-horizontal.tablet-80 .timeline-item {
8564 width: 80vw;
8565 }
8566 .timeline-horizontal.tablet-85 .timeline-item {
8567 width: 85vw;
8568 }
8569 .timeline-horizontal.tablet-90 .timeline-item {
8570 width: 90vw;
8571 }
8572 .timeline-horizontal.tablet-95 .timeline-item {
8573 width: 95vw;
8574 }
8575 .timeline-horizontal.tablet-100 .timeline-item {
8576 width: 100vw;
8577 }
8578}
8579.timeline-year {
8580 padding-top: var(--f7-timeline-year-height);
8581}
8582.timeline-year:after {
8583 content: '';
8584 position: absolute;
8585 background-color: var(--f7-timeline-horizontal-item-border-color);
8586 display: block;
8587 z-index: 15;
8588 top: 0;
8589 right: 0;
8590 bottom: auto;
8591 left: auto;
8592 width: 1px;
8593 height: 100%;
8594 transform-origin: 100% 50%;
8595 transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
8596}
8597.timeline-year:last-child:after {
8598 display: none !important;
8599}
8600.timeline-month {
8601 padding-top: var(--f7-timeline-month-height);
8602}
8603.timeline-month .timeline-item:before {
8604 content: '';
8605 position: absolute;
8606 background-color: var(--f7-timeline-horizontal-item-border-color);
8607 display: block;
8608 z-index: 15;
8609 top: 0;
8610 right: auto;
8611 bottom: auto;
8612 left: 0;
8613 height: 1px;
8614 width: 100%;
8615 transform-origin: 50% 0%;
8616 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
8617}
8618.timeline-year,
8619.timeline-month {
8620 display: flex;
8621 flex-shrink: 0;
8622 position: relative;
8623 box-sizing: border-box;
8624 height: 100%;
8625}
8626.timeline-year-title {
8627 line-height: var(--f7-timeline-year-height);
8628 height: var(--f7-timeline-year-height);
5d51ea26
DC
8629 font-size: var(--f7-timeline-year-font-size);
8630 font-weight: var(--f7-timeline-year-font-weight);
5309fbda
DC
8631}
8632.timeline-month-title {
8633 line-height: var(--f7-timeline-month-height);
8634 height: var(--f7-timeline-month-height);
5d51ea26
DC
8635 font-size: var(--f7-timeline-month-font-size);
8636 font-weight: var(--f7-timeline-month-font-weight);
5309fbda
DC
8637}
8638.timeline-year-title,
8639.timeline-month-title {
8640 position: absolute;
8641 left: 0;
8642 top: 0;
8643 width: 100%;
8644 box-sizing: border-box;
8645 padding: 0 var(--f7-timeline-horizontal-item-padding);
8646 background-color: var(--f7-bars-bg-color, var(--f7-theme-color));
8647 color: var(--f7-bars-text-color);
8648}
8649.timeline-year-title span,
8650.timeline-month-title span {
8651 display: inline-block;
8652 position: -webkit-sticky;
8653 position: sticky;
8654 right: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-right));
8655}
5309fbda
DC
8656.timeline-month-title span {
8657 margin-top: -2px;
8658}
8659.timeline-year:first-child .timeline-year-title,
8660.timeline-year:first-child .timeline-month:first-child .timeline-month-title,
8661.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
8662 left: calc(var(--f7-safe-area-left) * -1);
8663 right: 0;
8664 width: auto;
8665}
8666.timeline-horizontal .timeline-item:first-child,
8667.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
8668.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
8669.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item {
8670 overflow: visible;
8671}
8672.timeline-horizontal .timeline-item:first-child .timeline-item-date,
8673.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date,
8674.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child .timeline-item-date,
8675.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item .timeline-item-date {
8676 width: auto;
8677 padding-left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
8678 left: calc(0px - var(--f7-safe-area-left));
8679 right: 0;
8680}
8681.timeline-year:last-child .timeline-year-title,
8682.timeline-year:last-child .timeline-month:last-child .timeline-month-title {
8683 width: auto;
8684 right: calc(0px - var(--f7-safe-area-right));
8685}
8686.timeline-horizontal .timeline-item:last-child,
8687.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
8688 overflow: visible;
8689}
8690.timeline-horizontal .timeline-item:last-child .timeline-item-date,
8691.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date {
8692 width: auto;
8693 right: calc(0px - var(--f7-safe-area-right));
8694 left: 0;
8695}
5309fbda
DC
8696.ios .block-strong .timeline-item-inner {
8697 border-radius: 3px;
8698 border: 1px solid rgba(0, 0, 0, 0.1);
8699}
8700.ios .timeline-year-title span {
8701 margin-top: 3px;
8702}
5309fbda
DC
8703.md .timeline-year-title span {
8704 margin-top: 2px;
8705}
5d51ea26
DC
8706.aurora .timeline-year-title span {
8707 margin-top: 2px;
8708}
5309fbda
DC
8709/* === Tabs === */
8710.tabs .tab {
8711 display: none;
8712}
8713.tabs .tab-active {
8714 display: block;
8715}
8716.tabs-animated-wrap {
8717 position: relative;
8718 width: 100%;
8719 overflow: hidden;
8720 height: 100%;
8721}
8722.tabs-animated-wrap > .tabs {
8723 display: flex;
8724 height: 100%;
8725 transition-duration: 300ms;
8726}
8727.tabs-animated-wrap > .tabs > .tab {
8728 width: 100%;
8729 display: block;
8730 flex-shrink: 0;
8731}
8732.tabs-animated-wrap.not-animated > .tabs {
5d51ea26 8733 transition-duration: 0ms;
5309fbda
DC
8734}
8735.tabs-swipeable-wrap {
8736 height: 100%;
8737}
8738.tabs-swipeable-wrap > .tabs {
8739 height: 100%;
8740}
8741.tabs-swipeable-wrap > .tabs > .tab {
8742 display: block;
8743}
8744.page > .tabs {
8745 height: 100%;
8746}
8747/* === Panels === */
8748:root {
8749 --f7-panel-width: 260px;
5d51ea26
DC
8750 /*
8751 --f7-panel-left-width: var(--f7-panel-width);
8752 --f7-panel-right-width: var(--f7-panel-width);
8753 */
5309fbda
DC
8754 --f7-panel-bg-color: #fff;
8755}
8756.ios {
8757 --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0);
8758 --f7-panel-transition-duration: 400ms;
8759 --f7-panel-shadow: transparent;
8760}
8761.md {
8762 --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
8763 --f7-panel-transition-duration: 300ms;
8764 --f7-panel-shadow: rgba(0, 0, 0, 0.25) 0%,
8765 rgba(0, 0, 0, 0.1) 30%,
8766 rgba(0, 0, 0, 0.05) 40%,
8767 rgba(0, 0, 0, 0) 60%,
8768 rgba(0, 0, 0, 0) 100%;
8769}
5d51ea26
DC
8770.aurora {
8771 --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
8772 --f7-panel-transition-duration: 400ms;
8773 --f7-panel-shadow: transparent;
8774}
5309fbda
DC
8775.panel-backdrop {
8776 position: absolute;
8777 left: 0;
5d51ea26 8778 top: calc(var(--f7-statusbar-height) + var(--f7-appbar-app-offset, 0px));
5309fbda 8779 width: 100%;
5d51ea26 8780 height: calc(100% - var(--f7-statusbar-height) - var(--f7-appbar-app-offset, 0px));
5309fbda
DC
8781 opacity: 0;
8782 z-index: 5999;
8783 display: none;
8784 transform: translate3d(0, 0, 0);
8785 background-color: var(--f7-panel-backdrop-bg-color);
8786 transition-duration: var(--f7-panel-transition-duration);
8787 will-change: transform, opacity;
8788}
8789.panel-backdrop.not-animated {
8790 transition-duration: 0ms !important;
8791}
8792.panel {
8793 z-index: 1000;
8794 display: none;
8795 box-sizing: border-box;
8796 position: absolute;
5d51ea26
DC
8797 top: calc(var(--f7-statusbar-height) + var(--f7-appbar-app-offset, 0px));
8798 height: calc(100% - var(--f7-statusbar-height) - var(--f7-appbar-app-offset, 0px));
5309fbda
DC
8799 transform: translate3d(0, 0, 0);
8800 width: var(--f7-panel-width);
8801 background-color: var(--f7-panel-bg-color);
8802 overflow: visible;
8803 will-change: transform;
5d51ea26 8804 transition-property: transform;
5309fbda
DC
8805}
8806.panel:after {
8807 pointer-events: none;
8808 opacity: 0;
8809 z-index: 5999;
8810 position: absolute;
8811 content: '';
8812 top: 0;
8813 width: 20px;
8814 height: 100%;
5d51ea26 8815 transition-property: transform, opacity;
5309fbda
DC
8816}
8817.panel,
8818.panel:after {
8819 transition-duration: var(--f7-panel-transition-duration);
8820}
8821.panel.not-animated,
8822.panel.not-animated:after {
8823 transition-duration: 0ms !important;
8824}
8825.panel.panel-reveal.not-animated ~ .views,
8826.panel.panel-reveal.not-animated ~ .view {
8827 transition-duration: 0ms !important;
8828}
5d51ea26
DC
8829.panel.panel-resizing {
8830 -webkit-user-select: none;
8831 -moz-user-select: none;
8832 -ms-user-select: none;
8833 user-select: none;
8834}
8835.panel.panel-resizing,
8836.panel.panel-resizing:after,
8837.panel.panel-resizing ~ .views,
8838.panel.panel-resizing ~ .view {
8839 transition-duration: 0ms !important;
8840}
5309fbda
DC
8841.panel-cover {
8842 z-index: 6000;
8843}
8844.panel-left {
8845 left: 0;
5d51ea26 8846 width: var(--f7-panel-left-width, var(--f7-panel-width));
5309fbda
DC
8847}
8848.panel-left.panel-cover {
8849 transform: translate3d(-100%, 0, 0);
8850}
8851.panel-left.panel-cover:after {
8852 left: 100%;
8853 background: linear-gradient(to right, var(--f7-panel-shadow));
8854}
8855html.with-panel-left-cover .panel-left.panel-cover:after {
8856 opacity: 1;
8857}
8858.panel-left.panel-reveal:after {
5d51ea26
DC
8859 right: 0;
8860 transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
5309fbda
DC
8861 background: linear-gradient(to left, var(--f7-panel-shadow));
8862}
8863html.with-panel-left-reveal .panel-left.panel-reveal:after {
8864 opacity: 1;
5d51ea26 8865 transform: translate3d(0, 0, 0);
5309fbda
DC
8866}
8867.panel-right {
8868 right: 0;
5d51ea26 8869 width: var(--f7-panel-right-width, var(--f7-panel-width));
5309fbda
DC
8870}
8871.panel-right.panel-cover {
8872 transform: translate3d(100%, 0, 0);
8873}
8874.panel-right.panel-cover:after {
8875 right: 100%;
8876 background: linear-gradient(to left, var(--f7-panel-shadow));
8877}
8878html.with-panel-right-cover .panel-right.panel-cover:after {
8879 opacity: 1;
8880}
8881.panel-right.panel-reveal:after {
5d51ea26 8882 left: 0;
5309fbda 8883 background: linear-gradient(to right, var(--f7-panel-shadow));
5d51ea26 8884 transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
5309fbda
DC
8885}
8886html.with-panel-right-reveal .panel-right.panel-reveal:after {
8887 opacity: 1;
5d51ea26 8888 transform: translate3d(0, 0, 0);
5309fbda
DC
8889}
8890.panel-visible-by-breakpoint {
8891 display: block;
8892 transform: translate3d(0, 0, 0) !important;
8893}
8894.panel-visible-by-breakpoint:after {
8895 display: none;
8896}
8897.panel-visible-by-breakpoint.panel-cover {
8898 z-index: 5900;
8899}
8900html.with-panel-left-reveal .views,
8901html.with-panel-right-reveal .views,
8902html.with-panel-transitioning .views,
8903html.with-panel-left-reveal .framework7-root > .view,
8904html.with-panel-right-reveal .framework7-root > .view,
8905html.with-panel-transitioning .framework7-root > .view {
8906 transition-duration: var(--f7-panel-transition-duration);
8907 transition-property: transform;
8908}
8909html.with-panel-left-reveal .panel-backdrop,
8910html.with-panel-right-reveal .panel-backdrop,
8911html.with-panel-transitioning .panel-backdrop {
8912 background: rgba(0, 0, 0, 0);
8913 display: block;
8914 opacity: 0;
8915}
8916html.with-panel .framework7-root > .views .page-content,
8917html.with-panel .framework7-root > .view .page-content {
8918 overflow: hidden;
8919 -webkit-overflow-scrolling: auto;
8920}
8921html.with-panel-left-cover .panel-backdrop,
8922html.with-panel-right-cover .panel-backdrop {
8923 display: block;
8924 opacity: 1;
8925}
8926html.with-panel-left-reveal .views,
8927html.with-panel-left-reveal .framework7-root > .view,
8928html.with-panel-left-reveal .panel-backdrop {
5d51ea26 8929 transform: translate3d(var(--f7-panel-left-width, var(--f7-panel-width)), 0, 0);
5309fbda
DC
8930}
8931html.with-panel-right-reveal .views,
8932html.with-panel-right-reveal .framework7-root > .view,
8933html.with-panel-right-reveal .panel-backdrop {
5d51ea26 8934 transform: translate3d(calc(-1 * var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
5309fbda
DC
8935}
8936html.with-panel-left-cover .panel-left {
8937 transform: translate3d(0px, 0, 0);
8938}
8939html.with-panel-right-cover .panel-right {
8940 transform: translate3d(0px, 0, 0);
8941}
5d51ea26
DC
8942.panel-resize-handler {
8943 position: absolute;
8944 top: 0;
8945 height: 100%;
8946 width: 6px;
8947 cursor: col-resize;
8948 z-index: 6000;
8949 display: none;
8950}
8951.panel-resizable .panel-resize-handler {
8952 display: block;
8953}
8954.panel-left.panel-cover .panel-resize-handler {
8955 right: -3px;
8956}
8957.panel-left.panel-reveal .panel-resize-handler {
8958 right: 0;
8959}
8960.panel-right.panel-cover .panel-resize-handler {
8961 left: -3px;
8962}
8963.panel-right.panel-reveal .panel-resize-handler {
8964 left: 0;
8965}
5309fbda
DC
8966/* === Card === */
8967:root {
8968 --f7-card-bg-color: #fff;
8969 --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
8970 --f7-card-border-radius: 4px;
8971 --f7-card-font-size: inherit;
8972 --f7-card-header-text-color: inherit;
8973 --f7-card-header-font-weight: 400;
8974 --f7-card-header-border-color: #e1e1e1;
8975 --f7-card-footer-border-color: #e1e1e1;
8976 --f7-card-footer-font-weight: 400;
8977 --f7-card-footer-font-size: inherit;
8978 --f7-card-expandable-bg-color: #fff;
8979 --f7-card-expandable-font-size: 16px;
8980 --f7-card-expandable-tablet-width: 670px;
8981 --f7-card-expandable-tablet-height: 670px;
8982}
8983:root .theme-dark,
8984:root.theme-dark {
8985 --f7-card-bg-color: #1c1c1d;
5d51ea26 8986 --f7-card-expandable-bg-color: #1c1c1d;
5309fbda
DC
8987 --f7-card-outline-border-color: #282829;
8988 --f7-card-header-border-color: #282829;
8989 --f7-card-footer-border-color: #282829;
8990 --f7-card-footer-text-color: #8E8E93;
8991}
8992.ios {
8993 --f7-card-margin-horizontal: 10px;
8994 --f7-card-margin-vertical: 10px;
8995 --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
8996 --f7-card-content-padding-horizontal: 15px;
8997 --f7-card-content-padding-vertical: 15px;
8998 --f7-card-header-font-size: 17px;
8999 --f7-card-header-padding-vertical: 10px;
9000 --f7-card-header-padding-horizontal: 15px;
9001 --f7-card-header-min-height: 44px;
9002 --f7-card-footer-text-color: #6d6d72;
9003 --f7-card-footer-padding-vertical: 10px;
9004 --f7-card-footer-padding-horizontal: 15px;
9005 --f7-card-footer-min-height: 44px;
9006 --f7-card-expandable-margin-horizontal: 20px;
9007 --f7-card-expandable-margin-vertical: 30px;
9008 --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
9009 --f7-card-expandable-border-radius: 15px;
9010 --f7-card-expandable-tablet-border-radius: 5px;
9011 --f7-card-expandable-header-font-size: 27px;
9012 --f7-card-expandable-header-font-weight: bold;
9013}
9014.md {
9015 --f7-card-margin-horizontal: 8px;
9016 --f7-card-margin-vertical: 8px;
9017 --f7-card-box-shadow: var(--f7-elevation-1);
9018 --f7-card-content-padding-horizontal: 16px;
9019 --f7-card-content-padding-vertical: 16px;
9020 --f7-card-header-font-size: 16px;
9021 --f7-card-header-padding-vertical: 4px;
9022 --f7-card-header-padding-horizontal: 16px;
9023 --f7-card-header-min-height: 48px;
9024 --f7-card-footer-text-color: #757575;
9025 --f7-card-footer-padding-vertical: 4px;
9026 --f7-card-footer-padding-horizontal: 16px;
9027 --f7-card-footer-min-height: 48px;
9028 --f7-card-expandable-margin-horizontal: 12px;
9029 --f7-card-expandable-margin-vertical: 24px;
9030 --f7-card-expandable-box-shadow: var(--f7-elevation-10);
9031 --f7-card-expandable-border-radius: 8px;
9032 --f7-card-expandable-tablet-border-radius: 4px;
9033 --f7-card-expandable-header-font-size: 24px;
9034 --f7-card-expandable-header-font-weight: 500;
9035}
5d51ea26
DC
9036.aurora {
9037 --f7-card-margin-horizontal: 10px;
9038 --f7-card-margin-vertical: 10px;
9039 --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
9040 --f7-card-content-padding-horizontal: 15px;
9041 --f7-card-content-padding-vertical: 15px;
9042 --f7-card-header-font-size: 14px;
9043 --f7-card-header-font-weight: bold;
9044 --f7-card-header-padding-vertical: 10px;
9045 --f7-card-header-padding-horizontal: 15px;
9046 --f7-card-header-min-height: 38px;
9047 --f7-card-footer-text-color: rgba(0, 0, 0, 0.6);
9048 --f7-card-footer-padding-vertical: 10px;
9049 --f7-card-footer-padding-horizontal: 15px;
9050 --f7-card-footer-min-height: 38px;
9051 --f7-card-expandable-margin-horizontal: 10px;
9052 --f7-card-expandable-margin-vertical: 20px;
9053 --f7-card-expandable-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
9054 --f7-card-expandable-border-radius: 15px;
9055 --f7-card-expandable-tablet-border-radius: 5px;
9056 --f7-card-expandable-header-font-size: 27px;
9057 --f7-card-expandable-header-font-weight: bold;
9058}
5309fbda
DC
9059.cards-list > ul:before,
9060.card .list > ul:before {
9061 display: none !important;
9062}
9063.cards-list > ul:after,
9064.card .list > ul:after {
9065 display: none !important;
9066}
9067.cards-list ul,
9068.card .list ul {
9069 background: none;
9070}
9071.card {
9072 background: var(--f7-card-bg-color);
9073 position: relative;
9074 border-radius: var(--f7-card-border-radius);
9075 font-size: var(--f7-card-font-size);
9076 margin-top: var(--f7-card-margin-vertical);
9077 margin-bottom: var(--f7-card-margin-vertical);
9078 margin-left: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));
9079 margin-right: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));
9080 box-shadow: var(--f7-card-box-shadow);
9081}
9082.card .list,
9083.card .block {
9084 margin: 0;
9085}
9086.row:not(.no-gap) .col > .card {
9087 margin-left: 0;
9088 margin-right: 0;
9089}
9090.card.no-shadow {
9091 box-shadow: none;
9092}
9093.card-outline,
9094.ios .card-outline-ios,
5d51ea26
DC
9095.md .card-outline-md,
9096.aurora .card-outline-aurora {
5309fbda
DC
9097 box-shadow: none;
9098 border: 1px solid var(--f7-card-outline-border-color);
9099}
9100.card-outline.no-border,
9101.ios .card-outline-ios.no-border,
9102.md .card-outline-md.no-border,
5d51ea26 9103.aurora .card-outline-aurora.no-border,
5309fbda
DC
9104.card-outline.no-hairlines,
9105.ios .card-outline-ios.no-hairlines,
5d51ea26
DC
9106.md .card-outline-md.no-hairlines,
9107.aurora .card-outline-aurora.no-hairlines {
5309fbda
DC
9108 border: none;
9109}
9110.card-content {
9111 position: relative;
9112}
9113.card-content-padding {
9114 position: relative;
9115 padding: var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal);
9116}
9117.card-content-padding > .list,
9118.card-content-padding > .block {
9119 margin: calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal));
9120}
9121.card-content-padding > p:first-child {
9122 margin-top: 0;
9123}
9124.card-content-padding > p:last-child {
9125 margin-bottom: 0;
9126}
9127.card-header {
9128 min-height: var(--f7-card-header-min-height);
9129 color: var(--f7-card-header-text-color);
9130 font-size: var(--f7-card-header-font-size);
9131 font-weight: var(--f7-card-header-font-weight);
9132 padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal);
9133}
9134.card-footer {
9135 min-height: var(--f7-card-footer-min-height);
9136 color: var(--f7-card-footer-text-color);
9137 font-size: var(--f7-card-footer-font-size);
9138 font-weight: var(--f7-card-footer-font-weight);
9139 padding: var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal);
9140}
9141.card-footer a.link {
9142 overflow: hidden;
9143}
9144.card-header,
9145.card-footer {
9146 position: relative;
9147 box-sizing: border-box;
9148 display: flex;
9149 justify-content: space-between;
9150 align-items: center;
9151}
9152.card-header[valign="top"],
9153.card-footer[valign="top"] {
9154 align-items: flex-start;
9155}
9156.card-header[valign="bottom"],
9157.card-footer[valign="bottom"] {
9158 align-items: flex-end;
9159}
9160.card-header a.link,
9161.card-footer a.link {
9162 position: relative;
9163}
9164.card-header a.link i.icon,
9165.card-footer a.link i.icon {
9166 display: block;
9167}
9168.card-header a.icon-only,
9169.card-footer a.icon-only {
9170 display: flex;
9171 justify-content: center;
9172 align-items: center;
9173 margin: 0;
9174}
9175.card-header {
9176 border-radius: var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0;
9177}
9178.card-header:after {
9179 content: '';
9180 position: absolute;
9181 background-color: var(--f7-card-header-border-color);
9182 display: block;
9183 z-index: 15;
9184 top: auto;
9185 right: auto;
9186 bottom: 0;
9187 left: 0;
9188 height: 1px;
9189 width: 100%;
9190 transform-origin: 50% 100%;
9191 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
9192}
9193.card-header.no-hairline:after {
9194 display: none !important;
9195}
9196.card-footer {
9197 border-radius: 0 0 var(--f7-card-border-radius) var(--f7-card-border-radius);
9198}
9199.card-footer:before {
9200 content: '';
9201 position: absolute;
9202 background-color: var(--f7-card-footer-border-color);
9203 display: block;
9204 z-index: 15;
9205 top: 0;
9206 right: auto;
9207 bottom: auto;
9208 left: 0;
9209 height: 1px;
9210 width: 100%;
9211 transform-origin: 50% 0%;
9212 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
9213}
9214.card-footer.no-hairline:before {
9215 display: none !important;
9216}
9217.card-expandable {
9218 overflow: hidden;
9219 height: 300px;
9220 background: var(--f7-card-expandable-bg-color);
9221 position: relative;
9222 transform-origin: center center;
9223 transition-property: transform, border-radius;
9224 border-radius: var(--f7-card-expandable-border-radius);
9225 z-index: 2;
9226 transition-duration: 200ms;
9227 margin-left: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));
9228 margin-right: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));
9229 margin-top: var(--f7-card-expandable-margin-vertical);
9230 margin-bottom: var(--f7-card-expandable-margin-vertical);
9231 box-shadow: var(--f7-card-expandable-box-shadow);
9232 font-size: var(--f7-card-expandable-font-size);
9233}
9234.card-expandable.card-no-transition {
9235 transition-duration: 0ms;
9236}
9237.card-expandable.card-expandable-animate-width .card-content {
9238 transition-property: width, transform;
9239 width: 100%;
9240}
9241.card-expandable.active-state {
9242 transform: scale(0.97);
9243}
9244.card-expandable .card-opened-fade-in,
9245.card-expandable .card-opened-fade-out {
9246 transition-duration: 400ms;
9247}
9248.card-expandable .card-opened-fade-in {
9249 opacity: 0;
9250 pointer-events: none;
9251}
9252.card-expandable .card-content {
9253 position: absolute;
9254 top: 0;
9255 width: 100vw;
9256 height: 100vh;
9257 transform-origin: center top;
9258 overflow: hidden;
9259 transition-property: transform;
9260 box-sizing: border-box;
9261 pointer-events: none;
9262 right: 0;
9263}
9264.card-expandable .card-content .card-content-padding {
9265 padding-left: calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));
9266 padding-right: calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal));
9267}
9268.card-expandable.card-opened {
9269 transition-duration: 0ms;
9270}
9271.card-expandable.card-opening,
9272.card-expandable.card-closing,
9273.card-expandable.card-transitioning {
9274 transition-duration: 400ms;
9275}
9276.card-expandable.card-opening .card-content {
9277 transition-duration: 300ms;
9278}
9279.card-expandable.card-closing .card-content {
9280 transition-duration: 500ms;
9281}
9282.card-expandable.card-opening,
9283.card-expandable.card-opened,
9284.card-expandable.card-closing {
9285 z-index: 100;
9286}
9287.card-expandable.card-opening,
9288.card-expandable.card-opened {
9289 border-radius: 0;
9290}
9291.card-expandable.card-opening .card-opened-fade-in,
9292.card-expandable.card-opened .card-opened-fade-in {
9293 opacity: 1;
9294 pointer-events: auto;
9295}
9296.card-expandable.card-opening .card-opened-fade-out,
9297.card-expandable.card-opened .card-opened-fade-out {
9298 opacity: 0;
9299 pointer-events: none;
9300}
9301.card-expandable.card-opened .card-content {
9302 overflow: auto;
9303 -webkit-overflow-scrolling: touch;
9304 pointer-events: auto;
9305}
9306.card-expandable .card-header {
9307 font-size: var(--f7-card-expandable-header-font-size);
9308 font-weight: var(--f7-card-expandable-header-font-weight);
9309}
9310.card-expandable .card-header:after {
9311 display: none !important;
9312}
9313.card-prevent-open {
9314 pointer-events: auto;
9315}
9316.card-expandable-size {
9317 width: 0;
9318 height: 0;
9319 position: absolute;
9320 left: 0;
9321 top: 0;
9322 opacity: 0;
9323 pointer-events: none;
9324 visibility: hidden;
9325}
9326@media (min-width: 768px) and (min-height: 670px) {
9327 .card-expandable:not(.card-tablet-fullscreen) {
9328 max-width: var(--f7-card-expandable-tablet-width);
9329 }
9330 .card-expandable:not(.card-tablet-fullscreen).card-opened,
9331 .card-expandable:not(.card-tablet-fullscreen).card-opening {
9332 border-radius: var(--f7-card-expandable-tablet-border-radius);
9333 }
9334 .card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content {
9335 width: var(--f7-card-expandable-tablet-width);
9336 }
9337 .card-expandable:not(.card-tablet-fullscreen) .card-expandable-size {
9338 width: var(--f7-card-expandable-tablet-width);
9339 height: var(--f7-card-expandable-tablet-height);
9340 }
9341}
9342.page.page-with-card-opened .page-content {
9343 overflow: hidden;
9344}
9345.card-backdrop {
9346 position: fixed;
9347 left: 0;
9348 top: 0;
9349 width: 100%;
9350 height: 100%;
9351 z-index: 99;
9352 pointer-events: none;
9353 background: rgba(0, 0, 0, 0.2);
9354 opacity: 0;
9355}
9356.card-backdrop-in {
9357 animation: card-backdrop-fade-in 400ms forwards;
9358 pointer-events: auto;
9359}
9360.card-backdrop-out {
9361 animation: card-backdrop-fade-out 400ms forwards;
9362}
9363@supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
9364 .card-backdrop {
9365 background: transparent;
9366 opacity: 1;
9367 }
9368 .card-backdrop-in {
9369 animation: card-backdrop-blur-in 400ms forwards;
9370 }
9371 .card-backdrop-out {
9372 animation: card-backdrop-blur-out 400ms forwards;
9373 }
9374}
9375@keyframes card-backdrop-fade-in {
9376 from {
9377 opacity: 0;
9378 }
9379 to {
9380 opacity: 1;
9381 }
9382}
9383@keyframes card-backdrop-fade-out {
9384 from {
9385 opacity: 1;
9386 }
9387 to {
9388 opacity: 0;
9389 }
9390}
9391@keyframes card-backdrop-blur-in {
9392 from {
9393 -webkit-backdrop-filter: blur(0px);
9394 backdrop-filter: blur(0px);
9395 }
9396 to {
9397 -webkit-backdrop-filter: blur(15px);
9398 backdrop-filter: blur(15px);
9399 }
9400}
9401@keyframes card-backdrop-blur-out {
9402 from {
9403 -webkit-backdrop-filter: blur(15px);
9404 backdrop-filter: blur(15px);
9405 }
9406 to {
9407 -webkit-backdrop-filter: blur(0px);
9408 backdrop-filter: blur(0px);
9409 }
9410}
9411/* === Chips === */
9412:root {
9413 --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
9414 --f7-chip-font-size: 13px;
9415 --f7-chip-font-weight: normal;
9416 --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12);
9417 --f7-chip-media-font-size: 16px;
9418 --f7-chip-delete-button-color: #000;
9419}
9420:root .theme-dark,
9421:root.theme-dark {
9422 --f7-chip-delete-button-color: #fff;
9423 --f7-chip-bg-color: #333;
9424 --f7-chip-outline-border-color: #333;
9425}
9426.ios {
9427 --f7-chip-text-color: #000;
9428 --f7-chip-height: 24px;
9429 --f7-chip-padding-horizontal: 10px;
9430}
9431.ios .theme-dark,
9432.ios.theme-dark {
9433 --f7-chip-text-color: #fff;
9434}
9435.md {
9436 --f7-chip-text-color: rgba(0, 0, 0, 0.87);
9437 --f7-chip-height: 32px;
9438 --f7-chip-padding-horizontal: 12px;
9439}
9440.md .theme-dark,
9441.md.theme-dark {
9442 --f7-chip-text-color: rgba(255, 255, 255, 0.87);
9443}
5d51ea26
DC
9444.aurora {
9445 --f7-chip-text-color: #000;
9446 --f7-chip-height: 20px;
9447 --f7-chip-padding-horizontal: 10px;
9448 --f7-chip-font-size: 12px;
9449 --f7-chip-media-font-size: 14px;
9450}
9451.aurora .theme-dark,
9452.aurora.theme-dark {
9453 --f7-chip-text-color: #fff;
9454}
5309fbda
DC
9455.chip {
9456 padding-left: var(--f7-chip-padding-horizontal);
9457 padding-right: var(--f7-chip-padding-horizontal);
9458 font-weight: var(--f7-chip-font-weight);
9459 display: inline-flex;
9460 box-sizing: border-box;
9461 vertical-align: middle;
9462 align-items: center;
9463 margin: 2px 0;
9464 background-color: var(--f7-chip-bg-color);
9465 font-size: var(--f7-chip-font-size);
9466 color: var(--f7-chip-text-color);
9467 height: var(--f7-chip-height);
9468 line-height: var(--f7-chip-height);
9469 border-radius: var(--f7-chip-height);
9470 position: relative;
9471}
9472.chip-media {
9473 border-radius: 50%;
9474 flex-shrink: 0;
9475 display: flex;
9476 align-items: center;
9477 justify-content: center;
9478 height: var(--f7-chip-height);
9479 width: var(--f7-chip-height);
9480 border-radius: var(--f7-chip-height);
9481 text-align: center;
9482 line-height: var(--f7-chip-height);
9483 box-sizing: border-box;
9484 color: #fff;
9485 font-size: var(--f7-chip-media-font-size);
9486 vertical-align: middle;
9487 margin-right: calc(-1 * var(--f7-chip-padding-horizontal));
9488}
9489.chip-media i.icon {
9490 font-size: calc(var(--f7-chip-height) - 8px);
9491 height: calc(var(--f7-chip-height) - 8px);
9492}
9493.chip-media img {
9494 max-width: 100%;
9495 max-height: 100%;
9496 width: auto;
9497 height: auto;
9498 border-radius: 50%;
9499 display: block;
9500}
9501.chip-media + .chip-label {
9502 margin-right: 4px;
9503}
9504.chip-label {
9505 white-space: nowrap;
9506 overflow: hidden;
9507 text-overflow: ellipsis;
9508 position: relative;
9509 flex-shrink: 1;
9510 min-width: 0;
9511}
9512.chip-delete {
9513 text-align: center;
9514 cursor: pointer;
9515 flex-shrink: 0;
9516 background-repeat: no-repeat;
9517 width: 24px;
9518 height: 24px;
9519 color: var(--f7-chip-delete-button-color);
9520 opacity: 0.54;
9521 position: relative;
9522}
9523.chip-delete:after {
9524 font-family: 'framework7-core-icons';
9525 font-weight: normal;
9526 font-style: normal;
9527 line-height: 1;
9528 letter-spacing: normal;
9529 text-transform: none;
9530 white-space: nowrap;
9531 word-wrap: normal;
9532 direction: ltr;
9533 -webkit-font-smoothing: antialiased;
9534 text-rendering: optimizeLegibility;
9535 -moz-osx-font-smoothing: grayscale;
9536 -moz-font-feature-settings: "liga";
9537 font-feature-settings: "liga";
9538 text-align: center;
9539 display: block;
9540 width: 100%;
9541 height: 100%;
9542 font-size: 20px;
9543 content: 'delete_round_ios';
9544 line-height: 24px;
9545}
9546.chip .chip-delete.active-state {
9547 opacity: 1;
9548}
9549.chip-outline,
9550.ios .chip-outline-ios,
5d51ea26
DC
9551.md .chip-outline-md,
9552.aurora .chip-outline-aurora {
5309fbda
DC
9553 border: 1px solid var(--f7-chip-outline-border-color);
9554 background: none;
9555}
9556.chip[class*="color-"] {
9557 --f7-chip-bg-color: var(--f7-theme-color);
9558 --f7-chip-text-color: #fff;
9559}
9560.chip-outline[class*="color-"],
9561.ios .chip-outline-ios[class*="color-"],
5d51ea26
DC
9562.md .chip-outline-md[class*="color-"],
9563.aurora .chip-outline-aurora[class*="color-"] {
5309fbda
DC
9564 --f7-chip-outline-border-color: var(--f7-theme-color);
9565 --f7-chip-text-color: var(--f7-theme-color);
9566}
9567.ios .chip-delete {
9568 margin-left: calc(-1 * var(--f7-chip-padding-horizontal));
9569}
9570.ios .chip-delete:after {
9571 font-size: 10px;
9572}
9573.md .chip-label + .chip-delete {
9574 margin-right: 4px;
9575}
9576.md .chip-delete {
9577 margin-left: calc(-1 * var(--f7-chip-padding-horizontal) + 4px);
9578}
9579.md .chip-delete:after {
9580 font-size: 12px;
9581}
5d51ea26
DC
9582.aurora .chip-delete {
9583 margin-left: calc(-1 * var(--f7-chip-padding-horizontal));
9584}
9585.aurora .chip-delete:after {
9586 font-size: 10px;
9587}
5309fbda
DC
9588/* === Form === */
9589/* === Input === */
9590:root {
5d51ea26 9591 --f7-input-bg-color: transparent;
5309fbda
DC
9592 --f7-label-font-weight: 400;
9593 --f7-label-line-height: 1.2;
5d51ea26
DC
9594 --f7-input-padding-left: 0px;
9595 --f7-input-padding-right: 0px;
5309fbda
DC
9596 --f7-input-error-text-color: #ff3b30;
9597 --f7-input-error-font-size: 12px;
9598 --f7-input-error-line-height: 1.4;
9599 --f7-input-error-font-weight: 400;
9600 --f7-input-info-font-size: 12px;
9601 --f7-input-info-line-height: 1.4;
5d51ea26
DC
9602 --f7-input-outline-height: 40px;
9603 --f7-input-outline-border-color: #999;
9604 --f7-input-outline-border-radius: 4px;
9605 --f7-input-outline-padding-horizontal: 12px;
9606 --f7-textarea-height: 100px;
9607 /*
9608 --f7-input-outline-focused-border-color: var(--f7-theme-color);
9609 --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
9610 */
9611}
9612:root .theme-dark,
9613:root.theme-dark {
9614 --f7-input-outline-border-color: #444;
5309fbda
DC
9615}
9616.ios {
9617 --f7-input-height: 44px;
9618 --f7-input-text-color: #000000;
9619 --f7-input-font-size: 17px;
9620 --f7-input-placeholder-color: #a9a9a9;
5d51ea26 9621 --f7-textarea-padding-vertical: 11px;
5309fbda
DC
9622 /*
9623 --f7-input-focused-border-color: var(--f7-list-item-border-color);
9624 --f7-input-invalid-border-color: var(--f7-list-item-border-color);
9625 --f7-input-invalid-text-color: var(--f7-input-error-text-color);
9626 */
5d51ea26 9627 --f7-label-font-size: 12px;
5309fbda
DC
9628 --f7-label-text-color: inherit;
9629 /*
9630 --f7-label-focused-text-color: var(--f7-label-text-color);
9631 --f7-label-invalid-text-color: var(--f7-label-text-color);
9632 */
9633 --f7-floating-label-scale: calc(17 / 12);
9634 --f7-inline-label-font-size: 17px;
9635 --f7-inline-label-line-height: 1.4;
5d51ea26 9636 --f7-inline-label-padding-top: 3px;
5309fbda
DC
9637 --f7-input-info-text-color: #8e8e93;
9638 --f7-input-clear-button-size: 14px;
9639 --f7-input-clear-button-color: #8e8e93;
9640}
9641.ios .theme-dark,
9642.ios.theme-dark {
9643 --f7-input-text-color: #fff;
9644}
9645.md {
9646 --f7-input-height: 36px;
9647 --f7-input-text-color: #212121;
9648 --f7-input-font-size: 16px;
9649 --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
5d51ea26 9650 --f7-textarea-padding-vertical: 7px;
5309fbda
DC
9651 /*
9652 --f7-input-focused-border-color: var(--f7-theme-color);
9653 --f7-input-invalid-border-color: var(--f7-input-error-text-color);
9654 --f7-input-invalid-text-color: var(--f7-input-text-color);
9655 */
5d51ea26 9656 --f7-label-font-size: 12px;
5309fbda
DC
9657 --f7-label-text-color: rgba(0, 0, 0, 0.65);
9658 /*
9659 --f7-label-focused-text-color: var(--f7-theme-color);
9660 --f7-label-invalid-text-color: var(--f7-input-error-text-color );
9661 */
9662 --f7-floating-label-scale: calc(16 / 12);
9663 --f7-inline-label-font-size: 16px;
9664 --f7-inline-label-line-height: 1.5;
5d51ea26 9665 --f7-inline-label-padding-top: 7px;
5309fbda 9666 --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
5d51ea26 9667 --f7-input-clear-button-size: 18px;
5309fbda
DC
9668 --f7-input-clear-button-color: #aaa;
9669}
9670.md .theme-dark,
9671.md.theme-dark {
9672 --f7-input-text-color: rgba(255, 255, 255, 0.87);
9673 --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
9674 --f7-label-text-color: rgba(255, 255, 255, 0.54);
9675 --f7-input-info-text-color: rgba(255, 255, 255, 0.35);
9676}
5d51ea26
DC
9677.aurora {
9678 --f7-input-height: 24px;
9679 --f7-input-text-color: #000000;
9680 --f7-input-font-size: 13px;
9681 --f7-input-placeholder-color: rgba(0, 0, 0, 0.32);
9682 --f7-textarea-padding-vertical: 2px;
9683 /*
9684 --f7-input-focused-border-color: var(--f7-list-item-border-color);
9685 --f7-input-invalid-border-color: var(--f7-list-item-border-color);
9686 --f7-input-invalid-text-color: var(--f7-input-error-text-color);
9687 */
9688 --f7-label-font-size: 11px;
9689 --f7-label-text-color: inherit;
9690 /*
9691 --f7-label-focused-text-color: var(--f7-label-text-color);
9692 --f7-label-invalid-text-color: var(--f7-label-text-color);
9693 */
9694 --f7-floating-label-scale: calc(13 / 11);
9695 --f7-inline-label-font-size: 14px;
9696 --f7-inline-label-line-height: 1.4;
9697 --f7-inline-label-padding-top: 1px;
9698 --f7-input-info-text-color: rgba(0, 0, 0, 0.5);
9699 --f7-input-clear-button-size: 14px;
9700 --f7-input-clear-button-color: #666;
9701 --f7-input-outline-height: 32px;
9702 --f7-input-outline-padding-horizontal: 8px;
9703}
9704.aurora .theme-dark,
9705.aurora.theme-dark {
9706 --f7-input-text-color: #fff;
9707 --f7-input-clear-button-color: #aaa;
9708 --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
9709}
9710input[type="text"],
9711input[type="password"],
9712input[type="search"],
9713input[type="email"],
9714input[type="tel"],
9715input[type="url"],
9716input[type="date"],
9717input[type="datetime-local"],
9718input[type="time"],
9719input[type="number"],
9720select,
9721textarea {
9722 box-sizing: border-box;
9723 -webkit-appearance: none;
9724 -moz-appearance: none;
9725 appearance: none;
5309fbda
DC
9726 border: none;
9727 box-shadow: none;
9728 border-radius: 0;
9729 outline: 0;
9730 display: block;
9731 padding: 0;
9732 margin: 0;
9733 font-family: inherit;
9734 background: none;
9735 resize: none;
9736 font-size: inherit;
9737 color: inherit;
9738}
9739.textarea-resizable-shadow {
9740 opacity: 0;
9741 position: absolute;
9742 z-index: -1000;
9743 pointer-events: none;
9744 left: -1000px;
9745 top: -1000px;
9746 visibility: hidden;
9747}
9748.list input[type="text"],
9749.list input[type="password"],
9750.list input[type="search"],
9751.list input[type="email"],
9752.list input[type="tel"],
9753.list input[type="url"],
9754.list input[type="date"],
9755.list input[type="datetime-local"],
9756.list input[type="time"],
9757.list input[type="number"],
9758.list select {
9759 width: 100%;
9760 height: var(--f7-input-height);
9761 color: var(--f7-input-text-color);
9762 font-size: var(--f7-input-font-size);
5d51ea26
DC
9763 background-color: var(--f7-input-bg-color, transparent);
9764 padding-left: var(--f7-input-padding-left);
9765 padding-right: var(--f7-input-padding-right);
5309fbda
DC
9766}
9767.list input[type="text"]::-webkit-input-placeholder,
9768.list input[type="password"]::-webkit-input-placeholder,
9769.list input[type="search"]::-webkit-input-placeholder,
9770.list input[type="email"]::-webkit-input-placeholder,
9771.list input[type="tel"]::-webkit-input-placeholder,
9772.list input[type="url"]::-webkit-input-placeholder,
9773.list input[type="date"]::-webkit-input-placeholder,
9774.list input[type="datetime-local"]::-webkit-input-placeholder,
9775.list input[type="time"]::-webkit-input-placeholder,
9776.list input[type="number"]::-webkit-input-placeholder,
9777.list select::-webkit-input-placeholder {
9778 color: var(--f7-input-placeholder-color);
9779}
9780.list input[type="text"]::-moz-placeholder,
9781.list input[type="password"]::-moz-placeholder,
9782.list input[type="search"]::-moz-placeholder,
9783.list input[type="email"]::-moz-placeholder,
9784.list input[type="tel"]::-moz-placeholder,
9785.list input[type="url"]::-moz-placeholder,
9786.list input[type="date"]::-moz-placeholder,
9787.list input[type="datetime-local"]::-moz-placeholder,
9788.list input[type="time"]::-moz-placeholder,
9789.list input[type="number"]::-moz-placeholder,
9790.list select::-moz-placeholder {
9791 color: var(--f7-input-placeholder-color);
9792}
9793.list input[type="text"]::-ms-input-placeholder,
9794.list input[type="password"]::-ms-input-placeholder,
9795.list input[type="search"]::-ms-input-placeholder,
9796.list input[type="email"]::-ms-input-placeholder,
9797.list input[type="tel"]::-ms-input-placeholder,
9798.list input[type="url"]::-ms-input-placeholder,
9799.list input[type="date"]::-ms-input-placeholder,
9800.list input[type="datetime-local"]::-ms-input-placeholder,
9801.list input[type="time"]::-ms-input-placeholder,
9802.list input[type="number"]::-ms-input-placeholder,
9803.list select::-ms-input-placeholder {
9804 color: var(--f7-input-placeholder-color);
9805}
9806.list input[type="text"]::placeholder,
9807.list input[type="password"]::placeholder,
9808.list input[type="search"]::placeholder,
9809.list input[type="email"]::placeholder,
9810.list input[type="tel"]::placeholder,
9811.list input[type="url"]::placeholder,
9812.list input[type="date"]::placeholder,
9813.list input[type="datetime-local"]::placeholder,
9814.list input[type="time"]::placeholder,
9815.list input[type="number"]::placeholder,
9816.list select::placeholder {
9817 color: var(--f7-input-placeholder-color);
9818}
9819.list textarea {
9820 width: 100%;
9821 color: var(--f7-input-text-color);
9822 font-size: var(--f7-input-font-size);
9823 resize: none;
9824 line-height: 1.4;
5d51ea26
DC
9825 height: var(--f7-textarea-height);
9826 background-color: var(--f7-input-bg-color, transparent);
9827 padding-top: var(--f7-textarea-padding-vertical);
9828 padding-bottom: var(--f7-textarea-padding-vertical);
9829 padding-left: var(--f7-input-padding-left);
9830 padding-right: var(--f7-input-padding-right);
5309fbda
DC
9831}
9832.list textarea::-webkit-input-placeholder {
9833 color: var(--f7-input-placeholder-color);
9834}
9835.list textarea::-moz-placeholder {
9836 color: var(--f7-input-placeholder-color);
9837}
9838.list textarea::-ms-input-placeholder {
9839 color: var(--f7-input-placeholder-color);
9840}
9841.list textarea::placeholder {
9842 color: var(--f7-input-placeholder-color);
9843}
9844.list textarea.resizable {
9845 height: var(--f7-input-height);
9846}
9847.list input[type="datetime-local"] {
9848 max-width: 50vw;
9849}
5d51ea26 9850.list input[type="time"],
5309fbda
DC
9851.list input[type="date"],
9852.list input[type="datetime-local"] {
9853 line-height: var(--f7-input-height);
9854}
9855.list input[type="date"],
9856.list input[type="datetime-local"] {
9857 text-align: right;
9858 flex-direction: row-reverse;
9859 width: auto;
9860}
9861.list .item-label,
9862.list .item-floating-label {
9863 width: 100%;
9864 vertical-align: top;
9865 flex-shrink: 0;
9866 font-size: var(--f7-label-font-size);
9867 font-weight: var(--f7-label-font-weight);
9868 line-height: var(--f7-label-line-height);
9869 color: var(--f7-label-text-color);
9870 transition-duration: 200ms;
9871 transition-property: transform, color;
9872}
9873.list .item-floating-label {
5d51ea26
DC
9874 --label-height: calc(var(--f7-label-font-size) * var(--f7-label-line-height));
9875 transform: scale(var(--f7-floating-label-scale)) translateY(calc((var(--f7-input-height) / 2 + 50%) / var(--f7-floating-label-scale)));
5309fbda
DC
9876 color: var(--f7-input-placeholder-color);
9877 width: auto;
9878 max-width: calc(100% / var(--f7-floating-label-scale));
9879 pointer-events: none;
5d51ea26
DC
9880 right: var(--f7-input-padding-right);
9881 transform-origin: right center;
5309fbda
DC
9882}
9883.list .item-floating-label ~ .item-input-wrap input::-webkit-input-placeholder,
9884.list .item-floating-label ~ .item-input-wrap textarea::-webkit-input-placeholder {
9885 opacity: 0;
9886 transition-duration: 100ms;
9887}
9888.list .item-floating-label ~ .item-input-wrap input::-moz-placeholder,
9889.list .item-floating-label ~ .item-input-wrap textarea::-moz-placeholder {
9890 opacity: 0;
9891 transition-duration: 100ms;
9892}
9893.list .item-floating-label ~ .item-input-wrap input::-ms-input-placeholder,
9894.list .item-floating-label ~ .item-input-wrap textarea::-ms-input-placeholder {
9895 opacity: 0;
9896 transition-duration: 100ms;
9897}
9898.list .item-floating-label ~ .item-input-wrap input::placeholder,
9899.list .item-floating-label ~ .item-input-wrap textarea::placeholder {
9900 opacity: 0;
9901 transition-duration: 100ms;
9902}
9903.list .item-floating-label ~ .item-input-wrap input.input-focused::-webkit-input-placeholder,
9904.list .item-floating-label ~ .item-input-wrap textarea.input-focused::-webkit-input-placeholder {
9905 opacity: 1;
9906 transition-duration: 300ms;
9907}
9908.list .item-floating-label ~ .item-input-wrap input.input-focused::-moz-placeholder,
9909.list .item-floating-label ~ .item-input-wrap textarea.input-focused::-moz-placeholder {
9910 opacity: 1;
9911 transition-duration: 300ms;
9912}
9913.list .item-floating-label ~ .item-input-wrap input.input-focused::-ms-input-placeholder,
9914.list .item-floating-label ~ .item-input-wrap textarea.input-focused::-ms-input-placeholder {
9915 opacity: 1;
9916 transition-duration: 300ms;
9917}
9918.list .item-floating-label ~ .item-input-wrap input.input-focused::placeholder,
9919.list .item-floating-label ~ .item-input-wrap textarea.input-focused::placeholder {
9920 opacity: 1;
9921 transition-duration: 300ms;
9922}
9923.list .item-input-with-value .item-floating-label {
9924 color: var(--f7-label-text-color);
9925}
9926.list .item-input-with-value .item-floating-label,
9927.list .item-input-focused .item-floating-label {
9928 transform: scale(1) translateY(0);
9929}
9930.list .item-input-wrap {
9931 width: 100%;
9932 flex-shrink: 1;
9933 position: relative;
9934}
9935.item-input .item-inner {
5d51ea26
DC
9936 display: flex;
9937 flex-direction: column;
9938 align-items: flex-start;
5309fbda
DC
9939}
9940.item-input-error-message,
9941.input-error-message {
9942 font-size: var(--f7-input-error-font-size);
9943 line-height: var(--f7-input-error-line-height);
9944 color: var(--f7-input-error-text-color);
9945 font-weight: var(--f7-input-error-font-weight);
9946 display: none;
5d51ea26 9947 box-sizing: border-box;
5309fbda
DC
9948}
9949.item-input-info,
9950.input-info {
9951 font-size: var(--f7-input-info-font-size);
9952 line-height: var(--f7-input-info-line-height);
9953 color: var(--f7-input-info-text-color);
9954}
9955.item-input-invalid .item-input-error-message,
9956.input-invalid .item-input-error-message,
9957.item-input-invalid .input-error-message,
9958.input-invalid .input-error-message {
9959 display: block;
9960}
9961.item-input-invalid .item-input-info,
9962.input-invalid .item-input-info,
9963.item-input-invalid .input-info,
9964.input-invalid .input-info {
9965 display: none;
9966}
9967.inline-labels .item-inner,
9968.inline-label .item-inner {
9969 display: flex;
5d51ea26
DC
9970 align-items: center;
9971 flex-direction: row;
5309fbda
DC
9972}
9973.inline-labels .item-label,
9974.inline-label .item-label,
9975.inline-labels .item-floating-label,
9976.inline-label .item-floating-label {
5d51ea26 9977 padding-top: var(--f7-inline-label-padding-top);
5309fbda
DC
9978 align-self: flex-start;
9979 width: 35%;
9980 font-size: var(--f7-inline-label-font-size);
9981 line-height: var(--f7-inline-label-line-height);
9982}
9983.inline-labels .item-label + .item-input-wrap,
9984.inline-label .item-label + .item-input-wrap,
9985.inline-labels .item-floating-label + .item-input-wrap,
9986.inline-label .item-floating-label + .item-input-wrap {
9987 margin-right: 8px;
9988}
9989.input {
9990 position: relative;
9991}
9992.input input,
9993.input select,
9994.input textarea {
9995 width: 100%;
9996}
9997.input-clear-button {
9998 opacity: 0;
9999 pointer-events: none;
10000 visibility: hidden;
10001 transition-duration: 100ms;
10002 position: absolute;
10003 top: 50%;
10004 border: none;
10005 padding: 0;
10006 margin: 0;
10007 outline: 0;
10008 z-index: 1;
10009 cursor: pointer;
10010 background: none;
10011 width: var(--f7-input-clear-button-size);
10012 height: var(--f7-input-clear-button-size);
10013 margin-top: calc(-1 * var(--f7-input-clear-button-size) / 2);
10014 color: var(--f7-input-clear-button-color);
10015 left: 0;
10016}
10017.input-clear-button:after {
10018 font-family: 'framework7-core-icons';
10019 font-weight: normal;
10020 font-style: normal;
10021 line-height: 1;
10022 letter-spacing: normal;
10023 text-transform: none;
10024 white-space: nowrap;
10025 word-wrap: normal;
10026 direction: ltr;
10027 -webkit-font-smoothing: antialiased;
10028 text-rendering: optimizeLegibility;
10029 -moz-osx-font-smoothing: grayscale;
10030 -moz-font-feature-settings: "liga";
10031 font-feature-settings: "liga";
10032 text-align: center;
10033 display: block;
10034 width: 100%;
10035 height: 100%;
10036 font-size: 20px;
10037}
10038.input-clear-button:before {
10039 position: absolute;
10040 content: '';
10041 left: 50%;
10042 top: 50%;
10043}
10044.item-input-wrap .input-clear-button {
10045 top: calc(var(--f7-input-height) / 2);
10046}
5d51ea26
DC
10047.input-clear-button.active-state {
10048 opacity: 0.75 !important;
10049}
5309fbda
DC
10050.input-with-value ~ .input-clear-button,
10051.item-input-with-value .input-clear-button,
10052.input-with-value .input-clear-button {
10053 opacity: 1;
10054 pointer-events: auto;
10055 visibility: visible;
10056}
10057.input-dropdown-wrap,
10058.input-dropdown {
10059 position: relative;
10060}
10061.input-dropdown-wrap:before,
10062.input-dropdown:before {
10063 content: '';
10064 pointer-events: none;
10065 position: absolute;
10066 top: 50%;
10067 margin-top: -2px;
10068 width: 0;
10069 height: 0;
10070 border-left: 4px solid transparent;
10071 border-right: 4px solid transparent;
10072 border-top: 5px solid #727272;
10073 left: 6px;
10074}
10075.input-dropdown-wrap select,
10076.input-dropdown select,
10077.input-dropdown-wrap input,
10078.input-dropdown input,
10079.input-dropdown-wrap textarea,
10080.input-dropdown textarea {
5d51ea26
DC
10081 padding-left: calc(20px + var(--f7-input-padding-left));
10082}
10083.input-outline:after,
10084.item-input-outline .item-input-wrap:after {
10085 content: '';
10086 position: absolute;
10087 left: 0;
10088 top: 0;
10089 width: 100%;
10090 height: 100%;
10091 box-sizing: border-box;
10092 border: 1px solid var(--f7-input-outline-border-color);
10093 border-radius: var(--f7-input-outline-border-radius);
10094 transition-duration: 200ms;
10095 pointer-events: none;
10096}
10097.input-outline.input-focused:after,
10098.item-input-outline.item-input-focused .item-input-wrap:after {
10099 border-width: 2px;
10100 border-color: var(--f7-input-outline-focused-border-color, var(--f7-theme-color));
10101}
10102.input-outline.input-invalid:after,
10103.item-input-outline.item-input-invalid .item-input-wrap:after {
10104 border-width: 2px;
10105 border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-color));
10106}
10107.input-outline input,
10108.item-input-outline input,
10109.list .item-input-outline input,
10110.input-outline textarea,
10111.item-input-outline textarea,
10112.list .item-input-outline textarea,
10113.input-outline select,
10114.item-input-outline select,
10115.list .item-input-outline select {
10116 border-radius: var(--f7-input-outline-border-radius);
10117 padding-left: var(--f7-input-outline-padding-horizontal);
10118 padding-right: var(--f7-input-outline-padding-horizontal);
10119}
10120.input-outline.input-dropdown:before,
10121.item-input-outline .input-dropdown-wrap:before {
10122 left: 8px;
10123}
10124.input-outline.input-dropdown input,
10125.item-input-outline .input-dropdown-wrap input,
10126.input-outline.input-dropdown textarea,
10127.item-input-outline .input-dropdown-wrap textarea,
10128.input-outline.input-dropdown select,
10129.item-input-outline .input-dropdown-wrap select {
10130 padding-left: 20px;
10131}
10132.input-outline .input-clear-button,
10133.item-input-outline .input-clear-button {
10134 left: 8px;
10135}
10136.item-input-outline {
10137 --f7-input-height: var(--f7-input-outline-height);
10138}
10139.item-input-outline .item-inner:after {
10140 display: none !important;
10141}
10142.item-input-outline .item-label {
10143 right: var(--f7-input-outline-padding-horizontal);
5309fbda 10144}
5d51ea26
DC
10145.inline-labels .item-input-outline .item-label,
10146.inline-label .item-input-outline .item-label,
10147.item-input-outline .inline-label .item-label,
10148.item-input-outline .inline-label.item-label {
10149 right: 0;
10150}
10151.item-input-outline .item-floating-label {
10152 right: calc(var(--f7-input-outline-padding-horizontal) - 4px);
10153 padding-left: 4px;
10154 padding-right: 4px;
10155 background: var(--f7-page-bg-color);
10156 z-index: 10;
10157 margin-top: calc(-0.5 * (var(--f7-label-font-size) * var(--f7-label-line-height)));
10158}
10159.item-input-outline.item-input-with-value .item-floating-label,
10160.item-input-outline.item-input-focused .item-floating-label {
10161 transform: scale(1) translateY(50%);
10162}
10163.item-input-outline .item-input-info,
10164.item-input-outline .item-input-error-message {
10165 padding-right: var(--f7-input-outline-padding-horizontal);
10166}
10167.block-strong .item-input-outline .item-floating-label {
10168 background: var(--f7-block-strong-bg-color);
10169}
10170.list .item-input-outline .item-floating-label {
10171 background: var(--f7-list-bg-color);
5309fbda
DC
10172}
10173.ios .item-label + .item-input-wrap,
10174.ios .item-floating-label + .item-input-wrap {
10175 margin-top: 0;
10176}
10177.ios .item-input-focused .item-floating-label {
10178 color: var(--f7-label-text-color);
10179}
10180.ios .item-input .item-media {
10181 align-self: flex-start;
10182}
10183.ios .item-input-wrap {
10184 margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
10185 margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
10186}
5309fbda
DC
10187.ios .inline-labels .item-label + .item-input-wrap,
10188.ios .inline-label .item-label + .item-input-wrap,
10189.ios .inline-labels .item-floating-label + .item-input-wrap,
10190.ios .inline-label .item-floating-label + .item-input-wrap {
10191 margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
10192}
10193.ios .inline-labels .item-input-wrap,
10194.ios .inline-label .item-input-wrap {
10195 margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
10196}
10197.ios .item-input-error-message,
10198.ios .item-input-info,
10199.ios .input-error-message,
10200.ios .input-info {
10201 position: relative;
10202 margin-bottom: 6px;
10203 margin-top: -8px;
10204}
10205.ios .item-input-focused .item-label,
10206.ios .item-input-focused .item-floating-label {
10207 color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
10208}
10209.ios .item-input-focused .item-inner:after {
10210 background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
10211}
10212.ios .item-input-invalid .item-label,
10213.ios .item-input-invalid .item-floating-label {
10214 color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
10215}
10216.ios .item-input-invalid .item-inner:after {
10217 background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
10218}
10219.ios .item-input-invalid input,
10220.ios .input-invalid input,
10221.ios .item-input-invalid select,
10222.ios .input-invalid select,
10223.ios .item-input-invalid textarea,
10224.ios .input-invalid textarea {
10225 color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
10226}
10227.ios .input-clear-button:after {
10228 content: 'delete_round_ios';
10229 font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
10230 line-height: 1.4;
10231}
10232.ios .input-clear-button:before {
10233 width: 44px;
10234 height: 44px;
10235 margin-left: -22px;
10236 margin-top: -22px;
10237}
5d51ea26
DC
10238.ios .item-input-outline .item-input-wrap,
10239.ios .input-outline .item-input-wrap {
10240 margin-top: 0;
10241 margin-bottom: 0;
10242}
10243.ios .item-input-outline .item-input-error-message,
10244.ios .input-outline .item-input-error-message,
10245.ios .item-input-outline .item-input-info,
10246.ios .input-outline .item-input-info,
10247.ios .item-input-outline .input-error-message,
10248.ios .input-outline .input-error-message,
10249.ios .item-input-outline .input-info,
10250.ios .input-outline .input-info {
10251 margin-top: 0;
10252 white-space: normal;
10253 overflow: hidden;
10254 text-overflow: ellipsis;
5309fbda 10255}
5d51ea26
DC
10256.ios .item-input-outline .item-input-info,
10257.ios .input-outline .item-input-info,
10258.ios .item-input-outline .input-info,
10259.ios .input-outline .input-info {
10260 margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
10261}
10262.ios .item-input-outline .item-input-error-message,
10263.ios .input-outline .item-input-error-message,
10264.ios .item-input-outline .input-error-message,
10265.ios .input-outline .input-error-message {
10266 margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
10267}
10268.ios .item-input-outline.item-input-with-info .item-input-wrap,
10269.ios .input-outline.item-input-with-info .item-input-wrap,
10270.ios .item-input-outline.input-with-info .item-input-wrap,
10271.ios .input-outline.input-with-info .item-input-wrap {
10272 margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
10273}
10274.ios .item-input-outline.item-input-with-error-message .item-input-wrap,
10275.ios .input-outline.item-input-with-error-message .item-input-wrap,
10276.ios .item-input-outline.input-with-error-message .item-input-wrap,
10277.ios .input-outline.input-with-error-message .item-input-wrap {
10278 margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
10279}
10280.md .item-input:not(.item-input-outline) .item-input-wrap:after,
10281.md .input:not(.input-outline):after {
5309fbda
DC
10282 content: '';
10283 position: absolute;
10284 background-color: var(--f7-list-item-border-color);
10285 display: block;
10286 z-index: 15;
10287 top: auto;
10288 right: auto;
10289 bottom: 0;
10290 left: 0;
10291 height: 1px;
10292 width: 100%;
10293 transform-origin: 50% 100%;
10294 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10295}
5d51ea26
DC
10296.md .item-input:not(.item-input-outline) .item-input-wrap:after,
10297.md .input:not(.input-outline):after {
5309fbda
DC
10298 transition-duration: 200ms;
10299}
10300.md .item-input-wrap {
10301 min-height: var(--f7-input-height);
10302}
10303.md .item-input .item-media {
10304 align-self: flex-end;
10305}
10306.md .item-input .item-inner:after {
10307 display: none !important;
10308}
10309.md .inline-labels .item-media,
10310.md .inline-label .item-media {
10311 align-self: flex-start;
10312 padding-top: 14px;
10313}
5309fbda
DC
10314.md .item-input-with-error-message,
10315.md .item-input-with-info,
10316.md .input-with-error-message,
10317.md .input-with-info {
10318 padding-bottom: 20px;
10319}
10320.md .item-input-error-message,
10321.md .item-input-info,
10322.md .input-error-message,
10323.md .input-info {
10324 position: absolute;
10325 top: 100%;
10326 margin-top: 4px;
10327 white-space: nowrap;
10328 overflow: hidden;
10329 text-overflow: ellipsis;
10330 width: 100%;
10331 right: 0;
10332}
10333.md .item-input-focused .item-label,
10334.md .item-input-focused .item-floating-label {
10335 color: var(--f7-label-focused-text-color, var(--f7-theme-color));
10336}
5d51ea26
DC
10337.md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,
10338.md .input-focused:not(.input-outline):after {
5309fbda
DC
10339 background: var(--f7-input-focused-border-color, var(--f7-theme-color));
10340}
5d51ea26
DC
10341.md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after,
10342.md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,
10343.md .input-invalid:not(.input-outline):after,
10344.md .input-focused:not(.input-outline):after {
5309fbda
DC
10345 transform: scaleY(2) !important;
10346}
5d51ea26
DC
10347.md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after,
10348.md .input-invalid:not(.input-outline):after {
5309fbda
DC
10349 background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color));
10350}
10351.md .item-input-invalid .item-label,
10352.md .item-input-invalid .item-floating-label {
10353 color: var(--f7-label-invalid-text-color, var(--f7-input-error-text-color));
10354}
10355.md .item-input-invalid input,
10356.md .input-invalid input,
10357.md .item-input-invalid select,
10358.md .input-invalid select,
10359.md .item-input-invalid textarea,
10360.md .input-invalid textarea {
10361 color: var(--f7-input-invalid-text-color, var(--f7-input-text-color));
10362}
10363.md .input-clear-button:after {
10364 font-size: calc(var(--f7-input-clear-button-size) / (24 / 20));
10365 content: 'delete_round_md';
10366 line-height: 1.2;
10367}
10368.md .input-clear-button:before {
10369 width: 48px;
10370 height: 48px;
10371 margin-left: -24px;
10372 margin-top: -24px;
10373}
5d51ea26
DC
10374.aurora .item-label + .item-input-wrap,
10375.aurora .item-floating-label + .item-input-wrap {
10376 margin-top: 0;
10377}
10378.aurora .item-input-focused .item-floating-label {
10379 color: var(--f7-label-text-color);
10380}
10381.aurora .item-input .item-media {
10382 align-self: flex-start;
10383}
10384.aurora .item-input-error-message,
10385.aurora .item-input-info,
10386.aurora .input-error-message,
10387.aurora .input-info {
10388 position: relative;
10389}
10390.aurora .item-input-focused .item-label,
10391.aurora .item-input-focused .item-floating-label {
10392 color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
10393}
10394.aurora .item-input-focused .item-inner:after {
10395 background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
10396}
10397.aurora .item-input-invalid .item-label,
10398.aurora .item-input-invalid .item-floating-label {
10399 color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
10400}
10401.aurora .item-input-invalid .item-inner:after {
10402 background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
10403}
10404.aurora .item-input-invalid input,
10405.aurora .input-invalid input,
10406.aurora .item-input-invalid select,
10407.aurora .input-invalid select,
10408.aurora .item-input-invalid textarea,
10409.aurora .input-invalid textarea {
10410 color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
10411}
10412.aurora .input-clear-button:after {
10413 content: 'delete_round_ios';
10414 font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
10415 line-height: 1.4;
10416}
10417.aurora .input-clear-button:before {
10418 width: 28px;
10419 height: 28px;
10420 margin-left: -14px;
10421 margin-top: -14px;
10422}
10423.aurora .item-input-outline .item-input-wrap,
10424.aurora .input-outline .item-input-wrap {
10425 margin-top: 0;
10426 margin-bottom: 0;
10427}
10428.aurora .item-input-outline .item-input-error-message,
10429.aurora .input-outline .item-input-error-message,
10430.aurora .item-input-outline .item-input-info,
10431.aurora .input-outline .item-input-info,
10432.aurora .item-input-outline .input-error-message,
10433.aurora .input-outline .input-error-message,
10434.aurora .item-input-outline .input-info,
10435.aurora .input-outline .input-info {
10436 margin-top: 0;
10437 white-space: normal;
10438 overflow: hidden;
10439 text-overflow: ellipsis;
10440}
10441.aurora .item-input-outline .item-input-info,
10442.aurora .input-outline .item-input-info,
10443.aurora .item-input-outline .input-info,
10444.aurora .input-outline .input-info {
10445 margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
10446}
10447.aurora .item-input-outline .item-input-error-message,
10448.aurora .input-outline .item-input-error-message,
10449.aurora .item-input-outline .input-error-message,
10450.aurora .input-outline .input-error-message {
10451 margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
10452}
10453.aurora .item-input-outline.item-input-with-info .item-input-wrap,
10454.aurora .input-outline.item-input-with-info .item-input-wrap,
10455.aurora .item-input-outline.input-with-info .item-input-wrap,
10456.aurora .input-outline.input-with-info .item-input-wrap {
10457 margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
10458}
10459.aurora .item-input-outline.item-input-with-error-message .item-input-wrap,
10460.aurora .input-outline.item-input-with-error-message .item-input-wrap,
10461.aurora .item-input-outline.input-with-error-message .item-input-wrap,
10462.aurora .input-outline.input-with-error-message .item-input-wrap {
10463 margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
10464}
5309fbda
DC
10465/* === Checkbox === */
10466:root {
10467 /* --f7-checkbox-active-color: var(--f7-theme-color); */
10468 --f7-checkbox-icon-color: #fff;
10469}
5d51ea26
DC
10470:root .theme-dark,
10471:root.theme-dark {
10472 --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3);
10473}
5309fbda
DC
10474.ios {
10475 --f7-checkbox-size: 22px;
10476 --f7-checkbox-border-radius: 50%;
10477 --f7-checkbox-border-width: 1px;
10478 --f7-checkbox-inactive-color: #c7c7cc;
10479 --f7-checkbox-extra-margin: 0px;
10480}
10481.md {
10482 --f7-checkbox-size: 18px;
10483 --f7-checkbox-border-radius: 2px;
10484 --f7-checkbox-border-width: 2px;
10485 --f7-checkbox-inactive-color: #6d6d6d;
10486 --f7-checkbox-extra-margin: 22px;
10487}
5d51ea26
DC
10488.aurora {
10489 --f7-checkbox-size: 14px;
10490 --f7-checkbox-border-radius: 2px;
10491 --f7-checkbox-border-width: 1px;
10492 --f7-checkbox-inactive-color: #888;
10493 --f7-checkbox-extra-margin: 0px;
10494}
5309fbda
DC
10495.checkbox {
10496 position: relative;
10497 display: inline-block;
10498 vertical-align: middle;
10499 z-index: 1;
10500 background-color: transparent;
10501 --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
10502}
10503.icon-checkbox,
10504.checkbox i {
10505 flex-shrink: 0;
10506 border: var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);
10507 width: var(--f7-checkbox-size);
10508 height: var(--f7-checkbox-size);
10509 border-radius: var(--f7-checkbox-border-radius);
10510 box-sizing: border-box;
10511 position: relative;
10512 display: block;
10513}
10514.icon-checkbox:after,
10515.checkbox i:after {
10516 font-family: 'framework7-core-icons';
10517 font-weight: normal;
10518 font-style: normal;
10519 line-height: 1;
10520 letter-spacing: normal;
10521 text-transform: none;
10522 white-space: nowrap;
10523 word-wrap: normal;
10524 direction: ltr;
10525 -webkit-font-smoothing: antialiased;
10526 text-rendering: optimizeLegibility;
10527 -moz-osx-font-smoothing: grayscale;
10528 -moz-font-feature-settings: "liga";
10529 font-feature-settings: "liga";
10530 text-align: center;
10531 display: block;
10532 width: 100%;
10533 height: 100%;
10534 font-size: 20px;
10535 width: var(--f7-checkbox-size);
10536 height: var(--f7-checkbox-size);
10537 line-height: var(--f7-checkbox-size);
10538 left: calc(0px - var(--f7-checkbox-border-width));
10539 top: calc(0px - var(--f7-checkbox-border-width));
10540 opacity: 0;
10541 color: var(--f7-checkbox-icon-color);
10542 position: relative;
5d51ea26
DC
10543 transition-property: opacity;
10544}
10545label.item-checkbox input[type="checkbox"]:not(:checked) ~ .icon-checkbox:after,
10546label.item-checkbox input[type="checkbox"]:not(:checked) ~ * .icon-checkbox:after,
10547.checkbox input[type="checkbox"]:not(:checked) ~ i:after {
10548 font-size: 0;
5309fbda
DC
10549}
10550label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox,
10551label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox,
5d51ea26
DC
10552.checkbox input[type="checkbox"]:checked ~ i,
10553label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox,
10554label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox,
10555.checkbox input[type="checkbox"]:indeterminate ~ i {
5309fbda
DC
10556 border-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
10557 background-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
10558}
10559label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox:after,
10560label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox:after,
5d51ea26
DC
10561.checkbox input[type="checkbox"]:checked ~ i:after,
10562label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
10563label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
10564.checkbox input[type="checkbox"]:indeterminate ~ i:after {
5309fbda
DC
10565 opacity: 1;
10566}
5d51ea26
DC
10567label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
10568label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
10569.checkbox input[type="checkbox"]:indeterminate ~ i:after {
10570 font-size: 0;
10571 content: '';
10572 position: absolute;
10573 top: 50%;
10574 width: 70%;
10575 background: #fff;
10576 height: 2px;
10577 border-radius: 2px;
10578 margin-top: -1px;
10579 left: 15%;
10580 transition: 0ms;
10581}
5309fbda
DC
10582label.item-checkbox,
10583.checkbox {
10584 cursor: pointer;
10585}
10586label.item-checkbox input[type="checkbox"],
10587.checkbox input[type="checkbox"],
10588label.item-checkbox input[type="radio"],
10589.checkbox input[type="radio"] {
10590 display: none;
10591}
10592label.item-checkbox {
10593 transition-duration: 300ms;
10594}
10595label.item-checkbox .item-content .item-media,
10596label.item-checkbox.item-content .item-media {
10597 align-self: center;
10598}
10599label.item-checkbox > .icon-checkbox {
10600 margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
10601}
10602label.item-checkbox.active-state {
10603 background-color: var(--f7-list-link-pressed-bg-color);
10604}
10605label.item-checkbox.active-state:after {
10606 background-color: transparent;
10607}
10608label.item-checkbox.disabled,
10609.disabled label.item-checkbox {
10610 opacity: 0.55;
10611 pointer-events: none;
10612 opacity: 0.55 !important;
10613 pointer-events: none !important;
10614}
10615.ios .icon-checkbox:after,
10616.ios .checkbox i:after {
10617 content: 'checkbox_ios';
10618 font-size: 21px;
10619}
10620.ios label.item-checkbox.active-state {
10621 transition-duration: 0ms;
10622}
5d51ea26
DC
10623.ios label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
10624.ios label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
10625.ios .checkbox input[type="checkbox"]:indeterminate ~ i:after {
10626 height: 1px;
10627 margin-top: 0px;
10628}
5309fbda
DC
10629.md .icon-checkbox,
10630.md .checkbox i {
10631 transition-duration: 200ms;
10632}
10633.md .icon-checkbox:after,
10634.md .checkbox i:after {
10635 content: 'checkbox_md';
10636 transition-duration: 200ms;
10637 font-size: 15px;
10638}
10639.md label.item-checkbox {
10640 position: relative;
10641 overflow: hidden;
10642 z-index: 0;
10643}
5d51ea26
DC
10644.aurora .icon-checkbox,
10645.aurora .checkbox i {
10646 transition-duration: 150ms;
10647}
10648.aurora .icon-checkbox:after,
10649.aurora .checkbox i:after {
10650 content: 'checkbox_aurora';
10651 transition-duration: 150ms;
10652 font-size: 19px;
10653}
10654.aurora .icon-checkbox:before,
10655.aurora .checkbox i:before {
10656 content: '';
10657 position: absolute;
10658 left: 0;
10659 top: 0;
10660 width: 100%;
10661 height: 100%;
10662 background: rgba(0, 0, 0, 0.1);
10663 opacity: 0;
10664 transition-duration: 150ms;
10665}
10666.aurora .checkbox.active-state i:before {
10667 opacity: 1;
10668}
10669.aurora label.item-checkbox {
10670 position: relative;
10671 overflow: hidden;
10672 z-index: 0;
10673}
5309fbda
DC
10674/* === Radio === */
10675:root {
10676 /*
10677 --f7-radio-active-color: var(--f7-theme-color);
10678 */
10679 --f7-radio-border-radius: 50%;
10680}
5d51ea26
DC
10681:root .theme-dark,
10682:root.theme-dark {
10683 --f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
10684}
5309fbda
DC
10685.ios {
10686 --f7-radio-size: 22px;
10687 --f7-radio-border-width: 1px;
10688 --f7-radio-inactive-color: #c7c7cc;
10689 --f7-radio-extra-margin: 0px;
10690}
10691.md {
10692 --f7-radio-size: 20px;
10693 --f7-radio-border-width: 2px;
10694 --f7-radio-inactive-color: #6d6d6d;
10695 --f7-radio-extra-margin: 22px;
10696}
5d51ea26
DC
10697.aurora {
10698 --f7-radio-size: 16px;
10699 --f7-radio-border-width: 1px;
10700 --f7-radio-inactive-color: #888;
10701 --f7-radio-extra-margin: 0px;
10702}
5309fbda
DC
10703.radio {
10704 position: relative;
10705 display: inline-block;
10706 vertical-align: middle;
10707 z-index: 1;
10708 --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
10709}
10710.icon-radio {
10711 width: var(--f7-radio-size);
10712 height: var(--f7-radio-size);
10713 border-radius: var(--f7-radio-border-radius);
10714 position: relative;
10715 box-sizing: border-box;
10716 display: block;
10717 flex-shrink: 0;
10718}
10719.radio .icon-radio,
5d51ea26
DC
10720.md .icon-radio,
10721.aurora .icon-radio {
5309fbda
DC
10722 border: var(--f7-radio-border-width) solid var(--f7-radio-inactive-color);
10723}
10724label.item-radio,
10725.radio {
10726 cursor: pointer;
10727}
10728label.item-radio input[type="checkbox"],
10729.radio input[type="checkbox"],
10730label.item-radio input[type="radio"],
10731.radio input[type="radio"] {
10732 display: none;
10733}
10734label.item-radio {
10735 transition-duration: 300ms;
10736}
10737label.item-radio .item-content .item-media,
10738label.item-radio.item-content .item-media {
10739 align-self: center;
10740}
10741label.item-radio.active-state {
10742 background-color: var(--f7-list-link-pressed-bg-color);
10743}
10744label.item-radio.active-state:after {
10745 background-color: transparent;
10746}
10747label.item-radio.disabled,
10748.disabled label.item-radio {
10749 opacity: 0.55;
10750 pointer-events: none;
10751 opacity: 0.55 !important;
10752 pointer-events: none !important;
10753}
10754.ios .icon-radio:after {
10755 font-family: 'framework7-core-icons';
10756 font-weight: normal;
10757 font-style: normal;
10758 line-height: 1;
10759 letter-spacing: normal;
10760 text-transform: none;
10761 white-space: nowrap;
10762 word-wrap: normal;
10763 direction: ltr;
10764 -webkit-font-smoothing: antialiased;
10765 text-rendering: optimizeLegibility;
10766 -moz-osx-font-smoothing: grayscale;
10767 -moz-font-feature-settings: "liga";
10768 font-feature-settings: "liga";
10769 text-align: center;
10770 display: block;
10771 width: 100%;
10772 height: 100%;
10773 width: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
10774 height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
10775 line-height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2 + 1px);
10776 font-size: 20px;
10777 content: 'radio_ios';
10778 color: var(--f7-radio-active-color, var(--f7-theme-color));
10779 opacity: 0;
10780}
10781.ios label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
10782.ios label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
10783.ios .radio input[type="radio"]:checked ~ .icon-radio:after {
10784 opacity: 1;
10785}
10786.ios .radio input[type="radio"]:checked ~ .icon-radio {
10787 border-color: var(--f7-radio-active-color, var(--f7-theme-color));
10788}
10789.ios label.item-radio input[type="radio"] ~ .icon-radio {
10790 position: absolute;
10791 top: 50%;
10792 margin-top: -11px;
10793 left: calc(var(--f7-safe-area-left) + 10px);
10794}
10795.ios label.item-radio .item-inner {
10796 padding-left: calc(var(--f7-safe-area-left) + 35px);
10797}
10798.ios label.item-radio.active-state {
10799 transition-duration: 0ms;
10800}
10801.md .icon-radio {
10802 transition-duration: 200ms;
10803}
10804.md .icon-radio:after {
10805 content: '';
10806 position: absolute;
10807 width: 10px;
10808 height: 10px;
10809 left: 50%;
10810 top: 50%;
10811 margin-left: -5px;
10812 margin-top: -5px;
10813 background-color: var(--f7-radio-active-color, var(--f7-theme-color));
10814 border-radius: 50%;
10815 transform: scale(0);
10816 transition-duration: 200ms;
10817}
10818.md label.item-radio input[type="radio"]:checked ~ .icon-radio,
10819.md label.item-radio input[type="radio"]:checked ~ * .icon-radio,
10820.md .radio input[type="radio"]:checked ~ .icon-radio {
10821 border-color: var(--f7-radio-active-color, var(--f7-theme-color));
10822}
10823.md label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
10824.md label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
10825.md .radio input[type="radio"]:checked ~ .icon-radio:after {
10826 background-color: var(--f7-radio-active-color, var(--f7-theme-color));
10827 transform: scale(1);
10828}
10829.md label.item-radio {
10830 position: relative;
10831 overflow: hidden;
10832 z-index: 0;
10833}
10834.md label.item-radio > .icon-radio {
10835 margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
10836}
5d51ea26
DC
10837.aurora .icon-radio {
10838 transition-duration: 150ms;
10839 overflow: hidden;
10840}
10841.aurora .icon-radio:after {
10842 content: '';
10843 position: absolute;
10844 width: 6px;
10845 height: 6px;
10846 left: 50%;
10847 top: 50%;
10848 margin-left: -3px;
10849 margin-top: -3px;
10850 background-color: #fff;
10851 border-radius: 50%;
10852 transform: scale(0);
10853 transition-duration: 150ms;
10854}
10855.aurora .icon-radio:before {
10856 content: '';
10857 position: absolute;
10858 left: 0;
10859 top: 0;
10860 width: 100%;
10861 height: 100%;
10862 background: rgba(0, 0, 0, 0.1);
10863 opacity: 0;
10864 transition-duration: 150ms;
10865}
10866.aurora .radio.active-state i:before {
10867 opacity: 1;
10868}
10869.aurora label.item-radio input[type="radio"]:checked ~ .icon-radio,
10870.aurora label.item-radio input[type="radio"]:checked ~ * .icon-radio,
10871.aurora .radio input[type="radio"]:checked ~ .icon-radio {
10872 border-color: var(--f7-radio-active-color, var(--f7-theme-color));
10873 background-color: var(--f7-radio-active-color, var(--f7-theme-color));
10874}
10875.aurora label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
10876.aurora label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
10877.aurora .radio input[type="radio"]:checked ~ .icon-radio:after {
10878 transform: scale(1);
10879}
10880.aurora label.item-radio {
10881 position: relative;
10882 overflow: hidden;
10883 z-index: 0;
10884}
10885.aurora label.item-radio > .icon-radio {
10886 margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
10887}
5309fbda 10888/* === Toggle === */
5d51ea26 10889:root {
5309fbda 10890 --f7-toggle-handle-color: #fff;
5d51ea26
DC
10891}
10892.ios {
5309fbda
DC
10893 --f7-toggle-width: 52px;
10894 --f7-toggle-height: 32px;
5d51ea26 10895 --f7-toggle-border-color: #e5e5e5;
5309fbda
DC
10896 --f7-toggle-inactive-color: #fff;
10897}
10898.ios .theme-dark,
10899.ios.theme-dark {
5d51ea26 10900 --f7-toggle-border-color: #555;
5309fbda
DC
10901 --f7-toggle-inactive-color: #222;
10902}
10903.md {
5309fbda
DC
10904 --f7-toggle-width: 36px;
10905 --f7-toggle-height: 14px;
10906 --f7-toggle-inactive-color: #b0afaf;
10907}
10908.md .theme-dark,
10909.md.theme-dark {
10910 --f7-toggle-inactive-color: #555;
10911}
5d51ea26
DC
10912.aurora {
10913 --f7-toggle-width: 40px;
10914 --f7-toggle-height: 20px;
10915 --f7-toggle-inactive-color: #aaa;
10916}
10917.aurora .theme-dark,
10918.aurora.theme-dark {
10919 --f7-toggle-inactive-color: #555;
10920}
5309fbda
DC
10921.toggle,
10922.toggle-icon {
10923 width: var(--f7-toggle-width);
10924 height: var(--f7-toggle-height);
10925 border-radius: var(--f7-toggle-height);
10926}
10927.toggle {
10928 display: inline-block;
10929 vertical-align: middle;
10930 position: relative;
10931 box-sizing: border-box;
10932 align-self: center;
10933 -webkit-user-select: none;
10934 -moz-user-select: none;
10935 -ms-user-select: none;
10936 user-select: none;
10937}
10938.toggle input[type="checkbox"] {
10939 display: none;
10940}
10941.toggle input[disabled] ~ .toggle-icon {
10942 pointer-events: none;
10943}
10944.toggle-icon {
10945 z-index: 0;
10946 margin: 0;
10947 padding: 0;
10948 -webkit-appearance: none;
10949 -moz-appearance: none;
10950 appearance: none;
10951 border: none;
10952 position: relative;
10953 transition: 300ms;
10954 box-sizing: border-box;
10955 display: block;
10956 cursor: pointer;
10957}
10958.toggle-icon:before,
10959.toggle-icon:after {
10960 content: '';
10961 will-change: transform;
10962}
10963.toggle-icon:after {
10964 background: var(--f7-toggle-handle-color);
10965 position: absolute;
10966 z-index: 2;
10967 transform: translateX(0px);
10968 transition-duration: 300ms;
10969}
10970.ios .toggle input[type="checkbox"]:checked + .toggle-icon {
10971 background: var(--f7-toggle-active-color, var(--f7-theme-color));
10972}
10973.ios .toggle input[type="checkbox"]:checked + .toggle-icon:before {
10974 transform: scale(0);
10975}
10976.ios .toggle input[type="checkbox"]:checked + .toggle-icon:after {
10977 transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))));
10978}
10979.ios .toggle-icon {
5d51ea26 10980 background: var(--f7-toggle-border-color);
5309fbda
DC
10981}
10982.ios .toggle-icon:before {
10983 position: absolute;
10984 right: 2px;
10985 top: 2px;
10986 width: calc(var(--f7-toggle-width) - 4px);
10987 height: calc(var(--f7-toggle-height) - 4px);
10988 border-radius: var(--f7-toggle-height);
10989 box-sizing: border-box;
10990 background: var(--f7-toggle-inactive-color);
10991 z-index: 1;
10992 transition-duration: 300ms;
10993 transform: scale(1);
10994}
10995.ios .toggle-icon:after {
10996 height: calc(var(--f7-toggle-height) - 4px);
10997 width: calc(var(--f7-toggle-height) - 4px);
10998 top: 2px;
10999 right: 2px;
11000 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
11001 border-radius: calc(var(--f7-toggle-height) - 4px);
11002}
11003.ios .toggle-active-state input[type="checkbox"]:not(:checked) + .toggle-icon:before {
11004 transform: scale(0);
11005}
11006.ios .toggle-active-state input[type="checkbox"] + .toggle-icon:after {
11007 width: calc(var(--f7-toggle-height) + 4px);
11008}
11009.ios .toggle-active-state input[type="checkbox"]:checked + .toggle-icon:after {
11010 transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)));
11011}
11012.md .toggle input[type="checkbox"]:checked + .toggle-icon {
11013 background: var(--f7-toggle-active-color, rgba(var(--f7-theme-color-rgb), 0.5));
11014}
11015.md .toggle input[type="checkbox"]:checked + .toggle-icon:after {
11016 transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 6px)));
11017 background: var(--f7-toggle-active-color, var(--f7-theme-color));
11018}
11019.md .toggle-icon {
11020 background: var(--f7-toggle-inactive-color);
11021}
11022.md .toggle-icon:after {
11023 height: calc(var(--f7-toggle-height) + 6px);
11024 width: calc(var(--f7-toggle-height) + 6px);
11025 top: -3px;
11026 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
11027 border-radius: var(--f7-toggle-height);
11028 right: 0;
11029}
5d51ea26
DC
11030.aurora .toggle input[type="checkbox"]:checked + .toggle-icon {
11031 background: var(--f7-toggle-active-color, var(--f7-theme-color));
11032}
11033.aurora .toggle input[type="checkbox"]:checked + .toggle-icon:after {
11034 transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))));
11035}
11036.aurora .toggle-icon {
11037 background: var(--f7-toggle-inactive-color);
11038}
11039.aurora .toggle-icon:after {
11040 height: calc(var(--f7-toggle-height) - 4px);
11041 width: calc(var(--f7-toggle-height) - 4px);
11042 top: 2px;
11043 right: 2px;
11044 border-radius: calc(var(--f7-toggle-height) - 4px);
11045}
5309fbda 11046/* === Range Slider === */
5d51ea26 11047:root {
5309fbda
DC
11048 /*
11049 --f7-range-bar-active-bg-color: var(--f7-theme-color);
11050 */
5d51ea26
DC
11051 --f7-range-scale-step-height: 5px;
11052 --f7-range-scale-text-color: #666;
11053 --f7-range-scale-substep-width: 1px;
11054 --f7-range-scale-substep-height: 4px;
11055}
11056.ios {
11057 --f7-range-size: 28px;
11058 --f7-range-bar-bg-color: #b7b8b7;
5309fbda
DC
11059 --f7-range-bar-size: 1px;
11060 --f7-range-bar-border-radius: 2px;
11061 --f7-range-knob-size: 28px;
11062 --f7-range-knob-color: #fff;
11063 --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
11064 --f7-range-label-size: 20px;
11065 --f7-range-label-text-color: #000;
11066 --f7-range-label-bg-color: #fff;
11067 --f7-range-label-font-size: 12px;
5d51ea26 11068 --f7-range-label-font-weight: normal;
5309fbda 11069 --f7-range-label-border-radius: 5px;
5d51ea26 11070 --f7-range-label-padding: 0px;
5309fbda
DC
11071 /*
11072 --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
11073 */
11074 --f7-range-scale-step-width: 1px;
5309fbda
DC
11075 --f7-range-scale-font-size: 12px;
11076 --f7-range-scale-font-weight: 400;
5309fbda
DC
11077 --f7-range-scale-label-offset: 4px;
11078 /*
11079 --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
11080 */
5309fbda
DC
11081}
11082.md {
11083 --f7-range-size: 20px;
11084 --f7-range-bar-bg-color: #b9b9b9;
5309fbda
DC
11085 --f7-range-bar-size: 2px;
11086 --f7-range-bar-border-radius: 0px;
11087 --f7-range-knob-size: 12px;
11088 /*
11089 --f7-range-knob-color: var(--f7-theme-color);
11090 */
11091 --f7-range-knob-box-shadow: none;
11092 --f7-range-label-size: 26px;
5d51ea26 11093 --f7-range-label-font-weight: normal;
5309fbda
DC
11094 --f7-range-label-text-color: #fff;
11095 /*
11096 --f7-range-label-bg-color: var(--f7-theme-color);
11097 */
11098 --f7-range-label-font-size: 10px;
11099 --f7-range-label-border-radius: 50%;
5d51ea26 11100 --f7-range-label-padding: 0px;
5309fbda
DC
11101 /*
11102 --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
11103 */
11104 --f7-range-scale-step-width: 2px;
5309fbda
DC
11105 --f7-range-scale-font-size: 12px;
11106 --f7-range-scale-font-weight: 400;
5309fbda
DC
11107 --f7-range-scale-label-offset: 4px;
11108 /*
11109 --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
11110 */
5d51ea26
DC
11111}
11112.aurora {
11113 --f7-range-size: 20px;
11114 --f7-range-bar-bg-color: #c7c7c7;
11115 --f7-range-bar-size: 2px;
11116 --f7-range-bar-border-radius: 2px;
11117 --f7-range-knob-size: 16px;
11118 /*
11119 --f7-range-knob-color: var(--f7-theme-color);
11120 */
11121 --f7-range-knob-box-shadow: none;
11122 --f7-range-label-size: 20px;
11123 --f7-range-label-text-color: #fff;
11124 /*
11125 --f7-range-label-bg-color: var(--f7-theme-color);
11126 */
11127 --f7-range-label-font-size: 10px;
11128 --f7-range-label-font-weight: 600;
11129 --f7-range-label-border-radius: 4px;
11130 --f7-range-label-padding: 0px 4px;
11131 /*
11132 --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
11133 */
11134 --f7-range-scale-step-width: 2px;
11135 --f7-range-scale-font-size: 11px;
11136 --f7-range-scale-font-weight: 500;
11137 --f7-range-scale-label-offset: 2px;
11138 /*
11139 --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
11140 */
11141}
11142.range-slider {
11143 display: block;
11144 position: relative;
11145 align-self: center;
11146 cursor: pointer;
11147 -webkit-user-select: none;
11148 -moz-user-select: none;
11149 -ms-user-select: none;
11150 user-select: none;
5309fbda
DC
11151}
11152.range-slider input[type="range"] {
11153 display: none;
11154}
11155.range-slider.range-slider-horizontal {
11156 width: 100%;
11157 height: var(--f7-range-size);
11158}
11159.range-slider.range-slider-vertical {
11160 height: 100%;
11161 width: var(--f7-range-size);
11162}
11163.range-bar {
11164 position: absolute;
11165 overflow: hidden;
11166 background: var(--f7-range-bar-bg-color);
11167 border-radius: var(--f7-range-bar-border-radius);
11168}
11169.range-slider-vertical .range-bar {
11170 left: 50%;
11171 top: 0;
11172 height: 100%;
11173 width: var(--f7-range-bar-size);
11174 margin-left: calc(-1 * var(--f7-range-bar-size) / 2);
11175}
11176.range-slider-horizontal .range-bar {
11177 left: 0;
11178 top: 50%;
11179 width: 100%;
11180 height: var(--f7-range-bar-size);
11181 margin-top: calc(-1 * var(--f7-range-bar-size) / 2);
11182}
11183.range-bar-active {
11184 position: absolute;
11185 background: var(--f7-range-bar-active-bg-color, var(--f7-theme-color));
11186}
11187.range-slider-horizontal .range-bar-active {
11188 right: 0;
11189 top: 0;
11190 height: 100%;
11191}
11192.range-slider-vertical .range-bar-active {
11193 left: 0;
11194 bottom: 0;
11195 width: 100%;
11196}
11197.range-slider-vertical-reversed .range-bar-active {
11198 top: 0;
11199 bottom: auto;
11200}
11201.range-knob-wrap {
11202 z-index: 20;
11203 position: absolute;
11204 height: var(--f7-range-knob-size);
11205 width: var(--f7-range-knob-size);
11206}
11207.range-slider-horizontal .range-knob-wrap {
11208 top: 50%;
11209 margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
11210 margin-right: calc(-1 * var(--f7-range-knob-size) / 2);
11211 right: 0;
11212}
11213.range-slider-vertical .range-knob-wrap {
11214 left: 50%;
11215 margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
11216 bottom: 0;
11217 margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
11218}
11219.range-slider-vertical-reversed .range-knob-wrap {
11220 bottom: auto;
11221 top: 0;
11222 margin-bottom: 0;
11223 margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
11224}
11225.range-knob {
11226 box-sizing: border-box;
11227 border-radius: 50%;
11228 position: absolute;
11229 left: 0;
11230 top: 0;
11231 width: 100%;
11232 height: 100%;
11233 z-index: 1;
11234 background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
11235 box-shadow: var(--f7-range-knob-box-shadow);
11236}
11237.range-knob:after {
11238 content: '';
11239 position: absolute;
11240 left: 50%;
11241 top: 50%;
11242 width: 44px;
11243 height: 44px;
11244 margin-left: -22px;
11245 margin-top: -22px;
11246}
11247.range-knob-label {
11248 position: absolute;
11249 left: 50%;
11250 bottom: 100%;
11251 text-align: center;
11252 transition-duration: 120ms;
11253 transition-property: transform;
5d51ea26 11254 box-sizing: border-box;
5309fbda
DC
11255 transform: translateY(100%) scale(0);
11256 height: var(--f7-range-label-size);
11257 line-height: var(--f7-range-label-size);
11258 min-width: var(--f7-range-label-size);
11259 color: var(--f7-range-label-text-color);
11260 background-color: var(--f7-range-label-bg-color, var(--f7-theme-color));
11261 font-size: var(--f7-range-label-font-size);
5d51ea26 11262 font-weight: var(--f7-range-label-font-weight);
5309fbda 11263 border-radius: var(--f7-range-label-border-radius);
5d51ea26 11264 padding: var(--f7-range-label-padding);
5309fbda
DC
11265}
11266.range-knob-active-state .range-knob-label {
11267 transform: translateY(0%) scale(1);
11268}
11269.range-scale {
11270 position: absolute;
11271}
11272.range-slider-horizontal .range-scale {
11273 top: 50%;
11274 left: 0;
11275 width: 100%;
11276 margin-top: calc(var(--f7-range-bar-size) / 2);
11277}
11278.range-slider-vertical .range-scale {
11279 right: 50%;
11280 top: 0;
11281 height: 100%;
11282 margin-right: calc(var(--f7-range-bar-size) / 2);
11283}
11284.range-scale-step {
11285 position: absolute;
11286 box-sizing: border-box;
11287 display: flex;
11288 font-size: var(--f7-range-scale-font-size);
11289 font-weight: var(--f7-range-scale-font-weight);
11290 color: var(--f7-range-scale-text-color, var(--f7-range-bar-bg-color));
11291 line-height: 1;
11292}
11293.range-scale-step:before {
11294 content: '';
11295 position: absolute;
11296 background: var(--f7-range-scale-step-bg-color, var(--f7-range-bar-bg-color));
11297}
11298.range-slider-horizontal .range-scale-step {
11299 justify-content: center;
11300 align-items: flex-start;
11301 width: var(--f7-range-scale-step-width);
11302 height: var(--f7-range-scale-step-height);
11303 padding-top: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
11304 top: 0;
11305 margin-right: calc(-1 * var(--f7-range-scale-step-width) / 2);
11306}
11307.range-slider-horizontal .range-scale-step:before {
11308 left: 0;
11309 top: 0;
11310 width: 100%;
11311 height: var(--f7-range-scale-step-height);
11312}
11313.range-slider-horizontal .range-scale-step:first-child {
11314 margin-right: 0;
11315}
11316.range-slider-horizontal .range-scale-step:last-child {
11317 margin-right: calc(-1 * var(--f7-range-scale-step-width));
11318}
11319.range-slider-vertical .range-scale-step {
11320 line-height: 1;
11321 justify-content: flex-end;
11322 align-items: center;
11323 height: var(--f7-range-scale-step-width);
11324 width: var(--f7-range-scale-step-height);
11325 padding-right: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
11326 right: 0;
11327 margin-bottom: calc(-1 * var(--f7-range-scale-step-width) / 2);
11328}
11329.range-slider-vertical .range-scale-step:first-child {
11330 margin-bottom: 0;
11331}
11332.range-slider-vertical .range-scale-step:last-child {
11333 margin-bottom: calc(-1 * var(--f7-range-scale-step-width));
11334}
11335.range-slider-vertical .range-scale-step:before {
11336 right: 0;
11337 top: 0;
11338 height: 100%;
11339 width: var(--f7-range-scale-step-height);
11340}
11341.range-scale-substep {
11342 --f7-range-scale-step-bg-color: var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));
11343 --f7-range-scale-step-width: var(--f7-range-scale-substep-width);
11344 --f7-range-scale-step-height: var(--f7-range-scale-substep-height);
11345}
11346.ios .range-knob-label {
11347 margin-bottom: 6px;
11348 transform: translateX(-50%) translateY(100%) scale(0);
11349}
11350.ios .range-knob-active-state .range-knob-label {
11351 transform: translateX(-50%) translateY(0%) scale(1);
11352}
11353.md .range-knob {
11354 transition-duration: 200ms;
11355 transition-property: transform, background-color;
11356}
11357.md .range-knob-active-state .range-knob {
11358 transform: scale(1.5);
11359}
11360.md .range-slider-min:not(.range-slider-dual) .range-knob {
11361 background: #fff !important;
11362 border: 2px solid var(--f7-range-bar-bg-color);
11363}
11364.md .range-knob-label {
11365 width: var(--f7-range-label-size);
11366 margin-left: calc(-1 * var(--f7-range-label-size) / 2);
11367 margin-bottom: 8px;
11368}
11369.md .range-knob-label:before {
11370 content: '';
11371 left: 50%;
11372 top: 0px;
11373 margin-left: calc(-1 * var(--f7-range-label-size) / 2);
11374 position: absolute;
11375 z-index: -1;
11376 width: var(--f7-range-label-size);
11377 height: var(--f7-range-label-size);
11378 background: var(--f7-range-label-bg-color, var(--f7-theme-color));
11379 transform: rotate(-45deg);
11380 border-radius: 50% 50% 50% 0;
11381}
11382.md .range-knob-active-state .range-knob-label {
11383 transform: translateY(0%) scale(1);
11384}
11385.md .range-slider-label .range-knob-active-state .range-knob {
11386 transform: scale(0);
11387}
5d51ea26
DC
11388.aurora .range-knob-label {
11389 margin-bottom: 6px;
11390 transform: translateX(-50%) translateY(100%) scale(0);
11391}
11392.aurora .range-knob-active-state .range-knob-label {
11393 transform: translateX(-50%) translateY(0%) scale(1);
11394}
5309fbda
DC
11395/* === Stepper === */
11396:root {
11397 /*
11398 --f7-stepper-button-text-color: var(--f7-theme-color);
11399 --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
5d51ea26 11400 --f7-stepper-value-text-color: var(--f7-theme-color);
5309fbda
DC
11401 */
11402 --f7-stepper-fill-button-text-color: #fff;
11403 /*
11404 --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
11405 */
11406 --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
11407}
11408.ios {
11409 --f7-stepper-height: 29px;
11410 --f7-stepper-border-radius: 5px;
11411 /*
11412 --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
11413 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
11414 */
11415 --f7-stepper-border-width: 1px;
11416 --f7-stepper-large-height: 44px;
11417 --f7-stepper-small-height: 26px;
11418 --f7-stepper-small-border-width: 2px;
11419 --f7-stepper-value-font-size: 17px;
11420 --f7-stepper-value-font-weight: 400;
11421}
11422.md {
11423 --f7-stepper-height: 36px;
11424 --f7-stepper-border-radius: 4px;
11425 --f7-stepper-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
11426 /*
11427 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
11428 */
11429 --f7-stepper-border-width: 2px;
11430 --f7-stepper-large-height: 48px;
11431 --f7-stepper-small-border-width: 2px;
11432 --f7-stepper-small-height: 28px;
11433 --f7-stepper-value-font-size: 14px;
11434 --f7-stepper-value-font-weight: 500;
11435}
11436.md .theme-dark,
11437.md.theme-dark {
11438 --f7-stepper-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
11439}
5d51ea26
DC
11440.aurora {
11441 /*
11442 --f7-stepper-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
11443 --f7-stepper-button-fill-hover-bg-color: var(--f7-theme-color-tint);
11444 */
11445 --f7-stepper-height: 28px;
11446 --f7-stepper-border-radius: 4px;
11447 /*
11448 --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
11449 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
11450 */
11451 --f7-stepper-border-width: 2px;
11452 --f7-stepper-large-height: 34px;
11453 --f7-stepper-small-border-width: 1px;
11454 --f7-stepper-small-height: 22px;
11455 --f7-stepper-value-font-size: 14px;
11456 --f7-stepper-value-font-weight: 500;
11457}
5309fbda
DC
11458.stepper {
11459 display: inline-flex;
11460 align-items: stretch;
11461 height: var(--f7-stepper-height);
11462 border-radius: var(--f7-stepper-border-radius);
5d51ea26 11463 flex-direction: row-reverse;
5309fbda
DC
11464}
11465.stepper-button,
11466.stepper-button-minus,
11467.stepper-button-plus {
11468 background-color: var(--f7-stepper-button-bg-color);
11469 width: 40px;
11470 border-radius: var(--f7-stepper-border-radius);
11471 border: var(--f7-stepper-border-width) solid var(--f7-theme-color);
11472 color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
11473 line-height: calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));
11474 text-align: center;
11475 display: flex;
11476 justify-content: center;
11477 align-content: center;
11478 align-items: center;
11479 flex-shrink: 0;
11480 box-sizing: border-box;
11481 position: relative;
11482 cursor: pointer;
11483}
11484.stepper-button.active-state,
11485.stepper-button-minus.active-state,
11486.stepper-button-plus.active-state {
11487 background-color: var(--f7-stepper-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
11488 color: var(--f7-stepper-button-pressed-text-color, var(--f7-stepper-button-text-color, var(--f7-theme-color)));
11489}
11490.stepper-button:first-child,
11491.stepper-button-minus:first-child,
11492.stepper-button-plus:first-child {
5d51ea26 11493 border-radius: var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius);
5309fbda
DC
11494}
11495.stepper-button:last-child,
11496.stepper-button-minus:last-child,
11497.stepper-button-plus:last-child {
5d51ea26 11498 border-radius: 0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0;
5309fbda
DC
11499}
11500.stepper-button .icon,
11501.stepper-button-minus .icon,
11502.stepper-button-plus .icon {
11503 pointer-events: none;
11504}
11505.stepper-button + .stepper-button,
11506.stepper-button-minus + .stepper-button,
11507.stepper-button-plus + .stepper-button,
11508.stepper-button + .stepper-button-minus,
11509.stepper-button-minus + .stepper-button-minus,
11510.stepper-button-plus + .stepper-button-minus,
11511.stepper-button + .stepper-button-plus,
11512.stepper-button-minus + .stepper-button-plus,
11513.stepper-button-plus + .stepper-button-plus {
5d51ea26 11514 border-left: none;
5309fbda
DC
11515}
11516.stepper-button-plus,
11517.stepper-button-minus {
11518 -webkit-user-select: none;
11519 -moz-user-select: none;
11520 -ms-user-select: none;
11521 user-select: none;
11522}
11523.stepper-button-plus:after,
11524.stepper-button-minus:after,
11525.stepper-button-plus:before,
11526.stepper-button-minus:before {
11527 content: '';
11528 position: absolute;
11529 left: 50%;
11530 top: 50%;
11531 transform: translate(-50%, -50%);
11532 background-color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
11533}
11534.stepper-button-plus:after,
11535.stepper-button-minus:after {
11536 width: 15px;
11537 height: 2px;
11538}
11539.stepper-button-plus:before {
11540 height: 15px;
11541 width: 2px;
11542}
11543.stepper-value {
11544 display: flex;
11545 align-content: center;
11546 align-items: center;
11547 justify-content: center;
11548}
11549.stepper-input-wrap,
11550.stepper-value {
11551 flex-shrink: 1;
11552 text-align: center;
11553 border-top: var(--f7-stepper-border-width) solid var(--f7-theme-color);
11554 border-bottom: var(--f7-stepper-border-width) solid var(--f7-theme-color);
11555}
5d51ea26 11556.stepper .stepper-input-wrap input,
5309fbda
DC
11557.stepper-value {
11558 width: 45px;
5d51ea26 11559 color: var(--f7-stepper-value-text-color, var(--f7-theme-color));
5309fbda
DC
11560 font-size: var(--f7-stepper-value-font-size);
11561 font-weight: var(--f7-stepper-value-font-weight);
11562 text-align: center;
11563}
5d51ea26 11564.stepper .stepper-input-wrap input {
5309fbda
DC
11565 height: 100%;
11566}
11567.stepper-round,
11568.ios .stepper-round-ios,
5d51ea26
DC
11569.md .stepper-round-md,
11570.aurora .stepper-round-aurora {
5309fbda
DC
11571 --f7-stepper-border-radius: var(--f7-stepper-height);
11572}
11573.stepper-fill,
11574.ios .stepper-fill-ios,
5d51ea26
DC
11575.md .stepper-fill-md,
11576.aurora .stepper-fill-aurora {
5309fbda
DC
11577 --f7-stepper-button-bg-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));
11578 --f7-stepper-button-text-color: var(--f7-stepper-fill-button-text-color);
11579 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
11580}
11581.stepper-fill .stepper-button + .stepper-button,
11582.ios .stepper-fill-ios .stepper-button + .stepper-button,
11583.md .stepper-fill-md .stepper-button + .stepper-button,
5d51ea26 11584.aurora .stepper-fill-aurora .stepper-button + .stepper-button,
5309fbda
DC
11585.stepper-raised .stepper-button + .stepper-button,
11586.ios .stepper-raised-ios .stepper-button + .stepper-button,
11587.md .stepper-raised-md .stepper-button + .stepper-button,
5d51ea26 11588.aurora .stepper-raised-aurora .stepper-button + .stepper-button,
5309fbda
DC
11589.stepper-fill .stepper-button-minus + .stepper-button-plus,
11590.ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus,
11591.md .stepper-fill-md .stepper-button-minus + .stepper-button-plus,
5d51ea26 11592.aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus,
5309fbda
DC
11593.stepper-raised .stepper-button-minus + .stepper-button-plus,
11594.ios .stepper-raised-ios .stepper-button-minus + .stepper-button-plus,
5d51ea26
DC
11595.md .stepper-raised-md .stepper-button-minus + .stepper-button-plus,
11596.aurora .stepper-raised-aurora .stepper-button-minus + .stepper-button-plus {
11597 border-left: 1px solid rgba(0, 0, 0, 0.1);
5309fbda
DC
11598}
11599.stepper-fill .stepper-button + .stepper-button.active-state,
11600.ios .stepper-fill-ios .stepper-button + .stepper-button.active-state,
11601.md .stepper-fill-md .stepper-button + .stepper-button.active-state,
5d51ea26 11602.aurora .stepper-fill-aurora .stepper-button + .stepper-button.active-state,
5309fbda
DC
11603.stepper-fill .stepper-button-minus + .stepper-button-plus.active-state,
11604.ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus.active-state,
5d51ea26
DC
11605.md .stepper-fill-md .stepper-button-minus + .stepper-button-plus.active-state,
11606.aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus.active-state {
11607 border-left-color: var(--f7-stepper-button-pressed-bg-color);
5309fbda
DC
11608}
11609.stepper-raised:not(.stepper-fill) .stepper-input-wrap,
11610.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,
11611.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,
5d51ea26 11612.aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-input-wrap,
5309fbda
DC
11613.stepper-raised:not(.stepper-fill) .stepper-value,
11614.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,
5d51ea26
DC
11615.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,
11616.aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-value {
5309fbda
DC
11617 border-left: 1px solid rgba(0, 0, 0, 0.1);
11618 border-right: 1px solid rgba(0, 0, 0, 0.1);
11619}
11620.stepper-large,
11621.ios .stepper-large-ios,
5d51ea26
DC
11622.md .stepper-large-md,
11623.aurora .stepper-large-aurora {
5309fbda
DC
11624 --f7-stepper-height: var(--f7-stepper-large-height);
11625}
11626.stepper-small,
11627.ios .stepper-small-ios,
5d51ea26
DC
11628.md .stepper-small-md,
11629.aurora .stepper-small-aurora {
5309fbda
DC
11630 --f7-stepper-border-width: var(--f7-stepper-small-border-width);
11631 --f7-stepper-height: var(--f7-stepper-small-height);
11632}
11633.ios .stepper-fill.stepper-small-ios,
11634.ios .stepper-fill.stepper-small {
11635 --f7-stepper-button-pressed-bg-color: transparent;
11636 --f7-stepper-button-pressed-text-color: var(--f7-theme-color);
11637}
11638.stepper-raised,
11639.ios .stepper-raised-ios,
5d51ea26
DC
11640.md .stepper-raised-md,
11641.aurora .stepper-raised-aurora {
5309fbda
DC
11642 --f7-stepper-border-width: 0;
11643 box-shadow: var(--f7-stepper-raised-box-shadow);
11644}
11645.ios .stepper-button .f7-icons,
11646.ios .stepper-button-minus .f7-icons,
11647.ios .stepper-button-plus .f7-icons {
11648 font-size: 22px;
11649}
11650.ios .stepper-fill,
11651.ios .stepper-fill-ios {
11652 --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint));
11653}
11654.ios .stepper-small.stepper-raised,
11655.ios .stepper-small-ios.stepper-raised,
11656.ios .stepper-small.stepper-raised-ios,
11657.ios .stepper-small-ios.stepper-raised-ios {
11658 --f7-stepper-border-width: 0px;
11659}
11660.ios .stepper-small .stepper-button,
11661.ios .stepper-small-ios .stepper-button,
11662.ios .stepper-small .stepper-button-minus,
11663.ios .stepper-small-ios .stepper-button-minus,
11664.ios .stepper-small .stepper-button-plus,
11665.ios .stepper-small-ios .stepper-button-plus {
11666 transition-duration: 200ms;
11667}
11668.ios .stepper-small .stepper-button.active-state:after,
11669.ios .stepper-small-ios .stepper-button.active-state:after,
11670.ios .stepper-small .stepper-button-minus.active-state:after,
11671.ios .stepper-small-ios .stepper-button-minus.active-state:after,
11672.ios .stepper-small .stepper-button-plus.active-state:after,
11673.ios .stepper-small-ios .stepper-button-plus.active-state:after,
11674.ios .stepper-small .stepper-button.active-state:before,
11675.ios .stepper-small-ios .stepper-button.active-state:before,
11676.ios .stepper-small .stepper-button-minus.active-state:before,
11677.ios .stepper-small-ios .stepper-button-minus.active-state:before,
11678.ios .stepper-small .stepper-button-plus.active-state:before,
11679.ios .stepper-small-ios .stepper-button-plus.active-state:before {
11680 transition-duration: 200ms;
11681 background-color: var(--f7-theme-color);
11682}
11683.md .stepper-button,
11684.md .stepper-button-minus,
11685.md .stepper-button-plus {
11686 transition-duration: 300ms;
11687 transform: translate3d(0, 0, 0);
11688 overflow: hidden;
11689}
11690.md .stepper-fill,
11691.md .stepper-fill-md {
11692 --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
11693}
5d51ea26
DC
11694.aurora .stepper-button,
11695.aurora .stepper-button-minus,
11696.aurora .stepper-button-plus {
11697 transition-duration: 100ms;
11698 transform: translate3d(0, 0, 0);
11699 overflow: hidden;
11700}
11701.aurora.device-desktop .stepper-button:not(.active-state):not(.no-hover):hover,
11702.aurora.device-desktop .stepper-button-minus:not(.active-state):not(.no-hover):hover,
11703.aurora.device-desktop .stepper-button-plus:not(.active-state):not(.no-hover):hover {
11704 background-color: var(--f7-stepper-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
11705}
11706.aurora .stepper-fill,
11707.aurora .stepper-fill-aurora {
11708 --f7-stepper-button-hover-bg-color: var(--f7-stepper-button-fill-hover-bg-color, var(--f7-theme-color-tint));
11709 --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
11710}
5309fbda
DC
11711/* === Smart Select === */
11712.smart-select :root {
11713 /*
11714 --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
11715 --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
11716 */
11717}
11718.smart-select select {
11719 display: none;
11720}
11721.smart-select .item-after {
11722 max-width: 70%;
11723 overflow: hidden;
11724 text-overflow: ellipsis;
11725 position: relative;
11726 display: block;
11727}
11728.smart-select-sheet .page,
11729.smart-select-sheet .sheet-modal-inner,
11730.smart-select-sheet .list ul {
11731 background: var(--f7-smart-select-sheet-bg, var(--f7-list-bg-color));
11732}
11733.smart-select-sheet .toolbar:after {
11734 content: '';
11735 position: absolute;
11736 background-color: var(--f7-smart-select-sheet-toolbar-border-color, var(--f7-bars-border-color));
11737 display: block;
11738 z-index: 15;
11739 top: auto;
11740 right: auto;
11741 bottom: 0;
11742 left: 0;
11743 height: 1px;
11744 width: 100%;
11745 transform-origin: 50% 100%;
11746 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
11747}
11748.smart-select-sheet .toolbar:after {
11749 display: block;
11750}
11751.smart-select-sheet .list {
11752 margin: 0;
11753}
11754.smart-select-sheet .list ul:before {
11755 display: none !important;
11756}
11757.smart-select-sheet .list ul:after {
11758 display: none !important;
11759}
11760.smart-select-popover .popover-inner {
11761 max-height: 40vh;
11762}
11763/* === Grid === */
11764.ios {
11765 --f7-grid-gap: 15px;
11766}
11767.md {
11768 --f7-grid-gap: 16px;
11769}
5d51ea26
DC
11770.aurora {
11771 --f7-grid-gap: 15px;
11772}
5309fbda
DC
11773.row {
11774 display: flex;
11775 justify-content: space-between;
11776 flex-wrap: wrap;
11777 align-items: flex-start;
11778 --f7-cols-per-row: 1;
11779}
11780.row > [class*="col-"],
11781.row > .col {
11782 box-sizing: border-box;
11783 width: calc((100% - var(--f7-grid-gap) * (var(--f7-cols-per-row) - 1)) / var(--f7-cols-per-row));
11784}
11785.row.no-gap {
11786 --f7-grid-gap: 0px;
11787}
11788.row .col-5 {
11789 --f7-cols-per-row: 20;
11790}
11791.row .col-10 {
11792 --f7-cols-per-row: 10;
11793}
11794.row .col-15 {
11795 --f7-cols-per-row: 6.66666667;
11796}
11797.row .col-20 {
11798 --f7-cols-per-row: 5;
11799}
11800.row .col-25 {
11801 --f7-cols-per-row: 4;
11802}
11803.row .col-30 {
11804 --f7-cols-per-row: 3.33333333;
11805}
11806.row .col-33 {
11807 --f7-cols-per-row: 3;
11808}
11809.row .col-35 {
11810 --f7-cols-per-row: 2.85714286;
11811}
11812.row .col-40 {
11813 --f7-cols-per-row: 2.5;
11814}
11815.row .col-45 {
11816 --f7-cols-per-row: 2.22222222;
11817}
11818.row .col-50 {
11819 --f7-cols-per-row: 2;
11820}
11821.row .col-55 {
11822 --f7-cols-per-row: 1.81818182;
11823}
11824.row .col-60 {
11825 --f7-cols-per-row: 1.66666667;
11826}
11827.row .col-65 {
11828 --f7-cols-per-row: 1.53846154;
11829}
11830.row .col-66 {
11831 --f7-cols-per-row: 1.5;
11832}
11833.row .col-70 {
11834 --f7-cols-per-row: 1.42857143;
11835}
11836.row .col-75 {
11837 --f7-cols-per-row: 1.33333333;
11838}
11839.row .col-80 {
11840 --f7-cols-per-row: 1.25;
11841}
11842.row .col-85 {
11843 --f7-cols-per-row: 1.17647059;
11844}
11845.row .col-90 {
11846 --f7-cols-per-row: 1.11111111;
11847}
11848.row .col-95 {
11849 --f7-cols-per-row: 1.05263158;
11850}
11851.row .col-100 {
11852 --f7-cols-per-row: 1;
11853}
11854.row .col:nth-last-child(1),
11855.row .col:nth-last-child(1) ~ .col {
11856 --f7-cols-per-row: 1;
11857}
11858.row .col:nth-last-child(2),
11859.row .col:nth-last-child(2) ~ .col {
11860 --f7-cols-per-row: 2;
11861}
11862.row .col:nth-last-child(3),
11863.row .col:nth-last-child(3) ~ .col {
11864 --f7-cols-per-row: 3;
11865}
11866.row .col:nth-last-child(4),
11867.row .col:nth-last-child(4) ~ .col {
11868 --f7-cols-per-row: 4;
11869}
11870.row .col:nth-last-child(5),
11871.row .col:nth-last-child(5) ~ .col {
11872 --f7-cols-per-row: 5;
11873}
11874.row .col:nth-last-child(6),
11875.row .col:nth-last-child(6) ~ .col {
11876 --f7-cols-per-row: 6;
11877}
11878.row .col:nth-last-child(7),
11879.row .col:nth-last-child(7) ~ .col {
11880 --f7-cols-per-row: 7;
11881}
11882.row .col:nth-last-child(8),
11883.row .col:nth-last-child(8) ~ .col {
11884 --f7-cols-per-row: 8;
11885}
11886.row .col:nth-last-child(9),
11887.row .col:nth-last-child(9) ~ .col {
11888 --f7-cols-per-row: 9;
11889}
11890.row .col:nth-last-child(10),
11891.row .col:nth-last-child(10) ~ .col {
11892 --f7-cols-per-row: 10;
11893}
11894.row .col:nth-last-child(11),
11895.row .col:nth-last-child(11) ~ .col {
11896 --f7-cols-per-row: 11;
11897}
11898.row .col:nth-last-child(12),
11899.row .col:nth-last-child(12) ~ .col {
11900 --f7-cols-per-row: 12;
11901}
11902.row .col:nth-last-child(13),
11903.row .col:nth-last-child(13) ~ .col {
11904 --f7-cols-per-row: 13;
11905}
11906.row .col:nth-last-child(14),
11907.row .col:nth-last-child(14) ~ .col {
11908 --f7-cols-per-row: 14;
11909}
11910.row .col:nth-last-child(15),
11911.row .col:nth-last-child(15) ~ .col {
11912 --f7-cols-per-row: 15;
11913}
11914.row .col:nth-last-child(16),
11915.row .col:nth-last-child(16) ~ .col {
11916 --f7-cols-per-row: 16;
11917}
11918.row .col:nth-last-child(17),
11919.row .col:nth-last-child(17) ~ .col {
11920 --f7-cols-per-row: 17;
11921}
11922.row .col:nth-last-child(18),
11923.row .col:nth-last-child(18) ~ .col {
11924 --f7-cols-per-row: 18;
11925}
11926.row .col:nth-last-child(19),
11927.row .col:nth-last-child(19) ~ .col {
11928 --f7-cols-per-row: 19;
11929}
11930.row .col:nth-last-child(20),
11931.row .col:nth-last-child(20) ~ .col {
11932 --f7-cols-per-row: 20;
11933}
11934.row .col:nth-last-child(21),
11935.row .col:nth-last-child(21) ~ .col {
11936 --f7-cols-per-row: 21;
11937}
11938.row .col:nth-last-child(22),
11939.row .col:nth-last-child(22) ~ .col {
11940 --f7-cols-per-row: 22;
11941}
11942@media (min-width: 768px) {
11943 .row .tablet-5 {
11944 --f7-cols-per-row: 20;
11945 }
11946 .row .tablet-10 {
11947 --f7-cols-per-row: 10;
11948 }
11949 .row .tablet-15 {
11950 --f7-cols-per-row: 6.66666667;
11951 }
11952 .row .tablet-20 {
11953 --f7-cols-per-row: 5;
11954 }
11955 .row .tablet-25 {
11956 --f7-cols-per-row: 4;
11957 }
11958 .row .tablet-30 {
11959 --f7-cols-per-row: 3.33333333;
11960 }
11961 .row .tablet-33 {
11962 --f7-cols-per-row: 3;
11963 }
11964 .row .tablet-35 {
11965 --f7-cols-per-row: 2.85714286;
11966 }
11967 .row .tablet-40 {
11968 --f7-cols-per-row: 2.5;
11969 }
11970 .row .tablet-45 {
11971 --f7-cols-per-row: 2.22222222;
11972 }
11973 .row .tablet-50 {
11974 --f7-cols-per-row: 2;
11975 }
11976 .row .tablet-55 {
11977 --f7-cols-per-row: 1.81818182;
11978 }
11979 .row .tablet-60 {
11980 --f7-cols-per-row: 1.66666667;
11981 }
11982 .row .tablet-65 {
11983 --f7-cols-per-row: 1.53846154;
11984 }
11985 .row .tablet-66 {
11986 --f7-cols-per-row: 1.5;
11987 }
11988 .row .tablet-70 {
11989 --f7-cols-per-row: 1.42857143;
11990 }
11991 .row .tablet-75 {
11992 --f7-cols-per-row: 1.33333333;
11993 }
11994 .row .tablet-80 {
11995 --f7-cols-per-row: 1.25;
11996 }
11997 .row .tablet-85 {
11998 --f7-cols-per-row: 1.17647059;
11999 }
12000 .row .tablet-90 {
12001 --f7-cols-per-row: 1.11111111;
12002 }
12003 .row .tablet-95 {
12004 --f7-cols-per-row: 1.05263158;
12005 }
12006 .row .tablet-100 {
12007 --f7-cols-per-row: 1;
12008 }
12009 .row .tablet-auto:nth-last-child(1),
12010 .row .tablet-auto:nth-last-child(1) ~ .tablet-auto {
12011 --f7-cols-per-row: 1;
12012 }
12013 .row .tablet-auto:nth-last-child(2),
12014 .row .tablet-auto:nth-last-child(2) ~ .tablet-auto {
12015 --f7-cols-per-row: 2;
12016 }
12017 .row .tablet-auto:nth-last-child(3),
12018 .row .tablet-auto:nth-last-child(3) ~ .tablet-auto {
12019 --f7-cols-per-row: 3;
12020 }
12021 .row .tablet-auto:nth-last-child(4),
12022 .row .tablet-auto:nth-last-child(4) ~ .tablet-auto {
12023 --f7-cols-per-row: 4;
12024 }
12025 .row .tablet-auto:nth-last-child(5),
12026 .row .tablet-auto:nth-last-child(5) ~ .tablet-auto {
12027 --f7-cols-per-row: 5;
12028 }
12029 .row .tablet-auto:nth-last-child(6),
12030 .row .tablet-auto:nth-last-child(6) ~ .tablet-auto {
12031 --f7-cols-per-row: 6;
12032 }
12033 .row .tablet-auto:nth-last-child(7),
12034 .row .tablet-auto:nth-last-child(7) ~ .tablet-auto {
12035 --f7-cols-per-row: 7;
12036 }
12037 .row .tablet-auto:nth-last-child(8),
12038 .row .tablet-auto:nth-last-child(8) ~ .tablet-auto {
12039 --f7-cols-per-row: 8;
12040 }
12041 .row .tablet-auto:nth-last-child(9),
12042 .row .tablet-auto:nth-last-child(9) ~ .tablet-auto {
12043 --f7-cols-per-row: 9;
12044 }
12045 .row .tablet-auto:nth-last-child(10),
12046 .row .tablet-auto:nth-last-child(10) ~ .tablet-auto {
12047 --f7-cols-per-row: 10;
12048 }
12049 .row .tablet-auto:nth-last-child(11),
12050 .row .tablet-auto:nth-last-child(11) ~ .tablet-auto {
12051 --f7-cols-per-row: 11;
12052 }
12053 .row .tablet-auto:nth-last-child(12),
12054 .row .tablet-auto:nth-last-child(12) ~ .tablet-auto {
12055 --f7-cols-per-row: 12;
12056 }
12057 .row .tablet-auto:nth-last-child(13),
12058 .row .tablet-auto:nth-last-child(13) ~ .tablet-auto {
12059 --f7-cols-per-row: 13;
12060 }
12061 .row .tablet-auto:nth-last-child(14),
12062 .row .tablet-auto:nth-last-child(14) ~ .tablet-auto {
12063 --f7-cols-per-row: 14;
12064 }
12065 .row .tablet-auto:nth-last-child(15),
12066 .row .tablet-auto:nth-last-child(15) ~ .tablet-auto {
12067 --f7-cols-per-row: 15;
12068 }
12069 .row .tablet-auto:nth-last-child(16),
12070 .row .tablet-auto:nth-last-child(16) ~ .tablet-auto {
12071 --f7-cols-per-row: 16;
12072 }
12073 .row .tablet-auto:nth-last-child(17),
12074 .row .tablet-auto:nth-last-child(17) ~ .tablet-auto {
12075 --f7-cols-per-row: 17;
12076 }
12077 .row .tablet-auto:nth-last-child(18),
12078 .row .tablet-auto:nth-last-child(18) ~ .tablet-auto {
12079 --f7-cols-per-row: 18;
12080 }
12081 .row .tablet-auto:nth-last-child(19),
12082 .row .tablet-auto:nth-last-child(19) ~ .tablet-auto {
12083 --f7-cols-per-row: 19;
12084 }
12085 .row .tablet-auto:nth-last-child(20),
12086 .row .tablet-auto:nth-last-child(20) ~ .tablet-auto {
12087 --f7-cols-per-row: 20;
12088 }
12089 .row .tablet-auto:nth-last-child(21),
12090 .row .tablet-auto:nth-last-child(21) ~ .tablet-auto {
12091 --f7-cols-per-row: 21;
12092 }
12093 .row .tablet-auto:nth-last-child(22),
12094 .row .tablet-auto:nth-last-child(22) ~ .tablet-auto {
12095 --f7-cols-per-row: 22;
12096 }
12097}
12098@media (min-width: 1025px) {
12099 .row .desktop-5 {
12100 --f7-cols-per-row: 20;
12101 }
12102 .row .desktop-10 {
12103 --f7-cols-per-row: 10;
12104 }
12105 .row .desktop-15 {
12106 --f7-cols-per-row: 6.66666667;
12107 }
12108 .row .desktop-20 {
12109 --f7-cols-per-row: 5;
12110 }
12111 .row .desktop-25 {
12112 --f7-cols-per-row: 4;
12113 }
12114 .row .desktop-30 {
12115 --f7-cols-per-row: 3.33333333;
12116 }
12117 .row .desktop-33 {
12118 --f7-cols-per-row: 3;
12119 }
12120 .row .desktop-35 {
12121 --f7-cols-per-row: 2.85714286;
12122 }
12123 .row .desktop-40 {
12124 --f7-cols-per-row: 2.5;
12125 }
12126 .row .desktop-45 {
12127 --f7-cols-per-row: 2.22222222;
12128 }
12129 .row .desktop-50 {
12130 --f7-cols-per-row: 2;
12131 }
12132 .row .desktop-55 {
12133 --f7-cols-per-row: 1.81818182;
12134 }
12135 .row .desktop-60 {
12136 --f7-cols-per-row: 1.66666667;
12137 }
12138 .row .desktop-65 {
12139 --f7-cols-per-row: 1.53846154;
12140 }
12141 .row .desktop-66 {
12142 --f7-cols-per-row: 1.5;
12143 }
12144 .row .desktop-70 {
12145 --f7-cols-per-row: 1.42857143;
12146 }
12147 .row .desktop-75 {
12148 --f7-cols-per-row: 1.33333333;
12149 }
12150 .row .desktop-80 {
12151 --f7-cols-per-row: 1.25;
12152 }
12153 .row .desktop-85 {
12154 --f7-cols-per-row: 1.17647059;
12155 }
12156 .row .desktop-90 {
12157 --f7-cols-per-row: 1.11111111;
12158 }
12159 .row .desktop-95 {
12160 --f7-cols-per-row: 1.05263158;
12161 }
12162 .row .desktop-100 {
12163 --f7-cols-per-row: 1;
12164 }
12165 .row .desktop-auto:nth-last-child(1),
12166 .row .desktop-auto:nth-last-child(1) ~ .desktop-auto {
12167 --f7-cols-per-row: 1;
12168 }
12169 .row .desktop-auto:nth-last-child(2),
12170 .row .desktop-auto:nth-last-child(2) ~ .desktop-auto {
12171 --f7-cols-per-row: 2;
12172 }
12173 .row .desktop-auto:nth-last-child(3),
12174 .row .desktop-auto:nth-last-child(3) ~ .desktop-auto {
12175 --f7-cols-per-row: 3;
12176 }
12177 .row .desktop-auto:nth-last-child(4),
12178 .row .desktop-auto:nth-last-child(4) ~ .desktop-auto {
12179 --f7-cols-per-row: 4;
12180 }
12181 .row .desktop-auto:nth-last-child(5),
12182 .row .desktop-auto:nth-last-child(5) ~ .desktop-auto {
12183 --f7-cols-per-row: 5;
12184 }
12185 .row .desktop-auto:nth-last-child(6),
12186 .row .desktop-auto:nth-last-child(6) ~ .desktop-auto {
12187 --f7-cols-per-row: 6;
12188 }
12189 .row .desktop-auto:nth-last-child(7),
12190 .row .desktop-auto:nth-last-child(7) ~ .desktop-auto {
12191 --f7-cols-per-row: 7;
12192 }
12193 .row .desktop-auto:nth-last-child(8),
12194 .row .desktop-auto:nth-last-child(8) ~ .desktop-auto {
12195 --f7-cols-per-row: 8;
12196 }
12197 .row .desktop-auto:nth-last-child(9),
12198 .row .desktop-auto:nth-last-child(9) ~ .desktop-auto {
12199 --f7-cols-per-row: 9;
12200 }
12201 .row .desktop-auto:nth-last-child(10),
12202 .row .desktop-auto:nth-last-child(10) ~ .desktop-auto {
12203 --f7-cols-per-row: 10;
12204 }
12205 .row .desktop-auto:nth-last-child(11),
12206 .row .desktop-auto:nth-last-child(11) ~ .desktop-auto {
12207 --f7-cols-per-row: 11;
12208 }
12209 .row .desktop-auto:nth-last-child(12),
12210 .row .desktop-auto:nth-last-child(12) ~ .desktop-auto {
12211 --f7-cols-per-row: 12;
12212 }
12213 .row .desktop-auto:nth-last-child(13),
12214 .row .desktop-auto:nth-last-child(13) ~ .desktop-auto {
12215 --f7-cols-per-row: 13;
12216 }
12217 .row .desktop-auto:nth-last-child(14),
12218 .row .desktop-auto:nth-last-child(14) ~ .desktop-auto {
12219 --f7-cols-per-row: 14;
12220 }
12221 .row .desktop-auto:nth-last-child(15),
12222 .row .desktop-auto:nth-last-child(15) ~ .desktop-auto {
12223 --f7-cols-per-row: 15;
12224 }
12225 .row .desktop-auto:nth-last-child(16),
12226 .row .desktop-auto:nth-last-child(16) ~ .desktop-auto {
12227 --f7-cols-per-row: 16;
12228 }
12229 .row .desktop-auto:nth-last-child(17),
12230 .row .desktop-auto:nth-last-child(17) ~ .desktop-auto {
12231 --f7-cols-per-row: 17;
12232 }
12233 .row .desktop-auto:nth-last-child(18),
12234 .row .desktop-auto:nth-last-child(18) ~ .desktop-auto {
12235 --f7-cols-per-row: 18;
12236 }
12237 .row .desktop-auto:nth-last-child(19),
12238 .row .desktop-auto:nth-last-child(19) ~ .desktop-auto {
12239 --f7-cols-per-row: 19;
12240 }
12241 .row .desktop-auto:nth-last-child(20),
12242 .row .desktop-auto:nth-last-child(20) ~ .desktop-auto {
12243 --f7-cols-per-row: 20;
12244 }
12245 .row .desktop-auto:nth-last-child(21),
12246 .row .desktop-auto:nth-last-child(21) ~ .desktop-auto {
12247 --f7-cols-per-row: 21;
12248 }
12249 .row .desktop-auto:nth-last-child(22),
12250 .row .desktop-auto:nth-last-child(22) ~ .desktop-auto {
12251 --f7-cols-per-row: 22;
12252 }
12253}
12254/* === Calendar/Datepicker === */
12255:root {
12256 --f7-calendar-height: 320px;
12257 --f7-calendar-sheet-landscape-height: 220px;
12258 --f7-calendar-sheet-bg-color: #fff;
12259 --f7-calendar-popover-width: 320px;
12260 --f7-calendar-popover-height: 320px;
12261 --f7-calendar-modal-height: 420px;
12262 --f7-calendar-modal-max-width: 380px;
12263 --f7-calendar-modal-border-radius: 4px;
12264 --f7-calendar-modal-bg-color: #fff;
12265 /*
12266 --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
12267 --f7-calendar-header-link-color: var(--f7-bars-link-color);
12268 --f7-calendar-header-text-color: var(--f7-bars-text-color);
12269 --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
12270 --f7-calendar-footer-border-color: var(--f7-bars-border-color);
12271 --f7-calendar-footer-link-color: var(--f7-bars-link-color);
12272 --f7-calendar-footer-text-color: var(--f7-bars-text-color);
12273 --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
12274 --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
12275 */
5d51ea26
DC
12276 --f7-calendar-footer-padding: 0 8px;
12277 --f7-calendar-week-header-font-size: 11px;
12278 --f7-calendar-day-text-color: #000;
12279 --f7-calendar-selected-text-color: #fff;
12280 /*
12281 --f7-calendar-selected-bg-color: var(--f7-theme-color);
12282 */
5309fbda
DC
12283 --f7-calendar-prev-next-text-color: #b8b8b8;
12284 --f7-calendar-disabled-text-color: #d4d4d4;
12285 --f7-calendar-event-dot-size: 4px;
12286 /*
12287 --f7-calendar-event-bg-color: var(--f7-theme-color);
12288 */
12289}
5d51ea26
DC
12290:root .theme-dark,
12291:root.theme-dark {
12292 --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
12293 --f7-calendar-modal-bg-color: #171717;
12294 --f7-calendar-sheet-bg-color: #171717;
12295}
5309fbda
DC
12296.ios {
12297 --f7-calendar-sheet-border-color: #929499;
12298 --f7-calendar-header-height: 44px;
12299 --f7-calendar-header-font-size: 17px;
12300 --f7-calendar-header-font-weight: 600;
12301 --f7-calendar-header-padding: 0 8px;
12302 --f7-calendar-footer-height: 44px;
12303 --f7-calendar-footer-font-size: 17px;
5309fbda 12304 --f7-calendar-week-header-height: 18px;
5309fbda
DC
12305 --f7-calendar-row-border-color: #c4c4c4;
12306 --f7-calendar-day-font-size: 15px;
5309fbda
DC
12307 --f7-calendar-today-text-color: #000;
12308 --f7-calendar-today-bg-color: #e3e3e3;
5309fbda
DC
12309 --f7-calendar-day-size: 30px;
12310}
12311.ios .theme-dark,
12312.ios.theme-dark {
5309fbda 12313 --f7-calendar-row-border-color: var(--f7-bars-border-color);
5309fbda
DC
12314 --f7-calendar-day-text-color: #fff;
12315 --f7-calendar-today-text-color: #fff;
12316 --f7-calendar-today-bg-color: #333;
12317}
12318.md {
12319 --f7-calendar-sheet-border-color: #ccc;
12320 --f7-calendar-header-height: 56px;
12321 --f7-calendar-header-font-size: 20px;
12322 --f7-calendar-header-font-weight: 400;
12323 --f7-calendar-header-padding: 0 24px;
12324 --f7-calendar-footer-height: 48px;
12325 --f7-calendar-footer-font-size: 14px;
5309fbda 12326 --f7-calendar-week-header-height: 24px;
5309fbda
DC
12327 --f7-calendar-row-border-color: transparent;
12328 --f7-calendar-day-font-size: 14px;
5309fbda
DC
12329 /*
12330 --f7-calendar-today-text-color: var(--f7-theme-color);
12331 */
12332 --f7-calendar-today-bg-color: none;
5309fbda
DC
12333 --f7-calendar-day-size: 32px;
12334}
12335.md .theme-dark,
12336.md.theme-dark {
5309fbda
DC
12337 --f7-calendar-day-text-color: rgba(255, 255, 255, 0.87);
12338}
5d51ea26
DC
12339.aurora {
12340 --f7-calendar-sheet-border-color: #ccc;
12341 --f7-calendar-header-height: 38px;
12342 --f7-calendar-header-font-size: 14px;
12343 --f7-calendar-header-font-weight: 600;
12344 --f7-calendar-header-padding: 0 8px;
12345 --f7-calendar-footer-height: 38px;
12346 --f7-calendar-footer-font-size: 14px;
12347 --f7-calendar-week-header-height: 18px;
12348 --f7-calendar-row-border-color: #e3e3e3;
12349 --f7-calendar-day-font-size: 13px;
12350 --f7-calendar-today-text-color: #000;
12351 --f7-calendar-today-bg-color: #e3e3e3;
12352 --f7-calendar-day-size: 30px;
12353}
12354.aurora .theme-dark,
12355.aurora.theme-dark {
12356 --f7-calendar-row-border-color: var(--f7-bars-border-color);
12357 --f7-calendar-day-text-color: #fff;
12358 --f7-calendar-today-text-color: #fff;
12359 --f7-calendar-today-bg-color: #333;
12360}
5309fbda
DC
12361.calendar {
12362 overflow: hidden;
12363 height: var(--f7-calendar-height);
12364 width: 100%;
12365 display: flex;
12366 flex-direction: column;
12367}
12368.calendar.modal-in {
12369 display: flex;
12370}
12371@media (orientation: landscape) and (max-height: 415px) {
12372 .calendar.calendar-sheet {
12373 height: var(--f7-calendar-sheet-landscape-height);
12374 }
12375 .calendar.calendar-modal {
12376 height: calc(100vh - var(--f7-navbar-height));
12377 }
12378}
12379.calendar.calendar-inline,
12380.calendar.calendar-popover .calendar {
12381 position: relative;
12382}
12383.calendar-sheet {
12384 --f7-sheet-border-color: var(--f7-calendar-sheet-border-color);
12385 background: var(--f7-calendar-sheet-bg-color);
12386}
12387.calendar-sheet:before {
12388 z-index: 600;
12389}
12390.calendar-sheet .sheet-modal-inner {
12391 margin-bottom: var(--f7-safe-area-bottom);
12392}
12393.calendar-sheet .toolbar:before,
12394.calendar-modal .toolbar:before,
12395.calendar-popover .toolbar:before {
12396 display: none;
12397}
12398.calendar-popover {
12399 width: var(--f7-calendar-popover-width);
12400}
12401.calendar-popover .calendar {
12402 height: var(--f7-calendar-popover-height);
12403 border-radius: var(--f7-popover-border-radius);
12404}
12405.calendar-header {
12406 width: 100%;
12407 position: relative;
12408 overflow: hidden;
12409 flex-shrink: 0;
12410 white-space: nowrap;
12411 text-overflow: ellipsis;
12412 box-sizing: border-box;
12413 padding: var(--f7-calendar-header-padding);
12414 background-color: var(--f7-calendar-header-bg-color, var(--f7-bars-bg-color));
12415 color: var(--f7-calendar-header-text-color, var(--f7-bars-text-color));
12416 height: var(--f7-calendar-header-height);
12417 line-height: var(--f7-calendar-header-height);
12418 font-size: var(--f7-calendar-header-font-size);
12419 font-weight: var(--f7-calendar-header-font-weight);
12420}
12421.calendar-header a {
12422 color: var(--f7-calendar-header-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
12423}
12424.calendar-footer {
12425 width: 100%;
12426 flex-shrink: 0;
12427 padding: var(--f7-calendar-footer-padding);
12428 background-color: var(--f7-calendar-footer-bg-color, var(--f7-bars-bg-color));
12429 color: var(--f7-calendar-footer-text-color, var(--f7-bars-text-color));
12430 height: var(--f7-calendar-footer-height);
12431 font-size: var(--f7-calendar-header-font-size);
12432 display: flex;
12433 justify-content: flex-end;
12434 box-sizing: border-box;
12435 align-items: center;
12436 position: relative;
12437}
12438.calendar-footer a {
12439 color: var(--f7-calendar-footer-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
12440}
12441.calendar-footer:before {
12442 content: '';
12443 position: absolute;
12444 background-color: var(--f7-calendar-footer-border-color, var(--f7-bars-border-color));
12445 display: block;
12446 z-index: 15;
12447 top: 0;
12448 right: auto;
12449 bottom: auto;
12450 left: 0;
12451 height: 1px;
12452 width: 100%;
12453 transform-origin: 50% 0%;
12454 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
12455}
12456.calendar-modal {
12457 position: absolute;
12458 height: var(--f7-calendar-modal-height);
12459 overflow: hidden;
12460 top: 50%;
12461 left: 50%;
12462 min-width: 300px;
12463 max-width: var(--f7-calendar-modal-max-width);
12464 transform: translate3d(-50%, 100%, 0);
12465 transition-property: transform;
12466 display: flex;
12467 z-index: 12000;
12468 background: var(--f7-calendar-modal-bg-color);
12469 width: 90%;
12470 border-radius: var(--f7-calendar-modal-border-radius);
12471 box-shadow: var(--f7-elevation-24);
12472}
12473.calendar-modal.modal-in,
12474.calendar-modal.modal-out {
12475 transition-duration: 400ms;
12476}
12477.calendar-modal.modal-in {
12478 transform: translate3d(-50%, -50%, 0);
12479}
12480.calendar-modal.modal-out {
12481 transform: translate3d(-50%, 100%, 0);
12482}
12483.calendar-week-header {
12484 display: flex;
12485 box-sizing: border-box;
12486 position: relative;
12487 font-size: var(--f7-calendar-week-header-font-size);
12488 background-color: var(--f7-calendar-week-header-bg-color, var(--f7-bars-bg-color));
12489 color: var(--f7-calendar-week-header-text-color, var(--f7-bars-text-color));
12490 height: var(--f7-calendar-week-header-height);
12491 padding-left: var(--f7-safe-area-left);
12492 padding-right: var(--f7-safe-area-right);
12493}
12494.calendar-week-header .calendar-week-day {
12495 flex-shrink: 1;
12496 width: calc(100% / 7);
12497 text-align: center;
12498 line-height: var(--f7-calendar-week-header-height);
12499}
12500.calendar-months {
12501 width: 100%;
12502 height: 100%;
12503 overflow: hidden;
12504 position: relative;
12505 flex-shrink: 10;
12506}
12507.calendar-months-wrapper {
12508 position: relative;
12509 width: 100%;
12510 height: 100%;
12511 transition: 300ms;
12512}
12513.calendar-month {
12514 display: flex;
12515 flex-direction: column;
12516 width: 100%;
12517 height: 100%;
12518 position: absolute;
12519 left: 0;
12520 top: 0;
12521}
12522.calendar-row {
12523 height: 16.66666667%;
12524 height: calc(100% / 6);
12525 display: flex;
12526 flex-shrink: 1;
12527 width: 100%;
12528 position: relative;
12529 box-sizing: border-box;
12530 padding-left: var(--f7-safe-area-left);
12531 padding-right: var(--f7-safe-area-right);
12532}
12533.calendar-row:before {
12534 content: '';
12535 position: absolute;
12536 background-color: var(--f7-calendar-row-border-color);
12537 display: block;
12538 z-index: 15;
12539 top: 0;
12540 right: auto;
12541 bottom: auto;
12542 left: 0;
12543 height: 1px;
12544 width: 100%;
12545 transform-origin: 50% 0%;
12546 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
12547}
12548.calendar-modal .calendar-months:first-child .calendar-row:first-child:before,
12549.calendar-popover .calendar-months:first-child .calendar-row:first-child:before {
12550 display: none !important;
12551}
12552.calendar-day {
12553 flex-shrink: 1;
12554 display: flex;
12555 justify-content: center;
12556 align-items: center;
12557 box-sizing: border-box;
12558 width: 14.28571429%;
12559 width: calc(100% / 7);
12560 text-align: center;
12561 cursor: pointer;
12562 z-index: 20;
12563 color: var(--f7-calendar-day-text-color);
12564 height: 100%;
12565 font-size: var(--f7-calendar-day-font-size);
12566}
12567.calendar-day.calendar-day-today .calendar-day-number {
12568 color: var(--f7-calendar-today-text-color, var(--f7-theme-color));
12569 background-color: var(--f7-calendar-today-bg-color);
12570}
12571.calendar-day.calendar-day-prev,
12572.calendar-day.calendar-day-next {
12573 color: var(--f7-calendar-prev-next-text-color);
12574}
12575.calendar-day.calendar-day-disabled {
12576 color: var(--f7-calendar-disabled-text-color);
12577 cursor: auto;
12578}
12579.calendar-day.calendar-day-selected .calendar-day-number {
12580 color: var(--f7-calendar-selected-text-color);
12581 background-color: var(--f7-calendar-selected-bg-color, var(--f7-theme-color));
12582}
12583.calendar-day .calendar-day-number {
12584 display: inline-block;
12585 border-radius: 50%;
12586 position: relative;
12587 width: var(--f7-calendar-day-size);
12588 height: var(--f7-calendar-day-size);
12589 line-height: var(--f7-calendar-day-size);
12590}
12591.calendar-day .calendar-day-events {
12592 position: absolute;
12593 display: flex;
12594 left: 0;
12595 width: 100%;
12596 top: 100%;
12597 align-items: center;
12598 justify-content: center;
12599 margin-top: 1px;
12600}
12601.calendar-day .calendar-day-event {
12602 width: var(--f7-calendar-event-dot-size);
12603 height: var(--f7-calendar-event-dot-size);
12604 border-radius: calc(var(--f7-calendar-event-dot-size) / 2);
12605 background-color: var(--f7-calendar-event-bg-color);
12606}
12607.calendar-day .calendar-day-event + .calendar-day-event {
12608 margin-left: 2px;
12609}
12610.calendar-range .calendar-day.calendar-day-selected {
12611 align-items: stretch;
12612 align-content: stretch;
12613}
12614.calendar-range .calendar-day.calendar-day-selected .calendar-day-number {
12615 width: 100%;
12616 border-radius: 0;
12617 height: auto;
12618 text-align: center;
12619 display: flex;
12620 align-items: center;
12621 justify-content: center;
12622}
12623.calendar-month-selector,
12624.calendar-year-selector {
12625 display: flex;
12626 justify-content: space-between;
12627 align-items: center;
12628 width: 50%;
12629 max-width: 200px;
12630 flex-shrink: 10;
5d51ea26
DC
12631 margin-left: auto;
12632 margin-right: auto;
5309fbda
DC
12633}
12634.calendar-month-selector .calendar-day-number,
12635.calendar-year-selector .calendar-day-number {
12636 flex-shrink: 1;
12637 position: relative;
12638 overflow: hidden;
12639 text-overflow: ellipsis;
12640}
12641.calendar-month-selector a.icon-only,
12642.calendar-year-selector a.icon-only {
12643 min-width: 36px;
12644}
12645/* === Picker === */
12646:root {
12647 --f7-picker-height: 260px;
12648 --f7-picker-inline-height: 200px;
12649 --f7-picker-popover-height: 200px;
12650 --f7-picker-popover-width: 280px;
12651 --f7-picker-landscape-height: 200px;
12652 --f7-picker-item-height: 36px;
12653}
12654.ios {
12655 --f7-picker-column-font-size: 24px;
12656 --f7-picker-divider-text-color: #000;
12657 --f7-picker-item-text-color: #707274;
12658 --f7-picker-item-selected-text-color: #000;
12659 --f7-picker-item-selected-border-color: #a8abb0;
12660}
12661.ios .theme-dark,
12662.ios.theme-dark {
12663 --f7-picker-divider-text-color: #fff;
12664 --f7-picker-item-selected-text-color: #fff;
5d51ea26 12665 --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
5309fbda
DC
12666}
12667.md {
12668 --f7-picker-column-font-size: 20px;
12669 --f7-picker-divider-text-color: rgba(0, 0, 0, 0.87);
12670 --f7-picker-item-text-color: inherit;
12671 --f7-picker-item-selected-text-color: inherit;
12672 --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.15);
12673}
12674.md .theme-dark,
12675.md.theme-dark {
12676 --f7-picker-divider-text-color: rgba(255, 255, 255, 0.87);
12677 --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.15);
12678}
5d51ea26
DC
12679.aurora {
12680 --f7-picker-column-font-size: 16px;
12681 --f7-picker-divider-text-color: #000;
12682 --f7-picker-item-height: 28px;
12683 --f7-picker-item-text-color: #888;
12684 --f7-picker-item-selected-text-color: #000;
12685 --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.12);
12686}
12687.aurora .theme-dark,
12688.aurora.theme-dark {
12689 --f7-picker-divider-text-color: #fff;
12690 --f7-picker-item-selected-text-color: #fff;
12691 --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
12692}
5309fbda
DC
12693.picker {
12694 width: 100%;
12695 height: var(--f7-picker-height);
12696}
12697.picker.picker-inline {
12698 height: var(--f7-picker-inline-height);
12699}
12700.popover .picker {
12701 height: var(--f7-picker-popover-height);
12702}
12703@media (orientation: landscape) and (max-height: 415px) {
12704 .picker:not(.picker-inline) {
12705 height: var(--f7-picker-landscape-height);
12706 }
12707}
12708.picker-popover {
12709 width: var(--f7-picker-popover-width);
12710}
12711.picker-popover .toolbar {
12712 background: none;
12713 border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
12714}
12715.picker-popover .toolbar:before {
12716 display: none !important;
12717}
12718.picker-popover .toolbar + .picker-columns {
12719 height: calc(100% - var(--f7-toolbar-height));
12720}
12721.picker-columns {
12722 display: flex;
12723 overflow: hidden;
12724 justify-content: center;
12725 padding: 0;
12726 text-align: right;
12727 height: 100%;
12728 position: relative;
12729 -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
12730 font-size: var(--f7-picker-column-font-size);
12731}
12732.picker-column {
12733 position: relative;
12734 max-height: 100%;
12735}
12736.picker-column.picker-column-first:before,
12737.picker-column.picker-column-last:after {
12738 height: 100%;
12739 width: 100vw;
12740 position: absolute;
12741 content: '';
12742 top: 0;
12743}
12744.picker-column.picker-column-first:before {
12745 left: 100%;
12746}
12747.picker-column.picker-column-last:after {
12748 right: 100%;
12749}
12750.picker-column.picker-column-left {
12751 text-align: left;
12752}
12753.picker-column.picker-column-center {
12754 text-align: center;
12755}
12756.picker-column.picker-column-right {
12757 text-align: right;
12758}
12759.picker-column.picker-column-divider {
12760 display: flex;
12761 align-items: center;
12762 color: var(--f7-picker-divider-text-color);
12763}
12764.picker-items {
12765 transition: 300ms;
12766 transition-timing-function: ease-out;
12767}
12768.picker-item {
12769 height: var(--f7-picker-item-height);
12770 line-height: var(--f7-picker-item-height);
12771 white-space: nowrap;
12772 position: relative;
12773 overflow: hidden;
12774 text-overflow: ellipsis;
12775 left: 0;
12776 top: 0;
12777 width: 100%;
12778 box-sizing: border-box;
12779 transition: 300ms;
12780 color: var(--f7-picker-item-text-color);
5d51ea26 12781 cursor: pointer;
5309fbda
DC
12782}
12783.picker-item span {
12784 padding: 0 10px;
12785}
12786.picker-column-absolute .picker-item {
12787 position: absolute;
12788}
12789.picker-item.picker-item-far {
12790 pointer-events: none;
12791}
12792.picker-item.picker-item-selected {
12793 color: var(--f7-picker-item-selected-text-color);
12794 transform: translate3d(0, 0, 0) rotateX(0deg);
12795}
12796.picker-center-highlight {
12797 height: var(--f7-picker-item-height);
12798 box-sizing: border-box;
12799 position: absolute;
12800 left: 0;
12801 width: 100%;
12802 top: 50%;
12803 margin-top: calc(-1 * var(--f7-picker-item-height) / 2);
12804 pointer-events: none;
12805}
12806.picker-center-highlight:before {
12807 content: '';
12808 position: absolute;
12809 background-color: var(--f7-picker-item-selected-border-color);
12810 display: block;
12811 z-index: 15;
12812 top: 0;
12813 right: auto;
12814 bottom: auto;
12815 left: 0;
12816 height: 1px;
12817 width: 100%;
12818 transform-origin: 50% 0%;
12819 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
12820}
12821.picker-center-highlight:after {
12822 content: '';
12823 position: absolute;
12824 background-color: var(--f7-picker-item-selected-border-color);
12825 display: block;
12826 z-index: 15;
12827 top: auto;
12828 right: auto;
12829 bottom: 0;
12830 left: 0;
12831 height: 1px;
12832 width: 100%;
12833 transform-origin: 50% 100%;
12834 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
12835}
12836.picker-3d .picker-columns {
12837 overflow: hidden;
12838 perspective: 1200px;
12839}
12840.picker-3d .picker-column,
12841.picker-3d .picker-items,
12842.picker-3d .picker-item {
12843 transform-style: preserve-3d;
12844}
12845.picker-3d .picker-column {
12846 overflow: visible;
12847}
12848.picker-3d .picker-item {
12849 transform-origin: center center -110px;
12850 -webkit-backface-visibility: hidden;
12851 backface-visibility: hidden;
12852 transition-timing-function: ease-out;
12853}
12854/* === Infinite === */
12855.infinite-scroll-preloader {
12856 margin-left: auto;
12857 margin-right: auto;
12858 text-align: center;
12859}
12860.infinite-scroll-preloader.preloader {
12861 display: block;
12862}
12863.ios .infinite-scroll-preloader {
12864 margin-top: 35px;
12865 margin-bottom: 35px;
12866}
12867.ios .infinite-scroll-preloader .preloader,
12868.ios .infinite-scroll-preloader.preloader {
12869 width: 27px;
12870 height: 27px;
12871}
12872.md .infinite-scroll-preloader {
12873 margin-top: 32px;
12874 margin-bottom: 32px;
12875}
5d51ea26
DC
12876.aurora .infinite-scroll-preloader {
12877 margin-top: 15px;
12878 margin-bottom: 15px;
12879}
5309fbda
DC
12880/* === PTR === */
12881.ios {
12882 --f7-ptr-preloader-size: 20px;
12883 --f7-ptr-size: 44px;
12884}
12885.md {
12886 --f7-ptr-preloader-size: 22px;
12887 --f7-ptr-size: 40px;
12888}
5d51ea26
DC
12889.aurora {
12890 --f7-ptr-preloader-size: 20px;
12891 --f7-ptr-size: 38px;
12892}
5309fbda
DC
12893.ptr-preloader {
12894 position: relative;
12895 top: var(--f7-ptr-top, 0);
12896 height: var(--f7-ptr-size);
12897}
12898.ptr-preloader .preloader {
12899 position: absolute;
12900 left: 50%;
12901 width: var(--f7-ptr-preloader-size);
12902 height: var(--f7-ptr-preloader-size);
12903 margin-left: calc(-1 * var(--f7-ptr-preloader-size) / 2);
12904 margin-top: calc(-1 * var(--f7-ptr-preloader-size) / 2);
12905 top: 50%;
12906 visibility: hidden;
12907}
12908.ptr-bottom .ptr-preloader {
12909 top: auto;
12910 bottom: 0;
12911 position: fixed;
12912}
12913.ios .ptr-preloader {
12914 margin-top: calc(-1 * var(--f7-ptr-size));
12915 width: 100%;
12916 left: 0;
12917}
12918.ios .ptr-arrow {
12919 position: absolute;
12920 left: 50%;
12921 top: 50%;
12922 background: no-repeat center;
12923 z-index: 10;
12924 transform: rotate(0deg) translate3d(0, 0, 0);
12925 transition-duration: 300ms;
12926 transition-property: transform;
12927 width: 12px;
12928 height: 20px;
12929 margin-left: -6px;
12930 margin-top: -10px;
12931 visibility: visible;
12932 color: var(--f7-preloader-color);
12933}
12934.ios .ptr-arrow:after {
12935 font-family: 'framework7-core-icons';
12936 font-weight: normal;
12937 font-style: normal;
12938 line-height: 1;
12939 letter-spacing: normal;
12940 text-transform: none;
12941 white-space: nowrap;
12942 word-wrap: normal;
12943 direction: ltr;
12944 -webkit-font-smoothing: antialiased;
12945 text-rendering: optimizeLegibility;
12946 -moz-osx-font-smoothing: grayscale;
12947 -moz-font-feature-settings: "liga";
12948 font-feature-settings: "liga";
12949 text-align: center;
12950 display: block;
12951 width: 100%;
12952 height: 100%;
12953 font-size: 20px;
12954 width: 12px;
12955 height: 20px;
12956 line-height: 20px;
12957 font-size: 10px;
12958 content: 'ptr_arrow_ios';
12959}
12960.ios .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
12961 animation: none;
12962}
12963.ios .ptr-transitioning,
12964.ios .ptr-refreshing {
12965 transition-duration: 300ms;
12966 transition-property: transform;
12967}
12968.ios .ptr-refreshing {
12969 transform: translate3d(0, var(--f7-ptr-size), 0);
12970}
12971.ios .ptr-refreshing .ptr-arrow {
12972 visibility: hidden;
12973}
12974.ios .ptr-refreshing .ptr-preloader .preloader {
12975 visibility: visible;
12976}
12977.ios .ptr-pull-up .ptr-arrow {
12978 transform: rotate(180deg) translate3d(0, 0, 0);
12979}
12980.ios .ptr-no-navbar {
12981 margin-top: calc(-1 * var(--f7-ptr-size));
12982 height: calc(100% + var(--f7-ptr-size));
12983}
12984.ios .ptr-no-navbar .ptr-preloader {
12985 margin-top: 0;
12986}
12987.ios .ptr-bottom .ptr-preloader {
12988 margin-top: 0;
12989 margin-bottom: calc(-1 * var(--f7-ptr-size));
12990}
12991.ios .ptr-bottom.ptr-transitioning > *,
12992.ios .ptr-bottom.ptr-refreshing > * {
12993 transition-duration: 300ms;
12994 transition-property: transform;
12995}
12996.ios .ptr-bottom.ptr-refreshing {
12997 transform: none;
12998}
12999.ios .ptr-bottom.ptr-refreshing > * {
13000 transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
13001}
13002.ios .ptr-bottom .ptr-arrow {
13003 transform: rotate(180deg) translate3d(0, 0, 0);
13004}
13005.ios .ptr-bottom.ptr-pull-up .ptr-arrow {
13006 transform: rotate(0deg) translate3d(0, 0, 0);
13007}
13008.md {
13009 --f7-ptr-top: -4px;
13010}
13011.md .ptr-preloader {
5309fbda
DC
13012 width: var(--f7-ptr-size);
13013 border-radius: 50%;
13014 background: #fff;
5309fbda
DC
13015 margin-top: calc(-1 * var(--f7-ptr-size));
13016 z-index: 100;
13017 box-shadow: var(--f7-elevation-1);
5d51ea26
DC
13018 right: 50%;
13019 margin-right: calc(-1 * var(--f7-ptr-size) / 2);
5309fbda
DC
13020}
13021.md .ptr-preloader .preloader .preloader-inner-gap,
13022.md .ptr-preloader .preloader .preloader-inner-half-circle {
13023 border-width: 3px;
13024}
13025.md .ptr-arrow {
13026 width: 22px;
13027 height: 22px;
13028 box-sizing: border-box;
13029 border: 3px solid var(--f7-preloader-color);
13030 position: absolute;
13031 left: 50%;
13032 top: 50%;
13033 margin-left: -11px;
13034 margin-top: -11px;
13035 border-left-color: transparent;
13036 border-radius: 50%;
13037 opacity: 1;
13038 transform: rotate(150deg);
13039}
13040.md .ptr-arrow:after {
13041 content: '';
13042 width: 0px;
13043 height: 0px;
13044 position: absolute;
13045 left: -5px;
13046 bottom: 0px;
13047 border-bottom-width: 6px;
13048 border-bottom-style: solid;
13049 border-bottom-color: inherit;
13050 border-left: 5px solid transparent;
13051 border-right: 5px solid transparent;
13052 transform: rotate(-40deg);
13053}
13054.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader,
13055.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader * {
13056 animation: none;
13057}
13058.md .ptr-refreshing .ptr-preloader .preloader,
13059.md .ptr-pull-up .ptr-preloader .preloader {
13060 visibility: visible;
13061}
13062.md .ptr-refreshing .ptr-arrow,
13063.md .ptr-pull-up .ptr-arrow {
13064 visibility: hidden;
13065}
13066.md .ptr-refreshing .ptr-preloader {
13067 transform: translate3d(0, 66px, 0);
13068}
13069.md .ptr-transitioning .ptr-arrow {
13070 transition: 300ms;
13071}
13072.md .ptr-pull-up .ptr-arrow {
13073 transition: 400ms;
13074 transform: rotate(620deg) !important;
13075 opacity: 0;
13076}
13077.md .ptr-transitioning .ptr-preloader,
13078.md .ptr-refreshing .ptr-preloader {
13079 transition-duration: 300ms;
13080 transition-property: transform;
13081}
13082.md .ptr-bottom .ptr-preloader {
13083 margin-top: 0;
13084 margin-bottom: calc(-1 * var(--f7-ptr-size) - 4px);
13085}
13086.md .ptr-bottom.ptr-refreshing .ptr-preloader {
13087 transform: translate3d(0, -66px, 0);
13088}
5d51ea26
DC
13089.aurora .ptr-preloader {
13090 margin-top: calc(-1 * var(--f7-ptr-size));
13091 width: 100%;
13092 left: 0;
13093}
13094.aurora .ptr-arrow {
13095 position: absolute;
13096 left: 50%;
13097 top: 50%;
13098 background: no-repeat center;
13099 z-index: 10;
13100 transform: rotate(0deg) translate3d(0, 0, 0);
13101 transition-duration: 300ms;
13102 transition-property: transform;
13103 width: 12px;
13104 height: 20px;
13105 margin-left: -6px;
13106 margin-top: -10px;
13107 visibility: visible;
13108 color: var(--f7-preloader-color);
13109}
13110.aurora .ptr-arrow:after {
13111 font-family: 'framework7-core-icons';
13112 font-weight: normal;
13113 font-style: normal;
13114 line-height: 1;
13115 letter-spacing: normal;
13116 text-transform: none;
13117 white-space: nowrap;
13118 word-wrap: normal;
13119 direction: ltr;
13120 -webkit-font-smoothing: antialiased;
13121 text-rendering: optimizeLegibility;
13122 -moz-osx-font-smoothing: grayscale;
13123 -moz-font-feature-settings: "liga";
13124 font-feature-settings: "liga";
13125 text-align: center;
13126 display: block;
13127 width: 100%;
13128 height: 100%;
13129 font-size: 20px;
13130 width: 12px;
13131 height: 20px;
13132 line-height: 20px;
13133 font-size: 8px;
13134 content: 'ptr_arrow_ios';
13135}
13136.aurora .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
13137 animation: none;
13138}
13139.aurora .ptr-transitioning,
13140.aurora .ptr-refreshing {
13141 transition-duration: 300ms;
13142 transition-property: transform;
13143}
13144.aurora .ptr-refreshing {
13145 transform: translate3d(0, var(--f7-ptr-size), 0);
13146}
13147.aurora .ptr-refreshing .ptr-arrow {
13148 visibility: hidden;
13149}
13150.aurora .ptr-refreshing .ptr-preloader .preloader {
13151 visibility: visible;
13152}
13153.aurora .ptr-pull-up .ptr-arrow {
13154 transform: rotate(180deg) translate3d(0, 0, 0);
13155}
13156.aurora .ptr-no-navbar {
13157 margin-top: calc(-1 * var(--f7-ptr-size));
13158 height: calc(100% + var(--f7-ptr-size));
13159}
13160.aurora .ptr-no-navbar .ptr-preloader {
13161 margin-top: 0;
13162}
13163.aurora .ptr-bottom .ptr-preloader {
13164 margin-top: 0;
13165 margin-bottom: calc(-1 * var(--f7-ptr-size));
13166}
13167.aurora .ptr-bottom.ptr-transitioning > *,
13168.aurora .ptr-bottom.ptr-refreshing > * {
13169 transition-duration: 300ms;
13170 transition-property: transform;
13171}
13172.aurora .ptr-bottom.ptr-refreshing {
13173 transform: none;
13174}
13175.aurora .ptr-bottom.ptr-refreshing > * {
13176 transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
13177}
13178.aurora .ptr-bottom .ptr-arrow {
13179 transform: rotate(180deg) translate3d(0, 0, 0);
13180}
13181.aurora .ptr-bottom.ptr-pull-up .ptr-arrow {
13182 transform: rotate(0deg) translate3d(0, 0, 0);
13183}
5309fbda
DC
13184/* === Images Lazy Loading === */
13185.lazy-loaded.lazy-fade-in {
13186 animation: lazyFadeIn 600ms;
13187}
13188@keyframes lazyFadeIn {
13189 from {
13190 opacity: 0;
13191 }
13192 to {
13193 opacity: 1;
13194 }
13195}
13196/* === Data Table === */
13197:root {
13198 --f7-table-head-font-size: 12px;
13199 --f7-table-body-font-size: 14px;
13200 --f7-table-footer-font-size: 12px;
13201 --f7-table-input-height: 24px;
13202 --f7-table-input-font-size: 14px;
13203 --f7-table-collapsible-cell-padding: 15px;
5d51ea26
DC
13204 --f7-table-link-icon-only-icon-size: 20px;
13205 --f7-table-sortable-icon-color: #000;
13206}
13207:root .theme-dark,
13208:root.theme-dark {
13209 --f7-table-cell-border-color: #282829;
13210 --f7-table-sortable-icon-color: #fff;
13211 --f7-table-input-text-color: #fff;
5309fbda
DC
13212}
13213.ios {
13214 --f7-table-head-font-weight: 600;
13215 --f7-table-head-text-color: #8e8e93;
13216 --f7-table-head-cell-height: 44px;
13217 --f7-table-head-icon-size: 18px;
13218 --f7-table-body-cell-height: 44px;
13219 --f7-table-cell-border-color: #c8c7cc;
13220 --f7-table-cell-padding-vertical: 0px;
13221 --f7-table-cell-padding-horizontal: 15px;
13222 --f7-table-edge-cell-padding-horizontal: 15px;
13223 --f7-table-label-cell-padding-horizontal: 15px;
13224 --f7-table-checkbox-cell-width: 22px;
13225 /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
13226 --f7-table-selected-row-bg-color: #f7f7f8;
13227 /* --f7-table-actions-link-color: var(--f7-theme-color); */
13228 --f7-table-title-font-size: 17px;
13229 --f7-table-title-font-weight: 600;
13230 --f7-table-card-header-height: 64px;
13231 --f7-table-footer-height: 44px;
13232 --f7-table-footer-text-color: #8e8e93;
5309fbda
DC
13233 --f7-table-input-text-color: #000;
13234}
13235.ios .theme-dark,
13236.ios.theme-dark {
5309fbda 13237 --f7-table-selected-row-bg-color: #363636;
5309fbda
DC
13238}
13239.md {
13240 --f7-table-head-font-weight: 500;
13241 --f7-table-head-text-color: rgba(0, 0, 0, 0.54);
13242 --f7-table-head-cell-height: 56px;
13243 --f7-table-head-icon-size: 16px;
13244 --f7-table-body-cell-height: 48px;
13245 --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
13246 --f7-table-cell-padding-vertical: 0px;
13247 --f7-table-cell-padding-horizontal: 28px;
13248 --f7-table-edge-cell-padding-horizontal: 24px;
13249 --f7-table-label-cell-padding-horizontal: 24px;
13250 --f7-table-checkbox-cell-width: 18px;
13251 --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
13252 --f7-table-selected-row-bg-color: #f5f5f5;
13253 --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
13254 --f7-table-title-font-size: 20px;
13255 --f7-table-title-font-weight: 400;
13256 --f7-table-card-header-height: 64px;
13257 --f7-table-footer-height: 56px;
13258 --f7-table-footer-text-color: rgba(0, 0, 0, 0.54);
5309fbda
DC
13259 --f7-table-input-text-color: #212121;
13260}
13261.md .theme-dark,
13262.md.theme-dark {
13263 --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
13264 --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
5309fbda 13265 --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.05);
5309fbda
DC
13266 --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
13267 --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
5d51ea26
DC
13268}
13269.aurora {
13270 --f7-table-link-icon-only-icon-size: 18px;
13271 --f7-table-head-font-weight: 400;
13272 --f7-table-head-text-color: rgba(0, 0, 0, 0.6);
13273 --f7-table-head-cell-height: 32px;
13274 --f7-table-head-icon-size: 18px;
13275 --f7-table-body-cell-height: 32px;
13276 --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
13277 --f7-table-cell-padding-vertical: 5px;
13278 --f7-table-cell-padding-horizontal: 10px;
13279 --f7-table-edge-cell-padding-horizontal: 15px;
13280 --f7-table-label-cell-padding-horizontal: 15px;
13281 --f7-table-checkbox-cell-width: 22px;
13282 /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
13283 --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
13284 /* --f7-table-actions-link-color: var(--f7-theme-color); */
13285 --f7-table-title-font-size: 14px;
13286 --f7-table-title-font-weight: 600;
13287 --f7-table-card-header-height: 42px;
13288 --f7-table-footer-height: 32px;
13289 --f7-table-footer-text-color: rgba(0, 0, 0, 0.5);
13290 --f7-table-input-text-color: #000;
13291}
13292.aurora .theme-dark,
13293.aurora.theme-dark {
13294 --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.03);
13295 --f7-table-head-text-color: rgba(255, 255, 255, 0.52);
13296 --f7-table-footer-text-color: rgba(255, 255, 255, 0.52);
5309fbda
DC
13297}
13298.data-table {
13299 overflow-x: auto;
13300}
5d51ea26
DC
13301.data-table table,
13302table.data-table {
5309fbda
DC
13303 width: 100%;
13304 border: none;
13305 padding: 0;
13306 margin: 0;
13307 border-collapse: collapse;
13308 text-align: right;
13309}
13310.data-table thead th,
13311.data-table thead td {
13312 font-size: var(--f7-table-head-font-size);
13313 font-weight: var(--f7-table-head-font-weight);
13314 overflow: hidden;
13315 white-space: nowrap;
13316 text-overflow: ellipsis;
13317 line-height: 16px;
13318 height: var(--f7-table-head-cell-height);
13319}
13320.data-table thead th:not(.sortable-cell-active),
13321.data-table thead td:not(.sortable-cell-active) {
13322 color: var(--f7-table-head-text-color);
13323}
13324.data-table thead i.icon,
13325.data-table thead i.f7-icons,
13326.data-table thead i.material-icons {
13327 vertical-align: top;
13328 font-size: var(--f7-table-head-icon-size);
13329 width: var(--f7-table-head-icon-size);
13330 height: var(--f7-table-head-icon-size);
13331}
13332.data-table tbody {
13333 font-size: var(--f7-table-body-font-size);
13334}
13335.data-table tbody th,
13336.data-table tbody td {
13337 height: var(--f7-table-body-cell-height);
13338}
13339.data-table tbody tr.data-table-row-selected,
13340.device-desktop .data-table tbody tr:hover {
13341 background: var(--f7-table-selected-row-bg-color);
13342}
5d51ea26
DC
13343.data-table tbody td:before,
13344.data-table tbody th:before {
5309fbda
DC
13345 content: '';
13346 position: absolute;
13347 background-color: var(--f7-table-cell-border-color);
13348 display: block;
13349 z-index: 15;
13350 top: 0;
13351 right: auto;
13352 bottom: auto;
13353 left: 0;
13354 height: 1px;
13355 width: 100%;
13356 transform-origin: 50% 0%;
13357 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
13358}
13359.data-table th,
13360.data-table td {
13361 --f7-table-cell-padding-left: var(--f7-table-cell-padding-horizontal);
13362 --f7-table-cell-padding-right: var(--f7-table-cell-padding-horizontal);
13363 padding-top: var(--f7-table-cell-padding-vertical);
13364 padding-bottom: var(--f7-table-cell-padding-vertical);
13365 padding-left: var(--f7-table-cell-padding-left);
13366 padding-right: var(--f7-table-cell-padding-right);
13367 position: relative;
13368 box-sizing: border-box;
13369}
13370.data-table th:first-child,
13371.data-table td:first-child {
13372 --f7-table-cell-padding-right: var(--f7-table-edge-cell-padding-horizontal);
13373}
13374.data-table th:last-child,
13375.data-table td:last-child {
13376 --f7-table-cell-padding-left: var(--f7-table-edge-cell-padding-horizontal);
13377}
13378.data-table th.label-cell,
13379.data-table td.label-cell {
13380 --f7-table-cell-padding-left: var(--f7-table-label-cell-padding-horizontal);
13381 --f7-table-cell-padding-right: var(--f7-table-label-cell-padding-horizontal);
13382}
13383.data-table th.numeric-cell,
13384.data-table td.numeric-cell {
13385 text-align: left;
13386}
13387.data-table th.checkbox-cell,
13388.data-table td.checkbox-cell {
13389 overflow: visible;
13390 width: var(--f7-table-checkbox-cell-width);
13391}
13392.data-table th.checkbox-cell label + span,
13393.data-table td.checkbox-cell label + span {
13394 margin-right: 8px;
13395}
13396.data-table th.checkbox-cell:first-child,
13397.data-table td.checkbox-cell:first-child {
13398 padding-left: calc(var(--f7-table-cell-padding-left) / 2);
13399}
13400.data-table th.checkbox-cell:first-child + td,
13401.data-table td.checkbox-cell:first-child + td,
13402.data-table th.checkbox-cell:first-child + th,
13403.data-table td.checkbox-cell:first-child + th {
13404 padding-right: calc(var(--f7-table-cell-padding-right) / 2);
13405}
13406.data-table th.checkbox-cell:last-child,
13407.data-table td.checkbox-cell:last-child {
13408 padding-right: calc(var(--f7-table-cell-padding-right) / 2);
13409}
13410.data-table th.actions-cell,
13411.data-table td.actions-cell {
13412 text-align: left;
13413 white-space: nowrap;
13414}
13415.data-table th.actions-cell a.link,
13416.data-table td.actions-cell a.link {
13417 color: var(--f7-table-actions-cell-link-color, var(--f7-theme-color));
13418}
13419.data-table th a.icon-only,
13420.data-table td a.icon-only,
13421.card .data-table th a.icon-only,
13422.card .data-table td a.icon-only,
13423.card.data-table th a.icon-only,
13424.card.data-table td a.icon-only {
13425 display: inline-block;
13426 vertical-align: middle;
13427 text-align: center;
13428 font-size: 0;
13429 min-width: 0;
13430}
13431.data-table th a.icon-only i,
13432.data-table td a.icon-only i,
13433.card .data-table th a.icon-only i,
13434.card .data-table td a.icon-only i,
13435.card.data-table th a.icon-only i,
13436.card.data-table td a.icon-only i {
5d51ea26 13437 font-size: var(--f7-table-link-icon-only-icon-size);
5309fbda
DC
13438 vertical-align: middle;
13439}
13440.data-table .sortable-cell:not(.input-cell) {
13441 cursor: pointer;
13442 position: relative;
13443}
13444.data-table .sortable-cell.input-cell .table-head-label {
13445 cursor: pointer;
13446 position: relative;
13447}
13448.data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after,
13449.data-table .sortable-cell.numeric-cell:not(.input-cell):before,
13450.data-table .sortable-cell:not(.numeric-cell).input-cell > .table-head-label:after,
13451.data-table .sortable-cell.numeric-cell.input-cell > .table-head-label:before {
13452 content: 'arrow_bottom_md';
13453 font-family: 'framework7-core-icons';
13454 font-weight: normal;
13455 font-style: normal;
13456 line-height: 1;
13457 letter-spacing: normal;
13458 text-transform: none;
13459 white-space: nowrap;
13460 word-wrap: normal;
13461 direction: ltr;
13462 -webkit-font-smoothing: antialiased;
13463 text-rendering: optimizeLegibility;
13464 -moz-osx-font-smoothing: grayscale;
13465 -moz-font-feature-settings: "liga";
13466 font-feature-settings: "liga";
13467 text-align: center;
13468 display: block;
13469 width: 100%;
13470 height: 100%;
13471 font-size: 20px;
13472 display: inline-block;
13473 vertical-align: top;
13474 width: 16px;
13475 height: 16px;
13476 color: var(--f7-table-sortable-icon-color);
13477 font-size: 13px;
13478 line-height: 16px;
13479 transition-duration: 300ms;
13480 transform: rotate(0);
13481 opacity: 0;
13482}
13483.device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:after,
13484.device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:after,
13485.device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:before,
13486.device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before {
13487 opacity: 0.54;
13488}
13489.data-table .sortable-cell.sortable-cell-active:after,
13490.data-table .sortable-cell.sortable-cell-active .table-head-label:after,
13491.data-table .sortable-cell.sortable-cell-active:before,
13492.data-table .sortable-cell.sortable-cell-active .table-head-label:before {
13493 opacity: 0.87 !important;
13494}
13495.data-table .sortable-cell.sortable-desc:after,
13496.data-table .sortable-cell.sortable-desc:after,
13497.data-table .table-head-label:after,
13498.data-table .sortable-cell.sortable-desc:before,
13499.data-table .sortable-cell.sortable-desc:before,
13500.data-table .table-head-label:before {
13501 transform: rotate(180deg) !important;
13502}
13503.data-table.card .card-header,
13504.card .data-table .card-header,
13505.data-table.card .card-footer,
13506.card .data-table .card-footer {
13507 padding-left: var(--f7-table-edge-cell-padding-horizontal);
13508 padding-right: var(--f7-table-edge-cell-padding-horizontal);
13509}
13510.data-table.card .card-header,
13511.card .data-table .card-header {
5d51ea26 13512 min-height: var(--f7-table-card-header-height);
5309fbda
DC
13513}
13514.data-table.card .card-content,
13515.card .data-table .card-content {
13516 overflow-x: auto;
13517}
13518.data-table.card .card-footer,
13519.card .data-table .card-footer {
5d51ea26 13520 min-height: var(--f7-table-footer-height);
5309fbda
DC
13521}
13522.data-table .data-table-title {
13523 font-size: var(--f7-table-title-font-size);
13524 font-weight: var(--f7-table-title-font-weight);
13525}
13526.data-table .data-table-links,
13527.data-table .data-table-actions {
13528 display: flex;
13529}
13530.data-table .data-table-links .button {
13531 min-width: 64px;
13532}
13533.data-table .data-table-actions {
13534 margin-right: auto;
13535 align-items: center;
13536}
13537.data-table .data-table-actions a.link {
13538 color: var(--f7-table-actions-link-color, var(--f7-theme-color));
13539 min-width: 0;
13540}
13541.data-table .data-table-actions a.link.icon-only {
13542 line-height: 1;
13543 justify-content: center;
13544 padding: 0;
13545}
13546.data-table .data-table-header,
13547.data-table .data-table-header-selected {
13548 display: flex;
13549 justify-content: space-between;
13550 align-items: center;
13551 width: 100%;
13552}
13553.data-table .card-header > .data-table-header,
13554.data-table .card-header > .data-table-header-selected {
13555 padding-top: var(--f7-card-header-padding-vertical);
13556 padding-bottom: var(--f7-card-header-padding-vertical);
13557 height: 100%;
13558 padding-right: var(--f7-table-edge-cell-padding-horizontal);
13559 padding-left: var(--f7-table-edge-cell-padding-horizontal);
13560 margin-right: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
13561 margin-left: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
13562}
13563.data-table .data-table-header-selected {
13564 background: rgba(var(--f7-theme-color-rgb), 0.1);
13565 display: none;
13566}
13567.data-table.data-table-has-checked .data-table-header {
13568 display: none;
13569}
13570.data-table.data-table-has-checked .data-table-header-selected {
13571 display: flex;
13572}
13573.data-table .data-table-title-selected {
13574 font-size: 14px;
13575 color: var(--f7-theme-color);
13576}
13577.data-table .data-table-footer {
13578 display: flex;
13579 align-items: center;
13580 box-sizing: border-box;
13581 position: relative;
13582 font-size: var(--f7-table-footer-font-size);
13583 overflow: hidden;
5d51ea26 13584 min-height: var(--f7-table-footer-height);
5309fbda
DC
13585 color: var(--f7-table-footer-text-color);
13586 justify-content: flex-start;
13587}
13588.data-table .data-table-footer:before {
13589 content: '';
13590 position: absolute;
13591 background-color: var(--f7-table-cell-border-color);
13592 display: block;
13593 z-index: 15;
13594 top: 0;
13595 right: auto;
13596 bottom: auto;
13597 left: 0;
13598 height: 1px;
13599 width: 100%;
13600 transform-origin: 50% 0%;
13601 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
13602}
13603.data-table .data-table-rows-select,
13604.data-table .data-table-pagination {
13605 display: flex;
13606 align-items: center;
13607}
13608.data-table .input-cell {
13609 padding-top: 8px;
13610 padding-bottom: 8px;
13611 height: auto;
13612 vertical-align: top;
13613}
13614.data-table .input-cell .table-head-label + .input {
13615 margin-top: 4px;
13616}
13617.data-table .input-cell .input {
13618 height: var(--f7-table-input-height);
13619}
13620.data-table .input-cell .input input,
13621.data-table .input-cell .input textarea,
13622.data-table .input-cell .input select {
13623 height: var(--f7-table-input-height);
13624 color: var(--f7-table-input-text-color);
13625 font-size: var(--f7-table-input-font-size);
13626}
13627@media (max-width: 480px) and (orientation: portrait) {
13628 .data-table.data-table-collapsible thead {
13629 display: none;
13630 }
13631 .data-table.data-table-collapsible tbody,
13632 .data-table.data-table-collapsible tr,
13633 .data-table.data-table-collapsible td {
13634 display: block;
13635 }
13636 .data-table.data-table-collapsible tr {
13637 position: relative;
13638 }
13639 .data-table.data-table-collapsible tr:before {
13640 content: '';
13641 position: absolute;
13642 background-color: var(--f7-table-cell-border-color);
13643 display: block;
13644 z-index: 15;
13645 top: 0;
13646 right: auto;
13647 bottom: auto;
13648 left: 0;
13649 height: 1px;
13650 width: 100%;
13651 transform-origin: 50% 0%;
13652 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
13653 }
13654 .data-table.data-table-collapsible tr:hover {
13655 background-color: inherit;
13656 }
13657 .data-table.data-table-collapsible td {
13658 --f7-table-cell-padding-left: var(--f7-table-collapsible-cell-padding);
13659 --f7-table-cell-padding-right: var(--f7-table-collapsible-cell-padding);
5d51ea26
DC
13660 height: auto;
13661 min-height: var(--f7-table-body-cell-height);
5309fbda
DC
13662 display: flex;
13663 align-content: center;
13664 align-items: center;
13665 justify-content: flex-start;
13666 text-align: right;
13667 }
13668 .data-table.data-table-collapsible td:before {
13669 display: none !important;
13670 }
13671 .data-table.data-table-collapsible td:not(.checkbox-cell):before {
13672 width: 40%;
13673 display: block !important;
13674 content: attr(data-collapsible-title);
13675 position: relative;
13676 height: auto;
13677 background: none !important;
13678 transform: none !important;
13679 font-size: var(--f7-table-head-font-size);
13680 font-weight: var(--f7-table-head-font-weight);
13681 color: var(--f7-table-head-text-color);
13682 margin-left: 16px;
13683 flex-shrink: 0;
13684 }
13685 .data-table.data-table-collapsible td.checkbox-cell {
13686 position: absolute;
13687 top: 0;
13688 right: 0;
13689 }
13690 .data-table.data-table-collapsible td.checkbox-cell + td {
13691 padding-right: 16px;
13692 }
13693 .data-table.data-table-collapsible td.checkbox-cell ~ td {
13694 margin-right: 32px;
13695 }
13696}
13697.data-table .tablet-only,
13698.data-table .tablet-landscape-only {
13699 display: none;
13700}
13701@media (min-width: 768px) {
13702 .data-table .tablet-only {
13703 display: table-cell;
13704 }
13705}
13706@media (min-width: 768px) and (orientation: landscape) {
13707 .data-table .tablet-landscape-only {
13708 display: table-cell;
13709 }
13710}
13711.ios .data-table th.actions-cell a.link + a.link,
13712.ios .data-table td.actions-cell a.link + a.link {
13713 margin-right: 15px;
13714}
13715.ios .sortable-cell:not(.numeric-cell):after {
13716 margin-right: 5px;
13717}
13718.ios .sortable-cell.numeric-cell:before {
13719 margin-left: 5px;
13720}
13721.ios .data-table-links a.link + a.link,
13722.ios .data-table-actions a.link + a.link,
13723.ios .data-table-links .button + .button,
13724.ios .data-table-actions .button + .button {
13725 margin-right: 15px;
13726}
13727.ios .data-table-actions a.link.icon-only {
13728 width: 44px;
13729 height: 44px;
13730}
13731.ios .data-table-rows-select a.link,
13732.ios .data-table-pagination a.link {
13733 width: 44px;
13734 height: 44px;
13735}
13736.ios .data-table-rows-select + .data-table-pagination {
13737 margin-right: 30px;
13738}
13739.ios .data-table-rows-select .input {
13740 margin-right: 20px;
13741}
13742.ios .data-table-pagination-label {
13743 margin-left: 15px;
13744}
13745.md .data-table th.actions-cell a.link + a.link,
13746.md .data-table td.actions-cell a.link + a.link {
13747 margin-right: 24px;
13748}
13749.md .data-table th.actions-cell a.icon-only,
13750.md .data-table td.actions-cell a.icon-only {
13751 width: 24px;
13752 height: 24px;
13753 line-height: 24px;
13754}
13755.md .sortable-cell:not(.numeric-cell):after {
13756 margin-right: 8px;
13757}
13758.md .sortable-cell.numeric-cell:before {
13759 margin-left: 8px;
13760}
13761.md .data-table-links a.link + a.link,
13762.md .data-table-actions a.link + a.link,
13763.md .data-table-links .button + .button,
13764.md .data-table-actions .button + .button {
13765 margin-right: 24px;
13766}
13767.md .data-table-actions a.link.icon-only {
13768 width: 24px;
13769 height: 24px;
13770 overflow: visible;
13771}
13772.md .data-table-actions a.link.icon-only.active-state {
13773 background: none;
13774}
13775.md .data-table-rows-select a.link,
13776.md .data-table-pagination a.link {
13777 width: 48px;
13778 height: 48px;
13779}
13780.md .data-table-rows-select a.link:before,
13781.md .data-table-pagination a.link:before {
13782 content: '';
13783 width: 152%;
13784 height: 152%;
13785 position: absolute;
13786 left: -26%;
13787 top: -26%;
13788 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
13789 background-repeat: no-repeat;
13790 background-position: center;
13791 background-size: 100% 100%;
13792 opacity: 0;
13793 pointer-events: none;
13794 transition-duration: 600ms;
13795}
13796.md .data-table-rows-select a.link.active-state:before,
13797.md .data-table-pagination a.link.active-state:before {
13798 opacity: 1;
13799 transition-duration: 150ms;
13800}
13801.md .data-table-rows-select + .data-table-pagination {
13802 margin-right: 32px;
13803}
13804.md .data-table-rows-select .input {
13805 margin-right: 24px;
13806}
13807.md .data-table-pagination-label {
13808 margin-left: 20px;
13809}
13810.md .input-cell .input-clear-button {
13811 transform: scale(0.8);
13812}
5d51ea26
DC
13813.aurora .data-table th.actions-cell a.link + a.link,
13814.aurora .data-table td.actions-cell a.link + a.link {
13815 margin-right: 10px;
13816}
13817.aurora .sortable-cell:not(.numeric-cell):after {
13818 margin-right: 5px;
13819}
13820.aurora .sortable-cell.numeric-cell:before {
13821 margin-left: 5px;
13822}
13823.aurora .data-table-links a.link + a.link,
13824.aurora .data-table-actions a.link + a.link,
13825.aurora .data-table-links .button + .button,
13826.aurora .data-table-actions .button + .button {
13827 margin-right: 10px;
13828}
13829.aurora .data-table-rows-select a.link,
13830.aurora .data-table-pagination a.link {
13831 width: 32px;
13832 height: 32px;
13833}
13834.aurora .data-table-rows-select + .data-table-pagination {
13835 margin-right: 15px;
13836}
13837.aurora .data-table-rows-select .input {
13838 margin-right: 10px;
13839}
13840.aurora .data-table-pagination-label {
13841 margin-left: 10px;
13842}
5309fbda
DC
13843/* === FAB === */
13844:root {
13845 --f7-fab-text-color: #fff;
13846 --f7-fab-extended-text-font-size: 14px;
13847 --f7-fab-extended-text-padding: 0 20px;
13848 --f7-fab-label-bg-color: #fff;
13849 --f7-fab-label-text-color: #333;
13850 --f7-fab-label-border-radius: 4px;
13851 --f7-fab-label-padding: 4px 12px;
13852 --f7-fab-button-size: 40px;
5d51ea26 13853 /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
5309fbda
DC
13854}
13855.ios {
13856 --f7-fab-size: 50px;
13857 --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
13858 --f7-fab-margin: 15px;
13859 --f7-fab-extended-size: 50px;
13860 --f7-fab-extended-text-font-weight: 400;
13861 --f7-fab-extended-text-letter-spacing: 0;
13862 --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
5d51ea26 13863 --f7-fab-label-font-size: inherit;
5309fbda
DC
13864}
13865.md {
13866 --f7-fab-size: 56px;
13867 --f7-fab-box-shadow: var(--f7-elevation-6);
13868 --f7-fab-margin: 16px;
13869 --f7-fab-extended-size: 48px;
13870 --f7-fab-extended-text-font-weight: 500;
13871 --f7-fab-extended-text-letter-spacing: 0.03em;
13872 --f7-fab-label-box-shadow: var(--f7-elevation-3);
5d51ea26
DC
13873 --f7-fab-label-font-size: inherit;
13874}
13875.aurora {
13876 --f7-fab-size: 40px;
13877 --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
13878 --f7-fab-margin: 15px;
13879 --f7-fab-extended-size: 38px;
13880 --f7-fab-extended-text-font-weight: 500;
13881 --f7-fab-extended-text-letter-spacing: 0;
13882 --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
13883 --f7-fab-label-font-size: 12px;
5309fbda
DC
13884}
13885.fab {
13886 position: absolute;
13887 z-index: 1500;
13888}
13889.fab a {
13890 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
13891}
13892.fab[class*="fab-left"] {
13893 left: calc(var(--f7-fab-margin) + var(--f7-safe-area-left));
13894}
13895.fab[class*="fab-right"] {
13896 right: calc(var(--f7-fab-margin) + var(--f7-safe-area-right));
13897}
13898.fab[class*="-top"] {
13899 top: var(--f7-fab-margin);
13900}
13901.fab[class*="-bottom"] {
13902 bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));
13903}
13904.fab[class*="fab-center"] {
13905 left: 50%;
13906 transform: translateX(-50%);
13907}
13908.fab[class*="left-center"],
13909.fab[class*="right-center"] {
13910 top: 50%;
13911 transform: translateY(-50%);
13912}
13913.fab[class*="center-center"] {
13914 top: 50%;
13915 left: 50%;
13916 transform: translateX(-50%) translateY(-50%);
13917}
13918.fab > a,
13919.fab-buttons a {
13920 background-color: var(--f7-fab-bg-color, var(--f7-theme-color));
13921 width: var(--f7-fab-size);
13922 height: var(--f7-fab-size);
13923 box-shadow: var(--f7-fab-box-shadow);
13924 border-radius: calc(var(--f7-fab-size) / 2);
13925 position: relative;
13926 transition-duration: 300ms;
13927 display: flex;
13928 align-items: center;
13929 justify-content: center;
13930 overflow: hidden;
13931 z-index: 1;
13932 color: var(--f7-fab-text-color);
13933}
13934.fab > a.active-state,
13935.fab-buttons a.active-state {
13936 background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
13937}
13938.fab > a i {
13939 position: absolute;
13940 left: 50%;
13941 top: 50%;
13942 transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
13943 transition: 300ms;
13944}
13945.fab > a i + i {
13946 transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5);
13947 opacity: 0;
13948}
13949.fab-buttons a {
13950 border-radius: calc(var(--f7-fab-button-size) / 2);
13951 width: var(--f7-fab-button-size);
13952 height: var(--f7-fab-button-size);
13953}
13954.fab-buttons {
13955 display: flex;
13956 visibility: hidden;
13957 pointer-events: none;
13958 position: absolute;
13959}
13960.fab-buttons a {
13961 opacity: 0;
13962}
13963.fab-opened:not(.fab-morph) > a i {
13964 transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.5);
13965 opacity: 0;
13966}
13967.fab-opened:not(.fab-morph) > a i + i {
13968 transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
13969 opacity: 1;
13970}
13971.fab-opened .fab-buttons {
13972 visibility: visible;
13973 pointer-events: auto;
13974}
13975.fab-opened .fab-buttons a {
13976 opacity: 1;
13977 transform: translate3d(0, 0px, 0) scale(1) !important;
13978}
13979.fab-opened .fab-buttons a:nth-child(2) {
13980 transition-delay: 50ms;
13981}
13982.fab-opened .fab-buttons a:nth-child(3) {
13983 transition-delay: 100ms;
13984}
13985.fab-opened .fab-buttons a:nth-child(4) {
13986 transition-delay: 150ms;
13987}
13988.fab-opened .fab-buttons a:nth-child(5) {
13989 transition-delay: 200ms;
13990}
13991.fab-opened .fab-buttons a:nth-child(6) {
13992 transition-delay: 250ms;
13993}
13994.fab-buttons-top,
13995.fab-buttons-bottom {
13996 left: 50%;
13997 width: var(--f7-fab-button-size);
13998 margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
13999}
14000.fab-buttons-top {
14001 bottom: 100%;
14002 margin-bottom: 16px;
14003 flex-direction: column-reverse;
14004}
14005.fab-buttons-top a {
14006 transform: translate3d(0, 8px, 0) scale(0.3);
14007 transform-origin: center bottom;
14008}
14009.fab-buttons-top a + a {
14010 margin-bottom: 16px;
14011}
14012.fab-buttons-bottom {
14013 top: 100%;
14014 margin-top: 16px;
14015 flex-direction: column;
14016}
14017.fab-buttons-bottom a {
14018 transform: translate3d(0, -8px, 0) scale(0.3);
14019 transform-origin: center top;
14020}
14021.fab-buttons-bottom a + a {
14022 margin-top: 16px;
14023}
14024.fab-buttons-left,
14025.fab-buttons-right {
14026 top: 50%;
14027 height: var(--f7-fab-button-size);
14028 margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
14029}
14030.fab-buttons-left {
14031 right: 100%;
14032 margin-right: 16px;
14033}
14034.fab-buttons-left a {
14035 transform: translate3d(8px, 0px, 0) scale(0.3);
14036 transform-origin: right center;
14037}
14038.fab-buttons-left a + a {
14039 margin-right: 16px;
14040}
14041.fab-buttons-right {
14042 left: 100%;
14043 margin-left: 16px;
14044 flex-direction: row-reverse;
14045}
14046.fab-buttons-right a {
14047 transform: translate3d(-8px, 0, 0) scale(0.3);
14048 transform-origin: left center;
14049}
14050.fab-buttons-right a + a {
14051 margin-left: 16px;
14052}
14053.fab-buttons-center {
14054 left: 0%;
14055 top: 0%;
14056 width: 100%;
14057 height: 100%;
14058}
14059.fab-buttons-center a {
14060 position: absolute;
14061}
14062.fab-buttons-center a:nth-child(1) {
14063 left: 50%;
14064 margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
14065 bottom: 100%;
14066 margin-bottom: 16px;
14067 transform: translateY(-8px) scale(0.3);
14068 transform-origin: center bottom;
14069}
14070.fab-buttons-center a:nth-child(2) {
14071 left: 100%;
14072 margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
14073 top: 50%;
14074 margin-left: 16px;
14075 transform: translateX(-8px) scale(0.3);
14076 transform-origin: left center;
14077}
14078.fab-buttons-center a:nth-child(3) {
14079 left: 50%;
14080 margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
14081 top: 100%;
14082 margin-top: 16px;
14083 transform: translateY(8px) scale(0.3);
14084 transform-origin: center top;
14085}
14086.fab-buttons-center a:nth-child(4) {
14087 right: 100%;
14088 margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
14089 top: 50%;
14090 margin-right: 16px;
14091 transform: translateX(8px) scale(0.3);
14092 transform-origin: right center;
14093}
14094.fab-morph {
14095 border-radius: calc(var(--f7-fab-size) / 2);
14096 background: var(--f7-fab-bg-color, var(--f7-theme-color));
14097 box-shadow: var(--f7-fab-box-shadow);
14098}
14099.fab-morph > a {
14100 box-shadow: none;
14101 background: none !important;
14102}
14103.fab-opened.fab-morph > a i {
14104 opacity: 0;
14105}
14106.fab-morph,
14107.fab-morph > a,
14108.fab-morph-target {
14109 transition-duration: 250ms;
14110}
14111.fab-morph-target:not(.fab-morph-target-visible) {
14112 display: none;
14113}
14114.fab-extended {
14115 width: auto;
14116 min-width: var(--f7-fab-extended-size);
14117}
14118.fab-extended > a {
14119 width: 100%;
14120 height: var(--f7-fab-extended-size);
14121}
14122.fab-extended > a i {
14123 left: calc(var(--f7-fab-extended-size) / 2);
14124}
14125.fab-extended i ~ .fab-text {
14126 padding-left: var(--f7-fab-extended-size);
14127}
14128.fab-extended > a {
14129 width: 100% !important;
14130}
14131.fab-text {
14132 box-sizing: border-box;
14133 font-size: var(--f7-fab-extended-text-font-size);
14134 padding: var(--f7-fab-extended-text-padding);
14135 font-weight: var(--f7-fab-extended-text-font-weight);
14136 letter-spacing: var(--f7-fab-extended-text-letter-spacing);
14137 text-transform: uppercase;
14138}
14139.fab-label-button {
14140 overflow: visible !important;
14141}
14142.fab-label {
14143 position: absolute;
14144 top: 50%;
14145 padding: var(--f7-fab-label-padding);
14146 border-radius: var(--f7-fab-label-border-radius);
14147 background: var(--f7-fab-label-bg-color);
14148 color: var(--f7-fab-label-text-color);
14149 box-shadow: var(--f7-fab-label-box-shadow);
14150 white-space: nowrap;
14151 transform: translateY(-50%);
14152 pointer-events: none;
5d51ea26 14153 font-size: var(--f7-fab-label-font-size);
5309fbda
DC
14154}
14155.fab[class*="fab-right-"] .fab-label {
14156 right: 100%;
14157 margin-right: 8px;
14158}
14159.fab[class*="fab-left-"] .fab-label {
14160 left: 100%;
14161 margin-left: 8px;
14162}
14163.navbar ~ * .fab[class*="-top"],
14164.navbar ~ .fab[class*="-top"] {
14165 margin-top: var(--f7-navbar-height);
14166}
14167.toolbar-top ~ * .fab[class*="-top"],
14168.toolbar-top ~ .fab[class*="-top"],
14169.ios .toolbar-top-ios ~ * .fab[class*="-top"],
14170.ios .toolbar-top-ios ~ .fab[class*="-top"],
14171.md .toolbar-top-md ~ * .fab[class*="-top"],
14172.md .toolbar-top-md ~ .fab[class*="-top"] {
14173 margin-top: var(--f7-toolbar-height);
14174}
14175.toolbar-bottom ~ * .fab[class*="-bottom"],
14176.toolbar-bottom ~ .fab[class*="-bottom"],
14177.ios .toolbar-bottom-ios ~ * .fab[class*="-bottom"],
14178.ios .toolbar-bottom-ios ~ .fab[class*="-bottom"],
14179.md .toolbar-bottom-md ~ * .fab[class*="-bottom"],
14180.md .toolbar-bottom-md ~ .fab[class*="-bottom"] {
14181 margin-bottom: var(--f7-toolbar-height);
14182}
14183.tabbar-labels.toolbar-bottom ~ * .fab[class*="-bottom"],
14184.tabbar-labels.toolbar-bottom ~ .fab[class*="-bottom"],
14185.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab[class*="-bottom"],
14186.ios .tabbar-labels.toolbar-bottom-ios ~ .fab[class*="-bottom"],
14187.md .tabbar-labels.toolbar-bottom-md ~ * .fab[class*="-bottom"],
14188.md .tabbar-labels.toolbar-bottom-md ~ .fab[class*="-bottom"] {
14189 margin-bottom: var(--f7-tabbar-labels-height);
14190}
14191.tabbar-labels.toolbar-top ~ * .fab[class*="-bottom"],
14192.tabbar-labels.toolbar-top ~ .fab[class*="-bottom"],
14193.ios .tabbar-labels.toolbar-top-ios ~ * .fab[class*="-bottom"],
14194.ios .tabbar-labels.toolbar-top-ios ~ .fab[class*="-bottom"],
14195.md .tabbar-labels.toolbar-top-md ~ * .fab[class*="-bottom"],
14196.md .tabbar-labels.toolbar-top-md ~ .fab[class*="-bottom"] {
14197 margin-top: var(--f7-tabbar-labels-height);
14198}
14199.messagebar ~ * .fab[class*="-bottom"],
14200.messagebar ~ .fab[class*="-bottom"] {
14201 margin-bottom: var(--f7-messagebar-height);
14202}
14203.navbar + .toolbar-top ~ * .fab[class*="-top"],
14204.ios .navbar + .toolbar-top-ios ~ * .fab[class*="-top"],
14205.md .navbar + .toolbar-top-ios ~ * .fab[class*="-top"],
14206.navbar + .toolbar-top ~ .fab[class*="-top"],
14207.ios .navbar + .toolbar-top-ios ~ .fab[class*="-top"],
14208.md .navbar + .toolbar-top-ios ~ .fab[class*="-top"] {
14209 margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height));
14210}
14211.navbar + .toolbar-top.tabbar-labels ~ * .fab[class*="-top"],
14212.ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab[class*="-top"],
14213.md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab[class*="-top"],
14214.navbar + .toolbar-top.tabbar-labels ~ .fab[class*="-top"],
14215.ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"],
14216.md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"] {
14217 margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height));
14218}
14219.ios .fab > a.active-state,
14220.ios .fab-buttons a.active-state {
14221 transition-duration: 0ms;
14222}
14223/* === Searchbar === */
14224:root {
14225 /*
14226 --f7-searchbar-link-color: var(--f7-bars-link-color);
14227 */
5d51ea26
DC
14228 --f7-searchbar-input-border-width: 0px;
14229 --f7-searchbar-input-border-color: transparent;
14230 --f7-searchbar-input-text-color: #000;
14231 --f7-searchbar-placeholder-color: #939398;
14232}
14233:root .theme-dark,
14234:root.theme-dark {
14235 --f7-searchbar-input-text-color: #fff;
14236}
5309fbda
DC
14237.ios {
14238 /*
14239 --f7-searchbar-bg-image: var(--f7-bars-bg-image);
14240 --f7-searchbar-bg-color: var(--f7-bars-bg-color);
14241 --f7-searchbar-border-color: var(--f7-bars-border-color);
14242 */
14243 --f7-searchbar-height: 44px;
5d51ea26
DC
14244 --f7-searchbar-inner-padding-left: 8px;
14245 --f7-searchbar-inner-padding-right: 8px;
5309fbda
DC
14246 /*
14247 --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
14248 */
14249 --f7-searchbar-search-icon-color: #939398;
5309fbda
DC
14250 --f7-searchbar-input-font-size: 17px;
14251 --f7-searchbar-input-bg-color: #e8e8ea;
14252 --f7-searchbar-input-border-radius: 8px;
14253 --f7-searchbar-input-height: 32px;
14254 --f7-searchbar-input-padding-horizontal: 28px;
14255 /*
5d51ea26
DC
14256 --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
14257 --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
14258 --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
5309fbda
DC
14259 --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
14260 */
14261 --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
14262 --f7-searchbar-shadow-image: none;
14263 --f7-searchbar-in-page-content-margin: 0px;
14264 --f7-searchbar-in-page-content-box-shadow: none;
14265 --f7-searchbar-in-page-content-border-radius: 0;
5d51ea26 14266 --f7-searchbar-in-page-content-input-border-radius: 0;
5309fbda
DC
14267}
14268.ios .theme-dark,
14269.ios.theme-dark {
14270 --f7-searchbar-bg-color: #303030;
14271 --f7-searchbar-input-bg-color: #171717;
5309fbda
DC
14272}
14273.md {
14274 --f7-searchbar-bg-color: #fff;
14275 --f7-searchbar-border-color: transparent;
14276 --f7-searchbar-height: 48px;
5d51ea26
DC
14277 --f7-searchbar-inner-padding-left: 0px;
14278 --f7-searchbar-inner-padding-right: 0px;
5309fbda
DC
14279 --f7-searchbar-link-color: #737373;
14280 --f7-searchbar-search-icon-color: #737373;
5309fbda
DC
14281 --f7-searchbar-input-font-size: 20px;
14282 --f7-searchbar-input-bg-color: #fff;
14283 --f7-searchbar-input-border-radius: 0px;
14284 --f7-searchbar-input-height: 100%;
14285 --f7-searchbar-input-padding-horizontal: 48px;
5d51ea26
DC
14286 /*
14287 --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
14288 --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
14289 */
14290 --f7-searchbar-inline-input-padding-horizontal: 24px;
5309fbda
DC
14291 --f7-searchbar-input-clear-button-color: #737373;
14292 --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
14293 --f7-searchbar-shadow-image: var(--f7-bars-shadow-bottom-image);
14294 --f7-searchbar-in-page-content-margin: 8px;
14295 --f7-searchbar-in-page-content-box-shadow: var(--f7-elevation-1);
14296 --f7-searchbar-in-page-content-border-radius: 4px;
5d51ea26
DC
14297 --f7-searchbar-in-page-content-input-border-radius: 4px;
14298}
14299.md .theme-dark,
14300.md.theme-dark {
14301 --f7-searchbar-bg-color: #222222;
14302 --f7-searchbar-input-bg-color: #222222;
14303}
14304.aurora {
14305 /*
14306 --f7-searchbar-bg-image: var(--f7-bars-bg-image);
14307 --f7-searchbar-bg-color: var(--f7-bars-bg-color);
14308 --f7-searchbar-border-color: var(--f7-bars-border-color);
14309 */
14310 --f7-searchbar-height: 38px;
14311 --f7-searchbar-inner-padding-left: 8px;
14312 --f7-searchbar-inner-padding-right: 8px;
14313 /*
14314 --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
14315 */
14316 --f7-searchbar-search-icon-color: #939398;
14317 --f7-searchbar-input-font-size: 13px;
14318 --f7-searchbar-input-bg-color: #fff;
14319 --f7-searchbar-input-border-radius: 4px;
14320 --f7-searchbar-input-height: 24px;
14321 --f7-searchbar-input-padding-horizontal: 24px;
14322 /*
14323 --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
14324 --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
14325 --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal;
14326 --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
14327 */
14328 --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
14329 --f7-searchbar-shadow-image: none;
14330 --f7-searchbar-in-page-content-margin: 0px;
14331 --f7-searchbar-in-page-content-box-shadow: none;
14332 --f7-searchbar-in-page-content-border-radius: 0;
14333 /*
14334 --f7-searchbar-in-page-content-input-border-radius: var(--f7-searchbar-input-border-radius);
14335 */
14336}
14337.aurora .theme-dark,
14338.aurora.theme-dark {
14339 --f7-searchbar-input-bg-color: #333;
5309fbda
DC
14340}
14341.searchbar {
14342 width: 100%;
14343 position: relative;
14344 z-index: 200;
14345 height: var(--f7-searchbar-height);
14346 background-image: var(--f7-searchbar-bg-image, var(--f7-bars-bg-image));
14347 background-color: var(--f7-searchbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
5309fbda
DC
14348}
14349.searchbar.no-hairline:after,
14350.searchbar.no-border:after {
14351 display: none !important;
14352}
14353.searchbar.no-shadow:before {
14354 display: none !important;
14355}
14356.searchbar:after {
14357 content: '';
14358 position: absolute;
14359 background-color: var(--f7-searchbar-border-color, var(--f7-bars-border-color));
14360 display: block;
14361 z-index: 15;
14362 top: auto;
14363 right: auto;
14364 bottom: 0;
14365 left: 0;
14366 height: 1px;
14367 width: 100%;
14368 transform-origin: 50% 100%;
14369 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
14370}
5d51ea26 14371.page > .searchbar:not(.searchbar-inline) {
5309fbda
DC
14372 z-index: 510;
14373}
5d51ea26 14374.page > .searchbar:not(.searchbar-inline):before {
5309fbda
DC
14375 content: '';
14376 position: absolute;
14377 right: 0;
14378 width: 100%;
14379 top: 100%;
14380 bottom: auto;
14381 height: 8px;
14382 pointer-events: none;
5d51ea26 14383 background: var(--f7-searchbar-shadow-image);
5309fbda
DC
14384}
14385.searchbar input[type="text"],
14386.searchbar input[type="search"] {
14387 box-sizing: border-box;
14388 width: 100%;
14389 height: 100%;
14390 display: block;
5d51ea26 14391 border: var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);
5309fbda
DC
14392 -webkit-appearance: none;
14393 -moz-appearance: none;
14394 appearance: none;
14395 font-family: inherit;
14396 font-weight: normal;
14397 color: var(--f7-searchbar-input-text-color);
14398 font-size: var(--f7-searchbar-input-font-size);
14399 background-color: var(--f7-searchbar-input-bg-color);
14400 border-radius: var(--f7-searchbar-input-border-radius);
14401 position: relative;
14402 padding: 0;
5d51ea26
DC
14403 padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right, 0px));
14404 padding-right: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left, 0px));
5309fbda
DC
14405}
14406.searchbar input[type="text"]::-webkit-input-placeholder,
14407.searchbar input[type="search"]::-webkit-input-placeholder {
14408 color: var(--f7-searchbar-placeholder-color);
14409 opacity: 1;
14410}
14411.searchbar input[type="text"]::-moz-placeholder,
14412.searchbar input[type="search"]::-moz-placeholder {
14413 color: var(--f7-searchbar-placeholder-color);
14414 opacity: 1;
14415}
14416.searchbar input[type="text"]::-ms-input-placeholder,
14417.searchbar input[type="search"]::-ms-input-placeholder {
14418 color: var(--f7-searchbar-placeholder-color);
14419 opacity: 1;
14420}
14421.searchbar input[type="text"]::placeholder,
14422.searchbar input[type="search"]::placeholder {
14423 color: var(--f7-searchbar-placeholder-color);
14424 opacity: 1;
14425}
14426.searchbar input::-webkit-search-cancel-button {
14427 -webkit-appearance: none;
14428 appearance: none;
14429}
14430.searchbar .searchbar-input-wrap {
14431 flex-shrink: 1;
14432 width: 100%;
14433 height: var(--f7-searchbar-input-height);
14434 position: relative;
14435}
14436.searchbar a {
14437 color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
14438}
5d51ea26 14439.page > .searchbar:not(.searchbar-inline) {
5309fbda
DC
14440 position: absolute;
14441 left: 0;
14442 top: 0;
14443}
5d51ea26 14444.page-content .searchbar:not(.searchbar-inline) {
5309fbda
DC
14445 border-radius: var(--f7-searchbar-in-page-content-border-radius);
14446 margin: var(--f7-searchbar-in-page-content-margin);
14447 width: auto;
14448 box-shadow: var(--f7-searchbar-in-page-content-box-shadow);
14449}
5d51ea26
DC
14450.page-content .searchbar:not(.searchbar-inline) .searchbar-inner,
14451.page-content .searchbar:not(.searchbar-inline) input[type="text"],
14452.page-content .searchbar:not(.searchbar-inline) input[type="search"] {
14453 border-radius: var(--f7-searchbar-in-page-content-input-border-radius, var(--f7-searchbar-input-border-radius));
5309fbda
DC
14454}
14455.searchbar .input-clear-button {
14456 color: var(--f7-searchbar-input-clear-button-color, var(--f7-input-clear-button-color));
14457}
14458.searchbar-expandable {
14459 position: absolute;
14460 transition-duration: 300ms;
14461 pointer-events: none;
14462}
14463.navbar-inner-large .searchbar-expandable:after {
14464 display: none !important;
14465}
14466.navbar .searchbar.searchbar-expandable {
14467 --f7-searchbar-expandable-size: var(--f7-navbar-height);
14468}
14469.toolbar .searchbar.searchbar-expandable {
14470 --f7-searchbar-expandable-size: var(--f7-toolbar-height);
14471}
14472.subnavbar .searchbar.searchbar-expandable {
14473 --f7-searchbar-expandable-size: var(--f7-subnavbar-height);
14474}
14475.tabbar-labels .searchbar.searchbar-expandable {
14476 --f7-searchbar-expandable-size: var(--f7-tabbar-labels-height);
14477}
14478.searchbar-inner {
14479 position: absolute;
14480 left: 0;
14481 top: 0;
14482 width: 100%;
14483 height: 100%;
14484 display: flex;
14485 align-items: center;
14486 box-sizing: border-box;
5d51ea26 14487 padding: 0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));
5309fbda
DC
14488}
14489.searchbar-disable-button {
14490 cursor: pointer;
14491 pointer-events: none;
14492 -webkit-appearance: none;
14493 -moz-appearance: none;
14494 appearance: none;
14495 background: none;
14496 border: none;
14497 outline: 0;
14498 padding: 0;
14499 margin: 0;
14500 width: auto;
14501 opacity: 0;
14502}
14503.searchbar-icon {
14504 pointer-events: none;
14505 background-position: center;
14506 background-repeat: no-repeat;
14507}
14508.searchbar-icon:after {
14509 color: var(--f7-searchbar-search-icon-color);
14510 font-family: 'framework7-core-icons';
14511 font-weight: normal;
14512 font-style: normal;
14513 line-height: 1;
14514 letter-spacing: normal;
14515 text-transform: none;
14516 white-space: nowrap;
14517 word-wrap: normal;
14518 direction: ltr;
14519 -webkit-font-smoothing: antialiased;
14520 text-rendering: optimizeLegibility;
14521 -moz-osx-font-smoothing: grayscale;
14522 -moz-font-feature-settings: "liga";
14523 font-feature-settings: "liga";
14524 text-align: center;
14525 display: block;
14526 width: 100%;
14527 height: 100%;
14528 font-size: 20px;
14529}
14530.searchbar-backdrop {
14531 position: absolute;
14532 left: 0;
14533 top: 0;
14534 width: 100%;
14535 height: 100%;
14536 z-index: 100;
14537 opacity: 0;
14538 pointer-events: none;
14539 transition-duration: 300ms;
14540 transform: translate3d(0, 0, 0);
14541 background: var(--f7-searchbar-backdrop-bg-color);
14542}
14543.searchbar-backdrop.searchbar-backdrop-in {
14544 opacity: 1;
14545 pointer-events: auto;
14546}
14547.page-content > .searchbar-backdrop {
14548 position: fixed;
14549}
14550.searchbar-not-found {
14551 display: none;
14552}
14553.hidden-by-searchbar,
14554.list .hidden-by-searchbar,
14555.list.li.hidden-by-searchbar,
14556.list li.hidden-by-searchbar {
14557 display: none !important;
14558}
14559.navbar.with-searchbar-expandable-enabled,
14560.navbar-inner.with-searchbar-expandable-enabled {
14561 --f7-navbar-large-collapse-progress: 1;
14562}
14563.navbar.with-searchbar-expandable-enabled .title-large,
14564.navbar-inner.with-searchbar-expandable-enabled .title-large,
14565.navbar.with-searchbar-expandable-enabled .title-large-text,
14566.navbar-inner.with-searchbar-expandable-enabled .title-large-text,
14567.navbar.with-searchbar-expandable-enabled .title-large-inner,
14568.navbar-inner.with-searchbar-expandable-enabled .title-large-inner {
14569 transition-duration: 300ms;
14570}
14571.page-content.with-searchbar-expandable-enabled {
14572 height: calc(100% + var(--f7-navbar-large-title-height));
14573 transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
14574 transition-duration: 300ms;
14575 transition-property: transform;
14576}
14577.navbar ~ .page:not(.no-navbar) > .searchbar,
14578.page > .navbar ~ .searchbar {
14579 top: var(--f7-navbar-height);
14580}
14581.navbar ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
14582.page-with-navbar-large .navbar ~ .searchbar,
14583.page-with-navbar-large .navbar ~ * .searchbar {
14584 top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
14585 transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
14586}
5d51ea26
DC
14587.searchbar ~ * {
14588 --f7-page-searchbar-offset: var(--f7-searchbar-height);
5309fbda
DC
14589}
14590.page > .toolbar-top ~ .searchbar,
14591.ios .page > .toolbar-top-ios ~ .searchbar,
5d51ea26
DC
14592.md .page > .toolbar-top-md ~ .searchbar,
14593.aurora .page > .toolbar-top-aurora ~ .searchbar {
5309fbda
DC
14594 top: var(--f7-toolbar-height);
14595}
5309fbda
DC
14596.page > .tabbar-labels.toolbar-top ~ .searchbar,
14597.ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar,
5d51ea26
DC
14598.md .page > .tabbar-labels.toolbar-top-md ~ .searchbar,
14599.aurora .page > .tabbar-labels.toolbar-top-aurora ~ .searchbar {
5309fbda
DC
14600 top: var(--f7-tabbar-labels-height);
14601}
5309fbda
DC
14602.page > .navbar ~ .toolbar-top ~ .searchbar,
14603.ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar,
5d51ea26
DC
14604.md .page > .navbar ~ .toolbar-top-md ~ .searchbar,
14605.aurora .page > .navbar ~ .toolbar-top-aurora ~ .searchbar {
5309fbda
DC
14606 top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
14607}
5309fbda
DC
14608.page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar,
14609.ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar,
5d51ea26
DC
14610.md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar,
14611.aurora .page > .navbar ~ .tabbar-labels.toolbar-top-aurora ~ .searchbar {
5309fbda
DC
14612 top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
14613}
5d51ea26
DC
14614.searchbar.searchbar-inline {
14615 width: auto;
14616 height: auto;
14617 background-color: transparent;
14618 background-image: none;
14619}
14620.searchbar.searchbar-inline:after,
14621.searchbar.searchbar-inline:before {
14622 display: none !important;
14623}
14624.searchbar.searchbar-inline .searchbar-input-wrap {
14625 height: var(--f7-searchbar-inline-input-height, var(--f7-searchbar-input-height));
5309fbda 14626}
5d51ea26
DC
14627.searchbar.searchbar-inline .searchbar-inner {
14628 padding: 0;
14629 position: static;
14630 width: auto;
14631 height: auto;
14632}
14633.searchbar.searchbar-inline input[type="text"],
14634.searchbar.searchbar-inline input[type="search"] {
14635 font-size: var(--f7-searchbar-inline-input-font-size, var(--f7-searchbar-input-font-size));
14636 padding-left: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right, 0px));
14637 padding-right: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left, 0px));
5309fbda
DC
14638}
14639.ios .searchbar input[type="search"],
14640.ios .searchbar input[type="text"] {
14641 z-index: 30;
14642}
14643.ios .searchbar .input-clear-button {
14644 z-index: 40;
14645 left: 7px;
14646}
5309fbda
DC
14647.ios .searchbar-icon {
14648 width: 13px;
14649 height: 13px;
14650 position: absolute;
14651 top: 50%;
14652 margin-top: -6px;
14653 z-index: 40;
14654 right: 8px;
14655}
14656.ios .searchbar-icon:after {
14657 content: 'search_ios';
14658 line-height: 13px;
14659}
14660.ios .searchbar-disable-button {
14661 font-size: 17px;
14662 flex-shrink: 0;
14663 transform: translate3d(0, 0, 0);
14664 transition-duration: 300ms;
14665 color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
14666 display: none;
14667}
14668.ios .searchbar-disable-button.active-state {
14669 transition-duration: 0ms;
14670 opacity: 0.3 !important;
14671}
14672.ios .searchbar-enabled .searchbar-disable-button {
14673 pointer-events: auto;
14674 opacity: 1;
14675 margin-right: 8px;
14676}
14677.ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
14678 transition-duration: 300ms !important;
14679}
14680.ios .searchbar-expandable {
14681 --f7-searchbar-expandable-size: var(--f7-searchbar-height);
14682 right: 0;
14683 bottom: 0;
14684 opacity: 1;
14685 width: 100%;
14686 height: 0%;
14687 transform: translate3d(0, 0, 0);
14688 overflow: hidden;
14689}
14690.ios .searchbar-expandable .searchbar-disable-button {
14691 margin-right: 8px;
14692 opacity: 1;
14693 display: block;
14694}
14695.ios .searchbar-expandable .searchbar-inner {
14696 height: var(--f7-searchbar-expandable-size);
14697}
14698.ios .navbar-inner.with-searchbar-expandable-enabled .left,
14699.ios .navbar-inner.with-searchbar-expandable-enabled .title,
14700.ios .navbar-inner.with-searchbar-expandable-enabled .right {
14701 transform: translateY(calc(-1 * var(--f7-navbar-height)));
14702 transition: 300ms;
14703 opacity: 0;
14704}
14705.ios .searchbar-expandable.searchbar-enabled {
14706 opacity: 1;
14707 height: var(--f7-searchbar-expandable-size);
14708 pointer-events: auto;
14709}
5309fbda
DC
14710.md .searchbar-icon,
14711.md .searchbar-disable-button {
14712 position: absolute;
14713 right: calc(-4px + var(--f7-safe-area-right));
14714 top: 50%;
14715 transition-duration: 300ms;
14716}
14717.md .searchbar-icon {
14718 width: 24px;
14719 height: 24px;
14720 margin-left: 12px;
14721 margin-top: -12px;
14722}
14723.md .searchbar-icon:after {
14724 content: 'search_md';
14725 line-height: 1.2;
14726}
14727.md .searchbar-disable-button {
14728 width: 48px;
14729 height: 48px;
14730 transform: rotate(-90deg) scale(0.5);
14731 font-size: 0 !important;
14732 display: block;
14733 margin-top: -24px;
14734 color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
5309fbda
DC
14735}
14736.md .searchbar-disable-button:before {
14737 content: '';
14738 width: 152%;
14739 height: 152%;
14740 position: absolute;
14741 left: -26%;
14742 top: -26%;
14743 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
14744 background-repeat: no-repeat;
14745 background-position: center;
14746 background-size: 100% 100%;
14747 opacity: 0;
14748 pointer-events: none;
14749 transition-duration: 600ms;
14750}
14751.md .searchbar-disable-button.active-state:before {
14752 opacity: 1;
14753 transition-duration: 150ms;
14754}
14755.md .searchbar-disable-button:after {
14756 font-family: 'framework7-core-icons';
14757 font-weight: normal;
14758 font-style: normal;
14759 line-height: 1;
14760 letter-spacing: normal;
14761 text-transform: none;
14762 white-space: nowrap;
14763 word-wrap: normal;
14764 direction: ltr;
14765 -webkit-font-smoothing: antialiased;
14766 text-rendering: optimizeLegibility;
14767 -moz-osx-font-smoothing: grayscale;
14768 -moz-font-feature-settings: "liga";
14769 font-feature-settings: "liga";
14770 text-align: center;
14771 display: block;
14772 width: 100%;
14773 height: 100%;
14774 font-size: 20px;
14775 line-height: 48px;
14776 content: "arrow_right_md";
14777}
14778.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button {
14779 transform: rotate(0deg) scale(1);
14780 pointer-events: auto;
14781 opacity: 1;
14782}
14783.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon {
14784 opacity: 0;
14785 transform: rotate(90deg) scale(0.5);
14786}
5d51ea26
DC
14787.md .searchbar {
14788 --f7-searchbar-input-extra-padding-left: 17px;
14789}
5309fbda
DC
14790.md .searchbar .input-clear-button {
14791 width: 48px;
14792 height: 48px;
14793 margin-top: -24px;
14794 left: 0;
5309fbda
DC
14795}
14796.md .searchbar .input-clear-button:before {
14797 content: '';
14798 width: 152%;
14799 height: 152%;
14800 position: absolute;
14801 left: -26%;
14802 top: -26%;
14803 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
14804 background-repeat: no-repeat;
14805 background-position: center;
14806 background-size: 100% 100%;
14807 opacity: 0;
14808 pointer-events: none;
14809 transition-duration: 600ms;
14810}
14811.md .searchbar .input-clear-button.active-state:before {
14812 opacity: 1;
14813 transition-duration: 150ms;
14814}
14815.md .searchbar .input-clear-button:after {
14816 line-height: 48px;
14817 content: 'delete_md';
14818 opacity: 1;
14819}
14820.md .searchbar .input-clear-button:before {
14821 margin-left: 0;
14822 margin-top: 0;
14823}
14824.md .page > .searchbar,
14825.md .subnavbar .searchbar,
14826.md .searchbar-expandable {
5d51ea26 14827 --f7-searchbar-input-extra-padding-left: calc(17px + 8px);
5309fbda
DC
14828}
14829.md .page > .searchbar .searchbar-icon,
14830.md .subnavbar .searchbar .searchbar-icon,
14831.md .searchbar-expandable .searchbar-icon,
14832.md .page > .searchbar .searchbar-disable-button,
14833.md .subnavbar .searchbar .searchbar-disable-button,
14834.md .searchbar-expandable .searchbar-disable-button {
14835 right: calc(-4px + 8px + var(--f7-safe-area-right));
14836}
14837.md .searchbar-expandable {
14838 --f7-searchbar-expandable-size: var(--f7-searchbar-height);
14839 height: 100%;
14840 opacity: 0;
14841 top: 50%;
14842 border-radius: calc(var(--f7-searchbar-expandable-size));
14843 width: calc(var(--f7-searchbar-expandable-size));
14844 margin-top: calc(var(--f7-searchbar-expandable-size) * -1 / 2);
14845 transform: translate3d(0px, 0px, 0px);
14846 right: 100%;
14847 margin-right: calc(var(--f7-searchbar-expandable-size) * -1);
14848}
14849.md .searchbar-expandable.searchbar-enabled {
14850 width: 100%;
14851 border-radius: 0;
14852 opacity: 1;
14853 pointer-events: auto;
14854 top: 0;
14855 margin-top: 0;
14856 right: 0;
14857 margin-right: 0;
14858}
5d51ea26
DC
14859.aurora .searchbar input[type="search"],
14860.aurora .searchbar input[type="text"] {
14861 z-index: 30;
14862}
14863.aurora .searchbar .input-clear-button {
14864 z-index: 40;
14865 left: 4px;
14866}
14867.aurora .searchbar-icon {
14868 width: 13px;
14869 height: 13px;
14870 position: absolute;
14871 top: 50%;
14872 margin-top: -6px;
14873 z-index: 40;
14874 right: 6px;
14875}
14876.aurora .searchbar-icon:after {
14877 content: 'search_aurora';
14878 line-height: 13px;
14879}
14880.aurora .searchbar-disable-button {
14881 font-size: 14px;
14882 flex-shrink: 0;
14883 transform: translate3d(0, 0, 0);
14884 transition-duration: 300ms;
14885 color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
14886 display: none;
14887}
14888.aurora .searchbar-disable-button.active-state {
14889 transition-duration: 0ms;
14890 opacity: 0.3 !important;
14891}
14892.aurora .searchbar-enabled .searchbar-disable-button {
14893 pointer-events: auto;
14894 opacity: 1;
14895 margin-right: 8px;
14896}
14897.aurora .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
14898 transition-duration: 300ms !important;
14899}
14900.aurora .searchbar-expandable {
14901 --f7-searchbar-expandable-size: var(--f7-searchbar-height);
14902 right: 0;
14903 top: 0;
14904 opacity: 0;
14905 width: 100%;
14906 transform: translate3d(0, 0%, 0);
14907 overflow: hidden;
14908}
14909.aurora .searchbar-expandable .searchbar-disable-button {
14910 margin-right: 8px;
14911 opacity: 1;
14912 display: block;
14913}
14914.aurora .searchbar-expandable .searchbar-inner {
14915 height: var(--f7-searchbar-expandable-size);
14916}
14917.aurora .searchbar-expandable.searchbar-enabled {
14918 opacity: 1;
14919 pointer-events: auto;
14920}
5309fbda
DC
14921/* === Messages === */
14922:root {
14923 --f7-messages-content-bg-color: #fff;
14924 --f7-message-text-header-text-color: inherit;
14925 --f7-message-text-header-opacity: 0.65;
14926 --f7-message-text-header-font-size: 12px;
14927 --f7-message-text-footer-text-color: inherit;
14928 --f7-message-text-footer-opacity: 0.65;
14929 --f7-message-text-footer-font-size: 12px;
14930 --f7-message-bubble-line-height: 1.2;
14931 --f7-message-header-font-size: 12px;
14932 --f7-message-footer-font-size: 11px;
14933 --f7-message-name-font-size: 12px;
5d51ea26 14934 --f7-message-name-font-weight: inherit;
5309fbda 14935 --f7-message-typing-indicator-bg-color: #000;
5d51ea26
DC
14936 --f7-message-avatar-border-radius: 50%;
14937 --f7-messages-title-font-weight: inherit;
5309fbda
DC
14938 /*
14939 --f7-message-sent-bg-color: var(--f7-theme-color);
14940 */
14941 --f7-message-sent-text-color: #fff;
14942 --f7-message-received-bg-color: #e5e5ea;
14943 --f7-message-received-text-color: #000;
14944}
5d51ea26
DC
14945:root .theme-dark,
14946:root.theme-dark {
14947 --f7-messages-content-bg-color: transparent;
14948 --f7-message-received-bg-color: #333;
14949 --f7-message-received-text-color: #fff;
14950 --f7-message-typing-indicator-bg-color: #fff;
14951}
5309fbda
DC
14952.ios {
14953 --f7-messages-title-text-color: #8e8e93;
14954 --f7-messages-title-font-size: 11px;
14955 --f7-message-header-text-color: #8e8e93;
14956 --f7-message-footer-text-color: #8e8e93;
14957 --f7-message-name-text-color: #8e8e93;
14958 --f7-message-avatar-size: 29px;
14959 --f7-message-margin: 10px;
5d51ea26 14960 --f7-message-bubble-min-height: 32px;
5309fbda
DC
14961 --f7-message-bubble-font-size: 17px;
14962 --f7-message-bubble-border-radius: 16px;
14963 --f7-message-bubble-padding-vertical: 6px;
14964 --f7-message-bubble-padding-horizontal: 16px;
14965 --f7-message-typing-indicator-opacity: 0.35;
14966}
5309fbda
DC
14967.md {
14968 --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
14969 --f7-messages-title-font-size: 12px;
14970 --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
14971 --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
14972 --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
14973 --f7-message-avatar-size: 32px;
14974 --f7-message-margin: 16px;
5d51ea26 14975 --f7-message-bubble-min-height: 32px;
5309fbda
DC
14976 --f7-message-bubble-font-size: 16px;
14977 --f7-message-bubble-border-radius: 4px;
14978 --f7-message-bubble-padding-vertical: 6px;
14979 --f7-message-bubble-padding-horizontal: 8px;
14980 --f7-message-typing-indicator-opacity: 0.6;
14981}
14982.md .theme-dark,
14983.md.theme-dark {
5309fbda
DC
14984 --f7-messages-title-text-color: rgba(255, 255, 255, 0.54);
14985 --f7-message-header-text-color: rgba(255, 255, 255, 0.54);
14986 --f7-message-name-text-color: rgba(255, 255, 255, 0.54);
14987 --f7-message-footer-text-color: rgba(255, 255, 255, 0.54);
5d51ea26
DC
14988}
14989.aurora {
14990 --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
14991 --f7-messages-title-font-size: 12px;
14992 --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
14993 --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
14994 --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
14995 --f7-message-avatar-size: 24px;
14996 --f7-message-margin: 10px;
14997 --f7-message-bubble-min-height: 28px;
14998 --f7-message-bubble-font-size: 13px;
14999 --f7-message-bubble-line-height: 1.4;
15000 --f7-message-bubble-border-radius: 14px;
15001 --f7-message-bubble-padding-vertical: 5px;
15002 --f7-message-bubble-padding-horizontal: 10px;
15003 --f7-message-typing-indicator-opacity: 0.5;
15004}
15005.aurora .theme-dark,
15006.aurora.theme-dark {
15007 --f7-messages-title-text-color: rgba(255, 255, 255, 0.52);
15008 --f7-message-header-text-color: rgba(255, 255, 255, 0.52);
15009 --f7-message-name-text-color: rgba(255, 255, 255, 0.52);
15010 --f7-message-footer-text-color: rgba(255, 255, 255, 0.52);
5309fbda
DC
15011}
15012.messages-content,
15013.messages {
15014 background: var(--f7-messages-content-bg-color);
15015}
15016.messages {
15017 display: flex;
15018 flex-direction: column;
15019 min-height: 100%;
15020 position: relative;
15021 z-index: 1;
15022}
15023.messages-title,
15024.message {
15025 margin-top: var(--f7-message-margin);
15026}
15027.messages-title:last-child,
15028.message:last-child {
15029 margin-bottom: var(--f7-message-margin);
15030}
15031.messages-title {
15032 text-align: center;
15033 width: 100%;
15034 line-height: 1;
15035 color: var(--f7-messages-title-text-color);
15036 font-size: var(--f7-messages-title-font-size);
5d51ea26 15037 font-weight: var(--f7-messages-title-font-weight);
5309fbda
DC
15038}
15039.message {
15040 max-width: 70%;
15041 box-sizing: border-box;
15042 display: flex;
15043 align-items: flex-end;
15044 position: relative;
15045 z-index: 1;
15046 transform: translate3d(0, 0, 0);
15047}
15048.message-avatar {
5d51ea26 15049 border-radius: var(--f7-message-avatar-border-radius);
5309fbda
DC
15050 position: relative;
15051 background-size: cover;
15052 align-self: flex-end;
15053 flex-shrink: 0;
15054 width: var(--f7-message-avatar-size);
15055 height: var(--f7-message-avatar-size);
15056}
15057.message-content {
15058 position: relative;
15059 display: flex;
15060 flex-direction: column;
15061}
15062.message-header,
15063.message-footer,
15064.message-name {
15065 line-height: 1;
15066}
15067.message-header {
15068 color: var(--f7-message-header-text-color);
15069 font-size: var(--f7-message-header-font-size);
15070}
15071.message-footer {
15072 color: var(--f7-message-footer-text-color);
15073 font-size: var(--f7-message-footer-font-size);
15074 margin-bottom: -1em;
15075}
15076.message-name {
15077 color: var(--f7-message-name-text-color);
15078 font-size: var(--f7-message-name-font-size);
5d51ea26 15079 font-weight: var(--f7-message-name-font-weight);
5309fbda
DC
15080}
15081.message-bubble {
15082 box-sizing: border-box;
15083 word-break: break-word;
15084 display: flex;
15085 flex-direction: column;
15086 position: relative;
15087 line-height: var(--f7-message-bubble-line-height);
15088 font-size: var(--f7-message-bubble-font-size);
15089 border-radius: var(--f7-message-bubble-border-radius);
15090 padding: var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);
5d51ea26 15091 min-height: var(--f7-message-bubble-min-height);
5309fbda
DC
15092}
15093.message-image img {
15094 display: block;
15095 max-width: 100%;
15096 height: auto;
15097 width: auto;
15098}
15099.message-text-header,
15100.message-text-footer {
15101 line-height: 1;
15102}
15103.message-text-header {
15104 color: var(--f7-message-text-header-text-color);
15105 opacity: var(--f7-message-text-header-opacity);
15106 font-size: var(--f7-message-text-header-font-size);
15107}
15108.message-text-footer {
15109 color: var(--f7-message-text-footer-text-color);
15110 opacity: var(--f7-message-text-footer-opacity);
15111 font-size: var(--f7-message-text-footer-font-size);
15112}
15113.message-text {
15114 text-align: left;
15115}
15116.message-sent {
15117 text-align: right;
15118 flex-direction: row;
15119 align-self: flex-start;
15120}
15121.message-sent .message-bubble {
15122 color: var(--f7-message-sent-text-color);
15123 background: var(--f7-message-sent-bg-color, var(--f7-theme-color));
15124}
15125.message-sent .message-content {
15126 align-items: flex-start;
15127}
15128.message-sent.message-tail .message-bubble {
15129 border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius);
15130}
15131.message-received {
15132 flex-direction: row-reverse;
15133 align-self: flex-end;
15134}
15135.message-received .message-bubble {
15136 color: var(--f7-message-received-text-color);
15137 background: var(--f7-message-received-bg-color);
15138}
15139.message-received .message-content {
15140 align-items: flex-end;
15141}
15142.message-received.message-tail .message-bubble {
15143 border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0;
15144}
15145.message:not(.message-last) .message-avatar {
15146 opacity: 0;
15147}
15148.message:not(.message-first) .message-name {
15149 display: none;
15150}
15151.message.message-same-name .message-name {
15152 display: none;
15153}
15154.message.message-same-header .message-header {
15155 display: none;
15156}
15157.message.message-same-footer .message-footer {
15158 display: none;
15159}
15160.message-appear-from-bottom {
15161 animation: message-appear-from-bottom 300ms;
15162}
15163.message-appear-from-top {
15164 animation: message-appear-from-top 300ms;
15165}
15166.message-typing-indicator {
15167 display: inline-block;
15168 font-size: 0;
15169 vertical-align: middle;
15170}
15171.message-typing-indicator > div {
15172 display: inline-block;
15173 position: relative;
15174 background: var(--f7-message-typing-indicator-bg-color);
15175 opacity: var(--f7-message-typing-indicator-opacity);
15176 vertical-align: middle;
15177 border-radius: 50%;
15178}
15179@keyframes message-appear-from-bottom {
15180 from {
15181 transform: translate3d(0, 100%, 0);
15182 }
15183 to {
15184 transform: translate3d(0, 0, 0);
15185 }
15186}
15187@keyframes message-appear-from-top {
15188 from {
15189 transform: translate3d(0, -100%, 0);
15190 }
15191 to {
15192 transform: translate3d(0, 0, 0);
15193 }
15194}
15195.ios .messages-title b,
15196.ios .message-header b,
15197.ios .message-footer b,
15198.ios .message-name b {
15199 font-weight: 600;
15200}
15201.ios .message-header,
15202.ios .message-name {
15203 margin-bottom: 3px;
15204}
15205.ios .message-footer {
15206 margin-top: 3px;
15207}
15208.ios .message-bubble {
15209 min-width: 48px;
15210}
15211.ios .message-image {
15212 margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal));
15213}
15214.ios .message-image:first-child {
15215 margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical));
15216}
15217.ios .message-image:first-child img {
15218 border-top-left-radius: var(--f7-message-bubble-border-radius);
15219 border-top-right-radius: var(--f7-message-bubble-border-radius);
15220}
15221.ios .message-image:last-child {
15222 margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical));
15223}
15224.ios .message-image:last-child img {
15225 border-bottom-left-radius: var(--f7-message-bubble-border-radius);
15226 border-bottom-right-radius: var(--f7-message-bubble-border-radius);
15227}
15228.ios .message-text-header {
15229 margin-bottom: 3px;
15230}
15231.ios .message-text-footer {
15232 margin-top: 3px;
15233}
15234.ios .message-received {
15235 margin-left: calc(10px + var(--f7-safe-area-left));
15236}
15237.ios .message-received .message-header,
15238.ios .message-received .message-footer,
15239.ios .message-received .message-name {
15240 margin-left: var(--f7-message-bubble-padding-horizontal);
15241}
15242.ios .message-received .message-bubble {
15243 padding-left: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
15244 -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%;
15245}
15246.ios .message-received .message-image {
15247 margin-left: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
15248}
15249.ios .message-received.message-tail:not(.message-typing) .message-bubble {
15250 -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%;
15251}
15252.ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img {
15253 border-bottom-left-radius: 0px;
15254}
15255.ios .message-sent {
15256 margin-right: calc(10px + var(--f7-safe-area-right));
15257}
15258.ios .message-sent .message-header,
15259.ios .message-sent .message-footer,
15260.ios .message-sent .message-name {
15261 margin-right: var(--f7-message-bubble-padding-horizontal);
15262}
15263.ios .message-sent .message-bubble {
15264 padding-right: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
15265 -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%;
15266}
15267.ios .message-sent .message-image {
15268 margin-right: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
15269}
15270.ios .message-sent.message-tail .message-bubble {
15271 -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%;
15272}
15273.ios .message-sent.message-tail .message-bubble .message-image:last-child img {
15274 border-bottom-right-radius: 0px;
15275}
15276.ios .message + .message:not(.message-first) {
15277 margin-top: 1px;
15278}
15279.ios .message-received.message-typing .message-content:after,
15280.ios .message-received.message-typing .message-content:before {
15281 content: '';
15282 position: absolute;
15283 background: var(--f7-message-received-bg-color);
15284 border-radius: 50%;
15285}
15286.ios .message-received.message-typing .message-content:after {
15287 width: 11px;
15288 height: 11px;
15289 left: 4px;
15290 bottom: 0px;
15291}
15292.ios .message-received.message-typing .message-content:before {
15293 width: 6px;
15294 height: 6px;
15295 left: -1px;
15296 bottom: -4px;
15297}
15298.ios .message-typing-indicator > div {
15299 width: 9px;
15300 height: 9px;
15301}
15302.ios .message-typing-indicator > div + div {
15303 margin-right: 4px;
15304}
15305.ios .message-typing-indicator > div:nth-child(1) {
15306 animation: ios-message-typing-indicator 900ms infinite;
15307}
15308.ios .message-typing-indicator > div:nth-child(2) {
15309 animation: ios-message-typing-indicator 900ms 150ms infinite;
15310}
15311.ios .message-typing-indicator > div:nth-child(3) {
15312 animation: ios-message-typing-indicator 900ms 300ms infinite;
15313}
15314@keyframes ios-message-typing-indicator {
15315 0% {
15316 opacity: 0.35;
15317 }
15318 25% {
15319 opacity: 0.2;
15320 }
15321 50% {
15322 opacity: 0.2;
15323 }
15324}
15325.md .messages-title b,
15326.md .message-header b,
15327.md .message-footer b,
15328.md .message-name b {
15329 font-weight: 500;
15330}
15331.md .message-header,
15332.md .message-name {
15333 margin-bottom: 2px;
15334}
15335.md .message-footer {
15336 margin-top: 2px;
15337}
15338.md .message-text-header {
15339 margin-bottom: 4px;
15340}
15341.md .message-text-footer {
15342 margin-top: 4px;
15343}
15344.md .message-received.message-tail .message-bubble:before,
15345.md .message-sent.message-tail .message-bubble:before {
15346 position: absolute;
15347 content: '';
15348 bottom: 0;
15349 width: 0;
15350 height: 0;
15351}
15352.md .message-received {
15353 margin-left: calc(8px + var(--f7-safe-area-left));
15354}
15355.md .message-received .message-avatar + .message-content {
15356 margin-left: var(--f7-message-bubble-padding-horizontal);
15357}
15358.md .message-received.message-tail .message-bubble:before {
15359 border-left: 8px solid transparent;
15360 border-right: 0 solid transparent;
15361 border-bottom: 8px solid var(--f7-message-received-bg-color);
15362 right: 100%;
15363}
15364.md .message-sent {
15365 margin-right: calc(8px + var(--f7-safe-area-right));
15366}
15367.md .message-sent .message-avatar + .message-content {
15368 margin-right: var(--f7-message-bubble-padding-horizontal);
15369}
15370.md .message-sent.message-tail .message-bubble:before {
15371 border-left: 0 solid transparent;
15372 border-right: 8px solid transparent;
15373 border-bottom: 8px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
15374 left: 100%;
15375}
15376.md .message + .message:not(.message-first) {
15377 margin-top: 8px;
15378}
15379.md .message-typing-indicator > div {
15380 width: 6px;
15381 height: 6px;
15382}
15383.md .message-typing-indicator > div + div {
15384 margin-right: 6px;
15385}
15386.md .message-typing-indicator > div:nth-child(1) {
15387 animation: md-message-typing-indicator 900ms infinite;
15388}
15389.md .message-typing-indicator > div:nth-child(2) {
15390 animation: md-message-typing-indicator 900ms 150ms infinite;
15391}
15392.md .message-typing-indicator > div:nth-child(3) {
15393 animation: md-message-typing-indicator 900ms 300ms infinite;
15394}
15395@keyframes md-message-typing-indicator {
15396 0% {
15397 transform: translateY(0%);
15398 }
15399 25% {
15400 transform: translateY(-5px);
15401 }
15402 50% {
15403 transform: translateY(0%);
15404 }
15405}
5d51ea26
DC
15406.aurora .messages-title b,
15407.aurora .message-header b,
15408.aurora .message-footer b,
15409.aurora .message-name b {
15410 font-weight: 500;
15411}
15412.aurora .message-header,
15413.aurora .message-name {
15414 margin-bottom: 2px;
15415}
15416.aurora .message-footer {
15417 margin-top: 2px;
15418}
15419.aurora .message-text-header {
15420 margin-bottom: 2px;
15421}
15422.aurora .message-text-footer {
15423 margin-top: 2px;
15424}
15425.aurora .message-received.message-tail .message-bubble:before,
15426.aurora .message-sent.message-tail .message-bubble:before {
15427 position: absolute;
15428 content: '';
15429 bottom: 0;
15430 width: 0;
15431 height: 0;
15432}
15433.aurora .message-image {
15434 margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal) + 4px);
15435}
15436.aurora .message-image:first-child {
15437 margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical) + 4px);
15438}
15439.aurora .message-image:first-child img {
15440 border-top-left-radius: var(--f7-message-bubble-border-radius);
15441 border-top-right-radius: var(--f7-message-bubble-border-radius);
15442}
15443.aurora .message-image:last-child {
15444 margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical) + 4px);
15445}
15446.aurora .message-image:last-child img {
15447 border-bottom-left-radius: var(--f7-message-bubble-border-radius);
15448 border-bottom-right-radius: var(--f7-message-bubble-border-radius);
15449}
15450.aurora .message-received {
15451 margin-left: calc(15px + var(--f7-safe-area-left));
15452}
15453.aurora .message-received .message-avatar + .message-content {
15454 margin-left: 5px;
15455}
15456.aurora .message-received .message-header,
15457.aurora .message-received .message-footer,
15458.aurora .message-received .message-name {
15459 margin-left: var(--f7-message-bubble-padding-horizontal);
15460}
15461.aurora .message-received.message-tail .message-bubble:before {
15462 border-left: 6px solid transparent;
15463 border-right: 0 solid transparent;
15464 border-bottom: 6px solid var(--f7-message-received-bg-color);
15465 right: 100%;
15466 transform: translate(2px, 0px) rotate(-15deg);
15467 transform-origin: right bottom;
15468}
15469.aurora .message-sent {
15470 margin-right: calc(15px + var(--f7-safe-area-right));
15471}
15472.aurora .message-sent .message-avatar + .message-content {
15473 margin-right: 5px;
15474}
15475.aurora .message-sent .message-header,
15476.aurora .message-sent .message-footer,
15477.aurora .message-sent .message-name {
15478 margin-right: var(--f7-message-bubble-padding-horizontal);
15479}
15480.aurora .message-sent.message-tail .message-bubble:before {
15481 border-left: 0 solid transparent;
15482 border-right: 6px solid transparent;
15483 border-bottom: 6px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
15484 left: 100%;
15485 transform: translate(-2px, 0px) rotate(15deg);
15486 transform-origin: left bottom;
15487}
15488.aurora .message + .message:not(.message-first) {
15489 margin-top: 5px;
15490}
15491.aurora .message-typing-indicator > div {
15492 width: 6px;
15493 height: 6px;
15494}
15495.aurora .message-typing-indicator > div + div {
15496 margin-right: 4px;
15497}
15498.aurora .message-typing-indicator > div:nth-child(1) {
15499 animation: aurora-message-typing-indicator 900ms infinite;
15500}
15501.aurora .message-typing-indicator > div:nth-child(2) {
15502 animation: aurora-message-typing-indicator 900ms 150ms infinite;
15503}
15504.aurora .message-typing-indicator > div:nth-child(3) {
15505 animation: aurora-message-typing-indicator 900ms 300ms infinite;
15506}
15507@keyframes aurora-message-typing-indicator {
15508 0% {
15509 transform: translateY(0%);
15510 }
15511 50% {
15512 transform: translateY(-5px);
15513 }
15514 100% {
15515 transform: translateY(0%);
15516 }
15517}
5309fbda
DC
15518/* === Messagebar === */
15519:root {
15520 --f7-messagebar-bg-color: #fff;
5d51ea26 15521 --f7-messagebar-shadow-image: none;
5309fbda
DC
15522 --f7-messagebar-textarea-bg-color: transparent;
15523 --f7-messagebar-attachments-height: 155px;
15524 --f7-messagebar-attachment-height: 155px;
15525 --f7-messagebar-attachment-landscape-height: 120px;
15526 --f7-messagebar-sheet-height: 252px;
15527 --f7-messagebar-sheet-landscape-height: 192px;
5d51ea26
DC
15528 /*
15529 --f7-messagebar-inner-padding-left: var(--f7-toolbar-inner-padding-left);
15530 --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
15531 */
15532}
15533:root .theme-dark,
15534:root.theme-dark {
15535 --f7-messagebar-bg-color: var(--f7-bars-bg-color);
5309fbda
DC
15536}
15537.ios {
15538 --f7-messagebar-height: 44px;
15539 --f7-messagebar-font-size: 17px;
15540 /*
15541 --f7-messagebar-link-color: var(--f7-theme-color);
15542 */
15543 --f7-messagebar-border-color: transparent;
5309fbda
DC
15544 --f7-messagebar-textarea-border-radius: 17px;
15545 --f7-messagebar-textarea-padding: 6px 15px;
15546 --f7-messagebar-textarea-height: 34px;
15547 --f7-messagebar-textarea-text-color: #000;
15548 --f7-messagebar-textarea-font-size: 17px;
15549 --f7-messagebar-textarea-line-height: 20px;
15550 --f7-messagebar-textarea-border: 1px solid #c8c8cd;
15551 --f7-messagebar-sheet-bg-color: #d1d5da;
15552 --f7-messagebar-attachments-border-color: #c8c8cd;
15553 --f7-messagebar-attachment-border-radius: 12px;
15554}
15555.ios .theme-dark,
15556.ios.theme-dark {
5309fbda
DC
15557 --f7-messagebar-textarea-text-color: #fff;
15558 --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
15559 --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
15560}
15561.md {
15562 --f7-messagebar-height: 48px;
15563 --f7-messagebar-font-size: 16px;
15564 --f7-messagebar-link-color: #333;
15565 --f7-messagebar-border-color: #d1d1d1;
5309fbda
DC
15566 --f7-messagebar-textarea-border-radius: 0px;
15567 --f7-messagebar-textarea-padding: 5px 8px;
15568 --f7-messagebar-textarea-height: 32px;
15569 --f7-messagebar-textarea-text-color: #333;
15570 --f7-messagebar-textarea-font-size: 16px;
15571 --f7-messagebar-textarea-line-height: 22px;
15572 --f7-messagebar-textarea-border: 1px solid transparent;
15573 --f7-messagebar-sheet-bg-color: #fff;
15574 --f7-messagebar-attachments-border-color: #ddd;
15575 --f7-messagebar-attachment-border-radius: 4px;
15576}
15577.md .theme-dark,
15578.md.theme-dark {
5309fbda
DC
15579 --f7-messagebar-border-color: #282829;
15580 --f7-messagebar-link-color: rgba(255, 255, 255, 0.87);
15581 --f7-messagebar-textarea-text-color: rgba(255, 255, 255, 0.87);
15582 --f7-messagebar-attachments-border-color: rgba(255, 255, 255, 0.2);
15583}
5d51ea26
DC
15584.aurora {
15585 --f7-messagebar-height: 38px;
15586 --f7-messagebar-font-size: 14px;
15587 /*
15588 --f7-messagebar-link-color: var(--f7-theme-color);
15589 */
15590 --f7-messagebar-border-color: transparent;
15591 --f7-messagebar-textarea-border-radius: 12px;
15592 --f7-messagebar-textarea-padding: 3px 10px;
15593 --f7-messagebar-textarea-height: 24px;
15594 --f7-messagebar-textarea-text-color: #000;
15595 --f7-messagebar-textarea-font-size: 13px;
15596 --f7-messagebar-textarea-line-height: 16px;
15597 --f7-messagebar-textarea-border: 1px solid #c8c8cd;
15598 --f7-messagebar-sheet-bg-color: #fff;
15599 --f7-messagebar-attachments-border-color: #c8c8cd;
15600 --f7-messagebar-attachment-border-radius: 12px;
15601}
15602.aurora .theme-dark,
15603.aurora.theme-dark {
15604 --f7-messagebar-textarea-text-color: #fff;
15605 --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
15606 --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
15607}
5309fbda
DC
15608.messagebar {
15609 transform: translate3d(0, 0, 0);
15610 background: var(--f7-messagebar-bg-color);
15611 height: auto;
15612 min-height: var(--f7-messagebar-height);
15613 font-size: var(--f7-messagebar-font-size);
15614 padding-bottom: var(--f7-safe-area-bottom);
15615 bottom: 0;
15616}
15617.messagebar:before {
15618 content: '';
15619 position: absolute;
15620 background-color: var(--f7-messagebar-border-color);
15621 display: block;
15622 z-index: 15;
15623 top: 0;
15624 right: auto;
15625 bottom: auto;
15626 left: 0;
15627 height: 1px;
15628 width: 100%;
15629 transform-origin: 50% 0%;
15630 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
15631}
15632.messagebar:after {
15633 content: '';
15634 position: absolute;
15635 right: 0;
15636 width: 100%;
15637 bottom: 100%;
15638 height: 8px;
15639 top: auto;
15640 pointer-events: none;
15641 background: var(--f7-messagebar-shadow-image);
15642}
15643.messagebar.no-hairline:before,
15644.messagebar.no-border:before {
15645 display: none !important;
15646}
15647.messagebar.no-shadow:after,
15648.messagebar.toolbar-hidden:after {
15649 display: none !important;
15650}
15651.messagebar .toolbar-inner {
15652 top: auto;
15653 position: relative;
15654 height: auto;
15655 bottom: auto;
5d51ea26
DC
15656 padding-left: calc(var(--f7-messagebar-inner-padding-left, var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));
15657 padding-right: calc(var(--f7-messagebar-inner-padding-right, var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));
5309fbda
DC
15658 flex-direction: row-reverse;
15659}
15660.messagebar.messagebar-sheet-visible > .toolbar-inner {
15661 bottom: 0;
15662}
15663.messagebar .messagebar-area {
15664 width: 100%;
15665 flex-shrink: 1;
15666 overflow: hidden;
15667 position: relative;
15668}
15669.messagebar textarea {
15670 width: 100%;
15671 flex-shrink: 1;
15672 background-color: var(--f7-messagebar-textarea-bg-color);
15673 border-radius: var(--f7-messagebar-textarea-border-radius);
15674 padding: var(--f7-messagebar-textarea-padding);
15675 height: var(--f7-messagebar-textarea-height);
15676 color: var(--f7-messagebar-textarea-text-color);
15677 font-size: var(--f7-messagebar-textarea-font-size);
15678 line-height: var(--f7-messagebar-textarea-line-height);
15679 border: var(--f7-messagebar-textarea-border);
15680}
15681.messagebar a.link {
15682 align-self: flex-end;
15683 flex-shrink: 0;
15684 color: var(--f7-messagebar-link-color, var(--f7-theme-color));
15685}
15686.messagebar-attachments {
15687 width: 100%;
15688 will-change: scroll-position;
15689 overflow: auto;
15690 -webkit-overflow-scrolling: touch;
15691 font-size: 0;
15692 white-space: nowrap;
15693 box-sizing: border-box;
15694 position: relative;
15695}
15696.messagebar:not(.messagebar-attachments-visible) .messagebar-attachments {
15697 display: none;
15698}
15699.messagebar-attachment {
15700 background-size: cover;
15701 background-position: center;
15702 background-repeat: no-repeat;
15703 display: inline-block;
15704 vertical-align: middle;
15705 white-space: normal;
15706 height: var(--f7-messagebar-attachment-height);
15707 position: relative;
15708 border-radius: var(--f7-messagebar-attachment-border-radius);
15709}
15710@media (orientation: landscape) {
15711 .messagebar-attachment {
15712 height: var(--f7-messagebar-attachment-landscape-height);
15713 }
15714}
15715.messagebar-attachment img {
15716 display: block;
15717 width: auto;
15718 height: 100%;
15719 border-radius: var(--f7-messagebar-attachment-border-radius);
15720}
15721.messagebar-attachment + .messagebar-attachment {
15722 margin-right: 8px;
15723}
15724.messagebar-sheet {
15725 will-change: scroll-position;
15726 overflow: auto;
15727 -webkit-overflow-scrolling: touch;
15728 display: flex;
15729 flex-wrap: wrap;
15730 flex-direction: column;
15731 align-content: flex-start;
15732 height: var(--f7-messagebar-sheet-height);
15733 background-color: var(--f7-messagebar-sheet-bg-color);
15734 padding-left: var(--f7-safe-area-left);
15735 padding-right: var(--f7-safe-area-right);
15736}
15737@media (orientation: landscape) {
15738 .messagebar-sheet {
15739 height: var(--f7-messagebar-sheet-landscape-height);
15740 }
15741}
15742.messagebar-sheet-image,
15743.messagebar-sheet-item {
15744 box-sizing: border-box;
15745 flex-shrink: 0;
15746 margin-top: 1px;
15747 position: relative;
15748 overflow: hidden;
15749 height: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
15750 width: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
15751 margin-right: 1px;
15752}
15753@media (orientation: landscape) {
15754 .messagebar-sheet-image,
15755 .messagebar-sheet-item {
15756 width: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
15757 height: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
15758 }
15759}
15760.messagebar-sheet-image .icon-checkbox,
15761.messagebar-sheet-item .icon-checkbox,
15762.messagebar-sheet-image .icon-radio,
15763.messagebar-sheet-item .icon-radio {
15764 position: absolute;
15765 right: 8px;
15766 bottom: 8px;
15767}
15768.messagebar-sheet-image {
15769 background-size: cover;
15770 background-position: center;
15771 background-repeat: no-repeat;
15772}
15773.messagebar-attachment-delete {
15774 display: block;
15775 position: absolute;
15776 border-radius: 50%;
15777 box-sizing: border-box;
15778 cursor: pointer;
15779 box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
15780}
15781.messagebar-attachment-delete:after,
15782.messagebar-attachment-delete:before {
15783 position: absolute;
15784 content: '';
15785 left: 50%;
15786 top: 50%;
15787}
15788.messagebar-attachment-delete:after {
15789 transform: rotate(45deg);
15790}
15791.messagebar-attachment-delete:before {
15792 transform: rotate(-45deg);
15793}
15794.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet {
15795 display: none;
15796}
5d51ea26
DC
15797.messagebar ~ * {
15798 --f7-page-toolbar-bottom-offset: var(--f7-messagebar-height);
5309fbda
DC
15799}
15800.ios .messagebar a.link.icon-only:first-child {
15801 margin-left: -8px;
15802}
15803.ios .messagebar a.link.icon-only:last-child {
15804 margin-right: -8px;
15805}
15806.ios .messagebar a.link:not(.icon-only) + .messagebar-area {
15807 margin-left: 8px;
15808}
15809.ios .messagebar .messagebar-area + a.link:not(.icon-only) {
15810 margin-left: 8px;
15811}
15812.ios .messagebar-area {
15813 margin-top: 5px;
15814 margin-bottom: 5px;
15815}
15816.ios .messagebar-attachments {
15817 padding: 5px;
15818 border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
15819 border: 1px solid var(--f7-messagebar-attachments-border-color);
15820 border-bottom: none;
15821}
15822.ios .messagebar-attachments-visible .messagebar-attachments + textarea {
15823 border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
15824}
15825.ios .messagebar-attachment {
15826 font-size: 14px;
15827}
15828.ios .messagebar-attachment-delete {
15829 right: 5px;
15830 top: 5px;
15831 width: 20px;
15832 height: 20px;
15833 background: #7d7e80;
15834 border: 2px solid #fff;
15835}
15836.ios .messagebar-attachment-delete:after,
15837.ios .messagebar-attachment-delete:before {
15838 width: 10px;
15839 height: 2px;
15840 background: #fff;
15841 margin-left: -5px;
15842 margin-top: -1px;
15843}
15844.md .messagebar-attachments {
15845 padding: 8px;
15846 border-bottom: 1px solid var(--f7-messagebar-attachments-border-color);
15847}
15848.md .messagebar-area {
15849 margin-top: 8px;
15850 margin-bottom: 8px;
15851}
15852.md .messagebar-sheet-image .icon-checkbox,
15853.md .messagebar-sheet-item .icon-checkbox {
15854 border-color: #fff;
15855 background: rgba(255, 255, 255, 0.25);
15856 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
15857}
15858.md .messagebar-attachment-delete {
15859 right: 8px;
15860 top: 8px;
15861 width: 24px;
15862 height: 24px;
15863 background-color: var(--f7-theme-color);
15864 border-radius: 4px;
15865}
15866.md .messagebar-attachment-delete:after,
15867.md .messagebar-attachment-delete:before {
15868 width: 14px;
15869 height: 2px;
15870 background: #fff;
15871 margin-left: -7px;
15872 margin-top: -1px;
15873}
5d51ea26
DC
15874.aurora .messagebar a.link + .messagebar-area {
15875 margin-left: 5px;
15876}
15877.aurora .messagebar .messagebar-area + a.link {
15878 margin-left: 5px;
15879}
15880.aurora .messagebar-area {
15881 margin-top: 5px;
15882 margin-bottom: 5px;
15883}
15884.aurora .messagebar-sheet-image .icon-checkbox,
15885.aurora .messagebar-sheet-item .icon-checkbox {
15886 background: rgba(255, 255, 255, 0.25);
15887}
15888.aurora .messagebar-attachments {
15889 padding: 5px;
15890 border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
15891 border: 1px solid var(--f7-messagebar-attachments-border-color);
15892 border-bottom: none;
15893}
15894.aurora .messagebar-attachments-visible .messagebar-attachments + textarea {
15895 border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
15896}
15897.aurora .messagebar-attachment {
15898 font-size: 14px;
15899}
15900.aurora .messagebar-attachment-delete {
15901 right: 5px;
15902 top: 5px;
15903 width: 14px;
15904 height: 14px;
15905 background: #808080;
15906}
15907.aurora .messagebar-attachment-delete:after,
15908.aurora .messagebar-attachment-delete:before {
15909 width: 8px;
15910 height: 1px;
15911 background: #fff;
15912 margin-left: -4px;
15913 margin-top: -1px;
15914}
5309fbda
DC
15915/* === Swiper === */
15916.swiper-container {
15917 margin: 0 auto;
15918 position: relative;
15919 overflow: hidden;
15920 list-style: none;
15921 padding: 0;
15922 /* Fix of Webkit flickering */
15923 z-index: 1;
15924}
15925.swiper-container-no-flexbox .swiper-slide {
15926 float: left;
15927}
15928.swiper-container-vertical > .swiper-wrapper {
15929 flex-direction: column;
15930}
15931.swiper-wrapper {
15932 position: relative;
15933 width: 100%;
15934 height: 100%;
15935 z-index: 1;
15936 display: flex;
15937 transition-property: transform;
15938 box-sizing: content-box;
15939}
15940.swiper-container-android .swiper-slide,
15941.swiper-wrapper {
15942 transform: translate3d(0px, 0, 0);
15943}
15944.swiper-container-multirow > .swiper-wrapper {
15945 flex-wrap: wrap;
15946}
15947.swiper-container-free-mode > .swiper-wrapper {
15948 transition-timing-function: ease-out;
15949 margin: 0 auto;
15950}
15951.swiper-slide {
15952 flex-shrink: 0;
15953 width: 100%;
15954 height: 100%;
15955 position: relative;
15956 transition-property: transform;
15957}
15958.swiper-slide-invisible-blank {
15959 visibility: hidden;
15960}
15961/* Auto Height */
15962.swiper-container-autoheight,
15963.swiper-container-autoheight .swiper-slide {
15964 height: auto;
15965}
15966.swiper-container-autoheight .swiper-wrapper {
15967 align-items: flex-start;
15968 transition-property: transform, height;
15969}
15970/* 3D Effects */
15971.swiper-container-3d {
15972 perspective: 1200px;
15973}
15974.swiper-container-3d .swiper-wrapper,
15975.swiper-container-3d .swiper-slide,
15976.swiper-container-3d .swiper-slide-shadow-left,
15977.swiper-container-3d .swiper-slide-shadow-right,
15978.swiper-container-3d .swiper-slide-shadow-top,
15979.swiper-container-3d .swiper-slide-shadow-bottom,
15980.swiper-container-3d .swiper-cube-shadow {
15981 transform-style: preserve-3d;
15982}
15983.swiper-container-3d .swiper-slide-shadow-left,
15984.swiper-container-3d .swiper-slide-shadow-right,
15985.swiper-container-3d .swiper-slide-shadow-top,
15986.swiper-container-3d .swiper-slide-shadow-bottom {
15987 position: absolute;
15988 left: 0;
15989 top: 0;
15990 width: 100%;
15991 height: 100%;
15992 pointer-events: none;
15993 z-index: 10;
15994}
15995.swiper-container-3d .swiper-slide-shadow-left {
15996 background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
15997}
15998.swiper-container-3d .swiper-slide-shadow-right {
15999 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16000}
16001.swiper-container-3d .swiper-slide-shadow-top {
16002 background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16003}
16004.swiper-container-3d .swiper-slide-shadow-bottom {
16005 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16006}
16007/* IE10 Windows Phone 8 Fixes */
16008.swiper-container-wp8-horizontal,
16009.swiper-container-wp8-horizontal > .swiper-wrapper {
16010 touch-action: pan-y;
16011}
16012.swiper-container-wp8-vertical,
16013.swiper-container-wp8-vertical > .swiper-wrapper {
16014 touch-action: pan-x;
16015}
16016/* a11y */
16017.swiper-container .swiper-notification {
16018 position: absolute;
16019 left: 0;
16020 top: 0;
16021 pointer-events: none;
16022 opacity: 0;
16023 z-index: -1000;
16024}
16025.swiper-container-coverflow .swiper-wrapper {
16026 /* Windows 8 IE 10 fix */
16027 -ms-perspective: 1200px;
16028}
16029.swiper-container-cube {
16030 overflow: visible;
16031}
16032.swiper-container-cube .swiper-slide {
16033 pointer-events: none;
16034 -webkit-backface-visibility: hidden;
16035 backface-visibility: hidden;
16036 z-index: 1;
16037 visibility: hidden;
16038 transform-origin: 0 0;
16039 width: 100%;
16040 height: 100%;
16041}
16042.swiper-container-cube .swiper-slide .swiper-slide {
16043 pointer-events: none;
16044}
16045.swiper-container-cube.swiper-container-rtl .swiper-slide {
16046 transform-origin: 100% 0;
16047}
16048.swiper-container-cube .swiper-slide-active,
16049.swiper-container-cube .swiper-slide-active .swiper-slide-active {
16050 pointer-events: auto;
16051}
16052.swiper-container-cube .swiper-slide-active,
16053.swiper-container-cube .swiper-slide-next,
16054.swiper-container-cube .swiper-slide-prev,
16055.swiper-container-cube .swiper-slide-next + .swiper-slide {
16056 pointer-events: auto;
16057 visibility: visible;
16058}
16059.swiper-container-cube .swiper-slide-shadow-top,
16060.swiper-container-cube .swiper-slide-shadow-bottom,
16061.swiper-container-cube .swiper-slide-shadow-left,
16062.swiper-container-cube .swiper-slide-shadow-right {
16063 z-index: 0;
16064 -webkit-backface-visibility: hidden;
16065 backface-visibility: hidden;
16066}
16067.swiper-container-cube .swiper-cube-shadow {
16068 position: absolute;
16069 left: 0;
16070 bottom: 0px;
16071 width: 100%;
16072 height: 100%;
16073 background: #000;
16074 opacity: 0.6;
16075 -webkit-filter: blur(50px);
16076 filter: blur(50px);
16077 z-index: 0;
16078}
16079.swiper-container-fade.swiper-container-free-mode .swiper-slide {
16080 transition-timing-function: ease-out;
16081}
16082.swiper-container-fade .swiper-slide {
16083 pointer-events: none;
16084 transition-property: opacity;
16085}
16086.swiper-container-fade .swiper-slide .swiper-slide {
16087 pointer-events: none;
16088}
16089.swiper-container-fade .swiper-slide-active,
16090.swiper-container-fade .swiper-slide-active .swiper-slide-active {
16091 pointer-events: auto;
16092}
16093.swiper-container-flip {
16094 overflow: visible;
16095}
16096.swiper-container-flip .swiper-slide {
16097 pointer-events: none;
16098 -webkit-backface-visibility: hidden;
16099 backface-visibility: hidden;
16100 z-index: 1;
16101}
16102.swiper-container-flip .swiper-slide .swiper-slide {
16103 pointer-events: none;
16104}
16105.swiper-container-flip .swiper-slide-active,
16106.swiper-container-flip .swiper-slide-active .swiper-slide-active {
16107 pointer-events: auto;
16108}
16109.swiper-container-flip .swiper-slide-shadow-top,
16110.swiper-container-flip .swiper-slide-shadow-bottom,
16111.swiper-container-flip .swiper-slide-shadow-left,
16112.swiper-container-flip .swiper-slide-shadow-right {
16113 z-index: 0;
16114 -webkit-backface-visibility: hidden;
16115 backface-visibility: hidden;
16116}
16117/* Scrollbar */
16118.swiper-scrollbar {
16119 border-radius: 10px;
16120 position: relative;
16121 -ms-touch-action: none;
16122 background: rgba(0, 0, 0, 0.1);
16123}
16124.swiper-container-horizontal > .swiper-scrollbar {
16125 position: absolute;
16126 left: 1%;
16127 bottom: 3px;
16128 z-index: 50;
16129 height: 5px;
16130 width: 98%;
16131}
16132.swiper-container-vertical > .swiper-scrollbar {
16133 position: absolute;
16134 right: 3px;
16135 top: 1%;
16136 z-index: 50;
16137 width: 5px;
16138 height: 98%;
16139}
16140.swiper-scrollbar-drag {
16141 height: 100%;
16142 width: 100%;
16143 position: relative;
16144 background: rgba(0, 0, 0, 0.5);
16145 border-radius: 10px;
16146 left: 0;
16147 top: 0;
16148}
16149.swiper-scrollbar-cursor-drag {
16150 cursor: move;
16151}
16152.swiper-scrollbar-lock {
16153 display: none;
16154}
16155.swiper-zoom-container {
16156 width: 100%;
16157 height: 100%;
16158 display: flex;
16159 justify-content: center;
16160 align-items: center;
16161 text-align: center;
16162}
16163.swiper-zoom-container > img,
16164.swiper-zoom-container > svg,
16165.swiper-zoom-container > canvas {
16166 max-width: 100%;
16167 max-height: 100%;
16168 object-fit: contain;
16169}
16170.swiper-slide-zoomed {
16171 cursor: move;
16172}
16173.swiper-button-prev,
16174.swiper-button-next {
16175 position: absolute;
16176 top: 50%;
16177 width: 27px;
16178 height: 44px;
16179 line-height: 44px;
16180 text-align: center;
16181 margin-top: -22px;
16182 z-index: 10;
16183 cursor: pointer;
16184 color: var(--f7-theme-color);
16185}
16186.swiper-button-prev:after,
16187.swiper-button-next:after {
16188 font-family: 'framework7-core-icons';
16189 font-weight: normal;
16190 font-style: normal;
16191 line-height: 1;
16192 letter-spacing: normal;
16193 text-transform: none;
16194 white-space: nowrap;
16195 word-wrap: normal;
16196 direction: ltr;
16197 -webkit-font-smoothing: antialiased;
16198 text-rendering: optimizeLegibility;
16199 -moz-osx-font-smoothing: grayscale;
16200 -moz-font-feature-settings: "liga";
16201 font-feature-settings: "liga";
16202 text-align: center;
16203 display: block;
16204 width: 100%;
16205 height: 100%;
16206 font-size: 20px;
16207 font-size: 44px;
16208}
16209.swiper-button-prev.swiper-button-disabled,
16210.swiper-button-next.swiper-button-disabled {
16211 opacity: 0.35;
16212 cursor: auto;
16213 pointer-events: none;
16214}
16215.swiper-button-prev,
16216.swiper-container-rtl .swiper-button-next {
16217 left: 10px;
16218 right: auto;
16219}
16220.swiper-button-prev:after,
16221.swiper-container-rtl .swiper-button-next:after {
16222 content: 'swiper_prev';
16223}
16224.swiper-button-next,
16225.swiper-container-rtl .swiper-button-prev {
16226 right: 10px;
16227 left: auto;
16228}
16229.swiper-button-next:after,
16230.swiper-container-rtl .swiper-button-prev:after {
16231 content: 'swiper_next';
16232}
5d51ea26
DC
16233.swiper-button-lock {
16234 display: none;
16235}
5309fbda
DC
16236.swiper-pagination {
16237 position: absolute;
16238 text-align: center;
16239 transition: 300ms opacity;
16240 transform: translate3d(0, 0, 0);
16241 z-index: 10;
16242}
16243.swiper-pagination.swiper-pagination-hidden {
16244 opacity: 0;
16245}
16246.swiper-pagination-fraction,
16247.swiper-pagination-custom,
16248.swiper-container-horizontal > .swiper-pagination-bullets {
16249 bottom: 10px;
16250 left: 0;
16251 width: 100%;
16252}
16253.swiper-pagination-bullets-dynamic {
16254 overflow: hidden;
16255 font-size: 0;
16256}
16257.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16258 transform: scale(0.33);
16259 position: relative;
16260}
16261.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
16262 transform: scale(1);
16263}
16264.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
16265 transform: scale(0.66);
16266}
16267.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
16268 transform: scale(0.33);
16269}
16270.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
16271 transform: scale(0.66);
16272}
16273.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
16274 transform: scale(0.33);
16275}
16276.swiper-pagination-bullet {
16277 width: 8px;
16278 height: 8px;
16279 display: inline-block;
16280 border-radius: 100%;
16281 background: #000;
16282 opacity: 0.2;
16283}
16284button.swiper-pagination-bullet {
16285 border: none;
16286 margin: 0;
16287 padding: 0;
16288 box-shadow: none;
16289 -webkit-appearance: none;
16290 -moz-appearance: none;
16291 appearance: none;
16292}
16293.swiper-pagination-clickable .swiper-pagination-bullet {
16294 cursor: pointer;
16295}
16296.swiper-pagination-bullet-active {
16297 opacity: 1;
16298 background: var(--f7-theme-color);
16299}
16300.swiper-container-vertical > .swiper-pagination-bullets {
16301 right: 10px;
16302 top: 50%;
16303 transform: translate3d(0px, -50%, 0);
16304}
16305.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
16306 margin: 6px 0;
16307 display: block;
16308}
16309.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
16310 top: 50%;
16311 transform: translateY(-50%);
16312 width: 8px;
16313}
16314.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16315 display: inline-block;
16316 transition: 200ms transform, 200ms top;
16317}
16318.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
16319 margin: 0 4px;
16320}
16321.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
16322 left: 50%;
16323 transform: translateX(-50%);
16324 white-space: nowrap;
16325}
16326.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16327 transition: 200ms transform, 200ms left;
16328}
16329.swiper-pagination-progressbar {
16330 background: rgba(0, 0, 0, 0.25);
16331 position: absolute;
16332}
16333.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
16334 background: var(--f7-theme-color);
16335 position: absolute;
16336 left: 0;
16337 top: 0;
16338 width: 100%;
16339 height: 100%;
16340 transform: scale(0);
16341 transform-origin: left top;
16342}
16343.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
16344 transform-origin: right top;
16345}
16346.swiper-container-horizontal > .swiper-pagination-progressbar,
16347.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
16348 width: 100%;
16349 height: 4px;
16350 left: 0;
16351 top: 0;
16352}
16353.swiper-container-vertical > .swiper-pagination-progressbar,
16354.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
16355 width: 4px;
16356 height: 100%;
16357 left: 0;
16358 top: 0;
16359}
5d51ea26
DC
16360.swiper-pagination-lock {
16361 display: none;
16362}
16363.preloader.swiper-lazy-preloader {
5309fbda
DC
16364 position: absolute;
16365 left: 50%;
16366 top: 50%;
16367 z-index: 10;
16368 width: 32px;
16369 height: 32px;
16370 margin-left: -16px;
16371 margin-top: -16px;
16372}
16373/* === Photo Browser === */
16374:root {
16375 --f7-photobrowser-bg-color: #fff;
16376 --f7-photobrowser-bars-bg-image: none;
16377 /*
16378 --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
16379 --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
16380 --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
16381 */
16382 --f7-photobrowser-caption-font-size: 14px;
16383 --f7-photobrowser-caption-light-text-color: #000;
16384 --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
16385 --f7-photobrowser-caption-dark-text-color: #fff;
16386 --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
16387 --f7-photobrowser-exposed-bg-color: #000;
16388 --f7-photobrowser-dark-bg-color: #000;
16389 --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
16390 --f7-photobrowser-dark-bars-text-color: #fff;
16391 --f7-photobrowser-dark-bars-link-color: #fff;
16392}
16393.photo-browser {
16394 position: absolute;
16395 left: 0;
16396 top: 0;
16397 width: 100%;
16398 height: 100%;
16399 z-index: 400;
16400}
16401.photo-browser-standalone.modal-in {
16402 transition-duration: 0ms;
16403 animation: photo-browser-in 400ms;
16404}
16405.photo-browser-standalone.modal-out {
16406 transition-duration: 0ms;
16407 animation: photo-browser-out 400ms;
16408}
16409.photo-browser-standalone.modal-out.swipe-close-to-bottom,
16410.photo-browser-standalone.modal-out.swipe-close-to-top {
16411 animation: none;
16412}
16413.photo-browser-popup.modal-out.swipe-close-to-bottom,
16414.photo-browser-popup.modal-out.swipe-close-to-top {
16415 transition-duration: 300ms;
16416}
16417.photo-browser-popup.modal-out.swipe-close-to-bottom {
16418 transform: translate3d(0, 100%, 0);
16419}
16420.photo-browser-popup.modal-out.swipe-close-to-top {
16421 transform: translate3d(0, -100vh, 0);
16422}
16423.photo-browser-page {
16424 background: none;
16425}
16426.photo-browser-page .toolbar {
16427 transform: none;
16428}
16429.photo-browser-popup {
16430 background: none;
16431}
16432.photo-browser-of {
16433 margin: 0 5px;
16434}
16435.photo-browser-captions {
16436 pointer-events: none;
16437 position: absolute;
16438 left: 0;
16439 width: 100%;
16440 bottom: var(--f7-safe-area-bottom);
16441 z-index: 10;
16442 opacity: 1;
16443 transition: 400ms;
16444}
16445.photo-browser-captions.photo-browser-captions-exposed {
16446 opacity: 0;
16447}
16448.toolbar ~ .photo-browser-captions {
16449 bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
16450 transform: translate3d(0, 0px, 0);
16451}
16452.toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
16453 transform: translate3d(0, 0px, 0);
16454}
16455.photo-browser-caption {
16456 box-sizing: border-box;
16457 transition: 300ms;
16458 position: absolute;
16459 bottom: 0;
16460 left: 0;
16461 opacity: 0;
16462 padding: 4px 5px;
16463 width: 100%;
16464 text-align: center;
16465 font-size: var(--f7-photobrowser-caption-font-size);
16466}
16467.photo-browser-caption:empty {
16468 display: none;
16469}
16470.photo-browser-caption.photo-browser-caption-active {
16471 opacity: 1;
16472}
16473.photo-browser-captions-light .photo-browser-caption {
16474 color: var(--f7-photobrowser-caption-light-text-color);
16475 background: var(--f7-photobrowser-caption-light-bg-color);
16476}
16477.photo-browser-captions-dark .photo-browser-caption {
16478 color: var(--f7-photobrowser-caption-dark-text-color);
16479 background: var(--f7-photobrowser-caption-dark-bg-color);
16480}
16481.photo-browser-swiper-container {
16482 position: absolute;
16483 left: 0;
16484 top: 0;
16485 width: 100%;
16486 height: 100%;
16487 overflow: hidden;
16488 background: var(--f7-photobrowser-bg-color);
16489 transition: 400ms;
16490 transition-property: background-color;
16491}
16492.photo-browser-prev.swiper-button-disabled,
16493.photo-browser-next.swiper-button-disabled {
16494 opacity: 0.3;
16495 pointer-events: none;
16496}
16497.photo-browser-slide {
16498 width: 100%;
16499 height: 100%;
16500 position: relative;
16501 overflow: hidden;
16502 display: flex;
16503 justify-content: center;
16504 align-items: center;
16505 flex-shrink: 0;
16506 box-sizing: border-box;
16507}
16508.photo-browser-slide.photo-browser-transitioning {
16509 transition: 400ms;
16510 transition-property: transform;
16511}
16512.photo-browser-slide span.swiper-zoom-container {
16513 display: none;
16514}
16515.photo-browser-slide img {
16516 width: auto;
16517 height: auto;
16518 max-width: 100%;
16519 max-height: 100%;
16520 display: none;
16521}
16522.photo-browser-slide.swiper-slide-active span.swiper-zoom-container,
16523.photo-browser-slide.swiper-slide-next span.swiper-zoom-container,
16524.photo-browser-slide.swiper-slide-prev span.swiper-zoom-container {
16525 display: flex;
16526}
16527.photo-browser-slide.swiper-slide-active img,
16528.photo-browser-slide.swiper-slide-next img,
16529.photo-browser-slide.swiper-slide-prev img {
16530 display: inline;
16531}
16532.photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,
16533.photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,
16534.photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader {
16535 display: block;
16536}
16537.photo-browser-slide iframe {
16538 width: 100%;
16539 height: 100%;
16540}
16541.photo-browser-slide .preloader {
16542 display: none;
16543 position: absolute;
16544 width: 42px;
16545 height: 42px;
16546 margin-left: -21px;
16547 margin-top: -21px;
16548 left: 50%;
16549 top: 50%;
16550}
16551.photo-browser-page .navbar,
16552.view.with-photo-browser-page .navbar,
16553.photo-browser-page .toolbar,
16554.view.with-photo-browser-page .toolbar {
16555 background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95));
16556 background-image: var(--f7-photobrowser-bars-bg-image);
16557 transition: 400ms;
16558 color: var(--f7-photobrowser-bars-text-color, var(--f7-bars-text-color));
16559}
16560.photo-browser-page .navbar a,
16561.view.with-photo-browser-page .navbar a,
16562.photo-browser-page .toolbar a,
16563.view.with-photo-browser-page .toolbar a {
16564 color: var(--f7-photobrowser-bars-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
16565}
16566.photo-browser-exposed .navbar,
16567.photo-browser-exposed .toolbar {
16568 opacity: 0;
16569 visibility: hidden;
16570 pointer-events: none;
16571}
16572.photo-browser-exposed .toolbar ~ .photo-browser-captions {
16573 transform: translate3d(0, var(--f7-toolbar-height), 0);
16574}
16575.photo-browser-exposed .photo-browser-swiper-container {
16576 background: var(--f7-photobrowser-exposed-bg-color);
16577}
16578.photo-browser-exposed .photo-browser-caption {
16579 color: var(--f7-photobrowser-caption-dark-text-color);
16580 background: var(--f7-photobrowser-caption-dark-bg-color);
16581}
16582.view.with-photo-browser-page-exposed .navbar {
16583 opacity: 0;
16584}
16585.photo-browser-dark .photo-browser-swiper-container,
16586.photo-browser-page-dark .photo-browser-swiper-container,
16587.view.with-photo-browser-page-dark .photo-browser-swiper-container {
16588 background: var(--f7-photobrowser-dark-bg-color);
16589}
16590.photo-browser-dark .navbar,
16591.photo-browser-page-dark .navbar,
16592.view.with-photo-browser-page-dark .navbar,
16593.photo-browser-dark .toolbar,
16594.photo-browser-page-dark .toolbar,
16595.view.with-photo-browser-page-dark .toolbar {
16596 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
16597 --f7-link-highlight-color: var(--f7-link-highlight-white);
16598 background: var(--f7-photobrowser-dark-bars-bg-color);
16599 color: var(--f7-photobrowser-dark-bars-text-color);
16600}
16601.photo-browser-dark .navbar:before,
16602.photo-browser-page-dark .navbar:before,
16603.view.with-photo-browser-page-dark .navbar:before,
16604.photo-browser-dark .toolbar:before,
16605.photo-browser-page-dark .toolbar:before,
16606.view.with-photo-browser-page-dark .toolbar:before {
16607 display: none !important;
16608}
16609.photo-browser-dark .navbar:after,
16610.photo-browser-page-dark .navbar:after,
16611.view.with-photo-browser-page-dark .navbar:after,
16612.photo-browser-dark .toolbar:after,
16613.photo-browser-page-dark .toolbar:after,
16614.view.with-photo-browser-page-dark .toolbar:after {
16615 display: none !important;
16616}
16617.photo-browser-dark .navbar a,
16618.photo-browser-page-dark .navbar a,
16619.view.with-photo-browser-page-dark .navbar a,
16620.photo-browser-dark .toolbar a,
16621.photo-browser-page-dark .toolbar a,
16622.view.with-photo-browser-page-dark .toolbar a {
16623 color: var(--f7-photobrowser-dark-bars-link-color);
16624}
16625@keyframes photo-browser-in {
16626 0% {
16627 transform: translate3d(0, 0, 0) scale(0.5);
16628 opacity: 0;
16629 }
16630 50% {
16631 transform: translate3d(0, 0, 0) scale(1.05);
16632 opacity: 1;
16633 }
16634 100% {
16635 transform: translate3d(0, 0, 0) scale(1);
16636 opacity: 1;
16637 }
16638}
16639@keyframes photo-browser-out {
16640 0% {
16641 transform: translate3d(0, 0, 0) scale(1);
16642 opacity: 1;
16643 }
16644 50% {
16645 transform: translate3d(0, 0, 0) scale(1.05);
16646 opacity: 1;
16647 }
16648 100% {
16649 transform: translate3d(0, 0, 0) scale(0.5);
16650 opacity: 0;
16651 }
16652}
16653/* === Notifications === */
16654:root {
16655 --f7-notification-max-width: 568px;
5d51ea26
DC
16656 --f7-notification-subtitle-text-transform: none;
16657 --f7-notification-subtitle-line-height: 1.35;
16658 --f7-notification-text-text-transform: none;
16659 --f7-notification-text-font-weight: 400;
5309fbda
DC
16660}
16661.ios {
16662 --f7-notification-margin: 8px;
16663 --f7-notification-padding: 10px;
16664 --f7-notification-border-radius: 12px;
16665 --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
16666 --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
16667 --f7-notification-translucent-bg-color-ios: rgba(255, 255, 255, 0.65);
16668 --f7-notification-icon-size: 20px;
16669 --f7-notification-title-color: #000;
16670 --f7-notification-title-font-size: 13px;
16671 --f7-notification-title-text-transform: uppercase;
16672 --f7-notification-title-line-height: 1.4;
16673 --f7-notification-title-font-weight: 400;
16674 --f7-notification-title-letter-spacing: 0.02em;
16675 --f7-notification-title-right-color: #444a51;
16676 --f7-notification-title-right-font-size: 13px;
16677 --f7-notification-subtitle-color: #000;
16678 --f7-notification-subtitle-font-size: 15px;
5309fbda
DC
16679 --f7-notification-subtitle-font-weight: 600;
16680 --f7-notification-text-color: #000;
16681 --f7-notification-text-font-size: 15px;
5309fbda 16682 --f7-notification-text-line-height: 1.2;
5309fbda
DC
16683}
16684.md {
16685 --f7-notification-margin: 0px;
16686 --f7-notification-padding: 16px;
16687 --f7-notification-border-radius: 0px;
16688 --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
16689 --f7-notification-bg-color: #fff;
16690 --f7-notification-icon-size: 16px;
16691 --f7-notification-title-color: var(--f7-theme-color);
16692 --f7-notification-title-font-size: 12px;
16693 --f7-notification-title-text-transform: none;
16694 --f7-notification-title-line-height: 1;
16695 --f7-notification-title-font-weight: 400;
16696 --f7-notification-title-right-color: #757575;
16697 --f7-notification-title-right-font-size: 12px;
16698 --f7-notification-subtitle-color: #212121;
16699 --f7-notification-subtitle-font-size: 14px;
5309fbda
DC
16700 --f7-notification-subtitle-font-weight: 400;
16701 --f7-notification-text-color: #757575;
16702 --f7-notification-text-font-size: 14px;
5309fbda 16703 --f7-notification-text-line-height: 1.35;
5d51ea26
DC
16704}
16705.aurora {
16706 --f7-notification-margin: 10px;
16707 --f7-notification-padding: 10px;
16708 --f7-notification-border-radius: 4px;
16709 --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
16710 --f7-notification-bg-color: #fff;
16711 --f7-notification-icon-size: 18px;
16712 --f7-notification-title-color: #000;
16713 --f7-notification-title-font-size: 13px;
16714 --f7-notification-title-text-transform: uppercase;
16715 --f7-notification-title-line-height: 1.4;
16716 --f7-notification-title-font-weight: 500;
16717 --f7-notification-title-letter-spacing: 0.02em;
16718 --f7-notification-title-right-color: rgba(255, 255, 255, 0.6);
16719 --f7-notification-title-right-font-size: 13px;
16720 --f7-notification-subtitle-color: #000;
16721 --f7-notification-subtitle-font-size: 12px;
16722 --f7-notification-subtitle-font-weight: 600;
16723 --f7-notification-text-color: #000;
16724 --f7-notification-text-font-size: 12px;
16725 --f7-notification-text-line-height: 1.2;
5309fbda
DC
16726}
16727.notification {
16728 position: absolute;
16729 left: var(--f7-notification-margin);
16730 top: var(--f7-notification-margin);
16731 width: calc(100% - var(--f7-notification-margin) * 2);
16732 z-index: 20000;
16733 font-size: 14px;
16734 margin: 0;
16735 border: none;
16736 display: none;
16737 box-sizing: border-box;
16738 transition-property: transform;
16739 direction: ltr;
16740 max-width: var(--f7-notification-max-width);
16741 padding: var(--f7-notification-padding);
16742 border-radius: var(--f7-notification-border-radius);
16743 box-shadow: var(--f7-notification-box-shadow);
16744 background: var(--f7-notification-bg-color);
16745 margin-top: var(--f7-statusbar-height);
16746 --f7-link-highlight-color: var(--f7-link-highlight-black);
16747 --f7-touch-ripple-color: var(--f7-touch-ripple-black);
16748}
16749@media (min-width: 568px) {
16750 .notification {
16751 left: 50%;
16752 width: var(--f7-notification-max-width);
16753 margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
16754 }
16755}
16756.notification-title {
16757 color: var(--f7-notification-title-color, var(--f7-theme-color));
16758 font-size: var(--f7-notification-title-font-size);
16759 text-transform: var(--f7-notification-title-text-transform);
16760 line-height: var(--f7-notification-title-line-height);
16761 font-weight: var(--f7-notification-title-font-weight);
16762 letter-spacing: var(--f7-notification-title-letter-spacing);
16763}
16764.notification-subtitle {
16765 color: var(--f7-notification-subtitle-color);
16766 font-size: var(--f7-notification-subtitle-font-size);
16767 text-transform: var(--f7-notification-subtitle-text-transform);
16768 line-height: var(--f7-notification-subtitle-line-height);
16769 font-weight: var(--f7-notification-subtitle-font-weight);
16770}
16771.notification-text {
16772 color: var(--f7-notification-text-color);
16773 font-size: var(--f7-notification-text-font-size);
16774 text-transform: var(--f7-notification-text-text-transform);
16775 line-height: var(--f7-notification-text-line-height);
16776 font-weight: var(--f7-notification-text-font-weight);
16777}
16778.notification-title-right-text {
16779 color: var(--f7-notification-title-right-color);
16780 font-size: var(--f7-notification-title-right-font-size);
16781}
16782.notification-icon {
16783 font-size: 0;
16784 line-height: var(--f7-notification-icon-size);
16785}
16786.notification-icon i,
16787.notification-icon {
16788 width: var(--f7-notification-icon-size) !important;
16789 height: var(--f7-notification-icon-size) !important;
16790}
16791.notification-icon i {
16792 font-size: var(--f7-notification-icon-size);
16793}
16794.notification-header {
16795 display: flex;
16796 justify-content: flex-start;
16797 align-items: center;
16798}
16799.notification-close-button {
16800 margin-left: auto;
16801 cursor: pointer;
16802 position: relative;
16803}
16804.notification-close-button:after {
16805 font-family: 'framework7-core-icons';
16806 font-weight: normal;
16807 font-style: normal;
16808 line-height: 1;
16809 letter-spacing: normal;
16810 text-transform: none;
16811 white-space: nowrap;
16812 word-wrap: normal;
16813 direction: ltr;
16814 -webkit-font-smoothing: antialiased;
16815 text-rendering: optimizeLegibility;
16816 -moz-osx-font-smoothing: grayscale;
16817 -moz-font-feature-settings: "liga";
16818 font-feature-settings: "liga";
16819 display: block;
16820 width: 100%;
16821 height: 100%;
16822 font-size: 20px;
16823 position: absolute;
16824 left: 50%;
16825 top: 50%;
16826 text-align: center;
16827}
16828.ios .notification {
16829 transition-duration: 450ms;
16830 transform: translate3d(0%, -200%, 0);
16831}
16832@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
16833 .ios .notification {
16834 background: var(--f7-notification-translucent-bg-color-ios);
16835 -webkit-backdrop-filter: blur(10px);
16836 backdrop-filter: blur(10px);
16837 }
16838}
16839.ios .notification.modal-in {
16840 transform: translate3d(0%, 0%, 0);
16841 opacity: 1;
16842}
16843.ios .notification.modal-out {
16844 transform: translate3d(0%, -200%, 0);
16845}
16846.ios .notification-icon {
16847 margin-right: 8px;
16848}
16849.ios .notification-header + .notification-content {
16850 margin-top: 10px;
16851}
16852.ios .notification-title-right-text {
16853 margin-right: 6px;
16854 margin-left: auto;
16855}
16856.ios .notification-title-right-text + .notification-close-button {
16857 margin-left: 10px;
16858}
16859.ios .notification-close-button {
16860 font-size: 14px;
16861 width: 20px;
16862 height: 20px;
16863 opacity: 0.3;
16864 transition-duration: 300ms;
16865}
16866.ios .notification-close-button.active-state {
16867 transition-duration: 0ms;
16868 opacity: 0.1;
16869}
16870.ios .notification-close-button:after {
16871 color: #000;
16872 content: 'notification_close_ios';
16873 font-size: 0.65em;
16874 line-height: 44px;
16875 width: 44px;
16876 height: 44px;
16877 margin-left: -22px;
16878 margin-top: -22px;
16879}
16880.md .notification {
16881 transform: translate3d(0, -150%, 0);
16882}
16883.md .notification.modal-in {
16884 transition-duration: 0ms;
16885 animation: notification-md-in 400ms ease-out;
16886 transform: translate3d(0, 0%, 0);
16887}
16888.md .notification.modal-in.notification-transitioning {
16889 transition-duration: 200ms;
16890}
16891.md .notification.modal-out {
16892 animation: none;
16893 transition-duration: 200ms;
16894 transition-timing-function: ease-in;
16895 transform: translate3d(0, -150%, 0);
16896}
16897.md .notification-icon {
16898 margin-right: 8px;
16899}
16900.md .notification-subtitle + .notification-text {
16901 margin-top: 2px;
16902}
16903.md .notification-header + .notification-content {
16904 margin-top: 6px;
16905}
16906.md .notification-title-right-text {
16907 margin-left: 4px;
16908}
16909.md .notification-title-right-text:before {
16910 content: '';
16911 width: 3px;
16912 height: 3px;
16913 border-radius: 50%;
16914 display: inline-block;
16915 vertical-align: middle;
16916 margin-right: 4px;
16917 background: var(--f7-notification-title-right-color);
16918}
16919.md .notification-close-button {
16920 width: 16px;
16921 height: 16px;
16922 transition-duration: 300ms;
16923}
16924.md .notification-close-button:before {
16925 content: '';
16926 width: 152%;
16927 height: 152%;
16928 position: absolute;
16929 left: -26%;
16930 top: -26%;
16931 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
16932 background-repeat: no-repeat;
16933 background-position: center;
16934 background-size: 100% 100%;
16935 opacity: 0;
16936 pointer-events: none;
16937 transition-duration: 600ms;
16938}
16939.md .notification-close-button.active-state:before {
16940 opacity: 1;
16941 transition-duration: 150ms;
16942}
16943.md .notification-close-button:before,
16944.md .notification-close-button:after {
16945 width: 48px;
16946 height: 48px;
16947 left: 50%;
16948 top: 50%;
16949 margin-left: -24px;
16950 margin-top: -24px;
16951}
16952.md .notification-close-button:after {
16953 color: #737373;
16954 content: 'delete_md';
16955 line-height: 48px;
16956 font-size: 14px;
16957}
16958@keyframes notification-md-in {
16959 0% {
16960 transform: translate3d(0, -150%, 0);
16961 }
16962 50% {
16963 transform: translate3d(0, 10%, 0);
16964 }
16965 100% {
16966 transform: translate3d(0, 0%, 0);
16967 }
16968}
5d51ea26
DC
16969.aurora .notification {
16970 transition-duration: 450ms;
16971 transform: translate3d(0%, -200%, 0);
16972}
16973.aurora .notification.modal-in {
16974 transform: translate3d(0%, 0%, 0);
16975 opacity: 1;
16976}
16977.aurora .notification.modal-out {
16978 transform: translate3d(0%, -200%, 0);
16979}
16980.aurora .notification-icon {
16981 margin-right: 10px;
16982}
16983.aurora .notification-header + .notification-content {
16984 margin-top: 10px;
16985}
16986.aurora .notification-title-right-text {
16987 margin-right: 0px;
16988 margin-left: auto;
16989}
16990.aurora .notification-title-right-text + .notification-close-button {
16991 margin-left: 10px;
16992}
16993.aurora .notification-close-button {
16994 font-size: 14px;
16995 width: 16px;
16996 height: 16px;
16997 opacity: 0.4;
16998 transition-duration: 300ms;
16999}
17000.aurora .notification-close-button.active-state {
17001 transition-duration: 0ms;
17002 opacity: 0.6;
17003}
17004.aurora .notification-close-button:after {
17005 color: #000;
17006 content: 'notification_close_ios';
17007 font-size: 0.5em;
17008 line-height: 38px;
17009 width: 38px;
17010 height: 38px;
17011 margin-left: -19px;
17012 margin-top: -19px;
17013}
5309fbda
DC
17014/* === Autocomplete === */
17015:root {
17016 --f7-autocomplete-dropdown-bg-color: #fff;
17017 --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
17018 --f7-autocomplete-dropdown-preloader-size: 20px;
5d51ea26
DC
17019 /*
17020 --f7-autocomplete-dropdown-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
17021 */
5309fbda
DC
17022}
17023.ios {
17024 --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
17025 --f7-autocomplete-dropdown-text-color: #000;
17026 --f7-autocomplete-dropdown-text-matching-color: #000;
17027 --f7-autocomplete-dropdown-text-matching-font-weight: 600;
5d51ea26 17028 --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
5309fbda
DC
17029}
17030.ios .theme-dark,
17031.ios.theme-dark {
17032 --f7-autocomplete-dropdown-bg-color: #1c1c1d;
17033 --f7-autocomplete-dropdown-text-color: #fff;
17034 --f7-autocomplete-dropdown-text-matching-color: #fff;
17035}
17036.md {
17037 --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
17038 --f7-autocomplete-dropdown-text-color: rgba(0, 0, 0, 0.54);
17039 --f7-autocomplete-dropdown-text-matching-color: #212121;
17040 --f7-autocomplete-dropdown-text-matching-font-weight: 400;
5d51ea26 17041 --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
5309fbda
DC
17042}
17043.md .theme-dark,
17044.md.theme-dark {
17045 --f7-autocomplete-dropdown-bg-color: #1c1c1d;
17046 --f7-autocomplete-dropdown-text-color: rgba(255, 255, 255, 0.54);
17047 --f7-autocomplete-dropdown-text-matching-color: rgba(255, 255, 255, 0.87);
17048}
5d51ea26
DC
17049.aurora {
17050 --f7-autocomplete-dropdown-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
17051 --f7-autocomplete-dropdown-text-color: #000;
17052 --f7-autocomplete-dropdown-text-matching-color: #000;
17053 --f7-autocomplete-dropdown-text-matching-font-weight: 700;
17054 --f7-autocomplete-dropdown-font-size: 13px;
17055}
17056.aurora .theme-dark,
17057.aurora.theme-dark {
17058 --f7-autocomplete-dropdown-bg-color: #1c1c1c;
17059 --f7-autocomplete-dropdown-text-color: #fff;
17060 --f7-autocomplete-dropdown-text-matching-color: #fff;
17061}
5309fbda
DC
17062.autocomplete-page .autocomplete-found {
17063 display: block;
17064}
17065.autocomplete-page .autocomplete-not-found {
17066 display: none;
17067}
17068.autocomplete-page .autocomplete-values {
17069 display: block;
17070}
17071.autocomplete-page .list ul:empty {
17072 display: none;
17073}
17074.autocomplete-preloader:not(.autocomplete-preloader-visible) {
17075 visibility: hidden;
17076}
17077.autocomplete-preloader:not(.autocomplete-preloader-visible),
17078.autocomplete-preloader:not(.autocomplete-preloader-visible) * {
17079 animation: none;
17080}
17081.autocomplete-dropdown {
17082 background: var(--f7-autocomplete-dropdown-bg-color);
17083 box-shadow: var(--f7-autocomplete-dropdown-box-shadow);
17084 box-sizing: border-box;
17085 position: absolute;
17086 z-index: 500;
17087 width: 100%;
17088 right: 0;
17089}
17090.autocomplete-dropdown .autocomplete-dropdown-inner {
17091 position: relative;
17092 will-change: scroll-position;
17093 overflow: auto;
17094 -webkit-overflow-scrolling: touch;
17095 height: 100%;
17096 z-index: 1;
17097}
17098.autocomplete-dropdown .autocomplete-preloader {
17099 display: none;
17100 position: absolute;
17101 bottom: 100%;
17102 width: var(--f7-autocomplete-dropdown-preloader-size);
17103 height: var(--f7-autocomplete-dropdown-preloader-size);
17104}
17105.autocomplete-dropdown .autocomplete-preloader-visible {
17106 display: block;
17107}
17108.autocomplete-dropdown .autocomplete-dropdown-placeholder {
17109 color: var(--f7-autocomplete-dropdown-placeholder-color);
17110}
17111.autocomplete-dropdown .list {
17112 margin: 0;
17113 color: var(--f7-autocomplete-dropdown-text-color);
5d51ea26 17114 font-size: var(--f7-autocomplete-dropdown-font-size);
5309fbda
DC
17115}
17116.autocomplete-dropdown .list b {
17117 color: var(--f7-autocomplete-dropdown-text-matching-color);
17118 font-weight: var(--f7-autocomplete-dropdown-text-matching-font-weight);
17119}
17120.autocomplete-dropdown .list ul {
17121 background: none !important;
17122}
17123.autocomplete-dropdown .list ul:before {
17124 display: none !important;
17125}
17126.autocomplete-dropdown .list ul:after {
17127 display: none !important;
17128}
5d51ea26
DC
17129.autocomplete-dropdown .autocomplete-dropdown-selected {
17130 background: var(--f7-autocomplete-dropdown-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
17131}
5309fbda
DC
17132.searchbar-input-wrap .autocomplete-dropdown {
17133 background-color: var(--f7-searchbar-input-bg-color, var(--f7-searchbar-bg-color));
17134 border-radius: var(--f7-searchbar-input-border-radius);
17135}
17136.searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder {
17137 color: var(--f7-searchbar-placeholder-color);
17138}
17139.searchbar-input-wrap .autocomplete-dropdown li:last-child {
17140 border-radius: 0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius);
17141 position: relative;
17142 overflow: hidden;
17143}
17144.searchbar-input-wrap .autocomplete-dropdown .item-content {
5d51ea26 17145 padding-right: var(--f7-searchbar-input-padding-horizontal);
5309fbda
DC
17146}
17147.list .item-content-dropdown-expanded .item-title.item-label {
17148 width: 0;
17149 flex-shrink: 10;
17150 overflow: hidden;
17151}
17152.list .item-content-dropdown-expanded .item-title.item-label + .item-input-wrap {
17153 margin-right: 0;
17154}
17155.list .item-content-dropdown-expanded .item-input-wrap {
17156 width: 100%;
17157}
17158.ios .autocomplete-dropdown .autocomplete-preloader {
17159 left: 15px;
17160 margin-bottom: 12px;
17161}
17162.ios .searchbar-input-wrap .autocomplete-dropdown {
17163 margin-top: calc(-1 * var(--f7-searchbar-input-height));
17164 top: 100%;
17165 z-index: 20;
17166}
17167.ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
17168 padding-top: var(--f7-searchbar-input-height);
17169}
17170.md .autocomplete-page .navbar .autocomplete-preloader {
17171 margin-left: 8px;
17172}
5d51ea26
DC
17173.md .autocomplete-popup .navbar .autocomplete-preloader {
17174 margin-right: 8px;
17175 margin-left: 16px;
17176}
5309fbda
DC
17177.md .autocomplete-dropdown .autocomplete-preloader {
17178 left: 16px;
17179 margin-bottom: 8px;
17180}
17181.md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-gap,
17182.md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-half-circle {
17183 border-width: 3px;
17184}
5d51ea26
DC
17185.aurora .autocomplete-dropdown .autocomplete-preloader {
17186 left: 15px;
17187 margin-bottom: 2px;
17188}
17189.aurora .searchbar-input-wrap .autocomplete-dropdown {
17190 margin-top: calc(-1 * var(--f7-searchbar-input-height));
17191 top: 100%;
17192 z-index: 20;
17193}
17194.aurora .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
17195 padding-top: var(--f7-searchbar-input-height);
17196}
5309fbda
DC
17197/* === Tooltip === */
17198:root {
17199 --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
17200 --f7-tooltip-text-color: #fff;
17201 --f7-tooltip-border-radius: 4px;
17202 --f7-tooltip-padding: 8px 16px;
17203 --f7-tooltip-font-size: 14px;
17204 --f7-tooltip-font-weight: 500;
17205 --f7-tooltip-desktop-padding: 6px 8px;
17206 --f7-tooltip-desktop-font-size: 12px;
17207}
17208.tooltip {
17209 position: absolute;
17210 z-index: 20000;
17211 background: var(--f7-tooltip-bg-color);
17212 border-radius: var(--f7-tooltip-border-radius);
17213 padding: var(--f7-tooltip-padding);
17214 color: var(--f7-tooltip-text-color);
17215 font-size: var(--f7-tooltip-font-size);
17216 font-weight: var(--f7-tooltip-font-weight);
17217 box-sizing: border-box;
17218 line-height: 1.2;
17219 opacity: 0;
17220 transform: scale(0.9);
17221 transition-duration: 150ms;
17222 transition-property: opacity, transform;
17223 z-index: 99000;
17224}
17225.tooltip.tooltip-in {
17226 transform: scale(1);
17227 opacity: 1;
17228}
17229.tooltip.tooltip-out {
17230 opacity: 0;
17231 transform: scale(1);
17232}
17233.device-desktop .tooltip {
17234 font-size: var(--f7-tooltip-desktop-font-size);
17235 padding: var(--f7-tooltip-desktop-padding);
17236}
17237/* === Gauge === */
17238.gauge {
17239 position: relative;
17240 text-align: center;
17241 margin-left: auto;
17242 margin-right: auto;
17243 display: inline-block;
17244}
17245.gauge-svg,
17246.gauge svg {
17247 max-width: 100%;
17248 height: auto;
17249}
17250.gauge-svg circle,
17251.gauge svg circle,
17252.gauge-svg path,
17253.gauge svg path {
17254 transition-duration: 400ms;
17255}
17256/* === Skeleton === */
17257:root {
17258 --f7-skeleton-color: #ccc;
17259}
17260.theme-dark {
17261 --f7-skeleton-color: #515151;
17262}
17263.skeleton-text {
17264 font-family: 'framework7-skeleton' !important;
17265}
17266.skeleton-text,
17267.skeleton-text * {
17268 color: var(--f7-skeleton-color) !important;
17269 font-weight: normal !important;
17270 font-style: normal !important;
17271 letter-spacing: -0.015em !important;
17272}
17273.skeleton-block {
17274 height: 1em;
17275 background: var(--f7-skeleton-color) !important;
17276 width: 100%;
17277}
17278.skeleton-effect-fade {
17279 animation: skeleton-effect-fade 1s infinite;
17280}
17281.skeleton-effect-blink {
17282 -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
17283 mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
17284 -webkit-mask-size: 200% 100%;
17285 mask-size: 200% 100%;
17286 -webkit-mask-repeat: repeat;
17287 mask-repeat: repeat;
17288 -webkit-mask-position: 50% top;
17289 mask-position: 50% top;
17290 animation: skeleton-effect-blink 1s infinite;
17291}
17292.skeleton-effect-pulse {
17293 animation: skeleton-effect-pulse 1s infinite;
17294}
17295@keyframes skeleton-effect-fade {
17296 0% {
17297 opacity: 1;
17298 }
17299 50% {
17300 opacity: 0.2;
17301 }
17302 100% {
17303 opacity: 1;
17304 }
17305}
17306@keyframes skeleton-effect-blink {
17307 0% {
17308 -webkit-mask-position: 50% top;
17309 mask-position: 50% top;
17310 }
17311 100% {
17312 -webkit-mask-position: -150% top;
17313 mask-position: -150% top;
17314 }
17315}
17316@keyframes skeleton-effect-pulse {
17317 0% {
17318 transform: scale(1);
17319 }
17320 40% {
17321 transform: scale(1);
17322 }
17323 50% {
17324 transform: scale(0.975);
17325 }
17326 100% {
17327 transform: scale(1);
17328 }
17329}
17330/* === Menu === */
17331:root {
17332 --f7-menu-text-color: #fff;
17333 --f7-menu-font-size: 16px;
17334 --f7-menu-font-weight: 500;
17335 --f7-menu-line-height: 1.2;
17336 --f7-menu-bg-color: rgba(0, 0, 0, 0.9);
17337 --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9);
17338 --f7-menu-item-padding-horizontal: 12px;
17339 --f7-menu-item-spacing: 6px;
17340 --f7-menu-item-height: 40px;
17341 --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
17342 --f7-menu-item-border-radius: 8px;
17343 /*
17344 --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
17345 */
17346 --f7-menu-dropdown-item-height: 28px;
17347 --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
17348 --f7-menu-dropdown-padding-vertical: 6px;
17349 /*
17350 --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
17351 */
17352}
5d51ea26
DC
17353.aurora {
17354 --f7-menu-font-size: 13px;
17355 --f7-menu-item-height: 28px;
17356 --f7-menu-dropdown-item-height: 24px;
17357 --f7-menu-item-border-radius: 5px;
17358 --f7-menu-item-padding-horizontal: 10px;
17359}
5309fbda
DC
17360.menu {
17361 z-index: 1000;
17362 position: relative;
17363 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
17364}
17365.menu-inner {
17366 display: flex;
17367 justify-content: flex-start;
17368 align-items: flex-start;
17369 padding-left: var(--f7-menu-item-spacing);
17370 padding-right: var(--f7-menu-item-spacing);
17371}
17372.menu-inner:after {
17373 content: '';
17374 width: var(--f7-menu-item-spacing);
17375 height: 100%;
17376 flex-shrink: 0;
17377}
17378.menu-item {
17379 height: var(--f7-menu-item-height);
17380 min-width: var(--f7-menu-item-height);
17381 flex-shrink: 0;
17382 background: var(--f7-menu-bg-color);
17383 color: var(--f7-menu-text-color);
17384 border-radius: var(--f7-menu-item-border-radius);
17385 position: relative;
17386 box-sizing: border-box;
17387 font-size: var(--f7-menu-font-size);
17388 font-weight: var(--f7-menu-font-weight);
17389 cursor: pointer;
17390 margin-right: var(--f7-menu-item-spacing);
17391}
17392.menu-item:first-child {
17393 margin-right: 0;
17394}
17395.menu-item.active-state:not(.menu-item-dropdown-opened) {
17396 background-color: rgba(0, 0, 0, 0.7);
17397}
17398.menu-item.icon-only {
17399 padding-left: 0;
17400 padding-right: 0;
17401}
17402.menu-item-content {
17403 display: flex;
17404 justify-content: center;
17405 align-items: center;
17406 padding: 0 var(--f7-menu-item-padding-horizontal);
17407 height: 100%;
17408 box-sizing: border-box;
17409 width: 100%;
17410 overflow: hidden;
17411 border-radius: var(--f7-menu-item-border-radius);
17412 position: relative;
17413}
17414.menu-item-content.icon-only,
17415.icon-only .menu-item-content {
17416 padding-left: 0;
17417 padding-right: 0;
17418}
17419.menu-item-dropdown .menu-item-content:after {
17420 content: '';
17421 position: absolute;
17422 width: 20px;
17423 height: 2px;
17424 left: 50%;
17425 transform: translateX(-50%);
17426 bottom: 4px;
17427 background: var(--f7-menu-item-dropdown-icon-color);
17428 border-radius: 4px;
17429}
17430.menu-dropdown {
17431 opacity: 0;
17432 visibility: hidden;
17433 pointer-events: none;
17434 cursor: auto;
17435 height: 10px;
17436 background: var(--f7-menu-bg-color);
17437 position: relative;
17438}
17439.menu-dropdown-content {
17440 position: absolute;
17441 top: 100%;
17442 border-radius: var(--f7-menu-dropdown-border-radius, var(--f7-menu-item-border-radius));
17443 padding-top: var(--f7-menu-dropdown-padding-vertical);
17444 padding-bottom: var(--f7-menu-dropdown-padding-vertical);
17445 box-sizing: border-box;
17446 background: var(--f7-menu-bg-color);
17447 will-change: scroll-position;
17448 overflow: auto;
17449 -webkit-overflow-scrolling: touch;
17450 min-width: calc(100% + 24px);
17451}
17452.menu-dropdown-link,
17453.menu-dropdown-item {
17454 display: flex;
17455 justify-content: space-between;
17456 align-items: center;
17457 padding-left: var(--f7-menu-item-padding-horizontal);
17458 padding-right: var(--f7-menu-item-padding-horizontal);
17459 min-height: var(--f7-menu-dropdown-item-height);
17460 line-height: var(--f7-menu-line-height);
17461 font-size: var(--f7-menu-font-size);
17462 color: var(--f7-menu-text-color);
17463 font-weight: var(--f7-menu-font-weight);
17464 white-space: nowrap;
17465 min-width: 100px;
17466}
17467.menu-dropdown-link i,
17468.menu-dropdown-item i,
17469.menu-dropdown-link i.icon,
17470.menu-dropdown-item i.icon,
17471.menu-dropdown-link i.f7-icons,
17472.menu-dropdown-item i.f7-icons,
17473.menu-dropdown-link i.material-icons,
17474.menu-dropdown-item i.material-icons {
17475 font-size: 20px;
17476}
17477.menu-dropdown-link.active-state {
17478 background: var(--f7-menu-dropdown-pressed-bg-color, var(--f7-theme-color));
17479 color: var(--f7-menu-text-color);
17480}
17481.menu-dropdown-divider {
17482 height: 1px;
17483 margin-top: 2px;
17484 margin-bottom: 2px;
17485 background: var(--f7-menu-dropdown-divider-color);
17486}
17487.menu-item-dropdown-opened {
17488 border-bottom-left-radius: 0px;
17489 border-bottom-right-radius: 0px;
17490}
17491.menu-item-dropdown-opened .menu-item-content:after {
17492 opacity: 0;
17493}
17494.menu-item-dropdown-opened .menu-dropdown {
17495 opacity: 1;
17496 visibility: visible;
17497 pointer-events: auto;
17498}
17499.menu-item-dropdown-left .menu-dropdown:after,
17500.menu-item-dropdown-center .menu-dropdown:after,
5d51ea26
DC
17501.menu-dropdown-left:after,
17502.menu-dropdown-center:after {
5309fbda
DC
17503 content: '';
17504 position: absolute;
17505 left: 100%;
17506 bottom: 0;
5d51ea26
DC
17507 width: var(--f7-menu-item-border-radius);
17508 height: var(--f7-menu-item-border-radius);
5309fbda
DC
17509 background-image: radial-gradient(ellipse at 100% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
17510}
17511.menu-item-dropdown-right .menu-dropdown:before,
17512.menu-item-dropdown-center .menu-dropdown:before,
17513.menu-dropdown-right:before,
17514.menu-dropdown-center:before {
17515 content: '';
17516 position: absolute;
17517 right: 100%;
17518 bottom: 0;
5d51ea26
DC
17519 width: var(--f7-menu-item-border-radius);
17520 height: var(--f7-menu-item-border-radius);
5309fbda
DC
17521 background-image: radial-gradient(ellipse at 0% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
17522}
17523.menu-item-dropdown-left .menu-dropdown-content,
17524.menu-dropdown-left .menu-dropdown-content {
17525 left: 0;
17526 border-top-left-radius: 0px;
17527}
17528.menu-item-dropdown-right .menu-dropdown-content,
17529.menu-dropdown-right .menu-dropdown-content {
17530 right: 0;
17531 border-top-right-radius: 0px;
17532}
17533.menu-item-dropdown-center .menu-dropdown-content,
17534.menu-dropdown-center .menu-dropdown-content {
17535 left: 50%;
17536 min-width: calc(100% + 24px + 24px);
17537 transform: translateX(-50%);
17538}
5d51ea26
DC
17539/* === Color Picker === */
17540:root {
17541 --f7-color-picker-sheet-bg-color: #fff;
17542 --f7-color-picker-popup-bg-color: #fff;
17543 --f7-color-picker-popover-width: 350px;
17544 --f7-color-picker-slider-size: 6px;
17545 --f7-color-picker-slider-knob-size: 16px;
17546 --f7-color-picker-bar-size: 50px;
17547 --f7-color-picker-bar-min-height: 260px;
17548 --f7-color-picker-value-bg-color: rgba(0, 0, 0, 0.05);
17549 --f7-color-picker-value-width: 64px;
17550 --f7-color-picker-value-height: 32px;
17551 --f7-color-picker-value-font-size: 16px;
17552 --f7-color-picker-value-border-radius: 4px;
17553 --f7-color-picker-hex-value-width: 84px;
17554 --f7-color-picker-label-font-size: 14px;
17555 --f7-color-picker-label-width: 10px;
17556 --f7-color-picker-label-height: 14px;
17557 --f7-color-picker-sb-spectrum-height: 260px;
17558 --f7-color-picker-sb-spectrum-handle-size: 16px;
17559 --f7-color-picker-wheel-width: 330px;
17560 --f7-color-picker-group-bg-color: rgba(0, 0, 0, 0.05);
17561 --f7-color-picker-group-value-bg-color: #fff;
17562 --f7-color-picker-palette-value-width: 36px;
17563 --f7-color-picker-palette-value-height: 36px;
17564 --f7-color-picker-initial-current-color-height: 40px;
17565 --f7-color-picker-initial-current-color-border-radius: 4px;
17566}
17567:root .theme-dark,
17568:root.theme-dark {
17569 --f7-color-picker-sheet-bg-color: #171717;
17570 --f7-color-picker-popup-bg-color: #171717;
17571 --f7-color-picker-value-bg-color: rgba(255, 255, 255, 0.1);
17572 --f7-color-picker-group-bg-color: #000;
17573 --f7-color-picker-group-value-bg-color: rgba(255, 255, 255, 0.12);
17574}
17575.color-picker {
17576 overflow: hidden;
17577 width: 100%;
17578 display: flex;
17579 flex-direction: column;
17580}
17581.color-picker.color-picker-inline,
17582.color-picker-popover .color-picker,
17583.color-picker-popup .color-picker {
17584 position: relative;
17585}
17586.color-picker-sheet-modal {
17587 background: var(--f7-color-picker-sheet-bg-color);
17588}
17589.color-picker-sheet-modal:before {
17590 z-index: 600;
17591}
17592.color-picker-sheet-modal .sheet-modal-inner {
17593 margin-bottom: var(--f7-safe-area-bottom);
17594}
17595.color-picker-popup .page {
17596 background: var(--f7-color-picker-popup-bg-color);
17597}
17598.color-picker-popup .page-content {
17599 padding-bottom: var(--f7-safe-area-bottom);
17600}
17601.color-picker-popover .color-picker,
17602.color-picker-popup .color-picker,
17603.color-picker-page .color-picker {
17604 height: 100%;
17605}
17606.color-picker-popover .color-picker .toolbar,
17607.color-picker-popup .color-picker .toolbar,
17608.color-picker-page .color-picker .toolbar {
17609 position: absolute;
17610}
17611.color-picker-popover {
17612 width: var(--f7-color-picker-popover-width);
17613 max-width: 90vw;
17614 max-height: 80vh;
17615}
17616.color-picker-popover .color-picker {
17617 max-height: 80vh;
17618}
17619.color-picker-popover .toolbar-top {
17620 border-top-left-radius: var(--f7-popover-border-radius);
17621 border-top-right-radius: var(--f7-popover-border-radius);
17622}
17623.color-picker-popover .color-picker-module-palette {
17624 overflow: hidden;
17625 flex-shrink: 0;
17626}
17627.color-picker-popover .color-picker-module-palette:first-child {
17628 border-top-left-radius: var(--f7-popover-border-radius);
17629 border-top-right-radius: var(--f7-popover-border-radius);
17630}
17631.color-picker-popover .color-picker-module-palette:last-child {
17632 border-bottom-left-radius: var(--f7-popover-border-radius);
17633 border-bottom-right-radius: var(--f7-popover-border-radius);
17634}
17635.color-picker-popover .color-picker-module-palette:first-child:last-child {
17636 border-radius: var(--f7-popover-border-radius);
17637}
17638.color-picker-popover .toolbar ~ .page-content .color-picker-module-palette:first-child {
17639 border-top-left-radius: 0;
17640 border-top-right-radius: 0;
17641}
17642.color-picker-popup .page-content,
17643.color-picker-popover .page-content,
17644.color-picker-sheet-modal .page-content,
17645.color-picker-page .page-content {
17646 display: flex;
17647 justify-content: flex-start;
17648 align-items: stretch;
17649 flex-direction: column;
17650 overflow-x: hidden;
17651}
17652.color-picker-module {
17653 margin-top: 5px;
17654}
17655.color-picker-module:last-child {
17656 margin-bottom: 5px;
17657}
17658.color-picker-module-sb-spectrum,
17659.color-picker-module-hs-spectrum {
17660 margin-left: 10px;
17661 margin-right: 10px;
17662}
17663.color-picker-module-sb-spectrum:first-child,
17664.color-picker-module-hs-spectrum:first-child {
17665 margin-top: 10px;
17666}
17667.color-picker-module-sb-spectrum .color-picker-sb-spectrum,
17668.color-picker-module-hs-spectrum .color-picker-sb-spectrum,
17669.color-picker-module-sb-spectrum .color-picker-hs-spectrum,
17670.color-picker-module-hs-spectrum .color-picker-hs-spectrum {
17671 border-radius: 4px;
17672 height: var(--f7-color-picker-sb-spectrum-height);
17673}
17674.color-picker-sb-spectrum {
17675 background-color: #000;
17676 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
17677 position: relative;
17678}
17679.color-picker-hs-spectrum {
17680 position: relative;
17681 background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
17682}
17683.color-picker-hs-spectrum:after {
17684 content: '';
17685 position: absolute;
17686 left: 0;
17687 top: 0;
17688 width: 100%;
17689 height: 100%;
17690 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
17691}
17692.color-picker-sb-spectrum-handle,
17693.color-picker-hs-spectrum-handle {
17694 width: 4px;
17695 height: 4px;
17696 position: absolute;
17697 left: -2px;
17698 top: -2px;
17699 z-index: 1;
17700}
17701.color-picker-sb-spectrum-handle:after,
17702.color-picker-hs-spectrum-handle:after {
17703 background-color: inherit;
17704 content: '';
17705 position: absolute;
17706 width: var(--f7-color-picker-sb-spectrum-handle-size);
17707 height: var(--f7-color-picker-sb-spectrum-handle-size);
17708 border: 1px solid #fff;
17709 border-radius: 50%;
17710 box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
17711 box-sizing: border-box;
17712 left: 50%;
17713 top: 50%;
17714 transform: translate(-50%, -50%);
17715 transition: 150ms;
17716 transition-property: transform;
17717 transform-origin: center;
17718}
17719.color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
17720.color-picker-hs-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
17721.color-picker-sb-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after,
17722.color-picker-hs-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after {
17723 transform: scale(1.5) translate(-33.333%, -33.333%);
17724}
17725.color-picker-module-wheel {
17726 margin-left: 10px;
17727 margin-right: 10px;
17728}
17729.color-picker-wheel {
17730 position: relative;
17731 width: var(--f7-color-picker-wheel-width);
17732 max-width: 100%;
17733 height: auto;
17734 font-size: 0;
17735 margin-left: auto;
17736 margin-right: auto;
17737}
17738.color-picker-wheel svg {
17739 width: 100%;
17740 height: auto;
17741}
17742.color-picker-wheel .color-picker-wheel-handle {
17743 width: calc(100% / 6);
17744 height: calc(100% / 6);
17745 position: absolute;
17746 box-sizing: border-box;
17747 border: 2px solid #fff;
17748 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
17749 background: red;
17750 border-radius: 50%;
17751 left: 0;
17752 top: 0;
17753}
17754.color-picker-wheel .color-picker-sb-spectrum {
17755 width: 45%;
17756 height: 45%;
17757 left: 50%;
17758 top: 50%;
17759 transform: translate3d(-50%, -50%, 0);
17760 position: absolute;
17761}
17762.color-picker-slider-wrap {
17763 display: flex;
17764 align-items: center;
17765 margin-bottom: 2px;
17766}
17767.color-picker-slider-wrap + .color-picker-slider-wrap {
17768 margin-top: 5px;
17769}
17770.color-picker-hex-wrap {
17771 justify-content: space-between;
17772 display: flex;
17773 align-items: center;
17774}
17775.color-picker-slider-label,
17776.color-picker-hex-label {
17777 font-size: var(--f7-color-picker-label-font-size);
17778 width: var(--f7-color-picker-label-size);
17779 flex-shrink: 0;
17780 margin-left: 12px;
17781}
17782.color-picker-hex-label {
17783 width: auto;
17784}
17785.color-picker-bar-value,
17786.color-picker-slider-value,
17787.color-picker-hex-value {
17788 width: var(--f7-color-picker-value-width);
17789 height: var(--f7-color-picker-value-height);
17790 background: var(--f7-color-picker-value-bg-color);
17791 border-radius: var(--f7-color-picker-value-border-radius);
17792 text-align: center;
17793 font-size: var(--f7-color-picker-value-font-size);
17794 display: flex;
17795 justify-content: center;
17796 align-items: center;
17797 flex-shrink: 0;
17798 margin-right: 10px;
17799}
17800.color-picker-bar-value input,
17801.color-picker-slider-value input,
17802.color-picker-hex-value input {
17803 width: 100%;
17804 height: 100%;
17805 -webkit-appearance: none;
17806 -moz-appearance: none;
17807 appearance: none;
17808 border: none;
17809 outline: 0;
17810 background: transparent;
17811 color: inherit;
17812 font-family: inherit;
17813 font-size: inherit;
17814 text-align: center;
17815 display: block;
17816 border-radius: 4px;
17817}
17818.color-picker-bar-value input::-webkit-inner-spin-button,
17819.color-picker-slider-value input::-webkit-inner-spin-button,
17820.color-picker-hex-value input::-webkit-inner-spin-button,
17821.color-picker-bar-value input::-webkit-outer-spin-button,
17822.color-picker-slider-value input::-webkit-outer-spin-button,
17823.color-picker-hex-value input::-webkit-outer-spin-button {
17824 -webkit-appearance: none;
17825 -moz-appearance: none;
17826 appearance: none;
17827 margin: 0;
17828 display: none;
17829}
17830.color-picker-hex-value {
17831 width: var(--f7-color-picker-hex-value-width);
17832}
17833.color-picker-hex-value:first-child {
17834 margin-right: auto;
17835}
17836.color-picker-slider {
17837 --f7-range-bar-active-bg-color: transparent;
17838 --f7-range-bar-size: var(--f7-color-picker-slider-size);
17839 --f7-range-bar-border-radius: var(--f7-color-picker-slider-size);
17840 --f7-range-knob-size: var(--f7-color-picker-slider-knob-size);
17841 --f7-range-knob-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
17842}
17843.color-picker-slider .range-knob {
17844 transition-duration: 200ms;
17845 transition-property: transform;
17846}
17847.color-picker-slider .range-knob:after {
17848 width: 30px;
17849 height: 30px;
17850 margin-left: -15px;
17851 margin-top: -15px;
17852}
17853.color-picker-slider .range-knob-active-state .range-knob {
17854 transform: scale(1.5);
17855}
17856.md .color-picker-slider.range-slider-min:not(.range-slider-dual) .range-knob {
17857 background: var(--f7-range-knob-color) !important;
17858 border: none;
17859}
17860.color-picker-module-rgb-bars {
17861 display: flex;
17862 justify-content: space-around;
17863 justify-content: space-evenly;
17864 align-items: stretch;
17865 height: 100%;
17866 min-height: var(--f7-color-picker-bar-min-height);
17867 padding-bottom: 10px;
17868 padding-top: 10px;
17869 box-sizing: border-box;
17870}
17871.color-picker-bar-wrap {
17872 display: flex;
17873 align-items: center;
17874 flex-direction: column-reverse;
17875}
17876.color-picker-bar {
17877 --f7-range-bar-active-bg-color: transparent;
17878 --f7-range-bar-size: var(--f7-color-picker-bar-size);
17879 --f7-range-bar-border-radius: 2px;
17880 --f7-range-knob-size: 6px;
17881 --f7-range-knob-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3);
17882 --f7-range-knob-color: #fff;
17883}
17884.color-picker-bar .range-knob {
17885 transition-duration: 0ms;
17886 transition-property: transform;
17887 border-radius: 3px;
17888}
17889.color-picker-bar .range-knob-wrap {
17890 height: 6px;
17891 width: calc(var(--f7-color-picker-bar-size) - 4px);
17892 margin-left: calc(-0.5 * (var(--f7-color-picker-bar-size) - 4px));
17893}
17894.color-picker-bar .range-knob-active-state .range-knob {
17895 transform: scale(1);
17896}
17897.md .color-picker-bar.range-slider-min:not(.range-slider-dual) .range-knob {
17898 background: var(--f7-range-knob-color) !important;
17899 border: none;
17900}
17901.color-picker-bar-label {
17902 font-size: var(--f7-color-picker-label-size);
17903 margin-top: 12px;
17904 line-height: 1;
17905 height: var(--f7-color-picker-label-height);
17906 flex-shrink: 0;
17907}
17908.color-picker-bar-value {
17909 margin-left: 0;
17910 margin-bottom: 10px;
17911}
17912.color-picker-slider-alpha {
17913 --f7-range-knob-color: #fff;
17914}
17915.color-picker-slider-alpha .range-bar {
17916 background-image: linear-gradient(to left, rgba(0, 0, 0, 0), #000), linear-gradient(to right, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
17917 background-size: 100% 100%, 6px 3px, 6px 3px;
17918 background-position: 0 0, 0px 3px, 0 0;
17919 background-repeat: repeat-y, repeat-x, repeat-x;
17920}
17921.color-picker-slider-hue .range-bar {
17922 background-image: linear-gradient(to left, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
17923}
17924.color-picker-slider-brightness .range-bar {
17925 background-image: linear-gradient(to left, #000, #fff);
17926}
17927.color-picker-module-palette {
17928 margin-top: 15px;
17929}
17930.color-picker-module-palette:first-child {
17931 margin-top: 0;
17932}
17933.color-picker-module-palette:last-child {
17934 margin-bottom: 0;
17935}
17936.color-picker-module-palette:first-child:last-child {
17937 margin: 0;
17938}
17939.color-picker-palette {
17940 display: flex;
17941 flex-wrap: wrap;
17942}
17943.color-picker-palette-row {
17944 width: 100%;
17945 display: flex;
17946 flex-wrap: nowrap;
17947}
17948.color-picker-palette-row .color-picker-palette-value {
17949 width: 100%;
17950}
17951.color-picker-palette-value {
17952 width: var(--f7-color-picker-palette-value-width);
17953 height: var(--f7-color-picker-palette-value-height);
17954 cursor: pointer;
17955}
17956.color-picker-module-initial-current-colors,
17957.color-picker-module-current-color {
17958 margin-left: 10px;
17959 margin-right: 10px;
17960 border-radius: var(--f7-color-picker-initial-current-color-border-radius);
17961 overflow: hidden;
17962 flex-shrink: 0;
17963}
17964.color-picker-initial-color,
17965.color-picker-current-color {
17966 height: var(--f7-color-picker-initial-current-color-height);
17967}
17968.color-picker-initial-current-colors {
17969 display: flex;
17970}
17971.color-picker-initial-current-colors .color-picker-initial-color,
17972.color-picker-initial-current-colors .color-picker-current-color {
17973 width: 50%;
17974}
17975.color-picker-module-rgb-sliders,
17976.color-picker-module-hsb-sliders,
17977.color-picker-module-alpha-slider,
17978.color-picker-module-hue-slider,
17979.color-picker-module-brightness-slider,
17980.color-picker-module-hex {
17981 margin-left: 10px;
17982 margin-right: 10px;
17983}
17984.color-picker-grouped-modules .color-picker-module-rgb-sliders,
17985.color-picker-grouped-modules .color-picker-module-hsb-sliders,
17986.color-picker-grouped-modules .color-picker-module-alpha-slider,
17987.color-picker-grouped-modules .color-picker-module-hue-slider,
17988.color-picker-grouped-modules .color-picker-module-brightness-slider,
17989.color-picker-grouped-modules .color-picker-module-hex {
17990 background: var(--f7-color-picker-group-bg-color);
17991 padding: 5px;
17992 border-radius: 4px;
17993 margin-top: 15px;
17994 margin-left: 5px;
17995 margin-right: 5px;
17996}
17997.color-picker-grouped-modules .color-picker-module-rgb-sliders:last-child,
17998.color-picker-grouped-modules .color-picker-module-hsb-sliders:last-child,
17999.color-picker-grouped-modules .color-picker-module-alpha-slider:last-child,
18000.color-picker-grouped-modules .color-picker-module-hue-slider:last-child,
18001.color-picker-grouped-modules .color-picker-module-brightness-slider:last-child,
18002.color-picker-grouped-modules .color-picker-module-hex:last-child {
18003 margin-bottom: 15px;
18004}
18005.color-picker-grouped-modules .color-picker-slider-value,
18006.color-picker-grouped-modules .color-picker-hex-value {
18007 background: var(--f7-color-picker-group-value-bg-color);
18008}
18009.color-picker-grouped-modules .color-picker-slider-label,
18010.color-picker-grouped-modules .color-picker-hex-label {
18011 margin-right: 5px;
18012}
18013.color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:first-child,
18014.color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:first-child,
18015.color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:first-child,
18016.color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:first-child,
18017.color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:first-child {
18018 margin-right: 5px;
18019}
18020.color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:last-child,
18021.color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:last-child,
18022.color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:last-child,
18023.color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:last-child,
18024.color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:last-child {
18025 margin-left: 5px;
18026}
18027/* === Treeview === */
18028:root {
18029 --f7-treeview-toggle-size: 24px;
18030 --f7-treeview-toggle-color: rgba(0, 0, 0, 0.5);
18031 --f7-treeview-toggle-hover-bg-color: rgba(0, 0, 0, 0.1);
18032 --f7-treeview-toggle-pressed-bg-color: rgba(0, 0, 0, 0.15);
18033 --f7-treeview-icon-color: rgba(0, 0, 0, 0.5);
18034 --f7-treeview-children-offset: 29px;
18035 --f7-treeview-label-font-weight: 400;
18036 --f7-treeview-label-text-color: inherit;
18037 --f7-treeview-selectable-hover-bg-color: rgba(0, 0, 0, 0.1);
18038 /*
18039 --f7-treeview-selectable-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
18040 */
18041 --f7-treeview-link-hover-bg-color: rgba(0, 0, 0, 0.1);
18042 --f7-treeview-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
18043}
18044:root .theme-dark,
18045:root.theme-dark {
18046 --f7-treeview-toggle-color: rgba(255, 255, 255, 0.5);
18047 --f7-treeview-toggle-hover-bg-color: rgba(255, 255, 255, 0.03);
18048 --f7-treeview-toggle-pressed-bg-color: rgba(255, 255, 255, 0.1);
18049 --f7-treeview-icon-color: rgba(255, 255, 255, 0.75);
18050 --f7-treeview-selectable-hover-bg-color: rgba(255, 255, 255, 0.03);
18051 --f7-treeview-link-hover-bg-color: rgba(255, 255, 255, 0.03);
18052 --f7-treeview-link-pressed-bg-color: rgba(255, 255, 255, 0.11);
18053}
18054.ios {
18055 --f7-treeview-item-height: 34px;
18056 --f7-treeview-item-padding-left: 15px;
18057 --f7-treeview-item-padding-right: 15px;
18058 --f7-treeview-label-font-size: 17px;
18059 --f7-treeview-icon-size: 24px;
18060}
18061.md {
18062 --f7-treeview-item-height: 34px;
18063 --f7-treeview-item-padding-left: 16px;
18064 --f7-treeview-item-padding-right: 16px;
18065 --f7-treeview-label-font-size: 16px;
18066 --f7-treeview-icon-size: 24px;
18067}
18068.aurora {
18069 --f7-treeview-item-height: 28px;
18070 --f7-treeview-item-padding-left: 15px;
18071 --f7-treeview-item-padding-right: 15px;
18072 --f7-treeview-label-font-size: 14px;
18073 --f7-treeview-icon-size: 20px;
18074}
18075.treeview-item-root {
18076 padding-right: var(--f7-treeview-item-padding-left);
18077 padding-left: var(--f7-treeview-item-padding-right);
18078 height: var(--f7-treeview-item-height);
18079 display: flex;
18080 align-items: center;
18081 justify-content: flex-start;
18082}
18083.treeview-item-content {
18084 display: flex;
18085 justify-content: flex-start;
18086 align-items: center;
18087}
18088.treeview-item-content > i,
18089.treeview-item-content > .f7-icons,
18090.treeview-item-content > .material-icons {
18091 width: var(--f7-treeview-icon-size);
18092 height: var(--f7-treeview-icon-size);
18093 font-size: var(--f7-treeview-icon-size);
18094 color: var(--f7-treeview-icon-color);
18095}
18096.treeview-item-content:first-child {
18097 margin-right: calc(var(--f7-treeview-toggle-size) + 5px);
18098}
18099.treeview-item-content > * + * {
18100 margin-right: 5px;
18101}
18102.treeview-item-label {
18103 font-size: var(--f7-treeview-label-font-size);
18104 font-weight: var(--f7-treeview-label-font-weight);
18105 color: var(--f7-treeview-label-text-color);
18106}
18107.treeview-toggle {
18108 width: var(--f7-treeview-toggle-size);
18109 height: var(--f7-treeview-toggle-size);
18110 cursor: pointer;
18111 border-radius: 4px;
18112 background-color: rgba(0, 0, 0, 0);
18113 transition-duration: 200ms;
18114 position: relative;
18115 margin-left: 5px;
18116}
18117.treeview-toggle.active-state {
18118 background-color: var(--f7-treeview-toggle-pressed-bg-color);
18119}
18120.treeview-toggle:after {
18121 transition-duration: 200ms;
18122 content: '';
18123 position: absolute;
18124 left: 50%;
18125 top: 50%;
18126 width: 0;
18127 height: 0;
18128 border-top: 5px solid transparent;
18129 border-bottom: 5px solid transparent;
18130 transform: translate(-50%, -50%);
18131 border-right: 6px solid var(--f7-treeview-toggle-color);
18132}
18133.treeview-toggle-hidden {
18134 opacity: 0;
18135 pointer-events: none;
18136 visibility: hidden;
18137}
18138.treeview-preloader {
18139 --f7-preloader-size: var(--f7-treeview-toggle-size);
18140 margin-left: calc(-1 * var(--f7-treeview-toggle-size));
18141}
18142.treeview-item-children {
18143 display: none;
18144}
18145.treeview-item-opened > .treeview-item-children {
18146 display: block;
18147}
18148.treeview-item-opened > .treeview-item-root .treeview-toggle:after {
18149 transform: translate(-50%, -50%) rotate(-90deg);
18150}
18151a.treeview-item-root {
18152 color: var(--f7-treeview-label-text-color);
18153}
18154.treeview-item-selectable > .treeview-item-root,
18155.treeview-item-selectable.treeview-item-root {
18156 cursor: pointer;
18157 transition-duration: 150ms;
18158}
18159a.treeview-item-root {
18160 transition-duration: 150ms;
18161}
18162a.treeview-item-root.active-state {
18163 background: var(--f7-treeview-link-pressed-bg-color);
18164}
18165.treeview-item-toggle > .treeview-item-root,
18166.treeview-item-toggle.treeview-item-root {
18167 cursor: pointer;
18168}
18169.treeview-item-selected > .treeview-item-root,
18170.treeview-item-selected.treeview-item-root {
18171 background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
18172}
18173.treeview-item .treeview-item .treeview-item-root {
18174 padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1);
18175}
18176.treeview-item .treeview-item .treeview-item .treeview-item-root {
18177 padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2);
18178}
18179.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18180 padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3);
18181}
18182.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18183 padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4);
18184}
18185.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18186 padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5);
18187}
18188.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18189 padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6);
18190}
18191.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18192 padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7);
18193}
18194.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18195 padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8);
18196}
18197.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18198 padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9);
18199}
18200.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18201 padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10);
18202}
18203.aurora .treeview-toggle:hover {
18204 background-color: var(--f7-treeview-toggle-hover-bg-color);
18205}
18206.aurora .treeview-toggle.active-state {
18207 background-color: var(--f7-treeview-toggle-pressed-bg-color);
18208}
18209.aurora .treeview-item-selectable > .treeview-item-root:hover,
18210.aurora .treeview-item-selectable.treeview-item-root:hover {
18211 background: var(--f7-treeview-selectable-hover-bg-color);
18212}
18213.aurora a.treeview-item-root:hover {
18214 background: var(--f7-treeview-link-hover-bg-color);
18215}
18216.aurora a.treeview-item-root.active-state {
18217 background: var(--f7-treeview-link-pressed-bg-color);
18218}
18219.aurora .treeview-item-selected > .treeview-item-root:hover,
18220.aurora .treeview-item-selected.treeview-item-root:hover {
18221 background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
18222}
5309fbda
DC
18223iframe#viAd {
18224 z-index: 12900 !important;
18225 background: #000 !important;
18226}
18227.vi-overlay {
18228 background: rgba(0, 0, 0, 0.85);
18229 z-index: 13100;
18230 position: absolute;
18231 left: 0%;
18232 top: 0%;
18233 width: 100%;
18234 height: 100%;
18235 border-radius: 3px;
18236 display: flex;
18237 justify-content: center;
18238 flex-direction: column;
18239 align-items: center;
18240 align-content: center;
18241 text-align: center;
18242 -webkit-user-select: none;
18243 -moz-user-select: none;
18244 -ms-user-select: none;
18245 user-select: none;
18246}
18247@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
18248 .vi-overlay {
18249 background: rgba(0, 0, 0, 0.65);
18250 -webkit-backdrop-filter: blur(10px);
18251 backdrop-filter: blur(10px);
18252 }
18253}
18254.vi-overlay .vi-overlay-text {
18255 text-align: center;
18256 color: #fff;
18257 max-width: 80%;
18258}
18259.vi-overlay .vi-overlay-text + .vi-overlay-play-button {
18260 margin-top: 15px;
18261}
18262.vi-overlay .vi-overlay-play-button {
18263 width: 44px;
18264 height: 44px;
18265 border-radius: 50%;
18266 border: 2px solid #fff;
18267 position: relative;
18268}
18269.vi-overlay .vi-overlay-play-button.active-state {
18270 opacity: 0.55;
18271}
18272.vi-overlay .vi-overlay-play-button:before {
18273 content: '';
18274 width: 0;
18275 height: 0;
18276 border-top: 8px solid transparent;
18277 border-bottom: 8px solid transparent;
18278 border-left: 14px solid #fff;
18279 position: absolute;
18280 left: 50%;
18281 top: 50%;
18282 margin-left: 2px;
18283 transform: translate(-50%, -50%);
18284}
18285/* === Elevation === */
18286:root {
18287 --f7-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0);
18288 --f7-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
18289 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
18290 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
18291 --f7-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
18292 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
18293 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
18294 --f7-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
18295 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
18296 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
18297 --f7-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
18298 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
18299 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
18300 --f7-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
18301 0px 5px 8px 0px rgba(0, 0, 0, 0.14),
18302 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
18303 --f7-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
18304 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
18305 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
18306 --f7-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
18307 0px 7px 10px 1px rgba(0, 0, 0, 0.14),
18308 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
18309 --f7-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
18310 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
18311 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
18312 --f7-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
18313 0px 9px 12px 1px rgba(0, 0, 0, 0.14),
18314 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
18315 --f7-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
18316 0px 10px 14px 1px rgba(0, 0, 0, 0.14),
18317 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
18318 --f7-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
18319 0px 11px 15px 1px rgba(0, 0, 0, 0.14),
18320 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
18321 --f7-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
18322 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
18323 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
18324 --f7-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
18325 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
18326 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
18327 --f7-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
18328 0px 14px 21px 2px rgba(0, 0, 0, 0.14),
18329 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
18330 --f7-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
18331 0px 15px 22px 2px rgba(0, 0, 0, 0.14),
18332 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
18333 --f7-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
18334 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
18335 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
18336 --f7-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
18337 0px 17px 26px 2px rgba(0, 0, 0, 0.14),
18338 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
18339 --f7-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
18340 0px 18px 28px 2px rgba(0, 0, 0, 0.14),
18341 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
18342 --f7-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
18343 0px 19px 29px 2px rgba(0, 0, 0, 0.14),
18344 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
18345 --f7-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
18346 0px 20px 31px 3px rgba(0, 0, 0, 0.14),
18347 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
18348 --f7-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
18349 0px 21px 33px 3px rgba(0, 0, 0, 0.14),
18350 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
18351 --f7-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
18352 0px 22px 35px 3px rgba(0, 0, 0, 0.14),
18353 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
18354 --f7-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
18355 0px 23px 36px 3px rgba(0, 0, 0, 0.14),
18356 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
18357 --f7-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
18358 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
18359 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
18360}
18361.elevation-0 {
18362 box-shadow: var(--f7-elevation-0) !important;
18363}
18364.elevation-1 {
18365 box-shadow: var(--f7-elevation-1) !important;
18366}
18367.elevation-2 {
18368 box-shadow: var(--f7-elevation-2) !important;
18369}
18370.elevation-3 {
18371 box-shadow: var(--f7-elevation-3) !important;
18372}
18373.elevation-4 {
18374 box-shadow: var(--f7-elevation-4) !important;
18375}
18376.elevation-5 {
18377 box-shadow: var(--f7-elevation-5) !important;
18378}
18379.elevation-6 {
18380 box-shadow: var(--f7-elevation-6) !important;
18381}
18382.elevation-7 {
18383 box-shadow: var(--f7-elevation-7) !important;
18384}
18385.elevation-8 {
18386 box-shadow: var(--f7-elevation-8) !important;
18387}
18388.elevation-9 {
18389 box-shadow: var(--f7-elevation-9) !important;
18390}
18391.elevation-10 {
18392 box-shadow: var(--f7-elevation-10) !important;
18393}
18394.elevation-11 {
18395 box-shadow: var(--f7-elevation-11) !important;
18396}
18397.elevation-12 {
18398 box-shadow: var(--f7-elevation-12) !important;
18399}
18400.elevation-13 {
18401 box-shadow: var(--f7-elevation-13) !important;
18402}
18403.elevation-14 {
18404 box-shadow: var(--f7-elevation-14) !important;
18405}
18406.elevation-15 {
18407 box-shadow: var(--f7-elevation-15) !important;
18408}
18409.elevation-16 {
18410 box-shadow: var(--f7-elevation-16) !important;
18411}
18412.elevation-17 {
18413 box-shadow: var(--f7-elevation-17) !important;
18414}
18415.elevation-18 {
18416 box-shadow: var(--f7-elevation-18) !important;
18417}
18418.elevation-19 {
18419 box-shadow: var(--f7-elevation-19) !important;
18420}
18421.elevation-20 {
18422 box-shadow: var(--f7-elevation-20) !important;
18423}
18424.elevation-21 {
18425 box-shadow: var(--f7-elevation-21) !important;
18426}
18427.elevation-22 {
18428 box-shadow: var(--f7-elevation-22) !important;
18429}
18430.elevation-23 {
18431 box-shadow: var(--f7-elevation-23) !important;
18432}
18433.elevation-24 {
18434 box-shadow: var(--f7-elevation-24) !important;
18435}
18436.device-desktop .elevation-hover-0:hover {
18437 box-shadow: var(--f7-elevation-0) !important;
18438}
18439.device-desktop .elevation-hover-1:hover {
18440 box-shadow: var(--f7-elevation-1) !important;
18441}
18442.device-desktop .elevation-hover-2:hover {
18443 box-shadow: var(--f7-elevation-2) !important;
18444}
18445.device-desktop .elevation-hover-3:hover {
18446 box-shadow: var(--f7-elevation-3) !important;
18447}
18448.device-desktop .elevation-hover-4:hover {
18449 box-shadow: var(--f7-elevation-4) !important;
18450}
18451.device-desktop .elevation-hover-5:hover {
18452 box-shadow: var(--f7-elevation-5) !important;
18453}
18454.device-desktop .elevation-hover-6:hover {
18455 box-shadow: var(--f7-elevation-6) !important;
18456}
18457.device-desktop .elevation-hover-7:hover {
18458 box-shadow: var(--f7-elevation-7) !important;
18459}
18460.device-desktop .elevation-hover-8:hover {
18461 box-shadow: var(--f7-elevation-8) !important;
18462}
18463.device-desktop .elevation-hover-9:hover {
18464 box-shadow: var(--f7-elevation-9) !important;
18465}
18466.device-desktop .elevation-hover-10:hover {
18467 box-shadow: var(--f7-elevation-10) !important;
18468}
18469.device-desktop .elevation-hover-11:hover {
18470 box-shadow: var(--f7-elevation-11) !important;
18471}
18472.device-desktop .elevation-hover-12:hover {
18473 box-shadow: var(--f7-elevation-12) !important;
18474}
18475.device-desktop .elevation-hover-13:hover {
18476 box-shadow: var(--f7-elevation-13) !important;
18477}
18478.device-desktop .elevation-hover-14:hover {
18479 box-shadow: var(--f7-elevation-14) !important;
18480}
18481.device-desktop .elevation-hover-15:hover {
18482 box-shadow: var(--f7-elevation-15) !important;
18483}
18484.device-desktop .elevation-hover-16:hover {
18485 box-shadow: var(--f7-elevation-16) !important;
18486}
18487.device-desktop .elevation-hover-17:hover {
18488 box-shadow: var(--f7-elevation-17) !important;
18489}
18490.device-desktop .elevation-hover-18:hover {
18491 box-shadow: var(--f7-elevation-18) !important;
18492}
18493.device-desktop .elevation-hover-19:hover {
18494 box-shadow: var(--f7-elevation-19) !important;
18495}
18496.device-desktop .elevation-hover-20:hover {
18497 box-shadow: var(--f7-elevation-20) !important;
18498}
18499.device-desktop .elevation-hover-21:hover {
18500 box-shadow: var(--f7-elevation-21) !important;
18501}
18502.device-desktop .elevation-hover-22:hover {
18503 box-shadow: var(--f7-elevation-22) !important;
18504}
18505.device-desktop .elevation-hover-23:hover {
18506 box-shadow: var(--f7-elevation-23) !important;
18507}
18508.device-desktop .elevation-hover-24:hover {
18509 box-shadow: var(--f7-elevation-24) !important;
18510}
18511.active-state.elevation-pressed-0,
18512.device-desktop .active-state.elevation-pressed-0 {
18513 box-shadow: var(--f7-elevation-0) !important;
18514}
18515.active-state.elevation-pressed-1,
18516.device-desktop .active-state.elevation-pressed-1 {
18517 box-shadow: var(--f7-elevation-1) !important;
18518}
18519.active-state.elevation-pressed-2,
18520.device-desktop .active-state.elevation-pressed-2 {
18521 box-shadow: var(--f7-elevation-2) !important;
18522}
18523.active-state.elevation-pressed-3,
18524.device-desktop .active-state.elevation-pressed-3 {
18525 box-shadow: var(--f7-elevation-3) !important;
18526}
18527.active-state.elevation-pressed-4,
18528.device-desktop .active-state.elevation-pressed-4 {
18529 box-shadow: var(--f7-elevation-4) !important;
18530}
18531.active-state.elevation-pressed-5,
18532.device-desktop .active-state.elevation-pressed-5 {
18533 box-shadow: var(--f7-elevation-5) !important;
18534}
18535.active-state.elevation-pressed-6,
18536.device-desktop .active-state.elevation-pressed-6 {
18537 box-shadow: var(--f7-elevation-6) !important;
18538}
18539.active-state.elevation-pressed-7,
18540.device-desktop .active-state.elevation-pressed-7 {
18541 box-shadow: var(--f7-elevation-7) !important;
18542}
18543.active-state.elevation-pressed-8,
18544.device-desktop .active-state.elevation-pressed-8 {
18545 box-shadow: var(--f7-elevation-8) !important;
18546}
18547.active-state.elevation-pressed-9,
18548.device-desktop .active-state.elevation-pressed-9 {
18549 box-shadow: var(--f7-elevation-9) !important;
18550}
18551.active-state.elevation-pressed-10,
18552.device-desktop .active-state.elevation-pressed-10 {
18553 box-shadow: var(--f7-elevation-10) !important;
18554}
18555.active-state.elevation-pressed-11,
18556.device-desktop .active-state.elevation-pressed-11 {
18557 box-shadow: var(--f7-elevation-11) !important;
18558}
18559.active-state.elevation-pressed-12,
18560.device-desktop .active-state.elevation-pressed-12 {
18561 box-shadow: var(--f7-elevation-12) !important;
18562}
18563.active-state.elevation-pressed-13,
18564.device-desktop .active-state.elevation-pressed-13 {
18565 box-shadow: var(--f7-elevation-13) !important;
18566}
18567.active-state.elevation-pressed-14,
18568.device-desktop .active-state.elevation-pressed-14 {
18569 box-shadow: var(--f7-elevation-14) !important;
18570}
18571.active-state.elevation-pressed-15,
18572.device-desktop .active-state.elevation-pressed-15 {
18573 box-shadow: var(--f7-elevation-15) !important;
18574}
18575.active-state.elevation-pressed-16,
18576.device-desktop .active-state.elevation-pressed-16 {
18577 box-shadow: var(--f7-elevation-16) !important;
18578}
18579.active-state.elevation-pressed-17,
18580.device-desktop .active-state.elevation-pressed-17 {
18581 box-shadow: var(--f7-elevation-17) !important;
18582}
18583.active-state.elevation-pressed-18,
18584.device-desktop .active-state.elevation-pressed-18 {
18585 box-shadow: var(--f7-elevation-18) !important;
18586}
18587.active-state.elevation-pressed-19,
18588.device-desktop .active-state.elevation-pressed-19 {
18589 box-shadow: var(--f7-elevation-19) !important;
18590}
18591.active-state.elevation-pressed-20,
18592.device-desktop .active-state.elevation-pressed-20 {
18593 box-shadow: var(--f7-elevation-20) !important;
18594}
18595.active-state.elevation-pressed-21,
18596.device-desktop .active-state.elevation-pressed-21 {
18597 box-shadow: var(--f7-elevation-21) !important;
18598}
18599.active-state.elevation-pressed-22,
18600.device-desktop .active-state.elevation-pressed-22 {
18601 box-shadow: var(--f7-elevation-22) !important;
18602}
18603.active-state.elevation-pressed-23,
18604.device-desktop .active-state.elevation-pressed-23 {
18605 box-shadow: var(--f7-elevation-23) !important;
18606}
18607.active-state.elevation-pressed-24,
18608.device-desktop .active-state.elevation-pressed-24 {
18609 box-shadow: var(--f7-elevation-24) !important;
18610}
18611.elevation-transition-100 {
18612 transition-duration: 100ms;
18613 transition-property: box-shadow;
18614}
18615.elevation-transition,
18616.elevation-transition-200 {
18617 transition-duration: 200ms;
18618 transition-property: box-shadow;
18619}
18620.elevation-transition-300 {
18621 transition-duration: 300ms;
18622 transition-property: box-shadow;
18623}
18624.elevation-transition-400 {
18625 transition-duration: 400ms;
18626 transition-property: box-shadow;
18627}
18628.elevation-transition-500 {
18629 transition-duration: 500ms;
18630 transition-property: box-shadow;
18631}
18632/* === Typography === */
18633.ios {
18634 --f7-typography-padding: 15px;
18635 --f7-typography-margin: 15px;
18636}
18637.md {
18638 --f7-typography-padding: 16px;
18639 --f7-typography-margin: 16px;
18640}
5d51ea26
DC
18641.aurora {
18642 --f7-typography-padding: 15px;
18643 --f7-typography-margin: 15px;
18644}
5309fbda
DC
18645.display-flex {
18646 display: flex !important;
18647}
18648.display-block {
18649 display: block !important;
18650}
18651.display-inline-flex {
18652 display: inline-flex !important;
18653}
18654.display-inline-block {
18655 display: inline-block !important;
18656}
18657.display-inline {
18658 display: inline !important;
18659}
18660.display-none {
18661 display: none !important;
18662}
18663.flex-shrink-0 {
18664 flex-shrink: 0 !important;
18665}
18666.flex-shrink-1 {
18667 flex-shrink: 1 !important;
18668}
18669.flex-shrink-2 {
18670 flex-shrink: 2 !important;
18671}
18672.flex-shrink-3 {
18673 flex-shrink: 3 !important;
18674}
18675.flex-shrink-4 {
18676 flex-shrink: 4 !important;
18677}
18678.flex-shrink-5 {
18679 flex-shrink: 5 !important;
18680}
18681.flex-shrink-6 {
18682 flex-shrink: 6 !important;
18683}
18684.flex-shrink-7 {
18685 flex-shrink: 7 !important;
18686}
18687.flex-shrink-8 {
18688 flex-shrink: 8 !important;
18689}
18690.flex-shrink-9 {
18691 flex-shrink: 9 !important;
18692}
18693.flex-shrink-10 {
18694 flex-shrink: 10 !important;
18695}
5d51ea26
DC
18696.flex-direction-row {
18697 flex-direction: row !important;
18698}
18699.flex-direction-row-reverse {
18700 flex-direction: row-reverse !important;
18701}
18702.flex-direction-column {
18703 flex-direction: column !important;
18704}
18705.flex-direction-column-reverse {
18706 flex-direction: column-reverse !important;
18707}
5309fbda
DC
18708.justify-content-flex-start {
18709 justify-content: flex-start !important;
18710}
18711.justify-content-center {
18712 justify-content: center !important;
18713}
18714.justify-content-flex-end {
18715 justify-content: flex-end !important;
18716}
18717.justify-content-space-between {
18718 justify-content: space-between !important;
18719}
18720.justify-content-space-around {
18721 justify-content: space-around !important;
18722}
18723.justify-content-space-evenly {
18724 justify-content: space-evenly !important;
18725}
18726.justify-content-stretch {
18727 justify-content: stretch !important;
18728}
18729.justify-content-start {
18730 justify-content: start !important;
18731}
18732.justify-content-end {
18733 justify-content: end !important;
18734}
18735.justify-content-left {
18736 justify-content: left !important;
18737}
18738.justify-content-right {
18739 justify-content: right !important;
18740}
18741.align-content-flex-start {
18742 align-content: flex-start !important;
18743}
18744.align-content-flex-end {
18745 align-content: flex-end !important;
18746}
18747.align-content-center {
18748 align-content: center !important;
18749}
18750.align-content-space-between {
18751 align-content: space-between !important;
18752}
18753.align-content-space-around {
18754 align-content: space-around !important;
18755}
18756.align-content-stretch {
18757 align-content: stretch !important;
18758}
5d51ea26
DC
18759.align-items-baseline {
18760 align-items: baseline !important;
18761}
5309fbda
DC
18762.align-items-flex-start {
18763 align-items: flex-start !important;
18764}
18765.align-items-flex-end {
18766 align-items: flex-end !important;
18767}
18768.align-items-center {
18769 align-items: center !important;
18770}
18771.align-items-stretch {
18772 align-items: stretch !important;
18773}
18774.align-self-flex-start {
18775 align-self: flex-start !important;
18776}
18777.align-self-flex-end {
18778 align-self: flex-end !important;
18779}
18780.align-self-center {
18781 align-self: center !important;
18782}
18783.align-self-stretch {
18784 align-self: stretch !important;
18785}
18786.text-align-left {
18787 text-align: left !important;
18788}
18789.text-align-center {
18790 text-align: center !important;
18791}
18792.text-align-right {
18793 text-align: right !important;
18794}
18795.text-align-justify {
18796 text-align: justify !important;
18797}
18798.float-left {
18799 float: left !important;
18800}
18801.float-right {
18802 float: right !important;
18803}
18804.float-none {
18805 float: none !important;
18806}
18807.vertical-align-bottom {
18808 vertical-align: bottom !important;
18809}
18810.vertical-align-middle {
18811 vertical-align: middle !important;
18812}
18813.vertical-align-top {
18814 vertical-align: top !important;
18815}
18816.no-padding {
18817 padding: 0 !important;
18818}
18819.no-padding-left {
18820 padding-left: 0 !important;
18821}
18822.no-padding-right {
18823 padding-right: 0 !important;
18824}
18825.no-padding-horizontal {
18826 padding-left: 0 !important;
18827 padding-right: 0 !important;
18828}
18829.no-padding-top {
18830 padding-top: 0 !important;
18831}
18832.no-padding-bottom {
18833 padding-bottom: 0 !important;
18834}
18835.no-padding-vertical {
18836 padding-top: 0 !important;
18837 padding-bottom: 0 !important;
18838}
18839.no-margin {
18840 margin: 0 !important;
18841}
18842.no-margin-left {
18843 margin-left: 0 !important;
18844}
18845.no-margin-right {
18846 margin-right: 0 !important;
18847}
18848.no-margin-horizontal {
18849 margin-left: 0 !important;
18850 margin-right: 0 !important;
18851}
18852.no-margin-top {
18853 margin-top: 0 !important;
18854}
18855.no-margin-bottom {
18856 margin-bottom: 0 !important;
18857}
18858.no-margin-vertical {
18859 margin-top: 0 !important;
18860 margin-bottom: 0 !important;
18861}
18862.width-auto {
18863 width: auto !important;
18864}
18865.width-100 {
18866 width: 100% !important;
18867}
18868.padding {
18869 padding: var(--f7-typography-padding) !important;
18870}
5d51ea26
DC
18871.padding-half {
18872 padding: calc(var(--f7-typography-padding) / 2) !important;
18873}
5309fbda
DC
18874.padding-top {
18875 padding-top: var(--f7-typography-padding) !important;
18876}
5d51ea26
DC
18877.padding-top-half {
18878 padding-top: calc(var(--f7-typography-padding) / 2) !important;
18879}
5309fbda
DC
18880.padding-bottom {
18881 padding-bottom: var(--f7-typography-padding) !important;
18882}
5d51ea26
DC
18883.padding-bottom-half {
18884 padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
18885}
5309fbda
DC
18886.padding-left {
18887 padding-left: var(--f7-typography-padding) !important;
18888}
5d51ea26
DC
18889.padding-left-half {
18890 padding-left: calc(var(--f7-typography-padding) / 2) !important;
18891}
5309fbda
DC
18892.padding-right {
18893 padding-right: var(--f7-typography-padding) !important;
18894}
5d51ea26
DC
18895.padding-right-half {
18896 padding-right: calc(var(--f7-typography-padding) / 2) !important;
18897}
5309fbda
DC
18898.padding-vertical {
18899 padding-top: var(--f7-typography-padding) !important;
18900 padding-bottom: var(--f7-typography-padding) !important;
18901}
5d51ea26
DC
18902.padding-vertical-half {
18903 padding-top: calc(var(--f7-typography-padding) / 2) !important;
18904 padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
18905}
5309fbda
DC
18906.padding-horizontal {
18907 padding-left: var(--f7-typography-padding) !important;
18908 padding-right: var(--f7-typography-padding) !important;
18909}
5d51ea26
DC
18910.padding-horizontal-half {
18911 padding-left: calc(var(--f7-typography-padding) / 2) !important;
18912 padding-right: calc(var(--f7-typography-padding) / 2) !important;
18913}
5309fbda
DC
18914.margin {
18915 margin: var(--f7-typography-margin) !important;
18916}
5d51ea26
DC
18917.margin-half {
18918 margin: calc(var(--f7-typography-margin) / 2) !important;
18919}
5309fbda
DC
18920.margin-top {
18921 margin-top: var(--f7-typography-margin) !important;
18922}
5d51ea26
DC
18923.margin-top-half {
18924 margin-top: calc(var(--f7-typography-margin) / 2) !important;
18925}
5309fbda
DC
18926.margin-bottom {
18927 margin-bottom: var(--f7-typography-margin) !important;
18928}
5d51ea26
DC
18929.margin-bottom-half {
18930 margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
18931}
5309fbda
DC
18932.margin-left {
18933 margin-left: var(--f7-typography-margin) !important;
18934}
5d51ea26
DC
18935.margin-left-half {
18936 margin-left: calc(var(--f7-typography-margin) / 2) !important;
18937}
5309fbda
DC
18938.margin-right {
18939 margin-right: var(--f7-typography-margin) !important;
18940}
5d51ea26
DC
18941.margin-right-half {
18942 margin-right: calc(var(--f7-typography-margin) / 2) !important;
18943}
5309fbda
DC
18944.margin-vertical {
18945 margin-top: var(--f7-typography-margin) !important;
18946 margin-bottom: var(--f7-typography-margin) !important;
18947}
5d51ea26
DC
18948.margin-vertical-half {
18949 margin-top: calc(var(--f7-typography-margin) / 2) !important;
18950 margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
18951}
5309fbda
DC
18952.margin-horizontal {
18953 margin-left: var(--f7-typography-margin) !important;
18954 margin-right: var(--f7-typography-margin) !important;
18955}
5d51ea26
DC
18956.margin-horizontal-half {
18957 margin-left: calc(var(--f7-typography-margin) / 2) !important;
18958 margin-right: calc(var(--f7-typography-margin) / 2) !important;
18959}
5309fbda
DC
18960[class*="text-color-"] {
18961 color: var(--f7-theme-color-text-color) !important;
18962}
18963[class*="bg-color-"] {
18964 background-color: var(--f7-theme-color-bg-color) !important;
18965}
18966[class*="border-color-"] {
18967 border-color: var(--f7-theme-color-border-color) !important;
18968}