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 {
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;