diff --git a/src/static/css/style.css b/src/static/css/style.css index 4480a6b..87f518c 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -2691,16 +2691,22 @@ a.dev-source-pill:hover { height: 4px; background: var(--border); } -.ht-bar-snap-cap { +/* Bar mit Lagebericht im gleichen Bucket: dezente goldene Top-Linie auf der Fuellung */ +.ht-bar.has-snapshot .ht-bar-fill::before { + content: ''; position: absolute; - top: -8px; - left: -2px; - right: -2px; - height: 6px; + top: 0; + left: 0; + right: 0; + height: 3px; background: var(--accent); - border-radius: 2px; - box-shadow: var(--glow-accent); + border-radius: 2px 2px 0 0; } +.ht-bar.has-snapshot.snapshot-only .ht-bar-fill::before { + /* Nur Snapshot, keine Artikel: kleiner goldener Strich auf Achse */ + height: 4px; +} +.ht-bar-fill { position: relative; } .ht-bars:has(.ht-bar.active) .ht-bar:not(.active) { opacity: 0.45; } /* Aktiver Bar: dezenter Marker oben */ @@ -2833,17 +2839,24 @@ a.dev-source-pill:hover { bottom: -7px; left: 50%; transform: translateX(-50%); - width: 14px; + min-width: 14px; height: 14px; + padding: 0 2px; background: var(--bg-card); border: 1px solid var(--accent); - border-radius: 50%; + border-radius: 7px; color: var(--accent); display: flex; align-items: center; justify-content: center; z-index: 4; } +.ht-snapshot-line-count { + font-size: 9px; + font-weight: 700; + font-family: var(--font-mono); + line-height: 1; +} /* "Heute"-Linie (nur bei taeglicher/woechentlicher/monatlicher Granularitaet aktiv) */ .ht-today-line { diff --git a/src/static/js/app.js b/src/static/js/app.js index e5821ed..696f2d9 100644 --- a/src/static/js/app.js +++ b/src/static/js/app.js @@ -1165,19 +1165,30 @@ const App = { }); html += ''; - // Lagebericht-Linien quer durch die Achse (klickbar, oeffnet Snapshot) + // Lagebericht-Linien quer durch die Achse (deduplikiert nach Achsen-Position) html += '