/** * WFS-Sensors — INCA Design System * * Plockat från wfs/public/css/styles.css och wfs/public/admin.html. * Båda teman (dark = operatörsvy, light = admin) bor i samma fil. * Använd `data-theme="dark"` på eller en wrapper för att välja tema; * default är light. CSS-variabler räcker för 90% av all färg-/storleksval. * * Brand-regler (från wfs/CLAUDE.md): * - Bara orange (#f0833d), blå (#015e9f), svart, vit i UI-chrome * - Rött är reserverat för danger/delete * - Ingen cyan, grön eller andra hue-färger i chromet */ /* ========================================================================== Färger — gemensamma brand-konstanter ========================================================================== */ :root { /* INCA brand */ --inca-orange: #f0833d; --inca-orange-hover: #d9722e; --inca-blue: #015e9f; --inca-blue-hover: #014a7f; --inca-black: #000000; --inca-white: #ffffff; /* Danger (utanför brand-paletten, reserverat strikt för delete) */ --danger: #d32f2f; --danger-hover: #b71c1c; --danger-bright: #ff3333; /* används mot mörk bg där d32f2f försvinner */ /* Selection glow (kart-feature, behåll) */ --selection-glow: #ff00ff; } /* ========================================================================== Light theme — admin / sensor-management / listor (default när inget theme-attribut är satt) ========================================================================== */ :root, [data-theme="light"] { --bg-primary: #f0f2f5; --bg-secondary: #e4e6ea; --bg-card: #ffffff; --bg-input: #f0f2f5; --text-primary: #000000; --text-secondary: #666666; --text-dim: #999999; --text-on-accent: #ffffff; --accent: var(--inca-orange); --accent-hover: var(--inca-orange-hover); --interactive: var(--inca-blue); --interactive-hover: var(--inca-blue-hover); --border-color: #d8dbe0; --border-strong: #b8bcc4; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.2); } /* ========================================================================== Dark theme — operatörsvy / live-data / fält (sätt data-theme="dark" på eller en container) ========================================================================== */ [data-theme="dark"] { --bg-primary: #000000; --bg-secondary: #1a1a1a; --bg-card: #1a1a1a; --bg-input: rgba(255, 255, 255, 0.1); --text-primary: #ffffff; --text-secondary: #cccccc; --text-dim: #888888; --text-on-accent: #ffffff; --accent: var(--inca-orange); --accent-hover: var(--inca-orange-hover); --interactive: var(--inca-blue); --interactive-hover: var(--inca-blue-hover); --border-color: #333333; --border-strong: #555555; --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.7); /* dark-specifikt: använd den ljusare red-varianten */ --danger: var(--danger-bright); } /* ========================================================================== Sizing — touch targets, typografi ========================================================================== */ :root { /* Touch targets (handske-vänliga) */ --touch-target-min: 60px; --touch-target-fab: 80px; --touch-target-vertex: 60px; --touch-target-small: 44px; /* sekundära knappar i admin */ /* Typografi */ --font-size-base: 18px; --font-size-button: 20px; --font-size-header: 24px; --font-size-icon: 40px; --font-size-small: 14px; --font-size-tiny: 12px; /* Border radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; /* Spacing skala */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; /* Border width */ --border-width: 2px; --border-width-strong: 4px; } /* ========================================================================== Bas — body, typografi ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, 'Segoe UI', system-ui, sans-serif; background: var(--bg-primary); color: var(--text-primary); font-size: var(--font-size-base); min-height: 100dvh; -webkit-tap-highlight-color: transparent; } body[data-theme="dark"] { /* dark-läget brukar ha overflow:hidden på map-vyn */ font-family: 'Segoe UI', sans-serif; } /* ========================================================================== Header (light theme typiskt) — solid blå bar ========================================================================== */ .header { background: var(--inca-blue); color: var(--inca-white); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .header h1 { font-size: 20px; font-weight: 700; color: var(--inca-white); min-width: 0; } /* ========================================================================== Sektioner — listor, grupper ========================================================================== */ .section { margin-bottom: 28px; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); } .section-title { font-size: 13px; font-weight: 700; color: var(--inca-blue); text-transform: uppercase; letter-spacing: 1px; } [data-theme="dark"] .section-title { color: var(--text-primary); } /* ========================================================================== Kort — generisk card-komponent ========================================================================== */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-card); } .card:active { border-color: var(--accent); } .card.dashed-empty { border-style: dashed; border-color: var(--accent); background: transparent; } /* ========================================================================== Knappar ========================================================================== */ .btn { font-family: inherit; font-size: var(--font-size-button); font-weight: 700; border-radius: var(--radius-md); padding: 14px 20px; cursor: pointer; min-height: var(--touch-target-min); border: var(--border-width) solid transparent; transition: opacity 0.15s, background 0.15s, border-color 0.15s; } .btn:active { transform: scale(0.98); } /* Primär CTA — orange, vit text */ .btn-primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); } .btn-primary:active { background: var(--accent-hover); border-color: var(--accent-hover); } /* Interactive — blå, vit text (save/confirm/navigate) */ .btn-interactive { background: var(--interactive); color: var(--inca-white); border-color: var(--interactive); } .btn-interactive:active { background: var(--interactive-hover); border-color: var(--interactive-hover); } /* Sekundär — transparent bg, ljusgrå border, mörk text */ .btn-secondary { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); } .btn-secondary:active { border-color: var(--accent); } /* Danger — röd */ .btn-danger { background: var(--danger); color: var(--inca-white); border-color: var(--danger); } .btn-danger:active { background: var(--danger-hover); border-color: var(--danger-hover); } /* Operation/CTA full-width — den stora "Starta"-knappen i admin */ .btn-operation { display: block; width: 100%; padding: 22px 24px; background: var(--accent); color: var(--inca-white); border: none; border-radius: var(--radius-lg); font-size: 22px; font-weight: 800; cursor: pointer; text-align: center; } .btn-operation:active { background: var(--accent-hover); } /* FAB — primär floating action (typiskt på operatörsvyn) */ .fab { position: fixed; bottom: 24px; right: 24px; width: var(--touch-target-fab); height: var(--touch-target-fab); border-radius: 50%; background: var(--accent); color: var(--inca-white); border: none; font-size: 36px; cursor: pointer; box-shadow: var(--shadow-elevated); display: grid; place-items: center; z-index: 50; } .fab:active { background: var(--accent-hover); transform: scale(0.95); } /* ========================================================================== Inputs ========================================================================== */ .input { width: 100%; padding: 14px; background: var(--bg-input); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--font-size-base); font-family: inherit; outline: none; min-height: var(--touch-target-small); } .input:focus { border-color: var(--accent); } textarea.input { min-height: 120px; resize: vertical; } /* ========================================================================== Status-indikator ========================================================================== */ .status-row { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--font-size-small); font-weight: 600; } .status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; } .status-dot.connected { background: #4caf50; } .status-dot.disconnected{ background: var(--danger); } .status-dot.warning { background: var(--accent); } /* ========================================================================== Bottom-sheet — full-screen slide-up panel (operatörsvy: settings, filter, tools, weather) ========================================================================== */ .sheet { position: fixed; inset: 0; background: var(--bg-primary); display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s ease-out; z-index: 2100; pointer-events: none; } .sheet.open { transform: translateY(0); pointer-events: auto; } .sheet-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-xl); border-bottom: var(--border-width) solid var(--border-color); flex-shrink: 0; } .sheet-header h2 { margin: 0; color: var(--text-primary); font-size: 22px; font-weight: 800; } .sheet-close { background: none; border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-size: 22px; width: 48px; height: 48px; cursor: pointer; display: grid; place-items: center; } .sheet-body { flex: 1; overflow-y: auto; padding: var(--space-xl); } /* ========================================================================== Modal — centered card overlay ========================================================================== */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); z-index: 200; align-items: center; justify-content: center; padding: var(--space-xl); } .modal-overlay.visible { display: flex; } .modal-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px; max-width: 380px; width: 100%; box-shadow: var(--shadow-elevated); position: relative; } .modal-card h3 { font-size: 20px; margin-bottom: var(--space-md); } .modal-card h3.danger { color: var(--danger); } .modal-card p { font-size: 16px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.5; } .modal-close-btn { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: none; border: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; } /* ========================================================================== Hint-band — floating status (t.ex. "Tryck för att placera sensor") ========================================================================== */ .hint-band { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--text-on-accent); padding: 10px 20px; border-radius: var(--radius-md); font-size: 16px; font-weight: 700; box-shadow: var(--shadow-elevated); z-index: 100; } /* ========================================================================== Hjälpklasser ========================================================================== */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } .text-secondary { color: var(--text-secondary); } .text-dim { color: var(--text-dim); } .text-accent { color: var(--accent); } .text-blue { color: var(--inca-blue); } .text-danger { color: var(--danger); } .font-bold { font-weight: 700; } .uppercase { text-transform: uppercase; letter-spacing: 1px; }