diff --git a/web/static/css/main.css b/web/static/css/main.css index ba99dfc..7a9bac4 100644 --- a/web/static/css/main.css +++ b/web/static/css/main.css @@ -723,6 +723,35 @@ select { color: var(--greska); } +/* toast obaveštenja (npr. povratna informacija posle upload-a) */ +.toast { + position: fixed; + bottom: 24px; + right: 24px; + z-index: 9999; + display: flex; + align-items: center; + gap: 10px; + padding: 12px 18px; + border-radius: 10px; + font-size: 13px; + font-weight: 500; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + animation: toastIn 0.3s ease forwards; + max-width: 340px; +} +.toast-greska { background: #fef2f2; color: #dc2626; border: 0.5px solid #fca5a5; } +.toast-uspeh { background: #f0fdf4; color: #16a34a; border: 0.5px solid #86efac; } +.toast.nestaje { animation: toastOut 0.3s ease forwards; } +@keyframes toastIn { + from { opacity: 0; transform: translateY(12px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes toastOut { + from { opacity: 1; transform: translateY(0); } + to { opacity: 0; transform: translateY(12px); } +} + /* ============================================================ Komponente forme i tabela — zamena za ponavljane inline stilove. Cilj: čitljiviji template, jedno mesto istine za izgled. diff --git a/web/templates/stranice/podesavanja.html b/web/templates/stranice/podesavanja.html index 653a202..f3d48ce 100644 --- a/web/templates/stranice/podesavanja.html +++ b/web/templates/stranice/podesavanja.html @@ -11,12 +11,6 @@ .custom-file-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--pozadina); border: 0.5px solid var(--ivica); border-radius: 8px; font-size: 13px; color: var(--tekst-sporedni); cursor: pointer; transition: border-color 0.2s; min-width: 0; overflow: hidden; } .custom-file-label:hover { border-color: var(--sb-akcent); color: var(--tekst-glavni); } .custom-file-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; font-size: 13px; font-weight: 500; box-shadow: 0 4px 20px rgba(0,0,0,0.15); animation: toastIn 0.3s ease forwards; max-width: 340px; } - .toast-greska { background: #fef2f2; color: #dc2626; border: 0.5px solid #fca5a5; } - .toast-uspeh { background: #f0fdf4; color: #16a34a; border: 0.5px solid #86efac; } - @keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } - @keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } } - .toast.nestaje { animation: toastOut 0.3s ease forwards; } {{end}} diff --git a/web/templates/stranice/podesavanja_opste.html b/web/templates/stranice/podesavanja_opste.html index 1931284..a554917 100644 --- a/web/templates/stranice/podesavanja_opste.html +++ b/web/templates/stranice/podesavanja_opste.html @@ -6,13 +6,6 @@ {{end}}