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

Redesign controls in recipe list

Browse Source
This commit is contained in:
Rafał
2026-04-22 18:08:20 +02:00
parent 7328b6ec4c
commit bc505d6b4c
3 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@@ -437,7 +437,7 @@
bottom: 0;
min-width: 0;
height: var(--recipe-control-size, 3.05rem);
border-radius: 1.25rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.32) !important;
box-shadow:
@@ -483,8 +483,21 @@
color: rgb(var(--text-dim-rgb)) !important;
opacity: 1;
}
#recipe-search-close {
#recipe-search-close,
#recipe-search-close:hover,
#recipe-search-close:focus,
#recipe-search-close:focus-visible,
#recipe-search-close:active {
appearance: none;
-webkit-appearance: none;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
outline: none;
}
#main-view .recipe-glass-btn,
#app-bottom-nav .recipe-nav-toggle {
@@ -528,7 +541,7 @@
border-radius: 999px;
}
#main-view #recipe-filter-btn.recipe-bottom-action {
border-radius: 1.25rem;
border-radius: 999px;
}
#main-view #recipe-filter-wrap {
left: var(--catalog-filter-left, calc(100vw - 4.05rem)) !important;
@@ -538,7 +551,7 @@
#main-view .recipe-bottom-action {
width: var(--recipe-control-size, 3.05rem);
height: var(--recipe-control-size, 3.05rem);
border-radius: 1.25rem;
border-radius: 999px;
font-size: 0.95rem;
}
#main-view .recipe-bottom-action i {
@@ -731,12 +744,12 @@
--dock-width: min(calc(100% - 2.4rem), 24.5rem);
--dock-pad: 0.42rem;
--dock-gap: 0.06rem;
--dock-radius: 1.68rem;
--dock-radius: 999px;
--recipe-dock-width: var(--dock-width);
--recipe-collapsed-dock-width: 3.72rem;
--recipe-collapsed-dock-width: 3.05rem;
--recipe-collapsed-dock-height: 3.05rem;
--recipe-collapsed-dock-radius: 1.25rem;
--recipe-toggle-size: 3.72rem;
--recipe-collapsed-dock-radius: 999px;
--recipe-toggle-size: calc(var(--recipe-collapsed-dock-width) - (var(--dock-pad) * 2));
display: flex;
justify-content: center;
padding: 0 0.85rem calc(1.58rem + env(safe-area-inset-bottom));
@@ -753,7 +766,7 @@
height: auto;
margin: 0;
padding: 0;
border-radius: 1.05rem;
border-radius: 999px;
align-items: center;
justify-content: center;
font-size: 0.95rem;
@@ -884,7 +897,7 @@
height: 2.18rem;
margin: 0;
padding: 0;
border-radius: 1.35rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -941,7 +954,7 @@
padding: 0.34rem 0.28rem 0.3rem;
color: rgb(var(--text-primary-rgb));
background: rgba(var(--overlay-rgb), 0.38) !important;
border-radius: 1.05rem;
border-radius: 999px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(var(--overlay-rgb), 0.18) !important;
@@ -975,9 +988,10 @@
--dock-width: min(calc(100% - 1.6rem), 22.5rem);
--dock-pad: 0.38rem;
--dock-gap: 0.05rem;
--dock-radius: 1.56rem;
--dock-radius: 999px;
--recipe-collapsed-dock-width: 2.95rem;
--recipe-collapsed-dock-height: 2.95rem;
--recipe-collapsed-dock-radius: 1.2rem;
--recipe-collapsed-dock-radius: 999px;
}
#app-bottom-nav .bottom-dock {
width: var(--dock-width);
@@ -990,13 +1004,13 @@
#app-bottom-nav .nav-action {
width: 2.02rem;
height: 2.02rem;
border-radius: 1.28rem;
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;
border-radius: 0.96rem;
border-radius: 999px;
}
#app-bottom-nav .nav-label {
font-size: 0.56rem;