From e914f937814439b65b79197e1ee76cc869512b4a Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Tue, 21 Apr 2026 22:28:19 +0200
Subject: [PATCH] Liquid glass - continuation

---
 index.html              | 60 +++++++++++++++++++++++++++++++++++++++++
 js/views/MealPlanner.js | 18 ++++++-------
 2 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index fbcb8fd..24daace 100644
--- a/index.html
+++ b/index.html
@@ -500,6 +500,66 @@
         #planner-view #planner-scroll {
             padding-top: 10rem !important;
         }
+        #planner-meal-slots .planner-add-meal {
+            background: rgba(var(--overlay-rgb), 0.05) !important;
+            border: 1px solid rgba(255, 255, 255, 0.28) !important;
+            color: rgb(var(--text-body-soft-rgb)) !important;
+            backdrop-filter: blur(18px) saturate(180%);
+            -webkit-backdrop-filter: blur(18px) saturate(180%);
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.4),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06),
+                0 1px 3px rgba(var(--overlay-rgb), 0.08);
+            transition: background-color 160ms ease, transform 160ms ease;
+        }
+        #planner-meal-slots .planner-add-meal:hover {
+            background: rgba(var(--overlay-rgb), 0.1) !important;
+            transform: translateY(-1px);
+        }
+        #planner-meal-slots .planner-add-meal:active {
+            transform: scale(0.96);
+        }
+        .dark #planner-meal-slots .planner-add-meal {
+            background: rgba(255, 255, 255, 0.06) !important;
+            border: 1px solid rgba(255, 255, 255, 0.12) !important;
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.12),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22),
+                0 1px 3px rgba(0, 0, 0, 0.2);
+        }
+        .dark #planner-meal-slots .planner-add-meal:hover {
+            background: rgba(255, 255, 255, 0.1) !important;
+        }
+        #planner-meal-slots > div[data-slot-id] {
+            box-shadow:
+                0 2px 4px rgba(var(--overlay-rgb), 0.08),
+                0 14px 32px rgba(var(--overlay-rgb), 0.18) !important;
+        }
+        #planner-meal-slots > div[data-slot-id] > div:first-child {
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
+        }
+        .dark #planner-meal-slots > div[data-slot-id] {
+            box-shadow:
+                0 2px 4px rgba(0, 0, 0, 0.22),
+                0 14px 32px rgba(0, 0, 0, 0.4) !important;
+        }
+        .dark #planner-meal-slots > div[data-slot-id] > div:first-child {
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+        }
+        #planner-meal-slots .planner-kcal-pill {
+            background: rgba(var(--overlay-rgb), 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.28);
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.4),
+                inset 0 -1px 0 rgba(var(--overlay-rgb), 0.06);
+        }
+        .dark #planner-meal-slots .planner-kcal-pill {
+            background: rgba(255, 255, 255, 0.06);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            box-shadow:
+                inset 0 1px 0 rgba(255, 255, 255, 0.12),
+                inset 0 -1px 0 rgba(0, 0, 0, 0.22);
+        }
         #planner-picker-search {
             appearance: none;
             -webkit-appearance: none;
