Improve iOS navbar and toolbar safe area handling

Updated CSS and LESS for navbar and toolbar components to better account for iOS safe area insets in gradient masks and backgrounds. Also refined back link styling in example previews for more accurate layout.

Author: nolimits4web

kitchen-sink/core/css/app.css

@@ -622,7 +622,8 @@ code {
   max-width: 320px;
 }
 .example-preview .view-main .navbars .navbar:first-child .link.back,
-.example-preview .view-main .page:first-child .navbar .link.back {
+.example-preview .view-main .page:first-child .navbar .link.back,
+.example-preview .view-main .page:first-child .navbar .left:has(.link.back)  {
   min-width: 0 !important;
   width: 0 !important;
   padding: 0 !important;

src/core/components/navbar/navbar-ios.less

@@ -61,15 +61,19 @@
       position: absolute;
       inset: 0;
       backdrop-filter: blur(2px);
-      mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+      mask-image: linear-gradient(
+        to bottom,
+        black calc(50% + var(--f7-safe-area-top, 0px)),
+        transparent 100%
+      );
     }
     &::after {
       content: '';
       position: absolute;
       inset: 0;
       background-image: linear-gradient(
         to bottom,
-        var(--f7-navbar-bg-color, var(--f7-bars-bg-color)) 0%,
+        var(--f7-navbar-bg-color, var(--f7-bars-bg-color)) var(--f7-safe-area-top, 0px),
         transparent 100%
       );
     }

src/core/components/toolbar/toolbar-ios.less

@@ -48,12 +48,16 @@
     }
     &::before {
       backdrop-filter: blur(2px);
-      mask-image: linear-gradient(to top, black 50%, transparent 100%);
+      mask-image: linear-gradient(
+        to top,
+        black calc(50% + var(--f7-safe-area-bottom, 0px)),
+        transparent 100%
+      );
     }
     &::after {
       background-image: linear-gradient(
         to top,
-        var(--f7-toolbar-bg-color, var(--f7-bars-bg-color)) 0%,
+        var(--f7-toolbar-bg-color, var(--f7-bars-bg-color)) var(--f7-safe-area-bottom, 0px),
         transparent 100%
       );
     }
@@ -70,12 +74,16 @@
     &.toolbar-top,
     &:not(.toolbar-bottom, .toolbar-top, .messagebar) {
       &::before {
-        mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+        mask-image: linear-gradient(
+          to bottom,
+          black calc(50% + var(--f7-safe-area-top, 0px)),
+          transparent 100%
+        );
       }
       &::after {
         background-image: linear-gradient(
           to bottom,
-          var(--f7-toolbar-bg-color, var(--f7-bars-bg-color)) 0%,
+          var(--f7-toolbar-bg-color, var(--f7-bars-bg-color)) var(--f7-safe-area-top, 0px),
           transparent 100%
         );
       }