diff --git a/backend/static/css/components.css b/backend/static/css/components.css index 58fcff0..d1efa8b 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -2054,19 +2054,58 @@ html.modal-open { .rk-rec-btn--active { animation: rec-pulse 1.2s ease-in-out infinite; } +/* Filter-Panel (aufklappbar) */ +.rk-filter-toggle-btn { + position: relative; + flex-shrink: 0; +} +.rk-filter-toggle-btn.active { + background: var(--c-primary); + border-color: var(--c-primary); + color: #fff; +} +.rk-filter-badge { + position: absolute; + top: 2px; + right: 2px; + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--c-danger, #EF4444); + border: 1.5px solid var(--c-surface); + pointer-events: none; +} +.rk-filter-panel { + border-top: 1px solid var(--c-border-light); + padding: var(--space-3) var(--space-3) var(--space-2); + background: var(--c-surface); +} .rk-filters { display: flex; flex-direction: column; gap: var(--space-2); } .rk-filter-group { + display: flex; + flex-direction: column; + gap: var(--space-1); +} +.rk-filter-label { + font-size: var(--text-xs); + font-weight: 600; + color: var(--c-text-muted); + text-transform: uppercase; + letter-spacing: 0.05em; + padding-left: 2px; +} +.rk-chips-row { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } -.rk-filter-group::-webkit-scrollbar { display: none; } +.rk-chips-row::-webkit-scrollbar { display: none; } .rk-chip { padding: 4px 10px; border-radius: var(--radius-full); diff --git a/backend/static/index.html b/backend/static/index.html index 842eb04..cc8984c 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -284,24 +284,24 @@ Tagebuch -