/* ==================================================================================== NIT Software Solutions © 2026 — Sva prava zadržana. Projekat: NITErp Fajl: NITErp.Client/wwwroot/css/erp-tema.css Modul: UI / Teme Opis: Jedini izvor boja, razmaka i veličina za ceo frontend (UI standard §2). Tri teme × svetla/tamna, gustina i veličina teksta — sve kao CSS promenljive koje TemaService bira data-atributima na : data-erp-tema indigo | okean | smaragd (podrazumevano: okean) data-bs-theme light | dark (postojeći Bootstrap atribut) data-erp-gustina komforno | kompaktno | zbijeno (podrazumevano: kompaktno) data-erp-font manji | normal | veci (podrazumevano: normal) Akcenat boju korisnik menja tako što TemaService upiše --primary (i --primary-rgb) inline na — SVE izvedene boje slede same, kroz color-mix(). Zato nijedna komponenta ne sme imati gotov ton (pravilo iz app.css od 17.08.2026): ili promenljiva odavde, ili prozirnost preko nje. Nastalo: 20.08.2026, faza 1 UI standarda. Referentne vrednosti: docs/05-UI/Mockup_v2. ==================================================================================== */ /* ------------------------------------------------------------------------------------ INTER — lokalno, ne sa CDN-a (isti razlog kao Bootstrap: aplikacija ne sme zavisiti od interneta pri startu). Varijabilni font: jedan fajl pokriva težine 100–900. latin-ext je obavezan — bez njega č, ć, đ, š, ž padaju na rezervni font. Izvor: @fontsource-variable/inter 5.3.0. ------------------------------------------------------------------------------------ */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/inter/inter-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ------------------------------------------------------------------------------------ OSNOVA — važi za sve teme. ------------------------------------------------------------------------------------ */ :root { --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --radius: 10px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --shadow-lg: 0 12px 40px rgba(16, 24, 40, .18); } /* Gustina: JEDNA grupa promenljivih vuče grid, kontrole i razmake (standard §2). Podrazumevano „kompaktno" — odluka iz §11. */ :root { --row-py: 5px; --cell-px: 11px; --grid-fs: 12.8px; --ctrl-h: 31px; } [data-erp-gustina="komforno"] { --row-py: 10px; --cell-px: 14px; --grid-fs: 13.5px; --ctrl-h: 36px; } [data-erp-gustina="zbijeno"] { --row-py: 2px; --cell-px: 9px; --grid-fs: 12.2px; --ctrl-h: 27px; } /* Veličina teksta — korisnički izbor, ne dira rem skalu (Syncfusion računa u rem). */ :root { --base-fs: 14px; } [data-erp-font="manji"] { --base-fs: 13px; } [data-erp-font="veci"] { --base-fs: 15px; } /* ------------------------------------------------------------------------------------ PALETE — tri teme × svetla/tamna. Podrazumevana je OKEAN SVETLA (odluka 1 iz §11): :root nosi okean svetlu, [data-bs-theme="dark"] okean tamnu, pa korisnik bez ijednog podešavanja (i korisnik sa starim „Svetla"/„Tamna" izborom) dobija okean. ⚠️ Redosled blokova je deo logike: tema-blok (jedan atribut) mora stajati POSLE podrazumevanog tamnog bloka da bi ga pobedio u svetlom režimu, a tema+tamna (dva atributa) pobeđuje specifičnošću. Ne premeštati. ------------------------------------------------------------------------------------ */ :root { --primary: #1570ef; --primary-rgb: 21, 112, 239; --bg: #f5f7fa; --surface: #fff; --surface-2: #f8fafc; --text: #101828; --muted: #667085; --border: #e4e7ec; --border-strong: #cfd4dc; --sidebar-bg: #0b1f3a; --sidebar-text: #c9d5e8; --sidebar-muted: #7286a3; --sidebar-hover: #132c4e; --sidebar-border: #16345c; --ok: #039855; --ok-soft: #ecfdf3; --warn: #b54708; --warn-soft: #fffaeb; --err: #d92d20; --err-soft: #fef3f2; --info: #0e7090; --info-soft: #f0f9ff; --login-panel: linear-gradient(150deg, #081426 0%, #0b1f3a 50%, #1570ef 130%); } [data-bs-theme="dark"] { --primary: #53a4f7; --primary-rgb: 83, 164, 247; --bg: #0b1220; --surface: #111b2e; --surface-2: #16223a; --text: #e3e9f2; --muted: #8195b3; --border: #1e2c46; --border-strong: #2b3d5e; --sidebar-bg: #081426; --sidebar-text: #c9d5e8; --sidebar-muted: #5f7592; --sidebar-hover: #0f2038; --sidebar-border: #13233d; --ok: #32d583; --ok-soft: #0a2b1c; --warn: #fdb022; --warn-soft: #2d2208; --err: #f97066; --err-soft: #301513; --info: #36bffa; --info-soft: #0b2534; --login-panel: linear-gradient(150deg, #050d1a 0%, #0b1f3a 50%, #1570ef 140%); } [data-erp-tema="indigo"] { --primary: #4f46e5; --primary-rgb: 79, 70, 229; --bg: #f4f5f7; --surface: #fff; --surface-2: #f9fafb; --text: #111827; --muted: #6b7280; --border: #e5e7eb; --border-strong: #d1d5db; --sidebar-bg: #ffffff; --sidebar-text: #374151; --sidebar-muted: #9ca3af; --sidebar-hover: #f3f4f6; --sidebar-border: #e5e7eb; --ok: #059669; --ok-soft: #ecfdf5; --warn: #b45309; --warn-soft: #fffbeb; --err: #dc2626; --err-soft: #fef2f2; --info: #0369a1; --info-soft: #f0f9ff; --login-panel: linear-gradient(145deg, #312e81 0%, #4f46e5 55%, #7c6cf0 100%); } [data-erp-tema="indigo"][data-bs-theme="dark"] { --primary: #818cf8; --primary-rgb: 129, 140, 248; --bg: #0f1115; --surface: #181b22; --surface-2: #1e222b; --text: #e6e8ee; --muted: #8b93a3; --border: #262b36; --border-strong: #343b49; --sidebar-bg: #14161c; --sidebar-text: #c3c8d4; --sidebar-muted: #6d7484; --sidebar-hover: #1e222b; --sidebar-border: #22262f; --ok: #34d399; --ok-soft: #0c2b22; --warn: #fbbf24; --warn-soft: #2d230a; --err: #f87171; --err-soft: #2f1517; --info: #38bdf8; --info-soft: #0c2434; --login-panel: linear-gradient(145deg, #1e1b4b 0%, #312e81 55%, #4f46e5 100%); } [data-erp-tema="smaragd"] { --primary: #0f766e; --primary-rgb: 15, 118, 110; --bg: #f6f8f7; --surface: #fff; --surface-2: #f8faf9; --text: #132420; --muted: #5f6f6a; --border: #e3e8e6; --border-strong: #cbd5d1; --sidebar-bg: #08302b; --sidebar-text: #c6dbd6; --sidebar-muted: #6e948c; --sidebar-hover: #0d3d37; --sidebar-border: #11473f; --ok: #0f9d58; --ok-soft: #ecfdf3; --warn: #b45309; --warn-soft: #fffbeb; --err: #dc2626; --err-soft: #fef2f2; --info: #0369a1; --info-soft: #f0f9ff; --login-panel: linear-gradient(150deg, #052e2a 0%, #0f766e 65%, #14b8a6 130%); } [data-erp-tema="smaragd"][data-bs-theme="dark"] { --primary: #2dd4bf; --primary-rgb: 45, 212, 191; --bg: #0c1211; --surface: #131a18; --surface-2: #18211f; --text: #e2eae7; --muted: #87968f; --border: #22302c; --border-strong: #31423d; --sidebar-bg: #0a1f1c; --sidebar-text: #c6dbd6; --sidebar-muted: #5f7d75; --sidebar-hover: #102b27; --sidebar-border: #143028; --ok: #34d399; --ok-soft: #0c2b22; --warn: #fbbf24; --warn-soft: #2d230a; --err: #f87171; --err-soft: #2f1517; --info: #38bdf8; --info-soft: #0c2434; --login-panel: linear-gradient(150deg, #04211e 0%, #0f766e 75%, #14b8a6 140%); } /* ------------------------------------------------------------------------------------ IZVEDENE BOJE — akcenat menja SAMO --primary/--primary-rgb, sve ispod sledi samo. ------------------------------------------------------------------------------------ */ :root { --primary-hover: color-mix(in srgb, var(--primary) 85%, #000); --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface)); --primary-soft-text: color-mix(in srgb, var(--primary) 80%, var(--text)); --sidebar-active: color-mix(in srgb, var(--primary) 18%, var(--sidebar-bg)); --sidebar-active-text: color-mix(in srgb, var(--primary) 55%, #fff); } /* Na tamnoj se hover svetli umesto da tamni — tamnjenje bi ga utopilo u pozadinu. */ [data-bs-theme="dark"] { --primary-hover: color-mix(in srgb, var(--primary) 80%, #fff); } /* ------------------------------------------------------------------------------------ MOST KA BOOTSTRAP-u — tokeni prepisuju Bootstrap promenljive, pa postojeće klase (bg-body, border, text-body-secondary, btn-primary…) automatski prate temu. [data-bs-theme] ima istu specifičnost kao Bootstrap-ov [data-bs-theme="dark"], a ovaj fajl se učitava posle — zato pobeđuje u oba režima. ------------------------------------------------------------------------------------ */ :root, [data-bs-theme] { --bs-body-font-family: var(--font); --bs-body-font-size: var(--base-fs); --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-emphasis-color: var(--text); --bs-secondary-color: var(--muted); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--border); --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb); --bs-link-color: var(--primary); --bs-link-color-rgb: var(--primary-rgb); --bs-link-hover-color: var(--primary-hover); --bs-focus-ring-color: rgba(var(--primary-rgb), .25); --bs-success: var(--ok); --bs-danger: var(--err); --bs-warning: var(--warn); --bs-info: var(--info); } /* Bootstrap dugmad ne čitaju --bs-primary nego svoje --bs-btn-* upisane pri kompajliranju — zato se premošćuju ovde, jednom za sve. */ .btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); --bs-btn-focus-shadow-rgb: var(--primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary); --bs-btn-disabled-color: var(--primary); --bs-btn-disabled-border-color: var(--primary); --bs-btn-focus-shadow-rgb: var(--primary-rgb); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: color-mix(in srgb, var(--primary) 50%, var(--surface)); box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .2); } /* ------------------------------------------------------------------------------------ MOST KA SYNCFUSION-u — bootstrap5.3 tema (svetla i tamna) čita --color-sf-* promenljive sa :root, pa ih tokeni prepisuju istim mehanizmom kao Bootstrap. ⚠️ Radi tek kad TemaService/App.razor učitavaju bootstrap5.3.css umesto bootstrap5.css — stariji fajl je kompajliran bez promenljivih (standard §2). ------------------------------------------------------------------------------------ */ :root, [data-bs-theme] { --color-sf-primary: var(--primary); --color-sf-primary-text-color: #fff; --color-sf-primary-bg-color: var(--primary); --color-sf-primary-border-color: var(--primary); --color-sf-primary-bg-color-hover: var(--primary-hover); --color-sf-primary-border-color-hover: var(--primary-hover); --color-sf-primary-bg-color-pressed: var(--primary-hover); --color-sf-primary-border-color-pressed: var(--primary-hover); --color-sf-primary-bg-color-focus: var(--primary-hover); --color-sf-primary-border-color-focus: var(--primary-hover); --color-sf-content-bg-color: var(--surface); --color-sf-content-bg-color-alt1: var(--surface-2); --color-sf-content-bg-color-alt2: color-mix(in srgb, var(--text) 8%, var(--surface)); --color-sf-content-bg-color-hover: var(--surface-2); --color-sf-content-bg-color-pressed: color-mix(in srgb, var(--text) 8%, var(--surface)); --color-sf-content-bg-color-focus: color-mix(in srgb, var(--text) 8%, var(--surface)); --color-sf-content-bg-color-selected: var(--primary); --color-sf-content-text-color: var(--text); --color-sf-content-text-color-hover: var(--text); --color-sf-content-text-color-focus: var(--text); --color-sf-content-text-color-selected: #fff; --color-sf-placeholder-text-color: var(--muted); --color-sf-icon-color: var(--muted); --color-sf-icon-color-hover: var(--text); --color-sf-icon-color-pressed: var(--text); --color-sf-border: var(--border); --color-sf-border-light: var(--border); --color-sf-border-dark: var(--border-strong); --color-sf-border-hover: var(--border-strong); --color-sf-border-pressed: var(--border-strong); --color-sf-border-focus: color-mix(in srgb, var(--primary) 50%, var(--surface)); --color-sf-border-selected: color-mix(in srgb, var(--primary) 50%, var(--surface)); --color-sf-flyout-bg-color: var(--surface); --color-sf-flyout-bg-color-hover: var(--surface-2); --color-sf-flyout-border: var(--border-strong); --color-sf-flyout-text-color: var(--text); --color-sf-table-bg-color-hover: color-mix(in srgb, var(--primary) 5%, var(--surface)); --color-sf-danger: var(--err); --color-sf-success: var(--ok); --color-sf-warning: var(--warn); --color-sf-info: var(--info); } /* ------------------------------------------------------------------------------------ OSNOVNI ELEMENTI — samo ono što tokeni moraju da nose globalno; raspored i komponente ljuske dolaze u fazi 2 (MainLayout), gridovi u fazi 3. ------------------------------------------------------------------------------------ */ html, body { font-family: var(--font); background: var(--bg); color: var(--text); } /* Brojevi u kolonama stoje u ravnini — pravilo standarda §5, važi svuda odmah. */ .erp-broj, .e-grid .e-rowcell.erp-broj { font-variant-numeric: tabular-nums; }