diff --git a/index.html b/index.html index ddb52c0..50f5df4 100644 --- a/index.html +++ b/index.html @@ -662,6 +662,27 @@ font-size: 1rem; line-height: 1; } + html.is-inline-search-open #recipe-bottom-controls, + html.is-inline-search-open #pantry-bottom-controls { + height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)) !important; + } + html.is-inline-search-open #recipe-search-shell.recipe-search-field, + html.is-inline-search-open #recipe-search-shell.recipe-search-field:focus-within, + html.is-inline-search-open #pantry-search-shell.recipe-search-field, + html.is-inline-search-open #pantry-search-shell.recipe-search-field:focus-within { + left: var(--catalog-inline-search-field-left, calc(1rem + var(--recipe-inline-search-control-size, 3.12rem) + 0.5rem)); + right: var(--catalog-inline-search-field-right, calc(1rem + var(--recipe-inline-search-control-size, 3.12rem) + 0.5rem)); + height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)); + } + html.is-inline-search-open #main-view #recipe-filter-wrap, + html.is-inline-search-open #pantry-view #pantry-filter-bottom-wrap { + left: var(--catalog-inline-search-close-left, calc(100vw - 3.9rem)) !important; + } + html.is-inline-search-open #main-view .recipe-bottom-action, + html.is-inline-search-open #pantry-view .recipe-bottom-action { + width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)); + height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)); + } .dark #pantry-filter-popover { background: rgba(var(--app-bg-rgb), 0.82) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; @@ -870,9 +891,9 @@ 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; + opacity: 1; pointer-events: none; - transform: translateY(0.45rem) scale(0.985); + transform: none; } #app-bottom-nav .recipe-nav-toggle { display: none; @@ -986,6 +1007,31 @@ border-radius 540ms cubic-bezier(0.16, 1, 0.3, 1), transform 540ms cubic-bezier(0.16, 1, 0.3, 1); } + html.is-inline-search-open #app-bottom-nav .bottom-dock { + width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)); + height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)); + border-radius: 999px; + transform: translate( + calc((var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.9rem) * 0.8)) - var(--recipe-dock-width)) / 2), + calc(var(--recipe-controls-lift, 0px) * -1) + ); + pointer-events: auto; + } + html.is-inline-search-open #app-bottom-nav .recipe-nav-toggle { + display: inline-flex; + width: var(--recipe-inline-toggle-size, var(--recipe-toggle-size)); + opacity: 1; + transform: translateY(0) scale(1); + background: transparent !important; + border-color: transparent !important; + box-shadow: none !important; + backdrop-filter: none; + -webkit-backdrop-filter: none; + } + html.is-inline-search-open #app-bottom-nav .nav-slot { + opacity: 0; + pointer-events: none; + } .dark #app-bottom-nav .bottom-dock { background: rgba(255, 255, 255, 0.04); background-image: none; @@ -1174,6 +1220,15 @@ calc(var(--recipe-controls-lift, 0px) * -1) ); } + html.is-inline-search-open #app-bottom-nav.is-compact-tab .bottom-dock, + html.is-inline-search-open #app-bottom-nav .bottom-dock { + width: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8)); + height: var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8)); + transform: translate( + calc((var(--recipe-inline-search-control-size, calc(var(--recipe-bottom-control-size, 3.78rem) * 0.8)) - var(--recipe-dock-width)) / 2), + calc(var(--recipe-controls-lift, 0px) * -1) + ); + } } /* Planner and common interactive surfaces */ @@ -1219,7 +1274,7 @@