eliott/worldmonitor
1
0
Fork 0
mirror of https://github.com/koala73/worldmonitor.git synced 2026-04-25 17:14:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(globe): add glowing Beta badge to 3D globe controls (#927)

Browse Source 
* feat(globe): add glowing Beta badge to 3D globe controls

Cyan pulsing badge appears top-right above zoom controls, only when
the globe view is active.

* feat(mobile): replace GitHub icon with settings gear on mobile header

On screens ≤768px, hide the GitHub link and show a gear icon that
opens UnifiedSettings — giving mobile users quick access to settings
from the compact header row.
This commit is contained in:
Elie Habib
2026-03-03 21:43:13 +04:00
committed by GitHub
parent 8996d8d936
commit 8faa1fb046
4 changed files with 68 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/styles/main.css
View File

@@ -666,6 +666,25 @@ canvas,
color: var(--accent);
}
.mobile-settings-btn {
display: none;
align-items: center;
justify-content: center;
background: none;
border: 1px solid transparent;
border-radius: 4px;
color: var(--text-dim);
cursor: pointer;
padding: 4px;
margin-left: 6px;
transition: color 0.2s, transform 0.3s;
}
.mobile-settings-btn:hover {
color: var(--accent);
transform: rotate(45deg);
}
.github-link {
color: var(--text-dim);
margin-left: 8px;
@@ -9542,6 +9561,19 @@ a.prediction-link:hover {
display: inline-block;
}
/* Hide GitHub icon on mobile, show settings gear instead */
.github-link {
display: none !important;
}
.header-right .unified-settings-btn {
display: none;
}
.header-center .mobile-settings-btn {
display: inline-flex;
}
/* Reduce header clutter on mobile */
.header-center {
gap: 4px;
@@ -12448,6 +12480,33 @@ a.prediction-link:hover {
background: transparent !important;
}
/* Globe Beta Badge */
.globe-beta-badge {
display: inline-block;
padding: 3px 10px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #00e5ff;
background: rgba(0, 229, 255, 0.08);
border: 1px solid rgba(0, 229, 255, 0.4);
border-radius: 4px;
box-shadow:
0 0 6px rgba(0, 229, 255, 0.3),
0 0 20px rgba(0, 229, 255, 0.15),
inset 0 0 8px rgba(0, 229, 255, 0.05);
animation: globe-beta-pulse 2.5s ease-in-out infinite;
pointer-events: none;
align-self: flex-end;
}
@keyframes globe-beta-pulse {
0%, 100% { box-shadow: 0 0 6px rgba(0, 229, 255, 0.3), 0 0 20px rgba(0, 229, 255, 0.15), inset 0 0 8px rgba(0, 229, 255, 0.05); }
50% { box-shadow: 0 0 10px rgba(0, 229, 255, 0.5), 0 0 30px rgba(0, 229, 255, 0.25), inset 0 0 12px rgba(0, 229, 255, 0.1); }
}
/* deck.gl Controls */
.deckgl-controls {
position: absolute;