Apply liquid glass to pantry view
All checks were successful
Build and Deploy / build-and-push (push) Successful in 30s
All checks were successful
Build and Deploy / build-and-push (push) Successful in 30s
This commit is contained in:
96
index.html
96
index.html
@@ -462,14 +462,17 @@
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%);
|
||||
pointer-events: none;
|
||||
}
|
||||
#recipe-search-shell {
|
||||
#recipe-search-shell,
|
||||
#pantry-search-shell {
|
||||
isolation: auto;
|
||||
}
|
||||
#recipe-search-shell::after {
|
||||
#recipe-search-shell::after,
|
||||
#pantry-search-shell::after {
|
||||
display: none;
|
||||
}
|
||||
#recipe-bottom-controls,
|
||||
#recipe-bottom-default-actions {
|
||||
#recipe-bottom-default-actions,
|
||||
#pantry-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;
|
||||
@@ -479,15 +482,19 @@
|
||||
-webkit-backdrop-filter: none !important;
|
||||
transition: opacity 160ms ease;
|
||||
}
|
||||
html.is-recipes-menu-open #recipe-bottom-controls {
|
||||
html.is-nav-menu-open #recipe-bottom-controls,
|
||||
html.is-nav-menu-open #pantry-bottom-controls {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
html.is-recipes-menu-open #recipe-bottom-controls * {
|
||||
html.is-nav-menu-open #recipe-bottom-controls *,
|
||||
html.is-nav-menu-open #pantry-bottom-controls * {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
#recipe-search-shell.recipe-search-field,
|
||||
#recipe-search-shell.recipe-search-field:focus-within {
|
||||
#recipe-search-shell.recipe-search-field:focus-within,
|
||||
#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);
|
||||
right: var(--catalog-search-right, calc(1rem + var(--recipe-control-size, 3.05rem) + 0.5rem));
|
||||
@@ -506,7 +513,9 @@
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
}
|
||||
.dark #recipe-search-shell.recipe-search-field,
|
||||
.dark #recipe-search-shell.recipe-search-field:focus-within {
|
||||
.dark #recipe-search-shell.recipe-search-field:focus-within,
|
||||
.dark #pantry-search-shell.recipe-search-field,
|
||||
.dark #pantry-search-shell.recipe-search-field:focus-within {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
box-shadow:
|
||||
@@ -515,7 +524,8 @@
|
||||
0 10px 24px rgba(0, 0, 0, 0.3),
|
||||
0 24px 54px rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
#recipe-search-input {
|
||||
#recipe-search-input,
|
||||
#pantry-search-input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: transparent !important;
|
||||
@@ -533,10 +543,15 @@
|
||||
#recipe-search-input::-webkit-search-cancel-button,
|
||||
#recipe-search-input::-webkit-search-decoration,
|
||||
#recipe-search-input::-webkit-search-results-button,
|
||||
#recipe-search-input::-webkit-search-results-decoration {
|
||||
#recipe-search-input::-webkit-search-results-decoration,
|
||||
#pantry-search-input::-webkit-search-cancel-button,
|
||||
#pantry-search-input::-webkit-search-decoration,
|
||||
#pantry-search-input::-webkit-search-results-button,
|
||||
#pantry-search-input::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
#recipe-search-input::placeholder {
|
||||
#recipe-search-input::placeholder,
|
||||
#pantry-search-input::placeholder {
|
||||
color: rgb(var(--text-dim-rgb)) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -544,7 +559,12 @@
|
||||
#recipe-search-close:hover,
|
||||
#recipe-search-close:focus,
|
||||
#recipe-search-close:focus-visible,
|
||||
#recipe-search-close:active {
|
||||
#recipe-search-close:active,
|
||||
#pantry-search-close,
|
||||
#pantry-search-close:hover,
|
||||
#pantry-search-close:focus,
|
||||
#pantry-search-close:focus-visible,
|
||||
#pantry-search-close:active {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: transparent !important;
|
||||
@@ -557,6 +577,7 @@
|
||||
outline: none;
|
||||
}
|
||||
#main-view .recipe-glass-btn,
|
||||
#pantry-view .recipe-glass-btn,
|
||||
#app-bottom-nav .recipe-nav-toggle {
|
||||
position: relative;
|
||||
border: 1px solid rgba(255, 255, 255, 0.32) !important;
|
||||
@@ -572,6 +593,7 @@
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
}
|
||||
.dark #main-view .recipe-glass-btn,
|
||||
.dark #pantry-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;
|
||||
@@ -584,39 +606,56 @@
|
||||
0 24px 54px rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
#main-view .recipe-glass-btn:hover,
|
||||
#pantry-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));
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.dark #main-view .recipe-glass-btn:hover,
|
||||
.dark #pantry-view .recipe-glass-btn:hover,
|
||||
.dark #app-bottom-nav .recipe-nav-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.09) !important;
|
||||
}
|
||||
#main-view #recipe-search-shell.recipe-search-field:hover {
|
||||
#main-view #recipe-search-shell.recipe-search-field:hover,
|
||||
#pantry-view #pantry-search-shell.recipe-search-field:hover {
|
||||
transform: none;
|
||||
}
|
||||
#recipe-filter-btn {
|
||||
#recipe-filter-btn,
|
||||
#pantry-filter-bottom-btn {
|
||||
border-radius: 999px;
|
||||
}
|
||||
#main-view #recipe-filter-btn.recipe-bottom-action {
|
||||
#main-view #recipe-filter-btn.recipe-bottom-action,
|
||||
#pantry-view #pantry-filter-bottom-btn.recipe-bottom-action {
|
||||
border-radius: 999px;
|
||||
}
|
||||
#main-view #recipe-filter-wrap {
|
||||
#main-view #recipe-filter-wrap,
|
||||
#pantry-view #pantry-filter-bottom-wrap {
|
||||
left: var(--catalog-filter-left, calc(100vw - 4.05rem)) !important;
|
||||
right: auto !important;
|
||||
bottom: 0;
|
||||
}
|
||||
#main-view .recipe-bottom-action {
|
||||
#main-view .recipe-bottom-action,
|
||||
#pantry-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 {
|
||||
#main-view .recipe-bottom-action i,
|
||||
#pantry-view .recipe-bottom-action i {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.dark #pantry-filter-popover {
|
||||
background: rgba(var(--app-bg-rgb), 0.82) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12) !important;
|
||||
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) !important;
|
||||
}
|
||||
#planner-picker-search-shell {
|
||||
min-height: 3rem;
|
||||
width: min(calc(100% - 0.5rem), 22.4rem);
|
||||
@@ -753,8 +792,7 @@
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
#planner-picker-search::placeholder,
|
||||
#pantry-search::placeholder {
|
||||
#planner-picker-search::placeholder {
|
||||
color: rgba(var(--text-body-soft-rgb), 0.72) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -839,25 +877,25 @@
|
||||
box-shadow 180ms ease,
|
||||
opacity 280ms ease;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab:not(.is-recipes-menu-open):not(.is-recipes-collapsing) .recipe-nav-toggle {
|
||||
#app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open):not(.is-nav-collapsing) .recipe-nav-toggle {
|
||||
display: inline-flex;
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab.is-recipes-collapsing .recipe-nav-toggle {
|
||||
#app-bottom-nav.is-collapsed-tab.is-nav-collapsing .recipe-nav-toggle {
|
||||
display: inline-flex;
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: none;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab .recipe-nav-toggle {
|
||||
#app-bottom-nav.is-collapsed-tab .recipe-nav-toggle {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab:not(.is-recipes-menu-open) .bottom-dock {
|
||||
#app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open) .bottom-dock {
|
||||
width: var(--recipe-collapsed-dock-width);
|
||||
height: var(--recipe-collapsed-dock-height);
|
||||
border-radius: var(--recipe-collapsed-dock-radius);
|
||||
@@ -868,21 +906,21 @@
|
||||
);
|
||||
pointer-events: auto;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab.is-recipes-collapsing:not(.is-recipes-menu-open) .bottom-dock {
|
||||
#app-bottom-nav.is-collapsed-tab.is-nav-collapsing:not(.is-nav-menu-open) .bottom-dock {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab.is-recipes-menu-open .recipe-nav-toggle {
|
||||
#app-bottom-nav.is-collapsed-tab.is-nav-menu-open .recipe-nav-toggle {
|
||||
opacity: 0;
|
||||
transform: translateY(0) scale(0.98);
|
||||
pointer-events: none;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab.is-recipes-collapsing .recipe-nav-toggle {
|
||||
#app-bottom-nav.is-collapsed-tab.is-nav-collapsing .recipe-nav-toggle {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: none;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab.is-recipes-menu-open .bottom-dock {
|
||||
#app-bottom-nav.is-collapsed-tab.is-nav-menu-open .bottom-dock {
|
||||
opacity: 1;
|
||||
width: var(--recipe-dock-width);
|
||||
transform: translateY(0);
|
||||
@@ -938,11 +976,11 @@
|
||||
opacity: 1;
|
||||
transition: opacity 140ms ease;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab:not(.is-recipes-menu-open) .nav-slot {
|
||||
#app-bottom-nav.is-collapsed-tab:not(.is-nav-menu-open) .nav-slot {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab.is-recipes-collapsing .nav-slot {
|
||||
#app-bottom-nav.is-collapsed-tab.is-nav-collapsing .nav-slot {
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
|
||||
Reference in New Issue
Block a user