diff --git a/static/css/globe.css b/static/css/globe.css index 57e28f7..3c094e0 100644 --- a/static/css/globe.css +++ b/static/css/globe.css @@ -450,3 +450,105 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo max-height: 50vh !important; overflow-y: auto !important; } + + +/* === Wetter Dot === */ +.dot-weather { background: #44bbff; } +.dot-crosshairs { background: #ffffff; } + +/* === Search Bar === */ +.header-search { position: relative; } +.globe-search { + width: 180px; + padding: 4px 10px; + background: rgba(255,255,255,0.05); + border: 1px solid var(--border); + border-radius: 4px; + color: var(--text); + font-family: var(--font-mono); + font-size: 11px; + outline: none; + transition: width 0.3s, border-color 0.2s; +} +.globe-search:focus { width: 260px; border-color: var(--accent); } +.globe-search::placeholder { color: var(--text-dim); } +.search-results { + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--bg-panel); + border: 1px solid var(--border); + border-radius: 0 0 6px 6px; + max-height: 200px; + overflow-y: auto; + z-index: 200; +} +.search-item { + padding: 6px 10px; + cursor: pointer; + font-size: 11px; + color: var(--text); + transition: background 0.15s; +} +.search-item:hover { background: rgba(0,255,136,0.08); } +.search-empty { padding: 8px 10px; font-size: 11px; color: var(--text-dim); } + +/* === City Quick-Links === */ +.city-links { + position: fixed; + top: 44px; + left: 220px; + right: 290px; + z-index: 90; + display: flex; + gap: 4px; + padding: 4px 8px; + overflow-x: auto; + scrollbar-width: none; +} +.city-links::-webkit-scrollbar { display: none; } +.city-btn { + padding: 2px 8px; + background: rgba(255,255,255,0.04); + border: 1px solid rgba(255,255,255,0.08); + border-radius: 10px; + color: var(--text-dim); + font-family: var(--font-mono); + font-size: 9px; + cursor: pointer; + white-space: nowrap; + transition: all 0.2s; +} +.city-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,255,136,0.06); } + +/* === Crosshairs Overlay === */ +.crosshairs-overlay { + position: fixed; + inset: 0; + z-index: 60; + pointer-events: none; +} +.ch-h, .ch-v { + position: absolute; + background: rgba(0, 255, 136, 0.15); +} +.ch-h { left: 0; right: 0; top: 50%; height: 1px; } +.ch-v { top: 0; bottom: 0; left: 50%; width: 1px; } +.ch-center { + position: absolute; + top: 50%; left: 50%; + width: 8px; height: 8px; + transform: translate(-50%, -50%); + border: 1px solid rgba(0, 255, 136, 0.5); + border-radius: 50%; +} +.ch-ring { + position: absolute; + top: 50%; left: 50%; + border: 1px solid rgba(0, 255, 136, 0.08); + border-radius: 50%; +} +.ch-ring-1 { width: 200px; height: 200px; transform: translate(-50%, -50%); } +.ch-ring-2 { width: 400px; height: 400px; transform: translate(-50%, -50%); } +.ch-ring-3 { width: 600px; height: 600px; transform: translate(-50%, -50%); } diff --git a/static/index.html b/static/index.html index 4a40c0d..7975cb4 100644 --- a/static/index.html +++ b/static/index.html @@ -34,7 +34,11 @@ AegisSight Globe -
+
+
@@ -96,6 +106,11 @@ Tag/Nacht +