hnzio/nouri-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Polish item builders with icon-based selector cards

Browse Source
This commit is contained in:
Florian Heinz
2026-04-13 17:55:21 +02:00
parent 305440a6b2
commit a810162221
10 changed files with 367 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nouri/static/css/styles.css
+229
View File
@@ -848,6 +848,195 @@ legend {
display: none;
}
.daypart-option-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.8rem;
}
.daypart-option {
position: relative;
display: block;
}
.daypart-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.daypart-option-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.7rem;
min-height: 118px;
padding: 1rem 0.9rem;
border-radius: 22px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface-strong) 84%, #fff 16%);
color: var(--muted);
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
cursor: pointer;
}
.daypart-option-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 2.8rem;
border-radius: 16px;
background: color-mix(in srgb, var(--surface) 78%, #fff 22%);
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent 24%);
}
.daypart-option-icon .ui-icon {
width: 1.2rem;
height: 1.2rem;
}
.daypart-option-label {
font-weight: 600;
text-align: center;
line-height: 1.25;
}
.daypart-option:hover .daypart-option-card {
border-color: var(--accent-soft);
color: var(--text);
transform: translateY(-1px);
}
.daypart-option input:focus-visible + .daypart-option-card {
outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent 55%);
outline-offset: 3px;
}
.daypart-option input:checked + .daypart-option-card {
border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface-strong) 82%);
box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 14%, transparent 86%);
color: var(--text);
}
.daypart-option input:checked + .daypart-option-card .daypart-option-icon {
background: color-mix(in srgb, var(--accent) 16%, var(--surface) 84%);
border-color: color-mix(in srgb, var(--accent) 38%, var(--line) 62%);
}
.meal-style-option-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.8rem;
}
.meal-style-option {
position: relative;
display: block;
}
.meal-style-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.meal-style-option-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.7rem;
min-height: 110px;
padding: 0.95rem 0.85rem;
border-radius: 22px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface-strong) 84%, #fff 16%);
color: var(--muted);
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
cursor: pointer;
}
.meal-style-option-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 2.8rem;
border-radius: 16px;
background: color-mix(in srgb, var(--surface) 78%, #fff 22%);
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent 24%);
}
.meal-style-option-icon .ui-icon {
width: 1.15rem;
height: 1.15rem;
}
.meal-style-option-label {
font-weight: 600;
text-align: center;
line-height: 1.25;
}
.meal-style-option:hover .meal-style-option-card {
border-color: var(--accent-soft);
color: var(--text);
transform: translateY(-1px);
}
.meal-style-option input:focus-visible + .meal-style-option-card {
outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent 55%);
outline-offset: 3px;
}
.meal-style-option input:checked + .meal-style-option-card {
border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface-strong) 82%);
box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 14%, transparent 86%);
color: var(--text);
}
.meal-style-option input:checked + .meal-style-option-card .meal-style-option-icon {
background: color-mix(in srgb, var(--accent) 16%, var(--surface) 84%);
border-color: color-mix(in srgb, var(--accent) 38%, var(--line) 62%);
}
[data-theme="dark"] .daypart-option-card,
[data-theme="dark"] .meal-style-option-card {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 72%, #4a403c 28%),
color-mix(in srgb, var(--surface-strong) 86%, #241f1d 14%)
);
border-color: color-mix(in srgb, var(--line) 54%, rgba(243, 177, 125, 0.18) 46%);
color: color-mix(in srgb, var(--muted) 92%, white 8%);
box-shadow: inset 0 1px 0 rgba(255, 233, 217, 0.03);
}
[data-theme="dark"] .daypart-option-icon,
[data-theme="dark"] .meal-style-option-icon {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 82%, #544743 18%),
color-mix(in srgb, var(--surface) 88%, #2a2321 12%)
);
border-color: color-mix(in srgb, var(--line) 52%, rgba(243, 177, 125, 0.22) 48%);
}
[data-theme="dark"] .daypart-option:hover .daypart-option-card,
[data-theme="dark"] .meal-style-option:hover .meal-style-option-card {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 66%, #554945 34%),
color-mix(in srgb, var(--surface-strong) 82%, #2b2523 18%)
);
border-color: color-mix(in srgb, var(--accent) 28%, var(--line) 72%);
}
.quick-select-card {
display: flex;
align-items: flex-start;
@@ -1881,6 +2070,46 @@ legend {
mask-image: url("../icons/dayparts/late-snack.svg");
}
.icon-meal-style-sweet {
-webkit-mask-image: url("../icons/meal-styles/sweet.svg");
mask-image: url("../icons/meal-styles/sweet.svg");
}
.icon-meal-style-savory {
-webkit-mask-image: url("../icons/meal-styles/savory.svg");
mask-image: url("../icons/meal-styles/savory.svg");
}
.icon-meal-style-warm {
-webkit-mask-image: url("../icons/meal-styles/warm.svg");
mask-image: url("../icons/meal-styles/warm.svg");
}
.icon-meal-style-cold {
-webkit-mask-image: url("../icons/meal-styles/cold.svg");
mask-image: url("../icons/meal-styles/cold.svg");
}
.icon-meal-style-quick {
-webkit-mask-image: url("../icons/meal-styles/quick.svg");
mask-image: url("../icons/meal-styles/quick.svg");
}
.icon-meal-style-simple {
-webkit-mask-image: url("../icons/meal-styles/simple.svg");
mask-image: url("../icons/meal-styles/simple.svg");
}
.icon-meal-style-prep {
-webkit-mask-image: url("../icons/meal-styles/prep.svg");
mask-image: url("../icons/meal-styles/prep.svg");
}
.icon-meal-style-portable {
-webkit-mask-image: url("../icons/meal-styles/portable.svg");
mask-image: url("../icons/meal-styles/portable.svg");
}
.icon-archive {
-webkit-mask-image: url("../icons/fa/archive.svg");
mask-image: url("../icons/fa/archive.svg");