/* ---------- design tokens ---------- */ :root { --bg: #000000; /* pure black */ --card-bg: #0d0d0d; /* near-black, barely lighter than bg for depth */ --sidebar-bg: #000000; --text: #17c3b2; /* turquoise — primary text color everywhere */ --muted: #0e8074; /* darker turquoise, secondary/caption text */ --accent: #17c3b2; /* turquoise, unchanged */ --accent-danger: #e5484d; /* red, VT-active / offline / alert states */ --border: #e5484d; /* red borders everywhere by default */ /* Klima's temperature color scale (see dashboard.js's formatClimateTempColor) — a fixed blue, not palette-varied like --accent/--accent-danger: none of the selectable palettes have a "cold" concept of their own, and this only ever needs to mean one thing (a cold room) regardless of which palette is active. */ --temp-cold: #3b82f6; /* On/off state colors (appliance power buttons, integration status dots) — fixed, not palette-varied, same reasoning as --temp-cold: "is this on" is a universal signal, not a style choice, and using --accent for it broke the moment a palette's accent happened to be black (the default day palette, after an earlier request) — an "on" button rendering as a plain black circle conveys nothing. Muted/calm on purpose, not a loud saturated red/green, per explicit request. */ --power-on: #4f9d6e; --power-off: #b5555a; /* Náklady tile's per-phase chart line colors — fixed, not palette-varied, same reasoning as --temp-cold: which phase is which needs to stay visually consistent regardless of the active palette. Deliberately not red/green so they never read as the on/off or hot/cold semantic colors used elsewhere. */ --phase-a: #f59e0b; --phase-b: #6366f1; --phase-c: #ec4899; /* Text/icon color for content placed directly on an --accent background (e.g. .auth-form button) — palette-varied, unlike --power-on/--power-off above, because "readable on top of this specific accent" genuinely depends on how bright that accent is: dark text works here since every night palette's accent is a bright color on a near-black background. Day mode overrides this per palette below, since day accents range from pure black to bright cyan and one fixed value can't stay readable across all of them. */ --accent-ink: #05100f; /* Dashboard-tile typography, consolidated to exactly three sizes on request (tiles had drifted to ~10 distinct font-sizes across Energie/Počasí/Klima/widget-card generics, which is what made Klima's 1.3rem temperature read as mismatched next to Energie's 1rem phase wattage). Not palette-varied — typography doesn't change with the selected color palette, only with light/dark or icon-set choices, neither of which affects size. */ --fs-tile-title: 0.85rem; /* card/section titles: .widget-card-title */ --fs-tile-value: 1.15rem; /* emphasized numeric readouts: totals, per-phase watts, per-period totals, per-room temperature — always paired with font-weight: 700 wherever used, so every value-tier number carries the same weight, not just Klima's */ --fs-tile-label: 0.72rem; /* everything else: captions, units, small labels */ /* Default background photo for the night "default" palette — see the day-mode :root[data-theme="light"] block below for the matching day default, and the Nastavení → Vzhled entry in CLAUDE.md for the full fallback-chain mechanism. */ --default-page-bg-image: url("/static/img/backgrounds/default-night.jpg"); } /* Day mode — toggled on from the Settings page. Softer borders/background than the night theme's full black/red look, since a red border around every card reads as harsh on a bright background; the badge/status uses of turquoise=good / red=alert are kept as-is (see the badge rules further down). */ :root[data-theme="light"] { --bg: #eef2f2; --card-bg: #ffffff; --sidebar-bg: #ffffff; --text: #123832; --muted: #5b7d78; --accent: #000000; --accent-danger: #c73338; --border: #d8dede; /* Day accents are dark-to-mid across every palette except chladna-tyrkys (bright cyan, overridden back to dark ink below) — white text/icons on --accent read correctly here, whereas the base (night-mode) dark --accent-ink was invisible on this palette's pure black accent (reported live: "Uložit"/"Přidat" buttons were black-on-black). */ --accent-ink: #ffffff; /* Default background photo shown behind every page when the user hasn't uploaded their own (Nastavení → Vzhled) — one per day palette, see the --default-page-bg- image declarations below and body/::before's fallback chain. No entry exists here for night palettes yet: a busy photo behind a dark theme needs separate curation to not hurt legibility, not attempted in this pass. */ --default-page-bg-image: url("/static/img/backgrounds/default.jpg"); } /* ---------- selectable color palettes (Nastavení → Barevná paleta) ---------- */ /* "default" (the blocks above) needs no entry here — see theme.js. Each palette below is a full token override, not a partial one, so nothing here depends on cascade order relative to the base blocks above. Night palettes reuse their own accent-danger as the border, matching the default night theme's pattern. Day palettes originally kept --card-bg literal white and near-white borders across every palette (matching the default theme's "soft, not harsh" reasoning) — but since cards are almost the entire visible surface and the sidebar was white too, that left only a thin strip of pastel page-background to tell palettes apart, and the user correctly couldn't distinguish them. Card backgrounds, the sidebar, and borders now all carry a visible (if still light) tint per palette instead of staying near-white, while keeping day palettes lighter/lower-contrast than night ones by design. */ :root[data-theme="light"][data-palette="minimal-seda"] { --bg: #eef1f5; --card-bg: #f7f9fb; --sidebar-bg: #e3e8ee; --text: #1f2937; --muted: #64748b; --accent: #475569; --accent-danger: #ca8a04; --border: #b8c4d6; --default-page-bg-image: url("/static/img/backgrounds/minimal-seda.jpg"); } :root[data-theme="light"][data-palette="teply-pisek"] { --bg: #f2e4cd; --card-bg: #faf3e6; --sidebar-bg: #e8d5b5; --text: #4a2e1a; --muted: #8a6a4d; --accent: #b5541f; --accent-danger: #7d7f4f; --border: #d9b98a; --default-page-bg-image: url("/static/img/backgrounds/teply-pisek.jpg"); } :root[data-theme="light"][data-palette="prirodni-zelena"] { --bg: #e0ede0; --card-bg: #f0f7ef; --sidebar-bg: #cfe3cf; --text: #1f3d28; --muted: #5c7a63; --accent: #2f7d4f; --accent-danger: #d97706; --border: #a8cbaa; --default-page-bg-image: url("/static/img/backgrounds/prirodni-zelena.jpg"); } :root[data-theme="light"][data-palette="ruzova-magenta"] { --bg: #f7dced; --card-bg: #fcf0f7; --sidebar-bg: #f0c9e2; --text: #4a1030; --muted: #8a5a72; --accent: #c2247a; --accent-danger: #8b5cf6; --border: #e3a8cd; --default-page-bg-image: url("/static/img/backgrounds/ruzova-magenta.jpg"); } :root[data-theme="light"][data-palette="chladna-tyrkys"] { --bg: #d9f0ec; --card-bg: #eefaf8; --sidebar-bg: #c2e6e0; --text: #123832; --muted: #5b7d78; --accent: #00b8c4; --accent-danger: #caa03c; --border: #9ed4cb; /* Exception to the day-mode white default above: this accent is a bright cyan, not dark like every other day palette's, so white text on it reads poorly — dark ink (the base/night default) is the readable choice here instead. */ --accent-ink: #05100f; --default-page-bg-image: url("/static/img/backgrounds/chladna-tyrkys.jpg"); } :root[data-theme="dark"][data-palette="jantarova-tma"] { --bg: #120f0d; --card-bg: #1e1815; --sidebar-bg: #120f0d; --text: #e08830; --muted: #a8663a; --accent: #e08830; --accent-danger: #c0392b; --border: #c0392b; --default-page-bg-image: url("/static/img/backgrounds/jantarova-tma.jpg"); } :root[data-theme="dark"][data-palette="pulnocni-modra"] { --bg: #0a0e14; --card-bg: #131a24; --sidebar-bg: #0a0e14; --text: #4f8ff0; --muted: #3d6099; --accent: #4f8ff0; --accent-danger: #8b5cf6; --border: #8b5cf6; --default-page-bg-image: url("/static/img/backgrounds/pulnocni-modra.jpg"); } :root[data-theme="dark"][data-palette="uhlova-med"] { --bg: #100f0c; --card-bg: #1a1712; --sidebar-bg: #100f0c; --text: #c07830; --muted: #8a5c30; --accent: #c07830; --accent-danger: #7d7f4f; --border: #7d7f4f; --default-page-bg-image: url("/static/img/backgrounds/uhlova-med.jpg"); } :root[data-theme="dark"][data-palette="magenta-noc"] { --bg: #150a18; --card-bg: #1f1024; --sidebar-bg: #150a18; --text: #d1329b; --muted: #8a4d72; --accent: #d1329b; --accent-danger: #9c5fd6; --border: #9c5fd6; --default-page-bg-image: url("/static/img/backgrounds/magenta-noc.jpg"); } :root[data-theme="dark"][data-palette="lesni-noc"] { --bg: #0a120d; --card-bg: #142218; --sidebar-bg: #0a120d; --text: #43a05e; --muted: #2d6d40; --accent: #43a05e; --accent-danger: #caa03c; --border: #caa03c; --default-page-bg-image: url("/static/img/backgrounds/lesni-noc.jpg"); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, sans-serif; position: relative; } /* Background photo sits fixed behind everything, dimmed so text stays legible. A user's own uploaded photo (Nastavení → Vzhled, --page-bg-image set inline per-request by base.html) always wins; otherwise falls back to the active day palette's own --default-page-bg-image. Night palettes define neither today, so this layer is simply blank for them — same as before this feature existed. */ body::before { content: ""; position: fixed; inset: 0; background-image: var(--page-bg-image, var(--default-page-bg-image)); background-size: cover; background-position: center; z-index: -2; } body::after { content: ""; position: fixed; inset: 0; background: var(--page-bg-overlay, rgba(0, 0, 0, 0.75)); z-index: -1; } /* Nastavení → Vzhled → "Použít výchozí pozadí" — lets the active palette's own default photo show even when a custom one is uploaded, without deleting/replacing that photo. Deliberately outranks the body::before rule above on specificity alone (two attribute/ pseudo-class selectors vs. one type+pseudo-element), not source order or !important, same technique already used for [data-icons-disabled] in icons.py. */ :root[data-force-default-bg] body::before { background-image: var(--default-page-bg-image); } /* Day mode needs a light dimming overlay, not the night theme's black one — otherwise the uploaded photo (and everything behind it) reads as dark regardless of theme. */ :root[data-theme="light"] { --page-bg-overlay: rgba(255, 255, 255, 0.82); } /* ---------- layout / nav ---------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 220px; flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--border); padding: 20px 0; display: flex; flex-direction: column; /* Sticky, not the old min-height: 100vh flowing away with the page — stays put while .content scrolls, own overflow-y so a taller-than-viewport nav list (more items than fit) scrolls internally instead of pushing the sidebar off-screen. */ position: sticky; top: 0; height: 100vh; overflow-y: auto; } .nav-list-secondary { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; } .sidebar-brand { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 0.92rem; line-height: 1.3; padding: 2px 12px 20px 20px; color: var(--accent); } .sidebar-brand-text { min-width: 0; } .sidebar-icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.92rem; padding: 4px 6px; border-radius: 6px; line-height: 1; } .sidebar-icon-btn:hover, .sidebar-icon-btn.active { color: var(--text); background: rgba(23, 195, 178, 0.12); } .nav-list-toolbar { display: flex; justify-content: flex-end; padding: 0 12px 4px 0; } .nav-list { list-style: none; margin: 0; padding: 0; } .nav-list a { display: block; padding: 10px 20px; color: var(--muted); text-decoration: none; font-size: 0.92rem; border-left: 3px solid transparent; } #main-nav-list li { display: flex; align-items: stretch; } #main-nav-list li a { flex: 1; min-width: 0; } .nav-drag-handle { display: none; align-items: center; padding-left: 12px; color: var(--muted); cursor: grab; user-select: none; } #main-nav-list.reordering .nav-drag-handle { display: flex; } #main-nav-list.reordering li a { pointer-events: none; } #main-nav-list li.dragging { opacity: 0.4; } /* Dashboard is pinned — always first, never draggable (see sidebar.js) — and gets a * bit of visual emphasis over the reorderable items below it, plus a divider so the * two groups read as distinct. */ #main-nav-list li.nav-pinned a { font-weight: 700; background: rgba(23, 195, 178, 0.06); } #main-nav-list li.nav-pinned { border-bottom: 1px solid var(--border); margin-bottom: 4px; } #main-nav-list.reordering li.nav-pinned .nav-drag-handle { display: none; } #main-nav-list.reordering li.nav-pinned a { pointer-events: auto; } .nav-icon { display: inline-flex; flex-shrink: 0; } /* The actual glyph/SVG per icon_key comes from generated rules (see web/icons.py's * generate_icon_css(), embedded per-page in base.html's ) driven by the * data-icon-set/data-icons-disabled attributes on — these are just the static, * set-independent sizing/spacing rules. Any element anywhere (server-rendered or * created later by JS) that carries data-icon-key picks up the right icon automatically. */ [data-icon-key]::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; line-height: 1; } :root:not([data-icons-disabled]) [data-icon-key] { margin-right: 0.35em; } /* #nav-edit-toggle's icon has no trailing label (icon-only button, tooltip carries the label instead) — the default margin-right above exists for icon+text pairs and would just add lopsided padding here. #id beats the :root[attr] rule above on specificity regardless of source order. */ #nav-edit-toggle .nav-icon { margin-right: 0; } .sidebar-reopen-btn { display: none; position: fixed; top: 12px; left: 12px; z-index: 20; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); cursor: pointer; font-size: 1rem; align-items: center; justify-content: center; } :root[data-sidebar-hidden] .sidebar { display: none; } :root[data-sidebar-hidden] .sidebar-reopen-btn { display: flex; } /* Only rendered at all on non-Dashboard pages (see base.html) and only shown once the * sidebar is hidden — with the sidebar visible, the pinned "Dashboard" nav item is * already the way back, so a second control here would just be redundant clutter. */ .back-to-dashboard-btn { display: none; position: fixed; top: 12px; right: 12px; z-index: 20; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); text-decoration: none; font-size: 1rem; align-items: center; justify-content: center; } :root[data-sidebar-hidden] .back-to-dashboard-btn { display: flex; } .nav-list a:hover { color: var(--text); background: rgba(23, 195, 178, 0.08); } .nav-list a.active { color: var(--text); border-left-color: var(--accent); background: rgba(23, 195, 178, 0.12); } .content { position: relative; flex: 1; padding: 24px; min-width: 0; } /* Specificity note: plain `.sidebar-profile-link` (class only) loses its `display: flex` * to `.nav-list a`'s `display: block` (class + element = higher specificity) even * though this rule comes later — same "author rule beats intent silently" class of bug * already hit a few times in this project. The `.nav-list a.` prefix here isn't just * cosmetic scoping, it's what actually makes flex win. */ .nav-list a.sidebar-profile-link { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: var(--muted); text-decoration: none; font-size: 0.92rem; } .sidebar-profile-link:hover { color: var(--text); background: rgba(23, 195, 178, 0.08); } .sidebar-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background-color: var(--border); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; color: var(--text); } .sidebar-profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bg-upload-form { margin-top: 24px; padding: 12px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; max-width: 320px; } .bg-upload-label { font-size: 0.75rem; color: var(--muted); } .bg-upload-form input[type="file"] { font-size: 0.72rem; color: var(--muted); max-width: 100%; } .bg-upload-form button { background: none; border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; } .bg-upload-form button:hover { border-color: var(--accent); } .theme-mode-option { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; cursor: pointer; margin-bottom: 14px; } .theme-switch-row { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--muted); } /* Sliding pill toggle for the day/night switch. */ .switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch-slider { position: absolute; inset: 0; background: var(--border); transition: background-color 0.2s; border-radius: 999px; cursor: pointer; } .switch-slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; /* Theme-aware, not a hardcoded white — --card-bg is already #ffffff in day mode (so day mode looks unchanged), but is near-black in night mode, matching the app's dark surfaces instead of a stray white circle. */ background: var(--card-bg); transition: transform 0.2s, background-color 0.2s; border-radius: 50%; } .switch input:checked + .switch-slider { background: var(--accent); } .switch input:checked + .switch-slider::before { transform: translateX(22px); } .switch input:disabled + .switch-slider { opacity: 0.5; cursor: not-allowed; } /* ---------- color palette picker (Nastavení) ---------- */ .palette-group { margin-bottom: 18px; } .palette-group-title { font-size: 0.8rem; color: var(--muted); margin-bottom: 8px; } .palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .palette-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; cursor: pointer; text-align: left; color: inherit; font: inherit; } .palette-card.selected { border-color: var(--accent); border-width: 2px; } .palette-swatches { display: flex; gap: 4px; margin-bottom: 6px; } .palette-swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(127, 163, 156, 0.3); } .palette-card-name { font-size: 0.8rem; font-weight: 600; } .palette-card-desc { font-size: 0.7rem; color: var(--muted); } .page-header h1 { margin: 0 0 20px; font-size: 1.5rem; } /* ---------- tiles ---------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .tile { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; } .tile-label { font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; } .tile-value { font-size: 1.6rem; font-weight: 600; } /* Settings' chart-sections hold short forms/lists, not wide charts (unlike every * other page's chart-section, which does need the full content width) — capped so * they don't stretch edge-to-edge on a wide window. */ .settings-page { max-width: 480px; } /* ---------- charts ---------- */ .chart-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; } .chart-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .chart-header h2 { margin: 0; font-size: 1.1rem; } /* Klima's own .chart-header uses CSS Grid instead of the base flex layout — a real * bug, confirmed live (user circled the empty gap where this was supposed to be): * putting the current-stats block in a flex row alongside the title/select meant its * own width (which changes depending on whether it holds 1 or 2 stacked lines) * affected how much space was left for flex-grow/wrap to distribute, visibly moving * the title/select around depending on what was inside it. Grid's outer two 1fr * columns reserve equal space for title/select unconditionally, regardless of * what the middle "auto" column contains or how tall it is — the middle column's * content (temperature stacked above humidity) can change all it wants without ever * affecting the title's or select's position again. */ .climate-chart-section .chart-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 12px; margin-bottom: 4px; } .climate-chart-section .chart-header h2 { justify-self: start; } .climate-chart-section .chart-header .climate-history-range-select { justify-self: end; } /* Theme-aware select, same pattern as .sidebar-add-widget-row select — plain *