/* ============================================================================= Tume teema — ainult tokenite ümberdefineerimine. ============================================================================= Mängureeglid, mis hoiavad selle failli väikesena ja terviklikuna: 1. Siin ei ole ühtegi uut komponendireeglit. Kui midagi näeb tumedas vale välja, tähendab see, et komponent kasutab kõva värvi — parandus käib komponendifailis (tee sellest token), mitte siin. 2. Kogu tekstipalett tuleb --ink-rgb pealt. Heledas on see tume tint, tumedas hele mint. Kõik alfa-põhised tokenid (jooned, teisene tekst, varjud) pöörduvad automaatselt kaasa. 3. Alfad ei ole heledas ja tumedas samad. Hele kiri tumedal põhjal näib õhem kui tume kiri heledal, seega madalad alfad on siin tõstetud — muidu kaovad jooned ja teisene tekst ära. 4. Kolm asja EI pöördu: --modena (login-lehe brändipaneel), --surface-doc (skannitud dokumendi plaat) ja lightboxi must loor. Need on meelega samad mõlemas teemas. Teema valib , mille seab header.php skript enne esimest joonistust. "Auto" lahendatakse seal ära, seega siin on ainult üks plokk ja @media (prefers-color-scheme) kordust ei ole. */ :root[data-theme="dark"] { color-scheme: dark; /* ---- Tint ja pinnad ---------------------------------------------------- */ /* Kergelt rohekas-sinine valge, mitte puhas hall — hoiab brändi tooni. */ --ink-rgb: 223,238,235; --bg: #0B1517; /* lehe põhi */ --surface-raised: #131F22; /* kaardid ja paneelid: pool tooni põhjast kõrgemal */ --surface-raised-rgb: 19,31,34; --surface: #1A2629; /* inputid, hover, süvendid */ --surface-soft: #162225; --surface-doc: #FFFFFF; /* skannitud dokument tahab valget plaati ka siin */ --slate-50: #151F22; --slate-100: #1A2528; /* Hele kiri tumedal põhjal näib õhem kui tume kiri heledal, seega hallide astmete alfad on tõstetud — muidu kukub nt kalendri nädalapäevade rida (--slate-400) 3.4:1 peale. */ --slate-300: rgba(var(--ink-rgb), 0.30); --slate-400: rgba(var(--ink-rgb), 0.56); --slate-500: rgba(var(--ink-rgb), 0.68); /* ---- Tekst ------------------------------------------------------------- */ /* Mitte puhas valge: #E4EFEC annab tumedal põhjal ~15:1 ilma helendamiseta. */ --text-primary: #E4EFEC; --text-secondary: rgba(var(--ink-rgb), 0.80); --text-tertiary: rgba(var(--ink-rgb), 0.70); --text-label: rgba(var(--ink-rgb), 0.64); /* ---- Jooned ------------------------------------------------------------ */ --border: rgba(var(--ink-rgb), 0.13); --border-soft: rgba(var(--ink-rgb), 0.09); --border-hover: rgba(var(--ink-rgb), 0.26); /* ---- Bränd ------------------------------------------------------------- */ /* --modena jääb tumedaks: seda kannab login-lehe parem paneel, mis on brändipind, mitte teemast sõltuv pind. */ --modena-mint: #12312F; /* heledas hele mint-kiip, tumedas sügav teal */ --modena-mint-light: #102B2A; /* ---- Tegevuspinnad ----------------------------------------------------- */ /* Primaartegevus pöördub ümber: tume nupp kaoks tumedal lehel ära, seega kollane täidis tumeda kirjaga. */ --cta-bg: #FFE66D; --cta-fg: #08191C; --cta-fg-rgb: 8,25,28; /* Valitud kiip / tooltip: hele plaat tumeda kirjaga. */ --sel-bg: #E8F1EF; --sel-fg: #0A1A1D; --sel-fg-rgb: 10,26,29; --invert-bg: #E8F1EF; --invert-fg: #0A1A1D; /* Meelega rasked sisuplokid jäävad tumedaks, ainult toon nihkub põhjast lahku. */ --ink-block-bg: #0F1E22; --accent-dot: #7FD9C6; /* --on-citron EI pöördu: kollane nupp jääb kollaseks, kiri sellel tumedaks. */ --tint-teal-bg: rgba(86,184,196,0.16); --tint-teal-fg: #7FD1DC; /* ---- Fookus ------------------------------------------------------------ */ /* Brändi tint oleks tumedal põhjal nähtamatu, seega mint. */ --focus-ring: #7FD9C6; --shadow-focus: 0 0 0 3px rgba(127, 217, 198, 0.25); /* ---- Staatused --------------------------------------------------------- */ /* Täisvärvi täidised kannavad --on-status valget kirja mõlemas teemas, seega need püsivad küllastunud; tumedal põhjal veidi heledamad. */ --success: #34D399; --success-dim: rgba(52,211,153,0.16); --warning: #FBBF24; --warning-dim: rgba(251,191,36,0.18); --error: #F87171; --error-dim: rgba(248,113,113,0.16); --success-solid: #15805A; --warning-solid: #B4670C; --error-solid: #C93F3F; --error-solid-strong: #B23636; /* Toonitud kastid: taust on värviudu tumedal, kiri pastelne. Kolmik käib koos. */ --tint-ok-bg: rgba(45,190,140,0.15); --tint-ok-fg: #7FDCB4; --tint-ok-line: rgba(45,190,140,0.34); --tint-warn-bg: rgba(240,170,60,0.16); --tint-warn-fg: #F2C877; --tint-warn-line: rgba(240,170,60,0.36); --tint-error-bg: rgba(240,90,90,0.16); --tint-error-fg: #F6A6A6; --tint-error-line: rgba(240,90,90,0.36); --tint-info-bg: rgba(105,150,245,0.17); --tint-info-fg: #ABC7F8; --tint-info-line: rgba(105,150,245,0.36); --tint-warn-wash: rgba(240,170,60,0.055); /* ---- Varjud ------------------------------------------------------------ */ /* Tumedal põhjal ei loe tindivarjud midagi — vari peab olema päris must ja tugevam, muidu ei erista kaarti ega hüpikakent üldse. */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 16px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.34); --shadow-lg: 0 14px 38px rgba(0,0,0,0.60), 0 4px 14px rgba(0,0,0,0.40); } /* ---- Admini staatusekiibid (admin.css :root) ----------------------------- */ :root[data-theme="dark"] { --st-ok: var(--tint-ok-fg); --st-ok-bg: var(--tint-ok-bg); --st-warn: var(--tint-warn-fg); --st-warn-bg: var(--tint-warn-bg); --st-bad: var(--tint-error-fg); --st-bad-bg: var(--tint-error-bg); --st-info: var(--tint-info-fg); --st-info-bg: var(--tint-info-bg); --st-neutral: var(--text-tertiary); --st-neutral-bg: var(--surface); } /* ---- Board ja töötajate vaade (--bv-*) ----------------------------------- */ /* Board defineerib omad tokenid :root-is, töötajate leht .emp-page peal — seetõttu kaks selektorit sama sisuga. */ :root[data-theme="dark"], :root[data-theme="dark"] .emp-page { --bv-rule: rgba(var(--ink-rgb), 0.14); --bv-rule-soft: rgba(var(--ink-rgb), 0.08); --bv-ink: var(--text-primary); --bv-ink-70: rgba(var(--ink-rgb), 0.80); --bv-ink-55: rgba(var(--ink-rgb), 0.70); --bv-ink-38: rgba(var(--ink-rgb), 0.52); --bv-citron: #FFE66D; --bv-citron-soft: rgba(255,230,109,0.16); --bv-citron-ink: #F0D683; --bv-good: #6FD3A6; --bv-warn: #F0B968; --bv-bad: #F08A8A; --bv-mark: #56B8C4; } /* ---- Materjalid / sisekorrad (--pol-*) ----------------------------------- */ :root[data-theme="dark"] .pol, :root[data-theme="dark"] .pol-modal { --pol-ink: var(--text-primary); --pol-ink-2: rgba(var(--ink-rgb), 0.80); --pol-ink-3: rgba(var(--ink-rgb), 0.70); --pol-line: rgba(var(--ink-rgb), 0.14); --pol-grey: #172326; --pol-mint: #12312F; --pol-yellow-soft: rgba(255,230,109,0.14); } /* Kaardi ülaserva rõhuriba dokumenditüübi järgi — heledas küllastunud, tumedal põhjal vajab heledamat versiooni, muidu sulab servaga kokku. */ :root[data-theme="dark"] .pol-card-pdf { --pol-accent: #E8756F; } :root[data-theme="dark"] .pol-card-docx { --pol-accent: #6E9EE8; } :root[data-theme="dark"] .pol-card-png, :root[data-theme="dark"] .pol-card-jpg, :root[data-theme="dark"] .pol-card-jpeg, :root[data-theme="dark"] .pol-card-webp, :root[data-theme="dark"] .pol-card-svg { --pol-accent: #5FC392; } /* ---- Koolitus (--tr-*) ---------------------------------------------------- */ :root[data-theme="dark"] .tr { --tr-ink: var(--text-primary); /* Täidis jääb tumedaks — hoiatusplokk peab ka tumedal lehel raske olema. */ --tr-fill: #0F1E22; --tr-ink-deep: #071214; --tr-ink-2: rgba(var(--ink-rgb), 0.80); --tr-ink-3: rgba(var(--ink-rgb), 0.70); --tr-mint: #ABFFEE; --tr-mint-soft: #12312F; --tr-yellow: #FFE66D; --tr-yellow-soft: rgba(255,230,109,0.14); --tr-grey: #162225; --tr-line: rgba(var(--ink-rgb), 0.13); --tr-line-soft: rgba(var(--ink-rgb), 0.08); --tr-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.45); } /* ---- Puhkuste rida -------------------------------------------------------- */ :root[data-theme="dark"] .leave-row { --leave-accent: #7C8FA3; } /* ---- Kolmanda osapoole vidinad ------------------------------------------- */ /* Quill toob oma valge paleti kaasa; ilma nende viie reeglita on kommentaarikast tumedal lehel valge laik. */ :root[data-theme="dark"] .ql-toolbar.ql-snow, :root[data-theme="dark"] .ql-container.ql-snow { background: var(--surface-raised); } :root[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--text-secondary); } :root[data-theme="dark"] .ql-snow .ql-fill { fill: var(--text-secondary); } :root[data-theme="dark"] .ql-snow .ql-picker { color: var(--text-secondary); } :root[data-theme="dark"] .ql-snow .ql-picker-options { background: var(--surface-raised); border-color: var(--border); } :root[data-theme="dark"] .ql-editor.ql-blank::before { color: var(--text-label); } /* Sõnamärk on ühevärviline tume SVG (fill="#012C32") — tumedal põhjal kaoks ära. brightness(0) surub selle mustaks ja invert teeb pehmelt valgeks; nii ei sõltu tulemus algsest toonist ega vaja teist failivarianti. */ :root[data-theme="dark"] .brand-wordmark, :root[data-theme="dark"] .login-modena-name { filter: brightness(0) invert(0.93); }