framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 16.2 kB
CSS
:root{--f7-searchbar-input-border-width:0px;--f7-searchbar-input-border-color:#0000}.ios{--f7-searchbar-bg-color:#0000;--f7-searchbar-height:44px;--f7-searchbar-inner-padding-left:0px;--f7-searchbar-inner-padding-right:0px;--f7-searchbar-link-color:var(--f7-bars-text-color);--f7-searchbar-input-font-size:17px;--f7-searchbar-input-border-radius:44px;--f7-searchbar-input-height:44px;--f7-searchbar-inline-input-height:44px;--f7-searchbar-input-padding-horizontal:44px;--f7-searchbar-backdrop-bg-color:#0006;--f7-searchbar-in-page-content-margin:16px;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:44px;--f7-searchbar-in-page-content-input-border-radius:44px;--f7-searchbar-input-bg-color:var(--f7-glass-bg-color);--f7-searchbar-placeholder-color:#0006;--f7-searchbar-input-text-color:#000;--f7-searchbar-search-icon-color:#0006}.ios .dark,.ios.dark{--f7-searchbar-placeholder-color:#fff6;--f7-searchbar-input-text-color:#fff;--f7-searchbar-search-icon-color:#fff6}.md{--f7-searchbar-border-color:#0000;--f7-searchbar-height:48px;--f7-searchbar-inner-padding-left:8px;--f7-searchbar-inner-padding-right:8px;--f7-searchbar-input-font-size:16px;--f7-searchbar-input-border-radius:24px;--f7-searchbar-input-height:48px;--f7-searchbar-inline-input-height:48px;--f7-searchbar-inline-input-border-radius:24px;--f7-searchbar-input-padding-horizontal:16px;--f7-searchbar-inline-input-padding-horizontal:16px;--f7-searchbar-backdrop-bg-color:#00000040;--f7-searchbar-in-page-content-margin:16px 0;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:24px;--f7-searchbar-in-page-content-input-border-radius:24px;--f7-searchbar-bg-color:#0000}.md,.md .dark,.md [class*=color-]{--f7-searchbar-link-color:var(--f7-md-on-surface);--f7-searchbar-search-icon-color:var(--f7-md-on-surface);--f7-searchbar-input-clear-button-color:var(--f7-md-on-surface);--f7-searchbar-placeholder-color:var(--f7-md-on-surface-variant);--f7-searchbar-input-bg-color:var(--f7-md-secondary-container);--f7-searchbar-input-text-color:var(--f7-md-on-surface)}.searchbar{--f7-link-highlight-color:var(--f7-link-highlight-black);background-color:var(--f7-searchbar-bg-color,var(--f7-bars-bg-color));height:var(--f7-searchbar-height);position:relative;width:100%;z-index:200}.dark .searchbar{--f7-link-highlight-color:var(--f7-link-highlight-white)}.searchbar input[type=search]::-webkit-search-decoration{display:none}.ios .subnavbar .searchbar{backdrop-filter:none;background-color:initial}.ios .subnavbar .searchbar:after,.searchbar.no-outline:after{display:none}.searchbar:after{background-color:var(--f7-searchbar-border-color,var(--f7-bars-border-color));bottom:0;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:auto;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 100%;width:100%;z-index:15}.page>.searchbar:not(.searchbar-inline){z-index:600}.searchbar input[type=search],.searchbar input[type=text]{appearance:none;background-color:var(--f7-searchbar-input-bg-color);border:var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);border-radius:var(--f7-searchbar-input-border-radius);box-sizing:border-box;color:var(--f7-searchbar-input-text-color);display:block;font-family:inherit;font-size:var(--f7-searchbar-input-font-size);font-weight:400;height:100%;padding:0;padding-left:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left, 0px));padding-right:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right, 0px));position:relative;width:100%}.searchbar input[type=search]::placeholder,.searchbar input[type=text]::placeholder{color:var(--f7-searchbar-placeholder-color);opacity:1}.searchbar input::-webkit-search-cancel-button{appearance:none}.searchbar .searchbar-input-wrap{flex-shrink:1;height:var(--f7-searchbar-input-height);position:relative;width:100%}.searchbar a{color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.page>.searchbar:not(.searchbar-inline){left:16px;position:absolute;right:16px;top:0;width:auto}.page-content .searchbar:not(.searchbar-inline){border-radius:var(--f7-searchbar-in-page-content-border-radius);box-shadow:var(--f7-searchbar-in-page-content-box-shadow);margin:var(--f7-searchbar-in-page-content-margin);width:auto}.page-content .searchbar:not(.searchbar-inline) .searchbar-inner,.page-content .searchbar:not(.searchbar-inline) input[type=search],.page-content .searchbar:not(.searchbar-inline) input[type=text]{border-radius:var(--f7-searchbar-in-page-content-input-border-radius,var(--f7-searchbar-input-border-radius))}.searchbar .input-clear-button{color:var(--f7-searchbar-input-clear-button-color,var(--f7-input-clear-button-color))}.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-searchbar-height);pointer-events:none;position:absolute;transition-duration:.3s}.navbar .searchbar-expandable{background:#0000}.navbar .searchbar-expandable:after{display:none}.navbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbar .searchbar.searchbar-expandable .searchbar-inner{height:calc(100% - var(--f7-safe-area-top));top:var(--f7-safe-area-top)}.toolbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-toolbar-height)}.subnavbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-subnavbar-height)}.tabbar-icons .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-tabbar-icons-height)}.searchbar-inner{align-items:center;box-sizing:border-box;display:flex;height:100%;left:0;padding:0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));position:absolute;top:0;width:100%}.searchbar-disable-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;opacity:0;outline:0;padding:0;pointer-events:none;width:auto}.searchbar-icon{background-position:50%;background-repeat:no-repeat;pointer-events:none}.searchbar-icon:after{color:var(--f7-searchbar-search-icon-color);font-family:framework7-core-icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;display:block;font-feature-settings:"liga";font-size:20px;height:100%;text-align:center;width:100%}.searchbar-backdrop{background:var(--f7-searchbar-backdrop-bg-color);height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform:translateZ(0);transition-duration:.3s;width:100%;z-index:100}.searchbar-backdrop.searchbar-backdrop-in{opacity:1;pointer-events:auto}.page-content>.searchbar-backdrop{position:fixed}.searchbar-not-found{display:none}.hidden-by-searchbar,.list .hidden-by-searchbar,.list li.hidden-by-searchbar,.list.li.hidden-by-searchbar{display:none}.navbar.with-searchbar-expandable-enabled,.navbar.with-searchbar-expandable-enabled-no-transition{--f7-navbar-large-collapse-progress:1}.navbar.with-searchbar-expandable-closing .navbar-bg,.navbar.with-searchbar-expandable-closing .title-large,.navbar.with-searchbar-expandable-closing .title-large-text,.navbar.with-searchbar-expandable-enabled .navbar-bg,.navbar.with-searchbar-expandable-enabled .title-large,.navbar.with-searchbar-expandable-enabled .title-large-text{transition-duration:.3s}.page-content.with-searchbar-expandable-enabled{height:calc(100% + var(--f7-navbar-large-title-height));transform:translateY(calc(var(--f7-navbar-large-title-height)*-1));transition-duration:.3s;transition-property:transform}.page-content.with-searchbar-expandable-closing{transition-duration:.3s}.navbar~.page:not(.no-navbar)>.searchbar,.page>.navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbar~.page-with-navbar-large:not(.no-navbar) .searchbar,.page-with-navbar-large .navbar~* .searchbar,.page-with-navbar-large .navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));transform:translate3d(0,calc(var(--f7-navbar-large-collapse-progress)*-1*var(--f7-navbar-large-title-height)),0)}.page-with-navbar-large .page-content .searchbar{top:0;transform:none}.searchbar~*{--f7-page-searchbar-offset:var(--f7-searchbar-height)}.ios .page>.toolbar-top-ios~.searchbar,.md .page>.toolbar-top-md~.searchbar,.page>.toolbar-top~.searchbar{top:var(--f7-toolbar-height)}.ios .page>.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.tabbar-icons.toolbar-top-md~.searchbar,.page>.tabbar-icons.toolbar-top~.searchbar{top:var(--f7-tabbar-icons-height)}.ios .page>.navbar~.toolbar-top-ios~.searchbar,.md .page>.navbar~.toolbar-top-md~.searchbar,.page>.navbar~.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))}.ios .page>.navbar~.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.navbar~.tabbar-icons.toolbar-top-md~.searchbar,.page>.navbar~.tabbar-icons.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))}.searchbar.searchbar-inline{background-color:initial;background-image:none;height:auto;width:auto}.searchbar.searchbar-inline:after,.searchbar.searchbar-inline:before{display:none}.searchbar.searchbar-inline .searchbar-input-wrap{height:var(--f7-searchbar-inline-input-height,var(--f7-searchbar-input-height))}.searchbar.searchbar-inline .searchbar-inner{height:auto;padding:0;position:static;width:auto}.searchbar.searchbar-inline input[type=search],.searchbar.searchbar-inline input[type=text]{border-radius:var(--f7-searchbar-inline-input-border-radius,var(--f7-searchbar-input-border-radius));font-size:var(--f7-searchbar-inline-input-font-size,var(--f7-searchbar-input-font-size));padding-left:calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left, 0px));padding-right:calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right, 0px))}.ios .searchbar input[type=search],.ios .searchbar input[type=text]{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow);z-index:30}.ios .searchbar .input-clear-button{right:16px;z-index:40}.ios .searchbar-icon{height:13px;left:16px;margin-top:-6px;position:absolute;top:50%;width:13px;z-index:40}.ios .searchbar-icon:after{content:"search_ios";line-height:13px}.ios .searchbar-disable-button{align-items:center;backdrop-filter:saturate(180%) blur(16px);background-color:var(--f7-searchbar-input-bg-color);border-radius:44px;box-shadow:var(--f7-glass-shadow);color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));display:none;flex-shrink:0;font-size:17px;height:var(--f7-searchbar-height);justify-content:center;padding:0 12px;transform:translateZ(0);transform:scale(0);transition-duration:.3s}.ios .searchbar-disable-button.active-state{opacity:.3;transition-duration:0s}.ios .searchbar-enabled .searchbar-disable-button{margin-left:16px;opacity:1;pointer-events:auto;transform:scale(1)}.ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button{transition-duration:.3s}.ios .searchbar-input-wrap{border-radius:var(--f7-searchbar-input-border-radius)}.ios .searchbar-expandable{bottom:0;height:var(--f7-searchbar-expandable-size);left:0;pointer-events:none;transform:translateZ(0);width:100%}.ios .searchbar-expandable .searchbar-disable-button{display:flex;margin-left:16px;opacity:1}.ios .searchbar-expandable .searchbar-inner{height:var(--f7-searchbar-expandable-size);left:16px;right:16px;width:auto}.ios .searchbar-expandable .searchbar-input-wrap{transform:scale(0);transition-duration:.3s}.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg{transition-property:transform,opacity}.ios .navbar.with-searchbar-expandable-closing .left,.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-closing .right,.ios .navbar.with-searchbar-expandable-closing .title,.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title{transition-duration:.3s}.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title,.ios .navbar.with-searchbar-expandable-enabled-no-transition .left,.ios .navbar.with-searchbar-expandable-enabled-no-transition .right,.ios .navbar.with-searchbar-expandable-enabled-no-transition .title{opacity:0;transform:translateY(calc(var(--f7-navbar-height)*-1))}.ios .searchbar-expandable.searchbar-enabled{height:var(--f7-searchbar-expandable-size);pointer-events:auto}.ios .searchbar-expandable.searchbar-enabled .searchbar-input-wrap{transform:scale(1)}.md .searchbar-disable-button,.md .searchbar-icon{position:absolute;top:50%;transition-duration:.3s}.md .searchbar-disable-button .icon-close{display:none}.md .searchbar-icon{align-items:center;display:flex;height:48px;justify-content:center;left:0;left:var(--f7-safe-area-left);top:0;width:48px}.md .searchbar-icon:after{content:"search_md";height:auto;line-height:1.2;width:auto}.md .searchbar-disable-button{color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));display:block;font-size:0;height:48px;left:calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));margin-top:-24px;transform:rotate(-90deg) scale(.5);width:48px}.md .searchbar-disable-button:after{font-family:framework7-core-icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;content:"arrow_left_md";display:block;font-feature-settings:"liga";font-size:20px;height:100%;line-height:48px;text-align:center;width:100%}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button{opacity:1;pointer-events:auto;transform:rotate(0deg) scale(1)}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon{opacity:0;transform:rotate(90deg) scale(.5)}.md .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .searchbar .input-clear-button{height:48px;margin-top:-24px;right:0;width:48px}.md .searchbar .input-clear-button:after{content:"delete_round_md";line-height:48px;opacity:1}.md .searchbar .input-clear-button:before{display:none}.md .searchbar-inline{--f7-searchbar-input-extra-padding-left:32px}.md .page>.searchbar,.md .searchbar-expandable,.md .subnavbar .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .page>.searchbar .searchbar-disable-button,.md .searchbar-expandable .searchbar-disable-button,.md .subnavbar .searchbar .searchbar-disable-button{left:calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))}.md .page>.searchbar .searchbar-icon,.md .searchbar-expandable .searchbar-icon,.md .subnavbar .searchbar .searchbar-icon{left:var(--f7-safe-area-left)}.md .searchbar-expandable{--f7-searchbar-inner-padding-left:4px;--f7-searchbar-inner-padding-right:4px;background-color:var(--f7-searchbar-input-bg-color);border-radius:calc(var(--f7-searchbar-expandable-size));bottom:0;height:var(--f7-searchbar-expandable-size);left:100%;margin-left:calc(var(--f7-searchbar-expandable-size)*-1);margin-top:calc(var(--f7-searchbar-expandable-size)*-1/2);opacity:0;transform:translateZ(0);width:calc(var(--f7-searchbar-expandable-size))}.md .searchbar-expandable.searchbar-enabled{border-radius:0;left:0;margin-left:0;margin-top:0;opacity:1;pointer-events:auto;width:100%}