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

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 4ac996a538
commit 8e89979770
20 changed files with 250 additions and 247 deletions
+6 -6
View File
@@ -28,7 +28,7 @@
transition: background 0.2s;
}
.main-acars-collapse-btn:hover {
background: rgba(74, 158, 255, 0.15);
background: rgba(var(--accent-cyan-rgb), 0.15);
}
.main-acars-collapse-label {
writing-mode: vertical-rl;
@@ -67,7 +67,7 @@
animation: fadeInMsg 0.3s ease;
}
.main-acars-msg:hover {
background: rgba(74, 158, 255, 0.05);
background: rgba(var(--accent-cyan-rgb), 0.05);
}
@keyframes fadeInMsg {
from { opacity: 0; transform: translateY(-3px); }
@@ -86,8 +86,8 @@
background: var(--accent-red) !important;
}
@keyframes acars-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.7); }
50% { opacity: 0.6; box-shadow: 0 0 6px 3px rgba(74, 158, 255, 0.3); }
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-cyan-rgb), 0.7); }
50% { opacity: 0.6; box-shadow: 0 0 6px 3px rgba(var(--accent-cyan-rgb), 0.3); }
}
/* ACARS Standalone Message Feed */
@@ -106,10 +106,10 @@
transition: background 0.15s;
}
.acars-feed-card:hover {
background: rgba(74, 158, 255, 0.05);
background: rgba(var(--accent-cyan-rgb), 0.05);
}
/* Clickable ACARS sidebar messages (linked to tracked aircraft) */
.acars-message-item[style*="cursor: pointer"]:hover {
background: rgba(74, 158, 255, 0.1);
background: rgba(var(--accent-cyan-rgb), 0.1);
}