mirror of
https://github.com/smittix/intercept.git
synced 2026-04-25 07:10:00 -07:00
6e51739654
The CSS filter (invert + hue-rotate) was previously used to make light OSM tiles appear dark. Now that we use actual dark CARTO tiles, this filter was inverting them back to light. Removed from all dashboards. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
751 lines
14 KiB
CSS
751 lines
14 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg-dark: #0a0c10;
|
|
--bg-panel: #0f1218;
|
|
--bg-card: #151a23;
|
|
--border-color: #1f2937;
|
|
--border-glow: #4a9eff;
|
|
--text-primary: #e8eaed;
|
|
--text-secondary: #9ca3af;
|
|
--text-dim: #4b5563;
|
|
--accent-cyan: #4a9eff;
|
|
--accent-green: #22c55e;
|
|
--accent-orange: #f59e0b;
|
|
--accent-red: #ef4444;
|
|
--accent-purple: #a855f7;
|
|
--accent-amber: #d4a853;
|
|
--grid-line: rgba(74, 158, 255, 0.08);
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: var(--bg-dark);
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Animated grid background */
|
|
.grid-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image:
|
|
linear-gradient(var(--grid-line) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
animation: gridMove 20s linear infinite;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
@keyframes gridMove {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(50px, 50px);
|
|
}
|
|
}
|
|
|
|
/* Scan line effect */
|
|
.scanline {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
|
animation: scan 3s linear infinite;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@keyframes scan {
|
|
0% {
|
|
top: -4px;
|
|
}
|
|
|
|
100% {
|
|
top: 100vh;
|
|
}
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
position: relative;
|
|
z-index: 10;
|
|
padding: 12px 20px;
|
|
background: var(--bg-panel);
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
font-family: 'Inter', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
letter-spacing: 3px;
|
|
color: var(--text-primary);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.logo span {
|
|
color: var(--text-secondary);
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
margin-left: 15px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Stats badges in header */
|
|
.stats-badges {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Mobile header adjustments */
|
|
@media (max-width: 800px) {
|
|
.header {
|
|
padding: 10px 12px;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 14px;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.logo span {
|
|
display: none;
|
|
}
|
|
|
|
.stats-badges {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.stat-badge {
|
|
background: var(--bg-card);
|
|
border: 1px solid rgba(0, 212, 255, 0.3);
|
|
border-radius: 4px;
|
|
padding: 4px 10px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.stat-badge .value {
|
|
color: var(--accent-cyan);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.stat-badge .value.highlight {
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.stat-badge .label {
|
|
color: var(--text-secondary);
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.status-bar {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.status-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--accent-green);
|
|
box-shadow: 0 0 10px var(--accent-green);
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.datetime {
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 12px;
|
|
color: var(--accent-cyan);
|
|
}
|
|
|
|
.back-link {
|
|
color: var(--accent-cyan);
|
|
text-decoration: none;
|
|
font-size: 11px;
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--accent-cyan);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Main dashboard grid */
|
|
.dashboard {
|
|
position: relative;
|
|
z-index: 10;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 340px;
|
|
grid-template-rows: 1fr auto;
|
|
gap: 0;
|
|
height: calc(100vh - 60px);
|
|
min-height: 500px;
|
|
}
|
|
|
|
/* Panels */
|
|
.panel {
|
|
background: var(--bg-panel);
|
|
border: 1px solid rgba(0, 212, 255, 0.2);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.panel::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
|
}
|
|
|
|
.panel-header {
|
|
padding: 10px 15px;
|
|
background: rgba(0, 212, 255, 0.05);
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.1);
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
color: var(--accent-cyan);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.panel-indicator {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--accent-green);
|
|
border-radius: 50%;
|
|
animation: blink 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
.panel-content {
|
|
padding: 12px;
|
|
height: calc(100% - 40px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Polar plot */
|
|
.polar-container {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
#polarPlot {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 300px;
|
|
}
|
|
|
|
/* Ground track map */
|
|
.map-container {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
#groundMap {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 300px;
|
|
}
|
|
|
|
/* Right sidebar */
|
|
.sidebar {
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-left: 1px solid rgba(0, 212, 255, 0.2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Satellite selector at top of sidebar */
|
|
.satellite-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px;
|
|
background: var(--bg-panel);
|
|
border-bottom: 1px solid rgba(0, 212, 255, 0.2);
|
|
}
|
|
|
|
.satellite-selector label {
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
letter-spacing: 2px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.satellite-selector select {
|
|
flex: 1;
|
|
background: rgba(0, 212, 255, 0.1);
|
|
border: 1px solid var(--accent-cyan);
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
color: var(--accent-cyan);
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.satellite-selector select:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
|
|
}
|
|
|
|
/* Countdown panel */
|
|
.countdown-panel {
|
|
flex-shrink: 0;
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 255, 136, 0.05) 100%);
|
|
}
|
|
|
|
.countdown-display {
|
|
text-align: center;
|
|
padding: 15px 10px;
|
|
}
|
|
|
|
.next-pass-label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.satellite-name {
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--accent-cyan);
|
|
text-shadow: 0 0 15px var(--accent-cyan);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.countdown-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 6px;
|
|
}
|
|
|
|
.countdown-block {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgba(0, 212, 255, 0.2);
|
|
border-radius: 4px;
|
|
padding: 8px 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.countdown-value {
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--accent-cyan);
|
|
text-shadow: 0 0 10px var(--accent-cyan);
|
|
line-height: 1;
|
|
}
|
|
|
|
.countdown-value.active {
|
|
color: var(--accent-green);
|
|
text-shadow: 0 0 15px var(--accent-green);
|
|
animation: countPulse 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes countPulse {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
.countdown-label {
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: var(--text-secondary);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Telemetry panel */
|
|
.telemetry-panel {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.telemetry-rows {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 6px;
|
|
}
|
|
|
|
.telemetry-item {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
border-left: 2px solid var(--accent-cyan);
|
|
}
|
|
|
|
.telemetry-label {
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.telemetry-value {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 12px;
|
|
color: var(--accent-cyan);
|
|
}
|
|
|
|
/* Pass list */
|
|
.pass-list {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pass-list-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.pass-item {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgba(0, 212, 255, 0.15);
|
|
border-radius: 4px;
|
|
padding: 8px 10px;
|
|
margin-bottom: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.pass-item:hover {
|
|
border-color: var(--accent-cyan);
|
|
background: rgba(0, 212, 255, 0.05);
|
|
}
|
|
|
|
.pass-item.active {
|
|
border-color: var(--accent-cyan);
|
|
box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
|
|
background: rgba(0, 212, 255, 0.1);
|
|
}
|
|
|
|
.pass-item-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.pass-sat-name {
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--accent-cyan);
|
|
}
|
|
|
|
.pass-quality {
|
|
font-size: 8px;
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pass-quality.excellent {
|
|
background: rgba(0, 255, 136, 0.2);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.pass-quality.good {
|
|
background: rgba(0, 212, 255, 0.2);
|
|
color: var(--accent-cyan);
|
|
}
|
|
|
|
.pass-quality.fair {
|
|
background: rgba(255, 149, 0, 0.2);
|
|
color: var(--accent-orange);
|
|
}
|
|
|
|
.pass-item-details {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 10px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.pass-time {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
/* Bottom controls bar */
|
|
.controls-bar {
|
|
grid-column: 1 / -1;
|
|
grid-row: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 10px 20px;
|
|
background: var(--bg-panel);
|
|
border-top: 1px solid rgba(0, 212, 255, 0.3);
|
|
}
|
|
|
|
.control-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.control-label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.control-group input[type="text"],
|
|
.control-group input[type="number"] {
|
|
width: 90px;
|
|
padding: 6px 8px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgba(0, 212, 255, 0.3);
|
|
border-radius: 4px;
|
|
color: var(--accent-cyan);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.control-group input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-cyan);
|
|
box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: 1px solid var(--accent-cyan);
|
|
background: rgba(0, 212, 255, 0.1);
|
|
color: var(--accent-cyan);
|
|
font-family: 'Orbitron', monospace;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: var(--accent-cyan);
|
|
color: var(--bg-dark);
|
|
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
|
|
}
|
|
|
|
.btn.primary {
|
|
background: var(--accent-green);
|
|
color: #fff;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.btn.primary:hover {
|
|
background: #1db954;
|
|
box-shadow: 0 0 25px rgba(34, 197, 94, 0.5);
|
|
}
|
|
|
|
/* Leaflet dark theme overrides */
|
|
.leaflet-container {
|
|
background: var(--bg-dark) !important;
|
|
}
|
|
|
|
/* Using actual dark tiles now - no filter needed */
|
|
|
|
.leaflet-control-zoom a {
|
|
background: var(--bg-panel) !important;
|
|
color: var(--accent-cyan) !important;
|
|
border-color: var(--border-color) !important;
|
|
}
|
|
|
|
.leaflet-control-attribution {
|
|
background: rgba(0, 0, 0, 0.7) !important;
|
|
color: var(--text-secondary) !important;
|
|
font-size: 9px !important;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-dark);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--accent-cyan);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1200px) {
|
|
.dashboard {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr auto auto;
|
|
}
|
|
|
|
.polar-container {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.map-container {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.sidebar {
|
|
grid-column: 1 / 3;
|
|
grid-row: 2;
|
|
flex-direction: row;
|
|
border-left: none;
|
|
border-top: 1px solid rgba(0, 212, 255, 0.2);
|
|
max-height: 250px;
|
|
}
|
|
|
|
.sidebar>* {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.controls-bar {
|
|
grid-row: 3;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.dashboard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: auto;
|
|
min-height: calc(100vh - 60px);
|
|
}
|
|
|
|
.polar-container,
|
|
.map-container {
|
|
min-height: 250px;
|
|
flex: 1;
|
|
}
|
|
|
|
.sidebar {
|
|
flex-direction: column;
|
|
max-height: none;
|
|
border-left: none;
|
|
border-top: 1px solid rgba(0, 212, 255, 0.2);
|
|
}
|
|
|
|
.controls-bar {
|
|
flex-wrap: wrap;
|
|
padding: 8px 12px;
|
|
}
|
|
}
|
|
|
|
/* Embedded Mode Styles */
|
|
body.embedded {
|
|
background: transparent;
|
|
min-height: auto;
|
|
}
|
|
|
|
body.embedded .header {
|
|
background: rgba(10, 12, 16, 0.95);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
body.embedded .header .logo {
|
|
font-size: 14px;
|
|
}
|
|
|
|
body.embedded .header .logo span {
|
|
font-size: 10px;
|
|
}
|
|
|
|
body.embedded .dashboard {
|
|
padding: 10px;
|
|
gap: 10px;
|
|
}
|
|
|
|
body.embedded .panel {
|
|
background: rgba(15, 18, 24, 0.95);
|
|
}
|
|
|
|
body.embedded .controls-bar {
|
|
padding: 10px 15px;
|
|
} |