/* * SkyRecon — lab.johlem.net * Same brutalist dark + accent-red palette as gpxeditor, with Leaflet overrides * so the basemap, controls, and popups fit the design system. */ :root { --bg: #0a0a0a; --surface: #1a1a1a; --rule: #444; --rule-soft: #222; --muted: #888; --fg: #f0f0f0; --accent: #E8350A; --accent-dim: rgba(232, 53, 10, 0.20); --green: #4caf50; /* live / ok signals */ --yellow: #f4c542; /* stale / warning */ --blue: #5aa9e6; /* climbing */ --pink: #ff5e9c; /* descending */ --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace; --header-h: 48px; --sidebar-w: 340px; --stats-h: 40px; /* Text density scale — bumped by [data-density] on . */ --fs-body: 13px; --fs-small: 11px; --fs-tiny: 10px; --fs-label: 10px; } html[data-density=compact] { --fs-body: 12px; --fs-small: 10px; --fs-tiny: 9px; --fs-label: 9px; } html[data-density=large] { --fs-body: 15px; --fs-small: 13px; --fs-tiny: 11px; --fs-label: 11px; --sidebar-w: 380px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font-mono); font-size: var(--fs-body); line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; } .field label, .panel h2, .panel h3, .stats-bar .stat .label { font-size: var(--fs-label); } .empty, .ac-list, .kv, .btn-row button { font-size: var(--fs-small); } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; background: var(--surface); border: 1px solid var(--rule); border-radius: 0; padding: 6px 10px; outline: none; } button { cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; } button:hover, button:focus-visible { border-color: var(--accent); } button:disabled { opacity: 0.4; cursor: not-allowed; } input:focus, textarea:focus, select:focus { border-color: var(--accent); } /* ---------- App shell ---------- */ .app { display: grid; grid-template-columns: 1fr var(--sidebar-w); grid-template-rows: var(--header-h) 1fr var(--stats-h); grid-template-areas: "header header" "map sidebar" "stats stats"; height: 100dvh; width: 100vw; } /* ---------- Header ---------- */ .header { grid-area: header; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--bg); border-bottom: 2px solid var(--accent); gap: 12px; } .header h1 { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .header h1 .accent { color: var(--accent); } .header .header-actions { display: flex; gap: 8px; align-items: center; } .header .status-dot { display: inline-block; width: 8px; height: 8px; background: var(--muted); margin-right: 6px; vertical-align: middle; } .header .status-dot.live { background: var(--green); box-shadow: 0 0 0 0 rgba(76,175,80,0.6); animation: dot-pulse 1.4s ease-out infinite; } .header .status-dot.warn { background: var(--yellow); } .header .status-dot.error { background: var(--accent); animation: dot-pulse 0.7s ease-out infinite; } @keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(76,175,80,0.65); } 70% { box-shadow: 0 0 0 10px rgba(76,175,80,0); } 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); } } /* ---------- Map ---------- */ .map-wrap { grid-area: map; position: relative; background: var(--bg); border-right: 1px solid var(--rule-soft); } #map { width: 100%; height: 100%; background: #000; } .hud { position: absolute; bottom: 10px; left: 10px; font-size: 11px; color: var(--muted); background: rgba(10, 10, 10, 0.7); border: 1px solid var(--rule); padding: 4px 8px; pointer-events: none; white-space: pre; z-index: 500; } /* Loading progress: top-of-map slim bar + right-side label. */ .progress { position: absolute; top: 0; left: 0; right: 0; z-index: 700; pointer-events: none; display: flex; align-items: center; justify-content: flex-end; padding: 0; height: 4px; } .progress[hidden] { display: none; } .progress-bar { position: absolute; inset: 0 auto 0 0; height: 4px; width: 0%; background: linear-gradient(90deg, var(--accent), #ffb04a, var(--green)); box-shadow: 0 0 8px rgba(232,53,10,0.6); transition: width 0.25s ease-out; } /* Indeterminate variant — animate the bar sliding L→R when we don't know the total. */ .progress.indeterminate .progress-bar { width: 30%; animation: prog-slide 1.1s ease-in-out infinite; } @keyframes prog-slide { 0% { left: -30%; } 50% { left: 50%; } 100% { left: 100%; } } .progress-label { position: absolute; top: 8px; right: 12px; background: rgba(10,10,10,0.85); border: 1px solid var(--accent); color: var(--fg); font-size: var(--fs-tiny); padding: 3px 8px; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; } /* ---------- Sidebar ---------- */ .sidebar { grid-area: sidebar; background: var(--surface); border-left: 1px solid var(--rule-soft); overflow-y: auto; display: flex; flex-direction: column; } /* Mode tabs */ .mode-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--rule); } .mode-tab { background: var(--surface); border: none; border-right: 1px solid var(--rule-soft); border-bottom: 2px solid transparent; color: var(--muted); padding: 10px 6px; font-size: 10px; text-align: center; } .mode-tab:last-child { border-right: none; } .mode-tab:hover { color: var(--fg); } .mode-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .panel { border-bottom: 1px solid var(--rule-soft); padding: 12px 14px; } .panel h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 10px; font-weight: 500; } .panel h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 12px 0 6px; font-weight: 500; } .field { display: block; margin-bottom: 8px; } .field label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 3px; } .field input, .field select, .field textarea { width: 100%; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .btn-row button { flex: 1 0 auto; padding: 6px 8px; font-size: 11px; } .btn-primary { border-color: var(--accent); color: var(--accent); } .btn-primary:hover { background: var(--accent); color: var(--bg); } .btn-stop { border-color: var(--accent); color: var(--accent); } .kv { display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; font-size: 11px; } .kv dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .kv dd { color: var(--fg); word-break: break-all; } .kv dd.accent { color: var(--accent); } .empty { color: var(--muted); font-size: 11px; font-style: italic; } /* Aircraft list */ .ac-list { list-style: none; font-size: 11px; max-height: 360px; overflow-y: auto; border: 1px solid var(--rule-soft); } .ac-list li { display: grid; grid-template-columns: 70px 1fr 50px; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--rule-soft); cursor: pointer; align-items: center; } .ac-list li:last-child { border-bottom: none; } .ac-list li:hover { background: rgba(232, 53, 10, 0.07); } .ac-list li.selected { background: var(--accent-dim); color: var(--fg); border-color: var(--accent); } .ac-list .cs { color: var(--accent); letter-spacing: 0.04em; } .ac-list .icao { color: var(--muted); font-size: 10px; } .ac-list .alt { text-align: right; color: var(--fg); font-size: 10px; } .ac-list .ground { color: var(--muted); font-style: italic; } /* ---------- Stats bar ---------- */ .stats-bar { grid-area: stats; display: flex; align-items: stretch; background: var(--surface); border-top: 1px solid var(--rule); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; overflow-x: auto; } .stats-bar .stat { flex: 1 1 0; padding: 4px 12px; border-right: 1px solid var(--rule-soft); display: flex; flex-direction: column; justify-content: center; min-width: 120px; } .stats-bar .stat:last-child { border-right: none; } .stats-bar .stat .label { color: var(--muted); font-size: 9px; letter-spacing: 0.14em; } .stats-bar .stat .value { color: var(--fg); font-size: 12px; } .stats-bar .stat .value.accent { color: var(--accent); } .stats-bar .stat .value.live { color: var(--green); } .stats-bar .stat .value.warn { color: var(--yellow); } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 12px; right: 12px; background: var(--surface); border: 1px solid var(--accent); color: var(--fg); font-size: 11px; padding: 8px 12px; max-width: 360px; text-transform: uppercase; letter-spacing: 0.06em; z-index: 9999; } .toast.error { border-color: var(--accent); color: var(--accent); } /* ---------- Leaflet overrides ---------- */ .leaflet-container { background: #000 !important; font-family: var(--font-mono); font-size: 11px; } .leaflet-control-zoom a { background: var(--surface) !important; color: var(--fg) !important; border: 1px solid var(--rule) !important; border-radius: 0 !important; font-family: var(--font-mono) !important; } .leaflet-control-zoom a:hover { border-color: var(--accent) !important; color: var(--accent) !important; } .leaflet-control-attribution { background: rgba(10, 10, 10, 0.75) !important; color: var(--muted) !important; font-size: 10px !important; border: 1px solid var(--rule) !important; padding: 2px 6px !important; } .leaflet-control-attribution a { color: var(--fg) !important; text-decoration: none; border-bottom: 1px dotted var(--rule); } .leaflet-control-attribution a:hover { color: var(--accent) !important; } .leaflet-popup-content-wrapper { background: var(--surface) !important; color: var(--fg) !important; border: 1px solid var(--accent) !important; border-radius: 0 !important; box-shadow: none !important; } .leaflet-popup-tip { background: var(--surface) !important; border: 1px solid var(--accent) !important; } .leaflet-popup-close-button { color: var(--muted) !important; } .leaflet-popup-close-button:hover { color: var(--accent) !important; } .leaflet-popup-content { margin: 8px 12px !important; font-size: 11px; } .leaflet-popup-content b { color: var(--accent); } /* Aircraft marker icon (rotated SVG). */ .ac-marker { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; transform-origin: 50% 50%; will-change: transform; } .ac-marker svg { width: 22px; height: 22px; fill: var(--fg); stroke: #000; stroke-width: 0.5; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); } .ac-marker.ground svg { fill: var(--muted); } .ac-marker.climbing svg { fill: var(--blue); } .ac-marker.descending svg { fill: var(--pink); } .ac-marker.selected svg { fill: var(--accent); stroke: var(--fg); stroke-width: 1; } .ac-marker.mil svg { fill: #ff5e5e; stroke: #200; stroke-width: 0.6; } .ac-marker.mil.selected svg { fill: #ff2a2a; stroke: var(--fg); } .ac-marker.emergency svg { fill: var(--accent); stroke: #ff0; stroke-width: 1; animation: ac-pulse 1s ease-in-out infinite; } @keyframes ac-pulse { 0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 0, 0, 0.9)); } 50% { filter: drop-shadow(0 0 6px rgba(255, 90, 0, 1)); } } /* Slightly different glyph size hints per category */ .ac-marker.cat-rotor svg { fill: #cfe08a; } .ac-marker.cat-drone svg { fill: #c98bff; } .ac-marker.cat-light svg { fill: #8be2c8; } .ac-marker.cat-ground svg { fill: var(--muted); opacity: 0.9; } .ac-marker.selected.cat-rotor svg, .ac-marker.selected.cat-drone svg, .ac-marker.selected.cat-light svg, .ac-marker.selected.cat-ground svg { fill: var(--accent); } /* ---------- Filter / satellite chips ---------- */ .chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; } /* * Chips render as an LED-style toggle: * [ OFF ] Military (rest state: dark bg, dim border, hollow LED) * [ ON ] Military ✱ (active: filled accent bg, solid LED, bold) * The prefix "state pill" makes ON/OFF unambiguous at a glance without hover. */ .chip { position: relative; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-tiny); letter-spacing: 0.06em; padding: 5px 10px 5px 6px; text-transform: uppercase; cursor: pointer; font-weight: 500; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; } .chip::before { content: 'OFF'; display: inline-block; padding: 2px 5px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; background: transparent; color: var(--muted); border: 1px solid var(--muted); min-width: 26px; text-align: center; line-height: 1; } .chip:hover { border-color: var(--accent); color: var(--fg); background: rgba(232,53,10,0.08); } .chip:hover::before { color: var(--fg); border-color: var(--fg); } /* ACTIVE STATE — impossible to miss: * solid accent background + inverted text + "ON" pill filled with bg colour * + outer accent glow + slight scale-up. */ .chip.on { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; box-shadow: 0 0 0 2px var(--accent), 0 0 10px rgba(232,53,10,0.5); } .chip.on::before { content: 'ON'; background: var(--bg); color: var(--accent); border-color: var(--bg); min-width: 26px; } .chip:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } .chip-mil { border-color: rgba(255, 60, 60, 0.5); } .chip-mil::before { color: rgba(255,180,180,0.6); border-color: rgba(255,180,180,0.6); } .chip-mil:hover { border-color: #ff5e5e; background: rgba(255, 60, 60, 0.12); } .chip-mil.on { background: #ff2a2a; border-color: #ff2a2a; color: #100; box-shadow: 0 0 0 2px #ff2a2a, 0 0 12px rgba(255,60,60,0.6); } .chip-mil.on::before { background: #100; color: #ff2a2a; border-color: #100; } .chip-em { border-color: rgba(255, 140, 0, 0.5); } .chip-em::before { color: rgba(255,180,120,0.6); border-color: rgba(255,180,120,0.6); } .chip-em:hover { border-color: #ffb04a; background: rgba(255, 140, 0, 0.12); } .chip-em.on { background: #ffb04a; border-color: #ffb04a; color: #100; box-shadow: 0 0 0 2px #ffb04a, 0 0 12px rgba(255,180,80,0.6); } .chip-em.on::before { background: #100; color: #ffb04a; border-color: #100; } /* Active counter — sits above the chip row. */ .chip-counter { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: var(--fs-tiny); letter-spacing: 0.12em; text-transform: uppercase; margin: 4px 0 6px; padding: 3px 6px; border-left: 3px solid var(--rule); } .chip-counter.has-active { color: var(--accent); border-left-color: var(--accent); background: rgba(232,53,10,0.08); font-weight: 700; } /* Watch/Follow primary buttons — when the mode is active, add running badge. */ .btn-primary:not(:disabled) { border-color: var(--accent); color: var(--accent); } .btn-running, button.running { border-color: var(--green) !important; color: var(--green) !important; background: rgba(76,175,80,0.08); position: relative; } .btn-running::before, button.running::before { content: '● LIVE '; color: var(--green); margin-right: 4px; animation: dot-pulse 1.4s ease-out infinite; } /* ---------- Self-check readout ---------- */ .selfcheck { margin-top: 8px; border: 1px solid var(--rule-soft); font-size: var(--fs-tiny); } .selfcheck-row { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--rule-soft); align-items: center; } .selfcheck-row:last-child { border-bottom: none; } .selfcheck-row .led { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); } .selfcheck-row.pending .led { background: var(--yellow); animation: dot-pulse 0.8s ease-out infinite; } .selfcheck-row.ok .led { background: var(--green); } .selfcheck-row.warn .led { background: var(--yellow); } .selfcheck-row.err .led { background: var(--accent); } .selfcheck-row .name { color: var(--fg); letter-spacing: 0.04em; } .selfcheck-row .status { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 9px; } .selfcheck-row.ok .status { color: var(--green); } .selfcheck-row.err .status { color: var(--accent); } .selfcheck-row .ms { color: var(--muted); font-size: 9px; text-align: right; } .selfcheck-summary { padding: 6px 8px; border-top: 1px solid var(--rule); background: var(--bg); color: var(--fg); font-size: var(--fs-tiny); letter-spacing: 0.08em; text-transform: uppercase; } /* ---------- Detail overlay ---------- */ .detail-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: stretch; justify-content: center; } .detail-overlay[hidden] { display: none; } .detail-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(2px); } .detail-card { position: relative; z-index: 1; margin: 4vh auto; width: min(1000px, 92vw); max-height: 92vh; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 0 40px rgba(232,53,10,0.35); display: flex; flex-direction: column; } .detail-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--rule); background: var(--bg); } .detail-title { color: var(--accent); font-size: calc(var(--fs-body) + 2px); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; } .detail-close { background: transparent; border: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-small); letter-spacing: 0.12em; } .detail-close:hover { border-color: var(--accent); color: var(--accent); } .detail-scroll { overflow-y: auto; padding: 20px 22px; font-size: calc(var(--fs-body) + 1px); } .detail-header { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--rule); margin-bottom: 16px; align-items: start; } .detail-cs { color: var(--accent); font-size: calc(var(--fs-body) + 12px); letter-spacing: 0.06em; font-weight: 600; line-height: 1.1; } .detail-icao { color: var(--muted); font-size: calc(var(--fs-body) + 1px); letter-spacing: 0.08em; margin-top: 4px; } .detail-icao .mil-tag { display: inline-block; background: #ff2a2a; color: #100; padding: 1px 6px; font-weight: 700; margin-left: 4px; } .detail-op { color: var(--fg); font-size: calc(var(--fs-body) + 3px); margin-top: 8px; } .detail-route { color: var(--accent); font-size: calc(var(--fs-body) + 4px); letter-spacing: 0.1em; margin-top: 6px; } .detail-photo { width: 260px; max-width: 40vw; height: auto; border: 1px solid var(--rule); object-fit: cover; } .detail-group { margin-bottom: 20px; } .detail-group h3 { color: var(--accent); font-size: calc(var(--fs-body) + 1px); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--rule-soft); font-weight: 500; } .detail-kv { display: grid; grid-template-columns: 200px 1fr; gap: 6px 16px; font-size: calc(var(--fs-body) + 1px); } .detail-kv dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-body); } .detail-kv dd { color: var(--fg); word-break: break-word; } @media (max-width: 720px) { .detail-card { margin: 0; width: 100vw; max-height: 100vh; border: none; } .detail-header { grid-template-columns: 1fr; } .detail-photo { width: 100%; max-width: 100%; } .detail-kv { grid-template-columns: 130px 1fr; } } /* Trail polyline rendered via leaflet polyline; styled inline. */ /* Bounding box draw helper. */ .bbox-rect { stroke: var(--accent); stroke-width: 1.5; fill: rgba(232, 53, 10, 0.05); stroke-dasharray: 4 3; } /* ---------- Scrollbars ---------- */ .sidebar::-webkit-scrollbar, .ac-list::-webkit-scrollbar, .stats-bar::-webkit-scrollbar { width: 8px; height: 8px; } .sidebar::-webkit-scrollbar-thumb, .ac-list::-webkit-scrollbar-thumb, .stats-bar::-webkit-scrollbar-thumb { background: var(--rule); } .sidebar::-webkit-scrollbar-track, .ac-list::-webkit-scrollbar-track, .stats-bar::-webkit-scrollbar-track { background: var(--surface); } /* ---------- Small viewport fallback ---------- */ @media (max-width: 720px) { .app { grid-template-columns: 1fr; grid-template-rows: var(--header-h) 55vh auto var(--stats-h); grid-template-areas: "header" "map" "sidebar" "stats"; } .sidebar { border-left: none; border-top: 1px solid var(--rule-soft); max-height: 45vh; } }