/* * Eigene Ergänzungen zum Shopware-Theme. Die EINZIGE Stylesheet-Datei, die von * Hand gepflegt wird — alles Fremde steht in assets/theme/all.css und wird beim * nächsten Theme-Export als Ganzes ersetzt. Darum sind es zwei Dateien: diese * hier muss den Export überleben. * * Lag bisher als Heredoc mitten im Renderer (tcs_layout) und wurde bei jedem * Request inline in den geschrieben. Als Datei ist es browser-cachebar * und für Redakteure wie Entwickler auffindbar. * * ENTFERNT, weil in diesem Auftritt nichts sie erreichen kann — nachgesehen in * allen 80 ausgelieferten Seiten und in jedem Snippet, Blueprint und Skript: * * .cookiefirst-root, [class*="cookiefirst"], [class*="cookie-permission"] * Blendete den Consent-Banner des Originals aus. Diese Installation lädt * überhaupt kein fremdes JavaScript (footer.php: vier lokale Dateien, * sonst nichts), also entsteht das Markup nie, das die Regel verstecken * sollte. * * .cta-portrait, .brand-row, .brand-chip * „Bibliotheks-Module" für Bausteine, die es nicht gibt: kein Snippet in * site/snippets/blocks/, kein Blueprint in site/blueprints/blocks/ und * kein Inhalt erzeugt eine dieser Klassen. Der cta-Baustein setzt * .cms-element-call-to-action, ein brands-Baustein existiert nicht. * Kommen die Bausteine, kommen die Regeln mit ihnen zurück. */ /* Das Logo kommt aus dem eingefrorenen Markup ohne die Größenregel des Originals. !important, weil das Theme-CSS mit höherer Spezifität dagegenhält. */ .header-logo-picture img { height: 48px !important; width: auto !important; max-width: none !important; } /* ── Slider ────────────────────────────────────────────────────────────────── Die Pfeile sind server-gerendert; slider-init.js hebt sie auf die .base-slider-Ebene, damit left/right an den Rändern greifen statt in der Mitte zu clustern. */ .base-slider, .cms-element-image-slider { position: relative; } .base-slider > .base-slider-controls .base-slider-controls-prev { left: 0; right: auto; } .base-slider > .base-slider-controls .base-slider-controls-next { right: 0; left: auto; } .base-slider-controls-prev .icon, .base-slider-controls-next .icon { display: inline-flex; align-items: center; justify-content: center; height: 100%; } /* ── Mobiles Menü ──────────────────────────────────────────────────────────── * * Hier stand ein KOMPLETTER eigener Drawer: eigener Kasten, eigener Abdunkler, * eigene Schaltfläche, eigene Listengestaltung — rund siebzig Zeilen, die * nachbauten, was zwei Verzeichnisse weiter längst fertig lag. * * Denn assets/theme/all.css IST der Theme-Export derselben Shopware-Instanz, * aus der dieses Projekt stammt, und bringt die Schublade mit: `.offcanvas` * samt Maßen, Übergang und Stapelebene, `.offcanvas-start` samt Startposition * links, `.offcanvas-header`/`-close` samt Schließzeile, * `.navigation-offcanvas-list-item` samt Trennlinien, `.is-back-link`, * `.is-home-link`, `.is-current-category` samt Farben — 206 Regeln. Seit das * Markup in site/snippets/menu.php DIESE Klassennamen trägt, greifen sie * einfach. Was hier bleibt, sind drei Dinge, die das Theme nicht mitbringen * kann, weil sein Original die Ebenen einzeln nachlud statt sie * nebeneinanderzustellen — und zwei, die es falsch mitbringt. * ──────────────────────────────────────────────────────────────────────────── */ /* 1 — DIE SCHUBLADE MUSS SOFORT FOKUSSIERBAR SEIN, NICHT ERST NACH DER FAHRT. * * Bootstrap animiert an einer Schublade nur `transform`. Dieses Theme hat * daraus `transition: all 0.45s …` gemacht — und `all` schließt `visibility` * ein. `visibility` kennt keine Zwischenwerte, der Browser schaltet mitten in * der Dauer um; die Schublade ist also nach `classList.add('show')` noch rund * 0,2 s lang `hidden`. Ein .focus() in diesem Fenster verpufft, der Fokus * blieb auf dem Burger-Knopf stehen, und ein Vorlesewerkzeug bekam den Dialog * nie angesagt. Gemessen, nicht vermutet: `Fokus: {imDrawer: false}`. * * Dieselbe Auflösung wie bei den Ebenen weiter unten: Dauer 0 in beide * Richtungen, aber die Verzögerung nur beim Hinausfahren. Herein wird sofort * sichtbar (und fokussierbar), hinaus bleibt sie sichtbar, solange sie fährt. * `.navigation-offcanvas.offcanvas` ist zwei Klassen spezifisch und gewinnt * damit gegen die `.offcanvas`-Regel des Themes. */ .navigation-offcanvas.offcanvas { transition: transform 0.45s cubic-bezier(0.3, 0, 0.15, 1), visibility 0s linear 0.45s; } .navigation-offcanvas.offcanvas.show { transition: transform 0.45s cubic-bezier(0.3, 0, 0.15, 1), visibility 0s; } @media (prefers-reduced-motion: reduce) { .navigation-offcanvas.offcanvas, .navigation-offcanvas.offcanvas.show { transition: none; } } /* 2 — DIE EBENEN LIEGEN ÜBEREINANDER, NICHT UNTEREINANDER. * * Alle Ebenen stehen gleichzeitig im Dokument. `grid` mit EINER Zelle, in die * jede Ebene gelegt wird (`grid-area: 1 / 1`), stapelt sie ohne * `position: absolute` — und, das ist der Punkt, die Zelle ist so hoch wie die * HÖCHSTE Ebene. Dadurch springt die Schublade beim Ebenenwechsel nicht in der * Höhe, und niemand muss eine Höhe in JavaScript ausrechnen. * * `align-self: start` verhindert, dass kurze Ebenen auf die volle Zellhöhe * gedehnt werden und ihre Trennlinien mitwandern. */ .navigation-offcanvas-container { display: grid; /* Die 24 px unter der Schließzeile. Im Original entstehen sie aus einem LEEREN `