Ole-Morten Duesund
6437d8e8a3
Enhanced popup text contrast and readability: - Added text-shadow to all values for better contrast against dark background - Properly handle zero/null values (e.g., Track: 0° now shows instead of N/A) - Style N/A values with slightly dimmed gray (#aaaaaa) but still clearly visible - Add 'no-data' class to distinguish missing data from actual zero values - Ensure all text has strong white color with !important declarations This fixes visibility issues where some values appeared too faint or were incorrectly treated as missing when they were actually zero. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
527 lines
No EOL
8.7 KiB
CSS
527 lines
No EOL
8.7 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;
|
|
}
|
|
|
|
/* Ensure all values are visible with strong contrast */
|
|
.aircraft-popup .value,
|
|
.aircraft-popup .detail-row,
|
|
.aircraft-popup .detail-item .value {
|
|
color: #ffffff !important;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
/* Style for N/A or empty values - still visible but slightly dimmed */
|
|
.detail-item .value.no-data {
|
|
color: #aaaaaa !important;
|
|
font-style: italic;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
} |