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

Redesign menu
All checks were successful
Build and Deploy / build-and-push (push) Successful in 27s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-22 22:53:24 +02:00
parent ded24b53b4
commit 53a7212dfe
5 changed files with 271 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
index.html
View File

@@ -472,7 +472,8 @@
}
#recipe-bottom-controls,
#recipe-bottom-default-actions,
#pantry-bottom-controls {
#pantry-bottom-controls,
#shopping-bottom-controls {
bottom: calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)) !important;
height: var(--recipe-control-size, 3.05rem) !important;
background: transparent !important;
@@ -483,12 +484,14 @@
transition: opacity 160ms ease;
}
html.is-nav-menu-open #recipe-bottom-controls,
html.is-nav-menu-open #pantry-bottom-controls {
html.is-nav-menu-open #pantry-bottom-controls,
html.is-nav-menu-open #shopping-bottom-controls {
opacity: 0;
pointer-events: none;
}
html.is-nav-menu-open #recipe-bottom-controls *,
html.is-nav-menu-open #pantry-bottom-controls * {
html.is-nav-menu-open #pantry-bottom-controls *,
html.is-nav-menu-open #shopping-bottom-controls * {
pointer-events: none !important;
}
#recipe-search-shell.recipe-search-field,
@@ -496,7 +499,7 @@
#pantry-search-shell.recipe-search-field,
#pantry-search-shell.recipe-search-field:focus-within {
position: absolute !important;
left: calc(var(--catalog-menu-left, 1rem) + var(--catalog-menu-width, 3.72rem) + 0.5rem);
left: var(--catalog-menu-left, 1rem);
right: var(--catalog-search-right, calc(1rem + var(--recipe-control-size, 3.05rem) + 0.5rem));
bottom: 0;
min-width: 0;
@@ -578,6 +581,7 @@
}
#main-view .recipe-glass-btn,
#pantry-view .recipe-glass-btn,
#shopping-view .recipe-glass-btn,
#app-bottom-nav .recipe-nav-toggle {
position: relative;
border: 1px solid rgba(255, 255, 255, 0.32) !important;
@@ -594,6 +598,7 @@
}
.dark #main-view .recipe-glass-btn,
.dark #pantry-view .recipe-glass-btn,
.dark #shopping-view .recipe-glass-btn,
.dark #app-bottom-nav .recipe-nav-toggle {
border: 1px solid rgba(255, 255, 255, 0.12) !important;
background: rgba(255, 255, 255, 0.04) !important;
@@ -607,6 +612,7 @@
}
#main-view .recipe-glass-btn:hover,
#pantry-view .recipe-glass-btn:hover,
#shopping-view .recipe-glass-btn:hover,
#app-bottom-nav .recipe-nav-toggle:hover {
background: rgba(var(--overlay-rgb), 0.1) !important;
color: rgb(var(--text-emphasis-rgb));
@@ -614,6 +620,7 @@
}
.dark #main-view .recipe-glass-btn:hover,
.dark #pantry-view .recipe-glass-btn:hover,
.dark #shopping-view .recipe-glass-btn:hover,
.dark #app-bottom-nav .recipe-nav-toggle:hover {
background: rgba(255, 255, 255, 0.09) !important;
}
@@ -635,15 +642,23 @@
right: auto !important;
bottom: 0;
}
#main-view #recipe-search-wrap,
#pantry-view #pantry-search-wrap {
left: var(--catalog-search-btn-left, calc(100vw - 7.6rem)) !important;
right: auto !important;
bottom: 0;
}
#main-view .recipe-bottom-action,
#pantry-view .recipe-bottom-action {
#pantry-view .recipe-bottom-action,
#shopping-view .recipe-bottom-action {
width: var(--recipe-control-size, 3.05rem);
height: var(--recipe-control-size, 3.05rem);
border-radius: 999px;
font-size: 0.95rem;
}
#main-view .recipe-bottom-action i,
#pantry-view .recipe-bottom-action i {
#pantry-view .recipe-bottom-action i,
#shopping-view .recipe-bottom-action i {
font-size: 0.95rem;
line-height: 1;
}
@@ -853,6 +868,11 @@
pointer-events: none;
transition: opacity 260ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.is-inline-search-open #app-bottom-nav {
opacity: 0;
pointer-events: none;
transform: translateY(0.45rem) scale(0.985);
}
#app-bottom-nav .recipe-nav-toggle {
display: none;
position: absolute;
@@ -926,16 +946,24 @@
transform: translateY(0);
pointer-events: auto;
}
#app-bottom-nav.is-compact-tab .bottom-dock {
width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px));
transform: translate(
var(--nav-compact-translate-x, 0px),
calc(var(--recipe-controls-lift, 0px) * -1)
);
border-radius: 999px;
}
#app-bottom-nav .bottom-dock {
position: relative;
box-sizing: border-box;
width: var(--dock-width);
height: 3.72rem;
height: var(--recipe-control-size, 3.05rem);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch;
gap: var(--dock-gap);
padding: var(--dock-pad);
gap: 0.02rem;
padding: 0.28rem;
border-radius: var(--dock-radius);
background: rgba(255, 255, 255, 0.2);
background-image: none;
@@ -992,8 +1020,8 @@
border: 0;
background: transparent !important;
box-shadow: none !important;
width: 2.18rem;
height: 2.18rem;
width: 1.82rem;
height: 1.82rem;
margin: 0;
padding: 0;
border-radius: 999px;
@@ -1001,7 +1029,7 @@
align-items: center;
justify-content: center;
flex-direction: column;
gap: 0.24rem;
gap: 0.16rem;
flex: 0 0 auto;
color: rgba(var(--text-primary-rgb), 0.94);
cursor: pointer;
@@ -1013,7 +1041,7 @@
}
#app-bottom-nav .nav-tab i,
#app-bottom-nav .nav-action i {
font-size: 0.95rem;
font-size: 0.88rem;
line-height: 1;
}
#app-bottom-nav .nav-label {
@@ -1048,9 +1076,9 @@
background: var(--hover-overlay) !important;
}
#app-bottom-nav .nav-tab.is-active {
width: min(100%, 5.2rem);
height: 2.82rem;
padding: 0.34rem 0.28rem 0.3rem;
width: min(100%, 4rem);
height: 2.46rem;
padding: 0.24rem 0.2rem 0.22rem;
color: rgb(var(--text-primary-rgb));
background: rgba(var(--overlay-rgb), 0.38) !important;
border-radius: 999px;
@@ -1062,7 +1090,19 @@
display: none;
}
#app-bottom-nav .nav-tab.is-active i {
font-size: 0.8rem;
font-size: 0.78rem;
}
#app-bottom-nav .nav-tab.is-active::after {
font-size: 0.58rem;
line-height: 1.1;
}
#app-bottom-nav.is-double-compact .nav-tab.is-active::after {
font-size: 0.52rem;
line-height: 1.24;
}
#app-bottom-nav.is-double-compact .nav-tab.is-active {
height: 2.54rem;
padding: 0.22rem 0.2rem 0.28rem;
}
.dark #app-bottom-nav .nav-tab.is-active {
color: #fff;
@@ -1094,21 +1134,21 @@
}
#app-bottom-nav .bottom-dock {
width: var(--dock-width);
height: 3.48rem;
gap: var(--dock-gap);
padding: var(--dock-pad);
height: var(--recipe-control-size, 2.95rem);
gap: 0.01rem;
padding: 0.24rem;
border-radius: var(--dock-radius);
}
#app-bottom-nav .nav-tab,
#app-bottom-nav .nav-action {
width: 2.02rem;
height: 2.02rem;
width: 1.7rem;
height: 1.7rem;
border-radius: 999px;
}
#app-bottom-nav .nav-tab.is-active {
width: min(100%, 4.4rem);
height: 2.65rem;
padding: 0.3rem 0.22rem 0.27rem;
width: min(100%, 3.72rem);
height: 2.25rem;
padding: 0.2rem 0.18rem 0.18rem;
border-radius: 999px;
}
#app-bottom-nav .nav-label {
@@ -1117,6 +1157,21 @@
#app-bottom-nav .nav-tab.is-active::after {
font-size: 0.56rem;
}
#app-bottom-nav.is-double-compact .nav-tab.is-active::after {
font-size: 0.5rem;
line-height: 1.24;
}
#app-bottom-nav.is-double-compact .nav-tab.is-active {
height: 2.3rem;
padding: 0.18rem 0.18rem 0.24rem;
}
#app-bottom-nav.is-compact-tab .bottom-dock {
width: calc(var(--recipe-dock-width) - var(--nav-compact-extra-width, 0px));
transform: translate(
var(--nav-compact-translate-x, 0px),
calc(var(--recipe-controls-lift, 0px) * -1)
);
}
}
/* Planner and common interactive surfaces */