/* MAGLICA — tamna tema (tamno.css) Noćna šuma: osnova skoro crno-zelena, staklo tamno zatamnjeno, žar malo svetliji. Učitava se POSLEDNJA i ništa u drugim fajlovima ne dira — gotovo sve je zamena tokena uloga iz general.css. Uključuje se atributom na : data-tema="tamna". Postavlja ga kratka skripta u , pre crtanja strane, da ne bljesne svetla. ZAMKA KOJA SE PONAVLJA: token koji je boja teksta ne sme biti i podloga. Zato puna dugmad, izabran dan, koraci u formi i istaknuta kartica imaju SVOJE tokene (--dugme-puno-*, --dan-izabran-*, --istaknuto-*) — u tamnoj temi puna dugmad postaju svetla pilula sa tamnim tekstom, a da nijedan naslov ne promeni boju. Provereni parovi (podloga → tekst): dugme puno #eef0eb → #0e110f · izabran dan #eef0eb → #0e110f čip/staklo ~#1a221e → #e8ece7 · tost/pilula ~#161e1a → #e8ece7 footer #141c17 → #eef0eb / #a4afa7 · račun ~#161d19 → #e8ece7 žar značka #f0b061 → #221404 */ [data-tema="tamna"] { color-scheme: dark; /* površine */ --pozadina: #0d1210; --pozadina-2: #141b17; --povrsina: #1a221e; --povrsina-2: #212b25; --iza-strane: #000000; /* tekst */ --tekst: #e8ece7; --tekst-tiho: #a4afa7; --tekst-ugaseno: #6c7770; --naslov: #f3f5f1; --ivica: rgb(232 236 231 / 0.1); --ivica-jaka: rgb(232 236 231 / 0.24); /* žar — malo svetliji, da i dalje „gori" na tamnom */ --akcenat: #f0b061; --akcenat-tekst: #f4bd78; --akcenat-sjaj: rgb(240 176 97 / 0.15); --na-akcentu: #221404; /* dugmad — puna postaju SVETLA pilula sa tamnim tekstom */ --dugme-puno-pozadina: #eef0eb; --dugme-puno-tekst: #0e110f; --dugme-puno-senka: 0 0.6rem 1.8rem -0.4rem rgb(0 0 0 / 0.6); --dugme-puno-senka-hover: 0 1.2rem 2.8rem -0.6rem rgb(0 0 0 / 0.7); --dodaj-pozadina: rgb(232 236 231 / 0.09); --dodaj-pozadina-hover: rgb(232 236 231 / 0.15); --dodaj-tekst: #e8ece7; --dodato-pozadina: #a3c6ac; --dodato-tekst: #0c1a11; --izabrano-obod: #a3c6ac; --izabrano-pozadina: rgb(163 198 172 / 0.12); /* kontrole forme */ --polje-pozadina: rgb(255 255 255 / 0.05); --polje-pozadina-fokus: rgb(255 255 255 / 0.08); --prekidac-pozadina: rgb(232 236 231 / 0.2); --prekidac-ukljucen: #6f9e7d; --prekidac-dugme: #ffffff; --stepper-dugme: #2b3630; --greska-tekst: #f7bd92; --greska-pozadina: rgb(240 150 90 / 0.14); --uspeh: #a3c6ac; /* istaknuta kartica i footer — u tamnoj temi SVETLIJI od strane, inače se ne vide kao izdvojene površine */ --istaknuto-pozadina: #1b2620; --istaknuto-tekst: #f3f5f1; --istaknuto-tiho: #b0bcb3; --istaknuto-ivica: rgb(240 176 97 / 0.3); --footer-pozadina: #141c17; --footer-tekst: #eef0eb; --footer-tiho: #a4afa7; --footer-ivica: rgb(238 240 235 / 0.11); --footer-dugme-pozadina: #eef0eb; --footer-dugme-tekst: #0e110f; /* staklo — tamno zatamnjeno */ --staklo-pozadina: rgb(20 28 24 / 0.55); --staklo-pozadina-gusto: rgb(20 28 24 / 0.8); --staklo-traka: rgb(20 28 24 / 0.8); --tab-tekst: #b9c3bc; --staklo-cvrsto: rgb(20 28 24 / 0.97); --staklo-ivica: rgb(255 255 255 / 0.1); --staklo-odsjaj: rgb(255 255 255 / 0.12); --staklo-obod-1: rgb(255 255 255 / 0.3); --staklo-obod-2: rgb(255 255 255 / 0.06); --kartica-vrh: rgb(255 255 255 / 0.065); --kartica-dno: rgb(255 255 255 / 0.03); --kartica-ivica: rgb(255 255 255 / 0.07); --lista-pozadina: rgb(255 255 255 / 0.06); --kartica-na-slici: rgb(18 25 21 / 0.86); --tab-socivo: rgb(255 255 255 / 0.12); --nav-aktivan: rgb(255 255 255 / 0.09); /* senke su na tamnom gotovo nevidljive — jače i crne */ --senka-1: 0 0.1rem 0.2rem rgb(0 0 0 / 0.3), 0 0.8rem 2.4rem -0.8rem rgb(0 0 0 / 0.5); --senka-2: 0 0.2rem 0.6rem rgb(0 0 0 / 0.3), 0 1.6rem 4rem -1.2rem rgb(0 0 0 / 0.62); --senka-3: 0 0.4rem 1.2rem rgb(0 0 0 / 0.35), 0 3.2rem 8rem -1.6rem rgb(0 0 0 / 0.72); --kartica-senka: 0 0.1rem 0.2rem rgb(0 0 0 / 0.25), 0 1.4rem 3.6rem -1.4rem rgb(0 0 0 / 0.55); --fokus: #f4bd78; /* kalendar — izabran dan je svetao krug sa tamnim brojem, traka raspona neprovidna tamnozelena */ --dan-hover: #232e28; --dan-hover-raspon: #35483c; --dan-raspon: #2a3a30; --dan-raspon-tekst: #e8f0e9; --dan-izabran-pozadina: #eef0eb; --dan-izabran-tekst: #0e110f; --dan-zauzet-tekst: #6c7770; --dan-zauzet-srafura: rgb(232 236 231 / 0.15); --dan-proslo-tekst: #48524c; /* hero — tamniji veo, dno se topi u noćnu osnovu */ --veo-rgb: 13 18 16; --hero-podnaslov: #c9d2cb; --magla-sloj: rgb(196 210 201 / 0.1); --zar-sjaj: rgb(240 160 72 / 0.42); --ambijent-1: rgb(38 56 46 / 0.6); --ambijent-2: rgb(22 32 27 / 0.85); --ambijent-3: rgb(240 176 97 / 0.08); /* mapa nema tamnu verziju — obrne se filterom */ --mapa-filter: invert(0.9) hue-rotate(180deg) saturate(0.6); } /* //////////////////////////////////////////////////////////////////// IZUZECI — ono što se ne može opisati tokenom //////////////////////////////////////////////////////////////////// */ /* zatamnjenje iza sheet-a mora da bude jače na tamnoj strani, inače se ne vidi da je sheet iznad sadržaja */ [data-tema="tamna"] .sheet-pozadina { background: rgb(0 0 0 / 0.55); } /* svetao krug izabranog dana baca tamnu senku, ne sivu */ [data-tema="tamna"] .dan.dan--izabran::after { box-shadow: 0 0.4rem 1.4rem -0.2rem rgb(0 0 0 / 0.7); } [data-tema="tamna"] .dan.dan--izabran.dan--danas::after { box-shadow: inset 0 0 0 2px var(--p-zar-duboki), 0 0.4rem 1.4rem -0.2rem rgb(0 0 0 / 0.7); } /* //////////////////////////////////////////////////////////////////// PROMENA TEME — kružno otkrivanje iz dugmeta (View Transitions). JS postavlja --vt-x / --vt-y (px) na ; pseudo-elementi ih nasleđuju. Gde API ne postoji, JS menja temu odmah. //////////////////////////////////////////////////////////////////// */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-new(root) { animation: tema-otkrivanje 720ms var(--ease-ios); } @keyframes tema-otkrivanje { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%)); } } @media (prefers-reduced-motion: reduce) { ::view-transition-new(root) { animation: none; } }