/* ═══════════════════════════════════════════════════════════════════════════ TiM → Qdrant · Povratna sprega: loading overlay + toast poruke. Deo podeljenog design sistema (static/css/). U -u stoji POSLE components.css (nasleđuje .card senke i tokene) a PRE responsive.css. Logika je u static/js/feedback.js, markup u index.html (globalno, van #loginView i #appView — radi na oba ekrana, isto kao .theme-toggle). Slojevi: modali 100 → busy overlay 200 → toast 300. Overlay je iznad modala jer se „Nova stavka" pravi iz otvorenog modala. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Loading overlay ─── */ .busy-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--s-5); background: var(--overlay); backdrop-filter: blur(3px); animation: fadeIn 0.14s var(--ease); } .busy-card { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); min-width: 180px; padding: var(--s-6) var(--s-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-xl); } .busy-spinner { width: 34px; height: 34px; border: 3px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: busySpin 0.7s linear infinite; } .busy-label { margin: 0; color: var(--ink-2); font-size: 13px; font-weight: 500; text-align: center; } @keyframes busySpin { to { transform: rotate(360deg); } } /* ─── Toast ─── */ .toast-host { position: fixed; right: var(--s-5); bottom: var(--s-5); /* Na 375px bi duga poruka inače legla na samu levu ivicu ekrana. */ max-width: calc(100vw - 2 * var(--s-5)); z-index: 300; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); /* Host pokriva ugao ekrana i bez poruka — klikovi moraju da prolaze kroz njega; same poruke ga vraćaju sebi (pointer-events: auto). */ pointer-events: none; } .toast { display: flex; align-items: center; gap: var(--s-2); max-width: 380px; padding: 10px var(--s-4); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--r-md); box-shadow: var(--sh-lg); color: var(--ink); font-size: 13px; cursor: pointer; pointer-events: auto; animation: toastIn 0.22s var(--ease); } .toast.ok { border-left-color: var(--ok); } .toast.ok .ico { color: var(--ok); } .toast.err { border-left-color: var(--err); } .toast.err .ico { color: var(--err); } .toast.info { border-left-color: var(--info); } .toast.info .ico { color: var(--info); } .toast-text { min-width: 0; overflow-wrap: anywhere; } .toast.is-leaving { animation: toastOut 0.18s var(--ease) forwards; } @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateX(12px); } } @media (prefers-reduced-motion: reduce) { .busy-overlay, .toast, .toast.is-leaving { animation: none; } .busy-spinner { animation-duration: 2s; } }