3 * Full featured mobile HTML framework for building iOS & Android apps
4 * http://framework7.io/
6 * Copyright 2014-2019 Vladimir Kharlampidi
8 * Released under the MIT License
10 * Released on: July 19, 2019
13 /*====================
15 ==================== */
17 --f7-theme-color: #007aff;
18 --f7-theme-color-rgb: 0, 122, 255;
19 --f7-theme-color-shade: #0066d6;
20 --f7-theme-color-tint: #298fff;
21 --f7-safe-area-left: 0px;
22 --f7-safe-area-right: 0px;
23 --f7-safe-area-top: 0px;
24 --f7-safe-area-bottom: 0px;
25 --f7-safe-area-outer-left: 0px;
26 --f7-safe-area-outer-right: 0px;
27 --f7-device-pixel-ratio: 1;
29 @supports (left: env
(safe-area-inset-left
)) {
31 --f7-safe-area-top: env
(safe-area-inset-top
);
32 --f7-safe-area-bottom: env
(safe-area-inset-bottom
);
36 :root
.safe-area-left
,
41 --f7-safe-area-left: env
(safe-area-inset-left
);
42 --f7-safe-area-outer-left: env
(safe-area-inset-left
);
44 :root
.ios-right-edge
,
46 :root
.safe-area-right
,
51 --f7-safe-area-right: env
(safe-area-inset-right
);
52 --f7-safe-area-outer-right: env
(safe-area-inset-right
);
55 :root
.no-safe-area-left
,
57 :root
.no-ios-left-edge
{
58 --f7-safe-area-left: 0px;
59 --f7-safe-area-outer-left: 0px;
62 :root
.no-safe-area-right
,
64 :root
.no-ios-right-edge
{
65 --f7-safe-area-right: 0px;
66 --f7-safe-area-outer-right: 0px;
69 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
71 --f7-device-pixel-ratio: 2;
74 @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
76 --f7-device-pixel-ratio: 3;
79 /*====================
81 ==================== */
86 --f7-font-family: -apple-system
, SF Pro Text
, SF UI Text
, system-ui
, Helvetica Neue
, Helvetica
, Arial
, sans-serif
;
87 --f7-text-color: #000;
88 --f7-line-height: 1.4;
92 --f7-text-color: #fff;
95 --f7-font-family: Roboto
, system-ui
, Noto
, Helvetica
, Arial
, sans-serif
;
96 --f7-text-color: #212121;
97 --f7-line-height: 1.5;
101 --f7-text-color: rgba
(255, 255, 255, 0.87);
104 --f7-font-family: -apple-system
, system-ui
, Helvetica
, Arial
, sans-serif
;
105 --f7-text-color: #000;
106 --f7-line-height: 1.5;
110 --f7-text-color: #fff;
112 /*====================
114 ==================== */
117 --f7-bars-link-color: var(--f7-theme-color);
119 --f7-bars-bg-image: none
;
120 --f7-bars-bg-color: #f7f7f8;
121 --f7-bars-bg-color-rgb: 247, 247, 248;
122 --f7-bars-text-color: #000;
123 --f7-bars-shadow-bottom-image: linear-gradient
(to bottom
, rgba
(0, 0, 0, 0.25) 0%, rgba
(0, 0, 0, 0.08) 40%, rgba
(0, 0, 0, 0.04) 50%, rgba
(0, 0, 0, 0) 90%, rgba
(0, 0, 0, 0) 100%);
124 --f7-bars-shadow-top-image: linear-gradient
(to top
, rgba
(0, 0, 0, 0.25) 0%, rgba
(0, 0, 0, 0.08) 40%, rgba
(0, 0, 0, 0.04) 50%, rgba
(0, 0, 0, 0) 90%, rgba
(0, 0, 0, 0) 100%);
127 --f7-bars-bg-color: #1b1b1b;
128 --f7-bars-text-color: #fff;
131 --f7-bars-border-color: #c4c4c4;
135 --f7-bars-border-color: #282829;
138 --f7-bars-border-color: transparent
;
141 --f7-bars-border-color: rgba
(0, 0, 0, 0.2);
145 --f7-bars-border-color: #282829;
147 /*====================
149 ==================== */
150 .text-color-primary {
151 --f7-theme-color-text-color: var
(--f7-theme-color
);
154 --f7-theme-color-bg-color: var
(--f7-theme-color
);
156 .border-color-primary {
157 --f7-theme-color-border-color: var
(--f7-theme-color
);
159 .ripple-color-primary {
160 --f7-theme-color-ripple-color: rgba
(var
(--f7-theme-color-rgb
), 0.3);
163 --f7-color-red: #ff3b30;
164 --f7-color-red-rgb: 255, 59, 48;
165 --f7-color-red-shade: #ff1407;
166 --f7-color-red-tint: #ff6259;
167 --f7-color-green: #4cd964;
168 --f7-color-green-rgb: 76, 217, 100;
169 --f7-color-green-shade: #2cd048;
170 --f7-color-green-tint: #6ee081;
171 --f7-color-blue: #2196f3;
172 --f7-color-blue-rgb: 33, 150, 243;
173 --f7-color-blue-shade: #0c82df;
174 --f7-color-blue-tint: #48a8f5;
175 --f7-color-pink: #ff2d55;
176 --f7-color-pink-rgb: 255, 45, 85;
177 --f7-color-pink-shade: #ff0434;
178 --f7-color-pink-tint: #ff5676;
179 --f7-color-yellow: #ffcc00;
180 --f7-color-yellow-rgb: 255, 204, 0;
181 --f7-color-yellow-shade: #d6ab00;
182 --f7-color-yellow-tint: #ffd429;
183 --f7-color-orange: #ff9500;
184 --f7-color-orange-rgb: 255, 149, 0;
185 --f7-color-orange-shade: #d67d00;
186 --f7-color-orange-tint: #ffa629;
187 --f7-color-purple: #9c27b0;
188 --f7-color-purple-rgb: 156, 39, 176;
189 --f7-color-purple-shade: #7e208f;
190 --f7-color-purple-tint: #b92fd1;
191 --f7-color-deeppurple: #673ab7;
192 --f7-color-deeppurple-rgb: 103, 58, 183;
193 --f7-color-deeppurple-shade: #563098;
194 --f7-color-deeppurple-tint: #7c52c8;
195 --f7-color-lightblue: #5ac8fa;
196 --f7-color-lightblue-rgb: 90, 200, 250;
197 --f7-color-lightblue-shade: #32bbf9;
198 --f7-color-lightblue-tint: #82d5fb;
199 --f7-color-teal: #009688;
200 --f7-color-teal-rgb: 0, 150, 136;
201 --f7-color-teal-shade: #006d63;
202 --f7-color-teal-tint: #00bfad;
203 --f7-color-lime: #cddc39;
204 --f7-color-lime-rgb: 205, 220, 57;
205 --f7-color-lime-shade: #bac923;
206 --f7-color-lime-tint: #d6e25c;
207 --f7-color-deeporange: #ff6b22;
208 --f7-color-deeporange-rgb: 255, 107, 34;
209 --f7-color-deeporange-shade: #f85200;
210 --f7-color-deeporange-tint: #ff864b;
211 --f7-color-gray: #8e8e93;
212 --f7-color-gray-rgb: 142, 142, 147;
213 --f7-color-gray-shade: #79797f;
214 --f7-color-gray-tint: #a3a3a7;
215 --f7-color-white: #ffffff;
216 --f7-color-white-rgb: 255, 255, 255;
217 --f7-color-white-shade: #ebebeb;
218 --f7-color-white-tint: #ffffff;
219 --f7-color-black: #000000;
220 --f7-color-black-rgb: 0, 0, 0;
221 --f7-color-black-shade: #000000;
222 --f7-color-black-tint: #141414;
225 --f7-theme-color: #ff3b30;
226 --f7-theme-color-rgb: 255, 59, 48;
227 --f7-theme-color-shade: #ff1407;
228 --f7-theme-color-tint: #ff6259;
231 --f7-theme-color: #4cd964;
232 --f7-theme-color-rgb: 76, 217, 100;
233 --f7-theme-color-shade: #2cd048;
234 --f7-theme-color-tint: #6ee081;
237 --f7-theme-color: #2196f3;
238 --f7-theme-color-rgb: 33, 150, 243;
239 --f7-theme-color-shade: #0c82df;
240 --f7-theme-color-tint: #48a8f5;
243 --f7-theme-color: #ff2d55;
244 --f7-theme-color-rgb: 255, 45, 85;
245 --f7-theme-color-shade: #ff0434;
246 --f7-theme-color-tint: #ff5676;
248 .color-theme-yellow {
249 --f7-theme-color: #ffcc00;
250 --f7-theme-color-rgb: 255, 204, 0;
251 --f7-theme-color-shade: #d6ab00;
252 --f7-theme-color-tint: #ffd429;
254 .color-theme-orange {
255 --f7-theme-color: #ff9500;
256 --f7-theme-color-rgb: 255, 149, 0;
257 --f7-theme-color-shade: #d67d00;
258 --f7-theme-color-tint: #ffa629;
260 .color-theme-purple {
261 --f7-theme-color: #9c27b0;
262 --f7-theme-color-rgb: 156, 39, 176;
263 --f7-theme-color-shade: #7e208f;
264 --f7-theme-color-tint: #b92fd1;
266 .color-theme-deeppurple {
267 --f7-theme-color: #673ab7;
268 --f7-theme-color-rgb: 103, 58, 183;
269 --f7-theme-color-shade: #563098;
270 --f7-theme-color-tint: #7c52c8;
272 .color-theme-lightblue {
273 --f7-theme-color: #5ac8fa;
274 --f7-theme-color-rgb: 90, 200, 250;
275 --f7-theme-color-shade: #32bbf9;
276 --f7-theme-color-tint: #82d5fb;
279 --f7-theme-color: #009688;
280 --f7-theme-color-rgb: 0, 150, 136;
281 --f7-theme-color-shade: #006d63;
282 --f7-theme-color-tint: #00bfad;
285 --f7-theme-color: #cddc39;
286 --f7-theme-color-rgb: 205, 220, 57;
287 --f7-theme-color-shade: #bac923;
288 --f7-theme-color-tint: #d6e25c;
290 .color-theme-deeporange {
291 --f7-theme-color: #ff6b22;
292 --f7-theme-color-rgb: 255, 107, 34;
293 --f7-theme-color-shade: #f85200;
294 --f7-theme-color-tint: #ff864b;
297 --f7-theme-color: #8e8e93;
298 --f7-theme-color-rgb: 142, 142, 147;
299 --f7-theme-color-shade: #79797f;
300 --f7-theme-color-tint: #a3a3a7;
303 --f7-theme-color: #ffffff;
304 --f7-theme-color-rgb: 255, 255, 255;
305 --f7-theme-color-shade: #ebebeb;
306 --f7-theme-color-tint: #ffffff;
309 --f7-theme-color: #000000;
310 --f7-theme-color-rgb: 0, 0, 0;
311 --f7-theme-color-shade: #000000;
312 --f7-theme-color-tint: #141414;
315 --f7-theme-color: #ff3b30;
316 --f7-theme-color-rgb: 255, 59, 48;
317 --f7-theme-color-shade: #ff1407;
318 --f7-theme-color-tint: #ff6259;
321 --f7-theme-color-text-color: #ff3b30;
324 --f7-theme-color-bg-color: #ff3b30;
327 --f7-theme-color-border-color: #ff3b30;
331 --f7-theme-color-ripple-color: rgba
(255, 59, 48, 0.3);
334 --f7-theme-color: #4cd964;
335 --f7-theme-color-rgb: 76, 217, 100;
336 --f7-theme-color-shade: #2cd048;
337 --f7-theme-color-tint: #6ee081;
340 --f7-theme-color-text-color: #4cd964;
343 --f7-theme-color-bg-color: #4cd964;
345 .border-color-green {
346 --f7-theme-color-border-color: #4cd964;
350 --f7-theme-color-ripple-color: rgba
(76, 217, 100, 0.3);
353 --f7-theme-color: #2196f3;
354 --f7-theme-color-rgb: 33, 150, 243;
355 --f7-theme-color-shade: #0c82df;
356 --f7-theme-color-tint: #48a8f5;
359 --f7-theme-color-text-color: #2196f3;
362 --f7-theme-color-bg-color: #2196f3;
365 --f7-theme-color-border-color: #2196f3;
369 --f7-theme-color-ripple-color: rgba
(33, 150, 243, 0.3);
372 --f7-theme-color: #ff2d55;
373 --f7-theme-color-rgb: 255, 45, 85;
374 --f7-theme-color-shade: #ff0434;
375 --f7-theme-color-tint: #ff5676;
378 --f7-theme-color-text-color: #ff2d55;
381 --f7-theme-color-bg-color: #ff2d55;
384 --f7-theme-color-border-color: #ff2d55;
388 --f7-theme-color-ripple-color: rgba
(255, 45, 85, 0.3);
391 --f7-theme-color: #ffcc00;
392 --f7-theme-color-rgb: 255, 204, 0;
393 --f7-theme-color-shade: #d6ab00;
394 --f7-theme-color-tint: #ffd429;
397 --f7-theme-color-text-color: #ffcc00;
400 --f7-theme-color-bg-color: #ffcc00;
402 .border-color-yellow {
403 --f7-theme-color-border-color: #ffcc00;
405 .ripple-color-yellow
,
407 --f7-theme-color-ripple-color: rgba
(255, 204, 0, 0.3);
410 --f7-theme-color: #ff9500;
411 --f7-theme-color-rgb: 255, 149, 0;
412 --f7-theme-color-shade: #d67d00;
413 --f7-theme-color-tint: #ffa629;
416 --f7-theme-color-text-color: #ff9500;
419 --f7-theme-color-bg-color: #ff9500;
421 .border-color-orange {
422 --f7-theme-color-border-color: #ff9500;
424 .ripple-color-orange
,
426 --f7-theme-color-ripple-color: rgba
(255, 149, 0, 0.3);
429 --f7-theme-color: #9c27b0;
430 --f7-theme-color-rgb: 156, 39, 176;
431 --f7-theme-color-shade: #7e208f;
432 --f7-theme-color-tint: #b92fd1;
435 --f7-theme-color-text-color: #9c27b0;
438 --f7-theme-color-bg-color: #9c27b0;
440 .border-color-purple {
441 --f7-theme-color-border-color: #9c27b0;
443 .ripple-color-purple
,
445 --f7-theme-color-ripple-color: rgba
(156, 39, 176, 0.3);
448 --f7-theme-color: #673ab7;
449 --f7-theme-color-rgb: 103, 58, 183;
450 --f7-theme-color-shade: #563098;
451 --f7-theme-color-tint: #7c52c8;
453 .text-color-deeppurple {
454 --f7-theme-color-text-color: #673ab7;
456 .bg-color-deeppurple {
457 --f7-theme-color-bg-color: #673ab7;
459 .border-color-deeppurple {
460 --f7-theme-color-border-color: #673ab7;
462 .ripple-color-deeppurple
,
464 --f7-theme-color-ripple-color: rgba
(103, 58, 183, 0.3);
467 --f7-theme-color: #5ac8fa;
468 --f7-theme-color-rgb: 90, 200, 250;
469 --f7-theme-color-shade: #32bbf9;
470 --f7-theme-color-tint: #82d5fb;
472 .text-color-lightblue {
473 --f7-theme-color-text-color: #5ac8fa;
475 .bg-color-lightblue {
476 --f7-theme-color-bg-color: #5ac8fa;
478 .border-color-lightblue {
479 --f7-theme-color-border-color: #5ac8fa;
481 .ripple-color-lightblue
,
483 --f7-theme-color-ripple-color: rgba
(90, 200, 250, 0.3);
486 --f7-theme-color: #009688;
487 --f7-theme-color-rgb: 0, 150, 136;
488 --f7-theme-color-shade: #006d63;
489 --f7-theme-color-tint: #00bfad;
492 --f7-theme-color-text-color: #009688;
495 --f7-theme-color-bg-color: #009688;
498 --f7-theme-color-border-color: #009688;
502 --f7-theme-color-ripple-color: rgba
(0, 150, 136, 0.3);
505 --f7-theme-color: #cddc39;
506 --f7-theme-color-rgb: 205, 220, 57;
507 --f7-theme-color-shade: #bac923;
508 --f7-theme-color-tint: #d6e25c;
511 --f7-theme-color-text-color: #cddc39;
514 --f7-theme-color-bg-color: #cddc39;
517 --f7-theme-color-border-color: #cddc39;
521 --f7-theme-color-ripple-color: rgba
(205, 220, 57, 0.3);
524 --f7-theme-color: #ff6b22;
525 --f7-theme-color-rgb: 255, 107, 34;
526 --f7-theme-color-shade: #f85200;
527 --f7-theme-color-tint: #ff864b;
529 .text-color-deeporange {
530 --f7-theme-color-text-color: #ff6b22;
532 .bg-color-deeporange {
533 --f7-theme-color-bg-color: #ff6b22;
535 .border-color-deeporange {
536 --f7-theme-color-border-color: #ff6b22;
538 .ripple-color-deeporange
,
540 --f7-theme-color-ripple-color: rgba
(255, 107, 34, 0.3);
543 --f7-theme-color: #8e8e93;
544 --f7-theme-color-rgb: 142, 142, 147;
545 --f7-theme-color-shade: #79797f;
546 --f7-theme-color-tint: #a3a3a7;
549 --f7-theme-color-text-color: #8e8e93;
552 --f7-theme-color-bg-color: #8e8e93;
555 --f7-theme-color-border-color: #8e8e93;
559 --f7-theme-color-ripple-color: rgba
(142, 142, 147, 0.3);
562 --f7-theme-color: #ffffff;
563 --f7-theme-color-rgb: 255, 255, 255;
564 --f7-theme-color-shade: #ebebeb;
565 --f7-theme-color-tint: #ffffff;
568 --f7-theme-color-text-color: #ffffff;
571 --f7-theme-color-bg-color: #ffffff;
573 .border-color-white {
574 --f7-theme-color-border-color: #ffffff;
578 --f7-theme-color-ripple-color: rgba
(255, 255, 255, 0.3);
581 --f7-theme-color: #000000;
582 --f7-theme-color-rgb: 0, 0, 0;
583 --f7-theme-color-shade: #000000;
584 --f7-theme-color-tint: #141414;
587 --f7-theme-color-text-color: #000000;
590 --f7-theme-color-bg-color: #000000;
592 .border-color-black {
593 --f7-theme-color-border-color: #000000;
597 --f7-theme-color-ripple-color: rgba
(0, 0, 0, 0.3);
600 font-family: 'framework7-core-icons';
601 src: url
("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAz4ABAAAAAAGNgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAM3AAAABkAAAAciZuB7UdERUYAAArUAAAAIwAAACQAfQBXR1BPUwAADKwAAAAuAAAANuAY7+xHU1VCAAAK+AAAAbMAAAQuAxQJ5U9TLzIAAAHcAAAASgAAAGBRKF+WY21hcAAAAogAAACIAAABYt6F0cBjdnQgAAADEAAAAAQAAAAEABEBRGdhc3AAAArMAAAACAAAAAj//wADZ2x5ZgAAA6gAAAR1AAAJzOg6B0doZWFkAAABbAAAADAAAAA2FLiY/WhoZWEAAAGcAAAAIAAAACQHgQM9aG10eAAAAigAAABeAAABJC9JAAJsb2NhAAADFAAAAJQAAACUReRIiG1heHAAAAG8AAAAHwAAACAAjwBLbmFtZQAACCAAAAFSAAAC2WG9Sh5wb3N0AAAJdAAAAVYAAAJ2B5LxL3jaY2BkYGAA4r3NMlLx/DZfGbiZGEDgxtw1DjD6/49/vSxpTJ+BXA4GsDQARmkM0njaY2BkYGD6/K+XQY8l7f8PBgaWNAagCArwBACRVQXFeNpjYGRgYPBkkGJgYQABJiBmZACJOTDogQQADbgA2wB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPabPjMUwNYwHwEoUGMQAQ7UMZAAAeNpj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wKxExCfBWIJoNzZ/z8Y3YBsF6g4kM2UBpFjBNJMQD0Mu4FsY4jZTGch5jAZQ8QBlR0UZwAAeNpjYGBgZoBgGQZGBhCIAfIYwXwWBgcgzcPAwcAEZCsw6DJYMsQzVP3/DxQF8QyAvMT///8//n/9/9X/G/6vh5oAB4xsDHAhRiYgwcSApgBiNRywMDCwsrFzcHJx8/DyMRAD+BkEBIWERUTFxCUkpaRlZOXkFRSVlFVU1dQ1NBkGAwAAxH4T6AARAUQAAAAqACoAKgA0AD4ASABSAFwAZgBwAHoAhACOAJgAogCsALYAwADKANQA3gDoAPIA/AEGARABGgEkAS4BOAFCAUwBVgFgAWoBdAF+AYgBkgGcAaYBsgHeAgACKgI8AlICZAKEApQCpALWAuwC/gMeAzADQgNgA3IDlgO0A8QD6gP8BBYEKgRKBFwEbgSWBKwExgTmeNrtVc9vG0UUfm8de9y43rVje204lNjZ7AYBKcna3lKcxCIJhwgCqhIIuTSpKp8CaoRsbnZujSosI5QqitVbpCLBKT8EUiUSwyW9mEoWB4RyChKpEJxyoVKz5s2sDXH6H6BKM34z387OfvO9741BgiAAbOAsuIDB4BbC5cw264K/hrc87sPMtkuiIWy5OOzm8Dbz4NPMNnLcDJpBwwz2BVc/y+Vw1v4miCbthtRqotMoOMTHz7Hn2P8ek85gLkLfkAQMXdQv4Ps4TxWmQASiAD0JT1gdTif1YTXsSehJt2UoGLWMr2cymZnMvaWpqaUpHPffkuVleRmzmZmRkZkPpjj8RL7l56DDofkDmvSRHoD+hCLxncbQ0JPp4ZdQRQMRf/P1qr79fZ8a9x0p25J05FN7fXv7HD1SHM7NY6zhfboHXqBdosxIGZ6+BN9DjYRZNMFZElvMrugrbHBscnHxzo0B9u3CxMTCeHlFL0XYwOKdxcXJ0UE2vjA+viB4gQ57dF43QIjRltZeoaBVq5gWAVrcT7CKZfDSVyNxvijKsGo/rGj1ulb5NenE1lrw4494k+9nYRQNq4KKZtcr2mwrAjafkBavkBZ0n1npMST6YZKUy3sZdTfSyenMe3v8/EfKI3QdcU1o7ijBvxGGA4ezRWQM62BTK5W07+i32N/5PEVUo6z1uL9Y0oSOdrkrJ52Aj+e336AFUYsyahlSryYFerTerp6AJGUP0gft9qb9k326vo4uHEbX+vofB1b7kfX08F/YPuXLntWMC0b3r4VVrpP5RY0HvEICtjXL4ruYBQ9NomyIVuPL2uGyRhiFvnecNUv4FuoQoBGXS2gl3GOlMSmzVaZSl1VvPu9FXeYTjsksn2fizDCPdXqf/3fACMYj7lQ8gnXbxPqJaW6YpuBcwxjlhXTrR64rxpoQe/w4VnMC8Wj+DR/Bz/gayACUuaiqoIzExEpHpxa6A4Huj90hz1W/rFz8/Eul26d85UWWVS76ZecM1/Ft4sC9Ri5ixqZIDOoigONxUHGCcuen6gNK3hmHe1r+/nMuNKe9bk1PfzK9NTc6Oje68mFo7hLNpq2hq2Mc6dSLO4yKTNiL8cLrEEuV19tSFQqEdfIkEcgbDs/rm1qxqIk6LEs5PCElQwDJAJELeBJI52k7adfe3bWh+WIu125ZhJ2dJuzgxhkQOjVPIfcqQuz4OFbDluLtmsrhp+RXQCaEE7QwV6lo7YbvnZnwd+yaVJVq3FMWec+8gL/Xj+2afb8smaci7e29L8EDvMF1Sjue+q8gH3TaaDDgXfWGqQdUx1XO+5N0r+nCu8K6FpqPbvZc+x7DIpy/Y/jtYdDNouXzOE+hUGjlvTkv1SUdLvC8k6YmF7UvETpTnY21u43G3bW1YrpIrcR/X8WBRsP+pYH3SlaxaJXE7/n6E9+Mp+JGnded/RCvVLDMh0lRfy7OTzKJH68N0jiYcqqDdy6W00mZ5Ipo53ULOPbiNelc6mSs24zd9jqWwmvP6PYPnHjkAAAAAHjarZC9TsMwFIWP+yfBgBjI7rGtmsjx0p+RSl26IIbsITWt1Sau3EhVxcuwsTGy8RQsTOx9C65dDwwdGBrpyl+Oz7XPNYAbvIPh9HXxGJghwlvgBq7xFbiJlN0HbiFir4HbuGXfgTuIGhE5WeuK/h58l2OGPl4CN3CHz8BNPOEncAt9Vgdug7OPwB3Sj5jCYIsDLDSWWKEGp8wFerRKCKQYY0CcYYMcC3KVVJaUOblzIqeXdIb2u5ia7cHq5arm3aLHpUjHA55t8oUuteXzVW43ebnVC3I+U7NrVdhTCIs1hojpaseKSHuusCOrzUu1N3Y9jAtjVawLU5F81vvXMPNi7VdL8yk/VUJzcUyo/h/h5JcYkSp9nd4GM1PVM2OXistE8Ak/G5V0OYpl7J7jEoNn5LO0r72PUxaXJvGrmw2ZsjttKi5Emggh+AUu/QVMMIYbAAB42m2QCU/CQBSEZ8ADECzIJXj+FuN937dpartKI3TJdjn+vNGFUqGJmzTpvm/evNmHFMbn5xvEf+fIfEQKaRRRRgVV1FDHKhpoYg3r2MEu9rCPAxwa7TFOcIoznOMCl7jCNW5wizvc4wGPeMIzXvCKN6aY5hznucBFZphljkvMs8BlWiyyxBWWWWGVNda5ygabXOM6N7jJLW7nQuEot2X7Miy5LdFXMrCV/9nSo0p2AjueFbO2+NDmXnCUkoP4tmSo+/Uuh+a/mFAak0LCNj+La4HU/ofvOto3FbctQzHqsCLzd6m17BjLrHI8X45IOe725CCwnZ6SylkMpRqHCAd+Vyg7EENt/QWKNLm4r9ctTN4UgdIUTCr52RGWJ9pCC1vJXuDNzOgq0c9OmFlGVys7yjybcbyAqWmUxwiKyT2blSWmGMVyZBbzzPiFpl5JdkbevxMrvisAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQYPIJsFLMYAAA12ANUAeNp1UklOAkEUfUV3Ao4goHSUQQbBIM6z4qxoPIMbNhoT4sIQD+DCMxjjOVx6BuMRjAtvge9XAz2FdLqr+r1X/7/6/0MBGEYWNahWs/2ACEwi6HQgjGrd3zWJwf4jZ+o1AmX8IowknkLt0LdhGiWjDoP4PBrYQBR5PlmUuZvgWuSTRZp/aSSoGHfxeViYQooKm13CmIudYY7JPhfFLK7xiDd84keZqqwa6lY9q3f1ob7UH66oTvGd0+czvugxlDSe5+6U0bxKJ5NbtxXQJbSzjE9X5z29uhJyPs1CQON2ZxErYIW6Qb5sxXlA4a/gItdBMYTf7fJxTOvuVHw+V9mBQRnOMBo4a/ta6zLBrAcBplfDZYwEoonDPc5ksJoyX1X2/4Iekzp6kW9Ua0pUJfpeDrkbpJD4xxjy8ILJdK/zljKtFn1bdBXTe9tBnHqJnexnkRMnrFWR8aWCztQ6/CYzxRhdkB4eJlJjH284yS94xT5jJPX5OG/t7cURK1TmuRwVkiXHr9Rlx4dnuFbopMrKuWPZGWv6vg4q971kNSWHM1nbdNZD7IqI0zh3GZ238A+0lkTEAHjaY2BkYGDgYpBjMGFgzEksyWPgYGABijD8/88AkmEszqxKhYp9YIADAMCOBtEAAHjaY2BgYGQAghsJmjlgeu4aBxgNAELpBpEAAAA=") format
("woff");
606 font-family: 'framework7-skeleton';
607 src: url
("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAYQAA0AAAAAEcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAF9AAAABkAAAAciVvoDU9TLzIAAAGcAAAASwAAAGBRtV1jY21hcAAAAfwAAAC8AAABamglddJjdnQgAAACuAAAAAQAAAAEABEBRGdhc3AAAAXsAAAACAAAAAj //wADZ2x5ZgAAA2wAAACUAAAJjHCzhiRoZWFkAAABMAAAAC4AAAA2ERr/HWhoZWEAAAFgAAAAGgAAACQC8ADFaG10eAAAAegAAAATAAAAtAMAABFsb2NhAAACvAAAAK4AAACuaNBmhG1heHAAAAF8AAAAHwAAACAAmgA5bmFtZQAABAAAAAFQAAACuLf6wytwb3N0AAAFUAAAAJkAAADOCKMIc3jaY2BkYGAA4lUx8ibx/DZfGbiZGEDgRu39AAT9/wAjA+MBIJeDASwNACBICpsAAHjaY2BkYGA88P8Agx6QAQSMYIQCWABQZgK3AAB42mNgZGBgCGPgYGBiAAEQycgAEnNg0AMJAAANJwDUAHjaY2BhZGCcwMDKwMDow5jGwMDgDqW/MkgytDAwMDGwcjLAACMDEghIc01haGBQYKhlPPD/AIMe4wEGB5gaxgNAHgNQjhEA6dgLvQB42mNkYBBkAAJGKB4KAAAOfQAVAHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMSgxWDNEMsQz1D7/z9QXIFBjUGHwRHIT/z////j/w/+3/9/6//N/zeg5iABRjYGuCAjE5BgQlcAdAILK5DBxs7BycXAzcPLxy8gKCQsIiomLiEpBVYjLSMrJ6+gqKSsoqqmrqGppa2jq6dvYGhkbGJqZs5gwWBpZW1ja2fv4Ojk7OLq5u7h6eXt4+vnHxAYFBwSyjDgAABJLiG7ABEBRAAAACoAKgAqADgARgBUAGIAcAB+AIwAmgCoALYAxADYAOYA9AECARABHgEsAToBSAFWAWQBcgGAAY4BnAGqAbgBxgHUAeIB8AH+AgwCGgIoAjYCRAJSAmACbgJ8AooCmAKmArQCwgLQAt4C8gMAAw4DHAMqAzgDRgNUA2IDcAN+A4wDmgOoA7YDxAPSA+AD7gP8BAoEGAQmBDQEQgRQBF4EbAR6BIgEnASqBLgExgAAeNpjYGIQZGBgmMkYysDMwM6gt5GRQd9mEzsLw1ujjWysd2w2MTMBmQwbmUHCrCDhTexsjH9sNjGCxI0FjQXVjQWVBTvK09IYQ/+tFmQ0BprGyMDw/wAjA+MBoJkMooKKgowMDkwM/xgYRuVwyjEhybFDZBXBKv4zQFVBVI6G36jcqNyo3GiZMSo3Kjes8hQAx51w5njapZC9agJBFIXP+EfSBMEXmEoU3GVcBNFWsLEJKbYKhEUnOrjryrggkgfIQ6RMnzZVHiBNijxM6pydHUiRFAEXLvebc8+duXcBXOEFAtXXw41ngQ6ePddwgXfPdYRCeW6gIx49N9EWb55b1L/oFI1Lnq5dV8kCXTx4rqGNV8913OLTcwNdcee5CSmePLeof2CGHHucYGGwxgYFJGdeos8cQWGICQbkGCkSrOjKGJbKgu6EVOoZ7zCuilm+P1mz3hSyt+zLSA0nAxmnycpkxsrFJrFpku3Nis57NpetGkcOYbHFGAEOzJqXao6SY0ebTTJ9zO12HBy2OtVFTvGX66c0d0LhsuVO2m0ScheJKeN/z1beESuRi+pPYJ7vinlu11pGoZJT+cdwVEdBFJSbn7djzLql1/iBlBsidLlcBrG2B8MHlRqGSil51nPfEi6AO3jaXc5ZM4IBAEbhp9RF1FhCRbmyVNYskSXG0CaEQvaf2j/LN112bt6Zc/HOETZiOJAJJmSc15ENmxARFTNpSlzCtBmz5iTNW7AoJR08LFmWlbNi1Zp1G/IKijZt2bZj156SfQcOHSk7dqLi1JlzF6ouXbl241ZNXUNTy522ew8edTx59qKrF3S9edf34dOXbz9+/f0DgycTFgAAAAAAAAH//wACeNpjYGBgZACCGwmaOWC69n4AjAYARC0G1wAAAA==") format
("woff");
608 font-weight: 300, 400, 500, 600, 700;
609 font-style: normal
, italic
;
628 -webkit-text-size-adjust: 100%;
629 -webkit-font-smoothing: antialiased
;
630 font-family: var
(--f7-font-family
);
631 font-size: var
(--f7-font-size
);
632 line-height: var
(--f7-line-height
);
633 color: var
(--f7-text-color
);
636 color: var
(--f7-text-color
);
640 box-sizing: border-box
;
642 .framework7-initializing
*,
643 .framework7-initializing
*:before
,
644 .framework7-initializing *:after {
645 transition-duration: 0ms !important
;
652 touch-action: manipulation
;
654 @media (width: 1024px) and
(height: 691px) and
(orientation: landscape
) {
661 @media (width: 1024px) and
(height: 692px) and
(orientation: landscape
) {
669 -webkit-tap-highlight-color: rgba
(0, 0, 0, 0);
670 -webkit-touch-callout: none
;
680 text-decoration: none
;
681 color: var
(--f7-theme-color
);
691 opacity: 0.55 !important
;
692 pointer-events: none
!important
;
694 html
.device-full-viewport
,
695 html
.device-full-viewport body
{
704 display: none
!important
;
706 @media (width: 1024px) and
(height: 691px) and
(orientation: landscape
) {
709 .ios .framework7-root {
713 @media (width: 1024px) and
(height: 692px) and
(orientation: landscape
) {
716 .ios .framework7-root {
726 display: none
!important
;
732 .aurora
.if-not-aurora
,
733 .aurora .not-aurora {
734 display: none
!important
;
736 /* === Statusbar === */
738 --f7-statusbar-height: 0px;
739 --f7-statusbar-bg-color: var
(--f7-bars-bg-color
);
742 --f7-statusbar-height: var
(--f7-safe-area-top
, 20px);
745 --f7-statusbar-height: var
(--f7-safe-area-top
, 24px);
747 .with-statusbar.ios:not(.device-ios):not(.device-android) {
748 --f7-statusbar-height: 20px;
750 .with-statusbar.md:not(.device-ios):not(.device-android) {
751 --f7-statusbar-height: 24px;
753 @supports not
(top: env
(safe-area-inset-top
)) {
754 .with-statusbar.device-ios {
755 --f7-statusbar-height: 20px;
758 @supports not
(top: env
(safe-area-inset-top
)) {
759 .with-statusbar.device-android {
760 --f7-statusbar-height: 24px;
769 box-sizing: border-box
;
771 height: var
(--f7-statusbar-height
);
772 background: var
(--f7-statusbar-bg-color
, var
(--f7-bars-bg-color
));
775 padding-top: var
(--f7-statusbar-height
);
784 box-sizing: border-box
;
786 .framework7-root
> .view
,
787 .framework7-root > .views {
788 height: calc
(100% - var
(--f7-appbar-app-offset
, 0px));
792 --f7-page-master-width: 320px;
793 --f7-page-master-border-color: rgba
(0, 0, 0, 0.1);
794 --f7-page-master-border-width: 1px;
795 --f7-page-swipeback-transition-duration: 400ms;
797 --f7-page-content-extra-padding-top: 0px;
798 --f7-page-content-extra-padding-bottom: 0px;
802 --f7-page-bg-color: #efeff4;
803 --f7-page-transition-duration: 400ms;
806 --f7-page-bg-color: #fff;
807 --f7-page-transition-duration: 250ms;
810 --f7-page-bg-color: #f3f3f3;
811 --f7-page-transition-duration: 400ms;
814 --f7-page-bg-color: #171717;
815 --f7-page-master-border-color: rgba
(255, 255, 255, 0.1);
824 box-sizing: border-box
;
831 background-color: var
(--f7-page-bg-color
);
837 .page-with-navbar-large-collapsed {
838 --f7-navbar-large-collapse-progress: 1;
841 pointer-events: none
;
844 will-change: scroll-position
;
846 -webkit-overflow-scrolling: touch
;
847 box-sizing: border-box
;
851 padding-top: calc
(var
(--f7-page-navbar-offset
, 0px) + var
(--f7-page-toolbar-top-offset
, 0px) + var
(--f7-page-subnavbar-offset
, 0px) + var
(--f7-page-searchbar-offset
, 0px) + var
(--f7-page-content-extra-padding-top
, 0px));
852 padding-bottom: calc
(var
(--f7-page-toolbar-bottom-offset
, 0px) + var
(--f7-safe-area-bottom
) + var
(--f7-page-content-extra-padding-bottom
, 0px));
855 .page-transitioning
.page-shadow-effect
,
856 .page-transitioning .page-opacity-effect {
857 transition-duration: var
(--f7-page-transition-duration
);
859 .page-transitioning-swipeback
,
860 .page-transitioning-swipeback
.page-shadow-effect
,
861 .page-transitioning-swipeback .page-opacity-effect {
862 transition-duration: var
(--f7-page-swipeback-transition-duration
);
864 .router-transition-forward
.page-next
,
865 .router-transition-backward
.page-next
,
866 .router-transition-forward
.page-current
,
867 .router-transition-backward
.page-current
,
868 .router-transition-forward
.page-previous:not
(.stacked
),
869 .router-transition-backward .page-previous:not(.stacked) {
870 pointer-events: none
;
872 .page-shadow-effect {
881 background: linear-gradient
(to left
, rgba
(0, 0, 0, 0) 0%, rgba
(0, 0, 0, 0) 10%, rgba
(0, 0, 0, 0.01) 50%, rgba
(0, 0, 0, 0.2) 100%);
883 .page-opacity-effect {
887 background: rgba
(0, 0, 0, 0.1);
894 .ios .page-previous {
895 transform: translate3d
(20%, 0, 0);
898 transform: translate3d
(-100%, 0, 0);
900 .ios .page-previous .page-opacity-effect {
903 .ios .page-previous:after {
906 .ios .page-current .page-shadow-effect {
909 .ios
.router-transition-forward
.page-next
,
910 .ios .router-transition-forward .page-current {
911 will-change: transform
;
913 .ios .router-transition-forward .page-next {
914 animation: ios-page-next-to-current var
(--f7-page-transition-duration
) forwards
;
916 .ios .router-transition-forward .page-next:before {
925 background: linear-gradient
(to left
, rgba
(0, 0, 0, 0) 0%, rgba
(0, 0, 0, 0) 10%, rgba
(0, 0, 0, 0.01) 50%, rgba
(0, 0, 0, 0.2) 100%);
926 animation: ios-page-element-fade-in var
(--f7-page-transition-duration
) forwards
;
928 .ios .router-transition-forward .page-current {
929 animation: ios-page-current-to-previous var
(--f7-page-transition-duration
) forwards
;
931 .ios .router-transition-forward .page-current:after {
935 background: rgba
(0, 0, 0, 0.1);
941 animation: ios-page-element-fade-in var
(--f7-page-transition-duration
) forwards
;
943 .ios
.router-transition-backward
.page-previous
,
944 .ios .router-transition-backward .page-current {
945 will-change: transform
;
947 .ios .router-transition-backward .page-previous {
948 animation: ios-page-previous-to-current var
(--f7-page-transition-duration
) forwards
;
950 .ios .router-transition-backward .page-previous:after {
954 background: rgba
(0, 0, 0, 0.1);
960 animation: ios-page-element-fade-out var
(--f7-page-transition-duration
) forwards
;
962 .ios .router-transition-backward .page-current {
963 animation: ios-page-current-to-next var
(--f7-page-transition-duration
) forwards
;
965 .ios .router-transition-backward .page-current:before {
974 background: linear-gradient
(to left
, rgba
(0, 0, 0, 0) 0%, rgba
(0, 0, 0, 0) 10%, rgba
(0, 0, 0, 0.01) 50%, rgba
(0, 0, 0, 0.2) 100%);
975 animation: ios-page-element-fade-out var
(--f7-page-transition-duration
) forwards
;
977 .ios
.router-dynamic-navbar-inside
.page-shadow-effect
,
978 .ios .router-dynamic-navbar-inside .page-opacity-effect {
979 top: var
(--f7-navbar-height
);
981 .ios
.router-dynamic-navbar-inside
.page-next:before
,
982 .ios
.router-dynamic-navbar-inside
.page-current:after
,
983 .ios
.router-dynamic-navbar-inside
.page-current:before
,
984 .ios .router-dynamic-navbar-inside .page-previous:after {
985 top: var
(--f7-navbar-height
);
987 @keyframes ios-page-next-to-current
{
989 transform: translate3d
(-100%, 0, 0);
992 transform: translate3d
(0%, 0, 0);
995 @keyframes ios-page-previous-to-current
{
997 transform: translate3d
(20%, 0, 0);
1000 transform: translate3d
(0%, 0, 0);
1003 @keyframes ios-page-current-to-previous
{
1005 transform: translate3d
(0, 0, 0);
1008 transform: translate3d
(20%, 0, 0);
1011 @keyframes ios-page-current-to-next
{
1013 transform: translate3d
(0, 0, 0);
1016 transform: translate3d
(-100%, 0, 0);
1019 @keyframes ios-page-element-fade-in
{
1027 @keyframes ios-page-element-fade-out
{
1036 transform: translate3d
(0, 56px, 0);
1038 pointer-events: none
;
1040 .md .page-next.page-next-on-right {
1041 transform: translate3d
(-100%, 0, 0);
1043 .md .router-transition-forward .page-next {
1044 will-change: transform
, opacity
;
1045 animation: md-page-next-to-current var
(--f7-page-transition-duration
) forwards
;
1047 .md .router-transition-forward .page-current {
1050 .md .router-transition-backward .page-current {
1051 will-change: transform
, opacity
;
1052 animation: md-page-current-to-next var
(--f7-page-transition-duration
) forwards
;
1054 .md .router-transition-backward .page-previous {
1057 @keyframes md-page-next-to-current
{
1059 transform: translate3d
(0, 56px, 0);
1063 transform: translate3d
(0, 0px, 0);
1067 @keyframes md-page-current-to-next
{
1069 transform: translate3d
(0, 0, 0);
1073 transform: translate3d
(0, 56px, 0);
1077 .aurora .page-next {
1078 pointer-events: none
;
1079 transform: translate3d
(-100%, 0px, 0);
1081 .aurora .page-next.page-next-on-right {
1082 transform: translate3d
(-100%, 0, 0);
1084 .aurora .page-previous .page-opacity-effect {
1087 .aurora .page-previous:after {
1090 .aurora .router-transition-forward .page-next {
1091 will-change: transform
;
1092 animation: aurora-page-next-to-current var
(--f7-page-transition-duration
) forwards
;
1094 .aurora .router-transition-forward .page-current {
1097 .aurora .router-transition-forward .page-current:after {
1101 background: rgba
(0, 0, 0, 0.1);
1107 animation: aurora-page-element-fade-in var
(--f7-page-transition-duration
) forwards
;
1109 .aurora .router-transition-backward .page-current {
1110 will-change: transform
, opacity
;
1111 animation: aurora-page-current-to-next var
(--f7-page-transition-duration
) forwards
;
1113 .aurora .router-transition-backward .page-previous {
1116 .aurora .router-transition-backward .page-previous:after {
1120 background: rgba
(0, 0, 0, 0.1);
1126 animation: aurora-page-element-fade-out var
(--f7-page-transition-duration
) forwards
;
1128 @keyframes aurora-page-next-to-current
{
1130 transform: translate3d
(-100%, 0, 0);
1133 transform: translate3d
(0, 0px, 0);
1136 @keyframes aurora-page-current-to-next
{
1138 transform: translate3d
(0, 0, 0);
1141 transform: translate3d
(-100%, 0, 0);
1144 @keyframes aurora-page-element-fade-in
{
1152 @keyframes aurora-page-element-fade-out
{
1160 .view:not(.view-master-detail) .page-master-stacked {
1163 .view:not(.view-master-detail) .navbar-master-stacked {
1166 .view-master-detail
.page-master
,
1167 .view-master-detail .navbar-master {
1168 width: var
(--f7-page-master-width
);
1171 --f7-safe-area-left: 0px;
1172 --f7-safe-area-outer-left: 0px;
1173 border-left: var
(--f7-page-master-border-width
) solid var
(--f7-page-master-border-color
);
1175 .view-master-detail
.page-master-detail
,
1176 .view-master-detail .navbar-master-detail {
1177 width: calc
(100% - var
(--f7-page-master-width
));
1178 --f7-safe-area-right: 0px;
1179 --f7-safe-area-outer-right: 0px;
1180 right: var
(--f7-page-master-width
);
1182 .view-master-detail .page-master {
1185 pointer-events: auto
;
1187 .view-master-detail
.page-master:before
,
1188 .view-master-detail .page-master:after {
1191 .view-master-detail.router-transition .page-master {
1196 --f7-link-highlight-black: rgba
(0, 0, 0, 0.1);
1197 --f7-link-highlight-white: rgba
(255, 255, 255, 0.15);
1198 --f7-link-highlight-color: var
(--f7-link-highlight-black
);
1201 --f7-link-highlight-color: var
(--f7-link-highlight-white
);
1205 display: inline-flex
;
1206 align-items: center
;
1207 align-content: center
;
1208 justify-content: center
;
1210 box-sizing: border-box
;
1211 transform: translate3d
(0, 0, 0);
1221 transition: opacity
300ms;
1223 .ios .link.active-state {
1225 transition-duration: 0ms;
1228 transition: opacity
300ms;
1230 .aurora .link.active-state {
1232 transition-duration: 0ms;
1234 /* === Navbar === */
1237 --f7-navbar-bg-color: var(--f7-bars-bg-color);
1238 --f7-navbar-bg-image: var(--f7-bars-bg-image);
1239 --f7-navbar-border-color: var(--f7-bars-border-color);
1240 --f7-navbar-link-color: var(--f7-bars-link-color);
1241 --f7-navbar-text-color: var(--f7-bars-text-color);
1243 --f7-navbar-hide-show-transition-duration: 400ms;
1244 --f7-navbar-title-line-height: 1.2;
1245 --f7-navbar-title-font-size: inherit
;
1246 --f7-navbar-subtitle-text-align: inherit
;
1247 --f7-navbar-large-title-line-height: 1.2;
1248 --f7-navbar-large-title-text-color: inherit
;
1251 --f7-navbar-height: 44px;
1252 --f7-navbar-tablet-height: 44px;
1253 --f7-navbar-font-size: 17px;
1254 --f7-navbar-inner-padding-left: 8px;
1255 --f7-navbar-inner-padding-right: 8px;
1256 --f7-navbar-title-font-weight: 600;
1257 --f7-navbar-title-margin-left: 0;
1258 --f7-navbar-title-margin-right: 0;
1259 --f7-navbar-title-text-align: center
;
1260 --f7-navbar-subtitle-text-color: #6d6d72;
1261 --f7-navbar-subtitle-font-size: 10px;
1262 --f7-navbar-subtitle-line-height: 1;
1263 --f7-navbar-shadow-image: none
;
1264 --f7-navbar-large-title-height: 52px;
1265 --f7-navbar-large-title-font-size: 34px;
1266 --f7-navbar-large-title-font-weight: 700;
1267 --f7-navbar-large-title-letter-spacing: -0.03em;
1268 --f7-navbar-large-title-padding-left: 15px;
1269 --f7-navbar-large-title-padding-right: 15px;
1271 --f7-navbar-link-height: var(--f7-navbar-height);
1272 --f7-navbar-link-line-height: var(--f7-navbar-height);
1277 --f7-navbar-subtitle-text-color: #8e8e93;
1280 --f7-navbar-height: 56px;
1281 --f7-navbar-tablet-height: 64px;
1282 --f7-navbar-font-size: 20px;
1283 --f7-navbar-inner-padding-left: 0px;
1284 --f7-navbar-inner-padding-right: 0px;
1285 --f7-navbar-title-font-weight: 500;
1286 --f7-navbar-title-margin-left: 16px;
1287 --f7-navbar-title-margin-right: 16px;
1288 --f7-navbar-title-text-align: left
;
1289 --f7-navbar-subtitle-text-color: rgba
(0, 0, 0, 0.85);
1290 --f7-navbar-subtitle-font-size: 14px;
1291 --f7-navbar-subtitle-line-height: 1.2;
1292 --f7-navbar-shadow-image: var
(--f7-bars-shadow-bottom-image
);
1293 --f7-navbar-large-title-font-size: 34px;
1294 --f7-navbar-large-title-height: 56px;
1295 --f7-navbar-large-title-font-weight: 500;
1296 --f7-navbar-large-title-letter-spacing: 0;
1297 --f7-navbar-large-title-padding-left: 16px;
1298 --f7-navbar-large-title-padding-right: 16px;
1300 --f7-navbar-link-height: var(--f7-navbar-height);
1301 --f7-navbar-link-line-height: var(--f7-navbar-height);
1306 --f7-navbar-subtitle-text-color: rgba
(255, 255, 255, 0.85);
1309 --f7-navbar-height: 38px;
1310 --f7-navbar-tablet-height: 38px;
1311 --f7-navbar-font-size: 14px;
1312 --f7-navbar-inner-padding-left: 15px;
1313 --f7-navbar-inner-padding-right: 15px;
1314 --f7-navbar-title-font-weight: 600;
1315 --f7-navbar-title-margin-left: 0;
1316 --f7-navbar-title-margin-right: 0;
1317 --f7-navbar-title-text-align: center
;
1318 --f7-navbar-subtitle-text-color: rgba
(0, 0, 0, 0.6);
1319 --f7-navbar-subtitle-font-size: 12px;
1320 --f7-navbar-subtitle-line-height: 1;
1321 --f7-navbar-shadow-image: none
;
1322 --f7-navbar-large-title-height: 38px;
1323 --f7-navbar-large-title-font-size: 26px;
1324 --f7-navbar-large-title-font-weight: bold
;
1325 --f7-navbar-large-title-letter-spacing: -0.03em;
1326 --f7-navbar-large-title-padding-left: 15px;
1327 --f7-navbar-large-title-padding-right: 15px;
1328 --f7-navbar-link-height: auto
;
1329 --f7-navbar-link-line-height: inherit
;
1331 .aurora
.theme-dark
,
1332 .aurora.theme-dark {
1333 --f7-navbar-subtitle-text-color: rgba
(255, 255, 255, 0.5);
1336 --f7-navbar-large-collapse-progress: 0;
1342 -webkit-backface-visibility: hidden
;
1343 backface-visibility: hidden
;
1344 box-sizing: border-box
;
1346 transform: translate3d
(0, 0, 0);
1347 height: var
(--f7-navbar-height
);
1348 background-image: var
(--f7-navbar-bg-image
, var
(--f7-bars-bg-image
));
1349 background-color: var
(--f7-navbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
1350 color: var
(--f7-navbar-text-color
, var
(--f7-bars-text-color
));
1351 font-size: var
(--f7-navbar-font-size
);
1357 color: var
(--f7-navbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
1361 justify-content: flex-start
;
1362 line-height: var
(--f7-navbar-link-line-height
, var
(--f7-navbar-height
));
1363 height: var
(--f7-navbar-link-height
, var
(--f7-navbar-height
));
1374 text-overflow: ellipsis
;
1375 white-space: nowrap
;
1377 font-weight: var
(--f7-navbar-title-font-weight
);
1378 display: inline-block
;
1379 line-height: var
(--f7-navbar-title-line-height
);
1380 text-align: var
(--f7-navbar-title-text-align
);
1381 font-size: var
(--f7-navbar-title-font-size
);
1382 margin-right: var
(--f7-navbar-title-margin-left
);
1383 margin-left: var
(--f7-navbar-title-margin-left
);
1387 color: var
(--f7-navbar-subtitle-text-color
);
1388 font-weight: normal
;
1389 font-size: var
(--f7-navbar-subtitle-font-size
);
1390 line-height: var
(--f7-navbar-subtitle-line-height
);
1391 text-align: var
(--f7-navbar-subtitle-text-align
);
1397 justify-content: flex-start
;
1398 align-items: center
;
1399 transform: translate3d
(0, 0, 0);
1401 .navbar .right:first-child {
1405 .navbar
.no-hairline:after
,
1406 .navbar.no-border:after {
1407 display: none
!important
;
1409 .navbar
.no-hairline
.title-large:after
,
1410 .navbar.no-border .title-large:after {
1411 display: none
!important
;
1413 .navbar.no-shadow:before {
1414 display: none
!important
;
1416 .navbar.navbar-hidden:before {
1417 opacity: 0 !important
;
1421 -webkit-backface-visibility: hidden
;
1422 backface-visibility: hidden
;
1427 background-color: var
(--f7-navbar-border-color
, var
(--f7-bars-border-color
));
1436 transform-origin: 50% 100%;
1437 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
1447 pointer-events: none
;
1448 background: var
(--f7-navbar-shadow-image
);
1453 @media (min-width: 768px) {
1455 --f7-navbar-height: var
(--f7-navbar-tablet-height
);
1458 .navbar-transitioning
,
1459 .navbar-transitioning:before
,
1460 .navbar-transitioning
.title
,
1461 .navbar-transitioning
.title-large
,
1462 .navbar-transitioning
.title-large-inner
,
1463 .navbar-transitioning
.title-large-text
,
1464 .navbar-transitioning .subnavbar {
1465 transition-duration: var
(--f7-navbar-hide-show-transition-duration
);
1467 .navbar-page-transitioning {
1468 transition-duration: var
(--f7-page-swipeback-transition-duration
) !important
;
1470 .navbar-page-transitioning
.title-large-text
,
1471 .navbar-page-transitioning .title-large-inner {
1472 transition-duration: var
(--f7-page-swipeback-transition-duration
) !important
;
1475 transform: translate3d
(0, -100%, 0);
1477 .navbar-large-hidden {
1478 --f7-navbar-large-collapse-progress: 1;
1485 height: var
(--f7-navbar-height
);
1487 align-items: center
;
1488 box-sizing: border-box
;
1489 padding: 0 calc
(var
(--f7-navbar-inner-padding-right
) + var
(--f7-safe-area-right
)) 0 calc
(var
(--f7-navbar-inner-padding-left
) + var
(--f7-safe-area-left
));
1491 .navbar-inner.stacked {
1499 .navbar-large:before {
1500 transform: translateY
(calc
((1 - var
(--f7-navbar-large-collapse-progress
)) * var
(--f7-navbar-large-title-height
)));
1502 .navbar-inner-large > .title {
1503 opacity: calc
(-1 + 2 * var
(--f7-navbar-large-collapse-progress
));
1505 .navbar-large-collapsed
,
1506 .navbar-inner-large-collapsed {
1507 --f7-navbar-large-collapse-progress: 1;
1509 .navbar .title-large {
1510 box-sizing: border-box
;
1516 align-items: center
;
1517 white-space: nowrap
;
1518 transform: translate3d
(0px, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1519 will-change: transform
, opacity
;
1520 transition-property: transform
;
1522 background-image: var
(--f7-navbar-bg-image
, var
(--f7-bars-bg-image
));
1523 background-color: var
(--f7-navbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
1524 height: calc
(var
(--f7-navbar-large-title-height
) + 1px);
1527 transform-origin: calc
(100% - var
(--f7-navbar-large-title-padding-left
) - var
(--f7-safe-area-left
)) center
;
1529 .navbar .title-large:after {
1532 background-color: var
(--f7-navbar-border-color
, var
(--f7-bars-border-color
));
1541 transform-origin: 50% 100%;
1542 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
1545 .title-large-inner .title {
1546 text-overflow: ellipsis
;
1547 white-space: nowrap
;
1548 color: var
(--f7-navbar-large-title-text-color
);
1549 letter-spacing: var
(--f7-navbar-large-title-letter-spacing
);
1550 font-size: var
(--f7-navbar-large-title-font-size
);
1551 font-weight: var
(--f7-navbar-large-title-font-weight
);
1552 line-height: var
(--f7-navbar-large-title-line-height
);
1553 padding-left: calc
(var
(--f7-navbar-large-title-padding-left
) + var
(--f7-safe-area-left
));
1554 padding-right: calc
(var
(--f7-navbar-large-title-padding-right
) + var
(--f7-safe-area-right
));
1555 transform-origin: calc
(100% - var
(--f7-navbar-large-title-padding-left
) - var
(--f7-safe-area-left
)) center
;
1558 .title-large-inner {
1559 box-sizing: border-box
;
1561 transform: translate3d
(0, calc
(var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1562 transition-property: transform
, opacity
;
1565 .navbar-no-title-large-transition
.title-large
,
1566 .navbar-no-title-large-transition
.title-large-text
,
1567 .navbar-no-title-large-transition .title-large-inner {
1568 transition-duration: 0ms;
1571 --f7-page-navbar-offset: var
(--f7-navbar-height
);
1573 .navbar
~ * .page-with-navbar-large
,
1574 .navbar
~ .page-with-navbar-large
,
1575 .page-with-navbar-large .navbar ~ * {
1576 --f7-page-navbar-offset: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
1579 .page.no-navbar .navbar ~ * {
1580 --f7-page-navbar-offset: 0px;
1583 --f7-navbarLeftTextOffset: calc
(4px + 12px + var
(--f7-navbar-inner-padding-left
));
1584 --f7-navbarTitleLargeOffset: var
(--f7-navbar-large-title-padding-left
);
1586 .ios .navbar .material-icons {
1589 .ios .navbar .f7-icons {
1592 .ios .navbar a.icon-only {
1595 justify-content: center
;
1597 .ios
.navbar
.left a
+ a
,
1598 .ios .navbar .right a + a {
1604 .ios .navbar .left {
1607 .ios .navbar .right {
1610 .ios .navbar .right:first-child {
1611 left: calc
(8px + var
(--f7-safe-area-left
));
1613 .ios .navbar-inner {
1614 justify-content: space-between
;
1616 .ios .navbar-inner-left-title {
1617 justify-content: flex-start
;
1619 .ios .navbar-inner-left-title .right {
1622 .ios .navbar-inner-left-title .title {
1626 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
),
1627 .ios .view:not(.view-master-detail) .navbar-previous {
1628 pointer-events: none
;
1630 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .title-large
,
1631 .ios .view:not(.view-master-detail) .navbar-previous .title-large {
1632 transform: translateY
(-100%);
1636 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .title-large
.title-large-text
,
1637 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
1638 transform: scale
(0.5);
1641 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .title-large
.title-large-inner
,
1642 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner {
1643 transform: translateX
(-100%);
1647 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .left
,
1648 .ios
.view:not
(.view-master-detail
) .navbar-previous
.left
,
1649 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .right
,
1650 .ios
.view:not
(.view-master-detail
) .navbar-previous
.right
,
1651 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) > .title
,
1652 .ios
.view:not
(.view-master-detail
) .navbar-previous
> .title
,
1653 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .subnavbar
,
1654 .ios
.view:not
(.view-master-detail
) .navbar-previous
.subnavbar
,
1655 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .fading
,
1656 .ios .view:not(.view-master-detail) .navbar-previous .fading {
1659 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .sliding
,
1660 .ios .view:not(.view-master-detail) .navbar-previous .sliding {
1663 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .subnavbar
.sliding
,
1664 .ios
.view:not
(.view-master-detail
) .navbar-previous
.subnavbar
.sliding
,
1665 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
).sliding
.subnavbar
,
1666 .ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar {
1668 transform: translate3d
(-100%, 0, 0);
1671 pointer-events: none
;
1673 .ios .navbar-next .title-large {
1674 transform: translateX
(100%);
1677 .ios
.navbar-next
.title-large
.title-large-text
,
1678 .ios .navbar-next .title-large .title-large-inner {
1681 .ios
.navbar-next
.left
,
1682 .ios
.navbar-next
.right
,
1683 .ios
.navbar-next
> .title
,
1684 .ios
.navbar-next
.subnavbar
,
1685 .ios .navbar-next .fading {
1688 .ios .navbar-next .sliding {
1691 .ios
.navbar-next
.sliding
.left
,
1692 .ios
.navbar-next
.sliding
.right
,
1693 .ios
.navbar-next
.sliding
> .title
,
1694 .ios .navbar-next.sliding .subnavbar {
1697 .ios
.navbar-next
.subnavbar
.sliding
,
1698 .ios .navbar-next.sliding .subnavbar {
1700 transform: translate3d
(100%, 0, 0);
1702 .ios
.router-dynamic-navbar-inside
.navbar-next
.title-large
,
1703 .ios
.router-dynamic-navbar-inside
.navbar-next
.title-large-text
,
1704 .ios .router-dynamic-navbar-inside .navbar-next .title-large-inner {
1707 .ios .router-dynamic-navbar-inside .navbar-previous .title-large {
1709 transform: translate3d
(0px, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1711 .ios
.router-dynamic-navbar-inside
.navbar-previous
.title-large-text
,
1712 .ios .router-dynamic-navbar-inside .navbar-previous .title-large-inner {
1713 transform: translate3d
(0, calc
(var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1715 .ios .router-transition .navbar {
1716 transition-duration: var
(--f7-page-transition-duration
);
1718 .ios .router-transition .title-large {
1721 .ios
.router-transition
.navbar-current
.left
,
1722 .ios
.router-transition
.navbar-current
> .title
,
1723 .ios
.router-transition
.navbar-current
.right
,
1724 .ios .router-transition .navbar-current .subnavbar {
1725 animation: ios-navbar-element-fade-out var
(--f7-page-transition-duration
) forwards
;
1727 .ios
.router-transition
.navbar-current
.sliding
,
1728 .ios
.router-transition
.navbar-current
.left
.sliding
.icon
+ span
,
1729 .ios
.router-transition
.navbar-current
.sliding
.left
,
1730 .ios
.router-transition
.navbar-current
.sliding
.left
.icon
+ span
,
1731 .ios
.router-transition
.navbar-current
.sliding
> .title
,
1732 .ios .router-transition .navbar-current.sliding .right {
1733 transition-duration: var
(--f7-page-transition-duration
);
1734 opacity: 0 !important
;
1737 .ios
.router-transition
.navbar-current
.sliding
.subnavbar
,
1738 .ios .router-transition .navbar-current .sliding.subnavbar {
1739 transition-duration: var
(--f7-page-transition-duration
);
1743 .ios
.router-transition-forward
.navbar-next
.left
,
1744 .ios
.router-transition-backward
.navbar-previous
.left
,
1745 .ios
.router-transition-forward
.navbar-next
> .title
,
1746 .ios
.router-transition-backward
.navbar-previous
> .title
,
1747 .ios
.router-transition-forward
.navbar-next
.right
,
1748 .ios
.router-transition-backward
.navbar-previous
.right
,
1749 .ios
.router-transition-forward
.navbar-next
.subnavbar
,
1750 .ios .router-transition-backward .navbar-previous .subnavbar {
1751 animation: ios-navbar-element-fade-in var
(--f7-page-transition-duration
) forwards
;
1753 .ios
.router-transition-forward
.navbar-next
.sliding
,
1754 .ios
.router-transition-backward
.navbar-previous
.sliding
,
1755 .ios
.router-transition-forward
.navbar-next
.left
.sliding
.icon
+ span
,
1756 .ios
.router-transition-backward
.navbar-previous
.left
.sliding
.icon
+ span
,
1757 .ios
.router-transition-forward
.navbar-next
.sliding
.left
,
1758 .ios
.router-transition-backward
.navbar-previous
.sliding
.left
,
1759 .ios
.router-transition-forward
.navbar-next
.sliding
.left
.icon
+ span
,
1760 .ios
.router-transition-backward
.navbar-previous
.sliding
.left
.icon
+ span
,
1761 .ios
.router-transition-forward
.navbar-next
.sliding
> .title
,
1762 .ios
.router-transition-backward
.navbar-previous
.sliding
> .title
,
1763 .ios
.router-transition-forward
.navbar-next
.sliding
.right
,
1764 .ios
.router-transition-backward
.navbar-previous
.sliding
.right
,
1765 .ios
.router-transition-forward
.navbar-next
.sliding
.subnavbar
,
1766 .ios .router-transition-backward .navbar-previous.sliding .subnavbar {
1767 transition-duration: var
(--f7-page-transition-duration
);
1769 transform: translate3d
(0, 0, 0) !important
;
1770 opacity: 1 !important
;
1772 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1775 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1776 animation: ios-navbar-title-large-text-slide-up var
(--f7-page-transition-duration
) forwards
, ios-navbar-title-large-text-fade-out var
(--f7-page-transition-duration
) forwards
;
1778 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1779 animation: ios-navbar-title-large-slide-up var
(--f7-page-transition-duration
) forwards
;
1781 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
1782 animation: ios-navbar-title-large-text-fade-out var
(--f7-page-transition-duration
) forwards
, ios-navbar-title-large-text-scale-out var
(--f7-page-transition-duration
) forwards
;
1784 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large .title-large-inner {
1785 animation: ios-navbar-title-large-inner-current-to-previous var
(--f7-page-transition-duration
) forwards
;
1787 .ios .router-transition-forward:not(.router-dynamic-navbar-inside) .navbar-next.router-navbar-transition-from-large .left .back span {
1788 animation: ios-navbar-back-text-next-to-current var
(--f7-page-transition-duration
) forwards
;
1790 transform-origin: right center
;
1792 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1795 .ios
.router-transition-forward
.navbar-next
.router-navbar-transition-from-large
.router-navbar-transition-to-large
.title-large
.title-large-text
,
1796 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1797 animation: ios-navbar-title-large-text-slide-left var
(--f7-page-transition-duration
) forwards
;
1799 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1800 animation: ios-navbar-title-large-slide-down var
(--f7-page-transition-duration
) forwards
;
1802 .ios
.router-transition-forward
.navbar-next
.router-navbar-transition-to-large:not
(.router-navbar-transition-from-large
) .title-large
.title-large-text
,
1803 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-inner {
1804 animation: ios-navbar-title-large-text-slide-left-top var
(--f7-page-transition-duration
) forwards
;
1806 .ios
.router-transition-forward
.navbar-next
.navbar-inner-large:not
(.navbar-inner-large-collapsed
) > .title
,
1807 .ios .router-transition-forward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1809 opacity: 0 !important
;
1810 transition-duration: 0;
1812 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-next
.title-large
,
1813 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-current
.title-large
,
1814 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-next
.title-large-text
,
1815 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-current
.title-large-text
,
1816 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-next
.title-large-inner
,
1817 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1818 animation: none
!important
;
1820 .ios .router-transition-backward:not(.router-dynamic-navbar-inside) .navbar-current.router-navbar-transition-to-large .left .back span {
1821 animation: ios-navbar-back-text-current-to-previous var
(--f7-page-transition-duration
) forwards
;
1823 transform-origin: right center
;
1825 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1827 transform: translateX
(100%);
1829 .ios
.router-transition-backward
.navbar-current
.router-navbar-transition-from-large
.router-navbar-transition-to-large
.title-large
.title-large-text
,
1830 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1831 animation: ios-navbar-title-large-text-slide-right var
(--f7-page-transition-duration
) forwards
;
1833 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1834 animation: ios-navbar-title-large-slide-up var
(--f7-page-transition-duration
) forwards
;
1836 .ios
.router-transition-backward
.navbar-current
.router-navbar-transition-from-large:not
(.router-navbar-transition-to-large
) .title-large
.title-large-text
,
1837 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-inner {
1838 animation: ios-navbar-title-large-text-slide-right-bottom var
(--f7-page-transition-duration
) forwards
;
1840 .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1843 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1846 transform: translateY
(0);
1848 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1849 animation: ios-navbar-title-large-text-slide-down var
(--f7-page-transition-duration
) forwards
, ios-navbar-title-large-text-fade-in var
(--f7-page-transition-duration
) forwards
;
1851 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1853 animation: ios-navbar-title-large-slide-down var
(--f7-page-transition-duration
) forwards
;
1855 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
1856 animation: ios-navbar-title-large-text-scale-in var
(--f7-page-transition-duration
) forwards
, ios-navbar-title-large-text-fade-in var
(--f7-page-transition-duration
) forwards
;
1858 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large .title-large-inner {
1859 animation: ios-navbar-title-large-inner-previous-to-current var
(--f7-page-transition-duration
) forwards
;
1861 .ios
.router-transition-backward
.navbar-current
.navbar-inner-large:not
(.navbar-inner-large-collapsed
) > .title
,
1862 .ios .router-transition-backward .navbar-previous.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1864 opacity: 0 !important
;
1865 transition-duration: 0;
1867 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-previous
.title-large
,
1868 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-current
.title-large
,
1869 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-previous
.title-large-text
,
1870 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-current
.title-large-text
,
1871 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-previous
.title-large-inner
,
1872 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1873 animation: none
!important
;
1875 .view-master-detail .navbar-master.navbar-previous {
1876 pointer-events: auto
;
1878 .view-master-detail
.navbar-master
.navbar-previous
.left
,
1879 .view-master-detail
.navbar-master
.navbar-previous:not
(.navbar-inner-large
) .title
,
1880 .view-master-detail
.navbar-master
.navbar-previous
.right
,
1881 .view-master-detail .navbar-master.navbar-previous .subnavbar {
1884 .ios
.view-master-detail
.router-transition
.navbar-master
.left
,
1885 .ios
.view-master-detail
.router-transition
.navbar-master
.left
.icon
+ span
,
1886 .ios
.view-master-detail
.router-transition
.navbar-master:not
(.navbar-inner-large
) .title
,
1887 .ios
.view-master-detail
.router-transition
.navbar-master
.right
,
1888 .ios
.view-master-detail
.router-transition
.navbar-master
.subnavbar
,
1889 .ios
.view-master-detail
.router-transition
.navbar-master
.sliding
,
1890 .ios .view-master-detail.router-transition .navbar-master .fading {
1891 opacity: 1 !important
;
1892 transition-duration: 0ms;
1893 transform: none
!important
;
1894 animation: none
!important
;
1896 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title {
1897 opacity: calc
(-1 + 2 * var
(--f7-navbar-large-collapse-progress
)) !important
;
1898 transition-duration: 0ms;
1899 transform: none
!important
;
1900 animation: none
!important
;
1902 .ios
.view-master-detail
.router-transition
.navbar-master
.navbar-inner-large
.title-large
,
1903 .ios
.view-master-detail
.router-transition
.navbar-master
.navbar-inner-large
.title-large-text
,
1904 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-inner {
1905 transition-duration: 0ms;
1906 animation: none
!important
;
1908 @keyframes ios-navbar-element-fade-in
{
1916 @keyframes ios-navbar-element-fade-out
{
1924 @keyframes ios-navbar-title-large-slide-up
{
1926 transform: translateY
(0%);
1929 transform: translateY
(calc
(-1 * var
(--f7-navbar-large-title-height
)));
1932 @keyframes ios-navbar-title-large-slide-down
{
1934 transform: translateY
(calc
(-1 * var
(--f7-navbar-large-title-height
)));
1937 transform: translateY
(0%);
1940 @keyframes ios-navbar-title-large-text-slide-up
{
1942 transform: translateX
(0px) translateY
(0%) scale
(1);
1945 transform: translateX
(calc
(var
(--f7-navbarLeftTextOffset
) - var
(--f7-navbarTitleLargeOffset
))) translateY
(calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(0.5);
1948 @keyframes ios-navbar-title-large-text-slide-down
{
1950 transform: translateX
(calc
(var
(--f7-navbarLeftTextOffset
) - var
(--f7-navbarTitleLargeOffset
))) translateY
(calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(0.5);
1953 transform: translateX
(0px) translateY
(0%) scale
(1);
1956 @keyframes ios-navbar-title-large-text-slide-left
{
1958 transform: translateX
(-200%) scale
(1);
1961 transform: translateX
(-100%) scale
(1);
1964 @keyframes ios-navbar-title-large-text-slide-right
{
1966 transform: translateX
(-100%) scale
(1);
1969 transform: translateX
(-200%) scale
(1);
1972 @keyframes ios-navbar-title-large-text-slide-left-top
{
1974 transform: translateX
(-100%) translateY
(var
(--f7-navbar-large-title-height
)) scale
(1);
1977 transform: translateX
(0%) translateY
(0%) scale
(1);
1980 @keyframes ios-navbar-title-large-text-slide-right-bottom
{
1982 transform: translateX
(0%) translateY
(0%) scale
(1);
1985 transform: translateX
(-100%) translateY
(var
(--f7-navbar-large-title-height
)) scale
(1);
1988 @keyframes ios-navbar-title-large-text-fade-out
{
1999 @keyframes ios-navbar-title-large-text-fade-in
{
2010 @keyframes ios-navbar-title-large-text-scale-out
{
2012 transform: translateY
(0%) scale
(1);
2015 transform: translateY
(0%) scale
(0.5);
2018 @keyframes ios-navbar-title-large-text-scale-in
{
2020 transform: translateY
(0%) scale
(0.5);
2023 transform: translateY
(0%) scale
(1);
2026 @keyframes ios-navbar-back-text-current-to-previous
{
2029 transform: translateY
(0px) translateX
(0px) scale
(1);
2036 transform: translateX
(calc
(var
(--f7-navbarTitleLargeOffset
) - var
(--f7-navbarLeftTextOffset
))) translateY
(calc
((var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(2);
2039 @keyframes ios-navbar-back-text-next-to-current
{
2042 transform: translateX
(calc
(var
(--f7-navbarTitleLargeOffset
) - var
(--f7-navbarLeftTextOffset
))) translateY
(calc
((var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(2);
2049 transform: translateX
(0px) translateY
(0px) scale
(1);
2052 @keyframes ios-navbar-title-large-inner-current-to-previous
{
2054 transform: translateX
(0%);
2058 transform: translateX
(100%);
2062 @keyframes ios-navbar-title-large-inner-previous-to-current
{
2064 transform: translateX
(100%);
2068 transform: translateX
(0%);
2072 .md .navbar .material-icons {
2075 .md .navbar .f7-icons {
2078 .md .navbar a.link {
2082 .md .navbar a.link:before {
2089 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
2090 background-repeat: no-repeat
;
2091 background-position: center
;
2092 background-size: 100% 100%;
2094 pointer-events: none
;
2095 transition-duration: 600ms;
2097 .md .navbar a.link.active-state:before {
2099 transition-duration: 150ms;
2101 .md .navbar a.icon-only {
2106 .md .navbar .right {
2109 .md .navbar .right:first-child {
2110 left: var
(--f7-safe-area-left
);
2113 justify-content: flex-start
;
2116 .md .navbar-inner-large:not(.navbar-inner-large-collapsed) {
2119 .md .page.page-with-subnavbar .navbar-inner {
2122 .md .navbar-inner-centered-title {
2123 justify-content: space-between
;
2125 .md .navbar-inner-centered-title .right {
2128 .md .navbar-inner-centered-title .title {
2131 .aurora .navbar a.icon-only {
2133 justify-content: center
;
2135 .aurora
.navbar
.left a
+ a
,
2136 .aurora .navbar .right a + a {
2142 .aurora .navbar .left {
2145 .aurora .navbar .right {
2148 .aurora .navbar .right:first-child {
2149 left: calc
(15px + var
(--f7-safe-area-left
));
2151 .aurora .navbar-inner {
2152 justify-content: space-between
;
2154 .aurora .navbar-inner-left-title {
2155 justify-content: flex-start
;
2157 .aurora .navbar-inner-left-title .right {
2160 .aurora .navbar-inner-left-title .title {
2164 /* === Toolbar === */
2167 --f7-toolbar-bg-color: var(--f7-bars-bg-color);
2168 --f7-toolbar-bg-image: var(--f7-bars-bg-image);
2169 --f7-toolbar-border-color: var(--f7-bars-border-color);
2170 --f7-toolbar-link-color: var(--f7-bars-link-color);
2171 --f7-toolbar-text-color: var(--f7-bars-text-color);
2172 --f7-tabbar-link-active-color: var(--f7-theme-color);
2174 --f7-tabbar-link-active-bg-color: transparent
;
2175 --f7-tabbar-label-text-transform: none
;
2176 --f7-toolbar-hide-show-transition-duration: 400ms;
2179 --f7-toolbar-height: 44px;
2180 --f7-toolbar-font-size: 17px;
2181 --f7-toolbar-inner-padding-left: 8px;
2182 --f7-toolbar-inner-padding-right: 8px;
2184 --f7-toolbar-link-height: var(--f7-toolbar-height);
2185 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2187 --f7-tabbar-labels-height: 50px;
2188 --f7-tabbar-labels-tablet-height: 56px;
2189 --f7-tabbar-link-inactive-color: #929292;
2190 --f7-toolbar-top-shadow-image: none
;
2191 --f7-toolbar-bottom-shadow-image: none
;
2192 --f7-tabbar-icon-size: 28px;
2193 --f7-tabbar-link-text-transform: none
;
2194 --f7-tabbar-link-font-weight: 400;
2195 --f7-tabbar-link-letter-spacing: 0;
2196 --f7-tabbar-label-font-size: 10px;
2197 --f7-tabbar-label-tablet-font-size: 14px;
2198 --f7-tabbar-label-font-weight: 400;
2199 --f7-tabbar-label-letter-spacing: 0.01;
2202 --f7-toolbar-height: 48px;
2203 --f7-toolbar-font-size: 14px;
2204 --f7-toolbar-inner-padding-left: 0px;
2205 --f7-toolbar-inner-padding-right: 0px;
2207 --f7-toolbar-link-height: var(--f7-toolbar-height);
2208 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2210 --f7-tabbar-labels-height: 56px;
2211 --f7-tabbar-labels-tablet-height: 56px;
2212 --f7-tabbar-link-inactive-color: rgba
(0, 0, 0, 0.54);
2214 --f7-tabbar-link-active-border-color: var(--f7-theme-color);
2216 --f7-toolbar-top-shadow-image: var
(--f7-bars-shadow-bottom-image
);
2217 --f7-toolbar-bottom-shadow-image: var
(--f7-bars-shadow-top-image
);
2218 --f7-tabbar-icon-size: 24px;
2219 --f7-tabbar-link-text-transform: uppercase
;
2220 --f7-tabbar-link-font-weight: 500;
2221 --f7-tabbar-link-letter-spacing: 0.03em;
2222 --f7-tabbar-label-font-size: 14px;
2223 --f7-tabbar-label-tablet-font-size: 14px;
2224 --f7-tabbar-label-font-weight: 400;
2225 --f7-tabbar-label-letter-spacing: 0;
2229 --f7-tabbar-link-inactive-color: rgba
(255, 255, 255, 0.54);
2232 --f7-toolbar-height: 38px;
2233 --f7-toolbar-font-size: 14px;
2234 --f7-toolbar-inner-padding-left: 15px;
2235 --f7-toolbar-inner-padding-right: 15px;
2236 --f7-toolbar-link-height: auto
;
2237 --f7-toolbar-link-line-height: inherit
;
2238 --f7-tabbar-labels-height: 44px;
2239 --f7-tabbar-labels-tablet-height: 44px;
2240 --f7-tabbar-link-inactive-color: rgba
(0, 0, 0, 0.5);
2241 --f7-tabbar-link-inactive-bg-color: rgba
(0, 0, 0, 0.2);
2242 --f7-toolbar-top-shadow-image: none
;
2243 --f7-toolbar-bottom-shadow-image: none
;
2244 --f7-tabbar-icon-size: 18px;
2245 --f7-tabbar-link-text-transform: none
;
2246 --f7-tabbar-link-font-weight: 400;
2247 --f7-tabbar-link-letter-spacing: 0;
2248 --f7-tabbar-label-font-size: 12px;
2249 --f7-tabbar-label-tablet-font-size: 12px;
2250 --f7-tabbar-label-font-weight: 500;
2251 --f7-tabbar-label-letter-spacing: 0.01;
2253 .aurora
.theme-dark
,
2254 .aurora.theme-dark {
2255 --f7-tabbar-link-inactive-color: rgba
(255, 255, 255, 0.5);
2261 transform: translate3d
(0, 0, 0);
2262 -webkit-backface-visibility: hidden
;
2263 backface-visibility: hidden
;
2265 box-sizing: border-box
;
2267 height: var
(--f7-toolbar-height
);
2268 background-image: var
(--f7-toolbar-bg-image
, var
(--f7-bars-bg-image
));
2269 background-color: var
(--f7-toolbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
2270 color: var
(--f7-toolbar-text-color
, var
(--f7-bars-text-color
));
2271 font-size: var
(--f7-toolbar-font-size
);
2277 color: var
(--f7-toolbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
2278 box-sizing: border-box
;
2281 white-space: nowrap
;
2282 text-overflow: ellipsis
;
2286 line-height: var
(--f7-toolbar-link-line-height
, var
(--f7-toolbar-height
));
2287 height: var
(--f7-toolbar-link-height
, var
(--f7-toolbar-height
));
2294 -webkit-backface-visibility: hidden
;
2295 backface-visibility: hidden
;
2303 .ios
.toolbar-top-ios
,
2304 .md
.toolbar-top-md
,
2305 .aurora .toolbar-top-aurora {
2308 .toolbar-top
.tab-link-highlight
,
2309 .ios
.toolbar-top-ios
.tab-link-highlight
,
2310 .md
.toolbar-top-md
.tab-link-highlight
,
2311 .aurora .toolbar-top-aurora .tab-link-highlight {
2314 .toolbar-top
.no-hairline:after
,
2315 .ios
.toolbar-top-ios
.no-hairline:after
,
2316 .md
.toolbar-top-md
.no-hairline:after
,
2317 .aurora
.toolbar-top-aurora
.no-hairline:after
,
2318 .toolbar-top
.no-border:after
,
2319 .ios
.toolbar-top-ios
.no-border:after
,
2320 .md
.toolbar-top-md
.no-border:after
,
2321 .aurora .toolbar-top-aurora.no-border:after {
2322 display: none
!important
;
2324 .toolbar-top
.no-shadow:before
,
2325 .ios
.toolbar-top-ios
.no-shadow:before
,
2326 .md
.toolbar-top-md
.no-shadow:before
,
2327 .aurora
.toolbar-top-aurora
.no-shadow:before
,
2328 .toolbar-top
.toolbar-hidden:before
,
2329 .ios
.toolbar-top-ios
.toolbar-hidden:before
,
2330 .md
.toolbar-top-md
.toolbar-hidden:before
,
2331 .aurora .toolbar-top-aurora.toolbar-hidden:before {
2332 display: none
!important
;
2335 .ios
.toolbar-top-ios:after
,
2336 .md
.toolbar-top-md:after
,
2337 .aurora
.toolbar-top-aurora:after
,
2338 .toolbar-top:before
,
2339 .ios
.toolbar-top-ios:before
,
2340 .md
.toolbar-top-md:before
,
2341 .aurora .toolbar-top-aurora:before {
2342 -webkit-backface-visibility: hidden
;
2343 backface-visibility: hidden
;
2346 .ios
.toolbar-top-ios:after
,
2347 .md
.toolbar-top-md:after
,
2348 .aurora .toolbar-top-aurora:after {
2351 background-color: var
(--f7-toolbar-border-color
, var
(--f7-bars-border-color
));
2360 transform-origin: 50% 100%;
2361 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2363 .toolbar-top:before
,
2364 .ios
.toolbar-top-ios:before
,
2365 .md
.toolbar-top-md:before
,
2366 .aurora .toolbar-top-aurora:before {
2374 pointer-events: none
;
2375 background: var
(--f7-toolbar-top-shadow-image
);
2378 .ios
.toolbar-bottom-ios
,
2379 .md
.toolbar-bottom-md
,
2380 .aurora .toolbar-bottom-aurora {
2382 height: calc
(var
(--f7-toolbar-height
) + var
(--f7-safe-area-bottom
));
2384 .toolbar-bottom
.tab-link-highlight
,
2385 .ios
.toolbar-bottom-ios
.tab-link-highlight
,
2386 .md
.toolbar-bottom-md
.tab-link-highlight
,
2387 .aurora .toolbar-bottom-aurora .tab-link-highlight {
2390 .toolbar-bottom
.toolbar-inner
,
2391 .ios
.toolbar-bottom-ios
.toolbar-inner
,
2392 .md
.toolbar-bottom-md
.toolbar-inner
,
2393 .aurora .toolbar-bottom-aurora .toolbar-inner {
2396 bottom: var
(--f7-safe-area-bottom
);
2398 .toolbar-bottom
.no-hairline:before
,
2399 .ios
.toolbar-bottom-ios
.no-hairline:before
,
2400 .md
.toolbar-bottom-md
.no-hairline:before
,
2401 .aurora
.toolbar-bottom-aurora
.no-hairline:before
,
2402 .toolbar-bottom
.no-border:before
,
2403 .ios
.toolbar-bottom-ios
.no-border:before
,
2404 .md
.toolbar-bottom-md
.no-border:before
,
2405 .aurora .toolbar-bottom-aurora.no-border:before {
2406 display: none
!important
;
2408 .toolbar-bottom
.no-shadow:after
,
2409 .ios
.toolbar-bottom-ios
.no-shadow:after
,
2410 .md
.toolbar-bottom-md
.no-shadow:after
,
2411 .aurora
.toolbar-bottom-aurora
.no-shadow:after
,
2412 .toolbar-bottom
.toolbar-hidden:after
,
2413 .ios
.toolbar-bottom-ios
.toolbar-hidden:after
,
2414 .md
.toolbar-bottom-md
.toolbar-hidden:after
,
2415 .aurora .toolbar-bottom-aurora.toolbar-hidden:after {
2416 display: none
!important
;
2418 .toolbar-bottom:before
,
2419 .ios
.toolbar-bottom-ios:before
,
2420 .md
.toolbar-bottom-md:before
,
2421 .aurora .toolbar-bottom-aurora:before {
2424 background-color: var
(--f7-toolbar-border-color
, var
(--f7-bars-border-color
));
2433 transform-origin: 50% 0%;
2434 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2436 .toolbar-bottom:after
,
2437 .ios
.toolbar-bottom-ios:after
,
2438 .md
.toolbar-bottom-md:after
,
2439 .aurora .toolbar-bottom-aurora:after {
2447 pointer-events: none
;
2448 background: var
(--f7-toolbar-bottom-shadow-image
);
2457 justify-content: space-between
;
2458 box-sizing: border-box
;
2459 align-items: center
;
2460 align-content: center
;
2462 padding: 0 calc
(var
(--f7-toolbar-inner-padding-right
) + var
(--f7-safe-area-right
)) 0 calc
(var
(--f7-toolbar-inner-padding-left
) + var
(--f7-safe-area-left
));
2465 .views > .tabbar-labels {
2470 color: var
(--f7-tabbar-link-inactive-color
);
2472 .tabbar a
.tab-link:not
(.tab-link-active
),
2473 .tabbar-labels a.tab-link:not(.tab-link-active) {
2474 background-color: var
(--f7-tabbar-link-inactive-bg-color
, transparent
);
2477 .tabbar-labels a.link {
2481 .tabbar-labels a
.tab-link
,
2483 .tabbar-labels a.link {
2486 box-sizing: border-box
;
2488 justify-content: center
;
2489 align-items: center
;
2490 flex-direction: column
;
2491 text-transform: var
(--f7-tabbar-link-text-transform
);
2492 font-weight: var
(--f7-tabbar-link-font-weight
);
2493 letter-spacing: var
(--f7-tabbar-link-letter-spacing
);
2496 .tabbar
.tab-link-active
,
2497 .tabbar-labels .tab-link-active {
2498 color: var
(--f7-tabbar-link-active-color
, var
(--f7-theme-color
));
2499 background-color: var
(--f7-tabbar-link-active-bg-color
, transparent
);
2502 .tabbar-labels i.icon {
2503 font-size: var
(--f7-tabbar-icon-size
);
2504 height: var
(--f7-tabbar-icon-size
);
2505 line-height: var
(--f7-tabbar-icon-size
);
2508 --f7-toolbar-height: var
(--f7-tabbar-labels-height
);
2510 .tabbar-labels a
.tab-link
,
2511 .tabbar-labels a.link {
2513 justify-content: space-between
;
2514 align-items: center
;
2516 .tabbar-labels .tabbar-label {
2521 text-overflow: ellipsis
;
2522 white-space: nowrap
;
2523 font-size: var
(--f7-tabbar-label-font-size
);
2524 text-transform: var
(--f7-tabbar-label-text-transform
);
2525 font-weight: var
(--f7-tabbar-label-font-weight
);
2526 letter-spacing: var
(--f7-tabbar-label-letter-spacing
);
2528 @media (min-width: 768px) {
2530 --f7-tabbar-labels-height: var
(--f7-tabbar-labels-tablet-height
);
2531 --f7-tabbar-label-font-size: var
(--f7-tabbar-label-tablet-font-size
);
2534 .tabbar-scrollable .toolbar-inner {
2535 justify-content: flex-start
;
2536 will-change: scroll-position
;
2538 -webkit-overflow-scrolling: touch
;
2540 .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
2541 display: none
!important
;
2542 width: 0 !important
;
2543 height: 0 !important
;
2544 -webkit-appearance: none
;
2545 opacity: 0 !important
;
2547 .tabbar-scrollable a
.tab-link
,
2548 .tabbar-scrollable a.link {
2552 .toolbar-transitioning
,
2553 .navbar-transitioning
+ .toolbar
,
2554 .navbar-transitioning ~ * .toolbar {
2555 transition-duration: var
(--f7-toolbar-hide-show-transition-duration
);
2557 .toolbar-bottom
~ *,
2558 .ios
.toolbar-bottom-ios
~ *,
2559 .md
.toolbar-bottom-md
~ *,
2560 .aurora .toolbar-bottom-aurora ~ * {
2561 --f7-page-toolbar-bottom-offset: var
(--f7-toolbar-height
);
2563 .toolbar-bottom
.tabbar-labels
~ *,
2564 .ios
.toolbar-bottom-ios
.tabbar-labels
~ *,
2565 .md
.toolbar-bottom-md
.tabbar-labels
~ *,
2566 .aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
2567 --f7-page-toolbar-bottom-offset: var
(--f7-tabbar-labels-height
);
2569 .toolbar-bottom
.toolbar-hidden
,
2570 .ios
.toolbar-bottom-ios
.toolbar-hidden
,
2571 .md
.toolbar-bottom-md
.toolbar-hidden
,
2572 .aurora .toolbar-bottom-aurora.toolbar-hidden {
2573 transform: translate3d
(0, 100%, 0);
2576 .ios
.toolbar-top-ios
~ *,
2577 .md
.toolbar-top-md
~ *,
2578 .aurora .toolbar-top-aurora ~ * {
2579 --f7-page-toolbar-top-offset: var
(--f7-toolbar-height
);
2581 .toolbar-top
.tabbar-labels
~ *,
2582 .ios
.toolbar-top-ios
.tabbar-labels
~ *,
2583 .md
.toolbar-top-md
.tabbar-labels
~ *,
2584 .aurora .toolbar-top-aurora.tabbar-labels ~ * {
2585 --f7-page-toolbar-top-offset: var
(--f7-tabbar-labels-height
);
2587 .toolbar-top
.toolbar-hidden
,
2588 .ios
.toolbar-top-ios
.toolbar-hidden
,
2589 .md
.toolbar-top-md
.toolbar-hidden
,
2590 .aurora .toolbar-top-aurora.toolbar-hidden {
2591 transform: translate3d
(0, -100%, 0);
2593 .navbar
~ .toolbar-top
,
2594 .ios
.navbar
~ .toolbar-top-ios
,
2595 .md
.navbar
~ .toolbar-top-md
,
2596 .aurora
.navbar
~ .toolbar-top-aurora
,
2597 .navbar
~ * .toolbar-top
,
2598 .ios
.navbar
~ * .toolbar-top-ios
,
2599 .md
.navbar
~ * .toolbar-top-md
,
2600 .aurora
.navbar
~ * .toolbar-top-aurora
,
2601 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
,
2602 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
,
2603 .md
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-md
,
2604 .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
2605 top: var
(--f7-navbar-height
);
2607 .navbar
~ .toolbar-top
.toolbar-hidden
,
2608 .ios
.navbar
~ .toolbar-top-ios
.toolbar-hidden
,
2609 .md
.navbar
~ .toolbar-top-md
.toolbar-hidden
,
2610 .aurora
.navbar
~ .toolbar-top-aurora
.toolbar-hidden
,
2611 .navbar
~ * .toolbar-top
.toolbar-hidden
,
2612 .ios
.navbar
~ * .toolbar-top-ios
.toolbar-hidden
,
2613 .md
.navbar
~ * .toolbar-top-md
.toolbar-hidden
,
2614 .aurora
.navbar
~ * .toolbar-top-aurora
.toolbar-hidden
,
2615 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
.toolbar-hidden
,
2616 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
.toolbar-hidden
,
2617 .md
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-md
.toolbar-hidden
,
2618 .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
2619 transform: translate3d
(0, calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-toolbar-height
))), 0);
2621 .navbar
~ .toolbar-top
.toolbar-hidden
.tabbar-labels
,
2622 .ios
.navbar
~ .toolbar-top-ios
.toolbar-hidden
.tabbar-labels
,
2623 .md
.navbar
~ .toolbar-top-md
.toolbar-hidden
.tabbar-labels
,
2624 .aurora
.navbar
~ .toolbar-top-aurora
.toolbar-hidden
.tabbar-labels
,
2625 .navbar
~ * .toolbar-top
.toolbar-hidden
.tabbar-labels
,
2626 .ios
.navbar
~ * .toolbar-top-ios
.toolbar-hidden
.tabbar-labels
,
2627 .md
.navbar
~ * .toolbar-top-md
.toolbar-hidden
.tabbar-labels
,
2628 .aurora
.navbar
~ * .toolbar-top-aurora
.toolbar-hidden
.tabbar-labels
,
2629 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
.toolbar-hidden
.tabbar-labels
,
2630 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
.toolbar-hidden
.tabbar-labels
,
2631 .md
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-md
.toolbar-hidden
.tabbar-labels
,
2632 .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
2633 transform: translate3d
(0, calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-tabbar-labels-height
))), 0);
2635 .navbar-hidden
+ .toolbar-top:not
(.toolbar-hidden
),
2636 .ios
.navbar-hidden
+ .toolbar-top-ios:not
(.toolbar-hidden
),
2637 .md
.navbar-hidden
+ .toolbar-top-md:not
(.toolbar-hidden
),
2638 .aurora
.navbar-hidden
+ .toolbar-top-aurora:not
(.toolbar-hidden
),
2639 .navbar-hidden
~ * .toolbar-top:not
(.toolbar-hidden
),
2640 .ios
.navbar-hidden
~ * .toolbar-top-ios:not
(.toolbar-hidden
),
2641 .md
.navbar-hidden
~ * .toolbar-top-md:not
(.toolbar-hidden
),
2642 .aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
2643 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-height
)), 0);
2645 .navbar-large-hidden
+ .toolbar-top:not
(.toolbar-hidden
),
2646 .ios
.navbar-large-hidden
+ .toolbar-top-ios:not
(.toolbar-hidden
),
2647 .md
.navbar-large-hidden
+ .toolbar-top-md:not
(.toolbar-hidden
),
2648 .navbar-large-hidden
~ * .toolbar-top:not
(.toolbar-hidden
),
2649 .ios
.navbar-large-hidden
~ * .toolbar-top-ios:not
(.toolbar-hidden
),
2650 .md
.navbar-large-hidden
~ * .toolbar-top-md:not
(.toolbar-hidden
),
2651 .aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
2652 transform: translate3d
(0, calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
))), 0);
2654 .ios .toolbar a.icon-only {
2655 min-height: var
(--f7-toolbar-height
);
2657 justify-content: center
;
2658 align-items: center
;
2662 .ios
.tabbar-labels a
.tab-link
,
2663 .ios .tabbar-labels a.link {
2665 padding-bottom: 4px;
2667 .ios
.tabbar-labels a
.tab-link i
+ span
,
2668 .ios .tabbar-labels a.link i + span {
2671 @media (min-width: 768px) {
2672 .ios
.tabbar
.toolbar-inner
,
2673 .ios .tabbar-labels .toolbar-inner {
2674 justify-content: center
;
2676 .ios
.tabbar a
.tab-link
,
2677 .ios
.tabbar-labels a
.tab-link
,
2678 .ios
.tabbar a
.link
,
2679 .ios .tabbar-labels a.link {
2684 .ios .tabbar-scrollable .toolbar-inner {
2685 justify-content: flex-start
;
2687 .ios
.tabbar-scrollable a
.tab-link
,
2688 .ios .tabbar-scrollable a.link {
2691 .md .toolbar a.link {
2692 justify-content: center
;
2696 .md .toolbar a.link:before {
2703 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
2704 background-repeat: no-repeat
;
2705 background-position: center
;
2706 background-size: 100% 100%;
2708 pointer-events: none
;
2709 transition-duration: 600ms;
2711 .md .toolbar a.link.active-state:before {
2713 transition-duration: 150ms;
2715 .md .toolbar a.icon-only {
2719 .md
.tabbar a
.tab-link
,
2720 .md
.tabbar-labels a
.tab-link
,
2722 .md .tabbar-labels a.link {
2726 .md
.tabbar a
.icon-only
,
2727 .md .tabbar-labels a.icon-only {
2728 flex-shrink: initial
;
2730 .md
.tabbar a
.tab-link
,
2731 .md .tabbar-labels a.tab-link {
2732 transition-duration: 300ms;
2736 .md
.tabbar
.tab-link-highlight
,
2737 .md .tabbar-labels .tab-link-highlight {
2741 background: var
(--f7-tabbar-link-active-border-color
, var
(--f7-theme-color
));
2742 transition-duration: 300ms;
2745 .md
.tabbar-labels a
.tab-link
,
2746 .md .tabbar-labels a.link {
2748 padding-bottom: 7px;
2755 .md .tabbar-scrollable .toolbar-inner {
2758 .md
.tabbar-scrollable a
.tab-link
,
2759 .md .tabbar-scrollable a.link {
2762 .aurora .toolbar a.icon-only {
2763 min-height: var
(--f7-toolbar-height
);
2765 justify-content: center
;
2766 align-items: center
;
2769 .aurora
.tabbar
.toolbar-inner
,
2770 .aurora .tabbar-labels .toolbar-inner {
2774 .aurora
.tabbar a
.tab-link
,
2775 .aurora
.tabbar-labels a
.tab-link
,
2776 .aurora
.tabbar a
.link
,
2777 .aurora .tabbar-labels a.link {
2778 transition-duration: 200ms;
2780 .aurora
.tabbar-labels a
.tab-link
,
2781 .aurora .tabbar-labels a.link {
2783 padding-bottom: 5px;
2785 .aurora
.tabbar-labels a
.tab-link i
+ span
,
2786 .aurora .tabbar-labels a.link i + span {
2789 .aurora .tabbar-scrollable .toolbar-inner {
2790 justify-content: flex-start
;
2792 .aurora
.tabbar-scrollable a
.tab-link
,
2793 .aurora .tabbar-scrollable a.link {
2796 /* === Subnavbar === */
2799 --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
2800 --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
2801 --f7-subnavbar-border-color: var(--f7-bars-border-color);
2802 --f7-subnavbar-link-color: var(--f7-bars-link-color);
2803 --f7-subnavbar-text-color: var(--f7-bars-text-color);
2805 --f7-subnavbar-title-line-height: 1.2;
2808 --f7-subnavbar-height: 44px;
2809 --f7-subnavbar-inner-padding-left: 8px;
2810 --f7-subnavbar-inner-padding-right: 8px;
2811 --f7-subnavbar-title-font-size: 34px;
2812 --f7-subnavbar-title-font-weight: 700;
2813 --f7-subnavbar-title-letter-spacing: -0.03em;
2814 --f7-subnavbar-title-margin-left: 7px;
2815 --f7-subnavbar-shadow-image: none
;
2817 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
2818 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
2822 --f7-subnavbar-height: 48px;
2823 --f7-subnavbar-inner-padding-left: 16px;
2824 --f7-subnavbar-inner-padding-right: 16px;
2825 --f7-subnavbar-title-font-size: 20px;
2826 --f7-subnavbar-title-font-weight: 500;
2827 --f7-subnavbar-title-letter-spacing: 0;
2828 --f7-subnavbar-title-margin-left: 0px;
2829 --f7-subnavbar-shadow-image: var
(--f7-bars-shadow-bottom-image
);
2831 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
2832 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
2836 --f7-subnavbar-height: 38px;
2837 --f7-subnavbar-inner-padding-left: 15px;
2838 --f7-subnavbar-inner-padding-right: 15px;
2839 --f7-subnavbar-title-font-size: 26px;
2840 --f7-subnavbar-title-font-weight: bold
;
2841 --f7-subnavbar-title-letter-spacing: -0.03em;
2842 --f7-subnavbar-title-margin-left: 0px;
2843 --f7-subnavbar-shadow-image: none
;
2844 --f7-subnavbar-link-height: auto
;
2845 --f7-subnavbar-link-line-height: inherit
;
2853 box-sizing: border-box
;
2855 justify-content: space-between
;
2856 align-items: center
;
2857 background-image: var
(--f7-subnavbar-bg-image
, var
(--f7-bars-bg-image
));
2858 background-color: var
(--f7-subnavbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
2859 color: var
(--f7-subnavbar-text-color
, var
(--f7-bars-text-color
));
2864 text-overflow: ellpsis
;
2865 white-space: nowrap
;
2866 font-size: var
(--f7-subnavbar-title-font-size
);
2867 font-weight: var
(--f7-subnavbar-title-font-weight
);
2869 display: inline-block
;
2870 line-height: var
(--f7-subnavbar-title-line-height
);
2871 letter-spacing: var
(--f7-subnavbar-title-letter-spacing
);
2872 margin-right: var
(--f7-subnavbar-title-margin-left
);
2878 justify-content: flex-start
;
2879 align-items: center
;
2881 .subnavbar .right:first-child {
2886 color: var
(--f7-subnavbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
2889 line-height: var
(--f7-subnavbar-link-line-height
, var
(--f7-subnavbar-height
));
2890 height: var
(--f7-subnavbar-link-height
, var
(--f7-subnavbar-height
));
2892 .subnavbar a.icon-only {
2893 min-width: var
(--f7-subnavbar-height
);
2895 .subnavbar
.no-hairline:after
,
2896 .subnavbar.no-border:after {
2897 display: none
!important
;
2899 .subnavbar
.no-shadow:before
,
2900 .subnavbar.navbar-hidden:before {
2901 display: none
!important
;
2905 -webkit-backface-visibility: hidden
;
2906 backface-visibility: hidden
;
2911 background-color: var
(--f7-subnavbar-border-color
, var
(--f7-bars-border-color
));
2920 transform-origin: 50% 100%;
2921 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2931 pointer-events: none
;
2932 background: var
(--f7-subnavbar-shadow-image
);
2938 align-items: center
;
2939 box-sizing: border-box
;
2940 justify-content: space-between
;
2942 padding: 0 calc
(var
(--f7-subnavbar-inner-padding-left
) + var
(--f7-safe-area-right
)) 0 calc
(var
(--f7-subnavbar-inner-padding-right
) + var
(--f7-safe-area-left
));
2944 .subnavbar-inner.stacked {
2947 .navbar .subnavbar {
2950 .views
> .subnavbar
,
2952 .page > .subnavbar {
2955 .navbar
~ * .subnavbar
,
2956 .page-with-subnavbar
.navbar
~ .subnavbar
,
2957 .page-with-subnavbar
.navbar
~ * .subnavbar
,
2958 .navbar
~ .page-with-subnavbar:not
(.no-navbar
) .subnavbar
,
2959 .navbar ~ .subnavbar {
2960 top: var
(--f7-navbar-height
);
2962 .navbar
~ .page-with-navbar-large:not
(.no-navbar
) .subnavbar
,
2963 .page-with-subnavbar
.page-with-navbar-large
.navbar
~ .subnavbar
,
2964 .page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar {
2965 top: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
2966 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
2968 .navbar .title-large ~ .subnavbar {
2969 top: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
2970 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
2972 .page-with-subnavbar
,
2974 --f7-page-subnavbar-offset: var
(--f7-subnavbar-height
);
2977 height: calc
(var
(--f7-subnavbar-height
) + 1px);
2981 .ios .subnavbar .title {
2982 align-self: flex-start
;
2985 .ios
.subnavbar
.left a
+ a
,
2986 .ios .subnavbar .right a + a {
2989 .ios .subnavbar .left {
2992 .ios .subnavbar .right {
2995 .ios .subnavbar .right:first-child {
2998 .ios .subnavbar a.link {
2999 justify-content: flex-start
;
3001 .ios .subnavbar a.icon-only {
3002 justify-content: center
;
3006 height: var
(--f7-subnavbar-height
);
3008 .md .subnavbar .right {
3011 .md .subnavbar .right:first-child {
3014 .md .subnavbar a.link {
3015 justify-content: center
;
3018 .md .subnavbar a.link:before {
3025 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
3026 background-repeat: no-repeat
;
3027 background-position: center
;
3028 background-size: 100% 100%;
3030 pointer-events: none
;
3031 transition-duration: 600ms;
3033 .md .subnavbar a.link.active-state:before {
3035 transition-duration: 150ms;
3037 .md .subnavbar a.icon-only {
3040 .md .subnavbar-inner > a.link:first-child {
3041 margin-right: calc
(-1 * var
(--f7-subnavbar-inner-padding-right
));
3043 .md .subnavbar-inner > a.link:last-child {
3044 margin-left: calc
(-1 * var
(--f7-subnavbar-inner-padding-left
));
3046 .aurora .subnavbar {
3047 height: calc
(var
(--f7-subnavbar-height
) + 1px);
3051 .aurora .subnavbar .title {
3052 align-self: flex-start
;
3055 .aurora
.subnavbar
.left a
+ a
,
3056 .aurora .subnavbar .right a + a {
3059 .aurora .subnavbar .left {
3062 .aurora .subnavbar .right {
3065 .aurora .subnavbar .right:first-child {
3068 .aurora .subnavbar a.link {
3069 justify-content: flex-start
;
3071 .aurora .subnavbar a.icon-only {
3072 justify-content: center
;
3075 /* === Content Block === */
3077 --f7-block-font-size: inherit
;
3078 --f7-block-strong-bg-color: #fff;
3079 --f7-block-title-font-size: inherit
;
3080 --f7-block-header-margin: 10px;
3081 --f7-block-footer-margin: 10px;
3082 --f7-block-header-font-size: 14px;
3083 --f7-block-footer-font-size: 14px;
3084 --f7-block-title-white-space: nowrap
;
3085 --f7-block-title-medium-text-color: #000;
3086 --f7-block-title-medium-text-transform: none
;
3087 --f7-block-title-large-text-color: #000;
3088 --f7-block-title-large-text-transform: none
;
3092 --f7-block-strong-border-color: #282829;
3093 --f7-block-title-medium-text-color: #fff;
3094 --f7-block-title-large-text-color: #fff;
3095 --f7-block-strong-bg-color: #1c1c1d;
3098 --f7-block-text-color: #6d6d72;
3099 --f7-block-padding-horizontal: 15px;
3100 --f7-block-padding-vertical: 15px;
3101 --f7-block-margin-vertical: 35px;
3102 --f7-block-strong-text-color: #000;
3103 --f7-block-strong-border-color: #c8c7cc;
3104 --f7-block-title-text-transform: uppercase
;
3105 --f7-block-title-text-color: #6d6d72;
3106 --f7-block-title-font-weight: 400;
3107 --f7-block-title-line-height: 17px;
3108 --f7-block-title-margin-bottom: 10px;
3109 --f7-block-title-medium-font-size: 22px;
3110 --f7-block-title-medium-font-weight: bold
;
3111 --f7-block-title-medium-line-height: 1.4;
3112 --f7-block-title-large-font-size: 29px;
3113 --f7-block-title-large-font-weight: bold
;
3114 --f7-block-title-large-line-height: 1.3;
3115 --f7-block-inset-side-margin: 15px;
3116 --f7-block-inset-border-radius: 7px;
3117 --f7-block-header-text-color: #8f8f94;
3118 --f7-block-footer-text-color: #8f8f94;
3122 --f7-block-title-text-color: #8E8E93;
3123 --f7-block-header-text-color: #8E8E93;
3124 --f7-block-footer-text-color: #8E8E93;
3125 --f7-block-strong-text-color: #fff;
3128 --f7-block-text-color: inherit
;
3129 --f7-block-padding-horizontal: 16px;
3130 --f7-block-padding-vertical: 16px;
3131 --f7-block-margin-vertical: 32px;
3132 --f7-block-strong-text-color: inherit
;
3133 --f7-block-strong-border-color: rgba
(0, 0, 0, 0.12);
3134 --f7-block-title-text-transform: none
;
3135 --f7-block-title-text-color: rgba
(0, 0, 0, 0.54);
3136 --f7-block-title-font-weight: 500;
3137 --f7-block-title-line-height: 16px;
3138 --f7-block-title-margin-bottom: 16px;
3139 --f7-block-title-medium-font-size: 24px;
3140 --f7-block-title-medium-font-weight: 500;
3141 --f7-block-title-medium-line-height: 1.3;
3142 --f7-block-title-large-font-size: 34px;
3143 --f7-block-title-large-font-weight: 500;
3144 --f7-block-title-large-line-height: 1.2;
3145 --f7-block-inset-side-margin: 16px;
3146 --f7-block-inset-border-radius: 4px;
3147 --f7-block-header-text-color: rgba
(0, 0, 0, 0.54);
3148 --f7-block-footer-text-color: rgba
(0, 0, 0, 0.54);
3152 --f7-block-title-text-color: #fff;
3153 --f7-block-header-text-color: rgba
(255, 255, 255, 0.54);
3154 --f7-block-footer-text-color: rgba
(255, 255, 255, 0.54);
3157 --f7-block-text-color: inherit
;
3158 --f7-block-padding-horizontal: 15px;
3159 --f7-block-padding-vertical: 15px;
3160 --f7-block-margin-vertical: 15px;
3161 --f7-block-strong-text-color: inherit
;
3162 --f7-block-strong-border-color: rgba
(0, 0, 0, 0.12);
3163 --f7-block-title-text-transform: none
;
3164 --f7-block-title-text-color: rgba
(0, 0, 0, 0.7);
3165 --f7-block-title-font-weight: 600;
3166 --f7-block-title-line-height: 1.5;
3167 --f7-block-title-margin-bottom: 5px;
3168 --f7-block-title-medium-font-size: 20px;
3169 --f7-block-title-medium-font-weight: 600;
3170 --f7-block-title-medium-line-height: 1.4;
3171 --f7-block-title-large-font-size: 28px;
3172 --f7-block-title-large-font-weight: bold
;
3173 --f7-block-title-large-line-height: 1.3;
3174 --f7-block-inset-side-margin: 15px;
3175 --f7-block-inset-border-radius: 4px;
3176 --f7-block-header-text-color: rgba
(0, 0, 0, 0.6);
3177 --f7-block-footer-text-color: rgba
(0, 0, 0, 0.6);
3179 .aurora
.theme-dark
,
3180 .aurora.theme-dark {
3181 --f7-block-title-text-color: #fff;
3182 --f7-block-header-text-color: rgba
(255, 255, 255, 0.52);
3183 --f7-block-footer-text-color: rgba
(255, 255, 255, 0.52);
3184 --f7-block-strong-text-color: #fff;
3187 box-sizing: border-box
;
3190 color: var
(--f7-block-text-color
);
3191 margin: var
(--f7-block-margin-vertical
) 0;
3194 padding-left: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-left
));
3195 padding-right: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-right
));
3196 font-size: var
(--f7-block-font-size
);
3198 .block
.no-hairlines:before
,
3199 .block
.no-hairlines
ul:before
,
3200 .md
.block
.no-hairlines-md:before
,
3201 .md
.block
.no-hairlines-md
ul:before
,
3202 .ios
.block
.no-hairlines-ios:before
,
3203 .ios
.block
.no-hairlines-ios
ul:before
,
3204 .aurora
.block
.no-hairlines-aurora:before
,
3205 .aurora .block.no-hairlines-aurora ul:before {
3206 display: none
!important
;
3208 .block
.no-hairlines:after
,
3209 .block
.no-hairlines
ul:after
,
3210 .md
.block
.no-hairlines-md:after
,
3211 .md
.block
.no-hairlines-md
ul:after
,
3212 .ios
.block
.no-hairlines-ios:after
,
3213 .ios
.block
.no-hairlines-ios
ul:after
,
3214 .aurora
.block
.no-hairlines-aurora:after
,
3215 .aurora .block.no-hairlines-aurora ul:after {
3216 display: none
!important
;
3218 .block
.no-hairline-top:before
,
3219 .block
.no-hairline-top
ul:before
,
3220 .md
.block
.no-hairline-top-md:before
,
3221 .md
.block
.no-hairline-top-md
ul:before
,
3222 .ios
.block
.no-hairline-top-ios:before
,
3223 .ios
.block
.no-hairline-top-ios
ul:before
,
3224 .aurora
.block
.no-hairline-top-aurora:before
,
3225 .aurora .block.no-hairline-top-aurora ul:before {
3226 display: none
!important
;
3228 .block
.no-hairline-bottom:after
,
3229 .block
.no-hairline-bottom
ul:after
,
3230 .md
.block
.no-hairline-bottom-md:after
,
3231 .md
.block
.no-hairline-bottom-md
ul:after
,
3232 .ios
.block
.no-hairline-bottom-ios:after
,
3233 .ios
.block
.no-hairline-bottom-ios
ul:after
,
3234 .aurora
.block
.no-hairline-bottom-aurora:after
,
3235 .aurora .block.no-hairline-bottom-aurora ul:after {
3236 display: none
!important
;
3238 .block
> h1:first-child
,
3239 .block
> h2:first-child
,
3240 .block
> h3:first-child
,
3241 .block
> h4:first-child
,
3242 .block > p:first-child {
3245 .block
> h1:last-child
,
3246 .block
> h2:last-child
,
3247 .block
> h3:last-child
,
3248 .block
> h4:last-child
,
3249 .block > p:last-child {
3253 color: var
(--f7-block-strong-text-color
);
3254 padding-top: var
(--f7-block-padding-vertical
);
3255 padding-bottom: var
(--f7-block-padding-vertical
);
3256 background-color: var
(--f7-block-strong-bg-color
);
3258 .block-strong:before {
3261 background-color: var
(--f7-block-strong-border-color
);
3270 transform-origin: 50% 0%;
3271 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3273 .block-strong:after {
3276 background-color: var
(--f7-block-strong-border-color
);
3285 transform-origin: 50% 100%;
3286 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3292 white-space: var
(--f7-block-title-white-space
);
3293 text-overflow: ellipsis
;
3294 text-transform: var
(--f7-block-title-text-transform
);
3295 color: var
(--f7-block-title-text-color
);
3296 font-size: var
(--f7-block-title-font-size
, inherit
);
3297 font-weight: var
(--f7-block-title-font-weight
);
3298 line-height: var
(--f7-block-title-line-height
);
3299 margin-top: var
(--f7-block-margin-vertical
);
3300 margin-bottom: var
(--f7-block-title-margin-bottom
);
3301 margin-left: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-left
));
3302 margin-right: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-right
));
3304 .block-title
+ .list
,
3305 .block-title
+ .block
,
3306 .block-title
+ .card
,
3307 .block-title
+ .timeline
,
3308 .block-title + .block-header {
3311 .block-title-medium {
3312 font-size: var
(--f7-block-title-medium-font-size
);
3313 text-transform: var
(--f7-block-title-medium-text-transform
);
3314 color: var
(--f7-block-title-medium-text-color
);
3315 font-weight: var
(--f7-block-title-medium-font-weight
);
3316 line-height: var
(--f7-block-title-medium-line-height
);
3318 .block-title-large {
3319 font-size: var
(--f7-block-title-large-font-size
);
3320 text-transform: var
(--f7-block-title-large-text-transform
);
3321 color: var
(--f7-block-title-large-text-color
);
3322 font-weight: var
(--f7-block-title-large-font-weight
);
3323 line-height: var
(--f7-block-title-large-line-height
);
3325 .block
> .block-title:first-child
,
3326 .list > .block-title:first-child {
3332 color: var
(--f7-block-header-text-color
);
3333 font-size: var
(--f7-block-header-font-size
);
3334 margin-bottom: var
(--f7-block-header-margin
);
3335 margin-top: var
(--f7-block-margin-vertical
);
3337 .block-header
+ .list
,
3338 .block-header
+ .block
,
3339 .block-header
+ .card
,
3340 .block-header + .timeline {
3341 margin-top: var
(--f7-block-header-margin
);
3344 color: var
(--f7-block-footer-text-color
);
3345 font-size: var
(--f7-block-footer-font-size
);
3346 margin-top: var
(--f7-block-footer-margin
);
3347 margin-bottom: var
(--f7-block-margin-vertical
);
3353 padding-left: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-left
));
3354 padding-right: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-right
));
3356 .block-footer
ul:first-child
,
3357 .block-header
ul:first-child
,
3358 .block-footer
p:first-child
,
3359 .block-header
p:first-child
,
3360 .block-footer
h1:first-child
,
3361 .block-header
h1:first-child
,
3362 .block-footer
h2:first-child
,
3363 .block-header
h2:first-child
,
3364 .block-footer
h3:first-child
,
3365 .block-header
h3:first-child
,
3366 .block-footer
h4:first-child
,
3367 .block-header h4:first-child {
3370 .block-footer
ul:last-child
,
3371 .block-header
ul:last-child
,
3372 .block-footer
p:last-child
,
3373 .block-header
p:last-child
,
3374 .block-footer
h1:last-child
,
3375 .block-header
h1:last-child
,
3376 .block-footer
h2:last-child
,
3377 .block-header
h2:last-child
,
3378 .block-footer
h3:last-child
,
3379 .block-header
h3:last-child
,
3380 .block-footer
h4:last-child
,
3381 .block-header h4:last-child {
3384 .block-footer
ul:first-child:last-child
,
3385 .block-header
ul:first-child:last-child
,
3386 .block-footer
p:first-child:last-child
,
3387 .block-header
p:first-child:last-child
,
3388 .block-footer
h1:first-child:last-child
,
3389 .block-header
h1:first-child:last-child
,
3390 .block-footer
h2:first-child:last-child
,
3391 .block-header
h2:first-child:last-child
,
3392 .block-footer
h3:first-child:last-child
,
3393 .block-header
h3:first-child:last-child
,
3394 .block-footer
h4:first-child:last-child
,
3395 .block-header h4:first-child:last-child {
3399 .list
.block-header
,
3400 .block
.block-header
,
3401 .card
.block-header
,
3402 .timeline .block-header {
3405 .list
.block-footer
,
3406 .block
.block-footer
,
3407 .card
.block-footer
,
3408 .timeline .block-footer {
3411 .list
+ .block-footer
,
3412 .block
+ .block-footer
,
3413 .card
+ .block-footer
,
3414 .timeline + .block-footer {
3415 margin-top: calc
(-1 * (var
(--f7-block-margin-vertical
) - var
(--f7-block-footer-margin
)));
3417 .block + .block-footer {
3418 margin-top: calc
(-1 * (var
(--f7-block-margin-vertical
) - var
(--f7-block-footer-margin
)));
3419 margin-bottom: var
(--f7-block-margin-vertical
);
3421 .block
.block-header
,
3422 .block .block-footer {
3426 border-radius: var
(--f7-block-inset-border-radius
);
3427 margin-left: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
3428 margin-right: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
3429 --f7-safe-area-left: 0px;
3430 --f7-safe-area-right: 0px;
3432 .block-strong.inset:before {
3433 display: none
!important
;
3435 .block-strong.inset:after {
3436 display: none
!important
;
3438 @media (min-width: 768px) {
3439 .block.tablet-inset {
3440 border-radius: var
(--f7-block-inset-border-radius
);
3441 margin-left: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
3442 margin-right: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
3443 --f7-safe-area-left: 0px;
3444 --f7-safe-area-right: 0px;
3446 .block-strong.tablet-inset:before {
3447 display: none
!important
;
3449 .block-strong.tablet-inset:after {
3450 display: none
!important
;
3453 /* === List View === */
3455 --f7-list-bg-color: #fff;
3456 --f7-list-item-text-max-lines: 2;
3457 --f7-list-chevron-icon-color: #c7c7cc;
3458 --f7-list-chevron-icon-font-size: 20px;
3459 --f7-list-item-title-font-size: inherit
;
3460 --f7-list-item-title-font-weight: 400;
3461 --f7-list-item-title-text-color: inherit
;
3462 --f7-list-item-title-line-height: inherit
;
3463 --f7-list-item-title-white-space: nowrap
;
3464 --f7-list-item-subtitle-font-weight: 400;
3465 --f7-list-item-subtitle-text-color: inherit
;
3466 --f7-list-item-subtitle-line-height: inherit
;
3467 --f7-list-item-text-font-weight: 400;
3468 --f7-list-item-after-font-weight: 400;
3469 --f7-list-item-header-text-color: inherit
;
3470 --f7-list-item-header-font-size: 12px;
3471 --f7-list-item-header-font-weight: 400;
3472 --f7-list-item-header-line-height: 1.2;
3473 --f7-list-item-footer-font-size: 12px;
3474 --f7-list-item-footer-font-weight: 400;
3475 --f7-list-item-footer-line-height: 1.2;
3476 --f7-list-button-font-size: inherit
;
3477 --f7-list-button-font-weight: 400;
3478 --f7-list-item-divider-line-height: inherit
;
3479 --f7-list-group-title-line-height: inherit
;
3483 --f7-list-bg-color: #1c1c1d;
3484 --f7-list-border-color: #282829;
3485 --f7-list-item-border-color: #282829;
3486 --f7-list-item-divider-border-color: #282829;
3487 --f7-list-item-divider-bg-color: #232323;
3488 --f7-list-group-title-bg-color: #232323;
3489 --f7-list-chevron-icon-color: #434345;
3492 --f7-list-in-list-padding-left: 30px;
3493 --f7-list-inset-side-margin: 15px;
3494 --f7-list-inset-border-radius: 7px;
3495 --f7-list-margin-vertical: 35px;
3496 --f7-list-font-size: 17px;
3497 --f7-list-chevron-icon-area: 20px;
3498 --f7-list-border-color: #c8c7cc;
3499 --f7-list-item-border-color: #c8c7cc;
3500 --f7-list-link-pressed-bg-color: #d9d9d9;
3501 --f7-list-item-subtitle-font-size: 15px;
3502 --f7-list-item-text-font-size: 15px;
3503 --f7-list-item-text-text-color: #8e8e93;
3504 --f7-list-item-text-line-height: 21px;
3505 --f7-list-item-after-font-size: inherit
;
3506 --f7-list-item-after-text-color: #8e8e93;
3507 --f7-list-item-after-line-height: inherit
;
3508 --f7-list-item-after-padding: 5px;
3509 --f7-list-item-footer-text-color: #8e8e93;
3510 --f7-list-item-min-height: 44px;
3511 --f7-list-item-media-margin: 15px;
3512 --f7-list-item-media-icons-margin: 5px;
3513 --f7-list-item-cell-margin: 15px;
3514 --f7-list-item-padding-vertical: 8px;
3515 --f7-list-item-padding-horizontal: 15px;
3516 --f7-list-media-item-padding-vertical: 10px;
3517 --f7-list-media-item-padding-horizontal: 15px;
3518 --f7-list-media-item-title-font-weight: 600;
3520 --f7-list-button-text-color: var(--f7-theme-color);
3522 --f7-list-button-text-align: center
;
3523 --f7-list-button-border-color: #c8c7cc;
3524 --f7-list-button-pressed-bg-color: #d9d9d9;
3525 --f7-list-item-divider-height: 31px;
3526 --f7-list-item-divider-text-color: #8e8e93;
3527 --f7-list-item-divider-font-size: inherit
;
3528 --f7-list-item-divider-font-weight: 400;
3529 --f7-list-item-divider-bg-color: #f7f7f7;
3530 --f7-list-item-divider-border-color: #c8c7cc;
3531 --f7-list-group-title-height: 31px;
3532 --f7-list-group-title-text-color: #8e8e93;
3533 --f7-list-group-title-font-size: inherit
;
3534 --f7-list-group-title-font-weight: 400;
3535 --f7-list-group-title-bg-color: #f7f7f7;
3539 --f7-list-button-border-color: #282829;
3540 --f7-list-link-pressed-bg-color: #363636;
3541 --f7-list-button-pressed-bg-color: #363636;
3544 --f7-list-in-list-padding-left: 40px;
3545 --f7-list-inset-side-margin: 16px;
3546 --f7-list-inset-border-radius: 4px;
3547 --f7-list-margin-vertical: 32px;
3548 --f7-list-font-size: 16px;
3549 --f7-list-chevron-icon-area: 26px;
3550 --f7-list-border-color: rgba
(0, 0, 0, 0.12);
3551 --f7-list-item-border-color: rgba
(0, 0, 0, 0.12);
3552 --f7-list-link-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3553 --f7-list-item-subtitle-font-size: 14px;
3554 --f7-list-item-text-font-size: 14px;
3555 --f7-list-item-text-text-color: #757575;
3556 --f7-list-item-text-line-height: 20px;
3557 --f7-list-item-after-font-size: 14px;
3558 --f7-list-item-after-text-color: #757575;
3559 --f7-list-item-after-line-height: inherit
;
3560 --f7-list-item-after-padding: 8px;
3561 --f7-list-item-footer-text-color: rgba
(0, 0, 0, 0.5);
3562 --f7-list-item-min-height: 48px;
3563 --f7-list-item-media-margin: 16px;
3564 --f7-list-item-media-icons-margin: 8px;
3565 --f7-list-item-cell-margin: 16px;
3566 --f7-list-item-padding-vertical: 8px;
3567 --f7-list-item-padding-horizontal: 16px;
3568 --f7-list-media-item-padding-vertical: 14px;
3569 --f7-list-media-item-padding-horizontal: 16px;
3571 --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
3573 --f7-list-button-text-color: #212121;
3574 --f7-list-button-text-align: left
;
3575 --f7-list-button-border-color: transparent
;
3576 --f7-list-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3577 --f7-list-item-divider-height: 48px;
3578 --f7-list-item-divider-text-color: rgba
(0, 0, 0, 0.54);
3579 --f7-list-item-divider-font-size: 14px;
3580 --f7-list-item-divider-font-weight: 400;
3581 --f7-list-item-divider-bg-color: #f4f4f4;
3582 --f7-list-item-divider-border-color: transparent
;
3583 --f7-list-group-title-height: 48px;
3584 --f7-list-group-title-text-color: rgba
(0, 0, 0, 0.54);
3585 --f7-list-group-title-font-size: 14px;
3586 --f7-list-group-title-font-weight: 400;
3587 --f7-list-group-title-bg-color: #f4f4f4;
3591 --f7-list-button-text-color: #fff;
3592 --f7-list-item-divider-text-color: #fff;
3593 --f7-list-group-title-text-color: #fff;
3594 --f7-list-link-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3595 --f7-list-button-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3596 --f7-list-item-text-text-color: rgba
(255, 255, 255, 0.54);
3597 --f7-list-item-after-text-color: rgba
(255, 255, 255, 0.54);
3598 --f7-list-item-footer-text-color: rgba
(255, 255, 255, 0.54);
3601 --f7-list-in-list-padding-left: 15px;
3602 --f7-list-inset-side-margin: 15px;
3603 --f7-list-inset-border-radius: 4px;
3604 --f7-list-margin-vertical: 15px;
3605 --f7-list-font-size: 14px;
3606 --f7-list-chevron-icon-area: 15px;
3607 --f7-list-chevron-icon-font-size: 16px;
3608 --f7-list-border-color: rgba
(0, 0, 0, 0.12);
3609 --f7-list-item-border-color: rgba
(0, 0, 0, 0.12);
3610 --f7-list-link-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3611 --f7-list-link-hover-bg-color: rgba
(0, 0, 0, 0.03);
3612 --f7-list-item-title-line-height: 1.3;
3613 --f7-list-item-subtitle-font-size: 14px;
3614 --f7-list-item-subtitle-line-height: 1.3;
3615 --f7-list-item-text-font-size: 12px;
3616 --f7-list-item-text-text-color: rgba
(0, 0, 0, 0.6);
3617 --f7-list-item-text-line-height: 16px;
3618 --f7-list-item-after-font-size: 13px;
3619 --f7-list-item-after-text-color: rgba
(0, 0, 0, 0.5);
3620 --f7-list-item-after-line-height: 1.2;
3621 --f7-list-item-after-padding: 5px;
3622 --f7-list-item-footer-text-color: rgba
(0, 0, 0, 0.6);
3623 --f7-list-item-min-height: 32px;
3624 --f7-list-item-media-margin: 10px;
3625 --f7-list-item-media-icons-margin: 5px;
3626 --f7-list-item-cell-margin: 15px;
3627 --f7-list-item-padding-vertical: 5px;
3628 --f7-list-item-padding-horizontal: 15px;
3629 --f7-list-media-item-padding-vertical: 5px;
3630 --f7-list-media-item-padding-horizontal: 15px;
3631 --f7-list-media-item-title-font-weight: 600;
3633 --f7-list-button-text-color: var(--f7-theme-color);
3635 --f7-list-button-text-align: center
;
3636 --f7-list-button-border-color: rgba
(0, 0, 0, 0.12);
3637 --f7-list-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3638 --f7-list-button-hover-bg-color: rgba
(0, 0, 0, 0.03);
3639 --f7-list-item-divider-height: 19px;
3640 --f7-list-item-divider-text-color: rgba
(0, 0, 0, 0.6);
3641 --f7-list-item-divider-font-size: inherit
;
3642 --f7-list-item-divider-font-weight: 500;
3643 --f7-list-item-divider-bg-color: #f7f7f7;
3644 --f7-list-item-divider-border-color: transparent
;
3645 --f7-list-group-title-height: 19px;
3646 --f7-list-group-title-text-color: rgba
(0, 0, 0, 0.6);
3647 --f7-list-group-title-font-size: inherit
;
3648 --f7-list-group-title-font-weight: 500;
3649 --f7-list-group-title-bg-color: #f7f7f7;
3651 .aurora
.theme-dark
,
3652 .aurora.theme-dark {
3653 --f7-list-button-border-color: #282829;
3654 --f7-list-item-text-text-color: rgba
(255, 255, 255, 0.52);
3655 --f7-list-item-after-text-color: rgba
(255, 255, 255, 0.52);
3656 --f7-list-item-footer-text-color: rgba
(255, 255, 255, 0.52);
3657 --f7-list-item-divider-text-color: rgba
(255, 255, 255, 0.6);
3658 --f7-list-group-title-text-color: rgba
(255, 255, 255, 0.6);
3659 --f7-list-link-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3660 --f7-list-link-hover-bg-color: rgba
(255, 255, 255, 0.03);
3661 --f7-list-button-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3662 --f7-list-button-hover-bg-color: rgba
(255, 255, 255, 0.03);
3667 font-size: var
(--f7-list-font-size
);
3668 margin: var
(--f7-list-margin-vertical
) 0;
3675 background: var
(--f7-list-bg-color
);
3680 background-color: var
(--f7-list-border-color
);
3689 transform-origin: 50% 0%;
3690 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3695 background-color: var
(--f7-list-border-color
);
3704 transform-origin: 50% 100%;
3705 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3708 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-list-in-list-padding-left
));
3710 .list ul ul:before {
3711 display: none
!important
;
3714 display: none
!important
;
3718 box-sizing: border-box
;
3724 align-items: center
;
3725 box-sizing: border-box
;
3726 padding-bottom: var
(--f7-list-item-padding-vertical
);
3727 padding-top: var
(--f7-list-item-padding-vertical
);
3729 .list .item-media + .item-inner {
3730 margin-right: var
(--f7-list-item-media-margin
);
3732 .list
.item-media i
+ i
,
3733 .list .item-media i + img {
3734 margin-right: var
(--f7-list-item-media-icons-margin
);
3737 padding-right: var
(--f7-list-item-after-padding
);
3744 justify-content: space-between
;
3745 box-sizing: border-box
;
3746 align-items: center
;
3747 align-self: stretch
;
3748 padding-top: var
(--f7-list-item-padding-vertical
);
3749 padding-bottom: var
(--f7-list-item-padding-vertical
);
3750 min-height: var
(--f7-list-item-min-height
);
3751 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
3756 white-space: var
(--f7-list-item-title-white-space
);
3759 text-overflow: ellipsis
;
3761 font-size: var
(--f7-list-item-title-font-size
);
3762 font-weight: var
(--f7-list-item-title-font-weight
);
3763 color: var
(--f7-list-item-title-text-color
);
3764 line-height: var
(--f7-list-item-title-line-height
);
3767 white-space: nowrap
;
3770 font-size: var
(--f7-list-item-after-font-size
);
3771 font-weight: var
(--f7-list-item-after-font-weight
);
3772 color: var
(--f7-list-item-after-text-color
);
3773 line-height: var
(--f7-list-item-after-line-height
);
3777 .list .item-footer {
3778 white-space: normal
;
3780 .list .item-header {
3781 color: var
(--f7-list-item-header-text-color
);
3782 font-size: var
(--f7-list-item-header-font-size
);
3783 font-weight: var
(--f7-list-item-header-font-weight
);
3784 line-height: var
(--f7-list-item-header-line-height
);
3786 .list .item-footer {
3787 color: var
(--f7-list-item-footer-text-color
);
3788 font-size: var
(--f7-list-item-footer-font-size
);
3789 font-weight: var
(--f7-list-item-footer-font-weight
);
3790 line-height: var
(--f7-list-item-footer-line-height
);
3793 .list .list-button {
3794 transition-duration: 300ms;
3795 transition-property: background-color
;
3804 .list .item-link.active-state {
3805 background-color: var
(--f7-list-link-pressed-bg-color
);
3807 .list .item-link .item-inner {
3808 padding-left: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
3810 .list .item-content {
3812 justify-content: space-between
;
3813 box-sizing: border-box
;
3814 align-items: center
;
3815 min-height: var
(--f7-list-item-min-height
);
3816 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3818 .list .item-subtitle {
3821 white-space: nowrap
;
3823 text-overflow: ellipsis
;
3824 font-size: var
(--f7-list-item-subtitle-font-size
);
3825 font-weight: var
(--f7-list-item-subtitle-font-weight
);
3826 color: var
(--f7-list-item-subtitle-text-color
);
3827 line-height: var
(--f7-list-item-subtitle-line-height
);
3832 text-overflow: hidden
;
3833 -webkit-line-clamp: var
(--f7-list-item-text-max-lines
);
3834 display: -webkit-box
;
3835 font-size: var
(--f7-list-item-text-font-size
);
3836 font-weight: var
(--f7-list-item-text-font-weight
);
3837 color: var
(--f7-list-item-text-text-color
);
3838 line-height: var
(--f7-list-item-text-line-height
);
3839 max-height: calc
(var
(--f7-list-item-text-line-height
) * var
(--f7-list-item-text-max-lines
));
3841 .list .item-title-row {
3844 justify-content: space-between
;
3845 box-sizing: border-box
;
3847 .list .item-title-row .item-after {
3852 justify-content: space-between
;
3853 box-sizing: border-box
;
3858 box-sizing: border-box
;
3861 margin-right: var
(--f7-list-item-cell-margin
);
3864 .list .item-cell:first-child {
3867 .list li:last-child .list-button:after {
3868 display: none
!important
;
3870 .list
li:last-child
> .item-inner:after
,
3871 .list
li:last-child
li:last-child
> .item-inner:after
,
3872 .list
li:last-child
> .item-content
> .item-inner:after
,
3873 .list
li:last-child
li:last-child
> .item-content
> .item-inner:after
,
3874 .list
li:last-child
> .swipeout-content
> .item-content
> .item-inner:after
,
3875 .list
li:last-child
li:last-child
> .swipeout-content
> .item-content
> .item-inner:after
,
3876 .list
li:last-child
> .item-link
> .item-content
> .item-inner:after
,
3877 .list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
3878 display: none
!important
;
3880 .list li
li:last-child
.item-inner:after
,
3881 .list li:last-child li .item-inner:after {
3884 background-color: var
(--f7-list-item-border-color
);
3893 transform-origin: 50% 100%;
3894 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3896 .list
.no-hairlines:before
,
3897 .list
.no-hairlines
ul:before
,
3898 .md
.list
.no-hairlines-md:before
,
3899 .md
.list
.no-hairlines-md
ul:before
,
3900 .ios
.list
.no-hairlines-ios:before
,
3901 .ios
.list
.no-hairlines-ios
ul:before
,
3902 .aurora
.list
.no-hairlines-aurora:before
,
3903 .aurora .list.no-hairlines-aurora ul:before {
3904 display: none
!important
;
3906 .list
.no-hairlines:after
,
3907 .list
.no-hairlines
ul:after
,
3908 .md
.list
.no-hairlines-md:after
,
3909 .md
.list
.no-hairlines-md
ul:after
,
3910 .ios
.list
.no-hairlines-ios:after
,
3911 .ios
.list
.no-hairlines-ios
ul:after
,
3912 .aurora
.list
.no-hairlines-aurora:after
,
3913 .aurora .list.no-hairlines-aurora ul:after {
3914 display: none
!important
;
3916 .list
.no-hairline-top:before
,
3917 .list
.no-hairline-top
ul:before
,
3918 .md
.list
.no-hairline-top-md:before
,
3919 .md
.list
.no-hairline-top-md
ul:before
,
3920 .ios
.list
.no-hairline-top-ios:before
,
3921 .ios
.list
.no-hairline-top-ios
ul:before
,
3922 .aurora
.list
.no-hairline-top-aurora:before
,
3923 .aurora .list.no-hairline-top-aurora ul:before {
3924 display: none
!important
;
3926 .list
.no-hairline-bottom:after
,
3927 .list
.no-hairline-bottom
ul:after
,
3928 .md
.list
.no-hairline-bottom-md:after
,
3929 .md
.list
.no-hairline-bottom-md
ul:after
,
3930 .ios
.list
.no-hairline-bottom-ios:after
,
3931 .ios
.list
.no-hairline-bottom-ios
ul:after
,
3932 .aurora
.list
.no-hairline-bottom-aurora:after
,
3933 .aurora .list.no-hairline-bottom-aurora ul:after {
3934 display: none
!important
;
3936 .list
.no-hairlines-between
.item-inner:after
,
3937 .md
.list
.no-hairlines-between-md
.item-inner:after
,
3938 .ios
.list
.no-hairlines-between-ios
.item-inner:after
,
3939 .aurora
.list
.no-hairlines-between-aurora
.item-inner:after
,
3940 .list
.no-hairlines-between
.list-button:after
,
3941 .md
.list
.no-hairlines-between-md
.list-button:after
,
3942 .ios
.list
.no-hairlines-between-ios
.list-button:after
,
3943 .aurora
.list
.no-hairlines-between-aurora
.list-button:after
,
3944 .list
.no-hairlines-between
.item-divider:after
,
3945 .md
.list
.no-hairlines-between-md
.item-divider:after
,
3946 .ios
.list
.no-hairlines-between-ios
.item-divider:after
,
3947 .aurora
.list
.no-hairlines-between-aurora
.item-divider:after
,
3948 .list
.no-hairlines-between
.list-group-title:after
,
3949 .md
.list
.no-hairlines-between-md
.list-group-title:after
,
3950 .ios
.list
.no-hairlines-between-ios
.list-group-title:after
,
3951 .aurora
.list
.no-hairlines-between-aurora
.list-group-title:after
,
3952 .list
.no-hairlines-between
.list-group-title:after
,
3953 .md
.list
.no-hairlines-between-md
.list-group-title:after
,
3954 .ios
.list
.no-hairlines-between-ios
.list-group-title:after
,
3955 .aurora .list.no-hairlines-between-aurora .list-group-title:after {
3956 display: none
!important
;
3958 .list
.no-hairlines-between
.simple-list
li:after
,
3959 .md
.list
.no-hairlines-between-md
.simple-list
li:after
,
3960 .ios
.list
.no-hairlines-between-ios
.simple-list
li:after
,
3961 .aurora .list.no-hairlines-between-aurora.simple-list li:after {
3962 display: none
!important
;
3964 .list
.no-hairlines-between
.links-list
a:after
,
3965 .md
.list
.no-hairlines-between-md
.links-list
a:after
,
3966 .ios
.list
.no-hairlines-between-ios
.links-list
a:after
,
3967 .aurora .list.no-hairlines-between-aurora.links-list a:after {
3968 display: none
!important
;
3971 padding: 0 var
(--f7-list-item-padding-horizontal
);
3972 line-height: var
(--f7-list-item-min-height
);
3973 color: var
(--f7-list-button-text-color
, var
(--f7-theme-color
));
3974 font-size: var
(--f7-list-button-font-size
);
3975 font-weight: var
(--f7-list-button-font-weight
);
3976 text-align: var
(--f7-list-button-text-align
);
3978 .list-button:after {
3981 background-color: var
(--f7-list-button-border-color
);
3990 transform-origin: 50% 100%;
3991 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3993 .list-button.active-state {
3994 background-color: var
(--f7-list-button-pressed-bg-color
);
3996 .list-button[class*="color-"] {
3997 --f7-list-button-text-color: var
(--f7-theme-color
);
4001 white-space: nowrap
;
4002 text-overflow: ellipsis
;
4004 box-sizing: border-box
;
4006 justify-content: space-between
;
4007 align-items: center
;
4008 align-content: center
;
4009 line-height: var
(--f7-list-item-min-height
);
4010 height: var
(--f7-list-item-min-height
);
4011 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4012 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4014 .simple-list li:after {
4015 left: var
(--f7-list-item-padding-horizontal
);
4018 right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4021 .simple-list li:last-child:after {
4022 display: none
!important
;
4028 transition-duration: 300ms;
4029 transition-property: background-color
;
4034 align-items: center
;
4035 align-content: center
;
4036 justify-content: space-between
;
4037 box-sizing: border-box
;
4038 white-space: nowrap
;
4039 text-overflow: ellipsis
;
4041 height: var
(--f7-list-item-min-height
);
4044 .links-list a .ripple-wave {
4047 .links-list a:after {
4050 .links-list a.active-state {
4051 background-color: var
(--f7-list-link-pressed-bg-color
);
4054 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4055 padding-left: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4057 .links-list a:after {
4058 right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4061 .links-list li:last-child a:after {
4062 display: none
!important
;
4064 .simple-list
li:after
,
4065 .links-list
a:after
,
4066 .list .item-inner:after {
4069 background-color: var
(--f7-list-item-border-color
);
4078 transform-origin: 50% 100%;
4079 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
4083 --f7-list-item-padding-vertical: var
(--f7-list-media-item-padding-vertical
);
4084 --f7-list-item-padding-horizontal: var
(--f7-list-media-item-padding-horizontal
);
4086 .media-list
.item-title
,
4087 li
.media-item
.item-title
{
4088 font-weight: var
(--f7-list-media-item-title-font-weight
, var
(--f7-list-item-title-font-weight
, inherit
));
4090 .media-list
.item-inner
,
4091 li
.media-item
.item-inner
{
4093 align-self: stretch
;
4095 .media-list
.item-media
,
4096 li
.media-item
.item-media
{
4097 align-self: flex-start
;
4099 .media-list
.item-media img
,
4100 li
.media-item
.item-media img
{
4103 .media-list
.item-link
.item-inner
,
4104 li
.media-item
.item-link
.item-inner
{
4105 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4107 .media-list
.item-link
.item-title-row
,
4108 li
.media-item
.item-link
.item-title-row
{
4109 padding-left: calc
(var
(--f7-list-chevron-icon-area
));
4111 .media-list
.chevron-center
.item-link
.item-inner
,
4112 .media-list
.chevron-center
.item-link
.item-inner
,
4113 .media-list
.item-link
.chevron-center
.item-inner
,
4114 li
.media-item
.chevron-center
.item-link
.item-inner
,
4115 li
.media-item
.item-link
.chevron-center
.item-inner
,
4116 li
.media-item
.chevron-center
.item-link
.item-inner
{
4117 padding-left: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4119 .media-list
.chevron-center
.item-title-row
,
4120 .media-list
.chevron-center
.item-title-row
,
4121 li
.media-item
.chevron-center
.item-title-row
,
4122 li
.media-item
.chevron-center
.item-title-row
{
4125 .list
.item-link
.item-inner:before
,
4126 .links-list
a:before
,
4127 .media-list
.item-link
.item-title-row:before
,
4128 li
.media-item
.item-link
.item-title-row:before
,
4129 .media-list
.chevron-center
.item-link
.item-inner:before
,
4130 .media-list
.chevron-center
.item-link
.item-inner:before
,
4131 .media-list
.item-link
.chevron-center
.item-inner:before
,
4132 li
.media-item
.chevron-center
.item-link
.item-inner:before
,
4133 li
.media-item
.chevron-center
.item-link
.item-inner:before
,
4134 li
.media-item
.item-link
.chevron-center
.item-inner:before
{
4135 font-family: 'framework7-core-icons';
4136 font-weight: normal
;
4139 letter-spacing: normal
;
4140 text-transform: none
;
4141 white-space: nowrap
;
4144 -webkit-font-smoothing: antialiased
;
4145 text-rendering: optimizeLegibility
;
4146 -moz-osx-font-smoothing: grayscale
;
4147 -moz-font-feature-settings: "liga";
4148 font-feature-settings: "liga";
4159 font-size: var
(--f7-list-chevron-icon-font-size
);
4161 color: var
(--f7-list-chevron-icon-color
);
4162 pointer-events: none
;
4163 left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4164 content: 'chevron_left';
4166 .media-list
.chevron-center
.item-title-row:before
,
4167 .media-list
.chevron-center
.item-title-row:before
,
4168 li
.media-item
.chevron-center
.item-title-row:before
,
4169 li
.media-item
.chevron-center
.item-title-row:before
{
4172 .media-list
.item-link
.item-inner:before
,
4173 li
.media-item
.item-link
.item-inner:before
{
4176 .media-list
.item-link
.item-title-row:before
,
4177 li
.media-item
.item-link
.item-title-row:before
{
4180 .list-group
ul:after
,
4181 .list-group ul:before {
4182 z-index: 25 !important
;
4184 .list-group + .list-group ul:before {
4185 display: none
!important
;
4189 li
.list-group-title
{
4190 white-space: nowrap
;
4193 text-overflow: ellipsis
;
4198 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4199 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4200 box-sizing: border-box
;
4202 align-items: center
;
4203 align-content: center
;
4205 li
.item-divider:after
,
4206 .item-divider:after
,
4207 li
.list-group-title:after
{
4208 display: none
!important
;
4213 height: var
(--f7-list-item-divider-height
);
4214 color: var
(--f7-list-item-divider-text-color
);
4215 font-size: var
(--f7-list-item-divider-font-size
);
4216 font-weight: var
(--f7-list-item-divider-font-weight
);
4217 background-color: var
(--f7-list-item-divider-bg-color
);
4218 line-height: var
(--f7-list-item-divider-line-height
);
4220 li
.item-divider:before
,
4221 .item-divider:before {
4224 background-color: var
(--f7-list-item-divider-border-color
);
4233 transform-origin: 50% 0%;
4234 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
4236 li
.list-group-title
,
4237 .list li.list-group-title {
4239 position: -webkit-sticky
;
4244 height: var
(--f7-list-group-title-height
);
4245 color: var
(--f7-list-group-title-text-color
);
4246 font-size: var
(--f7-list-group-title-font-size
);
4247 font-weight: var
(--f7-list-group-title-font-weight
);
4248 background-color: var
(--f7-list-group-title-bg-color
);
4249 line-height: var
(--f7-list-group-title-line-height
);
4251 .page-with-navbar-large li
.list-group-title
,
4252 .page-with-navbar-large .list li.list-group-title {
4253 top: calc
(-1 * var
(--f7-navbar-large-title-height
));
4256 margin-left: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
4257 margin-right: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
4258 border-radius: var
(--f7-list-inset-border-radius
);
4259 --f7-safe-area-left: 0px;
4260 --f7-safe-area-right: 0px;
4262 .list.inset .block-title {
4267 border-radius: var
(--f7-list-inset-border-radius
);
4269 .list.inset ul:before {
4270 display: none
!important
;
4272 .list.inset ul:after {
4273 display: none
!important
;
4275 .list
.inset li
.swipeout:first-child
,
4276 .list.inset li:first-child > a {
4277 border-radius: var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
) 0 0;
4279 .list
.inset li
.swipeout:last-child
,
4280 .list.inset li:last-child > a {
4281 border-radius: 0 0 var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
);
4283 .list
.inset li
.swipeout:first-child:last-child
,
4284 .list.inset li:first-child:last-child > a {
4285 border-radius: var
(--f7-list-inset-border-radius
);
4287 @media (min-width: 768px) {
4288 .list.tablet-inset {
4289 margin-left: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
4290 margin-right: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
4291 border-radius: var
(--f7-list-inset-border-radius
);
4292 --f7-safe-area-left: 0px;
4293 --f7-safe-area-right: 0px;
4295 .list.tablet-inset .block-title {
4299 .list.tablet-inset ul {
4300 border-radius: var
(--f7-list-inset-border-radius
);
4302 .list.tablet-inset ul:before {
4303 display: none
!important
;
4305 .list.tablet-inset ul:after {
4306 display: none
!important
;
4308 .list.tablet-inset li:first-child > a {
4309 border-radius: var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
) 0 0;
4311 .list.tablet-inset li:last-child > a {
4312 border-radius: 0 0 var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
);
4314 .list.tablet-inset li:first-child:last-child > a {
4315 border-radius: var
(--f7-list-inset-border-radius
);
4320 --f7-list-chevron-icon-color: transparent
;
4321 --f7-list-chevron-icon-area: 0px;
4323 .ios
.item-link
.active-state
.item-inner:after
,
4324 .ios
.list-button
.active-state:after
,
4325 .ios .links-list a.active-state:after {
4326 background-color: transparent
;
4328 .ios
.links-list a
.active-state
,
4329 .ios
.list
.item-link
.active-state
,
4330 .ios .list .list-button.active-state {
4331 transition-duration: 0ms;
4333 .md .list .item-media {
4336 .aurora .list .item-media {
4339 .aurora
.list
.item-link
.item-inner:before
,
4340 .aurora
.links-list
a:before
,
4341 .aurora
.media-list
.item-link
.item-title-row:before
,
4342 .aurora li
.media-item
.item-link
.item-title-row:before
,
4343 .aurora
.media-list
.chevron-center
.item-link
.item-inner:before
,
4344 .aurora
.media-list
.chevron-center
.item-link
.item-inner:before
,
4345 .aurora
.media-list
.item-link
.chevron-center
.item-inner:before
,
4346 .aurora li
.media-item
.chevron-center
.item-link
.item-inner:before
,
4347 .aurora li
.media-item
.chevron-center
.item-link
.item-inner:before
,
4348 .aurora li.media-item .item-link.chevron-center .item-inner:before {
4349 content: 'chevron_left_aurora';
4351 .aurora
.links-list a
,
4352 .aurora
.list
.item-link
,
4353 .aurora .list .list-button {
4354 transition-duration: 0ms;
4356 .aurora
.device-desktop
.links-list
a:hover:not
(.active-state
):not
(.no-hover
),
4357 .aurora.device-desktop .list .item-link:hover:not(.active-state):not(.no-hover) {
4358 background: var
(--f7-list-link-hover-bg-color
);
4360 .aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
4361 background: var
(--f7-list-button-hover-bg-color
);
4365 --f7-badge-text-color: #fff;
4366 --f7-badge-bg-color: #8e8e93;
4367 --f7-badge-padding: 0 4px;
4368 --f7-badge-in-icon-size: 16px;
4369 --f7-badge-in-icon-font-size: 10px;
4370 --f7-badge-font-weight: normal
;
4371 --f7-badge-font-size: 12px;
4374 --f7-badge-size: 20px;
4377 --f7-badge-size: 18px;
4380 --f7-badge-size: 18px;
4381 --f7-badge-font-weight: 600;
4382 --f7-badge-in-icon-size: 15px;
4385 display: inline-flex
;
4386 align-items: center
;
4387 align-content: center
;
4388 justify-content: center
;
4389 color: var
(--f7-badge-text-color
);
4390 background: var
(--f7-badge-bg-color
);
4392 box-sizing: border-box
;
4394 vertical-align: middle
;
4395 font-weight: var
(--f7-badge-font-weight
);
4396 font-size: var
(--f7-badge-font-size
);
4397 border-radius: var
(--f7-badge-size
);
4398 padding: var
(--f7-badge-padding
);
4399 height: var
(--f7-badge-size
);
4400 min-width: var
(--f7-badge-size
);
4404 .framework7-icons
.badge
,
4405 .material-icons .badge {
4410 font-family: var
(--f7-font-family
);
4411 --f7-badge-font-size: var
(--f7-badge-in-icon-font-size
);
4412 --f7-badge-size: var
(--f7-badge-in-icon-size
);
4414 .badge[class*="color-"] {
4415 --f7-badge-bg-color: var
(--f7-theme-color
);
4418 --f7-button-font-size: 14px;
4419 --f7-button-min-width: 32px;
4420 --f7-button-bg-color: transparent
;
4421 --f7-button-border-width: 0px;
4423 --f7-button-text-color: var(--f7-theme-color);
4424 --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
4425 --f7-button-border-color: var(--f7-theme-color);
4426 --f7-button-fill-text-color: #fff;
4427 --f7-button-fill-bg-color: var(--f7-theme-color);
4428 --f7-button-outline-border-color: var(--f7-theme-color);
4430 --f7-button-raised-box-shadow: 0 1px 3px rgba
(0, 0, 0, 0.12), 0 1px 2px rgba
(0,0,0,0.24);
4431 --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba
(0, 0, 0, 0.16), 0 3px 6px rgba
(0,0,0,0.23);
4432 --f7-segmented-raised-divider-color: rgba
(0, 0, 0, 0.1);
4435 --f7-button-height: 29px;
4436 --f7-button-padding-horizontal: 10px;
4437 --f7-button-border-radius: 5px;
4438 --f7-button-font-weight: 400;
4439 --f7-button-letter-spacing: 0;
4440 --f7-button-text-transform: none
;
4442 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4443 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
4445 --f7-button-outline-border-width: 1px;
4446 --f7-button-large-height: 44px;
4447 --f7-button-large-font-size: 17px;
4448 --f7-button-large-font-weight: 400;
4449 --f7-button-small-height: 26px;
4450 --f7-button-small-font-size: 13px;
4451 --f7-button-small-font-weight: 600;
4452 --f7-button-small-text-transform: uppercase
;
4453 --f7-button-small-outline-border-width: 2px;
4456 --f7-button-height: 36px;
4457 --f7-button-padding-horizontal: 8px;
4458 --f7-button-border-radius: 4px;
4459 --f7-button-font-weight: 500;
4460 --f7-button-letter-spacing: 0.03em;
4461 --f7-button-text-transform: uppercase
;
4462 --f7-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
4464 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4466 --f7-button-outline-border-width: 2px;
4467 --f7-button-large-height: 48px;
4468 --f7-button-large-font-size: 14px;
4469 --f7-button-large-font-weight: 500;
4470 --f7-button-small-height: 28px;
4471 --f7-button-small-font-size: 12px;
4472 --f7-button-small-font-weight: 500;
4473 --f7-button-small-text-transform: uppercase
;
4474 --f7-button-small-outline-border-width: 2px;
4478 --f7-button-pressed-bg-color: rgba
(255, 255, 255, 0.1);
4482 --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
4483 --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
4485 --f7-button-font-size: 14px;
4486 --f7-button-height: 28px;
4487 --f7-button-min-width: 24px;
4488 --f7-button-padding-horizontal: 10px;
4489 --f7-button-border-radius: 4px;
4490 --f7-button-font-weight: 400;
4491 --f7-button-letter-spacing: 0.02;
4492 --f7-button-text-transform: none
;
4494 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4495 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4497 --f7-button-outline-border-width: 2px;
4498 --f7-button-large-height: 34px;
4499 --f7-button-large-font-size: 14px;
4500 --f7-button-large-font-weight: 600;
4501 --f7-button-small-height: 22px;
4502 --f7-button-small-font-size: 12px;
4503 --f7-button-small-font-weight: 600;
4504 --f7-button-small-text-transform: none
;
4505 --f7-button-small-outline-border-width: 1px;
4508 -webkit-appearance: none
;
4509 -moz-appearance: none
;
4514 text-decoration: none
;
4517 -webkit-appearance: none
;
4518 -moz-appearance: none
;
4522 white-space: nowrap
;
4523 text-overflow: ellipsis
;
4526 font-family: inherit
;
4529 box-sizing: border-box
;
4530 vertical-align: middle
;
4531 justify-content: center
;
4532 align-items: center
;
4533 border: var
(--f7-button-border-width
, 0px) solid var
(--f7-button-border-color
, var
(--f7-theme-color
));
4534 font-size: var
(--f7-button-font-size
);
4535 color: var
(--f7-button-text-color
, var
(--f7-theme-color
));
4536 height: var
(--f7-button-height
);
4537 line-height: calc
(var
(--f7-button-height
) - var
(--f7-button-border-width
, 0) * 2);
4538 padding: var
(--f7-button-padding-vertical
, 0px) var
(--f7-button-padding-horizontal
);
4539 border-radius: var
(--f7-button-border-radius
);
4540 min-width: var
(--f7-button-min-width
);
4541 font-weight: var
(--f7-button-font-weight
);
4542 letter-spacing: var
(--f7-button-letter-spacing
);
4543 text-transform: var
(--f7-button-text-transform
);
4544 background-color: var
(--f7-button-bg-color
);
4545 box-shadow: var
(--f7-button-box-shadow
);
4547 .button.active-state {
4548 background-color: var
(--f7-button-pressed-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.15));
4549 color: var
(--f7-button-pressed-text-color
, var
(--f7-button-text-color
, var
(--f7-theme-color
)));
4551 input
[type
="submit"].button
,
4552 input
[type
="button"].button
{
4556 .button
> span
+ span
,
4566 color: var
(--f7-button-text-color
, var
(--f7-theme-color
));
4569 .ios
.button-round-ios
,
4570 .md
.button-round-md
,
4571 .aurora .button-round-aurora {
4572 --f7-button-border-radius: var
(--f7-button-height
);
4575 .ios
.button-fill-ios
,
4576 .md
.button-fill-md
,
4577 .aurora
.button-fill-aurora
,
4579 .button.tab-link-active {
4580 --f7-button-bg-color: var
(--f7-button-fill-bg-color
, var
(--f7-theme-color
));
4581 --f7-button-text-color: var
(--f7-button-fill-text-color
, #fff);
4582 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
4585 .ios
.button-fill-ios
,
4586 .md
.button-fill-md
,
4587 .aurora .button-fill-aurora {
4588 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
);
4591 .button.tab-link-active {
4592 --f7-button-pressed-bg-color: var
(--f7-button-bg-color
);
4595 .ios
.button-outline-ios
,
4596 .md
.button-outline-md
,
4597 .aurora .button-outline-aurora {
4598 --f7-button-border-color: var
(--f7-button-outline-border-color
, var
(--f7-theme-color
));
4599 --f7-button-border-width: var
(--f7-button-outline-border-width
);
4602 .ios
.button-large-ios
,
4603 .md
.button-large-md
,
4604 .aurora .button-large-aurora {
4605 --f7-button-height: var
(--f7-button-large-height
);
4606 --f7-button-font-size: var
(--f7-button-large-font-size
);
4607 --f7-button-font-weight: var
(--f7-button-large-font-weight
);
4610 .ios
.button-small-ios
,
4611 .md
.button-small-md
,
4612 .aurora .button-small-aurora {
4613 --f7-button-outline-border-width: var
(--f7-button-small-outline-border-width
);
4614 --f7-button-height: var
(--f7-button-small-height
);
4615 --f7-button-font-size: var
(--f7-button-small-font-size
);
4616 --f7-button-font-weight: var
(--f7-button-small-font-weight
);
4617 --f7-button-text-transform: var
(--f7-button-small-text-transform
);
4619 .ios
.button-small
.button-fill
,
4620 .ios
.button-small-ios
.button-fill
,
4621 .ios .button-small.button-fill-ios {
4622 --f7-button-border-width: var
(--f7-button-small-outline-border-width
);
4623 --f7-button-pressed-text-color: var
(--f7-theme-color
);
4624 --f7-button-pressed-bg-color: transparent
;
4630 border-radius: var
(--f7-button-border-radius
);
4631 box-shadow: var
(--f7-button-box-shadow
);
4640 .segmented .button:first-child {
4641 border-radius: 0 var
(--f7-button-border-radius
) var
(--f7-button-border-radius
) 0;
4643 .segmented .button:not(.button-outline):first-child {
4646 .segmented .button.button-outline:nth-child(n + 2) {
4649 .segmented .button:last-child {
4650 border-radius: var
(--f7-button-border-radius
) 0 0 var
(--f7-button-border-radius
);
4652 .segmented .button-round:first-child {
4653 border-radius: 0 var
(--f7-button-height
) var
(--f7-button-height
) 0;
4655 .segmented .button-round:last-child {
4656 border-radius: var
(--f7-button-height
) 0 0 var
(--f7-button-height
);
4658 .segmented .button:first-child:last-child {
4659 border-radius: var
(--f7-button-border-radius
);
4662 .ios
.segmented-round-ios
,
4663 .md
.segmented-round-md
,
4664 .aurora .segmented-round-aurora {
4665 border-radius: var
(--f7-button-height
);
4668 .ios
.segmented-raised-ios
,
4669 .md
.segmented-raised-md
,
4670 .aurora .segmented-raised-aurora {
4671 box-shadow: var
(--f7-button-raised-box-shadow
);
4673 .segmented-raised
.button:not
(.button-outline
),
4674 .ios
.segmented-raised-ios
.button:not
(.button-outline
),
4675 .md
.segmented-raised-md
.button:not
(.button-outline
),
4676 .aurora .segmented-raised-aurora .button:not(.button-outline) {
4677 border-right: 1px solid var
(--f7-segmented-raised-divider-color
);
4680 .ios
.button-raised-ios
,
4681 .md
.button-raised-md
,
4682 .aurora .button-raised-aurora {
4683 --f7-button-box-shadow: var
(--f7-button-raised-box-shadow
);
4685 .button-raised
.active-state
,
4686 .ios
.button-raised-ios
.active-state
,
4687 .md
.button-raised-md
.active-state
,
4688 .aurora .button-raised-aurora.active-state {
4689 --f7-button-box-shadow: var
(--f7-button-raised-pressed-box-shadow
);
4691 .subnavbar .segmented {
4695 transition-duration: 100ms;
4698 .ios .button-fill-ios {
4699 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
, var
(--f7-theme-color-tint
));
4702 .ios .button-small-ios {
4703 transition-duration: 200ms;
4706 transition-duration: 300ms;
4707 transform: translate3d
(0, 0, 0);
4710 .md .button-fill-md {
4711 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
, var
(--f7-theme-color-shade
));
4714 transition-duration: 100ms;
4715 transform: translate3d
(0, 0, 0);
4717 .aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
4718 background-color: var
(--f7-button-hover-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.07));
4720 .aurora
.button-fill
,
4721 .aurora .button-fill-aurora {
4722 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
, var
(--f7-theme-color-shade
));
4724 .aurora
.button-fill
,
4725 .aurora
.button-active
,
4726 .aurora
.button
.tab-link-active
,
4727 .aurora .button-fill-aurora {
4728 --f7-button-hover-bg-color: var
(--f7-button-fill-hover-bg-color
, var
(--f7-theme-color-tint
));
4730 /* === Touch Ripple === */
4732 --f7-touch-ripple-black: rgba
(0, 0, 0, 0.1);
4733 --f7-touch-ripple-white: rgba
(255, 255, 255, 0.3);
4734 --f7-touch-ripple-color: var
(--f7-touch-ripple-black
);
4737 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
4750 .speed-dial-buttons a {
4751 -webkit-user-select: none
;
4752 -moz-user-select: none
;
4753 -ms-user-select: none
;
4759 position: absolute
!important
;
4761 pointer-events: none
;
4766 transform: translate3d
(0px, 0px, 0) scale
(0);
4767 transition-duration: 1400ms;
4768 background-color: var
(--f7-touch-ripple-color
);
4769 will-change: transform
, opacity
;
4771 .ripple-wave.ripple-wave-fill {
4772 transition-duration: 300ms;
4775 .ripple-wave.ripple-wave-out {
4776 transition-duration: 600ms;
4779 .button-fill
.ripple-wave
,
4780 .picker-calendar-day
.ripple-wave
,
4781 .menu .ripple-wave {
4784 .checkbox
.ripple-wave
,
4785 .radio
.ripple-wave
,
4786 .data-table .sortable-cell .ripple-wave {
4789 [class
*="ripple-color-"] {
4790 --f7-touch-ripple-color: var
(--f7-theme-color-ripple-color
);
4794 display: inline-block
;
4795 vertical-align: middle
;
4796 background-size: 100% auto
;
4797 background-position: center
;
4798 background-repeat: no-repeat
;
4804 .icon-forward:after
,
4806 font-family: 'framework7-core-icons';
4807 font-weight: normal
;
4810 letter-spacing: normal
;
4811 text-transform: none
;
4812 white-space: nowrap
;
4815 -webkit-font-smoothing: antialiased
;
4816 text-rendering: optimizeLegibility
;
4817 -moz-osx-font-smoothing: grayscale
;
4818 -moz-font-feature-settings: "liga";
4819 font-feature-settings: "liga";
4826 .icon[class*="color-"] {
4827 color: var
(--f7-theme-color
);
4837 .ios
.icon-back:after
,
4838 .ios
.icon-prev:after
,
4839 .ios
.icon-forward:after
,
4840 .ios .icon-next:after {
4841 line-height: inherit
;
4843 .ios
.icon-prev:after
,
4844 .ios .icon-next:after {
4847 .ios .item-media .icon {
4850 .ios .item-media .f7-icons {
4855 .ios
.icon-back:after
,
4856 .ios .icon-prev:after {
4857 content: 'chevron_right_ios';
4859 .ios
.icon-forward:after
,
4860 .ios .icon-next:after {
4861 content: 'chevron_left_ios';
4870 .md
.icon-back:after
,
4871 .md
.icon-forward:after
,
4872 .md
.icon-next:after
,
4873 .md .icon-prev:after {
4876 .md .item-media .icon {
4879 .md .item-media .material-icons {
4884 .md .icon-back:after {
4885 content: 'arrow_right_md';
4887 .md .icon-forward:after {
4888 content: 'arrow_left_md';
4890 .md .icon-next:after {
4891 content: 'chevron_left_md';
4893 .md .icon-prev:after {
4894 content: 'chevron_right_md';
4897 .aurora .material-icons {
4902 .aurora
.icon-forward
,
4903 .aurora .icon-next {
4908 .aurora
.icon-back:after
,
4909 .aurora
.icon-prev:after
,
4910 .aurora
.icon-forward:after
,
4911 .aurora .icon-next:after {
4912 line-height: inherit
;
4914 .aurora .item-media .icon {
4917 .aurora .item-media .f7-icons {
4922 .aurora
.icon-back:after
,
4923 .aurora .icon-prev:after {
4924 content: 'chevron_right_aurora';
4926 .aurora
.icon-forward:after
,
4927 .aurora .icon-next:after {
4928 content: 'chevron_left_aurora';
4930 .custom-modal-backdrop {
4933 .custom-modal-backdrop
,
4938 .preloader-backdrop
,
4945 background: rgba
(0, 0, 0, 0.4);
4949 transition-duration: 400ms;
4951 .custom-modal-backdrop
.not-animated
,
4952 .actions-backdrop
.not-animated
,
4953 .dialog-backdrop
.not-animated
,
4954 .popover-backdrop
.not-animated
,
4955 .popup-backdrop
.not-animated
,
4956 .preloader-backdrop
.not-animated
,
4957 .sheet-backdrop.not-animated {
4958 transition-duration: 0ms;
4960 .custom-modal-backdrop
.backdrop-in
,
4961 .actions-backdrop
.backdrop-in
,
4962 .dialog-backdrop
.backdrop-in
,
4963 .popover-backdrop
.backdrop-in
,
4964 .popup-backdrop
.backdrop-in
,
4965 .preloader-backdrop
.backdrop-in
,
4966 .sheet-backdrop.backdrop-in {
4967 visibility: visible
;
4970 /* === Appbar === */
4973 --f7-appbar-offset: var(--f7-appbar-height);
4974 --f7-appbar-extra-offset: 0px;
4975 --f7-appbar-bg-color: var(--f7-bars-bg-color);
4976 --f7-appbar-bg-image: var(--f7-bars-bg-image);
4977 --f7-appbar-border-color: var(--f7-bars-border-color);
4978 --f7-appbar-link-color: var(--f7-bars-link-color);
4979 --f7-appbar-text-color: var(--f7-bars-text-color);
4981 --f7-appbar-shadow-image: none
;
4984 --f7-appbar-height: 44px;
4985 --f7-appbar-inner-padding-left: 8px;
4986 --f7-appbar-inner-padding-right: 8px;
4989 --f7-appbar-height: 48px;
4990 --f7-appbar-inner-padding-left: 16px;
4991 --f7-appbar-inner-padding-right: 16px;
4994 --f7-appbar-height: 38px;
4995 --f7-appbar-inner-padding-left: 15px;
4996 --f7-appbar-inner-padding-right: 15px;
5004 -webkit-backface-visibility: hidden
;
5005 backface-visibility: hidden
;
5006 box-sizing: border-box
;
5008 transform: translate3d
(0, 0, 0);
5009 height: var
(--f7-appbar-height
);
5010 background-image: var
(--f7-appbar-bg-image
, var
(--f7-bars-bg-image
));
5011 background-color: var
(--f7-appbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
5012 color: var
(--f7-appbar-text-color
, var
(--f7-bars-text-color
));
5013 font-size: var
(--f7-appbar-font-size
);
5016 .appbar .panel ~ .appbar {
5020 color: var
(--f7-appbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
5024 justify-content: flex-start
;
5025 line-height: var
(--f7-appbar-link-line-height
, var
(--f7-appbar-height
));
5026 height: var
(--f7-appbar-link-height
, var
(--f7-appbar-height
));
5032 align-items: center
;
5034 .appbar
.no-hairline:after
,
5035 .appbar.no-border:after {
5036 display: none
!important
;
5038 .appbar
.no-hairline
.title-large:after
,
5039 .appbar.no-border .title-large:after {
5040 display: none
!important
;
5042 .appbar.no-shadow:before {
5043 display: none
!important
;
5047 -webkit-backface-visibility: hidden
;
5048 backface-visibility: hidden
;
5053 background-color: var
(--f7-appbar-border-color
, var
(--f7-bars-border-color
));
5062 transform-origin: 50% 100%;
5063 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
5073 pointer-events: none
;
5074 background: var
(--f7-appbar-shadow-image
);
5080 --f7-appbar-app-offset: calc
(var
(--f7-appbar-height
) + var
(--f7-appbar-extra-offset
, 0px));
5087 height: var
(--f7-appbar-height
);
5089 align-items: center
;
5090 justify-content: space-between
;
5091 box-sizing: border-box
;
5092 padding: 0 calc
(var
(--f7-appbar-inner-padding-right
) + var
(--f7-safe-area-right
)) 0 calc
(var
(--f7-appbar-inner-padding-left
) + var
(--f7-safe-area-left
));
5094 .appbar-inner.stacked {
5097 /* === Dialog === */
5099 --f7-dialog-button-text-color: var
(--f7-theme-color
);
5100 --f7-dialog-button-text-align: center
;
5101 --f7-dialog-input-bg-color: #fff;
5104 --f7-dialog-bg-color: rgba
(255, 255, 255, 0.95);
5105 --f7-dialog-box-shadow: none
;
5106 --f7-dialog-width: 270px;
5107 --f7-dialog-inner-padding: 15px;
5108 --f7-dialog-border-radius: 13px;
5109 --f7-dialog-text-color: #000;
5110 --f7-dialog-text-align: center
;
5111 --f7-dialog-font-size: 14px;
5112 --f7-dialog-title-text-color: inherit
;
5113 --f7-dialog-title-font-size: 18px;
5114 --f7-dialog-title-font-weight: 600;
5115 --f7-dialog-title-line-height: inherit
;
5116 --f7-dialog-button-font-size: 17px;
5117 --f7-dialog-button-height: 44px;
5118 --f7-dialog-button-letter-spacing: 0;
5119 --f7-dialog-button-font-weight: 400;
5120 --f7-dialog-button-text-transform: none
;
5121 --f7-dialog-button-pressed-bg-color: rgba
(230, 230, 230, 0.95);
5122 --f7-dialog-input-border-radius: 4px;
5123 --f7-dialog-input-font-size: 14px;
5124 --f7-dialog-input-height: 32px;
5125 --f7-dialog-input-border-color: rgba
(0, 0, 0, 0.3);
5126 --f7-dialog-input-border-width: 1px;
5127 --f7-dialog-input-placeholder-color: #a9a9a9;
5128 --f7-dialog-preloader-size: 34px;
5131 --f7-dialog-bg-color: #fff;
5132 --f7-dialog-box-shadow: var
(--f7-elevation-24
);
5133 --f7-dialog-width: 280px;
5134 --f7-dialog-inner-padding: 24px;
5135 --f7-dialog-border-radius: 4px;
5136 --f7-dialog-text-color: #757575;
5137 --f7-dialog-text-align: right
;
5138 --f7-dialog-font-size: 16px;
5139 --f7-dialog-title-text-color: #212121;
5140 --f7-dialog-title-font-size: 20px;
5141 --f7-dialog-title-font-weight: 500;
5142 --f7-dialog-title-line-height: 1.3;
5143 --f7-dialog-button-font-size: 14px;
5144 --f7-dialog-button-height: 36px;
5145 --f7-dialog-button-letter-spacing: 0.03em;
5146 --f7-dialog-button-font-weight: 500;
5147 --f7-dialog-button-text-transform: uppercase
;
5148 --f7-dialog-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
5149 --f7-dialog-input-border-radius: 0px;
5150 --f7-dialog-input-font-size: 16px;
5151 --f7-dialog-input-height: 36px;
5152 --f7-dialog-input-border-color: transparent
;
5153 --f7-dialog-input-border-width: 0px;
5154 --f7-dialog-input-placeholder-color: rgba
(0, 0, 0, 0.35);
5155 --f7-dialog-preloader-size: 32px;
5158 --f7-dialog-bg-color: #fff;
5159 --f7-dialog-box-shadow: 0 0 20px 0 rgba
(0, 0, 0, 0.15), 0 25px 30px 0 rgba
(0,0,0,0.35);
5160 --f7-dialog-width: 300px;
5161 --f7-dialog-inner-padding: 20px;
5162 --f7-dialog-border-radius: 4px;
5163 --f7-dialog-text-color: #000;
5164 --f7-dialog-text-align: right
;
5165 --f7-dialog-font-size: 14px;
5166 --f7-dialog-title-text-color: inherit
;
5167 --f7-dialog-title-font-size: 14px;
5168 --f7-dialog-title-font-weight: 700;
5169 --f7-dialog-title-line-height: inherit
;
5170 --f7-dialog-button-text-color: #fff;
5171 --f7-dialog-button-font-size: 13px;
5172 --f7-dialog-button-height: 28px;
5173 --f7-dialog-button-letter-spacing: 0;
5174 --f7-dialog-button-font-weight: 500;
5175 --f7-dialog-button-text-transform: none
;
5177 --f7-dialog-button-pressed-bg-color: var(--f7-theme-color-shade);
5179 --f7-dialog-input-border-radius: 4px;
5180 --f7-dialog-input-font-size: 13px;
5181 --f7-dialog-input-height: 24px;
5182 --f7-dialog-input-border-color: rgba
(0, 0, 0, 0.12);
5183 --f7-dialog-input-border-width: 1px;
5184 --f7-dialog-input-placeholder-color: rgba
(0, 0, 0, 0.32);
5185 --f7-dialog-preloader-size: 24px;
5195 transform: translate3d
(0, -50%, 0) scale
(1.185);
5196 transition-property: transform
, opacity
;
5198 transition-duration: 400ms;
5199 box-shadow: var
(--f7-dialog-box-shadow
);
5200 width: var
(--f7-dialog-width
);
5201 margin-left: calc
(-1 * var
(--f7-dialog-width
) / 2);
5202 border-radius: var
(--f7-dialog-border-radius
);
5203 text-align: var
(--f7-dialog-text-align
);
5204 color: var
(--f7-dialog-text-color
);
5205 font-size: var
(--f7-dialog-font-size
);
5206 will-change: transform
, opacity
;
5210 transform: translate3d
(0, -50%, 0) scale
(1);
5216 .dialog.not-animated {
5217 transition-duration: 0ms;
5221 padding: var
(--f7-dialog-inner-padding
);
5224 color: var
(--f7-dialog-title-text-color
);
5225 font-size: var
(--f7-dialog-title-font-size
);
5226 font-weight: var
(--f7-dialog-title-font-weight
);
5227 line-height: var
(--f7-dialog-title-line-height
);
5232 flex-direction: row-reverse
;
5234 .dialog-buttons-vertical .dialog-buttons {
5236 height: auto
!important
;
5239 box-sizing: border-box
;
5242 white-space: nowrap
;
5243 text-overflow: ellipsis
;
5244 color: var
(--f7-dialog-button-text-color
);
5245 font-size: var
(--f7-dialog-button-font-size
);
5246 height: var
(--f7-dialog-button-height
);
5247 line-height: var
(--f7-dialog-button-height
);
5248 letter-spacing: var
(--f7-dialog-button-letter-spacing
);
5249 text-align: var
(--f7-dialog-button-text-align
);
5250 font-weight: var
(--f7-dialog-button-font-weight
);
5251 text-transform: var
(--f7-dialog-button-text-transform
);
5255 .dialog-no-buttons .dialog-buttons {
5258 .dialog-input-field {
5261 input
.dialog-input
[type
] {
5262 box-sizing: border-box
;
5265 border-radius: var
(--f7-dialog-input-border-radius
);
5266 -webkit-appearance: none
;
5267 -moz-appearance: none
;
5271 font-family: inherit
;
5273 font-size: var
(--f7-dialog-input-font-size
);
5274 height: var
(--f7-dialog-input-height
);
5275 background-color: var
(--f7-dialog-input-bg-color
);
5276 border: var
(--f7-dialog-input-border-width
) solid var
(--f7-dialog-input-border-color
);
5278 input
.dialog-input
[type
]::-webkit-input-placeholder
{
5279 color: var
(--f7-dialog-input-placeholder-color
);
5281 input
.dialog-input
[type
]::-moz-placeholder
{
5282 color: var
(--f7-dialog-input-placeholder-color
);
5284 input
.dialog-input
[type
]::-ms-input-placeholder
{
5285 color: var
(--f7-dialog-input-placeholder-color
);
5287 input
.dialog-input
[type
]::placeholder
{
5288 color: var
(--f7-dialog-input-placeholder-color
);
5290 .dialog-input-double input.dialog-input {
5291 border-radius: var
(--f7-dialog-input-border-radius
) var
(--f7-dialog-input-border-radius
) 0 0;
5293 .dialog-input-double + .dialog-input-double input.dialog-input {
5294 border-radius: 0 0 var
(--f7-dialog-input-border-radius
) var
(--f7-dialog-input-border-radius
);
5296 .dialog-preloader .preloader {
5297 --f7-preloader-size: var
(--f7-dialog-preloader-size
);
5299 html
.with-modal-dialog
.page-content
{
5301 -webkit-overflow-scrolling: auto
;
5303 .ios .dialog.modal-out {
5304 transform: translate3d
(0, -50%, 0) scale
(1);
5306 .ios .dialog-inner {
5307 border-radius: var
(--f7-dialog-border-radius
) var
(--f7-dialog-border-radius
) 0 0;
5308 background: var
(--f7-dialog-bg-color
);
5310 .ios .dialog-inner:after {
5313 background-color: rgba
(0, 0, 0, 0.2);
5322 transform-origin: 50% 100%;
5323 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
5325 .ios .dialog-title + .dialog-text {
5328 .ios .dialog-buttons {
5330 justify-content: center
;
5332 .ios .dialog-button {
5335 -webkit-box-flex: 1;
5337 background: var
(--f7-dialog-bg-color
);
5339 .ios .dialog-button:after {
5342 background-color: rgba
(0, 0, 0, 0.2);
5351 transform-origin: 100% 50%;
5352 transform: scaleX
(calc
(1 / var
(--f7-device-pixel-ratio
)));
5354 .ios .dialog-button.active-state {
5355 background-color: var
(--f7-dialog-button-pressed-bg-color
);
5357 .ios .dialog-button:first-child {
5358 border-radius: 0 0 0 var
(--f7-dialog-border-radius
);
5360 .ios .dialog-button:last-child {
5361 border-radius: 0 0 var
(--f7-dialog-border-radius
) 0;
5363 .ios .dialog-button:last-child:after {
5364 display: none
!important
;
5366 .ios .dialog-button:first-child:last-child {
5367 border-radius: 0 0 var
(--f7-dialog-border-radius
) var
(--f7-dialog-border-radius
);
5369 .ios .dialog-button.dialog-button-bold {
5372 .ios .dialog-button[class*="color-"] {
5373 --f7-dialog-button-text-color: var
(--f7-theme-color
);
5375 .ios .dialog-buttons-vertical .dialog-buttons {
5378 .ios .dialog-buttons-vertical .dialog-button {
5381 .ios .dialog-buttons-vertical .dialog-button:after {
5384 background-color: rgba
(0, 0, 0, 0.2);
5393 transform-origin: 50% 100%;
5394 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
5396 .ios .dialog-buttons-vertical .dialog-button:last-child {
5397 border-radius: 0 0 var
(--f7-dialog-border-radius
) var
(--f7-dialog-border-radius
);
5399 .ios .dialog-buttons-vertical .dialog-button:last-child:after {
5400 display: none
!important
;
5402 .ios .dialog-no-buttons .dialog-inner {
5403 border-radius: var
(--f7-dialog-border-radius
);
5405 .ios .dialog-no-buttons .dialog-inner:after {
5406 display: none
!important
;
5408 .ios .dialog-input-field {
5411 .ios .dialog-input {
5414 .ios .dialog-input + .dialog-input {
5417 .ios .dialog-input-double + .dialog-input-double {
5420 .ios .dialog-input-double + .dialog-input-double .dialog-input {
5424 .ios
.dialog-preloader
.dialog-title
~ .preloader
,
5425 .ios .dialog-preloader .dialog-text ~ .preloader {
5428 .ios
.dialog-progress
.dialog-title
~ .progressbar
,
5429 .ios
.dialog-progress
.dialog-text
~ .progressbar
,
5430 .ios
.dialog-progress
.dialog-title
~ .progressbar-infinite
,
5431 .ios .dialog-progress .dialog-text ~ .progressbar-infinite {
5435 background: var
(--f7-dialog-bg-color
);
5437 .md .dialog.modal-out {
5438 transform: translate3d
(0, -50%, 0) scale
(0.815);
5440 .md .dialog-title + .dialog-text {
5446 .md .dialog-buttons {
5450 box-sizing: border-box
;
5451 justify-content: flex-end
;
5453 .md .dialog-button {
5458 transition-duration: 300ms;
5459 transform: translate3d
(0, 0, 0);
5461 .md .dialog-button.active-state {
5462 background-color: var
(--f7-dialog-button-pressed-bg-color
);
5464 .md .dialog-button.dialog-button-bold {
5467 .md .dialog-button + .dialog-button {
5470 .md .dialog-button[class*="color-"] {
5471 --f7-dialog-button-text-color: var
(--f7-theme-color
);
5473 .md .dialog-buttons-vertical .dialog-buttons {
5476 .md .dialog-buttons-vertical .dialog-button {
5483 padding-right: 16px;
5487 transition-duration: 200ms;
5490 .md .dialog-input + .dialog-input {
5493 .md
.dialog-preloader
.dialog-title
,
5494 .md
.dialog-progress
.dialog-title
,
5495 .md
.dialog-preloader
.dialog-inner
,
5496 .md .dialog-progress .dialog-inner {
5499 .md
.dialog-preloader
.dialog-title
~ .preloader
,
5500 .md .dialog-preloader .dialog-text ~ .preloader {
5503 .md
.dialog-progress
.dialog-title
~ .progressbar
,
5504 .md
.dialog-progress
.dialog-text
~ .progressbar
,
5505 .md
.dialog-progress
.dialog-title
~ .progressbar-infinite
,
5506 .md .dialog-progress .dialog-text ~ .progressbar-infinite {
5510 background: var
(--f7-dialog-bg-color
);
5512 .aurora .dialog.modal-out {
5513 transform: translate3d
(0, -50%, 0) scale
(0.815);
5515 .aurora .dialog-title + .dialog-text {
5518 .aurora .dialog-text {
5521 .aurora .dialog-buttons {
5522 padding: var
(--f7-dialog-inner-padding
);
5525 box-sizing: border-box
;
5526 justify-content: flex-end
;
5528 .aurora .dialog-button {
5533 transition-duration: 300ms;
5534 transform: translate3d
(0, 0, 0);
5535 background: var
(--f7-theme-color
);
5537 .aurora .dialog-button.active-state {
5538 background-color: var
(--f7-dialog-button-pressed-bg-color
, var
(--f7-theme-color-shade
));
5540 .aurora .dialog-button.dialog-button-bold {
5543 .aurora .dialog-button + .dialog-button {
5546 .aurora .dialog-buttons-vertical .dialog-buttons {
5548 flex-direction: column
;
5549 align-items: flex-end
;
5551 .aurora .dialog-buttons-vertical .dialog-button {
5555 .aurora .dialog-buttons-vertical .dialog-button + .dialog-button {
5558 .aurora .dialog-input-field {
5561 .aurora .dialog-input-field input.dialog-input {
5564 .aurora .dialog-input {
5566 transition-duration: 200ms;
5569 .aurora .dialog-input + .dialog-input {
5572 .aurora .dialog-input-double + .dialog-input-double {
5575 .aurora .dialog-input-double + .dialog-input-double .dialog-input {
5579 .aurora
.dialog-preloader
.dialog-title
,
5580 .aurora
.dialog-progress
.dialog-title
,
5581 .aurora
.dialog-preloader
.dialog-inner
,
5582 .aurora .dialog-progress .dialog-inner {
5585 .aurora
.dialog-preloader
.dialog-title
~ .preloader
,
5586 .aurora .dialog-preloader .dialog-text ~ .preloader {
5589 .aurora
.dialog-progress
.dialog-title
~ .progressbar
,
5590 .aurora
.dialog-progress
.dialog-text
~ .progressbar
,
5591 .aurora
.dialog-progress
.dialog-title
~ .progressbar-infinite
,
5592 .aurora .dialog-progress .dialog-text ~ .progressbar-infinite {
5597 --f7-popup-border-radius: 0px;
5598 --f7-popup-tablet-width: 630px;
5599 --f7-popup-tablet-height: 630px;
5601 --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
5605 --f7-popup-box-shadow: none
;
5608 --f7-popup-box-shadow: 0px 20px 44px rgba
(0, 0, 0, 0.5);
5611 --f7-popup-tablet-border-radius: 4px;
5612 --f7-popup-box-shadow: 0px 20px 44px rgba
(0, 0, 0, 0.5);
5620 top: var
(--f7-statusbar-height
);
5622 height: calc
(100% - var
(--f7-statusbar-height
));
5624 box-sizing: border-box
;
5625 transition-property: transform
;
5626 transform: translate3d
(0, 100%, 0);
5629 will-change: transform
;
5631 border-radius: var
(--f7-popup-border-radius
);
5635 transition-duration: 400ms;
5637 .popup.not-animated {
5638 transition-duration: 0ms;
5642 transform: translate3d
(0, 0, 0);
5645 transform: translate3d
(0, 100%, 0);
5647 .popup.swipe-close-to-top.modal-out {
5648 transform: translate3d
(0, -100%, 0);
5650 @media (min-width: 630px) and
(min-height: 630px) {
5651 .popup:not(.popup-tablet-fullscreen) {
5652 width: var
(--f7-popup-tablet-width
);
5653 height: var
(--f7-popup-tablet-height
);
5656 margin-left: calc
(-1 * var
(--f7-popup-tablet-width
) / 2);
5657 margin-top: calc
(-1 * var
(--f7-popup-tablet-height
) / 2);
5658 transform: translate3d
(0, 100vh, 0);
5659 box-shadow: var
(--f7-popup-box-shadow
);
5660 border-radius: var
(--f7-popup-tablet-border-radius
, var
(--f7-popup-border-radius
));
5662 .popup:not(.popup-tablet-fullscreen).modal-in {
5663 transform: translate3d
(0, 0, 0);
5665 .popup:not(.popup-tablet-fullscreen).modal-out {
5666 transform: translate3d
(0, 100vh, 0);
5668 .popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out {
5669 transform: translate3d
(0, -100vh, 0);
5672 @media (max-width: 629px), (max-height: 629px) {
5677 html
.with-modal-popup
.framework7-root
> .views
.page-content
,
5678 html
.with-modal-popup
.framework7-root
> .view
.page-content
,
5679 html
.with-modal-popup
.framework7-root
> .panel
.page-content
{
5681 -webkit-overflow-scrolling: auto
;
5683 /* === Login Screen === */
5685 --f7-login-screen-bg-color: #fff;
5686 --f7-login-screen-content-bg-color: #fff;
5687 --f7-login-screen-blocks-max-width: 480px;
5689 --f7-login-screen-list-button-text-color: var(--f7-theme-color);
5691 --f7-login-screen-title-text-align: center
;
5692 --f7-login-screen-title-text-color: inherit
;
5693 --f7-login-screen-title-letter-spacing: 0;
5697 --f7-login-screen-bg-color: #171717;
5698 --f7-login-screen-content-bg-color: transparent
;
5701 --f7-login-screen-blocks-margin-vertical: 25px;
5702 --f7-login-screen-title-font-size: 30px;
5703 --f7-login-screen-title-font-weight: normal
;
5706 --f7-login-screen-blocks-margin-vertical: 24px;
5707 --f7-login-screen-title-font-size: 34px;
5708 --f7-login-screen-title-font-weight: normal
;
5711 --f7-login-screen-blocks-margin-vertical: 15px;
5712 --f7-login-screen-title-font-size: 28px;
5713 --f7-login-screen-title-font-weight: 500;
5718 top: var
(--f7-statusbar-height
);
5720 height: calc
(100% - var
(--f7-statusbar-height
));
5722 box-sizing: border-box
;
5723 transition-property: transform
;
5724 transform: translate3d
(0, 100%, 0);
5725 background: var
(--f7-login-screen-bg-color
);
5727 will-change: transform
;
5729 .login-screen
.modal-in
,
5730 .login-screen.modal-out {
5731 transition-duration: 400ms;
5733 .login-screen.not-animated {
5734 transition-duration: 0ms;
5736 .login-screen.modal-in {
5738 transform: translate3d
(0, 0, 0);
5740 .login-screen.modal-out {
5741 transform: translate3d
(0, 100%, 0);
5743 .login-screen-content {
5744 background: var
(--f7-login-screen-content-bg-color
);
5746 .login-screen-content .list-button {
5748 color: var
(--f7-login-screen-list-button-text-color
, var
(--f7-theme-color
));
5750 .login-screen-content
.login-screen-title
,
5751 .login-screen-content
.list
,
5752 .login-screen-content .block {
5753 margin: var
(--f7-login-screen-blocks-margin-vertical
) auto
;
5755 .login-screen-content
.login-screen-title
,
5756 .login-screen-content
.list
,
5757 .login-screen-content
.block
,
5758 .login-screen-content
.block-footer
,
5759 .login-screen-content .block-header {
5760 max-width: var
(--f7-login-screen-blocks-max-width
);
5762 .login-screen-content .list ul {
5765 .login-screen-content .list ul:before {
5766 display: none
!important
;
5768 .login-screen-content .list ul:after {
5769 display: none
!important
;
5771 .login-screen-content
.block-footer
,
5772 .login-screen-content .block-header {
5777 .login-screen-title {
5778 text-align: var
(--f7-login-screen-title-text-align
);
5779 font-size: var
(--f7-login-screen-title-font-size
);
5780 font-weight: var
(--f7-login-screen-title-font-weight
);
5781 color: var
(--f7-login-screen-title-text-color
);
5782 letter-spacing: var
(--f7-login-screen-title-letter-spacing
);
5784 .theme-dark
.login-screen-content
.list ul
,
5785 .theme-dark .login-screen-content .block-strong {
5786 background-color: transparent
;
5788 /* === Popover === */
5790 --f7-popover-width: 260px;
5793 --f7-popover-bg-color: rgba
(255, 255, 255, 0.95);
5794 --f7-popover-border-radius: 13px;
5795 --f7-popover-box-shadow: none
;
5796 --f7-popover-actions-icon-size: 28px;
5797 --f7-popover-actions-label-text-color: #8a8a8a;
5801 --f7-popover-bg-color: rgba
(30, 30, 30, 0.95);
5804 --f7-popover-bg-color: #fff;
5805 --f7-popover-border-radius: 4px;
5806 --f7-popover-box-shadow: var
(--f7-elevation-8
);
5807 --f7-popover-actions-icon-size: 24px;
5808 --f7-popover-actions-label-text-color: rgba
(0, 0, 0, 0.54);
5812 --f7-popover-bg-color: #202020;
5813 --f7-popover-actions-label-text-color: rgba
(255, 255, 255, 0.54);
5816 --f7-popover-width: 200px;
5817 --f7-popover-bg-color: #fff;
5818 --f7-popover-border-radius: 4px;
5819 --f7-popover-box-shadow: 0 0 3px 0 rgba
(0, 0, 0, 0.1), 0 5px 11px 0 rgba
(0,0,0,0.28);
5820 --f7-popover-actions-icon-size: 24px;
5821 --f7-popover-actions-label-text-color: rgba
(0, 0, 0, 0.6);
5823 .aurora
.theme-dark
,
5824 .aurora.theme-dark {
5825 --f7-popover-bg-color: #202020;
5826 --f7-popover-actions-label-text-color: rgba
(255, 255, 255, 0.6);
5829 width: var
(--f7-popover-width
);
5837 transition-duration: 300ms;
5838 background-color: var
(--f7-popover-bg-color
);
5839 border-radius: var
(--f7-popover-border-radius
);
5840 box-shadow: var
(--f7-popover-box-shadow
);
5841 will-change: transform
, opacity
;
5849 .popover .list:first-child ul:before {
5850 display: none
!important
;
5852 .popover .list:last-child ul:after {
5853 display: none
!important
;
5855 .popover .list:first-child ul {
5856 border-radius: var
(--f7-popover-border-radius
) var
(--f7-popover-border-radius
) 0 0;
5858 .popover
.list:first-child
li:first-child
,
5859 .popover
.list:first-child
li:first-child a
,
5860 .popover .list:first-child li:first-child > label {
5861 border-radius: var
(--f7-popover-border-radius
) var
(--f7-popover-border-radius
) 0 0;
5863 .popover .list:last-child ul {
5864 border-radius: 0 0 var
(--f7-popover-border-radius
) var
(--f7-popover-border-radius
);
5866 .popover
.list:last-child
li:last-child
,
5867 .popover
.list:last-child
li:last-child a
,
5868 .popover .list:last-child li:last-child > label {
5869 border-radius: 0 0 var
(--f7-popover-border-radius
) var
(--f7-popover-border-radius
);
5871 .popover
.list:first-child:last-child
li:first-child:last-child
,
5872 .popover
.list:first-child:last-child
li:first-child:last-child a
,
5873 .popover
.list:first-child:last-child
li:first-child:last-child
> label
,
5874 .popover .list:first-child:last-child ul {
5875 border-radius: var
(--f7-popover-border-radius
);
5877 .popover .list + .list {
5878 margin-top: var
(--f7-list-margin-vertical
);
5883 .popover.not-animated {
5884 transition-duration: 0ms;
5887 will-change: scroll-position
;
5889 -webkit-overflow-scrolling: touch
;
5891 .popover-from-actions .item-link i.icon {
5892 width: var
(--f7-popover-actions-icon-size
);
5893 height: var
(--f7-popover-actions-icon-size
);
5894 font-size: var
(--f7-popover-actions-icon-size
);
5896 .popover-from-actions-bold {
5899 .popover-from-actions-label {
5903 align-items: center
;
5904 padding: var
(--f7-actions-label-padding
);
5905 color: var
(--f7-popover-actions-label-text-color
);
5906 font-size: var
(--f7-actions-label-font-size
);
5907 justify-content: var
(--f7-actions-label-justify-content
);
5909 .popover-from-actions-label:after {
5912 background-color: var
(--f7-list-item-border-color
);
5921 transform-origin: 50% 100%;
5922 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
5924 .popover-from-actions-label:last-child:after {
5925 display: none
!important
;
5929 transition-property: opacity
;
5931 .ios .popover-angle {
5940 .ios .popover-angle:after {
5942 background: var
(--f7-popover-bg-color
);
5949 transform: rotate
(45deg);
5951 .ios .popover-angle.on-left {
5954 .ios .popover-angle.on-left:after {
5958 .ios .popover-angle.on-right {
5961 .ios .popover-angle.on-right:after {
5965 .ios .popover-angle.on-top {
5969 .ios .popover-angle.on-top:after {
5973 .ios .popover-angle.on-bottom {
5977 .ios .popover-angle.on-bottom:after {
5982 transform: scale
(0.85, 0.6);
5983 transition-property: opacity
, transform
;
5985 .md .popover.modal-in {
5987 transform: scale
(1);
5989 .md .popover.modal-out {
5991 transform: scale
(1);
5993 .md .popover-on-top {
5994 transform-origin: center bottom
;
5996 .md .popover-on-top.popover-on-right {
5997 transform-origin: left bottom
;
5999 .md .popover-on-top.popover-on-left {
6000 transform-origin: right bottom
;
6002 .md .popover-on-middle {
6003 transform-origin: center center
;
6005 .md .popover-on-middle.popover-on-right {
6006 transform-origin: left center
;
6008 .md .popover-on-middle.popover-on-left {
6009 transform-origin: right center
;
6011 .md .popover-on-bottom {
6012 transform-origin: center top
;
6014 .md .popover-on-bottom.popover-on-right {
6015 transform-origin: left top
;
6017 .md .popover-on-bottom.popover-on-left {
6018 transform-origin: right top
;
6022 transition-property: opacity
;
6024 .aurora .popover-angle {
6033 .aurora .popover-angle:after {
6035 background: var
(--f7-popover-bg-color
);
6042 transform: rotate
(45deg);
6044 .aurora .popover-angle.on-left {
6047 .aurora .popover-angle.on-left:after {
6051 .aurora .popover-angle.on-right {
6054 .aurora .popover-angle.on-right:after {
6058 .aurora .popover-angle.on-top {
6062 .aurora .popover-angle.on-top:after {
6066 .aurora .popover-angle.on-bottom {
6070 .aurora .popover-angle.on-bottom:after {
6074 /* === Actions === */
6076 --f7-actions-grid-button-font-size: 12px;
6077 --f7-actions-grid-button-text-color: #757575;
6080 --f7-actions-bg-color: rgba
(255, 255, 255, 0.95);
6081 --f7-actions-border-radius: 13px;
6082 --f7-actions-button-border-color: rgba
(0, 0, 0, 0.2);
6084 --f7-actions-button-text-color: var(--f7-theme-color);
6086 --f7-actions-button-pressed-bg-color: rgba
(230, 230, 230, 0.9);
6087 --f7-actions-button-padding: 0px;
6088 --f7-actions-button-text-align: center
;
6089 --f7-actions-button-height: 57px;
6090 --f7-actions-button-height-landscape: 44px;
6091 --f7-actions-button-font-size: 20px;
6092 --f7-actions-button-icon-size: 28px;
6093 --f7-actions-button-justify-content: center
;
6094 --f7-actions-label-padding: 8px 10px;
6095 --f7-actions-label-text-color: #8a8a8a;
6096 --f7-actions-label-font-size: 13px;
6097 --f7-actions-label-justify-content: center
;
6098 --f7-actions-group-border-color: transparent
;
6099 --f7-actions-group-margin: 8px;
6100 --f7-actions-grid-button-icon-size: 48px;
6103 --f7-actions-bg-color: #fff;
6104 --f7-actions-border-radius: 0px;
6105 --f7-actions-button-border-color: transparent
;
6106 --f7-actions-button-text-color: rgba
(0, 0, 0, 0.87);
6107 --f7-actions-button-pressed-bg-color: #e5e5e5;
6108 --f7-actions-button-padding: 0 16px;
6109 --f7-actions-button-text-align: left
;
6110 --f7-actions-button-height: 48px;
6111 --f7-actions-button-height-landscape: 48px;
6112 --f7-actions-button-font-size: 16px;
6113 --f7-actions-button-icon-size: 24px;
6114 --f7-actions-button-justify-content: space-between
;
6115 --f7-actions-label-padding: 12px 16px;
6116 --f7-actions-label-text-color: rgba
(0, 0, 0, 0.54);
6117 --f7-actions-label-font-size: 16px;
6118 --f7-actions-label-justify-content: flex-start
;
6119 --f7-actions-group-border-color: #d2d2d6;
6120 --f7-actions-group-margin: 0px;
6121 --f7-actions-grid-button-icon-size: 48px;
6124 --f7-actions-bg-color: #fff;
6125 --f7-actions-border-radius: 4px;
6126 --f7-actions-button-border-color: rgba
(0, 0, 0, 0.12);
6128 --f7-actions-button-text-color: var(--f7-theme-color);
6130 --f7-actions-button-pressed-bg-color: #e5e5e5;
6131 --f7-actions-button-padding: 0 15px;
6132 --f7-actions-button-text-align: center
;
6133 --f7-actions-button-height: 32px;
6134 --f7-actions-button-height-landscape: 32px;
6135 --f7-actions-button-font-size: 14px;
6136 --f7-actions-button-icon-size: 18px;
6137 --f7-actions-button-justify-content: space-between
;
6138 --f7-actions-label-padding: 10px 15px;
6139 --f7-actions-label-text-color: rgba
(0, 0, 0, 0.5);
6140 --f7-actions-label-font-size: 12px;
6141 --f7-actions-label-justify-content: center
;
6142 --f7-actions-group-border-color: rgba
(0, 0, 0, 0.1);
6143 --f7-actions-group-margin: 15px;
6144 --f7-actions-grid-button-icon-size: 32px;
6152 transform: translate3d
(0, 100%, 0);
6155 will-change: scroll-position
;
6157 -webkit-overflow-scrolling: touch
;
6158 transition-property: transform
;
6159 will-change: transform
;
6161 .actions-modal
.modal-in
,
6162 .actions-modal.modal-out {
6163 transition-duration: 300ms;
6165 .actions-modal.not-animated {
6166 transition-duration: 0ms;
6168 .actions-modal.modal-in {
6169 transform: translate3d
(0, calc
(-1 * var
(--f7-safe-area-bottom
)), 0);
6171 .actions-modal.modal-out {
6173 transform: translate3d
(0, 100%, 0);
6175 @media (min-width: 496px) {
6179 margin-left: -240px;
6182 @media (orientation: landscape
) {
6184 --f7-actions-button-height: var
(--f7-actions-button-height-landscape
);
6190 margin: var
(--f7-actions-group-margin
);
6191 border-radius: var
(--f7-actions-border-radius
);
6192 transform: translate3d
(0, 0, 0);
6194 .actions-group:after {
6197 background-color: var
(--f7-actions-group-border-color
);
6206 transform-origin: 50% 100%;
6207 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
6209 .actions-group:last-child:after {
6210 display: none
!important
;
6215 font-weight: normal
;
6217 box-sizing: border-box
;
6221 text-align: var
(--f7-actions-button-text-align
);
6222 background: var
(--f7-actions-bg-color
);
6224 .actions-button:after
,
6225 .actions-label:after {
6228 background-color: var
(--f7-actions-button-border-color
);
6237 transform-origin: 50% 100%;
6238 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
6240 .actions-button:first-child
,
6241 .actions-label:first-child {
6242 border-radius: var
(--f7-actions-border-radius
) var
(--f7-actions-border-radius
) 0 0;
6244 .actions-button:last-child
,
6245 .actions-label:last-child {
6246 border-radius: 0 0 var
(--f7-actions-border-radius
) var
(--f7-actions-border-radius
);
6248 .actions-button:last-child:after
,
6249 .actions-label:last-child:after {
6250 display: none
!important
;
6252 .actions-button:first-child:last-child
,
6253 .actions-label:first-child:last-child {
6254 border-radius: var
(--f7-actions-border-radius
);
6258 text-decoration: none
;
6264 .actions-button
.actions-button-bold
,
6265 .actions-label.actions-button-bold {
6271 color: var
(--f7-actions-button-text-color
, var
(--f7-theme-color
));
6272 font-size: var
(--f7-actions-button-font-size
);
6273 height: var
(--f7-actions-button-height
);
6274 line-height: var
(--f7-actions-button-height
);
6275 padding: var
(--f7-actions-button-padding
);
6276 justify-content: var
(--f7-actions-button-justify-content
);
6279 .actions-button.active-state {
6280 background-color: var
(--f7-actions-button-pressed-bg-color
) !important
;
6282 .actions-button[class*="color-"] {
6283 color: var
(--f7-theme-color
);
6285 .actions-button-media {
6288 align-items: center
;
6290 .actions-button-media i.icon {
6291 width: var
(--f7-actions-button-icon-size
);
6292 height: var
(--f7-actions-button-icon-size
);
6293 font-size: var
(--f7-actions-button-icon-size
);
6296 .actions-button-text {
6299 white-space: nowrap
;
6300 text-overflow: ellipsis
;
6302 .actions-button-text {
6305 text-align: var
(--f7-actions-button-text-align
);
6310 align-items: center
;
6311 font-size: var
(--f7-actions-label-font-size
);
6312 color: var
(--f7-actions-label-text-color
);
6313 padding: var
(--f7-actions-label-padding
);
6314 justify-content: var
(--f7-actions-label-justify-content
);
6315 min-height: var
(--f7-actions-label-min-height
, var
(--f7-actions-button-height
));
6317 .actions-label[class*=" color-"] {
6318 --f7-actions-label-text-color: var
(--f7-theme-color
);
6320 .actions-grid .actions-group {
6323 justify-content: flex-start
;
6325 background: var
(--f7-actions-bg-color
);
6328 .actions-grid .actions-group:first-child {
6329 border-radius: var
(--f7-actions-border-radius
) var
(--f7-actions-border-radius
) 0 0;
6331 .actions-grid .actions-group:last-child {
6332 border-radius: 0 0 var
(--f7-actions-border-radius
) var
(--f7-actions-border-radius
);
6334 .actions-grid .actions-group:first-child:last-child {
6335 border-radius: var
(--f7-actions-border-radius
);
6337 .actions-grid .actions-group:not(:last-child) {
6340 .actions-grid
.actions-button
,
6341 .actions-grid .actions-label {
6342 border-radius: 0 !important
;
6345 .actions-grid .actions-button {
6346 width: 33.33333333%;
6348 color: var
(--f7-actions-grid-button-text-color
);
6353 .actions-grid .actions-button:after {
6354 display: none
!important
;
6356 .actions-grid .actions-button-media {
6357 margin-left: auto
!important
;
6358 margin-right: auto
!important
;
6359 width: var
(--f7-actions-grid-button-icon-size
);
6360 height: var
(--f7-actions-grid-button-icon-size
);
6362 .actions-grid .actions-button-media i.icon {
6363 width: var
(--f7-actions-grid-button-icon-size
);
6364 height: var
(--f7-actions-grid-button-icon-size
);
6365 font-size: var
(--f7-actions-grid-button-icon-size
);
6367 .actions-grid .actions-button-text {
6368 margin-left: 0 !important
;
6369 text-align: center
!important
;
6371 line-height: 1.33em;
6373 font-size: var
(--f7-actions-grid-button-font-size
);
6375 .ios .actions-button-media {
6378 .ios .actions-button-media + .actions-button-text {
6382 .md .actions-button {
6383 transition-duration: 300ms;
6385 .md .actions-button-media {
6388 .md .actions-button-media + .actions-button-text {
6391 .aurora .actions-button-media {
6394 .aurora .actions-button-media + .actions-button-text {
6398 /* === Sheet Modal === */
6400 --f7-sheet-height: 260px;
6403 --f7-sheet-bg-color: #cfd5da;
6404 --f7-sheet-border-color: #929499;
6408 --f7-sheet-bg-color: #171717;
6409 --f7-sheet-border-color: var
(--f7-bars-border-color
);
6412 --f7-sheet-bg-color: #fff;
6413 --f7-sheet-border-color: transparent
;
6417 --f7-sheet-bg-color: #202020;
6418 --f7-sheet-border-color: transparent
;
6421 --f7-sheet-bg-color: #fff;
6422 --f7-sheet-border-color: transparent
;
6424 .aurora
.theme-dark
,
6425 .aurora.theme-dark {
6426 --f7-sheet-bg-color: #202020;
6427 --f7-sheet-border-color: transparent
;
6437 height: var
(--f7-sheet-height
);
6439 box-sizing: border-box
;
6440 transition-property: transform
;
6441 transform: translate3d
(0, 100%, 0);
6442 background: var
(--f7-sheet-bg-color
);
6444 will-change: transform
;
6446 .sheet-modal
.modal-in
,
6447 .sheet-modal.modal-out {
6448 transition-duration: 300ms;
6450 .sheet-modal.not-animated {
6451 transition-duration: 0ms;
6453 .sheet-modal.modal-in {
6455 transform: translate3d
(0, 0, 0);
6457 .sheet-modal.modal-in-swipe-step {
6459 transform: translate3d
(0, var
(--f7-sheet-swipe-step
, 0), 0);
6461 .sheet-modal.modal-out {
6462 transform: translate3d
(0, 100%, 0);
6464 .sheet-modal .sheet-modal-inner {
6469 .sheet-modal .toolbar {
6473 .sheet-modal
.toolbar:after
,
6474 .sheet-modal .toolbar:before {
6477 .sheet-modal .toolbar ~ * .page-content {
6481 .sheet-modal .toolbar + .sheet-modal-inner {
6482 height: calc
(100% - var
(--f7-toolbar-height
));
6484 .sheet-modal .toolbar ~ .sheet-modal-inner .page-content {
6488 .sheet-modal-top:after {
6491 background-color: var
(--f7-sheet-border-color
);
6500 transform-origin: 50% 100%;
6501 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
6503 .sheet-modal-top:after {
6505 -webkit-backface-visibility: hidden
;
6506 backface-visibility: hidden
;
6507 transform-style: preserve-3d
;
6509 .sheet-modal-bottom:before
,
6510 .sheet-modal:not(.sheet-modal-top):before {
6513 background-color: var
(--f7-sheet-border-color
);
6522 transform-origin: 50% 0%;
6523 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
6525 .sheet-modal-bottom:before
,
6526 .sheet-modal:not(.sheet-modal-top):before {
6528 -webkit-backface-visibility: hidden
;
6529 backface-visibility: hidden
;
6530 transform-style: preserve-3d
;
6532 .sheet-modal-bottom
.toolbar
~ .sheet-modal-inner
.page-content
,
6533 .sheet-modal:not
(.sheet-modal-top
) .toolbar
~ .sheet-modal-inner
.page-content
,
6534 .sheet-modal-bottom
.sheet-modal-inner
> .page-content
,
6535 .sheet-modal:not(.sheet-modal-top) .sheet-modal-inner > .page-content {
6536 padding-bottom: var
(--f7-safe-area-bottom
);
6540 top: var
(--f7-statusbar-height
);
6541 transform: translate3d
(0, calc
(-100% - var
(--f7-statusbar-height
)), 0);
6543 .sheet-modal-top.modal-out {
6544 transform: translate3d
(0, calc
(-100% - var
(--f7-statusbar-height
)), 0);
6546 .sheet-modal-top .toolbar-bottom {
6549 .sheet-modal-top .toolbar-top ~ .sheet-modal-inner .page-content {
6552 .md .sheet-modal .toolbar a.link:not(.tab-link) {
6557 --f7-toast-text-color: #fff;
6558 --f7-toast-font-size: 14px;
6559 --f7-toast-icon-size: 48px;
6562 --f7-toast-bg-color: rgba
(0, 0, 0, 0.75);
6563 --f7-toast-translucent-bg-color-ios: rgba
(0, 0, 0, 0.75);
6564 --f7-toast-padding-horizontal: 15px;
6565 --f7-toast-padding-vertical: 12px;
6566 --f7-toast-border-radius: 8px;
6567 --f7-toast-button-min-width: 64px;
6570 --f7-toast-bg-color: #323232;
6571 --f7-toast-padding-horizontal: 24px;
6572 --f7-toast-padding-vertical: 14px;
6573 --f7-toast-border-radius: 4px;
6574 --f7-toast-button-min-width: 64px;
6577 --f7-toast-bg-color: rgba
(0, 0, 0, 0.85);
6578 --f7-toast-padding-horizontal: 10px;
6579 --f7-toast-padding-vertical: 10px;
6580 --f7-toast-border-radius: 4px;
6581 --f7-toast-button-min-width: 32px;
6584 transition-property: transform
, opacity
;
6588 color: var
(--f7-toast-text-color
);
6589 font-size: var
(--f7-toast-font-size
);
6590 box-sizing: border-box
;
6591 background-color: var
(--f7-toast-bg-color
);
6593 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
6598 .toast .toast-content {
6600 justify-content: space-between
;
6601 align-items: center
;
6602 box-sizing: border-box
;
6603 padding: var
(--f7-toast-padding-vertical
) var
(--f7-toast-padding-horizontal
);
6605 .toast .toast-text {
6610 .toast .toast-button {
6612 min-width: var
(--f7-toast-button-min-width
);
6614 margin-bottom: -8px;
6616 .toast.toast-with-icon .toast-content {
6620 .toast.toast-with-icon .toast-text {
6623 .toast
.toast-with-icon
.toast-icon
.f7-icons
,
6624 .toast.toast-with-icon .toast-icon .material-icons {
6625 font-size: var
(--f7-toast-icon-size
);
6626 width: var
(--f7-toast-icon-size
);
6627 height: var
(--f7-toast-icon-size
);
6629 .toast.toast-center {
6633 margin-top: var
(--f7-statusbar-height
);
6636 transition-duration: 300ms;
6640 @supports ((-webkit-backdrop-filter: blur
(10px)) or
(backdrop-filter: blur
(10px))) {
6642 background: var
(--f7-toast-translucent-bg-color-ios
);
6643 -webkit-backdrop-filter: blur
(10px);
6644 backdrop-filter: blur
(10px);
6647 .ios .toast.toast-top {
6649 transform: translate3d
(0, -100%, 0);
6651 .ios .toast.toast-top.modal-in {
6652 transform: translate3d
(0, 0%, 0);
6654 .ios .toast.toast-center {
6657 border-radius: var
(--f7-toast-border-radius
);
6658 transform: translate3d
(-50%, -50%, 0);
6660 .ios .toast.toast-center.modal-in {
6661 transform: translate3d
(-50%, -50%, 0);
6663 .ios .toast.toast-bottom {
6665 transform: translate3d
(0, 100%, 0);
6667 .ios .toast.toast-bottom.modal-in {
6668 transform: translate3d
(0, 0%, 0);
6670 @media (max-width: 568px) {
6671 .ios .toast.toast-bottom .toast-content {
6672 padding-bottom: calc
(var
(--f7-toast-padding-vertical
) + var
(--f7-safe-area-bottom
));
6675 @media (min-width: 569px) {
6678 margin-left: -284px;
6679 border-radius: var
(--f7-toast-border-radius
);
6681 .ios .toast.toast-top {
6684 .ios .toast.toast-center {
6687 .ios .toast.toast-bottom {
6688 margin-bottom: calc
(15px + var
(--f7-safe-area-bottom
));
6691 @media (min-width: 1024px) {
6696 .ios
.toast
.toast-bottom
,
6697 .ios .toast.toast-top {
6701 .ios .toast-button {
6703 margin-left: calc
(-1 * var
(--f7-button-padding-horizontal
));
6706 transition-duration: 200ms;
6707 border-radius: var
(--f7-toast-border-radius
);
6709 width: calc
(100% - 16px);
6710 transform: scale
(0.9);
6712 .md .toast.modal-in {
6713 transform: scale
(1);
6715 .md .toast.modal-out {
6716 transform: scale
(1);
6718 .md .toast.toast-top {
6721 .md .toast.toast-center {
6724 transform: scale
(0.9) translate3d
(-55%, -55%, 0);
6726 .md .toast.toast-center.modal-in {
6727 transform: scale
(1) translate3d
(-50%, -50%, 0);
6729 .md .toast.toast-center.modal-out {
6730 transform: scale
(1) translate3d
(-50%, -50%, 0);
6732 .md .toast.toast-bottom {
6733 bottom: calc
(8px + var
(--f7-safe-area-bottom
));
6735 @media (min-width: 584px) {
6738 margin-left: -284px;
6740 .md .toast.toast-center {
6744 @media (min-width: 1024px) {
6749 .md
.toast
.toast-bottom
,
6750 .md .toast.toast-top {
6753 .md .toast.toast-bottom {
6754 bottom: calc
(24px + var
(--f7-safe-area-bottom
));
6756 .md .toast.toast-top {
6765 transition-duration: 200ms;
6766 border-radius: var
(--f7-toast-border-radius
);
6768 width: calc
(100% - 20px);
6769 transform: scale
(0.9);
6771 .aurora .toast.modal-in {
6772 transform: scale
(1);
6774 .aurora .toast.modal-out {
6775 transform: scale
(1);
6777 .aurora .toast.toast-top {
6780 .aurora .toast.toast-center {
6783 transform: scale
(0.9) translate3d
(-55%, -55%, 0);
6785 .aurora .toast.toast-center.modal-in {
6786 transform: scale
(1) translate3d
(-50%, -50%, 0);
6788 .aurora .toast.toast-center.modal-out {
6789 transform: scale
(1) translate3d
(-50%, -50%, 0);
6791 .aurora .toast.toast-bottom {
6792 bottom: calc
(10px + var
(--f7-safe-area-bottom
));
6794 @media (min-width: 584px) {
6797 margin-left: -284px;
6799 .aurora .toast.toast-center {
6803 @media (min-width: 1024px) {
6808 .aurora
.toast
.toast-bottom
,
6809 .aurora .toast.toast-top {
6813 .aurora .toast-button {
6816 /* === Preloader === */
6818 --f7-preloader-modal-padding: 8px;
6819 --f7-preloader-modal-bg-color: rgba
(0, 0, 0, 0.8);
6822 --f7-preloader-color: #6c6c6c;
6823 --f7-preloader-size: 20px;
6824 --f7-preloader-modal-preloader-size: 34px;
6825 --f7-preloader-modal-border-radius: 5px;
6828 --f7-preloader-color: #757575;
6829 --f7-preloader-size: 32px;
6830 --f7-preloader-modal-preloader-size: 32px;
6831 --f7-preloader-modal-border-radius: 4px;
6834 --f7-preloader-color: #757575;
6835 --f7-preloader-size: 24px;
6836 --f7-preloader-modal-preloader-size: 24px;
6837 --f7-preloader-modal-border-radius: 4px;
6840 display: inline-block
;
6841 vertical-align: middle
;
6842 width: var
(--f7-preloader-size
);
6843 height: var
(--f7-preloader-size
);
6847 /* === Preloader Modal === */
6848 .preloader-backdrop {
6849 visibility: visible
;
6858 padding: var
(--f7-preloader-modal-padding
);
6859 background: var
(--f7-preloader-modal-bg-color
);
6861 transform: translateX
(-50%) translateY
(-50%);
6862 border-radius: var
(--f7-preloader-modal-border-radius
);
6864 .preloader-modal .preloader {
6865 --f7-preloader-size: var
(--f7-preloader-modal-preloader-size
);
6866 display: block
!important
;
6868 html
.with-modal-preloader
.page-content
{
6870 -webkit-overflow-scrolling: auto
;
6872 .preloader[class*="color-"] {
6873 --f7-preloader-color: var
(--f7-theme-color
);
6876 animation: ios-preloader-spin
1s steps
(12, end
) infinite
;
6878 .ios .preloader .preloader-inner-line {
6882 border-radius: 100px;
6883 background: var
(--f7-preloader-color
);
6887 transform-origin: center
200%;
6889 .ios .preloader .preloader-inner-line:nth-child(1) {
6890 transform: translate
(-50%, -200%) rotate
(0deg);
6893 .ios .preloader .preloader-inner-line:nth-child(2) {
6894 transform: translate
(-50%, -200%) rotate
(30deg);
6895 opacity: 0.32272727;
6897 .ios .preloader .preloader-inner-line:nth-child(3) {
6898 transform: translate
(-50%, -200%) rotate
(60deg);
6899 opacity: 0.37545455;
6901 .ios .preloader .preloader-inner-line:nth-child(4) {
6902 transform: translate
(-50%, -200%) rotate
(90deg);
6903 opacity: 0.42818182;
6905 .ios .preloader .preloader-inner-line:nth-child(5) {
6906 transform: translate
(-50%, -200%) rotate
(120deg);
6907 opacity: 0.48090909;
6909 .ios .preloader .preloader-inner-line:nth-child(6) {
6910 transform: translate
(-50%, -200%) rotate
(150deg);
6911 opacity: 0.53363636;
6913 .ios .preloader .preloader-inner-line:nth-child(7) {
6914 transform: translate
(-50%, -200%) rotate
(180deg);
6915 opacity: 0.58636364;
6917 .ios .preloader .preloader-inner-line:nth-child(8) {
6918 transform: translate
(-50%, -200%) rotate
(210deg);
6919 opacity: 0.63909091;
6921 .ios .preloader .preloader-inner-line:nth-child(9) {
6922 transform: translate
(-50%, -200%) rotate
(240deg);
6923 opacity: 0.69181818;
6925 .ios .preloader .preloader-inner-line:nth-child(10) {
6926 transform: translate
(-50%, -200%) rotate
(270deg);
6927 opacity: 0.74454545;
6929 .ios .preloader .preloader-inner-line:nth-child(11) {
6930 transform: translate
(-50%, -200%) rotate
(300deg);
6931 opacity: 0.79727273;
6933 .ios .preloader .preloader-inner-line:nth-child(12) {
6934 transform: translate
(-50%, -200%) rotate
(330deg);
6937 @keyframes ios-preloader-spin
{
6939 transform: rotate
(360deg);
6943 animation: md-preloader-outer
3300ms linear infinite
;
6945 @keyframes md-preloader-outer
{
6947 transform: rotate
(0);
6950 transform: rotate
(360deg);
6953 .md .preloader-inner {
6958 animation: md-preloader-inner-rotate
5.25s cubic-bezier
(0.35, 0, 0.25, 1) infinite
;
6960 .md .preloader-inner .preloader-inner-gap {
6967 box-sizing: border-box
;
6968 border-top: 4px solid var
(--f7-preloader-color
);
6970 .md
.preloader-inner
.preloader-inner-left
,
6971 .md .preloader-inner .preloader-inner-right {
6978 .md .preloader-inner .preloader-inner-half-circle {
6983 box-sizing: border-box
;
6984 border: 4px solid var
(--f7-preloader-color
);
6985 border-bottom-color: transparent
!important
;
6987 animation-iteration-count: infinite
;
6988 animation-duration: 1.3125s;
6989 animation-timing-function: cubic-bezier
(0.35, 0, 0.25, 1);
6991 .md .preloader-inner .preloader-inner-left {
6994 .md .preloader-inner .preloader-inner-left .preloader-inner-half-circle {
6996 border-right-color: transparent
!important
;
6997 animation-name: md-preloader-left-rotate
;
6999 .md .preloader-inner .preloader-inner-right {
7002 .md .preloader-inner .preloader-inner-right .preloader-inner-half-circle {
7004 border-left-color: transparent
!important
;
7005 animation-name: md-preloader-right-rotate
;
7007 .md .preloader.color-multi .preloader-inner-left .preloader-inner-half-circle {
7008 animation-name: md-preloader-left-rotate-multicolor
;
7010 .md .preloader.color-multi .preloader-inner-right .preloader-inner-half-circle {
7011 animation-name: md-preloader-right-rotate-multicolor
;
7013 @keyframes md-preloader-left-rotate
{
7016 transform: rotate
(130deg);
7019 transform: rotate
(-5deg);
7022 @keyframes md-preloader-right-rotate
{
7025 transform: rotate
(-130deg);
7028 transform: rotate
(5deg);
7031 @keyframes md-preloader-inner-rotate
{
7033 transform: rotate
(135deg);
7036 transform: rotate
(270deg);
7039 transform: rotate
(405deg);
7042 transform: rotate
(540deg);
7045 transform: rotate
(675deg);
7048 transform: rotate
(810deg);
7051 transform: rotate
(945deg);
7054 transform: rotate
(1080deg);
7057 @keyframes md-preloader-left-rotate-multicolor
{
7060 border-left-color: #4285F4;
7061 transform: rotate
(130deg);
7064 border-left-color: #1B9A59;
7065 border-top-color: #1B9A59;
7068 border-left-color: #F7C223;
7069 border-top-color: #F7C223;
7070 transform: rotate
(-5deg);
7073 border-left-color: #DE3E35;
7074 border-top-color: #DE3E35;
7077 @keyframes md-preloader-right-rotate-multicolor
{
7080 border-right-color: #4285F4;
7081 transform: rotate
(-130deg);
7084 border-right-color: #1B9A59;
7085 border-top-color: #1B9A59;
7088 border-right-color: #F7C223;
7089 border-top-color: #F7C223;
7090 transform: rotate
(5deg);
7093 border-top-color: #DE3E35;
7094 border-right-color: #DE3E35;
7097 .aurora .preloader-inner {
7104 .aurora .preloader-inner-circle {
7111 border: calc
(var
(--f7-preloader-size
) / 8) solid var
(--f7-preloader-color
);
7112 border-top-color: transparent
;
7113 box-sizing: border-box
;
7114 animation: aurora-preloader-rotate
1s linear infinite
;
7116 .aurora .preloader.color-multi .preloader-inner-circle {
7117 animation: aurora-preloader-rotate
1s linear infinite
, aurora-preloader-multicolor
2s linear infinite
;
7119 @keyframes aurora-preloader-rotate
{
7121 transform: rotate
(0deg);
7124 transform: rotate
(360deg);
7127 @keyframes aurora-preloader-multicolor
{
7130 border-color: #2196f3;
7131 border-top-color: transparent
;
7134 border-color: #ff3b30;
7135 border-top-color: transparent
;
7138 border-color: #4cd964;
7139 border-top-color: transparent
;
7142 border-color: #ff9500;
7143 border-top-color: transparent
;
7146 /* === Progressbar === */
7149 --f7-progressbar-progress-color: var(--f7-theme-color);
7153 --f7-progressbar-bg-color: #b6b6b6;
7154 --f7-progressbar-height: 2px;
7155 --f7-progressbar-border-radius: 2px;
7159 --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
7161 --f7-progressbar-height: 4px;
7162 --f7-progressbar-border-radius: 0px;
7165 --f7-progressbar-bg-color: #dbdbdb;
7166 --f7-progressbar-height: 6px;
7167 --f7-progressbar-border-radius: 3px;
7169 .aurora
.theme-dark
,
7170 .aurora.theme-dark {
7171 --f7-progressbar-bg-color: #444;
7174 .progressbar-infinite {
7179 transform-style: preserve-3d
;
7180 background: var
(--f7-progressbar-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.5));
7181 transform-origin: center top
;
7182 height: var
(--f7-progressbar-height
);
7183 border-radius: var
(--f7-progressbar-border-radius
);
7186 vertical-align: middle
;
7189 background-color: var
(--f7-progressbar-progress-color
, var
(--f7-theme-color
));
7195 transform: translate3d
(-100%, 0, 0);
7196 transition-duration: 150ms;
7198 .progressbar-infinite {
7201 .progressbar-infinite:before
,
7202 .progressbar-infinite:after {
7209 transform-origin: left center
;
7210 transform: translate3d
(0, 0, 0);
7212 background-color: var
(--f7-progressbar-progress-color
, var
(--f7-theme-color
));
7214 .progressbar-infinite.color-multi {
7215 background: none
!important
;
7218 animation: progressbar-in
150ms forwards
;
7221 animation: progressbar-out
150ms forwards
;
7223 body
> .progressbar
,
7224 .view
> .progressbar
,
7225 .views
> .progressbar
,
7226 .page
> .progressbar
,
7227 .panel
> .progressbar
,
7228 .popup
> .progressbar
,
7229 .framework7-root
> .progressbar
,
7230 body
> .progressbar-infinite
,
7231 .view
> .progressbar-infinite
,
7232 .views
> .progressbar-infinite
,
7233 .page
> .progressbar-infinite
,
7234 .panel
> .progressbar-infinite
,
7235 .popup
> .progressbar-infinite
,
7236 .framework7-root > .progressbar-infinite {
7241 border-radius: 0 !important
;
7242 transform-origin: center top
!important
;
7244 body
> .progressbar
,
7245 .framework7-root
> .progressbar
,
7246 body
> .progressbar-infinite
,
7247 .framework7-root > .progressbar-infinite {
7248 top: var
(--f7-statusbar-height
);
7250 @keyframes progressbar-in
{
7253 transform: scaleY
(0);
7257 transform: scaleY
(1);
7260 @keyframes progressbar-out
{
7263 transform: scaleY
(1);
7267 transform: scaleY
(0);
7270 .ios .progressbar-infinite:before {
7271 animation: ios-progressbar-infinite
1s linear infinite
;
7273 .ios .progressbar-infinite:after {
7276 .ios .progressbar-infinite.color-multi:before {
7278 background-image: linear-gradient
(to right
, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
7279 background-size: 25% 100%;
7280 background-repeat: repeat-x
;
7281 animation: ios-progressbar-infinite-multicolor
3s linear infinite
;
7283 @keyframes ios-progressbar-infinite
{
7285 transform: translate3d
(-100%, 0, 0);
7288 transform: translate3d
(100%, 0, 0);
7291 @keyframes ios-progressbar-infinite-multicolor
{
7293 transform: translate3d
(0%, 0, 0);
7296 transform: translate3d
(-50%, 0, 0);
7299 .md .progressbar-infinite:before {
7300 animation: md-progressbar-infinite-1
2s linear infinite
;
7302 .md .progressbar-infinite:after {
7303 animation: md-progressbar-infinite-2
2s linear infinite
;
7305 .md .progressbar-infinite.color-multi:before {
7307 animation: md-progressbar-infinite-multicolor-bg
3s step-end infinite
;
7309 .md .progressbar-infinite.color-multi:after {
7311 animation: md-progressbar-infinite-multicolor-fill
3s linear infinite
;
7312 transform-origin: center center
;
7314 @keyframes md-progressbar-infinite-1
{
7316 transform: translateX
(-10%) scaleX
(0.1);
7319 transform: translateX
(30%) scaleX
(0.6);
7322 transform: translateX
(100%) scaleX
(1);
7325 transform: translateX
(100%) scaleX
(1);
7328 @keyframes md-progressbar-infinite-2
{
7330 transform: translateX
(-100%) scaleX
(1);
7333 transform: translateX
(-100%) scaleX
(1);
7336 transform: translateX
(60%) scaleX
(0.35);
7339 transform: translateX
(100%) scaleX
(0.1);
7342 transform: translateX
(100%) scaleX
(0.1);
7345 @keyframes md-progressbar-infinite-multicolor-bg
{
7347 background-color: #4caf50;
7350 background-color: #f44336;
7353 background-color: #2196f3;
7356 background-color: #ffeb3b;
7359 @keyframes md-progressbar-infinite-multicolor-fill
{
7361 transform: scaleX
(0);
7362 background-color: #f44336;
7365 transform: scaleX
(1);
7366 background-color: #f44336;
7369 transform: scaleX
(0);
7370 background-color: #2196f3;
7373 transform: scaleX
(1);
7374 background-color: #2196f3;
7377 transform: scaleX
(0);
7378 background-color: #ffeb3b;
7381 transform: scaleX
(1);
7382 background-color: #ffeb3b;
7385 transform: scaleX
(0);
7386 background-color: #4caf50;
7389 transform: scaleX
(1);
7390 background-color: #4caf50;
7393 .aurora
.progressbar
,
7394 .aurora
.progressbar-infinite
,
7395 .aurora
.progressbar span
,
7396 .aurora .progressbar-infinite:before {
7397 box-shadow: 0px 0px 0px 1px rgba
(0, 0, 0, 0.05) inset
;
7399 .aurora .progressbar-infinite:before {
7400 animation: aurora-progressbar-infinite
1s linear infinite
;
7402 .aurora .progressbar-infinite:after {
7405 .aurora .progressbar-infinite.color-multi:before {
7407 background-image: linear-gradient
(to right
, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
7408 background-size: 25% 100%;
7409 background-repeat: repeat-x
;
7410 animation: aurora-progressbar-infinite-multicolor
3s linear infinite
;
7412 @keyframes aurora-progressbar-infinite
{
7414 transform: translate3d
(-100%, 0, 0);
7417 transform: translate3d
(100%, 0, 0);
7420 @keyframes aurora-progressbar-infinite-multicolor
{
7422 transform: translate3d
(0%, 0, 0);
7425 transform: translate3d
(-50%, 0, 0);
7428 /* === Sortable === */
7430 --f7-sortable-handler-color: #c7c7cc;
7431 --f7-sortable-sorting-item-bg-color: rgba
(255, 255, 255, 0.8);
7435 --f7-sortable-sorting-item-bg-color: rgba
(50, 50, 50, 0.8);
7438 --f7-sortable-handler-width: 35px;
7439 --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba
(0, 0, 0, 0.6);
7442 --f7-sortable-handler-width: 42px;
7443 --f7-sortable-sorting-item-box-shadow: var
(--f7-elevation-2
);
7446 --f7-sortable-handler-width: 32px;
7447 --f7-sortable-sorting-item-box-shadow: var
(--f7-elevation-2
);
7449 .sortable .sortable-handler {
7450 width: var
(--f7-sortable-handler-width
);
7456 pointer-events: none
;
7458 transition-duration: 300ms;
7460 align-items: center
;
7461 justify-content: center
;
7463 left: var
(--f7-safe-area-left
);
7465 .sortable .sortable-handler:after {
7466 font-family: 'framework7-core-icons';
7467 font-weight: normal
;
7470 letter-spacing: normal
;
7471 text-transform: none
;
7472 white-space: nowrap
;
7475 -webkit-font-smoothing: antialiased
;
7476 text-rendering: optimizeLegibility
;
7477 -moz-osx-font-smoothing: grayscale
;
7478 -moz-font-feature-settings: "liga";
7479 font-feature-settings: "liga";
7485 transition-duration: 300ms;
7486 transform: translateX
(10px);
7487 color: var
(--f7-sortable-handler-color
);
7492 .sortable .item-inner {
7493 transition-duration: 300ms;
7495 .sortable li.sorting {
7497 background: var
(--f7-sortable-sorting-item-bg-color
);
7498 transition-duration: 0ms;
7499 box-shadow: var
(--f7-sortable-sorting-item-box-shadow
);
7501 .sortable li.sorting .item-inner:after {
7502 display: none
!important
;
7504 .sortable-sorting li {
7505 transition-duration: 300ms;
7507 .sortable-enabled .sortable-handler {
7508 pointer-events: auto
;
7511 .sortable-enabled .sortable-handler:after {
7512 transform: translateX
(0px);
7514 .sortable-enabled
.item-link
.item-inner
,
7515 .sortable-enabled .item-link .item-title-row {
7516 background-image: none
!important
;
7518 .list
.sortable-enabled
.item-inner
,
7519 .list
.sortable-enabled
.item-link
.item-inner
,
7520 .list
.sortable-enabled
.item-link
.no-chevron
.item-inner
,
7521 .list
.sortable-enabled
.no-chevron
.item-link
.item-inner
,
7522 .list
.sortable-enabled
.no-chevron
.item-link
.item-inner
,
7523 .no-chevron .list.sortable-enabled .item-link .item-inner {
7524 padding-left: calc
(var
(--f7-sortable-handler-width
) + var
(--f7-safe-area-right
));
7526 .ios .sortable-handler:after {
7527 content: 'sort_ios';
7529 .md .sortable-handler:after {
7532 .aurora .sortable-handler:after {
7537 /* === Swipeout === */
7539 --f7-swipeout-button-text-color: #fff;
7540 --f7-swipeout-button-bg-color: #c7c7cc;
7541 --f7-swipeout-delete-button-bg-color: #ff3b30;
7542 --f7-swipeout-button-font-size: inherit
;
7543 --f7-swipeout-button-font-weight: inherit
;
7546 --f7-swipeout-button-padding: 0 30px;
7549 --f7-swipeout-button-padding: 0 24px;
7552 --f7-swipeout-button-padding: 0 12px;
7553 --f7-swipeout-button-font-weight: 500;
7557 transform-style: preserve-3d
;
7559 .swipeout-deleting {
7560 transition-duration: 300ms;
7562 .swipeout-deleting .swipeout-content {
7563 transform: translateX
(-100%);
7565 .swipeout-transitioning
.swipeout-content
,
7566 .swipeout-transitioning
.swipeout-actions-right a
,
7567 .swipeout-transitioning
.swipeout-actions-left a
,
7568 .swipeout-transitioning .swipeout-overswipe {
7569 transition-duration: 300ms;
7570 transition-property: transform
, left
;
7576 .swipeout-overswipe {
7577 transition-duration: 200ms;
7578 transition-property: left
;
7580 .swipeout-actions-left
,
7581 .swipeout-actions-right {
7588 .swipeout-actions-left
> a
,
7589 .swipeout-actions-right
> a
,
7590 .swipeout-actions-left
> button
,
7591 .swipeout-actions-right
> button
,
7592 .swipeout-actions-left
> span
,
7593 .swipeout-actions-right
> span
,
7594 .swipeout-actions-left
> div
,
7595 .swipeout-actions-right > div {
7596 color: var
(--f7-swipeout-button-text-color
);
7597 background: var
(--f7-swipeout-button-bg-color
);
7598 padding: var
(--f7-swipeout-button-padding
);
7600 align-items: center
;
7603 font-size: var
(--f7-swipeout-button-font-size
);
7604 font-weight: var
(--f7-swipeout-button-font-weight
);
7606 .swipeout-actions-left
> a:after
,
7607 .swipeout-actions-right
> a:after
,
7608 .swipeout-actions-left
> button:after
,
7609 .swipeout-actions-right
> button:after
,
7610 .swipeout-actions-left
> span:after
,
7611 .swipeout-actions-right
> span:after
,
7612 .swipeout-actions-left
> div:after
,
7613 .swipeout-actions-right > div:after {
7619 background: inherit
;
7621 transform: translate3d
(0, 0, 0);
7622 pointer-events: none
;
7624 .swipeout-actions-left
.swipeout-delete
,
7625 .swipeout-actions-right .swipeout-delete {
7626 background: var
(--f7-swipeout-delete-button-bg-color
);
7628 .swipeout-actions-right {
7630 transform: translateX
(100%);
7632 .swipeout-actions-right
> a:after
,
7633 .swipeout-actions-right
> button:after
,
7634 .swipeout-actions-right
> span:after
,
7635 .swipeout-actions-right > div:after {
7639 .swipeout-actions-left {
7641 transform: translateX
(-100%);
7643 .swipeout-actions-left
> a:after
,
7644 .swipeout-actions-left
> button:after
,
7645 .swipeout-actions-left
> span:after
,
7646 .swipeout-actions-left > div:after {
7650 .swipeout-actions-left
[class
*="color-"],
7651 .swipeout-actions-right [class*="color-"] {
7652 --f7-swipeout-button-bg-color: var
(--f7-theme-color
);
7654 /* === Accordion === */
7655 .accordion-item-toggle {
7657 transition-duration: 300ms;
7659 .accordion-item-toggle.active-state {
7660 transition-duration: 300ms;
7662 .accordion-item-toggle.active-state > .item-inner:after {
7663 background-color: transparent
;
7665 .accordion-item-toggle .item-inner {
7666 transition-duration: 300ms;
7667 transition-property: background-color
;
7669 .accordion-item-toggle .item-inner:after {
7670 transition-duration: 300ms;
7672 .accordion-item .item-link .item-inner:after {
7673 transition-duration: 300ms;
7675 .accordion-item
.list
,
7676 .accordion-item .block {
7680 .accordion-item
.block
> h1:first-child
,
7681 .accordion-item
.block
> h2:first-child
,
7682 .accordion-item
.block
> h3:first-child
,
7683 .accordion-item
.block
> h4:first-child
,
7684 .accordion-item .block > p:first-child {
7687 .accordion-item
.block
> h1:last-child
,
7688 .accordion-item
.block
> h2:last-child
,
7689 .accordion-item
.block
> h3:last-child
,
7690 .accordion-item
.block
> h4:last-child
,
7691 .accordion-item .block > p:last-child {
7692 margin-bottom: 10px;
7694 .accordion-item-opened
.accordion-item-toggle
.item-inner:after
,
7695 .accordion-item-opened > .item-link .item-inner:after {
7696 background-color: transparent
;
7698 .list li.accordion-item ul {
7701 .accordion-item-content {
7706 transition-duration: 300ms;
7708 .accordion-item-opened > .accordion-item-content {
7711 html
.device-android-4
.accordion-item-content
{
7714 .list .accordion-item-toggle .item-inner {
7715 padding-left: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-safe-area-left
));
7717 .list .accordion-item-toggle .item-inner:before {
7718 font-family: 'framework7-core-icons';
7719 font-weight: normal
;
7722 letter-spacing: normal
;
7723 text-transform: none
;
7724 white-space: nowrap
;
7727 -webkit-font-smoothing: antialiased
;
7728 text-rendering: optimizeLegibility
;
7729 -moz-osx-font-smoothing: grayscale
;
7730 -moz-font-feature-settings: "liga";
7731 font-feature-settings: "liga";
7743 color: var
(--f7-list-chevron-icon-color
);
7744 pointer-events: none
;
7745 left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
7746 content: 'chevron_left';
7748 .list .accordion-item-toggle.active-state {
7749 background-color: var
(--f7-list-link-pressed-bg-color
);
7751 .list
.accordion-item-toggle
.item-inner:before
,
7752 .list:not
(.media-list
) .accordion-item:not
(.media-item
) .accordion-item-toggle
.item-inner:before
,
7753 .list:not
(.media-list
) .accordion-item:not
(.media-item
) > .item-link
.item-inner:before
,
7754 .media-list
.accordion-item
.accordion-item-toggle
.item-title-row:before
,
7755 .media-list
.accordion-item
> .item-link
.item-title-row:before
,
7756 .accordion-item
.media-item
.accordion-item-toggle
.item-title-row:before
,
7757 .accordion-item
.media-item
> .item-link
.item-title-row:before
,
7758 .links-list .accordion-item > a:before {
7759 content: 'chevron_down';
7765 .list
.accordion-item-toggle
.accordion-item-opened
.item-inner:before
,
7766 .list:not
(.media-list
) .accordion-item-opened:not
(.media-item
) .accordion-item-toggle
.item-inner:before
,
7767 .list:not
(.media-list
) .accordion-item-opened:not
(.media-item
) > .item-link
.item-inner:before
,
7768 .media-list
.accordion-item-opened
.accordion-item-toggle
.item-title-row:before
,
7769 .media-list
.accordion-item-opened
> .item-link
.item-title-row:before
,
7770 .accordion-item-opened
.media-item
.accordion-item-toggle
.item-title-row:before
,
7771 .accordion-item-opened
.media-item
> .item-link
.item-title-row:before
,
7772 .links-list .accordion-item-opened > a:before {
7773 content: 'chevron_up';
7779 .aurora
.list
.accordion-item-toggle
.item-inner:before
,
7780 .aurora
.list:not
(.media-list
) .accordion-item:not
(.media-item
) .accordion-item-toggle
.item-inner:before
,
7781 .aurora
.list:not
(.media-list
) .accordion-item:not
(.media-item
) > .item-link
.item-inner:before
,
7782 .aurora
.media-list
.accordion-item
.accordion-item-toggle
.item-title-row:before
,
7783 .aurora
.media-list
.accordion-item
> .item-link
.item-title-row:before
,
7784 .aurora
.accordion-item
.media-item
.accordion-item-toggle
.item-title-row:before
,
7785 .aurora
.accordion-item
.media-item
> .item-link
.item-title-row:before
,
7786 .aurora .links-list .accordion-item > a:before {
7787 content: 'chevron_down_aurora';
7789 .aurora
.list
.accordion-item-toggle
.accordion-item-opened
.item-inner:before
,
7790 .aurora
.list:not
(.media-list
) .accordion-item-opened:not
(.media-item
) .accordion-item-toggle
.item-inner:before
,
7791 .aurora
.list:not
(.media-list
) .accordion-item-opened:not
(.media-item
) > .item-link
.item-inner:before
,
7792 .aurora
.media-list
.accordion-item-opened
.accordion-item-toggle
.item-title-row:before
,
7793 .aurora
.media-list
.accordion-item-opened
> .item-link
.item-title-row:before
,
7794 .aurora
.accordion-item-opened
.media-item
.accordion-item-toggle
.item-title-row:before
,
7795 .aurora
.accordion-item-opened
.media-item
> .item-link
.item-title-row:before
,
7796 .aurora .links-list .accordion-item-opened > a:before {
7797 content: 'chevron_up_aurora';
7799 /* === Contacts === */
7802 --f7-contacts-list-title-text-color: #fff;
7805 --f7-contacts-list-title-font-size: inherit
;
7806 --f7-contacts-list-title-font-weight: 600;
7807 --f7-contacts-list-title-text-color: #000;
7808 --f7-contacts-list-title-height: 22px;
7809 --f7-contacts-list-title-bg-color: #f7f7f7;
7813 --f7-contacts-list-title-bg-color: #232323;
7816 --f7-contacts-list-title-font-size: 20px;
7817 --f7-contacts-list-title-font-weight: 500;
7819 --f7-contacts-list-title-text-color: var(--f7-theme-color);
7821 --f7-contacts-list-title-height: 48px;
7822 --f7-contacts-list-title-bg-color: transparent
;
7825 --f7-contacts-list-title-font-weight: 600;
7826 --f7-contacts-list-title-text-color: #000;
7828 --f7-contacts-list-title-bg-color: var(--f7-list-group-title-bg-color);
7829 --f7-contacts-list-title-font-size: var(--f7-list-group-title-font-size);
7830 --f7-contacts-list-title-line-height: var(--f7-list-group-title-height);
7831 --f7-contacts-list-title-height: var(--f7-list-group-title-height);
7835 --f7-list-margin-vertical: 0px;
7837 .contacts-list
.list-group-title
,
7838 .contacts-list li.list-group-title {
7839 background-color: var
(--f7-contacts-list-title-bg-color
, var
(--f7-list-group-title-bg-color
));
7840 font-weight: var
(--f7-contacts-list-title-font-weight
, var
(--f7-list-group-title-font-weight
));
7841 font-size: var
(--f7-contacts-list-title-font-size
, var
(--f7-list-group-title-font-size
));
7842 color: var
(--f7-contacts-list-title-text-color
, var
(--f7-theme-color
));
7843 line-height: var
(--f7-contacts-list-title-height
, var
(--f7-list-group-title-height
));
7844 height: var
(--f7-contacts-list-title-height
, var
(--f7-list-group-title-height
));
7846 .contacts-list .list-group:first-child ul:before {
7847 display: none
!important
;
7849 .contacts-list .list-group:last-child ul:after {
7850 display: none
!important
;
7852 .md .contacts-list .list-group-title {
7853 pointer-events: none
;
7857 .md .contacts-list .list-group-title + li {
7858 margin-top: calc
(var
(--f7-contacts-list-title-height
) * -1);
7860 .md .contacts-list li:not(.list-group-title) {
7861 padding-right: 56px;
7863 /* === Virtual List === */
7864 /* === Indexed List === */
7866 --f7-list-index-width: 16px;
7867 --f7-list-index-font-size: 11px;
7868 --f7-list-index-font-weight: 600;
7869 /* --f7-list-index-text-color: var(--f7-theme-color); */
7870 --f7-list-index-item-height: 14px;
7871 --f7-list-index-label-text-color: #fff;
7872 /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
7873 --f7-list-index-label-font-weight: 500;
7876 --f7-list-index-label-size: 44px;
7877 --f7-list-index-label-font-size: 17px;
7878 --f7-list-index-skip-dot-size: 6px;
7881 --f7-list-index-label-size: 56px;
7882 --f7-list-index-label-font-size: 20px;
7883 --f7-list-index-skip-dot-size: 4px;
7886 --f7-list-index-font-size: 12px;
7887 --f7-list-index-label-size: 32px;
7888 --f7-list-index-label-font-size: 12px;
7889 --f7-list-index-label-font-weight: 600;
7890 --f7-list-index-skip-dot-size: 4px;
7898 width: var
(--f7-list-index-width
);
7900 -webkit-user-select: none
;
7901 -moz-user-select: none
;
7902 -ms-user-select: none
;
7904 left: var
(--f7-safe-area-left
);
7906 .list-index:before {
7915 color: var
(--f7-list-index-text-color
, var
(--f7-theme-color
));
7916 font-size: var
(--f7-list-index-font-size
);
7917 font-weight: var
(--f7-list-index-font-weight
);
7922 flex-direction: column
;
7923 justify-content: center
;
7924 align-items: center
;
7935 height: var
(--f7-list-index-item-height
);
7936 line-height: var
(--f7-list-index-item-height
);
7941 .list-index .list-index-skip-placeholder:after {
7947 width: var
(--f7-list-index-skip-dot-size
);
7948 height: var
(--f7-list-index-skip-dot-size
);
7949 margin-left: calc
(-1 * var
(--f7-list-index-skip-dot-size
) / 2);
7950 margin-top: calc
(-1 * var
(--f7-list-index-skip-dot-size
) / 2);
7951 background: var
(--f7-list-index-text-color
, var
(--f7-theme-color
));
7953 .list-index .list-index-label {
7958 background-color: var
(--f7-list-index-label-bg-color
, var
(--f7-theme-color
));
7959 color: var
(--f7-list-index-label-text-color
);
7960 width: var
(--f7-list-index-label-size
);
7961 height: var
(--f7-list-index-label-size
);
7962 line-height: var
(--f7-list-index-label-size
);
7963 font-size: var
(--f7-list-index-label-font-size
);
7964 font-weight: var
(--f7-list-index-label-font-weight
);
7966 .navbar
~ .page
> .list-index
,
7967 .navbar ~ .list-index {
7968 top: var
(--f7-navbar-height
);
7970 .navbar
~ .toolbar-top
~ .list-index
,
7971 .ios
.navbar
~ .toolbar-top-ios
~ .list-index
,
7972 .md .navbar ~ .toolbar-top-md ~ .list-index {
7973 top: calc
(var
(--f7-navbar-height
) + var
(--f7-toolbar-height
));
7975 .navbar
~ .toolbar-top
.tabbar-labels
~ .list-index
,
7976 .ios
.navbar
~ .toolbar-top-ios
.tabbar-labels
~ .list-index
,
7977 .md .navbar ~ .toolbar-top-md.tabbar-labels ~ .list-index {
7978 top: calc
(var
(--f7-navbar-height
) + var
(--f7-tabbar-labels-height
));
7980 .navbar
~ .subnavbar
~ .list-index
,
7981 .page-with-subnavbar .navbar ~ .list-index {
7982 top: calc
(var
(--f7-navbar-height
) + var
(--f7-subnavbar-height
));
7984 .toolbar-bottom
~ .page
> .list-index
,
7985 .ios
.toolbar-bottom-ios
~ .page
> .list-index
,
7986 .md
.toolbar-bottom-md
~ .page
> .list-index
,
7987 .toolbar-bottom
~ * .page
> .list-index
,
7988 .ios
.toolbar-bottom-ios
~ * .page
> .list-index
,
7989 .md
.toolbar-bottom-md
~ * .page
> .list-index
,
7990 .toolbar-bottom
~ .list-index
,
7991 .ios
.toolbar-bottom-ios
~ .list-index
,
7992 .md .toolbar-bottom-md ~ .list-index {
7993 bottom: calc
(var
(--f7-toolbar-height
) + var
(--f7-safe-area-bottom
));
7995 .toolbar-bottom
.tabbar-labels
~ .page
> .list-index
,
7996 .ios
.toolbar-bottom-ios
.tabbar-labels
~ .page
> .list-index
,
7997 .md
.toolbar-bottom-md
.tabbar-labels
~ .page
> .list-index
,
7998 .toolbar-bottom
.tabbar-labels
~ * .page
> .list-index
,
7999 .ios
.toolbar-bottom-ios
.tabbar-labels
~ * .page
> .list-index
,
8000 .md
.toolbar-bottom-md
.tabbar-labels
~ * .page
> .list-index
,
8001 .toolbar-bottom
.tabbar-labels
~ .list-index
,
8002 .ios
.toolbar-bottom-ios
.tabbar-labels
~ .list-index
,
8003 .md .toolbar-bottom-md.tabbar-labels ~ .list-index {
8004 bottom: calc
(var
(--f7-tabbar-labels-height
) + var
(--f7-safe-area-bottom
));
8006 .ios .list-index .list-index-label {
8007 margin-bottom: calc
(-1 * var
(--f7-list-index-label-size
) / 2);
8008 margin-right: calc
(var
(--f7-list-index-width
) - 1px);
8011 .ios .list-index .list-index-label:before {
8015 border-radius: 50% 0% 50% 50%;
8017 background-color: inherit
;
8020 transform: rotate
(45deg);
8023 .md .list-index .list-index-label {
8024 border-radius: 50% 50% 0 50%;
8026 .aurora .list-index .list-index-label {
8027 margin-bottom: calc
(-1 * var
(--f7-list-index-label-size
) / 2);
8028 margin-right: calc
(var
(--f7-list-index-width
) - 1px);
8031 .aurora .list-index .list-index-label:before {
8035 border-radius: 50% 1px 50% 50%;
8037 background-color: inherit
;
8040 transform: rotate
(45deg);
8043 /* === Timeline === */
8045 --f7-timeline-horizontal-date-height: 34px;
8046 --f7-timeline-year-height: 24px;
8047 --f7-timeline-year-font-weight: inherit
;
8048 --f7-timeline-month-height: 24px;
8049 --f7-timeline-month-font-size: inherit
;
8050 --f7-timeline-month-font-weight: inherit
;
8051 --f7-timeline-item-inner-bg-color: #fff;
8052 --f7-timeline-item-text-font-weight: inherit
;
8053 --f7-timeline-item-subtitle-font-weight: inherit
;
8057 --f7-timeline-item-inner-bg-color: #1c1c1d;
8058 --f7-timeline-horizontal-item-border-color: #282829;
8059 --f7-timeline-horizontal-item-date-border-color: #282829;
8062 --f7-timeline-padding-horizontal: 15px;
8063 --f7-timeline-margin-vertical: 35px;
8064 --f7-timeline-divider-margin-horizontal: 15px;
8065 --f7-timeline-inner-block-margin-vertical: 15px;
8066 --f7-timeline-item-inner-border-radius: 7px;
8067 --f7-timeline-item-inner-box-shadow: none
;
8068 --f7-timeline-item-time-font-size: 13px;
8069 --f7-timeline-item-time-text-color: #6d6d72;
8070 --f7-timeline-item-title-font-size: 17px;
8071 --f7-timeline-item-title-line-height: inherit
;
8072 --f7-timeline-item-title-font-weight: 600;
8073 --f7-timeline-item-subtitle-font-size: 15px;
8074 --f7-timeline-item-subtitle-line-height: inherit
;
8075 --f7-timeline-item-text-font-size: inherit
;
8076 --f7-timeline-item-text-color: inherit
;
8077 --f7-timeline-item-text-line-height: inherit
;
8078 --f7-timeline-year-font-size: 16px;
8079 --f7-timeline-horizontal-item-padding: 10px;
8080 --f7-timeline-horizontal-item-border-color: #c4c4c4;
8081 --f7-timeline-horizontal-item-date-border-color: #c4c4c4;
8082 --f7-timeline-horizontal-item-date-shadow-image: none
;
8086 --f7-timeline-item-time-text-color: #8E8E93;
8089 --f7-timeline-padding-horizontal: 16px;
8090 --f7-timeline-margin-vertical: 32px;
8091 --f7-timeline-divider-margin-horizontal: 16px;
8092 --f7-timeline-inner-block-margin-vertical: 16px;
8093 --f7-timeline-item-inner-border-radius: 4px;
8094 --f7-timeline-item-inner-box-shadow: var
(--f7-elevation-1
);
8095 --f7-timeline-item-time-font-size: 13px;
8096 --f7-timeline-item-time-text-color: rgba
(0, 0, 0, 0.54);
8097 --f7-timeline-item-title-font-size: 16px;
8098 --f7-timeline-item-title-line-height: inherit
;
8099 --f7-timeline-item-title-font-weight: 400;
8100 --f7-timeline-item-subtitle-font-size: inherit
;
8101 --f7-timeline-item-subtitle-line-height: inherit
;
8102 --f7-timeline-item-text-font-size: inherit
;
8103 --f7-timeline-item-text-line-height: inherit
;
8104 --f7-timeline-item-text-color: inherit
;
8105 --f7-timeline-year-font-size: 16px;
8106 --f7-timeline-horizontal-item-padding: 12px;
8107 --f7-timeline-horizontal-item-border-color: rgba
(0, 0, 0, 0.12);
8108 --f7-timeline-horizontal-item-date-border-color: transparent
;
8109 --f7-timeline-horizontal-item-date-shadow-image: var
(--f7-bars-shadow-bottom-image
);
8113 --f7-timeline-item-time-text-color: rgba
(255, 255, 255, 0.54);
8116 --f7-timeline-padding-horizontal: 10px;
8117 --f7-timeline-margin-vertical: 15px;
8118 --f7-timeline-divider-margin-horizontal: 15px;
8119 --f7-timeline-inner-block-margin-vertical: 15px;
8120 --f7-timeline-item-inner-border-radius: 4px;
8121 --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba
(0, 0, 0, 0.15);
8122 --f7-timeline-item-time-font-size: 12px;
8123 --f7-timeline-item-time-text-color: rgba
(0, 0, 0, 0.5);
8124 --f7-timeline-item-title-font-size: 14px;
8125 --f7-timeline-item-title-line-height: 1.3;
8126 --f7-timeline-item-title-font-weight: 600;
8127 --f7-timeline-item-subtitle-font-size: 14px;
8128 --f7-timeline-item-subtitle-line-height: 1.3;
8129 --f7-timeline-item-text-color: rgba
(0, 0, 0, 0.6);
8130 --f7-timeline-item-text-font-size: 12px;
8131 --f7-timeline-item-text-line-height: 1.33;
8132 --f7-timeline-year-font-size: 14px;
8133 --f7-timeline-year-font-weight: 500;
8134 --f7-timeline-horizontal-item-padding: 10px;
8135 --f7-timeline-horizontal-item-border-color: rgba
(0, 0, 0, 0.2);
8136 --f7-timeline-horizontal-item-date-border-color: rgba
(0, 0, 0, 0.2);
8137 --f7-timeline-horizontal-item-date-shadow-image: none
;
8139 .aurora
.theme-dark
,
8140 .aurora.theme-dark {
8141 --f7-timeline-item-time-text-color: rgba
(255, 255, 255, 0.52);
8142 --f7-timeline-item-text-color: rgba
(255, 255, 255, 0.52);
8145 box-sizing: border-box
;
8146 margin: var
(--f7-timeline-margin-vertical
) 0;
8147 padding: 0 var
(--f7-timeline-padding-horizontal
);
8150 padding-left: calc
(var
(--f7-timeline-padding-horizontal
) + var
(--f7-safe-area-left
));
8151 padding-right: calc
(var
(--f7-timeline-padding-horizontal
) + var
(--f7-safe-area-right
));
8153 .block-strong .timeline {
8159 justify-content: flex-start
;
8161 box-sizing: border-box
;
8163 padding: 2px 0px var
(--f7-timeline-padding-horizontal
);
8165 .timeline-item:last-child {
8166 padding-bottom: 2px;
8168 .timeline-item-date {
8172 box-sizing: border-box
;
8174 .timeline-item-date small {
8177 .timeline-item-content {
8183 .timeline-item-content
.card
,
8184 .timeline-item-content
.card
,
8185 .timeline-item-content
.list
,
8186 .timeline-item-content
.list
,
8187 .timeline-item-content
.block
,
8188 .timeline-item-content.block {
8192 .timeline-item-content
.card
+ .card
,
8193 .timeline-item-content
.list
+ .card
,
8194 .timeline-item-content
.block
+ .card
,
8195 .timeline-item-content
.card
+ .list
,
8196 .timeline-item-content
.list
+ .list
,
8197 .timeline-item-content
.block
+ .list
,
8198 .timeline-item-content
.card
+ .block
,
8199 .timeline-item-content
.list
+ .block
,
8200 .timeline-item-content .block + .block {
8201 margin: var
(--f7-timeline-inner-block-margin-vertical
) 0 0;
8203 .timeline-item-content
p:first-child
,
8204 .timeline-item-content
ul:first-child
,
8205 .timeline-item-content
ol:first-child
,
8206 .timeline-item-content
h1:first-child
,
8207 .timeline-item-content
h2:first-child
,
8208 .timeline-item-content
h3:first-child
,
8209 .timeline-item-content h4:first-child {
8212 .timeline-item-content
p:last-child
,
8213 .timeline-item-content
ul:last-child
,
8214 .timeline-item-content
ol:last-child
,
8215 .timeline-item-content
h1:last-child
,
8216 .timeline-item-content
h2:last-child
,
8217 .timeline-item-content
h3:last-child
,
8218 .timeline-item-content h4:last-child {
8221 .timeline-item-inner {
8222 background: var
(--f7-timeline-item-inner-bg-color
);
8223 box-sizing: border-box
;
8224 border-radius: var
(--f7-timeline-item-inner-border-radius
);
8225 padding: 8px var
(--f7-timeline-padding-horizontal
);
8226 box-shadow: var
(--f7-timeline-item-inner-box-shadow
);
8228 .timeline-item-inner + .timeline-item-inner {
8229 margin-top: var
(--f7-timeline-inner-block-margin-vertical
);
8231 .timeline-item-inner .block {
8235 .timeline-item-inner .block-strong {
8240 .timeline-item-inner .block-strong:before {
8241 display: none
!important
;
8243 .timeline-item-inner .block-strong:after {
8244 display: none
!important
;
8246 .timeline-item-inner .list ul:before {
8247 display: none
!important
;
8249 .timeline-item-inner .list ul:after {
8250 display: none
!important
;
8252 .timeline-item-divider {
8260 margin: 3px var
(--f7-timeline-divider-margin-horizontal
) 0;
8262 .timeline-item-divider:after
,
8263 .timeline-item-divider:before {
8269 background: inherit
;
8270 transform: translate3d
(-50%, 0, 0);
8272 .timeline-item-divider:after {
8275 .timeline-item-divider:before {
8278 .timeline-item:last-child .timeline-item-divider:after {
8281 .timeline-item:first-child .timeline-item-divider:before {
8284 .timeline-item-time {
8285 font-size: var
(--f7-timeline-item-time-font-size
);
8286 margin-top: var
(--f7-timeline-inner-block-margin-vertical
);
8287 color: var
(--f7-timeline-item-time-text-color
);
8289 .timeline-item-time:first-child
,
8290 .timeline-item-time:last-child {
8293 .timeline-item-title + .timeline-item-time {
8296 .timeline-item-title {
8297 font-size: var
(--f7-timeline-item-title-font-size
);
8298 font-weight: var
(--f7-timeline-item-title-font-weight
);
8299 line-height: var
(--f7-timeline-item-title-line-height
);
8301 .timeline-item-subtitle {
8302 font-size: var
(--f7-timeline-item-subtitle-font-size
);
8303 font-weight: var
(--f7-timeline-item-subtitle-font-weight
);
8304 line-height: var
(--f7-timeline-item-subtitle-line-height
);
8306 .timeline-item-text {
8307 color: var
(--f7-timeline-item-text-color
);
8308 font-size: var
(--f7-timeline-item-text-font-size
);
8309 font-weight: var
(--f7-timeline-item-text-font-weight
);
8310 line-height: var
(--f7-timeline-item-text-line-height
);
8312 .timeline-sides
.timeline-item-right
,
8313 .timeline-sides .timeline-item {
8314 margin-right: calc
(50% - (var
(--f7-timeline-divider-margin-horizontal
) * 2 + 10px) / 2 - 50px);
8317 .timeline-sides
.timeline-item-right
.timeline-item-date
,
8318 .timeline-sides .timeline-item .timeline-item-date {
8321 .timeline-sides
.timeline-item-left
,
8322 .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
8323 flex-direction: row-reverse
;
8324 margin-left: calc
(50% - (var
(--f7-timeline-divider-margin-horizontal
) * 2 + 10px) / 2 - 50px);
8327 .timeline-sides
.timeline-item-left
.timeline-item-date
,
8328 .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
8331 @media (min-width: 768px) {
8332 .tablet-sides
.timeline-item-right
,
8333 .tablet-sides .timeline-item {
8334 margin-right: calc
(50% - (var
(--f7-timeline-divider-margin-horizontal
) * 2 + 10px) / 2 - 50px);
8337 .tablet-sides
.timeline-item-right
.timeline-item-date
,
8338 .tablet-sides .timeline-item .timeline-item-date {
8341 .tablet-sides
.timeline-item-left
,
8342 .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
8343 flex-direction: row-reverse
;
8344 margin-left: calc
(50% - (var
(--f7-timeline-divider-margin-horizontal
) * 2 + 10px) / 2 - 50px);
8347 .tablet-sides
.timeline-item-left
.timeline-item-date
,
8348 .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
8352 .timeline-horizontal {
8358 padding-left: var
(--f7-safe-area-left
);
8361 .timeline-horizontal .timeline-item {
8363 width: 33.33333333vw;
8369 padding-top: var
(--f7-timeline-horizontal-date-height
) !important
;
8370 padding-bottom: var
(--f7-timeline-horizontal-item-padding
);
8372 .timeline-horizontal .timeline-item:after {
8375 background-color: var
(--f7-timeline-horizontal-item-border-color
);
8384 transform-origin: 100% 50%;
8385 transform: scaleX
(calc
(1 / var
(--f7-device-pixel-ratio
)));
8387 .timeline-horizontal .timeline-item-date {
8388 padding: 0px var
(--f7-timeline-horizontal-item-padding
);
8391 line-height: var
(--f7-timeline-horizontal-date-height
);
8396 height: var
(--f7-timeline-horizontal-date-height
);
8397 background-color: var
(--f7-bars-bg-color
, var
(--f7-theme-color
));
8398 color: var
(--f7-bars-text-color
);
8401 .timeline-horizontal .timeline-item-date:after {
8404 background-color: var
(--f7-timeline-horizontal-item-date-border-color
);
8413 transform-origin: 50% 100%;
8414 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
8416 .timeline-horizontal .timeline-item-date:before {
8424 pointer-events: none
;
8425 background: var
(--f7-timeline-horizontal-item-date-shadow-image
);
8427 .timeline-horizontal.no-shadow .timeline-item-date:before {
8430 .timeline-horizontal .timeline-item-content {
8431 padding: var
(--f7-timeline-horizontal-item-padding
);
8432 height: calc
(100% - var
(--f7-timeline-horizontal-item-padding
));
8433 will-change: scroll-position
;
8435 -webkit-overflow-scrolling: touch
;
8438 .timeline-horizontal .timeline-item-divider {
8441 .timeline-horizontal
> .timeline-item:last-child:after
,
8442 .timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after {
8443 display: none
!important
;
8445 .timeline-horizontal.col-5 .timeline-item {
8448 .timeline-horizontal.col-10 .timeline-item {
8451 .timeline-horizontal.col-15 .timeline-item {
8454 .timeline-horizontal.col-20 .timeline-item {
8457 .timeline-horizontal.col-25 .timeline-item {
8460 .timeline-horizontal.col-30 .timeline-item {
8463 .timeline-horizontal.col-33 .timeline-item {
8464 width: 33.333333333333336vw;
8466 .timeline-horizontal.col-35 .timeline-item {
8469 .timeline-horizontal.col-40 .timeline-item {
8472 .timeline-horizontal.col-45 .timeline-item {
8475 .timeline-horizontal.col-50 .timeline-item {
8478 .timeline-horizontal.col-55 .timeline-item {
8481 .timeline-horizontal.col-60 .timeline-item {
8484 .timeline-horizontal.col-65 .timeline-item {
8487 .timeline-horizontal.col-66 .timeline-item {
8488 width: 66.66666666666666vw;
8490 .timeline-horizontal.col-70 .timeline-item {
8493 .timeline-horizontal.col-75 .timeline-item {
8496 .timeline-horizontal.col-80 .timeline-item {
8499 .timeline-horizontal.col-85 .timeline-item {
8502 .timeline-horizontal.col-90 .timeline-item {
8505 .timeline-horizontal.col-95 .timeline-item {
8508 .timeline-horizontal.col-100 .timeline-item {
8511 @media (min-width: 768px) {
8512 .timeline-horizontal.tablet-5 .timeline-item {
8515 .timeline-horizontal.tablet-10 .timeline-item {
8518 .timeline-horizontal.tablet-15 .timeline-item {
8521 .timeline-horizontal.tablet-20 .timeline-item {
8524 .timeline-horizontal.tablet-25 .timeline-item {
8527 .timeline-horizontal.tablet-30 .timeline-item {
8530 .timeline-horizontal.tablet-33 .timeline-item {
8531 width: 33.333333333333336vw;
8533 .timeline-horizontal.tablet-35 .timeline-item {
8536 .timeline-horizontal.tablet-40 .timeline-item {
8539 .timeline-horizontal.tablet-45 .timeline-item {
8542 .timeline-horizontal.tablet-50 .timeline-item {
8545 .timeline-horizontal.tablet-55 .timeline-item {
8548 .timeline-horizontal.tablet-60 .timeline-item {
8551 .timeline-horizontal.tablet-65 .timeline-item {
8554 .timeline-horizontal.tablet-66 .timeline-item {
8555 width: 66.66666666666666vw;
8557 .timeline-horizontal.tablet-70 .timeline-item {
8560 .timeline-horizontal.tablet-75 .timeline-item {
8563 .timeline-horizontal.tablet-80 .timeline-item {
8566 .timeline-horizontal.tablet-85 .timeline-item {
8569 .timeline-horizontal.tablet-90 .timeline-item {
8572 .timeline-horizontal.tablet-95 .timeline-item {
8575 .timeline-horizontal.tablet-100 .timeline-item {
8580 padding-top: var
(--f7-timeline-year-height
);
8582 .timeline-year:after {
8585 background-color: var
(--f7-timeline-horizontal-item-border-color
);
8594 transform-origin: 100% 50%;
8595 transform: scaleX
(calc
(1 / var
(--f7-device-pixel-ratio
)));
8597 .timeline-year:last-child:after {
8598 display: none
!important
;
8601 padding-top: var
(--f7-timeline-month-height
);
8603 .timeline-month .timeline-item:before {
8606 background-color: var
(--f7-timeline-horizontal-item-border-color
);
8615 transform-origin: 50% 0%;
8616 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
8623 box-sizing: border-box
;
8626 .timeline-year-title {
8627 line-height: var
(--f7-timeline-year-height
);
8628 height: var
(--f7-timeline-year-height
);
8629 font-size: var
(--f7-timeline-year-font-size
);
8630 font-weight: var
(--f7-timeline-year-font-weight
);
8632 .timeline-month-title {
8633 line-height: var
(--f7-timeline-month-height
);
8634 height: var
(--f7-timeline-month-height
);
8635 font-size: var
(--f7-timeline-month-font-size
);
8636 font-weight: var
(--f7-timeline-month-font-weight
);
8638 .timeline-year-title
,
8639 .timeline-month-title {
8644 box-sizing: border-box
;
8645 padding: 0 var
(--f7-timeline-horizontal-item-padding
);
8646 background-color: var
(--f7-bars-bg-color
, var
(--f7-theme-color
));
8647 color: var
(--f7-bars-text-color
);
8649 .timeline-year-title span
,
8650 .timeline-month-title span {
8651 display: inline-block
;
8652 position: -webkit-sticky
;
8654 right: calc
(var
(--f7-timeline-horizontal-item-padding
) + var
(--f7-safe-area-right
));
8656 .timeline-month-title span {
8659 .timeline-year:first-child
.timeline-year-title
,
8660 .timeline-year:first-child
.timeline-month:first-child
.timeline-month-title
,
8661 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
8662 left: calc
(var
(--f7-safe-area-left
) * -1);
8666 .timeline-horizontal
.timeline-item:first-child
,
8667 .timeline-year:first-child
.timeline-month:first-child
.timeline-item:first-child
,
8668 .timeline-year:first-child
.timeline-year-title
+ .timeline-month
.timeline-item:first-child
,
8669 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item {
8672 .timeline-horizontal
.timeline-item:first-child
.timeline-item-date
,
8673 .timeline-year:first-child
.timeline-month:first-child
.timeline-item:first-child
.timeline-item-date
,
8674 .timeline-year:first-child
.timeline-year-title
+ .timeline-month
.timeline-item:first-child
.timeline-item-date
,
8675 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item .timeline-item-date {
8677 padding-left: calc
(var
(--f7-timeline-horizontal-item-padding
) + var
(--f7-safe-area-left
));
8678 left: calc
(0px - var
(--f7-safe-area-left
));
8681 .timeline-year:last-child
.timeline-year-title
,
8682 .timeline-year:last-child .timeline-month:last-child .timeline-month-title {
8684 right: calc
(0px - var
(--f7-safe-area-right
));
8686 .timeline-horizontal
.timeline-item:last-child
,
8687 .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
8690 .timeline-horizontal
.timeline-item:last-child
.timeline-item-date
,
8691 .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date {
8693 right: calc
(0px - var
(--f7-safe-area-right
));
8696 .ios .block-strong .timeline-item-inner {
8698 border: 1px solid rgba
(0, 0, 0, 0.1);
8700 .ios .timeline-year-title span {
8703 .md .timeline-year-title span {
8706 .aurora .timeline-year-title span {
8716 .tabs-animated-wrap {
8722 .tabs-animated-wrap > .tabs {
8725 transition-duration: 300ms;
8727 .tabs-animated-wrap > .tabs > .tab {
8732 .tabs-animated-wrap.not-animated > .tabs {
8733 transition-duration: 0ms;
8735 .tabs-swipeable-wrap {
8738 .tabs-swipeable-wrap > .tabs {
8741 .tabs-swipeable-wrap > .tabs > .tab {
8747 /* === Panels === */
8749 --f7-panel-width: 260px;
8751 --f7-panel-left-width: var(--f7-panel-width);
8752 --f7-panel-right-width: var(--f7-panel-width);
8754 --f7-panel-bg-color: #fff;
8757 --f7-panel-backdrop-bg-color: rgba
(0, 0, 0, 0);
8758 --f7-panel-transition-duration: 400ms;
8759 --f7-panel-shadow: transparent
;
8762 --f7-panel-backdrop-bg-color: rgba
(0, 0, 0, 0.2);
8763 --f7-panel-transition-duration: 300ms;
8764 --f7-panel-shadow: rgba
(0, 0, 0, 0.25) 0%,
8765 rgba
(0, 0, 0, 0.1) 30%,
8766 rgba
(0, 0, 0, 0.05) 40%,
8767 rgba
(0, 0, 0, 0) 60%,
8768 rgba
(0, 0, 0, 0) 100%;
8771 --f7-panel-backdrop-bg-color: rgba
(0, 0, 0, 0.2);
8772 --f7-panel-transition-duration: 400ms;
8773 --f7-panel-shadow: transparent
;
8778 top: calc
(var
(--f7-statusbar-height
) + var
(--f7-appbar-app-offset
, 0px));
8780 height: calc
(100% - var
(--f7-statusbar-height
) - var
(--f7-appbar-app-offset
, 0px));
8784 transform: translate3d
(0, 0, 0);
8785 background-color: var
(--f7-panel-backdrop-bg-color
);
8786 transition-duration: var
(--f7-panel-transition-duration
);
8787 will-change: transform
, opacity
;
8789 .panel-backdrop.not-animated {
8790 transition-duration: 0ms !important
;
8795 box-sizing: border-box
;
8797 top: calc
(var
(--f7-statusbar-height
) + var
(--f7-appbar-app-offset
, 0px));
8798 height: calc
(100% - var
(--f7-statusbar-height
) - var
(--f7-appbar-app-offset
, 0px));
8799 transform: translate3d
(0, 0, 0);
8800 width: var
(--f7-panel-width
);
8801 background-color: var
(--f7-panel-bg-color
);
8803 will-change: transform
;
8804 transition-property: transform
;
8807 pointer-events: none
;
8815 transition-property: transform
, opacity
;
8819 transition-duration: var
(--f7-panel-transition-duration
);
8821 .panel
.not-animated
,
8822 .panel.not-animated:after {
8823 transition-duration: 0ms !important
;
8825 .panel
.panel-reveal
.not-animated
~ .views
,
8826 .panel.panel-reveal.not-animated ~ .view {
8827 transition-duration: 0ms !important
;
8829 .panel.panel-resizing {
8830 -webkit-user-select: none
;
8831 -moz-user-select: none
;
8832 -ms-user-select: none
;
8835 .panel
.panel-resizing
,
8836 .panel
.panel-resizing:after
,
8837 .panel
.panel-resizing
~ .views
,
8838 .panel.panel-resizing ~ .view {
8839 transition-duration: 0ms !important
;
8846 width: var
(--f7-panel-left-width
, var
(--f7-panel-width
));
8848 .panel-left.panel-cover {
8849 transform: translate3d
(-100%, 0, 0);
8851 .panel-left.panel-cover:after {
8853 background: linear-gradient
(to right
, var
(--f7-panel-shadow
));
8855 html
.with-panel-left-cover
.panel-left
.panel-cover:after
{
8858 .panel-left.panel-reveal:after {
8860 transform: translate3d
(calc
(-1 * var
(--f7-panel-left-width
, var
(--f7-panel-width
))), 0, 0);
8861 background: linear-gradient
(to left
, var
(--f7-panel-shadow
));
8863 html
.with-panel-left-reveal
.panel-left
.panel-reveal:after
{
8865 transform: translate3d
(0, 0, 0);
8869 width: var
(--f7-panel-right-width
, var
(--f7-panel-width
));
8871 .panel-right.panel-cover {
8872 transform: translate3d
(100%, 0, 0);
8874 .panel-right.panel-cover:after {
8876 background: linear-gradient
(to left
, var
(--f7-panel-shadow
));
8878 html
.with-panel-right-cover
.panel-right
.panel-cover:after
{
8881 .panel-right.panel-reveal:after {
8883 background: linear-gradient
(to right
, var
(--f7-panel-shadow
));
8884 transform: translate3d
(var
(--f7-panel-right-width
, var
(--f7-panel-width
)), 0, 0);
8886 html
.with-panel-right-reveal
.panel-right
.panel-reveal:after
{
8888 transform: translate3d
(0, 0, 0);
8890 .panel-visible-by-breakpoint {
8892 transform: translate3d
(0, 0, 0) !important
;
8894 .panel-visible-by-breakpoint:after {
8897 .panel-visible-by-breakpoint.panel-cover {
8900 html
.with-panel-left-reveal
.views
,
8901 html
.with-panel-right-reveal
.views
,
8902 html
.with-panel-transitioning
.views
,
8903 html
.with-panel-left-reveal
.framework7-root
> .view
,
8904 html
.with-panel-right-reveal
.framework7-root
> .view
,
8905 html
.with-panel-transitioning
.framework7-root
> .view
{
8906 transition-duration: var
(--f7-panel-transition-duration
);
8907 transition-property: transform
;
8909 html
.with-panel-left-reveal
.panel-backdrop
,
8910 html
.with-panel-right-reveal
.panel-backdrop
,
8911 html
.with-panel-transitioning
.panel-backdrop
{
8912 background: rgba
(0, 0, 0, 0);
8916 html
.with-panel
.framework7-root
> .views
.page-content
,
8917 html
.with-panel
.framework7-root
> .view
.page-content
{
8919 -webkit-overflow-scrolling: auto
;
8921 html
.with-panel-left-cover
.panel-backdrop
,
8922 html
.with-panel-right-cover
.panel-backdrop
{
8926 html
.with-panel-left-reveal
.views
,
8927 html
.with-panel-left-reveal
.framework7-root
> .view
,
8928 html
.with-panel-left-reveal
.panel-backdrop
{
8929 transform: translate3d
(var
(--f7-panel-left-width
, var
(--f7-panel-width
)), 0, 0);
8931 html
.with-panel-right-reveal
.views
,
8932 html
.with-panel-right-reveal
.framework7-root
> .view
,
8933 html
.with-panel-right-reveal
.panel-backdrop
{
8934 transform: translate3d
(calc
(-1 * var
(--f7-panel-right-width
, var
(--f7-panel-width
))), 0, 0);
8936 html
.with-panel-left-cover
.panel-left
{
8937 transform: translate3d
(0px, 0, 0);
8939 html
.with-panel-right-cover
.panel-right
{
8940 transform: translate3d
(0px, 0, 0);
8942 .panel-resize-handler {
8951 .panel-resizable .panel-resize-handler {
8954 .panel-left.panel-cover .panel-resize-handler {
8957 .panel-left.panel-reveal .panel-resize-handler {
8960 .panel-right.panel-cover .panel-resize-handler {
8963 .panel-right.panel-reveal .panel-resize-handler {
8968 --f7-card-bg-color: #fff;
8969 --f7-card-outline-border-color: rgba
(0, 0, 0, 0.12);
8970 --f7-card-border-radius: 4px;
8971 --f7-card-font-size: inherit
;
8972 --f7-card-header-text-color: inherit
;
8973 --f7-card-header-font-weight: 400;
8974 --f7-card-header-border-color: #e1e1e1;
8975 --f7-card-footer-border-color: #e1e1e1;
8976 --f7-card-footer-font-weight: 400;
8977 --f7-card-footer-font-size: inherit
;
8978 --f7-card-expandable-bg-color: #fff;
8979 --f7-card-expandable-font-size: 16px;
8980 --f7-card-expandable-tablet-width: 670px;
8981 --f7-card-expandable-tablet-height: 670px;
8985 --f7-card-bg-color: #1c1c1d;
8986 --f7-card-expandable-bg-color: #1c1c1d;
8987 --f7-card-outline-border-color: #282829;
8988 --f7-card-header-border-color: #282829;
8989 --f7-card-footer-border-color: #282829;
8990 --f7-card-footer-text-color: #8E8E93;
8993 --f7-card-margin-horizontal: 10px;
8994 --f7-card-margin-vertical: 10px;
8995 --f7-card-box-shadow: 0px 1px 2px rgba
(0, 0, 0, 0.2);
8996 --f7-card-content-padding-horizontal: 15px;
8997 --f7-card-content-padding-vertical: 15px;
8998 --f7-card-header-font-size: 17px;
8999 --f7-card-header-padding-vertical: 10px;
9000 --f7-card-header-padding-horizontal: 15px;
9001 --f7-card-header-min-height: 44px;
9002 --f7-card-footer-text-color: #6d6d72;
9003 --f7-card-footer-padding-vertical: 10px;
9004 --f7-card-footer-padding-horizontal: 15px;
9005 --f7-card-footer-min-height: 44px;
9006 --f7-card-expandable-margin-horizontal: 20px;
9007 --f7-card-expandable-margin-vertical: 30px;
9008 --f7-card-expandable-box-shadow: 0px 20px 40px rgba
(0, 0, 0, 0.3);
9009 --f7-card-expandable-border-radius: 15px;
9010 --f7-card-expandable-tablet-border-radius: 5px;
9011 --f7-card-expandable-header-font-size: 27px;
9012 --f7-card-expandable-header-font-weight: bold
;
9015 --f7-card-margin-horizontal: 8px;
9016 --f7-card-margin-vertical: 8px;
9017 --f7-card-box-shadow: var
(--f7-elevation-1
);
9018 --f7-card-content-padding-horizontal: 16px;
9019 --f7-card-content-padding-vertical: 16px;
9020 --f7-card-header-font-size: 16px;
9021 --f7-card-header-padding-vertical: 4px;
9022 --f7-card-header-padding-horizontal: 16px;
9023 --f7-card-header-min-height: 48px;
9024 --f7-card-footer-text-color: #757575;
9025 --f7-card-footer-padding-vertical: 4px;
9026 --f7-card-footer-padding-horizontal: 16px;
9027 --f7-card-footer-min-height: 48px;
9028 --f7-card-expandable-margin-horizontal: 12px;
9029 --f7-card-expandable-margin-vertical: 24px;
9030 --f7-card-expandable-box-shadow: var
(--f7-elevation-10
);
9031 --f7-card-expandable-border-radius: 8px;
9032 --f7-card-expandable-tablet-border-radius: 4px;
9033 --f7-card-expandable-header-font-size: 24px;
9034 --f7-card-expandable-header-font-weight: 500;
9037 --f7-card-margin-horizontal: 10px;
9038 --f7-card-margin-vertical: 10px;
9039 --f7-card-box-shadow: 0px 1px 2px rgba
(0, 0, 0, 0.15);
9040 --f7-card-content-padding-horizontal: 15px;
9041 --f7-card-content-padding-vertical: 15px;
9042 --f7-card-header-font-size: 14px;
9043 --f7-card-header-font-weight: bold
;
9044 --f7-card-header-padding-vertical: 10px;
9045 --f7-card-header-padding-horizontal: 15px;
9046 --f7-card-header-min-height: 38px;
9047 --f7-card-footer-text-color: rgba
(0, 0, 0, 0.6);
9048 --f7-card-footer-padding-vertical: 10px;
9049 --f7-card-footer-padding-horizontal: 15px;
9050 --f7-card-footer-min-height: 38px;
9051 --f7-card-expandable-margin-horizontal: 10px;
9052 --f7-card-expandable-margin-vertical: 20px;
9053 --f7-card-expandable-box-shadow: 0px 5px 10px rgba
(0, 0, 0, 0.15);
9054 --f7-card-expandable-border-radius: 15px;
9055 --f7-card-expandable-tablet-border-radius: 5px;
9056 --f7-card-expandable-header-font-size: 27px;
9057 --f7-card-expandable-header-font-weight: bold
;
9059 .cards-list
> ul:before
,
9060 .card .list > ul:before {
9061 display: none
!important
;
9063 .cards-list
> ul:after
,
9064 .card .list > ul:after {
9065 display: none
!important
;
9072 background: var
(--f7-card-bg-color
);
9074 border-radius: var
(--f7-card-border-radius
);
9075 font-size: var
(--f7-card-font-size
);
9076 margin-top: var
(--f7-card-margin-vertical
);
9077 margin-bottom: var
(--f7-card-margin-vertical
);
9078 margin-left: calc
(var
(--f7-card-margin-horizontal
) + var
(--f7-safe-area-left
));
9079 margin-right: calc
(var
(--f7-card-margin-horizontal
) + var
(--f7-safe-area-right
));
9080 box-shadow: var
(--f7-card-box-shadow
);
9086 .row:not(.no-gap) .col > .card {
9094 .ios
.card-outline-ios
,
9095 .md
.card-outline-md
,
9096 .aurora .card-outline-aurora {
9098 border: 1px solid var
(--f7-card-outline-border-color
);
9100 .card-outline
.no-border
,
9101 .ios
.card-outline-ios
.no-border
,
9102 .md
.card-outline-md
.no-border
,
9103 .aurora
.card-outline-aurora
.no-border
,
9104 .card-outline
.no-hairlines
,
9105 .ios
.card-outline-ios
.no-hairlines
,
9106 .md
.card-outline-md
.no-hairlines
,
9107 .aurora .card-outline-aurora.no-hairlines {
9113 .card-content-padding {
9115 padding: var
(--f7-card-content-padding-vertical
) var
(--f7-card-content-padding-horizontal
);
9117 .card-content-padding
> .list
,
9118 .card-content-padding > .block {
9119 margin: calc
(-1 * var
(--f7-card-content-padding-vertical
)) calc
(-1 * var
(--f7-card-content-padding-horizontal
));
9121 .card-content-padding > p:first-child {
9124 .card-content-padding > p:last-child {
9128 min-height: var
(--f7-card-header-min-height
);
9129 color: var
(--f7-card-header-text-color
);
9130 font-size: var
(--f7-card-header-font-size
);
9131 font-weight: var
(--f7-card-header-font-weight
);
9132 padding: var
(--f7-card-header-padding-vertical
) var
(--f7-card-header-padding-horizontal
);
9135 min-height: var
(--f7-card-footer-min-height
);
9136 color: var
(--f7-card-footer-text-color
);
9137 font-size: var
(--f7-card-footer-font-size
);
9138 font-weight: var
(--f7-card-footer-font-weight
);
9139 padding: var
(--f7-card-footer-padding-vertical
) var
(--f7-card-footer-padding-horizontal
);
9141 .card-footer a.link {
9147 box-sizing: border-box
;
9149 justify-content: space-between
;
9150 align-items: center
;
9152 .card-header
[valign
="top"],
9153 .card-footer[valign="top"] {
9154 align-items: flex-start
;
9156 .card-header
[valign
="bottom"],
9157 .card-footer[valign="bottom"] {
9158 align-items: flex-end
;
9160 .card-header a
.link
,
9161 .card-footer a.link {
9164 .card-header a
.link i
.icon
,
9165 .card-footer a.link i.icon {
9168 .card-header a
.icon-only
,
9169 .card-footer a.icon-only {
9171 justify-content: center
;
9172 align-items: center
;
9176 border-radius: var
(--f7-card-border-radius
) var
(--f7-card-border-radius
) 0 0;
9178 .card-header:after {
9181 background-color: var
(--f7-card-header-border-color
);
9190 transform-origin: 50% 100%;
9191 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
9193 .card-header.no-hairline:after {
9194 display: none
!important
;
9197 border-radius: 0 0 var
(--f7-card-border-radius
) var
(--f7-card-border-radius
);
9199 .card-footer:before {
9202 background-color: var
(--f7-card-footer-border-color
);
9211 transform-origin: 50% 0%;
9212 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
9214 .card-footer.no-hairline:before {
9215 display: none
!important
;
9220 background: var
(--f7-card-expandable-bg-color
);
9222 transform-origin: center center
;
9223 transition-property: transform
, border-radius
;
9224 border-radius: var
(--f7-card-expandable-border-radius
);
9226 transition-duration: 200ms;
9227 margin-left: calc
(var
(--f7-card-expandable-margin-horizontal
) + var
(--f7-safe-area-left
));
9228 margin-right: calc
(var
(--f7-card-expandable-margin-horizontal
) + var
(--f7-safe-area-right
));
9229 margin-top: var
(--f7-card-expandable-margin-vertical
);
9230 margin-bottom: var
(--f7-card-expandable-margin-vertical
);
9231 box-shadow: var
(--f7-card-expandable-box-shadow
);
9232 font-size: var
(--f7-card-expandable-font-size
);
9234 .card-expandable.card-no-transition {
9235 transition-duration: 0ms;
9237 .card-expandable.card-expandable-animate-width .card-content {
9238 transition-property: width
, transform
;
9241 .card-expandable.active-state {
9242 transform: scale
(0.97);
9244 .card-expandable
.card-opened-fade-in
,
9245 .card-expandable .card-opened-fade-out {
9246 transition-duration: 400ms;
9248 .card-expandable .card-opened-fade-in {
9250 pointer-events: none
;
9252 .card-expandable .card-content {
9257 transform-origin: center top
;
9259 transition-property: transform
;
9260 box-sizing: border-box
;
9261 pointer-events: none
;
9264 .card-expandable .card-content .card-content-padding {
9265 padding-left: calc
(var
(--f7-safe-area-left
) + var
(--f7-card-content-padding-horizontal
));
9266 padding-right: calc
(var
(--f7-safe-area-right
) + var
(--f7-card-content-padding-horizontal
));
9268 .card-expandable.card-opened {
9269 transition-duration: 0ms;
9271 .card-expandable
.card-opening
,
9272 .card-expandable
.card-closing
,
9273 .card-expandable.card-transitioning {
9274 transition-duration: 400ms;
9276 .card-expandable.card-opening .card-content {
9277 transition-duration: 300ms;
9279 .card-expandable.card-closing .card-content {
9280 transition-duration: 500ms;
9282 .card-expandable
.card-opening
,
9283 .card-expandable
.card-opened
,
9284 .card-expandable.card-closing {
9287 .card-expandable
.card-opening
,
9288 .card-expandable.card-opened {
9291 .card-expandable
.card-opening
.card-opened-fade-in
,
9292 .card-expandable.card-opened .card-opened-fade-in {
9294 pointer-events: auto
;
9296 .card-expandable
.card-opening
.card-opened-fade-out
,
9297 .card-expandable.card-opened .card-opened-fade-out {
9299 pointer-events: none
;
9301 .card-expandable.card-opened .card-content {
9303 -webkit-overflow-scrolling: touch
;
9304 pointer-events: auto
;
9306 .card-expandable .card-header {
9307 font-size: var
(--f7-card-expandable-header-font-size
);
9308 font-weight: var
(--f7-card-expandable-header-font-weight
);
9310 .card-expandable .card-header:after {
9311 display: none
!important
;
9313 .card-prevent-open {
9314 pointer-events: auto
;
9316 .card-expandable-size {
9323 pointer-events: none
;
9326 @media (min-width: 768px) and
(min-height: 670px) {
9327 .card-expandable:not(.card-tablet-fullscreen) {
9328 max-width: var
(--f7-card-expandable-tablet-width
);
9330 .card-expandable:not
(.card-tablet-fullscreen
).card-opened
,
9331 .card-expandable:not(.card-tablet-fullscreen).card-opening {
9332 border-radius: var
(--f7-card-expandable-tablet-border-radius
);
9334 .card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content {
9335 width: var
(--f7-card-expandable-tablet-width
);
9337 .card-expandable:not(.card-tablet-fullscreen) .card-expandable-size {
9338 width: var
(--f7-card-expandable-tablet-width
);
9339 height: var
(--f7-card-expandable-tablet-height
);
9342 .page.page-with-card-opened .page-content {
9352 pointer-events: none
;
9353 background: rgba
(0, 0, 0, 0.2);
9357 animation: card-backdrop-fade-in
400ms forwards
;
9358 pointer-events: auto
;
9360 .card-backdrop-out {
9361 animation: card-backdrop-fade-out
400ms forwards
;
9363 @supports ((-webkit-backdrop-filter: blur
(15px)) or
(backdrop-filter: blur
(15px))) {
9365 background: transparent
;
9369 animation: card-backdrop-blur-in
400ms forwards
;
9371 .card-backdrop-out {
9372 animation: card-backdrop-blur-out
400ms forwards
;
9375 @keyframes card-backdrop-fade-in
{
9383 @keyframes card-backdrop-fade-out
{
9391 @keyframes card-backdrop-blur-in
{
9393 -webkit-backdrop-filter: blur
(0px);
9394 backdrop-filter: blur
(0px);
9397 -webkit-backdrop-filter: blur
(15px);
9398 backdrop-filter: blur
(15px);
9401 @keyframes card-backdrop-blur-out
{
9403 -webkit-backdrop-filter: blur
(15px);
9404 backdrop-filter: blur
(15px);
9407 -webkit-backdrop-filter: blur
(0px);
9408 backdrop-filter: blur
(0px);
9413 --f7-chip-bg-color: rgba
(0, 0, 0, 0.12);
9414 --f7-chip-font-size: 13px;
9415 --f7-chip-font-weight: normal
;
9416 --f7-chip-outline-border-color: rgba
(0, 0, 0, 0.12);
9417 --f7-chip-media-font-size: 16px;
9418 --f7-chip-delete-button-color: #000;
9422 --f7-chip-delete-button-color: #fff;
9423 --f7-chip-bg-color: #333;
9424 --f7-chip-outline-border-color: #333;
9427 --f7-chip-text-color: #000;
9428 --f7-chip-height: 24px;
9429 --f7-chip-padding-horizontal: 10px;
9433 --f7-chip-text-color: #fff;
9436 --f7-chip-text-color: rgba
(0, 0, 0, 0.87);
9437 --f7-chip-height: 32px;
9438 --f7-chip-padding-horizontal: 12px;
9442 --f7-chip-text-color: rgba
(255, 255, 255, 0.87);
9445 --f7-chip-text-color: #000;
9446 --f7-chip-height: 20px;
9447 --f7-chip-padding-horizontal: 10px;
9448 --f7-chip-font-size: 12px;
9449 --f7-chip-media-font-size: 14px;
9451 .aurora
.theme-dark
,
9452 .aurora.theme-dark {
9453 --f7-chip-text-color: #fff;
9456 padding-left: var
(--f7-chip-padding-horizontal
);
9457 padding-right: var
(--f7-chip-padding-horizontal
);
9458 font-weight: var
(--f7-chip-font-weight
);
9459 display: inline-flex
;
9460 box-sizing: border-box
;
9461 vertical-align: middle
;
9462 align-items: center
;
9464 background-color: var
(--f7-chip-bg-color
);
9465 font-size: var
(--f7-chip-font-size
);
9466 color: var
(--f7-chip-text-color
);
9467 height: var
(--f7-chip-height
);
9468 line-height: var
(--f7-chip-height
);
9469 border-radius: var
(--f7-chip-height
);
9476 align-items: center
;
9477 justify-content: center
;
9478 height: var
(--f7-chip-height
);
9479 width: var
(--f7-chip-height
);
9480 border-radius: var
(--f7-chip-height
);
9482 line-height: var
(--f7-chip-height
);
9483 box-sizing: border-box
;
9485 font-size: var
(--f7-chip-media-font-size
);
9486 vertical-align: middle
;
9487 margin-right: calc
(-1 * var
(--f7-chip-padding-horizontal
));
9489 .chip-media i.icon {
9490 font-size: calc
(var
(--f7-chip-height
) - 8px);
9491 height: calc
(var
(--f7-chip-height
) - 8px);
9501 .chip-media + .chip-label {
9505 white-space: nowrap
;
9507 text-overflow: ellipsis
;
9516 background-repeat: no-repeat
;
9519 color: var
(--f7-chip-delete-button-color
);
9523 .chip-delete:after {
9524 font-family: 'framework7-core-icons';
9525 font-weight: normal
;
9528 letter-spacing: normal
;
9529 text-transform: none
;
9530 white-space: nowrap
;
9533 -webkit-font-smoothing: antialiased
;
9534 text-rendering: optimizeLegibility
;
9535 -moz-osx-font-smoothing: grayscale
;
9536 -moz-font-feature-settings: "liga";
9537 font-feature-settings: "liga";
9543 content: 'delete_round_ios';
9546 .chip .chip-delete.active-state {
9550 .ios
.chip-outline-ios
,
9551 .md
.chip-outline-md
,
9552 .aurora .chip-outline-aurora {
9553 border: 1px solid var
(--f7-chip-outline-border-color
);
9556 .chip[class*="color-"] {
9557 --f7-chip-bg-color: var
(--f7-theme-color
);
9558 --f7-chip-text-color: #fff;
9560 .chip-outline
[class
*="color-"],
9561 .ios
.chip-outline-ios
[class
*="color-"],
9562 .md
.chip-outline-md
[class
*="color-"],
9563 .aurora .chip-outline-aurora[class*="color-"] {
9564 --f7-chip-outline-border-color: var
(--f7-theme-color
);
9565 --f7-chip-text-color: var
(--f7-theme-color
);
9568 margin-left: calc
(-1 * var
(--f7-chip-padding-horizontal
));
9570 .ios .chip-delete:after {
9573 .md .chip-label + .chip-delete {
9577 margin-left: calc
(-1 * var
(--f7-chip-padding-horizontal
) + 4px);
9579 .md .chip-delete:after {
9582 .aurora .chip-delete {
9583 margin-left: calc
(-1 * var
(--f7-chip-padding-horizontal
));
9585 .aurora .chip-delete:after {
9591 --f7-input-bg-color: transparent
;
9592 --f7-label-font-weight: 400;
9593 --f7-label-line-height: 1.2;
9594 --f7-input-padding-left: 0px;
9595 --f7-input-padding-right: 0px;
9596 --f7-input-error-text-color: #ff3b30;
9597 --f7-input-error-font-size: 12px;
9598 --f7-input-error-line-height: 1.4;
9599 --f7-input-error-font-weight: 400;
9600 --f7-input-info-font-size: 12px;
9601 --f7-input-info-line-height: 1.4;
9602 --f7-input-outline-height: 40px;
9603 --f7-input-outline-border-color: #999;
9604 --f7-input-outline-border-radius: 4px;
9605 --f7-input-outline-padding-horizontal: 12px;
9606 --f7-textarea-height: 100px;
9608 --f7-input-outline-focused-border-color: var(--f7-theme-color);
9609 --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
9614 --f7-input-outline-border-color: #444;
9617 --f7-input-height: 44px;
9618 --f7-input-text-color: #000000;
9619 --f7-input-font-size: 17px;
9620 --f7-input-placeholder-color: #a9a9a9;
9621 --f7-textarea-padding-vertical: 11px;
9623 --f7-input-focused-border-color: var(--f7-list-item-border-color);
9624 --f7-input-invalid-border-color: var(--f7-list-item-border-color);
9625 --f7-input-invalid-text-color: var(--f7-input-error-text-color);
9627 --f7-label-font-size: 12px;
9628 --f7-label-text-color: inherit
;
9630 --f7-label-focused-text-color: var(--f7-label-text-color);
9631 --f7-label-invalid-text-color: var(--f7-label-text-color);
9633 --f7-floating-label-scale: calc
(17 / 12);
9634 --f7-inline-label-font-size: 17px;
9635 --f7-inline-label-line-height: 1.4;
9636 --f7-inline-label-padding-top: 3px;
9637 --f7-input-info-text-color: #8e8e93;
9638 --f7-input-clear-button-size: 14px;
9639 --f7-input-clear-button-color: #8e8e93;
9643 --f7-input-text-color: #fff;
9646 --f7-input-height: 36px;
9647 --f7-input-text-color: #212121;
9648 --f7-input-font-size: 16px;
9649 --f7-input-placeholder-color: rgba
(0, 0, 0, 0.35);
9650 --f7-textarea-padding-vertical: 7px;
9652 --f7-input-focused-border-color: var(--f7-theme-color);
9653 --f7-input-invalid-border-color: var(--f7-input-error-text-color);
9654 --f7-input-invalid-text-color: var(--f7-input-text-color);
9656 --f7-label-font-size: 12px;
9657 --f7-label-text-color: rgba
(0, 0, 0, 0.65);
9659 --f7-label-focused-text-color: var(--f7-theme-color);
9660 --f7-label-invalid-text-color: var(--f7-input-error-text-color );
9662 --f7-floating-label-scale: calc
(16 / 12);
9663 --f7-inline-label-font-size: 16px;
9664 --f7-inline-label-line-height: 1.5;
9665 --f7-inline-label-padding-top: 7px;
9666 --f7-input-info-text-color: rgba
(0, 0, 0, 0.45);
9667 --f7-input-clear-button-size: 18px;
9668 --f7-input-clear-button-color: #aaa;
9672 --f7-input-text-color: rgba
(255, 255, 255, 0.87);
9673 --f7-input-placeholder-color: rgba
(255, 255, 255, 0.35);
9674 --f7-label-text-color: rgba
(255, 255, 255, 0.54);
9675 --f7-input-info-text-color: rgba
(255, 255, 255, 0.35);
9678 --f7-input-height: 24px;
9679 --f7-input-text-color: #000000;
9680 --f7-input-font-size: 13px;
9681 --f7-input-placeholder-color: rgba
(0, 0, 0, 0.32);
9682 --f7-textarea-padding-vertical: 2px;
9684 --f7-input-focused-border-color: var(--f7-list-item-border-color);
9685 --f7-input-invalid-border-color: var(--f7-list-item-border-color);
9686 --f7-input-invalid-text-color: var(--f7-input-error-text-color);
9688 --f7-label-font-size: 11px;
9689 --f7-label-text-color: inherit
;
9691 --f7-label-focused-text-color: var(--f7-label-text-color);
9692 --f7-label-invalid-text-color: var(--f7-label-text-color);
9694 --f7-floating-label-scale: calc
(13 / 11);
9695 --f7-inline-label-font-size: 14px;
9696 --f7-inline-label-line-height: 1.4;
9697 --f7-inline-label-padding-top: 1px;
9698 --f7-input-info-text-color: rgba
(0, 0, 0, 0.5);
9699 --f7-input-clear-button-size: 14px;
9700 --f7-input-clear-button-color: #666;
9701 --f7-input-outline-height: 32px;
9702 --f7-input-outline-padding-horizontal: 8px;
9704 .aurora
.theme-dark
,
9705 .aurora.theme-dark {
9706 --f7-input-text-color: #fff;
9707 --f7-input-clear-button-color: #aaa;
9708 --f7-input-placeholder-color: rgba
(255, 255, 255, 0.35);
9711 input
[type
="password"],
9712 input
[type
="search"],
9713 input
[type
="email"],
9717 input
[type
="datetime-local"],
9719 input
[type
="number"],
9722 box-sizing: border-box
;
9723 -webkit-appearance: none
;
9724 -moz-appearance: none
;
9733 font-family: inherit
;
9739 .textarea-resizable-shadow {
9743 pointer-events: none
;
9748 .list input
[type
="text"],
9749 .list input
[type
="password"],
9750 .list input
[type
="search"],
9751 .list input
[type
="email"],
9752 .list input
[type
="tel"],
9753 .list input
[type
="url"],
9754 .list input
[type
="date"],
9755 .list input
[type
="datetime-local"],
9756 .list input
[type
="time"],
9757 .list input
[type
="number"],
9760 height: var
(--f7-input-height
);
9761 color: var
(--f7-input-text-color
);
9762 font-size: var
(--f7-input-font-size
);
9763 background-color: var
(--f7-input-bg-color
, transparent
);
9764 padding-left: var
(--f7-input-padding-left
);
9765 padding-right: var
(--f7-input-padding-right
);
9767 .list input
[type
="text"]::-webkit-input-placeholder
,
9768 .list input
[type
="password"]::-webkit-input-placeholder
,
9769 .list input
[type
="search"]::-webkit-input-placeholder
,
9770 .list input
[type
="email"]::-webkit-input-placeholder
,
9771 .list input
[type
="tel"]::-webkit-input-placeholder
,
9772 .list input
[type
="url"]::-webkit-input-placeholder
,
9773 .list input
[type
="date"]::-webkit-input-placeholder
,
9774 .list input
[type
="datetime-local"]::-webkit-input-placeholder
,
9775 .list input
[type
="time"]::-webkit-input-placeholder
,
9776 .list input
[type
="number"]::-webkit-input-placeholder
,
9777 .list select::-webkit-input-placeholder {
9778 color: var
(--f7-input-placeholder-color
);
9780 .list input
[type
="text"]::-moz-placeholder
,
9781 .list input
[type
="password"]::-moz-placeholder
,
9782 .list input
[type
="search"]::-moz-placeholder
,
9783 .list input
[type
="email"]::-moz-placeholder
,
9784 .list input
[type
="tel"]::-moz-placeholder
,
9785 .list input
[type
="url"]::-moz-placeholder
,
9786 .list input
[type
="date"]::-moz-placeholder
,
9787 .list input
[type
="datetime-local"]::-moz-placeholder
,
9788 .list input
[type
="time"]::-moz-placeholder
,
9789 .list input
[type
="number"]::-moz-placeholder
,
9790 .list select::-moz-placeholder {
9791 color: var
(--f7-input-placeholder-color
);
9793 .list input
[type
="text"]::-ms-input-placeholder
,
9794 .list input
[type
="password"]::-ms-input-placeholder
,
9795 .list input
[type
="search"]::-ms-input-placeholder
,
9796 .list input
[type
="email"]::-ms-input-placeholder
,
9797 .list input
[type
="tel"]::-ms-input-placeholder
,
9798 .list input
[type
="url"]::-ms-input-placeholder
,
9799 .list input
[type
="date"]::-ms-input-placeholder
,
9800 .list input
[type
="datetime-local"]::-ms-input-placeholder
,
9801 .list input
[type
="time"]::-ms-input-placeholder
,
9802 .list input
[type
="number"]::-ms-input-placeholder
,
9803 .list select::-ms-input-placeholder {
9804 color: var
(--f7-input-placeholder-color
);
9806 .list input
[type
="text"]::placeholder
,
9807 .list input
[type
="password"]::placeholder
,
9808 .list input
[type
="search"]::placeholder
,
9809 .list input
[type
="email"]::placeholder
,
9810 .list input
[type
="tel"]::placeholder
,
9811 .list input
[type
="url"]::placeholder
,
9812 .list input
[type
="date"]::placeholder
,
9813 .list input
[type
="datetime-local"]::placeholder
,
9814 .list input
[type
="time"]::placeholder
,
9815 .list input
[type
="number"]::placeholder
,
9816 .list select::placeholder {
9817 color: var
(--f7-input-placeholder-color
);
9821 color: var
(--f7-input-text-color
);
9822 font-size: var
(--f7-input-font-size
);
9825 height: var
(--f7-textarea-height
);
9826 background-color: var
(--f7-input-bg-color
, transparent
);
9827 padding-top: var
(--f7-textarea-padding-vertical
);
9828 padding-bottom: var
(--f7-textarea-padding-vertical
);
9829 padding-left: var
(--f7-input-padding-left
);
9830 padding-right: var
(--f7-input-padding-right
);
9832 .list textarea::-webkit-input-placeholder {
9833 color: var
(--f7-input-placeholder-color
);
9835 .list textarea::-moz-placeholder {
9836 color: var
(--f7-input-placeholder-color
);
9838 .list textarea::-ms-input-placeholder {
9839 color: var
(--f7-input-placeholder-color
);
9841 .list textarea::placeholder {
9842 color: var
(--f7-input-placeholder-color
);
9844 .list textarea.resizable {
9845 height: var
(--f7-input-height
);
9847 .list input[type="datetime-local"] {
9850 .list input
[type
="time"],
9851 .list input
[type
="date"],
9852 .list input[type="datetime-local"] {
9853 line-height: var
(--f7-input-height
);
9855 .list input
[type
="date"],
9856 .list input[type="datetime-local"] {
9858 flex-direction: row-reverse
;
9862 .list .item-floating-label {
9864 vertical-align: top
;
9866 font-size: var
(--f7-label-font-size
);
9867 font-weight: var
(--f7-label-font-weight
);
9868 line-height: var
(--f7-label-line-height
);
9869 color: var
(--f7-label-text-color
);
9870 transition-duration: 200ms;
9871 transition-property: transform
, color
;
9873 .list .item-floating-label {
9874 --label-height: calc
(var
(--f7-label-font-size
) * var
(--f7-label-line-height
));
9875 transform: scale
(var
(--f7-floating-label-scale
)) translateY
(calc
((var
(--f7-input-height
) / 2 + 50%) / var
(--f7-floating-label-scale
)));
9876 color: var
(--f7-input-placeholder-color
);
9878 max-width: calc
(100% / var
(--f7-floating-label-scale
));
9879 pointer-events: none
;
9880 right: var
(--f7-input-padding-right
);
9881 transform-origin: right center
;
9883 .list
.item-floating-label
~ .item-input-wrap
input::-webkit-input-placeholder
,
9884 .list .item-floating-label ~ .item-input-wrap textarea::-webkit-input-placeholder {
9886 transition-duration: 100ms;
9888 .list
.item-floating-label
~ .item-input-wrap
input::-moz-placeholder
,
9889 .list .item-floating-label ~ .item-input-wrap textarea::-moz-placeholder {
9891 transition-duration: 100ms;
9893 .list
.item-floating-label
~ .item-input-wrap
input::-ms-input-placeholder
,
9894 .list .item-floating-label ~ .item-input-wrap textarea::-ms-input-placeholder {
9896 transition-duration: 100ms;
9898 .list
.item-floating-label
~ .item-input-wrap
input::placeholder
,
9899 .list .item-floating-label ~ .item-input-wrap textarea::placeholder {
9901 transition-duration: 100ms;
9903 .list
.item-floating-label
~ .item-input-wrap input
.input-focused::-webkit-input-placeholder
,
9904 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-webkit-input-placeholder {
9906 transition-duration: 300ms;
9908 .list
.item-floating-label
~ .item-input-wrap input
.input-focused::-moz-placeholder
,
9909 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-moz-placeholder {
9911 transition-duration: 300ms;
9913 .list
.item-floating-label
~ .item-input-wrap input
.input-focused::-ms-input-placeholder
,
9914 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-ms-input-placeholder {
9916 transition-duration: 300ms;
9918 .list
.item-floating-label
~ .item-input-wrap input
.input-focused::placeholder
,
9919 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::placeholder {
9921 transition-duration: 300ms;
9923 .list .item-input-with-value .item-floating-label {
9924 color: var
(--f7-label-text-color
);
9926 .list
.item-input-with-value
.item-floating-label
,
9927 .list .item-input-focused .item-floating-label {
9928 transform: scale
(1) translateY
(0);
9930 .list .item-input-wrap {
9935 .item-input .item-inner {
9937 flex-direction: column
;
9938 align-items: flex-start
;
9940 .item-input-error-message
,
9941 .input-error-message {
9942 font-size: var
(--f7-input-error-font-size
);
9943 line-height: var
(--f7-input-error-line-height
);
9944 color: var
(--f7-input-error-text-color
);
9945 font-weight: var
(--f7-input-error-font-weight
);
9947 box-sizing: border-box
;
9951 font-size: var
(--f7-input-info-font-size
);
9952 line-height: var
(--f7-input-info-line-height
);
9953 color: var
(--f7-input-info-text-color
);
9955 .item-input-invalid
.item-input-error-message
,
9956 .input-invalid
.item-input-error-message
,
9957 .item-input-invalid
.input-error-message
,
9958 .input-invalid .input-error-message {
9961 .item-input-invalid
.item-input-info
,
9962 .input-invalid
.item-input-info
,
9963 .item-input-invalid
.input-info
,
9964 .input-invalid .input-info {
9967 .inline-labels
.item-inner
,
9968 .inline-label .item-inner {
9970 align-items: center
;
9971 flex-direction: row
;
9973 .inline-labels
.item-label
,
9974 .inline-label
.item-label
,
9975 .inline-labels
.item-floating-label
,
9976 .inline-label .item-floating-label {
9977 padding-top: var
(--f7-inline-label-padding-top
);
9978 align-self: flex-start
;
9980 font-size: var
(--f7-inline-label-font-size
);
9981 line-height: var
(--f7-inline-label-line-height
);
9983 .inline-labels
.item-label
+ .item-input-wrap
,
9984 .inline-label
.item-label
+ .item-input-wrap
,
9985 .inline-labels
.item-floating-label
+ .item-input-wrap
,
9986 .inline-label .item-floating-label + .item-input-wrap {
9997 .input-clear-button {
9999 pointer-events: none
;
10000 visibility: hidden
;
10001 transition-duration: 100ms;
10002 position: absolute
;
10011 width: var
(--f7-input-clear-button-size
);
10012 height: var
(--f7-input-clear-button-size
);
10013 margin-top: calc
(-1 * var
(--f7-input-clear-button-size
) / 2);
10014 color: var
(--f7-input-clear-button-color
);
10017 .input-clear-button:after {
10018 font-family: 'framework7-core-icons';
10019 font-weight: normal
;
10020 font-style: normal
;
10022 letter-spacing: normal
;
10023 text-transform: none
;
10024 white-space: nowrap
;
10027 -webkit-font-smoothing: antialiased
;
10028 text-rendering: optimizeLegibility
;
10029 -moz-osx-font-smoothing: grayscale
;
10030 -moz-font-feature-settings: "liga";
10031 font-feature-settings: "liga";
10032 text-align: center
;
10038 .input-clear-button:before {
10039 position: absolute
;
10044 .item-input-wrap .input-clear-button {
10045 top: calc
(var
(--f7-input-height
) / 2);
10047 .input-clear-button.active-state {
10048 opacity: 0.75 !important
;
10050 .input-with-value
~ .input-clear-button
,
10051 .item-input-with-value
.input-clear-button
,
10052 .input-with-value .input-clear-button {
10054 pointer-events: auto
;
10055 visibility: visible
;
10057 .input-dropdown-wrap
,
10059 position: relative
;
10061 .input-dropdown-wrap:before
,
10062 .input-dropdown:before {
10064 pointer-events: none
;
10065 position: absolute
;
10070 border-left: 4px solid transparent
;
10071 border-right: 4px solid transparent
;
10072 border-top: 5px solid
#727272;
10075 .input-dropdown-wrap select
,
10076 .input-dropdown select
,
10077 .input-dropdown-wrap input
,
10078 .input-dropdown input
,
10079 .input-dropdown-wrap textarea
,
10080 .input-dropdown textarea {
10081 padding-left: calc
(20px + var
(--f7-input-padding-left
));
10083 .input-outline:after
,
10084 .item-input-outline .item-input-wrap:after {
10086 position: absolute
;
10091 box-sizing: border-box
;
10092 border: 1px solid var
(--f7-input-outline-border-color
);
10093 border-radius: var
(--f7-input-outline-border-radius
);
10094 transition-duration: 200ms;
10095 pointer-events: none
;
10097 .input-outline
.input-focused:after
,
10098 .item-input-outline.item-input-focused .item-input-wrap:after {
10100 border-color: var
(--f7-input-outline-focused-border-color
, var
(--f7-theme-color
));
10102 .input-outline
.input-invalid:after
,
10103 .item-input-outline.item-input-invalid .item-input-wrap:after {
10105 border-color: var
(--f7-input-outline-invalid-border-color
, var
(--f7-input-error-text-color
));
10107 .input-outline input
,
10108 .item-input-outline input
,
10109 .list
.item-input-outline input
,
10110 .input-outline textarea
,
10111 .item-input-outline textarea
,
10112 .list
.item-input-outline textarea
,
10113 .input-outline select
,
10114 .item-input-outline select
,
10115 .list .item-input-outline select {
10116 border-radius: var
(--f7-input-outline-border-radius
);
10117 padding-left: var
(--f7-input-outline-padding-horizontal
);
10118 padding-right: var
(--f7-input-outline-padding-horizontal
);
10120 .input-outline
.input-dropdown:before
,
10121 .item-input-outline .input-dropdown-wrap:before {
10124 .input-outline
.input-dropdown input
,
10125 .item-input-outline
.input-dropdown-wrap input
,
10126 .input-outline
.input-dropdown textarea
,
10127 .item-input-outline
.input-dropdown-wrap textarea
,
10128 .input-outline
.input-dropdown select
,
10129 .item-input-outline .input-dropdown-wrap select {
10130 padding-left: 20px;
10132 .input-outline
.input-clear-button
,
10133 .item-input-outline .input-clear-button {
10136 .item-input-outline {
10137 --f7-input-height: var
(--f7-input-outline-height
);
10139 .item-input-outline .item-inner:after {
10140 display: none
!important
;
10142 .item-input-outline .item-label {
10143 right: var
(--f7-input-outline-padding-horizontal
);
10145 .inline-labels
.item-input-outline
.item-label
,
10146 .inline-label
.item-input-outline
.item-label
,
10147 .item-input-outline
.inline-label
.item-label
,
10148 .item-input-outline .inline-label.item-label {
10151 .item-input-outline .item-floating-label {
10152 right: calc
(var
(--f7-input-outline-padding-horizontal
) - 4px);
10154 padding-right: 4px;
10155 background: var
(--f7-page-bg-color
);
10157 margin-top: calc
(-0.5 * (var
(--f7-label-font-size
) * var
(--f7-label-line-height
)));
10159 .item-input-outline
.item-input-with-value
.item-floating-label
,
10160 .item-input-outline.item-input-focused .item-floating-label {
10161 transform: scale
(1) translateY
(50%);
10163 .item-input-outline
.item-input-info
,
10164 .item-input-outline .item-input-error-message {
10165 padding-right: var
(--f7-input-outline-padding-horizontal
);
10167 .block-strong .item-input-outline .item-floating-label {
10168 background: var
(--f7-block-strong-bg-color
);
10170 .list .item-input-outline .item-floating-label {
10171 background: var
(--f7-list-bg-color
);
10173 .ios
.item-label
+ .item-input-wrap
,
10174 .ios .item-floating-label + .item-input-wrap {
10177 .ios .item-input-focused .item-floating-label {
10178 color: var
(--f7-label-text-color
);
10180 .ios .item-input .item-media {
10181 align-self: flex-start
;
10183 .ios .item-input-wrap {
10184 margin-top: calc
(-1 * var
(--f7-list-item-padding-vertical
));
10185 margin-bottom: calc
(-1 * var
(--f7-list-item-padding-vertical
));
10187 .ios
.inline-labels
.item-label
+ .item-input-wrap
,
10188 .ios
.inline-label
.item-label
+ .item-input-wrap
,
10189 .ios
.inline-labels
.item-floating-label
+ .item-input-wrap
,
10190 .ios .inline-label .item-floating-label + .item-input-wrap {
10191 margin-top: calc
(-1 * var
(--f7-list-item-padding-vertical
));
10193 .ios
.inline-labels
.item-input-wrap
,
10194 .ios .inline-label .item-input-wrap {
10195 margin-top: calc
(-1 * var
(--f7-list-item-padding-vertical
));
10197 .ios
.item-input-error-message
,
10198 .ios
.item-input-info
,
10199 .ios
.input-error-message
,
10201 position: relative
;
10202 margin-bottom: 6px;
10205 .ios
.item-input-focused
.item-label
,
10206 .ios .item-input-focused .item-floating-label {
10207 color: var
(--f7-label-focused-text-color
, var
(--f7-label-text-color
));
10209 .ios .item-input-focused .item-inner:after {
10210 background: var
(--f7-input-focused-border-color
, var
(--f7-list-item-border-color
));
10212 .ios
.item-input-invalid
.item-label
,
10213 .ios .item-input-invalid .item-floating-label {
10214 color: var
(--f7-label-invalid-text-color
, var
(--f7-label-text-color
));
10216 .ios .item-input-invalid .item-inner:after {
10217 background: var
(--f7-input-invalid-border-color
, var
(--f7-list-item-border-color
));
10219 .ios
.item-input-invalid input
,
10220 .ios
.input-invalid input
,
10221 .ios
.item-input-invalid select
,
10222 .ios
.input-invalid select
,
10223 .ios
.item-input-invalid textarea
,
10224 .ios .input-invalid textarea {
10225 color: var
(--f7-input-invalid-text-color
, var
(--f7-input-error-text-color
));
10227 .ios .input-clear-button:after {
10228 content: 'delete_round_ios';
10229 font-size: calc
(var
(--f7-input-clear-button-size
) / (14 / 10));
10232 .ios .input-clear-button:before {
10235 margin-left: -22px;
10238 .ios
.item-input-outline
.item-input-wrap
,
10239 .ios .input-outline .item-input-wrap {
10243 .ios
.item-input-outline
.item-input-error-message
,
10244 .ios
.input-outline
.item-input-error-message
,
10245 .ios
.item-input-outline
.item-input-info
,
10246 .ios
.input-outline
.item-input-info
,
10247 .ios
.item-input-outline
.input-error-message
,
10248 .ios
.input-outline
.input-error-message
,
10249 .ios
.item-input-outline
.input-info
,
10250 .ios .input-outline .input-info {
10252 white-space: normal
;
10254 text-overflow: ellipsis
;
10256 .ios
.item-input-outline
.item-input-info
,
10257 .ios
.input-outline
.item-input-info
,
10258 .ios
.item-input-outline
.input-info
,
10259 .ios .input-outline .input-info {
10260 margin-bottom: calc
(-1 * var
(--f7-input-info-font-size
) * var
(--f7-input-info-line-height
));
10262 .ios
.item-input-outline
.item-input-error-message
,
10263 .ios
.input-outline
.item-input-error-message
,
10264 .ios
.item-input-outline
.input-error-message
,
10265 .ios .input-outline .input-error-message {
10266 margin-bottom: calc
(-1 * var
(--f7-input-error-font-size
) * var
(--f7-input-error-line-height
));
10268 .ios
.item-input-outline
.item-input-with-info
.item-input-wrap
,
10269 .ios
.input-outline
.item-input-with-info
.item-input-wrap
,
10270 .ios
.item-input-outline
.input-with-info
.item-input-wrap
,
10271 .ios .input-outline.input-with-info .item-input-wrap {
10272 margin-bottom: calc
(var
(--f7-input-info-font-size
) * var
(--f7-input-info-line-height
));
10274 .ios
.item-input-outline
.item-input-with-error-message
.item-input-wrap
,
10275 .ios
.input-outline
.item-input-with-error-message
.item-input-wrap
,
10276 .ios
.item-input-outline
.input-with-error-message
.item-input-wrap
,
10277 .ios .input-outline.input-with-error-message .item-input-wrap {
10278 margin-bottom: calc
(var
(--f7-input-error-font-size
) * var
(--f7-input-error-line-height
));
10280 .md
.item-input:not
(.item-input-outline
) .item-input-wrap:after
,
10281 .md .input:not(.input-outline):after {
10283 position: absolute
;
10284 background-color: var
(--f7-list-item-border-color
);
10293 transform-origin: 50% 100%;
10294 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
10296 .md
.item-input:not
(.item-input-outline
) .item-input-wrap:after
,
10297 .md .input:not(.input-outline):after {
10298 transition-duration: 200ms;
10300 .md .item-input-wrap {
10301 min-height: var
(--f7-input-height
);
10303 .md .item-input .item-media {
10304 align-self: flex-end
;
10306 .md .item-input .item-inner:after {
10307 display: none
!important
;
10309 .md
.inline-labels
.item-media
,
10310 .md .inline-label .item-media {
10311 align-self: flex-start
;
10314 .md
.item-input-with-error-message
,
10315 .md
.item-input-with-info
,
10316 .md
.input-with-error-message
,
10317 .md .input-with-info {
10318 padding-bottom: 20px;
10320 .md
.item-input-error-message
,
10321 .md
.item-input-info
,
10322 .md
.input-error-message
,
10324 position: absolute
;
10327 white-space: nowrap
;
10329 text-overflow: ellipsis
;
10333 .md
.item-input-focused
.item-label
,
10334 .md .item-input-focused .item-floating-label {
10335 color: var
(--f7-label-focused-text-color
, var
(--f7-theme-color
));
10337 .md
.item-input-focused:not
(.item-input-outline
) .item-input-wrap:after
,
10338 .md .input-focused:not(.input-outline):after {
10339 background: var
(--f7-input-focused-border-color
, var
(--f7-theme-color
));
10341 .md
.item-input-invalid:not
(.item-input-outline
) .item-input-wrap:after
,
10342 .md
.item-input-focused:not
(.item-input-outline
) .item-input-wrap:after
,
10343 .md
.input-invalid:not
(.input-outline
):after
,
10344 .md .input-focused:not(.input-outline):after {
10345 transform: scaleY
(2) !important
;
10347 .md
.item-input-invalid:not
(.item-input-outline
) .item-input-wrap:after
,
10348 .md .input-invalid:not(.input-outline):after {
10349 background: var
(--f7-input-invalid-border-color
, var
(--f7-input-error-text-color
));
10351 .md
.item-input-invalid
.item-label
,
10352 .md .item-input-invalid .item-floating-label {
10353 color: var
(--f7-label-invalid-text-color
, var
(--f7-input-error-text-color
));
10355 .md
.item-input-invalid input
,
10356 .md
.input-invalid input
,
10357 .md
.item-input-invalid select
,
10358 .md
.input-invalid select
,
10359 .md
.item-input-invalid textarea
,
10360 .md .input-invalid textarea {
10361 color: var
(--f7-input-invalid-text-color
, var
(--f7-input-text-color
));
10363 .md .input-clear-button:after {
10364 font-size: calc
(var
(--f7-input-clear-button-size
) / (24 / 20));
10365 content: 'delete_round_md';
10368 .md .input-clear-button:before {
10371 margin-left: -24px;
10374 .aurora
.item-label
+ .item-input-wrap
,
10375 .aurora .item-floating-label + .item-input-wrap {
10378 .aurora .item-input-focused .item-floating-label {
10379 color: var
(--f7-label-text-color
);
10381 .aurora .item-input .item-media {
10382 align-self: flex-start
;
10384 .aurora
.item-input-error-message
,
10385 .aurora
.item-input-info
,
10386 .aurora
.input-error-message
,
10387 .aurora .input-info {
10388 position: relative
;
10390 .aurora
.item-input-focused
.item-label
,
10391 .aurora .item-input-focused .item-floating-label {
10392 color: var
(--f7-label-focused-text-color
, var
(--f7-label-text-color
));
10394 .aurora .item-input-focused .item-inner:after {
10395 background: var
(--f7-input-focused-border-color
, var
(--f7-list-item-border-color
));
10397 .aurora
.item-input-invalid
.item-label
,
10398 .aurora .item-input-invalid .item-floating-label {
10399 color: var
(--f7-label-invalid-text-color
, var
(--f7-label-text-color
));
10401 .aurora .item-input-invalid .item-inner:after {
10402 background: var
(--f7-input-invalid-border-color
, var
(--f7-list-item-border-color
));
10404 .aurora
.item-input-invalid input
,
10405 .aurora
.input-invalid input
,
10406 .aurora
.item-input-invalid select
,
10407 .aurora
.input-invalid select
,
10408 .aurora
.item-input-invalid textarea
,
10409 .aurora .input-invalid textarea {
10410 color: var
(--f7-input-invalid-text-color
, var
(--f7-input-error-text-color
));
10412 .aurora .input-clear-button:after {
10413 content: 'delete_round_ios';
10414 font-size: calc
(var
(--f7-input-clear-button-size
) / (14 / 10));
10417 .aurora .input-clear-button:before {
10420 margin-left: -14px;
10423 .aurora
.item-input-outline
.item-input-wrap
,
10424 .aurora .input-outline .item-input-wrap {
10428 .aurora
.item-input-outline
.item-input-error-message
,
10429 .aurora
.input-outline
.item-input-error-message
,
10430 .aurora
.item-input-outline
.item-input-info
,
10431 .aurora
.input-outline
.item-input-info
,
10432 .aurora
.item-input-outline
.input-error-message
,
10433 .aurora
.input-outline
.input-error-message
,
10434 .aurora
.item-input-outline
.input-info
,
10435 .aurora .input-outline .input-info {
10437 white-space: normal
;
10439 text-overflow: ellipsis
;
10441 .aurora
.item-input-outline
.item-input-info
,
10442 .aurora
.input-outline
.item-input-info
,
10443 .aurora
.item-input-outline
.input-info
,
10444 .aurora .input-outline .input-info {
10445 margin-bottom: calc
(-1 * var
(--f7-input-info-font-size
) * var
(--f7-input-info-line-height
));
10447 .aurora
.item-input-outline
.item-input-error-message
,
10448 .aurora
.input-outline
.item-input-error-message
,
10449 .aurora
.item-input-outline
.input-error-message
,
10450 .aurora .input-outline .input-error-message {
10451 margin-bottom: calc
(-1 * var
(--f7-input-error-font-size
) * var
(--f7-input-error-line-height
));
10453 .aurora
.item-input-outline
.item-input-with-info
.item-input-wrap
,
10454 .aurora
.input-outline
.item-input-with-info
.item-input-wrap
,
10455 .aurora
.item-input-outline
.input-with-info
.item-input-wrap
,
10456 .aurora .input-outline.input-with-info .item-input-wrap {
10457 margin-bottom: calc
(var
(--f7-input-info-font-size
) * var
(--f7-input-info-line-height
));
10459 .aurora
.item-input-outline
.item-input-with-error-message
.item-input-wrap
,
10460 .aurora
.input-outline
.item-input-with-error-message
.item-input-wrap
,
10461 .aurora
.item-input-outline
.input-with-error-message
.item-input-wrap
,
10462 .aurora .input-outline.input-with-error-message .item-input-wrap {
10463 margin-bottom: calc
(var
(--f7-input-error-font-size
) * var
(--f7-input-error-line-height
));
10465 /* === Checkbox === */
10467 /* --f7-checkbox-active-color: var(--f7-theme-color); */
10468 --f7-checkbox-icon-color: #fff;
10472 --f7-checkbox-inactive-color: rgba
(255, 255, 255, 0.3);
10475 --f7-checkbox-size: 22px;
10476 --f7-checkbox-border-radius: 50%;
10477 --f7-checkbox-border-width: 1px;
10478 --f7-checkbox-inactive-color: #c7c7cc;
10479 --f7-checkbox-extra-margin: 0px;
10482 --f7-checkbox-size: 18px;
10483 --f7-checkbox-border-radius: 2px;
10484 --f7-checkbox-border-width: 2px;
10485 --f7-checkbox-inactive-color: #6d6d6d;
10486 --f7-checkbox-extra-margin: 22px;
10489 --f7-checkbox-size: 14px;
10490 --f7-checkbox-border-radius: 2px;
10491 --f7-checkbox-border-width: 1px;
10492 --f7-checkbox-inactive-color: #888;
10493 --f7-checkbox-extra-margin: 0px;
10496 position: relative
;
10497 display: inline-block
;
10498 vertical-align: middle
;
10500 background-color: transparent
;
10501 --f7-touch-ripple-color: rgba
(var
(--f7-theme-color-rgb
), 0.5);
10506 border: var
(--f7-checkbox-border-width
) solid var
(--f7-checkbox-inactive-color
);
10507 width: var
(--f7-checkbox-size
);
10508 height: var
(--f7-checkbox-size
);
10509 border-radius: var
(--f7-checkbox-border-radius
);
10510 box-sizing: border-box
;
10511 position: relative
;
10514 .icon-checkbox:after
,
10515 .checkbox i:after {
10516 font-family: 'framework7-core-icons';
10517 font-weight: normal
;
10518 font-style: normal
;
10520 letter-spacing: normal
;
10521 text-transform: none
;
10522 white-space: nowrap
;
10525 -webkit-font-smoothing: antialiased
;
10526 text-rendering: optimizeLegibility
;
10527 -moz-osx-font-smoothing: grayscale
;
10528 -moz-font-feature-settings: "liga";
10529 font-feature-settings: "liga";
10530 text-align: center
;
10535 width: var
(--f7-checkbox-size
);
10536 height: var
(--f7-checkbox-size
);
10537 line-height: var
(--f7-checkbox-size
);
10538 left: calc
(0px - var
(--f7-checkbox-border-width
));
10539 top: calc
(0px - var
(--f7-checkbox-border-width
));
10541 color: var
(--f7-checkbox-icon-color
);
10542 position: relative
;
10543 transition-property: opacity
;
10545 label
.item-checkbox input
[type
="checkbox"]:not
(:checked
) ~ .icon-checkbox:after
,
10546 label
.item-checkbox input
[type
="checkbox"]:not
(:checked
) ~ * .icon-checkbox:after
,
10547 .checkbox input[type="checkbox"]:not(:checked) ~ i:after {
10550 label
.item-checkbox input
[type
="checkbox"]:checked
~ .icon-checkbox
,
10551 label
.item-checkbox input
[type
="checkbox"]:checked
~ * .icon-checkbox
,
10552 .checkbox input
[type
="checkbox"]:checked
~ i
,
10553 label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ .icon-checkbox
,
10554 label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ * .icon-checkbox
,
10555 .checkbox input[type="checkbox"]:indeterminate ~ i {
10556 border-color: var
(--f7-checkbox-active-color
, var
(--f7-theme-color
));
10557 background-color: var
(--f7-checkbox-active-color
, var
(--f7-theme-color
));
10559 label
.item-checkbox input
[type
="checkbox"]:checked
~ .icon-checkbox:after
,
10560 label
.item-checkbox input
[type
="checkbox"]:checked
~ * .icon-checkbox:after
,
10561 .checkbox input
[type
="checkbox"]:checked
~ i:after
,
10562 label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ .icon-checkbox:after
,
10563 label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ * .icon-checkbox:after
,
10564 .checkbox input[type="checkbox"]:indeterminate ~ i:after {
10567 label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ .icon-checkbox:after
,
10568 label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ * .icon-checkbox:after
,
10569 .checkbox input[type="checkbox"]:indeterminate ~ i:after {
10572 position: absolute
;
10577 border-radius: 2px;
10582 label
.item-checkbox
,
10586 label
.item-checkbox input
[type
="checkbox"],
10587 .checkbox input
[type
="checkbox"],
10588 label
.item-checkbox input
[type
="radio"],
10589 .checkbox input[type="radio"] {
10592 label
.item-checkbox
{
10593 transition-duration: 300ms;
10595 label
.item-checkbox
.item-content
.item-media
,
10596 label
.item-checkbox
.item-content
.item-media
{
10597 align-self: center
;
10599 label
.item-checkbox
> .icon-checkbox
{
10600 margin-left: calc
(var
(--f7-list-item-media-margin
) + var
(--f7-checkbox-extra-margin
));
10602 label
.item-checkbox
.active-state
{
10603 background-color: var
(--f7-list-link-pressed-bg-color
);
10605 label
.item-checkbox
.active-state:after
{
10606 background-color: transparent
;
10608 label
.item-checkbox
.disabled
,
10609 .disabled label.item-checkbox {
10611 pointer-events: none
;
10612 opacity: 0.55 !important
;
10613 pointer-events: none
!important
;
10615 .ios
.icon-checkbox:after
,
10616 .ios .checkbox i:after {
10617 content: 'checkbox_ios';
10620 .ios label.item-checkbox.active-state {
10621 transition-duration: 0ms;
10623 .ios label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ .icon-checkbox:after
,
10624 .ios label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ * .icon-checkbox:after
,
10625 .ios .checkbox input[type="checkbox"]:indeterminate ~ i:after {
10629 .md
.icon-checkbox
,
10631 transition-duration: 200ms;
10633 .md
.icon-checkbox:after
,
10634 .md .checkbox i:after {
10635 content: 'checkbox_md';
10636 transition-duration: 200ms;
10639 .md label.item-checkbox {
10640 position: relative
;
10644 .aurora
.icon-checkbox
,
10645 .aurora .checkbox i {
10646 transition-duration: 150ms;
10648 .aurora
.icon-checkbox:after
,
10649 .aurora .checkbox i:after {
10650 content: 'checkbox_aurora';
10651 transition-duration: 150ms;
10654 .aurora
.icon-checkbox:before
,
10655 .aurora .checkbox i:before {
10657 position: absolute
;
10662 background: rgba
(0, 0, 0, 0.1);
10664 transition-duration: 150ms;
10666 .aurora .checkbox.active-state i:before {
10669 .aurora label.item-checkbox {
10670 position: relative
;
10674 /* === Radio === */
10677 --f7-radio-active-color: var(--f7-theme-color);
10679 --f7-radio-border-radius: 50%;
10683 --f7-radio-inactive-color: rgba
(255, 255, 255, 0.3);
10686 --f7-radio-size: 22px;
10687 --f7-radio-border-width: 1px;
10688 --f7-radio-inactive-color: #c7c7cc;
10689 --f7-radio-extra-margin: 0px;
10692 --f7-radio-size: 20px;
10693 --f7-radio-border-width: 2px;
10694 --f7-radio-inactive-color: #6d6d6d;
10695 --f7-radio-extra-margin: 22px;
10698 --f7-radio-size: 16px;
10699 --f7-radio-border-width: 1px;
10700 --f7-radio-inactive-color: #888;
10701 --f7-radio-extra-margin: 0px;
10704 position: relative
;
10705 display: inline-block
;
10706 vertical-align: middle
;
10708 --f7-touch-ripple-color: rgba
(var
(--f7-theme-color-rgb
), 0.5);
10711 width: var
(--f7-radio-size
);
10712 height: var
(--f7-radio-size
);
10713 border-radius: var
(--f7-radio-border-radius
);
10714 position: relative
;
10715 box-sizing: border-box
;
10719 .radio
.icon-radio
,
10721 .aurora .icon-radio {
10722 border: var
(--f7-radio-border-width
) solid var
(--f7-radio-inactive-color
);
10728 label
.item-radio input
[type
="checkbox"],
10729 .radio input
[type
="checkbox"],
10730 label
.item-radio input
[type
="radio"],
10731 .radio input[type="radio"] {
10735 transition-duration: 300ms;
10737 label
.item-radio
.item-content
.item-media
,
10738 label
.item-radio
.item-content
.item-media
{
10739 align-self: center
;
10741 label
.item-radio
.active-state
{
10742 background-color: var
(--f7-list-link-pressed-bg-color
);
10744 label
.item-radio
.active-state:after
{
10745 background-color: transparent
;
10747 label
.item-radio
.disabled
,
10748 .disabled label.item-radio {
10750 pointer-events: none
;
10751 opacity: 0.55 !important
;
10752 pointer-events: none
!important
;
10754 .ios .icon-radio:after {
10755 font-family: 'framework7-core-icons';
10756 font-weight: normal
;
10757 font-style: normal
;
10759 letter-spacing: normal
;
10760 text-transform: none
;
10761 white-space: nowrap
;
10764 -webkit-font-smoothing: antialiased
;
10765 text-rendering: optimizeLegibility
;
10766 -moz-osx-font-smoothing: grayscale
;
10767 -moz-font-feature-settings: "liga";
10768 font-feature-settings: "liga";
10769 text-align: center
;
10773 width: calc
(var
(--f7-radio-size
) - var
(--f7-radio-border-width
) * 2);
10774 height: calc
(var
(--f7-radio-size
) - var
(--f7-radio-border-width
) * 2);
10775 line-height: calc
(var
(--f7-radio-size
) - var
(--f7-radio-border-width
) * 2 + 1px);
10777 content: 'radio_ios';
10778 color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10781 .ios label
.item-radio input
[type
="radio"]:checked
~ .icon-radio:after
,
10782 .ios label
.item-radio input
[type
="radio"]:checked
~ * .icon-radio:after
,
10783 .ios .radio input[type="radio"]:checked ~ .icon-radio:after {
10786 .ios .radio input[type="radio"]:checked ~ .icon-radio {
10787 border-color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10789 .ios label.item-radio input[type="radio"] ~ .icon-radio {
10790 position: absolute
;
10793 left: calc
(var
(--f7-safe-area-left
) + 10px);
10795 .ios label.item-radio .item-inner {
10796 padding-left: calc
(var
(--f7-safe-area-left
) + 35px);
10798 .ios label.item-radio.active-state {
10799 transition-duration: 0ms;
10802 transition-duration: 200ms;
10804 .md .icon-radio:after {
10806 position: absolute
;
10813 background-color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10814 border-radius: 50%;
10815 transform: scale
(0);
10816 transition-duration: 200ms;
10818 .md label
.item-radio input
[type
="radio"]:checked
~ .icon-radio
,
10819 .md label
.item-radio input
[type
="radio"]:checked
~ * .icon-radio
,
10820 .md .radio input[type="radio"]:checked ~ .icon-radio {
10821 border-color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10823 .md label
.item-radio input
[type
="radio"]:checked
~ .icon-radio:after
,
10824 .md label
.item-radio input
[type
="radio"]:checked
~ * .icon-radio:after
,
10825 .md .radio input[type="radio"]:checked ~ .icon-radio:after {
10826 background-color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10827 transform: scale
(1);
10829 .md label.item-radio {
10830 position: relative
;
10834 .md label.item-radio > .icon-radio {
10835 margin-left: calc
(var
(--f7-list-item-media-margin
) + var
(--f7-radio-extra-margin
));
10837 .aurora .icon-radio {
10838 transition-duration: 150ms;
10841 .aurora .icon-radio:after {
10843 position: absolute
;
10850 background-color: #fff;
10851 border-radius: 50%;
10852 transform: scale
(0);
10853 transition-duration: 150ms;
10855 .aurora .icon-radio:before {
10857 position: absolute
;
10862 background: rgba
(0, 0, 0, 0.1);
10864 transition-duration: 150ms;
10866 .aurora .radio.active-state i:before {
10869 .aurora label
.item-radio input
[type
="radio"]:checked
~ .icon-radio
,
10870 .aurora label
.item-radio input
[type
="radio"]:checked
~ * .icon-radio
,
10871 .aurora .radio input[type="radio"]:checked ~ .icon-radio {
10872 border-color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10873 background-color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10875 .aurora label
.item-radio input
[type
="radio"]:checked
~ .icon-radio:after
,
10876 .aurora label
.item-radio input
[type
="radio"]:checked
~ * .icon-radio:after
,
10877 .aurora .radio input[type="radio"]:checked ~ .icon-radio:after {
10878 transform: scale
(1);
10880 .aurora label.item-radio {
10881 position: relative
;
10885 .aurora label.item-radio > .icon-radio {
10886 margin-left: calc
(var
(--f7-list-item-media-margin
) + var
(--f7-radio-extra-margin
));
10888 /* === Toggle === */
10890 --f7-toggle-handle-color: #fff;
10893 --f7-toggle-width: 52px;
10894 --f7-toggle-height: 32px;
10895 --f7-toggle-border-color: #e5e5e5;
10896 --f7-toggle-inactive-color: #fff;
10900 --f7-toggle-border-color: #555;
10901 --f7-toggle-inactive-color: #222;
10904 --f7-toggle-width: 36px;
10905 --f7-toggle-height: 14px;
10906 --f7-toggle-inactive-color: #b0afaf;
10910 --f7-toggle-inactive-color: #555;
10913 --f7-toggle-width: 40px;
10914 --f7-toggle-height: 20px;
10915 --f7-toggle-inactive-color: #aaa;
10917 .aurora
.theme-dark
,
10918 .aurora.theme-dark {
10919 --f7-toggle-inactive-color: #555;
10923 width: var
(--f7-toggle-width
);
10924 height: var
(--f7-toggle-height
);
10925 border-radius: var
(--f7-toggle-height
);
10928 display: inline-block
;
10929 vertical-align: middle
;
10930 position: relative
;
10931 box-sizing: border-box
;
10932 align-self: center
;
10933 -webkit-user-select: none
;
10934 -moz-user-select: none
;
10935 -ms-user-select: none
;
10938 .toggle input[type="checkbox"] {
10941 .toggle input[disabled] ~ .toggle-icon {
10942 pointer-events: none
;
10948 -webkit-appearance: none
;
10949 -moz-appearance: none
;
10952 position: relative
;
10954 box-sizing: border-box
;
10958 .toggle-icon:before
,
10959 .toggle-icon:after {
10961 will-change: transform
;
10963 .toggle-icon:after {
10964 background: var
(--f7-toggle-handle-color
);
10965 position: absolute
;
10967 transform: translateX
(0px);
10968 transition-duration: 300ms;
10970 .ios .toggle input[type="checkbox"]:checked + .toggle-icon {
10971 background: var
(--f7-toggle-active-color
, var
(--f7-theme-color
));
10973 .ios .toggle input[type="checkbox"]:checked + .toggle-icon:before {
10974 transform: scale
(0);
10976 .ios .toggle input[type="checkbox"]:checked + .toggle-icon:after {
10977 transform: translateX
(calc
(-1 * (var
(--f7-toggle-width
) - var
(--f7-toggle-height
))));
10979 .ios .toggle-icon {
10980 background: var
(--f7-toggle-border-color
);
10982 .ios .toggle-icon:before {
10983 position: absolute
;
10986 width: calc
(var
(--f7-toggle-width
) - 4px);
10987 height: calc
(var
(--f7-toggle-height
) - 4px);
10988 border-radius: var
(--f7-toggle-height
);
10989 box-sizing: border-box
;
10990 background: var
(--f7-toggle-inactive-color
);
10992 transition-duration: 300ms;
10993 transform: scale
(1);
10995 .ios .toggle-icon:after {
10996 height: calc
(var
(--f7-toggle-height
) - 4px);
10997 width: calc
(var
(--f7-toggle-height
) - 4px);
11000 box-shadow: 0 2px 4px rgba
(0, 0, 0, 0.3);
11001 border-radius: calc
(var
(--f7-toggle-height
) - 4px);
11003 .ios .toggle-active-state input[type="checkbox"]:not(:checked) + .toggle-icon:before {
11004 transform: scale
(0);
11006 .ios .toggle-active-state input[type="checkbox"] + .toggle-icon:after {
11007 width: calc
(var
(--f7-toggle-height
) + 4px);
11009 .ios .toggle-active-state input[type="checkbox"]:checked + .toggle-icon:after {
11010 transform: translateX
(calc
(-1 * (var
(--f7-toggle-width
) - var
(--f7-toggle-height
) - 8px)));
11012 .md .toggle input[type="checkbox"]:checked + .toggle-icon {
11013 background: var
(--f7-toggle-active-color
, rgba
(var
(--f7-theme-color-rgb
), 0.5));
11015 .md .toggle input[type="checkbox"]:checked + .toggle-icon:after {
11016 transform: translateX
(calc
(-1 * (var
(--f7-toggle-width
) - var
(--f7-toggle-height
) - 6px)));
11017 background: var
(--f7-toggle-active-color
, var
(--f7-theme-color
));
11020 background: var
(--f7-toggle-inactive-color
);
11022 .md .toggle-icon:after {
11023 height: calc
(var
(--f7-toggle-height
) + 6px);
11024 width: calc
(var
(--f7-toggle-height
) + 6px);
11026 box-shadow: 0 2px 5px rgba
(0, 0, 0, 0.4);
11027 border-radius: var
(--f7-toggle-height
);
11030 .aurora .toggle input[type="checkbox"]:checked + .toggle-icon {
11031 background: var
(--f7-toggle-active-color
, var
(--f7-theme-color
));
11033 .aurora .toggle input[type="checkbox"]:checked + .toggle-icon:after {
11034 transform: translateX
(calc
(-1 * (var
(--f7-toggle-width
) - var
(--f7-toggle-height
))));
11036 .aurora .toggle-icon {
11037 background: var
(--f7-toggle-inactive-color
);
11039 .aurora .toggle-icon:after {
11040 height: calc
(var
(--f7-toggle-height
) - 4px);
11041 width: calc
(var
(--f7-toggle-height
) - 4px);
11044 border-radius: calc
(var
(--f7-toggle-height
) - 4px);
11046 /* === Range Slider === */
11049 --f7-range-bar-active-bg-color: var(--f7-theme-color);
11051 --f7-range-scale-step-height: 5px;
11052 --f7-range-scale-text-color: #666;
11053 --f7-range-scale-substep-width: 1px;
11054 --f7-range-scale-substep-height: 4px;
11057 --f7-range-size: 28px;
11058 --f7-range-bar-bg-color: #b7b8b7;
11059 --f7-range-bar-size: 1px;
11060 --f7-range-bar-border-radius: 2px;
11061 --f7-range-knob-size: 28px;
11062 --f7-range-knob-color: #fff;
11063 --f7-range-knob-box-shadow: 0 2px 4px rgba
(0, 0, 0, 0.3);
11064 --f7-range-label-size: 20px;
11065 --f7-range-label-text-color: #000;
11066 --f7-range-label-bg-color: #fff;
11067 --f7-range-label-font-size: 12px;
11068 --f7-range-label-font-weight: normal
;
11069 --f7-range-label-border-radius: 5px;
11070 --f7-range-label-padding: 0px;
11072 --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
11074 --f7-range-scale-step-width: 1px;
11075 --f7-range-scale-font-size: 12px;
11076 --f7-range-scale-font-weight: 400;
11077 --f7-range-scale-label-offset: 4px;
11079 --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
11083 --f7-range-size: 20px;
11084 --f7-range-bar-bg-color: #b9b9b9;
11085 --f7-range-bar-size: 2px;
11086 --f7-range-bar-border-radius: 0px;
11087 --f7-range-knob-size: 12px;
11089 --f7-range-knob-color: var(--f7-theme-color);
11091 --f7-range-knob-box-shadow: none
;
11092 --f7-range-label-size: 26px;
11093 --f7-range-label-font-weight: normal
;
11094 --f7-range-label-text-color: #fff;
11096 --f7-range-label-bg-color: var(--f7-theme-color);
11098 --f7-range-label-font-size: 10px;
11099 --f7-range-label-border-radius: 50%;
11100 --f7-range-label-padding: 0px;
11102 --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
11104 --f7-range-scale-step-width: 2px;
11105 --f7-range-scale-font-size: 12px;
11106 --f7-range-scale-font-weight: 400;
11107 --f7-range-scale-label-offset: 4px;
11109 --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
11113 --f7-range-size: 20px;
11114 --f7-range-bar-bg-color: #c7c7c7;
11115 --f7-range-bar-size: 2px;
11116 --f7-range-bar-border-radius: 2px;
11117 --f7-range-knob-size: 16px;
11119 --f7-range-knob-color: var(--f7-theme-color);
11121 --f7-range-knob-box-shadow: none
;
11122 --f7-range-label-size: 20px;
11123 --f7-range-label-text-color: #fff;
11125 --f7-range-label-bg-color: var(--f7-theme-color);
11127 --f7-range-label-font-size: 10px;
11128 --f7-range-label-font-weight: 600;
11129 --f7-range-label-border-radius: 4px;
11130 --f7-range-label-padding: 0px 4px;
11132 --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
11134 --f7-range-scale-step-width: 2px;
11135 --f7-range-scale-font-size: 11px;
11136 --f7-range-scale-font-weight: 500;
11137 --f7-range-scale-label-offset: 2px;
11139 --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
11144 position: relative
;
11145 align-self: center
;
11147 -webkit-user-select: none
;
11148 -moz-user-select: none
;
11149 -ms-user-select: none
;
11152 .range-slider input[type="range"] {
11155 .range-slider.range-slider-horizontal {
11157 height: var
(--f7-range-size
);
11159 .range-slider.range-slider-vertical {
11161 width: var
(--f7-range-size
);
11164 position: absolute
;
11166 background: var
(--f7-range-bar-bg-color
);
11167 border-radius: var
(--f7-range-bar-border-radius
);
11169 .range-slider-vertical .range-bar {
11173 width: var
(--f7-range-bar-size
);
11174 margin-left: calc
(-1 * var
(--f7-range-bar-size
) / 2);
11176 .range-slider-horizontal .range-bar {
11180 height: var
(--f7-range-bar-size
);
11181 margin-top: calc
(-1 * var
(--f7-range-bar-size
) / 2);
11183 .range-bar-active {
11184 position: absolute
;
11185 background: var
(--f7-range-bar-active-bg-color
, var
(--f7-theme-color
));
11187 .range-slider-horizontal .range-bar-active {
11192 .range-slider-vertical .range-bar-active {
11197 .range-slider-vertical-reversed .range-bar-active {
11203 position: absolute
;
11204 height: var
(--f7-range-knob-size
);
11205 width: var
(--f7-range-knob-size
);
11207 .range-slider-horizontal .range-knob-wrap {
11209 margin-top: calc
(-1 * var
(--f7-range-knob-size
) / 2);
11210 margin-right: calc
(-1 * var
(--f7-range-knob-size
) / 2);
11213 .range-slider-vertical .range-knob-wrap {
11215 margin-left: calc
(-1 * var
(--f7-range-knob-size
) / 2);
11217 margin-bottom: calc
(-1 * var
(--f7-range-knob-size
) / 2);
11219 .range-slider-vertical-reversed .range-knob-wrap {
11223 margin-top: calc
(-1 * var
(--f7-range-knob-size
) / 2);
11226 box-sizing: border-box
;
11227 border-radius: 50%;
11228 position: absolute
;
11234 background: var
(--f7-range-knob-color
, var
(--f7-range-knob-bg-color
, var
(--f7-theme-color
)));
11235 box-shadow: var
(--f7-range-knob-box-shadow
);
11237 .range-knob:after {
11239 position: absolute
;
11244 margin-left: -22px;
11247 .range-knob-label {
11248 position: absolute
;
11251 text-align: center
;
11252 transition-duration: 120ms;
11253 transition-property: transform
;
11254 box-sizing: border-box
;
11255 transform: translateY
(100%) scale
(0);
11256 height: var
(--f7-range-label-size
);
11257 line-height: var
(--f7-range-label-size
);
11258 min-width: var
(--f7-range-label-size
);
11259 color: var
(--f7-range-label-text-color
);
11260 background-color: var
(--f7-range-label-bg-color
, var
(--f7-theme-color
));
11261 font-size: var
(--f7-range-label-font-size
);
11262 font-weight: var
(--f7-range-label-font-weight
);
11263 border-radius: var
(--f7-range-label-border-radius
);
11264 padding: var
(--f7-range-label-padding
);
11266 .range-knob-active-state .range-knob-label {
11267 transform: translateY
(0%) scale
(1);
11270 position: absolute
;
11272 .range-slider-horizontal .range-scale {
11276 margin-top: calc
(var
(--f7-range-bar-size
) / 2);
11278 .range-slider-vertical .range-scale {
11282 margin-right: calc
(var
(--f7-range-bar-size
) / 2);
11284 .range-scale-step {
11285 position: absolute
;
11286 box-sizing: border-box
;
11288 font-size: var
(--f7-range-scale-font-size
);
11289 font-weight: var
(--f7-range-scale-font-weight
);
11290 color: var
(--f7-range-scale-text-color
, var
(--f7-range-bar-bg-color
));
11293 .range-scale-step:before {
11295 position: absolute
;
11296 background: var
(--f7-range-scale-step-bg-color
, var
(--f7-range-bar-bg-color
));
11298 .range-slider-horizontal .range-scale-step {
11299 justify-content: center
;
11300 align-items: flex-start
;
11301 width: var
(--f7-range-scale-step-width
);
11302 height: var
(--f7-range-scale-step-height
);
11303 padding-top: calc
(var
(--f7-range-scale-step-height
) + var
(--f7-range-scale-label-offset
));
11305 margin-right: calc
(-1 * var
(--f7-range-scale-step-width
) / 2);
11307 .range-slider-horizontal .range-scale-step:before {
11311 height: var
(--f7-range-scale-step-height
);
11313 .range-slider-horizontal .range-scale-step:first-child {
11316 .range-slider-horizontal .range-scale-step:last-child {
11317 margin-right: calc
(-1 * var
(--f7-range-scale-step-width
));
11319 .range-slider-vertical .range-scale-step {
11321 justify-content: flex-end
;
11322 align-items: center
;
11323 height: var
(--f7-range-scale-step-width
);
11324 width: var
(--f7-range-scale-step-height
);
11325 padding-right: calc
(var
(--f7-range-scale-step-height
) + var
(--f7-range-scale-label-offset
));
11327 margin-bottom: calc
(-1 * var
(--f7-range-scale-step-width
) / 2);
11329 .range-slider-vertical .range-scale-step:first-child {
11332 .range-slider-vertical .range-scale-step:last-child {
11333 margin-bottom: calc
(-1 * var
(--f7-range-scale-step-width
));
11335 .range-slider-vertical .range-scale-step:before {
11339 width: var
(--f7-range-scale-step-height
);
11341 .range-scale-substep {
11342 --f7-range-scale-step-bg-color: var
(--f7-range-scale-substep-bg-color
, var
(--f7-range-bar-bg-color
));
11343 --f7-range-scale-step-width: var
(--f7-range-scale-substep-width
);
11344 --f7-range-scale-step-height: var
(--f7-range-scale-substep-height
);
11346 .ios .range-knob-label {
11347 margin-bottom: 6px;
11348 transform: translateX
(-50%) translateY
(100%) scale
(0);
11350 .ios .range-knob-active-state .range-knob-label {
11351 transform: translateX
(-50%) translateY
(0%) scale
(1);
11354 transition-duration: 200ms;
11355 transition-property: transform
, background-color
;
11357 .md .range-knob-active-state .range-knob {
11358 transform: scale
(1.5);
11360 .md .range-slider-min:not(.range-slider-dual) .range-knob {
11361 background: #fff !important
;
11362 border: 2px solid var
(--f7-range-bar-bg-color
);
11364 .md .range-knob-label {
11365 width: var
(--f7-range-label-size
);
11366 margin-left: calc
(-1 * var
(--f7-range-label-size
) / 2);
11367 margin-bottom: 8px;
11369 .md .range-knob-label:before {
11373 margin-left: calc
(-1 * var
(--f7-range-label-size
) / 2);
11374 position: absolute
;
11376 width: var
(--f7-range-label-size
);
11377 height: var
(--f7-range-label-size
);
11378 background: var
(--f7-range-label-bg-color
, var
(--f7-theme-color
));
11379 transform: rotate
(-45deg);
11380 border-radius: 50% 50% 50% 0;
11382 .md .range-knob-active-state .range-knob-label {
11383 transform: translateY
(0%) scale
(1);
11385 .md .range-slider-label .range-knob-active-state .range-knob {
11386 transform: scale
(0);
11388 .aurora .range-knob-label {
11389 margin-bottom: 6px;
11390 transform: translateX
(-50%) translateY
(100%) scale
(0);
11392 .aurora .range-knob-active-state .range-knob-label {
11393 transform: translateX
(-50%) translateY
(0%) scale
(1);
11395 /* === Stepper === */
11398 --f7-stepper-button-text-color: var(--f7-theme-color);
11399 --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
11400 --f7-stepper-value-text-color: var(--f7-theme-color);
11402 --f7-stepper-fill-button-text-color: #fff;
11404 --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
11406 --f7-stepper-raised-box-shadow: 0 1px 3px rgba
(0, 0, 0, 0.12), 0 1px 2px rgba
(0,0,0,0.24);
11409 --f7-stepper-height: 29px;
11410 --f7-stepper-border-radius: 5px;
11412 --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
11413 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
11415 --f7-stepper-border-width: 1px;
11416 --f7-stepper-large-height: 44px;
11417 --f7-stepper-small-height: 26px;
11418 --f7-stepper-small-border-width: 2px;
11419 --f7-stepper-value-font-size: 17px;
11420 --f7-stepper-value-font-weight: 400;
11423 --f7-stepper-height: 36px;
11424 --f7-stepper-border-radius: 4px;
11425 --f7-stepper-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
11427 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
11429 --f7-stepper-border-width: 2px;
11430 --f7-stepper-large-height: 48px;
11431 --f7-stepper-small-border-width: 2px;
11432 --f7-stepper-small-height: 28px;
11433 --f7-stepper-value-font-size: 14px;
11434 --f7-stepper-value-font-weight: 500;
11438 --f7-stepper-button-pressed-bg-color: rgba
(255, 255, 255, 0.1);
11442 --f7-stepper-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
11443 --f7-stepper-button-fill-hover-bg-color: var(--f7-theme-color-tint);
11445 --f7-stepper-height: 28px;
11446 --f7-stepper-border-radius: 4px;
11448 --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
11449 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
11451 --f7-stepper-border-width: 2px;
11452 --f7-stepper-large-height: 34px;
11453 --f7-stepper-small-border-width: 1px;
11454 --f7-stepper-small-height: 22px;
11455 --f7-stepper-value-font-size: 14px;
11456 --f7-stepper-value-font-weight: 500;
11459 display: inline-flex
;
11460 align-items: stretch
;
11461 height: var
(--f7-stepper-height
);
11462 border-radius: var
(--f7-stepper-border-radius
);
11463 flex-direction: row-reverse
;
11466 .stepper-button-minus
,
11467 .stepper-button-plus {
11468 background-color: var
(--f7-stepper-button-bg-color
);
11470 border-radius: var
(--f7-stepper-border-radius
);
11471 border: var
(--f7-stepper-border-width
) solid var
(--f7-theme-color
);
11472 color: var
(--f7-stepper-button-text-color
, var
(--f7-theme-color
));
11473 line-height: calc
(var
(--f7-stepper-height
) - var
(--f7-stepper-border-width
, 0px));
11474 text-align: center
;
11476 justify-content: center
;
11477 align-content: center
;
11478 align-items: center
;
11480 box-sizing: border-box
;
11481 position: relative
;
11484 .stepper-button
.active-state
,
11485 .stepper-button-minus
.active-state
,
11486 .stepper-button-plus.active-state {
11487 background-color: var
(--f7-stepper-button-pressed-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.15));
11488 color: var
(--f7-stepper-button-pressed-text-color
, var
(--f7-stepper-button-text-color
, var
(--f7-theme-color
)));
11490 .stepper-button:first-child
,
11491 .stepper-button-minus:first-child
,
11492 .stepper-button-plus:first-child {
11493 border-radius: var
(--f7-stepper-border-radius
) 0 0 var
(--f7-stepper-border-radius
);
11495 .stepper-button:last-child
,
11496 .stepper-button-minus:last-child
,
11497 .stepper-button-plus:last-child {
11498 border-radius: 0 var
(--f7-stepper-border-radius
) var
(--f7-stepper-border-radius
) 0;
11500 .stepper-button
.icon
,
11501 .stepper-button-minus
.icon
,
11502 .stepper-button-plus .icon {
11503 pointer-events: none
;
11505 .stepper-button
+ .stepper-button
,
11506 .stepper-button-minus
+ .stepper-button
,
11507 .stepper-button-plus
+ .stepper-button
,
11508 .stepper-button
+ .stepper-button-minus
,
11509 .stepper-button-minus
+ .stepper-button-minus
,
11510 .stepper-button-plus
+ .stepper-button-minus
,
11511 .stepper-button
+ .stepper-button-plus
,
11512 .stepper-button-minus
+ .stepper-button-plus
,
11513 .stepper-button-plus + .stepper-button-plus {
11516 .stepper-button-plus
,
11517 .stepper-button-minus {
11518 -webkit-user-select: none
;
11519 -moz-user-select: none
;
11520 -ms-user-select: none
;
11523 .stepper-button-plus:after
,
11524 .stepper-button-minus:after
,
11525 .stepper-button-plus:before
,
11526 .stepper-button-minus:before {
11528 position: absolute
;
11531 transform: translate
(-50%, -50%);
11532 background-color: var
(--f7-stepper-button-text-color
, var
(--f7-theme-color
));
11534 .stepper-button-plus:after
,
11535 .stepper-button-minus:after {
11539 .stepper-button-plus:before {
11545 align-content: center
;
11546 align-items: center
;
11547 justify-content: center
;
11549 .stepper-input-wrap
,
11552 text-align: center
;
11553 border-top: var
(--f7-stepper-border-width
) solid var
(--f7-theme-color
);
11554 border-bottom: var
(--f7-stepper-border-width
) solid var
(--f7-theme-color
);
11556 .stepper
.stepper-input-wrap input
,
11559 color: var
(--f7-stepper-value-text-color
, var
(--f7-theme-color
));
11560 font-size: var
(--f7-stepper-value-font-size
);
11561 font-weight: var
(--f7-stepper-value-font-weight
);
11562 text-align: center
;
11564 .stepper .stepper-input-wrap input {
11568 .ios
.stepper-round-ios
,
11569 .md
.stepper-round-md
,
11570 .aurora .stepper-round-aurora {
11571 --f7-stepper-border-radius: var
(--f7-stepper-height
);
11574 .ios
.stepper-fill-ios
,
11575 .md
.stepper-fill-md
,
11576 .aurora .stepper-fill-aurora {
11577 --f7-stepper-button-bg-color: var
(--f7-stepper-fill-button-bg-color
, var
(--f7-theme-color
));
11578 --f7-stepper-button-text-color: var
(--f7-stepper-fill-button-text-color
);
11579 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
11581 .stepper-fill
.stepper-button
+ .stepper-button
,
11582 .ios
.stepper-fill-ios
.stepper-button
+ .stepper-button
,
11583 .md
.stepper-fill-md
.stepper-button
+ .stepper-button
,
11584 .aurora
.stepper-fill-aurora
.stepper-button
+ .stepper-button
,
11585 .stepper-raised
.stepper-button
+ .stepper-button
,
11586 .ios
.stepper-raised-ios
.stepper-button
+ .stepper-button
,
11587 .md
.stepper-raised-md
.stepper-button
+ .stepper-button
,
11588 .aurora
.stepper-raised-aurora
.stepper-button
+ .stepper-button
,
11589 .stepper-fill
.stepper-button-minus
+ .stepper-button-plus
,
11590 .ios
.stepper-fill-ios
.stepper-button-minus
+ .stepper-button-plus
,
11591 .md
.stepper-fill-md
.stepper-button-minus
+ .stepper-button-plus
,
11592 .aurora
.stepper-fill-aurora
.stepper-button-minus
+ .stepper-button-plus
,
11593 .stepper-raised
.stepper-button-minus
+ .stepper-button-plus
,
11594 .ios
.stepper-raised-ios
.stepper-button-minus
+ .stepper-button-plus
,
11595 .md
.stepper-raised-md
.stepper-button-minus
+ .stepper-button-plus
,
11596 .aurora .stepper-raised-aurora .stepper-button-minus + .stepper-button-plus {
11597 border-left: 1px solid rgba
(0, 0, 0, 0.1);
11599 .stepper-fill
.stepper-button
+ .stepper-button
.active-state
,
11600 .ios
.stepper-fill-ios
.stepper-button
+ .stepper-button
.active-state
,
11601 .md
.stepper-fill-md
.stepper-button
+ .stepper-button
.active-state
,
11602 .aurora
.stepper-fill-aurora
.stepper-button
+ .stepper-button
.active-state
,
11603 .stepper-fill
.stepper-button-minus
+ .stepper-button-plus
.active-state
,
11604 .ios
.stepper-fill-ios
.stepper-button-minus
+ .stepper-button-plus
.active-state
,
11605 .md
.stepper-fill-md
.stepper-button-minus
+ .stepper-button-plus
.active-state
,
11606 .aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus.active-state {
11607 border-left-color: var
(--f7-stepper-button-pressed-bg-color
);
11609 .stepper-raised:not
(.stepper-fill
) .stepper-input-wrap
,
11610 .ios
.stepper-raised-ios:not
(.stepper-fill-ios
):not
(.stepper-fill
) .stepper-input-wrap
,
11611 .md
.stepper-raised-md:not
(.stepper-fill-md
):not
(.stepper-fill
) .stepper-input-wrap
,
11612 .aurora
.stepper-raised-aurora:not
(.stepper-fill-aurora
):not
(.stepper-fill
) .stepper-input-wrap
,
11613 .stepper-raised:not
(.stepper-fill
) .stepper-value
,
11614 .ios
.stepper-raised-ios:not
(.stepper-fill-ios
):not
(.stepper-fill
) .stepper-value
,
11615 .md
.stepper-raised-md:not
(.stepper-fill-md
):not
(.stepper-fill
) .stepper-value
,
11616 .aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-value {
11617 border-left: 1px solid rgba
(0, 0, 0, 0.1);
11618 border-right: 1px solid rgba
(0, 0, 0, 0.1);
11621 .ios
.stepper-large-ios
,
11622 .md
.stepper-large-md
,
11623 .aurora .stepper-large-aurora {
11624 --f7-stepper-height: var
(--f7-stepper-large-height
);
11627 .ios
.stepper-small-ios
,
11628 .md
.stepper-small-md
,
11629 .aurora .stepper-small-aurora {
11630 --f7-stepper-border-width: var
(--f7-stepper-small-border-width
);
11631 --f7-stepper-height: var
(--f7-stepper-small-height
);
11633 .ios
.stepper-fill
.stepper-small-ios
,
11634 .ios .stepper-fill.stepper-small {
11635 --f7-stepper-button-pressed-bg-color: transparent
;
11636 --f7-stepper-button-pressed-text-color: var
(--f7-theme-color
);
11639 .ios
.stepper-raised-ios
,
11640 .md
.stepper-raised-md
,
11641 .aurora .stepper-raised-aurora {
11642 --f7-stepper-border-width: 0;
11643 box-shadow: var
(--f7-stepper-raised-box-shadow
);
11645 .ios
.stepper-button
.f7-icons
,
11646 .ios
.stepper-button-minus
.f7-icons
,
11647 .ios .stepper-button-plus .f7-icons {
11650 .ios
.stepper-fill
,
11651 .ios .stepper-fill-ios {
11652 --f7-stepper-button-pressed-bg-color: var
(--f7-stepper-fill-button-pressed-bg-color
, var
(--f7-theme-color-tint
));
11654 .ios
.stepper-small
.stepper-raised
,
11655 .ios
.stepper-small-ios
.stepper-raised
,
11656 .ios
.stepper-small
.stepper-raised-ios
,
11657 .ios .stepper-small-ios.stepper-raised-ios {
11658 --f7-stepper-border-width: 0px;
11660 .ios
.stepper-small
.stepper-button
,
11661 .ios
.stepper-small-ios
.stepper-button
,
11662 .ios
.stepper-small
.stepper-button-minus
,
11663 .ios
.stepper-small-ios
.stepper-button-minus
,
11664 .ios
.stepper-small
.stepper-button-plus
,
11665 .ios .stepper-small-ios .stepper-button-plus {
11666 transition-duration: 200ms;
11668 .ios
.stepper-small
.stepper-button
.active-state:after
,
11669 .ios
.stepper-small-ios
.stepper-button
.active-state:after
,
11670 .ios
.stepper-small
.stepper-button-minus
.active-state:after
,
11671 .ios
.stepper-small-ios
.stepper-button-minus
.active-state:after
,
11672 .ios
.stepper-small
.stepper-button-plus
.active-state:after
,
11673 .ios
.stepper-small-ios
.stepper-button-plus
.active-state:after
,
11674 .ios
.stepper-small
.stepper-button
.active-state:before
,
11675 .ios
.stepper-small-ios
.stepper-button
.active-state:before
,
11676 .ios
.stepper-small
.stepper-button-minus
.active-state:before
,
11677 .ios
.stepper-small-ios
.stepper-button-minus
.active-state:before
,
11678 .ios
.stepper-small
.stepper-button-plus
.active-state:before
,
11679 .ios .stepper-small-ios .stepper-button-plus.active-state:before {
11680 transition-duration: 200ms;
11681 background-color: var
(--f7-theme-color
);
11683 .md
.stepper-button
,
11684 .md
.stepper-button-minus
,
11685 .md .stepper-button-plus {
11686 transition-duration: 300ms;
11687 transform: translate3d
(0, 0, 0);
11691 .md .stepper-fill-md {
11692 --f7-stepper-button-pressed-bg-color: var
(--f7-stepper-fill-button-pressed-bg-color
, var
(--f7-theme-color-shade
));
11694 .aurora
.stepper-button
,
11695 .aurora
.stepper-button-minus
,
11696 .aurora .stepper-button-plus {
11697 transition-duration: 100ms;
11698 transform: translate3d
(0, 0, 0);
11701 .aurora
.device-desktop
.stepper-button:not
(.active-state
):not
(.no-hover
):hover
,
11702 .aurora
.device-desktop
.stepper-button-minus:not
(.active-state
):not
(.no-hover
):hover
,
11703 .aurora.device-desktop .stepper-button-plus:not(.active-state):not(.no-hover):hover {
11704 background-color: var
(--f7-stepper-button-hover-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.07));
11706 .aurora
.stepper-fill
,
11707 .aurora .stepper-fill-aurora {
11708 --f7-stepper-button-hover-bg-color: var
(--f7-stepper-button-fill-hover-bg-color
, var
(--f7-theme-color-tint
));
11709 --f7-stepper-button-pressed-bg-color: var
(--f7-stepper-fill-button-pressed-bg-color
, var
(--f7-theme-color-shade
));
11711 /* === Smart Select === */
11712 .smart-select :root {
11714 --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
11715 --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
11718 .smart-select select {
11721 .smart-select .item-after {
11724 text-overflow: ellipsis
;
11725 position: relative
;
11728 .smart-select-sheet
.page
,
11729 .smart-select-sheet
.sheet-modal-inner
,
11730 .smart-select-sheet .list ul {
11731 background: var
(--f7-smart-select-sheet-bg
, var
(--f7-list-bg-color
));
11733 .smart-select-sheet .toolbar:after {
11735 position: absolute
;
11736 background-color: var
(--f7-smart-select-sheet-toolbar-border-color
, var
(--f7-bars-border-color
));
11745 transform-origin: 50% 100%;
11746 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
11748 .smart-select-sheet .toolbar:after {
11751 .smart-select-sheet .list {
11754 .smart-select-sheet .list ul:before {
11755 display: none
!important
;
11757 .smart-select-sheet .list ul:after {
11758 display: none
!important
;
11760 .smart-select-popover .popover-inner {
11765 --f7-grid-gap: 15px;
11768 --f7-grid-gap: 16px;
11771 --f7-grid-gap: 15px;
11775 justify-content: space-between
;
11777 align-items: flex-start
;
11778 --f7-cols-per-row: 1;
11780 .row
> [class
*="col-"],
11782 box-sizing: border-box
;
11783 width: calc
((100% - var
(--f7-grid-gap
) * (var
(--f7-cols-per-row
) - 1)) / var
(--f7-cols-per-row
));
11786 --f7-grid-gap: 0px;
11789 --f7-cols-per-row: 20;
11792 --f7-cols-per-row: 10;
11795 --f7-cols-per-row: 6.66666667;
11798 --f7-cols-per-row: 5;
11801 --f7-cols-per-row: 4;
11804 --f7-cols-per-row: 3.33333333;
11807 --f7-cols-per-row: 3;
11810 --f7-cols-per-row: 2.85714286;
11813 --f7-cols-per-row: 2.5;
11816 --f7-cols-per-row: 2.22222222;
11819 --f7-cols-per-row: 2;
11822 --f7-cols-per-row: 1.81818182;
11825 --f7-cols-per-row: 1.66666667;
11828 --f7-cols-per-row: 1.53846154;
11831 --f7-cols-per-row: 1.5;
11834 --f7-cols-per-row: 1.42857143;
11837 --f7-cols-per-row: 1.33333333;
11840 --f7-cols-per-row: 1.25;
11843 --f7-cols-per-row: 1.17647059;
11846 --f7-cols-per-row: 1.11111111;
11849 --f7-cols-per-row: 1.05263158;
11852 --f7-cols-per-row: 1;
11854 .row
.col:nth-last-child
(1),
11855 .row .col:nth-last-child(1) ~ .col {
11856 --f7-cols-per-row: 1;
11858 .row
.col:nth-last-child
(2),
11859 .row .col:nth-last-child(2) ~ .col {
11860 --f7-cols-per-row: 2;
11862 .row
.col:nth-last-child
(3),
11863 .row .col:nth-last-child(3) ~ .col {
11864 --f7-cols-per-row: 3;
11866 .row
.col:nth-last-child
(4),
11867 .row .col:nth-last-child(4) ~ .col {
11868 --f7-cols-per-row: 4;
11870 .row
.col:nth-last-child
(5),
11871 .row .col:nth-last-child(5) ~ .col {
11872 --f7-cols-per-row: 5;
11874 .row
.col:nth-last-child
(6),
11875 .row .col:nth-last-child(6) ~ .col {
11876 --f7-cols-per-row: 6;
11878 .row
.col:nth-last-child
(7),
11879 .row .col:nth-last-child(7) ~ .col {
11880 --f7-cols-per-row: 7;
11882 .row
.col:nth-last-child
(8),
11883 .row .col:nth-last-child(8) ~ .col {
11884 --f7-cols-per-row: 8;
11886 .row
.col:nth-last-child
(9),
11887 .row .col:nth-last-child(9) ~ .col {
11888 --f7-cols-per-row: 9;
11890 .row
.col:nth-last-child
(10),
11891 .row .col:nth-last-child(10) ~ .col {
11892 --f7-cols-per-row: 10;
11894 .row
.col:nth-last-child
(11),
11895 .row .col:nth-last-child(11) ~ .col {
11896 --f7-cols-per-row: 11;
11898 .row
.col:nth-last-child
(12),
11899 .row .col:nth-last-child(12) ~ .col {
11900 --f7-cols-per-row: 12;
11902 .row
.col:nth-last-child
(13),
11903 .row .col:nth-last-child(13) ~ .col {
11904 --f7-cols-per-row: 13;
11906 .row
.col:nth-last-child
(14),
11907 .row .col:nth-last-child(14) ~ .col {
11908 --f7-cols-per-row: 14;
11910 .row
.col:nth-last-child
(15),
11911 .row .col:nth-last-child(15) ~ .col {
11912 --f7-cols-per-row: 15;
11914 .row
.col:nth-last-child
(16),
11915 .row .col:nth-last-child(16) ~ .col {
11916 --f7-cols-per-row: 16;
11918 .row
.col:nth-last-child
(17),
11919 .row .col:nth-last-child(17) ~ .col {
11920 --f7-cols-per-row: 17;
11922 .row
.col:nth-last-child
(18),
11923 .row .col:nth-last-child(18) ~ .col {
11924 --f7-cols-per-row: 18;
11926 .row
.col:nth-last-child
(19),
11927 .row .col:nth-last-child(19) ~ .col {
11928 --f7-cols-per-row: 19;
11930 .row
.col:nth-last-child
(20),
11931 .row .col:nth-last-child(20) ~ .col {
11932 --f7-cols-per-row: 20;
11934 .row
.col:nth-last-child
(21),
11935 .row .col:nth-last-child(21) ~ .col {
11936 --f7-cols-per-row: 21;
11938 .row
.col:nth-last-child
(22),
11939 .row .col:nth-last-child(22) ~ .col {
11940 --f7-cols-per-row: 22;
11942 @media (min-width: 768px) {
11944 --f7-cols-per-row: 20;
11947 --f7-cols-per-row: 10;
11950 --f7-cols-per-row: 6.66666667;
11953 --f7-cols-per-row: 5;
11956 --f7-cols-per-row: 4;
11959 --f7-cols-per-row: 3.33333333;
11962 --f7-cols-per-row: 3;
11965 --f7-cols-per-row: 2.85714286;
11968 --f7-cols-per-row: 2.5;
11971 --f7-cols-per-row: 2.22222222;
11974 --f7-cols-per-row: 2;
11977 --f7-cols-per-row: 1.81818182;
11980 --f7-cols-per-row: 1.66666667;
11983 --f7-cols-per-row: 1.53846154;
11986 --f7-cols-per-row: 1.5;
11989 --f7-cols-per-row: 1.42857143;
11992 --f7-cols-per-row: 1.33333333;
11995 --f7-cols-per-row: 1.25;
11998 --f7-cols-per-row: 1.17647059;
12001 --f7-cols-per-row: 1.11111111;
12004 --f7-cols-per-row: 1.05263158;
12007 --f7-cols-per-row: 1;
12009 .row
.tablet-auto:nth-last-child
(1),
12010 .row .tablet-auto:nth-last-child(1) ~ .tablet-auto {
12011 --f7-cols-per-row: 1;
12013 .row
.tablet-auto:nth-last-child
(2),
12014 .row .tablet-auto:nth-last-child(2) ~ .tablet-auto {
12015 --f7-cols-per-row: 2;
12017 .row
.tablet-auto:nth-last-child
(3),
12018 .row .tablet-auto:nth-last-child(3) ~ .tablet-auto {
12019 --f7-cols-per-row: 3;
12021 .row
.tablet-auto:nth-last-child
(4),
12022 .row .tablet-auto:nth-last-child(4) ~ .tablet-auto {
12023 --f7-cols-per-row: 4;
12025 .row
.tablet-auto:nth-last-child
(5),
12026 .row .tablet-auto:nth-last-child(5) ~ .tablet-auto {
12027 --f7-cols-per-row: 5;
12029 .row
.tablet-auto:nth-last-child
(6),
12030 .row .tablet-auto:nth-last-child(6) ~ .tablet-auto {
12031 --f7-cols-per-row: 6;
12033 .row
.tablet-auto:nth-last-child
(7),
12034 .row .tablet-auto:nth-last-child(7) ~ .tablet-auto {
12035 --f7-cols-per-row: 7;
12037 .row
.tablet-auto:nth-last-child
(8),
12038 .row .tablet-auto:nth-last-child(8) ~ .tablet-auto {
12039 --f7-cols-per-row: 8;
12041 .row
.tablet-auto:nth-last-child
(9),
12042 .row .tablet-auto:nth-last-child(9) ~ .tablet-auto {
12043 --f7-cols-per-row: 9;
12045 .row
.tablet-auto:nth-last-child
(10),
12046 .row .tablet-auto:nth-last-child(10) ~ .tablet-auto {
12047 --f7-cols-per-row: 10;
12049 .row
.tablet-auto:nth-last-child
(11),
12050 .row .tablet-auto:nth-last-child(11) ~ .tablet-auto {
12051 --f7-cols-per-row: 11;
12053 .row
.tablet-auto:nth-last-child
(12),
12054 .row .tablet-auto:nth-last-child(12) ~ .tablet-auto {
12055 --f7-cols-per-row: 12;
12057 .row
.tablet-auto:nth-last-child
(13),
12058 .row .tablet-auto:nth-last-child(13) ~ .tablet-auto {
12059 --f7-cols-per-row: 13;
12061 .row
.tablet-auto:nth-last-child
(14),
12062 .row .tablet-auto:nth-last-child(14) ~ .tablet-auto {
12063 --f7-cols-per-row: 14;
12065 .row
.tablet-auto:nth-last-child
(15),
12066 .row .tablet-auto:nth-last-child(15) ~ .tablet-auto {
12067 --f7-cols-per-row: 15;
12069 .row
.tablet-auto:nth-last-child
(16),
12070 .row .tablet-auto:nth-last-child(16) ~ .tablet-auto {
12071 --f7-cols-per-row: 16;
12073 .row
.tablet-auto:nth-last-child
(17),
12074 .row .tablet-auto:nth-last-child(17) ~ .tablet-auto {
12075 --f7-cols-per-row: 17;
12077 .row
.tablet-auto:nth-last-child
(18),
12078 .row .tablet-auto:nth-last-child(18) ~ .tablet-auto {
12079 --f7-cols-per-row: 18;
12081 .row
.tablet-auto:nth-last-child
(19),
12082 .row .tablet-auto:nth-last-child(19) ~ .tablet-auto {
12083 --f7-cols-per-row: 19;
12085 .row
.tablet-auto:nth-last-child
(20),
12086 .row .tablet-auto:nth-last-child(20) ~ .tablet-auto {
12087 --f7-cols-per-row: 20;
12089 .row
.tablet-auto:nth-last-child
(21),
12090 .row .tablet-auto:nth-last-child(21) ~ .tablet-auto {
12091 --f7-cols-per-row: 21;
12093 .row
.tablet-auto:nth-last-child
(22),
12094 .row .tablet-auto:nth-last-child(22) ~ .tablet-auto {
12095 --f7-cols-per-row: 22;
12098 @media (min-width: 1025px) {
12100 --f7-cols-per-row: 20;
12103 --f7-cols-per-row: 10;
12106 --f7-cols-per-row: 6.66666667;
12109 --f7-cols-per-row: 5;
12112 --f7-cols-per-row: 4;
12115 --f7-cols-per-row: 3.33333333;
12118 --f7-cols-per-row: 3;
12121 --f7-cols-per-row: 2.85714286;
12124 --f7-cols-per-row: 2.5;
12127 --f7-cols-per-row: 2.22222222;
12130 --f7-cols-per-row: 2;
12133 --f7-cols-per-row: 1.81818182;
12136 --f7-cols-per-row: 1.66666667;
12139 --f7-cols-per-row: 1.53846154;
12142 --f7-cols-per-row: 1.5;
12145 --f7-cols-per-row: 1.42857143;
12148 --f7-cols-per-row: 1.33333333;
12151 --f7-cols-per-row: 1.25;
12154 --f7-cols-per-row: 1.17647059;
12157 --f7-cols-per-row: 1.11111111;
12160 --f7-cols-per-row: 1.05263158;
12162 .row .desktop-100 {
12163 --f7-cols-per-row: 1;
12165 .row
.desktop-auto:nth-last-child
(1),
12166 .row .desktop-auto:nth-last-child(1) ~ .desktop-auto {
12167 --f7-cols-per-row: 1;
12169 .row
.desktop-auto:nth-last-child
(2),
12170 .row .desktop-auto:nth-last-child(2) ~ .desktop-auto {
12171 --f7-cols-per-row: 2;
12173 .row
.desktop-auto:nth-last-child
(3),
12174 .row .desktop-auto:nth-last-child(3) ~ .desktop-auto {
12175 --f7-cols-per-row: 3;
12177 .row
.desktop-auto:nth-last-child
(4),
12178 .row .desktop-auto:nth-last-child(4) ~ .desktop-auto {
12179 --f7-cols-per-row: 4;
12181 .row
.desktop-auto:nth-last-child
(5),
12182 .row .desktop-auto:nth-last-child(5) ~ .desktop-auto {
12183 --f7-cols-per-row: 5;
12185 .row
.desktop-auto:nth-last-child
(6),
12186 .row .desktop-auto:nth-last-child(6) ~ .desktop-auto {
12187 --f7-cols-per-row: 6;
12189 .row
.desktop-auto:nth-last-child
(7),
12190 .row .desktop-auto:nth-last-child(7) ~ .desktop-auto {
12191 --f7-cols-per-row: 7;
12193 .row
.desktop-auto:nth-last-child
(8),
12194 .row .desktop-auto:nth-last-child(8) ~ .desktop-auto {
12195 --f7-cols-per-row: 8;
12197 .row
.desktop-auto:nth-last-child
(9),
12198 .row .desktop-auto:nth-last-child(9) ~ .desktop-auto {
12199 --f7-cols-per-row: 9;
12201 .row
.desktop-auto:nth-last-child
(10),
12202 .row .desktop-auto:nth-last-child(10) ~ .desktop-auto {
12203 --f7-cols-per-row: 10;
12205 .row
.desktop-auto:nth-last-child
(11),
12206 .row .desktop-auto:nth-last-child(11) ~ .desktop-auto {
12207 --f7-cols-per-row: 11;
12209 .row
.desktop-auto:nth-last-child
(12),
12210 .row .desktop-auto:nth-last-child(12) ~ .desktop-auto {
12211 --f7-cols-per-row: 12;
12213 .row
.desktop-auto:nth-last-child
(13),
12214 .row .desktop-auto:nth-last-child(13) ~ .desktop-auto {
12215 --f7-cols-per-row: 13;
12217 .row
.desktop-auto:nth-last-child
(14),
12218 .row .desktop-auto:nth-last-child(14) ~ .desktop-auto {
12219 --f7-cols-per-row: 14;
12221 .row
.desktop-auto:nth-last-child
(15),
12222 .row .desktop-auto:nth-last-child(15) ~ .desktop-auto {
12223 --f7-cols-per-row: 15;
12225 .row
.desktop-auto:nth-last-child
(16),
12226 .row .desktop-auto:nth-last-child(16) ~ .desktop-auto {
12227 --f7-cols-per-row: 16;
12229 .row
.desktop-auto:nth-last-child
(17),
12230 .row .desktop-auto:nth-last-child(17) ~ .desktop-auto {
12231 --f7-cols-per-row: 17;
12233 .row
.desktop-auto:nth-last-child
(18),
12234 .row .desktop-auto:nth-last-child(18) ~ .desktop-auto {
12235 --f7-cols-per-row: 18;
12237 .row
.desktop-auto:nth-last-child
(19),
12238 .row .desktop-auto:nth-last-child(19) ~ .desktop-auto {
12239 --f7-cols-per-row: 19;
12241 .row
.desktop-auto:nth-last-child
(20),
12242 .row .desktop-auto:nth-last-child(20) ~ .desktop-auto {
12243 --f7-cols-per-row: 20;
12245 .row
.desktop-auto:nth-last-child
(21),
12246 .row .desktop-auto:nth-last-child(21) ~ .desktop-auto {
12247 --f7-cols-per-row: 21;
12249 .row
.desktop-auto:nth-last-child
(22),
12250 .row .desktop-auto:nth-last-child(22) ~ .desktop-auto {
12251 --f7-cols-per-row: 22;
12254 /* === Calendar/Datepicker === */
12256 --f7-calendar-height: 320px;
12257 --f7-calendar-sheet-landscape-height: 220px;
12258 --f7-calendar-sheet-bg-color: #fff;
12259 --f7-calendar-popover-width: 320px;
12260 --f7-calendar-popover-height: 320px;
12261 --f7-calendar-modal-height: 420px;
12262 --f7-calendar-modal-max-width: 380px;
12263 --f7-calendar-modal-border-radius: 4px;
12264 --f7-calendar-modal-bg-color: #fff;
12266 --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
12267 --f7-calendar-header-link-color: var(--f7-bars-link-color);
12268 --f7-calendar-header-text-color: var(--f7-bars-text-color);
12269 --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
12270 --f7-calendar-footer-border-color: var(--f7-bars-border-color);
12271 --f7-calendar-footer-link-color: var(--f7-bars-link-color);
12272 --f7-calendar-footer-text-color: var(--f7-bars-text-color);
12273 --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
12274 --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
12276 --f7-calendar-footer-padding: 0 8px;
12277 --f7-calendar-week-header-font-size: 11px;
12278 --f7-calendar-day-text-color: #000;
12279 --f7-calendar-selected-text-color: #fff;
12281 --f7-calendar-selected-bg-color: var(--f7-theme-color);
12283 --f7-calendar-prev-next-text-color: #b8b8b8;
12284 --f7-calendar-disabled-text-color: #d4d4d4;
12285 --f7-calendar-event-dot-size: 4px;
12287 --f7-calendar-event-bg-color: var(--f7-theme-color);
12292 --f7-calendar-sheet-border-color: var
(--f7-bars-border-color
);
12293 --f7-calendar-modal-bg-color: #171717;
12294 --f7-calendar-sheet-bg-color: #171717;
12297 --f7-calendar-sheet-border-color: #929499;
12298 --f7-calendar-header-height: 44px;
12299 --f7-calendar-header-font-size: 17px;
12300 --f7-calendar-header-font-weight: 600;
12301 --f7-calendar-header-padding: 0 8px;
12302 --f7-calendar-footer-height: 44px;
12303 --f7-calendar-footer-font-size: 17px;
12304 --f7-calendar-week-header-height: 18px;
12305 --f7-calendar-row-border-color: #c4c4c4;
12306 --f7-calendar-day-font-size: 15px;
12307 --f7-calendar-today-text-color: #000;
12308 --f7-calendar-today-bg-color: #e3e3e3;
12309 --f7-calendar-day-size: 30px;
12313 --f7-calendar-row-border-color: var
(--f7-bars-border-color
);
12314 --f7-calendar-day-text-color: #fff;
12315 --f7-calendar-today-text-color: #fff;
12316 --f7-calendar-today-bg-color: #333;
12319 --f7-calendar-sheet-border-color: #ccc;
12320 --f7-calendar-header-height: 56px;
12321 --f7-calendar-header-font-size: 20px;
12322 --f7-calendar-header-font-weight: 400;
12323 --f7-calendar-header-padding: 0 24px;
12324 --f7-calendar-footer-height: 48px;
12325 --f7-calendar-footer-font-size: 14px;
12326 --f7-calendar-week-header-height: 24px;
12327 --f7-calendar-row-border-color: transparent
;
12328 --f7-calendar-day-font-size: 14px;
12330 --f7-calendar-today-text-color: var(--f7-theme-color);
12332 --f7-calendar-today-bg-color: none
;
12333 --f7-calendar-day-size: 32px;
12337 --f7-calendar-day-text-color: rgba
(255, 255, 255, 0.87);
12340 --f7-calendar-sheet-border-color: #ccc;
12341 --f7-calendar-header-height: 38px;
12342 --f7-calendar-header-font-size: 14px;
12343 --f7-calendar-header-font-weight: 600;
12344 --f7-calendar-header-padding: 0 8px;
12345 --f7-calendar-footer-height: 38px;
12346 --f7-calendar-footer-font-size: 14px;
12347 --f7-calendar-week-header-height: 18px;
12348 --f7-calendar-row-border-color: #e3e3e3;
12349 --f7-calendar-day-font-size: 13px;
12350 --f7-calendar-today-text-color: #000;
12351 --f7-calendar-today-bg-color: #e3e3e3;
12352 --f7-calendar-day-size: 30px;
12354 .aurora
.theme-dark
,
12355 .aurora.theme-dark {
12356 --f7-calendar-row-border-color: var
(--f7-bars-border-color
);
12357 --f7-calendar-day-text-color: #fff;
12358 --f7-calendar-today-text-color: #fff;
12359 --f7-calendar-today-bg-color: #333;
12363 height: var
(--f7-calendar-height
);
12366 flex-direction: column
;
12368 .calendar.modal-in {
12371 @media (orientation: landscape
) and
(max-height: 415px) {
12372 .calendar.calendar-sheet {
12373 height: var
(--f7-calendar-sheet-landscape-height
);
12375 .calendar.calendar-modal {
12376 height: calc
(100vh - var
(--f7-navbar-height
));
12379 .calendar
.calendar-inline
,
12380 .calendar.calendar-popover .calendar {
12381 position: relative
;
12384 --f7-sheet-border-color: var
(--f7-calendar-sheet-border-color
);
12385 background: var
(--f7-calendar-sheet-bg-color
);
12387 .calendar-sheet:before {
12390 .calendar-sheet .sheet-modal-inner {
12391 margin-bottom: var
(--f7-safe-area-bottom
);
12393 .calendar-sheet
.toolbar:before
,
12394 .calendar-modal
.toolbar:before
,
12395 .calendar-popover .toolbar:before {
12398 .calendar-popover {
12399 width: var
(--f7-calendar-popover-width
);
12401 .calendar-popover .calendar {
12402 height: var
(--f7-calendar-popover-height
);
12403 border-radius: var
(--f7-popover-border-radius
);
12407 position: relative
;
12410 white-space: nowrap
;
12411 text-overflow: ellipsis
;
12412 box-sizing: border-box
;
12413 padding: var
(--f7-calendar-header-padding
);
12414 background-color: var
(--f7-calendar-header-bg-color
, var
(--f7-bars-bg-color
));
12415 color: var
(--f7-calendar-header-text-color
, var
(--f7-bars-text-color
));
12416 height: var
(--f7-calendar-header-height
);
12417 line-height: var
(--f7-calendar-header-height
);
12418 font-size: var
(--f7-calendar-header-font-size
);
12419 font-weight: var
(--f7-calendar-header-font-weight
);
12421 .calendar-header a {
12422 color: var
(--f7-calendar-header-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
12427 padding: var
(--f7-calendar-footer-padding
);
12428 background-color: var
(--f7-calendar-footer-bg-color
, var
(--f7-bars-bg-color
));
12429 color: var
(--f7-calendar-footer-text-color
, var
(--f7-bars-text-color
));
12430 height: var
(--f7-calendar-footer-height
);
12431 font-size: var
(--f7-calendar-header-font-size
);
12433 justify-content: flex-end
;
12434 box-sizing: border-box
;
12435 align-items: center
;
12436 position: relative
;
12438 .calendar-footer a {
12439 color: var
(--f7-calendar-footer-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
12441 .calendar-footer:before {
12443 position: absolute
;
12444 background-color: var
(--f7-calendar-footer-border-color
, var
(--f7-bars-border-color
));
12453 transform-origin: 50% 0%;
12454 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
12457 position: absolute
;
12458 height: var
(--f7-calendar-modal-height
);
12463 max-width: var
(--f7-calendar-modal-max-width
);
12464 transform: translate3d
(-50%, 100%, 0);
12465 transition-property: transform
;
12468 background: var
(--f7-calendar-modal-bg-color
);
12470 border-radius: var
(--f7-calendar-modal-border-radius
);
12471 box-shadow: var
(--f7-elevation-24
);
12473 .calendar-modal
.modal-in
,
12474 .calendar-modal.modal-out {
12475 transition-duration: 400ms;
12477 .calendar-modal.modal-in {
12478 transform: translate3d
(-50%, -50%, 0);
12480 .calendar-modal.modal-out {
12481 transform: translate3d
(-50%, 100%, 0);
12483 .calendar-week-header {
12485 box-sizing: border-box
;
12486 position: relative
;
12487 font-size: var
(--f7-calendar-week-header-font-size
);
12488 background-color: var
(--f7-calendar-week-header-bg-color
, var
(--f7-bars-bg-color
));
12489 color: var
(--f7-calendar-week-header-text-color
, var
(--f7-bars-text-color
));
12490 height: var
(--f7-calendar-week-header-height
);
12491 padding-left: var
(--f7-safe-area-left
);
12492 padding-right: var
(--f7-safe-area-right
);
12494 .calendar-week-header .calendar-week-day {
12496 width: calc
(100% / 7);
12497 text-align: center
;
12498 line-height: var
(--f7-calendar-week-header-height
);
12504 position: relative
;
12507 .calendar-months-wrapper {
12508 position: relative
;
12515 flex-direction: column
;
12518 position: absolute
;
12523 height: 16.66666667%;
12524 height: calc
(100% / 6);
12528 position: relative
;
12529 box-sizing: border-box
;
12530 padding-left: var
(--f7-safe-area-left
);
12531 padding-right: var
(--f7-safe-area-right
);
12533 .calendar-row:before {
12535 position: absolute
;
12536 background-color: var
(--f7-calendar-row-border-color
);
12545 transform-origin: 50% 0%;
12546 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
12548 .calendar-modal
.calendar-months:first-child
.calendar-row:first-child:before
,
12549 .calendar-popover .calendar-months:first-child .calendar-row:first-child:before {
12550 display: none
!important
;
12555 justify-content: center
;
12556 align-items: center
;
12557 box-sizing: border-box
;
12558 width: 14.28571429%;
12559 width: calc
(100% / 7);
12560 text-align: center
;
12563 color: var
(--f7-calendar-day-text-color
);
12565 font-size: var
(--f7-calendar-day-font-size
);
12567 .calendar-day.calendar-day-today .calendar-day-number {
12568 color: var
(--f7-calendar-today-text-color
, var
(--f7-theme-color
));
12569 background-color: var
(--f7-calendar-today-bg-color
);
12571 .calendar-day
.calendar-day-prev
,
12572 .calendar-day.calendar-day-next {
12573 color: var
(--f7-calendar-prev-next-text-color
);
12575 .calendar-day.calendar-day-disabled {
12576 color: var
(--f7-calendar-disabled-text-color
);
12579 .calendar-day.calendar-day-selected .calendar-day-number {
12580 color: var
(--f7-calendar-selected-text-color
);
12581 background-color: var
(--f7-calendar-selected-bg-color
, var
(--f7-theme-color
));
12583 .calendar-day .calendar-day-number {
12584 display: inline-block
;
12585 border-radius: 50%;
12586 position: relative
;
12587 width: var
(--f7-calendar-day-size
);
12588 height: var
(--f7-calendar-day-size
);
12589 line-height: var
(--f7-calendar-day-size
);
12591 .calendar-day .calendar-day-events {
12592 position: absolute
;
12597 align-items: center
;
12598 justify-content: center
;
12601 .calendar-day .calendar-day-event {
12602 width: var
(--f7-calendar-event-dot-size
);
12603 height: var
(--f7-calendar-event-dot-size
);
12604 border-radius: calc
(var
(--f7-calendar-event-dot-size
) / 2);
12605 background-color: var
(--f7-calendar-event-bg-color
);
12607 .calendar-day .calendar-day-event + .calendar-day-event {
12610 .calendar-range .calendar-day.calendar-day-selected {
12611 align-items: stretch
;
12612 align-content: stretch
;
12614 .calendar-range .calendar-day.calendar-day-selected .calendar-day-number {
12618 text-align: center
;
12620 align-items: center
;
12621 justify-content: center
;
12623 .calendar-month-selector
,
12624 .calendar-year-selector {
12626 justify-content: space-between
;
12627 align-items: center
;
12632 margin-right: auto
;
12634 .calendar-month-selector
.calendar-day-number
,
12635 .calendar-year-selector .calendar-day-number {
12637 position: relative
;
12639 text-overflow: ellipsis
;
12641 .calendar-month-selector a
.icon-only
,
12642 .calendar-year-selector a.icon-only {
12645 /* === Picker === */
12647 --f7-picker-height: 260px;
12648 --f7-picker-inline-height: 200px;
12649 --f7-picker-popover-height: 200px;
12650 --f7-picker-popover-width: 280px;
12651 --f7-picker-landscape-height: 200px;
12652 --f7-picker-item-height: 36px;
12655 --f7-picker-column-font-size: 24px;
12656 --f7-picker-divider-text-color: #000;
12657 --f7-picker-item-text-color: #707274;
12658 --f7-picker-item-selected-text-color: #000;
12659 --f7-picker-item-selected-border-color: #a8abb0;
12663 --f7-picker-divider-text-color: #fff;
12664 --f7-picker-item-selected-text-color: #fff;
12665 --f7-picker-item-selected-border-color: rgba
(255, 255, 255, 0.06);
12668 --f7-picker-column-font-size: 20px;
12669 --f7-picker-divider-text-color: rgba
(0, 0, 0, 0.87);
12670 --f7-picker-item-text-color: inherit
;
12671 --f7-picker-item-selected-text-color: inherit
;
12672 --f7-picker-item-selected-border-color: rgba
(0, 0, 0, 0.15);
12676 --f7-picker-divider-text-color: rgba
(255, 255, 255, 0.87);
12677 --f7-picker-item-selected-border-color: rgba
(255, 255, 255, 0.15);
12680 --f7-picker-column-font-size: 16px;
12681 --f7-picker-divider-text-color: #000;
12682 --f7-picker-item-height: 28px;
12683 --f7-picker-item-text-color: #888;
12684 --f7-picker-item-selected-text-color: #000;
12685 --f7-picker-item-selected-border-color: rgba
(0, 0, 0, 0.12);
12687 .aurora
.theme-dark
,
12688 .aurora.theme-dark {
12689 --f7-picker-divider-text-color: #fff;
12690 --f7-picker-item-selected-text-color: #fff;
12691 --f7-picker-item-selected-border-color: rgba
(255, 255, 255, 0.06);
12695 height: var
(--f7-picker-height
);
12697 .picker.picker-inline {
12698 height: var
(--f7-picker-inline-height
);
12701 height: var
(--f7-picker-popover-height
);
12703 @media (orientation: landscape
) and
(max-height: 415px) {
12704 .picker:not(.picker-inline) {
12705 height: var
(--f7-picker-landscape-height
);
12709 width: var
(--f7-picker-popover-width
);
12711 .picker-popover .toolbar {
12713 border-radius: var
(--f7-popover-border-radius
) var
(--f7-popover-border-radius
) 0 0;
12715 .picker-popover .toolbar:before {
12716 display: none
!important
;
12718 .picker-popover .toolbar + .picker-columns {
12719 height: calc
(100% - var
(--f7-toolbar-height
));
12724 justify-content: center
;
12728 position: relative
;
12729 -webkit-mask-box-image: linear-gradient
(to top
, transparent
, transparent
5%, white
20%, white
80%, transparent
95%, transparent
);
12730 font-size: var
(--f7-picker-column-font-size
);
12733 position: relative
;
12736 .picker-column
.picker-column-first:before
,
12737 .picker-column.picker-column-last:after {
12740 position: absolute
;
12744 .picker-column.picker-column-first:before {
12747 .picker-column.picker-column-last:after {
12750 .picker-column.picker-column-left {
12753 .picker-column.picker-column-center {
12754 text-align: center
;
12756 .picker-column.picker-column-right {
12759 .picker-column.picker-column-divider {
12761 align-items: center
;
12762 color: var
(--f7-picker-divider-text-color
);
12766 transition-timing-function: ease-out
;
12769 height: var
(--f7-picker-item-height
);
12770 line-height: var
(--f7-picker-item-height
);
12771 white-space: nowrap
;
12772 position: relative
;
12774 text-overflow: ellipsis
;
12778 box-sizing: border-box
;
12780 color: var
(--f7-picker-item-text-color
);
12783 .picker-item span {
12786 .picker-column-absolute .picker-item {
12787 position: absolute
;
12789 .picker-item.picker-item-far {
12790 pointer-events: none
;
12792 .picker-item.picker-item-selected {
12793 color: var
(--f7-picker-item-selected-text-color
);
12794 transform: translate3d
(0, 0, 0) rotateX
(0deg);
12796 .picker-center-highlight {
12797 height: var
(--f7-picker-item-height
);
12798 box-sizing: border-box
;
12799 position: absolute
;
12803 margin-top: calc
(-1 * var
(--f7-picker-item-height
) / 2);
12804 pointer-events: none
;
12806 .picker-center-highlight:before {
12808 position: absolute
;
12809 background-color: var
(--f7-picker-item-selected-border-color
);
12818 transform-origin: 50% 0%;
12819 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
12821 .picker-center-highlight:after {
12823 position: absolute
;
12824 background-color: var
(--f7-picker-item-selected-border-color
);
12833 transform-origin: 50% 100%;
12834 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
12836 .picker-3d .picker-columns {
12838 perspective: 1200px;
12840 .picker-3d
.picker-column
,
12841 .picker-3d
.picker-items
,
12842 .picker-3d .picker-item {
12843 transform-style: preserve-3d
;
12845 .picker-3d .picker-column {
12848 .picker-3d .picker-item {
12849 transform-origin: center center
-110px;
12850 -webkit-backface-visibility: hidden
;
12851 backface-visibility: hidden
;
12852 transition-timing-function: ease-out
;
12854 /* === Infinite === */
12855 .infinite-scroll-preloader {
12857 margin-right: auto
;
12858 text-align: center
;
12860 .infinite-scroll-preloader.preloader {
12863 .ios .infinite-scroll-preloader {
12865 margin-bottom: 35px;
12867 .ios
.infinite-scroll-preloader
.preloader
,
12868 .ios .infinite-scroll-preloader.preloader {
12872 .md .infinite-scroll-preloader {
12874 margin-bottom: 32px;
12876 .aurora .infinite-scroll-preloader {
12878 margin-bottom: 15px;
12882 --f7-ptr-preloader-size: 20px;
12883 --f7-ptr-size: 44px;
12886 --f7-ptr-preloader-size: 22px;
12887 --f7-ptr-size: 40px;
12890 --f7-ptr-preloader-size: 20px;
12891 --f7-ptr-size: 38px;
12894 position: relative
;
12895 top: var
(--f7-ptr-top
, 0);
12896 height: var
(--f7-ptr-size
);
12898 .ptr-preloader .preloader {
12899 position: absolute
;
12901 width: var
(--f7-ptr-preloader-size
);
12902 height: var
(--f7-ptr-preloader-size
);
12903 margin-left: calc
(-1 * var
(--f7-ptr-preloader-size
) / 2);
12904 margin-top: calc
(-1 * var
(--f7-ptr-preloader-size
) / 2);
12906 visibility: hidden
;
12908 .ptr-bottom .ptr-preloader {
12913 .ios .ptr-preloader {
12914 margin-top: calc
(-1 * var
(--f7-ptr-size
));
12919 position: absolute
;
12922 background: no-repeat center
;
12924 transform: rotate
(0deg) translate3d
(0, 0, 0);
12925 transition-duration: 300ms;
12926 transition-property: transform
;
12931 visibility: visible
;
12932 color: var
(--f7-preloader-color
);
12934 .ios .ptr-arrow:after {
12935 font-family: 'framework7-core-icons';
12936 font-weight: normal
;
12937 font-style: normal
;
12939 letter-spacing: normal
;
12940 text-transform: none
;
12941 white-space: nowrap
;
12944 -webkit-font-smoothing: antialiased
;
12945 text-rendering: optimizeLegibility
;
12946 -moz-osx-font-smoothing: grayscale
;
12947 -moz-font-feature-settings: "liga";
12948 font-feature-settings: "liga";
12949 text-align: center
;
12958 content: 'ptr_arrow_ios';
12960 .ios .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
12963 .ios
.ptr-transitioning
,
12964 .ios .ptr-refreshing {
12965 transition-duration: 300ms;
12966 transition-property: transform
;
12968 .ios .ptr-refreshing {
12969 transform: translate3d
(0, var
(--f7-ptr-size
), 0);
12971 .ios .ptr-refreshing .ptr-arrow {
12972 visibility: hidden
;
12974 .ios .ptr-refreshing .ptr-preloader .preloader {
12975 visibility: visible
;
12977 .ios .ptr-pull-up .ptr-arrow {
12978 transform: rotate
(180deg) translate3d
(0, 0, 0);
12980 .ios .ptr-no-navbar {
12981 margin-top: calc
(-1 * var
(--f7-ptr-size
));
12982 height: calc
(100% + var
(--f7-ptr-size
));
12984 .ios .ptr-no-navbar .ptr-preloader {
12987 .ios .ptr-bottom .ptr-preloader {
12989 margin-bottom: calc
(-1 * var
(--f7-ptr-size
));
12991 .ios
.ptr-bottom
.ptr-transitioning
> *,
12992 .ios .ptr-bottom.ptr-refreshing > * {
12993 transition-duration: 300ms;
12994 transition-property: transform
;
12996 .ios .ptr-bottom.ptr-refreshing {
12999 .ios .ptr-bottom.ptr-refreshing > * {
13000 transform: translate3d
(0, calc
(-1 * var
(--f7-ptr-size
)), 0);
13002 .ios .ptr-bottom .ptr-arrow {
13003 transform: rotate
(180deg) translate3d
(0, 0, 0);
13005 .ios .ptr-bottom.ptr-pull-up .ptr-arrow {
13006 transform: rotate
(0deg) translate3d
(0, 0, 0);
13009 --f7-ptr-top: -4px;
13011 .md .ptr-preloader {
13012 width: var
(--f7-ptr-size
);
13013 border-radius: 50%;
13015 margin-top: calc
(-1 * var
(--f7-ptr-size
));
13017 box-shadow: var
(--f7-elevation-1
);
13019 margin-right: calc
(-1 * var
(--f7-ptr-size
) / 2);
13021 .md
.ptr-preloader
.preloader
.preloader-inner-gap
,
13022 .md .ptr-preloader .preloader .preloader-inner-half-circle {
13028 box-sizing: border-box
;
13029 border: 3px solid var
(--f7-preloader-color
);
13030 position: absolute
;
13033 margin-left: -11px;
13035 border-left-color: transparent
;
13036 border-radius: 50%;
13038 transform: rotate
(150deg);
13040 .md .ptr-arrow:after {
13044 position: absolute
;
13047 border-bottom-width: 6px;
13048 border-bottom-style: solid
;
13049 border-bottom-color: inherit
;
13050 border-left: 5px solid transparent
;
13051 border-right: 5px solid transparent
;
13052 transform: rotate
(-40deg);
13054 .md
.ptr-content:not
(.ptr-refreshing
):not
(.ptr-pull-up
) .ptr-preloader
.preloader
,
13055 .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader * {
13058 .md
.ptr-refreshing
.ptr-preloader
.preloader
,
13059 .md .ptr-pull-up .ptr-preloader .preloader {
13060 visibility: visible
;
13062 .md
.ptr-refreshing
.ptr-arrow
,
13063 .md .ptr-pull-up .ptr-arrow {
13064 visibility: hidden
;
13066 .md .ptr-refreshing .ptr-preloader {
13067 transform: translate3d
(0, 66px, 0);
13069 .md .ptr-transitioning .ptr-arrow {
13072 .md .ptr-pull-up .ptr-arrow {
13074 transform: rotate
(620deg) !important
;
13077 .md
.ptr-transitioning
.ptr-preloader
,
13078 .md .ptr-refreshing .ptr-preloader {
13079 transition-duration: 300ms;
13080 transition-property: transform
;
13082 .md .ptr-bottom .ptr-preloader {
13084 margin-bottom: calc
(-1 * var
(--f7-ptr-size
) - 4px);
13086 .md .ptr-bottom.ptr-refreshing .ptr-preloader {
13087 transform: translate3d
(0, -66px, 0);
13089 .aurora .ptr-preloader {
13090 margin-top: calc
(-1 * var
(--f7-ptr-size
));
13094 .aurora .ptr-arrow {
13095 position: absolute
;
13098 background: no-repeat center
;
13100 transform: rotate
(0deg) translate3d
(0, 0, 0);
13101 transition-duration: 300ms;
13102 transition-property: transform
;
13107 visibility: visible
;
13108 color: var
(--f7-preloader-color
);
13110 .aurora .ptr-arrow:after {
13111 font-family: 'framework7-core-icons';
13112 font-weight: normal
;
13113 font-style: normal
;
13115 letter-spacing: normal
;
13116 text-transform: none
;
13117 white-space: nowrap
;
13120 -webkit-font-smoothing: antialiased
;
13121 text-rendering: optimizeLegibility
;
13122 -moz-osx-font-smoothing: grayscale
;
13123 -moz-font-feature-settings: "liga";
13124 font-feature-settings: "liga";
13125 text-align: center
;
13134 content: 'ptr_arrow_ios';
13136 .aurora .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
13139 .aurora
.ptr-transitioning
,
13140 .aurora .ptr-refreshing {
13141 transition-duration: 300ms;
13142 transition-property: transform
;
13144 .aurora .ptr-refreshing {
13145 transform: translate3d
(0, var
(--f7-ptr-size
), 0);
13147 .aurora .ptr-refreshing .ptr-arrow {
13148 visibility: hidden
;
13150 .aurora .ptr-refreshing .ptr-preloader .preloader {
13151 visibility: visible
;
13153 .aurora .ptr-pull-up .ptr-arrow {
13154 transform: rotate
(180deg) translate3d
(0, 0, 0);
13156 .aurora .ptr-no-navbar {
13157 margin-top: calc
(-1 * var
(--f7-ptr-size
));
13158 height: calc
(100% + var
(--f7-ptr-size
));
13160 .aurora .ptr-no-navbar .ptr-preloader {
13163 .aurora .ptr-bottom .ptr-preloader {
13165 margin-bottom: calc
(-1 * var
(--f7-ptr-size
));
13167 .aurora
.ptr-bottom
.ptr-transitioning
> *,
13168 .aurora .ptr-bottom.ptr-refreshing > * {
13169 transition-duration: 300ms;
13170 transition-property: transform
;
13172 .aurora .ptr-bottom.ptr-refreshing {
13175 .aurora .ptr-bottom.ptr-refreshing > * {
13176 transform: translate3d
(0, calc
(-1 * var
(--f7-ptr-size
)), 0);
13178 .aurora .ptr-bottom .ptr-arrow {
13179 transform: rotate
(180deg) translate3d
(0, 0, 0);
13181 .aurora .ptr-bottom.ptr-pull-up .ptr-arrow {
13182 transform: rotate
(0deg) translate3d
(0, 0, 0);
13184 /* === Images Lazy Loading === */
13185 .lazy-loaded.lazy-fade-in {
13186 animation: lazyFadeIn
600ms;
13188 @keyframes lazyFadeIn
{
13196 /* === Data Table === */
13198 --f7-table-head-font-size: 12px;
13199 --f7-table-body-font-size: 14px;
13200 --f7-table-footer-font-size: 12px;
13201 --f7-table-input-height: 24px;
13202 --f7-table-input-font-size: 14px;
13203 --f7-table-collapsible-cell-padding: 15px;
13204 --f7-table-link-icon-only-icon-size: 20px;
13205 --f7-table-sortable-icon-color: #000;
13209 --f7-table-cell-border-color: #282829;
13210 --f7-table-sortable-icon-color: #fff;
13211 --f7-table-input-text-color: #fff;
13214 --f7-table-head-font-weight: 600;
13215 --f7-table-head-text-color: #8e8e93;
13216 --f7-table-head-cell-height: 44px;
13217 --f7-table-head-icon-size: 18px;
13218 --f7-table-body-cell-height: 44px;
13219 --f7-table-cell-border-color: #c8c7cc;
13220 --f7-table-cell-padding-vertical: 0px;
13221 --f7-table-cell-padding-horizontal: 15px;
13222 --f7-table-edge-cell-padding-horizontal: 15px;
13223 --f7-table-label-cell-padding-horizontal: 15px;
13224 --f7-table-checkbox-cell-width: 22px;
13225 /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
13226 --f7-table-selected-row-bg-color: #f7f7f8;
13227 /* --f7-table-actions-link-color: var(--f7-theme-color); */
13228 --f7-table-title-font-size: 17px;
13229 --f7-table-title-font-weight: 600;
13230 --f7-table-card-header-height: 64px;
13231 --f7-table-footer-height: 44px;
13232 --f7-table-footer-text-color: #8e8e93;
13233 --f7-table-input-text-color: #000;
13237 --f7-table-selected-row-bg-color: #363636;
13240 --f7-table-head-font-weight: 500;
13241 --f7-table-head-text-color: rgba
(0, 0, 0, 0.54);
13242 --f7-table-head-cell-height: 56px;
13243 --f7-table-head-icon-size: 16px;
13244 --f7-table-body-cell-height: 48px;
13245 --f7-table-cell-border-color: rgba
(0, 0, 0, 0.12);
13246 --f7-table-cell-padding-vertical: 0px;
13247 --f7-table-cell-padding-horizontal: 28px;
13248 --f7-table-edge-cell-padding-horizontal: 24px;
13249 --f7-table-label-cell-padding-horizontal: 24px;
13250 --f7-table-checkbox-cell-width: 18px;
13251 --f7-table-actions-cell-link-color: rgba
(0, 0, 0, 0.54);
13252 --f7-table-selected-row-bg-color: #f5f5f5;
13253 --f7-table-actions-link-color: rgba
(0, 0, 0, 0.54);
13254 --f7-table-title-font-size: 20px;
13255 --f7-table-title-font-weight: 400;
13256 --f7-table-card-header-height: 64px;
13257 --f7-table-footer-height: 56px;
13258 --f7-table-footer-text-color: rgba
(0, 0, 0, 0.54);
13259 --f7-table-input-text-color: #212121;
13263 --f7-table-head-text-color: rgba
(255, 255, 255, 0.54);
13264 --f7-table-footer-text-color: rgba
(255, 255, 255, 0.54);
13265 --f7-table-selected-row-bg-color: rgba
(255, 255, 255, 0.05);
13266 --f7-table-actions-cell-link-color: rgba
(255, 255, 255, 0.54);
13267 --f7-table-actions-link-color: rgba
(255, 255, 255, 0.54);
13270 --f7-table-link-icon-only-icon-size: 18px;
13271 --f7-table-head-font-weight: 400;
13272 --f7-table-head-text-color: rgba
(0, 0, 0, 0.6);
13273 --f7-table-head-cell-height: 32px;
13274 --f7-table-head-icon-size: 18px;
13275 --f7-table-body-cell-height: 32px;
13276 --f7-table-cell-border-color: rgba
(0, 0, 0, 0.12);
13277 --f7-table-cell-padding-vertical: 5px;
13278 --f7-table-cell-padding-horizontal: 10px;
13279 --f7-table-edge-cell-padding-horizontal: 15px;
13280 --f7-table-label-cell-padding-horizontal: 15px;
13281 --f7-table-checkbox-cell-width: 22px;
13282 /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
13283 --f7-table-selected-row-bg-color: rgba
(0, 0, 0, 0.03);
13284 /* --f7-table-actions-link-color: var(--f7-theme-color); */
13285 --f7-table-title-font-size: 14px;
13286 --f7-table-title-font-weight: 600;
13287 --f7-table-card-header-height: 42px;
13288 --f7-table-footer-height: 32px;
13289 --f7-table-footer-text-color: rgba
(0, 0, 0, 0.5);
13290 --f7-table-input-text-color: #000;
13292 .aurora
.theme-dark
,
13293 .aurora.theme-dark {
13294 --f7-table-selected-row-bg-color: rgba
(255, 255, 255, 0.03);
13295 --f7-table-head-text-color: rgba
(255, 255, 255, 0.52);
13296 --f7-table-footer-text-color: rgba
(255, 255, 255, 0.52);
13307 border-collapse: collapse
;
13310 .data-table thead th
,
13311 .data-table thead td {
13312 font-size: var
(--f7-table-head-font-size
);
13313 font-weight: var
(--f7-table-head-font-weight
);
13315 white-space: nowrap
;
13316 text-overflow: ellipsis
;
13318 height: var
(--f7-table-head-cell-height
);
13320 .data-table thead
th:not
(.sortable-cell-active
),
13321 .data-table thead td:not(.sortable-cell-active) {
13322 color: var
(--f7-table-head-text-color
);
13324 .data-table thead i
.icon
,
13325 .data-table thead i
.f7-icons
,
13326 .data-table thead i.material-icons {
13327 vertical-align: top
;
13328 font-size: var
(--f7-table-head-icon-size
);
13329 width: var
(--f7-table-head-icon-size
);
13330 height: var
(--f7-table-head-icon-size
);
13332 .data-table tbody {
13333 font-size: var
(--f7-table-body-font-size
);
13335 .data-table tbody th
,
13336 .data-table tbody td {
13337 height: var
(--f7-table-body-cell-height
);
13339 .data-table tbody tr
.data-table-row-selected
,
13340 .device-desktop .data-table tbody tr:hover {
13341 background: var
(--f7-table-selected-row-bg-color
);
13343 .data-table tbody
td:before
,
13344 .data-table tbody th:before {
13346 position: absolute
;
13347 background-color: var
(--f7-table-cell-border-color
);
13356 transform-origin: 50% 0%;
13357 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
13361 --f7-table-cell-padding-left: var
(--f7-table-cell-padding-horizontal
);
13362 --f7-table-cell-padding-right: var
(--f7-table-cell-padding-horizontal
);
13363 padding-top: var
(--f7-table-cell-padding-vertical
);
13364 padding-bottom: var
(--f7-table-cell-padding-vertical
);
13365 padding-left: var
(--f7-table-cell-padding-left
);
13366 padding-right: var
(--f7-table-cell-padding-right
);
13367 position: relative
;
13368 box-sizing: border-box
;
13370 .data-table
th:first-child
,
13371 .data-table td:first-child {
13372 --f7-table-cell-padding-right: var
(--f7-table-edge-cell-padding-horizontal
);
13374 .data-table
th:last-child
,
13375 .data-table td:last-child {
13376 --f7-table-cell-padding-left: var
(--f7-table-edge-cell-padding-horizontal
);
13378 .data-table th
.label-cell
,
13379 .data-table td.label-cell {
13380 --f7-table-cell-padding-left: var
(--f7-table-label-cell-padding-horizontal
);
13381 --f7-table-cell-padding-right: var
(--f7-table-label-cell-padding-horizontal
);
13383 .data-table th
.numeric-cell
,
13384 .data-table td.numeric-cell {
13387 .data-table th
.checkbox-cell
,
13388 .data-table td.checkbox-cell {
13390 width: var
(--f7-table-checkbox-cell-width
);
13392 .data-table th
.checkbox-cell label
+ span
,
13393 .data-table td.checkbox-cell label + span {
13396 .data-table th
.checkbox-cell:first-child
,
13397 .data-table td.checkbox-cell:first-child {
13398 padding-left: calc
(var
(--f7-table-cell-padding-left
) / 2);
13400 .data-table th
.checkbox-cell:first-child
+ td
,
13401 .data-table td
.checkbox-cell:first-child
+ td
,
13402 .data-table th
.checkbox-cell:first-child
+ th
,
13403 .data-table td.checkbox-cell:first-child + th {
13404 padding-right: calc
(var
(--f7-table-cell-padding-right
) / 2);
13406 .data-table th
.checkbox-cell:last-child
,
13407 .data-table td.checkbox-cell:last-child {
13408 padding-right: calc
(var
(--f7-table-cell-padding-right
) / 2);
13410 .data-table th
.actions-cell
,
13411 .data-table td.actions-cell {
13413 white-space: nowrap
;
13415 .data-table th
.actions-cell a
.link
,
13416 .data-table td.actions-cell a.link {
13417 color: var
(--f7-table-actions-cell-link-color
, var
(--f7-theme-color
));
13419 .data-table th a
.icon-only
,
13420 .data-table td a
.icon-only
,
13421 .card
.data-table th a
.icon-only
,
13422 .card
.data-table td a
.icon-only
,
13423 .card
.data-table th a
.icon-only
,
13424 .card.data-table td a.icon-only {
13425 display: inline-block
;
13426 vertical-align: middle
;
13427 text-align: center
;
13431 .data-table th a
.icon-only i
,
13432 .data-table td a
.icon-only i
,
13433 .card
.data-table th a
.icon-only i
,
13434 .card
.data-table td a
.icon-only i
,
13435 .card
.data-table th a
.icon-only i
,
13436 .card.data-table td a.icon-only i {
13437 font-size: var
(--f7-table-link-icon-only-icon-size
);
13438 vertical-align: middle
;
13440 .data-table .sortable-cell:not(.input-cell) {
13442 position: relative
;
13444 .data-table .sortable-cell.input-cell .table-head-label {
13446 position: relative
;
13448 .data-table
.sortable-cell:not
(.numeric-cell
):not
(.input-cell
):after
,
13449 .data-table
.sortable-cell
.numeric-cell:not
(.input-cell
):before
,
13450 .data-table
.sortable-cell:not
(.numeric-cell
).input-cell
> .table-head-label:after
,
13451 .data-table .sortable-cell.numeric-cell.input-cell > .table-head-label:before {
13452 content: 'arrow_bottom_md';
13453 font-family: 'framework7-core-icons';
13454 font-weight: normal
;
13455 font-style: normal
;
13457 letter-spacing: normal
;
13458 text-transform: none
;
13459 white-space: nowrap
;
13462 -webkit-font-smoothing: antialiased
;
13463 text-rendering: optimizeLegibility
;
13464 -moz-osx-font-smoothing: grayscale
;
13465 -moz-font-feature-settings: "liga";
13466 font-feature-settings: "liga";
13467 text-align: center
;
13472 display: inline-block
;
13473 vertical-align: top
;
13476 color: var
(--f7-table-sortable-icon-color
);
13479 transition-duration: 300ms;
13480 transform: rotate
(0);
13483 .device-desktop
.data-table
.sortable-cell:not
(.sortable-cell-active
):hover:after
,
13484 .device-desktop
.data-table
.sortable-cell:not
(.sortable-cell-active
) .table-head-label:hover:after
,
13485 .device-desktop
.data-table
.sortable-cell:not
(.sortable-cell-active
):hover:before
,
13486 .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before {
13489 .data-table
.sortable-cell
.sortable-cell-active:after
,
13490 .data-table
.sortable-cell
.sortable-cell-active
.table-head-label:after
,
13491 .data-table
.sortable-cell
.sortable-cell-active:before
,
13492 .data-table .sortable-cell.sortable-cell-active .table-head-label:before {
13493 opacity: 0.87 !important
;
13495 .data-table
.sortable-cell
.sortable-desc:after
,
13496 .data-table
.sortable-cell
.sortable-desc:after
,
13497 .data-table
.table-head-label:after
,
13498 .data-table
.sortable-cell
.sortable-desc:before
,
13499 .data-table
.sortable-cell
.sortable-desc:before
,
13500 .data-table .table-head-label:before {
13501 transform: rotate
(180deg) !important
;
13503 .data-table
.card
.card-header
,
13504 .card
.data-table
.card-header
,
13505 .data-table
.card
.card-footer
,
13506 .card .data-table .card-footer {
13507 padding-left: var
(--f7-table-edge-cell-padding-horizontal
);
13508 padding-right: var
(--f7-table-edge-cell-padding-horizontal
);
13510 .data-table
.card
.card-header
,
13511 .card .data-table .card-header {
13512 min-height: var
(--f7-table-card-header-height
);
13514 .data-table
.card
.card-content
,
13515 .card .data-table .card-content {
13518 .data-table
.card
.card-footer
,
13519 .card .data-table .card-footer {
13520 min-height: var
(--f7-table-footer-height
);
13522 .data-table .data-table-title {
13523 font-size: var
(--f7-table-title-font-size
);
13524 font-weight: var
(--f7-table-title-font-weight
);
13526 .data-table
.data-table-links
,
13527 .data-table .data-table-actions {
13530 .data-table .data-table-links .button {
13533 .data-table .data-table-actions {
13534 margin-right: auto
;
13535 align-items: center
;
13537 .data-table .data-table-actions a.link {
13538 color: var
(--f7-table-actions-link-color
, var
(--f7-theme-color
));
13541 .data-table .data-table-actions a.link.icon-only {
13543 justify-content: center
;
13546 .data-table
.data-table-header
,
13547 .data-table .data-table-header-selected {
13549 justify-content: space-between
;
13550 align-items: center
;
13553 .data-table
.card-header
> .data-table-header
,
13554 .data-table .card-header > .data-table-header-selected {
13555 padding-top: var
(--f7-card-header-padding-vertical
);
13556 padding-bottom: var
(--f7-card-header-padding-vertical
);
13558 padding-right: var
(--f7-table-edge-cell-padding-horizontal
);
13559 padding-left: var
(--f7-table-edge-cell-padding-horizontal
);
13560 margin-right: calc
(-1 * var
(--f7-table-edge-cell-padding-horizontal
));
13561 margin-left: calc
(-1 * var
(--f7-table-edge-cell-padding-horizontal
));
13563 .data-table .data-table-header-selected {
13564 background: rgba
(var
(--f7-theme-color-rgb
), 0.1);
13567 .data-table.data-table-has-checked .data-table-header {
13570 .data-table.data-table-has-checked .data-table-header-selected {
13573 .data-table .data-table-title-selected {
13575 color: var
(--f7-theme-color
);
13577 .data-table .data-table-footer {
13579 align-items: center
;
13580 box-sizing: border-box
;
13581 position: relative
;
13582 font-size: var
(--f7-table-footer-font-size
);
13584 min-height: var
(--f7-table-footer-height
);
13585 color: var
(--f7-table-footer-text-color
);
13586 justify-content: flex-start
;
13588 .data-table .data-table-footer:before {
13590 position: absolute
;
13591 background-color: var
(--f7-table-cell-border-color
);
13600 transform-origin: 50% 0%;
13601 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
13603 .data-table
.data-table-rows-select
,
13604 .data-table .data-table-pagination {
13606 align-items: center
;
13608 .data-table .input-cell {
13610 padding-bottom: 8px;
13612 vertical-align: top
;
13614 .data-table .input-cell .table-head-label + .input {
13617 .data-table .input-cell .input {
13618 height: var
(--f7-table-input-height
);
13620 .data-table
.input-cell
.input input
,
13621 .data-table
.input-cell
.input textarea
,
13622 .data-table .input-cell .input select {
13623 height: var
(--f7-table-input-height
);
13624 color: var
(--f7-table-input-text-color
);
13625 font-size: var
(--f7-table-input-font-size
);
13627 @media (max-width: 480px) and
(orientation: portrait
) {
13628 .data-table.data-table-collapsible thead {
13631 .data-table
.data-table-collapsible tbody
,
13632 .data-table
.data-table-collapsible tr
,
13633 .data-table.data-table-collapsible td {
13636 .data-table.data-table-collapsible tr {
13637 position: relative
;
13639 .data-table.data-table-collapsible tr:before {
13641 position: absolute
;
13642 background-color: var
(--f7-table-cell-border-color
);
13651 transform-origin: 50% 0%;
13652 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
13654 .data-table.data-table-collapsible tr:hover {
13655 background-color: inherit
;
13657 .data-table.data-table-collapsible td {
13658 --f7-table-cell-padding-left: var
(--f7-table-collapsible-cell-padding
);
13659 --f7-table-cell-padding-right: var
(--f7-table-collapsible-cell-padding
);
13661 min-height: var
(--f7-table-body-cell-height
);
13663 align-content: center
;
13664 align-items: center
;
13665 justify-content: flex-start
;
13668 .data-table.data-table-collapsible td:before {
13669 display: none
!important
;
13671 .data-table.data-table-collapsible td:not(.checkbox-cell):before {
13673 display: block
!important
;
13674 content: attr
(data-collapsible-title
);
13675 position: relative
;
13677 background: none
!important
;
13678 transform: none
!important
;
13679 font-size: var
(--f7-table-head-font-size
);
13680 font-weight: var
(--f7-table-head-font-weight
);
13681 color: var
(--f7-table-head-text-color
);
13685 .data-table.data-table-collapsible td.checkbox-cell {
13686 position: absolute
;
13690 .data-table.data-table-collapsible td.checkbox-cell + td {
13691 padding-right: 16px;
13693 .data-table.data-table-collapsible td.checkbox-cell ~ td {
13694 margin-right: 32px;
13697 .data-table
.tablet-only
,
13698 .data-table .tablet-landscape-only {
13701 @media (min-width: 768px) {
13702 .data-table .tablet-only {
13703 display: table-cell
;
13706 @media (min-width: 768px) and
(orientation: landscape
) {
13707 .data-table .tablet-landscape-only {
13708 display: table-cell
;
13711 .ios
.data-table th
.actions-cell a
.link
+ a
.link
,
13712 .ios .data-table td.actions-cell a.link + a.link {
13713 margin-right: 15px;
13715 .ios .sortable-cell:not(.numeric-cell):after {
13718 .ios .sortable-cell.numeric-cell:before {
13721 .ios
.data-table-links a
.link
+ a
.link
,
13722 .ios
.data-table-actions a
.link
+ a
.link
,
13723 .ios
.data-table-links
.button
+ .button
,
13724 .ios .data-table-actions .button + .button {
13725 margin-right: 15px;
13727 .ios .data-table-actions a.link.icon-only {
13731 .ios
.data-table-rows-select a
.link
,
13732 .ios .data-table-pagination a.link {
13736 .ios .data-table-rows-select + .data-table-pagination {
13737 margin-right: 30px;
13739 .ios .data-table-rows-select .input {
13740 margin-right: 20px;
13742 .ios .data-table-pagination-label {
13745 .md
.data-table th
.actions-cell a
.link
+ a
.link
,
13746 .md .data-table td.actions-cell a.link + a.link {
13747 margin-right: 24px;
13749 .md
.data-table th
.actions-cell a
.icon-only
,
13750 .md .data-table td.actions-cell a.icon-only {
13755 .md .sortable-cell:not(.numeric-cell):after {
13758 .md .sortable-cell.numeric-cell:before {
13761 .md
.data-table-links a
.link
+ a
.link
,
13762 .md
.data-table-actions a
.link
+ a
.link
,
13763 .md
.data-table-links
.button
+ .button
,
13764 .md .data-table-actions .button + .button {
13765 margin-right: 24px;
13767 .md .data-table-actions a.link.icon-only {
13772 .md .data-table-actions a.link.icon-only.active-state {
13775 .md
.data-table-rows-select a
.link
,
13776 .md .data-table-pagination a.link {
13780 .md
.data-table-rows-select a
.link:before
,
13781 .md .data-table-pagination a.link:before {
13785 position: absolute
;
13788 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
13789 background-repeat: no-repeat
;
13790 background-position: center
;
13791 background-size: 100% 100%;
13793 pointer-events: none
;
13794 transition-duration: 600ms;
13796 .md
.data-table-rows-select a
.link
.active-state:before
,
13797 .md .data-table-pagination a.link.active-state:before {
13799 transition-duration: 150ms;
13801 .md .data-table-rows-select + .data-table-pagination {
13802 margin-right: 32px;
13804 .md .data-table-rows-select .input {
13805 margin-right: 24px;
13807 .md .data-table-pagination-label {
13810 .md .input-cell .input-clear-button {
13811 transform: scale
(0.8);
13813 .aurora
.data-table th
.actions-cell a
.link
+ a
.link
,
13814 .aurora .data-table td.actions-cell a.link + a.link {
13815 margin-right: 10px;
13817 .aurora .sortable-cell:not(.numeric-cell):after {
13820 .aurora .sortable-cell.numeric-cell:before {
13823 .aurora
.data-table-links a
.link
+ a
.link
,
13824 .aurora
.data-table-actions a
.link
+ a
.link
,
13825 .aurora
.data-table-links
.button
+ .button
,
13826 .aurora .data-table-actions .button + .button {
13827 margin-right: 10px;
13829 .aurora
.data-table-rows-select a
.link
,
13830 .aurora .data-table-pagination a.link {
13834 .aurora .data-table-rows-select + .data-table-pagination {
13835 margin-right: 15px;
13837 .aurora .data-table-rows-select .input {
13838 margin-right: 10px;
13840 .aurora .data-table-pagination-label {
13845 --f7-fab-text-color: #fff;
13846 --f7-fab-extended-text-font-size: 14px;
13847 --f7-fab-extended-text-padding: 0 20px;
13848 --f7-fab-label-bg-color: #fff;
13849 --f7-fab-label-text-color: #333;
13850 --f7-fab-label-border-radius: 4px;
13851 --f7-fab-label-padding: 4px 12px;
13852 --f7-fab-button-size: 40px;
13853 /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
13856 --f7-fab-size: 50px;
13857 --f7-fab-box-shadow: 0px 2px 4px rgba
(0, 0, 0, 0.4);
13858 --f7-fab-margin: 15px;
13859 --f7-fab-extended-size: 50px;
13860 --f7-fab-extended-text-font-weight: 400;
13861 --f7-fab-extended-text-letter-spacing: 0;
13862 --f7-fab-label-box-shadow: 0px 1px 2px rgba
(0, 0, 0, 0.4);
13863 --f7-fab-label-font-size: inherit
;
13866 --f7-fab-size: 56px;
13867 --f7-fab-box-shadow: var
(--f7-elevation-6
);
13868 --f7-fab-margin: 16px;
13869 --f7-fab-extended-size: 48px;
13870 --f7-fab-extended-text-font-weight: 500;
13871 --f7-fab-extended-text-letter-spacing: 0.03em;
13872 --f7-fab-label-box-shadow: var
(--f7-elevation-3
);
13873 --f7-fab-label-font-size: inherit
;
13876 --f7-fab-size: 40px;
13877 --f7-fab-box-shadow: 0px 2px 4px rgba
(0, 0, 0, 0.4);
13878 --f7-fab-margin: 15px;
13879 --f7-fab-extended-size: 38px;
13880 --f7-fab-extended-text-font-weight: 500;
13881 --f7-fab-extended-text-letter-spacing: 0;
13882 --f7-fab-label-box-shadow: 0px 1px 2px rgba
(0, 0, 0, 0.4);
13883 --f7-fab-label-font-size: 12px;
13886 position: absolute
;
13890 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
13892 .fab[class*="fab-left"] {
13893 left: calc
(var
(--f7-fab-margin
) + var
(--f7-safe-area-left
));
13895 .fab[class*="fab-right"] {
13896 right: calc
(var
(--f7-fab-margin
) + var
(--f7-safe-area-right
));
13898 .fab[class*="-top"] {
13899 top: var
(--f7-fab-margin
);
13901 .fab[class*="-bottom"] {
13902 bottom: calc
(var
(--f7-fab-margin
) + var
(--f7-safe-area-bottom
));
13904 .fab[class*="fab-center"] {
13906 transform: translateX
(-50%);
13908 .fab
[class
*="left-center"],
13909 .fab[class*="right-center"] {
13911 transform: translateY
(-50%);
13913 .fab[class*="center-center"] {
13916 transform: translateX
(-50%) translateY
(-50%);
13920 background-color: var
(--f7-fab-bg-color
, var
(--f7-theme-color
));
13921 width: var
(--f7-fab-size
);
13922 height: var
(--f7-fab-size
);
13923 box-shadow: var
(--f7-fab-box-shadow
);
13924 border-radius: calc
(var
(--f7-fab-size
) / 2);
13925 position: relative
;
13926 transition-duration: 300ms;
13928 align-items: center
;
13929 justify-content: center
;
13932 color: var
(--f7-fab-text-color
);
13934 .fab
> a
.active-state
,
13935 .fab-buttons a.active-state {
13936 background-color: var
(--f7-fab-pressed-bg-color
, var
(--f7-theme-color-shade
));
13939 position: absolute
;
13942 transform: translate3d
(-50%, -50%, 0) rotate
(0deg) scale
(1);
13946 transform: translate3d
(-50%, -50%, 0) rotate
(-90deg) scale
(0.5);
13950 border-radius: calc
(var
(--f7-fab-button-size
) / 2);
13951 width: var
(--f7-fab-button-size
);
13952 height: var
(--f7-fab-button-size
);
13956 visibility: hidden
;
13957 pointer-events: none
;
13958 position: absolute
;
13963 .fab-opened:not(.fab-morph) > a i {
13964 transform: translate3d
(-50%, -50%, 0) rotate
(90deg) scale
(0.5);
13967 .fab-opened:not(.fab-morph) > a i + i {
13968 transform: translate3d
(-50%, -50%, 0) rotate
(0deg) scale
(1);
13971 .fab-opened .fab-buttons {
13972 visibility: visible
;
13973 pointer-events: auto
;
13975 .fab-opened .fab-buttons a {
13977 transform: translate3d
(0, 0px, 0) scale
(1) !important
;
13979 .fab-opened .fab-buttons a:nth-child(2) {
13980 transition-delay: 50ms;
13982 .fab-opened .fab-buttons a:nth-child(3) {
13983 transition-delay: 100ms;
13985 .fab-opened .fab-buttons a:nth-child(4) {
13986 transition-delay: 150ms;
13988 .fab-opened .fab-buttons a:nth-child(5) {
13989 transition-delay: 200ms;
13991 .fab-opened .fab-buttons a:nth-child(6) {
13992 transition-delay: 250ms;
13995 .fab-buttons-bottom {
13997 width: var
(--f7-fab-button-size
);
13998 margin-left: calc
(-1 * var
(--f7-fab-button-size
) / 2);
14002 margin-bottom: 16px;
14003 flex-direction: column-reverse
;
14005 .fab-buttons-top a {
14006 transform: translate3d
(0, 8px, 0) scale
(0.3);
14007 transform-origin: center bottom
;
14009 .fab-buttons-top a + a {
14010 margin-bottom: 16px;
14012 .fab-buttons-bottom {
14015 flex-direction: column
;
14017 .fab-buttons-bottom a {
14018 transform: translate3d
(0, -8px, 0) scale
(0.3);
14019 transform-origin: center top
;
14021 .fab-buttons-bottom a + a {
14025 .fab-buttons-right {
14027 height: var
(--f7-fab-button-size
);
14028 margin-top: calc
(-1 * var
(--f7-fab-button-size
) / 2);
14030 .fab-buttons-left {
14032 margin-right: 16px;
14034 .fab-buttons-left a {
14035 transform: translate3d
(8px, 0px, 0) scale
(0.3);
14036 transform-origin: right center
;
14038 .fab-buttons-left a + a {
14039 margin-right: 16px;
14041 .fab-buttons-right {
14044 flex-direction: row-reverse
;
14046 .fab-buttons-right a {
14047 transform: translate3d
(-8px, 0, 0) scale
(0.3);
14048 transform-origin: left center
;
14050 .fab-buttons-right a + a {
14053 .fab-buttons-center {
14059 .fab-buttons-center a {
14060 position: absolute
;
14062 .fab-buttons-center a:nth-child(1) {
14064 margin-left: calc
(-1 * var
(--f7-fab-button-size
) / 2);
14066 margin-bottom: 16px;
14067 transform: translateY
(-8px) scale
(0.3);
14068 transform-origin: center bottom
;
14070 .fab-buttons-center a:nth-child(2) {
14072 margin-top: calc
(-1 * var
(--f7-fab-button-size
) / 2);
14075 transform: translateX
(-8px) scale
(0.3);
14076 transform-origin: left center
;
14078 .fab-buttons-center a:nth-child(3) {
14080 margin-left: calc
(-1 * var
(--f7-fab-button-size
) / 2);
14083 transform: translateY
(8px) scale
(0.3);
14084 transform-origin: center top
;
14086 .fab-buttons-center a:nth-child(4) {
14088 margin-top: calc
(-1 * var
(--f7-fab-button-size
) / 2);
14090 margin-right: 16px;
14091 transform: translateX
(8px) scale
(0.3);
14092 transform-origin: right center
;
14095 border-radius: calc
(var
(--f7-fab-size
) / 2);
14096 background: var
(--f7-fab-bg-color
, var
(--f7-theme-color
));
14097 box-shadow: var
(--f7-fab-box-shadow
);
14101 background: none
!important
;
14103 .fab-opened.fab-morph > a i {
14108 .fab-morph-target {
14109 transition-duration: 250ms;
14111 .fab-morph-target:not(.fab-morph-target-visible) {
14116 min-width: var
(--f7-fab-extended-size
);
14118 .fab-extended > a {
14120 height: var
(--f7-fab-extended-size
);
14122 .fab-extended > a i {
14123 left: calc
(var
(--f7-fab-extended-size
) / 2);
14125 .fab-extended i ~ .fab-text {
14126 padding-left: var
(--f7-fab-extended-size
);
14128 .fab-extended > a {
14129 width: 100% !important
;
14132 box-sizing: border-box
;
14133 font-size: var
(--f7-fab-extended-text-font-size
);
14134 padding: var
(--f7-fab-extended-text-padding
);
14135 font-weight: var
(--f7-fab-extended-text-font-weight
);
14136 letter-spacing: var
(--f7-fab-extended-text-letter-spacing
);
14137 text-transform: uppercase
;
14139 .fab-label-button {
14140 overflow: visible
!important
;
14143 position: absolute
;
14145 padding: var
(--f7-fab-label-padding
);
14146 border-radius: var
(--f7-fab-label-border-radius
);
14147 background: var
(--f7-fab-label-bg-color
);
14148 color: var
(--f7-fab-label-text-color
);
14149 box-shadow: var
(--f7-fab-label-box-shadow
);
14150 white-space: nowrap
;
14151 transform: translateY
(-50%);
14152 pointer-events: none
;
14153 font-size: var
(--f7-fab-label-font-size
);
14155 .fab[class*="fab-right-"] .fab-label {
14159 .fab[class*="fab-left-"] .fab-label {
14163 .navbar
~ * .fab
[class
*="-top"],
14164 .navbar ~ .fab[class*="-top"] {
14165 margin-top: var
(--f7-navbar-height
);
14167 .toolbar-top
~ * .fab
[class
*="-top"],
14168 .toolbar-top
~ .fab
[class
*="-top"],
14169 .ios
.toolbar-top-ios
~ * .fab
[class
*="-top"],
14170 .ios
.toolbar-top-ios
~ .fab
[class
*="-top"],
14171 .md
.toolbar-top-md
~ * .fab
[class
*="-top"],
14172 .md .toolbar-top-md ~ .fab[class*="-top"] {
14173 margin-top: var
(--f7-toolbar-height
);
14175 .toolbar-bottom
~ * .fab
[class
*="-bottom"],
14176 .toolbar-bottom
~ .fab
[class
*="-bottom"],
14177 .ios
.toolbar-bottom-ios
~ * .fab
[class
*="-bottom"],
14178 .ios
.toolbar-bottom-ios
~ .fab
[class
*="-bottom"],
14179 .md
.toolbar-bottom-md
~ * .fab
[class
*="-bottom"],
14180 .md .toolbar-bottom-md ~ .fab[class*="-bottom"] {
14181 margin-bottom: var
(--f7-toolbar-height
);
14183 .tabbar-labels
.toolbar-bottom
~ * .fab
[class
*="-bottom"],
14184 .tabbar-labels
.toolbar-bottom
~ .fab
[class
*="-bottom"],
14185 .ios
.tabbar-labels
.toolbar-bottom-ios
~ * .fab
[class
*="-bottom"],
14186 .ios
.tabbar-labels
.toolbar-bottom-ios
~ .fab
[class
*="-bottom"],
14187 .md
.tabbar-labels
.toolbar-bottom-md
~ * .fab
[class
*="-bottom"],
14188 .md .tabbar-labels.toolbar-bottom-md ~ .fab[class*="-bottom"] {
14189 margin-bottom: var
(--f7-tabbar-labels-height
);
14191 .tabbar-labels
.toolbar-top
~ * .fab
[class
*="-bottom"],
14192 .tabbar-labels
.toolbar-top
~ .fab
[class
*="-bottom"],
14193 .ios
.tabbar-labels
.toolbar-top-ios
~ * .fab
[class
*="-bottom"],
14194 .ios
.tabbar-labels
.toolbar-top-ios
~ .fab
[class
*="-bottom"],
14195 .md
.tabbar-labels
.toolbar-top-md
~ * .fab
[class
*="-bottom"],
14196 .md .tabbar-labels.toolbar-top-md ~ .fab[class*="-bottom"] {
14197 margin-top: var
(--f7-tabbar-labels-height
);
14199 .messagebar
~ * .fab
[class
*="-bottom"],
14200 .messagebar ~ .fab[class*="-bottom"] {
14201 margin-bottom: var
(--f7-messagebar-height
);
14203 .navbar
+ .toolbar-top
~ * .fab
[class
*="-top"],
14204 .ios
.navbar
+ .toolbar-top-ios
~ * .fab
[class
*="-top"],
14205 .md
.navbar
+ .toolbar-top-ios
~ * .fab
[class
*="-top"],
14206 .navbar
+ .toolbar-top
~ .fab
[class
*="-top"],
14207 .ios
.navbar
+ .toolbar-top-ios
~ .fab
[class
*="-top"],
14208 .md .navbar + .toolbar-top-ios ~ .fab[class*="-top"] {
14209 margin-top: calc
(var
(--f7-toolbar-height
) + var
(--f7-navbar-height
));
14211 .navbar
+ .toolbar-top
.tabbar-labels
~ * .fab
[class
*="-top"],
14212 .ios
.navbar
+ .toolbar-top-ios
.tabbar-labels
~ * .fab
[class
*="-top"],
14213 .md
.navbar
+ .toolbar-top-ios
.tabbar-labels
~ * .fab
[class
*="-top"],
14214 .navbar
+ .toolbar-top
.tabbar-labels
~ .fab
[class
*="-top"],
14215 .ios
.navbar
+ .toolbar-top-ios
.tabbar-labels
~ .fab
[class
*="-top"],
14216 .md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"] {
14217 margin-top: calc
(var
(--f7-tabbar-labels-height
) + var
(--f7-navbar-height
));
14219 .ios
.fab
> a
.active-state
,
14220 .ios .fab-buttons a.active-state {
14221 transition-duration: 0ms;
14223 /* === Searchbar === */
14226 --f7-searchbar-link-color: var(--f7-bars-link-color);
14228 --f7-searchbar-input-border-width: 0px;
14229 --f7-searchbar-input-border-color: transparent
;
14230 --f7-searchbar-input-text-color: #000;
14231 --f7-searchbar-placeholder-color: #939398;
14235 --f7-searchbar-input-text-color: #fff;
14239 --f7-searchbar-bg-image: var(--f7-bars-bg-image);
14240 --f7-searchbar-bg-color: var(--f7-bars-bg-color);
14241 --f7-searchbar-border-color: var(--f7-bars-border-color);
14243 --f7-searchbar-height: 44px;
14244 --f7-searchbar-inner-padding-left: 8px;
14245 --f7-searchbar-inner-padding-right: 8px;
14247 --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
14249 --f7-searchbar-search-icon-color: #939398;
14250 --f7-searchbar-input-font-size: 17px;
14251 --f7-searchbar-input-bg-color: #e8e8ea;
14252 --f7-searchbar-input-border-radius: 8px;
14253 --f7-searchbar-input-height: 32px;
14254 --f7-searchbar-input-padding-horizontal: 28px;
14256 --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
14257 --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
14258 --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
14259 --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
14261 --f7-searchbar-backdrop-bg-color: rgba
(0, 0, 0, 0.4);
14262 --f7-searchbar-shadow-image: none
;
14263 --f7-searchbar-in-page-content-margin: 0px;
14264 --f7-searchbar-in-page-content-box-shadow: none
;
14265 --f7-searchbar-in-page-content-border-radius: 0;
14266 --f7-searchbar-in-page-content-input-border-radius: 0;
14270 --f7-searchbar-bg-color: #303030;
14271 --f7-searchbar-input-bg-color: #171717;
14274 --f7-searchbar-bg-color: #fff;
14275 --f7-searchbar-border-color: transparent
;
14276 --f7-searchbar-height: 48px;
14277 --f7-searchbar-inner-padding-left: 0px;
14278 --f7-searchbar-inner-padding-right: 0px;
14279 --f7-searchbar-link-color: #737373;
14280 --f7-searchbar-search-icon-color: #737373;
14281 --f7-searchbar-input-font-size: 20px;
14282 --f7-searchbar-input-bg-color: #fff;
14283 --f7-searchbar-input-border-radius: 0px;
14284 --f7-searchbar-input-height: 100%;
14285 --f7-searchbar-input-padding-horizontal: 48px;
14287 --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
14288 --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
14290 --f7-searchbar-inline-input-padding-horizontal: 24px;
14291 --f7-searchbar-input-clear-button-color: #737373;
14292 --f7-searchbar-backdrop-bg-color: rgba
(0, 0, 0, 0.25);
14293 --f7-searchbar-shadow-image: var
(--f7-bars-shadow-bottom-image
);
14294 --f7-searchbar-in-page-content-margin: 8px;
14295 --f7-searchbar-in-page-content-box-shadow: var
(--f7-elevation-1
);
14296 --f7-searchbar-in-page-content-border-radius: 4px;
14297 --f7-searchbar-in-page-content-input-border-radius: 4px;
14301 --f7-searchbar-bg-color: #222222;
14302 --f7-searchbar-input-bg-color: #222222;
14306 --f7-searchbar-bg-image: var(--f7-bars-bg-image);
14307 --f7-searchbar-bg-color: var(--f7-bars-bg-color);
14308 --f7-searchbar-border-color: var(--f7-bars-border-color);
14310 --f7-searchbar-height: 38px;
14311 --f7-searchbar-inner-padding-left: 8px;
14312 --f7-searchbar-inner-padding-right: 8px;
14314 --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
14316 --f7-searchbar-search-icon-color: #939398;
14317 --f7-searchbar-input-font-size: 13px;
14318 --f7-searchbar-input-bg-color: #fff;
14319 --f7-searchbar-input-border-radius: 4px;
14320 --f7-searchbar-input-height: 24px;
14321 --f7-searchbar-input-padding-horizontal: 24px;
14323 --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
14324 --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
14325 --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal;
14326 --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
14328 --f7-searchbar-backdrop-bg-color: rgba
(0, 0, 0, 0.4);
14329 --f7-searchbar-shadow-image: none
;
14330 --f7-searchbar-in-page-content-margin: 0px;
14331 --f7-searchbar-in-page-content-box-shadow: none
;
14332 --f7-searchbar-in-page-content-border-radius: 0;
14334 --f7-searchbar-in-page-content-input-border-radius: var(--f7-searchbar-input-border-radius);
14337 .aurora
.theme-dark
,
14338 .aurora.theme-dark {
14339 --f7-searchbar-input-bg-color: #333;
14343 position: relative
;
14345 height: var
(--f7-searchbar-height
);
14346 background-image: var
(--f7-searchbar-bg-image
, var
(--f7-bars-bg-image
));
14347 background-color: var
(--f7-searchbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
14349 .searchbar
.no-hairline:after
,
14350 .searchbar.no-border:after {
14351 display: none
!important
;
14353 .searchbar.no-shadow:before {
14354 display: none
!important
;
14358 position: absolute
;
14359 background-color: var
(--f7-searchbar-border-color
, var
(--f7-bars-border-color
));
14368 transform-origin: 50% 100%;
14369 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
14371 .page > .searchbar:not(.searchbar-inline) {
14374 .page > .searchbar:not(.searchbar-inline):before {
14376 position: absolute
;
14382 pointer-events: none
;
14383 background: var
(--f7-searchbar-shadow-image
);
14385 .searchbar input
[type
="text"],
14386 .searchbar input[type="search"] {
14387 box-sizing: border-box
;
14391 border: var
(--f7-searchbar-input-border-width
) solid var
(--f7-searchbar-input-border-color
);
14392 -webkit-appearance: none
;
14393 -moz-appearance: none
;
14395 font-family: inherit
;
14396 font-weight: normal
;
14397 color: var
(--f7-searchbar-input-text-color
);
14398 font-size: var
(--f7-searchbar-input-font-size
);
14399 background-color: var
(--f7-searchbar-input-bg-color
);
14400 border-radius: var
(--f7-searchbar-input-border-radius
);
14401 position: relative
;
14403 padding-left: calc
(var
(--f7-searchbar-input-padding-horizontal
) + var
(--f7-searchbar-input-extra-padding-right
, 0px));
14404 padding-right: calc
(var
(--f7-searchbar-input-padding-horizontal
) + var
(--f7-searchbar-input-extra-padding-left
, 0px));
14406 .searchbar input
[type
="text"]::-webkit-input-placeholder
,
14407 .searchbar input[type="search"]::-webkit-input-placeholder {
14408 color: var
(--f7-searchbar-placeholder-color
);
14411 .searchbar input
[type
="text"]::-moz-placeholder
,
14412 .searchbar input[type="search"]::-moz-placeholder {
14413 color: var
(--f7-searchbar-placeholder-color
);
14416 .searchbar input
[type
="text"]::-ms-input-placeholder
,
14417 .searchbar input[type="search"]::-ms-input-placeholder {
14418 color: var
(--f7-searchbar-placeholder-color
);
14421 .searchbar input
[type
="text"]::placeholder
,
14422 .searchbar input[type="search"]::placeholder {
14423 color: var
(--f7-searchbar-placeholder-color
);
14426 .searchbar input::-webkit-search-cancel-button {
14427 -webkit-appearance: none
;
14430 .searchbar .searchbar-input-wrap {
14433 height: var
(--f7-searchbar-input-height
);
14434 position: relative
;
14437 color: var
(--f7-searchbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
14439 .page > .searchbar:not(.searchbar-inline) {
14440 position: absolute
;
14444 .page-content .searchbar:not(.searchbar-inline) {
14445 border-radius: var
(--f7-searchbar-in-page-content-border-radius
);
14446 margin: var
(--f7-searchbar-in-page-content-margin
);
14448 box-shadow: var
(--f7-searchbar-in-page-content-box-shadow
);
14450 .page-content
.searchbar:not
(.searchbar-inline
) .searchbar-inner
,
14451 .page-content
.searchbar:not
(.searchbar-inline
) input
[type
="text"],
14452 .page-content .searchbar:not(.searchbar-inline) input[type="search"] {
14453 border-radius: var
(--f7-searchbar-in-page-content-input-border-radius
, var
(--f7-searchbar-input-border-radius
));
14455 .searchbar .input-clear-button {
14456 color: var
(--f7-searchbar-input-clear-button-color
, var
(--f7-input-clear-button-color
));
14458 .searchbar-expandable {
14459 position: absolute
;
14460 transition-duration: 300ms;
14461 pointer-events: none
;
14463 .navbar-inner-large .searchbar-expandable:after {
14464 display: none
!important
;
14466 .navbar .searchbar.searchbar-expandable {
14467 --f7-searchbar-expandable-size: var
(--f7-navbar-height
);
14469 .toolbar .searchbar.searchbar-expandable {
14470 --f7-searchbar-expandable-size: var
(--f7-toolbar-height
);
14472 .subnavbar .searchbar.searchbar-expandable {
14473 --f7-searchbar-expandable-size: var
(--f7-subnavbar-height
);
14475 .tabbar-labels .searchbar.searchbar-expandable {
14476 --f7-searchbar-expandable-size: var
(--f7-tabbar-labels-height
);
14479 position: absolute
;
14485 align-items: center
;
14486 box-sizing: border-box
;
14487 padding: 0 calc
(var
(--f7-searchbar-inner-padding-right
) + var
(--f7-safe-area-right
)) 0 calc
(var
(--f7-searchbar-inner-padding-left
) + var
(--f7-safe-area-left
));
14489 .searchbar-disable-button {
14491 pointer-events: none
;
14492 -webkit-appearance: none
;
14493 -moz-appearance: none
;
14504 pointer-events: none
;
14505 background-position: center
;
14506 background-repeat: no-repeat
;
14508 .searchbar-icon:after {
14509 color: var
(--f7-searchbar-search-icon-color
);
14510 font-family: 'framework7-core-icons';
14511 font-weight: normal
;
14512 font-style: normal
;
14514 letter-spacing: normal
;
14515 text-transform: none
;
14516 white-space: nowrap
;
14519 -webkit-font-smoothing: antialiased
;
14520 text-rendering: optimizeLegibility
;
14521 -moz-osx-font-smoothing: grayscale
;
14522 -moz-font-feature-settings: "liga";
14523 font-feature-settings: "liga";
14524 text-align: center
;
14530 .searchbar-backdrop {
14531 position: absolute
;
14538 pointer-events: none
;
14539 transition-duration: 300ms;
14540 transform: translate3d
(0, 0, 0);
14541 background: var
(--f7-searchbar-backdrop-bg-color
);
14543 .searchbar-backdrop.searchbar-backdrop-in {
14545 pointer-events: auto
;
14547 .page-content > .searchbar-backdrop {
14550 .searchbar-not-found {
14553 .hidden-by-searchbar
,
14554 .list
.hidden-by-searchbar
,
14555 .list
.li
.hidden-by-searchbar
,
14556 .list li.hidden-by-searchbar {
14557 display: none
!important
;
14559 .navbar
.with-searchbar-expandable-enabled
,
14560 .navbar-inner.with-searchbar-expandable-enabled {
14561 --f7-navbar-large-collapse-progress: 1;
14563 .navbar
.with-searchbar-expandable-enabled
.title-large
,
14564 .navbar-inner
.with-searchbar-expandable-enabled
.title-large
,
14565 .navbar
.with-searchbar-expandable-enabled
.title-large-text
,
14566 .navbar-inner
.with-searchbar-expandable-enabled
.title-large-text
,
14567 .navbar
.with-searchbar-expandable-enabled
.title-large-inner
,
14568 .navbar-inner.with-searchbar-expandable-enabled .title-large-inner {
14569 transition-duration: 300ms;
14571 .page-content.with-searchbar-expandable-enabled {
14572 height: calc
(100% + var
(--f7-navbar-large-title-height
));
14573 transform: translateY
(calc
(-1 * var
(--f7-navbar-large-title-height
)));
14574 transition-duration: 300ms;
14575 transition-property: transform
;
14577 .navbar
~ .page:not
(.no-navbar
) > .searchbar
,
14578 .page > .navbar ~ .searchbar {
14579 top: var
(--f7-navbar-height
);
14581 .navbar
~ .page-with-navbar-large:not
(.no-navbar
) .searchbar
,
14582 .page-with-navbar-large
.navbar
~ .searchbar
,
14583 .page-with-navbar-large .navbar ~ * .searchbar {
14584 top: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
14585 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
14588 --f7-page-searchbar-offset: var
(--f7-searchbar-height
);
14590 .page
> .toolbar-top
~ .searchbar
,
14591 .ios
.page
> .toolbar-top-ios
~ .searchbar
,
14592 .md
.page
> .toolbar-top-md
~ .searchbar
,
14593 .aurora .page > .toolbar-top-aurora ~ .searchbar {
14594 top: var
(--f7-toolbar-height
);
14596 .page
> .tabbar-labels
.toolbar-top
~ .searchbar
,
14597 .ios
.page
> .tabbar-labels
.toolbar-top-ios
~ .searchbar
,
14598 .md
.page
> .tabbar-labels
.toolbar-top-md
~ .searchbar
,
14599 .aurora .page > .tabbar-labels.toolbar-top-aurora ~ .searchbar {
14600 top: var
(--f7-tabbar-labels-height
);
14602 .page
> .navbar
~ .toolbar-top
~ .searchbar
,
14603 .ios
.page
> .navbar
~ .toolbar-top-ios
~ .searchbar
,
14604 .md
.page
> .navbar
~ .toolbar-top-md
~ .searchbar
,
14605 .aurora .page > .navbar ~ .toolbar-top-aurora ~ .searchbar {
14606 top: calc
(var
(--f7-navbar-height
) + var
(--f7-toolbar-height
));
14608 .page
> .navbar
~ .tabbar-labels
.toolbar-top
~ .searchbar
,
14609 .ios
.page
> .navbar
~ .tabbar-labels
.toolbar-top-ios
~ .searchbar
,
14610 .md
.page
> .navbar
~ .tabbar-labels
.toolbar-top-md
~ .searchbar
,
14611 .aurora .page > .navbar ~ .tabbar-labels.toolbar-top-aurora ~ .searchbar {
14612 top: calc
(var
(--f7-navbar-height
) + var
(--f7-tabbar-labels-height
));
14614 .searchbar.searchbar-inline {
14617 background-color: transparent
;
14618 background-image: none
;
14620 .searchbar
.searchbar-inline:after
,
14621 .searchbar.searchbar-inline:before {
14622 display: none
!important
;
14624 .searchbar.searchbar-inline .searchbar-input-wrap {
14625 height: var
(--f7-searchbar-inline-input-height
, var
(--f7-searchbar-input-height
));
14627 .searchbar.searchbar-inline .searchbar-inner {
14633 .searchbar
.searchbar-inline input
[type
="text"],
14634 .searchbar.searchbar-inline input[type="search"] {
14635 font-size: var
(--f7-searchbar-inline-input-font-size
, var
(--f7-searchbar-input-font-size
));
14636 padding-left: calc
(var
(--f7-searchbar-inline-input-padding-horizontal
, var
(--f7-searchbar-input-padding-horizontal
)) + var
(--f7-searchbar-input-extra-padding-right
, 0px));
14637 padding-right: calc
(var
(--f7-searchbar-inline-input-padding-horizontal
, var
(--f7-searchbar-input-padding-horizontal
)) + var
(--f7-searchbar-input-extra-padding-left
, 0px));
14639 .ios
.searchbar input
[type
="search"],
14640 .ios .searchbar input[type="text"] {
14643 .ios .searchbar .input-clear-button {
14647 .ios .searchbar-icon {
14650 position: absolute
;
14656 .ios .searchbar-icon:after {
14657 content: 'search_ios';
14660 .ios .searchbar-disable-button {
14663 transform: translate3d
(0, 0, 0);
14664 transition-duration: 300ms;
14665 color: var
(--f7-searchbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
14668 .ios .searchbar-disable-button.active-state {
14669 transition-duration: 0ms;
14670 opacity: 0.3 !important
;
14672 .ios .searchbar-enabled .searchbar-disable-button {
14673 pointer-events: auto
;
14677 .ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
14678 transition-duration: 300ms !important
;
14680 .ios .searchbar-expandable {
14681 --f7-searchbar-expandable-size: var
(--f7-searchbar-height
);
14687 transform: translate3d
(0, 0, 0);
14690 .ios .searchbar-expandable .searchbar-disable-button {
14695 .ios .searchbar-expandable .searchbar-inner {
14696 height: var
(--f7-searchbar-expandable-size
);
14698 .ios
.navbar-inner
.with-searchbar-expandable-enabled
.left
,
14699 .ios
.navbar-inner
.with-searchbar-expandable-enabled
.title
,
14700 .ios .navbar-inner.with-searchbar-expandable-enabled .right {
14701 transform: translateY
(calc
(-1 * var
(--f7-navbar-height
)));
14705 .ios .searchbar-expandable.searchbar-enabled {
14707 height: var
(--f7-searchbar-expandable-size
);
14708 pointer-events: auto
;
14710 .md
.searchbar-icon
,
14711 .md .searchbar-disable-button {
14712 position: absolute
;
14713 right: calc
(-4px + var
(--f7-safe-area-right
));
14715 transition-duration: 300ms;
14717 .md .searchbar-icon {
14723 .md .searchbar-icon:after {
14724 content: 'search_md';
14727 .md .searchbar-disable-button {
14730 transform: rotate
(-90deg) scale
(0.5);
14731 font-size: 0 !important
;
14734 color: var
(--f7-searchbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
14736 .md .searchbar-disable-button:before {
14740 position: absolute
;
14743 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
14744 background-repeat: no-repeat
;
14745 background-position: center
;
14746 background-size: 100% 100%;
14748 pointer-events: none
;
14749 transition-duration: 600ms;
14751 .md .searchbar-disable-button.active-state:before {
14753 transition-duration: 150ms;
14755 .md .searchbar-disable-button:after {
14756 font-family: 'framework7-core-icons';
14757 font-weight: normal
;
14758 font-style: normal
;
14760 letter-spacing: normal
;
14761 text-transform: none
;
14762 white-space: nowrap
;
14765 -webkit-font-smoothing: antialiased
;
14766 text-rendering: optimizeLegibility
;
14767 -moz-osx-font-smoothing: grayscale
;
14768 -moz-font-feature-settings: "liga";
14769 font-feature-settings: "liga";
14770 text-align: center
;
14776 content: "arrow_right_md";
14778 .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button {
14779 transform: rotate
(0deg) scale
(1);
14780 pointer-events: auto
;
14783 .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon {
14785 transform: rotate
(90deg) scale
(0.5);
14788 --f7-searchbar-input-extra-padding-left: 17px;
14790 .md .searchbar .input-clear-button {
14796 .md .searchbar .input-clear-button:before {
14800 position: absolute
;
14803 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
14804 background-repeat: no-repeat
;
14805 background-position: center
;
14806 background-size: 100% 100%;
14808 pointer-events: none
;
14809 transition-duration: 600ms;
14811 .md .searchbar .input-clear-button.active-state:before {
14813 transition-duration: 150ms;
14815 .md .searchbar .input-clear-button:after {
14817 content: 'delete_md';
14820 .md .searchbar .input-clear-button:before {
14824 .md
.page
> .searchbar
,
14825 .md
.subnavbar
.searchbar
,
14826 .md .searchbar-expandable {
14827 --f7-searchbar-input-extra-padding-left: calc
(17px + 8px);
14829 .md
.page
> .searchbar
.searchbar-icon
,
14830 .md
.subnavbar
.searchbar
.searchbar-icon
,
14831 .md
.searchbar-expandable
.searchbar-icon
,
14832 .md
.page
> .searchbar
.searchbar-disable-button
,
14833 .md
.subnavbar
.searchbar
.searchbar-disable-button
,
14834 .md .searchbar-expandable .searchbar-disable-button {
14835 right: calc
(-4px + 8px + var
(--f7-safe-area-right
));
14837 .md .searchbar-expandable {
14838 --f7-searchbar-expandable-size: var
(--f7-searchbar-height
);
14842 border-radius: calc
(var
(--f7-searchbar-expandable-size
));
14843 width: calc
(var
(--f7-searchbar-expandable-size
));
14844 margin-top: calc
(var
(--f7-searchbar-expandable-size
) * -1 / 2);
14845 transform: translate3d
(0px, 0px, 0px);
14847 margin-right: calc
(var
(--f7-searchbar-expandable-size
) * -1);
14849 .md .searchbar-expandable.searchbar-enabled {
14853 pointer-events: auto
;
14859 .aurora
.searchbar input
[type
="search"],
14860 .aurora .searchbar input[type="text"] {
14863 .aurora .searchbar .input-clear-button {
14867 .aurora .searchbar-icon {
14870 position: absolute
;
14876 .aurora .searchbar-icon:after {
14877 content: 'search_aurora';
14880 .aurora .searchbar-disable-button {
14883 transform: translate3d
(0, 0, 0);
14884 transition-duration: 300ms;
14885 color: var
(--f7-searchbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
14888 .aurora .searchbar-disable-button.active-state {
14889 transition-duration: 0ms;
14890 opacity: 0.3 !important
;
14892 .aurora .searchbar-enabled .searchbar-disable-button {
14893 pointer-events: auto
;
14897 .aurora .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
14898 transition-duration: 300ms !important
;
14900 .aurora .searchbar-expandable {
14901 --f7-searchbar-expandable-size: var
(--f7-searchbar-height
);
14906 transform: translate3d
(0, 0%, 0);
14909 .aurora .searchbar-expandable .searchbar-disable-button {
14914 .aurora .searchbar-expandable .searchbar-inner {
14915 height: var
(--f7-searchbar-expandable-size
);
14917 .aurora .searchbar-expandable.searchbar-enabled {
14919 pointer-events: auto
;
14921 /* === Messages === */
14923 --f7-messages-content-bg-color: #fff;
14924 --f7-message-text-header-text-color: inherit
;
14925 --f7-message-text-header-opacity: 0.65;
14926 --f7-message-text-header-font-size: 12px;
14927 --f7-message-text-footer-text-color: inherit
;
14928 --f7-message-text-footer-opacity: 0.65;
14929 --f7-message-text-footer-font-size: 12px;
14930 --f7-message-bubble-line-height: 1.2;
14931 --f7-message-header-font-size: 12px;
14932 --f7-message-footer-font-size: 11px;
14933 --f7-message-name-font-size: 12px;
14934 --f7-message-name-font-weight: inherit
;
14935 --f7-message-typing-indicator-bg-color: #000;
14936 --f7-message-avatar-border-radius: 50%;
14937 --f7-messages-title-font-weight: inherit
;
14939 --f7-message-sent-bg-color: var(--f7-theme-color);
14941 --f7-message-sent-text-color: #fff;
14942 --f7-message-received-bg-color: #e5e5ea;
14943 --f7-message-received-text-color: #000;
14947 --f7-messages-content-bg-color: transparent
;
14948 --f7-message-received-bg-color: #333;
14949 --f7-message-received-text-color: #fff;
14950 --f7-message-typing-indicator-bg-color: #fff;
14953 --f7-messages-title-text-color: #8e8e93;
14954 --f7-messages-title-font-size: 11px;
14955 --f7-message-header-text-color: #8e8e93;
14956 --f7-message-footer-text-color: #8e8e93;
14957 --f7-message-name-text-color: #8e8e93;
14958 --f7-message-avatar-size: 29px;
14959 --f7-message-margin: 10px;
14960 --f7-message-bubble-min-height: 32px;
14961 --f7-message-bubble-font-size: 17px;
14962 --f7-message-bubble-border-radius: 16px;
14963 --f7-message-bubble-padding-vertical: 6px;
14964 --f7-message-bubble-padding-horizontal: 16px;
14965 --f7-message-typing-indicator-opacity: 0.35;
14968 --f7-messages-title-text-color: rgba
(0, 0, 0, 0.51);
14969 --f7-messages-title-font-size: 12px;
14970 --f7-message-header-text-color: rgba
(0, 0, 0, 0.51);
14971 --f7-message-footer-text-color: rgba
(0, 0, 0, 0.51);
14972 --f7-message-name-text-color: rgba
(0, 0, 0, 0.51);
14973 --f7-message-avatar-size: 32px;
14974 --f7-message-margin: 16px;
14975 --f7-message-bubble-min-height: 32px;
14976 --f7-message-bubble-font-size: 16px;
14977 --f7-message-bubble-border-radius: 4px;
14978 --f7-message-bubble-padding-vertical: 6px;
14979 --f7-message-bubble-padding-horizontal: 8px;
14980 --f7-message-typing-indicator-opacity: 0.6;
14984 --f7-messages-title-text-color: rgba
(255, 255, 255, 0.54);
14985 --f7-message-header-text-color: rgba
(255, 255, 255, 0.54);
14986 --f7-message-name-text-color: rgba
(255, 255, 255, 0.54);
14987 --f7-message-footer-text-color: rgba
(255, 255, 255, 0.54);
14990 --f7-messages-title-text-color: rgba
(0, 0, 0, 0.51);
14991 --f7-messages-title-font-size: 12px;
14992 --f7-message-header-text-color: rgba
(0, 0, 0, 0.51);
14993 --f7-message-footer-text-color: rgba
(0, 0, 0, 0.51);
14994 --f7-message-name-text-color: rgba
(0, 0, 0, 0.51);
14995 --f7-message-avatar-size: 24px;
14996 --f7-message-margin: 10px;
14997 --f7-message-bubble-min-height: 28px;
14998 --f7-message-bubble-font-size: 13px;
14999 --f7-message-bubble-line-height: 1.4;
15000 --f7-message-bubble-border-radius: 14px;
15001 --f7-message-bubble-padding-vertical: 5px;
15002 --f7-message-bubble-padding-horizontal: 10px;
15003 --f7-message-typing-indicator-opacity: 0.5;
15005 .aurora
.theme-dark
,
15006 .aurora.theme-dark {
15007 --f7-messages-title-text-color: rgba
(255, 255, 255, 0.52);
15008 --f7-message-header-text-color: rgba
(255, 255, 255, 0.52);
15009 --f7-message-name-text-color: rgba
(255, 255, 255, 0.52);
15010 --f7-message-footer-text-color: rgba
(255, 255, 255, 0.52);
15014 background: var
(--f7-messages-content-bg-color
);
15018 flex-direction: column
;
15020 position: relative
;
15025 margin-top: var
(--f7-message-margin
);
15027 .messages-title:last-child
,
15028 .message:last-child {
15029 margin-bottom: var
(--f7-message-margin
);
15032 text-align: center
;
15035 color: var
(--f7-messages-title-text-color
);
15036 font-size: var
(--f7-messages-title-font-size
);
15037 font-weight: var
(--f7-messages-title-font-weight
);
15041 box-sizing: border-box
;
15043 align-items: flex-end
;
15044 position: relative
;
15046 transform: translate3d
(0, 0, 0);
15049 border-radius: var
(--f7-message-avatar-border-radius
);
15050 position: relative
;
15051 background-size: cover
;
15052 align-self: flex-end
;
15054 width: var
(--f7-message-avatar-size
);
15055 height: var
(--f7-message-avatar-size
);
15058 position: relative
;
15060 flex-direction: column
;
15068 color: var
(--f7-message-header-text-color
);
15069 font-size: var
(--f7-message-header-font-size
);
15072 color: var
(--f7-message-footer-text-color
);
15073 font-size: var
(--f7-message-footer-font-size
);
15074 margin-bottom: -1em;
15077 color: var
(--f7-message-name-text-color
);
15078 font-size: var
(--f7-message-name-font-size
);
15079 font-weight: var
(--f7-message-name-font-weight
);
15082 box-sizing: border-box
;
15083 word-break: break-word
;
15085 flex-direction: column
;
15086 position: relative
;
15087 line-height: var
(--f7-message-bubble-line-height
);
15088 font-size: var
(--f7-message-bubble-font-size
);
15089 border-radius: var
(--f7-message-bubble-border-radius
);
15090 padding: var
(--f7-message-bubble-padding-vertical
) var
(--f7-message-bubble-padding-horizontal
);
15091 min-height: var
(--f7-message-bubble-min-height
);
15093 .message-image img {
15099 .message-text-header
,
15100 .message-text-footer {
15103 .message-text-header {
15104 color: var
(--f7-message-text-header-text-color
);
15105 opacity: var
(--f7-message-text-header-opacity
);
15106 font-size: var
(--f7-message-text-header-font-size
);
15108 .message-text-footer {
15109 color: var
(--f7-message-text-footer-text-color
);
15110 opacity: var
(--f7-message-text-footer-opacity
);
15111 font-size: var
(--f7-message-text-footer-font-size
);
15118 flex-direction: row
;
15119 align-self: flex-start
;
15121 .message-sent .message-bubble {
15122 color: var
(--f7-message-sent-text-color
);
15123 background: var
(--f7-message-sent-bg-color
, var
(--f7-theme-color
));
15125 .message-sent .message-content {
15126 align-items: flex-start
;
15128 .message-sent.message-tail .message-bubble {
15129 border-radius: var
(--f7-message-bubble-border-radius
) var
(--f7-message-bubble-border-radius
) 0 var
(--f7-message-bubble-border-radius
);
15131 .message-received {
15132 flex-direction: row-reverse
;
15133 align-self: flex-end
;
15135 .message-received .message-bubble {
15136 color: var
(--f7-message-received-text-color
);
15137 background: var
(--f7-message-received-bg-color
);
15139 .message-received .message-content {
15140 align-items: flex-end
;
15142 .message-received.message-tail .message-bubble {
15143 border-radius: var
(--f7-message-bubble-border-radius
) var
(--f7-message-bubble-border-radius
) var
(--f7-message-bubble-border-radius
) 0;
15145 .message:not(.message-last) .message-avatar {
15148 .message:not(.message-first) .message-name {
15151 .message.message-same-name .message-name {
15154 .message.message-same-header .message-header {
15157 .message.message-same-footer .message-footer {
15160 .message-appear-from-bottom {
15161 animation: message-appear-from-bottom
300ms;
15163 .message-appear-from-top {
15164 animation: message-appear-from-top
300ms;
15166 .message-typing-indicator {
15167 display: inline-block
;
15169 vertical-align: middle
;
15171 .message-typing-indicator > div {
15172 display: inline-block
;
15173 position: relative
;
15174 background: var
(--f7-message-typing-indicator-bg-color
);
15175 opacity: var
(--f7-message-typing-indicator-opacity
);
15176 vertical-align: middle
;
15177 border-radius: 50%;
15179 @keyframes message-appear-from-bottom
{
15181 transform: translate3d
(0, 100%, 0);
15184 transform: translate3d
(0, 0, 0);
15187 @keyframes message-appear-from-top
{
15189 transform: translate3d
(0, -100%, 0);
15192 transform: translate3d
(0, 0, 0);
15195 .ios
.messages-title b
,
15196 .ios
.message-header b
,
15197 .ios
.message-footer b
,
15198 .ios .message-name b {
15201 .ios
.message-header
,
15202 .ios .message-name {
15203 margin-bottom: 3px;
15205 .ios .message-footer {
15208 .ios .message-bubble {
15211 .ios .message-image {
15212 margin: var
(--f7-message-bubble-padding-vertical
) calc
(-1 * var
(--f7-message-bubble-padding-horizontal
));
15214 .ios .message-image:first-child {
15215 margin-top: calc
(-1 * var
(--f7-message-bubble-padding-vertical
));
15217 .ios .message-image:first-child img {
15218 border-top-left-radius: var
(--f7-message-bubble-border-radius
);
15219 border-top-right-radius: var
(--f7-message-bubble-border-radius
);
15221 .ios .message-image:last-child {
15222 margin-bottom: calc
(-1 * var
(--f7-message-bubble-padding-vertical
));
15224 .ios .message-image:last-child img {
15225 border-bottom-left-radius: var
(--f7-message-bubble-border-radius
);
15226 border-bottom-right-radius: var
(--f7-message-bubble-border-radius
);
15228 .ios .message-text-header {
15229 margin-bottom: 3px;
15231 .ios .message-text-footer {
15234 .ios .message-received {
15235 margin-left: calc
(10px + var
(--f7-safe-area-left
));
15237 .ios
.message-received
.message-header
,
15238 .ios
.message-received
.message-footer
,
15239 .ios .message-received .message-name {
15240 margin-left: var
(--f7-message-bubble-padding-horizontal
);
15242 .ios .message-received .message-bubble {
15243 padding-left: calc
(var
(--f7-message-bubble-padding-horizontal
) + 6px);
15244 -webkit-mask-box-image: url
("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%;
15246 .ios .message-received .message-image {
15247 margin-left: calc
(-1 * (var
(--f7-message-bubble-padding-horizontal
) + 6px));
15249 .ios .message-received.message-tail:not(.message-typing) .message-bubble {
15250 -webkit-mask-box-image: url
("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%;
15252 .ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img {
15253 border-bottom-left-radius: 0px;
15255 .ios .message-sent {
15256 margin-right: calc
(10px + var
(--f7-safe-area-right
));
15258 .ios
.message-sent
.message-header
,
15259 .ios
.message-sent
.message-footer
,
15260 .ios .message-sent .message-name {
15261 margin-right: var
(--f7-message-bubble-padding-horizontal
);
15263 .ios .message-sent .message-bubble {
15264 padding-right: calc
(var
(--f7-message-bubble-padding-horizontal
) + 6px);
15265 -webkit-mask-box-image: url
("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%;
15267 .ios .message-sent .message-image {
15268 margin-right: calc
(-1 * (var
(--f7-message-bubble-padding-horizontal
) + 6px));
15270 .ios .message-sent.message-tail .message-bubble {
15271 -webkit-mask-box-image: url
("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%;
15273 .ios .message-sent.message-tail .message-bubble .message-image:last-child img {
15274 border-bottom-right-radius: 0px;
15276 .ios .message + .message:not(.message-first) {
15279 .ios
.message-received
.message-typing
.message-content:after
,
15280 .ios .message-received.message-typing .message-content:before {
15282 position: absolute
;
15283 background: var
(--f7-message-received-bg-color
);
15284 border-radius: 50%;
15286 .ios .message-received.message-typing .message-content:after {
15292 .ios .message-received.message-typing .message-content:before {
15298 .ios .message-typing-indicator > div {
15302 .ios .message-typing-indicator > div + div {
15305 .ios .message-typing-indicator > div:nth-child(1) {
15306 animation: ios-message-typing-indicator
900ms infinite
;
15308 .ios .message-typing-indicator > div:nth-child(2) {
15309 animation: ios-message-typing-indicator
900ms 150ms infinite
;
15311 .ios .message-typing-indicator > div:nth-child(3) {
15312 animation: ios-message-typing-indicator
900ms 300ms infinite
;
15314 @keyframes ios-message-typing-indicator
{
15325 .md
.messages-title b
,
15326 .md
.message-header b
,
15327 .md
.message-footer b
,
15328 .md .message-name b {
15331 .md
.message-header
,
15332 .md .message-name {
15333 margin-bottom: 2px;
15335 .md .message-footer {
15338 .md .message-text-header {
15339 margin-bottom: 4px;
15341 .md .message-text-footer {
15344 .md
.message-received
.message-tail
.message-bubble:before
,
15345 .md .message-sent.message-tail .message-bubble:before {
15346 position: absolute
;
15352 .md .message-received {
15353 margin-left: calc
(8px + var
(--f7-safe-area-left
));
15355 .md .message-received .message-avatar + .message-content {
15356 margin-left: var
(--f7-message-bubble-padding-horizontal
);
15358 .md .message-received.message-tail .message-bubble:before {
15359 border-left: 8px solid transparent
;
15360 border-right: 0 solid transparent
;
15361 border-bottom: 8px solid var
(--f7-message-received-bg-color
);
15364 .md .message-sent {
15365 margin-right: calc
(8px + var
(--f7-safe-area-right
));
15367 .md .message-sent .message-avatar + .message-content {
15368 margin-right: var
(--f7-message-bubble-padding-horizontal
);
15370 .md .message-sent.message-tail .message-bubble:before {
15371 border-left: 0 solid transparent
;
15372 border-right: 8px solid transparent
;
15373 border-bottom: 8px solid var
(--f7-message-sent-bg-color
, var
(--f7-theme-color
));
15376 .md .message + .message:not(.message-first) {
15379 .md .message-typing-indicator > div {
15383 .md .message-typing-indicator > div + div {
15386 .md .message-typing-indicator > div:nth-child(1) {
15387 animation: md-message-typing-indicator
900ms infinite
;
15389 .md .message-typing-indicator > div:nth-child(2) {
15390 animation: md-message-typing-indicator
900ms 150ms infinite
;
15392 .md .message-typing-indicator > div:nth-child(3) {
15393 animation: md-message-typing-indicator
900ms 300ms infinite
;
15395 @keyframes md-message-typing-indicator
{
15397 transform: translateY
(0%);
15400 transform: translateY
(-5px);
15403 transform: translateY
(0%);
15406 .aurora
.messages-title b
,
15407 .aurora
.message-header b
,
15408 .aurora
.message-footer b
,
15409 .aurora .message-name b {
15412 .aurora
.message-header
,
15413 .aurora .message-name {
15414 margin-bottom: 2px;
15416 .aurora .message-footer {
15419 .aurora .message-text-header {
15420 margin-bottom: 2px;
15422 .aurora .message-text-footer {
15425 .aurora
.message-received
.message-tail
.message-bubble:before
,
15426 .aurora .message-sent.message-tail .message-bubble:before {
15427 position: absolute
;
15433 .aurora .message-image {
15434 margin: var
(--f7-message-bubble-padding-vertical
) calc
(-1 * var
(--f7-message-bubble-padding-horizontal
) + 4px);
15436 .aurora .message-image:first-child {
15437 margin-top: calc
(-1 * var
(--f7-message-bubble-padding-vertical
) + 4px);
15439 .aurora .message-image:first-child img {
15440 border-top-left-radius: var
(--f7-message-bubble-border-radius
);
15441 border-top-right-radius: var
(--f7-message-bubble-border-radius
);
15443 .aurora .message-image:last-child {
15444 margin-bottom: calc
(-1 * var
(--f7-message-bubble-padding-vertical
) + 4px);
15446 .aurora .message-image:last-child img {
15447 border-bottom-left-radius: var
(--f7-message-bubble-border-radius
);
15448 border-bottom-right-radius: var
(--f7-message-bubble-border-radius
);
15450 .aurora .message-received {
15451 margin-left: calc
(15px + var
(--f7-safe-area-left
));
15453 .aurora .message-received .message-avatar + .message-content {
15456 .aurora
.message-received
.message-header
,
15457 .aurora
.message-received
.message-footer
,
15458 .aurora .message-received .message-name {
15459 margin-left: var
(--f7-message-bubble-padding-horizontal
);
15461 .aurora .message-received.message-tail .message-bubble:before {
15462 border-left: 6px solid transparent
;
15463 border-right: 0 solid transparent
;
15464 border-bottom: 6px solid var
(--f7-message-received-bg-color
);
15466 transform: translate
(2px, 0px) rotate
(-15deg);
15467 transform-origin: right bottom
;
15469 .aurora .message-sent {
15470 margin-right: calc
(15px + var
(--f7-safe-area-right
));
15472 .aurora .message-sent .message-avatar + .message-content {
15475 .aurora
.message-sent
.message-header
,
15476 .aurora
.message-sent
.message-footer
,
15477 .aurora .message-sent .message-name {
15478 margin-right: var
(--f7-message-bubble-padding-horizontal
);
15480 .aurora .message-sent.message-tail .message-bubble:before {
15481 border-left: 0 solid transparent
;
15482 border-right: 6px solid transparent
;
15483 border-bottom: 6px solid var
(--f7-message-sent-bg-color
, var
(--f7-theme-color
));
15485 transform: translate
(-2px, 0px) rotate
(15deg);
15486 transform-origin: left bottom
;
15488 .aurora .message + .message:not(.message-first) {
15491 .aurora .message-typing-indicator > div {
15495 .aurora .message-typing-indicator > div + div {
15498 .aurora .message-typing-indicator > div:nth-child(1) {
15499 animation: aurora-message-typing-indicator
900ms infinite
;
15501 .aurora .message-typing-indicator > div:nth-child(2) {
15502 animation: aurora-message-typing-indicator
900ms 150ms infinite
;
15504 .aurora .message-typing-indicator > div:nth-child(3) {
15505 animation: aurora-message-typing-indicator
900ms 300ms infinite
;
15507 @keyframes aurora-message-typing-indicator
{
15509 transform: translateY
(0%);
15512 transform: translateY
(-5px);
15515 transform: translateY
(0%);
15518 /* === Messagebar === */
15520 --f7-messagebar-bg-color: #fff;
15521 --f7-messagebar-shadow-image: none
;
15522 --f7-messagebar-textarea-bg-color: transparent
;
15523 --f7-messagebar-attachments-height: 155px;
15524 --f7-messagebar-attachment-height: 155px;
15525 --f7-messagebar-attachment-landscape-height: 120px;
15526 --f7-messagebar-sheet-height: 252px;
15527 --f7-messagebar-sheet-landscape-height: 192px;
15529 --f7-messagebar-inner-padding-left: var(--f7-toolbar-inner-padding-left);
15530 --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
15535 --f7-messagebar-bg-color: var
(--f7-bars-bg-color
);
15538 --f7-messagebar-height: 44px;
15539 --f7-messagebar-font-size: 17px;
15541 --f7-messagebar-link-color: var(--f7-theme-color);
15543 --f7-messagebar-border-color: transparent
;
15544 --f7-messagebar-textarea-border-radius: 17px;
15545 --f7-messagebar-textarea-padding: 6px 15px;
15546 --f7-messagebar-textarea-height: 34px;
15547 --f7-messagebar-textarea-text-color: #000;
15548 --f7-messagebar-textarea-font-size: 17px;
15549 --f7-messagebar-textarea-line-height: 20px;
15550 --f7-messagebar-textarea-border: 1px solid
#c8c8cd;
15551 --f7-messagebar-sheet-bg-color: #d1d5da;
15552 --f7-messagebar-attachments-border-color: #c8c8cd;
15553 --f7-messagebar-attachment-border-radius: 12px;
15557 --f7-messagebar-textarea-text-color: #fff;
15558 --f7-messagebar-textarea-border: 1px solid var
(--f7-bars-border-color
);
15559 --f7-messagebar-attachments-border-color: var
(--f7-bars-border-color
);
15562 --f7-messagebar-height: 48px;
15563 --f7-messagebar-font-size: 16px;
15564 --f7-messagebar-link-color: #333;
15565 --f7-messagebar-border-color: #d1d1d1;
15566 --f7-messagebar-textarea-border-radius: 0px;
15567 --f7-messagebar-textarea-padding: 5px 8px;
15568 --f7-messagebar-textarea-height: 32px;
15569 --f7-messagebar-textarea-text-color: #333;
15570 --f7-messagebar-textarea-font-size: 16px;
15571 --f7-messagebar-textarea-line-height: 22px;
15572 --f7-messagebar-textarea-border: 1px solid transparent
;
15573 --f7-messagebar-sheet-bg-color: #fff;
15574 --f7-messagebar-attachments-border-color: #ddd;
15575 --f7-messagebar-attachment-border-radius: 4px;
15579 --f7-messagebar-border-color: #282829;
15580 --f7-messagebar-link-color: rgba
(255, 255, 255, 0.87);
15581 --f7-messagebar-textarea-text-color: rgba
(255, 255, 255, 0.87);
15582 --f7-messagebar-attachments-border-color: rgba
(255, 255, 255, 0.2);
15585 --f7-messagebar-height: 38px;
15586 --f7-messagebar-font-size: 14px;
15588 --f7-messagebar-link-color: var(--f7-theme-color);
15590 --f7-messagebar-border-color: transparent
;
15591 --f7-messagebar-textarea-border-radius: 12px;
15592 --f7-messagebar-textarea-padding: 3px 10px;
15593 --f7-messagebar-textarea-height: 24px;
15594 --f7-messagebar-textarea-text-color: #000;
15595 --f7-messagebar-textarea-font-size: 13px;
15596 --f7-messagebar-textarea-line-height: 16px;
15597 --f7-messagebar-textarea-border: 1px solid
#c8c8cd;
15598 --f7-messagebar-sheet-bg-color: #fff;
15599 --f7-messagebar-attachments-border-color: #c8c8cd;
15600 --f7-messagebar-attachment-border-radius: 12px;
15602 .aurora
.theme-dark
,
15603 .aurora.theme-dark {
15604 --f7-messagebar-textarea-text-color: #fff;
15605 --f7-messagebar-textarea-border: 1px solid var
(--f7-bars-border-color
);
15606 --f7-messagebar-attachments-border-color: var
(--f7-bars-border-color
);
15609 transform: translate3d
(0, 0, 0);
15610 background: var
(--f7-messagebar-bg-color
);
15612 min-height: var
(--f7-messagebar-height
);
15613 font-size: var
(--f7-messagebar-font-size
);
15614 padding-bottom: var
(--f7-safe-area-bottom
);
15617 .messagebar:before {
15619 position: absolute
;
15620 background-color: var
(--f7-messagebar-border-color
);
15629 transform-origin: 50% 0%;
15630 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
15632 .messagebar:after {
15634 position: absolute
;
15640 pointer-events: none
;
15641 background: var
(--f7-messagebar-shadow-image
);
15643 .messagebar
.no-hairline:before
,
15644 .messagebar.no-border:before {
15645 display: none
!important
;
15647 .messagebar
.no-shadow:after
,
15648 .messagebar.toolbar-hidden:after {
15649 display: none
!important
;
15651 .messagebar .toolbar-inner {
15653 position: relative
;
15656 padding-left: calc
(var
(--f7-messagebar-inner-padding-left
, var
(--f7-toolbar-inner-padding-left
)) + var
(--f7-safe-area-left
));
15657 padding-right: calc
(var
(--f7-messagebar-inner-padding-right
, var
(--f7-toolbar-inner-padding-right
)) + var
(--f7-safe-area-right
));
15658 flex-direction: row-reverse
;
15660 .messagebar.messagebar-sheet-visible > .toolbar-inner {
15663 .messagebar .messagebar-area {
15667 position: relative
;
15669 .messagebar textarea {
15672 background-color: var
(--f7-messagebar-textarea-bg-color
);
15673 border-radius: var
(--f7-messagebar-textarea-border-radius
);
15674 padding: var
(--f7-messagebar-textarea-padding
);
15675 height: var
(--f7-messagebar-textarea-height
);
15676 color: var
(--f7-messagebar-textarea-text-color
);
15677 font-size: var
(--f7-messagebar-textarea-font-size
);
15678 line-height: var
(--f7-messagebar-textarea-line-height
);
15679 border: var
(--f7-messagebar-textarea-border
);
15681 .messagebar a.link {
15682 align-self: flex-end
;
15684 color: var
(--f7-messagebar-link-color
, var
(--f7-theme-color
));
15686 .messagebar-attachments {
15688 will-change: scroll-position
;
15690 -webkit-overflow-scrolling: touch
;
15692 white-space: nowrap
;
15693 box-sizing: border-box
;
15694 position: relative
;
15696 .messagebar:not(.messagebar-attachments-visible) .messagebar-attachments {
15699 .messagebar-attachment {
15700 background-size: cover
;
15701 background-position: center
;
15702 background-repeat: no-repeat
;
15703 display: inline-block
;
15704 vertical-align: middle
;
15705 white-space: normal
;
15706 height: var
(--f7-messagebar-attachment-height
);
15707 position: relative
;
15708 border-radius: var
(--f7-messagebar-attachment-border-radius
);
15710 @media (orientation: landscape
) {
15711 .messagebar-attachment {
15712 height: var
(--f7-messagebar-attachment-landscape-height
);
15715 .messagebar-attachment img {
15719 border-radius: var
(--f7-messagebar-attachment-border-radius
);
15721 .messagebar-attachment + .messagebar-attachment {
15724 .messagebar-sheet {
15725 will-change: scroll-position
;
15727 -webkit-overflow-scrolling: touch
;
15730 flex-direction: column
;
15731 align-content: flex-start
;
15732 height: var
(--f7-messagebar-sheet-height
);
15733 background-color: var
(--f7-messagebar-sheet-bg-color
);
15734 padding-left: var
(--f7-safe-area-left
);
15735 padding-right: var
(--f7-safe-area-right
);
15737 @media (orientation: landscape
) {
15738 .messagebar-sheet {
15739 height: var
(--f7-messagebar-sheet-landscape-height
);
15742 .messagebar-sheet-image
,
15743 .messagebar-sheet-item {
15744 box-sizing: border-box
;
15747 position: relative
;
15749 height: calc
((var
(--f7-messagebar-sheet-height
) - 2px) / 2);
15750 width: calc
((var
(--f7-messagebar-sheet-height
) - 2px) / 2);
15753 @media (orientation: landscape
) {
15754 .messagebar-sheet-image
,
15755 .messagebar-sheet-item {
15756 width: calc
((var
(--f7-messagebar-sheet-landscape-height
) - 2px) / 2);
15757 height: calc
((var
(--f7-messagebar-sheet-landscape-height
) - 2px) / 2);
15760 .messagebar-sheet-image
.icon-checkbox
,
15761 .messagebar-sheet-item
.icon-checkbox
,
15762 .messagebar-sheet-image
.icon-radio
,
15763 .messagebar-sheet-item .icon-radio {
15764 position: absolute
;
15768 .messagebar-sheet-image {
15769 background-size: cover
;
15770 background-position: center
;
15771 background-repeat: no-repeat
;
15773 .messagebar-attachment-delete {
15775 position: absolute
;
15776 border-radius: 50%;
15777 box-sizing: border-box
;
15779 box-shadow: 0px 0px 2px rgba
(0, 0, 0, 0.2);
15781 .messagebar-attachment-delete:after
,
15782 .messagebar-attachment-delete:before {
15783 position: absolute
;
15788 .messagebar-attachment-delete:after {
15789 transform: rotate
(45deg);
15791 .messagebar-attachment-delete:before {
15792 transform: rotate
(-45deg);
15794 .messagebar:not(.messagebar-sheet-visible) .messagebar-sheet {
15798 --f7-page-toolbar-bottom-offset: var
(--f7-messagebar-height
);
15800 .ios .messagebar a.link.icon-only:first-child {
15803 .ios .messagebar a.link.icon-only:last-child {
15804 margin-right: -8px;
15806 .ios .messagebar a.link:not(.icon-only) + .messagebar-area {
15809 .ios .messagebar .messagebar-area + a.link:not(.icon-only) {
15812 .ios .messagebar-area {
15814 margin-bottom: 5px;
15816 .ios .messagebar-attachments {
15818 border-radius: var
(--f7-messagebar-textarea-border-radius
) var
(--f7-messagebar-textarea-border-radius
) 0 0;
15819 border: 1px solid var
(--f7-messagebar-attachments-border-color
);
15820 border-bottom: none
;
15822 .ios .messagebar-attachments-visible .messagebar-attachments + textarea {
15823 border-radius: 0 0 var
(--f7-messagebar-textarea-border-radius
) var
(--f7-messagebar-textarea-border-radius
);
15825 .ios .messagebar-attachment {
15828 .ios .messagebar-attachment-delete {
15833 background: #7d7e80;
15834 border: 2px solid
#fff;
15836 .ios
.messagebar-attachment-delete:after
,
15837 .ios .messagebar-attachment-delete:before {
15844 .md .messagebar-attachments {
15846 border-bottom: 1px solid var
(--f7-messagebar-attachments-border-color
);
15848 .md .messagebar-area {
15850 margin-bottom: 8px;
15852 .md
.messagebar-sheet-image
.icon-checkbox
,
15853 .md .messagebar-sheet-item .icon-checkbox {
15854 border-color: #fff;
15855 background: rgba
(255, 255, 255, 0.25);
15856 box-shadow: 0px 0px 10px rgba
(0, 0, 0, 0.5);
15858 .md .messagebar-attachment-delete {
15863 background-color: var
(--f7-theme-color
);
15864 border-radius: 4px;
15866 .md
.messagebar-attachment-delete:after
,
15867 .md .messagebar-attachment-delete:before {
15874 .aurora .messagebar a.link + .messagebar-area {
15877 .aurora .messagebar .messagebar-area + a.link {
15880 .aurora .messagebar-area {
15882 margin-bottom: 5px;
15884 .aurora
.messagebar-sheet-image
.icon-checkbox
,
15885 .aurora .messagebar-sheet-item .icon-checkbox {
15886 background: rgba
(255, 255, 255, 0.25);
15888 .aurora .messagebar-attachments {
15890 border-radius: var
(--f7-messagebar-textarea-border-radius
) var
(--f7-messagebar-textarea-border-radius
) 0 0;
15891 border: 1px solid var
(--f7-messagebar-attachments-border-color
);
15892 border-bottom: none
;
15894 .aurora .messagebar-attachments-visible .messagebar-attachments + textarea {
15895 border-radius: 0 0 var
(--f7-messagebar-textarea-border-radius
) var
(--f7-messagebar-textarea-border-radius
);
15897 .aurora .messagebar-attachment {
15900 .aurora .messagebar-attachment-delete {
15905 background: #808080;
15907 .aurora
.messagebar-attachment-delete:after
,
15908 .aurora .messagebar-attachment-delete:before {
15915 /* === Swiper === */
15916 .swiper-container {
15918 position: relative
;
15922 /* Fix of Webkit flickering */
15925 .swiper-container-no-flexbox .swiper-slide {
15928 .swiper-container-vertical > .swiper-wrapper {
15929 flex-direction: column
;
15932 position: relative
;
15937 transition-property: transform
;
15938 box-sizing: content-box
;
15940 .swiper-container-android
.swiper-slide
,
15942 transform: translate3d
(0px, 0, 0);
15944 .swiper-container-multirow > .swiper-wrapper {
15947 .swiper-container-free-mode > .swiper-wrapper {
15948 transition-timing-function: ease-out
;
15955 position: relative
;
15956 transition-property: transform
;
15958 .swiper-slide-invisible-blank {
15959 visibility: hidden
;
15962 .swiper-container-autoheight
,
15963 .swiper-container-autoheight .swiper-slide {
15966 .swiper-container-autoheight .swiper-wrapper {
15967 align-items: flex-start
;
15968 transition-property: transform
, height
;
15971 .swiper-container-3d {
15972 perspective: 1200px;
15974 .swiper-container-3d
.swiper-wrapper
,
15975 .swiper-container-3d
.swiper-slide
,
15976 .swiper-container-3d
.swiper-slide-shadow-left
,
15977 .swiper-container-3d
.swiper-slide-shadow-right
,
15978 .swiper-container-3d
.swiper-slide-shadow-top
,
15979 .swiper-container-3d
.swiper-slide-shadow-bottom
,
15980 .swiper-container-3d .swiper-cube-shadow {
15981 transform-style: preserve-3d
;
15983 .swiper-container-3d
.swiper-slide-shadow-left
,
15984 .swiper-container-3d
.swiper-slide-shadow-right
,
15985 .swiper-container-3d
.swiper-slide-shadow-top
,
15986 .swiper-container-3d .swiper-slide-shadow-bottom {
15987 position: absolute
;
15992 pointer-events: none
;
15995 .swiper-container-3d .swiper-slide-shadow-left {
15996 background-image: linear-gradient
(to left
, rgba
(0, 0, 0, 0.5), rgba
(0, 0, 0, 0));
15998 .swiper-container-3d .swiper-slide-shadow-right {
15999 background-image: linear-gradient
(to right
, rgba
(0, 0, 0, 0.5), rgba
(0, 0, 0, 0));
16001 .swiper-container-3d .swiper-slide-shadow-top {
16002 background-image: linear-gradient
(to top
, rgba
(0, 0, 0, 0.5), rgba
(0, 0, 0, 0));
16004 .swiper-container-3d .swiper-slide-shadow-bottom {
16005 background-image: linear-gradient
(to bottom
, rgba
(0, 0, 0, 0.5), rgba
(0, 0, 0, 0));
16007 /* IE10 Windows Phone 8 Fixes */
16008 .swiper-container-wp8-horizontal
,
16009 .swiper-container-wp8-horizontal > .swiper-wrapper {
16010 touch-action: pan-y
;
16012 .swiper-container-wp8-vertical
,
16013 .swiper-container-wp8-vertical > .swiper-wrapper {
16014 touch-action: pan-x
;
16017 .swiper-container .swiper-notification {
16018 position: absolute
;
16021 pointer-events: none
;
16025 .swiper-container-coverflow .swiper-wrapper {
16026 /* Windows 8 IE 10 fix */
16027 -ms-perspective: 1200px;
16029 .swiper-container-cube {
16032 .swiper-container-cube .swiper-slide {
16033 pointer-events: none
;
16034 -webkit-backface-visibility: hidden
;
16035 backface-visibility: hidden
;
16037 visibility: hidden
;
16038 transform-origin: 0 0;
16042 .swiper-container-cube .swiper-slide .swiper-slide {
16043 pointer-events: none
;
16045 .swiper-container-cube.swiper-container-rtl .swiper-slide {
16046 transform-origin: 100% 0;
16048 .swiper-container-cube
.swiper-slide-active
,
16049 .swiper-container-cube .swiper-slide-active .swiper-slide-active {
16050 pointer-events: auto
;
16052 .swiper-container-cube
.swiper-slide-active
,
16053 .swiper-container-cube
.swiper-slide-next
,
16054 .swiper-container-cube
.swiper-slide-prev
,
16055 .swiper-container-cube .swiper-slide-next + .swiper-slide {
16056 pointer-events: auto
;
16057 visibility: visible
;
16059 .swiper-container-cube
.swiper-slide-shadow-top
,
16060 .swiper-container-cube
.swiper-slide-shadow-bottom
,
16061 .swiper-container-cube
.swiper-slide-shadow-left
,
16062 .swiper-container-cube .swiper-slide-shadow-right {
16064 -webkit-backface-visibility: hidden
;
16065 backface-visibility: hidden
;
16067 .swiper-container-cube .swiper-cube-shadow {
16068 position: absolute
;
16075 -webkit-filter: blur
(50px);
16076 filter: blur
(50px);
16079 .swiper-container-fade.swiper-container-free-mode .swiper-slide {
16080 transition-timing-function: ease-out
;
16082 .swiper-container-fade .swiper-slide {
16083 pointer-events: none
;
16084 transition-property: opacity
;
16086 .swiper-container-fade .swiper-slide .swiper-slide {
16087 pointer-events: none
;
16089 .swiper-container-fade
.swiper-slide-active
,
16090 .swiper-container-fade .swiper-slide-active .swiper-slide-active {
16091 pointer-events: auto
;
16093 .swiper-container-flip {
16096 .swiper-container-flip .swiper-slide {
16097 pointer-events: none
;
16098 -webkit-backface-visibility: hidden
;
16099 backface-visibility: hidden
;
16102 .swiper-container-flip .swiper-slide .swiper-slide {
16103 pointer-events: none
;
16105 .swiper-container-flip
.swiper-slide-active
,
16106 .swiper-container-flip .swiper-slide-active .swiper-slide-active {
16107 pointer-events: auto
;
16109 .swiper-container-flip
.swiper-slide-shadow-top
,
16110 .swiper-container-flip
.swiper-slide-shadow-bottom
,
16111 .swiper-container-flip
.swiper-slide-shadow-left
,
16112 .swiper-container-flip .swiper-slide-shadow-right {
16114 -webkit-backface-visibility: hidden
;
16115 backface-visibility: hidden
;
16118 .swiper-scrollbar {
16119 border-radius: 10px;
16120 position: relative
;
16121 -ms-touch-action: none
;
16122 background: rgba
(0, 0, 0, 0.1);
16124 .swiper-container-horizontal > .swiper-scrollbar {
16125 position: absolute
;
16132 .swiper-container-vertical > .swiper-scrollbar {
16133 position: absolute
;
16140 .swiper-scrollbar-drag {
16143 position: relative
;
16144 background: rgba
(0, 0, 0, 0.5);
16145 border-radius: 10px;
16149 .swiper-scrollbar-cursor-drag {
16152 .swiper-scrollbar-lock {
16155 .swiper-zoom-container {
16159 justify-content: center
;
16160 align-items: center
;
16161 text-align: center
;
16163 .swiper-zoom-container
> img
,
16164 .swiper-zoom-container
> svg
,
16165 .swiper-zoom-container > canvas {
16168 object-fit: contain
;
16170 .swiper-slide-zoomed {
16173 .swiper-button-prev
,
16174 .swiper-button-next {
16175 position: absolute
;
16180 text-align: center
;
16184 color: var
(--f7-theme-color
);
16186 .swiper-button-prev:after
,
16187 .swiper-button-next:after {
16188 font-family: 'framework7-core-icons';
16189 font-weight: normal
;
16190 font-style: normal
;
16192 letter-spacing: normal
;
16193 text-transform: none
;
16194 white-space: nowrap
;
16197 -webkit-font-smoothing: antialiased
;
16198 text-rendering: optimizeLegibility
;
16199 -moz-osx-font-smoothing: grayscale
;
16200 -moz-font-feature-settings: "liga";
16201 font-feature-settings: "liga";
16202 text-align: center
;
16209 .swiper-button-prev
.swiper-button-disabled
,
16210 .swiper-button-next.swiper-button-disabled {
16213 pointer-events: none
;
16215 .swiper-button-prev
,
16216 .swiper-container-rtl .swiper-button-next {
16220 .swiper-button-prev:after
,
16221 .swiper-container-rtl .swiper-button-next:after {
16222 content: 'swiper_prev';
16224 .swiper-button-next
,
16225 .swiper-container-rtl .swiper-button-prev {
16229 .swiper-button-next:after
,
16230 .swiper-container-rtl .swiper-button-prev:after {
16231 content: 'swiper_next';
16233 .swiper-button-lock {
16236 .swiper-pagination {
16237 position: absolute
;
16238 text-align: center
;
16239 transition: 300ms opacity
;
16240 transform: translate3d
(0, 0, 0);
16243 .swiper-pagination.swiper-pagination-hidden {
16246 .swiper-pagination-fraction
,
16247 .swiper-pagination-custom
,
16248 .swiper-container-horizontal > .swiper-pagination-bullets {
16253 .swiper-pagination-bullets-dynamic {
16257 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16258 transform: scale
(0.33);
16259 position: relative
;
16261 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
16262 transform: scale
(1);
16264 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
16265 transform: scale
(0.66);
16267 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
16268 transform: scale
(0.33);
16270 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
16271 transform: scale
(0.66);
16273 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
16274 transform: scale
(0.33);
16276 .swiper-pagination-bullet {
16279 display: inline-block
;
16280 border-radius: 100%;
16284 button
.swiper-pagination-bullet
{
16289 -webkit-appearance: none
;
16290 -moz-appearance: none
;
16293 .swiper-pagination-clickable .swiper-pagination-bullet {
16296 .swiper-pagination-bullet-active {
16298 background: var
(--f7-theme-color
);
16300 .swiper-container-vertical > .swiper-pagination-bullets {
16303 transform: translate3d
(0px, -50%, 0);
16305 .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
16309 .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
16311 transform: translateY
(-50%);
16314 .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16315 display: inline-block
;
16316 transition: 200ms transform
, 200ms top
;
16318 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
16321 .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
16323 transform: translateX
(-50%);
16324 white-space: nowrap
;
16326 .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16327 transition: 200ms transform
, 200ms left
;
16329 .swiper-pagination-progressbar {
16330 background: rgba
(0, 0, 0, 0.25);
16331 position: absolute
;
16333 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
16334 background: var
(--f7-theme-color
);
16335 position: absolute
;
16340 transform: scale
(0);
16341 transform-origin: left top
;
16343 .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
16344 transform-origin: right top
;
16346 .swiper-container-horizontal
> .swiper-pagination-progressbar
,
16347 .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
16353 .swiper-container-vertical
> .swiper-pagination-progressbar
,
16354 .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
16360 .swiper-pagination-lock {
16363 .preloader.swiper-lazy-preloader {
16364 position: absolute
;
16370 margin-left: -16px;
16373 /* === Photo Browser === */
16375 --f7-photobrowser-bg-color: #fff;
16376 --f7-photobrowser-bars-bg-image: none
;
16378 --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
16379 --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
16380 --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
16382 --f7-photobrowser-caption-font-size: 14px;
16383 --f7-photobrowser-caption-light-text-color: #000;
16384 --f7-photobrowser-caption-light-bg-color: rgba
(255, 255, 255, 0.8);
16385 --f7-photobrowser-caption-dark-text-color: #fff;
16386 --f7-photobrowser-caption-dark-bg-color: rgba
(0, 0, 0, 0.8);
16387 --f7-photobrowser-exposed-bg-color: #000;
16388 --f7-photobrowser-dark-bg-color: #000;
16389 --f7-photobrowser-dark-bars-bg-color: rgba
(27, 27, 27, 0.8);
16390 --f7-photobrowser-dark-bars-text-color: #fff;
16391 --f7-photobrowser-dark-bars-link-color: #fff;
16394 position: absolute
;
16401 .photo-browser-standalone.modal-in {
16402 transition-duration: 0ms;
16403 animation: photo-browser-in
400ms;
16405 .photo-browser-standalone.modal-out {
16406 transition-duration: 0ms;
16407 animation: photo-browser-out
400ms;
16409 .photo-browser-standalone
.modal-out
.swipe-close-to-bottom
,
16410 .photo-browser-standalone.modal-out.swipe-close-to-top {
16413 .photo-browser-popup
.modal-out
.swipe-close-to-bottom
,
16414 .photo-browser-popup.modal-out.swipe-close-to-top {
16415 transition-duration: 300ms;
16417 .photo-browser-popup.modal-out.swipe-close-to-bottom {
16418 transform: translate3d
(0, 100%, 0);
16420 .photo-browser-popup.modal-out.swipe-close-to-top {
16421 transform: translate3d
(0, -100vh, 0);
16423 .photo-browser-page {
16426 .photo-browser-page .toolbar {
16429 .photo-browser-popup {
16432 .photo-browser-of {
16435 .photo-browser-captions {
16436 pointer-events: none
;
16437 position: absolute
;
16440 bottom: var
(--f7-safe-area-bottom
);
16445 .photo-browser-captions.photo-browser-captions-exposed {
16448 .toolbar ~ .photo-browser-captions {
16449 bottom: calc
(var
(--f7-toolbar-height
) + var
(--f7-safe-area-bottom
));
16450 transform: translate3d
(0, 0px, 0);
16452 .toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
16453 transform: translate3d
(0, 0px, 0);
16455 .photo-browser-caption {
16456 box-sizing: border-box
;
16458 position: absolute
;
16464 text-align: center
;
16465 font-size: var
(--f7-photobrowser-caption-font-size
);
16467 .photo-browser-caption:empty {
16470 .photo-browser-caption.photo-browser-caption-active {
16473 .photo-browser-captions-light .photo-browser-caption {
16474 color: var
(--f7-photobrowser-caption-light-text-color
);
16475 background: var
(--f7-photobrowser-caption-light-bg-color
);
16477 .photo-browser-captions-dark .photo-browser-caption {
16478 color: var
(--f7-photobrowser-caption-dark-text-color
);
16479 background: var
(--f7-photobrowser-caption-dark-bg-color
);
16481 .photo-browser-swiper-container {
16482 position: absolute
;
16488 background: var
(--f7-photobrowser-bg-color
);
16490 transition-property: background-color
;
16492 .photo-browser-prev
.swiper-button-disabled
,
16493 .photo-browser-next.swiper-button-disabled {
16495 pointer-events: none
;
16497 .photo-browser-slide {
16500 position: relative
;
16503 justify-content: center
;
16504 align-items: center
;
16506 box-sizing: border-box
;
16508 .photo-browser-slide.photo-browser-transitioning {
16510 transition-property: transform
;
16512 .photo-browser-slide span.swiper-zoom-container {
16515 .photo-browser-slide img {
16522 .photo-browser-slide
.swiper-slide-active span
.swiper-zoom-container
,
16523 .photo-browser-slide
.swiper-slide-next span
.swiper-zoom-container
,
16524 .photo-browser-slide.swiper-slide-prev span.swiper-zoom-container {
16527 .photo-browser-slide
.swiper-slide-active img
,
16528 .photo-browser-slide
.swiper-slide-next img
,
16529 .photo-browser-slide.swiper-slide-prev img {
16532 .photo-browser-slide
.swiper-slide-active
.photo-browser-slide-lazy
.preloader
,
16533 .photo-browser-slide
.swiper-slide-next
.photo-browser-slide-lazy
.preloader
,
16534 .photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader {
16537 .photo-browser-slide iframe {
16541 .photo-browser-slide .preloader {
16543 position: absolute
;
16546 margin-left: -21px;
16551 .photo-browser-page
.navbar
,
16552 .view
.with-photo-browser-page
.navbar
,
16553 .photo-browser-page
.toolbar
,
16554 .view.with-photo-browser-page .toolbar {
16555 background-color: var
(--f7-photobrowser-bars-bg-color
, rgba
(var
(--f7-bars-bg-color-rgb
), 0.95));
16556 background-image: var
(--f7-photobrowser-bars-bg-image
);
16558 color: var
(--f7-photobrowser-bars-text-color
, var
(--f7-bars-text-color
));
16560 .photo-browser-page
.navbar a
,
16561 .view
.with-photo-browser-page
.navbar a
,
16562 .photo-browser-page
.toolbar a
,
16563 .view.with-photo-browser-page .toolbar a {
16564 color: var
(--f7-photobrowser-bars-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
16566 .photo-browser-exposed
.navbar
,
16567 .photo-browser-exposed .toolbar {
16569 visibility: hidden
;
16570 pointer-events: none
;
16572 .photo-browser-exposed .toolbar ~ .photo-browser-captions {
16573 transform: translate3d
(0, var
(--f7-toolbar-height
), 0);
16575 .photo-browser-exposed .photo-browser-swiper-container {
16576 background: var
(--f7-photobrowser-exposed-bg-color
);
16578 .photo-browser-exposed .photo-browser-caption {
16579 color: var
(--f7-photobrowser-caption-dark-text-color
);
16580 background: var
(--f7-photobrowser-caption-dark-bg-color
);
16582 .view.with-photo-browser-page-exposed .navbar {
16585 .photo-browser-dark
.photo-browser-swiper-container
,
16586 .photo-browser-page-dark
.photo-browser-swiper-container
,
16587 .view.with-photo-browser-page-dark .photo-browser-swiper-container {
16588 background: var
(--f7-photobrowser-dark-bg-color
);
16590 .photo-browser-dark
.navbar
,
16591 .photo-browser-page-dark
.navbar
,
16592 .view
.with-photo-browser-page-dark
.navbar
,
16593 .photo-browser-dark
.toolbar
,
16594 .photo-browser-page-dark
.toolbar
,
16595 .view.with-photo-browser-page-dark .toolbar {
16596 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
16597 --f7-link-highlight-color: var
(--f7-link-highlight-white
);
16598 background: var
(--f7-photobrowser-dark-bars-bg-color
);
16599 color: var
(--f7-photobrowser-dark-bars-text-color
);
16601 .photo-browser-dark
.navbar:before
,
16602 .photo-browser-page-dark
.navbar:before
,
16603 .view
.with-photo-browser-page-dark
.navbar:before
,
16604 .photo-browser-dark
.toolbar:before
,
16605 .photo-browser-page-dark
.toolbar:before
,
16606 .view.with-photo-browser-page-dark .toolbar:before {
16607 display: none
!important
;
16609 .photo-browser-dark
.navbar:after
,
16610 .photo-browser-page-dark
.navbar:after
,
16611 .view
.with-photo-browser-page-dark
.navbar:after
,
16612 .photo-browser-dark
.toolbar:after
,
16613 .photo-browser-page-dark
.toolbar:after
,
16614 .view.with-photo-browser-page-dark .toolbar:after {
16615 display: none
!important
;
16617 .photo-browser-dark
.navbar a
,
16618 .photo-browser-page-dark
.navbar a
,
16619 .view
.with-photo-browser-page-dark
.navbar a
,
16620 .photo-browser-dark
.toolbar a
,
16621 .photo-browser-page-dark
.toolbar a
,
16622 .view.with-photo-browser-page-dark .toolbar a {
16623 color: var
(--f7-photobrowser-dark-bars-link-color
);
16625 @keyframes photo-browser-in
{
16627 transform: translate3d
(0, 0, 0) scale
(0.5);
16631 transform: translate3d
(0, 0, 0) scale
(1.05);
16635 transform: translate3d
(0, 0, 0) scale
(1);
16639 @keyframes photo-browser-out
{
16641 transform: translate3d
(0, 0, 0) scale
(1);
16645 transform: translate3d
(0, 0, 0) scale
(1.05);
16649 transform: translate3d
(0, 0, 0) scale
(0.5);
16653 /* === Notifications === */
16655 --f7-notification-max-width: 568px;
16656 --f7-notification-subtitle-text-transform: none
;
16657 --f7-notification-subtitle-line-height: 1.35;
16658 --f7-notification-text-text-transform: none
;
16659 --f7-notification-text-font-weight: 400;
16662 --f7-notification-margin: 8px;
16663 --f7-notification-padding: 10px;
16664 --f7-notification-border-radius: 12px;
16665 --f7-notification-box-shadow: 0px 5px 25px -10px rgba
(0, 0, 0, 0.7);
16666 --f7-notification-bg-color: rgba
(250, 250, 250, 0.95);
16667 --f7-notification-translucent-bg-color-ios: rgba
(255, 255, 255, 0.65);
16668 --f7-notification-icon-size: 20px;
16669 --f7-notification-title-color: #000;
16670 --f7-notification-title-font-size: 13px;
16671 --f7-notification-title-text-transform: uppercase
;
16672 --f7-notification-title-line-height: 1.4;
16673 --f7-notification-title-font-weight: 400;
16674 --f7-notification-title-letter-spacing: 0.02em;
16675 --f7-notification-title-right-color: #444a51;
16676 --f7-notification-title-right-font-size: 13px;
16677 --f7-notification-subtitle-color: #000;
16678 --f7-notification-subtitle-font-size: 15px;
16679 --f7-notification-subtitle-font-weight: 600;
16680 --f7-notification-text-color: #000;
16681 --f7-notification-text-font-size: 15px;
16682 --f7-notification-text-line-height: 1.2;
16685 --f7-notification-margin: 0px;
16686 --f7-notification-padding: 16px;
16687 --f7-notification-border-radius: 0px;
16688 --f7-notification-box-shadow: 0 2px 4px rgba
(0, 0, 0, 0.22), 0 1px 2px rgba
(0, 0, 0, 0.24);
16689 --f7-notification-bg-color: #fff;
16690 --f7-notification-icon-size: 16px;
16691 --f7-notification-title-color: var
(--f7-theme-color
);
16692 --f7-notification-title-font-size: 12px;
16693 --f7-notification-title-text-transform: none
;
16694 --f7-notification-title-line-height: 1;
16695 --f7-notification-title-font-weight: 400;
16696 --f7-notification-title-right-color: #757575;
16697 --f7-notification-title-right-font-size: 12px;
16698 --f7-notification-subtitle-color: #212121;
16699 --f7-notification-subtitle-font-size: 14px;
16700 --f7-notification-subtitle-font-weight: 400;
16701 --f7-notification-text-color: #757575;
16702 --f7-notification-text-font-size: 14px;
16703 --f7-notification-text-line-height: 1.35;
16706 --f7-notification-margin: 10px;
16707 --f7-notification-padding: 10px;
16708 --f7-notification-border-radius: 4px;
16709 --f7-notification-box-shadow: 0px 5px 25px -10px rgba
(0, 0, 0, 0.7);
16710 --f7-notification-bg-color: #fff;
16711 --f7-notification-icon-size: 18px;
16712 --f7-notification-title-color: #000;
16713 --f7-notification-title-font-size: 13px;
16714 --f7-notification-title-text-transform: uppercase
;
16715 --f7-notification-title-line-height: 1.4;
16716 --f7-notification-title-font-weight: 500;
16717 --f7-notification-title-letter-spacing: 0.02em;
16718 --f7-notification-title-right-color: rgba
(255, 255, 255, 0.6);
16719 --f7-notification-title-right-font-size: 13px;
16720 --f7-notification-subtitle-color: #000;
16721 --f7-notification-subtitle-font-size: 12px;
16722 --f7-notification-subtitle-font-weight: 600;
16723 --f7-notification-text-color: #000;
16724 --f7-notification-text-font-size: 12px;
16725 --f7-notification-text-line-height: 1.2;
16728 position: absolute
;
16729 left: var
(--f7-notification-margin
);
16730 top: var
(--f7-notification-margin
);
16731 width: calc
(100% - var
(--f7-notification-margin
) * 2);
16737 box-sizing: border-box
;
16738 transition-property: transform
;
16740 max-width: var
(--f7-notification-max-width
);
16741 padding: var
(--f7-notification-padding
);
16742 border-radius: var
(--f7-notification-border-radius
);
16743 box-shadow: var
(--f7-notification-box-shadow
);
16744 background: var
(--f7-notification-bg-color
);
16745 margin-top: var
(--f7-statusbar-height
);
16746 --f7-link-highlight-color: var
(--f7-link-highlight-black
);
16747 --f7-touch-ripple-color: var
(--f7-touch-ripple-black
);
16749 @media (min-width: 568px) {
16752 width: var
(--f7-notification-max-width
);
16753 margin-left: calc
(-1 * var
(--f7-notification-max-width
) / 2);
16756 .notification-title {
16757 color: var
(--f7-notification-title-color
, var
(--f7-theme-color
));
16758 font-size: var
(--f7-notification-title-font-size
);
16759 text-transform: var
(--f7-notification-title-text-transform
);
16760 line-height: var
(--f7-notification-title-line-height
);
16761 font-weight: var
(--f7-notification-title-font-weight
);
16762 letter-spacing: var
(--f7-notification-title-letter-spacing
);
16764 .notification-subtitle {
16765 color: var
(--f7-notification-subtitle-color
);
16766 font-size: var
(--f7-notification-subtitle-font-size
);
16767 text-transform: var
(--f7-notification-subtitle-text-transform
);
16768 line-height: var
(--f7-notification-subtitle-line-height
);
16769 font-weight: var
(--f7-notification-subtitle-font-weight
);
16771 .notification-text {
16772 color: var
(--f7-notification-text-color
);
16773 font-size: var
(--f7-notification-text-font-size
);
16774 text-transform: var
(--f7-notification-text-text-transform
);
16775 line-height: var
(--f7-notification-text-line-height
);
16776 font-weight: var
(--f7-notification-text-font-weight
);
16778 .notification-title-right-text {
16779 color: var
(--f7-notification-title-right-color
);
16780 font-size: var
(--f7-notification-title-right-font-size
);
16782 .notification-icon {
16784 line-height: var
(--f7-notification-icon-size
);
16786 .notification-icon i
,
16787 .notification-icon {
16788 width: var
(--f7-notification-icon-size
) !important
;
16789 height: var
(--f7-notification-icon-size
) !important
;
16791 .notification-icon i {
16792 font-size: var
(--f7-notification-icon-size
);
16794 .notification-header {
16796 justify-content: flex-start
;
16797 align-items: center
;
16799 .notification-close-button {
16802 position: relative
;
16804 .notification-close-button:after {
16805 font-family: 'framework7-core-icons';
16806 font-weight: normal
;
16807 font-style: normal
;
16809 letter-spacing: normal
;
16810 text-transform: none
;
16811 white-space: nowrap
;
16814 -webkit-font-smoothing: antialiased
;
16815 text-rendering: optimizeLegibility
;
16816 -moz-osx-font-smoothing: grayscale
;
16817 -moz-font-feature-settings: "liga";
16818 font-feature-settings: "liga";
16823 position: absolute
;
16826 text-align: center
;
16828 .ios .notification {
16829 transition-duration: 450ms;
16830 transform: translate3d
(0%, -200%, 0);
16832 @supports ((-webkit-backdrop-filter: blur
(10px)) or
(backdrop-filter: blur
(10px))) {
16833 .ios .notification {
16834 background: var
(--f7-notification-translucent-bg-color-ios
);
16835 -webkit-backdrop-filter: blur
(10px);
16836 backdrop-filter: blur
(10px);
16839 .ios .notification.modal-in {
16840 transform: translate3d
(0%, 0%, 0);
16843 .ios .notification.modal-out {
16844 transform: translate3d
(0%, -200%, 0);
16846 .ios .notification-icon {
16849 .ios .notification-header + .notification-content {
16852 .ios .notification-title-right-text {
16856 .ios .notification-title-right-text + .notification-close-button {
16859 .ios .notification-close-button {
16864 transition-duration: 300ms;
16866 .ios .notification-close-button.active-state {
16867 transition-duration: 0ms;
16870 .ios .notification-close-button:after {
16872 content: 'notification_close_ios';
16877 margin-left: -22px;
16880 .md .notification {
16881 transform: translate3d
(0, -150%, 0);
16883 .md .notification.modal-in {
16884 transition-duration: 0ms;
16885 animation: notification-md-in
400ms ease-out
;
16886 transform: translate3d
(0, 0%, 0);
16888 .md .notification.modal-in.notification-transitioning {
16889 transition-duration: 200ms;
16891 .md .notification.modal-out {
16893 transition-duration: 200ms;
16894 transition-timing-function: ease-in
;
16895 transform: translate3d
(0, -150%, 0);
16897 .md .notification-icon {
16900 .md .notification-subtitle + .notification-text {
16903 .md .notification-header + .notification-content {
16906 .md .notification-title-right-text {
16909 .md .notification-title-right-text:before {
16913 border-radius: 50%;
16914 display: inline-block
;
16915 vertical-align: middle
;
16917 background: var
(--f7-notification-title-right-color
);
16919 .md .notification-close-button {
16922 transition-duration: 300ms;
16924 .md .notification-close-button:before {
16928 position: absolute
;
16931 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
16932 background-repeat: no-repeat
;
16933 background-position: center
;
16934 background-size: 100% 100%;
16936 pointer-events: none
;
16937 transition-duration: 600ms;
16939 .md .notification-close-button.active-state:before {
16941 transition-duration: 150ms;
16943 .md
.notification-close-button:before
,
16944 .md .notification-close-button:after {
16949 margin-left: -24px;
16952 .md .notification-close-button:after {
16954 content: 'delete_md';
16958 @keyframes notification-md-in
{
16960 transform: translate3d
(0, -150%, 0);
16963 transform: translate3d
(0, 10%, 0);
16966 transform: translate3d
(0, 0%, 0);
16969 .aurora .notification {
16970 transition-duration: 450ms;
16971 transform: translate3d
(0%, -200%, 0);
16973 .aurora .notification.modal-in {
16974 transform: translate3d
(0%, 0%, 0);
16977 .aurora .notification.modal-out {
16978 transform: translate3d
(0%, -200%, 0);
16980 .aurora .notification-icon {
16981 margin-right: 10px;
16983 .aurora .notification-header + .notification-content {
16986 .aurora .notification-title-right-text {
16990 .aurora .notification-title-right-text + .notification-close-button {
16993 .aurora .notification-close-button {
16998 transition-duration: 300ms;
17000 .aurora .notification-close-button.active-state {
17001 transition-duration: 0ms;
17004 .aurora .notification-close-button:after {
17006 content: 'notification_close_ios';
17011 margin-left: -19px;
17014 /* === Autocomplete === */
17016 --f7-autocomplete-dropdown-bg-color: #fff;
17017 --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
17018 --f7-autocomplete-dropdown-preloader-size: 20px;
17020 --f7-autocomplete-dropdown-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
17024 --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba
(0, 0, 0, 0.2);
17025 --f7-autocomplete-dropdown-text-color: #000;
17026 --f7-autocomplete-dropdown-text-matching-color: #000;
17027 --f7-autocomplete-dropdown-text-matching-font-weight: 600;
17028 --f7-autocomplete-dropdown-font-size: var
(--f7-list-font-size
);
17032 --f7-autocomplete-dropdown-bg-color: #1c1c1d;
17033 --f7-autocomplete-dropdown-text-color: #fff;
17034 --f7-autocomplete-dropdown-text-matching-color: #fff;
17037 --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba
(0, 0, 0, 0.25);
17038 --f7-autocomplete-dropdown-text-color: rgba
(0, 0, 0, 0.54);
17039 --f7-autocomplete-dropdown-text-matching-color: #212121;
17040 --f7-autocomplete-dropdown-text-matching-font-weight: 400;
17041 --f7-autocomplete-dropdown-font-size: var
(--f7-list-font-size
);
17045 --f7-autocomplete-dropdown-bg-color: #1c1c1d;
17046 --f7-autocomplete-dropdown-text-color: rgba
(255, 255, 255, 0.54);
17047 --f7-autocomplete-dropdown-text-matching-color: rgba
(255, 255, 255, 0.87);
17050 --f7-autocomplete-dropdown-box-shadow: 0px 1px 2px rgba
(0, 0, 0, 0.2);
17051 --f7-autocomplete-dropdown-text-color: #000;
17052 --f7-autocomplete-dropdown-text-matching-color: #000;
17053 --f7-autocomplete-dropdown-text-matching-font-weight: 700;
17054 --f7-autocomplete-dropdown-font-size: 13px;
17056 .aurora
.theme-dark
,
17057 .aurora.theme-dark {
17058 --f7-autocomplete-dropdown-bg-color: #1c1c1c;
17059 --f7-autocomplete-dropdown-text-color: #fff;
17060 --f7-autocomplete-dropdown-text-matching-color: #fff;
17062 .autocomplete-page .autocomplete-found {
17065 .autocomplete-page .autocomplete-not-found {
17068 .autocomplete-page .autocomplete-values {
17071 .autocomplete-page .list ul:empty {
17074 .autocomplete-preloader:not(.autocomplete-preloader-visible) {
17075 visibility: hidden
;
17077 .autocomplete-preloader:not
(.autocomplete-preloader-visible
),
17078 .autocomplete-preloader:not(.autocomplete-preloader-visible) * {
17081 .autocomplete-dropdown {
17082 background: var
(--f7-autocomplete-dropdown-bg-color
);
17083 box-shadow: var
(--f7-autocomplete-dropdown-box-shadow
);
17084 box-sizing: border-box
;
17085 position: absolute
;
17090 .autocomplete-dropdown .autocomplete-dropdown-inner {
17091 position: relative
;
17092 will-change: scroll-position
;
17094 -webkit-overflow-scrolling: touch
;
17098 .autocomplete-dropdown .autocomplete-preloader {
17100 position: absolute
;
17102 width: var
(--f7-autocomplete-dropdown-preloader-size
);
17103 height: var
(--f7-autocomplete-dropdown-preloader-size
);
17105 .autocomplete-dropdown .autocomplete-preloader-visible {
17108 .autocomplete-dropdown .autocomplete-dropdown-placeholder {
17109 color: var
(--f7-autocomplete-dropdown-placeholder-color
);
17111 .autocomplete-dropdown .list {
17113 color: var
(--f7-autocomplete-dropdown-text-color
);
17114 font-size: var
(--f7-autocomplete-dropdown-font-size
);
17116 .autocomplete-dropdown .list b {
17117 color: var
(--f7-autocomplete-dropdown-text-matching-color
);
17118 font-weight: var
(--f7-autocomplete-dropdown-text-matching-font-weight
);
17120 .autocomplete-dropdown .list ul {
17121 background: none
!important
;
17123 .autocomplete-dropdown .list ul:before {
17124 display: none
!important
;
17126 .autocomplete-dropdown .list ul:after {
17127 display: none
!important
;
17129 .autocomplete-dropdown .autocomplete-dropdown-selected {
17130 background: var
(--f7-autocomplete-dropdown-selected-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.2));
17132 .searchbar-input-wrap .autocomplete-dropdown {
17133 background-color: var
(--f7-searchbar-input-bg-color
, var
(--f7-searchbar-bg-color
));
17134 border-radius: var
(--f7-searchbar-input-border-radius
);
17136 .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder {
17137 color: var
(--f7-searchbar-placeholder-color
);
17139 .searchbar-input-wrap .autocomplete-dropdown li:last-child {
17140 border-radius: 0 0 var
(--f7-searchbar-input-border-radius
) var
(--f7-searchbar-input-border-radius
);
17141 position: relative
;
17144 .searchbar-input-wrap .autocomplete-dropdown .item-content {
17145 padding-right: var
(--f7-searchbar-input-padding-horizontal
);
17147 .list .item-content-dropdown-expanded .item-title.item-label {
17152 .list .item-content-dropdown-expanded .item-title.item-label + .item-input-wrap {
17155 .list .item-content-dropdown-expanded .item-input-wrap {
17158 .ios .autocomplete-dropdown .autocomplete-preloader {
17160 margin-bottom: 12px;
17162 .ios .searchbar-input-wrap .autocomplete-dropdown {
17163 margin-top: calc
(-1 * var
(--f7-searchbar-input-height
));
17167 .ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
17168 padding-top: var
(--f7-searchbar-input-height
);
17170 .md .autocomplete-page .navbar .autocomplete-preloader {
17173 .md .autocomplete-popup .navbar .autocomplete-preloader {
17177 .md .autocomplete-dropdown .autocomplete-preloader {
17179 margin-bottom: 8px;
17181 .md
.autocomplete-dropdown
.autocomplete-preloader
.preloader-inner-gap
,
17182 .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-half-circle {
17185 .aurora .autocomplete-dropdown .autocomplete-preloader {
17187 margin-bottom: 2px;
17189 .aurora .searchbar-input-wrap .autocomplete-dropdown {
17190 margin-top: calc
(-1 * var
(--f7-searchbar-input-height
));
17194 .aurora .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
17195 padding-top: var
(--f7-searchbar-input-height
);
17197 /* === Tooltip === */
17199 --f7-tooltip-bg-color: rgba
(0, 0, 0, 0.87);
17200 --f7-tooltip-text-color: #fff;
17201 --f7-tooltip-border-radius: 4px;
17202 --f7-tooltip-padding: 8px 16px;
17203 --f7-tooltip-font-size: 14px;
17204 --f7-tooltip-font-weight: 500;
17205 --f7-tooltip-desktop-padding: 6px 8px;
17206 --f7-tooltip-desktop-font-size: 12px;
17209 position: absolute
;
17211 background: var
(--f7-tooltip-bg-color
);
17212 border-radius: var
(--f7-tooltip-border-radius
);
17213 padding: var
(--f7-tooltip-padding
);
17214 color: var
(--f7-tooltip-text-color
);
17215 font-size: var
(--f7-tooltip-font-size
);
17216 font-weight: var
(--f7-tooltip-font-weight
);
17217 box-sizing: border-box
;
17220 transform: scale
(0.9);
17221 transition-duration: 150ms;
17222 transition-property: opacity
, transform
;
17225 .tooltip.tooltip-in {
17226 transform: scale
(1);
17229 .tooltip.tooltip-out {
17231 transform: scale
(1);
17233 .device-desktop .tooltip {
17234 font-size: var
(--f7-tooltip-desktop-font-size
);
17235 padding: var
(--f7-tooltip-desktop-padding
);
17237 /* === Gauge === */
17239 position: relative
;
17240 text-align: center
;
17242 margin-right: auto
;
17243 display: inline-block
;
17254 transition-duration: 400ms;
17256 /* === Skeleton === */
17258 --f7-skeleton-color: #ccc;
17261 --f7-skeleton-color: #515151;
17264 font-family: 'framework7-skeleton' !important
;
17268 color: var
(--f7-skeleton-color
) !important
;
17269 font-weight: normal
!important
;
17270 font-style: normal
!important
;
17271 letter-spacing: -0.015em !important
;
17275 background: var
(--f7-skeleton-color
) !important
;
17278 .skeleton-effect-fade {
17279 animation: skeleton-effect-fade
1s infinite
;
17281 .skeleton-effect-blink {
17282 -webkit-mask-image: linear-gradient
(to right
, transparent
0%, black
25%, black
75%, transparent
100%);
17283 mask-image: linear-gradient
(to right
, transparent
0%, black
25%, black
75%, transparent
100%);
17284 -webkit-mask-size: 200% 100%;
17285 mask-size: 200% 100%;
17286 -webkit-mask-repeat: repeat
;
17287 mask-repeat: repeat
;
17288 -webkit-mask-position: 50% top
;
17289 mask-position: 50% top
;
17290 animation: skeleton-effect-blink
1s infinite
;
17292 .skeleton-effect-pulse {
17293 animation: skeleton-effect-pulse
1s infinite
;
17295 @keyframes skeleton-effect-fade
{
17306 @keyframes skeleton-effect-blink
{
17308 -webkit-mask-position: 50% top
;
17309 mask-position: 50% top
;
17312 -webkit-mask-position: -150% top
;
17313 mask-position: -150% top
;
17316 @keyframes skeleton-effect-pulse
{
17318 transform: scale
(1);
17321 transform: scale
(1);
17324 transform: scale
(0.975);
17327 transform: scale
(1);
17332 --f7-menu-text-color: #fff;
17333 --f7-menu-font-size: 16px;
17334 --f7-menu-font-weight: 500;
17335 --f7-menu-line-height: 1.2;
17336 --f7-menu-bg-color: rgba
(0, 0, 0, 0.9);
17337 --f7-menu-item-pressed-bg-color: rgba
(20, 20, 20, 0.9);
17338 --f7-menu-item-padding-horizontal: 12px;
17339 --f7-menu-item-spacing: 6px;
17340 --f7-menu-item-height: 40px;
17341 --f7-menu-item-dropdown-icon-color: rgba
(255, 255, 255, 0.4);
17342 --f7-menu-item-border-radius: 8px;
17344 --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
17346 --f7-menu-dropdown-item-height: 28px;
17347 --f7-menu-dropdown-divider-color: rgba
(255, 255, 255, 0.2);
17348 --f7-menu-dropdown-padding-vertical: 6px;
17350 --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
17354 --f7-menu-font-size: 13px;
17355 --f7-menu-item-height: 28px;
17356 --f7-menu-dropdown-item-height: 24px;
17357 --f7-menu-item-border-radius: 5px;
17358 --f7-menu-item-padding-horizontal: 10px;
17362 position: relative
;
17363 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
17367 justify-content: flex-start
;
17368 align-items: flex-start
;
17369 padding-left: var
(--f7-menu-item-spacing
);
17370 padding-right: var
(--f7-menu-item-spacing
);
17372 .menu-inner:after {
17374 width: var
(--f7-menu-item-spacing
);
17379 height: var
(--f7-menu-item-height
);
17380 min-width: var
(--f7-menu-item-height
);
17382 background: var
(--f7-menu-bg-color
);
17383 color: var
(--f7-menu-text-color
);
17384 border-radius: var
(--f7-menu-item-border-radius
);
17385 position: relative
;
17386 box-sizing: border-box
;
17387 font-size: var
(--f7-menu-font-size
);
17388 font-weight: var
(--f7-menu-font-weight
);
17390 margin-right: var
(--f7-menu-item-spacing
);
17392 .menu-item:first-child {
17395 .menu-item.active-state:not(.menu-item-dropdown-opened) {
17396 background-color: rgba
(0, 0, 0, 0.7);
17398 .menu-item.icon-only {
17402 .menu-item-content {
17404 justify-content: center
;
17405 align-items: center
;
17406 padding: 0 var
(--f7-menu-item-padding-horizontal
);
17408 box-sizing: border-box
;
17411 border-radius: var
(--f7-menu-item-border-radius
);
17412 position: relative
;
17414 .menu-item-content
.icon-only
,
17415 .icon-only .menu-item-content {
17419 .menu-item-dropdown .menu-item-content:after {
17421 position: absolute
;
17425 transform: translateX
(-50%);
17427 background: var
(--f7-menu-item-dropdown-icon-color
);
17428 border-radius: 4px;
17432 visibility: hidden
;
17433 pointer-events: none
;
17436 background: var
(--f7-menu-bg-color
);
17437 position: relative
;
17439 .menu-dropdown-content {
17440 position: absolute
;
17442 border-radius: var
(--f7-menu-dropdown-border-radius
, var
(--f7-menu-item-border-radius
));
17443 padding-top: var
(--f7-menu-dropdown-padding-vertical
);
17444 padding-bottom: var
(--f7-menu-dropdown-padding-vertical
);
17445 box-sizing: border-box
;
17446 background: var
(--f7-menu-bg-color
);
17447 will-change: scroll-position
;
17449 -webkit-overflow-scrolling: touch
;
17450 min-width: calc
(100% + 24px);
17452 .menu-dropdown-link
,
17453 .menu-dropdown-item {
17455 justify-content: space-between
;
17456 align-items: center
;
17457 padding-left: var
(--f7-menu-item-padding-horizontal
);
17458 padding-right: var
(--f7-menu-item-padding-horizontal
);
17459 min-height: var
(--f7-menu-dropdown-item-height
);
17460 line-height: var
(--f7-menu-line-height
);
17461 font-size: var
(--f7-menu-font-size
);
17462 color: var
(--f7-menu-text-color
);
17463 font-weight: var
(--f7-menu-font-weight
);
17464 white-space: nowrap
;
17467 .menu-dropdown-link i
,
17468 .menu-dropdown-item i
,
17469 .menu-dropdown-link i
.icon
,
17470 .menu-dropdown-item i
.icon
,
17471 .menu-dropdown-link i
.f7-icons
,
17472 .menu-dropdown-item i
.f7-icons
,
17473 .menu-dropdown-link i
.material-icons
,
17474 .menu-dropdown-item i.material-icons {
17477 .menu-dropdown-link.active-state {
17478 background: var
(--f7-menu-dropdown-pressed-bg-color
, var
(--f7-theme-color
));
17479 color: var
(--f7-menu-text-color
);
17481 .menu-dropdown-divider {
17484 margin-bottom: 2px;
17485 background: var
(--f7-menu-dropdown-divider-color
);
17487 .menu-item-dropdown-opened {
17488 border-bottom-left-radius: 0px;
17489 border-bottom-right-radius: 0px;
17491 .menu-item-dropdown-opened .menu-item-content:after {
17494 .menu-item-dropdown-opened .menu-dropdown {
17496 visibility: visible
;
17497 pointer-events: auto
;
17499 .menu-item-dropdown-left
.menu-dropdown:after
,
17500 .menu-item-dropdown-center
.menu-dropdown:after
,
17501 .menu-dropdown-left:after
,
17502 .menu-dropdown-center:after {
17504 position: absolute
;
17507 width: var
(--f7-menu-item-border-radius
);
17508 height: var
(--f7-menu-item-border-radius
);
17509 background-image: radial-gradient
(ellipse at
100% 0%, transparent
0%, transparent
70%, var
(--f7-menu-bg-color
) 72%);
17511 .menu-item-dropdown-right
.menu-dropdown:before
,
17512 .menu-item-dropdown-center
.menu-dropdown:before
,
17513 .menu-dropdown-right:before
,
17514 .menu-dropdown-center:before {
17516 position: absolute
;
17519 width: var
(--f7-menu-item-border-radius
);
17520 height: var
(--f7-menu-item-border-radius
);
17521 background-image: radial-gradient
(ellipse at
0% 0%, transparent
0%, transparent
70%, var
(--f7-menu-bg-color
) 72%);
17523 .menu-item-dropdown-left
.menu-dropdown-content
,
17524 .menu-dropdown-left .menu-dropdown-content {
17526 border-top-left-radius: 0px;
17528 .menu-item-dropdown-right
.menu-dropdown-content
,
17529 .menu-dropdown-right .menu-dropdown-content {
17531 border-top-right-radius: 0px;
17533 .menu-item-dropdown-center
.menu-dropdown-content
,
17534 .menu-dropdown-center .menu-dropdown-content {
17536 min-width: calc
(100% + 24px + 24px);
17537 transform: translateX
(-50%);
17539 /* === Color Picker === */
17541 --f7-color-picker-sheet-bg-color: #fff;
17542 --f7-color-picker-popup-bg-color: #fff;
17543 --f7-color-picker-popover-width: 350px;
17544 --f7-color-picker-slider-size: 6px;
17545 --f7-color-picker-slider-knob-size: 16px;
17546 --f7-color-picker-bar-size: 50px;
17547 --f7-color-picker-bar-min-height: 260px;
17548 --f7-color-picker-value-bg-color: rgba
(0, 0, 0, 0.05);
17549 --f7-color-picker-value-width: 64px;
17550 --f7-color-picker-value-height: 32px;
17551 --f7-color-picker-value-font-size: 16px;
17552 --f7-color-picker-value-border-radius: 4px;
17553 --f7-color-picker-hex-value-width: 84px;
17554 --f7-color-picker-label-font-size: 14px;
17555 --f7-color-picker-label-width: 10px;
17556 --f7-color-picker-label-height: 14px;
17557 --f7-color-picker-sb-spectrum-height: 260px;
17558 --f7-color-picker-sb-spectrum-handle-size: 16px;
17559 --f7-color-picker-wheel-width: 330px;
17560 --f7-color-picker-group-bg-color: rgba
(0, 0, 0, 0.05);
17561 --f7-color-picker-group-value-bg-color: #fff;
17562 --f7-color-picker-palette-value-width: 36px;
17563 --f7-color-picker-palette-value-height: 36px;
17564 --f7-color-picker-initial-current-color-height: 40px;
17565 --f7-color-picker-initial-current-color-border-radius: 4px;
17569 --f7-color-picker-sheet-bg-color: #171717;
17570 --f7-color-picker-popup-bg-color: #171717;
17571 --f7-color-picker-value-bg-color: rgba
(255, 255, 255, 0.1);
17572 --f7-color-picker-group-bg-color: #000;
17573 --f7-color-picker-group-value-bg-color: rgba
(255, 255, 255, 0.12);
17579 flex-direction: column
;
17581 .color-picker
.color-picker-inline
,
17582 .color-picker-popover
.color-picker
,
17583 .color-picker-popup .color-picker {
17584 position: relative
;
17586 .color-picker-sheet-modal {
17587 background: var
(--f7-color-picker-sheet-bg-color
);
17589 .color-picker-sheet-modal:before {
17592 .color-picker-sheet-modal .sheet-modal-inner {
17593 margin-bottom: var
(--f7-safe-area-bottom
);
17595 .color-picker-popup .page {
17596 background: var
(--f7-color-picker-popup-bg-color
);
17598 .color-picker-popup .page-content {
17599 padding-bottom: var
(--f7-safe-area-bottom
);
17601 .color-picker-popover
.color-picker
,
17602 .color-picker-popup
.color-picker
,
17603 .color-picker-page .color-picker {
17606 .color-picker-popover
.color-picker
.toolbar
,
17607 .color-picker-popup
.color-picker
.toolbar
,
17608 .color-picker-page .color-picker .toolbar {
17609 position: absolute
;
17611 .color-picker-popover {
17612 width: var
(--f7-color-picker-popover-width
);
17616 .color-picker-popover .color-picker {
17619 .color-picker-popover .toolbar-top {
17620 border-top-left-radius: var
(--f7-popover-border-radius
);
17621 border-top-right-radius: var
(--f7-popover-border-radius
);
17623 .color-picker-popover .color-picker-module-palette {
17627 .color-picker-popover .color-picker-module-palette:first-child {
17628 border-top-left-radius: var
(--f7-popover-border-radius
);
17629 border-top-right-radius: var
(--f7-popover-border-radius
);
17631 .color-picker-popover .color-picker-module-palette:last-child {
17632 border-bottom-left-radius: var
(--f7-popover-border-radius
);
17633 border-bottom-right-radius: var
(--f7-popover-border-radius
);
17635 .color-picker-popover .color-picker-module-palette:first-child:last-child {
17636 border-radius: var
(--f7-popover-border-radius
);
17638 .color-picker-popover .toolbar ~ .page-content .color-picker-module-palette:first-child {
17639 border-top-left-radius: 0;
17640 border-top-right-radius: 0;
17642 .color-picker-popup
.page-content
,
17643 .color-picker-popover
.page-content
,
17644 .color-picker-sheet-modal
.page-content
,
17645 .color-picker-page .page-content {
17647 justify-content: flex-start
;
17648 align-items: stretch
;
17649 flex-direction: column
;
17650 overflow-x: hidden
;
17652 .color-picker-module {
17655 .color-picker-module:last-child {
17656 margin-bottom: 5px;
17658 .color-picker-module-sb-spectrum
,
17659 .color-picker-module-hs-spectrum {
17661 margin-right: 10px;
17663 .color-picker-module-sb-spectrum:first-child
,
17664 .color-picker-module-hs-spectrum:first-child {
17667 .color-picker-module-sb-spectrum
.color-picker-sb-spectrum
,
17668 .color-picker-module-hs-spectrum
.color-picker-sb-spectrum
,
17669 .color-picker-module-sb-spectrum
.color-picker-hs-spectrum
,
17670 .color-picker-module-hs-spectrum .color-picker-hs-spectrum {
17671 border-radius: 4px;
17672 height: var
(--f7-color-picker-sb-spectrum-height
);
17674 .color-picker-sb-spectrum {
17675 background-color: #000;
17676 background-image: linear-gradient
(to bottom
, rgba
(0, 0, 0, 0) 0%, #000 100%), linear-gradient
(to left
, rgba
(255, 255, 255, 0) 0%, #fff 100%);
17677 position: relative
;
17679 .color-picker-hs-spectrum {
17680 position: relative
;
17681 background-image: linear-gradient
(to right
, hsl
(0, 100%, 50%), hsl
(60, 100%, 50%), hsl
(120, 100%, 50%), hsl
(180, 100%, 50%), hsl
(240, 100%, 50%), hsl
(300, 100%, 50%), hsl
(0, 100%, 50%));
17683 .color-picker-hs-spectrum:after {
17685 position: absolute
;
17690 background-image: linear-gradient
(to bottom
, rgba
(255, 255, 255, 0), #ffffff);
17692 .color-picker-sb-spectrum-handle
,
17693 .color-picker-hs-spectrum-handle {
17696 position: absolute
;
17701 .color-picker-sb-spectrum-handle:after
,
17702 .color-picker-hs-spectrum-handle:after {
17703 background-color: inherit
;
17705 position: absolute
;
17706 width: var
(--f7-color-picker-sb-spectrum-handle-size
);
17707 height: var
(--f7-color-picker-sb-spectrum-handle-size
);
17708 border: 1px solid
#fff;
17709 border-radius: 50%;
17710 box-shadow: 0px 0px 2px rgba
(0, 0, 0, 0.5);
17711 box-sizing: border-box
;
17714 transform: translate
(-50%, -50%);
17716 transition-property: transform
;
17717 transform-origin: center
;
17719 .color-picker-sb-spectrum-handle
.color-picker-sb-spectrum-handle-pressed:after
,
17720 .color-picker-hs-spectrum-handle
.color-picker-sb-spectrum-handle-pressed:after
,
17721 .color-picker-sb-spectrum-handle
.color-picker-hs-spectrum-handle-pressed:after
,
17722 .color-picker-hs-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after {
17723 transform: scale
(1.5) translate
(-33.333%, -33.333%);
17725 .color-picker-module-wheel {
17727 margin-right: 10px;
17729 .color-picker-wheel {
17730 position: relative
;
17731 width: var
(--f7-color-picker-wheel-width
);
17736 margin-right: auto
;
17738 .color-picker-wheel svg {
17742 .color-picker-wheel .color-picker-wheel-handle {
17743 width: calc
(100% / 6);
17744 height: calc
(100% / 6);
17745 position: absolute
;
17746 box-sizing: border-box
;
17747 border: 2px solid
#fff;
17748 box-shadow: 0px 0px 5px rgba
(0, 0, 0, 0.5);
17750 border-radius: 50%;
17754 .color-picker-wheel .color-picker-sb-spectrum {
17759 transform: translate3d
(-50%, -50%, 0);
17760 position: absolute
;
17762 .color-picker-slider-wrap {
17764 align-items: center
;
17765 margin-bottom: 2px;
17767 .color-picker-slider-wrap + .color-picker-slider-wrap {
17770 .color-picker-hex-wrap {
17771 justify-content: space-between
;
17773 align-items: center
;
17775 .color-picker-slider-label
,
17776 .color-picker-hex-label {
17777 font-size: var
(--f7-color-picker-label-font-size
);
17778 width: var
(--f7-color-picker-label-size
);
17782 .color-picker-hex-label {
17785 .color-picker-bar-value
,
17786 .color-picker-slider-value
,
17787 .color-picker-hex-value {
17788 width: var
(--f7-color-picker-value-width
);
17789 height: var
(--f7-color-picker-value-height
);
17790 background: var
(--f7-color-picker-value-bg-color
);
17791 border-radius: var
(--f7-color-picker-value-border-radius
);
17792 text-align: center
;
17793 font-size: var
(--f7-color-picker-value-font-size
);
17795 justify-content: center
;
17796 align-items: center
;
17798 margin-right: 10px;
17800 .color-picker-bar-value input
,
17801 .color-picker-slider-value input
,
17802 .color-picker-hex-value input {
17805 -webkit-appearance: none
;
17806 -moz-appearance: none
;
17810 background: transparent
;
17812 font-family: inherit
;
17813 font-size: inherit
;
17814 text-align: center
;
17816 border-radius: 4px;
17818 .color-picker-bar-value
input::-webkit-inner-spin-button
,
17819 .color-picker-slider-value
input::-webkit-inner-spin-button
,
17820 .color-picker-hex-value
input::-webkit-inner-spin-button
,
17821 .color-picker-bar-value
input::-webkit-outer-spin-button
,
17822 .color-picker-slider-value
input::-webkit-outer-spin-button
,
17823 .color-picker-hex-value input::-webkit-outer-spin-button {
17824 -webkit-appearance: none
;
17825 -moz-appearance: none
;
17830 .color-picker-hex-value {
17831 width: var
(--f7-color-picker-hex-value-width
);
17833 .color-picker-hex-value:first-child {
17834 margin-right: auto
;
17836 .color-picker-slider {
17837 --f7-range-bar-active-bg-color: transparent
;
17838 --f7-range-bar-size: var
(--f7-color-picker-slider-size
);
17839 --f7-range-bar-border-radius: var
(--f7-color-picker-slider-size
);
17840 --f7-range-knob-size: var
(--f7-color-picker-slider-knob-size
);
17841 --f7-range-knob-box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.3);
17843 .color-picker-slider .range-knob {
17844 transition-duration: 200ms;
17845 transition-property: transform
;
17847 .color-picker-slider .range-knob:after {
17850 margin-left: -15px;
17853 .color-picker-slider .range-knob-active-state .range-knob {
17854 transform: scale
(1.5);
17856 .md .color-picker-slider.range-slider-min:not(.range-slider-dual) .range-knob {
17857 background: var
(--f7-range-knob-color
) !important
;
17860 .color-picker-module-rgb-bars {
17862 justify-content: space-around
;
17863 justify-content: space-evenly
;
17864 align-items: stretch
;
17866 min-height: var
(--f7-color-picker-bar-min-height
);
17867 padding-bottom: 10px;
17869 box-sizing: border-box
;
17871 .color-picker-bar-wrap {
17873 align-items: center
;
17874 flex-direction: column-reverse
;
17876 .color-picker-bar {
17877 --f7-range-bar-active-bg-color: transparent
;
17878 --f7-range-bar-size: var
(--f7-color-picker-bar-size
);
17879 --f7-range-bar-border-radius: 2px;
17880 --f7-range-knob-size: 6px;
17881 --f7-range-knob-box-shadow: 0 0px 3px rgba
(0, 0, 0, 0.3);
17882 --f7-range-knob-color: #fff;
17884 .color-picker-bar .range-knob {
17885 transition-duration: 0ms;
17886 transition-property: transform
;
17887 border-radius: 3px;
17889 .color-picker-bar .range-knob-wrap {
17891 width: calc
(var
(--f7-color-picker-bar-size
) - 4px);
17892 margin-left: calc
(-0.5 * (var
(--f7-color-picker-bar-size
) - 4px));
17894 .color-picker-bar .range-knob-active-state .range-knob {
17895 transform: scale
(1);
17897 .md .color-picker-bar.range-slider-min:not(.range-slider-dual) .range-knob {
17898 background: var
(--f7-range-knob-color
) !important
;
17901 .color-picker-bar-label {
17902 font-size: var
(--f7-color-picker-label-size
);
17905 height: var
(--f7-color-picker-label-height
);
17908 .color-picker-bar-value {
17910 margin-bottom: 10px;
17912 .color-picker-slider-alpha {
17913 --f7-range-knob-color: #fff;
17915 .color-picker-slider-alpha .range-bar {
17916 background-image: linear-gradient
(to left
, rgba
(0, 0, 0, 0), #000), linear-gradient
(to right
, rgba
(255, 255, 255, 0.2) 50%, rgba
(0, 0, 0, 0.2) 50%), linear-gradient
(to left
, rgba
(255, 255, 255, 0.2) 50%, rgba
(0, 0, 0, 0.2) 50%);
17917 background-size: 100% 100%, 6px 3px, 6px 3px;
17918 background-position: 0 0, 0px 3px, 0 0;
17919 background-repeat: repeat-y
, repeat-x
, repeat-x
;
17921 .color-picker-slider-hue .range-bar {
17922 background-image: linear-gradient
(to left
, hsl
(0, 100%, 50%), hsl
(60, 100%, 50%), hsl
(120, 100%, 50%), hsl
(180, 100%, 50%), hsl
(240, 100%, 50%), hsl
(300, 100%, 50%), hsl
(0, 100%, 50%));
17924 .color-picker-slider-brightness .range-bar {
17925 background-image: linear-gradient
(to left
, #000, #fff);
17927 .color-picker-module-palette {
17930 .color-picker-module-palette:first-child {
17933 .color-picker-module-palette:last-child {
17936 .color-picker-module-palette:first-child:last-child {
17939 .color-picker-palette {
17943 .color-picker-palette-row {
17948 .color-picker-palette-row .color-picker-palette-value {
17951 .color-picker-palette-value {
17952 width: var
(--f7-color-picker-palette-value-width
);
17953 height: var
(--f7-color-picker-palette-value-height
);
17956 .color-picker-module-initial-current-colors
,
17957 .color-picker-module-current-color {
17959 margin-right: 10px;
17960 border-radius: var
(--f7-color-picker-initial-current-color-border-radius
);
17964 .color-picker-initial-color
,
17965 .color-picker-current-color {
17966 height: var
(--f7-color-picker-initial-current-color-height
);
17968 .color-picker-initial-current-colors {
17971 .color-picker-initial-current-colors
.color-picker-initial-color
,
17972 .color-picker-initial-current-colors .color-picker-current-color {
17975 .color-picker-module-rgb-sliders
,
17976 .color-picker-module-hsb-sliders
,
17977 .color-picker-module-alpha-slider
,
17978 .color-picker-module-hue-slider
,
17979 .color-picker-module-brightness-slider
,
17980 .color-picker-module-hex {
17982 margin-right: 10px;
17984 .color-picker-grouped-modules
.color-picker-module-rgb-sliders
,
17985 .color-picker-grouped-modules
.color-picker-module-hsb-sliders
,
17986 .color-picker-grouped-modules
.color-picker-module-alpha-slider
,
17987 .color-picker-grouped-modules
.color-picker-module-hue-slider
,
17988 .color-picker-grouped-modules
.color-picker-module-brightness-slider
,
17989 .color-picker-grouped-modules .color-picker-module-hex {
17990 background: var
(--f7-color-picker-group-bg-color
);
17992 border-radius: 4px;
17997 .color-picker-grouped-modules
.color-picker-module-rgb-sliders:last-child
,
17998 .color-picker-grouped-modules
.color-picker-module-hsb-sliders:last-child
,
17999 .color-picker-grouped-modules
.color-picker-module-alpha-slider:last-child
,
18000 .color-picker-grouped-modules
.color-picker-module-hue-slider:last-child
,
18001 .color-picker-grouped-modules
.color-picker-module-brightness-slider:last-child
,
18002 .color-picker-grouped-modules .color-picker-module-hex:last-child {
18003 margin-bottom: 15px;
18005 .color-picker-grouped-modules
.color-picker-slider-value
,
18006 .color-picker-grouped-modules .color-picker-hex-value {
18007 background: var
(--f7-color-picker-group-value-bg-color
);
18009 .color-picker-grouped-modules
.color-picker-slider-label
,
18010 .color-picker-grouped-modules .color-picker-hex-label {
18013 .color-picker-grouped-modules
.color-picker-module-rgb-sliders
.range-slider:first-child
,
18014 .color-picker-grouped-modules
.color-picker-module-hsb-sliders
.range-slider:first-child
,
18015 .color-picker-grouped-modules
.color-picker-module-alpha-slider
.range-slider:first-child
,
18016 .color-picker-grouped-modules
.color-picker-module-hue-slider
.range-slider:first-child
,
18017 .color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:first-child {
18020 .color-picker-grouped-modules
.color-picker-module-rgb-sliders
.range-slider:last-child
,
18021 .color-picker-grouped-modules
.color-picker-module-hsb-sliders
.range-slider:last-child
,
18022 .color-picker-grouped-modules
.color-picker-module-alpha-slider
.range-slider:last-child
,
18023 .color-picker-grouped-modules
.color-picker-module-hue-slider
.range-slider:last-child
,
18024 .color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:last-child {
18027 /* === Treeview === */
18029 --f7-treeview-toggle-size: 24px;
18030 --f7-treeview-toggle-color: rgba
(0, 0, 0, 0.5);
18031 --f7-treeview-toggle-hover-bg-color: rgba
(0, 0, 0, 0.1);
18032 --f7-treeview-toggle-pressed-bg-color: rgba
(0, 0, 0, 0.15);
18033 --f7-treeview-icon-color: rgba
(0, 0, 0, 0.5);
18034 --f7-treeview-children-offset: 29px;
18035 --f7-treeview-label-font-weight: 400;
18036 --f7-treeview-label-text-color: inherit
;
18037 --f7-treeview-selectable-hover-bg-color: rgba
(0, 0, 0, 0.1);
18039 --f7-treeview-selectable-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
18041 --f7-treeview-link-hover-bg-color: rgba
(0, 0, 0, 0.1);
18042 --f7-treeview-link-pressed-bg-color: rgba
(0, 0, 0, 0.15);
18046 --f7-treeview-toggle-color: rgba
(255, 255, 255, 0.5);
18047 --f7-treeview-toggle-hover-bg-color: rgba
(255, 255, 255, 0.03);
18048 --f7-treeview-toggle-pressed-bg-color: rgba
(255, 255, 255, 0.1);
18049 --f7-treeview-icon-color: rgba
(255, 255, 255, 0.75);
18050 --f7-treeview-selectable-hover-bg-color: rgba
(255, 255, 255, 0.03);
18051 --f7-treeview-link-hover-bg-color: rgba
(255, 255, 255, 0.03);
18052 --f7-treeview-link-pressed-bg-color: rgba
(255, 255, 255, 0.11);
18055 --f7-treeview-item-height: 34px;
18056 --f7-treeview-item-padding-left: 15px;
18057 --f7-treeview-item-padding-right: 15px;
18058 --f7-treeview-label-font-size: 17px;
18059 --f7-treeview-icon-size: 24px;
18062 --f7-treeview-item-height: 34px;
18063 --f7-treeview-item-padding-left: 16px;
18064 --f7-treeview-item-padding-right: 16px;
18065 --f7-treeview-label-font-size: 16px;
18066 --f7-treeview-icon-size: 24px;
18069 --f7-treeview-item-height: 28px;
18070 --f7-treeview-item-padding-left: 15px;
18071 --f7-treeview-item-padding-right: 15px;
18072 --f7-treeview-label-font-size: 14px;
18073 --f7-treeview-icon-size: 20px;
18075 .treeview-item-root {
18076 padding-right: var
(--f7-treeview-item-padding-left
);
18077 padding-left: var
(--f7-treeview-item-padding-right
);
18078 height: var
(--f7-treeview-item-height
);
18080 align-items: center
;
18081 justify-content: flex-start
;
18083 .treeview-item-content {
18085 justify-content: flex-start
;
18086 align-items: center
;
18088 .treeview-item-content
> i
,
18089 .treeview-item-content
> .f7-icons
,
18090 .treeview-item-content > .material-icons {
18091 width: var
(--f7-treeview-icon-size
);
18092 height: var
(--f7-treeview-icon-size
);
18093 font-size: var
(--f7-treeview-icon-size
);
18094 color: var
(--f7-treeview-icon-color
);
18096 .treeview-item-content:first-child {
18097 margin-right: calc
(var
(--f7-treeview-toggle-size
) + 5px);
18099 .treeview-item-content > * + * {
18102 .treeview-item-label {
18103 font-size: var
(--f7-treeview-label-font-size
);
18104 font-weight: var
(--f7-treeview-label-font-weight
);
18105 color: var
(--f7-treeview-label-text-color
);
18108 width: var
(--f7-treeview-toggle-size
);
18109 height: var
(--f7-treeview-toggle-size
);
18111 border-radius: 4px;
18112 background-color: rgba
(0, 0, 0, 0);
18113 transition-duration: 200ms;
18114 position: relative
;
18117 .treeview-toggle.active-state {
18118 background-color: var
(--f7-treeview-toggle-pressed-bg-color
);
18120 .treeview-toggle:after {
18121 transition-duration: 200ms;
18123 position: absolute
;
18128 border-top: 5px solid transparent
;
18129 border-bottom: 5px solid transparent
;
18130 transform: translate
(-50%, -50%);
18131 border-right: 6px solid var
(--f7-treeview-toggle-color
);
18133 .treeview-toggle-hidden {
18135 pointer-events: none
;
18136 visibility: hidden
;
18138 .treeview-preloader {
18139 --f7-preloader-size: var
(--f7-treeview-toggle-size
);
18140 margin-left: calc
(-1 * var
(--f7-treeview-toggle-size
));
18142 .treeview-item-children {
18145 .treeview-item-opened > .treeview-item-children {
18148 .treeview-item-opened > .treeview-item-root .treeview-toggle:after {
18149 transform: translate
(-50%, -50%) rotate
(-90deg);
18151 a
.treeview-item-root
{
18152 color: var
(--f7-treeview-label-text-color
);
18154 .treeview-item-selectable
> .treeview-item-root
,
18155 .treeview-item-selectable.treeview-item-root {
18157 transition-duration: 150ms;
18159 a
.treeview-item-root
{
18160 transition-duration: 150ms;
18162 a
.treeview-item-root
.active-state
{
18163 background: var
(--f7-treeview-link-pressed-bg-color
);
18165 .treeview-item-toggle
> .treeview-item-root
,
18166 .treeview-item-toggle.treeview-item-root {
18169 .treeview-item-selected
> .treeview-item-root
,
18170 .treeview-item-selected.treeview-item-root {
18171 background: var
(--f7-treeview-selectable-selected-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.2));
18173 .treeview-item .treeview-item .treeview-item-root {
18174 padding-right: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 1);
18176 .treeview-item .treeview-item .treeview-item .treeview-item-root {
18177 padding-right: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 2);
18179 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18180 padding-right: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 3);
18182 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18183 padding-right: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 4);
18185 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18186 padding-right: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 5);
18188 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18189 padding-right: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 6);
18191 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18192 padding-right: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 7);
18194 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18195 padding-right: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 8);
18197 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18198 padding-right: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 9);
18200 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18201 padding-right: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 10);
18203 .aurora .treeview-toggle:hover {
18204 background-color: var
(--f7-treeview-toggle-hover-bg-color
);
18206 .aurora .treeview-toggle.active-state {
18207 background-color: var
(--f7-treeview-toggle-pressed-bg-color
);
18209 .aurora
.treeview-item-selectable
> .treeview-item-root:hover
,
18210 .aurora .treeview-item-selectable.treeview-item-root:hover {
18211 background: var
(--f7-treeview-selectable-hover-bg-color
);
18213 .aurora a.treeview-item-root:hover {
18214 background: var
(--f7-treeview-link-hover-bg-color
);
18216 .aurora a.treeview-item-root.active-state {
18217 background: var
(--f7-treeview-link-pressed-bg-color
);
18219 .aurora
.treeview-item-selected
> .treeview-item-root:hover
,
18220 .aurora .treeview-item-selected.treeview-item-root:hover {
18221 background: var
(--f7-treeview-selectable-selected-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.2));
18224 z-index: 12900 !important
;
18225 background: #000 !important
;
18228 background: rgba
(0, 0, 0, 0.85);
18230 position: absolute
;
18235 border-radius: 3px;
18237 justify-content: center
;
18238 flex-direction: column
;
18239 align-items: center
;
18240 align-content: center
;
18241 text-align: center
;
18242 -webkit-user-select: none
;
18243 -moz-user-select: none
;
18244 -ms-user-select: none
;
18247 @supports ((-webkit-backdrop-filter: blur
(10px)) or
(backdrop-filter: blur
(10px))) {
18249 background: rgba
(0, 0, 0, 0.65);
18250 -webkit-backdrop-filter: blur
(10px);
18251 backdrop-filter: blur
(10px);
18254 .vi-overlay .vi-overlay-text {
18255 text-align: center
;
18259 .vi-overlay .vi-overlay-text + .vi-overlay-play-button {
18262 .vi-overlay .vi-overlay-play-button {
18265 border-radius: 50%;
18266 border: 2px solid
#fff;
18267 position: relative
;
18269 .vi-overlay .vi-overlay-play-button.active-state {
18272 .vi-overlay .vi-overlay-play-button:before {
18276 border-top: 8px solid transparent
;
18277 border-bottom: 8px solid transparent
;
18278 border-left: 14px solid
#fff;
18279 position: absolute
;
18283 transform: translate
(-50%, -50%);
18285 /* === Elevation === */
18287 --f7-elevation-0: 0px 0px 0px 0px rgba
(0, 0, 0, 0);
18288 --f7-elevation-1: 0px 2px 1px -1px rgba
(0, 0, 0, 0.2),
18289 0px 1px 1px 0px rgba
(0, 0, 0, 0.14),
18290 0px 1px 3px 0px rgba
(0, 0, 0, 0.12);
18291 --f7-elevation-2: 0px 3px 1px -2px rgba
(0, 0, 0, 0.2),
18292 0px 2px 2px 0px rgba
(0, 0, 0, 0.14),
18293 0px 1px 5px 0px rgba
(0, 0, 0, 0.12);
18294 --f7-elevation-3: 0px 3px 3px -2px rgba
(0, 0, 0, 0.2),
18295 0px 3px 4px 0px rgba
(0, 0, 0, 0.14),
18296 0px 1px 8px 0px rgba
(0, 0, 0, 0.12);
18297 --f7-elevation-4: 0px 2px 4px -1px rgba
(0, 0, 0, 0.2),
18298 0px 4px 5px 0px rgba
(0, 0, 0, 0.14),
18299 0px 1px 10px 0px rgba
(0, 0, 0, 0.12);
18300 --f7-elevation-5: 0px 3px 5px -1px rgba
(0, 0, 0, 0.2),
18301 0px 5px 8px 0px rgba
(0, 0, 0, 0.14),
18302 0px 1px 14px 0px rgba
(0, 0, 0, 0.12);
18303 --f7-elevation-6: 0px 3px 5px -1px rgba
(0, 0, 0, 0.2),
18304 0px 6px 10px 0px rgba
(0, 0, 0, 0.14),
18305 0px 1px 18px 0px rgba
(0, 0, 0, 0.12);
18306 --f7-elevation-7: 0px 4px 5px -2px rgba
(0, 0, 0, 0.2),
18307 0px 7px 10px 1px rgba
(0, 0, 0, 0.14),
18308 0px 2px 16px 1px rgba
(0, 0, 0, 0.12);
18309 --f7-elevation-8: 0px 5px 5px -3px rgba
(0, 0, 0, 0.2),
18310 0px 8px 10px 1px rgba
(0, 0, 0, 0.14),
18311 0px 3px 14px 2px rgba
(0, 0, 0, 0.12);
18312 --f7-elevation-9: 0px 5px 6px -3px rgba
(0, 0, 0, 0.2),
18313 0px 9px 12px 1px rgba
(0, 0, 0, 0.14),
18314 0px 3px 16px 2px rgba
(0, 0, 0, 0.12);
18315 --f7-elevation-10: 0px 6px 6px -3px rgba
(0, 0, 0, 0.2),
18316 0px 10px 14px 1px rgba
(0, 0, 0, 0.14),
18317 0px 4px 18px 3px rgba
(0, 0, 0, 0.12);
18318 --f7-elevation-11: 0px 6px 7px -4px rgba
(0, 0, 0, 0.2),
18319 0px 11px 15px 1px rgba
(0, 0, 0, 0.14),
18320 0px 4px 20px 3px rgba
(0, 0, 0, 0.12);
18321 --f7-elevation-12: 0px 7px 8px -4px rgba
(0, 0, 0, 0.2),
18322 0px 12px 17px 2px rgba
(0, 0, 0, 0.14),
18323 0px 5px 22px 4px rgba
(0, 0, 0, 0.12);
18324 --f7-elevation-13: 0px 7px 8px -4px rgba
(0, 0, 0, 0.2),
18325 0px 13px 19px 2px rgba
(0, 0, 0, 0.14),
18326 0px 5px 24px 4px rgba
(0, 0, 0, 0.12);
18327 --f7-elevation-14: 0px 7px 9px -4px rgba
(0, 0, 0, 0.2),
18328 0px 14px 21px 2px rgba
(0, 0, 0, 0.14),
18329 0px 5px 26px 4px rgba
(0, 0, 0, 0.12);
18330 --f7-elevation-15: 0px 8px 9px -5px rgba
(0, 0, 0, 0.2),
18331 0px 15px 22px 2px rgba
(0, 0, 0, 0.14),
18332 0px 6px 28px 5px rgba
(0, 0, 0, 0.12);
18333 --f7-elevation-16: 0px 8px 10px -5px rgba
(0, 0, 0, 0.2),
18334 0px 16px 24px 2px rgba
(0, 0, 0, 0.14),
18335 0px 6px 30px 5px rgba
(0, 0, 0, 0.12);
18336 --f7-elevation-17: 0px 8px 11px -5px rgba
(0, 0, 0, 0.2),
18337 0px 17px 26px 2px rgba
(0, 0, 0, 0.14),
18338 0px 6px 32px 5px rgba
(0, 0, 0, 0.12);
18339 --f7-elevation-18: 0px 9px 11px -5px rgba
(0, 0, 0, 0.2),
18340 0px 18px 28px 2px rgba
(0, 0, 0, 0.14),
18341 0px 7px 34px 6px rgba
(0, 0, 0, 0.12);
18342 --f7-elevation-19: 0px 9px 12px -6px rgba
(0, 0, 0, 0.2),
18343 0px 19px 29px 2px rgba
(0, 0, 0, 0.14),
18344 0px 7px 36px 6px rgba
(0, 0, 0, 0.12);
18345 --f7-elevation-20: 0px 10px 13px -6px rgba
(0, 0, 0, 0.2),
18346 0px 20px 31px 3px rgba
(0, 0, 0, 0.14),
18347 0px 8px 38px 7px rgba
(0, 0, 0, 0.12);
18348 --f7-elevation-21: 0px 10px 13px -6px rgba
(0, 0, 0, 0.2),
18349 0px 21px 33px 3px rgba
(0, 0, 0, 0.14),
18350 0px 8px 40px 7px rgba
(0, 0, 0, 0.12);
18351 --f7-elevation-22: 0px 10px 14px -6px rgba
(0, 0, 0, 0.2),
18352 0px 22px 35px 3px rgba
(0, 0, 0, 0.14),
18353 0px 8px 42px 7px rgba
(0, 0, 0, 0.12);
18354 --f7-elevation-23: 0px 11px 14px -7px rgba
(0, 0, 0, 0.2),
18355 0px 23px 36px 3px rgba
(0, 0, 0, 0.14),
18356 0px 9px 44px 8px rgba
(0, 0, 0, 0.12);
18357 --f7-elevation-24: 0px 11px 15px -7px rgba
(0, 0, 0, 0.2),
18358 0px 24px 38px 3px rgba
(0, 0, 0, 0.14),
18359 0px 9px 46px 8px rgba
(0, 0, 0, 0.12);
18362 box-shadow: var
(--f7-elevation-0
) !important
;
18365 box-shadow: var
(--f7-elevation-1
) !important
;
18368 box-shadow: var
(--f7-elevation-2
) !important
;
18371 box-shadow: var
(--f7-elevation-3
) !important
;
18374 box-shadow: var
(--f7-elevation-4
) !important
;
18377 box-shadow: var
(--f7-elevation-5
) !important
;
18380 box-shadow: var
(--f7-elevation-6
) !important
;
18383 box-shadow: var
(--f7-elevation-7
) !important
;
18386 box-shadow: var
(--f7-elevation-8
) !important
;
18389 box-shadow: var
(--f7-elevation-9
) !important
;
18392 box-shadow: var
(--f7-elevation-10
) !important
;
18395 box-shadow: var
(--f7-elevation-11
) !important
;
18398 box-shadow: var
(--f7-elevation-12
) !important
;
18401 box-shadow: var
(--f7-elevation-13
) !important
;
18404 box-shadow: var
(--f7-elevation-14
) !important
;
18407 box-shadow: var
(--f7-elevation-15
) !important
;
18410 box-shadow: var
(--f7-elevation-16
) !important
;
18413 box-shadow: var
(--f7-elevation-17
) !important
;
18416 box-shadow: var
(--f7-elevation-18
) !important
;
18419 box-shadow: var
(--f7-elevation-19
) !important
;
18422 box-shadow: var
(--f7-elevation-20
) !important
;
18425 box-shadow: var
(--f7-elevation-21
) !important
;
18428 box-shadow: var
(--f7-elevation-22
) !important
;
18431 box-shadow: var
(--f7-elevation-23
) !important
;
18434 box-shadow: var
(--f7-elevation-24
) !important
;
18436 .device-desktop .elevation-hover-0:hover {
18437 box-shadow: var
(--f7-elevation-0
) !important
;
18439 .device-desktop .elevation-hover-1:hover {
18440 box-shadow: var
(--f7-elevation-1
) !important
;
18442 .device-desktop .elevation-hover-2:hover {
18443 box-shadow: var
(--f7-elevation-2
) !important
;
18445 .device-desktop .elevation-hover-3:hover {
18446 box-shadow: var
(--f7-elevation-3
) !important
;
18448 .device-desktop .elevation-hover-4:hover {
18449 box-shadow: var
(--f7-elevation-4
) !important
;
18451 .device-desktop .elevation-hover-5:hover {
18452 box-shadow: var
(--f7-elevation-5
) !important
;
18454 .device-desktop .elevation-hover-6:hover {
18455 box-shadow: var
(--f7-elevation-6
) !important
;
18457 .device-desktop .elevation-hover-7:hover {
18458 box-shadow: var
(--f7-elevation-7
) !important
;
18460 .device-desktop .elevation-hover-8:hover {
18461 box-shadow: var
(--f7-elevation-8
) !important
;
18463 .device-desktop .elevation-hover-9:hover {
18464 box-shadow: var
(--f7-elevation-9
) !important
;
18466 .device-desktop .elevation-hover-10:hover {
18467 box-shadow: var
(--f7-elevation-10
) !important
;
18469 .device-desktop .elevation-hover-11:hover {
18470 box-shadow: var
(--f7-elevation-11
) !important
;
18472 .device-desktop .elevation-hover-12:hover {
18473 box-shadow: var
(--f7-elevation-12
) !important
;
18475 .device-desktop .elevation-hover-13:hover {
18476 box-shadow: var
(--f7-elevation-13
) !important
;
18478 .device-desktop .elevation-hover-14:hover {
18479 box-shadow: var
(--f7-elevation-14
) !important
;
18481 .device-desktop .elevation-hover-15:hover {
18482 box-shadow: var
(--f7-elevation-15
) !important
;
18484 .device-desktop .elevation-hover-16:hover {
18485 box-shadow: var
(--f7-elevation-16
) !important
;
18487 .device-desktop .elevation-hover-17:hover {
18488 box-shadow: var
(--f7-elevation-17
) !important
;
18490 .device-desktop .elevation-hover-18:hover {
18491 box-shadow: var
(--f7-elevation-18
) !important
;
18493 .device-desktop .elevation-hover-19:hover {
18494 box-shadow: var
(--f7-elevation-19
) !important
;
18496 .device-desktop .elevation-hover-20:hover {
18497 box-shadow: var
(--f7-elevation-20
) !important
;
18499 .device-desktop .elevation-hover-21:hover {
18500 box-shadow: var
(--f7-elevation-21
) !important
;
18502 .device-desktop .elevation-hover-22:hover {
18503 box-shadow: var
(--f7-elevation-22
) !important
;
18505 .device-desktop .elevation-hover-23:hover {
18506 box-shadow: var
(--f7-elevation-23
) !important
;
18508 .device-desktop .elevation-hover-24:hover {
18509 box-shadow: var
(--f7-elevation-24
) !important
;
18511 .active-state
.elevation-pressed-0
,
18512 .device-desktop .active-state.elevation-pressed-0 {
18513 box-shadow: var
(--f7-elevation-0
) !important
;
18515 .active-state
.elevation-pressed-1
,
18516 .device-desktop .active-state.elevation-pressed-1 {
18517 box-shadow: var
(--f7-elevation-1
) !important
;
18519 .active-state
.elevation-pressed-2
,
18520 .device-desktop .active-state.elevation-pressed-2 {
18521 box-shadow: var
(--f7-elevation-2
) !important
;
18523 .active-state
.elevation-pressed-3
,
18524 .device-desktop .active-state.elevation-pressed-3 {
18525 box-shadow: var
(--f7-elevation-3
) !important
;
18527 .active-state
.elevation-pressed-4
,
18528 .device-desktop .active-state.elevation-pressed-4 {
18529 box-shadow: var
(--f7-elevation-4
) !important
;
18531 .active-state
.elevation-pressed-5
,
18532 .device-desktop .active-state.elevation-pressed-5 {
18533 box-shadow: var
(--f7-elevation-5
) !important
;
18535 .active-state
.elevation-pressed-6
,
18536 .device-desktop .active-state.elevation-pressed-6 {
18537 box-shadow: var
(--f7-elevation-6
) !important
;
18539 .active-state
.elevation-pressed-7
,
18540 .device-desktop .active-state.elevation-pressed-7 {
18541 box-shadow: var
(--f7-elevation-7
) !important
;
18543 .active-state
.elevation-pressed-8
,
18544 .device-desktop .active-state.elevation-pressed-8 {
18545 box-shadow: var
(--f7-elevation-8
) !important
;
18547 .active-state
.elevation-pressed-9
,
18548 .device-desktop .active-state.elevation-pressed-9 {
18549 box-shadow: var
(--f7-elevation-9
) !important
;
18551 .active-state
.elevation-pressed-10
,
18552 .device-desktop .active-state.elevation-pressed-10 {
18553 box-shadow: var
(--f7-elevation-10
) !important
;
18555 .active-state
.elevation-pressed-11
,
18556 .device-desktop .active-state.elevation-pressed-11 {
18557 box-shadow: var
(--f7-elevation-11
) !important
;
18559 .active-state
.elevation-pressed-12
,
18560 .device-desktop .active-state.elevation-pressed-12 {
18561 box-shadow: var
(--f7-elevation-12
) !important
;
18563 .active-state
.elevation-pressed-13
,
18564 .device-desktop .active-state.elevation-pressed-13 {
18565 box-shadow: var
(--f7-elevation-13
) !important
;
18567 .active-state
.elevation-pressed-14
,
18568 .device-desktop .active-state.elevation-pressed-14 {
18569 box-shadow: var
(--f7-elevation-14
) !important
;
18571 .active-state
.elevation-pressed-15
,
18572 .device-desktop .active-state.elevation-pressed-15 {
18573 box-shadow: var
(--f7-elevation-15
) !important
;
18575 .active-state
.elevation-pressed-16
,
18576 .device-desktop .active-state.elevation-pressed-16 {
18577 box-shadow: var
(--f7-elevation-16
) !important
;
18579 .active-state
.elevation-pressed-17
,
18580 .device-desktop .active-state.elevation-pressed-17 {
18581 box-shadow: var
(--f7-elevation-17
) !important
;
18583 .active-state
.elevation-pressed-18
,
18584 .device-desktop .active-state.elevation-pressed-18 {
18585 box-shadow: var
(--f7-elevation-18
) !important
;
18587 .active-state
.elevation-pressed-19
,
18588 .device-desktop .active-state.elevation-pressed-19 {
18589 box-shadow: var
(--f7-elevation-19
) !important
;
18591 .active-state
.elevation-pressed-20
,
18592 .device-desktop .active-state.elevation-pressed-20 {
18593 box-shadow: var
(--f7-elevation-20
) !important
;
18595 .active-state
.elevation-pressed-21
,
18596 .device-desktop .active-state.elevation-pressed-21 {
18597 box-shadow: var
(--f7-elevation-21
) !important
;
18599 .active-state
.elevation-pressed-22
,
18600 .device-desktop .active-state.elevation-pressed-22 {
18601 box-shadow: var
(--f7-elevation-22
) !important
;
18603 .active-state
.elevation-pressed-23
,
18604 .device-desktop .active-state.elevation-pressed-23 {
18605 box-shadow: var
(--f7-elevation-23
) !important
;
18607 .active-state
.elevation-pressed-24
,
18608 .device-desktop .active-state.elevation-pressed-24 {
18609 box-shadow: var
(--f7-elevation-24
) !important
;
18611 .elevation-transition-100 {
18612 transition-duration: 100ms;
18613 transition-property: box-shadow
;
18615 .elevation-transition
,
18616 .elevation-transition-200 {
18617 transition-duration: 200ms;
18618 transition-property: box-shadow
;
18620 .elevation-transition-300 {
18621 transition-duration: 300ms;
18622 transition-property: box-shadow
;
18624 .elevation-transition-400 {
18625 transition-duration: 400ms;
18626 transition-property: box-shadow
;
18628 .elevation-transition-500 {
18629 transition-duration: 500ms;
18630 transition-property: box-shadow
;
18632 /* === Typography === */
18634 --f7-typography-padding: 15px;
18635 --f7-typography-margin: 15px;
18638 --f7-typography-padding: 16px;
18639 --f7-typography-margin: 16px;
18642 --f7-typography-padding: 15px;
18643 --f7-typography-margin: 15px;
18646 display: flex
!important
;
18649 display: block
!important
;
18651 .display-inline-flex {
18652 display: inline-flex
!important
;
18654 .display-inline-block {
18655 display: inline-block
!important
;
18658 display: inline
!important
;
18661 display: none
!important
;
18664 flex-shrink: 0 !important
;
18667 flex-shrink: 1 !important
;
18670 flex-shrink: 2 !important
;
18673 flex-shrink: 3 !important
;
18676 flex-shrink: 4 !important
;
18679 flex-shrink: 5 !important
;
18682 flex-shrink: 6 !important
;
18685 flex-shrink: 7 !important
;
18688 flex-shrink: 8 !important
;
18691 flex-shrink: 9 !important
;
18694 flex-shrink: 10 !important
;
18696 .flex-direction-row {
18697 flex-direction: row
!important
;
18699 .flex-direction-row-reverse {
18700 flex-direction: row-reverse
!important
;
18702 .flex-direction-column {
18703 flex-direction: column
!important
;
18705 .flex-direction-column-reverse {
18706 flex-direction: column-reverse
!important
;
18708 .justify-content-flex-start {
18709 justify-content: flex-start
!important
;
18711 .justify-content-center {
18712 justify-content: center
!important
;
18714 .justify-content-flex-end {
18715 justify-content: flex-end
!important
;
18717 .justify-content-space-between {
18718 justify-content: space-between
!important
;
18720 .justify-content-space-around {
18721 justify-content: space-around
!important
;
18723 .justify-content-space-evenly {
18724 justify-content: space-evenly
!important
;
18726 .justify-content-stretch {
18727 justify-content: stretch
!important
;
18729 .justify-content-start {
18730 justify-content: start
!important
;
18732 .justify-content-end {
18733 justify-content: end
!important
;
18735 .justify-content-left {
18736 justify-content: left
!important
;
18738 .justify-content-right {
18739 justify-content: right
!important
;
18741 .align-content-flex-start {
18742 align-content: flex-start
!important
;
18744 .align-content-flex-end {
18745 align-content: flex-end
!important
;
18747 .align-content-center {
18748 align-content: center
!important
;
18750 .align-content-space-between {
18751 align-content: space-between
!important
;
18753 .align-content-space-around {
18754 align-content: space-around
!important
;
18756 .align-content-stretch {
18757 align-content: stretch
!important
;
18759 .align-items-baseline {
18760 align-items: baseline
!important
;
18762 .align-items-flex-start {
18763 align-items: flex-start
!important
;
18765 .align-items-flex-end {
18766 align-items: flex-end
!important
;
18768 .align-items-center {
18769 align-items: center
!important
;
18771 .align-items-stretch {
18772 align-items: stretch
!important
;
18774 .align-self-flex-start {
18775 align-self: flex-start
!important
;
18777 .align-self-flex-end {
18778 align-self: flex-end
!important
;
18780 .align-self-center {
18781 align-self: center
!important
;
18783 .align-self-stretch {
18784 align-self: stretch
!important
;
18787 text-align: left
!important
;
18789 .text-align-center {
18790 text-align: center
!important
;
18792 .text-align-right {
18793 text-align: right
!important
;
18795 .text-align-justify {
18796 text-align: justify
!important
;
18799 float: left
!important
;
18802 float: right
!important
;
18805 float: none
!important
;
18807 .vertical-align-bottom {
18808 vertical-align: bottom
!important
;
18810 .vertical-align-middle {
18811 vertical-align: middle
!important
;
18813 .vertical-align-top {
18814 vertical-align: top
!important
;
18817 padding: 0 !important
;
18820 padding-left: 0 !important
;
18822 .no-padding-right {
18823 padding-right: 0 !important
;
18825 .no-padding-horizontal {
18826 padding-left: 0 !important
;
18827 padding-right: 0 !important
;
18830 padding-top: 0 !important
;
18832 .no-padding-bottom {
18833 padding-bottom: 0 !important
;
18835 .no-padding-vertical {
18836 padding-top: 0 !important
;
18837 padding-bottom: 0 !important
;
18840 margin: 0 !important
;
18843 margin-left: 0 !important
;
18846 margin-right: 0 !important
;
18848 .no-margin-horizontal {
18849 margin-left: 0 !important
;
18850 margin-right: 0 !important
;
18853 margin-top: 0 !important
;
18855 .no-margin-bottom {
18856 margin-bottom: 0 !important
;
18858 .no-margin-vertical {
18859 margin-top: 0 !important
;
18860 margin-bottom: 0 !important
;
18863 width: auto
!important
;
18866 width: 100% !important
;
18869 padding: var
(--f7-typography-padding
) !important
;
18872 padding: calc
(var
(--f7-typography-padding
) / 2) !important
;
18875 padding-top: var
(--f7-typography-padding
) !important
;
18877 .padding-top-half {
18878 padding-top: calc
(var
(--f7-typography-padding
) / 2) !important
;
18881 padding-bottom: var
(--f7-typography-padding
) !important
;
18883 .padding-bottom-half {
18884 padding-bottom: calc
(var
(--f7-typography-padding
) / 2) !important
;
18887 padding-left: var
(--f7-typography-padding
) !important
;
18889 .padding-left-half {
18890 padding-left: calc
(var
(--f7-typography-padding
) / 2) !important
;
18893 padding-right: var
(--f7-typography-padding
) !important
;
18895 .padding-right-half {
18896 padding-right: calc
(var
(--f7-typography-padding
) / 2) !important
;
18898 .padding-vertical {
18899 padding-top: var
(--f7-typography-padding
) !important
;
18900 padding-bottom: var
(--f7-typography-padding
) !important
;
18902 .padding-vertical-half {
18903 padding-top: calc
(var
(--f7-typography-padding
) / 2) !important
;
18904 padding-bottom: calc
(var
(--f7-typography-padding
) / 2) !important
;
18906 .padding-horizontal {
18907 padding-left: var
(--f7-typography-padding
) !important
;
18908 padding-right: var
(--f7-typography-padding
) !important
;
18910 .padding-horizontal-half {
18911 padding-left: calc
(var
(--f7-typography-padding
) / 2) !important
;
18912 padding-right: calc
(var
(--f7-typography-padding
) / 2) !important
;
18915 margin: var
(--f7-typography-margin
) !important
;
18918 margin: calc
(var
(--f7-typography-margin
) / 2) !important
;
18921 margin-top: var
(--f7-typography-margin
) !important
;
18924 margin-top: calc
(var
(--f7-typography-margin
) / 2) !important
;
18927 margin-bottom: var
(--f7-typography-margin
) !important
;
18929 .margin-bottom-half {
18930 margin-bottom: calc
(var
(--f7-typography-margin
) / 2) !important
;
18933 margin-left: var
(--f7-typography-margin
) !important
;
18935 .margin-left-half {
18936 margin-left: calc
(var
(--f7-typography-margin
) / 2) !important
;
18939 margin-right: var
(--f7-typography-margin
) !important
;
18941 .margin-right-half {
18942 margin-right: calc
(var
(--f7-typography-margin
) / 2) !important
;
18945 margin-top: var
(--f7-typography-margin
) !important
;
18946 margin-bottom: var
(--f7-typography-margin
) !important
;
18948 .margin-vertical-half {
18949 margin-top: calc
(var
(--f7-typography-margin
) / 2) !important
;
18950 margin-bottom: calc
(var
(--f7-typography-margin
) / 2) !important
;
18952 .margin-horizontal {
18953 margin-left: var
(--f7-typography-margin
) !important
;
18954 margin-right: var
(--f7-typography-margin
) !important
;
18956 .margin-horizontal-half {
18957 margin-left: calc
(var
(--f7-typography-margin
) / 2) !important
;
18958 margin-right: calc
(var
(--f7-typography-margin
) / 2) !important
;
18960 [class
*="text-color-"] {
18961 color: var
(--f7-theme-color-text-color
) !important
;
18963 [class
*="bg-color-"] {
18964 background-color: var
(--f7-theme-color-bg-color
) !important
;
18966 [class
*="border-color-"] {
18967 border-color: var
(--f7-theme-color-border-color
) !important
;