UNPKG

@cuterajat26/framework7

Version:

Full featured mobile HTML framework for building iOS & Android apps

1,666 lines (1,665 loc) 154 kB
/** * 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, 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 { 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