/* ===================================================================== LiteMail – Farebné motívy (Farebné zobrazenie) --------------------------------------------------------------------- Motív sa nastavuje atribútom na : data-theme="dark|pale|gray". Štandard = žiadny atribút (pôvodný vzhľad, nič sa neprekrýva). Appka má farby napevno v StyleSheet.css aj v stovkách inline štýlov (najmä cornflowerblue, biele pozadia, lightblue výber). Preto sa tu používajú: 1) CSS premenné na podľa motívu (jedna sada tokenov), 2) generické pravidlá s !important (prekryjú aj inline štýly), 3) atribútové selektory [style*="..."] na zachytenie inline farieb, 4) filter na prefarbenie ikon. ===================================================================== */ /* ── Tokeny jednotlivých motívov ─────────────────────────────────── */ html[data-theme="dark"] { --lm-bg: #1e1f22; --lm-surface: #282b30; --lm-surface2: #34383e; --lm-text: #c9d1d9; --lm-accent: #8ab4f8; --lm-accent-bg: #3a5bd0; --lm-on-accent: #ffffff; --lm-border: #45494f; --lm-selected: #33507e; --lm-icon-filter: invert(1) hue-rotate(180deg) brightness(1.08) saturate(0.9); } html[data-theme="pale"] { --lm-bg: #f4f7fc; --lm-surface: #ffffff; --lm-surface2: #eef3fb; --lm-text: #5b6b82; --lm-accent: #6f8dc4; --lm-accent-bg: #a9bfe4; --lm-on-accent: #ffffff; --lm-border: #d5e0f2; --lm-selected: #e6eefb; --lm-icon-filter: saturate(0.7) opacity(0.9); } html[data-theme="gray"] { --lm-bg: #e8e8e8; --lm-surface: #f4f4f4; --lm-surface2: #dcdcdc; --lm-text: #3b3b3b; --lm-accent: #565656; --lm-accent-bg: #767676; --lm-on-accent: #ffffff; --lm-border: #b6b6b6; --lm-selected: #cfcfcf; --lm-icon-filter: grayscale(1); } /* ── Základ: pozadie a text ──────────────────────────────────────── */ html[data-theme], html[data-theme] body, html[data-theme] #pageWrap, html[data-theme] .na-content, html[data-theme] .na-page { background-color: var(--lm-bg) !important; color: var(--lm-text) !important; } /* Akcentový text (globálne span pravidlo v StyleSheet, labely, strom) */ html[data-theme] span, html[data-theme] label, html[data-theme] li, html[data-theme] ul, html[data-theme] ul ul, html[data-theme] .na-grid-label, html[data-theme] .na-title, html[data-theme] .adr-lbl, html[data-theme] .adr-node, html[data-theme] .adr-status { color: var(--lm-accent) !important; } /* ── Vstupy, textarea, select ────────────────────────────────────── */ html[data-theme] input[type="text"], html[data-theme] input[type="password"], html[data-theme] input[type="email"], html[data-theme] input[type="datetime"], html[data-theme] input[type="datetime-local"], html[data-theme] input[type="date"], html[data-theme] textarea, html[data-theme] select, html[data-theme] .nu-input, html[data-theme] .adr-sel, html[data-theme] #selKategoria, html[data-theme] #selOpakovat, html[data-theme] #selPripomenutie { background-color: var(--lm-input-bg, var(--lm-surface)) !important; color: var(--lm-text) !important; border-color: var(--lm-border) !important; } /* ── Tlačidlá ────────────────────────────────────────────────────── */ html[data-theme] input[type="button"], html[data-theme] input[type="submit"], html[data-theme] .fileBtnCustom { background-color: var(--lm-accent-bg) !important; color: var(--lm-on-accent) !important; border-color: var(--lm-border) !important; } html[data-theme] input[type="button"]:disabled, html[data-theme] input[type="submit"]:disabled { background-color: var(--lm-surface2) !important; color: var(--lm-accent) !important; } /* ── Tabuľky ─────────────────────────────────────────────────────── */ html[data-theme] th, html[data-theme] .nu-table th, html[data-theme] #kalendarTable thead th { background: var(--lm-accent-bg) !important; color: var(--lm-on-accent) !important; border-color: var(--lm-border) !important; } html[data-theme] td, html[data-theme] .nu-table td, html[data-theme] #kalendarTable td { color: var(--lm-text) !important; border-color: var(--lm-border) !important; } html[data-theme] #newusersTable, html[data-theme] #contactsTable, html[data-theme] #kalendarTable, html[data-theme] .nu-table { background-color: var(--lm-surface) !important; color: var(--lm-text) !important; border-color: var(--lm-border) !important; } html[data-theme] #newusersTable tbody tr.selected-row, html[data-theme] #contactsTable tbody tr.selected-row, html[data-theme] tr.selected-contact, html[data-theme] tr.selected-newUser { background-color: var(--lm-selected) !important; color: var(--lm-accent) !important; } /* ── Zoznam mailov + strom priečinkov ────────────────────────────── */ html[data-theme] .mail-item, html[data-theme] .mail-item.selected, html[data-theme] .mail-itemEmpty, html[data-theme] .select, html[data-theme] .zobrazData { background-color: var(--lm-surface) !important; color: var(--lm-accent) !important; border-color: var(--lm-border) !important; } html[data-theme] .toggle-button, html[data-theme] .folder-path, html[data-theme] .folder-count { background-color: transparent !important; color: var(--lm-accent) !important; border-color: var(--lm-border) !important; } html[data-theme] #folderTreeContainer, html[data-theme] .modelMenu { background-color: var(--lm-bg) !important; } /* Výber (selected/selected-mail) */ html[data-theme] .selected, html[data-theme] .selected-mail, html[data-theme] .from.selected, html[data-theme] .date.selected, html[data-theme] .subject.selected, html[data-theme] .folder-item.selected-folder, html[data-theme] .folder-path.selected-folder { background-color: var(--lm-selected) !important; color: var(--lm-accent) !important; } /* ── Detail / písanie mailu ──────────────────────────────────────── */ html[data-theme] .divHlavicka, html[data-theme] .txtBody, html[data-theme] .email-content, html[data-theme] .txtBodyDetail, html[data-theme] .email-contentDetail, html[data-theme] .cornflower-listbox, html[data-theme] .txtBoxOd, html[data-theme] .txtBoxKomu, html[data-theme] .txtBoxSubjekt, html[data-theme] .txtBoxKopia, html[data-theme] .txtBoxDatum { background-color: var(--lm-surface) !important; color: var(--lm-text) !important; border-color: var(--lm-border) !important; } html[data-theme] .txtBody *, html[data-theme] .email-content * { color: var(--lm-text) !important; } /* ── NastaveniaApp – sidebar a taby ──────────────────────────────── */ html[data-theme] .na-sidebar { border-right-color: var(--lm-border) !important; } html[data-theme] .na-title { border-bottom-color: var(--lm-border) !important; } html[data-theme] .na-tab { background: var(--lm-surface) !important; color: var(--lm-accent) !important; border-color: var(--lm-border) !important; } html[data-theme] .na-tab.active { background: var(--lm-accent-bg) !important; color: var(--lm-on-accent) !important; } /* ── Adresáre (tab 4) ────────────────────────────────────────────── */ html[data-theme] .adr-tree-wrap { background: var(--lm-surface) !important; border-color: var(--lm-border) !important; } html[data-theme] .adr-btn { background: var(--lm-surface) !important; color: var(--lm-accent) !important; border-color: var(--lm-border) !important; } html[data-theme] .adr-btn:hover:not(:disabled) { background: var(--lm-accent-bg) !important; color: var(--lm-on-accent) !important; } html[data-theme] .adr-node:hover { background: var(--lm-surface2) !important; } html[data-theme] .adr-node.selected { background: var(--lm-accent-bg) !important; color: var(--lm-on-accent) !important; } /* ── Oddeľovače ──────────────────────────────────────────────────── */ html[data-theme] hr { background-color: var(--lm-border) !important; color: var(--lm-border) !important; } /* ===================================================================== Zachytenie INLINE štýlov (style="...") – majú prednosť pred triedami, preto potrebujú !important cez atribútové selektory. ===================================================================== */ /* Text cornflowerblue */ html[data-theme] [style*="color:cornflowerblue"], html[data-theme] [style*="color: cornflowerblue"] { color: var(--lm-accent) !important; } /* Pozadie cornflowerblue (hlavičky, aktívne prvky, tlačidlá) */ html[data-theme] [style*="background:cornflowerblue"], html[data-theme] [style*="background: cornflowerblue"], html[data-theme] [style*="background-color:cornflowerblue"], html[data-theme] [style*="background-color: cornflowerblue"] { background-color: var(--lm-accent-bg) !important; color: var(--lm-on-accent) !important; } /* Ohraničenia cornflowerblue (bezpečné aj tam, kde border nie je) */ html[data-theme] [style*="cornflowerblue"] { border-color: var(--lm-border) !important; } /* Biele pozadia -> povrch (POZOR: necielime "white-space") */ html[data-theme] [style*="background:white"], html[data-theme] [style*="background: white"], html[data-theme] [style*="background-color:white"], html[data-theme] [style*="background-color: white"], html[data-theme] [style*="background:#fff"], html[data-theme] [style*="background: #fff"] { background-color: var(--lm-surface) !important; } /* Svetlé modré odtiene -> jemný povrch */ html[data-theme] [style*="#f0f4ff"], html[data-theme] [style*="#fafcff"], html[data-theme] [style*="#e6efff"], html[data-theme] [style*="#d0ebff"], html[data-theme] [style*="lightblue"] { background-color: var(--lm-surface2) !important; } /* ===================================================================== Ikony – prefarbenie cez filter podľa motívu. Prefarbíme VŠETKY ikony (aj base64), OKREM obsahu tela e-mailu a používateľských fotiek (mobil). ===================================================================== */ html[data-theme] img { filter: var(--lm-icon-filter); } /* Výnimky – reálny obsah, nie ikony (nesmie sa invertovať/prefarbiť). */ html[data-theme] .txtBody img, html[data-theme] .email-content img, html[data-theme] .txtBodyDetail img, html[data-theme] .email-contentDetail img, html[data-theme] #mobilObrazkyPreview img, html[data-theme] #mobilObrazkyGrid img, html[data-theme] #mobilImportPreview img { filter: none !important; }