/* ══════════════════════════════════════════════════════════════════════════
reskin-fidelity.css — §RESKIN-FIDELITY r3 (Cloder 2026-07-25)
NUR DESKTOP-Web (body.app-desktop). Behebt drei Topbar-Befunde aus der PC-Web-
Ansicht, deren Styles im aktuellen Quellstand fehlten (Elemente werden von
reskin-startseite.js gebaut, ihr CSS war nirgends definiert):
1) Doppeltes Logo #pc-m-brand in der Kopfzeile ausblenden (das Marken-Logo
lebt bereits in der Sidebar #sidebar-logo).
2) Profil-Avatar #rsk-avatar: runder, gerahmter Chip mit zentriertem Initial
(vorher rahmenlos / „P" verrutscht).
3) Theme-Switcher #rsk-topbar-extra: Label + drei runde Theme-Punkte
(Dark / Cyberpunk / Nocturne) sichtbar & sauber gestylt.
Handy/TV bleiben unberührt (app-phone hat reskin-mobile.css, TV reskin-tv.css).
Entfernen = raus. Kein Deploy ohne Freigabe (BUG-13).
══════════════════════════════════════════════════════════════════════════ */
/* ── (1) Doppeltes Kopf-Logo raus (Desktop). Marke bleibt in der Sidebar. ── */
body.app-desktop #pc-m-brand,
body.app-desktop .header-row-top .pc-brand:not(#sidebar-logo) {
display: none !important;
}
/* ── (2) Profil-Avatar (oben rechts, neben der Glocke) ── */
body.app-desktop #rsk-avatar {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
border-radius: 50% !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin-left: 10px !important;
cursor: pointer !important;
overflow: hidden !important;
/* BUG-AVATAR-IMPORTANT-BLOCKS-PHOTO (2026-07-28): Der Verlauf ist der FALLBACK
fuer "kein Bild" — sobald eines da ist, muss es gewinnen. Mit `!important`
schlug er jeden Inline-Style, und reskin-startseite.js setzt das Profilfoto
genau so (`av.style.backgroundImage = url(...)`, ohne !important). Das Foto
konnte am Desktop also NIE erscheinen, egal ob die Daten vorlagen.
Kein Gegen-!important gestapelt: die Spezifitaet reicht bereits.
`body.app-desktop #rsk-avatar` ist (1,1,1) und schlaegt die Basisregel
`.rsk-avatar` (0,1,0) auch ohne !important — der Inline-Style wiederum
schlaegt beide, und genau das ist gewollt.
background-size/-position bleiben !important: sie stehen dem Foto nicht im
Weg, sondern rahmen es korrekt (cover/zentriert). */
background: linear-gradient(135deg, var(--pc-accent, #35a7ff), var(--pc-accent2, #2ee6c6));
background-size: cover !important;
background-position: center !important;
border: 2px solid var(--pc-border, rgba(255,255,255,.14)) !important;
color: #0b0e16 !important;
font-weight: 700 !important;
font-size: 14px !important;
line-height: 1 !important;
text-transform: uppercase !important;
box-shadow: 0 0 0 2px rgba(0,0,0,.25) !important;
transition: transform .12s ease, box-shadow .12s ease !important;
}
body.app-desktop #rsk-avatar:hover {
transform: translateY(-1px) !important;
box-shadow: 0 0 0 2px var(--pc-accent, #35a7ff) !important;
}
/* ── (3) Theme-Switcher in der Topbar ── */
body.app-desktop #rsk-topbar-extra {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin-right: 6px !important;
}
body.app-desktop #rsk-topbar-extra .rsk-theme-label {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--pc-muted, #8b93a7) !important;
letter-spacing: .2px !important;
}
body.app-desktop #rsk-topbar-extra .rsk-swatches {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
body.app-desktop #rsk-topbar-extra .rsk-swatch {
width: 18px !important;
height: 18px !important;
padding: 0 !important;
border: 0 !important; /* KEIN transparenter Rahmen → keine Lücke am Rand */
border-radius: 50% !important;
cursor: pointer !important;
box-sizing: border-box !important;
background-clip: border-box !important;
/* Ring sitzt direkt an der Farbfüllung (huggt sie), franst nicht aus. */
box-shadow: 0 0 0 2px rgba(255,255,255,.45) !important;
transition: transform .12s ease, box-shadow .12s ease !important;
}
body.app-desktop #rsk-topbar-extra .rsk-swatch:hover {
transform: scale(1.12) !important;
box-shadow: 0 0 0 2px rgba(255,255,255,.7) !important;
}
/* aktiver Punkt = kräftiger weißer Ring + Akzent-Glow, deutlich hervorgehoben */
body.app-desktop #rsk-topbar-extra .rsk-swatch.on {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(10,13,21,.9), 0 0 10px 1px var(--pc-glow, rgba(145,132,217,.6)) !important;
}
/* die drei Themes als ZWEIFARBIGE Punkte — weicher Verlauf, aber PRIMARY dominant
(~⅔ Fläche), SECONDARY als klar erkennbare Ecke (~⅓). Primary/Secondary:
Dark = schwarz/weiß · Cyberpunk = pink/gelb · Nocturne = dunkelblau/lila (Topbar-Lila). */
body.app-desktop #rsk-topbar-extra .rsk-sw-cyberdark { background: linear-gradient(135deg, #0a0c12 0 64%, #f4f6fb 100%) !important; }
body.app-desktop #rsk-topbar-extra .rsk-sw-cyberpunk { background: linear-gradient(135deg, #ff3d9a 0 64%, #f2ff3a 100%) !important; }
body.app-desktop #rsk-topbar-extra .rsk-sw-nocturne { background: linear-gradient(135deg, #26315e 0 64%, #9184d9 100%) !important; }
/* dezenter Trenner zwischen Swatches und Glocke, falls gebaut */
body.app-desktop #rsk-topbar-extra .rsk-tb-divider {
width: 1px !important;
height: 18px !important;
background: var(--pc-border, rgba(255,255,255,.14)) !important;
margin: 0 2px !important;
}
/* ── (4) „Accounts & Feeds verbinden"-Banner links bündig mit Titel/Grid/Suche ──
Der Banner sitzt (per reskin-startseite.js) VOR der Home-Sektion, also ausserhalb
deren zentriertem 1440px-Container mit 32px-Innenabstand — dadurch klebte er weiter
links. Hier bekommt er DIESELBE Geometrie: zentriert, max 1440px, 32px je Seite als
Rand (nicht Padding, damit die KARTENKANTE — nicht der Inhalt — auf der 32px-Linie
startet). Formel funktioniert auf jeder Breite (breit UND schmal). */
body.app-desktop #connect-banner {
box-sizing: border-box !important;
width: calc(100% - 64px) !important;
max-width: 1376px !important; /* 1440 − 2×32 */
margin-left: auto !important;
margin-right: auto !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
UI-OVERHAUL-T3 · Desktop Nav-Rail (§1a–c)
60px transparente Icon-Rail, die beim Hover als OVERLAY über den Content ausfährt
(Content wird NICHT geschoben). NUR body.app-desktop — TV (app-tv/reskin-tv) und
Mobile (app-phone/reskin-mobile) bleiben unberührt (→ T4/T5). Basis-#sidebar-Regeln
in theme-*.css unangetastet; hier ausschliesslich Desktop-Override.
chrome53-safe: flex + margin (KEIN flex-gap), top/right/bottom/left (KEIN inset-
Shorthand), reines :hover; Label-Reveal via display (kein Layout-Leak bei 60px).
reskin-fidelity lädt zuletzt → gewinnt Kaskaden-Gleichstand; !important nur wo eine
bestehende !important-Regel (reskin-startseite #sidebar .nav-item) zu schlagen ist.
═══════════════════════════════════════════════════════════════════════════ */
/* — Marken-Logo-Tinting (#13-Emblem, geräteklassenübergreifend, zieht mit dem Theme;
harte Hex im SVG = chrome53-Fallback). Neutral → --text-main; PLAY/LIVE → Primär-
Akzent; Play-Dreieck/Live-Kreis → Sekundär-Akzent. Bestehende Tokens, kein Hardcode. */
#sidebar-logo .pc-frame { stroke: var(--text-main, #e9e9ed); }
#sidebar-logo .pc-nf { fill: var(--text-main, #e9e9ed); }
#sidebar-logo .pc-main { fill: var(--pc-accent, #9184d9); }
#sidebar-logo .pc-acc { fill: var(--neon-cyan, #38bdf8); }
/* — Rail-Grundzustand: fixe 60px-Overlay-Leiste, transparent — */
body.app-desktop #sidebar {
position: fixed !important;
top: 0; left: 0; bottom: 0;
width: 60px !important;
background: transparent !important;
border-right: none !important;
z-index: 45;
overflow: hidden;
transition: width .18s ease, background .18s ease, box-shadow .18s ease;
}
body.app-desktop #content { margin-left: 60px; }
/* Logo oben: eingeklappt reines Emblem, Wortmarke erst beim Ausfahren */
body.app-desktop #sidebar-logo {
height: 64px; padding: 0 13px; margin: 0;
display: flex; align-items: center; justify-content: flex-start; overflow: hidden;
}
body.app-desktop #sidebar-logo .pc-brand-icon { width: 34px; height: 31px; flex-shrink: 0; }
body.app-desktop #sidebar-logo .pc-brand-word {
display: none; margin-left: 11px; font-size: 22px; font-weight: 700; white-space: nowrap;
}
body.app-desktop #sidebar-logo .pc-brand-core { color: var(--text-main); font-weight: 700; }
/* Nav-Gruppe als flex-Spalte; Icons im 60px-Zustand zentriert, Labels ausgeblendet */
body.app-desktop #nav-list { display: flex; flex-direction: column; padding: 8px 0; }
body.app-desktop #sidebar .nav-item {
justify-content: center !important;
gap: 0 !important;
padding: 12px 0 !important;
margin: 2px 8px !important;
border-radius: 10px;
}
body.app-desktop #sidebar .nav-icon { width: 28px; height: 28px; margin-right: 0 !important; flex-shrink: 0; }
body.app-desktop #sidebar .nav-icon svg { width: 24px; height: 24px; }
body.app-desktop #sidebar .nav-label { display: none; white-space: nowrap; }
body.app-desktop #sidebar .nav-item[data-nav="settings"] { margin-top: auto !important; }
/* Footer (Viewport/Legal/Build) nur im ausgefahrenen Zustand */
body.app-desktop #sidebar-viewport,
body.app-desktop #sidebar-legal,
body.app-desktop #sidebar-build { display: none; }
/* — Ausgefahrener Overlay-Zustand: Hover, deckende Fläche über dem Content — */
body.app-desktop #sidebar:hover {
width: 248px !important;
background: var(--bg-sidebar-1, var(--surface, #1a1c2b)) !important;
box-shadow: 2px 0 22px rgba(0,0,0,.45);
z-index: 60;
}
body.app-desktop #sidebar:hover .nav-item { justify-content: flex-start !important; padding: 12px 16px !important; }
body.app-desktop #sidebar:hover .nav-icon { margin-right: 14px !important; }
body.app-desktop #sidebar:hover .nav-label { display: inline; font-size: 16px; }
body.app-desktop #sidebar:hover #sidebar-logo .pc-brand-word { display: inline; }
body.app-desktop #sidebar:hover #sidebar-viewport { display: flex; }
body.app-desktop #sidebar:hover #sidebar-legal { display: flex; }
body.app-desktop #sidebar:hover #sidebar-build { display: block; }
/* Collapse-Toggle auf Desktop überflüssig (Hover übernimmt das Ausfahren) */
body.app-desktop #sidebar-toggle { display: none !important; }
/* Feste Bottom-Bars an die neue 60px-Rail andocken (statt 248px) */
body.app-desktop #hint-bar { left: 60px !important; }
body.app-desktop #rsk-wasd-bar { left: 60px !important; }
/* ═══════════════════════════════════════════════════════════════════════════
UI-OVERHAUL-T6 · Desktop Button-Bar (§1d) · Inc.2b
Hoster▾-Dropdown ersetzt die inline Pillen-Leiste (nur Desktop, Home/Trends;
State bleibt App.SC/pc_sc_active_feed). Weiße Aktiv-Pille für Alle/Live/Videos.
Nur body.app-desktop (modern) → keine chrome53-Beschränkung. TV/Mobile unberührt.
═══════════════════════════════════════════════════════════════════════════ */
#hoster-dd { display: none; }
#hoster-dd.hidden { display: none !important; }
/* Pillen-Leiste auf Desktop/Home+Trends aus — das Dropdown ersetzt sie. Hohe Spezifität
(2 IDs + html), um `html body.app-desktop #section-home #session-platform-bar`
(reskin-startseite, display:inline-flex !important) zu überstimmen. */
html body.app-desktop.nav-home #section-home #session-platform-bar,
html body.app-desktop.nav-trending #section-trending #session-platform-bar { display: none !important; }
body.app-desktop #hoster-dd:not(.hidden) {
position: relative; display: inline-flex; vertical-align: middle; margin-left: 10px;
}
body.app-desktop #hoster-dd .hoster-dd-trigger {
display: inline-flex; align-items: center; gap: 8px;
height: 34px; padding: 0 12px; cursor: pointer;
background: var(--pc-surface2, #232637); color: var(--pc-text, #e9e9ed);
border: 1px solid var(--pc-border, rgba(233, 233, 237, .10)); border-radius: 10px;
font-size: 14px; font-weight: 600; font-family: inherit;
}
body.app-desktop #hoster-dd .hoster-dd-count {
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
background: var(--pc-accent, #9184d9); color: #0a0c12;
font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
body.app-desktop #hoster-dd .pc-dd-caret {
width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 5px solid currentColor; opacity: .8; transition: transform .15s ease;
}
body.app-desktop #hoster-dd.open .pc-dd-caret { transform: rotate(180deg); }
body.app-desktop #hoster-dd .hoster-dd-panel {
display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
min-width: 200px; padding: 6px;
background: var(--pop, var(--pc-surface, #1e2130));
border: 1px solid var(--pc-border, rgba(233, 233, 237, .10)); border-radius: 14px;
box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
body.app-desktop #hoster-dd.open .hoster-dd-panel { display: block; }
body.app-desktop #hoster-dd .hoster-dd-row {
display: flex; align-items: center; width: 100%; gap: 10px;
padding: 9px 10px; border: none; border-radius: 10px; cursor: pointer;
background: none; color: var(--pc-muted, #9397ab);
font-size: 14px; font-weight: 600; text-align: left; font-family: inherit;
}
body.app-desktop #hoster-dd .hoster-dd-row:hover {
background: var(--pc-surface2, #232637); color: var(--pc-text, #e9e9ed);
}
body.app-desktop #hoster-dd .hoster-dd-name { flex: 1 1 auto; }
body.app-desktop #hoster-dd .hoster-dd-check {
width: 16px; height: 16px; border-radius: 5px; flex: 0 0 auto;
border: 1.5px solid var(--pc-border, rgba(233, 233, 237, .25));
}
body.app-desktop #hoster-dd .hoster-dd-row.on { color: var(--pc-text, #e9e9ed); }
body.app-desktop #hoster-dd .hoster-dd-row.on .hoster-dd-check {
background: var(--pc-accent, #9184d9); border-color: var(--pc-accent, #9184d9);
}
/* ─────────────────────────────────────────────────────────────────────────────
#542 · Hoster-Logo im Dropdown (Mockup): farbiges Rundquadrat in Hosterfarbe
(Inline-BG aus App.brandGlow im Markup) mit weiß gefiltertem Logo-SVG.
Geräteklassen-agnostisch (Desktop/TV/Mobile teilen #hoster-dd) — die BG-Farbe
kommt inline, hier nur Form + Weiß-Filter. chrome53-safe (nur flex/filter,
kein grid/inset/color-mix). Kein Konflikt: .hoster-dd-logo ist neu.
───────────────────────────────────────────────────────────────────────────── */
#hoster-dd .hoster-dd-logo,
#search-hoster-dd .hoster-dd-logo {
width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
/* Logo-Fix: die logos/.svg sind VOLLFARB-Badges (eigener Marken-Hintergrund
+ Glyph), KEINE monochromen Glyphen. Die alte Marken-Tile-Hintergrundfarbe
(JS-inline) + `filter: brightness(0) invert(1)` machten das ganze Badge zu einem
weissen Block → kein erkennbares Icon. Jetzt: Tile transparent, das Badge fuellt
die Kachel selbst und traegt seine eigene Farbe. */
background: transparent !important;
}
#hoster-dd .hoster-dd-logo img,
#search-hoster-dd .hoster-dd-logo img {
/* Claudit-Fix: `contain` statt `cover` — die Badges sind vollstaendige Marken-Logos
mit unterschiedlichem Seitenverhaeltnis (YT 1.42:1 breit, Twitch 0.86:1 hoch); `cover`
beschnitt Glyph/Wortmarke an den Raendern. `contain` zeigt jedes Logo komplett. */
width: 100%; height: 100%; object-fit: contain; display: block;
}
/* ─────────────────────────────────────────────────────────────────────────────
#542 FU (r12, webOS-Sim 08-16) · Checkbox-Status bei Fokus/Highlight sichtbar.
Desktop (TV hat den On/Off-Schieber, reskin-tv.css:2358; Mobile s. reskin-mobile).
Bisher: leeres Kästchen mit fahler --pc-border-Kante → auf dem hellen Hover-/
Fokus-BG kaum sichtbar ("Kästchen bleibt weiß"). Jetzt: (a) Zeilen-Fokus (.focused,
Tastatur-Nav) spiegelt :hover; (b) AUS-Kante bei Hover/Fokus auf --pc-text
angehoben; (c) AN = Akzent-Fill + dunkler Haken (::after) → an/aus unabhängig vom
Zeilen-Hintergrund eindeutig. Nicht-TV, daher ::after/transform frei nutzbar. */
body.app-desktop #hoster-dd .hoster-dd-row.focused,
body.app-desktop #search-hoster-dd .hoster-dd-row.focused {
background: var(--pc-surface2, #232637); color: var(--pc-text, #e9e9ed);
}
body.app-desktop #hoster-dd .hoster-dd-check,
body.app-desktop #search-hoster-dd .hoster-dd-check { position: relative; }
body.app-desktop #hoster-dd .hoster-dd-row:hover .hoster-dd-check,
body.app-desktop #hoster-dd .hoster-dd-row.focused .hoster-dd-check,
body.app-desktop #search-hoster-dd .hoster-dd-row:hover .hoster-dd-check,
body.app-desktop #search-hoster-dd .hoster-dd-row.focused .hoster-dd-check {
border-color: var(--pc-text, #e9e9ed);
}
body.app-desktop #hoster-dd .hoster-dd-row.on .hoster-dd-check::after,
body.app-desktop #search-hoster-dd .hoster-dd-row.on .hoster-dd-check::after {
content: ""; position: absolute; left: 4.5px; top: 1px; box-sizing: border-box;
width: 4px; height: 8px; border: solid #07080d; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* ═══ #4: Multi-Select-Hoster-Dropdown auf der Suche (#search-hoster-dd) ═════════
Spiegelt die Desktop-Optik von #hoster-dd (Trigger/Panel/Zeilen/Check), sitzt
NEBEN #search-filter-tabs (statt der alten #search-platform-pills). Eigener
Multi-Select-State App.Search.hosters; Logos teilen die Regel oben. */
body.app-desktop #search-hoster-dd {
position: relative; display: inline-flex; vertical-align: middle; margin-left: 10px;
}
body.app-desktop #search-hoster-dd .hoster-dd-trigger {
display: inline-flex; align-items: center; gap: 8px;
height: 34px; padding: 0 12px; cursor: pointer;
background: var(--pc-surface2, #232637); color: var(--pc-text, #e9e9ed);
border: 1px solid var(--pc-border, rgba(233, 233, 237, .10)); border-radius: 10px;
font-size: 14px; font-weight: 600; font-family: inherit;
}
body.app-desktop #search-hoster-dd .hoster-dd-count {
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
background: var(--pc-accent, #9184d9); color: #0a0c12;
font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
body.app-desktop #search-hoster-dd .pc-dd-caret {
width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 5px solid currentColor; opacity: .8; transition: transform .15s ease;
}
body.app-desktop #search-hoster-dd.open .pc-dd-caret { transform: rotate(180deg); }
body.app-desktop #search-hoster-dd .hoster-dd-panel {
display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
min-width: 200px; padding: 6px;
background: var(--pop, var(--pc-surface, #1e2130));
border: 1px solid var(--pc-border, rgba(233, 233, 237, .10)); border-radius: 14px;
box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
body.app-desktop #search-hoster-dd.open .hoster-dd-panel { display: block; }
body.app-desktop #search-hoster-dd .hoster-dd-row {
display: flex; align-items: center; width: 100%; gap: 10px;
padding: 9px 10px; border: none; border-radius: 10px; cursor: pointer;
background: none; color: var(--pc-muted, #9397ab);
font-size: 14px; font-weight: 600; text-align: left; font-family: inherit;
}
body.app-desktop #search-hoster-dd .hoster-dd-row:hover {
background: var(--pc-surface2, #232637); color: var(--pc-text, #e9e9ed);
}
body.app-desktop #search-hoster-dd .hoster-dd-name { flex: 1 1 auto; }
body.app-desktop #search-hoster-dd .hoster-dd-check {
width: 16px; height: 16px; border-radius: 5px; flex: 0 0 auto;
border: 1.5px solid var(--pc-border, rgba(233, 233, 237, .25));
}
body.app-desktop #search-hoster-dd .hoster-dd-row.on { color: var(--pc-text, #e9e9ed); }
body.app-desktop #search-hoster-dd .hoster-dd-row.on .hoster-dd-check {
background: var(--pc-accent, #9184d9); border-color: var(--pc-accent, #9184d9);
}
/* Alte Such-Hoster-Pillen auf Desktop aus (durch das Dropdown ersetzt). */
body.app-desktop #search-platform-pills { display: none !important; }
/* Tabs + Hoster-Dropdown in EINER Reihe (Dropdown neben „Alle/Live/Videos/Kanäle"). */
body.app-desktop #section-search #search-filter-tabs { vertical-align: middle; }
/* ─────────────────────────────────────────────────────────────────────────────
#537 FU3 (r12, webOS-Sim 08-16) · Kästchen ums Kachel-Hoster-Logo WEG —
geräteklassen-übergreifend (Desktop hatte es via FU2, hier TV + Mobile ergänzt).
Die logos/*.svg sind fertige Marken-Farb-Logos; das farbige Rundquadrat (--card-
glow) + der Weiß-Filter waren aufgesetzt und erzeugten auf TV das leere orangene
Kästchen (zusammen mit dem #537-Case-Bug am Datei-Slug logos/.svg, der
separat in core.js/creator.js gefixt ist). Fix: Außenbox transparent, Weiß-Filter
raus, UND der neutrale Grau-Chip am ![]()
selbst (reskin-startseite.css:1792,
.logo-slot img[src*="logos/"]) für das Kachel-Logo neutralisiert → Logo pur, kein
Rahmen. Größe 22px (Desktop hier gesetzt, TV zusätzlich via #TVVP29 reskin-tv.css
:226). chrome53-safe: nur background/padding/border-radius/filter — KEIN flex-gap
auf app-tv (die Name-Zentrierung dort trägt die Theme-Basis .card-creator
{align-items:center} + #TVVP29; Desktop/Mobile setzen gap separat).
───────────────────────────────────────────────────────────────────────────── */
.video-card .card-creator .card-platform-icon {
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
width: 22px !important; height: 22px !important; flex: 0 0 22px !important;
}
.video-card .card-creator .card-platform-icon img {
filter: none !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* Creator-Name-Zentrierung: Desktop hier (flex-gap ok); Mobile via reskin-mobile.css
:809; TV via Theme-Basis + #TVVP29 (dort bewusst OHNE flex-gap → chrome53). */
body.app-desktop .video-card .card-creator {
align-items: center !important; gap: 6px !important;
}
/* Weiße Aktiv-Pille für Alle/Live/Videos (Master §1d: bg #fff, color #15151c). Hohe
Spezifität (2 IDs via relokiertem #section-*), um die Accent-Shorthand-Regeln der
Theme-/reskin-Sheets zu überstimmen. Tabs sind auf Home/Trends/Abos in die Sektion
verschoben (placeFilterTabs). */
html body.app-desktop #section-home #filter-tabs .filter-tab.active,
html body.app-desktop #section-trending #filter-tabs .filter-tab.active,
html body.app-desktop #section-subscriptions #filter-tabs .filter-tab.active {
background: #fff !important; color: #15151c !important; border-color: #fff !important;
}
html body.app-desktop #section-home #filter-tabs .filter-tab.active svg,
html body.app-desktop #section-trending #filter-tabs .filter-tab.active svg,
html body.app-desktop #section-subscriptions #filter-tabs .filter-tab.active svg { stroke: #15151c !important; }
/* ═══════════════════════════════════════════════════════════════════════════
#538 · Such-Icon statt Vollfeld (Mockup) — DESKTOP
Das #search-input ist DASSELBE Element, das die Suchseite nutzt (pages/search.js
getElementById('search-input')) — es darf also NICHT entfernt werden. Lösung: auf
den Feed-Screens (nicht auf der Suchseite) das #search-bar zu einer 44px-Icon-Pille
kollabieren (nur die Lupe sichtbar); bei Hover ODER Fokus (focus-within) — sowie auf
der Suchseite (body.nav-search) — fährt es wieder zum vollen Feld aus, das
#search-input bleibt voll funktionsfähig (keine Verhaltensänderung, reines CSS,
reversibel). NUR Desktop; TV/Mobile unberührt (eigene, separat getestete Schritte).
═══════════════════════════════════════════════════════════════════════════ */
body.app-desktop:not(.nav-search) #search-bar {
width: 44px !important; min-width: 44px !important; max-width: 44px !important;
padding: 0 !important; justify-content: center !important;
border-radius: 12px !important; overflow: hidden !important;
transition: width .16s ease, max-width .16s ease, border-radius .16s ease;
}
body.app-desktop:not(.nav-search) #search-bar:hover,
body.app-desktop:not(.nav-search) #search-bar:focus-within {
width: 440px !important; max-width: 440px !important;
border-radius: 10px !important; padding: 0 14px !important; justify-content: flex-start !important;
}
/* Eingabefeld im kollabierten Zustand ausblenden — Lupe (.search-icon) bleibt zentriert. */
body.app-desktop:not(.nav-search) #search-bar:not(:hover):not(:focus-within) #search-input {
opacity: 0 !important; width: 0 !important; min-width: 0 !important;
padding: 0 !important; pointer-events: none !important;
}
body.app-desktop:not(.nav-search) #search-bar .search-icon { flex: 0 0 auto !important; }
/* #538 (TV) · Such-Icon auf TV-Feed-Screens. OK auf dem fokussierten Such-Feld ruft
bereits App.switchNav('search') (core.js) → Suchseite mit vollem Feld (dasselbe
#search-input). Daher hier NUR visuell zur Icon-Pille kollabieren; KEIN Fokus-Expand
(auf TV kein Hover, und :has()/:focus-within-Expand wäre nicht chrome53-safe). Das
#search-input NIE display:none — die Suchseite (body.nav-search, hier ausgeschlossen)
braucht es. chrome53-safe (nur width/opacity/flex). */
body.app-tv:not(.nav-search) #search-bar {
width: 44px !important; min-width: 44px !important; max-width: 44px !important;
padding: 0 !important; justify-content: center !important;
/* R11-2 (Wiedergänger, dritter Anlauf — jetzt die Ursache): das frühere
`overflow:hidden` hier verbarg zwar das eingeklappte #search-input, klippte aber
AUCH den Fokus-Glow (filter:drop-shadow am Lupen-SVG) an der 44px-Icon-Kante — und
schlug per Quellreihenfolge den R7-17-`overflow:visible`-Vorfix in reskin-tv.css
(gleiche Spezifität (0,1,2,1), reskin-fidelity lädt später). Deshalb blieb der Glow
trotz aller bisherigen Freigaben links abgeschnitten. Das Input ist bereits über
`opacity:0 + width:0 + pointer-events:none` (unten) vollständig verborgen → das
`overflow:hidden` war fürs Verstecken redundant und ist der eigentliche Clipper.
Entfernt: der Glow tritt nun aus, das Input bleibt unsichtbar. */
border-radius: 12px !important;
}
body.app-tv:not(.nav-search) #search-bar #search-input {
opacity: 0 !important; width: 0 !important; min-width: 0 !important;
padding: 0 !important; pointer-events: none !important;
}
body.app-tv:not(.nav-search) #search-bar .search-icon { flex: 0 0 auto !important; }
/* ═══════════════════════════════════════════════════════════════════════════
#538 (Desktop) · EINE Top-Zeile: [Such-Icon] [Alle|Live|Videos] [Hoster▾]
........ [Kalender][Glocke][Avatar]. reskin-startseite.js mergeTopBarRow() holt
#filter-tabs/#session-platform-bar/#hoster-dd zurück in .header-row-top; hier die
Layout-Regeln + Neutralisierung der sektions-absoluten Positionierung (#content
#filter-tabs greift weiter, da #header in #content liegt). Zweite Header-Zeile leer
→ aus. NUR Desktop. ═══════════════════════════════════════════════════════════ */
body.app-desktop .header-row-top {
display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: nowrap !important;
}
body.app-desktop .header-row-bottom { display: none !important; }
body.app-desktop .header-row-top #header-actions { margin-left: auto !important; }
/* #content im Selektor, um die 2-ID-Regel `#content #filter-tabs {position:absolute}`
(reskin-startseite v23) zu schlagen — .header-row-top liegt in #content. */
body.app-desktop #content .header-row-top #filter-tabs {
position: static !important; top: auto !important; right: auto !important; left: auto !important;
margin: 0 !important; z-index: auto !important;
}
body.app-desktop #content .header-row-top #session-platform-bar { position: static !important; margin: 0 !important; }
body.app-desktop #content .header-row-top #hoster-dd { position: relative !important; margin: 0 !important; }
/* In der Einzelzeile bleibt die Suche ein stabiles Icon (kein Hover-Aufschieben der
Tabs). Klick öffnet die Suchseite (core.js: #search-bar-Click → switchNav('search')). */
body.app-desktop:not(.nav-search) .header-row-top #search-bar:hover,
body.app-desktop:not(.nav-search) .header-row-top #search-bar:focus-within {
width: 44px !important; max-width: 44px !important; border-radius: 12px !important;
padding: 0 !important; justify-content: center !important;
}
/* User 08-19: Da das Icon in der Einzelzeile NIE ausfährt, das #search-input hier
UNBEDINGT ausblenden — sonst quillt bei Hover der Platzhaltertext („Vi…") hinter der
Lupe hervor (die :not(:hover)-Regel oben greift bei Hover nicht mehr). Analog zur
TV-Regel. Suchseite (body.nav-search) ist ausgeschlossen → dort bleibt das Feld voll. */
body.app-desktop:not(.nav-search) .header-row-top #search-bar #search-input {
opacity: 0 !important; width: 0 !important; min-width: 0 !important;
padding: 0 !important; pointer-events: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
#538 (Desktop, r2 · User-Feedback) — Nav-Bar wie Mockup:
• Hoster-PILLEN raus (das Hoster▾-Dropdown ersetzt sie).
• FLACHE, randlose Buttons (keine harten Kästen/Rahmen), aktiv = weiße Pille.
• Clips + Abos aus der Sidebar hoch in die Nav-Leiste (Buttons via reskin-JS).
• Sidebar kompakter: Clips/Abos raus, Icons vertikal mittig.
═══════════════════════════════════════════════════════════════════════════ */
/* — Hoster-Pillen in der Top-Zeile ausblenden (Dropdown ersetzt sie) — */
body.app-desktop .header-row-top #session-platform-bar { display: none !important; }
/* — Filter-Segment FLACH: kein Kasten/Rahmen; Tabs = randlose Pillen, aktiv weiß.
#content im Selektor, um die 2-ID-Segment-Regel (v23) zu schlagen. — */
body.app-desktop #content .header-row-top #filter-tabs {
background: transparent !important; border: none !important; box-shadow: none !important;
padding: 0 !important; gap: 2px !important; border-radius: 0 !important;
}
body.app-desktop #content .header-row-top #filter-tabs .filter-tab {
background: transparent !important; border: none !important; box-shadow: none !important;
height: 40px !important; padding: 0 18px !important; border-radius: 999px !important;
color: var(--pc-muted) !important; font-weight: 500 !important;
}
body.app-desktop #content .header-row-top #filter-tabs .filter-tab:not(.active):hover {
background: rgba(255,255,255,.06) !important; color: var(--pc-text) !important;
}
body.app-desktop #content .header-row-top #filter-tabs .filter-tab.active {
background: #fff !important; color: #15151c !important; font-weight: 600 !important;
}
/* — Hoster▾-Trigger FLACH (kein Rahmen/Kasten) — */
body.app-desktop .header-row-top #hoster-dd .hoster-dd-trigger {
background: transparent !important; border: none !important; height: 40px !important; padding: 0 12px !important;
}
body.app-desktop .header-row-top #hoster-dd .hoster-dd-trigger:hover { background: rgba(255,255,255,.06) !important; }
/* — Neue Top-Nav-Buttons (Clips / Abos): flach, wie die Tabs — */
body.app-desktop .header-row-top .rsk-topnav-btn {
display: inline-flex !important; align-items: center !important;
background: transparent !important; border: none !important; cursor: pointer !important;
height: 40px !important; padding: 0 16px !important; border-radius: 999px !important;
color: var(--pc-muted) !important; font-family: inherit !important; font-size: 15px !important; font-weight: 500 !important;
}
body.app-desktop .header-row-top .rsk-topnav-btn .nav-label { font-size: inherit !important; }
body.app-desktop .header-row-top .rsk-topnav-btn:hover { background: rgba(255,255,255,.06) !important; color: var(--pc-text) !important; }
body.app-desktop .header-row-top .rsk-topnav-btn.active { background: #fff !important; color: #15151c !important; font-weight: 600 !important; }
/* — Such-Icon FLACH (dezente Fläche, kein harter Rahmen) — */
body.app-desktop:not(.nav-search) .header-row-top #search-bar {
background: var(--pc-surface, rgba(255,255,255,.06)) !important; border: none !important; box-shadow: none !important;
}
/* — Sidebar: Clips + Abos raus (jetzt oben), Icons vertikal mittig/kompakt — */
body.app-desktop #sidebar .nav-item[data-nav="clips"],
body.app-desktop #sidebar .nav-item[data-nav="subscriptions"] { display: none !important; }
body.app-desktop #sidebar #nav-list { flex: 1 1 auto !important; justify-content: center !important; }
body.app-desktop #sidebar .nav-item[data-nav="settings"] { margin-top: 0 !important; }
/* ═══════════════════════════════════════════════════════════════════════════
#538 (Desktop, r3 · User-Feedback) — „dynamischer, nicht so strikt":
• Header ohne harten Rahmen/Kasten (transparent, keine Trennlinie).
• Such-Icon komplett flach (kein halbtransparenter Kasten).
• Gleichmäßige Abstände Alle·Live·Videos·Clips·Abos (einheitliches Padding/Gap).
• Kachel-Hintergrund (halbtransparent) weg → nur Rahmen + Thumbnail.
• Sidebar: dezente, kompakte Icon-Buttons (nicht volle Höhe).
═══════════════════════════════════════════════════════════════════════════ */
/* — Header: kein Kasten, keine Trennlinie (dezent, verschmilzt mit dem Content) — */
body.app-desktop #header {
background: transparent !important; border-bottom: none !important; box-shadow: none !important;
}
/* — Such-Icon flach (der subtile Kasten aus r2 wieder raus) — */
body.app-desktop:not(.nav-search) .header-row-top #search-bar { background: transparent !important; }
/* — Gruppierung: Alle·Live·Videos·Clips ENG zusammen, dann Luft zu Abos + Hoster — */
body.app-desktop .header-row-top { gap: 2px !important; }
/* User 08-19: Lupe saß zu weit weg von „Alle" (mehr als die Abstände der Tabs
untereinander). Auf den Tab-Abstand angleichen. */
body.app-desktop:not(.nav-search) .header-row-top #search-bar { margin-right: 4px !important; }
body.app-desktop #content .header-row-top #filter-tabs { gap: 2px !important; }
body.app-desktop #content .header-row-top #filter-tabs .filter-tab,
body.app-desktop .header-row-top .rsk-topnav-btn,
body.app-desktop .header-row-top #hoster-dd .hoster-dd-trigger {
padding: 0 12px !important;
}
/* Clips bleibt eng an der Filter-Gruppe; Abos + Hoster bekommen je etwas Abstand.
#content-Präfix (2 IDs) schlägt bestehende #content-…-Regeln. */
body.app-desktop #content .header-row-top #rsk-top-clips { margin-left: 2px !important; }
body.app-desktop #content .header-row-top #rsk-top-abos { margin-left: 18px !important; }
body.app-desktop #content .header-row-top #hoster-dd { margin-left: 10px !important; }
/* — Kacheln dynamischer: kein halbtransparenter Karten-Hintergrund (nur Rahmen + Thumb) — */
body.app-desktop .video-card { background: transparent !important; box-shadow: none !important; }
/* — Sidebar: dezente, kompakte Icon-Buttons statt voll-hoher Balken — */
body.app-desktop #sidebar .nav-item {
width: 46px !important; height: 46px !important; min-height: 0 !important;
margin: 3px auto !important; padding: 0 !important;
align-items: center !important; justify-content: center !important;
border-radius: 14px !important; box-shadow: none !important;
}
body.app-desktop #sidebar .nav-item .nav-icon { margin: 0 !important; }
body.app-desktop #sidebar .nav-item.active,
body.app-desktop #sidebar .nav-item.active.focused {
background: rgba(255,255,255,.08) !important; box-shadow: none !important;
}
/* Beim Hover-Ausfahren (Overlay-Rail) dürfen die Items wieder in voller Breite mit Label. */
body.app-desktop #sidebar:hover .nav-item {
width: auto !important; height: auto !important; justify-content: flex-start !important;
padding: 12px 16px !important; margin: 2px 8px !important; border-radius: 10px !important;
}
/* — Suche geöffnet (Klick aufs Icon → switchNav('search') setzt body.nav-search):
das Suchfeld wird zum breiten Textfeld über die ganze Zeile, die Nav-Buttons
(Alle/Live/Videos/Clips/Abos/Hoster) weichen; Kalender/Glocke/Avatar bleiben rechts. — */
/* r7: Suchfeld NICHT über die ganze Seite — nur so breit wie die Button-Gruppe oben
(bis Hoster). Feste, zentrierte Breite (Actions sind absolut rechts, kein Overlap). */
body.app-desktop.nav-search .header-row-top #search-bar {
flex: 0 0 auto !important; width: min(760px, 46vw) !important; max-width: min(760px, 46vw) !important;
background: var(--pc-surface) !important; border-radius: 12px !important;
padding: 0 12px !important; margin-right: 0 !important;
}
body.app-desktop.nav-search .header-row-top #search-input {
display: inline-block !important; width: 100% !important; flex: 1 1 auto !important;
}
body.app-desktop.nav-search #content .header-row-top #filter-tabs,
body.app-desktop.nav-search #content .header-row-top #rsk-top-clips,
body.app-desktop.nav-search #content .header-row-top #rsk-top-abos,
body.app-desktop.nav-search #content .header-row-top #hoster-dd {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
#538 (Desktop, r5 · User-Feedback) — zwei Korrekturen:
• Nav-Optionen (Suche·Alle·Live·Videos·Clips·Abos·Hoster) horizontal ZENTRIERT;
nur Kalender/Glocke/Avatar oben rechts (absolut aus dem Fluss gepinnt, damit
die Options-Gruppe wirklich mittig sitzt statt links). Nur ausserhalb der Suche.
• Sidebar-Icons NICHT über die volle Höhe verteilt: die .nav-item hatten
flex:1 1 0% (gemessen) und streckten sich auf ~122px → justify-content:center
hatte keinen Freiraum. flex:0 0 auto lässt height:46px greifen; der kompakte
Icon-Cluster wird dadurch vertikal mittig gebündelt (Logo bleibt oben).
═══════════════════════════════════════════════════════════════════════════ */
/* — Sidebar: Items nicht strecken → kompakter, vertikal zentrierter Icon-Cluster — */
body.app-desktop #sidebar #nav-list .nav-item { flex: 0 0 auto !important; }
/* — Top-Optionen zentriert; Actions (Kalender/Glocke/Avatar) rechts gepinnt.
Nur :not(.nav-search) — im Suchzustand füllt das Suchfeld (flex:1) die Zeile
und schiebt die Actions im Fluss nach rechts (kein Overlap). — */
/* r7: Zentrierung + absolute Actions in BEIDEN Zuständen (auch Suche), damit im
Suchzustand das Suchfeld sauber mittig sitzt statt links-vollbreit. */
body.app-desktop .header-row-top { position: relative !important; justify-content: center !important; }
body.app-desktop .header-row-top #header-actions {
position: absolute !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
display: flex !important; align-items: center !important; margin-left: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
#538 (Desktop, r6 · User-Feedback) — zwei Korrekturen:
• App-Shell-Rahmen weg: #app hatte max-width:1600 + margin:0 160px + box-shadow
(0 0 0 1px hell = die zwei eingerückten Vertikallinien + 0 0 140px Dark-Glow).
Auf breiten Monitoren erzeugte das die gerahmte, „letterboxed" Shell. → full-bleed.
• Bottom-Steuerleiste als EINE schwebende, zentrierte, halbtransparente Pille
(inkl. „i"): #rsk-wasd-bar war eine vollbreite, deckende Leiste mit Trennlinie
(bg rgb(32,32,34), left:60/right:0). Das „i" (#pc-keyboard-info-wrap) ist bereits
ein Kind der Leiste, nur per margin-left:auto nach rechts gedrückt. → Leiste
transparent, auf Inhaltsbreite geschrumpft, mittig gepinnt, Pillen-BG; „i" inline.
═══════════════════════════════════════════════════════════════════════════ */
/* — App full-bleed: kein zentrierter Shell-Rahmen, keine Vertikallinien, kein Glow — */
body.app-desktop #app {
max-width: none !important; margin: 0 !important;
box-shadow: none !important; border: none !important;
}
/* — Bottom-Bar → schwebende, zentrierte, halbtransparente Pille (alles zusammen) — */
body.app-desktop #rsk-wasd-bar {
left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
bottom: 16px !important; width: auto !important; max-width: calc(100% - 96px) !important;
height: auto !important; gap: 16px !important; padding: 9px 20px !important;
background: rgba(20, 20, 24, .55) !important; border: 1px solid rgba(255, 255, 255, .08) !important;
border-top: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 999px !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, .38) !important;
-webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
}
/* das „i" nicht mehr nach rechts absetzen → inline in der Pille */
body.app-desktop #rsk-wasd-bar #pc-keyboard-info-wrap { margin-left: 2px !important; }
/* ═══════════════════════════════════════════════════════════════════════════
#538 (Desktop, r7 · User-Feedback) — Hoster-Vereinheitlichung (Optik/Nav):
• Alle Hoster-PILLEN-Leisten raus — es gilt nur das obere Hoster▾-Dropdown:
#session-platform-bar (Home/Live/Videos) + #clips-bubbles (Clips) ausblenden.
• Top-Bar in Clips konsistent: placeFilterTabs setzt in Clips #filter-tabs auf
visibility:hidden und #hoster-dd auf display:none (inline). !important schlägt
die Inline-Styles → „Alle·Live·Videos" + „Hoster▾" bleiben oben sichtbar.
• Clips-Tab-Klick → Startseite (JS in reskin-startseite.js, patchApp).
HINWEIS (für Claudit): Das TATSÄCHLICHE Clips-Content-Filtern nach dem oberen
Dropdown ist NICHT verdrahtet — Clips filtert über state.clipsHosterIdx (anderes
Modell) in core.js (nach Null-Byte nicht lesbar). Clips zeigt daher aktuell alle
Hoster; die Pipeline-Anbindung ist der fokussierte Nachzug. ═══════════════════ */
/* — Hoster-Pillen-Leisten komplett raus (nur noch das obere Dropdown) — */
body.app-desktop #session-platform-bar,
body.app-desktop #clips-bubbles { display: none !important; }
/* — In Clips die Top-Bar-Filter/Hoster sichtbar halten (Inline-Hiding überschreiben) — */
body.app-desktop.nav-clips #content .header-row-top #filter-tabs { visibility: visible !important; }
body.app-desktop.nav-clips #content .header-row-top #hoster-dd { display: flex !important; }
/* ═══════════════════════════════════════════════════════════════════════════
#538 (Desktop, r8 · User 08-19) — EINSTELLUNGEN: obere Buttons + zentriert.
(a) Auf nav-settings versteckt die App #filter-tabs (visibility:hidden) und
#hoster-dd (display:none) — genau wie auf Clips. User will die GLEICHE
Top-Leiste wie auf der Startseite → sichtbar erzwingen (Klick auf Alle/Live/
Videos → Startseite, JS in patchApp erweitert um nav==='settings').
(b) #section-settings ist ein voll-breiter Block; die Tabbar (float:left) +
#settings-content (margin-left) nutzen nur die linke Hälfte → der ganze
Block wird per max-width + margin:auto horizontal zentriert (Titel + Submenü
+ Inhalt gemeinsam). ═══════════════════════════════════════════════════════ */
body.app-desktop.nav-settings #content .header-row-top #filter-tabs { visibility: visible !important; }
body.app-desktop.nav-settings #content .header-row-top #hoster-dd { display: flex !important; }
body.app-desktop #section-settings {
max-width: min(1180px, 100%) !important;
margin-left: auto !important; margin-right: auto !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
#538 (Desktop, r9) — D-Pad/WASD-Fokus-Ring für die neue 'topnav'-Zone.
core.js malt beim Durchsteppen von Clips·Abos·Hoster▾ die Klasse .focused; hier
der sichtbare Ring (wie ein Tastatur-Fokus). Der Filter-Tab-Fokus hat bereits
seine eigene .focused-Optik. ═════════════════════════════════════════════════ */
body.app-desktop .header-row-top .rsk-topnav-btn.focused,
body.app-desktop .header-row-top #hoster-dd .hoster-dd-trigger.focused {
outline: 2px solid var(--pc-accent, var(--sys-focus, #b65cff)) !important;
outline-offset: 2px !important;
border-radius: 999px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
WOS-BATCH r11 (webOS-Sim 08-16 · #540/#544/#546/#547/#549/#550) —
EINSTELLUNGEN + CONSENT LESBARKEIT. Cross-Plattform (TV/Web/Mobile), theme-
agnostisch via --pc-*. Diese Schicht lädt NACH theme-*.css + reskin-tv.css,
gewinnt also per !important gegen die Alt-Token-Werte (--text-faint #868c99,
--text-muted #5a5f6c, --sys-idle #9aa0aa), die das „grau-auf-grau" erzeugen.
TV-eigene, bereits lesbare Overrides (reskin-tv.css:327-329, höher spezifisch)
bleiben für .profile-name-label / .settings-info-desc bewusst bestehen.
═══════════════════════════════════════════════════════════════════════════ */
/* #546 — Beschreibungs-/Hinweistext generell: von --text-faint auf lesbares
--pc-muted heben + Mindestgröße. Deckt .settings-info-desc, das bisher
ungestylte .settings-hint sowie die Consent-Beschreibungen ab. */
.settings-info-desc,
.settings-hint,
.consent-profiling-desc {
color: var(--pc-muted, #9397ab) !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
/* #546 — „Plattform-Inhalte ausblenden"-Zeile (settings.js dynamisch): war
12px --sys-idle → lesbarer Primärtext (es ist ein aktiver Schalter-Label). */
.platform-hide,
.platform-hide > span {
color: var(--pc-text, #e9e9ed) !important;
font-size: 14px !important;
}
/* #544 — Profil-Tab: Label/Notiz/Status waren 12px --text-muted (#5a5f6c,
grau-auf-grau). Label bleibt Sekundär (--pc-muted), Notiz/Status ebenso
lesbar; Wert-/Status-Text der Konten-Zeilen darf als --pc-text hervorstechen. */
.profile-name-label,
.profile-avatar-label,
.profile-name-note {
color: var(--pc-muted, #9397ab) !important;
font-size: 13px !important;
}
.profile-name-status {
color: var(--pc-text, #e9e9ed) !important;
font-size: 13px !important;
}
/* Claudit-Fund1 (HIGH): Die neutrale --pc-text-!important-Regel oben (Lesbarkeit,
#544) darf die SEMANTISCHEN Validierungs-Farben der Namenspruefung NICHT
plattmachen. profile.js setzt .ok (Name frei) / .err (vergeben/ungueltig) /
.pc-link-warn — in den Theme-Dateien non-!important definiert, daher verlieren
sie gegen das neutrale !important → Gruen/Rot-Signal ging verloren. Hier mit
!important + denselben Theme-Tokens nachziehen (hoehere Spezifitaet .status.ok
schlaegt das neutrale .status): Neutral bleibt --pc-text, an/aus wieder farbig. */
.profile-name-status.ok { color: var(--linked, #22c55e) !important; }
.profile-name-status.err { color: var(--live, #ef4444) !important; }
.profile-name-status.pc-link-warn { color: var(--brand, var(--accent, var(--neon-pink, #ff5c8a))) !important; }
/* #540 — Consent-Popup (eigenes Fallback-Banner #cc-text.cmp-dialog-text):
Optionstext war --text-faint → lesbar. (Cookiebot-natives Dialog ist extern,
s. #548-Klärung.) */
.cmp-dialog-text,
#cc-text {
color: var(--pc-text, #e9e9ed) !important;
opacity: 0.92 !important;
font-size: 14px !important;
}
/* #549 — DATENSCHUTZ & KONTO: die Alt-Regel (theme-*.css) stellte jede .legal-row
auf flex-direction:column + Button width:100% (überbreite „elongated" Buttons).
Zurück auf Zeile: Label/Status LINKS, On/Off-Button RECHTS. Danger-Löschzeile
ausgenommen (bleibt prominent voll-breit). */
.settings-info.legal-settings .legal-row:not(.legal-row-danger) {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
flex-wrap: wrap !important;
}
.settings-info.legal-settings .legal-row:not(.legal-row-danger) .platform-btn {
width: auto !important;
flex: 0 0 auto !important;
}
.settings-info.legal-settings .legal-row .consent-status-line {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.consent-status-label { color: var(--pc-muted, #9397ab) !important; font-size: 13px !important; }
.consent-status-value { color: var(--pc-text, #e9e9ed) !important; font-weight: 600 !important; font-size: 14px !important; }
/* #550 — RECHTLICHES: die drei Buttons (Impressum/Datenschutz/Nutzungsbedingungen)
gleich breit nebeneinander statt ungleich/überbreit gestapelt. */
#btn-imprint,
#btn-privacy,
#btn-terms {
flex: 1 1 0 !important;
min-width: 130px !important;
text-align: center !important;
}
/* #547 — Sprachauswahl (#lang-select-pills): Default-Browser-Scrollbalken →
schlanke, theme-getönte Leiste. Chromium/webkit-TV-WebViews unterstützen
::-webkit-scrollbar; Firefox-Fallback via scrollbar-width/color. */
#lang-select-pills {
scrollbar-width: thin !important;
scrollbar-color: var(--pc-border, #2a2f3e) transparent !important;
}
#lang-select-pills::-webkit-scrollbar { width: 8px !important; }
#lang-select-pills::-webkit-scrollbar-track { background: transparent !important; }
#lang-select-pills::-webkit-scrollbar-thumb {
background: var(--pc-border, #2a2f3e) !important;
border-radius: 8px !important;
}
#lang-select-pills::-webkit-scrollbar-thumb:hover { background: var(--pc-muted, #9397ab) !important; }
/* ═══════════════════════════════════════════════════════════════════════════
WEB-PARITAET Welle 2 — Desktop-Fokus-Ring-System (Vollendung von Welle 1).
Welle 1 hat vier Panel-Traps (HosterDD, Notif, Such-Hoster, Such-Adv) auf
Desktop tastaturnavigierbar gemacht (WASD/QE → .focused). Das Notif-Panel und
die Hoster-Dropdown-Zeilen tragen bereits eigene Desktop-Fokusregeln
(reskin-startseite.css:3098 / reskin-fidelity.css:310); die Such-Adv-Optionen
und die Filter-/Quell-Pillen (.pc-pill / .adv-pill / .ptsrc-chip) hatten aber
NUR app-tv-.focused-Regeln (reskin-tv.css:3230/3411, reskin-startseite.css:1983)
→ auf Desktop war der Tastatur-Fokus dort UNSICHTBAR.
Fix = ein Desktop-Blanket analog zum TV-Blanket (reskin-tv.css:169), aber im
etablierten Desktop-Idiom: crisp `outline: 2px var(--pc-accent)` (wie die
topnav-Fokusregel :749-754), NICHT der TV-drop-shadow-Glow (3-Meter-Aesthetik).
Outline ist orthogonal zu den ~30 box-shadow-.focused-Regeln → kollidiert nicht
und legt sich auch über akzentgefüllte Pillen (wo ein innerer Ring „verschwindet").
Kacheln ausgenommen (eigener Kachel-Ring direkt darunter). Greift NUR im
.focused-Zustand (Tastatur-Nav malt die Klasse) → reiner Maus-Nutzer sieht nichts.
Deckt app-desktop UND app-desktop.app-leanback ab (beide Klassen am body). ═════ */
body.app-desktop .focused:not(.video-card) {
outline: 2px solid var(--pc-accent, var(--sys-focus, #b65cff)) !important;
outline-offset: 2px !important;
}
/* Kachel-Fokus auf Desktop: eigener Ring am Kachel-Rahmen (statt generischem
Outline), damit er das Thumbnail sauber umschliesst. */
body.app-desktop .video-card.focused {
outline: 2px solid var(--pc-accent, var(--sys-focus, #b65cff)) !important;
outline-offset: 3px !important;
border-radius: 12px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
WEB-PARITAET Welle 2b — Deliberate Desktop-Disabled-States.
Map-Befund: es gab KEINE bewusste app-desktop-:disabled-Optik (ausser dem
spezifischen .pd-comment-report-btn) → deaktivierte Buttons waren auf Desktop
nicht als solche erkennbar. Bewusst NIEDRIGE Spezifitaet + KEIN !important,
damit spezifische Regeln (z.B. :is(app-desktop,…) .pd-comment-report-btn:disabled,
theme-*.css) weiter gewinnen — dies ist nur der einheitliche Basis-Zustand.
Deckt echtes :disabled UND aria-disabled="true" (Buttons, die per Attribut
statt Property deaktiviert werden).
CLAUDIT-FIX F1 (2026-08-31): der aria-disabled-Arm SCHLIESST Formular-Controls
(input/select/textarea) AUS. Grund: benutzerdefinierte Switches verstecken ihren
nativen per `.pc-switch input` opacity:0 (Klick-Overlay,
position:absolute, 100%×100%). Das Attribut-Selektor [aria-disabled="true"] (0,2,1)
schlaegt jene Hide-Regel (0,1,1) und zwang die native Checkbox auf opacity:.45 →
sie erschien als grauer Kasten UEBER dem Toggle (nur Desktop, HA-Teaser). Native
Form-Controls sind ohnehin per UA im :disabled-Look — der aria-Arm zielt (laut
Intent oben) auf BUTTONS/Chips/Reihen, nicht auf versteckte Inputs. Die drei
`:not()` tragen je nur einen Typ-Selektor → CSS-L3, chrome53-sicher.
═══════════════════════════════════════════════════════════════════════════ */
body.app-desktop button:disabled,
body.app-desktop .pd-btn:disabled,
body.app-desktop :not(input):not(select):not(textarea)[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
}
/* WEB-PARITAET Welle 2b — BEWUSST NICHT gemacht (dokumentiert):
(1) Globaler --sys-glow-Desktop-Retune: var(--sys-glow) speist ~30 Konsumenten
pro Theme, davon auch PERSISTENTE Zustaende (.pd-react-btn.active, diverse
:hover) — ein Token-Override waere also viel breiter als „nur Fokus" und
riskierte Ruhezustands-Regressionen fuer rein kosmetischen Gewinn. Nach dem
crisp Outline oben ist der Desktop-Fokus ohnehin klar sichtbar.
(2) Spacing-/Hover-„Konsistenz": kein konkreter Fund zum blinden Bauen; wird bei
Bedarf gegen belegte Einzelfaelle nachgezogen. */