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