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

Apply liquid glass to recipe cards

Browse Source
This commit is contained in:
Rafał
2026-04-22 18:47:05 +02:00
parent 7049cb1d48
commit 120959365e
2 changed files with 58 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
index.html
View File

@@ -383,11 +383,68 @@
font-size: 0.54rem;
line-height: 0.72rem;
}
#recipe-grid > .recipe-catalog-card {
background: rgba(var(--surface-rgb), 0.7) !important;
background-image: none !important;
border: 1px solid rgba(255, 255, 255, 0.34) !important;
border-radius: 1.08rem !important;
box-shadow:
0 1px 2px rgba(var(--overlay-rgb), 0.06),
0 8px 18px rgba(var(--overlay-rgb), 0.08) !important;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.dark #recipe-grid > .recipe-catalog-card {
background: rgba(var(--surface-rgb), 0.62) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.22),
0 10px 24px rgba(0, 0, 0, 0.26) !important;
}
#recipe-grid > .recipe-catalog-card .recipe-browser-card-media {
height: 5.45rem;
background: rgb(var(--skeleton-rgb)) !important;
}
#recipe-grid > .recipe-catalog-card .recipe-browser-card-body {
padding: 0.62rem;
}
#recipe-grid > .recipe-catalog-card .recipe-browser-card-title {
min-height: 2.64rem;
margin-bottom: 0.5rem;
font-size: 0.68rem;
font-weight: 650 !important;
line-height: 0.88rem;
color: rgb(var(--text-emphasis-rgb)) !important;
}
#recipe-grid > .recipe-catalog-card .recipe-browser-card-meta {
margin-bottom: 0;
padding-top: 0.1rem;
color: rgb(var(--text-muted-rgb)) !important;
}
#recipe-grid > .recipe-catalog-card .recipe-browser-card-meta i {
color: rgb(var(--text-dim-rgb)) !important;
}
#recipe-grid > .recipe-catalog-card > div:first-child::after {
display: none;
}
#recipe-grid > .recipe-catalog-card:active {
transform: scale(0.985);
}
#recipe-grid > *:hover,
#planner-picker-grid > *:hover {
transform: translateY(-2px);
box-shadow: none !important;
}
#recipe-grid > .recipe-catalog-card:hover {
box-shadow:
0 2px 4px rgba(var(--overlay-rgb), 0.08),
0 12px 24px rgba(var(--overlay-rgb), 0.12) !important;
}
.dark #recipe-grid > .recipe-catalog-card:hover {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.24),
0 14px 30px rgba(0, 0, 0, 0.34) !important;
}
#recipe-grid > * img,
#planner-picker-grid > * img {
transition: transform 240ms ease;