/* ============================================================================= ANIĆ CRM — TAMNA TEMA ZASEBAN SLOJ. Ne dira `brand.css` ni `crm.css` — samo nadglasava njihove tokene unutar `[data-tema="tamno"]`. Svijetla je zadana i ostaje netaknuta; ako se ovaj `` ukloni, sve radi kao prije. ⚠ PRAVILO OVOG FILEA: ovdje se mijenjaju ISKLJUČIVO VRIJEDNOSTI TOKENA. Nijedno pravilo komponente (`.card { … }`) ne smije ući. Kad se komponenta jednom izmijeni, obje je teme moraju slijediti same od sebe — inače se za pola godine razilaze i tamna postane groblje zaboravljenih iznimaka. Jedina iznimka je zadnji odjeljak: tokeni koji pripadaju JEDNOM EKRANU (karta) i stiliziranje Leafleta, koji dolazi izvana i nema naše tokene. Oboje je jasno odvojeno i imenovano. Ako neki ekran u tamnoj temi izgleda krivo, to znači da negdje stoji tvrdi hex umjesto tokena. Popravlja se ONDJE, ne ovdje. --------------------------------------------------------------------------- PRAVILA KOJIH SE DRŽI (i zašto) 1. NIKAD ČISTA CRNA. Baza je #08090B, ne #000. Na OLED crnoj bijeli tekst „gori" (halation) i rubovi ploha nestaju — sučelje izgleda jeftino. 2. PODLOGE SU NEUTRALNE, BOJA JE REZERVIRANA ZA PODATKE. Raniji niz ploha bio je indigo natrunjen (#0B0D13 / #12141C / #191C26) i natjecao se sa serijama grafova. Sada su plohe gotovo bez tona (razlika kanala ≤ 5), pa jantar, mint i indigo na njima dobiju punu snagu. 3. DUBINA IDE SVJETLINOM I RUBOM, NE SJENOM. Sjena se na tamnom ne vidi. Koraci su namjerno mali (1,05–1,19:1) — plohu odvaja rub, ne skok svjetline. Zato je `--line` OBAVEZAN na svakoj kartici. 4. HERO NIJE OBOJENA PLOHA NEGO SPREMNIK. Prije je bio indigo gradient koji se morao dizati da nadvisi kartice, a dizanje je obaralo prigušeni tekst na njemu. Sada je ploha iste obitelji (#1A1B1E), a hijerarhiju nose kartice u njemu. Nema više borbe između naglaska i čitljivosti. 5. TEKST NIJE ČISTO BIJEL. #EDEDEF umjesto #FFF, iz istog razloga kao t. 1. 6. AKCENT JE JANTAR, I NA NJEMU JE TEKST TAMAN. #E5B166 daje 8,20:1 na kartici; tamni tekst #221806 na njemu daje 9,0:1. 7. STATUSNE TINTE SU TAMNE, TEKST SVIJETAO. Obrnuto od svijetle teme. 8. SEKVENCIJALNI NIZ `--viz-100…700` JE NEUTRALNO SIV I OKRENUT: na svijetloj temi 100 je najsvjetliji (korito trake), na tamnoj mora biti najtamniji, inače korito zasvijetli jače od ispune. Svaki par je IZMJEREN. Najniži tekstualni odnos je 4,80:1 (`--fg-faint` na kartici); najniži oblikovni 3,21:1 (stupac mikro-grafa). ============================================================================= */ [data-tema="tamno"] { /* --- Semantički aliasi ----------------------------------------------------- */ --fg: #EDEDEF; /* 13,6:1 na kartici */ --fg-muted: #A0A1A6; /* 6,2:1 na kartici */ --accent: #E5B166; /* 8,2:1 na kartici */ --accent-hi: #F2C078; --on-accent: #221806; /* 9,0:1 na akcentu — na svijetlom akcentu tekst je taman */ --focus: #E5B166; --line: #303237; /* 1,22:1 prema kartici, 1,45:1 prema radnoj plohi */ /* --- Plohe: neutralne, dubina svjetlinom i rubom ---------------------------- */ --platno: #08090B; /* iza plohe aplikacije, najdublje */ --canvas: #101115; /* radna ploha */ --surface: #212224; /* kartica */ --surface-2: #292A2E; /* zaglavlje tablice, tiša ploha u kartici — 1,12:1 */ --surface-sunk:#17181B; /* utonulo: polja, korita traka */ --line-soft: #26282C; --line-strong: #3A3C41; /* --- Vrijednosti izvučene iz komponenti ------------------------------------ */ --topbar-bg: rgba(16, 17, 21, 0.86); --field-bg: var(--surface-sunk); /* utonulo polje je TAMNIJE od kartice */ --switch-off: #3A3C41; --skeleton-sjaj: rgba(255, 255, 255, 0.05); --btn-sjena: none; /* sjena na tamnom ne radi ništa */ --app-sjena: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 60px rgba(0, 0, 0, 0.55); --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3); --card-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.55), 0 14px 34px rgba(0, 0, 0, 0.4); /* --- Okvir i hero ----------------------------------------------------------- Oboje su sada plohe, ne obojeni paneli. Izbornik je za jedan korak svjetliji od radne plohe (1,05:1) i odvaja se vlasi; hero je za dva (1,10:1) i drži kartice u sebi. Tokeni ostaju odvojeni jer se na svijetloj temi i dalje razlikuju od radne plohe kao indigo ploče. */ --shell-grad: #16171B; --hero-grad: #1A1B1E; --shell-line: rgba(255, 255, 255, 0.06); --shell-ink: #EDEDEF; /* 15,3:1 na izborniku */ --shell-muted: #A0A1A6; /* 7,0:1 na izborniku */ --shell-faint: #8B8D93; /* 5,4:1 — naslov grupe */ --shell-glow: #E5B166; /* ikona aktivne stavke, oznaka „CRM" uz logotip */ /* Staklo na neutralnoj podlozi treba biti TIŠE nego na indigu: ploha ispod je već blizu kartici, pa jaka neprozirnost daje sivi mulj. Ovako staklena kartica u heroju padne točno na #242528 — na dlaku od obične kartice. */ --glass: rgba(255, 255, 255, 0.028); --glass-strong: rgba(255, 255, 255, 0.045); --glass-line: rgba(255, 255, 255, 0.09); /* Stupci mikro-grafova. Sivi, a zadnji mjesec u jantaru: „gdje smo sad" je sada promjena TONA, ne samo svjetline, pa se čita iz oka. Referentna slika ima stupce na #636363 — to je 2,65:1 i pada ispod praga 3:1 za grafički element, pa je ovdje jedan korak svjetlije. */ --hero-stupac: #6E7075; /* 3,2:1 na kartici */ --hero-stupac-sad: #E5B166; /* 8,2:1 */ /* „Nenaplaćeno" je jedini od četiri mikro-grafa čija os nije vrijeme nego starost duga. Zadnji stupac ondje ne znači „tekući mjesec" nego „90+ dana", pa ne smije biti u istoj boji kao u ostala tri — ista boja, suprotno značenje, u istoj mreži od četiri polja. */ --hero-stupac-alarm: var(--risk); /* 7,5:1 na heroju */ --glow-aktivno: rgba(229, 177, 102, 0.45); /* sjaj prati akcent, ne staru plavu */ /* Hero je sada ploha, ne obojeni panel: aura se gasi (indigo bi probijao kroz neutralnu podlogu), sjena postaje crna umjesto indigo, tekst nije čisto bijel. */ --hero-ink: #EDEDEF; --hero-aura: none; --hero-sjena: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.35); /* --- Statusi: tamna tinta, svijetao tekst (obrnuto od svijetle teme) -------- */ --ok: #6FD3A6; --ok-bg: #13241E; --ok-line: #1E3A30; /* 8,78:1 */ --warn: #E8B761; --warn-bg: #29200C; --warn-line: #43351A; /* 8,62:1 */ --risk: #F09189; --risk-bg: #2A1618; --risk-line: #452428; /* 7,39:1 */ --info: #9AA4F5; --info-bg: #191B2C; --info-line: #2A2E4A; /* 7,21:1 */ --idle: #A0A1A6; --idle-bg: #232427; --idle-line: #313236; /* 6,02:1 */ /* Brojka na oznaci je bijela i mora držati 4,5:1. #DA2E33 daje 4,75:1. */ --hot: #DA2E33; /* Oznake su na tamnoj temi SVIJETLE (akcent, status), pa tekst na njima postaje taman — isto pravilo kao --on-accent. */ --na-oznaci: #221806; /* --- Grafovi --------------------------------------------------------------- Trojka tržišta ostaje na svojim tonovima iz svijetle teme (indigo / zelena / jantar), samo posvijetljena: kategorijalna boja ne smije mijenjati ton između tema, inače isti podatak izgleda kao drugi podatak. Sekvencijalni niz ide u tonu akcenta — jantar od tamne bronce do svijetlog meda. Neutralno siv niz je isproban i pao je na prvom pogledu: prsten faza pipelinea postao je pet nijansi sive i izgledao mrtvo. Ordinalna ljestvica (faze lijevka) ionako traži jedan ton, ne šarenilo. Prsten koristi 300–700, pa oni svi drže ≥ 3:1 prema kartici. */ --viz-hr: #8FA8F5; /* 6,9:1 */ --viz-bih: #63D2A4; /* 8,6:1 */ --viz-srb: #D9A94A; /* 7,6:1 */ --viz-100: #2E2A22; --viz-200: #5C4626; --viz-300: #8A6832; /* 1,11 · 1,79 · 3,11 */ --viz-400: #A87C3C; --viz-500: #C29450; --viz-600: #D9AC65; --viz-700: #EFCB8E; --viz-grid: #26282C; --viz-axis: #74767B; /* --- Djelatnosti ------------------------------------------------------------ TUBÒ ostaje plava — isti par kao na svijetloj temi. Referentna slika stavlja TUBÒ na mint #6CE8B6 (10,5:1), što izgleda dobro, ali je u sukobu s pravilom projekta „TUBÒ akcent je plava", a mint je u CRM-u već zauzet za --ok i za tržište BiH. Zamjena je jedan redak ako se pravilo promijeni. Građevina je u tamnoj temi PRIGUŠENA bronca, ne jantar. Razlog je mjeren: akcent #E5B166 i stara vrijednost #D3A35E dijele ton (35°) i razlikuju se samo u svjetlini — međusobni kontrast 1,18:1. To nisu dvije boje nego jedna u dvije svjetline, a stoje jedna do druge (traka u heroju ispod jantarnog gumba; točkica djelatnosti u istoj kartici s jantarnom poveznicom). #B39371 zadržava ton (31°) a prepolovi zasićenost (30 % prema 71 %), pa je Građevina i dalje bronca, ali jantar ostaje signal radnje. Na svijetloj temi ostaje #C79355 — ondje je akcent indigo i sudara nema. */ --dj-grad: #B39371; /* 5,6:1 na kartici · 6,0:1 na heroju */ --dj-tubo: #7FA8EE; /* 6,6:1 */ --dj-grad-bg: #221B12; /* ista dubina kao --info-bg (1,07:1 prema kartici) */ --dj-grad-ink: #D8B98F; /* 9,1:1 na tinti */ /* Hero više nije indigo ploča, pa segmentu na njemu ne treba posvijetljena azurna — ide ista boja kao svugdje drugdje, da TUBÒ ima jednu boju. */ --split-tubo: var(--dj-tubo); color-scheme: dark; } /* ============================================================================= IZNIMKE — jedini dio s odabirom elementa, i to samo ondje gdje token ne postoji ============================================================================= */ /* 1. Karta: `--mapa-*` su tokeni JEDNOG ekrana (`mapa.html`), pa se prebacuju ovdje. I dalje su vrijednosti, ne pravila izgleda. */ [data-tema="tamno"] .mapa { --mapa-more: #0D0E11; --mapa-kopno: #1C1D21; --mapa-susjed: #16171A; --mapa-obala: #4A4E57; --mapa-granica: #2E3035; } /* 2. Leaflet dolazi izvana i nema naše tokene, pa mu se boje moraju zadati. Pločice se NE invertiraju filtrom — invert pretvara zelenilo u ružičasto i karta izgleda pokvareno; umjesto toga `mapa.html` traži tamni set. */ [data-tema="tamno"] .leaflet-control-attribution { background: rgba(16, 17, 21, 0.82) !important; } /* Leafletov vlastiti CSS je specifičniji od našeg, pa `background` traži `!important` — inače znak „−" ostane svijetao na svijetloj podlozi (1,10:1). */ [data-tema="tamno"] .leaflet-bar a, [data-tema="tamno"] .leaflet-control-zoom a { background: var(--surface) !important; color: var(--fg) !important; border-color: var(--line-soft) !important; } [data-tema="tamno"] .leaflet-bar a:hover { background: var(--surface-2) !important; } /* 3. Prijelaz teme: kratka i tiha izmjena. */ [data-tema] .app, [data-tema] .card, [data-tema] .kpistrip, [data-tema] .sidebar { transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out); } @media (prefers-reduced-motion: reduce) { [data-tema] .app, [data-tema] .card, [data-tema] .kpistrip, [data-tema] .sidebar { transition: none; } }