/* ============================================================ T3Social – Wall-Layouts Kacheln mit Flip (tiles), Feed-Liste (list), Header-Kacheln (header) sowie die Mobil-Varianten Folien-Ansicht (slides), Karten-Stapel (deck) und Live-Ticker (ticker). Portiert aus dem Prototyp "social-wall". Alles ist unter .sw gekapselt (Präfix "sw-", damit nichts mit dem Seiten-Theme wie Bootstrap .card/.media kollidiert). Farben, Abstände und Höhen sind Custom Properties auf .sw und lassen sich vom Seiten-CSS überschreiben. Dunkles Farbschema: oder die Klasse .sw-dark auf einem Elternelement. ============================================================ */ .sw { --sw-surface: #FFFFFF; --sw-text: #16181D; --sw-text-soft: #5C616B; --sw-text-faint: #8B909A; --sw-line: #E6E4DF; --sw-chip-bg: #FFFFFF; --sw-chip-active-bg: #16181D; --sw-chip-active-text: #FFFFFF; --sw-shadow: 0 1px 2px rgba(20,22,27,.05), 0 4px 16px rgba(20,22,27,.06); --sw-shadow-hover: 0 2px 4px rgba(20,22,27,.07), 0 16px 40px rgba(20,22,27,.14); --sw-radius: 14px; --sw-gap: 18px; --sw-c-instagram: #E1306C; --sw-c-facebook: #1877F2; --sw-c-youtube: #FF0000; --sw-c-twitter: #0F1419; /* Mobil-Bühne (dunkle Fläche) */ --sw-stage-bg: #0B0C10; --sw-stage-text: #F2F3F7; --sw-stage-h: clamp(420px, 160vw, 78vh); /* Header-Kacheln: Höhe je Kachel */ --sw-hero-h: clamp(190px, 22vw, 300px); color: var(--sw-text); line-height: 1.5; } .sw[data-theme="dark"], [data-theme="dark"] .sw, .sw-dark .sw { --sw-surface: #1D2026; --sw-text: #E8EAEE; --sw-text-soft: #A3A8B3; --sw-text-faint: #7A7F8A; --sw-line: #2C2F37; --sw-chip-bg: #1D2026; --sw-chip-active-bg: #E8EAEE; --sw-chip-active-text: #14161B; --sw-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); --sw-shadow-hover: 0 2px 4px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45); --sw-c-twitter: #E8EAEE; } .sw *, .sw *::before, .sw *::after { box-sizing: border-box; } .sw .sw-hide { display: none !important; } .sw-stage[hidden] { display: none; } /* ---------- Plattform-Filter (Chips) ---------- */ .sw-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .sw-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; margin: 0; border-radius: 999px; border: 1px solid var(--sw-line); background: var(--sw-chip-bg); color: var(--sw-text); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s; } .sw-chip:hover { transform: translateY(-1px); } .sw-chip:focus-visible { outline: 2px solid var(--sw-c-facebook); outline-offset: 2px; } .sw-chip[aria-pressed="true"] { background: var(--sw-chip-active-bg); color: var(--sw-chip-active-text); border-color: var(--sw-chip-active-bg); } .sw-chip .sw-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #888; } .sw-chip[data-filter="instagram"] .sw-dot { background: var(--sw-c-instagram); } .sw-chip[data-filter="facebook"] .sw-dot { background: var(--sw-c-facebook); } .sw-chip[data-filter="youtube"] .sw-dot { background: var(--sw-c-youtube); } .sw-chip[data-filter="twitter"] .sw-dot, .sw-chip[data-filter="x"] .sw-dot { background: #71767B; } .sw-chip .sw-count { font-size: 11.5px; font-weight: 700; color: var(--sw-text-faint); font-variant-numeric: tabular-nums; } .sw-chip .sw-count:empty { display: none; } .sw-chip[aria-pressed="true"] .sw-count { color: inherit; opacity: .65; } /* ---------- Beitragskarte (Grundform, in allen Layouts gleich) ---------- */ .sw-item.is-hidden { display: none; } .sw-card { position: relative; background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: var(--sw-radius); box-shadow: var(--sw-shadow); overflow: hidden; cursor: pointer; color: var(--sw-text); transition: box-shadow .2s; } .sw-card:hover { box-shadow: var(--sw-shadow-hover); } .sw-card:focus-within { outline: 2px solid var(--sw-c-facebook); outline-offset: 2px; } .sw-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; } .sw-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; background: #42464D; } .sw-card[data-platform="instagram"] .sw-avatar { background: linear-gradient(135deg, #FEDA75, #D62976 55%, #962FBF); } .sw-card[data-platform="facebook"] .sw-avatar { background: #1877F2; } .sw-card[data-platform="youtube"] .sw-avatar { background: #FF0000; } .sw-who { min-width: 0; flex: 1; } .sw-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sw-card-link, .sw-card-link:visited { color: inherit; text-decoration: none; } .sw-card-link:hover { text-decoration: underline; } .sw-card-link:focus-visible { outline: none; } /* die Karte zeigt den Fokus (focus-within) */ .sw-meta { font-size: 12px; color: var(--sw-text-faint); font-variant-numeric: tabular-nums; } .sw-plat-icon { flex: none; width: 20px; height: 20px; color: var(--sw-c-twitter); } .sw-plat-icon svg { display: block; width: 100%; height: 100%; } .sw-media { position: relative; display: block; width: 100%; overflow: hidden; } .sw-media img { display: block; width: 100%; height: auto; } .sw-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .sw-play > span { width: 58px; height: 42px; border-radius: 11px; background: rgba(0,0,0,.72); display: grid; place-items: center; transition: background .15s, transform .15s; } .sw-play svg { width: 20px; height: 20px; } .sw-card:hover .sw-play > span { background: var(--sw-c-youtube); transform: scale(1.08); } .sw-body { padding: 12px 14px 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } .sw-body p { margin: 0 0 .6em; } .sw-body p:last-child { margin-bottom: 0; } .sw-body img, .sw-body iframe { max-width: 100%; } /* "Mehr laden" */ .sw-more { display: block; margin-top: 2rem; } /* ============================================================ Layout "tiles": 4:5-Kacheln – Bildbeiträge zeigen das Bild vollflächig und drehen sich bei Hover/Fokus zur Caption um; Textbeiträge sind Text-Kacheln. ============================================================ */ .sw-mode-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sw-gap); } .sw-mode-tiles .sw-item { position: relative; aspect-ratio: 4 / 5; perspective: 1500px; } .sw-mode-tiles .sw-item:hover { z-index: 3; } .sw-mode-tiles .sw-card { height: 100%; } /* Ohne Bild: Text-Kachel */ .sw-mode-tiles .sw-card:not(:has(.sw-media)) { display: flex; flex-direction: column; } .sw-mode-tiles .sw-card:not(:has(.sw-media)) .sw-body { flex: 1; min-height: 0; display: -webkit-box; -webkit-line-clamp: 7; line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } /* Mit Bild: Vorderseite Bild, Rückseite Kopf + Caption (Flip) */ .sw-mode-tiles .sw-card:has(.sw-media) { overflow: visible; background: none; border: none; box-shadow: none; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.32,1.12,.32,1); } .sw-mode-tiles .sw-card:has(.sw-media):hover { box-shadow: none; } .sw-mode-tiles .sw-item:hover .sw-card:has(.sw-media), .sw-mode-tiles .sw-item:focus-within .sw-card:has(.sw-media) { transform: rotateY(180deg); } .sw-mode-tiles .sw-card:has(.sw-media):focus-within { outline: none; } .sw-mode-tiles .sw-card:has(.sw-media) .sw-media { position: absolute; inset: 0; border-radius: var(--sw-radius); overflow: hidden; box-shadow: var(--sw-shadow); transform: translateZ(1px); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .sw-mode-tiles .sw-card:has(.sw-media) .sw-media img { width: 100%; height: 100%; object-fit: cover; } /* Rückseite: Panel als Pseudo-Element, darauf Kopf, Caption und Hinweis */ .sw-mode-tiles .sw-card:has(.sw-media)::before { content: ""; position: absolute; inset: 0; background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: var(--sw-radius); box-shadow: var(--sw-shadow); transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .sw-mode-tiles .sw-card:has(.sw-media) .sw-card-head, .sw-mode-tiles .sw-card:has(.sw-media) .sw-body, .sw-mode-tiles .sw-card:has(.sw-media)::after { position: absolute; left: 0; right: 0; transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .sw-mode-tiles .sw-card:has(.sw-media) .sw-card-head { top: 0; } .sw-mode-tiles .sw-card:has(.sw-media) .sw-body { top: 60px; bottom: 44px; display: -webkit-box; -webkit-line-clamp: 8; line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; } .sw-mode-tiles .sw-card:has(.sw-media)::after { content: "Beitrag öffnen ↗"; bottom: 0; padding: 10px 14px 13px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--sw-text); } /* ============================================================ Layout "list": kompakte Feed-Liste – Kopfzeile + zwei Textzeilen, ohne Bild. Breite/Spalte bestimmt das Seiten-Layout. ============================================================ */ .sw-mode-list { display: flex; flex-direction: column; gap: 12px; } .sw-mode-list .sw-media { display: none; } .sw-mode-list .sw-card-head { padding-bottom: 4px; } .sw-mode-list .sw-body { padding-top: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ Layout "header": zwei News-Kacheln ("Magazin") – Bild links, unscharf aufgefüllt und unbeschnitten, Kopf + Text rechts. Das Intro daneben kommt aus dem Seiten-Layout. ============================================================ */ .sw-mode-header { display: grid; gap: var(--sw-gap); } /* Kopf + Text stapeln sich rechts und sitzen vertikal mittig; das Bild liegt absolut über die volle Kachelhöhe in der linken Spalte */ .sw-mode-header .sw-card { height: var(--sw-hero-h); display: flex; flex-direction: column; justify-content: center; } .sw-mode-header .sw-card:has(.sw-media) { padding-left: 46%; } .sw-mode-header .sw-media { position: absolute; left: 0; top: 0; bottom: 0; width: 46%; background: #14161B; } .sw-mode-header .sw-media::before { content: ""; position: absolute; inset: 0; background: var(--sw-img) center / cover no-repeat; filter: blur(24px) saturate(1.1) brightness(.7); transform: scale(1.25); } .sw-mode-header .sw-media img { position: relative; width: 100%; height: 100%; object-fit: contain; } .sw-mode-header .sw-card-head { padding: 14px 14px 0; } .sw-mode-header .sw-avatar { width: 34px; height: 34px; font-size: 13px; } .sw-mode-header .sw-name { font-size: 13.5px; } .sw-mode-header .sw-meta { font-size: 11.5px; } .sw-mode-header .sw-body { padding: 8px 14px 14px; font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .sw-mode-header .sw-card:not(:has(.sw-media)) .sw-body { -webkit-line-clamp: 8; line-clamp: 8; } /* ============================================================ Mobil-Bühne (dunkle Fläche im Hochformat) – Basis aller Mobil-Varianten ============================================================ */ .sw-stage { position: relative; overflow: hidden; height: var(--sw-stage-h); border-radius: 18px; background: var(--sw-stage-bg); color: var(--sw-stage-text); box-shadow: var(--sw-shadow-hover); } @supports (container-type: size) { .sw-stage { container-type: size; } } /* Farbige Unschärfe-Flecken in den Farben der aktiven Plattform */ .sw-blob { position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .35; pointer-events: none; transition: background 1s ease; } .sw-blob-1 { top: -45%; left: -12%; background: radial-gradient(circle, var(--sw-amb1, #962FBF), transparent 70%); } .sw-blob-2 { bottom: -50%; right: -8%; background: radial-gradient(circle, var(--sw-amb2, #1877F2), transparent 70%); } .sw-stage[data-platform="instagram"] { --sw-amb1: #D62976; --sw-amb2: #962FBF; } .sw-stage[data-platform="facebook"] { --sw-amb1: #1877F2; --sw-amb2: #0A4A9E; } .sw-stage[data-platform="youtube"] { --sw-amb1: #FF0000; --sw-amb2: #7A1010; } .sw-stage[data-platform="twitter"], .sw-stage[data-platform="x"] { --sw-amb1: #3A4048; --sw-amb2: #697180; } .sw-hint { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 1; margin: 0; padding: 0 16px; text-align: center; font-size: 12.5px; color: rgba(242,243,247,.5); pointer-events: none; } /* ---------- Mobil-Variante "slides": Folien-Ansicht ---------- Profilbild und Kanalname oben links, das Bild mittig darunter (unbeschnitten im Originalformat), der Text folgt darunter. */ .sw-progress { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; gap: 5px; padding: 12px 16px; } .sw-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; } .sw-seg .sw-fill { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; } .sw-seg.is-done .sw-fill { width: 100%; } .sw-seg.is-active .sw-fill { animation: swSegFill var(--sw-dur, 6s) linear forwards; } .sw-stage.is-paused .sw-seg.is-active .sw-fill { animation-play-state: paused; } @keyframes swSegFill { from { width: 0; } to { width: 100%; } } .sw-slides { position: absolute; inset: 0; } .sw-slide { position: absolute; inset: 0; z-index: 3; padding: 36px 18px 62px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateX(34px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.9,.3,1); pointer-events: none; } .sw-slide.is-on { opacity: 1; transform: none; pointer-events: auto; } .sw-slide.is-off { opacity: 0; transform: translateX(-34px); } /* Die geklonte Karte wird zur Folie: transparent, helle Schrift */ .sw-slide .sw-card { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: visible; background: none; border: none; box-shadow: none; border-radius: 0; color: var(--sw-stage-text); } .sw-slide .sw-card:focus-within { outline: none; } .sw-slide .sw-card-head { padding: 0; } .sw-slide .sw-name { font-size: 15px; } .sw-slide .sw-meta { color: rgba(242,243,247,.6); } .sw-slide .sw-plat-icon { width: 24px; height: 24px; color: #fff; } .sw-slide .sw-media { flex: none; align-self: center; min-height: 0; width: auto; max-width: 100%; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.5); } .sw-slide .sw-media img { width: auto; max-width: 100%; height: auto; max-height: 300px; margin: 0 auto; } @supports (container-type: size) { .sw-slide .sw-media img { max-height: 46cqh; } } .sw-slide .sw-body { padding: 0; font-size: 15.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .sw-slide .sw-body a { color: #8AB8FF; } .sw-hud { position: absolute; right: 14px; bottom: 12px; z-index: 6; display: flex; gap: 8px; } .sw-hud-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .12s; } .sw-hud-btn:hover { background: rgba(255,255,255,.18); transform: scale(1.06); } .sw-hud-btn:focus-visible { outline: 2px solid #8AB8FF; outline-offset: 2px; } .sw-hud-btn svg { width: 15px; height: 15px; } /* ---------- Mobil-Variante "deck": Karten-Stapel ---------- Bewusst schmaler als die Bühne: Der Stapel dahinter bleibt sichtbar, und links/rechts bleibt Platz, um am Bereich vorbeizuscrollen. */ .sw-deck { position: absolute; inset: 0; z-index: 3; } .sw-deck-card { position: absolute; left: 50%; top: 50%; width: min(230px, 64%); max-height: 80%; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.5); transition: transform .45s cubic-bezier(.22,.9,.3,1), opacity .3s; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .sw-deck-card.is-dragging { transition: none; cursor: grabbing; } .sw-deck-card .sw-card { border: none; border-radius: 0; box-shadow: none; cursor: inherit; } .sw-deck-card .sw-card:focus-within { outline: none; } .sw-deck-card img { pointer-events: none; } .sw-deck-card .sw-body { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Mobil-Variante "ticker": zwei gegenläufige Laufbänder ---------- */ .sw-stage-ticker { height: 300px; } .sw-ticker { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 20px; overflow: hidden; } .sw-lane { display: flex; gap: 16px; width: max-content; padding-right: 16px; animation: swLaneL 48s linear infinite; } .sw-lane-reverse { animation: swLaneR 60s linear infinite; } .sw-stage-ticker:hover .sw-lane { animation-play-state: paused; } @keyframes swLaneL { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes swLaneR { from { transform: translateX(-50%); } to { transform: translateX(0); } } .sw-mini { display: flex; align-items: center; gap: 10px; flex: none; width: 300px; max-width: 80vw; background: #fff; color: #1A1C22; border-radius: 12px; border-left: 4px solid var(--sw-pc, #888); padding: 10px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.35); cursor: pointer; } .sw-mini[data-platform="instagram"] { --sw-pc: #E1306C; } .sw-mini[data-platform="facebook"] { --sw-pc: #1877F2; } .sw-mini[data-platform="youtube"] { --sw-pc: #FF0000; } .sw-mini[data-platform="twitter"], .sw-mini[data-platform="x"] { --sw-pc: #71767B; } .sw-mini .sw-plat-icon { color: #0F1419; } .sw-mini-body { min-width: 0; } .sw-mini-name { font-size: 12.5px; font-weight: 750; } .sw-mini-text { font-size: 12px; color: #5C616B; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Bewegung reduzieren ---------- */ @media (prefers-reduced-motion: reduce) { .sw-mode-tiles .sw-card:has(.sw-media) { transition: none; } .sw-slide, .sw-blob, .sw-deck-card, .sw-chip, .sw-card { transition: none; } .sw-lane { animation: none; } .sw-seg.is-active .sw-fill { animation: none; width: 100%; } }