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: February 14, 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 ==================== */
83 --f7-font-family: -apple-system
, SF Pro Text
, SF UI Text
, system-ui
, Helvetica Neue
, Helvetica
, Arial
, sans-serif
;
84 --f7-text-color: #000;
86 --f7-line-height: 1.4;
90 --f7-text-color: #fff;
93 --f7-font-family: Roboto
, system-ui
, Noto
, Helvetica
, Arial
, sans-serif
;
94 --f7-text-color: #212121;
96 --f7-line-height: 1.5;
100 --f7-text-color: rgba
(255, 255, 255, 0.87);
102 /*====================
104 ==================== */
107 --f7-bars-link-color: var(--f7-theme-color);
109 --f7-bars-bg-image: none
;
110 --f7-bars-bg-color: #f7f7f8;
111 --f7-bars-bg-color-rgb: 247, 247, 248;
112 --f7-bars-text-color: #000;
113 --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%);
114 --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%);
117 --f7-bars-bg-color: #1b1b1b;
118 --f7-bars-text-color: #fff;
121 --f7-bars-border-color: #c4c4c4;
125 --f7-bars-border-color: #282829;
128 --f7-bars-border-color: transparent
;
130 /*====================
132 ==================== */
133 .text-color-primary {
134 --f7-theme-color-text-color: var
(--f7-theme-color
);
137 --f7-theme-color-bg-color: var
(--f7-theme-color
);
139 .border-color-primary {
140 --f7-theme-color-border-color: var
(--f7-theme-color
);
142 .ripple-color-primary {
143 --f7-theme-color-ripple-color: rgba
(var
(--f7-theme-color-rgb
), 0.3);
146 --f7-color-red: #ff3b30;
147 --f7-color-red-rgb: 255, 59, 48;
148 --f7-color-red-shade: #ff1407;
149 --f7-color-red-tint: #ff6259;
150 --f7-color-green: #4cd964;
151 --f7-color-green-rgb: 76, 217, 100;
152 --f7-color-green-shade: #2cd048;
153 --f7-color-green-tint: #6ee081;
154 --f7-color-blue: #2196f3;
155 --f7-color-blue-rgb: 33, 150, 243;
156 --f7-color-blue-shade: #0c82df;
157 --f7-color-blue-tint: #48a8f5;
158 --f7-color-pink: #ff2d55;
159 --f7-color-pink-rgb: 255, 45, 85;
160 --f7-color-pink-shade: #ff0434;
161 --f7-color-pink-tint: #ff5676;
162 --f7-color-yellow: #ffcc00;
163 --f7-color-yellow-rgb: 255, 204, 0;
164 --f7-color-yellow-shade: #d6ab00;
165 --f7-color-yellow-tint: #ffd429;
166 --f7-color-orange: #ff9500;
167 --f7-color-orange-rgb: 255, 149, 0;
168 --f7-color-orange-shade: #d67d00;
169 --f7-color-orange-tint: #ffa629;
170 --f7-color-purple: #9c27b0;
171 --f7-color-purple-rgb: 156, 39, 176;
172 --f7-color-purple-shade: #7e208f;
173 --f7-color-purple-tint: #b92fd1;
174 --f7-color-deeppurple: #673ab7;
175 --f7-color-deeppurple-rgb: 103, 58, 183;
176 --f7-color-deeppurple-shade: #563098;
177 --f7-color-deeppurple-tint: #7c52c8;
178 --f7-color-lightblue: #5ac8fa;
179 --f7-color-lightblue-rgb: 90, 200, 250;
180 --f7-color-lightblue-shade: #32bbf9;
181 --f7-color-lightblue-tint: #82d5fb;
182 --f7-color-teal: #009688;
183 --f7-color-teal-rgb: 0, 150, 136;
184 --f7-color-teal-shade: #006d63;
185 --f7-color-teal-tint: #00bfad;
186 --f7-color-lime: #cddc39;
187 --f7-color-lime-rgb: 205, 220, 57;
188 --f7-color-lime-shade: #bac923;
189 --f7-color-lime-tint: #d6e25c;
190 --f7-color-deeporange: #ff6b22;
191 --f7-color-deeporange-rgb: 255, 107, 34;
192 --f7-color-deeporange-shade: #f85200;
193 --f7-color-deeporange-tint: #ff864b;
194 --f7-color-gray: #8e8e93;
195 --f7-color-gray-rgb: 142, 142, 147;
196 --f7-color-gray-shade: #79797f;
197 --f7-color-gray-tint: #a3a3a7;
198 --f7-color-white: #ffffff;
199 --f7-color-white-rgb: 255, 255, 255;
200 --f7-color-white-shade: #ebebeb;
201 --f7-color-white-tint: #ffffff;
202 --f7-color-black: #000000;
203 --f7-color-black-rgb: 0, 0, 0;
204 --f7-color-black-shade: #000000;
205 --f7-color-black-tint: #141414;
208 --f7-theme-color: #ff3b30;
209 --f7-theme-color-rgb: 255, 59, 48;
210 --f7-theme-color-shade: #ff1407;
211 --f7-theme-color-tint: #ff6259;
214 --f7-theme-color: #4cd964;
215 --f7-theme-color-rgb: 76, 217, 100;
216 --f7-theme-color-shade: #2cd048;
217 --f7-theme-color-tint: #6ee081;
220 --f7-theme-color: #2196f3;
221 --f7-theme-color-rgb: 33, 150, 243;
222 --f7-theme-color-shade: #0c82df;
223 --f7-theme-color-tint: #48a8f5;
226 --f7-theme-color: #ff2d55;
227 --f7-theme-color-rgb: 255, 45, 85;
228 --f7-theme-color-shade: #ff0434;
229 --f7-theme-color-tint: #ff5676;
231 .color-theme-yellow {
232 --f7-theme-color: #ffcc00;
233 --f7-theme-color-rgb: 255, 204, 0;
234 --f7-theme-color-shade: #d6ab00;
235 --f7-theme-color-tint: #ffd429;
237 .color-theme-orange {
238 --f7-theme-color: #ff9500;
239 --f7-theme-color-rgb: 255, 149, 0;
240 --f7-theme-color-shade: #d67d00;
241 --f7-theme-color-tint: #ffa629;
243 .color-theme-purple {
244 --f7-theme-color: #9c27b0;
245 --f7-theme-color-rgb: 156, 39, 176;
246 --f7-theme-color-shade: #7e208f;
247 --f7-theme-color-tint: #b92fd1;
249 .color-theme-deeppurple {
250 --f7-theme-color: #673ab7;
251 --f7-theme-color-rgb: 103, 58, 183;
252 --f7-theme-color-shade: #563098;
253 --f7-theme-color-tint: #7c52c8;
255 .color-theme-lightblue {
256 --f7-theme-color: #5ac8fa;
257 --f7-theme-color-rgb: 90, 200, 250;
258 --f7-theme-color-shade: #32bbf9;
259 --f7-theme-color-tint: #82d5fb;
262 --f7-theme-color: #009688;
263 --f7-theme-color-rgb: 0, 150, 136;
264 --f7-theme-color-shade: #006d63;
265 --f7-theme-color-tint: #00bfad;
268 --f7-theme-color: #cddc39;
269 --f7-theme-color-rgb: 205, 220, 57;
270 --f7-theme-color-shade: #bac923;
271 --f7-theme-color-tint: #d6e25c;
273 .color-theme-deeporange {
274 --f7-theme-color: #ff6b22;
275 --f7-theme-color-rgb: 255, 107, 34;
276 --f7-theme-color-shade: #f85200;
277 --f7-theme-color-tint: #ff864b;
280 --f7-theme-color: #8e8e93;
281 --f7-theme-color-rgb: 142, 142, 147;
282 --f7-theme-color-shade: #79797f;
283 --f7-theme-color-tint: #a3a3a7;
286 --f7-theme-color: #ffffff;
287 --f7-theme-color-rgb: 255, 255, 255;
288 --f7-theme-color-shade: #ebebeb;
289 --f7-theme-color-tint: #ffffff;
292 --f7-theme-color: #000000;
293 --f7-theme-color-rgb: 0, 0, 0;
294 --f7-theme-color-shade: #000000;
295 --f7-theme-color-tint: #141414;
298 --f7-theme-color: #ff3b30;
299 --f7-theme-color-rgb: 255, 59, 48;
300 --f7-theme-color-shade: #ff1407;
301 --f7-theme-color-tint: #ff6259;
304 --f7-theme-color-text-color: #ff3b30;
307 --f7-theme-color-bg-color: #ff3b30;
310 --f7-theme-color-border-color: #ff3b30;
314 --f7-theme-color-ripple-color: rgba
(255, 59, 48, 0.3);
317 --f7-theme-color: #4cd964;
318 --f7-theme-color-rgb: 76, 217, 100;
319 --f7-theme-color-shade: #2cd048;
320 --f7-theme-color-tint: #6ee081;
323 --f7-theme-color-text-color: #4cd964;
326 --f7-theme-color-bg-color: #4cd964;
328 .border-color-green {
329 --f7-theme-color-border-color: #4cd964;
333 --f7-theme-color-ripple-color: rgba
(76, 217, 100, 0.3);
336 --f7-theme-color: #2196f3;
337 --f7-theme-color-rgb: 33, 150, 243;
338 --f7-theme-color-shade: #0c82df;
339 --f7-theme-color-tint: #48a8f5;
342 --f7-theme-color-text-color: #2196f3;
345 --f7-theme-color-bg-color: #2196f3;
348 --f7-theme-color-border-color: #2196f3;
352 --f7-theme-color-ripple-color: rgba
(33, 150, 243, 0.3);
355 --f7-theme-color: #ff2d55;
356 --f7-theme-color-rgb: 255, 45, 85;
357 --f7-theme-color-shade: #ff0434;
358 --f7-theme-color-tint: #ff5676;
361 --f7-theme-color-text-color: #ff2d55;
364 --f7-theme-color-bg-color: #ff2d55;
367 --f7-theme-color-border-color: #ff2d55;
371 --f7-theme-color-ripple-color: rgba
(255, 45, 85, 0.3);
374 --f7-theme-color: #ffcc00;
375 --f7-theme-color-rgb: 255, 204, 0;
376 --f7-theme-color-shade: #d6ab00;
377 --f7-theme-color-tint: #ffd429;
380 --f7-theme-color-text-color: #ffcc00;
383 --f7-theme-color-bg-color: #ffcc00;
385 .border-color-yellow {
386 --f7-theme-color-border-color: #ffcc00;
388 .ripple-color-yellow
,
390 --f7-theme-color-ripple-color: rgba
(255, 204, 0, 0.3);
393 --f7-theme-color: #ff9500;
394 --f7-theme-color-rgb: 255, 149, 0;
395 --f7-theme-color-shade: #d67d00;
396 --f7-theme-color-tint: #ffa629;
399 --f7-theme-color-text-color: #ff9500;
402 --f7-theme-color-bg-color: #ff9500;
404 .border-color-orange {
405 --f7-theme-color-border-color: #ff9500;
407 .ripple-color-orange
,
409 --f7-theme-color-ripple-color: rgba
(255, 149, 0, 0.3);
412 --f7-theme-color: #9c27b0;
413 --f7-theme-color-rgb: 156, 39, 176;
414 --f7-theme-color-shade: #7e208f;
415 --f7-theme-color-tint: #b92fd1;
418 --f7-theme-color-text-color: #9c27b0;
421 --f7-theme-color-bg-color: #9c27b0;
423 .border-color-purple {
424 --f7-theme-color-border-color: #9c27b0;
426 .ripple-color-purple
,
428 --f7-theme-color-ripple-color: rgba
(156, 39, 176, 0.3);
431 --f7-theme-color: #673ab7;
432 --f7-theme-color-rgb: 103, 58, 183;
433 --f7-theme-color-shade: #563098;
434 --f7-theme-color-tint: #7c52c8;
436 .text-color-deeppurple {
437 --f7-theme-color-text-color: #673ab7;
439 .bg-color-deeppurple {
440 --f7-theme-color-bg-color: #673ab7;
442 .border-color-deeppurple {
443 --f7-theme-color-border-color: #673ab7;
445 .ripple-color-deeppurple
,
447 --f7-theme-color-ripple-color: rgba
(103, 58, 183, 0.3);
450 --f7-theme-color: #5ac8fa;
451 --f7-theme-color-rgb: 90, 200, 250;
452 --f7-theme-color-shade: #32bbf9;
453 --f7-theme-color-tint: #82d5fb;
455 .text-color-lightblue {
456 --f7-theme-color-text-color: #5ac8fa;
458 .bg-color-lightblue {
459 --f7-theme-color-bg-color: #5ac8fa;
461 .border-color-lightblue {
462 --f7-theme-color-border-color: #5ac8fa;
464 .ripple-color-lightblue
,
466 --f7-theme-color-ripple-color: rgba
(90, 200, 250, 0.3);
469 --f7-theme-color: #009688;
470 --f7-theme-color-rgb: 0, 150, 136;
471 --f7-theme-color-shade: #006d63;
472 --f7-theme-color-tint: #00bfad;
475 --f7-theme-color-text-color: #009688;
478 --f7-theme-color-bg-color: #009688;
481 --f7-theme-color-border-color: #009688;
485 --f7-theme-color-ripple-color: rgba
(0, 150, 136, 0.3);
488 --f7-theme-color: #cddc39;
489 --f7-theme-color-rgb: 205, 220, 57;
490 --f7-theme-color-shade: #bac923;
491 --f7-theme-color-tint: #d6e25c;
494 --f7-theme-color-text-color: #cddc39;
497 --f7-theme-color-bg-color: #cddc39;
500 --f7-theme-color-border-color: #cddc39;
504 --f7-theme-color-ripple-color: rgba
(205, 220, 57, 0.3);
507 --f7-theme-color: #ff6b22;
508 --f7-theme-color-rgb: 255, 107, 34;
509 --f7-theme-color-shade: #f85200;
510 --f7-theme-color-tint: #ff864b;
512 .text-color-deeporange {
513 --f7-theme-color-text-color: #ff6b22;
515 .bg-color-deeporange {
516 --f7-theme-color-bg-color: #ff6b22;
518 .border-color-deeporange {
519 --f7-theme-color-border-color: #ff6b22;
521 .ripple-color-deeporange
,
523 --f7-theme-color-ripple-color: rgba
(255, 107, 34, 0.3);
526 --f7-theme-color: #8e8e93;
527 --f7-theme-color-rgb: 142, 142, 147;
528 --f7-theme-color-shade: #79797f;
529 --f7-theme-color-tint: #a3a3a7;
532 --f7-theme-color-text-color: #8e8e93;
535 --f7-theme-color-bg-color: #8e8e93;
538 --f7-theme-color-border-color: #8e8e93;
542 --f7-theme-color-ripple-color: rgba
(142, 142, 147, 0.3);
545 --f7-theme-color: #ffffff;
546 --f7-theme-color-rgb: 255, 255, 255;
547 --f7-theme-color-shade: #ebebeb;
548 --f7-theme-color-tint: #ffffff;
551 --f7-theme-color-text-color: #ffffff;
554 --f7-theme-color-bg-color: #ffffff;
556 .border-color-white {
557 --f7-theme-color-border-color: #ffffff;
561 --f7-theme-color-ripple-color: rgba
(255, 255, 255, 0.3);
564 --f7-theme-color: #000000;
565 --f7-theme-color-rgb: 0, 0, 0;
566 --f7-theme-color-shade: #000000;
567 --f7-theme-color-tint: #141414;
570 --f7-theme-color-text-color: #000000;
573 --f7-theme-color-bg-color: #000000;
575 .border-color-black {
576 --f7-theme-color-border-color: #000000;
580 --f7-theme-color-ripple-color: rgba
(0, 0, 0, 0.3);
583 font-family: 'framework7-core-icons';
584 src: url
("data:application/font-woff;charset=utf-8;base64, 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") format
("woff");
589 font-family: 'framework7-skeleton';
590 src: url
("data:application/font-woff;charset=utf-8;base64, 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") format
("woff");
591 font-weight: 300, 400, 500, 600, 700;
592 font-style: normal
, italic
;
608 -webkit-text-size-adjust: 100%;
609 -webkit-font-smoothing: antialiased
;
610 font-family: var
(--f7-font-family
);
611 font-size: var
(--f7-font-size
);
612 line-height: var
(--f7-line-height
);
613 color: var
(--f7-text-color
);
616 color: var
(--f7-text-color
);
620 box-sizing: border-box
;
622 .framework7-initializing
*,
623 .framework7-initializing
*:before
,
624 .framework7-initializing *:after {
625 transition-duration: 0ms !important
;
632 touch-action: manipulation
;
634 @media (width: 1024px) and
(height: 691px) and
(orientation: landscape
) {
641 @media (width: 1024px) and
(height: 692px) and
(orientation: landscape
) {
649 -webkit-tap-highlight-color: rgba
(0, 0, 0, 0);
650 -webkit-touch-callout: none
;
660 text-decoration: none
;
661 color: var
(--f7-theme-color
);
667 opacity: 0.55 !important
;
668 pointer-events: none
!important
;
670 html
.device-full-viewport
,
671 html
.device-full-viewport body
{
676 display: none
!important
;
678 @media (width: 1024px) and
(height: 691px) and
(orientation: landscape
) {
681 .ios .framework7-root {
685 @media (width: 1024px) and
(height: 692px) and
(orientation: landscape
) {
688 .ios .framework7-root {
694 display: none
!important
;
696 /* === Statusbar === */
698 --f7-statusbar-height: 0px;
699 --f7-statusbar-bg-color: var
(--f7-bars-bg-color
);
702 --f7-statusbar-height: var
(--f7-safe-area-top
, 20px);
705 --f7-statusbar-height: var
(--f7-safe-area-top
, 24px);
707 .with-statusbar.ios:not(.device-ios):not(.device-android) {
708 --f7-statusbar-height: 20px;
710 .with-statusbar.md:not(.device-ios):not(.device-android) {
711 --f7-statusbar-height: 24px;
713 @supports not
(top: env
(safe-area-inset-top
)) {
714 .with-statusbar.device-ios {
715 --f7-statusbar-height: 20px;
718 @supports not
(top: env
(safe-area-inset-top
)) {
719 .with-statusbar.device-android {
720 --f7-statusbar-height: 24px;
729 box-sizing: border-box
;
731 height: var
(--f7-statusbar-height
);
734 padding-top: var
(--f7-statusbar-height
);
737 background: var
(--f7-statusbar-bg-color
, var
(--f7-bars-bg-color
));
740 background: var
(--f7-statusbar-bg-color
, var
(--f7-theme-color-shade
));
749 box-sizing: border-box
;
753 --f7-page-master-width: 320px;
754 --f7-page-master-border-color: rgba
(0, 0, 0, 0.1);
755 --f7-page-master-border-width: 1px;
758 --f7-page-bg-color: #efeff4;
759 --f7-page-transition-duration: 400ms;
760 --f7-page-swipeback-transition-duration: 400ms;
763 --f7-page-bg-color: #fff;
764 --f7-page-transition-duration: 250ms;
765 --f7-page-swipeback-transition-duration: 400ms;
768 --f7-page-bg-color: #171717;
769 --f7-page-master-border-color: rgba
(255, 255, 255, 0.1);
778 box-sizing: border-box
;
784 transform: translate3d
(0, 0, 0);
785 background-color: var
(--f7-page-bg-color
);
790 .page-with-navbar-large-collapsed {
791 --f7-navbar-large-collapse-progress: 1;
794 pointer-events: none
;
797 will-change: scroll-position
;
799 -webkit-overflow-scrolling: touch
;
800 box-sizing: border-box
;
806 .page-transitioning
.page-shadow-effect
,
807 .page-transitioning .page-opacity-effect {
808 transition-duration: var
(--f7-page-transition-duration
);
810 .page-transitioning-swipeback
,
811 .page-transitioning-swipeback
.page-shadow-effect
,
812 .page-transitioning-swipeback .page-opacity-effect {
813 transition-duration: var
(--f7-page-swipeback-transition-duration
);
815 .router-transition-forward
.page-next
,
816 .router-transition-backward
.page-next
,
817 .router-transition-forward
.page-current
,
818 .router-transition-backward
.page-current
,
819 .router-transition-forward
.page-previous:not
(.stacked
),
820 .router-transition-backward .page-previous:not(.stacked) {
821 pointer-events: none
;
823 .page-shadow-effect {
832 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%);
834 .page-opacity-effect {
838 background: rgba
(0, 0, 0, 0.1);
845 .ios .page-previous {
846 transform: translate3d
(-20%, 0, 0);
849 transform: translate3d
(100%, 0, 0);
851 .ios .page-previous .page-opacity-effect {
854 .ios .page-previous:after {
857 .ios .page-current .page-shadow-effect {
860 .ios
.router-transition-forward
.page-next
,
861 .ios .router-transition-forward .page-current {
862 will-change: transform
;
864 .ios .router-transition-forward .page-next {
865 animation: ios-page-next-to-current var
(--f7-page-transition-duration
) forwards
;
867 .ios .router-transition-forward .page-next:before {
876 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%);
877 animation: ios-page-element-fade-in var
(--f7-page-transition-duration
) forwards
;
879 .ios .router-transition-forward .page-current {
880 animation: ios-page-current-to-previous var
(--f7-page-transition-duration
) forwards
;
882 .ios .router-transition-forward .page-current:after {
886 background: rgba
(0, 0, 0, 0.1);
892 animation: ios-page-element-fade-in var
(--f7-page-transition-duration
) forwards
;
894 .ios
.router-transition-backward
.page-previous
,
895 .ios .router-transition-backward .page-current {
896 will-change: transform
;
898 .ios .router-transition-backward .page-previous {
899 animation: ios-page-previous-to-current var
(--f7-page-transition-duration
) forwards
;
901 .ios .router-transition-backward .page-previous:after {
905 background: rgba
(0, 0, 0, 0.1);
911 animation: ios-page-element-fade-out var
(--f7-page-transition-duration
) forwards
;
913 .ios .router-transition-backward .page-current {
914 animation: ios-page-current-to-next var
(--f7-page-transition-duration
) forwards
;
916 .ios .router-transition-backward .page-current:before {
925 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%);
926 animation: ios-page-element-fade-out var
(--f7-page-transition-duration
) forwards
;
928 .ios
.router-dynamic-navbar-inside
.page-shadow-effect
,
929 .ios .router-dynamic-navbar-inside .page-opacity-effect {
930 top: var
(--f7-navbar-height
);
932 .ios
.router-dynamic-navbar-inside
.page-next:before
,
933 .ios
.router-dynamic-navbar-inside
.page-current:after
,
934 .ios
.router-dynamic-navbar-inside
.page-current:before
,
935 .ios .router-dynamic-navbar-inside .page-previous:after {
936 top: var
(--f7-navbar-height
);
938 @keyframes ios-page-next-to-current
{
940 transform: translate3d
(100%, 0, 0);
943 transform: translate3d
(0%, 0, 0);
946 @keyframes ios-page-previous-to-current
{
948 transform: translate3d
(-20%, 0, 0);
951 transform: translate3d
(0%, 0, 0);
954 @keyframes ios-page-current-to-previous
{
956 transform: translate3d
(0, 0, 0);
959 transform: translate3d
(-20%, 0, 0);
962 @keyframes ios-page-current-to-next
{
964 transform: translate3d
(0, 0, 0);
967 transform: translate3d
(100%, 0, 0);
970 @keyframes ios-page-element-fade-in
{
978 @keyframes ios-page-element-fade-out
{
987 transform: translate3d
(0, 56px, 0);
989 pointer-events: none
;
991 .md .page-next.page-next-on-right {
992 transform: translate3d
(100%, 0, 0);
994 .md .router-transition-forward .page-next {
995 will-change: transform
, opacity
;
996 animation: md-page-next-to-current var
(--f7-page-transition-duration
) forwards
;
998 .md .router-transition-forward .page-current {
1001 .md .router-transition-backward .page-current {
1002 will-change: transform
, opacity
;
1003 animation: md-page-current-to-next var
(--f7-page-transition-duration
) forwards
;
1005 .md .router-transition-backward .page-previous {
1008 @keyframes md-page-next-to-current
{
1010 transform: translate3d
(0, 56px, 0);
1014 transform: translate3d
(0, 0px, 0);
1018 @keyframes md-page-current-to-next
{
1020 transform: translate3d
(0, 0, 0);
1024 transform: translate3d
(0, 56px, 0);
1028 .view:not(.view-master-detail) .page-master-stacked {
1031 .view:not(.view-master-detail) .navbar-master-stacked {
1034 .view-master-detail
.page-master
,
1035 .view-master-detail .navbar-master {
1036 width: var
(--f7-page-master-width
);
1037 --f7-safe-area-right: 0px;
1038 --f7-safe-area-outer-right: 0px;
1039 border-right: var
(--f7-page-master-border-width
) solid var
(--f7-page-master-border-color
);
1041 .view-master-detail
.page-master-detail
,
1042 .view-master-detail .navbar-master-detail {
1043 width: calc
(100% - var
(--f7-page-master-width
));
1044 --f7-safe-area-left: 0px;
1045 --f7-safe-area-outer-left: 0px;
1046 left: var
(--f7-page-master-width
);
1048 .view-master-detail .page-master {
1051 pointer-events: auto
;
1053 .view-master-detail
.page-master:before
,
1054 .view-master-detail .page-master:after {
1057 .view-master-detail.router-transition .page-master {
1062 --f7-link-highlight-black: rgba
(0, 0, 0, 0.1);
1063 --f7-link-highlight-white: rgba
(255, 255, 255, 0.15);
1064 --f7-link-highlight-color: var
(--f7-link-highlight-black
);
1067 --f7-link-highlight-color: var
(--f7-link-highlight-white
);
1071 display: inline-flex
;
1072 align-items: center
;
1073 align-content: center
;
1074 justify-content: center
;
1076 box-sizing: border-box
;
1077 transform: translate3d
(0, 0, 0);
1087 transition: opacity
300ms;
1089 .ios .link.active-state {
1091 transition-duration: 0ms;
1093 /* === Navbar === */
1096 --f7-navbar-bg-color: var(--f7-bars-bg-color);
1097 --f7-navbar-bg-image: var(--f7-bars-bg-image);
1098 --f7-navbar-border-color: var(--f7-bars-border-color);
1099 --f7-navbar-link-color: var(--f7-bars-link-color);
1100 --f7-navbar-text-color: var(--f7-bars-text-color);
1102 --f7-navbar-hide-show-transition-duration: 400ms;
1103 --f7-navbar-title-line-height: 1.2;
1106 --f7-navbar-height: 44px;
1107 --f7-navbar-tablet-height: 44px;
1108 --f7-navbar-font-size: 17px;
1109 --f7-navbar-inner-padding-left: 8px;
1110 --f7-navbar-inner-padding-right: 8px;
1111 --f7-navbar-title-font-weight: 600;
1112 --f7-navbar-title-margin-left: 0;
1113 --f7-navbar-title-margin-right: 0;
1114 --f7-navbar-title-text-align: center
;
1115 --f7-navbar-subtitle-text-color: #6d6d72;
1116 --f7-navbar-subtitle-font-size: 10px;
1117 --f7-navbar-subtitle-line-height: 1;
1118 --f7-navbar-subtitle-text-align: inherit
;
1119 --f7-navbar-shadow-image: none
;
1120 --f7-navbar-large-title-height: 52px;
1121 --f7-navbar-large-title-font-size: 34px;
1122 --f7-navbar-large-title-font-weight: 700;
1123 --f7-navbar-large-title-line-height: 1.2;
1124 --f7-navbar-large-title-letter-spacing: -0.03em;
1125 --f7-navbar-large-title-padding-left: 15px;
1126 --f7-navbar-large-title-padding-right: 15px;
1127 --f7-navbar-large-title-text-color: inherit
;
1131 --f7-navbar-subtitle-text-color: #8e8e93;
1134 --f7-navbar-height: 56px;
1135 --f7-navbar-tablet-height: 64px;
1136 --f7-navbar-font-size: 20px;
1137 --f7-navbar-inner-padding-left: 0px;
1138 --f7-navbar-inner-padding-right: 0px;
1139 --f7-navbar-title-font-weight: 500;
1140 --f7-navbar-title-margin-left: 16px;
1141 --f7-navbar-title-margin-right: 16px;
1142 --f7-navbar-title-text-align: left
;
1143 --f7-navbar-subtitle-text-color: rgba
(0, 0, 0, 0.85);
1144 --f7-navbar-subtitle-font-size: 14px;
1145 --f7-navbar-subtitle-line-height: 1.2;
1146 --f7-navbar-subtitle-text-align: inherit
;
1147 --f7-navbar-shadow-image: var
(--f7-bars-shadow-bottom-image
);
1148 --f7-navbar-large-title-font-size: 34px;
1149 --f7-navbar-large-title-height: 56px;
1150 --f7-navbar-large-title-font-weight: 500;
1151 --f7-navbar-large-title-line-height: 1.2;
1152 --f7-navbar-large-title-letter-spacing: 0;
1153 --f7-navbar-large-title-padding-left: 16px;
1154 --f7-navbar-large-title-padding-right: 16px;
1155 --f7-navbar-large-title-text-color: inherit
;
1159 --f7-navbar-subtitle-text-color: rgba
(255, 255, 255, 0.85);
1162 --f7-navbar-large-collapse-progress: 0;
1168 -webkit-backface-visibility: hidden
;
1169 backface-visibility: hidden
;
1170 box-sizing: border-box
;
1172 transform: translate3d
(0, 0, 0);
1173 height: var
(--f7-navbar-height
);
1174 background-image: var
(--f7-navbar-bg-image
, var
(--f7-bars-bg-image
));
1175 background-color: var
(--f7-navbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
1176 color: var
(--f7-navbar-text-color
, var
(--f7-bars-text-color
));
1177 font-size: var
(--f7-navbar-font-size
);
1179 .navbar .material-icons {
1189 color: var
(--f7-navbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
1193 justify-content: flex-start
;
1194 line-height: var
(--f7-navbar-height
);
1195 height: var
(--f7-navbar-height
);
1207 text-overflow: ellipsis
;
1208 white-space: nowrap
;
1210 font-weight: var
(--f7-navbar-title-font-weight
);
1211 display: inline-block
;
1212 line-height: var
(--f7-navbar-title-line-height
);
1213 text-align: var
(--f7-navbar-title-text-align
);
1214 margin-left: var
(--f7-navbar-title-margin-left
);
1215 margin-right: var
(--f7-navbar-title-margin-left
);
1219 color: var
(--f7-navbar-subtitle-text-color
);
1220 font-weight: normal
;
1221 font-size: var
(--f7-navbar-subtitle-font-size
);
1222 line-height: var
(--f7-navbar-subtitle-line-height
);
1223 text-align: var
(--f7-navbar-subtitle-text-align
);
1229 justify-content: flex-start
;
1230 align-items: center
;
1231 transform: translate3d
(0, 0, 0);
1233 .navbar .right:first-child {
1237 .navbar
.no-hairline:after
,
1238 .navbar.no-border:after {
1239 display: none
!important
;
1241 .navbar
.no-hairline
.title-large:after
,
1242 .navbar.no-border .title-large:after {
1243 display: none
!important
;
1245 .navbar.no-shadow:before {
1246 display: none
!important
;
1248 .navbar.navbar-hidden:before {
1249 opacity: 0 !important
;
1253 -webkit-backface-visibility: hidden
;
1254 backface-visibility: hidden
;
1259 background-color: var
(--f7-navbar-border-color
, var
(--f7-bars-border-color
));
1268 transform-origin: 50% 100%;
1269 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
1279 pointer-events: none
;
1280 background: var
(--f7-navbar-shadow-image
, var
(--f7-bars-shadow-bottom-image
));
1285 @media (min-width: 768px) {
1287 --f7-navbar-height: var
(--f7-navbar-tablet-height
);
1290 .navbar-transitioning
,
1291 .navbar-transitioning:before
,
1292 .navbar-transitioning
.title
,
1293 .navbar-transitioning
.title-large
,
1294 .navbar-transitioning
.title-large-inner
,
1295 .navbar-transitioning
.title-large-text
,
1296 .navbar-transitioning .subnavbar {
1297 transition-duration: var
(--f7-navbar-hide-show-transition-duration
);
1299 .navbar-page-transitioning {
1300 transition-duration: var
(--f7-page-swipeback-transition-duration
) !important
;
1302 .navbar-page-transitioning
.title-large-text
,
1303 .navbar-page-transitioning .title-large-inner {
1304 transition-duration: var
(--f7-page-swipeback-transition-duration
) !important
;
1307 transform: translate3d
(0, -100%, 0);
1309 .navbar-large-hidden {
1310 --f7-navbar-large-collapse-progress: 1;
1317 height: var
(--f7-navbar-height
);
1319 align-items: center
;
1320 box-sizing: border-box
;
1321 padding: 0 calc
(var
(--f7-navbar-inner-padding-right
) + var
(--f7-safe-area-right
)) 0 calc
(var
(--f7-navbar-inner-padding-right
) + var
(--f7-safe-area-left
));
1323 .navbar-inner.stacked {
1331 .navbar-large:before {
1332 transform: translateY
(calc
((1 - var
(--f7-navbar-large-collapse-progress
)) * var
(--f7-navbar-large-title-height
)));
1334 .navbar-inner-large > .title {
1335 opacity: calc
(-1 + 2 * var
(--f7-navbar-large-collapse-progress
));
1337 .navbar-large-collapsed
,
1338 .navbar-inner-large-collapsed {
1339 --f7-navbar-large-collapse-progress: 1;
1341 .navbar .title-large {
1342 box-sizing: border-box
;
1348 align-items: center
;
1349 white-space: nowrap
;
1350 transform: translate3d
(0px, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1351 will-change: transform
, opacity
;
1352 transition-property: transform
;
1354 background-image: var
(--f7-navbar-bg-image
, var
(--f7-bars-bg-image
));
1355 background-color: var
(--f7-navbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
1356 height: calc
(var
(--f7-navbar-large-title-height
) + 1px);
1359 transform-origin: calc
(var
(--f7-navbar-large-title-padding-left
) + var
(--f7-safe-area-left
)) center
;
1361 .navbar .title-large:after {
1364 background-color: var
(--f7-navbar-border-color
, var
(--f7-bars-border-color
));
1373 transform-origin: 50% 100%;
1374 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
1377 .title-large-inner .title {
1378 text-overflow: ellipsis
;
1379 white-space: nowrap
;
1380 color: var
(--f7-navbar-large-title-text-color
);
1381 letter-spacing: var
(--f7-navbar-large-title-letter-spacing
);
1382 font-size: var
(--f7-navbar-large-title-font-size
);
1383 font-weight: var
(--f7-navbar-large-title-font-weight
);
1384 line-height: var
(--f7-navbar-large-title-line-height
);
1385 padding-left: calc
(var
(--f7-navbar-large-title-padding-left
) + var
(--f7-safe-area-left
));
1386 padding-right: calc
(var
(--f7-navbar-large-title-padding-right
) + var
(--f7-safe-area-right
));
1387 transform-origin: calc
(var
(--f7-navbar-large-title-padding-left
) + var
(--f7-safe-area-left
)) center
;
1390 .title-large-inner {
1391 box-sizing: border-box
;
1393 transform: translate3d
(0, calc
(var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1394 transition-property: transform
, opacity
;
1397 .navbar-no-title-large-transition
.title-large
,
1398 .navbar-no-title-large-transition
.title-large-text
,
1399 .navbar-no-title-large-transition .title-large-inner {
1400 transition-duration: 0ms;
1402 .navbar
~ * .page:not
(.no-navbar
) .page-content
,
1403 .navbar
~ .page:not
(.no-navbar
) .page-content
,
1404 .navbar
~ .page-content
,
1405 .navbar ~ :not(.page) .page-content {
1406 padding-top: var
(--f7-navbar-height
);
1408 .navbar
~ * .page:not
(.no-navbar
).page-with-navbar-large
.page-content
,
1409 .navbar
~ .page:not
(.no-navbar
).page-with-navbar-large
.page-content
,
1410 .page-with-navbar-large
.navbar
~ .page-content
,
1411 .page-with-navbar-large .navbar ~ * .page-content {
1412 padding-top: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
1415 --f7-navbarLeftTextOffset: calc
(4px + 12px + var
(--f7-navbar-inner-padding-left
));
1416 --f7-navbarTitleLargeOffset: var
(--f7-navbar-large-title-padding-left
);
1418 .ios .navbar a.icon-only {
1421 justify-content: center
;
1423 .ios
.navbar
.left a
+ a
,
1424 .ios .navbar .right a + a {
1430 .ios .navbar .left {
1433 .ios .navbar .right {
1436 .ios .navbar .right:first-child {
1437 right: calc
(8px + var
(--f7-safe-area-right
));
1439 .ios .navbar-inner {
1440 justify-content: space-between
;
1442 .ios .navbar-inner-left-title {
1443 justify-content: flex-start
;
1445 .ios .navbar-inner-left-title .right {
1448 .ios .navbar-inner-left-title .title {
1452 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
),
1453 .ios .view:not(.view-master-detail) .navbar-previous {
1454 pointer-events: none
;
1456 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .title-large
,
1457 .ios .view:not(.view-master-detail) .navbar-previous .title-large {
1458 transform: translateY
(-100%);
1462 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .title-large
.title-large-text
,
1463 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
1464 transform: scale
(0.5);
1467 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .title-large
.title-large-inner
,
1468 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner {
1469 transform: translateX
(-100%);
1473 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .left
,
1474 .ios
.view:not
(.view-master-detail
) .navbar-previous
.left
,
1475 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .right
,
1476 .ios
.view:not
(.view-master-detail
) .navbar-previous
.right
,
1477 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) > .title
,
1478 .ios
.view:not
(.view-master-detail
) .navbar-previous
> .title
,
1479 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .subnavbar
,
1480 .ios
.view:not
(.view-master-detail
) .navbar-previous
.subnavbar
,
1481 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .fading
,
1482 .ios .view:not(.view-master-detail) .navbar-previous .fading {
1485 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .sliding
,
1486 .ios .view:not(.view-master-detail) .navbar-previous .sliding {
1489 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .subnavbar
.sliding
,
1490 .ios
.view:not
(.view-master-detail
) .navbar-previous
.subnavbar
.sliding
,
1491 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
).sliding
.subnavbar
,
1492 .ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar {
1494 transform: translate3d
(-100%, 0, 0);
1497 pointer-events: none
;
1499 .ios .navbar-next .title-large {
1500 transform: translateX
(100%);
1503 .ios
.navbar-next
.title-large
.title-large-text
,
1504 .ios .navbar-next .title-large .title-large-inner {
1507 .ios
.navbar-next
.left
,
1508 .ios
.navbar-next
.right
,
1509 .ios
.navbar-next
> .title
,
1510 .ios
.navbar-next
.subnavbar
,
1511 .ios .navbar-next .fading {
1514 .ios .navbar-next .sliding {
1517 .ios
.navbar-next
.sliding
.left
,
1518 .ios
.navbar-next
.sliding
.right
,
1519 .ios
.navbar-next
.sliding
> .title
,
1520 .ios .navbar-next.sliding .subnavbar {
1523 .ios
.navbar-next
.subnavbar
.sliding
,
1524 .ios .navbar-next.sliding .subnavbar {
1526 transform: translate3d
(100%, 0, 0);
1528 .ios
.router-dynamic-navbar-inside
.navbar-next
.title-large
,
1529 .ios
.router-dynamic-navbar-inside
.navbar-next
.title-large-text
,
1530 .ios .router-dynamic-navbar-inside .navbar-next .title-large-inner {
1533 .ios .router-dynamic-navbar-inside .navbar-previous .title-large {
1535 transform: translate3d
(0px, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1537 .ios
.router-dynamic-navbar-inside
.navbar-previous
.title-large-text
,
1538 .ios .router-dynamic-navbar-inside .navbar-previous .title-large-inner {
1539 transform: translate3d
(0, calc
(var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1541 .ios .router-transition .navbar {
1542 transition-duration: var
(--f7-page-transition-duration
);
1544 .ios .router-transition .title-large {
1547 .ios
.router-transition
.navbar-current
.left
,
1548 .ios
.router-transition
.navbar-current
> .title
,
1549 .ios
.router-transition
.navbar-current
.right
,
1550 .ios .router-transition .navbar-current .subnavbar {
1551 animation: ios-navbar-element-fade-out var
(--f7-page-transition-duration
) forwards
;
1553 .ios
.router-transition
.navbar-current
.sliding
,
1554 .ios
.router-transition
.navbar-current
.left
.sliding
.icon
+ span
,
1555 .ios
.router-transition
.navbar-current
.sliding
.left
,
1556 .ios
.router-transition
.navbar-current
.sliding
.left
.icon
+ span
,
1557 .ios
.router-transition
.navbar-current
.sliding
> .title
,
1558 .ios .router-transition .navbar-current.sliding .right {
1559 transition-duration: var
(--f7-page-transition-duration
);
1560 opacity: 0 !important
;
1563 .ios
.router-transition
.navbar-current
.sliding
.subnavbar
,
1564 .ios .router-transition .navbar-current .sliding.subnavbar {
1565 transition-duration: var
(--f7-page-transition-duration
);
1569 .ios
.router-transition-forward
.navbar-next
.left
,
1570 .ios
.router-transition-backward
.navbar-previous
.left
,
1571 .ios
.router-transition-forward
.navbar-next
> .title
,
1572 .ios
.router-transition-backward
.navbar-previous
> .title
,
1573 .ios
.router-transition-forward
.navbar-next
.right
,
1574 .ios
.router-transition-backward
.navbar-previous
.right
,
1575 .ios
.router-transition-forward
.navbar-next
.subnavbar
,
1576 .ios .router-transition-backward .navbar-previous .subnavbar {
1577 animation: ios-navbar-element-fade-in var
(--f7-page-transition-duration
) forwards
;
1579 .ios
.router-transition-forward
.navbar-next
.sliding
,
1580 .ios
.router-transition-backward
.navbar-previous
.sliding
,
1581 .ios
.router-transition-forward
.navbar-next
.left
.sliding
.icon
+ span
,
1582 .ios
.router-transition-backward
.navbar-previous
.left
.sliding
.icon
+ span
,
1583 .ios
.router-transition-forward
.navbar-next
.sliding
.left
,
1584 .ios
.router-transition-backward
.navbar-previous
.sliding
.left
,
1585 .ios
.router-transition-forward
.navbar-next
.sliding
.left
.icon
+ span
,
1586 .ios
.router-transition-backward
.navbar-previous
.sliding
.left
.icon
+ span
,
1587 .ios
.router-transition-forward
.navbar-next
.sliding
> .title
,
1588 .ios
.router-transition-backward
.navbar-previous
.sliding
> .title
,
1589 .ios
.router-transition-forward
.navbar-next
.sliding
.right
,
1590 .ios
.router-transition-backward
.navbar-previous
.sliding
.right
,
1591 .ios
.router-transition-forward
.navbar-next
.sliding
.subnavbar
,
1592 .ios .router-transition-backward .navbar-previous.sliding .subnavbar {
1593 transition-duration: var
(--f7-page-transition-duration
);
1595 transform: translate3d
(0, 0, 0) !important
;
1596 opacity: 1 !important
;
1598 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1601 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1602 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
;
1604 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1605 animation: ios-navbar-title-large-slide-up var
(--f7-page-transition-duration
) forwards
;
1607 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
1608 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
;
1610 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large .title-large-inner {
1611 animation: ios-navbar-title-large-inner-current-to-previous var
(--f7-page-transition-duration
) forwards
;
1613 .ios .router-transition-forward:not(.router-dynamic-navbar-inside) .navbar-next.router-navbar-transition-from-large .left .back span {
1614 animation: ios-navbar-back-text-next-to-current var
(--f7-page-transition-duration
) forwards
;
1616 transform-origin: left center
;
1618 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1621 .ios
.router-transition-forward
.navbar-next
.router-navbar-transition-from-large
.router-navbar-transition-to-large
.title-large
.title-large-text
,
1622 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1623 animation: ios-navbar-title-large-text-slide-left var
(--f7-page-transition-duration
) forwards
;
1625 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1626 animation: ios-navbar-title-large-slide-down var
(--f7-page-transition-duration
) forwards
;
1628 .ios
.router-transition-forward
.navbar-next
.router-navbar-transition-to-large:not
(.router-navbar-transition-from-large
) .title-large
.title-large-text
,
1629 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-inner {
1630 animation: ios-navbar-title-large-text-slide-left-top var
(--f7-page-transition-duration
) forwards
;
1632 .ios
.router-transition-forward
.navbar-next
.navbar-inner-large:not
(.navbar-inner-large-collapsed
) > .title
,
1633 .ios .router-transition-forward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1635 opacity: 0 !important
;
1636 transition-duration: 0;
1638 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-next
.title-large
,
1639 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-current
.title-large
,
1640 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-next
.title-large-text
,
1641 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-current
.title-large-text
,
1642 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-next
.title-large-inner
,
1643 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1644 animation: none
!important
;
1646 .ios .router-transition-backward:not(.router-dynamic-navbar-inside) .navbar-current.router-navbar-transition-to-large .left .back span {
1647 animation: ios-navbar-back-text-current-to-previous var
(--f7-page-transition-duration
) forwards
;
1649 transform-origin: left center
;
1651 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1653 transform: translateX
(100%);
1655 .ios
.router-transition-backward
.navbar-current
.router-navbar-transition-from-large
.router-navbar-transition-to-large
.title-large
.title-large-text
,
1656 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1657 animation: ios-navbar-title-large-text-slide-right var
(--f7-page-transition-duration
) forwards
;
1659 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1660 animation: ios-navbar-title-large-slide-up var
(--f7-page-transition-duration
) forwards
;
1662 .ios
.router-transition-backward
.navbar-current
.router-navbar-transition-from-large:not
(.router-navbar-transition-to-large
) .title-large
.title-large-text
,
1663 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-inner {
1664 animation: ios-navbar-title-large-text-slide-right-bottom var
(--f7-page-transition-duration
) forwards
;
1666 .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1669 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1672 transform: translateY
(0);
1674 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1675 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
;
1677 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1679 animation: ios-navbar-title-large-slide-down var
(--f7-page-transition-duration
) forwards
;
1681 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
1682 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
;
1684 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large .title-large-inner {
1685 animation: ios-navbar-title-large-inner-previous-to-current var
(--f7-page-transition-duration
) forwards
;
1687 .ios
.router-transition-backward
.navbar-current
.navbar-inner-large:not
(.navbar-inner-large-collapsed
) > .title
,
1688 .ios .router-transition-backward .navbar-previous.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1690 opacity: 0 !important
;
1691 transition-duration: 0;
1693 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-previous
.title-large
,
1694 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-current
.title-large
,
1695 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-previous
.title-large-text
,
1696 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-current
.title-large-text
,
1697 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-previous
.title-large-inner
,
1698 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1699 animation: none
!important
;
1701 .view-master-detail .navbar-master.navbar-previous {
1702 pointer-events: auto
;
1704 .view-master-detail
.navbar-master
.navbar-previous
.left
,
1705 .view-master-detail
.navbar-master
.navbar-previous:not
(.navbar-inner-large
) .title
,
1706 .view-master-detail
.navbar-master
.navbar-previous
.right
,
1707 .view-master-detail .navbar-master.navbar-previous .subnavbar {
1710 .ios
.view-master-detail
.router-transition
.navbar-master
.left
,
1711 .ios
.view-master-detail
.router-transition
.navbar-master
.left
.icon
+ span
,
1712 .ios
.view-master-detail
.router-transition
.navbar-master:not
(.navbar-inner-large
) .title
,
1713 .ios
.view-master-detail
.router-transition
.navbar-master
.right
,
1714 .ios
.view-master-detail
.router-transition
.navbar-master
.subnavbar
,
1715 .ios
.view-master-detail
.router-transition
.navbar-master
.sliding
,
1716 .ios .view-master-detail.router-transition .navbar-master .fading {
1717 opacity: 1 !important
;
1718 transition-duration: 0ms;
1719 transform: none
!important
;
1720 animation: none
!important
;
1722 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title {
1723 opacity: calc
(-1 + 2 * var
(--f7-navbar-large-collapse-progress
)) !important
;
1724 transition-duration: 0ms;
1725 transform: none
!important
;
1726 animation: none
!important
;
1728 .ios
.view-master-detail
.router-transition
.navbar-master
.navbar-inner-large
.title-large
,
1729 .ios
.view-master-detail
.router-transition
.navbar-master
.navbar-inner-large
.title-large-text
,
1730 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-inner {
1731 transition-duration: 0ms;
1732 animation: none
!important
;
1734 @keyframes ios-navbar-element-fade-in
{
1742 @keyframes ios-navbar-element-fade-out
{
1750 @keyframes ios-navbar-title-large-slide-up
{
1752 transform: translateY
(0%);
1755 transform: translateY
(calc
(-1 * var
(--f7-navbar-large-title-height
)));
1758 @keyframes ios-navbar-title-large-slide-down
{
1760 transform: translateY
(calc
(-1 * var
(--f7-navbar-large-title-height
)));
1763 transform: translateY
(0%);
1766 @keyframes ios-navbar-title-large-text-slide-up
{
1768 transform: translateX
(0px) translateY
(0%) scale
(1);
1771 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);
1774 @keyframes ios-navbar-title-large-text-slide-down
{
1776 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);
1779 transform: translateX
(0px) translateY
(0%) scale
(1);
1782 @keyframes ios-navbar-title-large-text-slide-left
{
1784 transform: translateX
(0%) scale
(1);
1787 transform: translateX
(-100%) scale
(1);
1790 @keyframes ios-navbar-title-large-text-slide-right
{
1792 transform: translateX
(-100%) scale
(1);
1795 transform: translateX
(0%) scale
(1);
1798 @keyframes ios-navbar-title-large-text-slide-left-top
{
1800 transform: translateX
(100%) translateY
(var
(--f7-navbar-large-title-height
)) scale
(1);
1803 transform: translateX
(0%) translateY
(0%) scale
(1);
1806 @keyframes ios-navbar-title-large-text-slide-right-bottom
{
1808 transform: translateX
(0%) translateY
(0%) scale
(1);
1811 transform: translateX
(100%) translateY
(var
(--f7-navbar-large-title-height
)) scale
(1);
1814 @keyframes ios-navbar-title-large-text-fade-out
{
1825 @keyframes ios-navbar-title-large-text-fade-in
{
1836 @keyframes ios-navbar-title-large-text-scale-out
{
1838 transform: translateY
(0%) scale
(1);
1841 transform: translateY
(0%) scale
(0.5);
1844 @keyframes ios-navbar-title-large-text-scale-in
{
1846 transform: translateY
(0%) scale
(0.5);
1849 transform: translateY
(0%) scale
(1);
1852 @keyframes ios-navbar-back-text-current-to-previous
{
1855 transform: translateY
(0px) translateX
(0px) scale
(1);
1862 transform: translateX
(calc
(var
(--f7-navbarTitleLargeOffset
) - var
(--f7-navbarLeftTextOffset
))) translateY
(calc
((var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(2);
1865 @keyframes ios-navbar-back-text-next-to-current
{
1868 transform: translateX
(calc
(var
(--f7-navbarTitleLargeOffset
) - var
(--f7-navbarLeftTextOffset
))) translateY
(calc
((var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(2);
1875 transform: translateX
(0px) translateY
(0px) scale
(1);
1878 @keyframes ios-navbar-title-large-inner-current-to-previous
{
1880 transform: translateX
(0%);
1884 transform: translateX
(-100%);
1888 @keyframes ios-navbar-title-large-inner-previous-to-current
{
1890 transform: translateX
(-100%);
1894 transform: translateX
(0%);
1898 .md .navbar a.link {
1902 .md .navbar a.link:before {
1909 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
1910 background-repeat: no-repeat
;
1911 background-position: center
;
1912 background-size: 100% 100%;
1914 pointer-events: none
;
1915 transition-duration: 600ms;
1917 .md .navbar a.link.active-state:before {
1919 transition-duration: 150ms;
1921 .md .navbar a.icon-only {
1926 .md .navbar .right {
1929 .md .navbar .right:first-child {
1930 right: var
(--f7-safe-area-right
);
1933 justify-content: flex-start
;
1936 .md .navbar-inner-large:not(.navbar-inner-large-collapsed) {
1939 .md .page.page-with-subnavbar .navbar-inner {
1942 .md .navbar-inner-centered-title {
1943 justify-content: space-between
;
1945 .md .navbar-inner-centered-title .right {
1948 .md .navbar-inner-centered-title .title {
1951 /* === Toolbar === */
1954 --f7-toolbar-bg-color: var(--f7-bars-bg-color);
1955 --f7-toolbar-bg-image: var(--f7-bars-bg-image);
1956 --f7-toolbar-border-color: var(--f7-bars-border-color);
1957 --f7-toolbar-link-color: var(--f7-bars-link-color);
1958 --f7-toolbar-text-color: var(--f7-bars-text-color);
1960 --f7-toolbar-hide-show-transition-duration: 400ms;
1963 --f7-toolbar-height: 44px;
1964 --f7-toolbar-font-size: 17px;
1965 --f7-tabbar-labels-height: 50px;
1966 --f7-tabbar-labels-tablet-height: 56px;
1967 --f7-tabbar-link-inactive-color: #929292;
1969 --f7-tabbar-link-active-color: var(--f7-theme-color);
1971 --f7-toolbar-top-shadow-image: none
;
1972 --f7-toolbar-bottom-shadow-image: none
;
1973 --f7-tabbar-icon-size: 28px;
1974 --f7-tabbar-link-text-transform: none
;
1975 --f7-tabbar-link-font-weight: 400;
1976 --f7-tabbar-link-letter-spacing: 0;
1977 --f7-tabbar-label-font-size: 10px;
1978 --f7-tabbar-label-tablet-font-size: 14px;
1979 --f7-tabbar-label-text-transform: none
;
1980 --f7-tabbar-label-font-weight: 400;
1981 --f7-tabbar-label-letter-spacing: 0.01;
1984 --f7-toolbar-height: 48px;
1985 --f7-toolbar-font-size: 14px;
1986 --f7-tabbar-labels-height: 56px;
1987 --f7-tabbar-labels-tablet-height: 56px;
1988 --f7-tabbar-link-inactive-color: rgba
(0, 0, 0, 0.54);
1990 --f7-tabbar-link-active-color: var(--f7-theme-color);
1991 --f7-tabbar-link-active-border-color: var(--f7-theme-color);
1993 --f7-toolbar-top-shadow-image: var
(--f7-bars-shadow-bottom-image
);
1994 --f7-toolbar-bottom-shadow-image: var
(--f7-bars-shadow-top-image
);
1995 --f7-tabbar-icon-size: 24px;
1996 --f7-tabbar-link-text-transform: uppercase
;
1997 --f7-tabbar-link-font-weight: 500;
1998 --f7-tabbar-link-letter-spacing: 0.03em;
1999 --f7-tabbar-label-font-size: 14px;
2000 --f7-tabbar-label-tablet-font-size: 14px;
2001 --f7-tabbar-label-text-transform: none
;
2002 --f7-tabbar-label-font-weight: 400;
2003 --f7-tabbar-label-letter-spacing: 0;
2007 --f7-tabbar-link-inactive-color: rgba
(255, 255, 255, 0.54);
2013 transform: translate3d
(0, 0, 0);
2014 -webkit-backface-visibility: hidden
;
2015 backface-visibility: hidden
;
2017 box-sizing: border-box
;
2019 height: var
(--f7-toolbar-height
);
2020 background-image: var
(--f7-toolbar-bg-image
, var
(--f7-bars-bg-image
));
2021 background-color: var
(--f7-toolbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
2022 color: var
(--f7-toolbar-text-color
, var
(--f7-bars-text-color
));
2023 font-size: var
(--f7-toolbar-font-size
);
2029 color: var
(--f7-toolbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
2030 box-sizing: border-box
;
2033 white-space: nowrap
;
2034 text-overflow: ellipsis
;
2038 line-height: var
(--f7-toolbar-height
);
2039 height: var
(--f7-toolbar-height
);
2046 -webkit-backface-visibility: hidden
;
2047 backface-visibility: hidden
;
2055 .ios
.toolbar-top-ios
,
2056 .md .toolbar-top-md {
2059 .toolbar-top
.tab-link-highlight
,
2060 .ios
.toolbar-top-ios
.tab-link-highlight
,
2061 .md .toolbar-top-md .tab-link-highlight {
2064 .toolbar-top
.no-hairline:after
,
2065 .ios
.toolbar-top-ios
.no-hairline:after
,
2066 .md
.toolbar-top-md
.no-hairline:after
,
2067 .toolbar-top
.no-border:after
,
2068 .ios
.toolbar-top-ios
.no-border:after
,
2069 .md .toolbar-top-md.no-border:after {
2070 display: none
!important
;
2072 .toolbar-top
.no-shadow:before
,
2073 .ios
.toolbar-top-ios
.no-shadow:before
,
2074 .md
.toolbar-top-md
.no-shadow:before
,
2075 .toolbar-top
.toolbar-hidden:before
,
2076 .ios
.toolbar-top-ios
.toolbar-hidden:before
,
2077 .md .toolbar-top-md.toolbar-hidden:before {
2078 display: none
!important
;
2081 .ios
.toolbar-top-ios:after
,
2082 .md
.toolbar-top-md:after
,
2083 .toolbar-top:before
,
2084 .ios
.toolbar-top-ios:before
,
2085 .md .toolbar-top-md:before {
2086 -webkit-backface-visibility: hidden
;
2087 backface-visibility: hidden
;
2090 .ios
.toolbar-top-ios:after
,
2091 .md .toolbar-top-md:after {
2094 background-color: var
(--f7-toolbar-border-color
, var
(--f7-bars-border-color
));
2103 transform-origin: 50% 100%;
2104 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2106 .toolbar-top:before
,
2107 .ios
.toolbar-top-ios:before
,
2108 .md .toolbar-top-md:before {
2116 pointer-events: none
;
2117 background: var
(--f7-toolbar-top-shadow-image
, var
(--f7-bars-shadow-bottom-image
));
2120 .ios
.toolbar-bottom-ios
,
2121 .md .toolbar-bottom-md {
2123 height: calc
(var
(--f7-toolbar-height
) + var
(--f7-safe-area-bottom
));
2125 .toolbar-bottom
.tab-link-highlight
,
2126 .ios
.toolbar-bottom-ios
.tab-link-highlight
,
2127 .md .toolbar-bottom-md .tab-link-highlight {
2130 .toolbar-bottom
.toolbar-inner
,
2131 .ios
.toolbar-bottom-ios
.toolbar-inner
,
2132 .md .toolbar-bottom-md .toolbar-inner {
2135 bottom: var
(--f7-safe-area-bottom
);
2137 .toolbar-bottom
.no-hairline:before
,
2138 .ios
.toolbar-bottom-ios
.no-hairline:before
,
2139 .md
.toolbar-bottom-md
.no-hairline:before
,
2140 .toolbar-bottom
.no-border:before
,
2141 .ios
.toolbar-bottom-ios
.no-border:before
,
2142 .md .toolbar-bottom-md.no-border:before {
2143 display: none
!important
;
2145 .toolbar-bottom
.no-shadow:after
,
2146 .ios
.toolbar-bottom-ios
.no-shadow:after
,
2147 .md
.toolbar-bottom-md
.no-shadow:after
,
2148 .toolbar-bottom
.toolbar-hidden:after
,
2149 .ios
.toolbar-bottom-ios
.toolbar-hidden:after
,
2150 .md .toolbar-bottom-md.toolbar-hidden:after {
2151 display: none
!important
;
2153 .toolbar-bottom:before
,
2154 .ios
.toolbar-bottom-ios:before
,
2155 .md .toolbar-bottom-md:before {
2158 background-color: var
(--f7-toolbar-border-color
, var
(--f7-bars-border-color
));
2167 transform-origin: 50% 0%;
2168 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2170 .toolbar-bottom:after
,
2171 .ios
.toolbar-bottom-ios:after
,
2172 .md .toolbar-bottom-md:after {
2180 pointer-events: none
;
2181 background: var
(--f7-toolbar-bottom-shadow-image
, var
(--f7-bars-shadow-top-image
));
2190 justify-content: space-between
;
2191 box-sizing: border-box
;
2192 align-items: center
;
2193 align-content: center
;
2197 .views > .tabbar-labels {
2202 color: var
(--f7-tabbar-link-inactive-color
);
2205 .tabbar-labels a.link {
2209 .tabbar-labels a
.tab-link
,
2211 .tabbar-labels a.link {
2214 box-sizing: border-box
;
2216 justify-content: center
;
2217 align-items: center
;
2218 flex-direction: column
;
2219 text-transform: var
(--f7-tabbar-link-text-transform
);
2220 font-weight: var
(--f7-tabbar-link-font-weight
);
2221 letter-spacing: var
(--f7-tabbar-link-letter-spacing
);
2224 .tabbar
.tab-link-active
,
2225 .tabbar-labels .tab-link-active {
2226 color: var
(--f7-tabbar-link-active-color
, var
(--f7-theme-color
));
2229 .tabbar-labels i.icon {
2230 font-size: var
(--f7-tabbar-icon-size
);
2231 height: var
(--f7-tabbar-icon-size
);
2232 line-height: var
(--f7-tabbar-icon-size
);
2235 --f7-toolbar-height: var
(--f7-tabbar-labels-height
);
2237 .tabbar-labels a
.tab-link
,
2238 .tabbar-labels a.link {
2240 justify-content: space-between
;
2241 align-items: center
;
2243 .tabbar-labels .tabbar-label {
2248 text-overflow: ellipsis
;
2249 white-space: nowrap
;
2250 font-size: var
(--f7-tabbar-label-font-size
);
2251 text-transform: var
(--f7-tabbar-label-text-transform
);
2252 font-weight: var
(--f7-tabbar-label-font-weight
);
2253 letter-spacing: var
(--f7-tabbar-label-letter-spacing
);
2255 @media (min-width: 768px) {
2257 --f7-tabbar-labels-height: var
(--f7-tabbar-labels-tablet-height
);
2258 --f7-tabbar-label-font-size: var
(--f7-tabbar-label-tablet-font-size
);
2261 .tabbar-scrollable .toolbar-inner {
2262 will-change: scroll-position
;
2264 -webkit-overflow-scrolling: touch
;
2266 .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
2267 display: none
!important
;
2268 width: 0 !important
;
2269 height: 0 !important
;
2270 -webkit-appearance: none
;
2271 opacity: 0 !important
;
2273 .tabbar-scrollable a
.tab-link
,
2274 .tabbar-scrollable a.link {
2278 .toolbar-transitioning
,
2279 .navbar-transitioning
+ .toolbar
,
2280 .navbar-transitioning ~ * .toolbar {
2281 transition-duration: var
(--f7-toolbar-hide-show-transition-duration
);
2283 .toolbar-bottom
.toolbar-hidden
,
2284 .ios
.toolbar-bottom-ios
.toolbar-hidden
,
2285 .md .toolbar-bottom-md.toolbar-hidden {
2286 transform: translate3d
(0, 100%, 0);
2288 .toolbar-bottom
~ .page-content
,
2289 .ios
.toolbar-bottom-ios
~ .page-content
,
2290 .md
.toolbar-bottom-md
~ .page-content
,
2291 .toolbar-bottom
~ * .page-content
,
2292 .ios
.toolbar-bottom-ios
~ * .page-content
,
2293 .md .toolbar-bottom-md ~ * .page-content {
2294 padding-bottom: calc
(var
(--f7-toolbar-height
) + var
(--f7-safe-area-bottom
));
2296 .toolbar-bottom
.tabbar-labels
~ .page-content
,
2297 .ios
.toolbar-bottom-ios
.tabbar-labels
~ .page-content
,
2298 .md
.toolbar-bottom-md
.tabbar-labels
~ .page-content
,
2299 .toolbar-bottom
.tabbar-labels
~ * .page-content
,
2300 .ios
.toolbar-bottom-ios
.tabbar-labels
~ * .page-content
,
2301 .md .toolbar-bottom-md.tabbar-labels ~ * .page-content {
2302 padding-bottom: calc
(var
(--f7-tabbar-labels-height
) + var
(--f7-safe-area-bottom
));
2304 .toolbar-top
.toolbar-hidden
,
2305 .ios
.toolbar-top-ios
.toolbar-hidden
,
2306 .md .toolbar-top-md.toolbar-hidden {
2307 transform: translate3d
(0, -100%, 0);
2309 .toolbar-top
~ .page-content
,
2310 .ios
.toolbar-top-ios
~ .page-content
,
2311 .md
.toolbar-top-md
~ .page-content
,
2312 .toolbar-top
~ * .page-content
,
2313 .ios
.toolbar-top-ios
~ * .page-content
,
2314 .md .toolbar-top-md ~ * .page-content {
2315 padding-top: var
(--f7-toolbar-height
);
2317 .toolbar-top
.tabbar-labels
~ .page-content
,
2318 .ios
.toolbar-top-ios
.tabbar-labels
~ .page-content
,
2319 .md
.toolbar-top-md
.tabbar-labels
~ .page-content
,
2320 .toolbar-top
.tabbar-labels
~ * .page-content
,
2321 .ios
.toolbar-top-ios
.tabbar-labels
~ * .page-content
,
2322 .md .toolbar-top-md.tabbar-labels ~ * .page-content {
2323 padding-top: var
(--f7-tabbar-labels-height
);
2325 .navbar
~ .toolbar-top
,
2326 .ios
.navbar
~ .toolbar-top-ios
,
2327 .md
.navbar
~ .toolbar-top-md
,
2328 .navbar
~ * .toolbar-top
,
2329 .ios
.navbar
~ * .toolbar-top-ios
,
2330 .md
.navbar
~ * .toolbar-top-md
,
2331 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
,
2332 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
,
2333 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md {
2334 top: var
(--f7-navbar-height
);
2336 .navbar
~ .toolbar-top
~ .page-content
,
2337 .ios
.navbar
~ .toolbar-top-ios
~ .page-content
,
2338 .md
.navbar
~ .toolbar-top-md
~ .page-content
,
2339 .navbar
~ * .toolbar-top
~ .page-content
,
2340 .ios
.navbar
~ * .toolbar-top-ios
~ .page-content
,
2341 .md
.navbar
~ * .toolbar-top-md
~ .page-content
,
2342 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
~ .page-content
,
2343 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
~ .page-content
,
2344 .md
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-md
~ .page-content
,
2345 .navbar
~ .toolbar-top
~ * .page-content
,
2346 .ios
.navbar
~ .toolbar-top-ios
~ * .page-content
,
2347 .md
.navbar
~ .toolbar-top-md
~ * .page-content
,
2348 .navbar
~ * .toolbar-top
~ * .page-content
,
2349 .ios
.navbar
~ * .toolbar-top-ios
~ * .page-content
,
2350 .md
.navbar
~ * .toolbar-top-md
~ * .page-content
,
2351 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
~ * .page-content
,
2352 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
~ * .page-content
,
2353 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md ~ * .page-content {
2354 padding-top: calc
(var
(--f7-navbar-height
) + var
(--f7-toolbar-height
));
2356 .navbar
~ .toolbar-top
.tabbar-labels
~ .page-content
,
2357 .ios
.navbar
~ .toolbar-top-ios
.tabbar-labels
~ .page-content
,
2358 .md
.navbar
~ .toolbar-top-md
.tabbar-labels
~ .page-content
,
2359 .navbar
~ * .toolbar-top
.tabbar-labels
~ .page-content
,
2360 .ios
.navbar
~ * .toolbar-top-ios
.tabbar-labels
~ .page-content
,
2361 .md
.navbar
~ * .toolbar-top-md
.tabbar-labels
~ .page-content
,
2362 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
.tabbar-labels
~ .page-content
,
2363 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
.tabbar-labels
~ .page-content
,
2364 .md
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-md
.tabbar-labels
~ .page-content
,
2365 .navbar
~ .toolbar-top
.tabbar-labels
~ * .page-content
,
2366 .ios
.navbar
~ .toolbar-top-ios
.tabbar-labels
~ * .page-content
,
2367 .md
.navbar
~ .toolbar-top-md
.tabbar-labels
~ * .page-content
,
2368 .navbar
~ * .toolbar-top
.tabbar-labels
~ * .page-content
,
2369 .ios
.navbar
~ * .toolbar-top-ios
.tabbar-labels
~ * .page-content
,
2370 .md
.navbar
~ * .toolbar-top-md
.tabbar-labels
~ * .page-content
,
2371 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
.tabbar-labels
~ * .page-content
,
2372 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
.tabbar-labels
~ * .page-content
,
2373 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.tabbar-labels ~ * .page-content {
2374 padding-top: calc
(var
(--f7-navbar-height
) + var
(--f7-tabbar-labels-height
));
2376 .navbar
~ .toolbar-top
.toolbar-hidden
,
2377 .ios
.navbar
~ .toolbar-top-ios
.toolbar-hidden
,
2378 .md
.navbar
~ .toolbar-top-md
.toolbar-hidden
,
2379 .navbar
~ * .toolbar-top
.toolbar-hidden
,
2380 .ios
.navbar
~ * .toolbar-top-ios
.toolbar-hidden
,
2381 .md
.navbar
~ * .toolbar-top-md
.toolbar-hidden
,
2382 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
.toolbar-hidden
,
2383 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
.toolbar-hidden
,
2384 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden {
2385 transform: translate3d
(0, calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-toolbar-height
))), 0);
2387 .navbar
~ .toolbar-top
.toolbar-hidden
.tabbar-labels
,
2388 .ios
.navbar
~ .toolbar-top-ios
.toolbar-hidden
.tabbar-labels
,
2389 .md
.navbar
~ .toolbar-top-md
.toolbar-hidden
.tabbar-labels
,
2390 .navbar
~ * .toolbar-top
.toolbar-hidden
.tabbar-labels
,
2391 .ios
.navbar
~ * .toolbar-top-ios
.toolbar-hidden
.tabbar-labels
,
2392 .md
.navbar
~ * .toolbar-top-md
.toolbar-hidden
.tabbar-labels
,
2393 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
.toolbar-hidden
.tabbar-labels
,
2394 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
.toolbar-hidden
.tabbar-labels
,
2395 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels {
2396 transform: translate3d
(0, calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-tabbar-labels-height
))), 0);
2398 .navbar-hidden
+ .toolbar-top:not
(.toolbar-hidden
),
2399 .ios
.navbar-hidden
+ .toolbar-top-ios:not
(.toolbar-hidden
),
2400 .md
.navbar-hidden
+ .toolbar-top-md:not
(.toolbar-hidden
),
2401 .navbar-hidden
~ * .toolbar-top:not
(.toolbar-hidden
),
2402 .ios
.navbar-hidden
~ * .toolbar-top-ios:not
(.toolbar-hidden
),
2403 .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
2404 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-height
)), 0);
2406 .navbar-large-hidden
+ .toolbar-top:not
(.toolbar-hidden
),
2407 .ios
.navbar-large-hidden
+ .toolbar-top-ios:not
(.toolbar-hidden
),
2408 .md
.navbar-large-hidden
+ .toolbar-top-md:not
(.toolbar-hidden
),
2409 .navbar-large-hidden
~ * .toolbar-top:not
(.toolbar-hidden
),
2410 .ios
.navbar-large-hidden
~ * .toolbar-top-ios:not
(.toolbar-hidden
),
2411 .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
2412 transform: translate3d
(0, calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
))), 0);
2414 .ios .toolbar a.icon-only {
2415 min-height: var
(--f7-toolbar-height
);
2417 justify-content: center
;
2418 align-items: center
;
2422 .ios .toolbar-inner {
2423 padding: 0 calc
(8px + var
(--f7-safe-area-right
)) 0 calc
(8px + var
(--f7-safe-area-left
));
2425 .ios
.tabbar-labels a
.tab-link
,
2426 .ios .tabbar-labels a.link {
2428 padding-bottom: 4px;
2430 .ios
.tabbar-labels a
.tab-link i
+ span
,
2431 .ios .tabbar-labels a.link i + span {
2434 @media (min-width: 768px) {
2435 .ios
.tabbar
.toolbar-inner
,
2436 .ios .tabbar-labels .toolbar-inner {
2437 justify-content: center
;
2439 .ios
.tabbar a
.tab-link
,
2440 .ios
.tabbar-labels a
.tab-link
,
2441 .ios
.tabbar a
.link
,
2442 .ios .tabbar-labels a.link {
2447 .ios .tabbar-scrollable .toolbar-inner {
2448 justify-content: flex-start
;
2450 .ios
.tabbar-scrollable a
.tab-link
,
2451 .ios .tabbar-scrollable a.link {
2454 .md .toolbar a.link {
2455 justify-content: center
;
2459 .md .toolbar a.link:before {
2466 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
2467 background-repeat: no-repeat
;
2468 background-position: center
;
2469 background-size: 100% 100%;
2471 pointer-events: none
;
2472 transition-duration: 600ms;
2474 .md .toolbar a.link.active-state:before {
2476 transition-duration: 150ms;
2478 .md .toolbar a.icon-only {
2482 .md .toolbar-inner {
2483 padding: 0 var
(--f7-safe-area-right
) 0 var
(--f7-safe-area-left
);
2485 .md
.tabbar a
.tab-link
,
2486 .md
.tabbar-labels a
.tab-link
,
2488 .md .tabbar-labels a.link {
2492 .md
.tabbar a
.tab-link
,
2493 .md .tabbar-labels a.tab-link {
2494 transition-duration: 300ms;
2498 .md
.tabbar
.tab-link-highlight
,
2499 .md .tabbar-labels .tab-link-highlight {
2502 background: var
(--f7-tabbar-link-active-border-color
, var
(--f7-theme-color
));
2503 transition-duration: 300ms;
2506 .md
.tabbar-labels a
.tab-link
,
2507 .md .tabbar-labels a.link {
2509 padding-bottom: 7px;
2516 .md .tabbar-scrollable .toolbar-inner {
2518 justify-content: flex-start
;
2520 .md
.tabbar-scrollable a
.tab-link
,
2521 .md .tabbar-scrollable a.link {
2524 /* === Subnavbar === */
2527 --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
2528 --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
2529 --f7-subnavbar-border-color: var(--f7-bars-border-color);
2530 --f7-subnavbar-link-color: var(--f7-bars-link-color);
2531 --f7-subnavbar-text-color: var(--f7-bars-text-color);
2535 --f7-subnavbar-height: 44px;
2536 --f7-subnavbar-inner-padding-left: 8px;
2537 --f7-subnavbar-inner-padding-right: 8px;
2538 --f7-subnavbar-title-font-size: 34px;
2539 --f7-subnavbar-title-font-weight: 700;
2540 --f7-subnavbar-title-line-height: 1.2;
2541 --f7-subnavbar-title-letter-spacing: -0.03em;
2542 --f7-subnavbar-title-margin-left: 7px;
2543 --f7-navbar-shadow-image: none
;
2546 --f7-subnavbar-height: 48px;
2547 --f7-subnavbar-inner-padding-left: 16px;
2548 --f7-subnavbar-inner-padding-right: 16px;
2549 --f7-subnavbar-title-font-size: 20px;
2550 --f7-subnavbar-title-font-weight: 500;
2551 --f7-subnavbar-title-line-height: 1.2;
2552 --f7-subnavbar-title-letter-spacing: 0;
2553 --f7-subnavbar-title-margin-left: 0px;
2554 --f7-navbar-shadow-image: var
(--f7-bars-shadow-bottom-image
);
2562 box-sizing: border-box
;
2564 justify-content: space-between
;
2565 align-items: center
;
2566 background-image: var
(--f7-subnavbar-bg-image
, var
(--f7-bars-bg-image
));
2567 background-color: var
(--f7-subnavbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
2568 color: var
(--f7-subnavbar-text-color
, var
(--f7-bars-text-color
));
2573 text-overflow: ellpsis
;
2574 white-space: nowrap
;
2575 font-size: var
(--f7-subnavbar-title-font-size
);
2576 font-weight: var
(--f7-subnavbar-title-font-weight
);
2578 display: inline-block
;
2579 line-height: var
(--f7-subnavbar-title-line-height
);
2580 letter-spacing: var
(--f7-subnavbar-title-letter-spacing
);
2581 margin-left: var
(--f7-subnavbar-title-margin-left
);
2587 justify-content: flex-start
;
2588 align-items: center
;
2590 .subnavbar .right:first-child {
2595 color: var
(--f7-subnavbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
2598 line-height: var
(--f7-subnavbar-height
);
2599 height: var
(--f7-subnavbar-height
);
2601 .subnavbar a.icon-only {
2602 min-width: var
(--f7-subnavbar-height
);
2604 .subnavbar
.no-hairline:after
,
2605 .subnavbar.no-border:after {
2606 display: none
!important
;
2608 .subnavbar
.no-shadow:before
,
2609 .subnavbar.navbar-hidden:before {
2610 display: none
!important
;
2614 -webkit-backface-visibility: hidden
;
2615 backface-visibility: hidden
;
2620 background-color: var
(--f7-navbar-border-color
, var
(--f7-bars-border-color
));
2629 transform-origin: 50% 100%;
2630 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2640 pointer-events: none
;
2641 background: var
(--f7-navbar-shadow-image
, var
(--f7-bars-shadow-bottom-image
));
2647 align-items: center
;
2648 box-sizing: border-box
;
2649 justify-content: space-between
;
2651 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
));
2653 .subnavbar-inner.stacked {
2656 .navbar .subnavbar {
2659 .views
> .subnavbar
,
2661 .page > .subnavbar {
2664 .navbar
~ * .subnavbar
,
2665 .page-with-subnavbar
.navbar
~ .subnavbar
,
2666 .page-with-subnavbar
.navbar
~ * .subnavbar
,
2667 .navbar
~ .page-with-subnavbar:not
(.no-navbar
) .subnavbar
,
2668 .navbar ~ .subnavbar {
2669 top: var
(--f7-navbar-height
);
2671 .navbar
~ .page-with-navbar-large:not
(.no-navbar
) .subnavbar
,
2672 .page-with-subnavbar
.page-with-navbar-large
.navbar
~ .subnavbar
,
2673 .page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar {
2674 top: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
2675 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
2677 .navbar .title-large ~ .subnavbar {
2678 top: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
2679 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
2681 .page-with-subnavbar
.page-content
,
2682 .subnavbar
~ .page-content
,
2683 .subnavbar ~ * .page-content {
2684 padding-top: var
(--f7-subnavbar-height
);
2686 .navbar
~ .page-with-subnavbar:not
(.no-navbar
) .page-content
,
2687 .navbar
~ *:not
(.no-navbar
) .subnavbar
~ .page-content
,
2688 .navbar
~ *:not
(.no-navbar
) .subnavbar
~ * .page-content
,
2689 .navbar
~ .subnavbar
~ .page-content
,
2690 .navbar
~ .subnavbar
~ * .page-content
,
2691 .page-with-subnavbar
.navbar
~ * .page-content
,
2692 .page-with-subnavbar .navbar ~ .page-content {
2693 padding-top: calc
(var
(--f7-navbar-height
) + var
(--f7-subnavbar-height
));
2695 .navbar
~ .page-with-subnavbar
.page-with-navbar-large:not
(.no-navbar
) .page-content
,
2696 .page-with-subnavbar
.page-with-navbar-large
.navbar
~ * .page-content
,
2697 .page-with-subnavbar
.page-with-navbar-large
.navbar
~ .page-content
,
2698 .page-with-subnavbar.page-with-navbar-large .page-content {
2699 padding-top: calc
(var
(--f7-navbar-height
) + var
(--f7-subnavbar-height
) + var
(--f7-navbar-large-title-height
));
2702 height: calc
(var
(--f7-subnavbar-height
) + 1px);
2706 .ios .subnavbar .title {
2707 align-self: flex-start
;
2710 .ios
.subnavbar
.left a
+ a
,
2711 .ios .subnavbar .right a + a {
2714 .ios .subnavbar .left {
2717 .ios .subnavbar .right {
2720 .ios .subnavbar .right:first-child {
2723 .ios .subnavbar a.link {
2724 justify-content: flex-start
;
2726 .ios .subnavbar a.icon-only {
2727 justify-content: center
;
2731 height: var
(--f7-subnavbar-height
);
2733 .md .subnavbar .right {
2736 .md .subnavbar .right:first-child {
2739 .md .subnavbar a.link {
2740 justify-content: center
;
2743 .md .subnavbar a.link:before {
2750 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
2751 background-repeat: no-repeat
;
2752 background-position: center
;
2753 background-size: 100% 100%;
2755 pointer-events: none
;
2756 transition-duration: 600ms;
2758 .md .subnavbar a.link.active-state:before {
2760 transition-duration: 150ms;
2762 .md .subnavbar a.icon-only {
2765 .md .subnavbar-inner > a.link:first-child {
2766 margin-left: calc
(-1 * var
(--f7-subnavbar-inner-padding-left
));
2768 .md .subnavbar-inner > a.link:last-child {
2769 margin-right: calc
(-1 * var
(--f7-subnavbar-inner-padding-right
));
2771 /* === Content Block === */
2773 --f7-block-font-size: inherit
;
2774 --f7-block-strong-bg-color: #fff;
2775 --f7-block-title-font-size: inherit
;
2776 --f7-block-header-margin: 10px;
2777 --f7-block-footer-margin: 10px;
2778 --f7-block-header-font-size: 14px;
2779 --f7-block-footer-font-size: 14px;
2780 --f7-block-title-white-space: nowrap
;
2781 --f7-block-title-medium-text-color: #000;
2782 --f7-block-title-medium-text-transform: none
;
2783 --f7-block-title-large-text-color: #000;
2784 --f7-block-title-large-text-transform: none
;
2788 --f7-block-title-medium-text-color: #fff;
2789 --f7-block-title-large-text-color: #fff;
2792 --f7-block-text-color: #6d6d72;
2793 --f7-block-padding-horizontal: 15px;
2794 --f7-block-padding-vertical: 15px;
2795 --f7-block-margin-vertical: 35px;
2796 --f7-block-strong-text-color: #000;
2797 --f7-block-strong-border-color: #c8c7cc;
2798 --f7-block-title-text-transform: uppercase
;
2799 --f7-block-title-text-color: #6d6d72;
2800 --f7-block-title-font-weight: 400;
2801 --f7-block-title-line-height: 17px;
2802 --f7-block-title-margin-bottom: 10px;
2803 --f7-block-title-medium-font-size: 22px;
2804 --f7-block-title-medium-font-weight: bold
;
2805 --f7-block-title-medium-line-height: 1.4;
2806 --f7-block-title-large-font-size: 29px;
2807 --f7-block-title-large-font-weight: bold
;
2808 --f7-block-title-large-line-height: 1.3;
2809 --f7-block-inset-side-margin: 15px;
2810 --f7-block-inset-border-radius: 7px;
2811 --f7-block-header-text-color: #8f8f94;
2812 --f7-block-footer-text-color: #8f8f94;
2816 --f7-block-strong-border-color: #282829;
2817 --f7-block-title-text-color: #8E8E93;
2818 --f7-block-header-text-color: #8E8E93;
2819 --f7-block-footer-text-color: #8E8E93;
2820 --f7-block-strong-bg-color: #1c1c1d;
2821 --f7-block-strong-text-color: #fff;
2824 --f7-block-text-color: inherit
;
2825 --f7-block-padding-horizontal: 16px;
2826 --f7-block-padding-vertical: 16px;
2827 --f7-block-margin-vertical: 32px;
2828 --f7-block-strong-text-color: inherit
;
2829 --f7-block-strong-border-color: rgba
(0, 0, 0, 0.12);
2830 --f7-block-title-text-transform: none
;
2831 --f7-block-title-text-color: rgba
(0, 0, 0, 0.54);
2832 --f7-block-title-font-weight: 500;
2833 --f7-block-title-line-height: 16px;
2834 --f7-block-title-margin-bottom: 16px;
2835 --f7-block-title-medium-font-size: 24px;
2836 --f7-block-title-medium-font-weight: 500;
2837 --f7-block-title-medium-line-height: 1.3;
2838 --f7-block-title-large-font-size: 34px;
2839 --f7-block-title-large-font-weight: 500;
2840 --f7-block-title-large-line-height: 1.2;
2841 --f7-block-inset-side-margin: 16px;
2842 --f7-block-inset-border-radius: 4px;
2843 --f7-block-header-text-color: rgba
(0, 0, 0, 0.54);
2844 --f7-block-footer-text-color: rgba
(0, 0, 0, 0.54);
2848 --f7-block-strong-border-color: #282829;
2849 --f7-block-title-text-color: #fff;
2850 --f7-block-header-text-color: rgba
(255, 255, 255, 0.54);
2851 --f7-block-footer-text-color: rgba
(255, 255, 255, 0.54);
2852 --f7-block-strong-bg-color: #1c1c1d;
2855 box-sizing: border-box
;
2858 color: var
(--f7-block-text-color
);
2859 margin: var
(--f7-block-margin-vertical
) 0;
2862 padding-left: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-left
));
2863 padding-right: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-right
));
2864 font-size: var
(--f7-block-font-size
);
2866 .block
.no-hairlines:before
,
2867 .block
.no-hairlines
ul:before
,
2868 .md
.block
.no-hairlines-md:before
,
2869 .md
.block
.no-hairlines-md
ul:before
,
2870 .ios
.block
.no-hairlines-ios:before
,
2871 .ios .block.no-hairlines-ios ul:before {
2872 display: none
!important
;
2874 .block
.no-hairlines:after
,
2875 .block
.no-hairlines
ul:after
,
2876 .md
.block
.no-hairlines-md:after
,
2877 .md
.block
.no-hairlines-md
ul:after
,
2878 .ios
.block
.no-hairlines-ios:after
,
2879 .ios .block.no-hairlines-ios ul:after {
2880 display: none
!important
;
2882 .block
.no-hairline-top:before
,
2883 .block
.no-hairline-top
ul:before
,
2884 .md
.block
.no-hairline-top-md:before
,
2885 .md
.block
.no-hairline-top-md
ul:before
,
2886 .ios
.block
.no-hairline-top-ios:before
,
2887 .ios .block.no-hairline-top-ios ul:before {
2888 display: none
!important
;
2890 .block
.no-hairline-bottom:after
,
2891 .block
.no-hairline-bottom
ul:after
,
2892 .md
.block
.no-hairline-bottom-md:after
,
2893 .md
.block
.no-hairline-bottom-md
ul:after
,
2894 .ios
.block
.no-hairline-bottom-ios:after
,
2895 .ios .block.no-hairline-bottom-ios ul:after {
2896 display: none
!important
;
2898 .block
> h1:first-child
,
2899 .block
> h2:first-child
,
2900 .block
> h3:first-child
,
2901 .block
> h4:first-child
,
2902 .block > p:first-child {
2905 .block
> h1:last-child
,
2906 .block
> h2:last-child
,
2907 .block
> h3:last-child
,
2908 .block
> h4:last-child
,
2909 .block > p:last-child {
2913 color: var
(--f7-block-strong-text-color
);
2914 padding-top: var
(--f7-block-padding-vertical
);
2915 padding-bottom: var
(--f7-block-padding-vertical
);
2916 background-color: var
(--f7-block-strong-bg-color
);
2918 .block-strong:before {
2921 background-color: var
(--f7-block-strong-border-color
);
2930 transform-origin: 50% 0%;
2931 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2933 .block-strong:after {
2936 background-color: var
(--f7-block-strong-border-color
);
2945 transform-origin: 50% 100%;
2946 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2952 white-space: var
(--f7-block-title-white-space
);
2953 text-overflow: ellipsis
;
2954 text-transform: var
(--f7-block-title-text-transform
);
2955 color: var
(--f7-block-title-text-color
);
2956 font-size: var
(--f7-block-title-font-size
, inherit
);
2957 font-weight: var
(--f7-block-title-font-weight
);
2958 line-height: var
(--f7-block-title-line-height
);
2959 margin-top: var
(--f7-block-margin-vertical
);
2960 margin-bottom: var
(--f7-block-title-margin-bottom
);
2961 margin-left: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-left
));
2962 margin-right: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-right
));
2964 .block-title
+ .list
,
2965 .block-title
+ .block
,
2966 .block-title
+ .card
,
2967 .block-title
+ .timeline
,
2968 .block-title + .block-header {
2971 .block-title-medium {
2972 font-size: var
(--f7-block-title-medium-font-size
);
2973 text-transform: var
(--f7-block-title-medium-text-transform
);
2974 color: var
(--f7-block-title-medium-text-color
);
2975 font-weight: var
(--f7-block-title-medium-font-weight
);
2976 line-height: var
(--f7-block-title-medium-line-height
);
2978 .block-title-large {
2979 font-size: var
(--f7-block-title-large-font-size
);
2980 text-transform: var
(--f7-block-title-large-text-transform
);
2981 color: var
(--f7-block-title-large-text-color
);
2982 font-weight: var
(--f7-block-title-large-font-weight
);
2983 line-height: var
(--f7-block-title-large-line-height
);
2985 .block
> .block-title:first-child
,
2986 .list > .block-title:first-child {
2992 color: var
(--f7-block-header-text-color
);
2993 font-size: var
(--f7-block-header-font-size
);
2994 margin-bottom: var
(--f7-block-header-margin
);
2995 margin-top: var
(--f7-block-margin-vertical
);
2997 .block-header
+ .list
,
2998 .block-header
+ .block
,
2999 .block-header
+ .card
,
3000 .block-header + .timeline {
3001 margin-top: var
(--f7-block-header-margin
);
3004 color: var
(--f7-block-footer-text-color
);
3005 font-size: var
(--f7-block-footer-font-size
);
3006 margin-top: var
(--f7-block-footer-margin
);
3007 margin-bottom: var
(--f7-block-margin-vertical
);
3013 padding-left: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-left
));
3014 padding-right: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-right
));
3016 .block-footer
ul:first-child
,
3017 .block-header
ul:first-child
,
3018 .block-footer
p:first-child
,
3019 .block-header
p:first-child
,
3020 .block-footer
h1:first-child
,
3021 .block-header
h1:first-child
,
3022 .block-footer
h2:first-child
,
3023 .block-header
h2:first-child
,
3024 .block-footer
h3:first-child
,
3025 .block-header
h3:first-child
,
3026 .block-footer
h4:first-child
,
3027 .block-header h4:first-child {
3030 .block-footer
ul:last-child
,
3031 .block-header
ul:last-child
,
3032 .block-footer
p:last-child
,
3033 .block-header
p:last-child
,
3034 .block-footer
h1:last-child
,
3035 .block-header
h1:last-child
,
3036 .block-footer
h2:last-child
,
3037 .block-header
h2:last-child
,
3038 .block-footer
h3:last-child
,
3039 .block-header
h3:last-child
,
3040 .block-footer
h4:last-child
,
3041 .block-header h4:last-child {
3044 .block-footer
ul:first-child:last-child
,
3045 .block-header
ul:first-child:last-child
,
3046 .block-footer
p:first-child:last-child
,
3047 .block-header
p:first-child:last-child
,
3048 .block-footer
h1:first-child:last-child
,
3049 .block-header
h1:first-child:last-child
,
3050 .block-footer
h2:first-child:last-child
,
3051 .block-header
h2:first-child:last-child
,
3052 .block-footer
h3:first-child:last-child
,
3053 .block-header
h3:first-child:last-child
,
3054 .block-footer
h4:first-child:last-child
,
3055 .block-header h4:first-child:last-child {
3059 .list
.block-header
,
3060 .block
.block-header
,
3061 .card
.block-header
,
3062 .timeline .block-header {
3065 .list
.block-footer
,
3066 .block
.block-footer
,
3067 .card
.block-footer
,
3068 .timeline .block-footer {
3071 .list
+ .block-footer
,
3072 .block
+ .block-footer
,
3073 .card
+ .block-footer
,
3074 .timeline + .block-footer {
3075 margin-top: calc
(-1 * (var
(--f7-block-margin-vertical
) - var
(--f7-block-footer-margin
)));
3077 .block + .block-footer {
3078 margin-top: calc
(-1 * (var
(--f7-block-margin-vertical
) - var
(--f7-block-footer-margin
)));
3079 margin-bottom: var
(--f7-block-margin-vertical
);
3081 .block
.block-header
,
3082 .block .block-footer {
3086 border-radius: var
(--f7-block-inset-border-radius
);
3087 margin-left: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
3088 margin-right: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
3089 --f7-safe-area-left: 0px;
3090 --f7-safe-area-right: 0px;
3092 .block-strong.inset:before {
3093 display: none
!important
;
3095 .block-strong.inset:after {
3096 display: none
!important
;
3098 @media (min-width: 768px) {
3099 .block.tablet-inset {
3100 border-radius: var
(--f7-block-inset-border-radius
);
3101 margin-left: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
3102 margin-right: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
3103 --f7-safe-area-left: 0px;
3104 --f7-safe-area-right: 0px;
3106 .block-strong.tablet-inset:before {
3107 display: none
!important
;
3109 .block-strong.tablet-inset:after {
3110 display: none
!important
;
3113 /* === List View === */
3115 --f7-list-bg-color: #fff;
3116 --f7-list-item-text-max-lines: 2;
3117 --f7-list-chevron-icon-color: #c7c7cc;
3118 --f7-list-item-title-font-size: inherit
;
3119 --f7-list-item-title-font-weight: 400;
3120 --f7-list-item-title-text-color: inherit
;
3121 --f7-list-item-title-line-height: inherit
;
3122 --f7-list-item-title-white-space: nowrap
;
3123 --f7-list-item-subtitle-font-weight: 400;
3124 --f7-list-item-subtitle-text-color: inherit
;
3125 --f7-list-item-subtitle-line-height: inherit
;
3126 --f7-list-item-header-text-color: inherit
;
3127 --f7-list-item-header-font-size: 12px;
3128 --f7-list-item-header-font-weight: 400;
3129 --f7-list-item-header-line-height: 1.2;
3130 --f7-list-item-footer-font-size: 12px;
3131 --f7-list-item-footer-font-weight: 400;
3132 --f7-list-item-footer-line-height: 1.2;
3135 --f7-list-inset-side-margin: 15px;
3136 --f7-list-inset-border-radius: 7px;
3137 --f7-list-margin-vertical: 35px;
3138 --f7-list-font-size: 17px;
3139 --f7-list-chevron-icon-area: 20px;
3140 --f7-list-border-color: #c8c7cc;
3141 --f7-list-item-border-color: #c8c7cc;
3142 --f7-list-link-pressed-bg-color: #d9d9d9;
3143 --f7-list-item-subtitle-font-size: 15px;
3144 --f7-list-item-text-font-size: 15px;
3145 --f7-list-item-text-font-weight: 400;
3146 --f7-list-item-text-text-color: #8e8e93;
3147 --f7-list-item-text-line-height: 21px;
3148 --f7-list-item-after-font-size: inherit
;
3149 --f7-list-item-after-font-weight: 400;
3150 --f7-list-item-after-text-color: #8e8e93;
3151 --f7-list-item-after-line-height: inherit
;
3152 --f7-list-item-after-padding: 5px;
3153 --f7-list-item-footer-text-color: #8e8e93;
3154 --f7-list-item-min-height: 44px;
3155 --f7-list-item-media-margin: 15px;
3156 --f7-list-item-media-icons-margin: 5px;
3157 --f7-list-item-cell-margin: 15px;
3158 --f7-list-item-padding-vertical: 8px;
3159 --f7-list-item-padding-horizontal: 15px;
3160 --f7-list-media-item-padding-vertical: 10px;
3161 --f7-list-media-item-padding-horizontal: 15px;
3163 --f7-list-button-text-color: var(--f7-theme-color);
3165 --f7-list-button-font-size: inherit
;
3166 --f7-list-button-font-weight: 400;
3167 --f7-list-button-text-align: center
;
3168 --f7-list-button-border-color: #c8c7cc;
3169 --f7-list-button-pressed-bg-color: #d9d9d9;
3170 --f7-list-item-divider-height: 31px;
3171 --f7-list-item-divider-text-color: #8e8e93;
3172 --f7-list-item-divider-font-size: inherit
;
3173 --f7-list-item-divider-font-weight: 400;
3174 --f7-list-item-divider-bg-color: #f7f7f7;
3175 --f7-list-item-divider-line-height: inherit
;
3176 --f7-list-item-divider-border-color: #c8c7cc;
3177 --f7-list-group-title-height: 31px;
3178 --f7-list-group-title-text-color: #8e8e93;
3179 --f7-list-group-title-font-size: inherit
;
3180 --f7-list-group-title-font-weight: 400;
3181 --f7-list-group-title-bg-color: #f7f7f7;
3182 --f7-list-group-title-line-height: inherit
;
3186 --f7-list-bg-color: #1c1c1d;
3187 --f7-list-border-color: #282829;
3188 --f7-list-button-border-color: #282829;
3189 --f7-list-item-border-color: #282829;
3190 --f7-list-item-divider-border-color: #282829;
3191 --f7-list-item-divider-bg-color: #232323;
3192 --f7-list-group-title-bg-color: #232323;
3193 --f7-list-link-pressed-bg-color: #363636;
3194 --f7-list-button-pressed-bg-color: #363636;
3195 --f7-list-chevron-icon-color: #434345;
3198 --f7-list-inset-side-margin: 16px;
3199 --f7-list-inset-border-radius: 4px;
3200 --f7-list-margin-vertical: 32px;
3201 --f7-list-font-size: 16px;
3202 --f7-list-chevron-icon-area: 26px;
3203 --f7-list-border-color: rgba
(0, 0, 0, 0.12);
3204 --f7-list-item-border-color: rgba
(0, 0, 0, 0.12);
3205 --f7-list-link-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3206 --f7-list-item-subtitle-font-size: 14px;
3207 --f7-list-item-text-font-size: 14px;
3208 --f7-list-item-text-font-weight: 400;
3209 --f7-list-item-text-text-color: #757575;
3210 --f7-list-item-text-line-height: 20px;
3211 --f7-list-item-after-font-size: 14px;
3212 --f7-list-item-after-font-weight: 400;
3213 --f7-list-item-after-text-color: #757575;
3214 --f7-list-item-after-line-height: inherit
;
3215 --f7-list-item-after-padding: 8px;
3216 --f7-list-item-footer-text-color: rgba
(0, 0, 0, 0.5);
3217 --f7-list-item-min-height: 48px;
3218 --f7-list-item-media-margin: 16px;
3219 --f7-list-item-media-icons-margin: 8px;
3220 --f7-list-item-cell-margin: 16px;
3221 --f7-list-item-padding-vertical: 8px;
3222 --f7-list-item-padding-horizontal: 16px;
3223 --f7-list-media-item-padding-vertical: 14px;
3224 --f7-list-media-item-padding-horizontal: 16px;
3225 --f7-list-button-text-color: #212121;
3226 --f7-list-button-font-size: inherit
;
3227 --f7-list-button-font-weight: 400;
3228 --f7-list-button-text-align: left
;
3229 --f7-list-button-border-color: transparent
;
3230 --f7-list-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3231 --f7-list-item-divider-height: 48px;
3232 --f7-list-item-divider-text-color: rgba
(0, 0, 0, 0.54);
3233 --f7-list-item-divider-font-size: 14px;
3234 --f7-list-item-divider-font-weight: 400;
3235 --f7-list-item-divider-bg-color: #f4f4f4;
3236 --f7-list-item-divider-line-height: inherit
;
3237 --f7-list-item-divider-border-color: transparent
;
3238 --f7-list-group-title-height: 48px;
3239 --f7-list-group-title-text-color: rgba
(0, 0, 0, 0.54);
3240 --f7-list-group-title-font-size: 14px;
3241 --f7-list-group-title-font-weight: 400;
3242 --f7-list-group-title-bg-color: #f4f4f4;
3243 --f7-list-group-title-line-height: inherit
;
3247 --f7-list-bg-color: #1c1c1d;
3248 --f7-list-border-color: #282829;
3249 --f7-list-button-text-color: #fff;
3250 --f7-list-item-border-color: #282829;
3251 --f7-list-item-divider-border-color: #282829;
3252 --f7-list-item-divider-bg-color: #232323;
3253 --f7-list-item-divider-text-color: #fff;
3254 --f7-list-group-title-bg-color: #232323;
3255 --f7-list-group-title-text-color: #fff;
3256 --f7-list-link-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3257 --f7-list-button-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3258 --f7-list-chevron-icon-color: #434345;
3259 --f7-list-item-text-text-color: rgba
(255, 255, 255, 0.54);
3260 --f7-list-item-after-text-color: rgba
(255, 255, 255, 0.54);
3261 --f7-list-item-footer-text-color: rgba
(255, 255, 255, 0.54);
3266 font-size: var
(--f7-list-font-size
);
3267 margin: var
(--f7-list-margin-vertical
) 0;
3274 background: var
(--f7-list-bg-color
);
3279 background-color: var
(--f7-list-border-color
);
3288 transform-origin: 50% 0%;
3289 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3294 background-color: var
(--f7-list-border-color
);
3303 transform-origin: 50% 100%;
3304 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3306 .list ul ul:before {
3307 display: none
!important
;
3310 display: none
!important
;
3314 box-sizing: border-box
;
3320 align-items: center
;
3321 box-sizing: border-box
;
3322 padding-bottom: var
(--f7-list-item-padding-vertical
);
3323 padding-top: var
(--f7-list-item-padding-vertical
);
3325 .list .item-media + .item-inner {
3326 margin-left: var
(--f7-list-item-media-margin
);
3328 .list
.item-media i
+ i
,
3329 .list .item-media i + img {
3330 margin-left: var
(--f7-list-item-media-icons-margin
);
3333 padding-left: var
(--f7-list-item-after-padding
);
3340 justify-content: space-between
;
3341 box-sizing: border-box
;
3342 align-items: center
;
3343 align-self: stretch
;
3344 padding-top: var
(--f7-list-item-padding-vertical
);
3345 padding-bottom: var
(--f7-list-item-padding-vertical
);
3346 min-height: var
(--f7-list-item-min-height
);
3347 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3352 white-space: var
(--f7-list-item-title-white-space
);
3355 text-overflow: ellipsis
;
3357 font-size: var
(--f7-list-item-title-font-size
);
3358 font-weight: var
(--f7-list-item-title-font-weight
);
3359 color: var
(--f7-list-item-title-text-color
);
3360 line-height: var
(--f7-list-item-title-line-height
);
3363 white-space: nowrap
;
3366 font-size: var
(--f7-list-item-after-font-size
);
3367 font-weight: var
(--f7-list-item-after-font-weight
);
3368 color: var
(--f7-list-item-after-text-color
);
3369 line-height: var
(--f7-list-item-after-line-height
);
3373 .list .item-footer {
3374 white-space: normal
;
3376 .list .item-header {
3377 color: var
(--f7-list-item-header-text-color
);
3378 font-size: var
(--f7-list-item-header-font-size
);
3379 font-weight: var
(--f7-list-item-header-font-weight
);
3380 line-height: var
(--f7-list-item-header-line-height
);
3382 .list .item-footer {
3383 color: var
(--f7-list-item-footer-text-color
);
3384 font-size: var
(--f7-list-item-footer-font-size
);
3385 font-weight: var
(--f7-list-item-footer-font-weight
);
3386 line-height: var
(--f7-list-item-footer-line-height
);
3389 .list .list-button {
3390 transition-duration: 300ms;
3391 transition-property: background-color
;
3400 .list .item-link.active-state {
3401 background-color: var
(--f7-list-link-pressed-bg-color
);
3403 .list .item-link .item-inner {
3404 padding-right: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3406 .list .item-content {
3408 justify-content: space-between
;
3409 box-sizing: border-box
;
3410 align-items: center
;
3411 min-height: var
(--f7-list-item-min-height
);
3412 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
3414 .list .item-subtitle {
3417 white-space: nowrap
;
3419 text-overflow: ellipsis
;
3420 font-size: var
(--f7-list-item-subtitle-font-size
);
3421 font-weight: var
(--f7-list-item-subtitle-font-weight
);
3422 color: var
(--f7-list-item-subtitle-text-color
);
3423 line-height: var
(--f7-list-item-subtitle-line-height
);
3428 text-overflow: hidden
;
3429 -webkit-line-clamp: var
(--f7-list-item-text-max-lines
);
3430 display: -webkit-box
;
3431 font-size: var
(--f7-list-item-text-font-size
);
3432 font-weight: var
(--f7-list-item-text-font-weight
);
3433 color: var
(--f7-list-item-text-text-color
);
3434 line-height: var
(--f7-list-item-text-line-height
);
3435 max-height: calc
(var
(--f7-list-item-text-line-height
) * var
(--f7-list-item-text-max-lines
));
3437 .list .item-title-row {
3440 justify-content: space-between
;
3441 box-sizing: border-box
;
3443 .list .item-title-row .item-after {
3448 justify-content: space-between
;
3449 box-sizing: border-box
;
3454 box-sizing: border-box
;
3457 margin-left: var
(--f7-list-item-cell-margin
);
3460 .list .item-cell:first-child {
3463 .list .ripple-wave + .item-cell {
3466 .list li:last-child .list-button:after {
3467 display: none
!important
;
3469 .list
li:last-child
> .item-inner:after
,
3470 .list
li:last-child
li:last-child
> .item-inner:after
,
3471 .list
li:last-child
> .item-content
> .item-inner:after
,
3472 .list
li:last-child
li:last-child
> .item-content
> .item-inner:after
,
3473 .list
li:last-child
> .swipeout-content
> .item-content
> .item-inner:after
,
3474 .list
li:last-child
li:last-child
> .swipeout-content
> .item-content
> .item-inner:after
,
3475 .list
li:last-child
> .item-link
> .item-content
> .item-inner:after
,
3476 .list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
3477 display: none
!important
;
3479 .list li
li:last-child
.item-inner:after
,
3480 .list li:last-child li .item-inner:after {
3483 background-color: var
(--f7-list-item-border-color
);
3492 transform-origin: 50% 100%;
3493 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3495 .list
.no-hairlines:before
,
3496 .list
.no-hairlines
ul:before
,
3497 .md
.list
.no-hairlines-md:before
,
3498 .md
.list
.no-hairlines-md
ul:before
,
3499 .ios
.list
.no-hairlines-ios:before
,
3500 .ios .list.no-hairlines-ios ul:before {
3501 display: none
!important
;
3503 .list
.no-hairlines:after
,
3504 .list
.no-hairlines
ul:after
,
3505 .md
.list
.no-hairlines-md:after
,
3506 .md
.list
.no-hairlines-md
ul:after
,
3507 .ios
.list
.no-hairlines-ios:after
,
3508 .ios .list.no-hairlines-ios ul:after {
3509 display: none
!important
;
3511 .list
.no-hairline-top:before
,
3512 .list
.no-hairline-top
ul:before
,
3513 .md
.list
.no-hairline-top-md:before
,
3514 .md
.list
.no-hairline-top-md
ul:before
,
3515 .ios
.list
.no-hairline-top-ios:before
,
3516 .ios .list.no-hairline-top-ios ul:before {
3517 display: none
!important
;
3519 .list
.no-hairline-bottom:after
,
3520 .list
.no-hairline-bottom
ul:after
,
3521 .md
.list
.no-hairline-bottom-md:after
,
3522 .md
.list
.no-hairline-bottom-md
ul:after
,
3523 .ios
.list
.no-hairline-bottom-ios:after
,
3524 .ios .list.no-hairline-bottom-ios ul:after {
3525 display: none
!important
;
3527 .list
.no-hairlines-between
.item-inner:after
,
3528 .md
.list
.no-hairlines-between-md
.item-inner:after
,
3529 .ios
.list
.no-hairlines-between-ios
.item-inner:after
,
3530 .list
.no-hairlines-between
.list-button:after
,
3531 .md
.list
.no-hairlines-between-md
.list-button:after
,
3532 .ios
.list
.no-hairlines-between-ios
.list-button:after
,
3533 .list
.no-hairlines-between
.item-divider:after
,
3534 .md
.list
.no-hairlines-between-md
.item-divider:after
,
3535 .ios
.list
.no-hairlines-between-ios
.item-divider:after
,
3536 .list
.no-hairlines-between
.list-group-title:after
,
3537 .md
.list
.no-hairlines-between-md
.list-group-title:after
,
3538 .ios
.list
.no-hairlines-between-ios
.list-group-title:after
,
3539 .list
.no-hairlines-between
.list-group-title:after
,
3540 .md
.list
.no-hairlines-between-md
.list-group-title:after
,
3541 .ios .list.no-hairlines-between-ios .list-group-title:after {
3542 display: none
!important
;
3544 .list
.no-hairlines-between
.simple-list
li:after
,
3545 .md
.list
.no-hairlines-between-md
.simple-list
li:after
,
3546 .ios .list.no-hairlines-between-ios.simple-list li:after {
3547 display: none
!important
;
3549 .list
.no-hairlines-between
.links-list
a:after
,
3550 .md
.list
.no-hairlines-between-md
.links-list
a:after
,
3551 .ios .list.no-hairlines-between-ios.links-list a:after {
3552 display: none
!important
;
3555 padding: 0 var
(--f7-list-item-padding-horizontal
);
3556 line-height: var
(--f7-list-item-min-height
);
3557 color: var
(--f7-list-button-text-color
, var
(--f7-theme-color
));
3558 font-size: var
(--f7-list-button-font-size
);
3559 font-weight: var
(--f7-list-button-font-weight
);
3560 text-align: var
(--f7-list-button-text-align
);
3562 .list-button:after {
3565 background-color: var
(--f7-list-button-border-color
);
3574 transform-origin: 50% 100%;
3575 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3577 .list-button.active-state {
3578 background-color: var
(--f7-list-button-pressed-bg-color
);
3580 .list-button[class*="color-"] {
3581 --f7-list-button-text-color: var
(--f7-theme-color
);
3585 white-space: nowrap
;
3586 text-overflow: ellipsis
;
3588 box-sizing: border-box
;
3590 justify-content: space-between
;
3591 align-items: center
;
3592 align-content: center
;
3593 line-height: var
(--f7-list-item-min-height
);
3594 height: var
(--f7-list-item-min-height
);
3595 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
3596 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3598 .simple-list li:after {
3599 left: var
(--f7-list-item-padding-horizontal
);
3601 left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
3604 .simple-list li:last-child:after {
3605 display: none
!important
;
3611 transition-duration: 300ms;
3612 transition-property: background-color
;
3617 align-items: center
;
3618 align-content: center
;
3619 justify-content: space-between
;
3620 box-sizing: border-box
;
3621 white-space: nowrap
;
3622 text-overflow: ellipsis
;
3624 height: var
(--f7-list-item-min-height
);
3627 .links-list a .ripple-wave {
3630 .links-list a:after {
3633 .links-list a.active-state {
3634 background-color: var
(--f7-list-link-pressed-bg-color
);
3637 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
3638 padding-right: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3640 .links-list a:after {
3641 left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
3644 .links-list li:last-child a:after {
3645 display: none
!important
;
3647 .simple-list
li:after
,
3648 .links-list
a:after
,
3649 .list .item-inner:after {
3652 background-color: var
(--f7-list-item-border-color
);
3661 transform-origin: 50% 100%;
3662 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3666 --f7-list-item-padding-vertical: var
(--f7-list-media-item-padding-vertical
);
3667 --f7-list-item-padding-horizontal: var
(--f7-list-media-item-padding-horizontal
);
3669 .media-list
.item-inner
,
3670 li
.media-item
.item-inner
{
3672 align-self: stretch
;
3674 .media-list
.item-media
,
3675 li
.media-item
.item-media
{
3676 align-self: flex-start
;
3678 .media-list
.item-media img
,
3679 li
.media-item
.item-media img
{
3682 .media-list
.item-link
.item-inner
,
3683 li
.media-item
.item-link
.item-inner
{
3684 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3686 .media-list
.item-link
.item-title-row
,
3687 li
.media-item
.item-link
.item-title-row
{
3688 padding-right: calc
(var
(--f7-list-chevron-icon-area
));
3690 .media-list
.chevron-center
.item-link
.item-inner
,
3691 .media-list
.chevron-center
.item-link
.item-inner
,
3692 .media-list
.item-link
.chevron-center
.item-inner
,
3693 li
.media-item
.chevron-center
.item-link
.item-inner
,
3694 li
.media-item
.item-link
.chevron-center
.item-inner
,
3695 li
.media-item
.chevron-center
.item-link
.item-inner
{
3696 padding-right: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3698 .media-list
.chevron-center
.item-title-row
,
3699 .media-list
.chevron-center
.item-title-row
,
3700 li
.media-item
.chevron-center
.item-title-row
,
3701 li
.media-item
.chevron-center
.item-title-row
{
3704 .list
.item-link
.item-inner:before
,
3705 .links-list
a:before
,
3706 .media-list
.item-link
.item-title-row:before
,
3707 li
.media-item
.item-link
.item-title-row:before
,
3708 .media-list
.chevron-center
.item-link
.item-inner:before
,
3709 .media-list
.chevron-center
.item-link
.item-inner:before
,
3710 .media-list
.item-link
.chevron-center
.item-inner:before
,
3711 li
.media-item
.chevron-center
.item-link
.item-inner:before
,
3712 li
.media-item
.chevron-center
.item-link
.item-inner:before
,
3713 li
.media-item
.item-link
.chevron-center
.item-inner:before
{
3714 font-family: 'framework7-core-icons';
3715 font-weight: normal
;
3718 letter-spacing: normal
;
3719 text-transform: none
;
3720 white-space: nowrap
;
3723 -webkit-font-smoothing: antialiased
;
3724 text-rendering: optimizeLegibility
;
3725 -moz-osx-font-smoothing: grayscale
;
3726 -moz-font-feature-settings: "liga";
3727 font-feature-settings: "liga";
3739 color: var
(--f7-list-chevron-icon-color
);
3740 pointer-events: none
;
3741 right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3742 content: 'chevron_right';
3744 .media-list
.chevron-center
.item-title-row:before
,
3745 .media-list
.chevron-center
.item-title-row:before
,
3746 li
.media-item
.chevron-center
.item-title-row:before
,
3747 li
.media-item
.chevron-center
.item-title-row:before
{
3750 .media-list
.item-link
.item-inner:before
,
3751 li
.media-item
.item-link
.item-inner:before
{
3754 .media-list
.item-link
.item-title-row:before
,
3755 li
.media-item
.item-link
.item-title-row:before
{
3758 .list-group
ul:after
,
3759 .list-group ul:before {
3760 z-index: 25 !important
;
3762 .list-group + .list-group ul:before {
3763 display: none
!important
;
3767 li
.list-group-title
{
3768 white-space: nowrap
;
3771 text-overflow: ellipsis
;
3776 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
3777 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3778 box-sizing: border-box
;
3780 align-items: center
;
3781 align-content: center
;
3783 li
.item-divider:after
,
3784 .item-divider:after
,
3785 li
.list-group-title:after
{
3786 display: none
!important
;
3791 height: var
(--f7-list-item-divider-height
);
3792 color: var
(--f7-list-item-divider-text-color
);
3793 font-size: var
(--f7-list-item-divider-font-size
);
3794 font-weight: var
(--f7-list-item-divider-font-weight
);
3795 background-color: var
(--f7-list-item-divider-bg-color
);
3796 line-height: var
(--f7-list-item-divider-line-height
);
3798 li
.item-divider:before
,
3799 .item-divider:before {
3802 background-color: var
(--f7-list-item-divider-border-color
);
3811 transform-origin: 50% 0%;
3812 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3814 li
.list-group-title
,
3815 .list li.list-group-title {
3817 position: -webkit-sticky
;
3822 height: var
(--f7-list-group-title-height
);
3823 color: var
(--f7-list-group-title-text-color
);
3824 font-size: var
(--f7-list-group-title-font-size
);
3825 font-weight: var
(--f7-list-group-title-font-weight
);
3826 background-color: var
(--f7-list-group-title-bg-color
);
3827 line-height: var
(--f7-list-group-title-line-height
);
3830 margin-left: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
3831 margin-right: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
3832 border-radius: var
(--f7-list-inset-border-radius
);
3833 --f7-safe-area-left: 0px;
3834 --f7-safe-area-right: 0px;
3836 .list.inset .block-title {
3841 border-radius: var
(--f7-list-inset-border-radius
);
3843 .list.inset ul:before {
3844 display: none
!important
;
3846 .list.inset ul:after {
3847 display: none
!important
;
3849 .list
.inset li
.swipeout:first-child
,
3850 .list.inset li:first-child > a {
3851 border-radius: var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
) 0 0;
3853 .list
.inset li
.swipeout:last-child
,
3854 .list.inset li:last-child > a {
3855 border-radius: 0 0 var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
);
3857 .list
.inset li
.swipeout:first-child:last-child
,
3858 .list.inset li:first-child:last-child > a {
3859 border-radius: var
(--f7-list-inset-border-radius
);
3861 @media (min-width: 768px) {
3862 .list.tablet-inset {
3863 margin-left: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
3864 margin-right: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
3865 border-radius: var
(--f7-list-inset-border-radius
);
3866 --f7-safe-area-left: 0px;
3867 --f7-safe-area-right: 0px;
3869 .list.tablet-inset .block-title {
3873 .list.tablet-inset ul {
3874 border-radius: var
(--f7-list-inset-border-radius
);
3876 .list.tablet-inset ul:before {
3877 display: none
!important
;
3879 .list.tablet-inset ul:after {
3880 display: none
!important
;
3882 .list.tablet-inset li:first-child > a {
3883 border-radius: var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
) 0 0;
3885 .list.tablet-inset li:last-child > a {
3886 border-radius: 0 0 var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
);
3888 .list.tablet-inset li:first-child:last-child > a {
3889 border-radius: var
(--f7-list-inset-border-radius
);
3894 --f7-list-chevron-icon-color: transparent
;
3895 --f7-list-chevron-icon-area: 0px;
3898 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + 30px);
3900 .ios
.item-link
.active-state
.item-inner:after
,
3901 .ios
.list-button
.active-state:after
,
3902 .ios .links-list a.active-state:after {
3903 background-color: transparent
;
3905 .ios
.links-list a
.active-state
,
3906 .ios
.list
.item-link
.active-state
,
3907 .ios .list .list-button.active-state {
3908 transition-duration: 0ms;
3910 .ios
.media-list
.item-title
,
3911 .ios li.media-item .item-title {
3915 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + 40px);
3917 .md .list .item-media {
3922 --f7-badge-text-color: #fff;
3923 --f7-badge-bg-color: #8e8e93;
3924 --f7-badge-padding: 0 4px;
3925 --f7-badge-in-icon-size: 16px;
3926 --f7-badge-in-icon-font-size: 10px;
3927 --f7-badge-font-weight: normal
;
3928 --f7-badge-font-size: 12px;
3931 --f7-badge-size: 20px;
3934 --f7-badge-size: 18px;
3937 display: inline-flex
;
3938 align-items: center
;
3939 align-content: center
;
3940 justify-content: center
;
3941 color: var
(--f7-badge-text-color
);
3942 background: var
(--f7-badge-bg-color
);
3944 box-sizing: border-box
;
3946 vertical-align: middle
;
3947 font-weight: var
(--f7-badge-font-weight
);
3948 font-size: var
(--f7-badge-font-size
);
3949 border-radius: var
(--f7-badge-size
);
3950 padding: var
(--f7-badge-padding
);
3951 height: var
(--f7-badge-size
);
3952 min-width: var
(--f7-badge-size
);
3956 .framework7-icons
.badge
,
3957 .material-icons .badge {
3962 font-family: var
(--f7-font-family
);
3963 --f7-badge-font-size: var
(--f7-badge-in-icon-font-size
);
3964 --f7-badge-size: var
(--f7-badge-in-icon-size
);
3966 .badge[class*="color-"] {
3967 --f7-badge-bg-color: var
(--f7-theme-color
);
3970 --f7-button-font-size: 14px;
3971 --f7-button-min-width: 32px;
3972 --f7-button-bg-color: transparent
;
3973 --f7-button-border-width: 0px;
3975 --f7-button-text-color: var(--f7-theme-color);
3976 --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
3977 --f7-button-border-color: var(--f7-theme-color);
3978 --f7-button-fill-text-color: #fff;
3979 --f7-button-fill-bg-color: var(--f7-theme-color);
3980 --f7-button-outline-border-color: var(--f7-theme-color);
3982 --f7-button-raised-box-shadow: 0 1px 3px rgba
(0, 0, 0, 0.12), 0 1px 2px rgba
(0,0,0,0.24);
3983 --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba
(0, 0, 0, 0.16), 0 3px 6px rgba
(0,0,0,0.23);
3984 --f7-segmented-raised-divider-color: rgba
(0, 0, 0, 0.1);
3987 --f7-button-height: 29px;
3988 --f7-button-padding-horizontal: 10px;
3989 --f7-button-border-radius: 5px;
3990 --f7-button-font-weight: 400;
3991 --f7-button-letter-spacing: 0;
3992 --f7-button-text-transform: none
;
3994 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
3995 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
3997 --f7-button-outline-border-width: 1px;
3998 --f7-button-large-height: 44px;
3999 --f7-button-large-font-size: 17px;
4000 --f7-button-small-height: 26px;
4001 --f7-button-small-font-size: 13px;
4002 --f7-button-small-font-weight: 600;
4003 --f7-button-small-text-transform: uppercase
;
4004 --f7-button-small-outline-border-width: 2px;
4007 --f7-button-height: 36px;
4008 --f7-button-padding-horizontal: 8px;
4009 --f7-button-border-radius: 4px;
4010 --f7-button-font-weight: 500;
4011 --f7-button-letter-spacing: 0.03em;
4012 --f7-button-text-transform: uppercase
;
4013 --f7-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
4015 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4017 --f7-button-outline-border-width: 2px;
4018 --f7-button-large-height: 48px;
4019 --f7-button-large-font-size: 14px;
4020 --f7-button-small-height: 28px;
4021 --f7-button-small-font-size: 13px;
4022 --f7-button-small-font-weight: 500;
4023 --f7-button-small-text-transform: uppercase
;
4024 --f7-button-small-outline-border-width: 2px;
4028 --f7-button-pressed-bg-color: rgba
(255, 255, 255, 0.1);
4031 -webkit-appearance: none
;
4032 -moz-appearance: none
;
4037 text-decoration: none
;
4040 -webkit-appearance: none
;
4041 -moz-appearance: none
;
4045 white-space: nowrap
;
4046 text-overflow: ellipsis
;
4049 font-family: inherit
;
4052 box-sizing: border-box
;
4053 vertical-align: middle
;
4054 border: var
(--f7-button-border-width
, 0px) solid var
(--f7-button-border-color
, var
(--f7-theme-color
));
4055 font-size: var
(--f7-button-font-size
);
4056 color: var
(--f7-button-text-color
, var
(--f7-theme-color
));
4057 height: var
(--f7-button-height
);
4058 line-height: calc
(var
(--f7-button-height
) - var
(--f7-button-border-width
, 0) * 2);
4059 padding: var
(--f7-button-padding-vertical
, 0) var
(--f7-button-padding-horizontal
);
4060 border-radius: var
(--f7-button-border-radius
);
4061 min-width: var
(--f7-button-min-width
);
4062 font-weight: var
(--f7-button-font-weight
);
4063 letter-spacing: var
(--f7-button-letter-spacing
);
4064 text-transform: var
(--f7-button-text-transform
);
4065 background-color: var
(--f7-button-bg-color
);
4066 box-shadow: var
(--f7-button-box-shadow
);
4068 .button.active-state {
4069 background-color: var
(--f7-button-pressed-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.15));
4070 color: var
(--f7-button-pressed-text-color
, var
(--f7-button-text-color
, var
(--f7-theme-color
)));
4072 input
[type
="submit"].button
,
4073 input
[type
="button"].button
{
4077 .button
> span
+ span
,
4085 .searchbar .button {
4086 color: var
(--f7-button-text-color
, var
(--f7-theme-color
));
4089 .ios
.button-round-ios
,
4090 .md .button-round-md {
4091 --f7-button-border-radius: var
(--f7-button-height
);
4094 .ios
.button-fill-ios
,
4095 .md
.button-fill-md
,
4097 .button.tab-link-active {
4098 --f7-button-bg-color: var
(--f7-button-fill-bg-color
, var
(--f7-theme-color
));
4099 --f7-button-text-color: var
(--f7-button-fill-text-color
, #fff);
4100 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
4103 .ios
.button-fill-ios
,
4104 .md .button-fill-md {
4105 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
);
4108 .button.tab-link-active {
4109 --f7-button-pressed-bg-color: var
(--f7-button-bg-color
);
4112 .ios
.button-outline-ios
,
4113 .md .button-outline-md {
4114 --f7-button-border-color: var
(--f7-button-outline-border-color
, var
(--f7-theme-color
));
4115 --f7-button-border-width: var
(--f7-button-outline-border-width
);
4118 .ios
.button-large-ios
,
4119 .md .button-large-md {
4120 --f7-button-height: var
(--f7-button-large-height
);
4121 --f7-button-font-size: var
(--f7-button-large-font-size
);
4124 .ios
.button-small-ios
,
4125 .md .button-small-md {
4126 --f7-button-outline-border-width: var
(--f7-button-small-outline-border-width
);
4127 --f7-button-height: var
(--f7-button-small-height
);
4128 --f7-button-font-size: var
(--f7-button-small-font-size
);
4129 --f7-button-font-weight: var
(--f7-button-small-font-weight
);
4130 --f7-button-text-transform: var
(--f7-button-small-text-transform
);
4132 .ios
.button-small
.button-fill
,
4133 .ios
.button-small-ios
.button-fill
,
4134 .ios .button-small.button-fill-ios {
4135 --f7-button-border-width: var
(--f7-button-small-outline-border-width
);
4136 --f7-button-pressed-text-color: var
(--f7-theme-color
);
4137 --f7-button-pressed-bg-color: transparent
;
4143 border-radius: var
(--f7-button-border-radius
);
4144 box-shadow: var
(--f7-button-box-shadow
);
4153 .segmented .button:first-child {
4154 border-radius: var
(--f7-button-border-radius
) 0 0 var
(--f7-button-border-radius
);
4156 .segmented .button:not(.button-outline):first-child {
4159 .segmented .button.button-outline:nth-child(n + 2) {
4162 .segmented .button:last-child {
4163 border-radius: 0 var
(--f7-button-border-radius
) var
(--f7-button-border-radius
) 0;
4165 .segmented .button-round:first-child {
4166 border-radius: var
(--f7-button-height
) 0 0 var
(--f7-button-height
);
4168 .segmented .button-round:last-child {
4169 border-radius: 0 var
(--f7-button-height
) var
(--f7-button-height
) 0;
4171 .segmented .button:first-child:last-child {
4172 border-radius: var
(--f7-button-border-radius
);
4175 .ios
.segmented-round-ios
,
4176 .md .segmented-round-md {
4177 border-radius: var
(--f7-button-height
);
4180 .ios
.segmented-raised-ios
,
4181 .md .segmented-raised-md {
4182 box-shadow: var
(--f7-button-raised-box-shadow
);
4184 .segmented-raised
.button:not
(.button-outline
),
4185 .ios
.segmented-raised-ios
.button:not
(.button-outline
),
4186 .md .segmented-raised-md .button:not(.button-outline) {
4187 border-left: 1px solid var
(--f7-segmented-raised-divider-color
);
4190 .ios
.button-raised-ios
,
4191 .md .button-raised-md {
4192 --f7-button-box-shadow: var
(--f7-button-raised-box-shadow
);
4194 .button-raised
.active-state
,
4195 .ios
.button-raised-ios
.active-state
,
4196 .md .button-raised-md.active-state {
4197 --f7-button-box-shadow: var
(--f7-button-raised-pressed-box-shadow
);
4199 .subnavbar .segmented {
4203 transition-duration: 100ms;
4206 .ios .button-fill-ios {
4207 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
, var
(--f7-theme-color-tint
));
4210 .ios .button-small-ios {
4211 transition-duration: 200ms;
4214 transition-duration: 300ms;
4215 transform: translate3d
(0, 0, 0);
4218 .md .button-fill-md {
4219 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
, var
(--f7-theme-color-shade
));
4221 /* === Touch Ripple === */
4223 --f7-touch-ripple-black: rgba
(0, 0, 0, 0.1);
4224 --f7-touch-ripple-white: rgba
(255, 255, 255, 0.3);
4225 --f7-touch-ripple-color: var
(--f7-touch-ripple-black
);
4228 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
4241 .speed-dial-buttons a {
4242 -webkit-user-select: none
;
4243 -moz-user-select: none
;
4244 -ms-user-select: none
;
4250 position: absolute
!important
;
4252 pointer-events: none
;
4257 transform: translate3d
(0px, 0px, 0) scale
(0);
4258 transition-duration: 1400ms;
4259 background-color: var
(--f7-touch-ripple-color
);
4260 will-change: transform
, opacity
;
4262 .ripple-wave.ripple-wave-fill {
4263 transition-duration: 300ms;
4266 .ripple-wave.ripple-wave-out {
4267 transition-duration: 600ms;
4270 .button-fill
.ripple-wave
,
4271 .picker-calendar-day
.ripple-wave
,
4272 .menu .ripple-wave {
4275 .checkbox
.ripple-wave
,
4276 .radio
.ripple-wave
,
4277 .data-table .sortable-cell .ripple-wave {
4280 [class
*="ripple-color-"] {
4281 --f7-touch-ripple-color: var
(--f7-theme-color-ripple-color
);
4285 display: inline-block
;
4286 vertical-align: middle
;
4287 background-size: 100% auto
;
4288 background-position: center
;
4289 background-repeat: no-repeat
;
4295 .icon-forward:after
,
4297 font-family: 'framework7-core-icons';
4298 font-weight: normal
;
4301 letter-spacing: normal
;
4302 text-transform: none
;
4303 white-space: nowrap
;
4306 -webkit-font-smoothing: antialiased
;
4307 text-rendering: optimizeLegibility
;
4308 -moz-osx-font-smoothing: grayscale
;
4309 -moz-font-feature-settings: "liga";
4310 font-feature-settings: "liga";
4317 .icon[class*="color-"] {
4318 color: var
(--f7-theme-color
);
4328 .ios
.icon-back:after
,
4329 .ios
.icon-prev:after
,
4330 .ios
.icon-forward:after
,
4331 .ios .icon-next:after {
4332 line-height: inherit
;
4334 .ios
.icon-prev:after
,
4335 .ios .icon-next:after {
4338 .ios .item-media .icon {
4341 .ios .item-media .f7-icons {
4346 .ios
.icon-back:after
,
4347 .ios .icon-prev:after {
4348 content: 'chevron_left_ios';
4350 .ios
.icon-forward:after
,
4351 .ios .icon-next:after {
4352 content: 'chevron_right_ios';
4361 .md
.icon-back:after
,
4362 .md
.icon-forward:after
,
4363 .md
.icon-next:after
,
4364 .md .icon-prev:after {
4367 .md .item-media .icon {
4370 .md .item-media .material-icons {
4375 .md .icon-back:after {
4376 content: 'arrow_left_md';
4378 .md .icon-forward:after {
4379 content: 'arrow_right_md';
4381 .md .icon-next:after {
4382 content: 'chevron_right_md';
4384 .md .icon-prev:after {
4385 content: 'chevron_left_md';
4387 .custom-modal-backdrop {
4390 .custom-modal-backdrop
,
4395 .preloader-backdrop
,
4402 background: rgba
(0, 0, 0, 0.4);
4406 transition-duration: 400ms;
4408 .custom-modal-backdrop
.not-animated
,
4409 .actions-backdrop
.not-animated
,
4410 .dialog-backdrop
.not-animated
,
4411 .popover-backdrop
.not-animated
,
4412 .popup-backdrop
.not-animated
,
4413 .preloader-backdrop
.not-animated
,
4414 .sheet-backdrop.not-animated {
4415 transition-duration: 0ms;
4417 .custom-modal-backdrop
.backdrop-in
,
4418 .actions-backdrop
.backdrop-in
,
4419 .dialog-backdrop
.backdrop-in
,
4420 .popover-backdrop
.backdrop-in
,
4421 .popup-backdrop
.backdrop-in
,
4422 .preloader-backdrop
.backdrop-in
,
4423 .sheet-backdrop.backdrop-in {
4424 visibility: visible
;