ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Liquid glass - continuation

Browse Source
This commit is contained in:
Rafał
2026-04-21 22:28:19 +02:00
parent 5499476a17
commit e914f93781
2 changed files with 69 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
index.html
View File

@@ -500,6 +500,66 @@
#planner-view #planner-scroll { #planner-view #planner-scroll {
padding-top: 10rem !important; 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 { #planner-picker-search {
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;

18
js/views/MealPlanner.js
View File

@@ -440,8 +440,8 @@ function renderDayContent(state, onMealRemoved = null) {
<i class="fas fa-rotate-left text-[10px]" aria-hidden="true"></i> <i class="fas fa-rotate-left text-[10px]" aria-hidden="true"></i>
</span> </span>
</button>` </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"> : `<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-[9px]" aria-hidden="true"></i> <i class="fas fa-pencil text-[10px]" aria-hidden="true"></i>
</button>`; </button>`;
return ` 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}> <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 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 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 = ` 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="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-3 py-2.5 bg-[rgb(var(--card-rgb))]" style="background:rgb(var(--card-rgb)) !important;"> <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> <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="text-[13px] font-semibold text-[rgb(var(--text-body-rgb))] truncate min-w-0">${slot.label}</span>
<span class="ml-auto"></span> <span class="ml-auto"></span>
${kcalPill} ${kcalPill}
${addBtn} ${addBtn}
</div> </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>`; </div>`;
if (entries.length > 0) return filledCard; if (entries.length > 0) return filledCard;
return ` 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="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-3 py-2.5"> <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> <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="text-[13px] font-semibold text-[rgb(var(--text-body-rgb))] truncate min-w-0">${slot.label}</span>
<span class="ml-auto"></span> <span class="ml-auto"></span>
${addBtn} ${addBtn}
</div> </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> <p class="text-[11px] text-[rgb(var(--text-faint-rgb))] italic pl-9">Zaplanuj posiłek</p>
</div> </div>
</div>`; </div>`;