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

Liquid glass - first try

Browse Source
This commit is contained in:
Rafał
2026-04-21 22:01:07 +02:00
parent 8702830f68
commit 5499476a17
2 changed files with 64 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
index.html
View File

@@ -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));
border: 1px solid rgb(var(--border-card-rgb));
background: rgba(255, 255, 255, 0.2);
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),
var(--shadow-shell);
inset 0 1px 0 rgba(255, 255, 255, 0.6),
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%;
height: 100%;
width: 2.6rem;
height: 2.6rem;
color: rgb(var(--text-primary-rgb));
background: rgb(var(--app-bg-rgb)) !important;
border-radius: 1.46rem;
box-shadow: none !important;
background: rgba(var(--overlay-rgb), 0.38) !important;
border-radius: 1.05rem;
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: 100%;
border-radius: 1.36rem;
width: 2.4rem;
height: 2.4rem;
border-radius: 0.96rem;
}
}