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