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
;
625 -webkit-text-size-adjust: 100%;
626 -webkit-font-smoothing: antialiased
;
627 font-family: var
(--f7-font-family
);
628 font-size: var
(--f7-font-size
);
629 line-height: var
(--f7-line-height
);
630 color: var
(--f7-text-color
);
633 color: var
(--f7-text-color
);
637 box-sizing: border-box
;
639 .framework7-initializing
*,
640 .framework7-initializing
*:before
,
641 .framework7-initializing *:after {
642 transition-duration: 0ms !important
;
649 touch-action: manipulation
;
651 @media (width: 1024px) and
(height: 691px) and
(orientation: landscape
) {
658 @media (width: 1024px) and
(height: 692px) and
(orientation: landscape
) {
666 -webkit-tap-highlight-color: rgba
(0, 0, 0, 0);
667 -webkit-touch-callout: none
;
677 text-decoration: none
;
678 color: var
(--f7-theme-color
);
688 opacity: 0.55 !important
;
689 pointer-events: none
!important
;
691 html
.device-full-viewport
,
692 html
.device-full-viewport body
{
701 display: none
!important
;
703 @media (width: 1024px) and
(height: 691px) and
(orientation: landscape
) {
706 .ios .framework7-root {
710 @media (width: 1024px) and
(height: 692px) and
(orientation: landscape
) {
713 .ios .framework7-root {
723 display: none
!important
;
729 .aurora
.if-not-aurora
,
730 .aurora .not-aurora {
731 display: none
!important
;
733 /* === Statusbar === */
735 --f7-statusbar-height: 0px;
736 --f7-statusbar-bg-color: var
(--f7-bars-bg-color
);
739 --f7-statusbar-height: var
(--f7-safe-area-top
, 20px);
742 --f7-statusbar-height: var
(--f7-safe-area-top
, 24px);
744 .with-statusbar.ios:not(.device-ios):not(.device-android) {
745 --f7-statusbar-height: 20px;
747 .with-statusbar.md:not(.device-ios):not(.device-android) {
748 --f7-statusbar-height: 24px;
750 @supports not
(top: env
(safe-area-inset-top
)) {
751 .with-statusbar.device-ios {
752 --f7-statusbar-height: 20px;
755 @supports not
(top: env
(safe-area-inset-top
)) {
756 .with-statusbar.device-android {
757 --f7-statusbar-height: 24px;
766 box-sizing: border-box
;
768 height: var
(--f7-statusbar-height
);
769 background: var
(--f7-statusbar-bg-color
, var
(--f7-bars-bg-color
));
772 padding-top: var
(--f7-statusbar-height
);
781 box-sizing: border-box
;
783 .framework7-root
> .view
,
784 .framework7-root > .views {
785 height: calc
(100% - var
(--f7-appbar-app-offset
, 0px));
789 --f7-page-master-width: 320px;
790 --f7-page-master-border-color: rgba
(0, 0, 0, 0.1);
791 --f7-page-master-border-width: 1px;
792 --f7-page-swipeback-transition-duration: 400ms;
794 --f7-page-content-extra-padding-top: 0px;
795 --f7-page-content-extra-padding-bottom: 0px;
799 --f7-page-bg-color: #efeff4;
800 --f7-page-transition-duration: 400ms;
803 --f7-page-bg-color: #fff;
804 --f7-page-transition-duration: 250ms;
807 --f7-page-bg-color: #f3f3f3;
808 --f7-page-transition-duration: 400ms;
811 --f7-page-bg-color: #171717;
812 --f7-page-master-border-color: rgba
(255, 255, 255, 0.1);
821 box-sizing: border-box
;
828 background-color: var
(--f7-page-bg-color
);
834 .page-with-navbar-large-collapsed {
835 --f7-navbar-large-collapse-progress: 1;
838 pointer-events: none
;
841 will-change: scroll-position
;
843 -webkit-overflow-scrolling: touch
;
844 box-sizing: border-box
;
848 padding-top: calc
(var
(--f7-page-navbar-offset
, 0px) + var
(--f7-page-toolbar-top-offset
, 0px) + var
(--f7-page-subnavbar-offset
, 0px) + var
(--f7-page-searchbar-offset
, 0px) + var
(--f7-page-content-extra-padding-top
, 0px));
849 padding-bottom: calc
(var
(--f7-page-toolbar-bottom-offset
, 0px) + var
(--f7-safe-area-bottom
) + var
(--f7-page-content-extra-padding-bottom
, 0px));
852 .page-transitioning
.page-shadow-effect
,
853 .page-transitioning .page-opacity-effect {
854 transition-duration: var
(--f7-page-transition-duration
);
856 .page-transitioning-swipeback
,
857 .page-transitioning-swipeback
.page-shadow-effect
,
858 .page-transitioning-swipeback .page-opacity-effect {
859 transition-duration: var
(--f7-page-swipeback-transition-duration
);
861 .router-transition-forward
.page-next
,
862 .router-transition-backward
.page-next
,
863 .router-transition-forward
.page-current
,
864 .router-transition-backward
.page-current
,
865 .router-transition-forward
.page-previous:not
(.stacked
),
866 .router-transition-backward .page-previous:not(.stacked) {
867 pointer-events: none
;
869 .page-shadow-effect {
878 background: linear-gradient
(to right
, rgba
(0, 0, 0, 0) 0%, rgba
(0, 0, 0, 0) 10%, rgba
(0, 0, 0, 0.01) 50%, rgba
(0, 0, 0, 0.2) 100%);
880 .page-opacity-effect {
884 background: rgba
(0, 0, 0, 0.1);
891 .ios .page-previous {
892 transform: translate3d
(-20%, 0, 0);
895 transform: translate3d
(100%, 0, 0);
897 .ios .page-previous .page-opacity-effect {
900 .ios .page-previous:after {
903 .ios .page-current .page-shadow-effect {
906 .ios
.router-transition-forward
.page-next
,
907 .ios .router-transition-forward .page-current {
908 will-change: transform
;
910 .ios .router-transition-forward .page-next {
911 animation: ios-page-next-to-current var
(--f7-page-transition-duration
) forwards
;
913 .ios .router-transition-forward .page-next:before {
922 background: linear-gradient
(to right
, rgba
(0, 0, 0, 0) 0%, rgba
(0, 0, 0, 0) 10%, rgba
(0, 0, 0, 0.01) 50%, rgba
(0, 0, 0, 0.2) 100%);
923 animation: ios-page-element-fade-in var
(--f7-page-transition-duration
) forwards
;
925 .ios .router-transition-forward .page-current {
926 animation: ios-page-current-to-previous var
(--f7-page-transition-duration
) forwards
;
928 .ios .router-transition-forward .page-current:after {
932 background: rgba
(0, 0, 0, 0.1);
938 animation: ios-page-element-fade-in var
(--f7-page-transition-duration
) forwards
;
940 .ios
.router-transition-backward
.page-previous
,
941 .ios .router-transition-backward .page-current {
942 will-change: transform
;
944 .ios .router-transition-backward .page-previous {
945 animation: ios-page-previous-to-current var
(--f7-page-transition-duration
) forwards
;
947 .ios .router-transition-backward .page-previous:after {
951 background: rgba
(0, 0, 0, 0.1);
957 animation: ios-page-element-fade-out var
(--f7-page-transition-duration
) forwards
;
959 .ios .router-transition-backward .page-current {
960 animation: ios-page-current-to-next var
(--f7-page-transition-duration
) forwards
;
962 .ios .router-transition-backward .page-current:before {
971 background: linear-gradient
(to right
, rgba
(0, 0, 0, 0) 0%, rgba
(0, 0, 0, 0) 10%, rgba
(0, 0, 0, 0.01) 50%, rgba
(0, 0, 0, 0.2) 100%);
972 animation: ios-page-element-fade-out var
(--f7-page-transition-duration
) forwards
;
974 .ios
.router-dynamic-navbar-inside
.page-shadow-effect
,
975 .ios .router-dynamic-navbar-inside .page-opacity-effect {
976 top: var
(--f7-navbar-height
);
978 .ios
.router-dynamic-navbar-inside
.page-next:before
,
979 .ios
.router-dynamic-navbar-inside
.page-current:after
,
980 .ios
.router-dynamic-navbar-inside
.page-current:before
,
981 .ios .router-dynamic-navbar-inside .page-previous:after {
982 top: var
(--f7-navbar-height
);
984 @keyframes ios-page-next-to-current
{
986 transform: translate3d
(100%, 0, 0);
989 transform: translate3d
(0%, 0, 0);
992 @keyframes ios-page-previous-to-current
{
994 transform: translate3d
(-20%, 0, 0);
997 transform: translate3d
(0%, 0, 0);
1000 @keyframes ios-page-current-to-previous
{
1002 transform: translate3d
(0, 0, 0);
1005 transform: translate3d
(-20%, 0, 0);
1008 @keyframes ios-page-current-to-next
{
1010 transform: translate3d
(0, 0, 0);
1013 transform: translate3d
(100%, 0, 0);
1016 @keyframes ios-page-element-fade-in
{
1024 @keyframes ios-page-element-fade-out
{
1033 transform: translate3d
(0, 56px, 0);
1035 pointer-events: none
;
1037 .md .page-next.page-next-on-right {
1038 transform: translate3d
(100%, 0, 0);
1040 .md .router-transition-forward .page-next {
1041 will-change: transform
, opacity
;
1042 animation: md-page-next-to-current var
(--f7-page-transition-duration
) forwards
;
1044 .md .router-transition-forward .page-current {
1047 .md .router-transition-backward .page-current {
1048 will-change: transform
, opacity
;
1049 animation: md-page-current-to-next var
(--f7-page-transition-duration
) forwards
;
1051 .md .router-transition-backward .page-previous {
1054 @keyframes md-page-next-to-current
{
1056 transform: translate3d
(0, 56px, 0);
1060 transform: translate3d
(0, 0px, 0);
1064 @keyframes md-page-current-to-next
{
1066 transform: translate3d
(0, 0, 0);
1070 transform: translate3d
(0, 56px, 0);
1074 .aurora .page-next {
1075 pointer-events: none
;
1076 transform: translate3d
(100%, 0px, 0);
1078 .aurora .page-next.page-next-on-right {
1079 transform: translate3d
(100%, 0, 0);
1081 .aurora .page-previous .page-opacity-effect {
1084 .aurora .page-previous:after {
1087 .aurora .router-transition-forward .page-next {
1088 will-change: transform
;
1089 animation: aurora-page-next-to-current var
(--f7-page-transition-duration
) forwards
;
1091 .aurora .router-transition-forward .page-current {
1094 .aurora .router-transition-forward .page-current:after {
1098 background: rgba
(0, 0, 0, 0.1);
1104 animation: aurora-page-element-fade-in var
(--f7-page-transition-duration
) forwards
;
1106 .aurora .router-transition-backward .page-current {
1107 will-change: transform
, opacity
;
1108 animation: aurora-page-current-to-next var
(--f7-page-transition-duration
) forwards
;
1110 .aurora .router-transition-backward .page-previous {
1113 .aurora .router-transition-backward .page-previous:after {
1117 background: rgba
(0, 0, 0, 0.1);
1123 animation: aurora-page-element-fade-out var
(--f7-page-transition-duration
) forwards
;
1125 @keyframes aurora-page-next-to-current
{
1127 transform: translate3d
(100%, 0, 0);
1130 transform: translate3d
(0, 0px, 0);
1133 @keyframes aurora-page-current-to-next
{
1135 transform: translate3d
(0, 0, 0);
1138 transform: translate3d
(100%, 0, 0);
1141 @keyframes aurora-page-element-fade-in
{
1149 @keyframes aurora-page-element-fade-out
{
1157 .view:not(.view-master-detail) .page-master-stacked {
1160 .view:not(.view-master-detail) .navbar-master-stacked {
1163 .view-master-detail
.page-master
,
1164 .view-master-detail .navbar-master {
1165 width: var
(--f7-page-master-width
);
1166 --f7-safe-area-right: 0px;
1167 --f7-safe-area-outer-right: 0px;
1168 border-right: var
(--f7-page-master-border-width
) solid var
(--f7-page-master-border-color
);
1170 .view-master-detail
.page-master-detail
,
1171 .view-master-detail .navbar-master-detail {
1172 width: calc
(100% - var
(--f7-page-master-width
));
1173 --f7-safe-area-left: 0px;
1174 --f7-safe-area-outer-left: 0px;
1175 left: var
(--f7-page-master-width
);
1177 .view-master-detail .page-master {
1180 pointer-events: auto
;
1182 .view-master-detail
.page-master:before
,
1183 .view-master-detail .page-master:after {
1186 .view-master-detail.router-transition .page-master {
1191 --f7-link-highlight-black: rgba
(0, 0, 0, 0.1);
1192 --f7-link-highlight-white: rgba
(255, 255, 255, 0.15);
1193 --f7-link-highlight-color: var
(--f7-link-highlight-black
);
1196 --f7-link-highlight-color: var
(--f7-link-highlight-white
);
1200 display: inline-flex
;
1201 align-items: center
;
1202 align-content: center
;
1203 justify-content: center
;
1205 box-sizing: border-box
;
1206 transform: translate3d
(0, 0, 0);
1216 transition: opacity
300ms;
1218 .ios .link.active-state {
1220 transition-duration: 0ms;
1223 transition: opacity
300ms;
1225 .aurora .link.active-state {
1227 transition-duration: 0ms;
1229 /* === Navbar === */
1232 --f7-navbar-bg-color: var(--f7-bars-bg-color);
1233 --f7-navbar-bg-image: var(--f7-bars-bg-image);
1234 --f7-navbar-border-color: var(--f7-bars-border-color);
1235 --f7-navbar-link-color: var(--f7-bars-link-color);
1236 --f7-navbar-text-color: var(--f7-bars-text-color);
1238 --f7-navbar-hide-show-transition-duration: 400ms;
1239 --f7-navbar-title-line-height: 1.2;
1240 --f7-navbar-title-font-size: inherit
;
1241 --f7-navbar-subtitle-text-align: inherit
;
1242 --f7-navbar-large-title-line-height: 1.2;
1243 --f7-navbar-large-title-text-color: inherit
;
1246 --f7-navbar-height: 44px;
1247 --f7-navbar-tablet-height: 44px;
1248 --f7-navbar-font-size: 17px;
1249 --f7-navbar-inner-padding-left: 8px;
1250 --f7-navbar-inner-padding-right: 8px;
1251 --f7-navbar-title-font-weight: 600;
1252 --f7-navbar-title-margin-left: 0;
1253 --f7-navbar-title-margin-right: 0;
1254 --f7-navbar-title-text-align: center
;
1255 --f7-navbar-subtitle-text-color: #6d6d72;
1256 --f7-navbar-subtitle-font-size: 10px;
1257 --f7-navbar-subtitle-line-height: 1;
1258 --f7-navbar-shadow-image: none
;
1259 --f7-navbar-large-title-height: 52px;
1260 --f7-navbar-large-title-font-size: 34px;
1261 --f7-navbar-large-title-font-weight: 700;
1262 --f7-navbar-large-title-letter-spacing: -0.03em;
1263 --f7-navbar-large-title-padding-left: 15px;
1264 --f7-navbar-large-title-padding-right: 15px;
1266 --f7-navbar-link-height: var(--f7-navbar-height);
1267 --f7-navbar-link-line-height: var(--f7-navbar-height);
1272 --f7-navbar-subtitle-text-color: #8e8e93;
1275 --f7-navbar-height: 56px;
1276 --f7-navbar-tablet-height: 64px;
1277 --f7-navbar-font-size: 20px;
1278 --f7-navbar-inner-padding-left: 0px;
1279 --f7-navbar-inner-padding-right: 0px;
1280 --f7-navbar-title-font-weight: 500;
1281 --f7-navbar-title-margin-left: 16px;
1282 --f7-navbar-title-margin-right: 16px;
1283 --f7-navbar-title-text-align: left
;
1284 --f7-navbar-subtitle-text-color: rgba
(0, 0, 0, 0.85);
1285 --f7-navbar-subtitle-font-size: 14px;
1286 --f7-navbar-subtitle-line-height: 1.2;
1287 --f7-navbar-shadow-image: var
(--f7-bars-shadow-bottom-image
);
1288 --f7-navbar-large-title-font-size: 34px;
1289 --f7-navbar-large-title-height: 56px;
1290 --f7-navbar-large-title-font-weight: 500;
1291 --f7-navbar-large-title-letter-spacing: 0;
1292 --f7-navbar-large-title-padding-left: 16px;
1293 --f7-navbar-large-title-padding-right: 16px;
1295 --f7-navbar-link-height: var(--f7-navbar-height);
1296 --f7-navbar-link-line-height: var(--f7-navbar-height);
1301 --f7-navbar-subtitle-text-color: rgba
(255, 255, 255, 0.85);
1304 --f7-navbar-height: 38px;
1305 --f7-navbar-tablet-height: 38px;
1306 --f7-navbar-font-size: 14px;
1307 --f7-navbar-inner-padding-left: 15px;
1308 --f7-navbar-inner-padding-right: 15px;
1309 --f7-navbar-title-font-weight: 600;
1310 --f7-navbar-title-margin-left: 0;
1311 --f7-navbar-title-margin-right: 0;
1312 --f7-navbar-title-text-align: center
;
1313 --f7-navbar-subtitle-text-color: rgba
(0, 0, 0, 0.6);
1314 --f7-navbar-subtitle-font-size: 12px;
1315 --f7-navbar-subtitle-line-height: 1;
1316 --f7-navbar-shadow-image: none
;
1317 --f7-navbar-large-title-height: 38px;
1318 --f7-navbar-large-title-font-size: 26px;
1319 --f7-navbar-large-title-font-weight: bold
;
1320 --f7-navbar-large-title-letter-spacing: -0.03em;
1321 --f7-navbar-large-title-padding-left: 15px;
1322 --f7-navbar-large-title-padding-right: 15px;
1323 --f7-navbar-link-height: auto
;
1324 --f7-navbar-link-line-height: inherit
;
1326 .aurora
.theme-dark
,
1327 .aurora.theme-dark {
1328 --f7-navbar-subtitle-text-color: rgba
(255, 255, 255, 0.5);
1331 --f7-navbar-large-collapse-progress: 0;
1337 -webkit-backface-visibility: hidden
;
1338 backface-visibility: hidden
;
1339 box-sizing: border-box
;
1341 transform: translate3d
(0, 0, 0);
1342 height: var
(--f7-navbar-height
);
1343 background-image: var
(--f7-navbar-bg-image
, var
(--f7-bars-bg-image
));
1344 background-color: var
(--f7-navbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
1345 color: var
(--f7-navbar-text-color
, var
(--f7-bars-text-color
));
1346 font-size: var
(--f7-navbar-font-size
);
1352 color: var
(--f7-navbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
1356 justify-content: flex-start
;
1357 line-height: var
(--f7-navbar-link-line-height
, var
(--f7-navbar-height
));
1358 height: var
(--f7-navbar-link-height
, var
(--f7-navbar-height
));
1369 text-overflow: ellipsis
;
1370 white-space: nowrap
;
1372 font-weight: var
(--f7-navbar-title-font-weight
);
1373 display: inline-block
;
1374 line-height: var
(--f7-navbar-title-line-height
);
1375 text-align: var
(--f7-navbar-title-text-align
);
1376 font-size: var
(--f7-navbar-title-font-size
);
1377 margin-left: var
(--f7-navbar-title-margin-left
);
1378 margin-right: var
(--f7-navbar-title-margin-left
);
1382 color: var
(--f7-navbar-subtitle-text-color
);
1383 font-weight: normal
;
1384 font-size: var
(--f7-navbar-subtitle-font-size
);
1385 line-height: var
(--f7-navbar-subtitle-line-height
);
1386 text-align: var
(--f7-navbar-subtitle-text-align
);
1392 justify-content: flex-start
;
1393 align-items: center
;
1394 transform: translate3d
(0, 0, 0);
1396 .navbar .right:first-child {
1400 .navbar
.no-hairline:after
,
1401 .navbar.no-border:after {
1402 display: none
!important
;
1404 .navbar
.no-hairline
.title-large:after
,
1405 .navbar.no-border .title-large:after {
1406 display: none
!important
;
1408 .navbar.no-shadow:before {
1409 display: none
!important
;
1411 .navbar.navbar-hidden:before {
1412 opacity: 0 !important
;
1416 -webkit-backface-visibility: hidden
;
1417 backface-visibility: hidden
;
1422 background-color: var
(--f7-navbar-border-color
, var
(--f7-bars-border-color
));
1431 transform-origin: 50% 100%;
1432 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
1442 pointer-events: none
;
1443 background: var
(--f7-navbar-shadow-image
);
1448 @media (min-width: 768px) {
1450 --f7-navbar-height: var
(--f7-navbar-tablet-height
);
1453 .navbar-transitioning
,
1454 .navbar-transitioning:before
,
1455 .navbar-transitioning
.title
,
1456 .navbar-transitioning
.title-large
,
1457 .navbar-transitioning
.title-large-inner
,
1458 .navbar-transitioning
.title-large-text
,
1459 .navbar-transitioning .subnavbar {
1460 transition-duration: var
(--f7-navbar-hide-show-transition-duration
);
1462 .navbar-page-transitioning {
1463 transition-duration: var
(--f7-page-swipeback-transition-duration
) !important
;
1465 .navbar-page-transitioning
.title-large-text
,
1466 .navbar-page-transitioning .title-large-inner {
1467 transition-duration: var
(--f7-page-swipeback-transition-duration
) !important
;
1470 transform: translate3d
(0, -100%, 0);
1472 .navbar-large-hidden {
1473 --f7-navbar-large-collapse-progress: 1;
1480 height: var
(--f7-navbar-height
);
1482 align-items: center
;
1483 box-sizing: border-box
;
1484 padding: 0 calc
(var
(--f7-navbar-inner-padding-right
) + var
(--f7-safe-area-right
)) 0 calc
(var
(--f7-navbar-inner-padding-left
) + var
(--f7-safe-area-left
));
1486 .navbar-inner.stacked {
1494 .navbar-large:before {
1495 transform: translateY
(calc
((1 - var
(--f7-navbar-large-collapse-progress
)) * var
(--f7-navbar-large-title-height
)));
1497 .navbar-inner-large > .title {
1498 opacity: calc
(-1 + 2 * var
(--f7-navbar-large-collapse-progress
));
1500 .navbar-large-collapsed
,
1501 .navbar-inner-large-collapsed {
1502 --f7-navbar-large-collapse-progress: 1;
1504 .navbar .title-large {
1505 box-sizing: border-box
;
1511 align-items: center
;
1512 white-space: nowrap
;
1513 transform: translate3d
(0px, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1514 will-change: transform
, opacity
;
1515 transition-property: transform
;
1517 background-image: var
(--f7-navbar-bg-image
, var
(--f7-bars-bg-image
));
1518 background-color: var
(--f7-navbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
1519 height: calc
(var
(--f7-navbar-large-title-height
) + 1px);
1522 transform-origin: calc
(var
(--f7-navbar-large-title-padding-left
) + var
(--f7-safe-area-left
)) center
;
1524 .navbar .title-large:after {
1527 background-color: var
(--f7-navbar-border-color
, var
(--f7-bars-border-color
));
1536 transform-origin: 50% 100%;
1537 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
1540 .title-large-inner .title {
1541 text-overflow: ellipsis
;
1542 white-space: nowrap
;
1543 color: var
(--f7-navbar-large-title-text-color
);
1544 letter-spacing: var
(--f7-navbar-large-title-letter-spacing
);
1545 font-size: var
(--f7-navbar-large-title-font-size
);
1546 font-weight: var
(--f7-navbar-large-title-font-weight
);
1547 line-height: var
(--f7-navbar-large-title-line-height
);
1548 padding-left: calc
(var
(--f7-navbar-large-title-padding-left
) + var
(--f7-safe-area-left
));
1549 padding-right: calc
(var
(--f7-navbar-large-title-padding-right
) + var
(--f7-safe-area-right
));
1550 transform-origin: calc
(var
(--f7-navbar-large-title-padding-left
) + var
(--f7-safe-area-left
)) center
;
1553 .title-large-inner {
1554 box-sizing: border-box
;
1556 transform: translate3d
(0, calc
(var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1557 transition-property: transform
, opacity
;
1560 .navbar-no-title-large-transition
.title-large
,
1561 .navbar-no-title-large-transition
.title-large-text
,
1562 .navbar-no-title-large-transition .title-large-inner {
1563 transition-duration: 0ms;
1566 --f7-page-navbar-offset: var
(--f7-navbar-height
);
1568 .navbar
~ * .page-with-navbar-large
,
1569 .navbar
~ .page-with-navbar-large
,
1570 .page-with-navbar-large .navbar ~ * {
1571 --f7-page-navbar-offset: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
1574 .page.no-navbar .navbar ~ * {
1575 --f7-page-navbar-offset: 0px;
1578 --f7-navbarLeftTextOffset: calc
(4px + 12px + var
(--f7-navbar-inner-padding-left
));
1579 --f7-navbarTitleLargeOffset: var
(--f7-navbar-large-title-padding-left
);
1581 .ios .navbar .material-icons {
1584 .ios .navbar .f7-icons {
1587 .ios .navbar a.icon-only {
1590 justify-content: center
;
1592 .ios
.navbar
.left a
+ a
,
1593 .ios .navbar .right a + a {
1599 .ios .navbar .left {
1602 .ios .navbar .right {
1605 .ios .navbar .right:first-child {
1606 right: calc
(8px + var
(--f7-safe-area-right
));
1608 .ios .navbar-inner {
1609 justify-content: space-between
;
1611 .ios .navbar-inner-left-title {
1612 justify-content: flex-start
;
1614 .ios .navbar-inner-left-title .right {
1617 .ios .navbar-inner-left-title .title {
1621 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
),
1622 .ios .view:not(.view-master-detail) .navbar-previous {
1623 pointer-events: none
;
1625 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .title-large
,
1626 .ios .view:not(.view-master-detail) .navbar-previous .title-large {
1627 transform: translateY
(-100%);
1631 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .title-large
.title-large-text
,
1632 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
1633 transform: scale
(0.5);
1636 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .title-large
.title-large-inner
,
1637 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner {
1638 transform: translateX
(-100%);
1642 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .left
,
1643 .ios
.view:not
(.view-master-detail
) .navbar-previous
.left
,
1644 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .right
,
1645 .ios
.view:not
(.view-master-detail
) .navbar-previous
.right
,
1646 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) > .title
,
1647 .ios
.view:not
(.view-master-detail
) .navbar-previous
> .title
,
1648 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .subnavbar
,
1649 .ios
.view:not
(.view-master-detail
) .navbar-previous
.subnavbar
,
1650 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .fading
,
1651 .ios .view:not(.view-master-detail) .navbar-previous .fading {
1654 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .sliding
,
1655 .ios .view:not(.view-master-detail) .navbar-previous .sliding {
1658 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
) .subnavbar
.sliding
,
1659 .ios
.view:not
(.view-master-detail
) .navbar-previous
.subnavbar
.sliding
,
1660 .ios
.view-master-detail
.navbar-previous:not
(.navbar-master
).sliding
.subnavbar
,
1661 .ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar {
1663 transform: translate3d
(-100%, 0, 0);
1666 pointer-events: none
;
1668 .ios .navbar-next .title-large {
1669 transform: translateX
(100%);
1672 .ios
.navbar-next
.title-large
.title-large-text
,
1673 .ios .navbar-next .title-large .title-large-inner {
1676 .ios
.navbar-next
.left
,
1677 .ios
.navbar-next
.right
,
1678 .ios
.navbar-next
> .title
,
1679 .ios
.navbar-next
.subnavbar
,
1680 .ios .navbar-next .fading {
1683 .ios .navbar-next .sliding {
1686 .ios
.navbar-next
.sliding
.left
,
1687 .ios
.navbar-next
.sliding
.right
,
1688 .ios
.navbar-next
.sliding
> .title
,
1689 .ios .navbar-next.sliding .subnavbar {
1692 .ios
.navbar-next
.subnavbar
.sliding
,
1693 .ios .navbar-next.sliding .subnavbar {
1695 transform: translate3d
(100%, 0, 0);
1697 .ios
.router-dynamic-navbar-inside
.navbar-next
.title-large
,
1698 .ios
.router-dynamic-navbar-inside
.navbar-next
.title-large-text
,
1699 .ios .router-dynamic-navbar-inside .navbar-next .title-large-inner {
1702 .ios .router-dynamic-navbar-inside .navbar-previous .title-large {
1704 transform: translate3d
(0px, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1706 .ios
.router-dynamic-navbar-inside
.navbar-previous
.title-large-text
,
1707 .ios .router-dynamic-navbar-inside .navbar-previous .title-large-inner {
1708 transform: translate3d
(0, calc
(var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
1710 .ios .router-transition .navbar {
1711 transition-duration: var
(--f7-page-transition-duration
);
1713 .ios .router-transition .title-large {
1716 .ios
.router-transition
.navbar-current
.left
,
1717 .ios
.router-transition
.navbar-current
> .title
,
1718 .ios
.router-transition
.navbar-current
.right
,
1719 .ios .router-transition .navbar-current .subnavbar {
1720 animation: ios-navbar-element-fade-out var
(--f7-page-transition-duration
) forwards
;
1722 .ios
.router-transition
.navbar-current
.sliding
,
1723 .ios
.router-transition
.navbar-current
.left
.sliding
.icon
+ span
,
1724 .ios
.router-transition
.navbar-current
.sliding
.left
,
1725 .ios
.router-transition
.navbar-current
.sliding
.left
.icon
+ span
,
1726 .ios
.router-transition
.navbar-current
.sliding
> .title
,
1727 .ios .router-transition .navbar-current.sliding .right {
1728 transition-duration: var
(--f7-page-transition-duration
);
1729 opacity: 0 !important
;
1732 .ios
.router-transition
.navbar-current
.sliding
.subnavbar
,
1733 .ios .router-transition .navbar-current .sliding.subnavbar {
1734 transition-duration: var
(--f7-page-transition-duration
);
1738 .ios
.router-transition-forward
.navbar-next
.left
,
1739 .ios
.router-transition-backward
.navbar-previous
.left
,
1740 .ios
.router-transition-forward
.navbar-next
> .title
,
1741 .ios
.router-transition-backward
.navbar-previous
> .title
,
1742 .ios
.router-transition-forward
.navbar-next
.right
,
1743 .ios
.router-transition-backward
.navbar-previous
.right
,
1744 .ios
.router-transition-forward
.navbar-next
.subnavbar
,
1745 .ios .router-transition-backward .navbar-previous .subnavbar {
1746 animation: ios-navbar-element-fade-in var
(--f7-page-transition-duration
) forwards
;
1748 .ios
.router-transition-forward
.navbar-next
.sliding
,
1749 .ios
.router-transition-backward
.navbar-previous
.sliding
,
1750 .ios
.router-transition-forward
.navbar-next
.left
.sliding
.icon
+ span
,
1751 .ios
.router-transition-backward
.navbar-previous
.left
.sliding
.icon
+ span
,
1752 .ios
.router-transition-forward
.navbar-next
.sliding
.left
,
1753 .ios
.router-transition-backward
.navbar-previous
.sliding
.left
,
1754 .ios
.router-transition-forward
.navbar-next
.sliding
.left
.icon
+ span
,
1755 .ios
.router-transition-backward
.navbar-previous
.sliding
.left
.icon
+ span
,
1756 .ios
.router-transition-forward
.navbar-next
.sliding
> .title
,
1757 .ios
.router-transition-backward
.navbar-previous
.sliding
> .title
,
1758 .ios
.router-transition-forward
.navbar-next
.sliding
.right
,
1759 .ios
.router-transition-backward
.navbar-previous
.sliding
.right
,
1760 .ios
.router-transition-forward
.navbar-next
.sliding
.subnavbar
,
1761 .ios .router-transition-backward .navbar-previous.sliding .subnavbar {
1762 transition-duration: var
(--f7-page-transition-duration
);
1764 transform: translate3d
(0, 0, 0) !important
;
1765 opacity: 1 !important
;
1767 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1770 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1771 animation: ios-navbar-title-large-text-slide-up var
(--f7-page-transition-duration
) forwards
, ios-navbar-title-large-text-fade-out var
(--f7-page-transition-duration
) forwards
;
1773 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1774 animation: ios-navbar-title-large-slide-up var
(--f7-page-transition-duration
) forwards
;
1776 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
1777 animation: ios-navbar-title-large-text-fade-out var
(--f7-page-transition-duration
) forwards
, ios-navbar-title-large-text-scale-out var
(--f7-page-transition-duration
) forwards
;
1779 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large .title-large-inner {
1780 animation: ios-navbar-title-large-inner-current-to-previous var
(--f7-page-transition-duration
) forwards
;
1782 .ios .router-transition-forward:not(.router-dynamic-navbar-inside) .navbar-next.router-navbar-transition-from-large .left .back span {
1783 animation: ios-navbar-back-text-next-to-current var
(--f7-page-transition-duration
) forwards
;
1785 transform-origin: left center
;
1787 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1790 .ios
.router-transition-forward
.navbar-next
.router-navbar-transition-from-large
.router-navbar-transition-to-large
.title-large
.title-large-text
,
1791 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1792 animation: ios-navbar-title-large-text-slide-left var
(--f7-page-transition-duration
) forwards
;
1794 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1795 animation: ios-navbar-title-large-slide-down var
(--f7-page-transition-duration
) forwards
;
1797 .ios
.router-transition-forward
.navbar-next
.router-navbar-transition-to-large:not
(.router-navbar-transition-from-large
) .title-large
.title-large-text
,
1798 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-inner {
1799 animation: ios-navbar-title-large-text-slide-left-top var
(--f7-page-transition-duration
) forwards
;
1801 .ios
.router-transition-forward
.navbar-next
.navbar-inner-large:not
(.navbar-inner-large-collapsed
) > .title
,
1802 .ios .router-transition-forward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1804 opacity: 0 !important
;
1805 transition-duration: 0;
1807 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-next
.title-large
,
1808 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-current
.title-large
,
1809 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-next
.title-large-text
,
1810 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-current
.title-large-text
,
1811 .ios
.router-transition-forward
.router-dynamic-navbar-inside
.navbar-next
.title-large-inner
,
1812 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1813 animation: none
!important
;
1815 .ios .router-transition-backward:not(.router-dynamic-navbar-inside) .navbar-current.router-navbar-transition-to-large .left .back span {
1816 animation: ios-navbar-back-text-current-to-previous var
(--f7-page-transition-duration
) forwards
;
1818 transform-origin: left center
;
1820 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1822 transform: translateX
(100%);
1824 .ios
.router-transition-backward
.navbar-current
.router-navbar-transition-from-large
.router-navbar-transition-to-large
.title-large
.title-large-text
,
1825 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1826 animation: ios-navbar-title-large-text-slide-right var
(--f7-page-transition-duration
) forwards
;
1828 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1829 animation: ios-navbar-title-large-slide-up var
(--f7-page-transition-duration
) forwards
;
1831 .ios
.router-transition-backward
.navbar-current
.router-navbar-transition-from-large:not
(.router-navbar-transition-to-large
) .title-large
.title-large-text
,
1832 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-inner {
1833 animation: ios-navbar-title-large-text-slide-right-bottom var
(--f7-page-transition-duration
) forwards
;
1835 .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1838 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1841 transform: translateY
(0);
1843 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1844 animation: ios-navbar-title-large-text-slide-down var
(--f7-page-transition-duration
) forwards
, ios-navbar-title-large-text-fade-in var
(--f7-page-transition-duration
) forwards
;
1846 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1848 animation: ios-navbar-title-large-slide-down var
(--f7-page-transition-duration
) forwards
;
1850 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
1851 animation: ios-navbar-title-large-text-scale-in var
(--f7-page-transition-duration
) forwards
, ios-navbar-title-large-text-fade-in var
(--f7-page-transition-duration
) forwards
;
1853 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large .title-large-inner {
1854 animation: ios-navbar-title-large-inner-previous-to-current var
(--f7-page-transition-duration
) forwards
;
1856 .ios
.router-transition-backward
.navbar-current
.navbar-inner-large:not
(.navbar-inner-large-collapsed
) > .title
,
1857 .ios .router-transition-backward .navbar-previous.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1859 opacity: 0 !important
;
1860 transition-duration: 0;
1862 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-previous
.title-large
,
1863 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-current
.title-large
,
1864 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-previous
.title-large-text
,
1865 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-current
.title-large-text
,
1866 .ios
.router-transition-backward
.router-dynamic-navbar-inside
.navbar-previous
.title-large-inner
,
1867 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1868 animation: none
!important
;
1870 .view-master-detail .navbar-master.navbar-previous {
1871 pointer-events: auto
;
1873 .view-master-detail
.navbar-master
.navbar-previous
.left
,
1874 .view-master-detail
.navbar-master
.navbar-previous:not
(.navbar-inner-large
) .title
,
1875 .view-master-detail
.navbar-master
.navbar-previous
.right
,
1876 .view-master-detail .navbar-master.navbar-previous .subnavbar {
1879 .ios
.view-master-detail
.router-transition
.navbar-master
.left
,
1880 .ios
.view-master-detail
.router-transition
.navbar-master
.left
.icon
+ span
,
1881 .ios
.view-master-detail
.router-transition
.navbar-master:not
(.navbar-inner-large
) .title
,
1882 .ios
.view-master-detail
.router-transition
.navbar-master
.right
,
1883 .ios
.view-master-detail
.router-transition
.navbar-master
.subnavbar
,
1884 .ios
.view-master-detail
.router-transition
.navbar-master
.sliding
,
1885 .ios .view-master-detail.router-transition .navbar-master .fading {
1886 opacity: 1 !important
;
1887 transition-duration: 0ms;
1888 transform: none
!important
;
1889 animation: none
!important
;
1891 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title {
1892 opacity: calc
(-1 + 2 * var
(--f7-navbar-large-collapse-progress
)) !important
;
1893 transition-duration: 0ms;
1894 transform: none
!important
;
1895 animation: none
!important
;
1897 .ios
.view-master-detail
.router-transition
.navbar-master
.navbar-inner-large
.title-large
,
1898 .ios
.view-master-detail
.router-transition
.navbar-master
.navbar-inner-large
.title-large-text
,
1899 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-inner {
1900 transition-duration: 0ms;
1901 animation: none
!important
;
1903 @keyframes ios-navbar-element-fade-in
{
1911 @keyframes ios-navbar-element-fade-out
{
1919 @keyframes ios-navbar-title-large-slide-up
{
1921 transform: translateY
(0%);
1924 transform: translateY
(calc
(-1 * var
(--f7-navbar-large-title-height
)));
1927 @keyframes ios-navbar-title-large-slide-down
{
1929 transform: translateY
(calc
(-1 * var
(--f7-navbar-large-title-height
)));
1932 transform: translateY
(0%);
1935 @keyframes ios-navbar-title-large-text-slide-up
{
1937 transform: translateX
(0px) translateY
(0%) scale
(1);
1940 transform: translateX
(calc
(var
(--f7-navbarLeftTextOffset
) - var
(--f7-navbarTitleLargeOffset
))) translateY
(calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(0.5);
1943 @keyframes ios-navbar-title-large-text-slide-down
{
1945 transform: translateX
(calc
(var
(--f7-navbarLeftTextOffset
) - var
(--f7-navbarTitleLargeOffset
))) translateY
(calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(0.5);
1948 transform: translateX
(0px) translateY
(0%) scale
(1);
1951 @keyframes ios-navbar-title-large-text-slide-left
{
1953 transform: translateX
(0%) scale
(1);
1956 transform: translateX
(-100%) scale
(1);
1959 @keyframes ios-navbar-title-large-text-slide-right
{
1961 transform: translateX
(-100%) scale
(1);
1964 transform: translateX
(0%) scale
(1);
1967 @keyframes ios-navbar-title-large-text-slide-left-top
{
1969 transform: translateX
(100%) translateY
(var
(--f7-navbar-large-title-height
)) scale
(1);
1972 transform: translateX
(0%) translateY
(0%) scale
(1);
1975 @keyframes ios-navbar-title-large-text-slide-right-bottom
{
1977 transform: translateX
(0%) translateY
(0%) scale
(1);
1980 transform: translateX
(100%) translateY
(var
(--f7-navbar-large-title-height
)) scale
(1);
1983 @keyframes ios-navbar-title-large-text-fade-out
{
1994 @keyframes ios-navbar-title-large-text-fade-in
{
2005 @keyframes ios-navbar-title-large-text-scale-out
{
2007 transform: translateY
(0%) scale
(1);
2010 transform: translateY
(0%) scale
(0.5);
2013 @keyframes ios-navbar-title-large-text-scale-in
{
2015 transform: translateY
(0%) scale
(0.5);
2018 transform: translateY
(0%) scale
(1);
2021 @keyframes ios-navbar-back-text-current-to-previous
{
2024 transform: translateY
(0px) translateX
(0px) scale
(1);
2031 transform: translateX
(calc
(var
(--f7-navbarTitleLargeOffset
) - var
(--f7-navbarLeftTextOffset
))) translateY
(calc
((var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(2);
2034 @keyframes ios-navbar-back-text-next-to-current
{
2037 transform: translateX
(calc
(var
(--f7-navbarTitleLargeOffset
) - var
(--f7-navbarLeftTextOffset
))) translateY
(calc
((var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
)) / 2)) scale
(2);
2044 transform: translateX
(0px) translateY
(0px) scale
(1);
2047 @keyframes ios-navbar-title-large-inner-current-to-previous
{
2049 transform: translateX
(0%);
2053 transform: translateX
(-100%);
2057 @keyframes ios-navbar-title-large-inner-previous-to-current
{
2059 transform: translateX
(-100%);
2063 transform: translateX
(0%);
2067 .md .navbar .material-icons {
2070 .md .navbar .f7-icons {
2073 .md .navbar a.link {
2077 .md .navbar a.link:before {
2084 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
2085 background-repeat: no-repeat
;
2086 background-position: center
;
2087 background-size: 100% 100%;
2089 pointer-events: none
;
2090 transition-duration: 600ms;
2092 .md .navbar a.link.active-state:before {
2094 transition-duration: 150ms;
2096 .md .navbar a.icon-only {
2101 .md .navbar .right {
2104 .md .navbar .right:first-child {
2105 right: var
(--f7-safe-area-right
);
2108 justify-content: flex-start
;
2111 .md .navbar-inner-large:not(.navbar-inner-large-collapsed) {
2114 .md .page.page-with-subnavbar .navbar-inner {
2117 .md .navbar-inner-centered-title {
2118 justify-content: space-between
;
2120 .md .navbar-inner-centered-title .right {
2123 .md .navbar-inner-centered-title .title {
2126 .aurora .navbar a.icon-only {
2128 justify-content: center
;
2130 .aurora
.navbar
.left a
+ a
,
2131 .aurora .navbar .right a + a {
2137 .aurora .navbar .left {
2140 .aurora .navbar .right {
2143 .aurora .navbar .right:first-child {
2144 right: calc
(15px + var
(--f7-safe-area-right
));
2146 .aurora .navbar-inner {
2147 justify-content: space-between
;
2149 .aurora .navbar-inner-left-title {
2150 justify-content: flex-start
;
2152 .aurora .navbar-inner-left-title .right {
2155 .aurora .navbar-inner-left-title .title {
2159 /* === Toolbar === */
2162 --f7-toolbar-bg-color: var(--f7-bars-bg-color);
2163 --f7-toolbar-bg-image: var(--f7-bars-bg-image);
2164 --f7-toolbar-border-color: var(--f7-bars-border-color);
2165 --f7-toolbar-link-color: var(--f7-bars-link-color);
2166 --f7-toolbar-text-color: var(--f7-bars-text-color);
2167 --f7-tabbar-link-active-color: var(--f7-theme-color);
2169 --f7-tabbar-link-active-bg-color: transparent
;
2170 --f7-tabbar-label-text-transform: none
;
2171 --f7-toolbar-hide-show-transition-duration: 400ms;
2174 --f7-toolbar-height: 44px;
2175 --f7-toolbar-font-size: 17px;
2176 --f7-toolbar-inner-padding-left: 8px;
2177 --f7-toolbar-inner-padding-right: 8px;
2179 --f7-toolbar-link-height: var(--f7-toolbar-height);
2180 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2182 --f7-tabbar-labels-height: 50px;
2183 --f7-tabbar-labels-tablet-height: 56px;
2184 --f7-tabbar-link-inactive-color: #929292;
2185 --f7-toolbar-top-shadow-image: none
;
2186 --f7-toolbar-bottom-shadow-image: none
;
2187 --f7-tabbar-icon-size: 28px;
2188 --f7-tabbar-link-text-transform: none
;
2189 --f7-tabbar-link-font-weight: 400;
2190 --f7-tabbar-link-letter-spacing: 0;
2191 --f7-tabbar-label-font-size: 10px;
2192 --f7-tabbar-label-tablet-font-size: 14px;
2193 --f7-tabbar-label-font-weight: 400;
2194 --f7-tabbar-label-letter-spacing: 0.01;
2197 --f7-toolbar-height: 48px;
2198 --f7-toolbar-font-size: 14px;
2199 --f7-toolbar-inner-padding-left: 0px;
2200 --f7-toolbar-inner-padding-right: 0px;
2202 --f7-toolbar-link-height: var(--f7-toolbar-height);
2203 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2205 --f7-tabbar-labels-height: 56px;
2206 --f7-tabbar-labels-tablet-height: 56px;
2207 --f7-tabbar-link-inactive-color: rgba
(0, 0, 0, 0.54);
2209 --f7-tabbar-link-active-border-color: var(--f7-theme-color);
2211 --f7-toolbar-top-shadow-image: var
(--f7-bars-shadow-bottom-image
);
2212 --f7-toolbar-bottom-shadow-image: var
(--f7-bars-shadow-top-image
);
2213 --f7-tabbar-icon-size: 24px;
2214 --f7-tabbar-link-text-transform: uppercase
;
2215 --f7-tabbar-link-font-weight: 500;
2216 --f7-tabbar-link-letter-spacing: 0.03em;
2217 --f7-tabbar-label-font-size: 14px;
2218 --f7-tabbar-label-tablet-font-size: 14px;
2219 --f7-tabbar-label-font-weight: 400;
2220 --f7-tabbar-label-letter-spacing: 0;
2224 --f7-tabbar-link-inactive-color: rgba
(255, 255, 255, 0.54);
2227 --f7-toolbar-height: 38px;
2228 --f7-toolbar-font-size: 14px;
2229 --f7-toolbar-inner-padding-left: 15px;
2230 --f7-toolbar-inner-padding-right: 15px;
2231 --f7-toolbar-link-height: auto
;
2232 --f7-toolbar-link-line-height: inherit
;
2233 --f7-tabbar-labels-height: 44px;
2234 --f7-tabbar-labels-tablet-height: 44px;
2235 --f7-tabbar-link-inactive-color: rgba
(0, 0, 0, 0.5);
2236 --f7-tabbar-link-inactive-bg-color: rgba
(0, 0, 0, 0.2);
2237 --f7-toolbar-top-shadow-image: none
;
2238 --f7-toolbar-bottom-shadow-image: none
;
2239 --f7-tabbar-icon-size: 18px;
2240 --f7-tabbar-link-text-transform: none
;
2241 --f7-tabbar-link-font-weight: 400;
2242 --f7-tabbar-link-letter-spacing: 0;
2243 --f7-tabbar-label-font-size: 12px;
2244 --f7-tabbar-label-tablet-font-size: 12px;
2245 --f7-tabbar-label-font-weight: 500;
2246 --f7-tabbar-label-letter-spacing: 0.01;
2248 .aurora
.theme-dark
,
2249 .aurora.theme-dark {
2250 --f7-tabbar-link-inactive-color: rgba
(255, 255, 255, 0.5);
2256 transform: translate3d
(0, 0, 0);
2257 -webkit-backface-visibility: hidden
;
2258 backface-visibility: hidden
;
2260 box-sizing: border-box
;
2262 height: var
(--f7-toolbar-height
);
2263 background-image: var
(--f7-toolbar-bg-image
, var
(--f7-bars-bg-image
));
2264 background-color: var
(--f7-toolbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
2265 color: var
(--f7-toolbar-text-color
, var
(--f7-bars-text-color
));
2266 font-size: var
(--f7-toolbar-font-size
);
2272 color: var
(--f7-toolbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
2273 box-sizing: border-box
;
2276 white-space: nowrap
;
2277 text-overflow: ellipsis
;
2281 line-height: var
(--f7-toolbar-link-line-height
, var
(--f7-toolbar-height
));
2282 height: var
(--f7-toolbar-link-height
, var
(--f7-toolbar-height
));
2289 -webkit-backface-visibility: hidden
;
2290 backface-visibility: hidden
;
2298 .ios
.toolbar-top-ios
,
2299 .md
.toolbar-top-md
,
2300 .aurora .toolbar-top-aurora {
2303 .toolbar-top
.tab-link-highlight
,
2304 .ios
.toolbar-top-ios
.tab-link-highlight
,
2305 .md
.toolbar-top-md
.tab-link-highlight
,
2306 .aurora .toolbar-top-aurora .tab-link-highlight {
2309 .toolbar-top
.no-hairline:after
,
2310 .ios
.toolbar-top-ios
.no-hairline:after
,
2311 .md
.toolbar-top-md
.no-hairline:after
,
2312 .aurora
.toolbar-top-aurora
.no-hairline:after
,
2313 .toolbar-top
.no-border:after
,
2314 .ios
.toolbar-top-ios
.no-border:after
,
2315 .md
.toolbar-top-md
.no-border:after
,
2316 .aurora .toolbar-top-aurora.no-border:after {
2317 display: none
!important
;
2319 .toolbar-top
.no-shadow:before
,
2320 .ios
.toolbar-top-ios
.no-shadow:before
,
2321 .md
.toolbar-top-md
.no-shadow:before
,
2322 .aurora
.toolbar-top-aurora
.no-shadow:before
,
2323 .toolbar-top
.toolbar-hidden:before
,
2324 .ios
.toolbar-top-ios
.toolbar-hidden:before
,
2325 .md
.toolbar-top-md
.toolbar-hidden:before
,
2326 .aurora .toolbar-top-aurora.toolbar-hidden:before {
2327 display: none
!important
;
2330 .ios
.toolbar-top-ios:after
,
2331 .md
.toolbar-top-md:after
,
2332 .aurora
.toolbar-top-aurora:after
,
2333 .toolbar-top:before
,
2334 .ios
.toolbar-top-ios:before
,
2335 .md
.toolbar-top-md:before
,
2336 .aurora .toolbar-top-aurora:before {
2337 -webkit-backface-visibility: hidden
;
2338 backface-visibility: hidden
;
2341 .ios
.toolbar-top-ios:after
,
2342 .md
.toolbar-top-md:after
,
2343 .aurora .toolbar-top-aurora:after {
2346 background-color: var
(--f7-toolbar-border-color
, var
(--f7-bars-border-color
));
2355 transform-origin: 50% 100%;
2356 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2358 .toolbar-top:before
,
2359 .ios
.toolbar-top-ios:before
,
2360 .md
.toolbar-top-md:before
,
2361 .aurora .toolbar-top-aurora:before {
2369 pointer-events: none
;
2370 background: var
(--f7-toolbar-top-shadow-image
);
2373 .ios
.toolbar-bottom-ios
,
2374 .md
.toolbar-bottom-md
,
2375 .aurora .toolbar-bottom-aurora {
2377 height: calc
(var
(--f7-toolbar-height
) + var
(--f7-safe-area-bottom
));
2379 .toolbar-bottom
.tab-link-highlight
,
2380 .ios
.toolbar-bottom-ios
.tab-link-highlight
,
2381 .md
.toolbar-bottom-md
.tab-link-highlight
,
2382 .aurora .toolbar-bottom-aurora .tab-link-highlight {
2385 .toolbar-bottom
.toolbar-inner
,
2386 .ios
.toolbar-bottom-ios
.toolbar-inner
,
2387 .md
.toolbar-bottom-md
.toolbar-inner
,
2388 .aurora .toolbar-bottom-aurora .toolbar-inner {
2391 bottom: var
(--f7-safe-area-bottom
);
2393 .toolbar-bottom
.no-hairline:before
,
2394 .ios
.toolbar-bottom-ios
.no-hairline:before
,
2395 .md
.toolbar-bottom-md
.no-hairline:before
,
2396 .aurora
.toolbar-bottom-aurora
.no-hairline:before
,
2397 .toolbar-bottom
.no-border:before
,
2398 .ios
.toolbar-bottom-ios
.no-border:before
,
2399 .md
.toolbar-bottom-md
.no-border:before
,
2400 .aurora .toolbar-bottom-aurora.no-border:before {
2401 display: none
!important
;
2403 .toolbar-bottom
.no-shadow:after
,
2404 .ios
.toolbar-bottom-ios
.no-shadow:after
,
2405 .md
.toolbar-bottom-md
.no-shadow:after
,
2406 .aurora
.toolbar-bottom-aurora
.no-shadow:after
,
2407 .toolbar-bottom
.toolbar-hidden:after
,
2408 .ios
.toolbar-bottom-ios
.toolbar-hidden:after
,
2409 .md
.toolbar-bottom-md
.toolbar-hidden:after
,
2410 .aurora .toolbar-bottom-aurora.toolbar-hidden:after {
2411 display: none
!important
;
2413 .toolbar-bottom:before
,
2414 .ios
.toolbar-bottom-ios:before
,
2415 .md
.toolbar-bottom-md:before
,
2416 .aurora .toolbar-bottom-aurora:before {
2419 background-color: var
(--f7-toolbar-border-color
, var
(--f7-bars-border-color
));
2428 transform-origin: 50% 0%;
2429 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2431 .toolbar-bottom:after
,
2432 .ios
.toolbar-bottom-ios:after
,
2433 .md
.toolbar-bottom-md:after
,
2434 .aurora .toolbar-bottom-aurora:after {
2442 pointer-events: none
;
2443 background: var
(--f7-toolbar-bottom-shadow-image
);
2452 justify-content: space-between
;
2453 box-sizing: border-box
;
2454 align-items: center
;
2455 align-content: center
;
2457 padding: 0 calc
(var
(--f7-toolbar-inner-padding-right
) + var
(--f7-safe-area-right
)) 0 calc
(var
(--f7-toolbar-inner-padding-left
) + var
(--f7-safe-area-left
));
2460 .views > .tabbar-labels {
2465 color: var
(--f7-tabbar-link-inactive-color
);
2467 .tabbar a
.tab-link:not
(.tab-link-active
),
2468 .tabbar-labels a.tab-link:not(.tab-link-active) {
2469 background-color: var
(--f7-tabbar-link-inactive-bg-color
, transparent
);
2472 .tabbar-labels a.link {
2476 .tabbar-labels a
.tab-link
,
2478 .tabbar-labels a.link {
2481 box-sizing: border-box
;
2483 justify-content: center
;
2484 align-items: center
;
2485 flex-direction: column
;
2486 text-transform: var
(--f7-tabbar-link-text-transform
);
2487 font-weight: var
(--f7-tabbar-link-font-weight
);
2488 letter-spacing: var
(--f7-tabbar-link-letter-spacing
);
2491 .tabbar
.tab-link-active
,
2492 .tabbar-labels .tab-link-active {
2493 color: var
(--f7-tabbar-link-active-color
, var
(--f7-theme-color
));
2494 background-color: var
(--f7-tabbar-link-active-bg-color
, transparent
);
2497 .tabbar-labels i.icon {
2498 font-size: var
(--f7-tabbar-icon-size
);
2499 height: var
(--f7-tabbar-icon-size
);
2500 line-height: var
(--f7-tabbar-icon-size
);
2503 --f7-toolbar-height: var
(--f7-tabbar-labels-height
);
2505 .tabbar-labels a
.tab-link
,
2506 .tabbar-labels a.link {
2508 justify-content: space-between
;
2509 align-items: center
;
2511 .tabbar-labels .tabbar-label {
2516 text-overflow: ellipsis
;
2517 white-space: nowrap
;
2518 font-size: var
(--f7-tabbar-label-font-size
);
2519 text-transform: var
(--f7-tabbar-label-text-transform
);
2520 font-weight: var
(--f7-tabbar-label-font-weight
);
2521 letter-spacing: var
(--f7-tabbar-label-letter-spacing
);
2523 @media (min-width: 768px) {
2525 --f7-tabbar-labels-height: var
(--f7-tabbar-labels-tablet-height
);
2526 --f7-tabbar-label-font-size: var
(--f7-tabbar-label-tablet-font-size
);
2529 .tabbar-scrollable .toolbar-inner {
2530 justify-content: flex-start
;
2531 will-change: scroll-position
;
2533 -webkit-overflow-scrolling: touch
;
2535 .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
2536 display: none
!important
;
2537 width: 0 !important
;
2538 height: 0 !important
;
2539 -webkit-appearance: none
;
2540 opacity: 0 !important
;
2542 .tabbar-scrollable a
.tab-link
,
2543 .tabbar-scrollable a.link {
2547 .toolbar-transitioning
,
2548 .navbar-transitioning
+ .toolbar
,
2549 .navbar-transitioning ~ * .toolbar {
2550 transition-duration: var
(--f7-toolbar-hide-show-transition-duration
);
2552 .toolbar-bottom
~ *,
2553 .ios
.toolbar-bottom-ios
~ *,
2554 .md
.toolbar-bottom-md
~ *,
2555 .aurora .toolbar-bottom-aurora ~ * {
2556 --f7-page-toolbar-bottom-offset: var
(--f7-toolbar-height
);
2558 .toolbar-bottom
.tabbar-labels
~ *,
2559 .ios
.toolbar-bottom-ios
.tabbar-labels
~ *,
2560 .md
.toolbar-bottom-md
.tabbar-labels
~ *,
2561 .aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
2562 --f7-page-toolbar-bottom-offset: var
(--f7-tabbar-labels-height
);
2564 .toolbar-bottom
.toolbar-hidden
,
2565 .ios
.toolbar-bottom-ios
.toolbar-hidden
,
2566 .md
.toolbar-bottom-md
.toolbar-hidden
,
2567 .aurora .toolbar-bottom-aurora.toolbar-hidden {
2568 transform: translate3d
(0, 100%, 0);
2571 .ios
.toolbar-top-ios
~ *,
2572 .md
.toolbar-top-md
~ *,
2573 .aurora .toolbar-top-aurora ~ * {
2574 --f7-page-toolbar-top-offset: var
(--f7-toolbar-height
);
2576 .toolbar-top
.tabbar-labels
~ *,
2577 .ios
.toolbar-top-ios
.tabbar-labels
~ *,
2578 .md
.toolbar-top-md
.tabbar-labels
~ *,
2579 .aurora .toolbar-top-aurora.tabbar-labels ~ * {
2580 --f7-page-toolbar-top-offset: var
(--f7-tabbar-labels-height
);
2582 .toolbar-top
.toolbar-hidden
,
2583 .ios
.toolbar-top-ios
.toolbar-hidden
,
2584 .md
.toolbar-top-md
.toolbar-hidden
,
2585 .aurora .toolbar-top-aurora.toolbar-hidden {
2586 transform: translate3d
(0, -100%, 0);
2588 .navbar
~ .toolbar-top
,
2589 .ios
.navbar
~ .toolbar-top-ios
,
2590 .md
.navbar
~ .toolbar-top-md
,
2591 .aurora
.navbar
~ .toolbar-top-aurora
,
2592 .navbar
~ * .toolbar-top
,
2593 .ios
.navbar
~ * .toolbar-top-ios
,
2594 .md
.navbar
~ * .toolbar-top-md
,
2595 .aurora
.navbar
~ * .toolbar-top-aurora
,
2596 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
,
2597 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
,
2598 .md
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-md
,
2599 .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
2600 top: var
(--f7-navbar-height
);
2602 .navbar
~ .toolbar-top
.toolbar-hidden
,
2603 .ios
.navbar
~ .toolbar-top-ios
.toolbar-hidden
,
2604 .md
.navbar
~ .toolbar-top-md
.toolbar-hidden
,
2605 .aurora
.navbar
~ .toolbar-top-aurora
.toolbar-hidden
,
2606 .navbar
~ * .toolbar-top
.toolbar-hidden
,
2607 .ios
.navbar
~ * .toolbar-top-ios
.toolbar-hidden
,
2608 .md
.navbar
~ * .toolbar-top-md
.toolbar-hidden
,
2609 .aurora
.navbar
~ * .toolbar-top-aurora
.toolbar-hidden
,
2610 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
.toolbar-hidden
,
2611 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
.toolbar-hidden
,
2612 .md
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-md
.toolbar-hidden
,
2613 .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
2614 transform: translate3d
(0, calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-toolbar-height
))), 0);
2616 .navbar
~ .toolbar-top
.toolbar-hidden
.tabbar-labels
,
2617 .ios
.navbar
~ .toolbar-top-ios
.toolbar-hidden
.tabbar-labels
,
2618 .md
.navbar
~ .toolbar-top-md
.toolbar-hidden
.tabbar-labels
,
2619 .aurora
.navbar
~ .toolbar-top-aurora
.toolbar-hidden
.tabbar-labels
,
2620 .navbar
~ * .toolbar-top
.toolbar-hidden
.tabbar-labels
,
2621 .ios
.navbar
~ * .toolbar-top-ios
.toolbar-hidden
.tabbar-labels
,
2622 .md
.navbar
~ * .toolbar-top-md
.toolbar-hidden
.tabbar-labels
,
2623 .aurora
.navbar
~ * .toolbar-top-aurora
.toolbar-hidden
.tabbar-labels
,
2624 .navbar
~ .page:not
(.no-navbar
) .toolbar-top
.toolbar-hidden
.tabbar-labels
,
2625 .ios
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-ios
.toolbar-hidden
.tabbar-labels
,
2626 .md
.navbar
~ .page:not
(.no-navbar
) .toolbar-top-md
.toolbar-hidden
.tabbar-labels
,
2627 .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
2628 transform: translate3d
(0, calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-tabbar-labels-height
))), 0);
2630 .navbar-hidden
+ .toolbar-top:not
(.toolbar-hidden
),
2631 .ios
.navbar-hidden
+ .toolbar-top-ios:not
(.toolbar-hidden
),
2632 .md
.navbar-hidden
+ .toolbar-top-md:not
(.toolbar-hidden
),
2633 .aurora
.navbar-hidden
+ .toolbar-top-aurora:not
(.toolbar-hidden
),
2634 .navbar-hidden
~ * .toolbar-top:not
(.toolbar-hidden
),
2635 .ios
.navbar-hidden
~ * .toolbar-top-ios:not
(.toolbar-hidden
),
2636 .md
.navbar-hidden
~ * .toolbar-top-md:not
(.toolbar-hidden
),
2637 .aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
2638 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-height
)), 0);
2640 .navbar-large-hidden
+ .toolbar-top:not
(.toolbar-hidden
),
2641 .ios
.navbar-large-hidden
+ .toolbar-top-ios:not
(.toolbar-hidden
),
2642 .md
.navbar-large-hidden
+ .toolbar-top-md:not
(.toolbar-hidden
),
2643 .navbar-large-hidden
~ * .toolbar-top:not
(.toolbar-hidden
),
2644 .ios
.navbar-large-hidden
~ * .toolbar-top-ios:not
(.toolbar-hidden
),
2645 .md
.navbar-large-hidden
~ * .toolbar-top-md:not
(.toolbar-hidden
),
2646 .aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
2647 transform: translate3d
(0, calc
(-1 * (var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
))), 0);
2649 .ios .toolbar a.icon-only {
2650 min-height: var
(--f7-toolbar-height
);
2652 justify-content: center
;
2653 align-items: center
;
2657 .ios
.tabbar-labels a
.tab-link
,
2658 .ios .tabbar-labels a.link {
2660 padding-bottom: 4px;
2662 .ios
.tabbar-labels a
.tab-link i
+ span
,
2663 .ios .tabbar-labels a.link i + span {
2666 @media (min-width: 768px) {
2667 .ios
.tabbar
.toolbar-inner
,
2668 .ios .tabbar-labels .toolbar-inner {
2669 justify-content: center
;
2671 .ios
.tabbar a
.tab-link
,
2672 .ios
.tabbar-labels a
.tab-link
,
2673 .ios
.tabbar a
.link
,
2674 .ios .tabbar-labels a.link {
2679 .ios .tabbar-scrollable .toolbar-inner {
2680 justify-content: flex-start
;
2682 .ios
.tabbar-scrollable a
.tab-link
,
2683 .ios .tabbar-scrollable a.link {
2686 .md .toolbar a.link {
2687 justify-content: center
;
2691 .md .toolbar a.link:before {
2698 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
2699 background-repeat: no-repeat
;
2700 background-position: center
;
2701 background-size: 100% 100%;
2703 pointer-events: none
;
2704 transition-duration: 600ms;
2706 .md .toolbar a.link.active-state:before {
2708 transition-duration: 150ms;
2710 .md .toolbar a.icon-only {
2714 .md
.tabbar a
.tab-link
,
2715 .md
.tabbar-labels a
.tab-link
,
2717 .md .tabbar-labels a.link {
2721 .md
.tabbar a
.icon-only
,
2722 .md .tabbar-labels a.icon-only {
2723 flex-shrink: initial
;
2725 .md
.tabbar a
.tab-link
,
2726 .md .tabbar-labels a.tab-link {
2727 transition-duration: 300ms;
2731 .md
.tabbar
.tab-link-highlight
,
2732 .md .tabbar-labels .tab-link-highlight {
2735 background: var
(--f7-tabbar-link-active-border-color
, var
(--f7-theme-color
));
2736 transition-duration: 300ms;
2739 .md
.tabbar-labels a
.tab-link
,
2740 .md .tabbar-labels a.link {
2742 padding-bottom: 7px;
2749 .md .tabbar-scrollable .toolbar-inner {
2752 .md
.tabbar-scrollable a
.tab-link
,
2753 .md .tabbar-scrollable a.link {
2756 .aurora .toolbar a.icon-only {
2757 min-height: var
(--f7-toolbar-height
);
2759 justify-content: center
;
2760 align-items: center
;
2763 .aurora
.tabbar
.toolbar-inner
,
2764 .aurora .tabbar-labels .toolbar-inner {
2768 .aurora
.tabbar a
.tab-link
,
2769 .aurora
.tabbar-labels a
.tab-link
,
2770 .aurora
.tabbar a
.link
,
2771 .aurora .tabbar-labels a.link {
2772 transition-duration: 200ms;
2774 .aurora
.tabbar-labels a
.tab-link
,
2775 .aurora .tabbar-labels a.link {
2777 padding-bottom: 5px;
2779 .aurora
.tabbar-labels a
.tab-link i
+ span
,
2780 .aurora .tabbar-labels a.link i + span {
2783 .aurora .tabbar-scrollable .toolbar-inner {
2784 justify-content: flex-start
;
2786 .aurora
.tabbar-scrollable a
.tab-link
,
2787 .aurora .tabbar-scrollable a.link {
2790 /* === Subnavbar === */
2793 --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
2794 --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
2795 --f7-subnavbar-border-color: var(--f7-bars-border-color);
2796 --f7-subnavbar-link-color: var(--f7-bars-link-color);
2797 --f7-subnavbar-text-color: var(--f7-bars-text-color);
2799 --f7-subnavbar-title-line-height: 1.2;
2802 --f7-subnavbar-height: 44px;
2803 --f7-subnavbar-inner-padding-left: 8px;
2804 --f7-subnavbar-inner-padding-right: 8px;
2805 --f7-subnavbar-title-font-size: 34px;
2806 --f7-subnavbar-title-font-weight: 700;
2807 --f7-subnavbar-title-letter-spacing: -0.03em;
2808 --f7-subnavbar-title-margin-left: 7px;
2809 --f7-subnavbar-shadow-image: none
;
2811 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
2812 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
2816 --f7-subnavbar-height: 48px;
2817 --f7-subnavbar-inner-padding-left: 16px;
2818 --f7-subnavbar-inner-padding-right: 16px;
2819 --f7-subnavbar-title-font-size: 20px;
2820 --f7-subnavbar-title-font-weight: 500;
2821 --f7-subnavbar-title-letter-spacing: 0;
2822 --f7-subnavbar-title-margin-left: 0px;
2823 --f7-subnavbar-shadow-image: var
(--f7-bars-shadow-bottom-image
);
2825 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
2826 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
2830 --f7-subnavbar-height: 38px;
2831 --f7-subnavbar-inner-padding-left: 15px;
2832 --f7-subnavbar-inner-padding-right: 15px;
2833 --f7-subnavbar-title-font-size: 26px;
2834 --f7-subnavbar-title-font-weight: bold
;
2835 --f7-subnavbar-title-letter-spacing: -0.03em;
2836 --f7-subnavbar-title-margin-left: 0px;
2837 --f7-subnavbar-shadow-image: none
;
2838 --f7-subnavbar-link-height: auto
;
2839 --f7-subnavbar-link-line-height: inherit
;
2847 box-sizing: border-box
;
2849 justify-content: space-between
;
2850 align-items: center
;
2851 background-image: var
(--f7-subnavbar-bg-image
, var
(--f7-bars-bg-image
));
2852 background-color: var
(--f7-subnavbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
2853 color: var
(--f7-subnavbar-text-color
, var
(--f7-bars-text-color
));
2858 text-overflow: ellpsis
;
2859 white-space: nowrap
;
2860 font-size: var
(--f7-subnavbar-title-font-size
);
2861 font-weight: var
(--f7-subnavbar-title-font-weight
);
2863 display: inline-block
;
2864 line-height: var
(--f7-subnavbar-title-line-height
);
2865 letter-spacing: var
(--f7-subnavbar-title-letter-spacing
);
2866 margin-left: var
(--f7-subnavbar-title-margin-left
);
2872 justify-content: flex-start
;
2873 align-items: center
;
2875 .subnavbar .right:first-child {
2880 color: var
(--f7-subnavbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
2883 line-height: var
(--f7-subnavbar-link-line-height
, var
(--f7-subnavbar-height
));
2884 height: var
(--f7-subnavbar-link-height
, var
(--f7-subnavbar-height
));
2886 .subnavbar a.icon-only {
2887 min-width: var
(--f7-subnavbar-height
);
2889 .subnavbar
.no-hairline:after
,
2890 .subnavbar.no-border:after {
2891 display: none
!important
;
2893 .subnavbar
.no-shadow:before
,
2894 .subnavbar.navbar-hidden:before {
2895 display: none
!important
;
2899 -webkit-backface-visibility: hidden
;
2900 backface-visibility: hidden
;
2905 background-color: var
(--f7-subnavbar-border-color
, var
(--f7-bars-border-color
));
2914 transform-origin: 50% 100%;
2915 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
2925 pointer-events: none
;
2926 background: var
(--f7-subnavbar-shadow-image
);
2932 align-items: center
;
2933 box-sizing: border-box
;
2934 justify-content: space-between
;
2936 padding: 0 calc
(var
(--f7-subnavbar-inner-padding-left
) + var
(--f7-safe-area-right
)) 0 calc
(var
(--f7-subnavbar-inner-padding-right
) + var
(--f7-safe-area-left
));
2938 .subnavbar-inner.stacked {
2941 .navbar .subnavbar {
2944 .views
> .subnavbar
,
2946 .page > .subnavbar {
2949 .navbar
~ * .subnavbar
,
2950 .page-with-subnavbar
.navbar
~ .subnavbar
,
2951 .page-with-subnavbar
.navbar
~ * .subnavbar
,
2952 .navbar
~ .page-with-subnavbar:not
(.no-navbar
) .subnavbar
,
2953 .navbar ~ .subnavbar {
2954 top: var
(--f7-navbar-height
);
2956 .navbar
~ .page-with-navbar-large:not
(.no-navbar
) .subnavbar
,
2957 .page-with-subnavbar
.page-with-navbar-large
.navbar
~ .subnavbar
,
2958 .page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar {
2959 top: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
2960 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
2962 .navbar .title-large ~ .subnavbar {
2963 top: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
2964 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
2966 .page-with-subnavbar
,
2968 --f7-page-subnavbar-offset: var
(--f7-subnavbar-height
);
2971 height: calc
(var
(--f7-subnavbar-height
) + 1px);
2975 .ios .subnavbar .title {
2976 align-self: flex-start
;
2979 .ios
.subnavbar
.left a
+ a
,
2980 .ios .subnavbar .right a + a {
2983 .ios .subnavbar .left {
2986 .ios .subnavbar .right {
2989 .ios .subnavbar .right:first-child {
2992 .ios .subnavbar a.link {
2993 justify-content: flex-start
;
2995 .ios .subnavbar a.icon-only {
2996 justify-content: center
;
3000 height: var
(--f7-subnavbar-height
);
3002 .md .subnavbar .right {
3005 .md .subnavbar .right:first-child {
3008 .md .subnavbar a.link {
3009 justify-content: center
;
3012 .md .subnavbar a.link:before {
3019 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
3020 background-repeat: no-repeat
;
3021 background-position: center
;
3022 background-size: 100% 100%;
3024 pointer-events: none
;
3025 transition-duration: 600ms;
3027 .md .subnavbar a.link.active-state:before {
3029 transition-duration: 150ms;
3031 .md .subnavbar a.icon-only {
3034 .md .subnavbar-inner > a.link:first-child {
3035 margin-left: calc
(-1 * var
(--f7-subnavbar-inner-padding-left
));
3037 .md .subnavbar-inner > a.link:last-child {
3038 margin-right: calc
(-1 * var
(--f7-subnavbar-inner-padding-right
));
3040 .aurora .subnavbar {
3041 height: calc
(var
(--f7-subnavbar-height
) + 1px);
3045 .aurora .subnavbar .title {
3046 align-self: flex-start
;
3049 .aurora
.subnavbar
.left a
+ a
,
3050 .aurora .subnavbar .right a + a {
3053 .aurora .subnavbar .left {
3056 .aurora .subnavbar .right {
3059 .aurora .subnavbar .right:first-child {
3062 .aurora .subnavbar a.link {
3063 justify-content: flex-start
;
3065 .aurora .subnavbar a.icon-only {
3066 justify-content: center
;
3069 /* === Content Block === */
3071 --f7-block-font-size: inherit
;
3072 --f7-block-strong-bg-color: #fff;
3073 --f7-block-title-font-size: inherit
;
3074 --f7-block-header-margin: 10px;
3075 --f7-block-footer-margin: 10px;
3076 --f7-block-header-font-size: 14px;
3077 --f7-block-footer-font-size: 14px;
3078 --f7-block-title-white-space: nowrap
;
3079 --f7-block-title-medium-text-color: #000;
3080 --f7-block-title-medium-text-transform: none
;
3081 --f7-block-title-large-text-color: #000;
3082 --f7-block-title-large-text-transform: none
;
3086 --f7-block-strong-border-color: #282829;
3087 --f7-block-title-medium-text-color: #fff;
3088 --f7-block-title-large-text-color: #fff;
3089 --f7-block-strong-bg-color: #1c1c1d;
3092 --f7-block-text-color: #6d6d72;
3093 --f7-block-padding-horizontal: 15px;
3094 --f7-block-padding-vertical: 15px;
3095 --f7-block-margin-vertical: 35px;
3096 --f7-block-strong-text-color: #000;
3097 --f7-block-strong-border-color: #c8c7cc;
3098 --f7-block-title-text-transform: uppercase
;
3099 --f7-block-title-text-color: #6d6d72;
3100 --f7-block-title-font-weight: 400;
3101 --f7-block-title-line-height: 17px;
3102 --f7-block-title-margin-bottom: 10px;
3103 --f7-block-title-medium-font-size: 22px;
3104 --f7-block-title-medium-font-weight: bold
;
3105 --f7-block-title-medium-line-height: 1.4;
3106 --f7-block-title-large-font-size: 29px;
3107 --f7-block-title-large-font-weight: bold
;
3108 --f7-block-title-large-line-height: 1.3;
3109 --f7-block-inset-side-margin: 15px;
3110 --f7-block-inset-border-radius: 7px;
3111 --f7-block-header-text-color: #8f8f94;
3112 --f7-block-footer-text-color: #8f8f94;
3116 --f7-block-title-text-color: #8E8E93;
3117 --f7-block-header-text-color: #8E8E93;
3118 --f7-block-footer-text-color: #8E8E93;
3119 --f7-block-strong-text-color: #fff;
3122 --f7-block-text-color: inherit
;
3123 --f7-block-padding-horizontal: 16px;
3124 --f7-block-padding-vertical: 16px;
3125 --f7-block-margin-vertical: 32px;
3126 --f7-block-strong-text-color: inherit
;
3127 --f7-block-strong-border-color: rgba
(0, 0, 0, 0.12);
3128 --f7-block-title-text-transform: none
;
3129 --f7-block-title-text-color: rgba
(0, 0, 0, 0.54);
3130 --f7-block-title-font-weight: 500;
3131 --f7-block-title-line-height: 16px;
3132 --f7-block-title-margin-bottom: 16px;
3133 --f7-block-title-medium-font-size: 24px;
3134 --f7-block-title-medium-font-weight: 500;
3135 --f7-block-title-medium-line-height: 1.3;
3136 --f7-block-title-large-font-size: 34px;
3137 --f7-block-title-large-font-weight: 500;
3138 --f7-block-title-large-line-height: 1.2;
3139 --f7-block-inset-side-margin: 16px;
3140 --f7-block-inset-border-radius: 4px;
3141 --f7-block-header-text-color: rgba
(0, 0, 0, 0.54);
3142 --f7-block-footer-text-color: rgba
(0, 0, 0, 0.54);
3146 --f7-block-title-text-color: #fff;
3147 --f7-block-header-text-color: rgba
(255, 255, 255, 0.54);
3148 --f7-block-footer-text-color: rgba
(255, 255, 255, 0.54);
3151 --f7-block-text-color: inherit
;
3152 --f7-block-padding-horizontal: 15px;
3153 --f7-block-padding-vertical: 15px;
3154 --f7-block-margin-vertical: 15px;
3155 --f7-block-strong-text-color: inherit
;
3156 --f7-block-strong-border-color: rgba
(0, 0, 0, 0.12);
3157 --f7-block-title-text-transform: none
;
3158 --f7-block-title-text-color: rgba
(0, 0, 0, 0.7);
3159 --f7-block-title-font-weight: 600;
3160 --f7-block-title-line-height: 1.5;
3161 --f7-block-title-margin-bottom: 5px;
3162 --f7-block-title-medium-font-size: 20px;
3163 --f7-block-title-medium-font-weight: 600;
3164 --f7-block-title-medium-line-height: 1.4;
3165 --f7-block-title-large-font-size: 28px;
3166 --f7-block-title-large-font-weight: bold
;
3167 --f7-block-title-large-line-height: 1.3;
3168 --f7-block-inset-side-margin: 15px;
3169 --f7-block-inset-border-radius: 4px;
3170 --f7-block-header-text-color: rgba
(0, 0, 0, 0.6);
3171 --f7-block-footer-text-color: rgba
(0, 0, 0, 0.6);
3173 .aurora
.theme-dark
,
3174 .aurora.theme-dark {
3175 --f7-block-title-text-color: #fff;
3176 --f7-block-header-text-color: rgba
(255, 255, 255, 0.52);
3177 --f7-block-footer-text-color: rgba
(255, 255, 255, 0.52);
3178 --f7-block-strong-text-color: #fff;
3181 box-sizing: border-box
;
3184 color: var
(--f7-block-text-color
);
3185 margin: var
(--f7-block-margin-vertical
) 0;
3188 padding-left: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-left
));
3189 padding-right: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-right
));
3190 font-size: var
(--f7-block-font-size
);
3192 .block
.no-hairlines:before
,
3193 .block
.no-hairlines
ul:before
,
3194 .md
.block
.no-hairlines-md:before
,
3195 .md
.block
.no-hairlines-md
ul:before
,
3196 .ios
.block
.no-hairlines-ios:before
,
3197 .ios
.block
.no-hairlines-ios
ul:before
,
3198 .aurora
.block
.no-hairlines-aurora:before
,
3199 .aurora .block.no-hairlines-aurora ul:before {
3200 display: none
!important
;
3202 .block
.no-hairlines:after
,
3203 .block
.no-hairlines
ul:after
,
3204 .md
.block
.no-hairlines-md:after
,
3205 .md
.block
.no-hairlines-md
ul:after
,
3206 .ios
.block
.no-hairlines-ios:after
,
3207 .ios
.block
.no-hairlines-ios
ul:after
,
3208 .aurora
.block
.no-hairlines-aurora:after
,
3209 .aurora .block.no-hairlines-aurora ul:after {
3210 display: none
!important
;
3212 .block
.no-hairline-top:before
,
3213 .block
.no-hairline-top
ul:before
,
3214 .md
.block
.no-hairline-top-md:before
,
3215 .md
.block
.no-hairline-top-md
ul:before
,
3216 .ios
.block
.no-hairline-top-ios:before
,
3217 .ios
.block
.no-hairline-top-ios
ul:before
,
3218 .aurora
.block
.no-hairline-top-aurora:before
,
3219 .aurora .block.no-hairline-top-aurora ul:before {
3220 display: none
!important
;
3222 .block
.no-hairline-bottom:after
,
3223 .block
.no-hairline-bottom
ul:after
,
3224 .md
.block
.no-hairline-bottom-md:after
,
3225 .md
.block
.no-hairline-bottom-md
ul:after
,
3226 .ios
.block
.no-hairline-bottom-ios:after
,
3227 .ios
.block
.no-hairline-bottom-ios
ul:after
,
3228 .aurora
.block
.no-hairline-bottom-aurora:after
,
3229 .aurora .block.no-hairline-bottom-aurora ul:after {
3230 display: none
!important
;
3232 .block
> h1:first-child
,
3233 .block
> h2:first-child
,
3234 .block
> h3:first-child
,
3235 .block
> h4:first-child
,
3236 .block > p:first-child {
3239 .block
> h1:last-child
,
3240 .block
> h2:last-child
,
3241 .block
> h3:last-child
,
3242 .block
> h4:last-child
,
3243 .block > p:last-child {
3247 color: var
(--f7-block-strong-text-color
);
3248 padding-top: var
(--f7-block-padding-vertical
);
3249 padding-bottom: var
(--f7-block-padding-vertical
);
3250 background-color: var
(--f7-block-strong-bg-color
);
3252 .block-strong:before {
3255 background-color: var
(--f7-block-strong-border-color
);
3264 transform-origin: 50% 0%;
3265 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3267 .block-strong:after {
3270 background-color: var
(--f7-block-strong-border-color
);
3279 transform-origin: 50% 100%;
3280 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3286 white-space: var
(--f7-block-title-white-space
);
3287 text-overflow: ellipsis
;
3288 text-transform: var
(--f7-block-title-text-transform
);
3289 color: var
(--f7-block-title-text-color
);
3290 font-size: var
(--f7-block-title-font-size
, inherit
);
3291 font-weight: var
(--f7-block-title-font-weight
);
3292 line-height: var
(--f7-block-title-line-height
);
3293 margin-top: var
(--f7-block-margin-vertical
);
3294 margin-bottom: var
(--f7-block-title-margin-bottom
);
3295 margin-left: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-left
));
3296 margin-right: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-right
));
3298 .block-title
+ .list
,
3299 .block-title
+ .block
,
3300 .block-title
+ .card
,
3301 .block-title
+ .timeline
,
3302 .block-title + .block-header {
3305 .block-title-medium {
3306 font-size: var
(--f7-block-title-medium-font-size
);
3307 text-transform: var
(--f7-block-title-medium-text-transform
);
3308 color: var
(--f7-block-title-medium-text-color
);
3309 font-weight: var
(--f7-block-title-medium-font-weight
);
3310 line-height: var
(--f7-block-title-medium-line-height
);
3312 .block-title-large {
3313 font-size: var
(--f7-block-title-large-font-size
);
3314 text-transform: var
(--f7-block-title-large-text-transform
);
3315 color: var
(--f7-block-title-large-text-color
);
3316 font-weight: var
(--f7-block-title-large-font-weight
);
3317 line-height: var
(--f7-block-title-large-line-height
);
3319 .block
> .block-title:first-child
,
3320 .list > .block-title:first-child {
3326 color: var
(--f7-block-header-text-color
);
3327 font-size: var
(--f7-block-header-font-size
);
3328 margin-bottom: var
(--f7-block-header-margin
);
3329 margin-top: var
(--f7-block-margin-vertical
);
3331 .block-header
+ .list
,
3332 .block-header
+ .block
,
3333 .block-header
+ .card
,
3334 .block-header + .timeline {
3335 margin-top: var
(--f7-block-header-margin
);
3338 color: var
(--f7-block-footer-text-color
);
3339 font-size: var
(--f7-block-footer-font-size
);
3340 margin-top: var
(--f7-block-footer-margin
);
3341 margin-bottom: var
(--f7-block-margin-vertical
);
3347 padding-left: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-left
));
3348 padding-right: calc
(var
(--f7-block-padding-horizontal
) + var
(--f7-safe-area-right
));
3350 .block-footer
ul:first-child
,
3351 .block-header
ul:first-child
,
3352 .block-footer
p:first-child
,
3353 .block-header
p:first-child
,
3354 .block-footer
h1:first-child
,
3355 .block-header
h1:first-child
,
3356 .block-footer
h2:first-child
,
3357 .block-header
h2:first-child
,
3358 .block-footer
h3:first-child
,
3359 .block-header
h3:first-child
,
3360 .block-footer
h4:first-child
,
3361 .block-header h4:first-child {
3364 .block-footer
ul:last-child
,
3365 .block-header
ul:last-child
,
3366 .block-footer
p:last-child
,
3367 .block-header
p:last-child
,
3368 .block-footer
h1:last-child
,
3369 .block-header
h1:last-child
,
3370 .block-footer
h2:last-child
,
3371 .block-header
h2:last-child
,
3372 .block-footer
h3:last-child
,
3373 .block-header
h3:last-child
,
3374 .block-footer
h4:last-child
,
3375 .block-header h4:last-child {
3378 .block-footer
ul:first-child:last-child
,
3379 .block-header
ul:first-child:last-child
,
3380 .block-footer
p:first-child:last-child
,
3381 .block-header
p:first-child:last-child
,
3382 .block-footer
h1:first-child:last-child
,
3383 .block-header
h1:first-child:last-child
,
3384 .block-footer
h2:first-child:last-child
,
3385 .block-header
h2:first-child:last-child
,
3386 .block-footer
h3:first-child:last-child
,
3387 .block-header
h3:first-child:last-child
,
3388 .block-footer
h4:first-child:last-child
,
3389 .block-header h4:first-child:last-child {
3393 .list
.block-header
,
3394 .block
.block-header
,
3395 .card
.block-header
,
3396 .timeline .block-header {
3399 .list
.block-footer
,
3400 .block
.block-footer
,
3401 .card
.block-footer
,
3402 .timeline .block-footer {
3405 .list
+ .block-footer
,
3406 .block
+ .block-footer
,
3407 .card
+ .block-footer
,
3408 .timeline + .block-footer {
3409 margin-top: calc
(-1 * (var
(--f7-block-margin-vertical
) - var
(--f7-block-footer-margin
)));
3411 .block + .block-footer {
3412 margin-top: calc
(-1 * (var
(--f7-block-margin-vertical
) - var
(--f7-block-footer-margin
)));
3413 margin-bottom: var
(--f7-block-margin-vertical
);
3415 .block
.block-header
,
3416 .block .block-footer {
3420 border-radius: var
(--f7-block-inset-border-radius
);
3421 margin-left: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
3422 margin-right: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
3423 --f7-safe-area-left: 0px;
3424 --f7-safe-area-right: 0px;
3426 .block-strong.inset:before {
3427 display: none
!important
;
3429 .block-strong.inset:after {
3430 display: none
!important
;
3432 @media (min-width: 768px) {
3433 .block.tablet-inset {
3434 border-radius: var
(--f7-block-inset-border-radius
);
3435 margin-left: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
3436 margin-right: calc
(var
(--f7-block-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
3437 --f7-safe-area-left: 0px;
3438 --f7-safe-area-right: 0px;
3440 .block-strong.tablet-inset:before {
3441 display: none
!important
;
3443 .block-strong.tablet-inset:after {
3444 display: none
!important
;
3447 /* === List View === */
3449 --f7-list-bg-color: #fff;
3450 --f7-list-item-text-max-lines: 2;
3451 --f7-list-chevron-icon-color: #c7c7cc;
3452 --f7-list-chevron-icon-font-size: 20px;
3453 --f7-list-item-title-font-size: inherit
;
3454 --f7-list-item-title-font-weight: 400;
3455 --f7-list-item-title-text-color: inherit
;
3456 --f7-list-item-title-line-height: inherit
;
3457 --f7-list-item-title-white-space: nowrap
;
3458 --f7-list-item-subtitle-font-weight: 400;
3459 --f7-list-item-subtitle-text-color: inherit
;
3460 --f7-list-item-subtitle-line-height: inherit
;
3461 --f7-list-item-text-font-weight: 400;
3462 --f7-list-item-after-font-weight: 400;
3463 --f7-list-item-header-text-color: inherit
;
3464 --f7-list-item-header-font-size: 12px;
3465 --f7-list-item-header-font-weight: 400;
3466 --f7-list-item-header-line-height: 1.2;
3467 --f7-list-item-footer-font-size: 12px;
3468 --f7-list-item-footer-font-weight: 400;
3469 --f7-list-item-footer-line-height: 1.2;
3470 --f7-list-button-font-size: inherit
;
3471 --f7-list-button-font-weight: 400;
3472 --f7-list-item-divider-line-height: inherit
;
3473 --f7-list-group-title-line-height: inherit
;
3477 --f7-list-bg-color: #1c1c1d;
3478 --f7-list-border-color: #282829;
3479 --f7-list-item-border-color: #282829;
3480 --f7-list-item-divider-border-color: #282829;
3481 --f7-list-item-divider-bg-color: #232323;
3482 --f7-list-group-title-bg-color: #232323;
3483 --f7-list-chevron-icon-color: #434345;
3486 --f7-list-in-list-padding-left: 30px;
3487 --f7-list-inset-side-margin: 15px;
3488 --f7-list-inset-border-radius: 7px;
3489 --f7-list-margin-vertical: 35px;
3490 --f7-list-font-size: 17px;
3491 --f7-list-chevron-icon-area: 20px;
3492 --f7-list-border-color: #c8c7cc;
3493 --f7-list-item-border-color: #c8c7cc;
3494 --f7-list-link-pressed-bg-color: #d9d9d9;
3495 --f7-list-item-subtitle-font-size: 15px;
3496 --f7-list-item-text-font-size: 15px;
3497 --f7-list-item-text-text-color: #8e8e93;
3498 --f7-list-item-text-line-height: 21px;
3499 --f7-list-item-after-font-size: inherit
;
3500 --f7-list-item-after-text-color: #8e8e93;
3501 --f7-list-item-after-line-height: inherit
;
3502 --f7-list-item-after-padding: 5px;
3503 --f7-list-item-footer-text-color: #8e8e93;
3504 --f7-list-item-min-height: 44px;
3505 --f7-list-item-media-margin: 15px;
3506 --f7-list-item-media-icons-margin: 5px;
3507 --f7-list-item-cell-margin: 15px;
3508 --f7-list-item-padding-vertical: 8px;
3509 --f7-list-item-padding-horizontal: 15px;
3510 --f7-list-media-item-padding-vertical: 10px;
3511 --f7-list-media-item-padding-horizontal: 15px;
3512 --f7-list-media-item-title-font-weight: 600;
3514 --f7-list-button-text-color: var(--f7-theme-color);
3516 --f7-list-button-text-align: center
;
3517 --f7-list-button-border-color: #c8c7cc;
3518 --f7-list-button-pressed-bg-color: #d9d9d9;
3519 --f7-list-item-divider-height: 31px;
3520 --f7-list-item-divider-text-color: #8e8e93;
3521 --f7-list-item-divider-font-size: inherit
;
3522 --f7-list-item-divider-font-weight: 400;
3523 --f7-list-item-divider-bg-color: #f7f7f7;
3524 --f7-list-item-divider-border-color: #c8c7cc;
3525 --f7-list-group-title-height: 31px;
3526 --f7-list-group-title-text-color: #8e8e93;
3527 --f7-list-group-title-font-size: inherit
;
3528 --f7-list-group-title-font-weight: 400;
3529 --f7-list-group-title-bg-color: #f7f7f7;
3533 --f7-list-button-border-color: #282829;
3534 --f7-list-link-pressed-bg-color: #363636;
3535 --f7-list-button-pressed-bg-color: #363636;
3538 --f7-list-in-list-padding-left: 40px;
3539 --f7-list-inset-side-margin: 16px;
3540 --f7-list-inset-border-radius: 4px;
3541 --f7-list-margin-vertical: 32px;
3542 --f7-list-font-size: 16px;
3543 --f7-list-chevron-icon-area: 26px;
3544 --f7-list-border-color: rgba
(0, 0, 0, 0.12);
3545 --f7-list-item-border-color: rgba
(0, 0, 0, 0.12);
3546 --f7-list-link-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3547 --f7-list-item-subtitle-font-size: 14px;
3548 --f7-list-item-text-font-size: 14px;
3549 --f7-list-item-text-text-color: #757575;
3550 --f7-list-item-text-line-height: 20px;
3551 --f7-list-item-after-font-size: 14px;
3552 --f7-list-item-after-text-color: #757575;
3553 --f7-list-item-after-line-height: inherit
;
3554 --f7-list-item-after-padding: 8px;
3555 --f7-list-item-footer-text-color: rgba
(0, 0, 0, 0.5);
3556 --f7-list-item-min-height: 48px;
3557 --f7-list-item-media-margin: 16px;
3558 --f7-list-item-media-icons-margin: 8px;
3559 --f7-list-item-cell-margin: 16px;
3560 --f7-list-item-padding-vertical: 8px;
3561 --f7-list-item-padding-horizontal: 16px;
3562 --f7-list-media-item-padding-vertical: 14px;
3563 --f7-list-media-item-padding-horizontal: 16px;
3565 --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
3567 --f7-list-button-text-color: #212121;
3568 --f7-list-button-text-align: left
;
3569 --f7-list-button-border-color: transparent
;
3570 --f7-list-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3571 --f7-list-item-divider-height: 48px;
3572 --f7-list-item-divider-text-color: rgba
(0, 0, 0, 0.54);
3573 --f7-list-item-divider-font-size: 14px;
3574 --f7-list-item-divider-font-weight: 400;
3575 --f7-list-item-divider-bg-color: #f4f4f4;
3576 --f7-list-item-divider-border-color: transparent
;
3577 --f7-list-group-title-height: 48px;
3578 --f7-list-group-title-text-color: rgba
(0, 0, 0, 0.54);
3579 --f7-list-group-title-font-size: 14px;
3580 --f7-list-group-title-font-weight: 400;
3581 --f7-list-group-title-bg-color: #f4f4f4;
3585 --f7-list-button-text-color: #fff;
3586 --f7-list-item-divider-text-color: #fff;
3587 --f7-list-group-title-text-color: #fff;
3588 --f7-list-link-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3589 --f7-list-button-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3590 --f7-list-item-text-text-color: rgba
(255, 255, 255, 0.54);
3591 --f7-list-item-after-text-color: rgba
(255, 255, 255, 0.54);
3592 --f7-list-item-footer-text-color: rgba
(255, 255, 255, 0.54);
3595 --f7-list-in-list-padding-left: 15px;
3596 --f7-list-inset-side-margin: 15px;
3597 --f7-list-inset-border-radius: 4px;
3598 --f7-list-margin-vertical: 15px;
3599 --f7-list-font-size: 14px;
3600 --f7-list-chevron-icon-area: 15px;
3601 --f7-list-chevron-icon-font-size: 16px;
3602 --f7-list-border-color: rgba
(0, 0, 0, 0.12);
3603 --f7-list-item-border-color: rgba
(0, 0, 0, 0.12);
3604 --f7-list-link-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3605 --f7-list-link-hover-bg-color: rgba
(0, 0, 0, 0.03);
3606 --f7-list-item-title-line-height: 1.3;
3607 --f7-list-item-subtitle-font-size: 14px;
3608 --f7-list-item-subtitle-line-height: 1.3;
3609 --f7-list-item-text-font-size: 12px;
3610 --f7-list-item-text-text-color: rgba
(0, 0, 0, 0.6);
3611 --f7-list-item-text-line-height: 16px;
3612 --f7-list-item-after-font-size: 13px;
3613 --f7-list-item-after-text-color: rgba
(0, 0, 0, 0.5);
3614 --f7-list-item-after-line-height: 1.2;
3615 --f7-list-item-after-padding: 5px;
3616 --f7-list-item-footer-text-color: rgba
(0, 0, 0, 0.6);
3617 --f7-list-item-min-height: 32px;
3618 --f7-list-item-media-margin: 10px;
3619 --f7-list-item-media-icons-margin: 5px;
3620 --f7-list-item-cell-margin: 15px;
3621 --f7-list-item-padding-vertical: 5px;
3622 --f7-list-item-padding-horizontal: 15px;
3623 --f7-list-media-item-padding-vertical: 5px;
3624 --f7-list-media-item-padding-horizontal: 15px;
3625 --f7-list-media-item-title-font-weight: 600;
3627 --f7-list-button-text-color: var(--f7-theme-color);
3629 --f7-list-button-text-align: center
;
3630 --f7-list-button-border-color: rgba
(0, 0, 0, 0.12);
3631 --f7-list-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
3632 --f7-list-button-hover-bg-color: rgba
(0, 0, 0, 0.03);
3633 --f7-list-item-divider-height: 19px;
3634 --f7-list-item-divider-text-color: rgba
(0, 0, 0, 0.6);
3635 --f7-list-item-divider-font-size: inherit
;
3636 --f7-list-item-divider-font-weight: 500;
3637 --f7-list-item-divider-bg-color: #f7f7f7;
3638 --f7-list-item-divider-border-color: transparent
;
3639 --f7-list-group-title-height: 19px;
3640 --f7-list-group-title-text-color: rgba
(0, 0, 0, 0.6);
3641 --f7-list-group-title-font-size: inherit
;
3642 --f7-list-group-title-font-weight: 500;
3643 --f7-list-group-title-bg-color: #f7f7f7;
3645 .aurora
.theme-dark
,
3646 .aurora.theme-dark {
3647 --f7-list-button-border-color: #282829;
3648 --f7-list-item-text-text-color: rgba
(255, 255, 255, 0.52);
3649 --f7-list-item-after-text-color: rgba
(255, 255, 255, 0.52);
3650 --f7-list-item-footer-text-color: rgba
(255, 255, 255, 0.52);
3651 --f7-list-item-divider-text-color: rgba
(255, 255, 255, 0.6);
3652 --f7-list-group-title-text-color: rgba
(255, 255, 255, 0.6);
3653 --f7-list-link-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3654 --f7-list-link-hover-bg-color: rgba
(255, 255, 255, 0.03);
3655 --f7-list-button-pressed-bg-color: rgba
(255, 255, 255, 0.05);
3656 --f7-list-button-hover-bg-color: rgba
(255, 255, 255, 0.03);
3661 font-size: var
(--f7-list-font-size
);
3662 margin: var
(--f7-list-margin-vertical
) 0;
3669 background: var
(--f7-list-bg-color
);
3674 background-color: var
(--f7-list-border-color
);
3683 transform-origin: 50% 0%;
3684 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3689 background-color: var
(--f7-list-border-color
);
3698 transform-origin: 50% 100%;
3699 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3702 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-list-in-list-padding-left
));
3704 .list ul ul:before {
3705 display: none
!important
;
3708 display: none
!important
;
3712 box-sizing: border-box
;
3718 align-items: center
;
3719 box-sizing: border-box
;
3720 padding-bottom: var
(--f7-list-item-padding-vertical
);
3721 padding-top: var
(--f7-list-item-padding-vertical
);
3723 .list .item-media + .item-inner {
3724 margin-left: var
(--f7-list-item-media-margin
);
3726 .list
.item-media i
+ i
,
3727 .list .item-media i + img {
3728 margin-left: var
(--f7-list-item-media-icons-margin
);
3731 padding-left: var
(--f7-list-item-after-padding
);
3738 justify-content: space-between
;
3739 box-sizing: border-box
;
3740 align-items: center
;
3741 align-self: stretch
;
3742 padding-top: var
(--f7-list-item-padding-vertical
);
3743 padding-bottom: var
(--f7-list-item-padding-vertical
);
3744 min-height: var
(--f7-list-item-min-height
);
3745 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3750 white-space: var
(--f7-list-item-title-white-space
);
3753 text-overflow: ellipsis
;
3755 font-size: var
(--f7-list-item-title-font-size
);
3756 font-weight: var
(--f7-list-item-title-font-weight
);
3757 color: var
(--f7-list-item-title-text-color
);
3758 line-height: var
(--f7-list-item-title-line-height
);
3761 white-space: nowrap
;
3764 font-size: var
(--f7-list-item-after-font-size
);
3765 font-weight: var
(--f7-list-item-after-font-weight
);
3766 color: var
(--f7-list-item-after-text-color
);
3767 line-height: var
(--f7-list-item-after-line-height
);
3771 .list .item-footer {
3772 white-space: normal
;
3774 .list .item-header {
3775 color: var
(--f7-list-item-header-text-color
);
3776 font-size: var
(--f7-list-item-header-font-size
);
3777 font-weight: var
(--f7-list-item-header-font-weight
);
3778 line-height: var
(--f7-list-item-header-line-height
);
3780 .list .item-footer {
3781 color: var
(--f7-list-item-footer-text-color
);
3782 font-size: var
(--f7-list-item-footer-font-size
);
3783 font-weight: var
(--f7-list-item-footer-font-weight
);
3784 line-height: var
(--f7-list-item-footer-line-height
);
3787 .list .list-button {
3788 transition-duration: 300ms;
3789 transition-property: background-color
;
3798 .list .item-link.active-state {
3799 background-color: var
(--f7-list-link-pressed-bg-color
);
3801 .list .item-link .item-inner {
3802 padding-right: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
3804 .list .item-content {
3806 justify-content: space-between
;
3807 box-sizing: border-box
;
3808 align-items: center
;
3809 min-height: var
(--f7-list-item-min-height
);
3810 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
3812 .list .item-subtitle {
3815 white-space: nowrap
;
3817 text-overflow: ellipsis
;
3818 font-size: var
(--f7-list-item-subtitle-font-size
);
3819 font-weight: var
(--f7-list-item-subtitle-font-weight
);
3820 color: var
(--f7-list-item-subtitle-text-color
);
3821 line-height: var
(--f7-list-item-subtitle-line-height
);
3826 text-overflow: hidden
;
3827 -webkit-line-clamp: var
(--f7-list-item-text-max-lines
);
3828 display: -webkit-box
;
3829 font-size: var
(--f7-list-item-text-font-size
);
3830 font-weight: var
(--f7-list-item-text-font-weight
);
3831 color: var
(--f7-list-item-text-text-color
);
3832 line-height: var
(--f7-list-item-text-line-height
);
3833 max-height: calc
(var
(--f7-list-item-text-line-height
) * var
(--f7-list-item-text-max-lines
));
3835 .list .item-title-row {
3838 justify-content: space-between
;
3839 box-sizing: border-box
;
3841 .list .item-title-row .item-after {
3846 justify-content: space-between
;
3847 box-sizing: border-box
;
3852 box-sizing: border-box
;
3855 margin-left: var
(--f7-list-item-cell-margin
);
3858 .list .item-cell:first-child {
3861 .list .ripple-wave + .item-cell {
3864 .list li:last-child .list-button:after {
3865 display: none
!important
;
3867 .list
li:last-child
> .item-inner:after
,
3868 .list
li:last-child
li:last-child
> .item-inner:after
,
3869 .list
li:last-child
> .item-content
> .item-inner:after
,
3870 .list
li:last-child
li:last-child
> .item-content
> .item-inner:after
,
3871 .list
li:last-child
> .swipeout-content
> .item-content
> .item-inner:after
,
3872 .list
li:last-child
li:last-child
> .swipeout-content
> .item-content
> .item-inner:after
,
3873 .list
li:last-child
> .item-link
> .item-content
> .item-inner:after
,
3874 .list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
3875 display: none
!important
;
3877 .list li
li:last-child
.item-inner:after
,
3878 .list li:last-child li .item-inner:after {
3881 background-color: var
(--f7-list-item-border-color
);
3890 transform-origin: 50% 100%;
3891 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3893 .list
.no-hairlines:before
,
3894 .list
.no-hairlines
ul:before
,
3895 .md
.list
.no-hairlines-md:before
,
3896 .md
.list
.no-hairlines-md
ul:before
,
3897 .ios
.list
.no-hairlines-ios:before
,
3898 .ios
.list
.no-hairlines-ios
ul:before
,
3899 .aurora
.list
.no-hairlines-aurora:before
,
3900 .aurora .list.no-hairlines-aurora ul:before {
3901 display: none
!important
;
3903 .list
.no-hairlines:after
,
3904 .list
.no-hairlines
ul:after
,
3905 .md
.list
.no-hairlines-md:after
,
3906 .md
.list
.no-hairlines-md
ul:after
,
3907 .ios
.list
.no-hairlines-ios:after
,
3908 .ios
.list
.no-hairlines-ios
ul:after
,
3909 .aurora
.list
.no-hairlines-aurora:after
,
3910 .aurora .list.no-hairlines-aurora ul:after {
3911 display: none
!important
;
3913 .list
.no-hairline-top:before
,
3914 .list
.no-hairline-top
ul:before
,
3915 .md
.list
.no-hairline-top-md:before
,
3916 .md
.list
.no-hairline-top-md
ul:before
,
3917 .ios
.list
.no-hairline-top-ios:before
,
3918 .ios
.list
.no-hairline-top-ios
ul:before
,
3919 .aurora
.list
.no-hairline-top-aurora:before
,
3920 .aurora .list.no-hairline-top-aurora ul:before {
3921 display: none
!important
;
3923 .list
.no-hairline-bottom:after
,
3924 .list
.no-hairline-bottom
ul:after
,
3925 .md
.list
.no-hairline-bottom-md:after
,
3926 .md
.list
.no-hairline-bottom-md
ul:after
,
3927 .ios
.list
.no-hairline-bottom-ios:after
,
3928 .ios
.list
.no-hairline-bottom-ios
ul:after
,
3929 .aurora
.list
.no-hairline-bottom-aurora:after
,
3930 .aurora .list.no-hairline-bottom-aurora ul:after {
3931 display: none
!important
;
3933 .list
.no-hairlines-between
.item-inner:after
,
3934 .md
.list
.no-hairlines-between-md
.item-inner:after
,
3935 .ios
.list
.no-hairlines-between-ios
.item-inner:after
,
3936 .aurora
.list
.no-hairlines-between-aurora
.item-inner:after
,
3937 .list
.no-hairlines-between
.list-button:after
,
3938 .md
.list
.no-hairlines-between-md
.list-button:after
,
3939 .ios
.list
.no-hairlines-between-ios
.list-button:after
,
3940 .aurora
.list
.no-hairlines-between-aurora
.list-button:after
,
3941 .list
.no-hairlines-between
.item-divider:after
,
3942 .md
.list
.no-hairlines-between-md
.item-divider:after
,
3943 .ios
.list
.no-hairlines-between-ios
.item-divider:after
,
3944 .aurora
.list
.no-hairlines-between-aurora
.item-divider:after
,
3945 .list
.no-hairlines-between
.list-group-title:after
,
3946 .md
.list
.no-hairlines-between-md
.list-group-title:after
,
3947 .ios
.list
.no-hairlines-between-ios
.list-group-title:after
,
3948 .aurora
.list
.no-hairlines-between-aurora
.list-group-title:after
,
3949 .list
.no-hairlines-between
.list-group-title:after
,
3950 .md
.list
.no-hairlines-between-md
.list-group-title:after
,
3951 .ios
.list
.no-hairlines-between-ios
.list-group-title:after
,
3952 .aurora .list.no-hairlines-between-aurora .list-group-title:after {
3953 display: none
!important
;
3955 .list
.no-hairlines-between
.simple-list
li:after
,
3956 .md
.list
.no-hairlines-between-md
.simple-list
li:after
,
3957 .ios
.list
.no-hairlines-between-ios
.simple-list
li:after
,
3958 .aurora .list.no-hairlines-between-aurora.simple-list li:after {
3959 display: none
!important
;
3961 .list
.no-hairlines-between
.links-list
a:after
,
3962 .md
.list
.no-hairlines-between-md
.links-list
a:after
,
3963 .ios
.list
.no-hairlines-between-ios
.links-list
a:after
,
3964 .aurora .list.no-hairlines-between-aurora.links-list a:after {
3965 display: none
!important
;
3968 padding: 0 var
(--f7-list-item-padding-horizontal
);
3969 line-height: var
(--f7-list-item-min-height
);
3970 color: var
(--f7-list-button-text-color
, var
(--f7-theme-color
));
3971 font-size: var
(--f7-list-button-font-size
);
3972 font-weight: var
(--f7-list-button-font-weight
);
3973 text-align: var
(--f7-list-button-text-align
);
3975 .list-button:after {
3978 background-color: var
(--f7-list-button-border-color
);
3987 transform-origin: 50% 100%;
3988 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
3990 .list-button.active-state {
3991 background-color: var
(--f7-list-button-pressed-bg-color
);
3993 .list-button[class*="color-"] {
3994 --f7-list-button-text-color: var
(--f7-theme-color
);
3998 white-space: nowrap
;
3999 text-overflow: ellipsis
;
4001 box-sizing: border-box
;
4003 justify-content: space-between
;
4004 align-items: center
;
4005 align-content: center
;
4006 line-height: var
(--f7-list-item-min-height
);
4007 height: var
(--f7-list-item-min-height
);
4008 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4009 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4011 .simple-list li:after {
4012 left: var
(--f7-list-item-padding-horizontal
);
4014 left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4017 .simple-list li:last-child:after {
4018 display: none
!important
;
4024 transition-duration: 300ms;
4025 transition-property: background-color
;
4030 align-items: center
;
4031 align-content: center
;
4032 justify-content: space-between
;
4033 box-sizing: border-box
;
4034 white-space: nowrap
;
4035 text-overflow: ellipsis
;
4037 height: var
(--f7-list-item-min-height
);
4040 .links-list a .ripple-wave {
4043 .links-list a:after {
4046 .links-list a.active-state {
4047 background-color: var
(--f7-list-link-pressed-bg-color
);
4050 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4051 padding-right: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4053 .links-list a:after {
4054 left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4057 .links-list li:last-child a:after {
4058 display: none
!important
;
4060 .simple-list
li:after
,
4061 .links-list
a:after
,
4062 .list .item-inner:after {
4065 background-color: var
(--f7-list-item-border-color
);
4074 transform-origin: 50% 100%;
4075 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
4079 --f7-list-item-padding-vertical: var
(--f7-list-media-item-padding-vertical
);
4080 --f7-list-item-padding-horizontal: var
(--f7-list-media-item-padding-horizontal
);
4082 .media-list
.item-title
,
4083 li
.media-item
.item-title
{
4084 font-weight: var
(--f7-list-media-item-title-font-weight
, var
(--f7-list-item-title-font-weight
, inherit
));
4086 .media-list
.item-inner
,
4087 li
.media-item
.item-inner
{
4089 align-self: stretch
;
4091 .media-list
.item-media
,
4092 li
.media-item
.item-media
{
4093 align-self: flex-start
;
4095 .media-list
.item-media img
,
4096 li
.media-item
.item-media img
{
4099 .media-list
.item-link
.item-inner
,
4100 li
.media-item
.item-link
.item-inner
{
4101 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4103 .media-list
.item-link
.item-title-row
,
4104 li
.media-item
.item-link
.item-title-row
{
4105 padding-right: calc
(var
(--f7-list-chevron-icon-area
));
4107 .media-list
.chevron-center
.item-link
.item-inner
,
4108 .media-list
.chevron-center
.item-link
.item-inner
,
4109 .media-list
.item-link
.chevron-center
.item-inner
,
4110 li
.media-item
.chevron-center
.item-link
.item-inner
,
4111 li
.media-item
.item-link
.chevron-center
.item-inner
,
4112 li
.media-item
.chevron-center
.item-link
.item-inner
{
4113 padding-right: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4115 .media-list
.chevron-center
.item-title-row
,
4116 .media-list
.chevron-center
.item-title-row
,
4117 li
.media-item
.chevron-center
.item-title-row
,
4118 li
.media-item
.chevron-center
.item-title-row
{
4121 .list
.item-link
.item-inner:before
,
4122 .links-list
a:before
,
4123 .media-list
.item-link
.item-title-row:before
,
4124 li
.media-item
.item-link
.item-title-row:before
,
4125 .media-list
.chevron-center
.item-link
.item-inner:before
,
4126 .media-list
.chevron-center
.item-link
.item-inner:before
,
4127 .media-list
.item-link
.chevron-center
.item-inner:before
,
4128 li
.media-item
.chevron-center
.item-link
.item-inner:before
,
4129 li
.media-item
.chevron-center
.item-link
.item-inner:before
,
4130 li
.media-item
.item-link
.chevron-center
.item-inner:before
{
4131 font-family: 'framework7-core-icons';
4132 font-weight: normal
;
4135 letter-spacing: normal
;
4136 text-transform: none
;
4137 white-space: nowrap
;
4140 -webkit-font-smoothing: antialiased
;
4141 text-rendering: optimizeLegibility
;
4142 -moz-osx-font-smoothing: grayscale
;
4143 -moz-font-feature-settings: "liga";
4144 font-feature-settings: "liga";
4155 font-size: var
(--f7-list-chevron-icon-font-size
);
4157 color: var
(--f7-list-chevron-icon-color
);
4158 pointer-events: none
;
4159 right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4160 content: 'chevron_right';
4162 .media-list
.chevron-center
.item-title-row:before
,
4163 .media-list
.chevron-center
.item-title-row:before
,
4164 li
.media-item
.chevron-center
.item-title-row:before
,
4165 li
.media-item
.chevron-center
.item-title-row:before
{
4168 .media-list
.item-link
.item-inner:before
,
4169 li
.media-item
.item-link
.item-inner:before
{
4172 .media-list
.item-link
.item-title-row:before
,
4173 li
.media-item
.item-link
.item-title-row:before
{
4176 .list-group
ul:after
,
4177 .list-group ul:before {
4178 z-index: 25 !important
;
4180 .list-group + .list-group ul:before {
4181 display: none
!important
;
4185 li
.list-group-title
{
4186 white-space: nowrap
;
4189 text-overflow: ellipsis
;
4194 padding-left: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-left
));
4195 padding-right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
4196 box-sizing: border-box
;
4198 align-items: center
;
4199 align-content: center
;
4201 li
.item-divider:after
,
4202 .item-divider:after
,
4203 li
.list-group-title:after
{
4204 display: none
!important
;
4209 height: var
(--f7-list-item-divider-height
);
4210 color: var
(--f7-list-item-divider-text-color
);
4211 font-size: var
(--f7-list-item-divider-font-size
);
4212 font-weight: var
(--f7-list-item-divider-font-weight
);
4213 background-color: var
(--f7-list-item-divider-bg-color
);
4214 line-height: var
(--f7-list-item-divider-line-height
);
4216 li
.item-divider:before
,
4217 .item-divider:before {
4220 background-color: var
(--f7-list-item-divider-border-color
);
4229 transform-origin: 50% 0%;
4230 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
4232 li
.list-group-title
,
4233 .list li.list-group-title {
4235 position: -webkit-sticky
;
4240 height: var
(--f7-list-group-title-height
);
4241 color: var
(--f7-list-group-title-text-color
);
4242 font-size: var
(--f7-list-group-title-font-size
);
4243 font-weight: var
(--f7-list-group-title-font-weight
);
4244 background-color: var
(--f7-list-group-title-bg-color
);
4245 line-height: var
(--f7-list-group-title-line-height
);
4247 .page-with-navbar-large li
.list-group-title
,
4248 .page-with-navbar-large .list li.list-group-title {
4249 top: calc
(-1 * var
(--f7-navbar-large-title-height
));
4252 margin-left: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
4253 margin-right: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
4254 border-radius: var
(--f7-list-inset-border-radius
);
4255 --f7-safe-area-left: 0px;
4256 --f7-safe-area-right: 0px;
4258 .list.inset .block-title {
4263 border-radius: var
(--f7-list-inset-border-radius
);
4265 .list.inset ul:before {
4266 display: none
!important
;
4268 .list.inset ul:after {
4269 display: none
!important
;
4271 .list
.inset li
.swipeout:first-child
,
4272 .list.inset li:first-child > a {
4273 border-radius: var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
) 0 0;
4275 .list
.inset li
.swipeout:last-child
,
4276 .list.inset li:last-child > a {
4277 border-radius: 0 0 var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
);
4279 .list
.inset li
.swipeout:first-child:last-child
,
4280 .list.inset li:first-child:last-child > a {
4281 border-radius: var
(--f7-list-inset-border-radius
);
4283 @media (min-width: 768px) {
4284 .list.tablet-inset {
4285 margin-left: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-left
));
4286 margin-right: calc
(var
(--f7-list-inset-side-margin
) + var
(--f7-safe-area-outer-right
));
4287 border-radius: var
(--f7-list-inset-border-radius
);
4288 --f7-safe-area-left: 0px;
4289 --f7-safe-area-right: 0px;
4291 .list.tablet-inset .block-title {
4295 .list.tablet-inset ul {
4296 border-radius: var
(--f7-list-inset-border-radius
);
4298 .list.tablet-inset ul:before {
4299 display: none
!important
;
4301 .list.tablet-inset ul:after {
4302 display: none
!important
;
4304 .list.tablet-inset li:first-child > a {
4305 border-radius: var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
) 0 0;
4307 .list.tablet-inset li:last-child > a {
4308 border-radius: 0 0 var
(--f7-list-inset-border-radius
) var
(--f7-list-inset-border-radius
);
4310 .list.tablet-inset li:first-child:last-child > a {
4311 border-radius: var
(--f7-list-inset-border-radius
);
4316 --f7-list-chevron-icon-color: transparent
;
4317 --f7-list-chevron-icon-area: 0px;
4319 .ios
.item-link
.active-state
.item-inner:after
,
4320 .ios
.list-button
.active-state:after
,
4321 .ios .links-list a.active-state:after {
4322 background-color: transparent
;
4324 .ios
.links-list a
.active-state
,
4325 .ios
.list
.item-link
.active-state
,
4326 .ios .list .list-button.active-state {
4327 transition-duration: 0ms;
4329 .md .list .item-media {
4332 .aurora .list .item-media {
4335 .aurora
.list
.item-link
.item-inner:before
,
4336 .aurora
.links-list
a:before
,
4337 .aurora
.media-list
.item-link
.item-title-row:before
,
4338 .aurora li
.media-item
.item-link
.item-title-row:before
,
4339 .aurora
.media-list
.chevron-center
.item-link
.item-inner:before
,
4340 .aurora
.media-list
.chevron-center
.item-link
.item-inner:before
,
4341 .aurora
.media-list
.item-link
.chevron-center
.item-inner:before
,
4342 .aurora li
.media-item
.chevron-center
.item-link
.item-inner:before
,
4343 .aurora li
.media-item
.chevron-center
.item-link
.item-inner:before
,
4344 .aurora li.media-item .item-link.chevron-center .item-inner:before {
4345 content: 'chevron_right_aurora';
4347 .aurora
.links-list a
,
4348 .aurora
.list
.item-link
,
4349 .aurora .list .list-button {
4350 transition-duration: 0ms;
4352 .aurora
.device-desktop
.links-list
a:hover:not
(.active-state
):not
(.no-hover
),
4353 .aurora.device-desktop .list .item-link:hover:not(.active-state):not(.no-hover) {
4354 background: var
(--f7-list-link-hover-bg-color
);
4356 .aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
4357 background: var
(--f7-list-button-hover-bg-color
);
4361 --f7-badge-text-color: #fff;
4362 --f7-badge-bg-color: #8e8e93;
4363 --f7-badge-padding: 0 4px;
4364 --f7-badge-in-icon-size: 16px;
4365 --f7-badge-in-icon-font-size: 10px;
4366 --f7-badge-font-weight: normal
;
4367 --f7-badge-font-size: 12px;
4370 --f7-badge-size: 20px;
4373 --f7-badge-size: 18px;
4376 --f7-badge-size: 18px;
4377 --f7-badge-font-weight: 600;
4378 --f7-badge-in-icon-size: 15px;
4381 display: inline-flex
;
4382 align-items: center
;
4383 align-content: center
;
4384 justify-content: center
;
4385 color: var
(--f7-badge-text-color
);
4386 background: var
(--f7-badge-bg-color
);
4388 box-sizing: border-box
;
4390 vertical-align: middle
;
4391 font-weight: var
(--f7-badge-font-weight
);
4392 font-size: var
(--f7-badge-font-size
);
4393 border-radius: var
(--f7-badge-size
);
4394 padding: var
(--f7-badge-padding
);
4395 height: var
(--f7-badge-size
);
4396 min-width: var
(--f7-badge-size
);
4400 .framework7-icons
.badge
,
4401 .material-icons .badge {
4406 font-family: var
(--f7-font-family
);
4407 --f7-badge-font-size: var
(--f7-badge-in-icon-font-size
);
4408 --f7-badge-size: var
(--f7-badge-in-icon-size
);
4410 .badge[class*="color-"] {
4411 --f7-badge-bg-color: var
(--f7-theme-color
);
4414 --f7-button-font-size: 14px;
4415 --f7-button-min-width: 32px;
4416 --f7-button-bg-color: transparent
;
4417 --f7-button-border-width: 0px;
4419 --f7-button-text-color: var(--f7-theme-color);
4420 --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
4421 --f7-button-border-color: var(--f7-theme-color);
4422 --f7-button-fill-text-color: #fff;
4423 --f7-button-fill-bg-color: var(--f7-theme-color);
4424 --f7-button-outline-border-color: var(--f7-theme-color);
4426 --f7-button-raised-box-shadow: 0 1px 3px rgba
(0, 0, 0, 0.12), 0 1px 2px rgba
(0,0,0,0.24);
4427 --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba
(0, 0, 0, 0.16), 0 3px 6px rgba
(0,0,0,0.23);
4428 --f7-segmented-raised-divider-color: rgba
(0, 0, 0, 0.1);
4431 --f7-button-height: 29px;
4432 --f7-button-padding-horizontal: 10px;
4433 --f7-button-border-radius: 5px;
4434 --f7-button-font-weight: 400;
4435 --f7-button-letter-spacing: 0;
4436 --f7-button-text-transform: none
;
4438 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4439 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
4441 --f7-button-outline-border-width: 1px;
4442 --f7-button-large-height: 44px;
4443 --f7-button-large-font-size: 17px;
4444 --f7-button-large-font-weight: 400;
4445 --f7-button-small-height: 26px;
4446 --f7-button-small-font-size: 13px;
4447 --f7-button-small-font-weight: 600;
4448 --f7-button-small-text-transform: uppercase
;
4449 --f7-button-small-outline-border-width: 2px;
4452 --f7-button-height: 36px;
4453 --f7-button-padding-horizontal: 8px;
4454 --f7-button-border-radius: 4px;
4455 --f7-button-font-weight: 500;
4456 --f7-button-letter-spacing: 0.03em;
4457 --f7-button-text-transform: uppercase
;
4458 --f7-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
4460 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4462 --f7-button-outline-border-width: 2px;
4463 --f7-button-large-height: 48px;
4464 --f7-button-large-font-size: 14px;
4465 --f7-button-large-font-weight: 500;
4466 --f7-button-small-height: 28px;
4467 --f7-button-small-font-size: 12px;
4468 --f7-button-small-font-weight: 500;
4469 --f7-button-small-text-transform: uppercase
;
4470 --f7-button-small-outline-border-width: 2px;
4474 --f7-button-pressed-bg-color: rgba
(255, 255, 255, 0.1);
4478 --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
4479 --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
4481 --f7-button-font-size: 14px;
4482 --f7-button-height: 28px;
4483 --f7-button-min-width: 24px;
4484 --f7-button-padding-horizontal: 10px;
4485 --f7-button-border-radius: 4px;
4486 --f7-button-font-weight: 400;
4487 --f7-button-letter-spacing: 0.02;
4488 --f7-button-text-transform: none
;
4490 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4491 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4493 --f7-button-outline-border-width: 2px;
4494 --f7-button-large-height: 34px;
4495 --f7-button-large-font-size: 14px;
4496 --f7-button-large-font-weight: 600;
4497 --f7-button-small-height: 22px;
4498 --f7-button-small-font-size: 12px;
4499 --f7-button-small-font-weight: 600;
4500 --f7-button-small-text-transform: none
;
4501 --f7-button-small-outline-border-width: 1px;
4504 -webkit-appearance: none
;
4505 -moz-appearance: none
;
4510 text-decoration: none
;
4513 -webkit-appearance: none
;
4514 -moz-appearance: none
;
4518 white-space: nowrap
;
4519 text-overflow: ellipsis
;
4522 font-family: inherit
;
4525 box-sizing: border-box
;
4526 vertical-align: middle
;
4527 justify-content: center
;
4528 align-items: center
;
4529 border: var
(--f7-button-border-width
, 0px) solid var
(--f7-button-border-color
, var
(--f7-theme-color
));
4530 font-size: var
(--f7-button-font-size
);
4531 color: var
(--f7-button-text-color
, var
(--f7-theme-color
));
4532 height: var
(--f7-button-height
);
4533 line-height: calc
(var
(--f7-button-height
) - var
(--f7-button-border-width
, 0) * 2);
4534 padding: var
(--f7-button-padding-vertical
, 0px) var
(--f7-button-padding-horizontal
);
4535 border-radius: var
(--f7-button-border-radius
);
4536 min-width: var
(--f7-button-min-width
);
4537 font-weight: var
(--f7-button-font-weight
);
4538 letter-spacing: var
(--f7-button-letter-spacing
);
4539 text-transform: var
(--f7-button-text-transform
);
4540 background-color: var
(--f7-button-bg-color
);
4541 box-shadow: var
(--f7-button-box-shadow
);
4543 .button.active-state {
4544 background-color: var
(--f7-button-pressed-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.15));
4545 color: var
(--f7-button-pressed-text-color
, var
(--f7-button-text-color
, var
(--f7-theme-color
)));
4547 input
[type
="submit"].button
,
4548 input
[type
="button"].button
{
4552 .button
> span
+ span
,
4562 color: var
(--f7-button-text-color
, var
(--f7-theme-color
));
4565 .ios
.button-round-ios
,
4566 .md
.button-round-md
,
4567 .aurora .button-round-aurora {
4568 --f7-button-border-radius: var
(--f7-button-height
);
4571 .ios
.button-fill-ios
,
4572 .md
.button-fill-md
,
4573 .aurora
.button-fill-aurora
,
4575 .button.tab-link-active {
4576 --f7-button-bg-color: var
(--f7-button-fill-bg-color
, var
(--f7-theme-color
));
4577 --f7-button-text-color: var
(--f7-button-fill-text-color
, #fff);
4578 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
4581 .ios
.button-fill-ios
,
4582 .md
.button-fill-md
,
4583 .aurora .button-fill-aurora {
4584 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
);
4587 .button.tab-link-active {
4588 --f7-button-pressed-bg-color: var
(--f7-button-bg-color
);
4591 .ios
.button-outline-ios
,
4592 .md
.button-outline-md
,
4593 .aurora .button-outline-aurora {
4594 --f7-button-border-color: var
(--f7-button-outline-border-color
, var
(--f7-theme-color
));
4595 --f7-button-border-width: var
(--f7-button-outline-border-width
);
4598 .ios
.button-large-ios
,
4599 .md
.button-large-md
,
4600 .aurora .button-large-aurora {
4601 --f7-button-height: var
(--f7-button-large-height
);
4602 --f7-button-font-size: var
(--f7-button-large-font-size
);
4603 --f7-button-font-weight: var
(--f7-button-large-font-weight
);
4606 .ios
.button-small-ios
,
4607 .md
.button-small-md
,
4608 .aurora .button-small-aurora {
4609 --f7-button-outline-border-width: var
(--f7-button-small-outline-border-width
);
4610 --f7-button-height: var
(--f7-button-small-height
);
4611 --f7-button-font-size: var
(--f7-button-small-font-size
);
4612 --f7-button-font-weight: var
(--f7-button-small-font-weight
);
4613 --f7-button-text-transform: var
(--f7-button-small-text-transform
);
4615 .ios
.button-small
.button-fill
,
4616 .ios
.button-small-ios
.button-fill
,
4617 .ios .button-small.button-fill-ios {
4618 --f7-button-border-width: var
(--f7-button-small-outline-border-width
);
4619 --f7-button-pressed-text-color: var
(--f7-theme-color
);
4620 --f7-button-pressed-bg-color: transparent
;
4626 border-radius: var
(--f7-button-border-radius
);
4627 box-shadow: var
(--f7-button-box-shadow
);
4636 .segmented .button:first-child {
4637 border-radius: var
(--f7-button-border-radius
) 0 0 var
(--f7-button-border-radius
);
4639 .segmented .button:not(.button-outline):first-child {
4642 .segmented .button.button-outline:nth-child(n + 2) {
4645 .segmented .button:last-child {
4646 border-radius: 0 var
(--f7-button-border-radius
) var
(--f7-button-border-radius
) 0;
4648 .segmented .button-round:first-child {
4649 border-radius: var
(--f7-button-height
) 0 0 var
(--f7-button-height
);
4651 .segmented .button-round:last-child {
4652 border-radius: 0 var
(--f7-button-height
) var
(--f7-button-height
) 0;
4654 .segmented .button:first-child:last-child {
4655 border-radius: var
(--f7-button-border-radius
);
4658 .ios
.segmented-round-ios
,
4659 .md
.segmented-round-md
,
4660 .aurora .segmented-round-aurora {
4661 border-radius: var
(--f7-button-height
);
4664 .ios
.segmented-raised-ios
,
4665 .md
.segmented-raised-md
,
4666 .aurora .segmented-raised-aurora {
4667 box-shadow: var
(--f7-button-raised-box-shadow
);
4669 .segmented-raised
.button:not
(.button-outline
),
4670 .ios
.segmented-raised-ios
.button:not
(.button-outline
),
4671 .md
.segmented-raised-md
.button:not
(.button-outline
),
4672 .aurora .segmented-raised-aurora .button:not(.button-outline) {
4673 border-left: 1px solid var
(--f7-segmented-raised-divider-color
);
4676 .ios
.button-raised-ios
,
4677 .md
.button-raised-md
,
4678 .aurora .button-raised-aurora {
4679 --f7-button-box-shadow: var
(--f7-button-raised-box-shadow
);
4681 .button-raised
.active-state
,
4682 .ios
.button-raised-ios
.active-state
,
4683 .md
.button-raised-md
.active-state
,
4684 .aurora .button-raised-aurora.active-state {
4685 --f7-button-box-shadow: var
(--f7-button-raised-pressed-box-shadow
);
4687 .subnavbar .segmented {
4691 transition-duration: 100ms;
4694 .ios .button-fill-ios {
4695 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
, var
(--f7-theme-color-tint
));
4698 .ios .button-small-ios {
4699 transition-duration: 200ms;
4702 transition-duration: 300ms;
4703 transform: translate3d
(0, 0, 0);
4706 .md .button-fill-md {
4707 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
, var
(--f7-theme-color-shade
));
4710 transition-duration: 100ms;
4711 transform: translate3d
(0, 0, 0);
4713 .aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
4714 background-color: var
(--f7-button-hover-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.07));
4716 .aurora
.button-fill
,
4717 .aurora .button-fill-aurora {
4718 --f7-button-pressed-bg-color: var
(--f7-button-fill-pressed-bg-color
, var
(--f7-theme-color-shade
));
4720 .aurora
.button-fill
,
4721 .aurora
.button-active
,
4722 .aurora
.button
.tab-link-active
,
4723 .aurora .button-fill-aurora {
4724 --f7-button-hover-bg-color: var
(--f7-button-fill-hover-bg-color
, var
(--f7-theme-color-tint
));
4726 /* === Touch Ripple === */
4728 --f7-touch-ripple-black: rgba
(0, 0, 0, 0.1);
4729 --f7-touch-ripple-white: rgba
(255, 255, 255, 0.3);
4730 --f7-touch-ripple-color: var
(--f7-touch-ripple-black
);
4733 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
4746 .speed-dial-buttons a {
4747 -webkit-user-select: none
;
4748 -moz-user-select: none
;
4749 -ms-user-select: none
;
4755 position: absolute
!important
;
4757 pointer-events: none
;
4762 transform: translate3d
(0px, 0px, 0) scale
(0);
4763 transition-duration: 1400ms;
4764 background-color: var
(--f7-touch-ripple-color
);
4765 will-change: transform
, opacity
;
4767 .ripple-wave.ripple-wave-fill {
4768 transition-duration: 300ms;
4771 .ripple-wave.ripple-wave-out {
4772 transition-duration: 600ms;
4775 .button-fill
.ripple-wave
,
4776 .picker-calendar-day
.ripple-wave
,
4777 .menu .ripple-wave {
4780 .checkbox
.ripple-wave
,
4781 .radio
.ripple-wave
,
4782 .data-table .sortable-cell .ripple-wave {
4785 [class
*="ripple-color-"] {
4786 --f7-touch-ripple-color: var
(--f7-theme-color-ripple-color
);
4790 display: inline-block
;
4791 vertical-align: middle
;
4792 background-size: 100% auto
;
4793 background-position: center
;
4794 background-repeat: no-repeat
;
4800 .icon-forward:after
,
4802 font-family: 'framework7-core-icons';
4803 font-weight: normal
;
4806 letter-spacing: normal
;
4807 text-transform: none
;
4808 white-space: nowrap
;
4811 -webkit-font-smoothing: antialiased
;
4812 text-rendering: optimizeLegibility
;
4813 -moz-osx-font-smoothing: grayscale
;
4814 -moz-font-feature-settings: "liga";
4815 font-feature-settings: "liga";
4822 .icon[class*="color-"] {
4823 color: var
(--f7-theme-color
);
4833 .ios
.icon-back:after
,
4834 .ios
.icon-prev:after
,
4835 .ios
.icon-forward:after
,
4836 .ios .icon-next:after {
4837 line-height: inherit
;
4839 .ios
.icon-prev:after
,
4840 .ios .icon-next:after {
4843 .ios .item-media .icon {
4846 .ios .item-media .f7-icons {
4851 .ios
.icon-back:after
,
4852 .ios .icon-prev:after {
4853 content: 'chevron_left_ios';
4855 .ios
.icon-forward:after
,
4856 .ios .icon-next:after {
4857 content: 'chevron_right_ios';
4866 .md
.icon-back:after
,
4867 .md
.icon-forward:after
,
4868 .md
.icon-next:after
,
4869 .md .icon-prev:after {
4872 .md .item-media .icon {
4875 .md .item-media .material-icons {
4880 .md .icon-back:after {
4881 content: 'arrow_left_md';
4883 .md .icon-forward:after {
4884 content: 'arrow_right_md';
4886 .md .icon-next:after {
4887 content: 'chevron_right_md';
4889 .md .icon-prev:after {
4890 content: 'chevron_left_md';
4893 .aurora .material-icons {
4898 .aurora
.icon-forward
,
4899 .aurora .icon-next {
4904 .aurora
.icon-back:after
,
4905 .aurora
.icon-prev:after
,
4906 .aurora
.icon-forward:after
,
4907 .aurora .icon-next:after {
4908 line-height: inherit
;
4910 .aurora .item-media .icon {
4913 .aurora .item-media .f7-icons {
4918 .aurora
.icon-back:after
,
4919 .aurora .icon-prev:after {
4920 content: 'chevron_left_aurora';
4922 .aurora
.icon-forward:after
,
4923 .aurora .icon-next:after {
4924 content: 'chevron_right_aurora';
4926 .custom-modal-backdrop {
4929 .custom-modal-backdrop
,
4934 .preloader-backdrop
,
4941 background: rgba
(0, 0, 0, 0.4);
4945 transition-duration: 400ms;
4947 .custom-modal-backdrop
.not-animated
,
4948 .actions-backdrop
.not-animated
,
4949 .dialog-backdrop
.not-animated
,
4950 .popover-backdrop
.not-animated
,
4951 .popup-backdrop
.not-animated
,
4952 .preloader-backdrop
.not-animated
,
4953 .sheet-backdrop.not-animated {
4954 transition-duration: 0ms;
4956 .custom-modal-backdrop
.backdrop-in
,
4957 .actions-backdrop
.backdrop-in
,
4958 .dialog-backdrop
.backdrop-in
,
4959 .popover-backdrop
.backdrop-in
,
4960 .popup-backdrop
.backdrop-in
,
4961 .preloader-backdrop
.backdrop-in
,
4962 .sheet-backdrop.backdrop-in {
4963 visibility: visible
;
4966 /* === Appbar === */
4969 --f7-appbar-offset: var(--f7-appbar-height);
4970 --f7-appbar-extra-offset: 0px;
4971 --f7-appbar-bg-color: var(--f7-bars-bg-color);
4972 --f7-appbar-bg-image: var(--f7-bars-bg-image);
4973 --f7-appbar-border-color: var(--f7-bars-border-color);
4974 --f7-appbar-link-color: var(--f7-bars-link-color);
4975 --f7-appbar-text-color: var(--f7-bars-text-color);
4977 --f7-appbar-shadow-image: none
;
4980 --f7-appbar-height: 44px;
4981 --f7-appbar-inner-padding-left: 8px;
4982 --f7-appbar-inner-padding-right: 8px;
4985 --f7-appbar-height: 48px;
4986 --f7-appbar-inner-padding-left: 16px;
4987 --f7-appbar-inner-padding-right: 16px;
4990 --f7-appbar-height: 38px;
4991 --f7-appbar-inner-padding-left: 15px;
4992 --f7-appbar-inner-padding-right: 15px;
5000 -webkit-backface-visibility: hidden
;
5001 backface-visibility: hidden
;
5002 box-sizing: border-box
;
5004 transform: translate3d
(0, 0, 0);
5005 height: var
(--f7-appbar-height
);
5006 background-image: var
(--f7-appbar-bg-image
, var
(--f7-bars-bg-image
));
5007 background-color: var
(--f7-appbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
5008 color: var
(--f7-appbar-text-color
, var
(--f7-bars-text-color
));
5009 font-size: var
(--f7-appbar-font-size
);
5012 .appbar .panel ~ .appbar {
5016 color: var
(--f7-appbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
5020 justify-content: flex-start
;
5021 line-height: var
(--f7-appbar-link-line-height
, var
(--f7-appbar-height
));
5022 height: var
(--f7-appbar-link-height
, var
(--f7-appbar-height
));
5028 align-items: center
;
5030 .appbar
.no-hairline:after
,
5031 .appbar.no-border:after {
5032 display: none
!important
;
5034 .appbar
.no-hairline
.title-large:after
,
5035 .appbar.no-border .title-large:after {
5036 display: none
!important
;
5038 .appbar.no-shadow:before {
5039 display: none
!important
;
5043 -webkit-backface-visibility: hidden
;
5044 backface-visibility: hidden
;
5049 background-color: var
(--f7-appbar-border-color
, var
(--f7-bars-border-color
));
5058 transform-origin: 50% 100%;
5059 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
5069 pointer-events: none
;
5070 background: var
(--f7-appbar-shadow-image
);
5076 --f7-appbar-app-offset: calc
(var
(--f7-appbar-height
) + var
(--f7-appbar-extra-offset
, 0px));
5083 height: var
(--f7-appbar-height
);
5085 align-items: center
;
5086 justify-content: space-between
;
5087 box-sizing: border-box
;
5088 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
));
5090 .appbar-inner.stacked {
5093 /* === Dialog === */
5095 --f7-dialog-button-text-color: var
(--f7-theme-color
);
5096 --f7-dialog-button-text-align: center
;
5097 --f7-dialog-input-bg-color: #fff;
5100 --f7-dialog-bg-color: rgba
(255, 255, 255, 0.95);
5101 --f7-dialog-box-shadow: none
;
5102 --f7-dialog-width: 270px;
5103 --f7-dialog-inner-padding: 15px;
5104 --f7-dialog-border-radius: 13px;
5105 --f7-dialog-text-color: #000;
5106 --f7-dialog-text-align: center
;
5107 --f7-dialog-font-size: 14px;
5108 --f7-dialog-title-text-color: inherit
;
5109 --f7-dialog-title-font-size: 18px;
5110 --f7-dialog-title-font-weight: 600;
5111 --f7-dialog-title-line-height: inherit
;
5112 --f7-dialog-button-font-size: 17px;
5113 --f7-dialog-button-height: 44px;
5114 --f7-dialog-button-letter-spacing: 0;
5115 --f7-dialog-button-font-weight: 400;
5116 --f7-dialog-button-text-transform: none
;
5117 --f7-dialog-button-pressed-bg-color: rgba
(230, 230, 230, 0.95);
5118 --f7-dialog-input-border-radius: 4px;
5119 --f7-dialog-input-font-size: 14px;
5120 --f7-dialog-input-height: 32px;
5121 --f7-dialog-input-border-color: rgba
(0, 0, 0, 0.3);
5122 --f7-dialog-input-border-width: 1px;
5123 --f7-dialog-input-placeholder-color: #a9a9a9;
5124 --f7-dialog-preloader-size: 34px;
5127 --f7-dialog-bg-color: #fff;
5128 --f7-dialog-box-shadow: var
(--f7-elevation-24
);
5129 --f7-dialog-width: 280px;
5130 --f7-dialog-inner-padding: 24px;
5131 --f7-dialog-border-radius: 4px;
5132 --f7-dialog-text-color: #757575;
5133 --f7-dialog-text-align: left
;
5134 --f7-dialog-font-size: 16px;
5135 --f7-dialog-title-text-color: #212121;
5136 --f7-dialog-title-font-size: 20px;
5137 --f7-dialog-title-font-weight: 500;
5138 --f7-dialog-title-line-height: 1.3;
5139 --f7-dialog-button-font-size: 14px;
5140 --f7-dialog-button-height: 36px;
5141 --f7-dialog-button-letter-spacing: 0.03em;
5142 --f7-dialog-button-font-weight: 500;
5143 --f7-dialog-button-text-transform: uppercase
;
5144 --f7-dialog-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
5145 --f7-dialog-input-border-radius: 0px;
5146 --f7-dialog-input-font-size: 16px;
5147 --f7-dialog-input-height: 36px;
5148 --f7-dialog-input-border-color: transparent
;
5149 --f7-dialog-input-border-width: 0px;
5150 --f7-dialog-input-placeholder-color: rgba
(0, 0, 0, 0.35);
5151 --f7-dialog-preloader-size: 32px;
5154 --f7-dialog-bg-color: #fff;
5155 --f7-dialog-box-shadow: 0 0 20px 0 rgba
(0, 0, 0, 0.15), 0 25px 30px 0 rgba
(0,0,0,0.35);
5156 --f7-dialog-width: 300px;
5157 --f7-dialog-inner-padding: 20px;
5158 --f7-dialog-border-radius: 4px;
5159 --f7-dialog-text-color: #000;
5160 --f7-dialog-text-align: left
;
5161 --f7-dialog-font-size: 14px;
5162 --f7-dialog-title-text-color: inherit
;
5163 --f7-dialog-title-font-size: 14px;
5164 --f7-dialog-title-font-weight: 700;
5165 --f7-dialog-title-line-height: inherit
;
5166 --f7-dialog-button-text-color: #fff;
5167 --f7-dialog-button-font-size: 13px;
5168 --f7-dialog-button-height: 28px;
5169 --f7-dialog-button-letter-spacing: 0;
5170 --f7-dialog-button-font-weight: 500;
5171 --f7-dialog-button-text-transform: none
;
5173 --f7-dialog-button-pressed-bg-color: var(--f7-theme-color-shade);
5175 --f7-dialog-input-border-radius: 4px;
5176 --f7-dialog-input-font-size: 13px;
5177 --f7-dialog-input-height: 24px;
5178 --f7-dialog-input-border-color: rgba
(0, 0, 0, 0.12);
5179 --f7-dialog-input-border-width: 1px;
5180 --f7-dialog-input-placeholder-color: rgba
(0, 0, 0, 0.32);
5181 --f7-dialog-preloader-size: 24px;
5191 transform: translate3d
(0, -50%, 0) scale
(1.185);
5192 transition-property: transform
, opacity
;
5194 transition-duration: 400ms;
5195 box-shadow: var
(--f7-dialog-box-shadow
);
5196 width: var
(--f7-dialog-width
);
5197 margin-left: calc
(-1 * var
(--f7-dialog-width
) / 2);
5198 border-radius: var
(--f7-dialog-border-radius
);
5199 text-align: var
(--f7-dialog-text-align
);
5200 color: var
(--f7-dialog-text-color
);
5201 font-size: var
(--f7-dialog-font-size
);
5202 will-change: transform
, opacity
;
5206 transform: translate3d
(0, -50%, 0) scale
(1);
5212 .dialog.not-animated {
5213 transition-duration: 0ms;
5217 padding: var
(--f7-dialog-inner-padding
);
5220 color: var
(--f7-dialog-title-text-color
);
5221 font-size: var
(--f7-dialog-title-font-size
);
5222 font-weight: var
(--f7-dialog-title-font-weight
);
5223 line-height: var
(--f7-dialog-title-line-height
);
5229 .dialog-buttons-vertical .dialog-buttons {
5231 height: auto
!important
;
5234 box-sizing: border-box
;
5237 white-space: nowrap
;
5238 text-overflow: ellipsis
;
5239 color: var
(--f7-dialog-button-text-color
);
5240 font-size: var
(--f7-dialog-button-font-size
);
5241 height: var
(--f7-dialog-button-height
);
5242 line-height: var
(--f7-dialog-button-height
);
5243 letter-spacing: var
(--f7-dialog-button-letter-spacing
);
5244 text-align: var
(--f7-dialog-button-text-align
);
5245 font-weight: var
(--f7-dialog-button-font-weight
);
5246 text-transform: var
(--f7-dialog-button-text-transform
);
5250 .dialog-no-buttons .dialog-buttons {
5253 .dialog-input-field {
5256 input
.dialog-input
[type
] {
5257 box-sizing: border-box
;
5260 border-radius: var
(--f7-dialog-input-border-radius
);
5261 -webkit-appearance: none
;
5262 -moz-appearance: none
;
5266 font-family: inherit
;
5268 font-size: var
(--f7-dialog-input-font-size
);
5269 height: var
(--f7-dialog-input-height
);
5270 background-color: var
(--f7-dialog-input-bg-color
);
5271 border: var
(--f7-dialog-input-border-width
) solid var
(--f7-dialog-input-border-color
);
5273 input
.dialog-input
[type
]::-webkit-input-placeholder
{
5274 color: var
(--f7-dialog-input-placeholder-color
);
5276 input
.dialog-input
[type
]::-moz-placeholder
{
5277 color: var
(--f7-dialog-input-placeholder-color
);
5279 input
.dialog-input
[type
]::-ms-input-placeholder
{
5280 color: var
(--f7-dialog-input-placeholder-color
);
5282 input
.dialog-input
[type
]::placeholder
{
5283 color: var
(--f7-dialog-input-placeholder-color
);
5285 .dialog-input-double input.dialog-input {
5286 border-radius: var
(--f7-dialog-input-border-radius
) var
(--f7-dialog-input-border-radius
) 0 0;
5288 .dialog-input-double + .dialog-input-double input.dialog-input {
5289 border-radius: 0 0 var
(--f7-dialog-input-border-radius
) var
(--f7-dialog-input-border-radius
);
5291 .dialog-preloader .preloader {
5292 --f7-preloader-size: var
(--f7-dialog-preloader-size
);
5294 html
.with-modal-dialog
.page-content
{
5296 -webkit-overflow-scrolling: auto
;
5298 .ios .dialog.modal-out {
5299 transform: translate3d
(0, -50%, 0) scale
(1);
5301 .ios .dialog-inner {
5302 border-radius: var
(--f7-dialog-border-radius
) var
(--f7-dialog-border-radius
) 0 0;
5303 background: var
(--f7-dialog-bg-color
);
5305 .ios .dialog-inner:after {
5308 background-color: rgba
(0, 0, 0, 0.2);
5317 transform-origin: 50% 100%;
5318 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
5320 .ios .dialog-title + .dialog-text {
5323 .ios .dialog-buttons {
5325 justify-content: center
;
5327 .ios .dialog-button {
5330 -webkit-box-flex: 1;
5332 background: var
(--f7-dialog-bg-color
);
5334 .ios .dialog-button:after {
5337 background-color: rgba
(0, 0, 0, 0.2);
5346 transform-origin: 100% 50%;
5347 transform: scaleX
(calc
(1 / var
(--f7-device-pixel-ratio
)));
5349 .ios .dialog-button.active-state {
5350 background-color: var
(--f7-dialog-button-pressed-bg-color
);
5352 .ios .dialog-button:first-child {
5353 border-radius: 0 0 0 var
(--f7-dialog-border-radius
);
5355 .ios .dialog-button:last-child {
5356 border-radius: 0 0 var
(--f7-dialog-border-radius
) 0;
5358 .ios .dialog-button:last-child:after {
5359 display: none
!important
;
5361 .ios .dialog-button:first-child:last-child {
5362 border-radius: 0 0 var
(--f7-dialog-border-radius
) var
(--f7-dialog-border-radius
);
5364 .ios .dialog-button.dialog-button-bold {
5367 .ios .dialog-button[class*="color-"] {
5368 --f7-dialog-button-text-color: var
(--f7-theme-color
);
5370 .ios .dialog-buttons-vertical .dialog-buttons {
5373 .ios .dialog-buttons-vertical .dialog-button {
5376 .ios .dialog-buttons-vertical .dialog-button:after {
5379 background-color: rgba
(0, 0, 0, 0.2);
5388 transform-origin: 50% 100%;
5389 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
5391 .ios .dialog-buttons-vertical .dialog-button:last-child {
5392 border-radius: 0 0 var
(--f7-dialog-border-radius
) var
(--f7-dialog-border-radius
);
5394 .ios .dialog-buttons-vertical .dialog-button:last-child:after {
5395 display: none
!important
;
5397 .ios .dialog-no-buttons .dialog-inner {
5398 border-radius: var
(--f7-dialog-border-radius
);
5400 .ios .dialog-no-buttons .dialog-inner:after {
5401 display: none
!important
;
5403 .ios .dialog-input-field {
5406 .ios .dialog-input {
5409 .ios .dialog-input + .dialog-input {
5412 .ios .dialog-input-double + .dialog-input-double {
5415 .ios .dialog-input-double + .dialog-input-double .dialog-input {
5419 .ios
.dialog-preloader
.dialog-title
~ .preloader
,
5420 .ios .dialog-preloader .dialog-text ~ .preloader {
5423 .ios
.dialog-progress
.dialog-title
~ .progressbar
,
5424 .ios
.dialog-progress
.dialog-text
~ .progressbar
,
5425 .ios
.dialog-progress
.dialog-title
~ .progressbar-infinite
,
5426 .ios .dialog-progress .dialog-text ~ .progressbar-infinite {
5430 background: var
(--f7-dialog-bg-color
);
5432 .md .dialog.modal-out {
5433 transform: translate3d
(0, -50%, 0) scale
(0.815);
5435 .md .dialog-title + .dialog-text {
5441 .md .dialog-buttons {
5445 box-sizing: border-box
;
5446 justify-content: flex-end
;
5448 .md .dialog-button {
5453 transition-duration: 300ms;
5454 transform: translate3d
(0, 0, 0);
5456 .md .dialog-button.active-state {
5457 background-color: var
(--f7-dialog-button-pressed-bg-color
);
5459 .md .dialog-button.dialog-button-bold {
5462 .md .dialog-button + .dialog-button {
5465 .md .dialog-button[class*="color-"] {
5466 --f7-dialog-button-text-color: var
(--f7-theme-color
);
5468 .md .dialog-buttons-vertical .dialog-buttons {
5471 .md .dialog-buttons-vertical .dialog-button {
5478 padding-right: 16px;
5482 transition-duration: 200ms;
5485 .md .dialog-input + .dialog-input {
5488 .md
.dialog-preloader
.dialog-title
,
5489 .md
.dialog-progress
.dialog-title
,
5490 .md
.dialog-preloader
.dialog-inner
,
5491 .md .dialog-progress .dialog-inner {
5494 .md
.dialog-preloader
.dialog-title
~ .preloader
,
5495 .md .dialog-preloader .dialog-text ~ .preloader {
5498 .md
.dialog-progress
.dialog-title
~ .progressbar
,
5499 .md
.dialog-progress
.dialog-text
~ .progressbar
,
5500 .md
.dialog-progress
.dialog-title
~ .progressbar-infinite
,
5501 .md .dialog-progress .dialog-text ~ .progressbar-infinite {
5505 background: var
(--f7-dialog-bg-color
);
5507 .aurora .dialog.modal-out {
5508 transform: translate3d
(0, -50%, 0) scale
(0.815);
5510 .aurora .dialog-title + .dialog-text {
5513 .aurora .dialog-text {
5516 .aurora .dialog-buttons {
5517 padding: var
(--f7-dialog-inner-padding
);
5520 box-sizing: border-box
;
5521 justify-content: flex-end
;
5523 .aurora .dialog-button {
5528 transition-duration: 300ms;
5529 transform: translate3d
(0, 0, 0);
5530 background: var
(--f7-theme-color
);
5532 .aurora .dialog-button.active-state {
5533 background-color: var
(--f7-dialog-button-pressed-bg-color
, var
(--f7-theme-color-shade
));
5535 .aurora .dialog-button.dialog-button-bold {
5538 .aurora .dialog-button + .dialog-button {
5541 .aurora .dialog-buttons-vertical .dialog-buttons {
5543 flex-direction: column
;
5544 align-items: flex-end
;
5546 .aurora .dialog-buttons-vertical .dialog-button {
5550 .aurora .dialog-buttons-vertical .dialog-button + .dialog-button {
5553 .aurora .dialog-input-field {
5556 .aurora .dialog-input-field input.dialog-input {
5559 .aurora .dialog-input {
5561 transition-duration: 200ms;
5564 .aurora .dialog-input + .dialog-input {
5567 .aurora .dialog-input-double + .dialog-input-double {
5570 .aurora .dialog-input-double + .dialog-input-double .dialog-input {
5574 .aurora
.dialog-preloader
.dialog-title
,
5575 .aurora
.dialog-progress
.dialog-title
,
5576 .aurora
.dialog-preloader
.dialog-inner
,
5577 .aurora .dialog-progress .dialog-inner {
5580 .aurora
.dialog-preloader
.dialog-title
~ .preloader
,
5581 .aurora .dialog-preloader .dialog-text ~ .preloader {
5584 .aurora
.dialog-progress
.dialog-title
~ .progressbar
,
5585 .aurora
.dialog-progress
.dialog-text
~ .progressbar
,
5586 .aurora
.dialog-progress
.dialog-title
~ .progressbar-infinite
,
5587 .aurora .dialog-progress .dialog-text ~ .progressbar-infinite {
5592 --f7-popup-border-radius: 0px;
5593 --f7-popup-tablet-width: 630px;
5594 --f7-popup-tablet-height: 630px;
5596 --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
5600 --f7-popup-box-shadow: none
;
5603 --f7-popup-box-shadow: 0px 20px 44px rgba
(0, 0, 0, 0.5);
5606 --f7-popup-tablet-border-radius: 4px;
5607 --f7-popup-box-shadow: 0px 20px 44px rgba
(0, 0, 0, 0.5);
5615 top: var
(--f7-statusbar-height
);
5617 height: calc
(100% - var
(--f7-statusbar-height
));
5619 box-sizing: border-box
;
5620 transition-property: transform
;
5621 transform: translate3d
(0, 100%, 0);
5624 will-change: transform
;
5626 border-radius: var
(--f7-popup-border-radius
);
5630 transition-duration: 400ms;
5632 .popup.not-animated {
5633 transition-duration: 0ms;
5637 transform: translate3d
(0, 0, 0);
5640 transform: translate3d
(0, 100%, 0);
5642 .popup.swipe-close-to-top.modal-out {
5643 transform: translate3d
(0, -100%, 0);
5645 @media (min-width: 630px) and
(min-height: 630px) {
5646 .popup:not(.popup-tablet-fullscreen) {
5647 width: var
(--f7-popup-tablet-width
);
5648 height: var
(--f7-popup-tablet-height
);
5651 margin-left: calc
(-1 * var
(--f7-popup-tablet-width
) / 2);
5652 margin-top: calc
(-1 * var
(--f7-popup-tablet-height
) / 2);
5653 transform: translate3d
(0, 100vh, 0);
5654 box-shadow: var
(--f7-popup-box-shadow
);
5655 border-radius: var
(--f7-popup-tablet-border-radius
, var
(--f7-popup-border-radius
));
5657 .popup:not(.popup-tablet-fullscreen).modal-in {
5658 transform: translate3d
(0, 0, 0);
5660 .popup:not(.popup-tablet-fullscreen).modal-out {
5661 transform: translate3d
(0, 100vh, 0);
5663 .popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out {
5664 transform: translate3d
(0, -100vh, 0);
5667 @media (max-width: 629px), (max-height: 629px) {
5672 html
.with-modal-popup
.framework7-root
> .views
.page-content
,
5673 html
.with-modal-popup
.framework7-root
> .view
.page-content
,
5674 html
.with-modal-popup
.framework7-root
> .panel
.page-content
{
5676 -webkit-overflow-scrolling: auto
;
5678 /* === Login Screen === */
5680 --f7-login-screen-bg-color: #fff;
5681 --f7-login-screen-content-bg-color: #fff;
5682 --f7-login-screen-blocks-max-width: 480px;
5684 --f7-login-screen-list-button-text-color: var(--f7-theme-color);
5686 --f7-login-screen-title-text-align: center
;
5687 --f7-login-screen-title-text-color: inherit
;
5688 --f7-login-screen-title-letter-spacing: 0;
5692 --f7-login-screen-bg-color: #171717;
5693 --f7-login-screen-content-bg-color: transparent
;
5696 --f7-login-screen-blocks-margin-vertical: 25px;
5697 --f7-login-screen-title-font-size: 30px;
5698 --f7-login-screen-title-font-weight: normal
;
5701 --f7-login-screen-blocks-margin-vertical: 24px;
5702 --f7-login-screen-title-font-size: 34px;
5703 --f7-login-screen-title-font-weight: normal
;
5706 --f7-login-screen-blocks-margin-vertical: 15px;
5707 --f7-login-screen-title-font-size: 28px;
5708 --f7-login-screen-title-font-weight: 500;
5713 top: var
(--f7-statusbar-height
);
5715 height: calc
(100% - var
(--f7-statusbar-height
));
5717 box-sizing: border-box
;
5718 transition-property: transform
;
5719 transform: translate3d
(0, 100%, 0);
5720 background: var
(--f7-login-screen-bg-color
);
5722 will-change: transform
;
5724 .login-screen
.modal-in
,
5725 .login-screen.modal-out {
5726 transition-duration: 400ms;
5728 .login-screen.not-animated {
5729 transition-duration: 0ms;
5731 .login-screen.modal-in {
5733 transform: translate3d
(0, 0, 0);
5735 .login-screen.modal-out {
5736 transform: translate3d
(0, 100%, 0);
5738 .login-screen-content {
5739 background: var
(--f7-login-screen-content-bg-color
);
5741 .login-screen-content .list-button {
5743 color: var
(--f7-login-screen-list-button-text-color
, var
(--f7-theme-color
));
5745 .login-screen-content
.login-screen-title
,
5746 .login-screen-content
.list
,
5747 .login-screen-content .block {
5748 margin: var
(--f7-login-screen-blocks-margin-vertical
) auto
;
5750 .login-screen-content
.login-screen-title
,
5751 .login-screen-content
.list
,
5752 .login-screen-content
.block
,
5753 .login-screen-content
.block-footer
,
5754 .login-screen-content .block-header {
5755 max-width: var
(--f7-login-screen-blocks-max-width
);
5757 .login-screen-content .list ul {
5760 .login-screen-content .list ul:before {
5761 display: none
!important
;
5763 .login-screen-content .list ul:after {
5764 display: none
!important
;
5766 .login-screen-content
.block-footer
,
5767 .login-screen-content .block-header {
5772 .login-screen-title {
5773 text-align: var
(--f7-login-screen-title-text-align
);
5774 font-size: var
(--f7-login-screen-title-font-size
);
5775 font-weight: var
(--f7-login-screen-title-font-weight
);
5776 color: var
(--f7-login-screen-title-text-color
);
5777 letter-spacing: var
(--f7-login-screen-title-letter-spacing
);
5779 .theme-dark
.login-screen-content
.list ul
,
5780 .theme-dark .login-screen-content .block-strong {
5781 background-color: transparent
;
5783 /* === Popover === */
5785 --f7-popover-width: 260px;
5788 --f7-popover-bg-color: rgba
(255, 255, 255, 0.95);
5789 --f7-popover-border-radius: 13px;
5790 --f7-popover-box-shadow: none
;
5791 --f7-popover-actions-icon-size: 28px;
5792 --f7-popover-actions-label-text-color: #8a8a8a;
5796 --f7-popover-bg-color: rgba
(30, 30, 30, 0.95);
5799 --f7-popover-bg-color: #fff;
5800 --f7-popover-border-radius: 4px;
5801 --f7-popover-box-shadow: var
(--f7-elevation-8
);
5802 --f7-popover-actions-icon-size: 24px;
5803 --f7-popover-actions-label-text-color: rgba
(0, 0, 0, 0.54);
5807 --f7-popover-bg-color: #202020;
5808 --f7-popover-actions-label-text-color: rgba
(255, 255, 255, 0.54);
5811 --f7-popover-width: 200px;
5812 --f7-popover-bg-color: #fff;
5813 --f7-popover-border-radius: 4px;
5814 --f7-popover-box-shadow: 0 0 3px 0 rgba
(0, 0, 0, 0.1), 0 5px 11px 0 rgba
(0,0,0,0.28);
5815 --f7-popover-actions-icon-size: 24px;
5816 --f7-popover-actions-label-text-color: rgba
(0, 0, 0, 0.6);
5818 .aurora
.theme-dark
,
5819 .aurora.theme-dark {
5820 --f7-popover-bg-color: #202020;
5821 --f7-popover-actions-label-text-color: rgba
(255, 255, 255, 0.6);
5824 width: var
(--f7-popover-width
);
5832 transition-duration: 300ms;
5833 background-color: var
(--f7-popover-bg-color
);
5834 border-radius: var
(--f7-popover-border-radius
);
5835 box-shadow: var
(--f7-popover-box-shadow
);
5836 will-change: transform
, opacity
;
5844 .popover .list:first-child ul:before {
5845 display: none
!important
;
5847 .popover .list:last-child ul:after {
5848 display: none
!important
;
5850 .popover .list:first-child ul {
5851 border-radius: var
(--f7-popover-border-radius
) var
(--f7-popover-border-radius
) 0 0;
5853 .popover
.list:first-child
li:first-child
,
5854 .popover
.list:first-child
li:first-child a
,
5855 .popover .list:first-child li:first-child > label {
5856 border-radius: var
(--f7-popover-border-radius
) var
(--f7-popover-border-radius
) 0 0;
5858 .popover .list:last-child ul {
5859 border-radius: 0 0 var
(--f7-popover-border-radius
) var
(--f7-popover-border-radius
);
5861 .popover
.list:last-child
li:last-child
,
5862 .popover
.list:last-child
li:last-child a
,
5863 .popover .list:last-child li:last-child > label {
5864 border-radius: 0 0 var
(--f7-popover-border-radius
) var
(--f7-popover-border-radius
);
5866 .popover
.list:first-child:last-child
li:first-child:last-child
,
5867 .popover
.list:first-child:last-child
li:first-child:last-child a
,
5868 .popover
.list:first-child:last-child
li:first-child:last-child
> label
,
5869 .popover .list:first-child:last-child ul {
5870 border-radius: var
(--f7-popover-border-radius
);
5872 .popover .list + .list {
5873 margin-top: var
(--f7-list-margin-vertical
);
5878 .popover.not-animated {
5879 transition-duration: 0ms;
5882 will-change: scroll-position
;
5884 -webkit-overflow-scrolling: touch
;
5886 .popover-from-actions .item-link i.icon {
5887 width: var
(--f7-popover-actions-icon-size
);
5888 height: var
(--f7-popover-actions-icon-size
);
5889 font-size: var
(--f7-popover-actions-icon-size
);
5891 .popover-from-actions-bold {
5894 .popover-from-actions-label {
5898 align-items: center
;
5899 padding: var
(--f7-actions-label-padding
);
5900 color: var
(--f7-popover-actions-label-text-color
);
5901 font-size: var
(--f7-actions-label-font-size
);
5902 justify-content: var
(--f7-actions-label-justify-content
);
5904 .popover-from-actions-label:after {
5907 background-color: var
(--f7-list-item-border-color
);
5916 transform-origin: 50% 100%;
5917 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
5919 .popover-from-actions-label:last-child:after {
5920 display: none
!important
;
5924 transition-property: opacity
;
5926 .ios .popover-angle {
5935 .ios .popover-angle:after {
5937 background: var
(--f7-popover-bg-color
);
5944 transform: rotate
(45deg);
5946 .ios .popover-angle.on-left {
5949 .ios .popover-angle.on-left:after {
5953 .ios .popover-angle.on-right {
5956 .ios .popover-angle.on-right:after {
5960 .ios .popover-angle.on-top {
5964 .ios .popover-angle.on-top:after {
5968 .ios .popover-angle.on-bottom {
5972 .ios .popover-angle.on-bottom:after {
5977 transform: scale
(0.85, 0.6);
5978 transition-property: opacity
, transform
;
5980 .md .popover.modal-in {
5982 transform: scale
(1);
5984 .md .popover.modal-out {
5986 transform: scale
(1);
5988 .md .popover-on-top {
5989 transform-origin: center bottom
;
5991 .md .popover-on-top.popover-on-right {
5992 transform-origin: left bottom
;
5994 .md .popover-on-top.popover-on-left {
5995 transform-origin: right bottom
;
5997 .md .popover-on-middle {
5998 transform-origin: center center
;
6000 .md .popover-on-middle.popover-on-right {
6001 transform-origin: left center
;
6003 .md .popover-on-middle.popover-on-left {
6004 transform-origin: right center
;
6006 .md .popover-on-bottom {
6007 transform-origin: center top
;
6009 .md .popover-on-bottom.popover-on-right {
6010 transform-origin: left top
;
6012 .md .popover-on-bottom.popover-on-left {
6013 transform-origin: right top
;
6017 transition-property: opacity
;
6019 .aurora .popover-angle {
6028 .aurora .popover-angle:after {
6030 background: var
(--f7-popover-bg-color
);
6037 transform: rotate
(45deg);
6039 .aurora .popover-angle.on-left {
6042 .aurora .popover-angle.on-left:after {
6046 .aurora .popover-angle.on-right {
6049 .aurora .popover-angle.on-right:after {
6053 .aurora .popover-angle.on-top {
6057 .aurora .popover-angle.on-top:after {
6061 .aurora .popover-angle.on-bottom {
6065 .aurora .popover-angle.on-bottom:after {
6069 /* === Actions === */
6071 --f7-actions-grid-button-font-size: 12px;
6072 --f7-actions-grid-button-text-color: #757575;
6075 --f7-actions-bg-color: rgba
(255, 255, 255, 0.95);
6076 --f7-actions-border-radius: 13px;
6077 --f7-actions-button-border-color: rgba
(0, 0, 0, 0.2);
6079 --f7-actions-button-text-color: var(--f7-theme-color);
6081 --f7-actions-button-pressed-bg-color: rgba
(230, 230, 230, 0.9);
6082 --f7-actions-button-padding: 0px;
6083 --f7-actions-button-text-align: center
;
6084 --f7-actions-button-height: 57px;
6085 --f7-actions-button-height-landscape: 44px;
6086 --f7-actions-button-font-size: 20px;
6087 --f7-actions-button-icon-size: 28px;
6088 --f7-actions-button-justify-content: center
;
6089 --f7-actions-label-padding: 8px 10px;
6090 --f7-actions-label-text-color: #8a8a8a;
6091 --f7-actions-label-font-size: 13px;
6092 --f7-actions-label-justify-content: center
;
6093 --f7-actions-group-border-color: transparent
;
6094 --f7-actions-group-margin: 8px;
6095 --f7-actions-grid-button-icon-size: 48px;
6098 --f7-actions-bg-color: #fff;
6099 --f7-actions-border-radius: 0px;
6100 --f7-actions-button-border-color: transparent
;
6101 --f7-actions-button-text-color: rgba
(0, 0, 0, 0.87);
6102 --f7-actions-button-pressed-bg-color: #e5e5e5;
6103 --f7-actions-button-padding: 0 16px;
6104 --f7-actions-button-text-align: left
;
6105 --f7-actions-button-height: 48px;
6106 --f7-actions-button-height-landscape: 48px;
6107 --f7-actions-button-font-size: 16px;
6108 --f7-actions-button-icon-size: 24px;
6109 --f7-actions-button-justify-content: space-between
;
6110 --f7-actions-label-padding: 12px 16px;
6111 --f7-actions-label-text-color: rgba
(0, 0, 0, 0.54);
6112 --f7-actions-label-font-size: 16px;
6113 --f7-actions-label-justify-content: flex-start
;
6114 --f7-actions-group-border-color: #d2d2d6;
6115 --f7-actions-group-margin: 0px;
6116 --f7-actions-grid-button-icon-size: 48px;
6119 --f7-actions-bg-color: #fff;
6120 --f7-actions-border-radius: 4px;
6121 --f7-actions-button-border-color: rgba
(0, 0, 0, 0.12);
6123 --f7-actions-button-text-color: var(--f7-theme-color);
6125 --f7-actions-button-pressed-bg-color: #e5e5e5;
6126 --f7-actions-button-padding: 0 15px;
6127 --f7-actions-button-text-align: center
;
6128 --f7-actions-button-height: 32px;
6129 --f7-actions-button-height-landscape: 32px;
6130 --f7-actions-button-font-size: 14px;
6131 --f7-actions-button-icon-size: 18px;
6132 --f7-actions-button-justify-content: space-between
;
6133 --f7-actions-label-padding: 10px 15px;
6134 --f7-actions-label-text-color: rgba
(0, 0, 0, 0.5);
6135 --f7-actions-label-font-size: 12px;
6136 --f7-actions-label-justify-content: center
;
6137 --f7-actions-group-border-color: rgba
(0, 0, 0, 0.1);
6138 --f7-actions-group-margin: 15px;
6139 --f7-actions-grid-button-icon-size: 32px;
6147 transform: translate3d
(0, 100%, 0);
6150 will-change: scroll-position
;
6152 -webkit-overflow-scrolling: touch
;
6153 transition-property: transform
;
6154 will-change: transform
;
6156 .actions-modal
.modal-in
,
6157 .actions-modal.modal-out {
6158 transition-duration: 300ms;
6160 .actions-modal.not-animated {
6161 transition-duration: 0ms;
6163 .actions-modal.modal-in {
6164 transform: translate3d
(0, calc
(-1 * var
(--f7-safe-area-bottom
)), 0);
6166 .actions-modal.modal-out {
6168 transform: translate3d
(0, 100%, 0);
6170 @media (min-width: 496px) {
6174 margin-left: -240px;
6177 @media (orientation: landscape
) {
6179 --f7-actions-button-height: var
(--f7-actions-button-height-landscape
);
6185 margin: var
(--f7-actions-group-margin
);
6186 border-radius: var
(--f7-actions-border-radius
);
6187 transform: translate3d
(0, 0, 0);
6189 .actions-group:after {
6192 background-color: var
(--f7-actions-group-border-color
);
6201 transform-origin: 50% 100%;
6202 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
6204 .actions-group:last-child:after {
6205 display: none
!important
;
6210 font-weight: normal
;
6212 box-sizing: border-box
;
6216 text-align: var
(--f7-actions-button-text-align
);
6217 background: var
(--f7-actions-bg-color
);
6219 .actions-button:after
,
6220 .actions-label:after {
6223 background-color: var
(--f7-actions-button-border-color
);
6232 transform-origin: 50% 100%;
6233 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
6235 .actions-button:first-child
,
6236 .actions-label:first-child {
6237 border-radius: var
(--f7-actions-border-radius
) var
(--f7-actions-border-radius
) 0 0;
6239 .actions-button:last-child
,
6240 .actions-label:last-child {
6241 border-radius: 0 0 var
(--f7-actions-border-radius
) var
(--f7-actions-border-radius
);
6243 .actions-button:last-child:after
,
6244 .actions-label:last-child:after {
6245 display: none
!important
;
6247 .actions-button:first-child:last-child
,
6248 .actions-label:first-child:last-child {
6249 border-radius: var
(--f7-actions-border-radius
);
6253 text-decoration: none
;
6259 .actions-button
.actions-button-bold
,
6260 .actions-label.actions-button-bold {
6266 color: var
(--f7-actions-button-text-color
, var
(--f7-theme-color
));
6267 font-size: var
(--f7-actions-button-font-size
);
6268 height: var
(--f7-actions-button-height
);
6269 line-height: var
(--f7-actions-button-height
);
6270 padding: var
(--f7-actions-button-padding
);
6271 justify-content: var
(--f7-actions-button-justify-content
);
6274 .actions-button.active-state {
6275 background-color: var
(--f7-actions-button-pressed-bg-color
) !important
;
6277 .actions-button[class*="color-"] {
6278 color: var
(--f7-theme-color
);
6280 .actions-button-media {
6283 align-items: center
;
6285 .actions-button-media i.icon {
6286 width: var
(--f7-actions-button-icon-size
);
6287 height: var
(--f7-actions-button-icon-size
);
6288 font-size: var
(--f7-actions-button-icon-size
);
6291 .actions-button-text {
6294 white-space: nowrap
;
6295 text-overflow: ellipsis
;
6297 .actions-button-text {
6300 text-align: var
(--f7-actions-button-text-align
);
6305 align-items: center
;
6306 font-size: var
(--f7-actions-label-font-size
);
6307 color: var
(--f7-actions-label-text-color
);
6308 padding: var
(--f7-actions-label-padding
);
6309 justify-content: var
(--f7-actions-label-justify-content
);
6310 min-height: var
(--f7-actions-label-min-height
, var
(--f7-actions-button-height
));
6312 .actions-label[class*=" color-"] {
6313 --f7-actions-label-text-color: var
(--f7-theme-color
);
6315 .actions-grid .actions-group {
6318 justify-content: flex-start
;
6320 background: var
(--f7-actions-bg-color
);
6323 .actions-grid .actions-group:first-child {
6324 border-radius: var
(--f7-actions-border-radius
) var
(--f7-actions-border-radius
) 0 0;
6326 .actions-grid .actions-group:last-child {
6327 border-radius: 0 0 var
(--f7-actions-border-radius
) var
(--f7-actions-border-radius
);
6329 .actions-grid .actions-group:first-child:last-child {
6330 border-radius: var
(--f7-actions-border-radius
);
6332 .actions-grid .actions-group:not(:last-child) {
6335 .actions-grid
.actions-button
,
6336 .actions-grid .actions-label {
6337 border-radius: 0 !important
;
6340 .actions-grid .actions-button {
6341 width: 33.33333333%;
6343 color: var
(--f7-actions-grid-button-text-color
);
6348 .actions-grid .actions-button:after {
6349 display: none
!important
;
6351 .actions-grid .actions-button-media {
6352 margin-left: auto
!important
;
6353 margin-right: auto
!important
;
6354 width: var
(--f7-actions-grid-button-icon-size
);
6355 height: var
(--f7-actions-grid-button-icon-size
);
6357 .actions-grid .actions-button-media i.icon {
6358 width: var
(--f7-actions-grid-button-icon-size
);
6359 height: var
(--f7-actions-grid-button-icon-size
);
6360 font-size: var
(--f7-actions-grid-button-icon-size
);
6362 .actions-grid .actions-button-text {
6363 margin-left: 0 !important
;
6364 text-align: center
!important
;
6366 line-height: 1.33em;
6368 font-size: var
(--f7-actions-grid-button-font-size
);
6370 .ios .actions-button-media {
6373 .ios .actions-button-media + .actions-button-text {
6377 .md .actions-button {
6378 transition-duration: 300ms;
6380 .md .actions-button-media {
6383 .md .actions-button-media + .actions-button-text {
6386 .aurora .actions-button-media {
6389 .aurora .actions-button-media + .actions-button-text {
6393 /* === Sheet Modal === */
6395 --f7-sheet-height: 260px;
6398 --f7-sheet-bg-color: #cfd5da;
6399 --f7-sheet-border-color: #929499;
6403 --f7-sheet-bg-color: #171717;
6404 --f7-sheet-border-color: var
(--f7-bars-border-color
);
6407 --f7-sheet-bg-color: #fff;
6408 --f7-sheet-border-color: transparent
;
6412 --f7-sheet-bg-color: #202020;
6413 --f7-sheet-border-color: transparent
;
6416 --f7-sheet-bg-color: #fff;
6417 --f7-sheet-border-color: transparent
;
6419 .aurora
.theme-dark
,
6420 .aurora.theme-dark {
6421 --f7-sheet-bg-color: #202020;
6422 --f7-sheet-border-color: transparent
;
6432 height: var
(--f7-sheet-height
);
6434 box-sizing: border-box
;
6435 transition-property: transform
;
6436 transform: translate3d
(0, 100%, 0);
6437 background: var
(--f7-sheet-bg-color
);
6439 will-change: transform
;
6441 .sheet-modal
.modal-in
,
6442 .sheet-modal.modal-out {
6443 transition-duration: 300ms;
6445 .sheet-modal.not-animated {
6446 transition-duration: 0ms;
6448 .sheet-modal.modal-in {
6450 transform: translate3d
(0, 0, 0);
6452 .sheet-modal.modal-in-swipe-step {
6454 transform: translate3d
(0, var
(--f7-sheet-swipe-step
, 0), 0);
6456 .sheet-modal.modal-out {
6457 transform: translate3d
(0, 100%, 0);
6459 .sheet-modal .sheet-modal-inner {
6464 .sheet-modal .toolbar {
6468 .sheet-modal
.toolbar:after
,
6469 .sheet-modal .toolbar:before {
6472 .sheet-modal .toolbar ~ * .page-content {
6476 .sheet-modal .toolbar + .sheet-modal-inner {
6477 height: calc
(100% - var
(--f7-toolbar-height
));
6479 .sheet-modal .toolbar ~ .sheet-modal-inner .page-content {
6483 .sheet-modal-top:after {
6486 background-color: var
(--f7-sheet-border-color
);
6495 transform-origin: 50% 100%;
6496 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
6498 .sheet-modal-top:after {
6500 -webkit-backface-visibility: hidden
;
6501 backface-visibility: hidden
;
6502 transform-style: preserve-3d
;
6504 .sheet-modal-bottom:before
,
6505 .sheet-modal:not(.sheet-modal-top):before {
6508 background-color: var
(--f7-sheet-border-color
);
6517 transform-origin: 50% 0%;
6518 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
6520 .sheet-modal-bottom:before
,
6521 .sheet-modal:not(.sheet-modal-top):before {
6523 -webkit-backface-visibility: hidden
;
6524 backface-visibility: hidden
;
6525 transform-style: preserve-3d
;
6527 .sheet-modal-bottom
.toolbar
~ .sheet-modal-inner
.page-content
,
6528 .sheet-modal:not
(.sheet-modal-top
) .toolbar
~ .sheet-modal-inner
.page-content
,
6529 .sheet-modal-bottom
.sheet-modal-inner
> .page-content
,
6530 .sheet-modal:not(.sheet-modal-top) .sheet-modal-inner > .page-content {
6531 padding-bottom: var
(--f7-safe-area-bottom
);
6535 top: var
(--f7-statusbar-height
);
6536 transform: translate3d
(0, calc
(-100% - var
(--f7-statusbar-height
)), 0);
6538 .sheet-modal-top.modal-out {
6539 transform: translate3d
(0, calc
(-100% - var
(--f7-statusbar-height
)), 0);
6541 .sheet-modal-top .toolbar-bottom {
6544 .sheet-modal-top .toolbar-top ~ .sheet-modal-inner .page-content {
6547 .md .sheet-modal .toolbar a.link:not(.tab-link) {
6552 --f7-toast-text-color: #fff;
6553 --f7-toast-font-size: 14px;
6554 --f7-toast-icon-size: 48px;
6557 --f7-toast-bg-color: rgba
(0, 0, 0, 0.75);
6558 --f7-toast-translucent-bg-color-ios: rgba
(0, 0, 0, 0.75);
6559 --f7-toast-padding-horizontal: 15px;
6560 --f7-toast-padding-vertical: 12px;
6561 --f7-toast-border-radius: 8px;
6562 --f7-toast-button-min-width: 64px;
6565 --f7-toast-bg-color: #323232;
6566 --f7-toast-padding-horizontal: 24px;
6567 --f7-toast-padding-vertical: 14px;
6568 --f7-toast-border-radius: 4px;
6569 --f7-toast-button-min-width: 64px;
6572 --f7-toast-bg-color: rgba
(0, 0, 0, 0.85);
6573 --f7-toast-padding-horizontal: 10px;
6574 --f7-toast-padding-vertical: 10px;
6575 --f7-toast-border-radius: 4px;
6576 --f7-toast-button-min-width: 32px;
6579 transition-property: transform
, opacity
;
6583 color: var
(--f7-toast-text-color
);
6584 font-size: var
(--f7-toast-font-size
);
6585 box-sizing: border-box
;
6586 background-color: var
(--f7-toast-bg-color
);
6588 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
6593 .toast .toast-content {
6595 justify-content: space-between
;
6596 align-items: center
;
6597 box-sizing: border-box
;
6598 padding: var
(--f7-toast-padding-vertical
) var
(--f7-toast-padding-horizontal
);
6600 .toast .toast-text {
6605 .toast .toast-button {
6607 min-width: var
(--f7-toast-button-min-width
);
6609 margin-bottom: -8px;
6611 .toast.toast-with-icon .toast-content {
6615 .toast.toast-with-icon .toast-text {
6618 .toast
.toast-with-icon
.toast-icon
.f7-icons
,
6619 .toast.toast-with-icon .toast-icon .material-icons {
6620 font-size: var
(--f7-toast-icon-size
);
6621 width: var
(--f7-toast-icon-size
);
6622 height: var
(--f7-toast-icon-size
);
6624 .toast.toast-center {
6628 margin-top: var
(--f7-statusbar-height
);
6631 transition-duration: 300ms;
6635 @supports ((-webkit-backdrop-filter: blur
(10px)) or
(backdrop-filter: blur
(10px))) {
6637 background: var
(--f7-toast-translucent-bg-color-ios
);
6638 -webkit-backdrop-filter: blur
(10px);
6639 backdrop-filter: blur
(10px);
6642 .ios .toast.toast-top {
6644 transform: translate3d
(0, -100%, 0);
6646 .ios .toast.toast-top.modal-in {
6647 transform: translate3d
(0, 0%, 0);
6649 .ios .toast.toast-center {
6652 border-radius: var
(--f7-toast-border-radius
);
6653 transform: translate3d
(-50%, -50%, 0);
6655 .ios .toast.toast-center.modal-in {
6656 transform: translate3d
(-50%, -50%, 0);
6658 .ios .toast.toast-bottom {
6660 transform: translate3d
(0, 100%, 0);
6662 .ios .toast.toast-bottom.modal-in {
6663 transform: translate3d
(0, 0%, 0);
6665 @media (max-width: 568px) {
6666 .ios .toast.toast-bottom .toast-content {
6667 padding-bottom: calc
(var
(--f7-toast-padding-vertical
) + var
(--f7-safe-area-bottom
));
6670 @media (min-width: 569px) {
6673 margin-left: -284px;
6674 border-radius: var
(--f7-toast-border-radius
);
6676 .ios .toast.toast-top {
6679 .ios .toast.toast-center {
6682 .ios .toast.toast-bottom {
6683 margin-bottom: calc
(15px + var
(--f7-safe-area-bottom
));
6686 @media (min-width: 1024px) {
6691 .ios
.toast
.toast-bottom
,
6692 .ios .toast.toast-top {
6696 .ios .toast-button {
6698 margin-right: calc
(-1 * var
(--f7-button-padding-horizontal
));
6701 transition-duration: 200ms;
6702 border-radius: var
(--f7-toast-border-radius
);
6704 width: calc
(100% - 16px);
6705 transform: scale
(0.9);
6707 .md .toast.modal-in {
6708 transform: scale
(1);
6710 .md .toast.modal-out {
6711 transform: scale
(1);
6713 .md .toast.toast-top {
6716 .md .toast.toast-center {
6719 transform: scale
(0.9) translate3d
(-55%, -55%, 0);
6721 .md .toast.toast-center.modal-in {
6722 transform: scale
(1) translate3d
(-50%, -50%, 0);
6724 .md .toast.toast-center.modal-out {
6725 transform: scale
(1) translate3d
(-50%, -50%, 0);
6727 .md .toast.toast-bottom {
6728 bottom: calc
(8px + var
(--f7-safe-area-bottom
));
6730 @media (min-width: 584px) {
6733 margin-left: -284px;
6735 .md .toast.toast-center {
6739 @media (min-width: 1024px) {
6744 .md
.toast
.toast-bottom
,
6745 .md .toast.toast-top {
6748 .md .toast.toast-bottom {
6749 bottom: calc
(24px + var
(--f7-safe-area-bottom
));
6751 .md .toast.toast-top {
6760 transition-duration: 200ms;
6761 border-radius: var
(--f7-toast-border-radius
);
6763 width: calc
(100% - 20px);
6764 transform: scale
(0.9);
6766 .aurora .toast.modal-in {
6767 transform: scale
(1);
6769 .aurora .toast.modal-out {
6770 transform: scale
(1);
6772 .aurora .toast.toast-top {
6775 .aurora .toast.toast-center {
6778 transform: scale
(0.9) translate3d
(-55%, -55%, 0);
6780 .aurora .toast.toast-center.modal-in {
6781 transform: scale
(1) translate3d
(-50%, -50%, 0);
6783 .aurora .toast.toast-center.modal-out {
6784 transform: scale
(1) translate3d
(-50%, -50%, 0);
6786 .aurora .toast.toast-bottom {
6787 bottom: calc
(10px + var
(--f7-safe-area-bottom
));
6789 @media (min-width: 584px) {
6792 margin-left: -284px;
6794 .aurora .toast.toast-center {
6798 @media (min-width: 1024px) {
6803 .aurora
.toast
.toast-bottom
,
6804 .aurora .toast.toast-top {
6808 .aurora .toast-button {
6811 /* === Preloader === */
6813 --f7-preloader-modal-padding: 8px;
6814 --f7-preloader-modal-bg-color: rgba
(0, 0, 0, 0.8);
6817 --f7-preloader-color: #6c6c6c;
6818 --f7-preloader-size: 20px;
6819 --f7-preloader-modal-preloader-size: 34px;
6820 --f7-preloader-modal-border-radius: 5px;
6823 --f7-preloader-color: #757575;
6824 --f7-preloader-size: 32px;
6825 --f7-preloader-modal-preloader-size: 32px;
6826 --f7-preloader-modal-border-radius: 4px;
6829 --f7-preloader-color: #757575;
6830 --f7-preloader-size: 24px;
6831 --f7-preloader-modal-preloader-size: 24px;
6832 --f7-preloader-modal-border-radius: 4px;
6835 display: inline-block
;
6836 vertical-align: middle
;
6837 width: var
(--f7-preloader-size
);
6838 height: var
(--f7-preloader-size
);
6842 /* === Preloader Modal === */
6843 .preloader-backdrop {
6844 visibility: visible
;
6853 padding: var
(--f7-preloader-modal-padding
);
6854 background: var
(--f7-preloader-modal-bg-color
);
6856 transform: translateX
(-50%) translateY
(-50%);
6857 border-radius: var
(--f7-preloader-modal-border-radius
);
6859 .preloader-modal .preloader {
6860 --f7-preloader-size: var
(--f7-preloader-modal-preloader-size
);
6861 display: block
!important
;
6863 html
.with-modal-preloader
.page-content
{
6865 -webkit-overflow-scrolling: auto
;
6867 .preloader[class*="color-"] {
6868 --f7-preloader-color: var
(--f7-theme-color
);
6871 animation: ios-preloader-spin
1s steps
(12, end
) infinite
;
6873 .ios .preloader .preloader-inner-line {
6877 border-radius: 100px;
6878 background: var
(--f7-preloader-color
);
6882 transform-origin: center
200%;
6884 .ios .preloader .preloader-inner-line:nth-child(1) {
6885 transform: translate
(-50%, -200%) rotate
(0deg);
6888 .ios .preloader .preloader-inner-line:nth-child(2) {
6889 transform: translate
(-50%, -200%) rotate
(30deg);
6890 opacity: 0.32272727;
6892 .ios .preloader .preloader-inner-line:nth-child(3) {
6893 transform: translate
(-50%, -200%) rotate
(60deg);
6894 opacity: 0.37545455;
6896 .ios .preloader .preloader-inner-line:nth-child(4) {
6897 transform: translate
(-50%, -200%) rotate
(90deg);
6898 opacity: 0.42818182;
6900 .ios .preloader .preloader-inner-line:nth-child(5) {
6901 transform: translate
(-50%, -200%) rotate
(120deg);
6902 opacity: 0.48090909;
6904 .ios .preloader .preloader-inner-line:nth-child(6) {
6905 transform: translate
(-50%, -200%) rotate
(150deg);
6906 opacity: 0.53363636;
6908 .ios .preloader .preloader-inner-line:nth-child(7) {
6909 transform: translate
(-50%, -200%) rotate
(180deg);
6910 opacity: 0.58636364;
6912 .ios .preloader .preloader-inner-line:nth-child(8) {
6913 transform: translate
(-50%, -200%) rotate
(210deg);
6914 opacity: 0.63909091;
6916 .ios .preloader .preloader-inner-line:nth-child(9) {
6917 transform: translate
(-50%, -200%) rotate
(240deg);
6918 opacity: 0.69181818;
6920 .ios .preloader .preloader-inner-line:nth-child(10) {
6921 transform: translate
(-50%, -200%) rotate
(270deg);
6922 opacity: 0.74454545;
6924 .ios .preloader .preloader-inner-line:nth-child(11) {
6925 transform: translate
(-50%, -200%) rotate
(300deg);
6926 opacity: 0.79727273;
6928 .ios .preloader .preloader-inner-line:nth-child(12) {
6929 transform: translate
(-50%, -200%) rotate
(330deg);
6932 @keyframes ios-preloader-spin
{
6934 transform: rotate
(360deg);
6938 animation: md-preloader-outer
3300ms linear infinite
;
6940 @keyframes md-preloader-outer
{
6942 transform: rotate
(0);
6945 transform: rotate
(360deg);
6948 .md .preloader-inner {
6953 animation: md-preloader-inner-rotate
5.25s cubic-bezier
(0.35, 0, 0.25, 1) infinite
;
6955 .md .preloader-inner .preloader-inner-gap {
6962 box-sizing: border-box
;
6963 border-top: 4px solid var
(--f7-preloader-color
);
6965 .md
.preloader-inner
.preloader-inner-left
,
6966 .md .preloader-inner .preloader-inner-right {
6973 .md .preloader-inner .preloader-inner-half-circle {
6978 box-sizing: border-box
;
6979 border: 4px solid var
(--f7-preloader-color
);
6980 border-bottom-color: transparent
!important
;
6982 animation-iteration-count: infinite
;
6983 animation-duration: 1.3125s;
6984 animation-timing-function: cubic-bezier
(0.35, 0, 0.25, 1);
6986 .md .preloader-inner .preloader-inner-left {
6989 .md .preloader-inner .preloader-inner-left .preloader-inner-half-circle {
6991 border-right-color: transparent
!important
;
6992 animation-name: md-preloader-left-rotate
;
6994 .md .preloader-inner .preloader-inner-right {
6997 .md .preloader-inner .preloader-inner-right .preloader-inner-half-circle {
6999 border-left-color: transparent
!important
;
7000 animation-name: md-preloader-right-rotate
;
7002 .md .preloader.color-multi .preloader-inner-left .preloader-inner-half-circle {
7003 animation-name: md-preloader-left-rotate-multicolor
;
7005 .md .preloader.color-multi .preloader-inner-right .preloader-inner-half-circle {
7006 animation-name: md-preloader-right-rotate-multicolor
;
7008 @keyframes md-preloader-left-rotate
{
7011 transform: rotate
(130deg);
7014 transform: rotate
(-5deg);
7017 @keyframes md-preloader-right-rotate
{
7020 transform: rotate
(-130deg);
7023 transform: rotate
(5deg);
7026 @keyframes md-preloader-inner-rotate
{
7028 transform: rotate
(135deg);
7031 transform: rotate
(270deg);
7034 transform: rotate
(405deg);
7037 transform: rotate
(540deg);
7040 transform: rotate
(675deg);
7043 transform: rotate
(810deg);
7046 transform: rotate
(945deg);
7049 transform: rotate
(1080deg);
7052 @keyframes md-preloader-left-rotate-multicolor
{
7055 border-left-color: #4285F4;
7056 transform: rotate
(130deg);
7059 border-left-color: #1B9A59;
7060 border-top-color: #1B9A59;
7063 border-left-color: #F7C223;
7064 border-top-color: #F7C223;
7065 transform: rotate
(-5deg);
7068 border-left-color: #DE3E35;
7069 border-top-color: #DE3E35;
7072 @keyframes md-preloader-right-rotate-multicolor
{
7075 border-right-color: #4285F4;
7076 transform: rotate
(-130deg);
7079 border-right-color: #1B9A59;
7080 border-top-color: #1B9A59;
7083 border-right-color: #F7C223;
7084 border-top-color: #F7C223;
7085 transform: rotate
(5deg);
7088 border-top-color: #DE3E35;
7089 border-right-color: #DE3E35;
7092 .aurora .preloader-inner {
7099 .aurora .preloader-inner-circle {
7106 border: calc
(var
(--f7-preloader-size
) / 8) solid var
(--f7-preloader-color
);
7107 border-top-color: transparent
;
7108 box-sizing: border-box
;
7109 animation: aurora-preloader-rotate
1s linear infinite
;
7111 .aurora .preloader.color-multi .preloader-inner-circle {
7112 animation: aurora-preloader-rotate
1s linear infinite
, aurora-preloader-multicolor
2s linear infinite
;
7114 @keyframes aurora-preloader-rotate
{
7116 transform: rotate
(0deg);
7119 transform: rotate
(360deg);
7122 @keyframes aurora-preloader-multicolor
{
7125 border-color: #2196f3;
7126 border-top-color: transparent
;
7129 border-color: #ff3b30;
7130 border-top-color: transparent
;
7133 border-color: #4cd964;
7134 border-top-color: transparent
;
7137 border-color: #ff9500;
7138 border-top-color: transparent
;
7141 /* === Progressbar === */
7144 --f7-progressbar-progress-color: var(--f7-theme-color);
7148 --f7-progressbar-bg-color: #b6b6b6;
7149 --f7-progressbar-height: 2px;
7150 --f7-progressbar-border-radius: 2px;
7154 --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
7156 --f7-progressbar-height: 4px;
7157 --f7-progressbar-border-radius: 0px;
7160 --f7-progressbar-bg-color: #dbdbdb;
7161 --f7-progressbar-height: 6px;
7162 --f7-progressbar-border-radius: 3px;
7164 .aurora
.theme-dark
,
7165 .aurora.theme-dark {
7166 --f7-progressbar-bg-color: #444;
7169 .progressbar-infinite {
7174 transform-style: preserve-3d
;
7175 background: var
(--f7-progressbar-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.5));
7176 transform-origin: center top
;
7177 height: var
(--f7-progressbar-height
);
7178 border-radius: var
(--f7-progressbar-border-radius
);
7181 vertical-align: middle
;
7184 background-color: var
(--f7-progressbar-progress-color
, var
(--f7-theme-color
));
7190 transform: translate3d
(-100%, 0, 0);
7191 transition-duration: 150ms;
7193 .progressbar-infinite {
7196 .progressbar-infinite:before
,
7197 .progressbar-infinite:after {
7204 transform-origin: left center
;
7205 transform: translate3d
(0, 0, 0);
7207 background-color: var
(--f7-progressbar-progress-color
, var
(--f7-theme-color
));
7209 .progressbar-infinite.color-multi {
7210 background: none
!important
;
7213 animation: progressbar-in
150ms forwards
;
7216 animation: progressbar-out
150ms forwards
;
7218 body
> .progressbar
,
7219 .view
> .progressbar
,
7220 .views
> .progressbar
,
7221 .page
> .progressbar
,
7222 .panel
> .progressbar
,
7223 .popup
> .progressbar
,
7224 .framework7-root
> .progressbar
,
7225 body
> .progressbar-infinite
,
7226 .view
> .progressbar-infinite
,
7227 .views
> .progressbar-infinite
,
7228 .page
> .progressbar-infinite
,
7229 .panel
> .progressbar-infinite
,
7230 .popup
> .progressbar-infinite
,
7231 .framework7-root > .progressbar-infinite {
7236 border-radius: 0 !important
;
7237 transform-origin: center top
!important
;
7239 body
> .progressbar
,
7240 .framework7-root
> .progressbar
,
7241 body
> .progressbar-infinite
,
7242 .framework7-root > .progressbar-infinite {
7243 top: var
(--f7-statusbar-height
);
7245 @keyframes progressbar-in
{
7248 transform: scaleY
(0);
7252 transform: scaleY
(1);
7255 @keyframes progressbar-out
{
7258 transform: scaleY
(1);
7262 transform: scaleY
(0);
7265 .ios .progressbar-infinite:before {
7266 animation: ios-progressbar-infinite
1s linear infinite
;
7268 .ios .progressbar-infinite:after {
7271 .ios .progressbar-infinite.color-multi:before {
7273 background-image: linear-gradient
(to right
, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
7274 background-size: 25% 100%;
7275 background-repeat: repeat-x
;
7276 animation: ios-progressbar-infinite-multicolor
3s linear infinite
;
7278 @keyframes ios-progressbar-infinite
{
7280 transform: translate3d
(-100%, 0, 0);
7283 transform: translate3d
(100%, 0, 0);
7286 @keyframes ios-progressbar-infinite-multicolor
{
7288 transform: translate3d
(0%, 0, 0);
7291 transform: translate3d
(-50%, 0, 0);
7294 .md .progressbar-infinite:before {
7295 animation: md-progressbar-infinite-1
2s linear infinite
;
7297 .md .progressbar-infinite:after {
7298 animation: md-progressbar-infinite-2
2s linear infinite
;
7300 .md .progressbar-infinite.color-multi:before {
7302 animation: md-progressbar-infinite-multicolor-bg
3s step-end infinite
;
7304 .md .progressbar-infinite.color-multi:after {
7306 animation: md-progressbar-infinite-multicolor-fill
3s linear infinite
;
7307 transform-origin: center center
;
7309 @keyframes md-progressbar-infinite-1
{
7311 transform: translateX
(-10%) scaleX
(0.1);
7314 transform: translateX
(30%) scaleX
(0.6);
7317 transform: translateX
(100%) scaleX
(1);
7320 transform: translateX
(100%) scaleX
(1);
7323 @keyframes md-progressbar-infinite-2
{
7325 transform: translateX
(-100%) scaleX
(1);
7328 transform: translateX
(-100%) scaleX
(1);
7331 transform: translateX
(60%) scaleX
(0.35);
7334 transform: translateX
(100%) scaleX
(0.1);
7337 transform: translateX
(100%) scaleX
(0.1);
7340 @keyframes md-progressbar-infinite-multicolor-bg
{
7342 background-color: #4caf50;
7345 background-color: #f44336;
7348 background-color: #2196f3;
7351 background-color: #ffeb3b;
7354 @keyframes md-progressbar-infinite-multicolor-fill
{
7356 transform: scaleX
(0);
7357 background-color: #f44336;
7360 transform: scaleX
(1);
7361 background-color: #f44336;
7364 transform: scaleX
(0);
7365 background-color: #2196f3;
7368 transform: scaleX
(1);
7369 background-color: #2196f3;
7372 transform: scaleX
(0);
7373 background-color: #ffeb3b;
7376 transform: scaleX
(1);
7377 background-color: #ffeb3b;
7380 transform: scaleX
(0);
7381 background-color: #4caf50;
7384 transform: scaleX
(1);
7385 background-color: #4caf50;
7388 .aurora
.progressbar
,
7389 .aurora
.progressbar-infinite
,
7390 .aurora
.progressbar span
,
7391 .aurora .progressbar-infinite:before {
7392 box-shadow: 0px 0px 0px 1px rgba
(0, 0, 0, 0.05) inset
;
7394 .aurora .progressbar-infinite:before {
7395 animation: aurora-progressbar-infinite
1s linear infinite
;
7397 .aurora .progressbar-infinite:after {
7400 .aurora .progressbar-infinite.color-multi:before {
7402 background-image: linear-gradient
(to right
, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
7403 background-size: 25% 100%;
7404 background-repeat: repeat-x
;
7405 animation: aurora-progressbar-infinite-multicolor
3s linear infinite
;
7407 @keyframes aurora-progressbar-infinite
{
7409 transform: translate3d
(-100%, 0, 0);
7412 transform: translate3d
(100%, 0, 0);
7415 @keyframes aurora-progressbar-infinite-multicolor
{
7417 transform: translate3d
(0%, 0, 0);
7420 transform: translate3d
(-50%, 0, 0);
7423 /* === Sortable === */
7425 --f7-sortable-handler-color: #c7c7cc;
7426 --f7-sortable-sorting-item-bg-color: rgba
(255, 255, 255, 0.8);
7430 --f7-sortable-sorting-item-bg-color: rgba
(50, 50, 50, 0.8);
7433 --f7-sortable-handler-width: 35px;
7434 --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba
(0, 0, 0, 0.6);
7437 --f7-sortable-handler-width: 42px;
7438 --f7-sortable-sorting-item-box-shadow: var
(--f7-elevation-2
);
7441 --f7-sortable-handler-width: 32px;
7442 --f7-sortable-sorting-item-box-shadow: var
(--f7-elevation-2
);
7444 .sortable .sortable-handler {
7445 width: var
(--f7-sortable-handler-width
);
7451 pointer-events: none
;
7453 transition-duration: 300ms;
7455 align-items: center
;
7456 justify-content: center
;
7458 right: var
(--f7-safe-area-right
);
7460 .sortable .sortable-handler:after {
7461 font-family: 'framework7-core-icons';
7462 font-weight: normal
;
7465 letter-spacing: normal
;
7466 text-transform: none
;
7467 white-space: nowrap
;
7470 -webkit-font-smoothing: antialiased
;
7471 text-rendering: optimizeLegibility
;
7472 -moz-osx-font-smoothing: grayscale
;
7473 -moz-font-feature-settings: "liga";
7474 font-feature-settings: "liga";
7480 transition-duration: 300ms;
7481 transform: translateX
(10px);
7482 color: var
(--f7-sortable-handler-color
);
7487 .sortable .item-inner {
7488 transition-duration: 300ms;
7490 .sortable li.sorting {
7492 background: var
(--f7-sortable-sorting-item-bg-color
);
7493 transition-duration: 0ms;
7494 box-shadow: var
(--f7-sortable-sorting-item-box-shadow
);
7496 .sortable li.sorting .item-inner:after {
7497 display: none
!important
;
7499 .sortable-sorting li {
7500 transition-duration: 300ms;
7502 .sortable-enabled .sortable-handler {
7503 pointer-events: auto
;
7506 .sortable-enabled .sortable-handler:after {
7507 transform: translateX
(0px);
7509 .sortable-enabled
.item-link
.item-inner
,
7510 .sortable-enabled .item-link .item-title-row {
7511 background-image: none
!important
;
7513 .list
.sortable-enabled
.item-inner
,
7514 .list
.sortable-enabled
.item-link
.item-inner
,
7515 .list
.sortable-enabled
.item-link
.no-chevron
.item-inner
,
7516 .list
.sortable-enabled
.no-chevron
.item-link
.item-inner
,
7517 .list
.sortable-enabled
.no-chevron
.item-link
.item-inner
,
7518 .no-chevron .list.sortable-enabled .item-link .item-inner {
7519 padding-right: calc
(var
(--f7-sortable-handler-width
) + var
(--f7-safe-area-right
));
7521 .ios .sortable-handler:after {
7522 content: 'sort_ios';
7524 .md .sortable-handler:after {
7527 .aurora .sortable-handler:after {
7532 /* === Swipeout === */
7534 --f7-swipeout-button-text-color: #fff;
7535 --f7-swipeout-button-bg-color: #c7c7cc;
7536 --f7-swipeout-delete-button-bg-color: #ff3b30;
7537 --f7-swipeout-button-font-size: inherit
;
7538 --f7-swipeout-button-font-weight: inherit
;
7541 --f7-swipeout-button-padding: 0 30px;
7544 --f7-swipeout-button-padding: 0 24px;
7547 --f7-swipeout-button-padding: 0 12px;
7548 --f7-swipeout-button-font-weight: 500;
7552 transform-style: preserve-3d
;
7554 .swipeout-deleting {
7555 transition-duration: 300ms;
7557 .swipeout-deleting .swipeout-content {
7558 transform: translateX
(-100%);
7560 .swipeout-transitioning
.swipeout-content
,
7561 .swipeout-transitioning
.swipeout-actions-right a
,
7562 .swipeout-transitioning
.swipeout-actions-left a
,
7563 .swipeout-transitioning .swipeout-overswipe {
7564 transition-duration: 300ms;
7565 transition-property: transform
, left
;
7571 .swipeout-overswipe {
7572 transition-duration: 200ms;
7573 transition-property: left
;
7575 .swipeout-actions-left
,
7576 .swipeout-actions-right {
7583 .swipeout-actions-left
> a
,
7584 .swipeout-actions-right
> a
,
7585 .swipeout-actions-left
> button
,
7586 .swipeout-actions-right
> button
,
7587 .swipeout-actions-left
> span
,
7588 .swipeout-actions-right
> span
,
7589 .swipeout-actions-left
> div
,
7590 .swipeout-actions-right > div {
7591 color: var
(--f7-swipeout-button-text-color
);
7592 background: var
(--f7-swipeout-button-bg-color
);
7593 padding: var
(--f7-swipeout-button-padding
);
7595 align-items: center
;
7598 font-size: var
(--f7-swipeout-button-font-size
);
7599 font-weight: var
(--f7-swipeout-button-font-weight
);
7601 .swipeout-actions-left
> a:after
,
7602 .swipeout-actions-right
> a:after
,
7603 .swipeout-actions-left
> button:after
,
7604 .swipeout-actions-right
> button:after
,
7605 .swipeout-actions-left
> span:after
,
7606 .swipeout-actions-right
> span:after
,
7607 .swipeout-actions-left
> div:after
,
7608 .swipeout-actions-right > div:after {
7614 background: inherit
;
7616 transform: translate3d
(0, 0, 0);
7617 pointer-events: none
;
7619 .swipeout-actions-left
.swipeout-delete
,
7620 .swipeout-actions-right .swipeout-delete {
7621 background: var
(--f7-swipeout-delete-button-bg-color
);
7623 .swipeout-actions-right {
7625 transform: translateX
(100%);
7627 .swipeout-actions-right
> a:after
,
7628 .swipeout-actions-right
> button:after
,
7629 .swipeout-actions-right
> span:after
,
7630 .swipeout-actions-right > div:after {
7634 .swipeout-actions-left {
7636 transform: translateX
(-100%);
7638 .swipeout-actions-left
> a:after
,
7639 .swipeout-actions-left
> button:after
,
7640 .swipeout-actions-left
> span:after
,
7641 .swipeout-actions-left > div:after {
7645 .swipeout-actions-left
[class
*="color-"],
7646 .swipeout-actions-right [class*="color-"] {
7647 --f7-swipeout-button-bg-color: var
(--f7-theme-color
);
7649 /* === Accordion === */
7650 .accordion-item-toggle {
7652 transition-duration: 300ms;
7654 .accordion-item-toggle.active-state {
7655 transition-duration: 300ms;
7657 .accordion-item-toggle.active-state > .item-inner:after {
7658 background-color: transparent
;
7660 .accordion-item-toggle .item-inner {
7661 transition-duration: 300ms;
7662 transition-property: background-color
;
7664 .accordion-item-toggle .item-inner:after {
7665 transition-duration: 300ms;
7667 .accordion-item .item-link .item-inner:after {
7668 transition-duration: 300ms;
7670 .accordion-item
.list
,
7671 .accordion-item .block {
7675 .accordion-item
.block
> h1:first-child
,
7676 .accordion-item
.block
> h2:first-child
,
7677 .accordion-item
.block
> h3:first-child
,
7678 .accordion-item
.block
> h4:first-child
,
7679 .accordion-item .block > p:first-child {
7682 .accordion-item
.block
> h1:last-child
,
7683 .accordion-item
.block
> h2:last-child
,
7684 .accordion-item
.block
> h3:last-child
,
7685 .accordion-item
.block
> h4:last-child
,
7686 .accordion-item .block > p:last-child {
7687 margin-bottom: 10px;
7689 .accordion-item-opened
.accordion-item-toggle
.item-inner:after
,
7690 .accordion-item-opened > .item-link .item-inner:after {
7691 background-color: transparent
;
7693 .list li.accordion-item ul {
7696 .accordion-item-content {
7701 transition-duration: 300ms;
7703 .accordion-item-opened > .accordion-item-content {
7706 html
.device-android-4
.accordion-item-content
{
7709 .list .accordion-item-toggle .item-inner {
7710 padding-right: calc
(var
(--f7-list-chevron-icon-area
) + var
(--f7-safe-area-right
));
7712 .list .accordion-item-toggle .item-inner:before {
7713 font-family: 'framework7-core-icons';
7714 font-weight: normal
;
7717 letter-spacing: normal
;
7718 text-transform: none
;
7719 white-space: nowrap
;
7722 -webkit-font-smoothing: antialiased
;
7723 text-rendering: optimizeLegibility
;
7724 -moz-osx-font-smoothing: grayscale
;
7725 -moz-font-feature-settings: "liga";
7726 font-feature-settings: "liga";
7738 color: var
(--f7-list-chevron-icon-color
);
7739 pointer-events: none
;
7740 right: calc
(var
(--f7-list-item-padding-horizontal
) + var
(--f7-safe-area-right
));
7741 content: 'chevron_right';
7743 .list .accordion-item-toggle.active-state {
7744 background-color: var
(--f7-list-link-pressed-bg-color
);
7746 .list
.accordion-item-toggle
.item-inner:before
,
7747 .list:not
(.media-list
) .accordion-item:not
(.media-item
) .accordion-item-toggle
.item-inner:before
,
7748 .list:not
(.media-list
) .accordion-item:not
(.media-item
) > .item-link
.item-inner:before
,
7749 .media-list
.accordion-item
.accordion-item-toggle
.item-title-row:before
,
7750 .media-list
.accordion-item
> .item-link
.item-title-row:before
,
7751 .accordion-item
.media-item
.accordion-item-toggle
.item-title-row:before
,
7752 .accordion-item
.media-item
> .item-link
.item-title-row:before
,
7753 .links-list .accordion-item > a:before {
7754 content: 'chevron_down';
7760 .list
.accordion-item-toggle
.accordion-item-opened
.item-inner:before
,
7761 .list:not
(.media-list
) .accordion-item-opened:not
(.media-item
) .accordion-item-toggle
.item-inner:before
,
7762 .list:not
(.media-list
) .accordion-item-opened:not
(.media-item
) > .item-link
.item-inner:before
,
7763 .media-list
.accordion-item-opened
.accordion-item-toggle
.item-title-row:before
,
7764 .media-list
.accordion-item-opened
> .item-link
.item-title-row:before
,
7765 .accordion-item-opened
.media-item
.accordion-item-toggle
.item-title-row:before
,
7766 .accordion-item-opened
.media-item
> .item-link
.item-title-row:before
,
7767 .links-list .accordion-item-opened > a:before {
7768 content: 'chevron_up';
7774 .aurora
.list
.accordion-item-toggle
.item-inner:before
,
7775 .aurora
.list:not
(.media-list
) .accordion-item:not
(.media-item
) .accordion-item-toggle
.item-inner:before
,
7776 .aurora
.list:not
(.media-list
) .accordion-item:not
(.media-item
) > .item-link
.item-inner:before
,
7777 .aurora
.media-list
.accordion-item
.accordion-item-toggle
.item-title-row:before
,
7778 .aurora
.media-list
.accordion-item
> .item-link
.item-title-row:before
,
7779 .aurora
.accordion-item
.media-item
.accordion-item-toggle
.item-title-row:before
,
7780 .aurora
.accordion-item
.media-item
> .item-link
.item-title-row:before
,
7781 .aurora .links-list .accordion-item > a:before {
7782 content: 'chevron_down_aurora';
7784 .aurora
.list
.accordion-item-toggle
.accordion-item-opened
.item-inner:before
,
7785 .aurora
.list:not
(.media-list
) .accordion-item-opened:not
(.media-item
) .accordion-item-toggle
.item-inner:before
,
7786 .aurora
.list:not
(.media-list
) .accordion-item-opened:not
(.media-item
) > .item-link
.item-inner:before
,
7787 .aurora
.media-list
.accordion-item-opened
.accordion-item-toggle
.item-title-row:before
,
7788 .aurora
.media-list
.accordion-item-opened
> .item-link
.item-title-row:before
,
7789 .aurora
.accordion-item-opened
.media-item
.accordion-item-toggle
.item-title-row:before
,
7790 .aurora
.accordion-item-opened
.media-item
> .item-link
.item-title-row:before
,
7791 .aurora .links-list .accordion-item-opened > a:before {
7792 content: 'chevron_up_aurora';
7794 /* === Contacts === */
7797 --f7-contacts-list-title-text-color: #fff;
7800 --f7-contacts-list-title-font-size: inherit
;
7801 --f7-contacts-list-title-font-weight: 600;
7802 --f7-contacts-list-title-text-color: #000;
7803 --f7-contacts-list-title-height: 22px;
7804 --f7-contacts-list-title-bg-color: #f7f7f7;
7808 --f7-contacts-list-title-bg-color: #232323;
7811 --f7-contacts-list-title-font-size: 20px;
7812 --f7-contacts-list-title-font-weight: 500;
7814 --f7-contacts-list-title-text-color: var(--f7-theme-color);
7816 --f7-contacts-list-title-height: 48px;
7817 --f7-contacts-list-title-bg-color: transparent
;
7820 --f7-contacts-list-title-font-weight: 600;
7821 --f7-contacts-list-title-text-color: #000;
7823 --f7-contacts-list-title-bg-color: var(--f7-list-group-title-bg-color);
7824 --f7-contacts-list-title-font-size: var(--f7-list-group-title-font-size);
7825 --f7-contacts-list-title-line-height: var(--f7-list-group-title-height);
7826 --f7-contacts-list-title-height: var(--f7-list-group-title-height);
7830 --f7-list-margin-vertical: 0px;
7832 .contacts-list
.list-group-title
,
7833 .contacts-list li.list-group-title {
7834 background-color: var
(--f7-contacts-list-title-bg-color
, var
(--f7-list-group-title-bg-color
));
7835 font-weight: var
(--f7-contacts-list-title-font-weight
, var
(--f7-list-group-title-font-weight
));
7836 font-size: var
(--f7-contacts-list-title-font-size
, var
(--f7-list-group-title-font-size
));
7837 color: var
(--f7-contacts-list-title-text-color
, var
(--f7-theme-color
));
7838 line-height: var
(--f7-contacts-list-title-height
, var
(--f7-list-group-title-height
));
7839 height: var
(--f7-contacts-list-title-height
, var
(--f7-list-group-title-height
));
7841 .contacts-list .list-group:first-child ul:before {
7842 display: none
!important
;
7844 .contacts-list .list-group:last-child ul:after {
7845 display: none
!important
;
7847 .md .contacts-list .list-group-title {
7848 pointer-events: none
;
7852 .md .contacts-list .list-group-title + li {
7853 margin-top: calc
(var
(--f7-contacts-list-title-height
) * -1);
7855 .md .contacts-list li:not(.list-group-title) {
7858 /* === Virtual List === */
7859 /* === Indexed List === */
7861 --f7-list-index-width: 16px;
7862 --f7-list-index-font-size: 11px;
7863 --f7-list-index-font-weight: 600;
7864 /* --f7-list-index-text-color: var(--f7-theme-color); */
7865 --f7-list-index-item-height: 14px;
7866 --f7-list-index-label-text-color: #fff;
7867 /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
7868 --f7-list-index-label-font-weight: 500;
7871 --f7-list-index-label-size: 44px;
7872 --f7-list-index-label-font-size: 17px;
7873 --f7-list-index-skip-dot-size: 6px;
7876 --f7-list-index-label-size: 56px;
7877 --f7-list-index-label-font-size: 20px;
7878 --f7-list-index-skip-dot-size: 4px;
7881 --f7-list-index-font-size: 12px;
7882 --f7-list-index-label-size: 32px;
7883 --f7-list-index-label-font-size: 12px;
7884 --f7-list-index-label-font-weight: 600;
7885 --f7-list-index-skip-dot-size: 4px;
7893 width: var
(--f7-list-index-width
);
7895 -webkit-user-select: none
;
7896 -moz-user-select: none
;
7897 -ms-user-select: none
;
7899 right: var
(--f7-safe-area-right
);
7901 .list-index:before {
7910 color: var
(--f7-list-index-text-color
, var
(--f7-theme-color
));
7911 font-size: var
(--f7-list-index-font-size
);
7912 font-weight: var
(--f7-list-index-font-weight
);
7917 flex-direction: column
;
7918 justify-content: center
;
7919 align-items: center
;
7930 height: var
(--f7-list-index-item-height
);
7931 line-height: var
(--f7-list-index-item-height
);
7936 .list-index .list-index-skip-placeholder:after {
7942 width: var
(--f7-list-index-skip-dot-size
);
7943 height: var
(--f7-list-index-skip-dot-size
);
7944 margin-left: calc
(-1 * var
(--f7-list-index-skip-dot-size
) / 2);
7945 margin-top: calc
(-1 * var
(--f7-list-index-skip-dot-size
) / 2);
7946 background: var
(--f7-list-index-text-color
, var
(--f7-theme-color
));
7948 .list-index .list-index-label {
7953 background-color: var
(--f7-list-index-label-bg-color
, var
(--f7-theme-color
));
7954 color: var
(--f7-list-index-label-text-color
);
7955 width: var
(--f7-list-index-label-size
);
7956 height: var
(--f7-list-index-label-size
);
7957 line-height: var
(--f7-list-index-label-size
);
7958 font-size: var
(--f7-list-index-label-font-size
);
7959 font-weight: var
(--f7-list-index-label-font-weight
);
7961 .navbar
~ .page
> .list-index
,
7962 .navbar ~ .list-index {
7963 top: var
(--f7-navbar-height
);
7965 .navbar
~ .toolbar-top
~ .list-index
,
7966 .ios
.navbar
~ .toolbar-top-ios
~ .list-index
,
7967 .md .navbar ~ .toolbar-top-md ~ .list-index {
7968 top: calc
(var
(--f7-navbar-height
) + var
(--f7-toolbar-height
));
7970 .navbar
~ .toolbar-top
.tabbar-labels
~ .list-index
,
7971 .ios
.navbar
~ .toolbar-top-ios
.tabbar-labels
~ .list-index
,
7972 .md .navbar ~ .toolbar-top-md.tabbar-labels ~ .list-index {
7973 top: calc
(var
(--f7-navbar-height
) + var
(--f7-tabbar-labels-height
));
7975 .navbar
~ .subnavbar
~ .list-index
,
7976 .page-with-subnavbar .navbar ~ .list-index {
7977 top: calc
(var
(--f7-navbar-height
) + var
(--f7-subnavbar-height
));
7979 .toolbar-bottom
~ .page
> .list-index
,
7980 .ios
.toolbar-bottom-ios
~ .page
> .list-index
,
7981 .md
.toolbar-bottom-md
~ .page
> .list-index
,
7982 .toolbar-bottom
~ * .page
> .list-index
,
7983 .ios
.toolbar-bottom-ios
~ * .page
> .list-index
,
7984 .md
.toolbar-bottom-md
~ * .page
> .list-index
,
7985 .toolbar-bottom
~ .list-index
,
7986 .ios
.toolbar-bottom-ios
~ .list-index
,
7987 .md .toolbar-bottom-md ~ .list-index {
7988 bottom: calc
(var
(--f7-toolbar-height
) + var
(--f7-safe-area-bottom
));
7990 .toolbar-bottom
.tabbar-labels
~ .page
> .list-index
,
7991 .ios
.toolbar-bottom-ios
.tabbar-labels
~ .page
> .list-index
,
7992 .md
.toolbar-bottom-md
.tabbar-labels
~ .page
> .list-index
,
7993 .toolbar-bottom
.tabbar-labels
~ * .page
> .list-index
,
7994 .ios
.toolbar-bottom-ios
.tabbar-labels
~ * .page
> .list-index
,
7995 .md
.toolbar-bottom-md
.tabbar-labels
~ * .page
> .list-index
,
7996 .toolbar-bottom
.tabbar-labels
~ .list-index
,
7997 .ios
.toolbar-bottom-ios
.tabbar-labels
~ .list-index
,
7998 .md .toolbar-bottom-md.tabbar-labels ~ .list-index {
7999 bottom: calc
(var
(--f7-tabbar-labels-height
) + var
(--f7-safe-area-bottom
));
8001 .ios .list-index .list-index-label {
8002 margin-bottom: calc
(-1 * var
(--f7-list-index-label-size
) / 2);
8003 margin-right: calc
(var
(--f7-list-index-width
) - 1px);
8006 .ios .list-index .list-index-label:before {
8010 border-radius: 50% 0% 50% 50%;
8012 background-color: inherit
;
8015 transform: rotate
(45deg);
8018 .md .list-index .list-index-label {
8019 border-radius: 50% 50% 0 50%;
8021 .aurora .list-index .list-index-label {
8022 margin-bottom: calc
(-1 * var
(--f7-list-index-label-size
) / 2);
8023 margin-right: calc
(var
(--f7-list-index-width
) - 1px);
8026 .aurora .list-index .list-index-label:before {
8030 border-radius: 50% 1px 50% 50%;
8032 background-color: inherit
;
8035 transform: rotate
(45deg);
8038 /* === Timeline === */
8040 --f7-timeline-horizontal-date-height: 34px;
8041 --f7-timeline-year-height: 24px;
8042 --f7-timeline-year-font-weight: inherit
;
8043 --f7-timeline-month-height: 24px;
8044 --f7-timeline-month-font-size: inherit
;
8045 --f7-timeline-month-font-weight: inherit
;
8046 --f7-timeline-item-inner-bg-color: #fff;
8047 --f7-timeline-item-text-font-weight: inherit
;
8048 --f7-timeline-item-subtitle-font-weight: inherit
;
8052 --f7-timeline-item-inner-bg-color: #1c1c1d;
8053 --f7-timeline-horizontal-item-border-color: #282829;
8054 --f7-timeline-horizontal-item-date-border-color: #282829;
8057 --f7-timeline-padding-horizontal: 15px;
8058 --f7-timeline-margin-vertical: 35px;
8059 --f7-timeline-divider-margin-horizontal: 15px;
8060 --f7-timeline-inner-block-margin-vertical: 15px;
8061 --f7-timeline-item-inner-border-radius: 7px;
8062 --f7-timeline-item-inner-box-shadow: none
;
8063 --f7-timeline-item-time-font-size: 13px;
8064 --f7-timeline-item-time-text-color: #6d6d72;
8065 --f7-timeline-item-title-font-size: 17px;
8066 --f7-timeline-item-title-line-height: inherit
;
8067 --f7-timeline-item-title-font-weight: 600;
8068 --f7-timeline-item-subtitle-font-size: 15px;
8069 --f7-timeline-item-subtitle-line-height: inherit
;
8070 --f7-timeline-item-text-font-size: inherit
;
8071 --f7-timeline-item-text-color: inherit
;
8072 --f7-timeline-item-text-line-height: inherit
;
8073 --f7-timeline-year-font-size: 16px;
8074 --f7-timeline-horizontal-item-padding: 10px;
8075 --f7-timeline-horizontal-item-border-color: #c4c4c4;
8076 --f7-timeline-horizontal-item-date-border-color: #c4c4c4;
8077 --f7-timeline-horizontal-item-date-shadow-image: none
;
8081 --f7-timeline-item-time-text-color: #8E8E93;
8084 --f7-timeline-padding-horizontal: 16px;
8085 --f7-timeline-margin-vertical: 32px;
8086 --f7-timeline-divider-margin-horizontal: 16px;
8087 --f7-timeline-inner-block-margin-vertical: 16px;
8088 --f7-timeline-item-inner-border-radius: 4px;
8089 --f7-timeline-item-inner-box-shadow: var
(--f7-elevation-1
);
8090 --f7-timeline-item-time-font-size: 13px;
8091 --f7-timeline-item-time-text-color: rgba
(0, 0, 0, 0.54);
8092 --f7-timeline-item-title-font-size: 16px;
8093 --f7-timeline-item-title-line-height: inherit
;
8094 --f7-timeline-item-title-font-weight: 400;
8095 --f7-timeline-item-subtitle-font-size: inherit
;
8096 --f7-timeline-item-subtitle-line-height: inherit
;
8097 --f7-timeline-item-text-font-size: inherit
;
8098 --f7-timeline-item-text-line-height: inherit
;
8099 --f7-timeline-item-text-color: inherit
;
8100 --f7-timeline-year-font-size: 16px;
8101 --f7-timeline-horizontal-item-padding: 12px;
8102 --f7-timeline-horizontal-item-border-color: rgba
(0, 0, 0, 0.12);
8103 --f7-timeline-horizontal-item-date-border-color: transparent
;
8104 --f7-timeline-horizontal-item-date-shadow-image: var
(--f7-bars-shadow-bottom-image
);
8108 --f7-timeline-item-time-text-color: rgba
(255, 255, 255, 0.54);
8111 --f7-timeline-padding-horizontal: 10px;
8112 --f7-timeline-margin-vertical: 15px;
8113 --f7-timeline-divider-margin-horizontal: 15px;
8114 --f7-timeline-inner-block-margin-vertical: 15px;
8115 --f7-timeline-item-inner-border-radius: 4px;
8116 --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba
(0, 0, 0, 0.15);
8117 --f7-timeline-item-time-font-size: 12px;
8118 --f7-timeline-item-time-text-color: rgba
(0, 0, 0, 0.5);
8119 --f7-timeline-item-title-font-size: 14px;
8120 --f7-timeline-item-title-line-height: 1.3;
8121 --f7-timeline-item-title-font-weight: 600;
8122 --f7-timeline-item-subtitle-font-size: 14px;
8123 --f7-timeline-item-subtitle-line-height: 1.3;
8124 --f7-timeline-item-text-color: rgba
(0, 0, 0, 0.6);
8125 --f7-timeline-item-text-font-size: 12px;
8126 --f7-timeline-item-text-line-height: 1.33;
8127 --f7-timeline-year-font-size: 14px;
8128 --f7-timeline-year-font-weight: 500;
8129 --f7-timeline-horizontal-item-padding: 10px;
8130 --f7-timeline-horizontal-item-border-color: rgba
(0, 0, 0, 0.2);
8131 --f7-timeline-horizontal-item-date-border-color: rgba
(0, 0, 0, 0.2);
8132 --f7-timeline-horizontal-item-date-shadow-image: none
;
8134 .aurora
.theme-dark
,
8135 .aurora.theme-dark {
8136 --f7-timeline-item-time-text-color: rgba
(255, 255, 255, 0.52);
8137 --f7-timeline-item-text-color: rgba
(255, 255, 255, 0.52);
8140 box-sizing: border-box
;
8141 margin: var
(--f7-timeline-margin-vertical
) 0;
8142 padding: 0 var
(--f7-timeline-padding-horizontal
);
8145 padding-left: calc
(var
(--f7-timeline-padding-horizontal
) + var
(--f7-safe-area-left
));
8146 padding-right: calc
(var
(--f7-timeline-padding-horizontal
) + var
(--f7-safe-area-right
));
8148 .block-strong .timeline {
8154 justify-content: flex-start
;
8156 box-sizing: border-box
;
8158 padding: 2px 0px var
(--f7-timeline-padding-horizontal
);
8160 .timeline-item:last-child {
8161 padding-bottom: 2px;
8163 .timeline-item-date {
8167 box-sizing: border-box
;
8169 .timeline-item-date small {
8172 .timeline-item-content {
8178 .timeline-item-content
.card
,
8179 .timeline-item-content
.card
,
8180 .timeline-item-content
.list
,
8181 .timeline-item-content
.list
,
8182 .timeline-item-content
.block
,
8183 .timeline-item-content.block {
8187 .timeline-item-content
.card
+ .card
,
8188 .timeline-item-content
.list
+ .card
,
8189 .timeline-item-content
.block
+ .card
,
8190 .timeline-item-content
.card
+ .list
,
8191 .timeline-item-content
.list
+ .list
,
8192 .timeline-item-content
.block
+ .list
,
8193 .timeline-item-content
.card
+ .block
,
8194 .timeline-item-content
.list
+ .block
,
8195 .timeline-item-content .block + .block {
8196 margin: var
(--f7-timeline-inner-block-margin-vertical
) 0 0;
8198 .timeline-item-content
p:first-child
,
8199 .timeline-item-content
ul:first-child
,
8200 .timeline-item-content
ol:first-child
,
8201 .timeline-item-content
h1:first-child
,
8202 .timeline-item-content
h2:first-child
,
8203 .timeline-item-content
h3:first-child
,
8204 .timeline-item-content h4:first-child {
8207 .timeline-item-content
p:last-child
,
8208 .timeline-item-content
ul:last-child
,
8209 .timeline-item-content
ol:last-child
,
8210 .timeline-item-content
h1:last-child
,
8211 .timeline-item-content
h2:last-child
,
8212 .timeline-item-content
h3:last-child
,
8213 .timeline-item-content h4:last-child {
8216 .timeline-item-inner {
8217 background: var
(--f7-timeline-item-inner-bg-color
);
8218 box-sizing: border-box
;
8219 border-radius: var
(--f7-timeline-item-inner-border-radius
);
8220 padding: 8px var
(--f7-timeline-padding-horizontal
);
8221 box-shadow: var
(--f7-timeline-item-inner-box-shadow
);
8223 .timeline-item-inner + .timeline-item-inner {
8224 margin-top: var
(--f7-timeline-inner-block-margin-vertical
);
8226 .timeline-item-inner .block {
8230 .timeline-item-inner .block-strong {
8235 .timeline-item-inner .block-strong:before {
8236 display: none
!important
;
8238 .timeline-item-inner .block-strong:after {
8239 display: none
!important
;
8241 .timeline-item-inner .list ul:before {
8242 display: none
!important
;
8244 .timeline-item-inner .list ul:after {
8245 display: none
!important
;
8247 .timeline-item-divider {
8255 margin: 3px var
(--f7-timeline-divider-margin-horizontal
) 0;
8257 .timeline-item-divider:after
,
8258 .timeline-item-divider:before {
8264 background: inherit
;
8265 transform: translate3d
(-50%, 0, 0);
8267 .timeline-item-divider:after {
8270 .timeline-item-divider:before {
8273 .timeline-item:last-child .timeline-item-divider:after {
8276 .timeline-item:first-child .timeline-item-divider:before {
8279 .timeline-item-time {
8280 font-size: var
(--f7-timeline-item-time-font-size
);
8281 margin-top: var
(--f7-timeline-inner-block-margin-vertical
);
8282 color: var
(--f7-timeline-item-time-text-color
);
8284 .timeline-item-time:first-child
,
8285 .timeline-item-time:last-child {
8288 .timeline-item-title + .timeline-item-time {
8291 .timeline-item-title {
8292 font-size: var
(--f7-timeline-item-title-font-size
);
8293 font-weight: var
(--f7-timeline-item-title-font-weight
);
8294 line-height: var
(--f7-timeline-item-title-line-height
);
8296 .timeline-item-subtitle {
8297 font-size: var
(--f7-timeline-item-subtitle-font-size
);
8298 font-weight: var
(--f7-timeline-item-subtitle-font-weight
);
8299 line-height: var
(--f7-timeline-item-subtitle-line-height
);
8301 .timeline-item-text {
8302 color: var
(--f7-timeline-item-text-color
);
8303 font-size: var
(--f7-timeline-item-text-font-size
);
8304 font-weight: var
(--f7-timeline-item-text-font-weight
);
8305 line-height: var
(--f7-timeline-item-text-line-height
);
8307 .timeline-sides
.timeline-item-right
,
8308 .timeline-sides .timeline-item {
8309 margin-left: calc
(50% - (var
(--f7-timeline-divider-margin-horizontal
) * 2 + 10px) / 2 - 50px);
8312 .timeline-sides
.timeline-item-right
.timeline-item-date
,
8313 .timeline-sides .timeline-item .timeline-item-date {
8316 .timeline-sides
.timeline-item-left
,
8317 .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
8318 flex-direction: row-reverse
;
8319 margin-right: calc
(50% - (var
(--f7-timeline-divider-margin-horizontal
) * 2 + 10px) / 2 - 50px);
8322 .timeline-sides
.timeline-item-left
.timeline-item-date
,
8323 .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
8326 @media (min-width: 768px) {
8327 .tablet-sides
.timeline-item-right
,
8328 .tablet-sides .timeline-item {
8329 margin-left: calc
(50% - (var
(--f7-timeline-divider-margin-horizontal
) * 2 + 10px) / 2 - 50px);
8332 .tablet-sides
.timeline-item-right
.timeline-item-date
,
8333 .tablet-sides .timeline-item .timeline-item-date {
8336 .tablet-sides
.timeline-item-left
,
8337 .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
8338 flex-direction: row-reverse
;
8339 margin-right: calc
(50% - (var
(--f7-timeline-divider-margin-horizontal
) * 2 + 10px) / 2 - 50px);
8342 .tablet-sides
.timeline-item-left
.timeline-item-date
,
8343 .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
8347 .timeline-horizontal {
8353 padding-left: var
(--f7-safe-area-left
);
8356 .timeline-horizontal .timeline-item {
8358 width: 33.33333333vw;
8364 padding-top: var
(--f7-timeline-horizontal-date-height
) !important
;
8365 padding-bottom: var
(--f7-timeline-horizontal-item-padding
);
8367 .timeline-horizontal .timeline-item:after {
8370 background-color: var
(--f7-timeline-horizontal-item-border-color
);
8379 transform-origin: 100% 50%;
8380 transform: scaleX
(calc
(1 / var
(--f7-device-pixel-ratio
)));
8382 .timeline-horizontal .timeline-item-date {
8383 padding: 0px var
(--f7-timeline-horizontal-item-padding
);
8385 line-height: var
(--f7-timeline-horizontal-date-height
);
8390 height: var
(--f7-timeline-horizontal-date-height
);
8391 background-color: var
(--f7-bars-bg-color
, var
(--f7-theme-color
));
8392 color: var
(--f7-bars-text-color
);
8395 .timeline-horizontal .timeline-item-date:after {
8398 background-color: var
(--f7-timeline-horizontal-item-date-border-color
);
8407 transform-origin: 50% 100%;
8408 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
8410 .timeline-horizontal .timeline-item-date:before {
8418 pointer-events: none
;
8419 background: var
(--f7-timeline-horizontal-item-date-shadow-image
);
8421 .timeline-horizontal.no-shadow .timeline-item-date:before {
8424 .timeline-horizontal .timeline-item-content {
8425 padding: var
(--f7-timeline-horizontal-item-padding
);
8426 height: calc
(100% - var
(--f7-timeline-horizontal-item-padding
));
8427 will-change: scroll-position
;
8429 -webkit-overflow-scrolling: touch
;
8432 .timeline-horizontal .timeline-item-divider {
8435 .timeline-horizontal
> .timeline-item:last-child:after
,
8436 .timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after {
8437 display: none
!important
;
8439 .timeline-horizontal.col-5 .timeline-item {
8442 .timeline-horizontal.col-10 .timeline-item {
8445 .timeline-horizontal.col-15 .timeline-item {
8448 .timeline-horizontal.col-20 .timeline-item {
8451 .timeline-horizontal.col-25 .timeline-item {
8454 .timeline-horizontal.col-30 .timeline-item {
8457 .timeline-horizontal.col-33 .timeline-item {
8458 width: 33.333333333333336vw;
8460 .timeline-horizontal.col-35 .timeline-item {
8463 .timeline-horizontal.col-40 .timeline-item {
8466 .timeline-horizontal.col-45 .timeline-item {
8469 .timeline-horizontal.col-50 .timeline-item {
8472 .timeline-horizontal.col-55 .timeline-item {
8475 .timeline-horizontal.col-60 .timeline-item {
8478 .timeline-horizontal.col-65 .timeline-item {
8481 .timeline-horizontal.col-66 .timeline-item {
8482 width: 66.66666666666666vw;
8484 .timeline-horizontal.col-70 .timeline-item {
8487 .timeline-horizontal.col-75 .timeline-item {
8490 .timeline-horizontal.col-80 .timeline-item {
8493 .timeline-horizontal.col-85 .timeline-item {
8496 .timeline-horizontal.col-90 .timeline-item {
8499 .timeline-horizontal.col-95 .timeline-item {
8502 .timeline-horizontal.col-100 .timeline-item {
8505 @media (min-width: 768px) {
8506 .timeline-horizontal.tablet-5 .timeline-item {
8509 .timeline-horizontal.tablet-10 .timeline-item {
8512 .timeline-horizontal.tablet-15 .timeline-item {
8515 .timeline-horizontal.tablet-20 .timeline-item {
8518 .timeline-horizontal.tablet-25 .timeline-item {
8521 .timeline-horizontal.tablet-30 .timeline-item {
8524 .timeline-horizontal.tablet-33 .timeline-item {
8525 width: 33.333333333333336vw;
8527 .timeline-horizontal.tablet-35 .timeline-item {
8530 .timeline-horizontal.tablet-40 .timeline-item {
8533 .timeline-horizontal.tablet-45 .timeline-item {
8536 .timeline-horizontal.tablet-50 .timeline-item {
8539 .timeline-horizontal.tablet-55 .timeline-item {
8542 .timeline-horizontal.tablet-60 .timeline-item {
8545 .timeline-horizontal.tablet-65 .timeline-item {
8548 .timeline-horizontal.tablet-66 .timeline-item {
8549 width: 66.66666666666666vw;
8551 .timeline-horizontal.tablet-70 .timeline-item {
8554 .timeline-horizontal.tablet-75 .timeline-item {
8557 .timeline-horizontal.tablet-80 .timeline-item {
8560 .timeline-horizontal.tablet-85 .timeline-item {
8563 .timeline-horizontal.tablet-90 .timeline-item {
8566 .timeline-horizontal.tablet-95 .timeline-item {
8569 .timeline-horizontal.tablet-100 .timeline-item {
8574 padding-top: var
(--f7-timeline-year-height
);
8576 .timeline-year:after {
8579 background-color: var
(--f7-timeline-horizontal-item-border-color
);
8588 transform-origin: 100% 50%;
8589 transform: scaleX
(calc
(1 / var
(--f7-device-pixel-ratio
)));
8591 .timeline-year:last-child:after {
8592 display: none
!important
;
8595 padding-top: var
(--f7-timeline-month-height
);
8597 .timeline-month .timeline-item:before {
8600 background-color: var
(--f7-timeline-horizontal-item-border-color
);
8609 transform-origin: 50% 0%;
8610 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
8617 box-sizing: border-box
;
8620 .timeline-year-title {
8621 line-height: var
(--f7-timeline-year-height
);
8622 height: var
(--f7-timeline-year-height
);
8623 font-size: var
(--f7-timeline-year-font-size
);
8624 font-weight: var
(--f7-timeline-year-font-weight
);
8626 .timeline-month-title {
8627 line-height: var
(--f7-timeline-month-height
);
8628 height: var
(--f7-timeline-month-height
);
8629 font-size: var
(--f7-timeline-month-font-size
);
8630 font-weight: var
(--f7-timeline-month-font-weight
);
8632 .timeline-year-title
,
8633 .timeline-month-title {
8638 box-sizing: border-box
;
8639 padding: 0 var
(--f7-timeline-horizontal-item-padding
);
8640 background-color: var
(--f7-bars-bg-color
, var
(--f7-theme-color
));
8641 color: var
(--f7-bars-text-color
);
8643 .timeline-year-title span
,
8644 .timeline-month-title span {
8645 display: inline-block
;
8646 position: -webkit-sticky
;
8648 left: calc
(var
(--f7-timeline-horizontal-item-padding
) + var
(--f7-safe-area-left
));
8650 .timeline-month-title span {
8653 .timeline-year:first-child
.timeline-year-title
,
8654 .timeline-year:first-child
.timeline-month:first-child
.timeline-month-title
,
8655 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
8656 left: calc
(var
(--f7-safe-area-left
) * -1);
8660 .timeline-horizontal
.timeline-item:first-child
,
8661 .timeline-year:first-child
.timeline-month:first-child
.timeline-item:first-child
,
8662 .timeline-year:first-child
.timeline-year-title
+ .timeline-month
.timeline-item:first-child
,
8663 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item {
8666 .timeline-horizontal
.timeline-item:first-child
.timeline-item-date
,
8667 .timeline-year:first-child
.timeline-month:first-child
.timeline-item:first-child
.timeline-item-date
,
8668 .timeline-year:first-child
.timeline-year-title
+ .timeline-month
.timeline-item:first-child
.timeline-item-date
,
8669 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item .timeline-item-date {
8671 padding-left: calc
(var
(--f7-timeline-horizontal-item-padding
) + var
(--f7-safe-area-left
));
8672 left: calc
(0px - var
(--f7-safe-area-left
));
8675 .timeline-year:last-child
.timeline-year-title
,
8676 .timeline-year:last-child .timeline-month:last-child .timeline-month-title {
8678 right: calc
(0px - var
(--f7-safe-area-right
));
8680 .timeline-horizontal
.timeline-item:last-child
,
8681 .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
8684 .timeline-horizontal
.timeline-item:last-child
.timeline-item-date
,
8685 .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date {
8687 right: calc
(0px - var
(--f7-safe-area-right
));
8690 .ios .block-strong .timeline-item-inner {
8692 border: 1px solid rgba
(0, 0, 0, 0.1);
8694 .ios .timeline-year-title span {
8697 .md .timeline-year-title span {
8700 .aurora .timeline-year-title span {
8710 .tabs-animated-wrap {
8716 .tabs-animated-wrap > .tabs {
8719 transition-duration: 300ms;
8721 .tabs-animated-wrap > .tabs > .tab {
8726 .tabs-animated-wrap.not-animated > .tabs {
8727 transition-duration: 0ms;
8729 .tabs-swipeable-wrap {
8732 .tabs-swipeable-wrap > .tabs {
8735 .tabs-swipeable-wrap > .tabs > .tab {
8741 /* === Panels === */
8743 --f7-panel-width: 260px;
8745 --f7-panel-left-width: var(--f7-panel-width);
8746 --f7-panel-right-width: var(--f7-panel-width);
8748 --f7-panel-bg-color: #fff;
8751 --f7-panel-backdrop-bg-color: rgba
(0, 0, 0, 0);
8752 --f7-panel-transition-duration: 400ms;
8753 --f7-panel-shadow: transparent
;
8756 --f7-panel-backdrop-bg-color: rgba
(0, 0, 0, 0.2);
8757 --f7-panel-transition-duration: 300ms;
8758 --f7-panel-shadow: rgba
(0, 0, 0, 0.25) 0%,
8759 rgba
(0, 0, 0, 0.1) 30%,
8760 rgba
(0, 0, 0, 0.05) 40%,
8761 rgba
(0, 0, 0, 0) 60%,
8762 rgba
(0, 0, 0, 0) 100%;
8765 --f7-panel-backdrop-bg-color: rgba
(0, 0, 0, 0.2);
8766 --f7-panel-transition-duration: 400ms;
8767 --f7-panel-shadow: transparent
;
8772 top: calc
(var
(--f7-statusbar-height
) + var
(--f7-appbar-app-offset
, 0px));
8774 height: calc
(100% - var
(--f7-statusbar-height
) - var
(--f7-appbar-app-offset
, 0px));
8778 transform: translate3d
(0, 0, 0);
8779 background-color: var
(--f7-panel-backdrop-bg-color
);
8780 transition-duration: var
(--f7-panel-transition-duration
);
8781 will-change: transform
, opacity
;
8783 .panel-backdrop.not-animated {
8784 transition-duration: 0ms !important
;
8789 box-sizing: border-box
;
8791 top: calc
(var
(--f7-statusbar-height
) + var
(--f7-appbar-app-offset
, 0px));
8792 height: calc
(100% - var
(--f7-statusbar-height
) - var
(--f7-appbar-app-offset
, 0px));
8793 transform: translate3d
(0, 0, 0);
8794 width: var
(--f7-panel-width
);
8795 background-color: var
(--f7-panel-bg-color
);
8797 will-change: transform
;
8798 transition-property: transform
;
8801 pointer-events: none
;
8809 transition-property: transform
, opacity
;
8813 transition-duration: var
(--f7-panel-transition-duration
);
8815 .panel
.not-animated
,
8816 .panel.not-animated:after {
8817 transition-duration: 0ms !important
;
8819 .panel
.panel-reveal
.not-animated
~ .views
,
8820 .panel.panel-reveal.not-animated ~ .view {
8821 transition-duration: 0ms !important
;
8823 .panel.panel-resizing {
8824 -webkit-user-select: none
;
8825 -moz-user-select: none
;
8826 -ms-user-select: none
;
8829 .panel
.panel-resizing
,
8830 .panel
.panel-resizing:after
,
8831 .panel
.panel-resizing
~ .views
,
8832 .panel.panel-resizing ~ .view {
8833 transition-duration: 0ms !important
;
8840 width: var
(--f7-panel-left-width
, var
(--f7-panel-width
));
8842 .panel-left.panel-cover {
8843 transform: translate3d
(-100%, 0, 0);
8845 .panel-left.panel-cover:after {
8847 background: linear-gradient
(to right
, var
(--f7-panel-shadow
));
8849 html
.with-panel-left-cover
.panel-left
.panel-cover:after
{
8852 .panel-left.panel-reveal:after {
8854 transform: translate3d
(calc
(-1 * var
(--f7-panel-left-width
, var
(--f7-panel-width
))), 0, 0);
8855 background: linear-gradient
(to left
, var
(--f7-panel-shadow
));
8857 html
.with-panel-left-reveal
.panel-left
.panel-reveal:after
{
8859 transform: translate3d
(0, 0, 0);
8863 width: var
(--f7-panel-right-width
, var
(--f7-panel-width
));
8865 .panel-right.panel-cover {
8866 transform: translate3d
(100%, 0, 0);
8868 .panel-right.panel-cover:after {
8870 background: linear-gradient
(to left
, var
(--f7-panel-shadow
));
8872 html
.with-panel-right-cover
.panel-right
.panel-cover:after
{
8875 .panel-right.panel-reveal:after {
8877 background: linear-gradient
(to right
, var
(--f7-panel-shadow
));
8878 transform: translate3d
(var
(--f7-panel-right-width
, var
(--f7-panel-width
)), 0, 0);
8880 html
.with-panel-right-reveal
.panel-right
.panel-reveal:after
{
8882 transform: translate3d
(0, 0, 0);
8884 .panel-visible-by-breakpoint {
8886 transform: translate3d
(0, 0, 0) !important
;
8888 .panel-visible-by-breakpoint:after {
8891 .panel-visible-by-breakpoint.panel-cover {
8894 html
.with-panel-left-reveal
.views
,
8895 html
.with-panel-right-reveal
.views
,
8896 html
.with-panel-transitioning
.views
,
8897 html
.with-panel-left-reveal
.framework7-root
> .view
,
8898 html
.with-panel-right-reveal
.framework7-root
> .view
,
8899 html
.with-panel-transitioning
.framework7-root
> .view
{
8900 transition-duration: var
(--f7-panel-transition-duration
);
8901 transition-property: transform
;
8903 html
.with-panel-left-reveal
.panel-backdrop
,
8904 html
.with-panel-right-reveal
.panel-backdrop
,
8905 html
.with-panel-transitioning
.panel-backdrop
{
8906 background: rgba
(0, 0, 0, 0);
8910 html
.with-panel
.framework7-root
> .views
.page-content
,
8911 html
.with-panel
.framework7-root
> .view
.page-content
{
8913 -webkit-overflow-scrolling: auto
;
8915 html
.with-panel-left-cover
.panel-backdrop
,
8916 html
.with-panel-right-cover
.panel-backdrop
{
8920 html
.with-panel-left-reveal
.views
,
8921 html
.with-panel-left-reveal
.framework7-root
> .view
,
8922 html
.with-panel-left-reveal
.panel-backdrop
{
8923 transform: translate3d
(var
(--f7-panel-left-width
, var
(--f7-panel-width
)), 0, 0);
8925 html
.with-panel-right-reveal
.views
,
8926 html
.with-panel-right-reveal
.framework7-root
> .view
,
8927 html
.with-panel-right-reveal
.panel-backdrop
{
8928 transform: translate3d
(calc
(-1 * var
(--f7-panel-right-width
, var
(--f7-panel-width
))), 0, 0);
8930 html
.with-panel-left-cover
.panel-left
{
8931 transform: translate3d
(0px, 0, 0);
8933 html
.with-panel-right-cover
.panel-right
{
8934 transform: translate3d
(0px, 0, 0);
8936 .panel-resize-handler {
8945 .panel-resizable .panel-resize-handler {
8948 .panel-left.panel-cover .panel-resize-handler {
8951 .panel-left.panel-reveal .panel-resize-handler {
8954 .panel-right.panel-cover .panel-resize-handler {
8957 .panel-right.panel-reveal .panel-resize-handler {
8962 --f7-card-bg-color: #fff;
8963 --f7-card-outline-border-color: rgba
(0, 0, 0, 0.12);
8964 --f7-card-border-radius: 4px;
8965 --f7-card-font-size: inherit
;
8966 --f7-card-header-text-color: inherit
;
8967 --f7-card-header-font-weight: 400;
8968 --f7-card-header-border-color: #e1e1e1;
8969 --f7-card-footer-border-color: #e1e1e1;
8970 --f7-card-footer-font-weight: 400;
8971 --f7-card-footer-font-size: inherit
;
8972 --f7-card-expandable-bg-color: #fff;
8973 --f7-card-expandable-font-size: 16px;
8974 --f7-card-expandable-tablet-width: 670px;
8975 --f7-card-expandable-tablet-height: 670px;
8979 --f7-card-bg-color: #1c1c1d;
8980 --f7-card-expandable-bg-color: #1c1c1d;
8981 --f7-card-outline-border-color: #282829;
8982 --f7-card-header-border-color: #282829;
8983 --f7-card-footer-border-color: #282829;
8984 --f7-card-footer-text-color: #8E8E93;
8987 --f7-card-margin-horizontal: 10px;
8988 --f7-card-margin-vertical: 10px;
8989 --f7-card-box-shadow: 0px 1px 2px rgba
(0, 0, 0, 0.2);
8990 --f7-card-content-padding-horizontal: 15px;
8991 --f7-card-content-padding-vertical: 15px;
8992 --f7-card-header-font-size: 17px;
8993 --f7-card-header-padding-vertical: 10px;
8994 --f7-card-header-padding-horizontal: 15px;
8995 --f7-card-header-min-height: 44px;
8996 --f7-card-footer-text-color: #6d6d72;
8997 --f7-card-footer-padding-vertical: 10px;
8998 --f7-card-footer-padding-horizontal: 15px;
8999 --f7-card-footer-min-height: 44px;
9000 --f7-card-expandable-margin-horizontal: 20px;
9001 --f7-card-expandable-margin-vertical: 30px;
9002 --f7-card-expandable-box-shadow: 0px 20px 40px rgba
(0, 0, 0, 0.3);
9003 --f7-card-expandable-border-radius: 15px;
9004 --f7-card-expandable-tablet-border-radius: 5px;
9005 --f7-card-expandable-header-font-size: 27px;
9006 --f7-card-expandable-header-font-weight: bold
;
9009 --f7-card-margin-horizontal: 8px;
9010 --f7-card-margin-vertical: 8px;
9011 --f7-card-box-shadow: var
(--f7-elevation-1
);
9012 --f7-card-content-padding-horizontal: 16px;
9013 --f7-card-content-padding-vertical: 16px;
9014 --f7-card-header-font-size: 16px;
9015 --f7-card-header-padding-vertical: 4px;
9016 --f7-card-header-padding-horizontal: 16px;
9017 --f7-card-header-min-height: 48px;
9018 --f7-card-footer-text-color: #757575;
9019 --f7-card-footer-padding-vertical: 4px;
9020 --f7-card-footer-padding-horizontal: 16px;
9021 --f7-card-footer-min-height: 48px;
9022 --f7-card-expandable-margin-horizontal: 12px;
9023 --f7-card-expandable-margin-vertical: 24px;
9024 --f7-card-expandable-box-shadow: var
(--f7-elevation-10
);
9025 --f7-card-expandable-border-radius: 8px;
9026 --f7-card-expandable-tablet-border-radius: 4px;
9027 --f7-card-expandable-header-font-size: 24px;
9028 --f7-card-expandable-header-font-weight: 500;
9031 --f7-card-margin-horizontal: 10px;
9032 --f7-card-margin-vertical: 10px;
9033 --f7-card-box-shadow: 0px 1px 2px rgba
(0, 0, 0, 0.15);
9034 --f7-card-content-padding-horizontal: 15px;
9035 --f7-card-content-padding-vertical: 15px;
9036 --f7-card-header-font-size: 14px;
9037 --f7-card-header-font-weight: bold
;
9038 --f7-card-header-padding-vertical: 10px;
9039 --f7-card-header-padding-horizontal: 15px;
9040 --f7-card-header-min-height: 38px;
9041 --f7-card-footer-text-color: rgba
(0, 0, 0, 0.6);
9042 --f7-card-footer-padding-vertical: 10px;
9043 --f7-card-footer-padding-horizontal: 15px;
9044 --f7-card-footer-min-height: 38px;
9045 --f7-card-expandable-margin-horizontal: 10px;
9046 --f7-card-expandable-margin-vertical: 20px;
9047 --f7-card-expandable-box-shadow: 0px 5px 10px rgba
(0, 0, 0, 0.15);
9048 --f7-card-expandable-border-radius: 15px;
9049 --f7-card-expandable-tablet-border-radius: 5px;
9050 --f7-card-expandable-header-font-size: 27px;
9051 --f7-card-expandable-header-font-weight: bold
;
9053 .cards-list
> ul:before
,
9054 .card .list > ul:before {
9055 display: none
!important
;
9057 .cards-list
> ul:after
,
9058 .card .list > ul:after {
9059 display: none
!important
;
9066 background: var
(--f7-card-bg-color
);
9068 border-radius: var
(--f7-card-border-radius
);
9069 font-size: var
(--f7-card-font-size
);
9070 margin-top: var
(--f7-card-margin-vertical
);
9071 margin-bottom: var
(--f7-card-margin-vertical
);
9072 margin-left: calc
(var
(--f7-card-margin-horizontal
) + var
(--f7-safe-area-left
));
9073 margin-right: calc
(var
(--f7-card-margin-horizontal
) + var
(--f7-safe-area-right
));
9074 box-shadow: var
(--f7-card-box-shadow
);
9080 .row:not(.no-gap) .col > .card {
9088 .ios
.card-outline-ios
,
9089 .md
.card-outline-md
,
9090 .aurora .card-outline-aurora {
9092 border: 1px solid var
(--f7-card-outline-border-color
);
9094 .card-outline
.no-border
,
9095 .ios
.card-outline-ios
.no-border
,
9096 .md
.card-outline-md
.no-border
,
9097 .aurora
.card-outline-aurora
.no-border
,
9098 .card-outline
.no-hairlines
,
9099 .ios
.card-outline-ios
.no-hairlines
,
9100 .md
.card-outline-md
.no-hairlines
,
9101 .aurora .card-outline-aurora.no-hairlines {
9107 .card-content-padding {
9109 padding: var
(--f7-card-content-padding-vertical
) var
(--f7-card-content-padding-horizontal
);
9111 .card-content-padding
> .list
,
9112 .card-content-padding > .block {
9113 margin: calc
(-1 * var
(--f7-card-content-padding-vertical
)) calc
(-1 * var
(--f7-card-content-padding-horizontal
));
9115 .card-content-padding > p:first-child {
9118 .card-content-padding > p:last-child {
9122 min-height: var
(--f7-card-header-min-height
);
9123 color: var
(--f7-card-header-text-color
);
9124 font-size: var
(--f7-card-header-font-size
);
9125 font-weight: var
(--f7-card-header-font-weight
);
9126 padding: var
(--f7-card-header-padding-vertical
) var
(--f7-card-header-padding-horizontal
);
9129 min-height: var
(--f7-card-footer-min-height
);
9130 color: var
(--f7-card-footer-text-color
);
9131 font-size: var
(--f7-card-footer-font-size
);
9132 font-weight: var
(--f7-card-footer-font-weight
);
9133 padding: var
(--f7-card-footer-padding-vertical
) var
(--f7-card-footer-padding-horizontal
);
9135 .card-footer a.link {
9141 box-sizing: border-box
;
9143 justify-content: space-between
;
9144 align-items: center
;
9146 .card-header
[valign
="top"],
9147 .card-footer[valign="top"] {
9148 align-items: flex-start
;
9150 .card-header
[valign
="bottom"],
9151 .card-footer[valign="bottom"] {
9152 align-items: flex-end
;
9154 .card-header a
.link
,
9155 .card-footer a.link {
9158 .card-header a
.link i
.icon
,
9159 .card-footer a.link i.icon {
9162 .card-header a
.icon-only
,
9163 .card-footer a.icon-only {
9165 justify-content: center
;
9166 align-items: center
;
9170 border-radius: var
(--f7-card-border-radius
) var
(--f7-card-border-radius
) 0 0;
9172 .card-header:after {
9175 background-color: var
(--f7-card-header-border-color
);
9184 transform-origin: 50% 100%;
9185 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
9187 .card-header.no-hairline:after {
9188 display: none
!important
;
9191 border-radius: 0 0 var
(--f7-card-border-radius
) var
(--f7-card-border-radius
);
9193 .card-footer:before {
9196 background-color: var
(--f7-card-footer-border-color
);
9205 transform-origin: 50% 0%;
9206 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
9208 .card-footer.no-hairline:before {
9209 display: none
!important
;
9214 background: var
(--f7-card-expandable-bg-color
);
9216 transform-origin: center center
;
9217 transition-property: transform
, border-radius
;
9218 border-radius: var
(--f7-card-expandable-border-radius
);
9220 transition-duration: 200ms;
9221 margin-left: calc
(var
(--f7-card-expandable-margin-horizontal
) + var
(--f7-safe-area-left
));
9222 margin-right: calc
(var
(--f7-card-expandable-margin-horizontal
) + var
(--f7-safe-area-right
));
9223 margin-top: var
(--f7-card-expandable-margin-vertical
);
9224 margin-bottom: var
(--f7-card-expandable-margin-vertical
);
9225 box-shadow: var
(--f7-card-expandable-box-shadow
);
9226 font-size: var
(--f7-card-expandable-font-size
);
9228 .card-expandable.card-no-transition {
9229 transition-duration: 0ms;
9231 .card-expandable.card-expandable-animate-width .card-content {
9232 transition-property: width
, transform
;
9235 .card-expandable.active-state {
9236 transform: scale
(0.97);
9238 .card-expandable
.card-opened-fade-in
,
9239 .card-expandable .card-opened-fade-out {
9240 transition-duration: 400ms;
9242 .card-expandable .card-opened-fade-in {
9244 pointer-events: none
;
9246 .card-expandable .card-content {
9251 transform-origin: center top
;
9253 transition-property: transform
;
9254 box-sizing: border-box
;
9255 pointer-events: none
;
9258 .card-expandable .card-content .card-content-padding {
9259 padding-left: calc
(var
(--f7-safe-area-left
) + var
(--f7-card-content-padding-horizontal
));
9260 padding-right: calc
(var
(--f7-safe-area-right
) + var
(--f7-card-content-padding-horizontal
));
9262 .card-expandable.card-opened {
9263 transition-duration: 0ms;
9265 .card-expandable
.card-opening
,
9266 .card-expandable
.card-closing
,
9267 .card-expandable.card-transitioning {
9268 transition-duration: 400ms;
9270 .card-expandable.card-opening .card-content {
9271 transition-duration: 300ms;
9273 .card-expandable.card-closing .card-content {
9274 transition-duration: 500ms;
9276 .card-expandable
.card-opening
,
9277 .card-expandable
.card-opened
,
9278 .card-expandable.card-closing {
9281 .card-expandable
.card-opening
,
9282 .card-expandable.card-opened {
9285 .card-expandable
.card-opening
.card-opened-fade-in
,
9286 .card-expandable.card-opened .card-opened-fade-in {
9288 pointer-events: auto
;
9290 .card-expandable
.card-opening
.card-opened-fade-out
,
9291 .card-expandable.card-opened .card-opened-fade-out {
9293 pointer-events: none
;
9295 .card-expandable.card-opened .card-content {
9297 -webkit-overflow-scrolling: touch
;
9298 pointer-events: auto
;
9300 .card-expandable .card-header {
9301 font-size: var
(--f7-card-expandable-header-font-size
);
9302 font-weight: var
(--f7-card-expandable-header-font-weight
);
9304 .card-expandable .card-header:after {
9305 display: none
!important
;
9307 .card-prevent-open {
9308 pointer-events: auto
;
9310 .card-expandable-size {
9317 pointer-events: none
;
9320 @media (min-width: 768px) and
(min-height: 670px) {
9321 .card-expandable:not(.card-tablet-fullscreen) {
9322 max-width: var
(--f7-card-expandable-tablet-width
);
9324 .card-expandable:not
(.card-tablet-fullscreen
).card-opened
,
9325 .card-expandable:not(.card-tablet-fullscreen).card-opening {
9326 border-radius: var
(--f7-card-expandable-tablet-border-radius
);
9328 .card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content {
9329 width: var
(--f7-card-expandable-tablet-width
);
9331 .card-expandable:not(.card-tablet-fullscreen) .card-expandable-size {
9332 width: var
(--f7-card-expandable-tablet-width
);
9333 height: var
(--f7-card-expandable-tablet-height
);
9336 .page.page-with-card-opened .page-content {
9346 pointer-events: none
;
9347 background: rgba
(0, 0, 0, 0.2);
9351 animation: card-backdrop-fade-in
400ms forwards
;
9352 pointer-events: auto
;
9354 .card-backdrop-out {
9355 animation: card-backdrop-fade-out
400ms forwards
;
9357 @supports ((-webkit-backdrop-filter: blur
(15px)) or
(backdrop-filter: blur
(15px))) {
9359 background: transparent
;
9363 animation: card-backdrop-blur-in
400ms forwards
;
9365 .card-backdrop-out {
9366 animation: card-backdrop-blur-out
400ms forwards
;
9369 @keyframes card-backdrop-fade-in
{
9377 @keyframes card-backdrop-fade-out
{
9385 @keyframes card-backdrop-blur-in
{
9387 -webkit-backdrop-filter: blur
(0px);
9388 backdrop-filter: blur
(0px);
9391 -webkit-backdrop-filter: blur
(15px);
9392 backdrop-filter: blur
(15px);
9395 @keyframes card-backdrop-blur-out
{
9397 -webkit-backdrop-filter: blur
(15px);
9398 backdrop-filter: blur
(15px);
9401 -webkit-backdrop-filter: blur
(0px);
9402 backdrop-filter: blur
(0px);
9407 --f7-chip-bg-color: rgba
(0, 0, 0, 0.12);
9408 --f7-chip-font-size: 13px;
9409 --f7-chip-font-weight: normal
;
9410 --f7-chip-outline-border-color: rgba
(0, 0, 0, 0.12);
9411 --f7-chip-media-font-size: 16px;
9412 --f7-chip-delete-button-color: #000;
9416 --f7-chip-delete-button-color: #fff;
9417 --f7-chip-bg-color: #333;
9418 --f7-chip-outline-border-color: #333;
9421 --f7-chip-text-color: #000;
9422 --f7-chip-height: 24px;
9423 --f7-chip-padding-horizontal: 10px;
9427 --f7-chip-text-color: #fff;
9430 --f7-chip-text-color: rgba
(0, 0, 0, 0.87);
9431 --f7-chip-height: 32px;
9432 --f7-chip-padding-horizontal: 12px;
9436 --f7-chip-text-color: rgba
(255, 255, 255, 0.87);
9439 --f7-chip-text-color: #000;
9440 --f7-chip-height: 20px;
9441 --f7-chip-padding-horizontal: 10px;
9442 --f7-chip-font-size: 12px;
9443 --f7-chip-media-font-size: 14px;
9445 .aurora
.theme-dark
,
9446 .aurora.theme-dark {
9447 --f7-chip-text-color: #fff;
9450 padding-left: var
(--f7-chip-padding-horizontal
);
9451 padding-right: var
(--f7-chip-padding-horizontal
);
9452 font-weight: var
(--f7-chip-font-weight
);
9453 display: inline-flex
;
9454 box-sizing: border-box
;
9455 vertical-align: middle
;
9456 align-items: center
;
9458 background-color: var
(--f7-chip-bg-color
);
9459 font-size: var
(--f7-chip-font-size
);
9460 color: var
(--f7-chip-text-color
);
9461 height: var
(--f7-chip-height
);
9462 line-height: var
(--f7-chip-height
);
9463 border-radius: var
(--f7-chip-height
);
9470 align-items: center
;
9471 justify-content: center
;
9472 height: var
(--f7-chip-height
);
9473 width: var
(--f7-chip-height
);
9474 border-radius: var
(--f7-chip-height
);
9476 line-height: var
(--f7-chip-height
);
9477 box-sizing: border-box
;
9479 font-size: var
(--f7-chip-media-font-size
);
9480 vertical-align: middle
;
9481 margin-left: calc
(-1 * var
(--f7-chip-padding-horizontal
));
9483 .chip-media i.icon {
9484 font-size: calc
(var
(--f7-chip-height
) - 8px);
9485 height: calc
(var
(--f7-chip-height
) - 8px);
9495 .chip-media + .chip-label {
9499 white-space: nowrap
;
9501 text-overflow: ellipsis
;
9510 background-repeat: no-repeat
;
9513 color: var
(--f7-chip-delete-button-color
);
9517 .chip-delete:after {
9518 font-family: 'framework7-core-icons';
9519 font-weight: normal
;
9522 letter-spacing: normal
;
9523 text-transform: none
;
9524 white-space: nowrap
;
9527 -webkit-font-smoothing: antialiased
;
9528 text-rendering: optimizeLegibility
;
9529 -moz-osx-font-smoothing: grayscale
;
9530 -moz-font-feature-settings: "liga";
9531 font-feature-settings: "liga";
9537 content: 'delete_round_ios';
9540 .chip .chip-delete.active-state {
9544 .ios
.chip-outline-ios
,
9545 .md
.chip-outline-md
,
9546 .aurora .chip-outline-aurora {
9547 border: 1px solid var
(--f7-chip-outline-border-color
);
9550 .chip[class*="color-"] {
9551 --f7-chip-bg-color: var
(--f7-theme-color
);
9552 --f7-chip-text-color: #fff;
9554 .chip-outline
[class
*="color-"],
9555 .ios
.chip-outline-ios
[class
*="color-"],
9556 .md
.chip-outline-md
[class
*="color-"],
9557 .aurora .chip-outline-aurora[class*="color-"] {
9558 --f7-chip-outline-border-color: var
(--f7-theme-color
);
9559 --f7-chip-text-color: var
(--f7-theme-color
);
9562 margin-right: calc
(-1 * var
(--f7-chip-padding-horizontal
));
9564 .ios .chip-delete:after {
9567 .md .chip-label + .chip-delete {
9571 margin-right: calc
(-1 * var
(--f7-chip-padding-horizontal
) + 4px);
9573 .md .chip-delete:after {
9576 .aurora .chip-delete {
9577 margin-right: calc
(-1 * var
(--f7-chip-padding-horizontal
));
9579 .aurora .chip-delete:after {
9585 --f7-input-bg-color: transparent
;
9586 --f7-label-font-weight: 400;
9587 --f7-label-line-height: 1.2;
9588 --f7-input-padding-left: 0px;
9589 --f7-input-padding-right: 0px;
9590 --f7-input-error-text-color: #ff3b30;
9591 --f7-input-error-font-size: 12px;
9592 --f7-input-error-line-height: 1.4;
9593 --f7-input-error-font-weight: 400;
9594 --f7-input-info-font-size: 12px;
9595 --f7-input-info-line-height: 1.4;
9596 --f7-input-outline-height: 40px;
9597 --f7-input-outline-border-color: #999;
9598 --f7-input-outline-border-radius: 4px;
9599 --f7-input-outline-padding-horizontal: 12px;
9600 --f7-textarea-height: 100px;
9602 --f7-input-outline-focused-border-color: var(--f7-theme-color);
9603 --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
9608 --f7-input-outline-border-color: #444;
9611 --f7-input-height: 44px;
9612 --f7-input-text-color: #000000;
9613 --f7-input-font-size: 17px;
9614 --f7-input-placeholder-color: #a9a9a9;
9615 --f7-textarea-padding-vertical: 11px;
9617 --f7-input-focused-border-color: var(--f7-list-item-border-color);
9618 --f7-input-invalid-border-color: var(--f7-list-item-border-color);
9619 --f7-input-invalid-text-color: var(--f7-input-error-text-color);
9621 --f7-label-font-size: 12px;
9622 --f7-label-text-color: inherit
;
9624 --f7-label-focused-text-color: var(--f7-label-text-color);
9625 --f7-label-invalid-text-color: var(--f7-label-text-color);
9627 --f7-floating-label-scale: calc
(17 / 12);
9628 --f7-inline-label-font-size: 17px;
9629 --f7-inline-label-line-height: 1.4;
9630 --f7-inline-label-padding-top: 3px;
9631 --f7-input-info-text-color: #8e8e93;
9632 --f7-input-clear-button-size: 14px;
9633 --f7-input-clear-button-color: #8e8e93;
9637 --f7-input-text-color: #fff;
9640 --f7-input-height: 36px;
9641 --f7-input-text-color: #212121;
9642 --f7-input-font-size: 16px;
9643 --f7-input-placeholder-color: rgba
(0, 0, 0, 0.35);
9644 --f7-textarea-padding-vertical: 7px;
9646 --f7-input-focused-border-color: var(--f7-theme-color);
9647 --f7-input-invalid-border-color: var(--f7-input-error-text-color);
9648 --f7-input-invalid-text-color: var(--f7-input-text-color);
9650 --f7-label-font-size: 12px;
9651 --f7-label-text-color: rgba
(0, 0, 0, 0.65);
9653 --f7-label-focused-text-color: var(--f7-theme-color);
9654 --f7-label-invalid-text-color: var(--f7-input-error-text-color );
9656 --f7-floating-label-scale: calc
(16 / 12);
9657 --f7-inline-label-font-size: 16px;
9658 --f7-inline-label-line-height: 1.5;
9659 --f7-inline-label-padding-top: 7px;
9660 --f7-input-info-text-color: rgba
(0, 0, 0, 0.45);
9661 --f7-input-clear-button-size: 18px;
9662 --f7-input-clear-button-color: #aaa;
9666 --f7-input-text-color: rgba
(255, 255, 255, 0.87);
9667 --f7-input-placeholder-color: rgba
(255, 255, 255, 0.35);
9668 --f7-label-text-color: rgba
(255, 255, 255, 0.54);
9669 --f7-input-info-text-color: rgba
(255, 255, 255, 0.35);
9672 --f7-input-height: 24px;
9673 --f7-input-text-color: #000000;
9674 --f7-input-font-size: 13px;
9675 --f7-input-placeholder-color: rgba
(0, 0, 0, 0.32);
9676 --f7-textarea-padding-vertical: 2px;
9678 --f7-input-focused-border-color: var(--f7-list-item-border-color);
9679 --f7-input-invalid-border-color: var(--f7-list-item-border-color);
9680 --f7-input-invalid-text-color: var(--f7-input-error-text-color);
9682 --f7-label-font-size: 11px;
9683 --f7-label-text-color: inherit
;
9685 --f7-label-focused-text-color: var(--f7-label-text-color);
9686 --f7-label-invalid-text-color: var(--f7-label-text-color);
9688 --f7-floating-label-scale: calc
(13 / 11);
9689 --f7-inline-label-font-size: 14px;
9690 --f7-inline-label-line-height: 1.4;
9691 --f7-inline-label-padding-top: 1px;
9692 --f7-input-info-text-color: rgba
(0, 0, 0, 0.5);
9693 --f7-input-clear-button-size: 14px;
9694 --f7-input-clear-button-color: #666;
9695 --f7-input-outline-height: 32px;
9696 --f7-input-outline-padding-horizontal: 8px;
9698 .aurora
.theme-dark
,
9699 .aurora.theme-dark {
9700 --f7-input-text-color: #fff;
9701 --f7-input-clear-button-color: #aaa;
9702 --f7-input-placeholder-color: rgba
(255, 255, 255, 0.35);
9705 input
[type
="password"],
9706 input
[type
="search"],
9707 input
[type
="email"],
9711 input
[type
="datetime-local"],
9713 input
[type
="number"],
9716 box-sizing: border-box
;
9717 -webkit-appearance: none
;
9718 -moz-appearance: none
;
9727 font-family: inherit
;
9733 .textarea-resizable-shadow {
9737 pointer-events: none
;
9742 .list input
[type
="text"],
9743 .list input
[type
="password"],
9744 .list input
[type
="search"],
9745 .list input
[type
="email"],
9746 .list input
[type
="tel"],
9747 .list input
[type
="url"],
9748 .list input
[type
="date"],
9749 .list input
[type
="datetime-local"],
9750 .list input
[type
="time"],
9751 .list input
[type
="number"],
9754 height: var
(--f7-input-height
);
9755 color: var
(--f7-input-text-color
);
9756 font-size: var
(--f7-input-font-size
);
9757 background-color: var
(--f7-input-bg-color
, transparent
);
9758 padding-left: var
(--f7-input-padding-left
);
9759 padding-right: var
(--f7-input-padding-right
);
9761 .list input
[type
="text"]::-webkit-input-placeholder
,
9762 .list input
[type
="password"]::-webkit-input-placeholder
,
9763 .list input
[type
="search"]::-webkit-input-placeholder
,
9764 .list input
[type
="email"]::-webkit-input-placeholder
,
9765 .list input
[type
="tel"]::-webkit-input-placeholder
,
9766 .list input
[type
="url"]::-webkit-input-placeholder
,
9767 .list input
[type
="date"]::-webkit-input-placeholder
,
9768 .list input
[type
="datetime-local"]::-webkit-input-placeholder
,
9769 .list input
[type
="time"]::-webkit-input-placeholder
,
9770 .list input
[type
="number"]::-webkit-input-placeholder
,
9771 .list select::-webkit-input-placeholder {
9772 color: var
(--f7-input-placeholder-color
);
9774 .list input
[type
="text"]::-moz-placeholder
,
9775 .list input
[type
="password"]::-moz-placeholder
,
9776 .list input
[type
="search"]::-moz-placeholder
,
9777 .list input
[type
="email"]::-moz-placeholder
,
9778 .list input
[type
="tel"]::-moz-placeholder
,
9779 .list input
[type
="url"]::-moz-placeholder
,
9780 .list input
[type
="date"]::-moz-placeholder
,
9781 .list input
[type
="datetime-local"]::-moz-placeholder
,
9782 .list input
[type
="time"]::-moz-placeholder
,
9783 .list input
[type
="number"]::-moz-placeholder
,
9784 .list select::-moz-placeholder {
9785 color: var
(--f7-input-placeholder-color
);
9787 .list input
[type
="text"]::-ms-input-placeholder
,
9788 .list input
[type
="password"]::-ms-input-placeholder
,
9789 .list input
[type
="search"]::-ms-input-placeholder
,
9790 .list input
[type
="email"]::-ms-input-placeholder
,
9791 .list input
[type
="tel"]::-ms-input-placeholder
,
9792 .list input
[type
="url"]::-ms-input-placeholder
,
9793 .list input
[type
="date"]::-ms-input-placeholder
,
9794 .list input
[type
="datetime-local"]::-ms-input-placeholder
,
9795 .list input
[type
="time"]::-ms-input-placeholder
,
9796 .list input
[type
="number"]::-ms-input-placeholder
,
9797 .list select::-ms-input-placeholder {
9798 color: var
(--f7-input-placeholder-color
);
9800 .list input
[type
="text"]::placeholder
,
9801 .list input
[type
="password"]::placeholder
,
9802 .list input
[type
="search"]::placeholder
,
9803 .list input
[type
="email"]::placeholder
,
9804 .list input
[type
="tel"]::placeholder
,
9805 .list input
[type
="url"]::placeholder
,
9806 .list input
[type
="date"]::placeholder
,
9807 .list input
[type
="datetime-local"]::placeholder
,
9808 .list input
[type
="time"]::placeholder
,
9809 .list input
[type
="number"]::placeholder
,
9810 .list select::placeholder {
9811 color: var
(--f7-input-placeholder-color
);
9815 color: var
(--f7-input-text-color
);
9816 font-size: var
(--f7-input-font-size
);
9819 height: var
(--f7-textarea-height
);
9820 background-color: var
(--f7-input-bg-color
, transparent
);
9821 padding-top: var
(--f7-textarea-padding-vertical
);
9822 padding-bottom: var
(--f7-textarea-padding-vertical
);
9823 padding-left: var
(--f7-input-padding-left
);
9824 padding-right: var
(--f7-input-padding-right
);
9826 .list textarea::-webkit-input-placeholder {
9827 color: var
(--f7-input-placeholder-color
);
9829 .list textarea::-moz-placeholder {
9830 color: var
(--f7-input-placeholder-color
);
9832 .list textarea::-ms-input-placeholder {
9833 color: var
(--f7-input-placeholder-color
);
9835 .list textarea::placeholder {
9836 color: var
(--f7-input-placeholder-color
);
9838 .list textarea.resizable {
9839 height: var
(--f7-input-height
);
9841 .list input[type="datetime-local"] {
9844 .list input
[type
="time"],
9845 .list input
[type
="date"],
9846 .list input[type="datetime-local"] {
9847 line-height: var
(--f7-input-height
);
9850 .list .item-floating-label {
9852 vertical-align: top
;
9854 font-size: var
(--f7-label-font-size
);
9855 font-weight: var
(--f7-label-font-weight
);
9856 line-height: var
(--f7-label-line-height
);
9857 color: var
(--f7-label-text-color
);
9858 transition-duration: 200ms;
9859 transition-property: transform
, color
;
9861 .list .item-floating-label {
9862 --label-height: calc
(var
(--f7-label-font-size
) * var
(--f7-label-line-height
));
9863 transform: scale
(var
(--f7-floating-label-scale
)) translateY
(calc
((var
(--f7-input-height
) / 2 + 50%) / var
(--f7-floating-label-scale
)));
9864 color: var
(--f7-input-placeholder-color
);
9866 max-width: calc
(100% / var
(--f7-floating-label-scale
));
9867 pointer-events: none
;
9868 left: var
(--f7-input-padding-left
);
9869 transform-origin: left center
;
9871 .list
.item-floating-label
~ .item-input-wrap
input::-webkit-input-placeholder
,
9872 .list .item-floating-label ~ .item-input-wrap textarea::-webkit-input-placeholder {
9874 transition-duration: 100ms;
9876 .list
.item-floating-label
~ .item-input-wrap
input::-moz-placeholder
,
9877 .list .item-floating-label ~ .item-input-wrap textarea::-moz-placeholder {
9879 transition-duration: 100ms;
9881 .list
.item-floating-label
~ .item-input-wrap
input::-ms-input-placeholder
,
9882 .list .item-floating-label ~ .item-input-wrap textarea::-ms-input-placeholder {
9884 transition-duration: 100ms;
9886 .list
.item-floating-label
~ .item-input-wrap
input::placeholder
,
9887 .list .item-floating-label ~ .item-input-wrap textarea::placeholder {
9889 transition-duration: 100ms;
9891 .list
.item-floating-label
~ .item-input-wrap input
.input-focused::-webkit-input-placeholder
,
9892 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-webkit-input-placeholder {
9894 transition-duration: 300ms;
9896 .list
.item-floating-label
~ .item-input-wrap input
.input-focused::-moz-placeholder
,
9897 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-moz-placeholder {
9899 transition-duration: 300ms;
9901 .list
.item-floating-label
~ .item-input-wrap input
.input-focused::-ms-input-placeholder
,
9902 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-ms-input-placeholder {
9904 transition-duration: 300ms;
9906 .list
.item-floating-label
~ .item-input-wrap input
.input-focused::placeholder
,
9907 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::placeholder {
9909 transition-duration: 300ms;
9911 .list .item-input-with-value .item-floating-label {
9912 color: var
(--f7-label-text-color
);
9914 .list
.item-input-with-value
.item-floating-label
,
9915 .list .item-input-focused .item-floating-label {
9916 transform: scale
(1) translateY
(0);
9918 .list .item-input-wrap {
9923 .item-input .item-inner {
9925 flex-direction: column
;
9926 align-items: flex-start
;
9928 .item-input-error-message
,
9929 .input-error-message {
9930 font-size: var
(--f7-input-error-font-size
);
9931 line-height: var
(--f7-input-error-line-height
);
9932 color: var
(--f7-input-error-text-color
);
9933 font-weight: var
(--f7-input-error-font-weight
);
9935 box-sizing: border-box
;
9939 font-size: var
(--f7-input-info-font-size
);
9940 line-height: var
(--f7-input-info-line-height
);
9941 color: var
(--f7-input-info-text-color
);
9943 .item-input-invalid
.item-input-error-message
,
9944 .input-invalid
.item-input-error-message
,
9945 .item-input-invalid
.input-error-message
,
9946 .input-invalid .input-error-message {
9949 .item-input-invalid
.item-input-info
,
9950 .input-invalid
.item-input-info
,
9951 .item-input-invalid
.input-info
,
9952 .input-invalid .input-info {
9955 .inline-labels
.item-inner
,
9956 .inline-label .item-inner {
9958 align-items: center
;
9959 flex-direction: row
;
9961 .inline-labels
.item-label
,
9962 .inline-label
.item-label
,
9963 .inline-labels
.item-floating-label
,
9964 .inline-label .item-floating-label {
9965 padding-top: var
(--f7-inline-label-padding-top
);
9966 align-self: flex-start
;
9968 font-size: var
(--f7-inline-label-font-size
);
9969 line-height: var
(--f7-inline-label-line-height
);
9971 .inline-labels
.item-label
+ .item-input-wrap
,
9972 .inline-label
.item-label
+ .item-input-wrap
,
9973 .inline-labels
.item-floating-label
+ .item-input-wrap
,
9974 .inline-label .item-floating-label + .item-input-wrap {
9985 .input-clear-button {
9987 pointer-events: none
;
9989 transition-duration: 100ms;
9999 width: var
(--f7-input-clear-button-size
);
10000 height: var
(--f7-input-clear-button-size
);
10001 margin-top: calc
(-1 * var
(--f7-input-clear-button-size
) / 2);
10002 color: var
(--f7-input-clear-button-color
);
10005 .input-clear-button:after {
10006 font-family: 'framework7-core-icons';
10007 font-weight: normal
;
10008 font-style: normal
;
10010 letter-spacing: normal
;
10011 text-transform: none
;
10012 white-space: nowrap
;
10015 -webkit-font-smoothing: antialiased
;
10016 text-rendering: optimizeLegibility
;
10017 -moz-osx-font-smoothing: grayscale
;
10018 -moz-font-feature-settings: "liga";
10019 font-feature-settings: "liga";
10020 text-align: center
;
10026 .input-clear-button:before {
10027 position: absolute
;
10032 .item-input-wrap .input-clear-button {
10033 top: calc
(var
(--f7-input-height
) / 2);
10035 .input-clear-button.active-state {
10036 opacity: 0.75 !important
;
10038 .input-with-value
~ .input-clear-button
,
10039 .item-input-with-value
.input-clear-button
,
10040 .input-with-value .input-clear-button {
10042 pointer-events: auto
;
10043 visibility: visible
;
10045 .input-dropdown-wrap
,
10047 position: relative
;
10049 .input-dropdown-wrap:before
,
10050 .input-dropdown:before {
10052 pointer-events: none
;
10053 position: absolute
;
10058 border-left: 4px solid transparent
;
10059 border-right: 4px solid transparent
;
10060 border-top: 5px solid
#727272;
10063 .input-dropdown-wrap select
,
10064 .input-dropdown select
,
10065 .input-dropdown-wrap input
,
10066 .input-dropdown input
,
10067 .input-dropdown-wrap textarea
,
10068 .input-dropdown textarea {
10069 padding-right: calc
(20px + var
(--f7-input-padding-right
));
10071 .input-outline:after
,
10072 .item-input-outline .item-input-wrap:after {
10074 position: absolute
;
10079 box-sizing: border-box
;
10080 border: 1px solid var
(--f7-input-outline-border-color
);
10081 border-radius: var
(--f7-input-outline-border-radius
);
10082 transition-duration: 200ms;
10083 pointer-events: none
;
10085 .input-outline
.input-focused:after
,
10086 .item-input-outline.item-input-focused .item-input-wrap:after {
10088 border-color: var
(--f7-input-outline-focused-border-color
, var
(--f7-theme-color
));
10090 .input-outline
.input-invalid:after
,
10091 .item-input-outline.item-input-invalid .item-input-wrap:after {
10093 border-color: var
(--f7-input-outline-invalid-border-color
, var
(--f7-input-error-text-color
));
10095 .input-outline input
,
10096 .item-input-outline input
,
10097 .list
.item-input-outline input
,
10098 .input-outline textarea
,
10099 .item-input-outline textarea
,
10100 .list
.item-input-outline textarea
,
10101 .input-outline select
,
10102 .item-input-outline select
,
10103 .list .item-input-outline select {
10104 border-radius: var
(--f7-input-outline-border-radius
);
10105 padding-left: var
(--f7-input-outline-padding-horizontal
);
10106 padding-right: var
(--f7-input-outline-padding-horizontal
);
10108 .input-outline
.input-dropdown:before
,
10109 .item-input-outline .input-dropdown-wrap:before {
10112 .input-outline
.input-dropdown input
,
10113 .item-input-outline
.input-dropdown-wrap input
,
10114 .input-outline
.input-dropdown textarea
,
10115 .item-input-outline
.input-dropdown-wrap textarea
,
10116 .input-outline
.input-dropdown select
,
10117 .item-input-outline .input-dropdown-wrap select {
10118 padding-right: 20px;
10120 .input-outline
.input-clear-button
,
10121 .item-input-outline .input-clear-button {
10124 .item-input-outline {
10125 --f7-input-height: var
(--f7-input-outline-height
);
10127 .item-input-outline .item-inner:after {
10128 display: none
!important
;
10130 .item-input-outline .item-label {
10131 left: var
(--f7-input-outline-padding-horizontal
);
10133 .inline-labels
.item-input-outline
.item-label
,
10134 .inline-label
.item-input-outline
.item-label
,
10135 .item-input-outline
.inline-label
.item-label
,
10136 .item-input-outline .inline-label.item-label {
10139 .item-input-outline .item-floating-label {
10140 left: calc
(var
(--f7-input-outline-padding-horizontal
) - 4px);
10142 padding-right: 4px;
10143 background: var
(--f7-page-bg-color
);
10145 margin-top: calc
(-0.5 * (var
(--f7-label-font-size
) * var
(--f7-label-line-height
)));
10147 .item-input-outline
.item-input-with-value
.item-floating-label
,
10148 .item-input-outline.item-input-focused .item-floating-label {
10149 transform: scale
(1) translateY
(50%);
10151 .item-input-outline
.item-input-info
,
10152 .item-input-outline .item-input-error-message {
10153 padding-left: var
(--f7-input-outline-padding-horizontal
);
10155 .block-strong .item-input-outline .item-floating-label {
10156 background: var
(--f7-block-strong-bg-color
);
10158 .list .item-input-outline .item-floating-label {
10159 background: var
(--f7-list-bg-color
);
10161 .ios
.item-label
+ .item-input-wrap
,
10162 .ios .item-floating-label + .item-input-wrap {
10165 .ios .item-input-focused .item-floating-label {
10166 color: var
(--f7-label-text-color
);
10168 .ios .item-input .item-media {
10169 align-self: flex-start
;
10171 .ios .item-input-wrap {
10172 margin-top: calc
(-1 * var
(--f7-list-item-padding-vertical
));
10173 margin-bottom: calc
(-1 * var
(--f7-list-item-padding-vertical
));
10175 .ios
.inline-labels
.item-label
+ .item-input-wrap
,
10176 .ios
.inline-label
.item-label
+ .item-input-wrap
,
10177 .ios
.inline-labels
.item-floating-label
+ .item-input-wrap
,
10178 .ios .inline-label .item-floating-label + .item-input-wrap {
10179 margin-top: calc
(-1 * var
(--f7-list-item-padding-vertical
));
10181 .ios
.inline-labels
.item-input-wrap
,
10182 .ios .inline-label .item-input-wrap {
10183 margin-top: calc
(-1 * var
(--f7-list-item-padding-vertical
));
10185 .ios
.item-input-error-message
,
10186 .ios
.item-input-info
,
10187 .ios
.input-error-message
,
10189 position: relative
;
10190 margin-bottom: 6px;
10193 .ios
.item-input-focused
.item-label
,
10194 .ios .item-input-focused .item-floating-label {
10195 color: var
(--f7-label-focused-text-color
, var
(--f7-label-text-color
));
10197 .ios .item-input-focused .item-inner:after {
10198 background: var
(--f7-input-focused-border-color
, var
(--f7-list-item-border-color
));
10200 .ios
.item-input-invalid
.item-label
,
10201 .ios .item-input-invalid .item-floating-label {
10202 color: var
(--f7-label-invalid-text-color
, var
(--f7-label-text-color
));
10204 .ios .item-input-invalid .item-inner:after {
10205 background: var
(--f7-input-invalid-border-color
, var
(--f7-list-item-border-color
));
10207 .ios
.item-input-invalid input
,
10208 .ios
.input-invalid input
,
10209 .ios
.item-input-invalid select
,
10210 .ios
.input-invalid select
,
10211 .ios
.item-input-invalid textarea
,
10212 .ios .input-invalid textarea {
10213 color: var
(--f7-input-invalid-text-color
, var
(--f7-input-error-text-color
));
10215 .ios .input-clear-button:after {
10216 content: 'delete_round_ios';
10217 font-size: calc
(var
(--f7-input-clear-button-size
) / (14 / 10));
10220 .ios .input-clear-button:before {
10223 margin-left: -22px;
10226 .ios
.item-input-outline
.item-input-wrap
,
10227 .ios .input-outline .item-input-wrap {
10231 .ios
.item-input-outline
.item-input-error-message
,
10232 .ios
.input-outline
.item-input-error-message
,
10233 .ios
.item-input-outline
.item-input-info
,
10234 .ios
.input-outline
.item-input-info
,
10235 .ios
.item-input-outline
.input-error-message
,
10236 .ios
.input-outline
.input-error-message
,
10237 .ios
.item-input-outline
.input-info
,
10238 .ios .input-outline .input-info {
10240 white-space: normal
;
10242 text-overflow: ellipsis
;
10244 .ios
.item-input-outline
.item-input-info
,
10245 .ios
.input-outline
.item-input-info
,
10246 .ios
.item-input-outline
.input-info
,
10247 .ios .input-outline .input-info {
10248 margin-bottom: calc
(-1 * var
(--f7-input-info-font-size
) * var
(--f7-input-info-line-height
));
10250 .ios
.item-input-outline
.item-input-error-message
,
10251 .ios
.input-outline
.item-input-error-message
,
10252 .ios
.item-input-outline
.input-error-message
,
10253 .ios .input-outline .input-error-message {
10254 margin-bottom: calc
(-1 * var
(--f7-input-error-font-size
) * var
(--f7-input-error-line-height
));
10256 .ios
.item-input-outline
.item-input-with-info
.item-input-wrap
,
10257 .ios
.input-outline
.item-input-with-info
.item-input-wrap
,
10258 .ios
.item-input-outline
.input-with-info
.item-input-wrap
,
10259 .ios .input-outline.input-with-info .item-input-wrap {
10260 margin-bottom: calc
(var
(--f7-input-info-font-size
) * var
(--f7-input-info-line-height
));
10262 .ios
.item-input-outline
.item-input-with-error-message
.item-input-wrap
,
10263 .ios
.input-outline
.item-input-with-error-message
.item-input-wrap
,
10264 .ios
.item-input-outline
.input-with-error-message
.item-input-wrap
,
10265 .ios .input-outline.input-with-error-message .item-input-wrap {
10266 margin-bottom: calc
(var
(--f7-input-error-font-size
) * var
(--f7-input-error-line-height
));
10268 .md
.item-input:not
(.item-input-outline
) .item-input-wrap:after
,
10269 .md .input:not(.input-outline):after {
10271 position: absolute
;
10272 background-color: var
(--f7-list-item-border-color
);
10281 transform-origin: 50% 100%;
10282 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
10284 .md
.item-input:not
(.item-input-outline
) .item-input-wrap:after
,
10285 .md .input:not(.input-outline):after {
10286 transition-duration: 200ms;
10288 .md .item-input-wrap {
10289 min-height: var
(--f7-input-height
);
10291 .md .item-input .item-media {
10292 align-self: flex-end
;
10294 .md .item-input .item-inner:after {
10295 display: none
!important
;
10297 .md
.inline-labels
.item-media
,
10298 .md .inline-label .item-media {
10299 align-self: flex-start
;
10302 .md
.item-input-with-error-message
,
10303 .md
.item-input-with-info
,
10304 .md
.input-with-error-message
,
10305 .md .input-with-info {
10306 padding-bottom: 20px;
10308 .md
.item-input-error-message
,
10309 .md
.item-input-info
,
10310 .md
.input-error-message
,
10312 position: absolute
;
10315 white-space: nowrap
;
10317 text-overflow: ellipsis
;
10321 .md
.item-input-focused
.item-label
,
10322 .md .item-input-focused .item-floating-label {
10323 color: var
(--f7-label-focused-text-color
, var
(--f7-theme-color
));
10325 .md
.item-input-focused:not
(.item-input-outline
) .item-input-wrap:after
,
10326 .md .input-focused:not(.input-outline):after {
10327 background: var
(--f7-input-focused-border-color
, var
(--f7-theme-color
));
10329 .md
.item-input-invalid:not
(.item-input-outline
) .item-input-wrap:after
,
10330 .md
.item-input-focused:not
(.item-input-outline
) .item-input-wrap:after
,
10331 .md
.input-invalid:not
(.input-outline
):after
,
10332 .md .input-focused:not(.input-outline):after {
10333 transform: scaleY
(2) !important
;
10335 .md
.item-input-invalid:not
(.item-input-outline
) .item-input-wrap:after
,
10336 .md .input-invalid:not(.input-outline):after {
10337 background: var
(--f7-input-invalid-border-color
, var
(--f7-input-error-text-color
));
10339 .md
.item-input-invalid
.item-label
,
10340 .md .item-input-invalid .item-floating-label {
10341 color: var
(--f7-label-invalid-text-color
, var
(--f7-input-error-text-color
));
10343 .md
.item-input-invalid input
,
10344 .md
.input-invalid input
,
10345 .md
.item-input-invalid select
,
10346 .md
.input-invalid select
,
10347 .md
.item-input-invalid textarea
,
10348 .md .input-invalid textarea {
10349 color: var
(--f7-input-invalid-text-color
, var
(--f7-input-text-color
));
10351 .md .input-clear-button:after {
10352 font-size: calc
(var
(--f7-input-clear-button-size
) / (24 / 20));
10353 content: 'delete_round_md';
10356 .md .input-clear-button:before {
10359 margin-left: -24px;
10362 .aurora
.item-label
+ .item-input-wrap
,
10363 .aurora .item-floating-label + .item-input-wrap {
10366 .aurora .item-input-focused .item-floating-label {
10367 color: var
(--f7-label-text-color
);
10369 .aurora .item-input .item-media {
10370 align-self: flex-start
;
10372 .aurora
.item-input-error-message
,
10373 .aurora
.item-input-info
,
10374 .aurora
.input-error-message
,
10375 .aurora .input-info {
10376 position: relative
;
10378 .aurora
.item-input-focused
.item-label
,
10379 .aurora .item-input-focused .item-floating-label {
10380 color: var
(--f7-label-focused-text-color
, var
(--f7-label-text-color
));
10382 .aurora .item-input-focused .item-inner:after {
10383 background: var
(--f7-input-focused-border-color
, var
(--f7-list-item-border-color
));
10385 .aurora
.item-input-invalid
.item-label
,
10386 .aurora .item-input-invalid .item-floating-label {
10387 color: var
(--f7-label-invalid-text-color
, var
(--f7-label-text-color
));
10389 .aurora .item-input-invalid .item-inner:after {
10390 background: var
(--f7-input-invalid-border-color
, var
(--f7-list-item-border-color
));
10392 .aurora
.item-input-invalid input
,
10393 .aurora
.input-invalid input
,
10394 .aurora
.item-input-invalid select
,
10395 .aurora
.input-invalid select
,
10396 .aurora
.item-input-invalid textarea
,
10397 .aurora .input-invalid textarea {
10398 color: var
(--f7-input-invalid-text-color
, var
(--f7-input-error-text-color
));
10400 .aurora .input-clear-button:after {
10401 content: 'delete_round_ios';
10402 font-size: calc
(var
(--f7-input-clear-button-size
) / (14 / 10));
10405 .aurora .input-clear-button:before {
10408 margin-left: -14px;
10411 .aurora
.item-input-outline
.item-input-wrap
,
10412 .aurora .input-outline .item-input-wrap {
10416 .aurora
.item-input-outline
.item-input-error-message
,
10417 .aurora
.input-outline
.item-input-error-message
,
10418 .aurora
.item-input-outline
.item-input-info
,
10419 .aurora
.input-outline
.item-input-info
,
10420 .aurora
.item-input-outline
.input-error-message
,
10421 .aurora
.input-outline
.input-error-message
,
10422 .aurora
.item-input-outline
.input-info
,
10423 .aurora .input-outline .input-info {
10425 white-space: normal
;
10427 text-overflow: ellipsis
;
10429 .aurora
.item-input-outline
.item-input-info
,
10430 .aurora
.input-outline
.item-input-info
,
10431 .aurora
.item-input-outline
.input-info
,
10432 .aurora .input-outline .input-info {
10433 margin-bottom: calc
(-1 * var
(--f7-input-info-font-size
) * var
(--f7-input-info-line-height
));
10435 .aurora
.item-input-outline
.item-input-error-message
,
10436 .aurora
.input-outline
.item-input-error-message
,
10437 .aurora
.item-input-outline
.input-error-message
,
10438 .aurora .input-outline .input-error-message {
10439 margin-bottom: calc
(-1 * var
(--f7-input-error-font-size
) * var
(--f7-input-error-line-height
));
10441 .aurora
.item-input-outline
.item-input-with-info
.item-input-wrap
,
10442 .aurora
.input-outline
.item-input-with-info
.item-input-wrap
,
10443 .aurora
.item-input-outline
.input-with-info
.item-input-wrap
,
10444 .aurora .input-outline.input-with-info .item-input-wrap {
10445 margin-bottom: calc
(var
(--f7-input-info-font-size
) * var
(--f7-input-info-line-height
));
10447 .aurora
.item-input-outline
.item-input-with-error-message
.item-input-wrap
,
10448 .aurora
.input-outline
.item-input-with-error-message
.item-input-wrap
,
10449 .aurora
.item-input-outline
.input-with-error-message
.item-input-wrap
,
10450 .aurora .input-outline.input-with-error-message .item-input-wrap {
10451 margin-bottom: calc
(var
(--f7-input-error-font-size
) * var
(--f7-input-error-line-height
));
10453 /* === Checkbox === */
10455 /* --f7-checkbox-active-color: var(--f7-theme-color); */
10456 --f7-checkbox-icon-color: #fff;
10460 --f7-checkbox-inactive-color: rgba
(255, 255, 255, 0.3);
10463 --f7-checkbox-size: 22px;
10464 --f7-checkbox-border-radius: 50%;
10465 --f7-checkbox-border-width: 1px;
10466 --f7-checkbox-inactive-color: #c7c7cc;
10467 --f7-checkbox-extra-margin: 0px;
10470 --f7-checkbox-size: 18px;
10471 --f7-checkbox-border-radius: 2px;
10472 --f7-checkbox-border-width: 2px;
10473 --f7-checkbox-inactive-color: #6d6d6d;
10474 --f7-checkbox-extra-margin: 22px;
10477 --f7-checkbox-size: 14px;
10478 --f7-checkbox-border-radius: 2px;
10479 --f7-checkbox-border-width: 1px;
10480 --f7-checkbox-inactive-color: #888;
10481 --f7-checkbox-extra-margin: 0px;
10484 position: relative
;
10485 display: inline-block
;
10486 vertical-align: middle
;
10488 background-color: transparent
;
10489 --f7-touch-ripple-color: rgba
(var
(--f7-theme-color-rgb
), 0.5);
10494 border: var
(--f7-checkbox-border-width
) solid var
(--f7-checkbox-inactive-color
);
10495 width: var
(--f7-checkbox-size
);
10496 height: var
(--f7-checkbox-size
);
10497 border-radius: var
(--f7-checkbox-border-radius
);
10498 box-sizing: border-box
;
10499 position: relative
;
10502 .icon-checkbox:after
,
10503 .checkbox i:after {
10504 font-family: 'framework7-core-icons';
10505 font-weight: normal
;
10506 font-style: normal
;
10508 letter-spacing: normal
;
10509 text-transform: none
;
10510 white-space: nowrap
;
10513 -webkit-font-smoothing: antialiased
;
10514 text-rendering: optimizeLegibility
;
10515 -moz-osx-font-smoothing: grayscale
;
10516 -moz-font-feature-settings: "liga";
10517 font-feature-settings: "liga";
10518 text-align: center
;
10523 width: var
(--f7-checkbox-size
);
10524 height: var
(--f7-checkbox-size
);
10525 line-height: var
(--f7-checkbox-size
);
10526 left: calc
(0px - var
(--f7-checkbox-border-width
));
10527 top: calc
(0px - var
(--f7-checkbox-border-width
));
10529 color: var
(--f7-checkbox-icon-color
);
10530 position: relative
;
10531 transition-property: opacity
;
10533 label
.item-checkbox input
[type
="checkbox"]:not
(:checked
) ~ .icon-checkbox:after
,
10534 label
.item-checkbox input
[type
="checkbox"]:not
(:checked
) ~ * .icon-checkbox:after
,
10535 .checkbox input[type="checkbox"]:not(:checked) ~ i:after {
10538 label
.item-checkbox input
[type
="checkbox"]:checked
~ .icon-checkbox
,
10539 label
.item-checkbox input
[type
="checkbox"]:checked
~ * .icon-checkbox
,
10540 .checkbox input
[type
="checkbox"]:checked
~ i
,
10541 label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ .icon-checkbox
,
10542 label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ * .icon-checkbox
,
10543 .checkbox input[type="checkbox"]:indeterminate ~ i {
10544 border-color: var
(--f7-checkbox-active-color
, var
(--f7-theme-color
));
10545 background-color: var
(--f7-checkbox-active-color
, var
(--f7-theme-color
));
10547 label
.item-checkbox input
[type
="checkbox"]:checked
~ .icon-checkbox:after
,
10548 label
.item-checkbox input
[type
="checkbox"]:checked
~ * .icon-checkbox:after
,
10549 .checkbox input
[type
="checkbox"]:checked
~ i:after
,
10550 label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ .icon-checkbox:after
,
10551 label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ * .icon-checkbox:after
,
10552 .checkbox input[type="checkbox"]:indeterminate ~ i:after {
10555 label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ .icon-checkbox:after
,
10556 label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ * .icon-checkbox:after
,
10557 .checkbox input[type="checkbox"]:indeterminate ~ i:after {
10560 position: absolute
;
10565 border-radius: 2px;
10570 label
.item-checkbox
,
10574 label
.item-checkbox input
[type
="checkbox"],
10575 .checkbox input
[type
="checkbox"],
10576 label
.item-checkbox input
[type
="radio"],
10577 .checkbox input[type="radio"] {
10580 label
.item-checkbox
{
10581 transition-duration: 300ms;
10583 label
.item-checkbox
.item-content
.item-media
,
10584 label
.item-checkbox
.item-content
.item-media
{
10585 align-self: center
;
10587 label
.item-checkbox
> .icon-checkbox
{
10588 margin-right: calc
(var
(--f7-list-item-media-margin
) + var
(--f7-checkbox-extra-margin
));
10590 label
.item-checkbox
.active-state
{
10591 background-color: var
(--f7-list-link-pressed-bg-color
);
10593 label
.item-checkbox
.active-state:after
{
10594 background-color: transparent
;
10596 label
.item-checkbox
.disabled
,
10597 .disabled label.item-checkbox {
10599 pointer-events: none
;
10600 opacity: 0.55 !important
;
10601 pointer-events: none
!important
;
10603 .ios
.icon-checkbox:after
,
10604 .ios .checkbox i:after {
10605 content: 'checkbox_ios';
10608 .ios label.item-checkbox.active-state {
10609 transition-duration: 0ms;
10611 .ios label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ .icon-checkbox:after
,
10612 .ios label
.item-checkbox input
[type
="checkbox"]:indeterminate
~ * .icon-checkbox:after
,
10613 .ios .checkbox input[type="checkbox"]:indeterminate ~ i:after {
10617 .md
.icon-checkbox
,
10619 transition-duration: 200ms;
10621 .md
.icon-checkbox:after
,
10622 .md .checkbox i:after {
10623 content: 'checkbox_md';
10624 transition-duration: 200ms;
10627 .md label.item-checkbox {
10628 position: relative
;
10632 .aurora
.icon-checkbox
,
10633 .aurora .checkbox i {
10634 transition-duration: 150ms;
10636 .aurora
.icon-checkbox:after
,
10637 .aurora .checkbox i:after {
10638 content: 'checkbox_aurora';
10639 transition-duration: 150ms;
10642 .aurora
.icon-checkbox:before
,
10643 .aurora .checkbox i:before {
10645 position: absolute
;
10650 background: rgba
(0, 0, 0, 0.1);
10652 transition-duration: 150ms;
10654 .aurora .checkbox.active-state i:before {
10657 .aurora label.item-checkbox {
10658 position: relative
;
10662 /* === Radio === */
10665 --f7-radio-active-color: var(--f7-theme-color);
10667 --f7-radio-border-radius: 50%;
10671 --f7-radio-inactive-color: rgba
(255, 255, 255, 0.3);
10674 --f7-radio-size: 22px;
10675 --f7-radio-border-width: 1px;
10676 --f7-radio-inactive-color: #c7c7cc;
10677 --f7-radio-extra-margin: 0px;
10680 --f7-radio-size: 20px;
10681 --f7-radio-border-width: 2px;
10682 --f7-radio-inactive-color: #6d6d6d;
10683 --f7-radio-extra-margin: 22px;
10686 --f7-radio-size: 16px;
10687 --f7-radio-border-width: 1px;
10688 --f7-radio-inactive-color: #888;
10689 --f7-radio-extra-margin: 0px;
10692 position: relative
;
10693 display: inline-block
;
10694 vertical-align: middle
;
10696 --f7-touch-ripple-color: rgba
(var
(--f7-theme-color-rgb
), 0.5);
10699 width: var
(--f7-radio-size
);
10700 height: var
(--f7-radio-size
);
10701 border-radius: var
(--f7-radio-border-radius
);
10702 position: relative
;
10703 box-sizing: border-box
;
10707 .radio
.icon-radio
,
10709 .aurora .icon-radio {
10710 border: var
(--f7-radio-border-width
) solid var
(--f7-radio-inactive-color
);
10716 label
.item-radio input
[type
="checkbox"],
10717 .radio input
[type
="checkbox"],
10718 label
.item-radio input
[type
="radio"],
10719 .radio input[type="radio"] {
10723 transition-duration: 300ms;
10725 label
.item-radio
.item-content
.item-media
,
10726 label
.item-radio
.item-content
.item-media
{
10727 align-self: center
;
10729 label
.item-radio
.active-state
{
10730 background-color: var
(--f7-list-link-pressed-bg-color
);
10732 label
.item-radio
.active-state:after
{
10733 background-color: transparent
;
10735 label
.item-radio
.disabled
,
10736 .disabled label.item-radio {
10738 pointer-events: none
;
10739 opacity: 0.55 !important
;
10740 pointer-events: none
!important
;
10742 .ios .icon-radio:after {
10743 font-family: 'framework7-core-icons';
10744 font-weight: normal
;
10745 font-style: normal
;
10747 letter-spacing: normal
;
10748 text-transform: none
;
10749 white-space: nowrap
;
10752 -webkit-font-smoothing: antialiased
;
10753 text-rendering: optimizeLegibility
;
10754 -moz-osx-font-smoothing: grayscale
;
10755 -moz-font-feature-settings: "liga";
10756 font-feature-settings: "liga";
10757 text-align: center
;
10761 width: calc
(var
(--f7-radio-size
) - var
(--f7-radio-border-width
) * 2);
10762 height: calc
(var
(--f7-radio-size
) - var
(--f7-radio-border-width
) * 2);
10763 line-height: calc
(var
(--f7-radio-size
) - var
(--f7-radio-border-width
) * 2 + 1px);
10765 content: 'radio_ios';
10766 color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10769 .ios label
.item-radio input
[type
="radio"]:checked
~ .icon-radio:after
,
10770 .ios label
.item-radio input
[type
="radio"]:checked
~ * .icon-radio:after
,
10771 .ios .radio input[type="radio"]:checked ~ .icon-radio:after {
10774 .ios .radio input[type="radio"]:checked ~ .icon-radio {
10775 border-color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10777 .ios label.item-radio input[type="radio"] ~ .icon-radio {
10778 position: absolute
;
10781 right: calc
(var
(--f7-safe-area-right
) + 10px);
10783 .ios label.item-radio .item-inner {
10784 padding-right: calc
(var
(--f7-safe-area-right
) + 35px);
10786 .ios label.item-radio.active-state {
10787 transition-duration: 0ms;
10790 transition-duration: 200ms;
10792 .md .icon-radio:after {
10794 position: absolute
;
10801 background-color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10802 border-radius: 50%;
10803 transform: scale
(0);
10804 transition-duration: 200ms;
10806 .md label
.item-radio input
[type
="radio"]:checked
~ .icon-radio
,
10807 .md label
.item-radio input
[type
="radio"]:checked
~ * .icon-radio
,
10808 .md .radio input[type="radio"]:checked ~ .icon-radio {
10809 border-color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10811 .md label
.item-radio input
[type
="radio"]:checked
~ .icon-radio:after
,
10812 .md label
.item-radio input
[type
="radio"]:checked
~ * .icon-radio:after
,
10813 .md .radio input[type="radio"]:checked ~ .icon-radio:after {
10814 background-color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10815 transform: scale
(1);
10817 .md label.item-radio {
10818 position: relative
;
10822 .md label.item-radio > .icon-radio {
10823 margin-right: calc
(var
(--f7-list-item-media-margin
) + var
(--f7-radio-extra-margin
));
10825 .aurora .icon-radio {
10826 transition-duration: 150ms;
10829 .aurora .icon-radio:after {
10831 position: absolute
;
10838 background-color: #fff;
10839 border-radius: 50%;
10840 transform: scale
(0);
10841 transition-duration: 150ms;
10843 .aurora .icon-radio:before {
10845 position: absolute
;
10850 background: rgba
(0, 0, 0, 0.1);
10852 transition-duration: 150ms;
10854 .aurora .radio.active-state i:before {
10857 .aurora label
.item-radio input
[type
="radio"]:checked
~ .icon-radio
,
10858 .aurora label
.item-radio input
[type
="radio"]:checked
~ * .icon-radio
,
10859 .aurora .radio input[type="radio"]:checked ~ .icon-radio {
10860 border-color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10861 background-color: var
(--f7-radio-active-color
, var
(--f7-theme-color
));
10863 .aurora label
.item-radio input
[type
="radio"]:checked
~ .icon-radio:after
,
10864 .aurora label
.item-radio input
[type
="radio"]:checked
~ * .icon-radio:after
,
10865 .aurora .radio input[type="radio"]:checked ~ .icon-radio:after {
10866 transform: scale
(1);
10868 .aurora label.item-radio {
10869 position: relative
;
10873 .aurora label.item-radio > .icon-radio {
10874 margin-right: calc
(var
(--f7-list-item-media-margin
) + var
(--f7-radio-extra-margin
));
10876 /* === Toggle === */
10878 --f7-toggle-handle-color: #fff;
10881 --f7-toggle-width: 52px;
10882 --f7-toggle-height: 32px;
10883 --f7-toggle-border-color: #e5e5e5;
10884 --f7-toggle-inactive-color: #fff;
10888 --f7-toggle-border-color: #555;
10889 --f7-toggle-inactive-color: #222;
10892 --f7-toggle-width: 36px;
10893 --f7-toggle-height: 14px;
10894 --f7-toggle-inactive-color: #b0afaf;
10898 --f7-toggle-inactive-color: #555;
10901 --f7-toggle-width: 40px;
10902 --f7-toggle-height: 20px;
10903 --f7-toggle-inactive-color: #aaa;
10905 .aurora
.theme-dark
,
10906 .aurora.theme-dark {
10907 --f7-toggle-inactive-color: #555;
10911 width: var
(--f7-toggle-width
);
10912 height: var
(--f7-toggle-height
);
10913 border-radius: var
(--f7-toggle-height
);
10916 display: inline-block
;
10917 vertical-align: middle
;
10918 position: relative
;
10919 box-sizing: border-box
;
10920 align-self: center
;
10921 -webkit-user-select: none
;
10922 -moz-user-select: none
;
10923 -ms-user-select: none
;
10926 .toggle input[type="checkbox"] {
10929 .toggle input[disabled] ~ .toggle-icon {
10930 pointer-events: none
;
10936 -webkit-appearance: none
;
10937 -moz-appearance: none
;
10940 position: relative
;
10942 box-sizing: border-box
;
10946 .toggle-icon:before
,
10947 .toggle-icon:after {
10949 will-change: transform
;
10951 .toggle-icon:after {
10952 background: var
(--f7-toggle-handle-color
);
10953 position: absolute
;
10955 transform: translateX
(0px);
10956 transition-duration: 300ms;
10958 .ios .toggle input[type="checkbox"]:checked + .toggle-icon {
10959 background: var
(--f7-toggle-active-color
, var
(--f7-theme-color
));
10961 .ios .toggle input[type="checkbox"]:checked + .toggle-icon:before {
10962 transform: scale
(0);
10964 .ios .toggle input[type="checkbox"]:checked + .toggle-icon:after {
10965 transform: translateX
(calc
(var
(--f7-toggle-width
) - var
(--f7-toggle-height
)));
10967 .ios .toggle-icon {
10968 background: var
(--f7-toggle-border-color
);
10970 .ios .toggle-icon:before {
10971 position: absolute
;
10974 width: calc
(var
(--f7-toggle-width
) - 4px);
10975 height: calc
(var
(--f7-toggle-height
) - 4px);
10976 border-radius: var
(--f7-toggle-height
);
10977 box-sizing: border-box
;
10978 background: var
(--f7-toggle-inactive-color
);
10980 transition-duration: 300ms;
10981 transform: scale
(1);
10983 .ios .toggle-icon:after {
10984 height: calc
(var
(--f7-toggle-height
) - 4px);
10985 width: calc
(var
(--f7-toggle-height
) - 4px);
10988 box-shadow: 0 2px 4px rgba
(0, 0, 0, 0.3);
10989 border-radius: calc
(var
(--f7-toggle-height
) - 4px);
10991 .ios .toggle-active-state input[type="checkbox"]:not(:checked) + .toggle-icon:before {
10992 transform: scale
(0);
10994 .ios .toggle-active-state input[type="checkbox"] + .toggle-icon:after {
10995 width: calc
(var
(--f7-toggle-height
) + 4px);
10997 .ios .toggle-active-state input[type="checkbox"]:checked + .toggle-icon:after {
10998 transform: translateX
(calc
(var
(--f7-toggle-width
) - var
(--f7-toggle-height
) - 8px));
11000 .md .toggle input[type="checkbox"]:checked + .toggle-icon {
11001 background: var
(--f7-toggle-active-color
, rgba
(var
(--f7-theme-color-rgb
), 0.5));
11003 .md .toggle input[type="checkbox"]:checked + .toggle-icon:after {
11004 transform: translateX
(calc
(var
(--f7-toggle-width
) - var
(--f7-toggle-height
) - 6px));
11005 background: var
(--f7-toggle-active-color
, var
(--f7-theme-color
));
11008 background: var
(--f7-toggle-inactive-color
);
11010 .md .toggle-icon:after {
11011 height: calc
(var
(--f7-toggle-height
) + 6px);
11012 width: calc
(var
(--f7-toggle-height
) + 6px);
11014 box-shadow: 0 2px 5px rgba
(0, 0, 0, 0.4);
11015 border-radius: var
(--f7-toggle-height
);
11018 .aurora .toggle input[type="checkbox"]:checked + .toggle-icon {
11019 background: var
(--f7-toggle-active-color
, var
(--f7-theme-color
));
11021 .aurora .toggle input[type="checkbox"]:checked + .toggle-icon:after {
11022 transform: translateX
(calc
(var
(--f7-toggle-width
) - var
(--f7-toggle-height
)));
11024 .aurora .toggle-icon {
11025 background: var
(--f7-toggle-inactive-color
);
11027 .aurora .toggle-icon:after {
11028 height: calc
(var
(--f7-toggle-height
) - 4px);
11029 width: calc
(var
(--f7-toggle-height
) - 4px);
11032 border-radius: calc
(var
(--f7-toggle-height
) - 4px);
11034 /* === Range Slider === */
11037 --f7-range-bar-active-bg-color: var(--f7-theme-color);
11039 --f7-range-scale-step-height: 5px;
11040 --f7-range-scale-text-color: #666;
11041 --f7-range-scale-substep-width: 1px;
11042 --f7-range-scale-substep-height: 4px;
11045 --f7-range-size: 28px;
11046 --f7-range-bar-bg-color: #b7b8b7;
11047 --f7-range-bar-size: 1px;
11048 --f7-range-bar-border-radius: 2px;
11049 --f7-range-knob-size: 28px;
11050 --f7-range-knob-color: #fff;
11051 --f7-range-knob-box-shadow: 0 2px 4px rgba
(0, 0, 0, 0.3);
11052 --f7-range-label-size: 20px;
11053 --f7-range-label-text-color: #000;
11054 --f7-range-label-bg-color: #fff;
11055 --f7-range-label-font-size: 12px;
11056 --f7-range-label-font-weight: normal
;
11057 --f7-range-label-border-radius: 5px;
11058 --f7-range-label-padding: 0px;
11060 --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
11062 --f7-range-scale-step-width: 1px;
11063 --f7-range-scale-font-size: 12px;
11064 --f7-range-scale-font-weight: 400;
11065 --f7-range-scale-label-offset: 4px;
11067 --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
11071 --f7-range-size: 20px;
11072 --f7-range-bar-bg-color: #b9b9b9;
11073 --f7-range-bar-size: 2px;
11074 --f7-range-bar-border-radius: 0px;
11075 --f7-range-knob-size: 12px;
11077 --f7-range-knob-color: var(--f7-theme-color);
11079 --f7-range-knob-box-shadow: none
;
11080 --f7-range-label-size: 26px;
11081 --f7-range-label-font-weight: normal
;
11082 --f7-range-label-text-color: #fff;
11084 --f7-range-label-bg-color: var(--f7-theme-color);
11086 --f7-range-label-font-size: 10px;
11087 --f7-range-label-border-radius: 50%;
11088 --f7-range-label-padding: 0px;
11090 --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
11092 --f7-range-scale-step-width: 2px;
11093 --f7-range-scale-font-size: 12px;
11094 --f7-range-scale-font-weight: 400;
11095 --f7-range-scale-label-offset: 4px;
11097 --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
11101 --f7-range-size: 20px;
11102 --f7-range-bar-bg-color: #c7c7c7;
11103 --f7-range-bar-size: 2px;
11104 --f7-range-bar-border-radius: 2px;
11105 --f7-range-knob-size: 16px;
11107 --f7-range-knob-color: var(--f7-theme-color);
11109 --f7-range-knob-box-shadow: none
;
11110 --f7-range-label-size: 20px;
11111 --f7-range-label-text-color: #fff;
11113 --f7-range-label-bg-color: var(--f7-theme-color);
11115 --f7-range-label-font-size: 10px;
11116 --f7-range-label-font-weight: 600;
11117 --f7-range-label-border-radius: 4px;
11118 --f7-range-label-padding: 0px 4px;
11120 --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
11122 --f7-range-scale-step-width: 2px;
11123 --f7-range-scale-font-size: 11px;
11124 --f7-range-scale-font-weight: 500;
11125 --f7-range-scale-label-offset: 2px;
11127 --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
11132 position: relative
;
11133 align-self: center
;
11135 -webkit-user-select: none
;
11136 -moz-user-select: none
;
11137 -ms-user-select: none
;
11140 .range-slider input[type="range"] {
11143 .range-slider.range-slider-horizontal {
11145 height: var
(--f7-range-size
);
11147 .range-slider.range-slider-vertical {
11149 width: var
(--f7-range-size
);
11152 position: absolute
;
11154 background: var
(--f7-range-bar-bg-color
);
11155 border-radius: var
(--f7-range-bar-border-radius
);
11157 .range-slider-vertical .range-bar {
11161 width: var
(--f7-range-bar-size
);
11162 margin-left: calc
(-1 * var
(--f7-range-bar-size
) / 2);
11164 .range-slider-horizontal .range-bar {
11168 height: var
(--f7-range-bar-size
);
11169 margin-top: calc
(-1 * var
(--f7-range-bar-size
) / 2);
11171 .range-bar-active {
11172 position: absolute
;
11173 background: var
(--f7-range-bar-active-bg-color
, var
(--f7-theme-color
));
11175 .range-slider-horizontal .range-bar-active {
11180 .range-slider-vertical .range-bar-active {
11185 .range-slider-vertical-reversed .range-bar-active {
11191 position: absolute
;
11192 height: var
(--f7-range-knob-size
);
11193 width: var
(--f7-range-knob-size
);
11195 .range-slider-horizontal .range-knob-wrap {
11197 margin-top: calc
(-1 * var
(--f7-range-knob-size
) / 2);
11198 margin-left: calc
(-1 * var
(--f7-range-knob-size
) / 2);
11201 .range-slider-vertical .range-knob-wrap {
11203 margin-left: calc
(-1 * var
(--f7-range-knob-size
) / 2);
11205 margin-bottom: calc
(-1 * var
(--f7-range-knob-size
) / 2);
11207 .range-slider-vertical-reversed .range-knob-wrap {
11211 margin-top: calc
(-1 * var
(--f7-range-knob-size
) / 2);
11214 box-sizing: border-box
;
11215 border-radius: 50%;
11216 position: absolute
;
11222 background: var
(--f7-range-knob-color
, var
(--f7-range-knob-bg-color
, var
(--f7-theme-color
)));
11223 box-shadow: var
(--f7-range-knob-box-shadow
);
11225 .range-knob:after {
11227 position: absolute
;
11232 margin-left: -22px;
11235 .range-knob-label {
11236 position: absolute
;
11239 text-align: center
;
11240 transition-duration: 120ms;
11241 transition-property: transform
;
11242 box-sizing: border-box
;
11243 transform: translateY
(100%) scale
(0);
11244 height: var
(--f7-range-label-size
);
11245 line-height: var
(--f7-range-label-size
);
11246 min-width: var
(--f7-range-label-size
);
11247 color: var
(--f7-range-label-text-color
);
11248 background-color: var
(--f7-range-label-bg-color
, var
(--f7-theme-color
));
11249 font-size: var
(--f7-range-label-font-size
);
11250 font-weight: var
(--f7-range-label-font-weight
);
11251 border-radius: var
(--f7-range-label-border-radius
);
11252 padding: var
(--f7-range-label-padding
);
11254 .range-knob-active-state .range-knob-label {
11255 transform: translateY
(0%) scale
(1);
11258 position: absolute
;
11260 .range-slider-horizontal .range-scale {
11264 margin-top: calc
(var
(--f7-range-bar-size
) / 2);
11266 .range-slider-vertical .range-scale {
11270 margin-right: calc
(var
(--f7-range-bar-size
) / 2);
11272 .range-scale-step {
11273 position: absolute
;
11274 box-sizing: border-box
;
11276 font-size: var
(--f7-range-scale-font-size
);
11277 font-weight: var
(--f7-range-scale-font-weight
);
11278 color: var
(--f7-range-scale-text-color
, var
(--f7-range-bar-bg-color
));
11281 .range-scale-step:before {
11283 position: absolute
;
11284 background: var
(--f7-range-scale-step-bg-color
, var
(--f7-range-bar-bg-color
));
11286 .range-slider-horizontal .range-scale-step {
11287 justify-content: center
;
11288 align-items: flex-start
;
11289 width: var
(--f7-range-scale-step-width
);
11290 height: var
(--f7-range-scale-step-height
);
11291 padding-top: calc
(var
(--f7-range-scale-step-height
) + var
(--f7-range-scale-label-offset
));
11293 margin-left: calc
(-1 * var
(--f7-range-scale-step-width
) / 2);
11295 .range-slider-horizontal .range-scale-step:before {
11299 height: var
(--f7-range-scale-step-height
);
11301 .range-slider-horizontal .range-scale-step:first-child {
11304 .range-slider-horizontal .range-scale-step:last-child {
11305 margin-left: calc
(-1 * var
(--f7-range-scale-step-width
));
11307 .range-slider-vertical .range-scale-step {
11309 justify-content: flex-end
;
11310 align-items: center
;
11311 height: var
(--f7-range-scale-step-width
);
11312 width: var
(--f7-range-scale-step-height
);
11313 padding-right: calc
(var
(--f7-range-scale-step-height
) + var
(--f7-range-scale-label-offset
));
11315 margin-bottom: calc
(-1 * var
(--f7-range-scale-step-width
) / 2);
11317 .range-slider-vertical .range-scale-step:first-child {
11320 .range-slider-vertical .range-scale-step:last-child {
11321 margin-bottom: calc
(-1 * var
(--f7-range-scale-step-width
));
11323 .range-slider-vertical .range-scale-step:before {
11327 width: var
(--f7-range-scale-step-height
);
11329 .range-scale-substep {
11330 --f7-range-scale-step-bg-color: var
(--f7-range-scale-substep-bg-color
, var
(--f7-range-bar-bg-color
));
11331 --f7-range-scale-step-width: var
(--f7-range-scale-substep-width
);
11332 --f7-range-scale-step-height: var
(--f7-range-scale-substep-height
);
11334 .ios .range-knob-label {
11335 margin-bottom: 6px;
11336 transform: translateX
(-50%) translateY
(100%) scale
(0);
11338 .ios .range-knob-active-state .range-knob-label {
11339 transform: translateX
(-50%) translateY
(0%) scale
(1);
11342 transition-duration: 200ms;
11343 transition-property: transform
, background-color
;
11345 .md .range-knob-active-state .range-knob {
11346 transform: scale
(1.5);
11348 .md .range-slider-min:not(.range-slider-dual) .range-knob {
11349 background: #fff !important
;
11350 border: 2px solid var
(--f7-range-bar-bg-color
);
11352 .md .range-knob-label {
11353 width: var
(--f7-range-label-size
);
11354 margin-left: calc
(-1 * var
(--f7-range-label-size
) / 2);
11355 margin-bottom: 8px;
11357 .md .range-knob-label:before {
11361 margin-left: calc
(-1 * var
(--f7-range-label-size
) / 2);
11362 position: absolute
;
11364 width: var
(--f7-range-label-size
);
11365 height: var
(--f7-range-label-size
);
11366 background: var
(--f7-range-label-bg-color
, var
(--f7-theme-color
));
11367 transform: rotate
(-45deg);
11368 border-radius: 50% 50% 50% 0;
11370 .md .range-knob-active-state .range-knob-label {
11371 transform: translateY
(0%) scale
(1);
11373 .md .range-slider-label .range-knob-active-state .range-knob {
11374 transform: scale
(0);
11376 .aurora .range-knob-label {
11377 margin-bottom: 6px;
11378 transform: translateX
(-50%) translateY
(100%) scale
(0);
11380 .aurora .range-knob-active-state .range-knob-label {
11381 transform: translateX
(-50%) translateY
(0%) scale
(1);
11383 /* === Stepper === */
11386 --f7-stepper-button-text-color: var(--f7-theme-color);
11387 --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
11388 --f7-stepper-value-text-color: var(--f7-theme-color);
11390 --f7-stepper-fill-button-text-color: #fff;
11392 --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
11394 --f7-stepper-raised-box-shadow: 0 1px 3px rgba
(0, 0, 0, 0.12), 0 1px 2px rgba
(0,0,0,0.24);
11397 --f7-stepper-height: 29px;
11398 --f7-stepper-border-radius: 5px;
11400 --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
11401 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
11403 --f7-stepper-border-width: 1px;
11404 --f7-stepper-large-height: 44px;
11405 --f7-stepper-small-height: 26px;
11406 --f7-stepper-small-border-width: 2px;
11407 --f7-stepper-value-font-size: 17px;
11408 --f7-stepper-value-font-weight: 400;
11411 --f7-stepper-height: 36px;
11412 --f7-stepper-border-radius: 4px;
11413 --f7-stepper-button-pressed-bg-color: rgba
(0, 0, 0, 0.1);
11415 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
11417 --f7-stepper-border-width: 2px;
11418 --f7-stepper-large-height: 48px;
11419 --f7-stepper-small-border-width: 2px;
11420 --f7-stepper-small-height: 28px;
11421 --f7-stepper-value-font-size: 14px;
11422 --f7-stepper-value-font-weight: 500;
11426 --f7-stepper-button-pressed-bg-color: rgba
(255, 255, 255, 0.1);
11430 --f7-stepper-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
11431 --f7-stepper-button-fill-hover-bg-color: var(--f7-theme-color-tint);
11433 --f7-stepper-height: 28px;
11434 --f7-stepper-border-radius: 4px;
11436 --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
11437 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
11439 --f7-stepper-border-width: 2px;
11440 --f7-stepper-large-height: 34px;
11441 --f7-stepper-small-border-width: 1px;
11442 --f7-stepper-small-height: 22px;
11443 --f7-stepper-value-font-size: 14px;
11444 --f7-stepper-value-font-weight: 500;
11447 display: inline-flex
;
11448 align-items: stretch
;
11449 height: var
(--f7-stepper-height
);
11450 border-radius: var
(--f7-stepper-border-radius
);
11453 .stepper-button-minus
,
11454 .stepper-button-plus {
11455 background-color: var
(--f7-stepper-button-bg-color
);
11457 border-radius: var
(--f7-stepper-border-radius
);
11458 border: var
(--f7-stepper-border-width
) solid var
(--f7-theme-color
);
11459 color: var
(--f7-stepper-button-text-color
, var
(--f7-theme-color
));
11460 line-height: calc
(var
(--f7-stepper-height
) - var
(--f7-stepper-border-width
, 0px));
11461 text-align: center
;
11463 justify-content: center
;
11464 align-content: center
;
11465 align-items: center
;
11467 box-sizing: border-box
;
11468 position: relative
;
11471 .stepper-button
.active-state
,
11472 .stepper-button-minus
.active-state
,
11473 .stepper-button-plus.active-state {
11474 background-color: var
(--f7-stepper-button-pressed-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.15));
11475 color: var
(--f7-stepper-button-pressed-text-color
, var
(--f7-stepper-button-text-color
, var
(--f7-theme-color
)));
11477 .stepper-button:first-child
,
11478 .stepper-button-minus:first-child
,
11479 .stepper-button-plus:first-child {
11480 border-radius: var
(--f7-stepper-border-radius
) 0 0 var
(--f7-stepper-border-radius
);
11482 .stepper-button:last-child
,
11483 .stepper-button-minus:last-child
,
11484 .stepper-button-plus:last-child {
11485 border-radius: 0 var
(--f7-stepper-border-radius
) var
(--f7-stepper-border-radius
) 0;
11487 .stepper-button
.icon
,
11488 .stepper-button-minus
.icon
,
11489 .stepper-button-plus .icon {
11490 pointer-events: none
;
11492 .stepper-button
+ .stepper-button
,
11493 .stepper-button-minus
+ .stepper-button
,
11494 .stepper-button-plus
+ .stepper-button
,
11495 .stepper-button
+ .stepper-button-minus
,
11496 .stepper-button-minus
+ .stepper-button-minus
,
11497 .stepper-button-plus
+ .stepper-button-minus
,
11498 .stepper-button
+ .stepper-button-plus
,
11499 .stepper-button-minus
+ .stepper-button-plus
,
11500 .stepper-button-plus + .stepper-button-plus {
11503 .stepper-button-plus
,
11504 .stepper-button-minus {
11505 -webkit-user-select: none
;
11506 -moz-user-select: none
;
11507 -ms-user-select: none
;
11510 .stepper-button-plus:after
,
11511 .stepper-button-minus:after
,
11512 .stepper-button-plus:before
,
11513 .stepper-button-minus:before {
11515 position: absolute
;
11518 transform: translate
(-50%, -50%);
11519 background-color: var
(--f7-stepper-button-text-color
, var
(--f7-theme-color
));
11521 .stepper-button-plus:after
,
11522 .stepper-button-minus:after {
11526 .stepper-button-plus:before {
11532 align-content: center
;
11533 align-items: center
;
11534 justify-content: center
;
11536 .stepper-input-wrap
,
11539 text-align: center
;
11540 border-top: var
(--f7-stepper-border-width
) solid var
(--f7-theme-color
);
11541 border-bottom: var
(--f7-stepper-border-width
) solid var
(--f7-theme-color
);
11543 .stepper
.stepper-input-wrap input
,
11546 color: var
(--f7-stepper-value-text-color
, var
(--f7-theme-color
));
11547 font-size: var
(--f7-stepper-value-font-size
);
11548 font-weight: var
(--f7-stepper-value-font-weight
);
11549 text-align: center
;
11551 .stepper .stepper-input-wrap input {
11555 .ios
.stepper-round-ios
,
11556 .md
.stepper-round-md
,
11557 .aurora .stepper-round-aurora {
11558 --f7-stepper-border-radius: var
(--f7-stepper-height
);
11561 .ios
.stepper-fill-ios
,
11562 .md
.stepper-fill-md
,
11563 .aurora .stepper-fill-aurora {
11564 --f7-stepper-button-bg-color: var
(--f7-stepper-fill-button-bg-color
, var
(--f7-theme-color
));
11565 --f7-stepper-button-text-color: var
(--f7-stepper-fill-button-text-color
);
11566 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
11568 .stepper-fill
.stepper-button
+ .stepper-button
,
11569 .ios
.stepper-fill-ios
.stepper-button
+ .stepper-button
,
11570 .md
.stepper-fill-md
.stepper-button
+ .stepper-button
,
11571 .aurora
.stepper-fill-aurora
.stepper-button
+ .stepper-button
,
11572 .stepper-raised
.stepper-button
+ .stepper-button
,
11573 .ios
.stepper-raised-ios
.stepper-button
+ .stepper-button
,
11574 .md
.stepper-raised-md
.stepper-button
+ .stepper-button
,
11575 .aurora
.stepper-raised-aurora
.stepper-button
+ .stepper-button
,
11576 .stepper-fill
.stepper-button-minus
+ .stepper-button-plus
,
11577 .ios
.stepper-fill-ios
.stepper-button-minus
+ .stepper-button-plus
,
11578 .md
.stepper-fill-md
.stepper-button-minus
+ .stepper-button-plus
,
11579 .aurora
.stepper-fill-aurora
.stepper-button-minus
+ .stepper-button-plus
,
11580 .stepper-raised
.stepper-button-minus
+ .stepper-button-plus
,
11581 .ios
.stepper-raised-ios
.stepper-button-minus
+ .stepper-button-plus
,
11582 .md
.stepper-raised-md
.stepper-button-minus
+ .stepper-button-plus
,
11583 .aurora .stepper-raised-aurora .stepper-button-minus + .stepper-button-plus {
11584 border-left: 1px solid rgba
(0, 0, 0, 0.1);
11586 .stepper-fill
.stepper-button
+ .stepper-button
.active-state
,
11587 .ios
.stepper-fill-ios
.stepper-button
+ .stepper-button
.active-state
,
11588 .md
.stepper-fill-md
.stepper-button
+ .stepper-button
.active-state
,
11589 .aurora
.stepper-fill-aurora
.stepper-button
+ .stepper-button
.active-state
,
11590 .stepper-fill
.stepper-button-minus
+ .stepper-button-plus
.active-state
,
11591 .ios
.stepper-fill-ios
.stepper-button-minus
+ .stepper-button-plus
.active-state
,
11592 .md
.stepper-fill-md
.stepper-button-minus
+ .stepper-button-plus
.active-state
,
11593 .aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus.active-state {
11594 border-left-color: var
(--f7-stepper-button-pressed-bg-color
);
11596 .stepper-raised:not
(.stepper-fill
) .stepper-input-wrap
,
11597 .ios
.stepper-raised-ios:not
(.stepper-fill-ios
):not
(.stepper-fill
) .stepper-input-wrap
,
11598 .md
.stepper-raised-md:not
(.stepper-fill-md
):not
(.stepper-fill
) .stepper-input-wrap
,
11599 .aurora
.stepper-raised-aurora:not
(.stepper-fill-aurora
):not
(.stepper-fill
) .stepper-input-wrap
,
11600 .stepper-raised:not
(.stepper-fill
) .stepper-value
,
11601 .ios
.stepper-raised-ios:not
(.stepper-fill-ios
):not
(.stepper-fill
) .stepper-value
,
11602 .md
.stepper-raised-md:not
(.stepper-fill-md
):not
(.stepper-fill
) .stepper-value
,
11603 .aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-value {
11604 border-left: 1px solid rgba
(0, 0, 0, 0.1);
11605 border-right: 1px solid rgba
(0, 0, 0, 0.1);
11608 .ios
.stepper-large-ios
,
11609 .md
.stepper-large-md
,
11610 .aurora .stepper-large-aurora {
11611 --f7-stepper-height: var
(--f7-stepper-large-height
);
11614 .ios
.stepper-small-ios
,
11615 .md
.stepper-small-md
,
11616 .aurora .stepper-small-aurora {
11617 --f7-stepper-border-width: var
(--f7-stepper-small-border-width
);
11618 --f7-stepper-height: var
(--f7-stepper-small-height
);
11620 .ios
.stepper-fill
.stepper-small-ios
,
11621 .ios .stepper-fill.stepper-small {
11622 --f7-stepper-button-pressed-bg-color: transparent
;
11623 --f7-stepper-button-pressed-text-color: var
(--f7-theme-color
);
11626 .ios
.stepper-raised-ios
,
11627 .md
.stepper-raised-md
,
11628 .aurora .stepper-raised-aurora {
11629 --f7-stepper-border-width: 0;
11630 box-shadow: var
(--f7-stepper-raised-box-shadow
);
11632 .ios
.stepper-button
.f7-icons
,
11633 .ios
.stepper-button-minus
.f7-icons
,
11634 .ios .stepper-button-plus .f7-icons {
11637 .ios
.stepper-fill
,
11638 .ios .stepper-fill-ios {
11639 --f7-stepper-button-pressed-bg-color: var
(--f7-stepper-fill-button-pressed-bg-color
, var
(--f7-theme-color-tint
));
11641 .ios
.stepper-small
.stepper-raised
,
11642 .ios
.stepper-small-ios
.stepper-raised
,
11643 .ios
.stepper-small
.stepper-raised-ios
,
11644 .ios .stepper-small-ios.stepper-raised-ios {
11645 --f7-stepper-border-width: 0px;
11647 .ios
.stepper-small
.stepper-button
,
11648 .ios
.stepper-small-ios
.stepper-button
,
11649 .ios
.stepper-small
.stepper-button-minus
,
11650 .ios
.stepper-small-ios
.stepper-button-minus
,
11651 .ios
.stepper-small
.stepper-button-plus
,
11652 .ios .stepper-small-ios .stepper-button-plus {
11653 transition-duration: 200ms;
11655 .ios
.stepper-small
.stepper-button
.active-state:after
,
11656 .ios
.stepper-small-ios
.stepper-button
.active-state:after
,
11657 .ios
.stepper-small
.stepper-button-minus
.active-state:after
,
11658 .ios
.stepper-small-ios
.stepper-button-minus
.active-state:after
,
11659 .ios
.stepper-small
.stepper-button-plus
.active-state:after
,
11660 .ios
.stepper-small-ios
.stepper-button-plus
.active-state:after
,
11661 .ios
.stepper-small
.stepper-button
.active-state:before
,
11662 .ios
.stepper-small-ios
.stepper-button
.active-state:before
,
11663 .ios
.stepper-small
.stepper-button-minus
.active-state:before
,
11664 .ios
.stepper-small-ios
.stepper-button-minus
.active-state:before
,
11665 .ios
.stepper-small
.stepper-button-plus
.active-state:before
,
11666 .ios .stepper-small-ios .stepper-button-plus.active-state:before {
11667 transition-duration: 200ms;
11668 background-color: var
(--f7-theme-color
);
11670 .md
.stepper-button
,
11671 .md
.stepper-button-minus
,
11672 .md .stepper-button-plus {
11673 transition-duration: 300ms;
11674 transform: translate3d
(0, 0, 0);
11678 .md .stepper-fill-md {
11679 --f7-stepper-button-pressed-bg-color: var
(--f7-stepper-fill-button-pressed-bg-color
, var
(--f7-theme-color-shade
));
11681 .aurora
.stepper-button
,
11682 .aurora
.stepper-button-minus
,
11683 .aurora .stepper-button-plus {
11684 transition-duration: 100ms;
11685 transform: translate3d
(0, 0, 0);
11688 .aurora
.device-desktop
.stepper-button:not
(.active-state
):not
(.no-hover
):hover
,
11689 .aurora
.device-desktop
.stepper-button-minus:not
(.active-state
):not
(.no-hover
):hover
,
11690 .aurora.device-desktop .stepper-button-plus:not(.active-state):not(.no-hover):hover {
11691 background-color: var
(--f7-stepper-button-hover-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.07));
11693 .aurora
.stepper-fill
,
11694 .aurora .stepper-fill-aurora {
11695 --f7-stepper-button-hover-bg-color: var
(--f7-stepper-button-fill-hover-bg-color
, var
(--f7-theme-color-tint
));
11696 --f7-stepper-button-pressed-bg-color: var
(--f7-stepper-fill-button-pressed-bg-color
, var
(--f7-theme-color-shade
));
11698 /* === Smart Select === */
11699 .smart-select :root {
11701 --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
11702 --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
11705 .smart-select select {
11708 .smart-select .item-after {
11711 text-overflow: ellipsis
;
11712 position: relative
;
11715 .smart-select-sheet
.page
,
11716 .smart-select-sheet
.sheet-modal-inner
,
11717 .smart-select-sheet .list ul {
11718 background: var
(--f7-smart-select-sheet-bg
, var
(--f7-list-bg-color
));
11720 .smart-select-sheet .toolbar:after {
11722 position: absolute
;
11723 background-color: var
(--f7-smart-select-sheet-toolbar-border-color
, var
(--f7-bars-border-color
));
11732 transform-origin: 50% 100%;
11733 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
11735 .smart-select-sheet .toolbar:after {
11738 .smart-select-sheet .list {
11741 .smart-select-sheet .list ul:before {
11742 display: none
!important
;
11744 .smart-select-sheet .list ul:after {
11745 display: none
!important
;
11747 .smart-select-popover .popover-inner {
11752 --f7-grid-gap: 15px;
11755 --f7-grid-gap: 16px;
11758 --f7-grid-gap: 15px;
11762 justify-content: space-between
;
11764 align-items: flex-start
;
11765 --f7-cols-per-row: 1;
11767 .row
> [class
*="col-"],
11769 box-sizing: border-box
;
11770 width: calc
((100% - var
(--f7-grid-gap
) * (var
(--f7-cols-per-row
) - 1)) / var
(--f7-cols-per-row
));
11773 --f7-grid-gap: 0px;
11776 --f7-cols-per-row: 20;
11779 --f7-cols-per-row: 10;
11782 --f7-cols-per-row: 6.66666667;
11785 --f7-cols-per-row: 5;
11788 --f7-cols-per-row: 4;
11791 --f7-cols-per-row: 3.33333333;
11794 --f7-cols-per-row: 3;
11797 --f7-cols-per-row: 2.85714286;
11800 --f7-cols-per-row: 2.5;
11803 --f7-cols-per-row: 2.22222222;
11806 --f7-cols-per-row: 2;
11809 --f7-cols-per-row: 1.81818182;
11812 --f7-cols-per-row: 1.66666667;
11815 --f7-cols-per-row: 1.53846154;
11818 --f7-cols-per-row: 1.5;
11821 --f7-cols-per-row: 1.42857143;
11824 --f7-cols-per-row: 1.33333333;
11827 --f7-cols-per-row: 1.25;
11830 --f7-cols-per-row: 1.17647059;
11833 --f7-cols-per-row: 1.11111111;
11836 --f7-cols-per-row: 1.05263158;
11839 --f7-cols-per-row: 1;
11841 .row
.col:nth-last-child
(1),
11842 .row .col:nth-last-child(1) ~ .col {
11843 --f7-cols-per-row: 1;
11845 .row
.col:nth-last-child
(2),
11846 .row .col:nth-last-child(2) ~ .col {
11847 --f7-cols-per-row: 2;
11849 .row
.col:nth-last-child
(3),
11850 .row .col:nth-last-child(3) ~ .col {
11851 --f7-cols-per-row: 3;
11853 .row
.col:nth-last-child
(4),
11854 .row .col:nth-last-child(4) ~ .col {
11855 --f7-cols-per-row: 4;
11857 .row
.col:nth-last-child
(5),
11858 .row .col:nth-last-child(5) ~ .col {
11859 --f7-cols-per-row: 5;
11861 .row
.col:nth-last-child
(6),
11862 .row .col:nth-last-child(6) ~ .col {
11863 --f7-cols-per-row: 6;
11865 .row
.col:nth-last-child
(7),
11866 .row .col:nth-last-child(7) ~ .col {
11867 --f7-cols-per-row: 7;
11869 .row
.col:nth-last-child
(8),
11870 .row .col:nth-last-child(8) ~ .col {
11871 --f7-cols-per-row: 8;
11873 .row
.col:nth-last-child
(9),
11874 .row .col:nth-last-child(9) ~ .col {
11875 --f7-cols-per-row: 9;
11877 .row
.col:nth-last-child
(10),
11878 .row .col:nth-last-child(10) ~ .col {
11879 --f7-cols-per-row: 10;
11881 .row
.col:nth-last-child
(11),
11882 .row .col:nth-last-child(11) ~ .col {
11883 --f7-cols-per-row: 11;
11885 .row
.col:nth-last-child
(12),
11886 .row .col:nth-last-child(12) ~ .col {
11887 --f7-cols-per-row: 12;
11889 .row
.col:nth-last-child
(13),
11890 .row .col:nth-last-child(13) ~ .col {
11891 --f7-cols-per-row: 13;
11893 .row
.col:nth-last-child
(14),
11894 .row .col:nth-last-child(14) ~ .col {
11895 --f7-cols-per-row: 14;
11897 .row
.col:nth-last-child
(15),
11898 .row .col:nth-last-child(15) ~ .col {
11899 --f7-cols-per-row: 15;
11901 .row
.col:nth-last-child
(16),
11902 .row .col:nth-last-child(16) ~ .col {
11903 --f7-cols-per-row: 16;
11905 .row
.col:nth-last-child
(17),
11906 .row .col:nth-last-child(17) ~ .col {
11907 --f7-cols-per-row: 17;
11909 .row
.col:nth-last-child
(18),
11910 .row .col:nth-last-child(18) ~ .col {
11911 --f7-cols-per-row: 18;
11913 .row
.col:nth-last-child
(19),
11914 .row .col:nth-last-child(19) ~ .col {
11915 --f7-cols-per-row: 19;
11917 .row
.col:nth-last-child
(20),
11918 .row .col:nth-last-child(20) ~ .col {
11919 --f7-cols-per-row: 20;
11921 .row
.col:nth-last-child
(21),
11922 .row .col:nth-last-child(21) ~ .col {
11923 --f7-cols-per-row: 21;
11925 .row
.col:nth-last-child
(22),
11926 .row .col:nth-last-child(22) ~ .col {
11927 --f7-cols-per-row: 22;
11929 @media (min-width: 768px) {
11931 --f7-cols-per-row: 20;
11934 --f7-cols-per-row: 10;
11937 --f7-cols-per-row: 6.66666667;
11940 --f7-cols-per-row: 5;
11943 --f7-cols-per-row: 4;
11946 --f7-cols-per-row: 3.33333333;
11949 --f7-cols-per-row: 3;
11952 --f7-cols-per-row: 2.85714286;
11955 --f7-cols-per-row: 2.5;
11958 --f7-cols-per-row: 2.22222222;
11961 --f7-cols-per-row: 2;
11964 --f7-cols-per-row: 1.81818182;
11967 --f7-cols-per-row: 1.66666667;
11970 --f7-cols-per-row: 1.53846154;
11973 --f7-cols-per-row: 1.5;
11976 --f7-cols-per-row: 1.42857143;
11979 --f7-cols-per-row: 1.33333333;
11982 --f7-cols-per-row: 1.25;
11985 --f7-cols-per-row: 1.17647059;
11988 --f7-cols-per-row: 1.11111111;
11991 --f7-cols-per-row: 1.05263158;
11994 --f7-cols-per-row: 1;
11996 .row
.tablet-auto:nth-last-child
(1),
11997 .row .tablet-auto:nth-last-child(1) ~ .tablet-auto {
11998 --f7-cols-per-row: 1;
12000 .row
.tablet-auto:nth-last-child
(2),
12001 .row .tablet-auto:nth-last-child(2) ~ .tablet-auto {
12002 --f7-cols-per-row: 2;
12004 .row
.tablet-auto:nth-last-child
(3),
12005 .row .tablet-auto:nth-last-child(3) ~ .tablet-auto {
12006 --f7-cols-per-row: 3;
12008 .row
.tablet-auto:nth-last-child
(4),
12009 .row .tablet-auto:nth-last-child(4) ~ .tablet-auto {
12010 --f7-cols-per-row: 4;
12012 .row
.tablet-auto:nth-last-child
(5),
12013 .row .tablet-auto:nth-last-child(5) ~ .tablet-auto {
12014 --f7-cols-per-row: 5;
12016 .row
.tablet-auto:nth-last-child
(6),
12017 .row .tablet-auto:nth-last-child(6) ~ .tablet-auto {
12018 --f7-cols-per-row: 6;
12020 .row
.tablet-auto:nth-last-child
(7),
12021 .row .tablet-auto:nth-last-child(7) ~ .tablet-auto {
12022 --f7-cols-per-row: 7;
12024 .row
.tablet-auto:nth-last-child
(8),
12025 .row .tablet-auto:nth-last-child(8) ~ .tablet-auto {
12026 --f7-cols-per-row: 8;
12028 .row
.tablet-auto:nth-last-child
(9),
12029 .row .tablet-auto:nth-last-child(9) ~ .tablet-auto {
12030 --f7-cols-per-row: 9;
12032 .row
.tablet-auto:nth-last-child
(10),
12033 .row .tablet-auto:nth-last-child(10) ~ .tablet-auto {
12034 --f7-cols-per-row: 10;
12036 .row
.tablet-auto:nth-last-child
(11),
12037 .row .tablet-auto:nth-last-child(11) ~ .tablet-auto {
12038 --f7-cols-per-row: 11;
12040 .row
.tablet-auto:nth-last-child
(12),
12041 .row .tablet-auto:nth-last-child(12) ~ .tablet-auto {
12042 --f7-cols-per-row: 12;
12044 .row
.tablet-auto:nth-last-child
(13),
12045 .row .tablet-auto:nth-last-child(13) ~ .tablet-auto {
12046 --f7-cols-per-row: 13;
12048 .row
.tablet-auto:nth-last-child
(14),
12049 .row .tablet-auto:nth-last-child(14) ~ .tablet-auto {
12050 --f7-cols-per-row: 14;
12052 .row
.tablet-auto:nth-last-child
(15),
12053 .row .tablet-auto:nth-last-child(15) ~ .tablet-auto {
12054 --f7-cols-per-row: 15;
12056 .row
.tablet-auto:nth-last-child
(16),
12057 .row .tablet-auto:nth-last-child(16) ~ .tablet-auto {
12058 --f7-cols-per-row: 16;
12060 .row
.tablet-auto:nth-last-child
(17),
12061 .row .tablet-auto:nth-last-child(17) ~ .tablet-auto {
12062 --f7-cols-per-row: 17;
12064 .row
.tablet-auto:nth-last-child
(18),
12065 .row .tablet-auto:nth-last-child(18) ~ .tablet-auto {
12066 --f7-cols-per-row: 18;
12068 .row
.tablet-auto:nth-last-child
(19),
12069 .row .tablet-auto:nth-last-child(19) ~ .tablet-auto {
12070 --f7-cols-per-row: 19;
12072 .row
.tablet-auto:nth-last-child
(20),
12073 .row .tablet-auto:nth-last-child(20) ~ .tablet-auto {
12074 --f7-cols-per-row: 20;
12076 .row
.tablet-auto:nth-last-child
(21),
12077 .row .tablet-auto:nth-last-child(21) ~ .tablet-auto {
12078 --f7-cols-per-row: 21;
12080 .row
.tablet-auto:nth-last-child
(22),
12081 .row .tablet-auto:nth-last-child(22) ~ .tablet-auto {
12082 --f7-cols-per-row: 22;
12085 @media (min-width: 1025px) {
12087 --f7-cols-per-row: 20;
12090 --f7-cols-per-row: 10;
12093 --f7-cols-per-row: 6.66666667;
12096 --f7-cols-per-row: 5;
12099 --f7-cols-per-row: 4;
12102 --f7-cols-per-row: 3.33333333;
12105 --f7-cols-per-row: 3;
12108 --f7-cols-per-row: 2.85714286;
12111 --f7-cols-per-row: 2.5;
12114 --f7-cols-per-row: 2.22222222;
12117 --f7-cols-per-row: 2;
12120 --f7-cols-per-row: 1.81818182;
12123 --f7-cols-per-row: 1.66666667;
12126 --f7-cols-per-row: 1.53846154;
12129 --f7-cols-per-row: 1.5;
12132 --f7-cols-per-row: 1.42857143;
12135 --f7-cols-per-row: 1.33333333;
12138 --f7-cols-per-row: 1.25;
12141 --f7-cols-per-row: 1.17647059;
12144 --f7-cols-per-row: 1.11111111;
12147 --f7-cols-per-row: 1.05263158;
12149 .row .desktop-100 {
12150 --f7-cols-per-row: 1;
12152 .row
.desktop-auto:nth-last-child
(1),
12153 .row .desktop-auto:nth-last-child(1) ~ .desktop-auto {
12154 --f7-cols-per-row: 1;
12156 .row
.desktop-auto:nth-last-child
(2),
12157 .row .desktop-auto:nth-last-child(2) ~ .desktop-auto {
12158 --f7-cols-per-row: 2;
12160 .row
.desktop-auto:nth-last-child
(3),
12161 .row .desktop-auto:nth-last-child(3) ~ .desktop-auto {
12162 --f7-cols-per-row: 3;
12164 .row
.desktop-auto:nth-last-child
(4),
12165 .row .desktop-auto:nth-last-child(4) ~ .desktop-auto {
12166 --f7-cols-per-row: 4;
12168 .row
.desktop-auto:nth-last-child
(5),
12169 .row .desktop-auto:nth-last-child(5) ~ .desktop-auto {
12170 --f7-cols-per-row: 5;
12172 .row
.desktop-auto:nth-last-child
(6),
12173 .row .desktop-auto:nth-last-child(6) ~ .desktop-auto {
12174 --f7-cols-per-row: 6;
12176 .row
.desktop-auto:nth-last-child
(7),
12177 .row .desktop-auto:nth-last-child(7) ~ .desktop-auto {
12178 --f7-cols-per-row: 7;
12180 .row
.desktop-auto:nth-last-child
(8),
12181 .row .desktop-auto:nth-last-child(8) ~ .desktop-auto {
12182 --f7-cols-per-row: 8;
12184 .row
.desktop-auto:nth-last-child
(9),
12185 .row .desktop-auto:nth-last-child(9) ~ .desktop-auto {
12186 --f7-cols-per-row: 9;
12188 .row
.desktop-auto:nth-last-child
(10),
12189 .row .desktop-auto:nth-last-child(10) ~ .desktop-auto {
12190 --f7-cols-per-row: 10;
12192 .row
.desktop-auto:nth-last-child
(11),
12193 .row .desktop-auto:nth-last-child(11) ~ .desktop-auto {
12194 --f7-cols-per-row: 11;
12196 .row
.desktop-auto:nth-last-child
(12),
12197 .row .desktop-auto:nth-last-child(12) ~ .desktop-auto {
12198 --f7-cols-per-row: 12;
12200 .row
.desktop-auto:nth-last-child
(13),
12201 .row .desktop-auto:nth-last-child(13) ~ .desktop-auto {
12202 --f7-cols-per-row: 13;
12204 .row
.desktop-auto:nth-last-child
(14),
12205 .row .desktop-auto:nth-last-child(14) ~ .desktop-auto {
12206 --f7-cols-per-row: 14;
12208 .row
.desktop-auto:nth-last-child
(15),
12209 .row .desktop-auto:nth-last-child(15) ~ .desktop-auto {
12210 --f7-cols-per-row: 15;
12212 .row
.desktop-auto:nth-last-child
(16),
12213 .row .desktop-auto:nth-last-child(16) ~ .desktop-auto {
12214 --f7-cols-per-row: 16;
12216 .row
.desktop-auto:nth-last-child
(17),
12217 .row .desktop-auto:nth-last-child(17) ~ .desktop-auto {
12218 --f7-cols-per-row: 17;
12220 .row
.desktop-auto:nth-last-child
(18),
12221 .row .desktop-auto:nth-last-child(18) ~ .desktop-auto {
12222 --f7-cols-per-row: 18;
12224 .row
.desktop-auto:nth-last-child
(19),
12225 .row .desktop-auto:nth-last-child(19) ~ .desktop-auto {
12226 --f7-cols-per-row: 19;
12228 .row
.desktop-auto:nth-last-child
(20),
12229 .row .desktop-auto:nth-last-child(20) ~ .desktop-auto {
12230 --f7-cols-per-row: 20;
12232 .row
.desktop-auto:nth-last-child
(21),
12233 .row .desktop-auto:nth-last-child(21) ~ .desktop-auto {
12234 --f7-cols-per-row: 21;
12236 .row
.desktop-auto:nth-last-child
(22),
12237 .row .desktop-auto:nth-last-child(22) ~ .desktop-auto {
12238 --f7-cols-per-row: 22;
12241 /* === Calendar/Datepicker === */
12243 --f7-calendar-height: 320px;
12244 --f7-calendar-sheet-landscape-height: 220px;
12245 --f7-calendar-sheet-bg-color: #fff;
12246 --f7-calendar-popover-width: 320px;
12247 --f7-calendar-popover-height: 320px;
12248 --f7-calendar-modal-height: 420px;
12249 --f7-calendar-modal-max-width: 380px;
12250 --f7-calendar-modal-border-radius: 4px;
12251 --f7-calendar-modal-bg-color: #fff;
12253 --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
12254 --f7-calendar-header-link-color: var(--f7-bars-link-color);
12255 --f7-calendar-header-text-color: var(--f7-bars-text-color);
12256 --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
12257 --f7-calendar-footer-border-color: var(--f7-bars-border-color);
12258 --f7-calendar-footer-link-color: var(--f7-bars-link-color);
12259 --f7-calendar-footer-text-color: var(--f7-bars-text-color);
12260 --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
12261 --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
12263 --f7-calendar-footer-padding: 0 8px;
12264 --f7-calendar-week-header-font-size: 11px;
12265 --f7-calendar-day-text-color: #000;
12266 --f7-calendar-selected-text-color: #fff;
12268 --f7-calendar-selected-bg-color: var(--f7-theme-color);
12270 --f7-calendar-prev-next-text-color: #b8b8b8;
12271 --f7-calendar-disabled-text-color: #d4d4d4;
12272 --f7-calendar-event-dot-size: 4px;
12274 --f7-calendar-event-bg-color: var(--f7-theme-color);
12279 --f7-calendar-sheet-border-color: var
(--f7-bars-border-color
);
12280 --f7-calendar-modal-bg-color: #171717;
12281 --f7-calendar-sheet-bg-color: #171717;
12284 --f7-calendar-sheet-border-color: #929499;
12285 --f7-calendar-header-height: 44px;
12286 --f7-calendar-header-font-size: 17px;
12287 --f7-calendar-header-font-weight: 600;
12288 --f7-calendar-header-padding: 0 8px;
12289 --f7-calendar-footer-height: 44px;
12290 --f7-calendar-footer-font-size: 17px;
12291 --f7-calendar-week-header-height: 18px;
12292 --f7-calendar-row-border-color: #c4c4c4;
12293 --f7-calendar-day-font-size: 15px;
12294 --f7-calendar-today-text-color: #000;
12295 --f7-calendar-today-bg-color: #e3e3e3;
12296 --f7-calendar-day-size: 30px;
12300 --f7-calendar-row-border-color: var
(--f7-bars-border-color
);
12301 --f7-calendar-day-text-color: #fff;
12302 --f7-calendar-today-text-color: #fff;
12303 --f7-calendar-today-bg-color: #333;
12306 --f7-calendar-sheet-border-color: #ccc;
12307 --f7-calendar-header-height: 56px;
12308 --f7-calendar-header-font-size: 20px;
12309 --f7-calendar-header-font-weight: 400;
12310 --f7-calendar-header-padding: 0 24px;
12311 --f7-calendar-footer-height: 48px;
12312 --f7-calendar-footer-font-size: 14px;
12313 --f7-calendar-week-header-height: 24px;
12314 --f7-calendar-row-border-color: transparent
;
12315 --f7-calendar-day-font-size: 14px;
12317 --f7-calendar-today-text-color: var(--f7-theme-color);
12319 --f7-calendar-today-bg-color: none
;
12320 --f7-calendar-day-size: 32px;
12324 --f7-calendar-day-text-color: rgba
(255, 255, 255, 0.87);
12327 --f7-calendar-sheet-border-color: #ccc;
12328 --f7-calendar-header-height: 38px;
12329 --f7-calendar-header-font-size: 14px;
12330 --f7-calendar-header-font-weight: 600;
12331 --f7-calendar-header-padding: 0 8px;
12332 --f7-calendar-footer-height: 38px;
12333 --f7-calendar-footer-font-size: 14px;
12334 --f7-calendar-week-header-height: 18px;
12335 --f7-calendar-row-border-color: #e3e3e3;
12336 --f7-calendar-day-font-size: 13px;
12337 --f7-calendar-today-text-color: #000;
12338 --f7-calendar-today-bg-color: #e3e3e3;
12339 --f7-calendar-day-size: 30px;
12341 .aurora
.theme-dark
,
12342 .aurora.theme-dark {
12343 --f7-calendar-row-border-color: var
(--f7-bars-border-color
);
12344 --f7-calendar-day-text-color: #fff;
12345 --f7-calendar-today-text-color: #fff;
12346 --f7-calendar-today-bg-color: #333;
12350 height: var
(--f7-calendar-height
);
12353 flex-direction: column
;
12355 .calendar.modal-in {
12358 @media (orientation: landscape
) and
(max-height: 415px) {
12359 .calendar.calendar-sheet {
12360 height: var
(--f7-calendar-sheet-landscape-height
);
12362 .calendar.calendar-modal {
12363 height: calc
(100vh - var
(--f7-navbar-height
));
12366 .calendar
.calendar-inline
,
12367 .calendar.calendar-popover .calendar {
12368 position: relative
;
12371 --f7-sheet-border-color: var
(--f7-calendar-sheet-border-color
);
12372 background: var
(--f7-calendar-sheet-bg-color
);
12374 .calendar-sheet:before {
12377 .calendar-sheet .sheet-modal-inner {
12378 margin-bottom: var
(--f7-safe-area-bottom
);
12380 .calendar-sheet
.toolbar:before
,
12381 .calendar-modal
.toolbar:before
,
12382 .calendar-popover .toolbar:before {
12385 .calendar-popover {
12386 width: var
(--f7-calendar-popover-width
);
12388 .calendar-popover .calendar {
12389 height: var
(--f7-calendar-popover-height
);
12390 border-radius: var
(--f7-popover-border-radius
);
12394 position: relative
;
12397 white-space: nowrap
;
12398 text-overflow: ellipsis
;
12399 box-sizing: border-box
;
12400 padding: var
(--f7-calendar-header-padding
);
12401 background-color: var
(--f7-calendar-header-bg-color
, var
(--f7-bars-bg-color
));
12402 color: var
(--f7-calendar-header-text-color
, var
(--f7-bars-text-color
));
12403 height: var
(--f7-calendar-header-height
);
12404 line-height: var
(--f7-calendar-header-height
);
12405 font-size: var
(--f7-calendar-header-font-size
);
12406 font-weight: var
(--f7-calendar-header-font-weight
);
12408 .calendar-header a {
12409 color: var
(--f7-calendar-header-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
12414 padding: var
(--f7-calendar-footer-padding
);
12415 background-color: var
(--f7-calendar-footer-bg-color
, var
(--f7-bars-bg-color
));
12416 color: var
(--f7-calendar-footer-text-color
, var
(--f7-bars-text-color
));
12417 height: var
(--f7-calendar-footer-height
);
12418 font-size: var
(--f7-calendar-header-font-size
);
12420 justify-content: flex-end
;
12421 box-sizing: border-box
;
12422 align-items: center
;
12423 position: relative
;
12425 .calendar-footer a {
12426 color: var
(--f7-calendar-footer-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
12428 .calendar-footer:before {
12430 position: absolute
;
12431 background-color: var
(--f7-calendar-footer-border-color
, var
(--f7-bars-border-color
));
12440 transform-origin: 50% 0%;
12441 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
12444 position: absolute
;
12445 height: var
(--f7-calendar-modal-height
);
12450 max-width: var
(--f7-calendar-modal-max-width
);
12451 transform: translate3d
(-50%, 100%, 0);
12452 transition-property: transform
;
12455 background: var
(--f7-calendar-modal-bg-color
);
12457 border-radius: var
(--f7-calendar-modal-border-radius
);
12458 box-shadow: var
(--f7-elevation-24
);
12460 .calendar-modal
.modal-in
,
12461 .calendar-modal.modal-out {
12462 transition-duration: 400ms;
12464 .calendar-modal.modal-in {
12465 transform: translate3d
(-50%, -50%, 0);
12467 .calendar-modal.modal-out {
12468 transform: translate3d
(-50%, 100%, 0);
12470 .calendar-week-header {
12472 box-sizing: border-box
;
12473 position: relative
;
12474 font-size: var
(--f7-calendar-week-header-font-size
);
12475 background-color: var
(--f7-calendar-week-header-bg-color
, var
(--f7-bars-bg-color
));
12476 color: var
(--f7-calendar-week-header-text-color
, var
(--f7-bars-text-color
));
12477 height: var
(--f7-calendar-week-header-height
);
12478 padding-left: var
(--f7-safe-area-left
);
12479 padding-right: var
(--f7-safe-area-right
);
12481 .calendar-week-header .calendar-week-day {
12483 width: calc
(100% / 7);
12484 text-align: center
;
12485 line-height: var
(--f7-calendar-week-header-height
);
12491 position: relative
;
12494 .calendar-months-wrapper {
12495 position: relative
;
12502 flex-direction: column
;
12505 position: absolute
;
12510 height: 16.66666667%;
12511 height: calc
(100% / 6);
12515 position: relative
;
12516 box-sizing: border-box
;
12517 padding-left: var
(--f7-safe-area-left
);
12518 padding-right: var
(--f7-safe-area-right
);
12520 .calendar-row:before {
12522 position: absolute
;
12523 background-color: var
(--f7-calendar-row-border-color
);
12532 transform-origin: 50% 0%;
12533 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
12535 .calendar-modal
.calendar-months:first-child
.calendar-row:first-child:before
,
12536 .calendar-popover .calendar-months:first-child .calendar-row:first-child:before {
12537 display: none
!important
;
12542 justify-content: center
;
12543 align-items: center
;
12544 box-sizing: border-box
;
12545 width: 14.28571429%;
12546 width: calc
(100% / 7);
12547 text-align: center
;
12550 color: var
(--f7-calendar-day-text-color
);
12552 font-size: var
(--f7-calendar-day-font-size
);
12554 .calendar-day.calendar-day-today .calendar-day-number {
12555 color: var
(--f7-calendar-today-text-color
, var
(--f7-theme-color
));
12556 background-color: var
(--f7-calendar-today-bg-color
);
12558 .calendar-day
.calendar-day-prev
,
12559 .calendar-day.calendar-day-next {
12560 color: var
(--f7-calendar-prev-next-text-color
);
12562 .calendar-day.calendar-day-disabled {
12563 color: var
(--f7-calendar-disabled-text-color
);
12566 .calendar-day.calendar-day-selected .calendar-day-number {
12567 color: var
(--f7-calendar-selected-text-color
);
12568 background-color: var
(--f7-calendar-selected-bg-color
, var
(--f7-theme-color
));
12570 .calendar-day .calendar-day-number {
12571 display: inline-block
;
12572 border-radius: 50%;
12573 position: relative
;
12574 width: var
(--f7-calendar-day-size
);
12575 height: var
(--f7-calendar-day-size
);
12576 line-height: var
(--f7-calendar-day-size
);
12578 .calendar-day .calendar-day-events {
12579 position: absolute
;
12584 align-items: center
;
12585 justify-content: center
;
12588 .calendar-day .calendar-day-event {
12589 width: var
(--f7-calendar-event-dot-size
);
12590 height: var
(--f7-calendar-event-dot-size
);
12591 border-radius: calc
(var
(--f7-calendar-event-dot-size
) / 2);
12592 background-color: var
(--f7-calendar-event-bg-color
);
12594 .calendar-day .calendar-day-event + .calendar-day-event {
12597 .calendar-range .calendar-day.calendar-day-selected {
12598 align-items: stretch
;
12599 align-content: stretch
;
12601 .calendar-range .calendar-day.calendar-day-selected .calendar-day-number {
12605 text-align: center
;
12607 align-items: center
;
12608 justify-content: center
;
12610 .calendar-month-selector
,
12611 .calendar-year-selector {
12613 justify-content: space-between
;
12614 align-items: center
;
12619 margin-right: auto
;
12621 .calendar-month-selector
.calendar-day-number
,
12622 .calendar-year-selector .calendar-day-number {
12624 position: relative
;
12626 text-overflow: ellipsis
;
12628 .calendar-month-selector a
.icon-only
,
12629 .calendar-year-selector a.icon-only {
12632 /* === Picker === */
12634 --f7-picker-height: 260px;
12635 --f7-picker-inline-height: 200px;
12636 --f7-picker-popover-height: 200px;
12637 --f7-picker-popover-width: 280px;
12638 --f7-picker-landscape-height: 200px;
12639 --f7-picker-item-height: 36px;
12642 --f7-picker-column-font-size: 24px;
12643 --f7-picker-divider-text-color: #000;
12644 --f7-picker-item-text-color: #707274;
12645 --f7-picker-item-selected-text-color: #000;
12646 --f7-picker-item-selected-border-color: #a8abb0;
12650 --f7-picker-divider-text-color: #fff;
12651 --f7-picker-item-selected-text-color: #fff;
12652 --f7-picker-item-selected-border-color: rgba
(255, 255, 255, 0.06);
12655 --f7-picker-column-font-size: 20px;
12656 --f7-picker-divider-text-color: rgba
(0, 0, 0, 0.87);
12657 --f7-picker-item-text-color: inherit
;
12658 --f7-picker-item-selected-text-color: inherit
;
12659 --f7-picker-item-selected-border-color: rgba
(0, 0, 0, 0.15);
12663 --f7-picker-divider-text-color: rgba
(255, 255, 255, 0.87);
12664 --f7-picker-item-selected-border-color: rgba
(255, 255, 255, 0.15);
12667 --f7-picker-column-font-size: 16px;
12668 --f7-picker-divider-text-color: #000;
12669 --f7-picker-item-height: 28px;
12670 --f7-picker-item-text-color: #888;
12671 --f7-picker-item-selected-text-color: #000;
12672 --f7-picker-item-selected-border-color: rgba
(0, 0, 0, 0.12);
12674 .aurora
.theme-dark
,
12675 .aurora.theme-dark {
12676 --f7-picker-divider-text-color: #fff;
12677 --f7-picker-item-selected-text-color: #fff;
12678 --f7-picker-item-selected-border-color: rgba
(255, 255, 255, 0.06);
12682 height: var
(--f7-picker-height
);
12684 .picker.picker-inline {
12685 height: var
(--f7-picker-inline-height
);
12688 height: var
(--f7-picker-popover-height
);
12690 @media (orientation: landscape
) and
(max-height: 415px) {
12691 .picker:not(.picker-inline) {
12692 height: var
(--f7-picker-landscape-height
);
12696 width: var
(--f7-picker-popover-width
);
12698 .picker-popover .toolbar {
12700 border-radius: var
(--f7-popover-border-radius
) var
(--f7-popover-border-radius
) 0 0;
12702 .picker-popover .toolbar:before {
12703 display: none
!important
;
12705 .picker-popover .toolbar + .picker-columns {
12706 height: calc
(100% - var
(--f7-toolbar-height
));
12711 justify-content: center
;
12715 position: relative
;
12716 -webkit-mask-box-image: linear-gradient
(to top
, transparent
, transparent
5%, white
20%, white
80%, transparent
95%, transparent
);
12717 font-size: var
(--f7-picker-column-font-size
);
12720 position: relative
;
12723 .picker-column
.picker-column-first:before
,
12724 .picker-column.picker-column-last:after {
12727 position: absolute
;
12731 .picker-column.picker-column-first:before {
12734 .picker-column.picker-column-last:after {
12737 .picker-column.picker-column-left {
12740 .picker-column.picker-column-center {
12741 text-align: center
;
12743 .picker-column.picker-column-right {
12746 .picker-column.picker-column-divider {
12748 align-items: center
;
12749 color: var
(--f7-picker-divider-text-color
);
12753 transition-timing-function: ease-out
;
12756 height: var
(--f7-picker-item-height
);
12757 line-height: var
(--f7-picker-item-height
);
12758 white-space: nowrap
;
12759 position: relative
;
12761 text-overflow: ellipsis
;
12765 box-sizing: border-box
;
12767 color: var
(--f7-picker-item-text-color
);
12770 .picker-item span {
12773 .picker-column-absolute .picker-item {
12774 position: absolute
;
12776 .picker-item.picker-item-far {
12777 pointer-events: none
;
12779 .picker-item.picker-item-selected {
12780 color: var
(--f7-picker-item-selected-text-color
);
12781 transform: translate3d
(0, 0, 0) rotateX
(0deg);
12783 .picker-center-highlight {
12784 height: var
(--f7-picker-item-height
);
12785 box-sizing: border-box
;
12786 position: absolute
;
12790 margin-top: calc
(-1 * var
(--f7-picker-item-height
) / 2);
12791 pointer-events: none
;
12793 .picker-center-highlight:before {
12795 position: absolute
;
12796 background-color: var
(--f7-picker-item-selected-border-color
);
12805 transform-origin: 50% 0%;
12806 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
12808 .picker-center-highlight:after {
12810 position: absolute
;
12811 background-color: var
(--f7-picker-item-selected-border-color
);
12820 transform-origin: 50% 100%;
12821 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
12823 .picker-3d .picker-columns {
12825 perspective: 1200px;
12827 .picker-3d
.picker-column
,
12828 .picker-3d
.picker-items
,
12829 .picker-3d .picker-item {
12830 transform-style: preserve-3d
;
12832 .picker-3d .picker-column {
12835 .picker-3d .picker-item {
12836 transform-origin: center center
-110px;
12837 -webkit-backface-visibility: hidden
;
12838 backface-visibility: hidden
;
12839 transition-timing-function: ease-out
;
12841 /* === Infinite === */
12842 .infinite-scroll-preloader {
12844 margin-right: auto
;
12845 text-align: center
;
12847 .infinite-scroll-preloader.preloader {
12850 .ios .infinite-scroll-preloader {
12852 margin-bottom: 35px;
12854 .ios
.infinite-scroll-preloader
.preloader
,
12855 .ios .infinite-scroll-preloader.preloader {
12859 .md .infinite-scroll-preloader {
12861 margin-bottom: 32px;
12863 .aurora .infinite-scroll-preloader {
12865 margin-bottom: 15px;
12869 --f7-ptr-preloader-size: 20px;
12870 --f7-ptr-size: 44px;
12873 --f7-ptr-preloader-size: 22px;
12874 --f7-ptr-size: 40px;
12877 --f7-ptr-preloader-size: 20px;
12878 --f7-ptr-size: 38px;
12881 position: relative
;
12882 top: var
(--f7-ptr-top
, 0);
12883 height: var
(--f7-ptr-size
);
12885 .ptr-preloader .preloader {
12886 position: absolute
;
12888 width: var
(--f7-ptr-preloader-size
);
12889 height: var
(--f7-ptr-preloader-size
);
12890 margin-left: calc
(-1 * var
(--f7-ptr-preloader-size
) / 2);
12891 margin-top: calc
(-1 * var
(--f7-ptr-preloader-size
) / 2);
12893 visibility: hidden
;
12895 .ptr-bottom .ptr-preloader {
12900 .ios .ptr-preloader {
12901 margin-top: calc
(-1 * var
(--f7-ptr-size
));
12906 position: absolute
;
12909 background: no-repeat center
;
12911 transform: rotate
(0deg) translate3d
(0, 0, 0);
12912 transition-duration: 300ms;
12913 transition-property: transform
;
12918 visibility: visible
;
12919 color: var
(--f7-preloader-color
);
12921 .ios .ptr-arrow:after {
12922 font-family: 'framework7-core-icons';
12923 font-weight: normal
;
12924 font-style: normal
;
12926 letter-spacing: normal
;
12927 text-transform: none
;
12928 white-space: nowrap
;
12931 -webkit-font-smoothing: antialiased
;
12932 text-rendering: optimizeLegibility
;
12933 -moz-osx-font-smoothing: grayscale
;
12934 -moz-font-feature-settings: "liga";
12935 font-feature-settings: "liga";
12936 text-align: center
;
12945 content: 'ptr_arrow_ios';
12947 .ios .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
12950 .ios
.ptr-transitioning
,
12951 .ios .ptr-refreshing {
12952 transition-duration: 300ms;
12953 transition-property: transform
;
12955 .ios .ptr-refreshing {
12956 transform: translate3d
(0, var
(--f7-ptr-size
), 0);
12958 .ios .ptr-refreshing .ptr-arrow {
12959 visibility: hidden
;
12961 .ios .ptr-refreshing .ptr-preloader .preloader {
12962 visibility: visible
;
12964 .ios .ptr-pull-up .ptr-arrow {
12965 transform: rotate
(180deg) translate3d
(0, 0, 0);
12967 .ios .ptr-no-navbar {
12968 margin-top: calc
(-1 * var
(--f7-ptr-size
));
12969 height: calc
(100% + var
(--f7-ptr-size
));
12971 .ios .ptr-no-navbar .ptr-preloader {
12974 .ios .ptr-bottom .ptr-preloader {
12976 margin-bottom: calc
(-1 * var
(--f7-ptr-size
));
12978 .ios
.ptr-bottom
.ptr-transitioning
> *,
12979 .ios .ptr-bottom.ptr-refreshing > * {
12980 transition-duration: 300ms;
12981 transition-property: transform
;
12983 .ios .ptr-bottom.ptr-refreshing {
12986 .ios .ptr-bottom.ptr-refreshing > * {
12987 transform: translate3d
(0, calc
(-1 * var
(--f7-ptr-size
)), 0);
12989 .ios .ptr-bottom .ptr-arrow {
12990 transform: rotate
(180deg) translate3d
(0, 0, 0);
12992 .ios .ptr-bottom.ptr-pull-up .ptr-arrow {
12993 transform: rotate
(0deg) translate3d
(0, 0, 0);
12996 --f7-ptr-top: -4px;
12998 .md .ptr-preloader {
12999 width: var
(--f7-ptr-size
);
13000 border-radius: 50%;
13002 margin-top: calc
(-1 * var
(--f7-ptr-size
));
13004 box-shadow: var
(--f7-elevation-1
);
13006 margin-left: calc
(-1 * var
(--f7-ptr-size
) / 2);
13008 .md
.ptr-preloader
.preloader
.preloader-inner-gap
,
13009 .md .ptr-preloader .preloader .preloader-inner-half-circle {
13015 box-sizing: border-box
;
13016 border: 3px solid var
(--f7-preloader-color
);
13017 position: absolute
;
13020 margin-left: -11px;
13022 border-left-color: transparent
;
13023 border-radius: 50%;
13025 transform: rotate
(150deg);
13027 .md .ptr-arrow:after {
13031 position: absolute
;
13034 border-bottom-width: 6px;
13035 border-bottom-style: solid
;
13036 border-bottom-color: inherit
;
13037 border-left: 5px solid transparent
;
13038 border-right: 5px solid transparent
;
13039 transform: rotate
(-40deg);
13041 .md
.ptr-content:not
(.ptr-refreshing
):not
(.ptr-pull-up
) .ptr-preloader
.preloader
,
13042 .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader * {
13045 .md
.ptr-refreshing
.ptr-preloader
.preloader
,
13046 .md .ptr-pull-up .ptr-preloader .preloader {
13047 visibility: visible
;
13049 .md
.ptr-refreshing
.ptr-arrow
,
13050 .md .ptr-pull-up .ptr-arrow {
13051 visibility: hidden
;
13053 .md .ptr-refreshing .ptr-preloader {
13054 transform: translate3d
(0, 66px, 0);
13056 .md .ptr-transitioning .ptr-arrow {
13059 .md .ptr-pull-up .ptr-arrow {
13061 transform: rotate
(620deg) !important
;
13064 .md
.ptr-transitioning
.ptr-preloader
,
13065 .md .ptr-refreshing .ptr-preloader {
13066 transition-duration: 300ms;
13067 transition-property: transform
;
13069 .md .ptr-bottom .ptr-preloader {
13071 margin-bottom: calc
(-1 * var
(--f7-ptr-size
) - 4px);
13073 .md .ptr-bottom.ptr-refreshing .ptr-preloader {
13074 transform: translate3d
(0, -66px, 0);
13076 .aurora .ptr-preloader {
13077 margin-top: calc
(-1 * var
(--f7-ptr-size
));
13081 .aurora .ptr-arrow {
13082 position: absolute
;
13085 background: no-repeat center
;
13087 transform: rotate
(0deg) translate3d
(0, 0, 0);
13088 transition-duration: 300ms;
13089 transition-property: transform
;
13094 visibility: visible
;
13095 color: var
(--f7-preloader-color
);
13097 .aurora .ptr-arrow:after {
13098 font-family: 'framework7-core-icons';
13099 font-weight: normal
;
13100 font-style: normal
;
13102 letter-spacing: normal
;
13103 text-transform: none
;
13104 white-space: nowrap
;
13107 -webkit-font-smoothing: antialiased
;
13108 text-rendering: optimizeLegibility
;
13109 -moz-osx-font-smoothing: grayscale
;
13110 -moz-font-feature-settings: "liga";
13111 font-feature-settings: "liga";
13112 text-align: center
;
13121 content: 'ptr_arrow_ios';
13123 .aurora .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
13126 .aurora
.ptr-transitioning
,
13127 .aurora .ptr-refreshing {
13128 transition-duration: 300ms;
13129 transition-property: transform
;
13131 .aurora .ptr-refreshing {
13132 transform: translate3d
(0, var
(--f7-ptr-size
), 0);
13134 .aurora .ptr-refreshing .ptr-arrow {
13135 visibility: hidden
;
13137 .aurora .ptr-refreshing .ptr-preloader .preloader {
13138 visibility: visible
;
13140 .aurora .ptr-pull-up .ptr-arrow {
13141 transform: rotate
(180deg) translate3d
(0, 0, 0);
13143 .aurora .ptr-no-navbar {
13144 margin-top: calc
(-1 * var
(--f7-ptr-size
));
13145 height: calc
(100% + var
(--f7-ptr-size
));
13147 .aurora .ptr-no-navbar .ptr-preloader {
13150 .aurora .ptr-bottom .ptr-preloader {
13152 margin-bottom: calc
(-1 * var
(--f7-ptr-size
));
13154 .aurora
.ptr-bottom
.ptr-transitioning
> *,
13155 .aurora .ptr-bottom.ptr-refreshing > * {
13156 transition-duration: 300ms;
13157 transition-property: transform
;
13159 .aurora .ptr-bottom.ptr-refreshing {
13162 .aurora .ptr-bottom.ptr-refreshing > * {
13163 transform: translate3d
(0, calc
(-1 * var
(--f7-ptr-size
)), 0);
13165 .aurora .ptr-bottom .ptr-arrow {
13166 transform: rotate
(180deg) translate3d
(0, 0, 0);
13168 .aurora .ptr-bottom.ptr-pull-up .ptr-arrow {
13169 transform: rotate
(0deg) translate3d
(0, 0, 0);
13171 /* === Images Lazy Loading === */
13172 .lazy-loaded.lazy-fade-in {
13173 animation: lazyFadeIn
600ms;
13175 @keyframes lazyFadeIn
{
13183 /* === Data Table === */
13185 --f7-table-head-font-size: 12px;
13186 --f7-table-body-font-size: 14px;
13187 --f7-table-footer-font-size: 12px;
13188 --f7-table-input-height: 24px;
13189 --f7-table-input-font-size: 14px;
13190 --f7-table-collapsible-cell-padding: 15px;
13191 --f7-table-link-icon-only-icon-size: 20px;
13192 --f7-table-sortable-icon-color: #000;
13196 --f7-table-cell-border-color: #282829;
13197 --f7-table-sortable-icon-color: #fff;
13198 --f7-table-input-text-color: #fff;
13201 --f7-table-head-font-weight: 600;
13202 --f7-table-head-text-color: #8e8e93;
13203 --f7-table-head-cell-height: 44px;
13204 --f7-table-head-icon-size: 18px;
13205 --f7-table-body-cell-height: 44px;
13206 --f7-table-cell-border-color: #c8c7cc;
13207 --f7-table-cell-padding-vertical: 0px;
13208 --f7-table-cell-padding-horizontal: 15px;
13209 --f7-table-edge-cell-padding-horizontal: 15px;
13210 --f7-table-label-cell-padding-horizontal: 15px;
13211 --f7-table-checkbox-cell-width: 22px;
13212 /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
13213 --f7-table-selected-row-bg-color: #f7f7f8;
13214 /* --f7-table-actions-link-color: var(--f7-theme-color); */
13215 --f7-table-title-font-size: 17px;
13216 --f7-table-title-font-weight: 600;
13217 --f7-table-card-header-height: 64px;
13218 --f7-table-footer-height: 44px;
13219 --f7-table-footer-text-color: #8e8e93;
13220 --f7-table-input-text-color: #000;
13224 --f7-table-selected-row-bg-color: #363636;
13227 --f7-table-head-font-weight: 500;
13228 --f7-table-head-text-color: rgba
(0, 0, 0, 0.54);
13229 --f7-table-head-cell-height: 56px;
13230 --f7-table-head-icon-size: 16px;
13231 --f7-table-body-cell-height: 48px;
13232 --f7-table-cell-border-color: rgba
(0, 0, 0, 0.12);
13233 --f7-table-cell-padding-vertical: 0px;
13234 --f7-table-cell-padding-horizontal: 28px;
13235 --f7-table-edge-cell-padding-horizontal: 24px;
13236 --f7-table-label-cell-padding-horizontal: 24px;
13237 --f7-table-checkbox-cell-width: 18px;
13238 --f7-table-actions-cell-link-color: rgba
(0, 0, 0, 0.54);
13239 --f7-table-selected-row-bg-color: #f5f5f5;
13240 --f7-table-actions-link-color: rgba
(0, 0, 0, 0.54);
13241 --f7-table-title-font-size: 20px;
13242 --f7-table-title-font-weight: 400;
13243 --f7-table-card-header-height: 64px;
13244 --f7-table-footer-height: 56px;
13245 --f7-table-footer-text-color: rgba
(0, 0, 0, 0.54);
13246 --f7-table-input-text-color: #212121;
13250 --f7-table-head-text-color: rgba
(255, 255, 255, 0.54);
13251 --f7-table-footer-text-color: rgba
(255, 255, 255, 0.54);
13252 --f7-table-selected-row-bg-color: rgba
(255, 255, 255, 0.05);
13253 --f7-table-actions-cell-link-color: rgba
(255, 255, 255, 0.54);
13254 --f7-table-actions-link-color: rgba
(255, 255, 255, 0.54);
13257 --f7-table-link-icon-only-icon-size: 18px;
13258 --f7-table-head-font-weight: 400;
13259 --f7-table-head-text-color: rgba
(0, 0, 0, 0.6);
13260 --f7-table-head-cell-height: 32px;
13261 --f7-table-head-icon-size: 18px;
13262 --f7-table-body-cell-height: 32px;
13263 --f7-table-cell-border-color: rgba
(0, 0, 0, 0.12);
13264 --f7-table-cell-padding-vertical: 5px;
13265 --f7-table-cell-padding-horizontal: 10px;
13266 --f7-table-edge-cell-padding-horizontal: 15px;
13267 --f7-table-label-cell-padding-horizontal: 15px;
13268 --f7-table-checkbox-cell-width: 22px;
13269 /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
13270 --f7-table-selected-row-bg-color: rgba
(0, 0, 0, 0.03);
13271 /* --f7-table-actions-link-color: var(--f7-theme-color); */
13272 --f7-table-title-font-size: 14px;
13273 --f7-table-title-font-weight: 600;
13274 --f7-table-card-header-height: 42px;
13275 --f7-table-footer-height: 32px;
13276 --f7-table-footer-text-color: rgba
(0, 0, 0, 0.5);
13277 --f7-table-input-text-color: #000;
13279 .aurora
.theme-dark
,
13280 .aurora.theme-dark {
13281 --f7-table-selected-row-bg-color: rgba
(255, 255, 255, 0.03);
13282 --f7-table-head-text-color: rgba
(255, 255, 255, 0.52);
13283 --f7-table-footer-text-color: rgba
(255, 255, 255, 0.52);
13294 border-collapse: collapse
;
13297 .data-table thead th
,
13298 .data-table thead td {
13299 font-size: var
(--f7-table-head-font-size
);
13300 font-weight: var
(--f7-table-head-font-weight
);
13302 white-space: nowrap
;
13303 text-overflow: ellipsis
;
13305 height: var
(--f7-table-head-cell-height
);
13307 .data-table thead
th:not
(.sortable-cell-active
),
13308 .data-table thead td:not(.sortable-cell-active) {
13309 color: var
(--f7-table-head-text-color
);
13311 .data-table thead i
.icon
,
13312 .data-table thead i
.f7-icons
,
13313 .data-table thead i.material-icons {
13314 vertical-align: top
;
13315 font-size: var
(--f7-table-head-icon-size
);
13316 width: var
(--f7-table-head-icon-size
);
13317 height: var
(--f7-table-head-icon-size
);
13319 .data-table tbody {
13320 font-size: var
(--f7-table-body-font-size
);
13322 .data-table tbody th
,
13323 .data-table tbody td {
13324 height: var
(--f7-table-body-cell-height
);
13326 .data-table tbody tr
.data-table-row-selected
,
13327 .device-desktop .data-table tbody tr:hover {
13328 background: var
(--f7-table-selected-row-bg-color
);
13330 .data-table tbody
td:before
,
13331 .data-table tbody th:before {
13333 position: absolute
;
13334 background-color: var
(--f7-table-cell-border-color
);
13343 transform-origin: 50% 0%;
13344 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
13348 --f7-table-cell-padding-left: var
(--f7-table-cell-padding-horizontal
);
13349 --f7-table-cell-padding-right: var
(--f7-table-cell-padding-horizontal
);
13350 padding-top: var
(--f7-table-cell-padding-vertical
);
13351 padding-bottom: var
(--f7-table-cell-padding-vertical
);
13352 padding-left: var
(--f7-table-cell-padding-left
);
13353 padding-right: var
(--f7-table-cell-padding-right
);
13354 position: relative
;
13355 box-sizing: border-box
;
13357 .data-table
th:first-child
,
13358 .data-table td:first-child {
13359 --f7-table-cell-padding-left: var
(--f7-table-edge-cell-padding-horizontal
);
13361 .data-table
th:last-child
,
13362 .data-table td:last-child {
13363 --f7-table-cell-padding-right: var
(--f7-table-edge-cell-padding-horizontal
);
13365 .data-table th
.label-cell
,
13366 .data-table td.label-cell {
13367 --f7-table-cell-padding-left: var
(--f7-table-label-cell-padding-horizontal
);
13368 --f7-table-cell-padding-right: var
(--f7-table-label-cell-padding-horizontal
);
13370 .data-table th
.numeric-cell
,
13371 .data-table td.numeric-cell {
13374 .data-table th
.checkbox-cell
,
13375 .data-table td.checkbox-cell {
13377 width: var
(--f7-table-checkbox-cell-width
);
13379 .data-table th
.checkbox-cell label
+ span
,
13380 .data-table td.checkbox-cell label + span {
13383 .data-table th
.checkbox-cell:first-child
,
13384 .data-table td.checkbox-cell:first-child {
13385 padding-right: calc
(var
(--f7-table-cell-padding-right
) / 2);
13387 .data-table th
.checkbox-cell:first-child
+ td
,
13388 .data-table td
.checkbox-cell:first-child
+ td
,
13389 .data-table th
.checkbox-cell:first-child
+ th
,
13390 .data-table td.checkbox-cell:first-child + th {
13391 padding-left: calc
(var
(--f7-table-cell-padding-left
) / 2);
13393 .data-table th
.checkbox-cell:last-child
,
13394 .data-table td.checkbox-cell:last-child {
13395 padding-left: calc
(var
(--f7-table-cell-padding-left
) / 2);
13397 .data-table th
.actions-cell
,
13398 .data-table td.actions-cell {
13400 white-space: nowrap
;
13402 .data-table th
.actions-cell a
.link
,
13403 .data-table td.actions-cell a.link {
13404 color: var
(--f7-table-actions-cell-link-color
, var
(--f7-theme-color
));
13406 .data-table th a
.icon-only
,
13407 .data-table td a
.icon-only
,
13408 .card
.data-table th a
.icon-only
,
13409 .card
.data-table td a
.icon-only
,
13410 .card
.data-table th a
.icon-only
,
13411 .card.data-table td a.icon-only {
13412 display: inline-block
;
13413 vertical-align: middle
;
13414 text-align: center
;
13418 .data-table th a
.icon-only i
,
13419 .data-table td a
.icon-only i
,
13420 .card
.data-table th a
.icon-only i
,
13421 .card
.data-table td a
.icon-only i
,
13422 .card
.data-table th a
.icon-only i
,
13423 .card.data-table td a.icon-only i {
13424 font-size: var
(--f7-table-link-icon-only-icon-size
);
13425 vertical-align: middle
;
13427 .data-table .sortable-cell:not(.input-cell) {
13429 position: relative
;
13431 .data-table .sortable-cell.input-cell .table-head-label {
13433 position: relative
;
13435 .data-table
.sortable-cell:not
(.numeric-cell
):not
(.input-cell
):after
,
13436 .data-table
.sortable-cell
.numeric-cell:not
(.input-cell
):before
,
13437 .data-table
.sortable-cell:not
(.numeric-cell
).input-cell
> .table-head-label:after
,
13438 .data-table .sortable-cell.numeric-cell.input-cell > .table-head-label:before {
13439 content: 'arrow_bottom_md';
13440 font-family: 'framework7-core-icons';
13441 font-weight: normal
;
13442 font-style: normal
;
13444 letter-spacing: normal
;
13445 text-transform: none
;
13446 white-space: nowrap
;
13449 -webkit-font-smoothing: antialiased
;
13450 text-rendering: optimizeLegibility
;
13451 -moz-osx-font-smoothing: grayscale
;
13452 -moz-font-feature-settings: "liga";
13453 font-feature-settings: "liga";
13454 text-align: center
;
13459 display: inline-block
;
13460 vertical-align: top
;
13463 color: var
(--f7-table-sortable-icon-color
);
13466 transition-duration: 300ms;
13467 transform: rotate
(0);
13470 .device-desktop
.data-table
.sortable-cell:not
(.sortable-cell-active
):hover:after
,
13471 .device-desktop
.data-table
.sortable-cell:not
(.sortable-cell-active
) .table-head-label:hover:after
,
13472 .device-desktop
.data-table
.sortable-cell:not
(.sortable-cell-active
):hover:before
,
13473 .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before {
13476 .data-table
.sortable-cell
.sortable-cell-active:after
,
13477 .data-table
.sortable-cell
.sortable-cell-active
.table-head-label:after
,
13478 .data-table
.sortable-cell
.sortable-cell-active:before
,
13479 .data-table .sortable-cell.sortable-cell-active .table-head-label:before {
13480 opacity: 0.87 !important
;
13482 .data-table
.sortable-cell
.sortable-desc:after
,
13483 .data-table
.sortable-cell
.sortable-desc:after
,
13484 .data-table
.table-head-label:after
,
13485 .data-table
.sortable-cell
.sortable-desc:before
,
13486 .data-table
.sortable-cell
.sortable-desc:before
,
13487 .data-table .table-head-label:before {
13488 transform: rotate
(180deg) !important
;
13490 .data-table
.card
.card-header
,
13491 .card
.data-table
.card-header
,
13492 .data-table
.card
.card-footer
,
13493 .card .data-table .card-footer {
13494 padding-left: var
(--f7-table-edge-cell-padding-horizontal
);
13495 padding-right: var
(--f7-table-edge-cell-padding-horizontal
);
13497 .data-table
.card
.card-header
,
13498 .card .data-table .card-header {
13499 min-height: var
(--f7-table-card-header-height
);
13501 .data-table
.card
.card-content
,
13502 .card .data-table .card-content {
13505 .data-table
.card
.card-footer
,
13506 .card .data-table .card-footer {
13507 min-height: var
(--f7-table-footer-height
);
13509 .data-table .data-table-title {
13510 font-size: var
(--f7-table-title-font-size
);
13511 font-weight: var
(--f7-table-title-font-weight
);
13513 .data-table
.data-table-links
,
13514 .data-table .data-table-actions {
13517 .data-table .data-table-links .button {
13520 .data-table .data-table-actions {
13522 align-items: center
;
13524 .data-table .data-table-actions a.link {
13525 color: var
(--f7-table-actions-link-color
, var
(--f7-theme-color
));
13528 .data-table .data-table-actions a.link.icon-only {
13530 justify-content: center
;
13533 .data-table
.data-table-header
,
13534 .data-table .data-table-header-selected {
13536 justify-content: space-between
;
13537 align-items: center
;
13540 .data-table
.card-header
> .data-table-header
,
13541 .data-table .card-header > .data-table-header-selected {
13542 padding-top: var
(--f7-card-header-padding-vertical
);
13543 padding-bottom: var
(--f7-card-header-padding-vertical
);
13545 padding-left: var
(--f7-table-edge-cell-padding-horizontal
);
13546 padding-right: var
(--f7-table-edge-cell-padding-horizontal
);
13547 margin-left: calc
(-1 * var
(--f7-table-edge-cell-padding-horizontal
));
13548 margin-right: calc
(-1 * var
(--f7-table-edge-cell-padding-horizontal
));
13550 .data-table .data-table-header-selected {
13551 background: rgba
(var
(--f7-theme-color-rgb
), 0.1);
13554 .data-table.data-table-has-checked .data-table-header {
13557 .data-table.data-table-has-checked .data-table-header-selected {
13560 .data-table .data-table-title-selected {
13562 color: var
(--f7-theme-color
);
13564 .data-table .data-table-footer {
13566 align-items: center
;
13567 box-sizing: border-box
;
13568 position: relative
;
13569 font-size: var
(--f7-table-footer-font-size
);
13571 min-height: var
(--f7-table-footer-height
);
13572 color: var
(--f7-table-footer-text-color
);
13573 justify-content: flex-end
;
13575 .data-table .data-table-footer:before {
13577 position: absolute
;
13578 background-color: var
(--f7-table-cell-border-color
);
13587 transform-origin: 50% 0%;
13588 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
13590 .data-table
.data-table-rows-select
,
13591 .data-table .data-table-pagination {
13593 align-items: center
;
13595 .data-table .input-cell {
13597 padding-bottom: 8px;
13599 vertical-align: top
;
13601 .data-table .input-cell .table-head-label + .input {
13604 .data-table .input-cell .input {
13605 height: var
(--f7-table-input-height
);
13607 .data-table
.input-cell
.input input
,
13608 .data-table
.input-cell
.input textarea
,
13609 .data-table .input-cell .input select {
13610 height: var
(--f7-table-input-height
);
13611 color: var
(--f7-table-input-text-color
);
13612 font-size: var
(--f7-table-input-font-size
);
13614 @media (max-width: 480px) and
(orientation: portrait
) {
13615 .data-table.data-table-collapsible thead {
13618 .data-table
.data-table-collapsible tbody
,
13619 .data-table
.data-table-collapsible tr
,
13620 .data-table.data-table-collapsible td {
13623 .data-table.data-table-collapsible tr {
13624 position: relative
;
13626 .data-table.data-table-collapsible tr:before {
13628 position: absolute
;
13629 background-color: var
(--f7-table-cell-border-color
);
13638 transform-origin: 50% 0%;
13639 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
13641 .data-table.data-table-collapsible tr:hover {
13642 background-color: inherit
;
13644 .data-table.data-table-collapsible td {
13645 --f7-table-cell-padding-left: var
(--f7-table-collapsible-cell-padding
);
13646 --f7-table-cell-padding-right: var
(--f7-table-collapsible-cell-padding
);
13648 min-height: var
(--f7-table-body-cell-height
);
13650 align-content: center
;
13651 align-items: center
;
13652 justify-content: flex-start
;
13655 .data-table.data-table-collapsible td:before {
13656 display: none
!important
;
13658 .data-table.data-table-collapsible td:not(.checkbox-cell):before {
13660 display: block
!important
;
13661 content: attr
(data-collapsible-title
);
13662 position: relative
;
13664 background: none
!important
;
13665 transform: none
!important
;
13666 font-size: var
(--f7-table-head-font-size
);
13667 font-weight: var
(--f7-table-head-font-weight
);
13668 color: var
(--f7-table-head-text-color
);
13669 margin-right: 16px;
13672 .data-table.data-table-collapsible td.checkbox-cell {
13673 position: absolute
;
13677 .data-table.data-table-collapsible td.checkbox-cell + td {
13678 padding-left: 16px;
13680 .data-table.data-table-collapsible td.checkbox-cell ~ td {
13684 .data-table
.tablet-only
,
13685 .data-table .tablet-landscape-only {
13688 @media (min-width: 768px) {
13689 .data-table .tablet-only {
13690 display: table-cell
;
13693 @media (min-width: 768px) and
(orientation: landscape
) {
13694 .data-table .tablet-landscape-only {
13695 display: table-cell
;
13698 .ios
.data-table th
.actions-cell a
.link
+ a
.link
,
13699 .ios .data-table td.actions-cell a.link + a.link {
13702 .ios .sortable-cell:not(.numeric-cell):after {
13705 .ios .sortable-cell.numeric-cell:before {
13708 .ios
.data-table-links a
.link
+ a
.link
,
13709 .ios
.data-table-actions a
.link
+ a
.link
,
13710 .ios
.data-table-links
.button
+ .button
,
13711 .ios .data-table-actions .button + .button {
13714 .ios .data-table-actions a.link.icon-only {
13718 .ios
.data-table-rows-select a
.link
,
13719 .ios .data-table-pagination a.link {
13723 .ios .data-table-rows-select + .data-table-pagination {
13726 .ios .data-table-rows-select .input {
13729 .ios .data-table-pagination-label {
13730 margin-right: 15px;
13732 .md
.data-table th
.actions-cell a
.link
+ a
.link
,
13733 .md .data-table td.actions-cell a.link + a.link {
13736 .md
.data-table th
.actions-cell a
.icon-only
,
13737 .md .data-table td.actions-cell a.icon-only {
13742 .md .sortable-cell:not(.numeric-cell):after {
13745 .md .sortable-cell.numeric-cell:before {
13748 .md
.data-table-links a
.link
+ a
.link
,
13749 .md
.data-table-actions a
.link
+ a
.link
,
13750 .md
.data-table-links
.button
+ .button
,
13751 .md .data-table-actions .button + .button {
13754 .md .data-table-actions a.link.icon-only {
13759 .md .data-table-actions a.link.icon-only.active-state {
13762 .md
.data-table-rows-select a
.link
,
13763 .md .data-table-pagination a.link {
13767 .md
.data-table-rows-select a
.link:before
,
13768 .md .data-table-pagination a.link:before {
13772 position: absolute
;
13775 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
13776 background-repeat: no-repeat
;
13777 background-position: center
;
13778 background-size: 100% 100%;
13780 pointer-events: none
;
13781 transition-duration: 600ms;
13783 .md
.data-table-rows-select a
.link
.active-state:before
,
13784 .md .data-table-pagination a.link.active-state:before {
13786 transition-duration: 150ms;
13788 .md .data-table-rows-select + .data-table-pagination {
13791 .md .data-table-rows-select .input {
13794 .md .data-table-pagination-label {
13795 margin-right: 20px;
13797 .md .input-cell .input-clear-button {
13798 transform: scale
(0.8);
13800 .aurora
.data-table th
.actions-cell a
.link
+ a
.link
,
13801 .aurora .data-table td.actions-cell a.link + a.link {
13804 .aurora .sortable-cell:not(.numeric-cell):after {
13807 .aurora .sortable-cell.numeric-cell:before {
13810 .aurora
.data-table-links a
.link
+ a
.link
,
13811 .aurora
.data-table-actions a
.link
+ a
.link
,
13812 .aurora
.data-table-links
.button
+ .button
,
13813 .aurora .data-table-actions .button + .button {
13816 .aurora
.data-table-rows-select a
.link
,
13817 .aurora .data-table-pagination a.link {
13821 .aurora .data-table-rows-select + .data-table-pagination {
13824 .aurora .data-table-rows-select .input {
13827 .aurora .data-table-pagination-label {
13828 margin-right: 10px;
13832 --f7-fab-text-color: #fff;
13833 --f7-fab-extended-text-font-size: 14px;
13834 --f7-fab-extended-text-padding: 0 20px;
13835 --f7-fab-label-bg-color: #fff;
13836 --f7-fab-label-text-color: #333;
13837 --f7-fab-label-border-radius: 4px;
13838 --f7-fab-label-padding: 4px 12px;
13839 --f7-fab-button-size: 40px;
13840 /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
13843 --f7-fab-size: 50px;
13844 --f7-fab-box-shadow: 0px 2px 4px rgba
(0, 0, 0, 0.4);
13845 --f7-fab-margin: 15px;
13846 --f7-fab-extended-size: 50px;
13847 --f7-fab-extended-text-font-weight: 400;
13848 --f7-fab-extended-text-letter-spacing: 0;
13849 --f7-fab-label-box-shadow: 0px 1px 2px rgba
(0, 0, 0, 0.4);
13850 --f7-fab-label-font-size: inherit
;
13853 --f7-fab-size: 56px;
13854 --f7-fab-box-shadow: var
(--f7-elevation-6
);
13855 --f7-fab-margin: 16px;
13856 --f7-fab-extended-size: 48px;
13857 --f7-fab-extended-text-font-weight: 500;
13858 --f7-fab-extended-text-letter-spacing: 0.03em;
13859 --f7-fab-label-box-shadow: var
(--f7-elevation-3
);
13860 --f7-fab-label-font-size: inherit
;
13863 --f7-fab-size: 40px;
13864 --f7-fab-box-shadow: 0px 2px 4px rgba
(0, 0, 0, 0.4);
13865 --f7-fab-margin: 15px;
13866 --f7-fab-extended-size: 38px;
13867 --f7-fab-extended-text-font-weight: 500;
13868 --f7-fab-extended-text-letter-spacing: 0;
13869 --f7-fab-label-box-shadow: 0px 1px 2px rgba
(0, 0, 0, 0.4);
13870 --f7-fab-label-font-size: 12px;
13873 position: absolute
;
13877 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
13879 .fab[class*="fab-left"] {
13880 left: calc
(var
(--f7-fab-margin
) + var
(--f7-safe-area-left
));
13882 .fab[class*="fab-right"] {
13883 right: calc
(var
(--f7-fab-margin
) + var
(--f7-safe-area-right
));
13885 .fab[class*="-top"] {
13886 top: var
(--f7-fab-margin
);
13888 .fab[class*="-bottom"] {
13889 bottom: calc
(var
(--f7-fab-margin
) + var
(--f7-safe-area-bottom
));
13891 .fab[class*="fab-center"] {
13893 transform: translateX
(-50%);
13895 .fab
[class
*="left-center"],
13896 .fab[class*="right-center"] {
13898 transform: translateY
(-50%);
13900 .fab[class*="center-center"] {
13903 transform: translateX
(-50%) translateY
(-50%);
13907 background-color: var
(--f7-fab-bg-color
, var
(--f7-theme-color
));
13908 width: var
(--f7-fab-size
);
13909 height: var
(--f7-fab-size
);
13910 box-shadow: var
(--f7-fab-box-shadow
);
13911 border-radius: calc
(var
(--f7-fab-size
) / 2);
13912 position: relative
;
13913 transition-duration: 300ms;
13915 align-items: center
;
13916 justify-content: center
;
13919 color: var
(--f7-fab-text-color
);
13921 .fab
> a
.active-state
,
13922 .fab-buttons a.active-state {
13923 background-color: var
(--f7-fab-pressed-bg-color
, var
(--f7-theme-color-shade
));
13926 position: absolute
;
13929 transform: translate3d
(-50%, -50%, 0) rotate
(0deg) scale
(1);
13933 transform: translate3d
(-50%, -50%, 0) rotate
(-90deg) scale
(0.5);
13937 border-radius: calc
(var
(--f7-fab-button-size
) / 2);
13938 width: var
(--f7-fab-button-size
);
13939 height: var
(--f7-fab-button-size
);
13943 visibility: hidden
;
13944 pointer-events: none
;
13945 position: absolute
;
13950 .fab-opened:not(.fab-morph) > a i {
13951 transform: translate3d
(-50%, -50%, 0) rotate
(90deg) scale
(0.5);
13954 .fab-opened:not(.fab-morph) > a i + i {
13955 transform: translate3d
(-50%, -50%, 0) rotate
(0deg) scale
(1);
13958 .fab-opened .fab-buttons {
13959 visibility: visible
;
13960 pointer-events: auto
;
13962 .fab-opened .fab-buttons a {
13964 transform: translate3d
(0, 0px, 0) scale
(1) !important
;
13966 .fab-opened .fab-buttons a:nth-child(2) {
13967 transition-delay: 50ms;
13969 .fab-opened .fab-buttons a:nth-child(3) {
13970 transition-delay: 100ms;
13972 .fab-opened .fab-buttons a:nth-child(4) {
13973 transition-delay: 150ms;
13975 .fab-opened .fab-buttons a:nth-child(5) {
13976 transition-delay: 200ms;
13978 .fab-opened .fab-buttons a:nth-child(6) {
13979 transition-delay: 250ms;
13982 .fab-buttons-bottom {
13984 width: var
(--f7-fab-button-size
);
13985 margin-left: calc
(-1 * var
(--f7-fab-button-size
) / 2);
13989 margin-bottom: 16px;
13990 flex-direction: column-reverse
;
13992 .fab-buttons-top a {
13993 transform: translate3d
(0, 8px, 0) scale
(0.3);
13994 transform-origin: center bottom
;
13996 .fab-buttons-top a + a {
13997 margin-bottom: 16px;
13999 .fab-buttons-bottom {
14002 flex-direction: column
;
14004 .fab-buttons-bottom a {
14005 transform: translate3d
(0, -8px, 0) scale
(0.3);
14006 transform-origin: center top
;
14008 .fab-buttons-bottom a + a {
14012 .fab-buttons-right {
14014 height: var
(--f7-fab-button-size
);
14015 margin-top: calc
(-1 * var
(--f7-fab-button-size
) / 2);
14017 .fab-buttons-left {
14019 margin-right: 16px;
14020 flex-direction: row-reverse
;
14022 .fab-buttons-left a {
14023 transform: translate3d
(8px, 0px, 0) scale
(0.3);
14024 transform-origin: right center
;
14026 .fab-buttons-left a + a {
14027 margin-right: 16px;
14029 .fab-buttons-right {
14033 .fab-buttons-right a {
14034 transform: translate3d
(-8px, 0, 0) scale
(0.3);
14035 transform-origin: left center
;
14037 .fab-buttons-right a + a {
14040 .fab-buttons-center {
14046 .fab-buttons-center a {
14047 position: absolute
;
14049 .fab-buttons-center a:nth-child(1) {
14051 margin-left: calc
(-1 * var
(--f7-fab-button-size
) / 2);
14053 margin-bottom: 16px;
14054 transform: translateY
(-8px) scale
(0.3);
14055 transform-origin: center bottom
;
14057 .fab-buttons-center a:nth-child(2) {
14059 margin-top: calc
(-1 * var
(--f7-fab-button-size
) / 2);
14062 transform: translateX
(-8px) scale
(0.3);
14063 transform-origin: left center
;
14065 .fab-buttons-center a:nth-child(3) {
14067 margin-left: calc
(-1 * var
(--f7-fab-button-size
) / 2);
14070 transform: translateY
(8px) scale
(0.3);
14071 transform-origin: center top
;
14073 .fab-buttons-center a:nth-child(4) {
14075 margin-top: calc
(-1 * var
(--f7-fab-button-size
) / 2);
14077 margin-right: 16px;
14078 transform: translateX
(8px) scale
(0.3);
14079 transform-origin: right center
;
14082 border-radius: calc
(var
(--f7-fab-size
) / 2);
14083 background: var
(--f7-fab-bg-color
, var
(--f7-theme-color
));
14084 box-shadow: var
(--f7-fab-box-shadow
);
14088 background: none
!important
;
14090 .fab-opened.fab-morph > a i {
14095 .fab-morph-target {
14096 transition-duration: 250ms;
14098 .fab-morph-target:not(.fab-morph-target-visible) {
14103 min-width: var
(--f7-fab-extended-size
);
14105 .fab-extended > a {
14107 height: var
(--f7-fab-extended-size
);
14109 .fab-extended > a i {
14110 left: calc
(var
(--f7-fab-extended-size
) / 2);
14112 .fab-extended i ~ .fab-text {
14113 padding-left: var
(--f7-fab-extended-size
);
14115 .fab-extended > a {
14116 width: 100% !important
;
14119 box-sizing: border-box
;
14120 font-size: var
(--f7-fab-extended-text-font-size
);
14121 padding: var
(--f7-fab-extended-text-padding
);
14122 font-weight: var
(--f7-fab-extended-text-font-weight
);
14123 letter-spacing: var
(--f7-fab-extended-text-letter-spacing
);
14124 text-transform: uppercase
;
14126 .fab-label-button {
14127 overflow: visible
!important
;
14130 position: absolute
;
14132 padding: var
(--f7-fab-label-padding
);
14133 border-radius: var
(--f7-fab-label-border-radius
);
14134 background: var
(--f7-fab-label-bg-color
);
14135 color: var
(--f7-fab-label-text-color
);
14136 box-shadow: var
(--f7-fab-label-box-shadow
);
14137 white-space: nowrap
;
14138 transform: translateY
(-50%);
14139 pointer-events: none
;
14140 font-size: var
(--f7-fab-label-font-size
);
14142 .fab[class*="fab-right-"] .fab-label {
14146 .fab[class*="fab-left-"] .fab-label {
14150 .navbar
~ * .fab
[class
*="-top"],
14151 .navbar ~ .fab[class*="-top"] {
14152 margin-top: var
(--f7-navbar-height
);
14154 .toolbar-top
~ * .fab
[class
*="-top"],
14155 .toolbar-top
~ .fab
[class
*="-top"],
14156 .ios
.toolbar-top-ios
~ * .fab
[class
*="-top"],
14157 .ios
.toolbar-top-ios
~ .fab
[class
*="-top"],
14158 .md
.toolbar-top-md
~ * .fab
[class
*="-top"],
14159 .md .toolbar-top-md ~ .fab[class*="-top"] {
14160 margin-top: var
(--f7-toolbar-height
);
14162 .toolbar-bottom
~ * .fab
[class
*="-bottom"],
14163 .toolbar-bottom
~ .fab
[class
*="-bottom"],
14164 .ios
.toolbar-bottom-ios
~ * .fab
[class
*="-bottom"],
14165 .ios
.toolbar-bottom-ios
~ .fab
[class
*="-bottom"],
14166 .md
.toolbar-bottom-md
~ * .fab
[class
*="-bottom"],
14167 .md .toolbar-bottom-md ~ .fab[class*="-bottom"] {
14168 margin-bottom: var
(--f7-toolbar-height
);
14170 .tabbar-labels
.toolbar-bottom
~ * .fab
[class
*="-bottom"],
14171 .tabbar-labels
.toolbar-bottom
~ .fab
[class
*="-bottom"],
14172 .ios
.tabbar-labels
.toolbar-bottom-ios
~ * .fab
[class
*="-bottom"],
14173 .ios
.tabbar-labels
.toolbar-bottom-ios
~ .fab
[class
*="-bottom"],
14174 .md
.tabbar-labels
.toolbar-bottom-md
~ * .fab
[class
*="-bottom"],
14175 .md .tabbar-labels.toolbar-bottom-md ~ .fab[class*="-bottom"] {
14176 margin-bottom: var
(--f7-tabbar-labels-height
);
14178 .tabbar-labels
.toolbar-top
~ * .fab
[class
*="-bottom"],
14179 .tabbar-labels
.toolbar-top
~ .fab
[class
*="-bottom"],
14180 .ios
.tabbar-labels
.toolbar-top-ios
~ * .fab
[class
*="-bottom"],
14181 .ios
.tabbar-labels
.toolbar-top-ios
~ .fab
[class
*="-bottom"],
14182 .md
.tabbar-labels
.toolbar-top-md
~ * .fab
[class
*="-bottom"],
14183 .md .tabbar-labels.toolbar-top-md ~ .fab[class*="-bottom"] {
14184 margin-top: var
(--f7-tabbar-labels-height
);
14186 .messagebar
~ * .fab
[class
*="-bottom"],
14187 .messagebar ~ .fab[class*="-bottom"] {
14188 margin-bottom: var
(--f7-messagebar-height
);
14190 .navbar
+ .toolbar-top
~ * .fab
[class
*="-top"],
14191 .ios
.navbar
+ .toolbar-top-ios
~ * .fab
[class
*="-top"],
14192 .md
.navbar
+ .toolbar-top-ios
~ * .fab
[class
*="-top"],
14193 .navbar
+ .toolbar-top
~ .fab
[class
*="-top"],
14194 .ios
.navbar
+ .toolbar-top-ios
~ .fab
[class
*="-top"],
14195 .md .navbar + .toolbar-top-ios ~ .fab[class*="-top"] {
14196 margin-top: calc
(var
(--f7-toolbar-height
) + var
(--f7-navbar-height
));
14198 .navbar
+ .toolbar-top
.tabbar-labels
~ * .fab
[class
*="-top"],
14199 .ios
.navbar
+ .toolbar-top-ios
.tabbar-labels
~ * .fab
[class
*="-top"],
14200 .md
.navbar
+ .toolbar-top-ios
.tabbar-labels
~ * .fab
[class
*="-top"],
14201 .navbar
+ .toolbar-top
.tabbar-labels
~ .fab
[class
*="-top"],
14202 .ios
.navbar
+ .toolbar-top-ios
.tabbar-labels
~ .fab
[class
*="-top"],
14203 .md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"] {
14204 margin-top: calc
(var
(--f7-tabbar-labels-height
) + var
(--f7-navbar-height
));
14206 .ios
.fab
> a
.active-state
,
14207 .ios .fab-buttons a.active-state {
14208 transition-duration: 0ms;
14210 /* === Searchbar === */
14213 --f7-searchbar-link-color: var(--f7-bars-link-color);
14215 --f7-searchbar-input-border-width: 0px;
14216 --f7-searchbar-input-border-color: transparent
;
14217 --f7-searchbar-input-text-color: #000;
14218 --f7-searchbar-placeholder-color: #939398;
14222 --f7-searchbar-input-text-color: #fff;
14226 --f7-searchbar-bg-image: var(--f7-bars-bg-image);
14227 --f7-searchbar-bg-color: var(--f7-bars-bg-color);
14228 --f7-searchbar-border-color: var(--f7-bars-border-color);
14230 --f7-searchbar-height: 44px;
14231 --f7-searchbar-inner-padding-left: 8px;
14232 --f7-searchbar-inner-padding-right: 8px;
14234 --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
14236 --f7-searchbar-search-icon-color: #939398;
14237 --f7-searchbar-input-font-size: 17px;
14238 --f7-searchbar-input-bg-color: #e8e8ea;
14239 --f7-searchbar-input-border-radius: 8px;
14240 --f7-searchbar-input-height: 32px;
14241 --f7-searchbar-input-padding-horizontal: 28px;
14243 --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
14244 --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
14245 --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
14246 --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
14248 --f7-searchbar-backdrop-bg-color: rgba
(0, 0, 0, 0.4);
14249 --f7-searchbar-shadow-image: none
;
14250 --f7-searchbar-in-page-content-margin: 0px;
14251 --f7-searchbar-in-page-content-box-shadow: none
;
14252 --f7-searchbar-in-page-content-border-radius: 0;
14253 --f7-searchbar-in-page-content-input-border-radius: 0;
14257 --f7-searchbar-bg-color: #303030;
14258 --f7-searchbar-input-bg-color: #171717;
14261 --f7-searchbar-bg-color: #fff;
14262 --f7-searchbar-border-color: transparent
;
14263 --f7-searchbar-height: 48px;
14264 --f7-searchbar-inner-padding-left: 0px;
14265 --f7-searchbar-inner-padding-right: 0px;
14266 --f7-searchbar-link-color: #737373;
14267 --f7-searchbar-search-icon-color: #737373;
14268 --f7-searchbar-input-font-size: 20px;
14269 --f7-searchbar-input-bg-color: #fff;
14270 --f7-searchbar-input-border-radius: 0px;
14271 --f7-searchbar-input-height: 100%;
14272 --f7-searchbar-input-padding-horizontal: 48px;
14274 --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
14275 --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
14277 --f7-searchbar-inline-input-padding-horizontal: 24px;
14278 --f7-searchbar-input-clear-button-color: #737373;
14279 --f7-searchbar-backdrop-bg-color: rgba
(0, 0, 0, 0.25);
14280 --f7-searchbar-shadow-image: var
(--f7-bars-shadow-bottom-image
);
14281 --f7-searchbar-in-page-content-margin: 8px;
14282 --f7-searchbar-in-page-content-box-shadow: var
(--f7-elevation-1
);
14283 --f7-searchbar-in-page-content-border-radius: 4px;
14284 --f7-searchbar-in-page-content-input-border-radius: 4px;
14288 --f7-searchbar-bg-color: #222222;
14289 --f7-searchbar-input-bg-color: #222222;
14293 --f7-searchbar-bg-image: var(--f7-bars-bg-image);
14294 --f7-searchbar-bg-color: var(--f7-bars-bg-color);
14295 --f7-searchbar-border-color: var(--f7-bars-border-color);
14297 --f7-searchbar-height: 38px;
14298 --f7-searchbar-inner-padding-left: 8px;
14299 --f7-searchbar-inner-padding-right: 8px;
14301 --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
14303 --f7-searchbar-search-icon-color: #939398;
14304 --f7-searchbar-input-font-size: 13px;
14305 --f7-searchbar-input-bg-color: #fff;
14306 --f7-searchbar-input-border-radius: 4px;
14307 --f7-searchbar-input-height: 24px;
14308 --f7-searchbar-input-padding-horizontal: 24px;
14310 --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
14311 --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
14312 --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal;
14313 --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
14315 --f7-searchbar-backdrop-bg-color: rgba
(0, 0, 0, 0.4);
14316 --f7-searchbar-shadow-image: none
;
14317 --f7-searchbar-in-page-content-margin: 0px;
14318 --f7-searchbar-in-page-content-box-shadow: none
;
14319 --f7-searchbar-in-page-content-border-radius: 0;
14321 --f7-searchbar-in-page-content-input-border-radius: var(--f7-searchbar-input-border-radius);
14324 .aurora
.theme-dark
,
14325 .aurora.theme-dark {
14326 --f7-searchbar-input-bg-color: #333;
14330 position: relative
;
14332 height: var
(--f7-searchbar-height
);
14333 background-image: var
(--f7-searchbar-bg-image
, var
(--f7-bars-bg-image
));
14334 background-color: var
(--f7-searchbar-bg-color
, var
(--f7-bars-bg-color
, var
(--f7-theme-color
)));
14336 .searchbar
.no-hairline:after
,
14337 .searchbar.no-border:after {
14338 display: none
!important
;
14340 .searchbar.no-shadow:before {
14341 display: none
!important
;
14345 position: absolute
;
14346 background-color: var
(--f7-searchbar-border-color
, var
(--f7-bars-border-color
));
14355 transform-origin: 50% 100%;
14356 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
14358 .page > .searchbar:not(.searchbar-inline) {
14361 .page > .searchbar:not(.searchbar-inline):before {
14363 position: absolute
;
14369 pointer-events: none
;
14370 background: var
(--f7-searchbar-shadow-image
);
14372 .searchbar input
[type
="text"],
14373 .searchbar input[type="search"] {
14374 box-sizing: border-box
;
14378 border: var
(--f7-searchbar-input-border-width
) solid var
(--f7-searchbar-input-border-color
);
14379 -webkit-appearance: none
;
14380 -moz-appearance: none
;
14382 font-family: inherit
;
14383 font-weight: normal
;
14384 color: var
(--f7-searchbar-input-text-color
);
14385 font-size: var
(--f7-searchbar-input-font-size
);
14386 background-color: var
(--f7-searchbar-input-bg-color
);
14387 border-radius: var
(--f7-searchbar-input-border-radius
);
14388 position: relative
;
14390 padding-left: calc
(var
(--f7-searchbar-input-padding-horizontal
) + var
(--f7-searchbar-input-extra-padding-left
, 0px));
14391 padding-right: calc
(var
(--f7-searchbar-input-padding-horizontal
) + var
(--f7-searchbar-input-extra-padding-right
, 0px));
14393 .searchbar input
[type
="text"]::-webkit-input-placeholder
,
14394 .searchbar input[type="search"]::-webkit-input-placeholder {
14395 color: var
(--f7-searchbar-placeholder-color
);
14398 .searchbar input
[type
="text"]::-moz-placeholder
,
14399 .searchbar input[type="search"]::-moz-placeholder {
14400 color: var
(--f7-searchbar-placeholder-color
);
14403 .searchbar input
[type
="text"]::-ms-input-placeholder
,
14404 .searchbar input[type="search"]::-ms-input-placeholder {
14405 color: var
(--f7-searchbar-placeholder-color
);
14408 .searchbar input
[type
="text"]::placeholder
,
14409 .searchbar input[type="search"]::placeholder {
14410 color: var
(--f7-searchbar-placeholder-color
);
14413 .searchbar input::-webkit-search-cancel-button {
14414 -webkit-appearance: none
;
14417 .searchbar .searchbar-input-wrap {
14420 height: var
(--f7-searchbar-input-height
);
14421 position: relative
;
14424 color: var
(--f7-searchbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
14426 .page > .searchbar:not(.searchbar-inline) {
14427 position: absolute
;
14431 .page-content .searchbar:not(.searchbar-inline) {
14432 border-radius: var
(--f7-searchbar-in-page-content-border-radius
);
14433 margin: var
(--f7-searchbar-in-page-content-margin
);
14435 box-shadow: var
(--f7-searchbar-in-page-content-box-shadow
);
14437 .page-content
.searchbar:not
(.searchbar-inline
) .searchbar-inner
,
14438 .page-content
.searchbar:not
(.searchbar-inline
) input
[type
="text"],
14439 .page-content .searchbar:not(.searchbar-inline) input[type="search"] {
14440 border-radius: var
(--f7-searchbar-in-page-content-input-border-radius
, var
(--f7-searchbar-input-border-radius
));
14442 .searchbar .input-clear-button {
14443 color: var
(--f7-searchbar-input-clear-button-color
, var
(--f7-input-clear-button-color
));
14445 .searchbar-expandable {
14446 position: absolute
;
14447 transition-duration: 300ms;
14448 pointer-events: none
;
14450 .navbar-inner-large .searchbar-expandable:after {
14451 display: none
!important
;
14453 .navbar .searchbar.searchbar-expandable {
14454 --f7-searchbar-expandable-size: var
(--f7-navbar-height
);
14456 .toolbar .searchbar.searchbar-expandable {
14457 --f7-searchbar-expandable-size: var
(--f7-toolbar-height
);
14459 .subnavbar .searchbar.searchbar-expandable {
14460 --f7-searchbar-expandable-size: var
(--f7-subnavbar-height
);
14462 .tabbar-labels .searchbar.searchbar-expandable {
14463 --f7-searchbar-expandable-size: var
(--f7-tabbar-labels-height
);
14466 position: absolute
;
14472 align-items: center
;
14473 box-sizing: border-box
;
14474 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
));
14476 .searchbar-disable-button {
14478 pointer-events: none
;
14479 -webkit-appearance: none
;
14480 -moz-appearance: none
;
14491 pointer-events: none
;
14492 background-position: center
;
14493 background-repeat: no-repeat
;
14495 .searchbar-icon:after {
14496 color: var
(--f7-searchbar-search-icon-color
);
14497 font-family: 'framework7-core-icons';
14498 font-weight: normal
;
14499 font-style: normal
;
14501 letter-spacing: normal
;
14502 text-transform: none
;
14503 white-space: nowrap
;
14506 -webkit-font-smoothing: antialiased
;
14507 text-rendering: optimizeLegibility
;
14508 -moz-osx-font-smoothing: grayscale
;
14509 -moz-font-feature-settings: "liga";
14510 font-feature-settings: "liga";
14511 text-align: center
;
14517 .searchbar-backdrop {
14518 position: absolute
;
14525 pointer-events: none
;
14526 transition-duration: 300ms;
14527 transform: translate3d
(0, 0, 0);
14528 background: var
(--f7-searchbar-backdrop-bg-color
);
14530 .searchbar-backdrop.searchbar-backdrop-in {
14532 pointer-events: auto
;
14534 .page-content > .searchbar-backdrop {
14537 .searchbar-not-found {
14540 .hidden-by-searchbar
,
14541 .list
.hidden-by-searchbar
,
14542 .list
.li
.hidden-by-searchbar
,
14543 .list li.hidden-by-searchbar {
14544 display: none
!important
;
14546 .navbar
.with-searchbar-expandable-enabled
,
14547 .navbar-inner.with-searchbar-expandable-enabled {
14548 --f7-navbar-large-collapse-progress: 1;
14550 .navbar
.with-searchbar-expandable-enabled
.title-large
,
14551 .navbar-inner
.with-searchbar-expandable-enabled
.title-large
,
14552 .navbar
.with-searchbar-expandable-enabled
.title-large-text
,
14553 .navbar-inner
.with-searchbar-expandable-enabled
.title-large-text
,
14554 .navbar
.with-searchbar-expandable-enabled
.title-large-inner
,
14555 .navbar-inner.with-searchbar-expandable-enabled .title-large-inner {
14556 transition-duration: 300ms;
14558 .page-content.with-searchbar-expandable-enabled {
14559 height: calc
(100% + var
(--f7-navbar-large-title-height
));
14560 transform: translateY
(calc
(-1 * var
(--f7-navbar-large-title-height
)));
14561 transition-duration: 300ms;
14562 transition-property: transform
;
14564 .navbar
~ .page:not
(.no-navbar
) > .searchbar
,
14565 .page > .navbar ~ .searchbar {
14566 top: var
(--f7-navbar-height
);
14568 .navbar
~ .page-with-navbar-large:not
(.no-navbar
) .searchbar
,
14569 .page-with-navbar-large
.navbar
~ .searchbar
,
14570 .page-with-navbar-large .navbar ~ * .searchbar {
14571 top: calc
(var
(--f7-navbar-height
) + var
(--f7-navbar-large-title-height
));
14572 transform: translate3d
(0, calc
(-1 * var
(--f7-navbar-large-collapse-progress
) * var
(--f7-navbar-large-title-height
)), 0);
14575 --f7-page-searchbar-offset: var
(--f7-searchbar-height
);
14577 .page
> .toolbar-top
~ .searchbar
,
14578 .ios
.page
> .toolbar-top-ios
~ .searchbar
,
14579 .md
.page
> .toolbar-top-md
~ .searchbar
,
14580 .aurora .page > .toolbar-top-aurora ~ .searchbar {
14581 top: var
(--f7-toolbar-height
);
14583 .page
> .tabbar-labels
.toolbar-top
~ .searchbar
,
14584 .ios
.page
> .tabbar-labels
.toolbar-top-ios
~ .searchbar
,
14585 .md
.page
> .tabbar-labels
.toolbar-top-md
~ .searchbar
,
14586 .aurora .page > .tabbar-labels.toolbar-top-aurora ~ .searchbar {
14587 top: var
(--f7-tabbar-labels-height
);
14589 .page
> .navbar
~ .toolbar-top
~ .searchbar
,
14590 .ios
.page
> .navbar
~ .toolbar-top-ios
~ .searchbar
,
14591 .md
.page
> .navbar
~ .toolbar-top-md
~ .searchbar
,
14592 .aurora .page > .navbar ~ .toolbar-top-aurora ~ .searchbar {
14593 top: calc
(var
(--f7-navbar-height
) + var
(--f7-toolbar-height
));
14595 .page
> .navbar
~ .tabbar-labels
.toolbar-top
~ .searchbar
,
14596 .ios
.page
> .navbar
~ .tabbar-labels
.toolbar-top-ios
~ .searchbar
,
14597 .md
.page
> .navbar
~ .tabbar-labels
.toolbar-top-md
~ .searchbar
,
14598 .aurora .page > .navbar ~ .tabbar-labels.toolbar-top-aurora ~ .searchbar {
14599 top: calc
(var
(--f7-navbar-height
) + var
(--f7-tabbar-labels-height
));
14601 .searchbar.searchbar-inline {
14604 background-color: transparent
;
14605 background-image: none
;
14607 .searchbar
.searchbar-inline:after
,
14608 .searchbar.searchbar-inline:before {
14609 display: none
!important
;
14611 .searchbar.searchbar-inline .searchbar-input-wrap {
14612 height: var
(--f7-searchbar-inline-input-height
, var
(--f7-searchbar-input-height
));
14614 .searchbar.searchbar-inline .searchbar-inner {
14620 .searchbar
.searchbar-inline input
[type
="text"],
14621 .searchbar.searchbar-inline input[type="search"] {
14622 font-size: var
(--f7-searchbar-inline-input-font-size
, var
(--f7-searchbar-input-font-size
));
14623 padding-left: calc
(var
(--f7-searchbar-inline-input-padding-horizontal
, var
(--f7-searchbar-input-padding-horizontal
)) + var
(--f7-searchbar-input-extra-padding-left
, 0px));
14624 padding-right: calc
(var
(--f7-searchbar-inline-input-padding-horizontal
, var
(--f7-searchbar-input-padding-horizontal
)) + var
(--f7-searchbar-input-extra-padding-right
, 0px));
14626 .ios
.searchbar input
[type
="search"],
14627 .ios .searchbar input[type="text"] {
14630 .ios .searchbar .input-clear-button {
14634 .ios .searchbar-icon {
14637 position: absolute
;
14643 .ios .searchbar-icon:after {
14644 content: 'search_ios';
14647 .ios .searchbar-disable-button {
14650 transform: translate3d
(0, 0, 0);
14651 transition-duration: 300ms;
14652 color: var
(--f7-searchbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
14655 .ios .searchbar-disable-button.active-state {
14656 transition-duration: 0ms;
14657 opacity: 0.3 !important
;
14659 .ios .searchbar-enabled .searchbar-disable-button {
14660 pointer-events: auto
;
14664 .ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
14665 transition-duration: 300ms !important
;
14667 .ios .searchbar-expandable {
14668 --f7-searchbar-expandable-size: var
(--f7-searchbar-height
);
14674 transform: translate3d
(0, 0, 0);
14677 .ios .searchbar-expandable .searchbar-disable-button {
14682 .ios .searchbar-expandable .searchbar-inner {
14683 height: var
(--f7-searchbar-expandable-size
);
14685 .ios
.navbar-inner
.with-searchbar-expandable-enabled
.left
,
14686 .ios
.navbar-inner
.with-searchbar-expandable-enabled
.title
,
14687 .ios .navbar-inner.with-searchbar-expandable-enabled .right {
14688 transform: translateY
(calc
(-1 * var
(--f7-navbar-height
)));
14692 .ios .searchbar-expandable.searchbar-enabled {
14694 height: var
(--f7-searchbar-expandable-size
);
14695 pointer-events: auto
;
14697 .md
.searchbar-icon
,
14698 .md .searchbar-disable-button {
14699 position: absolute
;
14700 left: calc
(-4px + var
(--f7-safe-area-left
));
14702 transition-duration: 300ms;
14704 .md .searchbar-icon {
14710 .md .searchbar-icon:after {
14711 content: 'search_md';
14714 .md .searchbar-disable-button {
14717 transform: rotate
(-90deg) scale
(0.5);
14718 font-size: 0 !important
;
14721 color: var
(--f7-searchbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
14723 .md .searchbar-disable-button:before {
14727 position: absolute
;
14730 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
14731 background-repeat: no-repeat
;
14732 background-position: center
;
14733 background-size: 100% 100%;
14735 pointer-events: none
;
14736 transition-duration: 600ms;
14738 .md .searchbar-disable-button.active-state:before {
14740 transition-duration: 150ms;
14742 .md .searchbar-disable-button:after {
14743 font-family: 'framework7-core-icons';
14744 font-weight: normal
;
14745 font-style: normal
;
14747 letter-spacing: normal
;
14748 text-transform: none
;
14749 white-space: nowrap
;
14752 -webkit-font-smoothing: antialiased
;
14753 text-rendering: optimizeLegibility
;
14754 -moz-osx-font-smoothing: grayscale
;
14755 -moz-font-feature-settings: "liga";
14756 font-feature-settings: "liga";
14757 text-align: center
;
14763 content: "arrow_left_md";
14765 .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button {
14766 transform: rotate
(0deg) scale
(1);
14767 pointer-events: auto
;
14770 .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon {
14772 transform: rotate
(90deg) scale
(0.5);
14775 --f7-searchbar-input-extra-padding-left: 17px;
14777 .md .searchbar .input-clear-button {
14783 .md .searchbar .input-clear-button:before {
14787 position: absolute
;
14790 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
14791 background-repeat: no-repeat
;
14792 background-position: center
;
14793 background-size: 100% 100%;
14795 pointer-events: none
;
14796 transition-duration: 600ms;
14798 .md .searchbar .input-clear-button.active-state:before {
14800 transition-duration: 150ms;
14802 .md .searchbar .input-clear-button:after {
14804 content: 'delete_md';
14807 .md .searchbar .input-clear-button:before {
14811 .md
.page
> .searchbar
,
14812 .md
.subnavbar
.searchbar
,
14813 .md .searchbar-expandable {
14814 --f7-searchbar-input-extra-padding-left: calc
(17px + 8px);
14816 .md
.page
> .searchbar
.searchbar-icon
,
14817 .md
.subnavbar
.searchbar
.searchbar-icon
,
14818 .md
.searchbar-expandable
.searchbar-icon
,
14819 .md
.page
> .searchbar
.searchbar-disable-button
,
14820 .md
.subnavbar
.searchbar
.searchbar-disable-button
,
14821 .md .searchbar-expandable .searchbar-disable-button {
14822 left: calc
(-4px + 8px + var
(--f7-safe-area-left
));
14824 .md .searchbar-expandable {
14825 --f7-searchbar-expandable-size: var
(--f7-searchbar-height
);
14829 border-radius: calc
(var
(--f7-searchbar-expandable-size
));
14830 width: calc
(var
(--f7-searchbar-expandable-size
));
14831 margin-top: calc
(var
(--f7-searchbar-expandable-size
) * -1 / 2);
14832 transform: translate3d
(0px, 0px, 0px);
14834 margin-left: calc
(var
(--f7-searchbar-expandable-size
) * -1);
14836 .md .searchbar-expandable.searchbar-enabled {
14840 pointer-events: auto
;
14846 .aurora
.searchbar input
[type
="search"],
14847 .aurora .searchbar input[type="text"] {
14850 .aurora .searchbar .input-clear-button {
14854 .aurora .searchbar-icon {
14857 position: absolute
;
14863 .aurora .searchbar-icon:after {
14864 content: 'search_aurora';
14867 .aurora .searchbar-disable-button {
14870 transform: translate3d
(0, 0, 0);
14871 transition-duration: 300ms;
14872 color: var
(--f7-searchbar-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
14875 .aurora .searchbar-disable-button.active-state {
14876 transition-duration: 0ms;
14877 opacity: 0.3 !important
;
14879 .aurora .searchbar-enabled .searchbar-disable-button {
14880 pointer-events: auto
;
14884 .aurora .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
14885 transition-duration: 300ms !important
;
14887 .aurora .searchbar-expandable {
14888 --f7-searchbar-expandable-size: var
(--f7-searchbar-height
);
14893 transform: translate3d
(0, 0%, 0);
14896 .aurora .searchbar-expandable .searchbar-disable-button {
14901 .aurora .searchbar-expandable .searchbar-inner {
14902 height: var
(--f7-searchbar-expandable-size
);
14904 .aurora .searchbar-expandable.searchbar-enabled {
14906 pointer-events: auto
;
14908 /* === Messages === */
14910 --f7-messages-content-bg-color: #fff;
14911 --f7-message-text-header-text-color: inherit
;
14912 --f7-message-text-header-opacity: 0.65;
14913 --f7-message-text-header-font-size: 12px;
14914 --f7-message-text-footer-text-color: inherit
;
14915 --f7-message-text-footer-opacity: 0.65;
14916 --f7-message-text-footer-font-size: 12px;
14917 --f7-message-bubble-line-height: 1.2;
14918 --f7-message-header-font-size: 12px;
14919 --f7-message-footer-font-size: 11px;
14920 --f7-message-name-font-size: 12px;
14921 --f7-message-name-font-weight: inherit
;
14922 --f7-message-typing-indicator-bg-color: #000;
14923 --f7-message-avatar-border-radius: 50%;
14924 --f7-messages-title-font-weight: inherit
;
14926 --f7-message-sent-bg-color: var(--f7-theme-color);
14928 --f7-message-sent-text-color: #fff;
14929 --f7-message-received-bg-color: #e5e5ea;
14930 --f7-message-received-text-color: #000;
14934 --f7-messages-content-bg-color: transparent
;
14935 --f7-message-received-bg-color: #333;
14936 --f7-message-received-text-color: #fff;
14937 --f7-message-typing-indicator-bg-color: #fff;
14940 --f7-messages-title-text-color: #8e8e93;
14941 --f7-messages-title-font-size: 11px;
14942 --f7-message-header-text-color: #8e8e93;
14943 --f7-message-footer-text-color: #8e8e93;
14944 --f7-message-name-text-color: #8e8e93;
14945 --f7-message-avatar-size: 29px;
14946 --f7-message-margin: 10px;
14947 --f7-message-bubble-min-height: 32px;
14948 --f7-message-bubble-font-size: 17px;
14949 --f7-message-bubble-border-radius: 16px;
14950 --f7-message-bubble-padding-vertical: 6px;
14951 --f7-message-bubble-padding-horizontal: 16px;
14952 --f7-message-typing-indicator-opacity: 0.35;
14955 --f7-messages-title-text-color: rgba
(0, 0, 0, 0.51);
14956 --f7-messages-title-font-size: 12px;
14957 --f7-message-header-text-color: rgba
(0, 0, 0, 0.51);
14958 --f7-message-footer-text-color: rgba
(0, 0, 0, 0.51);
14959 --f7-message-name-text-color: rgba
(0, 0, 0, 0.51);
14960 --f7-message-avatar-size: 32px;
14961 --f7-message-margin: 16px;
14962 --f7-message-bubble-min-height: 32px;
14963 --f7-message-bubble-font-size: 16px;
14964 --f7-message-bubble-border-radius: 4px;
14965 --f7-message-bubble-padding-vertical: 6px;
14966 --f7-message-bubble-padding-horizontal: 8px;
14967 --f7-message-typing-indicator-opacity: 0.6;
14971 --f7-messages-title-text-color: rgba
(255, 255, 255, 0.54);
14972 --f7-message-header-text-color: rgba
(255, 255, 255, 0.54);
14973 --f7-message-name-text-color: rgba
(255, 255, 255, 0.54);
14974 --f7-message-footer-text-color: rgba
(255, 255, 255, 0.54);
14977 --f7-messages-title-text-color: rgba
(0, 0, 0, 0.51);
14978 --f7-messages-title-font-size: 12px;
14979 --f7-message-header-text-color: rgba
(0, 0, 0, 0.51);
14980 --f7-message-footer-text-color: rgba
(0, 0, 0, 0.51);
14981 --f7-message-name-text-color: rgba
(0, 0, 0, 0.51);
14982 --f7-message-avatar-size: 24px;
14983 --f7-message-margin: 10px;
14984 --f7-message-bubble-min-height: 28px;
14985 --f7-message-bubble-font-size: 13px;
14986 --f7-message-bubble-line-height: 1.4;
14987 --f7-message-bubble-border-radius: 14px;
14988 --f7-message-bubble-padding-vertical: 5px;
14989 --f7-message-bubble-padding-horizontal: 10px;
14990 --f7-message-typing-indicator-opacity: 0.5;
14992 .aurora
.theme-dark
,
14993 .aurora.theme-dark {
14994 --f7-messages-title-text-color: rgba
(255, 255, 255, 0.52);
14995 --f7-message-header-text-color: rgba
(255, 255, 255, 0.52);
14996 --f7-message-name-text-color: rgba
(255, 255, 255, 0.52);
14997 --f7-message-footer-text-color: rgba
(255, 255, 255, 0.52);
15001 background: var
(--f7-messages-content-bg-color
);
15005 flex-direction: column
;
15007 position: relative
;
15012 margin-top: var
(--f7-message-margin
);
15014 .messages-title:last-child
,
15015 .message:last-child {
15016 margin-bottom: var
(--f7-message-margin
);
15019 text-align: center
;
15022 color: var
(--f7-messages-title-text-color
);
15023 font-size: var
(--f7-messages-title-font-size
);
15024 font-weight: var
(--f7-messages-title-font-weight
);
15028 box-sizing: border-box
;
15030 align-items: flex-end
;
15031 position: relative
;
15033 transform: translate3d
(0, 0, 0);
15036 border-radius: var
(--f7-message-avatar-border-radius
);
15037 position: relative
;
15038 background-size: cover
;
15039 align-self: flex-end
;
15041 width: var
(--f7-message-avatar-size
);
15042 height: var
(--f7-message-avatar-size
);
15045 position: relative
;
15047 flex-direction: column
;
15055 color: var
(--f7-message-header-text-color
);
15056 font-size: var
(--f7-message-header-font-size
);
15059 color: var
(--f7-message-footer-text-color
);
15060 font-size: var
(--f7-message-footer-font-size
);
15061 margin-bottom: -1em;
15064 color: var
(--f7-message-name-text-color
);
15065 font-size: var
(--f7-message-name-font-size
);
15066 font-weight: var
(--f7-message-name-font-weight
);
15069 box-sizing: border-box
;
15070 word-break: break-word
;
15072 flex-direction: column
;
15073 position: relative
;
15074 line-height: var
(--f7-message-bubble-line-height
);
15075 font-size: var
(--f7-message-bubble-font-size
);
15076 border-radius: var
(--f7-message-bubble-border-radius
);
15077 padding: var
(--f7-message-bubble-padding-vertical
) var
(--f7-message-bubble-padding-horizontal
);
15078 min-height: var
(--f7-message-bubble-min-height
);
15080 .message-image img {
15086 .message-text-header
,
15087 .message-text-footer {
15090 .message-text-header {
15091 color: var
(--f7-message-text-header-text-color
);
15092 opacity: var
(--f7-message-text-header-opacity
);
15093 font-size: var
(--f7-message-text-header-font-size
);
15095 .message-text-footer {
15096 color: var
(--f7-message-text-footer-text-color
);
15097 opacity: var
(--f7-message-text-footer-opacity
);
15098 font-size: var
(--f7-message-text-footer-font-size
);
15105 flex-direction: row-reverse
;
15106 align-self: flex-end
;
15108 .message-sent .message-bubble {
15109 color: var
(--f7-message-sent-text-color
);
15110 background: var
(--f7-message-sent-bg-color
, var
(--f7-theme-color
));
15112 .message-sent .message-content {
15113 align-items: flex-end
;
15115 .message-sent.message-tail .message-bubble {
15116 border-radius: var
(--f7-message-bubble-border-radius
) var
(--f7-message-bubble-border-radius
) 0 var
(--f7-message-bubble-border-radius
);
15118 .message-received {
15119 flex-direction: row
;
15121 .message-received .message-bubble {
15122 color: var
(--f7-message-received-text-color
);
15123 background: var
(--f7-message-received-bg-color
);
15125 .message-received .message-content {
15126 align-items: flex-start
;
15128 .message-received.message-tail .message-bubble {
15129 border-radius: var
(--f7-message-bubble-border-radius
) var
(--f7-message-bubble-border-radius
) var
(--f7-message-bubble-border-radius
) 0;
15131 .message:not(.message-last) .message-avatar {
15134 .message:not(.message-first) .message-name {
15137 .message.message-same-name .message-name {
15140 .message.message-same-header .message-header {
15143 .message.message-same-footer .message-footer {
15146 .message-appear-from-bottom {
15147 animation: message-appear-from-bottom
300ms;
15149 .message-appear-from-top {
15150 animation: message-appear-from-top
300ms;
15152 .message-typing-indicator {
15153 display: inline-block
;
15155 vertical-align: middle
;
15157 .message-typing-indicator > div {
15158 display: inline-block
;
15159 position: relative
;
15160 background: var
(--f7-message-typing-indicator-bg-color
);
15161 opacity: var
(--f7-message-typing-indicator-opacity
);
15162 vertical-align: middle
;
15163 border-radius: 50%;
15165 @keyframes message-appear-from-bottom
{
15167 transform: translate3d
(0, 100%, 0);
15170 transform: translate3d
(0, 0, 0);
15173 @keyframes message-appear-from-top
{
15175 transform: translate3d
(0, -100%, 0);
15178 transform: translate3d
(0, 0, 0);
15181 .ios
.messages-title b
,
15182 .ios
.message-header b
,
15183 .ios
.message-footer b
,
15184 .ios .message-name b {
15187 .ios
.message-header
,
15188 .ios .message-name {
15189 margin-bottom: 3px;
15191 .ios .message-footer {
15194 .ios .message-bubble {
15197 .ios .message-image {
15198 margin: var
(--f7-message-bubble-padding-vertical
) calc
(-1 * var
(--f7-message-bubble-padding-horizontal
));
15200 .ios .message-image:first-child {
15201 margin-top: calc
(-1 * var
(--f7-message-bubble-padding-vertical
));
15203 .ios .message-image:first-child img {
15204 border-top-left-radius: var
(--f7-message-bubble-border-radius
);
15205 border-top-right-radius: var
(--f7-message-bubble-border-radius
);
15207 .ios .message-image:last-child {
15208 margin-bottom: calc
(-1 * var
(--f7-message-bubble-padding-vertical
));
15210 .ios .message-image:last-child img {
15211 border-bottom-left-radius: var
(--f7-message-bubble-border-radius
);
15212 border-bottom-right-radius: var
(--f7-message-bubble-border-radius
);
15214 .ios .message-text-header {
15215 margin-bottom: 3px;
15217 .ios .message-text-footer {
15220 .ios .message-received {
15221 margin-left: calc
(10px + var
(--f7-safe-area-left
));
15223 .ios
.message-received
.message-header
,
15224 .ios
.message-received
.message-footer
,
15225 .ios .message-received .message-name {
15226 margin-left: var
(--f7-message-bubble-padding-horizontal
);
15228 .ios .message-received .message-bubble {
15229 padding-left: calc
(var
(--f7-message-bubble-padding-horizontal
) + 6px);
15230 -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%;
15232 .ios .message-received .message-image {
15233 margin-left: calc
(-1 * (var
(--f7-message-bubble-padding-horizontal
) + 6px));
15235 .ios .message-received.message-tail:not(.message-typing) .message-bubble {
15236 -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%;
15238 .ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img {
15239 border-bottom-left-radius: 0px;
15241 .ios .message-sent {
15242 margin-right: calc
(10px + var
(--f7-safe-area-right
));
15244 .ios
.message-sent
.message-header
,
15245 .ios
.message-sent
.message-footer
,
15246 .ios .message-sent .message-name {
15247 margin-right: var
(--f7-message-bubble-padding-horizontal
);
15249 .ios .message-sent .message-bubble {
15250 padding-right: calc
(var
(--f7-message-bubble-padding-horizontal
) + 6px);
15251 -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%;
15253 .ios .message-sent .message-image {
15254 margin-right: calc
(-1 * (var
(--f7-message-bubble-padding-horizontal
) + 6px));
15256 .ios .message-sent.message-tail .message-bubble {
15257 -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%;
15259 .ios .message-sent.message-tail .message-bubble .message-image:last-child img {
15260 border-bottom-right-radius: 0px;
15262 .ios .message + .message:not(.message-first) {
15265 .ios
.message-received
.message-typing
.message-content:after
,
15266 .ios .message-received.message-typing .message-content:before {
15268 position: absolute
;
15269 background: var
(--f7-message-received-bg-color
);
15270 border-radius: 50%;
15272 .ios .message-received.message-typing .message-content:after {
15278 .ios .message-received.message-typing .message-content:before {
15284 .ios .message-typing-indicator > div {
15288 .ios .message-typing-indicator > div + div {
15291 .ios .message-typing-indicator > div:nth-child(1) {
15292 animation: ios-message-typing-indicator
900ms infinite
;
15294 .ios .message-typing-indicator > div:nth-child(2) {
15295 animation: ios-message-typing-indicator
900ms 150ms infinite
;
15297 .ios .message-typing-indicator > div:nth-child(3) {
15298 animation: ios-message-typing-indicator
900ms 300ms infinite
;
15300 @keyframes ios-message-typing-indicator
{
15311 .md
.messages-title b
,
15312 .md
.message-header b
,
15313 .md
.message-footer b
,
15314 .md .message-name b {
15317 .md
.message-header
,
15318 .md .message-name {
15319 margin-bottom: 2px;
15321 .md .message-footer {
15324 .md .message-text-header {
15325 margin-bottom: 4px;
15327 .md .message-text-footer {
15330 .md
.message-received
.message-tail
.message-bubble:before
,
15331 .md .message-sent.message-tail .message-bubble:before {
15332 position: absolute
;
15338 .md .message-received {
15339 margin-left: calc
(8px + var
(--f7-safe-area-left
));
15341 .md .message-received .message-avatar + .message-content {
15342 margin-left: var
(--f7-message-bubble-padding-horizontal
);
15344 .md .message-received.message-tail .message-bubble:before {
15345 border-left: 8px solid transparent
;
15346 border-right: 0 solid transparent
;
15347 border-bottom: 8px solid var
(--f7-message-received-bg-color
);
15350 .md .message-sent {
15351 margin-right: calc
(8px + var
(--f7-safe-area-right
));
15353 .md .message-sent .message-avatar + .message-content {
15354 margin-right: var
(--f7-message-bubble-padding-horizontal
);
15356 .md .message-sent.message-tail .message-bubble:before {
15357 border-left: 0 solid transparent
;
15358 border-right: 8px solid transparent
;
15359 border-bottom: 8px solid var
(--f7-message-sent-bg-color
, var
(--f7-theme-color
));
15362 .md .message + .message:not(.message-first) {
15365 .md .message-typing-indicator > div {
15369 .md .message-typing-indicator > div + div {
15372 .md .message-typing-indicator > div:nth-child(1) {
15373 animation: md-message-typing-indicator
900ms infinite
;
15375 .md .message-typing-indicator > div:nth-child(2) {
15376 animation: md-message-typing-indicator
900ms 150ms infinite
;
15378 .md .message-typing-indicator > div:nth-child(3) {
15379 animation: md-message-typing-indicator
900ms 300ms infinite
;
15381 @keyframes md-message-typing-indicator
{
15383 transform: translateY
(0%);
15386 transform: translateY
(-5px);
15389 transform: translateY
(0%);
15392 .aurora
.messages-title b
,
15393 .aurora
.message-header b
,
15394 .aurora
.message-footer b
,
15395 .aurora .message-name b {
15398 .aurora
.message-header
,
15399 .aurora .message-name {
15400 margin-bottom: 2px;
15402 .aurora .message-footer {
15405 .aurora .message-text-header {
15406 margin-bottom: 2px;
15408 .aurora .message-text-footer {
15411 .aurora
.message-received
.message-tail
.message-bubble:before
,
15412 .aurora .message-sent.message-tail .message-bubble:before {
15413 position: absolute
;
15419 .aurora .message-image {
15420 margin: var
(--f7-message-bubble-padding-vertical
) calc
(-1 * var
(--f7-message-bubble-padding-horizontal
) + 4px);
15422 .aurora .message-image:first-child {
15423 margin-top: calc
(-1 * var
(--f7-message-bubble-padding-vertical
) + 4px);
15425 .aurora .message-image:first-child img {
15426 border-top-left-radius: var
(--f7-message-bubble-border-radius
);
15427 border-top-right-radius: var
(--f7-message-bubble-border-radius
);
15429 .aurora .message-image:last-child {
15430 margin-bottom: calc
(-1 * var
(--f7-message-bubble-padding-vertical
) + 4px);
15432 .aurora .message-image:last-child img {
15433 border-bottom-left-radius: var
(--f7-message-bubble-border-radius
);
15434 border-bottom-right-radius: var
(--f7-message-bubble-border-radius
);
15436 .aurora .message-received {
15437 margin-left: calc
(15px + var
(--f7-safe-area-left
));
15439 .aurora .message-received .message-avatar + .message-content {
15442 .aurora
.message-received
.message-header
,
15443 .aurora
.message-received
.message-footer
,
15444 .aurora .message-received .message-name {
15445 margin-left: var
(--f7-message-bubble-padding-horizontal
);
15447 .aurora .message-received.message-tail .message-bubble:before {
15448 border-left: 6px solid transparent
;
15449 border-right: 0 solid transparent
;
15450 border-bottom: 6px solid var
(--f7-message-received-bg-color
);
15452 transform: translate
(2px, 0px) rotate
(-15deg);
15453 transform-origin: right bottom
;
15455 .aurora .message-sent {
15456 margin-right: calc
(15px + var
(--f7-safe-area-right
));
15458 .aurora .message-sent .message-avatar + .message-content {
15461 .aurora
.message-sent
.message-header
,
15462 .aurora
.message-sent
.message-footer
,
15463 .aurora .message-sent .message-name {
15464 margin-right: var
(--f7-message-bubble-padding-horizontal
);
15466 .aurora .message-sent.message-tail .message-bubble:before {
15467 border-left: 0 solid transparent
;
15468 border-right: 6px solid transparent
;
15469 border-bottom: 6px solid var
(--f7-message-sent-bg-color
, var
(--f7-theme-color
));
15471 transform: translate
(-2px, 0px) rotate
(15deg);
15472 transform-origin: left bottom
;
15474 .aurora .message + .message:not(.message-first) {
15477 .aurora .message-typing-indicator > div {
15481 .aurora .message-typing-indicator > div + div {
15484 .aurora .message-typing-indicator > div:nth-child(1) {
15485 animation: aurora-message-typing-indicator
900ms infinite
;
15487 .aurora .message-typing-indicator > div:nth-child(2) {
15488 animation: aurora-message-typing-indicator
900ms 150ms infinite
;
15490 .aurora .message-typing-indicator > div:nth-child(3) {
15491 animation: aurora-message-typing-indicator
900ms 300ms infinite
;
15493 @keyframes aurora-message-typing-indicator
{
15495 transform: translateY
(0%);
15498 transform: translateY
(-5px);
15501 transform: translateY
(0%);
15504 /* === Messagebar === */
15506 --f7-messagebar-bg-color: #fff;
15507 --f7-messagebar-shadow-image: none
;
15508 --f7-messagebar-textarea-bg-color: transparent
;
15509 --f7-messagebar-attachments-height: 155px;
15510 --f7-messagebar-attachment-height: 155px;
15511 --f7-messagebar-attachment-landscape-height: 120px;
15512 --f7-messagebar-sheet-height: 252px;
15513 --f7-messagebar-sheet-landscape-height: 192px;
15515 --f7-messagebar-inner-padding-left: var(--f7-toolbar-inner-padding-left);
15516 --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
15521 --f7-messagebar-bg-color: var
(--f7-bars-bg-color
);
15524 --f7-messagebar-height: 44px;
15525 --f7-messagebar-font-size: 17px;
15527 --f7-messagebar-link-color: var(--f7-theme-color);
15529 --f7-messagebar-border-color: transparent
;
15530 --f7-messagebar-textarea-border-radius: 17px;
15531 --f7-messagebar-textarea-padding: 6px 15px;
15532 --f7-messagebar-textarea-height: 34px;
15533 --f7-messagebar-textarea-text-color: #000;
15534 --f7-messagebar-textarea-font-size: 17px;
15535 --f7-messagebar-textarea-line-height: 20px;
15536 --f7-messagebar-textarea-border: 1px solid
#c8c8cd;
15537 --f7-messagebar-sheet-bg-color: #d1d5da;
15538 --f7-messagebar-attachments-border-color: #c8c8cd;
15539 --f7-messagebar-attachment-border-radius: 12px;
15543 --f7-messagebar-textarea-text-color: #fff;
15544 --f7-messagebar-textarea-border: 1px solid var
(--f7-bars-border-color
);
15545 --f7-messagebar-attachments-border-color: var
(--f7-bars-border-color
);
15548 --f7-messagebar-height: 48px;
15549 --f7-messagebar-font-size: 16px;
15550 --f7-messagebar-link-color: #333;
15551 --f7-messagebar-border-color: #d1d1d1;
15552 --f7-messagebar-textarea-border-radius: 0px;
15553 --f7-messagebar-textarea-padding: 5px 8px;
15554 --f7-messagebar-textarea-height: 32px;
15555 --f7-messagebar-textarea-text-color: #333;
15556 --f7-messagebar-textarea-font-size: 16px;
15557 --f7-messagebar-textarea-line-height: 22px;
15558 --f7-messagebar-textarea-border: 1px solid transparent
;
15559 --f7-messagebar-sheet-bg-color: #fff;
15560 --f7-messagebar-attachments-border-color: #ddd;
15561 --f7-messagebar-attachment-border-radius: 4px;
15565 --f7-messagebar-border-color: #282829;
15566 --f7-messagebar-link-color: rgba
(255, 255, 255, 0.87);
15567 --f7-messagebar-textarea-text-color: rgba
(255, 255, 255, 0.87);
15568 --f7-messagebar-attachments-border-color: rgba
(255, 255, 255, 0.2);
15571 --f7-messagebar-height: 38px;
15572 --f7-messagebar-font-size: 14px;
15574 --f7-messagebar-link-color: var(--f7-theme-color);
15576 --f7-messagebar-border-color: transparent
;
15577 --f7-messagebar-textarea-border-radius: 12px;
15578 --f7-messagebar-textarea-padding: 3px 10px;
15579 --f7-messagebar-textarea-height: 24px;
15580 --f7-messagebar-textarea-text-color: #000;
15581 --f7-messagebar-textarea-font-size: 13px;
15582 --f7-messagebar-textarea-line-height: 16px;
15583 --f7-messagebar-textarea-border: 1px solid
#c8c8cd;
15584 --f7-messagebar-sheet-bg-color: #fff;
15585 --f7-messagebar-attachments-border-color: #c8c8cd;
15586 --f7-messagebar-attachment-border-radius: 12px;
15588 .aurora
.theme-dark
,
15589 .aurora.theme-dark {
15590 --f7-messagebar-textarea-text-color: #fff;
15591 --f7-messagebar-textarea-border: 1px solid var
(--f7-bars-border-color
);
15592 --f7-messagebar-attachments-border-color: var
(--f7-bars-border-color
);
15595 transform: translate3d
(0, 0, 0);
15596 background: var
(--f7-messagebar-bg-color
);
15598 min-height: var
(--f7-messagebar-height
);
15599 font-size: var
(--f7-messagebar-font-size
);
15600 padding-bottom: var
(--f7-safe-area-bottom
);
15603 .messagebar:before {
15605 position: absolute
;
15606 background-color: var
(--f7-messagebar-border-color
);
15615 transform-origin: 50% 0%;
15616 transform: scaleY
(calc
(1 / var
(--f7-device-pixel-ratio
)));
15618 .messagebar:after {
15620 position: absolute
;
15626 pointer-events: none
;
15627 background: var
(--f7-messagebar-shadow-image
);
15629 .messagebar
.no-hairline:before
,
15630 .messagebar.no-border:before {
15631 display: none
!important
;
15633 .messagebar
.no-shadow:after
,
15634 .messagebar.toolbar-hidden:after {
15635 display: none
!important
;
15637 .messagebar .toolbar-inner {
15639 position: relative
;
15642 padding-left: calc
(var
(--f7-messagebar-inner-padding-left
, var
(--f7-toolbar-inner-padding-left
)) + var
(--f7-safe-area-left
));
15643 padding-right: calc
(var
(--f7-messagebar-inner-padding-right
, var
(--f7-toolbar-inner-padding-right
)) + var
(--f7-safe-area-right
));
15645 .messagebar.messagebar-sheet-visible > .toolbar-inner {
15648 .messagebar .messagebar-area {
15652 position: relative
;
15654 .messagebar textarea {
15657 background-color: var
(--f7-messagebar-textarea-bg-color
);
15658 border-radius: var
(--f7-messagebar-textarea-border-radius
);
15659 padding: var
(--f7-messagebar-textarea-padding
);
15660 height: var
(--f7-messagebar-textarea-height
);
15661 color: var
(--f7-messagebar-textarea-text-color
);
15662 font-size: var
(--f7-messagebar-textarea-font-size
);
15663 line-height: var
(--f7-messagebar-textarea-line-height
);
15664 border: var
(--f7-messagebar-textarea-border
);
15666 .messagebar a.link {
15667 align-self: flex-end
;
15669 color: var
(--f7-messagebar-link-color
, var
(--f7-theme-color
));
15671 .messagebar-attachments {
15673 will-change: scroll-position
;
15675 -webkit-overflow-scrolling: touch
;
15677 white-space: nowrap
;
15678 box-sizing: border-box
;
15679 position: relative
;
15681 .messagebar:not(.messagebar-attachments-visible) .messagebar-attachments {
15684 .messagebar-attachment {
15685 background-size: cover
;
15686 background-position: center
;
15687 background-repeat: no-repeat
;
15688 display: inline-block
;
15689 vertical-align: middle
;
15690 white-space: normal
;
15691 height: var
(--f7-messagebar-attachment-height
);
15692 position: relative
;
15693 border-radius: var
(--f7-messagebar-attachment-border-radius
);
15695 @media (orientation: landscape
) {
15696 .messagebar-attachment {
15697 height: var
(--f7-messagebar-attachment-landscape-height
);
15700 .messagebar-attachment img {
15704 border-radius: var
(--f7-messagebar-attachment-border-radius
);
15706 .messagebar-attachment + .messagebar-attachment {
15709 .messagebar-sheet {
15710 will-change: scroll-position
;
15712 -webkit-overflow-scrolling: touch
;
15715 flex-direction: column
;
15716 align-content: flex-start
;
15717 height: var
(--f7-messagebar-sheet-height
);
15718 background-color: var
(--f7-messagebar-sheet-bg-color
);
15719 padding-left: var
(--f7-safe-area-left
);
15720 padding-right: var
(--f7-safe-area-right
);
15722 @media (orientation: landscape
) {
15723 .messagebar-sheet {
15724 height: var
(--f7-messagebar-sheet-landscape-height
);
15727 .messagebar-sheet-image
,
15728 .messagebar-sheet-item {
15729 box-sizing: border-box
;
15732 position: relative
;
15734 height: calc
((var
(--f7-messagebar-sheet-height
) - 2px) / 2);
15735 width: calc
((var
(--f7-messagebar-sheet-height
) - 2px) / 2);
15738 @media (orientation: landscape
) {
15739 .messagebar-sheet-image
,
15740 .messagebar-sheet-item {
15741 width: calc
((var
(--f7-messagebar-sheet-landscape-height
) - 2px) / 2);
15742 height: calc
((var
(--f7-messagebar-sheet-landscape-height
) - 2px) / 2);
15745 .messagebar-sheet-image
.icon-checkbox
,
15746 .messagebar-sheet-item
.icon-checkbox
,
15747 .messagebar-sheet-image
.icon-radio
,
15748 .messagebar-sheet-item .icon-radio {
15749 position: absolute
;
15753 .messagebar-sheet-image {
15754 background-size: cover
;
15755 background-position: center
;
15756 background-repeat: no-repeat
;
15758 .messagebar-attachment-delete {
15760 position: absolute
;
15761 border-radius: 50%;
15762 box-sizing: border-box
;
15764 box-shadow: 0px 0px 2px rgba
(0, 0, 0, 0.2);
15766 .messagebar-attachment-delete:after
,
15767 .messagebar-attachment-delete:before {
15768 position: absolute
;
15773 .messagebar-attachment-delete:after {
15774 transform: rotate
(45deg);
15776 .messagebar-attachment-delete:before {
15777 transform: rotate
(-45deg);
15779 .messagebar:not(.messagebar-sheet-visible) .messagebar-sheet {
15783 --f7-page-toolbar-bottom-offset: var
(--f7-messagebar-height
);
15785 .ios .messagebar a.link.icon-only:first-child {
15788 .ios .messagebar a.link.icon-only:last-child {
15789 margin-right: -8px;
15791 .ios .messagebar a.link:not(.icon-only) + .messagebar-area {
15794 .ios .messagebar .messagebar-area + a.link:not(.icon-only) {
15797 .ios .messagebar-area {
15799 margin-bottom: 5px;
15801 .ios .messagebar-attachments {
15803 border-radius: var
(--f7-messagebar-textarea-border-radius
) var
(--f7-messagebar-textarea-border-radius
) 0 0;
15804 border: 1px solid var
(--f7-messagebar-attachments-border-color
);
15805 border-bottom: none
;
15807 .ios .messagebar-attachments-visible .messagebar-attachments + textarea {
15808 border-radius: 0 0 var
(--f7-messagebar-textarea-border-radius
) var
(--f7-messagebar-textarea-border-radius
);
15810 .ios .messagebar-attachment {
15813 .ios .messagebar-attachment-delete {
15818 background: #7d7e80;
15819 border: 2px solid
#fff;
15821 .ios
.messagebar-attachment-delete:after
,
15822 .ios .messagebar-attachment-delete:before {
15829 .md .messagebar-attachments {
15831 border-bottom: 1px solid var
(--f7-messagebar-attachments-border-color
);
15833 .md .messagebar-area {
15835 margin-bottom: 8px;
15837 .md
.messagebar-sheet-image
.icon-checkbox
,
15838 .md .messagebar-sheet-item .icon-checkbox {
15839 border-color: #fff;
15840 background: rgba
(255, 255, 255, 0.25);
15841 box-shadow: 0px 0px 10px rgba
(0, 0, 0, 0.5);
15843 .md .messagebar-attachment-delete {
15848 background-color: var
(--f7-theme-color
);
15849 border-radius: 4px;
15851 .md
.messagebar-attachment-delete:after
,
15852 .md .messagebar-attachment-delete:before {
15859 .aurora .messagebar a.link + .messagebar-area {
15862 .aurora .messagebar .messagebar-area + a.link {
15865 .aurora .messagebar-area {
15867 margin-bottom: 5px;
15869 .aurora
.messagebar-sheet-image
.icon-checkbox
,
15870 .aurora .messagebar-sheet-item .icon-checkbox {
15871 background: rgba
(255, 255, 255, 0.25);
15873 .aurora .messagebar-attachments {
15875 border-radius: var
(--f7-messagebar-textarea-border-radius
) var
(--f7-messagebar-textarea-border-radius
) 0 0;
15876 border: 1px solid var
(--f7-messagebar-attachments-border-color
);
15877 border-bottom: none
;
15879 .aurora .messagebar-attachments-visible .messagebar-attachments + textarea {
15880 border-radius: 0 0 var
(--f7-messagebar-textarea-border-radius
) var
(--f7-messagebar-textarea-border-radius
);
15882 .aurora .messagebar-attachment {
15885 .aurora .messagebar-attachment-delete {
15890 background: #808080;
15892 .aurora
.messagebar-attachment-delete:after
,
15893 .aurora .messagebar-attachment-delete:before {
15900 /* === Swiper === */
15901 .swiper-container {
15903 position: relative
;
15907 /* Fix of Webkit flickering */
15910 .swiper-container-no-flexbox .swiper-slide {
15913 .swiper-container-vertical > .swiper-wrapper {
15914 flex-direction: column
;
15917 position: relative
;
15922 transition-property: transform
;
15923 box-sizing: content-box
;
15925 .swiper-container-android
.swiper-slide
,
15927 transform: translate3d
(0px, 0, 0);
15929 .swiper-container-multirow > .swiper-wrapper {
15932 .swiper-container-free-mode > .swiper-wrapper {
15933 transition-timing-function: ease-out
;
15940 position: relative
;
15941 transition-property: transform
;
15943 .swiper-slide-invisible-blank {
15944 visibility: hidden
;
15947 .swiper-container-autoheight
,
15948 .swiper-container-autoheight .swiper-slide {
15951 .swiper-container-autoheight .swiper-wrapper {
15952 align-items: flex-start
;
15953 transition-property: transform
, height
;
15956 .swiper-container-3d {
15957 perspective: 1200px;
15959 .swiper-container-3d
.swiper-wrapper
,
15960 .swiper-container-3d
.swiper-slide
,
15961 .swiper-container-3d
.swiper-slide-shadow-left
,
15962 .swiper-container-3d
.swiper-slide-shadow-right
,
15963 .swiper-container-3d
.swiper-slide-shadow-top
,
15964 .swiper-container-3d
.swiper-slide-shadow-bottom
,
15965 .swiper-container-3d .swiper-cube-shadow {
15966 transform-style: preserve-3d
;
15968 .swiper-container-3d
.swiper-slide-shadow-left
,
15969 .swiper-container-3d
.swiper-slide-shadow-right
,
15970 .swiper-container-3d
.swiper-slide-shadow-top
,
15971 .swiper-container-3d .swiper-slide-shadow-bottom {
15972 position: absolute
;
15977 pointer-events: none
;
15980 .swiper-container-3d .swiper-slide-shadow-left {
15981 background-image: linear-gradient
(to left
, rgba
(0, 0, 0, 0.5), rgba
(0, 0, 0, 0));
15983 .swiper-container-3d .swiper-slide-shadow-right {
15984 background-image: linear-gradient
(to right
, rgba
(0, 0, 0, 0.5), rgba
(0, 0, 0, 0));
15986 .swiper-container-3d .swiper-slide-shadow-top {
15987 background-image: linear-gradient
(to top
, rgba
(0, 0, 0, 0.5), rgba
(0, 0, 0, 0));
15989 .swiper-container-3d .swiper-slide-shadow-bottom {
15990 background-image: linear-gradient
(to bottom
, rgba
(0, 0, 0, 0.5), rgba
(0, 0, 0, 0));
15992 /* IE10 Windows Phone 8 Fixes */
15993 .swiper-container-wp8-horizontal
,
15994 .swiper-container-wp8-horizontal > .swiper-wrapper {
15995 touch-action: pan-y
;
15997 .swiper-container-wp8-vertical
,
15998 .swiper-container-wp8-vertical > .swiper-wrapper {
15999 touch-action: pan-x
;
16002 .swiper-container .swiper-notification {
16003 position: absolute
;
16006 pointer-events: none
;
16010 .swiper-container-coverflow .swiper-wrapper {
16011 /* Windows 8 IE 10 fix */
16012 -ms-perspective: 1200px;
16014 .swiper-container-cube {
16017 .swiper-container-cube .swiper-slide {
16018 pointer-events: none
;
16019 -webkit-backface-visibility: hidden
;
16020 backface-visibility: hidden
;
16022 visibility: hidden
;
16023 transform-origin: 0 0;
16027 .swiper-container-cube .swiper-slide .swiper-slide {
16028 pointer-events: none
;
16030 .swiper-container-cube.swiper-container-rtl .swiper-slide {
16031 transform-origin: 100% 0;
16033 .swiper-container-cube
.swiper-slide-active
,
16034 .swiper-container-cube .swiper-slide-active .swiper-slide-active {
16035 pointer-events: auto
;
16037 .swiper-container-cube
.swiper-slide-active
,
16038 .swiper-container-cube
.swiper-slide-next
,
16039 .swiper-container-cube
.swiper-slide-prev
,
16040 .swiper-container-cube .swiper-slide-next + .swiper-slide {
16041 pointer-events: auto
;
16042 visibility: visible
;
16044 .swiper-container-cube
.swiper-slide-shadow-top
,
16045 .swiper-container-cube
.swiper-slide-shadow-bottom
,
16046 .swiper-container-cube
.swiper-slide-shadow-left
,
16047 .swiper-container-cube .swiper-slide-shadow-right {
16049 -webkit-backface-visibility: hidden
;
16050 backface-visibility: hidden
;
16052 .swiper-container-cube .swiper-cube-shadow {
16053 position: absolute
;
16060 -webkit-filter: blur
(50px);
16061 filter: blur
(50px);
16064 .swiper-container-fade.swiper-container-free-mode .swiper-slide {
16065 transition-timing-function: ease-out
;
16067 .swiper-container-fade .swiper-slide {
16068 pointer-events: none
;
16069 transition-property: opacity
;
16071 .swiper-container-fade .swiper-slide .swiper-slide {
16072 pointer-events: none
;
16074 .swiper-container-fade
.swiper-slide-active
,
16075 .swiper-container-fade .swiper-slide-active .swiper-slide-active {
16076 pointer-events: auto
;
16078 .swiper-container-flip {
16081 .swiper-container-flip .swiper-slide {
16082 pointer-events: none
;
16083 -webkit-backface-visibility: hidden
;
16084 backface-visibility: hidden
;
16087 .swiper-container-flip .swiper-slide .swiper-slide {
16088 pointer-events: none
;
16090 .swiper-container-flip
.swiper-slide-active
,
16091 .swiper-container-flip .swiper-slide-active .swiper-slide-active {
16092 pointer-events: auto
;
16094 .swiper-container-flip
.swiper-slide-shadow-top
,
16095 .swiper-container-flip
.swiper-slide-shadow-bottom
,
16096 .swiper-container-flip
.swiper-slide-shadow-left
,
16097 .swiper-container-flip .swiper-slide-shadow-right {
16099 -webkit-backface-visibility: hidden
;
16100 backface-visibility: hidden
;
16103 .swiper-scrollbar {
16104 border-radius: 10px;
16105 position: relative
;
16106 -ms-touch-action: none
;
16107 background: rgba
(0, 0, 0, 0.1);
16109 .swiper-container-horizontal > .swiper-scrollbar {
16110 position: absolute
;
16117 .swiper-container-vertical > .swiper-scrollbar {
16118 position: absolute
;
16125 .swiper-scrollbar-drag {
16128 position: relative
;
16129 background: rgba
(0, 0, 0, 0.5);
16130 border-radius: 10px;
16134 .swiper-scrollbar-cursor-drag {
16137 .swiper-scrollbar-lock {
16140 .swiper-zoom-container {
16144 justify-content: center
;
16145 align-items: center
;
16146 text-align: center
;
16148 .swiper-zoom-container
> img
,
16149 .swiper-zoom-container
> svg
,
16150 .swiper-zoom-container > canvas {
16153 object-fit: contain
;
16155 .swiper-slide-zoomed {
16158 .swiper-button-prev
,
16159 .swiper-button-next {
16160 position: absolute
;
16165 text-align: center
;
16169 color: var
(--f7-theme-color
);
16171 .swiper-button-prev:after
,
16172 .swiper-button-next:after {
16173 font-family: 'framework7-core-icons';
16174 font-weight: normal
;
16175 font-style: normal
;
16177 letter-spacing: normal
;
16178 text-transform: none
;
16179 white-space: nowrap
;
16182 -webkit-font-smoothing: antialiased
;
16183 text-rendering: optimizeLegibility
;
16184 -moz-osx-font-smoothing: grayscale
;
16185 -moz-font-feature-settings: "liga";
16186 font-feature-settings: "liga";
16187 text-align: center
;
16194 .swiper-button-prev
.swiper-button-disabled
,
16195 .swiper-button-next.swiper-button-disabled {
16198 pointer-events: none
;
16200 .swiper-button-prev
,
16201 .swiper-container-rtl .swiper-button-next {
16205 .swiper-button-prev:after
,
16206 .swiper-container-rtl .swiper-button-next:after {
16207 content: 'swiper_prev';
16209 .swiper-button-next
,
16210 .swiper-container-rtl .swiper-button-prev {
16214 .swiper-button-next:after
,
16215 .swiper-container-rtl .swiper-button-prev:after {
16216 content: 'swiper_next';
16218 .swiper-button-lock {
16221 .swiper-pagination {
16222 position: absolute
;
16223 text-align: center
;
16224 transition: 300ms opacity
;
16225 transform: translate3d
(0, 0, 0);
16228 .swiper-pagination.swiper-pagination-hidden {
16231 .swiper-pagination-fraction
,
16232 .swiper-pagination-custom
,
16233 .swiper-container-horizontal > .swiper-pagination-bullets {
16238 .swiper-pagination-bullets-dynamic {
16242 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16243 transform: scale
(0.33);
16244 position: relative
;
16246 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
16247 transform: scale
(1);
16249 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
16250 transform: scale
(0.66);
16252 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
16253 transform: scale
(0.33);
16255 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
16256 transform: scale
(0.66);
16258 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
16259 transform: scale
(0.33);
16261 .swiper-pagination-bullet {
16264 display: inline-block
;
16265 border-radius: 100%;
16269 button
.swiper-pagination-bullet
{
16274 -webkit-appearance: none
;
16275 -moz-appearance: none
;
16278 .swiper-pagination-clickable .swiper-pagination-bullet {
16281 .swiper-pagination-bullet-active {
16283 background: var
(--f7-theme-color
);
16285 .swiper-container-vertical > .swiper-pagination-bullets {
16288 transform: translate3d
(0px, -50%, 0);
16290 .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
16294 .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
16296 transform: translateY
(-50%);
16299 .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16300 display: inline-block
;
16301 transition: 200ms transform
, 200ms top
;
16303 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
16306 .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
16308 transform: translateX
(-50%);
16309 white-space: nowrap
;
16311 .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16312 transition: 200ms transform
, 200ms left
;
16314 .swiper-pagination-progressbar {
16315 background: rgba
(0, 0, 0, 0.25);
16316 position: absolute
;
16318 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
16319 background: var
(--f7-theme-color
);
16320 position: absolute
;
16325 transform: scale
(0);
16326 transform-origin: left top
;
16328 .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
16329 transform-origin: right top
;
16331 .swiper-container-horizontal
> .swiper-pagination-progressbar
,
16332 .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
16338 .swiper-container-vertical
> .swiper-pagination-progressbar
,
16339 .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
16345 .swiper-pagination-lock {
16348 .preloader.swiper-lazy-preloader {
16349 position: absolute
;
16355 margin-left: -16px;
16358 /* === Photo Browser === */
16360 --f7-photobrowser-bg-color: #fff;
16361 --f7-photobrowser-bars-bg-image: none
;
16363 --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
16364 --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
16365 --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
16367 --f7-photobrowser-caption-font-size: 14px;
16368 --f7-photobrowser-caption-light-text-color: #000;
16369 --f7-photobrowser-caption-light-bg-color: rgba
(255, 255, 255, 0.8);
16370 --f7-photobrowser-caption-dark-text-color: #fff;
16371 --f7-photobrowser-caption-dark-bg-color: rgba
(0, 0, 0, 0.8);
16372 --f7-photobrowser-exposed-bg-color: #000;
16373 --f7-photobrowser-dark-bg-color: #000;
16374 --f7-photobrowser-dark-bars-bg-color: rgba
(27, 27, 27, 0.8);
16375 --f7-photobrowser-dark-bars-text-color: #fff;
16376 --f7-photobrowser-dark-bars-link-color: #fff;
16379 position: absolute
;
16386 .photo-browser-standalone.modal-in {
16387 transition-duration: 0ms;
16388 animation: photo-browser-in
400ms;
16390 .photo-browser-standalone.modal-out {
16391 transition-duration: 0ms;
16392 animation: photo-browser-out
400ms;
16394 .photo-browser-standalone
.modal-out
.swipe-close-to-bottom
,
16395 .photo-browser-standalone.modal-out.swipe-close-to-top {
16398 .photo-browser-popup
.modal-out
.swipe-close-to-bottom
,
16399 .photo-browser-popup.modal-out.swipe-close-to-top {
16400 transition-duration: 300ms;
16402 .photo-browser-popup.modal-out.swipe-close-to-bottom {
16403 transform: translate3d
(0, 100%, 0);
16405 .photo-browser-popup.modal-out.swipe-close-to-top {
16406 transform: translate3d
(0, -100vh, 0);
16408 .photo-browser-page {
16411 .photo-browser-page .toolbar {
16414 .photo-browser-popup {
16417 .photo-browser-of {
16420 .photo-browser-captions {
16421 pointer-events: none
;
16422 position: absolute
;
16425 bottom: var
(--f7-safe-area-bottom
);
16430 .photo-browser-captions.photo-browser-captions-exposed {
16433 .toolbar ~ .photo-browser-captions {
16434 bottom: calc
(var
(--f7-toolbar-height
) + var
(--f7-safe-area-bottom
));
16435 transform: translate3d
(0, 0px, 0);
16437 .toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
16438 transform: translate3d
(0, 0px, 0);
16440 .photo-browser-caption {
16441 box-sizing: border-box
;
16443 position: absolute
;
16449 text-align: center
;
16450 font-size: var
(--f7-photobrowser-caption-font-size
);
16452 .photo-browser-caption:empty {
16455 .photo-browser-caption.photo-browser-caption-active {
16458 .photo-browser-captions-light .photo-browser-caption {
16459 color: var
(--f7-photobrowser-caption-light-text-color
);
16460 background: var
(--f7-photobrowser-caption-light-bg-color
);
16462 .photo-browser-captions-dark .photo-browser-caption {
16463 color: var
(--f7-photobrowser-caption-dark-text-color
);
16464 background: var
(--f7-photobrowser-caption-dark-bg-color
);
16466 .photo-browser-swiper-container {
16467 position: absolute
;
16473 background: var
(--f7-photobrowser-bg-color
);
16475 transition-property: background-color
;
16477 .photo-browser-prev
.swiper-button-disabled
,
16478 .photo-browser-next.swiper-button-disabled {
16480 pointer-events: none
;
16482 .photo-browser-slide {
16485 position: relative
;
16488 justify-content: center
;
16489 align-items: center
;
16491 box-sizing: border-box
;
16493 .photo-browser-slide.photo-browser-transitioning {
16495 transition-property: transform
;
16497 .photo-browser-slide span.swiper-zoom-container {
16500 .photo-browser-slide img {
16507 .photo-browser-slide
.swiper-slide-active span
.swiper-zoom-container
,
16508 .photo-browser-slide
.swiper-slide-next span
.swiper-zoom-container
,
16509 .photo-browser-slide.swiper-slide-prev span.swiper-zoom-container {
16512 .photo-browser-slide
.swiper-slide-active img
,
16513 .photo-browser-slide
.swiper-slide-next img
,
16514 .photo-browser-slide.swiper-slide-prev img {
16517 .photo-browser-slide
.swiper-slide-active
.photo-browser-slide-lazy
.preloader
,
16518 .photo-browser-slide
.swiper-slide-next
.photo-browser-slide-lazy
.preloader
,
16519 .photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader {
16522 .photo-browser-slide iframe {
16526 .photo-browser-slide .preloader {
16528 position: absolute
;
16531 margin-left: -21px;
16536 .photo-browser-page
.navbar
,
16537 .view
.with-photo-browser-page
.navbar
,
16538 .photo-browser-page
.toolbar
,
16539 .view.with-photo-browser-page .toolbar {
16540 background-color: var
(--f7-photobrowser-bars-bg-color
, rgba
(var
(--f7-bars-bg-color-rgb
), 0.95));
16541 background-image: var
(--f7-photobrowser-bars-bg-image
);
16543 color: var
(--f7-photobrowser-bars-text-color
, var
(--f7-bars-text-color
));
16545 .photo-browser-page
.navbar a
,
16546 .view
.with-photo-browser-page
.navbar a
,
16547 .photo-browser-page
.toolbar a
,
16548 .view.with-photo-browser-page .toolbar a {
16549 color: var
(--f7-photobrowser-bars-link-color
, var
(--f7-bars-link-color
, var
(--f7-theme-color
)));
16551 .photo-browser-exposed
.navbar
,
16552 .photo-browser-exposed .toolbar {
16554 visibility: hidden
;
16555 pointer-events: none
;
16557 .photo-browser-exposed .toolbar ~ .photo-browser-captions {
16558 transform: translate3d
(0, var
(--f7-toolbar-height
), 0);
16560 .photo-browser-exposed .photo-browser-swiper-container {
16561 background: var
(--f7-photobrowser-exposed-bg-color
);
16563 .photo-browser-exposed .photo-browser-caption {
16564 color: var
(--f7-photobrowser-caption-dark-text-color
);
16565 background: var
(--f7-photobrowser-caption-dark-bg-color
);
16567 .view.with-photo-browser-page-exposed .navbar {
16570 .photo-browser-dark
.photo-browser-swiper-container
,
16571 .photo-browser-page-dark
.photo-browser-swiper-container
,
16572 .view.with-photo-browser-page-dark .photo-browser-swiper-container {
16573 background: var
(--f7-photobrowser-dark-bg-color
);
16575 .photo-browser-dark
.navbar
,
16576 .photo-browser-page-dark
.navbar
,
16577 .view
.with-photo-browser-page-dark
.navbar
,
16578 .photo-browser-dark
.toolbar
,
16579 .photo-browser-page-dark
.toolbar
,
16580 .view.with-photo-browser-page-dark .toolbar {
16581 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
16582 --f7-link-highlight-color: var
(--f7-link-highlight-white
);
16583 background: var
(--f7-photobrowser-dark-bars-bg-color
);
16584 color: var
(--f7-photobrowser-dark-bars-text-color
);
16586 .photo-browser-dark
.navbar:before
,
16587 .photo-browser-page-dark
.navbar:before
,
16588 .view
.with-photo-browser-page-dark
.navbar:before
,
16589 .photo-browser-dark
.toolbar:before
,
16590 .photo-browser-page-dark
.toolbar:before
,
16591 .view.with-photo-browser-page-dark .toolbar:before {
16592 display: none
!important
;
16594 .photo-browser-dark
.navbar:after
,
16595 .photo-browser-page-dark
.navbar:after
,
16596 .view
.with-photo-browser-page-dark
.navbar:after
,
16597 .photo-browser-dark
.toolbar:after
,
16598 .photo-browser-page-dark
.toolbar:after
,
16599 .view.with-photo-browser-page-dark .toolbar:after {
16600 display: none
!important
;
16602 .photo-browser-dark
.navbar a
,
16603 .photo-browser-page-dark
.navbar a
,
16604 .view
.with-photo-browser-page-dark
.navbar a
,
16605 .photo-browser-dark
.toolbar a
,
16606 .photo-browser-page-dark
.toolbar a
,
16607 .view.with-photo-browser-page-dark .toolbar a {
16608 color: var
(--f7-photobrowser-dark-bars-link-color
);
16610 @keyframes photo-browser-in
{
16612 transform: translate3d
(0, 0, 0) scale
(0.5);
16616 transform: translate3d
(0, 0, 0) scale
(1.05);
16620 transform: translate3d
(0, 0, 0) scale
(1);
16624 @keyframes photo-browser-out
{
16626 transform: translate3d
(0, 0, 0) scale
(1);
16630 transform: translate3d
(0, 0, 0) scale
(1.05);
16634 transform: translate3d
(0, 0, 0) scale
(0.5);
16638 /* === Notifications === */
16640 --f7-notification-max-width: 568px;
16641 --f7-notification-subtitle-text-transform: none
;
16642 --f7-notification-subtitle-line-height: 1.35;
16643 --f7-notification-text-text-transform: none
;
16644 --f7-notification-text-font-weight: 400;
16647 --f7-notification-margin: 8px;
16648 --f7-notification-padding: 10px;
16649 --f7-notification-border-radius: 12px;
16650 --f7-notification-box-shadow: 0px 5px 25px -10px rgba
(0, 0, 0, 0.7);
16651 --f7-notification-bg-color: rgba
(250, 250, 250, 0.95);
16652 --f7-notification-translucent-bg-color-ios: rgba
(255, 255, 255, 0.65);
16653 --f7-notification-icon-size: 20px;
16654 --f7-notification-title-color: #000;
16655 --f7-notification-title-font-size: 13px;
16656 --f7-notification-title-text-transform: uppercase
;
16657 --f7-notification-title-line-height: 1.4;
16658 --f7-notification-title-font-weight: 400;
16659 --f7-notification-title-letter-spacing: 0.02em;
16660 --f7-notification-title-right-color: #444a51;
16661 --f7-notification-title-right-font-size: 13px;
16662 --f7-notification-subtitle-color: #000;
16663 --f7-notification-subtitle-font-size: 15px;
16664 --f7-notification-subtitle-font-weight: 600;
16665 --f7-notification-text-color: #000;
16666 --f7-notification-text-font-size: 15px;
16667 --f7-notification-text-line-height: 1.2;
16670 --f7-notification-margin: 0px;
16671 --f7-notification-padding: 16px;
16672 --f7-notification-border-radius: 0px;
16673 --f7-notification-box-shadow: 0 2px 4px rgba
(0, 0, 0, 0.22), 0 1px 2px rgba
(0, 0, 0, 0.24);
16674 --f7-notification-bg-color: #fff;
16675 --f7-notification-icon-size: 16px;
16676 --f7-notification-title-color: var
(--f7-theme-color
);
16677 --f7-notification-title-font-size: 12px;
16678 --f7-notification-title-text-transform: none
;
16679 --f7-notification-title-line-height: 1;
16680 --f7-notification-title-font-weight: 400;
16681 --f7-notification-title-right-color: #757575;
16682 --f7-notification-title-right-font-size: 12px;
16683 --f7-notification-subtitle-color: #212121;
16684 --f7-notification-subtitle-font-size: 14px;
16685 --f7-notification-subtitle-font-weight: 400;
16686 --f7-notification-text-color: #757575;
16687 --f7-notification-text-font-size: 14px;
16688 --f7-notification-text-line-height: 1.35;
16691 --f7-notification-margin: 10px;
16692 --f7-notification-padding: 10px;
16693 --f7-notification-border-radius: 4px;
16694 --f7-notification-box-shadow: 0px 5px 25px -10px rgba
(0, 0, 0, 0.7);
16695 --f7-notification-bg-color: #fff;
16696 --f7-notification-icon-size: 18px;
16697 --f7-notification-title-color: #000;
16698 --f7-notification-title-font-size: 13px;
16699 --f7-notification-title-text-transform: uppercase
;
16700 --f7-notification-title-line-height: 1.4;
16701 --f7-notification-title-font-weight: 500;
16702 --f7-notification-title-letter-spacing: 0.02em;
16703 --f7-notification-title-right-color: rgba
(255, 255, 255, 0.6);
16704 --f7-notification-title-right-font-size: 13px;
16705 --f7-notification-subtitle-color: #000;
16706 --f7-notification-subtitle-font-size: 12px;
16707 --f7-notification-subtitle-font-weight: 600;
16708 --f7-notification-text-color: #000;
16709 --f7-notification-text-font-size: 12px;
16710 --f7-notification-text-line-height: 1.2;
16713 position: absolute
;
16714 left: var
(--f7-notification-margin
);
16715 top: var
(--f7-notification-margin
);
16716 width: calc
(100% - var
(--f7-notification-margin
) * 2);
16722 box-sizing: border-box
;
16723 transition-property: transform
;
16725 max-width: var
(--f7-notification-max-width
);
16726 padding: var
(--f7-notification-padding
);
16727 border-radius: var
(--f7-notification-border-radius
);
16728 box-shadow: var
(--f7-notification-box-shadow
);
16729 background: var
(--f7-notification-bg-color
);
16730 margin-top: var
(--f7-statusbar-height
);
16731 --f7-link-highlight-color: var
(--f7-link-highlight-black
);
16732 --f7-touch-ripple-color: var
(--f7-touch-ripple-black
);
16734 @media (min-width: 568px) {
16737 width: var
(--f7-notification-max-width
);
16738 margin-left: calc
(-1 * var
(--f7-notification-max-width
) / 2);
16741 .notification-title {
16742 color: var
(--f7-notification-title-color
, var
(--f7-theme-color
));
16743 font-size: var
(--f7-notification-title-font-size
);
16744 text-transform: var
(--f7-notification-title-text-transform
);
16745 line-height: var
(--f7-notification-title-line-height
);
16746 font-weight: var
(--f7-notification-title-font-weight
);
16747 letter-spacing: var
(--f7-notification-title-letter-spacing
);
16749 .notification-subtitle {
16750 color: var
(--f7-notification-subtitle-color
);
16751 font-size: var
(--f7-notification-subtitle-font-size
);
16752 text-transform: var
(--f7-notification-subtitle-text-transform
);
16753 line-height: var
(--f7-notification-subtitle-line-height
);
16754 font-weight: var
(--f7-notification-subtitle-font-weight
);
16756 .notification-text {
16757 color: var
(--f7-notification-text-color
);
16758 font-size: var
(--f7-notification-text-font-size
);
16759 text-transform: var
(--f7-notification-text-text-transform
);
16760 line-height: var
(--f7-notification-text-line-height
);
16761 font-weight: var
(--f7-notification-text-font-weight
);
16763 .notification-title-right-text {
16764 color: var
(--f7-notification-title-right-color
);
16765 font-size: var
(--f7-notification-title-right-font-size
);
16767 .notification-icon {
16769 line-height: var
(--f7-notification-icon-size
);
16771 .notification-icon i
,
16772 .notification-icon {
16773 width: var
(--f7-notification-icon-size
) !important
;
16774 height: var
(--f7-notification-icon-size
) !important
;
16776 .notification-icon i {
16777 font-size: var
(--f7-notification-icon-size
);
16779 .notification-header {
16781 justify-content: flex-start
;
16782 align-items: center
;
16784 .notification-close-button {
16787 position: relative
;
16789 .notification-close-button:after {
16790 font-family: 'framework7-core-icons';
16791 font-weight: normal
;
16792 font-style: normal
;
16794 letter-spacing: normal
;
16795 text-transform: none
;
16796 white-space: nowrap
;
16799 -webkit-font-smoothing: antialiased
;
16800 text-rendering: optimizeLegibility
;
16801 -moz-osx-font-smoothing: grayscale
;
16802 -moz-font-feature-settings: "liga";
16803 font-feature-settings: "liga";
16808 position: absolute
;
16811 text-align: center
;
16813 .ios .notification {
16814 transition-duration: 450ms;
16815 transform: translate3d
(0%, -200%, 0);
16817 @supports ((-webkit-backdrop-filter: blur
(10px)) or
(backdrop-filter: blur
(10px))) {
16818 .ios .notification {
16819 background: var
(--f7-notification-translucent-bg-color-ios
);
16820 -webkit-backdrop-filter: blur
(10px);
16821 backdrop-filter: blur
(10px);
16824 .ios .notification.modal-in {
16825 transform: translate3d
(0%, 0%, 0);
16828 .ios .notification.modal-out {
16829 transform: translate3d
(0%, -200%, 0);
16831 .ios .notification-icon {
16834 .ios .notification-header + .notification-content {
16837 .ios .notification-title-right-text {
16841 .ios .notification-title-right-text + .notification-close-button {
16844 .ios .notification-close-button {
16849 transition-duration: 300ms;
16851 .ios .notification-close-button.active-state {
16852 transition-duration: 0ms;
16855 .ios .notification-close-button:after {
16857 content: 'notification_close_ios';
16862 margin-left: -22px;
16865 .md .notification {
16866 transform: translate3d
(0, -150%, 0);
16868 .md .notification.modal-in {
16869 transition-duration: 0ms;
16870 animation: notification-md-in
400ms ease-out
;
16871 transform: translate3d
(0, 0%, 0);
16873 .md .notification.modal-in.notification-transitioning {
16874 transition-duration: 200ms;
16876 .md .notification.modal-out {
16878 transition-duration: 200ms;
16879 transition-timing-function: ease-in
;
16880 transform: translate3d
(0, -150%, 0);
16882 .md .notification-icon {
16885 .md .notification-subtitle + .notification-text {
16888 .md .notification-header + .notification-content {
16891 .md .notification-title-right-text {
16894 .md .notification-title-right-text:before {
16898 border-radius: 50%;
16899 display: inline-block
;
16900 vertical-align: middle
;
16902 background: var
(--f7-notification-title-right-color
);
16904 .md .notification-close-button {
16907 transition-duration: 300ms;
16909 .md .notification-close-button:before {
16913 position: absolute
;
16916 background-image: radial-gradient
(circle at center
, var
(--f7-link-highlight-color
) 66%, rgba
(255, 255, 255, 0) 66%);
16917 background-repeat: no-repeat
;
16918 background-position: center
;
16919 background-size: 100% 100%;
16921 pointer-events: none
;
16922 transition-duration: 600ms;
16924 .md .notification-close-button.active-state:before {
16926 transition-duration: 150ms;
16928 .md
.notification-close-button:before
,
16929 .md .notification-close-button:after {
16934 margin-left: -24px;
16937 .md .notification-close-button:after {
16939 content: 'delete_md';
16943 @keyframes notification-md-in
{
16945 transform: translate3d
(0, -150%, 0);
16948 transform: translate3d
(0, 10%, 0);
16951 transform: translate3d
(0, 0%, 0);
16954 .aurora .notification {
16955 transition-duration: 450ms;
16956 transform: translate3d
(0%, -200%, 0);
16958 .aurora .notification.modal-in {
16959 transform: translate3d
(0%, 0%, 0);
16962 .aurora .notification.modal-out {
16963 transform: translate3d
(0%, -200%, 0);
16965 .aurora .notification-icon {
16966 margin-right: 10px;
16968 .aurora .notification-header + .notification-content {
16971 .aurora .notification-title-right-text {
16975 .aurora .notification-title-right-text + .notification-close-button {
16978 .aurora .notification-close-button {
16983 transition-duration: 300ms;
16985 .aurora .notification-close-button.active-state {
16986 transition-duration: 0ms;
16989 .aurora .notification-close-button:after {
16991 content: 'notification_close_ios';
16996 margin-left: -19px;
16999 /* === Autocomplete === */
17001 --f7-autocomplete-dropdown-bg-color: #fff;
17002 --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
17003 --f7-autocomplete-dropdown-preloader-size: 20px;
17005 --f7-autocomplete-dropdown-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
17009 --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba
(0, 0, 0, 0.2);
17010 --f7-autocomplete-dropdown-text-color: #000;
17011 --f7-autocomplete-dropdown-text-matching-color: #000;
17012 --f7-autocomplete-dropdown-text-matching-font-weight: 600;
17013 --f7-autocomplete-dropdown-font-size: var
(--f7-list-font-size
);
17017 --f7-autocomplete-dropdown-bg-color: #1c1c1d;
17018 --f7-autocomplete-dropdown-text-color: #fff;
17019 --f7-autocomplete-dropdown-text-matching-color: #fff;
17022 --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba
(0, 0, 0, 0.25);
17023 --f7-autocomplete-dropdown-text-color: rgba
(0, 0, 0, 0.54);
17024 --f7-autocomplete-dropdown-text-matching-color: #212121;
17025 --f7-autocomplete-dropdown-text-matching-font-weight: 400;
17026 --f7-autocomplete-dropdown-font-size: var
(--f7-list-font-size
);
17030 --f7-autocomplete-dropdown-bg-color: #1c1c1d;
17031 --f7-autocomplete-dropdown-text-color: rgba
(255, 255, 255, 0.54);
17032 --f7-autocomplete-dropdown-text-matching-color: rgba
(255, 255, 255, 0.87);
17035 --f7-autocomplete-dropdown-box-shadow: 0px 1px 2px rgba
(0, 0, 0, 0.2);
17036 --f7-autocomplete-dropdown-text-color: #000;
17037 --f7-autocomplete-dropdown-text-matching-color: #000;
17038 --f7-autocomplete-dropdown-text-matching-font-weight: 700;
17039 --f7-autocomplete-dropdown-font-size: 13px;
17041 .aurora
.theme-dark
,
17042 .aurora.theme-dark {
17043 --f7-autocomplete-dropdown-bg-color: #1c1c1c;
17044 --f7-autocomplete-dropdown-text-color: #fff;
17045 --f7-autocomplete-dropdown-text-matching-color: #fff;
17047 .autocomplete-page .autocomplete-found {
17050 .autocomplete-page .autocomplete-not-found {
17053 .autocomplete-page .autocomplete-values {
17056 .autocomplete-page .list ul:empty {
17059 .autocomplete-preloader:not(.autocomplete-preloader-visible) {
17060 visibility: hidden
;
17062 .autocomplete-preloader:not
(.autocomplete-preloader-visible
),
17063 .autocomplete-preloader:not(.autocomplete-preloader-visible) * {
17066 .autocomplete-dropdown {
17067 background: var
(--f7-autocomplete-dropdown-bg-color
);
17068 box-shadow: var
(--f7-autocomplete-dropdown-box-shadow
);
17069 box-sizing: border-box
;
17070 position: absolute
;
17075 .autocomplete-dropdown .autocomplete-dropdown-inner {
17076 position: relative
;
17077 will-change: scroll-position
;
17079 -webkit-overflow-scrolling: touch
;
17083 .autocomplete-dropdown .autocomplete-preloader {
17085 position: absolute
;
17087 width: var
(--f7-autocomplete-dropdown-preloader-size
);
17088 height: var
(--f7-autocomplete-dropdown-preloader-size
);
17090 .autocomplete-dropdown .autocomplete-preloader-visible {
17093 .autocomplete-dropdown .autocomplete-dropdown-placeholder {
17094 color: var
(--f7-autocomplete-dropdown-placeholder-color
);
17096 .autocomplete-dropdown .list {
17098 color: var
(--f7-autocomplete-dropdown-text-color
);
17099 font-size: var
(--f7-autocomplete-dropdown-font-size
);
17101 .autocomplete-dropdown .list b {
17102 color: var
(--f7-autocomplete-dropdown-text-matching-color
);
17103 font-weight: var
(--f7-autocomplete-dropdown-text-matching-font-weight
);
17105 .autocomplete-dropdown .list ul {
17106 background: none
!important
;
17108 .autocomplete-dropdown .list ul:before {
17109 display: none
!important
;
17111 .autocomplete-dropdown .list ul:after {
17112 display: none
!important
;
17114 .autocomplete-dropdown .autocomplete-dropdown-selected {
17115 background: var
(--f7-autocomplete-dropdown-selected-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.2));
17117 .searchbar-input-wrap .autocomplete-dropdown {
17118 background-color: var
(--f7-searchbar-input-bg-color
, var
(--f7-searchbar-bg-color
));
17119 border-radius: var
(--f7-searchbar-input-border-radius
);
17121 .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder {
17122 color: var
(--f7-searchbar-placeholder-color
);
17124 .searchbar-input-wrap .autocomplete-dropdown li:last-child {
17125 border-radius: 0 0 var
(--f7-searchbar-input-border-radius
) var
(--f7-searchbar-input-border-radius
);
17126 position: relative
;
17129 .searchbar-input-wrap .autocomplete-dropdown .item-content {
17130 padding-left: var
(--f7-searchbar-input-padding-horizontal
);
17132 .list .item-content-dropdown-expanded .item-title.item-label {
17137 .list .item-content-dropdown-expanded .item-title.item-label + .item-input-wrap {
17140 .list .item-content-dropdown-expanded .item-input-wrap {
17143 .ios .autocomplete-dropdown .autocomplete-preloader {
17145 margin-bottom: 12px;
17147 .ios .searchbar-input-wrap .autocomplete-dropdown {
17148 margin-top: calc
(-1 * var
(--f7-searchbar-input-height
));
17152 .ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
17153 padding-top: var
(--f7-searchbar-input-height
);
17155 .md .autocomplete-page .navbar .autocomplete-preloader {
17158 .md .autocomplete-popup .navbar .autocomplete-preloader {
17160 margin-right: 16px;
17162 .md .autocomplete-dropdown .autocomplete-preloader {
17164 margin-bottom: 8px;
17166 .md
.autocomplete-dropdown
.autocomplete-preloader
.preloader-inner-gap
,
17167 .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-half-circle {
17170 .aurora .autocomplete-dropdown .autocomplete-preloader {
17172 margin-bottom: 2px;
17174 .aurora .searchbar-input-wrap .autocomplete-dropdown {
17175 margin-top: calc
(-1 * var
(--f7-searchbar-input-height
));
17179 .aurora .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
17180 padding-top: var
(--f7-searchbar-input-height
);
17182 /* === Tooltip === */
17184 --f7-tooltip-bg-color: rgba
(0, 0, 0, 0.87);
17185 --f7-tooltip-text-color: #fff;
17186 --f7-tooltip-border-radius: 4px;
17187 --f7-tooltip-padding: 8px 16px;
17188 --f7-tooltip-font-size: 14px;
17189 --f7-tooltip-font-weight: 500;
17190 --f7-tooltip-desktop-padding: 6px 8px;
17191 --f7-tooltip-desktop-font-size: 12px;
17194 position: absolute
;
17196 background: var
(--f7-tooltip-bg-color
);
17197 border-radius: var
(--f7-tooltip-border-radius
);
17198 padding: var
(--f7-tooltip-padding
);
17199 color: var
(--f7-tooltip-text-color
);
17200 font-size: var
(--f7-tooltip-font-size
);
17201 font-weight: var
(--f7-tooltip-font-weight
);
17202 box-sizing: border-box
;
17205 transform: scale
(0.9);
17206 transition-duration: 150ms;
17207 transition-property: opacity
, transform
;
17210 .tooltip.tooltip-in {
17211 transform: scale
(1);
17214 .tooltip.tooltip-out {
17216 transform: scale
(1);
17218 .device-desktop .tooltip {
17219 font-size: var
(--f7-tooltip-desktop-font-size
);
17220 padding: var
(--f7-tooltip-desktop-padding
);
17222 /* === Gauge === */
17224 position: relative
;
17225 text-align: center
;
17227 margin-right: auto
;
17228 display: inline-block
;
17239 transition-duration: 400ms;
17241 /* === Skeleton === */
17243 --f7-skeleton-color: #ccc;
17246 --f7-skeleton-color: #515151;
17249 font-family: 'framework7-skeleton' !important
;
17253 color: var
(--f7-skeleton-color
) !important
;
17254 font-weight: normal
!important
;
17255 font-style: normal
!important
;
17256 letter-spacing: -0.015em !important
;
17260 background: var
(--f7-skeleton-color
) !important
;
17263 .skeleton-effect-fade {
17264 animation: skeleton-effect-fade
1s infinite
;
17266 .skeleton-effect-blink {
17267 -webkit-mask-image: linear-gradient
(to right
, transparent
0%, black
25%, black
75%, transparent
100%);
17268 mask-image: linear-gradient
(to right
, transparent
0%, black
25%, black
75%, transparent
100%);
17269 -webkit-mask-size: 200% 100%;
17270 mask-size: 200% 100%;
17271 -webkit-mask-repeat: repeat
;
17272 mask-repeat: repeat
;
17273 -webkit-mask-position: 50% top
;
17274 mask-position: 50% top
;
17275 animation: skeleton-effect-blink
1s infinite
;
17277 .skeleton-effect-pulse {
17278 animation: skeleton-effect-pulse
1s infinite
;
17280 @keyframes skeleton-effect-fade
{
17291 @keyframes skeleton-effect-blink
{
17293 -webkit-mask-position: 50% top
;
17294 mask-position: 50% top
;
17297 -webkit-mask-position: -150% top
;
17298 mask-position: -150% top
;
17301 @keyframes skeleton-effect-pulse
{
17303 transform: scale
(1);
17306 transform: scale
(1);
17309 transform: scale
(0.975);
17312 transform: scale
(1);
17317 --f7-menu-text-color: #fff;
17318 --f7-menu-font-size: 16px;
17319 --f7-menu-font-weight: 500;
17320 --f7-menu-line-height: 1.2;
17321 --f7-menu-bg-color: rgba
(0, 0, 0, 0.9);
17322 --f7-menu-item-pressed-bg-color: rgba
(20, 20, 20, 0.9);
17323 --f7-menu-item-padding-horizontal: 12px;
17324 --f7-menu-item-spacing: 6px;
17325 --f7-menu-item-height: 40px;
17326 --f7-menu-item-dropdown-icon-color: rgba
(255, 255, 255, 0.4);
17327 --f7-menu-item-border-radius: 8px;
17329 --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
17331 --f7-menu-dropdown-item-height: 28px;
17332 --f7-menu-dropdown-divider-color: rgba
(255, 255, 255, 0.2);
17333 --f7-menu-dropdown-padding-vertical: 6px;
17335 --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
17339 --f7-menu-font-size: 13px;
17340 --f7-menu-item-height: 28px;
17341 --f7-menu-dropdown-item-height: 24px;
17342 --f7-menu-item-border-radius: 5px;
17343 --f7-menu-item-padding-horizontal: 10px;
17347 position: relative
;
17348 --f7-touch-ripple-color: var
(--f7-touch-ripple-white
);
17352 justify-content: flex-start
;
17353 align-items: flex-start
;
17354 padding-left: var
(--f7-menu-item-spacing
);
17355 padding-right: var
(--f7-menu-item-spacing
);
17357 .menu-inner:after {
17359 width: var
(--f7-menu-item-spacing
);
17364 height: var
(--f7-menu-item-height
);
17365 min-width: var
(--f7-menu-item-height
);
17367 background: var
(--f7-menu-bg-color
);
17368 color: var
(--f7-menu-text-color
);
17369 border-radius: var
(--f7-menu-item-border-radius
);
17370 position: relative
;
17371 box-sizing: border-box
;
17372 font-size: var
(--f7-menu-font-size
);
17373 font-weight: var
(--f7-menu-font-weight
);
17375 margin-left: var
(--f7-menu-item-spacing
);
17377 .menu-item:first-child {
17380 .menu-item.active-state:not(.menu-item-dropdown-opened) {
17381 background-color: rgba
(0, 0, 0, 0.7);
17383 .menu-item.icon-only {
17387 .menu-item-content {
17389 justify-content: center
;
17390 align-items: center
;
17391 padding: 0 var
(--f7-menu-item-padding-horizontal
);
17393 box-sizing: border-box
;
17396 border-radius: var
(--f7-menu-item-border-radius
);
17397 position: relative
;
17399 .menu-item-content
.icon-only
,
17400 .icon-only .menu-item-content {
17404 .menu-item-dropdown .menu-item-content:after {
17406 position: absolute
;
17410 transform: translateX
(-50%);
17412 background: var
(--f7-menu-item-dropdown-icon-color
);
17413 border-radius: 4px;
17417 visibility: hidden
;
17418 pointer-events: none
;
17421 background: var
(--f7-menu-bg-color
);
17422 position: relative
;
17424 .menu-dropdown-content {
17425 position: absolute
;
17427 border-radius: var
(--f7-menu-dropdown-border-radius
, var
(--f7-menu-item-border-radius
));
17428 padding-top: var
(--f7-menu-dropdown-padding-vertical
);
17429 padding-bottom: var
(--f7-menu-dropdown-padding-vertical
);
17430 box-sizing: border-box
;
17431 background: var
(--f7-menu-bg-color
);
17432 will-change: scroll-position
;
17434 -webkit-overflow-scrolling: touch
;
17435 min-width: calc
(100% + 24px);
17437 .menu-dropdown-link
,
17438 .menu-dropdown-item {
17440 justify-content: space-between
;
17441 align-items: center
;
17442 padding-left: var
(--f7-menu-item-padding-horizontal
);
17443 padding-right: var
(--f7-menu-item-padding-horizontal
);
17444 min-height: var
(--f7-menu-dropdown-item-height
);
17445 line-height: var
(--f7-menu-line-height
);
17446 font-size: var
(--f7-menu-font-size
);
17447 color: var
(--f7-menu-text-color
);
17448 font-weight: var
(--f7-menu-font-weight
);
17449 white-space: nowrap
;
17452 .menu-dropdown-link i
,
17453 .menu-dropdown-item i
,
17454 .menu-dropdown-link i
.icon
,
17455 .menu-dropdown-item i
.icon
,
17456 .menu-dropdown-link i
.f7-icons
,
17457 .menu-dropdown-item i
.f7-icons
,
17458 .menu-dropdown-link i
.material-icons
,
17459 .menu-dropdown-item i.material-icons {
17462 .menu-dropdown-link.active-state {
17463 background: var
(--f7-menu-dropdown-pressed-bg-color
, var
(--f7-theme-color
));
17464 color: var
(--f7-menu-text-color
);
17466 .menu-dropdown-divider {
17469 margin-bottom: 2px;
17470 background: var
(--f7-menu-dropdown-divider-color
);
17472 .menu-item-dropdown-opened {
17473 border-bottom-left-radius: 0px;
17474 border-bottom-right-radius: 0px;
17476 .menu-item-dropdown-opened .menu-item-content:after {
17479 .menu-item-dropdown-opened .menu-dropdown {
17481 visibility: visible
;
17482 pointer-events: auto
;
17484 .menu-item-dropdown-left
.menu-dropdown:after
,
17485 .menu-item-dropdown-center
.menu-dropdown:after
,
17486 .menu-dropdown-left:after
,
17487 .menu-dropdown-center:after {
17489 position: absolute
;
17492 width: var
(--f7-menu-item-border-radius
);
17493 height: var
(--f7-menu-item-border-radius
);
17494 background-image: radial-gradient
(ellipse at
100% 0%, transparent
0%, transparent
70%, var
(--f7-menu-bg-color
) 72%);
17496 .menu-item-dropdown-right
.menu-dropdown:before
,
17497 .menu-item-dropdown-center
.menu-dropdown:before
,
17498 .menu-dropdown-right:before
,
17499 .menu-dropdown-center:before {
17501 position: absolute
;
17504 width: var
(--f7-menu-item-border-radius
);
17505 height: var
(--f7-menu-item-border-radius
);
17506 background-image: radial-gradient
(ellipse at
0% 0%, transparent
0%, transparent
70%, var
(--f7-menu-bg-color
) 72%);
17508 .menu-item-dropdown-left
.menu-dropdown-content
,
17509 .menu-dropdown-left .menu-dropdown-content {
17511 border-top-left-radius: 0px;
17513 .menu-item-dropdown-right
.menu-dropdown-content
,
17514 .menu-dropdown-right .menu-dropdown-content {
17516 border-top-right-radius: 0px;
17518 .menu-item-dropdown-center
.menu-dropdown-content
,
17519 .menu-dropdown-center .menu-dropdown-content {
17521 min-width: calc
(100% + 24px + 24px);
17522 transform: translateX
(-50%);
17524 /* === Color Picker === */
17526 --f7-color-picker-sheet-bg-color: #fff;
17527 --f7-color-picker-popup-bg-color: #fff;
17528 --f7-color-picker-popover-width: 350px;
17529 --f7-color-picker-slider-size: 6px;
17530 --f7-color-picker-slider-knob-size: 16px;
17531 --f7-color-picker-bar-size: 50px;
17532 --f7-color-picker-bar-min-height: 260px;
17533 --f7-color-picker-value-bg-color: rgba
(0, 0, 0, 0.05);
17534 --f7-color-picker-value-width: 64px;
17535 --f7-color-picker-value-height: 32px;
17536 --f7-color-picker-value-font-size: 16px;
17537 --f7-color-picker-value-border-radius: 4px;
17538 --f7-color-picker-hex-value-width: 84px;
17539 --f7-color-picker-label-font-size: 14px;
17540 --f7-color-picker-label-width: 10px;
17541 --f7-color-picker-label-height: 14px;
17542 --f7-color-picker-sb-spectrum-height: 260px;
17543 --f7-color-picker-sb-spectrum-handle-size: 16px;
17544 --f7-color-picker-wheel-width: 330px;
17545 --f7-color-picker-group-bg-color: rgba
(0, 0, 0, 0.05);
17546 --f7-color-picker-group-value-bg-color: #fff;
17547 --f7-color-picker-palette-value-width: 36px;
17548 --f7-color-picker-palette-value-height: 36px;
17549 --f7-color-picker-initial-current-color-height: 40px;
17550 --f7-color-picker-initial-current-color-border-radius: 4px;
17554 --f7-color-picker-sheet-bg-color: #171717;
17555 --f7-color-picker-popup-bg-color: #171717;
17556 --f7-color-picker-value-bg-color: rgba
(255, 255, 255, 0.1);
17557 --f7-color-picker-group-bg-color: #000;
17558 --f7-color-picker-group-value-bg-color: rgba
(255, 255, 255, 0.12);
17564 flex-direction: column
;
17566 .color-picker
.color-picker-inline
,
17567 .color-picker-popover
.color-picker
,
17568 .color-picker-popup .color-picker {
17569 position: relative
;
17571 .color-picker-sheet-modal {
17572 background: var
(--f7-color-picker-sheet-bg-color
);
17574 .color-picker-sheet-modal:before {
17577 .color-picker-sheet-modal .sheet-modal-inner {
17578 margin-bottom: var
(--f7-safe-area-bottom
);
17580 .color-picker-popup .page {
17581 background: var
(--f7-color-picker-popup-bg-color
);
17583 .color-picker-popup .page-content {
17584 padding-bottom: var
(--f7-safe-area-bottom
);
17586 .color-picker-popover
.color-picker
,
17587 .color-picker-popup
.color-picker
,
17588 .color-picker-page .color-picker {
17591 .color-picker-popover
.color-picker
.toolbar
,
17592 .color-picker-popup
.color-picker
.toolbar
,
17593 .color-picker-page .color-picker .toolbar {
17594 position: absolute
;
17596 .color-picker-popover {
17597 width: var
(--f7-color-picker-popover-width
);
17601 .color-picker-popover .color-picker {
17604 .color-picker-popover .toolbar-top {
17605 border-top-left-radius: var
(--f7-popover-border-radius
);
17606 border-top-right-radius: var
(--f7-popover-border-radius
);
17608 .color-picker-popover .color-picker-module-palette {
17612 .color-picker-popover .color-picker-module-palette:first-child {
17613 border-top-left-radius: var
(--f7-popover-border-radius
);
17614 border-top-right-radius: var
(--f7-popover-border-radius
);
17616 .color-picker-popover .color-picker-module-palette:last-child {
17617 border-bottom-left-radius: var
(--f7-popover-border-radius
);
17618 border-bottom-right-radius: var
(--f7-popover-border-radius
);
17620 .color-picker-popover .color-picker-module-palette:first-child:last-child {
17621 border-radius: var
(--f7-popover-border-radius
);
17623 .color-picker-popover .toolbar ~ .page-content .color-picker-module-palette:first-child {
17624 border-top-left-radius: 0;
17625 border-top-right-radius: 0;
17627 .color-picker-popup
.page-content
,
17628 .color-picker-popover
.page-content
,
17629 .color-picker-sheet-modal
.page-content
,
17630 .color-picker-page .page-content {
17632 justify-content: flex-start
;
17633 align-items: stretch
;
17634 flex-direction: column
;
17635 overflow-x: hidden
;
17637 .color-picker-module {
17640 .color-picker-module:last-child {
17641 margin-bottom: 5px;
17643 .color-picker-module-sb-spectrum
,
17644 .color-picker-module-hs-spectrum {
17646 margin-right: 10px;
17648 .color-picker-module-sb-spectrum:first-child
,
17649 .color-picker-module-hs-spectrum:first-child {
17652 .color-picker-module-sb-spectrum
.color-picker-sb-spectrum
,
17653 .color-picker-module-hs-spectrum
.color-picker-sb-spectrum
,
17654 .color-picker-module-sb-spectrum
.color-picker-hs-spectrum
,
17655 .color-picker-module-hs-spectrum .color-picker-hs-spectrum {
17656 border-radius: 4px;
17657 height: var
(--f7-color-picker-sb-spectrum-height
);
17659 .color-picker-sb-spectrum {
17660 background-color: #000;
17661 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%);
17662 position: relative
;
17664 .color-picker-hs-spectrum {
17665 position: relative
;
17666 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%));
17668 .color-picker-hs-spectrum:after {
17670 position: absolute
;
17675 background-image: linear-gradient
(to bottom
, rgba
(255, 255, 255, 0), #ffffff);
17677 .color-picker-sb-spectrum-handle
,
17678 .color-picker-hs-spectrum-handle {
17681 position: absolute
;
17686 .color-picker-sb-spectrum-handle:after
,
17687 .color-picker-hs-spectrum-handle:after {
17688 background-color: inherit
;
17690 position: absolute
;
17691 width: var
(--f7-color-picker-sb-spectrum-handle-size
);
17692 height: var
(--f7-color-picker-sb-spectrum-handle-size
);
17693 border: 1px solid
#fff;
17694 border-radius: 50%;
17695 box-shadow: 0px 0px 2px rgba
(0, 0, 0, 0.5);
17696 box-sizing: border-box
;
17699 transform: translate
(-50%, -50%);
17701 transition-property: transform
;
17702 transform-origin: center
;
17704 .color-picker-sb-spectrum-handle
.color-picker-sb-spectrum-handle-pressed:after
,
17705 .color-picker-hs-spectrum-handle
.color-picker-sb-spectrum-handle-pressed:after
,
17706 .color-picker-sb-spectrum-handle
.color-picker-hs-spectrum-handle-pressed:after
,
17707 .color-picker-hs-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after {
17708 transform: scale
(1.5) translate
(-33.333%, -33.333%);
17710 .color-picker-module-wheel {
17712 margin-right: 10px;
17714 .color-picker-wheel {
17715 position: relative
;
17716 width: var
(--f7-color-picker-wheel-width
);
17721 margin-right: auto
;
17723 .color-picker-wheel svg {
17727 .color-picker-wheel .color-picker-wheel-handle {
17728 width: calc
(100% / 6);
17729 height: calc
(100% / 6);
17730 position: absolute
;
17731 box-sizing: border-box
;
17732 border: 2px solid
#fff;
17733 box-shadow: 0px 0px 5px rgba
(0, 0, 0, 0.5);
17735 border-radius: 50%;
17739 .color-picker-wheel .color-picker-sb-spectrum {
17744 transform: translate3d
(-50%, -50%, 0);
17745 position: absolute
;
17747 .color-picker-slider-wrap {
17749 align-items: center
;
17750 margin-bottom: 2px;
17752 .color-picker-slider-wrap + .color-picker-slider-wrap {
17755 .color-picker-hex-wrap {
17756 justify-content: space-between
;
17758 align-items: center
;
17760 .color-picker-slider-label
,
17761 .color-picker-hex-label {
17762 font-size: var
(--f7-color-picker-label-font-size
);
17763 width: var
(--f7-color-picker-label-size
);
17765 margin-right: 12px;
17767 .color-picker-hex-label {
17770 .color-picker-bar-value
,
17771 .color-picker-slider-value
,
17772 .color-picker-hex-value {
17773 width: var
(--f7-color-picker-value-width
);
17774 height: var
(--f7-color-picker-value-height
);
17775 background: var
(--f7-color-picker-value-bg-color
);
17776 border-radius: var
(--f7-color-picker-value-border-radius
);
17777 text-align: center
;
17778 font-size: var
(--f7-color-picker-value-font-size
);
17780 justify-content: center
;
17781 align-items: center
;
17785 .color-picker-bar-value input
,
17786 .color-picker-slider-value input
,
17787 .color-picker-hex-value input {
17790 -webkit-appearance: none
;
17791 -moz-appearance: none
;
17795 background: transparent
;
17797 font-family: inherit
;
17798 font-size: inherit
;
17799 text-align: center
;
17801 border-radius: 4px;
17803 .color-picker-bar-value
input::-webkit-inner-spin-button
,
17804 .color-picker-slider-value
input::-webkit-inner-spin-button
,
17805 .color-picker-hex-value
input::-webkit-inner-spin-button
,
17806 .color-picker-bar-value
input::-webkit-outer-spin-button
,
17807 .color-picker-slider-value
input::-webkit-outer-spin-button
,
17808 .color-picker-hex-value input::-webkit-outer-spin-button {
17809 -webkit-appearance: none
;
17810 -moz-appearance: none
;
17815 .color-picker-hex-value {
17816 width: var
(--f7-color-picker-hex-value-width
);
17818 .color-picker-hex-value:first-child {
17821 .color-picker-slider {
17822 --f7-range-bar-active-bg-color: transparent
;
17823 --f7-range-bar-size: var
(--f7-color-picker-slider-size
);
17824 --f7-range-bar-border-radius: var
(--f7-color-picker-slider-size
);
17825 --f7-range-knob-size: var
(--f7-color-picker-slider-knob-size
);
17826 --f7-range-knob-box-shadow: 0 1px 2px rgba
(0, 0, 0, 0.3);
17828 .color-picker-slider .range-knob {
17829 transition-duration: 200ms;
17830 transition-property: transform
;
17832 .color-picker-slider .range-knob:after {
17835 margin-left: -15px;
17838 .color-picker-slider .range-knob-active-state .range-knob {
17839 transform: scale
(1.5);
17841 .md .color-picker-slider.range-slider-min:not(.range-slider-dual) .range-knob {
17842 background: var
(--f7-range-knob-color
) !important
;
17845 .color-picker-module-rgb-bars {
17847 justify-content: space-around
;
17848 justify-content: space-evenly
;
17849 align-items: stretch
;
17851 min-height: var
(--f7-color-picker-bar-min-height
);
17852 padding-bottom: 10px;
17854 box-sizing: border-box
;
17856 .color-picker-bar-wrap {
17858 align-items: center
;
17859 flex-direction: column-reverse
;
17861 .color-picker-bar {
17862 --f7-range-bar-active-bg-color: transparent
;
17863 --f7-range-bar-size: var
(--f7-color-picker-bar-size
);
17864 --f7-range-bar-border-radius: 2px;
17865 --f7-range-knob-size: 6px;
17866 --f7-range-knob-box-shadow: 0 0px 3px rgba
(0, 0, 0, 0.3);
17867 --f7-range-knob-color: #fff;
17869 .color-picker-bar .range-knob {
17870 transition-duration: 0ms;
17871 transition-property: transform
;
17872 border-radius: 3px;
17874 .color-picker-bar .range-knob-wrap {
17876 width: calc
(var
(--f7-color-picker-bar-size
) - 4px);
17877 margin-left: calc
(-0.5 * (var
(--f7-color-picker-bar-size
) - 4px));
17879 .color-picker-bar .range-knob-active-state .range-knob {
17880 transform: scale
(1);
17882 .md .color-picker-bar.range-slider-min:not(.range-slider-dual) .range-knob {
17883 background: var
(--f7-range-knob-color
) !important
;
17886 .color-picker-bar-label {
17887 font-size: var
(--f7-color-picker-label-size
);
17890 height: var
(--f7-color-picker-label-height
);
17893 .color-picker-bar-value {
17895 margin-bottom: 10px;
17897 .color-picker-slider-alpha {
17898 --f7-range-knob-color: #fff;
17900 .color-picker-slider-alpha .range-bar {
17901 background-image: linear-gradient
(to right
, 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%);
17902 background-size: 100% 100%, 6px 3px, 6px 3px;
17903 background-position: 0 0, 0px 3px, 0 0;
17904 background-repeat: repeat-y
, repeat-x
, repeat-x
;
17906 .color-picker-slider-hue .range-bar {
17907 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%));
17909 .color-picker-slider-brightness .range-bar {
17910 background-image: linear-gradient
(to right
, #000, #fff);
17912 .color-picker-module-palette {
17915 .color-picker-module-palette:first-child {
17918 .color-picker-module-palette:last-child {
17921 .color-picker-module-palette:first-child:last-child {
17924 .color-picker-palette {
17928 .color-picker-palette-row {
17933 .color-picker-palette-row .color-picker-palette-value {
17936 .color-picker-palette-value {
17937 width: var
(--f7-color-picker-palette-value-width
);
17938 height: var
(--f7-color-picker-palette-value-height
);
17941 .color-picker-module-initial-current-colors
,
17942 .color-picker-module-current-color {
17944 margin-right: 10px;
17945 border-radius: var
(--f7-color-picker-initial-current-color-border-radius
);
17949 .color-picker-initial-color
,
17950 .color-picker-current-color {
17951 height: var
(--f7-color-picker-initial-current-color-height
);
17953 .color-picker-initial-current-colors {
17956 .color-picker-initial-current-colors
.color-picker-initial-color
,
17957 .color-picker-initial-current-colors .color-picker-current-color {
17960 .color-picker-module-rgb-sliders
,
17961 .color-picker-module-hsb-sliders
,
17962 .color-picker-module-alpha-slider
,
17963 .color-picker-module-hue-slider
,
17964 .color-picker-module-brightness-slider
,
17965 .color-picker-module-hex {
17967 margin-right: 10px;
17969 .color-picker-grouped-modules
.color-picker-module-rgb-sliders
,
17970 .color-picker-grouped-modules
.color-picker-module-hsb-sliders
,
17971 .color-picker-grouped-modules
.color-picker-module-alpha-slider
,
17972 .color-picker-grouped-modules
.color-picker-module-hue-slider
,
17973 .color-picker-grouped-modules
.color-picker-module-brightness-slider
,
17974 .color-picker-grouped-modules .color-picker-module-hex {
17975 background: var
(--f7-color-picker-group-bg-color
);
17977 border-radius: 4px;
17982 .color-picker-grouped-modules
.color-picker-module-rgb-sliders:last-child
,
17983 .color-picker-grouped-modules
.color-picker-module-hsb-sliders:last-child
,
17984 .color-picker-grouped-modules
.color-picker-module-alpha-slider:last-child
,
17985 .color-picker-grouped-modules
.color-picker-module-hue-slider:last-child
,
17986 .color-picker-grouped-modules
.color-picker-module-brightness-slider:last-child
,
17987 .color-picker-grouped-modules .color-picker-module-hex:last-child {
17988 margin-bottom: 15px;
17990 .color-picker-grouped-modules
.color-picker-slider-value
,
17991 .color-picker-grouped-modules .color-picker-hex-value {
17992 background: var
(--f7-color-picker-group-value-bg-color
);
17994 .color-picker-grouped-modules
.color-picker-slider-label
,
17995 .color-picker-grouped-modules .color-picker-hex-label {
17998 .color-picker-grouped-modules
.color-picker-module-rgb-sliders
.range-slider:first-child
,
17999 .color-picker-grouped-modules
.color-picker-module-hsb-sliders
.range-slider:first-child
,
18000 .color-picker-grouped-modules
.color-picker-module-alpha-slider
.range-slider:first-child
,
18001 .color-picker-grouped-modules
.color-picker-module-hue-slider
.range-slider:first-child
,
18002 .color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:first-child {
18005 .color-picker-grouped-modules
.color-picker-module-rgb-sliders
.range-slider:last-child
,
18006 .color-picker-grouped-modules
.color-picker-module-hsb-sliders
.range-slider:last-child
,
18007 .color-picker-grouped-modules
.color-picker-module-alpha-slider
.range-slider:last-child
,
18008 .color-picker-grouped-modules
.color-picker-module-hue-slider
.range-slider:last-child
,
18009 .color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:last-child {
18012 /* === Treeview === */
18014 --f7-treeview-toggle-size: 24px;
18015 --f7-treeview-toggle-color: rgba
(0, 0, 0, 0.5);
18016 --f7-treeview-toggle-hover-bg-color: rgba
(0, 0, 0, 0.1);
18017 --f7-treeview-toggle-pressed-bg-color: rgba
(0, 0, 0, 0.15);
18018 --f7-treeview-icon-color: rgba
(0, 0, 0, 0.5);
18019 --f7-treeview-children-offset: 29px;
18020 --f7-treeview-label-font-weight: 400;
18021 --f7-treeview-label-text-color: inherit
;
18022 --f7-treeview-selectable-hover-bg-color: rgba
(0, 0, 0, 0.1);
18024 --f7-treeview-selectable-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
18026 --f7-treeview-link-hover-bg-color: rgba
(0, 0, 0, 0.1);
18027 --f7-treeview-link-pressed-bg-color: rgba
(0, 0, 0, 0.15);
18031 --f7-treeview-toggle-color: rgba
(255, 255, 255, 0.5);
18032 --f7-treeview-toggle-hover-bg-color: rgba
(255, 255, 255, 0.03);
18033 --f7-treeview-toggle-pressed-bg-color: rgba
(255, 255, 255, 0.1);
18034 --f7-treeview-icon-color: rgba
(255, 255, 255, 0.75);
18035 --f7-treeview-selectable-hover-bg-color: rgba
(255, 255, 255, 0.03);
18036 --f7-treeview-link-hover-bg-color: rgba
(255, 255, 255, 0.03);
18037 --f7-treeview-link-pressed-bg-color: rgba
(255, 255, 255, 0.11);
18040 --f7-treeview-item-height: 34px;
18041 --f7-treeview-item-padding-left: 15px;
18042 --f7-treeview-item-padding-right: 15px;
18043 --f7-treeview-label-font-size: 17px;
18044 --f7-treeview-icon-size: 24px;
18047 --f7-treeview-item-height: 34px;
18048 --f7-treeview-item-padding-left: 16px;
18049 --f7-treeview-item-padding-right: 16px;
18050 --f7-treeview-label-font-size: 16px;
18051 --f7-treeview-icon-size: 24px;
18054 --f7-treeview-item-height: 28px;
18055 --f7-treeview-item-padding-left: 15px;
18056 --f7-treeview-item-padding-right: 15px;
18057 --f7-treeview-label-font-size: 14px;
18058 --f7-treeview-icon-size: 20px;
18060 .treeview-item-root {
18061 padding-left: var
(--f7-treeview-item-padding-left
);
18062 padding-right: var
(--f7-treeview-item-padding-right
);
18063 height: var
(--f7-treeview-item-height
);
18065 align-items: center
;
18066 justify-content: flex-start
;
18068 .treeview-item-content {
18070 justify-content: flex-start
;
18071 align-items: center
;
18073 .treeview-item-content
> i
,
18074 .treeview-item-content
> .f7-icons
,
18075 .treeview-item-content > .material-icons {
18076 width: var
(--f7-treeview-icon-size
);
18077 height: var
(--f7-treeview-icon-size
);
18078 font-size: var
(--f7-treeview-icon-size
);
18079 color: var
(--f7-treeview-icon-color
);
18081 .treeview-item-content:first-child {
18082 margin-left: calc
(var
(--f7-treeview-toggle-size
) + 5px);
18084 .treeview-item-content > * + * {
18087 .treeview-item-label {
18088 font-size: var
(--f7-treeview-label-font-size
);
18089 font-weight: var
(--f7-treeview-label-font-weight
);
18090 color: var
(--f7-treeview-label-text-color
);
18093 width: var
(--f7-treeview-toggle-size
);
18094 height: var
(--f7-treeview-toggle-size
);
18096 border-radius: 4px;
18097 background-color: rgba
(0, 0, 0, 0);
18098 transition-duration: 200ms;
18099 position: relative
;
18102 .treeview-toggle.active-state {
18103 background-color: var
(--f7-treeview-toggle-pressed-bg-color
);
18105 .treeview-toggle:after {
18106 transition-duration: 200ms;
18108 position: absolute
;
18113 border-top: 5px solid transparent
;
18114 border-bottom: 5px solid transparent
;
18115 transform: translate
(-50%, -50%);
18116 border-left: 6px solid var
(--f7-treeview-toggle-color
);
18118 .treeview-toggle-hidden {
18120 pointer-events: none
;
18121 visibility: hidden
;
18123 .treeview-preloader {
18124 --f7-preloader-size: var
(--f7-treeview-toggle-size
);
18125 margin-right: calc
(-1 * var
(--f7-treeview-toggle-size
));
18127 .treeview-item-children {
18130 .treeview-item-opened > .treeview-item-children {
18133 .treeview-item-opened > .treeview-item-root .treeview-toggle:after {
18134 transform: translate
(-50%, -50%) rotate
(90deg);
18136 a
.treeview-item-root
{
18137 color: var
(--f7-treeview-label-text-color
);
18139 .treeview-item-selectable
> .treeview-item-root
,
18140 .treeview-item-selectable.treeview-item-root {
18142 transition-duration: 150ms;
18144 a
.treeview-item-root
{
18145 transition-duration: 150ms;
18147 a
.treeview-item-root
.active-state
{
18148 background: var
(--f7-treeview-link-pressed-bg-color
);
18150 .treeview-item-toggle
> .treeview-item-root
,
18151 .treeview-item-toggle.treeview-item-root {
18154 .treeview-item-selected
> .treeview-item-root
,
18155 .treeview-item-selected.treeview-item-root {
18156 background: var
(--f7-treeview-selectable-selected-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.2));
18158 .treeview-item .treeview-item .treeview-item-root {
18159 padding-left: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 1);
18161 .treeview-item .treeview-item .treeview-item .treeview-item-root {
18162 padding-left: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 2);
18164 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18165 padding-left: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 3);
18167 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18168 padding-left: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 4);
18170 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18171 padding-left: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 5);
18173 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18174 padding-left: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 6);
18176 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18177 padding-left: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 7);
18179 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18180 padding-left: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 8);
18182 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18183 padding-left: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 9);
18185 .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 {
18186 padding-left: calc
(var
(--f7-treeview-item-padding-left
) + var
(--f7-treeview-children-offset
) * 10);
18188 .aurora .treeview-toggle:hover {
18189 background-color: var
(--f7-treeview-toggle-hover-bg-color
);
18191 .aurora .treeview-toggle.active-state {
18192 background-color: var
(--f7-treeview-toggle-pressed-bg-color
);
18194 .aurora
.treeview-item-selectable
> .treeview-item-root:hover
,
18195 .aurora .treeview-item-selectable.treeview-item-root:hover {
18196 background: var
(--f7-treeview-selectable-hover-bg-color
);
18198 .aurora a.treeview-item-root:hover {
18199 background: var
(--f7-treeview-link-hover-bg-color
);
18201 .aurora a.treeview-item-root.active-state {
18202 background: var
(--f7-treeview-link-pressed-bg-color
);
18204 .aurora
.treeview-item-selected
> .treeview-item-root:hover
,
18205 .aurora .treeview-item-selected.treeview-item-root:hover {
18206 background: var
(--f7-treeview-selectable-selected-bg-color
, rgba
(var
(--f7-theme-color-rgb
), 0.2));
18209 z-index: 12900 !important
;
18210 background: #000 !important
;
18213 background: rgba
(0, 0, 0, 0.85);
18215 position: absolute
;
18220 border-radius: 3px;
18222 justify-content: center
;
18223 flex-direction: column
;
18224 align-items: center
;
18225 align-content: center
;
18226 text-align: center
;
18227 -webkit-user-select: none
;
18228 -moz-user-select: none
;
18229 -ms-user-select: none
;
18232 @supports ((-webkit-backdrop-filter: blur
(10px)) or
(backdrop-filter: blur
(10px))) {
18234 background: rgba
(0, 0, 0, 0.65);
18235 -webkit-backdrop-filter: blur
(10px);
18236 backdrop-filter: blur
(10px);
18239 .vi-overlay .vi-overlay-text {
18240 text-align: center
;
18244 .vi-overlay .vi-overlay-text + .vi-overlay-play-button {
18247 .vi-overlay .vi-overlay-play-button {
18250 border-radius: 50%;
18251 border: 2px solid
#fff;
18252 position: relative
;
18254 .vi-overlay .vi-overlay-play-button.active-state {
18257 .vi-overlay .vi-overlay-play-button:before {
18261 border-top: 8px solid transparent
;
18262 border-bottom: 8px solid transparent
;
18263 border-left: 14px solid
#fff;
18264 position: absolute
;
18268 transform: translate
(-50%, -50%);
18270 /* === Elevation === */
18272 --f7-elevation-0: 0px 0px 0px 0px rgba
(0, 0, 0, 0);
18273 --f7-elevation-1: 0px 2px 1px -1px rgba
(0, 0, 0, 0.2),
18274 0px 1px 1px 0px rgba
(0, 0, 0, 0.14),
18275 0px 1px 3px 0px rgba
(0, 0, 0, 0.12);
18276 --f7-elevation-2: 0px 3px 1px -2px rgba
(0, 0, 0, 0.2),
18277 0px 2px 2px 0px rgba
(0, 0, 0, 0.14),
18278 0px 1px 5px 0px rgba
(0, 0, 0, 0.12);
18279 --f7-elevation-3: 0px 3px 3px -2px rgba
(0, 0, 0, 0.2),
18280 0px 3px 4px 0px rgba
(0, 0, 0, 0.14),
18281 0px 1px 8px 0px rgba
(0, 0, 0, 0.12);
18282 --f7-elevation-4: 0px 2px 4px -1px rgba
(0, 0, 0, 0.2),
18283 0px 4px 5px 0px rgba
(0, 0, 0, 0.14),
18284 0px 1px 10px 0px rgba
(0, 0, 0, 0.12);
18285 --f7-elevation-5: 0px 3px 5px -1px rgba
(0, 0, 0, 0.2),
18286 0px 5px 8px 0px rgba
(0, 0, 0, 0.14),
18287 0px 1px 14px 0px rgba
(0, 0, 0, 0.12);
18288 --f7-elevation-6: 0px 3px 5px -1px rgba
(0, 0, 0, 0.2),
18289 0px 6px 10px 0px rgba
(0, 0, 0, 0.14),
18290 0px 1px 18px 0px rgba
(0, 0, 0, 0.12);
18291 --f7-elevation-7: 0px 4px 5px -2px rgba
(0, 0, 0, 0.2),
18292 0px 7px 10px 1px rgba
(0, 0, 0, 0.14),
18293 0px 2px 16px 1px rgba
(0, 0, 0, 0.12);
18294 --f7-elevation-8: 0px 5px 5px -3px rgba
(0, 0, 0, 0.2),
18295 0px 8px 10px 1px rgba
(0, 0, 0, 0.14),
18296 0px 3px 14px 2px rgba
(0, 0, 0, 0.12);
18297 --f7-elevation-9: 0px 5px 6px -3px rgba
(0, 0, 0, 0.2),
18298 0px 9px 12px 1px rgba
(0, 0, 0, 0.14),
18299 0px 3px 16px 2px rgba
(0, 0, 0, 0.12);
18300 --f7-elevation-10: 0px 6px 6px -3px rgba
(0, 0, 0, 0.2),
18301 0px 10px 14px 1px rgba
(0, 0, 0, 0.14),
18302 0px 4px 18px 3px rgba
(0, 0, 0, 0.12);
18303 --f7-elevation-11: 0px 6px 7px -4px rgba
(0, 0, 0, 0.2),
18304 0px 11px 15px 1px rgba
(0, 0, 0, 0.14),
18305 0px 4px 20px 3px rgba
(0, 0, 0, 0.12);
18306 --f7-elevation-12: 0px 7px 8px -4px rgba
(0, 0, 0, 0.2),
18307 0px 12px 17px 2px rgba
(0, 0, 0, 0.14),
18308 0px 5px 22px 4px rgba
(0, 0, 0, 0.12);
18309 --f7-elevation-13: 0px 7px 8px -4px rgba
(0, 0, 0, 0.2),
18310 0px 13px 19px 2px rgba
(0, 0, 0, 0.14),
18311 0px 5px 24px 4px rgba
(0, 0, 0, 0.12);
18312 --f7-elevation-14: 0px 7px 9px -4px rgba
(0, 0, 0, 0.2),
18313 0px 14px 21px 2px rgba
(0, 0, 0, 0.14),
18314 0px 5px 26px 4px rgba
(0, 0, 0, 0.12);
18315 --f7-elevation-15: 0px 8px 9px -5px rgba
(0, 0, 0, 0.2),
18316 0px 15px 22px 2px rgba
(0, 0, 0, 0.14),
18317 0px 6px 28px 5px rgba
(0, 0, 0, 0.12);
18318 --f7-elevation-16: 0px 8px 10px -5px rgba
(0, 0, 0, 0.2),
18319 0px 16px 24px 2px rgba
(0, 0, 0, 0.14),
18320 0px 6px 30px 5px rgba
(0, 0, 0, 0.12);
18321 --f7-elevation-17: 0px 8px 11px -5px rgba
(0, 0, 0, 0.2),
18322 0px 17px 26px 2px rgba
(0, 0, 0, 0.14),
18323 0px 6px 32px 5px rgba
(0, 0, 0, 0.12);
18324 --f7-elevation-18: 0px 9px 11px -5px rgba
(0, 0, 0, 0.2),
18325 0px 18px 28px 2px rgba
(0, 0, 0, 0.14),
18326 0px 7px 34px 6px rgba
(0, 0, 0, 0.12);
18327 --f7-elevation-19: 0px 9px 12px -6px rgba
(0, 0, 0, 0.2),
18328 0px 19px 29px 2px rgba
(0, 0, 0, 0.14),
18329 0px 7px 36px 6px rgba
(0, 0, 0, 0.12);
18330 --f7-elevation-20: 0px 10px 13px -6px rgba
(0, 0, 0, 0.2),
18331 0px 20px 31px 3px rgba
(0, 0, 0, 0.14),
18332 0px 8px 38px 7px rgba
(0, 0, 0, 0.12);
18333 --f7-elevation-21: 0px 10px 13px -6px rgba
(0, 0, 0, 0.2),
18334 0px 21px 33px 3px rgba
(0, 0, 0, 0.14),
18335 0px 8px 40px 7px rgba
(0, 0, 0, 0.12);
18336 --f7-elevation-22: 0px 10px 14px -6px rgba
(0, 0, 0, 0.2),
18337 0px 22px 35px 3px rgba
(0, 0, 0, 0.14),
18338 0px 8px 42px 7px rgba
(0, 0, 0, 0.12);
18339 --f7-elevation-23: 0px 11px 14px -7px rgba
(0, 0, 0, 0.2),
18340 0px 23px 36px 3px rgba
(0, 0, 0, 0.14),
18341 0px 9px 44px 8px rgba
(0, 0, 0, 0.12);
18342 --f7-elevation-24: 0px 11px 15px -7px rgba
(0, 0, 0, 0.2),
18343 0px 24px 38px 3px rgba
(0, 0, 0, 0.14),
18344 0px 9px 46px 8px rgba
(0, 0, 0, 0.12);
18347 box-shadow: var
(--f7-elevation-0
) !important
;
18350 box-shadow: var
(--f7-elevation-1
) !important
;
18353 box-shadow: var
(--f7-elevation-2
) !important
;
18356 box-shadow: var
(--f7-elevation-3
) !important
;
18359 box-shadow: var
(--f7-elevation-4
) !important
;
18362 box-shadow: var
(--f7-elevation-5
) !important
;
18365 box-shadow: var
(--f7-elevation-6
) !important
;
18368 box-shadow: var
(--f7-elevation-7
) !important
;
18371 box-shadow: var
(--f7-elevation-8
) !important
;
18374 box-shadow: var
(--f7-elevation-9
) !important
;
18377 box-shadow: var
(--f7-elevation-10
) !important
;
18380 box-shadow: var
(--f7-elevation-11
) !important
;
18383 box-shadow: var
(--f7-elevation-12
) !important
;
18386 box-shadow: var
(--f7-elevation-13
) !important
;
18389 box-shadow: var
(--f7-elevation-14
) !important
;
18392 box-shadow: var
(--f7-elevation-15
) !important
;
18395 box-shadow: var
(--f7-elevation-16
) !important
;
18398 box-shadow: var
(--f7-elevation-17
) !important
;
18401 box-shadow: var
(--f7-elevation-18
) !important
;
18404 box-shadow: var
(--f7-elevation-19
) !important
;
18407 box-shadow: var
(--f7-elevation-20
) !important
;
18410 box-shadow: var
(--f7-elevation-21
) !important
;
18413 box-shadow: var
(--f7-elevation-22
) !important
;
18416 box-shadow: var
(--f7-elevation-23
) !important
;
18419 box-shadow: var
(--f7-elevation-24
) !important
;
18421 .device-desktop .elevation-hover-0:hover {
18422 box-shadow: var
(--f7-elevation-0
) !important
;
18424 .device-desktop .elevation-hover-1:hover {
18425 box-shadow: var
(--f7-elevation-1
) !important
;
18427 .device-desktop .elevation-hover-2:hover {
18428 box-shadow: var
(--f7-elevation-2
) !important
;
18430 .device-desktop .elevation-hover-3:hover {
18431 box-shadow: var
(--f7-elevation-3
) !important
;
18433 .device-desktop .elevation-hover-4:hover {
18434 box-shadow: var
(--f7-elevation-4
) !important
;
18436 .device-desktop .elevation-hover-5:hover {
18437 box-shadow: var
(--f7-elevation-5
) !important
;
18439 .device-desktop .elevation-hover-6:hover {
18440 box-shadow: var
(--f7-elevation-6
) !important
;
18442 .device-desktop .elevation-hover-7:hover {
18443 box-shadow: var
(--f7-elevation-7
) !important
;
18445 .device-desktop .elevation-hover-8:hover {
18446 box-shadow: var
(--f7-elevation-8
) !important
;
18448 .device-desktop .elevation-hover-9:hover {
18449 box-shadow: var
(--f7-elevation-9
) !important
;
18451 .device-desktop .elevation-hover-10:hover {
18452 box-shadow: var
(--f7-elevation-10
) !important
;
18454 .device-desktop .elevation-hover-11:hover {
18455 box-shadow: var
(--f7-elevation-11
) !important
;
18457 .device-desktop .elevation-hover-12:hover {
18458 box-shadow: var
(--f7-elevation-12
) !important
;
18460 .device-desktop .elevation-hover-13:hover {
18461 box-shadow: var
(--f7-elevation-13
) !important
;
18463 .device-desktop .elevation-hover-14:hover {
18464 box-shadow: var
(--f7-elevation-14
) !important
;
18466 .device-desktop .elevation-hover-15:hover {
18467 box-shadow: var
(--f7-elevation-15
) !important
;
18469 .device-desktop .elevation-hover-16:hover {
18470 box-shadow: var
(--f7-elevation-16
) !important
;
18472 .device-desktop .elevation-hover-17:hover {
18473 box-shadow: var
(--f7-elevation-17
) !important
;
18475 .device-desktop .elevation-hover-18:hover {
18476 box-shadow: var
(--f7-elevation-18
) !important
;
18478 .device-desktop .elevation-hover-19:hover {
18479 box-shadow: var
(--f7-elevation-19
) !important
;
18481 .device-desktop .elevation-hover-20:hover {
18482 box-shadow: var
(--f7-elevation-20
) !important
;
18484 .device-desktop .elevation-hover-21:hover {
18485 box-shadow: var
(--f7-elevation-21
) !important
;
18487 .device-desktop .elevation-hover-22:hover {
18488 box-shadow: var
(--f7-elevation-22
) !important
;
18490 .device-desktop .elevation-hover-23:hover {
18491 box-shadow: var
(--f7-elevation-23
) !important
;
18493 .device-desktop .elevation-hover-24:hover {
18494 box-shadow: var
(--f7-elevation-24
) !important
;
18496 .active-state
.elevation-pressed-0
,
18497 .device-desktop .active-state.elevation-pressed-0 {
18498 box-shadow: var
(--f7-elevation-0
) !important
;
18500 .active-state
.elevation-pressed-1
,
18501 .device-desktop .active-state.elevation-pressed-1 {
18502 box-shadow: var
(--f7-elevation-1
) !important
;
18504 .active-state
.elevation-pressed-2
,
18505 .device-desktop .active-state.elevation-pressed-2 {
18506 box-shadow: var
(--f7-elevation-2
) !important
;
18508 .active-state
.elevation-pressed-3
,
18509 .device-desktop .active-state.elevation-pressed-3 {
18510 box-shadow: var
(--f7-elevation-3
) !important
;
18512 .active-state
.elevation-pressed-4
,
18513 .device-desktop .active-state.elevation-pressed-4 {
18514 box-shadow: var
(--f7-elevation-4
) !important
;
18516 .active-state
.elevation-pressed-5
,
18517 .device-desktop .active-state.elevation-pressed-5 {
18518 box-shadow: var
(--f7-elevation-5
) !important
;
18520 .active-state
.elevation-pressed-6
,
18521 .device-desktop .active-state.elevation-pressed-6 {
18522 box-shadow: var
(--f7-elevation-6
) !important
;
18524 .active-state
.elevation-pressed-7
,
18525 .device-desktop .active-state.elevation-pressed-7 {
18526 box-shadow: var
(--f7-elevation-7
) !important
;
18528 .active-state
.elevation-pressed-8
,
18529 .device-desktop .active-state.elevation-pressed-8 {
18530 box-shadow: var
(--f7-elevation-8
) !important
;
18532 .active-state
.elevation-pressed-9
,
18533 .device-desktop .active-state.elevation-pressed-9 {
18534 box-shadow: var
(--f7-elevation-9
) !important
;
18536 .active-state
.elevation-pressed-10
,
18537 .device-desktop .active-state.elevation-pressed-10 {
18538 box-shadow: var
(--f7-elevation-10
) !important
;
18540 .active-state
.elevation-pressed-11
,
18541 .device-desktop .active-state.elevation-pressed-11 {
18542 box-shadow: var
(--f7-elevation-11
) !important
;
18544 .active-state
.elevation-pressed-12
,
18545 .device-desktop .active-state.elevation-pressed-12 {
18546 box-shadow: var
(--f7-elevation-12
) !important
;
18548 .active-state
.elevation-pressed-13
,
18549 .device-desktop .active-state.elevation-pressed-13 {
18550 box-shadow: var
(--f7-elevation-13
) !important
;
18552 .active-state
.elevation-pressed-14
,
18553 .device-desktop .active-state.elevation-pressed-14 {
18554 box-shadow: var
(--f7-elevation-14
) !important
;
18556 .active-state
.elevation-pressed-15
,
18557 .device-desktop .active-state.elevation-pressed-15 {
18558 box-shadow: var
(--f7-elevation-15
) !important
;
18560 .active-state
.elevation-pressed-16
,
18561 .device-desktop .active-state.elevation-pressed-16 {
18562 box-shadow: var
(--f7-elevation-16
) !important
;
18564 .active-state
.elevation-pressed-17
,
18565 .device-desktop .active-state.elevation-pressed-17 {
18566 box-shadow: var
(--f7-elevation-17
) !important
;
18568 .active-state
.elevation-pressed-18
,
18569 .device-desktop .active-state.elevation-pressed-18 {
18570 box-shadow: var
(--f7-elevation-18
) !important
;
18572 .active-state
.elevation-pressed-19
,
18573 .device-desktop .active-state.elevation-pressed-19 {
18574 box-shadow: var
(--f7-elevation-19
) !important
;
18576 .active-state
.elevation-pressed-20
,
18577 .device-desktop .active-state.elevation-pressed-20 {
18578 box-shadow: var
(--f7-elevation-20
) !important
;
18580 .active-state
.elevation-pressed-21
,
18581 .device-desktop .active-state.elevation-pressed-21 {
18582 box-shadow: var
(--f7-elevation-21
) !important
;
18584 .active-state
.elevation-pressed-22
,
18585 .device-desktop .active-state.elevation-pressed-22 {
18586 box-shadow: var
(--f7-elevation-22
) !important
;
18588 .active-state
.elevation-pressed-23
,
18589 .device-desktop .active-state.elevation-pressed-23 {
18590 box-shadow: var
(--f7-elevation-23
) !important
;
18592 .active-state
.elevation-pressed-24
,
18593 .device-desktop .active-state.elevation-pressed-24 {
18594 box-shadow: var
(--f7-elevation-24
) !important
;
18596 .elevation-transition-100 {
18597 transition-duration: 100ms;
18598 transition-property: box-shadow
;
18600 .elevation-transition
,
18601 .elevation-transition-200 {
18602 transition-duration: 200ms;
18603 transition-property: box-shadow
;
18605 .elevation-transition-300 {
18606 transition-duration: 300ms;
18607 transition-property: box-shadow
;
18609 .elevation-transition-400 {
18610 transition-duration: 400ms;
18611 transition-property: box-shadow
;
18613 .elevation-transition-500 {
18614 transition-duration: 500ms;
18615 transition-property: box-shadow
;
18617 /* === Typography === */
18619 --f7-typography-padding: 15px;
18620 --f7-typography-margin: 15px;
18623 --f7-typography-padding: 16px;
18624 --f7-typography-margin: 16px;
18627 --f7-typography-padding: 15px;
18628 --f7-typography-margin: 15px;
18631 display: flex
!important
;
18634 display: block
!important
;
18636 .display-inline-flex {
18637 display: inline-flex
!important
;
18639 .display-inline-block {
18640 display: inline-block
!important
;
18643 display: inline
!important
;
18646 display: none
!important
;
18649 flex-shrink: 0 !important
;
18652 flex-shrink: 1 !important
;
18655 flex-shrink: 2 !important
;
18658 flex-shrink: 3 !important
;
18661 flex-shrink: 4 !important
;
18664 flex-shrink: 5 !important
;
18667 flex-shrink: 6 !important
;
18670 flex-shrink: 7 !important
;
18673 flex-shrink: 8 !important
;
18676 flex-shrink: 9 !important
;
18679 flex-shrink: 10 !important
;
18681 .flex-direction-row {
18682 flex-direction: row
!important
;
18684 .flex-direction-row-reverse {
18685 flex-direction: row-reverse
!important
;
18687 .flex-direction-column {
18688 flex-direction: column
!important
;
18690 .flex-direction-column-reverse {
18691 flex-direction: column-reverse
!important
;
18693 .justify-content-flex-start {
18694 justify-content: flex-start
!important
;
18696 .justify-content-center {
18697 justify-content: center
!important
;
18699 .justify-content-flex-end {
18700 justify-content: flex-end
!important
;
18702 .justify-content-space-between {
18703 justify-content: space-between
!important
;
18705 .justify-content-space-around {
18706 justify-content: space-around
!important
;
18708 .justify-content-space-evenly {
18709 justify-content: space-evenly
!important
;
18711 .justify-content-stretch {
18712 justify-content: stretch
!important
;
18714 .justify-content-start {
18715 justify-content: start
!important
;
18717 .justify-content-end {
18718 justify-content: end
!important
;
18720 .justify-content-left {
18721 justify-content: left
!important
;
18723 .justify-content-right {
18724 justify-content: right
!important
;
18726 .align-content-flex-start {
18727 align-content: flex-start
!important
;
18729 .align-content-flex-end {
18730 align-content: flex-end
!important
;
18732 .align-content-center {
18733 align-content: center
!important
;
18735 .align-content-space-between {
18736 align-content: space-between
!important
;
18738 .align-content-space-around {
18739 align-content: space-around
!important
;
18741 .align-content-stretch {
18742 align-content: stretch
!important
;
18744 .align-items-baseline {
18745 align-items: baseline
!important
;
18747 .align-items-flex-start {
18748 align-items: flex-start
!important
;
18750 .align-items-flex-end {
18751 align-items: flex-end
!important
;
18753 .align-items-center {
18754 align-items: center
!important
;
18756 .align-items-stretch {
18757 align-items: stretch
!important
;
18759 .align-self-flex-start {
18760 align-self: flex-start
!important
;
18762 .align-self-flex-end {
18763 align-self: flex-end
!important
;
18765 .align-self-center {
18766 align-self: center
!important
;
18768 .align-self-stretch {
18769 align-self: stretch
!important
;
18772 text-align: left
!important
;
18774 .text-align-center {
18775 text-align: center
!important
;
18777 .text-align-right {
18778 text-align: right
!important
;
18780 .text-align-justify {
18781 text-align: justify
!important
;
18784 float: left
!important
;
18787 float: right
!important
;
18790 float: none
!important
;
18792 .vertical-align-bottom {
18793 vertical-align: bottom
!important
;
18795 .vertical-align-middle {
18796 vertical-align: middle
!important
;
18798 .vertical-align-top {
18799 vertical-align: top
!important
;
18802 padding: 0 !important
;
18805 padding-left: 0 !important
;
18807 .no-padding-right {
18808 padding-right: 0 !important
;
18810 .no-padding-horizontal {
18811 padding-left: 0 !important
;
18812 padding-right: 0 !important
;
18815 padding-top: 0 !important
;
18817 .no-padding-bottom {
18818 padding-bottom: 0 !important
;
18820 .no-padding-vertical {
18821 padding-top: 0 !important
;
18822 padding-bottom: 0 !important
;
18825 margin: 0 !important
;
18828 margin-left: 0 !important
;
18831 margin-right: 0 !important
;
18833 .no-margin-horizontal {
18834 margin-left: 0 !important
;
18835 margin-right: 0 !important
;
18838 margin-top: 0 !important
;
18840 .no-margin-bottom {
18841 margin-bottom: 0 !important
;
18843 .no-margin-vertical {
18844 margin-top: 0 !important
;
18845 margin-bottom: 0 !important
;
18848 width: auto
!important
;
18851 width: 100% !important
;
18854 padding: var
(--f7-typography-padding
) !important
;
18857 padding: calc
(var
(--f7-typography-padding
) / 2) !important
;
18860 padding-top: var
(--f7-typography-padding
) !important
;
18862 .padding-top-half {
18863 padding-top: calc
(var
(--f7-typography-padding
) / 2) !important
;
18866 padding-bottom: var
(--f7-typography-padding
) !important
;
18868 .padding-bottom-half {
18869 padding-bottom: calc
(var
(--f7-typography-padding
) / 2) !important
;
18872 padding-left: var
(--f7-typography-padding
) !important
;
18874 .padding-left-half {
18875 padding-left: calc
(var
(--f7-typography-padding
) / 2) !important
;
18878 padding-right: var
(--f7-typography-padding
) !important
;
18880 .padding-right-half {
18881 padding-right: calc
(var
(--f7-typography-padding
) / 2) !important
;
18883 .padding-vertical {
18884 padding-top: var
(--f7-typography-padding
) !important
;
18885 padding-bottom: var
(--f7-typography-padding
) !important
;
18887 .padding-vertical-half {
18888 padding-top: calc
(var
(--f7-typography-padding
) / 2) !important
;
18889 padding-bottom: calc
(var
(--f7-typography-padding
) / 2) !important
;
18891 .padding-horizontal {
18892 padding-left: var
(--f7-typography-padding
) !important
;
18893 padding-right: var
(--f7-typography-padding
) !important
;
18895 .padding-horizontal-half {
18896 padding-left: calc
(var
(--f7-typography-padding
) / 2) !important
;
18897 padding-right: calc
(var
(--f7-typography-padding
) / 2) !important
;
18900 margin: var
(--f7-typography-margin
) !important
;
18903 margin: calc
(var
(--f7-typography-margin
) / 2) !important
;
18906 margin-top: var
(--f7-typography-margin
) !important
;
18909 margin-top: calc
(var
(--f7-typography-margin
) / 2) !important
;
18912 margin-bottom: var
(--f7-typography-margin
) !important
;
18914 .margin-bottom-half {
18915 margin-bottom: calc
(var
(--f7-typography-margin
) / 2) !important
;
18918 margin-left: var
(--f7-typography-margin
) !important
;
18920 .margin-left-half {
18921 margin-left: calc
(var
(--f7-typography-margin
) / 2) !important
;
18924 margin-right: var
(--f7-typography-margin
) !important
;
18926 .margin-right-half {
18927 margin-right: calc
(var
(--f7-typography-margin
) / 2) !important
;
18930 margin-top: var
(--f7-typography-margin
) !important
;
18931 margin-bottom: var
(--f7-typography-margin
) !important
;
18933 .margin-vertical-half {
18934 margin-top: calc
(var
(--f7-typography-margin
) / 2) !important
;
18935 margin-bottom: calc
(var
(--f7-typography-margin
) / 2) !important
;
18937 .margin-horizontal {
18938 margin-left: var
(--f7-typography-margin
) !important
;
18939 margin-right: var
(--f7-typography-margin
) !important
;
18941 .margin-horizontal-half {
18942 margin-left: calc
(var
(--f7-typography-margin
) / 2) !important
;
18943 margin-right: calc
(var
(--f7-typography-margin
) / 2) !important
;
18945 [class
*="text-color-"] {
18946 color: var
(--f7-theme-color-text-color
) !important
;
18948 [class
*="bg-color-"] {
18949 background-color: var
(--f7-theme-color-bg-color
) !important
;
18951 [class
*="border-color-"] {
18952 border-color: var
(--f7-theme-color-border-color
) !important
;