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

Refine planner filters and compact selection cards

Browse Source
This commit is contained in:
Florian Heinz
2026-04-14 09:15:46 +02:00
parent c5dea16c53
commit 6f6269c66d
13 changed files with 451 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nouri/static/css/styles.css
+267 -16
View File
@@ -661,50 +661,247 @@ h3 {
.selected-components-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 0.7rem;
}
.selected-component-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
padding: 0.9rem 1rem;
border-radius: 18px;
gap: 0.65rem;
min-height: 138px;
padding: 0.9rem 0.85rem 0.8rem;
border-radius: 22px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface-strong) 82%);
background: color-mix(in srgb, var(--accent-soft) 10%, var(--surface-strong) 90%);
align-content: start;
}
.selected-component-main {
display: grid;
gap: 0.2rem;
gap: 0.15rem;
min-width: 0;
margin-top: auto;
text-align: center;
}
.selected-component-main strong,
.selected-component-main small {
.selected-component-main strong {
min-width: 0;
overflow-wrap: anywhere;
font-size: 1rem;
line-height: 1.25;
}
.selected-component-main small {
color: var(--muted);
.selected-component-visual {
display: flex;
align-items: center;
justify-content: center;
min-height: 4.4rem;
}
.selected-component-visual img,
.selected-component-fallback {
width: 4rem;
height: 4rem;
border-radius: 18px;
}
.selected-component-visual img {
object-fit: cover;
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent 24%);
box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent 90%);
}
.selected-component-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--surface) 76%, #fff 24%);
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent 24%);
color: color-mix(in srgb, var(--accent-strong) 70%, var(--text) 30%);
}
.selected-component-fallback .ui-icon {
width: 1.45rem;
height: 1.45rem;
}
.selected-component-remove {
white-space: nowrap;
position: absolute;
top: 0.45rem;
right: 0.45rem;
width: 1.9rem;
height: 1.9rem;
min-width: 1.9rem;
padding: 0;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--line) 74%, transparent 26%);
background: transparent;
color: var(--muted);
box-shadow: none;
transform: none;
z-index: 1;
}
.selected-component-remove:hover {
background: color-mix(in srgb, var(--accent-soft) 40%, transparent 60%);
color: var(--text);
border-color: color-mix(in srgb, var(--accent) 40%, var(--line) 60%);
box-shadow: none;
transform: none;
}
.selected-component-remove span[aria-hidden="true"] {
font-size: 1.25rem;
line-height: 1;
}
[data-theme="dark"] .selected-component-card {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 82%, #4d413d 18%),
color-mix(in srgb, var(--surface) 96%, #2c2523 4%)
color-mix(in srgb, var(--surface-soft) 76%, #4d413d 24%),
color-mix(in srgb, var(--surface) 94%, #2c2523 6%)
);
border-color: color-mix(in srgb, rgba(243, 177, 125, 0.36) 48%, var(--line) 52%);
}
[data-theme="dark"] .selected-component-fallback {
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%);
}
[data-theme="dark"] .selected-component-remove {
background: rgba(32, 27, 25, 0.16);
color: color-mix(in srgb, var(--muted) 90%, white 10%);
}
[data-theme="dark"] .selected-component-remove:hover {
background: color-mix(in srgb, var(--accent-soft) 42%, rgba(32, 27, 25, 0.58) 58%);
}
.package-option-grid {
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 0.7rem;
}
.set-item-option {
position: relative;
display: block;
}
.set-item-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.set-item-option-card {
display: grid;
gap: 0.65rem;
min-height: 138px;
padding: 0.9rem 0.85rem 0.8rem;
border-radius: 22px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--accent-soft) 10%, var(--surface-strong) 90%);
color: var(--muted);
align-content: start;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.set-item-option-visual {
display: flex;
align-items: center;
justify-content: center;
min-height: 4.4rem;
}
.set-item-option-visual img,
.set-item-option-fallback {
width: 4rem;
height: 4rem;
border-radius: 18px;
}
.set-item-option-visual img {
object-fit: cover;
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent 24%);
box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent 90%);
}
.set-item-option-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--surface) 76%, #fff 24%);
border: 1px solid color-mix(in srgb, var(--line) 76%, transparent 24%);
color: color-mix(in srgb, var(--accent-strong) 70%, var(--text) 30%);
}
.set-item-option-fallback .ui-icon {
width: 1.45rem;
height: 1.45rem;
}
.set-item-option-label {
margin-top: auto;
min-width: 0;
overflow-wrap: anywhere;
text-align: center;
color: var(--text);
font-weight: 600;
line-height: 1.25;
}
.set-item-option:hover .set-item-option-card {
border-color: var(--accent-soft);
transform: translateY(-1px);
color: var(--text);
}
.set-item-option input:focus-visible + .set-item-option-card {
outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent 55%);
outline-offset: 3px;
}
.set-item-option input:checked + .set-item-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);
}
.set-item-option input:checked + .set-item-option-card .set-item-option-fallback {
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"] .set-item-option-card {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 76%, #4d413d 24%),
color-mix(in srgb, var(--surface) 94%, #2c2523 6%)
);
border-color: color-mix(in srgb, rgba(243, 177, 125, 0.36) 48%, var(--line) 52%);
color: color-mix(in srgb, var(--muted) 92%, white 8%);
}
[data-theme="dark"] .set-item-option-fallback {
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%);
}
.quick-food-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -825,6 +1022,7 @@ h3 {
.stack-form,
.stack-sections,
.planner-day-stack,
.planner-day-sidebar,
.planner-entry-list,
.week-entry-stack,
.week-slot-stack {
@@ -832,6 +1030,18 @@ h3 {
gap: 1rem;
}
.planner-day-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
gap: 1rem;
align-items: start;
}
.planner-day-main,
.planner-day-sidebar {
min-width: 0;
}
.dashboard-spaced-panel > .panel-head + * {
margin-top: 0.45rem;
}
@@ -2239,6 +2449,46 @@ legend {
mask-image: url("../icons/fa/leaf.svg");
}
.icon-component-protein {
-webkit-mask-image: url("../icons/components/protein.svg");
mask-image: url("../icons/components/protein.svg");
}
.icon-component-carb {
-webkit-mask-image: url("../icons/components/carb.svg");
mask-image: url("../icons/components/carb.svg");
}
.icon-component-veg {
-webkit-mask-image: url("../icons/components/veg.svg");
mask-image: url("../icons/components/veg.svg");
}
.icon-component-fruit {
-webkit-mask-image: url("../icons/components/fruit.svg");
mask-image: url("../icons/components/fruit.svg");
}
.icon-component-dairy {
-webkit-mask-image: url("../icons/components/dairy.svg");
mask-image: url("../icons/components/dairy.svg");
}
.icon-component-nuts {
-webkit-mask-image: url("../icons/components/nuts.svg");
mask-image: url("../icons/components/nuts.svg");
}
.icon-component-seeds {
-webkit-mask-image: url("../icons/components/seeds.svg");
mask-image: url("../icons/components/seeds.svg");
}
.icon-component-neutral {
-webkit-mask-image: url("../icons/components/neutral.svg");
mask-image: url("../icons/components/neutral.svg");
}
.mobile-sheet-backdrop {
position: fixed;
inset: 0;
@@ -2321,6 +2571,7 @@ legend {
.stats-grid,
.two-column,
.planner-day-layout,
.template-library-grid,
.settings-grid,
.inline-form,