diff --git a/static/css/adsb_dashboard.css b/static/css/adsb_dashboard.css
index 41b6515..cf86c02 100644
--- a/static/css/adsb_dashboard.css
+++ b/static/css/adsb_dashboard.css
@@ -414,7 +414,7 @@ body {
.acars-sidebar .acars-btn {
background: var(--accent-green);
border: none;
- color: #fff;
+ color: var(--text-inverse);
padding: 6px 10px;
font-size: 10px;
font-weight: 600;
@@ -575,7 +575,7 @@ body {
.vdl2-sidebar .vdl2-btn {
background: var(--accent-green);
border: none;
- color: #fff;
+ color: var(--text-inverse);
padding: 6px 10px;
font-size: 10px;
font-weight: 600;
@@ -1347,7 +1347,7 @@ body {
padding: 6px 16px;
border: none;
background: var(--accent-green);
- color: #fff;
+ color: var(--text-inverse);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
@@ -1365,7 +1365,7 @@ body {
.start-btn.active {
background: var(--accent-red);
- color: #fff;
+ color: var(--text-inverse);
}
.start-btn.active:hover {
@@ -1497,7 +1497,7 @@ body {
padding: 6px 12px;
background: var(--accent-green);
border: none;
- color: #fff;
+ color: var(--text-inverse);
border-radius: 4px;
cursor: pointer;
font-size: 11px;
@@ -1518,7 +1518,7 @@ body {
.airband-btn.active {
background: var(--accent-red);
- color: #fff;
+ color: var(--text-inverse);
}
.airband-btn.active:hover {
@@ -1912,7 +1912,7 @@ body {
.strip-report-btn {
background: linear-gradient(135deg, var(--accent-cyan) 0%, #2b6fb8 100%);
border: none;
- color: white;
+ color: var(--text-inverse);
padding: 8px 12px;
border-radius: 4px;
font-size: 10px;
@@ -2224,7 +2224,7 @@ body {
.strip-btn.primary {
background: linear-gradient(135deg, var(--accent-cyan) 0%, #2b6fb8 100%);
border: none;
- color: white;
+ color: var(--text-inverse);
}
.strip-btn.primary:hover {
diff --git a/static/css/ais_dashboard.css b/static/css/ais_dashboard.css
index 2dd5d2f..736b5d4 100644
--- a/static/css/ais_dashboard.css
+++ b/static/css/ais_dashboard.css
@@ -394,7 +394,7 @@ body {
.strip-btn.primary {
background: linear-gradient(135deg, var(--accent-cyan) 0%, #2b6fb8 100%);
border: none;
- color: white;
+ color: var(--text-inverse);
}
/* Main dashboard grid - Mobile first */
@@ -812,7 +812,7 @@ body {
padding: 6px 16px;
border: none;
background: var(--accent-green);
- color: #fff;
+ color: var(--text-inverse);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
@@ -830,7 +830,7 @@ body {
.start-btn.active {
background: var(--accent-red);
- color: #fff;
+ color: var(--text-inverse);
}
.start-btn.active:hover {
@@ -1282,7 +1282,7 @@ body {
.dsc-distress-alert button {
background: var(--accent-red);
border: none;
- color: white;
+ color: var(--text-inverse);
padding: 10px 24px;
font-family: var(--font-mono);
font-size: 12px;
@@ -1313,7 +1313,7 @@ body {
align-items: center;
justify-content: center;
font-size: 14px;
- color: white;
+ color: var(--text-inverse);
border: 2px solid white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
diff --git a/static/css/components/activity-timeline.css b/static/css/components/activity-timeline.css
index 62443df..123dfc8 100644
--- a/static/css/components/activity-timeline.css
+++ b/static/css/components/activity-timeline.css
@@ -136,7 +136,7 @@
.activity-timeline-btn.active {
background: var(--timeline-accent);
- color: #000;
+ color: var(--text-inverse);
border-color: var(--timeline-accent);
}
diff --git a/static/css/components/function-strip.css b/static/css/components/function-strip.css
index 878ef84..d35c721 100644
--- a/static/css/components/function-strip.css
+++ b/static/css/components/function-strip.css
@@ -185,7 +185,7 @@
.function-strip .strip-btn.primary {
background: linear-gradient(135deg, var(--accent-green) 0%, #10b981 100%);
border: none;
- color: #000;
+ color: var(--text-inverse);
}
.function-strip .strip-btn.primary:hover:not(:disabled) {
@@ -195,7 +195,7 @@
.function-strip .strip-btn.stop {
background: linear-gradient(135deg, var(--accent-red) 0%, #dc2626 100%);
border: none;
- color: #fff;
+ color: var(--text-inverse);
}
.function-strip .strip-btn.stop:hover:not(:disabled) {
@@ -304,7 +304,7 @@
border-color: rgba(0, 122, 255, 0.3);
}
.function-strip.bt-strip .strip-value {
- color: #0a84ff;
+ color: var(--accent-blue, #0a84ff);
}
.function-strip.wifi-strip .strip-stat {
@@ -332,24 +332,24 @@
border-color: rgba(255, 59, 48, 0.6);
}
.function-strip.tscm-strip .strip-value {
- color: #ef4444; /* Explicit red color */
+ color: var(--accent-red);
}
.function-strip.tscm-strip .strip-label {
- color: #9ca3af; /* Explicit light gray */
+ color: var(--text-secondary);
}
.function-strip.tscm-strip .strip-select {
- color: #e8eaed; /* Explicit white for selects */
+ color: var(--text-primary);
background: rgba(0, 0, 0, 0.4);
}
.function-strip.tscm-strip .strip-btn {
- color: #e8eaed; /* Explicit white for buttons */
+ color: var(--text-primary);
}
.function-strip.tscm-strip .strip-tool {
- color: #e8eaed; /* Explicit white for tool indicators */
+ color: var(--text-primary);
}
.function-strip.tscm-strip .strip-time,
.function-strip.tscm-strip .strip-status span {
- color: #9ca3af; /* Explicit gray for status/time */
+ color: var(--text-secondary);
}
.function-strip.rtlamr-strip .strip-stat {
@@ -361,7 +361,7 @@
border-color: rgba(175, 82, 222, 0.3);
}
.function-strip.rtlamr-strip .strip-value {
- color: #af52de;
+ color: var(--accent-purple, #af52de);
}
.function-strip.listening-strip .strip-stat {
diff --git a/static/css/components/proximity-viz.css b/static/css/components/proximity-viz.css
index 2a07dab..cd29378 100644
--- a/static/css/components/proximity-viz.css
+++ b/static/css/components/proximity-viz.css
@@ -1,293 +1,293 @@
-/**
- * Proximity Visualization Components
- * Styles for radar and timeline heatmap
- */
-
-/* ============================================
- PROXIMITY RADAR
- ============================================ */
-
-.proximity-radar-svg {
- display: block;
- margin: 0 auto;
-}
-
-.radar-device {
- cursor: pointer;
-}
-
-.radar-device:hover .radar-dot {
- filter: brightness(1.5);
-}
-
-/* Invisible larger hit area to prevent hover flicker */
-.radar-device-hitarea {
- fill: transparent;
- pointer-events: all;
-}
-
-.radar-dot-pulse circle:first-child {
- animation: radar-pulse 1.5s ease-out infinite;
-}
-
-@keyframes radar-pulse {
- 0% {
- transform: scale(1);
- opacity: 1;
- }
- 100% {
- transform: scale(2);
- opacity: 0;
- }
-}
-
-.radar-sweep {
- transform-origin: 50% 50%;
-}
-
-/* Radar filter buttons */
-.bt-radar-filter-btn {
- transition: all 0.2s ease;
-}
-
-.bt-radar-filter-btn:hover {
- background: var(--bg-hover, #333) !important;
- color: #fff !important;
-}
-
-.bt-radar-filter-btn.active {
- background: #00d4ff !important;
- color: #000 !important;
- border-color: #00d4ff !important;
-}
-
-#btRadarPauseBtn.active {
- background: #f97316 !important;
- color: #000 !important;
- border-color: #f97316 !important;
-}
-
-/* ============================================
- TIMELINE HEATMAP
- ============================================ */
-
-.timeline-heatmap-controls {
- display: flex;
- flex-wrap: wrap;
- gap: 12px;
- align-items: center;
- padding: 8px 0;
- margin-bottom: 8px;
- border-bottom: 1px solid var(--border-color, #333);
-}
-
-.heatmap-control-group {
- display: flex;
- align-items: center;
- gap: 6px;
- font-size: 11px;
- color: var(--text-dim, #888);
-}
-
-.heatmap-select {
- background: var(--bg-tertiary, #1a1a1a);
- border: 1px solid var(--border-color, #333);
- border-radius: 4px;
- color: var(--text-primary, #e0e0e0);
- font-size: 10px;
- padding: 4px 8px;
- cursor: pointer;
-}
-
-.heatmap-select:hover {
- border-color: var(--accent-color, #00d4ff);
-}
-
-.heatmap-btn {
- background: var(--bg-tertiary, #1a1a1a);
- border: 1px solid var(--border-color, #333);
- border-radius: 4px;
- color: var(--text-dim, #888);
- font-size: 10px;
- padding: 4px 12px;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-
-.heatmap-btn:hover {
- background: var(--bg-hover, #252525);
- color: var(--text-primary, #e0e0e0);
-}
-
-.heatmap-btn.active {
- background: #f97316;
- color: #000;
- border-color: #f97316;
-}
-
-.timeline-heatmap-content {
- max-height: 300px;
- overflow-y: auto;
- overflow-x: auto;
-}
-
-.heatmap-loading,
-.heatmap-empty,
-.heatmap-error {
- color: var(--text-dim, #666);
- text-align: center;
- padding: 30px;
- font-size: 12px;
-}
-
-.heatmap-error {
- color: #ef4444;
-}
-
-.heatmap-grid {
- display: flex;
- flex-direction: column;
- gap: 2px;
- min-width: max-content;
-}
-
-.heatmap-row {
- display: flex;
- align-items: center;
- gap: 4px;
- padding: 2px 0;
- cursor: pointer;
- border-radius: 4px;
- transition: background 0.2s ease;
-}
-
-.heatmap-row:hover:not(.heatmap-header) {
- background: rgba(255, 255, 255, 0.05);
-}
-
-.heatmap-row.selected {
- background: rgba(0, 212, 255, 0.1);
- outline: 1px solid rgba(0, 212, 255, 0.3);
-}
-
-.heatmap-header {
- cursor: default;
- border-bottom: 1px solid var(--border-color, #333);
- margin-bottom: 4px;
-}
-
-.heatmap-label {
- width: 120px;
- min-width: 120px;
- display: flex;
- flex-direction: column;
- gap: 2px;
- padding-right: 8px;
- overflow: hidden;
-}
-
-.heatmap-label .device-name {
- font-size: 10px;
- color: var(--text-primary, #e0e0e0);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.heatmap-label .device-rssi {
- font-size: 9px;
- color: var(--text-dim, #666);
- font-family: monospace;
-}
-
-.heatmap-cells {
- display: flex;
- gap: 1px;
-}
-
-.heatmap-cell {
- border-radius: 2px;
- transition: transform 0.1s ease;
-}
-
-.heatmap-cell:hover {
- transform: scale(1.5);
- z-index: 10;
- position: relative;
-}
-
-.heatmap-time-label {
- font-size: 8px;
- color: var(--text-dim, #666);
- text-align: center;
- transform: rotate(-45deg);
- white-space: nowrap;
-}
-
-.heatmap-legend {
- display: flex;
- align-items: center;
- gap: 12px;
- padding-top: 8px;
- margin-top: 8px;
- border-top: 1px solid var(--border-color, #333);
- font-size: 10px;
- color: var(--text-dim, #666);
-}
-
-.legend-label {
- font-weight: 500;
-}
-
-.legend-item {
- display: flex;
- align-items: center;
- gap: 4px;
-}
-
-.legend-color {
- width: 12px;
- height: 12px;
- border-radius: 2px;
-}
-
-/* ============================================
- ZONE SUMMARY
- ============================================ */
-
-#btZoneSummary {
- padding: 8px 0;
-}
-
-#btZoneSummary > div {
- min-width: 60px;
-}
-
-/* ============================================
- RESPONSIVE ADJUSTMENTS
- ============================================ */
-
-@media (max-width: 768px) {
- .timeline-heatmap-controls {
- flex-direction: column;
- align-items: stretch;
- }
-
- .heatmap-control-group {
- justify-content: space-between;
- }
-
- .proximity-radar-svg {
- max-width: 100%;
- height: auto;
- }
-
- #btRadarControls {
- flex-direction: column;
- gap: 4px;
- }
-
- #btZoneSummary {
- flex-wrap: wrap;
- }
-}
+/**
+ * Proximity Visualization Components
+ * Styles for radar and timeline heatmap
+ */
+
+/* ============================================
+ PROXIMITY RADAR
+ ============================================ */
+
+.proximity-radar-svg {
+ display: block;
+ margin: 0 auto;
+}
+
+.radar-device {
+ cursor: pointer;
+}
+
+.radar-device:hover .radar-dot {
+ filter: brightness(1.5);
+}
+
+/* Invisible larger hit area to prevent hover flicker */
+.radar-device-hitarea {
+ fill: transparent;
+ pointer-events: all;
+}
+
+.radar-dot-pulse circle:first-child {
+ animation: radar-pulse 1.5s ease-out infinite;
+}
+
+@keyframes radar-pulse {
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(2);
+ opacity: 0;
+ }
+}
+
+.radar-sweep {
+ transform-origin: 50% 50%;
+}
+
+/* Radar filter buttons */
+.bt-radar-filter-btn {
+ transition: all 0.2s ease;
+}
+
+.bt-radar-filter-btn:hover {
+ background: var(--bg-hover, #333) !important;
+ color: var(--text-primary) !important;
+}
+
+.bt-radar-filter-btn.active {
+ background: var(--accent-cyan) !important;
+ color: var(--text-inverse) !important;
+ border-color: var(--accent-cyan) !important;
+}
+
+#btRadarPauseBtn.active {
+ background: var(--accent-orange) !important;
+ color: var(--text-inverse) !important;
+ border-color: var(--accent-orange) !important;
+}
+
+/* ============================================
+ TIMELINE HEATMAP
+ ============================================ */
+
+.timeline-heatmap-controls {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ align-items: center;
+ padding: 8px 0;
+ margin-bottom: 8px;
+ border-bottom: 1px solid var(--border-color, #333);
+}
+
+.heatmap-control-group {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 11px;
+ color: var(--text-dim, #888);
+}
+
+.heatmap-select {
+ background: var(--bg-tertiary, #1a1a1a);
+ border: 1px solid var(--border-color, #333);
+ border-radius: 4px;
+ color: var(--text-primary, #e0e0e0);
+ font-size: 10px;
+ padding: 4px 8px;
+ cursor: pointer;
+}
+
+.heatmap-select:hover {
+ border-color: var(--accent-color, #00d4ff);
+}
+
+.heatmap-btn {
+ background: var(--bg-tertiary, #1a1a1a);
+ border: 1px solid var(--border-color, #333);
+ border-radius: 4px;
+ color: var(--text-dim, #888);
+ font-size: 10px;
+ padding: 4px 12px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.heatmap-btn:hover {
+ background: var(--bg-hover, #252525);
+ color: var(--text-primary, #e0e0e0);
+}
+
+.heatmap-btn.active {
+ background: var(--accent-orange);
+ color: var(--text-inverse);
+ border-color: var(--accent-orange);
+}
+
+.timeline-heatmap-content {
+ max-height: 300px;
+ overflow-y: auto;
+ overflow-x: auto;
+}
+
+.heatmap-loading,
+.heatmap-empty,
+.heatmap-error {
+ color: var(--text-dim, #666);
+ text-align: center;
+ padding: 30px;
+ font-size: 12px;
+}
+
+.heatmap-error {
+ color: var(--accent-red);
+}
+
+.heatmap-grid {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: max-content;
+}
+
+.heatmap-row {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 2px 0;
+ cursor: pointer;
+ border-radius: 4px;
+ transition: background 0.2s ease;
+}
+
+.heatmap-row:hover:not(.heatmap-header) {
+ background: rgba(255, 255, 255, 0.05);
+}
+
+.heatmap-row.selected {
+ background: rgba(0, 212, 255, 0.1);
+ outline: 1px solid rgba(0, 212, 255, 0.3);
+}
+
+.heatmap-header {
+ cursor: default;
+ border-bottom: 1px solid var(--border-color, #333);
+ margin-bottom: 4px;
+}
+
+.heatmap-label {
+ width: 120px;
+ min-width: 120px;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ padding-right: 8px;
+ overflow: hidden;
+}
+
+.heatmap-label .device-name {
+ font-size: 10px;
+ color: var(--text-primary, #e0e0e0);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.heatmap-label .device-rssi {
+ font-size: 9px;
+ color: var(--text-dim, #666);
+ font-family: monospace;
+}
+
+.heatmap-cells {
+ display: flex;
+ gap: 1px;
+}
+
+.heatmap-cell {
+ border-radius: 2px;
+ transition: transform 0.1s ease;
+}
+
+.heatmap-cell:hover {
+ transform: scale(1.5);
+ z-index: 10;
+ position: relative;
+}
+
+.heatmap-time-label {
+ font-size: 8px;
+ color: var(--text-dim, #666);
+ text-align: center;
+ transform: rotate(-45deg);
+ white-space: nowrap;
+}
+
+.heatmap-legend {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding-top: 8px;
+ margin-top: 8px;
+ border-top: 1px solid var(--border-color, #333);
+ font-size: 10px;
+ color: var(--text-dim, #666);
+}
+
+.legend-label {
+ font-weight: 500;
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.legend-color {
+ width: 12px;
+ height: 12px;
+ border-radius: 2px;
+}
+
+/* ============================================
+ ZONE SUMMARY
+ ============================================ */
+
+#btZoneSummary {
+ padding: 8px 0;
+}
+
+#btZoneSummary > div {
+ min-width: 60px;
+}
+
+/* ============================================
+ RESPONSIVE ADJUSTMENTS
+ ============================================ */
+
+@media (max-width: 768px) {
+ .timeline-heatmap-controls {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .heatmap-control-group {
+ justify-content: space-between;
+ }
+
+ .proximity-radar-svg {
+ max-width: 100%;
+ height: auto;
+ }
+
+ #btRadarControls {
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ #btZoneSummary {
+ flex-wrap: wrap;
+ }
+}
diff --git a/static/css/components/signal-cards.css b/static/css/components/signal-cards.css
index 87e65c4..91a3fe5 100644
--- a/static/css/components/signal-cards.css
+++ b/static/css/components/signal-cards.css
@@ -279,19 +279,19 @@
.signal-proto-badge.aprs {
background: rgba(6, 182, 212, 0.15);
- color: #06b6d4;
+ color: var(--proto-aprs, #06b6d4);
border-color: rgba(6, 182, 212, 0.25);
}
.signal-proto-badge.ais {
background: rgba(139, 92, 246, 0.15);
- color: #8b5cf6;
+ color: var(--proto-ais, #8b5cf6);
border-color: rgba(139, 92, 246, 0.25);
}
.signal-proto-badge.acars {
background: rgba(236, 72, 153, 0.15);
- color: #ec4899;
+ color: var(--proto-acars, #ec4899);
border-color: rgba(236, 72, 153, 0.25);
}
@@ -976,25 +976,25 @@
/* Meter protocol badges */
.signal-proto-badge.meter {
background: rgba(234, 179, 8, 0.15);
- color: #eab308;
+ color: var(--accent-yellow, #eab308);
border-color: rgba(234, 179, 8, 0.25);
}
.signal-proto-badge.meter.electric {
background: rgba(234, 179, 8, 0.15);
- color: #eab308;
+ color: var(--accent-yellow, #eab308);
border-color: rgba(234, 179, 8, 0.25);
}
.signal-proto-badge.meter.gas {
background: rgba(249, 115, 22, 0.15);
- color: #f97316;
+ color: var(--accent-orange, #f97316);
border-color: rgba(249, 115, 22, 0.25);
}
.signal-proto-badge.meter.water {
background: rgba(59, 130, 246, 0.15);
- color: #3b82f6;
+ color: var(--signal-new, #3b82f6);
border-color: rgba(59, 130, 246, 0.25);
}
@@ -1060,12 +1060,12 @@
.meter-delta.positive {
background: rgba(34, 197, 94, 0.15);
- color: #22c55e;
+ color: var(--accent-green);
}
.meter-delta.negative {
background: rgba(239, 68, 68, 0.15);
- color: #ef4444;
+ color: var(--accent-red);
}
/* Sparkline container */
@@ -1431,7 +1431,7 @@
.signal-station-clickable:hover {
background: var(--accent-purple);
- color: #000;
+ color: var(--text-inverse);
transform: scale(1.05);
box-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
}
@@ -1587,14 +1587,14 @@
background: var(--accent-purple, #8a2be2);
border: none;
border-radius: 4px;
- color: #fff;
+ color: var(--text-inverse);
cursor: pointer;
transition: all 0.15s ease;
}
.station-raw-copy-btn:hover {
background: var(--accent-cyan, #00d4ff);
- color: #000;
+ color: var(--text-inverse);
}
/* ============================================
@@ -1794,14 +1794,14 @@
background: var(--accent-purple, #8a2be2);
border: none;
border-radius: 4px;
- color: #fff;
+ color: var(--text-inverse);
cursor: pointer;
transition: all 0.15s ease;
}
.signal-details-copy-btn:hover {
background: var(--accent-cyan, #00d4ff);
- color: #000;
+ color: var(--text-inverse);
}
/* Signal Details Content Sections */
diff --git a/static/css/components/signal-timeline.css b/static/css/components/signal-timeline.css
index 8c1ddcc..b71e2aa 100644
--- a/static/css/components/signal-timeline.css
+++ b/static/css/components/signal-timeline.css
@@ -103,7 +103,7 @@
.signal-timeline-btn.active {
background: var(--accent-cyan, #4a9eff);
- color: #000;
+ color: var(--text-inverse);
border-color: var(--accent-cyan, #4a9eff);
}
diff --git a/static/css/components/toast.css b/static/css/components/toast.css
index c4308ac..c7c81fa 100644
--- a/static/css/components/toast.css
+++ b/static/css/components/toast.css
@@ -122,7 +122,7 @@
.update-toast-btn-primary {
background: var(--accent-green, #22c55e);
- color: #000;
+ color: var(--text-inverse);
}
.update-toast-btn-primary:hover {
@@ -561,7 +561,7 @@
.update-modal-btn-primary {
background: var(--accent-green, #22c55e);
- color: #000;
+ color: var(--text-inverse);
}
.update-modal-btn-primary:hover:not(:disabled) {
diff --git a/static/css/components/ux-platform.css b/static/css/components/ux-platform.css
index 8b70bae..d760076 100644
--- a/static/css/components/ux-platform.css
+++ b/static/css/components/ux-platform.css
@@ -323,7 +323,7 @@
}
.setup-btn.primary {
- color: #fff;
+ color: var(--text-inverse);
background: var(--accent-cyan, #4aa3ff);
border-color: var(--accent-cyan, #4aa3ff);
}
diff --git a/static/css/core/components.css b/static/css/core/components.css
index 680bd41..b1f06f7 100644
--- a/static/css/core/components.css
+++ b/static/css/core/components.css
@@ -1,24 +1,24 @@
-/**
- * INTERCEPT UI Components
- * Reusable component styles for buttons, cards, badges, etc.
- * Requires: variables.css and base.css
- */
-
-/* ============================================
- BUTTONS
- ============================================ */
-
-/* Base button */
+/**
+ * INTERCEPT UI Components
+ * Reusable component styles for buttons, cards, badges, etc.
+ * Requires: variables.css and base.css
+ */
+
+/* ============================================
+ BUTTONS
+ ============================================ */
+
+/* Base button */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
- gap: var(--space-2);
- padding: var(--space-2) var(--space-4);
- font-size: var(--text-sm);
- font-weight: var(--font-medium);
- border-radius: var(--radius-md);
- border: 1px solid transparent;
+ gap: var(--space-2);
+ padding: var(--space-2) var(--space-4);
+ font-size: var(--text-sm);
+ font-weight: var(--font-medium);
+ border-radius: var(--radius-md);
+ border: 1px solid transparent;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
@@ -27,30 +27,30 @@
text-transform: uppercase;
letter-spacing: 0.06em;
}
-
-.btn:focus-visible {
- outline: 2px solid var(--border-focus);
- outline-offset: 2px;
-}
-
-.btn:disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-/* Button variants */
+
+.btn:focus-visible {
+ outline: 2px solid var(--border-focus);
+ outline-offset: 2px;
+}
+
+.btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Button variants */
.btn-primary {
background: var(--accent-cyan);
color: var(--text-inverse);
border-color: var(--accent-cyan);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
-
-.btn-primary:hover:not(:disabled) {
- background: var(--accent-cyan-hover);
- border-color: var(--accent-cyan-hover);
-}
-
+
+.btn-primary:hover:not(:disabled) {
+ background: var(--accent-cyan-hover);
+ border-color: var(--accent-cyan-hover);
+}
+
.btn-secondary {
background: var(--bg-secondary);
color: var(--text-primary);
@@ -61,7 +61,7 @@
background: var(--bg-tertiary);
border-color: var(--border-light);
}
-
+
.btn-ghost {
background: transparent;
color: var(--text-secondary);
@@ -72,56 +72,56 @@
background: var(--bg-elevated);
color: var(--text-primary);
}
-
-.btn-danger {
- background: var(--accent-red);
- color: white;
- border-color: var(--accent-red);
-}
-
-.btn-danger:hover:not(:disabled) {
- background: #dc2626;
- border-color: #dc2626;
-}
-
-.btn-success {
- background: var(--accent-green);
- color: white;
- border-color: var(--accent-green);
-}
-
-.btn-success:hover:not(:disabled) {
- background: #16a34a;
- border-color: #16a34a;
-}
-
-/* Button sizes */
-.btn-sm {
- padding: var(--space-1) var(--space-2);
- font-size: var(--text-xs);
-}
-
-.btn-lg {
- padding: var(--space-3) var(--space-6);
- font-size: var(--text-base);
-}
-
-/* Icon button */
-.btn-icon {
- padding: var(--space-2);
- width: 36px;
- height: 36px;
-}
-
-.btn-icon.btn-sm {
- width: 28px;
- height: 28px;
- padding: var(--space-1);
-}
-
-/* ============================================
- CARDS / PANELS
- ============================================ */
+
+.btn-danger {
+ background: var(--accent-red);
+ color: var(--text-inverse);
+ border-color: var(--accent-red);
+}
+
+.btn-danger:hover:not(:disabled) {
+ background: #dc2626;
+ border-color: #dc2626;
+}
+
+.btn-success {
+ background: var(--accent-green);
+ color: var(--text-inverse);
+ border-color: var(--accent-green);
+}
+
+.btn-success:hover:not(:disabled) {
+ background: #16a34a;
+ border-color: #16a34a;
+}
+
+/* Button sizes */
+.btn-sm {
+ padding: var(--space-1) var(--space-2);
+ font-size: var(--text-xs);
+}
+
+.btn-lg {
+ padding: var(--space-3) var(--space-6);
+ font-size: var(--text-base);
+}
+
+/* Icon button */
+.btn-icon {
+ padding: var(--space-2);
+ width: 36px;
+ height: 36px;
+}
+
+.btn-icon.btn-sm {
+ width: 28px;
+ height: 28px;
+ padding: var(--space-1);
+}
+
+/* ============================================
+ CARDS / PANELS
+ ============================================ */
.card {
background: var(--surface-panel-gradient);
border: 1px solid rgba(74, 163, 255, 0.24);
@@ -130,7 +130,7 @@
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
backdrop-filter: blur(5px);
}
-
+
.card-header {
display: flex;
align-items: center;
@@ -140,26 +140,26 @@
background: linear-gradient(180deg, rgba(25, 38, 55, 0.88) 0%, rgba(17, 27, 40, 0.9) 100%);
position: relative;
}
-
-.card-header-title {
- font-size: var(--text-xs);
- font-weight: var(--font-semibold);
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: var(--text-secondary);
-}
-
-.card-body {
- padding: var(--space-4);
-}
-
-.card-footer {
- padding: var(--space-3) var(--space-4);
- border-top: 1px solid var(--border-color);
- background: var(--bg-secondary);
-}
-
-/* Panel variant (used in dashboards) */
+
+.card-header-title {
+ font-size: var(--text-xs);
+ font-weight: var(--font-semibold);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--text-secondary);
+}
+
+.card-body {
+ padding: var(--space-4);
+}
+
+.card-footer {
+ padding: var(--space-3) var(--space-4);
+ border-top: 1px solid var(--border-color);
+ background: var(--bg-secondary);
+}
+
+/* Panel variant (used in dashboards) */
.panel {
background: var(--surface-panel-gradient);
border: 1px solid rgba(74, 163, 255, 0.24);
@@ -186,7 +186,7 @@
);
}
}
-
+
.panel-header {
display: flex;
align-items: center;
@@ -213,26 +213,26 @@
background: var(--accent-cyan);
opacity: 0.7;
}
-
-.panel-indicator {
- width: 8px;
- height: 8px;
- border-radius: var(--radius-full);
- background: var(--status-offline);
-}
-
-.panel-indicator.active {
- background: var(--status-online);
- box-shadow: 0 0 8px var(--status-online);
-}
-
-.panel-content {
- padding: var(--space-3);
-}
-
-/* ============================================
- BADGES
- ============================================ */
+
+.panel-indicator {
+ width: 8px;
+ height: 8px;
+ border-radius: var(--radius-full);
+ background: var(--status-offline);
+}
+
+.panel-indicator.active {
+ background: var(--status-online);
+ box-shadow: 0 0 8px var(--status-online);
+}
+
+.panel-content {
+ padding: var(--space-3);
+}
+
+/* ============================================
+ BADGES
+ ============================================ */
.badge {
display: inline-flex;
align-items: center;
@@ -245,22 +245,22 @@
color: var(--text-secondary);
border: 1px solid var(--border-color);
}
-
-.badge-primary {
- background: var(--accent-cyan-dim);
- color: var(--accent-cyan);
-}
-
-.badge-success {
- background: var(--accent-green-dim);
- color: var(--accent-green);
-}
-
-.badge-warning {
- background: var(--accent-orange-dim);
- color: var(--accent-orange);
-}
-
+
+.badge-primary {
+ background: var(--accent-cyan-dim);
+ color: var(--accent-cyan);
+}
+
+.badge-success {
+ background: var(--accent-green-dim);
+ color: var(--accent-green);
+}
+
+.badge-warning {
+ background: var(--accent-orange-dim);
+ color: var(--accent-orange);
+}
+
.badge-danger {
background: var(--accent-red-dim);
color: var(--accent-red);
@@ -308,347 +308,347 @@
color: var(--accent-red);
background: var(--accent-red-dim);
}
-
-/* ============================================
- STATUS INDICATORS
- ============================================ */
-.status-dot {
- width: 8px;
- height: 8px;
- border-radius: var(--radius-full);
- background: var(--status-offline);
- flex-shrink: 0;
-}
-
+
+/* ============================================
+ STATUS INDICATORS
+ ============================================ */
+.status-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: var(--radius-full);
+ background: var(--status-offline);
+ flex-shrink: 0;
+}
+
.status-dot.online,
.status-dot.active {
background: var(--status-online);
box-shadow: 0 0 4px var(--status-online);
}
-
+
.status-dot.warning {
background: var(--status-warning);
box-shadow: 0 0 4px var(--status-warning);
}
-
-.status-dot.error,
-.status-dot.offline {
- background: var(--status-error);
-}
-
-.status-dot.inactive {
- background: var(--status-offline);
-}
-
-/* Pulse animation for active status */
-.status-dot.pulse {
- animation: statusPulse 2s ease-in-out infinite;
-}
-
-@keyframes statusPulse {
- 0%, 100% { opacity: 1; }
- 50% { opacity: 0.5; }
-}
-
-/* ============================================
- EMPTY STATE
- ============================================ */
-.empty-state {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: var(--space-8) var(--space-4);
- text-align: center;
- color: var(--text-muted);
-}
-
-.empty-state-icon {
- width: 48px;
- height: 48px;
- margin-bottom: var(--space-4);
- opacity: 0.5;
-}
-
-.empty-state-title {
- font-size: var(--text-base);
- font-weight: var(--font-medium);
- color: var(--text-secondary);
- margin-bottom: var(--space-2);
-}
-
-.empty-state-description {
- font-size: var(--text-sm);
- color: var(--text-dim);
- max-width: 300px;
-}
-
-.empty-state-action {
- margin-top: var(--space-4);
-}
-
-/* ============================================
- LOADING STATES
- ============================================ */
-.spinner {
- width: 20px;
- height: 20px;
- border: 2px solid var(--border-color);
- border-top-color: var(--accent-cyan);
- border-radius: var(--radius-full);
- animation: spin 0.8s linear infinite;
-}
-
-.spinner-sm {
- width: 14px;
- height: 14px;
- border-width: 2px;
-}
-
-.spinner-lg {
- width: 32px;
- height: 32px;
- border-width: 3px;
-}
-
-@keyframes spin {
- to { transform: rotate(360deg); }
-}
-
-/* Loading overlay */
-.loading-overlay {
- position: absolute;
- inset: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--bg-overlay);
- z-index: var(--z-modal);
-}
-
-/* Skeleton loader */
-.skeleton {
- background: linear-gradient(
- 90deg,
- var(--bg-tertiary) 25%,
- var(--bg-elevated) 50%,
- var(--bg-tertiary) 75%
- );
- background-size: 200% 100%;
- animation: shimmer 1.5s infinite;
- border-radius: var(--radius-sm);
-}
-
-@keyframes shimmer {
- 0% { background-position: 200% 0; }
- 100% { background-position: -200% 0; }
-}
-
-/* ============================================
- STATS STRIP
- ============================================ */
-.stats-strip {
- display: flex;
- align-items: center;
- background: var(--bg-secondary);
- border-bottom: 1px solid var(--border-color);
- padding: 0 var(--space-4);
- height: var(--stats-strip-height);
- overflow-x: auto;
- gap: var(--space-1);
-}
-
-.strip-stat {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 0 var(--space-3);
- min-width: fit-content;
-}
-
-.strip-value {
- font-family: var(--font-mono);
- font-size: var(--text-sm);
- font-weight: var(--font-semibold);
- color: var(--accent-cyan);
- line-height: 1;
-}
-
-.strip-label {
- font-size: 9px;
- color: var(--text-dim);
- text-transform: uppercase;
- letter-spacing: 0.05em;
- line-height: 1;
- margin-top: 2px;
-}
-
-.strip-divider {
- width: 1px;
- height: 20px;
- background: var(--border-color);
- margin: 0 var(--space-2);
-}
-
-/* ============================================
- FORM GROUPS
- ============================================ */
-.form-group {
- margin-bottom: var(--space-4);
-}
-
-.form-group label {
- display: block;
- margin-bottom: var(--space-1);
- font-size: var(--text-sm);
- font-weight: var(--font-medium);
- color: var(--text-secondary);
-}
-
-.form-group input,
-.form-group select,
-.form-group textarea {
- width: 100%;
-}
-
-.form-help {
- margin-top: var(--space-1);
- font-size: var(--text-xs);
- color: var(--text-dim);
-}
-
-.form-error {
- margin-top: var(--space-1);
- font-size: var(--text-xs);
- color: var(--accent-red);
-}
-
-/* Inline checkbox/radio */
-.form-check {
- display: flex;
- align-items: center;
- gap: var(--space-2);
- cursor: pointer;
-}
-
-.form-check input {
- width: auto;
-}
-
-.form-check label {
- margin-bottom: 0;
- cursor: pointer;
-}
-
-/* ============================================
- ALERTS / TOASTS
- ============================================ */
-.alert {
- display: flex;
- align-items: flex-start;
- gap: var(--space-3);
- padding: var(--space-3) var(--space-4);
- border-radius: var(--radius-md);
- border: 1px solid;
- font-size: var(--text-sm);
-}
-
-.alert-info {
- background: var(--accent-cyan-dim);
- border-color: var(--accent-cyan);
- color: var(--accent-cyan);
-}
-
-.alert-success {
- background: var(--accent-green-dim);
- border-color: var(--accent-green);
- color: var(--accent-green);
-}
-
-.alert-warning {
- background: var(--accent-orange-dim);
- border-color: var(--accent-orange);
- color: var(--accent-orange);
-}
-
-.alert-danger {
- background: var(--accent-red-dim);
- border-color: var(--accent-red);
- color: var(--accent-red);
-}
-
-/* ============================================
- TOOLTIPS
- ============================================ */
-[data-tooltip] {
- position: relative;
-}
-
-[data-tooltip]::after {
- content: attr(data-tooltip);
- position: absolute;
- bottom: 100%;
- left: 50%;
- transform: translateX(-50%);
- padding: var(--space-1) var(--space-2);
- background: var(--bg-elevated);
- color: var(--text-primary);
- font-size: var(--text-xs);
- border-radius: var(--radius-sm);
- white-space: nowrap;
- opacity: 0;
- visibility: hidden;
- transition: opacity var(--transition-fast), visibility var(--transition-fast);
- z-index: var(--z-tooltip);
- pointer-events: none;
- margin-bottom: var(--space-1);
- box-shadow: var(--shadow-md);
-}
-
-[data-tooltip]:hover::after {
- opacity: 1;
- visibility: visible;
-}
-
-/* ============================================
- ICONS
- ============================================ */
-.icon {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 20px;
- height: 20px;
- flex-shrink: 0;
-}
-
-.icon svg {
- width: 100%;
- height: 100%;
-}
-
-.icon--sm {
- width: 16px;
- height: 16px;
-}
-
-.icon--lg {
- width: 24px;
- height: 24px;
-}
-
-/* ============================================
- SECTION HEADERS
- ============================================ */
-.section-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: var(--space-4);
- padding-bottom: var(--space-2);
- border-bottom: 1px solid var(--border-color);
-}
-
+
+.status-dot.error,
+.status-dot.offline {
+ background: var(--status-error);
+}
+
+.status-dot.inactive {
+ background: var(--status-offline);
+}
+
+/* Pulse animation for active status */
+.status-dot.pulse {
+ animation: statusPulse 2s ease-in-out infinite;
+}
+
+@keyframes statusPulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.5; }
+}
+
+/* ============================================
+ EMPTY STATE
+ ============================================ */
+.empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-8) var(--space-4);
+ text-align: center;
+ color: var(--text-muted);
+}
+
+.empty-state-icon {
+ width: 48px;
+ height: 48px;
+ margin-bottom: var(--space-4);
+ opacity: 0.5;
+}
+
+.empty-state-title {
+ font-size: var(--text-base);
+ font-weight: var(--font-medium);
+ color: var(--text-secondary);
+ margin-bottom: var(--space-2);
+}
+
+.empty-state-description {
+ font-size: var(--text-sm);
+ color: var(--text-dim);
+ max-width: 300px;
+}
+
+.empty-state-action {
+ margin-top: var(--space-4);
+}
+
+/* ============================================
+ LOADING STATES
+ ============================================ */
+.spinner {
+ width: 20px;
+ height: 20px;
+ border: 2px solid var(--border-color);
+ border-top-color: var(--accent-cyan);
+ border-radius: var(--radius-full);
+ animation: spin 0.8s linear infinite;
+}
+
+.spinner-sm {
+ width: 14px;
+ height: 14px;
+ border-width: 2px;
+}
+
+.spinner-lg {
+ width: 32px;
+ height: 32px;
+ border-width: 3px;
+}
+
+@keyframes spin {
+ to { transform: rotate(360deg); }
+}
+
+/* Loading overlay */
+.loading-overlay {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--bg-overlay);
+ z-index: var(--z-modal);
+}
+
+/* Skeleton loader */
+.skeleton {
+ background: linear-gradient(
+ 90deg,
+ var(--bg-tertiary) 25%,
+ var(--bg-elevated) 50%,
+ var(--bg-tertiary) 75%
+ );
+ background-size: 200% 100%;
+ animation: shimmer 1.5s infinite;
+ border-radius: var(--radius-sm);
+}
+
+@keyframes shimmer {
+ 0% { background-position: 200% 0; }
+ 100% { background-position: -200% 0; }
+}
+
+/* ============================================
+ STATS STRIP
+ ============================================ */
+.stats-strip {
+ display: flex;
+ align-items: center;
+ background: var(--bg-secondary);
+ border-bottom: 1px solid var(--border-color);
+ padding: 0 var(--space-4);
+ height: var(--stats-strip-height);
+ overflow-x: auto;
+ gap: var(--space-1);
+}
+
+.strip-stat {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0 var(--space-3);
+ min-width: fit-content;
+}
+
+.strip-value {
+ font-family: var(--font-mono);
+ font-size: var(--text-sm);
+ font-weight: var(--font-semibold);
+ color: var(--accent-cyan);
+ line-height: 1;
+}
+
+.strip-label {
+ font-size: 9px;
+ color: var(--text-dim);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ line-height: 1;
+ margin-top: 2px;
+}
+
+.strip-divider {
+ width: 1px;
+ height: 20px;
+ background: var(--border-color);
+ margin: 0 var(--space-2);
+}
+
+/* ============================================
+ FORM GROUPS
+ ============================================ */
+.form-group {
+ margin-bottom: var(--space-4);
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: var(--space-1);
+ font-size: var(--text-sm);
+ font-weight: var(--font-medium);
+ color: var(--text-secondary);
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+ width: 100%;
+}
+
+.form-help {
+ margin-top: var(--space-1);
+ font-size: var(--text-xs);
+ color: var(--text-dim);
+}
+
+.form-error {
+ margin-top: var(--space-1);
+ font-size: var(--text-xs);
+ color: var(--accent-red);
+}
+
+/* Inline checkbox/radio */
+.form-check {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ cursor: pointer;
+}
+
+.form-check input {
+ width: auto;
+}
+
+.form-check label {
+ margin-bottom: 0;
+ cursor: pointer;
+}
+
+/* ============================================
+ ALERTS / TOASTS
+ ============================================ */
+.alert {
+ display: flex;
+ align-items: flex-start;
+ gap: var(--space-3);
+ padding: var(--space-3) var(--space-4);
+ border-radius: var(--radius-md);
+ border: 1px solid;
+ font-size: var(--text-sm);
+}
+
+.alert-info {
+ background: var(--accent-cyan-dim);
+ border-color: var(--accent-cyan);
+ color: var(--accent-cyan);
+}
+
+.alert-success {
+ background: var(--accent-green-dim);
+ border-color: var(--accent-green);
+ color: var(--accent-green);
+}
+
+.alert-warning {
+ background: var(--accent-orange-dim);
+ border-color: var(--accent-orange);
+ color: var(--accent-orange);
+}
+
+.alert-danger {
+ background: var(--accent-red-dim);
+ border-color: var(--accent-red);
+ color: var(--accent-red);
+}
+
+/* ============================================
+ TOOLTIPS
+ ============================================ */
+[data-tooltip] {
+ position: relative;
+}
+
+[data-tooltip]::after {
+ content: attr(data-tooltip);
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: var(--space-1) var(--space-2);
+ background: var(--bg-elevated);
+ color: var(--text-primary);
+ font-size: var(--text-xs);
+ border-radius: var(--radius-sm);
+ white-space: nowrap;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity var(--transition-fast), visibility var(--transition-fast);
+ z-index: var(--z-tooltip);
+ pointer-events: none;
+ margin-bottom: var(--space-1);
+ box-shadow: var(--shadow-md);
+}
+
+[data-tooltip]:hover::after {
+ opacity: 1;
+ visibility: visible;
+}
+
+/* ============================================
+ ICONS
+ ============================================ */
+.icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 20px;
+ height: 20px;
+ flex-shrink: 0;
+}
+
+.icon svg {
+ width: 100%;
+ height: 100%;
+}
+
+.icon--sm {
+ width: 16px;
+ height: 16px;
+}
+
+.icon--lg {
+ width: 24px;
+ height: 24px;
+}
+
+/* ============================================
+ SECTION HEADERS
+ ============================================ */
+.section-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: var(--space-4);
+ padding-bottom: var(--space-2);
+ border-bottom: 1px solid var(--border-color);
+}
+
.section-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
@@ -671,10 +671,10 @@
opacity: 0.7;
box-shadow: 0 6px 0 var(--accent-cyan);
}
-
-/* ============================================
- DIVIDERS
- ============================================ */
+
+/* ============================================
+ DIVIDERS
+ ============================================ */
.divider {
height: 1px;
background-image: repeating-linear-gradient(
@@ -699,12 +699,12 @@
);
margin: 0 var(--space-3);
}
-
-/* ============================================
- UX POLISH - ENHANCED INTERACTIONS
- ============================================ */
-
-/* Button hover lift */
+
+/* ============================================
+ UX POLISH - ENHANCED INTERACTIONS
+ ============================================ */
+
+/* Button hover lift */
.btn:hover:not(:disabled) {
box-shadow: 0 0 0 1px var(--border-light);
}
@@ -712,16 +712,16 @@
.btn:active:not(:disabled) {
box-shadow: inset 0 0 0 1px var(--border-light);
}
-
-/* Card/Panel hover effects */
-.card,
-.panel {
- transition:
- box-shadow var(--transition-base),
- border-color var(--transition-base),
- transform var(--transition-base);
-}
-
+
+/* Card/Panel hover effects */
+.card,
+.panel {
+ transition:
+ box-shadow var(--transition-base),
+ border-color var(--transition-base),
+ transform var(--transition-base);
+}
+
.card:hover,
.panel:hover {
border-color: var(--border-glow);
@@ -739,24 +739,24 @@
border-bottom-color: rgba(31, 95, 168, 0.2);
background: linear-gradient(180deg, rgba(243, 247, 252, 0.96) 0%, rgba(233, 239, 247, 0.95) 100%);
}
-
-/* Stats strip value highlight on hover */
-.strip-stat {
- transition: background-color var(--transition-fast);
- border-radius: var(--radius-sm);
- cursor: default;
-}
-
-.strip-stat:hover {
- background: var(--bg-tertiary);
-}
-
-/* Status dot pulse animation */
-.status-dot.online,
-.status-dot.active {
- animation: statusGlow 2s ease-in-out infinite;
-}
-
+
+/* Stats strip value highlight on hover */
+.strip-stat {
+ transition: background-color var(--transition-fast);
+ border-radius: var(--radius-sm);
+ cursor: default;
+}
+
+.strip-stat:hover {
+ background: var(--bg-tertiary);
+}
+
+/* Status dot pulse animation */
+.status-dot.online,
+.status-dot.active {
+ animation: statusGlow 2s ease-in-out infinite;
+}
+
@keyframes statusGlow {
0%, 100% {
box-shadow: 0 0 4px var(--status-online);
@@ -765,51 +765,51 @@
box-shadow: 0 0 8px var(--status-online), 0 0 12px var(--status-online);
}
}
-
-/* Badge hover effect */
-.badge {
- transition: transform var(--transition-fast), box-shadow var(--transition-fast);
-}
-
+
+/* Badge hover effect */
+.badge {
+ transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
.badge:hover {
transform: scale(1.02);
}
-
-/* Alert entrance animation */
-.alert {
- animation: alertSlideIn 0.3s ease-out;
-}
-
-@keyframes alertSlideIn {
- from {
- opacity: 0;
- transform: translateY(-10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-/* Loading spinner smooth appearance */
-.spinner {
- animation: spin 0.8s linear infinite, fadeIn 0.3s ease-out;
-}
-
-@keyframes fadeIn {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-
-/* Input focus glow */
+
+/* Alert entrance animation */
+.alert {
+ animation: alertSlideIn 0.3s ease-out;
+}
+
+@keyframes alertSlideIn {
+ from {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Loading spinner smooth appearance */
+.spinner {
+ animation: spin 0.8s linear infinite, fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Input focus glow */
input:focus,
select:focus,
textarea:focus {
border-color: var(--accent-cyan);
box-shadow: 0 0 0 2px var(--accent-cyan-dim);
}
-
-/* Nav item active indicator */
+
+/* Nav item active indicator */
.nav-item,
.mode-nav-btn,
.mobile-nav-btn {
@@ -834,24 +834,24 @@ textarea:focus {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.9; }
}
-
-/* Smooth tooltip appearance */
-[data-tooltip]::after {
- transition:
- opacity var(--transition-fast),
- visibility var(--transition-fast),
- transform var(--transition-fast);
- transform: translateX(-50%) translateY(-4px);
-}
-
-[data-tooltip]:hover::after {
- transform: translateX(-50%) translateY(0);
-}
-
-/* Disabled state with better visual feedback */
-:disabled,
-.disabled {
- opacity: 0.5;
- cursor: not-allowed;
- filter: grayscale(30%);
-}
+
+/* Smooth tooltip appearance */
+[data-tooltip]::after {
+ transition:
+ opacity var(--transition-fast),
+ visibility var(--transition-fast),
+ transform var(--transition-fast);
+ transform: translateX(-50%) translateY(-4px);
+}
+
+[data-tooltip]:hover::after {
+ transform: translateX(-50%) translateY(0);
+}
+
+/* Disabled state with better visual feedback */
+:disabled,
+.disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ filter: grayscale(30%);
+}
diff --git a/static/css/core/variables.css b/static/css/core/variables.css
index a234b76..d8edb1f 100644
--- a/static/css/core/variables.css
+++ b/static/css/core/variables.css
@@ -61,6 +61,18 @@
--status-offline: #6f7f94;
--status-info: #4aa3ff;
+ /* Severity colors */
+ --severity-critical: #ff3366;
+ --severity-high: #ff9933;
+ --severity-medium: #ffcc00;
+ --severity-low: #00ff88;
+
+ /* Data visualization neon colors */
+ --neon-green: #00ff88;
+ --neon-yellow: #ffcc00;
+ --neon-orange: #ff8800;
+ --neon-red: #ff3366;
+
/* Subtle grid/pattern */
--grid-line: rgba(74, 163, 255, 0.1);
--grid-dot: rgba(255, 255, 255, 0.03);
@@ -184,6 +196,27 @@
--accent-orange-dim: rgba(181, 134, 58, 0.12);
--accent-amber: #b5863a;
--accent-amber-dim: rgba(181, 134, 58, 0.12);
+ --accent-yellow: #9a8420;
+ --accent-purple: #6b5ba8;
+
+ /* Status colors - light theme */
+ --status-online: #1f8a57;
+ --status-warning: #b5863a;
+ --status-error: #c74444;
+ --status-offline: #6b7c93;
+ --status-info: #1f5fa8;
+
+ /* Severity colors */
+ --severity-critical: #c74444;
+ --severity-high: #b5863a;
+ --severity-medium: #9a8420;
+ --severity-low: #1f8a57;
+
+ /* Data visualization neon replacements */
+ --neon-green: #1a8a50;
+ --neon-yellow: #9a8420;
+ --neon-orange: #b5863a;
+ --neon-red: #c74444;
--text-primary: #122034;
--text-secondary: #3a4a5f;
diff --git a/static/css/index.css b/static/css/index.css
index 84a60b6..1ec67db 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1780,7 +1780,7 @@ header h1 .tagline {
padding: 12px;
background: var(--accent-green);
border: none;
- color: #fff;
+ color: var(--text-inverse);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
@@ -1809,7 +1809,7 @@ header h1 .tagline {
.run-btn.active,
.stop-btn {
background: var(--accent-red);
- color: #fff;
+ color: var(--text-inverse);
}
.stop-btn {
@@ -1818,7 +1818,7 @@ header h1 .tagline {
padding: 12px;
background: var(--accent-red);
border: none;
- color: #fff;
+ color: var(--text-inverse);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
@@ -2637,7 +2637,7 @@ header h1 .tagline {
}
.aircraft-popup .value {
- color: #fff;
+ color: var(--text-primary);
}
.leaflet-popup-content-wrapper {
@@ -3632,7 +3632,7 @@ header h1 .tagline {
.wifi-filter-btn.active {
background: var(--accent-cyan);
- color: #000;
+ color: var(--text-inverse);
border-color: var(--accent-cyan);
}
@@ -3875,7 +3875,7 @@ header h1 .tagline {
.channel-band-tab.active {
background: var(--accent-cyan);
- color: #000;
+ color: var(--text-inverse);
border-color: var(--accent-cyan);
}
@@ -4550,7 +4550,7 @@ header h1 .tagline {
.bt-detail-btn:hover {
background: var(--accent-cyan);
border-color: var(--accent-cyan);
- color: #000;
+ color: var(--text-inverse);
}
.bt-detail-btn.active {
@@ -4573,7 +4573,7 @@ header h1 .tagline {
}
.bt-inspector-toggle:hover {
- color: #fff;
+ color: var(--text-primary);
}
.bt-inspector-arrow {
@@ -4839,7 +4839,7 @@ header h1 .tagline {
.bt-filter-btn.active {
background: var(--accent-purple);
border-color: var(--accent-purple);
- color: white;
+ color: var(--text-inverse);
}
.bt-tracker-item {
@@ -5397,7 +5397,7 @@ header h1 .tagline {
.bt-modal-btn-primary {
background: var(--accent-cyan, #00d4ff);
border: none;
- color: #000;
+ color: var(--text-inverse);
font-weight: 600;
}
@@ -5528,7 +5528,7 @@ header h1 .tagline {
.channel-label {
font-size: 8px;
- color: #fff;
+ color: var(--text-primary);
margin-top: 3px;
}
@@ -5755,7 +5755,7 @@ body::before {
.disclaimer-modal .accept-btn {
background: var(--accent-cyan);
- color: #000;
+ color: var(--text-inverse);
border: none;
padding: 12px 40px;
font-family: var(--font-sans);
@@ -5846,7 +5846,7 @@ body::before {
/* WPS Indicator */
.wps-enabled {
background: #ff6600;
- color: #000;
+ color: var(--text-inverse);
padding: 2px 6px;
border-radius: 3px;
font-size: 9px;
@@ -5855,7 +5855,7 @@ body::before {
/* Rogue AP Indicator */
.rogue-indicator {
background: linear-gradient(90deg, #ff0000, #cc0000);
- color: #fff;
+ color: var(--text-inverse);
padding: 4px 8px;
margin: -10px -10px 8px -10px;
font-size: 10px;
@@ -5874,7 +5874,7 @@ body::before {
/* PMKID Capture */
.pmkid-btn {
background: linear-gradient(135deg, #9933ff, #6600cc);
- color: #fff;
+ color: var(--text-inverse);
}
.pmkid-btn:hover {
@@ -5889,7 +5889,7 @@ body::before {
.findmy-badge {
background: linear-gradient(135deg, #007aff, #5856d6);
- color: #fff;
+ color: var(--text-inverse);
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
@@ -5966,7 +5966,7 @@ body::before {
left: 50%;
transform: translateX(-50%);
background: #ff0000;
- color: #fff;
+ color: var(--text-inverse);
padding: 15px 30px;
border-radius: 8px;
font-weight: bold;
@@ -6014,7 +6014,7 @@ body::before {
.military-badge {
background: #556b2f;
- color: #fff;
+ color: var(--text-inverse);
padding: 2px 6px;
border-radius: 3px;
font-size: 9px;
@@ -6029,7 +6029,7 @@ body::before {
align-items: center;
justify-content: center;
font-weight: bold;
- color: #000;
+ color: var(--text-inverse);
border: 2px solid var(--accent-cyan);
}
@@ -6715,7 +6715,7 @@ body::before {
.radio-action-btn.scan {
background: var(--accent-green);
border-color: var(--accent-green);
- color: #fff;
+ color: var(--text-inverse);
}
.radio-action-btn.scan:hover {
@@ -6735,7 +6735,7 @@ body::before {
.radio-action-btn.pause {
background: var(--accent-orange);
border-color: var(--accent-orange);
- color: #000;
+ color: var(--text-inverse);
}
.radio-action-btn.pause:disabled {
@@ -6961,7 +6961,7 @@ body::before {
.radio-action-btn.listen {
background: var(--accent-green);
border-color: var(--accent-green);
- color: #000;
+ color: var(--text-inverse);
}
.radio-action-btn.scan:hover:not(:disabled),
diff --git a/static/css/modes/aprs.css b/static/css/modes/aprs.css
index 9f6b4e1..c29dc0c 100644
--- a/static/css/modes/aprs.css
+++ b/static/css/modes/aprs.css
@@ -132,7 +132,7 @@
.aprs-strip .strip-btn.primary {
background: linear-gradient(135deg, var(--accent-green) 0%, #10b981 100%);
border: none;
- color: #000;
+ color: var(--text-inverse);
}
.aprs-strip .strip-btn.primary:hover:not(:disabled) {
filter: brightness(1.1);
@@ -140,7 +140,7 @@
.aprs-strip .strip-btn.stop {
background: linear-gradient(135deg, var(--accent-red) 0%, #dc2626 100%);
border: none;
- color: #fff;
+ color: var(--text-inverse);
}
.aprs-strip .strip-btn.stop:hover:not(:disabled) {
filter: brightness(1.1);
diff --git a/static/css/modes/meshtastic.css b/static/css/modes/meshtastic.css
index e424de6..25bb1ec 100644
--- a/static/css/modes/meshtastic.css
+++ b/static/css/modes/meshtastic.css
@@ -303,7 +303,7 @@
.mesh-strip-btn.disconnect {
background: var(--accent-red, #ff3366);
- color: white;
+ color: var(--text-inverse);
}
.mesh-strip-btn.disconnect:hover {
@@ -478,7 +478,7 @@
0 2px 8px rgba(0, 0, 0, 0.6),
0 0 20px 8px rgba(0, 255, 255, 0.7), /* Strong outer glow */
inset 0 0 8px rgba(255, 255, 255, 0.3); /* Inner highlight */
- color: #000;
+ color: var(--text-inverse);
font-family: var(--font-mono);
font-size: 11px;
font-weight: bold;
@@ -1088,7 +1088,7 @@
border-radius: 4px;
padding: 10px 14px;
cursor: pointer;
- color: #000;
+ color: var(--text-inverse);
transition: all 0.15s ease;
display: flex;
align-items: center;
@@ -1231,7 +1231,7 @@
background: var(--accent-cyan);
border: none;
border-radius: 4px;
- color: #000;
+ color: var(--text-inverse);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
@@ -1413,7 +1413,7 @@
.mesh-position-btn:hover,
.mesh-telemetry-btn:hover {
background: var(--accent-cyan);
- color: #000;
+ color: var(--text-inverse);
border-color: var(--accent-cyan);
}
@@ -1435,7 +1435,7 @@
.mesh-qr-btn:hover {
background: var(--accent-cyan);
- color: #000;
+ color: var(--text-inverse);
border-color: var(--accent-cyan);
}
diff --git a/static/css/modes/space-weather.css b/static/css/modes/space-weather.css
index 86a1000..f3b2a55 100644
--- a/static/css/modes/space-weather.css
+++ b/static/css/modes/space-weather.css
@@ -1,467 +1,470 @@
-/* Space Weather Mode Styles */
-
-/* Main container */
-.sw-visuals-container {
- display: flex;
- flex-direction: column;
- gap: 12px;
- padding: 12px;
- height: 100%;
- overflow-y: auto;
-}
-
-/* Header metrics strip */
-.sw-header-strip {
- display: flex;
- align-items: center;
- gap: 2px;
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- padding: 8px 12px;
- flex-wrap: wrap;
-}
-
-.sw-header-stat {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 4px 12px;
- min-width: 60px;
-}
-
-.sw-header-stat + .sw-header-stat {
- border-left: 1px solid var(--border-color);
-}
-
-.sw-header-value {
- font-family: var(--font-mono, 'Roboto Condensed', monospace);
- font-size: 18px;
- font-weight: 700;
- color: var(--text-primary);
- line-height: 1.2;
-}
-
-.sw-header-label {
- font-size: 9px;
- font-weight: 600;
- letter-spacing: 0.5px;
- color: var(--text-dim);
- text-transform: uppercase;
-}
-
-.sw-header-value.accent-cyan { color: var(--accent-cyan); }
-.sw-header-value.accent-green { color: #00ff88; }
-.sw-header-value.accent-yellow { color: #ffcc00; }
-.sw-header-value.accent-orange { color: #ff8800; }
-.sw-header-value.accent-red { color: #ff3366; }
-
-/* Refresh controls in strip */
-.sw-strip-controls {
- display: flex;
- align-items: center;
- gap: 8px;
- margin-left: auto;
- padding-left: 12px;
-}
-
-.sw-refresh-btn {
- background: transparent;
- border: 1px solid var(--border-color);
- color: var(--text-secondary);
- padding: 4px 10px;
- border-radius: 4px;
- font-size: 11px;
- cursor: pointer;
- font-family: var(--font-mono, 'Roboto Condensed', monospace);
- transition: border-color 0.2s, color 0.2s;
-}
-
-.sw-refresh-btn:hover {
- border-color: var(--accent-cyan);
- color: var(--accent-cyan);
-}
-
-.sw-last-update {
- font-size: 10px;
- color: var(--text-dim);
- font-family: var(--font-mono, 'Roboto Condensed', monospace);
-}
-
-/* NOAA G/S/R Scale cards */
-.sw-scales-row {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 8px;
-}
-
-.sw-scale-card {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- padding: 10px;
- text-align: center;
-}
-
-.sw-scale-label {
- font-size: 10px;
- font-weight: 600;
- letter-spacing: 0.5px;
- color: var(--text-dim);
- text-transform: uppercase;
- margin-bottom: 4px;
-}
-
-.sw-scale-value {
- font-family: var(--font-mono, 'Roboto Condensed', monospace);
- font-size: 24px;
- font-weight: 700;
- line-height: 1.2;
-}
-
-.sw-scale-desc {
- font-size: 10px;
- color: var(--text-dim);
- margin-top: 2px;
-}
-
-/* Scale severity colors */
-.sw-scale-0 { color: #00ff88; border-color: #00ff8833; }
-.sw-scale-1 { color: #88ff00; border-color: #88ff0033; }
-.sw-scale-2 { color: #ffcc00; border-color: #ffcc0033; }
-.sw-scale-3 { color: #ff8800; border-color: #ff880033; }
-.sw-scale-4 { color: #ff4400; border-color: #ff440033; }
-.sw-scale-5 { color: #ff0044; border-color: #ff004433; }
-
-/* HF Band conditions grid */
-.sw-band-panel {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- padding: 12px;
-}
-
-.sw-band-title {
- font-size: 11px;
- font-weight: 600;
- color: var(--text-secondary);
- text-transform: uppercase;
- letter-spacing: 0.5px;
- margin-bottom: 8px;
-}
-
-.sw-band-grid {
- display: grid;
- grid-template-columns: auto repeat(2, 1fr);
- gap: 4px 8px;
- font-size: 11px;
- font-family: var(--font-mono, 'Roboto Condensed', monospace);
-}
-
-.sw-band-header {
- font-size: 10px;
- font-weight: 600;
- color: var(--text-dim);
- text-transform: uppercase;
- padding-bottom: 4px;
- border-bottom: 1px solid var(--border-color);
-}
-
-.sw-band-name {
- color: var(--text-secondary);
- font-weight: 500;
-}
-
-.sw-band-cond {
- text-align: center;
- padding: 2px 6px;
- border-radius: 3px;
- font-size: 10px;
- font-weight: 600;
-}
-
-.sw-band-good { color: #00ff88; background: #00ff8815; }
-.sw-band-fair { color: #ffcc00; background: #ffcc0015; }
-.sw-band-poor { color: #ff3366; background: #ff336615; }
-
-/* 2-column dashboard grid */
-.sw-dashboard-grid {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 10px;
-}
-
-/* Chart containers */
-.sw-chart-card {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- padding: 12px;
-}
-
-.sw-chart-title {
- font-size: 11px;
- font-weight: 600;
- color: var(--text-secondary);
- text-transform: uppercase;
- letter-spacing: 0.5px;
- margin-bottom: 8px;
-}
-
-.sw-chart-wrap {
- position: relative;
- height: 180px;
-}
-
-.sw-chart-wrap canvas {
- width: 100% !important;
- height: 100% !important;
-}
-
-/* Flare probability table */
-.sw-prob-table {
- width: 100%;
- border-collapse: collapse;
- font-size: 11px;
- font-family: var(--font-mono, 'Roboto Condensed', monospace);
-}
-
-.sw-prob-table th {
- font-size: 10px;
- font-weight: 600;
- color: var(--text-dim);
- text-transform: uppercase;
- text-align: left;
- padding: 4px 6px;
- border-bottom: 1px solid var(--border-color);
-}
-
-.sw-prob-table td {
- padding: 4px 6px;
- color: var(--text-secondary);
- border-bottom: 1px solid var(--border-color);
-}
-
-/* Solar image gallery */
-.sw-image-panel {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- padding: 12px;
-}
-
-.sw-image-tabs {
- display: flex;
- gap: 4px;
- margin-bottom: 8px;
-}
-
-.sw-image-tab {
- background: transparent;
- border: 1px solid var(--border-color);
- color: var(--text-dim);
- padding: 4px 10px;
- border-radius: 4px;
- font-size: 10px;
- font-weight: 600;
- cursor: pointer;
- font-family: var(--font-mono, 'Roboto Condensed', monospace);
- transition: all 0.2s;
-}
-
-.sw-image-tab:hover {
- border-color: var(--text-secondary);
- color: var(--text-secondary);
-}
-
-.sw-image-tab.active {
- border-color: var(--accent-cyan);
- color: var(--accent-cyan);
- background: var(--accent-cyan)10;
-}
-
-.sw-image-frame {
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 200px;
- background: var(--bg-primary);
- border-radius: 4px;
- overflow: hidden;
-}
-
-.sw-image-frame img {
- max-width: 100%;
- max-height: 400px;
- object-fit: contain;
- border-radius: 4px;
-}
-
-/* D-RAP frequency selector */
-.sw-drap-freqs {
- display: flex;
- gap: 4px;
- margin-bottom: 8px;
- flex-wrap: wrap;
-}
-
-.sw-drap-freq-btn {
- background: transparent;
- border: 1px solid var(--border-color);
- color: var(--text-dim);
- padding: 3px 8px;
- border-radius: 3px;
- font-size: 10px;
- cursor: pointer;
- font-family: var(--font-mono, 'Roboto Condensed', monospace);
- transition: all 0.2s;
-}
-
-.sw-drap-freq-btn:hover {
- border-color: var(--text-secondary);
- color: var(--text-secondary);
-}
-
-.sw-drap-freq-btn.active {
- border-color: var(--accent-cyan);
- color: var(--accent-cyan);
-}
-
-/* Alerts list */
-.sw-alerts-panel {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- padding: 12px;
- max-height: 300px;
- overflow-y: auto;
-}
-
-.sw-alert-item {
- padding: 8px;
- border-bottom: 1px solid var(--border-color);
- font-size: 11px;
- font-family: var(--font-mono, 'Roboto Condensed', monospace);
-}
-
-.sw-alert-item:last-child {
- border-bottom: none;
-}
-
-.sw-alert-type {
- font-weight: 600;
- color: var(--accent-cyan);
- font-size: 10px;
- text-transform: uppercase;
- margin-bottom: 2px;
-}
-
-.sw-alert-time {
- font-size: 10px;
- color: var(--text-dim);
- margin-bottom: 4px;
-}
-
-.sw-alert-msg {
- color: var(--text-secondary);
- line-height: 1.4;
- white-space: pre-wrap;
- font-size: 10px;
-}
-
-/* Active regions table */
-.sw-regions-panel {
- background: var(--bg-card);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- padding: 12px;
- max-height: 300px;
- overflow-y: auto;
-}
-
-.sw-regions-table {
- width: 100%;
- border-collapse: collapse;
- font-size: 10px;
- font-family: var(--font-mono, 'Roboto Condensed', monospace);
-}
-
-.sw-regions-table th {
- font-weight: 600;
- color: var(--text-dim);
- text-transform: uppercase;
- text-align: left;
- padding: 4px 6px;
- border-bottom: 1px solid var(--border-color);
- position: sticky;
- top: 0;
- background: var(--bg-card);
-}
-
-.sw-regions-table td {
- padding: 4px 6px;
- color: var(--text-secondary);
- border-bottom: 1px solid var(--border-color);
-}
-
-/* Empty / loading states */
-.sw-empty {
- text-align: center;
- padding: 20px;
- color: var(--text-dim);
- font-size: 11px;
- font-family: var(--font-mono, 'Roboto Condensed', monospace);
-}
-
-.sw-loading {
- text-align: center;
- padding: 20px;
- color: var(--text-dim);
- font-size: 11px;
-}
-
-.sw-loading::after {
- content: '';
- display: inline-block;
- width: 12px;
- height: 12px;
- border: 2px solid var(--border-color);
- border-top-color: var(--accent-cyan);
- border-radius: 50%;
- animation: sw-spin 0.8s linear infinite;
- margin-left: 8px;
- vertical-align: middle;
-}
-
-@keyframes sw-spin {
- to { transform: rotate(360deg); }
-}
-
-/* Full-width card */
-.sw-full-width {
- grid-column: 1 / -1;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
- .sw-dashboard-grid {
- grid-template-columns: 1fr;
- }
-
- .sw-scales-row {
- grid-template-columns: 1fr;
- }
-
- .sw-header-strip {
- gap: 0;
- }
-
- .sw-header-stat {
- padding: 4px 8px;
- min-width: 50px;
- }
-
- .sw-header-value {
- font-size: 14px;
- }
-}
+/* Space Weather Mode Styles */
+
+/* Main container */
+.sw-visuals-container {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 12px;
+ height: 100%;
+ overflow-y: auto;
+}
+
+/* Header metrics strip */
+.sw-header-strip {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 8px 12px;
+ flex-wrap: wrap;
+}
+
+.sw-header-stat {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 4px 12px;
+ min-width: 60px;
+}
+
+.sw-header-stat + .sw-header-stat {
+ border-left: 1px solid var(--border-color);
+}
+
+.sw-header-value {
+ font-family: var(--font-mono, 'Roboto Condensed', monospace);
+ font-size: 18px;
+ font-weight: 700;
+ color: var(--text-primary);
+ line-height: 1.2;
+}
+
+.sw-header-label {
+ font-size: 9px;
+ font-weight: 600;
+ letter-spacing: 0.5px;
+ color: var(--text-dim);
+ text-transform: uppercase;
+}
+
+.sw-header-value.accent-cyan { color: var(--accent-cyan); }
+.sw-header-value.accent-green { color: var(--neon-green); }
+.sw-header-value.accent-yellow { color: var(--neon-yellow); }
+.sw-header-value.accent-orange { color: var(--neon-orange); }
+.sw-header-value.accent-red { color: var(--neon-red); }
+
+/* Refresh controls in strip */
+.sw-strip-controls {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-left: auto;
+ padding-left: 12px;
+}
+
+.sw-refresh-btn {
+ background: transparent;
+ border: 1px solid var(--border-color);
+ color: var(--text-secondary);
+ padding: 4px 10px;
+ border-radius: 4px;
+ font-size: 11px;
+ cursor: pointer;
+ font-family: var(--font-mono, 'Roboto Condensed', monospace);
+ transition: border-color 0.2s, color 0.2s;
+}
+
+.sw-refresh-btn:hover {
+ border-color: var(--accent-cyan);
+ color: var(--accent-cyan);
+}
+
+.sw-last-update {
+ font-size: 10px;
+ color: var(--text-dim);
+ font-family: var(--font-mono, 'Roboto Condensed', monospace);
+}
+
+/* NOAA G/S/R Scale cards */
+.sw-scales-row {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 8px;
+}
+
+.sw-scale-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 10px;
+ text-align: center;
+}
+
+.sw-scale-label {
+ font-size: 10px;
+ font-weight: 600;
+ letter-spacing: 0.5px;
+ color: var(--text-dim);
+ text-transform: uppercase;
+ margin-bottom: 4px;
+}
+
+.sw-scale-value {
+ font-family: var(--font-mono, 'Roboto Condensed', monospace);
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1.2;
+}
+
+.sw-scale-desc {
+ font-size: 10px;
+ color: var(--text-dim);
+ margin-top: 2px;
+}
+
+/* Scale severity colors */
+.sw-scale-0 { color: var(--neon-green); border-color: #00ff8833; }
+.sw-scale-1 { color: #88ff00; border-color: #88ff0033; }
+.sw-scale-2 { color: var(--neon-yellow); border-color: #ffcc0033; }
+.sw-scale-3 { color: var(--neon-orange); border-color: #ff880033; }
+.sw-scale-4 { color: #ff4400; border-color: #ff440033; }
+.sw-scale-5 { color: var(--neon-red); border-color: #ff004433; }
+
+[data-theme="light"] .sw-scale-1 { color: #5a8a00; }
+[data-theme="light"] .sw-scale-4 { color: #cc3300; }
+
+/* HF Band conditions grid */
+.sw-band-panel {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 12px;
+}
+
+.sw-band-title {
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin-bottom: 8px;
+}
+
+.sw-band-grid {
+ display: grid;
+ grid-template-columns: auto repeat(2, 1fr);
+ gap: 4px 8px;
+ font-size: 11px;
+ font-family: var(--font-mono, 'Roboto Condensed', monospace);
+}
+
+.sw-band-header {
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--text-dim);
+ text-transform: uppercase;
+ padding-bottom: 4px;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.sw-band-name {
+ color: var(--text-secondary);
+ font-weight: 500;
+}
+
+.sw-band-cond {
+ text-align: center;
+ padding: 2px 6px;
+ border-radius: 3px;
+ font-size: 10px;
+ font-weight: 600;
+}
+
+.sw-band-good { color: var(--neon-green); background: #00ff8815; }
+.sw-band-fair { color: var(--neon-yellow); background: #ffcc0015; }
+.sw-band-poor { color: var(--neon-red); background: #ff336615; }
+
+/* 2-column dashboard grid */
+.sw-dashboard-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
+}
+
+/* Chart containers */
+.sw-chart-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 12px;
+}
+
+.sw-chart-title {
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--text-secondary);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin-bottom: 8px;
+}
+
+.sw-chart-wrap {
+ position: relative;
+ height: 180px;
+}
+
+.sw-chart-wrap canvas {
+ width: 100% !important;
+ height: 100% !important;
+}
+
+/* Flare probability table */
+.sw-prob-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 11px;
+ font-family: var(--font-mono, 'Roboto Condensed', monospace);
+}
+
+.sw-prob-table th {
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--text-dim);
+ text-transform: uppercase;
+ text-align: left;
+ padding: 4px 6px;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.sw-prob-table td {
+ padding: 4px 6px;
+ color: var(--text-secondary);
+ border-bottom: 1px solid var(--border-color);
+}
+
+/* Solar image gallery */
+.sw-image-panel {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 12px;
+}
+
+.sw-image-tabs {
+ display: flex;
+ gap: 4px;
+ margin-bottom: 8px;
+}
+
+.sw-image-tab {
+ background: transparent;
+ border: 1px solid var(--border-color);
+ color: var(--text-dim);
+ padding: 4px 10px;
+ border-radius: 4px;
+ font-size: 10px;
+ font-weight: 600;
+ cursor: pointer;
+ font-family: var(--font-mono, 'Roboto Condensed', monospace);
+ transition: all 0.2s;
+}
+
+.sw-image-tab:hover {
+ border-color: var(--text-secondary);
+ color: var(--text-secondary);
+}
+
+.sw-image-tab.active {
+ border-color: var(--accent-cyan);
+ color: var(--accent-cyan);
+ background: var(--accent-cyan)10;
+}
+
+.sw-image-frame {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 200px;
+ background: var(--bg-primary);
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.sw-image-frame img {
+ max-width: 100%;
+ max-height: 400px;
+ object-fit: contain;
+ border-radius: 4px;
+}
+
+/* D-RAP frequency selector */
+.sw-drap-freqs {
+ display: flex;
+ gap: 4px;
+ margin-bottom: 8px;
+ flex-wrap: wrap;
+}
+
+.sw-drap-freq-btn {
+ background: transparent;
+ border: 1px solid var(--border-color);
+ color: var(--text-dim);
+ padding: 3px 8px;
+ border-radius: 3px;
+ font-size: 10px;
+ cursor: pointer;
+ font-family: var(--font-mono, 'Roboto Condensed', monospace);
+ transition: all 0.2s;
+}
+
+.sw-drap-freq-btn:hover {
+ border-color: var(--text-secondary);
+ color: var(--text-secondary);
+}
+
+.sw-drap-freq-btn.active {
+ border-color: var(--accent-cyan);
+ color: var(--accent-cyan);
+}
+
+/* Alerts list */
+.sw-alerts-panel {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 12px;
+ max-height: 300px;
+ overflow-y: auto;
+}
+
+.sw-alert-item {
+ padding: 8px;
+ border-bottom: 1px solid var(--border-color);
+ font-size: 11px;
+ font-family: var(--font-mono, 'Roboto Condensed', monospace);
+}
+
+.sw-alert-item:last-child {
+ border-bottom: none;
+}
+
+.sw-alert-type {
+ font-weight: 600;
+ color: var(--accent-cyan);
+ font-size: 10px;
+ text-transform: uppercase;
+ margin-bottom: 2px;
+}
+
+.sw-alert-time {
+ font-size: 10px;
+ color: var(--text-dim);
+ margin-bottom: 4px;
+}
+
+.sw-alert-msg {
+ color: var(--text-secondary);
+ line-height: 1.4;
+ white-space: pre-wrap;
+ font-size: 10px;
+}
+
+/* Active regions table */
+.sw-regions-panel {
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 12px;
+ max-height: 300px;
+ overflow-y: auto;
+}
+
+.sw-regions-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 10px;
+ font-family: var(--font-mono, 'Roboto Condensed', monospace);
+}
+
+.sw-regions-table th {
+ font-weight: 600;
+ color: var(--text-dim);
+ text-transform: uppercase;
+ text-align: left;
+ padding: 4px 6px;
+ border-bottom: 1px solid var(--border-color);
+ position: sticky;
+ top: 0;
+ background: var(--bg-card);
+}
+
+.sw-regions-table td {
+ padding: 4px 6px;
+ color: var(--text-secondary);
+ border-bottom: 1px solid var(--border-color);
+}
+
+/* Empty / loading states */
+.sw-empty {
+ text-align: center;
+ padding: 20px;
+ color: var(--text-dim);
+ font-size: 11px;
+ font-family: var(--font-mono, 'Roboto Condensed', monospace);
+}
+
+.sw-loading {
+ text-align: center;
+ padding: 20px;
+ color: var(--text-dim);
+ font-size: 11px;
+}
+
+.sw-loading::after {
+ content: '';
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ border: 2px solid var(--border-color);
+ border-top-color: var(--accent-cyan);
+ border-radius: 50%;
+ animation: sw-spin 0.8s linear infinite;
+ margin-left: 8px;
+ vertical-align: middle;
+}
+
+@keyframes sw-spin {
+ to { transform: rotate(360deg); }
+}
+
+/* Full-width card */
+.sw-full-width {
+ grid-column: 1 / -1;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .sw-dashboard-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .sw-scales-row {
+ grid-template-columns: 1fr;
+ }
+
+ .sw-header-strip {
+ gap: 0;
+ }
+
+ .sw-header-stat {
+ padding: 4px 8px;
+ min-width: 50px;
+ }
+
+ .sw-header-value {
+ font-size: 14px;
+ }
+}
diff --git a/static/css/modes/spy-stations.css b/static/css/modes/spy-stations.css
index 4e3108c..a7f4603 100644
--- a/static/css/modes/spy-stations.css
+++ b/static/css/modes/spy-stations.css
@@ -264,7 +264,7 @@
.spy-freq-clickable:hover {
background: var(--accent-cyan);
- color: #000;
+ color: var(--text-inverse);
border-color: var(--accent-cyan);
}
@@ -278,7 +278,7 @@
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
- color: #000;
+ color: var(--text-inverse);
background: var(--accent-green);
border: none;
padding: 8px 14px;
diff --git a/static/css/modes/sstv-general.css b/static/css/modes/sstv-general.css
index 235d386..67447e7 100644
--- a/static/css/modes/sstv-general.css
+++ b/static/css/modes/sstv-general.css
@@ -105,7 +105,7 @@
.sstv-general-strip-btn.stop {
background: var(--accent-red, #ff3366);
- color: white;
+ color: var(--text-inverse);
}
.sstv-general-strip-btn.stop:hover {
diff --git a/static/css/modes/sstv.css b/static/css/modes/sstv.css
index 14601aa..3c8b6bd 100644
--- a/static/css/modes/sstv.css
+++ b/static/css/modes/sstv.css
@@ -117,7 +117,7 @@
.sstv-strip-btn.stop {
background: var(--accent-red, #ff3366);
- color: white;
+ color: var(--text-inverse);
}
.sstv-strip-btn.stop:hover {
@@ -192,7 +192,7 @@
.sstv-strip-btn.gps:hover {
background: var(--accent-green);
- color: #000;
+ color: var(--text-inverse);
border-color: var(--accent-green);
}
@@ -207,7 +207,7 @@
.sstv-strip-btn.update-tle:hover {
background: var(--accent-orange);
- color: #000;
+ color: var(--text-inverse);
border-color: var(--accent-orange);
}
diff --git a/static/css/modes/subghz.css b/static/css/modes/subghz.css
index 6fca8a2..9de5a2e 100644
--- a/static/css/modes/subghz.css
+++ b/static/css/modes/subghz.css
@@ -1,139 +1,139 @@
-/* SubGHz Transceiver Mode Styles */
-
-/* ===== Device Status ===== */
-.subghz-device-status {
- padding: 8px 10px;
- background: var(--bg-tertiary, #1a1f2e);
- border-radius: 4px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 11px;
-}
-
-.subghz-device-row {
- display: flex;
- align-items: center;
- gap: 8px;
- margin-bottom: 6px;
-}
-
-.subghz-device-dot {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- flex-shrink: 0;
- background: var(--text-dim, #666);
-}
-
-.subghz-device-dot.connected {
- background: #00ff88;
- box-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
-}
-
+/* SubGHz Transceiver Mode Styles */
+
+/* ===== Device Status ===== */
+.subghz-device-status {
+ padding: 8px 10px;
+ background: var(--bg-tertiary, #1a1f2e);
+ border-radius: 4px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 11px;
+}
+
+.subghz-device-row {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 6px;
+}
+
+.subghz-device-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ flex-shrink: 0;
+ background: var(--text-dim, #666);
+}
+
+.subghz-device-dot.connected {
+ background: var(--neon-green);
+ box-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
+}
+
.subghz-device-dot.disconnected {
background: var(--accent-red, #ff4444);
}
.subghz-device-dot.unknown {
- background: #ffaa00;
+ background: var(--neon-orange);
}
.subghz-device-label {
color: var(--text-secondary, #999);
}
-
-.subghz-device-label.error {
- color: var(--accent-red, #ff4444);
-}
-
-.subghz-device-tools {
- display: flex;
- gap: 6px;
- flex-wrap: wrap;
-}
-
-.subghz-tool-badge {
- padding: 2px 8px;
- border-radius: 3px;
- font-size: 9px;
- letter-spacing: 0.3px;
- border: 1px solid var(--border-color, #2a3040);
- color: var(--text-dim, #666);
-}
-
-.subghz-tool-badge.available {
- border-color: rgba(0, 255, 136, 0.3);
- color: #00ff88;
- background: rgba(0, 255, 136, 0.05);
-}
-
-.subghz-tool-badge.missing {
- border-color: rgba(255, 68, 68, 0.3);
- color: var(--accent-red, #ff4444);
- background: rgba(255, 68, 68, 0.05);
-}
-
-/* ===== Sidebar Sections ===== */
-.subghz-preset-btns {
- display: flex;
- flex-wrap: wrap;
- gap: 6px;
- margin-top: 6px;
-}
-
-.subghz-preset-btn {
- padding: 4px 10px;
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 4px;
- background: var(--bg-tertiary, #1a1f2e);
- color: var(--text-primary, #e0e0e0);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 11px;
- cursor: pointer;
- transition: background 0.15s, border-color 0.15s;
-}
-
-.subghz-preset-btn:hover {
- background: var(--accent-cyan, #00d4ff);
- color: #000;
- border-color: var(--accent-cyan, #00d4ff);
-}
-
-/* Tab navigation for RX / Decode / Sweep */
-.subghz-tabs {
- display: flex;
- gap: 0;
- border-bottom: 1px solid var(--border-color, #2a3040);
- margin-bottom: 12px;
-}
-
-.subghz-tab {
- flex: 1;
- padding: 8px 4px;
- border: none;
- border-bottom: 2px solid transparent;
- background: transparent;
- color: var(--text-dim, #666);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 11px;
- text-transform: uppercase;
- cursor: pointer;
- transition: color 0.15s, border-color 0.15s;
- text-align: center;
-}
-
-.subghz-tab:hover {
- color: var(--text-primary, #e0e0e0);
-}
-
-.subghz-tab.active {
- color: var(--accent-cyan, #00d4ff);
- border-bottom-color: var(--accent-cyan, #00d4ff);
-}
-
-.subghz-tab-content {
- display: none;
-}
-
+
+.subghz-device-label.error {
+ color: var(--accent-red, #ff4444);
+}
+
+.subghz-device-tools {
+ display: flex;
+ gap: 6px;
+ flex-wrap: wrap;
+}
+
+.subghz-tool-badge {
+ padding: 2px 8px;
+ border-radius: 3px;
+ font-size: 9px;
+ letter-spacing: 0.3px;
+ border: 1px solid var(--border-color, #2a3040);
+ color: var(--text-dim, #666);
+}
+
+.subghz-tool-badge.available {
+ border-color: rgba(0, 255, 136, 0.3);
+ color: var(--neon-green);
+ background: rgba(0, 255, 136, 0.05);
+}
+
+.subghz-tool-badge.missing {
+ border-color: rgba(255, 68, 68, 0.3);
+ color: var(--accent-red, #ff4444);
+ background: rgba(255, 68, 68, 0.05);
+}
+
+/* ===== Sidebar Sections ===== */
+.subghz-preset-btns {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ margin-top: 6px;
+}
+
+.subghz-preset-btn {
+ padding: 4px 10px;
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 4px;
+ background: var(--bg-tertiary, #1a1f2e);
+ color: var(--text-primary, #e0e0e0);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 11px;
+ cursor: pointer;
+ transition: background 0.15s, border-color 0.15s;
+}
+
+.subghz-preset-btn:hover {
+ background: var(--accent-cyan, #00d4ff);
+ color: var(--text-inverse);
+ border-color: var(--accent-cyan, #00d4ff);
+}
+
+/* Tab navigation for RX / Decode / Sweep */
+.subghz-tabs {
+ display: flex;
+ gap: 0;
+ border-bottom: 1px solid var(--border-color, #2a3040);
+ margin-bottom: 12px;
+}
+
+.subghz-tab {
+ flex: 1;
+ padding: 8px 4px;
+ border: none;
+ border-bottom: 2px solid transparent;
+ background: transparent;
+ color: var(--text-dim, #666);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 11px;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: color 0.15s, border-color 0.15s;
+ text-align: center;
+}
+
+.subghz-tab:hover {
+ color: var(--text-primary, #e0e0e0);
+}
+
+.subghz-tab.active {
+ color: var(--accent-cyan, #00d4ff);
+ border-bottom-color: var(--accent-cyan, #00d4ff);
+}
+
+.subghz-tab-content {
+ display: none;
+}
+
.subghz-tab-content.active {
display: block;
}
@@ -197,75 +197,75 @@
color: var(--text-dim, #666);
line-height: 1.4;
}
-
-/* Status indicator */
-.subghz-status-row {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 6px 10px;
- background: var(--bg-tertiary, #1a1f2e);
- border-radius: 4px;
- margin-bottom: 10px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 11px;
-}
-
-.subghz-status-dot {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: var(--text-dim, #666);
- flex-shrink: 0;
-}
-
-.subghz-status-dot.rx {
- background: #00ff88;
- animation: subghz-pulse 1.5s ease-in-out infinite;
-}
-
-.subghz-status-dot.decode {
- background: #00d4ff;
- animation: subghz-pulse 0.8s ease-in-out infinite;
-}
-
-.subghz-status-dot.tx {
- background: #ff4444;
- animation: subghz-pulse 0.5s ease-in-out infinite;
-}
-
-.subghz-status-dot.sweep {
- background: #ffaa00;
- animation: subghz-pulse 1s ease-in-out infinite;
-}
-
-@keyframes subghz-pulse {
- 0%, 100% { opacity: 1; }
- 50% { opacity: 0.3; }
-}
-
-.subghz-status-text {
- color: var(--text-secondary, #999);
- flex: 1;
-}
-
-.subghz-status-timer {
- color: var(--accent-cyan, #00d4ff);
-}
-
-/* Control buttons */
+
+/* Status indicator */
+.subghz-status-row {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 6px 10px;
+ background: var(--bg-tertiary, #1a1f2e);
+ border-radius: 4px;
+ margin-bottom: 10px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 11px;
+}
+
+.subghz-status-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--text-dim, #666);
+ flex-shrink: 0;
+}
+
+.subghz-status-dot.rx {
+ background: var(--neon-green);
+ animation: subghz-pulse 1.5s ease-in-out infinite;
+}
+
+.subghz-status-dot.decode {
+ background: #00d4ff;
+ animation: subghz-pulse 0.8s ease-in-out infinite;
+}
+
+.subghz-status-dot.tx {
+ background: #ff4444;
+ animation: subghz-pulse 0.5s ease-in-out infinite;
+}
+
+.subghz-status-dot.sweep {
+ background: var(--neon-orange);
+ animation: subghz-pulse 1s ease-in-out infinite;
+}
+
+@keyframes subghz-pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.3; }
+}
+
+.subghz-status-text {
+ color: var(--text-secondary, #999);
+ flex: 1;
+}
+
+.subghz-status-timer {
+ color: var(--accent-cyan, #00d4ff);
+}
+
+/* Control buttons */
.subghz-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
- padding: 8px 16px;
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 4px;
- background: transparent;
- color: var(--text-primary, #e0e0e0);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 12px;
+ padding: 8px 16px;
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 4px;
+ background: transparent;
+ color: var(--text-primary, #e0e0e0);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 12px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
width: 100%;
@@ -298,49 +298,49 @@
background: var(--bg-tertiary, #1a1f2e);
border-color: var(--accent-cyan, #00d4ff);
}
-
-.subghz-btn.active {
- background: rgba(0, 212, 255, 0.1);
- border-color: var(--accent-cyan, #00d4ff);
- color: var(--accent-cyan, #00d4ff);
-}
-
-.subghz-btn.start {
- background: var(--accent-green, #22c55e);
- border-color: var(--accent-green, #22c55e);
- color: #fff;
- font-weight: 600;
-}
-
-.subghz-btn.start:hover {
- background: #1db954;
- border-color: #1db954;
- box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
-}
-
-.subghz-btn.stop {
- background: var(--accent-red, #ff4444);
- border-color: var(--accent-red, #ff4444);
- color: #fff;
- font-weight: 600;
-}
-
-.subghz-btn.stop:hover {
- background: #e03c3c;
- border-color: #e03c3c;
- box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
-}
-
-.subghz-btn.tx-btn {
- border-color: var(--accent-red, #ff4444);
- color: var(--accent-red, #ff4444);
-}
-
-.subghz-btn.tx-btn:hover {
- background: rgba(255, 68, 68, 0.15);
-}
-
-/* Capture library */
+
+.subghz-btn.active {
+ background: rgba(0, 212, 255, 0.1);
+ border-color: var(--accent-cyan, #00d4ff);
+ color: var(--accent-cyan, #00d4ff);
+}
+
+.subghz-btn.start {
+ background: var(--accent-green, #22c55e);
+ border-color: var(--accent-green, #22c55e);
+ color: var(--text-inverse);
+ font-weight: 600;
+}
+
+.subghz-btn.start:hover {
+ background: #1db954;
+ border-color: #1db954;
+ box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
+}
+
+.subghz-btn.stop {
+ background: var(--accent-red, #ff4444);
+ border-color: var(--accent-red, #ff4444);
+ color: var(--text-inverse);
+ font-weight: 600;
+}
+
+.subghz-btn.stop:hover {
+ background: #e03c3c;
+ border-color: #e03c3c;
+ box-shadow: 0 2px 8px rgba(255, 68, 68, 0.3);
+}
+
+.subghz-btn.tx-btn {
+ border-color: var(--accent-red, #ff4444);
+ color: var(--accent-red, #ff4444);
+}
+
+.subghz-btn.tx-btn:hover {
+ background: rgba(255, 68, 68, 0.15);
+}
+
+/* Capture library */
.subghz-captures-list {
max-height: 300px;
overflow-y: auto;
@@ -360,14 +360,14 @@
align-content: start;
gap: 10px;
}
-
+
.subghz-capture-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 10px;
- background: var(--bg-tertiary, #1a1f2e);
- border: 1px solid var(--border-color, #2a3040);
+ background: var(--bg-tertiary, #1a1f2e);
+ border: 1px solid var(--border-color, #2a3040);
border-radius: 4px;
font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
font-size: 11px;
@@ -405,7 +405,7 @@
padding: 1px 6px;
border-radius: 999px;
border: 1px solid rgba(255, 170, 0, 0.55);
- color: #ffaa00;
+ color: var(--neon-orange);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.4px;
@@ -423,14 +423,14 @@
}
.subghz-capture-burst-flag {
- color: #ffaa00;
+ color: var(--neon-orange);
}
.subghz-capture-burst-count {
padding: 1px 6px;
border-radius: 999px;
border: 1px solid rgba(255, 170, 0, 0.55);
- color: #ffaa00;
+ color: var(--neon-orange);
background: rgba(255, 170, 0, 0.12);
}
@@ -462,7 +462,7 @@
.subghz-capture-tag.hint {
border-color: rgba(0, 255, 136, 0.5);
- color: #00ff88;
+ color: var(--neon-green);
background: rgba(0, 255, 136, 0.12);
}
@@ -471,29 +471,29 @@
color: #b478ff;
background: rgba(180, 120, 255, 0.12);
}
-
-.subghz-capture-freq {
- color: var(--accent-cyan, #00d4ff);
- font-weight: 600;
-}
-
-.subghz-capture-time {
- color: var(--text-dim, #666);
- font-size: 10px;
-}
-
-.subghz-capture-meta {
- display: flex;
- gap: 12px;
- color: var(--text-dim, #666);
- font-size: 10px;
-}
-
-.subghz-capture-label {
- color: var(--text-secondary, #999);
- font-style: italic;
-}
-
+
+.subghz-capture-freq {
+ color: var(--accent-cyan, #00d4ff);
+ font-weight: 600;
+}
+
+.subghz-capture-time {
+ color: var(--text-dim, #666);
+ font-size: 10px;
+}
+
+.subghz-capture-meta {
+ display: flex;
+ gap: 12px;
+ color: var(--text-dim, #666);
+ font-size: 10px;
+}
+
+.subghz-capture-label {
+ color: var(--text-secondary, #999);
+ font-style: italic;
+}
+
.subghz-capture-actions {
display: flex;
gap: 6px;
@@ -505,21 +505,21 @@
}
.subghz-capture-actions button {
- padding: 3px 8px;
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 3px;
- background: transparent;
- color: var(--text-dim, #666);
- font-size: 10px;
- cursor: pointer;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-.subghz-capture-actions button:hover {
- color: var(--text-primary, #e0e0e0);
- border-color: var(--text-dim, #666);
-}
-
+ padding: 3px 8px;
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 3px;
+ background: transparent;
+ color: var(--text-dim, #666);
+ font-size: 10px;
+ cursor: pointer;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+.subghz-capture-actions button:hover {
+ color: var(--text-primary, #e0e0e0);
+ border-color: var(--text-dim, #666);
+}
+
.subghz-capture-actions button.replay-btn:hover {
color: var(--accent-red, #ff4444);
border-color: var(--accent-red, #ff4444);
@@ -545,58 +545,58 @@
background: rgba(0, 212, 255, 0.18);
color: #7beeff;
}
-
-/* TX warning */
-.subghz-tx-warning {
- padding: 8px 10px;
- background: rgba(255, 68, 68, 0.08);
- border: 1px solid rgba(255, 68, 68, 0.3);
- border-radius: 4px;
- color: var(--accent-red, #ff4444);
- font-size: 10px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- line-height: 1.4;
- margin-bottom: 8px;
-}
-
-/* Sweep range inputs */
-.subghz-sweep-range {
- display: flex;
- gap: 8px;
- align-items: center;
-}
-
-.subghz-sweep-range input {
- flex: 1;
-}
-
-.subghz-sweep-range span {
- color: var(--text-dim, #666);
- font-size: 11px;
-}
-
-/* ===== Visuals Area ===== */
-.subghz-visuals-container {
- display: flex;
- flex-direction: column;
- gap: 12px;
- height: 100%;
-}
-
-/* Decode output area */
-.subghz-decode-output {
- flex: 1;
- background: var(--bg-primary, #0d1117);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 6px;
- padding: 12px;
- overflow-y: auto;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 12px;
- color: var(--text-primary, #e0e0e0);
- min-height: 200px;
-}
-
+
+/* TX warning */
+.subghz-tx-warning {
+ padding: 8px 10px;
+ background: rgba(255, 68, 68, 0.08);
+ border: 1px solid rgba(255, 68, 68, 0.3);
+ border-radius: 4px;
+ color: var(--accent-red, #ff4444);
+ font-size: 10px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ line-height: 1.4;
+ margin-bottom: 8px;
+}
+
+/* Sweep range inputs */
+.subghz-sweep-range {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+}
+
+.subghz-sweep-range input {
+ flex: 1;
+}
+
+.subghz-sweep-range span {
+ color: var(--text-dim, #666);
+ font-size: 11px;
+}
+
+/* ===== Visuals Area ===== */
+.subghz-visuals-container {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ height: 100%;
+}
+
+/* Decode output area */
+.subghz-decode-output {
+ flex: 1;
+ background: var(--bg-primary, #0d1117);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 6px;
+ padding: 12px;
+ overflow-y: auto;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 12px;
+ color: var(--text-primary, #e0e0e0);
+ min-height: 200px;
+}
+
.subghz-decode-entry {
padding: 6px 0;
border-bottom: 1px solid var(--border-color, #2a3040);
@@ -611,64 +611,64 @@
color: var(--text-secondary, #b8c3cf);
margin-left: 10px;
}
-
-.subghz-decode-entry:last-child {
- border-bottom: none;
-}
-
-@keyframes subghz-fade-in {
- from { opacity: 0; transform: translateY(-4px); }
- to { opacity: 1; transform: translateY(0); }
-}
-
-.subghz-decode-model {
- color: var(--accent-cyan, #00d4ff);
- font-weight: 600;
-}
-
-.subghz-decode-field {
- color: var(--text-dim, #666);
- margin-left: 12px;
-}
-
-.subghz-decode-field strong {
- color: var(--text-secondary, #999);
-}
-
-/* Sweep chart */
-.subghz-sweep-chart-wrapper {
- flex: 1;
- background: var(--bg-primary, #0d1117);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 6px;
- padding: 12px;
- min-height: 250px;
- position: relative;
-}
-
-.subghz-sweep-chart-wrapper canvas {
- width: 100%;
- height: 100%;
-}
-
-/* TX confirmation modal */
-.subghz-tx-modal-overlay {
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.7);
- z-index: 10000;
- justify-content: center;
- align-items: center;
-}
-
-.subghz-tx-modal-overlay.active {
- display: flex;
-}
-
+
+.subghz-decode-entry:last-child {
+ border-bottom: none;
+}
+
+@keyframes subghz-fade-in {
+ from { opacity: 0; transform: translateY(-4px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.subghz-decode-model {
+ color: var(--accent-cyan, #00d4ff);
+ font-weight: 600;
+}
+
+.subghz-decode-field {
+ color: var(--text-dim, #666);
+ margin-left: 12px;
+}
+
+.subghz-decode-field strong {
+ color: var(--text-secondary, #999);
+}
+
+/* Sweep chart */
+.subghz-sweep-chart-wrapper {
+ flex: 1;
+ background: var(--bg-primary, #0d1117);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 6px;
+ padding: 12px;
+ min-height: 250px;
+ position: relative;
+}
+
+.subghz-sweep-chart-wrapper canvas {
+ width: 100%;
+ height: 100%;
+}
+
+/* TX confirmation modal */
+.subghz-tx-modal-overlay {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.7);
+ z-index: 10000;
+ justify-content: center;
+ align-items: center;
+}
+
+.subghz-tx-modal-overlay.active {
+ display: flex;
+}
+
.subghz-tx-modal {
background: var(--bg-card, #161b22);
border: 2px solid var(--accent-red, #ff4444);
@@ -678,20 +678,20 @@
width: 90%;
text-align: center;
}
-
-.subghz-tx-modal h3 {
- color: var(--accent-red, #ff4444);
- margin: 0 0 12px 0;
- font-size: 16px;
-}
-
-.subghz-tx-modal p {
- color: var(--text-secondary, #999);
- font-size: 12px;
- line-height: 1.5;
- margin: 0 0 8px 0;
-}
-
+
+.subghz-tx-modal h3 {
+ color: var(--accent-red, #ff4444);
+ margin: 0 0 12px 0;
+ font-size: 16px;
+}
+
+.subghz-tx-modal p {
+ color: var(--text-secondary, #999);
+ font-size: 12px;
+ line-height: 1.5;
+ margin: 0 0 8px 0;
+}
+
.subghz-tx-modal .tx-freq {
color: var(--accent-cyan, #00d4ff);
font-weight: 600;
@@ -873,29 +873,29 @@
.subghz-tx-burst-item button:hover {
background: rgba(0, 212, 255, 0.12);
}
-
-.subghz-tx-modal-actions {
- display: flex;
- gap: 12px;
- margin-top: 16px;
- justify-content: center;
-}
-
-.subghz-tx-modal-actions button {
- padding: 8px 20px;
- border-radius: 4px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 12px;
- cursor: pointer;
- border: 1px solid;
-}
-
-.subghz-tx-confirm-btn {
- background: var(--accent-red, #ff4444);
- color: #fff;
- border-color: var(--accent-red, #ff4444) !important;
-}
-
+
+.subghz-tx-modal-actions {
+ display: flex;
+ gap: 12px;
+ margin-top: 16px;
+ justify-content: center;
+}
+
+.subghz-tx-modal-actions button {
+ padding: 8px 20px;
+ border-radius: 4px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 12px;
+ cursor: pointer;
+ border: 1px solid;
+}
+
+.subghz-tx-confirm-btn {
+ background: var(--accent-red, #ff4444);
+ color: var(--text-inverse);
+ border-color: var(--accent-red, #ff4444) !important;
+}
+
.subghz-tx-confirm-btn:hover {
background: #cc3333;
}
@@ -915,12 +915,12 @@
color: var(--text-primary, #e0e0e0);
border-color: var(--border-color, #2a3040) !important;
}
-
-.subghz-tx-cancel-btn:hover {
- border-color: var(--text-dim, #666) !important;
-}
-
-/* Empty state */
+
+.subghz-tx-cancel-btn:hover {
+ border-color: var(--text-dim, #666) !important;
+}
+
+/* Empty state */
.subghz-empty {
text-align: center;
color: var(--text-dim, #666);
@@ -932,260 +932,260 @@
.subghz-captures-list-main .subghz-empty {
grid-column: 1 / -1;
}
-
-/* ===== Interactive Sweep Components ===== */
-
-/* Hover tooltip */
-.subghz-sweep-tooltip {
- position: fixed;
- pointer-events: none;
- background: rgba(13, 17, 23, 0.92);
- border: 1px solid #2a3040;
- border-radius: 4px;
- padding: 5px 9px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 11px;
- z-index: 9999;
- display: none;
- white-space: nowrap;
- line-height: 1.5;
-}
-
-.subghz-sweep-tooltip .tip-freq {
- color: var(--accent-cyan, #00d4ff);
-}
-
-.subghz-sweep-tooltip .tip-power {
- color: #ffaa00;
-}
-
-/* Right-click context menu */
-.subghz-sweep-ctx-menu {
- position: fixed;
- display: none;
- background: var(--bg-card, #161b22);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 5px;
- z-index: 10000;
- min-width: 180px;
- padding: 4px 0;
- box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 11px;
-}
-
-.subghz-ctx-header {
- padding: 5px 12px;
- color: var(--text-dim, #666);
- font-size: 10px;
- border-bottom: 1px solid var(--border-color, #2a3040);
- margin-bottom: 2px;
-}
-
-.subghz-ctx-item {
- padding: 6px 12px;
- cursor: pointer;
- color: var(--text-primary, #e0e0e0);
- transition: background 0.1s;
-}
-
-.subghz-ctx-item:hover {
- background: var(--bg-tertiary, #1a1f2e);
-}
-
-.subghz-ctx-item .ctx-icon {
- display: inline-block;
- width: 18px;
- text-align: center;
- margin-right: 4px;
-}
-
-/* Floating action bar */
-.subghz-sweep-action-bar {
- position: fixed;
- display: flex;
- gap: 4px;
- background: rgba(13, 17, 23, 0.95);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 5px;
- padding: 4px;
- z-index: 9998;
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
- opacity: 0;
- transform: translateY(4px);
- transition: opacity 0.15s, transform 0.15s;
- pointer-events: none;
-}
-
-.subghz-sweep-action-bar.visible {
- opacity: 1;
- transform: translateY(0);
- pointer-events: auto;
-}
-
-.subghz-action-btn {
- padding: 4px 10px;
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 3px;
- background: transparent;
- color: var(--text-primary, #e0e0e0);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 10px;
- cursor: pointer;
- transition: background 0.12s, border-color 0.12s, color 0.12s;
- white-space: nowrap;
-}
-
-.subghz-action-btn.tune:hover {
- background: rgba(0, 255, 136, 0.12);
- border-color: #00ff88;
- color: #00ff88;
-}
-
-.subghz-action-btn.decode:hover {
- background: rgba(0, 212, 255, 0.12);
- border-color: var(--accent-cyan, #00d4ff);
- color: var(--accent-cyan, #00d4ff);
-}
-
-.subghz-action-btn.capture:hover {
- background: rgba(255, 170, 0, 0.12);
- border-color: #ffaa00;
- color: #ffaa00;
-}
-
-/* Peak list in sidebar */
-.subghz-peak-list {
- max-height: 160px;
- overflow-y: auto;
- display: flex;
- flex-direction: column;
- gap: 3px;
- margin-top: 8px;
-}
-
-.subghz-peak-list:empty::after {
- content: 'No peaks detected';
- color: var(--text-dim, #666);
- font-size: 10px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- padding: 6px 0;
- text-align: center;
-}
-
-.subghz-peak-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 4px 8px;
- background: var(--bg-tertiary, #1a1f2e);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 3px;
- cursor: pointer;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 10px;
- transition: border-color 0.12s;
-}
-
-.subghz-peak-item:hover {
- border-color: #ffaa00;
-}
-
-.subghz-peak-item .peak-freq {
- color: var(--accent-cyan, #00d4ff);
-}
-
-.subghz-peak-item .peak-power {
- color: #ffaa00;
-}
-
-/* ===== Stats Strip ===== */
-.subghz-stats-strip {
- display: flex;
- align-items: center;
- gap: 0;
- background: var(--bg-card, #161b22);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 6px;
- padding: 6px 12px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 11px;
- flex-shrink: 0;
- flex-wrap: wrap;
-}
-
-.subghz-strip-group {
- display: flex;
- align-items: center;
- gap: 10px;
- padding: 0 10px;
-}
-
-.subghz-strip-divider {
- width: 1px;
- height: 20px;
- background: var(--border-color, #2a3040);
- flex-shrink: 0;
-}
-
-.subghz-strip-status {
- display: flex;
- align-items: center;
- gap: 6px;
-}
-
-.subghz-strip-dot {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: var(--text-dim, #666);
- flex-shrink: 0;
- transition: background 0.2s;
-}
-
-.subghz-strip-dot.active {
- animation: subghz-pulse 1.5s ease-in-out infinite;
-}
-
-.subghz-strip-dot.rx { background: #00ff88; }
-.subghz-strip-dot.decode { background: #00d4ff; }
-.subghz-strip-dot.tx { background: #ff4444; }
-.subghz-strip-dot.sweep { background: #ffaa00; }
-
-.subghz-strip-status-text {
- color: var(--text-secondary, #999);
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.subghz-strip-stat {
- display: flex;
- align-items: baseline;
- gap: 4px;
-}
-
-.subghz-strip-value {
- font-weight: 600;
- color: var(--text-primary, #e0e0e0);
-}
-
-.subghz-strip-value.accent-cyan { color: var(--accent-cyan, #00d4ff); }
-.subghz-strip-value.accent-green { color: #00ff88; }
-.subghz-strip-value.accent-orange { color: #ffaa00; }
-
-.subghz-strip-label {
- color: var(--text-dim, #666);
- font-size: 9px;
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.subghz-strip-timer {
- color: var(--accent-cyan, #00d4ff);
- font-weight: 600;
- min-width: 40px;
-}
-
+
+/* ===== Interactive Sweep Components ===== */
+
+/* Hover tooltip */
+.subghz-sweep-tooltip {
+ position: fixed;
+ pointer-events: none;
+ background: rgba(13, 17, 23, 0.92);
+ border: 1px solid #2a3040;
+ border-radius: 4px;
+ padding: 5px 9px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 11px;
+ z-index: 9999;
+ display: none;
+ white-space: nowrap;
+ line-height: 1.5;
+}
+
+.subghz-sweep-tooltip .tip-freq {
+ color: var(--accent-cyan, #00d4ff);
+}
+
+.subghz-sweep-tooltip .tip-power {
+ color: var(--neon-orange);
+}
+
+/* Right-click context menu */
+.subghz-sweep-ctx-menu {
+ position: fixed;
+ display: none;
+ background: var(--bg-card, #161b22);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 5px;
+ z-index: 10000;
+ min-width: 180px;
+ padding: 4px 0;
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 11px;
+}
+
+.subghz-ctx-header {
+ padding: 5px 12px;
+ color: var(--text-dim, #666);
+ font-size: 10px;
+ border-bottom: 1px solid var(--border-color, #2a3040);
+ margin-bottom: 2px;
+}
+
+.subghz-ctx-item {
+ padding: 6px 12px;
+ cursor: pointer;
+ color: var(--text-primary, #e0e0e0);
+ transition: background 0.1s;
+}
+
+.subghz-ctx-item:hover {
+ background: var(--bg-tertiary, #1a1f2e);
+}
+
+.subghz-ctx-item .ctx-icon {
+ display: inline-block;
+ width: 18px;
+ text-align: center;
+ margin-right: 4px;
+}
+
+/* Floating action bar */
+.subghz-sweep-action-bar {
+ position: fixed;
+ display: flex;
+ gap: 4px;
+ background: rgba(13, 17, 23, 0.95);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 5px;
+ padding: 4px;
+ z-index: 9998;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+ opacity: 0;
+ transform: translateY(4px);
+ transition: opacity 0.15s, transform 0.15s;
+ pointer-events: none;
+}
+
+.subghz-sweep-action-bar.visible {
+ opacity: 1;
+ transform: translateY(0);
+ pointer-events: auto;
+}
+
+.subghz-action-btn {
+ padding: 4px 10px;
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 3px;
+ background: transparent;
+ color: var(--text-primary, #e0e0e0);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 10px;
+ cursor: pointer;
+ transition: background 0.12s, border-color 0.12s, color 0.12s;
+ white-space: nowrap;
+}
+
+.subghz-action-btn.tune:hover {
+ background: rgba(0, 255, 136, 0.12);
+ border-color: var(--neon-green);
+ color: var(--neon-green);
+}
+
+.subghz-action-btn.decode:hover {
+ background: rgba(0, 212, 255, 0.12);
+ border-color: var(--accent-cyan, #00d4ff);
+ color: var(--accent-cyan, #00d4ff);
+}
+
+.subghz-action-btn.capture:hover {
+ background: rgba(255, 170, 0, 0.12);
+ border-color: var(--neon-orange);
+ color: var(--neon-orange);
+}
+
+/* Peak list in sidebar */
+.subghz-peak-list {
+ max-height: 160px;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ margin-top: 8px;
+}
+
+.subghz-peak-list:empty::after {
+ content: 'No peaks detected';
+ color: var(--text-dim, #666);
+ font-size: 10px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ padding: 6px 0;
+ text-align: center;
+}
+
+.subghz-peak-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 4px 8px;
+ background: var(--bg-tertiary, #1a1f2e);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 3px;
+ cursor: pointer;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 10px;
+ transition: border-color 0.12s;
+}
+
+.subghz-peak-item:hover {
+ border-color: var(--neon-orange);
+}
+
+.subghz-peak-item .peak-freq {
+ color: var(--accent-cyan, #00d4ff);
+}
+
+.subghz-peak-item .peak-power {
+ color: var(--neon-orange);
+}
+
+/* ===== Stats Strip ===== */
+.subghz-stats-strip {
+ display: flex;
+ align-items: center;
+ gap: 0;
+ background: var(--bg-card, #161b22);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 6px;
+ padding: 6px 12px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 11px;
+ flex-shrink: 0;
+ flex-wrap: wrap;
+}
+
+.subghz-strip-group {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 0 10px;
+}
+
+.subghz-strip-divider {
+ width: 1px;
+ height: 20px;
+ background: var(--border-color, #2a3040);
+ flex-shrink: 0;
+}
+
+.subghz-strip-status {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.subghz-strip-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--text-dim, #666);
+ flex-shrink: 0;
+ transition: background 0.2s;
+}
+
+.subghz-strip-dot.active {
+ animation: subghz-pulse 1.5s ease-in-out infinite;
+}
+
+.subghz-strip-dot.rx { background: var(--neon-green); }
+.subghz-strip-dot.decode { background: #00d4ff; }
+.subghz-strip-dot.tx { background: #ff4444; }
+.subghz-strip-dot.sweep { background: var(--neon-orange); }
+
+.subghz-strip-status-text {
+ color: var(--text-secondary, #999);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.subghz-strip-stat {
+ display: flex;
+ align-items: baseline;
+ gap: 4px;
+}
+
+.subghz-strip-value {
+ font-weight: 600;
+ color: var(--text-primary, #e0e0e0);
+}
+
+.subghz-strip-value.accent-cyan { color: var(--accent-cyan, #00d4ff); }
+.subghz-strip-value.accent-green { color: var(--neon-green); }
+.subghz-strip-value.accent-orange { color: var(--neon-orange); }
+
+.subghz-strip-label {
+ color: var(--text-dim, #666);
+ font-size: 9px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.subghz-strip-timer {
+ color: var(--accent-cyan, #00d4ff);
+ font-weight: 600;
+ min-width: 40px;
+}
+
.subghz-strip-start-btn {
padding: 2px 10px;
border: 1px solid #22c55e;
@@ -1203,89 +1203,89 @@
.subghz-strip-start-btn:hover {
background: rgba(34, 197, 94, 0.15);
}
-
-.subghz-strip-device-badge {
- display: flex;
- align-items: center;
- gap: 5px;
- padding: 2px 8px;
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 3px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 10px;
- color: var(--text-secondary, #999);
- letter-spacing: 0.3px;
-}
-
-.subghz-strip-device-dot {
- width: 6px;
- height: 6px;
- border-radius: 50%;
- background: var(--text-dim, #666);
-}
-
-.subghz-strip-device-dot.connected {
- background: #00ff88;
-}
-
+
+.subghz-strip-device-badge {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ padding: 2px 8px;
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 3px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 10px;
+ color: var(--text-secondary, #999);
+ letter-spacing: 0.3px;
+}
+
+.subghz-strip-device-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: var(--text-dim, #666);
+}
+
+.subghz-strip-device-dot.connected {
+ background: var(--neon-green);
+}
+
.subghz-strip-device-dot.disconnected {
background: var(--accent-red, #ff4444);
}
.subghz-strip-device-dot.unknown {
- background: #ffaa00;
+ background: var(--neon-orange);
}
-
-/* ===== Signal Console ===== */
-.subghz-signal-console {
- background: var(--bg-card, #161b22);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 6px;
- overflow: hidden;
- flex-shrink: 0;
-}
-
-.subghz-console-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 6px 12px;
- cursor: pointer;
- user-select: none;
- border-bottom: 1px solid var(--border-color, #2a3040);
-}
-
-.subghz-console-header:hover {
- background: rgba(255, 255, 255, 0.02);
-}
-
+
+/* ===== Signal Console ===== */
+.subghz-signal-console {
+ background: var(--bg-card, #161b22);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 6px;
+ overflow: hidden;
+ flex-shrink: 0;
+}
+
+.subghz-console-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 6px 12px;
+ cursor: pointer;
+ user-select: none;
+ border-bottom: 1px solid var(--border-color, #2a3040);
+}
+
+.subghz-console-header:hover {
+ background: rgba(255, 255, 255, 0.02);
+}
+
.subghz-phase-strip {
display: flex;
align-items: center;
gap: 6px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 10px;
-}
-
-.subghz-phase-step {
- color: var(--text-dim, #666);
- letter-spacing: 0.5px;
- transition: color 0.3s;
-}
-
-.subghz-phase-step.active {
- color: var(--accent-cyan, #00d4ff);
- text-shadow: 0 0 6px rgba(0, 212, 255, 0.3);
-}
-
-.subghz-phase-step.completed {
- color: #00ff88;
-}
-
-.subghz-phase-step.error {
- color: var(--accent-red, #ff4444);
-}
-
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 10px;
+}
+
+.subghz-phase-step {
+ color: var(--text-dim, #666);
+ letter-spacing: 0.5px;
+ transition: color 0.3s;
+}
+
+.subghz-phase-step.active {
+ color: var(--accent-cyan, #00d4ff);
+ text-shadow: 0 0 6px rgba(0, 212, 255, 0.3);
+}
+
+.subghz-phase-step.completed {
+ color: var(--neon-green);
+}
+
+.subghz-phase-step.error {
+ color: var(--accent-red, #ff4444);
+}
+
.subghz-phase-arrow {
color: var(--text-dim, #666);
font-size: 8px;
@@ -1317,12 +1317,12 @@
.subghz-burst-indicator.active {
border-color: rgba(255, 170, 0, 0.6);
- color: #ffaa00;
+ color: var(--neon-orange);
background: rgba(255, 170, 0, 0.12);
}
.subghz-burst-indicator.active .subghz-burst-dot {
- background: #ffaa00;
+ background: var(--neon-orange);
box-shadow: 0 0 10px rgba(255, 170, 0, 0.7);
animation: subghz-pulse 0.45s ease-in-out infinite;
}
@@ -1336,126 +1336,126 @@
.subghz-burst-indicator.recent .subghz-burst-dot {
background: #00d4ff;
}
-
-.subghz-console-toggle {
- background: none;
- border: none;
- color: var(--text-dim, #666);
- cursor: pointer;
- font-size: 10px;
- padding: 2px 4px;
- transition: transform 0.2s;
-}
-
-.subghz-console-toggle.collapsed {
- transform: rotate(-90deg);
-}
-
-.subghz-console-body {
- max-height: 120px;
- overflow: hidden;
- transition: max-height 0.25s ease;
-}
-
-.subghz-console-body.collapsed {
- max-height: 0;
-}
-
-.subghz-console-log {
- padding: 6px 12px;
- overflow-y: auto;
- max-height: 114px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 10px;
- line-height: 1.6;
-}
-
-.subghz-log-entry {
- display: flex;
- gap: 8px;
- animation: subghz-fade-in 0.2s ease;
-}
-
-.subghz-log-ts {
- color: var(--text-dim, #666);
- flex-shrink: 0;
-}
-
-.subghz-log-msg { color: var(--text-secondary, #999); }
-.subghz-log-msg.info { color: var(--accent-cyan, #00d4ff); }
-.subghz-log-msg.success { color: #00ff88; }
-.subghz-log-msg.warn { color: #ffaa00; }
-.subghz-log-msg.error { color: var(--accent-red, #ff4444); }
-
-/* ===== Action Hub ===== */
-.subghz-action-hub {
- display: flex;
- flex-direction: column;
- flex: 1;
- justify-content: center;
- padding: 24px;
- gap: 16px;
-}
-
-.subghz-hub-header {
- text-align: center;
-}
-
-.subghz-hub-header-title {
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 20px;
- font-weight: 700;
- color: var(--accent-cyan, #00d4ff);
- letter-spacing: 1px;
-}
-
-.subghz-hub-header-sub {
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 11px;
- color: var(--text-dim, #666);
- margin-top: 2px;
-}
-
-.subghz-hub-grid {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 12px;
-}
-
-.subghz-hub-card {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 8px;
- padding: 24px 16px;
- background: var(--bg-card, #161b22);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 8px;
- cursor: pointer;
- transition: border-color 0.2s, background 0.2s, transform 0.15s;
- text-align: center;
-}
-
-.subghz-hub-card:hover {
- transform: translateY(-2px);
-}
-
-.subghz-hub-card:active {
- transform: translateY(0);
-}
-
-.subghz-hub-card--cyan { border-color: rgba(0, 212, 255, 0.2); }
-.subghz-hub-card--cyan:hover { border-color: var(--accent-cyan, #00d4ff); background: rgba(0, 212, 255, 0.05); }
-.subghz-hub-card--cyan .subghz-hub-icon { color: var(--accent-cyan, #00d4ff); }
-
-.subghz-hub-card--green { border-color: rgba(0, 255, 136, 0.2); }
-.subghz-hub-card--green:hover { border-color: #00ff88; background: rgba(0, 255, 136, 0.05); }
-.subghz-hub-card--green .subghz-hub-icon { color: #00ff88; }
-
+
+.subghz-console-toggle {
+ background: none;
+ border: none;
+ color: var(--text-dim, #666);
+ cursor: pointer;
+ font-size: 10px;
+ padding: 2px 4px;
+ transition: transform 0.2s;
+}
+
+.subghz-console-toggle.collapsed {
+ transform: rotate(-90deg);
+}
+
+.subghz-console-body {
+ max-height: 120px;
+ overflow: hidden;
+ transition: max-height 0.25s ease;
+}
+
+.subghz-console-body.collapsed {
+ max-height: 0;
+}
+
+.subghz-console-log {
+ padding: 6px 12px;
+ overflow-y: auto;
+ max-height: 114px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 10px;
+ line-height: 1.6;
+}
+
+.subghz-log-entry {
+ display: flex;
+ gap: 8px;
+ animation: subghz-fade-in 0.2s ease;
+}
+
+.subghz-log-ts {
+ color: var(--text-dim, #666);
+ flex-shrink: 0;
+}
+
+.subghz-log-msg { color: var(--text-secondary, #999); }
+.subghz-log-msg.info { color: var(--accent-cyan, #00d4ff); }
+.subghz-log-msg.success { color: var(--neon-green); }
+.subghz-log-msg.warn { color: var(--neon-orange); }
+.subghz-log-msg.error { color: var(--accent-red, #ff4444); }
+
+/* ===== Action Hub ===== */
+.subghz-action-hub {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ justify-content: center;
+ padding: 24px;
+ gap: 16px;
+}
+
+.subghz-hub-header {
+ text-align: center;
+}
+
+.subghz-hub-header-title {
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 20px;
+ font-weight: 700;
+ color: var(--accent-cyan, #00d4ff);
+ letter-spacing: 1px;
+}
+
+.subghz-hub-header-sub {
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 11px;
+ color: var(--text-dim, #666);
+ margin-top: 2px;
+}
+
+.subghz-hub-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 12px;
+}
+
+.subghz-hub-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ padding: 24px 16px;
+ background: var(--bg-card, #161b22);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 8px;
+ cursor: pointer;
+ transition: border-color 0.2s, background 0.2s, transform 0.15s;
+ text-align: center;
+}
+
+.subghz-hub-card:hover {
+ transform: translateY(-2px);
+}
+
+.subghz-hub-card:active {
+ transform: translateY(0);
+}
+
+.subghz-hub-card--cyan { border-color: rgba(0, 212, 255, 0.2); }
+.subghz-hub-card--cyan:hover { border-color: var(--accent-cyan, #00d4ff); background: rgba(0, 212, 255, 0.05); }
+.subghz-hub-card--cyan .subghz-hub-icon { color: var(--accent-cyan, #00d4ff); }
+
+.subghz-hub-card--green { border-color: rgba(0, 255, 136, 0.2); }
+.subghz-hub-card--green:hover { border-color: var(--neon-green); background: rgba(0, 255, 136, 0.05); }
+.subghz-hub-card--green .subghz-hub-icon { color: var(--neon-green); }
+
.subghz-hub-card--orange { border-color: rgba(255, 170, 0, 0.2); }
-.subghz-hub-card--orange:hover { border-color: #ffaa00; background: rgba(255, 170, 0, 0.05); }
-.subghz-hub-card--orange .subghz-hub-icon { color: #ffaa00; }
+.subghz-hub-card--orange:hover { border-color: var(--neon-orange); background: rgba(255, 170, 0, 0.05); }
+.subghz-hub-card--orange .subghz-hub-icon { color: var(--neon-orange); }
.subghz-hub-card--red { border-color: rgba(255, 68, 68, 0.25); }
.subghz-hub-card--red:hover { border-color: #ff4444; background: rgba(255, 68, 68, 0.08); }
@@ -1464,35 +1464,35 @@
.subghz-hub-card--purple { border-color: rgba(180, 120, 255, 0.2); }
.subghz-hub-card--purple:hover { border-color: #b478ff; background: rgba(180, 120, 255, 0.05); }
.subghz-hub-card--purple .subghz-hub-icon { color: #b478ff; }
-
-.subghz-hub-icon {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.subghz-hub-title {
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 14px;
- font-weight: 600;
- color: var(--text-primary, #e0e0e0);
-}
-
-.subghz-hub-desc {
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 10px;
- color: var(--text-dim, #666);
-}
-
-/* ===== Operation Panels ===== */
-.subghz-op-panel {
- display: flex;
- flex-direction: column;
- flex: 1;
- min-height: 0;
- overflow: hidden;
-}
-
+
+.subghz-hub-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.subghz-hub-title {
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--text-primary, #e0e0e0);
+}
+
+.subghz-hub-desc {
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 10px;
+ color: var(--text-dim, #666);
+}
+
+/* ===== Operation Panels ===== */
+.subghz-op-panel {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+}
+
.subghz-op-panel-header {
display: flex;
align-items: center;
@@ -1531,24 +1531,24 @@
color: var(--accent-cyan, #00d4ff);
margin-right: 4px;
}
-
-.subghz-op-back-btn {
- padding: 3px 10px;
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 4px;
- background: transparent;
- color: var(--text-secondary, #999);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 11px;
- cursor: pointer;
- transition: border-color 0.15s, color 0.15s;
-}
-
-.subghz-op-back-btn:hover {
- border-color: var(--accent-cyan, #00d4ff);
- color: var(--accent-cyan, #00d4ff);
-}
-
+
+.subghz-op-back-btn {
+ padding: 3px 10px;
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 4px;
+ background: transparent;
+ color: var(--text-secondary, #999);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 11px;
+ cursor: pointer;
+ transition: border-color 0.15s, color 0.15s;
+}
+
+.subghz-op-back-btn:hover {
+ border-color: var(--accent-cyan, #00d4ff);
+ color: var(--accent-cyan, #00d4ff);
+}
+
.subghz-op-panel-title {
font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
font-size: 12px;
@@ -1597,8 +1597,8 @@
grid-template-columns: 1fr;
}
}
-
-/* ===== RX Display ===== */
+
+/* ===== RX Display ===== */
.subghz-rx-display {
flex: 1;
display: flex;
@@ -1615,26 +1615,26 @@
max-width: 980px;
margin: 0 auto;
}
-
-.subghz-rx-recording {
- display: flex;
- align-items: center;
- gap: 8px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 14px;
- font-weight: 600;
- color: var(--accent-red, #ff4444);
- letter-spacing: 1px;
-}
-
-.subghz-rx-rec-dot {
- width: 12px;
- height: 12px;
- border-radius: 50%;
- background: var(--accent-red, #ff4444);
- animation: subghz-pulse 0.8s ease-in-out infinite;
-}
-
+
+.subghz-rx-recording {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--accent-red, #ff4444);
+ letter-spacing: 1px;
+}
+
+.subghz-rx-rec-dot {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background: var(--accent-red, #ff4444);
+ animation: subghz-pulse 0.8s ease-in-out infinite;
+}
+
.subghz-rx-info-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1642,33 +1642,33 @@
width: 100%;
max-width: 980px;
}
-
-.subghz-rx-info-item {
- display: flex;
- flex-direction: column;
- gap: 2px;
- padding: 10px;
- background: rgba(0, 0, 0, 0.3);
- border-radius: 4px;
- text-align: center;
-}
-
-.subghz-rx-info-label {
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 9px;
- color: var(--text-dim, #666);
- letter-spacing: 0.5px;
-}
-
+
+.subghz-rx-info-item {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ padding: 10px;
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 4px;
+ text-align: center;
+}
+
+.subghz-rx-info-label {
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 9px;
+ color: var(--text-dim, #666);
+ letter-spacing: 0.5px;
+}
+
.subghz-rx-info-value {
font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--text-primary, #e0e0e0);
}
-
-.subghz-rx-info-value.accent-cyan { color: var(--accent-cyan, #00d4ff); }
-
+
+.subghz-rx-info-value.accent-cyan { color: var(--accent-cyan, #00d4ff); }
+
.subghz-rx-level-wrapper {
display: flex;
align-items: center;
@@ -1707,7 +1707,7 @@
.subghz-rx-hint-confidence {
font-size: 10px;
- color: #00ff88;
+ color: var(--neon-green);
border: 1px solid rgba(0, 255, 136, 0.35);
border-radius: 999px;
padding: 1px 8px;
@@ -1729,7 +1729,7 @@
}
.subghz-rx-burst-pill.active {
- color: #ffaa00;
+ color: var(--neon-orange);
border-color: rgba(255, 170, 0, 0.7);
background: rgba(255, 170, 0, 0.15);
}
@@ -1739,23 +1739,23 @@
border-color: rgba(0, 212, 255, 0.65);
background: rgba(0, 212, 255, 0.12);
}
-
-.subghz-rx-level-label {
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 9px;
- color: var(--text-dim, #666);
- letter-spacing: 0.5px;
- flex-shrink: 0;
-}
-
-.subghz-rx-level-bar {
- flex: 1;
- height: 6px;
- background: rgba(255, 255, 255, 0.05);
- border-radius: 3px;
- overflow: hidden;
-}
-
+
+.subghz-rx-level-label {
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 9px;
+ color: var(--text-dim, #666);
+ letter-spacing: 0.5px;
+ flex-shrink: 0;
+}
+
+.subghz-rx-level-bar {
+ flex: 1;
+ height: 6px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 3px;
+ overflow: hidden;
+}
+
.subghz-rx-level-fill {
height: 100%;
background: linear-gradient(90deg, #00ff88, #ffaa00, #ff4444);
@@ -1866,63 +1866,63 @@
}
.subghz-wf-pause-btn.paused {
- color: #ffaa00;
+ color: var(--neon-orange);
border-color: rgba(255, 170, 0, 0.6);
}
-
-/* ===== TX Display ===== */
-.subghz-tx-display {
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 16px;
- padding: 24px;
-}
-
-.subghz-tx-pulse-ring {
- position: relative;
- width: 60px;
- height: 60px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.subghz-tx-pulse-ring::before,
-.subghz-tx-pulse-ring::after {
- content: '';
- position: absolute;
- border-radius: 50%;
- border: 2px solid var(--accent-red, #ff4444);
- animation: subghz-tx-ring 1.5s ease-out infinite;
-}
-
-.subghz-tx-pulse-ring::before {
- width: 100%;
- height: 100%;
- opacity: 0.6;
-}
-
-.subghz-tx-pulse-ring::after {
- width: 100%;
- height: 100%;
- animation-delay: 0.5s;
- opacity: 0.3;
-}
-
-@keyframes subghz-tx-ring {
- 0% { transform: scale(0.5); opacity: 0.8; }
- 100% { transform: scale(1.5); opacity: 0; }
-}
-
+
+/* ===== TX Display ===== */
+.subghz-tx-display {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ padding: 24px;
+}
+
+.subghz-tx-pulse-ring {
+ position: relative;
+ width: 60px;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.subghz-tx-pulse-ring::before,
+.subghz-tx-pulse-ring::after {
+ content: '';
+ position: absolute;
+ border-radius: 50%;
+ border: 2px solid var(--accent-red, #ff4444);
+ animation: subghz-tx-ring 1.5s ease-out infinite;
+}
+
+.subghz-tx-pulse-ring::before {
+ width: 100%;
+ height: 100%;
+ opacity: 0.6;
+}
+
+.subghz-tx-pulse-ring::after {
+ width: 100%;
+ height: 100%;
+ animation-delay: 0.5s;
+ opacity: 0.3;
+}
+
+@keyframes subghz-tx-ring {
+ 0% { transform: scale(0.5); opacity: 0.8; }
+ 100% { transform: scale(1.5); opacity: 0; }
+}
+
.subghz-tx-pulse-dot {
width: 16px;
height: 16px;
border-radius: 50%;
- background: var(--accent-red, #ff4444);
- z-index: 1;
+ background: var(--accent-red, #ff4444);
+ z-index: 1;
animation: subghz-pulse 0.6s ease-in-out infinite;
}
@@ -1936,84 +1936,84 @@
.subghz-tx-display.idle .subghz-tx-label {
color: var(--text-secondary, #999);
}
-
-.subghz-tx-label {
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 14px;
- font-weight: 600;
- color: var(--accent-red, #ff4444);
- letter-spacing: 2px;
-}
-
-.subghz-tx-info-grid {
- display: flex;
- gap: 20px;
-}
-
-.subghz-tx-info-item {
- display: flex;
- flex-direction: column;
- gap: 2px;
- text-align: center;
-}
-
-.subghz-tx-info-label {
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 9px;
- color: var(--text-dim, #666);
- letter-spacing: 0.5px;
-}
-
-.subghz-tx-info-value {
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 16px;
- font-weight: 600;
- color: var(--text-primary, #e0e0e0);
-}
-
-.subghz-tx-info-value.accent-red { color: var(--accent-red, #ff4444); }
-
-/* ===== Sweep Layout ===== */
-.subghz-sweep-layout {
- flex: 1;
- display: flex;
- gap: 8px;
- min-height: 0;
-}
-
-.subghz-sweep-layout .subghz-sweep-chart-wrapper {
- flex: 1;
- display: block;
- min-height: 200px;
-}
-
-.subghz-sweep-peaks-sidebar {
- width: 160px;
- background: var(--bg-card, #161b22);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 6px;
- padding: 8px;
- overflow-y: auto;
- flex-shrink: 0;
-}
-
-.subghz-sweep-peaks-title {
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 10px;
- color: var(--text-dim, #666);
- text-transform: uppercase;
- letter-spacing: 1px;
- margin-bottom: 6px;
- padding-bottom: 4px;
- border-bottom: 1px solid var(--border-color, #2a3040);
-}
-
-/* ===== Responsive ===== */
-@media (max-width: 768px) {
- .subghz-sweep-chart-wrapper {
- min-height: 180px;
- }
-
+
+.subghz-tx-label {
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--accent-red, #ff4444);
+ letter-spacing: 2px;
+}
+
+.subghz-tx-info-grid {
+ display: flex;
+ gap: 20px;
+}
+
+.subghz-tx-info-item {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ text-align: center;
+}
+
+.subghz-tx-info-label {
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 9px;
+ color: var(--text-dim, #666);
+ letter-spacing: 0.5px;
+}
+
+.subghz-tx-info-value {
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--text-primary, #e0e0e0);
+}
+
+.subghz-tx-info-value.accent-red { color: var(--accent-red, #ff4444); }
+
+/* ===== Sweep Layout ===== */
+.subghz-sweep-layout {
+ flex: 1;
+ display: flex;
+ gap: 8px;
+ min-height: 0;
+}
+
+.subghz-sweep-layout .subghz-sweep-chart-wrapper {
+ flex: 1;
+ display: block;
+ min-height: 200px;
+}
+
+.subghz-sweep-peaks-sidebar {
+ width: 160px;
+ background: var(--bg-card, #161b22);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 6px;
+ padding: 8px;
+ overflow-y: auto;
+ flex-shrink: 0;
+}
+
+.subghz-sweep-peaks-title {
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 10px;
+ color: var(--text-dim, #666);
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ margin-bottom: 6px;
+ padding-bottom: 4px;
+ border-bottom: 1px solid var(--border-color, #2a3040);
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 768px) {
+ .subghz-sweep-chart-wrapper {
+ min-height: 180px;
+ }
+
.subghz-tx-modal {
padding: 16px;
}
@@ -2021,23 +2021,23 @@
.subghz-tx-segment-grid {
grid-template-columns: 1fr;
}
-
- .subghz-action-hub {
- padding: 12px;
- }
-
- .subghz-hub-grid {
- grid-template-columns: 1fr;
- }
-
- .subghz-hub-card {
- padding: 16px 12px;
- }
-
- .subghz-sweep-peaks-sidebar {
- display: none;
- }
-
+
+ .subghz-action-hub {
+ padding: 12px;
+ }
+
+ .subghz-hub-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .subghz-hub-card {
+ padding: 16px 12px;
+ }
+
+ .subghz-sweep-peaks-sidebar {
+ display: none;
+ }
+
.subghz-stats-strip {
padding: 4px 8px;
}
@@ -2047,11 +2047,11 @@
padding: 2px 6px;
margin-right: 4px;
}
-
- .subghz-strip-group {
- padding: 0 6px;
- }
-
+
+ .subghz-strip-group {
+ padding: 0 6px;
+ }
+
.subghz-rx-info-grid {
grid-template-columns: 1fr;
}
diff --git a/static/css/modes/tscm.css b/static/css/modes/tscm.css
index 883faf1..c268dd5 100644
--- a/static/css/modes/tscm.css
+++ b/static/css/modes/tscm.css
@@ -81,7 +81,7 @@
}
.tscm-panel-header .badge {
background: var(--primary-color);
- color: #fff;
+ color: var(--text-inverse);
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
@@ -175,7 +175,7 @@
background: var(--accent-green);
border: none;
border-radius: 4px;
- color: #000;
+ color: var(--text-inverse);
font-size: 12px;
font-weight: 600;
cursor: pointer;
@@ -411,7 +411,7 @@
.tscm-modal-close:hover {
background: var(--accent-red);
border-color: var(--accent-red);
- color: #fff;
+ color: var(--text-inverse);
}
.device-detail-header {
padding: 16px;
@@ -654,10 +654,10 @@
border-radius: 3px;
text-transform: uppercase;
}
-.tscm-threat-item.critical .tscm-threat-severity { background: #ff3366; color: #fff; }
-.tscm-threat-item.high .tscm-threat-severity { background: #ff9933; color: #000; }
-.tscm-threat-item.medium .tscm-threat-severity { background: #ffcc00; color: #000; }
-.tscm-threat-item.low .tscm-threat-severity { background: #00ff88; color: #000; }
+.tscm-threat-item.critical .tscm-threat-severity { background: var(--severity-critical); color: var(--text-inverse); }
+.tscm-threat-item.high .tscm-threat-severity { background: var(--severity-high); color: var(--text-inverse); }
+.tscm-threat-item.medium .tscm-threat-severity { background: var(--severity-medium); color: var(--text-inverse); }
+.tscm-threat-item.low .tscm-threat-severity { background: var(--severity-low); color: var(--text-inverse); }
.tscm-threat-details {
font-size: 11px;
color: var(--text-muted);
@@ -1691,3 +1691,45 @@
flex-wrap: wrap;
margin-top: 6px;
}
+
+/* Light theme overrides */
+[data-theme="light"] .threat-card.critical { border-color: var(--severity-critical); color: var(--severity-critical); }
+[data-theme="light"] .threat-card.high { border-color: var(--severity-high); color: var(--severity-high); }
+[data-theme="light"] .threat-card.medium { border-color: var(--severity-medium); color: var(--severity-medium); }
+[data-theme="light"] .threat-card.low { border-color: var(--severity-low); color: var(--severity-low); }
+[data-theme="light"] .tscm-threat-item.critical { border-color: var(--severity-critical); }
+[data-theme="light"] .tscm-threat-item.high { border-color: var(--severity-high); }
+[data-theme="light"] .tscm-threat-item.medium { border-color: var(--severity-medium); }
+[data-theme="light"] .tscm-threat-item.low { border-color: var(--severity-low); }
+[data-theme="light"] .score-badge.score-high { color: #cc2222; }
+[data-theme="light"] .score-badge.score-medium { color: #9a8420; }
+[data-theme="light"] .score-badge.score-low { color: #1a8a50; }
+[data-theme="light"] .score-circle.high { border-color: #cc2222; }
+[data-theme="light"] .score-circle.medium { border-color: #9a8420; }
+[data-theme="light"] .score-circle.low { border-color: #1a8a50; }
+[data-theme="light"] .score-circle.high .score-value { color: #cc2222; }
+[data-theme="light"] .score-circle.medium .score-value { color: #9a8420; }
+[data-theme="light"] .score-circle.low .score-value { color: #1a8a50; }
+[data-theme="light"] .cap-status.available { color: #1a8a50; }
+[data-theme="light"] .cap-status.limited { color: #9a8420; }
+[data-theme="light"] .cap-status.unavailable { color: #cc2222; }
+[data-theme="light"] .cap-detail-status.available { color: #1a8a50; }
+[data-theme="light"] .cap-detail-status.limited { color: #9a8420; }
+[data-theme="light"] .cap-detail-status.unavailable { color: #cc2222; }
+[data-theme="light"] .health-badge.healthy { color: #1a8a50; }
+[data-theme="light"] .health-badge.noisy { color: #9a8420; }
+[data-theme="light"] .health-badge.stale { color: #cc2222; }
+[data-theme="light"] .tscm-assessment.high-interest { color: #cc2222; border-color: #cc2222; }
+[data-theme="light"] .tscm-assessment.needs-review { color: #9a8420; border-color: #9a8420; }
+[data-theme="light"] .tscm-assessment.informational { color: #1a8a50; border-color: #1a8a50; }
+[data-theme="light"] .summary-stat.high-interest .count { color: #cc2222; }
+[data-theme="light"] .summary-stat.needs-review .count { color: #9a8420; }
+[data-theme="light"] .summary-stat.informational .count { color: #1a8a50; }
+[data-theme="light"] .known-badge { color: #1a8a50; }
+[data-theme="light"] .tracker-badge { color: #cc2244; }
+[data-theme="light"] .tscm-correlations { border-color: var(--accent-orange); }
+[data-theme="light"] .tscm-correlations h4 { color: var(--accent-orange); }
+[data-theme="light"] .case-status.open { color: #1a8a50; }
+[data-theme="light"] .playbook-risk.high_interest { color: #cc2222; }
+[data-theme="light"] .playbook-risk.needs_review { color: #9a8420; }
+[data-theme="light"] .playbook-risk.informational { color: #1a8a50; }
diff --git a/static/css/modes/weather-satellite.css b/static/css/modes/weather-satellite.css
index cadcca8..0aceeed 100644
--- a/static/css/modes/weather-satellite.css
+++ b/static/css/modes/weather-satellite.css
@@ -1,514 +1,514 @@
-/* Weather Satellite Mode Styles */
-
-/* ===== Stats Strip ===== */
-.wxsat-stats-strip {
- display: flex;
- align-items: center;
- gap: 12px;
- padding: 8px 16px;
- background: var(--bg-tertiary, #1a1f2e);
- border-bottom: 1px solid var(--border-color, #2a3040);
- flex-wrap: wrap;
- min-height: 44px;
-}
-
-.wxsat-strip-group {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.wxsat-strip-status {
- display: flex;
- align-items: center;
- gap: 6px;
-}
-
-.wxsat-strip-dot {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: var(--text-dim, #666);
-}
-
-.wxsat-strip-dot.capturing {
- background: #00ff88;
- animation: wxsat-pulse 1.5s ease-in-out infinite;
-}
-
-.wxsat-strip-dot.decoding {
- background: #00d4ff;
- animation: wxsat-pulse 0.8s ease-in-out infinite;
-}
-
-@keyframes wxsat-pulse {
- 0%, 100% { opacity: 1; }
- 50% { opacity: 0.4; }
-}
-
-.wxsat-strip-status-text {
- font-size: 12px;
- color: var(--text-secondary, #999);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-.wxsat-strip-btn {
- padding: 4px 12px;
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 4px;
- background: transparent;
- color: var(--text-primary, #e0e0e0);
- font-size: 11px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.wxsat-strip-btn:hover {
- background: var(--bg-hover, #252a3a);
- border-color: var(--accent-cyan, #00d4ff);
-}
-
-.wxsat-strip-btn.stop {
- border-color: #ff4444;
- color: #ff4444;
-}
-
-.wxsat-strip-btn.stop:hover {
- background: rgba(255, 68, 68, 0.1);
-}
-
-.wxsat-strip-divider {
- width: 1px;
- height: 24px;
- background: var(--border-color, #2a3040);
-}
-
-.wxsat-strip-stat {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.wxsat-strip-value {
- font-size: 13px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- color: var(--text-primary, #e0e0e0);
-}
-
-.wxsat-strip-label {
- font-size: 9px;
- color: var(--text-dim, #666);
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.wxsat-strip-value.accent-cyan {
- color: var(--accent-cyan, #00d4ff);
-}
-
-/* ===== Auto-Schedule Toggle ===== */
-.wxsat-schedule-toggle {
- display: flex;
- align-items: center;
- gap: 6px;
- cursor: pointer;
- font-size: 10px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- color: var(--text-dim, #666);
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.wxsat-schedule-toggle input[type="checkbox"] {
- width: 14px;
- height: 14px;
- cursor: pointer;
- accent-color: #00ff88;
-}
-
-.wxsat-schedule-toggle input:checked + .wxsat-toggle-label {
- color: #00ff88;
-}
-
-/* ===== Location inputs in strip ===== */
-.wxsat-strip-location {
- display: flex;
- align-items: center;
- gap: 4px;
-}
-
-.wxsat-loc-input {
- width: 72px;
- padding: 3px 6px;
- background: var(--bg-primary, #0d1117);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 3px;
- color: var(--text-primary, #e0e0e0);
- font-size: 11px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-.wxsat-loc-input:focus {
- border-color: var(--accent-cyan, #00d4ff);
- outline: none;
-}
-
-/* ===== Main Layout ===== */
-.wxsat-visuals-container {
- display: flex;
- flex-direction: column;
- gap: 0;
- width: 100%;
- flex: 1;
- min-height: 0;
-}
-
-.wxsat-content {
- display: flex;
- gap: 12px;
- padding: 12px;
- flex: 1;
- min-height: 0;
- overflow: auto;
-}
-
-/* ===== Countdown Bar ===== */
-.wxsat-countdown-bar {
- display: flex;
- align-items: center;
- gap: 16px;
- padding: 10px 16px;
- background: var(--bg-secondary, #141820);
- border-bottom: 1px solid var(--border-color, #2a3040);
-}
-
-.wxsat-countdown-next {
- display: flex;
- align-items: center;
- gap: 12px;
- flex-shrink: 0;
-}
-
-.wxsat-countdown-boxes {
- display: flex;
- gap: 4px;
-}
-
-.wxsat-countdown-box {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 4px 8px;
- background: var(--bg-primary, #0d1117);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 4px;
- min-width: 40px;
-}
-
-.wxsat-countdown-box.imminent {
- border-color: #ffbb00;
- box-shadow: 0 0 8px rgba(255, 187, 0, 0.2);
-}
-
-.wxsat-countdown-box.active {
- border-color: #00ff88;
- box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
- animation: wxsat-glow 1.5s ease-in-out infinite;
-}
-
-@keyframes wxsat-glow {
- 0%, 100% { box-shadow: 0 0 8px rgba(0, 255, 136, 0.3); }
- 50% { box-shadow: 0 0 16px rgba(0, 255, 136, 0.5); }
-}
-
-.wxsat-cd-value {
- font-size: 16px;
- font-weight: 700;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- color: var(--text-primary, #e0e0e0);
- line-height: 1;
-}
-
-.wxsat-cd-unit {
- font-size: 8px;
- color: var(--text-dim, #666);
- text-transform: uppercase;
- letter-spacing: 0.5px;
- margin-top: 2px;
-}
-
-.wxsat-countdown-info {
- display: flex;
- flex-direction: column;
- gap: 2px;
-}
-
-.wxsat-countdown-sat {
- font-size: 12px;
- font-weight: 600;
- color: var(--accent-cyan, #00d4ff);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-.wxsat-countdown-detail {
- font-size: 10px;
- color: var(--text-dim, #666);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-/* ===== Timeline ===== */
-.wxsat-timeline {
- flex: 1;
- position: relative;
- height: 36px;
- min-width: 200px;
-}
-
-.wxsat-timeline-track {
- position: absolute;
- top: 4px;
- left: 0;
- right: 0;
- height: 16px;
- background: var(--bg-primary, #0d1117);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 3px;
- overflow: hidden;
-}
-
-.wxsat-timeline-pass {
- position: absolute;
- top: 0;
- height: 100%;
- border-radius: 2px;
- cursor: pointer;
- opacity: 0.8;
- transition: opacity 0.2s;
-}
-
-.wxsat-timeline-pass:hover {
- opacity: 1;
-}
-
-.wxsat-timeline-pass.apt { background: rgba(0, 212, 255, 0.6); }
-.wxsat-timeline-pass.lrpt { background: rgba(0, 255, 136, 0.6); }
-.wxsat-timeline-pass.scheduled { border: 1px solid #ffbb00; }
-
-.wxsat-timeline-cursor {
- position: absolute;
- top: 2px;
- width: 2px;
- height: 20px;
- background: #ff4444;
- border-radius: 1px;
- z-index: 2;
-}
-
-.wxsat-timeline-labels {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- display: flex;
- justify-content: space-between;
- font-size: 8px;
- color: var(--text-dim, #666);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-/* ===== Pass Predictions Panel ===== */
-.wxsat-passes-panel {
- flex: 0 0 280px;
- display: flex;
- flex-direction: column;
- gap: 0;
- background: var(--bg-secondary, #141820);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 6px;
- overflow: hidden;
-}
-
-.wxsat-passes-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10px 14px;
- background: var(--bg-tertiary, #1a1f2e);
- border-bottom: 1px solid var(--border-color, #2a3040);
-}
-
-.wxsat-passes-title {
- font-size: 12px;
- font-weight: 600;
- color: var(--text-primary, #e0e0e0);
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.wxsat-passes-count {
- font-size: 11px;
- color: var(--accent-cyan, #00d4ff);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-.wxsat-passes-list {
- flex: 1;
- overflow-y: auto;
- padding: 8px;
-}
-
-.wxsat-pass-card {
- padding: 10px 12px;
- margin-bottom: 6px;
- background: var(--bg-primary, #0d1117);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 4px;
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.wxsat-pass-card:hover {
- border-color: var(--accent-cyan, #00d4ff);
- background: var(--bg-hover, #252a3a);
-}
-
-.wxsat-pass-card.active,
-.wxsat-pass-card.selected {
- border-color: #00ff88;
- background: rgba(0, 255, 136, 0.05);
-}
-
-.wxsat-pass-card .wxsat-scheduled-badge {
- display: inline-block;
- font-size: 8px;
- padding: 1px 4px;
- border-radius: 2px;
- background: rgba(255, 187, 0, 0.15);
- color: #ffbb00;
- margin-left: 6px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.wxsat-pass-sat {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 6px;
-}
-
-.wxsat-pass-sat-name {
- font-size: 12px;
- font-weight: 600;
- color: var(--text-primary, #e0e0e0);
-}
-
-.wxsat-pass-mode {
- font-size: 10px;
- padding: 2px 6px;
- border-radius: 3px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-.wxsat-pass-mode.apt {
- background: rgba(0, 212, 255, 0.15);
- color: #00d4ff;
-}
-
-.wxsat-pass-mode.lrpt {
- background: rgba(0, 255, 136, 0.15);
- color: #00ff88;
-}
-
-.wxsat-pass-details {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 4px;
- font-size: 11px;
- color: var(--text-dim, #666);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-.wxsat-pass-detail-label {
- color: var(--text-dim, #666);
-}
-
-.wxsat-pass-detail-value {
- color: var(--text-secondary, #999);
- text-align: right;
-}
-
-.wxsat-pass-quality {
- display: inline-block;
- font-size: 10px;
- padding: 1px 6px;
- border-radius: 3px;
- margin-top: 4px;
-}
-
-.wxsat-pass-quality.excellent {
- background: rgba(0, 255, 136, 0.15);
- color: #00ff88;
-}
-
-.wxsat-pass-quality.good {
- background: rgba(0, 212, 255, 0.15);
- color: #00d4ff;
-}
-
-.wxsat-pass-quality.fair {
- background: rgba(255, 187, 0, 0.15);
- color: #ffbb00;
-}
-
-/* ===== Center Panel (Polar + Map) ===== */
-.wxsat-center-panel {
- flex: 0 0 320px;
- display: flex;
- flex-direction: column;
- gap: 12px;
-}
-
-.wxsat-polar-container,
-.wxsat-map-container {
- background: var(--bg-secondary, #141820);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 6px;
- overflow: hidden;
-}
-
-.wxsat-panel-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 8px 14px;
- background: var(--bg-tertiary, #1a1f2e);
- border-bottom: 1px solid var(--border-color, #2a3040);
-}
-
-.wxsat-panel-title {
- font-size: 11px;
- font-weight: 600;
- color: var(--text-primary, #e0e0e0);
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.wxsat-panel-subtitle {
- font-size: 10px;
- color: var(--accent-cyan, #00d4ff);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-#wxsatPolarCanvas {
- display: block;
- width: 100%;
- height: auto;
- max-height: 300px;
-}
-
+/* Weather Satellite Mode Styles */
+
+/* ===== Stats Strip ===== */
+.wxsat-stats-strip {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 16px;
+ background: var(--bg-tertiary, #1a1f2e);
+ border-bottom: 1px solid var(--border-color, #2a3040);
+ flex-wrap: wrap;
+ min-height: 44px;
+}
+
+.wxsat-strip-group {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.wxsat-strip-status {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.wxsat-strip-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--text-dim, #666);
+}
+
+.wxsat-strip-dot.capturing {
+ background: #00ff88;
+ animation: wxsat-pulse 1.5s ease-in-out infinite;
+}
+
+.wxsat-strip-dot.decoding {
+ background: #00d4ff;
+ animation: wxsat-pulse 0.8s ease-in-out infinite;
+}
+
+@keyframes wxsat-pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.4; }
+}
+
+.wxsat-strip-status-text {
+ font-size: 12px;
+ color: var(--text-secondary, #999);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+.wxsat-strip-btn {
+ padding: 4px 12px;
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 4px;
+ background: transparent;
+ color: var(--text-primary, #e0e0e0);
+ font-size: 11px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.wxsat-strip-btn:hover {
+ background: var(--bg-hover, #252a3a);
+ border-color: var(--accent-cyan, #00d4ff);
+}
+
+.wxsat-strip-btn.stop {
+ border-color: #ff4444;
+ color: #ff4444;
+}
+
+.wxsat-strip-btn.stop:hover {
+ background: rgba(255, 68, 68, 0.1);
+}
+
+.wxsat-strip-divider {
+ width: 1px;
+ height: 24px;
+ background: var(--border-color, #2a3040);
+}
+
+.wxsat-strip-stat {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.wxsat-strip-value {
+ font-size: 13px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ color: var(--text-primary, #e0e0e0);
+}
+
+.wxsat-strip-label {
+ font-size: 9px;
+ color: var(--text-dim, #666);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.wxsat-strip-value.accent-cyan {
+ color: var(--accent-cyan, #00d4ff);
+}
+
+/* ===== Auto-Schedule Toggle ===== */
+.wxsat-schedule-toggle {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ font-size: 10px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ color: var(--text-dim, #666);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.wxsat-schedule-toggle input[type="checkbox"] {
+ width: 14px;
+ height: 14px;
+ cursor: pointer;
+ accent-color: #00ff88;
+}
+
+.wxsat-schedule-toggle input:checked + .wxsat-toggle-label {
+ color: var(--accent-green);
+}
+
+/* ===== Location inputs in strip ===== */
+.wxsat-strip-location {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.wxsat-loc-input {
+ width: 72px;
+ padding: 3px 6px;
+ background: var(--bg-primary, #0d1117);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 3px;
+ color: var(--text-primary, #e0e0e0);
+ font-size: 11px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+.wxsat-loc-input:focus {
+ border-color: var(--accent-cyan, #00d4ff);
+ outline: none;
+}
+
+/* ===== Main Layout ===== */
+.wxsat-visuals-container {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ width: 100%;
+ flex: 1;
+ min-height: 0;
+}
+
+.wxsat-content {
+ display: flex;
+ gap: 12px;
+ padding: 12px;
+ flex: 1;
+ min-height: 0;
+ overflow: auto;
+}
+
+/* ===== Countdown Bar ===== */
+.wxsat-countdown-bar {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 10px 16px;
+ background: var(--bg-secondary, #141820);
+ border-bottom: 1px solid var(--border-color, #2a3040);
+}
+
+.wxsat-countdown-next {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex-shrink: 0;
+}
+
+.wxsat-countdown-boxes {
+ display: flex;
+ gap: 4px;
+}
+
+.wxsat-countdown-box {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 4px 8px;
+ background: var(--bg-primary, #0d1117);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 4px;
+ min-width: 40px;
+}
+
+.wxsat-countdown-box.imminent {
+ border-color: #ffbb00;
+ box-shadow: 0 0 8px rgba(255, 187, 0, 0.2);
+}
+
+.wxsat-countdown-box.active {
+ border-color: #00ff88;
+ box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
+ animation: wxsat-glow 1.5s ease-in-out infinite;
+}
+
+@keyframes wxsat-glow {
+ 0%, 100% { box-shadow: 0 0 8px rgba(0, 255, 136, 0.3); }
+ 50% { box-shadow: 0 0 16px rgba(0, 255, 136, 0.5); }
+}
+
+.wxsat-cd-value {
+ font-size: 16px;
+ font-weight: 700;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ color: var(--text-primary, #e0e0e0);
+ line-height: 1;
+}
+
+.wxsat-cd-unit {
+ font-size: 8px;
+ color: var(--text-dim, #666);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin-top: 2px;
+}
+
+.wxsat-countdown-info {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.wxsat-countdown-sat {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--accent-cyan, #00d4ff);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+.wxsat-countdown-detail {
+ font-size: 10px;
+ color: var(--text-dim, #666);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+/* ===== Timeline ===== */
+.wxsat-timeline {
+ flex: 1;
+ position: relative;
+ height: 36px;
+ min-width: 200px;
+}
+
+.wxsat-timeline-track {
+ position: absolute;
+ top: 4px;
+ left: 0;
+ right: 0;
+ height: 16px;
+ background: var(--bg-primary, #0d1117);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 3px;
+ overflow: hidden;
+}
+
+.wxsat-timeline-pass {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ border-radius: 2px;
+ cursor: pointer;
+ opacity: 0.8;
+ transition: opacity 0.2s;
+}
+
+.wxsat-timeline-pass:hover {
+ opacity: 1;
+}
+
+.wxsat-timeline-pass.apt { background: rgba(0, 212, 255, 0.6); }
+.wxsat-timeline-pass.lrpt { background: rgba(0, 255, 136, 0.6); }
+.wxsat-timeline-pass.scheduled { border: 1px solid #ffbb00; }
+
+.wxsat-timeline-cursor {
+ position: absolute;
+ top: 2px;
+ width: 2px;
+ height: 20px;
+ background: #ff4444;
+ border-radius: 1px;
+ z-index: 2;
+}
+
+.wxsat-timeline-labels {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: space-between;
+ font-size: 8px;
+ color: var(--text-dim, #666);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+/* ===== Pass Predictions Panel ===== */
+.wxsat-passes-panel {
+ flex: 0 0 280px;
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ background: var(--bg-secondary, #141820);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 6px;
+ overflow: hidden;
+}
+
+.wxsat-passes-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 14px;
+ background: var(--bg-tertiary, #1a1f2e);
+ border-bottom: 1px solid var(--border-color, #2a3040);
+}
+
+.wxsat-passes-title {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-primary, #e0e0e0);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.wxsat-passes-count {
+ font-size: 11px;
+ color: var(--accent-cyan, #00d4ff);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+.wxsat-passes-list {
+ flex: 1;
+ overflow-y: auto;
+ padding: 8px;
+}
+
+.wxsat-pass-card {
+ padding: 10px 12px;
+ margin-bottom: 6px;
+ background: var(--bg-primary, #0d1117);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.wxsat-pass-card:hover {
+ border-color: var(--accent-cyan, #00d4ff);
+ background: var(--bg-hover, #252a3a);
+}
+
+.wxsat-pass-card.active,
+.wxsat-pass-card.selected {
+ border-color: #00ff88;
+ background: rgba(0, 255, 136, 0.05);
+}
+
+.wxsat-pass-card .wxsat-scheduled-badge {
+ display: inline-block;
+ font-size: 8px;
+ padding: 1px 4px;
+ border-radius: 2px;
+ background: rgba(255, 187, 0, 0.15);
+ color: #ffbb00;
+ margin-left: 6px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.wxsat-pass-sat {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 6px;
+}
+
+.wxsat-pass-sat-name {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-primary, #e0e0e0);
+}
+
+.wxsat-pass-mode {
+ font-size: 10px;
+ padding: 2px 6px;
+ border-radius: 3px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+.wxsat-pass-mode.apt {
+ background: rgba(0, 212, 255, 0.15);
+ color: #00d4ff;
+}
+
+.wxsat-pass-mode.lrpt {
+ background: rgba(0, 255, 136, 0.15);
+ color: #00ff88;
+}
+
+.wxsat-pass-details {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 4px;
+ font-size: 11px;
+ color: var(--text-dim, #666);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+.wxsat-pass-detail-label {
+ color: var(--text-dim, #666);
+}
+
+.wxsat-pass-detail-value {
+ color: var(--text-secondary, #999);
+ text-align: right;
+}
+
+.wxsat-pass-quality {
+ display: inline-block;
+ font-size: 10px;
+ padding: 1px 6px;
+ border-radius: 3px;
+ margin-top: 4px;
+}
+
+.wxsat-pass-quality.excellent {
+ background: rgba(0, 255, 136, 0.15);
+ color: #00ff88;
+}
+
+.wxsat-pass-quality.good {
+ background: rgba(0, 212, 255, 0.15);
+ color: #00d4ff;
+}
+
+.wxsat-pass-quality.fair {
+ background: rgba(255, 187, 0, 0.15);
+ color: #ffbb00;
+}
+
+/* ===== Center Panel (Polar + Map) ===== */
+.wxsat-center-panel {
+ flex: 0 0 320px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.wxsat-polar-container,
+.wxsat-map-container {
+ background: var(--bg-secondary, #141820);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 6px;
+ overflow: hidden;
+}
+
+.wxsat-panel-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 14px;
+ background: var(--bg-tertiary, #1a1f2e);
+ border-bottom: 1px solid var(--border-color, #2a3040);
+}
+
+.wxsat-panel-title {
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--text-primary, #e0e0e0);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.wxsat-panel-subtitle {
+ font-size: 10px;
+ color: var(--accent-cyan, #00d4ff);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+#wxsatPolarCanvas {
+ display: block;
+ width: 100%;
+ height: auto;
+ max-height: 300px;
+}
+
.wxsat-ground-map {
position: relative;
height: 200px;
@@ -598,571 +598,582 @@
.wxsat-map-tooltip.leaflet-tooltip-top:before {
border-top-color: rgba(102, 229, 255, 0.65);
}
-
-/* ===== Image Gallery Panel ===== */
-.wxsat-gallery-panel {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 0;
- background: var(--bg-secondary, #141820);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 6px;
- overflow: hidden;
- min-width: 0;
-}
-
-.wxsat-gallery-header {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 10px 14px;
- background: var(--bg-tertiary, #1a1f2e);
- border-bottom: 1px solid var(--border-color, #2a3040);
-}
-
-.wxsat-gallery-title {
- font-size: 12px;
- font-weight: 600;
- color: var(--text-primary, #e0e0e0);
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.wxsat-gallery-count {
- font-size: 11px;
- color: var(--accent-cyan, #00d4ff);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-.wxsat-gallery-grid {
- flex: 1;
- overflow-y: auto;
- padding: 12px;
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
- gap: 12px;
- align-content: start;
-}
-
-.wxsat-image-card {
- position: relative;
- background: var(--bg-primary, #0d1117);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 6px;
- overflow: hidden;
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.wxsat-image-card:hover {
- border-color: var(--accent-cyan, #00d4ff);
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-.wxsat-image-clickable {
- display: block;
-}
-
-.wxsat-image-actions {
- position: absolute;
- top: 6px;
- right: 6px;
- opacity: 0;
- transition: opacity 0.2s;
- z-index: 2;
-}
-
-.wxsat-image-card:hover .wxsat-image-actions {
- opacity: 1;
-}
-
-.wxsat-image-actions button {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 28px;
- height: 28px;
- padding: 0;
- border: none;
- border-radius: 4px;
- background: rgba(0, 0, 0, 0.7);
- color: var(--text-secondary, #999);
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.wxsat-image-actions button:hover {
- background: rgba(255, 68, 68, 0.9);
- color: #fff;
-}
-
-.wxsat-image-preview {
- width: 100%;
- aspect-ratio: 4/3;
- object-fit: cover;
- display: block;
- background: var(--bg-tertiary, #1a1f2e);
-}
-
-.wxsat-image-info {
- padding: 8px 10px;
- border-top: 1px solid var(--border-color, #2a3040);
-}
-
-.wxsat-image-sat {
- font-size: 11px;
- font-weight: 600;
- color: var(--text-primary, #e0e0e0);
- margin-bottom: 2px;
-}
-
-.wxsat-image-product {
- font-size: 10px;
- color: var(--accent-cyan, #00d4ff);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-.wxsat-image-timestamp {
- font-size: 10px;
- color: var(--text-dim, #666);
- margin-top: 2px;
-}
-
-/* Date group headers */
-.wxsat-date-header {
- grid-column: 1 / -1;
- font-size: 11px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- color: var(--text-dim, #666);
- text-transform: uppercase;
- letter-spacing: 0.5px;
- padding: 8px 0 4px;
- border-bottom: 1px solid var(--border-color, #2a3040);
- margin-bottom: 4px;
-}
-
-.wxsat-date-header:first-child {
- padding-top: 0;
-}
-
-/* Empty state */
-.wxsat-gallery-empty {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 40px 20px;
- color: var(--text-dim, #666);
- text-align: center;
- grid-column: 1 / -1;
-}
-
-.wxsat-gallery-empty svg {
- width: 48px;
- height: 48px;
- margin-bottom: 12px;
- opacity: 0.3;
-}
-
-.wxsat-gallery-empty p {
- font-size: 12px;
- margin: 0;
-}
-
-/* ===== Capture Progress ===== */
-.wxsat-capture-status {
- padding: 12px 16px;
- background: var(--bg-tertiary, #1a1f2e);
- border-bottom: 1px solid var(--border-color, #2a3040);
- display: none;
-}
-
-.wxsat-capture-status.active {
- display: block;
-}
-
-.wxsat-capture-info {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 6px;
-}
-
-.wxsat-capture-message {
- font-size: 11px;
- color: var(--text-secondary, #999);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- flex: 1;
- margin-right: 12px;
-}
-
-.wxsat-capture-elapsed {
- font-size: 11px;
- color: var(--text-dim, #666);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- flex-shrink: 0;
-}
-
-.wxsat-progress-bar {
- height: 3px;
- background: var(--bg-primary, #0d1117);
- border-radius: 2px;
- overflow: hidden;
-}
-
-.wxsat-progress-bar .progress {
- height: 100%;
- background: var(--accent-cyan, #00d4ff);
- border-radius: 2px;
- transition: width 0.3s ease;
-}
-
-/* ===== Image Modal ===== */
-.wxsat-image-modal {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.9);
- display: none;
- align-items: center;
- justify-content: center;
- z-index: 10000;
- padding: 20px;
-}
-
-.wxsat-image-modal.show {
- display: flex;
-}
-
-.wxsat-image-modal img {
- max-width: 95%;
- max-height: 95vh;
- border-radius: 4px;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-}
-
-.wxsat-modal-close {
- position: absolute;
- top: 16px;
- right: 24px;
- background: none;
- border: none;
- color: white;
- font-size: 32px;
- cursor: pointer;
- z-index: 10001;
-}
-
-.wxsat-modal-info {
- position: absolute;
- bottom: 20px;
- left: 50%;
- transform: translateX(-50%);
- background: rgba(0, 0, 0, 0.8);
- padding: 8px 16px;
- border-radius: 4px;
- color: var(--text-secondary, #999);
- font-size: 12px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- text-align: center;
-}
-
-.wxsat-modal-toolbar {
- position: absolute;
- top: 16px;
- left: 24px;
- z-index: 10001;
- display: flex;
- gap: 8px;
-}
-
-.wxsat-modal-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 36px;
- height: 36px;
- padding: 0;
- border: 1px solid rgba(255, 255, 255, 0.2);
- border-radius: 6px;
- background: rgba(0, 0, 0, 0.6);
- color: var(--text-secondary, #999);
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.wxsat-modal-btn.delete:hover {
- background: rgba(255, 68, 68, 0.9);
- border-color: #ff4444;
- color: #fff;
-}
-
-/* Gallery clear-all button */
-.wxsat-gallery-clear-btn {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-left: auto;
- padding: 4px;
- border: none;
- border-radius: 4px;
- background: transparent;
- color: var(--text-dim, #666);
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.wxsat-gallery-clear-btn:hover {
- color: #ff4444;
- background: rgba(255, 68, 68, 0.1);
-}
-
-/* ===== Responsive ===== */
-@media (max-width: 1100px) {
- .wxsat-content {
- flex-direction: column;
- }
-
- .wxsat-passes-panel {
- flex: none;
- max-height: 250px;
- }
-
- .wxsat-center-panel {
- flex: none;
- flex-direction: row;
- gap: 12px;
- }
-
- .wxsat-polar-container,
- .wxsat-map-container {
- flex: 1;
- }
-
- .wxsat-countdown-bar {
- flex-wrap: wrap;
- }
-
- .wxsat-timeline {
- min-width: 0;
- flex: 1 1 200px;
- }
-}
-
-@media (max-width: 768px) {
- .wxsat-center-panel {
- flex-direction: column;
- }
-
- .wxsat-countdown-boxes {
- gap: 2px;
- }
-
- .wxsat-countdown-box {
- min-width: 32px;
- padding: 3px 5px;
- }
-
- .wxsat-cd-value {
- font-size: 13px;
- }
-
- .wxsat-gallery-grid {
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
- }
-
- .wxsat-phase-indicator {
- display: none;
- }
-}
-
-/* ===== Signal Console ===== */
-.wxsat-signal-console {
- display: none;
- flex-direction: column;
- border-bottom: 1px solid var(--border-color, #2a3040);
- background: var(--bg-secondary, #141820);
-}
-
-.wxsat-signal-console.active {
- display: flex;
-}
-
-.wxsat-console-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 6px 16px;
- background: var(--bg-tertiary, #1a1f2e);
- border-bottom: 1px solid var(--border-color, #2a3040);
- min-height: 32px;
-}
-
-.wxsat-console-title-group {
- display: flex;
- align-items: center;
- gap: 12px;
- flex: 1;
- min-width: 0;
-}
-
-.wxsat-console-title {
- font-size: 10px;
- font-weight: 600;
- color: var(--text-dim, #666);
- text-transform: uppercase;
- letter-spacing: 1px;
- flex-shrink: 0;
-}
-
-.wxsat-phase-indicator {
- display: flex;
- align-items: center;
- gap: 4px;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-.wxsat-phase-step {
- font-size: 9px;
- padding: 2px 6px;
- border-radius: 3px;
- color: var(--text-dim, #555);
- background: transparent;
- border: 1px solid var(--border-color, #2a3040);
- transition: all 0.3s ease;
- letter-spacing: 0.5px;
-}
-
-.wxsat-phase-step.active {
- color: #00ff88;
- border-color: #00ff88;
- background: rgba(0, 255, 136, 0.1);
- box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
-}
-
-.wxsat-phase-step.completed {
- color: var(--accent-cyan, #00d4ff);
- border-color: rgba(0, 212, 255, 0.3);
- background: rgba(0, 212, 255, 0.05);
- opacity: 0.7;
-}
-
-.wxsat-phase-step.error {
- color: #ff4444;
- border-color: #ff4444;
- background: rgba(255, 68, 68, 0.1);
- box-shadow: 0 0 8px rgba(255, 68, 68, 0.2);
-}
-
-.wxsat-phase-arrow {
- font-size: 8px;
- color: var(--text-dim, #444);
-}
-
-#wxsatConsoleToggle {
- font-size: 10px;
- width: 28px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0;
- flex-shrink: 0;
- transition: transform 0.2s;
-}
-
-#wxsatConsoleToggle.collapsed {
- transform: rotate(-90deg);
-}
-
-.wxsat-console-body {
- max-height: 160px;
- overflow: hidden;
- transition: max-height 0.3s ease;
-}
-
-.wxsat-console-body.collapsed {
- max-height: 0;
-}
-
-.wxsat-console-log {
- overflow-y: auto;
- max-height: 160px;
- padding: 6px 12px;
- background: var(--bg-primary, #0d1117);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- font-size: 10px;
- line-height: 1.6;
-}
-
-.wxsat-console-entry {
- padding: 1px 0 1px 8px;
- border-left: 2px solid transparent;
- color: var(--text-secondary, #999);
- word-break: break-all;
-}
-
-.wxsat-console-entry.wxsat-log-info {
- border-left-color: var(--border-color, #2a3040);
- color: var(--text-dim, #777);
-}
-
-.wxsat-console-entry.wxsat-log-signal {
- border-left-color: #00ff88;
- color: #00ff88;
-}
-
-.wxsat-console-entry.wxsat-log-progress {
- border-left-color: var(--accent-cyan, #00d4ff);
- color: var(--accent-cyan, #00d4ff);
-}
-
-.wxsat-console-entry.wxsat-log-save {
- border-left-color: #ffbb00;
- color: #ffbb00;
-}
-
-.wxsat-console-entry.wxsat-log-error {
- border-left-color: #ff4444;
- color: #ff4444;
-}
-
-.wxsat-console-entry.wxsat-log-warning {
- border-left-color: #ff8800;
- color: #ff8800;
-}
-
-.wxsat-console-entry.wxsat-log-debug {
- border-left-color: transparent;
- color: var(--text-dim, #555);
-}
-
-/* Test Decode collapsible section */
-.wxsat-test-decode-body {
- transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
- max-height: 400px;
- opacity: 1;
- margin-top: 8px;
-}
-
-.wxsat-test-decode-body.collapsed {
- max-height: 0;
- opacity: 0;
- margin-top: 0;
- overflow: hidden;
-}
-
-.wxsat-collapse-icon {
- transition: transform 0.2s ease;
-}
-
-.wxsat-collapse-icon.collapsed {
- transform: rotate(-90deg);
-}
+
+/* ===== Image Gallery Panel ===== */
+.wxsat-gallery-panel {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ background: var(--bg-secondary, #141820);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 6px;
+ overflow: hidden;
+ min-width: 0;
+}
+
+.wxsat-gallery-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 14px;
+ background: var(--bg-tertiary, #1a1f2e);
+ border-bottom: 1px solid var(--border-color, #2a3040);
+}
+
+.wxsat-gallery-title {
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-primary, #e0e0e0);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.wxsat-gallery-count {
+ font-size: 11px;
+ color: var(--accent-cyan, #00d4ff);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+.wxsat-gallery-grid {
+ flex: 1;
+ overflow-y: auto;
+ padding: 12px;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 12px;
+ align-content: start;
+}
+
+.wxsat-image-card {
+ position: relative;
+ background: var(--bg-primary, #0d1117);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 6px;
+ overflow: hidden;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.wxsat-image-card:hover {
+ border-color: var(--accent-cyan, #00d4ff);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.wxsat-image-clickable {
+ display: block;
+}
+
+.wxsat-image-actions {
+ position: absolute;
+ top: 6px;
+ right: 6px;
+ opacity: 0;
+ transition: opacity 0.2s;
+ z-index: 2;
+}
+
+.wxsat-image-card:hover .wxsat-image-actions {
+ opacity: 1;
+}
+
+.wxsat-image-actions button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ padding: 0;
+ border: none;
+ border-radius: 4px;
+ background: rgba(0, 0, 0, 0.7);
+ color: var(--text-secondary, #999);
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.wxsat-image-actions button:hover {
+ background: rgba(255, 68, 68, 0.9);
+ color: var(--text-inverse);
+}
+
+.wxsat-image-preview {
+ width: 100%;
+ aspect-ratio: 4/3;
+ object-fit: cover;
+ display: block;
+ background: var(--bg-tertiary, #1a1f2e);
+}
+
+.wxsat-image-info {
+ padding: 8px 10px;
+ border-top: 1px solid var(--border-color, #2a3040);
+}
+
+.wxsat-image-sat {
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--text-primary, #e0e0e0);
+ margin-bottom: 2px;
+}
+
+.wxsat-image-product {
+ font-size: 10px;
+ color: var(--accent-cyan, #00d4ff);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+.wxsat-image-timestamp {
+ font-size: 10px;
+ color: var(--text-dim, #666);
+ margin-top: 2px;
+}
+
+/* Date group headers */
+.wxsat-date-header {
+ grid-column: 1 / -1;
+ font-size: 11px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ color: var(--text-dim, #666);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ padding: 8px 0 4px;
+ border-bottom: 1px solid var(--border-color, #2a3040);
+ margin-bottom: 4px;
+}
+
+.wxsat-date-header:first-child {
+ padding-top: 0;
+}
+
+/* Empty state */
+.wxsat-gallery-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 40px 20px;
+ color: var(--text-dim, #666);
+ text-align: center;
+ grid-column: 1 / -1;
+}
+
+.wxsat-gallery-empty svg {
+ width: 48px;
+ height: 48px;
+ margin-bottom: 12px;
+ opacity: 0.3;
+}
+
+.wxsat-gallery-empty p {
+ font-size: 12px;
+ margin: 0;
+}
+
+/* ===== Capture Progress ===== */
+.wxsat-capture-status {
+ padding: 12px 16px;
+ background: var(--bg-tertiary, #1a1f2e);
+ border-bottom: 1px solid var(--border-color, #2a3040);
+ display: none;
+}
+
+.wxsat-capture-status.active {
+ display: block;
+}
+
+.wxsat-capture-info {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 6px;
+}
+
+.wxsat-capture-message {
+ font-size: 11px;
+ color: var(--text-secondary, #999);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex: 1;
+ margin-right: 12px;
+}
+
+.wxsat-capture-elapsed {
+ font-size: 11px;
+ color: var(--text-dim, #666);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ flex-shrink: 0;
+}
+
+.wxsat-progress-bar {
+ height: 3px;
+ background: var(--bg-primary, #0d1117);
+ border-radius: 2px;
+ overflow: hidden;
+}
+
+.wxsat-progress-bar .progress {
+ height: 100%;
+ background: var(--accent-cyan, #00d4ff);
+ border-radius: 2px;
+ transition: width 0.3s ease;
+}
+
+/* ===== Image Modal ===== */
+.wxsat-image-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.9);
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 10000;
+ padding: 20px;
+}
+
+.wxsat-image-modal.show {
+ display: flex;
+}
+
+.wxsat-image-modal img {
+ max-width: 95%;
+ max-height: 95vh;
+ border-radius: 4px;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.wxsat-modal-close {
+ position: absolute;
+ top: 16px;
+ right: 24px;
+ background: none;
+ border: none;
+ color: white;
+ font-size: 32px;
+ cursor: pointer;
+ z-index: 10001;
+}
+
+.wxsat-modal-info {
+ position: absolute;
+ bottom: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ background: rgba(0, 0, 0, 0.8);
+ padding: 8px 16px;
+ border-radius: 4px;
+ color: var(--text-secondary, #999);
+ font-size: 12px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ text-align: center;
+}
+
+.wxsat-modal-toolbar {
+ position: absolute;
+ top: 16px;
+ left: 24px;
+ z-index: 10001;
+ display: flex;
+ gap: 8px;
+}
+
+.wxsat-modal-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ padding: 0;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 6px;
+ background: rgba(0, 0, 0, 0.6);
+ color: var(--text-secondary, #999);
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.wxsat-modal-btn.delete:hover {
+ background: rgba(255, 68, 68, 0.9);
+ border-color: #ff4444;
+ color: var(--text-inverse);
+}
+
+/* Gallery clear-all button */
+.wxsat-gallery-clear-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: auto;
+ padding: 4px;
+ border: none;
+ border-radius: 4px;
+ background: transparent;
+ color: var(--text-dim, #666);
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.wxsat-gallery-clear-btn:hover {
+ color: #ff4444;
+ background: rgba(255, 68, 68, 0.1);
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 1100px) {
+ .wxsat-content {
+ flex-direction: column;
+ }
+
+ .wxsat-passes-panel {
+ flex: none;
+ max-height: 250px;
+ }
+
+ .wxsat-center-panel {
+ flex: none;
+ flex-direction: row;
+ gap: 12px;
+ }
+
+ .wxsat-polar-container,
+ .wxsat-map-container {
+ flex: 1;
+ }
+
+ .wxsat-countdown-bar {
+ flex-wrap: wrap;
+ }
+
+ .wxsat-timeline {
+ min-width: 0;
+ flex: 1 1 200px;
+ }
+}
+
+@media (max-width: 768px) {
+ .wxsat-center-panel {
+ flex-direction: column;
+ }
+
+ .wxsat-countdown-boxes {
+ gap: 2px;
+ }
+
+ .wxsat-countdown-box {
+ min-width: 32px;
+ padding: 3px 5px;
+ }
+
+ .wxsat-cd-value {
+ font-size: 13px;
+ }
+
+ .wxsat-gallery-grid {
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ }
+
+ .wxsat-phase-indicator {
+ display: none;
+ }
+}
+
+/* ===== Signal Console ===== */
+.wxsat-signal-console {
+ display: none;
+ flex-direction: column;
+ border-bottom: 1px solid var(--border-color, #2a3040);
+ background: var(--bg-secondary, #141820);
+}
+
+.wxsat-signal-console.active {
+ display: flex;
+}
+
+.wxsat-console-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 6px 16px;
+ background: var(--bg-tertiary, #1a1f2e);
+ border-bottom: 1px solid var(--border-color, #2a3040);
+ min-height: 32px;
+}
+
+.wxsat-console-title-group {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex: 1;
+ min-width: 0;
+}
+
+.wxsat-console-title {
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--text-dim, #666);
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ flex-shrink: 0;
+}
+
+.wxsat-phase-indicator {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+.wxsat-phase-step {
+ font-size: 9px;
+ padding: 2px 6px;
+ border-radius: 3px;
+ color: var(--text-dim, #555);
+ background: transparent;
+ border: 1px solid var(--border-color, #2a3040);
+ transition: all 0.3s ease;
+ letter-spacing: 0.5px;
+}
+
+.wxsat-phase-step.active {
+ color: #00ff88;
+ border-color: #00ff88;
+ background: rgba(0, 255, 136, 0.1);
+ box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
+}
+
+.wxsat-phase-step.completed {
+ color: var(--accent-cyan, #00d4ff);
+ border-color: rgba(0, 212, 255, 0.3);
+ background: rgba(0, 212, 255, 0.05);
+ opacity: 0.7;
+}
+
+.wxsat-phase-step.error {
+ color: #ff4444;
+ border-color: #ff4444;
+ background: rgba(255, 68, 68, 0.1);
+ box-shadow: 0 0 8px rgba(255, 68, 68, 0.2);
+}
+
+.wxsat-phase-arrow {
+ font-size: 8px;
+ color: var(--text-dim, #444);
+}
+
+#wxsatConsoleToggle {
+ font-size: 10px;
+ width: 28px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ flex-shrink: 0;
+ transition: transform 0.2s;
+}
+
+#wxsatConsoleToggle.collapsed {
+ transform: rotate(-90deg);
+}
+
+.wxsat-console-body {
+ max-height: 160px;
+ overflow: hidden;
+ transition: max-height 0.3s ease;
+}
+
+.wxsat-console-body.collapsed {
+ max-height: 0;
+}
+
+.wxsat-console-log {
+ overflow-y: auto;
+ max-height: 160px;
+ padding: 6px 12px;
+ background: var(--bg-primary, #0d1117);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ font-size: 10px;
+ line-height: 1.6;
+}
+
+.wxsat-console-entry {
+ padding: 1px 0 1px 8px;
+ border-left: 2px solid transparent;
+ color: var(--text-secondary, #999);
+ word-break: break-all;
+}
+
+.wxsat-console-entry.wxsat-log-info {
+ border-left-color: var(--border-color, #2a3040);
+ color: var(--text-dim, #777);
+}
+
+.wxsat-console-entry.wxsat-log-signal {
+ border-left-color: #00ff88;
+ color: #00ff88;
+}
+
+.wxsat-console-entry.wxsat-log-progress {
+ border-left-color: var(--accent-cyan, #00d4ff);
+ color: var(--accent-cyan, #00d4ff);
+}
+
+.wxsat-console-entry.wxsat-log-save {
+ border-left-color: #ffbb00;
+ color: #ffbb00;
+}
+
+.wxsat-console-entry.wxsat-log-error {
+ border-left-color: #ff4444;
+ color: #ff4444;
+}
+
+.wxsat-console-entry.wxsat-log-warning {
+ border-left-color: #ff8800;
+ color: #ff8800;
+}
+
+.wxsat-console-entry.wxsat-log-debug {
+ border-left-color: transparent;
+ color: var(--text-dim, #555);
+}
+
+/* Test Decode collapsible section */
+.wxsat-test-decode-body {
+ transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
+ max-height: 400px;
+ opacity: 1;
+ margin-top: 8px;
+}
+
+.wxsat-test-decode-body.collapsed {
+ max-height: 0;
+ opacity: 0;
+ margin-top: 0;
+ overflow: hidden;
+}
+
+.wxsat-collapse-icon {
+ transition: transform 0.2s ease;
+}
+
+.wxsat-collapse-icon.collapsed {
+ transform: rotate(-90deg);
+}
+
+/* Light theme overrides */
+[data-theme="light"] .wxsat-strip-dot.capturing { background: var(--accent-green); }
+[data-theme="light"] .wxsat-strip-dot.decoding { background: var(--accent-cyan); }
+[data-theme="light"] .wxsat-phase-step.active { color: var(--accent-green); border-color: var(--accent-green); }
+[data-theme="light"] .wxsat-console-entry.wxsat-log-signal { border-left-color: var(--accent-green); color: var(--accent-green); }
+[data-theme="light"] .wxsat-console-entry.wxsat-log-save { border-left-color: var(--accent-orange); color: var(--accent-orange); }
+[data-theme="light"] .wxsat-console-entry.wxsat-log-error { border-left-color: var(--accent-red); color: var(--accent-red); }
+[data-theme="light"] .wxsat-console-entry.wxsat-log-warning { border-left-color: var(--accent-orange); color: var(--accent-orange); }
+[data-theme="light"] .wxsat-pass-mode.lrpt { color: var(--accent-green); }
+[data-theme="light"] .wxsat-pass-quality.excellent { color: var(--accent-green); }
diff --git a/static/css/modes/wefax.css b/static/css/modes/wefax.css
index 14462f7..46dba06 100644
--- a/static/css/modes/wefax.css
+++ b/static/css/modes/wefax.css
@@ -1,687 +1,687 @@
-/* ============================================
- WeFax (Weather Fax) Mode Styles
- Amber/gold theme (#ffaa00) for HF
- ============================================ */
-
-/* Place WeFax sidebar panel above the shared SDR Device section
- while keeping the collapse button at the very top. */
-#wefaxMode.active {
- order: -1;
-}
-.sidebar:has(#wefaxMode.active) > .sidebar-collapse-btn {
- order: -2;
-}
-
-/* --- Stats Strip --- */
-.wefax-stats-strip {
- display: flex;
- align-items: center;
- gap: 12px;
- padding: 8px 14px;
- background: var(--bg-card, #0e1117);
- border: 1px solid var(--border-color, #1e2a3a);
- border-radius: 6px;
- margin-bottom: 12px;
- flex-wrap: wrap;
-}
-
-.wefax-strip-group {
- display: flex;
- align-items: center;
- gap: 10px;
-}
-
-.wefax-strip-status {
- display: flex;
- align-items: center;
- gap: 6px;
-}
-
-.wefax-strip-dot {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: #444;
- flex-shrink: 0;
-}
-
-.wefax-strip-dot.scanning { background: #ffaa00; animation: wefax-pulse 1.5s ease-in-out infinite; }
-.wefax-strip-dot.phasing { background: #ffcc44; animation: wefax-pulse 0.8s ease-in-out infinite; }
-.wefax-strip-dot.receiving { background: #00cc66; animation: wefax-pulse 1s ease-in-out infinite; }
-.wefax-strip-dot.complete { background: #00cc66; }
-.wefax-strip-dot.error { background: #f44; }
-
-@keyframes wefax-pulse {
- 0%, 100% { opacity: 1; }
- 50% { opacity: 0.4; }
-}
-
-.wefax-strip-status-text {
- font-family: var(--font-mono, 'JetBrains Mono', monospace);
- font-size: 11px;
- color: var(--text-primary, #e0e0e0);
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.wefax-strip-btn {
- padding: 4px 12px;
- border: 1px solid var(--border-color, #1e2a3a);
- border-radius: 4px;
- font-family: var(--font-mono, monospace);
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- cursor: pointer;
- background: var(--bg-primary, #161b22);
- color: var(--text-primary, #e0e0e0);
- display: inline-flex;
- align-items: center;
- gap: 4px;
- transition: all 0.15s ease;
-}
-
-.wefax-strip-btn.start { color: #ffaa00; border-color: #ffaa0044; }
-.wefax-strip-btn.start:hover { background: #ffaa0015; border-color: #ffaa00; }
-.wefax-strip-btn.start.wefax-strip-btn-error {
- border-color: #ffaa00;
- color: #ffaa00;
- box-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
- animation: wefax-pulse 0.6s ease-in-out 3;
-}
-
-.wefax-strip-btn.stop { color: #f44; border-color: #f4444444; }
-.wefax-strip-btn.stop:hover { background: #f4441a; border-color: #f44; }
-
-.wefax-strip-divider {
- width: 1px;
- height: 20px;
- background: var(--border-color, #1e2a3a);
-}
-
-.wefax-strip-stat {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 1px;
-}
-
-.wefax-strip-value {
- font-family: var(--font-mono, monospace);
- font-size: 13px;
- font-weight: 600;
- color: var(--text-primary, #e0e0e0);
- font-variant-numeric: tabular-nums;
-}
-
-.wefax-strip-value.accent-amber { color: #ffaa00; }
-
-.wefax-strip-label {
- font-family: var(--font-mono, monospace);
- font-size: 8px;
- color: var(--text-dim, #555);
- text-transform: uppercase;
- letter-spacing: 1px;
-}
-
-/* --- Schedule Toggle --- */
-.wefax-schedule-toggle {
- display: flex;
- align-items: center;
- gap: 6px;
- cursor: pointer;
- font-size: 10px;
- font-family: var(--font-mono, 'JetBrains Mono', monospace);
- color: var(--text-dim, #666);
- text-transform: uppercase;
- letter-spacing: 0.5px;
-}
-
-.wefax-schedule-toggle input[type="checkbox"] {
- width: 14px;
- height: 14px;
- cursor: pointer;
- accent-color: #ffaa00;
-}
-
-.wefax-schedule-toggle input:checked + span {
- color: #ffaa00;
-}
-
-/* --- Visuals Container --- */
-.wefax-visuals-container {
- display: flex;
- flex-direction: column;
- gap: 0;
- width: 100%;
-}
-
-/* --- Main Row --- */
-.wefax-main-row {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 12px;
-}
-
-/* --- Schedule Timeline --- */
-.wefax-schedule-panel {
- background: var(--bg-card, #0e1117);
- border: 1px solid var(--border-color, #1e2a3a);
- border-radius: 6px;
- margin-bottom: 12px;
- overflow: hidden;
-}
-
-.wefax-schedule-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 8px 12px;
- border-bottom: 1px solid var(--border-color, #1e2a3a);
-}
-
-.wefax-schedule-title {
- font-family: var(--font-mono, monospace);
- font-size: 11px;
- text-transform: uppercase;
- letter-spacing: 1px;
- color: #ffaa00;
-}
-
-.wefax-schedule-list {
- display: flex;
- flex-direction: column;
- max-height: 200px;
- overflow-y: auto;
-}
-
-.wefax-schedule-entry {
- display: flex;
- align-items: center;
- gap: 10px;
- padding: 6px 12px;
- border-bottom: 1px solid var(--border-color, #1e2a3a)11;
- font-family: var(--font-mono, monospace);
- font-size: 11px;
-}
-
-.wefax-schedule-entry:last-child { border-bottom: none; }
-
-.wefax-schedule-entry.active {
- background: #ffaa0010;
- border-left: 3px solid #ffaa00;
-}
-
-.wefax-schedule-entry.upcoming {
- background: #ffaa0008;
-}
-
-.wefax-schedule-entry.past {
- opacity: 0.4;
-}
-
-.wefax-schedule-time {
- color: #ffaa00;
- min-width: 45px;
- font-variant-numeric: tabular-nums;
-}
-
-.wefax-schedule-content {
- color: var(--text-primary, #e0e0e0);
- flex: 1;
-}
-
-.wefax-schedule-badge {
- font-size: 9px;
- padding: 1px 6px;
- border-radius: 3px;
- background: var(--border-color, #1e2a3a);
- color: var(--text-dim, #555);
-}
-
-.wefax-schedule-badge.live {
- background: #ffaa0030;
- color: #ffaa00;
- font-weight: 600;
-}
-
-.wefax-schedule-badge.soon {
- background: #ffaa0015;
- color: #ffcc66;
-}
-
-.wefax-schedule-empty {
- padding: 16px;
- text-align: center;
- color: var(--text-dim, #555);
- font-size: 11px;
- font-family: var(--font-mono, monospace);
-}
-
-/* --- Live Section --- */
-.wefax-live-section {
- background: var(--bg-card, #0e1117);
- border: 1px solid var(--border-color, #1e2a3a);
- border-radius: 6px;
- overflow: hidden;
-}
-
-.wefax-live-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 8px 12px;
- border-bottom: 1px solid var(--border-color, #1e2a3a);
-}
-
-.wefax-live-title {
- font-family: var(--font-mono, monospace);
- font-size: 11px;
- text-transform: uppercase;
- letter-spacing: 1px;
- color: #ffaa00;
-}
-
-.wefax-live-content {
- padding: 12px;
- min-height: 200px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.wefax-idle-state {
- text-align: center;
- color: var(--text-dim, #555);
-}
-
-.wefax-idle-state svg {
- width: 48px;
- height: 48px;
- color: #ffaa0033;
- margin-bottom: 12px;
-}
-
-.wefax-idle-state h4 {
- margin: 0 0 4px;
- color: var(--text-primary, #e0e0e0);
- font-size: 13px;
-}
-
-.wefax-idle-state p {
- margin: 0;
- font-size: 11px;
-}
-
-.wefax-live-preview {
- max-width: 100%;
- max-height: 400px;
- border-radius: 4px;
- image-rendering: pixelated;
-}
-
-/* --- Gallery Section --- */
-.wefax-gallery-section {
- background: var(--bg-card, #0e1117);
- border: 1px solid var(--border-color, #1e2a3a);
- border-radius: 6px;
- overflow: hidden;
-}
-
-.wefax-gallery-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 8px 12px;
- border-bottom: 1px solid var(--border-color, #1e2a3a);
-}
-
-.wefax-gallery-title {
- font-family: var(--font-mono, monospace);
- font-size: 11px;
- text-transform: uppercase;
- letter-spacing: 1px;
- color: #ffaa00;
-}
-
-.wefax-gallery-controls {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.wefax-gallery-count {
- font-family: var(--font-mono, monospace);
- font-size: 11px;
- color: var(--text-dim, #555);
-}
-
-.wefax-gallery-clear-btn {
- font-family: var(--font-mono, monospace);
- font-size: 9px;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- background: none;
- border: 1px solid var(--border-color, #1e2a3a);
- color: var(--text-dim, #555);
- padding: 2px 8px;
- border-radius: 3px;
- cursor: pointer;
-}
-
-.wefax-gallery-clear-btn:hover {
- border-color: #f44;
- color: #f44;
-}
-
-.wefax-gallery-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
- gap: 8px;
- padding: 10px;
- max-height: 500px;
- overflow-y: auto;
-}
-
-.wefax-gallery-empty {
- padding: 24px;
- text-align: center;
- color: var(--text-dim, #555);
- font-size: 11px;
- font-family: var(--font-mono, monospace);
- grid-column: 1 / -1;
-}
-
-.wefax-gallery-item {
- position: relative;
- background: var(--bg-primary, #161b22);
- border: 1px solid var(--border-color, #1e2a3a);
- border-radius: 4px;
- overflow: hidden;
-}
-
-.wefax-gallery-item img {
- width: 100%;
- aspect-ratio: 4/3;
- object-fit: cover;
- cursor: pointer;
- display: block;
-}
-
-.wefax-gallery-item img:hover {
- opacity: 0.85;
-}
-
-.wefax-gallery-meta {
- padding: 4px 6px;
- display: flex;
- flex-direction: column;
- gap: 1px;
- font-family: var(--font-mono, monospace);
- font-size: 9px;
- color: var(--text-dim, #555);
-}
-
-.wefax-gallery-actions {
- position: absolute;
- top: 4px;
- right: 4px;
- display: flex;
- gap: 4px;
- opacity: 0;
- transition: opacity 0.15s;
-}
-
-.wefax-gallery-item:hover .wefax-gallery-actions {
- opacity: 1;
-}
-
-.wefax-gallery-action {
- width: 22px;
- height: 22px;
- border-radius: 3px;
- border: none;
- background: rgba(0, 0, 0, 0.7);
- color: #ccc;
- font-size: 14px;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- text-decoration: none;
-}
-
-.wefax-gallery-action:hover { color: #fff; }
-.wefax-gallery-action.delete:hover { color: #f44; }
-
-/* --- Countdown Bar + Timeline --- */
-.wefax-countdown-bar {
- display: flex;
- align-items: center;
- gap: 16px;
- padding: 10px 16px;
- background: var(--bg-secondary, #141820);
- border: 1px solid var(--border-color, #1e2a3a);
- border-radius: 6px;
- margin-bottom: 12px;
-}
-
-.wefax-countdown-next {
- display: flex;
- align-items: center;
- gap: 12px;
- flex-shrink: 0;
-}
-
-.wefax-countdown-boxes {
- display: flex;
- gap: 4px;
-}
-
-.wefax-countdown-box {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 4px 8px;
- background: var(--bg-primary, #0d1117);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 4px;
- min-width: 40px;
-}
-
-.wefax-countdown-box.imminent {
- border-color: #ffaa00;
- box-shadow: 0 0 8px rgba(255, 170, 0, 0.2);
-}
-
-.wefax-countdown-box.active {
- border-color: #ffaa00;
- box-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
- animation: wefax-glow 1.5s ease-in-out infinite;
-}
-
-@keyframes wefax-glow {
- 0%, 100% { box-shadow: 0 0 8px rgba(255, 170, 0, 0.3); }
- 50% { box-shadow: 0 0 16px rgba(255, 170, 0, 0.5); }
-}
-
-.wefax-cd-value {
- font-size: 16px;
- font-weight: 700;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
- color: var(--text-primary, #e0e0e0);
- line-height: 1;
-}
-
-.wefax-cd-unit {
- font-size: 8px;
- color: var(--text-dim, #666);
- text-transform: uppercase;
- letter-spacing: 0.5px;
- margin-top: 2px;
-}
-
-.wefax-countdown-info {
- display: flex;
- flex-direction: column;
- gap: 2px;
-}
-
-.wefax-countdown-content {
- font-size: 12px;
- font-weight: 600;
- color: #ffaa00;
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-.wefax-countdown-detail {
- font-size: 10px;
- color: var(--text-dim, #666);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-.wefax-timeline {
- flex: 1;
- position: relative;
- height: 36px;
- min-width: 200px;
-}
-
-.wefax-timeline-track {
- position: absolute;
- top: 4px;
- left: 0;
- right: 0;
- height: 16px;
- background: var(--bg-primary, #0d1117);
- border: 1px solid var(--border-color, #2a3040);
- border-radius: 3px;
- overflow: hidden;
-}
-
-.wefax-timeline-broadcast {
- position: absolute;
- top: 0;
- height: 100%;
- background: rgba(255, 170, 0, 0.5);
- border-radius: 2px;
- cursor: default;
- opacity: 0.8;
- min-width: 2px;
-}
-
-.wefax-timeline-broadcast:hover {
- opacity: 1;
-}
-
-.wefax-timeline-broadcast.active {
- background: rgba(255, 170, 0, 0.85);
- border: 1px solid #ffaa00;
-}
-
-.wefax-timeline-cursor {
- position: absolute;
- top: 2px;
- width: 2px;
- height: 20px;
- background: #ff4444;
- border-radius: 1px;
- z-index: 2;
-}
-
-.wefax-timeline-labels {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- display: flex;
- justify-content: space-between;
- font-size: 8px;
- color: var(--text-dim, #666);
- font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
-}
-
-/* --- Image Modal --- */
-.wefax-image-modal {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.9);
- display: none;
- align-items: center;
- justify-content: center;
- z-index: 10000;
- padding: 40px;
-}
-
-.wefax-image-modal.show {
- display: flex;
-}
-
-.wefax-image-modal img {
- max-width: 100%;
- max-height: 100%;
- border: 1px solid var(--border-color);
- border-radius: 4px;
-}
-
-.wefax-modal-toolbar {
- position: absolute;
- top: 20px;
- right: 60px;
- display: flex;
- gap: 8px;
- z-index: 1;
-}
-
-.wefax-modal-btn {
- display: flex;
- align-items: center;
- gap: 6px;
- font-family: var(--font-mono);
- font-size: 10px;
- padding: 6px 12px;
- background: rgba(255, 255, 255, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.2);
- border-radius: 4px;
- color: white;
- cursor: pointer;
- transition: all 0.15s;
- text-transform: uppercase;
-}
-
-.wefax-modal-btn:hover {
- background: rgba(255, 255, 255, 0.2);
-}
-
-.wefax-modal-btn.delete:hover {
- background: var(--accent-red, #ff3366);
- border-color: var(--accent-red, #ff3366);
-}
-
-.wefax-modal-close {
- position: absolute;
- top: 20px;
- right: 20px;
- background: none;
- border: none;
- color: white;
- font-size: 32px;
- cursor: pointer;
- opacity: 0.7;
- transition: opacity 0.15s;
- z-index: 1;
-}
-
-.wefax-modal-close:hover {
- opacity: 1;
-}
-
-/* --- Responsive --- */
-@media (max-width: 768px) {
- .wefax-main-row {
- grid-template-columns: 1fr;
- }
-}
+/* ============================================
+ WeFax (Weather Fax) Mode Styles
+ Amber/gold theme (#ffaa00) for HF
+ ============================================ */
+
+/* Place WeFax sidebar panel above the shared SDR Device section
+ while keeping the collapse button at the very top. */
+#wefaxMode.active {
+ order: -1;
+}
+.sidebar:has(#wefaxMode.active) > .sidebar-collapse-btn {
+ order: -2;
+}
+
+/* --- Stats Strip --- */
+.wefax-stats-strip {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 8px 14px;
+ background: var(--bg-card, #0e1117);
+ border: 1px solid var(--border-color, #1e2a3a);
+ border-radius: 6px;
+ margin-bottom: 12px;
+ flex-wrap: wrap;
+}
+
+.wefax-strip-group {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.wefax-strip-status {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.wefax-strip-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: #444;
+ flex-shrink: 0;
+}
+
+.wefax-strip-dot.scanning { background: #ffaa00; animation: wefax-pulse 1.5s ease-in-out infinite; }
+.wefax-strip-dot.phasing { background: #ffcc44; animation: wefax-pulse 0.8s ease-in-out infinite; }
+.wefax-strip-dot.receiving { background: #00cc66; animation: wefax-pulse 1s ease-in-out infinite; }
+.wefax-strip-dot.complete { background: #00cc66; }
+.wefax-strip-dot.error { background: #f44; }
+
+@keyframes wefax-pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.4; }
+}
+
+.wefax-strip-status-text {
+ font-family: var(--font-mono, 'JetBrains Mono', monospace);
+ font-size: 11px;
+ color: var(--text-primary, #e0e0e0);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.wefax-strip-btn {
+ padding: 4px 12px;
+ border: 1px solid var(--border-color, #1e2a3a);
+ border-radius: 4px;
+ font-family: var(--font-mono, monospace);
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ cursor: pointer;
+ background: var(--bg-primary, #161b22);
+ color: var(--text-primary, #e0e0e0);
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ transition: all 0.15s ease;
+}
+
+.wefax-strip-btn.start { color: #ffaa00; border-color: #ffaa0044; }
+.wefax-strip-btn.start:hover { background: #ffaa0015; border-color: #ffaa00; }
+.wefax-strip-btn.start.wefax-strip-btn-error {
+ border-color: #ffaa00;
+ color: #ffaa00;
+ box-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
+ animation: wefax-pulse 0.6s ease-in-out 3;
+}
+
+.wefax-strip-btn.stop { color: #f44; border-color: #f4444444; }
+.wefax-strip-btn.stop:hover { background: #f4441a; border-color: #f44; }
+
+.wefax-strip-divider {
+ width: 1px;
+ height: 20px;
+ background: var(--border-color, #1e2a3a);
+}
+
+.wefax-strip-stat {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1px;
+}
+
+.wefax-strip-value {
+ font-family: var(--font-mono, monospace);
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-primary, #e0e0e0);
+ font-variant-numeric: tabular-nums;
+}
+
+.wefax-strip-value.accent-amber { color: #ffaa00; }
+
+.wefax-strip-label {
+ font-family: var(--font-mono, monospace);
+ font-size: 8px;
+ color: var(--text-dim, #555);
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+/* --- Schedule Toggle --- */
+.wefax-schedule-toggle {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ font-size: 10px;
+ font-family: var(--font-mono, 'JetBrains Mono', monospace);
+ color: var(--text-dim, #666);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.wefax-schedule-toggle input[type="checkbox"] {
+ width: 14px;
+ height: 14px;
+ cursor: pointer;
+ accent-color: #ffaa00;
+}
+
+.wefax-schedule-toggle input:checked + span {
+ color: #ffaa00;
+}
+
+/* --- Visuals Container --- */
+.wefax-visuals-container {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ width: 100%;
+}
+
+/* --- Main Row --- */
+.wefax-main-row {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 12px;
+}
+
+/* --- Schedule Timeline --- */
+.wefax-schedule-panel {
+ background: var(--bg-card, #0e1117);
+ border: 1px solid var(--border-color, #1e2a3a);
+ border-radius: 6px;
+ margin-bottom: 12px;
+ overflow: hidden;
+}
+
+.wefax-schedule-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ border-bottom: 1px solid var(--border-color, #1e2a3a);
+}
+
+.wefax-schedule-title {
+ font-family: var(--font-mono, monospace);
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: #ffaa00;
+}
+
+.wefax-schedule-list {
+ display: flex;
+ flex-direction: column;
+ max-height: 200px;
+ overflow-y: auto;
+}
+
+.wefax-schedule-entry {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 6px 12px;
+ border-bottom: 1px solid var(--border-color, #1e2a3a)11;
+ font-family: var(--font-mono, monospace);
+ font-size: 11px;
+}
+
+.wefax-schedule-entry:last-child { border-bottom: none; }
+
+.wefax-schedule-entry.active {
+ background: #ffaa0010;
+ border-left: 3px solid #ffaa00;
+}
+
+.wefax-schedule-entry.upcoming {
+ background: #ffaa0008;
+}
+
+.wefax-schedule-entry.past {
+ opacity: 0.4;
+}
+
+.wefax-schedule-time {
+ color: #ffaa00;
+ min-width: 45px;
+ font-variant-numeric: tabular-nums;
+}
+
+.wefax-schedule-content {
+ color: var(--text-primary, #e0e0e0);
+ flex: 1;
+}
+
+.wefax-schedule-badge {
+ font-size: 9px;
+ padding: 1px 6px;
+ border-radius: 3px;
+ background: var(--border-color, #1e2a3a);
+ color: var(--text-dim, #555);
+}
+
+.wefax-schedule-badge.live {
+ background: #ffaa0030;
+ color: #ffaa00;
+ font-weight: 600;
+}
+
+.wefax-schedule-badge.soon {
+ background: #ffaa0015;
+ color: #ffcc66;
+}
+
+.wefax-schedule-empty {
+ padding: 16px;
+ text-align: center;
+ color: var(--text-dim, #555);
+ font-size: 11px;
+ font-family: var(--font-mono, monospace);
+}
+
+/* --- Live Section --- */
+.wefax-live-section {
+ background: var(--bg-card, #0e1117);
+ border: 1px solid var(--border-color, #1e2a3a);
+ border-radius: 6px;
+ overflow: hidden;
+}
+
+.wefax-live-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ border-bottom: 1px solid var(--border-color, #1e2a3a);
+}
+
+.wefax-live-title {
+ font-family: var(--font-mono, monospace);
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: #ffaa00;
+}
+
+.wefax-live-content {
+ padding: 12px;
+ min-height: 200px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.wefax-idle-state {
+ text-align: center;
+ color: var(--text-dim, #555);
+}
+
+.wefax-idle-state svg {
+ width: 48px;
+ height: 48px;
+ color: #ffaa0033;
+ margin-bottom: 12px;
+}
+
+.wefax-idle-state h4 {
+ margin: 0 0 4px;
+ color: var(--text-primary, #e0e0e0);
+ font-size: 13px;
+}
+
+.wefax-idle-state p {
+ margin: 0;
+ font-size: 11px;
+}
+
+.wefax-live-preview {
+ max-width: 100%;
+ max-height: 400px;
+ border-radius: 4px;
+ image-rendering: pixelated;
+}
+
+/* --- Gallery Section --- */
+.wefax-gallery-section {
+ background: var(--bg-card, #0e1117);
+ border: 1px solid var(--border-color, #1e2a3a);
+ border-radius: 6px;
+ overflow: hidden;
+}
+
+.wefax-gallery-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ border-bottom: 1px solid var(--border-color, #1e2a3a);
+}
+
+.wefax-gallery-title {
+ font-family: var(--font-mono, monospace);
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: #ffaa00;
+}
+
+.wefax-gallery-controls {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.wefax-gallery-count {
+ font-family: var(--font-mono, monospace);
+ font-size: 11px;
+ color: var(--text-dim, #555);
+}
+
+.wefax-gallery-clear-btn {
+ font-family: var(--font-mono, monospace);
+ font-size: 9px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ background: none;
+ border: 1px solid var(--border-color, #1e2a3a);
+ color: var(--text-dim, #555);
+ padding: 2px 8px;
+ border-radius: 3px;
+ cursor: pointer;
+}
+
+.wefax-gallery-clear-btn:hover {
+ border-color: #f44;
+ color: #f44;
+}
+
+.wefax-gallery-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 8px;
+ padding: 10px;
+ max-height: 500px;
+ overflow-y: auto;
+}
+
+.wefax-gallery-empty {
+ padding: 24px;
+ text-align: center;
+ color: var(--text-dim, #555);
+ font-size: 11px;
+ font-family: var(--font-mono, monospace);
+ grid-column: 1 / -1;
+}
+
+.wefax-gallery-item {
+ position: relative;
+ background: var(--bg-primary, #161b22);
+ border: 1px solid var(--border-color, #1e2a3a);
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.wefax-gallery-item img {
+ width: 100%;
+ aspect-ratio: 4/3;
+ object-fit: cover;
+ cursor: pointer;
+ display: block;
+}
+
+.wefax-gallery-item img:hover {
+ opacity: 0.85;
+}
+
+.wefax-gallery-meta {
+ padding: 4px 6px;
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+ font-family: var(--font-mono, monospace);
+ font-size: 9px;
+ color: var(--text-dim, #555);
+}
+
+.wefax-gallery-actions {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ display: flex;
+ gap: 4px;
+ opacity: 0;
+ transition: opacity 0.15s;
+}
+
+.wefax-gallery-item:hover .wefax-gallery-actions {
+ opacity: 1;
+}
+
+.wefax-gallery-action {
+ width: 22px;
+ height: 22px;
+ border-radius: 3px;
+ border: none;
+ background: rgba(0, 0, 0, 0.7);
+ color: #ccc;
+ font-size: 14px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+}
+
+.wefax-gallery-action:hover { color: #fff; }
+.wefax-gallery-action.delete:hover { color: #f44; }
+
+/* --- Countdown Bar + Timeline --- */
+.wefax-countdown-bar {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 10px 16px;
+ background: var(--bg-secondary, #141820);
+ border: 1px solid var(--border-color, #1e2a3a);
+ border-radius: 6px;
+ margin-bottom: 12px;
+}
+
+.wefax-countdown-next {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex-shrink: 0;
+}
+
+.wefax-countdown-boxes {
+ display: flex;
+ gap: 4px;
+}
+
+.wefax-countdown-box {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 4px 8px;
+ background: var(--bg-primary, #0d1117);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 4px;
+ min-width: 40px;
+}
+
+.wefax-countdown-box.imminent {
+ border-color: #ffaa00;
+ box-shadow: 0 0 8px rgba(255, 170, 0, 0.2);
+}
+
+.wefax-countdown-box.active {
+ border-color: #ffaa00;
+ box-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
+ animation: wefax-glow 1.5s ease-in-out infinite;
+}
+
+@keyframes wefax-glow {
+ 0%, 100% { box-shadow: 0 0 8px rgba(255, 170, 0, 0.3); }
+ 50% { box-shadow: 0 0 16px rgba(255, 170, 0, 0.5); }
+}
+
+.wefax-cd-value {
+ font-size: 16px;
+ font-weight: 700;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+ color: var(--text-primary, #e0e0e0);
+ line-height: 1;
+}
+
+.wefax-cd-unit {
+ font-size: 8px;
+ color: var(--text-dim, #666);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin-top: 2px;
+}
+
+.wefax-countdown-info {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.wefax-countdown-content {
+ font-size: 12px;
+ font-weight: 600;
+ color: #ffaa00;
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+.wefax-countdown-detail {
+ font-size: 10px;
+ color: var(--text-dim, #666);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+.wefax-timeline {
+ flex: 1;
+ position: relative;
+ height: 36px;
+ min-width: 200px;
+}
+
+.wefax-timeline-track {
+ position: absolute;
+ top: 4px;
+ left: 0;
+ right: 0;
+ height: 16px;
+ background: var(--bg-primary, #0d1117);
+ border: 1px solid var(--border-color, #2a3040);
+ border-radius: 3px;
+ overflow: hidden;
+}
+
+.wefax-timeline-broadcast {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ background: rgba(255, 170, 0, 0.5);
+ border-radius: 2px;
+ cursor: default;
+ opacity: 0.8;
+ min-width: 2px;
+}
+
+.wefax-timeline-broadcast:hover {
+ opacity: 1;
+}
+
+.wefax-timeline-broadcast.active {
+ background: rgba(255, 170, 0, 0.85);
+ border: 1px solid #ffaa00;
+}
+
+.wefax-timeline-cursor {
+ position: absolute;
+ top: 2px;
+ width: 2px;
+ height: 20px;
+ background: #ff4444;
+ border-radius: 1px;
+ z-index: 2;
+}
+
+.wefax-timeline-labels {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: space-between;
+ font-size: 8px;
+ color: var(--text-dim, #666);
+ font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
+}
+
+/* --- Image Modal --- */
+.wefax-image-modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.9);
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 10000;
+ padding: 40px;
+}
+
+.wefax-image-modal.show {
+ display: flex;
+}
+
+.wefax-image-modal img {
+ max-width: 100%;
+ max-height: 100%;
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+}
+
+.wefax-modal-toolbar {
+ position: absolute;
+ top: 20px;
+ right: 60px;
+ display: flex;
+ gap: 8px;
+ z-index: 1;
+}
+
+.wefax-modal-btn {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-family: var(--font-mono);
+ font-size: 10px;
+ padding: 6px 12px;
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 4px;
+ color: var(--text-inverse);
+ cursor: pointer;
+ transition: all 0.15s;
+ text-transform: uppercase;
+}
+
+.wefax-modal-btn:hover {
+ background: rgba(255, 255, 255, 0.2);
+}
+
+.wefax-modal-btn.delete:hover {
+ background: var(--accent-red, #ff3366);
+ border-color: var(--accent-red, #ff3366);
+}
+
+.wefax-modal-close {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ background: none;
+ border: none;
+ color: white;
+ font-size: 32px;
+ cursor: pointer;
+ opacity: 0.7;
+ transition: opacity 0.15s;
+ z-index: 1;
+}
+
+.wefax-modal-close:hover {
+ opacity: 1;
+}
+
+/* --- Responsive --- */
+@media (max-width: 768px) {
+ .wefax-main-row {
+ grid-template-columns: 1fr;
+ }
+}
diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css
index f3a691f..728b6fc 100644
--- a/static/css/satellite_dashboard.css
+++ b/static/css/satellite_dashboard.css
@@ -666,7 +666,7 @@ body {
.btn.primary {
background: var(--accent-green);
- color: #fff;
+ color: var(--text-inverse);
margin-left: auto;
}
diff --git a/static/css/settings.css b/static/css/settings.css
index c717b3c..9ce52c5 100644
--- a/static/css/settings.css
+++ b/static/css/settings.css
@@ -262,7 +262,7 @@
.toggle-switch input:checked + .toggle-slider:before {
transform: translateX(20px);
- background-color: white;
+ background-color: var(--text-inverse);
}
.toggle-switch input:focus + .toggle-slider {
@@ -430,7 +430,7 @@
background: linear-gradient(135deg, var(--accent-amber, #d4a853) 0%, var(--accent-orange, #f59e0b) 100%);
border: none;
border-radius: 6px;
- color: #000;
+ color: var(--text-inverse);
font-size: 13px;
font-weight: 600;
text-decoration: none;
diff --git a/templates/partials/modes/pager.html b/templates/partials/modes/pager.html
index b9bef14..7d75119 100644
--- a/templates/partials/modes/pager.html
+++ b/templates/partials/modes/pager.html
@@ -10,7 +10,7 @@
-
+
diff --git a/templates/partials/settings-modal.html b/templates/partials/settings-modal.html
index 5860f38..5f1dbdc 100644
--- a/templates/partials/settings-modal.html
+++ b/templates/partials/settings-modal.html
@@ -163,7 +163,7 @@
Use GPS
-