AegisSight/AegisSight-Globe
2
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

UI Overhaul: Groessere Elemente, bessere InfoBox-Platzierung

Quellcode durchsuchen 
PANEL (links):
- 240px breit (war 200px)
- Checkboxen 16x16px (war 12x12)
- Dots 10px (war 8px)
- Layer-Namen 13px (war 11px)
- Counts 12px (war 10px)
- Mehr Padding pro Toggle-Zeile

INFOBOX (bei Klick):
- Links neben dem Panel platziert (254px vom Rand)
- 420px breit, max 60vh hoch, scrollbar
- Kollidiert nicht mit Panel oder Sidebar
- Groesserer Titel (14px), mehr Padding

PUNKTE AUF DEM GLOBUS:
- Flugzeuge: 3/4/5px (war 2/2.5/3)
- Schiffe: 3/4/5px (war 2/2.5/3)
- Militaer: 6px (war 4)
- Katastrophen: 10px (war 8)
- Erdbeben: 6-15px (war 4-10)
- GDELT: 7px (war 5)
- ISS: 14px (war 10)
- Cluster: +30% groesser

HEADER + FOOTER:
- Header 48px (war 44px)
- Footer 32px (war 28px)
- Titel 15px, Stats 12px
- Lage-Select + Suche groesser
Dieser Commit ist enthalten in:
Claude Dev
2026-03-24 23:41:25 +01:00
Ursprung 5658754629
Commit 2be1f6a37d
9 geänderte Dateien mit 54 neuen und 51 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

83
static/css/globe.css
Datei anzeigen

