diff --git a/src/static/css/style.css b/src/static/css/style.css index ef7cee6..ec7a400 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -928,47 +928,75 @@ input[type="date"].filter-select { padding: 6px 10px; } .health-run-item { display: inline-flex; align-items: center; gap: 8px; } .health-run-item #healthRunInfo { font-size: 12px; } -/* Checkbox-Filterleisten (Standard fuer alle Filter im Portal) */ +/* Checkbox-Dropdowns (Standard fuer alle Filter im Portal) */ .filter-bar { display: flex; - flex-direction: column; - gap: 4px; - padding: 10px 14px; + align-items: flex-start; + gap: 8px; + flex-wrap: wrap; margin-bottom: 14px; +} +.filter-dd { position: relative; } +.filter-dd-btn { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 7px 12px; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text-primary); + font-size: 13px; + cursor: pointer; +} +.filter-dd-btn:hover { background: var(--bg-tertiary); } +.filter-dd-btn.has-selection { border-color: var(--accent); } +.filter-dd-count { + background: var(--accent); + color: #1A1A1A; /* Text auf Gold immer dunkel (ON_ACCENT) */ + border-radius: 999px; + font-size: 11px; + font-weight: 700; + padding: 0 6px; + line-height: 16px; +} +.filter-dd-caret { font-size: 10px; color: var(--text-secondary); } +.filter-dd-panel { + display: none; + position: absolute; + top: calc(100% + 4px); + left: 0; + z-index: 60; + min-width: 210px; + max-height: 320px; + overflow-y: auto; + padding: 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); + flex-direction: column; + gap: 2px; } -.filter-group { - display: flex; - align-items: baseline; - gap: 4px 10px; - flex-wrap: wrap; -} -.filter-group-label { - font-size: 11px; - font-weight: 600; - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.4px; - min-width: 92px; - cursor: default; -} +.filter-dd.open .filter-dd-panel { display: flex; } +[data-theme="light"] .filter-dd-panel { box-shadow: 0 8px 24px rgba(26, 26, 26, 0.18); } .filter-check { - display: inline-flex; + display: flex; align-items: center; - gap: 5px; + gap: 7px; font-size: 13px; cursor: pointer; - padding: 2px 7px; + padding: 4px 8px; border-radius: 6px; user-select: none; + white-space: nowrap; } .filter-check:hover { background: var(--bg-tertiary); } .filter-check input { accent-color: var(--accent); cursor: pointer; margin: 0; + flex-shrink: 0; } /* Checkbox-Spalte: nur sichtbar bei Herkunfts-Filter "Kundenquellen" */ diff --git a/src/static/dashboard.html b/src/static/dashboard.html index 67a0bf7..31febef 100644 --- a/src/static/dashboard.html +++ b/src/static/dashboard.html @@ -6,7 +6,7 @@ AegisSight Monitor-Verwaltung - +