diff --git a/nouri/static/css/styles.css b/nouri/static/css/styles.css index ded3ef4..a4ce89a 100644 --- a/nouri/static/css/styles.css +++ b/nouri/static/css/styles.css @@ -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"); diff --git a/nouri/static/icons/fa/house-circle-xmark.svg b/nouri/static/icons/fa/house-circle-xmark.svg new file mode 100644 index 0000000..07de842 --- /dev/null +++ b/nouri/static/icons/fa/house-circle-xmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/nouri/templates/items/list.html b/nouri/templates/items/list.html index b33d172..58617c9 100644 --- a/nouri/templates/items/list.html +++ b/nouri/templates/items/list.html @@ -86,6 +86,36 @@ {% endif %} +
+ {% if item.can_edit %} + {% if item.is_home %} +
+ {{ csrf_input() }} + +
+ {% else %} +
+ {{ csrf_input() }} + +
+ {% endif %} + {% endif %} +
+ {{ csrf_input() }} + +
+
{% if item.photo_filename %}