/** * Navigation Active State — systemischer Active-State-Layer * * Drei Styles (via --nav-active-style aus BP Options): * color — nur Textfarbe wechselt (reines Farb-Highlight, Legacy-Verhalten) * underline — Linie unter dem aktiven Link (Default) * pill — dezente Hintergrund-Kapsel * * Fallback-Kette (vom CSS-Emitter bereits aufgelöst): * --nav-active-color leer → currentColor * --nav-active-border-color leer → var(--color-primary) * --nav-active-bg leer → transparent * * Spezifität: erbt von bestehender .navbar-horizontal .navbar-nav > li.current-menu-item > a * Rule (main.css), überschreibt nur die Farbe selektiv über aktiven Attribute-Selektor. * * Bestandsprojekte ohne gesetzte neue Felder → Default underline mit Primary als Marker. */ /* ────────── Gemeinsame Basis für alle Styles: Textfarbe respektiert Active-Color-Token ────────── */ .navbar-horizontal .navbar-nav > li.current-menu-item > a, .navbar-horizontal .navbar-nav > li.current-menu-ancestor > a, .navbar-horizontal .navbar-nav > li.current_page_item > a, .navbar-horizontal .navbar-nav > li.current_page_ancestor > a { color: var(--nav-active-color, currentColor); position: relative; } /* ────────── Style: color ────────── */ /* Legacy: nur Textfarbe. Wenn Active-Color leer ist, fällt auf currentColor zurück, * d. h. aktiver Link sieht aus wie ein normaler Link — das ist gewollt bei * dem Style, um Design-Entscheidung dem User zu überlassen. * Wenn User explizit eine Active-Color setzt, greift sie. */ :root:not([style*="--nav-active-style:underline"]):not([style*="--nav-active-style:pill"]) .navbar-horizontal .navbar-nav > li.current-menu-item > a, .navbar-horizontal[data-nav-active="color"] .navbar-nav > li.current-menu-item > a { /* kein zusätzlicher Marker */ } /* ────────── Style: underline (Default) ────────── */ /* Marker via ::after als Linie unter dem Link. Wir rendern ihn nur, wenn * nav-active-style != color. Das geht in purem CSS nur über * Attribut-Fallback: wir rendern underline/pill immer, aber color-Style * toggled sie via Overwrite aus. Daher Strategie: * 1) Default (underline): ::after wird gerendert. * 2) pill: ::after wird unterdrückt, Hintergrund greift. * 3) color: ::after wird unterdrückt, kein Hintergrund. */ .navbar-horizontal .navbar-nav > li.current-menu-item > a::after, .navbar-horizontal .navbar-nav > li.current-menu-ancestor > a::after, .navbar-horizontal .navbar-nav > li.current_page_item > a::after, .navbar-horizontal .navbar-nav > li.current_page_ancestor > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--nav-active-border-color, var(--color-primary, #34aee4)); border-radius: 1px; pointer-events: none; } /* ────────── Style-Switch via CSS Custom-Property-Test ────────── */ /* @supports-Check auf CSS-Custom-Property-Wert-Vergleich ist nicht portabel; * stattdessen nutzen wir das :root-Attribut-Fallback durch die CSS-Var direkt * in einer @container-ähnlichen Heuristik. Sicherer ist: wir hängen an * ein data-nav-active-style=""-Attribut, das über einen kleinen PHP * body_class / html_class Hook gesetzt wird. * * Hier ist die reine CSS-Regel vorbereitet — der PHP-Hook hängt das Attribut * an . Fallback ohne Attribut: underline greift als Default. */ /* Style: color → Marker aus */ html[data-nav-active-style="color"] .navbar-horizontal .navbar-nav > li.current-menu-item > a::after, html[data-nav-active-style="color"] .navbar-horizontal .navbar-nav > li.current-menu-ancestor > a::after, html[data-nav-active-style="color"] .navbar-horizontal .navbar-nav > li.current_page_item > a::after, html[data-nav-active-style="color"] .navbar-horizontal .navbar-nav > li.current_page_ancestor > a::after { display: none; } /* Style: pill → Marker aus, Hintergrund-Kapsel an */ html[data-nav-active-style="pill"] .navbar-horizontal .navbar-nav > li.current-menu-item > a, html[data-nav-active-style="pill"] .navbar-horizontal .navbar-nav > li.current-menu-ancestor > a, html[data-nav-active-style="pill"] .navbar-horizontal .navbar-nav > li.current_page_item > a, html[data-nav-active-style="pill"] .navbar-horizontal .navbar-nav > li.current_page_ancestor > a { background: var(--nav-active-bg, transparent); border: 1px solid var(--nav-active-border-color, var(--color-primary, #34aee4)); border-radius: 999px; padding-left: 0.85rem; padding-right: 0.85rem; } html[data-nav-active-style="pill"] .navbar-horizontal .navbar-nav > li.current-menu-item > a::after, html[data-nav-active-style="pill"] .navbar-horizontal .navbar-nav > li.current-menu-ancestor > a::after, html[data-nav-active-style="pill"] .navbar-horizontal .navbar-nav > li.current_page_item > a::after, html[data-nav-active-style="pill"] .navbar-horizontal .navbar-nav > li.current_page_ancestor > a::after { display: none; } /* Hover-State bleibt unberührt — er ist in main.css definiert * und hat höhere Spezifität bei :hover. Der Active-State gilt nur * solange der aktuelle Link nicht gehovered wird. */ /* Scrolled/Transparent-Zustände: erben die Active-Tokens, da diese * über :root definiert sind und durch Variant-Overrides an .bp-header--* * bei Bedarf überschrieben werden können (bestehender Variant-Mechanismus). */