diff --git a/static/css/adsb_dashboard.css b/static/css/adsb_dashboard.css index 01b5c5d..92080a7 100644 --- a/static/css/adsb_dashboard.css +++ b/static/css/adsb_dashboard.css @@ -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; } diff --git a/static/css/adsb_history.css b/static/css/adsb_history.css index deb6ad8..02f29ec 100644 --- a/static/css/adsb_history.css +++ b/static/css/adsb_history.css @@ -11,14 +11,14 @@ --bg-panel: #101823; --bg-card: #151f2b; --border-color: #263246; - --border-glow: rgba(74, 163, 255, 0.4); + --border-glow: rgba(var(--accent-cyan-rgb), 0.4); --text-primary: #d7e0ee; --text-secondary: #9fb0c7; --text-dim: #6f7f94; --accent-cyan: #4aa3ff; --accent-green: #38c180; --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"); } @@ -297,7 +297,7 @@ body { .primary-btn:hover { transform: translateY(-1px); - box-shadow: 0 6px 14px rgba(74, 158, 255, 0.3); + box-shadow: 0 6px 14px rgba(var(--accent-cyan-rgb), 0.3); } .primary-btn:disabled { @@ -411,7 +411,7 @@ body { } .aircraft-row:hover { - background: rgba(74, 158, 255, 0.1); + background: rgba(var(--accent-cyan-rgb), 0.1); } .aircraft-row.military { @@ -440,9 +440,9 @@ body { } .civ-badge { - background: rgba(74, 158, 255, 0.15); + background: rgba(var(--accent-cyan-rgb), 0.15); color: var(--text-dim); - border: 1px solid rgba(74, 158, 255, 0.25); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.25); } .mono { @@ -602,8 +602,8 @@ body { } .nav-btn { - background: rgba(74, 158, 255, 0.15); - border: 1px solid rgba(74, 158, 255, 0.4); + background: rgba(var(--accent-cyan-rgb), 0.15); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.4); color: var(--accent-cyan); padding: 6px 10px; border-radius: 6px; diff --git a/static/css/ais_dashboard.css b/static/css/ais_dashboard.css index a1a901f..f6fe444 100644 --- a/static/css/ais_dashboard.css +++ b/static/css/ais_dashboard.css @@ -24,7 +24,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; @@ -249,15 +249,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 { @@ -321,7 +321,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; } @@ -367,15 +367,15 @@ 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; } .strip-btn { position: relative; z-index: 10; - 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; @@ -387,8 +387,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.primary { @@ -467,7 +467,7 @@ body { background: var(--bg-panel); color: var(--text-primary); border-radius: 4px; - border: 1px solid rgba(74, 158, 255, 0.2); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.2); } .leaflet-popup-tip { @@ -479,7 +479,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; background: var(--bg-panel); @@ -489,7 +489,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; } @@ -498,7 +498,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; } @@ -515,8 +515,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: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-size: 11px; font-weight: 500; @@ -557,7 +557,7 @@ body { flex-shrink: 0; max-height: 480px; overflow-y: auto; - border-bottom: 1px solid rgba(74, 158, 255, 0.2); + border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.2); } .selected-info { @@ -600,7 +600,7 @@ body { font-family: var(--font-mono); font-size: 10px; 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; } @@ -649,7 +649,7 @@ body { .vessel-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; @@ -662,13 +662,13 @@ body { .vessel-item:hover { border-color: var(--accent-cyan); - background: rgba(74, 158, 255, 0.05); + background: rgba(var(--accent-cyan-rgb), 0.05); } .vessel-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); } .vessel-item-icon { @@ -712,7 +712,7 @@ body { gap: 8px; padding: 8px 15px; background: var(--bg-panel); - border-top: 1px solid rgba(74, 158, 255, 0.3); + border-top: 1px solid rgba(var(--accent-cyan-rgb), 0.3); font-size: 11px; overflow: hidden; } @@ -725,8 +725,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; } @@ -740,8 +740,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; } @@ -780,7 +780,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); @@ -791,7 +791,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); @@ -889,7 +889,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; @@ -897,7 +897,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); } } diff --git a/static/css/components/function-strip.css b/static/css/components/function-strip.css index d35c721..8ed2ef1 100644 --- a/static/css/components/function-strip.css +++ b/static/css/components/function-strip.css @@ -36,15 +36,15 @@ flex-direction: column; align-items: center; padding: 6px 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; } .function-strip .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); } .function-strip .strip-value { @@ -165,8 +165,8 @@ /* Buttons */ .function-strip .strip-btn { - 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 12px; border-radius: 4px; @@ -178,8 +178,8 @@ } .function-strip .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); } .function-strip .strip-btn.primary { @@ -365,12 +365,12 @@ } .function-strip.listening-strip .strip-stat { - background: rgba(74, 158, 255, 0.05); - border-color: rgba(74, 158, 255, 0.15); + background: rgba(var(--accent-cyan-rgb), 0.05); + border-color: rgba(var(--accent-cyan-rgb), 0.15); } .function-strip.listening-strip .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); } .function-strip.listening-strip .strip-value { color: var(--accent-cyan); diff --git a/static/css/components/signal-cards.css b/static/css/components/signal-cards.css index e11f2f8..77e5322 100644 --- a/static/css/components/signal-cards.css +++ b/static/css/components/signal-cards.css @@ -153,7 +153,7 @@ } .signal-filter-btn.active .signal-filter-count { - background: rgba(74, 158, 255, 0.2); + background: rgba(var(--accent-cyan-rgb), 0.2); color: var(--accent-cyan); } @@ -268,7 +268,7 @@ .signal-proto-badge.pocsag { background: var(--accent-cyan-dim); color: var(--accent-cyan); - border-color: rgba(74, 158, 255, 0.25); + border-color: rgba(var(--accent-cyan-rgb), 0.25); } .signal-proto-badge.flex { @@ -557,12 +557,12 @@ .signal-action-btn.primary { background: var(--accent-cyan-dim); - border-color: rgba(74, 158, 255, 0.25); + border-color: rgba(var(--accent-cyan-rgb), 0.25); color: var(--accent-cyan); } .signal-action-btn.primary:hover { - background: rgba(74, 158, 255, 0.2); + background: rgba(var(--accent-cyan-rgb), 0.2); } .signal-action-btn.danger { @@ -691,8 +691,8 @@ position: absolute; inset: 0; background-image: - linear-gradient(rgba(74, 158, 255, 0.08) 1px, transparent 1px), - linear-gradient(90deg, rgba(74, 158, 255, 0.08) 1px, transparent 1px); + linear-gradient(rgba(var(--accent-cyan-rgb), 0.08) 1px, transparent 1px), + linear-gradient(90deg, rgba(var(--accent-cyan-rgb), 0.08) 1px, transparent 1px); background-size: 14px 14px; } diff --git a/static/css/components/toast.css b/static/css/components/toast.css index c7c81fa..53f59b4 100644 --- a/static/css/components/toast.css +++ b/static/css/components/toast.css @@ -501,8 +501,8 @@ } .update-result-info { - background: rgba(74, 158, 255, 0.1); - border: 1px solid rgba(74, 158, 255, 0.3); + background: rgba(var(--accent-cyan-rgb), 0.1); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.3); } .update-result-info .update-result-icon { diff --git a/static/css/components/ux-platform.css b/static/css/components/ux-platform.css index 2c26f5e..8be3033 100644 --- a/static/css/components/ux-platform.css +++ b/static/css/components/ux-platform.css @@ -7,7 +7,7 @@ gap: 10px; padding: 8px 14px; margin: 6px 12px 0; - border: 1px solid rgba(74, 163, 255, 0.32); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.32); border-radius: 8px; background: linear-gradient(180deg, rgba(19, 30, 44, 0.96), rgba(11, 18, 28, 0.97)); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04); @@ -42,7 +42,7 @@ gap: 6px; padding: 3px 7px; border-radius: 999px; - border: 1px solid rgba(74, 163, 255, 0.25); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.25); background: linear-gradient(180deg, rgba(17, 26, 38, 0.82), rgba(12, 18, 28, 0.84)); font-size: 10px; color: var(--text-secondary, #b1c2d4); @@ -63,9 +63,9 @@ } .run-state-chip.active { - border-color: rgba(74, 163, 255, 0.65); + border-color: rgba(var(--accent-cyan-rgb), 0.65); color: var(--text-primary, #e6edf5); - box-shadow: inset 0 0 0 1px rgba(74, 163, 255, 0.18); + box-shadow: inset 0 0 0 1px rgba(var(--accent-cyan-rgb), 0.18); } .run-state-right { @@ -82,7 +82,7 @@ .run-state-btn { background: linear-gradient(180deg, rgba(17, 27, 41, 0.9), rgba(10, 16, 25, 0.92)); color: var(--accent-cyan, #4aa3ff); - border: 1px solid rgba(74, 163, 255, 0.45); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.45); border-radius: 6px; font-size: 10px; padding: 4px 8px; @@ -91,8 +91,8 @@ } .run-state-btn:hover { - background: rgba(74, 163, 255, 0.14); - border-color: rgba(74, 163, 255, 0.7); + background: rgba(var(--accent-cyan-rgb), 0.14); + border-color: rgba(var(--accent-cyan-rgb), 0.7); transform: translateY(-1px); } @@ -114,7 +114,7 @@ .command-palette { width: min(760px, 100%); - border: 1px solid rgba(74, 163, 255, 0.32); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.32); border-radius: 12px; background: linear-gradient(180deg, rgba(16, 26, 39, 0.98), rgba(10, 17, 27, 0.98)); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.04); @@ -198,7 +198,7 @@ .command-palette-item.active, .command-palette-item:hover, .command-palette-item:focus-visible { - background: rgba(74, 163, 255, 0.12); + background: rgba(var(--accent-cyan-rgb), 0.12); outline: none; } @@ -402,7 +402,7 @@ } .app-toast-actions button:hover { - border-color: rgba(74, 163, 255, 0.5); + border-color: rgba(var(--accent-cyan-rgb), 0.5); color: var(--text-primary, #e6edf5); } diff --git a/static/css/core/components.css b/static/css/core/components.css index 34051d6..0023666 100644 --- a/static/css/core/components.css +++ b/static/css/core/components.css @@ -136,7 +136,7 @@ ============================================ */ .card { background: var(--surface-panel-gradient); - border: 1px solid rgba(74, 163, 255, 0.24); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.24); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04); @@ -147,7 +147,7 @@ align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); - border-bottom: 1px solid rgba(74, 163, 255, 0.18); + border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.18); background: linear-gradient(180deg, rgba(25, 38, 55, 0.88) 0%, rgba(17, 27, 40, 0.9) 100%); position: relative; } @@ -173,7 +173,7 @@ /* Panel variant (used in dashboards) */ .panel { background: var(--surface-panel-gradient); - border: 1px solid rgba(74, 163, 255, 0.24); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.24); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04); @@ -202,7 +202,7 @@ align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); - border-bottom: 1px solid rgba(74, 163, 255, 0.18); + border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.18); background: linear-gradient(180deg, rgba(25, 38, 55, 0.88) 0%, rgba(17, 27, 40, 0.9) 100%); font-size: var(--text-xs); font-weight: var(--font-semibold); diff --git a/static/css/core/layout.css b/static/css/core/layout.css index be4d7dd..a5d12c4 100644 --- a/static/css/core/layout.css +++ b/static/css/core/layout.css @@ -750,7 +750,7 @@ background: var(--accent-cyan-glow); color: var(--text-primary); border-left: 2px solid var(--accent-cyan); - box-shadow: -2px 0 8px rgba(74, 163, 255, 0.2); + box-shadow: -2px 0 8px rgba(var(--accent-cyan-rgb), 0.2); padding-left: 12px; /* compensate for 2px border */ } @@ -858,7 +858,7 @@ background: var(--accent-cyan-glow); color: var(--text-primary); border-left: 2px solid var(--accent-cyan); - box-shadow: -2px 0 8px rgba(74, 163, 255, 0.2); + box-shadow: -2px 0 8px rgba(var(--accent-cyan-rgb), 0.2); padding-left: 12px; } @@ -906,7 +906,7 @@ background: var(--accent-cyan-glow); color: var(--text-primary); border-left: 2px solid var(--accent-cyan); - box-shadow: -2px 0 6px rgba(74, 163, 255, 0.15); + box-shadow: -2px 0 6px rgba(var(--accent-cyan-rgb), 0.15); padding-left: 10px; } diff --git a/static/css/core/map-utils.css b/static/css/core/map-utils.css index de59ef4..02c5238 100644 --- a/static/css/core/map-utils.css +++ b/static/css/core/map-utils.css @@ -14,7 +14,7 @@ background: rgba(7, 9, 14, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); - border: 1px solid rgba(74, 163, 255, 0.18); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.18); border-radius: 4px; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; @@ -98,7 +98,7 @@ .map-range-label span { display: inline-block; background: rgba(7, 9, 14, 0.7); - color: rgba(74, 163, 255, 0.7); + color: rgba(var(--accent-cyan-rgb), 0.7); font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 9px; padding: 1px 4px; @@ -111,7 +111,7 @@ .map-glass-popup .leaflet-popup-content-wrapper { background: var(--bg-elevated, #161d28) !important; - border: 1px solid var(--border-color, rgba(74,163,255,0.15)) !important; + border: 1px solid var(--border-color, rgba(var(--accent-cyan-rgb),0.15)) !important; border-radius: 6px !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); diff --git a/static/css/core/variables.css b/static/css/core/variables.css index d9637af..884eaa5 100644 --- a/static/css/core/variables.css +++ b/static/css/core/variables.css @@ -18,7 +18,7 @@ --bg-overlay: rgba(8, 13, 20, 0.75); --surface-glass: rgba(16, 25, 37, 0.82); --surface-panel-gradient: linear-gradient(160deg, rgba(20, 32, 47, 0.94) 0%, rgba(11, 18, 27, 0.96) 100%); - --ambient-top-left: rgba(74, 163, 255, 0.14); + --ambient-top-left: rgba(var(--accent-cyan-rgb), 0.14); --ambient-top-right: rgba(56, 193, 128, 0.09); --ambient-bottom: rgba(214, 168, 94, 0.06); @@ -28,9 +28,10 @@ /* Accent colors */ --accent-cyan: #4aa3ff; - --accent-cyan-dim: rgba(74, 163, 255, 0.16); + --accent-cyan-rgb: 74, 163, 255; + --accent-cyan-dim: rgba(var(--accent-cyan-rgb), 0.16); --accent-cyan-hover: #6bb3ff; - --accent-cyan-glow: rgba(74, 163, 255, 0.12); + --accent-cyan-glow: rgba(var(--accent-cyan-rgb), 0.12); --accent-green: #38c180; --accent-green-hover: #16a34a; --accent-green-dim: rgba(56, 193, 128, 0.18); @@ -54,7 +55,7 @@ /* Borders */ --border-color: #263246; --border-light: #354458; - --border-glow: rgba(74, 163, 255, 0.25); + --border-glow: rgba(var(--accent-cyan-rgb), 0.25); --border-focus: var(--accent-cyan); /* Status colors */ @@ -77,7 +78,7 @@ --neon-red: #ff3366; /* Subtle grid/pattern */ - --grid-line: rgba(74, 163, 255, 0.1); + --grid-line: rgba(var(--accent-cyan-rgb), 0.1); --grid-dot: rgba(255, 255, 255, 0.03); --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"); @@ -146,7 +147,7 @@ --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 18px rgba(0, 0, 0, 0.45); - --shadow-glow: 0 0 18px rgba(74, 163, 255, 0.16); + --shadow-glow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.16); /* ============================================ TRANSITIONS @@ -198,6 +199,7 @@ --bg-panel: var(--bg-secondary); --accent-cyan: #1f5fa8; + --accent-cyan-rgb: 31, 95, 168; --accent-cyan-dim: rgba(31, 95, 168, 0.12); --accent-cyan-hover: #2c73bf; --accent-green: #1f8a57; @@ -315,6 +317,7 @@ html[data-ui-tier="enhanced"] { --surface-panel-gradient: linear-gradient(160deg, rgba(20, 16, 8, 0.94) 0%, rgba(12, 10, 4, 0.96) 100%); --accent-cyan: #c89628; + --accent-cyan-rgb: 200, 150, 40; --accent-cyan-dim: rgba(200, 150, 40, 0.14); --accent-cyan-hover: #e0aa30; --accent-cyan-glow: rgba(200, 150, 40, 0.10); diff --git a/static/css/index.css b/static/css/index.css index 7856274..a14aecd 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -16,7 +16,7 @@ /* Accent colors - slate/cyan */ --accent-cyan: #4aa3ff; - --accent-cyan-dim: rgba(74, 163, 255, 0.16); + --accent-cyan-dim: rgba(var(--accent-cyan-rgb), 0.16); --accent-green: #38c180; --accent-green-dim: rgba(56, 193, 128, 0.18); --accent-red: #e25d5d; @@ -34,7 +34,7 @@ /* Borders */ --border-color: #263246; --border-light: #354458; - --border-glow: rgba(74, 163, 255, 0.25); + --border-glow: rgba(var(--accent-cyan-rgb), 0.25); /* Status colors */ --status-online: #38c180; @@ -43,7 +43,7 @@ --status-offline: #6f7f94; /* Subtle grid/pattern */ - --grid-line: rgba(74, 163, 255, 0.1); + --grid-line: rgba(var(--accent-cyan-rgb), 0.1); --grid-dot: rgba(255, 255, 255, 0.03); --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"); } @@ -125,8 +125,8 @@ body { right: 0; bottom: 0; background: - radial-gradient(circle at 50% 50%, rgba(74, 163, 255, 0.04) 0%, transparent 50%), - linear-gradient(180deg, transparent 0%, rgba(74, 163, 255, 0.03) 100%); + radial-gradient(circle at 50% 50%, rgba(var(--accent-cyan-rgb), 0.04) 0%, transparent 50%), + linear-gradient(180deg, transparent 0%, rgba(var(--accent-cyan-rgb), 0.03) 100%); pointer-events: none; } @@ -3676,7 +3676,7 @@ header h1 .tagline { .network-row:hover { background: var(--bg-tertiary); } .network-row.selected { - background: rgba(74, 163, 255, 0.07); + background: rgba(var(--accent-cyan-rgb), 0.07); border-left-color: var(--accent-cyan) !important; } @@ -4800,7 +4800,7 @@ header h1 .tagline { /* Selected device highlight */ .bt-device-row.selected { - background: rgba(74, 163, 255, 0.07); + background: rgba(var(--accent-cyan-rgb), 0.07); border-left-color: var(--accent-cyan) !important; } @@ -5027,7 +5027,7 @@ header h1 .tagline { } .bt-sort-btn:hover { color: var(--text-primary); } -.bt-sort-btn.active { color: var(--accent-cyan); background: rgba(74,163,255,0.08); } +.bt-sort-btn.active { color: var(--accent-cyan); background: rgba(var(--accent-cyan-rgb),0.08); } .bt-filter-btn { padding: 3px 8px; @@ -5048,8 +5048,8 @@ header h1 .tagline { .bt-filter-btn.active { color: var(--accent-cyan); - border-color: rgba(74,163,255,0.4); - background: rgba(74,163,255,0.08); + border-color: rgba(var(--accent-cyan-rgb),0.4); + background: rgba(var(--accent-cyan-rgb),0.08); } .bt-tracker-item { @@ -6452,7 +6452,7 @@ body::before { text-shadow: 0 0 10px var(--accent-cyan), 0 0 25px var(--accent-cyan), - 0 0 50px rgba(74, 158, 255, 0.4); + 0 0 50px rgba(var(--accent-cyan-rgb), 0.4); letter-spacing: 2px; line-height: 1; } @@ -7306,11 +7306,11 @@ body::before { :root { --visual-surface-soft: linear-gradient(180deg, rgba(18, 28, 40, 0.9) 0%, rgba(10, 16, 24, 0.95) 100%); --visual-surface-panel: linear-gradient(160deg, rgba(20, 33, 48, 0.95) 0%, rgba(11, 18, 27, 0.96) 100%); - --visual-edge-cyan: rgba(74, 163, 255, 0.34); + --visual-edge-cyan: rgba(var(--accent-cyan-rgb), 0.34); --visual-edge-green: rgba(56, 193, 128, 0.28); --visual-glow-soft: 0 14px 30px rgba(0, 0, 0, 0.32); - --visual-glow-cyan: 0 0 24px rgba(74, 163, 255, 0.16); - --mode-ambient-left: rgba(74, 163, 255, 0.12); + --visual-glow-cyan: 0 0 24px rgba(var(--accent-cyan-rgb), 0.16); + --mode-ambient-left: rgba(var(--accent-cyan-rgb), 0.12); --mode-ambient-right: rgba(56, 193, 128, 0.08); --mode-ambient-bottom: rgba(214, 168, 94, 0.05); --top-rail-gutter: 12px; @@ -7333,14 +7333,14 @@ body[data-mode="wifi"], body[data-mode="bluetooth"], body[data-mode="bt_locate"] { --mode-ambient-left: rgba(56, 193, 128, 0.14); - --mode-ambient-right: rgba(74, 163, 255, 0.08); + --mode-ambient-right: rgba(var(--accent-cyan-rgb), 0.08); } body[data-mode="satellite"], body[data-mode="weathersat"], body[data-mode="sstv"], body[data-mode="sstv_general"] { - --mode-ambient-left: rgba(74, 163, 255, 0.14); + --mode-ambient-left: rgba(var(--accent-cyan-rgb), 0.14); --mode-ambient-right: rgba(143, 123, 214, 0.09); --mode-ambient-bottom: rgba(56, 193, 128, 0.05); } @@ -7349,7 +7349,7 @@ body[data-mode="analytics"], body[data-mode="spystations"], body[data-mode="tscm"] { --mode-ambient-left: rgba(214, 168, 94, 0.12); - --mode-ambient-right: rgba(74, 163, 255, 0.08); + --mode-ambient-right: rgba(var(--accent-cyan-rgb), 0.08); } [data-theme="light"] body { @@ -7369,7 +7369,7 @@ body[data-mode="tscm"] { .mode-nav { background: linear-gradient(180deg, rgba(22, 33, 48, 0.96) 0%, rgba(14, 22, 33, 0.98) 100%); - border-bottom-color: rgba(74, 163, 255, 0.24); + border-bottom-color: rgba(var(--accent-cyan-rgb), 0.24); } #mainNav.mode-nav { @@ -7377,20 +7377,20 @@ body[data-mode="tscm"] { padding: 0 12px; min-height: var(--top-rail-height); height: var(--top-rail-height); - border: 1px solid rgba(74, 163, 255, 0.22); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.22); border-radius: 10px; box-shadow: var(--visual-glow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.03); } .mode-nav-dropdown-menu { background: linear-gradient(180deg, #162130 0%, #0e1621 100%); - border-color: rgba(74, 163, 255, 0.22); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(74, 163, 255, 0.1); + border-color: rgba(var(--accent-cyan-rgb), 0.22); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-cyan-rgb), 0.1); } .run-state-strip { margin: 8px var(--top-rail-gutter) 0; - border-color: rgba(74, 163, 255, 0.3); + border-color: rgba(var(--accent-cyan-rgb), 0.3); background: linear-gradient(180deg, rgba(20, 31, 44, 0.96) 0%, rgba(12, 19, 29, 0.97) 100%); box-shadow: var(--visual-glow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.04); min-height: var(--top-rail-height); @@ -7414,7 +7414,7 @@ body[data-mode="tscm"] { .main-content { margin: 0 12px; - border: 1px solid rgba(74, 163, 255, 0.22); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.22); border-radius: 10px; box-shadow: var(--visual-glow-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.02); backdrop-filter: blur(6px); @@ -7422,12 +7422,12 @@ body[data-mode="tscm"] { .sidebar { background: var(--visual-surface-soft); - border-right-color: rgba(74, 163, 255, 0.22); + border-right-color: rgba(var(--accent-cyan-rgb), 0.22); } .section { background: var(--visual-surface-panel); - border-color: rgba(74, 163, 255, 0.22); + border-color: rgba(var(--accent-cyan-rgb), 0.22); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; @@ -7440,7 +7440,7 @@ body[data-mode="tscm"] { .section h3 { background: linear-gradient(180deg, #1c2c3f 0%, #141f2c 100%); - border-bottom-color: rgba(74, 163, 255, 0.2); + border-bottom-color: rgba(var(--accent-cyan-rgb), 0.2); } .section h3::before { @@ -7449,13 +7449,13 @@ body[data-mode="tscm"] { .section h3::after { background: rgba(12, 18, 28, 0.9); - border: 1px solid rgba(74, 163, 255, 0.24); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.24); } .form-group input, .form-group select { background: rgba(8, 13, 20, 0.72); - border-color: rgba(74, 163, 255, 0.2); + border-color: rgba(var(--accent-cyan-rgb), 0.2); border-radius: 6px; } @@ -7470,7 +7470,7 @@ body[data-mode="tscm"] { .preset-btn, .control-btn, .clear-btn { - border-color: rgba(74, 163, 255, 0.24); + border-color: rgba(var(--accent-cyan-rgb), 0.24); background: linear-gradient(180deg, rgba(16, 24, 35, 0.88) 0%, rgba(10, 15, 24, 0.9) 100%); } @@ -7480,7 +7480,7 @@ body[data-mode="tscm"] { .output-header { background: linear-gradient(180deg, rgba(18, 28, 42, 0.95) 0%, rgba(13, 21, 31, 0.98) 100%); - border-bottom-color: rgba(74, 163, 255, 0.22); + border-bottom-color: rgba(var(--accent-cyan-rgb), 0.22); } .output-content { @@ -7488,12 +7488,12 @@ body[data-mode="tscm"] { } .stats > div { - border-color: rgba(74, 163, 255, 0.2); + border-color: rgba(var(--accent-cyan-rgb), 0.2); background: linear-gradient(180deg, rgba(19, 28, 40, 0.8) 0%, rgba(12, 18, 27, 0.82) 100%); } .message { - border-color: rgba(74, 163, 255, 0.26); + border-color: rgba(var(--accent-cyan-rgb), 0.26); border-left-width: 4px; border-radius: 8px; background: linear-gradient(180deg, rgba(21, 31, 44, 0.8) 0%, rgba(15, 23, 33, 0.82) 100%); @@ -7504,14 +7504,14 @@ body[data-mode="tscm"] { position: sticky; bottom: 0; z-index: 9; - border-top-color: rgba(74, 163, 255, 0.24); + border-top-color: rgba(var(--accent-cyan-rgb), 0.24); background: linear-gradient(180deg, rgba(17, 26, 39, 0.96) 0%, rgba(10, 16, 24, 0.97) 100%); backdrop-filter: blur(7px); } .status-indicator, .control-group { - border-color: rgba(74, 163, 255, 0.2); + border-color: rgba(var(--accent-cyan-rgb), 0.2); background: linear-gradient(180deg, rgba(15, 23, 34, 0.78) 0%, rgba(9, 14, 23, 0.8) 100%); border-radius: 6px; } diff --git a/static/css/modes/acars.css b/static/css/modes/acars.css index 28bc85f..9575f44 100644 --- a/static/css/modes/acars.css +++ b/static/css/modes/acars.css @@ -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); } diff --git a/static/css/modes/aprs.css b/static/css/modes/aprs.css index c29dc0c..4e327f8 100644 --- a/static/css/modes/aprs.css +++ b/static/css/modes/aprs.css @@ -18,14 +18,14 @@ 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; } .aprs-strip .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); } .aprs-strip .strip-value { font-family: var(--font-mono); @@ -114,8 +114,8 @@ /* Buttons */ .aprs-strip .strip-btn { - 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 12px; border-radius: 4px; @@ -126,8 +126,8 @@ white-space: nowrap; } .aprs-strip .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); } .aprs-strip .strip-btn.primary { background: linear-gradient(135deg, var(--accent-green) 0%, #10b981 100%); @@ -223,8 +223,8 @@ .aprs-status-dot.tracking { background: var(--accent-green); } .aprs-status-dot.error { background: var(--accent-red); } @keyframes aprs-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 8px 4px 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 8px 4px rgba(var(--accent-cyan-rgb), 0.3); } } .aprs-status-text { font-size: 10px; @@ -339,7 +339,7 @@ gap: 5px; padding: 2px 7px 2px 5px; border-radius: 999px; - border: 1px solid rgba(74, 158, 255, 0.35); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.35); background: rgba(10, 18, 28, 0.88); color: var(--text-primary); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); diff --git a/static/css/modes/meshtastic.css b/static/css/modes/meshtastic.css index c67c6d8..d2b30e0 100644 --- a/static/css/modes/meshtastic.css +++ b/static/css/modes/meshtastic.css @@ -650,9 +650,9 @@ } .mesh-badge-primary { - background: rgba(74, 158, 255, 0.15); + background: rgba(var(--accent-cyan-rgb), 0.15); color: var(--accent-cyan); - border: 1px solid rgba(74, 158, 255, 0.3); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.3); } .mesh-badge-secondary { @@ -1349,7 +1349,7 @@ } .mesh-traceroute-snr.snr-ok { - background: rgba(74, 158, 255, 0.15); + background: rgba(var(--accent-cyan-rgb), 0.15); color: var(--accent-cyan); } @@ -1572,7 +1572,7 @@ } .mesh-network-neighbor-snr.snr-ok { - background: rgba(74, 158, 255, 0.15); + background: rgba(var(--accent-cyan-rgb), 0.15); color: var(--accent-cyan); } diff --git a/static/css/modes/spy-stations.css b/static/css/modes/spy-stations.css index 7285278..1da78e5 100644 --- a/static/css/modes/spy-stations.css +++ b/static/css/modes/spy-stations.css @@ -128,9 +128,9 @@ } .spy-badge-number { - background: rgba(74, 158, 255, 0.15); + background: rgba(var(--accent-cyan-rgb), 0.15); color: var(--accent-cyan); - border: 1px solid rgba(74, 158, 255, 0.3); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.3); } .spy-badge-diplomatic { diff --git a/static/css/modes/tscm.css b/static/css/modes/tscm.css index 30234de..37da1e5 100644 --- a/static/css/modes/tscm.css +++ b/static/css/modes/tscm.css @@ -102,7 +102,7 @@ transition: background 0.2s; } .tscm-device-item:hover { - background: rgba(74,158,255,0.1); + background: rgba(var(--accent-cyan-rgb),0.1); } .tscm-device-item.new { border-left-color: var(--severity-high); @@ -212,9 +212,9 @@ font-size: 9px; padding: 1px 4px; border-radius: 3px; - background: rgba(74, 158, 255, 0.2); + background: rgba(var(--accent-cyan-rgb), 0.2); color: var(--accent-cyan); - border: 1px solid rgba(74, 158, 255, 0.4); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.4); text-transform: uppercase; letter-spacing: 0.4px; } @@ -544,8 +544,8 @@ padding: 12px 16px; font-size: 10px; color: var(--text-secondary); - background: rgba(74, 158, 255, 0.1); - border-top: 1px solid rgba(74, 158, 255, 0.3); + background: rgba(var(--accent-cyan-rgb), 0.1); + border-top: 1px solid rgba(var(--accent-cyan-rgb), 0.3); } .tscm-threat-action { margin-top: 6px; @@ -605,7 +605,7 @@ .protocol-badge { font-size: 9px; padding: 2px 6px; - background: rgba(74, 158, 255, 0.2); + background: rgba(var(--accent-cyan-rgb), 0.2); color: var(--accent-cyan); border-radius: 3px; text-transform: uppercase; @@ -709,7 +709,7 @@ } .scanner-track { fill: none; - stroke: rgba(74,158,255,0.1); + stroke: rgba(var(--accent-cyan-rgb),0.1); stroke-width: 4; } .scanner-progress { @@ -1081,7 +1081,7 @@ transition: background 0.2s; } .case-item:hover { - background: rgba(74, 158, 255, 0.1); + background: rgba(var(--accent-cyan-rgb), 0.1); } .case-item.priority-high { border-left-color: var(--accent-red); } .case-item.priority-normal { border-left-color: var(--accent-cyan); } @@ -1359,7 +1359,7 @@ .known-device-type { font-size: 9px; padding: 2px 6px; - background: rgba(74, 158, 255, 0.2); + background: rgba(var(--accent-cyan-rgb), 0.2); color: var(--accent-cyan); border-radius: 3px; margin-left: 8px; @@ -1557,8 +1557,8 @@ gap: 8px; padding: 8px 10px; margin-bottom: 10px; - background: rgba(74, 158, 255, 0.12); - border: 1px solid rgba(74, 158, 255, 0.3); + background: rgba(var(--accent-cyan-rgb), 0.12); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.3); border-radius: 6px; font-size: 11px; } @@ -1569,9 +1569,9 @@ margin-left: auto; font-size: 9px; padding: 2px 6px; - background: rgba(74, 158, 255, 0.2); + background: rgba(var(--accent-cyan-rgb), 0.2); color: #9ed0ff; - border: 1px solid rgba(74, 158, 255, 0.4); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.4); border-radius: 3px; cursor: pointer; } diff --git a/static/css/modes/vdl2.css b/static/css/modes/vdl2.css index 2253866..3e81c49 100644 --- a/static/css/modes/vdl2.css +++ b/static/css/modes/vdl2.css @@ -12,8 +12,8 @@ background: var(--accent-red) !important; } @keyframes vdl2-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); } } /* VDL2 message animation */ @@ -23,7 +23,7 @@ animation: vdl2FadeIn 0.3s ease; } .vdl2-msg:hover { - background: rgba(74, 158, 255, 0.05); + background: rgba(var(--accent-cyan-rgb), 0.05); } @keyframes vdl2FadeIn { from { opacity: 0; transform: translateY(-3px); } diff --git a/static/css/modes/waterfall.css b/static/css/modes/waterfall.css index 255e1a5..6ee6b28 100644 --- a/static/css/modes/waterfall.css +++ b/static/css/modes/waterfall.css @@ -39,8 +39,8 @@ .wf-headline-tag { border-radius: 999px; padding: 1px 8px; - border: 1px solid rgba(74, 163, 255, 0.45); - background: rgba(74, 163, 255, 0.13); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.45); + background: rgba(var(--accent-cyan-rgb), 0.13); color: #8ec5ff; font-size: 10px; font-family: var(--font-mono, monospace); @@ -404,12 +404,12 @@ } .wf-step-btn:hover { - background: rgba(74, 163, 255, 0.17); - border-color: rgba(74, 163, 255, 0.45); + background: rgba(var(--accent-cyan-rgb), 0.17); + border-color: rgba(var(--accent-cyan-rgb), 0.45); } .wf-step-btn:active { - background: rgba(74, 163, 255, 0.28); + background: rgba(var(--accent-cyan-rgb), 0.28); } .wf-zoom-btn { @@ -422,7 +422,7 @@ align-items: center; gap: 5px; background: rgba(0, 0, 0, 0.55); - border: 1px solid rgba(74, 163, 255, 0.28); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.28); border-radius: 5px; padding: 3px 8px; flex-shrink: 0; @@ -652,7 +652,7 @@ .wf-resize-handle:hover, .wf-resize-handle.dragging { - background: rgba(74, 163, 255, 0.14); + background: rgba(var(--accent-cyan-rgb), 0.14); } .wf-resize-grip { @@ -665,7 +665,7 @@ .wf-resize-handle:hover .wf-resize-grip, .wf-resize-handle.dragging .wf-resize-grip { - background: rgba(74, 163, 255, 0.6); + background: rgba(var(--accent-cyan-rgb), 0.6); } /* Waterfall canvas */ @@ -705,7 +705,7 @@ .wf-tune-line { left: calc(50% - 0.5px); background: rgba(130, 220, 255, 0.75); - box-shadow: 0 0 8px rgba(74, 163, 255, 0.4); + box-shadow: 0 0 8px rgba(var(--accent-cyan-rgb), 0.4); opacity: 0; transition: opacity 140ms ease; } @@ -760,7 +760,7 @@ display: none; z-index: 10; white-space: nowrap; - border: 1px solid rgba(74, 163, 255, 0.22); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.22); } @media (max-width: 1023px) { @@ -904,13 +904,13 @@ .wf-side-box { margin-top: 8px; padding: 8px; - border: 1px solid rgba(74, 163, 255, 0.2); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.2); border-radius: 6px; background: rgba(0, 0, 0, 0.25); } .wf-side-box-muted { - border-color: rgba(74, 163, 255, 0.14); + border-color: rgba(var(--accent-cyan-rgb), 0.14); background: rgba(0, 0, 0, 0.2); } @@ -984,7 +984,7 @@ align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.24); - border: 1px solid rgba(74, 163, 255, 0.16); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.16); border-radius: 5px; padding: 5px 7px; min-width: 0; @@ -1067,7 +1067,7 @@ .wf-scan-metric-card { background: rgba(0, 0, 0, 0.24); - border: 1px solid rgba(74, 163, 255, 0.18); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.18); border-radius: 6px; padding: 7px 6px; text-align: center; @@ -1092,7 +1092,7 @@ margin-top: 8px; max-height: 145px; overflow: auto; - border: 1px solid rgba(74, 163, 255, 0.16); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.16); border-radius: 6px; } @@ -1146,7 +1146,7 @@ margin-top: 8px; max-height: 130px; overflow-y: auto; - border: 1px solid rgba(74, 163, 255, 0.16); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.16); border-radius: 6px; background: rgba(0, 0, 0, 0.2); padding: 6px; diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css index c6bc9e6..9a6e3cc 100644 --- a/static/css/satellite_dashboard.css +++ b/static/css/satellite_dashboard.css @@ -21,7 +21,7 @@ --accent-red: #e25d5d; --accent-purple: #8f7bd6; --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"); } @@ -380,7 +380,7 @@ body { .drawer-action-btn { padding: 8px 10px; - border: 1px solid rgba(74, 163, 255, 0.28); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.28); border-radius: 6px; background: rgba(8, 20, 31, 0.88); color: var(--text-secondary); @@ -392,12 +392,12 @@ body { } .drawer-action-btn:hover { - border-color: rgba(74, 163, 255, 0.65); + border-color: rgba(var(--accent-cyan-rgb), 0.65); color: var(--accent-cyan); } .drawer-action-btn-primary { - background: linear-gradient(135deg, rgba(74, 163, 255, 0.18), rgba(56, 193, 128, 0.14)); + background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.18), rgba(56, 193, 128, 0.14)); color: var(--text-primary); } @@ -410,7 +410,7 @@ body { min-height: 46px; padding: 9px 10px; border-radius: 6px; - border: 1px solid rgba(74, 163, 255, 0.16); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.16); background: rgba(255, 255, 255, 0.025); color: var(--text-secondary); font-size: 11px; @@ -455,7 +455,7 @@ body { .drawer-empty-state { padding: 12px; - border: 1px dashed rgba(74, 163, 255, 0.18); + border: 1px dashed rgba(var(--accent-cyan-rgb), 0.18); border-radius: 6px; color: var(--text-secondary); font-size: 11px; @@ -469,7 +469,7 @@ body { gap: 8px; padding: 7px 8px; margin-bottom: 6px; - border: 1px solid rgba(74, 163, 255, 0.12); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.12); border-radius: 6px; background: rgba(0, 0, 0, 0.22); } @@ -479,7 +479,7 @@ body { } .drawer-sat-item.builtin { - background: linear-gradient(135deg, rgba(74, 163, 255, 0.08), rgba(8, 20, 31, 0.9)); + background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.08), rgba(8, 20, 31, 0.9)); } .drawer-sat-label { @@ -536,7 +536,7 @@ body { .drawer-select, .drawer-field-value { padding: 8px 10px; - border: 1px solid rgba(74, 163, 255, 0.18); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.18); border-radius: 6px; background: rgba(0, 0, 0, 0.22); color: var(--text-primary); @@ -558,7 +558,7 @@ body { .drawer-info-card { padding: 9px 10px; - border: 1px solid rgba(74, 163, 255, 0.14); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.14); border-radius: 6px; background: rgba(255, 255, 255, 0.025); } @@ -599,7 +599,7 @@ body { width: min(720px, calc(100vw - 32px)); max-height: min(82vh, 860px); overflow: auto; - border: 1px solid rgba(74, 163, 255, 0.24); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.24); border-radius: 12px; background: linear-gradient(135deg, rgba(8, 19, 30, 0.98), rgba(10, 27, 43, 0.96)); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45); @@ -612,7 +612,7 @@ body { right: 12px; width: 34px; height: 34px; - border: 1px solid rgba(74, 163, 255, 0.24); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.24); border-radius: 50%; background: rgba(8, 20, 31, 0.88); color: var(--text-secondary); @@ -622,7 +622,7 @@ body { } .sat-management-close:hover { - border-color: rgba(74, 163, 255, 0.65); + border-color: rgba(var(--accent-cyan-rgb), 0.65); color: var(--accent-cyan); } @@ -650,7 +650,7 @@ body { .sat-management-tab { flex: 1; padding: 10px 12px; - border: 1px solid rgba(74, 163, 255, 0.22); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.22); border-radius: 8px; background: rgba(8, 20, 31, 0.82); color: var(--text-secondary); @@ -662,8 +662,8 @@ body { } .sat-management-tab.active { - background: linear-gradient(135deg, rgba(74, 163, 255, 0.18), rgba(56, 193, 128, 0.14)); - border-color: rgba(74, 163, 255, 0.5); + background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.18), rgba(56, 193, 128, 0.14)); + border-color: rgba(var(--accent-cyan-rgb), 0.5); color: var(--text-primary); } @@ -686,7 +686,7 @@ body { width: 100%; min-height: 180px; padding: 12px; - border: 1px solid rgba(74, 163, 255, 0.18); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.18); border-radius: 8px; background: rgba(0, 0, 0, 0.28); color: var(--text-primary); @@ -697,8 +697,8 @@ body { .sat-management-textarea:focus { outline: none; - border-color: rgba(74, 163, 255, 0.55); - box-shadow: 0 0 18px rgba(74, 163, 255, 0.12); + border-color: rgba(var(--accent-cyan-rgb), 0.55); + box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.12); } .sat-management-submit { @@ -711,7 +711,7 @@ body { margin-bottom: 12px; padding: 9px 10px; border-radius: 6px; - border: 1px solid rgba(74, 163, 255, 0.16); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.16); background: rgba(255, 255, 255, 0.025); color: var(--text-secondary); font-size: 11px; @@ -754,7 +754,7 @@ body { .pass-data-strip { width: 100%; max-width: 320px; - border-top: 1px solid rgba(74, 163, 255, 0.12); + border-top: 1px solid rgba(var(--accent-cyan-rgb), 0.12); padding-top: 10px; flex-shrink: 0; } @@ -844,7 +844,7 @@ body { .map-mode-btn, .map-action-btn { padding: 4px 8px; - border: 1px solid rgba(74, 163, 255, 0.28); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.28); border-radius: 4px; background: rgba(5, 18, 30, 0.85); color: var(--text-secondary); @@ -857,16 +857,16 @@ body { .map-mode-btn:hover, .map-action-btn:hover { - border-color: rgba(74, 163, 255, 0.65); + border-color: rgba(var(--accent-cyan-rgb), 0.65); color: var(--accent-cyan); } .map-mode-btn.active, .map-action-btn.active { color: var(--bg-dark); - background: linear-gradient(135deg, rgba(74, 163, 255, 0.95), rgba(79, 236, 182, 0.95)); + background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.95), rgba(79, 236, 182, 0.95)); border-color: transparent; - box-shadow: 0 0 18px rgba(74, 163, 255, 0.22); + box-shadow: 0 0 18px rgba(var(--accent-cyan-rgb), 0.22); } .map-overlay-card { @@ -876,7 +876,7 @@ body { z-index: 500; width: min(360px, calc(100% - 28px)); padding: 10px 12px; - border: 1px solid rgba(74, 163, 255, 0.22); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.22); border-radius: 8px; background: linear-gradient(135deg, rgba(5, 18, 30, 0.95), rgba(10, 27, 43, 0.9)); @@ -893,7 +893,7 @@ body { max-height: min(250px, calc(100% - 28px)); display: flex; flex-direction: column; - border: 1px solid rgba(74, 163, 255, 0.24); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.24); border-radius: 8px; background: linear-gradient(135deg, rgba(4, 14, 23, 0.94), rgba(10, 25, 39, 0.9)); @@ -916,7 +916,7 @@ body { justify-content: space-between; gap: 8px; padding: 9px 10px; - border-bottom: 1px solid rgba(74, 163, 255, 0.12); + border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.12); color: var(--accent-cyan); font-family: 'Orbitron', monospace; font-size: 10px; @@ -931,7 +931,7 @@ body { .packet-console-btn { padding: 4px 8px; - border: 1px solid rgba(74, 163, 255, 0.28); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.28); border-radius: 4px; background: rgba(8, 20, 31, 0.88); color: var(--text-secondary); @@ -943,7 +943,7 @@ body { } .packet-console-btn:hover { - border-color: rgba(74, 163, 255, 0.65); + border-color: rgba(var(--accent-cyan-rgb), 0.65); color: var(--accent-cyan); } @@ -1034,7 +1034,7 @@ body { max-height: min(80vh, 860px); display: flex; flex-direction: column; - border: 1px solid rgba(74, 163, 255, 0.24); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.24); border-radius: 10px; background: linear-gradient(135deg, rgba(8, 19, 30, 0.98), rgba(10, 27, 43, 0.96)); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); @@ -1047,7 +1047,7 @@ body { justify-content: space-between; gap: 12px; padding: 16px 18px; - border-bottom: 1px solid rgba(74, 163, 255, 0.14); + border-bottom: 1px solid rgba(var(--accent-cyan-rgb), 0.14); } .packet-modal-kicker { @@ -1507,7 +1507,7 @@ body { .leaflet-tooltip.map-track-tooltip { padding: 4px 7px; - border: 1px solid rgba(74, 163, 255, 0.3); + border: 1px solid rgba(var(--accent-cyan-rgb), 0.3); border-radius: 999px; background: rgba(4, 14, 23, 0.92); color: var(--text-primary);