]> git.proxmox.com Git - framework7.git/blame - framework7/css/framework7.css
bump version to 4.4.7-2
[framework7.git] / framework7 / css / framework7.css
CommitLineData
5309fbda 1/**
5d51ea26 2 * Framework7 4.4.7
5309fbda
DC
3 * Full featured mobile HTML framework for building iOS & Android apps
4 * http://framework7.io/
5 *
6 * Copyright 2014-2019 Vladimir Kharlampidi
7 *
8 * Released under the MIT License
9 *
5d51ea26 10 * Released on: July 19, 2019
5309fbda
DC
11 */
12
13/*====================
14 Core
15 ==================== */
16:root {
17 --f7-theme-color: #007aff;
18 --f7-theme-color-rgb: 0, 122, 255;
19 --f7-theme-color-shade: #0066d6;
20 --f7-theme-color-tint: #298fff;
21 --f7-safe-area-left: 0px;
22 --f7-safe-area-right: 0px;
23 --f7-safe-area-top: 0px;
24 --f7-safe-area-bottom: 0px;
25 --f7-safe-area-outer-left: 0px;
26 --f7-safe-area-outer-right: 0px;
27 --f7-device-pixel-ratio: 1;
28}
29@supports (left: env(safe-area-inset-left)) {
30 :root {
31 --f7-safe-area-top: env(safe-area-inset-top);
32 --f7-safe-area-bottom: env(safe-area-inset-bottom);
33 }
34 :root .ios-left-edge,
35 :root .ios-edges,
36 :root .safe-area-left,
37 :root .safe-areas,
38 :root .popup,
39 :root .sheet-modal,
40 :root .panel-left {
41 --f7-safe-area-left: env(safe-area-inset-left);
42 --f7-safe-area-outer-left: env(safe-area-inset-left);
43 }
44 :root .ios-right-edge,
45 :root .ios-edges,
46 :root .safe-area-right,
47 :root .safe-areas,
48 :root .popup,
49 :root .sheet-modal,
50 :root .panel-right {
51 --f7-safe-area-right: env(safe-area-inset-right);
52 --f7-safe-area-outer-right: env(safe-area-inset-right);
53 }
54 :root .no-safe-areas,
55 :root .no-safe-area-left,
56 :root .no-ios-edges,
57 :root .no-ios-left-edge {
58 --f7-safe-area-left: 0px;
59 --f7-safe-area-outer-left: 0px;
60 }
61 :root .no-safe-areas,
62 :root .no-safe-area-right,
63 :root .no-ios-edges,
64 :root .no-ios-right-edge {
65 --f7-safe-area-right: 0px;
66 --f7-safe-area-outer-right: 0px;
67 }
68}
69@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
70 :root {
71 --f7-device-pixel-ratio: 2;
72 }
73}
74@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
75 :root {
76 --f7-device-pixel-ratio: 3;
77 }
78}
79/*====================
80 Fonts
81 ==================== */
5d51ea26
DC
82:root {
83 --f7-font-size: 14px;
84}
5309fbda
DC
85.ios {
86 --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
87 --f7-text-color: #000;
5309fbda
DC
88 --f7-line-height: 1.4;
89}
90.ios .theme-dark,
91.ios.theme-dark {
92 --f7-text-color: #fff;
93}
94.md {
95 --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
96 --f7-text-color: #212121;
5309fbda
DC
97 --f7-line-height: 1.5;
98}
99.md .theme-dark,
100.md.theme-dark {
101 --f7-text-color: rgba(255, 255, 255, 0.87);
102}
5d51ea26
DC
103.aurora {
104 --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
105 --f7-text-color: #000;
106 --f7-line-height: 1.5;
107}
108.aurora .theme-dark,
109.aurora.theme-dark {
110 --f7-text-color: #fff;
111}
5309fbda
DC
112/*====================
113 Bars
114 ==================== */
115:root {
116 /*
117 --f7-bars-link-color: var(--f7-theme-color);
118 */
119 --f7-bars-bg-image: none;
120 --f7-bars-bg-color: #f7f7f8;
121 --f7-bars-bg-color-rgb: 247, 247, 248;
122 --f7-bars-text-color: #000;
123 --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
124 --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
125}
126.theme-dark {
127 --f7-bars-bg-color: #1b1b1b;
128 --f7-bars-text-color: #fff;
129}
130.ios {
131 --f7-bars-border-color: #c4c4c4;
132}
133.ios .theme-dark,
134.ios.theme-dark {
135 --f7-bars-border-color: #282829;
136}
137.md {
138 --f7-bars-border-color: transparent;
139}
5d51ea26
DC
140.aurora {
141 --f7-bars-border-color: rgba(0, 0, 0, 0.2);
142}
143.aurora .theme-dark,
144.aurora.theme-dark {
145 --f7-bars-border-color: #282829;
146}
5309fbda
DC
147/*====================
148 Color Themes
149 ==================== */
150.text-color-primary {
151 --f7-theme-color-text-color: var(--f7-theme-color);
152}
153.bg-color-primary {
154 --f7-theme-color-bg-color: var(--f7-theme-color);
155}
156.border-color-primary {
157 --f7-theme-color-border-color: var(--f7-theme-color);
158}
159.ripple-color-primary {
160 --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
161}
162:root {
163 --f7-color-red: #ff3b30;
164 --f7-color-red-rgb: 255, 59, 48;
165 --f7-color-red-shade: #ff1407;
166 --f7-color-red-tint: #ff6259;
167 --f7-color-green: #4cd964;
168 --f7-color-green-rgb: 76, 217, 100;
169 --f7-color-green-shade: #2cd048;
170 --f7-color-green-tint: #6ee081;
171 --f7-color-blue: #2196f3;
172 --f7-color-blue-rgb: 33, 150, 243;
173 --f7-color-blue-shade: #0c82df;
174 --f7-color-blue-tint: #48a8f5;
175 --f7-color-pink: #ff2d55;
176 --f7-color-pink-rgb: 255, 45, 85;
177 --f7-color-pink-shade: #ff0434;
178 --f7-color-pink-tint: #ff5676;
179 --f7-color-yellow: #ffcc00;
180 --f7-color-yellow-rgb: 255, 204, 0;
181 --f7-color-yellow-shade: #d6ab00;
182 --f7-color-yellow-tint: #ffd429;
183 --f7-color-orange: #ff9500;
184 --f7-color-orange-rgb: 255, 149, 0;
185 --f7-color-orange-shade: #d67d00;
186 --f7-color-orange-tint: #ffa629;
187 --f7-color-purple: #9c27b0;
188 --f7-color-purple-rgb: 156, 39, 176;
189 --f7-color-purple-shade: #7e208f;
190 --f7-color-purple-tint: #b92fd1;
191 --f7-color-deeppurple: #673ab7;
192 --f7-color-deeppurple-rgb: 103, 58, 183;
193 --f7-color-deeppurple-shade: #563098;
194 --f7-color-deeppurple-tint: #7c52c8;
195 --f7-color-lightblue: #5ac8fa;
196 --f7-color-lightblue-rgb: 90, 200, 250;
197 --f7-color-lightblue-shade: #32bbf9;
198 --f7-color-lightblue-tint: #82d5fb;
199 --f7-color-teal: #009688;
200 --f7-color-teal-rgb: 0, 150, 136;
201 --f7-color-teal-shade: #006d63;
202 --f7-color-teal-tint: #00bfad;
203 --f7-color-lime: #cddc39;
204 --f7-color-lime-rgb: 205, 220, 57;
205 --f7-color-lime-shade: #bac923;
206 --f7-color-lime-tint: #d6e25c;
207 --f7-color-deeporange: #ff6b22;
208 --f7-color-deeporange-rgb: 255, 107, 34;
209 --f7-color-deeporange-shade: #f85200;
210 --f7-color-deeporange-tint: #ff864b;
211 --f7-color-gray: #8e8e93;
212 --f7-color-gray-rgb: 142, 142, 147;
213 --f7-color-gray-shade: #79797f;
214 --f7-color-gray-tint: #a3a3a7;
215 --f7-color-white: #ffffff;
216 --f7-color-white-rgb: 255, 255, 255;
217 --f7-color-white-shade: #ebebeb;
218 --f7-color-white-tint: #ffffff;
219 --f7-color-black: #000000;
220 --f7-color-black-rgb: 0, 0, 0;
221 --f7-color-black-shade: #000000;
222 --f7-color-black-tint: #141414;
223}
224.color-theme-red {
225 --f7-theme-color: #ff3b30;
226 --f7-theme-color-rgb: 255, 59, 48;
227 --f7-theme-color-shade: #ff1407;
228 --f7-theme-color-tint: #ff6259;
229}
230.color-theme-green {
231 --f7-theme-color: #4cd964;
232 --f7-theme-color-rgb: 76, 217, 100;
233 --f7-theme-color-shade: #2cd048;
234 --f7-theme-color-tint: #6ee081;
235}
236.color-theme-blue {
237 --f7-theme-color: #2196f3;
238 --f7-theme-color-rgb: 33, 150, 243;
239 --f7-theme-color-shade: #0c82df;
240 --f7-theme-color-tint: #48a8f5;
241}
242.color-theme-pink {
243 --f7-theme-color: #ff2d55;
244 --f7-theme-color-rgb: 255, 45, 85;
245 --f7-theme-color-shade: #ff0434;
246 --f7-theme-color-tint: #ff5676;
247}
248.color-theme-yellow {
249 --f7-theme-color: #ffcc00;
250 --f7-theme-color-rgb: 255, 204, 0;
251 --f7-theme-color-shade: #d6ab00;
252 --f7-theme-color-tint: #ffd429;
253}
254.color-theme-orange {
255 --f7-theme-color: #ff9500;
256 --f7-theme-color-rgb: 255, 149, 0;
257 --f7-theme-color-shade: #d67d00;
258 --f7-theme-color-tint: #ffa629;
259}
260.color-theme-purple {
261 --f7-theme-color: #9c27b0;
262 --f7-theme-color-rgb: 156, 39, 176;
263 --f7-theme-color-shade: #7e208f;
264 --f7-theme-color-tint: #b92fd1;
265}
266.color-theme-deeppurple {
267 --f7-theme-color: #673ab7;
268 --f7-theme-color-rgb: 103, 58, 183;
269 --f7-theme-color-shade: #563098;
270 --f7-theme-color-tint: #7c52c8;
271}
272.color-theme-lightblue {
273 --f7-theme-color: #5ac8fa;
274 --f7-theme-color-rgb: 90, 200, 250;
275 --f7-theme-color-shade: #32bbf9;
276 --f7-theme-color-tint: #82d5fb;
277}
278.color-theme-teal {
279 --f7-theme-color: #009688;
280 --f7-theme-color-rgb: 0, 150, 136;
281 --f7-theme-color-shade: #006d63;
282 --f7-theme-color-tint: #00bfad;
283}
284.color-theme-lime {
285 --f7-theme-color: #cddc39;
286 --f7-theme-color-rgb: 205, 220, 57;
287 --f7-theme-color-shade: #bac923;
288 --f7-theme-color-tint: #d6e25c;
289}
290.color-theme-deeporange {
291 --f7-theme-color: #ff6b22;
292 --f7-theme-color-rgb: 255, 107, 34;
293 --f7-theme-color-shade: #f85200;
294 --f7-theme-color-tint: #ff864b;
295}
296.color-theme-gray {
297 --f7-theme-color: #8e8e93;
298 --f7-theme-color-rgb: 142, 142, 147;
299 --f7-theme-color-shade: #79797f;
300 --f7-theme-color-tint: #a3a3a7;
301}
302.color-theme-white {
303 --f7-theme-color: #ffffff;
304 --f7-theme-color-rgb: 255, 255, 255;
305 --f7-theme-color-shade: #ebebeb;
306 --f7-theme-color-tint: #ffffff;
307}
308.color-theme-black {
309 --f7-theme-color: #000000;
310 --f7-theme-color-rgb: 0, 0, 0;
311 --f7-theme-color-shade: #000000;
312 --f7-theme-color-tint: #141414;
313}
314.color-red {
315 --f7-theme-color: #ff3b30;
316 --f7-theme-color-rgb: 255, 59, 48;
317 --f7-theme-color-shade: #ff1407;
318 --f7-theme-color-tint: #ff6259;
319}
320.text-color-red {
321 --f7-theme-color-text-color: #ff3b30;
322}
323.bg-color-red {
324 --f7-theme-color-bg-color: #ff3b30;
325}
326.border-color-red {
327 --f7-theme-color-border-color: #ff3b30;
328}
329.ripple-color-red,
330.ripple-red {
331 --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
332}
333.color-green {
334 --f7-theme-color: #4cd964;
335 --f7-theme-color-rgb: 76, 217, 100;
336 --f7-theme-color-shade: #2cd048;
337 --f7-theme-color-tint: #6ee081;
338}
339.text-color-green {
340 --f7-theme-color-text-color: #4cd964;
341}
342.bg-color-green {
343 --f7-theme-color-bg-color: #4cd964;
344}
345.border-color-green {
346 --f7-theme-color-border-color: #4cd964;
347}
348.ripple-color-green,
349.ripple-green {
350 --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
351}
352.color-blue {
353 --f7-theme-color: #2196f3;
354 --f7-theme-color-rgb: 33, 150, 243;
355 --f7-theme-color-shade: #0c82df;
356 --f7-theme-color-tint: #48a8f5;
357}
358.text-color-blue {
359 --f7-theme-color-text-color: #2196f3;
360}
361.bg-color-blue {
362 --f7-theme-color-bg-color: #2196f3;
363}
364.border-color-blue {
365 --f7-theme-color-border-color: #2196f3;
366}
367.ripple-color-blue,
368.ripple-blue {
369 --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
370}
371.color-pink {
372 --f7-theme-color: #ff2d55;
373 --f7-theme-color-rgb: 255, 45, 85;
374 --f7-theme-color-shade: #ff0434;
375 --f7-theme-color-tint: #ff5676;
376}
377.text-color-pink {
378 --f7-theme-color-text-color: #ff2d55;
379}
380.bg-color-pink {
381 --f7-theme-color-bg-color: #ff2d55;
382}
383.border-color-pink {
384 --f7-theme-color-border-color: #ff2d55;
385}
386.ripple-color-pink,
387.ripple-pink {
388 --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
389}
390.color-yellow {
391 --f7-theme-color: #ffcc00;
392 --f7-theme-color-rgb: 255, 204, 0;
393 --f7-theme-color-shade: #d6ab00;
394 --f7-theme-color-tint: #ffd429;
395}
396.text-color-yellow {
397 --f7-theme-color-text-color: #ffcc00;
398}
399.bg-color-yellow {
400 --f7-theme-color-bg-color: #ffcc00;
401}
402.border-color-yellow {
403 --f7-theme-color-border-color: #ffcc00;
404}
405.ripple-color-yellow,
406.ripple-yellow {
407 --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
408}
409.color-orange {
410 --f7-theme-color: #ff9500;
411 --f7-theme-color-rgb: 255, 149, 0;
412 --f7-theme-color-shade: #d67d00;
413 --f7-theme-color-tint: #ffa629;
414}
415.text-color-orange {
416 --f7-theme-color-text-color: #ff9500;
417}
418.bg-color-orange {
419 --f7-theme-color-bg-color: #ff9500;
420}
421.border-color-orange {
422 --f7-theme-color-border-color: #ff9500;
423}
424.ripple-color-orange,
425.ripple-orange {
426 --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
427}
428.color-purple {
429 --f7-theme-color: #9c27b0;
430 --f7-theme-color-rgb: 156, 39, 176;
431 --f7-theme-color-shade: #7e208f;
432 --f7-theme-color-tint: #b92fd1;
433}
434.text-color-purple {
435 --f7-theme-color-text-color: #9c27b0;
436}
437.bg-color-purple {
438 --f7-theme-color-bg-color: #9c27b0;
439}
440.border-color-purple {
441 --f7-theme-color-border-color: #9c27b0;
442}
443.ripple-color-purple,
444.ripple-purple {
445 --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
446}
447.color-deeppurple {
448 --f7-theme-color: #673ab7;
449 --f7-theme-color-rgb: 103, 58, 183;
450 --f7-theme-color-shade: #563098;
451 --f7-theme-color-tint: #7c52c8;
452}
453.text-color-deeppurple {
454 --f7-theme-color-text-color: #673ab7;
455}
456.bg-color-deeppurple {
457 --f7-theme-color-bg-color: #673ab7;
458}
459.border-color-deeppurple {
460 --f7-theme-color-border-color: #673ab7;
461}
462.ripple-color-deeppurple,
463.ripple-deeppurple {
464 --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
465}
466.color-lightblue {
467 --f7-theme-color: #5ac8fa;
468 --f7-theme-color-rgb: 90, 200, 250;
469 --f7-theme-color-shade: #32bbf9;
470 --f7-theme-color-tint: #82d5fb;
471}
472.text-color-lightblue {
473 --f7-theme-color-text-color: #5ac8fa;
474}
475.bg-color-lightblue {
476 --f7-theme-color-bg-color: #5ac8fa;
477}
478.border-color-lightblue {
479 --f7-theme-color-border-color: #5ac8fa;
480}
481.ripple-color-lightblue,
482.ripple-lightblue {
483 --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
484}
485.color-teal {
486 --f7-theme-color: #009688;
487 --f7-theme-color-rgb: 0, 150, 136;
488 --f7-theme-color-shade: #006d63;
489 --f7-theme-color-tint: #00bfad;
490}
491.text-color-teal {
492 --f7-theme-color-text-color: #009688;
493}
494.bg-color-teal {
495 --f7-theme-color-bg-color: #009688;
496}
497.border-color-teal {
498 --f7-theme-color-border-color: #009688;
499}
500.ripple-color-teal,
501.ripple-teal {
502 --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
503}
504.color-lime {
505 --f7-theme-color: #cddc39;
506 --f7-theme-color-rgb: 205, 220, 57;
507 --f7-theme-color-shade: #bac923;
508 --f7-theme-color-tint: #d6e25c;
509}
510.text-color-lime {
511 --f7-theme-color-text-color: #cddc39;
512}
513.bg-color-lime {
514 --f7-theme-color-bg-color: #cddc39;
515}
516.border-color-lime {
517 --f7-theme-color-border-color: #cddc39;
518}
519.ripple-color-lime,
520.ripple-lime {
521 --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
522}
523.color-deeporange {
524 --f7-theme-color: #ff6b22;
525 --f7-theme-color-rgb: 255, 107, 34;
526 --f7-theme-color-shade: #f85200;
527 --f7-theme-color-tint: #ff864b;
528}
529.text-color-deeporange {
530 --f7-theme-color-text-color: #ff6b22;
531}
532.bg-color-deeporange {
533 --f7-theme-color-bg-color: #ff6b22;
534}
535.border-color-deeporange {
536 --f7-theme-color-border-color: #ff6b22;
537}
538.ripple-color-deeporange,
539.ripple-deeporange {
540 --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
541}
542.color-gray {
543 --f7-theme-color: #8e8e93;
544 --f7-theme-color-rgb: 142, 142, 147;
545 --f7-theme-color-shade: #79797f;
546 --f7-theme-color-tint: #a3a3a7;
547}
548.text-color-gray {
549 --f7-theme-color-text-color: #8e8e93;
550}
551.bg-color-gray {
552 --f7-theme-color-bg-color: #8e8e93;
553}
554.border-color-gray {
555 --f7-theme-color-border-color: #8e8e93;
556}
557.ripple-color-gray,
558.ripple-gray {
559 --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
560}
561.color-white {
562 --f7-theme-color: #ffffff;
563 --f7-theme-color-rgb: 255, 255, 255;
564 --f7-theme-color-shade: #ebebeb;
565 --f7-theme-color-tint: #ffffff;
566}
567.text-color-white {
568 --f7-theme-color-text-color: #ffffff;
569}
570.bg-color-white {
571 --f7-theme-color-bg-color: #ffffff;
572}
573.border-color-white {
574 --f7-theme-color-border-color: #ffffff;
575}
576.ripple-color-white,
577.ripple-white {
578 --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
579}
580.color-black {
581 --f7-theme-color: #000000;
582 --f7-theme-color-rgb: 0, 0, 0;
583 --f7-theme-color-shade: #000000;
584 --f7-theme-color-tint: #141414;
585}
586.text-color-black {
587 --f7-theme-color-text-color: #000000;
588}
589.bg-color-black {
590 --f7-theme-color-bg-color: #000000;
591}
592.border-color-black {
593 --f7-theme-color-border-color: #000000;
594}
595.ripple-color-black,
596.ripple-black {
597 --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
598}
599@font-face {
600 font-family: 'framework7-core-icons';
5d51ea26 601 src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAz4ABAAAAAAGNgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAM3AAAABkAAAAciZuB7UdERUYAAArUAAAAIwAAACQAfQBXR1BPUwAADKwAAAAuAAAANuAY7+xHU1VCAAAK+AAAAbMAAAQuAxQJ5U9TLzIAAAHcAAAASgAAAGBRKF+WY21hcAAAAogAAACIAAABYt6F0cBjdnQgAAADEAAAAAQAAAAEABEBRGdhc3AAAArMAAAACAAAAAj//wADZ2x5ZgAAA6gAAAR1AAAJzOg6B0doZWFkAAABbAAAADAAAAA2FLiY/WhoZWEAAAGcAAAAIAAAACQHgQM9aG10eAAAAigAAABeAAABJC9JAAJsb2NhAAADFAAAAJQAAACUReRIiG1heHAAAAG8AAAAHwAAACAAjwBLbmFtZQAACCAAAAFSAAAC2WG9Sh5wb3N0AAAJdAAAAVYAAAJ2B5LxL3jaY2BkYGAA4r3NMlLx/DZfGbiZGEDgxtw1DjD6/49/vSxpTJ+BXA4GsDQARmkM0njaY2BkYGD6/K+XQY8l7f8PBgaWNAagCArwBACRVQXFeNpjYGRgYPBkkGJgYQABJiBmZACJOTDogQQADbgA2wB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPabPjMUwNYwHwEoUGMQAQ7UMZAAAeNpj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wKxExCfBWIJoNzZ/z8Y3YBsF6g4kM2UBpFjBNJMQD0Mu4FsY4jZTGch5jAZQ8QBlR0UZwAAeNpjYGBgZoBgGQZGBhCIAfIYwXwWBgcgzcPAwcAEZCsw6DJYMsQzVP3/DxQF8QyAvMT///8//n/9/9X/G/6vh5oAB4xsDHAhRiYgwcSApgBiNRywMDCwsrFzcHJx8/DyMRAD+BkEBIWERUTFxCUkpaRlZOXkFRSVlFVU1dQ1NBkGAwAAxH4T6AARAUQAAAAqACoAKgA0AD4ASABSAFwAZgBwAHoAhACOAJgAogCsALYAwADKANQA3gDoAPIA/AEGARABGgEkAS4BOAFCAUwBVgFgAWoBdAF+AYgBkgGcAaYBsgHeAgACKgI8AlICZAKEApQCpALWAuwC/gMeAzADQgNgA3IDlgO0A8QD6gP8BBYEKgRKBFwEbgSWBKwExgTmeNrtVc9vG0UUfm8de9y43rVje204lNjZ7AYBKcna3lKcxCIJhwgCqhIIuTSpKp8CaoRsbnZujSosI5QqitVbpCLBKT8EUiUSwyW9mEoWB4RyChKpEJxyoVKz5s2sDXH6H6BKM34z387OfvO9741BgiAAbOAsuIDB4BbC5cw264K/hrc87sPMtkuiIWy5OOzm8Dbz4NPMNnLcDJpBwwz2BVc/y+Vw1v4miCbthtRqotMoOMTHz7Hn2P8ek85gLkLfkAQMXdQv4Ps4TxWmQASiAD0JT1gdTif1YTXsSehJt2UoGLWMr2cymZnMvaWpqaUpHPffkuVleRmzmZmRkZkPpjj8RL7l56DDofkDmvSRHoD+hCLxncbQ0JPp4ZdQRQMRf/P1qr79fZ8a9x0p25J05FN7fXv7HD1SHM7NY6zhfboHXqBdosxIGZ6+BN9DjYRZNMFZElvMrugrbHBscnHxzo0B9u3CxMTCeHlFL0XYwOKdxcXJ0UE2vjA+viB4gQ57dF43QIjRltZeoaBVq5gWAVrcT7CKZfDSVyNxvijKsGo/rGj1ulb5NenE1lrw4494k+9nYRQNq4KKZtcr2mwrAjafkBavkBZ0n1npMST6YZKUy3sZdTfSyenMe3v8/EfKI3QdcU1o7ijBvxGGA4ezRWQM62BTK5W07+i32N/5PEVUo6z1uL9Y0oSOdrkrJ52Aj+e336AFUYsyahlSryYFerTerp6AJGUP0gft9qb9k326vo4uHEbX+vofB1b7kfX08F/YPuXLntWMC0b3r4VVrpP5RY0HvEICtjXL4ruYBQ9NomyIVuPL2uGyRhiFvnecNUv4FuoQoBGXS2gl3GOlMSmzVaZSl1VvPu9FXeYTjsksn2fizDCPdXqf/3fACMYj7lQ8gnXbxPqJaW6YpuBcwxjlhXTrR64rxpoQe/w4VnMC8Wj+DR/Bz/gayACUuaiqoIzExEpHpxa6A4Huj90hz1W/rFz8/Eul26d85UWWVS76ZecM1/Ft4sC9Ri5ixqZIDOoigONxUHGCcuen6gNK3hmHe1r+/nMuNKe9bk1PfzK9NTc6Oje68mFo7hLNpq2hq2Mc6dSLO4yKTNiL8cLrEEuV19tSFQqEdfIkEcgbDs/rm1qxqIk6LEs5PCElQwDJAJELeBJI52k7adfe3bWh+WIu125ZhJ2dJuzgxhkQOjVPIfcqQuz4OFbDluLtmsrhp+RXQCaEE7QwV6lo7YbvnZnwd+yaVJVq3FMWec+8gL/Xj+2afb8smaci7e29L8EDvMF1Sjue+q8gH3TaaDDgXfWGqQdUx1XO+5N0r+nCu8K6FpqPbvZc+x7DIpy/Y/jtYdDNouXzOE+hUGjlvTkv1SUdLvC8k6YmF7UvETpTnY21u43G3bW1YrpIrcR/X8WBRsP+pYH3SlaxaJXE7/n6E9+Mp+JGnded/RCvVLDMh0lRfy7OTzKJH68N0jiYcqqDdy6W00mZ5Ipo53ULOPbiNelc6mSs24zd9jqWwmvP6PYPnHjkAAAAAHjarZC9TsMwFIWP+yfBgBjI7rGtmsjx0p+RSl26IIbsITWt1Sau3EhVxcuwsTGy8RQsTOx9C65dDwwdGBrpyl+Oz7XPNYAbvIPh9HXxGJghwlvgBq7xFbiJlN0HbiFir4HbuGXfgTuIGhE5WeuK/h58l2OGPl4CN3CHz8BNPOEncAt9Vgdug7OPwB3Sj5jCYIsDLDSWWKEGp8wFerRKCKQYY0CcYYMcC3KVVJaUOblzIqeXdIb2u5ia7cHq5arm3aLHpUjHA55t8oUuteXzVW43ebnVC3I+U7NrVdhTCIs1hojpaseKSHuusCOrzUu1N3Y9jAtjVawLU5F81vvXMPNi7VdL8yk/VUJzcUyo/h/h5JcYkSp9nd4GM1PVM2OXistE8Ak/G5V0OYpl7J7jEoNn5LO0r72PUxaXJvGrmw2ZsjttKi5Emggh+AUu/QVMMIYbAAB42m2QCU/CQBSEZ8ADECzIJXj+FuN937dpartKI3TJdjn+vNGFUqGJmzTpvm/evNmHFMbn5xvEf+fIfEQKaRRRRgVV1FDHKhpoYg3r2MEu9rCPAxwa7TFOcIoznOMCl7jCNW5wizvc4wGPeMIzXvCKN6aY5hznucBFZphljkvMs8BlWiyyxBWWWWGVNda5ygabXOM6N7jJLW7nQuEot2X7Miy5LdFXMrCV/9nSo0p2AjueFbO2+NDmXnCUkoP4tmSo+/Uuh+a/mFAak0LCNj+La4HU/ofvOto3FbctQzHqsCLzd6m17BjLrHI8X45IOe725CCwnZ6SylkMpRqHCAd+Vyg7EENt/QWKNLm4r9ctTN4UgdIUTCr52RGWJ9pCC1vJXuDNzOgq0c9OmFlGVys7yjybcbyAqWmUxwiKyT2blSWmGMVyZBbzzPiFpl5JdkbevxMrvisAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQYPIJsFLMYAAA12ANUAeNp1UklOAkEUfUV3Ao4goHSUQQbBIM6z4qxoPIMbNhoT4sIQD+DCMxjjOVx6BuMRjAtvge9XAz2FdLqr+r1X/7/6/0MBGEYWNahWs/2ACEwi6HQgjGrd3zWJwf4jZ+o1AmX8IowknkLt0LdhGiWjDoP4PBrYQBR5PlmUuZvgWuSTRZp/aSSoGHfxeViYQooKm13CmIudYY7JPhfFLK7xiDd84keZqqwa6lY9q3f1ob7UH66oTvGd0+czvugxlDSe5+6U0bxKJ5NbtxXQJbSzjE9X5z29uhJyPs1CQON2ZxErYIW6Qb5sxXlA4a/gItdBMYTf7fJxTOvuVHw+V9mBQRnOMBo4a/ta6zLBrAcBplfDZYwEoonDPc5ksJoyX1X2/4Iekzp6kW9Ua0pUJfpeDrkbpJD4xxjy8ILJdK/zljKtFn1bdBXTe9tBnHqJnexnkRMnrFWR8aWCztQ6/CYzxRhdkB4eJlJjH284yS94xT5jJPX5OG/t7cURK1TmuRwVkiXHr9Rlx4dnuFbopMrKuWPZGWv6vg4q971kNSWHM1nbdNZD7IqI0zh3GZ238A+0lkTEAHjaY2BkYGDgYpBjMGFgzEksyWPgYGABijD8/88AkmEszqxKhYp9YIADAMCOBtEAAHjaY2BgYGQAghsJmjlgeu4aBxgNAELpBpEAAAA=") format("woff");
5309fbda
DC
602 font-weight: 400;
603 font-style: normal;
604}
605@font-face {
606 font-family: 'framework7-skeleton';
607 src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAYQAA0AAAAAEcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAF9AAAABkAAAAciVvoDU9TLzIAAAGcAAAASwAAAGBRtV1jY21hcAAAAfwAAAC8AAABamglddJjdnQgAAACuAAAAAQAAAAEABEBRGdhc3AAAAXsAAAACAAAAAj //wADZ2x5ZgAAA2wAAACUAAAJjHCzhiRoZWFkAAABMAAAAC4AAAA2ERr/HWhoZWEAAAFgAAAAGgAAACQC8ADFaG10eAAAAegAAAATAAAAtAMAABFsb2NhAAACvAAAAK4AAACuaNBmhG1heHAAAAF8AAAAHwAAACAAmgA5bmFtZQAABAAAAAFQAAACuLf6wytwb3N0AAAFUAAAAJkAAADOCKMIc3jaY2BkYGAA4lUx8ibx/DZfGbiZGEDgRu39AAT9/wAjA+MBIJeDASwNACBICpsAAHjaY2BkYGA88P8Agx6QAQSMYIQCWABQZgK3AAB42mNgZGBgCGPgYGBiAAEQycgAEnNg0AMJAAANJwDUAHjaY2BhZGCcwMDKwMDow5jGwMDgDqW/MkgytDAwMDGwcjLAACMDEghIc01haGBQYKhlPPD/AIMe4wEGB5gaxgNAHgNQjhEA6dgLvQB42mNkYBBkAAJGKB4KAAAOfQAVAHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMSgxWDNEMsQz1D7/z9QXIFBjUGHwRHIT/z////j/w/+3/9/6//N/zeg5iABRjYGuCAjE5BgQlcAdAILK5DBxs7BycXAzcPLxy8gKCQsIiomLiEpBVYjLSMrJ6+gqKSsoqqmrqGppa2jq6dvYGhkbGJqZs5gwWBpZW1ja2fv4Ojk7OLq5u7h6eXt4+vnHxAYFBwSyjDgAABJLiG7ABEBRAAAACoAKgAqADgARgBUAGIAcAB+AIwAmgCoALYAxADYAOYA9AECARABHgEsAToBSAFWAWQBcgGAAY4BnAGqAbgBxgHUAeIB8AH+AgwCGgIoAjYCRAJSAmACbgJ8AooCmAKmArQCwgLQAt4C8gMAAw4DHAMqAzgDRgNUA2IDcAN+A4wDmgOoA7YDxAPSA+AD7gP8BAoEGAQmBDQEQgRQBF4EbAR6BIgEnASqBLgExgAAeNpjYGIQZGBgmMkYysDMwM6gt5GRQd9mEzsLw1ujjWysd2w2MTMBmQwbmUHCrCDhTexsjH9sNjGCxI0FjQXVjQWVBTvK09IYQ/+tFmQ0BprGyMDw/wAjA+MBoJkMooKKgowMDkwM/xgYRuVwyjEhybFDZBXBKv4zQFVBVI6G36jcqNyo3GiZMSo3Kjes8hQAx51w5njapZC9agJBFIXP+EfSBMEXmEoU3GVcBNFWsLEJKbYKhEUnOrjryrggkgfIQ6RMnzZVHiBNijxM6pydHUiRFAEXLvebc8+duXcBXOEFAtXXw41ngQ6ePddwgXfPdYRCeW6gIx49N9EWb55b1L/oFI1Lnq5dV8kCXTx4rqGNV8913OLTcwNdcee5CSmePLeof2CGHHucYGGwxgYFJGdeos8cQWGICQbkGCkSrOjKGJbKgu6EVOoZ7zCuilm+P1mz3hSyt+zLSA0nAxmnycpkxsrFJrFpku3Nis57NpetGkcOYbHFGAEOzJqXao6SY0ebTTJ9zO12HBy2OtVFTvGX66c0d0LhsuVO2m0ScheJKeN/z1beESuRi+pPYJ7vinlu11pGoZJT+cdwVEdBFJSbn7djzLql1/iBlBsidLlcBrG2B8MHlRqGSil51nPfEi6AO3jaXc5ZM4IBAEbhp9RF1FhCRbmyVNYskSXG0CaEQvaf2j/LN112bt6Zc/HOETZiOJAJJmSc15ENmxARFTNpSlzCtBmz5iTNW7AoJR08LFmWlbNi1Zp1G/IKijZt2bZj156SfQcOHSk7dqLi1JlzF6ouXbl241ZNXUNTy522ew8edTx59qKrF3S9edf34dOXbz9+/f0DgycTFgAAAAAAAAH//wACeNpjYGBgZACCGwmaOWC69n4AjAYARC0G1wAAAA==") format("woff");
608 font-weight: 300, 400, 500, 600, 700;
609 font-style: normal, italic;
610}
611html,
612body,
613.framework7-root {
614 position: relative;
615 height: 100%;
616 width: 100%;
617 overflow-x: hidden;
618}
619body {
620 margin: 0;
621 padding: 0;
622 width: 100%;
623 background: #fff;
624 overflow: hidden;
625 -webkit-text-size-adjust: 100%;
626 -webkit-font-smoothing: antialiased;
627 font-family: var(--f7-font-family);
628 font-size: var(--f7-font-size);
629 line-height: var(--f7-line-height);
630 color: var(--f7-text-color);
631}
632.theme-dark {
633 color: var(--f7-text-color);
634}
635.framework7-root {
636 overflow: hidden;
637 box-sizing: border-box;
638}
639.framework7-initializing *,
640.framework7-initializing *:before,
641.framework7-initializing *:after {
642 transition-duration: 0ms !important;
643}
644.device-ios,
645.device-android {
646 cursor: pointer;
647}
648.device-ios {
649 touch-action: manipulation;
650}
651@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
652 html,
653 body,
654 .framework7-root {
655 height: 671px;
656 }
657}
658@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
659 html,
660 body,
661 .framework7-root {
662 height: 672px;
663 }
664}
665* {
666 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
667 -webkit-touch-callout: none;
668}
669a,
670input,
671textarea,
672select {
673 outline: 0;
674}
675a {
676 cursor: pointer;
677 text-decoration: none;
678 color: var(--f7-theme-color);
679}
5d51ea26
DC
680.link,
681.item-link {
682 cursor: pointer;
683}
5309fbda
DC
684p {
685 margin: 1em 0;
686}
687.disabled {
688 opacity: 0.55 !important;
689 pointer-events: none !important;
690}
691html.device-full-viewport,
692html.device-full-viewport body {
693 height: 100vh;
694}
695.ios .md-only,
5d51ea26
DC
696.ios .if-md,
697.ios .aurora-only,
698.ios .if-aurora,
699.ios .if-not-ios,
700.ios .not-ios {
5309fbda
DC
701 display: none !important;
702}
703@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
704 .ios,
705 .ios body,
706 .ios .framework7-root {
707 height: 671px;
708 }
709}
710@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
711 .ios,
712 .ios body,
713 .ios .framework7-root {
714 height: 672px;
715 }
716}
717.md .ios-only,
5d51ea26
DC
718.md .if-ios,
719.md .aurora-only,
720.md .if-aurora,
721.md .if-not-md,
722.md .not-md {
723 display: none !important;
724}
725.aurora .ios-only,
726.aurora .if-ios,
727.aurora .md-only,
728.aurora .if-md,
729.aurora .if-not-aurora,
730.aurora .not-aurora {
5309fbda
DC
731 display: none !important;
732}
733/* === Statusbar === */
734:root {
735 --f7-statusbar-height: 0px;
736 --f7-statusbar-bg-color: var(--f7-bars-bg-color);
737}
738.device-ios {
739 --f7-statusbar-height: var(--f7-safe-area-top, 20px);
740}
741.device-android {
742 --f7-statusbar-height: var(--f7-safe-area-top, 24px);
743}
744.with-statusbar.ios:not(.device-ios):not(.device-android) {
745 --f7-statusbar-height: 20px;
746}
747.with-statusbar.md:not(.device-ios):not(.device-android) {
748 --f7-statusbar-height: 24px;
749}
750@supports not (top: env(safe-area-inset-top)) {
751 .with-statusbar.device-ios {
752 --f7-statusbar-height: 20px;
753 }
754}
755@supports not (top: env(safe-area-inset-top)) {
756 .with-statusbar.device-android {
757 --f7-statusbar-height: 24px;
758 }
759}
760.statusbar {
761 position: absolute;
762 left: 0;
763 top: 0;
764 width: 100%;
765 z-index: 10000;
766 box-sizing: border-box;
767 display: block;
768 height: var(--f7-statusbar-height);
5d51ea26 769 background: var(--f7-statusbar-bg-color, var(--f7-bars-bg-color));
5309fbda
DC
770}
771.framework7-root {
772 padding-top: var(--f7-statusbar-height);
773}
5309fbda
DC
774/* === Views === */
775.views,
776.view {
777 position: relative;
778 height: 100%;
779 z-index: 5000;
780 overflow: hidden;
781 box-sizing: border-box;
782}
5d51ea26
DC
783.framework7-root > .view,
784.framework7-root > .views {
785 height: calc(100% - var(--f7-appbar-app-offset, 0px));
786}
5309fbda
DC
787/* === Pages === */
788:root {
789 --f7-page-master-width: 320px;
790 --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
791 --f7-page-master-border-width: 1px;
5d51ea26
DC
792 --f7-page-swipeback-transition-duration: 400ms;
793 /*
794 --f7-page-content-extra-padding-top: 0px;
795 --f7-page-content-extra-padding-bottom: 0px;
796 */
5309fbda
DC
797}
798.ios {
799 --f7-page-bg-color: #efeff4;
800 --f7-page-transition-duration: 400ms;
5309fbda
DC
801}
802.md {
803 --f7-page-bg-color: #fff;
804 --f7-page-transition-duration: 250ms;
5d51ea26
DC
805}
806.aurora {
807 --f7-page-bg-color: #f3f3f3;
808 --f7-page-transition-duration: 400ms;
5309fbda
DC
809}
810.theme-dark {
811 --f7-page-bg-color: #171717;
812 --f7-page-master-border-color: rgba(255, 255, 255, 0.1);
813}
814.pages {
815 position: relative;
816 width: 100%;
817 height: 100%;
818 overflow: hidden;
819}
820.page {
821 box-sizing: border-box;
822 position: absolute;
823 left: 0;
824 top: 0;
825 width: 100%;
826 height: 100%;
5d51ea26 827 transform: none;
5309fbda 828 background-color: var(--f7-page-bg-color);
5d51ea26 829 z-index: 1;
5309fbda
DC
830}
831.page.stacked {
832 display: none;
833}
834.page-with-navbar-large-collapsed {
835 --f7-navbar-large-collapse-progress: 1;
836}
837.page-previous {
838 pointer-events: none;
839}
840.page-content {
841 will-change: scroll-position;
842 overflow: auto;
843 -webkit-overflow-scrolling: touch;
844 box-sizing: border-box;
845 height: 100%;
846 position: relative;
847 z-index: 1;
5d51ea26
DC
848 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));
849 padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
5309fbda
DC
850}
851.page-transitioning,
852.page-transitioning .page-shadow-effect,
853.page-transitioning .page-opacity-effect {
854 transition-duration: var(--f7-page-transition-duration);
855}
856.page-transitioning-swipeback,
857.page-transitioning-swipeback .page-shadow-effect,
858.page-transitioning-swipeback .page-opacity-effect {
859 transition-duration: var(--f7-page-swipeback-transition-duration);
860}
861.router-transition-forward .page-next,
862.router-transition-backward .page-next,
863.router-transition-forward .page-current,
864.router-transition-backward .page-current,
865.router-transition-forward .page-previous:not(.stacked),
866.router-transition-backward .page-previous:not(.stacked) {
867 pointer-events: none;
868}
869.page-shadow-effect {
870 position: absolute;
871 top: 0;
872 width: 16px;
873 bottom: 0;
874 z-index: -1;
875 content: '';
876 opacity: 0;
877 right: 100%;
878 background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
879}
880.page-opacity-effect {
881 position: absolute;
882 left: 0;
883 top: 0;
884 background: rgba(0, 0, 0, 0.1);
885 width: 100%;
886 bottom: 0;
887 content: '';
888 opacity: 0;
889 z-index: 10000;
890}
891.ios .page-previous {
892 transform: translate3d(-20%, 0, 0);
893}
894.ios .page-next {
895 transform: translate3d(100%, 0, 0);
896}
897.ios .page-previous .page-opacity-effect {
898 opacity: 1;
899}
900.ios .page-previous:after {
901 opacity: 1;
902}
903.ios .page-current .page-shadow-effect {
904 opacity: 1;
905}
906.ios .router-transition-forward .page-next,
907.ios .router-transition-forward .page-current {
908 will-change: transform;
909}
910.ios .router-transition-forward .page-next {
911 animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
912}
913.ios .router-transition-forward .page-next:before {
914 position: absolute;
915 top: 0;
916 width: 16px;
917 bottom: 0;
918 z-index: -1;
919 content: '';
920 opacity: 0;
921 right: 100%;
922 background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
923 animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
924}
925.ios .router-transition-forward .page-current {
926 animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
927}
928.ios .router-transition-forward .page-current:after {
929 position: absolute;
930 left: 0;
931 top: 0;
932 background: rgba(0, 0, 0, 0.1);
933 width: 100%;
934 bottom: 0;
935 content: '';
936 opacity: 0;
937 z-index: 10000;
938 animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
939}
940.ios .router-transition-backward .page-previous,
941.ios .router-transition-backward .page-current {
942 will-change: transform;
943}
944.ios .router-transition-backward .page-previous {
945 animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
946}
947.ios .router-transition-backward .page-previous:after {
948 position: absolute;
949 left: 0;
950 top: 0;
951 background: rgba(0, 0, 0, 0.1);
952 width: 100%;
953 bottom: 0;
954 content: '';
955 opacity: 0;
956 z-index: 10000;
957 animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
958}
959.ios .router-transition-backward .page-current {
960 animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
961}
962.ios .router-transition-backward .page-current:before {
963 position: absolute;
964 top: 0;
965 width: 16px;
966 bottom: 0;
967 z-index: -1;
968 content: '';
969 opacity: 0;
970 right: 100%;
971 background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
972 animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
973}
974.ios .router-dynamic-navbar-inside .page-shadow-effect,
975.ios .router-dynamic-navbar-inside .page-opacity-effect {
976 top: var(--f7-navbar-height);
977}
978.ios .router-dynamic-navbar-inside .page-next:before,
979.ios .router-dynamic-navbar-inside .page-current:after,
980.ios .router-dynamic-navbar-inside .page-current:before,
981.ios .router-dynamic-navbar-inside .page-previous:after {
982 top: var(--f7-navbar-height);
983}
984@keyframes ios-page-next-to-current {
985 from {
986 transform: translate3d(100%, 0, 0);
987 }
988 to {
989 transform: translate3d(0%, 0, 0);
990 }
991}
992@keyframes ios-page-previous-to-current {
993 from {
994 transform: translate3d(-20%, 0, 0);
995 }
996 to {
997 transform: translate3d(0%, 0, 0);
998 }
999}
1000@keyframes ios-page-current-to-previous {
1001 from {
1002 transform: translate3d(0, 0, 0);
1003 }
1004 to {
1005 transform: translate3d(-20%, 0, 0);
1006 }
1007}
1008@keyframes ios-page-current-to-next {
1009 from {
1010 transform: translate3d(0, 0, 0);
1011 }
1012 to {
1013 transform: translate3d(100%, 0, 0);
1014 }
1015}
1016@keyframes ios-page-element-fade-in {
1017 from {
1018 opacity: 0;
1019 }
1020 to {
1021 opacity: 1;
1022 }
1023}
1024@keyframes ios-page-element-fade-out {
1025 from {
1026 opacity: 1;
1027 }
1028 to {
1029 opacity: 0;
1030 }
1031}
1032.md .page-next {
1033 transform: translate3d(0, 56px, 0);
1034 opacity: 0;
1035 pointer-events: none;
1036}
1037.md .page-next.page-next-on-right {
1038 transform: translate3d(100%, 0, 0);
1039}
1040.md .router-transition-forward .page-next {
1041 will-change: transform, opacity;
1042 animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
1043}
1044.md .router-transition-forward .page-current {
1045 animation: none;
1046}
1047.md .router-transition-backward .page-current {
1048 will-change: transform, opacity;
1049 animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
1050}
1051.md .router-transition-backward .page-previous {
1052 animation: none;
1053}
1054@keyframes md-page-next-to-current {
1055 from {
1056 transform: translate3d(0, 56px, 0);
1057 opacity: 0;
1058 }
1059 to {
1060 transform: translate3d(0, 0px, 0);
1061 opacity: 1;
1062 }
1063}
1064@keyframes md-page-current-to-next {
1065 from {
1066 transform: translate3d(0, 0, 0);
1067 opacity: 1;
1068 }
1069 to {
1070 transform: translate3d(0, 56px, 0);
1071 opacity: 0;
1072 }
1073}
5d51ea26
DC
1074.aurora .page-next {
1075 pointer-events: none;
1076 transform: translate3d(100%, 0px, 0);
1077}
1078.aurora .page-next.page-next-on-right {
1079 transform: translate3d(100%, 0, 0);
1080}
1081.aurora .page-previous .page-opacity-effect {
1082 opacity: 1;
1083}
1084.aurora .page-previous:after {
1085 opacity: 1;
1086}
1087.aurora .router-transition-forward .page-next {
1088 will-change: transform;
1089 animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
1090}
1091.aurora .router-transition-forward .page-current {
1092 animation: none;
1093}
1094.aurora .router-transition-forward .page-current:after {
1095 position: absolute;
1096 left: 0;
1097 top: 0;
1098 background: rgba(0, 0, 0, 0.1);
1099 width: 100%;
1100 bottom: 0;
1101 content: '';
1102 opacity: 0;
1103 z-index: 10000;
1104 animation: aurora-page-element-fade-in var(--f7-page-transition-duration) forwards;
1105}
1106.aurora .router-transition-backward .page-current {
1107 will-change: transform, opacity;
1108 animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
1109}
1110.aurora .router-transition-backward .page-previous {
1111 animation: none;
1112}
1113.aurora .router-transition-backward .page-previous:after {
1114 position: absolute;
1115 left: 0;
1116 top: 0;
1117 background: rgba(0, 0, 0, 0.1);
1118 width: 100%;
1119 bottom: 0;
1120 content: '';
1121 opacity: 0;
1122 z-index: 10000;
1123 animation: aurora-page-element-fade-out var(--f7-page-transition-duration) forwards;
1124}
1125@keyframes aurora-page-next-to-current {
1126 from {
1127 transform: translate3d(100%, 0, 0);
1128 }
1129 to {
1130 transform: translate3d(0, 0px, 0);
1131 }
1132}
1133@keyframes aurora-page-current-to-next {
1134 from {
1135 transform: translate3d(0, 0, 0);
1136 }
1137 to {
1138 transform: translate3d(100%, 0, 0);
1139 }
1140}
1141@keyframes aurora-page-element-fade-in {
1142 from {
1143 opacity: 0;
1144 }
1145 to {
1146 opacity: 1;
1147 }
1148}
1149@keyframes aurora-page-element-fade-out {
1150 from {
1151 opacity: 1;
1152 }
1153 to {
1154 opacity: 0;
1155 }
1156}
5309fbda
DC
1157.view:not(.view-master-detail) .page-master-stacked {
1158 display: none;
1159}
1160.view:not(.view-master-detail) .navbar-master-stacked {
1161 display: none;
1162}
1163.view-master-detail .page-master,
1164.view-master-detail .navbar-master {
1165 width: var(--f7-page-master-width);
1166 --f7-safe-area-right: 0px;
1167 --f7-safe-area-outer-right: 0px;
1168 border-right: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
1169}
1170.view-master-detail .page-master-detail,
1171.view-master-detail .navbar-master-detail {
1172 width: calc(100% - var(--f7-page-master-width));
1173 --f7-safe-area-left: 0px;
1174 --f7-safe-area-outer-left: 0px;
1175 left: var(--f7-page-master-width);
1176}
1177.view-master-detail .page-master {
5d51ea26 1178 z-index: 2;
5309fbda
DC
1179 transform: none;
1180 pointer-events: auto;
1181}
1182.view-master-detail .page-master:before,
1183.view-master-detail .page-master:after {
1184 display: none;
1185}
1186.view-master-detail.router-transition .page-master {
1187 animation: none;
1188}
1189/* === Link === */
1190:root {
1191 --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
1192 --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
1193 --f7-link-highlight-color: var(--f7-link-highlight-black);
1194}
1195.theme-dark {
1196 --f7-link-highlight-color: var(--f7-link-highlight-white);
1197}
1198.link,
1199.tab-link {
1200 display: inline-flex;
1201 align-items: center;
1202 align-content: center;
1203 justify-content: center;
1204 position: relative;
1205 box-sizing: border-box;
1206 transform: translate3d(0, 0, 0);
1207 z-index: 1;
1208}
1209.link i + span,
1210.link i + i,
1211.link span + i,
1212.link span + span {
1213 margin-left: 4px;
1214}
1215.ios .link {
1216 transition: opacity 300ms;
1217}
1218.ios .link.active-state {
1219 opacity: 0.3;
1220 transition-duration: 0ms;
1221}
5d51ea26
DC
1222.aurora .link {
1223 transition: opacity 300ms;
1224}
1225.aurora .link.active-state {
1226 opacity: 0.3;
1227 transition-duration: 0ms;
1228}
5309fbda
DC
1229/* === Navbar === */
1230:root {
1231 /*
1232 --f7-navbar-bg-color: var(--f7-bars-bg-color);
1233 --f7-navbar-bg-image: var(--f7-bars-bg-image);
1234 --f7-navbar-border-color: var(--f7-bars-border-color);
1235 --f7-navbar-link-color: var(--f7-bars-link-color);
1236 --f7-navbar-text-color: var(--f7-bars-text-color);
1237 */
1238 --f7-navbar-hide-show-transition-duration: 400ms;
1239 --f7-navbar-title-line-height: 1.2;
5d51ea26
DC
1240 --f7-navbar-title-font-size: inherit;
1241 --f7-navbar-subtitle-text-align: inherit;
1242 --f7-navbar-large-title-line-height: 1.2;
1243 --f7-navbar-large-title-text-color: inherit;
5309fbda
DC
1244}
1245.ios {
1246 --f7-navbar-height: 44px;
1247 --f7-navbar-tablet-height: 44px;
1248 --f7-navbar-font-size: 17px;
1249 --f7-navbar-inner-padding-left: 8px;
1250 --f7-navbar-inner-padding-right: 8px;
1251 --f7-navbar-title-font-weight: 600;
1252 --f7-navbar-title-margin-left: 0;
1253 --f7-navbar-title-margin-right: 0;
1254 --f7-navbar-title-text-align: center;
1255 --f7-navbar-subtitle-text-color: #6d6d72;
1256 --f7-navbar-subtitle-font-size: 10px;
1257 --f7-navbar-subtitle-line-height: 1;
5309fbda
DC
1258 --f7-navbar-shadow-image: none;
1259 --f7-navbar-large-title-height: 52px;
1260 --f7-navbar-large-title-font-size: 34px;
1261 --f7-navbar-large-title-font-weight: 700;
5309fbda
DC
1262 --f7-navbar-large-title-letter-spacing: -0.03em;
1263 --f7-navbar-large-title-padding-left: 15px;
1264 --f7-navbar-large-title-padding-right: 15px;
5d51ea26
DC
1265 /*
1266 --f7-navbar-link-height: var(--f7-navbar-height);
1267 --f7-navbar-link-line-height: var(--f7-navbar-height);
1268 */
5309fbda
DC
1269}
1270.ios .theme-dark,
1271.ios.theme-dark {
1272 --f7-navbar-subtitle-text-color: #8e8e93;
1273}
1274.md {
1275 --f7-navbar-height: 56px;
1276 --f7-navbar-tablet-height: 64px;
1277 --f7-navbar-font-size: 20px;
1278 --f7-navbar-inner-padding-left: 0px;
1279 --f7-navbar-inner-padding-right: 0px;
1280 --f7-navbar-title-font-weight: 500;
1281 --f7-navbar-title-margin-left: 16px;
1282 --f7-navbar-title-margin-right: 16px;
1283 --f7-navbar-title-text-align: left;
1284 --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
1285 --f7-navbar-subtitle-font-size: 14px;
1286 --f7-navbar-subtitle-line-height: 1.2;
5309fbda
DC
1287 --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
1288 --f7-navbar-large-title-font-size: 34px;
1289 --f7-navbar-large-title-height: 56px;
1290 --f7-navbar-large-title-font-weight: 500;
5309fbda
DC
1291 --f7-navbar-large-title-letter-spacing: 0;
1292 --f7-navbar-large-title-padding-left: 16px;
1293 --f7-navbar-large-title-padding-right: 16px;
5d51ea26
DC
1294 /*
1295 --f7-navbar-link-height: var(--f7-navbar-height);
1296 --f7-navbar-link-line-height: var(--f7-navbar-height);
1297 */
5309fbda
DC
1298}
1299.md .theme-dark,
1300.md.theme-dark {
1301 --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
1302}
5d51ea26
DC
1303.aurora {
1304 --f7-navbar-height: 38px;
1305 --f7-navbar-tablet-height: 38px;
1306 --f7-navbar-font-size: 14px;
1307 --f7-navbar-inner-padding-left: 15px;
1308 --f7-navbar-inner-padding-right: 15px;
1309 --f7-navbar-title-font-weight: 600;
1310 --f7-navbar-title-margin-left: 0;
1311 --f7-navbar-title-margin-right: 0;
1312 --f7-navbar-title-text-align: center;
1313 --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
1314 --f7-navbar-subtitle-font-size: 12px;
1315 --f7-navbar-subtitle-line-height: 1;
1316 --f7-navbar-shadow-image: none;
1317 --f7-navbar-large-title-height: 38px;
1318 --f7-navbar-large-title-font-size: 26px;
1319 --f7-navbar-large-title-font-weight: bold;
1320 --f7-navbar-large-title-letter-spacing: -0.03em;
1321 --f7-navbar-large-title-padding-left: 15px;
1322 --f7-navbar-large-title-padding-right: 15px;
1323 --f7-navbar-link-height: auto;
1324 --f7-navbar-link-line-height: inherit;
1325}
1326.aurora .theme-dark,
1327.aurora.theme-dark {
1328 --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
1329}
5309fbda
DC
1330.navbar {
1331 --f7-navbar-large-collapse-progress: 0;
1332 position: relative;
1333 left: 0;
1334 top: 0;
1335 width: 100%;
1336 z-index: 500;
1337 -webkit-backface-visibility: hidden;
1338 backface-visibility: hidden;
1339 box-sizing: border-box;
1340 margin: 0;
1341 transform: translate3d(0, 0, 0);
1342 height: var(--f7-navbar-height);
1343 background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1344 background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
1345 color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
1346 font-size: var(--f7-navbar-font-size);
1347}
5309fbda
DC
1348.navbar b {
1349 font-weight: 500;
1350}
1351.navbar a {
1352 color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
1353}
1354.navbar a.link {
1355 display: flex;
1356 justify-content: flex-start;
5d51ea26
DC
1357 line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
1358 height: var(--f7-navbar-link-height, var(--f7-navbar-height));
5309fbda
DC
1359}
1360.navbar .title,
1361.navbar .left,
1362.navbar .right {
1363 position: relative;
1364 z-index: 10;
1365}
1366.navbar .title {
5309fbda
DC
1367 position: relative;
1368 overflow: hidden;
1369 text-overflow: ellipsis;
1370 white-space: nowrap;
1371 flex-shrink: 10;
1372 font-weight: var(--f7-navbar-title-font-weight);
1373 display: inline-block;
1374 line-height: var(--f7-navbar-title-line-height);
1375 text-align: var(--f7-navbar-title-text-align);
5d51ea26 1376 font-size: var(--f7-navbar-title-font-size);
5309fbda
DC
1377 margin-left: var(--f7-navbar-title-margin-left);
1378 margin-right: var(--f7-navbar-title-margin-left);
1379}
1380.navbar .subtitle {
1381 display: block;
1382 color: var(--f7-navbar-subtitle-text-color);
1383 font-weight: normal;
1384 font-size: var(--f7-navbar-subtitle-font-size);
1385 line-height: var(--f7-navbar-subtitle-line-height);
1386 text-align: var(--f7-navbar-subtitle-text-align);
1387}
1388.navbar .left,
1389.navbar .right {
1390 flex-shrink: 0;
1391 display: flex;
1392 justify-content: flex-start;
1393 align-items: center;
1394 transform: translate3d(0, 0, 0);
1395}
1396.navbar .right:first-child {
1397 position: absolute;
1398 height: 100%;
1399}
1400.navbar.no-hairline:after,
1401.navbar.no-border:after {
1402 display: none !important;
1403}
1404.navbar.no-hairline .title-large:after,
1405.navbar.no-border .title-large:after {
1406 display: none !important;
1407}
1408.navbar.no-shadow:before {
1409 display: none !important;
1410}
1411.navbar.navbar-hidden:before {
1412 opacity: 0 !important;
1413}
1414.navbar:after,
1415.navbar:before {
1416 -webkit-backface-visibility: hidden;
1417 backface-visibility: hidden;
1418}
1419.navbar:after {
1420 content: '';
1421 position: absolute;
1422 background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1423 display: block;
1424 z-index: 15;
1425 top: auto;
1426 right: auto;
1427 bottom: 0;
1428 left: 0;
1429 height: 1px;
1430 width: 100%;
1431 transform-origin: 50% 100%;
1432 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1433}
1434.navbar:before {
1435 content: '';
1436 position: absolute;
1437 right: 0;
1438 width: 100%;
1439 top: 100%;
1440 bottom: auto;
1441 height: 8px;
1442 pointer-events: none;
5d51ea26 1443 background: var(--f7-navbar-shadow-image);
5309fbda
DC
1444}
1445.navbar:after {
1446 z-index: 1;
1447}
1448@media (min-width: 768px) {
1449 :root {
1450 --f7-navbar-height: var(--f7-navbar-tablet-height);
1451 }
1452}
1453.navbar-transitioning,
1454.navbar-transitioning:before,
1455.navbar-transitioning .title,
1456.navbar-transitioning .title-large,
1457.navbar-transitioning .title-large-inner,
1458.navbar-transitioning .title-large-text,
1459.navbar-transitioning .subnavbar {
1460 transition-duration: var(--f7-navbar-hide-show-transition-duration);
1461}
1462.navbar-page-transitioning {
1463 transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1464}
1465.navbar-page-transitioning .title-large-text,
1466.navbar-page-transitioning .title-large-inner {
1467 transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1468}
1469.navbar-hidden {
1470 transform: translate3d(0, -100%, 0);
1471}
1472.navbar-large-hidden {
1473 --f7-navbar-large-collapse-progress: 1;
1474}
1475.navbar-inner {
1476 position: absolute;
1477 left: 0;
1478 top: 0;
1479 width: 100%;
1480 height: var(--f7-navbar-height);
1481 display: flex;
1482 align-items: center;
1483 box-sizing: border-box;
5d51ea26 1484 padding: 0 calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-left) + var(--f7-safe-area-left));
5309fbda
DC
1485}
1486.navbar-inner.stacked {
1487 display: none;
1488}
1489.views > .navbar,
1490.view > .navbar,
1491.page > .navbar {
1492 position: absolute;
1493}
1494.navbar-large:before {
1495 transform: translateY(calc((1 - var(--f7-navbar-large-collapse-progress)) * var(--f7-navbar-large-title-height)));
1496}
1497.navbar-inner-large > .title {
1498 opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress));
1499}
1500.navbar-large-collapsed,
1501.navbar-inner-large-collapsed {
1502 --f7-navbar-large-collapse-progress: 1;
1503}
1504.navbar .title-large {
1505 box-sizing: border-box;
1506 position: absolute;
1507 left: 0;
1508 right: 0;
1509 top: 100%;
1510 display: flex;
1511 align-items: center;
1512 white-space: nowrap;
1513 transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1514 will-change: transform, opacity;
1515 transition-property: transform;
1516 overflow: hidden;
1517 background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1518 background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
1519 height: calc(var(--f7-navbar-large-title-height) + 1px);
1520 z-index: 5;
1521 margin-top: -1px;
1522 transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
1523}
1524.navbar .title-large:after {
1525 content: '';
1526 position: absolute;
1527 background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1528 display: block;
1529 z-index: 15;
1530 top: auto;
1531 right: auto;
1532 bottom: 0;
1533 left: 0;
1534 height: 1px;
1535 width: 100%;
1536 transform-origin: 50% 100%;
1537 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1538}
1539.title-large-text,
1540.title-large-inner .title {
1541 text-overflow: ellipsis;
1542 white-space: nowrap;
1543 color: var(--f7-navbar-large-title-text-color);
1544 letter-spacing: var(--f7-navbar-large-title-letter-spacing);
1545 font-size: var(--f7-navbar-large-title-font-size);
1546 font-weight: var(--f7-navbar-large-title-font-weight);
1547 line-height: var(--f7-navbar-large-title-line-height);
1548 padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
1549 padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
1550 transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
1551}
1552.title-large-text,
1553.title-large-inner {
1554 box-sizing: border-box;
1555 overflow: hidden;
1556 transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1557 transition-property: transform, opacity;
1558 width: 100%;
1559}
1560.navbar-no-title-large-transition .title-large,
1561.navbar-no-title-large-transition .title-large-text,
1562.navbar-no-title-large-transition .title-large-inner {
1563 transition-duration: 0ms;
1564}
5d51ea26
DC
1565.navbar ~ * {
1566 --f7-page-navbar-offset: var(--f7-navbar-height);
1567}
1568.navbar ~ * .page-with-navbar-large,
1569.navbar ~ .page-with-navbar-large,
1570.page-with-navbar-large .navbar ~ * {
1571 --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
5309fbda 1572}
5d51ea26
DC
1573.page.no-navbar,
1574.page.no-navbar .navbar ~ * {
1575 --f7-page-navbar-offset: 0px;
5309fbda
DC
1576}
1577.ios {
1578 --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
1579 --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
1580}
5d51ea26
DC
1581.ios .navbar .material-icons {
1582 width: 24px;
1583}
1584.ios .navbar .f7-icons {
1585 width: 28px;
1586}
5309fbda
DC
1587.ios .navbar a.icon-only {
1588 width: 44px;
1589 margin: 0;
1590 justify-content: center;
1591}
1592.ios .navbar .left a + a,
1593.ios .navbar .right a + a {
1594 margin-left: 15px;
1595}
1596.ios .navbar b {
1597 font-weight: 600;
1598}
1599.ios .navbar .left {
1600 margin-right: 10px;
1601}
1602.ios .navbar .right {
1603 margin-left: 10px;
1604}
1605.ios .navbar .right:first-child {
1606 right: calc(8px + var(--f7-safe-area-right));
1607}
1608.ios .navbar-inner {
1609 justify-content: space-between;
1610}
1611.ios .navbar-inner-left-title {
1612 justify-content: flex-start;
1613}
1614.ios .navbar-inner-left-title .right {
1615 margin-left: auto;
1616}
1617.ios .navbar-inner-left-title .title {
1618 text-align: left;
1619 margin-right: 10px;
1620}
1621.ios .view-master-detail .navbar-previous:not(.navbar-master),
1622.ios .view:not(.view-master-detail) .navbar-previous {
1623 pointer-events: none;
1624}
1625.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
1626.ios .view:not(.view-master-detail) .navbar-previous .title-large {
1627 transform: translateY(-100%);
1628 opacity: 0;
1629 transition: 0ms;
1630}
1631.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
1632.ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
1633 transform: scale(0.5);
1634 transition: 0ms;
1635}
1636.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-inner,
1637.ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner {
1638 transform: translateX(-100%);
1639 opacity: 0;
1640 transition: 0ms;
1641}
1642.ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
1643.ios .view:not(.view-master-detail) .navbar-previous .left,
1644.ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
1645.ios .view:not(.view-master-detail) .navbar-previous .right,
1646.ios .view-master-detail .navbar-previous:not(.navbar-master) > .title,
1647.ios .view:not(.view-master-detail) .navbar-previous > .title,
1648.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
1649.ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
1650.ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
1651.ios .view:not(.view-master-detail) .navbar-previous .fading {
1652 opacity: 0;
1653}
1654.ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding,
1655.ios .view:not(.view-master-detail) .navbar-previous .sliding {
1656 opacity: 0;
1657}
1658.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
1659.ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
1660.ios .view-master-detail .navbar-previous:not(.navbar-master).sliding .subnavbar,
1661.ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar {
1662 opacity: 1;
1663 transform: translate3d(-100%, 0, 0);
1664}
1665.ios .navbar-next {
1666 pointer-events: none;
1667}
1668.ios .navbar-next .title-large {
1669 transform: translateX(100%);
1670 transition: 0ms;
1671}
1672.ios .navbar-next .title-large .title-large-text,
1673.ios .navbar-next .title-large .title-large-inner {
1674 transition: 0ms;
1675}
1676.ios .navbar-next .left,
1677.ios .navbar-next .right,
1678.ios .navbar-next > .title,
1679.ios .navbar-next .subnavbar,
1680.ios .navbar-next .fading {
1681 opacity: 0;
1682}
1683.ios .navbar-next .sliding {
1684 opacity: 0;
1685}
1686.ios .navbar-next.sliding .left,
1687.ios .navbar-next.sliding .right,
1688.ios .navbar-next.sliding > .title,
1689.ios .navbar-next.sliding .subnavbar {
1690 opacity: 0;
1691}
1692.ios .navbar-next .subnavbar.sliding,
1693.ios .navbar-next.sliding .subnavbar {
1694 opacity: 1;
1695 transform: translate3d(100%, 0, 0);
1696}
1697.ios .router-dynamic-navbar-inside .navbar-next .title-large,
1698.ios .router-dynamic-navbar-inside .navbar-next .title-large-text,
1699.ios .router-dynamic-navbar-inside .navbar-next .title-large-inner {
1700 transform: none;
1701}
1702.ios .router-dynamic-navbar-inside .navbar-previous .title-large {
1703 opacity: 1;
1704 transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1705}
1706.ios .router-dynamic-navbar-inside .navbar-previous .title-large-text,
1707.ios .router-dynamic-navbar-inside .navbar-previous .title-large-inner {
1708 transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1709}
1710.ios .router-transition .navbar {
1711 transition-duration: var(--f7-page-transition-duration);
1712}
1713.ios .router-transition .title-large {
1714 transition: 0ms;
1715}
1716.ios .router-transition .navbar-current .left,
1717.ios .router-transition .navbar-current > .title,
1718.ios .router-transition .navbar-current .right,
1719.ios .router-transition .navbar-current .subnavbar {
1720 animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
1721}
1722.ios .router-transition .navbar-current .sliding,
1723.ios .router-transition .navbar-current .left.sliding .icon + span,
1724.ios .router-transition .navbar-current.sliding .left,
1725.ios .router-transition .navbar-current.sliding .left .icon + span,
1726.ios .router-transition .navbar-current.sliding > .title,
1727.ios .router-transition .navbar-current.sliding .right {
1728 transition-duration: var(--f7-page-transition-duration);
1729 opacity: 0 !important;
1730 animation: none;
1731}
1732.ios .router-transition .navbar-current.sliding .subnavbar,
1733.ios .router-transition .navbar-current .sliding.subnavbar {
1734 transition-duration: var(--f7-page-transition-duration);
1735 animation: none;
1736 opacity: 1;
1737}
1738.ios .router-transition-forward .navbar-next .left,
1739.ios .router-transition-backward .navbar-previous .left,
1740.ios .router-transition-forward .navbar-next > .title,
1741.ios .router-transition-backward .navbar-previous > .title,
1742.ios .router-transition-forward .navbar-next .right,
1743.ios .router-transition-backward .navbar-previous .right,
1744.ios .router-transition-forward .navbar-next .subnavbar,
1745.ios .router-transition-backward .navbar-previous .subnavbar {
1746 animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
1747}
1748.ios .router-transition-forward .navbar-next .sliding,
1749.ios .router-transition-backward .navbar-previous .sliding,
1750.ios .router-transition-forward .navbar-next .left.sliding .icon + span,
1751.ios .router-transition-backward .navbar-previous .left.sliding .icon + span,
1752.ios .router-transition-forward .navbar-next.sliding .left,
1753.ios .router-transition-backward .navbar-previous.sliding .left,
1754.ios .router-transition-forward .navbar-next.sliding .left .icon + span,
1755.ios .router-transition-backward .navbar-previous.sliding .left .icon + span,
1756.ios .router-transition-forward .navbar-next.sliding > .title,
1757.ios .router-transition-backward .navbar-previous.sliding > .title,
1758.ios .router-transition-forward .navbar-next.sliding .right,
1759.ios .router-transition-backward .navbar-previous.sliding .right,
1760.ios .router-transition-forward .navbar-next.sliding .subnavbar,
1761.ios .router-transition-backward .navbar-previous.sliding .subnavbar {
1762 transition-duration: var(--f7-page-transition-duration);
1763 animation: none;
1764 transform: translate3d(0, 0, 0) !important;
1765 opacity: 1 !important;
1766}
1767.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1768 overflow: visible;
1769}
1770.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1771 animation: ios-navbar-title-large-text-slide-up var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards;
1772}
1773.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1774 animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
1775}
1776.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
1777 animation: ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-scale-out var(--f7-page-transition-duration) forwards;
1778}
1779.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large .title-large-inner {
1780 animation: ios-navbar-title-large-inner-current-to-previous var(--f7-page-transition-duration) forwards;
1781}
1782.ios .router-transition-forward:not(.router-dynamic-navbar-inside) .navbar-next.router-navbar-transition-from-large .left .back span {
1783 animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
1784 transition: none;
1785 transform-origin: left center;
1786}
1787.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1788 overflow: visible;
1789}
1790.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
1791.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1792 animation: ios-navbar-title-large-text-slide-left var(--f7-page-transition-duration) forwards;
1793}
1794.ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1795 animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
1796}
1797.ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text,
1798.ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-inner {
1799 animation: ios-navbar-title-large-text-slide-left-top var(--f7-page-transition-duration) forwards;
1800}
1801.ios .router-transition-forward .navbar-next.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
1802.ios .router-transition-forward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1803 animation: none;
1804 opacity: 0 !important;
1805 transition-duration: 0;
1806}
1807.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large,
1808.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large,
1809.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-text,
1810.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-text,
1811.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-inner,
1812.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1813 animation: none !important;
1814}
1815.ios .router-transition-backward:not(.router-dynamic-navbar-inside) .navbar-current.router-navbar-transition-to-large .left .back span {
1816 animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards;
1817 transition: none;
1818 transform-origin: left center;
1819}
1820.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1821 overflow: visible;
1822 transform: translateX(100%);
1823}
1824.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
1825.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1826 animation: ios-navbar-title-large-text-slide-right var(--f7-page-transition-duration) forwards;
1827}
1828.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1829 animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
1830}
1831.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text,
1832.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-inner {
1833 animation: ios-navbar-title-large-text-slide-right-bottom var(--f7-page-transition-duration) forwards;
1834}
1835.ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1836 opacity: 0;
1837}
1838.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1839 overflow: visible;
1840 opacity: 1;
1841 transform: translateY(0);
1842}
1843.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1844 animation: ios-navbar-title-large-text-slide-down var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards;
1845}
1846.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1847 opacity: 1;
1848 animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
1849}
1850.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
1851 animation: ios-navbar-title-large-text-scale-in var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards;
1852}
1853.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large .title-large-inner {
1854 animation: ios-navbar-title-large-inner-previous-to-current var(--f7-page-transition-duration) forwards;
1855}
1856.ios .router-transition-backward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
1857.ios .router-transition-backward .navbar-previous.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1858 animation: none;
1859 opacity: 0 !important;
1860 transition-duration: 0;
1861}
1862.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large,
1863.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large,
1864.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-text,
1865.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-text,
1866.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-inner,
1867.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1868 animation: none !important;
1869}
1870.view-master-detail .navbar-master.navbar-previous {
1871 pointer-events: auto;
1872}
1873.view-master-detail .navbar-master.navbar-previous .left,
1874.view-master-detail .navbar-master.navbar-previous:not(.navbar-inner-large) .title,
1875.view-master-detail .navbar-master.navbar-previous .right,
1876.view-master-detail .navbar-master.navbar-previous .subnavbar {
1877 opacity: 1;
1878}
1879.ios .view-master-detail.router-transition .navbar-master .left,
1880.ios .view-master-detail.router-transition .navbar-master .left .icon + span,
1881.ios .view-master-detail.router-transition .navbar-master:not(.navbar-inner-large) .title,
1882.ios .view-master-detail.router-transition .navbar-master .right,
1883.ios .view-master-detail.router-transition .navbar-master .subnavbar,
1884.ios .view-master-detail.router-transition .navbar-master .sliding,
1885.ios .view-master-detail.router-transition .navbar-master .fading {
1886 opacity: 1 !important;
1887 transition-duration: 0ms;
1888 transform: none !important;
1889 animation: none !important;
1890}
1891.ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title {
1892 opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
1893 transition-duration: 0ms;
1894 transform: none !important;
1895 animation: none !important;
1896}
1897.ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large,
1898.ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-text,
1899.ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-inner {
1900 transition-duration: 0ms;
1901 animation: none !important;
1902}
1903@keyframes ios-navbar-element-fade-in {
1904 from {
1905 opacity: 0;
1906 }
1907 to {
1908 opacity: 1;
1909 }
1910}
1911@keyframes ios-navbar-element-fade-out {
1912 from {
1913 opacity: 1;
1914 }
1915 to {
1916 opacity: 0;
1917 }
1918}
1919@keyframes ios-navbar-title-large-slide-up {
1920 0% {
1921 transform: translateY(0%);
1922 }
1923 100% {
1924 transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
1925 }
1926}
1927@keyframes ios-navbar-title-large-slide-down {
1928 0% {
1929 transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
1930 }
1931 100% {
1932 transform: translateY(0%);
1933 }
1934}
1935@keyframes ios-navbar-title-large-text-slide-up {
1936 0% {
1937 transform: translateX(0px) translateY(0%) scale(1);
1938 }
1939 100% {
1940 transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5);
1941 }
1942}
1943@keyframes ios-navbar-title-large-text-slide-down {
1944 0% {
1945 transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5);
1946 }
1947 100% {
1948 transform: translateX(0px) translateY(0%) scale(1);
1949 }
1950}
1951@keyframes ios-navbar-title-large-text-slide-left {
1952 0% {
1953 transform: translateX(0%) scale(1);
1954 }
1955 100% {
1956 transform: translateX(-100%) scale(1);
1957 }
1958}
1959@keyframes ios-navbar-title-large-text-slide-right {
1960 0% {
1961 transform: translateX(-100%) scale(1);
1962 }
1963 100% {
1964 transform: translateX(0%) scale(1);
1965 }
1966}
1967@keyframes ios-navbar-title-large-text-slide-left-top {
1968 0% {
1969 transform: translateX(100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
1970 }
1971 100% {
1972 transform: translateX(0%) translateY(0%) scale(1);
1973 }
1974}
1975@keyframes ios-navbar-title-large-text-slide-right-bottom {
1976 0% {
1977 transform: translateX(0%) translateY(0%) scale(1);
1978 }
1979 100% {
1980 transform: translateX(100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
1981 }
1982}
1983@keyframes ios-navbar-title-large-text-fade-out {
1984 0% {
1985 opacity: 1;
1986 }
1987 80% {
1988 opacity: 0;
1989 }
1990 100% {
1991 opacity: 0;
1992 }
1993}
1994@keyframes ios-navbar-title-large-text-fade-in {
1995 0% {
1996 opacity: 0;
1997 }
1998 20% {
1999 opacity: 0;
2000 }
2001 100% {
2002 opacity: 1;
2003 }
2004}
2005@keyframes ios-navbar-title-large-text-scale-out {
2006 0% {
2007 transform: translateY(0%) scale(1);
2008 }
2009 100% {
2010 transform: translateY(0%) scale(0.5);
2011 }
2012}
2013@keyframes ios-navbar-title-large-text-scale-in {
2014 0% {
2015 transform: translateY(0%) scale(0.5);
2016 }
2017 100% {
2018 transform: translateY(0%) scale(1);
2019 }
2020}
2021@keyframes ios-navbar-back-text-current-to-previous {
2022 0% {
2023 opacity: 1;
2024 transform: translateY(0px) translateX(0px) scale(1);
2025 }
2026 80% {
2027 opacity: 0;
2028 }
2029 100% {
2030 opacity: 0;
2031 transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
2032 }
2033}
2034@keyframes ios-navbar-back-text-next-to-current {
2035 0% {
2036 opacity: 0;
2037 transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
2038 }
2039 20% {
2040 opacity: 0;
2041 }
2042 100% {
2043 opacity: 1;
2044 transform: translateX(0px) translateY(0px) scale(1);
2045 }
2046}
2047@keyframes ios-navbar-title-large-inner-current-to-previous {
2048 0% {
2049 transform: translateX(0%);
2050 opacity: 1;
2051 }
2052 100% {
2053 transform: translateX(-100%);
2054 opacity: 0;
2055 }
2056}
2057@keyframes ios-navbar-title-large-inner-previous-to-current {
2058 0% {
2059 transform: translateX(-100%);
2060 opacity: 0;
2061 }
2062 100% {
2063 transform: translateX(0%);
2064 opacity: 1;
2065 }
2066}
5d51ea26
DC
2067.md .navbar .material-icons {
2068 width: 24px;
2069}
2070.md .navbar .f7-icons {
2071 width: 28px;
2072}
5309fbda
DC
2073.md .navbar a.link {
2074 padding: 0 16px;
2075 min-width: 48px;
2076}
2077.md .navbar a.link:before {
2078 content: '';
2079 width: 152%;
2080 height: 152%;
2081 position: absolute;
2082 left: -26%;
2083 top: -26%;
2084 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2085 background-repeat: no-repeat;
2086 background-position: center;
2087 background-size: 100% 100%;
2088 opacity: 0;
2089 pointer-events: none;
2090 transition-duration: 600ms;
2091}
2092.md .navbar a.link.active-state:before {
2093 opacity: 1;
2094 transition-duration: 150ms;
2095}
2096.md .navbar a.icon-only {
2097 min-width: 0;
2098 flex-shrink: 0;
2099 width: 56px;
2100}
2101.md .navbar .right {
2102 margin-left: auto;
2103}
2104.md .navbar .right:first-child {
2105 right: var(--f7-safe-area-right);
2106}
2107.md .navbar-inner {
2108 justify-content: flex-start;
2109 overflow: hidden;
2110}
2111.md .navbar-inner-large:not(.navbar-inner-large-collapsed) {
2112 overflow: visible;
2113}
2114.md .page.page-with-subnavbar .navbar-inner {
2115 overflow: visible;
2116}
2117.md .navbar-inner-centered-title {
2118 justify-content: space-between;
2119}
2120.md .navbar-inner-centered-title .right {
2121 margin-left: 0;
2122}
2123.md .navbar-inner-centered-title .title {
2124 text-align: center;
2125}
5d51ea26
DC
2126.aurora .navbar a.icon-only {
2127 margin: 0;
2128 justify-content: center;
2129}
2130.aurora .navbar .left a + a,
2131.aurora .navbar .right a + a {
2132 margin-left: 10px;
2133}
2134.aurora .navbar b {
2135 font-weight: bold;
2136}
2137.aurora .navbar .left {
2138 margin-right: 10px;
2139}
2140.aurora .navbar .right {
2141 margin-left: 10px;
2142}
2143.aurora .navbar .right:first-child {
2144 right: calc(15px + var(--f7-safe-area-right));
2145}
2146.aurora .navbar-inner {
2147 justify-content: space-between;
2148}
2149.aurora .navbar-inner-left-title {
2150 justify-content: flex-start;
2151}
2152.aurora .navbar-inner-left-title .right {
2153 margin-left: auto;
2154}
2155.aurora .navbar-inner-left-title .title {
2156 text-align: left;
2157 margin-right: 10px;
2158}
5309fbda
DC
2159/* === Toolbar === */
2160:root {
2161 /*
2162 --f7-toolbar-bg-color: var(--f7-bars-bg-color);
2163 --f7-toolbar-bg-image: var(--f7-bars-bg-image);
2164 --f7-toolbar-border-color: var(--f7-bars-border-color);
2165 --f7-toolbar-link-color: var(--f7-bars-link-color);
2166 --f7-toolbar-text-color: var(--f7-bars-text-color);
5d51ea26 2167 --f7-tabbar-link-active-color: var(--f7-theme-color);
5309fbda 2168 */
5d51ea26
DC
2169 --f7-tabbar-link-active-bg-color: transparent;
2170 --f7-tabbar-label-text-transform: none;
5309fbda
DC
2171 --f7-toolbar-hide-show-transition-duration: 400ms;
2172}
2173.ios {
2174 --f7-toolbar-height: 44px;
2175 --f7-toolbar-font-size: 17px;
5d51ea26
DC
2176 --f7-toolbar-inner-padding-left: 8px;
2177 --f7-toolbar-inner-padding-right: 8px;
2178 /*
2179 --f7-toolbar-link-height: var(--f7-toolbar-height);
2180 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2181 */
5309fbda
DC
2182 --f7-tabbar-labels-height: 50px;
2183 --f7-tabbar-labels-tablet-height: 56px;
2184 --f7-tabbar-link-inactive-color: #929292;
5309fbda
DC
2185 --f7-toolbar-top-shadow-image: none;
2186 --f7-toolbar-bottom-shadow-image: none;
2187 --f7-tabbar-icon-size: 28px;
2188 --f7-tabbar-link-text-transform: none;
2189 --f7-tabbar-link-font-weight: 400;
2190 --f7-tabbar-link-letter-spacing: 0;
2191 --f7-tabbar-label-font-size: 10px;
2192 --f7-tabbar-label-tablet-font-size: 14px;
5309fbda
DC
2193 --f7-tabbar-label-font-weight: 400;
2194 --f7-tabbar-label-letter-spacing: 0.01;
2195}
2196.md {
2197 --f7-toolbar-height: 48px;
2198 --f7-toolbar-font-size: 14px;
5d51ea26
DC
2199 --f7-toolbar-inner-padding-left: 0px;
2200 --f7-toolbar-inner-padding-right: 0px;
2201 /*
2202 --f7-toolbar-link-height: var(--f7-toolbar-height);
2203 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2204 */
5309fbda
DC
2205 --f7-tabbar-labels-height: 56px;
2206 --f7-tabbar-labels-tablet-height: 56px;
2207 --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
2208 /*
5309fbda
DC
2209 --f7-tabbar-link-active-border-color: var(--f7-theme-color);
2210 */
2211 --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
2212 --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
2213 --f7-tabbar-icon-size: 24px;
2214 --f7-tabbar-link-text-transform: uppercase;
2215 --f7-tabbar-link-font-weight: 500;
2216 --f7-tabbar-link-letter-spacing: 0.03em;
2217 --f7-tabbar-label-font-size: 14px;
2218 --f7-tabbar-label-tablet-font-size: 14px;
5309fbda
DC
2219 --f7-tabbar-label-font-weight: 400;
2220 --f7-tabbar-label-letter-spacing: 0;
2221}
2222.md .theme-dark,
2223.md.theme-dark {
2224 --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2225}
5d51ea26
DC
2226.aurora {
2227 --f7-toolbar-height: 38px;
2228 --f7-toolbar-font-size: 14px;
2229 --f7-toolbar-inner-padding-left: 15px;
2230 --f7-toolbar-inner-padding-right: 15px;
2231 --f7-toolbar-link-height: auto;
2232 --f7-toolbar-link-line-height: inherit;
2233 --f7-tabbar-labels-height: 44px;
2234 --f7-tabbar-labels-tablet-height: 44px;
2235 --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
2236 --f7-tabbar-link-inactive-bg-color: rgba(0, 0, 0, 0.2);
2237 --f7-toolbar-top-shadow-image: none;
2238 --f7-toolbar-bottom-shadow-image: none;
2239 --f7-tabbar-icon-size: 18px;
2240 --f7-tabbar-link-text-transform: none;
2241 --f7-tabbar-link-font-weight: 400;
2242 --f7-tabbar-link-letter-spacing: 0;
2243 --f7-tabbar-label-font-size: 12px;
2244 --f7-tabbar-label-tablet-font-size: 12px;
2245 --f7-tabbar-label-font-weight: 500;
2246 --f7-tabbar-label-letter-spacing: 0.01;
2247}
2248.aurora .theme-dark,
2249.aurora.theme-dark {
2250 --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
2251}
5309fbda
DC
2252.toolbar {
2253 width: 100%;
2254 position: relative;
2255 margin: 0;
2256 transform: translate3d(0, 0, 0);
2257 -webkit-backface-visibility: hidden;
2258 backface-visibility: hidden;
2259 z-index: 500;
2260 box-sizing: border-box;
2261 left: 0;
2262 height: var(--f7-toolbar-height);
2263 background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
2264 background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
2265 color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
2266 font-size: var(--f7-toolbar-font-size);
2267}
2268.toolbar b {
2269 font-weight: 600;
2270}
2271.toolbar a {
2272 color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2273 box-sizing: border-box;
2274 flex-shrink: 1;
2275 position: relative;
2276 white-space: nowrap;
2277 text-overflow: ellipsis;
2278}
2279.toolbar a.link {
2280 display: flex;
5d51ea26
DC
2281 line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
2282 height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
5309fbda
DC
2283}
2284.toolbar i.icon {
2285 display: block;
2286}
2287.toolbar:after,
2288.toolbar:before {
2289 -webkit-backface-visibility: hidden;
2290 backface-visibility: hidden;
2291}
2292.views > .toolbar,
2293.view > .toolbar,
2294.page > .toolbar {
2295 position: absolute;
2296}
2297.toolbar-top,
2298.ios .toolbar-top-ios,
5d51ea26
DC
2299.md .toolbar-top-md,
2300.aurora .toolbar-top-aurora {
5309fbda
DC
2301 top: 0;
2302}
2303.toolbar-top .tab-link-highlight,
2304.ios .toolbar-top-ios .tab-link-highlight,
5d51ea26
DC
2305.md .toolbar-top-md .tab-link-highlight,
2306.aurora .toolbar-top-aurora .tab-link-highlight {
5309fbda
DC
2307 bottom: 0;
2308}
2309.toolbar-top.no-hairline:after,
2310.ios .toolbar-top-ios.no-hairline:after,
2311.md .toolbar-top-md.no-hairline:after,
5d51ea26 2312.aurora .toolbar-top-aurora.no-hairline:after,
5309fbda
DC
2313.toolbar-top.no-border:after,
2314.ios .toolbar-top-ios.no-border:after,
5d51ea26
DC
2315.md .toolbar-top-md.no-border:after,
2316.aurora .toolbar-top-aurora.no-border:after {
5309fbda
DC
2317 display: none !important;
2318}
2319.toolbar-top.no-shadow:before,
2320.ios .toolbar-top-ios.no-shadow:before,
2321.md .toolbar-top-md.no-shadow:before,
5d51ea26 2322.aurora .toolbar-top-aurora.no-shadow:before,
5309fbda
DC
2323.toolbar-top.toolbar-hidden:before,
2324.ios .toolbar-top-ios.toolbar-hidden:before,
5d51ea26
DC
2325.md .toolbar-top-md.toolbar-hidden:before,
2326.aurora .toolbar-top-aurora.toolbar-hidden:before {
5309fbda
DC
2327 display: none !important;
2328}
2329.toolbar-top:after,
2330.ios .toolbar-top-ios:after,
2331.md .toolbar-top-md:after,
5d51ea26 2332.aurora .toolbar-top-aurora:after,
5309fbda
DC
2333.toolbar-top:before,
2334.ios .toolbar-top-ios:before,
5d51ea26
DC
2335.md .toolbar-top-md:before,
2336.aurora .toolbar-top-aurora:before {
5309fbda
DC
2337 -webkit-backface-visibility: hidden;
2338 backface-visibility: hidden;
2339}
2340.toolbar-top:after,
2341.ios .toolbar-top-ios:after,
5d51ea26
DC
2342.md .toolbar-top-md:after,
2343.aurora .toolbar-top-aurora:after {
5309fbda
DC
2344 content: '';
2345 position: absolute;
2346 background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2347 display: block;
2348 z-index: 15;
2349 top: auto;
2350 right: auto;
2351 bottom: 0;
2352 left: 0;
2353 height: 1px;
2354 width: 100%;
2355 transform-origin: 50% 100%;
2356 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2357}
2358.toolbar-top:before,
2359.ios .toolbar-top-ios:before,
5d51ea26
DC
2360.md .toolbar-top-md:before,
2361.aurora .toolbar-top-aurora:before {
5309fbda
DC
2362 content: '';
2363 position: absolute;
2364 right: 0;
2365 width: 100%;
2366 top: 100%;
2367 bottom: auto;
2368 height: 8px;
2369 pointer-events: none;
5d51ea26 2370 background: var(--f7-toolbar-top-shadow-image);
5309fbda
DC
2371}
2372.toolbar-bottom,
2373.ios .toolbar-bottom-ios,
5d51ea26
DC
2374.md .toolbar-bottom-md,
2375.aurora .toolbar-bottom-aurora {
5309fbda
DC
2376 bottom: 0;
2377 height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
2378}
2379.toolbar-bottom .tab-link-highlight,
2380.ios .toolbar-bottom-ios .tab-link-highlight,
5d51ea26
DC
2381.md .toolbar-bottom-md .tab-link-highlight,
2382.aurora .toolbar-bottom-aurora .tab-link-highlight {
5309fbda
DC
2383 top: 0;
2384}
2385.toolbar-bottom .toolbar-inner,
2386.ios .toolbar-bottom-ios .toolbar-inner,
5d51ea26
DC
2387.md .toolbar-bottom-md .toolbar-inner,
2388.aurora .toolbar-bottom-aurora .toolbar-inner {
5309fbda
DC
2389 height: auto;
2390 top: 0;
2391 bottom: var(--f7-safe-area-bottom);
2392}
2393.toolbar-bottom.no-hairline:before,
2394.ios .toolbar-bottom-ios.no-hairline:before,
2395.md .toolbar-bottom-md.no-hairline:before,
5d51ea26 2396.aurora .toolbar-bottom-aurora.no-hairline:before,
5309fbda
DC
2397.toolbar-bottom.no-border:before,
2398.ios .toolbar-bottom-ios.no-border:before,
5d51ea26
DC
2399.md .toolbar-bottom-md.no-border:before,
2400.aurora .toolbar-bottom-aurora.no-border:before {
5309fbda
DC
2401 display: none !important;
2402}
2403.toolbar-bottom.no-shadow:after,
2404.ios .toolbar-bottom-ios.no-shadow:after,
2405.md .toolbar-bottom-md.no-shadow:after,
5d51ea26 2406.aurora .toolbar-bottom-aurora.no-shadow:after,
5309fbda
DC
2407.toolbar-bottom.toolbar-hidden:after,
2408.ios .toolbar-bottom-ios.toolbar-hidden:after,
5d51ea26
DC
2409.md .toolbar-bottom-md.toolbar-hidden:after,
2410.aurora .toolbar-bottom-aurora.toolbar-hidden:after {
5309fbda
DC
2411 display: none !important;
2412}
2413.toolbar-bottom:before,
2414.ios .toolbar-bottom-ios:before,
5d51ea26
DC
2415.md .toolbar-bottom-md:before,
2416.aurora .toolbar-bottom-aurora:before {
5309fbda
DC
2417 content: '';
2418 position: absolute;
2419 background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2420 display: block;
2421 z-index: 15;
2422 top: 0;
2423 right: auto;
2424 bottom: auto;
2425 left: 0;
2426 height: 1px;
2427 width: 100%;
2428 transform-origin: 50% 0%;
2429 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2430}
2431.toolbar-bottom:after,
2432.ios .toolbar-bottom-ios:after,
5d51ea26
DC
2433.md .toolbar-bottom-md:after,
2434.aurora .toolbar-bottom-aurora:after {
5309fbda
DC
2435 content: '';
2436 position: absolute;
2437 right: 0;
2438 width: 100%;
2439 bottom: 100%;
2440 height: 8px;
2441 top: auto;
2442 pointer-events: none;
5d51ea26 2443 background: var(--f7-toolbar-bottom-shadow-image);
5309fbda
DC
2444}
2445.toolbar-inner {
2446 position: absolute;
2447 left: 0;
2448 top: 0;
2449 width: 100%;
2450 height: 100%;
2451 display: flex;
2452 justify-content: space-between;
2453 box-sizing: border-box;
2454 align-items: center;
2455 align-content: center;
2456 overflow: hidden;
5d51ea26 2457 padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));
5309fbda
DC
2458}
2459.views > .tabbar,
2460.views > .tabbar-labels {
2461 z-index: 5001;
2462}
2463.tabbar a,
2464.tabbar-labels a {
2465 color: var(--f7-tabbar-link-inactive-color);
2466}
5d51ea26
DC
2467.tabbar a.tab-link:not(.tab-link-active),
2468.tabbar-labels a.tab-link:not(.tab-link-active) {
2469 background-color: var(--f7-tabbar-link-inactive-bg-color, transparent);
2470}
5309fbda
DC
2471.tabbar a.link,
2472.tabbar-labels a.link {
2473 line-height: 1.4;
2474}
2475.tabbar a.tab-link,
2476.tabbar-labels a.tab-link,
2477.tabbar a.link,
2478.tabbar-labels a.link {
2479 height: 100%;
2480 width: 100%;
2481 box-sizing: border-box;
2482 display: flex;
2483 justify-content: center;
2484 align-items: center;
2485 flex-direction: column;
2486 text-transform: var(--f7-tabbar-link-text-transform);
2487 font-weight: var(--f7-tabbar-link-font-weight);
2488 letter-spacing: var(--f7-tabbar-link-letter-spacing);
2489 overflow: hidden;
2490}
2491.tabbar .tab-link-active,
2492.tabbar-labels .tab-link-active {
2493 color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
5d51ea26 2494 background-color: var(--f7-tabbar-link-active-bg-color, transparent);
5309fbda
DC
2495}
2496.tabbar i.icon,
2497.tabbar-labels i.icon {
2498 font-size: var(--f7-tabbar-icon-size);
2499 height: var(--f7-tabbar-icon-size);
2500 line-height: var(--f7-tabbar-icon-size);
2501}
2502.tabbar-labels {
2503 --f7-toolbar-height: var(--f7-tabbar-labels-height);
2504}
2505.tabbar-labels a.tab-link,
2506.tabbar-labels a.link {
2507 height: 100%;
2508 justify-content: space-between;
2509 align-items: center;
2510}
2511.tabbar-labels .tabbar-label {
2512 display: block;
2513 line-height: 1;
2514 margin: 0;
2515 position: relative;
2516 text-overflow: ellipsis;
2517 white-space: nowrap;
2518 font-size: var(--f7-tabbar-label-font-size);
2519 text-transform: var(--f7-tabbar-label-text-transform);
2520 font-weight: var(--f7-tabbar-label-font-weight);
2521 letter-spacing: var(--f7-tabbar-label-letter-spacing);
2522}
2523@media (min-width: 768px) {
2524 :root {
2525 --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
2526 --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
2527 }
2528}
2529.tabbar-scrollable .toolbar-inner {
5d51ea26 2530 justify-content: flex-start;
5309fbda
DC
2531 will-change: scroll-position;
2532 overflow: auto;
2533 -webkit-overflow-scrolling: touch;
2534}
2535.tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
2536 display: none !important;
2537 width: 0 !important;
2538 height: 0 !important;
2539 -webkit-appearance: none;
2540 opacity: 0 !important;
2541}
2542.tabbar-scrollable a.tab-link,
2543.tabbar-scrollable a.link {
2544 width: auto;
2545 flex-shrink: 0;
2546}
2547.toolbar-transitioning,
2548.navbar-transitioning + .toolbar,
2549.navbar-transitioning ~ * .toolbar {
2550 transition-duration: var(--f7-toolbar-hide-show-transition-duration);
2551}
5d51ea26
DC
2552.toolbar-bottom ~ *,
2553.ios .toolbar-bottom-ios ~ *,
2554.md .toolbar-bottom-md ~ *,
2555.aurora .toolbar-bottom-aurora ~ * {
2556 --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
2557}
2558.toolbar-bottom.tabbar-labels ~ *,
2559.ios .toolbar-bottom-ios.tabbar-labels ~ *,
2560.md .toolbar-bottom-md.tabbar-labels ~ *,
2561.aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
2562 --f7-page-toolbar-bottom-offset: var(--f7-tabbar-labels-height);
2563}
5309fbda
DC
2564.toolbar-bottom.toolbar-hidden,
2565.ios .toolbar-bottom-ios.toolbar-hidden,
5d51ea26
DC
2566.md .toolbar-bottom-md.toolbar-hidden,
2567.aurora .toolbar-bottom-aurora.toolbar-hidden {
5309fbda
DC
2568 transform: translate3d(0, 100%, 0);
2569}
5d51ea26
DC
2570.toolbar-top ~ *,
2571.ios .toolbar-top-ios ~ *,
2572.md .toolbar-top-md ~ *,
2573.aurora .toolbar-top-aurora ~ * {
2574 --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
2575}
2576.toolbar-top.tabbar-labels ~ *,
2577.ios .toolbar-top-ios.tabbar-labels ~ *,
2578.md .toolbar-top-md.tabbar-labels ~ *,
2579.aurora .toolbar-top-aurora.tabbar-labels ~ * {
2580 --f7-page-toolbar-top-offset: var(--f7-tabbar-labels-height);
5309fbda
DC
2581}
2582.toolbar-top.toolbar-hidden,
2583.ios .toolbar-top-ios.toolbar-hidden,
5d51ea26
DC
2584.md .toolbar-top-md.toolbar-hidden,
2585.aurora .toolbar-top-aurora.toolbar-hidden {
5309fbda
DC
2586 transform: translate3d(0, -100%, 0);
2587}
5309fbda
DC
2588.navbar ~ .toolbar-top,
2589.ios .navbar ~ .toolbar-top-ios,
2590.md .navbar ~ .toolbar-top-md,
5d51ea26 2591.aurora .navbar ~ .toolbar-top-aurora,
5309fbda
DC
2592.navbar ~ * .toolbar-top,
2593.ios .navbar ~ * .toolbar-top-ios,
2594.md .navbar ~ * .toolbar-top-md,
5d51ea26 2595.aurora .navbar ~ * .toolbar-top-aurora,
5309fbda
DC
2596.navbar ~ .page:not(.no-navbar) .toolbar-top,
2597.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
5d51ea26
DC
2598.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
2599.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
5309fbda
DC
2600 top: var(--f7-navbar-height);
2601}
5309fbda
DC
2602.navbar ~ .toolbar-top.toolbar-hidden,
2603.ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
2604.md .navbar ~ .toolbar-top-md.toolbar-hidden,
5d51ea26 2605.aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden,
5309fbda
DC
2606.navbar ~ * .toolbar-top.toolbar-hidden,
2607.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
2608.md .navbar ~ * .toolbar-top-md.toolbar-hidden,
5d51ea26 2609.aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden,
5309fbda
DC
2610.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
2611.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
5d51ea26
DC
2612.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
2613.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
5309fbda
DC
2614 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height))), 0);
2615}
2616.navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
2617.ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2618.md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
5d51ea26 2619.aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
5309fbda
DC
2620.navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
2621.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2622.md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
5d51ea26 2623.aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
5309fbda
DC
2624.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
2625.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
5d51ea26
DC
2626.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels,
2627.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
5309fbda
DC
2628 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height))), 0);
2629}
2630.navbar-hidden + .toolbar-top:not(.toolbar-hidden),
2631.ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
2632.md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
5d51ea26 2633.aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
5309fbda
DC
2634.navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
2635.ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
5d51ea26
DC
2636.md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
2637.aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
5309fbda
DC
2638 transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
2639}
2640.navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
2641.ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
2642.md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
2643.navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
2644.ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
5d51ea26
DC
2645.md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
2646.aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
5309fbda
DC
2647 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height))), 0);
2648}
2649.ios .toolbar a.icon-only {
2650 min-height: var(--f7-toolbar-height);
2651 display: flex;
2652 justify-content: center;
2653 align-items: center;
2654 margin: 0;
2655 min-width: 44px;
2656}
5309fbda
DC
2657.ios .tabbar-labels a.tab-link,
2658.ios .tabbar-labels a.link {
2659 padding-top: 4px;
2660 padding-bottom: 4px;
2661}
2662.ios .tabbar-labels a.tab-link i + span,
2663.ios .tabbar-labels a.link i + span {
2664 margin: 0;
2665}
2666@media (min-width: 768px) {
2667 .ios .tabbar .toolbar-inner,
2668 .ios .tabbar-labels .toolbar-inner {
2669 justify-content: center;
2670 }
2671 .ios .tabbar a.tab-link,
2672 .ios .tabbar-labels a.tab-link,
2673 .ios .tabbar a.link,
2674 .ios .tabbar-labels a.link {
2675 width: auto;
2676 min-width: 105px;
2677 }
2678}
2679.ios .tabbar-scrollable .toolbar-inner {
2680 justify-content: flex-start;
2681}
2682.ios .tabbar-scrollable a.tab-link,
2683.ios .tabbar-scrollable a.link {
2684 padding: 0 8px;
2685}
2686.md .toolbar a.link {
2687 justify-content: center;
2688 padding: 0 16px;
2689 min-width: 48px;
2690}
2691.md .toolbar a.link:before {
2692 content: '';
2693 width: 152%;
2694 height: 152%;
2695 position: absolute;
2696 left: -26%;
2697 top: -26%;
2698 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2699 background-repeat: no-repeat;
2700 background-position: center;
2701 background-size: 100% 100%;
2702 opacity: 0;
2703 pointer-events: none;
2704 transition-duration: 600ms;
2705}
2706.md .toolbar a.link.active-state:before {
2707 opacity: 1;
2708 transition-duration: 150ms;
2709}
2710.md .toolbar a.icon-only {
2711 min-width: 0;
2712 flex-shrink: 0;
2713}
5309fbda
DC
2714.md .tabbar a.tab-link,
2715.md .tabbar-labels a.tab-link,
2716.md .tabbar a.link,
2717.md .tabbar-labels a.link {
2718 padding-left: 0;
2719 padding-right: 0;
2720}
5d51ea26
DC
2721.md .tabbar a.icon-only,
2722.md .tabbar-labels a.icon-only {
2723 flex-shrink: initial;
2724}
5309fbda
DC
2725.md .tabbar a.tab-link,
2726.md .tabbar-labels a.tab-link {
2727 transition-duration: 300ms;
2728 overflow: hidden;
2729 position: relative;
2730}
2731.md .tabbar .tab-link-highlight,
2732.md .tabbar-labels .tab-link-highlight {
2733 position: absolute;
2734 height: 2px;
2735 background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
2736 transition-duration: 300ms;
2737 left: 0;
2738}
2739.md .tabbar-labels a.tab-link,
2740.md .tabbar-labels a.link {
2741 padding-top: 7px;
2742 padding-bottom: 7px;
2743}
2744.md .tabbar-label {
2745 max-width: 100%;
2746 overflow: hidden;
2747 line-height: 1.2;
2748}
2749.md .tabbar-scrollable .toolbar-inner {
2750 overflow: auto;
5309fbda
DC
2751}
2752.md .tabbar-scrollable a.tab-link,
2753.md .tabbar-scrollable a.link {
2754 padding: 0 16px;
2755}
5d51ea26
DC
2756.aurora .toolbar a.icon-only {
2757 min-height: var(--f7-toolbar-height);
2758 display: flex;
2759 justify-content: center;
2760 align-items: center;
2761 margin: 0;
2762}
2763.aurora .tabbar .toolbar-inner,
2764.aurora .tabbar-labels .toolbar-inner {
2765 padding-left: 0;
2766 padding-right: 0;
2767}
2768.aurora .tabbar a.tab-link,
2769.aurora .tabbar-labels a.tab-link,
2770.aurora .tabbar a.link,
2771.aurora .tabbar-labels a.link {
2772 transition-duration: 200ms;
2773}
2774.aurora .tabbar-labels a.tab-link,
2775.aurora .tabbar-labels a.link {
2776 padding-top: 5px;
2777 padding-bottom: 5px;
2778}
2779.aurora .tabbar-labels a.tab-link i + span,
2780.aurora .tabbar-labels a.link i + span {
2781 margin: 0;
2782}
2783.aurora .tabbar-scrollable .toolbar-inner {
2784 justify-content: flex-start;
2785}
2786.aurora .tabbar-scrollable a.tab-link,
2787.aurora .tabbar-scrollable a.link {
2788 padding: 0 15px;
2789}
5309fbda
DC
2790/* === Subnavbar === */
2791:root {
2792 /*
2793 --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
2794 --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
2795 --f7-subnavbar-border-color: var(--f7-bars-border-color);
2796 --f7-subnavbar-link-color: var(--f7-bars-link-color);
2797 --f7-subnavbar-text-color: var(--f7-bars-text-color);
2798 */
5d51ea26 2799 --f7-subnavbar-title-line-height: 1.2;
5309fbda
DC
2800}
2801.ios {
2802 --f7-subnavbar-height: 44px;
2803 --f7-subnavbar-inner-padding-left: 8px;
2804 --f7-subnavbar-inner-padding-right: 8px;
2805 --f7-subnavbar-title-font-size: 34px;
2806 --f7-subnavbar-title-font-weight: 700;
5309fbda
DC
2807 --f7-subnavbar-title-letter-spacing: -0.03em;
2808 --f7-subnavbar-title-margin-left: 7px;
5d51ea26
DC
2809 --f7-subnavbar-shadow-image: none;
2810 /*
2811 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
2812 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
2813 */
5309fbda
DC
2814}
2815.md {
2816 --f7-subnavbar-height: 48px;
2817 --f7-subnavbar-inner-padding-left: 16px;
2818 --f7-subnavbar-inner-padding-right: 16px;
2819 --f7-subnavbar-title-font-size: 20px;
2820 --f7-subnavbar-title-font-weight: 500;
5309fbda
DC
2821 --f7-subnavbar-title-letter-spacing: 0;
2822 --f7-subnavbar-title-margin-left: 0px;
5d51ea26
DC
2823 --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
2824 /*
2825 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
2826 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
2827 */
2828}
2829.aurora {
2830 --f7-subnavbar-height: 38px;
2831 --f7-subnavbar-inner-padding-left: 15px;
2832 --f7-subnavbar-inner-padding-right: 15px;
2833 --f7-subnavbar-title-font-size: 26px;
2834 --f7-subnavbar-title-font-weight: bold;
2835 --f7-subnavbar-title-letter-spacing: -0.03em;
2836 --f7-subnavbar-title-margin-left: 0px;
2837 --f7-subnavbar-shadow-image: none;
2838 --f7-subnavbar-link-height: auto;
2839 --f7-subnavbar-link-line-height: inherit;
5309fbda
DC
2840}
2841.subnavbar {
2842 width: 100%;
2843 position: absolute;
2844 left: 0;
2845 top: 0;
2846 z-index: 500;
2847 box-sizing: border-box;
2848 display: flex;
2849 justify-content: space-between;
2850 align-items: center;
2851 background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
2852 background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
2853 color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
2854}
2855.subnavbar .title {
2856 position: relative;
2857 overflow: hidden;
2858 text-overflow: ellpsis;
2859 white-space: nowrap;
2860 font-size: var(--f7-subnavbar-title-font-size);
2861 font-weight: var(--f7-subnavbar-title-font-weight);
2862 text-align: left;
2863 display: inline-block;
2864 line-height: var(--f7-subnavbar-title-line-height);
2865 letter-spacing: var(--f7-subnavbar-title-letter-spacing);
2866 margin-left: var(--f7-subnavbar-title-margin-left);
2867}
2868.subnavbar .left,
2869.subnavbar .right {
2870 flex-shrink: 0;
2871 display: flex;
2872 justify-content: flex-start;
2873 align-items: center;
2874}
2875.subnavbar .right:first-child {
2876 position: absolute;
2877 height: 100%;
2878}
2879.subnavbar a {
2880 color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2881}
2882.subnavbar a.link {
5d51ea26
DC
2883 line-height: var(--f7-subnavbar-link-line-height, var(--f7-subnavbar-height));
2884 height: var(--f7-subnavbar-link-height, var(--f7-subnavbar-height));
5309fbda
DC
2885}
2886.subnavbar a.icon-only {
2887 min-width: var(--f7-subnavbar-height);
2888}
2889.subnavbar.no-hairline:after,
2890.subnavbar.no-border:after {
2891 display: none !important;
2892}
2893.subnavbar.no-shadow:before,
2894.subnavbar.navbar-hidden:before {
2895 display: none !important;
2896}
2897.subnavbar:after,
2898.subnavbar:before {
2899 -webkit-backface-visibility: hidden;
2900 backface-visibility: hidden;
2901}
2902.subnavbar:after {
2903 content: '';
2904 position: absolute;
5d51ea26 2905 background-color: var(--f7-subnavbar-border-color, var(--f7-bars-border-color));
5309fbda
DC
2906 display: block;
2907 z-index: 15;
2908 top: auto;
2909 right: auto;
2910 bottom: 0;
2911 left: 0;
2912 height: 1px;
2913 width: 100%;
2914 transform-origin: 50% 100%;
2915 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2916}
2917.subnavbar:before {
2918 content: '';
2919 position: absolute;
2920 right: 0;
2921 width: 100%;
2922 top: 100%;
2923 bottom: auto;
2924 height: 8px;
2925 pointer-events: none;
5d51ea26 2926 background: var(--f7-subnavbar-shadow-image);
5309fbda
DC
2927}
2928.subnavbar-inner {
2929 width: 100%;
2930 height: 100%;
2931 display: flex;
2932 align-items: center;
2933 box-sizing: border-box;
2934 justify-content: space-between;
2935 overflow: hidden;
2936 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));
2937}
2938.subnavbar-inner.stacked {
2939 display: none;
2940}
2941.navbar .subnavbar {
2942 top: 100%;
2943}
2944.views > .subnavbar,
2945.view > .subnavbar,
2946.page > .subnavbar {
2947 position: absolute;
2948}
2949.navbar ~ * .subnavbar,
2950.page-with-subnavbar .navbar ~ .subnavbar,
2951.page-with-subnavbar .navbar ~ * .subnavbar,
2952.navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
2953.navbar ~ .subnavbar {
2954 top: var(--f7-navbar-height);
2955}
2956.navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
2957.page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
2958.page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar {
2959 top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
2960 transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2961}
2962.navbar .title-large ~ .subnavbar {
2963 top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
2964 transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2965}
5d51ea26
DC
2966.page-with-subnavbar,
2967.subnavbar ~ * {
2968 --f7-page-subnavbar-offset: var(--f7-subnavbar-height);
5309fbda
DC
2969}
2970.ios .subnavbar {
2971 height: calc(var(--f7-subnavbar-height) + 1px);
2972 margin-top: -1px;
2973 padding-top: 1px;
2974}
2975.ios .subnavbar .title {
2976 align-self: flex-start;
2977 flex-shrink: 10;
2978}
2979.ios .subnavbar .left a + a,
2980.ios .subnavbar .right a + a {
2981 margin-left: 15px;
2982}
2983.ios .subnavbar .left {
2984 margin-right: 10px;
2985}
2986.ios .subnavbar .right {
2987 margin-left: 10px;
2988}
2989.ios .subnavbar .right:first-child {
2990 right: 8px;
2991}
2992.ios .subnavbar a.link {
2993 justify-content: flex-start;
2994}
2995.ios .subnavbar a.icon-only {
2996 justify-content: center;
2997 margin: 0;
2998}
2999.md .subnavbar {
3000 height: var(--f7-subnavbar-height);
3001}
3002.md .subnavbar .right {
3003 margin-left: auto;
3004}
3005.md .subnavbar .right:first-child {
3006 right: 16px;
3007}
3008.md .subnavbar a.link {
3009 justify-content: center;
3010 padding: 0 16px;
3011}
3012.md .subnavbar a.link:before {
3013 content: '';
3014 width: 152%;
3015 height: 152%;
3016 position: absolute;
3017 left: -26%;
3018 top: -26%;
3019 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
3020 background-repeat: no-repeat;
3021 background-position: center;
3022 background-size: 100% 100%;
3023 opacity: 0;
3024 pointer-events: none;
3025 transition-duration: 600ms;
3026}
3027.md .subnavbar a.link.active-state:before {
3028 opacity: 1;
3029 transition-duration: 150ms;
3030}
3031.md .subnavbar a.icon-only {
3032 flex-shrink: 0;
3033}
3034.md .subnavbar-inner > a.link:first-child {
3035 margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
3036}
3037.md .subnavbar-inner > a.link:last-child {
3038 margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
3039}
5d51ea26
DC
3040.aurora .subnavbar {
3041 height: calc(var(--f7-subnavbar-height) + 1px);
3042 margin-top: -1px;
3043 padding-top: 1px;
3044}
3045.aurora .subnavbar .title {
3046 align-self: flex-start;
3047 flex-shrink: 10;
3048}
3049.aurora .subnavbar .left a + a,
3050.aurora .subnavbar .right a + a {
3051 margin-left: 10px;
3052}
3053.aurora .subnavbar .left {
3054 margin-right: 10px;
3055}
3056.aurora .subnavbar .right {
3057 margin-left: 10px;
3058}
3059.aurora .subnavbar .right:first-child {
3060 right: 15px;
3061}
3062.aurora .subnavbar a.link {
3063 justify-content: flex-start;
3064}
3065.aurora .subnavbar a.icon-only {
3066 justify-content: center;
3067 margin: 0;
3068}
5309fbda
DC
3069/* === Content Block === */
3070:root {
3071 --f7-block-font-size: inherit;
3072 --f7-block-strong-bg-color: #fff;
3073 --f7-block-title-font-size: inherit;
3074 --f7-block-header-margin: 10px;
3075 --f7-block-footer-margin: 10px;
3076 --f7-block-header-font-size: 14px;
3077 --f7-block-footer-font-size: 14px;
3078 --f7-block-title-white-space: nowrap;
3079 --f7-block-title-medium-text-color: #000;
3080 --f7-block-title-medium-text-transform: none;
3081 --f7-block-title-large-text-color: #000;
3082 --f7-block-title-large-text-transform: none;
3083}
3084:root .theme-dark,
3085:root.theme-dark {
5d51ea26 3086 --f7-block-strong-border-color: #282829;
5309fbda
DC
3087 --f7-block-title-medium-text-color: #fff;
3088 --f7-block-title-large-text-color: #fff;
5d51ea26 3089 --f7-block-strong-bg-color: #1c1c1d;
5309fbda
DC
3090}
3091.ios {
3092 --f7-block-text-color: #6d6d72;
3093 --f7-block-padding-horizontal: 15px;
3094 --f7-block-padding-vertical: 15px;
3095 --f7-block-margin-vertical: 35px;
3096 --f7-block-strong-text-color: #000;
3097 --f7-block-strong-border-color: #c8c7cc;
3098 --f7-block-title-text-transform: uppercase;
3099 --f7-block-title-text-color: #6d6d72;
3100 --f7-block-title-font-weight: 400;
3101 --f7-block-title-line-height: 17px;
3102 --f7-block-title-margin-bottom: 10px;
3103 --f7-block-title-medium-font-size: 22px;
3104 --f7-block-title-medium-font-weight: bold;
3105 --f7-block-title-medium-line-height: 1.4;
3106 --f7-block-title-large-font-size: 29px;
3107 --f7-block-title-large-font-weight: bold;
3108 --f7-block-title-large-line-height: 1.3;
3109 --f7-block-inset-side-margin: 15px;
3110 --f7-block-inset-border-radius: 7px;
3111 --f7-block-header-text-color: #8f8f94;
3112 --f7-block-footer-text-color: #8f8f94;
3113}
3114.ios .theme-dark,
3115.ios.theme-dark {
5309fbda
DC
3116 --f7-block-title-text-color: #8E8E93;
3117 --f7-block-header-text-color: #8E8E93;
3118 --f7-block-footer-text-color: #8E8E93;
5309fbda
DC
3119 --f7-block-strong-text-color: #fff;
3120}
3121.md {
3122 --f7-block-text-color: inherit;
3123 --f7-block-padding-horizontal: 16px;
3124 --f7-block-padding-vertical: 16px;
3125 --f7-block-margin-vertical: 32px;
3126 --f7-block-strong-text-color: inherit;
3127 --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3128 --f7-block-title-text-transform: none;
3129 --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
3130 --f7-block-title-font-weight: 500;
3131 --f7-block-title-line-height: 16px;
3132 --f7-block-title-margin-bottom: 16px;
3133 --f7-block-title-medium-font-size: 24px;
3134 --f7-block-title-medium-font-weight: 500;
3135 --f7-block-title-medium-line-height: 1.3;
3136 --f7-block-title-large-font-size: 34px;
3137 --f7-block-title-large-font-weight: 500;
3138 --f7-block-title-large-line-height: 1.2;
3139 --f7-block-inset-side-margin: 16px;
3140 --f7-block-inset-border-radius: 4px;
3141 --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
3142 --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
3143}
3144.md .theme-dark,
3145.md.theme-dark {
5309fbda
DC
3146 --f7-block-title-text-color: #fff;
3147 --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
3148 --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
5d51ea26
DC
3149}
3150.aurora {
3151 --f7-block-text-color: inherit;
3152 --f7-block-padding-horizontal: 15px;
3153 --f7-block-padding-vertical: 15px;
3154 --f7-block-margin-vertical: 15px;
3155 --f7-block-strong-text-color: inherit;
3156 --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3157 --f7-block-title-text-transform: none;
3158 --f7-block-title-text-color: rgba(0, 0, 0, 0.7);
3159 --f7-block-title-font-weight: 600;
3160 --f7-block-title-line-height: 1.5;
3161 --f7-block-title-margin-bottom: 5px;
3162 --f7-block-title-medium-font-size: 20px;
3163 --f7-block-title-medium-font-weight: 600;
3164 --f7-block-title-medium-line-height: 1.4;
3165 --f7-block-title-large-font-size: 28px;
3166 --f7-block-title-large-font-weight: bold;
3167 --f7-block-title-large-line-height: 1.3;
3168 --f7-block-inset-side-margin: 15px;
3169 --f7-block-inset-border-radius: 4px;
3170 --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
3171 --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
3172}
3173.aurora .theme-dark,
3174.aurora.theme-dark {
3175 --f7-block-title-text-color: #fff;
3176 --f7-block-header-text-color: rgba(255, 255, 255, 0.52);
3177 --f7-block-footer-text-color: rgba(255, 255, 255, 0.52);
3178 --f7-block-strong-text-color: #fff;
5309fbda
DC
3179}
3180.block {
3181 box-sizing: border-box;
3182 position: relative;
3183 z-index: 1;
3184 color: var(--f7-block-text-color);
3185 margin: var(--f7-block-margin-vertical) 0;
3186 padding-top: 0;
3187 padding-bottom: 0;
3188 padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3189 padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3190 font-size: var(--f7-block-font-size);
3191}
3192.block.no-hairlines:before,
3193.block.no-hairlines ul:before,
3194.md .block.no-hairlines-md:before,
3195.md .block.no-hairlines-md ul:before,
3196.ios .block.no-hairlines-ios:before,
5d51ea26
DC
3197.ios .block.no-hairlines-ios ul:before,
3198.aurora .block.no-hairlines-aurora:before,
3199.aurora .block.no-hairlines-aurora ul:before {
5309fbda
DC
3200 display: none !important;
3201}
3202.block.no-hairlines:after,
3203.block.no-hairlines ul:after,
3204.md .block.no-hairlines-md:after,
3205.md .block.no-hairlines-md ul:after,
3206.ios .block.no-hairlines-ios:after,
5d51ea26
DC
3207.ios .block.no-hairlines-ios ul:after,
3208.aurora .block.no-hairlines-aurora:after,
3209.aurora .block.no-hairlines-aurora ul:after {
5309fbda
DC
3210 display: none !important;
3211}
3212.block.no-hairline-top:before,
3213.block.no-hairline-top ul:before,
3214.md .block.no-hairline-top-md:before,
3215.md .block.no-hairline-top-md ul:before,
3216.ios .block.no-hairline-top-ios:before,
5d51ea26
DC
3217.ios .block.no-hairline-top-ios ul:before,
3218.aurora .block.no-hairline-top-aurora:before,
3219.aurora .block.no-hairline-top-aurora ul:before {
5309fbda
DC
3220 display: none !important;
3221}
3222.block.no-hairline-bottom:after,
3223.block.no-hairline-bottom ul:after,
3224.md .block.no-hairline-bottom-md:after,
3225.md .block.no-hairline-bottom-md ul:after,
3226.ios .block.no-hairline-bottom-ios:after,
5d51ea26
DC
3227.ios .block.no-hairline-bottom-ios ul:after,
3228.aurora .block.no-hairline-bottom-aurora:after,
3229.aurora .block.no-hairline-bottom-aurora ul:after {
5309fbda
DC
3230 display: none !important;
3231}
3232.block > h1:first-child,
3233.block > h2:first-child,
3234.block > h3:first-child,
3235.block > h4:first-child,
3236.block > p:first-child {
3237 margin-top: 0;
3238}
3239.block > h1:last-child,
3240.block > h2:last-child,
3241.block > h3:last-child,
3242.block > h4:last-child,
3243.block > p:last-child {
3244 margin-bottom: 0;
3245}
3246.block-strong {
3247 color: var(--f7-block-strong-text-color);
3248 padding-top: var(--f7-block-padding-vertical);
3249 padding-bottom: var(--f7-block-padding-vertical);
3250 background-color: var(--f7-block-strong-bg-color);
3251}
3252.block-strong:before {
3253 content: '';
3254 position: absolute;
3255 background-color: var(--f7-block-strong-border-color);
3256 display: block;
3257 z-index: 15;
3258 top: 0;
3259 right: auto;
3260 bottom: auto;
3261 left: 0;
3262 height: 1px;
3263 width: 100%;
3264 transform-origin: 50% 0%;
3265 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3266}
3267.block-strong:after {
3268 content: '';
3269 position: absolute;
3270 background-color: var(--f7-block-strong-border-color);
3271 display: block;
3272 z-index: 15;
3273 top: auto;
3274 right: auto;
3275 bottom: 0;
3276 left: 0;
3277 height: 1px;
3278 width: 100%;
3279 transform-origin: 50% 100%;
3280 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3281}
3282.block-title {
3283 position: relative;
3284 overflow: hidden;
3285 margin: 0;
3286 white-space: var(--f7-block-title-white-space);
3287 text-overflow: ellipsis;
3288 text-transform: var(--f7-block-title-text-transform);
3289 color: var(--f7-block-title-text-color);
3290 font-size: var(--f7-block-title-font-size, inherit);
3291 font-weight: var(--f7-block-title-font-weight);
3292 line-height: var(--f7-block-title-line-height);
3293 margin-top: var(--f7-block-margin-vertical);
3294 margin-bottom: var(--f7-block-title-margin-bottom);
3295 margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3296 margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3297}
3298.block-title + .list,
3299.block-title + .block,
3300.block-title + .card,
3301.block-title + .timeline,
3302.block-title + .block-header {
3303 margin-top: 0px;
3304}
3305.block-title-medium {
3306 font-size: var(--f7-block-title-medium-font-size);
3307 text-transform: var(--f7-block-title-medium-text-transform);
3308 color: var(--f7-block-title-medium-text-color);
3309 font-weight: var(--f7-block-title-medium-font-weight);
3310 line-height: var(--f7-block-title-medium-line-height);
3311}
3312.block-title-large {
3313 font-size: var(--f7-block-title-large-font-size);
3314 text-transform: var(--f7-block-title-large-text-transform);
3315 color: var(--f7-block-title-large-text-color);
3316 font-weight: var(--f7-block-title-large-font-weight);
3317 line-height: var(--f7-block-title-large-line-height);
3318}
3319.block > .block-title:first-child,
3320.list > .block-title:first-child {
3321 margin-top: 0;
3322 margin-left: 0;
3323 margin-right: 0;
3324}
3325.block-header {
3326 color: var(--f7-block-header-text-color);
3327 font-size: var(--f7-block-header-font-size);
3328 margin-bottom: var(--f7-block-header-margin);
3329 margin-top: var(--f7-block-margin-vertical);
3330}
3331.block-header + .list,
3332.block-header + .block,
3333.block-header + .card,
3334.block-header + .timeline {
3335 margin-top: var(--f7-block-header-margin);
3336}
3337.block-footer {
3338 color: var(--f7-block-footer-text-color);
3339 font-size: var(--f7-block-footer-font-size);
3340 margin-top: var(--f7-block-footer-margin);
3341 margin-bottom: var(--f7-block-margin-vertical);
3342}
3343.block-footer,
3344.block-header {
3345 padding-top: 0;
3346 padding-bottom: 0;
3347 padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3348 padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3349}
3350.block-footer ul:first-child,
3351.block-header ul:first-child,
3352.block-footer p:first-child,
3353.block-header p:first-child,
3354.block-footer h1:first-child,
3355.block-header h1:first-child,
3356.block-footer h2:first-child,
3357.block-header h2:first-child,
3358.block-footer h3:first-child,
3359.block-header h3:first-child,
3360.block-footer h4:first-child,
3361.block-header h4:first-child {
3362 margin-top: 0;
3363}
3364.block-footer ul:last-child,
3365.block-header ul:last-child,
3366.block-footer p:last-child,
3367.block-header p:last-child,
3368.block-footer h1:last-child,
3369.block-header h1:last-child,
3370.block-footer h2:last-child,
3371.block-header h2:last-child,
3372.block-footer h3:last-child,
3373.block-header h3:last-child,
3374.block-footer h4:last-child,
3375.block-header h4:last-child {
3376 margin-bottom: 0;
3377}
3378.block-footer ul:first-child:last-child,
3379.block-header ul:first-child:last-child,
3380.block-footer p:first-child:last-child,
3381.block-header p:first-child:last-child,
3382.block-footer h1:first-child:last-child,
3383.block-header h1:first-child:last-child,
3384.block-footer h2:first-child:last-child,
3385.block-header h2:first-child:last-child,
3386.block-footer h3:first-child:last-child,
3387.block-header h3:first-child:last-child,
3388.block-footer h4:first-child:last-child,
3389.block-header h4:first-child:last-child {
3390 margin-top: 0;
3391 margin-bottom: 0;
3392}
3393.list .block-header,
3394.block .block-header,
3395.card .block-header,
3396.timeline .block-header {
3397 margin-top: 0;
3398}
3399.list .block-footer,
3400.block .block-footer,
3401.card .block-footer,
3402.timeline .block-footer {
3403 margin-bottom: 0;
3404}
3405.list + .block-footer,
3406.block + .block-footer,
3407.card + .block-footer,
3408.timeline + .block-footer {
3409 margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
3410}
3411.block + .block-footer {
3412 margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
3413 margin-bottom: var(--f7-block-margin-vertical);
3414}
3415.block .block-header,
3416.block .block-footer {
3417 padding: 0;
3418}
3419.block.inset {
3420 border-radius: var(--f7-block-inset-border-radius);
3421 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
3422 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
3423 --f7-safe-area-left: 0px;
3424 --f7-safe-area-right: 0px;
3425}
3426.block-strong.inset:before {
3427 display: none !important;
3428}
3429.block-strong.inset:after {
3430 display: none !important;
3431}
3432@media (min-width: 768px) {
3433 .block.tablet-inset {
3434 border-radius: var(--f7-block-inset-border-radius);
3435 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
3436 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
3437 --f7-safe-area-left: 0px;
3438 --f7-safe-area-right: 0px;
3439 }
3440 .block-strong.tablet-inset:before {
3441 display: none !important;
3442 }
3443 .block-strong.tablet-inset:after {
3444 display: none !important;
3445 }
3446}
3447/* === List View === */
3448:root {
3449 --f7-list-bg-color: #fff;
3450 --f7-list-item-text-max-lines: 2;
3451 --f7-list-chevron-icon-color: #c7c7cc;
5d51ea26 3452 --f7-list-chevron-icon-font-size: 20px;
5309fbda
DC
3453 --f7-list-item-title-font-size: inherit;
3454 --f7-list-item-title-font-weight: 400;
3455 --f7-list-item-title-text-color: inherit;
3456 --f7-list-item-title-line-height: inherit;
3457 --f7-list-item-title-white-space: nowrap;
3458 --f7-list-item-subtitle-font-weight: 400;
3459 --f7-list-item-subtitle-text-color: inherit;
3460 --f7-list-item-subtitle-line-height: inherit;
5d51ea26
DC
3461 --f7-list-item-text-font-weight: 400;
3462 --f7-list-item-after-font-weight: 400;
5309fbda
DC
3463 --f7-list-item-header-text-color: inherit;
3464 --f7-list-item-header-font-size: 12px;
3465 --f7-list-item-header-font-weight: 400;
3466 --f7-list-item-header-line-height: 1.2;
3467 --f7-list-item-footer-font-size: 12px;
3468 --f7-list-item-footer-font-weight: 400;
3469 --f7-list-item-footer-line-height: 1.2;
5d51ea26
DC
3470 --f7-list-button-font-size: inherit;
3471 --f7-list-button-font-weight: 400;
3472 --f7-list-item-divider-line-height: inherit;
3473 --f7-list-group-title-line-height: inherit;
3474}
3475:root .theme-dark,
3476:root.theme-dark {
3477 --f7-list-bg-color: #1c1c1d;
3478 --f7-list-border-color: #282829;
3479 --f7-list-item-border-color: #282829;
3480 --f7-list-item-divider-border-color: #282829;
3481 --f7-list-item-divider-bg-color: #232323;
3482 --f7-list-group-title-bg-color: #232323;
3483 --f7-list-chevron-icon-color: #434345;
5309fbda
DC
3484}
3485.ios {
5d51ea26 3486 --f7-list-in-list-padding-left: 30px;
5309fbda
DC
3487 --f7-list-inset-side-margin: 15px;
3488 --f7-list-inset-border-radius: 7px;
3489 --f7-list-margin-vertical: 35px;
3490 --f7-list-font-size: 17px;
3491 --f7-list-chevron-icon-area: 20px;
3492 --f7-list-border-color: #c8c7cc;
3493 --f7-list-item-border-color: #c8c7cc;
3494 --f7-list-link-pressed-bg-color: #d9d9d9;
3495 --f7-list-item-subtitle-font-size: 15px;
3496 --f7-list-item-text-font-size: 15px;
5309fbda
DC
3497 --f7-list-item-text-text-color: #8e8e93;
3498 --f7-list-item-text-line-height: 21px;
3499 --f7-list-item-after-font-size: inherit;
5309fbda
DC
3500 --f7-list-item-after-text-color: #8e8e93;
3501 --f7-list-item-after-line-height: inherit;
3502 --f7-list-item-after-padding: 5px;
3503 --f7-list-item-footer-text-color: #8e8e93;
3504 --f7-list-item-min-height: 44px;
3505 --f7-list-item-media-margin: 15px;
3506 --f7-list-item-media-icons-margin: 5px;
3507 --f7-list-item-cell-margin: 15px;
3508 --f7-list-item-padding-vertical: 8px;
3509 --f7-list-item-padding-horizontal: 15px;
3510 --f7-list-media-item-padding-vertical: 10px;
3511 --f7-list-media-item-padding-horizontal: 15px;
5d51ea26 3512 --f7-list-media-item-title-font-weight: 600;
5309fbda
DC
3513 /*
3514 --f7-list-button-text-color: var(--f7-theme-color);
3515 */
5309fbda
DC
3516 --f7-list-button-text-align: center;
3517 --f7-list-button-border-color: #c8c7cc;
3518 --f7-list-button-pressed-bg-color: #d9d9d9;
3519 --f7-list-item-divider-height: 31px;
3520 --f7-list-item-divider-text-color: #8e8e93;
3521 --f7-list-item-divider-font-size: inherit;
3522 --f7-list-item-divider-font-weight: 400;
3523 --f7-list-item-divider-bg-color: #f7f7f7;
5309fbda
DC
3524 --f7-list-item-divider-border-color: #c8c7cc;
3525 --f7-list-group-title-height: 31px;
3526 --f7-list-group-title-text-color: #8e8e93;
3527 --f7-list-group-title-font-size: inherit;
3528 --f7-list-group-title-font-weight: 400;
3529 --f7-list-group-title-bg-color: #f7f7f7;
5309fbda
DC
3530}
3531.ios .theme-dark,
3532.ios.theme-dark {
5309fbda 3533 --f7-list-button-border-color: #282829;
5309fbda
DC
3534 --f7-list-link-pressed-bg-color: #363636;
3535 --f7-list-button-pressed-bg-color: #363636;
5309fbda
DC
3536}
3537.md {
5d51ea26 3538 --f7-list-in-list-padding-left: 40px;
5309fbda
DC
3539 --f7-list-inset-side-margin: 16px;
3540 --f7-list-inset-border-radius: 4px;
3541 --f7-list-margin-vertical: 32px;
3542 --f7-list-font-size: 16px;
3543 --f7-list-chevron-icon-area: 26px;
3544 --f7-list-border-color: rgba(0, 0, 0, 0.12);
3545 --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
3546 --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
3547 --f7-list-item-subtitle-font-size: 14px;
3548 --f7-list-item-text-font-size: 14px;
5309fbda
DC
3549 --f7-list-item-text-text-color: #757575;
3550 --f7-list-item-text-line-height: 20px;
3551 --f7-list-item-after-font-size: 14px;
5309fbda
DC
3552 --f7-list-item-after-text-color: #757575;
3553 --f7-list-item-after-line-height: inherit;
3554 --f7-list-item-after-padding: 8px;
3555 --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
3556 --f7-list-item-min-height: 48px;
3557 --f7-list-item-media-margin: 16px;
3558 --f7-list-item-media-icons-margin: 8px;
3559 --f7-list-item-cell-margin: 16px;
3560 --f7-list-item-padding-vertical: 8px;
3561 --f7-list-item-padding-horizontal: 16px;
3562 --f7-list-media-item-padding-vertical: 14px;
3563 --f7-list-media-item-padding-horizontal: 16px;
5d51ea26
DC
3564 /*
3565 --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
3566 */
5309fbda 3567 --f7-list-button-text-color: #212121;
5309fbda
DC
3568 --f7-list-button-text-align: left;
3569 --f7-list-button-border-color: transparent;
3570 --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
3571 --f7-list-item-divider-height: 48px;
3572 --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
3573 --f7-list-item-divider-font-size: 14px;
3574 --f7-list-item-divider-font-weight: 400;
3575 --f7-list-item-divider-bg-color: #f4f4f4;
5309fbda
DC
3576 --f7-list-item-divider-border-color: transparent;
3577 --f7-list-group-title-height: 48px;
3578 --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
3579 --f7-list-group-title-font-size: 14px;
3580 --f7-list-group-title-font-weight: 400;
3581 --f7-list-group-title-bg-color: #f4f4f4;
5309fbda
DC
3582}
3583.md .theme-dark,
3584.md.theme-dark {
5309fbda 3585 --f7-list-button-text-color: #fff;
5309fbda 3586 --f7-list-item-divider-text-color: #fff;
5309fbda
DC
3587 --f7-list-group-title-text-color: #fff;
3588 --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
3589 --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
5309fbda
DC
3590 --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
3591 --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
3592 --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
3593}
5d51ea26
DC
3594.aurora {
3595 --f7-list-in-list-padding-left: 15px;
3596 --f7-list-inset-side-margin: 15px;
3597 --f7-list-inset-border-radius: 4px;
3598 --f7-list-margin-vertical: 15px;
3599 --f7-list-font-size: 14px;
3600 --f7-list-chevron-icon-area: 15px;
3601 --f7-list-chevron-icon-font-size: 16px;
3602 --f7-list-border-color: rgba(0, 0, 0, 0.12);
3603 --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
3604 --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
3605 --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
3606 --f7-list-item-title-line-height: 1.3;
3607 --f7-list-item-subtitle-font-size: 14px;
3608 --f7-list-item-subtitle-line-height: 1.3;
3609 --f7-list-item-text-font-size: 12px;
3610 --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
3611 --f7-list-item-text-line-height: 16px;
3612 --f7-list-item-after-font-size: 13px;
3613 --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
3614 --f7-list-item-after-line-height: 1.2;
3615 --f7-list-item-after-padding: 5px;
3616 --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
3617 --f7-list-item-min-height: 32px;
3618 --f7-list-item-media-margin: 10px;
3619 --f7-list-item-media-icons-margin: 5px;
3620 --f7-list-item-cell-margin: 15px;
3621 --f7-list-item-padding-vertical: 5px;
3622 --f7-list-item-padding-horizontal: 15px;
3623 --f7-list-media-item-padding-vertical: 5px;
3624 --f7-list-media-item-padding-horizontal: 15px;
3625 --f7-list-media-item-title-font-weight: 600;
3626 /*
3627 --f7-list-button-text-color: var(--f7-theme-color);
3628 */
3629 --f7-list-button-text-align: center;
3630 --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
3631 --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
3632 --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
3633 --f7-list-item-divider-height: 19px;
3634 --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
3635 --f7-list-item-divider-font-size: inherit;
3636 --f7-list-item-divider-font-weight: 500;
3637 --f7-list-item-divider-bg-color: #f7f7f7;
3638 --f7-list-item-divider-border-color: transparent;
3639 --f7-list-group-title-height: 19px;
3640 --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
3641 --f7-list-group-title-font-size: inherit;
3642 --f7-list-group-title-font-weight: 500;
3643 --f7-list-group-title-bg-color: #f7f7f7;
3644}
3645.aurora .theme-dark,
3646.aurora.theme-dark {
3647 --f7-list-button-border-color: #282829;
3648 --f7-list-item-text-text-color: rgba(255, 255, 255, 0.52);
3649 --f7-list-item-after-text-color: rgba(255, 255, 255, 0.52);
3650 --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.52);
3651 --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
3652 --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
3653 --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
3654 --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
3655 --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
3656 --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
3657}
5309fbda
DC
3658.list {
3659 position: relative;
3660 z-index: 1;
3661 font-size: var(--f7-list-font-size);
3662 margin: var(--f7-list-margin-vertical) 0;
3663}
3664.list ul {
3665 list-style: none;
3666 margin: 0;
3667 padding: 0;
3668 position: relative;
3669 background: var(--f7-list-bg-color);
3670}
3671.list ul:before {
3672 content: '';
3673 position: absolute;
3674 background-color: var(--f7-list-border-color);
3675 display: block;
3676 z-index: 15;
3677 top: 0;
3678 right: auto;
3679 bottom: auto;
3680 left: 0;
3681 height: 1px;
3682 width: 100%;
3683 transform-origin: 50% 0%;
3684 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3685}
3686.list ul:after {
3687 content: '';
3688 position: absolute;
3689 background-color: var(--f7-list-border-color);
3690 display: block;
3691 z-index: 15;
3692 top: auto;
3693 right: auto;
3694 bottom: 0;
3695 left: 0;
3696 height: 1px;
3697 width: 100%;
3698 transform-origin: 50% 100%;
3699 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3700}
5d51ea26
DC
3701.list ul ul {
3702 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left));
3703}
5309fbda
DC
3704.list ul ul:before {
3705 display: none !important;
3706}
3707.list ul ul:after {
3708 display: none !important;
3709}
3710.list li {
3711 position: relative;
3712 box-sizing: border-box;
3713}
3714.list .item-media {
3715 display: flex;
3716 flex-shrink: 0;
3717 flex-wrap: nowrap;
3718 align-items: center;
3719 box-sizing: border-box;
3720 padding-bottom: var(--f7-list-item-padding-vertical);
3721 padding-top: var(--f7-list-item-padding-vertical);
3722}
3723.list .item-media + .item-inner {
3724 margin-left: var(--f7-list-item-media-margin);
3725}
3726.list .item-media i + i,
3727.list .item-media i + img {
3728 margin-left: var(--f7-list-item-media-icons-margin);
3729}
3730.list .item-after {
3731 padding-left: var(--f7-list-item-after-padding);
3732}
3733.list .item-inner {
3734 position: relative;
3735 width: 100%;
3736 min-width: 0;
3737 display: flex;
3738 justify-content: space-between;
3739 box-sizing: border-box;
3740 align-items: center;
3741 align-self: stretch;
3742 padding-top: var(--f7-list-item-padding-vertical);
3743 padding-bottom: var(--f7-list-item-padding-vertical);
3744 min-height: var(--f7-list-item-min-height);
3745 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3746}
3747.list .item-title {
3748 min-width: 0;
3749 flex-shrink: 1;
3750 white-space: var(--f7-list-item-title-white-space);
3751 position: relative;
3752 overflow: hidden;
3753 text-overflow: ellipsis;
3754 max-width: 100%;
3755 font-size: var(--f7-list-item-title-font-size);
3756 font-weight: var(--f7-list-item-title-font-weight);
3757 color: var(--f7-list-item-title-text-color);
3758 line-height: var(--f7-list-item-title-line-height);
3759}
3760.list .item-after {
3761 white-space: nowrap;
3762 flex-shrink: 0;
3763 display: flex;
3764 font-size: var(--f7-list-item-after-font-size);
3765 font-weight: var(--f7-list-item-after-font-weight);
3766 color: var(--f7-list-item-after-text-color);
3767 line-height: var(--f7-list-item-after-line-height);
3768 margin-left: auto;
3769}
3770.list .item-header,
3771.list .item-footer {
3772 white-space: normal;
3773}
3774.list .item-header {
3775 color: var(--f7-list-item-header-text-color);
3776 font-size: var(--f7-list-item-header-font-size);
3777 font-weight: var(--f7-list-item-header-font-weight);
3778 line-height: var(--f7-list-item-header-line-height);
3779}
3780.list .item-footer {
3781 color: var(--f7-list-item-footer-text-color);
3782 font-size: var(--f7-list-item-footer-font-size);
3783 font-weight: var(--f7-list-item-footer-font-weight);
3784 line-height: var(--f7-list-item-footer-line-height);
3785}
3786.list .item-link,
3787.list .list-button {
3788 transition-duration: 300ms;
3789 transition-property: background-color;
3790 display: block;
3791 position: relative;
3792 overflow: hidden;
3793 z-index: 0;
3794}
3795.list .item-link {
3796 color: inherit;
3797}
3798.list .item-link.active-state {
3799 background-color: var(--f7-list-link-pressed-bg-color);
3800}
3801.list .item-link .item-inner {
3802 padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3803}
3804.list .item-content {
3805 display: flex;
3806 justify-content: space-between;
3807 box-sizing: border-box;
3808 align-items: center;
3809 min-height: var(--f7-list-item-min-height);
3810 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3811}
3812.list .item-subtitle {
3813 position: relative;
3814 overflow: hidden;
3815 white-space: nowrap;
3816 max-width: 100%;
3817 text-overflow: ellipsis;
3818 font-size: var(--f7-list-item-subtitle-font-size);
3819 font-weight: var(--f7-list-item-subtitle-font-weight);
3820 color: var(--f7-list-item-subtitle-text-color);
3821 line-height: var(--f7-list-item-subtitle-line-height);
3822}
3823.list .item-text {
3824 position: relative;
3825 overflow: hidden;
3826 text-overflow: hidden;
3827 -webkit-line-clamp: var(--f7-list-item-text-max-lines);
3828 display: -webkit-box;
3829 font-size: var(--f7-list-item-text-font-size);
3830 font-weight: var(--f7-list-item-text-font-weight);
3831 color: var(--f7-list-item-text-text-color);
3832 line-height: var(--f7-list-item-text-line-height);
3833 max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines));
3834}
3835.list .item-title-row {
3836 position: relative;
3837 display: flex;
3838 justify-content: space-between;
3839 box-sizing: border-box;
3840}
3841.list .item-title-row .item-after {
3842 align-self: center;
3843}
3844.list .item-row {
3845 display: flex;
3846 justify-content: space-between;
3847 box-sizing: border-box;
3848}
3849.list .item-cell {
3850 display: block;
3851 align-self: center;
3852 box-sizing: border-box;
3853 width: 100%;
3854 min-width: 0;
3855 margin-left: var(--f7-list-item-cell-margin);
3856 flex-shrink: 1;
3857}
3858.list .item-cell:first-child {
3859 margin-left: 0;
3860}
3861.list .ripple-wave + .item-cell {
3862 margin-left: 0;
3863}
3864.list li:last-child .list-button:after {
3865 display: none !important;
3866}
3867.list li:last-child > .item-inner:after,
3868.list li:last-child li:last-child > .item-inner:after,
3869.list li:last-child > .item-content > .item-inner:after,
3870.list li:last-child li:last-child > .item-content > .item-inner:after,
3871.list li:last-child > .swipeout-content > .item-content > .item-inner:after,
3872.list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after,
3873.list li:last-child > .item-link > .item-content > .item-inner:after,
3874.list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
3875 display: none !important;
3876}
3877.list li li:last-child .item-inner:after,
3878.list li:last-child li .item-inner:after {
3879 content: '';
3880 position: absolute;
3881 background-color: var(--f7-list-item-border-color);
3882 display: block;
3883 z-index: 15;
3884 top: auto;
3885 right: auto;
3886 bottom: 0;
3887 left: 0;
3888 height: 1px;
3889 width: 100%;
3890 transform-origin: 50% 100%;
3891 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3892}
3893.list.no-hairlines:before,
3894.list.no-hairlines ul:before,
3895.md .list.no-hairlines-md:before,
3896.md .list.no-hairlines-md ul:before,
3897.ios .list.no-hairlines-ios:before,
5d51ea26
DC
3898.ios .list.no-hairlines-ios ul:before,
3899.aurora .list.no-hairlines-aurora:before,
3900.aurora .list.no-hairlines-aurora ul:before {
5309fbda
DC
3901 display: none !important;
3902}
3903.list.no-hairlines:after,
3904.list.no-hairlines ul:after,
3905.md .list.no-hairlines-md:after,
3906.md .list.no-hairlines-md ul:after,
3907.ios .list.no-hairlines-ios:after,
5d51ea26
DC
3908.ios .list.no-hairlines-ios ul:after,
3909.aurora .list.no-hairlines-aurora:after,
3910.aurora .list.no-hairlines-aurora ul:after {
5309fbda
DC
3911 display: none !important;
3912}
3913.list.no-hairline-top:before,
3914.list.no-hairline-top ul:before,
3915.md .list.no-hairline-top-md:before,
3916.md .list.no-hairline-top-md ul:before,
3917.ios .list.no-hairline-top-ios:before,
5d51ea26
DC
3918.ios .list.no-hairline-top-ios ul:before,
3919.aurora .list.no-hairline-top-aurora:before,
3920.aurora .list.no-hairline-top-aurora ul:before {
5309fbda
DC
3921 display: none !important;
3922}
3923.list.no-hairline-bottom:after,
3924.list.no-hairline-bottom ul:after,
3925.md .list.no-hairline-bottom-md:after,
3926.md .list.no-hairline-bottom-md ul:after,
3927.ios .list.no-hairline-bottom-ios:after,
5d51ea26
DC
3928.ios .list.no-hairline-bottom-ios ul:after,
3929.aurora .list.no-hairline-bottom-aurora:after,
3930.aurora .list.no-hairline-bottom-aurora ul:after {
5309fbda
DC
3931 display: none !important;
3932}
3933.list.no-hairlines-between .item-inner:after,
3934.md .list.no-hairlines-between-md .item-inner:after,
3935.ios .list.no-hairlines-between-ios .item-inner:after,
5d51ea26 3936.aurora .list.no-hairlines-between-aurora .item-inner:after,
5309fbda
DC
3937.list.no-hairlines-between .list-button:after,
3938.md .list.no-hairlines-between-md .list-button:after,
3939.ios .list.no-hairlines-between-ios .list-button:after,
5d51ea26 3940.aurora .list.no-hairlines-between-aurora .list-button:after,
5309fbda
DC
3941.list.no-hairlines-between .item-divider:after,
3942.md .list.no-hairlines-between-md .item-divider:after,
3943.ios .list.no-hairlines-between-ios .item-divider:after,
5d51ea26 3944.aurora .list.no-hairlines-between-aurora .item-divider:after,
5309fbda
DC
3945.list.no-hairlines-between .list-group-title:after,
3946.md .list.no-hairlines-between-md .list-group-title:after,
3947.ios .list.no-hairlines-between-ios .list-group-title:after,
5d51ea26 3948.aurora .list.no-hairlines-between-aurora .list-group-title:after,
5309fbda
DC
3949.list.no-hairlines-between .list-group-title:after,
3950.md .list.no-hairlines-between-md .list-group-title:after,
5d51ea26
DC
3951.ios .list.no-hairlines-between-ios .list-group-title:after,
3952.aurora .list.no-hairlines-between-aurora .list-group-title:after {
5309fbda
DC
3953 display: none !important;
3954}
3955.list.no-hairlines-between.simple-list li:after,
3956.md .list.no-hairlines-between-md.simple-list li:after,
5d51ea26
DC
3957.ios .list.no-hairlines-between-ios.simple-list li:after,
3958.aurora .list.no-hairlines-between-aurora.simple-list li:after {
5309fbda
DC
3959 display: none !important;
3960}
3961.list.no-hairlines-between.links-list a:after,
3962.md .list.no-hairlines-between-md.links-list a:after,
5d51ea26
DC
3963.ios .list.no-hairlines-between-ios.links-list a:after,
3964.aurora .list.no-hairlines-between-aurora.links-list a:after {
5309fbda
DC
3965 display: none !important;
3966}
3967.list-button {
3968 padding: 0 var(--f7-list-item-padding-horizontal);
3969 line-height: var(--f7-list-item-min-height);
3970 color: var(--f7-list-button-text-color, var(--f7-theme-color));
3971 font-size: var(--f7-list-button-font-size);
3972 font-weight: var(--f7-list-button-font-weight);
3973 text-align: var(--f7-list-button-text-align);
3974}
3975.list-button:after {
3976 content: '';
3977 position: absolute;
3978 background-color: var(--f7-list-button-border-color);
3979 display: block;
3980 z-index: 15;
3981 top: auto;
3982 right: auto;
3983 bottom: 0;
3984 left: 0;
3985 height: 1px;
3986 width: 100%;
3987 transform-origin: 50% 100%;
3988 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3989}
3990.list-button.active-state {
3991 background-color: var(--f7-list-button-pressed-bg-color);
3992}
3993.list-button[class*="color-"] {
3994 --f7-list-button-text-color: var(--f7-theme-color);
3995}
3996.simple-list li {
3997 position: relative;
3998 white-space: nowrap;
3999 text-overflow: ellipsis;
4000 max-width: 100%;
4001 box-sizing: border-box;
4002 display: flex;
4003 justify-content: space-between;
4004 align-items: center;
4005 align-content: center;
4006 line-height: var(--f7-list-item-min-height);
4007 height: var(--f7-list-item-min-height);
4008 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4009 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4010}
4011.simple-list li:after {
4012 left: var(--f7-list-item-padding-horizontal);
4013 width: auto;
4014 left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4015 right: 0;
4016}
4017.simple-list li:last-child:after {
4018 display: none !important;
4019}
4020.links-list li {
4021 z-index: 1;
4022}
4023.links-list a {
4024 transition-duration: 300ms;
4025 transition-property: background-color;
4026 display: block;
4027 position: relative;
4028 overflow: hidden;
4029 display: flex;
4030 align-items: center;
4031 align-content: center;
4032 justify-content: space-between;
4033 box-sizing: border-box;
4034 white-space: nowrap;
4035 text-overflow: ellipsis;
4036 max-width: 100%;
4037 height: var(--f7-list-item-min-height);
4038 color: inherit;
4039}
4040.links-list a .ripple-wave {
4041 z-index: 0;
4042}
4043.links-list a:after {
4044 width: auto;
4045}
4046.links-list a.active-state {
4047 background-color: var(--f7-list-link-pressed-bg-color);
4048}
4049.links-list a {
4050 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4051 padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4052}
4053.links-list a:after {
4054 left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4055 right: 0;
4056}
4057.links-list li:last-child a:after {
4058 display: none !important;
4059}
4060.simple-list li:after,
4061.links-list a:after,
4062.list .item-inner:after {
4063 content: '';
4064 position: absolute;
4065 background-color: var(--f7-list-item-border-color);
4066 display: block;
4067 z-index: 15;
4068 top: auto;
4069 right: auto;
4070 bottom: 0;
4071 left: 0;
4072 height: 1px;
4073 width: 100%;
4074 transform-origin: 50% 100%;
4075 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4076}
4077.media-list,
4078li.media-item {
4079 --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
4080 --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal);
4081}
5d51ea26
DC
4082.media-list .item-title,
4083li.media-item .item-title {
4084 font-weight: var(--f7-list-media-item-title-font-weight, var(--f7-list-item-title-font-weight, inherit));
4085}
5309fbda
DC
4086.media-list .item-inner,
4087li.media-item .item-inner {
4088 display: block;
4089 align-self: stretch;
4090}
4091.media-list .item-media,
4092li.media-item .item-media {
4093 align-self: flex-start;
4094}
4095.media-list .item-media img,
4096li.media-item .item-media img {
4097 display: block;
4098}
4099.media-list .item-link .item-inner,
4100li.media-item .item-link .item-inner {
4101 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4102}
4103.media-list .item-link .item-title-row,
4104li.media-item .item-link .item-title-row {
4105 padding-right: calc(var(--f7-list-chevron-icon-area));
4106}
4107.media-list.chevron-center .item-link .item-inner,
4108.media-list .chevron-center .item-link .item-inner,
4109.media-list .item-link.chevron-center .item-inner,
4110li.media-item.chevron-center .item-link .item-inner,
4111li.media-item .item-link.chevron-center .item-inner,
4112li.media-item .chevron-center .item-link .item-inner {
4113 padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4114}
4115.media-list.chevron-center .item-title-row,
4116.media-list .chevron-center .item-title-row,
4117li.media-item.chevron-center .item-title-row,
4118li.media-item .chevron-center .item-title-row {
4119 padding-right: 0;
4120}
4121.list .item-link .item-inner:before,
4122.links-list a:before,
4123.media-list .item-link .item-title-row:before,
4124li.media-item .item-link .item-title-row:before,
4125.media-list.chevron-center .item-link .item-inner:before,
4126.media-list .chevron-center .item-link .item-inner:before,
4127.media-list .item-link.chevron-center .item-inner:before,
4128li.media-item.chevron-center .item-link .item-inner:before,
4129li.media-item .chevron-center .item-link .item-inner:before,
4130li.media-item .item-link.chevron-center .item-inner:before {
4131 font-family: 'framework7-core-icons';
4132 font-weight: normal;
4133 font-style: normal;
4134 line-height: 1;
4135 letter-spacing: normal;
4136 text-transform: none;
4137 white-space: nowrap;
4138 word-wrap: normal;
4139 direction: ltr;
4140 -webkit-font-smoothing: antialiased;
4141 text-rendering: optimizeLegibility;
4142 -moz-osx-font-smoothing: grayscale;
4143 -moz-font-feature-settings: "liga";
4144 font-feature-settings: "liga";
4145 text-align: center;
4146 display: block;
4147 width: 100%;
4148 height: 100%;
5d51ea26 4149 font-size: 20px;
5309fbda
DC
4150 position: absolute;
4151 top: 50%;
4152 width: 8px;
4153 height: 14px;
4154 margin-top: -7px;
5d51ea26 4155 font-size: var(--f7-list-chevron-icon-font-size);
5309fbda
DC
4156 line-height: 14px;
4157 color: var(--f7-list-chevron-icon-color);
4158 pointer-events: none;
4159 right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4160 content: 'chevron_right';
4161}
4162.media-list.chevron-center .item-title-row:before,
4163.media-list .chevron-center .item-title-row:before,
4164li.media-item.chevron-center .item-title-row:before,
4165li.media-item .chevron-center .item-title-row:before {
4166 display: none;
4167}
4168.media-list .item-link .item-inner:before,
4169li.media-item .item-link .item-inner:before {
4170 display: none;
4171}
4172.media-list .item-link .item-title-row:before,
4173li.media-item .item-link .item-title-row:before {
4174 right: 0;
4175}
4176.list-group ul:after,
4177.list-group ul:before {
4178 z-index: 25 !important;
4179}
4180.list-group + .list-group ul:before {
4181 display: none !important;
4182}
4183li.item-divider,
4184.item-divider,
4185li.list-group-title {
4186 white-space: nowrap;
4187 position: relative;
4188 max-width: 100%;
4189 text-overflow: ellipsis;
4190 overflow: hidden;
4191 z-index: 15;
4192 padding-top: 0;
4193 padding-bottom: 0;
4194 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4195 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4196 box-sizing: border-box;
4197 display: flex;
4198 align-items: center;
4199 align-content: center;
4200}
4201li.item-divider:after,
4202.item-divider:after,
4203li.list-group-title:after {
4204 display: none !important;
4205}
4206li.item-divider,
4207.item-divider {
4208 margin-top: -1px;
4209 height: var(--f7-list-item-divider-height);
4210 color: var(--f7-list-item-divider-text-color);
4211 font-size: var(--f7-list-item-divider-font-size);
4212 font-weight: var(--f7-list-item-divider-font-weight);
4213 background-color: var(--f7-list-item-divider-bg-color);
4214 line-height: var(--f7-list-item-divider-line-height);
4215}
4216li.item-divider:before,
4217.item-divider:before {
4218 content: '';
4219 position: absolute;
4220 background-color: var(--f7-list-item-divider-border-color);
4221 display: block;
4222 z-index: 15;
4223 top: 0;
4224 right: auto;
4225 bottom: auto;
4226 left: 0;
4227 height: 1px;
4228 width: 100%;
4229 transform-origin: 50% 0%;
4230 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4231}
4232li.list-group-title,
4233.list li.list-group-title {
4234 position: relative;
4235 position: -webkit-sticky;
4236 position: sticky;
4237 top: 0;
4238 margin-top: 0;
4239 z-index: 20;
4240 height: var(--f7-list-group-title-height);
4241 color: var(--f7-list-group-title-text-color);
4242 font-size: var(--f7-list-group-title-font-size);
4243 font-weight: var(--f7-list-group-title-font-weight);
4244 background-color: var(--f7-list-group-title-bg-color);
4245 line-height: var(--f7-list-group-title-line-height);
4246}
5d51ea26
DC
4247.page-with-navbar-large li.list-group-title,
4248.page-with-navbar-large .list li.list-group-title {
4249 top: calc(-1 * var(--f7-navbar-large-title-height));
4250}
5309fbda
DC
4251.list.inset {
4252 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
4253 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
4254 border-radius: var(--f7-list-inset-border-radius);
4255 --f7-safe-area-left: 0px;
4256 --f7-safe-area-right: 0px;
4257}
4258.list.inset .block-title {
4259 margin-left: 0;
4260 margin-right: 0;
4261}
4262.list.inset ul {
4263 border-radius: var(--f7-list-inset-border-radius);
4264}
4265.list.inset ul:before {
4266 display: none !important;
4267}
4268.list.inset ul:after {
4269 display: none !important;
4270}
4271.list.inset li.swipeout:first-child,
4272.list.inset li:first-child > a {
4273 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
4274}
4275.list.inset li.swipeout:last-child,
4276.list.inset li:last-child > a {
4277 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
4278}
4279.list.inset li.swipeout:first-child:last-child,
4280.list.inset li:first-child:last-child > a {
4281 border-radius: var(--f7-list-inset-border-radius);
4282}
4283@media (min-width: 768px) {
4284 .list.tablet-inset {
4285 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
4286 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
4287 border-radius: var(--f7-list-inset-border-radius);
4288 --f7-safe-area-left: 0px;
4289 --f7-safe-area-right: 0px;
4290 }
4291 .list.tablet-inset .block-title {
4292 margin-left: 0;
4293 margin-right: 0;
4294 }
4295 .list.tablet-inset ul {
4296 border-radius: var(--f7-list-inset-border-radius);
4297 }
4298 .list.tablet-inset ul:before {
4299 display: none !important;
4300 }
4301 .list.tablet-inset ul:after {
4302 display: none !important;
4303 }
4304 .list.tablet-inset li:first-child > a {
4305 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
4306 }
4307 .list.tablet-inset li:last-child > a {
4308 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
4309 }
4310 .list.tablet-inset li:first-child:last-child > a {
4311 border-radius: var(--f7-list-inset-border-radius);
4312 }
4313}
4314.list.no-chevron,
4315.list .no-chevron {
4316 --f7-list-chevron-icon-color: transparent;
4317 --f7-list-chevron-icon-area: 0px;
4318}
5309fbda
DC
4319.ios .item-link.active-state .item-inner:after,
4320.ios .list-button.active-state:after,
4321.ios .links-list a.active-state:after {
4322 background-color: transparent;
4323}
4324.ios .links-list a.active-state,
4325.ios .list .item-link.active-state,
4326.ios .list .list-button.active-state {
4327 transition-duration: 0ms;
4328}
5309fbda
DC
4329.md .list .item-media {
4330 min-width: 40px;
4331}
5d51ea26
DC
4332.aurora .list .item-media {
4333 min-width: 18px;
4334}
4335.aurora .list .item-link .item-inner:before,
4336.aurora .links-list a:before,
4337.aurora .media-list .item-link .item-title-row:before,
4338.aurora li.media-item .item-link .item-title-row:before,
4339.aurora .media-list.chevron-center .item-link .item-inner:before,
4340.aurora .media-list .chevron-center .item-link .item-inner:before,
4341.aurora .media-list .item-link.chevron-center .item-inner:before,
4342.aurora li.media-item.chevron-center .item-link .item-inner:before,
4343.aurora li.media-item .chevron-center .item-link .item-inner:before,
4344.aurora li.media-item .item-link.chevron-center .item-inner:before {
4345 content: 'chevron_right_aurora';
4346}
4347.aurora .links-list a,
4348.aurora .list .item-link,
4349.aurora .list .list-button {
4350 transition-duration: 0ms;
4351}
4352.aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
4353.aurora.device-desktop .list .item-link:hover:not(.active-state):not(.no-hover) {
4354 background: var(--f7-list-link-hover-bg-color);
4355}
4356.aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
4357 background: var(--f7-list-button-hover-bg-color);
4358}
5309fbda
DC
4359/* === Badge === */
4360:root {
4361 --f7-badge-text-color: #fff;
4362 --f7-badge-bg-color: #8e8e93;
4363 --f7-badge-padding: 0 4px;
4364 --f7-badge-in-icon-size: 16px;
4365 --f7-badge-in-icon-font-size: 10px;
4366 --f7-badge-font-weight: normal;
4367 --f7-badge-font-size: 12px;
4368}
4369.ios {
4370 --f7-badge-size: 20px;
4371}
4372.md {
4373 --f7-badge-size: 18px;
4374}
5d51ea26
DC
4375.aurora {
4376 --f7-badge-size: 18px;
4377 --f7-badge-font-weight: 600;
4378 --f7-badge-in-icon-size: 15px;
4379}
5309fbda
DC
4380.badge {
4381 display: inline-flex;
4382 align-items: center;
4383 align-content: center;
4384 justify-content: center;
4385 color: var(--f7-badge-text-color);
4386 background: var(--f7-badge-bg-color);
4387 position: relative;
4388 box-sizing: border-box;
4389 text-align: center;
4390 vertical-align: middle;
4391 font-weight: var(--f7-badge-font-weight);
4392 font-size: var(--f7-badge-font-size);
4393 border-radius: var(--f7-badge-size);
4394 padding: var(--f7-badge-padding);
4395 height: var(--f7-badge-size);
4396 min-width: var(--f7-badge-size);
4397}
4398.icon .badge,
4399.f7-icons .badge,
4400.framework7-icons .badge,
4401.material-icons .badge {
4402 position: absolute;
4403 left: 100%;
4404 margin-left: -10px;
4405 top: -2px;
4406 font-family: var(--f7-font-family);
4407 --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
4408 --f7-badge-size: var(--f7-badge-in-icon-size);
4409}
4410.badge[class*="color-"] {
4411 --f7-badge-bg-color: var(--f7-theme-color);
4412}
4413:root {
4414 --f7-button-font-size: 14px;
4415 --f7-button-min-width: 32px;
4416 --f7-button-bg-color: transparent;
4417 --f7-button-border-width: 0px;
4418 /*
4419 --f7-button-text-color: var(--f7-theme-color);
4420 --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
4421 --f7-button-border-color: var(--f7-theme-color);
4422 --f7-button-fill-text-color: #fff;
4423 --f7-button-fill-bg-color: var(--f7-theme-color);
4424 --f7-button-outline-border-color: var(--f7-theme-color);
4425 */
4426 --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
4427 --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
4428 --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
4429}
4430.ios {
4431 --f7-button-height: 29px;
4432 --f7-button-padding-horizontal: 10px;
4433 --f7-button-border-radius: 5px;
4434 --f7-button-font-weight: 400;
4435 --f7-button-letter-spacing: 0;
4436 --f7-button-text-transform: none;
4437 /*
4438 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4439 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
4440 */
4441 --f7-button-outline-border-width: 1px;
4442 --f7-button-large-height: 44px;
4443 --f7-button-large-font-size: 17px;
5d51ea26 4444 --f7-button-large-font-weight: 400;
5309fbda
DC
4445 --f7-button-small-height: 26px;
4446 --f7-button-small-font-size: 13px;
4447 --f7-button-small-font-weight: 600;
4448 --f7-button-small-text-transform: uppercase;
4449 --f7-button-small-outline-border-width: 2px;
4450}
4451.md {
4452 --f7-button-height: 36px;
4453 --f7-button-padding-horizontal: 8px;
4454 --f7-button-border-radius: 4px;
4455 --f7-button-font-weight: 500;
4456 --f7-button-letter-spacing: 0.03em;
4457 --f7-button-text-transform: uppercase;
4458 --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
4459 /*
4460 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4461 */
4462 --f7-button-outline-border-width: 2px;
4463 --f7-button-large-height: 48px;
4464 --f7-button-large-font-size: 14px;
5d51ea26 4465 --f7-button-large-font-weight: 500;
5309fbda 4466 --f7-button-small-height: 28px;
5d51ea26 4467 --f7-button-small-font-size: 12px;
5309fbda
DC
4468 --f7-button-small-font-weight: 500;
4469 --f7-button-small-text-transform: uppercase;
4470 --f7-button-small-outline-border-width: 2px;
4471}
4472.md .theme-dark,
4473.md.theme-dark {
4474 --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
4475}
5d51ea26
DC
4476.aurora {
4477 /*
4478 --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
4479 --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
4480 */
4481 --f7-button-font-size: 14px;
4482 --f7-button-height: 28px;
4483 --f7-button-min-width: 24px;
4484 --f7-button-padding-horizontal: 10px;
4485 --f7-button-border-radius: 4px;
4486 --f7-button-font-weight: 400;
4487 --f7-button-letter-spacing: 0.02;
4488 --f7-button-text-transform: none;
4489 /*
4490 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4491 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4492 */
4493 --f7-button-outline-border-width: 2px;
4494 --f7-button-large-height: 34px;
4495 --f7-button-large-font-size: 14px;
4496 --f7-button-large-font-weight: 600;
4497 --f7-button-small-height: 22px;
4498 --f7-button-small-font-size: 12px;
4499 --f7-button-small-font-weight: 600;
4500 --f7-button-small-text-transform: none;
4501 --f7-button-small-outline-border-width: 1px;
4502}
5309fbda
DC
4503button {
4504 -webkit-appearance: none;
4505 -moz-appearance: none;
4506 appearance: none;
4507 width: 100%;
4508}
4509.button {
4510 text-decoration: none;
4511 text-align: center;
4512 display: block;
4513 -webkit-appearance: none;
4514 -moz-appearance: none;
4515 appearance: none;
4516 background: none;
4517 margin: 0;
4518 white-space: nowrap;
4519 text-overflow: ellipsis;
4520 position: relative;
4521 overflow: hidden;
4522 font-family: inherit;
4523 cursor: pointer;
4524 outline: 0;
4525 box-sizing: border-box;
4526 vertical-align: middle;
5d51ea26
DC
4527 justify-content: center;
4528 align-items: center;
5309fbda
DC
4529 border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
4530 font-size: var(--f7-button-font-size);
4531 color: var(--f7-button-text-color, var(--f7-theme-color));
4532 height: var(--f7-button-height);
4533 line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
5d51ea26 4534 padding: var(--f7-button-padding-vertical, 0px) var(--f7-button-padding-horizontal);
5309fbda
DC
4535 border-radius: var(--f7-button-border-radius);
4536 min-width: var(--f7-button-min-width);
4537 font-weight: var(--f7-button-font-weight);
4538 letter-spacing: var(--f7-button-letter-spacing);
4539 text-transform: var(--f7-button-text-transform);
4540 background-color: var(--f7-button-bg-color);
4541 box-shadow: var(--f7-button-box-shadow);
4542}
4543.button.active-state {
4544 background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
4545 color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
4546}
4547input[type="submit"].button,
4548input[type="button"].button {
4549 width: 100%;
4550}
4551.button > i + span,
4552.button > span + span,
4553.button > span + i,
4554.button > i + i {
4555 margin-left: 4px;
4556}
4557.subnavbar .button,
4558.navbar .button,
4559.toolbar .button,
5d51ea26
DC
4560.searchbar .button,
4561.appbar .button {
5309fbda
DC
4562 color: var(--f7-button-text-color, var(--f7-theme-color));
4563}
4564.button-round,
4565.ios .button-round-ios,
5d51ea26
DC
4566.md .button-round-md,
4567.aurora .button-round-aurora {
5309fbda
DC
4568 --f7-button-border-radius: var(--f7-button-height);
4569}
4570.button-fill,
4571.ios .button-fill-ios,
4572.md .button-fill-md,
5d51ea26 4573.aurora .button-fill-aurora,
5309fbda
DC
4574.button-active,
4575.button.tab-link-active {
4576 --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
4577 --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
4578 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
4579}
4580.button-fill,
4581.ios .button-fill-ios,
5d51ea26
DC
4582.md .button-fill-md,
4583.aurora .button-fill-aurora {
5309fbda
DC
4584 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
4585}
4586.button-active,
4587.button.tab-link-active {
4588 --f7-button-pressed-bg-color: var(--f7-button-bg-color);
4589}
4590.button-outline,
4591.ios .button-outline-ios,
5d51ea26
DC
4592.md .button-outline-md,
4593.aurora .button-outline-aurora {
5309fbda
DC
4594 --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
4595 --f7-button-border-width: var(--f7-button-outline-border-width);
4596}
4597.button-large,
4598.ios .button-large-ios,
5d51ea26
DC
4599.md .button-large-md,
4600.aurora .button-large-aurora {
5309fbda
DC
4601 --f7-button-height: var(--f7-button-large-height);
4602 --f7-button-font-size: var(--f7-button-large-font-size);
5d51ea26 4603 --f7-button-font-weight: var(--f7-button-large-font-weight);
5309fbda
DC
4604}
4605.button-small,
4606.ios .button-small-ios,
5d51ea26
DC
4607.md .button-small-md,
4608.aurora .button-small-aurora {
5309fbda
DC
4609 --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
4610 --f7-button-height: var(--f7-button-small-height);
4611 --f7-button-font-size: var(--f7-button-small-font-size);
4612 --f7-button-font-weight: var(--f7-button-small-font-weight);
4613 --f7-button-text-transform: var(--f7-button-small-text-transform);
4614}
4615.ios .button-small.button-fill,
4616.ios .button-small-ios.button-fill,
4617.ios .button-small.button-fill-ios {
4618 --f7-button-border-width: var(--f7-button-small-outline-border-width);
4619 --f7-button-pressed-text-color: var(--f7-theme-color);
4620 --f7-button-pressed-bg-color: transparent;
4621}
4622.segmented {
4623 align-self: center;
4624 display: flex;
4625 flex-wrap: nowrap;
4626 border-radius: var(--f7-button-border-radius);
4627 box-shadow: var(--f7-button-box-shadow);
4628}
4629.segmented .button,
4630.segmented button {
4631 width: 100%;
4632 flex-shrink: 1;
4633 min-width: 0;
4634 border-radius: 0;
4635}
4636.segmented .button:first-child {
4637 border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
4638}
4639.segmented .button:not(.button-outline):first-child {
4640 border-left: none;
4641}
4642.segmented .button.button-outline:nth-child(n + 2) {
4643 border-left: none;
4644}
4645.segmented .button:last-child {
4646 border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
4647}
4648.segmented .button-round:first-child {
4649 border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
4650}
4651.segmented .button-round:last-child {
4652 border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
4653}
4654.segmented .button:first-child:last-child {
4655 border-radius: var(--f7-button-border-radius);
4656}
4657.segmented-round,
4658.ios .segmented-round-ios,
5d51ea26
DC
4659.md .segmented-round-md,
4660.aurora .segmented-round-aurora {
5309fbda
DC
4661 border-radius: var(--f7-button-height);
4662}
4663.segmented-raised,
4664.ios .segmented-raised-ios,
5d51ea26
DC
4665.md .segmented-raised-md,
4666.aurora .segmented-raised-aurora {
5309fbda
DC
4667 box-shadow: var(--f7-button-raised-box-shadow);
4668}
4669.segmented-raised .button:not(.button-outline),
4670.ios .segmented-raised-ios .button:not(.button-outline),
5d51ea26
DC
4671.md .segmented-raised-md .button:not(.button-outline),
4672.aurora .segmented-raised-aurora .button:not(.button-outline) {
5309fbda
DC
4673 border-left: 1px solid var(--f7-segmented-raised-divider-color);
4674}
4675.button-raised,
4676.ios .button-raised-ios,
5d51ea26
DC
4677.md .button-raised-md,
4678.aurora .button-raised-aurora {
5309fbda
DC
4679 --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
4680}
4681.button-raised.active-state,
4682.ios .button-raised-ios.active-state,
5d51ea26
DC
4683.md .button-raised-md.active-state,
4684.aurora .button-raised-aurora.active-state {
5309fbda
DC
4685 --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
4686}
4687.subnavbar .segmented {
4688 width: 100%;
4689}
4690.ios .button {
4691 transition-duration: 100ms;
4692}
4693.ios .button-fill,
4694.ios .button-fill-ios {
4695 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
4696}
4697.ios .button-small,
4698.ios .button-small-ios {
4699 transition-duration: 200ms;
4700}
4701.md .button {
4702 transition-duration: 300ms;
4703 transform: translate3d(0, 0, 0);
4704}
4705.md .button-fill,
4706.md .button-fill-md {
4707 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
4708}
5d51ea26
DC
4709.aurora .button {
4710 transition-duration: 100ms;
4711 transform: translate3d(0, 0, 0);
4712}
4713.aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
4714 background-color: var(--f7-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
4715}
4716.aurora .button-fill,
4717.aurora .button-fill-aurora {
4718 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
4719}
4720.aurora .button-fill,
4721.aurora .button-active,
4722.aurora .button.tab-link-active,
4723.aurora .button-fill-aurora {
4724 --f7-button-hover-bg-color: var(--f7-button-fill-hover-bg-color, var(--f7-theme-color-tint));
4725}
5309fbda
DC
4726/* === Touch Ripple === */
4727:root {
4728 --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
4729 --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
4730 --f7-touch-ripple-color: var(--f7-touch-ripple-black);
4731}
4732.theme-dark {
4733 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
4734}
4735.ripple,
4736.fab a,
5d51ea26
DC
4737.link,
4738.item-link,
4739.list-button,
5309fbda
DC
4740.button,
4741.dialog-button,
4742.tab-link,
4743.radio,
4744.checkbox,
4745.actions-button,
4746.speed-dial-buttons a {
4747 -webkit-user-select: none;
4748 -moz-user-select: none;
4749 -ms-user-select: none;
4750 user-select: none;
4751}
4752.ripple-wave {
4753 left: 0;
4754 top: 0;
4755 position: absolute !important;
4756 border-radius: 50%;
4757 pointer-events: none;
4758 z-index: -1;
4759 padding: 0;
4760 margin: 0;
4761 font-size: 0;
4762 transform: translate3d(0px, 0px, 0) scale(0);
4763 transition-duration: 1400ms;
4764 background-color: var(--f7-touch-ripple-color);
4765 will-change: transform, opacity;
4766}
4767.ripple-wave.ripple-wave-fill {
4768 transition-duration: 300ms;
4769 opacity: 0.35;
4770}
4771.ripple-wave.ripple-wave-out {
4772 transition-duration: 600ms;
4773 opacity: 0;
4774}
4775.button-fill .ripple-wave,
4776.picker-calendar-day .ripple-wave,
4777.menu .ripple-wave {
4778 z-index: 1;
4779}
4780.checkbox .ripple-wave,
4781.radio .ripple-wave,
4782.data-table .sortable-cell .ripple-wave {
4783 z-index: 0;
4784}
4785[class*="ripple-color-"] {
4786 --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
4787}
4788/* === Icon === */
4789i.icon {
4790 display: inline-block;
4791 vertical-align: middle;
4792 background-size: 100% auto;
4793 background-position: center;
4794 background-repeat: no-repeat;
4795 font-style: normal;
4796 position: relative;
4797}
4798.icon-back:after,
4799.icon-prev:after,
4800.icon-forward:after,
4801.icon-next:after {
4802 font-family: 'framework7-core-icons';
4803 font-weight: normal;
4804 font-style: normal;
4805 line-height: 1;
4806 letter-spacing: normal;
4807 text-transform: none;
4808 white-space: nowrap;
4809 word-wrap: normal;
4810 direction: ltr;
4811 -webkit-font-smoothing: antialiased;
4812 text-rendering: optimizeLegibility;
4813 -moz-osx-font-smoothing: grayscale;
4814 -moz-font-feature-settings: "liga";
4815 font-feature-settings: "liga";
4816 text-align: center;
4817 display: block;
4818 width: 100%;
4819 height: 100%;
4820 font-size: 20px;
4821}
4822.icon[class*="color-"] {
4823 color: var(--f7-theme-color);
4824}
4825.ios .icon-back,
4826.ios .icon-prev,
4827.ios .icon-forward,
4828.ios .icon-next {
4829 width: 12px;
4830 height: 20px;
4831 line-height: 20px;
4832}
4833.ios .icon-back:after,
4834.ios .icon-prev:after,
4835.ios .icon-forward:after,
4836.ios .icon-next:after {
4837 line-height: inherit;
4838}
4839.ios .icon-prev:after,
4840.ios .icon-next:after {
4841 font-size: 16px;
4842}
4843.ios .item-media .icon {
4844 color: #808080;
4845}
4846.ios .item-media .f7-icons {
4847 font-size: 28px;
4848 width: 28px;
4849 height: 28px;
4850}
4851.ios .icon-back:after,
4852.ios .icon-prev:after {
4853 content: 'chevron_left_ios';
4854}
4855.ios .icon-forward:after,
4856.ios .icon-next:after {
4857 content: 'chevron_right_ios';
4858}
4859.md .icon-back,
4860.md .icon-forward,
4861.md .icon-next,
4862.md .icon-prev {
4863 width: 24px;
4864 height: 24px;
4865}
4866.md .icon-back:after,
4867.md .icon-forward:after,
4868.md .icon-next:after,
4869.md .icon-prev:after {
4870 line-height: 1.2;
4871}
4872.md .item-media .icon {
4873 color: #737373;
4874}
4875.md .item-media .material-icons {
4876 font-size: 24px;
4877 width: 24px;
4878 height: 24px;
4879}
4880.md .icon-back:after {
4881 content: 'arrow_left_md';
4882}
4883.md .icon-forward:after {
4884 content: 'arrow_right_md';
4885}
4886.md .icon-next:after {
4887 content: 'chevron_right_md';
4888}
4889.md .icon-prev:after {
4890 content: 'chevron_left_md';
4891}
5d51ea26
DC
4892.aurora .f7-icons,
4893.aurora .material-icons {
4894 font-size: 18px;
4895}
4896.aurora .icon-back,
4897.aurora .icon-prev,
4898.aurora .icon-forward,
4899.aurora .icon-next {
4900 width: 9px;
4901 height: 14px;
4902 line-height: 14px;
4903}
4904.aurora .icon-back:after,
4905.aurora .icon-prev:after,
4906.aurora .icon-forward:after,
4907.aurora .icon-next:after {
4908 line-height: inherit;
4909}
4910.aurora .item-media .icon {
4911 color: #808080;
4912}
4913.aurora .item-media .f7-icons {
4914 font-size: 18px;
4915 width: 18px;
4916 height: 18px;
4917}
4918.aurora .icon-back:after,
4919.aurora .icon-prev:after {
4920 content: 'chevron_left_aurora';
4921}
4922.aurora .icon-forward:after,
4923.aurora .icon-next:after {
4924 content: 'chevron_right_aurora';
4925}
5309fbda
DC
4926.custom-modal-backdrop {
4927 z-index: 10500;
4928}
4929.custom-modal-backdrop,
4930.actions-backdrop,
4931.dialog-backdrop,
4932.popover-backdrop,
4933.popup-backdrop,
4934.preloader-backdrop,
4935.sheet-backdrop {
4936 position: absolute;
4937 left: 0;
4938 top: 0;
4939 width: 100%;
4940 height: 100%;
4941 background: rgba(0, 0, 0, 0.4);
4942 z-index: 13000;
4943 visibility: hidden;
4944 opacity: 0;
4945 transition-duration: 400ms;
4946}
4947.custom-modal-backdrop.not-animated,
4948.actions-backdrop.not-animated,
4949.dialog-backdrop.not-animated,
4950.popover-backdrop.not-animated,
4951.popup-backdrop.not-animated,
4952.preloader-backdrop.not-animated,
4953.sheet-backdrop.not-animated {
4954 transition-duration: 0ms;
4955}
4956.custom-modal-backdrop.backdrop-in,
4957.actions-backdrop.backdrop-in,
4958.dialog-backdrop.backdrop-in,
4959.popover-backdrop.backdrop-in,
4960.popup-backdrop.backdrop-in,
4961.preloader-backdrop.backdrop-in,
4962.sheet-backdrop.backdrop-in {
4963 visibility: visible;
4964 opacity: 1;
4965}