/* ========================================================================== NOV IZGLED - "moderno" (6.8.2026) Napravljen na korisnikov zahtev da vidi kako bi cela aplikacija izgledala u duhu Amelia kontrolne table, ALI BEZ nepovratne izmene: ovo je zaseban sloj koji se pali i gasi prekidacem u meniju naloga (`data-skin="moderno"` na ). Kad je iskljucen, ne ucitava se nista odavde i stari izgled je netaknut - nijedno pravilo iz app.css nije obrisano. ========================================================================== STA CINI RAZLIKU (posmatrano sa Amelia snimaka koje je korisnik poslao): 1. ljubicasti akcenat umesto tamnoplavog, 2. tanke linije i veci radijusi, BEZ senki, 3. mirniji tekst - naslovi manje "vicu" (bez velikih slova i razmaknutih slova), 4. vise vazduha unutar kartica, manje izmedju njih. Sve ide preko promenljivih gde god moze, da se ne duplira raspored iz app.css. ========================================================================== */ :root[data-skin="moderno"] { --bg: #f7f8fa; --surface: #ffffff; --border: #e6e9f0; --text: #14161d; --text-muted: #767d8e; /* Ljubicasta je ono sto Amelia daje "moderan" utisak vise od bilo cega drugog. */ --accent: #6c5ce7; --accent-hover: #5a4bd4; --accent-soft: #eeecfd; --danger: #d63d3d; --danger-soft: #fdecec; --success: #16a34a; --success-soft: #e9f7ef; --warning: #d98324; --warning-soft: #fdf3e6; --neutral: #5b6172; --neutral-soft: #eef0f4; --radius: 14px; --radius-sm: 10px; /* Bez senki - Amelia ceo raspored drzi tankim linijama. */ --shadow: none; } /* ---------- TAMNA PALETA (9.8.2026) ---------- Do danas je "Nov izgled" GASIO tamnu temu: na tamnom OS-u je stranica bila bela a mreza kalendara crna. Uzrok NIJE bio nedostatak vrednosti nego kaskada - blok iznad vazi UVEK (`:root[data-skin="moderno"]`, specificnost 0,2,0), a ovaj fajl se ucitava POSLE app.css, gde tamna tema stoji na `:root[data-theme="dark"]` sa ISTOM specificnoscu. Kod izjednacene specificnosti pobedjuje kasniji fajl, pa je svetla paleta skina gazila tamnu paletu app.css-a. Zato se tamne vrednosti NE MOGU "naslediti" iz app.css - moraju da stoje ovde, uz isti selektor. Tri stanja, isti obrazac koji app.css vec koristi (i jedini koji radi za sva tri): `:root[data-skin="moderno"]` svetla - blok iznad, uvek definisana media (prefers-color-scheme: dark) + :not(light) OS je taman, korisnik nije rucno birao `[data-theme="dark"]` rucni prekidac, nadjacava OS u oba smera Blok se ponavlja doslovno: media upit i obican selektor se ne mogu spojiti u jedno pravilo. USPUT ISPRAVLJEN KVAR U SVETLOJ TEMI: raniji tamni blok je bio pisan BEZ media upita, pa je `:not([data-theme="light"])` pogadjao i na svetlom OS-u - dakle podrazumevano stanje novog izgleda je nosilo BLEDI tamni akcenat (#8b7cf0). Belo slovo na njemu daje kontrast 3.4:1, ispod praga 4.5:1; pravi svetli akcenat (#6c5ce7) daje 4.8:1. Zatvaranjem u media upit svetla tema dobija svoju boju nazad. */ @media (prefers-color-scheme: dark) { :root[data-skin="moderno"]:not([data-theme="light"]) { --bg: #12141b; --surface: #1a1d26; --border: #2b3040; --text: #e8eaf1; --text-muted: #949bad; --accent: #8b7cf0; --accent-hover: #a394f5; /* Puna boja, ne providna: `-soft` tonovi stoje i na `--bg` i na `--surface`, pa bi ista providnost davala dve razlicite boje. Vrednost je birana da akcenat NA njoj ostane citljiv (4.6:1) - `.fb-toggle` i aktivan tab su bas ta kombinacija. */ --accent-soft: #262042; --danger: #ef6f6f; --danger-soft: #3a2126; --success: #4ec97e; --success-soft: #17301f; --warning: #e0a049; --warning-soft: #382a13; --neutral: #99a1b3; --neutral-soft: #242835; } } :root[data-skin="moderno"][data-theme="dark"] { --bg: #12141b; --surface: #1a1d26; --border: #2b3040; --text: #e8eaf1; --text-muted: #949bad; --accent: #8b7cf0; --accent-hover: #a394f5; --accent-soft: #262042; --danger: #ef6f6f; --danger-soft: #3a2126; --success: #4ec97e; --success-soft: #17301f; --warning: #e0a049; --warning-soft: #382a13; --neutral: #99a1b3; --neutral-soft: #242835; } /* ---------- Kartice i paneli ---------- */ :root[data-skin="moderno"] .card, :root[data-skin="moderno"] .report-card, :root[data-skin="moderno"] .stat-card, :root[data-skin="moderno"] .modal-box { box-shadow: none; border-radius: var(--radius); border-color: var(--border); } /* Sklopljiva kartica (`
`) sama nosi razmake u zaglavlju i telu - kad bi dobila i padding kartice, sklopljena bi bila 45px visa od svog zaglavlja (izmereno 1.9.2026). */ :root[data-skin="moderno"] .card:not(.ts-sklop), :root[data-skin="moderno"] .report-card { padding: 1.35rem 1.4rem; } :root[data-skin="moderno"] .stat-card-count { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -0.02em; } /* ---------- Naslovi: mirniji, bez razmaknutih velikih slova ---------- */ :root[data-skin="moderno"] .card h2, :root[data-skin="moderno"] .report-card h2 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; } :root[data-skin="moderno"] .stat-card-label, :root[data-skin="moderno"] .section-title { text-transform: none; letter-spacing: 0; font-weight: 500; } /* ---------- Polja i dugmad ---------- */ :root[data-skin="moderno"] input[type=text], :root[data-skin="moderno"] input[type=email], :root[data-skin="moderno"] input[type=password], :root[data-skin="moderno"] input[type=date], :root[data-skin="moderno"] input[type=time], :root[data-skin="moderno"] input[type=number], :root[data-skin="moderno"] input[type=month], :root[data-skin="moderno"] textarea, :root[data-skin="moderno"] select { border-radius: var(--radius-sm); border-color: var(--border); background: var(--surface); } :root[data-skin="moderno"] input:focus, :root[data-skin="moderno"] select:focus, :root[data-skin="moderno"] textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } :root[data-skin="moderno"] button.primary, :root[data-skin="moderno"] a.btn-primary { border-radius: var(--radius-sm); font-weight: 600; box-shadow: none; } :root[data-skin="moderno"] .btn-secondary, :root[data-skin="moderno"] .btn-cancel { border-radius: var(--radius-sm); } /* ---------- Tabele: linije umesto zebra traka ---------- */ :root[data-skin="moderno"] table th { font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0; } :root[data-skin="moderno"] table td, :root[data-skin="moderno"] table th { border-bottom: 1px solid var(--border); } /* ---------- Navigacija ---------- */ :root[data-skin="moderno"] .topbar { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); } :root[data-skin="moderno"] .topbar h1 { color: var(--text); font-weight: 600; letter-spacing: -0.01em; } :root[data-skin="moderno"] .topbar-actions button, :root[data-skin="moderno"] .topbar-actions a { color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); } /* Izuzetak: dugme za zatvaranje panela. Zajednicko pravilo iznad mu je davalo ivicu boje `--border`, koja na tamnoj podlozi ima odnos svetlina 1,4:1 - prakticno nevidljivo (vlasnik je javio da se X "uopste ne vidi", izmereno 2.9.2026). Ivica u boji znaka daje 6,6:1. */ /* Stavke u "..." meniju: bez okvira i bez sopstvene pozadine, inace izgledaju kao dugmad nakalemljena na meni (zajednicko pravilo iznad vazi za svu dugmad u traci). */ :root[data-skin="moderno"] .topbar-actions a.nav-panel-more-item, :root[data-skin="moderno"] .topbar-actions .nav-panel-more-item { border: none; background: none; color: var(--text); } :root[data-skin="moderno"] .topbar-actions .nav-panel-more-item.opasno { color: var(--danger); } /* Dugmad u redovima panela: zajednicko pravilo za dugmad u traci bi im pojelo boju, a boja je ovde nosilac znacenja (zeleno = posalji opet, crveno = skloni). */ :root[data-skin="moderno"] .topbar-actions .nav-cek-akcija[data-opet] { border-color: var(--success); color: var(--success); } :root[data-skin="moderno"] .topbar-actions .nav-cek-akcija[data-otpisi] { border-color: var(--danger); color: var(--danger); } :root[data-skin="moderno"] .topbar-actions .nav-panel-x { color: var(--accent); background: var(--accent-soft); border: 1.5px solid var(--accent); } :root[data-skin="moderno"] .topbar-actions .nav-panel-x:hover, :root[data-skin="moderno"] .topbar-actions .nav-panel-x:focus-visible { color: var(--danger); border-color: var(--danger); } :root[data-skin="moderno"] .bottom-nav { background: var(--surface); border-top: 1px solid var(--border); } :root[data-skin="moderno"] .bottom-nav a.active { color: var(--accent); } /* ---------- Filter pilule ---------- */ :root[data-skin="moderno"] .fb-chip, :root[data-skin="moderno"] .fb-top .fb-period select { background: var(--accent-soft); border-color: transparent; color: var(--text); font-weight: 500; } :root[data-skin="moderno"] .fb-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } :root[data-skin="moderno"] .fb-toggle { background: var(--accent-soft); border-color: transparent; color: var(--accent); border-radius: var(--radius-sm); } /* ---------- Kartice tabova (admin-tabs) ---------- */ :root[data-skin="moderno"] .admin-tabs a.active { background: var(--accent-soft); color: var(--accent); border-radius: 999px; } /* ---------- Tise zaglavlje tabele (8.8.2026, iz analize Amelie) ---------- Znak za sortiranje je prigusen i drzi se po strani dok se ne zatreba. Na uredjajima SA MISEM se pojavljuje na prelaz; na dodirnim ostaje stalno vidljiv, jer tamo nema prelaza pa bi inace bio nedostupan - isti razlog zbog kog Amelia hover pravila drzi u `(hover: hover)`. */ :root[data-skin="moderno"] .dt-sort-arrow { font-size: 0.8rem; opacity: 0.28; margin-left: 0.3rem; transition: opacity 0.2s, color 0.2s; } @media (hover: hover) and (pointer: fine) { :root[data-skin="moderno"] th:not(.dt-sorted) .dt-sort-arrow { opacity: 0; } :root[data-skin="moderno"] th:hover .dt-sort-arrow { opacity: 0.5; } } :root[data-skin="moderno"] th.dt-sorted .dt-sort-arrow { opacity: 1; color: var(--accent); } :root[data-skin="moderno"] th.dt-sorted { color: var(--accent); } /* ---------- Dugmad u zaglavlju kalendara (8.8.2026, vlasnik: "te dugmice prilagodio novom stilu") Bibliotekina dugmad (`Danas`, `‹ ›`, `Dan/3 dana/Nedelja/Mesec`) su do sada nosila svoj podrazumevani izgled i vidno su odudarala od ostatka novog izgleda - posebno otkad stoje u istom redu sa nasom pilulom filtera. Vrednosti su iste kao za `.dt-btn`, da red deluje kao jedna celina. `:is(#Calendar, #cal_zaglavlje)` OD 9.8.2026: istog dana je traka na racunaru premestena IZNAD trake sa danima, dakle iz `#Calendar` u `#cal_zaglavlje` - a ova pravila su ostala vezana samo za `#Calendar` i time postala MRTVA bas na racunaru, gde se traka i gleda. Kvar se nije video u svetloj temi (bibliotekina podrazumevana dugmad su bela na beloj kartici, pa razlika nije upadala u oci), nego tek u tamnoj. `calendar.php` je isti spisak selektora vec prosirio za svoja pravila; ovaj fajl je zaostao. Ako se traka ikad premesti jos jednom, oba mesta idu zajedno. */ :root[data-skin="moderno"] :is(#Calendar, #cal_zaglavlje) .ec-button { border-radius: var(--radius-sm); border-color: var(--border); background: var(--surface); color: var(--text); font-weight: 500; padding: 0.42rem 0.7rem; transition: border-color 0.2s, background-color 0.2s, color 0.2s; } :root[data-skin="moderno"] :is(#Calendar, #cal_zaglavlje) .ec-button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } /* Aktivan prikaz je MEKA pilula u boji akcenta, ne puna - puna bi u redu sa cetiri dugmeta povukla pogled jace nego "+" koje je jedina prava radnja u tom redu. */ :root[data-skin="moderno"] :is(#Calendar, #cal_zaglavlje) .ec-button.ec-active { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; } :root[data-skin="moderno"] :is(#Calendar, #cal_zaglavlje) .ec-button:disabled { opacity: 0.45; } /* Grupa prikaza kao jedna celina, bez dvostrukih ivica izmedju dugmadi. */ :root[data-skin="moderno"] :is(#Calendar, #cal_zaglavlje) .ec-button-group { gap: 0.25rem; } /* ---------- IZUZETAK: polja koja su GOLA unutar svog omota (8.8.2026) ---------- Vlasnik je prijavio da u sivoj piluli pretrage stoji beo pravougaonik "koji se ne uklapa", i to SAMO na novom izgledu. Uzrok je pravilo iznad, koje svakom `input`-u daje `background: surface`. Na vecini mesta je to tacno, ali na dva mesta polje NIJE samostalno nego je go unutar omota koji vec nosi ivicu, podlogu i ikonicu: `.dt-search input` - pretraga u tabelama (omot je siva pilula) `.dr-txt` - dva datuma u biraču perioda (omot je `.dr-field`) Tamo bela podloga crta "kutiju u kutiji", a fokus-prsten se crta OKO UNUTRASNJEG polja, unutar vec postojeceg okvira. Zato podloga i prsten ovde idu na OMOT, a polje ostaje providno. Selektor je namerno sa `[type="text"]` - time je specificniji od opsteg pravila iznad, pa ne zavisi od redosleda u fajlu (koji se pri sledecem dopisivanju lako promeni). */ :root[data-skin="moderno"] .dt-search input[type="text"], :root[data-skin="moderno"] .dr-field input[type="text"] { background: transparent; border: none; box-shadow: none; } :root[data-skin="moderno"] .dt-search input[type="text"]:focus, :root[data-skin="moderno"] .dr-field input[type="text"]:focus { box-shadow: none; border-color: transparent; } /* Prsten na fokus se seli na omot - da izgleda isto kao kod samostalnih polja. */ :root[data-skin="moderno"] .dt-search:focus-within, :root[data-skin="moderno"] .dr-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Izmereni raspored (radijusi, vlas-ivice, tezine, prelazi) je 8.8.2026 PREMESTEN u app.css i vazi PODRAZUMEVANO - vlasnik je trazio "na nivou app, ne samo na filtere". Ovde ostaje samo ono sto je stvar ukusa: paleta i akcenat. */