/* * Compendion Cardlist — gefilterte, client-paginierte Card-Listen. * * Gemeinsame Optik fuer alle Cardlist-Instanzen (Anderswo, Episoden, …): * Such-Feld, Pillen-Bar (top/sub), Listen-Wrapper, Sentinel/Spinner. Das * Card-Markup selbst liegt zentral in compendion-content-card.css. * * Farben: eigene Custom-Properties --ccl-*. Bewusst NICHT die * --wp--preset--color--*-Tokens, weil die je nach Style-Variation kollabieren. */ .compendion-cardlist { --ccl-page-bg: transparent; --ccl-entry-bg: #ffffff; --ccl-entry-text: #1a1a1a; --ccl-entry-meta: #555555; --ccl-entry-border: rgba(0, 0, 0, 0.10); --ccl-entry-hover: #f5f5f5; --ccl-badge-bg: #1a1a1a; --ccl-badge-text: #ffffff; --ccl-section-line: rgba(0, 0, 0, 0.20); --ccl-tint: rgba(0, 0, 0, 0.05); color-scheme: light dark; display: flex; flex-direction: column; gap: 1rem; color: var(--ccl-entry-text); } @media (prefers-color-scheme: dark) { .compendion-cardlist { --ccl-entry-bg: #1f1f1f; --ccl-entry-text: #e8e8e8; --ccl-entry-meta: #a0a0a0; --ccl-entry-border: rgba(255, 255, 255, 0.10); --ccl-entry-hover: #292929; --ccl-badge-bg: #e8e8e8; --ccl-badge-text: #1a1a1a; --ccl-section-line: rgba(255, 255, 255, 0.20); --ccl-tint: rgba(255, 255, 255, 0.05); } } .compendion-cardlist--empty .compendion-cardlist__empty { color: var(--ccl-entry-meta); margin: 0; } /* List-Infrastruktur ----------------------------------------------------- */ .ccl-list { display: flex; flex-direction: column; gap: 1rem; } /* `.ccl-cards` traegt das geteilte Content-Card-Grid — Definition liegt * zentral in compendion-content-card.css (Komma-Selektor mit allen Listen- * Wrappern). Hier bewusst KEINE eigene grid-template-columns-Regel, sonst * entsteht Wrapper-Drift (Memory feedback_card_wrapper_grid_drift). */ /* Sentinel + Spinner ------------------------------------------------------ */ .ccl-sentinel { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: 1.5rem 0; } .ccl-spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid var(--ccl-section-line); border-top-color: var(--ccl-badge-bg); border-radius: 50%; animation: ccl-spin 0.8s linear infinite; } @keyframes ccl-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ccl-spinner { animation-duration: 2.4s; } } /* Filter-Bar ------------------------------------------------------------- */ .ccl-bar { position: sticky; top: 0; z-index: 5; background: var(--ccl-page-bg, transparent); padding-block: 0.75rem; backdrop-filter: blur(8px); } /* Mobile-Nav-Overlay: WP-Core setzt `.has-modal-open` auf und gibt dem offenen Overlay `z-index:100000`. position:sticky + backdrop-filter erzeugen an .ccl-bar einen eigenen Stacking-Context, der sonst über dem Menü liegt. Bei offenem Menü neutralisieren, damit die Filter-Bar hinter das Overlay fällt. */ .has-modal-open .ccl-bar { position: static; z-index: auto; backdrop-filter: none; } .ccl-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ccl-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border: 1px solid var(--ccl-entry-border); border-radius: 999px; background: var(--ccl-entry-bg); color: var(--ccl-entry-text); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .ccl-pill:hover, .ccl-pill:focus-visible { border-color: var(--ccl-badge-bg); outline: none; } .ccl-pill.is-active { background: var(--ccl-badge-bg); color: var(--ccl-badge-text); border-color: var(--ccl-badge-bg); } .ccl-pill__count { font-size: 0.75rem; font-weight: 500; opacity: 0.75; font-variant-numeric: tabular-nums; } .ccl-pill.is-active .ccl-pill__count { opacity: 0.9; } /* Sub-Pillen -------------------------------------------------------------- */ .ccl-pills--sub { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--ccl-section-line); animation: ccl-fade-in 0.2s ease-out; } .ccl-pill--sub, .ccl-pill--sub-all { font-size: 0.8rem; padding: 0.3rem 0.75rem; } @keyframes ccl-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ccl-pills--sub { animation: none; } } /* Pillen-Stack (nested-Modus: rekursive Pfad-Hierarchie) ------------------ */ .ccl-pills-stack { display: flex; flex-direction: column; gap: 0.5rem; } /* Jede Ebene unter der ersten bekommt einen Trennstrich + Einblend-Animation, analog zu den Sub-Pillen des flachen Modus. Tiefere Ebenen etwas kleiner. */ .ccl-pills-stack .ccl-pills + .ccl-pills { padding-top: 0.5rem; border-top: 1px solid var(--ccl-section-line); animation: ccl-fade-in 0.2s ease-out; } .ccl-pills-stack .ccl-pills:not(.ccl-pills--level-0) .ccl-pill { font-size: 0.8rem; padding: 0.3rem 0.75rem; } @media (prefers-reduced-motion: reduce) { .ccl-pills-stack .ccl-pills + .ccl-pills { animation: none; } } /* Such-Input -------------------------------------------------------------- */ .ccl-search { margin-bottom: 0.75rem; } .ccl-search__input { width: 100%; max-width: 28rem; padding: 0.6rem 0.9rem; border: 1px solid var(--ccl-entry-border); border-radius: 999px; background: var(--ccl-entry-bg); color: var(--ccl-entry-text); font-size: 1rem; } .ccl-search__input:focus-visible { outline: 2px solid var(--ccl-badge-bg); outline-offset: 2px; }