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

Add shopping entry notes

Browse Source
This commit is contained in:
Florian Heinz
2026-04-26 13:18:14 +02:00
parent d3c58c5dd2
commit 1034ea72a8
5 changed files with 255 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nouri/static/css/styles.css
+81
View File
@@ -1219,6 +1219,13 @@ h3 {
grid-column: 1 / -1;
}
.shopping-add-form {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(11rem, 0.8fr) auto;
gap: 0.8rem;
align-items: end;
}
.shopping-add-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
@@ -1244,6 +1251,9 @@ h3 {
padding: 0.85rem 0.95rem;
border-radius: 22px;
text-align: left;
background: color-mix(in srgb, var(--surface-strong) 86%, var(--accent-soft) 14%);
color: var(--text);
border-color: color-mix(in srgb, var(--line) 72%, var(--accent) 28%);
}
.shopping-add-card-visual,
@@ -1342,6 +1352,20 @@ h3 {
margin: 0;
}
.shopping-entry-note {
width: fit-content;
max-width: 100%;
margin: 0;
padding: 0.12rem 0.5rem;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-soft) 56%, transparent 44%);
color: color-mix(in srgb, var(--accent-strong) 70%, var(--text) 30%);
font-size: 0.82rem;
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}
.shopping-entry-actions {
display: flex;
align-items: center;
@@ -1426,6 +1450,14 @@ h3 {
}
@media (max-width: 680px) {
.shopping-add-form {
grid-template-columns: 1fr;
}
.shopping-add-form button {
width: 100%;
}
.shopping-entry-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
@@ -1462,6 +1494,10 @@ h3 {
display: none;
}
.shopping-entry-note {
font-size: 0.78rem;
}
.shopping-entry-actions,
.shopping-entry-actions form,
.shopping-entry-actions button,
@@ -1504,6 +1540,31 @@ h3 {
border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.18) 42%);
}
[data-theme="dark"] button.shopping-add-card,
[data-theme="dark"] .shopping-add-card {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 70%, #4a3e3a 30%),
color-mix(in srgb, var(--surface) 92%, #241f1d 8%)
);
color: var(--text);
border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.16) 42%);
box-shadow: none;
}
[data-theme="dark"] button.shopping-add-card:hover,
[data-theme="dark"] .shopping-add-card:hover {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 62%, #5a4840 38%),
color-mix(in srgb, var(--surface) 88%, #2f2724 12%)
);
}
[data-theme="dark"] .shopping-add-card-copy small {
color: color-mix(in srgb, var(--muted) 86%, white 14%);
}
[data-theme="dark"] .shopping-entry-card {
background: linear-gradient(
180deg,
@@ -1513,6 +1574,11 @@ h3 {
border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.14) 42%);
}
[data-theme="dark"] .shopping-entry-note {
background: color-mix(in srgb, var(--accent-soft) 54%, rgba(32, 27, 25, 0.46) 46%);
color: color-mix(in srgb, var(--accent-strong) 82%, white 18%);
}
.auth-shell {
min-height: calc(100vh - 10rem);
display: grid;
@@ -1839,6 +1905,7 @@ legend {
border-radius: 18px;
border: 1px solid var(--line);
background: color-mix(in srgb, var(--surface-strong) 82%, #fff 18%);
color: var(--text);
}
.quick-select-card strong,
@@ -1856,6 +1923,20 @@ legend {
color: var(--muted);
}
[data-theme="dark"] .quick-select-card {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--surface-soft) 70%, #4a3e3a 30%),
color-mix(in srgb, var(--surface) 92%, #241f1d 8%)
);
border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.16) 42%);
color: var(--text);
}
[data-theme="dark"] .quick-select-card small {
color: color-mix(in srgb, var(--muted) 86%, white 14%);
}
.inline-photo img {
width: min(220px, 100%);
border-radius: 18px;