refactor: Layer-Panel mit einklappbaren Kategorien + ANSICHT in Bottom Bar

- 5 einklappbare Gruppen: ECHTZEIT, INTELLIGENCE, GEOINT, INFRASTRUKTUR, UMGEBUNG
- Jede Gruppe zeigt Aktiv-Zaehler (z.B. 2/3)
- Klick auf Header klappt Gruppe auf/zu (Chevron-Indikator)
- ANSICHT (STD/NVG/FLIR/CRT) in Bottom Bar verschoben
- SATELLITENBILDER-Dropdown an Panel-Oberkante (immer sichtbar)
- Fadenkreuz + Ortsnamen immer sichtbar (nicht in Gruppe)
- Reduziert sichtbare Zeilen von ~35 auf ~18

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Dev
2026-03-27 21:26:28 +01:00
Ursprung a0a8909c28
Commit bc5fdd18df
4 geänderte Dateien mit 248 neuen und 144 gelöschten Zeilen

Datei anzeigen

@@ -888,3 +888,37 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
border-radius: 4px;
margin-bottom: 8px;
}
/* === Layer-Gruppen (einklappbar) === */
.layer-group { border-bottom: 1px solid rgba(255,255,255,0.04); }
.layer-group-header {
display: flex; align-items: center; gap: 6px;
padding: 7px 8px; cursor: pointer; transition: background 0.15s;
font-size: 10px; letter-spacing: 1.5px; font-weight: 700;
user-select: none;
}
.layer-group-header:hover { background: rgba(255,255,255,0.04); }
.layer-group-chevron {
font-size: 10px; color: var(--text-dim); width: 12px;
display: inline-block; text-align: center;
}
.layer-group-title { flex: 1; text-transform: uppercase; }
.layer-group-count {
font-size: 10px; color: var(--text-dim); font-weight: 400; font-family: var(--font-mono);
}
.layer-group-content {
display: none; padding: 0 0 4px; flex-direction: column; gap: 2px;
}
.layer-group.open .layer-group-content { display: flex; }
/* === Bottom Bar: Visual Mode Buttons === */
#bottom-bar { justify-content: space-between; padding: 0 12px; }
.bottom-vmodes { display: flex; gap: 3px; align-items: center; }
.vmode-btn-sm {
padding: 3px 8px; font-family: var(--font-mono); font-size: 10px;
font-weight: 700; letter-spacing: 0.5px;
background: rgba(255,255,255,0.05); border: 1px solid var(--border);
border-radius: 3px; color: var(--text-dim); cursor: pointer; transition: all 0.2s;
}
.vmode-btn-sm:hover { border-color: var(--accent); color: var(--text); }
.vmode-btn-sm.active { background: rgba(0,255,136,0.15); border-color: var(--accent); color: var(--accent); }