/* ============================================================================ PubliCore TV — DARK CYBER Theme (UI-THEME-DARK-CYBER) Eigenständiges Stylesheet (wird per Theme-Switcher gegen theme-classic.css / theme-cyberpunk.css AUSGETAUSCHT, nicht überlagert → muss vollständig sein). NEUES STANDARD-THEME: edler, augenschonender Dezent/High-Contrast-Kompromiss für den täglichen Langzeitgebrauch — ersetzt NICHT das alte "Cyberpunk"-Theme (bleibt als eigene, bewusst wählbare Option erhalten), sondern tritt als ruhigere Alternative daneben. Struktur 1:1 von theme-cyberpunk.css abgeleitet (gleiche Selektoren/Layout); nur die Farbpalette weicht ab: · Dominantes Lila in Menüs/Hintergründen/Sidebar-Surfaces → tiefes, sattes Anthrazit/Charcoal (kein reines Schwarz). · Sci-Fi-Gitter + schwebende FX-Partikel bleiben aktiv, nur farblich so abgetönt, dass sie sanft mit dem Anthrazit verschmelzen statt abzulenken. · Neon-Highlights (Pink/Gelb/Cyan/Grün) NUR noch als punktuelle Akzente: D-Pad-Fokus, Feature-Pills/Status-Badges (z. B. LIVE), primäre CTAs. Die frühere "--purple"-Familie (vorher überall als lauter Neon-Lila-Rand verwendet) ist hier ein gedämpfter, kühler Anthrazit-Grauton — sie bleibt strukturell (Modal-/Karten-Rahmen), ist aber nicht mehr "aufdringlich". Klassen werden weiterhin von core.js/settings.js getoggelt (.active / .focused / .hidden). ============================================================================ */ :root, body.theme-dark-cyber { --bg: #12141c; /* tiefes Anthrazit/Charcoal (kein reines Schwarz) */ --bg-sidebar-1: #161920; /* Sidebar-Verlauf, minimal heller Charcoal-Ton */ --bg-sidebar-2: #12141c; --bg-header: #14161e; --card: #181b24; /* Charcoal für Boxen/Modals */ --card-2: #1e222c; --border: #2c303c; /* kühler, dezenter Anthrazit-Rand (kein Lila mehr) */ --border-soft: #21242e; --text: #f2f4f8; /* nahezu reines Weiß — 3-Meter-Kontrastregel */ --text-dim: #b7bcc8; /* neutrales, kühles Hellgrau statt Neon-Lila */ --text-faint: #868c99; /* gedämpftes Kühlgrau */ --text-muted: #5a5f6c; /* dunkles Kühlgrau */ /* ── System-Ebene (PubliCore-eigene UI) — Fokus = NEON-GELB (Akzent) ── */ --sys-idle: #b7bcc8; /* unfokussierte System-Elemente/Ränder/Icons */ --sys-focus: #faff00; /* leuchtendes Neon-Gelb — fokussierte System-Elemente */ --sys-glow: 0 0 0 1px rgba(250,255,0,0.85), 0 0 22px rgba(250,255,0,0.55), 0 0 44px rgba(250,255,0,0.25); /* ── Dark-Cyber-Akzente (Pink / Cyan / Gelb — NUR punktuell) ── */ --neon-pink: #ff2bd6; --neon-cyan: #00eaff; --neon-yellow: #faff00; /* ── Frühere "Neon-Lila"-Plattformfarbe: jetzt ein gedämpfter, dezenter Anthrazit-Grauton für strukturelle Rahmen/Trennlinien (Modal-Border, Tab-Unterstreichung, Kalender-Datum etc.) — bewusst NICHT mehr neon. ── */ --purple: #4a5468; --purple-bright: #7a8296; --purple-deep: #2a2e38; --purple-950: #1b1e26; /* TASK-4 --bg-filter-bar entfernt (UI-80: Filter-/Hoster-Leisten sind jetzt transparent). */ --live: #ff2bd6; /* Live-Pille im Neon-Pink (punktueller Akzent) */ --live-accent: #00f0ff; /* §AP6: Logo-„LIVE" → pulsierendes Cyan */ --amber: #faff00; /* Akzent → Neon-Gelb */ --linked: #00eaff; /* „verknüpft" im Neon-Cyan */ /* Verlauf für Rahmen/Kacheln/Akzent-Titel: Pink→Elektrisch-Blau→Cyan — bleibt bewusst vivide (Akzent-Kontext, kein Hintergrund), nur ohne Lila-Mittelton. */ --neon-gradient: linear-gradient(135deg, #ff2bd6 0%, #00c2ff 50%, #00eaff 100%); } * { margin: 0; padding: 0; box-sizing: border-box; } html { height: 100%; background: #0d0f14; } body { width: 100%; height: 100%; overflow: hidden; /* FIXIERTER Dark-Cyber-Hintergrund: sehr dunkler Anthrazit-Verlauf + ein ganz feines, dezentes Grau/Cyan Linien-Raster (zwei 1px-Lineargradienten) — das Sci-Fi-Gitter bleibt aktiv, ist aber so abgetönt, dass es sanft mit dem Anthrazit verschmilzt statt abzulenken (UI-THEME-DARK-CYBER, Punkt 2). Alle Ebenen sind background-attachment: fixed → das Grid steht still, die Kacheln scrollen flüssig darüber und der Hintergrund reißt beim Nachladen nie ab. */ background-color: #0d0f14; background-image: linear-gradient(rgba(120, 130, 145, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 234, 255, 0.05) 1px, transparent 1px), radial-gradient(ellipse at 50% 38%, #181b22 0%, #0d0f14 55%, #08090c 100%); background-size: 46px 46px, 46px 46px, 100% 100%; background-position: center center; background-attachment: fixed; background-repeat: repeat, repeat, no-repeat; color: var(--text); font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.2px; -webkit-font-smoothing: antialiased; } #app { display: flex; width: 100vw; height: 100vh; /* BUG-MOBILE-SCROLL-PATREON: 100vh ist auf Mobil-Browsern GRÖSSER als der sichtbare Viewport (die ein-/ausblendbare Browser-Leiste wird nicht abgerechnet) → #app reicht unter die untere Chrome, die Unterkante des Scroll-Containers (.section, overflow-y:auto) liegt off-screen und die letzten Verknüpfungs-Zeilen (u. a. Patreon) sind unerreichbar. 100dvh = sichtbare, dynamische Viewport-Höhe behebt das; Progressive Enhancement, TV/alte WebViews ohne dvh-Support behalten den 100vh-Fallback. */ height: 100dvh; position: relative; z-index: 0; /* UI-113-Audit (Claudit): erzwingt einen eigenen Stacking-Context auf #app, damit das FX-Canvas (z-index:-1, siehe settings.js) zuverlaessig HINTER #content landet — #content ist selbst position:static (kein eigener Stacking-Context) und wuerde daher OHNE dieses z-index auf #app im GLEICHEN, root-nahen Context stehen wie das (positionierte!) Canvas; dort verlieren nicht-positionierte Geschwister IMMER gegen positionierte, unabhaengig von der DOM-Reihenfolge (CSS2.1 Anhang E, Schritt 3 vs. 6/7). */ background: transparent; /* fixiertes Raster + Verlauf scheinen durch das Grid */ } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ #sidebar { width: 248px; height: 100vh; background: linear-gradient(to bottom, var(--bg-sidebar-1), var(--bg-sidebar-2)); border-right: 1px solid rgba(30, 41, 59, 0.6); display: flex; flex-direction: column; flex-shrink: 0; } #sidebar-logo { height: 104px; /* exakt Header-Höhe → Unterkante bündig, keine "Treppe" */ box-sizing: border-box; display: flex; align-items: center; /* vertikal zentriert, auf einer Linie mit den Tabs */ font-size: 22px; font-weight: 800; letter-spacing: 3px; padding: 0 20px; /* nur horizontal — die Höhe steuert die Zentrierung */ /* §AP8 T1: KEINE Logo-Box-Unterkante mehr — sah nach Baukasten aus. Es bleiben nur die durchgehenden Haupt-Trennlinien (Sidebar↔Main = border-right, Navbar↔Main = #header border-bottom). Der Logo-Bereich verschmilzt nahtlos mit der Nav-Liste. */ } /* §AP6: Theme-aware Split-Screen-Monitor-Logo (ersetzt das alte Plate/Glyph-Emblem). Alle Knoten an Theme-Tokens gebunden — keine Hardcodes. */ /* §AP9 T2.2: Logo füllt die zugewiesene Kopf-Breite organisch aus (Wortmarke wächst mit, Icon etwas breiter im Landscape-Format). */ #sidebar-logo.pc-brand { gap: 13px; width: 100%; } /* §1.2 Logo vergrößert (füllt die Kopfzone) + currentColor-Hook: die TV-Schale erbt die Theme-Textfarbe über `color`, sodass das Logo zwischen Standard/Cyberpunk dynamisch mitfärbt (Play=--sys-focus, LIVE=--live-accent bleiben Akzent-Tokens). */ .pc-brand-icon { width: 68px; height: 54px; flex-shrink: 0; color: var(--text-main, var(--text, #f1f5f9)); } .pc-tv-shell { stroke: currentColor; fill: none; } .pc-tv-foot { fill: currentColor; } .pc-tv-divider { stroke: currentColor; opacity: 0.4; } /* UI-LOGO: "Publi" ist neutral (var(--text-main), entspricht dem Referenz-Weiss auf Dunkelgrund und bleibt auf hellen Themes lesbar) — NUR "Core" trägt die Akzentfarbe des aktiven Themes (vorher UI-119: "Publi" = Primärfarbe/neon-pink). */ .pc-brand-word { font-size: 30px; font-weight: 800; color: var(--text-main, var(--text, #f1f5f9)); letter-spacing: -0.7px; line-height: 1; text-transform: none; white-space: nowrap; } .pc-brand-core { color: var(--neon-cyan, #00eaff); font-weight: 300; } /* §AP6 / §WCAG: Rechtlicher Micro-Footer — 11px, kontraststark (≥4.5:1, DDG). §AP8 T4: margin-top:auto verankert die Fuß-Gruppe (Legal → Build) am unteren Rand (der Toggle schwebt im Ausgeklappt-Modus absolut und zählt nicht mehr im Flow). */ /* §UIFIX T1.2: untere Legal-Links (u. a. „Nutzungsbedingungen") wurden vom Bottom-Bar-Layer ~50% vertikal beschnitten → padding-bottom +15px hebt sie sauber über die untere Leiste; zusätzlich safe-area-inset für Geräte mit Home-Indicator. */ /* §M3: Viewport-Umschalter direkt über den Rechts-Links. margin-top:auto trägt der Footer-Block (sidebar-legal) → der Umschalter sitzt unmittelbar darüber. */ .sidebar-viewport { display: flex; flex-direction: column; gap: 2px; padding: 6px 20px 2px; margin-top: auto; } .sidebar-viewport + .sidebar-legal { margin-top: 4px; } .sidebar-legal { display: flex; flex-direction: column; gap: 2px; padding: 6px 20px calc(19px + env(safe-area-inset-bottom, 0px)); margin-top: auto; } /* Sidebar footer legal + viewport links — compliant default contrast, neon hover. */ .sidebar-legal a, .sidebar-legal-link, .sidebar-viewport .viewport-btn { font-size: 11px; line-height: 1.55; text-decoration: none; color: #b5b5ba; opacity: 1; transition: color .18s ease, text-decoration-color .18s ease; } .viewport-btn { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-weight: 400; } .viewport-btn:hover, .viewport-btn:focus, .sidebar-legal a:hover, .sidebar-legal a:focus, .sidebar-legal-link:hover, .sidebar-legal-link:focus { color: var(--neon-cyan, #00eaff); text-decoration: underline; text-decoration-color: currentColor; outline: none; } /* UI-112: D-Pad/Tastatur-Fokus (.focused, gesetzt von App.updateNavFocus) auf den neu erreichbaren Sidebar-Footer-Elementen — sichtbarer Ring statt nur Farbwechsel, damit der Fokus auch auf 3 m TV-Betrachtungsabstand eindeutig erkennbar bleibt. */ .viewport-btn.focused, .sidebar-legal-link.focused { color: var(--neon-cyan, #00eaff); text-decoration: underline; text-decoration-color: currentColor; outline: 2px solid var(--neon-cyan, #00eaff); outline-offset: 3px; border-radius: 3px; } body.sidebar-collapsed .sidebar-viewport { display: none; } /* §AP8 T3: Schwebender Kanten-Toggle — Kind von #app, nicht von #sidebar (Mobile-safe). */ .sidebar-toggle { position: absolute; top: 50%; left: 248px; transform: translate(-50%, -50%); z-index: 60; display: flex; align-items: center; justify-content: center; gap: 0; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; background: var(--bg-sidebar-2, #14101f); color: var(--text-dim, #b7bcc8); border: 1px solid var(--card-border, rgba(255,255,255,0.18)); box-shadow: 0 2px 12px rgba(0,0,0,0.45); transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease, left .22s ease; } body.sidebar-collapsed .sidebar-toggle { left: 64px; } .sidebar-toggle .sidebar-toggle-ic, .sidebar-toggle .sidebar-toggle-label { pointer-events: none; } .sidebar-toggle:hover { color: var(--sys-focus); border-color: var(--sys-focus); } body:not(.app-phone) .sidebar-toggle:hover { transform: translate(-50%, -50%) scale(1.08); } /* UI-112: D-Pad/Tastatur-Fokus — Einklapp-Pfeil ist jetzt Teil der Sidebar-Fokus-Kette. */ .sidebar-toggle.focused { color: var(--sys-focus); border-color: var(--sys-focus); box-shadow: 0 0 0 3px var(--neon-cyan, #00eaff), 0 2px 12px rgba(0, 0, 0, 0.45); } .sidebar-toggle .sidebar-toggle-ic { display: inline-flex; } .sidebar-toggle .sidebar-toggle-ic svg { width: 18px; height: 18px; display: block; transition: transform .2s ease; } .sidebar-toggle .sidebar-toggle-label { display: none; } /* schwebendes Icon = ohne Label */ /* §AP10 T2.1: Toggle ist jetzt ein GLOBALES Convenience-Feature — auf ALLEN Geräten (Desktop, Mobile, TV) sichtbar. Auf Mobile schwebt er an der Drawer-Kante (sichtbar, sobald die Sidebar offen ist); kein Geräte-Ausschluss mehr. */ body.app-phone.sidebar-collapsed #sidebar { width: 64px; } /* §AP6: Icon-Only-Collapse. Die Flex-Shell (#app) schirmt #content automatisch ab: #sidebar flex-shrink:0 @64px, #content flex:1 füllt den Rest → 100% sichtbar/frei. */ /* §AP8 T3: position:relative + erhöhter z-index + overflow:visible, damit der schwebende Toggle-Button zur Hälfte über die Sidebar-Kante in den Main-Content ragen darf (ohne von #content verdeckt zu werden). */ #sidebar { transition: width .22s ease; position: relative; z-index: 30; overflow: visible; } body.sidebar-collapsed #sidebar { width: 64px; } body.sidebar-collapsed #sidebar-logo { padding: 0; justify-content: center; gap: 0; /* UI-27: Pin logo container to the exact 64 px icon-rail width so the SVG cannot overflow the collapsed sidebar edge. */ max-width: 64px; width: 64px; overflow: hidden; } body.sidebar-collapsed .pc-brand-word { display: none; } body.sidebar-collapsed .pc-brand-icon { width: 34px; height: 28px; } body.sidebar-collapsed #nav-list { padding: 14px 8px; } body.sidebar-collapsed .nav-item { justify-content: center; padding: 13px 0; } body.sidebar-collapsed .nav-icon { margin-right: 0; } /* UI-86 v2: `.nav-item.active::after`-Leuchtstrich entfernt (siehe unten bei `.nav-item`) — diese Unterdrückungsregel wäre jetzt tote Fracht. */ body.sidebar-collapsed .nav-label, body.sidebar-collapsed #sidebar-build, body.sidebar-collapsed .sidebar-legal, body.sidebar-collapsed .sidebar-toggle-label { display: none; } /* §AP9 T2.1: Der Toggle bleibt STATIONÄR. Auch im eingeklappten Zustand schwebt er an EXAKT derselben fixen Position (mittig auf der Sidebar-Kante, top:50%) — KEIN Wechsel in den Footer, KEIN vertikaler Sprung. Nur der Pfeil dreht (zeigt nach rechts = ausklappen). Die schwebende Grund-Geometrie aus .sidebar-toggle gilt unverändert weiter. */ body.sidebar-collapsed .sidebar-toggle .sidebar-toggle-ic svg { transform: rotate(180deg); } #nav-list { list-style: none; padding: 14px 10px; flex: 1; } /* UI-86 v2: border-radius 12px → 999px (globales Pillen-Design). Im eingeklappten Zustand (body.sidebar-collapsed, quadratisches Icon-only-Padding) rendert das automatisch als Kreis — passt ohne Zusatzregeln. */ .nav-item { display: flex; align-items: center; padding: 13px 14px; margin-bottom: 3px; cursor: pointer; border: 1px solid transparent; border-radius: 999px; color: var(--text-dim); transition: transform 0.15s, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* BUG-12: #nav-remote element fully removed from DOM — CSS rules excised. */ body:not(.kbd-active) .nav-item:hover { background: linear-gradient(to right, rgba(74, 84, 104, 0.18), rgba(0, 234, 255, 0.05)); color: #ffffff; border-color: rgba(74, 84, 104, 0.55); } /* UI-86 v2: aktive Seite jetzt mit klarem Akzent-Feedback — gefüllte Pille wie .pc-pill.active/.sc-bubble.active/.settings-tab.active, ersetzt die vorherige dezente Lila/Cyan-Transparenz-Tönung. Ersetzt außerdem den separaten ::after- Leuchtstrich (jetzt redundant neben der vollen Akzentfüllung). */ .nav-item.active { background: var(--sys-focus); border-color: var(--sys-focus); color: #12131a; } /* Tastatur-Fokus (Fernbedienung) — reines Weiß + dezenter weißer Glow, nur transform animiert */ .nav-item.focused { background: linear-gradient(to right, rgba(255, 255, 255, 0.14), rgba(148, 163, 184, 0.06)); color: var(--sys-focus); border-color: var(--sys-focus); box-shadow: var(--sys-glow), 0 8px 24px rgba(0, 0, 0, 0.4); transform: translateZ(0); /* eigene GPU-Ebene → ruckelfreies Atmen */ will-change: box-shadow; animation: breathe-sys-nav 2.8s ease-in-out infinite; } /* UI-86 v2: D-Pad-Fokus landet oft GENAU auf der gerade offenen Seite. Eigene, spezifischere Regel (3 Klassen statt 2) gewinnt garantiert gegen `.nav-item. focused` allein — Akzent-Fill bleibt erhalten, zusätzlicher Halo-Ring zeigt trotzdem eindeutig, wo der Cursor gerade sitzt. */ .nav-item.active.focused { background: var(--sys-focus); color: #12131a; border-color: var(--sys-focus); box-shadow: var(--sys-glow), 0 0 0 2px var(--bg, #0a0a0f), 0 8px 24px rgba(0, 0, 0, 0.4); } .nav-icon { width: 28px; height: 28px; margin-right: 15px; /* ersetzt flex-gap (Chromium < M84) */ flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--sys-idle); /* unfokussiert: silbergraues Slate */ transition: color 0.18s ease, filter 0.18s ease; } .nav-icon svg { width: 23px; height: 23px; display: block; /* stroke="currentColor" → erbt die Icon-Farbe (Theme-konform) */ } /* Hover: heller, mit dezentem Glow (nur wenn NICHT gleichzeitig aktiv — siehe unten) */ body:not(.kbd-active) .nav-item:hover .nav-icon { color: var(--neon-cyan); filter: drop-shadow(0 0 5px rgba(0, 234, 255, 0.45)); } /* UI-86 v2: aktive Seite → dunkles Icon auf der akzentgefüllten Pille (Kontrast). */ .nav-item.active .nav-icon { color: #12131a; filter: none; } /* Fernbedienungs-Fokus: reines PubliCore-Weiß, homogen mitleuchtend (atmet mit) */ .nav-item.focused .nav-icon { color: var(--sys-focus); filter: drop-shadow(0 0 6px rgba(250, 255, 0, 0.65)) drop-shadow(0 0 14px rgba(250, 255, 0, 0.32)); animation: breathe-icon 2.8s ease-in-out infinite; } /* UI-86 v2: höhere Spezifität (3 Klassen) gewinnt garantiert gegen `.focused` allein — Icon bleibt dunkel/lesbar auf der Akzentfüllung, auch wenn der D-Pad-Cursor gerade auf der aktiven Seite steht. */ .nav-item.active.focused .nav-icon { color: #12131a; filter: none; animation: none; } @keyframes breathe-icon { 0%, 100% { filter: drop-shadow(0 0 5px rgba(250,255,0,0.50)) drop-shadow(0 0 11px rgba(250,255,0,0.24)); } 50% { filter: drop-shadow(0 0 8px rgba(250,255,0,0.85)) drop-shadow(0 0 18px rgba(250,255,0,0.45)); } } /* Kein eigenes `color` — erbt von `.nav-item`, folgt also automatisch dessen Aktiv-/Fokus-Zustand (dunkler Text auf der akzentgefüllten Pille etc.). */ .nav-label { font-size: 18px; font-weight: 600; letter-spacing: 0.3px; } /* UI-86 v2: der frühere ::after-Leuchtstrich rechts ist entfallen — die jetzt voll akzentgefüllte Pille signalisiert „aktive Seite" bereits eindeutig, ein zusätzlicher Balken wäre nur noch dekoratives Rauschen (und keines der Geschwister-Pillen-Komponenten .pc-pill/.sc-bubble/.settings-tab hat eines). */ /* ── Main / Header ───────────────────────────────────────────────────────── */ #content { flex: 1; display: flex; flex-direction: column; overflow: hidden; } #header { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 40px; height: 104px; background: var(--bg-header); border-bottom: 1px solid var(--border); flex-shrink: 0; } #search-bar { display: flex; align-items: center; background: rgba(15, 23, 42, 0.6); /* §M4.1: sichtbarer Kontrast gegen das dunkle Canvas (vorher fast unsichtbares rgba(30,41,59,.7)). Im echten Header gewinnt ohnehin die themed Neon-Border. */ border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; padding: 9px 22px; margin-bottom: 12px; color: var(--text-faint); font-size: 15px; width: 560px; transition: transform 0.15s; } .search-icon { margin-right: 10px; } #search-bar.focused { border-color: var(--sys-focus); color: #ffffff; box-shadow: var(--sys-glow); transform: translateZ(0); will-change: box-shadow; animation: breathe-sys 2.6s ease-in-out infinite; } #filter-tabs, #search-filter-tabs { display: flex; } .filter-tab { background: transparent; color: var(--sys-idle); border: 1px solid rgba(148, 163, 184, 0.35); padding: 9px 28px; margin-right: 0; font-size: 14px; font-weight: 600; font-family: monospace; border-radius: 999px; cursor: pointer; transition: transform 0.15s; } body:not(.kbd-active) .filter-tab:hover { color: var(--text); border-color: var(--sys-idle); } .filter-tab.active { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.55); color: #ffffff; font-weight: 700; } .filter-tab.focused { border-color: var(--sys-focus); color: var(--sys-focus); box-shadow: var(--sys-glow); transform: translateZ(0); will-change: box-shadow; animation: breathe-sys 2.6s ease-in-out infinite; } /* BUG-CATEGORIES-SEARCH-GEO-CONTRAST (Bug 2): Kategorien-Treffer-Chips auf der Suche-Seite — bewusst dasselbe Idle/Hover/Focused-Muster wie .filter-tab oben (kein neuer "Active"-Zustand, daher kein Bug-3-artiges Kontrastrisiko). */ #search-cat-matches.hidden { display: none; } #search-cat-matches { margin: 10px 0 4px; } .search-cat-matches-label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .search-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; } .search-cat-chip { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--text); border: 1px solid rgba(148, 163, 184, 0.35); padding: 9px 20px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; font-family: monospace; transition: transform 0.15s; } .search-cat-chip-emoji { font-size: 16px; line-height: 1; } body:not(.kbd-active) .search-cat-chip:hover { color: var(--text); border-color: var(--sys-idle); } .search-cat-chip.focused { border-color: var(--sys-focus); color: var(--sys-focus); box-shadow: var(--sys-glow); transform: translateZ(0); will-change: box-shadow; animation: breathe-sys 2.6s ease-in-out infinite; } body.app-phone .search-cat-chip { padding: 10px 18px; font-size: 14px; } body.nav-settings #filter-tabs, body.nav-search #filter-tabs { visibility: hidden; pointer-events: none; } /* ── Sections ────────────────────────────────────────────────────────────── */ .section { display: none; flex: 1; min-height: 0; /* flex-getrieben statt fixer Header-Höhe (Zwei-Reihen-Header) */ overflow-y: auto; padding: 30px 40px 48px; scroll-behavior: smooth; } .section.active { display: block; } /* ── Desktop-Web: zentrierter Inhaltscontainer (max. 1440px) ──────────────── Auf breiten PC-Monitoren NICHT randlos strecken: jede Section bekommt eine feste Maximalbreite und wird mittig gesetzt → saubere Außenränder links/ rechts. Greift NUR im echten Desktop-Browser (body.app-desktop); TV bleibt randlos, das Handy-Layout bleibt unberührt. */ body.app-desktop .section { max-width: 1440px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; } /* Der Zwei-Reihen-Header (Suche/Tabs/Glocke) folgt derselben Breite, damit Suchleiste und Grid bündig untereinander stehen. */ body.app-desktop #header { max-width: 1440px; width: 100%; margin-left: auto; margin-right: auto; } .section-title { font-size: 12px; font-weight: 700; font-family: monospace; color: var(--text-dim); margin-bottom: 22px; letter-spacing: 3px; text-transform: uppercase; position: relative; padding-bottom: 14px; border-bottom: 1px solid rgba(30, 41, 59, 0.5); } /* ── Video-Grid ──────────────────────────────────────────────────────────── */ .video-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; grid-gap: 14px; /* UI-74: Alias für Chromium < M84 */ gap: 14px; /* UI-REDESIGN Phase 3: Mockup-Kachel-Abstand (war 0) */ padding-bottom: 60px; /* Luft, damit die unterste Reihe (inkl. Glow) nie abschneidet */ } /* ── Video-Card ──────────────────────────────────────────────────────────── */ .video-card { border-radius: 14px; overflow: hidden; /* UI-REDESIGN Phase 3 (User 2026-07-18): Mockup-Kachel — hoster-farbener Rahmen (--card-glow = native Plattformfarbe je Kachel) statt fixem Neon-Verlauf, 14px- Radius + weicher Schatten. Multi-Hoster behält den Zwei-Farben-Verlauf (.card-multi). Fokus/Hover verstärkt weiterhin denselben --card-glow. */ border: 1.5px solid var(--card-glow, var(--border, #2c303c)); background: var(--card-2); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); cursor: pointer; display: flex; flex-direction: column; /* nur transform animieren (GPU) — kein per-Frame-Repaint auf TV-SoCs */ transition: transform 0.18s, box-shadow 0.18s; } body:not(.kbd-active) .video-card:not(.ad-card):hover, .video-card:not(.ad-card).focused { transform: translateY(-3px) scale(1.015); outline: none; } /* Fokus strahlt EINHEITLICH in Neon-Gelb (plattformunabhängig). */ .video-card:not(.ad-card).focused { will-change: box-shadow; animation: breathe-neon-card 2.8s ease-in-out infinite; } /* Werbe-/Spotlight-Platzhalter */ .ad-card { border-style: dashed; border-color: rgba(245, 158, 11, 0.3); background: rgba(120, 53, 15, 0.12); } .ad-card-sponsored { cursor: pointer; } .ad-card-img { width: 100%; height: 100%; object-fit: cover; display: block; } .ad-card-thumb { position: relative; overflow: hidden; } /* FEAT-AD-FLOOR-PRICE-01 (Phase 1.5): AdSense-Fallback-Slot füllt denselben 16:9-Thumbnail-Rahmen wie ein normaler Ad-Card-Thumb (s. .card-thumbnail). */ .ad-card-adsense-unit { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .ad-card-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; background: rgba(255, 159, 0, 0.92); color: #111; padding: 3px 8px; border-radius: 999px; } .ad-card-fallback-ic { font-size: 42px; opacity: 0.85; display: flex; align-items: center; justify-content: center; height: 100%; } .ad-card-sponsor { font-size: 12px; color: var(--text-faint); margin-top: 4px; } .pd-reco-ad-img { width: 100%; height: 100%; object-fit: cover; display: block; } .ad-qr-box { max-width: 720px; padding: 56px 64px; } .ad-qr-box h2 { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.45; max-width: 520px; } .ad-qr-img { width: 280px; height: 280px; display: block; background: #fff; padding: 12px; border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); } .ad-qr-sub { font-size: 15px; color: var(--text-faint); } .ad-qr-close { margin-top: 8px; padding: 12px 28px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: #fff; font-weight: 700; cursor: pointer; } .ad-qr-close:focus, .ad-qr-close.focused { outline: 2px solid var(--sys-focus); } .ad-card.focused { border-style: solid; border-color: #ff8c00; transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.85), 0 0 26px 5px rgba(255, 140, 0, 0.60), 0 0 60px 16px rgba(255, 140, 0, 0.28), 0 0 110px 36px rgba(255, 140, 0, 0.12); will-change: box-shadow; animation: breathe-ad 2.8s ease-in-out infinite; } /* ── Plattform-spezifischer Cursor-Glow bei Fokus ───────────────────────────── Rahmen bleibt (in Plattformfarbe), dahinter ein fetter, nach außen ausfadender Box-Shadow-Schein. Mehrlagig = "Fade-Out"-Optik ohne Animation (TV-SoC-schonend). Stehen NACH der Basisregel → überschreiben deren box-shadow bei gleicher Spezifität, der translateY/scale-Lift aus der Basisregel bleibt erhalten. */ /* T5: Marken-spezifischer Fokus-/Hover-Glow (themeübergreifend). Jede Kachel trägt ihre native Plattformfarbe als --card-glow (Twitch=Lila, YouTube=Rot, Kick=Neon- grün, Dailymotion=Blau …). Statischer mehrlagiger Schein → ersetzt den einheitlichen Neon-Puls; TV-SoC-schonend (kein per-Frame-Repaint). */ .video-card:not(.ad-card).focused, body:not(.kbd-active) .video-card:not(.ad-card):hover { animation: none; border-color: var(--card-glow, var(--sys-focus)); box-shadow: 0 0 0 2px var(--card-glow, var(--sys-focus)), 0 0 22px 2px var(--card-glow, var(--sys-focus)), 0 0 52px 12px var(--card-glow, var(--sys-focus)); } .card-thumbnail { width: 100%; height: 0; padding-top: 56.25%; /* 16:9 Fallback statt aspect-ratio (Chromium < M88) */ position: relative; overflow: hidden; font-size: 40px; } @supports (aspect-ratio: 1 / 1) { .card-thumbnail { height: auto; padding-top: 0; aspect-ratio: 16 / 9; } } .card-thumbnail > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.25; } .card-badge { position: absolute; font-size: 11px; font-weight: 800; padding: 3px 9px; letter-spacing: 0.4px; } /* LIVE: rote Pille unten-rechts mit pulsierendem Punkt (wie Referenz) */ .badge-live { bottom: 10px; right: 10px; top: auto; left: auto; background: var(--live); color: #fff; border-radius: 999px; box-shadow: 0 4px 12px rgba(127, 29, 29, 0.5); display: inline-flex; align-items: center; } /* VOD-Badge dezent oben-links */ .badge-vod { top: 10px; left: 10px; background: rgba(0, 0, 0, 0.7); color: var(--text-dim); border-radius: 6px; font-family: monospace; font-weight: 700; } .section[data-filter="live"] .badge-live, .section[data-filter="vod"] .badge-vod { display: none; } .card-duration { position: absolute; bottom: 10px; right: 10px; font-size: 12px; font-weight: 700; padding: 3px 8px; background: rgba(0, 0, 0, 0.8); border-radius: 5px; font-family: monospace; color: #e2e8f0; } .card-body { padding: 12px 14px 14px; /* UI-CARD-META-LAYOUT-CHAT-HEIGHT: echte FESTE Höhe statt min-height+height:auto. Root Cause des "Textblock klebt oben"-Bugs: seit UI-81 hängt die vertikale Zentrierung von .card-creator an "margin: auto 0 !important" (ui-auth74-73.css) — Auto-Margins verteilen sich nur, wenn tatsächlich FREIRAUM übrig ist. Weil .card-body hier aber height:auto trug (alter Task-3-Fix gegen Clipping bei starrem height:104px), wuchs die Box exakt auf die Summe von Titel+Creator+ Meta OHNE jeden Rest — die Auto-Margins hatten live gemessen buchstäblich 0px zu verteilen (Creator landete direkt unter dem Titel statt mittig, Meta-Zeile klebte am Titel). 140px deckt den schlimmsten real gemessenen Fall (Live-Karte mit 2-zeilig umbrechender Creator-Zeile: 130.5px Inhalt) mit sichtbarem Zentrier-Spielraum ab, ohne die alte Task-3-Clipping-Regression zurückzubringen. overflow:hidden bleibt als Sicherheitsnetz für Extremfälle. */ height: 140px; flex: none; display: flex; flex-direction: column; overflow: hidden; } .card-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* (Task 3) IMMER 2 Zeilen reservieren — 1-zeilige Titel lassen die 2. Zeile als Leerraum stehen, damit Creator/Meta darunter pixelgenau ausgerichtet bleiben. */ min-height: 2.7em; max-height: 2.7em; word-break: break-word; } .card-creator { /* §M2.3/2.4: Creator sitzt – getrennt vom 2-Zeilen-Titel – als erste der beiden gestapelten Boden-Zeilen. margin-top:auto schiebt den Block nach unten (Titel bleibt fix oben → kein Hochrutschen bei 1-zeiligem Titel); margin-bottom trennt ihn sauber von der Metrik-Zeile und gibt Luft (nie an den Titel „geklebt"). */ margin-top: auto; margin-bottom: 5px; font-size: 14px; font-family: monospace; color: #d4d4d8; display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .logo-slot { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .logo-slot img { max-width: 100%; max-height: 100%; object-fit: contain; vertical-align: middle; } .logo-slot-sm { width: 18px; height: 18px; margin-right: 7px; flex-shrink: 0; } .logo-slot-lg { width: 96px; height: 32px; } .logo-slot.dimmed { opacity: 0.3; } /* (Task 3) Baseline-verankerte Meta-Zeile (Row 3). Feste Höhe → alle Karten gleich hoch. VOD = Split-Flex (Aufrufe links, Upload-Alter rechts); LIVE = einzeilig. */ .card-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; height: 21px; margin-top: 6px; overflow: hidden; } /* UI-101: line-height > font-size, damit Unterlängen (g/y/p/q/j) nicht durch das overflow:hidden von .card-meta-row abgeschnitten werden. */ .card-views { font-size: 13px; line-height: 21px; font-family: monospace; color: var(--text-faint); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Upload-Alter rechts (z. B. "vor 3 Tagen") */ .card-uploaded { font-size: 12px; line-height: 21px; font-family: monospace; color: var(--text-muted); flex: 0 0 auto; white-space: nowrap; } /* §M2.2: Live-Zuschauerzeile nutzt exakt dieselbe Typo-Metrik wie .card-views (VOD). */ .card-viewers-live { font-size: 13px; font-family: monospace; font-weight: normal; line-height: 21px; color: #ff4444; white-space: nowrap; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin: 0; letter-spacing: normal; text-shadow: none; } .card-platform-icon, .card-creator .logo-slot.card-platform-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; padding: 0; margin: 0; border: none; background: none; border-radius: 0; gap: 0; max-width: none; } .card-platform-icon img, .card-creator .logo-slot.card-platform-icon img { width: 100%; height: 100%; min-width: 100%; min-height: 100%; object-fit: contain; margin: 0; padding: 0; display: block; } .card-platform-bubble { display: inline-flex; align-items: center; gap: 0; padding: 0; border-radius: 0; background: none; border: none; max-width: none; } .card-platform-bubble-tx { display: none !important; } .card-creator { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .card-live-uptime { color: var(--text-dim, #b7bcc8); font-weight: 600; font-size: 12px; margin-left: 10px; white-space: nowrap; } /* Creator-Name darf nie abgeschnitten werden: eigener Flex-Slot mit Ellipsis. */ .card-creator-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Likes auf eigener, sauberer Zeile unter Titel/Creator (mit Herz-Icon). */ .card-likes { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; font-family: monospace; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-like-icon { flex-shrink: 0; color: #ff5c8a; } .card-meta-duration { font-size: 11px; color: var(--text-muted); font-family: monospace; white-space: nowrap; flex-shrink: 0; } /* ── Suche ───────────────────────────────────────────────────────────────── */ /* Suchleiste + Filter-Tabs zentriert auf Tastaturbreite (820px) → symmetrisches Layout */ #search-input-row { display: flex; align-items: center; justify-content: center; padding: 14px 0 8px; max-width: 820px; margin: 0 auto; } .search-icon-lg { font-size: 24px; margin-right: 12px; flex-shrink: 0; } #search-input { flex: 1; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 12px; color: #ffffff; font-size: 18px; padding: 12px 18px; outline: none; max-width: 680px; transition: border-color 0.15s; } /* :focus (Browser) und .focused (gemanagter TV-Fokus) → reines Weiß + Glow */ #search-input:focus, #search-input.focused { border-color: var(--sys-focus); box-shadow: var(--sys-glow); transform: translateZ(0); will-change: box-shadow; animation: breathe-sys 2.6s ease-in-out infinite; } #search-filter-tabs { justify-content: center; padding: 8px 0 16px; max-width: 820px; margin: 0 auto; } /* ── Empty State ─────────────────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 40px; text-align: center; width: 100%; grid-column: 1 / -1; /* im Grid über ALLE Spalten spannen → horizontal zentriert */ } .empty-icon { font-size: 52px; margin-bottom: 14px; opacity: 0.7; } .empty-state p { font-size: 17px; color: var(--text-dim); margin-bottom: 6px; } .empty-hint { font-size: 14px !important; color: var(--text-muted) !important; max-width: 420px; line-height: 1.6; } /* UI-93 Extension: Empty-Grid Filter-Shield-Karte (App.FilterShield). Ersetzt im Startseiten-Grid den generischen Leerzustand, wenn der Mature-Filter alle Karten entfernt hat. Der „Filter verwalten"-Button ist per D-Pad erreichbar (eigener st.area === 'filter-shield'-Abfang). Button-Regel bewusst descendant-scoped (.pc-empty-filter-card .pc-filter-shield-btn = Spezifität 0,2,0), damit die generische .platform-btn (0,1,0, später im Quelltext) den Fill NICHT übersteuert — dieselbe Spezifitätsfalle wie im UI-93-Deny-Button-Fund (Abschnitt B/C), hier von vornherein vermieden. */ .pc-empty-filter-card { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 72px 40px; max-width: 560px; margin: 0 auto; } .pc-empty-filter-icon-wrap { color: var(--sys-focus, #faff00); line-height: 0; } .pc-empty-filter-icon { width: 56px; height: 56px; opacity: 0.9; } .pc-empty-filter-text { font-size: 17px; color: var(--text-dim); line-height: 1.6; margin: 0; max-width: 440px; } .pc-empty-filter-card .pc-filter-shield-btn { padding: 12px 28px; border-radius: 10px; font-size: 15px; font-weight: 800; cursor: pointer; background: rgba(250,255,0,0.08); border: 1px solid rgba(250,255,0,0.5); color: var(--sys-focus, #faff00); transition: box-shadow .15s ease, transform .15s ease, background .15s ease, color .15s ease; } .pc-empty-filter-card .pc-filter-shield-btn.focused, .pc-empty-filter-card .pc-filter-shield-btn:focus { outline: none; background: var(--sys-focus, #faff00); border-color: #c8b800; color: #12131a; box-shadow: var(--sys-glow); transform: scale(1.05); } /* LOG-B4: Beta-Login-Wall (Startseite/Trends für Gäste) Fixed full-screen overlay: covers sidebar + content on both desktop and mobile. Solid opaque background prevents any bleed-through from the app behind it. */ .login-wall { position: relative; min-height: 70vh; grid-column: 1 / -1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent !important; background-image: none !important; padding: 40px 20px 24px; box-sizing: border-box; text-align: center; } .login-wall-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 520px; flex: 1 0 auto; justify-content: center; background: transparent; border: none; box-shadow: none; padding: 0; } .login-wall-icon { font-size: 54px; margin-bottom: 8px; filter: drop-shadow(0 0 14px var(--sys-focus, #faff00)); } .login-wall-title { font-size: 24px; font-weight: 800; margin: 0 0 6px; color: var(--text, #f2f4f8); } .login-wall-body { font-size: 16px; color: var(--text-dim, #b7bcc8); max-width: 460px; line-height: 1.6; margin: 0 0 22px; } .login-wall-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .login-wall-btn { padding: 12px 26px; border-radius: 999px; border: none; cursor: pointer; font-size: 15px; font-weight: 700; color: #fff; transition: filter .15s ease, transform .1s ease; } .login-wall-btn:hover { filter: brightness(1.12); transform: translateY(-1px); } .login-wall-btn:disabled, .login-wall-oauth .oauth-brand-btn:disabled, .login-wall-oauth .oauth-brand-btn.legal-gate-blocked { opacity: 0.42 !important; filter: grayscale(1); cursor: not-allowed !important; pointer-events: none !important; transform: none !important; box-shadow: none !important; } .login-wall-btn:disabled:hover { filter: grayscale(1); transform: none; } .login-wall-btn.lw-twitch { background: #9146ff; } .login-wall-btn.lw-youtube { background: #ff0000; } .login-wall-link { margin-top: 18px; background: none; border: none; cursor: pointer; color: var(--sys-focus, #faff00); font-size: 14px; text-decoration: underline; padding: 6px; } /* Login-wall legal consent checkbox gate — UI-72 centered inline flow */ .login-wall-legal-gate { display: block; max-width: 460px; width: 100%; margin: 0 auto 18px; cursor: pointer; text-align: center; } .login-wall-legal-gate.hidden { display: none !important; } .login-wall-legal-chk { display: inline-block; vertical-align: middle; margin-right: 6px; position: relative; top: -1px; width: 18px; height: 18px; accent-color: var(--sys-focus, #4a5468); cursor: pointer; pointer-events: auto; } .login-wall-legal-chk-label { display: inline; font-size: 13px; line-height: 1.5; color: var(--text-dim, #b7bcc8); text-align: center; } /* Settings account linking legal gate */ .settings-legal-gate { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0 0 14px; background: var(--card-2, rgba(255,255,255,0.04)); border: 1px solid var(--purple, #4a5468); border-radius: 10px; cursor: pointer; } .settings-legal-gate.hidden { display: none !important; } /* UI-92: AGB Post-Approval Privacy Fade Gate — full-screen blocking overlay shown until App.LegalBinding.accept() fires; hideGate() adds .pc-gate-hidden, and a matching ES5 setTimeout (see core.js) hard-removes the node from the DOM only AFTER this exact transition duration elapses (no leftover invisible TV layer). */ .pc-fade-gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg, #06010f); background-color: rgba(6, 1, 15, 0.82); opacity: 1; transition: opacity .6s ease-in-out; } .pc-fade-gate.pc-gate-hidden { opacity: 0; pointer-events: none; } .pc-fade-gate-box { width: min(440px, 100%); background: var(--card-2, rgba(20,8,40,0.6)); border: 1px solid var(--card-border, var(--sys-focus, #faff00)); border-radius: 16px; padding: 26px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); text-align: center; } .pc-fade-gate-title { margin: 0 0 10px; font-size: 19px; font-weight: 800; color: var(--text-main, #f2f4f8); } .pc-fade-gate-body { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--text-dim, #b7bcc8); } .pc-fade-gate-links { display: flex; gap: 16px; justify-content: center; margin: 0 0 18px; } .pc-fade-gate-links a { font-size: 12.5px; font-weight: 600; color: var(--text-dim, #b7bcc8); cursor: pointer; text-decoration: underline; } .pc-fade-gate-btn { padding: 12px 28px; border-radius: 999px; font-size: 15px; font-weight: 800; cursor: pointer; border: 1px solid #c8b800; background: var(--sys-focus, #faff00); color: #12131a; } /* Cloufix (UI-92 Abschnitt C): sichtbares D-Pad-Fokus-Highlight — btn.focus() in core.js setzte bislang keine erkennbare Änderung, weil kein :focus/.focused- Paar existierte (Projekt-Konvention siehe .nav-item.focused, #search-input.focused). */ .pc-fade-gate-btn:focus, .pc-fade-gate-btn.focused { outline: 2px solid var(--sys-focus, #faff00); outline-offset: 3px; box-shadow: var(--sys-glow); transform: scale(1.06); } /* FEAT-17: Erklaertext ueber die optionale Analyse-Einwilligung — ersetzt die bisherige Checkbox-Zeile (.pc-privacy-consent-row, entfernt), da die Entscheidung jetzt ueber die zwei gleichwertigen Buttons unten getroffen wird statt ueber ein leicht uebersehenes Opt-in-Haekchen. */ .pc-legal-optional-hint { font-size: 12.5px; } /* FEAT-17: zwei gleichwertige Ebene-1-Buttons ("Alles akzeptieren" / "Nur Notwendige") statt Checkbox + Einzel-Button. Reused .pc-fade-gate-btn Basis (bereits gefuellt/gelb) fuer Button A; Button B bekommt eine eigene (sekundaere, weniger prominente) Farbe, exakt analog zum UI-93 Mature-Gate- Muster direkt darunter (.pc-mature-gate-actions/.pc-mature-btn-allow). */ .pc-legal-gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .pc-legal-btn-necessary { background: transparent; border: 1px solid var(--card-border, rgba(255,255,255,0.3)); color: var(--text-dim, #b7bcc8); } /* UI-93: Sensitive-Content-Filter-Gate — reuses the .pc-fade-gate shell/box/ title/body chrome above (same overlay + .pc-gate-hidden fade-out), adds a two-button action row instead of the single AGB-accept button. UI-COMPLIANCE-01: beide Optionen sind gleichwertige Entscheidungen (keine "empfohlene" Vorwahl mehr, kein erzwungener dominanter Gelb-Fill mehr) — deny/allow teilen sich daher EINE identische, neutrale Regel statt getrennter primaer/sekundaer-Farbgebung. Der D-Pad-Fokusring (.pc-fade-gate-btn:focus/.focused, s.o.) bleibt für beide Buttons gleich und ist reine Navigations-Rückmeldung, keine bevorzugende Formatierung. */ .pc-mature-gate-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .pc-mature-gate .pc-mature-btn-deny, .pc-mature-gate .pc-mature-btn-allow { background: transparent; border: 1px solid var(--card-border, rgba(255,255,255,0.3)); color: var(--text-dim, #b7bcc8); font-weight: 800; /* CLAUDIT-FIX (UI-COMPLIANCE-01 Audit): flex:1 statt Auto-Breite — sonst bestimmt die (je Sprache unterschiedlich lange) Button-Beschriftung die Breite und die zwei "gleichwertigen" Optionen wirken trotz identischer Farb-Regel ungleich groß. */ flex: 1 1 0; min-width: 0; text-align: center; } /* UI-75: TV pairing AGB gate fades/collapses smoothly instead of snapping away. */ #pairing-legal-gate { margin-top: 14px; max-width: 420px; overflow: hidden; max-height: 220px; transition: opacity .4s ease, max-height .4s ease, margin .4s ease, padding .4s ease; } #pairing-legal-gate.hidden { display: flex !important; opacity: 0; max-height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none; } .settings-legal-chk { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--sys-focus, #4a5468); cursor: pointer; } .settings-legal-chk-label { font-size: 13px; line-height: 1.5; color: var(--text-dim, #b7bcc8); } /* Danger zone: account deletion */ .legal-row-danger { margin-top: 14px; } .btn-danger-delete { background: transparent !important; border: 1.5px solid #f87171 !important; color: #f87171 !important; font-weight: 700; font-size: 13px; border-radius: 8px; padding: 8px 16px; cursor: pointer; transition: background .18s, color .18s; } .btn-danger-delete:hover, .btn-danger-delete:focus { background: rgba(248,113,113,0.12) !important; outline: none; } /* Legal footer row – always visible at the bottom of the overlay */ .login-wall-legal { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); width: 100%; max-width: 520px; } .login-wall-legal a { font-size: 14px; color: #a0a5c0; text-decoration: none; cursor: pointer; padding: 4px 2px; opacity: 0.9; transition: color .15s ease, opacity .15s ease; } .login-wall-legal a:hover { color: var(--sys-focus, #faff00); opacity: 1; text-decoration: underline; } @media (max-width: 768px) { /* Mobile: blickdichtes Fullscreen-Overlay über die App (kein Durchbluten). */ .login-wall { position: fixed; inset: 0; z-index: 99999; min-height: 0; overflow-y: auto; padding: 60px 20px 20px; justify-content: flex-start; } .login-wall-inner { justify-content: flex-start; } .login-wall-legal { gap: 16px; } } /* ── Settings ────────────────────────────────────────────────────────────── */ #settings-content { display: flex; flex-direction: column; max-width: 820px; } .settings-group { /* UI-REDESIGN Phase 3: Mockup-Panel — Haarlinie + weicher Schatten statt Neon- Verlaufsrahmen, 14px-Radius. */ border: 1px solid var(--border-soft, var(--border)); background: var(--card); border-radius: 14px; overflow: hidden; margin-bottom: 22px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } /* Theme-Dropdown (Darstellung) */ .theme-select { background: var(--card-2); color: var(--text); border: 1px solid var(--purple); border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 700; font-family: 'Segoe UI', sans-serif; cursor: pointer; letter-spacing: 0.4px; outline: none; } .theme-select option { background: #181b24; color: var(--text); } .theme-select:hover { border-color: var(--neon-cyan); } /* Fernbedienungs-Fokus (von core.js per .focused gesetzt) → Neon-Gelb */ .theme-select.focused, .theme-select:focus { border-color: var(--sys-focus); color: #ffffff; box-shadow: var(--sys-glow); } /* UI-86: Settings-Auswahlfelder (Design/Vorwarnzeiten/Kontakt-Thema) als Pillen statt ), muss aber immer auf eine eigene volle Breite darunter fallen — auf JEDEM Gerät, nicht nur auf dem Handy. */ .settings-info-pill { flex-wrap: wrap; } .pc-pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; width: 100%; margin: 12px 0 0 0; } .pc-pill-group-label { flex: 1 1 100%; width: 100%; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-faint, var(--text-dim)); margin: 6px 0 -2px; } .pc-pill-row .pc-pill-group-label:first-child { margin-top: 0; } .pc-pill { background: transparent; color: var(--sys-idle); border: 1px solid rgba(148, 163, 184, 0.35); padding: 9px 20px; font-size: 13.5px; font-weight: 600; font-family: monospace; border-radius: 999px; cursor: pointer; transition: transform 0.15s, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; white-space: nowrap; } body:not(.kbd-active) .pc-pill:hover { color: var(--text); border-color: var(--sys-idle); } .pc-pill.active { background: var(--sys-focus); border-color: var(--sys-focus); color: #12131a; font-weight: 700; } .pc-pill.focused { border-color: var(--sys-focus); color: var(--sys-focus); box-shadow: var(--sys-glow); transform: translateZ(0); will-change: box-shadow; animation: breathe-sys 2.6s ease-in-out infinite; } .pc-pill.focused.active { color: #12131a; } /* Touch-Ziel auf dem Handy großzügiger (identischer Bump wie body.app-phone .filter-tab). */ body.app-phone .pc-pill { padding: 12px 22px; font-size: 14.5px; } /* Sprach-Auswahl: 3 runde Neon-Buttons (DE/EN/ES) */ .lang-row { display: flex; gap: 12px; align-items: center; flex-shrink: 0; } .lang-circle { padding: 0; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; /* inaktiv: dezent lila/cyan */ border: 2px solid rgba(0, 234, 255, 0.40); background: rgba(20, 10, 40, 0.6); color: var(--text-dim); font-size: 15px; font-weight: 800; letter-spacing: 0.5px; cursor: pointer; transition: transform 0.15s; } .lang-circle:hover { border-color: var(--neon-cyan); color: var(--text); } /* aktiv: neongelbes Fokus-Leuchten – passend zum Design-Dropdown */ .lang-circle.active { border-color: var(--neon-yellow); color: var(--neon-yellow); box-shadow: 0 0 0 1px rgba(250,255,0,0.65), 0 0 20px rgba(250,255,0,0.50); } /* Fernbedienungs-Fokus → ebenfalls Neon-Gelb (System-Fokus) */ .lang-circle.focused { border-color: var(--sys-focus); color: var(--sys-focus); box-shadow: var(--sys-glow); transform: scale(1.06); } .settings-group-title { padding: 16px 24px; font-size: 11px; font-weight: 700; font-family: monospace; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px solid rgba(30, 41, 59, 0.6); } .platform-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; padding: 16px 24px; border-bottom: 1px solid rgba(20, 30, 50, 0.7); transition: background 0.15s, box-shadow 0.15s; /* Bug 3.3: konstanter Marken-Glow je Plattform (Brand-Identität dauerhaft sichtbar). --brand wird in settings.js inline je Zeile gesetzt (App.brandGlow(platform)). */ /* UI-25: Brand glow relocated exclusively to .platform-logo-slot — the card row carries only the left accent bar (border-left). No inset box-shadow on the row. */ border-left: 3px solid var(--brand, rgba(148, 163, 184, 0.28)); } .platform-row:last-child { border-bottom: none; } .platform-row.focused { background: rgba(255, 255, 255, 0.06); } /* Logo selbst leuchtet konstant in der Markenfarbe → eindeutige, lesbare Brand-Zuordnung. */ .platform-logo-slot { display: flex; align-items: center; justify-content: center; width: 96px; height: 40px; flex-shrink: 0; } /* UI-25: Brand glow now lives on the icon square, not the parent row. */ .platform-logo-slot img { max-width: 100%; max-height: 36px; object-fit: contain; } .platform-info-slot { min-width: 0; padding-left: 16px; } .platform-action-slot { display: flex; justify-content: flex-end; } /* Bug 3.1: Plattform-Texte mit garantiertem Kontrast (dunkler Text-Schatten hält sie auch über farbigen Akzent-/Glow-Flächen lesbar; Status heller statt „faint"). */ .platform-name { font-size: 15px; font-weight: 700; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); } .platform-status { font-size: 12px; color: var(--text-dim, #e6d8ff); font-family: monospace; letter-spacing: 0.4px; margin-top: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } .platform-status.linked { color: var(--linked); } /* ── UI-HOSTER-REGISTRY-ACCORDION (umfasst UI-HOST-LABELS) ────────────────────── Spiegelt 1:1 die Regeln aus theme-classic.css (Sprint-4-Lehre: TV-CSS-Scoping NIE nur in einem Theme nachziehen) — Grau via var(--text-dim, ...) bleibt theme-eigen (hier das Cyberpunk-Neon-Lila-Fallback statt #94a3b8). */ .platform-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; } .platform-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; } .platform-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; line-height: 1; padding: 3px 6px; border-radius: 4px; font-family: monospace; color: var(--text-dim, #e6d8ff); background: rgba(148, 163, 184, 0.14); border: 1px solid rgba(148, 163, 184, 0.32); } .platform-badge-live { color: #ffffff; background: var(--live, #ff2bd6); border-color: var(--live, #ff2bd6); box-shadow: 0 0 8px -2px rgba(255, 43, 214, 0.6); } .platform-lock-icon { font-size: 12px; line-height: 1; opacity: 0.85; filter: grayscale(0.15); } .platform-accordion { margin-top: 6px; } .platform-accordion-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; padding: 4px 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: var(--text-dim, #e6d8ff); cursor: pointer; font-family: inherit; } body:not(.kbd-active) .platform-accordion-toggle:hover, .platform-accordion-toggle.focused { color: #ffffff; } /* BUG-SETTINGS-HOMEPAGE-POLISH (Bug 3): war bislang NUR body.app-tv-scoped — auf Desktop/localhost (body.platform-pc, WASD/Pfeiltasten) und Gamepad blieb der "Erweitert"-Fokus dadurch unsichtbar (nur der obige, sehr dezente Textfarbwechsel). Etabliertes Muster (.filter-tab.focused u. a.) ist global, nicht TV-exklusiv — hier angeglichen, kein neuer Stil erfunden. */ .platform-accordion-toggle.focused { outline: 3px solid var(--sys-focus); outline-offset: 2px; border-radius: 4px; } .platform-accordion-chevron { display: inline-block; font-size: 9px; transition: transform 0.18s ease; } .platform-accordion.expanded .platform-accordion-chevron { transform: rotate(180deg); } .platform-accordion-panel { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease; } .platform-accordion.expanded .platform-accordion-panel { max-height: 600px; opacity: 1; margin-top: 6px; } @media (max-width: 720px) { .platform-accordion-toggle { padding: 8px 4px; } } .platform-btn { padding: 8px 20px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid; background: transparent; transition: transform 0.15s; letter-spacing: 0.4px; } .platform-btn.link { border-color: rgba(148, 163, 184, 0.55); color: var(--sys-idle); } .platform-btn.link:hover, .platform-btn.link.focused { border-color: var(--sys-focus); color: #ffffff; box-shadow: var(--sys-glow); } .platform-btn.unlink { border-color: rgba(148, 163, 184, 0.4); color: var(--text-faint); } .platform-btn.unlink:hover, .platform-btn.unlink.focused { border-color: var(--sys-focus); color: #ffffff; box-shadow: var(--sys-glow); } /* ── OAuth brand-compliant connection buttons (Google / Twitch / Kick) ─────── */ .platform-oauth-grid { width: 100%; } .platform-action-slot { min-width: 0; } .oauth-brand-btn { display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px; height: 40px; min-width: 200px; max-width: 100%; padding: 8px 12px; border-radius: 4px; font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.25px; line-height: 1; box-sizing: border-box; white-space: nowrap; transition: box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .oauth-brand-icon-wrap { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; } .oauth-brand-icon-wrap svg, .oauth-brand-icon-wrap img { width: 20px; height: 20px; display: block; object-fit: contain; } .oauth-brand-label { flex: 1 1 auto; text-align: left; overflow: visible; text-overflow: clip; white-space: nowrap; min-width: 0; } .oauth-brand-btn-wall { width: 100%; min-width: 0; max-width: 100%; justify-content: flex-start; } .login-wall-oauth .oauth-brand-btn { min-width: 260px; max-width: 100%; } .oauth-brand-btn.oauth-brand-youtube.link { background: #ffffff; color: #1f1f1f; border: 1px solid #747775; } body:not(.kbd-active) .oauth-brand-btn.oauth-brand-youtube.link:hover, .oauth-brand-btn.oauth-brand-youtube.link.focused { background: #ffffff; color: #1f1f1f; border-color: #747775; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px rgba(60, 64, 67, 0.15); } .oauth-brand-btn.oauth-brand-twitch.link { background: #9146ff; color: #ffffff; border: 1px solid #9146ff; } body:not(.kbd-active) .oauth-brand-btn.oauth-brand-twitch.link:hover, .oauth-brand-btn.oauth-brand-twitch.link.focused { background: #772ce8; border-color: #772ce8; color: #ffffff; box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.35); } .oauth-brand-btn.oauth-brand-kick.link { background: #00e640; color: #0f0f0f; border: 1px solid #00e640; } body:not(.kbd-active) .oauth-brand-btn.oauth-brand-kick.link:hover, .oauth-brand-btn.oauth-brand-kick.link.focused { background: #00c938; border-color: #00c938; color: #0f0f0f; box-shadow: 0 0 0 3px rgba(0, 230, 64, 0.35); } .oauth-brand-btn.oauth-brand-generic.link { background: #ffffff; color: #1f1f1f; border: 1px solid #747775; } body:not(.kbd-active) .oauth-brand-btn.oauth-brand-generic.link:hover, .oauth-brand-btn.oauth-brand-generic.link.focused { border-color: #747775; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.25); } .oauth-brand-btn.unlink { background: rgba(15, 23, 42, 0.35); color: var(--text-faint, #94a3b8); border: 1px solid rgba(148, 163, 184, 0.4); } .oauth-brand-btn.link.legal-gate-blocked, .platform-btn.link.legal-gate-blocked, .oauth-brand-btn.link:disabled[aria-disabled="true"] { opacity: 0.42 !important; filter: grayscale(1); cursor: not-allowed !important; pointer-events: none !important; box-shadow: none !important; } body:not(.kbd-active) .oauth-brand-btn.unlink:hover, .oauth-brand-btn.unlink.focused { border-color: var(--sys-focus); color: #ffffff; box-shadow: var(--sys-glow); } .login-wall-oauth { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; gap: 12px; } .oauth-brand-btn-wall { width: 100%; min-width: 0; justify-content: flex-start; } /* BUG-SETTINGS-HOMEPAGE-POLISH (Bug 3): war bislang NUR body.app-tv-scoped. Auf Desktop/localhost galt nur die schwache markenspezifische .oauth-brand-*.link.focused-Box-Shadow (bei .oauth-brand-generic — z. B. PeerTube — kaum sichtbar, reine Google-Button-Elevation ohne --sys-focus) — UND bei gesperrten/disabled Buttons (z. B. Dailymotion) wird jeder box-shadow ohnehin über die :disabled-Regel unten mit "box-shadow: none !important" gekappt. outline ist von dieser Regel nicht betroffen und bleibt daher der einzige robuste, plattform-/status-übergreifend sichtbare Fokusring — global gemacht, exakt derselbe Stil wie zuvor, kein neuer Look. */ .oauth-brand-btn.link.focused, .oauth-brand-btn.unlink.focused { outline: 3px solid var(--sys-focus); outline-offset: 2px; transform: none; } body.app-tv .platform-action-slot .oauth-brand-btn { min-width: 180px; } body.app-phone .platform-action-slot { width: 100%; justify-content: stretch; } body.app-phone .platform-action-slot .oauth-brand-btn { width: 100%; min-width: 0; } @media (max-width: 720px) { .platform-row { grid-template-columns: 72px 1fr; grid-template-rows: auto auto; } .platform-action-slot { grid-column: 1 / -1; justify-content: stretch; padding-top: 8px; } .platform-action-slot .oauth-brand-btn { width: 100%; min-width: 0; } } .settings-info { display: flex; align-items: flex-start; padding: 20px 24px; } .settings-info-icon { font-size: 26px; margin-right: 16px; flex-shrink: 0; } .settings-info-title { font-size: 15px; font-weight: 700; color: #ffffff; margin-bottom: 4px; } .settings-info-desc { font-size: 13px; color: var(--text-faint); line-height: 1.6; } /* UI-HOSTER-AD-PREMIUM-DISCLAIMER: dezente, sekundäre Info-Karte (kein Fehler/ Warnung) unterhalb der Hoster-Liste — gedämpfter Titel statt des lauten bold-weißen Premium-Titel-Looks, dezenter Rahmen zur optischen Abgrenzung. */ .hoster-ad-premium-notice { margin-top: 14px; border: 1px solid var(--border-soft, rgba(255,255,255,0.12)); border-radius: 12px; background: var(--card-2, rgba(255,255,255,0.03)); } .hoster-ad-premium-notice .settings-info-title { font-weight: 600; color: var(--text-dim, #b7bcc8); } .hoster-ad-premium-notice .settings-info-icon { color: var(--text-faint); } /* ── Fast-Fullscreen Player ────────────────────────────────────────────────── Video/Embed füllt den gesamten Overlay; ein minimalistischer Rahmen (Vignette + Steuerleiste) liegt darüber und blendet bei Inaktivität aus. */ #player-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; background: #000; overflow: hidden; isolation: isolate; /* eigener Stacking-Kontext → saubere z-Layer */ } /* #3c: Universeller Mini-Player — vollständige Spezifikation am Dateiende (ein einziger Block, alle Form-Faktoren). Hier bewusst KEINE Regeln (Duplikat vermieden). */ #player-overlay.hidden { display: none; } /* Video-Schichten füllen den Screen. Eigene GPU-Ebene (translateZ) + isolation, damit die UI darüber flüssig compositet wird (weniger Emulator-Flackern). */ #av-player, #player, #yt-player, #dm-player { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: none; background: #000; z-index: 1; /* Video-Layer unter Placeholder/Controls */ transform: translateZ(0); /* dedizierte Compositing-Ebene */ backface-visibility: hidden; } #player.active, #yt-player.active, #dm-player.active { display: block; } /* UI-67: Click-to-unmute when browser blocks autoplay audio (Dailymotion guard). */ .audio-unmute-overlay { position: absolute; inset: 0; z-index: 8; display: flex; align-items: flex-end; justify-content: center; padding: 0 20px 13%; box-sizing: border-box; cursor: pointer; pointer-events: auto; background: linear-gradient(to top, rgba(18, 20, 28, 0.78) 0%, rgba(18, 20, 28, 0.12) 42%, transparent 70%); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; text-align: center; text-shadow: 0 0 12px rgba(74, 84, 104, 0.55), 0 1px 8px rgba(0, 0, 0, 0.85); transition: opacity 0.26s ease; } .audio-unmute-overlay.hidden { display: none !important; pointer-events: none; } .audio-unmute-overlay:focus-visible { outline: 2px solid var(--sys-focus, #4a5468); outline-offset: -4px; } /* ── Chat-Sidebar (Twitch-Live) — OVERLAY rechts, Video bleibt 100% ────────── WICHTIG: Das Video wird NICHT verkleinert (Twitch-Autoplay/Ad-Skript bricht beim Resizing ab). Die Sidebar liegt als Overlay über dem rechten Rand. */ #player-sidebar { position: absolute; top: 0; right: 0; height: 100%; width: 25%; display: flex; flex-direction: column; background: rgba(18, 20, 28, 0.94); border-left: 2px solid var(--purple); box-shadow: -8px 0 28px rgba(74, 84, 104, 0.3); z-index: 6; transform: translateX(100%); transition: transform 0.3s ease; will-change: transform; } /* UI-TWITCH-CHAT-BOTTOM-ALIGN: Bei offener Twitch-Chat-Sidebar wird das Video auf 75% Höhe verkleinert (s. Regel unten). Die Sidebar (nur Chat-Iframe) lief bisher auf voller 100%-Höhe → die Chat-Eingabe-Unterkante saß ~25% UNTER der Video- Unterkante. Sidebar-Höhe = Video-Höhe (75%) lässt beide Unterkanten fluchten. Phone überschreibt zurück auf 100% (dort bleibt das Video full-height, nur 68% breit — kein 75%-Versatz; Desktop nutzt ohnehin #pd-chat, JS-höhensynchron). */ #player-overlay.sidebar-open #player-sidebar { transform: translateX(0); height: 75%; } /* Bei offener Sidebar: Video links auf 75%×75% (bleibt 16:9 auf 16:9-Screen → KEINE schwarzen Balken). Darunter entsteht der freie Raum für die Info-Leiste. */ #player-overlay.sidebar-open #player, #player-overlay.sidebar-open #yt-player, #player-overlay.sidebar-open #dm-player, #player-overlay.sidebar-open #av-player { width: 75%; height: 75%; top: 0; left: 0; transition: width 0.3s ease, height 0.3s ease; } #player-chat { flex: 1 1 auto; min-height: 0; background: #000; } #player-chat-frame { width: 100%; height: 100%; border: none; display: block; } /* Info-Leiste: exakt im freien Raum UNTER dem 75%-Video (links, unter der oberen 75% Höhe), endet links von der 25%-Chat-Sidebar. */ #player-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; padding: 28px 56px; background: var(--card); border-top: 2px solid var(--purple); transform: translateY(110%); transition: transform 0.3s ease; font-family: monospace; } /* Im freien Raum UNTER dem 75%-Video: gestapelt (Name → Titel → Meta), vertikal mittig, aus 4 m perfekt lesbar. */ #player-overlay.sidebar-open #player-info { transform: translateY(0); top: 75%; right: 25%; bottom: 0; flex-direction: column; align-items: flex-start; justify-content: center; flex-wrap: nowrap; gap: 14px; padding: 32px 64px; } #player-info-name { font-size: 2rem; font-weight: 900; letter-spacing: 0.3px; font-family: 'Segoe UI', sans-serif; flex-shrink: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--neon-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; } #player-info-title { font-size: 1.5rem; font-weight: 600; color: var(--text-dim); font-family: 'Segoe UI', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; } /* Zuschauerzahl + Kategorie: direkt unter dem Titel, gleiche Größe, nebeneinander. */ .pi-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 28px; max-width: 100%; } .pi-viewers { color: var(--live); font-weight: 800; font-size: 1.5rem; } .pi-game { color: var(--neon-cyan); font-weight: 700; font-size: 1.5rem; } #av-player { display: none; } /* avplay-Plane wird per JS eingeblendet */ #player-placeholder { position: absolute; inset: 0; z-index: 2; /* über Video, unter Error/Controls */ display: flex; flex-direction: column; align-items: center; justify-content: center; } #player-placeholder.hidden { display: none; } .placeholder-logo { font-size: 60px; font-weight: 800; color: #ffffff; letter-spacing: 8px; opacity: 0.22; margin-bottom: 16px; } #player-placeholder p { font-size: 18px; color: var(--text-muted); } #player-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 560px; text-align: center; background: rgba(2, 6, 23, 0.85); border: 1px solid var(--border); border-radius: 16px; padding: 28px 36px; color: #fecaca; font-size: 17px; line-height: 1.6; z-index: 3; } #player-error.hidden { display: none; } /* LOG-B1: Aktions-Button unter der Fehlermeldung („Auf YouTube ansehen"). */ #player-error .pd-err-action { display: inline-block; margin-top: 16px; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--sys-focus, #38bdf8); background: var(--sys-focus, #38bdf8); color: #04111f; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: filter .15s ease; } #player-error .pd-err-action:hover, #player-error .pd-err-action:focus { filter: brightness(1.12); outline: none; } /* Steuerleiste: oben Titel-Vignette, unten Buttons. Auto-Hide via .player-hidden */ #player-controls { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; opacity: 1; transition: opacity 0.4s ease; will-change: opacity; /* sanftes Auto-Hide ohne Repaint-Ruckler */ transform: translateZ(0); } #player-controls.player-hidden { opacity: 0; } /* (Task 6 Ghost-HUD) Doppelte Titel-/Creator-Vignette am Kopf ENTFERNT — der native Player-Frame (YouTube/Twitch) rendert seinen eigenen Titel, eine zweite App-Overlay-Zeile kollidierte damit. Die Mitte bleibt frei für Lade-/Pause-State. */ #player-controls-top { display: none; } #player-title { font-size: 26px; font-weight: 800; color: #ffffff; letter-spacing: 0.3px; } #player-sub { font-size: 15px; color: var(--text-dim); font-family: monospace; margin-top: 6px; } #player-controls-bar { display: flex; align-items: center; gap: 16px; /* Größerer Bodenabstand: hebt Zurück/Profil/Folgen über die native Seek-/ Timeline-Leiste des Video-iframes (YouTube/Twitch), die ganz unten sitzt. */ padding: 28px 48px 72px; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); /* Die Leiste selbst fängt KEINE Klicks mehr ab — nur die echten Buttons. So bleibt das untere Band (native Fortschrittsleiste) voll bedienbar und die Steuer-Buttons liegen nicht mehr „auf" dem Seeker. */ pointer-events: none; } #player-controls-bar > .player-ctl { pointer-events: auto; } .player-ctl-spacer { flex: 1; pointer-events: none; } .player-ctl { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(148, 163, 184, 0.5); color: var(--sys-idle); padding: 13px 28px; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; transition: transform 0.15s, color 0.15s; } .player-ctl:hover, .player-ctl.focused { border-color: var(--sys-focus); color: #ffffff; box-shadow: var(--sys-glow); transform: translateZ(0); will-change: box-shadow; animation: breathe-sys 2.6s ease-in-out infinite; } /* Folgen-Button: aktiver „gefolgt"-Zustand in PubliCore-Grün */ .player-ctl-follow.following { border-color: rgba(34,197,94,0.6); color: var(--linked); } .player-ctl-follow.following.focused { border-color: var(--linked); color: #dcfce7; } /* ── Follow-Modal (PubliCore-Silo → offiziell folgen) ──────────────────────── */ #follow-modal { position: absolute; inset: 0; z-index: 6; background: rgba(2, 6, 23, 0.82); display: flex; align-items: center; justify-content: center; } #follow-modal.hidden { display: none; } #follow-modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 40px 48px; max-width: 480px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); } #follow-modal-box > * + * { margin-top: 16px; } #follow-modal-title { font-size: 21px; font-weight: 800; color: #ffffff; line-height: 1.4; } #follow-modal-desc { font-size: 16px; color: var(--text-dim); line-height: 1.5; } #follow-modal-qr { background: #ffffff; padding: 14px; border-radius: 16px; line-height: 0; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); } #follow-modal-qr img { width: 220px; height: 220px; display: block; border-radius: 6px; } .follow-modal-noqr { width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; color: #334155; font-size: 14px; } #follow-modal-hint { font-size: 13px; color: var(--text-faint); line-height: 1.6; max-width: 360px; } /* ── Pairing & Mobile Overlays ───────────────────────────────────────────── */ #pairing-overlay, #mobile-overlay, #ad-qr-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; background: rgba(2, 6, 23, 0.94); display: flex; align-items: center; justify-content: center; } #pairing-overlay.hidden, #mobile-overlay.hidden, #ad-qr-overlay.hidden { display: none; } #pairing-box, #mobile-box, .ad-qr-box { background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 52px 60px; text-align: center; max-width: 640px; width: 100%; display: flex; flex-direction: column; align-items: center; } #pairing-box > * + *, #mobile-box > * + *, .ad-qr-box > * + * { margin-top: 18px; } /* QR-Popup (Companion-Pairing) deutlich größer für die Couch-Distanz. */ #mobile-box { max-width: 860px; padding: 60px 76px; } #mobile-box > * + * { margin-top: 26px; } #mobile-title { font-size: 34px !important; } #mobile-desc { font-size: 19px !important; } #pairing-platform-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; } #pairing-title, #mobile-title { font-size: 25px; font-weight: 800; color: #ffffff; letter-spacing: 0.5px; } #pairing-desc, #mobile-desc { font-size: 16px; color: var(--text-faint); } #pairing-qr:not(:empty) { background: #ffffff; padding: 12px; border-radius: 14px; line-height: 0; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); } #pairing-qr img { width: 180px; height: 180px; display: block; border-radius: 4px; } #pairing-url { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 28px; font-size: 18px; font-weight: 700; color: #cbd5e1; font-family: monospace; letter-spacing: 1px; } #pairing-instruction { font-size: 15px; color: var(--text-faint); } #pairing-code { font-size: 46px; font-weight: 900; letter-spacing: 12px; color: #ffffff; background: var(--bg); border: 2px solid rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1px rgba(255,255,255,0.2), 0 12px 32px rgba(0,0,0,0.45); border-radius: 16px; padding: 18px 40px; font-family: monospace; } #pairing-status, #mobile-countdown { font-size: 14px; color: var(--text-faint); font-family: monospace; } #pairing-spinner { font-size: 26px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #pairing-cancel, #mobile-cancel { background: transparent; border: 1px solid rgba(51,65,85,0.7); color: var(--text-faint); padding: 10px 28px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 8px; transition: transform 0.15s; } #pairing-cancel:hover, #pairing-cancel.focused, #mobile-cancel:hover, #mobile-cancel.focused { border-color: var(--sys-focus); color: #ffffff; box-shadow: var(--sys-glow); } /* Großer, scanbarer QR von der Couch: matte Hellgrau-Fläche, HARTE Ecken (kein Radius). */ #mobile-qr { width: 472px; height: 472px; background: #E0E0E0; border-radius: 0; padding: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; } #mobile-qr img { width: 440px; height: 440px; border-radius: 0; image-rendering: pixelated; } #mobile-token { font-size: 32px; font-weight: 900; letter-spacing: 8px; color: #cbd5e1; font-family: monospace; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 34px; } #mobile-hint { font-size: 13px; color: var(--text-muted); max-width: 360px; line-height: 1.6; } /* ── Abo-Auswahl-Overlay (PubliCore vs. Plattform) ───────────────────────── */ #sub-choice-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 210; background: rgba(18, 20, 28, 0.95); display: flex; align-items: center; justify-content: center; } #sub-choice-overlay.hidden { display: none; } #sub-choice-box { background: var(--card); border: 1px solid var(--purple); border-radius: 24px; padding: 48px 56px; width: 70%; max-width: 780px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 0 48px rgba(74, 84, 104,0.35); } #sub-choice-box > * + * { margin-top: 24px; } #sub-choice-title { font-size: 28px; font-weight: 800; letter-spacing: 0.3px; background: var(--neon-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; } #sub-choice-options { display: flex; flex-direction: column; gap: 16px; width: 100%; } .sub-choice-btn { width: 100%; padding: 22px 28px; border-radius: 14px; cursor: pointer; font-size: 20px; font-weight: 700; line-height: 1.4; background: var(--bg); color: var(--text-dim); border: 2px solid var(--purple); transition: transform .12s, border-color .12s, box-shadow .12s, background .12s; } .sub-choice-btn:hover, .sub-choice-btn.focused { color: #fff; box-shadow: 0 0 0 1px var(--neon-yellow), 0 0 22px rgba(250,255,0,0.45); border-color: var(--neon-yellow); } #sub-opt-publicore:hover, #sub-opt-publicore.focused { border-color: #1aff8c; box-shadow: 0 0 0 1px #1aff8c, 0 0 22px rgba(26,255,140,0.5); } #sub-choice-qr-view { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; } #sub-choice-desc { font-size: 17px; color: var(--text-dim); max-width: 540px; line-height: 1.6; } #sub-choice-qr:not(:empty) { background: #ffffff; padding: 12px; border-radius: 14px; line-height: 0; box-shadow: 0 0 28px rgba(74, 84, 104,0.45); } #sub-choice-qr img { width: 300px; height: 300px; display: block; border-radius: 4px; } #sub-choice-url { font-size: 14px; color: var(--neon-cyan); font-family: monospace; word-break: break-all; max-width: 540px; } /* ── FEAT-5: Playlist-Picker-Overlay ("Zur Playlist hinzufügen") ──────────── */ #playlist-picker-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 210; background: rgba(18, 20, 28, 0.95); display: flex; align-items: center; justify-content: center; } #playlist-picker-overlay.hidden { display: none; } #playlist-picker-box { background: var(--card); border: 1px solid var(--purple); border-radius: 24px; padding: 40px 44px; width: 70%; max-width: 560px; display: flex; flex-direction: column; align-items: stretch; text-align: center; box-shadow: 0 0 48px rgba(74, 84, 104,0.35); } #playlist-picker-box > * + * { margin-top: 18px; } #playlist-picker-title { font-size: 24px; font-weight: 800; letter-spacing: 0.3px; background: var(--neon-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; } #playlist-picker-list { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; } .playlist-picker-empty { font-size: 15px; color: var(--text-dim); padding: 12px 0; } .playlist-picker-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; border-radius: 12px; cursor: pointer; font-size: 16px; font-weight: 700; text-align: left; background: var(--bg); color: var(--text-dim); border: 2px solid var(--purple); transition: transform .12s, border-color .12s, box-shadow .12s; } .playlist-picker-row:hover, .playlist-picker-row.focused { color: #fff; box-shadow: 0 0 0 1px var(--neon-yellow), 0 0 22px rgba(250,255,0,0.45); border-color: var(--neon-yellow); } .playlist-picker-row.in-playlist { border-color: #1aff8c; } .playlist-picker-row-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .playlist-picker-row-count { font-size: 13px; color: var(--text-faint); font-weight: 600; } .playlist-picker-row-check { color: #1aff8c; font-weight: 900; } #playlist-picker-newrow { display: flex; gap: 10px; } #playlist-picker-newname { flex: 1; padding: 12px 16px; border-radius: 10px; font-size: 15px; background: var(--bg); color: var(--text-dim); border: 2px solid var(--border); } #playlist-picker-newname:focus { outline: none; border-color: var(--neon-yellow); } #playlist-picker-create, #playlist-picker-close { padding: 12px 22px; border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 700; background: var(--bg); color: var(--text-dim); border: 2px solid var(--purple); transition: transform .12s, border-color .12s, box-shadow .12s; } #playlist-picker-create:hover, #playlist-picker-create.focused, #playlist-picker-close:hover { color: #fff; box-shadow: 0 0 0 1px var(--neon-yellow), 0 0 22px rgba(250,255,0,0.45); border-color: var(--neon-yellow); } /* ── Rechtliches-Overlay (Impressum / Datenschutz) ─────────────────────────── */ /* z-index 2147483647 (max): sits above login-wall (99999), landing gate (2147483600) AND the cookie-consent banner (2147483646) — so the CMP privacy link opens the legal overlay ABOVE the consent modal (LEGAL-LINK-GAPS / CMP-Sackgasse). */ #legal-overlay { position: fixed; inset: 0; z-index: 2147483647 !important; background: rgba(0, 0, 0, 0.88); display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; } #legal-overlay.hidden { display: none; } #legal-box { background: #14161e; /* fully opaque dark – no bleed-through */ border: 1px solid var(--purple, #4a5468); border-radius: 24px; padding: 40px 44px; width: min(1100px, 94vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 0 48px rgba(74, 84, 104,0.35), 0 24px 64px rgba(0,0,0,0.7); } #legal-title { font-size: 30px; font-weight: 800; margin-bottom: 20px; flex-shrink: 0; /* Bug-Fix Kontrast: kein Gradient-Text-Clip mehr (war dunkelgrün auf dunkelviolett, unlesbar). Solide, kontrastreiche Schrift erzwingen — auch gegen den geerbten -webkit-text-fill-color: transparent. */ background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--text, #f2f4f8); color: var(--text, #f2f4f8) !important; } #legal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; font-size: 1.25rem; line-height: 1.7; color: var(--text-dim); white-space: pre-wrap; text-align: left; padding-right: 12px; } #legal-close { flex-shrink: 0; margin-top: 24px; align-self: center; background: var(--sys-focus, #faff00) !important; border: none !important; color: #0a0410 !important; /* dark on yellow — guaranteed readable */ padding: 13px 44px; border-radius: 11px; font-size: 16px; font-weight: 800; cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease; } #legal-close:hover, #legal-close.focused { filter: brightness(1.08); transform: translateY(-1px); } .legal-row { display: flex; gap: 12px; } @media (max-width: 768px) { #legal-box { padding: 28px 18px; width: 100%; max-height: 92vh; border-radius: 16px; } #legal-title { font-size: 22px; } #legal-body { font-size: 1rem; } #legal-close { width: 100%; text-align: center; } } /* ── Companion-Remote: "Erfolgreich"-Einblendung ───────────────────────────── */ #connect-success { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 240; display: flex; align-items: center; justify-content: center; background: rgba(18, 20, 28, 0.55); pointer-events: none; opacity: 1; transition: opacity 0.5s ease; } #connect-success.hidden { display: none; } #connect-success.fade-out { opacity: 0; } #connect-success-box { display: flex; flex-direction: column; align-items: center; gap: 18px; background: var(--card); border: 1px solid var(--purple); border-radius: 24px; padding: 44px 64px; box-shadow: 0 0 48px rgba(74, 84, 104,0.5); } #connect-success-check { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 900; color: #12141c; background: #1aff8c; box-shadow: 0 0 26px rgba(26,255,140,0.65); } #connect-success-text { font-size: 26px; font-weight: 800; background: var(--neon-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; } /* ── Hint-Bar ────────────────────────────────────────────────────────────── */ #hint-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 40px; background: var(--bg); border-top: 1px solid rgba(20, 30, 50, 0.8); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-faint); font-family: monospace; z-index: 50; letter-spacing: 0.5px; } #hint-bar span { margin: 0 20px; } /* UI-117: auf dem Desktop (PC/Web) ersatzlos aus — überlagerte sich zuvor mit der alten #pc-shortcut-bar (jetzt entfernt) zu einem "Text-Salat" am unteren Rand. TV behält #hint-bar; Desktop bekommt stattdessen #pc-keyboard-info-btn. */ body.app-desktop #hint-bar { display: none !important; } /* ── Load-More + Loading ─────────────────────────────────────────────────── */ .load-more-hint { text-align: center; color: var(--text-muted); font-size: 14px; font-family: monospace; padding: 24px 0 8px; animation: pulse 1.2s ease-in-out infinite; grid-column: 1 / -1; } .loading { text-align: center; color: var(--text-muted); margin-top: 80px; font-size: 16px; animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* ── Globaler "Atmen"-Effekt — Glow fadet sanft auf/ab ──────────────────────── Pulsiert ausschließlich den box-shadow. Jedes nutzende Element hat im Fokus bereits einen transform (scale/translateY/translateZ) → eigene GPU-Ebene, der Repaint bleibt isoliert und läuft auch auf dem TV flüssig. Farben strikt getrennt: System (Tastatur/Sidebar) Weiß, Twitch Lila, YouTube Rot, Werbung Orange. */ @keyframes breathe-sys { 0%, 100% { box-shadow: 0 0 0 1px rgba(250,255,0,0.65), 0 0 16px rgba(250,255,0,0.30); } 50% { box-shadow: 0 0 0 1px rgba(250,255,0,1.00), 0 0 30px rgba(250,255,0,0.60); } } @keyframes breathe-sys-nav { 0%, 100% { box-shadow: 0 0 0 1px rgba(250,255,0,0.65), 0 0 16px rgba(250,255,0,0.30), 0 8px 24px rgba(0,0,0,0.4); } 50% { box-shadow: 0 0 0 1px rgba(250,255,0,1.00), 0 0 30px rgba(250,255,0,0.60), 0 8px 24px rgba(0,0,0,0.4); } } /* Einheitlicher Neon-Gelb-Glow für fokussierte Video-Kacheln (Cyberpunk). */ @keyframes breathe-neon-card { 0%, 100% { box-shadow: 0 0 0 2px rgba(250,255,0,0.80), 0 0 22px 4px rgba(250,255,0,0.45), 0 0 52px 14px rgba(250,255,0,0.22), 0 0 100px 30px rgba(250,255,0,0.10); } 50% { box-shadow: 0 0 0 2px rgba(250,255,0,1.00), 0 0 34px 8px rgba(250,255,0,0.70), 0 0 76px 22px rgba(250,255,0,0.38), 0 0 128px 42px rgba(250,255,0,0.16); } } @keyframes breathe-twitch { 0%, 100% { box-shadow: 0 0 0 2px rgba(145,70,255,0.75), 0 0 22px 4px rgba(145,70,255,0.45), 0 0 52px 14px rgba(145,70,255,0.24), 0 0 100px 30px rgba(145,70,255,0.10); } 50% { box-shadow: 0 0 0 2px rgba(145,70,255,1.00), 0 0 34px 8px rgba(145,70,255,0.72), 0 0 76px 22px rgba(145,70,255,0.40), 0 0 128px 42px rgba(145,70,255,0.18); } } @keyframes breathe-youtube { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,0,0,0.75), 0 0 22px 4px rgba(255,0,0,0.45), 0 0 52px 14px rgba(255,0,0,0.24), 0 0 100px 30px rgba(255,0,0,0.10); } 50% { box-shadow: 0 0 0 2px rgba(255,0,0,1.00), 0 0 34px 8px rgba(255,0,0,0.72), 0 0 76px 22px rgba(255,0,0,0.40), 0 0 128px 42px rgba(255,0,0,0.18); } } @keyframes breathe-ad { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,140,0,0.75), 0 0 22px 4px rgba(255,140,0,0.45), 0 0 52px 14px rgba(255,140,0,0.24), 0 0 100px 30px rgba(255,140,0,0.10); } 50% { box-shadow: 0 0 0 2px rgba(255,140,0,1.00), 0 0 34px 8px rgba(255,140,0,0.72), 0 0 76px 22px rgba(255,140,0,0.40), 0 0 128px 42px rgba(255,140,0,0.18); } } /* ── Scrollbar ───────────────────────────────────────────────────────────── */ .section::-webkit-scrollbar { width: 5px; } .section::-webkit-scrollbar-track { background: transparent; } .section::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.5); border-radius: 3px; } /* ── Virtuelle On-Screen-Tastatur ────────────────────────────────────────── */ #vkeyboard { padding: 12px 0 20px; max-width: 820px; margin: 0 auto; } #vkeyboard.hidden { display: none; } .vkb-row { display: flex; justify-content: center; margin-bottom: 8px; } .vkb-key { min-width: 56px; height: 56px; margin-right: 8px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.30); border-radius: 10px; color: var(--sys-idle); font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.1s; padding: 0 10px; flex-shrink: 0; } .vkb-key.focused { border-color: var(--sys-focus); color: var(--sys-focus); box-shadow: var(--sys-glow); transform: scale(1.1); /* scale promotet bereits eine GPU-Ebene */ will-change: box-shadow; animation: breathe-sys 2.6s ease-in-out infinite; } .vkb-key.action-key { min-width: 120px; font-size: 14px; background: rgba(2, 6, 23, 0.6); color: var(--sys-idle); } .vkb-key.action-key.focused { border-color: var(--sys-focus); color: var(--sys-focus); box-shadow: var(--sys-glow); } .vkb-key.vkb-space { min-width: 380px; margin-right: 0; } /* Inline-Icon der Aktionstasten (Löschen/Suchen) — erbt currentColor */ .vkb-key .vkb-ico { width: 18px; height: 18px; margin-right: 7px; flex-shrink: 0; } /* ── Mobile-Keyboard-Hinweis ─────────────────────────────────────────────── */ #search-mobile-hint { display: flex; align-items: center; padding: 20px 0 16px; color: var(--text-faint); font-size: 17px; } #search-mobile-hint.hidden { display: none; } .search-mobile-hint-icon { font-size: 28px; margin-right: 14px; } /* Arrow nav button + Scrim only on mobile → TV/Desktop invisible. */ #mobile-menu-btn, #sidebar-scrim { display: none; } /* UI-9: Arrow indicator style for the fixed position fallback button on mobile. */ .mobile-arrow-btn { align-items: center; justify-content: center; background: var(--card, rgba(255,255,255,0.08)); border: 1px solid var(--purple, #7c3aed); border-radius: 14px; } /* ════════════════════════════════════════════════════════════════════════════ MOBILE-LAYOUT (Smartphone). Master-Switch: body.app-phone (JS-Erkennung in core.js) — orientierungs- unabhängig und erfasst NIE den TV (1920/960). Zusätzlich ein @media-Fallback für schmale Browser-Fenster (Resize / mobiler Browser) ohne JS. ════════════════════════════════════════════════════════════════════════════ */ body.app-phone #mobile-menu-btn { display: flex; position: fixed; top: 10px; left: 10px; z-index: 310; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--card); color: var(--text); border: 1px solid var(--purple); border-radius: 12px; font-size: 22px; line-height: 1; cursor: pointer; transition: left 0.25s ease, top 0.25s ease, bottom 0.25s ease; } /* Geöffnet: Burger sitzt fest in der oberen Ecke der Seitenleiste und wandert durch die left-Transition flüssig mit der einfahrenden Sidebar mit. */ body.app-phone.sidebar-mobile-open #mobile-menu-btn { display: flex; top: 12px; bottom: auto; left: calc(min(264px, 84vw) - 56px); transform: none; opacity: 1; z-index: 320; } body.app-phone #sidebar { position: fixed; top: 0; left: 0; z-index: 300; width: 264px; max-width: 84vw; height: 100vh; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 4px 0 28px rgba(0,0,0,0.7); overflow-y: auto; /* UI-88: Legal-Disclaimer-Links durch Scrollen erreichbar */ } body.app-phone.sidebar-mobile-open #sidebar { transform: translateX(0); } /* UI-89: Mobile Live-Kachel — nur Zuschauer-Zahl, kein "Zuschauer"-Label */ body.app-phone .card-viewers-label { display: none; } body.app-phone #sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 290; background: rgba(18, 20, 28,0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } body.app-phone.sidebar-mobile-open #sidebar-scrim { opacity: 1; pointer-events: auto; } body.app-phone #content { width: 100vw; } /* UI-10: Compact single-line topbar — no left padding needed since arrow is inline. */ body.app-phone #header { height: auto; padding: 8px 12px; } body.app-phone #search-bar { width: auto; margin-bottom: 0; font-size: 14px; padding: 8px 14px; } body.app-phone #filter-tabs, body.app-phone #search-filter-tabs { flex-wrap: wrap; } body.app-phone .section { height: auto; flex: 1; min-height: 0; padding: 16px 12px 40px; } body.app-phone .video-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* BUG-MOBILE-QUICKPAIR-BLANK: vorher wurde hier die GANZE #settings-group-mobile ausgeblendet (Kommentar "TV-QR auf dem Handy ausblenden") — das nahm aber auch FEAT-8s .pairing-quick-mobile (6-Boxen-Code + QR-Scanner) mit, das SPÄTER als Kind derselben Gruppe (in .pairing-devices-col) eingebaut wurde. Ergebnis: der komplette "Schnell-Kopplung"-Tab war auf dem Handy leer. Jetzt nur noch die TV-QR-Spalte selbst ausblenden, .pairing-devices-col (Geräteliste + FEAT-8) bleibt. */ body.app-phone #settings-group-mobile .pairing-qr-col { display: none; } body.app-phone #hint-bar { display: none; } /* Browse-Modus: keine D-Pad-Hinweise */ body.app-phone.remote-linked #hint-bar { display: flex; } /* nur als Remote gekoppelt sichtbar */ /* (9a) Kein Fokus-Glow/Leuchten auf dem Handy — das brauchen nur TV + Fernbedienung. --sys-glow auf einen unsichtbaren No-Op-Schatten setzen: entfernt das Leuchten, erhält aber die kombinierten Tiefen-Schatten (box-shadow: var(--sys-glow), 0 8px …). */ body.app-phone { --sys-glow: 0 0 0 0 transparent; } body.app-phone .video-card.focused, body.app-phone .video-card:hover, body.app-phone .nav-item.focused, body.app-phone .nav-item:hover, body.app-phone .filter-tab.focused, body.app-phone .platform-btn.focused, body.app-phone .platform-btn:hover { box-shadow: none; } /* Querformat: bis zu 3 Spalten (nur auf dem Handy → app-phone, nie auf dem TV). */ @media (orientation: landscape) { body.app-phone .video-grid { grid-template-columns: repeat(3, 1fr); } } /* Fallback ohne JS: schmaler Viewport (Browser-Resize / mobiler Browser). */ @media (max-width: 768px) { #mobile-menu-btn { display: flex; position: fixed; top: 10px; left: 10px; z-index: 310; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--card); color: var(--text); border: 1px solid var(--purple); border-radius: 12px; font-size: 22px; line-height: 1; cursor: pointer; } #sidebar { position: fixed; top: 0; left: 0; z-index: 300; width: 264px; max-width: 84vw; height: 100vh; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 4px 0 28px rgba(0,0,0,0.7); } body.sidebar-mobile-open #sidebar { transform: translateX(0); } #sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 290; background: rgba(18, 20, 28,0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } body.sidebar-mobile-open #sidebar-scrim { opacity: 1; pointer-events: auto; } #content { width: 100vw; } #header { height: auto; padding: 12px 12px 12px 64px; } #search-bar { width: 100%; margin-bottom: 10px; } .section { height: auto; flex: 1; min-height: 0; padding: 16px 12px 40px; } .video-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } #hint-bar { display: none; } body.remote-linked #hint-bar { display: flex; } } /* ============================================================================ MOBILE FINAL POLISH: follow popup, settings tiles, controller mode, landscape burger peek + landscape stream-info scaling. ============================================================================ */ /* (2c) Follow-choice popup: tile text wraps cleanly, stays inside the frame. */ body.app-phone #sub-choice-box { width: 92vw; max-width: 430px; padding: 18px 16px; max-height: 88vh; overflow-y: auto; } body.app-phone #sub-choice-box > * + * { margin-top: 16px; } body.app-phone #sub-choice-title { font-size: 18px; line-height: 1.3; } body.app-phone .sub-choice-btn { white-space: normal; word-break: break-word; line-height: 1.35; font-size: 14px; padding: 13px 14px; height: auto; min-height: 0; text-align: left; } body.app-phone #sub-choice-desc { font-size: 13px; line-height: 1.45; word-break: break-word; } body.app-phone #sub-choice-url { font-size: 11px; word-break: break-all; } body.app-phone #sub-choice-qr img { width: 200px; height: 200px; } /* FEAT-5: Playlist-Picker auf dem Handy — größere Touch-Ziele, kein Overflow. */ body.app-phone #playlist-picker-box { width: 92vw; max-width: 430px; padding: 20px 16px; max-height: 88vh; overflow-y: auto; } body.app-phone #playlist-picker-title { font-size: 18px; line-height: 1.3; } body.app-phone .playlist-picker-row { padding: 16px; font-size: 15px; } body.app-phone #playlist-picker-newrow { flex-direction: column; } body.app-phone #playlist-picker-create, body.app-phone #playlist-picker-close { padding: 14px; } /* (4b) Settings tiles: description full-width on top, buttons below. */ body.app-phone .settings-info { flex-wrap: wrap; } /* Beschreibungstext stabil halten: reservierte Mindesthöhe + ruhige Zeilenhöhe, damit der Block nicht je nach Sprache zwischen 2 und 4 Zeilen hin- und herspringt. */ body.app-phone .settings-info > div { flex: 1 1 calc(100% - 42px); min-width: 0; min-height: 3.4em; line-height: 1.4; word-break: break-word; } body.app-phone .settings-info > .platform-btn, body.app-phone .settings-info > .legal-row, body.app-phone .settings-info > .lang-row { flex-basis: 100%; width: 100%; margin: 12px 0 0 0; } /* UI-86: `.theme-select` selbst ist jetzt IMMER .pc-select-pillified (display:none) → diese Handy-Sonderregel wäre für das ist jetzt IMMER .pc-select-pillified (display:none), die Regel war tote Fracht. Die Pillen-Schriftgröße kommt aus .pc-pill weiter oben. */ body.app-phone .settings-info-title { font-size: 18px; } body.app-phone .settings-info-desc { font-size: 15px; } body.app-phone .settings-group-title { font-size: 14px; } /* §6 Sprachauswahl: Buchstaben immer einzeilig (nicht vertikal stapeln) */ .lang-circle { white-space: nowrap; flex-shrink: 0; } /* §6 Sidebar-Logo-Fix: geöffneter Burger sitzt RECHTS NEBEN der Sidebar (überdeckt das Logo nicht) */ body.app-phone.sidebar-mobile-open #mobile-menu-btn { left: calc(min(264px, 84vw) + 10px); } @media (orientation: landscape) { body.app-phone.sidebar-mobile-open #mobile-menu-btn { left: calc(min(264px, 84vw) + 10px); } } /* §4 Player: kein Burger-Menü im Videoplayer (Navigation via Zurück-Button) */ body.app-phone.player-active #mobile-menu-btn { display: none !important; } /* §9 Theme-Logo-Reduktion: Plattform-Logos in Fuchsia/Retro dezenter (Standard/Dark = Originalfarbe) */ :root[data-theme="fuchsia"] .logo-slot img { opacity: 0.80; filter: saturate(0.65); } :root[data-theme="retro"] .logo-slot img { opacity: 0.85; filter: saturate(0.55) brightness(1.05); } :root[data-theme="retro"] .pcprem-buy { background: #cc6f00 !important; color: #fff !important; border-color: #ffae00 !important; text-shadow: 0 1px 2px rgba(0,0,0,0.85); } .category-card.cat-merged { --cat-glow-a: var(--live, #ff0000); --cat-glow-b: var(--purple, #9146ff); box-shadow: -2px -2px 16px color-mix(in srgb, var(--cat-glow-a) 60%, transparent), 2px 2px 16px color-mix(in srgb, var(--cat-glow-b) 60%, transparent); } .category-card.cat-merged:hover, .category-card.cat-merged.focused { box-shadow: -3px -3px 24px color-mix(in srgb, var(--cat-glow-a) 82%, transparent), 3px 3px 24px color-mix(in srgb, var(--cat-glow-b) 82%, transparent), 0 0 30px color-mix(in srgb, var(--cat-glow-a) 40%, transparent), 0 0 30px color-mix(in srgb, var(--cat-glow-b) 40%, transparent); } .cat-merged-labels { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .cat-merge-sep { font-size: 11px; font-weight: 800; opacity: 0.65; padding: 0 2px; } /* FEAT-CATEGORY-AGGREGATION Baustein 3: reine Icon-Reihe für kanonische Kacheln mit ≥3 beitragenden Hostern (Text-Label wäre bei bis zu 6 Hostern auf 3 m TV-Betrachtungsabstand nicht mehr lesbar — s. Cross-Plattform- Pflicht). Nutzt dieselben .logo-slot-sm-Icons wie der 2-Hoster-Fall. */ .cat-merged-icons { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; } .cat-icon-chip { margin-right: 0 !important; width: 16px; height: 16px; } .cat-icon-chip img { width: 100%; height: 100%; object-fit: contain; display: block; } .settings-pair-token, .pairing-code-display, #mobile-token { margin: 0 auto 14px; font-family: monospace; font-size: clamp(22px, 3vw, 30px); font-weight: 900; letter-spacing: 6px; color: var(--text, #f2f4f8); text-align: center; } /* §5 Kontrast-Fix Meta-Texte (Aufrufe/Datum/Likes) in Retro & Dark */ :root[data-theme="retro"] .card-views, :root[data-theme="retro"] .card-uploaded, :root[data-theme="retro"] .card-likes, :root[data-theme="retro"] .card-meta-duration { color: #e6e1d6; } :root[data-theme="dark"] .card-views, :root[data-theme="dark"] .card-uploaded, :root[data-theme="dark"] .card-likes, :root[data-theme="dark"] .card-meta-duration { color: #bcc3cc; } /* ── §7: Such-Plattform-Filterpillen (clientseitiger Filter) ──────────────── */ .filter-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 820px; margin: 0 auto; padding: 6px 0 0; } .filter-pill { background: transparent; color: var(--sys-idle); border: 1px solid var(--card-border, rgba(255, 255, 255, 0.18)); border-radius: 999px; padding: 6px 16px; font-size: 13px; cursor: pointer; transition: transform 0.15s, color 0.15s, border-color 0.15s; } body:not(.kbd-active) .filter-pill:hover { color: var(--text); border-color: var(--sys-idle); } .filter-pill.active { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.55); color: var(--text); font-weight: 700; } .filter-pill.focused { border-color: var(--sys-focus); color: var(--sys-focus); } body.nav-settings .filter-pills { visibility: hidden; pointer-events: none; } body.app-phone .filter-pill { padding: 10px 18px; font-size: 14px; } /* ── PC-Web: Plattform-/Typ-Filter als saubere Segment-Utility ────────────── Auf dem Desktop wirken die losen, zentrierten Pillen unruhig. Wir fassen sie zu einer kompakten, links ausgerichteten Segment-Gruppe in einem Panel zusammen (moderne „Filter-Utility"). Greift NUR im echten Desktop-Browser. */ body.app-desktop #search-platform-pills, body.app-desktop #search-filter-tabs { display: inline-flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px; width: auto; max-width: none; margin: 12px 0 0; padding: 5px; background: var(--card-2, rgba(255, 255, 255, 0.04)); border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10)); border-radius: 14px; } body.app-desktop #search-filter-tabs { margin-top: 8px; margin-bottom: 4px; } body.app-desktop #search-platform-pills .filter-pill, body.app-desktop #search-filter-tabs .filter-tab { border: none; background: transparent; border-radius: 10px; padding: 8px 18px; font-size: 13px; font-weight: 600; } body.app-desktop #search-platform-pills .filter-pill.active, body.app-desktop #search-filter-tabs .filter-tab.active { background: var(--sys-focus, #4a5468); color: #fff; font-weight: 700; } body.app-desktop #search-platform-pills .filter-pill:not(.active):hover, body.app-desktop #search-filter-tabs .filter-tab:not(.active):hover { background: rgba(255, 255, 255, 0.08); color: var(--text); } /* ── §8: Kurzformat-Weiche — Clip-/Short-Badges & Portrait-Karten ─────────── */ .badge-clip { color: #ffd24a; } .badge-short { color: #ff5ca2; } /* Hochformat-Kachel (Shorts): 9:16 statt 16:9. padding-top-Hack + aspect-ratio Fallback identisch zu .card-thumbnail (Chromium < M88 auf den TVs). */ .video-card.card-portrait .card-thumbnail { padding-top: 177.78%; } @supports (aspect-ratio: 1 / 1) { .video-card.card-portrait .card-thumbnail { padding-top: 0; aspect-ratio: 9 / 16; } } /* Vertikaler Shorts-Feed — vorerst handy-exklusiv (§8-Prep, noch nicht im Nav). */ .shorts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; } /* Bug 2.3: Shorts wird wie jede Sektion über .active gesteuert (Desktop/Web + Phone) → kein dauerhaft leerer Bildschirm mehr. TV bleibt 16:9-only (siehe app-tv-Regel). */ #section-shorts { display: none; } .section#section-shorts.active { display: block; } /* ════════════════════════════════════════════════════════════════════════════ BATCH 1 — Benachrichtigungscenter (Header-Glocke) · plattformübergreifend ════════════════════════════════════════════════════════════════════════════ */ /* §M11: Glocke nicht an den äußersten Rand quetschen → etwas mehr Luft zum Rand, und der Slot zentriert sein Icon geometrisch (inline-flex center). */ #header-actions { position: relative; margin-left: auto; margin-right: 14px; display: flex; align-items: center; justify-content: center; } .header-icon-btn { position: relative; background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--sys-idle, #9aa0aa); padding: 8px; border-radius: 8px; line-height: 0; transition: color 0.15s, background 0.15s; } .header-icon-btn svg { width: 24px; height: 24px; display: block; } .header-icon-btn:hover { color: var(--text, #fff); background: rgba(255, 255, 255, 0.06); } .notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #ff3b5c; color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; } .notif-badge.hidden { display: none; } /* FEAT-2: Wiedergabe-Fortschritt auf Video-Karten + Abo-Unread-Badge */ .card-watch-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.18); z-index: 3; pointer-events: none; } .card-watch-progress > span { display: block; height: 100%; background: #e50914; max-width: 100%; } .nav-item { position: relative; } .nav-unread-badge { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #e50914; color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; } .nav-unread-badge.hidden { display: none; } /* FEAT-4: TV Remote Security Notice */ .tv-remote-security-notice { position: fixed; bottom: 14px; right: 18px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: rgba(18, 20, 28, 0.9); border: 1px solid rgba(0, 234, 255, 0.35); color: #f2f4f8; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; pointer-events: none; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); } .tv-remote-security-notice.hidden { display: none; } .tv-remote-security-dot { width: 8px; height: 8px; border-radius: 50%; background: #1aff8c; box-shadow: 0 0 8px rgba(26, 255, 140, 0.65); flex-shrink: 0; } body:not(.app-tv) .tv-remote-security-notice { display: none !important; } body.player-active .tv-remote-security-notice { opacity: 0.72; } /* FEAT-3: TV OAuth QR Auth overlay */ .tv-auth-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.78); padding: 24px; } .tv-auth-overlay.hidden { display: none; } .tv-auth-box { position: relative; width: min(520px, 96vw); padding: 28px 24px 22px; border-radius: 16px; background: rgba(20, 10, 40, 0.95); border: 1px solid rgba(0, 234, 255, 0.35); text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); } .tv-auth-close { position: absolute; top: 10px; right: 12px; border: none; background: transparent; color: #868c99; font-size: 18px; cursor: pointer; } .tv-auth-title { font-size: 22px; margin: 0 0 10px; color: #f2f4f8; } .tv-auth-desc { font-size: 14px; line-height: 1.55; color: #868c99; margin: 0 0 16px; } .tv-auth-qr img { border-radius: 12px; background: #fff; padding: 8px; } .tv-auth-status { font-size: 14px; font-weight: 700; margin-top: 12px; color: #868c99; } .tv-auth-status.ok { color: #1aff8c; } .tv-auth-room { margin-top: 10px; font-size: 12px; color: #5a5f6c; } .tv-auth-settings-banner { margin: 0 24px 18px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(0, 234, 255, 0.25); background: rgba(20, 10, 40, 0.45); } #notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 86vw; max-height: 60vh; overflow-y: auto; z-index: 1500; background: var(--card-2, #16161f); border: 1px solid var(--card-border, rgba(255, 255, 255, 0.12)); border-radius: 12px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55); } #notif-panel.hidden { display: none; } #notif-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.10)); position: sticky; top: 0; background: var(--card-2, #16161f); } #notif-panel-title { font-weight: 700; color: var(--text, #fff); font-size: 14px; } #notif-mark-read { background: transparent; border: none; cursor: pointer; font-size: 12px; color: var(--neon-pink, #4a5468); } #notif-mark-read:hover { text-decoration: underline; } .notif-item { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.07)); } .notif-item.unread { background: rgba(74, 84, 104, 0.08); } .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; margin-top: 6px; flex: 0 0 auto; } .notif-item.unread .notif-dot { background: var(--neon-pink, #4a5468); } .notif-title { font-weight: 600; color: var(--text, #fff); font-size: 14px; } .notif-text { color: var(--sys-idle, #9aa0aa); font-size: 13px; margin-top: 2px; } .notif-time { color: var(--sys-idle, #9aa0aa); font-size: 11px; margin-top: 4px; opacity: 0.7; } .notif-empty { padding: 28px 14px; text-align: center; color: var(--sys-idle, #9aa0aa); font-size: 13px; } /* ════════════════════════════════════════════════════════════════════════════ BATCH 1 — Desktop-Player (YouTube-Stil). Aktiv nur auf body.app-desktop; das 65/35-Split erst ab 1024px (graceful Single-Column darunter). ════════════════════════════════════════════════════════════════════════════ */ #player-desktop { display: none; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay { position: fixed; inset: 0; display: block; overflow-y: auto; background: var(--bg, #0a0a0f); padding: 24px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-controls, :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-info, :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-sidebar { display: none !important; } /* BUG-86: #player-touch-overlay bewusst NICHT mehr in dieser Liste — er zieht per JS (App.PlayerDesktop.init) in #pd-video-stage um und wird dort oben gezielt sichtbar/interaktiv geschaltet (siehe Regel weiter oben). */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-desktop { display: block; max-width: 1600px; margin: 0 auto; color: var(--text, #fff); } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-primary { min-width: 0; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-back { background: transparent; border: 1px solid var(--card-border, rgba(255, 255, 255, 0.18)); color: var(--text, #fff); border-radius: 999px; padding: 8px 16px; cursor: pointer; font-size: 14px; margin-bottom: 14px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-back:hover { border-color: var(--sys-focus, #4a5468); color: var(--sys-focus, #4a5468); } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage { position: relative; width: 100%; height: 0; padding-top: 56.25%; background: #000; border-radius: 12px; overflow: hidden; } /* UI-56 (revised): standalone badge hidden — metrics now inline in creator row. */ .pd-sub-metrics { display: none !important; } .pd-sub-metrics-inline { display: inline-flex; align-items: center; vertical-align: middle; font-size: 12px; font-weight: 600; opacity: 0.9; margin-left: 8px; letter-spacing: 0.2px; } @supports (aspect-ratio: 1 / 1) { :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage { height: auto; padding-top: 0; aspect-ratio: 16 / 9; } } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #player, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #yt-player, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #dm-player, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #av-player, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border: 0; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #player-placeholder, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #player-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* BUG-PIP-KINO-REGRESSIONS (Bug 1): Info-Block unter dem Player war zu weit auseinandergezogen (Titel/Creator-Zeile/Karten-Innenabstand addierten sich zu ~66px Leerraum vor dem eigentlichen Beschreibungstext) — vertikale Margins über Titel/Creator-Row/Karten/Karten-Titel/Desc-Meta kompakter gezogen, identisch in allen 3 Theme-Dateien. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-title { font-size: 20px; font-weight: 700; margin: 10px 0 6px; line-height: 1.3; } /* UI-PLAYER-NAME-WRAP: #pd-creator-row wird 2-zeilig statt 1-zeilig — Zeile 1 = Avatar + Name (bekommt die volle Zeilenbreite, kein Innerhalb-eigener-Box-Umbruch mehr), Zeile 2 = Badges (Live/Hoster-Kanal-Link) + Action-Buttons, zusammen auf einer Hoehe. #pd-creator-meta wird per display:contents aufgeloest, damit Name und Badges (DOM-technisch weiterhin Kinder von #pd-creator-meta, siehe index.html) unabhaengig voneinander per Flex-order auf die richtige Zeile von #pd-creator-row verteilt werden koennen — keine DOM-Aenderung noetig. Nur fuer Desktop und Phone-im-Player (pd-mobile-active); die dedizierte UI-85 Mobile-Landscape-Loesung weiter unten in dieser Datei setzt #pd-creator-meta gezielt zurueck auf display:block, damit sie unangetastet bleibt. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-creator-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-avatar { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; background-size: cover; background-position: center; background-color: var(--card-2, #16161f); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: var(--text, #fff); } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-creator-meta { display: contents; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-creator-name { order: 1; flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-creator-name:hover { color: var(--sys-focus, #4a5468); } /* Erzwungener Zeilenumbruch nach Zeile 1 (Avatar+Name) via leeres Flex-Break-Element — analoge Technik wie die bereits bestehende UI-85 Mobile-Landscape-Loesung. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-creator-row::after { content: ''; order: 2; flex: 1 0 100%; height: 0; line-height: 0; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-badges { order: 3; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; align-items: center; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, 0.08); color: var(--text, #fff); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-badge .logo-slot-sm img { width: 14px; height: 14px; display: block; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-badge-live { background: #ff3b5c; color: #fff; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-badge-placeholder { background: transparent; color: var(--sys-idle, #9aa0aa); border: 1px dashed var(--card-border, rgba(255, 255, 255, 0.22)); } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-actions { order: 4; margin-left: auto; display: flex; gap: 10px; flex: 0 0 auto; align-items: center; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-btn { background: rgba(255, 255, 255, 0.10); color: var(--text, #fff); border: none; border-radius: 999px; padding: 9px 18px; cursor: pointer; font-size: 14px; font-weight: 600; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-btn:hover { background: rgba(255, 255, 255, 0.18); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-btn-primary { background: var(--neon-pink, #4a5468); color: #fff; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-btn-primary.following { background: rgba(255, 255, 255, 0.10); color: var(--text, #fff); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-card { background: var(--card-2, #16161f); border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08)); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-card-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-description { position: relative; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-desc-meta { font-size: 13px; color: var(--sys-idle, #9aa0aa); margin-bottom: 6px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-desc-text { white-space: pre-wrap; word-break: break-word; overflow: hidden; font-size: 14px; line-height: 1.5; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-description.collapsed .pd-desc-text { max-height: 66px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-desc-toggle { background: transparent; border: none; cursor: pointer; padding: 6px 0 0; color: var(--sys-idle, #9aa0aa); font-weight: 700; font-size: 13px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-desc-toggle:hover { color: var(--text, #fff); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-sponsored { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.08)); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-sponsored.hidden { display: none; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-sponsored-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--sys-idle, #9aa0aa); margin-bottom: 8px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-sponsored-link { display: block; color: var(--neon-pink, #4a5468); font-size: 14px; padding: 4px 0; text-decoration: none; word-break: break-all; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-sponsored-link:hover { text-decoration: underline; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment { padding: 12px 0; border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.06)); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment:last-child { border-bottom: none; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-author { font-weight: 600; font-size: 13px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-text { font-size: 14px; line-height: 1.45; margin-top: 2px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-toggle { background: transparent; border: none; cursor: pointer; color: var(--neon-pink, #4a5468); font-size: 12px; font-weight: 700; padding: 6px 0 0; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-replies { display: none; margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--card-border, rgba(255, 255, 255, 0.12)); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment.replies-open .pd-comment-replies { display: block; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reply { padding: 6px 0; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comments-empty { padding: 18px 0; color: var(--sys-idle, #9aa0aa); font-size: 13px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-side { min-width: 0; overflow: hidden; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-chat.hidden { display: none; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-chat-frame { width: 100%; height: 460px; border: 0; border-radius: 8px; background: #000; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco { display: flex; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco:hover { background: rgba(255, 255, 255, 0.06); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-thumb { width: 150px; height: 84px; flex: 0 0 auto; border-radius: 6px; background-size: cover; background-position: center; background-color: var(--card-2, #16161f); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-meta { min-width: 0; } /* §M5.1: Empfehlungs-Tab-Leiste (Alle / Alle Live Videos). */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-recos-tabs { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-tab { padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--text-dim); background: transparent; border-radius: 999px; border: 1px solid var(--card-border, rgba(255,255,255,0.16)); transition: color .15s, border-color .15s, background .15s; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-tab:hover { color: var(--text); border-color: var(--sys-focus); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-tab.active { color: var(--text); border-color: var(--sys-focus); background: rgba(255,255,255,0.08); } /* UI-109: D-Pad/Tastatur-Fokusring — vorher nur innerhalb des jetzt entfernten PC-Folder-Tab-Overrides gestylt (siehe unten), TV/Keyboard-Nutzer hatten hier keinen sichtbaren Fokus. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-tab.focused { border-color: var(--sys-focus); color: var(--sys-focus); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-empty { padding: 16px 8px; font-size: 14px; color: var(--text-muted); } /* §M5.2: Empfehlungs-Werbe-Kachel — gleiche Maße wie eine pd-reco-Karte, klick-tot. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-ad { cursor: default; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-ad:hover { background: transparent; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-ad-thumb { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#1e1e2f,#0a0a0f); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-ad-ic { font-size: 28px; opacity: 0.85; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-title { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-creator { font-size: 12px; color: var(--sys-idle, #9aa0aa); margin-top: 4px; } /* T20 — Reco-Karten: dynamischer Marken-Glow (per data-platform → --pd-glow) + kleine, klickbare Quellen-Pills. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco { position: relative; border-left: 3px solid var(--pd-glow, transparent); transition: background .15s ease, box-shadow .15s ease; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco:hover { box-shadow: inset 0 0 0 1px var(--pd-glow, transparent), 0 0 16px -6px var(--pd-glow, transparent); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-pill { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--pd-glow, var(--card-border)); background: rgba(255,255,255,0.04); cursor: pointer; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-pill:hover { box-shadow: 0 0 10px -2px var(--pd-glow, var(--sys-focus)); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-pill .logo-slot-sm img { width: 13px; height: 13px; display: block; } /* §AP9 T3.2: Empfehlungs-Rail — saubere Hoster-Logos (KEINE Kreise), Logo vor dem Creator-Namen, LIVE-Badge + Zuschauer (live) bzw. Dauer-Overlay + Aufrufe (VOD). */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-thumb { position: relative; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-live-badge { position: absolute; top: 6px; left: 6px; background: var(--live, #ef4444); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .4px; padding: 2px 7px; border-radius: 5px; line-height: 1.4; box-shadow: 0 1px 4px rgba(0,0,0,.55); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-dur { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.82); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; line-height: 1.5; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-creator { display: flex; align-items: center; gap: 6px; min-width: 0; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-hoster-logo { width: 16px; height: 16px; flex: 0 0 auto; object-fit: contain; border-radius: 0; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-creator-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-stat { font-size: 11px; color: var(--sys-idle, #9aa0aa); margin-top: 3px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reco-stat-live { color: var(--live, #ef4444); font-weight: 700; } /* T20 — Likes-Zähler + „Teilen"-Button in der Aktionszeile. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-likes { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--text-dim, #b7bcc8); margin-right: 6px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-likes-ic { color: var(--live, #ff3b5c); font-size: 15px; } /* T20 — Cross-Platform-Sub-Badge neben dem Kommentar-Autor. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-sub-badge { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 6px; padding: 1px 7px 1px 4px; border-radius: 999px; background: rgba(255, 43, 214, 0.16); border: 1px solid var(--neon-pink, #4a5468); color: var(--neon-pink, #4a5468); font-size: 11px; font-weight: 800; letter-spacing: .3px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-sub-badge .logo-slot-sm img { width: 12px; height: 12px; display: block; } /* T20 — Kommentar-Composer (Haupt + Antworten). */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-composer, :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reply-composer { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 14px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reply-composer { margin: 8px 0 4px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-reply-composer.hidden { display: none; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-textarea { flex: 1 1 auto; min-width: 0; resize: vertical; background: var(--card-2, #16161f); color: var(--text); border: 1.5px solid var(--card-border, rgba(255,255,255,0.18)); border-radius: 10px; padding: 9px 12px; font-size: 14px; font-family: inherit; line-height: 1.4; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-textarea:focus { outline: none; border-color: var(--sys-focus); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-acts { display: flex; gap: 14px; align-items: center; margin-top: 4px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-reply-btn { background: transparent; border: none; cursor: pointer; color: var(--sys-idle, #9aa0aa); font-size: 12px; font-weight: 700; padding: 6px 0 0; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-reply-btn:hover { color: var(--text); } /* Task 29: dezenter Melden-Button (gedämpft, wird bei Hover rot). */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-report-btn { background: transparent; border: none; cursor: pointer; color: var(--sys-idle, #9aa0aa); font-size: 12px; font-weight: 700; padding: 6px 0 0; margin-left: auto; opacity: 0.75; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-report-btn:hover { color: #ff5c8a; opacity: 1; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-report-btn:disabled { color: #ff5c8a; cursor: default; opacity: 0.8; } /* ── Sprint 4 §2 — Entkoppelte Chat-Selector-Leiste + Placeholder ───────────── */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-chat-tabs { display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-chat-tab { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .3px; background: var(--card-2, rgba(255,255,255,0.05)); color: var(--sys-idle, #9aa0aa); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); transition: all .15s ease; /* UI-87 Härtung: Label-Text darf die schmalere Chat-Spalte nie aufdrücken (Flex-Kinder haben per Default min-width:auto → Content-Breite gewinnt sonst gegen die reduzierten 224/238px-Werte und quetscht #pd-primary). */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-chat-tab .logo-slot-sm img { width: 14px; height: 14px; display: block; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-chat-tab:hover { color: var(--text); border-color: var(--sys-focus); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-chat-tab.active { color: var(--bg, #06010f); background: var(--sys-focus); border-color: var(--sys-focus); box-shadow: 0 0 12px -2px var(--sys-glow, rgba(255,43,214,0.5)); } /* §3.4 Twitch-Chat-Layout-Fix: .pd-chat-body war row-flex → der iframe kollabierte zur Mikro-Spalte. column + voller iframe-Breite; BTTV/FFZ-Streifen ans untere Ende des Chat-Wrappers (margin-top:auto). */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-chat-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-chat-body #pd-chat-frame { width: 100%; flex: 1 1 auto; min-width: 0; min-height: 360px; } /* BUG-7: strip anchors to column bottom; explicit width prevents any row-overflow squish. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-chat-body .pc-ext-strip { margin-top: auto; flex: 0 0 auto; width: 100%; box-sizing: border-box; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-chat-frame.hidden { display: none; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .chat-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; width: 100%; min-height: 240px; padding: 28px 22px; box-sizing: border-box; border-radius: 10px; border: 1px dashed var(--card-border, rgba(255,255,255,0.16)); background: var(--card-2, rgba(255,255,255,0.04)); color: var(--text-muted, #8a8f98); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .chat-placeholder-ic { font-size: 34px; opacity: .65; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .chat-placeholder-tx { margin: 0; font-size: 13.5px; line-height: 1.6; font-weight: 600; max-width: 260px; } /* ── Sprint 4 §3.2 — Kommentar-Prioritäts-Badges (max. 3 + Overflow) ─────────── */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-name { font-weight: 800; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-cbadge { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-right: 5px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .2px; background: rgba(255,255,255,0.07); color: var(--text, #f2f4f8); border: 1px solid rgba(255,255,255,0.12); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-cbadge .logo-slot-sm img { width: 11px; height: 11px; display: block; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-cbadge-staff { color: var(--sys-focus); border-color: var(--sys-focus); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-cbadge-cutter { color: var(--sys-focus); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-cbadge-member, :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-cbadge-patreon, :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-cbadge-premium { color: #ffd24a; border-color: rgba(255,210,74,0.4); background: rgba(255,210,74,0.10); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-cbadge-sub { color: var(--neon-pink, #4a5468); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-cbadge-more { cursor: help; color: var(--sys-idle, #9aa0aa); } /* ── Sprint 4 §3.3 — Sortier-Leiste ─────────────────────────────────────────── */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comments-sortbar { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-sort-label { font-size: 12px; font-weight: 700; color: var(--text-muted, #8a8f98); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-sort-select { padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; background: var(--card-2, rgba(255,255,255,0.05)); color: var(--text, #f2f4f8); border: 1px solid var(--card-border, rgba(255,255,255,0.14)); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-sort-select:focus { outline: none; border-color: var(--sys-focus); } /* ── Sprint 4 §3.4 — Angepinnter Kommentar ──────────────────────────────────── */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-pinned { border-left: 3px solid var(--sys-focus); padding-left: 10px; background: linear-gradient(90deg, var(--card-2, rgba(255,255,255,0.05)), transparent 70%); border-radius: 6px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-pinned-tag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 5px; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--sys-focus); } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-pin-btn { background: transparent; border: none; cursor: pointer; color: var(--sys-idle, #9aa0aa); font-size: 12px; font-weight: 700; padding: 6px 0 0; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-comment-pin-btn:hover { color: var(--sys-focus); } @media (min-width: 1024px) { :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-desktop { display: grid; grid-template-columns: minmax(0, 75.5fr) minmax(0, 24.5fr); /* UI-87: Chat -30%, Gewinn → #pd-primary */ gap: 24px; align-items: start; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-back { grid-column: 1 / -1; } } /* ════════════════════════════════════════════════════════════════════════════ FEAT-11/UI-94 — Smart Fullscreen Engine, Overlay Purge & Pictobar-Inversion. Die Detailansicht (Video + Piktogramme + Beschreibung + Kommentare) läuft jetzt AUCH auf dem Handy (body.app-phone.pd-mobile-active, s. o. per :is()-Portierung von Batch 1). Diese Regeln sind NEU (kein Desktop-Gegenstück) und betreffen nur Handy-spezifisches Feintuning + die neue Primär-/Sekundär-Piktogrammleiste. ════════════════════════════════════════════════════════════════════════════ */ #pd-video-stage:fullscreen, #pd-video-stage:-webkit-full-screen, #pd-video-stage:-ms-fullscreen { width: 100vw !important; height: 100vh !important; aspect-ratio: auto !important; padding-top: 0 !important; max-height: none !important; border-radius: 0 !important; background: #000; } body.app-phone.pd-mobile-active #player-overlay { padding: 12px; } body.app-phone.pd-mobile-active #pd-video-stage { border-radius: 10px; } body.app-phone.pd-mobile-active #pd-title { font-size: 17px; margin: 12px 0 10px; } body.app-phone.pd-mobile-active .pd-card { padding: 12px 14px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-picto-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-picto-row-primary { margin: 0 0 6px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-picto-row-secondary { margin: 8px 0 4px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-picto-row-secondary.hidden { display: none; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-picto-adv-toggle { display: flex; align-items: center; gap: 6px; margin: 2px auto 0; padding: 6px 14px; background: transparent; border: none; cursor: pointer; color: var(--sys-idle, #9aa0aa); font-size: 12px; font-weight: 700; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-picto-adv-toggle:hover { color: var(--text, #fff); } /* UI-107-Audit (Claudit): neuer Toggle-Button ohne Fokusring — D-Pad-Nutzer sahen keine Markierung, welches Element gerade fokussiert ist, bevor sie das Panel oeffnen konnten. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-picto-adv-toggle:focus { outline: 2px solid var(--sys-focus); outline-offset: 2px; border-radius: 6px; } body.app-tv .pd-picto-adv-toggle:focus { outline-width: 3px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-picto-adv-toggle svg { transition: transform .18s ease; } :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-picto-adv-toggle.open svg { transform: rotate(180deg); } /* ════════════════════════════════════════════════════════════════════════════ BATCH 2 — Following-Kalender (Sidebar): gefolgte Creator + Status-Dot 🟣 live · 🔴 neues VOD · ⚫ Social-Ankündigung · gedimmt = idle ════════════════════════════════════════════════════════════════════════════ */ #following-cal { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.08)); } .following-cal-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--sys-idle, #9aa0aa); padding: 0 6px 8px; } #following-list { list-style: none; margin: 0; padding: 0; max-height: 38vh; overflow-y: auto; } .following-item { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; cursor: pointer; } .following-item:hover { background: rgba(255, 255, 255, 0.06); } .fc-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .fc-dot-live { background: #b026ff; box-shadow: 0 0 6px #b026ff; } .fc-dot-newvod { background: #ff3b5c; } .fc-dot-social { background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.7); } .fc-dot-idle { background: var(--sys-idle, #555); opacity: 0.4; } .fc-avatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; background: var(--card-2, #16161f); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text, #fff); } .fc-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fc-status { font-size: 10px; color: var(--sys-idle, #9aa0aa); flex: 0 0 auto; } .following-empty { font-size: 12px; color: var(--sys-idle, #9aa0aa); padding: 8px 6px; line-height: 1.4; } /* ════════════════════════════════════════════════════════════════════════════ BATCH 4/5 — Feed-Filter-Toggles, Premium-Sperre, Gatekeeper-Modal ════════════════════════════════════════════════════════════════════════════ */ .settings-toggle-row { cursor: pointer; } .pc-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; display: inline-block; } .pc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .pc-switch-track { position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.18); transition: background 0.18s; } .pc-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.28); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); transition: transform 0.18s; } .pc-switch input:checked + .pc-switch-track { background: var(--neon-pink, #4a5468); } .pc-switch input:checked + .pc-switch-track::after { transform: translateX(20px); } .pc-switch input:focus + .pc-switch-track { box-shadow: 0 0 0 2px var(--sys-focus, #4a5468); } /* Premium-gesperrte Karte (abgedunkelt + Schloss-Overlay) */ .video-card.premium-locked .card-thumbnail { filter: brightness(0.4) saturate(0.6); } .video-card.premium-locked { cursor: pointer; } .premium-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; } .premium-lock-ic { font-size: 26px; } .premium-lock-tx { font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.55); padding: 3px 10px; border-radius: 999px; } /* Premium-Gatekeeper-Modal */ #premium-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); } #premium-modal.hidden { display: none; } #premium-modal-box { width: 380px; max-width: 88vw; background: var(--card-2, #16161f); border: 1px solid var(--card-border, rgba(255, 255, 255, 0.12)); border-radius: 16px; padding: 28px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } #premium-modal-lock { font-size: 38px; margin-bottom: 8px; } #premium-modal-box h2 { font-size: 19px; margin: 0 0 10px; color: var(--text, #fff); } #premium-modal-desc { font-size: 14px; color: var(--sys-idle, #9aa0aa); line-height: 1.5; margin: 0 0 20px; } #premium-modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Gast-Follow-Sperre (kein Account verknüpft) — gleiche Optik wie Premium-Modal */ #guest-follow-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); } #guest-follow-modal.hidden { display: none; } #guest-follow-box { width: 400px; max-width: 88vw; background: var(--card-2, #16161f); border: 1px solid var(--card-border, rgba(255, 255, 255, 0.12)); border-radius: 16px; padding: 28px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } #guest-follow-icon { font-size: 38px; margin-bottom: 8px; } #guest-follow-box h2 { font-size: 19px; margin: 0 0 10px; color: var(--text, #fff); } #guest-follow-desc { font-size: 14px; color: var(--sys-idle, #9aa0aa); line-height: 1.5; margin: 0 0 20px; } #guest-follow-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Account-Merge-Dialog — gleiche Optik wie Guest-Follow/Premium-Modal */ #merge-modal { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); } #merge-modal.hidden { display: none; } #merge-box { width: 420px; max-width: 88vw; background: var(--card-2, #16161f); border: 1px solid var(--card-border, rgba(255, 255, 255, 0.12)); border-radius: 16px; padding: 28px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } #merge-icon { font-size: 38px; margin-bottom: 8px; } #merge-box h2 { font-size: 19px; margin: 0 0 10px; color: var(--text, #fff); } #merge-desc { font-size: 14px; color: var(--sys-idle, #9aa0aa); line-height: 1.5; margin: 0 0 20px; } /* T27.3 — Sicherheits-Hinweis (OAuth-Reset) im Merge-Dialog: deutlich abgesetzt. */ .merge-warning { font-size: 13px; line-height: 1.5; text-align: left; color: var(--text, #fff); background: rgba(255, 140, 0, 0.10); border: 1px solid var(--amber, #ff8c00); border-radius: 10px; padding: 11px 13px; margin: 0 0 18px; } #merge-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* BUG-74: #merge-cancel trägt nur die nackte .platform-btn-Klasse (kein .link/ .unlink) — dafür existiert im ganzen Theme keine .focused-Regel, der neue D-Pad-Fokus wäre unsichtbar. Scoped Fallback deckt BEIDE Dialog-Buttons ab (redundant, aber unschädlich für #merge-confirm.link.focused). */ #merge-modal .platform-btn.focused { border-color: var(--sys-focus); color: #ffffff; box-shadow: var(--sys-glow); } .pd-premium-optin { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 13px; color: var(--sys-idle, #9aa0aa); cursor: pointer; } .pd-premium-optin.hidden { display: none; } .pd-premium-optin input { width: 16px; height: 16px; cursor: pointer; flex: 0 0 auto; } /* ════════════════════════════════════════════════════════════════════════════ FINAL RUN — Zwei-Reihen-Header · Player-Button-Equalize · Plattform-Verstecken ════════════════════════════════════════════════════════════════════════════ */ #header.header-two-row { flex-direction: column; align-items: stretch; height: auto; gap: 10px; } /* UI-10: top row is now a flex row: [arrow] [search] [bell] */ .header-row-top { width: 100%; display: flex; align-items: center; gap: 8px; } .header-row-top #search-bar { flex: 1; min-width: 0; margin-bottom: 0; } .header-row-top #header-actions { flex-shrink: 0; margin-left: 0; } #header.header-two-row #search-bar { width: auto; box-sizing: border-box; border: 1.5px solid var(--neon-pink, #4a5468); box-shadow: 0 0 10px -3px var(--neon-pink, #4a5468); margin-bottom: 0; } #header.header-two-row #search-bar.focused { border-color: var(--sys-focus); box-shadow: var(--sys-glow, 0 0 14px -2px var(--sys-focus)); } .header-row-bottom { display: flex; align-items: center; gap: 10px; width: 100%; } /* UI-9: Arrow button — hidden on desktop, shown as touch-friendly arrow on mobile. */ .header-burger, .header-arrow-btn { display: none; background: transparent; border: none; color: var(--text, #fff); line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 10px; flex-shrink: 0; } .header-burger:hover, .header-arrow-btn:hover { background: rgba(255,255,255,0.10); } /* Arrow flips when sidebar is open. */ body.app-phone .header-burger, body.app-phone .header-arrow-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; } body.app-phone.sidebar-mobile-open .header-arrow-btn svg, body.app-phone.sidebar-mobile-open .header-burger svg { transform: scaleX(-1); } body.app-phone #mobile-menu-btn { display: none !important; } /* On mobile: hide the filter-tabs row — filter tabs appear via scroll or dedicated section UI. */ body.app-phone .header-row-bottom { display: none; } /* Desktop-Player: Zurück/Profil/Folgen einheitliche Höhe & visuelle Gewichtung */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-back, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-profile, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-follow { height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 999px; } /* Pro-Plattform „verstecken"-Checkbox in den Einstellungen */ .platform-hide { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--sys-idle, #9aa0aa); cursor: pointer; } .platform-hide input { width: 14px; height: 14px; cursor: pointer; flex: 0 0 auto; } /* §AP8 T7: BTTV/FFZ-Checkboxen klebten ineinander → sauber gestapelt mit klarem Abstand. */ .platform-ext-opts { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 6px; } .platform-ext-opts .platform-ext-opt { margin-top: 0; align-items: flex-start; line-height: 1.45; } .platform-ext-opts .platform-ext-opt input { margin-top: 2px; } /* ── Twitch-Cookie-Consent (Vollbild-Helfer + Chat-Trigger) ──────────────────── */ #player-chat-cookie-btn { display: block; width: 100%; box-sizing: border-box; background: var(--neon-pink, #4a5468); color: #fff; border: none; padding: 8px 10px; font-size: 12px; font-weight: 700; cursor: pointer; } #twitch-consent-overlay { position: fixed; inset: 0; z-index: 2200; display: flex; flex-direction: column; background: var(--bg, #0a0a0f); } #twitch-consent-overlay.hidden { display: none; } #twitch-consent-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.12)); } #twitch-consent-title { font-weight: 700; color: var(--text, #fff); font-size: 15px; } #twitch-consent-done { background: var(--neon-pink, #4a5468); color: #fff; border: none; border-radius: 999px; padding: 8px 20px; font-size: 14px; font-weight: 700; cursor: pointer; } #twitch-consent-hint { color: var(--sys-idle, #9aa0aa); font-size: 13px; padding: 10px 16px; margin: 0; line-height: 1.4; } /* unten Platz lassen → Twitch-„Akzeptieren" liegt NICHT hinter der Gestenleiste */ #twitch-consent-frame-wrap { flex: 1; min-height: 0; padding: 0 8px calc(64px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; } #twitch-consent-frame { width: 100%; height: 100%; border: 0; background: #18181b; } /* ── Handy/Hochkant: Zwei-Reihen-Header kompakt + einreihige Steuerzeile ─────── Überschreibt ältere app-phone-Regeln (großes Tab-Padding, flex-wrap, 64px-Pad), die die Leiste umbrechen/aufblähen ließen. */ body.app-phone #header.header-two-row { padding: 10px 12px; gap: 8px; height: auto; align-items: stretch; } body.app-phone .header-row-top { width: 100%; } body.app-phone .header-row-top #search-bar { width: 100%; margin-bottom: 0; box-sizing: border-box; } body.app-phone .header-row-bottom { display: flex; align-items: center; gap: 8px; width: 100%; flex-wrap: nowrap; } body.app-phone .header-row-bottom #filter-tabs { display: flex; flex-wrap: nowrap; gap: 6px; flex: 0 1 auto; min-width: 0; } body.app-phone .header-row-bottom .filter-tab { padding: 7px 12px; font-size: 13px; margin: 0; } body.app-phone .header-row-bottom #header-actions { margin-left: auto; flex: 0 0 auto; } body.app-phone .header-burger { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 4px 6px; font-size: 22px; } /* ── Kategorie-Detailansicht (self-contained Live/VOD, kein Such-Redirect) ──── */ #category-detail.hidden, #grid-categories.hidden { display: none !important; } .cat-detail-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .cat-detail-back { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; background: var(--card-2, #15151f); color: var(--text, #fff); cursor: pointer; border: 1.5px solid var(--card-border, #2a2a3a); border-radius: 10px; font-size: 14px; font-weight: 600; } .cat-detail-back.focused, .cat-detail-back:hover { border-color: var(--sys-focus); box-shadow: var(--sys-glow, 0 0 12px -2px var(--sys-focus)); } .cat-detail-name { font-size: 22px; font-weight: 800; color: var(--neon-pink, #fff); } .cat-detail-tabs { display: flex; gap: 10px; margin-bottom: 16px; } /* UI-90: Live/VOD-Tab automatisch per JS gesteuert — Tab-Leiste ausgeblendet */ #cat-detail-tabs { display: none !important; } /* ── Plattform-Login-Anforderung (ready / recommended / required) ───────────── */ .platform-req { font-size: 12px; margin-top: 4px; line-height: 1.3; } .platform-req-ready { color: #53fc18; } .platform-req-recommended { color: #ffcf4d; } .platform-req-required { color: #ff5c8a; font-weight: 600; } /* Plattform-Restriktions-/Hinweistext (Disclaimer) unter dem Status. */ .platform-disclaimer { font-size: 11px; margin-top: 4px; line-height: 1.4; color: var(--text-muted, #8a93a3); max-width: 460px; } .platform-disclaimer-required { color: #ff8aa8; } /* UI-23/32: Multi-line semantic disc lines (Success/Warning/Danger). Font-size bumped to 12 px (UI-32) to match .platform-status subheader baseline. Each line:
*/ .disc-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; max-width: 460px; } .disc-line { font-size: 12px; line-height: 1.45; display: flex; align-items: flex-start; gap: 5px; } /* UI-51: Bullet vertically centered on the FIRST text line. line-height is 1.45em (=17.4px @12px); centering the 6px dot needs (1.45em - 6px)/2 ≈ 5.7px top offset. calc keeps it correct if the font-size changes. align-self can't be used here — it would center against the full multi-line flex height, not the first line. */ .disc-line::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; margin-top: calc((1.45em - 6px) / 2); } .disc-line-success { color: var(--sys-success, #53fc18); } .disc-line-success::before { background: var(--sys-success, #53fc18); } .disc-line-warning { color: var(--sys-warning, #ffcf4d); } .disc-line-warning::before { background: var(--sys-warning, #ffcf4d); } /* UI-32/43: Danger = hard-locked (Category 3 Social) and Paid subs — explicit danger-red. */ .disc-line-danger { color: var(--sys-danger, #ff5c8a); font-weight: 700; } .disc-line-danger::before { background: var(--sys-danger, #ff5c8a); } /* UI-43: Paid subscription lines — slightly smaller, same danger-red to de-emphasize length. */ .disc-lines.disc-paid .disc-line-danger { font-size: 11px; font-weight: 600; color: var(--sys-danger, #ff5c8a); } /* UI-29: Opacity overlay removed for locked platform rows — the forced-checked+disabled checkbox communicates the lock state; the platform title/logo must remain fully legible so the user can still read what platform they need to connect. "Grauschleier" purged: no opacity reduction on logo or info slots. */ .platform-row-locked .platform-logo-slot, .platform-row-locked .platform-info-slot { opacity: 1; } .platform-hide-disabled { cursor: not-allowed; } .platform-hide-disabled input, .platform-hide-disabled span { cursor: not-allowed; pointer-events: none; } /* Plattform-Logos leicht nach links rücken */ .platform-logo-slot { transform: translateX(-4px); } /* ── PubliCore Premium-Karte ────────────────────────────────────────────────── */ .pcprem-card { display: flex; align-items: center; gap: 14px; } /* §AP8 T8: Premium-Rahmen in edlem, metallischem Gold (statt Neon-Pink). */ .pcprem-upgrade { border: 1.5px solid rgba(212, 175, 55, 0.75); box-shadow: 0 0 18px -6px rgba(240, 215, 123, 0.7); border-radius: 12px; } /* §AP8 T8: Premium-Icon = gold-gerahmtes Logo-Piktogramm (Style wie .platform-logo-slot der Hoster, nur in metallischem Gold). */ .pcprem-icon { width: 60px; height: 60px; flex: 0 0 auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #f0d77b; background: linear-gradient(150deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.04)); border: 1px solid rgba(212, 175, 55, 0.7); box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.4), 0 0 14px -3px rgba(240, 215, 123, 0.6); } .pcprem-icon .pc-brand-icon { width: 34px; height: 28px; } .pcprem-price { font-weight: 800; color: var(--neon-pink, #4a5468); font-size: 15px; } .pcprem-buy { background: var(--neon-gradient, linear-gradient(90deg,#4a5468,#ff2bd6)); color: #fff; font-weight: 800; /* Bug 3.2: „PubliCore Premium aktivieren" lief in den Button-Hintergrund. Crisper dunkler Rand + solider Text-Schatten garantieren maximale Lesbarkeit — auch über dem hellen Neon-Verlauf. */ border: 1.5px solid rgba(0, 0, 0, 0.55); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 1px rgba(0, 0, 0, 0.95); } .pcprem-active { border: 1.5px solid #53fc18; border-radius: 12px; box-shadow: 0 0 22px -6px #53fc18; } .pcprem-badge { color: #7CFFB2; font-weight: 900; letter-spacing: 0.4px; text-shadow: 0 0 10px rgba(83,252,24,0.55); } /* ── Custom-Theme-Builder (Farbwähler-Reihe) ───────────────────────────────── */ .custom-theme-row { align-items: flex-start; } /* §AP8 T9: Anwenden + Zurücksetzen harmonisch unten rechts in der Design-Kachel. */ .ct-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 16px; } /* UI-70: Designname + Speichern + Zurücksetzen auf einer gemeinsamen Grundlinie. */ .ct-actions-theme { flex-wrap: wrap; align-items: center; } .ct-actions-theme .ct-name-input { flex: 1 1 180px; min-width: 140px; max-width: 280px; margin-right: auto; } .ct-actions-theme .platform-btn { flex: 0 0 auto; height: 40px; display: inline-flex; align-items: center; } .ct-actions .platform-btn { margin: 0; } /* UI-114: #ct-save nutzte im Ruhezustand var(--sys-idle) (gedaempfter Akzent) — bei benutzerdefinierten Custom-Themes (6-Farben-Customizer, UI-116) kann dieser Wert auf JEDEN Hex-Ton gesetzt werden und dadurch gegen den dunklen Popup-Hintergrund in ungünstigen Faellen den Kontrast verlieren. Fix: "Design speichern" ist eine positive Aktions-Schaltflaeche und bekommt daher FEST Reinweiss im Ruhezustand (identisch zum ohnehin schon weissen Hover/Focus-Zustand) — garantiert maximalen Kontrast unabhaengig vom aktiven/benutzerdefinierten Theme. */ #ct-save.platform-btn.link { color: #ffffff; } /* §M7.2: Link-Warnung sitzt auf derselben Zeile wie Zurücksetzen/Anwenden (links, schiebt die Buttons per margin:auto nach rechts) + kräftiges Weiß. */ .ct-link-warn-inline { margin: 0 auto 0 0 !important; align-self: center; color: #ffffff !important; } .custom-theme-pickers { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; } .ct-pick { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim, #bbb); } .ct-pick input[type="color"] { width: 48px; height: 32px; border: 1.5px solid var(--card-border, #2a2a3a); border-radius: 8px; background: transparent; cursor: pointer; padding: 2px; } /* T22 — „Design speichern": Namensfeld + Button unter den Farbwählern. */ .ct-save-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .ct-name-input { flex: 1 1 180px; min-width: 140px; max-width: 280px; background: var(--card-2, #16161f); color: var(--text); border: 1.5px solid var(--card-border, #2a2a3a); border-radius: 10px; padding: 9px 12px; font-size: 14px; } .ct-name-input:focus { outline: none; border-color: var(--sys-focus); } /* T22 — Theme-Dropdown-Gruppen-Header (optgroup) lesbar im dunklen Theme. */ #theme-select optgroup { color: var(--text-muted, #9aa0aa); font-weight: 800; } #theme-select option { color: var(--text, #fff); } /* ── T21 — Profil-Sektion (Username, Avatar-Auswahl, Merge) ────────────────── */ /* §UIFIX T1.1: #profile-link-warn wird als 3. direktes Flex-Kind in .profile-card (Flex-Row) angehängt. Ohne Breitenanker quetschte der Flex es auf min-content (≈1ch) → vertikaler Buchstaben-Stapel (Spaghetti). flex-wrap + volle Basis-Zeile für die Warnung → Text fließt horizontal und bricht sauber nach Wörtern um. */ .profile-card { align-items: flex-start; flex-wrap: wrap; } /* FEAT-10: Multi-Platform Creator Fusion — dualer Profil-Header (Twitch/YouTube). Erstes Kind von #profile-card (siehe account.js App.Account._headerEl), volle Basiszeile wie #profile-link-warn, damit die 2 Badges/Buttons IMMER oberhalb des Username-/Avatar-Blocks stehen statt sich in dessen Flex-Row einzureihen. */ .pc-profile-header { flex: 1 0 100%; width: 100%; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; } .pc-profile-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--card-border, #d0d0d8); background: var(--card-2, #fff); color: var(--text); } .pc-profile-badge-logo { width: 18px; height: 18px; border-radius: 4px; flex: 0 0 auto; } .pc-profile-badge-linked { border-color: var(--linked, #16a34a); } .pc-profile-badge-check { color: var(--linked, #16a34a); font-weight: 800; } .pc-profile-badge-connect { cursor: pointer; } .profile-link-warn { flex: 1 0 100%; width: 100%; margin-top: 10px; white-space: normal; overflow-wrap: break-word; word-break: normal; } .profile-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; flex: 1 1 auto; } .profile-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .profile-name-label, .profile-avatar-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); } /* §AP6: Texte sauber umbrechen statt den Container zu sprengen („kaputtes" Layout). */ .profile-name-label, .profile-name-note, .profile-name-status { overflow-wrap: break-word; word-break: normal; } .profile-name-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; width: 100%; } .profile-name-input { flex: 1 1 220px; min-width: 0; max-width: 360px; background: var(--card-2, #16161f); color: var(--text); border: 1.5px solid var(--card-border, rgba(255,255,255,0.18)); border-radius: 10px; padding: 9px 12px; font-size: 14px; } .profile-name-input:focus { outline: none; border-color: var(--sys-focus); } /* §AP6: schmale Viewports + Handy → Namens-Zeile stapeln (Eingabe + Button volle Breite). */ @media (max-width: 560px) { .profile-name-row { flex-direction: column; align-items: stretch; } .profile-name-row .platform-btn { width: 100%; } .profile-name-input { max-width: none; } } body.app-phone .profile-name-row { flex-direction: column; align-items: stretch; } body.app-phone .profile-name-row .platform-btn { width: 100%; } body.app-phone .profile-name-input { max-width: none; } .profile-name-status { font-size: 13px; min-height: 16px; color: var(--text-dim); } .profile-name-status.ok { color: var(--linked, #22c55e); } .profile-name-status.err { color: var(--live, #ef4444); } .profile-avatar-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .profile-avatar-opt { width: 52px; height: 52px; padding: 0; border-radius: 50%; overflow: hidden; border: 2px solid var(--card-border, rgba(255,255,255,0.18)); background: var(--card-2, #16161f); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .profile-avatar-opt.selected, .profile-avatar-opt.focused { border-color: var(--sys-focus); box-shadow: var(--sys-glow, 0 0 14px -2px var(--sys-focus)); } .profile-avatar-initial { font-size: 22px; font-weight: 800; color: var(--text); } .profile-avatar-img { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; } .profile-avatar-logo { width: 28px; height: 28px; display: inline-flex; } .profile-avatar-logo img { width: 100%; height: 100%; object-fit: contain; } .profile-avatar-hint { font-size: 12px; color: var(--text-muted); max-width: 360px; line-height: 1.4; } /* T21 — Account-Merge-Overlay (Dual-Card-Auswahl) */ .pc-merge-overlay { position: fixed; inset: 0; z-index: 2147483000; background: rgba(2, 6, 23, 0.78); display: flex; align-items: center; justify-content: center; padding: 24px; } .pc-merge-overlay.hidden { display: none; } .pc-merge-box { position: relative; width: 100%; max-width: 560px; background: var(--card, #15151f); border: 1px solid var(--card-border, rgba(255,255,255,0.14)); border-radius: 18px; padding: 28px 26px; box-shadow: 0 24px 70px rgba(0,0,0,0.6); } .pc-merge-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-dim); font-size: 26px; line-height: 1; cursor: pointer; } .pc-merge-title { font-size: 20px; font-weight: 800; color: var(--text); margin: 0 0 10px; line-height: 1.3; } .pc-merge-sub { font-size: 14px; color: var(--text-dim); margin: 0 0 16px; line-height: 1.5; } .pc-merge-input { width: 100%; box-sizing: border-box; background: var(--card-2, #16161f); color: var(--text); border: 1.5px solid var(--card-border, rgba(255,255,255,0.18)); border-radius: 10px; padding: 11px 14px; font-size: 15px; } .pc-merge-input:focus { outline: none; border-color: var(--sys-focus); } .pc-merge-actions { margin-top: 18px; display: flex; justify-content: flex-end; } .pc-merge-cards { display: flex; gap: 16px; flex-wrap: wrap; } .pc-merge-card { flex: 1 1 200px; min-width: 180px; text-align: left; cursor: pointer; background: var(--card-2, #16161f); color: var(--text); border: 2px solid var(--card-border, rgba(255,255,255,0.18)); border-radius: 14px; padding: 18px 18px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; } .pc-merge-card:hover, .pc-merge-card.focused { border-color: var(--sys-focus); box-shadow: var(--sys-glow, 0 0 14px -2px var(--sys-focus)); transform: translateY(-2px); } .pc-merge-card-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); } .pc-merge-card-name { font-size: 18px; font-weight: 800; color: var(--text); word-break: break-word; } .pc-merge-step.hidden { display: none; } /* ── T24 — Hoster-Präferenz: collapsible Sektion + re-orderbare Badges ──────── */ .hoster-head { cursor: pointer; } .hoster-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .25s ease, padding .25s ease; padding: 0 24px; } .hoster-body.open { max-height: 1400px; opacity: 1; padding: 4px 24px 18px; } .hoster-sub { margin-top: 14px; } .hoster-section-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text); margin-bottom: 4px; } .hoster-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0 0 12px; max-width: 720px; } .hoster-row-tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 4px 0 6px; text-transform: uppercase; letter-spacing: .4px; } .hoster-creator-block { margin-bottom: 14px; } .hoster-badge-row { display: flex; flex-wrap: wrap; gap: 10px; } .hoster-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--card-2, #16161f); color: var(--text); border: 1.5px solid var(--card-border, rgba(255,255,255,0.18)); border-radius: 999px; padding: 5px 8px; font-size: 13px; font-weight: 600; cursor: grab; user-select: none; } .hoster-badge:hover, .hoster-badge.focused { border-color: var(--sys-focus); } .hoster-badge-logo { width: 20px; height: 20px; display: inline-flex; } .hoster-badge-logo img { width: 100%; height: 100%; object-fit: contain; } .hoster-badge-label { padding: 0 2px; } /* §UIFIX T2.1: ornamentale Self-Hosted-Pill — gleiche Form wie die Plattform-Badges, aber nicht greifbar/reorderbar (rein visuell). Emoji-Logo zentriert dimensionieren. */ .hoster-badge-ornamental { cursor: default; opacity: 0.9; } .hoster-badge-ornamental .hoster-badge-logo { align-items: center; justify-content: center; font-size: 15px; line-height: 1; } .hoster-badge-move { background: transparent; border: none; cursor: pointer; color: var(--text-dim); font-size: 11px; line-height: 1; padding: 4px 3px; border-radius: 6px; } .hoster-badge-move:hover { color: var(--sys-focus); background: rgba(255,255,255,0.06); } .hoster-override { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text-dim); cursor: pointer; } .hoster-override input { width: 16px; height: 16px; accent-color: var(--sys-focus); } /* T8: Premium-Perk gesperrt (Nicht-Premium) — ausgegraut + nicht klickbar. */ .hoster-override-locked { opacity: 0.5; cursor: not-allowed; } .hoster-override-locked input { cursor: not-allowed; } /* T8: stilisiertes Premium-Badge am Ende des Beschreibungstexts. */ .pc-premium-badge { display: inline-block; margin-left: 8px; vertical-align: middle; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #1a1205; background: linear-gradient(135deg, #ffd86b 0%, #f5a623 100%); box-shadow: 0 0 10px -2px rgba(245,166,35,0.7); } /* T24.5 — Quick-Select-Micro-Dock (TV/Handy) */ .pc-hoster-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483200; display: flex; justify-content: center; padding: 22px; background: linear-gradient(to top, rgba(2,6,23,0.92), rgba(2,6,23,0)); } .pc-hoster-dock.hidden { display: none; } .pc-hoster-dock-inner { background: var(--card, #15151f); border: 1px solid var(--card-border, rgba(255,255,255,0.16)); border-radius: 16px; padding: 16px 18px; box-shadow: 0 18px 50px rgba(0,0,0,0.6); max-width: 96vw; } .pc-hoster-dock-title { font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px; text-align: center; } .pc-hoster-dock-row { display: flex; gap: 12px; flex-wrap: nowrap; overflow-x: auto; } .pc-hoster-dock-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 96px; padding: 14px 8px; cursor: pointer; background: var(--card-2, #16161f); color: var(--text); border: 2px solid var(--card-border, rgba(255,255,255,0.18)); border-radius: 14px; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } .pc-hoster-dock-btn.focused, .pc-hoster-dock-btn:hover { border-color: var(--sys-focus); box-shadow: var(--sys-glow, 0 0 16px -2px var(--sys-focus)); transform: translateY(-3px); } .pc-hoster-dock-logo { width: 38px; height: 38px; display: inline-flex; } .pc-hoster-dock-logo img { width: 100%; height: 100%; object-fit: contain; } .pc-hoster-dock-name { font-size: 13px; font-weight: 700; } /* (Gesperrter Premium-Inhalt: Blur + Schloss-Overlay sind bereits oben über .premium-locked / .premium-lock definiert — hier bewusst nicht dupliziert.) */ /* ── Mobile Landscape: kompaktes 2-Zeilen-Metadaten-Raster unter dem Video ──── Doppelt eingekapselt: max-width 1024px UND body.app-phone → kann NIEMALS auf die Desktop-/Web-Vorschau (breiter Monitor, ebenfalls orientation:landscape) durchschlagen. Desktop-Player nutzt ausschließlich #player-desktop. */ @media (max-width: 1024px) and (orientation: landscape) { body.app-phone #player-overlay.sidebar-open #player-info { display: grid; grid-template-columns: 1fr auto; grid-auto-rows: min-content; align-content: center; gap: 2px 12px; padding: 8px 14px; } body.app-phone #player-info-name { grid-column: 1; grid-row: 1; } body.app-phone #player-info .pi-meta { grid-column: 2; grid-row: 1; justify-self: end; } body.app-phone #player-info-title { grid-column: 1 / -1; grid-row: 2; } /* Chat etwas breiter + obere Strukturränder enger → mehr lesbarer Chatfluss */ body.app-phone #player-overlay.sidebar-open #player-sidebar { width: 32%; height: 100%; } /* UI-TWITCH-CHAT-BOTTOM-ALIGN: Phone-Video bleibt full-height (nur 68% breit) → Sidebar wieder 100%. */ body.app-phone #player-overlay.sidebar-open #player, body.app-phone #player-overlay.sidebar-open #yt-player, body.app-phone #player-overlay.sidebar-open #dm-player, body.app-phone #player-overlay.sidebar-open #av-player { width: 68%; } body.app-phone #player-overlay.sidebar-open #player-info { right: 32%; } body.app-phone #player-overlay.sidebar-open .player-touch-overlay { right: 32%; } } /* ════════════════════════════════════════════════════════════════════════════ (Task 3.4) PC-Web Maus-Ergonomie Größere, klickfreundliche Filter-Pills/Tabs + Hover ruft GENAU den Neon-Akzent- Glow auf, der bei der D-Pad-Fernbedienungsauswahl (.focused) zum Einsatz kommt. Nur auf dem Desktop-Web (body.app-desktop); TV/Mobile bleiben unberührt. ════════════════════════════════════════════════════════════════════════════ */ body.app-desktop .filter-tab, body.app-desktop .filter-pill { padding: 10px 22px; font-size: 15px; border-radius: 999px; cursor: pointer; transition: border-color 0.15s, color 0.15s, box-shadow 0.15s, background 0.15s; } /* Karten-Hover = identischer Fokus-Glow wie bei D-Pad-Auswahl */ body.app-desktop .video-card:not(.ad-card):hover { will-change: box-shadow; animation: breathe-neon-card 2.8s ease-in-out infinite; } /* Pills/Tabs-Hover = Neon-Fokusrahmen + Glow (wie .focused) */ body.app-desktop .filter-tab:not(.active):hover, body.app-desktop .filter-pill:not(.active):hover { border-color: var(--sys-focus); color: var(--sys-focus); box-shadow: var(--sys-glow); } /* Sidebar-Einträge-Hover = einheitlicher System-Fokus (Neon) statt Soft-Purple */ body.app-desktop .nav-item:hover { color: var(--sys-focus); border-color: var(--sys-focus); box-shadow: var(--sys-glow), 0 8px 24px rgba(0, 0, 0, 0.4); } body.app-desktop .nav-item:hover .nav-icon { color: var(--sys-focus); filter: drop-shadow(0 0 6px rgba(250, 255, 0, 0.55)); } /* ── Tabbed Settings (4 Tabs) ─────────────────────────────────────────────── */ .settings-tabbar { display: flex; flex-wrap: wrap; gap: 8px; /* T25: linksbündig auf der Content-Karten-Baseline (kein rogue 24px-Offset). */ padding: 4px 0 16px; margin: 0; } /* Breathing room between the tab bar and the first content group. */ #settings-content { margin-top: 12px; } /* ── Quick Pairing text contrast & spacing ───────────────────────────────── */ #settings-group-mobile .settings-info-desc, .qr-privacy-note, .pairing-desktop-hint-desc { color: var(--text-dim, #94a3b8) !important; line-height: 1.65; } .qr-privacy-note { margin-top: 14px; margin-bottom: 6px; } .pairing-desktop-hint-desc { margin-top: 18px !important; } .settings-tab { padding: 10px 18px; border-radius: 999px; font-size: 14px; cursor: pointer; white-space: nowrap; } .settings-tab.active { background: var(--sys-focus); border-color: var(--sys-focus); color: #0a0a0f; font-weight: 700; } body.app-desktop .settings-tab { font-size: 15px; padding: 11px 22px; } /* ── Benachrichtigungs-Panel: Quick-Link am unteren Rand ──────────────────── */ .notif-settings-link { display: block; width: 100%; text-align: center; background: none; border: none; border-top: 1px solid var(--card-border, rgba(255,255,255,0.08)); margin-top: 6px; padding: 12px 10px; color: var(--neon-pink, #4a5468); font-size: 13px; font-weight: 600; cursor: pointer; } .notif-settings-link:hover { text-decoration: underline; } /* ── Substack Content Sync (Tab 2) ─────────────────────────────────────────── */ .substack-label { display: block; font-size: 13px; color: var(--text-dim, #cfcfe0); margin-bottom: 8px; line-height: 1.4; } .substack-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .substack-input { flex: 1; min-width: 220px; background: var(--card-2, #14141c); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); border-radius: 10px; padding: 10px 14px; color: var(--text, #e8e8f0); font-size: 14px; outline: none; } .substack-input:focus { border-color: var(--sys-focus, #4a5468); box-shadow: var(--sys-glow, 0 0 0 2px rgba(74, 84, 104,0.35)); } .substack-status { font-size: 12px; margin-top: 8px; color: var(--text-muted, #8a8a9a); min-height: 14px; } .substack-status.ok { color: #3ddc84; } .substack-status.err { color: #ff5470; } /* ── Patreon Supporter-Badge (Social Proof) ────────────────────────────────── */ .patreon-badge { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255,66,77,0.14); border: 1px solid #ff424d; color: #ff424d; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; } .patreon-badge svg { display: block; } .patreon-badge-text { letter-spacing: .2px; } /* ── Task 12: Cookie-Consent / TCF v2.2 CMP dialog ───────────────────────────── */ #cookie-consent { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2147483646; width: min(760px, calc(100% - 24px)); pointer-events: none; box-sizing: border-box; } #cookie-consent.hidden { display: none !important; } #cookie-consent-box, .cmp-dialog { pointer-events: auto; box-sizing: border-box; background: rgba(6, 1, 15, 0.96); border: 1px solid var(--sys-focus, #faff00); border-radius: 14px; padding: 18px 20px 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 18px rgba(250,255,0,0.12); color: var(--text, #f2f4f8); overflow: visible; } .cmp-dialog-title, #cc-title { font-size: 15px; font-weight: 800; line-height: 1.35; margin: 0 0 8px; color: var(--text, #f2f4f8); text-shadow: 0 0 12px rgba(250,255,0,0.18); } .cmp-dialog-text, #cc-text { font-size: 13px; line-height: 1.6; color: var(--text-faint, #b7bcc8); margin: 0 0 14px; max-width: 100%; overflow-wrap: anywhere; word-wrap: break-word; } .cmp-dialog-actions, #cookie-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: stretch; align-items: stretch; width: 100%; } .cookie-consent-btn { flex: 1 1 calc(50% - 6px); min-width: 132px; min-height: 44px; margin: 0; padding: 10px 14px; font-size: 14px; font-weight: 700; line-height: 1.25; text-align: center; box-sizing: border-box; } /* FEAT-17: Button A ("Alles akzeptieren") - gefuellter Highlight-Button, exakt gleiche Groesse wie Button B (.cookie-consent-btn Basis-Flex bleibt), nur die Farbe unterscheidet. ID-Praefix-Selektor (Spezifitaet 1,1,0) verhindert die gleiche .platform-btn.link:hover/.focused-Ueberschreibung, die UI-93 bereits beim Mature-Gate loesen musste (siehe .pc-mature-btn-deny weiter oben). */ #cookie-consent-actions .cookie-consent-btn-primary, #cookie-consent-actions .cookie-consent-btn-primary:hover, #cookie-consent-actions .cookie-consent-btn-primary:focus, #cookie-consent-actions .cookie-consent-btn-primary.cbtv-focused { background: var(--sys-focus, #faff00); border-color: #c8b800; color: #12131a; font-weight: 800; } #cookie-consent-actions .cookie-consent-btn-primary:hover, #cookie-consent-actions .cookie-consent-btn-primary:focus, #cookie-consent-actions .cookie-consent-btn-primary.cbtv-focused { box-shadow: 0 0 12px rgba(250,255,0,0.4); } .cookie-consent-btn-secondary { flex: 1 1 100%; min-height: 40px; font-weight: 600; background: transparent; border: 1px solid rgba(250,255,0,0.35); color: var(--text-faint, #b7bcc8); box-shadow: none; } .cookie-consent-btn-secondary:hover, .cookie-consent-btn-secondary:focus { border-color: var(--sys-focus, #faff00); color: var(--text, #fff); box-shadow: 0 0 10px rgba(250,255,0,0.22); } #cookie-consent-actions .platform-btn { margin: 0; } body.app-tv #cookie-consent { left: 0; top: 0; bottom: 0; right: 0; width: 100%; transform: none; display: flex; align-items: center; justify-content: center; background: rgba(4,1,12,0.82); padding: 24px; } body.app-tv #cookie-consent.hidden { display: none !important; } body.app-tv #cookie-consent-box { width: min(820px, 88%); padding: 30px 34px; } body.app-tv .cmp-dialog-title, body.app-tv #cc-title { font-size: 24px; } body.app-tv .cmp-dialog-text, body.app-tv #cc-text { font-size: 18px; line-height: 1.55; } body.app-tv .cookie-consent-btn { min-height: 52px; font-size: 18px; } body.app-tv #cookie-consent-actions { justify-content: center; } body.app-phone #cookie-consent { width: calc(100% - 16px); bottom: 10px; } body.app-phone .cookie-consent-btn { flex: 1 1 100%; min-width: 0; } /* Cookiebot native dialog — must sit above beta landing gate (2147483600) and login wall. */ #CybotCookiebotDialog, #CybotCookiebotDialogBodyUnderlay, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, #CybotCookiebotDialogBodyButtonDecline, #CybotCookiebotDialogBodyButtonAccept { z-index: 2147483646 !important; } #CybotCookiebotDialogBodyUnderlay { position: fixed !important; inset: 0 !important; } /* Youth protection: mature-content thumbnail blur (authenticated users only) */ .card-thumbnail.mature-blur { filter: blur(16px) brightness(0.38); position: relative; overflow: hidden; } .card-thumbnail.mature-blur::after { content: '18+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; letter-spacing: 0.08em; color: var(--sys-focus, #faff00); text-shadow: 0 0 14px rgba(250,255,0,0.45), 0 2px 8px rgba(0,0,0,0.65); pointer-events: none; } body.app-tv .card-thumbnail.mature-blur::after { font-size: 32px; } /* ── Task 13: Vereinheitlichte Multi-Plattform-Chat-Badges ─────────────────── */ .pc-badges { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-right: 6px; position: relative; } .pc-badge { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 18px; height: 18px; border-radius: 4px; overflow: visible; background: var(--card-2, #1e222c); border: 1px solid rgba(255,255,255,0.14); flex: 0 0 auto; } .pc-badge img, .pc-badge svg { width: 14px; height: 14px; display: block; border-radius: 2px; } .pc-badge--patreon { border-color: #ff424d; } .pc-badge--twitch { border-color: #9147ff; } .pc-badge--youtube { border-color: #ff0000; } /* FEAT-CORE-HOST-01: .pc-badge--floatplane entfernt (App.Badges.META hatte den einzigen Erzeuger dieser Klasse; kein Ersatz — kein anderer Hoster ist ein Chat-Abo-Badge-Hoster wie Twitch/YouTube/Patreon, siehe premium_badges_integration.js). */ /* Tier-Nummer: harter Kontrast-Guardrail (Outline + Wrapper) für beide Themes. */ .pc-badge-tier { position: absolute; right: -5px; bottom: -5px; min-width: 13px; height: 13px; padding: 0 2px; border-radius: 7px; background: var(--sys-focus, #faff00); color: #0a0410; font-size: 9px; font-weight: 900; line-height: 13px; text-align: center; border: 1px solid #0a0410; box-shadow: 0 0 0 1px rgba(255,255,255,0.85); -webkit-text-stroke: 0; } .pc-badge-overflow { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--neon-pink, #ff2bd6); color: #0a0410; font-size: 10px; font-weight: 900; line-height: 1; cursor: default; border: 1px solid rgba(255,255,255,0.5); } /* Micro-Modal-Tooltip (PC-Hover / TV-Fokus) */ .pc-badges-tip { position: absolute; left: 0; bottom: calc(100% + 8px); min-width: 180px; max-width: 260px; padding: 8px 10px; background: var(--bg-header, #14161e); border: 1px solid var(--neon-pink, #ff2bd6); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); z-index: 50; opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; pointer-events: none; } .pc-badges:hover .pc-badges-tip, .pc-badges:focus-within .pc-badges-tip, .pc-badge-overflow:hover + .pc-badges-tip, .pc-badges.tip-open .pc-badges-tip { opacity: 1; transform: translateY(0); } .pc-tip-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; color: var(--text, #f2f4f8); white-space: nowrap; } .pc-tip-row .pc-badge { width: 16px; height: 16px; } /* ── Task 15: Premium-Checkout-Erfolg-Popup ────────────────────────────────── */ .pcprem-success { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; background: rgba(4,1,12,0.78); opacity: 0; transition: opacity .2s ease; } .pcprem-success.open { opacity: 1; } .pcprem-success-box { width: min(440px, calc(100% - 40px)); text-align: center; padding: 30px 28px; background: var(--bg-header, #14161e); border: 1px solid var(--sys-focus, #faff00); border-radius: 16px; box-shadow: var(--sys-glow, 0 0 22px rgba(250,255,0,0.5)), 0 16px 50px rgba(0,0,0,0.6); transform: scale(0.94); transition: transform .2s ease; } .pcprem-success.open .pcprem-success-box { transform: scale(1); } .pcprem-success-ic { font-size: 44px; line-height: 1; margin-bottom: 10px; } .pcprem-success-title { font-size: 22px; font-weight: 800; color: var(--text, #f2f4f8); margin: 0 0 8px; } .pcprem-success-desc { font-size: 14px; color: var(--text-dim, #b7bcc8); margin: 0 0 18px; line-height: 1.5; } /* ════════════════════════════════════════════════════════════════════════════ ULTRA UI REFACTOR SPRINT (theme-token driven; identisch in beiden Themes) ════════════════════════════════════════════════════════════════════════════ */ /* TASK 1 — Ultra-Wide-Desktop Max-Width-Guardrail: die GESAMTE App (Sidebar + Content) auf max. 1600px zentrieren + ambientes Drop-Shadow links/rechts. */ @media (min-width: 1200px) { body.app-desktop { background: radial-gradient(ellipse at 50% -10%, rgba(0,0,0,0.35), transparent 55%), var(--bg, #12141c); } body.app-desktop #app { max-width: 1600px; margin: 0 auto; box-shadow: 0 0 0 1px var(--card-border, rgba(255,255,255,0.07)), 0 0 140px rgba(0,0,0,0.75); } } /* TASK 2.2 — Einheitliche Player-Steuer-Buttons (Zurück / Profil / + Folgen): gleiche Mindestbreite, Polster, Höhe und Schrift → symmetrisches Raster. */ #player-controls-bar .player-ctl { min-width: 152px; box-sizing: border-box; text-align: center; padding: 14px 24px; font-size: 16px; font-weight: 700; line-height: 1.15; white-space: nowrap; } /* FEAT-18: .player-ctl-ext.is-disabled war bisher komplett ungestylt — Lücke fällt jetzt auf, weil der neue PiP-Button dieses Muster nutzt. Jetzt konsistent mit .pd-picto.is-disabled gedimmt. Bleibt regulär fokussierbar (kein natives disabled-Attribut, s. player.js mkBtn()) — nur der Klick wird in activateControl()/dem Bar-Click-Delegate blockiert. Eigener gedämpfter Fokus-Umriss statt der "breathe"-Glow-Animation enaktiver Buttons, damit D-Pad-Fokus weiterhin sichtbar bleibt, aber klar als "hier, aber deaktiviert" erkennbar ist. */ #player-controls-bar .player-ctl-ext.is-disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.4); } #player-controls-bar .player-ctl-ext.is-disabled:hover, #player-controls-bar .player-ctl-ext.is-disabled.focused { animation: none; box-shadow: none; border-color: rgba(148, 163, 184, 0.5); color: var(--sys-idle); outline: 2px dashed rgba(148, 163, 184, 0.7); outline-offset: 2px; } /* TASK 4 — Inaktive Settings-Tabs an die aktiven Theme-Variablen koppeln (vorher statisch dunkel → praktisch unlesbar). */ .settings-tab:not(.active) { background: var(--card-2, rgba(255,255,255,0.05)); border: 1px solid var(--card-border, rgba(255,255,255,0.14)); color: var(--text-dim, #b7bcc8); opacity: 0.9; transition: color .15s, border-color .15s, opacity .15s, box-shadow .15s, background .15s; } .settings-tab:not(.active):hover, .settings-tab:not(.active).focused { color: var(--sys-focus); border-color: var(--sys-focus); opacity: 1; box-shadow: var(--sys-glow); } /* UI-86 v2: D-Pad-Fokus landet oft GENAU auf dem gerade aktiven Tab (z. B. beim ersten Betreten von Settings) — ohne eigene Regel wäre der Cursor dort unsichtbar (die :not(.active)-Scoping oben greift dann nicht). Ergänzt nur einen Halo-Ring UM die bereits gefüllte Pille, ohne deren Fill/Textfarbe zu verändern. */ .settings-tab.active.focused { box-shadow: var(--sys-glow), 0 0 0 2px var(--bg, #0a0a0f); } /* TASK 5 — Konditionale Ausgrauung der Reminder-Eingaben (per JS gesetzt). */ .rem-row-disabled { opacity: 0.4 !important; pointer-events: none !important; filter: grayscale(0.3); transition: opacity .15s ease; } /* TASK 3 — Premium-Box (Tab Accounts): sauberes Layout, kein Text im Button. */ .pcprem-card .pcprem-copy { flex: 1 1 auto; min-width: 0; padding-right: 10px; } .pcprem-card .pcprem-copy .settings-info-title { white-space: normal; line-height: 1.4; } .pcprem-desc { font-size: 13px; color: var(--text, #f2f4f8); line-height: 1.45; margin: 0 0 4px; } .pcprem-sub { font-size: 12.5px; color: var(--text-dim, #b7bcc8); line-height: 1.4; margin: 2px 0 0; } /* UI-PREMIUM-AD-DISCLAIMER: Button jetzt in .pcprem-buy-wrap gekapselt (Flex-Sizing sitzt am Wrapper), damit der Disclaimer darunter stapelt statt als eigenes Flex-Item neben dem Button zu landen (.pcprem-card ist selbst display:flex). */ .pcprem-card .pcprem-buy-wrap { flex: 0 0 auto; min-width: 230px; max-width: 280px; } .pcprem-card .pcprem-buy { width: 100%; white-space: normal; line-height: 1.2; padding: 12px 18px; } /* UI-PREMIUM-AD-DISCLAIMER: rechtlicher Hinweis unter Aktivierungs-/Kündigen-Button und im Aktivierungs-Overlay — dezent, leicht verkleinert, neutrales Kontrast-Grau (identisch zur UI-HOST-LABELS-Spezifikation). */ .pcprem-disclaimer { font-size: 11px; color: #7a8296; line-height: 1.4; margin: 8px 0 14px; } @media (max-width: 640px) { .pcprem-card { flex-wrap: wrap; } .pcprem-card .pcprem-buy-wrap { width: 100%; max-width: none; min-width: 0; margin-top: 10px; } } /* TASK 6 — Custom-Designer: 6-Farben-Raster. */ .custom-theme-pickers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; } @media (max-width: 560px) { .custom-theme-pickers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ct-pick span { line-height: 1.25; } /* TASK 2.1 — Handy: Player/Chat randlos (keine grauen Viewport-Balken mehr). */ body.app-phone #player-overlay { width: 100vw; height: 100%; margin: 0; padding: 0; background: #000; } body.app-phone #player-overlay #player, body.app-phone #player-overlay #yt-player, body.app-phone #player-overlay #dm-player, body.app-phone #player-overlay #av-player, body.app-phone #player-overlay #player-sidebar, body.app-phone #player-overlay #player-chat { margin: 0; padding: 0; background: #000; } body.app-phone #player-overlay #player, body.app-phone #player-overlay #yt-player, body.app-phone #player-overlay #dm-player { width: 100vw; max-width: 100vw; } body.app-phone #player-overlay #player iframe, body.app-phone #player-overlay #yt-player iframe, body.app-phone #player-overlay #yt-player > div, body.app-phone #player-overlay #dm-player iframe, body.app-phone #player-overlay #dm-player > div, body.app-phone #player-overlay #av-player { width: 100% !important; height: 100% !important; object-fit: contain; background: #000; border: 0; } body.app-phone #player-chat-frame { width: 100%; height: 100%; border: 0; background: #000; } /* TASK 4 — Header-Logo: Auto-Scale, Kontrast, V1-Badge + Build-ID-Footer. */ #sidebar { display: flex; flex-direction: column; } #sidebar-logo { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } #pc-logo-mark { height: 30px; width: auto; max-height: 100%; flex: 0 0 auto; } .pc-logo-ver { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sys-focus); border: 1px solid var(--sys-focus); border-radius: 6px; padding: 1px 6px; line-height: 1.35; } /* T22 — V1-Badge-Clipping-Fix: Logo, Wortmarke und V1-Badge teilen sich den horizontalen Platz, ohne dass der Sidebar-Rahmen das Badge abschneidet. Die Wortmarke schrumpft zuerst (ellipsis), Logo-Mark und V1-Badge bleiben starr. */ #sidebar-logo { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 14px; box-sizing: border-box; overflow: visible; min-width: 0; letter-spacing: 0; line-height: 1; } #sidebar-logo #pc-logo-mark { flex: 0 0 auto; margin-right: 0; } #sidebar-logo .pc-logo-ver { flex: 0 0 auto; margin-left: 2px; white-space: nowrap; } /* Stray ".io"-Pseudoelement nach dem V1-Badge entfernen — es drückte das Badge über den Container hinaus und verursachte das Clipping/Overlap. */ #sidebar-logo::after { content: "" !important; display: none !important; } .sidebar-build { /* §AP7 Task7: KEIN margin-top:auto mehr — die Anker-Logik sitzt jetzt auf .sidebar-toggle. Der Build-String steht damit als LETZTES Element direkt UNTER den Rechts-Links am Sidebar-Fuß. */ margin-top: 0; padding: 4px 16px 12px; font-size: 11px; color: var(--text-dim, #b7bcc8); opacity: 0.6; letter-spacing: 0.2px; white-space: nowrap; } /* TASK 5 — Account-Gruppen-Überschriften + Login-CTA */ .platform-group-head { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim, #b7bcc8); /* T6: linksbündig mit den Plattform-Zeilen (24px) statt 4px → saubere Flucht. */ padding: 18px 24px 8px; margin-top: 8px; border-bottom: 1px solid var(--card-border, rgba(255,255,255,0.10)); } .platform-group-head:first-child { margin-top: 0; } .platform-cta { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--sys-focus); margin-top: 4px; } /* TASK 15 — Premium: Werbe-Container hart entfernen, Layout reflowt lückenlos. */ body.pc-premium .ad-container, body.pc-premium .ad-banner-slot, body.pc-premium .sidebar-ad, body.pc-premium .ad-card, body.pc-premium .ad-card-wrap, body.pc-premium ins.adsbygoogle, body.pc-premium .adsbygoogle, body.pc-premium [data-ad-slot] { display: none !important; } /* ── Task 5: Shorts/Clips-Device-Routing ────────────────────────────────────── Smart-TV: vertikaler Shorts-Knoten + Section komplett ausgeblendet (nur 16:9 Clips). Handy/PC zeigen beide; die Orientierungs-Weiche steuert JS. */ body.app-tv .nav-shorts, body.app-tv #section-shorts { display: none !important; } /* ── Task 4.2: „Kalender"-Filter nur in der Abo-Box zeigen ─────────────────── */ .filter-tab-calendar { display: none; } body.nav-subscriptions .filter-tab-calendar { display: inline-flex; } /* §5 Gruppen-Tab analog zum Kalender NUR in der Abo-Box. */ .filter-tab-groups { display: none; } body.nav-subscriptions .filter-tab-groups { display: inline-flex; } body.app-desktop #filter-tabs .filter-tab-groups { display: none !important; } body.app-desktop.nav-subscriptions #filter-tabs .filter-tab-groups { display: inline-flex !important; } /* Bug 2.1: Desktop-Regel `#filter-tabs .filter-tab` zeigte auch den Kalender-Tab → auf Startseite/Trends hart wegnehmen, nur in der Abo-Box zulassen. */ body.app-desktop #filter-tabs .filter-tab-calendar { display: none !important; } body.app-desktop.nav-subscriptions #filter-tabs .filter-tab-calendar { display: inline-flex !important; } /* Abo-Kalender: chronologische Liste anstehender Events aller Plattformen */ .cal-list { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 24px; } .cal-daygroup-title { font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 14px 4px 4px; text-transform: uppercase; letter-spacing: 0.5px; } .cal-item { display: flex; align-items: center; gap: 14px; background: var(--card-2); border: 1px solid var(--card-border, rgba(255,255,255,0.08)); border-radius: 12px; padding: 12px 16px; cursor: pointer; } .cal-item:hover { border-color: var(--sys-focus); } .cal-item-time { flex: 0 0 auto; font-family: monospace; font-size: 14px; color: var(--neon-pink, #4a5468); min-width: 96px; } .cal-item-body { flex: 1 1 auto; min-width: 0; } .cal-item-title { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-item-sub { font-size: 13px; color: var(--text-muted); font-family: monospace; } .cal-item-logo { flex: 0 0 auto; width: 22px; height: 22px; } .cal-item-logo img { width: 100%; height: 100%; object-fit: contain; } /* ════════════════════════════════════════════════════════════════════════════ SPRINT 3 (2026-06-22) — T16 PC-Player-Sichtbarkeit · T11 Header-Flattening · T7 Super-Kachel-Quellen-Pills · T13 Shorts/Clips-Plattform-Bubbles · T14 Erweiterter-Filter-Drawer. Token-getrieben (identisch in beiden Themes). ════════════════════════════════════════════════════════════════════════════ */ /* ── T16: PC-Player „Blank Page"-Hotfix ─────────────────────────────────────── */ /* Schließen muss das Overlay wirklich verbergen (die Desktop-Overlay-Regel überspezifizierte sonst .hidden → schwarzes Overlay blieb über dem Grid). */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay.hidden { display: none !important; } /* Im Desktop-Stage greift .hidden wieder (die Stage-Regel erzwang display:flex und verdeckte mit dem Platzhalter das Video → Audio lief, Bild blieb schwarz). */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #player-placeholder.hidden, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #player-error.hidden { display: none !important; } /* Aktive Video-Ebene zwingend sichtbar + ÜBER Platzhalter/Fehler. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #player.active, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #yt-player.active, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #dm-player.active, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > iframe { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 5 !important; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #player-placeholder, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-video-stage > #player-error { z-index: 2; } /* ── T11: Header-Flattening (nur Desktop/Web — TV/Handy unberührt) ──────────── */ body.app-desktop #header { position: relative; } /* UI-38: Bell sits in normal flex flow of .header-row-top, perfectly vertically aligned with the search bar (no absolute positioning artifacts). */ body.app-desktop #header-actions { position: static !important; flex-shrink: 0; margin-left: 12px; margin-right: 16px; align-self: center; display: flex; align-items: center; justify-content: center; z-index: auto; } body.app-desktop .header-row-top { display: flex; align-items: center; /* UI-38: No right-padding needed — bell is in the flex flow, not absolute. */ padding-right: 0; } body.app-desktop .header-row-top #search-bar { flex: 0 1 560px; max-width: 560px; min-width: 0; } /* UI-SEARCHBAR-VIDEO-WIDTH: nicht mehr voll strecken (Design-Cap ~560px, war flex:1 1 auto); die Glocke haelt margin-right:auto in der spezifischeren header-two-row-Regel (unten) rechts */ /* Pillen exakt wie die Settings-Sub-Nav-Tabs: gleiche Höhe/Padding/Radius, eine durchgehende Reihe ohne Höhensprung über Home/Trends/Abos. */ body.app-desktop .header-row-bottom { display: flex; align-items: center; gap: 12px; min-height: 56px; } body.app-desktop #filter-tabs { display: flex; align-items: center; gap: 8px; } body.app-desktop #filter-tabs .filter-tab, body.app-desktop .settings-tab { height: 40px; display: inline-flex; align-items: center; box-sizing: border-box; padding: 0 22px; border-radius: 999px; line-height: 1; } /* „Step" entfernen: Sidebar-Logo-Zone und Content-Header auf eine Baseline. */ /* Bug 2.2: Header-Top-Padding als PADDING-top INNERHALB der Logo-Box spiegeln (statt fragilem margin-top) → Logo-Mitte ≈ Suchleisten-Mitte, gemeinsame Grundlinie. */ body.app-desktop #sidebar-logo { height: 62px; min-height: 0; margin-top: 0; padding: 16px 14px 0; align-items: center; box-sizing: border-box; } body.app-desktop #header { padding-top: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--card-border, rgba(255,255,255,0.08)); } /* ── T7: Super-Kachel Multi-Host-Quellen-Pills ──────────────────────────────── */ .card-multi-badge { position: absolute; top: 8px; left: 8px; z-index: 3; background: rgba(0,0,0,0.72); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .4px; padding: 3px 7px; border-radius: 999px; } /* UI-REDESIGN Phase 3 (User): Multi-Hoster-Auswahlleiste am unteren Kachelrand — je Quelle ein Farbsegment (native Hosterfarbe, Inline). Klick öffnet gezielt den Hoster (Delegation .card-source-pill → App.openSourceFromPill); Segmente sind KEINE eigenen D-Pad-Fokusziele (nur die Kachel). Touch/TV: Long-Press → App.SourceMenu. */ .card-sources { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 6px; display: flex; gap: 3px; margin: 0; z-index: 4; pointer-events: none; } .card-source-pill { flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 999px; cursor: pointer; pointer-events: auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); transition: transform .12s ease, box-shadow .12s ease; } body:not(.kbd-active) .card-source-pill:hover { transform: scaleY(2.2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.65); z-index: 5; } .card-source-pill.source-premium { box-shadow: inset 0 0 0 1.5px #fff; } /* ── T13: Shorts/Clips — Plattform-Bubbles statt Live/VOD/Kalender ──────────── */ body.nav-shorts #filter-tabs, body.nav-clips #filter-tabs, .filter-tabs-ghost-hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; } body.nav-shorts #session-platform-bar, body.nav-clips #session-platform-bar { display: none !important; } .header-row-bottom { overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; } .header-row-bottom::-webkit-scrollbar { display: none; width: 0; height: 0; } /* T-Visual: Kategorien — komplette Sub-Navi-Zeile (Alle/Live/VOD/Kalender) entfernen. */ body.nav-categories #filter-tabs { display: none !important; } .sc-bubbles { display: flex; flex-wrap: wrap; gap: 0; padding: 4px 0 18px; } .sc-bubble { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; cursor: pointer; user-select: none; background: var(--card-2, rgba(255,255,255,0.05)); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); color: var(--text-dim); font-size: 14px; font-weight: 600; transition: background .15s ease, border-color .15s ease, color .15s ease; } .sc-bubble .logo-slot-sm img { width: 16px; height: 16px; display: block; } .sc-bubble:hover { border-color: var(--sys-focus); color: var(--text); } .sc-bubble.active { background: var(--sys-focus); border-color: var(--sys-focus); color: #fff; box-shadow: 0 0 14px var(--sys-glow, rgba(74, 84, 104,0.45)); } /* T3: nicht verknüpfte Plattform-Bubble — ausgegraut, gesperrt (LEGAL-TIKTOK-INSTAGRAM-REMOVE: Social-Hoster entfernt). */ .sc-bubble-locked { opacity: 0.45; cursor: not-allowed; } .sc-bubble-locked:hover { border-color: var(--card-border, rgba(255,255,255,0.12)); color: var(--text-dim); background: var(--card-2, rgba(255,255,255,0.05)); } .sc-bubble-off { opacity: 0.45; cursor: pointer; } .sc-bubble-off:hover { opacity: 0.72; border-color: var(--sys-focus); } /* UI-106: D-Pad/Tastatur-Fokus auf den neu erreichbaren Clips-Hoster-Bubbles (#clips-bubbles) und den Vote-/Kommentar-Buttons tief im Clip (.shorts-engage). `.sc-bubble.focused` weiter unten ist auf platform-pc:not(.app-tv) beschränkt — ohne diese Regel bliebe der neue Fokus auf TV/D-Pad unsichtbar. */ #clips-bubbles .sc-bubble.focused, .shorts-engage button.focused { outline: 2px solid var(--sys-focus); outline-offset: 2px; } /* T3: Vektor-Leerzustand-Icon für Shorts/Clips. */ .sc-empty-svg { width: 56px; height: 56px; opacity: 0.5; } /* T4: Schnell-Kopplung — Inline-QR + gekoppelte-Geräte-Panel. */ .pairing-layout { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 16px; margin-top: 14px; align-items: stretch; } /* UI-47: center the QR element and ALL text/controls beneath it (privacy note, hint, code input). */ .pairing-qr-col { flex: 0 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; order: 1; } .settings-pair-qr img { width: 200px; height: 200px; border-radius: 12px; display: block; background: #f2f2f4; } .qr-privacy-note { font-size: 12px; line-height: 1.45; color: var(--text-muted, #6b7280); margin: 10px auto 0; max-width: 420px; text-align: center; padding: 0 12px; word-wrap: break-word; overflow-wrap: break-word; } .pairing-legal-notice { padding: 0; margin: 14px 0 10px; max-width: 100%; } .pairing-legal-notice.hidden { display: none !important; } .legal-link { color: var(--sys-focus, #7c5cff); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.15s ease, opacity 0.15s ease; } .legal-link:hover, .legal-link:focus { color: var(--text, #fff); opacity: 0.92; } #hint-platforms .legal-link { font-size: inherit; line-height: inherit; font-weight: inherit; } .settings-pair-token { margin: 0 auto 14px; font-family: monospace; font-size: 20px; font-weight: 800; letter-spacing: 3px; color: var(--text); } .pairing-devices-col { flex: 1 1 auto; min-width: 0; order: 2; } .pairing-devices-title { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; } .pairing-devices-list { display: flex; flex-direction: column; gap: 8px; } .pairing-device { display: flex; align-items: center; gap: 10px; background: var(--card-2); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); border-radius: 10px; padding: 10px 12px; } .pairing-device-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.6); } .pairing-device-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pairing-unpair-btn { flex: 0 0 auto; font-size: 13px; padding: 6px 12px; } .pairing-device-empty { font-size: 13px; color: var(--text-dim); padding: 8px 2px; } /* UI-75: masked TV code/QR container — strong blur placeholder + smooth crossfade reveal. */ #settings-pair-qr { position: relative; min-height: 40px; } .pairing-qr-blur-mask { width: 200px; height: 200px; margin: 0 auto; border-radius: 12px; background: repeating-linear-gradient(45deg, rgba(74, 84, 104,0.28) 0 10px, rgba(42,46,56,0.28) 10px 20px); filter: blur(10px); opacity: 1; transition: opacity .5s ease, filter .5s ease; } .pairing-qr-blur-mask.pairing-qr-blur-mask-out { opacity: 0; filter: blur(2px); } .pairing-qr-reveal { opacity: 0; transition: opacity .5s ease; } .pairing-qr-reveal.pairing-qr-reveal-in { opacity: 1; } .settings-pair-token { transition: opacity .35s ease; } .pairing-token-flip { animation: pairingTokenFlip .4s ease; } @keyframes pairingTokenFlip { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } /* FEAT-8: Mobile Schnell-Kopplung — 6-stellige Code-Boxen (2x3) + QR-Scanner. */ .pairing-quick-title { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); margin: 4px 0 10px; } .pairing-code-boxes { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; } .pairing-code-group { display: flex; gap: 6px; } .pairing-code-box { width: 38px; height: 46px; text-align: center; font-size: 22px; font-weight: 700; font-family: monospace; border-radius: 8px; border: 1px solid var(--card-border, rgba(255,255,255,0.18)); background: var(--card-2, rgba(255,255,255,0.04)); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; } .pairing-code-box:focus { outline: none; border-color: var(--sys-focus); box-shadow: 0 0 0 2px var(--sys-focus, #4a5468) inset; } .pairing-code-sep { color: var(--text-dim); font-size: 20px; font-weight: 700; } .pairing-code-msg { min-height: 16px; font-size: 12px; margin: 0 0 10px; text-align: center; color: var(--text-dim); } .pairing-scan-btn { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto; } .pairing-scanner-wrap { margin-top: 12px; text-align: center; } .pairing-scanner-wrap.hidden { display: none !important; } .pairing-scanner-video { width: 100%; max-width: 320px; border-radius: 12px; background: #000; aspect-ratio: 1 / 1; object-fit: cover; } .pairing-scanner-hint { font-size: 12px; color: var(--text-dim); margin: 8px 0; } .pairing-scanner-close { margin-top: 6px; } /* ── T14: Erweiterter-Filter-Drawer ─────────────────────────────────────────── */ #adv-filter-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; } /* §M1.3: statischer Abschnitts-Header statt einklappbarem Toggle. */ .adv-filter-header { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--text-muted); margin: 12px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--card-border, rgba(255,255,255,0.10)); } /* §M1.2: im LIVE-Tab gegenstandslose Dropdowns ausgrauen + klick-tot. */ .adv-group-disabled { opacity: 0.5; pointer-events: none; } #adv-filter-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--card-border, rgba(255,255,255,0.18)); color: var(--text-dim); border-radius: 999px; padding: 8px 16px; cursor: pointer; font-size: 14px; font-weight: 600; } #adv-filter-toggle:hover, #adv-filter-toggle.open { border-color: var(--sys-focus); color: var(--text); } #adv-filter-toggle .adv-caret { transition: transform .2s ease; } #adv-filter-toggle.open .adv-caret { transform: rotate(180deg); } #adv-filter-drawer { display: none; gap: 18px; flex-wrap: wrap; background: var(--card-2, rgba(255,255,255,0.04)); border: 1px solid var(--card-border, rgba(255,255,255,0.10)); border-radius: 14px; padding: 16px 18px; margin: 6px 0 14px; } #adv-filter-drawer.open { display: flex; } .adv-group { display: flex; flex-direction: column; gap: 6px; min-width: 180px; } .adv-group-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); } .adv-select { background: var(--card-2, #16161f); color: var(--text); border: 1px solid var(--card-border, rgba(255,255,255,0.18)); border-radius: 10px; padding: 9px 12px; font-size: 14px; cursor: pointer; } .adv-select:focus { outline: none; border-color: var(--sys-focus); } /* T19 — Exklusiv-Feed-Pillen (Login-pflichtig). Gesperrte Plattformen ausgrauen; Web zeigt den Grund per CSS-Hover-Tooltip, TV/Handy per Toast (JS). */ .adv-group-exclusive { min-width: 240px; } .adv-xpills { display: flex; flex-wrap: wrap; gap: 10px; } .adv-xpill { display: inline-flex; align-items: center; gap: 8px; background: var(--card-2, #16161f); color: var(--text); border: 1px solid var(--card-border, rgba(255,255,255,0.18)); border-radius: 999px; padding: 7px 14px 7px 8px; font-size: 13px; font-weight: 600; cursor: pointer; position: relative; transition: border-color .15s ease, box-shadow .15s ease; } .adv-xpill .adv-xpill-logo { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; } .adv-xpill .adv-xpill-logo img { width: 100%; height: 100%; object-fit: contain; } .adv-xpill:not(.locked):hover { border-color: var(--sys-idle); } .adv-xpill.active { border-color: var(--sys-focus); color: var(--sys-focus); box-shadow: var(--sys-glow, 0 0 14px -2px var(--sys-focus)); } .adv-xpill.focused { border-color: var(--sys-focus); } .adv-xpill.locked { opacity: 0.45; cursor: not-allowed; } /* Minimalistischer, theme-konformer Hover-Tooltip (nur Web/PC; TV/Handy nutzt Toast). */ .adv-xpill.locked[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: normal; width: max-content; max-width: 230px; background: rgba(2, 6, 23, 0.96); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.35; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--card-border, rgba(255,255,255,0.25)); box-shadow: 0 8px 24px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 50; } .adv-xpill.locked[data-tip]::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(2, 6, 23, 0.96); opacity: 0; transition: opacity .15s ease; z-index: 50; } body:not(.app-tv):not(.app-phone) .adv-xpill.locked[data-tip]:hover::after, body:not(.app-tv):not(.app-phone) .adv-xpill.locked[data-tip]:hover::before { opacity: 1; } /* ════════════════════════════════════════════════════════════════════════════ Task 29.2 — Watch-Page: Hoster-/Mirror-Matrix, lokale Reaktionen, Live-Modus ════════════════════════════════════════════════════════════════════════════ */ .pd-hoster-matrix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; } .pd-hoster-matrix.hidden { display: none; } .pd-hoster-label { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-dim, #b7bcc8); margin-right: 4px; } .pd-hoster-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text, #f2f4f8); background: var(--card-2, rgba(30, 34, 44, 0.7)); border: 1.5px solid transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 12px -6px var(--pd-glow, transparent); transition: box-shadow .15s, border-color .15s, transform .1s; } .pd-hoster-btn .logo-slot-sm img { max-height: 16px; max-width: 16px; } .pd-hoster-btn:hover { transform: translateY(-1px); } .pd-hoster-btn.active { border-color: var(--pd-glow, var(--sys-focus)); box-shadow: 0 0 0 1px var(--pd-glow, var(--sys-focus)), 0 0 16px -3px var(--pd-glow, var(--sys-focus)); } .pd-react { display: inline-flex; align-items: center; gap: 4px; } .pd-react-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text, #f2f4f8); background: var(--card-2, rgba(30, 34, 44, 0.7)); border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; } .pd-react-btn:hover { background: rgba(255, 255, 255, 0.12); } .pd-react-btn.active { border-color: var(--sys-focus); color: #ffffff; box-shadow: var(--sys-glow); } .pd-react-ic { font-size: 11px; line-height: 1; } .pd-react-n { font-variant-numeric: tabular-nums; } /* Live-Modus (Twitch-artige Geometrie): rechte Spalte bleibt dem Chat vorbehalten. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay.pd-live-mode #pd-recos { display: none; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay.pd-live-mode #pd-chat { display: flex; } /* ════════════════════════════════════════════════════════════════════════════ UI/UX-Sprint — Live-Layout, Button-Frames, Settings-Layout, Brand-Glow (var-basiert → theme-adaptiv, kein hartkodiertes Farb-Bleeding) ════════════════════════════════════════════════════════════════════════════ */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay.pd-live-mode #pd-comments { display: none !important; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay.pd-live-mode #pd-side { display: flex; flex-direction: column; } /* UI-CARD-META-LAYOUT-CHAT-HEIGHT (historisch — s. BUG-CHAT-INPUT-BOTTOM-ALIGN unten für den aktuellen Stand): overflow:hidden als Sicherheitsnetz — die JS-gesetzte feste Höhe (player-desktop.js syncChatHeight()) saß hier auf #pd-chat. Für den theoretischen Extremfall eines sehr niedrigen/schmalen Fensters, in dem Werbeslot (fix 250px) + Chat-Chrome (Kopfzeile/Eingabefeld/ Nur-Lesen-Banner) zusammen die verfügbare Höhe überschreiten, clipped overflow:hidden sauber statt das Panel unter die Video-Unterkante wachsen zu lassen. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay.pd-live-mode #pd-chat { flex: 1 1 auto; min-height: 0; overflow: hidden; } /* CLAUDIT-AUDIT (UI-CARD-META-LAYOUT-CHAT-HEIGHT): overflow:hidden ergänzt. #pd-chat trägt zwar bereits overflow:hidden als äußeres Sicherheitsnetz, aber #pd-chat-body selbst hatte keins — bei mittlerer Verengung (Stage-Höhe live simuliert 350-450px, ein realistisches kleines Browserfenster, KEIN Extremfall) schrumpft #pd-chat-body unter die eigene min-height seines Kindes #pd-chat-frame (160px) und der Chat-Iframe ragt dadurch sichtbar über die Body-Box hinaus — bleibt vom äußeren overflow:hidden ungeklippt, solange die GESAMTsumme (Chat+Werbung) noch ins Panel passt, und überlappt sichtbar den darunterliegenden Werbeslot statt sauber abzuschneiden. BUG-CHAT-INPUT-BOTTOM-ALIGN (aktueller Stand, s. player-desktop.js syncChatHeight()): #pd-chat-body bekommt jetzt eine EIGENE JS-Inline-Höhe (= Video-Höhe, flex:0 0 auto statt der hier deklarierten flex:1 1 auto) — die feste Höhe wandert weg von #pd-chat (das ist jetzt content-getrieben: Chat-Body + Werbeslot als zusätzlicher Block darunter, keine geteilte Budget-Kompression mehr). Diese CSS-Zeile bleibt als Fallback aktiv, solange kein Live-Modus-Inline-Override greift (z. B. während der Sync noch nicht gelaufen ist) oder einer der 3 Sonderpfade (Kino/Breitbild/Hochformat) den Inline-Override zurückgesetzt hat. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay.pd-live-mode #pd-chat-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* UI-CARD-META-LAYOUT-CHAT-HEIGHT: min-height von 520px auf 160px reduziert. Die alte 520px-Marke (UI-LIVE-CHAT-HEIGHT, als Lesbarkeits-Fallback gedacht) erzwang bei praktisch jeder realistischen Fenstergröße mit sichtbarem #stream-chat-ad-placement (Werbung, 250px, siehe unten) ein Überragen der Video-Unterkante, weil #pd-chat-frame nie unter 520px schrumpfen durfte — live gemessen: bei 430-643px Stage-Höhe blieb dafür gar kein Platz. 160px lässt der Nachrichtenliste noch ein paar lesbare Zeilen, erzwingt aber kein Überragen mehr in den getesteten Fällen. Gewinnt weiterhin dank #player- overlay.pd-live-mode (2 IDs) gegenüber der generischen #pd-chat-frame- Basisregel weiter unten in dieser Datei (nur 1 ID) IMMER, unabhängig von der Cascade-Position — die Basisregel dort ist für den Live-Fall bereits vestigial. BUG-CHAT-INPUT-BOTTOM-ALIGN: dieser min-height-Floor bleibt unverändert relevant, nur jetzt seltener gebraucht, weil der Werbeslot #pd-chat-body nicht mehr aus dem gleichen Budget verdrängt. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay.pd-live-mode #pd-chat-frame { flex: 1 1 auto; min-height: 160px; height: 100%; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay.pd-live-mode #pd-chat { display: flex; flex-direction: column; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #stream-chat-ad-placement { flex: 0 0 250px; width: 300px; max-width: 100%; height: 250px; margin: 10px auto 0; box-sizing: border-box; overflow: hidden; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #stream-chat-ad-placement.hidden { display: none !important; } .stream-chat-ad-link { display: block; width: 300px; height: 250px; margin: 0 auto; text-decoration: none; color: inherit; box-sizing: border-box; } .stream-chat-ad-inner { position: relative; width: 300px; height: 250px; border-radius: 8px; overflow: hidden; background: var(--card-2, rgba(30, 34, 44,0.7)); border: 1px solid var(--card-border, rgba(255,255,255,0.18)); } .stream-chat-ad-img { width: 100%; height: 100%; object-fit: cover; display: block; } .stream-chat-ad-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 48px; opacity: 0.5; } .stream-chat-ad-badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,0.55); color: #fff; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-share, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-profile { border: 1.5px solid var(--card-border, rgba(255,255,255,0.18)); background: var(--card-2, rgba(30, 34, 44,0.7)); border-radius: 999px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-share:hover, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-profile:hover { border-color: var(--sys-focus); background: rgba(255,255,255,0.12); } .platform-row-locked { position: relative; } /* UI-29: opacity 1 — grauschleier removed, locked rows stay fully legible. */ .platform-row-locked .platform-info-slot, .platform-row-locked .platform-logo-slot { opacity: 1; } .rem-suboption { padding-left: 34px; } .settings-info-icon svg { width: 20px; height: 20px; vertical-align: middle; display: inline-block; color: var(--text-dim, #b7bcc8); } #legal-body { width: 100%; max-width: none; } #legal-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; } #settings-pair-qr img, #settings-pair-qr canvas { width: 400px !important; height: 400px !important; max-width: 100%; border-radius: 12px; } body.app-desktop .header-row-bottom { justify-content: center; } body.app-desktop .header-row-bottom #filter-tabs { margin: 0 auto; justify-content: center; } /* ── Stage 2 §1: voll umlaufender Marken-Glow + Multi-Hoster-Gradient-Halo ──── */ .video-card[data-platform] { position: relative; } .video-card[data-platform]:not(.ad-card) { /* §1 Card-Border-Isolation: KEIN permanenter Marken-Ring/-Glow mehr im Grid — nur bei Fokus/Hover (unten) bzw. an den Settings-Plattform-Kacheln. */ border-color: var(--card-border, transparent); box-shadow: none; } body:not(.kbd-active) .video-card[data-platform]:not(.ad-card):hover, .video-card[data-platform]:not(.ad-card).focused, .video-card[data-platform]:not(.ad-card):focus { /* WURZEL-FIX: animation:none killt breathe-neon-card — die animierte Neon-box-shadow überschrieb sonst die statische Marken-box-shadow (Karten blieben neon-gelb). */ animation: none !important; border-color: var(--platform-brand-color, var(--card-glow, var(--sys-focus))); box-shadow: 0 0 0 2px var(--platform-brand-color, var(--card-glow, var(--sys-focus))), 0 0 24px 3px var(--platform-brand-color, var(--card-glow, var(--sys-focus))), 0 0 60px 14px var(--platform-brand-color, var(--card-glow, var(--sys-focus))); } .video-card.card-multi { /* UI-REDESIGN Phase 3 (User): Rahmen = Haupt-Hosterfarbe (Basis --card-glow); die weiteren Hoster als Farbleiste unten (.card-sources). Zwei-Farben-Verlaufsrahmen + Glow entfallen; unten etwas Platz für die Auswahlleiste. */ border-color: var(--card-glow, var(--border, #2c303c)); background: var(--card-2); padding-bottom: 13px; } .video-card.card-multi::after { content: none; } body:not(.kbd-active) .video-card.card-multi:hover::after, .video-card.card-multi.focused::after, .video-card.card-multi:focus::after { opacity: 0.9; animation: pc-multiglow 2.4s ease-in-out infinite; } @keyframes pc-multiglow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* ── Stage 2 §5: Sidebar-Baseline, Notif-Ausrichtung, Rechtliches gestapelt ──── */ body.app-desktop #sidebar-logo { justify-content: center; } .settings-info-icon { display: inline-flex; align-items: center; justify-content: center; } .settings-info.legal-settings { flex-wrap: wrap; } .settings-info.legal-settings .legal-row { flex: 1 1 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; } .settings-info.legal-settings .legal-row .platform-btn { width: 100%; text-align: center; } /* Stage 2 §3: Watch-Topbar (Zurück + globale Suche) über dem Viewport. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-search-jump { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; } /* ── §1: Plattform-Marken-Variablen (gilt auch für [data-theme]-Overlays Dark/ Fuchsia/Retro/Tritanopia, die auf dieser Basis-Datei sitzen). ── */ .video-card[data-platform="youtube"], .platform-row[data-platform="youtube"] { --platform-brand-color: #ff0000; } .video-card[data-platform="kick"], .platform-row[data-platform="kick"] { --platform-brand-color: #00E640; } /* UI-12: Kick accent bar — native brand green (enforced over any fallback). */ .platform-row[data-platform="kick"] { border-left-color: #00E640 !important; --brand: #00E640 !important; } /* UI-25/33/45: Social Media settings rows — flat card with left accent bar ONLY. All glow/border effects restricted exclusively to the .platform-logo-slot icon square. The triple-selector specificity here beats all grid-card .pc-card-social overrides. */ .platform-row.pc-card-social, body .platform-row.pc-card-social, body .settings-info .platform-row.pc-card-social { border: none !important; border-left: 4px solid var(--platform-brand-color, var(--sys-focus)) !important; box-shadow: none !important; outline: none !important; filter: none !important; } /* Social icon square: crisp brand-color border + subtle inset glow (contained in slot). */ .platform-row.pc-card-social .platform-logo-slot { border-color: var(--platform-brand-color, var(--sys-focus)) !important; box-shadow: inset 0 0 12px -4px var(--platform-brand-color, transparent), 0 0 0 1.5px var(--platform-brand-color, transparent) !important; } /* UI-45: Locked social rows — opacity 1, color semantics carry the lock signal. */ .platform-row.pc-card-social.platform-row-locked .platform-logo-slot, .platform-row.pc-card-social.platform-row-locked .platform-info-slot { opacity: 1 !important; } /* UI-53: Logo-slot hover highlight — amplify brand ring + add outer glow on row hover/focus. */ body:not(.kbd-active) .platform-row.pc-card-social[data-platform]:hover .platform-logo-slot, .platform-row.pc-card-social[data-platform].focused .platform-logo-slot { box-shadow: inset 0 0 20px -2px var(--platform-brand-color, transparent), 0 0 0 2.5px var(--platform-brand-color, transparent), 0 0 24px -3px var(--platform-brand-color, transparent) !important; filter: brightness(1.18) !important; transition: box-shadow 0.18s ease, filter 0.18s ease; } /* UI-26: Paid tier settings rows — no card-level dot-matrix; move to icon slot. The row stays clean (left accent bar only). */ .platform-row.pc-card-paid { border-left: 4px solid var(--platform-brand-color, #ff424d) !important; box-shadow: none !important; } /* UI-PATREON: Paid icon square gets an "alternative Glow" — a dot-matrix halftone halo confined strictly to the 60x60 logo tile (never the button, never the row). Supersedes UI-52's row-wide halo (removed below) and BUG-31's button halo (see ~5533): those leaked onto/behind the login button and made it unreadable. The dot-matrix visually distinguishes paid/subscription hosters (Patreon, Beacon) from a plain single-color glow ring (e.g. YouTube). */ .platform-row.pc-card-paid .platform-logo-slot { position: relative; isolation: isolate; border-color: var(--platform-brand-color, #ff424d) !important; box-shadow: 0 0 0 1.5px var(--platform-brand-color, #ff424d) !important; } .platform-row.pc-card-paid .platform-logo-slot::after { content: ""; position: absolute; inset: -7px; z-index: -1; pointer-events: none; border-radius: 14px; background-image: radial-gradient(circle, var(--platform-brand-color, #ff424d) 18%, transparent 20%); background-size: 6px 6px; background-position: center; -webkit-mask: radial-gradient(circle, #000 55%, rgba(0,0,0,0.45) 78%, transparent 100%); mask: radial-gradient(circle, #000 55%, rgba(0,0,0,0.45) 78%, transparent 100%); opacity: 0.55; transition: opacity 0.22s ease; will-change: opacity; } /* UI-53: Paid logo-slot hover — thicker ring + intensified dot-matrix halo. */ body:not(.kbd-active) .platform-row.pc-card-paid[data-platform]:hover .platform-logo-slot, .platform-row.pc-card-paid[data-platform].focused .platform-logo-slot { box-shadow: 0 0 0 3px var(--platform-brand-color, #ff424d) !important; filter: brightness(1.15) !important; transition: box-shadow 0.18s ease, filter 0.18s ease; } body:not(.kbd-active) .platform-row.pc-card-paid[data-platform]:hover .platform-logo-slot::after, .platform-row.pc-card-paid[data-platform].focused .platform-logo-slot::after { opacity: 0.9; } /* UI-16: Defensive rule — prevent any sidebar-legal block from rendering inside the main content frame (#content). Legal links must only appear in #sidebar, #legal-overlay, #section-settings, and .login-wall-legal (pre-auth). */ #content > .sidebar-legal, #content .sidebar-legal:not(.login-wall-legal), #app > .sidebar-legal { display: none !important; } .video-card[data-platform="twitch"], .platform-row[data-platform="twitch"] { --platform-brand-color: #9146ff; } .video-card[data-platform="dailymotion"], .platform-row[data-platform="dailymotion"] { --platform-brand-color: #0066dc; } .video-card[data-platform="beacon"], .platform-row[data-platform="beacon"] { --platform-brand-color: #5b3fff; } .video-card[data-platform="patreon"], .platform-row[data-platform="patreon"] { --platform-brand-color: #ff424d; } /* UI-PATREON (Claufix-Fund F2): dropout fehlte hier komplett (vorbestehende Lücke, nicht durch dieses Ticket verursacht) — obwohl beacon/patreon (gleicher Premium-Tier, App.PREMIUM_PLATFORMS) sowie App.PLATFORM_COLORS/App.BRAND_GLOW bereits '#ffd400' führen. Ohne diese Regel fiel Dropouts Paid-Card-Rahmen + Dot-Matrix-Glow auf den generischen var(--brand)-Fallback zurück statt die eigene Markenfarbe zu zeigen. */ .video-card[data-platform="dropout"], .platform-row[data-platform="dropout"] { --platform-brand-color: #ffd400; } /* FEAT-11 (Sprint 10): Next-Gen-Hoster-Megapack. */ .video-card[data-platform="peertube"], .platform-row[data-platform="peertube"] { --platform-brand-color: #F1680D; } /* BUG-BITCHUTE-ELIMINATION: BitChute-Brand-Color-Regel restlos entfernt (AGB-Scraping-Verbot + non-commercial-only Content-Lizenz, s. Logfile). */ /* ════════════════════════════════════════════════════════════════════════════ SPRINT 4 §V2 — VISUAL SEPARATION ENGINE (3 Karten-/Slot-Tiers) Gemeinsame Klassen für Grid-Karten (.video-card) UND Verknüpfungs-Slots (.platform-row). Markenfarbe = var(--platform-brand-color) aus dem Map oben. ──────────────────────────────────────────────────────────────────────────── */ /* Tier 1 — Standard Video/Live (.pc-card-media): klassischer atmosphärischer Marken-Glow bleibt unverändert (Grid: Hover/Fokus über die [data-platform]- Regeln; Slots: dauerhafter --brand-Glow der .platform-row). Kein Eingriff. */ /* Tier 2 — Social (.pc-card-social, aktuell keine Hoster): KEIN weicher Glow, stattdessen eine scharfe, kräftige 3px-Vollkontur in der Markenfarbe. */ .pc-card-social { border: 3px solid var(--platform-brand-color, var(--card-glow, var(--sys-focus))) !important; box-shadow: none !important; background-image: none; } .pc-card-social::after { display: none !important; } body:not(.kbd-active) .pc-card-social:hover, .pc-card-social.focused, .pc-card-social:focus { box-shadow: none !important; border-color: var(--platform-brand-color, var(--card-glow, var(--sys-focus))) !important; filter: brightness(1.08); } /* Tier 3 — Paid/Premium (.pc-card-paid: Patreon/Beacon): Dotted-Halo- Matrix (Halftone) statt Gradient-Glow. HARDWARE-OPTIMIERT für Tizen-Chromium-85/ webOS: statisches Punkt-Raster (radial-gradient-Kachel) + Compositor-Maske (KEIN blur, KEINE JS-Animation, GPU-kompositiert) → locked 60fps. Punkte verkleinern/verblassen nach außen über die Masken-Alpha. */ .pc-card-paid { position: relative; box-shadow: none !important; } .pc-card-paid::after { content: ""; position: absolute; inset: -12px; z-index: -1; pointer-events: none; border-radius: 20px; background-image: radial-gradient(circle, var(--platform-brand-color, var(--card-glow, #ff424d)) 21%, transparent 24%); background-size: 7px 7px; background-position: center; -webkit-mask: radial-gradient(closest-side, #000 52%, rgba(0,0,0,0.5) 74%, transparent 100%); mask: radial-gradient(closest-side, #000 52%, rgba(0,0,0,0.5) 74%, transparent 100%); opacity: 0.55; transition: opacity 0.22s ease; will-change: opacity; } body:not(.kbd-active) .pc-card-paid:hover::after, .pc-card-paid.focused::after, .pc-card-paid:focus::after { opacity: 0.95; } /* §3.4 Multi-Stream-Tracker-Icons (zwischen Titel und Creator, nur bei >1 Hoster). */ .card-multihost { display: flex; gap: 5px; align-items: center; margin: 3px 0 5px; flex-wrap: wrap; } .card-multihost-ic { width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); padding: 2.5px; box-sizing: border-box; } .card-multihost-ic img { width: 100%; height: 100%; object-fit: contain; display: block; } /* §3.3 Hoster-Filter-Leiste (Startseite, unter dem Section-Header). */ .hoster-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 16px; } .hoster-bar.hidden { display: none; } /* FEAT-11/12: Unified multi-chat + popout layout */ .pd-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .pd-chat-actions { display: flex; gap: 4px; align-items: center; } .pd-chat-mode-btn, .pd-chat-popout-btn { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text-muted, #aaa); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 14px; line-height: 1; } .pd-chat-mode-btn.active, .pd-chat-popout-btn:hover { border-color: var(--sys-focus, #7c5cff); color: var(--text, #fff); } .pd-chat-unified { max-height: calc(100vh - 240px); min-height: 360px; overflow-y: auto; padding: 6px 4px; background: rgba(0,0,0,.25); border-radius: 8px; } .mc-msg { display: flex; gap: 8px; align-items: flex-start; padding: 7px 6px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; } .mc-msg[data-platform="twitch"] { border-left: 2px solid #9146ff; } .mc-msg[data-platform="youtube"] { border-left: 2px solid #ff0033; } .mc-msg[data-platform="kick"] { border-left: 2px solid #53fc18; } .mc-user { font-weight: 700; color: var(--sys-focus, #7c5cff); flex: 0 0 auto; max-width: 36%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-text { flex: 1; line-height: 1.45; word-break: break-word; } .mc-empty { padding: 24px 12px; text-align: center; color: var(--text-muted, #888); font-size: 13px; } .mc-split-grid { display: flex; flex-direction: column; gap: 10px; } .mc-split-pane { border: 1px solid rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.2); } .mc-split-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; font-weight: 700; text-transform: capitalize; } .mc-split-head img { width: 16px; height: 16px; } .mc-split-frame { width: 100% !important; max-width: 100% !important; height: 280px; border: 0; background: #000; box-sizing: border-box; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay.pd-chat-popped #pd-chat { display: none !important; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay.pd-chat-popped #pd-recos { display: flex !important; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-overlay.pd-chat-popped.pd-live-mode #pd-side { flex: 0 0 238px; } /* UI-87: 340*0.7 */ /* FEAT-7: Session-linked platform filter beneath Alle/Live/VOD tabs. */ .session-platform-bar { display: none; } .session-platform-bar.hidden { display: none; } .session-platform-bar .filter-pill { display: inline-flex; align-items: center; gap: 6px; } /* FEAT-6: Live multistream neon ring on thumbnail. */ .video-card.card-multistream-live .card-thumbnail { box-shadow: 0 0 0 2px var(--card-glow, var(--sys-focus)), 0 0 18px 4px var(--card-glow2, var(--card-glow)); } .video-card.card-multistream-live::after { animation-duration: 1.6s; opacity: 0.55; } .hoster-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 700; background: var(--card-2, rgba(255,255,255,0.05)); color: var(--sys-idle, #9aa0aa); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); opacity: 0.55; transition: all .15s ease; } .hoster-toggle .logo-slot-sm img { width: 15px; height: 15px; display: block; } .hoster-toggle:hover { opacity: 0.9; } .hoster-toggle.on { opacity: 1; color: var(--text, #fff); background: var(--card, rgba(255,255,255,0.08)); border-color: var(--sys-focus); box-shadow: 0 0 10px -3px var(--sys-focus); } /* §5 Collections / Gruppen — Toolbar, Empty-State, Modal, Kanal-Picker. */ .col-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; } .col-select, .col-sort, .col-btn { padding: 8px 13px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; background: var(--card-2, rgba(255,255,255,0.06)); color: var(--text, #fff); border: 1px solid var(--card-border, rgba(255,255,255,0.14)); } .col-select { min-width: 180px; } .col-select:focus, .col-sort:focus { outline: none; border-color: var(--sys-focus); } .col-btn:hover { border-color: var(--sys-focus); } .col-btn-primary { background: var(--sys-focus); color: var(--bg, #06010f); border-color: var(--sys-focus); } .col-btn-danger:hover { border-color: #ff5c8a; color: #ff5c8a; } .col-empty { text-align: center; padding: 56px 20px; } .col-empty-ic { font-size: 46px; opacity: .7; margin-bottom: 12px; } .col-empty-title { font-size: 18px; font-weight: 800; color: var(--text, #fff); margin: 0 0 6px; } .col-empty-sub { font-size: 14px; color: var(--text-muted, #8a8f98); margin: 0; } .col-modal-ov { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4,1,12,0.8); backdrop-filter: blur(4px); } .col-modal { position: relative; width: min(520px, 100%); max-height: 90vh; overflow-y: auto; background: var(--bg-header, #14161e); border: 1px solid var(--card-border, var(--sys-focus)); border-radius: 16px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .col-modal-sm { width: min(380px, 100%); } .col-modal-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer; background: rgba(255,255,255,0.08); color: var(--text, #fff); font-size: 15px; } .col-modal-x:hover { background: rgba(255,255,255,0.16); } .col-modal-title { margin: 0 0 16px; font-size: 18px; font-weight: 800; color: var(--text, #fff); } .col-field-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--text-dim, #b7bcc8); margin: 12px 0 6px; } .col-input { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px; font-size: 14px; background: var(--bg, #0c1118); color: var(--text, #fff); border: 1.5px solid var(--text-muted, #5a5f6c); outline: none; } .col-input:focus { border-color: var(--sys-focus); } .col-icons { display: flex; flex-wrap: wrap; gap: 6px; } /* UI-6: SVG-based icon picker — display:inline-flex so SVG content centers. */ .col-icon-opt { width: 38px; height: 38px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--card-2, rgba(255,255,255,0.06)); color: var(--text, #fff); border: 1.5px solid var(--card-border, rgba(255,255,255,0.14)); transition: border-color .15s, box-shadow .15s; } .col-icon-opt svg { pointer-events: none; flex-shrink: 0; } .col-icon-opt:hover { border-color: var(--sys-focus, #faff00); } .col-icon-opt.sel { border-color: var(--sys-focus); box-shadow: 0 0 0 1px var(--sys-focus); background: rgba(250,255,0,0.12); } .col-platfilters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .col-platfilter { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; background: var(--card-2, rgba(255,255,255,0.06)); color: var(--text-muted, #8a8f98); border: 1px solid var(--card-border, rgba(255,255,255,0.14)); opacity: .5; } .col-platfilter .logo-slot-sm img { width: 14px; height: 14px; display: block; } .col-platfilter.on { opacity: 1; color: var(--text, #fff); border-color: var(--sys-focus); } .col-chanlist { max-height: 260px; overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; } .col-chan { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 9px; cursor: pointer; background: var(--card-2, rgba(255,255,255,0.04)); color: var(--text, #fff); border: 1px solid transparent; font-size: 13.5px; } .col-chan .logo-slot-sm img { width: 18px; height: 18px; display: block; } .col-chan-name { flex: 1 1 auto; font-weight: 600; } .col-chan-check { width: 18px; text-align: center; color: var(--sys-focus); font-weight: 800; } .col-chan.sel { border-color: var(--sys-focus); background: var(--card, rgba(255,255,255,0.08)); } .col-chan:hover { border-color: var(--card-border, rgba(255,255,255,0.2)); } .col-chan-empty { padding: 16px; text-align: center; color: var(--text-muted, #8a8f98); font-size: 13px; } .col-modal-act { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; } /* §4 Player-Steuer-Piktogramme + Modi — UI-5: SVG icons, bar centers from player mid. */ /* Nachtrag (Claudit, 05.07.): Abstand zum Video verkleinert (10px→6px) — Sekundärreihe trug zusätzlich ihr eigenes 10px-Top-Margin (siehe .pd-picto-row-primary unten), summierte sich auf ~20px sichtbare Lücke zwischen Player und "Erweiterte Optionen". */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-pictobar { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; justify-content: center; } .pd-picto { width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--card-2, rgba(255,255,255,0.06)); color: var(--text, #fff); border: 1px solid var(--card-border, rgba(255,255,255,0.14)); transition: all .15s ease; padding: 0; } .pd-picto svg { pointer-events: none; flex-shrink: 0; } .pd-picto:hover { border-color: var(--sys-focus); transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4); } /* UI-107-Audit (Claudit): D-Pad-Fokusring fehlte komplett (nur :hover war gestylt) — ohne sichtbaren Ring ist die neue "Erweiterte Optionen"-Sekundärreihe per Fernbedienung nicht bedienbar. Reinforcement analog zu .fc-btn/.plc-send (player.css). */ .pd-picto:focus { outline: 2px solid var(--sys-focus); outline-offset: 2px; } body.app-tv .pd-picto:focus { outline-width: 3px; } .pd-picto.active { background: var(--sys-focus); color: var(--bg, #06010f); border-color: var(--sys-focus); box-shadow: 0 0 12px -3px var(--sys-focus); } .pd-picto.active svg { stroke: var(--bg, #06010f); } .pd-picto.is-disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.5); } /* (Legacy stubs — overridden by the final cinema block below.) */ body.pd-cinema #pd-video-stage { aspect-ratio: 16 / 9; height: auto; max-height: min(90vh, calc(96vw * 9 / 16)); transition: width .35s ease, max-height .35s ease; filter: none !important; } body.pd-cinema #pd-video-stage iframe, body.pd-cinema #pd-video-stage video, body.pd-cinema #pd-video-stage #player, body.pd-cinema #pd-video-stage #yt-player { width: 100%; height: 100%; object-fit: contain; filter: none !important; } /* (Widescreen layout is defined in the final block below.) */ :is(body.app-desktop, body.app-phone.pd-mobile-active).pd-portrait #player-desktop { display: flex; flex-direction: column; } :is(body.app-desktop, body.app-phone.pd-mobile-active).pd-portrait #pd-primary, :is(body.app-desktop, body.app-phone.pd-mobile-active).pd-portrait #pd-side { width: 100%; max-width: 520px; margin: 0 auto; } :is(body.app-desktop, body.app-phone.pd-mobile-active).pd-portrait #pd-video-stage { aspect-ratio: 9 / 16; max-height: 70vh; margin: 0 auto; } :is(body.app-desktop, body.app-phone.pd-mobile-active).pd-portrait #pd-chat-frame { height: 40vh; } /* BUG-2 Fix: stage floats via CSS — iframes are never reparented (no reload). FEAT-7: left/top MUST stay non-!important — the drag script sets them inline (stage.style.left/top) while dragging; an !important stylesheet value would silently win over that inline write and freeze the box in place. */ #pd-video-stage.pd-pip-float { position: fixed !important; right: 18px; bottom: 18px; left: auto; top: auto; width: 360px !important; height: 232px !important; z-index: 2147482000; background: #000; border: 1px solid var(--sys-focus, #faff00); border-radius: 10px; box-shadow: 0 14px 50px rgba(0,0,0,.6); overflow: hidden; min-width: 220px; min-height: 150px; padding-top: 0 !important; resize: both; } #pd-video-stage.pd-pip-float > *:not(#pd-pip) { width: 100% !important; height: 100% !important; } /* Chrome bar sits inside the floating stage as an absolute overlay. BUG-PIP-KINO-REGRESSIONS (Bug 4): z-index war 1 — GLEICHAUF mit dem BUG-86-Wheel/Klick-Fänger #player-touch-overlay (z-index:3, position:absolute, inset:0, pointer-events:auto). Die generische Regel "#pd-video-stage.pd-pip-float > *:not(#pd-pip) { width/height:100% }" streckt auch den Fänger über die GESAMTE schwebende Box (inkl. der 28px-Chrome-Leiste), und mit z-index:3 > 1 lag er über #pd-pip → Restore-/Close-Buttons waren dadurch nicht mehr klickbar (Klicks landeten auf dem transparenten Fänger). z-index über den Fänger angehoben, damit die Chrome-Leiste + ihre Buttons wieder zuverlässig empfangen. cursor:move entfernt — der Mini-Player wird nicht mehr frei gedraggt (siehe player-desktop.js _doTogglePipOpen), Klick auf die Leiste schaltet stattdessen durch die festen Eck-Positionen. */ #pd-pip { position: absolute; top: 0; left: 0; right: 0; height: 28px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; background: var(--bg-header, #14161e); cursor: pointer; user-select: none; } .pd-pip-title { flex: 1 1 auto; font-size: 11px; font-weight: 800; color: var(--text, #fff); letter-spacing: .5px; pointer-events: none; } #pd-pip button { width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(255,255,255,0.12); color: var(--text, #fff); cursor: pointer; font-size: 12px; } #pd-pip button:hover { background: rgba(255,255,255,0.24); } /* BUG-9: PiP-Ecke/-Größe — 4 Ecken × 3 Größen, gemeinsame Klassen für TV-Mini (#player-overlay.is-mini-player.mini-tv) UND Desktop-Float (#pd-video-stage.pd-pip-float). Keine Klasse = unverändertes bisheriges Verhalten (unten-rechts/Mittel), non-breaking Default. Desktop OHNE !important (wie die Basis-Regel oben — die Maus-Drag-Logik schreibt Inline- Styles, die weiterhin gewinnen sollen); TV MIT !important (wie die bestehende .mini-tv-Regel — dort gibt es kein konkurrierendes Inline-Drag). */ #pd-video-stage.pd-pip-float.pip-pos-tl { left: 18px; top: 18px; right: auto; bottom: auto; } #pd-video-stage.pd-pip-float.pip-pos-tr { right: 18px; top: 18px; left: auto; bottom: auto; } #pd-video-stage.pd-pip-float.pip-pos-bl { left: 18px; bottom: 18px; right: auto; top: auto; } #pd-video-stage.pd-pip-float.pip-pos-br { right: 18px; bottom: 18px; left: auto; top: auto; } #pd-video-stage.pd-pip-float.pip-size-s { width: 260px !important; height: 162px !important; } #pd-video-stage.pd-pip-float.pip-size-m { width: 360px !important; height: 232px !important; } #pd-video-stage.pd-pip-float.pip-size-l { width: 480px !important; height: 290px !important; } #player-overlay.is-mini-player.mini-tv.pip-pos-tl { left: 32px !important; top: 32px !important; right: auto !important; bottom: auto !important; } #player-overlay.is-mini-player.mini-tv.pip-pos-tr { right: 32px !important; top: 32px !important; left: auto !important; bottom: auto !important; } #player-overlay.is-mini-player.mini-tv.pip-pos-bl { left: 32px !important; bottom: 32px !important; right: auto !important; top: auto !important; } #player-overlay.is-mini-player.mini-tv.pip-pos-br { right: 32px !important; bottom: 32px !important; left: auto !important; top: auto !important; } #player-overlay.is-mini-player.mini-tv.pip-size-s { width: 260px !important; } #player-overlay.is-mini-player.mini-tv.pip-size-m { width: 380px !important; } #player-overlay.is-mini-player.mini-tv.pip-size-l { width: 480px !important; } /* Fallback für Engines ohne aspect-ratio-Support (spiegelt die bestehende generische @supports-Regel bei .is-mini-player, nur für die abweichenden Klein-/Groß-Breiten kalibriert). */ @supports not (aspect-ratio: 1) { #player-overlay.is-mini-player.mini-tv.pip-size-s { height: 145px !important; } #player-overlay.is-mini-player.mini-tv.pip-size-l { height: 270px !important; } } /* Sichtbarer Fokus-Ring, sobald die Desktop-PiP per TAB Tastatur-Fokus hat (Cross-Plattform-Pflicht: TV hat bereits .mini-focus, hier das Desktop- Äquivalent für Tastatur-/D-Pad-Alias-Steuerung). */ #pd-video-stage.pd-pip-float.pip-kbd-focused { box-shadow: 0 14px 50px rgba(0,0,0,.6), 0 0 0 3px var(--sys-focus, #faff00); } /* BUG-9: Dynamische Bottom-Bar — Tasten-Hinweise, sobald eine PiP (TV-Mini ODER Desktop-Float) Tastatur-/Fernbedienungs-Fokus hat. Bleibt bewusst dunkel in BEIDEN Themes (identisch zu #player-controls-bar oben) — Video-Overlay- Chrome folgt hier nicht dem Seiten-Theme, sondern braucht durchgehend Kontrast gegen bewegtes Videobild. */ #pip-hint-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(12px); display: none; align-items: center; gap: 10px; background: rgba(2,6,23,0.92); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 10px 18px; z-index: 2147483000; box-shadow: 0 12px 36px rgba(0,0,0,0.5); opacity: 0; transition: opacity .15s ease, transform .15s ease; pointer-events: none; } #pip-hint-bar.pip-hint-bar-visible { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); } .pip-hint-chip { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .pip-hint-glyph { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; background: rgba(255,255,255,0.14); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .3px; } .pip-hint-label { font-size: 13px; font-weight: 600; color: #fff; } /* TV: größer/kontrastreicher für 3-Meter-Lesbarkeit (Cross-Plattform-Pflicht). */ body.app-tv #pip-hint-bar { padding: 14px 26px; gap: 16px; bottom: 36px; } body.app-tv .pip-hint-glyph { min-width: 34px; height: 30px; font-size: 16px; } body.app-tv .pip-hint-label { font-size: 16px; } @media (max-width: 640px) { #pip-hint-bar .pip-hint-label { display: none; } } /* Handy: nur Glyphen, Platz sparen */ /* V1.5-TV-COLOR-NAV: OSD-Farbleiste — fixierte, kontextsensitive Menüleiste am unteren Bildschirmrand (TV-only, s. App.OsdColorBar.mount(), core.js). Bleibt bewusst dunkel in ALLEN Themes (identisch zu #pip-hint-bar oben) — dasselbe "Video-Overlay-Chrome folgt nicht dem Seiten-Theme"-Prinzip. Eine EINZIGE, theme-neutrale Ausprägung, weil das Ticket explizit EIN Design vorgibt ("Dark-Cyber-Look") statt eines pro Theme variierenden Looks. OLED-Einbrenn-Schutz: NUR kleine Punkte (10–12px) statt großer Farbflächen, dezenter Puls (Helligkeits-Oszillation) statt Dauerhelligkeit. */ #osd-color-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: none; align-items: center; gap: 22px; background: rgba(2,6,23,0.88); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 10px 22px; z-index: 2147483000; box-shadow: 0 10px 30px rgba(0,0,0,0.45); } body.app-tv #osd-color-bar { display: flex; padding: 12px 28px; gap: 26px; bottom: 30px; } .osd-color-chip { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .osd-color-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 4px currentColor; animation: osd-color-pulse 2.6s ease-in-out infinite; } body.app-tv .osd-color-dot { width: 12px; height: 12px; } .osd-color-dot-red { background: #ff4d4f; color: #ff4d4f; } .osd-color-dot-green { background: #22c55e; color: #22c55e; } .osd-color-dot-yellow { background: #facc15; color: #facc15; } .osd-color-dot-blue { background: #3b82f6; color: #3b82f6; } @keyframes osd-color-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } } .osd-color-label { font-size: 13px; font-weight: 600; color: #fff; } body.app-tv .osd-color-label { font-size: 16px; } /* PiP-Zustand: leicht abweichender Randton zur visuellen Unterscheidung vom globalen Zustand — bleibt dieselbe kompakte Punkt-Form (kein Redesign). */ #osd-color-bar.osd-color-bar-pip { border-color: rgba(88,166,255,0.4); } /* V1.5-TV-COLOR-NAV: D-Pad-PiP-Fokus-Trap-Overlay — Fallback-Sichtbarkeit für Fernbedienungen ohne Farbtasten. Zeigt die zwei bereits zertifizierten PiP-Aktionen (App.Player.restoreMini/close, s. BUG-PIP-KINO-REGRESSIONS) als sichtbare Buttons, sobald st.area==='miniplayer' den D-Pad-Fokus trägt (identische Bedingung wie .mini-focus, core.js App.updateNavFocus()). */ #pip-focus-overlay { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 14px; padding-bottom: 10px; pointer-events: none; z-index: 5; background: linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%); } #pip-focus-overlay.pip-focus-overlay-visible { display: flex; } .pip-focus-btn { pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; background: rgba(2,6,23,0.85); border: 1px solid rgba(255,255,255,0.25); border-radius: 10px; padding: 6px 12px; color: #fff; font-size: 12px; font-weight: 700; } .pip-focus-btn.pip-focus-btn-primary { border-color: var(--sys-focus, #faff00); box-shadow: 0 0 0 2px rgba(250,255,0,0.25); } /* BUG-9: Experimentell-Warnmodal (Soft-Gate) — spiegelt #premium-modal 1:1. */ #pip-experimental-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); } #pip-experimental-modal.hidden { display: none; } #pip-experimental-modal-box { width: 380px; max-width: 88vw; background: var(--card-2, #16161f); border: 1px solid var(--card-border, rgba(255, 255, 255, 0.12)); border-radius: 16px; padding: 28px 24px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } #pip-experimental-modal-icon { font-size: 38px; margin-bottom: 8px; } #pip-experimental-modal-box h2 { font-size: 19px; margin: 0 0 10px; color: var(--text, #fff); } #pip-experimental-modal-body { font-size: 14px; color: var(--sys-idle, #9aa0aa); line-height: 1.5; margin: 0 0 20px; } #pip-experimental-modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* PiP browse-while-watching: collapse overlay backdrop; feed stays interactive underneath. */ /* BUG-PIP-OVERLAY-ZINDEX-REGRESSION: Hier stand bis 2026-07-15 zusätzlich ein `z-index: 2147483000 !important` mit der Begründung, es hebe #player-overlay über Seiten-Overlays (.pc-fade-gate, z-index:9999) und repariere damit die PiP-Buttons. Beides war FALSCH und die Regel ist ersatzlos entfernt: 1) WIRKUNGSLOS nach außen: #player-overlay haengt in #content > #app, und #app hat `position:relative; z-index:0` (s. #app-Regel am Dateianfang) — also einen eigenen Stacking-Kontext. #player-overlay kann daher NIE einen hoeheren Rang erreichen als #app selbst, egal wie gross sein z-index ist. Gegen die body-Ebene (.pc-fade-gate) war die Regel strukturell chancenlos. Der urspruengliche .pc-fade-gate-Treffer war ausserdem gar kein Bug, sondern korrektes Modal-Verhalten: ein FSK18-Gate SOLL den PiP blockieren. 2) SCHAEDLICH nach innen: #content erzeugt KEINEN Stacking-Kontext, also konkurriert #player-overlay direkt mit den anderen #app-Kindern. Mit z:100 lagen #notif-panel (1500), #theme-popup (1100), #sidebar-scrim (290), #connect-success (240), #pairing-overlay/#mobile-overlay/#ad-qr-overlay (200) korrekt ueber dem schwebenden PiP — mit 2147483000 verdeckte der PiP sie alle. Live reproduziert: PiP in einer oberen Ecke fing die Klicks auf das geoeffnete Notification-Panel ab (Hit-Test traf #dm-player). Isolierte Gegenprobe, 4x alternierend: z:2147483000 → Panel unerreichbar, z:100 → Panel erreichbar. Die ECHTEN Ursachen von BUG-DESKTOP-PIP-CONTROLS-OFFPAGE lagen alle INNERHALB der Stage und sind dort gefixt: .player-volume-hud/#playlist-toast fingen Klicks ab, und #pd-pip lag mit z-index:5 unter den Stage-Overlays (jetzt 10, s. Regel `#pd-video-stage.pd-pip-float > #pd-pip` weiter unten). */ body.pd-pip-browsing #player-overlay, #player-overlay.pd-pip-browsing { background: none !important; pointer-events: none !important; overflow: visible !important; padding: 0 !important; } body.pd-pip-browsing #player-desktop, #player-overlay.pd-pip-browsing #player-desktop { background: none !important; pointer-events: none !important; max-width: none !important; margin: 0 !important; } body.pd-pip-browsing #pd-side, body.pd-pip-browsing #pd-topbar, body.pd-pip-browsing #pd-title, body.pd-pip-browsing #pd-creator-row, body.pd-pip-browsing #pd-pictobar, body.pd-pip-browsing #pd-secondary, body.pd-pip-browsing #pd-meta, body.pd-pip-browsing #pd-comments, body.pd-pip-browsing #pd-description, body.pd-pip-browsing #pd-hoster-matrix, body.pd-pip-browsing #pd-sub-metrics, body.pd-pip-browsing #pd-sub-metrics-inline, /* BUG-PIP-KINO-REGRESSIONS (Bug 3): #pd-chapters (FEAT-9, nur für den verifizierten Besitzer-Creator sichtbar)/#pd-premium-optin fehlten hier — bei aktiver PiP-Browsing-Navigation (z. B. Wechsel zur Shorts-Seite) blieb ein sichtbares Panel im nun unclipped, position:fixed/inset:0 #player-overlay (siehe Basisregel oben, z-index:100) an seiner normalen Dokumentfluss-Position hängen und legte sich quer über die darunterliegende Seite — genau der gemeldete "Kapitel-Panel an falscher Position"-Bug. */ body.pd-pip-browsing #pd-chapters, body.pd-pip-browsing #pd-premium-optin, /* Claudit-Audit (BUG-PIP-KINO-REGRESSIONS): Cloders Bug-3-Fix deckte nur #pd-* Panels ab. #follow-modal/#sub-choice-overlay/#playlist-picker-overlay sind ebenfalls direkte Kinder von #player-overlay, werden per JS unabhängig vom PiP-Zustand geöffnet (.hidden-Klasse entfernt) und NICHT von der #player-desktop-Ausblendung erfasst (eigene Geschwister-Elemente, kein #pd-*-Präfix) — bleiben bei offenem Zustand + PiP-Browsing-Navigation als vollflächiger, abgedunkelter position:absolute;inset:0-Layer sichtbar über der Zielseite (App.switchNav() schließt sie nirgends). Live reproduziert: getComputedStyle zeigte display:flex trotz aktivem pd-pip-browsing. */ body.pd-pip-browsing #follow-modal, body.pd-pip-browsing #sub-choice-overlay, body.pd-pip-browsing #playlist-picker-overlay, #player-overlay.pd-pip-browsing #pd-side, #player-overlay.pd-pip-browsing #pd-topbar, #player-overlay.pd-pip-browsing #pd-title, #player-overlay.pd-pip-browsing #pd-creator-row, #player-overlay.pd-pip-browsing #pd-pictobar, #player-overlay.pd-pip-browsing #pd-secondary, #player-overlay.pd-pip-browsing #pd-meta, #player-overlay.pd-pip-browsing #pd-comments, #player-overlay.pd-pip-browsing #pd-description, #player-overlay.pd-pip-browsing #pd-hoster-matrix, #player-overlay.pd-pip-browsing #pd-sub-metrics, #player-overlay.pd-pip-browsing #pd-sub-metrics-inline, #player-overlay.pd-pip-browsing #pd-chapters, #player-overlay.pd-pip-browsing #pd-premium-optin, #player-overlay.pd-pip-browsing #follow-modal, #player-overlay.pd-pip-browsing #sub-choice-overlay, #player-overlay.pd-pip-browsing #playlist-picker-overlay { display: none !important; } body.pd-pip-browsing #pd-video-stage.pd-pip-float, #player-overlay.pd-pip-browsing #pd-video-stage.pd-pip-float { pointer-events: auto !important; z-index: 2147483000 !important; } body.pd-pip-browsing #pd-video-stage.pd-pip-float *, #player-overlay.pd-pip-browsing #pd-video-stage.pd-pip-float * { pointer-events: auto !important; } /* Claudit-Fund (BUG-DESKTOP-PIP-CONTROLS-OFFPAGE): der Wildcard oben macht ALLE Nachfahren der floatenden Stage klickbar, inkl. .player-volume-hud — ein unsichtbarer (opacity:0), 356x224px großer, position:absolute Lautstärke- Indikator (z-index:8, s. player.css), der in seiner normalen Baseline pointer-events:none hat, damit er (sichtbar oder nicht) nie Klicks abfängt. Der Wildcard mit !important überstimmt diese Baseline während PiP-Browsing, und weil der Indikator (z-index:8) über #pd-pip (z-index:5) liegt und die Maximieren-/Schließen-Buttons flächenmäßig überdeckt, fing er live re- produzierbar deren Klicks ab (elementFromPoint traf .player-volume-hud-label statt .pd-pip-restore) — GENAU im PiP-Browsing-Zustand, um den es in diesem Ticket geht. Fix: gezielte Rücknahme mit höherer Spezifität. */ body.pd-pip-browsing #pd-video-stage.pd-pip-float .player-volume-hud, #player-overlay.pd-pip-browsing #pd-video-stage.pd-pip-float .player-volume-hud, body.pd-pip-browsing #pd-video-stage.pd-pip-float .player-volume-hud *, #player-overlay.pd-pip-browsing #pd-video-stage.pd-pip-float .player-volume-hud * { pointer-events: none !important; } /* Claufix-Fund (BUG-DESKTOP-PIP-CONTROLS-OFFPAGE): Claudits Rücknahme oben deckt NUR .player-volume-hud ab — #playlist-toast ist ein zweiter, BAUGLEICHER Fall: position:absolute, z-index:9, pointer-events:none OHNE !important (player.css), also vom Wildcard ebenso auf auto gezwungen. Er wird beim ersten „Zur Playlist hinzugefügt" erzeugt (playlist.js showToast → host.appendChild) und NIE wieder entfernt — nur die .show-Klasse togglet, das Element bleibt mit opacity:0 für den Rest der Sitzung in der Bühne. Die Regel oben „#pd-video-stage.pd-pip-float > *:not(#pd-pip) { width/height:100% }" streckt ihn dabei auf die GESAMTE schwebende Box. Live reproduziert: nach einem einzigen Playlist-Toast fing #playlist-toast 64/64 Rasterpunkte BEIDER Buttons ab, ein echter hit-getesteter Klick auf .pd-pip-restore blieb wirkungslos — der Ticket- Bug war vollständig zurück, nur über ein anderes Element. Zweiteiliger Fix statt Whack-a-Mole: 1) URSACHE: #pd-pip lag mit z-index:5 UNTER jeder Overlay-Schicht der Bühne (.player-volume-hud/.audio-unmute-overlay z:8, .player-advance-toast/ .playlist-toast z:9) — jeder künftige Stage-Nachfahre mit z-index>5 bricht die PiP-Buttons erneut. Die Chrome-Leiste wird daher über alle diese Schichten gehoben. Das repariert zugleich die Layer, die legitim pointer-events:auto brauchen und vom Wildcard NICHT verursacht werden (.player-advance-toast.show mit eigenen Skip/Abbrechen-Buttons, inset:0 + 100%-Streckung; .audio-unmute-overlay mit inset:0): die bleiben klickbar, überdecken die PiP-Buttons aber nicht mehr. Gefahrlos, weil #pd-pip AUSSCHLIESSLICH im Float-Zustand existiert (player-desktop.js erzeugt es in _doTogglePipOpen, closePip entfernt es wieder) — der Vollbild-Player hat das Element gar nicht, das Stacking dort bleibt unberührt. 2) BASELINE: die deklarierte pointer-events:none-Absicht von .playlist-toast im PiP-Browsing wiederherstellen, analog zu Claudits .player-volume-hud-Regel (Spezifität (1,3,1)/(2,3,0) schlägt den Wildcard (1,2,1)/(2,2,0)). */ #pd-video-stage.pd-pip-float > #pd-pip { z-index: 10; } body.pd-pip-browsing #pd-video-stage.pd-pip-float .playlist-toast, #player-overlay.pd-pip-browsing #pd-video-stage.pd-pip-float .playlist-toast, body.pd-pip-browsing #pd-video-stage.pd-pip-float .playlist-toast *, #player-overlay.pd-pip-browsing #pd-video-stage.pd-pip-float .playlist-toast * { pointer-events: none !important; } /* §6.2 Beta-Premium-Simulator (An/Aus-Schalter unter dem Premium-Block). */ .pcprem-card { flex-wrap: wrap; } .pcprem-beta-sim { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft, rgba(255,255,255,0.12)); } .pcprem-beta-sim-label { font-size: 13px; font-weight: 700; color: var(--text-dim, #b7bcc8); line-height: 1.35; } .pcprem-beta-switch { position: relative; width: 48px; height: 27px; border-radius: 999px; border: none; cursor: pointer; background: var(--card-2, rgba(255,255,255,0.18)); transition: background .18s ease; flex: 0 0 auto; } .pcprem-beta-switch.on { background: var(--sys-focus, #faff00); } .pcprem-beta-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } .pcprem-beta-switch.on .pcprem-beta-knob { transform: translateX(21px); } /* §AP10 T1.2 HARD-ROOT: Twitch IMMER Signatur-Lila (#9146ff) — schlägt JEDEN inline/ dynamischen Style. !important auf Custom-Properties gewinnt gegen ein inline style="--brand:…" (nicht-important), egal ob Settings-Zeile oder Content-Kachel. Damit kann KEIN versehentliches Blau (#29b6ff o.ä.) mehr an Twitch hängen. */ [data-platform="twitch"] { --brand: #9146ff !important; --platform-brand-color: #9146ff !important; --card-glow: #9146ff !important; --pd-glow: #9146ff !important; } /* §1/§4 Clean: KEINE Ringe/Kreise mehr um Hoster-Logos in Karten + Reco-Listen. Der Marken-Logo-Glow bleibt NUR an den Settings-Verknüpfungs-Kacheln. */ .platform-row[data-platform] .platform-logo-slot { box-shadow: 0 0 0 1px var(--platform-brand-color, var(--card-glow, var(--brand))), 0 0 8px -2px var(--platform-brand-color, var(--card-glow, var(--brand))); border-radius: 6px; transition: box-shadow 0.15s; } .video-card[data-platform] .card-creator .logo-slot, .pd-reco .logo-slot, .pd-reco-item .logo-slot { box-shadow: none !important; border-radius: 4px; } /* §2: Account-Verknüpfungs-Kacheln PERFEKT QUADRATISCH (1:1, 60×60) mit dauerhaftem dezenten Marken-Rahmen; bei Fokus/Hover glüht der RAHMEN (border) selbst in der dynamischen --platform-brand-color (Frame-Identität). */ .platform-logo-slot { width: 60px; height: 60px; border-radius: 10px; box-sizing: border-box; border: 2px solid transparent; background: var(--card-2, rgba(30, 34, 44,0.6)); transition: border-color 0.15s, box-shadow 0.15s; } body:not(.kbd-active) .platform-row[data-platform]:hover .platform-logo-slot, .platform-row[data-platform].focused .platform-logo-slot, .platform-row[data-platform]:focus .platform-logo-slot { border-color: var(--platform-brand-color, var(--brand)); box-shadow: 0 0 0 1.5px var(--platform-brand-color, var(--brand)), 0 0 14px -2px var(--platform-brand-color, var(--brand)); } /* ════════════════════════════════════════════════════════════════════════════ UI-66 — TV profile account cards: interactive brand aura on Link button ONLY. Decouples focus/glow from row body + logo slot; paid dot-matrix wraps the button. ════════════════════════════════════════════════════════════════════════════ */ body.app-tv .platform-row .platform-logo-slot { border-color: rgba(255, 255, 255, 0.14) !important; box-shadow: none !important; filter: none !important; } body.app-tv .platform-row[data-platform]:hover .platform-logo-slot, body.app-tv .platform-row[data-platform].focused .platform-logo-slot, body.app-tv .platform-row[data-platform]:focus .platform-logo-slot, body.app-tv .platform-row.pc-card-social[data-platform]:hover .platform-logo-slot, body.app-tv .platform-row.pc-card-social[data-platform].focused .platform-logo-slot, body.app-tv .platform-row.pc-card-paid[data-platform]:hover .platform-logo-slot, body.app-tv .platform-row.pc-card-paid[data-platform].focused .platform-logo-slot { border-color: rgba(255, 255, 255, 0.14) !important; box-shadow: none !important; filter: none !important; } body.app-tv .platform-row.pc-card-paid::after { display: none !important; } body.app-tv .platform-row.pc-card-paid, body.app-tv .platform-row.pc-card-social { border-left-color: rgba(255, 255, 255, 0.12) !important; box-shadow: none !important; } body.app-tv .platform-row .platform-btn.link, body.app-tv .platform-row .platform-btn.unlink { position: relative; isolation: isolate; overflow: visible; border-width: 2px; transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } /* Default TV button focus — overridden per-platform below for hosters. */ body.app-tv .platform-row .platform-btn.link.focused, body.app-tv .platform-row .platform-btn.unlink.focused { color: #ffffff !important; transform: scale(1.04); } /* Standard hoster Link buttons — platform brand ring on D-Pad focus. */ body.app-tv .platform-row[data-platform="twitch"] .platform-btn.focused { border-color: #9146ff !important; box-shadow: 0 0 0 2px #9146ff, 0 0 22px -3px rgba(145, 70, 255, 0.95) !important; } body.app-tv .platform-row[data-platform="youtube"] .platform-btn.focused { border-color: #ff0000 !important; box-shadow: 0 0 0 2px #ff0000, 0 0 22px -3px rgba(255, 0, 0, 0.9) !important; } body.app-tv .platform-row[data-platform="kick"] .platform-btn.focused { border-color: #00E640 !important; box-shadow: 0 0 0 2px #00E640, 0 0 22px -3px rgba(0, 230, 64, 0.95) !important; } body.app-tv .platform-row[data-platform="dailymotion"] .platform-btn.focused { border-color: #0066dc !important; box-shadow: 0 0 0 2px #0066dc, 0 0 22px -3px rgba(0, 102, 220, 0.95) !important; } /* Social cards — crisp native-color border on the Link button when focused. */ body.app-tv .platform-row.pc-card-social .platform-btn.focused { border-color: var(--platform-brand-color, var(--sys-focus)) !important; box-shadow: 0 0 0 2.5px var(--platform-brand-color, var(--sys-focus)), 0 0 20px -4px var(--platform-brand-color, var(--sys-focus)) !important; } /* Paid cards — dot-matrix halo strictly around the Link button, tile stays neutral. */ body.app-tv .platform-row.pc-card-paid .platform-btn.focused::before { content: ""; position: absolute; inset: -12px; z-index: -1; pointer-events: none; border-radius: 16px; background-image: radial-gradient(circle, var(--platform-brand-color, #ff424d) 15%, transparent 17%); background-size: 5px 5px; background-position: center; -webkit-mask: radial-gradient(ellipse 88% 72% at 50% 50%, #000 42%, rgba(0,0,0,0.4) 70%, transparent 100%); mask: radial-gradient(ellipse 88% 72% at 50% 50%, #000 42%, rgba(0,0,0,0.4) 70%, transparent 100%); opacity: 0.85; } body.app-tv .platform-row.pc-card-paid .platform-btn.focused { border-color: var(--platform-brand-color, #ff424d) !important; box-shadow: 0 0 0 2px var(--platform-brand-color, #ff424d), 0 0 16px -4px var(--platform-brand-color, #ff424d) !important; } /* §2 Hard-Lockout: gesperrte Eingaben/Buttons + Warnhinweis. */ .profile-name-input:disabled, #ct-name:disabled, .platform-btn:disabled, .pcprem-buy:disabled, button:disabled.platform-btn { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); } /* §1: EINHEITLICHE Akzent-Warnfarbe für BEIDE Lockout-Hinweise (Username + Design). */ .ct-link-warn { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; } .ct-link-warn, .profile-name-status.pc-link-warn { color: var(--brand, var(--accent, var(--neon-pink, #ff5c8a))); } /* §3 Slim-Header: in den Seiteninhalt verschobene Filter-Pillen. */ .filter-tabs-relocated { margin: 0 0 18px; padding: 0; } body.app-desktop .header-row-bottom:empty { min-height: 0; padding: 0; margin: 0; } /* ── §1 (Sprint): VERSCHLANKTE SUCHLEISTE ────────────────────────────────────── Untere Header-Zeile (ohne Pills) auf 0 kollabieren; Suchleiste auf exakt die Logo-Höhe (46px) schrumpfen und bündig in einer engen horizontalen Linie mit dem Sidebar-Logo (gleicher 16px-Top-Offset) ausrichten. */ body.app-desktop #header.header-two-row { padding-top: 16px; padding-bottom: 10px; gap: 0; } body.app-desktop .header-row-top { display: flex; align-items: center; min-height: 46px; } body.app-desktop #header.header-two-row #search-bar { height: 46px; padding: 0 20px; margin: 0 auto 0 0; line-height: 1; /* UI-SEARCHBAR-VIDEO-WIDTH: margin-right:auto haelt die Glocke rechts, wenn die Suchleiste gedeckelt ist (diese Regel hat hoehere Spezifitaet als die Basisregel) */ display: flex; align-items: center; box-sizing: border-box; font-size: 15px; } body.app-desktop .header-row-bottom { min-height: 0; padding: 0; margin: 0; gap: 0; } /* §1: Logo füllt die Top-Bar-Bandhöhe + vertikal mittig auf der Suchleisten-Achse. */ body.app-desktop #sidebar-logo { height: 62px; padding-top: 16px; padding-bottom: 0; display: flex; align-items: center; } body.app-desktop #pc-logo-mark { height: 38px; width: auto; max-height: 100%; } /* ── §3 (Sprint): Player-View-Overhaul ───────────────────────────────────────── */ :is(body.app-desktop, body.app-phone.pd-mobile-active) .pd-avatar { width: 64px; height: 64px; font-size: 24px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-actions .pd-react { gap: 6px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-actions .pd-react-btn { height: 38px; min-width: 46px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 16px; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #player-desktop { align-items: stretch; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-side { align-self: stretch; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-chat { display: flex; flex-direction: column; } /* UI-LIVE-CHAT-HEIGHT: die alte fixe calc(100vh - 210px)-Formel hing rein am Viewport und stimmte nur zufällig bei einer Fenstergröße mit der (von der Grid-Breite/aspect-ratio abhängigen) Video-Höhe überein. Die Höhe wird jetzt per JS (App.PlayerDesktop.syncChatHeight(), player-desktop.js) exakt auf #pd-video-stage.getBoundingClientRect().height gesetzt — height:100% lässt diesen Inline-Wert wirken, statt ihn zu überschreiben. min-height bleibt als bewusster Fallback, damit der Chat bei sehr niedrigen Video-Höhen nicht unbrauchbar klein wird. BUG-CHAT-INPUT-BOTTOM-ALIGN: der Inline-Höhen-/flex:0 0 auto-Override sitzt NICHT mehr auf #pd-chat, sondern auf #pd-chat-body (#pd-chat-frame profitiert über dieses height:100% weiterhin unverändert davon) — #pd-chat selbst bekommt nur noch marginTop + ein neutralisierendes flex:0 0 auto, keine feste Höhe mehr, damit #stream-chat-ad-placement als zusätzlicher Block darunter Platz hat, ohne das Höhenbudget des Chat-Bodys zu verkleinern. Details: player-desktop.js syncChatHeight(). */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-chat-frame { height: 100%; min-height: 520px; } #follow-modal-close, #sub-choice-close, #guest-follow-close, #follow-modal .player-ctl, #sub-choice-box button, #follow-modal svg, #sub-choice-overlay svg { color: var(--text, #fff) !important; stroke: currentColor; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-topbar #pd-search-jump { flex: 1 1 auto; margin-left: 0; justify-content: flex-start; } /* ── §6 (Sprint): Shorts-Einzel-Viewer (1 aktiver Short, 9:16, KEIN Breakout) ── */ #grid-shorts { display: block; } .shorts-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 6px 0 18px; } .shorts-frame-wrap { position: relative; width: 420px; max-width: 92vw; aspect-ratio: 9 / 16; background: #000; border-radius: 16px; overflow: hidden; flex: 0 0 auto; } @supports not (aspect-ratio: 1) { .shorts-frame-wrap { height: min(75vh, 720px); } } .shorts-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* §AP9 T3.1: dynamischer Hoster-Rahmen um den Clips-/Shorts-Player (Marken-Farbe der aktiven Quelle via inline --hoster-frame). box-sizing:border-box hält ihn in Maß. */ .shorts-frame-wrap.sc-hoster-frame { box-sizing: border-box; border: 3px solid var(--hoster-frame, var(--sys-focus)); box-shadow: 0 0 22px -4px var(--hoster-frame, var(--sys-focus)); } .shorts-meta { width: 420px; max-width: 92vw; text-align: left; } .shorts-title { font-weight: 700; font-size: 15px; color: var(--text, #fff); line-height: 1.3; } .shorts-creator { font-size: 13px; color: var(--text-dim, #9aa0aa); margin-top: 2px; } .shorts-nav { display: flex; align-items: center; gap: 16px; } .shorts-nav button { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 15px; background: var(--card-2, rgba(30, 34, 44,0.6)); color: var(--text, #fff); border: 1px solid var(--card-border, rgba(255,255,255,0.15)); } .shorts-nav button:hover { border-color: var(--sys-focus); } .shorts-count { font-size: 13px; color: var(--text-dim, #9aa0aa); min-width: 60px; text-align: center; } body.app-phone .shorts-frame-wrap, body.app-phone .shorts-meta { width: min(100%, 56vh); } /* ── Short-Form Engagement Shield: Upvote/Downvote + Kommentar-Modul unter dem Shorts-/Clips-Einzel-Viewer (Smartphone/Tablet/Mobile-Web/Desktop-Web). ────── */ .shorts-engage-wrap { width: 420px; max-width: 92vw; text-align: left; } .shorts-stage-clip .shorts-engage-wrap { width: 900px; max-width: 92vw; } body.app-phone .shorts-engage-wrap { width: min(100%, 56vh); } .shorts-engage { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .shorts-vote, .shorts-comments-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: var(--card-2, rgba(255,255,255,0.06)); color: var(--text, #fff); border: 1px solid var(--card-border, rgba(255,255,255,0.14)); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; transition: all .15s ease; } .shorts-vote:hover, .shorts-comments-toggle:hover { border-color: var(--sys-focus); } .shorts-vote-ic { font-size: 14px; line-height: 1; } .shorts-vote-up.active { color: #2ec27e; border-color: #2ec27e; } .shorts-vote-down.active { color: var(--live, #ff3b5c); border-color: var(--live, #ff3b5c); } .shorts-comments-toggle svg { flex-shrink: 0; } .shorts-comments-toggle.open { border-color: var(--sys-focus); color: var(--sys-focus); } .shorts-comments-n { min-width: 10px; } .shorts-comments-panel { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--card-2, rgba(255,255,255,0.05)); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); max-height: 46vh; overflow-y: auto; } .shorts-comments-panel.hidden { display: none; } .shorts-comment-composer { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; } .shorts-comment-input { flex: 1 1 auto; min-width: 0; resize: vertical; background: var(--card-2, #16161f); color: var(--text); border: 1.5px solid var(--card-border, rgba(255,255,255,0.18)); border-radius: 10px; padding: 8px 11px; font-size: 13.5px; font-family: inherit; line-height: 1.4; } .shorts-comment-input:focus { outline: none; border-color: var(--sys-focus); } .shorts-comment-post { flex: 0 0 auto; background: var(--neon-pink, #4a5468); color: #fff; border: none; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; } .shorts-comment-post:hover { opacity: 0.9; } .shorts-comments-empty { padding: 10px 2px; color: var(--sys-idle, #9aa0aa); font-size: 13px; } .shorts-comment { padding: 8px 0; border-bottom: 1px solid var(--card-border, rgba(255,255,255,0.08)); } .shorts-comment:last-child { border-bottom: none; } .shorts-comment-author { display: block; font-weight: 700; font-size: 12.5px; color: var(--text, #fff); } .shorts-comment-text { display: block; font-size: 13.5px; line-height: 1.4; margin-top: 2px; color: var(--text, #fff); } /* ── §3 (Sprint): Topbar-Symmetrie · Logo-Step · Glocke ─────────────────────── */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-topbar { align-items: center; } :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-topbar .pd-back, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-topbar #pd-search-jump { height: 42px; box-sizing: border-box; margin: 0; padding: 0 18px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 14px; } body.app-desktop #sidebar-logo { margin: 0; } body.app-desktop #sidebar-logo::after { display: none !important; } /* UI-38: Bell height + icon size for desktop — position is flex (not absolute). */ body.app-desktop #header-actions { height: 46px; display: flex; align-items: center; } body.app-desktop .header-icon-btn { display: inline-flex; align-items: center; justify-content: center; } body.app-desktop .header-icon-btn svg { width: 29px; height: 29px; } /* ── §4 (Sprint): Clips-Einzel-Viewer (16:9) + Shorts-Pill-Kontrast ─────────── */ #grid-clips { display: block; } .shorts-stage-clip .shorts-frame-wrap { width: 900px; max-width: 92vw; aspect-ratio: 16 / 9; } @supports not (aspect-ratio: 1) { .shorts-stage-clip .shorts-frame-wrap { height: min(52vw, 506px); } } .shorts-stage-clip .shorts-meta { width: 900px; max-width: 92vw; } /* #3b: Die Clips-Werbe-Kachel MUSS dieselbe 16:9-Box (900px) wie der Clip-Frame haben. Die Basis-.shorts-ad-card ist 9:16-Portrait (420px, ~746px hoch) — im Clip-Stage würde das die Stage höher machen und die top:50%-zentrierten Pfeile nach oben rücken. Damit sind Werbe- und Content-Pfeile exakt gleich hoch. (Mirror der theme-classic UI-20-Regel.) */ .shorts-stage-clip .shorts-ad-card { width: 900px; max-width: 92vw; aspect-ratio: 16 / 9; height: auto; margin-bottom: 0; } @supports not (aspect-ratio: 1) { .shorts-stage-clip .shorts-ad-card { height: min(52vw, 506px); } } /* §AP4: Desktop-Navigationspfeile für Shorts/Clips (Prev/Next). NUR im PC-Browser (body.app-desktop) sichtbar; Handy swipet, TV nutzt die Fernbedienung. Absolut in der position:relative .shorts-stage verankert, vertikal zentriert, links/rechts neben dem Frame (Short 420 / Clip 900). Klick-Delegation via shorts-prev/shorts-next in core.js. */ .sc-arrow { display: none; } body.app-desktop .sc-arrow { position: absolute; transform: translateY(-50%); z-index: 6; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; cursor: pointer; border-radius: 50%; color: var(--text, #f2f4f8); background: var(--card-2, rgba(20, 8, 40, 0.72)); border: 1px solid var(--card-border, var(--sys-focus, #4a5468)); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease; } /* UI-68: Pfeile am Medien-Viewport zentrieren (nicht an Stage inkl. Meta/Toggle). */ body.app-desktop .shorts-stage .sc-arrow { top: calc(36px + 34vh); } body.app-desktop .shorts-stage-clip .sc-arrow { top: calc(36px + min(26vw, 450px) * 9 / 16); } body.app-desktop .sc-arrow:hover { background: var(--sys-focus, #4a5468); color: #0a0410; border-color: var(--sys-focus, #4a5468); transform: translateY(-50%) scale(1.08); } body.app-desktop .sc-arrow:active { transform: translateY(-50%) scale(0.96); } body.app-desktop .sc-arrow svg { width: 26px; height: 26px; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } body.app-desktop .sc-arrow-prev { left: max(12px, calc(50% - 210px - 64px)); } body.app-desktop .sc-arrow-next { right: max(12px, calc(50% - 210px - 64px)); } body.app-desktop .shorts-stage-clip .sc-arrow-prev { left: max(12px, calc(50% - 450px - 64px)); } body.app-desktop .shorts-stage-clip .sc-arrow-next { right: max(12px, calc(50% - 450px - 64px)); } /* §AP10 T2.2: Desktop-Navigationspfeile auf Mobil-/Touch-Viewports KOMPLETT entfernen — auch wenn das Gerät fälschlich als app-desktop erkannt wurde (Root-Cause des Clutters in 37822.png). Mobile navigiert rein per Touch-Swipe/Scroll. */ @media (max-width: 820px), (pointer: coarse) { .sc-arrow, body.app-desktop .sc-arrow { display: none !important; } } /* §4b: aktive Pille lesbar (Cyberpunk-Basis --sys-focus = Neon-Gelb → dunkler Text). */ .sc-bubble.active { color: #10131a; } /* ════════════════════════════════════════════════════════════════════════════ §3 (SYSTEM-SANITIZATION): DETERMINISTISCHE TOPBAR-/LOGO-ACHSE — ENDGÜLTIG. ──────────────────────────────────────────────────────────────────────────── Root-Cause der 7 Fehlversuche: #sidebar-logo (FESTE Höhe + border-bottom) und der content-getriebene .header-two-row (height:auto) hatten UNTERSCHIEDLICHE Gesamthöhen → die beiden Trenn-Linien (Logo-Unterkante vs. Header-Unterkante) lagen auf verschiedenen Y-Achsen = sichtbare „Treppe", in der leeren Settings- Spalte am deutlichsten. Fix: beide Container auf EINE explizite Höhe (72px) zwingen, identisches box-sizing + border-bottom → eine durchgehende Linie, in JEDER View (inkl. Settings) deckungsgleich, kein content-getriebenes Stepping. */ body.app-desktop #header.header-two-row { height: 72px; box-sizing: border-box; position: relative; padding-top: 16px; padding-bottom: 10px; } body.app-desktop #sidebar-logo { height: 72px; box-sizing: border-box; padding-top: 16px; padding-bottom: 0; margin: 0; /* §AP8 T1: Logo-Box-Unterkante entfernt (Baukasten-Optik). Die Navbar↔Main-Linie lebt allein im #header (border-bottom) und endet sauber an der Sidebar-Kante. */ display: flex; align-items: center; } /* §AP8 T1: Logo dynamisch — Icon füllt die Logo-Box-Höhe sauber aus (skaliert mit dem Container statt fixer Pixel), Wortmarke skaliert mit. Nur Desktop (TV/Handy behalten ihre kompakten Festmaße). */ body.app-desktop #sidebar-logo .pc-brand-icon { height: 64px; max-height: 64px; width: 82px; } body.app-desktop:not(.sidebar-collapsed) #sidebar-logo .pc-brand-word { font-size: clamp(26px, 2.7vh, 36px); flex: 1 1 auto; } /* Settings-View erbt EXAKT die Standard-Header-Specs (kein „tieferer" Wrapper). */ body.app-desktop.nav-settings #header.header-two-row { height: 72px; padding-top: 16px; padding-bottom: 10px; } /* Glocke absolut auf der 46px-Suchleisten-Achse andocken (top:16px), rechtsbündig zur Section-Kante (32px) → keine asymmetrischen Padding-Offsets, +20 % Größe. */ /* §1.1 Glocke EXAKT mittig in der bereits reservierten 72px-Zone (header-row-top padding-right:72px) zentrieren — statt bündig an die Kante geklebt (right:32px). */ body.app-desktop #header-actions { position: absolute; top: 16px; right: 0; width: 72px; height: 46px; margin: 0; display: flex; align-items: center; justify-content: center; } body.app-desktop .header-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; } body.app-desktop .header-icon-btn svg { width: 29px; height: 29px; } /* „← Zurück" (Player-Topbar + Kategorie-Detail) und Such-Sprung: identische 42px. */ :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-topbar .pd-back, :is(body.app-desktop, body.app-phone.pd-mobile-active) #pd-topbar #pd-search-jump, body.app-desktop .cat-detail-back { height: 42px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; margin: 0; font-size: 14px; } /* ════════════════════════════════════════════════════════════════════════════ SPRINT 2 — §4 Typografie · §8 Filter-Kontrast · §10 Hoster-Rahmen + Ad-Glow · §3 BTTV/FFZ-Kontrollstreifen. (identisch in classic + cyberpunk) ════════════════════════════════════════════════════════════════════════════ */ /* ── §4: Section-Titel +18 % + großzügigere vertikale Atemluft ──────────────── */ .section-title { font-size: 1.85rem; line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; margin: 8px 0 18px; padding-top: 4px; } body.app-desktop .section-title { font-size: 2.1rem; margin: 10px 0 22px; } /* Titel STEHT über den Pillen (§4) → Abstand Titel↔Pillen + Pillen↔Grid harmonisieren. */ #filter-tabs.filter-tabs-relocated { margin: 0 0 20px; } .video-grid { margin-top: 4px; } /* ── §8 / UI-60: Active filter-tab contrast — standard nav tabs (rgba bg) must stay pure white; only desktop SEARCH pills with a solid sys-focus bg need dark text. The old global rule made ALL .filter-tab.active dark → invisible on dark background. */ body.app-desktop #search-filter-tabs .filter-tab.active, body.app-desktop #search-platform-pills .filter-pill.active { color: #12131a !important; } body.app-desktop #search-filter-tabs .filter-tab.active svg, body.app-desktop #search-platform-pills .filter-pill.active svg { stroke: #12131a; } /* Navigation filter tabs (Alle/Live/Videos) and standard pills: always crisp white. */ #filter-tabs .filter-tab.active, .cat-detail-tabs .filter-tab.active, .filter-tab.active, .sc-bubble.active { color: #ffffff !important; } #filter-tabs .filter-tab.active svg, .filter-tab.active svg { stroke: #ffffff; } /* ── §10: Statische, un-geblurrte Hoster-Rahmen je Plattform (Cross-Pollination) ── */ .video-card[data-platform="youtube"] { border: 1px solid rgba(255,0,0,0.55); } .video-card[data-platform="twitch"] { border: 1px solid rgba(145,70,255,0.6); } .video-card[data-platform="dailymotion"] { border: 1px solid rgba(0,102,220,0.6); } .video-card[data-platform="kick"] { border: 1px solid rgba(0,77,26,0.8); } /* ── §10: Werbe-Container — kräftiger Amber-Rahmen + Signatur-Neon-Puls ──────── */ /* §AP7 Task6: Werbe-Kacheln leuchten NICHT mehr im Dauerschleife-Loop (zu unruhig). Ruhiger statischer Rahmen als Default; der pulsierende Neon-Glow startet NUR bei :hover (Maus) bzw. .focused (Fernbedienung) — exakt wie bei den Hoster-Kacheln. */ /* FEAT-11 (Sprint 10): Alt-Orange (#ff7a18) → Deep-Gold/Amber (#ff9f00) migriert, damit sich der Ad-Glow nicht mehr mit PeerTubes neuem Fediverse-Orange (#F1680D) beißt. */ .ad-card, .shorts-ad-card { border: 2px solid rgba(255, 159, 0, 0.55) !important; box-shadow: 0 0 0 rgba(255, 159, 0, 0) !important; transition: box-shadow .18s ease, border-color .18s ease; } body:not(.kbd-active) .ad-card:hover, body:not(.kbd-active) .shorts-ad-card:hover, .ad-card.focused, .ad-card:focus, .shorts-ad-card.focused, .shorts-ad-card:focus { border-color: #ff9f00 !important; /* §AP9 T1.3: sofort prominenter Orange-Glow (nicht erst im Animations-Peak). */ box-shadow: 0 0 26px rgba(255, 159, 0, 0.72), 0 0 60px rgba(255, 159, 0, 0.42) !important; animation: pcAdGlow 2.2s ease-in-out infinite; } @keyframes pcAdGlow { 0%, 100% { box-shadow: 0 0 20px rgba(255, 159, 0, 0.50), 0 0 42px rgba(255, 159, 0, 0.26); } 50% { box-shadow: 0 0 34px rgba(255, 159, 0, 0.85), 0 0 74px rgba(255, 159, 0, 0.48); } } /* Vertikale Shorts/Clips-Werbe-Kachel (9:16) im Swipe-Stream. */ .shorts-ad-card { position: relative; width: 420px; max-width: 92vw; aspect-ratio: 9 / 16; border-radius: 16px; background: linear-gradient(135deg,#241400,#0a0a0f); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffb066; gap: 10px; text-align: center; overflow: hidden; } .shorts-ad-card .shorts-ad-glyph { font-size: 40px; } /* §AP8 T16: Video-Ad füllt die Kachel; Bild-Ad bekommt einen 5s-Countdown-Ladekreis. */ .shorts-ad-video { width: 100%; height: 100%; object-fit: cover; } .shorts-ad-img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .shorts-ad-sponsor { position: relative; z-index: 2; font-size: 14px; font-weight: 700; color: #ffb066; padding: 0 12px; } .shorts-ad-countdown { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; z-index: 3; } .shorts-ad-countdown svg { width: 34px; height: 34px; transform: rotate(-90deg); } .shorts-ad-countdown .sac-track { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 3; } .shorts-ad-countdown .sac-prog { fill: none; stroke: var(--sys-focus, #ffd400); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100.53; stroke-dashoffset: 100.53; animation: sacRing 5s linear forwards; } @keyframes sacRing { to { stroke-dashoffset: 0; } } /* §AP7 Task1: Exklusiver „Self Hosted Content By Creator"-Teaser (V2-Vorschau). Edler Pink→Violett-Verlauf hebt den Special-Charakter vom Rest der Hoster-Liste ab. */ .selfhost-card { position: relative; overflow: hidden; align-items: center; background: linear-gradient(120deg, #ec4899 0%, #a21caf 50%, #6d28d9 100%) !important; border: 1px solid rgba(236, 72, 153, 0.55) !important; border-radius: 14px; box-shadow: 0 6px 26px rgba(124, 58, 237, 0.32); color: #fff; } .selfhost-card .settings-info-title { color: #fff; font-weight: 800; } .selfhost-card .settings-info-desc { color: rgba(255, 255, 255, 0.85); } .selfhost-icon { color: #fff; display: inline-flex; } .selfhost-icon .pc-brand-icon { width: 36px; height: 30px; } .selfhost-soon[disabled], .selfhost-soon:disabled { background: rgba(255, 255, 255, 0.16) !important; color: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; cursor: not-allowed; opacity: 0.9; pointer-events: none; font-weight: 700; letter-spacing: 0.3px; } /* §AP7 Task2: V2-Sperre der Hoster-Präferenz (ausgegraut + inert) + „V2 Feature"-Pill. */ .v2-lock-pill { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; background: linear-gradient(120deg, #ec4899, #6d28d9); color: #fff; vertical-align: middle; } .settings-group.v2-locked .hoster-head { opacity: 0.62; } .settings-group.v2-locked .pc-switch { opacity: 0.45; pointer-events: none; } .hoster-body.hoster-v2-locked { pointer-events: none; opacity: 0.5; filter: grayscale(0.45); } .hoster-badge-disabled { opacity: 0.6; cursor: not-allowed; } /* §AP7 Task8: Kontaktformular. */ .contact-form .contact-label { display: block; margin: 10px 0 5px; font-size: 12px; font-weight: 700; color: var(--text-dim, #b7bcc8); letter-spacing: 0.3px; } .contact-form .contact-label:first-child { margin-top: 0; } .contact-select { width: 100%; } .contact-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 14px; line-height: 1.5; background: var(--card-2, rgba(255,255,255,0.04)); color: var(--text, #f1f5f9); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); outline: none; margin-bottom: 2px; } .contact-input:focus { border-color: var(--sys-focus); } .contact-textarea { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: 14px; color: var(--text-main, #f1f5f9); background: var(--card-2, rgba(255,255,255,0.04)); border: 1px solid var(--card-border, rgba(255,255,255,0.12)); } .contact-textarea:focus { outline: none; border-color: var(--sys-focus); } .contact-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; } .contact-status { font-size: 12px; color: var(--text-dim, #b7bcc8); opacity: 0.9; } .contact-status.ok { color: #34d399; } .contact-status.err { color: #f87171; } /* UI-TV-REPORT-QR (nachgezogen für theme-dark-cyber.css, jetzt Default-Theme): QR-Support-Ansicht (TV) löst die D-Pad-Texteingabe ab — #contact-qr-view/#contact-text-view werden per JS (settings.js renderContactQr) alternativ ein-/ausgeblendet, siehe App.IS_TV-Weiche. Fehlte in dieser Theme-Datei (physisch getrennt von theme-cyberpunk.css, kein @import) → ohne diesen Block wäre die QR-Umschaltung auf dem jetzt default-aktiven Theme unwirksam gewesen. */ #contact-qr-view.hidden, #contact-text-view.hidden { display: none !important; } .contact-qr-hint { font-size: 13px; color: var(--text-dim, #b7bcc8); margin: 0 0 12px; line-height: 1.5; } .contact-qr-box { display: flex; justify-content: center; padding: 8px 0; min-height: 92px; align-items: center; } .contact-qr-box img { border-radius: 12px; background: #fff; padding: 8px; } .contact-qr-status { text-align: center; font-size: 12px; color: var(--text-dim, #b7bcc8); margin-top: 10px; min-height: 16px; } /* ── §3: BTTV/FFZ-Kontrollstreifen unter dem Twitch-Chat (eigener DOM, isoliert) ── */ .pc-ext-strip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border, #1e293b); background: var(--card, rgba(255,255,255,0.04)); border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .pc-ext-strip .pc-ext-label { font-size: 12px; color: var(--text-dim, #9aa0aa); margin-right: 2px; } .pc-ext-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--border, #2a2a3a); background: var(--card-2, rgba(255,255,255,0.06)); color: var(--text, #fff); } .pc-ext-btn[data-ext="bttv"].on { border-color: #d50000; color: #ff5a5a; } .pc-ext-btn[data-ext="ffz"].on { border-color: #1e88e5; color: #5ab0ff; } .pc-ext-btn.off { opacity: 0.45; } .pc-ext-btn .pc-ext-gear { font-size: 13px; } .pc-ext-pop { position: absolute; z-index: 60; margin-top: 6px; min-width: 220px; padding: 12px; border-radius: 12px; border: 1px solid var(--border, #2a2a3a); background: var(--card, #12131a); color: var(--text, #fff); box-shadow: 0 12px 40px rgba(0,0,0,0.5); font-size: 13px; } .pc-ext-pop h4 { margin: 0 0 8px; font-size: 13px; } .pc-ext-pop label { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; } .pc-ext-pop.hidden { display: none; } /* §12: Shorts/Clips — Auto-Replay-Umschalter (oben rechts in der Bühne). */ .shorts-stage { position: relative; } .shorts-autoreplay { position: absolute; top: 6px; right: 6px; z-index: 5; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 700; background: rgba(10,12,18,0.72); color: var(--text, #fff); border: 1px solid var(--border, #2a2a3a); backdrop-filter: blur(4px); } .shorts-autoreplay .sar-dot { width: 9px; height: 9px; border-radius: 50%; background: #6b7280; } .shorts-autoreplay.on { border-color: var(--sys-focus, #4f8cff); } .shorts-autoreplay.on .sar-dot { background: #2ec27e; box-shadow: 0 0 8px rgba(46,194,126,0.7); } /* ════════════════════════════════════════════════════════════════════════════ SPRINT 3 — §2 Logo voll · §3 Titel-Pull-up · §1 Profil-Text-Umbruch ════════════════════════════════════════════════════════════════════════════ */ /* §2: Sidebar-Logo NIE abschneiden ("publicore..." → volles "publicore.tv"). */ #sidebar-logo { overflow: visible !important; } /* ── UI-46: Collapsed mini-rail logo shrink (DEFINITIVE) ────────────────────── Root-Cause der bisherigen Fehlversuche: 'body.app-desktop #sidebar-logo .pc-brand-icon { width:82px }' schlug per ID-Spezifität (1,2,1) die alte Collapse-Regel 'body.sidebar-collapsed .pc-brand-icon' (0,2,1) → das SVG schrumpfte NIE und ragte über die 64px-Schiene. Zusätzlich verhinderte '#sidebar-logo{overflow:visible!important}' jeden Clip-Fallback. Fix: Selektor MIT #sidebar-logo + .sidebar-collapsed (1,3,1) > (1,2,1), plus !important, und Container clippt NUR im eingeklappten Zustand (Wortmarke ist dort ohnehin ausgeblendet). */ body.sidebar-collapsed #sidebar-logo { overflow: hidden !important; width: 64px !important; max-width: 64px !important; justify-content: center !important; padding: 0 !important; gap: 0 !important; } body.sidebar-collapsed #sidebar-logo .pc-brand-word { display: none !important; } body.app-desktop.sidebar-collapsed #sidebar-logo { height: 72px !important; min-height: 72px !important; box-sizing: border-box; border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.12)); background: linear-gradient(to bottom, var(--bg-sidebar-1), var(--bg-sidebar-2)); } body.app-desktop.sidebar-collapsed #header.header-two-row { border-bottom: 1px solid var(--card-border, rgba(255, 255, 255, 0.12)); padding-left: 24px; margin-left: 0; } body.app-desktop.sidebar-collapsed .header-row-top, body.app-desktop.sidebar-collapsed .header-row-bottom { margin-left: 0; padding-left: 0; } /* BUG-31 / UI-PATREON: Settings account cards — no dot-matrix on the row or the login button; the dot-matrix now lives exclusively on .platform-logo-slot (see ~4587). Kept as an explicit no-op guard in case any legacy row/button ::after content gets reintroduced upstream. */ body.theme-dark-cyber #section-settings .platform-row.pc-card-paid::after, body.theme-dark-cyber #section-settings .platform-row.pc-card-paid .platform-btn.link::after { display: none !important; } body.app-tv .platform-row[data-platform="twitch"].focused, body.theme-dark-cyber .platform-row[data-platform="twitch"].focused { box-shadow: inset 0 0 0 1px #9146ff, 0 0 18px -4px rgba(145,70,255,0.45); } body.app-tv .platform-row[data-platform="youtube"].focused, body.theme-dark-cyber .platform-row[data-platform="youtube"].focused { box-shadow: inset 0 0 0 1px #ff0033, 0 0 18px -4px rgba(255,0,51,0.4); } body.theme-dark-cyber .platform-row.pc-card-social.focused { box-shadow: inset 0 0 0 2px var(--platform-brand-color, var(--sys-focus)); } body.app-desktop.sidebar-collapsed #sidebar-logo .pc-brand-icon { width: 40px !important; height: auto !important; max-height: 40px !important; min-width: 0 !important; } /* §3: Section-Titel nach oben ziehen — reduziertes Top-Spacing auf ALLEN Subpages (Home/Trends/Shorts/Clips/Settings) für einen ausgeglichenen vertikalen Fluss. */ .section-title { margin-top: 2px !important; margin-bottom: 14px !important; padding-top: 0 !important; } body.app-desktop .section-title { margin-top: 2px !important; margin-bottom: 16px !important; } /* §1: Profil-Menü-Grid — Texte brechen dynamisch um statt zu clippen. */ .profile-card .settings-info-title, .profile-name-label, .profile-name-note, .profile-avatar-label, .profile-avatar-hint, .profile-link-warn, .platform-group-head { /* §AP8 T5: NORMALES Wort-Umbrechen statt aggressivem Mid-Word-Break. Lange Wörter brechen nur, wenn sie sonst überlaufen würden → der Text nutzt die volle Kachel- Breite flüssig aus (kein „nach 1–2 Wörtern"-Treppen-Umbruch mehr). width:100% stellt sicher, dass das Label die gesamte Profil-Body-Breite belegt. */ white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: break-word; word-break: normal; width: 100%; } /* §2 Profil-Link-Warnung: gedämpfter Grau-Ton + Sekundär-Schriftgröße + eingerückt, sodass die Textkante exakt mit dem Profilbild-/Avatar-Slot fluchtet (Icon 26px + 16px margin-right ≈ 42px). ID+Klasse schlägt die generischen Klassen-Regeln. */ #profile-link-warn.profile-link-warn { color: var(--text-muted); font-size: 12px; font-weight: 600; margin-left: 42px; width: calc(100% - 42px); flex-basis: calc(100% - 42px); } /* ════════════════════════════════════════════════════════════════════════════ SPRINT 4 — §1 BTTV/FFZ-Popup unten-rechts über den Buttons + ×-Schließen ════════════════════════════════════════════════════════════════════════════ */ /* BUG-7: overflow:visible so the popup floats above the strip without layout impact. */ .pc-ext-strip { position: relative; overflow: visible; } /* Popup verankert unten-rechts, direkt ÜBER der BTTV/FFZ-Button-Reihe. */ .pc-ext-pop { position: absolute !important; z-index: 70; bottom: calc(100% + 8px) !important; right: 8px !important; left: auto !important; margin: 0 !important; min-width: 230px; max-width: 300px; } .pc-ext-pop-bttv { right: 8px !important; } .pc-ext-pop-ffz { right: 8px !important; } .pc-ext-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; } .pc-ext-pop-head h4 { margin: 0; font-size: 13px; } .pc-ext-pop-close { flex: 0 0 auto; width: 24px; height: 24px; line-height: 1; cursor: pointer; border-radius: 6px; border: 1px solid var(--border, #2a2a3a); background: var(--card-2, rgba(255,255,255,0.06)); color: var(--text, #fff); font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .pc-ext-pop-close:hover { border-color: var(--sys-focus, #4f8cff); color: var(--sys-focus, #4f8cff); } /* ════════════════════════════════════════════════════════════════════════════ SPRINT 5 — §1 Header voll hochgezogen · §2 Shorts/Clips responsive Viewport-Höhe ════════════════════════════════════════════════════════════════════════════ */ /* §1: Section-Titel maximal nach oben — Top-Spacing komplett entfernt (überschreibt alle früheren/„lazy" Klassen via !important) → max. vertikaler Platz für Content. */ .section-title { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 10px !important; padding-bottom: 0 !important; } body.app-desktop .section-title { margin-top: 0 !important; margin-bottom: 12px !important; } #content, .section { padding-top: 0 !important; } /* §2: Shorts (9:16) — viewport-relative Höhe statt fixer Pixel (kein Overflow auf kleinen Screens, kein Under-Scaling auf großen TVs). Höhe treibt die Breite via aspect-ratio; Titel-Metadaten bleiben in derselben Flex-Grenze ohne Page-Scroll. */ .shorts-stage { max-height: calc(100vh - 96px); overflow: hidden; } .shorts-stage .shorts-frame-wrap { width: auto !important; height: 70vh !important; max-height: 68vh !important; aspect-ratio: 9 / 16 !important; } /* Clips (16:9) — breitengetrieben, aber Höhe sauber gedeckelt. */ .shorts-stage-clip .shorts-frame-wrap { height: auto !important; width: auto !important; max-height: 68vh !important; max-width: 92vw !important; aspect-ratio: 16 / 9 !important; } .shorts-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .shorts-meta { flex: 0 0 auto; } /* Vertikale Werbe-Kachel im Swipe-Stream ebenfalls auf Viewport-Höhe skalieren. */ .shorts-ad-card { height: 70vh !important; max-height: 68vh !important; width: auto !important; aspect-ratio: 9 / 16 !important; } /* ════════════════════════════════════════════════════════════════════════════ SPRINT 6 — §1 Sichtbarkeits-Fix: Shorts/Clips-Box darf NIE auf 0x0 kollabieren. Root-Cause: Sprint-5 nutzte width:auto + aspect-ratio zum Sizing, aber das TV-WebView (Chromium 85) unterstützt aspect-ratio NICHT (erst ab 88) → width kollabiert auf 0 → absolutes .shorts-frame wird 0x0 → „nur Audio". Fix: KONKRETE calc()-Maße (überall unterstützt) statt aspect-ratio-Abhängigkeit. position: relative + display:block fest, damit das inset:0-iframe eine echte Box hat. ════════════════════════════════════════════════════════════════════════════ */ .shorts-frame-wrap { position: relative !important; display: block !important; background: #000; overflow: hidden; } /* Shorts 9:16 (Portrait): Höhe treibt, Breite konkret per calc → nie 0. */ .shorts-stage .shorts-frame-wrap { height: 68vh !important; max-height: 68vh !important; width: calc(68vh * 9 / 16) !important; max-width: 92vw !important; aspect-ratio: 9 / 16; /* moderne Browser; calc ist der robuste Fallback */ } /* Clips 16:9 (Landscape): Breite treibt, Höhe konkret per calc (kein 120vh-Unfug). */ .shorts-stage-clip .shorts-frame-wrap { width: min(92vw, 900px) !important; height: calc(min(92vw, 900px) * 9 / 16) !important; max-height: 68vh !important; aspect-ratio: 16 / 9; } /* Vertikale Werbe-Kachel identisch zur Shorts-Box. */ .shorts-ad-card { height: 68vh !important; max-height: 68vh !important; width: calc(68vh * 9 / 16) !important; max-width: 92vw !important; } .shorts-frame { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; display: block !important; } /* UI-19: Arrow alignment on Ad-Cards — the stage may contain metadata (.shorts-meta) which makes the stage taller than the ad card. Add bottom padding to ad cards matching the typical metadata block height (~56px) so arrows at top:50% visually centre on the ad area, not the combined stage + metadata height. */ /* UI-68: Ad- und Video-Pfeile teilen dieselbe vertikale Mitte — Meta-Höhen-Hack entfernt. */ .shorts-ad-card { margin-bottom: 0; } /* ════════════════════════════════════════════════════════════════════════════ UI-SHORTS-MOBILE-OVERLAY — Mobile-Vollbild-Shorts + Bottom-Right-Engagement- Overlay (YouTube-Shorts-Style). NUR body.app-phone (Desktop/Tablet/TV bleiben unangetastet — kein einziger Selektor hier ohne "body.app-phone"-Präfix). Zusätzlich strikt NUR für Shorts (":not(.shorts-stage-clip)") — Clips (16:9) behalten auf Mobile bewusst das bisherige Unter-Video-Layout, weil ein 16:9- Embed in einer 100vw×100dvh-Hochkant-Box riesige Letterbox-Balken erzeugen würde (kein Teil dieses Tickets, das explizit "Shorts" verlangt). Scoping folgt der bestehenden Konvention: .shorts-stage existiert im DOM nur, wenn App.Shorts.mount() gerade einen Short gerendert hat, kein neuer Body-/Nav- Marker nötig — .shorts-stage-clip ist die bereits vorhandene Kind-Unterscheidung (App.Shorts.cfg.clip.stage = 'shorts-stage shorts-stage-clip', core.js). UX-Entscheidung (Cloder): Overlay ist beim Öffnen/Wechseln eines Shorts standardmäßig SICHTBAR — der Nutzer soll Like/Kommentar/Creator-Profil sofort erkennen statt sie per Zufalls-Tap zu entdecken. Ein einzelner Tap auf die Videofläche (App.Shorts._toggleOverlay, core.js) blendet Meta+Overlay dann für ein ungestörtes Vollbild-Seherlebnis aus/wieder ein. Jeder frische mount() startet automatisch wieder sichtbar (kompletter innerHTML-Neubau ohne die Toggle-Klasse). Die bestehende Swipe-Advance-Geste (core.js App.Shorts.bind, touchstart/touchend, 40px-Schwelle) ist von diesem Block UNBERÜHRT — hier wird ausschließlich Layout/Position geändert, keine Touch-Logik. */ body.app-phone .shorts-stage:not(.shorts-stage-clip) { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; z-index: 250; background: #000; justify-content: center; overflow: hidden; } body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-frame-wrap { width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; } /* Titel/Creator-Textzeile wird zum unten-links verankerten Overlay über dem Video (statt eines Blocks darunter) — sonst wäre das Video nicht wirklich vollflächig. */ body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-meta { position: absolute !important; left: 14px; right: 96px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); top: auto; width: auto !important; max-width: none !important; z-index: 4; text-shadow: 0 1px 6px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.9); transition: opacity .18s ease; } body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-title { color: #fff; } body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-creator { color: rgba(255,255,255,0.85); } /* §12-Auto-Replay-Umschalter bleibt oben rechts, jetzt über dem Vollbild-Video. */ body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-autoreplay { z-index: 4; transition: opacity .18s ease; } /* Engagement-Stack (Like/Dislike/Kommentar/Creator) unten rechts, VERTIKAL gestapelt und ÜBER dem Video (statt darunter) — analog YouTube-Shorts. */ body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-engage-wrap { position: absolute !important; right: 10px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: auto; top: auto; width: auto !important; max-width: 72px; z-index: 4; transition: opacity .18s ease; } body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-engage { flex-direction: column; align-items: center; gap: 14px; margin-top: 0; } body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-vote, body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-comments-toggle, body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-creator-btn { flex-direction: column; padding: 8px; border-radius: 50%; background: rgba(10,12,18,0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-creator-btn { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; border: 2px solid var(--sys-focus, #4f8cff); } /* Kommentar-Panel bricht auf Mobile aus der schmalen 72px-Ikonspalte aus (sonst unlesbar) → eigenes Bottom-Sheet über die volle Breite. */ body.app-phone .shorts-stage:not(.shorts-stage-clip) .shorts-comments-panel { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; width: auto !important; max-width: none !important; max-height: 50vh; margin: 0; border-radius: 16px 16px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 6; } /* Tap-Toggle (App.Shorts._toggleOverlay, core.js): blendet Meta+Engagement-Stack für ein ungestörtes Vollbild aus. */ body.app-phone .shorts-stage.sc-overlay-hidden:not(.shorts-stage-clip) .shorts-meta, body.app-phone .shorts-stage.sc-overlay-hidden:not(.shorts-stage-clip) .shorts-engage-wrap, body.app-phone .shorts-stage.sc-overlay-hidden:not(.shorts-stage-clip) .shorts-autoreplay { opacity: 0; pointer-events: none; } /* Der neue Creator-Avatar-Button (siehe App.Shorts._engagementBlock, core.js) ist Teil des gemeinsamen HTML-Bausteins für Shorts UND Clips, auf Desktop/TV/Tablet und im Clips-Feed aber NICHT Teil dieses Vollbild-Overlays — dort bleibt das Layout unverändert, also auch keine zusätzliche sichtbare Kachel dafür. */ body:not(.app-phone) .shorts-creator-btn { display: none; } /* ── UI-CLIPS-SHORTS-WEB-LAYOUT: Desktop-Web (body.platform-pc = app-desktop UND NICHT app-phone UND NICHT app-tv, siehe App.syncPlatformPcClass in core.js) — Engagement-Spalte (Like/Dislike/Kommentar[/Avatar-Link bei Shorts]) wandert von UNTER dem Player nach RECHTS DANEBEN (vertikale Spalte), analog vieler Video-Plattformen. NUR Desktop-Web betroffen: Mobile behält sein eigenes Vollbild-Overlay (UI-SHORTS-MOBILE-OVERLAY, siehe oben, komplett unangetastet), TV (body.app-tv) trägt niemals platform-pc und bleibt beim bisherigen Unter-Video-Layout. Breakpoint bewusst auf den im Projekt bereits mehrfach verwendeten 1024px-Wert gelegt statt einer neuen, willkürlichen Zahl. D-Pad/Tastatur-Fokus: App.clipsEngageButtons() (core.js) ermittelt die Fokus- Reihenfolge rein über die DOM-Reihenfolge der