fix: apply UI tier to standalone dashboard pages (ADS-B, AIS, Satellite)

Each dashboard is a separate HTML page that doesn't inherit the main SPA's
localStorage restore. Add a synchronous tier-restore script before CSS loads
so html[data-ui-tier] selectors fire on first paint.

Also add enhanced/lean tier override blocks to each dashboard CSS to remap
the dashboard-local variables (--bg-dark, --bg-panel, --radar-cyan, etc.)
that variables.css doesn't cover, and add lean-mode scanline/bg hide rules
since components.css is not loaded on these pages.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
James Smith
2026-05-20 08:44:29 +01:00
parent 517eb8cb77
commit 9d41ffbb59
6 changed files with 105 additions and 0 deletions
+35
View File
@@ -2460,3 +2460,38 @@ body {
font-size: 11px;
}
}
/* ============================================
ENHANCED TIER — amber military console
============================================ */
html[data-ui-tier="enhanced"] {
--bg-dark: #080600;
--bg-panel: #0c0a04;
--bg-card: #0e0b05;
--radar-bg: #0c0a04;
--radar-cyan: #c89628;
--border-glow: rgba(200, 150, 40, 0.25);
--border-color: rgba(200, 150, 40, 0.2);
--grid-line: rgba(200, 150, 40, 0.07);
--accent-cyan: #c89628;
--accent-green: #c89628;
}
/* ============================================
LEAN TIER — flat dark, no GPU effects
============================================ */
html[data-ui-tier="lean"] {
--bg-dark: #111111;
--bg-panel: #181818;
--bg-card: #1a1a1a;
--radar-bg: #181818;
--border-glow: transparent;
--border-color: #2a2a2a;
--grid-line: transparent;
--noise-image: none;
}
html[data-ui-tier="lean"] .scanline,
html[data-ui-tier="lean"] .radar-bg {
display: none;
}
+35
View File
@@ -1373,3 +1373,38 @@ body {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
/* ============================================
ENHANCED TIER — amber military console
============================================ */
html[data-ui-tier="enhanced"] {
--bg-dark: #080600;
--bg-panel: #0c0a04;
--bg-card: #0e0b05;
--radar-bg: #0c0a04;
--radar-cyan: #c89628;
--border-glow: rgba(200, 150, 40, 0.25);
--border-color: rgba(200, 150, 40, 0.2);
--grid-line: rgba(200, 150, 40, 0.07);
--accent-cyan: #c89628;
--accent-green: #c89628;
}
/* ============================================
LEAN TIER — flat dark, no GPU effects
============================================ */
html[data-ui-tier="lean"] {
--bg-dark: #111111;
--bg-panel: #181818;
--bg-card: #1a1a1a;
--radar-bg: #181818;
--border-glow: transparent;
--border-color: #2a2a2a;
--grid-line: transparent;
--noise-image: none;
}
html[data-ui-tier="lean"] .scanline,
html[data-ui-tier="lean"] .radar-bg {
display: none;
}
+32
View File
@@ -1778,3 +1778,35 @@ body.embedded .panel {
body.embedded .controls-bar {
padding: 10px 15px;
}
/* ============================================
ENHANCED TIER — amber military console
============================================ */
html[data-ui-tier="enhanced"] {
--bg-dark: #080600;
--bg-panel: #0c0a04;
--bg-card: #0e0b05;
--border-glow: rgba(200, 150, 40, 0.25);
--border-color: rgba(200, 150, 40, 0.2);
--grid-line: rgba(200, 150, 40, 0.07);
--accent-cyan: #c89628;
--accent-green: #c89628;
}
/* ============================================
LEAN TIER — flat dark, no GPU effects
============================================ */
html[data-ui-tier="lean"] {
--bg-dark: #111111;
--bg-panel: #181818;
--bg-card: #1a1a1a;
--border-glow: transparent;
--border-color: #2a2a2a;
--grid-line: transparent;
--noise-image: none;
}
html[data-ui-tier="lean"] .scanline,
html[data-ui-tier="lean"] .grid-bg {
display: none;
}
+1
View File
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AIRCRAFT RADAR // INTERCEPT - See the Invisible</title>
<script>(function(){var t=localStorage.getItem('intercept-ui-tier')||'enhanced';document.documentElement.setAttribute('data-ui-tier',t);})();</script>
<!-- Dedicated dashboards always use bundled assets so navigation is not
blocked by external CDN reachability. -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/fonts-local.css') }}">
+1
View File
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VESSEL RADAR // INTERCEPT - See the Invisible</title>
<script>(function(){var t=localStorage.getItem('intercept-ui-tier')||'enhanced';document.documentElement.setAttribute('data-ui-tier',t);})();</script>
<!-- Dedicated dashboards always use bundled assets so navigation is not
blocked by external CDN reachability. -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/fonts-local.css') }}">
+1
View File
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SATELLITE COMMAND // iNTERCEPT - See the Invisible</title>
<script>(function(){var t=localStorage.getItem('intercept-ui-tier')||'enhanced';document.documentElement.setAttribute('data-ui-tier',t);})();</script>
<!-- Dedicated dashboards always use bundled assets so navigation is not
blocked by external CDN reachability. -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/fonts-local.css') }}">