Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-06-18 02:19:46 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix: introduce --accent-cyan-rgb to make all opacity variants theme-aware

Browse Source 
All files used hardcoded rgba(74, 163/158, 255, X) values in actual CSS
rules that CSS variable overrides couldn't touch. Solution: add
--accent-cyan-rgb triplet to variables.css root/light/enhanced blocks,
then replace every rgba(74,1xx,255,) occurrence across all CSS files
with rgba(var(--accent-cyan-rgb),). Enhanced tier sets the triplet to
200, 150, 40 (amber), so tscm.css panel bg, index.css card borders,
and all other tinted surfaces go amber automatically.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
James Smith
2026-05-20 08:53:25 +01:00
parent 9d41ffbb59
commit 5100f55586
20 changed files with 250 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/adsb_dashboard.css
+39 -39
View File
@@ -21,7 +21,7 @@
--accent-red: #e25d5d;
--accent-yellow: #e1c26b;
--accent-amber: #d6a85e;
--grid-line: rgba(74, 163, 255, 0.1);
--grid-line: rgba(var(--accent-cyan-rgb), 0.1);
--noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");
--radar-cyan: #4aa3ff;
--radar-bg: #101823;
@@ -329,7 +329,7 @@ body {
}
.acars-collapse-btn:hover {
background: rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.2);
}
.acars-collapse-label {
@@ -447,7 +447,7 @@ body {
}
.acars-message-item:hover {
background: rgba(74, 158, 255, 0.05);
background: rgba(var(--accent-cyan-rgb), 0.05);
}
@keyframes fadeIn {
@@ -490,7 +490,7 @@ body {
}
.vdl2-collapse-btn:hover {
background: rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.2);
}
.vdl2-collapse-label {
@@ -610,7 +610,7 @@ body {
}
.vdl2-message-item:hover {
background: rgba(74, 158, 255, 0.08);
background: rgba(var(--accent-cyan-rgb), 0.08);
}
/* VDL2 Message Modal */
@@ -787,7 +787,7 @@ body {
/* Panels */
.panel {
background: var(--bg-panel);
border: 1px solid rgba(74, 158, 255, 0.2);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
overflow: hidden;
position: relative;
}
@@ -804,8 +804,8 @@ body {
.panel-header {
padding: 10px 15px;
background: rgba(74, 158, 255, 0.05);
border-bottom: 1px solid rgba(74, 158, 255, 0.1);
background: rgba(var(--accent-cyan-rgb), 0.05);
border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.1);
font-family: 'Orbitron', monospace;
font-size: 11px;
font-weight: 500;
@@ -984,7 +984,7 @@ body {
display: flex;
flex-direction: column;
border-left: none;
border-top: 1px solid rgba(74, 158, 255, 0.2);
border-top: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
overflow: hidden;
max-height: 40vh;
}
@@ -993,7 +993,7 @@ body {
.sidebar {
grid-column: 2;
grid-row: 1;
border-left: 1px solid rgba(74, 158, 255, 0.2);
border-left: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
border-top: none;
max-height: none;
}
@@ -1088,7 +1088,7 @@ body {
.aircraft-item {
position: relative;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(74, 158, 255, 0.15);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
border-radius: 4px;
padding: 8px 10px;
margin-bottom: 6px;
@@ -1098,13 +1098,13 @@ body {
.aircraft-item:hover {
border-color: var(--accent-cyan);
background: rgba(74, 158, 255, 0.05);
background: rgba(var(--accent-cyan-rgb), 0.05);
}
.aircraft-item.selected {
border-color: var(--accent-cyan);
box-shadow: 0 0 15px rgba(74, 158, 255, 0.2);
background: rgba(74, 158, 255, 0.1);
box-shadow: 0 0 15px rgba(var(--accent-cyan-rgb), 0.2);
background: rgba(var(--accent-cyan-rgb), 0.1);
}
.aircraft-header {
@@ -1125,7 +1125,7 @@ body {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-secondary);
background: rgba(74, 158, 255, 0.1);
background: rgba(var(--accent-cyan-rgb), 0.1);
padding: 2px 5px;
border-radius: 3px;
}
@@ -1177,8 +1177,8 @@ body {
align-items: flex-start;
gap: 4px;
padding: 6px 10px;
background: rgba(74, 158, 255, 0.03);
border: 1px solid rgba(74, 158, 255, 0.1);
background: rgba(var(--accent-cyan-rgb), 0.03);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.1);
border-radius: 6px;
}
@@ -1207,8 +1207,8 @@ body {
align-items: flex-start;
gap: 4px;
padding: 6px 10px;
background: rgba(74, 158, 255, 0.03);
border: 1px solid rgba(74, 158, 255, 0.1);
background: rgba(var(--accent-cyan-rgb), 0.03);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.1);
border-radius: 6px;
}
@@ -1247,7 +1247,7 @@ body {
.control-group select {
padding: 4px 8px;
background: var(--bg-dark);
border: 1px solid rgba(74, 158, 255, 0.3);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
border-radius: 4px;
color: var(--accent-cyan);
font-family: var(--font-mono);
@@ -1258,7 +1258,7 @@ body {
.control-group input[type="number"] {
padding: 4px 6px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(74, 158, 255, 0.3);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
border-radius: 4px;
color: var(--accent-cyan);
font-family: var(--font-mono);
@@ -1322,7 +1322,7 @@ body {
width: 40px;
height: 4px;
-webkit-appearance: none;
background: rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.2);
border-radius: 2px;
}
@@ -1376,8 +1376,8 @@ body {
/* GPS button */
.gps-btn {
padding: 6px 10px;
background: rgba(74, 158, 255, 0.2);
border: 1px solid rgba(74, 158, 255, 0.3);
background: rgba(var(--accent-cyan-rgb), 0.2);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
border-radius: 4px;
color: var(--accent-cyan);
font-family: var(--font-mono);
@@ -1677,7 +1677,7 @@ body {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 1;
border-color: rgba(74, 158, 255, 1);
border-color: rgba(var(--accent-cyan-rgb), 1);
}
50% {
opacity: 0.6;
@@ -1685,7 +1685,7 @@ body {
100% {
transform: translate(-50%, -50%) scale(1.8);
opacity: 0;
border-color: rgba(74, 158, 255, 0);
border-color: rgba(var(--accent-cyan-rgb), 0);
}
}
@@ -1868,15 +1868,15 @@ body {
flex-direction: column;
align-items: center;
padding: 4px 10px;
background: rgba(74, 158, 255, 0.05);
border: 1px solid rgba(74, 158, 255, 0.15);
background: rgba(var(--accent-cyan-rgb), 0.05);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
border-radius: 4px;
min-width: 55px;
}
.strip-stat:hover {
background: rgba(74, 158, 255, 0.1);
border-color: rgba(74, 158, 255, 0.3);
background: rgba(var(--accent-cyan-rgb), 0.1);
border-color: rgba(var(--accent-cyan-rgb), 0.3);
}
.strip-value {
@@ -1925,7 +1925,7 @@ body {
.strip-report-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
box-shadow: 0 4px 12px rgba(var(--accent-cyan-rgb), 0.3);
}
/* ============================================
@@ -2111,7 +2111,7 @@ body {
}
.report-table tr:hover {
background: rgba(74, 158, 255, 0.05);
background: rgba(var(--accent-cyan-rgb), 0.05);
}
.report-more {
@@ -2183,7 +2183,7 @@ body {
.strip-divider {
width: 1px;
height: 24px;
background: rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.2);
margin: 0 4px;
}
@@ -2193,8 +2193,8 @@ body {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(74, 158, 255, 0.1);
border: 1px solid rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.1);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
color: var(--text-primary);
padding: 6px 10px;
border-radius: 4px;
@@ -2212,8 +2212,8 @@ body {
}
.strip-btn:hover:not(:disabled) {
background: rgba(74, 158, 255, 0.2);
border-color: rgba(74, 158, 255, 0.4);
background: rgba(var(--accent-cyan-rgb), 0.2);
border-color: rgba(var(--accent-cyan-rgb), 0.4);
}
.strip-btn:disabled {
@@ -2229,7 +2229,7 @@ body {
.strip-btn.primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
box-shadow: 0 4px 12px rgba(var(--accent-cyan-rgb), 0.3);
}
/* Status and time in strip */
@@ -2272,7 +2272,7 @@ body {
color: var(--accent-cyan);
font-family: var(--font-mono);
padding-left: 8px;
border-left: 1px solid rgba(74, 158, 255, 0.2);
border-left: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
white-space: nowrap;
}