@xenknight/framework7 0.0.5 → 0.0.6

package/framework7-bundle-rtl.css

@@ -1,5 +1,5 @@
 /**
- * Framework7 0.0.3
+ * Framework7 0.0.5
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: December 14, 2025
+ * Released on: December 19, 2025
  */
 
 /*====================
@@ -3002,18 +3002,18 @@ html.device-full-viewport body {
   --f7-block-text-color: inherit;
   --f7-block-margin-vertical: 35px;
   --f7-block-outline-border-color: rgba(0, 0, 0, 0.22);
-  --f7-block-title-font-size: 16px;
+  --f7-block-title-font-size: 17px;
   --f7-block-title-font-weight: 600;
   --f7-block-title-line-height: 20px;
   --f7-block-title-margin-bottom: 10px;
-  --f7-block-title-medium-font-size: 22px;
+  --f7-block-title-medium-font-size: 20px;
   --f7-block-title-medium-font-weight: bold;
   --f7-block-title-medium-line-height: 1.4;
-  --f7-block-title-large-font-size: 30px;
+  --f7-block-title-large-font-size: 22px;
   --f7-block-title-large-font-weight: bold;
   --f7-block-title-large-line-height: 1.3;
-  --f7-block-inset-border-radius: 8px;
-  --f7-block-title-text-color: #000;
+  --f7-block-inset-border-radius: 24px;
+  --f7-block-title-text-color: rgba(0, 0, 0, 0.6);
   --f7-block-strong-text-color: #000;
   --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
   --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
@@ -3023,7 +3023,7 @@ html.device-full-viewport body {
 }
 .ios .dark,
 .ios.dark {
-  --f7-block-title-text-color: #fff;
+  --f7-block-title-text-color: rgba(255, 255, 255, 0.6);
   --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
   --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
   --f7-block-strong-text-color: #fff;
@@ -3429,7 +3429,6 @@ html.device-full-viewport body {
 :root {
   --f7-list-inset-side-margin: 16px;
   --f7-list-item-padding-horizontal: 16px;
-  --f7-list-item-padding-vertical: 8px;
   --f7-list-media-item-padding-horizontal: 16px;
   --f7-list-item-text-max-lines: 2;
   --f7-list-chevron-icon-font-size: 20px;
@@ -3473,8 +3472,9 @@ html.device-full-viewport body {
   --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
 }
 .ios {
+  --f7-list-item-padding-vertical: 12px;
   --f7-list-in-list-padding-left: 30px;
-  --f7-list-inset-border-radius: 8px;
+  --f7-list-inset-border-radius: 24px;
   --f7-list-margin-vertical: 35px;
   --f7-list-font-size: 17px;
   --f7-list-chevron-icon-area: 20px;
@@ -3486,7 +3486,7 @@ html.device-full-viewport body {
   --f7-list-item-text-line-height: 21px;
   --f7-list-item-after-font-size: inherit;
   --f7-list-item-after-padding: 5px;
-  --f7-list-item-min-height: 44px;
+  --f7-list-item-min-height: 52px;
   --f7-list-item-media-icons-margin: 5px;
   --f7-list-media-item-padding-vertical: 10px;
   --f7-list-media-item-title-font-weight: 600;
@@ -3499,7 +3499,7 @@ html.device-full-viewport body {
   --f7-list-group-title-font-size: inherit;
   --f7-list-group-title-font-weight: 400;
   --f7-menu-list-offset: 8px;
-  --f7-menu-list-border-radius: 8px;
+  --f7-menu-list-border-radius: 16px;
   --f7-menu-list-item-bg-color: transparent;
   --f7-menu-list-item-text-color: inherit;
   --f7-menu-list-item-min-height: 44px;
@@ -3518,7 +3518,7 @@ html.device-full-viewport body {
 .ios .dark,
 .ios.dark {
   --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
-  --f7-list-outline-inset-color: rgba(255, 255, 255, 0.15);
+  --f7-list-outline-inset-border-color: rgba(255, 255, 255, 0.15);
   --f7-list-strong-bg-color: #1c1c1d;
   --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
   --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
@@ -3531,6 +3531,7 @@ html.device-full-viewport body {
   --f7-menu-list-item-selected-bg-color: var(--f7-theme-color);
 }
 .md {
+  --f7-list-item-padding-vertical: 8px;
   --f7-list-in-list-padding-left: 24px;
   --f7-list-inset-border-radius: 16px;
   --f7-list-margin-vertical: 32px;
@@ -3741,8 +3742,8 @@ html.device-full-viewport body {
 .list label.item-content {
   color: inherit;
 }
-.list .item-link.active-state,
-.list label.item-content.active-state {
+.list .item-link.active-state:not(:has(.toggle-active-state)),
+.list label.item-content.active-state:not(:has(.toggle-active-state)) {
   background-color: var(--f7-list-link-pressed-bg-color);
 }
 .list .item-link .item-inner {
@@ -4553,7 +4554,6 @@ li.list-group-title:after,
   --f7-badge-bg-color: var(--f7-theme-color);
 }
 :root {
-  --f7-button-font-size: 14px;
   --f7-button-min-width: 32px;
   --f7-button-bg-color: transparent;
   --f7-button-border-width: 0px;
@@ -4585,12 +4585,13 @@ li.list-group-title:after,
   --f7-segmented-strong-button-active-text-color: #fff;
 }
 .ios {
+  --f7-button-font-size: 15px;
   --f7-button-fill-text-color: #fff;
-  --f7-button-text-transform: uppercase;
-  --f7-button-height: 28px;
+  --f7-button-text-transform: none;
+  --f7-button-height: 34px;
   --f7-button-padding-horizontal: 10px;
   --f7-button-border-radius: 4px;
-  --f7-button-font-weight: 600;
+  --f7-button-font-weight: 500;
   --f7-button-letter-spacing: 0;
   /*
   --f7-button-outline-border-color: var(--f7-theme-color);
@@ -4600,15 +4601,15 @@ li.list-group-title:after,
   --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
   */
