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");