@xenknight/framework7 0.0.7 → 0.0.9

package/framework7-bundle-rtl.css

@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: January 1, 2026
+ * Released on: January 4, 2026
  */
 
 /*====================
@@ -417,7 +417,7 @@ html.device-full-viewport body {
   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-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-navbar-new-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-toolbar-new-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-subnavbar-new-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-searchbar-new-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,
@@ -2503,18 +2503,18 @@ html.device-full-viewport body {
 }
 .navbar-new ~ *,
 .navbars-new ~ * {
-  --f7-page-navbar-offset: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+  --f7-page-navbar-new-offset: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
 }
 .navbar-new ~ * .page-with-navbar-new-large,
 .navbar-new ~ .page-with-navbar-new-large,
 .navbars-new ~ * .page-with-navbar-new-large,
 .navbars-new ~ .page-with-navbar-new-large,
 .page-with-navbar-new-large .navbar-new ~ * {
-  --f7-page-navbar-offset: calc(var(--f7-navbar-new-height) + var(--f7-navbar-new-large-title-height) + var(--f7-safe-area-top));
+  --f7-page-navbar-new-offset: calc(var(--f7-navbar-new-height) + var(--f7-navbar-new-large-title-height) + var(--f7-safe-area-top));
 }
 .page.no-navbar,
 .page.no-navbar .navbar-new ~ * {
-  --f7-page-navbar-offset: var(--f7-safe-area-top);
+  --f7-page-navbar-new-offset: var(--f7-safe-area-top);
 }
 .ios {
   --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-new-inner-padding-left));
@@ -2789,12 +2789,14 @@ html.device-full-viewport body {
 .searchbar-new input[type='search']::-webkit-search-decoration {
   display: none;
 }
-.ios .subnavbar .searchbar-new {
+.ios .subnavbar .searchbar-new,
+.ios .subnavbar-new .searchbar-new {
   background-color: transparent;
   -webkit-backdrop-filter: none;
           backdrop-filter: none;
 }
-.ios .subnavbar .searchbar-new:after {
+.ios .subnavbar .searchbar-new:after,
+.ios .subnavbar-new .searchbar-new:after {
   display: none !important;
 }
 .searchbar-new.no-outline:after {
@@ -2899,9 +2901,13 @@ html.device-full-viewport body {
 .toolbar .searchbar-new.searchbar-new-expandable {
   --f7-searchbar-new-expandable-size: var(--f7-toolbar-height);
 }
-.subnavbar .searchbar-new.searchbar-new-expandable {
+.subnavbar .searchbar-new.searchbar-new-expandable,
+.subnavbar-new .searchbar-new.searchbar-new-expandable {
   --f7-searchbar-new-expandable-size: var(--f7-subnavbar-height);
 }
+.subnavbar-new .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-subnavbar-new-height);
+}
 .tabbar-icons .searchbar-new.searchbar-new-expandable {
   --f7-searchbar-new-expandable-size: var(--f7-tabbar-icons-height);
 }
@@ -3282,16 +3288,19 @@ html.device-full-viewport body {
 }
 .md .page > .searchbar-new,
 .md .subnavbar .searchbar-new,
+.md .subnavbar-new .searchbar-new,
 .md .searchbar-new-expandable {
   --f7-searchbar-new-input-extra-padding-left: 34px;
 }
 .md .page > .searchbar-new .searchbar-new-disable-button,
 .md .subnavbar .searchbar-new .searchbar-new-disable-button,
+.md .subnavbar-new .searchbar-new .searchbar-new-disable-button,
 .md .searchbar-new-expandable .searchbar-new-disable-button {
   right: calc(var(--f7-searchbar-new-inner-padding-right) + var(--f7-safe-area-right));
 }
 .md .page > .searchbar-new .searchbar-new-icon,
 .md .subnavbar .searchbar-new .searchbar-new-icon,
+.md .subnavbar-new .searchbar-new .searchbar-new-icon,
 .md .searchbar-new-expandable .searchbar-new-icon {
   right: var(--f7-safe-area-right);
 }
@@ -4771,6 +4780,248 @@ html.device-full-viewport body {
 .md .subnavbar-inner > a.link:last-child {
   margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
 }
+/* === Subnavbar New === */
+:root {
+  /*
+  --f7-subnavbar-new-bg-color: var(--f7-bars-bg-color);
+  --f7-subnavbar-new-bg-color-rgb: var(--f7-bars-bg-color-rgb);
+  --f7-subnavbar-new-border-color: var(--f7-bars-border-color);
+  --f7-subnavbar-new-link-color: var(--f7-bars-link-color);
+  --f7-subnavbar-new-text-color: var(--f7-bars-text-color);
+  */
+  --f7-subnavbar-new-title-line-height: 1.2;
+}
+.ios {
+  --f7-subnavbar-new-height: 44px;
+  --f7-subnavbar-new-offset-left: calc(16px + var(--f7-safe-area-left));
+  --f7-subnavbar-new-offset-right: calc(16px + var(--f7-safe-area-right));
+  --f7-subnavbar-new-inner-padding-left: 5px;
+  --f7-subnavbar-new-inner-padding-right: 5px;
+  --f7-subnavbar-new-title-font-size: 24px;
+  --f7-subnavbar-new-title-font-weight: 700;
+  --f7-subnavbar-new-title-letter-spacing: -0.03em;
+  --f7-subnavbar-new-title-margin-left: 8px;
+  --f7-subnavbar-new-bg-color: var(--f7-glass-bg-color);
+  /*
+  --f7-subnavbar-new-link-height: var(--f7-subnavbar-new-height);
+  --f7-subnavbar-new-link-line-height: var(--f7-subnavbar-new-height);
+  */
+}
+.md {
+  --f7-subnavbar-new-height: 64px;
+  --f7-subnavbar-new-offset-left: 0;
+  --f7-subnavbar-new-offset-right: 0;
+  --f7-subnavbar-new-inner-padding-left: calc(16px + var(--f7-safe-area-left));
+  --f7-subnavbar-new-inner-padding-right: calc(16px + var(--f7-safe-area-right));
+  --f7-subnavbar-new-title-font-size: 22px;
+  --f7-subnavbar-new-title-font-weight: 400;
+  --f7-subnavbar-new-title-letter-spacing: 0;
+  --f7-subnavbar-new-title-margin-left: 0px;
+  /*
+  --f7-subnavbar-new-link-height: var(--f7-subnavbar-new-height);
+  --f7-subnavbar-new-link-line-height: var(--f7-subnavbar-new-height);
+  */
+}
+.subnavbar-new {
+  position: absolute;
+  left: var(--f7-subnavbar-new-offset-left);
+  right: var(--f7-subnavbar-new-offset-right);
+  top: 0;
+  z-index: 600;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--f7-subnavbar-new-bg-color, var(--f7-bars-bg-color));
+  color: var(--f7-subnavbar-new-text-color, var(--f7-bars-text-color));
+}
+@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
+  .ios-translucent-bars .subnavbar-new {
+    background-color: rgba(var(--f7-subnavbar-new-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
+    -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
+            backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
+  }
+}
+.subnavbar-new .subnavbar-new-title {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellpsis;
+  white-space: nowrap;
+  font-size: var(--f7-subnavbar-new-title-font-size);
+  font-weight: var(--f7-subnavbar-new-title-font-weight);
+  text-align: left;
+  display: inline-block;
+  line-height: var(--f7-subnavbar-new-title-line-height);
+  letter-spacing: var(--f7-subnavbar-new-title-letter-spacing);
+  margin-right: var(--f7-subnavbar-new-title-margin-left);
+}
+.subnavbar-new .left,
+.subnavbar-new .right {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.subnavbar-new .right:first-child {
+  position: absolute;
+  height: 100%;
+}
+.subnavbar-new a {
+  color: var(--f7-subnavbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+}
+.subnavbar-new a.link {
+  line-height: var(--f7-subnavbar-new-link-line-height, var(--f7-subnavbar-new-height));
+  height: var(--f7-subnavbar-new-link-height, var(--f7-subnavbar-new-height));
+}
+.subnavbar-new a.icon-only {
+  min-width: var(--f7-subnavbar-new-height);
+}
+.subnavbar-new.no-outline:after {
+  display: none !important;
+}
+.subnavbar-new.navbar-hidden:before {
+  display: none !important;
+}
+.subnavbar-new:after,
+.subnavbar-new:before {
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.subnavbar-new:after {
+  content: '';
+  position: absolute;
+  background-color: var(--f7-subnavbar-new-border-color, transparent);
+  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)));
+}
+.subnavbar-new-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: space-between;
+  overflow: hidden;
+  padding: 0 var(--f7-subnavbar-new-inner-padding-left) 0 var(--f7-subnavbar-new-inner-padding-right);
+}
+.navbar .subnavbar-new,
+.navbar-new .subnavbar-new {
+  top: 100%;
+}
+.views > .subnavbar-new,
+.view > .subnavbar-new,
+.page > .subnavbar-new {
+  position: absolute;
+}
+.navbar-new ~ * .subnavbar-new,
+.navbars-new ~ * .subnavbar-new,
+.page-with-subnavbar-new .navbar-new ~ .subnavbar-new,
+.page-with-subnavbar-new .navbar-new ~ * .subnavbar-new,
+.navbar-new ~ .page-with-subnavbar-new:not(.no-navbar) .subnavbar-new,
+.navbar-new ~ .subnavbar-new,
+.navbars-new ~ .page-with-subnavbar-new:not(.no-navbar) .subnavbar-new,
+.navbars-new ~ .subnavbar-new {
+  top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
+}
+.navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar-new,
+.navbars ~ .page-with-navbar-large:not(.no-navbar) .subnavbar-new,
+.navbar-new ~ .page-with-navbar-new-large:not(.no-navbar) .subnavbar-new,
+.navbars-new ~ .page-with-navbar-new-large:not(.no-navbar) .subnavbar-new,
+.page-with-subnavbar-new.page-with-navbar-large .navbar ~ .subnavbar-new,
+.page-with-subnavbar-new.page-with-navbar-large .navbar ~ * .subnavbar-new,
+.page-with-subnavbar-new.page-with-navbar-new-large .navbar-new ~ .subnavbar-new,
+.page-with-subnavbar-new.page-with-navbar-new-large .navbar-new ~ * .subnavbar-new,
+.navbar .title-large ~ .subnavbar-new,
+.navbar-new .title-large ~ .subnavbar-new {
+  top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
+  transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
+}
+.navbar-new ~ .page-with-navbar-new-large:not(.no-navbar) .subnavbar-new,
+.navbars-new ~ .page-with-navbar-new-large:not(.no-navbar) .subnavbar-new,
+.page-with-subnavbar-new.page-with-navbar-new-large .navbar-new ~ .subnavbar-new,
+.page-with-subnavbar-new.page-with-navbar-new-large .navbar-new ~ * .subnavbar-new,
+.navbar-new .title-large ~ .subnavbar-new {
+  top: calc(var(--f7-navbar-new-height) + var(--f7-navbar-new-large-title-height) + var(--f7-safe-area-top));
+  transform: translate3d(0, calc(-1 * var(--f7-navbar-new-large-collapse-progress) * var(--f7-navbar-new-large-title-height)), 0);
+}
+.page-with-subnavbar-new,
+.subnavbar-new ~ * {
+  --f7-page-subnavbar-new-offset: var(--f7-subnavbar-new-height);
+}
+.ios .subnavbar-new {
+  height: calc(var(--f7-subnavbar-new-height) + 1px);
+  margin-top: -1px;
+  padding-top: 1px;
+  border-radius: var(--f7-subnavbar-new-height);
+  box-shadow: var(--f7-glass-shadow);
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+  --f7-segmented-strong-bg-color: transparent;
+}
+.ios .subnavbar-new:has(> .searchbar-new) {
+  background: transparent;
+  -webkit-backdrop-filter: none;
+          backdrop-filter: none;
+  box-shadow: none;
+}
+.ios .subnavbar-new .subnavbar-new-inner {
+  border-radius: inherit;
+}
+.ios .subnavbar-new .title {
+  align-self: flex-start;
+  flex-shrink: 10;
+}
+.ios .subnavbar-new .left a + a,
+.ios .subnavbar-new .right a + a {
+  margin-right: 16px;
+}
+.ios .subnavbar-new .left {
+  margin-left: 10px;
+}
+.ios .subnavbar-new .right {
+  margin-right: 10px;
+}
+.ios .subnavbar-new .right:first-child {
+  left: 8px;
+}
+.ios .subnavbar-new a.link {
+  justify-content: flex-start;
+}
+.ios .subnavbar-new a.icon-only {
+  justify-content: center;
+  margin: 0;
+}
+.md .subnavbar-new {
+  height: var(--f7-subnavbar-new-height);
+}
+.md .subnavbar-new .right {
+  margin-right: auto;
+}
+.md .subnavbar-new .right:first-child {
+  left: 16px;
+}
+.md .subnavbar-new a.link {
+  justify-content: center;
+  padding: 0 12px;
+}
+.md .subnavbar-new a.icon-only {
+  flex-shrink: 0;
+  padding: 0 12px;
+}
+.md .subnavbar-new-inner > a.link:first-child {
+  margin-right: calc(-1 * var(--f7-subnavbar-new-inner-padding-right));
+}
+.md .subnavbar-new-inner > a.link:last-child {
+  margin-left: calc(-1 * var(--f7-subnavbar-new-inner-padding-left));
+}
 /* === Content Block === */
 :root {
   --f7-block-padding-horizontal: 16px;