Fix white-on-white text visibility in aircraft popups
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>
This commit is contained in:
parent
776cef1185
commit
ae2d80f3c9
1 changed files with 29 additions and 4 deletions
|
|
@ -362,20 +362,39 @@ body {
|
|||
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 {
|
||||
|
|
@ -384,21 +403,27 @@ body {
|
|||
}
|
||||
|
||||
.flight-id {
|
||||
color: #00a8ff;
|
||||
color: #00a8ff !important;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.callsign {
|
||||
color: #00ff88;
|
||||
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 {
|
||||
|
|
@ -415,13 +440,13 @@ body {
|
|||
|
||||
.detail-item .label {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
color: #888 !important;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.detail-item .value {
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue