UNPKG

framework7

Version:

Full featured mobile HTML framework for building iOS & Android apps

1,757 lines (1,756 loc) 630 kB
/** * Framework7 5.5.3 * Full featured mobile HTML framework for building iOS & Android apps * https://framework7.io/ * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: March 28, 2020 */ /*==================== 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 & Bars ==================== */ :root { --f7-font-size: 14px; /* --f7-bars-link-color: var(--f7-theme-color); */ --f7-bars-bg-image: none; --f7-bars-translucent-opacity: 0.8; --f7-bars-translucent-blur: 20px; --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%); --f7-bars-text-color: #000; --f7-bars-bg-color: #f7f7f8; --f7-bars-bg-color-rgb: 247, 247, 248; } :root .theme-dark, :root.theme-dark { --f7-bars-text-color: #fff; } .ios { --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif; --f7-line-height: 1.4; --f7-text-color: #000; --f7-bars-border-color: rgba(0, 0, 0, 0.25); } .ios .theme-dark, .ios.theme-dark { --f7-text-color: #fff; --f7-bars-bg-color: #121212; --f7-bars-bg-color-rgb: 22, 22, 22; --f7-bars-border-color: rgba(255, 255, 255, 0.16); } .md { --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif; --f7-line-height: 1.5; --f7-bars-border-color: transparent; --f7-text-color: #212121; } .md .theme-dark, .md.theme-dark { --f7-text-color: rgba(255, 255, 255, 0.87); --f7-bars-bg-color: #202020; } .aurora { --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif; --f7-line-height: 1.5; --f7-text-color: #000; --f7-bars-border-color: rgba(0, 0, 0, 0.2); } .aurora .theme-dark, .aurora.theme-dark { --f7-text-color: #fff; --f7-bars-bg-color: #202020; --f7-bars-border-color: rgba(255, 255, 255, 0.1); } /*==================== 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, 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") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: 'framework7-skeleton'; 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"); font-weight: 300, 400, 500, 600, 700; font-style: normal, italic; } 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); } .link, .item-link { cursor: pointer; } 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 === */ /* === 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: 300ms; --f7-page-parallax-transition-duration: 500ms; --f7-page-cover-transition-duration: 450ms; --f7-page-dive-transition-duration: 500ms; --f7-page-fade-transition-duration: 500ms; --f7-page-flip-transition-duration: 700ms; --f7-page-push-transition-duration: 500ms; /* --f7-page-content-extra-padding-top: 0px; --f7-page-content-extra-padding-bottom: 0px; */ } .ios { --f7-page-transition-duration: 400ms; --f7-page-bg-color: #efeff4; } .ios .theme-dark, .ios.theme-dark { --f7-page-bg-color: #000; } .md { --f7-page-transition-duration: 250ms; --f7-page-bg-color: #fff; } .md .theme-dark, .md.theme-dark { --f7-page-bg-color: #121212; } .aurora { --f7-page-transition-duration: 400ms; --f7-page-bg-color: #f3f3f3; } .aurora .theme-dark, .aurora.theme-dark { --f7-page-bg-color: #121212; } .theme-dark { --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: none; background-color: var(--f7-page-bg-color); z-index: 1; } .page.stacked { display: none; } .page-with-navbar-large-collapsed { --f7-navbar-large-collapse-progress: 1; } .page-previous { pointer-events: none; } .page-content { 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; right: 100%; 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%); } .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 { 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; right: 100%; 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%); 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 { 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; right: 100%; 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%); animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards; } @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 { 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 { 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 { 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 { 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); --f7-safe-area-right: 0px; --f7-safe-area-outer-right: 0px; border-right: 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-left: 0px; --f7-safe-area-outer-left: 0px; left: var(--f7-page-master-width); } .view-master-detail .page-master { z-index: 2; 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; } .md .router-transition-custom .page-previous, .ios .router-transition-custom .page-previous, .aurora .router-transition-custom .page-previous, .md .router-transition-custom .page-next, .ios .router-transition-custom .page-next, .aurora .router-transition-custom .page-next { opacity: 1; transform: none; } .router-transition-f7-circle-forward:after, .router-transition-f7-circle-backward:after { content: ''; position: absolute; left: 50%; top: 50%; width: 100vmax; height: 100vmax; margin-left: -50vmax; margin-top: -50vmax; background: var(--f7-page-bg-color); z-index: 100; } .router-transition-f7-circle-forward:after { transform: scale(0); border-radius: 50%; animation: f7-circle-circle-in 400ms forwards; } .router-transition-f7-circle-forward .page-next { opacity: 0 !important; transform: scale(0.9) !important; animation: f7-circle-next-to-current 300ms forwards; animation-delay: 300ms; z-index: 150; } .router-transition-f7-circle-backward:after { animation: f7-circle-circle-out 300ms forwards; animation-delay: 350ms; } .router-transition-f7-circle-backward .page-current { animation: f7-circle-current-to-next 700ms forwards; z-index: 150; } @keyframes f7-circle-circle-in { from { transform: scale(0); border-radius: 50%; } 50% { border-radius: 50%; } to { transform: scale(1); border-radius: 0%; } } @keyframes f7-circle-circle-out { from { transform: scale(1); border-radius: 0%; } 50% { border-radius: 50%; } to { transform: scale(0); border-radius: 50%; } } @keyframes f7-circle-next-to-current { from { transform: scale(0.9); opacity: 0; } 40% { transform: scale(1.035); opacity: 1; } to { transform: scale(1); opacity: 1; } } @keyframes f7-circle-current-to-next { from { transform: scale(1); opacity: 1; } 34% { transform: scale(1.035); opacity: 1; } 57% { transform: scale(0.9); opacity: 0; } to { transform: scale(0.9); opacity: 0; } } .router-transition-f7-cover-v-forward, .router-transition-f7-cover-v-backward { background: #000; perspective: 1200px; } .router-transition-f7-cover-v-forward .page-next { animation: f7-cover-v-next-to-current var(--f7-page-cover-transition-duration) forwards; } .router-transition-f7-cover-v-forward .page-current { animation: f7-cover-v-current-to-prev var(--f7-page-cover-transition-duration) forwards; } .router-transition-f7-cover-v-backward .page-current { animation: f7-cover-v-current-to-next var(--f7-page-cover-transition-duration) forwards; } .router-transition-f7-cover-v-backward .page-previous { animation: f7-cover-v-prev-to-current var(--f7-page-cover-transition-duration) forwards; } @keyframes f7-cover-v-next-to-current { from { transform: translateY(100%); } to { transform: translateY(0%); } } @keyframes f7-cover-v-current-to-next { from { transform: translateY(0%); } to { transform: translateY(100%); } } @keyframes f7-cover-v-current-to-prev { from { transform: translateZ(0); opacity: 1; } to { transform: translateZ(-300px); opacity: 0.5; } } @keyframes f7-cover-v-prev-to-current { from { transform: translateZ(-300px); opacity: 0.5; } to { transform: translateZ(0); opacity: 1; } } .router-transition-f7-cover-forward, .router-transition-f7-cover-backward { background: #000; perspective: 1200px; } .router-transition-f7-cover-forward .page-next { animation: f7-cover-next-to-current var(--f7-page-cover-transition-duration) forwards; } .router-transition-f7-cover-forward .page-current { animation: f7-cover-current-to-prev var(--f7-page-cover-transition-duration) forwards; } .router-transition-f7-cover-backward .page-current { animation: f7-cover-current-to-next var(--f7-page-cover-transition-duration) forwards; } .router-transition-f7-cover-backward .page-previous { animation: f7-cover-prev-to-current var(--f7-page-cover-transition-duration) forwards; } @keyframes f7-cover-next-to-current { from { transform: translateX(100%); } to { transform: translateX(0%); } } @keyframes f7-cover-current-to-next { from { transform: translateX(0%); } to { transform: translateX(100%); } } @keyframes f7-cover-current-to-prev { from { transform: translateZ(0); opacity: 1; } to { transform: translateZ(-300px); opacity: 0.5; } } @keyframes f7-cover-prev-to-current { from { transform: translateZ(-300px); opacity: 0.5; } to { transform: translateZ(0); opacity: 1; } } .router-transition-f7-dive-forward, .router-transition-f7-dive-backward { background: var(--f7-page-bg-color); perspective: 1200px; } .router-transition-f7-dive-forward .page-next { animation: f7-dive-next-to-current var(--f7-page-dive-transition-duration) forwards; } .router-transition-f7-dive-forward .page-current { animation: f7-dive-current-to-prev var(--f7-page-dive-transition-duration) forwards; } .router-transition-f7-dive-backward .page-current { animation: f7-dive-current-to-next var(--f7-page-dive-transition-duration) forwards; } .router-transition-f7-dive-backward .page-previous { animation: f7-dive-prev-to-current var(--f7-page-dive-transition-duration) forwards; } @keyframes f7-dive-next-to-current { from { opacity: 0; transform: translateZ(-150px); } 50% { opacity: 0; } to { opacity: 1; transform: translateZ(0px); } } @keyframes f7-dive-current-to-next { from { opacity: 1; transform: translateZ(0px); } 50% { opacity: 0; } to { opacity: 0; transform: translateZ(-150px); } } @keyframes f7-dive-current-to-prev { from { transform: translateZ(0px); opacity: 1; } 50% { opacity: 0; } to { opacity: 0; transform: translateZ(150px); } } @keyframes f7-dive-prev-to-current { from { opacity: 0; transform: translateZ(150px); } 50% { opacity: 0; } to { opacity: 1; transform: translateZ(0px); } } .router-transition-f7-fade-forward, .router-transition-f7-fade-backward { background: var(--f7-page-bg-color); } .router-transition-f7-fade-forward .page-next { opacity: 0 !important; animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards; } .router-transition-f7-fade-forward .page-current { animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards; } .router-transition-f7-fade-backward .page-current { animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards; } .router-transition-f7-fade-backward .page-previous { animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards; } @keyframes f7-fade-in { from { opacity: 0; } 50% { opacity: 0; } to { opacity: 1; } } @keyframes f7-fade-out { from { opacity: 1; } 50% { opacity: 0; } to { opacity: 0; } } .router-transition-f7-flip-forward, .router-transition-f7-flip-backward { background: #000; perspective: 1200px; } .router-transition-f7-flip-forward .page, .router-transition-f7-flip-backward .page { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .router-transition-f7-flip-forward .page-next { animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards; } .router-transition-f7-flip-forward .page-current { animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards; } .router-transition-f7-flip-backward .page-current { animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards; } .router-transition-f7-flip-backward .page-previous { animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards; } @keyframes f7-flip-next-to-current { from { border-radius: 30px; transform: translateZ(-100vmax) rotateY(180deg); } to { border-radius: 0; transform: translateZ(0px) rotateY(0deg); } } @keyframes f7-flip-current-to-next { from { border-radius: 0px; transform: translateZ(0px) rotateY(0deg); } to { border-radius: 30px; transform: translateZ(-100vmax) rotateY(180deg); } } @keyframes f7-flip-current-to-prev { from { border-radius: 0px; transform: translateZ(0px) rotateY(0deg); } to { border-radius: 30px; transform: translateZ(-100vmax) rotateY(-180deg); } } @keyframes f7-flip-prev-to-current { from { border-radius: 30px; transform: translateZ(-100vmax) rotateY(-180deg); } to { border-radius: 0px; transform: translateZ(0px) rotateY(0deg); } } .router-transition-f7-parallax-forward .page-next { animation: f7-parallax-next-to-current var(--f7-page-parallax-transition-duration) forwards; } .router-transition-f7-parallax-forward .page-current { animation: f7-parallax-current-to-prev var(--f7-page-parallax-transition-duration) forwards; } .router-transition-f7-parallax-backward .page-current { animation: f7-parallax-current-to-next var(--f7-page-parallax-transition-duration) forwards; } .router-transition-f7-parallax-backward .page-previous { animation: f7-parallax-prev-to-current var(--f7-page-parallax-transition-duration) forwards; } @keyframes f7-parallax-next-to-current { from { transform: translateX(100%); } to { transform: translateX(0%); } } @keyframes f7-parallax-current-to-next { from { transform: translateX(0%); } to { transform: translateX(100%); } } @keyframes f7-parallax-current-to-prev { from { transform: translateX(0%); } to { transform: translateX(-20%); } } @keyframes f7-parallax-prev-to-current { from { transform: translateX(-20%); } to { transform: translateX(0%); } } .router-transition-f7-push-forward .page-next { animation: f7-push-next-to-current var(--f7-page-push-transition-duration) forwards; } .router-transition-f7-push-forward .page-current { animation: f7-push-current-to-prev var(--f7-page-push-transition-duration) forwards; } .router-transition-f7-push-backward .page-current { animation: f7-push-current-to-next var(--f7-page-push-transition-duration) forwards; } .router-transition-f7-push-backward .page-previous { animation: f7-push-prev-to-current var(--f7-page-push-transition-duration) forwards; } @keyframes f7-push-next-to-current { from { transform: translateX(100%); } to { transform: translateX(0%); } } @keyframes f7-push-current-to-next { from { transform: translateX(0%); } to { transform: translateX(100%); } } @keyframes f7-push-current-to-prev { from { transform: translateX(0%); } to { transform: translateX(-100%); } } @keyframes f7-push-prev-to-current { from { transform: translateX(-100%); } to { transform: translateX(0%); } } /* === 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; z-index: 1; } .link i + span, .link i + i, .link span + i, .link span + span { margin-left: 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-color-rgb: var(--f7-bars-bg-color-rgb); --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; --f7-navbar-large-title-padding-left: 16px; --f7-navbar-large-title-padding-right: 16px; } .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-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-vertical: 6px; /* --f7-navbar-link-height: var(--f7-navbar-height); --f7-navbar-link-line-height: var(--f7-navbar-height); */ --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55); } .ios .theme-dark, .ios.theme-dark { --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55); } .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-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-vertical: 8px; /* --f7-navbar-link-height: var(--f7-navbar-height); --f7-navbar-link-line-height: var(--f7-navbar-height); */ --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85); } .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: 16px; --f7-navbar-inner-padding-right: 16px; --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-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-vertical: 4px; --f7-navbar-link-height: auto; --f7-navbar-link-line-height: inherit; --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6); } .aurora .theme-dark, .aurora.theme-dark { --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5); } .navbars, .navbar { z-index: 500; left: 0; top: 0; width: 100%; } .navbars { position: absolute; } .navbars .navbar { z-index: auto; } .navbar { --f7-navbar-large-collapse-progress: 0; position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: border-box; margin: 0; height: calc(var(--f7-navbar-height) + var(--f7-safe-area-top)); color: var(--f7-navbar-text-color, var(--f7-bars-text