diff --git a/public/pages/shopping.js b/public/pages/shopping.js index 3197409..a0f32ef 100644 --- a/public/pages/shopping.js +++ b/public/pages/shopping.js @@ -352,6 +352,8 @@ function wireQuickAdd(container) { // Erfolgs-Feedback auf dem +-Button (DOM-API, kein innerHTML) _flashAddBtn(form.querySelector('.quick-add__btn')); nameInput.focus(); + nameInput.classList.add('quick-add__input--flash'); + nameInput.addEventListener('animationend', () => nameInput.classList.remove('quick-add__input--flash'), { once: true }); } catch (err) { window.oikos.showToast(err.message, 'danger'); } diff --git a/public/styles/layout.css b/public/styles/layout.css index bf2853a..e603af3 100755 --- a/public/styles/layout.css +++ b/public/styles/layout.css @@ -2336,6 +2336,23 @@ textarea.input { resize: vertical; } } } +/* -------------------------------------------------------- + * Signature Moment: Eingabefeld-Glow nach erfolgreichem Item-Add + * -------------------------------------------------------- */ +@keyframes input-add-flash { + 0% { box-shadow: none; } + 25% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--module-accent, var(--color-accent)) 45%, transparent); } + 100% { box-shadow: none; } +} + +.quick-add__input--flash { + animation: input-add-flash 550ms var(--ease-out) forwards; +} + +@media (prefers-reduced-motion: reduce) { + .quick-add__input--flash { animation: none; } +} + /* -------------------------------------------------------- * Windows High Contrast / Forced Colors * -------------------------------------------------------- */