UNPKG

189 kBCSSView Raw
1/**
2 * Framework7 6.0.0-beta.2
3 * Full featured mobile HTML framework for building iOS & Android apps
4 * https://framework7.io/
5 *
6 * Copyright 2014-2020 Vladimir Kharlampidi
7 *
8 * Released under the MIT License
9 *
10 * Released on: November 16, 2020
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 & Bars
81 ==================== */
82:root {
83 --f7-font-size: 14px;
84 /*
85 --f7-bars-link-color: var(--f7-theme-color);
86 */
87 --f7-bars-bg-image: none;
88 --f7-bars-translucent-opacity: 0.8;
89 --f7-bars-translucent-blur: 20px;
90 --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%);
91 --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%);
92 --f7-bars-text-color: #000;
93 --f7-bars-bg-color: #f7f7f8;
94 --f7-bars-bg-color-rgb: 247, 247, 248;
95}
96:root .theme-dark,
97:root.theme-dark {
98 --f7-bars-text-color: #fff;
99}
100.ios {
101 --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
102 --f7-line-height: 1.4;
103 --f7-text-color: #000;
104 --f7-bars-border-color: rgba(0, 0, 0, 0.25);
105}
106.ios .theme-dark,
107.ios.theme-dark {
108 --f7-text-color: #fff;
109 --f7-bars-bg-color: #121212;
110 --f7-bars-bg-color-rgb: 22, 22, 22;
111 --f7-bars-border-color: rgba(255, 255, 255, 0.16);
112}
113.md {
114 --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
115 --f7-line-height: 1.5;
116 --f7-bars-border-color: transparent;
117 --f7-text-color: #212121;
118}
119.md .theme-dark,
120.md.theme-dark {
121 --f7-text-color: rgba(255, 255, 255, 0.87);
122 --f7-bars-bg-color: #202020;
123}
124.aurora {
125 --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
126 --f7-line-height: 1.5;
127 --f7-text-color: #000;
128 --f7-bars-border-color: rgba(0, 0, 0, 0.2);
129}
130.aurora .theme-dark,
131.aurora.theme-dark {
132 --f7-text-color: #fff;
133 --f7-bars-bg-color: #202020;
134 --f7-bars-border-color: rgba(255, 255, 255, 0.1);
135}
136/*====================
137 Color Themes
138 ==================== */
139.text-color-primary {
140 --f7-theme-color-text-color: var(--f7-theme-color);
141}
142.bg-color-primary {
143 --f7-theme-color-bg-color: var(--f7-theme-color);
144}
145.border-color-primary {
146 --f7-theme-color-border-color: var(--f7-theme-color);
147}
148.ripple-color-primary {
149 --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
150}
151:root {
152 --f7-color-red: #ff3b30;
153 --f7-color-red-rgb: 255, 59, 48;
154 --f7-color-red-shade: #ff1407;
155 --f7-color-red-tint: #ff6259;
156 --f7-color-green: #4cd964;
157 --f7-color-green-rgb: 76, 217, 100;
158 --f7-color-green-shade: #2cd048;
159 --f7-color-green-tint: #6ee081;
160 --f7-color-blue: #2196f3;
161 --f7-color-blue-rgb: 33, 150, 243;
162 --f7-color-blue-shade: #0c82df;
163 --f7-color-blue-tint: #48a8f5;
164 --f7-color-pink: #ff2d55;
165 --f7-color-pink-rgb: 255, 45, 85;
166 --f7-color-pink-shade: #ff0434;
167 --f7-color-pink-tint: #ff5676;
168 --f7-color-yellow: #ffcc00;
169 --f7-color-yellow-rgb: 255, 204, 0;
170 --f7-color-yellow-shade: #d6ab00;
171 --f7-color-yellow-tint: #ffd429;
172 --f7-color-orange: #ff9500;
173 --f7-color-orange-rgb: 255, 149, 0;
174 --f7-color-orange-shade: #d67d00;
175 --f7-color-orange-tint: #ffa629;
176 --f7-color-purple: #9c27b0;
177 --f7-color-purple-rgb: 156, 39, 176;
178 --f7-color-purple-shade: #7e208f;
179 --f7-color-purple-tint: #b92fd1;
180 --f7-color-deeppurple: #673ab7;
181 --f7-color-deeppurple-rgb: 103, 58, 183;
182 --f7-color-deeppurple-shade: #563098;
183 --f7-color-deeppurple-tint: #7c52c8;
184 --f7-color-lightblue: #5ac8fa;
185 --f7-color-lightblue-rgb: 90, 200, 250;
186 --f7-color-lightblue-shade: #32bbf9;
187 --f7-color-lightblue-tint: #82d5fb;
188 --f7-color-teal: #009688;
189 --f7-color-teal-rgb: 0, 150, 136;
190 --f7-color-teal-shade: #006d63;
191 --f7-color-teal-tint: #00bfad;
192 --f7-color-lime: #cddc39;
193 --f7-color-lime-rgb: 205, 220, 57;
194 --f7-color-lime-shade: #bac923;
195 --f7-color-lime-tint: #d6e25c;
196 --f7-color-deeporange: #ff6b22;
197 --f7-color-deeporange-rgb: 255, 107, 34;
198 --f7-color-deeporange-shade: #f85200;
199 --f7-color-deeporange-tint: #ff864b;
200 --f7-color-gray: #8e8e93;
201 --f7-color-gray-rgb: 142, 142, 147;
202 --f7-color-gray-shade: #79797f;
203 --f7-color-gray-tint: #a3a3a7;
204 --f7-color-white: #ffffff;
205 --f7-color-white-rgb: 255, 255, 255;
206 --f7-color-white-shade: #ebebeb;
207 --f7-color-white-tint: #ffffff;
208 --f7-color-black: #000000;
209 --f7-color-black-rgb: 0, 0, 0;
210 --f7-color-black-shade: #000000;
211 --f7-color-black-tint: #141414;
212}
213.color-theme-red {
214 --f7-theme-color: #ff3b30;
215 --f7-theme-color-rgb: 255, 59, 48;
216 --f7-theme-color-shade: #ff1407;
217 --f7-theme-color-tint: #ff6259;
218}
219.color-theme-green {
220 --f7-theme-color: #4cd964;
221 --f7-theme-color-rgb: 76, 217, 100;
222 --f7-theme-color-shade: #2cd048;
223 --f7-theme-color-tint: #6ee081;
224}
225.color-theme-blue {
226 --f7-theme-color: #2196f3;
227 --f7-theme-color-rgb: 33, 150, 243;
228 --f7-theme-color-shade: #0c82df;
229 --f7-theme-color-tint: #48a8f5;
230}
231.color-theme-pink {
232 --f7-theme-color: #ff2d55;
233 --f7-theme-color-rgb: 255, 45, 85;
234 --f7-theme-color-shade: #ff0434;
235 --f7-theme-color-tint: #ff5676;
236}
237.color-theme-yellow {
238 --f7-theme-color: #ffcc00;
239 --f7-theme-color-rgb: 255, 204, 0;
240 --f7-theme-color-shade: #d6ab00;
241 --f7-theme-color-tint: #ffd429;
242}
243.color-theme-orange {
244 --f7-theme-color: #ff9500;
245 --f7-theme-color-rgb: 255, 149, 0;
246 --f7-theme-color-shade: #d67d00;
247 --f7-theme-color-tint: #ffa629;
248}
249.color-theme-purple {
250 --f7-theme-color: #9c27b0;
251 --f7-theme-color-rgb: 156, 39, 176;
252 --f7-theme-color-shade: #7e208f;
253 --f7-theme-color-tint: #b92fd1;
254}
255.color-theme-deeppurple {
256 --f7-theme-color: #673ab7;
257 --f7-theme-color-rgb: 103, 58, 183;
258 --f7-theme-color-shade: #563098;
259 --f7-theme-color-tint: #7c52c8;
260}
261.color-theme-lightblue {
262 --f7-theme-color: #5ac8fa;
263 --f7-theme-color-rgb: 90, 200, 250;
264 --f7-theme-color-shade: #32bbf9;
265 --f7-theme-color-tint: #82d5fb;
266}
267.color-theme-teal {
268 --f7-theme-color: #009688;
269 --f7-theme-color-rgb: 0, 150, 136;
270 --f7-theme-color-shade: #006d63;
271 --f7-theme-color-tint: #00bfad;
272}
273.color-theme-lime {
274 --f7-theme-color: #cddc39;
275 --f7-theme-color-rgb: 205, 220, 57;
276 --f7-theme-color-shade: #bac923;
277 --f7-theme-color-tint: #d6e25c;
278}
279.color-theme-deeporange {
280 --f7-theme-color: #ff6b22;
281 --f7-theme-color-rgb: 255, 107, 34;
282 --f7-theme-color-shade: #f85200;
283 --f7-theme-color-tint: #ff864b;
284}
285.color-theme-gray {
286 --f7-theme-color: #8e8e93;
287 --f7-theme-color-rgb: 142, 142, 147;
288 --f7-theme-color-shade: #79797f;
289 --f7-theme-color-tint: #a3a3a7;
290}
291.color-theme-white {
292 --f7-theme-color: #ffffff;
293 --f7-theme-color-rgb: 255, 255, 255;
294 --f7-theme-color-shade: #ebebeb;
295 --f7-theme-color-tint: #ffffff;
296}
297.color-theme-black {
298 --f7-theme-color: #000000;
299 --f7-theme-color-rgb: 0, 0, 0;
300 --f7-theme-color-shade: #000000;
301 --f7-theme-color-tint: #141414;
302}
303.color-red {
304 --f7-theme-color: #ff3b30;
305 --f7-theme-color-rgb: 255, 59, 48;
306 --f7-theme-color-shade: #ff1407;
307 --f7-theme-color-tint: #ff6259;
308}
309.text-color-red {
310 --f7-theme-color-text-color: #ff3b30;
311}
312.bg-color-red {
313 --f7-theme-color-bg-color: #ff3b30;
314}
315.border-color-red {
316 --f7-theme-color-border-color: #ff3b30;
317}
318.ripple-color-red,
319.ripple-red {
320 --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
321}
322.color-green {
323 --f7-theme-color: #4cd964;
324 --f7-theme-color-rgb: 76, 217, 100;
325 --f7-theme-color-shade: #2cd048;
326 --f7-theme-color-tint: #6ee081;
327}
328.text-color-green {
329 --f7-theme-color-text-color: #4cd964;
330}
331.bg-color-green {
332 --f7-theme-color-bg-color: #4cd964;
333}
334.border-color-green {
335 --f7-theme-color-border-color: #4cd964;
336}
337.ripple-color-green,
338.ripple-green {
339 --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
340}
341.color-blue {
342 --f7-theme-color: #2196f3;
343 --f7-theme-color-rgb: 33, 150, 243;
344 --f7-theme-color-shade: #0c82df;
345 --f7-theme-color-tint: #48a8f5;
346}
347.text-color-blue {
348 --f7-theme-color-text-color: #2196f3;
349}
350.bg-color-blue {
351 --f7-theme-color-bg-color: #2196f3;
352}
353.border-color-blue {
354 --f7-theme-color-border-color: #2196f3;
355}
356.ripple-color-blue,
357.ripple-blue {
358 --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
359}
360.color-pink {
361 --f7-theme-color: #ff2d55;
362 --f7-theme-color-rgb: 255, 45, 85;
363 --f7-theme-color-shade: #ff0434;
364 --f7-theme-color-tint: #ff5676;
365}
366.text-color-pink {
367 --f7-theme-color-text-color: #ff2d55;
368}
369.bg-color-pink {
370 --f7-theme-color-bg-color: #ff2d55;
371}
372.border-color-pink {
373 --f7-theme-color-border-color: #ff2d55;
374}
375.ripple-color-pink,
376.ripple-pink {
377 --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
378}
379.color-yellow {
380 --f7-theme-color: #ffcc00;
381 --f7-theme-color-rgb: 255, 204, 0;
382 --f7-theme-color-shade: #d6ab00;
383 --f7-theme-color-tint: #ffd429;
384}
385.text-color-yellow {
386 --f7-theme-color-text-color: #ffcc00;
387}
388.bg-color-yellow {
389 --f7-theme-color-bg-color: #ffcc00;
390}
391.border-color-yellow {
392 --f7-theme-color-border-color: #ffcc00;
393}
394.ripple-color-yellow,
395.ripple-yellow {
396 --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
397}
398.color-orange {
399 --f7-theme-color: #ff9500;
400 --f7-theme-color-rgb: 255, 149, 0;
401 --f7-theme-color-shade: #d67d00;
402 --f7-theme-color-tint: #ffa629;
403}
404.text-color-orange {
405 --f7-theme-color-text-color: #ff9500;
406}
407.bg-color-orange {
408 --f7-theme-color-bg-color: #ff9500;
409}
410.border-color-orange {
411 --f7-theme-color-border-color: #ff9500;
412}
413.ripple-color-orange,
414.ripple-orange {
415 --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
416}
417.color-purple {
418 --f7-theme-color: #9c27b0;
419 --f7-theme-color-rgb: 156, 39, 176;
420 --f7-theme-color-shade: #7e208f;
421 --f7-theme-color-tint: #b92fd1;
422}
423.text-color-purple {
424 --f7-theme-color-text-color: #9c27b0;
425}
426.bg-color-purple {
427 --f7-theme-color-bg-color: #9c27b0;
428}
429.border-color-purple {
430 --f7-theme-color-border-color: #9c27b0;
431}
432.ripple-color-purple,
433.ripple-purple {
434 --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
435}
436.color-deeppurple {
437 --f7-theme-color: #673ab7;
438 --f7-theme-color-rgb: 103, 58, 183;
439 --f7-theme-color-shade: #563098;
440 --f7-theme-color-tint: #7c52c8;
441}
442.text-color-deeppurple {
443 --f7-theme-color-text-color: #673ab7;
444}
445.bg-color-deeppurple {
446 --f7-theme-color-bg-color: #673ab7;
447}
448.border-color-deeppurple {
449 --f7-theme-color-border-color: #673ab7;
450}
451.ripple-color-deeppurple,
452.ripple-deeppurple {
453 --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
454}
455.color-lightblue {
456 --f7-theme-color: #5ac8fa;
457 --f7-theme-color-rgb: 90, 200, 250;
458 --f7-theme-color-shade: #32bbf9;
459 --f7-theme-color-tint: #82d5fb;
460}
461.text-color-lightblue {
462 --f7-theme-color-text-color: #5ac8fa;
463}
464.bg-color-lightblue {
465 --f7-theme-color-bg-color: #5ac8fa;
466}
467.border-color-lightblue {
468 --f7-theme-color-border-color: #5ac8fa;
469}
470.ripple-color-lightblue,
471.ripple-lightblue {
472 --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
473}
474.color-teal {
475 --f7-theme-color: #009688;
476 --f7-theme-color-rgb: 0, 150, 136;
477 --f7-theme-color-shade: #006d63;
478 --f7-theme-color-tint: #00bfad;
479}
480.text-color-teal {
481 --f7-theme-color-text-color: #009688;
482}
483.bg-color-teal {
484 --f7-theme-color-bg-color: #009688;
485}
486.border-color-teal {
487 --f7-theme-color-border-color: #009688;
488}
489.ripple-color-teal,
490.ripple-teal {
491 --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
492}
493.color-lime {
494 --f7-theme-color: #cddc39;
495 --f7-theme-color-rgb: 205, 220, 57;
496 --f7-theme-color-shade: #bac923;
497 --f7-theme-color-tint: #d6e25c;
498}
499.text-color-lime {
500 --f7-theme-color-text-color: #cddc39;
501}
502.bg-color-lime {
503 --f7-theme-color-bg-color: #cddc39;
504}
505.border-color-lime {
506 --f7-theme-color-border-color: #cddc39;
507}
508.ripple-color-lime,
509.ripple-lime {
510 --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
511}
512.color-deeporange {
513 --f7-theme-color: #ff6b22;
514 --f7-theme-color-rgb: 255, 107, 34;
515 --f7-theme-color-shade: #f85200;
516 --f7-theme-color-tint: #ff864b;
517}
518.text-color-deeporange {
519 --f7-theme-color-text-color: #ff6b22;
520}
521.bg-color-deeporange {
522 --f7-theme-color-bg-color: #ff6b22;
523}
524.border-color-deeporange {
525 --f7-theme-color-border-color: #ff6b22;
526}
527.ripple-color-deeporange,
528.ripple-deeporange {
529 --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
530}
531.color-gray {
532 --f7-theme-color: #8e8e93;
533 --f7-theme-color-rgb: 142, 142, 147;
534 --f7-theme-color-shade: #79797f;
535 --f7-theme-color-tint: #a3a3a7;
536}
537.text-color-gray {
538 --f7-theme-color-text-color: #8e8e93;
539}
540.bg-color-gray {
541 --f7-theme-color-bg-color: #8e8e93;
542}
543.border-color-gray {
544 --f7-theme-color-border-color: #8e8e93;
545}
546.ripple-color-gray,
547.ripple-gray {
548 --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
549}
550.color-white {
551 --f7-theme-color: #ffffff;
552 --f7-theme-color-rgb: 255, 255, 255;
553 --f7-theme-color-shade: #ebebeb;
554 --f7-theme-color-tint: #ffffff;
555}
556.text-color-white {
557 --f7-theme-color-text-color: #ffffff;
558}
559.bg-color-white {
560 --f7-theme-color-bg-color: #ffffff;
561}
562.border-color-white {
563 --f7-theme-color-border-color: #ffffff;
564}
565.ripple-color-white,
566.ripple-white {
567 --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
568}
569.color-black {
570 --f7-theme-color: #000000;
571 --f7-theme-color-rgb: 0, 0, 0;
572 --f7-theme-color-shade: #000000;
573 --f7-theme-color-tint: #141414;
574}
575.text-color-black {
576 --f7-theme-color-text-color: #000000;
577}
578.bg-color-black {
579 --f7-theme-color-bg-color: #000000;
580}
581.border-color-black {
582 --f7-theme-color-border-color: #000000;
583}
584.ripple-color-black,
585.ripple-black {
586 --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
587}
588@font-face {
589 font-family: 'framework7-core-icons';
590 src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAzQABAAAAAAGGwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcjtboWUdERUYAAAGIAAAAIwAAACQAewBXR1BPUwAAAawAAAAuAAAANuAY7+xHU1VCAAAB3AAAAZ4AAAP6ALYH7k9TLzIAAAN8AAAASgAAAGBRKF+WY21hcAAAA8gAAACJAAABYt6F0cBjdnQgAAAEVAAAAAQAAAAEABEBRGdhc3AAAARYAAAACAAAAAj//wADZ2x5ZgAABGAAAASAAAAJvIVgCq9oZWFkAAAI4AAAADAAAAA2GfP/aWhoZWEAAAkQAAAAIAAAACQHgQM7aG10eAAACTAAAABcAAABHC1sAAFsb2NhAAAJjAAAAJAAAACQQehEdm1heHAAAAocAAAAHwAAACAAjQBMbmFtZQAACjwAAAFPAAAC2VmaSiNwb3N0AAALjAAAAUMAAAJaVPYZiHicY2BgYGQAghsJmjkg+rZ1fBmMBgA8PQWlAAB4nGNgZGBg4AFiGSBmAkJmBk0GRgYtBjcgmwUsxgAADWAA0wB4nGNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB4nHVTW07CQBQ9Q2vAJwhVGwW0UJEgvt+Kb+XDT3dAYjQmxA9DXIDLMC7CLz9dg3EJfrkLPDMF+pg0TTPTe84998ydWwgAIyiiDtFudZ6QgskIul1IRLQfH1qMwfsiZqo1BWF8IAkLL4lO4scwDddowGC8iia2kYbDp4gKd5Ncy3yKyPMrjxyuMBHAHdiYxgwZHrqK8QA6xxpTAyyNBdzgGW/4wq8wRUU0xb14Fe/iU3yLP9a2qGRhUeUXIuoZuCrucHdGtTDTrxTk7Wq8nHJWiPCOeM4wz8V8hLOscYLubMZKWCcvzpfHuNAY0Q6ucI3TkPh+D89iVt3OUsTnBm8grsI5xrRcz9dmD9GrNjSk38M1jGpq0uEBZ1LvppyvGu//kh4tpV7mm1Ycl6zcwMsxd3EMqX+C4RAuY3K6t3hKOa02fdt0lVF7z0GWfKltDarIjFP2qkx92UF/an18h5UyVJeRfnyI/ajSwy3ucMh8S+VmeeLwPdTYhSDmZdeVdz8qvV+zMzLHn5I9/p39iHe6JHOy3BXYSQelf3GmQG8AAHicY2Bh/MI4gYGVgYHRhzGNgYHBHUp/ZZBkaGFgYGJgZWaAAUYGJBCQ5prC0MCgwFDFeOD/AQY9ps+MxTA1jAfAShQYxABDtQxkAAB4nGNgYGBmgGAZBkYGEIgB8hjBfBYGByDNw8DBwARkKzDoMlgyxDNU/f8PFAXxDIC8xP///z/+f/3/1f8b/q+HmgAHjGwMcCFGJiDBxICmAGI1HLAwMLCysXNwcnHz8PIxEAP4GQQEhYRFRMXEJSSlpGVk5eQVFJWUVVTV1DU0iTKA1gAAxH4T6AAAAAARAUQAAAAB//8AAnic7VXPbxtFFH5vHXvcuN611/au8KHEzno3CEiJ1/aG4iQWSThEEFCVQMilSVX5QkCNkM3Nzq1RRWSEUkWJeosEEpzyQyBVIkm5pKowlaweKpRTOCChcMqFSs2aN7s2JOl/gCrN7Jv5Zjzz5nvfewYBwgCwipPgAQa9GwiX85usA/5Kb/i8B/lNj0BD2PBw2MvhTebDZ/lN5LgZNsOGGe4OL35RLOKk/X0YTToNqe05nUbhPj5+gb3A/veYcArzEPqm4MDQQf0CfoDTlGESxEAFkJO+qJLOZfS0EvUl9YzXMiRULeO7iXx+In93bmxsbgyHgzdFcV6cx0J+YmBg4sMxDj8VbwY56PrQvI8mXSIDpJKSwE8aQkPP5NIvo4IGIv4e6FICu7sBJRE4lDYF4TCgdAV2djl6KLk+N//APfyG6sBLdIrKjKzh607yM5RYlKlJ7iV5i4UFfYH1Do3Ozt6+3sN+mBkZmRleWtCrMdYze3t2dnSwlw3PDA/POH6BDjv0Xi9AhNGR1k65rK2tYc4x0PL9GNdwCfx0ayzBN6kM1+wHNa1e12q/ZVzb2gtB/Blv8PMsVNGwaihpdr2mTbYsYPMpcfEqcUH1zMoNIbkfJUo5vZdR9yK9nN68s8Pffyg9Qs8h54TmLhP8jijsuz5b5Ixh7a9r1ar2I30rqbPrWXJVZa3lVKWqOTzaSx1F4RgCPL4pgzaoFkXUMoQuTQjJWleHHBKEwn5uv93esn+1T1ZW0INp9Kys/LlvtZesZwf/wvYJ3/Y8Z5wwqr8WrnGezK/2uMF+IrDNWQHfwwL4aKKyPtqNr2gH8xphZLrfdffM4duoQ4hGnC6HK0c9Vg4zIltkCnVR8ZdKftRFPuGYyEol5rwZprFOv+f/HTCAiZg3m4hh3Taxfmyaq6ZJcfkbPobH+DqIABQVVZFQRLrFyqljM52hUOen3ojvSlCULn75tdQZkL71IytIF4Oi6981fIfO5zoihTBj3SEddceAq19QcITiEqTMAgrMKfX6Wto9mopMaW9Y4+OfjW9MDQ5ODS58FJm6RLNxq+/KEEfOcsHVQwnkSIfxpDpDhCKutGkolwk76ydFnOLu+nltXatUNCfHloQiHhNLEYBMiJwL+ZJI72mrZNve3rahGS8W262AsLXVhC1cPQW2c6GIn5POAJlDinMlFms1rd3w/VMTikHT3hWOhD2IA3jDDjdha5AnB0OfkTSwl+KdVrFfy6R+kTMRWbYfxuLxiP1QxoiclT8RjuKpVPwkWufzDF8VIpiTTdrZ0toluIfXOXc5V0P/JeC9s7LpDfkX/VHqIcVVkfv7UapjuqNVR6oWmo9uyFd/wqhjztcUXi0MqiRaqYTTZMrllhaa00Jd0OEC1wLxbHKiu5ORU9nYWL7TaNxZXq7kKtSq/Psa9jQa9pMG3q1alYpVdb7n8825M5FNGHWeZ/YD7K/hEh9mnHzzcP8Ek/zjuUCxCWfdbOBdME/qbidmMgtOO89byJUcz0G3iJPYbjF2y+/KDK8+x9s/0/HZNXicY2BkYGAA4i/2pjLx/DZfGbiZGEDgtnV8GYz+/+NfL0sa02cgl4MBLA0AMbUL9HicY2BkYGD6/K+XQY8l7f8PBgaWNAagCApwBwCRUwXDeJxj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wKxExCfBYqf/f+D0Q3IdoGKAdlMIHVAzPTm/3+G3UC2McRMprMQ/UwgPlAcAGckFoUAAAAqACoAKgA0AD4ASABSAFwAZgBwAHoAhACOAJgAogCsALYAwADKANQA3gDoAPIA/AEGARABGgEkAS4BOAFCAUwBVgFgAWoBdAF+AYgBkgGcAaYBsgHeAgACKgI8AlICZAKEApQCpALWAuwC/gMeAzADTgNgA4QDogOyA9gD8gQiBEIEVARmBI4EpAS+BN54nGNgZGBgcGeQZmBhAAEmIGZkAIk5MOiBBAANmwDaAHicrZA/b8IwEMWf+Se1Q9Wh2W8ERJDJgsRYJBaWqkP2NLhgQWJ0REKoX6Zbt47d+im6dOreb9GLcaUODB2IdPIvz+/sewZwhVcoHL8u7gMrRHgJ3MAlPgI3MVK3gVuI1HPgNq7VZ+AOokYkTtW6kL8731WzQh9PgRu4wXvgJh7wFbiFvqoCt0HqLXBH9G9M4bDFAQyLJVaoQDJzjp6sCbSvgXCKDTIsxFVIsShzcWdCtV7IGdbvYuq2B7bLVUXdvEeJTvSA0k22sIVlmq8y3mTF1i7E+SjNdavBXoZgrDFGLFfXbISs5xI7sXJWmL3j9TjOHZvY5q4U+aT3r2HmxcqvLPmMTzWUTISJ1P9HOPrr14i95/dtMHNlNXO8NJQMNU3o5KiiJzoex/VznCN4Kj6Wfet9JHNojHwu7bMhNbyzriStR0OtNZ3h0h8bQoX1AHicbVCJTsJAFJwBlVuK3Id+jPG+79s0pS3SCF2yXcSfN7rQNtDETTbZNzNvdt5DCovz+wPiv3OoL5FCGgaqqKGOBppooY0OuuhhF3vYx4HWHeEYJzjFGc5xgUtc4Ro3uMUd7vGARzzhGS94xRvemWKaa1znBjPMMsc8CyyyxE2WabDCLVZZY50NNtlimx122eM2d/KBa0l7aHoiqNhD90sK35Tex1DNkVxEjp1yzI3cgdJ1yZJSzOKqoFn7sy++9dtIKLVJKWFbXKUbvlDewLMt5WnEHonAnXeUQ/O+UEqMtWVOWo4n5kw17nbEzDetqRTSygRCqihiGCLE87F2OilFc4REZUlESHHVtuy4I1e5phRT35n/HtV66ImSZphtNcti0KVRmEELjOQ+9WoSzlqxGZrFfHYxicZryc7Q+w/2brRkAA==') format('woff');
591 font-weight: 400;
592 font-style: normal;
593}
594html,
595body,
596.framework7-root {
597 position: relative;
598 height: 100%;
599 width: 100%;
600 overflow-x: hidden;
601}
602body {
603 margin: 0;
604 padding: 0;
605 width: 100%;
606 background: #fff;
607 overflow: hidden;
608 -webkit-text-size-adjust: 100%;
609 -webkit-font-smoothing: antialiased;
610 font-family: var(--f7-font-family);
611 font-size: var(--f7-font-size);
612 line-height: var(--f7-line-height);
613 color: var(--f7-text-color);
614}
615.theme-dark body,
616body.theme-dark {
617 background: #000;
618}
619.theme-dark {
620 color: var(--f7-text-color);
621}
622.framework7-root {
623 overflow: hidden;
624 box-sizing: border-box;
625}
626.framework7-initializing *,
627.framework7-initializing *:before,
628.framework7-initializing *:after {
629 transition-duration: 0ms !important;
630}
631.device-ios,
632.device-android {
633 cursor: pointer;
634}
635.device-ios {
636 touch-action: manipulation;
637}
638@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
639 html,
640 body,
641 .framework7-root {
642 height: 671px;
643 }
644}
645@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
646 html,
647 body,
648 .framework7-root {
649 height: 672px;
650 }
651}
652* {
653 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
654 -webkit-touch-callout: none;
655}
656a,
657input,
658textarea,
659select {
660 outline: 0;
661}
662a {
663 cursor: pointer;
664 text-decoration: none;
665 color: var(--f7-theme-color);
666}
667.link,
668.item-link {
669 cursor: pointer;
670}
671p {
672 margin: 1em 0;
673}
674.disabled {
675 opacity: 0.55 !important;
676 pointer-events: none !important;
677}
678html.device-full-viewport,
679html.device-full-viewport body {
680 height: 100vh;
681}
682.ios .md-only,
683.ios .if-md,
684.ios .aurora-only,
685.ios .if-aurora,
686.ios .if-not-ios,
687.ios .not-ios {
688 display: none !important;
689}
690@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
691 .ios,
692 .ios body,
693 .ios .framework7-root {
694 height: 671px;
695 }
696}
697@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
698 .ios,
699 .ios body,
700 .ios .framework7-root {
701 height: 672px;
702 }
703}
704.md .ios-only,
705.md .if-ios,
706.md .aurora-only,
707.md .if-aurora,
708.md .if-not-md,
709.md .not-md {
710 display: none !important;
711}
712.aurora .ios-only,
713.aurora .if-ios,
714.aurora .md-only,
715.aurora .if-md,
716.aurora .if-not-aurora,
717.aurora .not-aurora {
718 display: none !important;
719}
720/* === Statusbar === */
721/* === Views === */
722.views,
723.view {
724 position: relative;
725 height: 100%;
726 z-index: 5000;
727 overflow: hidden;
728 box-sizing: border-box;
729}
730.framework7-root > .view,
731.framework7-root > .views {
732 height: calc(100% - var(--f7-appbar-app-offset, 0px));
733}
734.view-resize-handler {
735 width: 6px;
736 height: 100%;
737 position: absolute;
738 left: var(--f7-page-master-width);
739 margin-left: -3px;
740 top: 0;
741 cursor: col-resize;
742 z-index: 1000;
743 display: none;
744}
745.view-master-detail .view-resize-handler {
746 display: block;
747}
748/* === Pages === */
749:root {
750 --f7-page-master-width: 320px;
751 --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
752 --f7-page-master-border-width: 1px;
753 --f7-page-swipeback-transition-duration: 300ms;
754 --f7-page-parallax-transition-duration: 500ms;
755 --f7-page-cover-transition-duration: 450ms;
756 --f7-page-dive-transition-duration: 500ms;
757 --f7-page-fade-transition-duration: 500ms;
758 --f7-page-flip-transition-duration: 700ms;
759 --f7-page-push-transition-duration: 500ms;
760 /*
761 --f7-page-content-extra-padding-top: 0px;
762 --f7-page-content-extra-padding-bottom: 0px;
763 */
764 --f7-page-title-line-height: 1.2;
765 --f7-page-title-text-color: inherit;
766 --f7-page-title-padding-left: 16px;
767 --f7-page-title-padding-right: 16px;
768}
769.ios {
770 --f7-page-transition-duration: 400ms;
771 --f7-page-title-font-size: 34px;
772 --f7-page-title-font-weight: 700;
773 --f7-page-title-letter-spacing: -0.03em;
774 --f7-page-title-padding-vertical: 6px;
775 --f7-page-bg-color: #efeff4;
776}
777.ios .theme-dark,
778.ios.theme-dark {
779 --f7-page-bg-color: #000;
780}
781.md {
782 --f7-page-transition-duration: 250ms;
783 --f7-page-title-font-size: 34px;
784 --f7-page-title-font-weight: 500;
785 --f7-page-title-letter-spacing: 0;
786 --f7-page-title-padding-vertical: 8px;
787 --f7-page-bg-color: #fff;
788}
789.md .theme-dark,
790.md.theme-dark {
791 --f7-page-bg-color: #121212;
792}
793.aurora {
794 --f7-page-transition-duration: 400ms;
795 --f7-page-title-font-size: 26px;
796 --f7-page-title-font-weight: bold;
797 --f7-page-title-letter-spacing: -0.03em;
798 --f7-page-title-padding-vertical: 4px;
799 --f7-page-bg-color: #f4f5f7;
800}
801.aurora .theme-dark,
802.aurora.theme-dark {
803 --f7-page-bg-color: #121212;
804}
805.theme-dark {
806 --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
807}
808.pages {
809 position: relative;
810 width: 100%;
811 height: 100%;
812 overflow: hidden;
813}
814.page {
815 box-sizing: border-box;
816 position: absolute;
817 left: 0;
818 top: 0;
819 width: 100%;
820 height: 100%;
821 transform: none;
822 background-color: var(--f7-page-bg-color);
823 z-index: 1;
824}
825.page.stacked {
826 display: none;
827}
828.page-with-navbar-large-collapsed {
829 --f7-navbar-large-collapse-progress: 1;
830}
831.page-previous {
832 pointer-events: none;
833}
834.page-content {
835 overflow: auto;
836 -webkit-overflow-scrolling: touch;
837 box-sizing: border-box;
838 height: 100%;
839 position: relative;
840 z-index: 1;
841 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));
842 padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
843}
844.page-transitioning,
845.page-transitioning .page-shadow-effect,
846.page-transitioning .page-opacity-effect {
847 transition-duration: var(--f7-page-transition-duration);
848}
849.page-transitioning-swipeback,
850.page-transitioning-swipeback .page-shadow-effect,
851.page-transitioning-swipeback .page-opacity-effect {
852 transition-duration: var(--f7-page-swipeback-transition-duration);
853}
854.router-transition-forward .page-next,
855.router-transition-backward .page-next,
856.router-transition-forward .page-current,
857.router-transition-backward .page-current,
858.router-transition-forward .page-previous:not(.stacked),
859.router-transition-backward .page-previous:not(.stacked) {
860 pointer-events: none;
861}
862.page-shadow-effect {
863 position: absolute;
864 top: 0;
865 width: 16px;
866 bottom: 0;
867 z-index: -1;
868 content: '';
869 opacity: 0;
870 right: 100%;
871 background: linear-gradient(to right, 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%);
872}
873.page-opacity-effect {
874 position: absolute;
875 left: 0;
876 top: 0;
877 background: rgba(0, 0, 0, 0.1);
878 width: 100%;
879 bottom: 0;
880 content: '';
881 opacity: 0;
882 z-index: 10000;
883}
884.ios .page-previous {
885 transform: translate3d(-20%, 0, 0);
886}
887.ios .page-next {
888 transform: translate3d(100%, 0, 0);
889}
890.ios .page-previous .page-opacity-effect {
891 opacity: 1;
892}
893.ios .page-previous:after {
894 opacity: 1;
895}
896.ios .page-current .page-shadow-effect {
897 opacity: 1;
898}
899.ios .router-transition-forward .page-next {
900 animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
901}
902.ios .router-transition-forward .page-next:before {
903 position: absolute;
904 top: 0;
905 width: 16px;
906 bottom: 0;
907 z-index: -1;
908 content: '';
909 opacity: 0;
910 right: 100%;
911 background: linear-gradient(to right, 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%);
912 animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
913}
914.ios .router-transition-forward .page-current {
915 animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
916}
917.ios .router-transition-forward .page-current:after {
918 position: absolute;
919 left: 0;
920 top: 0;
921 background: rgba(0, 0, 0, 0.1);
922 width: 100%;
923 bottom: 0;
924 content: '';
925 opacity: 0;
926 z-index: 10000;
927 animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
928}
929.ios .router-transition-backward .page-previous {
930 animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
931}
932.ios .router-transition-backward .page-previous:after {
933 position: absolute;
934 left: 0;
935 top: 0;
936 background: rgba(0, 0, 0, 0.1);
937 width: 100%;
938 bottom: 0;
939 content: '';
940 opacity: 0;
941 z-index: 10000;
942 animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
943}
944.ios .router-transition-backward .page-current {
945 animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
946}
947.ios .router-transition-backward .page-current:before {
948 position: absolute;
949 top: 0;
950 width: 16px;
951 bottom: 0;
952 z-index: -1;
953 content: '';
954 opacity: 0;
955 right: 100%;
956 background: linear-gradient(to right, 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%);
957 animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
958}
959@keyframes ios-page-next-to-current {
960 from {
961 transform: translate3d(100%, 0, 0);
962 }
963 to {
964 transform: translate3d(0%, 0, 0);
965 }
966}
967@keyframes ios-page-previous-to-current {
968 from {
969 transform: translate3d(-20%, 0, 0);
970 }
971 to {
972 transform: translate3d(0%, 0, 0);
973 }
974}
975@keyframes ios-page-current-to-previous {
976 from {
977 transform: translate3d(0, 0, 0);
978 }
979 to {
980 transform: translate3d(-20%, 0, 0);
981 }
982}
983@keyframes ios-page-current-to-next {
984 from {
985 transform: translate3d(0, 0, 0);
986 }
987 to {
988 transform: translate3d(100%, 0, 0);
989 }
990}
991@keyframes ios-page-element-fade-in {
992 from {
993 opacity: 0;
994 }
995 to {
996 opacity: 1;
997 }
998}
999@keyframes ios-page-element-fade-out {
1000 from {
1001 opacity: 1;
1002 }
1003 to {
1004 opacity: 0;
1005 }
1006}
1007.md .page-next {
1008 transform: translate3d(0, 56px, 0);
1009 opacity: 0;
1010 pointer-events: none;
1011}
1012.md .page-next.page-next-on-right {
1013 transform: translate3d(100%, 0, 0);
1014}
1015.md .router-transition-forward .page-next {
1016 animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
1017}
1018.md .router-transition-forward .page-current {
1019 animation: none;
1020}
1021.md .router-transition-backward .page-current {
1022 animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
1023}
1024.md .router-transition-backward .page-previous {
1025 animation: none;
1026}
1027@keyframes md-page-next-to-current {
1028 from {
1029 transform: translate3d(0, 56px, 0);
1030 opacity: 0;
1031 }
1032 to {
1033 transform: translate3d(0, 0px, 0);
1034 opacity: 1;
1035 }
1036}
1037@keyframes md-page-current-to-next {
1038 from {
1039 transform: translate3d(0, 0, 0);
1040 opacity: 1;
1041 }
1042 to {
1043 transform: translate3d(0, 56px, 0);
1044 opacity: 0;
1045 }
1046}
1047.aurora .page-next {
1048 pointer-events: none;
1049 transform: translate3d(100%, 0px, 0);
1050}
1051.aurora .page-next.page-next-on-right {
1052 transform: translate3d(100%, 0, 0);
1053}
1054.aurora .page-previous .page-opacity-effect {
1055 opacity: 1;
1056}
1057.aurora .page-previous:after {
1058 opacity: 1;
1059}
1060.aurora .router-transition-forward .page-next {
1061 animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
1062}
1063.aurora .router-transition-forward .page-current {
1064 animation: none;
1065}
1066.aurora .router-transition-forward .page-current:after {
1067 position: absolute;
1068 left: 0;
1069 top: 0;
1070 background: rgba(0, 0, 0, 0.1);
1071 width: 100%;
1072 bottom: 0;
1073 content: '';
1074 opacity: 0;
1075 z-index: 10000;
1076 animation: aurora-page-element-fade-in var(--f7-page-transition-duration) forwards;
1077}
1078.aurora .router-transition-backward .page-current {
1079 animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
1080}
1081.aurora .router-transition-backward .page-previous {
1082 animation: none;
1083}
1084.aurora .router-transition-backward .page-previous:after {
1085 position: absolute;
1086 left: 0;
1087 top: 0;
1088 background: rgba(0, 0, 0, 0.1);
1089 width: 100%;
1090 bottom: 0;
1091 content: '';
1092 opacity: 0;
1093 z-index: 10000;
1094 animation: aurora-page-element-fade-out var(--f7-page-transition-duration) forwards;
1095}
1096@keyframes aurora-page-next-to-current {
1097 from {
1098 transform: translate3d(100%, 0, 0);
1099 }
1100 to {
1101 transform: translate3d(0, 0px, 0);
1102 }
1103}
1104@keyframes aurora-page-current-to-next {
1105 from {
1106 transform: translate3d(0, 0, 0);
1107 }
1108 to {
1109 transform: translate3d(100%, 0, 0);
1110 }
1111}
1112@keyframes aurora-page-element-fade-in {
1113 from {
1114 opacity: 0;
1115 }
1116 to {
1117 opacity: 1;
1118 }
1119}
1120@keyframes aurora-page-element-fade-out {
1121 from {
1122 opacity: 1;
1123 }
1124 to {
1125 opacity: 0;
1126 }
1127}
1128.view:not(.view-master-detail) .page-master-stacked {
1129 display: none;
1130}
1131.view:not(.view-master-detail) .navbar-master-stacked {
1132 display: none;
1133}
1134.view-master-detail .page-master,
1135.view-master-detail .navbar-master {
1136 width: var(--f7-page-master-width);
1137 --f7-safe-area-right: 0px;
1138 --f7-safe-area-outer-right: 0px;
1139 border-right: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
1140}
1141.view-master-detail .page-master-detail,
1142.view-master-detail .navbar-master-detail {
1143 width: calc(100% - var(--f7-page-master-width));
1144 --f7-safe-area-left: 0px;
1145 --f7-safe-area-outer-left: 0px;
1146 left: var(--f7-page-master-width);
1147}
1148.view-master-detail .page-master-detail > .navbar-master-detail {
1149 left: 0;
1150 right: 0;
1151 width: 100%;
1152}
1153.view-master-detail .page-master {
1154 z-index: 2;
1155 transform: none;
1156 pointer-events: auto;
1157}
1158.view-master-detail .page-master:before,
1159.view-master-detail .page-master:after {
1160 display: none;
1161}
1162.view-master-detail.router-transition .page-master {
1163 animation: none;
1164}
1165.md .router-transition-custom .page-previous,
1166.ios .router-transition-custom .page-previous,
1167.aurora .router-transition-custom .page-previous,
1168.md .router-transition-custom .page-next,
1169.ios .router-transition-custom .page-next,
1170.aurora .router-transition-custom .page-next {
1171 opacity: 1;
1172 transform: none;
1173}
1174.md .router-transition-custom.view-master-detail .page-master,
1175.ios .router-transition-custom.view-master-detail .page-master,
1176.aurora .router-transition-custom.view-master-detail .page-master {
1177 animation: none;
1178}
1179.page-title {
1180 position: relative;
1181 z-index: 10;
1182 text-overflow: ellipsis;
1183 white-space: nowrap;
1184 color: var(--f7-page-title-text-color);
1185 letter-spacing: var(--f7-page-title-letter-spacing);
1186 font-size: var(--f7-page-title-font-size);
1187 font-weight: var(--f7-page-title-font-weight);
1188 line-height: var(--f7-page-title-line-height);
1189 padding-left: calc(var(--f7-page-title-padding-left) + var(--f7-safe-area-left));
1190 padding-right: calc(var(--f7-page-title-padding-right) + var(--f7-safe-area-right));
1191 padding-top: var(--f7-page-title-padding-vertical);
1192 padding-bottom: var(--f7-page-title-padding-vertical);
1193 box-sizing: border-box;
1194 overflow: hidden;
1195 width: 100%;
1196}
1197.router-transition-f7-circle-forward:after,
1198.router-transition-f7-circle-backward:after {
1199 content: '';
1200 position: absolute;
1201 left: 50%;
1202 top: 50%;
1203 width: 100vmax;
1204 height: 100vmax;
1205 margin-left: -50vmax;
1206 margin-top: -50vmax;
1207 background: var(--f7-page-bg-color);
1208 z-index: 100;
1209}
1210.router-transition-f7-circle-forward:after {
1211 transform: scale(0);
1212 border-radius: 50%;
1213 animation: f7-circle-circle-in 400ms forwards;
1214}
1215.router-transition-f7-circle-forward .page-next {
1216 opacity: 0 !important;
1217 transform: scale(0.9) !important;
1218 animation: f7-circle-next-to-current 300ms forwards;
1219 animation-delay: 300ms;
1220 z-index: 150;
1221}
1222.router-transition-f7-circle-backward:after {
1223 animation: f7-circle-circle-out 300ms forwards;
1224 animation-delay: 350ms;
1225}
1226.router-transition-f7-circle-backward .page-current {
1227 animation: f7-circle-current-to-next 700ms forwards;
1228 z-index: 150;
1229}
1230@keyframes f7-circle-circle-in {
1231 from {
1232 transform: scale(0);
1233 border-radius: 50%;
1234 }
1235 50% {
1236 border-radius: 50%;
1237 }
1238 to {
1239 transform: scale(1);
1240 border-radius: 0%;
1241 }
1242}
1243@keyframes f7-circle-circle-out {
1244 from {
1245 transform: scale(1);
1246 border-radius: 0%;
1247 }
1248 50% {
1249 border-radius: 50%;
1250 }
1251 to {
1252 transform: scale(0);
1253 border-radius: 50%;
1254 }
1255}
1256@keyframes f7-circle-next-to-current {
1257 from {
1258 transform: scale(0.9);
1259 opacity: 0;
1260 }
1261 40% {
1262 transform: scale(1.035);
1263 opacity: 1;
1264 }
1265 to {
1266 transform: scale(1);
1267 opacity: 1;
1268 }
1269}
1270@keyframes f7-circle-current-to-next {
1271 from {
1272 transform: scale(1);
1273 opacity: 1;
1274 }
1275 34% {
1276 transform: scale(1.035);
1277 opacity: 1;
1278 }
1279 57% {
1280 transform: scale(0.9);
1281 opacity: 0;
1282 }
1283 to {
1284 transform: scale(0.9);
1285 opacity: 0;
1286 }
1287}
1288.router-transition-f7-cover-v-forward,
1289.router-transition-f7-cover-v-backward {
1290 background: #000;
1291 perspective: 1200px;
1292}
1293.router-transition-f7-cover-v-forward .page-next {
1294 animation: f7-cover-v-next-to-current var(--f7-page-cover-transition-duration) forwards;
1295}
1296.router-transition-f7-cover-v-forward .page-current {
1297 animation: f7-cover-v-current-to-prev var(--f7-page-cover-transition-duration) forwards;
1298}
1299.router-transition-f7-cover-v-backward .page-current {
1300 animation: f7-cover-v-current-to-next var(--f7-page-cover-transition-duration) forwards;
1301}
1302.router-transition-f7-cover-v-backward .page-previous {
1303 animation: f7-cover-v-prev-to-current var(--f7-page-cover-transition-duration) forwards;
1304}
1305@keyframes f7-cover-v-next-to-current {
1306 from {
1307 transform: translateY(100%);
1308 }
1309 to {
1310 transform: translateY(0%);
1311 }
1312}
1313@keyframes f7-cover-v-current-to-next {
1314 from {
1315 transform: translateY(0%);
1316 }
1317 to {
1318 transform: translateY(100%);
1319 }
1320}
1321@keyframes f7-cover-v-current-to-prev {
1322 from {
1323 transform: translateZ(0);
1324 opacity: 1;
1325 }
1326 to {
1327 transform: translateZ(-300px);
1328 opacity: 0.5;
1329 }
1330}
1331@keyframes f7-cover-v-prev-to-current {
1332 from {
1333 transform: translateZ(-300px);
1334 opacity: 0.5;
1335 }
1336 to {
1337 transform: translateZ(0);
1338 opacity: 1;
1339 }
1340}
1341.router-transition-f7-cover-forward,
1342.router-transition-f7-cover-backward {
1343 background: #000;
1344 perspective: 1200px;
1345}
1346.router-transition-f7-cover-forward .page-next {
1347 animation: f7-cover-next-to-current var(--f7-page-cover-transition-duration) forwards;
1348}
1349.router-transition-f7-cover-forward .page-current {
1350 animation: f7-cover-current-to-prev var(--f7-page-cover-transition-duration) forwards;
1351}
1352.router-transition-f7-cover-backward .page-current {
1353 animation: f7-cover-current-to-next var(--f7-page-cover-transition-duration) forwards;
1354}
1355.router-transition-f7-cover-backward .page-previous {
1356 animation: f7-cover-prev-to-current var(--f7-page-cover-transition-duration) forwards;
1357}
1358@keyframes f7-cover-next-to-current {
1359 from {
1360 transform: translateX(100%);
1361 }
1362 to {
1363 transform: translateX(0%);
1364 }
1365}
1366@keyframes f7-cover-current-to-next {
1367 from {
1368 transform: translateX(0%);
1369 }
1370 to {
1371 transform: translateX(100%);
1372 }
1373}
1374@keyframes f7-cover-current-to-prev {
1375 from {
1376 transform: translateZ(0);
1377 opacity: 1;
1378 }
1379 to {
1380 transform: translateZ(-300px);
1381 opacity: 0.5;
1382 }
1383}
1384@keyframes f7-cover-prev-to-current {
1385 from {
1386 transform: translateZ(-300px);
1387 opacity: 0.5;
1388 }
1389 to {
1390 transform: translateZ(0);
1391 opacity: 1;
1392 }
1393}
1394.router-transition-f7-dive-forward,
1395.router-transition-f7-dive-backward {
1396 background: var(--f7-page-bg-color);
1397 perspective: 1200px;
1398}
1399.router-transition-f7-dive-forward .page-next {
1400 animation: f7-dive-next-to-current var(--f7-page-dive-transition-duration) forwards;
1401}
1402.router-transition-f7-dive-forward .page-current {
1403 animation: f7-dive-current-to-prev var(--f7-page-dive-transition-duration) forwards;
1404}
1405.router-transition-f7-dive-backward .page-current {
1406 animation: f7-dive-current-to-next var(--f7-page-dive-transition-duration) forwards;
1407}
1408.router-transition-f7-dive-backward .page-previous {
1409 animation: f7-dive-prev-to-current var(--f7-page-dive-transition-duration) forwards;
1410}
1411@keyframes f7-dive-next-to-current {
1412 from {
1413 opacity: 0;
1414 transform: translateZ(-150px);
1415 }
1416 50% {
1417 opacity: 0;
1418 }
1419 to {
1420 opacity: 1;
1421 transform: translateZ(0px);
1422 }
1423}
1424@keyframes f7-dive-current-to-next {
1425 from {
1426 opacity: 1;
1427 transform: translateZ(0px);
1428 }
1429 50% {
1430 opacity: 0;
1431 }
1432 to {
1433 opacity: 0;
1434 transform: translateZ(-150px);
1435 }
1436}
1437@keyframes f7-dive-current-to-prev {
1438 from {
1439 transform: translateZ(0px);
1440 opacity: 1;
1441 }
1442 50% {
1443 opacity: 0;
1444 }
1445 to {
1446 opacity: 0;
1447 transform: translateZ(150px);
1448 }
1449}
1450@keyframes f7-dive-prev-to-current {
1451 from {
1452 opacity: 0;
1453 transform: translateZ(150px);
1454 }
1455 50% {
1456 opacity: 0;
1457 }
1458 to {
1459 opacity: 1;
1460 transform: translateZ(0px);
1461 }
1462}
1463.router-transition-f7-fade-forward,
1464.router-transition-f7-fade-backward {
1465 background: var(--f7-page-bg-color);
1466}
1467.router-transition-f7-fade-forward .page-next {
1468 opacity: 0 !important;
1469 animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
1470}
1471.router-transition-f7-fade-forward .page-current {
1472 animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
1473}
1474.router-transition-f7-fade-backward .page-current {
1475 animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
1476}
1477.router-transition-f7-fade-backward .page-previous {
1478 animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
1479}
1480@keyframes f7-fade-in {
1481 from {
1482 opacity: 0;
1483 }
1484 50% {
1485 opacity: 0;
1486 }
1487 to {
1488 opacity: 1;
1489 }
1490}
1491@keyframes f7-fade-out {
1492 from {
1493 opacity: 1;
1494 }
1495 50% {
1496 opacity: 0;
1497 }
1498 to {
1499 opacity: 0;
1500 }
1501}
1502.router-transition-f7-flip-forward,
1503.router-transition-f7-flip-backward {
1504 background: #000;
1505 perspective: 1200px;
1506}
1507.router-transition-f7-flip-forward .page,
1508.router-transition-f7-flip-backward .page {
1509 -webkit-backface-visibility: hidden;
1510 backface-visibility: hidden;
1511}
1512.router-transition-f7-flip-forward .page-next {
1513 animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;
1514}
1515.router-transition-f7-flip-forward .page-current {
1516 animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;
1517}
1518.router-transition-f7-flip-backward .page-current {
1519 animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;
1520}
1521.router-transition-f7-flip-backward .page-previous {
1522 animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;
1523}
1524@keyframes f7-flip-next-to-current {
1525 from {
1526 border-radius: 30px;
1527 transform: translateZ(-100vmax) rotateY(180deg);
1528 }
1529 to {
1530 border-radius: 0;
1531 transform: translateZ(0px) rotateY(0deg);
1532 }
1533}
1534@keyframes f7-flip-current-to-next {
1535 from {
1536 border-radius: 0px;
1537 transform: translateZ(0px) rotateY(0deg);
1538 }
1539 to {
1540 border-radius: 30px;
1541 transform: translateZ(-100vmax) rotateY(180deg);
1542 }
1543}
1544@keyframes f7-flip-current-to-prev {
1545 from {
1546 border-radius: 0px;
1547 transform: translateZ(0px) rotateY(0deg);
1548 }
1549 to {
1550 border-radius: 30px;
1551 transform: translateZ(-100vmax) rotateY(-180deg);
1552 }
1553}
1554@keyframes f7-flip-prev-to-current {
1555 from {
1556 border-radius: 30px;
1557 transform: translateZ(-100vmax) rotateY(-180deg);
1558 }
1559 to {
1560 border-radius: 0px;
1561 transform: translateZ(0px) rotateY(0deg);
1562 }
1563}
1564.router-transition-f7-parallax-forward .page-next {
1565 animation: f7-parallax-next-to-current var(--f7-page-parallax-transition-duration) forwards;
1566}
1567.router-transition-f7-parallax-forward .page-current {
1568 animation: f7-parallax-current-to-prev var(--f7-page-parallax-transition-duration) forwards;
1569}
1570.router-transition-f7-parallax-backward .page-current {
1571 animation: f7-parallax-current-to-next var(--f7-page-parallax-transition-duration) forwards;
1572}
1573.router-transition-f7-parallax-backward .page-previous {
1574 animation: f7-parallax-prev-to-current var(--f7-page-parallax-transition-duration) forwards;
1575}
1576@keyframes f7-parallax-next-to-current {
1577 from {
1578 transform: translateX(100%);
1579 }
1580 to {
1581 transform: translateX(0%);
1582 }
1583}
1584@keyframes f7-parallax-current-to-next {
1585 from {
1586 transform: translateX(0%);
1587 }
1588 to {
1589 transform: translateX(100%);
1590 }
1591}
1592@keyframes f7-parallax-current-to-prev {
1593 from {
1594 transform: translateX(0%);
1595 }
1596 to {
1597 transform: translateX(-20%);
1598 }
1599}
1600@keyframes f7-parallax-prev-to-current {
1601 from {
1602 transform: translateX(-20%);
1603 }
1604 to {
1605 transform: translateX(0%);
1606 }
1607}
1608.router-transition-f7-push-forward .page-next {
1609 animation: f7-push-next-to-current var(--f7-page-push-transition-duration) forwards;
1610}
1611.router-transition-f7-push-forward .page-current {
1612 animation: f7-push-current-to-prev var(--f7-page-push-transition-duration) forwards;
1613}
1614.router-transition-f7-push-backward .page-current {
1615 animation: f7-push-current-to-next var(--f7-page-push-transition-duration) forwards;
1616}
1617.router-transition-f7-push-backward .page-previous {
1618 animation: f7-push-prev-to-current var(--f7-page-push-transition-duration) forwards;
1619}
1620@keyframes f7-push-next-to-current {
1621 from {
1622 transform: translateX(100%);
1623 }
1624 to {
1625 transform: translateX(0%);
1626 }
1627}
1628@keyframes f7-push-current-to-next {
1629 from {
1630 transform: translateX(0%);
1631 }
1632 to {
1633 transform: translateX(100%);
1634 }
1635}
1636@keyframes f7-push-current-to-prev {
1637 from {
1638 transform: translateX(0%);
1639 }
1640 to {
1641 transform: translateX(-100%);
1642 }
1643}
1644@keyframes f7-push-prev-to-current {
1645 from {
1646 transform: translateX(-100%);
1647 }
1648 to {
1649 transform: translateX(0%);
1650 }
1651}
1652/* === Link === */
1653:root {
1654 --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
1655 --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
1656 --f7-link-highlight-color: rgba(var(--f7-theme-color-rgb), 0.15);
1657}
1658.link,
1659.tab-link {
1660 display: inline-flex;
1661 align-items: center;
1662 align-content: center;
1663 justify-content: center;
1664 position: relative;
1665 box-sizing: border-box;
1666 z-index: 1;
1667 --f7-touch-ripple-color: var(--f7-link-touch-ripple-color, rgba(var(--f7-theme-color-rgb), 0.25));
1668}
1669.link i + span,
1670.link i + i,
1671.link span + i,
1672.link span + span {
1673 margin-left: 4px;
1674}
1675.ios .link {
1676 transition: opacity 300ms;
1677}
1678.ios .link.active-state {
1679 opacity: 0.3;
1680 transition-duration: 0ms;
1681}
1682.aurora .link {
1683 transition: opacity 300ms;
1684}
1685.aurora .link.active-state {
1686 opacity: 0.3;
1687 transition-duration: 0ms;
1688}
1689/* === Navbar === */
1690:root {
1691 /*
1692 --f7-navbar-bg-color: var(--f7-bars-bg-color);
1693 --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
1694 --f7-navbar-bg-image: var(--f7-bars-bg-image);
1695 --f7-navbar-border-color: var(--f7-bars-border-color);
1696 --f7-navbar-link-color: var(--f7-bars-link-color);
1697 --f7-navbar-text-color: var(--f7-bars-text-color);
1698 */
1699 --f7-navbar-hide-show-transition-duration: 400ms;
1700 --f7-navbar-title-line-height: 1.2;
1701 --f7-navbar-title-font-size: inherit;
1702 --f7-navbar-subtitle-text-align: inherit;
1703 --f7-navbar-large-title-line-height: 1.2;
1704 --f7-navbar-large-title-text-color: inherit;
1705 --f7-navbar-large-title-padding-left: 16px;
1706 --f7-navbar-large-title-padding-right: 16px;
1707}
1708.ios {
1709 --f7-navbar-height: 44px;
1710 --f7-navbar-tablet-height: 44px;
1711 --f7-navbar-font-size: 17px;
1712 --f7-navbar-inner-padding-left: 8px;
1713 --f7-navbar-inner-padding-right: 8px;
1714 --f7-navbar-title-font-weight: 600;
1715 --f7-navbar-title-margin-left: 0;
1716 --f7-navbar-title-margin-right: 0;
1717 --f7-navbar-title-text-align: center;
1718 --f7-navbar-subtitle-font-size: 10px;
1719 --f7-navbar-subtitle-line-height: 1;
1720 --f7-navbar-shadow-image: none;
1721 --f7-navbar-large-title-height: 52px;
1722 --f7-navbar-large-title-font-size: 34px;
1723 --f7-navbar-large-title-font-weight: 700;
1724 --f7-navbar-large-title-letter-spacing: -0.03em;
1725 --f7-navbar-large-title-padding-vertical: 6px;
1726 /*
1727 --f7-navbar-link-height: var(--f7-navbar-height);
1728 --f7-navbar-link-line-height: var(--f7-navbar-height);
1729 */
1730 --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
1731}
1732.ios .theme-dark,
1733.ios.theme-dark {
1734 --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
1735}
1736.md {
1737 --f7-navbar-height: 56px;
1738 --f7-navbar-tablet-height: 64px;
1739 --f7-navbar-font-size: 20px;
1740 --f7-navbar-inner-padding-left: 4px;
1741 --f7-navbar-inner-padding-right: 4px;
1742 --f7-navbar-title-font-weight: 500;
1743 --f7-navbar-title-margin-left: 20px;
1744 --f7-navbar-title-margin-right: 16px;
1745 --f7-navbar-title-text-align: left;
1746 --f7-navbar-subtitle-font-size: 14px;
1747 --f7-navbar-subtitle-line-height: 1.2;
1748 --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
1749 --f7-navbar-large-title-font-size: 34px;
1750 --f7-navbar-large-title-height: 56px;
1751 --f7-navbar-large-title-font-weight: 500;
1752 --f7-navbar-large-title-letter-spacing: 0;
1753 --f7-navbar-large-title-padding-vertical: 8px;
1754 --f7-navbar-link-height: 48px;
1755 --f7-navbar-link-line-height: 48px;
1756 --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
1757}
1758.md .theme-dark,
1759.md.theme-dark {
1760 --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
1761}
1762.aurora {
1763 --f7-navbar-height: 56px;
1764 --f7-navbar-tablet-height: 56px;
1765 --f7-navbar-font-size: 18px;
1766 --f7-navbar-inner-padding-left: 16px;
1767 --f7-navbar-inner-padding-right: 16px;
1768 --f7-navbar-title-font-weight: 600;
1769 --f7-navbar-title-margin-left: 0;
1770 --f7-navbar-title-margin-right: 0;
1771 --f7-navbar-title-text-align: center;
1772 --f7-navbar-subtitle-font-size: 14px;
1773 --f7-navbar-subtitle-line-height: 1;
1774 --f7-navbar-shadow-image: none;
1775 --f7-navbar-large-title-height: 48px;
1776 --f7-navbar-large-title-font-size: 28px;
1777 --f7-navbar-large-title-font-weight: bold;
1778 --f7-navbar-large-title-letter-spacing: 0;
1779 --f7-navbar-large-title-padding-vertical: 7px;
1780 --f7-navbar-link-height: auto;
1781 --f7-navbar-link-line-height: inherit;
1782 --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
1783}
1784.aurora .theme-dark,
1785.aurora.theme-dark {
1786 --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
1787}
1788.navbars,
1789.navbar {
1790 z-index: 500;
1791 left: 0;
1792 top: 0;
1793 width: 100%;
1794}
1795.navbars {
1796 position: absolute;
1797}
1798.navbars .navbar {
1799 z-index: auto;
1800}
1801.navbars .navbar-transitioning {
1802 z-index: 500;
1803}
1804.navbar {
1805 --f7-navbar-large-collapse-progress: 0;
1806 position: relative;
1807 -webkit-backface-visibility: hidden;
1808 backface-visibility: hidden;
1809 box-sizing: border-box;
1810 margin: 0;
1811 height: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
1812 color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
1813 font-size: var(--f7-navbar-font-size);
1814}
1815.navbar.stacked {
1816 display: none;
1817}
1818.navbar b {
1819 font-weight: 500;
1820}
1821.navbar a {
1822 color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
1823}
1824.navbar a.link {
1825 display: flex;
1826 justify-content: flex-start;
1827 line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
1828 height: var(--f7-navbar-link-height, var(--f7-navbar-height));
1829}
1830.navbar .title,
1831.navbar .left,
1832.navbar .right {
1833 position: relative;
1834 z-index: 10;
1835}
1836.navbar .title {
1837 position: relative;
1838 overflow: hidden;
1839 text-overflow: ellipsis;
1840 white-space: nowrap;
1841 flex-shrink: 10;
1842 font-weight: var(--f7-navbar-title-font-weight);
1843 display: inline-block;
1844 line-height: var(--f7-navbar-title-line-height);
1845 text-align: var(--f7-navbar-title-text-align);
1846 font-size: var(--f7-navbar-title-font-size);
1847 margin-left: var(--f7-navbar-title-margin-left);
1848 margin-right: var(--f7-navbar-title-margin-left);
1849}
1850.navbar .subtitle {
1851 display: block;
1852 color: var(--f7-navbar-subtitle-text-color);
1853 font-weight: normal;
1854 font-size: var(--f7-navbar-subtitle-font-size);
1855 line-height: var(--f7-navbar-subtitle-line-height);
1856 text-align: var(--f7-navbar-subtitle-text-align);
1857}
1858.navbar .left,
1859.navbar .right {
1860 flex-shrink: 0;
1861 display: flex;
1862 justify-content: flex-start;
1863 align-items: center;
1864}
1865.navbar .right:first-child {
1866 position: absolute;
1867 height: 100%;
1868}
1869.navbar.no-hairline .navbar-bg:after,
1870.navbar.no-border .navbar-bg:after,
1871.navbar .no-hairline .navbar-bg:after,
1872.navbar .no-border .navbar-bg:after {
1873 display: none !important;
1874}
1875.navbar.no-hairline .title-large:after,
1876.navbar.no-border .title-large:after,
1877.navbar .no-hairline .title-large:after,
1878.navbar .no-border .title-large:after {
1879 display: none !important;
1880}
1881.navbar.no-shadow .navbar-bg:before,
1882.navbar .no-shadow .navbar-bg:before {
1883 display: none !important;
1884}
1885.navbar.navbar-hidden .navbar-bg:before,
1886.navbar-hidden .navbar .navbar-bg:before {
1887 opacity: 0 !important;
1888}
1889.navbar-bg {
1890 position: absolute;
1891 left: 0;
1892 top: 0;
1893 width: 100%;
1894 height: 100%;
1895 pointer-events: none;
1896 z-index: 0;
1897 background: var(--f7-navbar-bg-color);
1898 background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1899 background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
1900 transition-property: transform;
1901}
1902@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
1903 .ios-translucent-bars .navbar-bg {
1904 background-color: rgba(var(--f7-navbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
1905 -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
1906 backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
1907 }
1908}
1909.navbar-bg:after,
1910.navbar-bg:before {
1911 -webkit-backface-visibility: hidden;
1912 backface-visibility: hidden;
1913}
1914.navbar-bg:after {
1915 content: '';
1916 position: absolute;
1917 background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1918 display: block;
1919 z-index: 15;
1920 top: auto;
1921 right: auto;
1922 bottom: 0;
1923 left: 0;
1924 height: 1px;
1925 width: 100%;
1926 transform-origin: 50% 100%;
1927 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1928}
1929.navbar-bg:before {
1930 content: '';
1931 position: absolute;
1932 right: 0;
1933 width: 100%;
1934 top: 100%;
1935 bottom: auto;
1936 height: 8px;
1937 pointer-events: none;
1938 background: var(--f7-navbar-shadow-image);
1939}
1940.navbar-bg:after {
1941 z-index: 1;
1942}
1943@media (min-width: 768px) and (min-height: 600px) {
1944 :root {
1945 --f7-navbar-height: var(--f7-navbar-tablet-height);
1946 }
1947}
1948.navbar-transitioning,
1949.navbar-transitioning .left,
1950.navbar-transitioning .title,
1951.navbar-transitioning .right,
1952.navbar-transitioning .title-large-text,
1953.navbar-transitioning .navbar-bg,
1954.navbar-transitioning .subnavbar,
1955.navbar-transitioning .navbar-bg:before {
1956 transition-duration: var(--f7-navbar-hide-show-transition-duration);
1957}
1958.navbar-page-transitioning {
1959 transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1960}
1961.navbar-page-transitioning .title-large-text,
1962.navbar-page-transitioning .navbar-bg {
1963 transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1964}
1965.navbar-hidden {
1966 transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
1967}
1968.navbar-hidden .navbar-inner {
1969 pointer-events: none;
1970}
1971.navbar-hidden .navbar-inner > .left,
1972.navbar-hidden .navbar-inner > .title,
1973.navbar-hidden .navbar-inner > .right {
1974 opacity: 0 !important;
1975}
1976.navbar-hidden .subnavbar {
1977 pointer-events: auto;
1978}
1979.navbar-hidden-statusbar {
1980 transform: translate3d(0, calc(-1 * var(--f7-navbar-height) - var(--f7-safe-area-top)), 0);
1981}
1982.navbar-large-hidden .navbar-large {
1983 --f7-navbar-large-collapse-progress: 1;
1984}
1985.navbar-inner {
1986 position: absolute;
1987 left: 0;
1988 bottom: 0;
1989 width: 100%;
1990 height: 100%;
1991 display: flex;
1992 align-items: center;
1993 box-sizing: border-box;
1994 padding: var(--f7-safe-area-top) 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));
1995 transform: translate3d(0, 0, 0);
1996 z-index: 10;
1997}
1998.views > .navbar,
1999.view > .navbar,
2000.page > .navbar,
2001.navbars > .navbar {
2002 position: absolute;
2003}
2004.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .navbar-bg,
2005.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .title {
2006 opacity: 0;
2007}
2008.navbar-large .navbar-bg {
2009 height: calc(100% + var(--f7-navbar-large-title-height));
2010 transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2011}
2012.navbar-large-transparent .navbar-bg,
2013.navbar-large.navbar-transparent .navbar-bg {
2014 opacity: var(--f7-navbar-large-collapse-progress);
2015 height: 100%;
2016 transform: none;
2017}
2018.ios .router-navbar-transition-to-large .navbar-bg,
2019.ios .router-navbar-transition-from-large .navbar-bg,
2020.navbar-bg.ios-swipeback-navbar-bg-large,
2021.navbar-large-transparent .navbar-bg.ios-swipeback-navbar-bg-large,
2022.navbar-large.navbar-transparent .navbar-bg.ios-swipeback-navbar-bg-large {
2023 height: calc(100% + var(--f7-navbar-large-title-height));
2024 transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2025}
2026.ios .navbar:not(.navbar-large) .navbar-bg {
2027 --f7-navbar-large-collapse-progress: 1;
2028}
2029.navbar-large .title {
2030 opacity: var(--f7-navbar-large-collapse-progress);
2031}
2032.navbar-large-collapsed {
2033 --f7-navbar-large-collapse-progress: 1;
2034}
2035.navbar-large-collapsed .title-large {
2036 pointer-events: none;
2037}
2038.navbar .title-large {
2039 box-sizing: border-box;
2040 position: absolute;
2041 left: 0;
2042 right: 0;
2043 top: 100%;
2044 display: flex;
2045 align-items: flex-end;
2046 white-space: nowrap;
2047 overflow: hidden;
2048 height: var(--f7-navbar-large-title-height);
2049 z-index: 5;
2050}
2051.navbar .title-large-text {
2052 text-overflow: ellipsis;
2053 white-space: nowrap;
2054 color: var(--f7-navbar-large-title-text-color);
2055 letter-spacing: var(--f7-navbar-large-title-letter-spacing);
2056 font-size: var(--f7-navbar-large-title-font-size);
2057 font-weight: var(--f7-navbar-large-title-font-weight);
2058 line-height: var(--f7-navbar-large-title-line-height);
2059 padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
2060 padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
2061 padding-top: var(--f7-navbar-large-title-padding-vertical);
2062 padding-bottom: var(--f7-navbar-large-title-padding-vertical);
2063 box-sizing: border-box;
2064 overflow: hidden;
2065 width: 100%;
2066 transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2067 transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
2068}
2069.navbar-no-title-large-transition .title-large-text {
2070 transition-duration: 0ms;
2071}
2072.navbar ~ *,
2073.navbars ~ * {
2074 --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
2075}
2076.navbar ~ * .page-with-navbar-large,
2077.navbar ~ .page-with-navbar-large,
2078.navbars ~ * .page-with-navbar-large,
2079.navbars ~ .page-with-navbar-large,
2080.page-with-navbar-large .navbar ~ * {
2081 --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
2082}
2083.page.no-navbar,
2084.page.no-navbar .navbar ~ * {
2085 --f7-page-navbar-offset: var(--f7-safe-area-top);
2086}
2087.ios {
2088 --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
2089 --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
2090 --f7-navbar-large-transparent-bg-center: translateX(0);
2091 --f7-navbar-large-bg-center-top: translateX(0) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2092 --f7-navbar-large-bg-center-bottom: translateX(0) translateY(0);
2093 --f7-navbar-large-transparent-bg-left: translateX(-100%);
2094 --f7-navbar-large-bg-left-top: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2095 --f7-navbar-large-bg-left-bottom: translateX(-100%) translateY(0);
2096 --f7-navbar-large-bg-right-top: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2097 --f7-navbar-large-bg-right-bottom: translateX(100%) translateY(0);
2098}
2099.ios .navbar a.icon-only {
2100 width: 44px;
2101 margin: 0;
2102 justify-content: center;
2103}
2104.ios .navbar .left a + a,
2105.ios .navbar .right a + a {
2106 margin-left: 16px;
2107}
2108.ios .navbar b {
2109 font-weight: 600;
2110}
2111.ios .navbar .left {
2112 margin-right: 10px;
2113}
2114.ios .navbar .right {
2115 margin-left: 10px;
2116}
2117.ios .navbar .right:first-child {
2118 right: calc(8px + var(--f7-safe-area-right));
2119}
2120.ios .navbar-inner {
2121 justify-content: space-between;
2122}
2123.ios .navbar-inner-left-title {
2124 justify-content: flex-start;
2125}
2126.ios .navbar-inner-left-title .right {
2127 margin-left: auto;
2128}
2129.ios .navbar-inner-left-title .title {
2130 text-align: left;
2131 margin-right: 10px;
2132}
2133.ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
2134.ios .view:not(.view-master-detail) .navbar-previous .left,
2135.ios .navbar-next .left,
2136.ios .view-master-detail .navbar-previous:not(.navbar-master) .title,
2137.ios .view:not(.view-master-detail) .navbar-previous .title,
2138.ios .navbar-next .title,
2139.ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
2140.ios .view:not(.view-master-detail) .navbar-previous .right,
2141.ios .navbar-next .right,
2142.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
2143.ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
2144.ios .navbar-next .subnavbar,
2145.ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
2146.ios .view:not(.view-master-detail) .navbar-previous .fading,
2147.ios .navbar-next .fading {
2148 opacity: 0;
2149}
2150.ios .view-master-detail .navbar-previous:not(.navbar-master),
2151.ios .view:not(.view-master-detail) .navbar-previous {
2152 pointer-events: none;
2153}
2154.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
2155.ios .view:not(.view-master-detail) .navbar-previous .title-large {
2156 opacity: 0;
2157 transition-duration: 0ms;
2158}
2159.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
2160.ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
2161 transform: scale(0.5);
2162 transition-duration: 0ms;
2163}
2164.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
2165.ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
2166.ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding .subnavbar,
2167.ios .view:not(.view-master-detail) .navbar-previous .sliding .subnavbar {
2168 opacity: 1;
2169 transform: translate3d(-100%, 0, 0);
2170}
2171.ios .view:not(.view-master-detail) .navbar-previous .navbar-bg,
2172.ios .view-master-detail .navbar-previous:not(.navbar-master) .navbar-bg {
2173 transform: translateX(-100%);
2174}
2175.ios .navbar-next {
2176 pointer-events: none;
2177}
2178.ios .navbar-next .navbar-bg {
2179 transform: translateX(100%);
2180}
2181.ios .navbar-next .title-large .title-large-text {
2182 transition-duration: 0ms;
2183 transform: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2184}
2185.ios .navbar-next .subnavbar.sliding,
2186.ios .navbar-next .sliding .subnavbar {
2187 opacity: 1;
2188 transform: translate3d(100%, 0, 0);
2189}
2190.ios .router-transition .navbar,
2191.ios .router-transition .navbar-bg {
2192 transition-duration: var(--f7-page-transition-duration);
2193}
2194.ios .router-transition .navbar-bg {
2195 animation-duration: var(--f7-page-transition-duration);
2196 animation-fill-mode: forwards;
2197}
2198.ios .router-transition .title-large,
2199.ios .router-transition .title-large-text {
2200 transition-duration: 0ms;
2201}
2202.ios .router-transition .navbar-current .left,
2203.ios .router-transition .navbar-current .title,
2204.ios .router-transition .navbar-current .right,
2205.ios .router-transition .navbar-current .subnavbar {
2206 animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
2207}
2208.ios .router-transition .navbar-current .sliding.left,
2209.ios .router-transition .navbar-current .sliding.left .icon + span,
2210.ios .router-transition .navbar-current .sliding.title,
2211.ios .router-transition .navbar-current .sliding.right,
2212.ios .router-transition .navbar-current .sliding .left,
2213.ios .router-transition .navbar-current .sliding .left .icon + span,
2214.ios .router-transition .navbar-current .sliding .title,
2215.ios .router-transition .navbar-current .sliding .right {
2216 transition-duration: var(--f7-page-transition-duration);
2217 opacity: 0 !important;
2218 animation: none;
2219}
2220.ios .router-transition .navbar-current .sliding .subnavbar,
2221.ios .router-transition .navbar-current .sliding.subnavbar {
2222 transition-duration: var(--f7-page-transition-duration);
2223 animation: none;
2224 opacity: 1;
2225}
2226.ios .router-transition-forward .navbar-next .left,
2227.ios .router-transition-backward .navbar-previous .left,
2228.ios .router-transition-forward .navbar-next .title,
2229.ios .router-transition-backward .navbar-previous .title,
2230.ios .router-transition-forward .navbar-next .right,
2231.ios .router-transition-backward .navbar-previous .right,
2232.ios .router-transition-forward .navbar-next .subnavbar,
2233.ios .router-transition-backward .navbar-previous .subnavbar {
2234 animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
2235}
2236.ios .router-transition-forward .navbar-next .sliding.left,
2237.ios .router-transition-backward .navbar-previous .sliding.left,
2238.ios .router-transition-forward .navbar-next .sliding.left .icon + span,
2239.ios .router-transition-backward .navbar-previous .sliding.left .icon + span,
2240.ios .router-transition-forward .navbar-next .sliding.title,
2241.ios .router-transition-backward .navbar-previous .sliding.title,
2242.ios .router-transition-forward .navbar-next .sliding.right,
2243.ios .router-transition-backward .navbar-previous .sliding.right,
2244.ios .router-transition-forward .navbar-next .sliding .left,
2245.ios .router-transition-backward .navbar-previous .sliding .left,
2246.ios .router-transition-forward .navbar-next .sliding .left .icon + span,
2247.ios .router-transition-backward .navbar-previous .sliding .left .icon + span,
2248.ios .router-transition-forward .navbar-next .sliding .title,
2249.ios .router-transition-backward .navbar-previous .sliding .title,
2250.ios .router-transition-forward .navbar-next .sliding .right,
2251.ios .router-transition-backward .navbar-previous .sliding .right,
2252.ios .router-transition-forward .navbar-next .sliding .subnavbar,
2253.ios .router-transition-backward .navbar-previous .sliding .subnavbar {
2254 transition-duration: var(--f7-page-transition-duration);
2255 animation: none;
2256 transform: translate3d(0, 0, 0) !important;
2257 opacity: 1 !important;
2258}
2259.ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title,
2260.ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title {
2261 animation: none;
2262}
2263.ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding.title,
2264.ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding.title,
2265.ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding .title,
2266.ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding .title {
2267 opacity: 0 !important;
2268}
2269.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .left,
2270.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .left,
2271.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .title,
2272.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .title,
2273.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .right,
2274.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .right,
2275.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .subnavbar,
2276.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .subnavbar {
2277 animation: none;
2278}
2279.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large,
2280.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
2281 overflow: visible;
2282}
2283.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
2284.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
2285 animation: ios-navbar-large-title-text-slide-up var(--f7-page-transition-duration) forwards, ios-navbar-large-title-text-fade-out var(--f7-page-transition-duration) forwards;
2286}
2287.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large .left .back span {
2288 animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
2289 transition: none;
2290 transform-origin: left center;
2291}
2292.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
2293 overflow: visible;
2294}
2295.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
2296 animation: ios-navbar-large-title-text-slide-left var(--f7-page-transition-duration) forwards;
2297}
2298.ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
2299 animation: ios-navbar-large-title-text-slide-left var(--f7-page-transition-duration) forwards;
2300}
2301.ios .router-transition-forward .navbar-next.navbar-large:not(.navbar-large-collapsed) .title,
2302.ios .router-transition-forward .navbar-current.navbar-large:not(.navbar-large-collapsed) .title {
2303 animation: none;
2304 opacity: 0 !important;
2305 transition-duration: 0;
2306}
2307.ios .router-transition-backward .navbar-current.router-navbar-transition-to-large .left .back span {
2308 animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards;
2309 transition: none;
2310 transform-origin: left center;
2311}
2312.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
2313 overflow: visible;
2314}
2315.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
2316 animation: ios-navbar-large-title-text-slide-right var(--f7-page-transition-duration) forwards;
2317}
2318.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
2319 animation: ios-navbar-large-title-text-slide-right var(--f7-page-transition-duration) forwards;
2320}
2321.ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
2322 opacity: 0;
2323}
2324.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large,
2325.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
2326 overflow: visible;
2327 opacity: 1;
2328}
2329.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
2330.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
2331 animation: ios-navbar-large-title-text-slide-down var(--f7-page-transition-duration) forwards, ios-navbar-large-title-text-fade-in var(--f7-page-transition-duration) forwards;
2332}
2333.ios .router-transition-backward .navbar-current.navbar-large:not(.navbar-large-collapsed) .title,
2334.ios .router-transition-backward .navbar-previous.navbar-large:not(.navbar-large-collapsed) .title {
2335 animation: none;
2336 opacity: 0 !important;
2337 transition-duration: 0;
2338}
2339.ios .router-transition-forward .navbar-current .navbar-bg {
2340 animation-name: ios-navbar-bg-from-cb-to-lb;
2341}
2342.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
2343 animation-name: ios-navbar-bg-from-cb-to-lb;
2344}
2345.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
2346 animation-name: ios-navbar-bg-from-cb-to-lt;
2347}
2348.ios .router-transition-forward .navbar-current:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
2349 animation-name: ios-navbar-bg-from-ct-to-lb;
2350}
2351.ios .router-transition-forward .navbar-current.navbar-large-collapsed:not(.router-navbar-transition-to-large) .navbar-bg {
2352 animation-name: ios-navbar-bg-from-ct-to-lt;
2353}
2354.ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large-transparent:not(.router-navbar-transition-to-large) .navbar-bg,
2355.ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent:not(.router-navbar-transition-to-large) .navbar-bg {
2356 animation-name: ios-navbar-transparent-bg-from-c-to-l;
2357}
2358.ios .router-transition-forward .navbar-next .navbar-bg {
2359 animation-name: ios-navbar-bg-from-rb-to-cb;
2360}
2361.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
2362 animation-name: ios-navbar-bg-from-rb-to-cb;
2363}
2364.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
2365 animation-name: ios-navbar-bg-from-rb-to-ct;
2366}
2367.ios .router-transition-forward .navbar-next:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
2368 animation-name: ios-navbar-bg-from-rt-to-cb;
2369}
2370.ios .router-transition-backward .navbar-current .navbar-bg {
2371 animation-name: ios-navbar-bg-from-cb-to-rb;
2372}
2373.ios .router-transition-backward .navbar-current:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
2374 animation-name: ios-navbar-bg-from-ct-to-rb;
2375}
2376.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
2377 animation-name: ios-navbar-bg-from-cb-to-rt;
2378}
2379.ios .router-transition-backward .navbar-current.navbar-large-collapsed .navbar-bg {
2380 animation-name: ios-navbar-bg-from-ct-to-rt;
2381}
2382.ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
2383.ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
2384 animation-name: ios-navbar-bg-from-cb-to-rb;
2385}
2386.ios .router-transition-backward .navbar-current.navbar-large-collapsed.router-navbar-transition-to-large .navbar-bg {
2387 animation-name: ios-navbar-bg-from-ct-to-rb;
2388}
2389.ios .router-transition-backward .navbar-previous .navbar-bg {
2390 animation-name: ios-navbar-bg-from-lb-to-cb;
2391}
2392.ios .router-transition-backward .navbar-previous:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
2393 animation-name: ios-navbar-bg-from-lt-to-cb;
2394}
2395.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
2396 animation-name: ios-navbar-bg-from-lb-to-ct;
2397}
2398.ios .router-transition-backward .navbar-previous.navbar-large-collapsed .navbar-bg {
2399 animation-name: ios-navbar-bg-from-lt-to-ct;
2400}
2401.ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
2402.ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
2403 animation-name: ios-navbar-transparent-bg-from-l-to-c;
2404}
2405.ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent.router-navbar-transition-from-large .navbar-bg,
2406.ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent.router-navbar-transition-from-large .navbar-bg {
2407 animation-name: ios-navbar-bg-from-lb-to-ct;
2408}
2409.view-master-detail .navbars {
2410 z-index: auto;
2411}
2412.view-master-detail .page-master {
2413 z-index: 525;
2414}
2415.view-master-detail .navbar-master .navbar-inner,
2416.view-master-detail .navbar-master .navbar-bg {
2417 z-index: 550;
2418}
2419.view-master-detail .navbar-master-detail .navbar-inner,
2420.view-master-detail .navbar-master-detail .navbar-bg {
2421 z-index: 500;
2422}
2423.view-master-detail .navbar-master.navbar-previous {
2424 pointer-events: auto;
2425}
2426.view-master-detail .navbar-master.navbar-previous .left,
2427.view-master-detail .navbar-master.navbar-previous:not(.navbar-large) .title,
2428.view-master-detail .navbar-master.navbar-previous .right,
2429.view-master-detail .navbar-master.navbar-previous .subnavbar {
2430 opacity: 1;
2431}
2432.view-master-detail.router-transition .navbar-master .left,
2433.view-master-detail.router-transition .navbar-master .left .icon + span,
2434.view-master-detail.router-transition .navbar-master:not(.navbar-large) .title,
2435.view-master-detail.router-transition .navbar-master .right,
2436.view-master-detail.router-transition .navbar-master .subnavbar,
2437.view-master-detail.router-transition .navbar-master .fading {
2438 opacity: 1 !important;
2439 transition-duration: 0ms;
2440 transform: none !important;
2441 animation: none !important;
2442}
2443.view-master-detail.router-transition .navbar-master .navbar-bg {
2444 transition-duration: 0ms;
2445 animation: none !important;
2446}
2447.view-master-detail.router-transition .navbar-master.navbar-large .title {
2448 opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
2449 transition-duration: 0ms;
2450 transform: none !important;
2451 animation: none !important;
2452}
2453.view-master-detail.router-transition .navbar-master.navbar-large .title-large,
2454.view-master-detail.router-transition .navbar-master.navbar-large .title-large-text {
2455 transition-duration: 0ms;
2456 animation: none !important;
2457}
2458.view-master-detail.router-transition .navbar-master.navbar-large-transparent .navbar-bg,
2459.view-master-detail.router-transition .navbar-master.navbar-large.navbar-transparent .navbar-bg {
2460 height: 100% !important;
2461 opacity: var(--f7-navbar-large-collapse-progress) !important;
2462}
2463@keyframes ios-navbar-element-fade-in {
2464 0% {
2465 opacity: 0;
2466 }
2467 25% {
2468 opacity: 0;
2469 }
2470 to {
2471 opacity: 1;
2472 }
2473}
2474@keyframes ios-navbar-element-fade-out {
2475 from {
2476 opacity: 1;
2477 }
2478 75% {
2479 opacity: 0;
2480 }
2481 to {
2482 opacity: 0;
2483 }
2484}
2485@keyframes ios-navbar-large-title-text-slide-up {
2486 0% {
2487 transform: translateX(0px) translateY(0%) scale(1);
2488 }
2489 100% {
2490 transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical))) scale(0.5);
2491 }
2492}
2493@keyframes ios-navbar-large-title-text-slide-down {
2494 0% {
2495 transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(0.5);
2496 }
2497 100% {
2498 transform: translateX(0px) translateY(0%) scale(1);
2499 }
2500}
2501@keyframes ios-navbar-large-title-text-slide-left {
2502 0% {
2503 transform: translateX(100%);
2504 }
2505 100% {
2506 transform: translateX(0%);
2507 }
2508}
2509@keyframes ios-navbar-large-title-text-slide-right {
2510 0% {
2511 transform: translateX(0%);
2512 }
2513 100% {
2514 transform: translateX(100%);
2515 }
2516}
2517@keyframes ios-navbar-large-title-text-fade-out {
2518 0% {
2519 opacity: 1;
2520 }
2521 80% {
2522 opacity: 0;
2523 }
2524 100% {
2525 opacity: 0;
2526 }
2527}
2528@keyframes ios-navbar-large-title-text-fade-in {
2529 0% {
2530 opacity: 0;
2531 }
2532 20% {
2533 opacity: 0;
2534 }
2535 100% {
2536 opacity: 1;
2537 }
2538}
2539@keyframes ios-navbar-back-text-current-to-previous {
2540 0% {
2541 opacity: 1;
2542 transform: translateY(0px) translateX(0px) scale(1);
2543 }
2544 80% {
2545 opacity: 0;
2546 }
2547 100% {
2548 opacity: 0;
2549 transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc(1 * var(--f7-navbar-large-title-height) - var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
2550 }
2551}
2552@keyframes ios-navbar-back-text-next-to-current {
2553 0% {
2554 opacity: 0;
2555 transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc(1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
2556 }
2557 20% {
2558 opacity: 0;
2559 }
2560 100% {
2561 opacity: 1;
2562 transform: translateX(0px) translateY(0px) scale(1);
2563 }
2564}
2565@keyframes ios-navbar-bg-from-cb-to-lb {
2566 from {
2567 transform: var(--f7-navbar-large-bg-center-bottom);
2568 }
2569 to {
2570 transform: var(--f7-navbar-large-bg-left-bottom);
2571 }
2572}
2573@keyframes ios-navbar-bg-from-cb-to-lt {
2574 from {
2575 transform: var(--f7-navbar-large-bg-center-bottom);
2576 }
2577 to {
2578 transform: var(--f7-navbar-large-bg-left-top);
2579 }
2580}
2581@keyframes ios-navbar-bg-from-ct-to-lb {
2582 from {
2583 transform: var(--f7-navbar-large-bg-center-top);
2584 }
2585 to {
2586 transform: var(--f7-navbar-large-bg-left-bottom);
2587 }
2588}
2589@keyframes ios-navbar-bg-from-ct-to-lt {
2590 from {
2591 transform: var(--f7-navbar-large-bg-center-top);
2592 }
2593 to {
2594 transform: var(--f7-navbar-large-bg-left-top);
2595 }
2596}
2597@keyframes ios-navbar-bg-from-rb-to-cb {
2598 from {
2599 transform: var(--f7-navbar-large-bg-right-bottom);
2600 }
2601 to {
2602 transform: var(--f7-navbar-large-bg-center-bottom);
2603 }
2604}
2605@keyframes ios-navbar-bg-from-rb-to-ct {
2606 from {
2607 transform: var(--f7-navbar-large-bg-right-bottom);
2608 }
2609 to {
2610 transform: var(--f7-navbar-large-bg-center-top);
2611 }
2612}
2613@keyframes ios-navbar-bg-from-rt-to-cb {
2614 from {
2615 transform: var(--f7-navbar-large-bg-right-top);
2616 }
2617 to {
2618 transform: var(--f7-navbar-large-bg-center-bottom);
2619 }
2620}
2621@keyframes ios-navbar-bg-from-cb-to-rb {
2622 from {
2623 transform: var(--f7-navbar-large-bg-center-bottom);
2624 }
2625 to {
2626 transform: var(--f7-navbar-large-bg-right-bottom);
2627 }
2628}
2629@keyframes ios-navbar-bg-from-ct-to-rb {
2630 from {
2631 transform: var(--f7-navbar-large-bg-center-top);
2632 }
2633 to {
2634 transform: var(--f7-navbar-large-bg-right-bottom);
2635 }
2636}
2637@keyframes ios-navbar-bg-from-cb-to-rt {
2638 from {
2639 transform: var(--f7-navbar-large-bg-center-bottom);
2640 }
2641 to {
2642 transform: var(--f7-navbar-large-bg-right-top);
2643 }
2644}
2645@keyframes ios-navbar-bg-from-ct-to-rt {
2646 from {
2647 transform: var(--f7-navbar-large-bg-center-top);
2648 }
2649 to {
2650 transform: var(--f7-navbar-large-bg-right-top);
2651 }
2652}
2653@keyframes ios-navbar-bg-from-lb-to-cb {
2654 from {
2655 transform: var(--f7-navbar-large-bg-left-bottom);
2656 }
2657 to {
2658 transform: var(--f7-navbar-large-bg-center-bottom);
2659 }
2660}
2661@keyframes ios-navbar-bg-from-lt-to-cb {
2662 from {
2663 transform: var(--f7-navbar-large-bg-left-top);
2664 }
2665 to {
2666 transform: var(--f7-navbar-large-bg-center-bottom);
2667 }
2668}
2669@keyframes ios-navbar-bg-from-lb-to-ct {
2670 from {
2671 transform: var(--f7-navbar-large-bg-left-bottom);
2672 }
2673 to {
2674 transform: var(--f7-navbar-large-bg-center-top);
2675 }
2676}
2677@keyframes ios-navbar-bg-from-lt-to-ct {
2678 from {
2679 transform: var(--f7-navbar-large-bg-left-top);
2680 }
2681 to {
2682 transform: var(--f7-navbar-large-bg-center-top);
2683 }
2684}
2685@keyframes ios-navbar-transparent-bg-from-l-to-c {
2686 from {
2687 transform: var(--f7-navbar-large-transparent-bg-left);
2688 }
2689 to {
2690 transform: var(--f7-navbar-large-transparent-bg-center);
2691 }
2692}
2693@keyframes ios-navbar-transparent-bg-from-c-to-l {
2694 from {
2695 transform: var(--f7-navbar-large-transparent-bg-center);
2696 }
2697 to {
2698 transform: var(--f7-navbar-large-transparent-bg-left);
2699 }
2700}
2701.md .navbar a.link {
2702 padding: 0 12px;
2703 min-width: 48px;
2704}
2705.md .navbar a.link:before {
2706 content: '';
2707 width: 152%;
2708 height: 152%;
2709 left: -26%;
2710 top: -26%;
2711 position: absolute;
2712 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2713 background-repeat: no-repeat;
2714 background-position: center;
2715 background-size: 100% 100%;
2716 opacity: 0;
2717 pointer-events: none;
2718 transition-duration: 300ms;
2719 transition-property: opacity;
2720}
2721.md .navbar a.link.icon-only:before,
2722.md .navbar a.link.ripple-inset:before,
2723.md .navbar a.link.searchbar-disable-button:before,
2724.md .navbar a.link.input-clear-button:before,
2725.md .navbar a.link.notification-close-button:before {
2726 width: 100%;
2727 height: 100%;
2728 left: 0;
2729 top: 0;
2730 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
2731}
2732.md .navbar a.link.active-state:before {
2733 opacity: 1;
2734 transition-duration: 150ms;
2735}
2736.md .navbar a.icon-only {
2737 min-width: 0;
2738 flex-shrink: 0;
2739 width: 48px;
2740}
2741.md .navbar .right {
2742 margin-left: auto;
2743}
2744.md .navbar .right:first-child {
2745 right: var(--f7-safe-area-right);
2746}
2747.md .navbar-inner {
2748 justify-content: flex-start;
2749 overflow: hidden;
2750}
2751.md .navbar-large:not(.navbar-large-collapsed) .navbar-inner {
2752 overflow: visible;
2753}
2754.md .page.page-with-subnavbar .navbar-inner {
2755 overflow: visible;
2756}
2757.md .navbar-inner-centered-title {
2758 justify-content: space-between;
2759}
2760.md .navbar-inner-centered-title .right {
2761 margin-left: 0;
2762}
2763.md .navbar-inner-centered-title .title {
2764 text-align: center;
2765}
2766.aurora .navbar a.icon-only {
2767 margin: 0;
2768 justify-content: center;
2769}
2770.aurora .navbar .left a + a,
2771.aurora .navbar .right a + a {
2772 margin-left: 10px;
2773}
2774.aurora .navbar b {
2775 font-weight: bold;
2776}
2777.aurora .navbar .left {
2778 margin-right: 16px;
2779}
2780.aurora .navbar .right {
2781 margin-left: 16px;
2782}
2783.aurora .navbar .right:first-child {
2784 right: calc(16px + var(--f7-safe-area-right));
2785}
2786.aurora .navbar-inner {
2787 justify-content: space-between;
2788}
2789.aurora .navbar-inner-left-title {
2790 justify-content: flex-start;
2791}
2792.aurora .navbar-inner-left-title .right {
2793 margin-left: auto;
2794}
2795.aurora .navbar-inner-left-title .title {
2796 text-align: left;
2797 margin-right: 16px;
2798}
2799/* === Toolbar === */
2800:root {
2801 /*
2802 --f7-toolbar-bg-color: var(--f7-bars-bg-color);
2803 --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
2804 --f7-toolbar-bg-image: var(--f7-bars-bg-image);
2805 --f7-toolbar-border-color: var(--f7-bars-border-color);
2806 --f7-toolbar-link-color: var(--f7-bars-link-color);
2807 --f7-toolbar-text-color: var(--f7-bars-text-color);
2808 --f7-tabbar-link-active-color: var(--f7-theme-color);
2809 */
2810 --f7-tabbar-link-active-bg-color: transparent;
2811 --f7-tabbar-label-text-transform: none;
2812 --f7-toolbar-hide-show-transition-duration: 400ms;
2813}
2814.ios {
2815 --f7-toolbar-height: 44px;
2816 --f7-toolbar-font-size: 17px;
2817 --f7-toolbar-inner-padding-left: 8px;
2818 --f7-toolbar-inner-padding-right: 8px;
2819 /*
2820 --f7-toolbar-link-height: var(--f7-toolbar-height);
2821 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2822 */
2823 --f7-tabbar-labels-height: 50px;
2824 --f7-tabbar-labels-tablet-height: 50px;
2825 --f7-toolbar-top-shadow-image: none;
2826 --f7-toolbar-bottom-shadow-image: none;
2827 --f7-tabbar-icon-size: 28px;
2828 --f7-tabbar-link-text-transform: none;
2829 --f7-tabbar-link-font-weight: 400;
2830 --f7-tabbar-link-letter-spacing: 0;
2831 --f7-tabbar-label-font-size: 12px;
2832 --f7-tabbar-label-tablet-font-size: 14px;
2833 --f7-tabbar-label-font-weight: 500;
2834 --f7-tabbar-label-letter-spacing: 0.01;
2835 --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
2836}
2837.ios .theme-dark,
2838.ios.theme-dark {
2839 --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2840}
2841.md {
2842 --f7-toolbar-height: 48px;
2843 --f7-toolbar-font-size: 14px;
2844 --f7-toolbar-inner-padding-left: 0px;
2845 --f7-toolbar-inner-padding-right: 0px;
2846 /*
2847 --f7-toolbar-link-height: var(--f7-toolbar-height);
2848 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2849 */
2850 --f7-tabbar-labels-height: 56px;
2851 --f7-tabbar-labels-tablet-height: 56px;
2852 /*
2853 --f7-tabbar-link-active-border-color: var(--f7-theme-color);
2854 */
2855 --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
2856 --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
2857 --f7-tabbar-icon-size: 24px;
2858 --f7-tabbar-link-text-transform: uppercase;
2859 --f7-tabbar-link-font-weight: 500;
2860 --f7-tabbar-link-letter-spacing: 0.05em;
2861 --f7-tabbar-label-font-size: 14px;
2862 --f7-tabbar-label-tablet-font-size: 14px;
2863 --f7-tabbar-label-font-weight: 400;
2864 --f7-tabbar-label-letter-spacing: 0;
2865 --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
2866}
2867.md .theme-dark,
2868.md.theme-dark {
2869 --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2870}
2871.aurora {
2872 --f7-toolbar-height: 38px;
2873 --f7-toolbar-font-size: 14px;
2874 --f7-toolbar-inner-padding-left: 16px;
2875 --f7-toolbar-inner-padding-right: 16px;
2876 --f7-toolbar-link-height: auto;
2877 --f7-toolbar-link-line-height: inherit;
2878 --f7-tabbar-labels-height: 44px;
2879 --f7-tabbar-labels-tablet-height: 44px;
2880 --f7-tabbar-link-inactive-bg-color: rgba(0, 0, 0, 0.2);
2881 --f7-toolbar-top-shadow-image: none;
2882 --f7-toolbar-bottom-shadow-image: none;
2883 --f7-tabbar-icon-size: 18px;
2884 --f7-tabbar-link-text-transform: none;
2885 --f7-tabbar-link-font-weight: 400;
2886 --f7-tabbar-link-letter-spacing: 0;
2887 --f7-tabbar-label-font-size: 12px;
2888 --f7-tabbar-label-tablet-font-size: 12px;
2889 --f7-tabbar-label-font-weight: 500;
2890 --f7-tabbar-label-letter-spacing: 0.01;
2891 --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
2892}
2893.aurora .theme-dark,
2894.aurora.theme-dark {
2895 --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
2896}
2897.toolbar {
2898 width: 100%;
2899 position: relative;
2900 margin: 0;
2901 transform: translate3d(0, 0, 0);
2902 -webkit-backface-visibility: hidden;
2903 backface-visibility: hidden;
2904 z-index: 600;
2905 box-sizing: border-box;
2906 left: 0;
2907 height: var(--f7-toolbar-height);
2908 background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
2909 background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
2910 color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
2911 font-size: var(--f7-toolbar-font-size);
2912}
2913@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
2914 .ios-translucent-bars .toolbar {
2915 background-color: rgba(var(--f7-toolbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
2916 -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
2917 backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
2918 }
2919}
2920.toolbar b {
2921 font-weight: 600;
2922}
2923.toolbar a {
2924 color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2925 box-sizing: border-box;
2926 flex-shrink: 1;
2927 position: relative;
2928 white-space: nowrap;
2929 text-overflow: ellipsis;
2930}
2931.toolbar .link {
2932 display: flex;
2933 line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
2934 height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
2935}
2936.toolbar i.icon {
2937 display: block;
2938}
2939.toolbar:after,
2940.toolbar:before {
2941 -webkit-backface-visibility: hidden;
2942 backface-visibility: hidden;
2943}
2944.views > .toolbar,
2945.view > .toolbar,
2946.page > .toolbar {
2947 position: absolute;
2948}
2949.toolbar-top,
2950.ios .toolbar-top-ios,
2951.md .toolbar-top-md,
2952.aurora .toolbar-top-aurora {
2953 top: 0;
2954}
2955.toolbar-top .tab-link-highlight,
2956.ios .toolbar-top-ios .tab-link-highlight,
2957.md .toolbar-top-md .tab-link-highlight,
2958.aurora .toolbar-top-aurora .tab-link-highlight {
2959 bottom: 0;
2960}
2961.toolbar-top.no-hairline:after,
2962.ios .toolbar-top-ios.no-hairline:after,
2963.md .toolbar-top-md.no-hairline:after,
2964.aurora .toolbar-top-aurora.no-hairline:after,
2965.toolbar-top.no-border:after,
2966.ios .toolbar-top-ios.no-border:after,
2967.md .toolbar-top-md.no-border:after,
2968.aurora .toolbar-top-aurora.no-border:after {
2969 display: none !important;
2970}
2971.toolbar-top.no-shadow:before,
2972.ios .toolbar-top-ios.no-shadow:before,
2973.md .toolbar-top-md.no-shadow:before,
2974.aurora .toolbar-top-aurora.no-shadow:before,
2975.toolbar-top.toolbar-hidden:before,
2976.ios .toolbar-top-ios.toolbar-hidden:before,
2977.md .toolbar-top-md.toolbar-hidden:before,
2978.aurora .toolbar-top-aurora.toolbar-hidden:before {
2979 display: none !important;
2980}
2981.toolbar-top:after,
2982.ios .toolbar-top-ios:after,
2983.md .toolbar-top-md:after,
2984.aurora .toolbar-top-aurora:after,
2985.toolbar-top:before,
2986.ios .toolbar-top-ios:before,
2987.md .toolbar-top-md:before,
2988.aurora .toolbar-top-aurora:before {
2989 -webkit-backface-visibility: hidden;
2990 backface-visibility: hidden;
2991}
2992.toolbar-top:after,
2993.ios .toolbar-top-ios:after,
2994.md .toolbar-top-md:after,
2995.aurora .toolbar-top-aurora:after {
2996 content: '';
2997 position: absolute;
2998 background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2999 display: block;
3000 z-index: 15;
3001 top: auto;
3002 right: auto;
3003 bottom: 0;
3004 left: 0;
3005 height: 1px;
3006 width: 100%;
3007 transform-origin: 50% 100%;
3008 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3009}
3010.toolbar-top:before,
3011.ios .toolbar-top-ios:before,
3012.md .toolbar-top-md:before,
3013.aurora .toolbar-top-aurora:before {
3014 content: '';
3015 position: absolute;
3016 right: 0;
3017 width: 100%;
3018 top: 100%;
3019 bottom: auto;
3020 height: 8px;
3021 pointer-events: none;
3022 background: var(--f7-toolbar-top-shadow-image);
3023}
3024.toolbar-bottom,
3025.ios .toolbar-bottom-ios,
3026.md .toolbar-bottom-md,
3027.aurora .toolbar-bottom-aurora {
3028 bottom: 0;
3029 height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
3030}
3031.toolbar-bottom .tab-link-highlight,
3032.ios .toolbar-bottom-ios .tab-link-highlight,
3033.md .toolbar-bottom-md .tab-link-highlight,
3034.aurora .toolbar-bottom-aurora .tab-link-highlight {
3035 top: 0;
3036}
3037.toolbar-bottom .toolbar-inner,
3038.ios .toolbar-bottom-ios .toolbar-inner,
3039.md .toolbar-bottom-md .toolbar-inner,
3040.aurora .toolbar-bottom-aurora .toolbar-inner {
3041 height: auto;
3042 top: 0;
3043 bottom: var(--f7-safe-area-bottom);
3044}
3045.toolbar-bottom.no-hairline:before,
3046.ios .toolbar-bottom-ios.no-hairline:before,
3047.md .toolbar-bottom-md.no-hairline:before,
3048.aurora .toolbar-bottom-aurora.no-hairline:before,
3049.toolbar-bottom.no-border:before,
3050.ios .toolbar-bottom-ios.no-border:before,
3051.md .toolbar-bottom-md.no-border:before,
3052.aurora .toolbar-bottom-aurora.no-border:before {
3053 display: none !important;
3054}
3055.toolbar-bottom.no-shadow:after,
3056.ios .toolbar-bottom-ios.no-shadow:after,
3057.md .toolbar-bottom-md.no-shadow:after,
3058.aurora .toolbar-bottom-aurora.no-shadow:after,
3059.toolbar-bottom.toolbar-hidden:after,
3060.ios .toolbar-bottom-ios.toolbar-hidden:after,
3061.md .toolbar-bottom-md.toolbar-hidden:after,
3062.aurora .toolbar-bottom-aurora.toolbar-hidden:after {
3063 display: none !important;
3064}
3065.toolbar-bottom:before,
3066.ios .toolbar-bottom-ios:before,
3067.md .toolbar-bottom-md:before,
3068.aurora .toolbar-bottom-aurora:before {
3069 content: '';
3070 position: absolute;
3071 background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
3072 display: block;
3073 z-index: 15;
3074 top: 0;
3075 right: auto;
3076 bottom: auto;
3077 left: 0;
3078 height: 1px;
3079 width: 100%;
3080 transform-origin: 50% 0%;
3081 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3082}
3083.toolbar-bottom:after,
3084.ios .toolbar-bottom-ios:after,
3085.md .toolbar-bottom-md:after,
3086.aurora .toolbar-bottom-aurora:after {
3087 content: '';
3088 position: absolute;
3089 right: 0;
3090 width: 100%;
3091 bottom: 100%;
3092 height: 8px;
3093 top: auto;
3094 pointer-events: none;
3095 background: var(--f7-toolbar-bottom-shadow-image);
3096 transform: translate3d(0, 0, 0);
3097}
3098.toolbar-inner {
3099 position: absolute;
3100 left: 0;
3101 top: 0;
3102 width: 100%;
3103 height: 100%;
3104 display: flex;
3105 justify-content: space-between;
3106 box-sizing: border-box;
3107 align-items: center;
3108 align-content: center;
3109 overflow: hidden;
3110 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));
3111}
3112.views > .tabbar,
3113.views > .tabbar-labels {
3114 z-index: 5001;
3115}
3116.tabbar a,
3117.tabbar-labels a {
3118 color: var(--f7-tabbar-link-inactive-color);
3119}
3120.tabbar .tab-link:not(.tab-link-active),
3121.tabbar-labels .tab-link:not(.tab-link-active) {
3122 background-color: var(--f7-tabbar-link-inactive-bg-color, transparent);
3123}
3124.tabbar .link,
3125.tabbar-labels .link {
3126 line-height: 1.4;
3127}
3128.tabbar .tab-link,
3129.tabbar-labels .tab-link,
3130.tabbar .link,
3131.tabbar-labels .link {
3132 height: 100%;
3133 width: 100%;
3134 box-sizing: border-box;
3135 display: flex;
3136 justify-content: center;
3137 align-items: center;
3138 flex-direction: column;
3139 text-transform: var(--f7-tabbar-link-text-transform);
3140 font-weight: var(--f7-tabbar-link-font-weight);
3141 letter-spacing: var(--f7-tabbar-link-letter-spacing);
3142 overflow: hidden;
3143}
3144.tabbar .tab-link-active,
3145.tabbar-labels .tab-link-active {
3146 color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
3147 background-color: var(--f7-tabbar-link-active-bg-color, transparent);
3148}
3149.tabbar i.icon,
3150.tabbar-labels i.icon {
3151 font-size: var(--f7-tabbar-icon-size);
3152 height: var(--f7-tabbar-icon-size);
3153 line-height: var(--f7-tabbar-icon-size);
3154}
3155.tabbar-labels {
3156 --f7-toolbar-height: var(--f7-tabbar-labels-height);
3157}
3158.tabbar-labels .tab-link,
3159.tabbar-labels .link {
3160 height: 100%;
3161 justify-content: space-between;
3162 align-items: center;
3163}
3164.tabbar-labels .tabbar-label {
3165 display: block;
3166 line-height: 1;
3167 margin: 0;
3168 position: relative;
3169 text-overflow: ellipsis;
3170 white-space: nowrap;
3171 font-size: var(--f7-tabbar-label-font-size);
3172 text-transform: var(--f7-tabbar-label-text-transform);
3173 font-weight: var(--f7-tabbar-label-font-weight);
3174 letter-spacing: var(--f7-tabbar-label-letter-spacing);
3175}
3176@media (min-width: 768px) and (min-height: 600px) {
3177 :root {
3178 --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
3179 --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
3180 }
3181}
3182.tabbar-scrollable .toolbar-inner {
3183 justify-content: flex-start;
3184 overflow: auto;
3185 -webkit-overflow-scrolling: touch;
3186}
3187.tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
3188 display: none !important;
3189 width: 0 !important;
3190 height: 0 !important;
3191 -webkit-appearance: none;
3192 opacity: 0 !important;
3193}
3194.tabbar-scrollable .tab-link,
3195.tabbar-scrollable .link {
3196 width: auto;
3197 flex-shrink: 0;
3198}
3199.toolbar-transitioning,
3200.navbar-transitioning + .toolbar,
3201.navbar-transitioning ~ * .toolbar {
3202 transition-duration: var(--f7-toolbar-hide-show-transition-duration);
3203}
3204.toolbar-bottom ~ *,
3205.ios .toolbar-bottom-ios ~ *,
3206.md .toolbar-bottom-md ~ *,
3207.aurora .toolbar-bottom-aurora ~ * {
3208 --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
3209}
3210.toolbar-bottom.tabbar-labels ~ *,
3211.ios .toolbar-bottom-ios.tabbar-labels ~ *,
3212.md .toolbar-bottom-md.tabbar-labels ~ *,
3213.aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
3214 --f7-page-toolbar-bottom-offset: var(--f7-tabbar-labels-height);
3215}
3216.toolbar-bottom.toolbar-hidden,
3217.ios .toolbar-bottom-ios.toolbar-hidden,
3218.md .toolbar-bottom-md.toolbar-hidden,
3219.aurora .toolbar-bottom-aurora.toolbar-hidden {
3220 transform: translate3d(0, 100%, 0);
3221}
3222.toolbar-top ~ *,
3223.ios .toolbar-top-ios ~ *,
3224.md .toolbar-top-md ~ *,
3225.aurora .toolbar-top-aurora ~ * {
3226 --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
3227}
3228.toolbar-top.tabbar-labels ~ *,
3229.ios .toolbar-top-ios.tabbar-labels ~ *,
3230.md .toolbar-top-md.tabbar-labels ~ *,
3231.aurora .toolbar-top-aurora.tabbar-labels ~ * {
3232 --f7-page-toolbar-top-offset: var(--f7-tabbar-labels-height);
3233}
3234.toolbar-top.toolbar-hidden,
3235.ios .toolbar-top-ios.toolbar-hidden,
3236.md .toolbar-top-md.toolbar-hidden,
3237.aurora .toolbar-top-aurora.toolbar-hidden {
3238 transform: translate3d(0, -100%, 0);
3239}
3240.navbar ~ .toolbar-top,
3241.navbars ~ .toolbar-top,
3242.ios .navbar ~ .toolbar-top-ios,
3243.ios .navbars ~ .toolbar-top-ios,
3244.md .navbar ~ .toolbar-top-md,
3245.aurora .navbar ~ .toolbar-top-aurora,
3246.navbar ~ * .toolbar-top,
3247.navbars ~ * .toolbar-top,
3248.ios .navbar ~ * .toolbar-top-ios,
3249.ios .navbars ~ * .toolbar-top-ios,
3250.md .navbar ~ * .toolbar-top-md,
3251.aurora .navbar ~ * .toolbar-top-aurora,
3252.navbar ~ .page:not(.no-navbar) .toolbar-top,
3253.navbars ~ .page:not(.no-navbar) .toolbar-top,
3254.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
3255.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios,
3256.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
3257.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
3258 top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
3259}
3260.navbar ~ .toolbar-top.toolbar-hidden,
3261.navbars ~ .toolbar-top.toolbar-hidden,
3262.ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
3263.ios .navbars ~ .toolbar-top-ios.toolbar-hidden,
3264.md .navbar ~ .toolbar-top-md.toolbar-hidden,
3265.aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden,
3266.navbar ~ * .toolbar-top.toolbar-hidden,
3267.navbars ~ * .toolbar-top.toolbar-hidden,
3268.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
3269.ios .navbars ~ * .toolbar-top-ios.toolbar-hidden,
3270.md .navbar ~ * .toolbar-top-md.toolbar-hidden,
3271.aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden,
3272.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
3273.navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
3274.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
3275.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
3276.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
3277.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
3278 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))), 0);
3279}
3280.navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
3281.navbars ~ .toolbar-top.toolbar-hidden.tabbar-labels,
3282.ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3283.ios .navbars ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3284.md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
3285.aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
3286.navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
3287.navbars ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
3288.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3289.ios .navbars ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3290.md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
3291.aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
3292.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
3293.navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
3294.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3295.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3296.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels,
3297.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
3298 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-safe-area-top))), 0);
3299}
3300.navbar-hidden + .toolbar-top:not(.toolbar-hidden),
3301.ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
3302.md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
3303.aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
3304.navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
3305.ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
3306.md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
3307.aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
3308 transform: translate3d(0, calc(0px - var(--f7-navbar-height)), 0);
3309}
3310.navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
3311.ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
3312.md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
3313.navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
3314.ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
3315.md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
3316.aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
3317 transform: translate3d(0, calc(0px - var(--f7-navbar-height) - var(--f7-navbar-large-title-height)), 0);
3318}
3319.ios .toolbar a.icon-only {
3320 min-height: var(--f7-toolbar-height);
3321 display: flex;
3322 justify-content: center;
3323 align-items: center;
3324 margin: 0;
3325 min-width: 44px;
3326}
3327.ios .tabbar-labels .tab-link,
3328.ios .tabbar-labels .link {
3329 padding-top: 4px;
3330 padding-bottom: 4px;
3331}
3332.ios .tabbar-labels .tab-link i + span,
3333.ios .tabbar-labels .link i + span {
3334 margin: 0;
3335}
3336@media (min-width: 768px) and (min-height: 600px) {
3337 .ios .tabbar .tab-link,
3338 .ios .tabbar-labels .tab-link,
3339 .ios .tabbar .link,
3340 .ios .tabbar-labels .link {
3341 justify-content: center;
3342 flex-direction: row;
3343 }
3344 .ios .tabbar .tab-link i + span,
3345 .ios .tabbar-labels .tab-link i + span,
3346 .ios .tabbar .link i + span,
3347 .ios .tabbar-labels .link i + span {
3348 margin-left: 5px;
3349 }
3350}
3351.ios .tabbar-scrollable .toolbar-inner {
3352 justify-content: flex-start;
3353}
3354.ios .tabbar-scrollable .tab-link,
3355.ios .tabbar-scrollable .link {
3356 padding: 0 8px;
3357}
3358.md .toolbar .link {
3359 justify-content: center;
3360 padding: 0 12px;
3361 min-width: 48px;
3362}
3363.md .toolbar .link:before {
3364 content: '';
3365 width: 152%;
3366 height: 152%;
3367 left: -26%;
3368 top: -26%;
3369 position: absolute;
3370 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
3371 background-repeat: no-repeat;
3372 background-position: center;
3373 background-size: 100% 100%;
3374 opacity: 0;
3375 pointer-events: none;
3376 transition-duration: 300ms;
3377 transition-property: opacity;
3378}
3379.md .toolbar .link.icon-only:before,
3380.md .toolbar .link.ripple-inset:before,
3381.md .toolbar .link.searchbar-disable-button:before,
3382.md .toolbar .link.input-clear-button:before,
3383.md .toolbar .link.notification-close-button:before {
3384 width: 100%;
3385 height: 100%;
3386 left: 0;
3387 top: 0;
3388 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
3389}
3390.md .toolbar .link.active-state:before {
3391 opacity: 1;
3392 transition-duration: 150ms;
3393}
3394.md .toolbar a.icon-only {
3395 min-width: 0;
3396 flex-shrink: 0;
3397}
3398.md .tabbar .tab-link,
3399.md .tabbar-labels .tab-link,
3400.md .tabbar .link,
3401.md .tabbar-labels .link {
3402 padding-left: 0;
3403 padding-right: 0;
3404}
3405.md .tabbar a.icon-only,
3406.md .tabbar-labels a.icon-only {
3407 flex-shrink: initial;
3408}
3409.md .tabbar .tab-link,
3410.md .tabbar-labels .tab-link {
3411 transition-duration: 300ms;
3412 overflow: hidden;
3413 position: relative;
3414}
3415.md .tabbar .tab-link-highlight,
3416.md .tabbar-labels .tab-link-highlight {
3417 position: absolute;
3418 height: 2px;
3419 background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
3420 transition-duration: 300ms;
3421 left: 0;
3422}
3423.md .tabbar-labels .tab-link,
3424.md .tabbar-labels .link {
3425 padding-top: 7px;
3426 padding-bottom: 7px;
3427}
3428.md .tabbar-label {
3429 max-width: 100%;
3430 overflow: hidden;
3431 line-height: 1.2;
3432}
3433.md .tabbar-scrollable .toolbar-inner {
3434 overflow: auto;
3435}
3436.md .tabbar-scrollable .tab-link,
3437.md .tabbar-scrollable .link {
3438 padding: 0 12px;
3439}
3440.aurora .toolbar a.icon-only {
3441 min-height: var(--f7-toolbar-height);
3442 display: flex;
3443 justify-content: center;
3444 align-items: center;
3445 margin: 0;
3446}
3447.aurora .tabbar .toolbar-inner,
3448.aurora .tabbar-labels .toolbar-inner {
3449 padding-left: 0;
3450 padding-right: 0;
3451}
3452.aurora .tabbar .tab-link,
3453.aurora .tabbar-labels .tab-link,
3454.aurora .tabbar .link,
3455.aurora .tabbar-labels .link {
3456 transition-duration: 200ms;
3457}
3458.aurora .tabbar-labels .tab-link,
3459.aurora .tabbar-labels .link {
3460 padding-top: 5px;
3461 padding-bottom: 5px;
3462}
3463.aurora .tabbar-labels .tab-link i + span,
3464.aurora .tabbar-labels .link i + span {
3465 margin: 0;
3466}
3467.aurora .tabbar-scrollable .toolbar-inner {
3468 justify-content: flex-start;
3469}
3470.aurora .tabbar-scrollable .tab-link,
3471.aurora .tabbar-scrollable .link {
3472 padding: 0 16px;
3473}
3474/* === Subnavbar === */
3475:root {
3476 /*
3477 --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
3478 --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
3479 --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
3480 --f7-subnavbar-border-color: var(--f7-bars-border-color);
3481 --f7-subnavbar-link-color: var(--f7-bars-link-color);
3482 --f7-subnavbar-text-color: var(--f7-bars-text-color);
3483 */
3484 --f7-subnavbar-title-line-height: 1.2;
3485}
3486.ios {
3487 --f7-subnavbar-height: 44px;
3488 --f7-subnavbar-inner-padding-left: 8px;
3489 --f7-subnavbar-inner-padding-right: 8px;
3490 --f7-subnavbar-title-font-size: 34px;
3491 --f7-subnavbar-title-font-weight: 700;
3492 --f7-subnavbar-title-letter-spacing: -0.03em;
3493 --f7-subnavbar-title-margin-left: 8px;
3494 --f7-subnavbar-shadow-image: none;
3495 /*
3496 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
3497 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
3498 */
3499}
3500.md {
3501 --f7-subnavbar-height: 48px;
3502 --f7-subnavbar-inner-padding-left: 16px;
3503 --f7-subnavbar-inner-padding-right: 16px;
3504 --f7-subnavbar-title-font-size: 20px;
3505 --f7-subnavbar-title-font-weight: 500;
3506 --f7-subnavbar-title-letter-spacing: 0;
3507 --f7-subnavbar-title-margin-left: 0px;
3508 --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
3509 /*
3510 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
3511 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
3512 */
3513}
3514.aurora {
3515 --f7-subnavbar-height: 48px;
3516 --f7-subnavbar-inner-padding-left: 16px;
3517 --f7-subnavbar-inner-padding-right: 16px;
3518 --f7-subnavbar-title-font-size: 28px;
3519 --f7-subnavbar-title-font-weight: bold;
3520 --f7-subnavbar-title-letter-spacing: 0em;
3521 --f7-subnavbar-title-margin-left: 0px;
3522 --f7-subnavbar-shadow-image: none;
3523 --f7-subnavbar-link-height: auto;
3524 --f7-subnavbar-link-line-height: inherit;
3525}
3526.subnavbar {
3527 width: 100%;
3528 position: absolute;
3529 left: 0;
3530 top: 0;
3531 z-index: 600;
3532 box-sizing: border-box;
3533 display: flex;
3534 justify-content: space-between;
3535 align-items: center;
3536 background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
3537 background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color));
3538 color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
3539}
3540@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
3541 .ios-translucent-bars .subnavbar {
3542 background-color: rgba(var(--f7-subnavbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
3543 -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
3544 backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
3545 }
3546}
3547.subnavbar .subnavbar-title {
3548 position: relative;
3549 overflow: hidden;
3550 text-overflow: ellpsis;
3551 white-space: nowrap;
3552 font-size: var(--f7-subnavbar-title-font-size);
3553 font-weight: var(--f7-subnavbar-title-font-weight);
3554 text-align: left;
3555 display: inline-block;
3556 line-height: var(--f7-subnavbar-title-line-height);
3557 letter-spacing: var(--f7-subnavbar-title-letter-spacing);
3558 margin-left: var(--f7-subnavbar-title-margin-left);
3559}
3560.subnavbar .left,
3561.subnavbar .right {
3562 flex-shrink: 0;
3563 display: flex;
3564 justify-content: flex-start;
3565 align-items: center;
3566}
3567.subnavbar .right:first-child {
3568 position: absolute;
3569 height: 100%;
3570}
3571.subnavbar a {
3572 color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
3573}
3574.subnavbar a.link {
3575 line-height: var(--f7-subnavbar-link-line-height, var(--f7-subnavbar-height));
3576 height: var(--f7-subnavbar-link-height, var(--f7-subnavbar-height));
3577}
3578.subnavbar a.icon-only {
3579 min-width: var(--f7-subnavbar-height);
3580}
3581.subnavbar.no-hairline:after,
3582.subnavbar.no-border:after {
3583 display: none !important;
3584}
3585.subnavbar.no-shadow:before,
3586.subnavbar.navbar-hidden:before {
3587 display: none !important;
3588}
3589.subnavbar:after,
3590.subnavbar:before {
3591 -webkit-backface-visibility: hidden;
3592 backface-visibility: hidden;
3593}
3594.subnavbar:after {
3595 content: '';
3596 position: absolute;
3597 background-color: var(--f7-subnavbar-border-color, var(--f7-bars-border-color));
3598 display: block;
3599 z-index: 15;
3600 top: auto;
3601 right: auto;
3602 bottom: 0;
3603 left: 0;
3604 height: 1px;
3605 width: 100%;
3606 transform-origin: 50% 100%;
3607 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3608}
3609.subnavbar:before {
3610 content: '';
3611 position: absolute;
3612 right: 0;
3613 width: 100%;
3614 top: 100%;
3615 bottom: auto;
3616 height: 8px;
3617 pointer-events: none;
3618 background: var(--f7-subnavbar-shadow-image);
3619}
3620.subnavbar-inner {
3621 width: 100%;
3622 height: 100%;
3623 display: flex;
3624 align-items: center;
3625 box-sizing: border-box;
3626 justify-content: space-between;
3627 overflow: hidden;
3628 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));
3629}
3630.subnavbar-inner.stacked {
3631 display: none;
3632}
3633.navbar .subnavbar {
3634 top: 100%;
3635}
3636.views > .subnavbar,
3637.view > .subnavbar,
3638.page > .subnavbar {
3639 position: absolute;
3640}
3641.navbar ~ * .subnavbar,
3642.navbars ~ * .subnavbar,
3643.page-with-subnavbar .navbar ~ .subnavbar,
3644.page-with-subnavbar .navbar ~ * .subnavbar,
3645.navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
3646.navbar ~ .subnavbar,
3647.navbars ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
3648.navbars ~ .subnavbar {
3649 top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
3650}
3651.navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
3652.navbars ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
3653.page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
3654.page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar,
3655.navbar .title-large ~ .subnavbar {
3656 top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
3657 transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
3658}
3659.page-with-subnavbar,
3660.subnavbar ~ * {
3661 --f7-page-subnavbar-offset: var(--f7-subnavbar-height);
3662}
3663.ios .subnavbar {
3664 height: calc(var(--f7-subnavbar-height) + 1px);
3665 margin-top: -1px;
3666 padding-top: 1px;
3667}
3668.ios .subnavbar .title {
3669 align-self: flex-start;
3670 flex-shrink: 10;
3671}
3672.ios .subnavbar .left a + a,
3673.ios .subnavbar .right a + a {
3674 margin-left: 16px;
3675}
3676.ios .subnavbar .left {
3677 margin-right: 10px;
3678}
3679.ios .subnavbar .right {
3680 margin-left: 10px;
3681}
3682.ios .subnavbar .right:first-child {
3683 right: 8px;
3684}
3685.ios .subnavbar a.link {
3686 justify-content: flex-start;
3687}
3688.ios .subnavbar a.icon-only {
3689 justify-content: center;
3690 margin: 0;
3691}
3692.md .subnavbar {
3693 height: var(--f7-subnavbar-height);
3694}
3695.md .subnavbar .right {
3696 margin-left: auto;
3697}
3698.md .subnavbar .right:first-child {
3699 right: 16px;
3700}
3701.md .subnavbar a.link {
3702 justify-content: center;
3703 padding: 0 12px;
3704}
3705.md .subnavbar a.link:before {
3706 content: '';
3707 width: 152%;
3708 height: 152%;
3709 left: -26%;
3710 top: -26%;
3711 position: absolute;
3712 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
3713 background-repeat: no-repeat;
3714 background-position: center;
3715 background-size: 100% 100%;
3716 opacity: 0;
3717 pointer-events: none;
3718 transition-duration: 300ms;
3719 transition-property: opacity;
3720}
3721.md .subnavbar a.link.icon-only:before,
3722.md .subnavbar a.link.ripple-inset:before,
3723.md .subnavbar a.link.searchbar-disable-button:before,
3724.md .subnavbar a.link.input-clear-button:before,
3725.md .subnavbar a.link.notification-close-button:before {
3726 width: 100%;
3727 height: 100%;
3728 left: 0;
3729 top: 0;
3730 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
3731}
3732.md .subnavbar a.link.active-state:before {
3733 opacity: 1;
3734 transition-duration: 150ms;
3735}
3736.md .subnavbar a.icon-only {
3737 flex-shrink: 0;
3738 padding: 0 12px;
3739}
3740.md .subnavbar-inner > a.link:first-child {
3741 margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
3742}
3743.md .subnavbar-inner > a.link:last-child {
3744 margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
3745}
3746.aurora .subnavbar {
3747 height: calc(var(--f7-subnavbar-height) + 1px);
3748 margin-top: -1px;
3749 padding-top: 1px;
3750}
3751.aurora .subnavbar .title {
3752 align-self: flex-start;
3753 flex-shrink: 10;
3754}
3755.aurora .subnavbar .left a + a,
3756.aurora .subnavbar .right a + a {
3757 margin-left: 10px;
3758}
3759.aurora .subnavbar .left {
3760 margin-right: 10px;
3761}
3762.aurora .subnavbar .right {
3763 margin-left: 10px;
3764}
3765.aurora .subnavbar .right:first-child {
3766 right: 16px;
3767}
3768.aurora .subnavbar a.link {
3769 justify-content: flex-start;
3770}
3771.aurora .subnavbar a.icon-only {
3772 justify-content: center;
3773 margin: 0;
3774}
3775/* === Content Block === */
3776:root {
3777 --f7-block-padding-horizontal: 16px;
3778 --f7-block-padding-vertical: 16px;
3779 --f7-block-font-size: inherit;
3780 --f7-block-text-color: inherit;
3781 --f7-block-header-margin: 10px;
3782 --f7-block-footer-margin: 10px;
3783 --f7-block-header-font-size: 14px;
3784 --f7-block-footer-font-size: 14px;
3785 --f7-block-title-text-transform: none;
3786 --f7-block-title-white-space: nowrap;
3787 --f7-block-title-medium-text-transform: none;
3788 --f7-block-title-large-text-transform: none;
3789 --f7-block-inset-side-margin: 16px;
3790 --f7-block-title-medium-text-color: #000;
3791 --f7-block-title-large-text-color: #000;
3792 --f7-block-strong-bg-color: #fff;
3793}
3794:root .theme-dark,
3795:root.theme-dark {
3796 --f7-block-title-text-color: #fff;
3797 --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
3798 --f7-block-title-medium-text-color: #fff;
3799 --f7-block-title-large-text-color: #fff;
3800 --f7-block-strong-bg-color: #1c1c1d;
3801}
3802.ios {
3803 --f7-block-margin-vertical: 35px;
3804 --f7-block-strong-border-color: rgba(0, 0, 0, 0.22);
3805 --f7-block-title-text-color: #000;
3806 --f7-block-title-font-size: 16px;
3807 --f7-block-title-font-weight: 600;
3808 --f7-block-title-line-height: 20px;
3809 --f7-block-title-margin-bottom: 10px;
3810 --f7-block-title-medium-font-size: 22px;
3811 --f7-block-title-medium-font-weight: bold;
3812 --f7-block-title-medium-line-height: 1.4;
3813 --f7-block-title-large-font-size: 30px;
3814 --f7-block-title-large-font-weight: bold;
3815 --f7-block-title-large-line-height: 1.3;
3816 --f7-block-inset-border-radius: 8px;
3817 --f7-block-strong-text-color: #000;
3818 --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
3819 --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
3820}
3821.ios .theme-dark,
3822.ios.theme-dark {
3823 --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
3824 --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
3825 --f7-block-strong-text-color: #fff;
3826}
3827.md {
3828 --f7-block-margin-vertical: 32px;
3829 --f7-block-strong-text-color: inherit;
3830 --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3831 --f7-block-title-font-size: inherit;
3832 --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
3833 --f7-block-title-font-weight: 500;
3834 --f7-block-title-line-height: 16px;
3835 --f7-block-title-margin-bottom: 16px;
3836 --f7-block-title-medium-font-size: 24px;
3837 --f7-block-title-medium-font-weight: 500;
3838 --f7-block-title-medium-line-height: 1.3;
3839 --f7-block-title-large-font-size: 34px;
3840 --f7-block-title-large-font-weight: 500;
3841 --f7-block-title-large-line-height: 1.2;
3842 --f7-block-inset-border-radius: 4px;
3843 --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
3844 --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
3845}
3846.md .theme-dark,
3847.md.theme-dark {
3848 --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
3849 --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
3850}
3851.aurora {
3852 --f7-block-margin-vertical: 32px;
3853 --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3854 --f7-block-title-font-size: 16px;
3855 --f7-block-title-text-color: #000;
3856 --f7-block-title-font-weight: 600;
3857 --f7-block-title-line-height: 1.5;
3858 --f7-block-title-margin-bottom: 10px;
3859 --f7-block-title-medium-font-size: 24px;
3860 --f7-block-title-medium-font-weight: bold;
3861 --f7-block-title-medium-line-height: 1.4;
3862 --f7-block-title-large-font-size: 28px;
3863 --f7-block-title-large-font-weight: bold;
3864 --f7-block-title-large-line-height: 1.3;
3865 --f7-block-inset-border-radius: 8px;
3866 --f7-block-strong-text-color: inherit;
3867 --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
3868 --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
3869}
3870.aurora .theme-dark,
3871.aurora.theme-dark {
3872 --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
3873 --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
3874 --f7-block-strong-text-color: #fff;
3875}
3876.block {
3877 box-sizing: border-box;
3878 position: relative;
3879 z-index: 1;
3880 color: var(--f7-block-text-color);
3881 margin: var(--f7-block-margin-vertical) 0;
3882 padding-top: 0;
3883 padding-bottom: 0;
3884 padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3885 padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3886 font-size: var(--f7-block-font-size);
3887}
3888.block.no-hairlines:before,
3889.block.no-hairlines ul:before,
3890.md .block.no-hairlines-md:before,
3891.md .block.no-hairlines-md ul:before,
3892.ios .block.no-hairlines-ios:before,
3893.ios .block.no-hairlines-ios ul:before,
3894.aurora .block.no-hairlines-aurora:before,
3895.aurora .block.no-hairlines-aurora ul:before,
3896.block.no-hairlines:after,
3897.block.no-hairlines ul:after,
3898.md .block.no-hairlines-md:after,
3899.md .block.no-hairlines-md ul:after,
3900.ios .block.no-hairlines-ios:after,
3901.ios .block.no-hairlines-ios ul:after,
3902.aurora .block.no-hairlines-aurora:after,
3903.aurora .block.no-hairlines-aurora ul:after {
3904 display: none !important;
3905}
3906.block.no-hairline-top:before,
3907.block.no-hairline-top ul:before,
3908.md .block.no-hairline-top-md:before,
3909.md .block.no-hairline-top-md ul:before,
3910.ios .block.no-hairline-top-ios:before,
3911.ios .block.no-hairline-top-ios ul:before,
3912.aurora .block.no-hairline-top-aurora:before,
3913.aurora .block.no-hairline-top-aurora ul:before {
3914 display: none !important;
3915}
3916.block.no-hairline-bottom:after,
3917.block.no-hairline-bottom ul:after,
3918.md .block.no-hairline-bottom-md:after,
3919.md .block.no-hairline-bottom-md ul:after,
3920.ios .block.no-hairline-bottom-ios:after,
3921.ios .block.no-hairline-bottom-ios ul:after,
3922.aurora .block.no-hairline-bottom-aurora:after,
3923.aurora .block.no-hairline-bottom-aurora ul:after {
3924 display: none !important;
3925}
3926.block > h1:first-child,
3927.block > h2:first-child,
3928.block > h3:first-child,
3929.block > h4:first-child,
3930.block > p:first-child {
3931 margin-top: 0;
3932}
3933.block > h1:last-child,
3934.block > h2:last-child,
3935.block > h3:last-child,
3936.block > h4:last-child,
3937.block > p:last-child {
3938 margin-bottom: 0;
3939}
3940.block-strong {
3941 color: var(--f7-block-strong-text-color);
3942 padding-top: var(--f7-block-padding-vertical);
3943 padding-bottom: var(--f7-block-padding-vertical);
3944 background-color: var(--f7-block-strong-bg-color);
3945}
3946.block-strong:before {
3947 content: '';
3948 position: absolute;
3949 background-color: var(--f7-block-strong-border-color);
3950 display: block;
3951 z-index: 15;
3952 top: 0;
3953 right: auto;
3954 bottom: auto;
3955 left: 0;
3956 height: 1px;
3957 width: 100%;
3958 transform-origin: 50% 0%;
3959 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3960}
3961.block-strong:after {
3962 content: '';
3963 position: absolute;
3964 background-color: var(--f7-block-strong-border-color);
3965 display: block;
3966 z-index: 15;
3967 top: auto;
3968 right: auto;
3969 bottom: 0;
3970 left: 0;
3971 height: 1px;
3972 width: 100%;
3973 transform-origin: 50% 100%;
3974 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3975}
3976.block-title {
3977 position: relative;
3978 overflow: hidden;
3979 margin: 0;
3980 white-space: var(--f7-block-title-white-space);
3981 text-overflow: ellipsis;
3982 text-transform: var(--f7-block-title-text-transform);
3983 color: var(--f7-block-title-text-color);
3984 font-size: var(--f7-block-title-font-size, inherit);
3985 font-weight: var(--f7-block-title-font-weight);
3986 line-height: var(--f7-block-title-line-height);
3987 margin-top: var(--f7-block-margin-vertical);
3988 margin-bottom: var(--f7-block-title-margin-bottom);
3989 margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3990 margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3991}
3992.block-title + .list,
3993.block-title + .block,
3994.block-title + .card,
3995.block-title + .timeline,
3996.block-title + .block-header {
3997 margin-top: 0px;
3998}
3999.block-title-medium {
4000 font-size: var(--f7-block-title-medium-font-size);
4001 text-transform: var(--f7-block-title-medium-text-transform);
4002 color: var(--f7-block-title-medium-text-color);
4003 font-weight: var(--f7-block-title-medium-font-weight);
4004 line-height: var(--f7-block-title-medium-line-height);
4005}
4006.block-title-large {
4007 font-size: var(--f7-block-title-large-font-size);
4008 text-transform: var(--f7-block-title-large-text-transform);
4009 color: var(--f7-block-title-large-text-color);
4010 font-weight: var(--f7-block-title-large-font-weight);
4011 line-height: var(--f7-block-title-large-line-height);
4012}
4013.block > .block-title:first-child,
4014.list > .block-title:first-child {
4015 margin-top: 0;
4016 margin-left: 0;
4017 margin-right: 0;
4018}
4019.block-header {
4020 color: var(--f7-block-header-text-color);
4021 font-size: var(--f7-block-header-font-size);
4022 margin-bottom: var(--f7-block-header-margin);
4023 margin-top: var(--f7-block-margin-vertical);
4024}
4025.block-header + .list,
4026.block-header + .block,
4027.block-header + .card,
4028.block-header + .timeline {
4029 margin-top: var(--f7-block-header-margin);
4030}
4031.block-footer {
4032 color: var(--f7-block-footer-text-color);
4033 font-size: var(--f7-block-footer-font-size);
4034 margin-top: var(--f7-block-footer-margin);
4035 margin-bottom: var(--f7-block-margin-vertical);
4036}
4037.block-footer,
4038.block-header {
4039 padding-top: 0;
4040 padding-bottom: 0;
4041 padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
4042 padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
4043}
4044.block-footer ul:first-child,
4045.block-header ul:first-child,
4046.block-footer p:first-child,
4047.block-header p:first-child,
4048.block-footer h1:first-child,
4049.block-header h1:first-child,
4050.block-footer h2:first-child,
4051.block-header h2:first-child,
4052.block-footer h3:first-child,
4053.block-header h3:first-child,
4054.block-footer h4:first-child,
4055.block-header h4:first-child {
4056 margin-top: 0;
4057}
4058.block-footer ul:last-child,
4059.block-header ul:last-child,
4060.block-footer p:last-child,
4061.block-header p:last-child,
4062.block-footer h1:last-child,
4063.block-header h1:last-child,
4064.block-footer h2:last-child,
4065.block-header h2:last-child,
4066.block-footer h3:last-child,
4067.block-header h3:last-child,
4068.block-footer h4:last-child,
4069.block-header h4:last-child {
4070 margin-bottom: 0;
4071}
4072.block-footer ul:first-child:last-child,
4073.block-header ul:first-child:last-child,
4074.block-footer p:first-child:last-child,
4075.block-header p:first-child:last-child,
4076.block-footer h1:first-child:last-child,
4077.block-header h1:first-child:last-child,
4078.block-footer h2:first-child:last-child,
4079.block-header h2:first-child:last-child,
4080.block-footer h3:first-child:last-child,
4081.block-header h3:first-child:last-child,
4082.block-footer h4:first-child:last-child,
4083.block-header h4:first-child:last-child {
4084 margin-top: 0;
4085 margin-bottom: 0;
4086}
4087.list .block-header,
4088.block .block-header,
4089.card .block-header,
4090.timeline .block-header {
4091 margin-top: 0;
4092}
4093.list .block-footer,
4094.block .block-footer,
4095.card .block-footer,
4096.timeline .block-footer {
4097 margin-bottom: 0;
4098}
4099.list + .block-footer,
4100.block + .block-footer,
4101.card + .block-footer,
4102.timeline + .block-footer {
4103 margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
4104}
4105.block + .block-footer {
4106 margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
4107 margin-bottom: var(--f7-block-margin-vertical);
4108}
4109.block .block-header,
4110.block .block-footer {
4111 padding: 0;
4112}
4113.block.inset {
4114 border-radius: var(--f7-block-inset-border-radius);
4115 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4116 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4117 --f7-safe-area-left: 0px;
4118 --f7-safe-area-right: 0px;
4119}
4120.block-strong.inset:before,
4121.block-strong.inset:after {
4122 display: none !important;
4123}
4124@media (min-width: 480px) {
4125 .block.xsmall-inset {
4126 border-radius: var(--f7-block-inset-border-radius);
4127 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4128 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4129 --f7-safe-area-left: 0px;
4130 --f7-safe-area-right: 0px;
4131 }
4132 .block-strong.xsmall-inset:before,
4133 .block-strong.xsmall-inset:after {
4134 display: none !important;
4135 }
4136}
4137@media (min-width: 568px) {
4138 .block.small-inset {
4139 border-radius: var(--f7-block-inset-border-radius);
4140 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4141 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4142 --f7-safe-area-left: 0px;
4143 --f7-safe-area-right: 0px;
4144 }
4145 .block-strong.small-inset:before,
4146 .block-strong.small-inset:after {
4147 display: none !important;
4148 }
4149}
4150@media (min-width: 768px) {
4151 .block.medium-inset {
4152 border-radius: var(--f7-block-inset-border-radius);
4153 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4154 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4155 --f7-safe-area-left: 0px;
4156 --f7-safe-area-right: 0px;
4157 }
4158 .block-strong.medium-inset:before,
4159 .block-strong.medium-inset:after {
4160 display: none !important;
4161 }
4162}
4163@media (min-width: 1024px) {
4164 .block.large-inset {
4165 border-radius: var(--f7-block-inset-border-radius);
4166 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4167 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4168 --f7-safe-area-left: 0px;
4169 --f7-safe-area-right: 0px;
4170 }
4171 .block-strong.large-inset:before,
4172 .block-strong.large-inset:after {
4173 display: none !important;
4174 }
4175}
4176@media (min-width: 1200px) {
4177 .block.xlarge-inset {
4178 border-radius: var(--f7-block-inset-border-radius);
4179 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4180 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4181 --f7-safe-area-left: 0px;
4182 --f7-safe-area-right: 0px;
4183 }
4184 .block-strong.xlarge-inset:before,
4185 .block-strong.xlarge-inset:after {
4186 display: none !important;
4187 }
4188}
4189/* === List View === */
4190:root {
4191 --f7-list-inset-side-margin: 16px;
4192 --f7-list-item-cell-margin: 16px;
4193 --f7-list-item-padding-horizontal: 16px;
4194 --f7-list-media-item-padding-horizontal: 16px;
4195 --f7-list-item-text-max-lines: 2;
4196 --f7-list-chevron-icon-font-size: 20px;
4197 --f7-list-item-title-font-size: inherit;
4198 --f7-list-item-title-font-weight: 400;
4199 --f7-list-item-title-text-color: inherit;
4200 --f7-list-item-title-line-height: inherit;
4201 --f7-list-item-title-white-space: nowrap;
4202 --f7-list-item-subtitle-font-weight: 400;
4203 --f7-list-item-subtitle-text-color: inherit;
4204 --f7-list-item-subtitle-line-height: inherit;
4205 --f7-list-item-text-font-weight: 400;
4206 --f7-list-item-after-font-weight: 400;
4207 --f7-list-item-header-text-color: inherit;
4208 --f7-list-item-header-font-size: 12px;
4209 --f7-list-item-header-font-weight: 400;
4210 --f7-list-item-header-line-height: 1.2;
4211 --f7-list-item-footer-font-size: 12px;
4212 --f7-list-item-footer-font-weight: 400;
4213 --f7-list-item-footer-line-height: 1.2;
4214 /*
4215 --f7-list-button-text-color: var(--f7-theme-color);
4216 --f7-list-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4217 */
4218 --f7-list-button-font-size: inherit;
4219 --f7-list-button-font-weight: 400;
4220 --f7-list-button-text-align: center;
4221 --f7-list-item-divider-line-height: inherit;
4222 --f7-list-group-title-line-height: inherit;
4223 --f7-menu-list-offset: 8px;
4224 --f7-menu-list-border-radius: 8px;
4225 --f7-menu-list-font-size: 14px;
4226 --f7-menu-list-item-title-font-size: 14px;
4227 --f7-menu-list-item-title-font-weight: 500;
4228 --f7-menu-list-item-subtitle-font-size: 14px;
4229 --f7-menu-list-item-text-font-size: 14px;
4230 --f7-menu-list-item-after-font-size: 14px;
4231 --f7-list-bg-color: #fff;
4232 --f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
4233 --f7-menu-list-selected-text-color: var(--f7-theme-color);
4234 --f7-menu-list-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
4235}
4236:root .theme-dark,
4237:root.theme-dark {
4238 --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
4239 --f7-list-bg-color: #1c1c1d;
4240 --f7-list-border-color: rgba(255, 255, 255, 0.15);
4241 --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
4242 --f7-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
4243 --f7-list-item-divider-bg-color: #232323;
4244 --f7-list-group-title-bg-color: #232323;
4245 --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
4246 --f7-menu-list-selected-text-color: inherit;
4247 --f7-menu-list-selected-bg-color: var(--f7-theme-color);
4248}
4249.ios {
4250 --f7-list-in-list-padding-left: 30px;
4251 --f7-list-inset-border-radius: 8px;
4252 --f7-list-margin-vertical: 35px;
4253 --f7-list-font-size: 17px;
4254 --f7-list-chevron-icon-area: 20px;
4255 --f7-list-border-color: rgba(0, 0, 0, 0.22);
4256 --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
4257 --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
4258 --f7-list-item-subtitle-font-size: 15px;
4259 --f7-list-item-text-font-size: 15px;
4260 --f7-list-item-text-line-height: 21px;
4261 --f7-list-item-after-font-size: inherit;
4262 --f7-list-item-after-line-height: inherit;
4263 --f7-list-item-after-padding: 5px;
4264 --f7-list-item-min-height: 44px;
4265 --f7-list-item-media-margin: 16px;
4266 --f7-list-item-media-icons-margin: 5px;
4267 --f7-list-item-padding-vertical: 8px;
4268 --f7-list-media-item-padding-vertical: 10px;
4269 --f7-list-media-item-title-font-weight: 600;
4270 --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
4271 --f7-list-item-divider-height: 31px;
4272 --f7-list-item-divider-font-size: inherit;
4273 --f7-list-item-divider-font-weight: 400;
4274 --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
4275 --f7-list-item-divider-border-color: rgba(0, 0, 0, 0.22);
4276 --f7-list-group-title-height: 31px;
4277 --f7-list-group-title-font-size: inherit;
4278 --f7-list-group-title-font-weight: 400;
4279 --f7-list-group-title-bg-color: #f7f7f7;
4280 --f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
4281 --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
4282 --f7-list-item-text-text-color: rgba(0, 0, 0, 0.45);
4283 --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
4284 --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
4285}
4286.ios .theme-dark,
4287.ios.theme-dark {
4288 --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
4289 --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
4290 --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
4291 --f7-list-item-text-text-color: rgba(255, 255, 255, 0.55);
4292 --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.55);
4293 --f7-list-group-title-text-color: rgba(255, 255, 255, 0.55);
4294 --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
4295}
4296.md {
4297 --f7-list-in-list-padding-left: 40px;
4298 --f7-list-inset-border-radius: 4px;
4299 --f7-list-margin-vertical: 32px;
4300 --f7-list-font-size: 16px;
4301 --f7-list-chevron-icon-area: 26px;
4302 --f7-list-border-color: rgba(0, 0, 0, 0.12);
4303 --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
4304 --f7-list-item-subtitle-font-size: 14px;
4305 --f7-list-item-text-font-size: 14px;
4306 --f7-list-item-text-line-height: 20px;
4307 --f7-list-item-after-font-size: 14px;
4308 --f7-list-item-after-line-height: inherit;
4309 --f7-list-item-after-padding: 8px;
4310 --f7-list-item-min-height: 48px;
4311 --f7-list-item-media-margin: 16px;
4312 --f7-list-item-media-icons-margin: 8px;
4313 --f7-list-item-padding-vertical: 8px;
4314 --f7-list-media-item-padding-vertical: 14px;
4315 /*
4316 --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
4317 */
4318 --f7-list-button-border-color: transparent;
4319 --f7-list-item-divider-height: 48px;
4320 --f7-list-item-divider-font-size: 14px;
4321 --f7-list-item-divider-font-weight: 400;
4322 --f7-list-item-divider-bg-color: #f4f4f4;
4323 --f7-list-item-divider-border-color: transparent;
4324 --f7-list-group-title-height: 48px;
4325 --f7-list-group-title-font-size: 14px;
4326 --f7-list-group-title-font-weight: 400;
4327 --f7-list-group-title-bg-color: #f4f4f4;
4328 --f7-menu-list-border-radius: 4px;
4329 --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
4330 --f7-list-item-text-text-color: rgba(0, 0, 0, 0.54);
4331 --f7-list-item-after-text-color: rgba(0, 0, 0, 0.54);
4332 --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
4333 --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
4334 --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
4335}
4336.md .theme-dark,
4337.md.theme-dark {
4338 --f7-list-item-divider-text-color: #fff;
4339 --f7-list-group-title-text-color: #fff;
4340 --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
4341 --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
4342 --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
4343 --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
4344}
4345.aurora {
4346 --f7-list-in-list-padding-left: 16px;
4347 --f7-list-inset-border-radius: 8px;
4348 --f7-list-margin-vertical: 32px;
4349 --f7-list-font-size: 16px;
4350 --f7-list-chevron-icon-area: 20px;
4351 --f7-list-border-color: rgba(0, 0, 0, 0.12);
4352 --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
4353 --f7-list-item-subtitle-font-size: 14px;
4354 --f7-list-item-text-font-size: 14px;
4355 --f7-list-item-text-line-height: 20px;
4356 --f7-list-item-after-font-size: 14px;
4357 --f7-list-item-after-line-height: inherit;
4358 --f7-list-item-after-padding: 8px;
4359 --f7-list-item-min-height: 48px;
4360 --f7-list-item-media-margin: 16px;
4361 --f7-list-item-media-icons-margin: 8px;
4362 --f7-list-item-padding-vertical: 8px;
4363 --f7-list-media-item-padding-vertical: 16px;
4364 --f7-list-media-item-title-font-weight: 600;
4365 --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
4366 --f7-list-button-font-weight: 500;
4367 --f7-list-item-divider-height: 32px;
4368 --f7-list-item-divider-font-size: 14px;
4369 --f7-list-item-divider-font-weight: 400;
4370 --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
4371 --f7-list-item-divider-border-color: transparent;
4372 --f7-list-group-title-height: 32px;
4373 --f7-list-group-title-font-size: 14px;
4374 --f7-list-group-title-font-weight: 500;
4375 --f7-list-group-title-bg-color: #f7f7f7;
4376 --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
4377 --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
4378 --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
4379 --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
4380 --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
4381 --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
4382 --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
4383 --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
4384}
4385.aurora .theme-dark,
4386.aurora.theme-dark {
4387 --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
4388 --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
4389 --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
4390 --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
4391 --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
4392 --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
4393 --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
4394 --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
4395}
4396:root {
4397 --f7-list-chevron-icon-left: 'chevron_left';
4398 --f7-list-chevron-icon-right: 'chevron_right';
4399}
4400.list {
4401 --menu-list-offset: 0px;
4402 position: relative;
4403 z-index: 1;
4404 font-size: var(--f7-list-font-size);
4405 margin: var(--f7-list-margin-vertical) 0;
4406}
4407.list ul {
4408 list-style: none;
4409 margin: 0;
4410 padding: 0;
4411 position: relative;
4412 background: var(--f7-list-bg-color);
4413}
4414.list ul:before {
4415 content: '';
4416 position: absolute;
4417 background-color: var(--f7-list-border-color);
4418 display: block;
4419 z-index: 15;
4420 top: 0;
4421 right: auto;
4422 bottom: auto;
4423 left: 0;
4424 height: 1px;
4425 width: 100%;
4426 transform-origin: 50% 0%;
4427 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4428}
4429.list ul:after {
4430 content: '';
4431 position: absolute;
4432 background-color: var(--f7-list-border-color);
4433 display: block;
4434 z-index: 15;
4435 top: auto;
4436 right: auto;
4437 bottom: 0;
4438 left: 0;
4439 height: 1px;
4440 width: 100%;
4441 transform-origin: 50% 100%;
4442 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4443}
4444.list ul ul {
4445 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left));
4446}
4447.list ul ul:before,
4448.list ul ul:after {
4449 display: none !important;
4450}
4451.list li {
4452 position: relative;
4453 box-sizing: border-box;
4454}
4455.list .item-media {
4456 display: flex;
4457 flex-shrink: 0;
4458 flex-wrap: nowrap;
4459 align-items: center;
4460 box-sizing: border-box;
4461 padding-bottom: var(--f7-list-item-padding-vertical);
4462 padding-top: var(--f7-list-item-padding-vertical);
4463}
4464.list .item-media + .item-inner {
4465 margin-left: var(--f7-list-item-media-margin);
4466}
4467.list .item-media i + i,
4468.list .item-media i + img {
4469 margin-left: var(--f7-list-item-media-icons-margin);
4470}
4471.list .item-after {
4472 padding-left: var(--f7-list-item-after-padding);
4473}
4474.list .item-inner {
4475 position: relative;
4476 width: 100%;
4477 min-width: 0;
4478 display: flex;
4479 justify-content: space-between;
4480 box-sizing: border-box;
4481 align-items: center;
4482 align-self: stretch;
4483 padding-top: var(--f7-list-item-padding-vertical);
4484 padding-bottom: var(--f7-list-item-padding-vertical);
4485 min-height: calc(var(--f7-list-item-min-height) - var(--menu-list-offset));
4486 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
4487}
4488.list .item-title {
4489 min-width: 0;
4490 flex-shrink: 1;
4491 white-space: var(--f7-list-item-title-white-space);
4492 position: relative;
4493 overflow: hidden;
4494 text-overflow: ellipsis;
4495 max-width: 100%;
4496 font-size: var(--f7-list-item-title-font-size);
4497 font-weight: var(--f7-list-item-title-font-weight);
4498 color: var(--f7-list-item-title-text-color);
4499 line-height: var(--f7-list-item-title-line-height);
4500}
4501.list .item-after {
4502 white-space: nowrap;
4503 flex-shrink: 0;
4504 display: flex;
4505 font-size: var(--f7-list-item-after-font-size);
4506 font-weight: var(--f7-list-item-after-font-weight);
4507 color: var(--f7-list-item-after-text-color);
4508 line-height: var(--f7-list-item-after-line-height);
4509 margin-left: auto;
4510}
4511.list .item-header,
4512.list .item-footer {
4513 white-space: normal;
4514}
4515.list .item-header {
4516 color: var(--f7-list-item-header-text-color);
4517 font-size: var(--f7-list-item-header-font-size);
4518 font-weight: var(--f7-list-item-header-font-weight);
4519 line-height: var(--f7-list-item-header-line-height);
4520}
4521.list .item-footer {
4522 color: var(--f7-list-item-footer-text-color);
4523 font-size: var(--f7-list-item-footer-font-size);
4524 font-weight: var(--f7-list-item-footer-font-weight);
4525 line-height: var(--f7-list-item-footer-line-height);
4526}
4527.list .item-link,
4528.list .list-button {
4529 transition-duration: 300ms;
4530 transition-property: background-color, color;
4531 display: block;
4532 position: relative;
4533 overflow: hidden;
4534 z-index: 0;
4535}
4536.list .item-link {
4537 color: inherit;
4538}
4539.list .item-link.active-state {
4540 background-color: var(--f7-list-link-pressed-bg-color);
4541}
4542.list .item-link .item-inner {
4543 padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
4544}
4545.list .item-content {
4546 display: flex;
4547 justify-content: space-between;
4548 box-sizing: border-box;
4549 align-items: center;
4550 min-height: calc(var(--f7-list-item-min-height) - var(--menu-list-offset));
4551 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
4552}
4553.list .item-subtitle {
4554 position: relative;
4555 overflow: hidden;
4556 white-space: nowrap;
4557 max-width: 100%;
4558 text-overflow: ellipsis;
4559 font-size: var(--f7-list-item-subtitle-font-size);
4560 font-weight: var(--f7-list-item-subtitle-font-weight);
4561 color: var(--f7-list-item-subtitle-text-color);
4562 line-height: var(--f7-list-item-subtitle-line-height);
4563}
4564.list .item-text {
4565 position: relative;
4566 overflow: hidden;
4567 text-overflow: ellipsis;
4568 /* autoprefixer: ignore next */
4569 -webkit-line-clamp: var(--f7-list-item-text-max-lines);
4570 /* autoprefixer: ignore next */
4571 -webkit-box-orient: vertical;
4572 display: -webkit-box;
4573 font-size: var(--f7-list-item-text-font-size);
4574 font-weight: var(--f7-list-item-text-font-weight);
4575 color: var(--f7-list-item-text-text-color);
4576 line-height: var(--f7-list-item-text-line-height);
4577 max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines));
4578}
4579.list .item-title-row {
4580 position: relative;
4581 display: flex;
4582 justify-content: space-between;
4583 box-sizing: border-box;
4584}
4585.list .item-title-row .item-after {
4586 align-self: center;
4587}
4588.list .item-row {
4589 display: flex;
4590 justify-content: space-between;
4591 box-sizing: border-box;
4592}
4593.list .item-cell {
4594 display: block;
4595 align-self: center;
4596 box-sizing: border-box;
4597 width: 100%;
4598 min-width: 0;
4599 margin-left: var(--f7-list-item-cell-margin);
4600 flex-shrink: 1;
4601}
4602.list .item-cell:first-child {
4603 margin-left: 0;
4604}
4605.list .ripple-wave + .item-cell {
4606 margin-left: 0;
4607}
4608.list li:last-child .list-button:after {
4609 display: none !important;
4610}
4611.list li:last-child > .item-inner:after,
4612.list li:last-child li:last-child > .item-inner:after,
4613.list li:last-child > .item-content > .item-inner:after,
4614.list li:last-child li:last-child > .item-content > .item-inner:after,
4615.list li:last-child > .swipeout-content > .item-content > .item-inner:after,
4616.list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after,
4617.list li:last-child > .item-link > .item-content > .item-inner:after,
4618.list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
4619 display: none !important;
4620}
4621.list li li:last-child .item-inner:after,
4622.list li:last-child li .item-inner:after {
4623 content: '';
4624 position: absolute;
4625 background-color: var(--f7-list-item-border-color);
4626 display: block;
4627 z-index: 15;
4628 top: auto;
4629 right: auto;
4630 bottom: 0;
4631 left: 0;
4632 height: 1px;
4633 width: 100%;
4634 transform-origin: 50% 100%;
4635 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4636}
4637.list.no-hairlines:before,
4638.list.no-hairlines ul:before,
4639.md .list.no-hairlines-md:before,
4640.md .list.no-hairlines-md ul:before,
4641.ios .list.no-hairlines-ios:before,
4642.ios .list.no-hairlines-ios ul:before,
4643.aurora .list.no-hairlines-aurora:before,
4644.aurora .list.no-hairlines-aurora ul:before,
4645.list.no-hairlines:after,
4646.list.no-hairlines ul:after,
4647.md .list.no-hairlines-md:after,
4648.md .list.no-hairlines-md ul:after,
4649.ios .list.no-hairlines-ios:after,
4650.ios .list.no-hairlines-ios ul:after,
4651.aurora .list.no-hairlines-aurora:after,
4652.aurora .list.no-hairlines-aurora ul:after {
4653 display: none !important;
4654}
4655.list.no-hairline-top:before,
4656.list.no-hairline-top ul:before,
4657.md .list.no-hairline-top-md:before,
4658.md .list.no-hairline-top-md ul:before,
4659.ios .list.no-hairline-top-ios:before,
4660.ios .list.no-hairline-top-ios ul:before,
4661.aurora .list.no-hairline-top-aurora:before,
4662.aurora .list.no-hairline-top-aurora ul:before {
4663 display: none !important;
4664}
4665.list.no-hairline-bottom:after,
4666.list.no-hairline-bottom ul:after,
4667.md .list.no-hairline-bottom-md:after,
4668.md .list.no-hairline-bottom-md ul:after,
4669.ios .list.no-hairline-bottom-ios:after,
4670.ios .list.no-hairline-bottom-ios ul:after,
4671.aurora .list.no-hairline-bottom-aurora:after,
4672.aurora .list.no-hairline-bottom-aurora ul:after {
4673 display: none !important;
4674}
4675.list.no-hairlines-between .item-inner:after,
4676.md .list.no-hairlines-between-md .item-inner:after,
4677.ios .list.no-hairlines-between-ios .item-inner:after,
4678.aurora .list.no-hairlines-between-aurora .item-inner:after,
4679.list.no-hairlines-between .list-button:after,
4680.md .list.no-hairlines-between-md .list-button:after,
4681.ios .list.no-hairlines-between-ios .list-button:after,
4682.aurora .list.no-hairlines-between-aurora .list-button:after,
4683.list.no-hairlines-between .item-divider:after,
4684.md .list.no-hairlines-between-md .item-divider:after,
4685.ios .list.no-hairlines-between-ios .item-divider:after,
4686.aurora .list.no-hairlines-between-aurora .item-divider:after,
4687.list.no-hairlines-between .list-group-title:after,
4688.md .list.no-hairlines-between-md .list-group-title:after,
4689.ios .list.no-hairlines-between-ios .list-group-title:after,
4690.aurora .list.no-hairlines-between-aurora .list-group-title:after,
4691.list.no-hairlines-between .list-group-title:after,
4692.md .list.no-hairlines-between-md .list-group-title:after,
4693.ios .list.no-hairlines-between-ios .list-group-title:after,
4694.aurora .list.no-hairlines-between-aurora .list-group-title:after {
4695 display: none !important;
4696}
4697.list.no-hairlines-between.simple-list li:after,
4698.md .list.no-hairlines-between-md.simple-list li:after,
4699.ios .list.no-hairlines-between-ios.simple-list li:after,
4700.aurora .list.no-hairlines-between-aurora.simple-list li:after {
4701 display: none !important;
4702}
4703.list.no-hairlines-between.links-list a:after,
4704.md .list.no-hairlines-between-md.links-list a:after,
4705.ios .list.no-hairlines-between-ios.links-list a:after,
4706.aurora .list.no-hairlines-between-aurora.links-list a:after {
4707 display: none !important;
4708}
4709.list-button {
4710 --f7-touch-ripple-color: var(--f7-link-touch-ripple-color, rgba(var(--f7-theme-color-rgb), 0.25));
4711 padding: 0 var(--f7-list-item-padding-horizontal);
4712 line-height: var(--f7-list-item-min-height);
4713 color: var(--f7-list-button-text-color, var(--f7-theme-color));
4714 font-size: var(--f7-list-button-font-size);
4715 font-weight: var(--f7-list-button-font-weight);
4716 text-align: var(--f7-list-button-text-align);
4717}
4718.list-button:after {
4719 content: '';
4720 position: absolute;
4721 background-color: var(--f7-list-button-border-color);
4722 display: block;
4723 z-index: 15;
4724 top: auto;
4725 right: auto;
4726 bottom: 0;
4727 left: 0;
4728 height: 1px;
4729 width: 100%;
4730 transform-origin: 50% 100%;
4731 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4732}
4733.list-button.active-state {
4734 background-color: var(--f7-list-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
4735}
4736.list-button[class*='color-'] {
4737 --f7-list-button-text-color: var(--f7-theme-color);
4738}
4739.simple-list li {
4740 position: relative;
4741 white-space: nowrap;
4742 text-overflow: ellipsis;
4743 max-width: 100%;
4744 box-sizing: border-box;
4745 display: flex;
4746 justify-content: space-between;
4747 align-items: center;
4748 align-content: center;
4749 line-height: var(--f7-list-item-min-height);
4750 height: var(--f7-list-item-min-height);
4751 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4752 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4753}
4754.simple-list li:after {
4755 left: var(--f7-list-item-padding-horizontal);
4756 width: auto;
4757 left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4758 right: 0;
4759}
4760.simple-list li:last-child:after {
4761 display: none !important;
4762}
4763.links-list li {
4764 z-index: 1;
4765}
4766.links-list a {
4767 transition-duration: 300ms;
4768 transition-property: background-color;
4769 display: block;
4770 position: relative;
4771 overflow: hidden;
4772 display: flex;
4773 align-items: center;
4774 align-content: center;
4775 justify-content: space-between;
4776 box-sizing: border-box;
4777 white-space: nowrap;
4778 text-overflow: ellipsis;
4779 max-width: 100%;
4780 height: var(--f7-list-item-min-height);
4781 color: inherit;
4782}
4783.links-list a .ripple-wave {
4784 z-index: 0;
4785}
4786.links-list a:after {
4787 width: auto;
4788}
4789.links-list a.active-state {
4790 background-color: var(--f7-list-link-pressed-bg-color);
4791}
4792.links-list a {
4793 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4794 padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4795}
4796.links-list a:after {
4797 left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4798 right: 0;
4799}
4800.links-list li:last-child a:after {
4801 display: none !important;
4802}
4803.simple-list li:after,
4804.links-list a:after,
4805.list .item-inner:after {
4806 content: '';
4807 position: absolute;
4808 background-color: var(--f7-list-item-border-color);
4809 display: block;
4810 z-index: 15;
4811 top: auto;
4812 right: auto;
4813 bottom: 0;
4814 left: 0;
4815 height: 1px;
4816 width: 100%;
4817 transform-origin: 50% 100%;
4818 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4819}
4820.media-list,
4821li.media-item {
4822 --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
4823 --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal);
4824}
4825.media-list .item-title,
4826li.media-item .item-title {
4827 font-weight: var(--f7-list-media-item-title-font-weight, var(--f7-list-item-title-font-weight, inherit));
4828}
4829.media-list .item-inner,
4830li.media-item .item-inner {
4831 display: block;
4832 align-self: stretch;
4833}
4834.media-list .item-media,
4835li.media-item .item-media {
4836 align-self: flex-start;
4837}
4838.media-list .item-media img,
4839li.media-item .item-media img {
4840 display: block;
4841}
4842.media-list .item-link .item-inner,
4843li.media-item .item-link .item-inner {
4844 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
4845}
4846.media-list .item-link .item-title-row,
4847li.media-item .item-link .item-title-row {
4848 padding-right: calc(var(--f7-list-chevron-icon-area));
4849}
4850.media-list.chevron-center .item-link .item-inner,
4851.media-list .chevron-center .item-link .item-inner,
4852.media-list .item-link.chevron-center .item-inner,
4853li.media-item.chevron-center .item-link .item-inner,
4854li.media-item .item-link.chevron-center .item-inner,
4855li.media-item .chevron-center .item-link .item-inner {
4856 padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
4857}
4858.media-list.chevron-center .item-title-row,
4859.media-list .chevron-center .item-title-row,
4860li.media-item.chevron-center .item-title-row,
4861li.media-item .chevron-center .item-title-row {
4862 padding-right: 0;
4863}
4864.list .item-link .item-inner:before,
4865.links-list a:before,
4866.media-list .item-link .item-title-row:before,
4867li.media-item .item-link .item-title-row:before,
4868.media-list.chevron-center .item-link .item-inner:before,
4869.media-list .chevron-center .item-link .item-inner:before,
4870.media-list .item-link.chevron-center .item-inner:before,
4871li.media-item.chevron-center .item-link .item-inner:before,
4872li.media-item .chevron-center .item-link .item-inner:before,
4873li.media-item .item-link.chevron-center .item-inner:before {
4874 font-family: 'framework7-core-icons';
4875 font-weight: normal;
4876 font-style: normal;
4877 line-height: 1;
4878 letter-spacing: normal;
4879 text-transform: none;
4880 white-space: nowrap;
4881 word-wrap: normal;
4882 direction: ltr;
4883 -webkit-font-smoothing: antialiased;
4884 text-rendering: optimizeLegibility;
4885 -moz-osx-font-smoothing: grayscale;
4886 font-feature-settings: 'liga';
4887 text-align: center;
4888 display: block;
4889 width: 100%;
4890 height: 100%;
4891 font-size: 20px;
4892 position: absolute;
4893 top: 50%;
4894 width: 8px;
4895 height: 14px;
4896 margin-top: -7px;
4897 font-size: var(--f7-list-chevron-icon-font-size);
4898 line-height: 14px;
4899 color: var(--f7-list-chevron-icon-color);
4900 pointer-events: none;
4901 right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4902 content: var(--f7-list-chevron-icon-right);
4903}
4904.media-list.chevron-center .item-title-row:before,
4905.media-list .chevron-center .item-title-row:before,
4906li.media-item.chevron-center .item-title-row:before,
4907li.media-item .chevron-center .item-title-row:before {
4908 display: none;
4909}
4910.media-list .item-link .item-inner:before,
4911li.media-item .item-link .item-inner:before {
4912 display: none;
4913}
4914.media-list .item-link .item-title-row:before,
4915li.media-item .item-link .item-title-row:before {
4916 right: 0;
4917}
4918.list-group ul:after,
4919.list-group ul:before {
4920 z-index: 25 !important;
4921}
4922.list-group + .list-group ul:before {
4923 display: none !important;
4924}
4925li.item-divider,
4926.item-divider,
4927li.list-group-title {
4928 white-space: nowrap;
4929 position: relative;
4930 max-width: 100%;
4931 text-overflow: ellipsis;
4932 overflow: hidden;
4933 z-index: 15;
4934 padding-top: 0;
4935 padding-bottom: 0;
4936 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4937 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4938 box-sizing: border-box;
4939 display: flex;
4940 align-items: center;
4941 align-content: center;
4942}
4943li.item-divider:after,
4944.item-divider:after,
4945li.list-group-title:after {
4946 display: none !important;
4947}
4948li.item-divider,
4949.item-divider {
4950 margin-top: -1px;
4951 height: var(--f7-list-item-divider-height);
4952 color: var(--f7-list-item-divider-text-color);
4953 font-size: var(--f7-list-item-divider-font-size);
4954 font-weight: var(--f7-list-item-divider-font-weight);
4955 background-color: var(--f7-list-item-divider-bg-color);
4956 line-height: var(--f7-list-item-divider-line-height);
4957}
4958li.item-divider:before,
4959.item-divider:before {
4960 content: '';
4961 position: absolute;
4962 background-color: var(--f7-list-item-divider-border-color);
4963 display: block;
4964 z-index: 15;
4965 top: 0;
4966 right: auto;
4967 bottom: auto;
4968 left: 0;
4969 height: 1px;
4970 width: 100%;
4971 transform-origin: 50% 0%;
4972 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4973}
4974li.list-group-title,
4975.list li.list-group-title {
4976 position: relative;
4977 position: -webkit-sticky;
4978 position: sticky;
4979 top: 0;
4980 margin-top: 0;
4981 z-index: 20;
4982 height: var(--f7-list-group-title-height);
4983 color: var(--f7-list-group-title-text-color);
4984 font-size: var(--f7-list-group-title-font-size);
4985 font-weight: var(--f7-list-group-title-font-weight);
4986 background-color: var(--f7-list-group-title-bg-color);
4987 line-height: var(--f7-list-group-title-line-height);
4988}
4989.page-with-navbar-large li.list-group-title,
4990.page-with-navbar-large .list li.list-group-title {
4991 top: calc(-1 * var(--f7-navbar-large-title-height));
4992}
4993.list.inset {
4994 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
4995 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
4996 border-radius: var(--f7-list-inset-border-radius);
4997 --f7-safe-area-left: 0px;
4998 --f7-safe-area-right: 0px;
4999}
5000.list.inset .block-title {
5001 margin-left: 0;
5002 margin-right: 0;
5003}
5004.list.inset ul {
5005 border-radius: var(--f7-list-inset-border-radius);
5006}
5007.list.inset ul:before,
5008.list.inset ul:after {
5009 display: none !important;
5010}
5011.list.inset li.swipeout:first-child,
5012.list.inset li:first-child > a {
5013 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5014}
5015.list.inset li.swipeout:last-child,
5016.list.inset li:last-child > a {
5017 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5018}
5019.list.inset li.swipeout:first-child:last-child,
5020.list.inset li:first-child:last-child > a {
5021 border-radius: var(--f7-list-inset-border-radius);
5022}
5023@media (min-width: 480px) {
5024 .list.xsmall-inset {
5025 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5026 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5027 border-radius: var(--f7-list-inset-border-radius);
5028 --f7-safe-area-left: 0px;
5029 --f7-safe-area-right: 0px;
5030 }
5031 .list.xsmall-inset .block-title {
5032 margin-left: 0;
5033 margin-right: 0;
5034 }
5035 .list.xsmall-inset ul {
5036 border-radius: var(--f7-list-inset-border-radius);
5037 }
5038 .list.xsmall-inset ul:before,
5039 .list.xsmall-inset ul:after {
5040 display: none !important;
5041 }
5042 .list.xsmall-inset li:first-child > a {
5043 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5044 }
5045 .list.xsmall-inset li:last-child > a {
5046 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5047 }
5048 .list.xsmall-inset li:first-child:last-child > a {
5049 border-radius: var(--f7-list-inset-border-radius);
5050 }
5051}
5052@media (min-width: 568px) {
5053 .list.small-inset {
5054 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5055 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5056 border-radius: var(--f7-list-inset-border-radius);
5057 --f7-safe-area-left: 0px;
5058 --f7-safe-area-right: 0px;
5059 }
5060 .list.small-inset .block-title {
5061 margin-left: 0;
5062 margin-right: 0;
5063 }
5064 .list.small-inset ul {
5065 border-radius: var(--f7-list-inset-border-radius);
5066 }
5067 .list.small-inset ul:before,
5068 .list.small-inset ul:after {
5069 display: none !important;
5070 }
5071 .list.small-inset li:first-child > a {
5072 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5073 }
5074 .list.small-inset li:last-child > a {
5075 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5076 }
5077 .list.small-inset li:first-child:last-child > a {
5078 border-radius: var(--f7-list-inset-border-radius);
5079 }
5080}
5081@media (min-width: 768px) {
5082 .list.medium-inset {
5083 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5084 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5085 border-radius: var(--f7-list-inset-border-radius);
5086 --f7-safe-area-left: 0px;
5087 --f7-safe-area-right: 0px;
5088 }
5089 .list.medium-inset .block-title {
5090 margin-left: 0;
5091 margin-right: 0;
5092 }
5093 .list.medium-inset ul {
5094 border-radius: var(--f7-list-inset-border-radius);
5095 }
5096 .list.medium-inset ul:before,
5097 .list.medium-inset ul:after {
5098 display: none !important;
5099 }
5100 .list.medium-inset li:first-child > a {
5101 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5102 }
5103 .list.medium-inset li:last-child > a {
5104 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5105 }
5106 .list.medium-inset li:first-child:last-child > a {
5107 border-radius: var(--f7-list-inset-border-radius);
5108 }
5109}
5110@media (min-width: 1024px) {
5111 .list.large-inset {
5112 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5113 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5114 border-radius: var(--f7-list-inset-border-radius);
5115 --f7-safe-area-left: 0px;
5116 --f7-safe-area-right: 0px;
5117 }
5118 .list.large-inset .block-title {
5119 margin-left: 0;
5120 margin-right: 0;
5121 }
5122 .list.large-inset ul {
5123 border-radius: var(--f7-list-inset-border-radius);
5124 }
5125 .list.large-inset ul:before,
5126 .list.large-inset ul:after {
5127 display: none !important;
5128 }
5129 .list.large-inset li:first-child > a {
5130 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5131 }
5132 .list.large-inset li:last-child > a {
5133 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5134 }
5135 .list.large-inset li:first-child:last-child > a {
5136 border-radius: var(--f7-list-inset-border-radius);
5137 }
5138}
5139@media (min-width: 1200px) {
5140 .list.xlarge-inset {
5141 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5142 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5143 border-radius: var(--f7-list-inset-border-radius);
5144 --f7-safe-area-left: 0px;
5145 --f7-safe-area-right: 0px;
5146 }
5147 .list.xlarge-inset .block-title {
5148 margin-left: 0;
5149 margin-right: 0;
5150 }
5151 .list.xlarge-inset ul {
5152 border-radius: var(--f7-list-inset-border-radius);
5153 }
5154 .list.xlarge-inset ul:before,
5155 .list.xlarge-inset ul:after {
5156 display: none !important;
5157 }
5158 .list.xlarge-inset li:first-child > a {
5159 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5160 }
5161 .list.xlarge-inset li:last-child > a {
5162 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5163 }
5164 .list.xlarge-inset li:first-child:last-child > a {
5165 border-radius: var(--f7-list-inset-border-radius);
5166 }
5167}
5168.list.no-chevron,
5169.list .no-chevron,
5170.menu-list {
5171 --f7-list-chevron-icon-color: transparent;
5172 --f7-list-chevron-icon-area: 0px;
5173}
5174.menu-list {
5175 --menu-list-offset: var(--f7-menu-list-offset);
5176 --f7-list-font-size: var(--f7-menu-list-font-size);
5177 --f7-list-item-title-font-size: var(--f7-menu-list-item-title-font-size);
5178 --f7-list-item-title-font-weight: var(--f7-menu-list-item-title-font-weight);
5179 --f7-list-item-subtitle-font-size: var(--f7-menu-list-item-subtitle-font-size);
5180 --f7-list-item-text-font-size: var(--f7-menu-list-item-text-font-size);
5181 --f7-list-item-after-font-size: var(--f7-menu-list-item-after-font-size);
5182}
5183.menu-list .item-header,
5184.menu-list .item-footer,
5185.menu-list .item-title,
5186.menu-list .item-after,
5187.menu-list .item-text,
5188.menu-list .item-subtitle {
5189 transition-duration: 300ms;
5190}
5191.menu-list li:not(.item-divider):not(.list-group-title) {
5192 padding-top: calc(var(--f7-menu-list-offset) / 2);
5193 padding-bottom: calc(var(--f7-menu-list-offset) / 2);
5194}
5195.menu-list li:not(.item-divider):not(.list-group-title):first-child {
5196 padding-top: var(--f7-menu-list-offset);
5197}
5198.menu-list li:not(.item-divider):not(.list-group-title):last-child {
5199 padding-bottom: var(--f7-menu-list-offset);
5200}
5201.menu-list .item-link {
5202 margin-left: var(--f7-menu-list-offset);
5203 margin-right: var(--f7-menu-list-offset);
5204 border-radius: var(--f7-menu-list-border-radius) !important;
5205}
5206.menu-list .item-inner:after {
5207 display: none;
5208}
5209.menu-list .item-selected .item-link,
5210.menu-list .item-selected.item-link,
5211.menu-list .tab-link-active .item-link,
5212.menu-list .tab-link-active.item-link {
5213 color: var(--f7-menu-list-selected-text-color);
5214 background-color: var(--f7-menu-list-selected-bg-color);
5215}
5216.menu-list .item-selected .item-header,
5217.menu-list .item-selected .item-footer,
5218.menu-list .item-selected .item-title,
5219.menu-list .item-selected .item-after,
5220.menu-list .item-selected .item-text,
5221.menu-list .item-selected .item-subtitle {
5222 color: var(--f7-menu-list-selected-text-color);
5223}
5224.ios .item-link.active-state .item-inner:after,
5225.ios .list-button.active-state:after,
5226.ios .links-list a.active-state:after {
5227 background-color: transparent;
5228}
5229.ios .links-list a.active-state,
5230.ios .list .item-link.active-state,
5231.ios .list .list-button.active-state {
5232 transition-duration: 0ms;
5233}
5234.md .list .item-media {
5235 min-width: 40px;
5236}
5237.aurora .list .item-media {
5238 min-width: 24px;
5239}
5240.aurora .links-list a,
5241.aurora .list .item-link:not(.item-selected),
5242.aurora .list .list-button {
5243 transition-duration: 0ms;
5244}
5245.aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
5246.aurora.device-desktop .list .item-link:not(.item-selected):hover:not(.active-state):not(.no-hover) {
5247 background: var(--f7-list-link-hover-bg-color);
5248}
5249.aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
5250 background: var(--f7-list-button-hover-bg-color);
5251}
5252/* === Badge === */
5253:root {
5254 --f7-badge-text-color: #fff;
5255 --f7-badge-bg-color: #8e8e93;
5256 --f7-badge-padding: 0 4px;
5257 --f7-badge-in-icon-size: 16px;
5258 --f7-badge-in-icon-font-size: 10px;
5259 --f7-badge-font-weight: normal;
5260 --f7-badge-font-size: 12px;
5261}
5262.ios {
5263 --f7-badge-size: 20px;
5264 --f7-badge-font-weight: 600;
5265}
5266.md {
5267 --f7-badge-size: 18px;
5268 --f7-badge-font-weight: 500;
5269}
5270.aurora {
5271 --f7-badge-size: 18px;
5272 --f7-badge-font-weight: 600;
5273 --f7-badge-in-icon-size: 15px;
5274}
5275.badge {
5276 display: inline-flex;
5277 align-items: center;
5278 align-content: center;
5279 justify-content: center;
5280 color: var(--f7-badge-text-color);
5281 background: var(--f7-badge-bg-color);
5282 position: relative;
5283 box-sizing: border-box;
5284 text-align: center;
5285 vertical-align: middle;
5286 font-weight: var(--f7-badge-font-weight);
5287 font-size: var(--f7-badge-font-size);
5288 border-radius: var(--f7-badge-size);
5289 padding: var(--f7-badge-padding);
5290 height: var(--f7-badge-size);
5291 min-width: var(--f7-badge-size);
5292}
5293.icon .badge,
5294.f7-icons .badge,
5295.framework7-icons .badge,
5296.material-icons .badge {
5297 position: absolute;
5298 left: 100%;
5299 margin-left: -10px;
5300 top: -2px;
5301 font-family: var(--f7-font-family);
5302 --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
5303 --f7-badge-size: var(--f7-badge-in-icon-size);
5304}
5305.badge[class*='color-'] {
5306 --f7-badge-bg-color: var(--f7-theme-color);
5307}
5308:root {
5309 --f7-button-min-width: 32px;
5310 --f7-button-bg-color: transparent;
5311 --f7-button-border-width: 0px;
5312 /*
5313 --f7-button-text-color: var(--f7-theme-color);
5314 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
5315 --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
5316 --f7-button-border-color: var(--f7-theme-color);
5317 --f7-button-fill-text-color: #fff;
5318 --f7-button-fill-bg-color: var(--f7-theme-color);
5319 --f7-button-outline-border-color: var(--f7-theme-color);
5320 */
5321 --f7-button-outline-border-width: 2px;
5322 --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
5323 --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
5324 0 3px 6px rgba(0, 0, 0, 0.23);
5325 --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
5326 --f7-segmented-strong-padding: 2px;
5327 --f7-segmented-strong-between-buttons: 4px;
5328 --f7-segmented-strong-button-font-weight: 500;
5329 --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
5330 --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
5331 --f7-segmented-strong-button-text-color: #000;
5332 --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
5333 --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
5334 --f7-segmented-strong-button-active-text-color: #000;
5335 --f7-segmented-strong-button-active-bg-color: #fff;
5336}
5337:root .theme-dark,
5338:root.theme-dark {
5339 --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
5340 --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
5341 --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
5342 --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
5343 --f7-segmented-strong-button-text-color: #fff;
5344 --f7-segmented-strong-button-active-text-color: #fff;
5345}
5346.ios {
5347 --f7-button-font-size: 13px;
5348 --f7-button-height: 28px;
5349 --f7-button-padding-horizontal: 10px;
5350 --f7-button-border-radius: 5px;
5351 --f7-button-font-weight: 600;
5352 --f7-button-letter-spacing: 0;
5353 --f7-button-text-transform: uppercase;
5354 /*
5355 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
5356 */
5357 --f7-button-large-height: 44px;
5358 --f7-button-large-font-size: 17px;
5359 --f7-button-large-font-weight: 500;
5360 --f7-button-large-text-transform: none;
5361 --f7-button-small-height: 26px;
5362 --f7-button-small-font-size: 13px;
5363 --f7-button-small-font-weight: 600;
5364 --f7-button-small-text-transform: uppercase;
5365 --f7-button-small-outline-border-width: 2px;
5366 --f7-segmented-strong-button-text-transform: none;
5367 --f7-segmented-strong-button-active-font-weight: 600;
5368}
5369.md {
5370 --f7-button-font-size: 14px;
5371 --f7-button-height: 36px;
5372 --f7-button-padding-horizontal: 8px;
5373 --f7-button-border-radius: 4px;
5374 --f7-button-font-weight: 500;
5375 --f7-button-letter-spacing: 0.05em;
5376 --f7-button-text-transform: uppercase;
5377 /*
5378 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
5379 */
5380 --f7-button-large-height: 48px;
5381 --f7-button-large-font-size: 14px;
5382 --f7-button-large-font-weight: 500;
5383 --f7-button-large-text-transform: uppercase;
5384 --f7-button-small-height: 28px;
5385 --f7-button-small-font-size: 14px;
5386 --f7-button-small-font-weight: 500;
5387 --f7-button-small-text-transform: uppercase;
5388 --f7-button-small-outline-border-width: 2px;
5389 --f7-segmented-strong-button-text-transform: uppercase;
5390 --f7-segmented-strong-button-active-font-weight: 500;
5391}
5392.aurora {
5393 /*
5394 --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
5395 --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
5396 */
5397 --f7-button-font-size: 14px;
5398 --f7-button-height: 36px;
5399 --f7-button-min-width: 24px;
5400 --f7-button-padding-horizontal: 10px;
5401 --f7-button-border-radius: 8px;
5402 --f7-button-font-weight: 500;
5403 --f7-button-letter-spacing: 0em;
5404 --f7-button-text-transform: none;
5405 /*
5406 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
5407 */
5408 --f7-button-large-height: 48px;
5409 --f7-button-large-font-size: 16px;
5410 --f7-button-large-font-weight: 600;
5411 --f7-button-large-text-transform: none;
5412 --f7-button-small-height: 28px;
5413 --f7-button-small-font-size: 14px;
5414 --f7-button-small-font-weight: 500;
5415 --f7-button-small-text-transform: none;
5416 --f7-button-small-outline-border-width: 1px;
5417 --f7-segmented-strong-button-text-transform: none;
5418 --f7-segmented-strong-button-active-font-weight: 600;
5419}
5420button {
5421 -webkit-appearance: none;
5422 -moz-appearance: none;
5423 appearance: none;
5424 width: 100%;
5425}
5426.button {
5427 --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
5428 text-decoration: none;
5429 text-align: center;
5430 display: flex;
5431 -webkit-appearance: none;
5432 -moz-appearance: none;
5433 appearance: none;
5434 background: none;
5435 margin: 0;
5436 white-space: nowrap;
5437 text-overflow: ellipsis;
5438 position: relative;
5439 overflow: hidden;
5440 font-family: inherit;
5441 cursor: pointer;
5442 outline: 0;
5443 box-sizing: border-box;
5444 vertical-align: middle;
5445 justify-content: center;
5446 align-items: center;
5447 border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
5448 font-size: var(--f7-button-font-size);
5449 color: var(--f7-button-text-color, var(--f7-theme-color));
5450 height: var(--f7-button-height);
5451 line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
5452 padding: var(--f7-button-padding-vertical, 0px) var(--f7-button-padding-horizontal);
5453 border-radius: var(--f7-button-border-radius);
5454 min-width: var(--f7-button-min-width);
5455 font-weight: var(--f7-button-font-weight);
5456 letter-spacing: var(--f7-button-letter-spacing);
5457 text-transform: var(--f7-button-text-transform);
5458 background-color: var(--f7-button-bg-color);
5459 box-shadow: var(--f7-button-box-shadow);
5460}
5461.button.active-state {
5462 background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
5463 color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
5464}
5465input[type='submit'].button,
5466input[type='button'].button {
5467 width: 100%;
5468}
5469.button > i + span,
5470.button > span + span,
5471.button > span + i,
5472.button > i + i {
5473 margin-left: 4px;
5474}
5475.subnavbar .button,
5476.navbar .button,
5477.toolbar .button,
5478.searchbar .button,
5479.appbar .button {
5480 color: var(--f7-button-text-color, var(--f7-theme-color));
5481}
5482.button-round,
5483.ios .button-round-ios,
5484.md .button-round-md,
5485.aurora .button-round-aurora {
5486 --f7-button-border-radius: var(--f7-button-height);
5487}
5488.button-fill,
5489.ios .button-fill-ios,
5490.md .button-fill-md,
5491.aurora .button-fill-aurora,
5492.button-active,
5493.button.tab-link-active {
5494 --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
5495 --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
5496 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
5497}
5498.button-fill,
5499.ios .button-fill-ios,
5500.md .button-fill-md,
5501.aurora .button-fill-aurora {
5502 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
5503}
5504.button-active,
5505.button.tab-link-active {
5506 --f7-button-pressed-bg-color: var(--f7-button-bg-color);
5507}
5508.button-outline,
5509.ios .button-outline-ios,
5510.md .button-outline-md,
5511.aurora .button-outline-aurora {
5512 --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
5513 --f7-button-border-width: var(--f7-button-outline-border-width);
5514}
5515.button-large,
5516.ios .button-large-ios,
5517.md .button-large-md,
5518.aurora .button-large-aurora {
5519 --f7-button-height: var(--f7-button-large-height);
5520 --f7-button-font-size: var(--f7-button-large-font-size);
5521 --f7-button-font-weight: var(--f7-button-large-font-weight);
5522 --f7-button-text-transform: var(--f7-button-large-text-transform);
5523}
5524.button-small,
5525.ios .button-small-ios,
5526.md .button-small-md,
5527.aurora .button-small-aurora {
5528 --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
5529 --f7-button-height: var(--f7-button-small-height);
5530 --f7-button-font-size: var(--f7-button-small-font-size);
5531 --f7-button-font-weight: var(--f7-button-small-font-weight);
5532 --f7-button-text-transform: var(--f7-button-small-text-transform);
5533}
5534.ios .button-small.button-fill,
5535.ios .button-small-ios.button-fill,
5536.ios .button-small.button-fill-ios {
5537 --f7-button-border-width: var(--f7-button-small-outline-border-width);
5538 --f7-button-pressed-text-color: var(--f7-theme-color);
5539 --f7-button-pressed-bg-color: transparent;
5540}
5541.segmented {
5542 align-self: center;
5543 display: flex;
5544 flex-wrap: nowrap;
5545 border-radius: var(--f7-button-border-radius);
5546 box-shadow: var(--f7-button-box-shadow);
5547 box-sizing: border-box;
5548}
5549.segmented .button,
5550.segmented button {
5551 width: 100%;
5552 flex-shrink: 1;
5553 min-width: 0;
5554 border-radius: 0;
5555}
5556.segmented .button:first-child {
5557 border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
5558}
5559.segmented .button:not(.button-outline):first-child {
5560 border-left: none;
5561}
5562.segmented .button.button-outline:nth-child(n + 2) {
5563 border-left: none;
5564}
5565.segmented .button:last-child {
5566 border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
5567}
5568.segmented .button-round:first-child {
5569 border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
5570}
5571.segmented .button-round:last-child {
5572 border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
5573}
5574.segmented .button:first-child:last-child {
5575 border-radius: var(--f7-button-border-radius);
5576}
5577.segmented-raised,
5578.ios .segmented-raised-ios,
5579.md .segmented-raised-md,
5580.aurora .segmented-raised-aurora {
5581 box-shadow: var(--f7-button-raised-box-shadow);
5582}
5583.segmented-raised .button:not(.button-outline),
5584.ios .segmented-raised-ios .button:not(.button-outline),
5585.md .segmented-raised-md .button:not(.button-outline),
5586.aurora .segmented-raised-aurora .button:not(.button-outline) {
5587 border-left: 1px solid var(--f7-segmented-raised-divider-color);
5588}
5589.button-raised,
5590.ios .button-raised-ios,
5591.md .button-raised-md,
5592.aurora .button-raised-aurora {
5593 --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
5594}
5595.button-raised.active-state,
5596.ios .button-raised-ios.active-state,
5597.md .button-raised-md.active-state,
5598.aurora .button-raised-aurora.active-state {
5599 --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
5600}
5601.segmented-strong,
5602.ios .segmented-strong-ios,
5603.md .segmented-strong-md,
5604.aurora .segmented-strong-aurora {
5605 --f7-button-bg-color: transparent;
5606 --f7-button-hover-bg-color: var(--f7-segmented-strong-button-hover-bg-color);
5607 --f7-button-text-color: var(--f7-segmented-strong-button-text-color);
5608 --f7-button-font-weight: var(--f7-segmented-strong-button-font-weight);
5609 --f7-button-text-transform: var(--f7-segmented-strong-button-text-transform);
5610 --f7-button-pressed-bg-color: var(--f7-segmented-strong-button-pressed-bg-color);
5611 position: relative;
5612 background: var(--f7-segmented-strong-bg-color);
5613 border-radius: calc(var(--f7-button-border-radius) + 2px);
5614 box-shadow: none;
5615 padding: var(--f7-segmented-strong-padding);
5616 overflow: hidden;
5617}
5618.segmented-strong .button,
5619.ios .segmented-strong-ios .button,
5620.md .segmented-strong-md .button,
5621.aurora .segmented-strong-aurora .button {
5622 z-index: 1;
5623 transform: translate3d(0, 0, 0);
5624}
5625.segmented-strong .button,
5626.ios .segmented-strong-ios .button,
5627.md .segmented-strong-md .button,
5628.aurora .segmented-strong-aurora .button,
5629.segmented-strong .button:first-child,
5630.ios .segmented-strong-ios .button:first-child,
5631.md .segmented-strong-md .button:first-child,
5632.aurora .segmented-strong-aurora .button:first-child,
5633.segmented-strong .button:last-child,
5634.ios .segmented-strong-ios .button:last-child,
5635.md .segmented-strong-md .button:last-child,
5636.aurora .segmented-strong-aurora .button:last-child {
5637 border-radius: var(--f7-button-border-radius);
5638}
5639.segmented-strong .button + .button,
5640.ios .segmented-strong-ios .button + .button,
5641.md .segmented-strong-md .button + .button,
5642.aurora .segmented-strong-aurora .button + .button {
5643 margin-left: var(--f7-segmented-strong-between-buttons);
5644}
5645.segmented-strong .button.button-active,
5646.ios .segmented-strong-ios .button.button-active,
5647.md .segmented-strong-md .button.button-active,
5648.aurora .segmented-strong-aurora .button.button-active,
5649.segmented-strong .button.tab-link-active,
5650.ios .segmented-strong-ios .button.tab-link-active,
5651.md .segmented-strong-md .button.tab-link-active,
5652.aurora .segmented-strong-aurora .button.tab-link-active {
5653 --f7-button-hover-bg-color: transparent;
5654 --f7-button-bg-color: transparent;
5655 --f7-button-text-color: var(--f7-segmented-strong-button-active-text-color);
5656 --f7-button-font-weight: var(--f7-segmented-strong-button-active-font-weight);
5657}
5658.segmented-strong .segmented-highlight,
5659.ios .segmented-strong-ios .segmented-highlight,
5660.md .segmented-strong-md .segmented-highlight,
5661.aurora .segmented-strong-aurora .segmented-highlight {
5662 --f7-segmented-highlight-num: 1;
5663 --f7-segmented-highlight-active: 0;
5664 --f7-segmented-highlight-padding: calc(var(--f7-segmented-strong-padding) * 2);
5665 --f7-segmented-highlight-between: var(--f7-segmented-strong-between-buttons);
5666 --f7-segmented-highlight-width: calc((100% - var(--f7-segmented-highlight-padding) - var(--f7-segmented-highlight-between) * (var(--f7-segmented-highlight-num) - 1)) / var(--f7-segmented-highlight-num));
5667 position: absolute;
5668 background-color: var(--f7-segmented-strong-button-active-bg-color);
5669 border-radius: var(--f7-button-border-radius);
5670 box-shadow: var(--f7-segmented-strong-button-active-box-shadow);
5671 left: var(--f7-segmented-strong-padding);
5672 top: var(--f7-segmented-strong-padding);
5673 height: calc(100% - var(--f7-segmented-strong-padding) * 2);
5674 width: var(--f7-segmented-highlight-width);
5675 z-index: 0;
5676 transform: translateX(calc(var(--f7-segmented-highlight-active) * 100% + var(--f7-segmented-highlight-active) * var(--f7-segmented-highlight-between)));
5677 transition: 200ms;
5678}
5679.button:nth-child(2) ~ .segmented-highlight {
5680 --f7-segmented-highlight-num: 2;
5681}
5682.button:nth-child(3) ~ .segmented-highlight {
5683 --f7-segmented-highlight-num: 3;
5684}
5685.button:nth-child(4) ~ .segmented-highlight {
5686 --f7-segmented-highlight-num: 4;
5687}
5688.button:nth-child(5) ~ .segmented-highlight {
5689 --f7-segmented-highlight-num: 5;
5690}
5691.button:nth-child(6) ~ .segmented-highlight {
5692 --f7-segmented-highlight-num: 6;
5693}
5694.button:nth-child(7) ~ .segmented-highlight {
5695 --f7-segmented-highlight-num: 7;
5696}
5697.button:nth-child(8) ~ .segmented-highlight {
5698 --f7-segmented-highlight-num: 8;
5699}
5700.button:nth-child(9) ~ .segmented-highlight {
5701 --f7-segmented-highlight-num: 9;
5702}
5703.button:nth-child(10) ~ .segmented-highlight {
5704 --f7-segmented-highlight-num: 10;
5705}
5706.button-active:nth-child(2) ~ .segmented-highlight,
5707.tab-link-active:nth-child(2) ~ .segmented-highlight {
5708 --f7-segmented-highlight-active: 1;
5709}
5710.button-active:nth-child(3) ~ .segmented-highlight,
5711.tab-link-active:nth-child(3) ~ .segmented-highlight {
5712 --f7-segmented-highlight-active: 2;
5713}
5714.button-active:nth-child(4) ~ .segmented-highlight,
5715.tab-link-active:nth-child(4) ~ .segmented-highlight {
5716 --f7-segmented-highlight-active: 3;
5717}
5718.button-active:nth-child(5) ~ .segmented-highlight,
5719.tab-link-active:nth-child(5) ~ .segmented-highlight {
5720 --f7-segmented-highlight-active: 4;
5721}
5722.button-active:nth-child(6) ~ .segmented-highlight,
5723.tab-link-active:nth-child(6) ~ .segmented-highlight {
5724 --f7-segmented-highlight-active: 5;
5725}
5726.button-active:nth-child(7) ~ .segmented-highlight,
5727.tab-link-active:nth-child(7) ~ .segmented-highlight {
5728 --f7-segmented-highlight-active: 6;
5729}
5730.button-active:nth-child(8) ~ .segmented-highlight,
5731.tab-link-active:nth-child(8) ~ .segmented-highlight {
5732 --f7-segmented-highlight-active: 7;
5733}
5734.button-active:nth-child(9) ~ .segmented-highlight,
5735.tab-link-active:nth-child(9) ~ .segmented-highlight {
5736 --f7-segmented-highlight-active: 8;
5737}
5738.button-active:nth-child(10) ~ .segmented-highlight,
5739.tab-link-active:nth-child(10) ~ .segmented-highlight {
5740 --f7-segmented-highlight-active: 9;
5741}
5742.segmented-round,
5743.ios .segmented-round-ios,
5744.md .segmented-round-md,
5745.aurora .segmented-round-aurora {
5746 border-radius: var(--f7-button-height);
5747}
5748.segmented-round .segmented-highlight,
5749.ios .segmented-round-ios .segmented-highlight,
5750.md .segmented-round-md .segmented-highlight,
5751.aurora .segmented-round-aurora .segmented-highlight {
5752 border-radius: var(--f7-button-height);
5753}
5754.subnavbar .segmented {
5755 width: 100%;
5756}
5757.button-preloader {
5758 position: relative;
5759 --f7-preloader-color: var(--f7-button-text-color, var(--f7-theme-color));
5760}
5761.button-preloader:not(.button-large) {
5762 --f7-preloader-size: calc(var(--f7-button-height) - 6px);
5763}
5764.button-preloader.button-fill {
5765 --f7-preloader-color: #fff;
5766}
5767.button-preloader > span:not(.preloader) {
5768 transition: 0.2s;
5769 display: inline-flex;
5770 align-items: center;
5771 align-content: center;
5772 justify-content: center;
5773 transform: scale(1);
5774}
5775.button-preloader > .preloader {
5776 position: absolute;
5777 left: 50%;
5778 top: 50%;
5779 transition: 0.2s;
5780 transition-property: opacity;
5781 opacity: 0;
5782 visibility: hidden;
5783 margin-left: calc(-1 * var(--f7-preloader-size) / 2);
5784 margin-top: calc(-1 * var(--f7-preloader-size) / 2);
5785}
5786.button-preloader.button-loading > span:not(.preloader) {
5787 opacity: 0;
5788 transform: scale(0);
5789}
5790.button-preloader.button-loading > .preloader {
5791 opacity: 1;
5792 visibility: visible;
5793}
5794.ios .button {
5795 transition-duration: 100ms;
5796}
5797.ios .button-fill,
5798.ios .button-fill-ios {
5799 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
5800}
5801.ios .button-small,
5802.ios .button-small-ios {
5803 transition-duration: 200ms;
5804}
5805.md .button {
5806 transition-duration: 300ms;
5807 transform: translate3d(0, 0, 0);
5808}
5809.md .button-fill,
5810.md .button-fill-md {
5811 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
5812}
5813.aurora .button {
5814 transition-duration: 100ms;
5815 transform: translate3d(0, 0, 0);
5816}
5817.aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
5818 background-color: var(--f7-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
5819}
5820.aurora .button-fill,
5821.aurora .button-fill-aurora {
5822 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
5823}
5824.aurora .button-fill,
5825.aurora .button-active,
5826.aurora .button.tab-link-active,
5827.aurora .button-fill-aurora {
5828 --f7-button-hover-bg-color: var(--f7-button-fill-hover-bg-color, var(--f7-theme-color-tint));
5829}
5830/* === Touch Ripple === */
5831:root {
5832 --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
5833 --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
5834 --f7-touch-ripple-color: var(--f7-touch-ripple-black);
5835}
5836.theme-dark {
5837 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
5838}
5839.ripple,
5840.fab a,
5841.link,
5842.item-link,
5843.list-button,
5844.button,
5845.dialog-button,
5846.tab-link,
5847.radio,
5848.checkbox,
5849.actions-button,
5850.speed-dial-buttons a {
5851 -webkit-user-select: none;
5852 -moz-user-select: none;
5853 user-select: none;
5854}
5855.ripple-wave {
5856 left: 0;
5857 top: 0;
5858 position: absolute !important;
5859 border-radius: 50%;
5860 pointer-events: none;
5861 z-index: -1;
5862 padding: 0;
5863 margin: 0;
5864 font-size: 0;
5865 transform: translate3d(0px, 0px, 0) scale(0);
5866 background-color: var(--f7-touch-ripple-color);
5867 animation: touch-ripple-in 200ms forwards;
5868}
5869.ripple-wave.ripple-wave-out {
5870 transform: var(--f7-ripple-transform);
5871 animation: touch-ripple-out 300ms forwards;
5872}
5873.button-fill .ripple-wave,
5874.picker-calendar-day .ripple-wave,
5875.menu .ripple-wave {
5876 z-index: 1;
5877}
5878.checkbox .ripple-wave,
5879.radio .ripple-wave,
5880.data-table .sortable-cell .ripple-wave {
5881 z-index: 0;
5882}
5883[class*='ripple-color-'] {
5884 --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
5885}
5886@keyframes touch-ripple-in {
5887 from {
5888 transform: translate3d(0px, 0px, 0) scale(0);
5889 }
5890 to {
5891 transform: var(--f7-ripple-transform);
5892 }
5893}
5894@keyframes touch-ripple-out {
5895 from {
5896 opacity: 1;
5897 }
5898 to {
5899 opacity: 0;
5900 }
5901}
5902/* === Icon === */
5903.f7-icons,
5904.material-icons {
5905 width: 1em;
5906 height: 1em;
5907}
5908i.icon {
5909 display: inline-block;
5910 vertical-align: middle;
5911 background-size: 100% auto;
5912 background-position: center;
5913 background-repeat: no-repeat;
5914 font-style: normal;
5915 position: relative;
5916}
5917.icon-back:after,
5918.icon-prev:after,
5919.icon-forward:after,
5920.icon-next:after {
5921 font-family: 'framework7-core-icons';
5922 font-weight: normal;
5923 font-style: normal;
5924 line-height: 1;
5925 letter-spacing: normal;
5926 text-transform: none;
5927 white-space: nowrap;
5928 word-wrap: normal;
5929 direction: ltr;
5930 -webkit-font-smoothing: antialiased;
5931 text-rendering: optimizeLegibility;
5932 -moz-osx-font-smoothing: grayscale;
5933 font-feature-settings: 'liga';
5934 text-align: center;
5935 display: block;
5936 width: 100%;
5937 height: 100%;
5938 font-size: 20px;
5939}
5940.icon[class*='color-'] {
5941 color: var(--f7-theme-color);
5942}
5943.ios .icon-back,
5944.ios .icon-prev,
5945.ios .icon-forward,
5946.ios .icon-next {
5947 width: 12px;
5948 height: 20px;
5949 line-height: 20px;
5950}
5951.ios .icon-back:after,
5952.ios .icon-prev:after,
5953.ios .icon-forward:after,
5954.ios .icon-next:after {
5955 line-height: inherit;
5956}
5957.ios .icon-prev:after,
5958.ios .icon-next:after {
5959 font-size: 16px;
5960}
5961.ios .icon-back:after,
5962.ios .icon-prev:after {
5963 content: 'chevron_left_ios';
5964}
5965.ios .icon-forward:after,
5966.ios .icon-next:after {
5967 content: 'chevron_right_ios';
5968}
5969.md .icon-back,
5970.md .icon-forward,
5971.md .icon-next,
5972.md .icon-prev {
5973 width: 24px;
5974 height: 24px;
5975}
5976.md .icon-back:after,
5977.md .icon-forward:after,
5978.md .icon-next:after,
5979.md .icon-prev:after {
5980 line-height: 1.2;
5981}
5982.md .icon-back:after {
5983 content: 'arrow_left_md';
5984}
5985.md .icon-forward:after {
5986 content: 'arrow_right_md';
5987}
5988.md .icon-next:after {
5989 content: 'chevron_right_md';
5990}
5991.md .icon-prev:after {
5992 content: 'chevron_left_md';
5993}
5994.aurora .f7-icons,
5995.aurora .material-icons {
5996 font-size: 24px;
5997}
5998.aurora .icon-back,
5999.aurora .icon-prev,
6000.aurora .icon-forward,
6001.aurora .icon-next {
6002 width: 12px;
6003 height: 20px;
6004 line-height: 20px;
6005}
6006.aurora .icon-back:after,
6007.aurora .icon-prev:after,
6008.aurora .icon-forward:after,
6009.aurora .icon-next:after {
6010 line-height: inherit;
6011}
6012.aurora .icon-prev:after,
6013.aurora .icon-next:after {
6014 font-size: 16px;
6015}
6016.aurora .icon-back:after,
6017.aurora .icon-prev:after {
6018 content: 'chevron_left_ios';
6019}
6020.aurora .icon-forward:after,
6021.aurora .icon-next:after {
6022 content: 'chevron_right_ios';
6023}
6024.custom-modal-backdrop {
6025 z-index: 10500;
6026}
6027.custom-modal-backdrop,
6028.actions-backdrop,
6029.dialog-backdrop,
6030.popover-backdrop,
6031.popup-backdrop,
6032.preloader-backdrop,
6033.sheet-backdrop,
6034.fab-backdrop {
6035 position: absolute;
6036 left: 0;
6037 top: 0;
6038 width: 100%;
6039 height: 100%;
6040 background: rgba(0, 0, 0, 0.4);
6041 z-index: 13000;
6042 visibility: hidden;
6043 opacity: 0;
6044 transition-duration: 400ms;
6045}
6046.custom-modal-backdrop.not-animated,
6047.actions-backdrop.not-animated,
6048.dialog-backdrop.not-animated,
6049.popover-backdrop.not-animated,
6050.popup-backdrop.not-animated,
6051.preloader-backdrop.not-animated,
6052.sheet-backdrop.not-animated,
6053.fab-backdrop.not-animated {
6054 transition-duration: 0ms;
6055}
6056.custom-modal-backdrop.backdrop-in,
6057.actions-backdrop.backdrop-in,
6058.dialog-backdrop.backdrop-in,
6059.popover-backdrop.backdrop-in,
6060.popup-backdrop.backdrop-in,
6061.preloader-backdrop.backdrop-in,
6062.sheet-backdrop.backdrop-in,
6063.fab-backdrop.backdrop-in {
6064 visibility: visible;
6065 opacity: 1;
6066}