@cuterajat26/framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1,666 lines (1,665 loc) • 154 kB
CSS
/**
* Framework7 4.3.0
* Full featured mobile HTML framework for building iOS & Android apps
* http://framework7.io/
*
* Copyright 2014-2019 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: April 20, 2019
*/
/*====================
Core
==================== */
:root {
--f7-theme-color: #007aff;
--f7-theme-color-rgb: 0, 122, 255;
--f7-theme-color-shade: #0066d6;
--f7-theme-color-tint: #298fff;
--f7-safe-area-left: 0px;
--f7-safe-area-right: 0px;
--f7-safe-area-top: 0px;
--f7-safe-area-bottom: 0px;
--f7-safe-area-outer-left: 0px;
--f7-safe-area-outer-right: 0px;
--f7-device-pixel-ratio: 1;
}
@supports (left: env(safe-area-inset-left)) {
:root {
--f7-safe-area-top: env(safe-area-inset-top);
--f7-safe-area-bottom: env(safe-area-inset-bottom);
}
:root .ios-left-edge,
:root .ios-edges,
:root .safe-area-left,
:root .safe-areas,
:root .popup,
:root .sheet-modal,
:root .panel-left {
--f7-safe-area-left: env(safe-area-inset-left);
--f7-safe-area-outer-left: env(safe-area-inset-left);
}
:root .ios-right-edge,
:root .ios-edges,
:root .safe-area-right,
:root .safe-areas,
:root .popup,
:root .sheet-modal,
:root .panel-right {
--f7-safe-area-right: env(safe-area-inset-right);
--f7-safe-area-outer-right: env(safe-area-inset-right);
}
:root .no-safe-areas,
:root .no-safe-area-left,
:root .no-ios-edges,
:root .no-ios-left-edge {
--f7-safe-area-left: 0px;
--f7-safe-area-outer-left: 0px;
}
:root .no-safe-areas,
:root .no-safe-area-right,
:root .no-ios-edges,
:root .no-ios-right-edge {
--f7-safe-area-right: 0px;
--f7-safe-area-outer-right: 0px;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
:root {
--f7-device-pixel-ratio: 2;
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
:root {
--f7-device-pixel-ratio: 3;
}
}
/*====================
Fonts
==================== */
:root {
--f7-font-size: 14px;
}
.ios {
--f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
--f7-text-color: #000;
--f7-line-height: 1.4;
}
.ios .theme-dark,
.ios.theme-dark {
--f7-text-color: #fff;
}
.md {
--f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
--f7-text-color: #212121;
--f7-line-height: 1.5;
}
.md .theme-dark,
.md.theme-dark {
--f7-text-color: rgba(255, 255, 255, 0.87);
}
.aurora {
--f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
--f7-text-color: #000;
--f7-line-height: 1.5;
}
.aurora .theme-dark,
.aurora.theme-dark {
--f7-text-color: #fff;
}
/*====================
Bars
==================== */
:root {
/*
--f7-bars-link-color: var(--f7-theme-color);
*/
--f7-bars-bg-image: none;
--f7-bars-bg-color: #f7f7f8;
--f7-bars-bg-color-rgb: 247, 247, 248;
--f7-bars-text-color: #000;
--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%);
--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%);
}
.theme-dark {
--f7-bars-bg-color: #1b1b1b;
--f7-bars-text-color: #fff;
}
.ios {
--f7-bars-border-color: #c4c4c4;
}
.ios .theme-dark,
.ios.theme-dark {
--f7-bars-border-color: #282829;
}
.md {
--f7-bars-border-color: transparent;
}
.aurora {
--f7-bars-border-color: rgba(0, 0, 0, 0.2);
}
.aurora .theme-dark,
.aurora.theme-dark {
--f7-bars-border-color: #282829;
}
/*====================
Color Themes
==================== */
.text-color-primary {
--f7-theme-color-text-color: var(--f7-theme-color);
}
.bg-color-primary {
--f7-theme-color-bg-color: var(--f7-theme-color);
}
.border-color-primary {
--f7-theme-color-border-color: var(--f7-theme-color);
}
.ripple-color-primary {
--f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
}
:root {
--f7-color-red: #ff3b30;
--f7-color-red-rgb: 255, 59, 48;
--f7-color-red-shade: #ff1407;
--f7-color-red-tint: #ff6259;
--f7-color-green: #4cd964;
--f7-color-green-rgb: 76, 217, 100;
--f7-color-green-shade: #2cd048;
--f7-color-green-tint: #6ee081;
--f7-color-blue: #2196f3;
--f7-color-blue-rgb: 33, 150, 243;
--f7-color-blue-shade: #0c82df;
--f7-color-blue-tint: #48a8f5;
--f7-color-pink: #ff2d55;
--f7-color-pink-rgb: 255, 45, 85;
--f7-color-pink-shade: #ff0434;
--f7-color-pink-tint: #ff5676;
--f7-color-yellow: #ffcc00;
--f7-color-yellow-rgb: 255, 204, 0;
--f7-color-yellow-shade: #d6ab00;
--f7-color-yellow-tint: #ffd429;
--f7-color-orange: #ff9500;
--f7-color-orange-rgb: 255, 149, 0;
--f7-color-orange-shade: #d67d00;
--f7-color-orange-tint: #ffa629;
--f7-color-purple: #9c27b0;
--f7-color-purple-rgb: 156, 39, 176;
--f7-color-purple-shade: #7e208f;
--f7-color-purple-tint: #b92fd1;
--f7-color-deeppurple: #673ab7;
--f7-color-deeppurple-rgb: 103, 58, 183;
--f7-color-deeppurple-shade: #563098;
--f7-color-deeppurple-tint: #7c52c8;
--f7-color-lightblue: #5ac8fa;
--f7-color-lightblue-rgb: 90, 200, 250;
--f7-color-lightblue-shade: #32bbf9;
--f7-color-lightblue-tint: #82d5fb;
--f7-color-teal: #009688;
--f7-color-teal-rgb: 0, 150, 136;
--f7-color-teal-shade: #006d63;
--f7-color-teal-tint: #00bfad;
--f7-color-lime: #cddc39;
--f7-color-lime-rgb: 205, 220, 57;
--f7-color-lime-shade: #bac923;
--f7-color-lime-tint: #d6e25c;
--f7-color-deeporange: #ff6b22;
--f7-color-deeporange-rgb: 255, 107, 34;
--f7-color-deeporange-shade: #f85200;
--f7-color-deeporange-tint: #ff864b;
--f7-color-gray: #8e8e93;
--f7-color-gray-rgb: 142, 142, 147;
--f7-color-gray-shade: #79797f;
--f7-color-gray-tint: #a3a3a7;
--f7-color-white: #ffffff;
--f7-color-white-rgb: 255, 255, 255;
--f7-color-white-shade: #ebebeb;
--f7-color-white-tint: #ffffff;
--f7-color-black: #000000;
--f7-color-black-rgb: 0, 0, 0;
--f7-color-black-shade: #000000;
--f7-color-black-tint: #141414;
}
.color-theme-red {
--f7-theme-color: #ff3b30;
--f7-theme-color-rgb: 255, 59, 48;
--f7-theme-color-shade: #ff1407;
--f7-theme-color-tint: #ff6259;
}
.color-theme-green {
--f7-theme-color: #4cd964;
--f7-theme-color-rgb: 76, 217, 100;
--f7-theme-color-shade: #2cd048;
--f7-theme-color-tint: #6ee081;
}
.color-theme-blue {
--f7-theme-color: #2196f3;
--f7-theme-color-rgb: 33, 150, 243;
--f7-theme-color-shade: #0c82df;
--f7-theme-color-tint: #48a8f5;
}
.color-theme-pink {
--f7-theme-color: #ff2d55;
--f7-theme-color-rgb: 255, 45, 85;
--f7-theme-color-shade: #ff0434;
--f7-theme-color-tint: #ff5676;
}
.color-theme-yellow {
--f7-theme-color: #ffcc00;
--f7-theme-color-rgb: 255, 204, 0;
--f7-theme-color-shade: #d6ab00;
--f7-theme-color-tint: #ffd429;
}
.color-theme-orange {
--f7-theme-color: #ff9500;
--f7-theme-color-rgb: 255, 149, 0;
--f7-theme-color-shade: #d67d00;
--f7-theme-color-tint: #ffa629;
}
.color-theme-purple {
--f7-theme-color: #9c27b0;
--f7-theme-color-rgb: 156, 39, 176;
--f7-theme-color-shade: #7e208f;
--f7-theme-color-tint: #b92fd1;
}
.color-theme-deeppurple {
--f7-theme-color: #673ab7;
--f7-theme-color-rgb: 103, 58, 183;
--f7-theme-color-shade: #563098;
--f7-theme-color-tint: #7c52c8;
}
.color-theme-lightblue {
--f7-theme-color: #5ac8fa;
--f7-theme-color-rgb: 90, 200, 250;
--f7-theme-color-shade: #32bbf9;
--f7-theme-color-tint: #82d5fb;
}
.color-theme-teal {
--f7-theme-color: #009688;
--f7-theme-color-rgb: 0, 150, 136;
--f7-theme-color-shade: #006d63;
--f7-theme-color-tint: #00bfad;
}
.color-theme-lime {
--f7-theme-color: #cddc39;
--f7-theme-color-rgb: 205, 220, 57;
--f7-theme-color-shade: #bac923;
--f7-theme-color-tint: #d6e25c;
}
.color-theme-deeporange {
--f7-theme-color: #ff6b22;
--f7-theme-color-rgb: 255, 107, 34;
--f7-theme-color-shade: #f85200;
--f7-theme-color-tint: #ff864b;
}
.color-theme-gray {
--f7-theme-color: #8e8e93;
--f7-theme-color-rgb: 142, 142, 147;
--f7-theme-color-shade: #79797f;
--f7-theme-color-tint: #a3a3a7;
}
.color-theme-white {
--f7-theme-color: #ffffff;
--f7-theme-color-rgb: 255, 255, 255;
--f7-theme-color-shade: #ebebeb;
--f7-theme-color-tint: #ffffff;
}
.color-theme-black {
--f7-theme-color: #000000;
--f7-theme-color-rgb: 0, 0, 0;
--f7-theme-color-shade: #000000;
--f7-theme-color-tint: #141414;
}
.color-red {
--f7-theme-color: #ff3b30;
--f7-theme-color-rgb: 255, 59, 48;
--f7-theme-color-shade: #ff1407;
--f7-theme-color-tint: #ff6259;
}
.text-color-red {
--f7-theme-color-text-color: #ff3b30;
}
.bg-color-red {
--f7-theme-color-bg-color: #ff3b30;
}
.border-color-red {
--f7-theme-color-border-color: #ff3b30;
}
.ripple-color-red,
.ripple-red {
--f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
}
.color-green {
--f7-theme-color: #4cd964;
--f7-theme-color-rgb: 76, 217, 100;
--f7-theme-color-shade: #2cd048;
--f7-theme-color-tint: #6ee081;
}
.text-color-green {
--f7-theme-color-text-color: #4cd964;
}
.bg-color-green {
--f7-theme-color-bg-color: #4cd964;
}
.border-color-green {
--f7-theme-color-border-color: #4cd964;
}
.ripple-color-green,
.ripple-green {
--f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
}
.color-blue {
--f7-theme-color: #2196f3;
--f7-theme-color-rgb: 33, 150, 243;
--f7-theme-color-shade: #0c82df;
--f7-theme-color-tint: #48a8f5;
}
.text-color-blue {
--f7-theme-color-text-color: #2196f3;
}
.bg-color-blue {
--f7-theme-color-bg-color: #2196f3;
}
.border-color-blue {
--f7-theme-color-border-color: #2196f3;
}
.ripple-color-blue,
.ripple-blue {
--f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
}
.color-pink {
--f7-theme-color: #ff2d55;
--f7-theme-color-rgb: 255, 45, 85;
--f7-theme-color-shade: #ff0434;
--f7-theme-color-tint: #ff5676;
}
.text-color-pink {
--f7-theme-color-text-color: #ff2d55;
}
.bg-color-pink {
--f7-theme-color-bg-color: #ff2d55;
}
.border-color-pink {
--f7-theme-color-border-color: #ff2d55;
}
.ripple-color-pink,
.ripple-pink {
--f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
}
.color-yellow {
--f7-theme-color: #ffcc00;
--f7-theme-color-rgb: 255, 204, 0;
--f7-theme-color-shade: #d6ab00;
--f7-theme-color-tint: #ffd429;
}
.text-color-yellow {
--f7-theme-color-text-color: #ffcc00;
}
.bg-color-yellow {
--f7-theme-color-bg-color: #ffcc00;
}
.border-color-yellow {
--f7-theme-color-border-color: #ffcc00;
}
.ripple-color-yellow,
.ripple-yellow {
--f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
}
.color-orange {
--f7-theme-color: #ff9500;
--f7-theme-color-rgb: 255, 149, 0;
--f7-theme-color-shade: #d67d00;
--f7-theme-color-tint: #ffa629;
}
.text-color-orange {
--f7-theme-color-text-color: #ff9500;
}
.bg-color-orange {
--f7-theme-color-bg-color: #ff9500;
}
.border-color-orange {
--f7-theme-color-border-color: #ff9500;
}
.ripple-color-orange,
.ripple-orange {
--f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
}
.color-purple {
--f7-theme-color: #9c27b0;
--f7-theme-color-rgb: 156, 39, 176;
--f7-theme-color-shade: #7e208f;
--f7-theme-color-tint: #b92fd1;
}
.text-color-purple {
--f7-theme-color-text-color: #9c27b0;
}
.bg-color-purple {
--f7-theme-color-bg-color: #9c27b0;
}
.border-color-purple {
--f7-theme-color-border-color: #9c27b0;
}
.ripple-color-purple,
.ripple-purple {
--f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
}
.color-deeppurple {
--f7-theme-color: #673ab7;
--f7-theme-color-rgb: 103, 58, 183;
--f7-theme-color-shade: #563098;
--f7-theme-color-tint: #7c52c8;
}
.text-color-deeppurple {
--f7-theme-color-text-color: #673ab7;
}
.bg-color-deeppurple {
--f7-theme-color-bg-color: #673ab7;
}
.border-color-deeppurple {
--f7-theme-color-border-color: #673ab7;
}
.ripple-color-deeppurple,
.ripple-deeppurple {
--f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
}
.color-lightblue {
--f7-theme-color: #5ac8fa;
--f7-theme-color-rgb: 90, 200, 250;
--f7-theme-color-shade: #32bbf9;
--f7-theme-color-tint: #82d5fb;
}
.text-color-lightblue {
--f7-theme-color-text-color: #5ac8fa;
}
.bg-color-lightblue {
--f7-theme-color-bg-color: #5ac8fa;
}
.border-color-lightblue {
--f7-theme-color-border-color: #5ac8fa;
}
.ripple-color-lightblue,
.ripple-lightblue {
--f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
}
.color-teal {
--f7-theme-color: #009688;
--f7-theme-color-rgb: 0, 150, 136;
--f7-theme-color-shade: #006d63;
--f7-theme-color-tint: #00bfad;
}
.text-color-teal {
--f7-theme-color-text-color: #009688;
}
.bg-color-teal {
--f7-theme-color-bg-color: #009688;
}
.border-color-teal {
--f7-theme-color-border-color: #009688;
}
.ripple-color-teal,
.ripple-teal {
--f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
}
.color-lime {
--f7-theme-color: #cddc39;
--f7-theme-color-rgb: 205, 220, 57;
--f7-theme-color-shade: #bac923;
--f7-theme-color-tint: #d6e25c;
}
.text-color-lime {
--f7-theme-color-text-color: #cddc39;
}
.bg-color-lime {
--f7-theme-color-bg-color: #cddc39;
}
.border-color-lime {
--f7-theme-color-border-color: #cddc39;
}
.ripple-color-lime,
.ripple-lime {
--f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
}
.color-deeporange {
--f7-theme-color: #ff6b22;
--f7-theme-color-rgb: 255, 107, 34;
--f7-theme-color-shade: #f85200;
--f7-theme-color-tint: #ff864b;
}
.text-color-deeporange {
--f7-theme-color-text-color: #ff6b22;
}
.bg-color-deeporange {
--f7-theme-color-bg-color: #ff6b22;
}
.border-color-deeporange {
--f7-theme-color-border-color: #ff6b22;
}
.ripple-color-deeporange,
.ripple-deeporange {
--f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
}
.color-gray {
--f7-theme-color: #8e8e93;
--f7-theme-color-rgb: 142, 142, 147;
--f7-theme-color-shade: #79797f;
--f7-theme-color-tint: #a3a3a7;
}
.text-color-gray {
--f7-theme-color-text-color: #8e8e93;
}
.bg-color-gray {
--f7-theme-color-bg-color: #8e8e93;
}
.border-color-gray {
--f7-theme-color-border-color: #8e8e93;
}
.ripple-color-gray,
.ripple-gray {
--f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
}
.color-white {
--f7-theme-color: #ffffff;
--f7-theme-color-rgb: 255, 255, 255;
--f7-theme-color-shade: #ebebeb;
--f7-theme-color-tint: #ffffff;
}
.text-color-white {
--f7-theme-color-text-color: #ffffff;
}
.bg-color-white {
--f7-theme-color-bg-color: #ffffff;
}
.border-color-white {
--f7-theme-color-border-color: #ffffff;
}
.ripple-color-white,
.ripple-white {
--f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
}
.color-black {
--f7-theme-color: #000000;
--f7-theme-color-rgb: 0, 0, 0;
--f7-theme-color-shade: #000000;
--f7-theme-color-tint: #141414;
}
.text-color-black {
--f7-theme-color-text-color: #000000;
}
.bg-color-black {
--f7-theme-color-bg-color: #000000;
}
.border-color-black {
--f7-theme-color-border-color: #000000;
}
.ripple-color-black,
.ripple-black {
--f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
}
@font-face {
font-family: 'framework7-core-icons';
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");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'framework7-skeleton';
src: url("data:application/font-woff;charset=utf-8;base64, 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") format("woff");
font-weight: 300, 400, 500, 600, 700;
font-style: normal, italic;
}
html {
direction: rtl;
}
html,
body,
.framework7-root {
position: relative;
height: 100%;
width: 100%;
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
width: 100%;
background: #fff;
overflow: hidden;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
font-family: var(--f7-font-family);
font-size: var(--f7-font-size);
line-height: var(--f7-line-height);
color: var(--f7-text-color);
}
.theme-dark {
color: var(--f7-text-color);
}
.framework7-root {
overflow: hidden;
box-sizing: border-box;
}
.framework7-initializing *,
.framework7-initializing *:before,
.framework7-initializing *:after {
transition-duration: 0ms !important;
}
.device-ios,
.device-android {
cursor: pointer;
}
.device-ios {
touch-action: manipulation;
}
@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
html,
body,
.framework7-root {
height: 671px;
}
}
@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
html,
body,
.framework7-root {
height: 672px;
}
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
}
a,
input,
textarea,
select {
outline: 0;
}
a {
cursor: pointer;
text-decoration: none;
color: var(--f7-theme-color);
}
p {
margin: 1em 0;
}
.disabled {
opacity: 0.55 !important;
pointer-events: none !important;
}
html.device-full-viewport,
html.device-full-viewport body {
height: 100vh;
}
.ios .md-only,
.ios .if-md,
.ios .aurora-only,
.ios .if-aurora,
.ios .if-not-ios,
.ios .not-ios {
display: none !important;
}
@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
.ios,
.ios body,
.ios .framework7-root {
height: 671px;
}
}
@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
.ios,
.ios body,
.ios .framework7-root {
height: 672px;
}
}
.md .ios-only,
.md .if-ios,
.md .aurora-only,
.md .if-aurora,
.md .if-not-md,
.md .not-md {
display: none !important;
}
.aurora .ios-only,
.aurora .if-ios,
.aurora .md-only,
.aurora .if-md,
.aurora .if-not-aurora,
.aurora .not-aurora {
display: none !important;
}
/* === Statusbar === */
:root {
--f7-statusbar-height: 0px;
--f7-statusbar-bg-color: var(--f7-bars-bg-color);
}
.device-ios {
--f7-statusbar-height: var(--f7-safe-area-top, 20px);
}
.device-android {
--f7-statusbar-height: var(--f7-safe-area-top, 24px);
}
.with-statusbar.ios:not(.device-ios):not(.device-android) {
--f7-statusbar-height: 20px;
}
.with-statusbar.md:not(.device-ios):not(.device-android) {
--f7-statusbar-height: 24px;
}
@supports not (top: env(safe-area-inset-top)) {
.with-statusbar.device-ios {
--f7-statusbar-height: 20px;
}
}
@supports not (top: env(safe-area-inset-top)) {
.with-statusbar.device-android {
--f7-statusbar-height: 24px;
}
}
.statusbar {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 10000;
box-sizing: border-box;
display: block;
height: var(--f7-statusbar-height);
background: var(--f7-statusbar-bg-color, var(--f7-bars-bg-color));
}
.framework7-root {
padding-top: var(--f7-statusbar-height);
}
/* === Views === */
.views,
.view {
position: relative;
height: 100%;
z-index: 5000;
overflow: hidden;
box-sizing: border-box;
}
.framework7-root > .view,
.framework7-root > .views {
height: calc(100% - var(--f7-appbar-app-offset, 0px));
}
/* === Pages === */
:root {
--f7-page-master-width: 320px;
--f7-page-master-border-color: rgba(0, 0, 0, 0.1);
--f7-page-master-border-width: 1px;
--f7-page-swipeback-transition-duration: 400ms;
/*
--f7-page-content-extra-padding-top: 0px;
--f7-page-content-extra-padding-bottom: 0px;
*/
}
.ios {
--f7-page-bg-color: #efeff4;
--f7-page-transition-duration: 400ms;
}
.md {
--f7-page-bg-color: #fff;
--f7-page-transition-duration: 250ms;
}
.aurora {
--f7-page-bg-color: #f3f3f3;
--f7-page-transition-duration: 400ms;
}
.theme-dark {
--f7-page-bg-color: #171717;
--f7-page-master-border-color: rgba(255, 255, 255, 0.1);
}
.pages {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.page {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: translate3d(0, 0, 0);
background-color: var(--f7-page-bg-color);
}
.page.stacked {
display: none;
}
.page-with-navbar-large-collapsed {
--f7-navbar-large-collapse-progress: 1;
}
.page-previous {
pointer-events: none;
}
.page-content {
will-change: scroll-position;
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 100%;
position: relative;
z-index: 1;
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));
padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
}
.page-transitioning,
.page-transitioning .page-shadow-effect,
.page-transitioning .page-opacity-effect {
transition-duration: var(--f7-page-transition-duration);
}
.page-transitioning-swipeback,
.page-transitioning-swipeback .page-shadow-effect,
.page-transitioning-swipeback .page-opacity-effect {
transition-duration: var(--f7-page-swipeback-transition-duration);
}
.router-transition-forward .page-next,
.router-transition-backward .page-next,
.router-transition-forward .page-current,
.router-transition-backward .page-current,
.router-transition-forward .page-previous:not(.stacked),
.router-transition-backward .page-previous:not(.stacked) {
pointer-events: none;
}
.page-shadow-effect {
position: absolute;
top: 0;
width: 16px;
bottom: 0;
z-index: -1;
content: '';
opacity: 0;
left: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
}
.page-opacity-effect {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.1);
width: 100%;
bottom: 0;
content: '';
opacity: 0;
z-index: 10000;
}
.ios .page-previous {
transform: translate3d(20%, 0, 0);
}
.ios .page-next {
transform: translate3d(-100%, 0, 0);
}
.ios .page-previous .page-opacity-effect {
opacity: 1;
}
.ios .page-previous:after {
opacity: 1;
}
.ios .page-current .page-shadow-effect {
opacity: 1;
}
.ios .router-transition-forward .page-next,
.ios .router-transition-forward .page-current {
will-change: transform;
}
.ios .router-transition-forward .page-next {
animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
}
.ios .router-transition-forward .page-next:before {
position: absolute;
top: 0;
width: 16px;
bottom: 0;
z-index: -1;
content: '';
opacity: 0;
left: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
}
.ios .router-transition-forward .page-current {
animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
}
.ios .router-transition-forward .page-current:after {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.1);
width: 100%;
bottom: 0;
content: '';
opacity: 0;
z-index: 10000;
animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
}
.ios .router-transition-backward .page-previous,
.ios .router-transition-backward .page-current {
will-change: transform;
}
.ios .router-transition-backward .page-previous {
animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
}
.ios .router-transition-backward .page-previous:after {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.1);
width: 100%;
bottom: 0;
content: '';
opacity: 0;
z-index: 10000;
animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
}
.ios .router-transition-backward .page-current {
animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
}
.ios .router-transition-backward .page-current:before {
position: absolute;
top: 0;
width: 16px;
bottom: 0;
z-index: -1;
content: '';
opacity: 0;
left: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
}
.ios .router-dynamic-navbar-inside .page-shadow-effect,
.ios .router-dynamic-navbar-inside .page-opacity-effect {
top: var(--f7-navbar-height);
}
.ios .router-dynamic-navbar-inside .page-next:before,
.ios .router-dynamic-navbar-inside .page-current:after,
.ios .router-dynamic-navbar-inside .page-current:before,
.ios .router-dynamic-navbar-inside .page-previous:after {
top: var(--f7-navbar-height);
}
@keyframes ios-page-next-to-current {
from {
transform: translate3d(-100%, 0, 0);
}
to {
transform: translate3d(0%, 0, 0);
}
}
@keyframes ios-page-previous-to-current {
from {
transform: translate3d(20%, 0, 0);
}
to {
transform: translate3d(0%, 0, 0);
}
}
@keyframes ios-page-current-to-previous {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(20%, 0, 0);
}
}
@keyframes ios-page-current-to-next {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}
@keyframes ios-page-element-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes ios-page-element-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.md .page-next {
transform: translate3d(0, 56px, 0);
opacity: 0;
pointer-events: none;
}
.md .page-next.page-next-on-right {
transform: translate3d(-100%, 0, 0);
}
.md .router-transition-forward .page-next {
will-change: transform, opacity;
animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
}
.md .router-transition-forward .page-current {
animation: none;
}
.md .router-transition-backward .page-current {
will-change: transform, opacity;
animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
}
.md .router-transition-backward .page-previous {
animation: none;
}
@keyframes md-page-next-to-current {
from {
transform: translate3d(0, 56px, 0);
opacity: 0;
}
to {
transform: translate3d(0, 0px, 0);
opacity: 1;
}
}
@keyframes md-page-current-to-next {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, 56px, 0);
opacity: 0;
}
}
.aurora .page-next {
pointer-events: none;
transform: translate3d(-100%, 0px, 0);
}
.aurora .page-next.page-next-on-right {
transform: translate3d(-100%, 0, 0);
}
.aurora .page-previous .page-opacity-effect {
opacity: 1;
}
.aurora .page-previous:after {
opacity: 1;
}
.aurora .router-transition-forward .page-next {
will-change: transform;
animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
}
.aurora .router-transition-forward .page-current {
animation: none;
}
.aurora .router-transition-forward .page-current:after {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.1);
width: 100%;
bottom: 0;
content: '';
opacity: 0;
z-index: 10000;
animation: aurora-page-element-fade-in var(--f7-page-transition-duration) forwards;
}
.aurora .router-transition-backward .page-current {
will-change: transform, opacity;
animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
}
.aurora .router-transition-backward .page-previous {
animation: none;
}
.aurora .router-transition-backward .page-previous:after {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.1);
width: 100%;
bottom: 0;
content: '';
opacity: 0;
z-index: 10000;
animation: aurora-page-element-fade-out var(--f7-page-transition-duration) forwards;
}
@keyframes aurora-page-next-to-current {
from {
transform: translate3d(-100%, 0, 0);
}
to {
transform: translate3d(0, 0px, 0);
}
}
@keyframes aurora-page-current-to-next {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}
@keyframes aurora-page-element-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes aurora-page-element-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.view:not(.view-master-detail) .page-master-stacked {
display: none;
}
.view:not(.view-master-detail) .navbar-master-stacked {
display: none;
}
.view-master-detail .page-master,
.view-master-detail .navbar-master {
width: var(--f7-page-master-width);
left: auto;
right: 0;
--f7-safe-area-left: 0px;
--f7-safe-area-outer-left: 0px;
border-left: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
}
.view-master-detail .page-master-detail,
.view-master-detail .navbar-master-detail {
width: calc(100% - var(--f7-page-master-width));
--f7-safe-area-right: 0px;
--f7-safe-area-outer-right: 0px;
right: var(--f7-page-master-width);
}
.view-master-detail .page-master {
z-index: 1;
transform: none;
pointer-events: auto;
}
.view-master-detail .page-master:before,
.view-master-detail .page-master:after {
display: none;
}
.view-master-detail.router-transition .page-master {
animation: none;
}
/* === Link === */
:root {
--f7-link-highlight-black: rgba(0, 0, 0, 0.1);
--f7-link-highlight-white: rgba(255, 255, 255, 0.15);
--f7-link-highlight-color: var(--f7-link-highlight-black);
}
.theme-dark {
--f7-link-highlight-color: var(--f7-link-highlight-white);
}
.link,
.tab-link {
display: inline-flex;
align-items: center;
align-content: center;
justify-content: center;
position: relative;
box-sizing: border-box;
transform: translate3d(0, 0, 0);
z-index: 1;
}
.link i + span,
.link i + i,
.link span + i,
.link span + span {
margin-right: 4px;
}
.ios .link {
transition: opacity 300ms;
}
.ios .link.active-state {
opacity: 0.3;
transition-duration: 0ms;
}
.aurora .link {
transition: opacity 300ms;
}
.aurora .link.active-state {
opacity: 0.3;
transition-duration: 0ms;
}
/* === Navbar === */
:root {
/*
--f7-navbar-bg-color: var(--f7-bars-bg-color);
--f7-navbar-bg-image: var(--f7-bars-bg-image);
--f7-navbar-border-color: var(--f7-bars-border-color);
--f7-navbar-link-color: var(--f7-bars-link-color);
--f7-navbar-text-color: var(--f7-bars-text-color);
*/
--f7-navbar-hide-show-transition-duration: 400ms;
--f7-navbar-title-line-height: 1.2;
--f7-navbar-title-font-size: inherit;
--f7-navbar-subtitle-text-align: inherit;
--f7-navbar-large-title-line-height: 1.2;
--f7-navbar-large-title-text-color: inherit;
}
.ios {
--f7-navbar-height: 44px;
--f7-navbar-tablet-height: 44px;
--f7-navbar-font-size: 17px;
--f7-navbar-inner-padding-left: 8px;
--f7-navbar-inner-padding-right: 8px;
--f7-navbar-title-font-weight: 600;
--f7-navbar-title-margin-left: 0;
--f7-navbar-title-margin-right: 0;
--f7-navbar-title-text-align: center;
--f7-navbar-subtitle-text-color: #6d6d72;
--f7-navbar-subtitle-font-size: 10px;
--f7-navbar-subtitle-line-height: 1;
--f7-navbar-shadow-image: none;
--f7-navbar-large-title-height: 52px;
--f7-navbar-large-title-font-size: 34px;
--f7-navbar-large-title-font-weight: 700;
--f7-navbar-large-title-letter-spacing: -0.03em;
--f7-navbar-large-title-padding-left: 15px;
--f7-navbar-large-title-padding-right: 15px;
/*
--f7-navbar-link-height: var(--f7-navbar-height);
--f7-navbar-link-line-height: var(--f7-navbar-height);
*/
}
.ios .theme-dark,
.ios.theme-dark {
--f7-navbar-subtitle-text-color: #8e8e93;
}
.md {
--f7-navbar-height: 56px;
--f7-navbar-tablet-height: 64px;
--f7-navbar-font-size: 20px;
--f7-navbar-inner-padding-left: 0px;
--f7-navbar-inner-padding-right: 0px;
--f7-navbar-title-font-weight: 500;
--f7-navbar-title-margin-left: 16px;
--f7-navbar-title-margin-right: 16px;
--f7-navbar-title-text-align: left;
--f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
--f7-navbar-subtitle-font-size: 14px;
--f7-navbar-subtitle-line-height: 1.2;
--f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
--f7-navbar-large-title-font-size: 34px;
--f7-navbar-large-title-height: 56px;
--f7-navbar-large-title-font-weight: 500;
--f7-navbar-large-title-letter-spacing: 0;
--f7-navbar-large-title-padding-left: 16px;
--f7-navbar-large-title-padding-right: 16px;
/*
--f7-navbar-link-height: var(--f7-navbar-height);
--f7-navbar-link-line-height: var(--f7-navbar-height);
*/
}
.md .theme-dark,
.md.theme-dark {
--f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
}
.aurora {
--f7-navbar-height: 38px;
--f7-navbar-tablet-height: 38px;
--f7-navbar-font-size: 14px;
--f7-navbar-inner-padding-left: 15px;
--f7-navbar-inner-padding-right: 15px;
--f7-navbar-title-font-weight: 600;
--f7-navbar-title-margin-left: 0;
--f7-navbar-title-margin-right: 0;
--f7-navbar-title-text-align: center;
--f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
--f7-navbar-subtitle-font-size: 12px;
--f7-navbar-subtitle-line-height: 1;
--f7-navbar-shadow-image: none;
--f7-navbar-large-title-height: 38px;
--f7-navbar-large-title-font-size: 26px;
--f7-navbar-large-title-font-weight: bold;
--f7-navbar-large-title-letter-spacing: -0.03em;
--f7-navbar-large-title-padding-left: 15px;
--f7-navbar-large-title-padding-right: 15px;
--f7-navbar-link-height: auto;
--f7-navbar-link-line-height: inherit;
}
.aurora .theme-dark,
.aurora.theme-dark {
--f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
}
.navbar {
--f7-navbar-large-collapse-progress: 0;
position: relative;
left: 0;
top: 0;
width: 100%;
z-index: 500;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-sizing: border-box;
margin: 0;
transform: translate3d(0, 0, 0);
height: var(--f7-navbar-height);
background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
font-size: var(--f7-navbar-font-size);
}
.navbar b {
font-weight: 500;
}
.navbar a {
color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
}
.navbar a.link {
display: flex;
justify-content: flex-start;
line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
height: var(--f7-navbar-link-height, var(--f7-navbar-height));
}
.navbar .title,
.navbar .left,
.navbar .right {
position: relative;
z-index: 10;
}
.navbar .title {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 10;
font-weight: var(--f7-navbar-title-font-weight);
display: inline-block;
line-height: var(--f7-navbar-title-line-height);
text-align: var(--f7-navbar-title-text-align);
font-size: var(--f7-navbar-title-font-size);
margin-right: var(--f7-navbar-title-margin-left);
margin-left: var(--f7-navbar-title-margin-left);
}
.navbar .subtitle {
display: block;
color: var(--f7-navbar-subtitle-text-color);
font-weight: normal;
font-size: var(--f7-navbar-subtitle-font-size);
line-height: var(--f7-navbar-subtitle-line-height);
text-align: var(--f7-navbar-subtitle-text-align);
}
.navbar .left,
.navbar .right {
flex-shrink: 0;
display: flex;
justify-content: flex-start;
align-items: center;
transform: translate3d(0, 0, 0);
}
.navbar .right:first-child {
position: absolute;
height: 100%;
}
.navbar.no-hairline:after,
.navbar.no-border:after {
display: none !important;
}
.navbar.no-hairline .title-large:after,
.navbar.no-border .title-large:after {
display: none !important;
}
.navbar.no-shadow:before {
display: none !important;
}
.navbar.navbar-hidden:before {
opacity: 0 !important;
}
.navbar:after,
.navbar:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.navbar:after {
content: '';
position: absolute;
background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
display: block;
z-index: 15;
top: auto;
right: auto;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
transform-origin: 50% 100%;
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}
.navbar:before {
content: '';
position: absolute;
right: 0;
width: 100%;
top: 100%;
bottom: auto;
height: 8px;
pointer-events: none;
background: var(--f7-navbar-shadow-image);
}
.navbar:after {
z-index: 1;
}
@media (min-width: 768px) {
:root {
--f7-navbar-height: var(--f7-navbar-tablet-height);
}
}
.navbar-transitioning,
.navbar-transitioning:before,
.navbar-transitioning .title,
.navbar-transitioning .title-large,
.navbar-transitioning .title-large-inner,
.navbar-transitioning .title-large-text,
.navbar-transitioning .subnavbar {
transition-duration: var(--f7-navbar-hide-show-transition-duration);
}
.navbar-page-transitioning {
transition-duration: var(--f7-page-swipeback-transition-duration) !important;
}
.navbar-page-transitioning .title-large-text,
.navbar-page-transitioning .title-large-inner {
transition-duration: var(--f7-page-swipeback-transition-duration) !important;
}
.navbar-hidden {
transform: translate3d(0, -100%, 0);
}
.navbar-large-hidden {
--f7-navbar-large-collapse-progress: 1;
}
.navbar-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: var(--f7-navbar-height);
display: flex;
align-items: center;
box-sizing: border-box;
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));
}
.navbar-inner.stacked {
display: none;
}
.views > .navbar,
.view > .navbar,
.page > .navbar {
position: absolute;
}
.navbar-large:before {
transform: translateY(calc((1 - var(--f7-navbar-large-collapse-progress)) * var(--f7-navbar-large-title-height)));
}
.navbar-inner-large > .title {
opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress));
}
.navbar-large-collapsed,
.navbar-inner-large-collapsed {
--f7-navbar-large-collapse-progress: 1;
}
.navbar .title-large {
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 100%;
display: flex;
align-items: center;
white-space: nowrap;
transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
will-change: transform, opacity;
transition-property: transform;
overflow: hidden;
background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
height: calc(var(--f7-navbar-large-title-height) + 1px);
z-index: 5;
margin-top: -1px;
transform-origin: calc(100% - var(--f7-navbar-large-title-padding-left) - var(--f7-safe-area-left)) center;
}
.navbar .title-large:after {
content: '';
position: absolute;
background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
display: block;
z-index: 15;
top: auto;
right: auto;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
transform-origin: 50% 100%;
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}
.title-large-text,
.title-large-inner .title {
text-overflow: ellipsis;
white-space: nowrap;
color: var(--f7-navbar-large-title-text-color);
letter-spacing: var(--f7-navbar-large-title-letter-spacing);
font-size: var(--f7-navbar-large-title-font-size);
font-weight: var(--f7-navbar-large-title-font-weight);
line-height: var(--f7-navbar-large-title-line-height);
padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
transform-origin: calc(100% - var(--f7-navbar-large-title-padding-left) - var(--f7-safe-area-left)) center;
}
.title-large-text,
.title-large-inner {
box-sizing: border-box;
overflow: hidden;
transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
transition-property: transform, opacity;
width: 100%;
}
.navbar-no-title-large-transition .title-large,
.navbar-no-title-large-transition .title-large-text,
.navbar-no-title-large-transition .title-large-inner {
transition-duration: 0ms;
}
.navbar ~ * {
--f7-page-navbar-offset: var(--f7-navbar-height);
}
.navbar ~ * .page-with-navbar-large,
.navbar ~ .page-with-navbar-large,
.page-with-navbar-large .navbar ~ * {
--f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
}
.page.no-navbar,
.page.no-navbar .navbar ~ * {
--f7-page-navbar-offset: 0px;
}
.ios {
--f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
--f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
}
.ios .navbar .material-icons {
width: 24px;
}
.ios .navbar .f7-icons {
width: 28px;
}
.ios .navbar a.icon-only {
width: 44px;
margin: 0;
justify-content: center;
}
.ios .navbar .left a + a,
.ios .navbar .right a + a {
margin-right: 15px;
}
.ios .navbar b {
font-weight: 600;
}
.ios .navbar .left {
margin-left: 10px;
}
.ios .navbar .right {
margin-right: 10px;
}
.ios .navbar .right:first-child {
left: calc(8px + var(--f7-safe-area-left));
}
.ios .navbar-inner {
justify-content: space-between;
}
.ios .navbar-inner-left-title {
justify-content: flex-start;
}
.ios .navbar-inner-left-title .right {
margin-right: auto;
}
.ios .navbar-inner-left-title .title {
text-align: left;
margin-left: 10px;
}
.ios .view-master-detail .navbar-previous:not(.navbar-master),
.ios .view:not(.view-master-detail) .navbar-previous {
pointer-events: none;
}
.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
.ios .view:not(.view-master-detail) .navbar-previous .title-large {
transform: translateY(-100%);
opacity: 0;
transition: 0ms;
}
.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
.ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
transform: scale(0.5);
transition: 0ms;
}
.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-inner,
.ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner {
transform: translateX(-100%);
opacity: 0;
transition: 0ms;
}
.ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
.ios .view:not(.view-master-detail) .navbar-previous .left,
.ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
.ios .view:not(.view-master-detail) .navbar-previous .right,
.ios .view-master-detail .navbar-previous:not(.navbar-master) > .title,
.ios .view:not(.view-master-detail) .navbar-previous > .title,
.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
.ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
.ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
.ios .view:not(.view-master-detail) .navbar-previous .fading {
opacity: 0;
}
.ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding,
.ios .view:not(.view-master-detail) .navbar-previous .sliding {
opacity: 0;
}
.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
.ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
.ios .view-master-detail .navbar-previous:not(.navbar-master).sliding .subnavbar,
.ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar {
opacity: 1;
transform: translate3d(-100%, 0, 0);
}
.ios .navbar-next {
po