/** * Blätter-Reihe (Subrow) — Mechanik-Stil * --------------------------------------------------------------------------- * Gehört zu assets/js/cod-subrow.js. Hier steht NUR, was jede waagerechte * Pill-Reihe zum Blättern braucht: kein Umbruch, versteckte Scrollbar, weiche * Fade-Kanten, sanftes Einrasten. Wie die Pillen darin AUSSEHEN, bleibt Sache * des jeweiligen Bausteins (der Chat bringt .cod-chat-mode-switch mit, das * Events-Widget .cod-subrow-pill in events.css). * * Bis zum 01.08.2026 stand dieser Block inline im Chat (cod-message-chat.php). * Er ist herausgelöst worden, weil ihn jetzt auch Bausteine ausserhalb des * Chats brauchen. Die Chat-Reihen sind in der Selektorliste weiterhin * aufgeführt, damit ihr Markup unverändert bleiben konnte. * * ZWILLINGSDATEI: cod-embed/assets/css/cod-subrow.css — immer gemeinsam ändern. * Auf die Community-Seiten kommt diese Datei auf zwei Wegen: für den Chat über * den Bootstrap-Endpunkt (dem Chat-CSS vorangestellt), für alles andere als * eigene Datei aus cod-embed/assets/css/. */ .cod-subrow, .cod-chat-subrow, .cod-chat-mode-switcher, .cod-chat-md-sub-switcher, .cod-chat-admin-cat-switcher, .cod-chat-admin-sub-switcher { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; max-width: 100%; /* Weiche Fade-Kanten: Pills lösen sich am Rand weich auf, statt hart unter dem Blätter-Pfeil abgeschnitten zu werden. Die Breite je Seite setzt das JS (--cod-fade-l/-r) nur dann, wenn dorthin überhaupt gescrollt werden kann. Die Maske sitzt an der Border-Box, bleibt also am Rand stehen. */ --cod-fade-l: 0px; --cod-fade-r: 0px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--cod-fade-l), #000 calc(100% - var(--cod-fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--cod-fade-l), #000 calc(100% - var(--cod-fade-r)), transparent 100%); /* Sanftes Einrasten beim Blättern: proximity, damit Wischen und Mausrad nicht kleben; scroll-padding erzeugt den Gutter (kein sichtbarer Rand). */ scroll-snap-type: x proximity; scroll-padding-inline: 28px; } .cod-subrow::-webkit-scrollbar, .cod-chat-subrow::-webkit-scrollbar, .cod-chat-mode-switcher::-webkit-scrollbar, .cod-chat-md-sub-switcher::-webkit-scrollbar, .cod-chat-admin-cat-switcher::-webkit-scrollbar, .cod-chat-admin-sub-switcher::-webkit-scrollbar { display: none; } .cod-subrow > *, .cod-chat-subrow .cod-chat-mode-switch, .cod-chat-mode-switcher .cod-chat-mode-switch, .cod-chat-md-sub-switcher .cod-chat-mode-switch, .cod-chat-admin-cat-switcher .cod-chat-mode-switch, .cod-chat-admin-sub-switcher .cod-chat-mode-switch { scroll-snap-align: start; } /* Positions-Anker für die Pfeile einer Reihe. Reihen im Chat-Kopf brauchen ihn nicht - die hängen am .cod-chat-header selbst. Alle anderen bekommen diesen Wrap beim Anmelden automatisch umgelegt. */ .cod-subrow-wrap, .cod-chat-subrow-wrap { position: relative; } /* Blätter-Pfeile: weiche Ein- und Ausblendung, dezenter runder Halo beim Überfahren. Der Hintergrund steht hier und nicht inline im JS, damit :hover überhaupt greifen kann. KLEIN UND AM RAND IST ABSICHT (17.08.2026 bestätigt, Umbau vom 12.08.2026 zurückgenommen): Der Pfeil trägt bewusst KEINE eigene Fläche - er liegt über der Reihe, und der Text unter ihm ist durch die Maske oben schon ausgeblendet. Der Verlauf (26 px) ist dafür breiter als der Pfeil (16 px). Ein runder Knopf mit weissem Grund war einmal da und ist wieder gewichen: Auf einer Leiste aus weissen Pillen wirkt er wie eine weitere Pille, und als eigene Spalte nahm er der Reihe auf jeder Seite Platz weg. Die Begründung im Langtext steht in cod-subrow.js. */ [data-cod-subnav-arrow] { /* Die Grösse steht hier statt inline im JS, damit ein Baustein sie anpassen kann, ohne die Optik zu überschreiben: Ein Vorfahre setzt einfach --cod-subrow-pfeil (so macht es das Onboarding, wo die Leiste auf grossen Pillen liegt und ein 16-px-Chevron zu zierlich wirkt). Vorher stand die Zahl im Inline-Stil und schlug damit jede Regel ausser !important - genau daran hing dort eine komplette zweite Pfeil-Fassung. Die Zahl gehört NICHT hierher, sondern an den Vorfahren: Stünde sie an diesem Selektor, könnte kein Vorfahre sie mehr überschreiben. */ width: var(--cod-subrow-pfeil, 16px); height: var(--cod-subrow-pfeil, 16px); border-radius: 999px; background: transparent; /* Senkrecht mittig, unabhängig von der Grösse: Das JS setzt top auf die MITTE der Reihe, diese Zeile zieht den Pfeil um seine halbe Höhe hoch. Beide gehören zusammen - zog das JS die Hälfte selbst ab, musste es die Grösse raten, und ein grösserer Pfeil sass zu tief. */ transform: translateY(-50%); transition: opacity .2s ease, visibility .2s ease, color .2s ease, background .15s ease; } /* Das Sinnbild wächst mit - es behält das Verhältnis 13:16 aus dem JS-Markup, sonst klebte ein grosser Knopf um ein winziges Chevron. */ [data-cod-subnav-arrow] svg { width: calc(var(--cod-subrow-pfeil, 16px) * .8125); height: calc(var(--cod-subrow-pfeil, 16px) * .8125); } [data-cod-subnav-arrow]:hover { background: rgba(31, 77, 134, .10); } /* Der Pfeil selbst ist bewusst klein (16 px). Damit er trotzdem sicher zu treffen ist, vergrössert ein unsichtbares Feld die Trefferfläche, ohne das Layout anzufassen. ES WÄCHST NACH INNEN, NIE NACH AUSSEN (17.08.2026, als Ursache gemessen): Zentriert auf dem Pfeil ragte das 44-px-Feld rechts 13 px über den Kopf hinaus (22 halbe Feldbreite - 8 halbe Pfeilbreite - 1 px Randabstand). Damit war der Inhalt des Chat-Fensters 13 px breiter als das Fenster - und das erste scrollIntoView() auf den aktiven Reiter schob das GANZE Fenster um genau diese 13 px nach links. Der linke Pfeil fiel dadurch aus dem beschnittenen Bereich (overflow-x:hidden am .cod-chat-popup) und war weder zu sehen noch zu treffen, der rechte rutschte 13 px nach innen. Beides sah aus wie ein Fehler an den Pfeilen und war eine Folge ihrer Trefferfläche. Die Breite entspricht dem weichen Verlauf (26 px): So endet das unsichtbare Feld genau dort, wo der Text wieder lesbar wird - es überdeckt also nie einen Reiter, den man anklicken will. Senkrecht bleibt es bei 44 px zentriert. */ [data-cod-subnav-arrow]::after { content: ""; position: absolute; top: 50%; width: 26px; height: 44px; transform: translateY(-50%); } [data-cod-subnav-arrow="left"]::after { left: 0; right: auto; } [data-cod-subnav-arrow="right"]::after { right: 0; left: auto; } /* Trefferfläche der Chat-Pillen auf 44 px — nur im Touch-Modus (07.08.2026). * * Gemessen: Die Pillen sind 34 px hoch. Auf dem Handy waren damit 134 von 237 * zu kleinen Trefferflächen im Chatfenster allein diese Reihen. * * Warum die Reihe Polster bekommt und nicht nur die Pille ein ::after: * Eine Blätter-Reihe ist ein waagerechter Schieber und trägt overflow-y:hidden. * Abgeschnitten wird an der PADDING-Box - eine Fläche, die 5 px über die Pille * hinausragt, wäre ohne dieses Polster oben und unten weggeschnitten und damit * wirkungslos. Mit 5 px oben und 5+2 px unten liegt sie vollständig im * sichtbaren Bereich. Die Pille selbst bleibt optisch unverändert 34 px, die * Reihe wächst um 10 px — auf dem Handy also 10 px mehr Kopfzeile. * * Warum nur senkrecht vergrössert wird: Die schmalste Pille ist 47 px breit, * waagerecht fehlt also nichts. Und der Abstand zwischen zwei Pillen beträgt * 8 px — eine waagerechte Vergrösserung um je 5 px würde sich überschneiden * und man träfe den Nachbarn. * * Gegengemessen an 390 px im Touch-Modus über alle neun Reiter: * 272 -> 61 zu kleine Flächen, 0 Kollisionen, kein Überlauf. */ @media (pointer: coarse) { .cod-chat-subrow, .cod-chat-mode-switcher, .cod-chat-md-sub-switcher, .cod-chat-admin-cat-switcher, .cod-chat-admin-sub-switcher { padding-top: 5px; padding-bottom: 7px; } /* Bewusst ohne Reihen-Vorsatz: Pillen stehen auch ausserhalb der Blätter-Reihen (etwa in .cod-chat-context-bar). Drei davon blieben in der ersten Probe ungefixt, weil die Regel an die Reihe gebunden war. */ .cod-chat-mode-switch { position: relative; } .cod-chat-mode-switch::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 44px; min-height: 44px; } /* Dasselbe für die allgemeine Pille der Blätter-Reihen (12.08.2026 ergänzt). Die Regel darüber gilt nur für die Chat-Pillen; die Creator-Reihe im Events-Widget stand deshalb mit gemessenen 41 px unter der 44-px-Marke, obwohl sie dieselbe Mechanik nutzt. Wer eine neue Reihe baut, bekommt es jetzt automatisch mit. Nur senkrecht: Die Pillen tragen einen Namen und sind breit genug; der Abstand zum Nachbarn beträgt 8 px, eine waagerechte Vergrösserung würde ihn überlappen und man träfe den falschen Eintrag. Deshalb hier auch KEIN min-width - anders als bei den Chat-Pillen, wo es wegen der Breite ohnehin folgenlos bleibt. */ .cod-subrow-pill { position: relative; } .cod-subrow-pill::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-height: 44px; } /* Das Feld ragt über die Pille hinaus, und eine Blätter-Reihe schneidet an ihrer Padding-Box ab - ohne Polster wäre es oben und unten weg. Die Creator-Reihe bringt über zwei Klassen eigene 2 px mit (41 + 4 = 45) und braucht diese Zeile nicht; sie gilt für Reihen ohne eigenes Polster. */ .cod-subrow { padding-top: 5px; padding-bottom: 7px; } } @media (prefers-reduced-motion: reduce) { [data-cod-subnav-arrow] { transition: none; } }