-  --f7-button-large-text-transform: uppercase;
-  --f7-button-large-height: 44px;
+  --f7-button-large-text-transform: none;
+  --f7-button-large-height: 48px;
   --f7-button-large-font-size: 17px;
   --f7-button-large-font-weight: 500;
   --f7-button-small-outline-border-width: 2px;
-  --f7-button-small-text-transform: uppercase;
-  --f7-button-small-height: 26px;
-  --f7-button-small-font-size: 13px;
-  --f7-button-small-font-weight: 600;
+  --f7-button-small-text-transform: none;
+  --f7-button-small-height: 28px;
+  --f7-button-small-font-size: 14px;
+  --f7-button-small-font-weight: 500;
   --f7-segmented-strong-button-text-transform: none;
   --f7-segmented-strong-button-active-font-weight: 600;
   --f7-button-tonal-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
@@ -4623,6 +4624,7 @@ li.list-group-title:after,
   --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
 }
 .md {
+  --f7-button-font-size: 14px;
   /*
   --f7-button-pressed-bg-color: transparent;
   */
@@ -5286,15 +5288,16 @@ i.icon {
 :root {
   --f7-dialog-button-text-color: var(--f7-theme-color);
   --f7-dialog-button-text-align: center;
+  --f7-dialog-text-line-height: 1.5;
 }
 .ios {
   --f7-dialog-width: 270px;
-  --f7-dialog-inner-padding: 16px;
-  --f7-dialog-border-radius: 13px;
-  --f7-dialog-text-align: center;
+  --f7-dialog-inner-padding: 24px;
+  --f7-dialog-border-radius: 32px;
+  --f7-dialog-text-align: left;
   --f7-dialog-font-size: 14px;
   --f7-dialog-title-text-color: inherit;
-  --f7-dialog-title-font-size: 18px;
+  --f7-dialog-title-font-size: 17px;
   --f7-dialog-title-font-weight: 600;
   --f7-dialog-title-line-height: inherit;
   --f7-dialog-button-font-size: 17px;
@@ -5305,29 +5308,26 @@ i.icon {
   --f7-dialog-button-strong-bg-color: transparent;
   --f7-dialog-button-strong-text-color: var(--f7-theme-color);
   --f7-dialog-button-strong-font-weight: 500;
-  --f7-dialog-input-border-radius: 4px;
+  --f7-dialog-input-border-radius: 16px;
   --f7-dialog-input-font-size: 14px;
-  --f7-dialog-input-height: 32px;
+  --f7-dialog-input-height: 40px;
   --f7-dialog-input-border-width: 1px;
   --f7-dialog-input-placeholder-color: #a9a9a9;
   --f7-dialog-preloader-size: 34px;
+  --f7-dialog-bg-color: var(--f7-glass-bg-color);
   --f7-dialog-input-bg-color: #fff;
-  --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
   --f7-dialog-bg-color-rgb: 255, 255, 255;
   --f7-dialog-text-color: #000;
   --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
   --f7-dialog-button-strong-pressed-bg-color: rgba(0, 0, 0, 0.1);
   --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
-  --f7-dialog-border-divider-color: rgba(0, 0, 0, 0.2);
 }
 .ios .dark,
 .ios.dark {
   --f7-dialog-text-color: #fff;
-  --f7-dialog-bg-color: rgba(45, 45, 45, 0.95);
   --f7-dialog-bg-color-rgb: 45, 45, 45;
   --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.2);
   --f7-dialog-button-strong-pressed-bg-color: rgba(0, 0, 0, 0.2);
-  --f7-dialog-border-divider-color: rgba(255, 255, 255, 0.15);
   --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
   --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.5);
 }
@@ -5387,13 +5387,6 @@ i.icon {
   background: var(--f7-dialog-bg-color);
   will-change: transform, opacity;
 }
-@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
-  .ios-translucent-modals .dialog {
-    background-color: rgba(var(--f7-dialog-bg-color-rgb), 0.8);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-            backdrop-filter: saturate(180%) blur(20px);
-  }
-}
 .dialog.modal-in {
   opacity: 1;
   transform: translate3d(0, -50%, 0) scale(1);
@@ -5415,42 +5408,23 @@ i.icon {
   font-weight: var(--f7-dialog-title-font-weight);
   line-height: var(--f7-dialog-title-line-height);
 }
+.dialog-text {
+  line-height: var(--f7-dialog-text-line-height);
+}
 .dialog-buttons {
   position: relative;
   display: flex;
   flex-direction: row-reverse;
 }
 .dialog-buttons-vertical .dialog-buttons {
-  display: block;
+  flex-direction: column;
   height: auto !important;
 }
 .dialog-button {
-  box-sizing: border-box;
   overflow: hidden;
   position: relative;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--f7-dialog-button-text-color);
-  font-size: var(--f7-dialog-button-font-size);
-  height: var(--f7-dialog-button-height);
-  line-height: var(--f7-dialog-button-height);
-  letter-spacing: var(--f7-dialog-button-letter-spacing);
-  text-align: var(--f7-dialog-button-text-align);
-  font-weight: var(--f7-dialog-button-font-weight);
-  text-transform: var(--f7-dialog-button-text-transform);
-  display: block;
-  cursor: pointer;
-}
-.dialog-button.active-state {
-  background-color: var(--f7-dialog-button-pressed-bg-color);
-}
-.dialog-button-strong {
-  background-color: var(--f7-dialog-button-strong-bg-color);
-  color: var(--f7-dialog-button-strong-text-color);
-  font-weight: var(--f7-dialog-button-strong-font-weight);
-}
-.dialog-button-strong.active-state {
-  background-color: var(--f7-dialog-button-strong-pressed-bg-color);
 }
 .dialog-no-buttons .dialog-buttons {
   display: none;
@@ -5486,115 +5460,46 @@ input.dialog-input[type]::placeholder {
 .dialog-preloader .preloader {
   --f7-preloader-size: var(--f7-dialog-preloader-size);
 }
-html.with-modal-dialog .page-content {
+html:has(.dialog.modal-in) .page-content {
   overflow: hidden;
   -webkit-overflow-scrolling: auto;
 }
+.ios .dialog {
+  box-shadow: var(--f7-glass-shadow);
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+  border-radius: var(--f7-dialog-border-radius);
+}
 .ios .dialog.modal-out {
   transform: translate3d(0, -50%, 0) scale(1);
 }
 .ios .dialog-inner {
   border-radius: var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0;
 }
-.ios .dialog-inner:after {
-  content: '';
-  position: absolute;
-  background-color: var(--f7-dialog-border-divider-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)));
-}
 .ios .dialog-title + .dialog-text {
-  margin-top: 5px;
+  margin-top: 12px;
 }
 .ios .dialog-buttons {
-  height: 44px;
+  padding: 0 14px 14px 14px;
   justify-content: center;
+  gap: 8px;
 }
 .ios .dialog-button {
   width: 100%;
-  padding: 0 5px;
   -webkit-box-flex: 1;
   -ms-flex: 1;
 }
-.ios .dialog-button:after {
-  content: '';
-  position: absolute;
-  background-color: var(--f7-dialog-border-divider-color);
-  display: block;
-  z-index: 15;
-  top: 0;
-  right: 0;
-  bottom: auto;
-  left: auto;
-  width: 1px;
-  height: 100%;
-  transform-origin: 100% 50%;
-  transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
-}
-.ios .dialog-button:first-child {
-  border-radius: 0 0 0 var(--f7-dialog-border-radius);
-}
-.ios .dialog-button:last-child {
-  border-radius: 0 0 var(--f7-dialog-border-radius) 0;
-}
-.ios .dialog-button:last-child:after {
-  display: none !important;
-}
-.ios .dialog-button:first-child:last-child {
-  border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
-}
-.ios .dialog-button[class*='color-'] {
-  --f7-dialog-button-text-color: var(--f7-theme-color);
-}
-.ios .dialog-buttons-vertical .dialog-buttons {
-  height: auto;
-}
-.ios .dialog-buttons-vertical .dialog-button {
-  border-radius: 0;
-}
-.ios .dialog-buttons-vertical .dialog-button:after {
-  content: '';
-  position: absolute;
-  background-color: var(--f7-dialog-border-divider-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)));
-}
-.ios .dialog-buttons-vertical .dialog-button:last-child {
-  border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
-}
-.ios .dialog-buttons-vertical .dialog-button:last-child:after {
-  display: none !important;
-}
 .ios .dialog-no-buttons .dialog-inner {
   border-radius: var(--f7-dialog-border-radius);
 }
