/* Skoor admin teema — tume vaikimisi, hele või süsteem valikuga. Boot script -is paneb . Süsteemi-režiim järgib OS prefers-color-scheme media-query'd. */ /* Tinted hover/border tones (vaikimisi tumedale taustale heledad varjundid) */ :root { --hover-faint: rgba(255,255,255,0.02); --hover-soft: rgba(255,255,255,0.04); --hover-mid: rgba(255,255,255,0.05); --hover-strong: rgba(255,255,255,0.08); /* Skoor mõõdik-logo värvid — vaikimisi tume teema */ --logo-track: #374151; --logo-needle: #f9fafb; } /* Hele teema — kasutaja valikul */ html[data-theme="light"] { --bg: #f9fafb; --bg2: #ffffff; --bg3: #f3f4f6; --border: rgba(0,0,0,0.10); --text: #111827; --text2: #4b5563; --text3: #6b7280; --accent: #10b981; --pos: #10b981; --neg: #dc2626; --warn: #d97706; --info: #6366f1; --gray: #6b7280; --hover-faint: rgba(0,0,0,0.025); --hover-soft: rgba(0,0,0,0.05); --hover-mid: rgba(0,0,0,0.05); --hover-strong: rgba(0,0,0,0.06); --logo-track: #d1d5db; --logo-needle: #1f2937; color-scheme: light; } /* Süsteemi-režiim, kui OS eelistab heledat */ @media (prefers-color-scheme: light) { html[data-theme="system"] { --bg: #f9fafb; --bg2: #ffffff; --bg3: #f3f4f6; --border: rgba(0,0,0,0.10); --text: #111827; --text2: #4b5563; --text3: #6b7280; --neg: #dc2626; --warn: #d97706; --info: #6366f1; --hover-faint: rgba(0,0,0,0.025); --hover-soft: rgba(0,0,0,0.05); --hover-mid: rgba(0,0,0,0.05); --hover-strong: rgba(0,0,0,0.06); --logo-track: #d1d5db; --logo-needle: #1f2937; color-scheme: light; } } /* Tume teema explicit (vaikimisi) */ html[data-theme="dark"] { color-scheme: dark; } /* Heleda teema väikesed komponendi-täpsustused */ html[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator, html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: none; } @media (prefers-color-scheme: light) { html[data-theme="system"] input[type="month"]::-webkit-calendar-picker-indicator, html[data-theme="system"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="system"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: none; } } /* ───────────── Searchable select (custom dropdown with filter) ───────────── */ .searchable-select { position: relative; width: 100%; } .searchable-select .ss-input { width: 100%; cursor: pointer; } .searchable-select .ss-input:focus { cursor: text; } .searchable-select .ss-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; max-height: 280px; overflow-y: auto; z-index: 50; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); } .searchable-select .ss-dropdown li { padding: 8px 12px; border-radius: 4px; font-size: 14px; color: var(--text); cursor: pointer; user-select: none; } .searchable-select .ss-dropdown li:hover, .searchable-select .ss-dropdown li.active { background: var(--hover-strong); } .searchable-select .ss-dropdown li.selected { background: var(--bg3); font-weight: 600; } .searchable-select .ss-dropdown li.empty { color: var(--text3); font-style: italic; cursor: default; } .searchable-select .ss-dropdown li.empty:hover { background: transparent; }