Redesign controls in recipe list
This commit is contained in:
266
index.html
266
index.html
@@ -405,38 +405,146 @@
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%);
|
||||
pointer-events: none;
|
||||
}
|
||||
#recipe-topbar #recipe-search-shell {
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
margin-inline: 0;
|
||||
#recipe-search-shell {
|
||||
isolation: auto;
|
||||
}
|
||||
#recipe-topbar #recipe-search-shell::after {
|
||||
#recipe-search-shell::after {
|
||||
display: none;
|
||||
}
|
||||
#recipe-topbar #recipe-search-shell,
|
||||
#recipe-topbar #recipe-search-shell:focus-within {
|
||||
background: rgb(var(--sunken-rgb)) !important;
|
||||
border: 1px solid rgb(var(--border-input-rgb)) !important;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
#recipe-topbar #recipe-search-input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
#recipe-bottom-controls,
|
||||
#recipe-bottom-default-actions {
|
||||
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;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
transition: opacity 160ms ease;
|
||||
}
|
||||
html.is-recipes-menu-open #recipe-bottom-controls {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
html.is-recipes-menu-open #recipe-bottom-controls * {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
#recipe-search-shell.recipe-search-field,
|
||||
#recipe-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));
|
||||
bottom: 0;
|
||||
min-width: 0;
|
||||
height: var(--recipe-control-size, 3.05rem);
|
||||
border-radius: 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.32) !important;
|
||||
box-shadow:
|
||||
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.14),
|
||||
0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
|
||||
backdrop-filter: blur(28px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
}
|
||||
.dark #recipe-search-shell.recipe-search-field,
|
||||
.dark #recipe-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:
|
||||
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.3),
|
||||
0 24px 54px rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
#recipe-search-input {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
background-image: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
color: rgb(var(--text-body-rgb)) !important;
|
||||
caret-color: rgb(var(--text-body-rgb));
|
||||
padding: 0 !important;
|
||||
}
|
||||
#recipe-topbar #recipe-search-input::placeholder {
|
||||
#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 {
|
||||
display: none;
|
||||
}
|
||||
#recipe-search-input::placeholder {
|
||||
color: rgb(var(--text-dim-rgb)) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
#recipe-topbar #recipe-filter-btn {
|
||||
#recipe-search-close {
|
||||
background: transparent !important;
|
||||
}
|
||||
#main-view .recipe-glass-btn,
|
||||
#app-bottom-nav .recipe-nav-toggle {
|
||||
position: relative;
|
||||
border: 1px solid rgba(255, 255, 255, 0.32) !important;
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
color: rgb(var(--text-body-rgb));
|
||||
box-shadow:
|
||||
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.14),
|
||||
0 18px 38px rgba(var(--overlay-rgb), 0.18) !important;
|
||||
backdrop-filter: blur(28px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
}
|
||||
.dark #main-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;
|
||||
color: rgb(var(--text-body-rgb));
|
||||
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.3),
|
||||
0 24px 54px rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
#main-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 #app-bottom-nav .recipe-nav-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.09) !important;
|
||||
}
|
||||
#main-view #recipe-search-shell.recipe-search-field:hover {
|
||||
transform: none;
|
||||
}
|
||||
#recipe-filter-btn {
|
||||
border-radius: 999px;
|
||||
}
|
||||
#main-view #recipe-filter-btn.recipe-bottom-action {
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
#main-view #recipe-filter-wrap {
|
||||
left: var(--catalog-filter-left, calc(100vw - 4.05rem)) !important;
|
||||
right: auto !important;
|
||||
bottom: 0;
|
||||
}
|
||||
#main-view .recipe-bottom-action {
|
||||
width: var(--recipe-control-size, 3.05rem);
|
||||
height: var(--recipe-control-size, 3.05rem);
|
||||
border-radius: 1.25rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
#main-view .recipe-bottom-action i {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1;
|
||||
}
|
||||
#planner-picker-search-shell {
|
||||
min-height: 3rem;
|
||||
width: min(calc(100% - 0.5rem), 22.4rem);
|
||||
@@ -620,24 +728,108 @@
|
||||
inset-inline: 0;
|
||||
bottom: 0;
|
||||
z-index: 30;
|
||||
--dock-width: min(calc(100% - 2.4rem), 24.5rem);
|
||||
--dock-pad: 0.42rem;
|
||||
--dock-gap: 0.06rem;
|
||||
--dock-radius: 1.68rem;
|
||||
--recipe-dock-width: var(--dock-width);
|
||||
--recipe-collapsed-dock-width: 3.72rem;
|
||||
--recipe-collapsed-dock-height: 3.05rem;
|
||||
--recipe-collapsed-dock-radius: 1.25rem;
|
||||
--recipe-toggle-size: 3.72rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 0.85rem calc(1.58rem + env(safe-area-inset-bottom));
|
||||
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);
|
||||
}
|
||||
#app-bottom-nav .recipe-nav-toggle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: var(--dock-pad);
|
||||
bottom: var(--dock-pad);
|
||||
left: var(--dock-pad);
|
||||
width: var(--recipe-toggle-size);
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 1.05rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.95rem;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
transition:
|
||||
transform 220ms ease,
|
||||
color 160ms ease,
|
||||
background-color 160ms ease,
|
||||
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 {
|
||||
display: inline-flex;
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab.is-recipes-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 {
|
||||
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 {
|
||||
width: var(--recipe-collapsed-dock-width);
|
||||
height: var(--recipe-collapsed-dock-height);
|
||||
border-radius: var(--recipe-collapsed-dock-radius);
|
||||
opacity: 1;
|
||||
transform: translate(
|
||||
calc((var(--recipe-collapsed-dock-width) - var(--recipe-dock-width)) / 2),
|
||||
calc(var(--recipe-controls-lift, 0px) * -1)
|
||||
);
|
||||
pointer-events: auto;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab.is-recipes-collapsing:not(.is-recipes-menu-open) .bottom-dock {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab.is-recipes-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 {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: none;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab.is-recipes-menu-open .bottom-dock {
|
||||
opacity: 1;
|
||||
width: var(--recipe-dock-width);
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
#app-bottom-nav .bottom-dock {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: min(calc(100% - 2.4rem), 24.5rem);
|
||||
width: var(--dock-width);
|
||||
height: 3.72rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
align-items: stretch;
|
||||
gap: 0.06rem;
|
||||
padding: 0.42rem;
|
||||
border-radius: 1.68rem;
|
||||
gap: var(--dock-gap);
|
||||
padding: var(--dock-pad);
|
||||
border-radius: var(--dock-radius);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.32);
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(28px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
||||
box-shadow:
|
||||
@@ -646,6 +838,13 @@
|
||||
0 8px 20px rgba(var(--overlay-rgb), 0.16),
|
||||
0 22px 52px rgba(var(--overlay-rgb), 0.24);
|
||||
pointer-events: auto;
|
||||
transform-origin: left center;
|
||||
transition:
|
||||
opacity 220ms ease,
|
||||
width 540ms cubic-bezier(0.16, 1, 0.3, 1),
|
||||
height 540ms cubic-bezier(0.16, 1, 0.3, 1),
|
||||
border-radius 540ms cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 540ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.dark #app-bottom-nav .bottom-dock {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
@@ -662,6 +861,17 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
transition: opacity 140ms ease;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab:not(.is-recipes-menu-open) .nav-slot {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#app-bottom-nav.is-recipes-tab.is-recipes-collapsing .nav-slot {
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
#app-bottom-nav .nav-tab,
|
||||
#app-bottom-nav .nav-action {
|
||||
@@ -762,13 +972,19 @@
|
||||
@media (max-width: 380px) {
|
||||
#app-bottom-nav {
|
||||
padding-inline: 0.7rem;
|
||||
--dock-width: min(calc(100% - 1.6rem), 22.5rem);
|
||||
--dock-pad: 0.38rem;
|
||||
--dock-gap: 0.05rem;
|
||||
--dock-radius: 1.56rem;
|
||||
--recipe-collapsed-dock-height: 2.95rem;
|
||||
--recipe-collapsed-dock-radius: 1.2rem;
|
||||
}
|
||||
#app-bottom-nav .bottom-dock {
|
||||
width: min(calc(100% - 1.6rem), 22.5rem);
|
||||
width: var(--dock-width);
|
||||
height: 3.48rem;
|
||||
gap: 0.05rem;
|
||||
padding: 0.38rem;
|
||||
border-radius: 1.56rem;
|
||||
gap: var(--dock-gap);
|
||||
padding: var(--dock-pad);
|
||||
border-radius: var(--dock-radius);
|
||||
}
|
||||
#app-bottom-nav .nav-tab,
|
||||
#app-bottom-nav .nav-action {
|
||||
|
||||
Reference in New Issue
Block a user