:root { color-scheme: light dark; --bg: #f4f6f9; --bg-gradient: radial-gradient(circle at 15% 0%, #e8f0fe 0%, #f4f6f9 45%); --fg: #111827; --fg-muted: #6b7280; --card-bg: #ffffff; --card-border: #e5e9f0; --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -8px rgba(16, 24, 40, 0.08); --panel-bg: #ffffff; --accent: #3b82f6; --accent-2: #6366f1; --chip-bg: #f1f5f9; --chart-grid: #e5e9f0; --chart-text: #6b7280; --input-bg: #ffffff; --input-border: #d7dce3; --error: #dc2626; /* Set at runtime by dashboard.js from data-bg-light/data-bg-dark on , when the operator has dropped a custom image into the custom assets dir (see README). */ --bg-light-url: none; --bg-dark-url: none; } @media (prefers-color-scheme: dark) { :root { --bg: #0b0e14; --bg-gradient: radial-gradient(circle at 15% 0%, #131a2a 0%, #0b0e14 45%); --fg: #e8eaed; --fg-muted: #9aa4b2; --card-bg: #131720; --card-border: #232936; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.5); --panel-bg: #131720; --accent: #60a5fa; --accent-2: #818cf8; --chip-bg: #1b2130; --chart-grid: #232936; --chart-text: #9aa4b2; --input-bg: #0f131b; --input-border: #2a3140; --error: #f87171; } } * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--fg); background-color: var(--bg); background-image: var(--bg-light-url), var(--bg-gradient); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; margin: 0; -webkit-font-smoothing: antialiased; } @media (prefers-color-scheme: dark) { body { background-image: var(--bg-dark-url), var(--bg-gradient); } } .page { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem 4rem; } .topbar { padding: 2.5rem 0 1rem; } .banner { margin-top: 1.25rem; border-radius: 16px; overflow: hidden; border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } .banner img { display: block; width: 100%; height: 220px; object-fit: cover; } .brand { display: flex; align-items: center; gap: 0.9rem; } .brand-icon { font-size: 2.25rem; line-height: 1; } h1 { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .subtitle { margin: 0.15rem 0 0; color: var(--fg-muted); font-size: 0.9rem; } h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 1rem; letter-spacing: -0.01em; } section { margin-top: 2.5rem; } .hint { color: var(--fg-muted); font-size: 0.9rem; } .hint.error { color: var(--error); } /* Current readings */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); padding: 1.25rem 1.3rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 16px 32px -12px rgba(16, 24, 40, 0.14); } .card-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; } .card-header h3 { margin: 0; font-size: 0.95rem; font-weight: 600; } .card-icon { display: inline-flex; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 9px; padding: 0.4rem; flex-shrink: 0; } .card-icon svg { width: 18px; height: 18px; } .hero-metric { display: flex; align-items: baseline; gap: 0.3rem; margin-bottom: 0.8rem; } .hero-value { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; } .hero-unit { font-size: 1rem; color: var(--fg-muted); font-weight: 500; } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; } .chip { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--chip-bg); color: var(--fg-muted); border-radius: 999px; padding: 0.3rem 0.6rem 0.3rem 0.45rem; font-size: 0.78rem; font-weight: 500; } .chip svg { width: 13px; height: 13px; } .card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.7rem; border-top: 1px solid var(--card-border); color: var(--fg-muted); font-size: 0.75rem; } .battery { display: inline-flex; align-items: center; gap: 0.3rem; } .battery svg { width: 14px; height: 14px; } /* History panel */ .panel { background: var(--panel-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); padding: 1.1rem 1.3rem; display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: end; margin-bottom: 1.25rem; } .panel label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.78rem; color: var(--fg-muted); font-weight: 500; } .panel select, .panel input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px; padding: 0.5rem 0.65rem; color: var(--fg); font-size: 0.88rem; font-family: inherit; } .panel select:focus, .panel input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 1px; } button { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; border: none; border-radius: 8px; padding: 0.6rem 1.15rem; cursor: pointer; font-size: 0.88rem; font-weight: 600; box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--accent) 45%, transparent); transition: filter 0.15s ease; } button:hover { filter: brightness(1.06); } button:active { filter: brightness(0.96); } .chart-panel { background: var(--panel-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--card-shadow); padding: 1rem; } canvas { display: block; width: 100%; height: auto; } footer { margin-top: 3rem; text-align: center; color: var(--fg-muted); font-size: 0.78rem; }