Dasko/GoNtech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(css): premešteni stilovi za dozvole u main.css

Browse Source 
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.
This commit is contained in:
Dalibor Marković
2026-06-12 01:01:10 +02:00
parent 726a1dbbf7
commit daaa145545
2 changed files with 49 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/main.css
+33
View File
@@ -753,6 +753,39 @@ select {
color: var(--tekst-sporedni); color: var(--tekst-sporedni);
} }
/* ============================================================
Stranica Dozvole (matrica) — stilovi su ovde (a ne u <head> stranice)
jer HTMX navigacija (hx-select="#glavni-sadrzaj") odbacuje <head>,
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 */ /* overlay za mobilni — tamni sloj iza sidebara */
.sidebar-overlay { .sidebar-overlay {
display: none; display: none;
web/templates/stranice/admin_dozvole.html
+16 -1
View File
@@ -10,7 +10,22 @@
.dozvole-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; } .dozvole-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; }
.dozvole-tabela tbody tr:nth-child(5) { animation-delay: 0.20s; } .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 { 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] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--sb-akcent); }