diff --git a/src/static/css/studio.css b/src/static/css/studio.css index 22f7a8b..632d82e 100644 --- a/src/static/css/studio.css +++ b/src/static/css/studio.css @@ -383,6 +383,10 @@ .btn-bulk { flex: 1; min-width: 84px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; padding: 6px 10px; border-radius: var(--radius-md, 6px); border: 1px solid var(--border); @@ -394,6 +398,7 @@ cursor: pointer; transition: border-color .15s, background .15s, color .15s; } +.btn-bulk svg { flex-shrink: 0; } .btn-bulk:hover { border-color: var(--accent); color: var(--accent); } .btn-bulk[hidden] { display: none; } .btn-bulk.danger { color: var(--danger, #EF4444); } diff --git a/src/static/css/style.css b/src/static/css/style.css index 483b3ef..90c3cc9 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -3277,6 +3277,106 @@ body.first-refresh-blocking .header { } /* Sidebar Sources Link */ +/* === Sammelaktionen in der Seitenleiste ============================== */ +/* Zwei Zustaende. Normal stehen dort nur die beiden Startknoepfe, im + Auswahlmodus die Bestaetigungsleiste. Beides sitzt ueber dem Fussbereich + mit Quellen und Feedback. */ +.sidebar-bulk { + padding: var(--sp-md) var(--sp-xl) 0; + display: flex; + gap: var(--sp-md); +} + +.sidebar-bulk[hidden] { + display: none; +} + +.sidebar-bulk-btn { + flex: 1; + min-height: 32px; + font-size: 12px; + font-weight: 500; + padding: 0 var(--sp-md); +} + +.sidebar-bulk-btn svg { + flex-shrink: 0; +} + +.sidebar-bulk-btn.danger { + color: var(--error); +} + +.sidebar-bulk-btn.danger:hover:not(:disabled) { + background: var(--tint-error); + border-color: var(--error); +} + +.sidebar-bulk-btn.ghost { + color: var(--text-tertiary); +} + +.sidebar-bulk-btn[hidden] { + display: none; +} + +/* Bestaetigungsleiste: untereinander, damit die Zaehlung lesbar bleibt */ +.sidebar-bulk-active { + flex-direction: column; + align-items: stretch; + gap: var(--sp-md); + padding-bottom: var(--sp-md); + border-top: 1px solid var(--accent); + padding-top: var(--sp-md); +} + +.sidebar-bulk-count { + font-size: 12px; + font-weight: 600; + color: var(--text-secondary); +} + +.sidebar-bulk-all { + display: flex; + align-items: center; + gap: var(--sp-md); + font-size: 12px; + color: var(--text-tertiary); + cursor: pointer; +} + +.sidebar-bulk-all input { + accent-color: var(--accent); + cursor: pointer; +} + +.sidebar-bulk-actions { + display: flex; + flex-wrap: wrap; + gap: var(--sp-md); +} + +/* Haken in der Lagenliste, nur im Auswahlmodus sichtbar */ +.incident-check { + display: flex; + align-items: center; + flex-shrink: 0; + cursor: pointer; +} + +.incident-check input { + accent-color: var(--accent); + cursor: pointer; + margin: 0; +} + +/* Ausgewaehlte Lage: vollstaendig umlaufender Rahmen, kein einseitiger Streifen */ +.incident-item.picked { + outline: 2px solid var(--accent); + outline-offset: -2px; + border-radius: var(--radius); +} + .sidebar-sources-link { padding: var(--sp-lg) var(--sp-xl); border-top: 1px solid var(--border); diff --git a/src/static/dashboard.html b/src/static/dashboard.html index c4112f9..040d3f2 100644 --- a/src/static/dashboard.html +++ b/src/static/dashboard.html @@ -13,7 +13,7 @@ - +