From daaa145545d161d702e301008659d5522f10d8a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dalibor=20Markovi=C4=87?= Date: Fri, 12 Jun 2026 01:01:10 +0200 Subject: [PATCH] =?UTF-8?q?refactor(css):=20preme=C5=A1teni=20stilovi=20za?= =?UTF-8?q?=20dozvole=20u=20main.css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stilovi za tabelu dozvola i zaglavlja modula premešteni iz inline bloka (dodatni-css) u globalni main.css, jer HTMX navigacija odbacuje pa oni nisu bili primenjeni nakon prelaska na stranicu. Istovremeno su unapređeni: animacija redova, staklena providna traka sa akcentnom levom ivicom i prilagođeni checkbox-ovi. --- web/static/css/main.css | 33 +++++++++++++++++++++++ web/templates/stranice/admin_dozvole.html | 17 +++++++++++- 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/web/static/css/main.css b/web/static/css/main.css index 7e16284..4ecfdb8 100644 --- a/web/static/css/main.css +++ b/web/static/css/main.css @@ -753,6 +753,39 @@ select { color: var(--tekst-sporedni); } +/* ============================================================ + Stranica Dozvole (matrica) — stilovi su ovde (a ne u stranice) + jer HTMX navigacija (hx-select="#glavni-sadrzaj") odbacuje , + pa stil iz dodatni-css bloka ne bi važio dok se ne osveži stranica. + main.css ostaje u headu kroz HTMX navigaciju → uvek se primenjuje. + ============================================================ */ +.dozvole-tabela tbody tr:nth-child(1) { animation-delay: 0.04s; } +.dozvole-tabela tbody tr:nth-child(2) { animation-delay: 0.08s; } +.dozvole-tabela tbody tr:nth-child(3) { animation-delay: 0.12s; } +.dozvole-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; } +.dozvole-tabela tbody tr:nth-child(5) { animation-delay: 0.20s; } + +/* zaglavlja modula — providna staklena traka sa akcentnom levom ivicom. + Bez sopstvenog backdrop-filter-a: kartica već zamućuje pozadinu, pa traka + kroz svoju providnost pokazuje tu zamućenu sliku tonirano u akcent. + Providna je, ali nešto manje od kartice, da se jasno ističe kao traka. */ +.matrica-modul td { + padding: 9px 16px; + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--tekst-jak); + background: color-mix(in srgb, var(--sb-akcent) 26%, transparent); + border-top: 0.5px solid var(--ivica); + border-bottom: 0.5px solid var(--ivica); + border-left: 3px solid var(--sb-akcent); +} + +.matrica-checkbox { text-align: center; padding: 8px 16px; } +.matrica-checkbox input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--sb-akcent); } +.matrica-checkbox input[type=checkbox]:disabled { cursor: default; opacity: 0.5; } + /* overlay za mobilni — tamni sloj iza sidebara */ .sidebar-overlay { display: none; diff --git a/web/templates/stranice/admin_dozvole.html b/web/templates/stranice/admin_dozvole.html index 13d8ca9..27019c5 100644 --- a/web/templates/stranice/admin_dozvole.html +++ b/web/templates/stranice/admin_dozvole.html @@ -10,7 +10,22 @@ .dozvole-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; } .dozvole-tabela tbody tr:nth-child(5) { animation-delay: 0.20s; } - .matrica-modul td { padding: 8px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tekst-sporedni); background: var(--pozadina); border-top: 0.5px solid var(--ivica); } + /* zaglavlja modula — providna staklena traka sa akcentnom levom ivicom. + Bez sopstvenog backdrop-filter-a: kartica već zamućuje pozadinu, pa traka + kroz svoju providnost pokazuje tu zamućenu sliku tonirano u akcent. + Providna je, ali nešto manje od kartice, da se jasno ističe kao traka. */ + .matrica-modul td { + padding: 9px 16px; + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--tekst-jak); + background: color-mix(in srgb, var(--sb-akcent) 26%, transparent); + border-top: 0.5px solid var(--ivica); + border-bottom: 0.5px solid var(--ivica); + border-left: 3px solid var(--sb-akcent); + } .matrica-checkbox { text-align: center; padding: 8px 16px; } .matrica-checkbox input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--sb-akcent); }