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

Add food card quick status actions

Browse Source
This commit is contained in:
Florian Heinz
2026-04-29 12:43:23 +02:00
parent 8fc2492918
commit 6b2c495cf2
3 changed files with 156 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nouri/static/css/styles.css
+125
View File
@@ -1082,6 +1082,16 @@ h3 {
color: #ece8e4;
}
.status-missing {
background: rgba(210, 125, 115, 0.18);
color: color-mix(in srgb, #9f4339 72%, var(--text) 28%);
}
[data-theme="dark"] .status-missing {
background: rgba(210, 125, 115, 0.22);
color: #f2d0ca;
}
.status-unsorted {
background: rgba(184, 161, 108, 0.18);
}
@@ -1095,6 +1105,10 @@ h3 {
background: var(--lilac-soft);
}
.status-shopping {
background: color-mix(in srgb, var(--mint-soft) 70%, var(--sky-soft) 30%);
}
.item-card {
position: relative;
display: grid;
@@ -1289,6 +1303,75 @@ h3 {
transform: translateY(-1px);
}
.item-card-quick-actions {
position: absolute;
top: 0.9rem;
left: 0.9rem;
z-index: 3;
display: flex;
gap: 0.45rem;
}
.item-card-quick-actions form {
margin: 0;
}
.item-card-icon-button {
width: 2.45rem;
height: 2.45rem;
min-width: 2.45rem;
padding: 0;
border-radius: 999px;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--surface-strong) 84%, var(--accent-soft) 16%);
color: var(--text);
border: 1px solid color-mix(in srgb, var(--line) 62%, var(--accent) 38%);
box-shadow: 0 10px 22px rgba(70, 48, 34, 0.12);
}
.item-card-icon-button:hover {
background: color-mix(in srgb, var(--accent) 78%, #fff 22%);
color: #201a17;
transform: translateY(-1px) scale(1.02);
}
.item-card-icon-button.is-active,
.item-card-icon-button:disabled {
opacity: 1;
background: color-mix(in srgb, var(--accent) 82%, var(--surface-strong) 18%);
color: #201a17;
border-color: color-mix(in srgb, var(--accent-strong) 68%, var(--line) 32%);
transform: none;
}
.item-card-icon-button:disabled {
cursor: default;
}
.item-card-icon-button.is-inactive {
background: color-mix(in srgb, var(--surface-soft) 82%, #8a674f 18%);
color: color-mix(in srgb, var(--muted) 72%, var(--text) 28%);
border-color: color-mix(in srgb, var(--line) 72%, #8a674f 28%);
}
.item-card-icon-button.is-home {
background: color-mix(in srgb, var(--accent) 82%, var(--surface-strong) 18%);
color: #201a17;
border-color: color-mix(in srgb, var(--accent-strong) 68%, var(--line) 32%);
}
.item-card-icon-button.is-missing {
background: rgba(210, 125, 115, 0.18);
color: color-mix(in srgb, #9f4339 74%, var(--text) 26%);
border-color: color-mix(in srgb, rgba(210, 125, 115, 0.42) 62%, var(--line) 38%);
}
.item-card-icon-button .ui-icon {
width: 1.05rem;
height: 1.05rem;
}
.item-card-hover-meta {
position: absolute;
inset: 0;
@@ -1325,6 +1408,43 @@ h3 {
border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.16) 42%);
}
[data-theme="dark"] button.item-card-icon-button,
[data-theme="dark"] .item-card-icon-button {
background: color-mix(in srgb, var(--surface-soft) 70%, rgba(33, 28, 27, 0.5) 30%);
color: var(--text);
border-color: color-mix(in srgb, var(--line) 50%, rgba(243, 177, 125, 0.24) 50%);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}
[data-theme="dark"] button.item-card-icon-button:hover,
[data-theme="dark"] .item-card-icon-button:hover {
background: #d7935f;
color: #201a17;
}
[data-theme="dark"] .item-card-icon-button.is-active,
[data-theme="dark"] .item-card-icon-button:disabled,
[data-theme="dark"] button.item-card-icon-button.is-active,
[data-theme="dark"] button.item-card-icon-button:disabled {
background: #d7935f;
color: #201a17;
border-color: color-mix(in srgb, var(--accent-strong) 66%, rgba(243, 177, 125, 0.24) 34%);
}
[data-theme="dark"] .item-card-icon-button.is-inactive,
[data-theme="dark"] button.item-card-icon-button.is-inactive {
background: color-mix(in srgb, var(--surface-soft) 76%, #6c5141 24%);
color: color-mix(in srgb, var(--muted) 86%, white 14%);
border-color: color-mix(in srgb, var(--line) 62%, #8a674f 38%);
}
[data-theme="dark"] .item-card-icon-button.is-missing,
[data-theme="dark"] button.item-card-icon-button.is-missing {
background: rgba(210, 125, 115, 0.22);
color: #f2d0ca;
border-color: color-mix(in srgb, rgba(210, 125, 115, 0.44) 62%, var(--line) 38%);
}
[data-theme="dark"] .item-card-hover-meta {
background: linear-gradient(
180deg,
@@ -3057,6 +3177,11 @@ legend {
mask-image: url("../icons/fa/house.svg");
}
.icon-house-xmark {
-webkit-mask-image: url("../icons/fa/house-circle-xmark.svg");
mask-image: url("../icons/fa/house-circle-xmark.svg");
}
.icon-utensils {
-webkit-mask-image: url("../icons/fa/utensils.svg");
mask-image: url("../icons/fa/utensils.svg");
nouri/static/icons/fa/house-circle-xmark.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M272 70.1C281.1 61.9 294.9 61.9 304 70.1L533.2 275.6C521.2 273.2 508.7 272 496 272C484 272 472.2 273.1 460.9 275.2L288 120.2L128 263.7L128 512C128 520.8 135.2 528 144 528L192 528L192 424C192 384.2 224.2 352 264 352L312 352C320.8 352 329.2 353.6 336.9 356.4C327.8 369.9 320.3 384.5 314.8 400.1C313.9 400 312.9 399.9 311.9 399.9L263.9 399.9C250.6 399.9 239.9 410.6 239.9 423.9L239.9 527.9L314.8 527.9C320.9 545.2 329.4 561.3 339.9 575.9L143.9 575.9C108.6 575.9 79.9 547.2 79.9 511.9L79.9 306.6L71.9 313.8C62 322.6 46.9 321.8 38 312C29.1 302.2 30 287 39.8 278.1L272 70.1zM496 320C575.5 320 640 384.5 640 464C640 543.5 575.5 608 496 608C416.5 608 352 543.5 352 464C352 384.5 416.5 320 496 320zM555.3 427.3C561.5 421.1 561.5 410.9 555.3 404.7C549.1 398.5 538.9 398.5 532.7 404.7L496 441.4L459.3 404.7C453.1 398.5 442.9 398.5 436.7 404.7C430.5 410.9 430.5 421.1 436.7 427.3L473.4 464L436.7 500.7C430.5 506.9 430.5 517.1 436.7 523.3C442.9 529.5 453.1 529.5 459.3 523.3L496 486.6L532.7 523.3C538.9 529.5 549.1 529.5 555.3 523.3C561.5 517.1 561.5 506.9 555.3 500.7L518.6 464L555.3 427.3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB