Ole-Morten Duesund
ae2d80f3c9
Override Leaflet's default popup styles with !important declarations to ensure proper text visibility in aircraft information popups: - Set dark background (#2d2d2d) for popup content wrapper and tip - Force white text color (#ffffff) for all popup text elements - Ensure labels remain muted gray (#888) for visual hierarchy - Preserve accent colors for flight ID (blue) and callsign (green) The issue was caused by Leaflet CSS overriding custom popup styling, resulting in poor readability with white text on white backgrounds. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
513 lines
No EOL
8.3 KiB
CSS
513 lines
No EOL
8.3 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #1a1a1a;
|
|
color: #ffffff;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 2rem;
|
|
background: #2d2d2d;
|
|
border-bottom: 1px solid #404040;
|
|
}
|
|
|
|
.clock-section {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.clock-display {
|
|
display: flex;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.clock {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.clock-face {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 2px solid #00a8ff;
|
|
border-radius: 50%;
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
.clock-face::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #00a8ff;
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 3;
|
|
}
|
|
|
|
.clock-hand {
|
|
position: absolute;
|
|
background: #00a8ff;
|
|
transform-origin: bottom center;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.hour-hand {
|
|
width: 3px;
|
|
height: 18px;
|
|
top: 12px;
|
|
left: 50%;
|
|
margin-left: -1.5px;
|
|
}
|
|
|
|
.minute-hand {
|
|
width: 2px;
|
|
height: 25px;
|
|
top: 5px;
|
|
left: 50%;
|
|
margin-left: -1px;
|
|
}
|
|
|
|
.clock-label {
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
text-align: center;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 1.5rem;
|
|
color: #00a8ff;
|
|
}
|
|
|
|
.stats-summary {
|
|
display: flex;
|
|
gap: 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.connection-status {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.connection-status.connected {
|
|
background: #27ae60;
|
|
}
|
|
|
|
.connection-status.disconnected {
|
|
background: #e74c3c;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.view-toggle {
|
|
display: flex;
|
|
background: #2d2d2d;
|
|
border-bottom: 1px solid #404040;
|
|
}
|
|
|
|
.view-btn {
|
|
padding: 0.75rem 1.5rem;
|
|
background: transparent;
|
|
border: none;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
border-bottom: 3px solid transparent;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.view-btn:hover {
|
|
background: #404040;
|
|
}
|
|
|
|
.view-btn.active {
|
|
border-bottom-color: #00a8ff;
|
|
background: #404040;
|
|
}
|
|
|
|
.view {
|
|
flex: 1;
|
|
display: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.view.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#map {
|
|
flex: 1;
|
|
z-index: 1;
|
|
}
|
|
|
|
.map-controls {
|
|
position: absolute;
|
|
top: 80px;
|
|
right: 10px;
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.map-controls button {
|
|
padding: 0.5rem 1rem;
|
|
background: #2d2d2d;
|
|
border: 1px solid #404040;
|
|
color: #ffffff;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.map-controls button:hover {
|
|
background: #404040;
|
|
}
|
|
|
|
.legend {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
background: rgba(45, 45, 45, 0.95);
|
|
border: 1px solid #404040;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
z-index: 1000;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.legend h4 {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 0.9rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.legend-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 2px;
|
|
border: 1px solid #ffffff;
|
|
}
|
|
|
|
.legend-icon.commercial { background: #00ff88; }
|
|
.legend-icon.cargo { background: #ff8c00; }
|
|
.legend-icon.military { background: #ff4444; }
|
|
.legend-icon.ga { background: #ffff00; }
|
|
.legend-icon.ground { background: #888888; }
|
|
|
|
.table-controls {
|
|
display: flex;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
background: #2d2d2d;
|
|
border-bottom: 1px solid #404040;
|
|
}
|
|
|
|
.table-controls input,
|
|
.table-controls select {
|
|
padding: 0.5rem;
|
|
background: #404040;
|
|
border: 1px solid #606060;
|
|
color: #ffffff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.table-controls input {
|
|
flex: 1;
|
|
}
|
|
|
|
.table-container {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
#aircraft-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
#aircraft-table th,
|
|
#aircraft-table td {
|
|
padding: 0.75rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid #404040;
|
|
}
|
|
|
|
#aircraft-table th {
|
|
background: #2d2d2d;
|
|
font-weight: 600;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
#aircraft-table tr:hover {
|
|
background: #404040;
|
|
}
|
|
|
|
.type-badge {
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 3px;
|
|
font-size: 0.7rem;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
}
|
|
|
|
.type-badge.commercial { background: #00ff88; }
|
|
.type-badge.cargo { background: #ff8c00; }
|
|
.type-badge.military { background: #ff4444; }
|
|
.type-badge.ga { background: #ffff00; }
|
|
.type-badge.ground { background: #888888; color: #ffffff; }
|
|
|
|
/* RSSI signal strength colors */
|
|
.rssi-strong { color: #00ff88; }
|
|
.rssi-good { color: #ffff00; }
|
|
.rssi-weak { color: #ff8c00; }
|
|
.rssi-poor { color: #ff4444; }
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: #2d2d2d;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #404040;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-card h3 {
|
|
font-size: 0.9rem;
|
|
color: #888;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #00a8ff;
|
|
}
|
|
|
|
.charts-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.chart-card {
|
|
background: #2d2d2d;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #404040;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.chart-card h3 {
|
|
margin-bottom: 1rem;
|
|
color: #888;
|
|
}
|
|
|
|
.chart-card canvas {
|
|
flex: 1;
|
|
max-height: 300px;
|
|
}
|
|
|
|
.aircraft-marker {
|
|
transform: rotate(0deg);
|
|
filter: drop-shadow(0 0 4px rgba(0,0,0,0.9));
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Leaflet popup override - ensure our styles take precedence */
|
|
.leaflet-popup-content-wrapper {
|
|
background: #2d2d2d !important;
|
|
color: #ffffff !important;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.leaflet-popup-content {
|
|
margin: 12px !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.leaflet-popup-tip {
|
|
background: #2d2d2d !important;
|
|
}
|
|
|
|
.aircraft-popup {
|
|
min-width: 300px;
|
|
max-width: 400px;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.popup-header {
|
|
border-bottom: 1px solid #404040;
|
|
padding-bottom: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.flight-info {
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.icao-flag {
|
|
font-size: 1.2rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.flight-id {
|
|
color: #00a8ff !important;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.callsign {
|
|
color: #00ff88 !important;
|
|
}
|
|
|
|
.popup-details {
|
|
font-size: 0.9rem;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.detail-row {
|
|
margin-bottom: 0.5rem;
|
|
padding: 0.25rem 0;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.detail-row strong {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.detail-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.5rem;
|
|
margin: 0.75rem 0;
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.detail-item .label {
|
|
font-size: 0.8rem;
|
|
color: #888 !important;
|
|
margin-bottom: 0.1rem;
|
|
}
|
|
|
|
.detail-item .value {
|
|
font-weight: bold;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.stats-summary {
|
|
font-size: 0.8rem;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.table-controls {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.charts-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.map-controls {
|
|
top: 70px;
|
|
right: 5px;
|
|
}
|
|
|
|
.map-controls button {
|
|
padding: 0.4rem 0.8rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
#aircraft-table {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
#aircraft-table th,
|
|
#aircraft-table td {
|
|
padding: 0.5rem 0.25rem;
|
|
}
|
|
} |