@@ -26,13 +26,13 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
/* === Header === */
#header {
position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 100;
position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 100;
display: flex; align-items: center; padding: 0 16px; gap: 16px;
background: var(--bg-panel); border-bottom: 1px solid var(--border);
backdrop-filter: blur(12px);
}
.header-brand { display: flex; align-items: center; gap: 8px; }
.header-title { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.header-title { font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.header-stats { text-align: center; font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }
.header-actions { display: flex; gap: 8px; }
.header-btn {
@@ -43,28 +43,28 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
/* === Layer Panel === */
.layer-panel {
position: fixed; top: 52px; left: 12px; z-index: 100;
width: 200px; background: var(--bg-panel); border: 1px solid var(--border);
position: fixed; top: 56px; left: 12px; z-index: 100;
width: 240px; background: var(--bg-panel); border: 1px solid var(--border);
border-radius: 8px; padding: 12px; backdrop-filter: blur(12px);
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.panel-title {
font-size: 9px; font-weight: 700; letter-spacing: 3px; color: var(--accent);
font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--accent);
margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.panel-section { display: flex; flex-direction: column; gap: 4px; }
.panel-divider { height: 1px; background: var(--border); margin: 8px 0; }
.layer-toggle {
display: flex; align-items: center; gap: 6px; padding: 4px 6px;
display: flex; align-items: center; gap: 8px; padding: 6px 8px;
border-radius: 4px; cursor: pointer; transition: background 0.15s;
}
.layer-toggle:hover { background: rgba(255,255,255,0.04); }
.layer-toggle input[type="checkbox"] {
accent-color: var(--accent); width: 12px; height: 12px; cursor: pointer; flex-shrink: 0;
accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;
}
.layer-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.dot-flights { background: var(--accent); }
.dot-ships { background: #4499ff; }
@@ -72,22 +72,22 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
.dot-gdelt { background: #ff8800; }
.dot-daynight { background: #8866cc; }
.dot-labels { background: #aaaaaa; }
.layer-name { font-size: 11px; color: var(--text); flex: 1; }
.layer-count { font-size: 10px; color: var(--text-dim); }
.layer-name { font-size: 13px; color: var(--text); flex: 1; }
.layer-count { font-size: 12px; color: var(--text-dim); }
.panel-coords {
font-size: 10px; color: var(--accent); letter-spacing: 0.5px;
padding: 6px 0 0; text-align: center;
font-size: 12px; color: var(--accent); letter-spacing: 0.5px;
padding: 8px 0 0; text-align: center;
}
/* === Bottom Bar === */
#bottom-bar {
position: fixed; bottom: 0; left: 0; right: 0; height: 28px; z-index: 100;
position: fixed; bottom: 0; left: 0; right: 0; height: 32px; z-index: 100;
display: flex; align-items: center; justify-content: center;
background: var(--bg-panel); border-top: 1px solid var(--border);
backdrop-filter: blur(8px);
}
.bottom-stats { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
.bottom-stats { font-size: 12px; color: var(--text-dim); letter-spacing: 1px; }
/* === Cesium InfoBox Override === */
.cesium-infoBox { background: var(--bg-panel) !important; border: 1px solid var(--border) !important; }
@@ -103,7 +103,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
.cesium-infoBox-title {
color: var(--accent) !important;
font-family: var(--font-mono) !important;
font-size: 12px !important;
font-size: 14px !important;
padding: 8px 12px !important;
background: rgba(0,255,136,0.08) !important;
}
.cesium-infoBox-iframe {
@@ -158,9 +159,9 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
/* === Visual Mode Buttons === */
.vmode-btn {
padding: 4px 8px;
padding: 6px 10px;
font-family: var(--font-mono);
font-size: 9px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
background: rgba(255,255,255,0.05);
@@ -261,9 +262,9 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
/* === Rechte Sidebar === */
.sidebar-right {
position: fixed;
top: 44px;
top: 48px;
right: 0;
bottom: 28px;
bottom: 32px;
width: 280px;
z-index: 100;
display: flex;
@@ -350,7 +351,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
text-align: center;
}
.sb-title {
font-size: 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
@@ -358,7 +359,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
flex: 1;
}
.sb-badge {
font-size: 9px;
font-size: 11px;
color: var(--accent);
background: rgba(0,255,136,0.1);
padding: 1px 6px;
@@ -387,14 +388,14 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
}
.sb-item-text { min-width: 0; flex: 1; }
.sb-item-name {
font-size: 11px;
font-size: 13px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-item-sub {
font-size: 9px;
font-size: 11px;
color: var(--text-dim);
white-space: nowrap;
overflow: hidden;
@@ -422,8 +423,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
border-radius: 4px;
color: var(--accent);
font-family: var(--font-mono);
font-size: 11px;
padding: 4px 8px;
font-size: 13px;
padding: 6px 10px;
cursor: pointer;
max-width: 300px;
outline: none;
@@ -434,21 +435,23 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
color: var(--text);
}
/* === InfoBox zentriert oben === */
/* === InfoBox: Links neben dem Layer-Panel === */
.cesium-viewer-infoBoxContainer {
position: absolute !important;
top: 44px !important;
top: 52px !important;
left: 254px !important;
right: auto !important;
left: 50% !important;
transform: translateX(-50%) !important;
max-width: 500px !important;
width: 90% !important;
max-height: 50vh !important;
transform: none !important;
max-width: 420px !important;
width: 420px !important;
max-height: 60vh !important;
z-index: 150 !important;
}
.cesium-infoBox {
max-height: 50vh !important;
max-height: 60vh !important;
overflow-y: auto !important;
border-radius: 8px !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
@@ -459,8 +462,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
/* === Search Bar === */
.header-search { position: relative; }
.globe-search {
width: 180px;
padding: 4px 10px;
width: 200px;
padding: 6px 12px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--border);
border-radius: 4px;
@@ -470,7 +473,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
outline: none;
transition: width 0.3s, border-color 0.2s;
}
.globe-search:focus { width: 260px; border-color: var(--accent); }
.globe-search:focus { width: 300px; border-color: var(--accent); }
.globe-search::placeholder { color: var(--text-dim); }
.search-results {
position: absolute;
@@ -497,8 +500,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
/* === City Quick-Links === */
.city-links {
position: fixed;
top: 44px;
left: 220px;
top: 48px;
left: 254px;
right: 290px;
z-index: 90;
display: flex;
@@ -557,13 +560,13 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
/* === Imagery Selector === */
.imagery-select {
width: 100%;
padding: 4px 6px;
padding: 6px 8px;
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: 10px;
font-size: 12px;
cursor: pointer;
outline: none;
}