/* Kalendar (Flatpickr) u temi aplikacije — dev-108. * * ZASTO: `flatpickr.min.css` je iz paketa i uvek crta SVETAO kalendar (beo panel, crn tekst). * Na dark temama je iskakao kao belo polje preko tamne stranice (Olegov nalaz, screenshot). * * KAKO: boje se ne pisu rucno nego se citaju iz POSTOJECIH tokena aplikacije * (`--surface`, `--fg`, `--line`, `--accent`, …). Tokeni su na `:root`, a kalendar Flatpickr * dodaje na `` — pa ih nasledjuje bez ikakvog dodatnog rada. Time kalendar prati SVE * teme (light + sest dark sema) i buduce izmene palete, bez druge liste boja koja bi se * razisla sa aplikacijom. * * Ucitava se POSLE `flatpickr.min.css` u sva tri shell-a (base / cc_base / module_base). * Selektori su namerno iste specificnosti kao originalni (jedna klasa + element gde je i * original tako pisan) i navedeni u istom redu — bez `!important`, da se ponasanje moze * pratiti u dev-tools-u. */ /* Skup pravila se primenjuje SAMO kad je tema tamna: eksplicitan izbor (`data-theme`) ili * sistemska tamna kad korisnik nije birao. Light tema ostaje na originalnom paketu. */ :root[data-theme="dark"] .flatpickr-calendar, :root[data-theme="navy"] .flatpickr-calendar, :root[data-theme="graphite"] .flatpickr-calendar, :root[data-theme="teal"] .flatpickr-calendar, :root[data-theme="indigo"] .flatpickr-calendar, :root[data-theme="espresso"] .flatpickr-calendar { background: var(--surface, #1a2028); color: var(--fg, #e9f5fa); box-shadow: 0 0 0 1px var(--line, #2a343d), 0 12px 32px rgba(0, 0, 0, .45); } /* Strelica („repic") koja pokazuje na polje — dve boje: obrub pa ispuna. */ :root[data-theme="dark"] .flatpickr-calendar.arrowTop:before, :root[data-theme="navy"] .flatpickr-calendar.arrowTop:before, :root[data-theme="graphite"] .flatpickr-calendar.arrowTop:before, :root[data-theme="teal"] .flatpickr-calendar.arrowTop:before, :root[data-theme="indigo"] .flatpickr-calendar.arrowTop:before, :root[data-theme="espresso"] .flatpickr-calendar.arrowTop:before { border-bottom-color: var(--line, #2a343d); } :root[data-theme="dark"] .flatpickr-calendar.arrowTop:after, :root[data-theme="navy"] .flatpickr-calendar.arrowTop:after, :root[data-theme="graphite"] .flatpickr-calendar.arrowTop:after, :root[data-theme="teal"] .flatpickr-calendar.arrowTop:after, :root[data-theme="indigo"] .flatpickr-calendar.arrowTop:after, :root[data-theme="espresso"] .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--surface, #1a2028); } :root[data-theme="dark"] .flatpickr-calendar.arrowBottom:before, :root[data-theme="navy"] .flatpickr-calendar.arrowBottom:before, :root[data-theme="graphite"] .flatpickr-calendar.arrowBottom:before, :root[data-theme="teal"] .flatpickr-calendar.arrowBottom:before, :root[data-theme="indigo"] .flatpickr-calendar.arrowBottom:before, :root[data-theme="espresso"] .flatpickr-calendar.arrowBottom:before { border-top-color: var(--line, #2a343d); } :root[data-theme="dark"] .flatpickr-calendar.arrowBottom:after, :root[data-theme="navy"] .flatpickr-calendar.arrowBottom:after, :root[data-theme="graphite"] .flatpickr-calendar.arrowBottom:after, :root[data-theme="teal"] .flatpickr-calendar.arrowBottom:after, :root[data-theme="indigo"] .flatpickr-calendar.arrowBottom:after, :root[data-theme="espresso"] .flatpickr-calendar.arrowBottom:after { border-top-color: var(--surface, #1a2028); } /* Zaglavlje: mesec/godina, strelice, i ``-u crta sistem — bez eksplicitne boje ostaju bele. */ :root[data-theme="dark"] .flatpickr-monthDropdown-month, :root[data-theme="navy"] .flatpickr-monthDropdown-month, :root[data-theme="graphite"] .flatpickr-monthDropdown-month, :root[data-theme="teal"] .flatpickr-monthDropdown-month, :root[data-theme="indigo"] .flatpickr-monthDropdown-month, :root[data-theme="espresso"] .flatpickr-monthDropdown-month { background: var(--surface, #1a2028); color: var(--fg, #e9f5fa); } :root[data-theme="dark"] .flatpickr-current-month input.cur-year, :root[data-theme="navy"] .flatpickr-current-month input.cur-year, :root[data-theme="graphite"] .flatpickr-current-month input.cur-year, :root[data-theme="teal"] .flatpickr-current-month input.cur-year, :root[data-theme="indigo"] .flatpickr-current-month input.cur-year, :root[data-theme="espresso"] .flatpickr-current-month input.cur-year { color: var(--fg, #e9f5fa); } /* Imena dana (Sun, Mon, …) */ :root[data-theme="dark"] span.flatpickr-weekday, :root[data-theme="navy"] span.flatpickr-weekday, :root[data-theme="graphite"] span.flatpickr-weekday, :root[data-theme="teal"] span.flatpickr-weekday, :root[data-theme="indigo"] span.flatpickr-weekday, :root[data-theme="espresso"] span.flatpickr-weekday { color: var(--fg-muted, rgba(233, 245, 250, .68)); } /* Dani: osnovni, hover, danas, izabran, i dani van meseca / onemogućeni. */ :root[data-theme="dark"] .flatpickr-day, :root[data-theme="navy"] .flatpickr-day, :root[data-theme="graphite"] .flatpickr-day, :root[data-theme="teal"] .flatpickr-day, :root[data-theme="indigo"] .flatpickr-day, :root[data-theme="espresso"] .flatpickr-day { color: var(--fg, #e9f5fa); } :root[data-theme="dark"] .flatpickr-day:hover, :root[data-theme="navy"] .flatpickr-day:hover, :root[data-theme="graphite"] .flatpickr-day:hover, :root[data-theme="teal"] .flatpickr-day:hover, :root[data-theme="indigo"] .flatpickr-day:hover, :root[data-theme="espresso"] .flatpickr-day:hover, :root[data-theme="dark"] .flatpickr-day:focus, :root[data-theme="navy"] .flatpickr-day:focus, :root[data-theme="graphite"] .flatpickr-day:focus, :root[data-theme="teal"] .flatpickr-day:focus, :root[data-theme="indigo"] .flatpickr-day:focus, :root[data-theme="espresso"] .flatpickr-day:focus { background: var(--surface-2, #202832); border-color: var(--line, #2a343d); color: var(--fg, #e9f5fa); } :root[data-theme="dark"] .flatpickr-day.today, :root[data-theme="navy"] .flatpickr-day.today, :root[data-theme="graphite"] .flatpickr-day.today, :root[data-theme="teal"] .flatpickr-day.today, :root[data-theme="indigo"] .flatpickr-day.today, :root[data-theme="espresso"] .flatpickr-day.today { border-color: var(--accent, #5aa9d0); } :root[data-theme="dark"] .flatpickr-day.selected, :root[data-theme="navy"] .flatpickr-day.selected, :root[data-theme="graphite"] .flatpickr-day.selected, :root[data-theme="teal"] .flatpickr-day.selected, :root[data-theme="indigo"] .flatpickr-day.selected, :root[data-theme="espresso"] .flatpickr-day.selected, :root[data-theme="dark"] .flatpickr-day.selected:hover, :root[data-theme="navy"] .flatpickr-day.selected:hover, :root[data-theme="graphite"] .flatpickr-day.selected:hover, :root[data-theme="teal"] .flatpickr-day.selected:hover, :root[data-theme="indigo"] .flatpickr-day.selected:hover, :root[data-theme="espresso"] .flatpickr-day.selected:hover { background: var(--accent, #5aa9d0); border-color: var(--accent, #5aa9d0); color: var(--accent-fg, #06222c); } :root[data-theme="dark"] .flatpickr-day.prevMonthDay, :root[data-theme="navy"] .flatpickr-day.prevMonthDay, :root[data-theme="graphite"] .flatpickr-day.prevMonthDay, :root[data-theme="teal"] .flatpickr-day.prevMonthDay, :root[data-theme="indigo"] .flatpickr-day.prevMonthDay, :root[data-theme="espresso"] .flatpickr-day.prevMonthDay, :root[data-theme="dark"] .flatpickr-day.nextMonthDay, :root[data-theme="navy"] .flatpickr-day.nextMonthDay, :root[data-theme="graphite"] .flatpickr-day.nextMonthDay, :root[data-theme="teal"] .flatpickr-day.nextMonthDay, :root[data-theme="indigo"] .flatpickr-day.nextMonthDay, :root[data-theme="espresso"] .flatpickr-day.nextMonthDay, :root[data-theme="dark"] .flatpickr-day.flatpickr-disabled, :root[data-theme="navy"] .flatpickr-day.flatpickr-disabled, :root[data-theme="graphite"] .flatpickr-day.flatpickr-disabled, :root[data-theme="teal"] .flatpickr-day.flatpickr-disabled, :root[data-theme="indigo"] .flatpickr-day.flatpickr-disabled, :root[data-theme="espresso"] .flatpickr-day.flatpickr-disabled { color: var(--fg-subtle, rgba(233, 245, 250, .44)); } /* Granica između dva meseca (multiMonth) — original je crta svetlom linijom. */ :root[data-theme="dark"] .dayContainer + .dayContainer, :root[data-theme="navy"] .dayContainer + .dayContainer, :root[data-theme="graphite"] .dayContainer + .dayContainer, :root[data-theme="teal"] .dayContainer + .dayContainer, :root[data-theme="indigo"] .dayContainer + .dayContainer, :root[data-theme="espresso"] .dayContainer + .dayContainer { box-shadow: -1px 0 0 var(--line, #2a343d); } /* Sistemska tamna tema kada korisnik NIJE birao (nema `data-theme` na korenu). * Ista pravila, drugi ulaz — zato su svedena na kratak spisak selektora. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .flatpickr-calendar { background: var(--surface, #1a2028); color: var(--fg, #e9f5fa); box-shadow: 0 0 0 1px var(--line, #2a343d), 0 12px 32px rgba(0, 0, 0, .45); } :root:not([data-theme]) .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--surface, #1a2028); } :root:not([data-theme]) .flatpickr-calendar.arrowTop:before { border-bottom-color: var(--line, #2a343d); } :root:not([data-theme]) .flatpickr-calendar.arrowBottom:after { border-top-color: var(--surface, #1a2028); } :root:not([data-theme]) .flatpickr-calendar.arrowBottom:before { border-top-color: var(--line, #2a343d); } :root:not([data-theme]) .flatpickr-months .flatpickr-month, :root:not([data-theme]) .flatpickr-months .flatpickr-prev-month, :root:not([data-theme]) .flatpickr-months .flatpickr-next-month { color: var(--fg, #e9f5fa); fill: var(--fg, #e9f5fa); } :root:not([data-theme]) .flatpickr-current-month .flatpickr-monthDropdown-months, :root:not([data-theme]) .flatpickr-monthDropdown-month { background: var(--surface, #1a2028); color: var(--fg, #e9f5fa); } :root:not([data-theme]) .flatpickr-current-month input.cur-year { color: var(--fg, #e9f5fa); } :root:not([data-theme]) span.flatpickr-weekday { color: var(--fg-muted, rgba(233, 245, 250, .68)); } :root:not([data-theme]) .flatpickr-day { color: var(--fg, #e9f5fa); } :root:not([data-theme]) .flatpickr-day:hover, :root:not([data-theme]) .flatpickr-day:focus { background: var(--surface-2, #202832); border-color: var(--line, #2a343d); } :root:not([data-theme]) .flatpickr-day.today { border-color: var(--accent, #5aa9d0); } :root:not([data-theme]) .flatpickr-day.selected, :root:not([data-theme]) .flatpickr-day.selected:hover { background: var(--accent, #5aa9d0); border-color: var(--accent, #5aa9d0); color: var(--accent-fg, #06222c); } :root:not([data-theme]) .flatpickr-day.prevMonthDay, :root:not([data-theme]) .flatpickr-day.nextMonthDay, :root:not([data-theme]) .flatpickr-day.flatpickr-disabled { color: var(--fg-subtle, rgba(233, 245, 250, .44)); } :root:not([data-theme]) .dayContainer + .dayContainer { box-shadow: -1px 0 0 var(--line, #2a343d); } }