Liquid glass - first try

index.html

@@ -476,6 +476,30 @@
                 inset 0 2px 7px rgba(var(--overlay-rgb), 0.18),
                 inset 0 -1px 2px rgba(255, 255, 255, 0.03) !important;
         }
+        #planner-view #planner-cal-bar {
+            position: absolute !important;
+            top: 0;
+            left: 0;
+            right: 0;
+            margin-top: 0 !important;
+            z-index: 20;
+            background: rgba(255, 255, 255, 0.5) !important;
+            border-bottom: 1px solid rgba(var(--line-rgb), 0.08) !important;
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
+        }
+        .dark #planner-view #planner-cal-bar {
+            background: rgba(35, 34, 32, 0.5) !important;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
+        }
+        #planner-view #calendar-swipe-zone,
+        #planner-view #calendar-week-wrap,
+        #planner-view #calendar-month-wrap {
+            background: transparent !important;
+        }
+        #planner-view #planner-scroll {
+            padding-top: 10rem !important;
+        }
         #planner-picker-search {
             appearance: none;
             -webkit-appearance: none;
@@ -545,20 +569,33 @@
             position: relative;
             box-sizing: border-box;
             width: min(calc(100% - 2.4rem), 24.5rem);
-            height: 3.34rem;
+            height: 3.72rem;
             display: grid;
             grid-template-columns: repeat(4, minmax(0, 1fr));
             align-items: stretch;
             gap: 0.06rem;
-            padding: 0.22rem;
+            padding: 0.42rem;
             border-radius: 1.68rem;
-            background: rgb(var(--card-rgb));
+            background: rgba(255, 255, 255, 0.2);
-            border: 1px solid rgb(var(--border-card-rgb));
+            border: 1px solid rgba(255, 255, 255, 0.32);
+            backdrop-filter: blur(28px) saturate(180%);
+            -webkit-backdrop-filter: blur(28px) saturate(180%);
             box-shadow:
-                inset 0 1px 8px rgba(var(--overlay-rgb), 0.15),
+                inset 0 1px 0 rgba(255, 255, 255, 0.6),
-                var(--shadow-shell);
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 8px 20px rgba(var(--overlay-rgb), 0.16),
+                0 22px 52px rgba(var(--overlay-rgb), 0.24);
             pointer-events: auto;
         }
+        .dark #app-bottom-nav .bottom-dock {
+            background: rgba(255, 255, 255, 0.04);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.24),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 10px 24px rgba(0, 0, 0, 0.36),
+                0 26px 60px rgba(0, 0, 0, 0.46);
+        }
         #app-bottom-nav .nav-slot {
             min-width: 0;
             height: 100%;
@@ -602,12 +639,21 @@
             background: var(--hover-overlay) !important;
         }
         #app-bottom-nav .nav-tab.is-active {
-            width: 100%;
+            width: 2.6rem;
-            height: 100%;
+            height: 2.6rem;
             color: rgb(var(--text-primary-rgb));
-            background: rgb(var(--app-bg-rgb)) !important;
+            background: rgba(var(--overlay-rgb), 0.38) !important;
-            border-radius: 1.46rem;
+            border-radius: 1.05rem;
-            box-shadow: none !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.08),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.18) !important;
+        }
+        .dark #app-bottom-nav .nav-tab.is-active {
+            color: #fff;
+            background: rgba(0, 0, 0, 0.42) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.06),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
         }
         #app-bottom-nav .nav-tab:active,
         #app-bottom-nav .nav-action:active {
@@ -625,9 +671,9 @@
             }
             #app-bottom-nav .bottom-dock {
                 width: min(calc(100% - 1.6rem), 22.5rem);
-                height: 3.12rem;
+                height: 3.48rem;
                 gap: 0.05rem;
-                padding: 0.2rem;
+                padding: 0.38rem;
                 border-radius: 1.56rem;
             }
             #app-bottom-nav .nav-tab,
@@ -637,9 +683,9 @@
                 border-radius: 1.28rem;
             }
             #app-bottom-nav .nav-tab.is-active {
-                height: 100%;
+                width: 2.4rem;
-                width: 100%;
+                height: 2.4rem;
-                border-radius: 1.36rem;
+                border-radius: 0.96rem;
             }
         }
 

js/views/MealPlanner.js

@@ -1096,15 +1096,11 @@ export function setupMealPlanner() {
     };
 
     /* ── calendar scroll shadow ─────────────────── */
-    const plannerScroll = document.getElementById('planner-scroll');
     const calBar = document.getElementById('planner-cal-bar');
-    if (plannerScroll && calBar) {
+    if (calBar) {
         const shadow = document.createElement('div');
-        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
+        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);pointer-events:none;';
         calBar.appendChild(shadow);
-        plannerScroll.addEventListener('scroll', () => {
-            shadow.style.opacity = plannerScroll.scrollTop > 2 ? '1' : '0';
-        });
     }
 
     bindCalendarDayClicks(weekGrid, (date) => {