/* * ds-prefs — sloj korisnickih podesavanja izgleda (tema, akcenat, gustina, radijus, font, ...). * * Ucitava se POSLE dynasoft-theme.css i samo ga preslojava. Tema ostaje netaknuta kao svetla * Cerulean osnova, pa je ceo ovaj sloj moguce ukloniti jednim tagom bez posledica. * * Vrednosti bira ds-prefs.js i postavlja ih kao data-* atribute na . * * NAJVAZNIJE PRAVILO: podrazumevane vrednosti (theme=system dok je OS svetao, accent=cerulean, * density=normal, radius=normal, font=condensed, stripes=on, motion=full) moraju da daju PIKSEL * ISTI izgled kao pre uvodjenja ovog fajla. Korisnik koji ne otvori /customize ne sme nista da * primeti. Zato svaki blok ispod menja nesto tek kad atribut nije podrazumevani. */ /* ===================================================================== 1. Akcenat Boje su vec bile tokenizovane u dynasoft-theme.css (--dy-* i --bs-*), pa se promena akcenta svodi na re-mapiranje tih tokena. Svaki akcenat nosi dva para: za svetlu i za tamnu podlogu. Tamna varijanta nije izracunata iz svetle jer izvedene boje na tamnoj pozadini lako padnu ispod citljivog kontrasta. ===================================================================== */ :root { /* Cerulean = zatecena identiteta glavne ERP aplikacije. */ --ds-accent: #2fa4e7; --ds-accent-rgb: 47, 164, 231; --ds-accent-hover: #178acc; --ds-accent-dark: #157ab5; --ds-accent-dark-rgb: 21, 122, 181; --ds-accent-head: #1aa0d2; --ds-accent-head-dark: #004b87; --ds-accent-dk: #6ec8f5; --ds-accent-dk-rgb: 110, 200, 245; --ds-accent-dk-hover: #8ed6f8; --ds-accent-dk-strong: #a8e0fa; --ds-accent-dk-strong-rgb: 168, 224, 250; } html[data-ds-accent="indigo"] { --ds-accent: #4c6ef5; --ds-accent-rgb: 76, 110, 245; --ds-accent-hover: #3b5bdb; --ds-accent-dark: #364fc7; --ds-accent-dark-rgb: 54, 79, 199; --ds-accent-head: #4263eb; --ds-accent-head-dark: #1d2f6f; --ds-accent-dk: #91a7ff; --ds-accent-dk-rgb: 145, 167, 255; --ds-accent-dk-hover: #adbcff; --ds-accent-dk-strong: #c2ccff; --ds-accent-dk-strong-rgb: 194, 204, 255; } html[data-ds-accent="teal"] { --ds-accent: #0d9488; --ds-accent-rgb: 13, 148, 136; --ds-accent-hover: #0b7f75; --ds-accent-dark: #0a6b62; --ds-accent-dark-rgb: 10, 107, 98; --ds-accent-head: #109c8f; --ds-accent-head-dark: #04403a; --ds-accent-dk: #5eddd0; --ds-accent-dk-rgb: 94, 221, 208; --ds-accent-dk-hover: #82e6db; --ds-accent-dk-strong: #a2ede5; --ds-accent-dk-strong-rgb: 162, 237, 229; } html[data-ds-accent="forest"] { --ds-accent: #2f855a; --ds-accent-rgb: 47, 133, 90; --ds-accent-hover: #276749; --ds-accent-dark: #22543d; --ds-accent-dark-rgb: 34, 84, 61; --ds-accent-head: #38a169; --ds-accent-head-dark: #1c4532; --ds-accent-dk: #74c69d; --ds-accent-dk-rgb: 116, 198, 157; --ds-accent-dk-hover: #92d4b3; --ds-accent-dk-strong: #aee0c7; --ds-accent-dk-strong-rgb: 174, 224, 199; } html[data-ds-accent="plum"] { --ds-accent: #8e44ad; --ds-accent-rgb: 142, 68, 173; --ds-accent-hover: #7a3796; --ds-accent-dark: #682f80; --ds-accent-dark-rgb: 104, 47, 128; --ds-accent-head: #9b59b6; --ds-accent-head-dark: #4a1d5c; --ds-accent-dk: #d3a4e8; --ds-accent-dk-rgb: 211, 164, 232; --ds-accent-dk-hover: #dfbaef; --ds-accent-dk-strong: #e9cef4; --ds-accent-dk-strong-rgb: 233, 206, 244; } html[data-ds-accent="slate"] { --ds-accent: #475569; --ds-accent-rgb: 71, 85, 105; --ds-accent-hover: #3b4759; --ds-accent-dark: #334155; --ds-accent-dark-rgb: 51, 65, 85; --ds-accent-head: #52627a; --ds-accent-head-dark: #1e293b; --ds-accent-dk: #a3b3c9; --ds-accent-dk-rgb: 163, 179, 201; --ds-accent-dk-hover: #b8c5d7; --ds-accent-dk-strong: #ccd6e3; --ds-accent-dk-strong-rgb: 204, 214, 227; } html[data-ds-accent="amber"] { --ds-accent: #b45309; --ds-accent-rgb: 180, 83, 9; --ds-accent-hover: #9a4708; --ds-accent-dark: #7c3d06; --ds-accent-dark-rgb: 124, 61, 6; --ds-accent-head: #c2620f; --ds-accent-head-dark: #5c2c04; --ds-accent-dk: #f0b356; --ds-accent-dk-rgb: 240, 179, 86; --ds-accent-dk-hover: #f4c47b; --ds-accent-dk-strong: #f8d59d; --ds-accent-dk-strong-rgb: 248, 213, 157; } /* Mapiranje akcenta na tokene koje tema vec koristi. Ovo je jedini blok koji „prica" sa temom. */ :root { --dy-blue: var(--ds-accent); --dy-blue-hover: var(--ds-accent-hover); --dy-blue-dark: var(--ds-accent-dark); --dy-head-blue: var(--ds-accent-head); --dy-head-blue-dark: var(--ds-accent-head-dark); --dy-head-blue-soft: color-mix(in srgb, var(--ds-accent) 10%, #ffffff); --dy-border: var(--ds-accent-hover); --bs-primary: var(--ds-accent); --bs-primary-rgb: var(--ds-accent-rgb); --bs-link-color: var(--ds-accent); --bs-link-color-rgb: var(--ds-accent-rgb); --bs-link-hover-color: var(--ds-accent-dark); --bs-link-hover-color-rgb: var(--ds-accent-dark-rgb); --ds-ico-c-primary: var(--ds-accent); } /* Fokus prsten je u temi bio zakucan na rgba(47,164,231,…) — sad prati akcenat. */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ds-accent); box-shadow: 0 0 0 0.2rem rgba(var(--ds-accent-rgb), 0.25); } .ds-deploy-banner[data-ds-deploy-state="in-progress"] .ds-deploy-banner-dot { box-shadow: 0 0 0 0.2rem rgba(var(--ds-accent-rgb), 0.16); } /* ===================================================================== 2. Tamna tema Bootstrap 5.3 sam pokriva svoje komponente preko [data-bs-theme="dark"]; ovde se dodaje ono sto je dynasoft-theme.css zakucao kao svetlo. ===================================================================== */ [data-bs-theme="dark"] { --ds-surface: #1b1f26; --ds-surface-2: #232832; --ds-ground: #15181e; --ds-line: #2f3540; --ds-line-soft: #272c35; --dy-text: #d7dce4; --dy-blue: var(--ds-accent-dk); --dy-blue-hover: var(--ds-accent-dk-hover); --dy-blue-dark: var(--ds-accent-dk-strong); --dy-head-blue: var(--ds-accent-dk); --dy-head-blue-dark: var(--ds-accent-dk-strong); --dy-head-blue-soft: color-mix(in srgb, var(--ds-accent-dk) 16%, #1b1f26); --dy-border: var(--ds-accent-dk); --bs-primary: var(--ds-accent-dk); --bs-primary-rgb: var(--ds-accent-dk-rgb); --bs-link-color: var(--ds-accent-dk); --bs-link-color-rgb: var(--ds-accent-dk-rgb); --bs-link-hover-color: var(--ds-accent-dk-strong); --bs-link-hover-color-rgb: var(--ds-accent-dk-strong-rgb); --bs-body-color: #d7dce4; --bs-border-color: #2f3540; /* Semanticke boje moraju da porastu u svetlini, inace na tamnoj podlozi padnu ispod kontrasta. */ --ds-ico-c-primary: var(--ds-accent-dk); --ds-ico-c-success: #75b798; --ds-ico-c-danger: #ea868f; --ds-ico-c-warning: #ffda6a; --ds-ico-c-secondary: #9aa3b2; --ds-ico-c-muted: #79828f; } [data-bs-theme="dark"] body { background-color: var(--ds-ground); color: var(--dy-text); } [data-bs-theme="dark"] .card { border-color: var(--ds-line); background-color: var(--ds-surface); } [data-bs-theme="dark"] .table { --bs-table-border-color: var(--ds-line); --bs-table-striped-bg: #1f242c; --bs-table-striped-color: var(--dy-text); --bs-table-color: var(--dy-text); --bs-table-bg: transparent; --bs-table-hover-bg: #252b35; --bs-table-hover-color: var(--dy-text); } [data-bs-theme="dark"] .ds-matrix-scroll th:first-child, [data-bs-theme="dark"] .ds-matrix-scroll td:first-child { background-color: var(--ds-surface); box-shadow: 1px 0 0 var(--ds-line); } [data-bs-theme="dark"] .ds-mlist { border-top-color: var(--ds-line); } [data-bs-theme="dark"] .ds-mlist-item { border-bottom-color: var(--ds-line); background-color: var(--ds-surface); } [data-bs-theme="dark"] .ds-mlist-foot { background-color: var(--ds-surface-2); border-bottom-color: var(--ds-line); } [data-bs-theme="dark"] .ds-definition-list dd { border-bottom-color: var(--ds-line-soft); } [data-bs-theme="dark"] .ds-mobile-tabs .nav-link { border-color: var(--ds-line); } [data-bs-theme="dark"] .ds-deploy-banner[data-ds-deploy-state="in-progress"] .ds-deploy-banner-inner { background-color: color-mix(in srgb, var(--ds-accent-dk) 14%, var(--ds-surface)); color: var(--dy-text); } /* Dugme kalendara u ds-date/ds-datetime paru ima zakucano `background-color: #fff` u site.css SVE TRI aplikacije (pravilo je duplirano po app-u). U tamnoj temi bi to bio beo kvadrat prilepljen uz tamno polje. Resava se ovde, na jednom mestu, jer je selektor sa [data-bs-theme] specificniji pa pobedjuje bez obzira na to sto se site.css ucitava ranije. */ [data-bs-theme="dark"] .ds-date-control .ds-date-picker, [data-bs-theme="dark"] .ds-datetime-control .ds-datetime-picker { background-color: var(--ds-surface-2); color: var(--dy-text); border-color: var(--ds-line); } /* Tabela sa `table-light` zaglavljem grupe bi u tamnoj temi bila bela mrlja. */ [data-bs-theme="dark"] .table > :not(caption) > tr.table-light > * { --bs-table-bg: #262c36; --bs-table-color: var(--dy-text); } [data-bs-theme="dark"] .table > :not(caption) > tr.table-secondary > * { --bs-table-bg: #2a3038; --bs-table-color: var(--dy-text); } /* ===================================================================== 3. Gustina Menja se SAMO unutrasnji razmak, ne i velicina slova — za velicinu vec postoji ds-ui-scale. Dva podesavanja se mnoze i to je namerno: krupan font u gustoj tabeli je cesta kombinacija na malim laptopovima. ===================================================================== */ html[data-ds-density="compact"] .table > :not(caption) > * > * { padding-top: 0.2rem; padding-bottom: 0.2rem; } html[data-ds-density="compact"] .card-body { padding: 0.65rem; } html[data-ds-density="compact"] .ds-mlist-item { padding-top: 0.25rem; padding-bottom: 0.25rem; } html[data-ds-density="roomy"] .table > :not(caption) > * > * { padding-top: 0.7rem; padding-bottom: 0.7rem; } html[data-ds-density="roomy"] .card-body { padding: 1.4rem; } html[data-ds-density="roomy"] .ds-mlist-item { padding-top: 0.35rem; padding-bottom: 0.35rem; } /* ===================================================================== 4. Zaobljenost ===================================================================== */ html[data-ds-radius="sharp"] { --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-pill: 0.15rem; } html[data-ds-radius="round"] { --bs-border-radius: 0.6rem; --bs-border-radius-sm: 0.45rem; --bs-border-radius-lg: 0.85rem; --bs-border-radius-xl: 1.1rem; } /* ===================================================================== 5. Font „condensed" je zatecena Roboto Condensed osnova. „system" je jedini izbor koji ne zavisi od mreze — koristan i kad Google Fonts nije dostupan (zatvorena mreza, prekid). ===================================================================== */ html[data-ds-font="system"] { --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html[data-ds-font="system"] body, html[data-ds-font="system"] h1, html[data-ds-font="system"] h2, html[data-ds-font="system"] h3, html[data-ds-font="system"] h4, html[data-ds-font="system"] h5, html[data-ds-font="system"] h6, html[data-ds-font="system"] .h1, html[data-ds-font="system"] .h2, html[data-ds-font="system"] .h3, html[data-ds-font="system"] .h4, html[data-ds-font="system"] .h5, html[data-ds-font="system"] .h6 { font-family: var(--bs-body-font-family); } html[data-ds-font="serif"] { --bs-body-font-family: Georgia, "Times New Roman", "Liberation Serif", serif; } html[data-ds-font="serif"] body, html[data-ds-font="serif"] h1, html[data-ds-font="serif"] h2, html[data-ds-font="serif"] h3, html[data-ds-font="serif"] h4, html[data-ds-font="serif"] h5, html[data-ds-font="serif"] h6, html[data-ds-font="serif"] .h1, html[data-ds-font="serif"] .h2, html[data-ds-font="serif"] .h3, html[data-ds-font="serif"] .h4, html[data-ds-font="serif"] .h5, html[data-ds-font="serif"] .h6 { font-family: var(--bs-body-font-family); } /* Brojevi u kolonama moraju da se poklapaju bez obzira na izabrani font. */ .table td.text-end, .table th.text-end, .ds-mlist-amount { font-variant-numeric: tabular-nums; } /* ===================================================================== 6. Naizmenicne trake u tabelama ===================================================================== */ html[data-ds-stripes="off"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; background-color: transparent; } html[data-ds-stripes="off"] .ds-matrix-scroll .table-striped > tbody > tr:nth-of-type(odd) > *:first-child { background-color: var(--ds-surface, #ffffff); } /* ===================================================================== 7. Animacije Postovanje sistemskog `prefers-reduced-motion` je i dalje obavezno; ovo je dodatni, rucni prekidac za korisnike kojima animacija smeta a nisu je iskljucili na nivou OS-a. ===================================================================== */ html[data-ds-motion="reduced"] *, html[data-ds-motion="reduced"] *::before, html[data-ds-motion="reduced"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ===================================================================== 8. Stampa Podesavanja izgleda ne smeju da se preliju na papir. ===================================================================== */ @media print { [data-bs-theme="dark"] body { background-color: #ffffff; color: #000000; } }