-.ios .dialog-no-buttons .dialog-inner:after {
-  display: none !important;
-}
 .ios .dialog-input-field {
   margin-top: 15px;
 }
 .ios .dialog-input {
-  padding: 0 5px;
+  padding: 0 12px;
 }
 .ios .dialog-input + .dialog-input {
-  margin-top: 5px;
+  margin-top: 12px;
 }
 .ios .dialog-input-double + .dialog-input-double {
   margin-top: 0;
@@ -5603,6 +5508,9 @@ html.with-modal-dialog .page-content {
   border-top: 0;
   margin-top: 0;
 }
+.ios .dialog-preloader {
+  text-align: center;
+}
 .ios .dialog-preloader .dialog-title ~ .preloader,
 .ios .dialog-preloader .dialog-text ~ .preloader {
   margin-top: 15px;
@@ -5623,39 +5531,20 @@ html.with-modal-dialog .page-content {
   line-height: 1.5;
 }
 .md .dialog-buttons {
-  height: 64px;
   padding: 0px 24px 24px;
   overflow: hidden;
   box-sizing: border-box;
   justify-content: flex-end;
+  gap: 8px;
 }
 .md .dialog-button {
-  --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
-  border-radius: 99px;
-  min-width: 64px;
-  padding: 0px 16px;
-  border: none;
-  transition-duration: 300ms;
-  transform: translate3d(0, 0, 0);
-}
-.md .dialog-button + .dialog-button {
-  margin-left: 8px;
-}
-.md .dialog-button-strong {
-  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
-}
-.md .dialog-button[class*='color-'] {
-  --f7-dialog-button-text-color: var(--f7-theme-color);
+  width: auto;
 }
 .md .dialog-buttons-vertical .dialog-buttons {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
 }
-.md .dialog-buttons-vertical .dialog-button + .dialog-button {
-  margin-top: 8px;
-  margin-left: 0;
-}
 .md .dialog-input {
   padding: 0;
   transition-duration: 200ms;
@@ -6018,15 +5907,14 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
   --f7-popover-width: 260px;
 }
 .ios {
-  --f7-popover-border-radius: 13px;
+  --f7-popover-border-radius: 32px;
   --f7-popover-actions-icon-size: 28px;
   --f7-popover-transition-timing-function: initial;
-  --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
+  --f7-popover-bg-color: transparent;
   --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.45);
 }
 .ios .dark,
 .ios.dark {
-  --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
   --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.55);
 }
 .md {
@@ -6052,7 +5940,6 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
   left: 0;
   position: absolute;
   display: none;
-  transition-duration: 300ms;
   background-color: var(--f7-popover-bg-color);
   border-radius: var(--f7-popover-border-radius);
   will-change: transform, opacity;
@@ -6154,98 +6041,112 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
 .md .popover-from-actions-label {
   justify-content: center;
 }
-.popover-arrow {
-  width: 26px;
-  height: 26px;
-  position: absolute;
-  left: -26px;
-  top: 0;
-  z-index: 100;
-  overflow: hidden;
-}
-.popover-arrow:after {
-  content: '';
-  background: var(--f7-popover-bg-color);
-  width: 26px;
-  height: 26px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  border-radius: 3px;
-  transform: rotate(45deg);
-}
-.popover-arrow.on-left {
-  left: -26px;
-}
-.popover-arrow.on-left:after {
-  left: 19px;
-  top: 0;
-}
-.popover-arrow.on-right {
-  left: 100%;
-}
-.popover-arrow.on-right:after {
-  left: -19px;
-  top: 0;
+.popover-on-top {
+  transform-origin: center bottom;
 }
-.popover-arrow.on-top {
-  left: 0;
-  top: -26px;
+.popover-on-top.popover-on-right {
+  transform-origin: left bottom;
 }
-.popover-arrow.on-top:after {
-  left: 0;
-  top: 19px;
+.popover-on-top.popover-on-left {
+  transform-origin: right bottom;
 }
-.popover-arrow.on-bottom {
-  left: 0;
-  top: 100%;
+.popover-on-middle {
+  transform-origin: center center;
 }
-.popover-arrow.on-bottom:after {
-  left: 0;
-  top: -19px;
+.popover-on-middle.popover-on-right {
+  transform-origin: left center;
 }
-.ios .popover {
-  transform: none;
-  transition-property: opacity;
+.popover-on-middle.popover-on-left {
+  transform-origin: right center;
 }
-.md .popover {
-  transform: scale(0.85, 0.6);
-  transition-property: opacity, transform;
+.popover-on-bottom {
+  transform-origin: center top;
 }
-.md .popover.modal-in {
-  opacity: 1;
-  transform: scale(1);
+.popover-on-bottom.popover-on-right {
+  transform-origin: left top;
 }
-.md .popover.modal-out {
-  opacity: 0;
-  transform: scale(1);
+.popover-on-bottom.popover-on-left {
+  transform-origin: right top;
 }
-.md .popover-on-top {
+.ios .popover-on-top {
   transform-origin: center bottom;
+  --f7-popover-inner-offset: translate3d(0%, 80px, 0);
 }
-.md .popover-on-top.popover-on-right {
+.ios .popover-on-top.popover-on-right {
   transform-origin: left bottom;
+  --f7-popover-inner-offset: translate3d(50%, 80px, 0);
 }
-.md .popover-on-top.popover-on-left {
+.ios .popover-on-top.popover-on-left {
   transform-origin: right bottom;
+  --f7-popover-inner-offset: translate3d(-50%, 80px, 0);
 }
-.md .popover-on-middle {
+.ios .popover-on-middle {
   transform-origin: center center;
 }
-.md .popover-on-middle.popover-on-right {
+.ios .popover-on-middle.popover-on-right {
   transform-origin: left center;
+  --f7-popover-inner-offset: translate3d(50%, 0px, 0);
 }
-.md .popover-on-middle.popover-on-left {
+.ios .popover-on-middle.popover-on-left {
   transform-origin: right center;
+  --f7-popover-inner-offset: translate3d(-50%, 0px, 0);
 }
-.md .popover-on-bottom {
+.ios .popover-on-bottom {
   transform-origin: center top;
+  --f7-popover-inner-offset: translate3d(0%, -80px, 0);
 }
-.md .popover-on-bottom.popover-on-right {
+.ios .popover-on-bottom.popover-on-right {
   transform-origin: left top;
+  --f7-popover-inner-offset: translate3d(50%, -80px, 0);
 }
-.md .popover-on-bottom.popover-on-left {
+.ios .popover-on-bottom.popover-on-left {
   transform-origin: right top;
+  --f7-popover-inner-offset: translate3d(-50%, -80px, 0);
+}
+.ios .popover {
+  transform: translate3d(0, 0, 0) scale(0);
+  transition-property: opacity, transform;
+  opacity: 1;
+  will-change: auto;
+}
+.ios .popover.modal-in {
+  transform: translate3d(0, 0, 0) scale(1);
+  transition-timing-function: cubic-bezier(0, 1, 0.2, 1.05);
+  transition-duration: 400ms;
+}
+.ios .popover.modal-in .popover-inner {
+  transition-duration: 600ms;
+  transition-timing-function: cubic-bezier(0, 1, 0.2, 1.05);
+  transform: translate3d(0, 0, 0) scale(1);
+}
+.ios .popover.modal-out {
+  opacity: 0;
+  transform: translate3d(0, 0, 0) scale(0);
+  transition-duration: 300ms;
+}
+.ios .popover.modal-out .popover-inner {
+  transition-duration: 500ms;
+}
+.ios .popover-inner {
+  background: var(--f7-glass-bg-color);
+  box-shadow: var(--f7-glass-shadow);
+  border-radius: var(--f7-popover-border-radius);
+  transform: var(--f7-popover-inner-offset);
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+}
+.md .popover {
+  transform: scale(0.85, 0.6);
+  transition-property: opacity, transform;
+  transition-duration: 300ms;
+}
+.md .popover.modal-in {
+  opacity: 1;
+  transform: scale(1);
+}
+.md .popover.modal-out {
+  opacity: 0;
+  transform: scale(1);
 }
 /* === Actions === */
 :root {
@@ -6854,12 +6755,10 @@ html.with-modal-sheet-push-closing .framework7-root > .view.dark:after {
   --f7-toast-max-width: 568px;
 }
 .ios {
-  --f7-toast-text-color: #fff;
-  --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
-  --f7-toast-bg-color-rgb: 0, 0, 0;
+  --f7-toast-bg-color: var(--f7-glass-bg-color);
   --f7-toast-padding-horizontal: 16px;
   --f7-toast-padding-vertical: 12px;
-  --f7-toast-border-radius: 8px;
+  --f7-toast-border-radius: 32px;
   --f7-toast-button-min-width: 64px;
 }
 .md {
@@ -6885,13 +6784,6 @@ html.with-modal-sheet-push-closing .framework7-root > .view.dark:after {
   background-color: var(--f7-toast-bg-color);
   opacity: 0;
 }
-@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
-  .ios-translucent-modals .toast {
-    background-color: rgba(var(--f7-toast-bg-color-rgb), 0.8);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-            backdrop-filter: saturate(180%) blur(20px);
-  }
-}
 .toast.modal-in {
   opacity: 1;
 }
@@ -6912,6 +6804,7 @@ html.with-modal-sheet-push-closing .framework7-root > .view.dark:after {
   min-width: var(--f7-toast-button-min-width);
   margin-top: -8px;
   margin-bottom: -8px;
+  width: auto;
 }
 .toast.toast-with-icon .toast-content {
   display: block;
@@ -6934,6 +6827,9 @@ html.with-modal-sheet-push-closing .framework7-root > .view.dark:after {
   transition-duration: 300ms;
   width: 100%;
   left: 0;
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+  box-shadow: var(--f7-glass-shadow);
 }
 .ios .toast.toast-top {
   top: 0;
@@ -7676,7 +7572,6 @@ body > .progressbar-infinite,
 :root {
   --f7-swipeout-delete-button-bg-color: #ff3b30;
   --f7-swipeout-button-text-color: #fff;
-  --f7-swipeout-button-padding-vertical: 0px;
   --f7-swipeout-button-bg-color: rgba(0, 0, 0, 0.22);
 }
 :root .dark,
@@ -7684,11 +7579,21 @@ body > .progressbar-infinite,
   --f7-swipeout-button-bg-color: rgba(255, 255, 255, 0.55);
 }
 .ios {
-  --f7-swipeout-button-padding-horizontal: 30px;
+  --f7-swipeout-button-border-radius: 48px;
+  --f7-swipeout-button-padding-vertical: 10px;
+  --f7-swipeout-button-padding-horizontal: 16px;
   --f7-swipeout-button-font-size: inherit;
   --f7-swipeout-button-font-weight: inherit;
+  --f7-swipeout-active-border-radius: 16px;
+  --f7-swipeout-active-bg-color: #eee;
+}
+.ios .dark,
+.ios.dark {
+  --f7-swipeout-active-bg-color: #2c2c2e;
 }
 .md {
+  --f7-swipeout-button-border-radius: 0px;
+  --f7-swipeout-button-padding-vertical: 0px;
   --f7-swipeout-button-padding-horizontal: 24px;
   --f7-swipeout-button-font-size: 14px;
   --f7-swipeout-button-font-weight: 500;
@@ -7708,11 +7613,22 @@ body > .progressbar-infinite,
   transform: translateX(-100%);
 }
 .swipeout-transitioning .swipeout-content,
+.swipeout-transitioning .swipeout-content .item-inner::after {
+  transition-duration: 300ms;
+  transition-property: transform, left, background-color, border-radius, opacity;
+}
 .swipeout-transitioning .swipeout-actions-right a,
 .swipeout-transitioning .swipeout-actions-left a,
 .swipeout-transitioning .swipeout-overswipe {
   transition-duration: 300ms;
-  transition-property: transform, left;
+  transition-property: transform, left, width, margin-left, margin-right;
+}
+.swipeout-transitioning:not(.swipeout-opened) .swipeout-content {
+  transition-delay: 0ms, 0ms, 300ms, 300ms, 0ms;
+}
+.list li:has( + li:is(.swipeout-opened, .swipeout-active)) .item-inner::after {
+  opacity: 0;
+  transition-duration: 300ms;
 }
 .swipeout-content {
   position: relative;
@@ -7720,7 +7636,6 @@ body > .progressbar-infinite,
 }
 .swipeout-overswipe {
   transition-duration: 200ms;
-  transition-property: left;
 }
 .swipeout-actions-left,
 .swipeout-actions-right {
@@ -7738,6 +7653,8 @@ body > .progressbar-infinite,
 .swipeout-actions-right > span,
 .swipeout-actions-left > div,
 .swipeout-actions-right > div {
+  box-sizing: border-box;
+  border-radius: var(--f7-swipeout-button-border-radius);
   color: var(--f7-swipeout-button-text-color);
   background: var(--f7-swipeout-button-bg-color);
   padding: var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);
@@ -7748,14 +7665,62 @@ body > .progressbar-infinite,
   font-size: var(--f7-swipeout-button-font-size);
   font-weight: var(--f7-swipeout-button-font-weight);
 }
-.swipeout-actions-left > a:after,
-.swipeout-actions-right > a:after,
-.swipeout-actions-left > button:after,
-.swipeout-actions-right > button:after,
-.swipeout-actions-left > span:after,
-.swipeout-actions-right > span:after,
-.swipeout-actions-left > div:after,
-.swipeout-actions-right > div:after {
+.swipeout-actions-left .swipeout-delete,
+.swipeout-actions-right .swipeout-delete {
+  background: var(--f7-swipeout-delete-button-bg-color);
+}
+.swipeout-actions-left [class*='color-'],
+.swipeout-actions-right [class*='color-'] {
+  --f7-swipeout-button-bg-color: var(--f7-theme-color);
+}
+.ios .swipeout-actions-right {
+  right: 0%;
+}
+.ios .swipeout-actions-left {
+  left: 0%;
+}
+.ios .swipeout-actions-left,
+.ios .swipeout-actions-right {
+  padding: 0 10px;
+  gap: 10px;
+  align-items: center;
+}
+.ios .swipeout-actions-left > a,
+.ios .swipeout-actions-right > a,
+.ios .swipeout-actions-left > button,
+.ios .swipeout-actions-right > button,
+.ios .swipeout-actions-left > span,
+.ios .swipeout-actions-right > span,
+.ios .swipeout-actions-left > div,
+.ios .swipeout-actions-right > div {
+  transform: scale(0);
+  padding: var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);
+}
+.ios .swipeout-opened .swipeout-content,
+.ios .swipeout-active .swipeout-content {
+  background-color: var(--f7-swipeout-active-bg-color);
+  border-radius: var(--f7-swipeout-active-border-radius);
+}
+.ios .swipeout-opened .item-content,
+.ios .swipeout-active .item-content {
+  border-radius: var(--f7-swipeout-active-border-radius);
+}
+.ios .swipeout-opened .swipeout-content .item-inner::after,
+.ios .swipeout-active .swipeout-content .item-inner::after {
+  opacity: 0;
+}
+.ios .swipeout-overswipe {
+  transition-duration: 200ms;
+  transition-property: transform, left, width, margin-left, margin-right;
+}
+.md .swipeout-actions-left > a:after,
+.md .swipeout-actions-right > a:after,
+.md .swipeout-actions-left > button:after,
+.md .swipeout-actions-right > button:after,
+.md .swipeout-actions-left > span:after,
+.md .swipeout-actions-right > span:after,
+.md .swipeout-actions-left > div:after,
+.md .swipeout-actions-right > div:after {
   content: '';
   position: absolute;
   top: 0;
@@ -7766,45 +7731,40 @@ body > .progressbar-infinite,
   transform: translate3d(0, 0, 0);
   pointer-events: none;
 }
-.swipeout-actions-left .swipeout-delete,
-.swipeout-actions-right .swipeout-delete {
-  background: var(--f7-swipeout-delete-button-bg-color);
-}
-.swipeout-actions-right {
+.md .swipeout-actions-right {
   right: 0%;
   transform: translateX(calc(100% + 1px));
 }
-.swipeout-actions-right > a:after,
-.swipeout-actions-right > button:after,
-.swipeout-actions-right > span:after,
-.swipeout-actions-right > div:after {
+.md .swipeout-actions-right > a:after,
+.md .swipeout-actions-right > button:after,
+.md .swipeout-actions-right > span:after,
+.md .swipeout-actions-right > div:after {
   left: 100%;
 }
-.swipeout-actions-right > a:last-child,
-.swipeout-actions-right > button:last-child,
-.swipeout-actions-right > span:last-child,
-.swipeout-actions-right > div:last-child {
+.md .swipeout-actions-right > a:last-child,
+.md .swipeout-actions-right > button:last-child,
+.md .swipeout-actions-right > span:last-child,
+.md .swipeout-actions-right > div:last-child {
   padding-right: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right));
 }
-.swipeout-actions-left {
+.md .swipeout-actions-left {
   left: 0%;
   transform: translateX(calc(-100% - 1px));
 }
-.swipeout-actions-left > a:after,
-.swipeout-actions-left > button:after,
-.swipeout-actions-left > span:after,
-.swipeout-actions-left > div:after {
+.md .swipeout-actions-left > a:after,
+.md .swipeout-actions-left > button:after,
+.md .swipeout-actions-left > span:after,
+.md .swipeout-actions-left > div:after {
   right: 100%;
 }
-.swipeout-actions-left > a:first-child,
-.swipeout-actions-left > button:first-child,
-.swipeout-actions-left > span:first-child,
-.swipeout-actions-left > div:first-child {
+.md .swipeout-actions-left > a:first-child,
+.md .swipeout-actions-left > button:first-child,
+.md .swipeout-actions-left > span:first-child,
+.md .swipeout-actions-left > div:first-child {
   padding-left: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left));
 }
-.swipeout-actions-left [class*='color-'],
-.swipeout-actions-right [class*='color-'] {
-  --f7-swipeout-button-bg-color: var(--f7-theme-color);
+.md .swipeout-overswipe {
+  transition-property: left;
 }
 /* === Accordion === */
 :root {
@@ -11494,17 +11454,13 @@ label.item-radio.disabled,
   --f7-range-scale-step-height: 5px;
   --f7-range-scale-substep-width: 1px;
   --f7-range-scale-substep-height: 4px;
-  --f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
-}
-:root .dark,
-:root.dark {
-  --f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
 }
 .ios {
   --f7-range-size: 28px;
-  --f7-range-bar-size: 4px;
-  --f7-range-bar-border-radius: 2px;
-  --f7-range-knob-size: 28px;
+  --f7-range-bar-size: 6px;
+  --f7-range-bar-border-radius: 6px;
+  --f7-range-knob-width: 38px;
+  --f7-range-knob-height: 24px;
   --f7-range-knob-color: #fff;
   --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   --f7-range-label-size: 24px;
@@ -11513,18 +11469,24 @@ label.item-radio.disabled,
   --f7-range-label-font-size: 12px;
   --f7-range-label-font-weight: 500;
   --f7-range-label-border-radius: 5px;
-  --f7-range-label-padding: 0px 2px;
+  --f7-range-label-padding: 0px 4px;
   --f7-range-scale-text-color: #666;
   --f7-range-scale-step-width: 1px;
   --f7-range-scale-font-size: 12px;
   --f7-range-scale-font-weight: 400;
   --f7-range-scale-label-offset: 4px;
+  --f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
+}
+.ios .dark,
+.ios.dark {
+  --f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
 }
 .md {
   --f7-range-size: 20px;
-  --f7-range-bar-size: 2px;
-  --f7-range-bar-border-radius: 0px;
-  --f7-range-knob-size: 12px;
+  --f7-range-bar-size: 16px;
+  --f7-range-bar-border-radius: 16px;
+  --f7-range-knob-width: 16px;
+  --f7-range-knob-height: 44px;
   --f7-range-knob-box-shadow: none;
   --f7-range-label-size: 26px;
   --f7-range-label-font-weight: normal;
@@ -11539,6 +11501,7 @@ label.item-radio.disabled,
 .md,
 .md .dark,
 .md [class*='color-'] {
+  --f7-range-bar-bg-color: var(--f7-md-secondary-container);
   --f7-range-knob-color: var(--f7-theme-color);
   --f7-range-label-text-color: var(--f7-md-on-primary);
   --f7-range-label-bg-color: var(--f7-theme-color);
@@ -11606,49 +11569,35 @@ label.item-radio.disabled,
 .range-knob-wrap {
   z-index: 20;
   position: absolute;
-  height: var(--f7-range-knob-size);
-  width: var(--f7-range-knob-size);
+  height: var(--f7-range-knob-height);
+  width: var(--f7-range-knob-width);
 }
 .range-slider-horizontal .range-knob-wrap {
   top: 50%;
-  margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
-  margin-right: calc(-1 * var(--f7-range-knob-size) / 2);
+  margin-top: calc(-1 * var(--f7-range-knob-height) / 2);
+  margin-right: calc(-1 * var(--f7-range-knob-width) / 2);
   right: 0;
 }
 .range-slider-vertical .range-knob-wrap {
   left: 50%;
-  margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
+  height: var(--f7-range-knob-width);
+  width: var(--f7-range-knob-height);
+  margin-left: calc(-1 * var(--f7-range-knob-height) / 2);
   bottom: 0;
-  margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
+  margin-bottom: calc(-1 * var(--f7-range-knob-width) / 2);
 }
 .range-slider-vertical-reversed .range-knob-wrap {
   bottom: auto;
   top: 0;
   margin-bottom: 0;
-  margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
+  margin-top: calc(-1 * var(--f7-range-knob-width) / 2);
 }
 .range-knob {
   box-sizing: border-box;
-  border-radius: 50%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
   z-index: 1;
   background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
   box-shadow: var(--f7-range-knob-box-shadow);
 }
-.range-knob:after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 44px;
-  height: 44px;
-  margin-left: -22px;
-  margin-top: -22px;
-}
 .range-knob-label {
   position: absolute;
   left: 50%;
@@ -11748,19 +11697,94 @@ label.item-radio.disabled,
   --f7-range-scale-step-width: var(--f7-range-scale-substep-width);
   --f7-range-scale-step-height: var(--f7-range-scale-substep-height);
 }
+.ios .range-bar-active {
+  border-radius: inherit;
+}
+.ios .range-knob {
+  border-radius: var(--f7-range-knob-height);
+  transition-duration: 300ms;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.ios .range-knob:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 44px;
+  height: 44px;
+}
+.ios .range-knob::before,
+.ios .range-knob::after {
+  content: '';
+  position: absolute;
+}
+.ios .range-knob::before {
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  transition-duration: 300ms;
+  box-shadow: 0px 0px 40px 15px rgba(var(--f7-theme-color-rgb), 0.75);
+  left: 50%;
+  top: 50%;
+  margin-left: -0.5px;
+  margin-top: -0.5px;
+}
+.ios .range-knob::after {
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: var(--f7-glass-shadow-thumb);
+  transition-duration: 300ms;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
 .ios .range-knob-label {
   margin-bottom: 6px;
   transform: translateX(-50%) translateY(100%) scale(0);
+  z-index: 2;
 }
 .ios .range-knob-active-state .range-knob-label {
   transform: translateX(-50%) translateY(0%) scale(1);
 }
+.ios .range-knob-active-state .range-knob {
+  background: transparent;
+  transform: scale(1.4);
+}
+.ios .range-knob-active-state .range-knob::before {
+  opacity: 1;
+}
+.ios .range-knob-active-state .range-knob::after {
+  opacity: 1;
+}
+.md .range-knob-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .md .range-knob {
   transition-duration: 200ms;
   transition-property: transform, background-color;
+  width: 4px;
+  height: var(--f7-range-knob-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
 }
 .md .range-knob-active-state .range-knob {
-  transform: scale(1.5);
+  transform: scaleX(0.5);
+}
+.md .range-slider-vertical .range-knob {
+  width: var(--f7-range-knob-height);
+  height: 4px;
+}
+.md .range-slider-vertical .range-knob-active-state .range-knob {
+  transform: scaleY(0.5);
 }
 .md .range-slider-min:not(.range-slider-dual) .range-knob {
   background: #fff !important;
@@ -11787,8 +11811,48 @@ label.item-radio.disabled,
 .md .range-knob-active-state .range-knob-label {
   transform: translateY(0%) scale(1);
 }
-.md .range-slider-label .range-knob-active-state .range-knob {
-  transform: scale(0);
+.md .range-bar-active,
+.md .range-bar-inactive {
+  border-radius: 4px;
+}
+.md .range-slider::before,
+.md .range-slider::after {
+  content: '';
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--f7-range-knob-color);
+  top: calc(50% - 2px);
+  z-index: 1;
+  pointer-events: none;
+  transition-duration: 200ms;
+}
+.md .range-slider::before {
+  left: calc(var(--f7-range-knob-width) / 2 - 2px);
+}
+.md .range-slider::after {
+  right: calc(var(--f7-range-knob-width) / 2 - 2px);
+}
+.md .range-slider:not(.range-slider-dual)::before {
+  content: none;
+  display: none;
+}
+.md .range-slider:has(.range-knob-active-state)::before,
+.md .range-slider:has(.range-knob-active-state)::after {
+  transform: scale(0.5);
+}
+.md .range-slider.range-slider-vertical::before,
+.md .range-slider.range-slider-vertical::after {
+  top: auto;
+  left: calc(50% - 2px);
+  right: auto;
+}
+.md .range-slider.range-slider-vertical::before {
+  bottom: calc(var(--f7-range-knob-width) / 2 - 2px);
+}
+.md .range-slider.range-slider-vertical::after {
+  top: calc(var(--f7-range-knob-width) / 2 - 2px);
 }
 /* === Stepper === */
 :root {
@@ -17628,23 +17692,22 @@ button.swiper-pagination-bullet {
 }
 .ios {
   --f7-notification-margin: 8px;
-  --f7-notification-padding-horizontal: 10px;
-  --f7-notification-padding-vertical: 10px;
-  --f7-notification-border-radius: 12px;
-  --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
-  --f7-notification-icon-size: 20px;
-  --f7-notification-title-font-size: 13px;
-  --f7-notification-title-text-transform: uppercase;
+  --f7-notification-padding-horizontal: 16px;
+  --f7-notification-padding-vertical: 16px;
+  --f7-notification-border-radius: 24px;
+  --f7-notification-box-shadow: var(--f7-glass-shadow);
+  --f7-notification-icon-size: 28px;
+  --f7-notification-title-font-size: 14px;
+  --f7-notification-title-text-transform: none;
   --f7-notification-title-line-height: 1.4;
-  --f7-notification-title-font-weight: 400;
+  --f7-notification-title-font-weight: bold;
   --f7-notification-title-letter-spacing: 0.02em;
-  --f7-notification-title-right-font-size: 13px;
-  --f7-notification-subtitle-font-size: 15px;
+  --f7-notification-title-right-font-size: 14px;
+  --f7-notification-subtitle-font-size: 14px;
   --f7-notification-subtitle-font-weight: 600;
-  --f7-notification-text-font-size: 15px;
-  --f7-notification-text-line-height: 1.2;
-  --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
-  --f7-notification-bg-color-rgb: 255, 255, 255;
+  --f7-notification-text-font-size: 14px;
+  --f7-notification-text-line-height: 1.4;
+  --f7-notification-bg-color: var(--f7-glass-bg-color);
   --f7-notification-title-color: #000;
   --f7-notification-title-right-color: rgba(0, 0, 0, 0.45);
   --f7-notification-subtitle-color: #000;
@@ -17652,8 +17715,6 @@ button.swiper-pagination-bullet {
 }
 .ios .dark,
 .ios.dark {
-  --f7-notification-bg-color: rgba(30, 30, 30, 0.95);
-  --f7-notification-bg-color-rgb: 30, 30, 30;
   --f7-notification-title-color: #fff;
   --f7-notification-text-color: #fff;
   --f7-notification-subtitle-color: #fff;
@@ -17704,14 +17765,22 @@ button.swiper-pagination-bullet {
   box-shadow: var(--f7-notification-box-shadow);
   background: var(--f7-notification-bg-color);
   margin-top: var(--f7-safe-area-top);
+  display: flex;
+  gap: 16px;
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
 }
-@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
-  .ios-translucent-modals .notification {
-    background-color: rgba(var(--f7-notification-bg-color-rgb), 0.8);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-            backdrop-filter: saturate(180%) blur(20px);
+@media (min-width: 568px) {
+  .notification {
+    left: 50%;
+    width: var(--f7-notification-max-width);
+    margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
   }
 }
+.notification-content {
+  width: 100%;
+  flex-shrink: 10;
+}
 .notification-title {
   color: var(--f7-notification-title-color, var(--f7-theme-color));
   font-size: var(--f7-notification-title-font-size);
@@ -17741,6 +17810,7 @@ button.swiper-pagination-bullet {
 .notification-icon {
   font-size: 0;
   line-height: var(--f7-notification-icon-size);
+  flex-shrink: 0;
 }
 .notification-icon i,
 .notification-icon {
@@ -17789,6 +17859,7 @@ button.swiper-pagination-bullet {
 .ios .notification {
   transition-duration: 450ms;
   transform: translate3d(0%, -200%, 0);
+  align-items: center;
 }
 .ios .notification.modal-in {
   transform: translate3d(0%, 0%, 0);
@@ -17797,18 +17868,11 @@ button.swiper-pagination-bullet {
 .ios .notification.modal-out {
   transform: translate3d(0%, -200%, 0);
 }
-.ios .notification-icon {
-  margin-right: 8px;
-}
-.ios .notification-header + .notification-content {
-  margin-top: 10px;
-}
 .ios .notification-title-right-text {
-  margin-right: 6px;
   margin-left: auto;
 }
 .ios .notification-title-right-text + .notification-close-button {
-  margin-left: 10px;
+  margin-left: 12px;
 }
 .ios .notification-close-button {
   font-size: 14px;
@@ -17852,22 +17916,7 @@ button.swiper-pagination-bullet {
   transition-timing-function: ease-in;
   transform: translate3d(0, -150%, 0);
 }
-.md .notification-with-icon .notification-icon {
-  position: absolute;
-  left: var(--f7-notification-padding-horizontal);
-  top: var(--f7-notification-padding-vertical);
-}
-.md .notification-with-icon .notification-content,
-.md .notification-with-icon .notification-header {
-  margin-left: calc(var(--f7-notification-icon-size) + 16px);
-}
-.md .notification-icon {
-  margin-right: 8px;
-}
-.md .notification-subtitle + .notification-text {
-  margin-top: 4px;
-}
-.md .notification-header + .notification-content {
+.md .notification-header + :is(.notification-subtitle, .notification-text) {
   margin-top: 8px;
 }
 .md .notification-title-right-text {