3 * Full featured mobile HTML framework for building iOS & Android apps
4 * http://framework7.io/
6 * Copyright 2014-2019 Vladimir Kharlampidi
8 * Released under the MIT License
10 * Released on: July 19, 2019
13 /*====================
15 ==================== */
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;
29 @supports (left: env
(safe-area-inset-left
)) {
31 --f7-safe-area-top: env
(safe-area-inset-top
);
32 --f7-safe-area-bottom: env
(safe-area-inset-bottom
);
36 :root
.safe-area-left
,
41 --f7-safe-area-left: env
(safe-area-inset-left
);
42 --f7-safe-area-outer-left: env
(safe-area-inset-left
);
44 :root
.ios-right-edge
,
46 :root
.safe-area-right
,
51 --f7-safe-area-right: env
(safe-area-inset-right
);
52 --f7-safe-area-outer-right: env
(safe-area-inset-right
);
55 :root
.no-safe-area-left
,
57 :root
.no-ios-left-edge
{
58 --f7-safe-area-left: 0px;
59 --f7-safe-area-outer-left: 0px;
62 :root
.no-safe-area-right
,
64 :root
.no-ios-right-edge
{
65 --f7-safe-area-right: 0px;
66 --f7-safe-area-outer-right: 0px;
69 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
71 --f7-device-pixel-ratio: 2;
74 @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
76 --f7-device-pixel-ratio: 3;
79 /*====================
81 ==================== */
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;
88 --f7-line-height: 1.4;
92 --f7-text-color: #fff;
95 --f7-font-family: Roboto
, system-ui
, Noto
, Helvetica
, Arial
, sans-serif
;
96 --f7-text-color: #212121;
97 --f7-line-height: 1.5;
101 --f7-text-color: rgba
(255, 255, 255, 0.87);
104 --f7-font-family: -apple-system
, system-ui
, Helvetica
, Arial
, sans-serif
;
105 --f7-text-color: #000;
106 --f7-line-height: 1.5;
110 --f7-text-color: #fff;
112 /*====================
114 ==================== */
117 --f7-bars-link-color: var(--f7-theme-color);
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%);
127 --f7-bars-bg-color: #1b1b1b;
128 --f7-bars-text-color: #fff;
131 --f7-bars-border-color: #c4c4c4;
135 --f7-bars-border-color: #282829;
138 --f7-bars-border-color: transparent
;
141 --f7-bars-border-color: rgba
(0, 0, 0, 0.2);
145 --f7-bars-border-color: #282829;
147 /*====================
149 ==================== */
150 .text-color-primary {
151 --f7-theme-color-text-color: var
(--f7-theme-color
);
154 --f7-theme-color-bg-color: var
(--f7-theme-color
);
156 .border-color-primary {
157 --f7-theme-color-border-color: var
(--f7-theme-color
);
159 .ripple-color-primary {
160 --f7-theme-color-ripple-color: rgba
(var
(--f7-theme-color-rgb
), 0.3);
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
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;
321 --f7-theme-color-text-color: #ff3b30;
324 --f7-theme-color-bg-color: #ff3b30;
327 --f7-theme-color-border-color: #ff3b30;
331 --f7-theme-color-ripple-color: rgba
(255, 59, 48, 0.3);
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;
340 --f7-theme-color-text-color: #4cd964;
343 --f7-theme-color-bg-color: #4cd964;
345 .border-color-green {
346 --f7-theme-color-border-color: #4cd964;
350 --f7-theme-color-ripple-color: rgba
(76, 217, 100, 0.3);
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;
359 --f7-theme-color-text-color: #2196f3;
362 --f7-theme-color-bg-color: #2196f3;
365 --f7-theme-color-border-color: #2196f3;
369 --f7-theme-color-ripple-color: rgba
(33, 150, 243, 0.3);
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;
378 --f7-theme-color-text-color: #ff2d55;
381 --f7-theme-color-bg-color: #ff2d55;
384 --f7-theme-color-border-color: #ff2d55;
388 --f7-theme-color-ripple-color: rgba
(255, 45, 85, 0.3);
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;
397 --f7-theme-color-text-color: #ffcc00;
400 --f7-theme-color-bg-color: #ffcc00;
402 .border-color-yellow {
403 --f7-theme-color-border-color: #ffcc00;
405 .ripple-color-yellow
,
407 --f7-theme-color-ripple-color: rgba
(255, 204, 0, 0.3);
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;
416 --f7-theme-color-text-color: #ff9500;
419 --f7-theme-color-bg-color: #ff9500;
421 .border-color-orange {
422 --f7-theme-color-border-color: #ff9500;
424 .ripple-color-orange
,
426 --f7-theme-color-ripple-color: rgba
(255, 149, 0, 0.3);
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;
435 --f7-theme-color-text-color: #9c27b0;
438 --f7-theme-color-bg-color: #9c27b0;
440 .border-color-purple {
441 --f7-theme-color-border-color: #9c27b0;
443 .ripple-color-purple
,
445 --f7-theme-color-ripple-color: rgba
(156, 39, 176, 0.3);
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;
453 .text-color-deeppurple {
454 --f7-theme-color-text-color: #673ab7;
456 .bg-color-deeppurple {
457 --f7-theme-color-bg-color: #673ab7;
459 .border-color-deeppurple {
460 --f7-theme-color-border-color: #673ab7;
462 .ripple-color-deeppurple
,
464 --f7-theme-color-ripple-color: rgba
(103, 58, 183, 0.3);
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;
472 .text-color-lightblue {
473 --f7-theme-color-text-color: #5ac8fa;
475 .bg-color-lightblue {
476 --f7-theme-color-bg-color: #5ac8fa;
478 .border-color-lightblue {
479 --f7-theme-color-border-color: #5ac8fa;
481 .ripple-color-lightblue
,
483 --f7-theme-color-ripple-color: rgba
(90, 200, 250, 0.3);
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;
492 --f7-theme-color-text-color: #009688;
495 --f7-theme-color-bg-color: #009688;
498 --f7-theme-color-border-color: #009688;
502 --f7-theme-color-ripple-color: rgba
(0, 150, 136, 0.3);
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;
511 --f7-theme-color-text-color: #cddc39;
514 --f7-theme-color-bg-color: #cddc39;
517 --f7-theme-color-border-color: #cddc39;
521 --f7-theme-color-ripple-color: rgba
(205, 220, 57, 0.3);
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;
529 .text-color-deeporange {
530 --f7-theme-color-text-color: #ff6b22;
532 .bg-color-deeporange {
533 --f7-theme-color-bg-color: #ff6b22;
535 .border-color-deeporange {
536 --f7-theme-color-border-color: #ff6b22;
538 .ripple-color-deeporange
,
540 --f7-theme-color-ripple-color: rgba
(255, 107, 34, 0.3);
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;
549 --f7-theme-color-text-color: #8e8e93;
552 --f7-theme-color-bg-color: #8e8e93;
555 --f7-theme-color-border-color: #8e8e93;
559 --f7-theme-color-ripple-color: rgba
(142, 142, 147, 0.3);
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;
568 --f7-theme-color-text-color: #ffffff;
571 --f7-theme-color-bg-color: #ffffff;
573 .border-color-white {
574 --f7-theme-color-border-color: #ffffff;
578 --f7-theme-color-ripple-color: rgba
(255, 255, 255, 0.3);
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;
587 --f7-theme-color-text-color: #000000;
590 --f7-theme-color-bg-color: #000000;
592 .border-color-black {
593 --f7-theme-color-border-color: #000000;
597 --f7-theme-color-ripple-color: rgba
(0, 0, 0, 0.3);
600 font-family: 'framework7-core-icons';
601 src: url
("data:application/font-woff;charset=utf-8;base64, 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") format
("woff");
606 font-family: 'framework7-skeleton';
607 src: url
("data:application/font-woff;charset=utf-8;base64, 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") format
("woff");
608 font-weight: 300, 400, 500, 600, 700;
609 font-style: normal
, italic
;
625 -webkit-text-size-adjust: 100%;
626 -webkit-font-smoothing: antialiased
;
627 font-family: var
(--f7-font-family
);
628 font-size: var
(--f7-font-size
);
629 line-height: var
(--f7-line-height
);
630 color: var
(--f7-text-color
);
633 color: var
(--f7-text-color
);
637 box-sizing: border-box
;
639 .framework7-initializing
*,
640 .framework7-initializing
*:before
,
641 .framework7-initializing *:after {
642 transition-duration: 0ms !important
;
649 touch-action: manipulation
;
651 @media (width: 1024px) and
(height: 691px) and
(orientation: landscape
) {
658 @media (width: 1024px) and
(height: 692px) and
(orientation: landscape
) {
666 -webkit-tap-highlight-color: rgba
(0, 0, 0, 0);
667 -webkit-touch-callout: none
;
677 text-decoration: none
;
678 color: var
(--f7-theme-color
);
688 opacity: 0.55 !important
;
689 pointer-events: none
!important
;
691 html
.device-full-viewport
,
692 html
.device-full-viewport body
{
701 display: none
!important
;
703 @media (width: 1024px) and
(height: 691px) and
(orientation: landscape
) {
706 .ios .framework7-root {
710 @media (width: 1024px) and
(height: 692px) and
(orientation: landscape
) {
713 .ios .framework7-root {
723 display: none
!important
;
729 .aurora
.if-not-aurora
,
730 .aurora .not-aurora {
731 display: none
!important
;
733 /* === Statusbar === */
735 --f7-statusbar-height: 0px;
736 --f7-statusbar-bg-color: var
(--f7-bars-bg-color
);
739 --f7-statusbar-height: var
(--f7-safe-area-top
, 20px);
742 --f7-statusbar-height: var
(--f7-safe-area-top
, 24px);
744 .with-statusbar.ios:not(.device-ios):not(.device-android) {
745 --f7-statusbar-height: 20px;
747 .with-statusbar.md:not(.device-ios):not(.device-android) {
748 --f7-statusbar-height: 24px;
750 @supports not
(top: env
(safe-area-inset-top
)) {
751 .with-statusbar.device-ios {
752 --f7-statusbar-height: 20px;
755 @supports not
(top: env
(safe-area-inset-top
)) {
756 .with-statusbar.device-android {
757 --f7-statusbar-height: 24px;
766 box-sizing: border-box
;
768 height: var
(--f7-statusbar-height
);
769 background: var
(--f7-statusbar-bg-color
, var
(--f7-bars-bg-color
));
772 padding-top: var
(--f7-statusbar-height
);
781 box-sizing: border-box
;
783 .framework7-root
> .view
,
784 .framework7-root > .views {
785 height: calc
(100% - var
(--f7-appbar-app-offset
, 0px));
789 --f7-page-master-width: 320px;
790 --f7-page-master-border-color: rgba
(0, 0, 0, 0.1);
791 --f7-page-master-border-width: 1px;
792 --f7-page-swipeback-transition-duration: 400ms;
794 --f7-page-content-extra-padding-top: 0px;
795 --f7-page-content-extra-padding-bottom: 0px;
799 --f7-page-bg-color: #efeff4;
800 --f7-page-transition-duration: 400ms;
803 --f7-page-bg-color: #fff;
804 --f7-page-transition-duration: 250ms;
807 --f7-page-bg-color: #f3f3f3;
808 --f7-page-transition-duration: 400ms;
811 --f7-page-bg-color: #171717;
812 --f7-page-master-border-color: rgba
(255, 255, 255, 0.1);
821 box-sizing: border-box
;
828 background-color: var
(--f7-page-bg-color
);
834 .page-with-navbar-large-collapsed {
835 --f7-navbar-large-collapse-progress: 1;
838 pointer-events: none
;
841 will-change: scroll-position
;
843 -webkit-overflow-scrolling: touch
;
844 box-sizing: border-box
;
848 padding-top: calc
(var
(--f7-page-navbar-offset
, 0px) + var
(--f7-page-toolbar-top-offset
, 0px) + var
(--f7-page-subnavbar-offset
, 0px) + var
(--f7-page-searchbar-offset
, 0px) + var
(--f7-page-content-extra-padding-top
, 0px));
849 padding-bottom: calc
(var
(--f7-page-toolbar-bottom-offset
, 0px) + var
(--f7-safe-area-bottom
) + var
(--f7-page-content-extra-padding-bottom
, 0px));
852 .page-transitioning
.page-shadow-effect
,
853 .page-transitioning .page-opacity-effect {
854 transition-duration: var
(--f7-page-transition-duration
);
856 .page-transitioning-swipeback
,
857 .page-transitioning-swipeback
.page-shadow-effect
,
858 .page-transitioning-swipeback .page-opacity-effect {
859 transition-duration: var
(--f7-page-swipeback-transition-duration
);
861 .router-transition-forward
.page-next
,
862 .router-transition-backward
.page-next
,
863 .router-transition-forward
.page-current
,
864 .router-transition-backward
.page-current
,
865 .router-transition-forward
.page-previous:not
(.stacked
),
866 .router-transition-backward .page-previous:not(.stacked) {
867 pointer-events: none
;
869 .page-shadow-effect {
878 background: linear-gradient
(to right
, rgba
(0, 0, 0, 0) 0%, rgba
(0, 0, 0, 0) 10%, rgba
(0, 0, 0, 0.01) 50%, rgba
(0, 0, 0, 0.2) 100%);
880 .page-opacity-effect {
884 background: rgba
(0, 0, 0, 0.1);
891 .ios .page-previous {
892 transform: translate3d
(-20%, 0, 0);
895 transform: translate3d
(100%, 0, 0);
897 .ios .page-previous .page-opacity-effect {
900 .ios .page-previous:after {
903 .ios .page-current .page-shadow-effect {
906 .ios
.router-transition-forward
.page-next
,
907 .ios .router-transition-forward .page-current {
908 will-change: transform
;
910 .ios .router-transition-forward .page-next {
911 animation: ios-page-next-to-current var
(--f7-page-transition-duration
) forwards
;
913 .ios .router-transition-forward .page-next:before {
922 background: linear-gradient
(to right
, rgba
(0, 0, 0, 0) 0%, rgba
(0, 0, 0, 0) 10%, rgba
(0, 0, 0, 0.01) 50%, rgba
(0, 0, 0, 0.2) 100%);
923 animation: ios-page-element-fade-in var
(--f7-page-transition-duration
) forwards
;
925 .ios .router-transition-forward .page-current {
926 animation: ios-page-current-to-previous var
(--f7-page-transition-duration
) forwards
;
928 .ios .router-transition-forward .page-current:after {
932 background: rgba
(0, 0, 0, 0.1);
938 animation: ios-page-element-fade-in var
(--f7-page-transition-duration
) forwards
;
940 .ios
.router-transition-backward
.page-previous
,
941 .ios .router-transition-backward .page-current {
942 will-change: transform
;
944 .ios .router-transition-backward .page-previous {
945 animation: ios-page-previous-to-current var
(--f7-page-transition-duration
) forwards
;
947 .ios .router-transition-backward .page-previous:after {
951 background: rgba
(0, 0, 0, 0.1);
957 animation: ios-page-element-fade-out var
(--f7-page-transition-duration
) forwards
;
959 .ios .router-transition-backward .page-current {
960 animation: ios-page-current-to-next var
(--f7-page-transition-duration
) forwards
;
962 .ios .router-transition-backward .page-current:before {
971 background: linear-gradient
(to right
, rgba
(0, 0, 0, 0) 0%, rgba
(0, 0, 0, 0) 10%, rgba
(0, 0, 0, 0.01) 50%, rgba
(0, 0, 0, 0.2) 100%);
972 animation: ios-page-element-fade-out var
(--f7-page-transition-duration
) forwards
;
974 .ios
.router-dynamic-navbar-inside
.page-shadow-effect
,
975 .ios .router-dynamic-navbar-inside .page-opacity-effect {
976 top: var
(--f7-navbar-height
);
978 .ios
.router-dynamic-navbar-inside
.page-next:before
,
979 .ios
.router-dynamic-navbar-inside
.page-current:after
,
980 .ios
.router-dynamic-navbar-inside
.page-current:before
,
981 .ios .router-dynamic-navbar-inside .page-previous:after {
982 top: var
(--f7-navbar-height
);
984 @keyframes ios-page-next-to-current
{
986 transform: translate3d
(100%, 0, 0);
989 transform: translate3d
(0%, 0, 0);
992 @keyframes ios-page-previous-to-current
{
994 transform: translate3d
(-20%, 0, 0);
997 transform: translate3d
(0%, 0, 0);
1000 @keyframes ios-page-current-to-previous
{
1002 transform: translate3d
(0, 0, 0);
1005 transform: translate3d
(-20%, 0, 0);
1008 @keyframes ios-page-current-to-next
{
1010 transform: translate3d
(0, 0, 0);
1013 transform: translate3d
(100%, 0, 0);
1016 @keyframes ios-page-element-fade-in
{
1024 @keyframes ios-page-element-fade-out
{
1033 transform: translate3d
(0, 56px, 0);
1035 pointer-events: none
;
1037 .md .page-next.page-next-on-right {
1038 transform: translate3d
(100%, 0, 0);
1040 .md .router-transition-forward .page-next {
1041 will-change: transform
, opacity
;
1042 animation: md-page-next-to-current var
(--f7-page-transition-duration
) forwards
;
1044 .md .router-transition-forward .page-current {
1047 .md .router-transition-backward .page-current {
1048 will-change: transform
, opacity
;
1049 animation: md-page-current-to-next var
(--f7-page-transition-duration
) forwards
;
1051 .md .router-transition-backward .page-previous {
1054 @keyframes md-page-next-to-current
{
1056 transform: translate3d
(0, 56px, 0);
1060 transform: translate3d
(0, 0px, 0);
1064 @keyframes md-page-current-to-next
{
1066 transform: translate3d
(0, 0, 0);
1070 transform: translate3d
(0, 56px, 0);
1074 .aurora .page-next {
1075 pointer-events: none
;
1076 transform: translate3d
(100%, 0px, 0);
1078 .aurora .page-next.page-next-on-right {
1079 transform: translate3d
(100%, 0, 0);
1081 .aurora .page-previous .page-opacity-effect {
1084 .aurora .page-previous:after {
1087 .aurora .router-transition-forward .page-next {
1088 will-change: transform
;
1089 animation: aurora-page-next-to-current var
(--f7-page-transition-duration
) forwards
;
1091 .aurora .router-transition-forward .page-current {
1094 .aurora .router-transition-forward .page-current:after {
1098 background: rgba
(0, 0, 0, 0.1);
1104 animation: aurora-page-element-fade-in var
(--f7-page-transition-duration
) forwards
;
1106 .aurora .router-transition-backward .page-current {
1107 will-change: transform
, opacity
;
1108 animation: aurora-page-current-to-next var
(--f7-page-transition-duration
) forwards
;
1110 .aurora .router-transition-backward .page-previous {
1113 .aurora .router-transition-backward .page-previous:after {
1117 background: rgba
(0, 0, 0, 0.1);
1123 animation: aurora-page-element-fade-out var
(--f7-page-transition-duration
) forwards
;
1125 @keyframes aurora-page-next-to-current
{
1127 transform: translate3d
(100%, 0, 0);
1130 transform: translate3d
(0, 0px, 0);
1133 @keyframes aurora-page-current-to-next
{
1135 transform: translate3d
(0, 0, 0);
1138 transform: translate3d
(100%, 0, 0);
1141 @keyframes aurora-page-element-fade-in
{
1149 @keyframes aurora-page-element-fade-out
{
1157 .view:not(.view-master-detail) .page-master-stacked {
1160 .view:not(.view-master-detail) .navbar-master-stacked {
1163 .view-master-detail
.page-master
,
1164 .view-master-detail .navbar-master {
1165 width: var
(--f7-page-master-width
);
1166 --f7-safe-area-right: 0px;
1167 --f7-safe-area-outer-right: 0px;
1168 border-right: var
(--f7-page-master-border-width
) solid var
(--f7-page-master-border-color
);
1170 .view-master-detail
.page-master-detail
,
1171 .view-master-detail .navbar-master-detail {
1172 width: calc
(100% - var
(--f7-page-master-width
));
1173 --f7-safe-area-left: 0px;
1174 --f7-safe-area-outer-left: 0px;
1175 left: var
(--f7-page-master-width
);
1177 .view-master-detail .page-master {
1180 pointer-events: auto
;
1182 .view-master-detail
.page-master:before
,
1183 .view-master-detail .page-master:after {
1186 .view-master-detail.router-transition .page-master {
1191 --f7-link-highlight-black: rgba
(0, 0, 0, 0.1);
1192 --f7-link-highlight-white: rgba
(255, 255, 255, 0.15);
1193 --f7-link-highlight-color: var
(--f7-link-highlight-black
);
1196 --f7-link-highlight-color: var
(--f7-link-highlight-white
);
1200 display: inline-flex
;
1201 align-items: center
;
1202 align-content: center
;
1203 justify-content: center
;
1205 box-sizing: border-box
;
1206 transform: translate3d
(0, 0, 0);
1216 transition: opacity
300ms;
1218 .ios .link.active-state {
1220 transition-duration: 0ms;
1223 transition: opacity
300ms;
1225 .aurora .link.active-state {
1227 transition-duration: 0ms;
1229 /* === Navbar === */
1232 --f7-navbar-bg-color: var(--f7-bars-bg-color);
1233 --f7-navbar-bg-image: var(--f7-bars-bg-image);
1234 --f7-navbar-border-color: var(--f7-bars-border-color);
1235 --f7-navbar-link-color: var(--f7-bars-link-color);
1236 --f7-navbar-text-color: var(--f7-bars-text-color);
1238 --f7-navbar-hide-show-transition-duration: 400ms;
1239 --f7-navbar-title-line-height: 1.2;
1240 --f7-navbar-title-font-size: inherit
;
1241 --f7-navbar-subtitle-text-align: inherit
;
1242 --f7-navbar-large-title-line-height: 1.2;
1243 --f7-navbar-large-title-text-color: inherit
;
1246 --f7-navbar-height: 44px;
1247 --f7-navbar-tablet-height: 44px;
1248 --f7-navbar-font-size: 17px;
1249 --f7-navbar-inner-padding-left: 8px;
1250 --f7-navbar-inner-padding-right: 8px;
1251 --f7-navbar-title-font-weight: 600;
1252 --f7-navbar-title-margin-left: 0;
1253 --f7-navbar-title-margin-right: 0;
1254 --f7-navbar-title-text-align: center
;
1255 --f7-navbar-subtitle-text-color: #6d6d72;
1256 --f7-navbar-subtitle-font-size: 10px;
1257 --f7-navbar-subtitle-line-height: 1;
1258 --f7-navbar-shadow-image: none
;
1259 --f7-navbar-large-title-height: 52px;
1260 --f7-navbar-large-title-font-size: 34px;
1261 --f7-navbar-large-title-font-weight: 700;
1262 --f7-navbar-large-title-letter-spacing: -0.03em;
1263 --f7-navbar-large-title-padding-left: 15px;
1264 --f7-navbar-large-title-padding-right: 15px;
1266 --f7-navbar-link-height: var(--f7-navbar-height);
1267 --f7-navbar-link-line-height: var(--f7-navbar-height);
1272 --f7-navbar-subtitle-text-color: #8e8e93;
1275 --f7-navbar-height: 56px;
1276 --f7-navbar-tablet-height: 64px;
1277 --f7-navbar-font-size: 20px;
1278 --f7-navbar-inner-padding-left: 0px;
1279 --f7-navbar-inner-padding-right: 0px;
1280 --f7-navbar-title-font-weight: 500;
1281 --f7-navbar-title-margin-left: 16px;
1282 --f7-navbar-title-margin-right: 16px;
1283 --f7-navbar-title-text-align: left
;
1284 --f7-navbar-subtitle-text-color: rgba
(0, 0, 0, 0.85);
1285 --f7-navbar-subtitle-font-size: 14px;
1286 --f7-navbar-subtitle-line-height: 1.2;
1287 --f7-navbar-shadow-image: var
(--f7-bars-shadow-bottom-image
);
1288 --f7-navbar-large-title-font-size: 34px;
1289 --f7-navbar-large-title-height: 56px;
1290 --f7-navbar-large-title-font-weight: 500;
1291 --f7-navbar-large-title-letter-spacing: 0;
1292 --f7-navbar-large-title-padding-left: 16px;
1293 --f7-navbar-large-title-padding-right: 16px;
1295 --f7-navbar-link-height: var(--f7-navbar-height);
1296 --f7-navbar-link-line-height: var(--f7-navbar-height);
1301 --f7-navbar-subtitle-text-color: rgba
(255, 255, 255, 0.85);
1304 --f7-navbar-height: 38px;
1305 --f7-navbar-tablet-height: 38px;
1306 --f7-navbar-font-size: 14px;
1307 --f7-navbar-inner-padding-left: 15px;
1308 --f7-navbar-inner-padding-right: 15px;
1309 --f7-navbar-title-font-weight: 600;
1310 --f7-navbar-title-margin-left: 0;
1311 --f7-navbar-title-margin-right: 0;
1312 --f7-navbar-title-text-align: center
;
1313 --f7-navbar-subtitle-text-color: rgba
(0, 0, 0, 0.6);
1314 --f7-navbar-subtitle-font-size: 12px;
1315 --f7-navbar-subtitle-line-height: 1;
1316 --f7-navbar-shadow-image: none
;
1317 --f7-navbar-large-title-height: 38px;
1318 --f7-navbar-large-title-font-size: 26px;
1319 --f7-navbar-large-title-font-weight: bold
;
1320 --f7-navbar-large-title-letter-spacing: -0.03em;
1321 --f7-navbar-large-title-padding-left: 15px;
1322 --f7-navbar-large-title-padding-right: 15px;
1323 --f7-navbar-link-height: auto
;
1324 --f7-navbar-link-line-height: inherit
;
1326 .aurora
.theme-dark
,
1327 .aurora.theme-dark {
1328 --f7-navbar-subtitle-text-color: rgba
(255, 255, 255, 0.5);
1331 --f7-navbar-large-collapse-progress: 0;
1337 -webkit-backface-visibility: hidden
;
1338 backface-visibility: hidden
;
1339 box-sizing: border-box
;
1341 transform: translate3d
(0, 0, 0);
1342 height: var
(--f7-navbar-height
);
1343 background-image: var
(--f7-navbar-bg-image
, var
(--f7-bars-bg-image
));
1344 background-color: var
(--f7-navbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
1345 color: var
(--f7-navbar-text-color
, var
(--f7-bars-text-color
));
1346 font-size: var
(--f7-navbar-font-size
);
1352 color: var
(--f7-navbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
1356 justify-content: flex-start
;
1357 line-height: var
(--f7-navbar-link-line-height
, var
(--f7-navbar-height
));
1358 height: var
(--f7-navbar-link-height
, var
(--f7-navbar-height
));
1369 text-overflow: ellipsis
;
1370 white-space: nowrap
;
1372 font-weight: var
(--f7-navbar-title-font-weight
);
1373 display: inline-block
;
1374 line-height: var
(--f7-navbar-title-line-height
);
1375 text-align: var
(--f7-navbar-title-text-align
);
1376 font-size: var
(--f7-navbar-title-font-size
);
1377 margin-left: var
(--f7-navbar-title-margin-left
);
1378 margin-right: var
(--f7-navbar-title-margin-left
);
1382 color: var
(--f7-navbar-subtitle-text-color
);
1383 font-weight: normal
;
1384 font-size: var
(--f7-navbar-subtitle-font-size
);
1385 line-height: var
(--f7-navbar-subtitle-line-height
);
1386 text-align: var
(--f7-navbar-subtitle-text-align
);
1392 justify-content: flex-start
;
1393 align-items: center
;
1394 transform: translate3d
(0, 0, 0);
1396 .navbar .right:first-child {
1400 .navbar
.no-hairline:after
,
1401 .navbar.no-border:after {
1402 display: none
!important
;
1404 .navbar
.no-hairline
.title-large:after
,
1405 .navbar.no-border .title-large:after {
1406 display: none
!important
;
1408 .navbar.no-shadow:before {
1409 display: none
!important
;
1411 .navbar.navbar-hidden:before {
1412 opacity: 0 !important
;
1416 -webkit-backface-visibility: hidden
;
1417 backface-visibility: hidden
;
1422 background-color: var
(--f7-navbar-border-color
, var
(--f7-bars-border-color
));
1431 transform-origin: 50% 100%;
1432 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
1442 pointer-events: none
;
1443 background: var
(--f7-navbar-shadow-image
);
1448 @media (min-width: 768px) {
1450 --f7-navbar-height: var
(--f7-navbar-tablet-height
);
1453 .navbar-transitioning
,
1454 .navbar-transitioning:before
,
1455 .navbar-transitioning
.title
,
1456 .navbar-transitioning
.title-large
,
1457 .navbar-transitioning
.title-large-inner
,
1458 .navbar-transitioning
.title-large-text
,
1459 .navbar-transitioning .subnavbar {
1460 transition-duration: var
(--f7-navbar-hide-show-transition-duration
);
1462 .navbar-page-transitioning {
1463 transition-duration: var
(--f7-page-swipeback-transition-duration
) !important
;
1465 .navbar-page-transitioning
.title-large-text
,
1466 .navbar-page-transitioning .title-large-inner {
1467 transition-duration: var
(--f7-page-swipeback-transition-duration
) !important
;
1470 transform: translate3d
(0, -100%, 0);
1472 .navbar-large-hidden {
1473 --f7-navbar-large-collapse-progress: 1;
1480 height: var
(--f7-navbar-height
);
1482 align-items: center
;
1483 box-sizing: border-box
;
1484 padding: 0 calc
(var
(--f7-navbar-inner-padding-right
) + var
(--f7-safe-area-right
)) 0 calc
(var
(--f7-navbar-inner-padding-left
) + var
(--f7-safe-area-left
));
1486 .navbar-inner.stacked {
1494 .navbar-large:before {
1495 transform: translateY
(calc
((1 - var
(--f7-navbar-large-collapse-progress
)) * var
(--f7-navbar-large-title-height
)));
1497 .navbar-inner-large > .title {
1498 opacity: calc
(-1 + 2 * var
(--f7-navbar-large-collapse-progress
));
1500 .navbar-large-collapsed
,
1501 .navbar-inner-large-collapsed {
1502 --f7-navbar-large-collapse-progress: 1;
1504 .navbar .title-large {
1505 box-sizing: border-box
;
1511 align-items: center
;
1512 white-space: nowrap
;
1513 transform: translate3d
(0px, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1514 will-change: transform
, opacity
;
1515 transition-property: transform
;
1517 background-image: var
(--f7-navbar-bg-image
, var
(--f7-bars-bg-image
));
1518 background-color: var
(--f7-navbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
1519 height: calc
(var
(--f7-navbar-large-title-height
) + 1px);
1522 transform-origin: calc
(var
(--f7-navbar-large-title-padding-left
) + var
(--f7-safe-area-left
)) center
;
1524 .navbar .title-large:after {
1527 background-color: var
(--f7-navbar-border-color
, var
(--f7-bars-border-color
));
1536 transform-origin: 50% 100%;
1537 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
1540 .title-large-inner .title {
1541 text-overflow: ellipsis
;
1542 white-space: nowrap
;
1543 color: var
(--f7-navbar-large-title-text-color
);
1544 letter-spacing: var
(--f7-navbar-large-title-letter-spacing
);
1545 font-size: var
(--f7-navbar-large-title-font-size
);
1546 font-weight: var
(--f7-navbar-large-title-font-weight
);
1547 line-height: var
(--f7-navbar-large-title-line-height
);
1548 padding-left: calc
(var
(--f7-navbar-large-title-padding-left
) + var
(--f7-safe-area-left
));
1549 padding-right: calc
(var
(--f7-navbar-large-title-padding-right
) + var
(--f7-safe-area-right
));
1550 transform-origin: calc
(var
(--f7-navbar-large-title-padding-left
) + var
(--f7-safe-area-left
)) center
;
1553 .title-large-inner {
1554 box-sizing: border-box
;
1556 transform: translate3d
(0, calc
(var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1557 transition-property: transform
, opacity
;
1560 .navbar-no-title-large-transition
.title-large
,
1561 .navbar-no-title-large-transition
.title-large-text
,
1562 .navbar-no-title-large-transition .title-large-inner {
1563 transition-duration: 0ms;
1566 --f7-page-navbar-offset: var
(--f7-navbar-height
);
1568 .navbar
~ * .page-with-navbar-large
,
1569 .navbar
~ .page-with-navbar-large
,
1570 .page-with-navbar-large .navbar ~ * {
1571 --f7-page-navbar-offset: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
1574 .page.no-navbar .navbar ~ * {
1575 --f7-page-navbar-offset: 0px;
1578 --f7-navbarLeftTextOffset: calc
(4px + 12px + var
(--f7-navbar-inner-padding-left
));
1579 --f7-navbarTitleLargeOffset: var
(--f7-navbar-large-title-padding-left
);
1581 .ios .navbar .material-icons {
1584 .ios .navbar .f7-icons {
1587 .ios .navbar a.icon-only {
1590 justify-content: center
;
1592 .ios
.navbar
.left a
+ a
,
1593 .ios .navbar .right a + a {
1599 .ios .navbar .left {
1602 .ios .navbar .right {
1605 .ios .navbar .right:first-child {
1606 right: calc
(8px + var
(--f7-safe-area-right
));
1608 .ios .navbar-inner {
1609 justify-content: space-between
;
1611 .ios .navbar-inner-left-title {
1612 justify-content: flex-start
;
1614 .ios .navbar-inner-left-title .right {
1617 .ios .navbar-inner-left-title .title {
1621 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
),
1622 .ios .view:not(.view-master-detail) .navbar-previous {
1623 pointer-events: none
;
1625 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .title-large
,
1626 .ios .view:not(.view-master-detail) .navbar-previous .title-large {
1627 transform: translateY
(-100%);
1631 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .title-large
.title-large-text
,
1632 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
1633 transform: scale
(0.5);
1636 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .title-large
.title-large-inner
,
1637 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner {
1638 transform: translateX
(-100%);
1642 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .left
,
1643 .ios
.view:not
(.view-master-detail
) .navbar-previous
.left
,
1644 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .right
,
1645 .ios
.view:not
(.view-master-detail
) .navbar-previous
.right
,
1646 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) > .title
,
1647 .ios
.view:not
(.view-master-detail
) .navbar-previous
> .title
,
1648 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .subnavbar
,
1649 .ios
.view:not
(.view-master-detail
) .navbar-previous
.subnavbar
,
1650 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .fading
,
1651 .ios .view:not(.view-master-detail) .navbar-previous .fading {
1654 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .sliding
,
1655 .ios .view:not(.view-master-detail) .navbar-previous .sliding {
1658 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .subnavbar
.sliding
,
1659 .ios
.view:not
(.view-master-detail
) .navbar-previous
.subnavbar
.sliding
,
1660 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
).sliding
.subnavbar
,
1661 .ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar {
1663 transform: translate3d
(-100%, 0, 0);
1666 pointer-events: none
;
1668 .ios .navbar-next .title-large {
1669 transform: translateX
(100%);
1672 .ios
.navbar-next
.title-large
.title-large-text
,
1673 .ios .navbar-next .title-large .title-large-inner {
1676 .ios
.navbar-next
.left
,
1677 .ios
.navbar-next
.right
,
1678 .ios
.navbar-next
> .title
,
1679 .ios
.navbar-next
.subnavbar
,
1680 .ios .navbar-next .fading {
1683 .ios .navbar-next .sliding {
1686 .ios
.navbar-next
.sliding
.left
,
1687 .ios
.navbar-next
.sliding
.right
,
1688 .ios
.navbar-next
.sliding
> .title
,
1689 .ios .navbar-next.sliding .subnavbar {
1692 .ios
.navbar-next
.subnavbar
.sliding
,
1693 .ios .navbar-next.sliding .subnavbar {
1695 transform: translate3d
(100%, 0, 0);
1697 .ios
.router-dynamic-navbar-inside
.navbar-next
.title-large
,
1698 .ios
.router-dynamic-navbar-inside
.navbar-next
.title-large-text
,
1699 .ios .router-dynamic-navbar-inside .navbar-next .title-large-inner {
1702 .ios .router-dynamic-navbar-inside .navbar-previous .title-large {
1704 transform: translate3d
(0px, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1706 .ios
.router-dynamic-navbar-inside
.navbar-previous
.title-large-text
,
1707 .ios .router-dynamic-navbar-inside .navbar-previous .title-large-inner {
1708 transform: translate3d
(0, calc
(var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1710 .ios .router-transition .navbar {
1711 transition-duration: var
(--f7-page-transition-duration
);
1713 .ios .router-transition .title-large {
1716 .ios
.router-transition
.navbar-current
.left
,
1717 .ios
.router-transition
.navbar-current
> .title
,
1718 .ios
.router-transition
.navbar-current
.right
,
1719 .ios .router-transition .navbar-current .subnavbar {
1720 animation: ios-navbar-element-fade-out var
(--f7-page-transition-duration
) forwards
;
1722 .ios
.router-transition
.navbar-current
.sliding
,
1723 .ios
.router-transition
.navbar-current
.left
.sliding
.icon
+ span
,
1724 .ios
.router-transition
.navbar-current
.sliding
.left
,
1725 .ios
.router-transition
.navbar-current
.sliding
.left
.icon
+ span
,
1726 .ios
.router-transition
.navbar-current
.sliding
> .title
,
1727 .ios .router-transition .navbar-current.sliding .right {
1728 transition-duration: var
(--f7-page-transition-duration
);
1729 opacity: 0 !important
;
1732 .ios
.router-transition
.navbar-current
.sliding
.subnavbar
,
1733 .ios .router-transition .navbar-current .sliding.subnavbar {
1734 transition-duration: var
(--f7-page-transition-duration
);
1738 .ios
.router-transition-forward
.navbar-next
.left
,
1739 .ios
.router-transition-backward
.navbar-previous
.left
,
1740 .ios
.router-transition-forward
.navbar-next
> .title
,
1741 .ios
.router-transition-backward
.navbar-previous
> .title
,
1742 .ios
.router-transition-forward
.navbar-next
.right
,
1743 .ios
.router-transition-backward
.navbar-previous
.right
,
1744 .ios
.router-transition-forward
.navbar-next
.subnavbar
,
1745 .ios .router-transition-backward .navbar-previous .subnavbar {
1746 animation: ios-navbar-element-fade-in var
(--f7-page-transition-duration
) forwards
;
1748 .ios
.router-transition-forward
.navbar-next
.sliding
,
1749 .ios
.router-transition-backward
.navbar-previous
.sliding
,
1750 .ios
.router-transition-forward
.navbar-next
.left
.sliding
.icon
+ span
,
1751 .ios
.router-transition-backward
.navbar-previous
.left
.sliding
.icon
+ span
,
1752 .ios
.router-transition-forward
.navbar-next
.sliding
.left
,
1753 .ios
.router-transition-backward
.navbar-previous
.sliding
.left
,
1754 .ios
.router-transition-forward
.navbar-next
.sliding
.left
.icon
+ span
,
1755 .ios
.router-transition-backward
.navbar-previous
.sliding
.left
.icon
+ span
,
1756 .ios
.router-transition-forward
.navbar-next
.sliding
> .title
,
1757 .ios
.router-transition-backward
.navbar-previous
.sliding
> .title
,
1758 .ios
.router-transition-forward
.navbar-next
.sliding
.right
,
1759 .ios
.router-transition-backward
.navbar-previous
.sliding
.right
,
1760 .ios
.router-transition-forward
.navbar-next
.sliding
.subnavbar
,
1761 .ios .router-transition-backward .navbar-previous.sliding .subnavbar {
1762 transition-duration: var
(--f7-page-transition-duration
);
1764 transform: translate3d
(0, 0, 0) !important
;
1765 opacity: 1 !important
;
1767 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1770 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1771 animation: ios-navbar-title-large-text-slide-up var
(--f7-page-transition-duration
) forwards
, ios-navbar-title-large-text-fade-out var
(--f7-page-transition-duration
) forwards
;
1773 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1774 animation: ios-navbar-title-large-slide-up var
(--f7-page-transition-duration
) forwards
;
1776 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
1777 animation: ios-navbar-title-large-text-fade-out var
(--f7-page-transition-duration
) forwards
, ios-navbar-title-large-text-scale-out var
(--f7-page-transition-duration
) forwards
;
1779 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large .title-large-inner {
1780 animation: ios-navbar-title-large-inner-current-to-previous var
(--f7-page-transition-duration
) forwards
;
1782 .ios .router-transition-forward:not(.router-dynamic-navbar-inside) .navbar-next.router-navbar-transition-from-large .left .back span {
1783 animation: ios-navbar-back-text-next-to-current var
(--f7-page-transition-duration
) forwards
;
1785 transform-origin: left center
;
1787 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1790 .ios
.router-transition-forward
.navbar-next
.router-navbar-transition-from-large
.router-navbar-transition-to-large
.title-large
.title-large-text
,
1791 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1792 animation: ios-navbar-title-large-text-slide-left var
(--f7-page-transition-duration
) forwards
;
1794 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1795 animation: ios-navbar-title-large-slide-down var
(--f7-page-transition-duration
) forwards
;
1797 .ios
.router-transition-forward
.navbar-next
.router-navbar-transition-to-large:not
(.router-navbar-transition-from-large
) .title-large
.title-large-text
,
1798 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-inner {
1799 animation: ios-navbar-title-large-text-slide-left-top var
(--f7-page-transition-duration
) forwards
;
1801 .ios
.router-transition-forward
.navbar-next
.navbar-inner-large:not
(.navbar-inner-large-collapsed
) > .title
,
1802 .ios .router-transition-forward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1804 opacity: 0 !important
;
1805 transition-duration: 0;
1807 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-next
.title-large
,
1808 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-current
.title-large
,
1809 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-next
.title-large-text
,
1810 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-current
.title-large-text
,
1811 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-next
.title-large-inner
,
1812 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1813 animation: none
!important
;
1815 .ios .router-transition-backward:not(.router-dynamic-navbar-inside) .navbar-current.router-navbar-transition-to-large .left .back span {
1816 animation: ios-navbar-back-text-current-to-previous var
(--f7-page-transition-duration
) forwards
;
1818 transform-origin: left center
;
1820 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1822 transform: translateX
(100%);
1824 .ios
.router-transition-backward
.navbar-current
.router-navbar-transition-from-large
.router-navbar-transition-to-large
.title-large
.title-large-text
,
1825 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1826 animation: ios-navbar-title-large-text-slide-right var
(--f7-page-transition-duration
) forwards
;
1828 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1829 animation: ios-navbar-title-large-slide-up var
(--f7-page-transition-duration
) forwards
;
1831 .ios
.router-transition-backward
.navbar-current
.router-navbar-transition-from-large:not
(.router-navbar-transition-to-large
) .title-large
.title-large-text
,
1832 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-inner {
1833 animation: ios-navbar-title-large-text-slide-right-bottom var
(--f7-page-transition-duration
) forwards
;
1835 .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1838 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1841 transform: translateY
(0);
1843 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1844 animation: ios-navbar-title-large-text-slide-down var
(--f7-page-transition-duration
) forwards
, ios-navbar-title-large-text-fade-in var
(--f7-page-transition-duration
) forwards
;
1846 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1848 animation: ios-navbar-title-large-slide-down var
(--f7-page-transition-duration
) forwards
;
1850 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
1851 animation: ios-navbar-title-large-text-scale-in var
(--f7-page-transition-duration
) forwards
, ios-navbar-title-large-text-fade-in var
(--f7-page-transition-duration
) forwards
;
1853 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large .title-large-inner {
1854 animation: ios-navbar-title-large-inner-previous-to-current var
(--f7-page-transition-duration
) forwards
;
1856 .ios
.router-transition-backward
.navbar-current
.navbar-inner-large:not
(.navbar-inner-large-collapsed
) > .title
,
1857 .ios .router-transition-backward .navbar-previous.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1859 opacity: 0 !important
;
1860 transition-duration: 0;
1862 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-previous
.title-large
,
1863 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-current
.title-large
,
1864 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-previous
.title-large-text
,
1865 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-current
.title-large-text
,
1866 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-previous
.title-large-inner
,
1867 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1868 animation: none
!important
;
1870 .view-master-detail .navbar-master.navbar-previous {
1871 pointer-events: auto
;
1873 .view-master-detail
.navbar-master
.navbar-previous
.left
,
1874 .view-master-detail
.navbar-master
.navbar-previous:not
(.navbar-inner-large
) .title
,
1875 .view-master-detail
.navbar-master
.navbar-previous
.right
,
1876 .view-master-detail .navbar-master.navbar-previous .subnavbar {
1879 .ios
.view-master-detail
.router-transition
.navbar-master
.left
,
1880 .ios
.view-master-detail
.router-transition
.navbar-master
.left
.icon
+ span
,
1881 .ios
.view-master-detail
.router-transition
.navbar-master:not
(.navbar-inner-large
) .title
,
1882 .ios
.view-master-detail
.router-transition
.navbar-master
.right
,
1883 .ios
.view-master-detail
.router-transition
.navbar-master
.subnavbar
,
1884 .ios
.view-master-detail
.router-transition
.navbar-master
.sliding
,
1885 .ios .view-master-detail.router-transition .navbar-master .fading {
1886 opacity: 1 !important
;
1887 transition-duration: 0ms;
1888 transform: none
!important
;
1889 animation: none
!important
;
1891 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title {
1892 opacity: calc
(-1 + 2 * var
(--f7-navbar-large-collapse-progress
)) !important
;
1893 transition-duration: 0ms;
1894 transform: none
!important
;
1895 animation: none
!important
;
1897 .ios
.view-master-detail
.router-transition
.navbar-master
.navbar-inner-large
.title-large
,
1898 .ios
.view-master-detail
.router-transition
.navbar-master
.navbar-inner-large
.title-large-text
,
1899 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-inner {
1900 transition-duration: 0ms;
1901 animation: none
!important
;
1903 @keyframes ios-navbar-element-fade-in
{
1911 @keyframes ios-navbar-element-fade-out
{
1919 @keyframes ios-navbar-title-large-slide-up
{
1921 transform: translateY
(0%);
1924 transform: translateY
(calc
(-1 * var
(--f7-navbar-large-title-height
)));
1927 @keyframes ios-navbar-title-large-slide-down
{
1929 transform: translateY
(calc
(-1 * var
(--f7-navbar-large-title-height
)));
1932 transform: translateY
(0%);
1935 @keyframes ios-navbar-title-large-text-slide-up
{
1937 transform: translateX
(0px) translateY
(0%) scale
(1);
1940 transform: translateX
(calc
(var
(--f7-navbarLeftTextOffset
) - var
(--f7-navbarTitleLargeOffset
))) translateY
(calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(0.5);
1943 @keyframes ios-navbar-title-large-text-slide-down
{
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);
1948 transform: translateX
(0px) translateY
(0%) scale
(1);
1951 @keyframes ios-navbar-title-large-text-slide-left
{
1953 transform: translateX
(0%) scale
(1);
1956 transform: translateX
(-100%) scale
(1);
1959 @keyframes ios-navbar-title-large-text-slide-right
{
1961 transform: translateX
(-100%) scale
(1);
1964 transform: translateX
(0%) scale
(1);
1967 @keyframes ios-navbar-title-large-text-slide-left-top
{
1969 transform: translateX
(100%) translateY
(var
(--f7-navbar-large-title-height
)) scale
(1);
1972 transform: translateX
(0%) translateY
(0%) scale
(1);
1975 @keyframes ios-navbar-title-large-text-slide-right-bottom
{
1977 transform: translateX
(0%) translateY
(0%) scale
(1);
1980 transform: translateX
(100%) translateY
(var
(--f7-navbar-large-title-height
)) scale
(1);
1983 @keyframes ios-navbar-title-large-text-fade-out
{
1994 @keyframes ios-navbar-title-large-text-fade-in
{
2005 @keyframes ios-navbar-title-large-text-scale-out
{
2007 transform: translateY
(0%) scale
(1);
2010 transform: translateY
(0%) scale
(0.5);
2013 @keyframes ios-navbar-title-large-text-scale-in
{
2015 transform: translateY
(0%) scale
(0.5);
2018 transform: translateY
(0%) scale
(1);
2021 @keyframes ios-navbar-back-text-current-to-previous
{
2024 transform: translateY
(0px) translateX
(0px) scale
(1);
2031 transform: translateX
(calc
(var
(--f7-navbarTitleLargeOffset
) - var
(--f7-navbarLeftTextOffset
))) translateY
(calc
((var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(2);
2034 @keyframes ios-navbar-back-text-next-to-current
{
2037 transform: translateX
(calc
(var
(--f7-navbarTitleLargeOffset
) - var
(--f7-navbarLeftTextOffset
))) translateY
(calc
((var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(2);
2044 transform: translateX
(0px) translateY
(0px) scale
(1);
2047 @keyframes ios-navbar-title-large-inner-current-to-previous
{
2049 transform: translateX
(0%);
2053 transform: translateX
(-100%);
2057 @keyframes ios-navbar-title-large-inner-previous-to-current
{
2059 transform: translateX
(-100%);
2063 transform: translateX
(0%);
2067 .md .navbar .material-icons {
2070 .md .navbar .f7-icons {
2073 .md .navbar a.link {
2077 .md .navbar a.link:before {
2084 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
2085 background-repeat: no-repeat
;
2086 background-position: center
;
2087 background-size: 100% 100%;
2089 pointer-events: none
;
2090 transition-duration: 600ms;
2092 .md .navbar a.link.active-state:before {
2094 transition-duration: 150ms;
2096 .md .navbar a.icon-only {
2101 .md .navbar .right {
2104 .md .navbar .right:first-child {
2105 right: var
(--f7-safe-area-right
);
2108 justify-content: flex-start
;
2111 .md .navbar-inner-large:not(.navbar-inner-large-collapsed) {
2114 .md .page.page-with-subnavbar .navbar-inner {
2117 .md .navbar-inner-centered-title {
2118 justify-content: space-between
;
2120 .md .navbar-inner-centered-title .right {
2123 .md .navbar-inner-centered-title .title {
2126 .aurora .navbar a.icon-only {
2128 justify-content: center
;
2130 .aurora
.navbar
.left a
+ a
,
2131 .aurora .navbar .right a + a {
2137 .aurora .navbar .left {
2140 .aurora .navbar .right {
2143 .aurora .navbar .right:first-child {
2144 right: calc
(15px + var
(--f7-safe-area-right
));
2146 .aurora .navbar-inner {
2147 justify-content: space-between
;
2149 .aurora .navbar-inner-left-title {
2150 justify-content: flex-start
;
2152 .aurora .navbar-inner-left-title .right {
2155 .aurora .navbar-inner-left-title .title {
2159 /* === Toolbar === */
2162 --f7-toolbar-bg-color: var(--f7-bars-bg-color);
2163 --f7-toolbar-bg-image: var(--f7-bars-bg-image);
2164 --f7-toolbar-border-color: var(--f7-bars-border-color);
2165 --f7-toolbar-link-color: var(--f7-bars-link-color);
2166 --f7-toolbar-text-color: var(--f7-bars-text-color);
2167 --f7-tabbar-link-active-color: var(--f7-theme-color);
2169 --f7-tabbar-link-active-bg-color: transparent
;
2170 --f7-tabbar-label-text-transform: none
;
2171 --f7-toolbar-hide-show-transition-duration: 400ms;
2174 --f7-toolbar-height: 44px;
2175 --f7-toolbar-font-size: 17px;
2176 --f7-toolbar-inner-padding-left: 8px;
2177 --f7-toolbar-inner-padding-right: 8px;
2179 --f7-toolbar-link-height: var(--f7-toolbar-height);
2180 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2182 --f7-tabbar-labels-height: 50px;
2183 --f7-tabbar-labels-tablet-height: 56px;
2184 --f7-tabbar-link-inactive-color: #929292;
2185 --f7-toolbar-top-shadow-image: none
;
2186 --f7-toolbar-bottom-shadow-image: none
;
2187 --f7-tabbar-icon-size: 28px;
2188 --f7-tabbar-link-text-transform: none
;
2189 --f7-tabbar-link-font-weight: 400;
2190 --f7-tabbar-link-letter-spacing: 0;
2191 --f7-tabbar-label-font-size: 10px;
2192 --f7-tabbar-label-tablet-font-size: 14px;
2193 --f7-tabbar-label-font-weight: 400;
2194 --f7-tabbar-label-letter-spacing: 0.01;
2197 --f7-toolbar-height: 48px;
2198 --f7-toolbar-font-size: 14px;
2199 --f7-toolbar-inner-padding-left: 0px;
2200 --f7-toolbar-inner-padding-right: 0px;
2202 --f7-toolbar-link-height: var(--f7-toolbar-height);
2203 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2205 --f7-tabbar-labels-height: 56px;
2206 --f7-tabbar-labels-tablet-height: 56px;
2207 --f7-tabbar-link-inactive-color: rgba
(0, 0, 0, 0.54);
2209 --f7-tabbar-link-active-border-color: var(--f7-theme-color);
2211 --f7-toolbar-top-shadow-image: var
(--f7-bars-shadow-bottom-image
);
2212 --f7-toolbar-bottom-shadow-image: var
(--f7-bars-shadow-top-image
);
2213 --f7-tabbar-icon-size: 24px;
2214 --f7-tabbar-link-text-transform: uppercase
;
2215 --f7-tabbar-link-font-weight: 500;
2216 --f7-tabbar-link-letter-spacing: 0.03em;
2217 --f7-tabbar-label-font-size: 14px;
2218 --f7-tabbar-label-tablet-font-size: 14px;
2219 --f7-tabbar-label-font-weight: 400;
2220 --f7-tabbar-label-letter-spacing: 0;
2224 --f7-tabbar-link-inactive-color: rgba
(255, 255, 255, 0.54);
2227 --f7-toolbar-height: 38px;
2228 --f7-toolbar-font-size: 14px;
2229 --f7-toolbar-inner-padding-left: 15px;
2230 --f7-toolbar-inner-padding-right: 15px;
2231 --f7-toolbar-link-height: auto
;
2232 --f7-toolbar-link-line-height: inherit
;
2233 --f7-tabbar-labels-height: 44px;
2234 --f7-tabbar-labels-tablet-height: 44px;
2235 --f7-tabbar-link-inactive-color: rgba
(0, 0, 0, 0.5);
2236 --f7-tabbar-link-inactive-bg-color: rgba
(0, 0, 0, 0.2);
2237 --f7-toolbar-top-shadow-image: none
;
2238 --f7-toolbar-bottom-shadow-image: none
;
2239 --f7-tabbar-icon-size: 18px;
2240 --f7-tabbar-link-text-transform: none
;
2241 --f7-tabbar-link-font-weight: 400;
2242 --f7-tabbar-link-letter-spacing: 0;
2243 --f7-tabbar-label-font-size: 12px;
2244 --f7-tabbar-label-tablet-font-size: 12px;
2245 --f7-tabbar-label-font-weight: 500;
2246 --f7-tabbar-label-letter-spacing: 0.01;
2248 .aurora
.theme-dark
,
2249 .aurora.theme-dark {
2250 --f7-tabbar-link-inactive-color: rgba
(255, 255, 255, 0.5);
2256 transform: translate3d
(0, 0, 0);
2257 -webkit-backface-visibility: hidden
;
2258 backface-visibility: hidden
;
2260 box-sizing: border-box
;
2262 height: var
(--f7-toolbar-height
);
2263 background-image: var
(--f7-toolbar-bg-image
, var
(--f7-bars-bg-image
));
2264 background-color: var
(--f7-toolbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
2265 color: var
(--f7-toolbar-text-color
, var
(--f7-bars-text-color
));
2266 font-size: var
(--f7-toolbar-font-size
);
2272 color: var
(--f7-toolbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
2273 box-sizing: border-box
;
2276 white-space: nowrap
;
2277 text-overflow: ellipsis
;
2281 line-height: var
(--f7-toolbar-link-line-height
, var
(--f7-toolbar-height
));
2282 height: var
(--f7-toolbar-link-height
, var
(--f7-toolbar-height
));
2289 -webkit-backface-visibility: hidden
;
2290 backface-visibility: hidden
;
2298 .ios
.toolbar-top-ios
,
2299 .md
.toolbar-top-md
,
2300 .aurora .toolbar-top-aurora {
2303 .toolbar-top
.tab-link-highlight
,
2304 .ios
.toolbar-top-ios
.tab-link-highlight
,
2305 .md
.toolbar-top-md
.tab-link-highlight
,
2306 .aurora .toolbar-top-aurora .tab-link-highlight {
2309 .toolbar-top
.no-hairline:after
,
2310 .ios
.toolbar-top-ios
.no-hairline:after
,
2311 .md
.toolbar-top-md
.no-hairline:after
,
2312 .aurora
.toolbar-top-aurora
.no-hairline:after
,
2313 .toolbar-top
.no-border:after
,
2314 .ios
.toolbar-top-ios
.no-border:after
,
2315 .md
.toolbar-top-md
.no-border:after
,
2316 .aurora .toolbar-top-aurora.no-border:after {
2317 display: none
!important
;
2319 .toolbar-top
.no-shadow:before
,
2320 .ios
.toolbar-top-ios
.no-shadow:before
,
2321 .md
.toolbar-top-md
.no-shadow:before
,
2322 .aurora
.toolbar-top-aurora
.no-shadow:before
,
2323 .toolbar-top
.toolbar-hidden:before
,
2324 .ios
.toolbar-top-ios
.toolbar-hidden:before
,
2325 .md
.toolbar-top-md
.toolbar-hidden:before
,
2326 .aurora .toolbar-top-aurora.toolbar-hidden:before {
2327 display: none
!important
;
2330 .ios
.toolbar-top-ios:after
,
2331 .md
.toolbar-top-md:after
,
2332 .aurora
.toolbar-top-aurora:after
,
2333 .toolbar-top:before
,
2334 .ios
.toolbar-top-ios:before
,
2335 .md
.toolbar-top-md:before
,
2336 .aurora .toolbar-top-aurora:before {
2337 -webkit-backface-visibility: hidden
;
2338 backface-visibility: hidden
;
2341 .ios
.toolbar-top-ios:after
,
2342 .md
.toolbar-top-md:after
,
2343 .aurora .toolbar-top-aurora:after {
2346 background-color: var
(--f7-toolbar-border-color
, var
(--f7-bars-border-color
));
2355 transform-origin: 50% 100%;
2356 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2358 .toolbar-top:before
,
2359 .ios
.toolbar-top-ios:before
,
2360 .md
.toolbar-top-md:before
,
2361 .aurora .toolbar-top-aurora:before {
2369 pointer-events: none
;
2370 background: var
(--f7-toolbar-top-shadow-image
);
2373 .ios
.toolbar-bottom-ios
,
2374 .md
.toolbar-bottom-md
,
2375 .aurora .toolbar-bottom-aurora {
2377 height: calc
(var
(--f7-toolbar-height
) + var
(--f7-safe-area-bottom
));
2379 .toolbar-bottom
.tab-link-highlight
,
2380 .ios
.toolbar-bottom-ios
.tab-link-highlight
,
2381 .md
.toolbar-bottom-md
.tab-link-highlight
,
2382 .aurora .toolbar-bottom-aurora .tab-link-highlight {
2385 .toolbar-bottom
.toolbar-inner
,
2386 .ios
.toolbar-bottom-ios
.toolbar-inner
,
2387 .md
.toolbar-bottom-md
.toolbar-inner
,
2388 .aurora .toolbar-bottom-aurora .toolbar-inner {
2391 bottom: var
(--f7-safe-area-bottom
);
2393 .toolbar-bottom
.no-hairline:before
,
2394 .ios
.toolbar-bottom-ios
.no-hairline:before
,
2395 .md
.toolbar-bottom-md
.no-hairline:before
,
2396 .aurora
.toolbar-bottom-aurora
.no-hairline:before
,
2397 .toolbar-bottom
.no-border:before
,
2398 .ios
.toolbar-bottom-ios
.no-border:before
,
2399 .md
.toolbar-bottom-md
.no-border:before
,
2400 .aurora .toolbar-bottom-aurora.no-border:before {
2401 display: none
!important
;
2403 .toolbar-bottom
.no-shadow:after
,
2404 .ios
.toolbar-bottom-ios
.no-shadow:after
,
2405 .md
.toolbar-bottom-md
.no-shadow:after
,
2406 .aurora
.toolbar-bottom-aurora
.no-shadow:after
,
2407 .toolbar-bottom
.toolbar-hidden:after
,
2408 .ios
.toolbar-bottom-ios
.toolbar-hidden:after
,
2409 .md
.toolbar-bottom-md
.toolbar-hidden:after
,
2410 .aurora .toolbar-bottom-aurora.toolbar-hidden:after {
2411 display: none
!important
;
2413 .toolbar-bottom:before
,
2414 .ios
.toolbar-bottom-ios:before
,
2415 .md
.toolbar-bottom-md:before
,
2416 .aurora .toolbar-bottom-aurora:before {
2419 background-color: var
(--f7-toolbar-border-color
, var
(--f7-bars-border-color
));
2428 transform-origin: 50% 0%;
2429 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2431 .toolbar-bottom:after
,
2432 .ios
.toolbar-bottom-ios:after
,
2433 .md
.toolbar-bottom-md:after
,
2434 .aurora .toolbar-bottom-aurora:after {
2442 pointer-events: none
;
2443 background: var
(--f7-toolbar-bottom-shadow-image
);
2452 justify-content: space-between
;
2453 box-sizing: border-box
;
2454 align-items: center
;
2455 align-content: center
;
2457 padding: 0 calc
(var
(--f7-toolbar-inner-padding-right
) + var
(--f7-safe-area-right
)) 0 calc
(var
(--f7-toolbar-inner-padding-left
) + var
(--f7-safe-area-left
));
2460 .views > .tabbar-labels {
2465 color: var
(--f7-tabbar-link-inactive-color
);
2467 .tabbar a
.tab-link:not
(.tab-link-active
),
2468 .tabbar-labels a.tab-link:not(.tab-link-active) {
2469 background-color: var
(--f7-tabbar-link-inactive-bg-color
, transparent
);
2472 .tabbar-labels a.link {
2476 .tabbar-labels a
.tab-link
,
2478 .tabbar-labels a.link {
2481 box-sizing: border-box
;
2483 justify-content: center
;
2484 align-items: center
;
2485 flex-direction: column
;
2486 text-transform: var
(--f7-tabbar-link-text-transform
);
2487 font-weight: var
(--f7-tabbar-link-font-weight
);
2488 letter-spacing: var
(--f7-tabbar-link-letter-spacing
);
2491 .tabbar
.tab-link-active
,
2492 .tabbar-labels .tab-link-active {
2493 color: var
(--f7-tabbar-link-active-color
, var
(--f7-theme-color
));
2494 background-color: var
(--f7-tabbar-link-active-bg-color
, transparent
);
2497 .tabbar-labels i.icon {
2498 font-size: var
(--f7-tabbar-icon-size
);
2499 height: var
(--f7-tabbar-icon-size
);
2500 line-height: var
(--f7-tabbar-icon-size
);
2503 --f7-toolbar-height: var
(--f7-tabbar-labels-height
);
2505 .tabbar-labels a
.tab-link
,
2506 .tabbar-labels a.link {
2508 justify-content: space-between
;
2509 align-items: center
;
2511 .tabbar-labels .tabbar-label {
2516 text-overflow: ellipsis
;
2517 white-space: nowrap
;
2518 font-size: var
(--f7-tabbar-label-font-size
);
2519 text-transform: var
(--f7-tabbar-label-text-transform
);
2520 font-weight: var
(--f7-tabbar-label-font-weight
);
2521 letter-spacing: var
(--f7-tabbar-label-letter-spacing
);
2523 @media (min-width: 768px) {
2525 --f7-tabbar-labels-height: var
(--f7-tabbar-labels-tablet-height
);
2526 --f7-tabbar-label-font-size: var
(--f7-tabbar-label-tablet-font-size
);
2529 .tabbar-scrollable .toolbar-inner {
2530 justify-content: flex-start
;
2531 will-change: scroll-position
;
2533 -webkit-overflow-scrolling: touch
;
2535 .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
2536 display: none
!important
;
2537 width: 0 !important
;
2538 height: 0 !important
;
2539 -webkit-appearance: none
;
2540 opacity: 0 !important
;
2542 .tabbar-scrollable a
.tab-link
,
2543 .tabbar-scrollable a.link {
2547 .toolbar-transitioning
,
2548 .navbar-transitioning
+ .toolbar
,
2549 .navbar-transitioning ~ * .toolbar {
2550 transition-duration: var
(--f7-toolbar-hide-show-transition-duration
);
2552 .toolbar-bottom
~ *,
2553 .ios
.toolbar-bottom-ios
~ *,
2554 .md
.toolbar-bottom-md
~ *,
2555 .aurora .toolbar-bottom-aurora ~ * {
2556 --f7-page-toolbar-bottom-offset: var
(--f7-toolbar-height
);
2558 .toolbar-bottom
.tabbar-labels
~ *,
2559 .ios
.toolbar-bottom-ios
.tabbar-labels
~ *,
2560 .md
.toolbar-bottom-md
.tabbar-labels
~ *,
2561 .aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
2562 --f7-page-toolbar-bottom-offset: var
(--f7-tabbar-labels-height
);
2564 .toolbar-bottom
.toolbar-hidden
,
2565 .ios
.toolbar-bottom-ios
.toolbar-hidden
,
2566 .md
.toolbar-bottom-md
.toolbar-hidden
,
2567 .aurora .toolbar-bottom-aurora.toolbar-hidden {
2568 transform: translate3d
(0, 100%, 0);
2571 .ios
.toolbar-top-ios
~ *,
2572 .md
.toolbar-top-md
~ *,
2573 .aurora .toolbar-top-aurora ~ * {
2574 --f7-page-toolbar-top-offset: var
(--f7-toolbar-height
);
2576 .toolbar-top
.tabbar-labels
~ *,
2577 .ios
.toolbar-top-ios
.tabbar-labels
~ *,
2578 .md
.toolbar-top-md
.tabbar-labels
~ *,
2579 .aurora .toolbar-top-aurora.tabbar-labels ~ * {
2580 --f7-page-toolbar-top-offset: var
(--f7-tabbar-labels-height
);
2582 .toolbar-top
.toolbar-hidden
,
2583 .ios
.toolbar-top-ios
.toolbar-hidden
,
2584 .md
.toolbar-top-md
.toolbar-hidden
,
2585 .aurora .toolbar-top-aurora.toolbar-hidden {
2586 transform: translate3d
(0, -100%, 0);
2588 .navbar
~ .toolbar-top
,
2589 .ios
.navbar
~ .toolbar-top-ios
,
2590 .md
.navbar
~ .toolbar-top-md
,
2591 .aurora
.navbar
~ .toolbar-top-aurora
,
2592 .navbar
~ * .toolbar-top
,
2593 .ios
.navbar
~ * .toolbar-top-ios
,
2594 .md
.navbar
~ * .toolbar-top-md
,
2595 .aurora
.navbar
~ * .toolbar-top-aurora
,
2596 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
,
2597 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
,
2598 .md
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-md
,
2599 .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
2600 top: var
(--f7-navbar-height
);
2602 .navbar
~ .toolbar-top
.toolbar-hidden
,
2603 .ios
.navbar
~ .toolbar-top-ios
.toolbar-hidden
,
2604 .md
.navbar
~ .toolbar-top-md
.toolbar-hidden
,
2605 .aurora
.navbar
~ .toolbar-top-aurora
.toolbar-hidden
,
2606 .navbar
~ * .toolbar-top
.toolbar-hidden
,
2607 .ios
.navbar
~ * .toolbar-top-ios
.toolbar-hidden
,
2608 .md
.navbar
~ * .toolbar-top-md
.toolbar-hidden
,
2609 .aurora
.navbar
~ * .toolbar-top-aurora
.toolbar-hidden
,
2610 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
.toolbar-hidden
,
2611 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
.toolbar-hidden
,
2612 .md
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-md
.toolbar-hidden
,
2613 .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
2614 transform: translate3d
(0, calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-toolbar-height
))), 0);
2616 .navbar
~ .toolbar-top
.toolbar-hidden
.tabbar-labels
,
2617 .ios
.navbar
~ .toolbar-top-ios
.toolbar-hidden
.tabbar-labels
,
2618 .md
.navbar
~ .toolbar-top-md
.toolbar-hidden
.tabbar-labels
,
2619 .aurora
.navbar
~ .toolbar-top-aurora
.toolbar-hidden
.tabbar-labels
,
2620 .navbar
~ * .toolbar-top
.toolbar-hidden
.tabbar-labels
,
2621 .ios
.navbar
~ * .toolbar-top-ios
.toolbar-hidden
.tabbar-labels
,
2622 .md
.navbar
~ * .toolbar-top-md
.toolbar-hidden
.tabbar-labels
,
2623 .aurora
.navbar
~ * .toolbar-top-aurora
.toolbar-hidden
.tabbar-labels
,
2624 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
.toolbar-hidden
.tabbar-labels
,
2625 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
.toolbar-hidden
.tabbar-labels
,
2626 .md
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-md
.toolbar-hidden
.tabbar-labels
,
2627 .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
2628 transform: translate3d
(0, calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-tabbar-labels-height
))), 0);
2630 .navbar-hidden
+ .toolbar-top:not
(.toolbar-hidden
),
2631 .ios
.navbar-hidden
+ .toolbar-top-ios:not
(.toolbar-hidden
),
2632 .md
.navbar-hidden
+ .toolbar-top-md:not
(.toolbar-hidden
),
2633 .aurora
.navbar-hidden
+ .toolbar-top-aurora:not
(.toolbar-hidden
),
2634 .navbar-hidden
~ * .toolbar-top:not
(.toolbar-hidden
),
2635 .ios
.navbar-hidden
~ * .toolbar-top-ios:not
(.toolbar-hidden
),
2636 .md
.navbar-hidden
~ * .toolbar-top-md:not
(.toolbar-hidden
),
2637 .aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
2638 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-height
)), 0);
2640 .navbar-large-hidden
+ .toolbar-top:not
(.toolbar-hidden
),
2641 .ios
.navbar-large-hidden
+ .toolbar-top-ios:not
(.toolbar-hidden
),
2642 .md
.navbar-large-hidden
+ .toolbar-top-md:not
(.toolbar-hidden
),
2643 .navbar-large-hidden
~ * .toolbar-top:not
(.toolbar-hidden
),
2644 .ios
.navbar-large-hidden
~ * .toolbar-top-ios:not
(.toolbar-hidden
),
2645 .md
.navbar-large-hidden
~ * .toolbar-top-md:not
(.toolbar-hidden
),
2646 .aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
2647 transform: translate3d
(0, calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
))), 0);
2649 .ios .toolbar a.icon-only {
2650 min-height: var
(--f7-toolbar-height
);
2652 justify-content: center
;
2653 align-items: center
;
2657 .ios
.tabbar-labels a
.tab-link
,
2658 .ios .tabbar-labels a.link {
2660 padding-bottom: 4px;
2662 .ios
.tabbar-labels a
.tab-link i
+ span
,
2663 .ios .tabbar-labels a.link i + span {
2666 @media (min-width: 768px) {
2667 .ios
.tabbar
.toolbar-inner
,
2668 .ios .tabbar-labels .toolbar-inner {
2669 justify-content: center
;
2671 .ios
.tabbar a
.tab-link
,
2672 .ios
.tabbar-labels a
.tab-link
,
2673 .ios
.tabbar a
.link
,
2674 .ios .tabbar-labels a.link {
2679 .ios .tabbar-scrollable .toolbar-inner {
2680 justify-content: flex-start
;
2682 .ios
.tabbar-scrollable a
.tab-link
,
2683 .ios .tabbar-scrollable a.link {
2686 .md .toolbar a.link {
2687 justify-content: center
;
2691 .md .toolbar a.link:before {
2698 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
2699 background-repeat: no-repeat
;
2700 background-position: center
;
2701 background-size: 100% 100%;
2703 pointer-events: none
;
2704 transition-duration: 600ms;
2706 .md .toolbar a.link.active-state:before {
2708 transition-duration: 150ms;
2710 .md .toolbar a.icon-only {
2714 .md
.tabbar a
.tab-link
,
2715 .md
.tabbar-labels a
.tab-link
,
2717 .md .tabbar-labels a.link {
2721 .md
.tabbar a
.icon-only
,
2722 .md .tabbar-labels a.icon-only {
2723 flex-shrink: initial
;
2725 .md
.tabbar a
.tab-link
,
2726 .md .tabbar-labels a.tab-link {
2727 transition-duration: 300ms;
2731 .md
.tabbar
.tab-link-highlight
,
2732 .md .tabbar-labels .tab-link-highlight {
2735 background: var
(--f7-tabbar-link-active-border-color
, var
(--f7-theme-color
));
2736 transition-duration: 300ms;
2739 .md
.tabbar-labels a
.tab-link
,
2740 .md .tabbar-labels a.link {
2742 padding-bottom: 7px;
2749 .md .tabbar-scrollable .toolbar-inner {
2752 .md
.tabbar-scrollable a
.tab-link
,
2753 .md .tabbar-scrollable a.link {
2756 .aurora .toolbar a.icon-only {
2757 min-height: var
(--f7-toolbar-height
);
2759 justify-content: center
;
2760 align-items: center
;
2763 .aurora
.tabbar
.toolbar-inner
,
2764 .aurora .tabbar-labels .toolbar-inner {
2768 .aurora
.tabbar a
.tab-link
,
2769 .aurora
.tabbar-labels a
.tab-link
,
2770 .aurora
.tabbar a
.link
,
2771 .aurora .tabbar-labels a.link {
2772 transition-duration: 200ms;
2774 .aurora
.tabbar-labels a
.tab-link
,
2775 .aurora .tabbar-labels a.link {
2777 padding-bottom: 5px;
2779 .aurora
.tabbar-labels a
.tab-link i
+ span
,
2780 .aurora .tabbar-labels a.link i + span {
2783 .aurora .tabbar-scrollable .toolbar-inner {
2784 justify-content: flex-start
;
2786 .aurora
.tabbar-scrollable a
.tab-link
,
2787 .aurora .tabbar-scrollable a.link {
2790 /* === Subnavbar === */
2793 --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
2794 --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
2795 --f7-subnavbar-border-color: var(--f7-bars-border-color);
2796 --f7-subnavbar-link-color: var(--f7-bars-link-color);
2797 --f7-subnavbar-text-color: var(--f7-bars-text-color);
2799 --f7-subnavbar-title-line-height: 1.2;
2802 --f7-subnavbar-height: 44px;
2803 --f7-subnavbar-inner-padding-left: 8px;
2804 --f7-subnavbar-inner-padding-right: 8px;
2805 --f7-subnavbar-title-font-size: 34px;
2806 --f7-subnavbar-title-font-weight: 700;
2807 --f7-subnavbar-title-letter-spacing: -0.03em;
2808 --f7-subnavbar-title-margin-left: 7px;
2809 --f7-subnavbar-shadow-image: none
;
2811 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
2812 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
2816 --f7-subnavbar-height: 48px;
2817 --f7-subnavbar-inner-padding-left: 16px;
2818 --f7-subnavbar-inner-padding-right: 16px;
2819 --f7-subnavbar-title-font-size: 20px;
2820 --f7-subnavbar-title-font-weight: 500;
2821 --f7-subnavbar-title-letter-spacing: 0;
2822 --f7-subnavbar-title-margin-left: 0px;
2823 --f7-subnavbar-shadow-image: var
(--f7-bars-shadow-bottom-image
);
2825 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
2826 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
2830 --f7-subnavbar-height: 38px;
2831 --f7-subnavbar-inner-padding-left: 15px;
2832 --f7-subnavbar-inner-padding-right: 15px;
2833 --f7-subnavbar-title-font-size: 26px;
2834 --f7-subnavbar-title-font-weight: bold
;
2835 --f7-subnavbar-title-letter-spacing: -0.03em;
2836 --f7-subnavbar-title-margin-left: 0px;
2837 --f7-subnavbar-shadow-image: none
;
2838 --f7-subnavbar-link-height: auto
;
2839 --f7-subnavbar-link-line-height: inherit
;
2847 box-sizing: border-box
;
2849 justify-content: space-between
;
2850 align-items: center
;
2851 background-image: var
(--f7-subnavbar-bg-image
, var
(--f7-bars-bg-image
));
2852 background-color: var
(--f7-subnavbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
2853 color: var
(--f7-subnavbar-text-color
, var
(--f7-bars-text-color
));
2858 text-overflow: ellpsis
;
2859 white-space: nowrap
;
2860 font-size: var
(--f7-subnavbar-title-font-size
);
2861 font-weight: var
(--f7-subnavbar-title-font-weight
);
2863 display: inline-block
;
2864 line-height: var
(--f7-subnavbar-title-line-height
);
2865 letter-spacing: var
(--f7-subnavbar-title-letter-spacing
);
2866 margin-left: var
(--f7-subnavbar-title-margin-left
);
2872 justify-content: flex-start
;
2873 align-items: center
;
2875 .subnavbar .right:first-child {
2880 color: var
(--f7-subnavbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
2883 line-height: var
(--f7-subnavbar-link-line-height
, var
(--f7-subnavbar-height
));
2884 height: var
(--f7-subnavbar-link-height
, var
(--f7-subnavbar-height
));
2886 .subnavbar a.icon-only {
2887 min-width: var
(--f7-subnavbar-height
);
2889 .subnavbar
.no-hairline:after
,
2890 .subnavbar.no-border:after {
2891 display: none
!important
;
2893 .subnavbar
.no-shadow:before
,
2894 .subnavbar.navbar-hidden:before {
2895 display: none
!important
;
2899 -webkit-backface-visibility: hidden
;
2900 backface-visibility: hidden
;
2905 background-color: var
(--f7-subnavbar-border-color
, var
(--f7-bars-border-color
));
2914 transform-origin: 50% 100%;
2915 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2925 pointer-events: none
;
2926 background: var
(--f7-subnavbar-shadow-image
);
2932 align-items: center
;
2933 box-sizing: border-box
;
2934 justify-content: space-between
;
2936 padding: 0 calc
(var
(--f7-subnavbar-inner-padding-left
) + var
(--f7-safe-area-right
)) 0 calc
(var
(--f7-subnavbar-inner-padding-right
) + var
(--f7-safe-area-left
));
2938 .subnavbar-inner.stacked {
2941 .navbar .subnavbar {
2944 .views
> .subnavbar
,
2946 .page > .subnavbar {
2949 .navbar
~ * .subnavbar
,
2950 .page-with-subnavbar
.navbar
~ .subnavbar
,
2951 .page-with-subnavbar
.navbar
~ * .subnavbar
,
2952 .navbar
~ .page-with-subnavbar:not
(.no-navbar
) .subnavbar
,
2953 .navbar ~ .subnavbar {
2954 top: var
(--f7-navbar-height
);
2956 .navbar
~ .page-with-navbar-large:not
(.no-navbar
) .subnavbar
,
2957 .page-with-subnavbar
.page-with-navbar-large
.navbar
~ .subnavbar
,
2958 .page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar {
2959 top: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
2960 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
2962 .navbar .title-large ~ .subnavbar {
2963 top: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
2964 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
2966 .page-with-subnavbar
,
2968 --f7-page-subnavbar-offset: var
(--f7-subnavbar-height
);
2971 height: calc
(var
(--f7-subnavbar-height
) + 1px);
2975 .ios .subnavbar .title {
2976 align-self: flex-start
;
2979 .ios
.subnavbar
.left a
+ a
,
2980 .ios .subnavbar .right a + a {
2983 .ios .subnavbar .left {
2986 .ios .subnavbar .right {
2989 .ios .subnavbar .right:first-child {
2992 .ios .subnavbar a.link {
2993 justify-content: flex-start
;
2995 .ios .subnavbar a.icon-only {
2996 justify-content: center
;
3000 height: var
(--f7-subnavbar-height
);
3002 .md .subnavbar .right {
3005 .md .subnavbar .right:first-child {
3008 .md .subnavbar a.link {
3009 justify-content: center
;
3012 .md .subnavbar a.link:before {
3019 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
3020 background-repeat: no-repeat
;
3021 background-position: center
;
3022 background-size: 100% 100%;
3024 pointer-events: none
;
3025 transition-duration: 600ms;
3027 .md .subnavbar a.link.active-state:before {
3029 transition-duration: 150ms;
3031 .md .subnavbar a.icon-only {
3034 .md .subnavbar-inner > a.link:first-child {
3035 margin-left: calc
(-1 * var
(--f7-subnavbar-inner-padding-left
));
3037 .md .subnavbar-inner > a.link:last-child {
3038 margin-right: calc
(-1 * var
(--f7-subnavbar-inner-padding-right
));
3040 .aurora .subnavbar {
3041 height: calc
(var
(--f7-subnavbar-height
) + 1px);
3045 .aurora .subnavbar .title {
3046 align-self: flex-start
;
3049 .aurora
.subnavbar
.left a
+ a
,
3050 .aurora .subnavbar .right a + a {
3053 .aurora .subnavbar .left {
3056 .aurora .subnavbar .right {
3059 .aurora .subnavbar .right:first-child {
3062 .aurora .subnavbar a.link {
3063 justify-content: flex-start
;
3065 .aurora .subnavbar a.icon-only {
3066 justify-content: center
;
3069 /* === Content Block === */
3071 --f7-block-font-size: inherit
;
3072 --f7-block-strong-bg-color: #fff;
3073 --f7-block-title-font-size: inherit
;
3074 --f7-block-header-margin: 10px;
3075 --f7-block-footer-margin: 10px;
3076 --f7-block-header-font-size: 14px;
3077 --f7-block-footer-font-size: 14px;
3078 --f7-block-title-white-space: nowrap
;
3079 --f7-block-title-medium-text-color: #000;
3080 --f7-block-title-medium-text-transform: none
;
3081 --f7-block-title-large-text-color: #000;
3082 --f7-block-title-large-text-transform: none
;
3086 --f7-block-strong-border-color: #282829;
3087 --f7-block-title-medium-text-color: #fff;
3088 --f7-block-title-large-text-color: #fff;
3089 --f7-block-strong-bg-color: #1c1c1d;
3092 --f7-block-text-color: #6d6d72;
3093 --f7-block-padding-horizontal: 15px;
3094 --f7-block-padding-vertical: 15px;
3095 --f7-block-margin-vertical: 35px;
3096 --f7-block-strong-text-color: #000;
3097 --f7-block-strong-border-color: #c8c7cc;
3098 --f7-block-title-text-transform: uppercase
;
3099 --f7-block-title-text-color: #6d6d72;
3100 --f7-block-title-font-weight: 400;
3101 --f7-block-title-line-height: 17px;
3102 --f7-block-title-margin-bottom: 10px;
3103 --f7-block-title-medium-font-size: 22px;
3104 --f7-block-title-medium-font-weight: bold
;
3105 --f7-block-title-medium-line-height: 1.4;
3106 --f7-block-title-large-font-size: 29px;
3107 --f7-block-title-large-font-weight: bold
;
3108 --f7-block-title-large-line-height: 1.3;
3109 --f7-block-inset-side-margin: 15px;
3110 --f7-block-inset-border-radius: 7px;
3111 --f7-block-header-text-color: #8f8f94;
3112 --f7-block-footer-text-color: #8f8f94;
3116 --f7-block-title-text-color: #8E8E93;
3117 --f7-block-header-text-color: #8E8E93;
3118 --f7-block-footer-text-color: #8E8E93;
3119 --f7-block-strong-text-color: #fff;
3122 --f7-block-text-color: inherit
;
3123 --f7-block-padding-horizontal: 16px;
3124 --f7-block-padding-vertical: 16px;
3125 --f7-block-margin-vertical: 32px;
3126 --f7-block-strong-text-color: inherit
;
3127 --f7-block-strong-border-color: rgba
(0, 0, 0, 0.12);
3128 --f7-block-title-text-transform: none
;
3129 --f7-block-title-text-color: rgba
(0, 0, 0, 0.54);
3130 --f7-block-title-font-weight: 500;
3131 --f7-block-title-line-height: 16px;
3132 --f7-block-title-margin-bottom: 16px;
3133 --f7-block-title-medium-font-size: 24px;
3134 --f7-block-title-medium-font-weight: 500;
3135 --f7-block-title-medium-line-height: 1.3;
3136 --f7-block-title-large-font-size: 34px;
3137 --f7-block-title-large-font-weight: 500;
3138 --f7-block-title-large-line-height: 1.2;
3139 --f7-block-inset-side-margin: 16px;
3140 --f7-block-inset-border-radius: 4px;
3141 --f7-block-header-text-color: rgba
(0, 0, 0, 0.54);
3142 --f7-block-footer-text-color: rgba
(0, 0, 0, 0.54);
3146 --f7-block-title-text-color: #fff;
3147 --f7-block-header-text-color: rgba
(255, 255, 255, 0.54);
3148 --f7-block-footer-text-color: rgba
(255, 255, 255, 0.54);
3151 --f7-block-text-color: inherit
;
3152 --f7-block-padding-horizontal: 15px;
3153 --f7-block-padding-vertical: 15px;
3154 --f7-block-margin-vertical: 15px;
3155 --f7-block-strong-text-color: inherit
;
3156 --f7-block-strong-border-color: rgba
(0, 0, 0, 0.12);
3157 --f7-block-title-text-transform: none
;
3158 --f7-block-title-text-color: rgba
(0, 0, 0, 0.7);
3159 --f7-block-title-font-weight: 600;
3160 --f7-block-title-line-height: 1.5;
3161 --f7-block-title-margin-bottom: 5px;
3162 --f7-block-title-medium-font-size: 20px;
3163 --f7-block-title-medium-font-weight: 600;
3164 --f7-block-title-medium-line-height: 1.4;
3165 --f7-block-title-large-font-size: 28px;
3166 --f7-block-title-large-font-weight: bold
;
3167 --f7-block-title-large-line-height: 1.3;
3168 --f7-block-inset-side-margin: 15px;
3169 --f7-block-inset-border-radius: 4px;
3170 --f7-block-header-text-color: rgba
(0, 0, 0, 0.6);
3171 --f7-block-footer-text-color: rgba
(0, 0, 0, 0.6);
3173 .aurora
.theme-dark
,
3174 .aurora.theme-dark {
3175 --f7-block-title-text-color: #fff;
3176 --f7-block-header-text-color: rgba
(255, 255, 255, 0.52);
3177 --f7-block-footer-text-color: rgba
(255, 255, 255, 0.52);
3178 --f7-block-strong-text-color: #fff;
3181 box-sizing: border-box
;
3184 color: var
(--f7-block-text-color
);
3185 margin: var
(--f7-block-margin-vertical
) 0;
3188 padding-left: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-left
));
3189 padding-right: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-right
));
3190 font-size: var
(--f7-block-font-size
);
3192 .block
.no-hairlines:before
,
3193 .block
.no-hairlines
ul:before
,
3194 .md
.block
.no-hairlines-md:before
,
3195 .md
.block
.no-hairlines-md
ul:before
,
3196 .ios
.block
.no-hairlines-ios:before
,
3197 .ios
.block
.no-hairlines-ios
ul:before
,
3198 .aurora
.block
.no-hairlines-aurora:before
,
3199 .aurora .block.no-hairlines-aurora ul:before {
3200 display: none
!important
;
3202 .block
.no-hairlines:after
,
3203 .block
.no-hairlines
ul:after
,
3204 .md
.block
.no-hairlines-md:after
,
3205 .md
.block
.no-hairlines-md
ul:after
,
3206 .ios
.block
.no-hairlines-ios:after
,
3207 .ios
.block
.no-hairlines-ios
ul:after
,
3208 .aurora
.block
.no-hairlines-aurora:after
,
3209 .aurora .block.no-hairlines-aurora ul:after {
3210 display: none
!important
;
3212 .block
.no-hairline-top:before
,
3213 .block
.no-hairline-top
ul:before
,
3214 .md
.block
.no-hairline-top-md:before
,
3215 .md
.block
.no-hairline-top-md
ul:before
,
3216 .ios
.block
.no-hairline-top-ios:before
,
3217 .ios
.block
.no-hairline-top-ios
ul:before
,
3218 .aurora
.block
.no-hairline-top-aurora:before
,
3219 .aurora .block.no-hairline-top-aurora ul:before {
3220 display: none
!important
;
3222 .block
.no-hairline-bottom:after
,
3223 .block
.no-hairline-bottom
ul:after
,
3224 .md
.block
.no-hairline-bottom-md:after
,
3225 .md
.block
.no-hairline-bottom-md
ul:after
,
3226 .ios
.block
.no-hairline-bottom-ios:after
,
3227 .ios
.block
.no-hairline-bottom-ios
ul:after
,
3228 .aurora
.block
.no-hairline-bottom-aurora:after
,
3229 .aurora .block.no-hairline-bottom-aurora ul:after {
3230 display: none
!important
;
3232 .block
> h1:first-child
,
3233 .block
> h2:first-child
,
3234 .block
> h3:first-child
,
3235 .block
> h4:first-child
,
3236 .block > p:first-child {
3239 .block
> h1:last-child
,
3240 .block
> h2:last-child
,
3241 .block
> h3:last-child
,
3242 .block
> h4:last-child
,
3243 .block > p:last-child {
3247 color: var
(--f7-block-strong-text-color
);
3248 padding-top: var
(--f7-block-padding-vertical
);
3249 padding-bottom: var
(--f7-block-padding-vertical
);
3250 background-color: var
(--f7-block-strong-bg-color
);
3252 .block-strong:before {
3255 background-color: var
(--f7-block-strong-border-color
);
3264 transform-origin: 50% 0%;
3265 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3267 .block-strong:after {
3270 background-color: var
(--f7-block-strong-border-color
);
3279 transform-origin: 50% 100%;
3280 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3286 white-space: var
(--f7-block-title-white-space
);
3287 text-overflow: ellipsis
;
3288 text-transform: var
(--f7-block-title-text-transform
);
3289 color: var
(--f7-block-title-text-color
);
3290 font-size: var
(--f7-block-title-font-size
, inherit
);
3291 font-weight: var
(--f7-block-title-font-weight
);
3292 line-height: var
(--f7-block-title-line-height
);
3293 margin-top: var
(--f7-block-margin-vertical
);
3294 margin-bottom: var
(--f7-block-title-margin-bottom
);
3295 margin-left: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-left
));
3296 margin-right: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-right
));
3298 .block-title
+ .list
,
3299 .block-title
+ .block
,
3300 .block-title
+ .card
,
3301 .block-title
+ .timeline
,
3302 .block-title + .block-header {
3305 .block-title-medium {
3306 font-size: var
(--f7-block-title-medium-font-size
);
3307 text-transform: var
(--f7-block-title-medium-text-transform
);
3308 color: var
(--f7-block-title-medium-text-color
);
3309 font-weight: var
(--f7-block-title-medium-font-weight
);
3310 line-height: var
(--f7-block-title-medium-line-height
);
3312 .block-title-large {
3313 font-size: var
(--f7-block-title-large-font-size
);
3314 text-transform: var
(--f7-block-title-large-text-transform
);
3315 color: var
(--f7-block-title-large-text-color
);
3316 font-weight: var
(--f7-block-title-large-font-weight
);
3317 line-height: var
(--f7-block-title-large-line-height
);
3319 .block
> .block-title:first-child
,
3320 .list > .block-title:first-child {
3326 color: var
(--f7-block-header-text-color
);
3327 font-size: var
(--f7-block-header-font-size
);
3328 margin-bottom: var
(--f7-block-header-margin
);
3329 margin-top: var
(--f7-block-margin-vertical
);
3331 .block-header
+ .list
,
3332 .block-header
+ .block
,
3333 .block-header
+ .card
,
3334 .block-header + .timeline {
3335 margin-top: var
(--f7-block-header-margin
);
3338 color: var
(--f7-block-footer-text-color
);
3339 font-size: var
(--f7-block-footer-font-size
);
3340 margin-top: var
(--f7-block-footer-margin
);
3341 margin-bottom: var
(--f7-block-margin-vertical
);
3347 padding-left: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-left
));
3348 padding-right: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-right
));
3350 .block-footer
ul:first-child
,
3351 .block-header
ul:first-child
,
3352 .block-footer
p:first-child
,
3353 .block-header
p:first-child
,
3354 .block-footer
h1:first-child
,
3355 .block-header
h1:first-child
,
3356 .block-footer
h2:first-child
,
3357 .block-header
h2:first-child
,
3358 .block-footer
h3:first-child
,
3359 .block-header
h3:first-child
,
3360 .block-footer
h4:first-child
,
3361 .block-header h4:first-child {
3364 .block-footer
ul:last-child
,
3365 .block-header
ul:last-child
,
3366 .block-footer
p:last-child
,
3367 .block-header
p:last-child
,
3368 .block-footer
h1:last-child
,
3369 .block-header
h1:last-child
,
3370 .block-footer
h2:last-child
,
3371 .block-header
h2:last-child
,
3372 .block-footer
h3:last-child
,
3373 .block-header
h3:last-child
,
3374 .block-footer
h4:last-child
,
3375 .block-header h4:last-child {
3378 .block-footer
ul:first-child:last-child
,
3379 .block-header
ul:first-child:last-child
,
3380 .block-footer
p:first-child:last-child
,
3381 .block-header
p:first-child:last-child
,
3382 .block-footer
h1:first-child:last-child
,
3383 .block-header
h1:first-child:last-child
,
3384 .block-footer
h2:first-child:last-child
,
3385 .block-header
h2:first-child:last-child
,
3386 .block-footer
h3:first-child:last-child
,
3387 .block-header
h3:first-child:last-child
,
3388 .block-footer
h4:first-child:last-child
,
3389 .block-header h4:first-child:last-child {
3393 .list
.block-header
,
3394 .block
.block-header
,
3395 .card
.block-header
,
3396 .timeline .block-header {
3399 .list
.block-footer
,
3400 .block
.block-footer
,
3401 .card
.block-footer
,
3402 .timeline .block-footer {
3405 .list
+ .block-footer
,
3406 .block
+ .block-footer
,
3407 .card
+ .block-footer
,
3408 .timeline + .block-footer {
3409 margin-top: calc
(-1 * (var
(--f7-block-margin-vertical
) - var
(--f7-block-footer-margin
)));
3411 .block + .block-footer {
3412 margin-top: calc
(-1 * (var
(--f7-block-margin-vertical
) - var
(--f7-block-footer-margin
)));
3413 margin-bottom: var
(--f7-block-margin-vertical
);
3415 .block
.block-header
,
3416 .block .block-footer {
3420 border-radius: var
(--f7-block-inset-border-radius
);
3421 margin-left: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
3422 margin-right: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
3423 --f7-safe-area-left: 0px;
3424 --f7-safe-area-right: 0px;
3426 .block-strong.inset:before {
3427 display: none
!important
;
3429 .block-strong.inset:after {
3430 display: none
!important
;
3432 @media (min-width: 768px) {
3433 .block.tablet-inset {
3434 border-radius: var
(--f7-block-inset-border-radius
);
3435 margin-left: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
3436 margin-right: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
3437 --f7-safe-area-left: 0px;
3438 --f7-safe-area-right: 0px;
3440 .block-strong.tablet-inset:before {
3441 display: none
!important
;
3443 .block-strong.tablet-inset:after {
3444 display: none
!important
;
3447 /* === List View === */
3449 --f7-list-bg-color: #fff;
3450 --f7-list-item-text-max-lines: 2;
3451 --f7-list-chevron-icon-color: #c7c7cc;
3452 --f7-list-chevron-icon-font-size: 20px;
3453 --f7-list-item-title-font-size: inherit
;
3454 --f7-list-item-title-font-weight: 400;
3455 --f7-list-item-title-text-color: inherit
;
3456 --f7-list-item-title-line-height: inherit
;
3457 --f7-list-item-title-white-space: nowrap
;
3458 --f7-list-item-subtitle-font-weight: 400;
3459 --f7-list-item-subtitle-text-color: inherit
;
3460 --f7-list-item-subtitle-line-height: inherit
;
3461 --f7-list-item-text-font-weight: 400;
3462 --f7-list-item-after-font-weight: 400;
3463 --f7-list-item-header-text-color: inherit
;
3464 --f7-list-item-header-font-size: 12px;
3465 --f7-list-item-header-font-weight: 400;
3466 --f7-list-item-header-line-height: 1.2;
3467 --f7-list-item-footer-font-size: 12px;
3468 --f7-list-item-footer-font-weight: 400;
3469 --f7-list-item-footer-line-height: 1.2;
3470 --f7-list-button-font-size: inherit
;
3471 --f7-list-button-font-weight: 400;
3472 --f7-list-item-divider-line-height: inherit
;
3473 --f7-list-group-title-line-height: inherit
;
3477 --f7-list-bg-color: #1c1c1d;
3478 --f7-list-border-color: #282829;
3479 --f7-list-item-border-color: #282829;
3480 --f7-list-item-divider-border-color: #282829;
3481 --f7-list-item-divider-bg-color: #232323;
3482 --f7-list-group-title-bg-color: #232323;
3483 --f7-list-chevron-icon-color: #434345;
3486 --f7-list-in-list-padding-left: 30px;
3487 --f7-list-inset-side-margin: 15px;
3488 --f7-list-inset-border-radius: 7px;
3489 --f7-list-margin-vertical: 35px;
3490 --f7-list-font-size: 17px;
3491 --f7-list-chevron-icon-area: 20px;
3492 --f7-list-border-color: #c8c7cc;
3493 --f7-list-item-border-color: #c8c7cc;
3494 --f7-list-link-pressed-bg-color: #d9d9d9;
3495 --f7-list-item-subtitle-font-size: 15px;
3496 --f7-list-item-text-font-size: 15px;
3497 --f7-list-item-text-text-color: #8e8e93;
3498 --f7-list-item-text-line-height: 21px;
3499 --f7-list-item-after-font-size: inherit
;
3500 --f7-list-item-after-text-color: #8e8e93;
3501 --f7-list-item-after-line-height: inherit
;
3502 --f7-list-item-after-padding: 5px;
3503 --f7-list-item-footer-text-color: #8e8e93;
3504 --f7-list-item-min-height: 44px;
3505 --f7-list-item-media-margin: 15px;
3506 --f7-list-item-media-icons-margin: 5px;
3507 --f7-list-item-cell-margin: 15px;
3508 --f7-list-item-padding-vertical: 8px;
3509 --f7-list-item-padding-horizontal: 15px;
3510 --f7-list-media-item-padding-vertical: 10px;
3511 --f7-list-media-item-padding-horizontal: 15px;
3512 --f7-list-media-item-title-font-weight: 600;
3514 --f7-list-button-text-color: var(--f7-theme-color);
3516 --f7-list-button-text-align: center
;
3517 --f7-list-button-border-color: #c8c7cc;
3518 --f7-list-button-pressed-bg-color: #d9d9d9;
3519 --f7-list-item-divider-height: 31px;
3520 --f7-list-item-divider-text-color: #8e8e93;
3521 --f7-list-item-divider-font-size: inherit
;
3522 --f7-list-item-divider-font-weight: 400;
3523 --f7-list-item-divider-bg-color: #f7f7f7;
3524 --f7-list-item-divider-border-color: #c8c7cc;
3525 --f7-list-group-title-height: 31px;
3526 --f7-list-group-title-text-color: #8e8e93;
3527 --f7-list-group-title-font-size: inherit
;
3528 --f7-list-group-title-font-weight: 400;
3529 --f7-list-group-title-bg-color: #f7f7f7;
3533 --f7-list-button-border-color: #282829;
3534 --f7-list-link-pressed-bg-color: #363636;
3535 --f7-list-button-pressed-bg-color: #363636;
3538 --f7-list-in-list-padding-left: 40px;
3539 --f7-list-inset-side-margin: 16px;
3540 --f7-list-inset-border-radius: 4px;
3541 --f7-list-margin-vertical: 32px;
3542 --f7-list-font-size: 16px;
3543 --f7-list-chevron-icon-area: 26px;
3544 --f7-list-border-color: rgba
(0, 0, 0, 0.12);
3545 --f7-list-item-border-color: rgba
(0, 0, 0, 0.12);
3546 --f7-list-link-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3547 --f7-list-item-subtitle-font-size: 14px;
3548 --f7-list-item-text-font-size: 14px;
3549 --f7-list-item-text-text-color: #757575;
3550 --f7-list-item-text-line-height: 20px;
3551 --f7-list-item-after-font-size: 14px;
3552 --f7-list-item-after-text-color: #757575;
3553 --f7-list-item-after-line-height: inherit
;
3554 --f7-list-item-after-padding: 8px;
3555 --f7-list-item-footer-text-color: rgba
(0, 0, 0, 0.5);
3556 --f7-list-item-min-height: 48px;
3557 --f7-list-item-media-margin: 16px;
3558 --f7-list-item-media-icons-margin: 8px;
3559 --f7-list-item-cell-margin: 16px;
3560 --f7-list-item-padding-vertical: 8px;
3561 --f7-list-item-padding-horizontal: 16px;
3562 --f7-list-media-item-padding-vertical: 14px;
3563 --f7-list-media-item-padding-horizontal: 16px;
3565 --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
3567 --f7-list-button-text-color: #212121;
3568 --f7-list-button-text-align: left
;
3569 --f7-list-button-border-color: transparent
;
3570 --f7-list-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3571 --f7-list-item-divider-height: 48px;
3572 --f7-list-item-divider-text-color: rgba
(0, 0, 0, 0.54);
3573 --f7-list-item-divider-font-size: 14px;
3574 --f7-list-item-divider-font-weight: 400;
3575 --f7-list-item-divider-bg-color: #f4f4f4;
3576 --f7-list-item-divider-border-color: transparent
;
3577 --f7-list-group-title-height: 48px;
3578 --f7-list-group-title-text-color: rgba
(0, 0, 0, 0.54);
3579 --f7-list-group-title-font-size: 14px;
3580 --f7-list-group-title-font-weight: 400;
3581 --f7-list-group-title-bg-color: #f4f4f4;
3585 --f7-list-button-text-color: #fff;
3586 --f7-list-item-divider-text-color: #fff;
3587 --f7-list-group-title-text-color: #fff;
3588 --f7-list-link-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3589 --f7-list-button-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3590 --f7-list-item-text-text-color: rgba
(255, 255, 255, 0.54);
3591 --f7-list-item-after-text-color: rgba
(255, 255, 255, 0.54);
3592 --f7-list-item-footer-text-color: rgba
(255, 255, 255, 0.54);
3595 --f7-list-in-list-padding-left: 15px;
3596 --f7-list-inset-side-margin: 15px;
3597 --f7-list-inset-border-radius: 4px;
3598 --f7-list-margin-vertical: 15px;
3599 --f7-list-font-size: 14px;
3600 --f7-list-chevron-icon-area: 15px;
3601 --f7-list-chevron-icon-font-size: 16px;
3602 --f7-list-border-color: rgba
(0, 0, 0, 0.12);
3603 --f7-list-item-border-color: rgba
(0, 0, 0, 0.12);
3604 --f7-list-link-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3605 --f7-list-link-hover-bg-color: rgba
(0, 0, 0, 0.03);
3606 --f7-list-item-title-line-height: 1.3;
3607 --f7-list-item-subtitle-font-size: 14px;
3608 --f7-list-item-subtitle-line-height: 1.3;
3609 --f7-list-item-text-font-size: 12px;
3610 --f7-list-item-text-text-color: rgba
(0, 0, 0, 0.6);
3611 --f7-list-item-text-line-height: 16px;
3612 --f7-list-item-after-font-size: 13px;
3613 --f7-list-item-after-text-color: rgba
(0, 0, 0, 0.5);
3614 --f7-list-item-after-line-height: 1.2;
3615 --f7-list-item-after-padding: 5px;
3616 --f7-list-item-footer-text-color: rgba
(0, 0, 0, 0.6);
3617 --f7-list-item-min-height: 32px;
3618 --f7-list-item-media-margin: 10px;
3619 --f7-list-item-media-icons-margin: 5px;
3620 --f7-list-item-cell-margin: 15px;
3621 --f7-list-item-padding-vertical: 5px;
3622 --f7-list-item-padding-horizontal: 15px;
3623 --f7-list-media-item-padding-vertical: 5px;
3624 --f7-list-media-item-padding-horizontal: 15px;
3625 --f7-list-media-item-title-font-weight: 600;
3627 --f7-list-button-text-color: var(--f7-theme-color);
3629 --f7-list-button-text-align: center
;
3630 --f7-list-button-border-color: rgba
(0, 0, 0, 0.12);
3631 --f7-list-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3632 --f7-list-button-hover-bg-color: rgba
(0, 0, 0, 0.03);
3633 --f7-list-item-divider-height: 19px;
3634 --f7-list-item-divider-text-color: rgba
(0, 0, 0, 0.6);
3635 --f7-list-item-divider-font-size: inherit
;
3636 --f7-list-item-divider-font-weight: 500;
3637 --f7-list-item-divider-bg-color: #f7f7f7;
3638 --f7-list-item-divider-border-color: transparent
;
3639 --f7-list-group-title-height: 19px;
3640 --f7-list-group-title-text-color: rgba
(0, 0, 0, 0.6);
3641 --f7-list-group-title-font-size: inherit
;
3642 --f7-list-group-title-font-weight: 500;
3643 --f7-list-group-title-bg-color: #f7f7f7;
3645 .aurora
.theme-dark
,
3646 .aurora.theme-dark {
3647 --f7-list-button-border-color: #282829;
3648 --f7-list-item-text-text-color: rgba
(255, 255, 255, 0.52);
3649 --f7-list-item-after-text-color: rgba
(255, 255, 255, 0.52);
3650 --f7-list-item-footer-text-color: rgba
(255, 255, 255, 0.52);
3651 --f7-list-item-divider-text-color: rgba
(255, 255, 255, 0.6);
3652 --f7-list-group-title-text-color: rgba
(255, 255, 255, 0.6);
3653 --f7-list-link-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3654 --f7-list-link-hover-bg-color: rgba
(255, 255, 255, 0.03);
3655 --f7-list-button-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3656 --f7-list-button-hover-bg-color: rgba
(255, 255, 255, 0.03);
3661 font-size: var
(--f7-list-font-size
);
3662 margin: var
(--f7-list-margin-vertical
) 0;
3669 background: var
(--f7-list-bg-color
);
3674 background-color: var
(--f7-list-border-color
);
3683 transform-origin: 50% 0%;
3684 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3689 background-color: var
(--f7-list-border-color
);
3698 transform-origin: 50% 100%;
3699 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3702 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-list-in-list-padding-left
));
3704 .list ul ul:before {
3705 display: none
!important
;
3708 display: none
!important
;
3712 box-sizing: border-box
;
3718 align-items: center
;
3719 box-sizing: border-box
;
3720 padding-bottom: var
(--f7-list-item-padding-vertical
);
3721 padding-top: var
(--f7-list-item-padding-vertical
);
3723 .list .item-media + .item-inner {
3724 margin-left: var
(--f7-list-item-media-margin
);
3726 .list
.item-media i
+ i
,
3727 .list .item-media i + img {
3728 margin-left: var
(--f7-list-item-media-icons-margin
);
3731 padding-left: var
(--f7-list-item-after-padding
);
3738 justify-content: space-between
;
3739 box-sizing: border-box
;
3740 align-items: center
;
3741 align-self: stretch
;
3742 padding-top: var
(--f7-list-item-padding-vertical
);
3743 padding-bottom: var
(--f7-list-item-padding-vertical
);
3744 min-height: var
(--f7-list-item-min-height
);
3745 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3750 white-space: var
(--f7-list-item-title-white-space
);
3753 text-overflow: ellipsis
;
3755 font-size: var
(--f7-list-item-title-font-size
);
3756 font-weight: var
(--f7-list-item-title-font-weight
);
3757 color: var
(--f7-list-item-title-text-color
);
3758 line-height: var
(--f7-list-item-title-line-height
);
3761 white-space: nowrap
;
3764 font-size: var
(--f7-list-item-after-font-size
);
3765 font-weight: var
(--f7-list-item-after-font-weight
);
3766 color: var
(--f7-list-item-after-text-color
);
3767 line-height: var
(--f7-list-item-after-line-height
);
3771 .list .item-footer {
3772 white-space: normal
;
3774 .list .item-header {
3775 color: var
(--f7-list-item-header-text-color
);
3776 font-size: var
(--f7-list-item-header-font-size
);
3777 font-weight: var
(--f7-list-item-header-font-weight
);
3778 line-height: var
(--f7-list-item-header-line-height
);
3780 .list .item-footer {
3781 color: var
(--f7-list-item-footer-text-color
);
3782 font-size: var
(--f7-list-item-footer-font-size
);
3783 font-weight: var
(--f7-list-item-footer-font-weight
);
3784 line-height: var
(--f7-list-item-footer-line-height
);
3787 .list .list-button {
3788 transition-duration: 300ms;
3789 transition-property: background-color
;
3798 .list .item-link.active-state {
3799 background-color: var
(--f7-list-link-pressed-bg-color
);
3801 .list .item-link .item-inner {
3802 padding-right: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3804 .list .item-content {
3806 justify-content: space-between
;
3807 box-sizing: border-box
;
3808 align-items: center
;
3809 min-height: var
(--f7-list-item-min-height
);
3810 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
3812 .list .item-subtitle {
3815 white-space: nowrap
;
3817 text-overflow: ellipsis
;
3818 font-size: var
(--f7-list-item-subtitle-font-size
);
3819 font-weight: var
(--f7-list-item-subtitle-font-weight
);
3820 color: var
(--f7-list-item-subtitle-text-color
);
3821 line-height: var
(--f7-list-item-subtitle-line-height
);
3826 text-overflow: hidden
;
3827 -webkit-line-clamp: var
(--f7-list-item-text-max-lines
);
3828 display: -webkit-box
;
3829 font-size: var
(--f7-list-item-text-font-size
);
3830 font-weight: var
(--f7-list-item-text-font-weight
);
3831 color: var
(--f7-list-item-text-text-color
);
3832 line-height: var
(--f7-list-item-text-line-height
);
3833 max-height: calc
(var
(--f7-list-item-text-line-height
) * var
(--f7-list-item-text-max-lines
));
3835 .list .item-title-row {
3838 justify-content: space-between
;
3839 box-sizing: border-box
;
3841 .list .item-title-row .item-after {
3846 justify-content: space-between
;
3847 box-sizing: border-box
;
3852 box-sizing: border-box
;
3855 margin-left: var
(--f7-list-item-cell-margin
);
3858 .list .item-cell:first-child {
3861 .list .ripple-wave + .item-cell {
3864 .list li:last-child .list-button:after {
3865 display: none
!important
;
3867 .list
li:last-child
> .item-inner:after
,
3868 .list
li:last-child
li:last-child
> .item-inner:after
,
3869 .list
li:last-child
> .item-content
> .item-inner:after
,
3870 .list
li:last-child
li:last-child
> .item-content
> .item-inner:after
,
3871 .list
li:last-child
> .swipeout-content
> .item-content
> .item-inner:after
,
3872 .list
li:last-child
li:last-child
> .swipeout-content
> .item-content
> .item-inner:after
,
3873 .list
li:last-child
> .item-link
> .item-content
> .item-inner:after
,
3874 .list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
3875 display: none
!important
;
3877 .list li
li:last-child
.item-inner:after
,
3878 .list li:last-child li .item-inner:after {
3881 background-color: var
(--f7-list-item-border-color
);
3890 transform-origin: 50% 100%;
3891 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3893 .list
.no-hairlines:before
,
3894 .list
.no-hairlines
ul:before
,
3895 .md
.list
.no-hairlines-md:before
,
3896 .md
.list
.no-hairlines-md
ul:before
,
3897 .ios
.list
.no-hairlines-ios:before
,
3898 .ios
.list
.no-hairlines-ios
ul:before
,
3899 .aurora
.list
.no-hairlines-aurora:before
,
3900 .aurora .list.no-hairlines-aurora ul:before {
3901 display: none
!important
;
3903 .list
.no-hairlines:after
,
3904 .list
.no-hairlines
ul:after
,
3905 .md
.list
.no-hairlines-md:after
,
3906 .md
.list
.no-hairlines-md
ul:after
,
3907 .ios
.list
.no-hairlines-ios:after
,
3908 .ios
.list
.no-hairlines-ios
ul:after
,
3909 .aurora
.list
.no-hairlines-aurora:after
,
3910 .aurora .list.no-hairlines-aurora ul:after {
3911 display: none
!important
;
3913 .list
.no-hairline-top:before
,
3914 .list
.no-hairline-top
ul:before
,
3915 .md
.list
.no-hairline-top-md:before
,
3916 .md
.list
.no-hairline-top-md
ul:before
,
3917 .ios
.list
.no-hairline-top-ios:before
,
3918 .ios
.list
.no-hairline-top-ios
ul:before
,
3919 .aurora
.list
.no-hairline-top-aurora:before
,
3920 .aurora .list.no-hairline-top-aurora ul:before {
3921 display: none
!important
;
3923 .list
.no-hairline-bottom:after
,
3924 .list
.no-hairline-bottom
ul:after
,
3925 .md
.list
.no-hairline-bottom-md:after
,
3926 .md
.list
.no-hairline-bottom-md
ul:after
,
3927 .ios
.list
.no-hairline-bottom-ios:after
,
3928 .ios
.list
.no-hairline-bottom-ios
ul:after
,
3929 .aurora
.list
.no-hairline-bottom-aurora:after
,
3930 .aurora .list.no-hairline-bottom-aurora ul:after {
3931 display: none
!important
;
3933 .list
.no-hairlines-between
.item-inner:after
,
3934 .md
.list
.no-hairlines-between-md
.item-inner:after
,
3935 .ios
.list
.no-hairlines-between-ios
.item-inner:after
,
3936 .aurora
.list
.no-hairlines-between-aurora
.item-inner:after
,
3937 .list
.no-hairlines-between
.list-button:after
,
3938 .md
.list
.no-hairlines-between-md
.list-button:after
,
3939 .ios
.list
.no-hairlines-between-ios
.list-button:after
,
3940 .aurora
.list
.no-hairlines-between-aurora
.list-button:after
,
3941 .list
.no-hairlines-between
.item-divider:after
,
3942 .md
.list
.no-hairlines-between-md
.item-divider:after
,
3943 .ios
.list
.no-hairlines-between-ios
.item-divider:after
,
3944 .aurora
.list
.no-hairlines-between-aurora
.item-divider:after
,
3945 .list
.no-hairlines-between
.list-group-title:after
,
3946 .md
.list
.no-hairlines-between-md
.list-group-title:after
,
3947 .ios
.list
.no-hairlines-between-ios
.list-group-title:after
,
3948 .aurora
.list
.no-hairlines-between-aurora
.list-group-title:after
,
3949 .list
.no-hairlines-between
.list-group-title:after
,
3950 .md
.list
.no-hairlines-between-md
.list-group-title:after
,
3951 .ios
.list
.no-hairlines-between-ios
.list-group-title:after
,
3952 .aurora .list.no-hairlines-between-aurora .list-group-title:after {
3953 display: none
!important
;
3955 .list
.no-hairlines-between
.simple-list
li:after
,
3956 .md
.list
.no-hairlines-between-md
.simple-list
li:after
,
3957 .ios
.list
.no-hairlines-between-ios
.simple-list
li:after
,
3958 .aurora .list.no-hairlines-between-aurora.simple-list li:after {
3959 display: none
!important
;
3961 .list
.no-hairlines-between
.links-list
a:after
,
3962 .md
.list
.no-hairlines-between-md
.links-list
a:after
,
3963 .ios
.list
.no-hairlines-between-ios
.links-list
a:after
,
3964 .aurora .list.no-hairlines-between-aurora.links-list a:after {
3965 display: none
!important
;
3968 padding: 0 var
(--f7-list-item-padding-horizontal
);
3969 line-height: var
(--f7-list-item-min-height
);
3970 color: var
(--f7-list-button-text-color
, var
(--f7-theme-color
));
3971 font-size: var
(--f7-list-button-font-size
);
3972 font-weight: var
(--f7-list-button-font-weight
);
3973 text-align: var
(--f7-list-button-text-align
);
3975 .list-button:after {
3978 background-color: var
(--f7-list-button-border-color
);
3987 transform-origin: 50% 100%;
3988 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3990 .list-button.active-state {
3991 background-color: var
(--f7-list-button-pressed-bg-color
);
3993 .list-button[class*="color-"] {
3994 --f7-list-button-text-color: var
(--f7-theme-color
);
3998 white-space: nowrap
;
3999 text-overflow: ellipsis
;
4001 box-sizing: border-box
;
4003 justify-content: space-between
;
4004 align-items: center
;
4005 align-content: center
;
4006 line-height: var
(--f7-list-item-min-height
);
4007 height: var
(--f7-list-item-min-height
);
4008 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4009 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4011 .simple-list li:after {
4012 left: var
(--f7-list-item-padding-horizontal
);
4014 left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4017 .simple-list li:last-child:after {
4018 display: none
!important
;
4024 transition-duration: 300ms;
4025 transition-property: background-color
;
4030 align-items: center
;
4031 align-content: center
;
4032 justify-content: space-between
;
4033 box-sizing: border-box
;
4034 white-space: nowrap
;
4035 text-overflow: ellipsis
;
4037 height: var
(--f7-list-item-min-height
);
4040 .links-list a .ripple-wave {
4043 .links-list a:after {
4046 .links-list a.active-state {
4047 background-color: var
(--f7-list-link-pressed-bg-color
);
4050 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4051 padding-right: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4053 .links-list a:after {
4054 left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4057 .links-list li:last-child a:after {
4058 display: none
!important
;
4060 .simple-list
li:after
,
4061 .links-list
a:after
,
4062 .list .item-inner:after {
4065 background-color: var
(--f7-list-item-border-color
);
4074 transform-origin: 50% 100%;
4075 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
4079 --f7-list-item-padding-vertical: var
(--f7-list-media-item-padding-vertical
);
4080 --f7-list-item-padding-horizontal: var
(--f7-list-media-item-padding-horizontal
);
4082 .media-list
.item-title
,
4083 li
.media-item
.item-title
{
4084 font-weight: var
(--f7-list-media-item-title-font-weight
, var
(--f7-list-item-title-font-weight
, inherit
));
4086 .media-list
.item-inner
,
4087 li
.media-item
.item-inner
{
4089 align-self: stretch
;
4091 .media-list
.item-media
,
4092 li
.media-item
.item-media
{
4093 align-self: flex-start
;
4095 .media-list
.item-media img
,
4096 li
.media-item
.item-media img
{
4099 .media-list
.item-link
.item-inner
,
4100 li
.media-item
.item-link
.item-inner
{
4101 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4103 .media-list
.item-link
.item-title-row
,
4104 li
.media-item
.item-link
.item-title-row
{
4105 padding-right: calc
(var
(--f7-list-chevron-icon-area
));
4107 .media-list
.chevron-center
.item-link
.item-inner
,
4108 .media-list
.chevron-center
.item-link
.item-inner
,
4109 .media-list
.item-link
.chevron-center
.item-inner
,
4110 li
.media-item
.chevron-center
.item-link
.item-inner
,
4111 li
.media-item
.item-link
.chevron-center
.item-inner
,
4112 li
.media-item
.chevron-center
.item-link
.item-inner
{
4113 padding-right: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4115 .media-list
.chevron-center
.item-title-row
,
4116 .media-list
.chevron-center
.item-title-row
,
4117 li
.media-item
.chevron-center
.item-title-row
,
4118 li
.media-item
.chevron-center
.item-title-row
{
4121 .list
.item-link
.item-inner:before
,
4122 .links-list
a:before
,
4123 .media-list
.item-link
.item-title-row:before
,
4124 li
.media-item
.item-link
.item-title-row:before
,
4125 .media-list
.chevron-center
.item-link
.item-inner:before
,
4126 .media-list
.chevron-center
.item-link
.item-inner:before
,
4127 .media-list
.item-link
.chevron-center
.item-inner:before
,
4128 li
.media-item
.chevron-center
.item-link
.item-inner:before
,
4129 li
.media-item
.chevron-center
.item-link
.item-inner:before
,
4130 li
.media-item
.item-link
.chevron-center
.item-inner:before
{
4131 font-family: 'framework7-core-icons';
4132 font-weight: normal
;
4135 letter-spacing: normal
;
4136 text-transform: none
;
4137 white-space: nowrap
;
4140 -webkit-font-smoothing: antialiased
;
4141 text-rendering: optimizeLegibility
;
4142 -moz-osx-font-smoothing: grayscale
;
4143 -moz-font-feature-settings: "liga";
4144 font-feature-settings: "liga";
4155 font-size: var
(--f7-list-chevron-icon-font-size
);
4157 color: var
(--f7-list-chevron-icon-color
);
4158 pointer-events: none
;
4159 right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4160 content: 'chevron_right';
4162 .media-list
.chevron-center
.item-title-row:before
,
4163 .media-list
.chevron-center
.item-title-row:before
,
4164 li
.media-item
.chevron-center
.item-title-row:before
,
4165 li
.media-item
.chevron-center
.item-title-row:before
{
4168 .media-list
.item-link
.item-inner:before
,
4169 li
.media-item
.item-link
.item-inner:before
{
4172 .media-list
.item-link
.item-title-row:before
,
4173 li
.media-item
.item-link
.item-title-row:before
{
4176 .list-group
ul:after
,
4177 .list-group ul:before {
4178 z-index: 25 !important
;
4180 .list-group + .list-group ul:before {
4181 display: none
!important
;
4185 li
.list-group-title
{
4186 white-space: nowrap
;
4189 text-overflow: ellipsis
;
4194 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4195 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4196 box-sizing: border-box
;
4198 align-items: center
;
4199 align-content: center
;
4201 li
.item-divider:after
,
4202 .item-divider:after
,
4203 li
.list-group-title:after
{
4204 display: none
!important
;
4209 height: var
(--f7-list-item-divider-height
);
4210 color: var
(--f7-list-item-divider-text-color
);
4211 font-size: var
(--f7-list-item-divider-font-size
);
4212 font-weight: var
(--f7-list-item-divider-font-weight
);
4213 background-color: var
(--f7-list-item-divider-bg-color
);
4214 line-height: var
(--f7-list-item-divider-line-height
);
4216 li
.item-divider:before
,
4217 .item-divider:before {
4220 background-color: var
(--f7-list-item-divider-border-color
);
4229 transform-origin: 50% 0%;
4230 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
4232 li
.list-group-title
,
4233 .list li.list-group-title {
4235 position: -webkit-sticky
;
4240 height: var
(--f7-list-group-title-height
);
4241 color: var
(--f7-list-group-title-text-color
);
4242 font-size: var
(--f7-list-group-title-font-size
);
4243 font-weight: var
(--f7-list-group-title-font-weight
);
4244 background-color: var
(--f7-list-group-title-bg-color
);
4245 line-height: var
(--f7-list-group-title-line-height
);
4247 .page-with-navbar-large li
.list-group-title
,
4248 .page-with-navbar-large .list li.list-group-title {
4249 top: calc
(-1 * var
(--f7-navbar-large-title-height
));
4252 margin-left: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
4253 margin-right: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
4254 border-radius: var
(--f7-list-inset-border-radius
);
4255 --f7-safe-area-left: 0px;
4256 --f7-safe-area-right: 0px;
4258 .list.inset .block-title {
4263 border-radius: var
(--f7-list-inset-border-radius
);
4265 .list.inset ul:before {
4266 display: none
!important
;
4268 .list.inset ul:after {
4269 display: none
!important
;
4271 .list
.inset li
.swipeout:first-child
,
4272 .list.inset li:first-child > a {
4273 border-radius: var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
) 0 0;
4275 .list
.inset li
.swipeout:last-child
,
4276 .list.inset li:last-child > a {
4277 border-radius: 0 0 var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
);
4279 .list
.inset li
.swipeout:first-child:last-child
,
4280 .list.inset li:first-child:last-child > a {
4281 border-radius: var
(--f7-list-inset-border-radius
);
4283 @media (min-width: 768px) {
4284 .list.tablet-inset {
4285 margin-left: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
4286 margin-right: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
4287 border-radius: var
(--f7-list-inset-border-radius
);
4288 --f7-safe-area-left: 0px;
4289 --f7-safe-area-right: 0px;
4291 .list.tablet-inset .block-title {
4295 .list.tablet-inset ul {
4296 border-radius: var
(--f7-list-inset-border-radius
);
4298 .list.tablet-inset ul:before {
4299 display: none
!important
;
4301 .list.tablet-inset ul:after {
4302 display: none
!important
;
4304 .list.tablet-inset li:first-child > a {
4305 border-radius: var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
) 0 0;
4307 .list.tablet-inset li:last-child > a {
4308 border-radius: 0 0 var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
);
4310 .list.tablet-inset li:first-child:last-child > a {
4311 border-radius: var
(--f7-list-inset-border-radius
);
4316 --f7-list-chevron-icon-color: transparent
;
4317 --f7-list-chevron-icon-area: 0px;
4319 .ios
.item-link
.active-state
.item-inner:after
,
4320 .ios
.list-button
.active-state:after
,
4321 .ios .links-list a.active-state:after {
4322 background-color: transparent
;
4324 .ios
.links-list a
.active-state
,
4325 .ios
.list
.item-link
.active-state
,
4326 .ios .list .list-button.active-state {
4327 transition-duration: 0ms;
4329 .md .list .item-media {
4332 .aurora .list .item-media {
4335 .aurora
.list
.item-link
.item-inner:before
,
4336 .aurora
.links-list
a:before
,
4337 .aurora
.media-list
.item-link
.item-title-row:before
,
4338 .aurora li
.media-item
.item-link
.item-title-row:before
,
4339 .aurora
.media-list
.chevron-center
.item-link
.item-inner:before
,
4340 .aurora
.media-list
.chevron-center
.item-link
.item-inner:before
,
4341 .aurora
.media-list
.item-link
.chevron-center
.item-inner:before
,
4342 .aurora li
.media-item
.chevron-center
.item-link
.item-inner:before
,
4343 .aurora li
.media-item
.chevron-center
.item-link
.item-inner:before
,
4344 .aurora li.media-item .item-link.chevron-center .item-inner:before {
4345 content: 'chevron_right_aurora';
4347 .aurora
.links-list a
,
4348 .aurora
.list
.item-link
,
4349 .aurora .list .list-button {
4350 transition-duration: 0ms;
4352 .aurora
.device-desktop
.links-list
a:hover:not
(.active-state
):not
(.no-hover
),
4353 .aurora.device-desktop .list .item-link:hover:not(.active-state):not(.no-hover) {
4354 background: var
(--f7-list-link-hover-bg-color
);
4356 .aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
4357 background: var
(--f7-list-button-hover-bg-color
);
4361 --f7-badge-text-color: #fff;
4362 --f7-badge-bg-color: #8e8e93;
4363 --f7-badge-padding: 0 4px;
4364 --f7-badge-in-icon-size: 16px;
4365 --f7-badge-in-icon-font-size: 10px;
4366 --f7-badge-font-weight: normal
;
4367 --f7-badge-font-size: 12px;
4370 --f7-badge-size: 20px;
4373 --f7-badge-size: 18px;
4376 --f7-badge-size: 18px;
4377 --f7-badge-font-weight: 600;
4378 --f7-badge-in-icon-size: 15px;
4381 display: inline-flex
;
4382 align-items: center
;
4383 align-content: center
;
4384 justify-content: center
;
4385 color: var
(--f7-badge-text-color
);
4386 background: var
(--f7-badge-bg-color
);
4388 box-sizing: border-box
;
4390 vertical-align: middle
;
4391 font-weight: var
(--f7-badge-font-weight
);
4392 font-size: var
(--f7-badge-font-size
);
4393 border-radius: var
(--f7-badge-size
);
4394 padding: var
(--f7-badge-padding
);
4395 height: var
(--f7-badge-size
);
4396 min-width: var
(--f7-badge-size
);
4400 .framework7-icons
.badge
,
4401 .material-icons .badge {
4406 font-family: var
(--f7-font-family
);
4407 --f7-badge-font-size: var
(--f7-badge-in-icon-font-size
);
4408 --f7-badge-size: var
(--f7-badge-in-icon-size
);
4410 .badge[class*="color-"] {
4411 --f7-badge-bg-color: var
(--f7-theme-color
);
4414 --f7-button-font-size: 14px;
4415 --f7-button-min-width: 32px;
4416 --f7-button-bg-color: transparent
;
4417 --f7-button-border-width: 0px;
4419 --f7-button-text-color: var(--f7-theme-color);
4420 --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
4421 --f7-button-border-color: var(--f7-theme-color);
4422 --f7-button-fill-text-color: #fff;
4423 --f7-button-fill-bg-color: var(--f7-theme-color);
4424 --f7-button-outline-border-color: var(--f7-theme-color);
4426 --f7-button-raised-box-shadow: 0 1px 3px rgba
(0, 0, 0, 0.12), 0 1px 2px rgba
(0,0,0,0.24);
4427 --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba
(0, 0, 0, 0.16), 0 3px 6px rgba
(0,0,0,0.23);
4428 --f7-segmented-raised-divider-color: rgba
(0, 0, 0, 0.1);
4431 --f7-button-height: 29px;
4432 --f7-button-padding-horizontal: 10px;
4433 --f7-button-border-radius: 5px;
4434 --f7-button-font-weight: 400;
4435 --f7-button-letter-spacing: 0;
4436 --f7-button-text-transform: none
;
4438 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4439 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
4441 --f7-button-outline-border-width: 1px;
4442 --f7-button-large-height: 44px;
4443 --f7-button-large-font-size: 17px;
4444 --f7-button-large-font-weight: 400;
4445 --f7-button-small-height: 26px;
4446 --f7-button-small-font-size: 13px;
4447 --f7-button-small-font-weight: 600;
4448 --f7-button-small-text-transform: uppercase
;
4449 --f7-button-small-outline-border-width: 2px;
4452 --f7-button-height: 36px;
4453 --f7-button-padding-horizontal: 8px;
4454 --f7-button-border-radius: 4px;
4455 --f7-button-font-weight: 500;
4456 --f7-button-letter-spacing: 0.03em;
4457 --f7-button-text-transform: uppercase
;
4458 --f7-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
4460 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4462 --f7-button-outline-border-width: 2px;
4463 --f7-button-large-height: 48px;
4464 --f7-button-large-font-size: 14px;
4465 --f7-button-large-font-weight: 500;
4466 --f7-button-small-height: 28px;
4467 --f7-button-small-font-size: 12px;
4468 --f7-button-small-font-weight: 500;
4469 --f7-button-small-text-transform: uppercase
;
4470 --f7-button-small-outline-border-width: 2px;
4474 --f7-button-pressed-bg-color: rgba
(255, 255, 255, 0.1);
4478 --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
4479 --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
4481 --f7-button-font-size: 14px;
4482 --f7-button-height: 28px;
4483 --f7-button-min-width: 24px;
4484 --f7-button-padding-horizontal: 10px;
4485 --f7-button-border-radius: 4px;
4486 --f7-button-font-weight: 400;
4487 --f7-button-letter-spacing: 0.02;
4488 --f7-button-text-transform: none
;
4490 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4491 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4493 --f7-button-outline-border-width: 2px;
4494 --f7-button-large-height: 34px;
4495 --f7-button-large-font-size: 14px;
4496 --f7-button-large-font-weight: 600;
4497 --f7-button-small-height: 22px;
4498 --f7-button-small-font-size: 12px;
4499 --f7-button-small-font-weight: 600;
4500 --f7-button-small-text-transform: none
;
4501 --f7-button-small-outline-border-width: 1px;
4504 -webkit-appearance: none
;
4505 -moz-appearance: none
;
4510 text-decoration: none
;
4513 -webkit-appearance: none
;
4514 -moz-appearance: none
;
4518 white-space: nowrap
;
4519 text-overflow: ellipsis
;
4522 font-family: inherit
;
4525 box-sizing: border-box
;
4526 vertical-align: middle
;
4527 justify-content: center
;
4528 align-items: center
;
4529 border: var
(--f7-button-border-width
, 0px) solid var
(--f7-button-border-color
, var
(--f7-theme-color
));
4530 font-size: var
(--f7-button-font-size
);
4531 color: var
(--f7-button-text-color
, var
(--f7-theme-color
));
4532 height: var
(--f7-button-height
);
4533 line-height: calc
(var
(--f7-button-height
) - var
(--f7-button-border-width
, 0) * 2);
4534 padding: var
(--f7-button-padding-vertical
, 0px) var
(--f7-button-padding-horizontal
);
4535 border-radius: var
(--f7-button-border-radius
);
4536 min-width: var
(--f7-button-min-width
);
4537 font-weight: var
(--f7-button-font-weight
);
4538 letter-spacing: var
(--f7-button-letter-spacing
);
4539 text-transform: var
(--f7-button-text-transform
);
4540 background-color: var
(--f7-button-bg-color
);
4541 box-shadow: var
(--f7-button-box-shadow
);
4543 .button.active-state {
4544 background-color: var
(--f7-button-pressed-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.15));
4545 color: var
(--f7-button-pressed-text-color
, var
(--f7-button-text-color
, var
(--f7-theme-color
)));
4547 input
[type
="submit"].button
,
4548 input
[type
="button"].button
{
4552 .button
> span
+ span
,
4562 color: var
(--f7-button-text-color
, var
(--f7-theme-color
));
4565 .ios
.button-round-ios
,
4566 .md
.button-round-md
,
4567 .aurora .button-round-aurora {
4568 --f7-button-border-radius: var
(--f7-button-height
);
4571 .ios
.button-fill-ios
,
4572 .md
.button-fill-md
,
4573 .aurora
.button-fill-aurora
,
4575 .button.tab-link-active {
4576 --f7-button-bg-color: var
(--f7-button-fill-bg-color
, var
(--f7-theme-color
));
4577 --f7-button-text-color: var
(--f7-button-fill-text-color
, #fff);
4578 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
4581 .ios
.button-fill-ios
,
4582 .md
.button-fill-md
,
4583 .aurora .button-fill-aurora {
4584 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
);
4587 .button.tab-link-active {
4588 --f7-button-pressed-bg-color: var
(--f7-button-bg-color
);
4591 .ios
.button-outline-ios
,
4592 .md
.button-outline-md
,
4593 .aurora .button-outline-aurora {
4594 --f7-button-border-color: var
(--f7-button-outline-border-color
, var
(--f7-theme-color
));
4595 --f7-button-border-width: var
(--f7-button-outline-border-width
);
4598 .ios
.button-large-ios
,
4599 .md
.button-large-md
,
4600 .aurora .button-large-aurora {
4601 --f7-button-height: var
(--f7-button-large-height
);
4602 --f7-button-font-size: var
(--f7-button-large-font-size
);
4603 --f7-button-font-weight: var
(--f7-button-large-font-weight
);
4606 .ios
.button-small-ios
,
4607 .md
.button-small-md
,
4608 .aurora .button-small-aurora {
4609 --f7-button-outline-border-width: var
(--f7-button-small-outline-border-width
);
4610 --f7-button-height: var
(--f7-button-small-height
);
4611 --f7-button-font-size: var
(--f7-button-small-font-size
);
4612 --f7-button-font-weight: var
(--f7-button-small-font-weight
);
4613 --f7-button-text-transform: var
(--f7-button-small-text-transform
);
4615 .ios
.button-small
.button-fill
,
4616 .ios
.button-small-ios
.button-fill
,
4617 .ios .button-small.button-fill-ios {
4618 --f7-button-border-width: var
(--f7-button-small-outline-border-width
);
4619 --f7-button-pressed-text-color: var
(--f7-theme-color
);
4620 --f7-button-pressed-bg-color: transparent
;
4626 border-radius: var
(--f7-button-border-radius
);
4627 box-shadow: var
(--f7-button-box-shadow
);
4636 .segmented .button:first-child {
4637 border-radius: var
(--f7-button-border-radius
) 0 0 var
(--f7-button-border-radius
);
4639 .segmented .button:not(.button-outline):first-child {
4642 .segmented .button.button-outline:nth-child(n + 2) {
4645 .segmented .button:last-child {
4646 border-radius: 0 var
(--f7-button-border-radius
) var
(--f7-button-border-radius
) 0;
4648 .segmented .button-round:first-child {
4649 border-radius: var
(--f7-button-height
) 0 0 var
(--f7-button-height
);
4651 .segmented .button-round:last-child {
4652 border-radius: 0 var
(--f7-button-height
) var
(--f7-button-height
) 0;
4654 .segmented .button:first-child:last-child {
4655 border-radius: var
(--f7-button-border-radius
);
4658 .ios
.segmented-round-ios
,
4659 .md
.segmented-round-md
,
4660 .aurora .segmented-round-aurora {
4661 border-radius: var
(--f7-button-height
);
4664 .ios
.segmented-raised-ios
,
4665 .md
.segmented-raised-md
,
4666 .aurora .segmented-raised-aurora {
4667 box-shadow: var
(--f7-button-raised-box-shadow
);
4669 .segmented-raised
.button:not
(.button-outline
),
4670 .ios
.segmented-raised-ios
.button:not
(.button-outline
),
4671 .md
.segmented-raised-md
.button:not
(.button-outline
),
4672 .aurora .segmented-raised-aurora .button:not(.button-outline) {
4673 border-left: 1px solid var
(--f7-segmented-raised-divider-color
);
4676 .ios
.button-raised-ios
,
4677 .md
.button-raised-md
,
4678 .aurora .button-raised-aurora {
4679 --f7-button-box-shadow: var
(--f7-button-raised-box-shadow
);
4681 .button-raised
.active-state
,
4682 .ios
.button-raised-ios
.active-state
,
4683 .md
.button-raised-md
.active-state
,
4684 .aurora .button-raised-aurora.active-state {
4685 --f7-button-box-shadow: var
(--f7-button-raised-pressed-box-shadow
);
4687 .subnavbar .segmented {
4691 transition-duration: 100ms;
4694 .ios .button-fill-ios {
4695 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
, var
(--f7-theme-color-tint
));
4698 .ios .button-small-ios {
4699 transition-duration: 200ms;
4702 transition-duration: 300ms;
4703 transform: translate3d
(0, 0, 0);
4706 .md .button-fill-md {
4707 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
, var
(--f7-theme-color-shade
));
4710 transition-duration: 100ms;
4711 transform: translate3d
(0, 0, 0);
4713 .aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
4714 background-color: var
(--f7-button-hover-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.07));
4716 .aurora
.button-fill
,
4717 .aurora .button-fill-aurora {
4718 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
, var
(--f7-theme-color-shade
));
4720 .aurora
.button-fill
,
4721 .aurora
.button-active
,
4722 .aurora
.button
.tab-link-active
,
4723 .aurora .button-fill-aurora {
4724 --f7-button-hover-bg-color: var
(--f7-button-fill-hover-bg-color
, var
(--f7-theme-color-tint
));
4726 /* === Touch Ripple === */
4728 --f7-touch-ripple-black: rgba
(0, 0, 0, 0.1);
4729 --f7-touch-ripple-white: rgba
(255, 255, 255, 0.3);
4730 --f7-touch-ripple-color: var
(--f7-touch-ripple-black
);
4733 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
4746 .speed-dial-buttons a {
4747 -webkit-user-select: none
;
4748 -moz-user-select: none
;
4749 -ms-user-select: none
;
4755 position: absolute
!important
;
4757 pointer-events: none
;
4762 transform: translate3d
(0px, 0px, 0) scale
(0);
4763 transition-duration: 1400ms;
4764 background-color: var
(--f7-touch-ripple-color
);
4765 will-change: transform
, opacity
;
4767 .ripple-wave.ripple-wave-fill {
4768 transition-duration: 300ms;
4771 .ripple-wave.ripple-wave-out {
4772 transition-duration: 600ms;
4775 .button-fill
.ripple-wave
,
4776 .picker-calendar-day
.ripple-wave
,
4777 .menu .ripple-wave {
4780 .checkbox
.ripple-wave
,
4781 .radio
.ripple-wave
,
4782 .data-table .sortable-cell .ripple-wave {
4785 [class
*="ripple-color-"] {
4786 --f7-touch-ripple-color: var
(--f7-theme-color-ripple-color
);
4790 display: inline-block
;
4791 vertical-align: middle
;
4792 background-size: 100% auto
;
4793 background-position: center
;
4794 background-repeat: no-repeat
;
4800 .icon-forward:after
,
4802 font-family: 'framework7-core-icons';
4803 font-weight: normal
;
4806 letter-spacing: normal
;
4807 text-transform: none
;
4808 white-space: nowrap
;
4811 -webkit-font-smoothing: antialiased
;
4812 text-rendering: optimizeLegibility
;
4813 -moz-osx-font-smoothing: grayscale
;
4814 -moz-font-feature-settings: "liga";
4815 font-feature-settings: "liga";
4822 .icon[class*="color-"] {
4823 color: var
(--f7-theme-color
);
4833 .ios
.icon-back:after
,
4834 .ios
.icon-prev:after
,
4835 .ios
.icon-forward:after
,
4836 .ios .icon-next:after {
4837 line-height: inherit
;
4839 .ios
.icon-prev:after
,
4840 .ios .icon-next:after {
4843 .ios .item-media .icon {
4846 .ios .item-media .f7-icons {
4851 .ios
.icon-back:after
,
4852 .ios .icon-prev:after {
4853 content: 'chevron_left_ios';
4855 .ios
.icon-forward:after
,
4856 .ios .icon-next:after {
4857 content: 'chevron_right_ios';
4866 .md
.icon-back:after
,
4867 .md
.icon-forward:after
,
4868 .md
.icon-next:after
,
4869 .md .icon-prev:after {
4872 .md .item-media .icon {
4875 .md .item-media .material-icons {
4880 .md .icon-back:after {
4881 content: 'arrow_left_md';
4883 .md .icon-forward:after {
4884 content: 'arrow_right_md';
4886 .md .icon-next:after {
4887 content: 'chevron_right_md';
4889 .md .icon-prev:after {
4890 content: 'chevron_left_md';
4893 .aurora .material-icons {
4898 .aurora
.icon-forward
,
4899 .aurora .icon-next {
4904 .aurora
.icon-back:after
,
4905 .aurora
.icon-prev:after
,
4906 .aurora
.icon-forward:after
,
4907 .aurora .icon-next:after {
4908 line-height: inherit
;
4910 .aurora .item-media .icon {
4913 .aurora .item-media .f7-icons {
4918 .aurora
.icon-back:after
,
4919 .aurora .icon-prev:after {
4920 content: 'chevron_left_aurora';
4922 .aurora
.icon-forward:after
,
4923 .aurora .icon-next:after {
4924 content: 'chevron_right_aurora';
4926 .custom-modal-backdrop {
4929 .custom-modal-backdrop
,
4934 .preloader-backdrop
,
4941 background: rgba
(0, 0, 0, 0.4);
4945 transition-duration: 400ms;
4947 .custom-modal-backdrop
.not-animated
,
4948 .actions-backdrop
.not-animated
,
4949 .dialog-backdrop
.not-animated
,
4950 .popover-backdrop
.not-animated
,
4951 .popup-backdrop
.not-animated
,
4952 .preloader-backdrop
.not-animated
,
4953 .sheet-backdrop.not-animated {
4954 transition-duration: 0ms;
4956 .custom-modal-backdrop
.backdrop-in
,
4957 .actions-backdrop
.backdrop-in
,
4958 .dialog-backdrop
.backdrop-in
,
4959 .popover-backdrop
.backdrop-in
,
4960 .popup-backdrop
.backdrop-in
,
4961 .preloader-backdrop
.backdrop-in
,
4962 .sheet-backdrop.backdrop-in {
4963 visibility: visible
;