/* ============================================================================= shared/picky-cards.css — Mobile Card-Design für table-cols-picker ============================================================================= v9.10.0 (extrahiert aus v9.9.1.1 + v9.9.1.2, ursprünglich Inline-Style in native-advertising-agentur.html/.php). Opt-in via im . NUR Pages, die diesen Card-Look übernehmen sollen, laden die Datei. Die 96 alten Picker-Pages (seo-strategie, google-analytics, etc.) bleiben UNVERÄNDERT mit grauem Container + weißem Button-Look. Voraussetzungen: - shared/table-cols-picker.js (Vanilla JS Auto-Picker für ≥3 Spalten) Wirkung (Mobile ≤720px only, Desktop unverändert): - Container .sh-tcp-tabs: transparenter Background (jeder Button selbst Card) - Buttons .sh-tcp-tab: weißer BG + 1px Border + Shadow (Card-Look) - Active .sh-tcp-tab.is-active: rot gefüllt + weißer Text + roter Shadow - Layout-Override für Universal-Mobile-Patch: · 3 Buttons → 1 Reihe (3-col) · 4 Buttons → 2 Reihen (2x2) · 5+ Buttons → 2 Reihen (auto-wrap) - Tabellen-Width: 100% Container-Breite via table-layout: fixed · 1. Spalte (Kriterium): 40% · 2. sichtbare Spalte (active via [data-tcp-active="N"]): 60% - Body-Cells aktive Spalte: text-align: center - 1. Spalte Body: linksbündig (default) Spezifität: body-Präfix (0,2,1) > table-cols-picker.js-internes CSS (0,2,0) und > theme.css Universal-Mobile-Patches (0,1,0). ============================================================================ */ @media (max-width: 720px) { /* Container: Card-Background entfernen — jeder Button wird selbst Card */ body .sh-tcp-tabs { background: transparent !important; padding: 0 !important; box-shadow: none !important; gap: 8px !important; margin: 0 0 14px !important; } /* Layout-Logik: 2 Buttons → 1 Reihe (2-col), 3 Buttons → 1 Reihe (3-col), 4 Buttons → 2 Reihen (2x2), 5 Buttons → 3+2 Layout (3-col, 5. Button alleine in Row 2 statt Orphan-1-in-Row-3 wie bei 2-col → symmetrischer Look). Überschreibt den Universal-Mobile-Patch aus theme.css. */ body .sh-tcp-tabs[style*="repeat(2, 1fr)"], body .sh-tcp-tabs[style*="repeat(2,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } body .sh-tcp-tabs[style*="repeat(3, 1fr)"], body .sh-tcp-tabs[style*="repeat(3,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; } body .sh-tcp-tabs[style*="repeat(4, 1fr)"], body .sh-tcp-tabs[style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* v9.10.1.1: 5-Buttons (6-col Tabellen wie DSP-Vendors, ESP) waren vorher auf repeat(2, 1fr) → 2+2+1 Layout mit Orphan-Button auf Row 3. Jetzt auf repeat(3, 1fr) → 3+2 Layout: Row 1 = 3 Buttons, Row 2 = 2 Buttons. Die 2 Buttons in Row 2 spannen je 1 col und sind im Grid links-orientiert. justify-content: center auf dem Container würde die letzte Reihe optisch mittig setzen, aber die Spalten-Aufteilung soll konsistent mit der Tabelle bleiben. 3+2 mit Left-Alignment auf Row 2 ist akzeptabel symmetrisch. */ body .sh-tcp-tabs[style*="repeat(5, 1fr)"], body .sh-tcp-tabs[style*="repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; } /* Buttons: ALLE als Cards (Border + BG + Shadow) */ body .sh-tcp-tab { background: #fff !important; border: 1px solid #E5E5E5 !important; color: #0B0B0F !important; box-shadow: 0 2px 6px -2px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.95) !important; font-size: 12.5px !important; padding: 12px 8px !important; min-height: 52px !important; letter-spacing: 0 !important; transition: background 160ms, border-color 160ms, color 160ms, box-shadow 160ms, transform 120ms !important; } /* Active: rot gefüllt, weißer Text, kräftigerer Shadow */ body .sh-tcp-tab.is-active { background: #E21F27 !important; border-color: #E21F27 !important; color: #fff !important; box-shadow: 0 8px 18px -6px rgba(226,31,39,0.45), inset 0 1px 0 rgba(255,255,255,0.18) !important; } /* Tabelle: volle Container-Breite nutzen, sichtbare Spalten gleich verteilen. table-layout: fixed + explizite Width auf erste Spalte (40%) + 2. sichtbare Spalte (60%) per [data-tcp-active]-Selektor. Display:none Cells werden ignoriert. */ body main table[data-tcp] { table-layout: fixed !important; width: 100% !important; /* v9.10.0: min-width-Resets — Picky-Tabellen müssen auf Mobile schrumpfen können, inline min-width (z.B. min-width: 760px) auf Adoption-Pages würde sonst horizontalen Scroll erzwingen statt der 2-Spalten-Picky-Ansicht. */ min-width: 0 !important; } body main table[data-tcp] th:first-child, body main table[data-tcp] td:first-child { width: 40% !important; } /* Aktive Daten-Spalte: 60% Breite. Selektor pro mögliche Position (2..6). */ body main table[data-tcp][data-tcp-active="2"] th:nth-child(2), body main table[data-tcp][data-tcp-active="2"] td:nth-child(2), body main table[data-tcp][data-tcp-active="3"] th:nth-child(3), body main table[data-tcp][data-tcp-active="3"] td:nth-child(3), body main table[data-tcp][data-tcp-active="4"] th:nth-child(4), body main table[data-tcp][data-tcp-active="4"] td:nth-child(4), body main table[data-tcp][data-tcp-active="5"] th:nth-child(5), body main table[data-tcp][data-tcp-active="5"] td:nth-child(5), body main table[data-tcp][data-tcp-active="6"] th:nth-child(6), body main table[data-tcp][data-tcp-active="6"] td:nth-child(6) { width: 60% !important; } body main table[data-tcp] th, body main table[data-tcp] td { word-break: normal !important; overflow-wrap: break-word !important; } /* v9.9.1.2: Body-Zellen der aktiven 2. Spalte zentrieren (Header ist bereits zentriert via theme.css vergleich-Tabellen-Regel). Erste Spalte (Kriterium) bleibt linksbündig. Per [data-tcp-active="N"]-State Selektor pro mögliche Position (2..6). */ body main table[data-tcp][data-tcp-active="2"] tbody td:nth-child(2), body main table[data-tcp][data-tcp-active="3"] tbody td:nth-child(3), body main table[data-tcp][data-tcp-active="4"] tbody td:nth-child(4), body main table[data-tcp][data-tcp-active="5"] tbody td:nth-child(5), body main table[data-tcp][data-tcp-active="6"] tbody td:nth-child(6) { text-align: center !important; } }