From 6adc3cedcfa70fe5b89e0efe6b8a6368a68c7d59 Mon Sep 17 00:00:00 2001
From: ppfeiffer <admin@pfeiffer-privat.de>
Date: Thu, 19 Feb 2026 17:35:04 +0100
Subject: [PATCH] style(map): Kartenlegende neu gestaltet (theme-aware,
 kompakt)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS-Variablen für Light/Dark-Mode, Uppercase-Sektionsköpfe,
kein <strong>+<hr> mehr, weicherer Schatten.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md         |  7 +++++++
 config.yaml          |  2 +-
 static/css/style.css | 31 +++++++++++++++++++++----------
 static/js/map.js     | 38 ++++++++++++++++++++++----------------
 4 files changed, 51 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 41144b0..e2e634b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.8.8] - 2026-02-19
+
+### Changed
+- **Kartenlegende neu gestaltet**: Theme-aware (CSS-Variablen für Light/Dark-Mode),
+  kompaktes Design mit kleinen Uppercase-Abschnittsköpfen statt `<strong>` + `<hr>`,
+  weicherer Schatten, angepasste Altersdots für beide Themes.
+
 ## [0.8.7] - 2026-02-19
 
 ### Fixed
diff --git a/config.yaml b/config.yaml
index adffdbc..cc2fd86 100644
--- a/config.yaml
+++ b/config.yaml
@@ -1,4 +1,4 @@
-version: "0.8.7"
+version: "0.8.8"
 
 bot:
   name: "MeshDD-Bot"
diff --git a/static/css/style.css b/static/css/style.css
index 8d7fb5c..aad36d3 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -263,20 +263,31 @@
 .node-tooltip-wrap { padding: 0; }
 
 .legend {
-    background: rgba(255, 255, 255, .95);
-    padding: 10px 14px;
+    background: var(--tblr-bg-surface, var(--bs-body-bg, #fff));
+    border: 1px solid var(--tblr-border-color, var(--bs-border-color, rgba(0,0,0,.12)));
     border-radius: 6px;
-    box-shadow: 0 2px 8px rgba(0,0,0,.3);
-    font-size: 13px;
-    line-height: 1.8;
+    box-shadow: 0 2px 10px rgba(0,0,0,.12);
+    padding: 7px 10px;
+    font-size: 11.5px;
+    line-height: 1.4;
+    min-width: 100px;
+    color: var(--bs-body-color);
 }
-.legend strong { display: block; margin-bottom: 4px; color: #333; }
-.legend-item { display: flex; align-items: center; gap: 8px; }
+.legend-section {
+    font-size: 9.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: .07em;
+    color: var(--bs-secondary-color);
+    margin: 5px 0 3px;
+}
+.legend-section:first-child { margin-top: 0; }
+.legend-item { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
 .legend-dot {
-    width: 12px;
-    height: 12px;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
-    border: 1px solid rgba(0,0,0,.2);
+    border: 1px solid rgba(128,128,128,.2);
     flex-shrink: 0;
 }
 
diff --git a/static/js/map.js b/static/js/map.js
index 10be74a..1033938 100644
--- a/static/js/map.js
+++ b/static/js/map.js
@@ -143,24 +143,30 @@ function connectWebSocket() {
 const legend = L.control({ position: 'topleft' });
 legend.onAdd = function () {
     const div = L.DomUtil.create('div', 'legend');
-    div.innerHTML = '<strong>Hops</strong>';
-    const entries = [
-        [0, 'Direkt'],
-        [1, '1 Hop'],
-        [2, '2 Hops'],
-        [3, '3 Hops'],
-        [4, '4 Hops'],
-        [5, '5+ Hops'],
+    const hopEntries = [
+        [0,    'Direkt'],
+        [1,    '1 Hop'],
+        [2,    '2 Hops'],
+        [3,    '3 Hops'],
+        [4,    '4 Hops'],
+        [5,    '5+ Hops'],
         [null, 'Unbekannt'],
     ];
-    entries.forEach(([hop, label]) => {
-        const color = hop != null ? (hopColors[hop] || hopColorDefault) : hopColorDefault;
-        div.innerHTML += `<div class="legend-item"><span class="legend-dot" style="background:${color}"></span>${label}</div>`;
-    });
-    div.innerHTML += `<hr style="margin:5px 0;border-color:#aaa"><strong>Alter</strong>
-        <div class="legend-item"><span class="legend-dot" style="background:rgba(128,128,128,.9)"></span>&lt; 24h</div>
-        <div class="legend-item"><span class="legend-dot" style="background:rgba(128,128,128,.45)"></span>24–48h</div>
-        <div class="legend-item"><span class="legend-dot" style="background:rgba(128,128,128,.2)"></span>48–72h</div>`;
+    const ageEntries = [
+        ['rgba(80,80,80,.95)',  '< 24h'],
+        ['rgba(80,80,80,.45)', '24–48h'],
+        ['rgba(80,80,80,.18)', '48–72h'],
+    ];
+    div.innerHTML =
+        '<div class="legend-section">Hops</div>' +
+        hopEntries.map(([hop, label]) => {
+            const color = hop != null ? (hopColors[hop] || hopColorDefault) : hopColorDefault;
+            return `<div class="legend-item"><span class="legend-dot" style="background:${color}"></span>${label}</div>`;
+        }).join('') +
+        '<div class="legend-section">Alter</div>' +
+        ageEntries.map(([color, label]) =>
+            `<div class="legend-item"><span class="legend-dot" style="background:${color}"></span>${label}</div>`
+        ).join('');
     return div;
 };