diff --git a/js/views/MealPlanner.js b/js/views/MealPlanner.js
index 7d0627c..260e0f9 100644
--- a/js/views/MealPlanner.js
+++ b/js/views/MealPlanner.js
@@ -440,8 +440,8 @@ function renderDayContent(state, onMealRemoved = null) {
                             <i class="fas fa-rotate-left text-[10px]" aria-hidden="true"></i>
                         </span>
                     </button>`
-                : `<button type="button" class="planner-edit-meal w-6 h-6 rounded-full border border-[rgb(var(--card-strong-rgb))] text-[rgb(var(--text-dim-rgb))] hover:text-[rgb(var(--text-body-rgb))] hover:border-[rgb(var(--text-subdued-rgb))] hover:bg-[rgb(var(--card-raised-rgb))] flex items-center justify-center transition-colors" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Edytuj ten przepis">
-                        <i class="fas fa-pencil text-[9px]" aria-hidden="true"></i>
+                : `<button type="button" class="planner-edit-meal w-7 h-7 rounded-full border border-[rgb(var(--card-strong-rgb))] text-[rgb(var(--text-dim-rgb))] hover:text-[rgb(var(--text-body-rgb))] hover:border-[rgb(var(--text-subdued-rgb))] hover:bg-[rgb(var(--card-raised-rgb))] flex items-center justify-center transition-colors" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Edytuj ten przepis">
+                        <i class="fas fa-pencil text-[10px]" aria-hidden="true"></i>
                     </button>`;
             return `
             <div class="relative overflow-hidden rounded-lg ${isPendingDelete ? 'ring-1 ring-white/5' : ''}" data-planner-swipe-row style="${rowStyle}" data-slot-id="${slot.id}" data-entry-id="${eid}" ${rowAttrs}>
@@ -476,32 +476,32 @@ function renderDayContent(state, onMealRemoved = null) {
         const addBtn = `<button type="button" class="planner-add-meal w-7 h-7 rounded-full border border-[rgb(var(--card-strong-rgb))] text-[rgb(var(--text-dim-rgb))] flex items-center justify-center shrink-0" data-slot-id="${slot.id}" aria-label="Dodaj przepis"><i class="fas fa-plus text-[10px]"></i></button>`;
 
         const kcalPill = slotKcal > 0
-            ? `<span class="text-[10px] font-semibold tabular-nums shrink-0 px-2 py-0.5 rounded-full" style="background:rgb(var(--app-bg-rgb)); color:rgb(var(--text-body-soft-rgb));">${slotKcal} kcal</span>`
+            ? `<span class="planner-kcal-pill text-[10px] font-semibold tabular-nums shrink-0 px-2 py-0.5 rounded-full" style="color:rgb(var(--text-body-soft-rgb));">${slotKcal} kcal</span>`
             : '';
 
         const filledCard = `
-        <div class="rounded-xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
-            <div class="flex items-center gap-2 px-3 py-2.5 bg-[rgb(var(--card-rgb))]" style="background:rgb(var(--card-rgb)) !important;">
+        <div class="rounded-2xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
+            <div class="flex items-center gap-2 px-4 py-3 bg-[rgb(var(--card-rgb))]" style="background:rgb(var(--card-rgb)) !important;">
                 <i class="fas ${slot.icon} w-7 text-center text-[13px] text-[rgb(var(--text-dim-rgb))] shrink-0" aria-hidden="true"></i>
                 <span class="text-[13px] font-semibold text-[rgb(var(--text-body-rgb))] truncate min-w-0">${slot.label}</span>
                 <span class="ml-auto"></span>
                 ${kcalPill}
                 ${addBtn}
             </div>
-            ${entries.length > 0 ? `<div class="px-2.5 pb-2.5 space-y-2 border-t border-[rgb(var(--card-strong-rgb))]" style="padding-top:0.625rem;">${entryCards}</div>` : ''}
+            ${entries.length > 0 ? `<div class="px-3 pb-3 space-y-2 border-t border-[rgb(var(--card-strong-rgb))]" style="padding-top:0.75rem;">${entryCards}</div>` : ''}
         </div>`;
 
         if (entries.length > 0) return filledCard;
 
         return `
-        <div class="rounded-xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
-            <div class="flex items-center gap-2 px-3 py-2.5">
+        <div class="rounded-2xl bg-[rgb(var(--card-rgb))] overflow-hidden" style="background:rgb(var(--card-rgb)) !important; box-shadow:var(--shadow-card);" data-slot-id="${slot.id}">
+            <div class="flex items-center gap-2 px-4 py-3">
                 <i class="fas ${slot.icon} w-7 text-center text-[13px] text-[rgb(var(--text-dim-rgb))] shrink-0" aria-hidden="true"></i>
                 <span class="text-[13px] font-semibold text-[rgb(var(--text-body-rgb))] truncate min-w-0">${slot.label}</span>
                 <span class="ml-auto"></span>
                 ${addBtn}
             </div>
-            <div class="px-3 pb-2.5 -mt-0.5">
+            <div class="px-4 pb-3 -mt-0.5">
                 <p class="text-[11px] text-[rgb(var(--text-faint-rgb))] italic pl-9">Zaplanuj posiłek</p>
             </div>
         </div>`;