/* Frontend styles for the /intern wiki. Loaded explicitly (see internal-header.php) - unlike this plugin's root index.css, which Kirby auto-loads into the Panel and is unrelated to this file. Layout: a persistent sidebar tree + a single-article reading pane, with a command-palette search (Cmd+K) instead of an inline filter box. Replaces the previous nested checkbox-accordion list. Design/interaction proposal reviewed and approved as an Artifact mockup before this was built - see the wiki-shell, wiki-tree-, wiki-page, and wiki-palette- prefixed classes below, which mirror that mockup 1:1 with real class names. --wk-* tokens derive from the site's own --c-* tokens (see main.css) and the bc-members widget's --bcm-* tokens, so the wiki matches both without inventing a new palette. Hardcoded fallbacks are the resolved real values (e.g. --c-primary is #106ca7) for the rare case neither is on the page. */ /* Scoped to body.t-internal, not #WikiContainer: the command palette overlay below is moved to a direct child of at runtime (see wiki.js) to escape main's isolation:isolate stacking context, so these tokens need to reach it by inheritance too - #WikiContainer alone wouldn't be an ancestor of the relocated overlay. */ body.t-internal { --wk-ink: var(--c-text, #222); --wk-ink-soft: var(--c-secondary-dark-75, #4b5b68); --wk-surface: var(--bcm-surface, #fff); --wk-sidebar: var(--c-secondary-light, #f4f8fa); --wk-line: var(--c-secondary-dark-25, #c7d2d9); --wk-tint: var(--c-secondary-125, #dee7ec); --wk-accent: var(--bcm-primary, var(--c-primary, #106ca7)); --wk-accent-deep: var(--bcm-secondary, var(--c-secondary, #0b4f79)); --wk-restricted-bg: #fdf1d9; --wk-restricted-text: #8a5a12; --wk-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); --wk-shadow-lift: 0 12px 28px -12px rgba(11, 42, 66, 0.28); --wk-radius: 28px; --wk-ease: cubic-bezier(0.22, 1, 0.36, 1); /* bc-members' own account bar (.bcm-bar, see member-bar.php) is position:sticky;top:0 and sits right above this container - both it and the sidebar/scroll-margin below need to clear it, or they end up stuck underneath/overlapping it once it actually sticks (see the overflow fix below for why it doesn't until now). */ --wk-member-bar-clearance: 4rem; /* Stacked sticky offsets for the Mitglieder pane (search header, filter toolbar, results meta-line, table header - see internal-pane-members.php) - each one needs the combined height of everything sticky above it, or they'd overlap once all stuck. These four custom properties are re-measured live and overwritten on #WikiContainer by wiki.js's syncMembersStickyOffsets() (via ResizeObserver, so it tracks wraps from viewport size, filter-chip label length, and zoom/font-size too) - the values here are only the first-paint fallback before JS runs. */ --wk-members-header-height: 3.75rem; --wk-members-filter-height: 4.5rem; --wk-members-meta-height: 3rem; } /* main.css's global `header+main { overflow: hidden }` silently defeats position:sticky on any descendant (the sidebar below, and .bcm-bar itself) - any ancestor with overflow other than visible breaks sticky positioning entirely. Scoped to this template only (t-internal, see snippets/header.php's body class) rather than changing it globally. Can't just split the axes (overflow-x: hidden; overflow-y: visible) - per the CSS overflow spec, when one axis is visible and the other isn't, the visible one is computed as auto instead, which *also* breaks sticky. That overflow:hidden was also the only thing clipping main.css's decorative `header+main::before` band (a rotated color rectangle deliberately oversized/offset - see main.css - so it bleeds past main's own box on every edge, relying on that overflow to trim it back to a neat strip). Losing it here would let the band bleed for real, so the band gets its own dedicated clip box instead: .internal-band-clip below, a plain div (added in templates/internal.php as main's first child) sized via position:relative+inset:0 to match main's own box exactly, with its own overflow:hidden. main stays overflow:visible for sticky; only that div (not an ancestor of the sticky sidebar) does the clipping main used to do. */ body.t-internal main { overflow: visible; position: relative; /* Contain bc-wiki's own sticky z-index stack (up to z-index:5, see .wiki-page-members below) inside a stacking context rooted here, so it can never leak into the shared page-level stacking context and paint over site chrome living outside main - namely the bc-members account bar (.bcm-bar, z-index via config.php's bc.members.theme.zBar) and its dropdown login panel, which otherwise sat right below bc-wiki's z-index:5 header/filter row and got covered by it once that row actually stuck in place. main has no z-index of its own, so with isolation it now competes against .bcm-bar/the site nav header as one plain (z-index:auto) box - always losing to their explicit z-index - regardless of whatever numbers bc-wiki uses internally. */ isolation: isolate; } body.t-internal header + main::before { display: none; } body.t-internal .internal-header h1 { color: white; } .internal-band-clip { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; } /* Mirrors .t-internal header+main::before in main.css exactly (the compact banner-strip variant shared by internal/default/members templates, not the 40vh hero used on marketing pages). */ .internal-band-clip::before { content: ''; display: block; position: absolute; top: calc(4vw + 1.5rem); left: -5%; width: 110%; height: calc(16vw + 3rem); min-height: 10rem; background-color: var(--c-secondary-dark); transform: rotateZ(1.25deg) translateY(-50%); } /* ---------- quicklinks (moved into the sidebar; same data source as before - direct children of /intern with template calendar/members/ gallery/default - just restyled from solid chips to a quiet link list). --- */ .wiki-quicklinks-mini { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 0.6rem 0.75rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--wk-line); } .wiki-quicklinks-mini a { display: block; padding: 0.4rem 0.6rem; border-radius: 6px; color: var(--wk-ink-soft); text-decoration: none; font-size: 0.8125rem; font-weight: 600; transition: background-color 120ms ease, color 120ms ease; } .wiki-quicklinks-mini a:hover, .wiki-quicklinks-mini a:focus-visible { background: var(--wk-tint); color: var(--wk-accent-deep); outline: none; } .wiki-quicklinks-divider { height: 1px; margin: 0.3rem 0.6rem; background: var(--wk-line); } /* ---------- shell: a floating sticky sidebar card beside a reading pane that flows with the rest of the page (no bounded height/border of its own) - the sidebar's own card look is what now reads as "the wiki", rather than a bordered box wrapping both. ---------- */ .wiki-shell { display: flex; align-items: flex-start; gap: 1.5rem; background: var(--wk-surface); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--wk-ink); } .wiki-sidebar { width: 17rem; flex-shrink: 0; position: sticky; top: .5rem; background: var(--wk-sidebar); border: 1px solid var(--wk-line); border-radius: var(--wk-radius); box-shadow: var(--wk-shadow); display: flex; flex-direction: column; overflow-y: auto; } .wiki-palette-trigger { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 1rem 0.75rem; padding: 0.5rem 0.7rem; background: var(--wk-surface); border: 1px solid var(--wk-line); border-radius: 8px; color: var(--wk-ink-soft); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; } .wiki-palette-trigger:hover, .wiki-palette-trigger:focus-visible { border-color: var(--wk-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wk-accent) 14%, transparent); } .wiki-palette-trigger span { flex: 1; } .wiki-palette-trigger kbd { font-family: inherit; font-size: 0.6875rem; color: var(--wk-ink-soft); background: var(--wk-tint); border-radius: 4px; padding: 0.1rem 0.35rem; } .wiki-sidebar-tree { flex: 1; padding: 0.25rem 0.6rem 1rem; } /* categories: the only collapsible level - entries nest under them flatly (indented by depth), never independently collapsed. */ .wiki-tree-branch-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; } .wiki-tree-branch-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer; font-size: 0.8125rem; font-weight: 700; color: var(--wk-ink); transition: background-color 120ms ease; } .wiki-tree-branch-head:hover { background: var(--wk-tint); } .wiki-tree-branch-toggle:focus-visible + .wiki-tree-branch-head { outline: 2px solid var(--wk-accent); outline-offset: -2px; } .wiki-tag-restricted-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--wk-restricted-text); flex-shrink: 0; display: inline-block; } .wiki-tree-chevron { margin-left: auto; color: var(--wk-ink-soft); transition: transform 200ms var(--wk-ease); flex-shrink: 0; } .wiki-tree-branch-toggle:checked ~ .wiki-tree-branch-head .wiki-tree-chevron { transform: rotate(90deg); } .wiki-tree-branch-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--wk-ease); } .wiki-tree-branch-toggle:checked ~ .wiki-tree-branch-body { grid-template-rows: 1fr; } .wiki-tree-branch-body-inner { overflow: hidden; min-height: 0; } .wiki-tree-list { display: flex; flex-direction: column; gap: 0.05rem; padding: 0.1rem 0 0.4rem 0.9rem; } .wiki-tree-entry { display: flex; flex-direction: column; } .wiki-tree-depth-2 { margin-left: 0.65rem; } .wiki-tree-depth-3 { margin-left: 1.3rem; } .wiki-tree-depth-4 { margin-left: 1.95rem; } .wiki-tree-link { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; border-radius: 6px; color: var(--wk-ink-soft); text-decoration: none; font-size: 0.8125rem; transition: background-color 120ms ease, color 120ms ease; } .wiki-tree-link:hover, .wiki-tree-link:focus-visible { background: var(--wk-tint); color: var(--wk-ink); outline: none; } /* Solid fill rather than a background tint - the tint read too close in hue/lightness to the sidebar's own pale background to tell "active" apart from "hover" at a glance. Matches the members pane's active view-toggle/chip treatment, so "this is the active thing" reads the same everywhere in the wiki. */ .wiki-tree-link.is-active { background: var(--wk-accent-deep); color: #fff; font-weight: 700; } .wiki-tree-link.is-active:hover, .wiki-tree-link.is-active:focus-visible { background: var(--wk-accent-deep); color: #fff; } .wiki-tree-link-external svg { flex-shrink: 0; opacity: 0.7; } /* ---------- reading pane: flows with the page - no inner scroll container, no border/shadow of its own (see .wiki-shell above) - the sidebar's card edge is the only visual boundary left. ---------- */ .wiki-content { flex: 1; min-width: 0; position: relative; padding: 1.25rem 2rem 3rem 0; /* so scrollIntoView() (see wiki.js's showPage()) and any hash-based jump land below the sticky member bar, not tucked underneath it. */ scroll-margin-top: var(--wk-member-bar-clearance); } .wiki-mobile-nav-toggle { display: none; align-items: center; gap: 0.4rem; margin-bottom: 1.25rem; padding: 0.45rem 0.8rem; background: var(--wk-tint); border: none; border-radius: 999px; color: var(--wk-accent-deep); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; } .wiki-page { display: none; } .wiki-page.is-active { display: block; } .wiki-page-breadcrumb { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wk-ink-soft); margin: 0 0 0.5rem; } .wiki-page h1 { color: var(--wk-accent-deep) !important; font-size: 1.625rem; margin: 0 0 0.35rem; line-height: 1.25; } .wiki-page-restricted-tag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wk-restricted-text); background: var(--wk-restricted-bg); padding: 0.2rem 0.55rem; border-radius: 999px; margin-bottom: 1rem; } .wiki-page-text { font-size: 0.9375rem; line-height: 1.75; } .wiki-page-text p { margin: 0 0 1rem; } .wiki-page-text table { margin-bottom: 0.5rem; } .wiki-page-text td, .wiki-page-text th { border: 1px solid var(--wk-line); padding: 0.25rem 0.5rem; } /* main.css's minireset zeroes list markers/margins/padding globally (ul { list-style: none }, li { margin: 0; padding: 0 }) - block-editor lists need their own treatment restored here or they read as run-together plain lines. */ .wiki-page-text ul, .wiki-page-text ol { margin: 0 0 1rem; padding-left: 1.35rem; } .wiki-page-text ul { list-style: disc; } .wiki-page-text ol { list-style: decimal; } .wiki-page-text li { margin-bottom: 0.4rem; } .wiki-page-text li:last-child { margin-bottom: 0; } .wiki-page-text li > ul, .wiki-page-text li > ol { margin-top: 0.4rem; margin-bottom: 0; } /* ---------- landing pane: big, approachable quicklink tiles (see internal-pane-landing.php) - same links as the sidebar's compact wiki-quicklinks-mini nav, scaled up as the wiki's front door. ---------- */ .wiki-landing-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; margin: 2rem 0 0; } .wiki-landing-tile { display: flex; align-items: center; gap: 0.9rem; padding: 1.25rem 1.4rem; border: 1px solid var(--wk-line); border-radius: 12px; background: var(--wk-surface); color: var(--wk-ink); text-decoration: none; transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease; } .wiki-landing-tile:hover, .wiki-landing-tile:focus-visible { border-color: var(--wk-accent); background: var(--wk-tint); transform: translateY(-1px); outline: none; } .wiki-landing-tile-icon { flex-shrink: 0; font-size: 1.75rem; line-height: 1; } .wiki-landing-tile-title { flex: 1; font-size: 1.0625rem; font-weight: 700; color: var(--wk-accent-deep); } .wiki-landing-tile-arrow { flex-shrink: 0; color: var(--wk-ink-soft); } .wiki-files { margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; } .wiki-file { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; border: 1px solid var(--wk-line); border-radius: 8px; color: var(--wk-accent-deep); text-decoration: none; font-size: 0.875rem; font-weight: 600; transition: border-color 120ms ease, background-color 120ms ease; } .wiki-file:hover, .wiki-file:focus-visible { border-color: var(--wk-accent); background: var(--wk-tint); outline: none; } .wiki-file svg { flex-shrink: 0; color: var(--wk-ink-soft); } .wiki-file .file-meta { margin-left: auto; color: var(--wk-ink-soft); font-weight: 400; font-size: 0.8125rem; } /* ---------- subindex list for text-less "folder" entries (internal-pane-entry.php) - same card-row look as .wiki-file above, just for entries instead of downloads. ---------- */ .wiki-page-subindex { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .wiki-page-subindex-link { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.85rem; border: 1px solid var(--wk-line); border-radius: 8px; color: var(--wk-accent-deep); text-decoration: none; font-size: 0.9375rem; font-weight: 600; flex-direction: row-reverse; transition: border-color 120ms ease, background-color 120ms ease; } .wiki-page-subindex-link:hover, .wiki-page-subindex-link:focus-visible { border-color: var(--wk-accent); background: var(--wk-tint); outline: none; } .wiki-page-subindex-link svg { flex-shrink: 0; color: var(--wk-ink-soft); } /* ---------- archive-style sortable/searchable file table (internal-files-table.php) - ported from the old standalone archive-texts.php page, restyled onto the wiki's --wk-* tokens instead of that page's own hardcoded colors. List.js only adds/removes an 'asc'/'desc' class on the clicked .sort button and reorders s - all the rest (search box, table chrome) is plain CSS here. ---------- */ .wiki-file-table { margin: 0 0 1.5rem; } .wiki-file-table-search { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .wiki-file-table-search input[type="text"] { flex: 1 1 auto; min-width: 0; border: 1px solid var(--wk-line); border-radius: 6px; padding: 0.5rem 0.75rem; font: inherit; font-size: 0.875rem; color: var(--wk-ink); background: var(--wk-surface); } .wiki-file-table-search input[type="text"]:focus { outline: 2px solid var(--wk-accent); outline-offset: -1px; } .wiki-file-table-matches { flex-shrink: 0; font-size: 0.8125rem; color: var(--wk-ink-soft); } .wiki-file-table-scroll { overflow-x: auto; border: 1px solid var(--wk-line); border-radius: calc(var(--wk-radius) / 4); } .wiki-file-table table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .wiki-file-table th, .wiki-file-table td { padding: 0.5rem 0.75rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--wk-line); } .wiki-file-table td.description { white-space: normal; min-width: 12rem; } .wiki-file-table tbody tr:last-child td { border-bottom: none; } .wiki-file-table tbody tr:hover { background: var(--wk-tint); } .wiki-file-table thead { background: var(--wk-sidebar); } .wiki-file-table .sort { background: none; border: none; padding: 0; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--wk-ink); cursor: pointer; } .wiki-file-table .sort::after { content: ''; display: inline-block; margin-left: 0.35rem; border-left: 4px solid transparent; border-right: 4px solid transparent; } .wiki-file-table .sort.asc::after { border-bottom: 4px solid var(--wk-ink-soft); } .wiki-file-table .sort.desc::after { border-top: 4px solid var(--wk-ink-soft); } .wiki-file-table td.file a, .wiki-file-table td.rec-file a { color: var(--wk-accent-deep); font-weight: 600; text-decoration: none; } .wiki-file-table td.file a:hover, .wiki-file-table td.file a:focus-visible, .wiki-file-table td.rec-file a:hover, .wiki-file-table td.rec-file a:focus-visible { text-decoration: underline; } .wiki-file-table td.file small, .wiki-file-table td.rec-file small { color: var(--wk-ink-soft); font-weight: 400; } .wiki-feedback-footer { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--wk-line); } .wiki-feedback-link { display: inline-flex; align-items: center; gap: 0.45rem; background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--wk-accent-deep); text-decoration: none; } .wiki-feedback-link svg { flex-shrink: 0; } .wiki-feedback-link span { border-bottom: 1px solid color-mix(in srgb, var(--wk-accent-deep) 45%, transparent); } .wiki-feedback-link:hover span, .wiki-feedback-link:focus-visible span { border-bottom-color: var(--wk-accent-deep); } .wiki-feedback-link:focus-visible { outline: 2px solid var(--wk-accent); outline-offset: 2px; border-radius: 3px; } /* ---------- command palette overlay ---------- */ .wiki-palette-overlay { /* fixed, not absolute - the reading pane no longer has a bounded height to contain this against (see .wiki-content above), so this has to cover the actual viewport regardless of scroll position or how tall the current article is. */ position: fixed; inset: 0; z-index: 20; background: rgba(10, 20, 30, 0.45); display: flex; justify-content: center; padding: 2.5rem 1.5rem 1.5rem; } .wiki-palette-overlay[hidden] { display: none; } .wiki-palette-modal { width: 100%; max-width: 28rem; height: fit-content; max-height: 26rem; background: var(--wk-surface); border-radius: 10px; box-shadow: var(--wk-shadow-lift); display: flex; flex-direction: column; overflow: hidden; } .wiki-palette-input-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--wk-line); } .wiki-palette-input-row svg { color: var(--wk-ink-soft); flex-shrink: 0; } .wiki-palette-input-row input { flex: 1; border: none; outline: none; font: inherit; font-size: 1rem; color: var(--wk-ink); background: none; } .wiki-palette-input-row input::placeholder { color: var(--wk-ink-soft); } .wiki-palette-results { overflow-y: auto; padding: 0.4rem; } .wiki-palette-empty { padding: 1.5rem 1rem; text-align: center; color: var(--wk-ink-soft); font-size: 0.875rem; margin: 0; } .wiki-palette-result { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.65rem 0.75rem; border: none; border-radius: 7px; background: none; cursor: pointer; text-align: left; font: inherit; } .wiki-palette-result-title { color: var(--wk-ink); font-size: 0.9375rem; font-weight: 600; } .wiki-palette-result-crumb { color: var(--wk-ink-soft); font-size: 0.75rem; white-space: nowrap; } .wiki-palette-result.is-active, .wiki-palette-result:hover { background: var(--wk-tint); } .wiki-palette-result.is-active .wiki-palette-result-title { color: var(--wk-accent-deep); } /* ---------- mobile: sidebar becomes a drawer ---------- */ .wiki-sidebar-backdrop { display: none; } @media (max-width: 42rem) { /* Drawer flush against the screen edge, not a floating card - fixed (not absolute) for the same reason as the palette overlay above: the shell has no bounded height to contain it against anymore. */ .wiki-sidebar { position: fixed; inset: 0 auto 0 0; max-height: none; z-index: 3; width: 17rem; max-width: 82%; border: none; border-right: 1px solid var(--wk-line); border-radius: 0; transform: translateX(-100%); transition: transform 220ms var(--wk-ease); box-shadow: var(--wk-shadow-lift); } .wiki-shell.sidebar-open .wiki-sidebar { transform: translateX(0); } .wiki-content { padding: 1.5rem 1.25rem 2.5rem; } .wiki-mobile-nav-toggle { display: inline-flex; } .wiki-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 2; background: rgba(10, 20, 30, 0.35); } .wiki-shell.sidebar-open .wiki-sidebar-backdrop { display: block; } } @media (prefers-reduced-motion: reduce) { .wiki-tree-branch-body, .wiki-tree-chevron, .wiki-sidebar { transition-duration: 0.001ms !important; } } /* ---------- lazy pane loading state (wiki.js's fetchLazyPage) ---------- */ .wiki-content.is-loading { min-height: 8rem; } .wiki-content.is-loading::after { content: 'Lädt …'; display: block; color: var(--wk-ink-soft); font-size: 0.875rem; padding: 1rem 0; } /* ---------- Mitglieder pane (internal-pane-members.php). Reviewed as an Artifact mockup before this was built, same iterative process as the shell above - see that mockup's history for why: chip-style filters instead of checkbox+select rows, a tinted toolbar card, a results card whose header strip cordons off "controls" from "data", and generic view-aware column visibility instead of three hardcoded fields. ---------- */ /* Zero-height marker sitting right before each sticky bar in this pane's stack (.wiki-members-header, .meta-line) - wiki.js watches each one with an IntersectionObserver (rootMargin matching that bar's own `top`) to detect the exact moment the bar actually sticks, and toggles .is-stuck on it in response (search recentering on the header, square corners on the meta-line - see each below). */ .wiki-page-members .wiki-members-sticky-sentinel { height: 0; margin: 0; } /* --- header: title + search side by side - sticky so the search stays reachable while scrolling the member list (see .filter-panel/th below for the rest of the sticky stack). --- */ .wiki-page-members .wiki-members-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; position: sticky; top: var(--wk-member-bar-clearance); z-index: 5; background: var(--wk-surface); padding: .5rem 0; } .wiki-page-members .wiki-members-header h1 { margin: 0; } /* Once stuck (.is-stuck, set by wiki.js via the sentinel above), the search field recenters into the header bar instead of hugging the right edge - a 3-column grid with two equal outer tracks keeps it optically centered on the whole bar regardless of the title's width, without needing a matching dummy element on the right. Scoped above the mobile breakpoint - below it the header already stacks title/search onto two full-width rows (see the max-width query at the bottom of this section), where a centered search wouldn't read as an improvement. */ @media (min-width: 42.01rem) { .wiki-page-members .wiki-members-header.is-stuck { display: grid; grid-template-columns: 1fr auto 1fr; } .wiki-page-members .wiki-members-header.is-stuck .wiki-members-search { grid-column: 2; justify-self: center; } } .wiki-page-members .wiki-members-search { display: flex; align-items: center; gap: 0.6rem; /* overrides main.css's global `label { margin-top: 1em }` */ margin: 0; flex: 0 1 17rem; max-width: 17rem; border: 1px solid var(--wk-line); border-radius: 999px; padding: 0.5rem 0.85rem; background: var(--wk-surface); } .wiki-page-members .wiki-members-search svg { flex-shrink: 0; color: var(--wk-ink-soft); } .wiki-page-members .wiki-members-search input { border: none; outline: none; background: none; font: inherit; font-size: 0.8125rem; color: var(--wk-ink); flex: 1; min-width: 0; width: 100%; } .wiki-page-members .wiki-members-search input::placeholder { color: var(--wk-ink-soft); } .wiki-page-members .wiki-members-search:focus-within { border-color: var(--wk-accent); } .wiki-page-members .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- filter toolbar: one row of chips on a quiet tinted card --- */ .wiki-page-members .filter-panel { margin: 0 0 1rem; position: sticky; top: calc(var(--wk-member-bar-clearance) + var(--wk-members-header-height)); z-index: 5; } .wiki-page-members .toolbar-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.5rem; background: var(--wk-sidebar); border: 1px solid var(--wk-line); border-radius: calc(var(--wk-radius) / 4); padding: 0.75rem 1rem; } .wiki-page-members .toolbar-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .wiki-page-members .group-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wk-ink-soft); } .wiki-page-members .chip { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.7rem 0.38rem 0.6rem; border-radius: 999px; border: 1px solid var(--wk-line); background: var(--wk-surface); color: var(--wk-ink-soft); font: inherit; font-size: 0.78125rem; font-weight: 600; cursor: pointer; transition: border-color 140ms var(--wk-ease), background-color 140ms var(--wk-ease), color 140ms var(--wk-ease); } .wiki-page-members .chip:hover { border-color: var(--wk-accent); color: var(--wk-ink); } .wiki-page-members .chip svg { flex-shrink: 0; opacity: 0.7; } .wiki-page-members .chip .chip-caret { margin-left: 0.05rem; opacity: 0.55; transition: transform 160ms var(--wk-ease); } .wiki-page-members .chip[aria-expanded="true"] .chip-caret { transform: rotate(180deg); } .wiki-page-members .chip.is-set { background: color-mix(in srgb, var(--wk-accent) 12%, var(--wk-surface)); border-color: var(--wk-accent); color: var(--wk-accent-deep); } .wiki-page-members .chip.is-set svg { opacity: 1; } .wiki-page-members .popover { position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 5; min-width: 12rem; background: var(--wk-surface); border: 1px solid var(--wk-line); border-radius: calc(var(--wk-radius) / 4); box-shadow: var(--wk-shadow-lift); padding: 0.5rem; } .wiki-page-members .popover[hidden] { display: none; } .wiki-page-members .popover-option { display: block; width: 100%; text-align: left; padding: 0.42rem 0.6rem; border-radius: 6px; border: none; background: none; font: inherit; font-size: 0.8125rem; color: var(--wk-ink); cursor: pointer; } .wiki-page-members .popover-option:hover { background: var(--wk-tint); } .wiki-page-members .popover-option.is-selected { color: var(--wk-accent-deep); font-weight: 700; } .wiki-page-members .popover-input { padding: 0.4rem; min-width: 14rem; } .wiki-page-members .popover-input input { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--wk-line); border-radius: 6px; font: inherit; font-size: 0.8125rem; background: var(--wk-surface); color: var(--wk-ink); } .wiki-page-members .reset-link { border: none; background: none; font: inherit; font-size: 0.78125rem; font-weight: 600; color: var(--wk-ink-soft); cursor: pointer; padding: 0.3rem 0.2rem; text-decoration: underline; text-underline-offset: 0.2em; } .wiki-page-members .reset-link:hover { color: var(--wk-accent-deep); } .wiki-page-members .reset-link[hidden] { display: none; } /* --- Darstellung: three fixed-size icon circles (native radios, visually hidden - the