/* Schriftgrößen-Slider (App-Einstellungen, Swift-Seite): setzt WoltLabs eigene --wcfFontSize*-Variablen selbst (native Threads/Boxen skalieren dadurch bereits korrekt). Unsere EIGENEN Widgets (Diskussionen-/Aktivität-Chips) kannten dieses Feature bisher gar nicht — hatten feste px-Werte statt einer skalierbaren Variable. --gi-font-scale ist die gemeinsame Schnittstelle: Swift setzt künftig NUR noch diese eine Variable zusätzlich zu den wcfFontSize-Variablen, unsere Chip-Schriftgrößen nutzen calc(BASISpx * var(--gi-font-scale,1)) statt fixer px-Werte. Default 1 = kein Effekt außerhalb der App (Safari/Chromium-Tests bleiben unverändert). */ :root{--gi-font-scale:1;} /* ── Nav-Link Farben: kein Blau, Hover heller ── */ html[data-color-scheme="dark"] .mainMenu a, html[data-color-scheme="dark"] .mainMenu a *:not(.badge):not(.boxMenuLinkOutstandingItems){color:rgba(255,255,255,0.65)!important;} html[data-color-scheme="dark"] .mainMenu a:hover, html[data-color-scheme="dark"] .mainMenu a:hover *:not(.badge):not(.boxMenuLinkOutstandingItems), html[data-color-scheme="dark"] .mainMenu a:focus, html[data-color-scheme="dark"] .mainMenu a:focus *:not(.badge):not(.boxMenuLinkOutstandingItems){color:rgba(255,255,255,1)!important;} html[data-color-scheme="light"] .mainMenu a, html[data-color-scheme="light"] .mainMenu a *:not(.badge):not(.boxMenuLinkOutstandingItems){color:rgba(0,0,0,0.55)!important;} html[data-color-scheme="light"] .mainMenu a:hover, html[data-color-scheme="light"] .mainMenu a:hover *:not(.badge):not(.boxMenuLinkOutstandingItems), html[data-color-scheme="light"] .mainMenu a:focus, html[data-color-scheme="light"] .mainMenu a:focus *:not(.badge):not(.boxMenuLinkOutstandingItems){color:rgba(0,0,0,0.92)!important;} .mainMenu li>a{background:transparent!important;border-radius:0!important;border-bottom:none!important;} @media(prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) .mainMenu a, html:not([data-color-scheme="light"]) .mainMenu a *:not(.badge):not(.boxMenuLinkOutstandingItems){color:rgba(255,255,255,0.65)!important;} html:not([data-color-scheme="light"]) .mainMenu a:hover, html:not([data-color-scheme="light"]) .mainMenu a:hover *:not(.badge):not(.boxMenuLinkOutstandingItems){color:rgba(255,255,255,1)!important;} } @media(prefers-color-scheme:light){ html:not([data-color-scheme="dark"]) .mainMenu a, html:not([data-color-scheme="dark"]) .mainMenu a *:not(.badge):not(.boxMenuLinkOutstandingItems){color:rgba(0,0,0,0.55)!important;} html:not([data-color-scheme="dark"]) .mainMenu a:hover, html:not([data-color-scheme="dark"]) .mainMenu a:hover *:not(.badge):not(.boxMenuLinkOutstandingItems){color:rgba(0,0,0,0.92)!important;} } /* ── Gelesen / Ungelesen (Dark Mode) ── */ html[data-color-scheme="dark"] a.wbbTopicLink{ color:rgba(255,255,255,0.85)!important; } html[data-color-scheme="dark"] a.wbbTopicLink.gi-unread{ color:rgba(255,255,255,0.92)!important; font-weight:600!important; } html[data-color-scheme="dark"] a.wbbTopicLink.gi-read{ color:rgba(255,255,255,0.38)!important; font-weight:400!important; } /* ── Content-Links: weiß statt blau, Hover=inherit ── */ html[data-color-scheme="dark"] .boxContent a:not(.button):not(.userAvatarLink):not(.userLink):not(.wbbTopicLink), html[data-color-scheme="dark"] .contentBox a:not(.button):not(.userAvatarLink):not(.userLink){ color:rgba(255,255,255,0.80)!important; } html[data-color-scheme="dark"] .boxContent a:not(.button):not(.userAvatarLink):not(.userLink):hover, html[data-color-scheme="dark"] .boxContent a:not(.button):not(.userAvatarLink):not(.userLink):active, html[data-color-scheme="dark"] .contentBox a:not(.button):not(.userAvatarLink):not(.userLink):hover, html[data-color-scheme="dark"] .contentBox a:not(.button):not(.userAvatarLink):not(.userLink):active{ color:inherit!important; } /* ── Forum-Kategorie-Label: Section-Stil ── */ html[data-color-scheme="dark"] .wbbBoardNodeContainer--category .wbbBoardNodeContainer__header a, html[data-color-scheme="dark"] .wbbBoardNodeContainer--category .wbbBoardNodeContainer__title{ color:rgba(255,255,255,0.85)!important; font-size:calc(15px * var(--gi-font-scale,1))!important; text-transform:none!important; letter-spacing:-0.2px!important; font-weight:700!important; } @media(prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) a.wbbTopicLink{color:rgba(255,255,255,0.85)!important;} html:not([data-color-scheme="light"]) a.wbbTopicLink.gi-unread{color:rgba(255,255,255,0.92)!important;font-weight:600!important;} html:not([data-color-scheme="light"]) a.wbbTopicLink.gi-read{color:rgba(255,255,255,0.38)!important;font-weight:400!important;} html:not([data-color-scheme="light"]) .boxContent a:not(.button):not(.userAvatarLink):not(.userLink):not(.wbbTopicLink), html:not([data-color-scheme="light"]) .contentBox a:not(.button):not(.userAvatarLink):not(.userLink){color:rgba(255,255,255,0.80)!important;} html:not([data-color-scheme="light"]) .boxContent a:not(.button):not(.userAvatarLink):not(.userLink):hover, html:not([data-color-scheme="light"]) .boxContent a:not(.button):not(.userAvatarLink):not(.userLink):active, html:not([data-color-scheme="light"]) .contentBox a:not(.button):not(.userAvatarLink):not(.userLink):hover, html:not([data-color-scheme="light"]) .contentBox a:not(.button):not(.userAvatarLink):not(.userLink):active{color:inherit!important;} html:not([data-color-scheme="light"]) .wbbBoardNodeContainer--category .wbbBoardNodeContainer__header a, html:not([data-color-scheme="light"]) .wbbBoardNodeContainer--category .wbbBoardNodeContainer__title{ color:rgba(255,255,255,0.85)!important;font-size:calc(15px * var(--gi-font-scale,1))!important;text-transform:none!important;letter-spacing:-0.2px!important;font-weight:700!important; } } /* ── Editor abgerundete Ecken via CKEditor-CSS-Variable ── */ .ck.ck-editor,.ck.ck-body{--ck-border-radius:10px!important;} /* Text-Cursor (Caret) kontraststärker: hell im Dark Mode, dunkel im Light Mode */ html[data-color-scheme="dark"] .ck-editor__editable,html[data-color-scheme="dark"] textarea,html[data-color-scheme="dark"] input[type="text"],html[data-color-scheme="dark"] input[type="search"],html[data-color-scheme="dark"] [contenteditable="true"]{caret-color:#ffffff!important;} @media(prefers-color-scheme:dark){html:not([data-color-scheme="light"]) .ck-editor__editable,html:not([data-color-scheme="light"]) textarea,html:not([data-color-scheme="light"]) input[type="text"],html:not([data-color-scheme="light"]) input[type="search"],html:not([data-color-scheme="light"]) [contenteditable="true"]{caret-color:#ffffff!important;}} html[data-color-scheme="light"] .ck-editor__editable,html[data-color-scheme="light"] textarea,html[data-color-scheme="light"] input[type="text"],html[data-color-scheme="light"] input[type="search"],html[data-color-scheme="light"] [contenteditable="true"]{caret-color:#000000!important;} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .ck-editor__editable,html:not([data-color-scheme="dark"]) textarea,html:not([data-color-scheme="dark"]) input[type="text"],html:not([data-color-scheme="dark"]) input[type="search"],html:not([data-color-scheme="dark"]) [contenteditable="true"]{caret-color:#000000!important;}} .ck.ck-editor__top .ck.ck-toolbar{border-radius:10px 10px 0 0!important;} .messageTabMenu{border-radius:10px!important;} .messageTabMenuNavigation{border-radius:0 0 10px 10px!important;} .messageTabMenuNavigation>ul{border-radius:0 0 10px 10px!important;} /* Erster Breadcrumb-Eintrag (Site-Name "generation i") ausblenden */ .breadcrumbs__list>li:first-child{display:none!important;} /* Nutzer-Report 2026-09-25 ("Navigationslinks/'← [Board]' auf der Übersicht, die sollen da nicht sein"): WoltLabs eigene mobile Breadcrumb ("← letztes Board", Pfeil-Icon .breadcrumbs__parent_indicator) rendert am Seitenende -- auf der Übersicht (Dashboard, kein übergeordnetes Board) ergibt sie inhaltlich keinen Sinn und soll dort nie erscheinen, unabhängig davon ob/warum sie nach einem AJAX-Seitenwechsel stehen bleibt. */ body[data-page-identifier="com.woltlab.wcf.Dashboard"] .breadcrumbs, body[data-page-identifier="com.woltlab.wcf.Dashboard"] .breadcrumbsList{display:none!important;} /* Navigationsleiste + Breadcrumb-Bar: kein WoltLab-Hintergrund (#18181c würde auf dunklem Gradient auffallen) */ .pageNavigation, .pageNavigation .layoutBoundary, .contentHeaderNavigation, .contentInteractionButtonContainer, .breadcrumbs, .breadcrumbsList{ background:transparent!important; background-color:transparent!important; box-shadow:none!important; } /* Seiten-Navigation (1 … 18 … 35) bei mehrseitigen Threads: WoltLab-Standardfarben sind auf dunklem Grund gut lesbar (rgb(209,210,211) Text, rgb(61,61,61) Pill), im Light Mode aber zu blass (rgb(58,58,61) geht noch, aber der aktive Seiten-Pill mit rgb(120,144,156)+weißer Schrift hat kaum Kontrast auf hellem Grund). Light Mode kräftiger. */ html[data-color-scheme="light"] .pagination__link{color:rgba(0,0,0,.75)!important;} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .pagination__link{color:rgba(0,0,0,.75)!important;}} /* Gleiche Optik wie Dark Mode (dort: dunkler Pill rgb(61,61,61) + fast-weiße Schrift) — im Light Mode gespiegelt: heller Pill + schwarze Schrift, sonst identische Form/Größe. */ html[data-color-scheme="light"] .pagination__link--current{background:rgb(224,224,226)!important;color:#000000!important;} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .pagination__link--current{background:rgb(224,224,226)!important;color:#000000!important;}} /* Seiten-Navigation (1 … 3 →) auf schmalen Screens: WoltLab packt sie dort nativ in einen eigenen, zentrierten Block mit Trennlinien ober-/unterhalb (die wir gestern nur nachgefärbt hatten). Auf breiten Screens (iPad/Desktop) läuft dieselbe Navi stattdessen einfach linksbündig inline in der Kopfzeile, ohne Balken/Linien — dieser Look soll jetzt für ALLE Breiten gelten, auf User-Wunsch. */ .contentInteractionPagination.contentInteractionPagination{ border:none!important; justify-content:flex-start!important; width:auto!important; padding:0!important; } /* Buttons in Seiten-Kopf: gleiche Basis wie Boxen, Glass skaliert mit Slider */ .contentHeaderNavigation .button,.contentInteractionButtonContainer .button,.contentHeaderNavigation button:not(.gi-burger){ border-radius:100px!important;font-size:13px!important;font-weight:600!important; padding:7px 16px!important;height:auto!important;min-height:0!important;line-height:1.3!important; } /* Dark: Box-Farbe #120d14 + Ring-Border statt Box-Shadow */ html[data-color-scheme=dark] .contentHeaderNavigation .button:not(.buttonPrimary),html[data-color-scheme=dark] .contentInteractionButtonContainer .button:not(.buttonPrimary){ background:#120d14!important;color:rgba(255,255,255,0.88)!important;border:1px solid rgba(255,255,255,.32)!important;box-shadow:0 4px 14px rgba(0,0,0,0.35)!important; } html:not([data-color-scheme=light]) .contentHeaderNavigation .button:not(.buttonPrimary),html:not([data-color-scheme=light]) .contentInteractionButtonContainer .button:not(.buttonPrimary){ background:#120d14!important;color:rgba(255,255,255,0.88)!important;border:1px solid rgba(255,255,255,.32)!important;box-shadow:0 4px 14px rgba(0,0,0,0.35)!important; } @media(prefers-color-scheme:dark){html:not([data-color-scheme=light]) .contentHeaderNavigation .button:not(.buttonPrimary),html:not([data-color-scheme=light]) .contentInteractionButtonContainer .button:not(.buttonPrimary){background:#120d14!important;color:rgba(255,255,255,0.88)!important;border:1px solid rgba(255,255,255,.32)!important;box-shadow:0 4px 14px rgba(0,0,0,0.35)!important;}} /* Light: Box-Farbe #ffffff + Ring-Border statt Box-Shadow */ html[data-color-scheme=light] .contentHeaderNavigation .button:not(.buttonPrimary),html[data-color-scheme=light] .contentInteractionButtonContainer .button:not(.buttonPrimary){ background:#ffffff!important;color:rgba(0,0,0,0.78)!important;border:1px solid rgba(0,0,0,.28)!important;box-shadow:0 4px 12px rgba(0,0,0,0.12)!important; } html:not([data-color-scheme=dark]) .contentHeaderNavigation .button:not(.buttonPrimary),html:not([data-color-scheme=dark]) .contentInteractionButtonContainer .button:not(.buttonPrimary){ background:#ffffff!important;color:rgba(0,0,0,0.78)!important;border:1px solid rgba(0,0,0,.28)!important;box-shadow:0 4px 12px rgba(0,0,0,0.12)!important; } @media(prefers-color-scheme:light){html:not([data-color-scheme=dark]) .contentHeaderNavigation .button:not(.buttonPrimary),html:not([data-color-scheme=dark]) .contentInteractionButtonContainer .button:not(.buttonPrimary){background:#ffffff!important;color:rgba(0,0,0,0.78)!important;border:1px solid rgba(0,0,0,.28)!important;box-shadow:0 4px 12px rgba(0,0,0,0.12)!important;}} /* ── Abgerundete Ecken + Aurora-Gradient für alle WoltLab-Boxen ── */ .box:not(.mainMenu), section.box:not(.mainMenu), aside.box:not(.mainMenu), div.box:not(.mainMenu), article.box:not(.mainMenu), .wbbBoardNodeList, .wbbBoardNode, .contentBox, .section:not(.pageHeaderPanel):not(.layoutBoundary):not(.boxesInner):not(.pageHeaderFacade), table.tableList, .messageList, .articleList, .userList, .articleContent, .messageGroupList, .wbbThreadList{ border-radius:20px!important; } /* Fließtext (Beitrags-/Artikelinhalt) volles Schwarz/Weiß statt WoltLabs gedimmtem Grau — Links, Zeitstempel, Badges, Benutzernamen bleiben bewusst unverändert. Attribut- und Media-Query-Variante tragen identische Werte, damit keine Spezifitäts-Rangelei entsteht (anders als beim .dropdownMenu-Bug: hier ist es egal welche Regel gewinnt). */ html[data-color-scheme="dark"] .messageText,html[data-color-scheme="dark"] .articleContent,html[data-color-scheme="dark"] .entryCardList__item__teaser{color:#ffffff!important;} html[data-color-scheme="light"] .messageText,html[data-color-scheme="light"] .articleContent,html[data-color-scheme="light"] .entryCardList__item__teaser{color:#000000!important;} @media(prefers-color-scheme:dark){html:not([data-color-scheme="light"]) .messageText,html:not([data-color-scheme="light"]) .articleContent,html:not([data-color-scheme="light"]) .entryCardList__item__teaser{color:#ffffff!important;}} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .messageText,html:not([data-color-scheme="dark"]) .articleContent,html:not([data-color-scheme="dark"]) .entryCardList__item__teaser{color:#000000!important;}} /* Zitat-Text (quoteBoxContent) bleibt klickbar (führt zum Original-Beitrag), soll aber nicht blau sein, sondern normale Mode-Textfarbe wie der restliche Beitragstext — auch innerhalb des CKEditor-Editierbereichs, wo der Zitat-Block dieselbe Verlinkung zeigt. */ html[data-color-scheme="dark"] .quoteBoxContent a,html[data-color-scheme="dark"] blockquote[data-source] a{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;text-decoration:none!important;} html[data-color-scheme="light"] .quoteBoxContent a,html[data-color-scheme="light"] blockquote[data-source] a{color:#000000!important;-webkit-text-fill-color:#000000!important;text-decoration:none!important;} @media(prefers-color-scheme:dark){html:not([data-color-scheme="light"]) .quoteBoxContent a,html:not([data-color-scheme="light"]) blockquote[data-source] a{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;text-decoration:none!important;}} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .quoteBoxContent a,html:not([data-color-scheme="dark"]) blockquote[data-source] a{color:#000000!important;-webkit-text-fill-color:#000000!important;text-decoration:none!important;}} /* "Ähnliche Themen" (wbbSimilarThreadList) sitzt am Threadseiten-Ende direkt unter dem Antwortformular und wirkt dort wie eine fehlplatzierte, verwirrende Karte — ausblenden. */ .wbbSimilarThreadList{display:none!important;} .boxesFooterBoxes:has(.wbbSimilarThreadList){display:none!important;} /* Aurora Dark Mode — alle Boxen transparent, Aurora-Karte NUR für Sidebar-boxContent */ html[data-color-scheme="dark"] .box:not(.mainMenu):not(.boxBorderless), html[data-color-scheme="dark"] .box:not(.mainMenu):not(.boxBorderless)>.boxContent, html[data-color-scheme="dark"] .contentBox, html[data-color-scheme="dark"] .messageList, html[data-color-scheme="dark"] .articleContent, html[data-color-scheme="dark"] .wbbBoardNode, html[data-color-scheme="dark"] table.tableList, html[data-color-scheme="dark"] .wbbThreadList, html[data-color-scheme="dark"] .articleList, html[data-color-scheme="dark"] .userList, html[data-color-scheme="dark"] .messageGroupList{ background:transparent!important; background-color:transparent!important; padding:0!important; box-shadow:none!important; } html[data-color-scheme="dark"] .box:not(.mainMenu):not(.boxBorderless)>h2.boxTitle, html[data-color-scheme="dark"] .box:not(.mainMenu):not(.boxBorderless)>.boxTitle, html[data-color-scheme="dark"] section.dashboardBoxRecentActivity h2.sectionTitle{ padding:0 0 10px 0!important; color:rgba(255,255,255,0.42)!important; font-size:13px!important; text-transform:uppercase!important; letter-spacing:.6px!important; font-weight:700!important; border:none!important; background:transparent!important; } /* Aurora-Karte für alle Boxen + Forum-Boards + Artikel */ html[data-color-scheme="dark"] .box:not(.mainMenu):not(.boxBorderless)>.boxContent, html[data-color-scheme="dark"] .wbbBoardNodeList, html[data-color-scheme="dark"] .entryCardList__container{ background:transparent!important; box-shadow:none!important; padding:0!important; } @media(prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) .box:not(.mainMenu):not(.boxBorderless), html:not([data-color-scheme="light"]) .box:not(.mainMenu):not(.boxBorderless)>.boxContent, html:not([data-color-scheme="light"]) .contentBox, html:not([data-color-scheme="light"]) .messageList, html:not([data-color-scheme="light"]) .articleContent, html:not([data-color-scheme="light"]) .wbbBoardNode, html:not([data-color-scheme="light"]) table.tableList, html:not([data-color-scheme="light"]) .wbbThreadList, html:not([data-color-scheme="light"]) .articleList, html:not([data-color-scheme="light"]) .userList, html:not([data-color-scheme="light"]) .messageGroupList{ background:transparent!important; background-color:transparent!important; padding:0!important; box-shadow:none!important; } html:not([data-color-scheme="light"]) .box:not(.mainMenu):not(.boxBorderless)>h2.boxTitle, html:not([data-color-scheme="light"]) .box:not(.mainMenu):not(.boxBorderless)>.boxTitle, html:not([data-color-scheme="light"]) section.dashboardBoxRecentActivity h2.sectionTitle{ padding:0 0 10px 0!important;color:rgba(255,255,255,0.42)!important;font-size:calc(13px * var(--gi-font-scale,1))!important;text-transform:uppercase!important;letter-spacing:.6px!important;font-weight:700!important;border:none!important;background:transparent!important; } html:not([data-color-scheme="light"]) .box:not(.mainMenu):not(.boxBorderless)>.boxContent, html:not([data-color-scheme="light"]) .wbbBoardNodeList{ background:linear-gradient(135deg,#120d14 0%,#0c1535 100%)!important; border-radius:20px!important; padding:14px!important; box-shadow:0 1px 3px rgba(0,0,0,.20),0 18px 36px -12px rgba(0,0,0,.45)!important; } } /* ════════════════════════════════════════════════════════════ LIGHT MODE — spiegelbildlich zum Dark Mode ════════════════════════════════════════════════════════════ */ /* Alle Boxen transparent — Light-Karte auf .boxContent */ html[data-color-scheme="light"] .box:not(.mainMenu):not(.boxBorderless), html[data-color-scheme="light"] .box:not(.mainMenu):not(.boxBorderless)>.boxContent, html[data-color-scheme="light"] .contentBox, html[data-color-scheme="light"] .messageList, html[data-color-scheme="light"] .articleContent, html[data-color-scheme="light"] .wbbBoardNode, html[data-color-scheme="light"] table.tableList, html[data-color-scheme="light"] .wbbThreadList, html[data-color-scheme="light"] .articleList, html[data-color-scheme="light"] .userList, html[data-color-scheme="light"] .messageGroupList{ background:transparent!important; background-color:transparent!important; padding:0!important; box-shadow:none!important; } html[data-color-scheme="light"] .box:not(.mainMenu):not(.boxBorderless)>h2.boxTitle, html[data-color-scheme="light"] .box:not(.mainMenu):not(.boxBorderless)>.boxTitle, html[data-color-scheme="light"] section.dashboardBoxRecentActivity h2.sectionTitle{ padding:0 0 10px 0!important; color:rgba(0,0,0,0.38)!important; font-size:13px!important; text-transform:uppercase!important; letter-spacing:.6px!important; font-weight:700!important; border:none!important; background:transparent!important; } /* Light Aurora-Karte */ html[data-color-scheme="light"] .box:not(.mainMenu):not(.boxBorderless)>.boxContent, html[data-color-scheme="light"] .wbbBoardNodeList{ background:linear-gradient(135deg,#ffffff 0%,#f0f4ff 100%)!important; border-radius:20px!important; padding:14px!important; box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 30px -10px rgba(0,0,0,.16)!important; } html[data-color-scheme="light"] .entryCardList__container{ background:transparent!important; box-shadow:none!important; padding:0!important; } /* Forum-Kategorie-Label */ html[data-color-scheme="light"] .wbbBoardNodeContainer--category .wbbBoardNodeContainer__header a, html[data-color-scheme="light"] .wbbBoardNodeContainer--category .wbbBoardNodeContainer__title{ color:rgba(0,0,0,0.78)!important; font-size:calc(15px * var(--gi-font-scale,1))!important; text-transform:none!important; letter-spacing:-0.2px!important; font-weight:700!important; } /* Thread-Titel */ html[data-color-scheme="light"] a.wbbTopicLink{color:rgba(0,0,0,0.78)!important;} html[data-color-scheme="light"] a.wbbTopicLink.gi-unread{color:rgba(0,0,0,0.88)!important;font-weight:600!important;} html[data-color-scheme="light"] a.wbbTopicLink.gi-read{color:rgba(0,0,0,0.35)!important;font-weight:400!important;} /* Content-Links */ html[data-color-scheme="light"] .boxContent a:not(.button):not(.userAvatarLink):not(.userLink):not(.wbbTopicLink), html[data-color-scheme="light"] .contentBox a:not(.button):not(.userAvatarLink):not(.userLink){color:rgba(0,0,0,0.65)!important;} html[data-color-scheme="light"] .boxContent a:not(.button):not(.userAvatarLink):not(.userLink):hover, html[data-color-scheme="light"] .boxContent a:not(.button):not(.userAvatarLink):not(.userLink):active, html[data-color-scheme="light"] .contentBox a:not(.button):not(.userAvatarLink):not(.userLink):hover, html[data-color-scheme="light"] .contentBox a:not(.button):not(.userAvatarLink):not(.userLink):active{color:inherit!important;} /* tabularListRowHead bereits vorhanden; thead light mode kommt weiter unten */ @media(prefers-color-scheme:light){ html:not([data-color-scheme="dark"]) .box:not(.mainMenu):not(.boxBorderless), html:not([data-color-scheme="dark"]) .box:not(.mainMenu):not(.boxBorderless)>.boxContent, html:not([data-color-scheme="dark"]) .contentBox, html:not([data-color-scheme="dark"]) .messageList, html:not([data-color-scheme="dark"]) .articleContent, html:not([data-color-scheme="dark"]) .wbbBoardNode, html:not([data-color-scheme="dark"]) .messageSidebar, html:not([data-color-scheme="dark"]) table.tableList, html:not([data-color-scheme="dark"]) .wbbThreadList, html:not([data-color-scheme="dark"]) .articleList, html:not([data-color-scheme="dark"]) .userList, html:not([data-color-scheme="dark"]) .messageGroupList{background:transparent!important;background-color:transparent!important;padding:0!important;box-shadow:none!important;} html:not([data-color-scheme="dark"]) .box:not(.mainMenu):not(.boxBorderless)>h2.boxTitle, html:not([data-color-scheme="dark"]) .box:not(.mainMenu):not(.boxBorderless)>.boxTitle, html:not([data-color-scheme="dark"]) section.dashboardBoxRecentActivity h2.sectionTitle{padding:0 0 10px 0!important;color:rgba(0,0,0,0.38)!important;font-size:calc(13px * var(--gi-font-scale,1))!important;text-transform:uppercase!important;letter-spacing:.6px!important;font-weight:700!important;border:none!important;background:transparent!important;} html:not([data-color-scheme="dark"]) .box:not(.mainMenu):not(.boxBorderless)>.boxContent, html:not([data-color-scheme="dark"]) .wbbBoardNodeList, html:not([data-color-scheme="dark"]) .entryCardList__container{background:transparent!important;box-shadow:none!important;padding:0!important;} html:not([data-color-scheme="dark"]) .wbbBoardNodeContainer--category .wbbBoardNodeContainer__header a, html:not([data-color-scheme="dark"]) .wbbBoardNodeContainer--category .wbbBoardNodeContainer__title{color:rgba(0,0,0,0.78)!important;font-size:calc(15px * var(--gi-font-scale,1))!important;text-transform:none!important;letter-spacing:-0.2px!important;font-weight:700!important;} html:not([data-color-scheme="dark"]) a.wbbTopicLink{color:rgba(0,0,0,0.78)!important;} html:not([data-color-scheme="dark"]) a.wbbTopicLink.gi-unread{color:rgba(0,0,0,0.88)!important;font-weight:600!important;} html:not([data-color-scheme="dark"]) a.wbbTopicLink.gi-read{color:rgba(0,0,0,0.35)!important;font-weight:400!important;} html:not([data-color-scheme="dark"]) .boxContent a:not(.button):not(.userAvatarLink):not(.userLink):not(.wbbTopicLink), html:not([data-color-scheme="dark"]) .contentBox a:not(.button):not(.userAvatarLink):not(.userLink){color:rgba(0,0,0,0.65)!important;} html:not([data-color-scheme="dark"]) .boxContent a:not(.button):not(.userAvatarLink):not(.userLink):hover, html:not([data-color-scheme="dark"]) .boxContent a:not(.button):not(.userAvatarLink):not(.userLink):active, html:not([data-color-scheme="dark"]) .contentBox a:not(.button):not(.userAvatarLink):not(.userLink):hover, html:not([data-color-scheme="dark"]) .contentBox a:not(.button):not(.userAvatarLink):not(.userLink):active{color:inherit!important;} } /* Light-Karte: nach @media-Block — Source-Order-Fix damit dieser Wert über die transparent-Regel im @media-Block gewinnt */ html:not([data-color-scheme="dark"]) .box:not(.mainMenu):not(.boxBorderless)>.boxContent,html:not([data-color-scheme="dark"]) .wbbBoardNodeList{background:linear-gradient(135deg,#ffffff 0%,#f0f4ff 100%)!important;border-radius:20px!important;padding:14px!important;box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 30px -10px rgba(0,0,0,.16)!important;} /* Tap-Highlight global entfernen + kein blaues Active-Highlighting auf Links */ *{-webkit-tap-highlight-color:transparent!important;} a:active,a:hover{color:inherit!important;} /* Hover/Tap: nur wbbTopicLink im Content, Sidebar via JS (CSS-Hover verursacht bfcache-Ghosting auf iPad) */ a.wbbTopicLink,a.sidebarListItem__link{-webkit-tap-highlight-color:transparent!important;} a.wbbTopicLink:hover,a.wbbTopicLink:active{color:inherit!important;} /* Thread-Zeilen wirken auf großen iPad-Screens winzig — auf Desktop-Breite größer setzen. WoltLab deckelt den Avatar über .columnAvatar div (fix 32x32) UND img{max-width/max-height:32px} — beides muss überschrieben werden, sonst greift width:66px auf dem img allein nicht. */ @media(min-width:769px) and (orientation:landscape){ li.tabularListRow{padding-top:24px!important;padding-bottom:24px!important;} li.tabularListRow a.wbbTopicLink, li.tabularListRow .messageGroupLink{font-size:27px!important;} li.tabularListRow .columnAvatar div{width:66px!important;height:66px!important;} li.tabularListRow .columnAvatar img, li.tabularListRow img.userAvatarImage{width:66px!important;height:66px!important;max-width:66px!important;max-height:66px!important;} } /* Kategorie-Container: Gradient-Balken sauber in die Box einschließen */ .wbbBoardNodeContainer--category{ border-radius:20px!important; overflow:hidden!important; margin-bottom:18px!important; padding-bottom:8px!important; overflow-anchor:none!important; } html[data-color-scheme="dark"] .wbbBoardNodeContainer--category{ background:#120d14!important; box-shadow:0 1px 3px rgba(0,0,0,.20),0 18px 36px -12px rgba(0,0,0,.45)!important; } @media(prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) .wbbBoardNodeContainer--category{ background:#120d14!important; box-shadow:0 1px 3px rgba(0,0,0,.20),0 18px 36px -12px rgba(0,0,0,.45)!important; } } html[data-color-scheme="light"] .wbbBoardNodeContainer--category{ background:#ffffff!important; box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 30px -10px rgba(0,0,0,.16)!important; } @media(prefers-color-scheme:light){ html:not([data-color-scheme="dark"]) .wbbBoardNodeContainer--category{ background:#ffffff!important; box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 30px -10px rgba(0,0,0,.16)!important; } } .wbbBoardNodeContainer--category .wbbBoardNodeContainer__header{border-radius:0!important;padding:12px 16px 8px 16px!important;border:none!important;} .wbbBoardNodeContainer--category .wbbBoardNodeContainer__header::after{content:''!important;display:none!important;} .wbbBoardNodeContainer__collapsibleButton button{ width:28px!important; min-width:28px!important; height:28px!important; min-height:28px!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:center!important; border-radius:100px!important; border:1px solid rgba(255,255,255,0.12)!important; background:rgba(255,255,255,0.07)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; color:var(--wcfContentDimmedColor)!important; cursor:pointer!important; } .wbbBoardNodeContainer__collapsibleButton button:hover{ background:rgba(255,255,255,0.14)!important; } html[data-color-scheme="light"] .wbbBoardNodeContainer__collapsibleButton button{ background:rgba(0,0,0,.05)!important; border:1px solid rgba(0,0,0,.1)!important; color:var(--wcfContentDimmedColor)!important; } @media(prefers-color-scheme:light){ html:not([data-color-scheme="dark"]) .wbbBoardNodeContainer__collapsibleButton button{ background:rgba(0,0,0,.05)!important; border:1px solid rgba(0,0,0,.1)!important; color:var(--wcfContentDimmedColor)!important; } } .wbbBoardNodeList, .wbbBoardNodeContainer--category .wbbBoardNodeList, .wbbBoardNodeContainer--category .wbbBoardNode{ border-radius:0!important; box-shadow:none!important; border:none!important; background:transparent!important; background-color:transparent!important; } /* ── Dropdowns — Frosted Glass ── */ .dropdownMenuContainer{ z-index:100000!important; } div.userMenu:not(.box div.userMenu){ z-index:100001!important; } .dropdownMenu, ol.dropdownMenu, ul.dropdownMenu, ol.boxMenuDepth1, ul.boxMenuDepth1, .boxMenuDepth1, div.userMenu:not(.box div.userMenu){ background:rgba(255,255,255,0.04)!important; border:none!important; outline:none!important; border-radius:14px!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; max-height:calc(100dvh - env(safe-area-inset-top,0px) - 90px)!important; backdrop-filter:blur(24px) saturate(180%)!important; -webkit-backdrop-filter:blur(24px) saturate(180%)!important; box-shadow: 0 0 0 1px rgba(255,255,255,0.225), 0 15px 50px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.25)!important; } /* Zentriert — vorher nur ≤1024px, dadurch hing das Kontrollzentrum auf iPad/Desktop-Breite an seiner nativen (linksbündigen) Position statt mittig. Gilt jetzt für alle Breiten. */ div.userMenu:not(.box div.userMenu){ position:fixed!important; top:calc(env(safe-area-inset-top,0px) + 76px)!important; left:50%!important; transform:translateX(-50%)!important; width:min(400px,92vw)!important; max-width:min(400px,92vw)!important; } /* Bei "Menü unten" (data-gi-menu-pos, von der App gesetzt) sitzt oben keine Pille mehr, der 76px-Versatz war dann nur unnötige Leerfläche über dem Dropdown (User: "viel zu viel Luft"). Echte vertikale Zentrierung (top:50%+translate) hat sich als Fehlgriff erwiesen: bei Inhalten, die höher als der verfügbare Platz sind, rutschte der obere Teil (Avatar/Name-Kopfzeile) über den oberen Bildschirmrand hinaus und war schlicht weg (User: "sieht nicht schön aus"). Fester, kleiner Abstand von oben stattdessen -- start immer an einer sicheren Position, nie abgeschnitten, dank max-height + eigenem Scroll trotzdem nie zu groß fürs Display. */ html[data-gi-menu-pos="bottom"] div.userMenu:not(.box div.userMenu){ top:calc(env(safe-area-inset-top,0px) + 24px)!important; } /* Bei "Menü unten" sitzt die Pille jetzt am unteren Rand -- die generische max-height oben (nur 90px Reserve) reichte dort nicht, das Dropdown wuchs fast bis an die Pille heran ("kleben aneinander", Nutzer-Report). Zusätzliche Reserve für Pillenhöhe + sichtbaren Abstand nur in diesem Modus. */ html[data-gi-menu-pos="bottom"] .dropdownMenu, html[data-gi-menu-pos="bottom"] ol.dropdownMenu, html[data-gi-menu-pos="bottom"] ul.dropdownMenu, html[data-gi-menu-pos="bottom"] div.userMenu:not(.box div.userMenu){ max-height:calc(100dvh - env(safe-area-inset-top,0px) - 160px)!important; } html[data-color-scheme="dark"] .dropdownMenu, html[data-color-scheme="dark"] ol.dropdownMenu, html[data-color-scheme="dark"] ul.dropdownMenu, html[data-color-scheme="dark"] ol.boxMenuDepth1, html[data-color-scheme="dark"] ul.boxMenuDepth1, html[data-color-scheme="dark"] .boxMenuDepth1, html[data-color-scheme="dark"] div.userMenu:not(.box div.userMenu){ /* Nutzer-Report 2026-09-13 ("brauchen dynamische Lösung"): ein Blur-Hintergrund kann Kontrast gegen eine feste Textfarbe NIE zuverlässig garantieren, egal wie die Werte gewählt sind -- das Ergebnis hängt vom tatsächlichen Seiteninhalt dahinter ab (bewiesen: weißer Text wurde auf einem hellen Blur-Ergebnis unsichtbar). Deshalb hier komplett blickdicht (kein backdrop-filter mehr) -- Hintergrund und Textfarbe sind dadurch fest und garantiert lesbar, unabhängig davon was auf der Seite dahinter passiert. rgb(28,28,30) = Apples eigener "systemGray6 dark"-Oberflächenton. */ background:rgb(28,28,30)!important; box-shadow: 0 0 0 1px rgba(255,255,255,0.13), 0 6px 20px rgba(0,0,0,0.65), 0 28px 80px rgba(0,0,0,0.85)!important; color:rgba(255,255,255,0.92)!important; } html[data-color-scheme="dark"] .dropdownMenu li>a, html[data-color-scheme="dark"] ol.dropdownMenu li>a, html[data-color-scheme="dark"] ul.dropdownMenu li>a{ color:rgba(255,255,255,0.92)!important; } html[data-color-scheme="light"] .dropdownMenu, html[data-color-scheme="light"] ol.dropdownMenu, html[data-color-scheme="light"] ul.dropdownMenu, html[data-color-scheme="light"] ol.boxMenuDepth1, html[data-color-scheme="light"] ul.boxMenuDepth1, html[data-color-scheme="light"] .boxMenuDepth1, html[data-color-scheme="light"] div.userMenu:not(.box div.userMenu){ /* Gleicher Grund wie oben -- blickdicht statt Glas, hier hell/schwarz. rgb(242,242,247) = Apples eigener "systemGray6"-Oberflächenton (Light Mode). */ background:rgb(242,242,247)!important; box-shadow: 0 0 0 1px rgba(0,20,80,0.10), 0 6px 18px rgba(0,10,60,0.20), 0 24px 64px rgba(0,10,60,0.28)!important; color:rgba(0,0,0,0.82)!important; } html[data-color-scheme="light"] .dropdownMenu li>a, html[data-color-scheme="light"] ol.dropdownMenu li>a, html[data-color-scheme="light"] ul.dropdownMenu li>a{ color:rgba(0,0,0,0.82)!important; } @media(prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) .dropdownMenu, html:not([data-color-scheme="light"]) ol.dropdownMenu, html:not([data-color-scheme="light"]) ul.dropdownMenu, html:not([data-color-scheme="light"]) .boxMenuDepth1, html:not([data-color-scheme="light"]) div.userMenu:not(.box div.userMenu){ background:rgb(28,28,30)!important; box-shadow:0 0 0 1px rgba(255,255,255,0.13),0 15px 45px rgba(0,0,0,0.65)!important; color:rgba(255,255,255,0.92)!important; } html:not([data-color-scheme="light"]) .dropdownMenu li>a, html:not([data-color-scheme="light"]) ol.dropdownMenu li>a{color:rgba(255,255,255,0.92)!important;} } @media(prefers-color-scheme:light){ html:not([data-color-scheme="dark"]) .dropdownMenu, html:not([data-color-scheme="dark"]) ol.dropdownMenu, html:not([data-color-scheme="dark"]) ul.dropdownMenu, html:not([data-color-scheme="dark"]) .boxMenuDepth1, html:not([data-color-scheme="dark"]) div.userMenu:not(.box div.userMenu){ background:rgb(242,242,247)!important; box-shadow:0 0 0 1px rgba(0,20,80,0.075),0 15px 45px rgba(0,20,80,0.125)!important; color:rgba(0,0,0,0.82)!important; } html:not([data-color-scheme="dark"]) .dropdownMenu li>a, html:not([data-color-scheme="dark"]) ol.dropdownMenu li>a{color:rgba(0,0,0,0.82)!important;} } /* aktive Klassen (alle bekannten WoltLab-Varianten) — Hover via JS */ .boxMenuDepth1 li.active>a,.boxMenuDepth1 li.activeMenuItem>a, .boxMenuDepth1 li.current>a,.dropdownMenu li.active>a, .dropdownMenu li.activeMenuItem>a,.dropdownMenu li.current>a, ol.boxMenuDepth1 li.active>a,ol.dropdownMenu li.active>a{ background:rgba(78,154,241,0.18)!important; border-radius:8px!important; } /* userMenuItem: Benachrichtigungen/Kontrollzentrum — einzelne Zeilen transparent */ div.userMenu .userMenuItem, div.userMenu .userMenuItemImage, div.userMenu .userMenuItemContent, div.userMenu .userMenuItemLink, div.userMenu .userMenuItemMeta{ background:transparent!important; background-color:transparent!important; } .dropdownMenu hr,div.userMenu hr,.dropdownDivider{display:none!important;} /* Glocke auf iPad: WoltLab setzt auf breiten Viewports (vermutlich eigene, bei uns nicht initialisierte Custom-Scrollbar) .userMenuContent{max-height:400px;overflow-y:hidden} -- dadurch wurden Nachrichten ab Position 400px hart abgeschnitten, kein Scrollen möglich. Auf dem iPhone griff diese Regel nicht (dort bereits max-height:none/overflow-y:auto). Äußerer div.userMenu hat schon eigenes max-height+overflow-y:auto (siehe oben) -- hier dieselbe Logik auf den inneren Scroll-Container erzwingen. */ div.userMenu .userMenuContent{ max-height:none!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; } /* messageSidebar: nur Background transparent, Padding/Layout von WoltLab beibehalten */ .messageSidebar{background:transparent!important;background-color:transparent!important;border-color:transparent!important;margin-left:0!important;} /* Abstände Avatar → Online-Label → Name → Badge in der Desktop/iPad-Seitenspalte waren zu knapp (WoltLab-Standard: 10px unter Avatar, 5px unter Name) — auf Wunsch verdoppelt. */ .messageSidebar .userAvatar{margin-bottom:20px!important;} .messageSidebar .messageAuthorContainer{margin-bottom:10px!important;} /* Thread-Kopfbereich: Meta-Zeile (Autor "Holger", Zeit "Vor X Stunden") — WoltLabs Standardfarbe rgb(113,117,122) hat auf dem hellen Aurora-Gradient zu wenig Kontrast. Bewusst NUR auf diesen Block beschränkt (nicht app-weit). */ html[data-color-scheme="light"] .contentHeaderMetaData, html[data-color-scheme="light"] .contentHeaderMetaData li, html[data-color-scheme="light"] .contentHeaderMetaData a{color:#000!important;} @media(prefers-color-scheme:light){ html:not([data-color-scheme="dark"]) .contentHeaderMetaData, html:not([data-color-scheme="dark"]) .contentHeaderMetaData li, html:not([data-color-scheme="dark"]) .contentHeaderMetaData a{color:#000!important;} } html[data-color-scheme="dark"] .contentHeaderMetaData, html[data-color-scheme="dark"] .contentHeaderMetaData li, html[data-color-scheme="dark"] .contentHeaderMetaData a{color:#fff!important;} @media(prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) .contentHeaderMetaData, html:not([data-color-scheme="light"]) .contentHeaderMetaData li, html:not([data-color-scheme="light"]) .contentHeaderMetaData a{color:#fff!important;} } /* Breadcrumb ("User News" o.ä.): statt Schwarz/Weiß (kam auf einem Gerät aus unbekanntem Grund nicht als Schwarz an) die App-eigene Theme-Akzentfarbe verwenden — dieselbe Variable, die auch für Verläufe/Badges genutzt wird und dort nachweislich zuverlässig ankommt. Gilt unabhängig von Light/Dark, da die Akzentfarbe selbst schon für Kontrast auf beiden BGs ausgelegt ist. */ /* Bei Beiträgen mit Bearbeitungs-Hinweis ("Es gibt ältere Versionen dieses Beitrags") setzt WoltLab auf der umschließenden
  • ein li::after{display:block;height:50px} (vermutlich ein Clearfix-Nebeneffekt) — bei allen anderen Beiträgen ist dasselbe Pseudo-Element display:inline/auto (wirkungslos). Dieses zusätzliche 50px schiebt Avatar/Name des betroffenen Beitrags spürbar tiefer als bei allen anderen. Pauschal deaktivieren, damit bearbeitete Beiträge nicht aus der Reihe tanzen. */ .wbbThreadPostList>li::after{display:none!important;content:none!important;} /* display:list-item auf der Beitragszeile hat in WKWebView einen Höhenberechnungs-Bug bei Bildposts: nachladende Bilder ändern die Inhaltshöhe nachträglich, die list-item-Box passt sich in Safari/WebKit dabei manchmal nicht korrekt an — der Footer/Button-Bereich ragt dann über die eigentliche Box hinaus ("durchgeschnitten" gewirkt). Im Chromium- Testbrowser nicht reproduzierbar (dort andere list-item-Rendering-Internals). display:block umgeht diese ganze Kategorie von list-item-Bugs, sichtbare Listenpunkte gibt es ohnehin nicht (list-style bereits woanders auf none). */ .wbbThreadPostList>li{display:flow-root!important;} /* Ursprünglicher Padding-Fix (auf ALLE Posts) war doppelt falsch: (1) seit der gi-ol-Fix (Online-Label jetzt absolut positioniert statt im Fluss) sind alle Avatare einheitlich 48px hoch und ragen kaum noch über ihre Box hinaus, Padding also meist unnötig; (2) der eigentliche Unterschied, den der User bemerkt hat, ist strukturell: Folge-Beiträge bekommen von WoltLab automatisch ~26px Abstand (Trennlinie + Puffer) VOR sich (li padding-top:24px + border-top:2px), der ALLERERSTE Beitrag eines Threads hat diesen Abstand nicht (li padding-top:0). Deshalb NUR beim ersten Post gezielt ausgleichen, statt überall pauschal Padding hinzuzufügen. */ .wbbThreadPostList>li:first-child .wbbPost{padding-top:26px!important;} /* Trennung zwischen Beiträgen: WKWebView berechnet die li-Box-Höhe bei der Action-Icon- Zeile (messageFooterGroup) nicht zuverlässig neu, nachdem wir die Icons per CSS größer gemacht haben (min-height:44px, padding, gap) — Chromium-Testbrowser zeigt korrekte 30px-Abstände, im echten WebKit sitzt die Trennlinie/nächster Beitrag laut Nutzer-Report teilweise zu dicht an bzw. mitten in den Icons. Generelle zusätzliche Sicherheitsmarge unten auf JEDEM Beitrag (nicht nur dem letzten), damit die Buttons in jedem Fall vollständig innerhalb der Box bleiben. */ .wbbThreadPostList>li .wbbPost{padding-bottom:30px!important;} /* Beiträge MIT Reaktionen (, das "👍×1" -- siehe auch .messageFooterGroup woltlab-core-reaction-summary weiter unten) brauchen mehr als die pauschalen 30px oben: die Reaction-Summary ist ein Custom Element, das seinen Inhalt erst nach dem initialen li-Layout nachträglich einsetzt -- gleiche Bug-Kategorie wie die nachladenden Bilder oben (li display:flow-root-Kommentar), nur an anderer Stelle. Die Trennlinie zum nächsten Beitrag schnitt dadurch sichtbar durch die Action-Icon-Zeile (Nutzer-Report 2026-08-13). :has() wird von WKWebView unterstützt; falls nicht, greift einfach nur der 30px-Basiswert von oben weiter. */ .wbbThreadPostList>li:has(woltlab-core-reaction-summary) .wbbPost{padding-bottom:56px!important;} .messageFooterGroup{margin-bottom:6px!important;} /* mainMenu-Kasten: WoltLab setzt hier eigene dunkle Box-Hintergründe die den Pill stören */ .box.mainMenu,.mainMenu.box,.mainMenu, .mainMenu>.boxContent,.mainMenu .boxContent{ background:transparent!important; background-color:transparent!important; box-shadow:none!important; border:none!important; border-radius:0!important; overflow:visible!important; } /* pageHeaderPanel (User-Icons) und pageHeaderNavigation: kein eigener Kasten */ #pageHeaderPanel,.pageHeaderPanel, .pageHeaderPanel>.layoutBoundary, #pageHeaderNavigation,.pageHeaderNavigation{ background:transparent!important; background-color:transparent!important; box-shadow:none!important; border:none!important; } /* Die einzelnen Links in Nav + User-Panel haben WoltLab-Hintergrund rgb(33,33,33) — das erzeugt den dunklen Kasten. Alle transparent machen. */ a.boxMenuLink, .mainMenu a, .mainMenu li>a, #pageHeaderPanel a, .pageHeaderPanel a, .userPanelItems a, .userPanelItems button{ background:transparent!important; background-color:transparent!important; } /* Pill: Text-Labels und WoltLab balloon-Tooltips komplett unterdrücken */ /* Nutzer-Report 2026-09-11 ("von den Zahlen an den Icons sehe ich nichts"): .gi-count-num (die neue, formlose Zähler-Ziffer, siehe gi-client.js window._giSetCountNum) ist selbst auch ein ohne "badge" im Klassennamen -- fiel bisher genau dieser Regel zum Opfer und wurde sofort wieder unsichtbar gemacht. Explizit mit ausgenommen. */ .userPanelItems li>a span:not(.badge):not(.jsBadgeHandler):not(.gi-count-num):not([class*="badge"i]), .userPanelItems li>button span:not(.badge):not(.jsBadgeHandler):not(.gi-count-num):not([class*="badge"i]), .userPanelItems li .userPanelButtonLabel{display:none!important;} div.balloonTooltip,#balloonTooltip{display:none!important;} /* Desktop: Notification-Badges rund (wie Mobile) */ .userPanelItems .badge, .userPanelItems .badgeUpdate, .boxMenuLinkOutstandingItems, .wbbBoardNodeContainer__badge .badge{ border-radius:100px!important; min-width:18px!important;height:18px!important; font-size:11px!important;line-height:18px!important; padding:0 5px!important; box-sizing:border-box!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; vertical-align:middle!important; } /* Nutzer-Wunsch 2026-08-31: Glocken-Badge (nativ top:-6px;right:-6px, per Diagnose-Beacon gemessen) und der eigene Menü-Icon-Punkt (gi-client.js, #gi-burger-unread-dot) sollen optisch einheitlich wirken -- beide einen Schritt aufeinander zu: Glocke etwas näher ans Icon (rechts weniger negativ = nach links), Menü-Punkt hier separat in gi-client.js weiter nach rechts. */ li#userNotifications .badge{right:-3px!important;} /* Nutzer-Report 2026-09-09 ("Icons generell ungleichmäßig"): per Diagnose-Beacon (echte getBoundingClientRect()-Messung) nachgewiesen -- die vorherige Fassung dieser Regel setzte min-width:40px nur auf den INNEREN Link/Button, nicht auf das
  • selbst. Die mittleren
  • -Boxen (userMenu/userNotifications/outstandingModeration/unreadConversations) waren dadurch nur 16px breit, während ihr eigener Link/Button jetzt 40px maß -- der Link ragte also über seine eigene
  • -Box hinaus. Der Flex-gap ZWISCHEN den
  • -Boxen war rechnerisch die ganze Zeit exakt gleich (36px, per Diagnose bestätigt) -- sichtbar ungleichmäßig wirkte es nur, weil die überstehenden Icons in den (eigentlich korrekten) Abstand hineinragten. KORREKTUR (Nutzer-Report "jetzt fehlt ein Icon komplett"): ein pauschales ".userPanelItems li{display:flex!important}" erwischte auch normalerweise LEERE, unsichtbare Panel-Items (z.B.
  • -- WoltLab rendert das bei Single-Language-Foren leer, ohne eigenes display:none, einfach weil nichts drin ist) -- display:flex+min-width:40px machte daraus plötzlich eine sichtbare, leere 40px-Box MITTEN in der Pille, die alles dahinter verschoben hat. Jetzt hart auf die 4 tatsächlich betroffenen, per Diagnose bekannten IDs eingegrenzt statt auf alle
  • pauschal. Kreis-Enden (erstes/letztes
  • ) haben bereits ihre eigene 65px-Box per Inline-Style, unangetastet. */ /* KORREKTUR (Nutzer-Report "Lupe überlappt", "nur noch 3 Icons sichtbar"): min-width:40px pro Icon plus 36px Gap passt schlicht NICHT in den verfügbaren Platz -- panelUl ist auf schmalen iPhones nur ~378px breit, die beiden 65px-Kreisenden + ihre 13px-Gaps zu #giPillMid verbrauchen davon bereits 156px, bleiben 222px für die komplette Mittelkapsel (inkl. 2×26px eigenem Padding = 170px für die 4 Icons + 3 Zwischenräume). Bei 40px/Icon + 36px/Gap wären das 268px -- 98px zu viel. panelUl konnte pillMid deshalb per flex-shrink zwangsweise auf 222px zusammenstauchen, die Icons selbst (min-width!important) verweigerten das Schrumpfen und ragten heraus -- die Lupe (kein Flex-Nachbar von pillMid, eigenes
  • ) lag optisch darüber und verdeckte eins der überstehenden Icons komplett. Per Diagnose-Beacon (echte getBoundingClientRect()-Messung, keine dritte Vermutung) gegengerechnet: 24px/Icon + 24px/Gap ergibt 4×24+3×24=168px, passt mit 2px Reserve in die tatsächlich verfügbaren 170px. Nutzer-Wunsch 2026-09-09 ("Icons 50% größer"): 24px -> 32px (das eigene SVG in gi-client.js wächst im selben Schritt von 21px auf 32px mit). Damit das weiterhin in die FESTEN 170px passt, musste der Abstand zwischen den Icons (siehe gap in gi-client.js) von 24px auf 12px sinken: 4×32+3×12=128+36=164px, noch 6px Reserve übrig. */ .userPanelItems li#userMenu,.userPanelItems li#userNotifications, .userPanelItems li#outstandingModeration,.userPanelItems li#unreadConversations, #giPillMid li#userMenu,#giPillMid li#userNotifications, #giPillMid li#outstandingModeration,#giPillMid li#unreadConversations{ min-width:32px!important;box-sizing:border-box!important; display:flex!important;align-items:center!important;justify-content:center!important; } .userPanelItems li#userMenu>a,.userPanelItems li#userNotifications>a, .userPanelItems li#outstandingModeration>a,.userPanelItems li#unreadConversations>a, #giPillMid li#userMenu>a,#giPillMid li#userNotifications>a, #giPillMid li#outstandingModeration>a,#giPillMid li#unreadConversations>a{ display:flex!important;align-items:center!important;justify-content:center!important; width:100%!important;box-sizing:border-box!important; } /* Leere Badge-Bubbles ausblenden (nach "Alle als gelesen markieren") */ .boxMenuLinkOutstandingItems:empty{ display:none!important; } /* Post-Action-Buttons: gleichmäßige Abstände, einheitliche Kreise, iPhone-taugliche Touch-Targets */ .messageFooterGroup{ gap:12px!important; align-items:center!important; justify-content:center!important; } .messageFooterButtons,.messageFooterButtonsExtra,.buttonList.smallButtons{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:12px!important; margin:0!important; padding:0!important; } /* Abstand zwischen Beitragsinhalt und Buttons wiederherstellen */ .messageFooterGroup{ margin-top:16px!important; padding-top:4px!important; } ul.messageFooterButtons > li, ul.buttonList.smallButtons > li, .messageFooterButtons li, .buttonList.smallButtons li{ margin:0!important; padding:0!important; list-style:none!important; } .messageFooterButtons button,.buttonList.smallButtons button{ padding:6px 8px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; height:auto!important; min-width:0!important; min-height:0!important; border-radius:8px!important; background:transparent!important; background-color:transparent!important; border:none!important; } /* Dark Mode: Post-Action-Icons (Melden, Bearbeiten, Zitieren, ...) brauchen sichtbare Box wie im Light Mode */ html[data-color-scheme="dark"] .messageFooterButtons button, html[data-color-scheme="dark"] .messageFooterButtons a, html[data-color-scheme="dark"] .buttonList.smallButtons button, html[data-color-scheme="dark"] .buttonList.smallButtons a{ background:rgba(255,255,255,.08)!important; border:1px solid rgba(255,255,255,.14)!important; } @media(prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) .messageFooterButtons button, html:not([data-color-scheme="light"]) .messageFooterButtons a, html:not([data-color-scheme="light"]) .buttonList.smallButtons button, html:not([data-color-scheme="light"]) .buttonList.smallButtons a{ background:rgba(255,255,255,.08)!important; border:1px solid rgba(255,255,255,.14)!important; } } /* Primary buttons — gleiches Design wie sekundäre Buttons (z.B. "Vorschau"), kein eigener Akzent mehr */ html[data-color-scheme="dark"] .buttonPrimary:not(.pageActionButtonToTop){ background:#120d14!important; border-color:rgba(255,255,255,.10)!important; color:rgba(255,255,255,.88)!important; border-radius:100px!important; } @media(prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) .buttonPrimary:not(.pageActionButtonToTop){ background:#120d14!important; border-color:rgba(255,255,255,.10)!important; color:rgba(255,255,255,.88)!important; border-radius:100px!important; } } html[data-color-scheme="light"] .buttonPrimary:not(.pageActionButtonToTop){ background:#ffffff!important; border-color:rgba(0,0,0,.10)!important; color:rgba(0,0,0,.78)!important; border-radius:100px!important; } @media(prefers-color-scheme:light){ html:not([data-color-scheme="dark"]) .buttonPrimary:not(.pageActionButtonToTop){ background:#ffffff!important; border-color:rgba(0,0,0,.10)!important; color:rgba(0,0,0,.78)!important; border-radius:100px!important; } } .buttonPrimary:not(.pageActionButtonToTop):hover{ opacity:0.88!important; } /* "Bearbeiten"-Text ausblenden — nur Stift-Icon */ .jsMessageEditButton span:not(.invisible){ display:none!important; } /* Font-Smoothing: dünnere, klarere Schrift wie auf apple.com */ *{-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;} /* Theme-Transition: sanfter Dark/Light Wechsel */ html,body{transition:background 0.35s ease,background-color 0.35s ease,color 0.25s ease!important;} /* Seiten-Fade: via JS-Overlay (kein body-animation — würde fixed-Elemente brechen */ /* Theme-Transition: gi-tc kurz aktiv beim Wechsel */ .gi-tc button,.gi-tc .button,.gi-tc .buttonPrimary,.gi-tc a.boxMenuLink, .gi-tc .labelList .label,.gi-tc .userBadge,.gi-tc .contentInteractionButton{ transition:color 0.28s ease,background-color 0.28s ease,background 0.28s ease,border-color 0.28s ease!important; } /* Inhalts-Bilder: Fade via JS inline (kein CSS opacity:0 — zu riskant) */ /* Ladebalken */ #gi-progress-bar{ position:fixed;top:0;left:0;width:100%;height:2px; background:linear-gradient(90deg,rgb(var(--gi-c1-rgb)),rgb(var(--gi-c3-rgb))); z-index:9999;transform-origin:left; animation:gi-pb 0.55s ease-out forwards; pointer-events:none; } @keyframes gi-pb{ 0%{transform:scaleX(0);opacity:1;} 75%{transform:scaleX(0.92);opacity:1;} 100%{transform:scaleX(1);opacity:0;} } /* Glocken-Animation */ @keyframes gi-kb0{0%{transform:scale(1) translate(0%,0%);}100%{transform:scale(1.12) translate(-3%,-2%);}} @keyframes gi-bell-ring{ 0%,100%{transform:rotate(0);} 15%{transform:rotate(-18deg);} 35%{transform:rotate(16deg);} 55%{transform:rotate(-10deg);} 75%{transform:rotate(8deg);} 90%{transform:rotate(-4deg);} } .gi-bell-ring{ animation:none; transform-origin:top center; display:inline-block; } /* Desktop: Pill = nur #pageHeaderPanel (Nav + User-Icons). Logo scrollt weg wie Original. */ @media(min-width:769px) and (orientation:landscape){ /* mainMenu + Dropdown-Items: transparent damit ::before-Glas durchscheint */ #pageHeaderPanel .mainMenu, #pageHeaderPanel .mainMenu li, #pageHeaderPanel .mainMenu > li > a, #pageHeaderPanel nav, #pageHeaderPanel .mainMenu .activeMenuItem > a, #pageHeaderPanel .mainMenu li:hover > a{ background:transparent!important; background-color:transparent!important; box-shadow:none!important; } /* Keine blauen Active-/Hover-Highlights in Sidebar-Thread-Listen auf Desktop */ ol.sidebarList li,ol.sidebarList li *, .wbbSidebarThreadList li,.wbbSidebarThreadList li *, ol.sidebarList li.active>a,ol.sidebarList li.activeMenuItem>a,ol.sidebarList li.current>a, .sidebarListItem,.sidebarListItem a,.sidebarListItem div,.sidebarListItem h3{ background:transparent!important;background-color:transparent!important;box-shadow:none!important; } /* bfcache-Fix: :hover/:active Farbe in Sidebar überschreiben (WKWebView behält :hover nach Back-Navigation) */ ol.sidebarList a:hover,ol.sidebarList a:active, .sidebarListItem a:hover,.sidebarListItem a:active, .sidebarListItem__link:hover,.sidebarListItem__link:active, ol.sidebarList a:hover *,ol.sidebarList a:active *, .sidebarListItem a:hover *,.sidebarListItem a:active *{ color:inherit!important; } /* Header im normalen Seitenfluss — kein fixed mehr */ .pageHeader,#pageHeader{ position:static!important; top:auto!important;left:auto!important;right:auto!important; padding:0!important; /* Schiebt Logo unter das Panel-Pill: pill-h(~66) + gap(12) */ margin-top:calc(env(safe-area-inset-top,0px) + 78px)!important; border-radius:0!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; background:transparent!important; box-shadow:none!important; z-index:auto!important; overflow:visible!important; } /* Menü Links/Rechts (data-gi-menu-pos, von der App gesetzt): #pageHeaderPanel wird dabei zur vertikalen Seitenleiste umgebaut (gi-client.js), sitzt NICHT mehr oben -- die obige 78px- Reservierung ging bislang unverändert von "Pille immer oben" aus und ließ dadurch viel zu viel Freiraum über der ersten Box (Nutzer-Report 2026-09-18, "Ungelesen"-Seite, Querformat mit Menü rechts). Nur normale Safe-Area-Reservierung nötig, kein Pillen-Abstand. */ html[data-gi-menu-pos="left"] .pageHeader,html[data-gi-menu-pos="left"] #pageHeader, html[data-gi-menu-pos="right"] .pageHeader,html[data-gi-menu-pos="right"] #pageHeader{ margin-top:calc(env(safe-area-inset-top,0px) + 16px)!important; } /* Panel-Pill: fixed, overflow:visible damit WoltLab-Dropdowns aufklappen können */ #pageHeaderPanel,.pageHeaderPanel{ position:fixed!important; top:env(safe-area-inset-top,0px)!important; left:16px!important; right:16px!important; padding:8px 0!important; overflow:visible!important; z-index:200!important; border-radius:0!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; background:transparent!important; box-shadow:none!important; box-sizing:border-box!important; will-change:transform!important; contain:layout style!important; } /* Glass-Effekt via ::before — Transparent wie UGREEN: nur Blur, kein Tint. Nutzer-Wunsch 2026-09-06 ("moderner wirken", Vorbild Safari-Adressleiste): die Pille verdichtet sich jetzt beim Scrollen (mehr Blur + etwas mehr Tint/Schatten) statt statisch zu bleiben -- --gi-pill-* Variablen werden per JS (gi-client.js, _giPillScrollIntensity) live nachgezogen, Default-Werte hier entsprechen exakt dem alten, festen Zustand (ganz oben auf der Seite = unverändertes Aussehen). */ #pageHeaderPanel::before,.pageHeaderPanel::before{ content:''!important; position:absolute!important; inset:0!important; border-radius:22px!important; /* Nutzer-Wunsch 2026-09-11 ("mehr Inhalt durchscheinen lassen"): Default 24px -> 14px. */ backdrop-filter:blur(var(--gi-pill-blur,14px)) saturate(170%)!important; -webkit-backdrop-filter:blur(var(--gi-pill-blur,14px)) saturate(170%)!important; z-index:-1!important; pointer-events:none!important; transition:backdrop-filter .2s ease-out,-webkit-backdrop-filter .2s ease-out!important; } /* Dark Mode: kaum Tint, fast reiner Blur */ html[data-color-scheme="dark"] #pageHeaderPanel::before, html[data-color-scheme="dark"] .pageHeaderPanel::before{ background:rgba(14,14,22,var(--gi-pill-tint,0.04))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.225), 0 0 0 0.5px rgba(255,255,255,0.125), 0 10px 40px rgba(0,0,0,var(--gi-pill-shadow,0.35))!important; transition:background .2s ease-out,box-shadow .2s ease-out!important; } /* Light Mode: kaum Tint — Hintergrund scheint durch, wie UGREEN */ html[data-color-scheme="light"] #pageHeaderPanel::before, html[data-color-scheme="light"] .pageHeaderPanel::before{ background:rgba(255,255,255,var(--gi-pill-tint,0.10))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 0 0 1px rgba(0,0,0,0.09), 0 12px 32px rgba(0,0,0,var(--gi-pill-shadow,0.26))!important; transition:background .2s ease-out,box-shadow .2s ease-out!important; } /* Logo-Facade + Container: normaler Fluss, kein overflow-clip */ #pageHeaderFacade,.pageHeaderFacade, #pageHeaderLogo,.pageHeaderLogo{ position:static!important; overflow:visible!important; } /* Logo zentrieren */ #pageHeaderLogo,.pageHeaderLogo{ display:flex!important; justify-content:center!important; width:100%!important; } #pageHeaderLogo img,.pageHeaderLogo img{ overflow:visible!important; max-height:none!important; height:180px!important; width:auto!important; } #pageHeaderContainer,.pageHeaderContainer{ overflow:visible!important; padding-top:env(safe-area-inset-top,0px)!important; } /* Content folgt nach Logo im normalen Fluss — kein Extra-Padding nötig */ #pageContainer{ padding-top:env(safe-area-inset-top,0px)!important; } } /* Gradient auf (scrollt nicht → kein Repaint beim Scrollen, kein Ruckeln). body bleibt transparent. Mobile: html-BG hinter Statusbar/Dynamic Island → Vollschwarz/-weiß. */ :root{--gi-c1-rgb:225,70,100;--gi-c2-rgb:40,190,130;--gi-c3-rgb:20,145,225;} /* ── Theme-Akzente: Buttons, Kacheln, Badges, Box-Titel ─────────── */ html[data-color-scheme="dark"] .button.buttonPrimary,html[data-color-scheme="dark"] .button.buttonPrimary:active{background:#120d14!important;border-color:rgba(255,255,255,.10)!important;color:rgba(255,255,255,.88)!important;} @media(prefers-color-scheme:dark){html:not([data-color-scheme="light"]) .button.buttonPrimary,html:not([data-color-scheme="light"]) .button.buttonPrimary:active{background:#120d14!important;border-color:rgba(255,255,255,.10)!important;color:rgba(255,255,255,.88)!important;}} html[data-color-scheme="light"] .button.buttonPrimary,html[data-color-scheme="light"] .button.buttonPrimary:active{background:#ffffff!important;border-color:rgba(0,0,0,.10)!important;color:rgba(0,0,0,.78)!important;} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .button.buttonPrimary,html:not([data-color-scheme="dark"]) .button.buttonPrimary:active{background:#ffffff!important;border-color:rgba(0,0,0,.10)!important;color:rgba(0,0,0,.78)!important;}} .box:not(.mainMenu):not(.boxBorderless),.contentBox,.wbbBoardNode,.messageList,.articleContent,table.tableList,.wbbThreadList,.articleList,.userList,.messageGroupList{box-shadow:inset 5px 0 0 rgba(var(--gi-c1-rgb),0.4),0 0 0 1px rgba(var(--gi-c1-rgb),0.08),0 8px 36px rgba(var(--gi-c2-rgb),0.08)!important;} .boxTitle{background:linear-gradient(90deg,rgba(var(--gi-c1-rgb),0.10) 0%,rgba(var(--gi-c2-rgb),0.02) 50%,transparent 80%)!important;border-bottom-color:rgba(var(--gi-c1-rgb),0.15)!important;} .boxMenuLinkOutstandingItems,.sidebar .boxMenuLinkOutstandingItems{background:linear-gradient(135deg,rgb(var(--gi-c1-rgb)),rgb(var(--gi-c2-rgb)))!important;border:none!important;} html[data-gi-theme] .badge,html[data-gi-theme] .userBadge,html[data-gi-theme] .labelBadge,html[data-gi-theme] .wbbBoardNodeContainer__unreadCount,html[data-gi-theme] .countBadge{background:linear-gradient(135deg,rgb(var(--gi-c1-rgb)) 0%,rgb(var(--gi-c3-rgb)) 100%)!important;color:#fff!important;border:none!important;} /* Nutzer-Report 2026-09-08 ("hat auch Userranking & Co. mit rot eingefärbt, das sollte NUR die Menü-Pille betreffen"): die vorherige Fassung änderte pauschal ALLE .badge/.labelBadge/etc. -- das trifft auch fachfremde Badges wie Userranking-Tags. Jetzt gezielt nur die Badges INNERHALB der Menü-Pille (.userPanelItems), alles andere bleibt beim Theme-Farbverlauf. html[data-gi-theme]-Präfix nötig, damit die Spezifität die Zeile direkt darüber schlägt (sonst gewinnt trotz weiter unten stehender Regel die allgemeine .badge-Regel). */ html[data-gi-theme] .userPanelItems .badge,html[data-gi-theme] .userPanelItems .badgeUpdate,html[data-gi-theme] .userPanelItems .countBadge{background:#ff3b30!important;color:#fff!important;border:none!important;} /* ── Icon-Farbe (Nutzer-Wunsch 2026-09-10, Testphase nur für ihn selbst) ────────────────── "Standard" braucht keine Regel (currentColor, aktuelle Optik). "Theme": Pille + Post-Icons in der gewählten Akzentfarbe (c2, gleiche Variable wie Boxen-Akzente). "Bunt": jedes Icon eine eigene feste Farbe (Apple-"Einstellungen"-App-artige Palette) -- Pille über die festen
  • - IDs, Post-Icons über die feste gi-post-icon--Klasse (siehe gi-client.js _matchAction), nicht über :nth-of-type (das zählt nur Geschwister desselben Elternteils, hier aber pro Button immer genau 1 -- hätte JEDES Icon gleich eingefärbt). */ html[data-gi-icon-color="theme"] .gi-pill-icon,html[data-gi-icon-color="theme"] .gi-post-icon{color:rgb(var(--gi-c2-rgb))!important;} /* Nutzer-Wunsch 2026-09-13 (Rücknahme des 2026-09-10-Sonderfalls): die Glocke bekommt in "Bunt" jetzt auch eine feste Farbe wie alle anderen Pillen-Icons, statt der Theme-Akzent- farbe -- bei dunklen/neutralen Themes wirkte sie dadurch praktisch schwarz, im Widerspruch zu den sonst kräftigen Fixfarben ringsum. */ html[data-gi-icon-color="colorful"] #userNotifications .gi-pill-icon{color:#ff9500!important;} html[data-gi-icon-color="colorful"] #outstandingModeration .gi-pill-icon{color:#ff3b30!important;} /* Nutzer-Wunsch 2026-09-13: vordere Sprechblase blau, hintere grün statt beide einheitlich grün -- braucht zwei einzeln ansprechbare Pfade (gi-conv-back/-front, siehe gi-client.js PILL_ICONS.unreadConversations), ein einziges color: auf dem ganzen Icon reichte dafür nicht (beide Pfade erben sonst dieselbe currentColor). */ html[data-gi-icon-color="colorful"] #unreadConversations .gi-pill-icon .gi-conv-back{fill:#34c759!important;} html[data-gi-icon-color="colorful"] #unreadConversations .gi-pill-icon .gi-conv-front{fill:#007aff!important;} html[data-gi-icon-color="colorful"] #userPanelSearchButton .gi-pill-icon{color:#5ac8fa!important;} html[data-gi-icon-color="colorful"] #giRefreshLi .gi-pill-icon{color:#af52de!important;} html[data-gi-icon-color="colorful"] .gi-post-icon-antworten{color:#007aff!important;} html[data-gi-icon-color="colorful"] .gi-post-icon-zitieren{color:#af52de!important;} html[data-gi-icon-color="colorful"] .gi-post-icon-bearbeiten{color:#ff9500!important;} html[data-gi-icon-color="colorful"] .gi-post-icon-loeschen{color:#ff3b30!important;} html[data-gi-icon-color="colorful"] .gi-post-icon-melden{color:#ffcc00!important;} /* Nutzer-Wunsch 2026-09-10: die nativen WoltLab-Zahlen-Badges INNERHALB der Menü-Pille komplett ausgeblendet -- ersetzt durch den Glow-Effekt unten (.gi-menu-glow). Muss NACH der früheren ".userPanelItems .badge{display:inline-flex}"-Regel weiter oben stehen (gleiche Spezifität, spätere Regel gewinnt), betrifft NUR die Pille -- .boxMenuLinkOutstandingItems (Sidebar) und .wbbBoardNodeContainer__badge (Board-Liste) bleiben normale, sichtbare Zahlen-Badges. */ .userPanelItems .badge,.userPanelItems .badgeUpdate{display:none!important;} /* Nutzer-Wunsch 2026-09-10 ("weg vom roten Kreis mit weißer Zahl, kräftiger zum Theme passender Glow, komplett ohne Zahl -- man landet beim Antippen ohnehin dort, wo sie steht"): ersetzt den früheren Logo-Kreis-Badge (gi-client.js, burgerDot) UND die Glocken/Moderation/ Konversationen-Badges (_giBadgeFix) einheitlich. drop-shadow statt box-shadow, damit sowohl das transparente Logo-PNG als auch die eigenen SVG-Icons (.gi-pill-icon) exakt entlang ihrer tatsächlichen Silhouette leuchten statt ein Rechteck drumherum zu bekommen. Zwei gestapelte drop-shadows (enger/kräftiger + weiter/weicher) für Tiefe. Nutzer-Report ("viel zu schwach, wenn er denn überhaupt da ist, soll für ALLE Icons gelten"): erste Fassung war sowohl in der Auflösung (4-7px/11-17px Blur) als auch im Kontrast (0.65-1.0 Deckkraft) zu zaghaft, dazu bisher NUR aufs Logo beschränkt -- jetzt spürbar kräftiger UND auf Glocke/Moderation/Konversationen ausgeweitet (_giBadgeFix() schaltet die Klasse dort an, siehe dortiger Kommentar). Klasse entsprechend von "gi-burger-glow" auf das allgemeinere "gi-menu-glow" umbenannt. Nutzer-Report ("Glow jetzt sichtbar, aber ohne kräftige Farbe funktioniert das nicht, bau Rot mit ein"): die Theme-Akzentfarbe (--gi-c1-rgb/--gi-c2-rgb) kann je nach gewähltem Theme sehr zurückhaltend/neutral ausfallen (z.B. Grau beim "Neutral"-Theme) -- als reines "Achtung, neu"-Signal fehlte dadurch der Kontrast, den ein Aufmerksamkeits-Hinweis braucht. Fest auf Rot umgestellt (dieselbe Farbe wie überall sonst in der App für "ungelesen", z.B. Sidebar/Board-Badges) statt der variablen Theme-Farbe -- zwei leicht unterschiedliche Rottöne (reines Rot innen, wärmeres Rot-Orange außen) für Tiefe statt eines flachen Farbtons. Nutzer-Report ("zu subtil, sieht nach Grafikfehler aus, mehr Rot, mehr Pumpen"): reine Leuchtkraft-Änderung ohne echte Bewegung wirkte wie ein Render-Artefakt statt wie eine bewusste Animation. Deutlich kräftigerer Blur/Deckkraft UND zusätzlich ein echtes Pulsieren der GRÖSSE (transform:scale, nicht nur der Leuchtkraft) -- das eindeutig sichtbare "Atmen" macht sofort klar, dass es Absicht ist, kein Fehler. */ /* Nutzer-Wunsch 2026-09-10 ("bei 'Null' starten und bei '100' stoppen"): bisher pendelte der Puls zwischen einer bereits sichtbaren Grundleuchtkraft (0%/100%) und einer stärkeren Spitze (50%) -- nie wirklich AUS. Jetzt ein echtes Ein-/Ausatmen: 0%/100% = komplett unsichtbar (kein Glow, Ausgangsgröße), 50% = volle Stärke (bisheriger Spitzenwert). */ /* Nutzer-Wunsch 2026-09-11 ("pumpenden Glow für neue Nachrichten wieder raus, das ist zu unruhig"): giBurgerGlow/giBurgerHalo-Keyframes + die .gi-menu-glow-Animation/::before-Halo komplett entfernt -- die Ziffer (.gi-count-num, s.u.) zeigt neue Einträge jetzt allein an, ohne pulsierenden Effekt drumherum. Nutzer-Wunsch 2026-09-13: auch der verbliebene statische Glow (.gi-count-num text-shadow) sowie die gi-menu-glow-Klasse selbst (gi-client.js) komplett entfernt -- keinerlei Leucht-Effekt mehr um die Zahl, nur noch Füllfarbe + Kontrastrand. Nutzer-Wunsch 2026-09-11 ("nicht rot, sondern weiß bei dunklem Menü und schwarz bei hellem"): Füllfarbe von festem Rot auf theme-abhängiges Weiß/Schwarz umgestellt; der Kontrastrand (-webkit-text-stroke) bleibt bestehen und läuft jetzt einfach umgekehrt (dunkler Rand um die weiße Ziffer im Dark Mode, heller Rand um die schwarze Ziffer im Light Mode). */ /* Nutzer-Wunsch 2026-09-11 ("einen roten Glow, ohne pumpen"): statischer (nicht animierter) Leucht-Effekt direkt um die Ziffer selbst statt um das ganze Icon -- zwei gestapelte text-shadow-Ebenen (enger, kräftiger Kern + weiterer, weicherer Schein), keine Animation/ keine Keyframes. */ /* Nutzer-Frage 2026-09-11 ("exakt auf gleicher Höhe?"): per Diagnose-Beacon gemessen -- war es NICHT. Fester top:1px lag bei unterschiedlich hohen Icon-Containern (Logo-Button 28px, Glocke/Moderation/Konversationen 32px) trotz identisch zentrierter Icons 2px auseinander. top:calc(50% - 13px) verankert stattdessen an der (bei allen Icons übereinstimmenden) vertikalen Container-MITTE, bleibt also unabhängig von der Container-Höhe konsistent. */ /* Nutzer-Wunsch 2026-09-14 ("wieder eine kleine rote Bubble"): reine Ziffer ohne eigene Fläche (seit 09-13) ging im Kontrast der Pille manchmal unter -- jetzt wieder eine kleine rote Badge-Blase dahinter, wie ein natives iOS-Benachrichtigungs-Badge. Kein Glow (der ist bewusst raus, siehe Kommentare oben), nur eine solide Fläche + weicher Schatten für Pop.*/ .gi-count-num{ position:absolute;top:calc(50% - 15px);right:-4px;min-width:20px;height:20px;padding:0 5px; box-sizing:border-box;display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:800;line-height:1;border-radius:999px; pointer-events:none;z-index:4;font-variant-numeric:tabular-nums; letter-spacing:-0.2px;color:#ffffff;background:#ff3b30; box-shadow:0 2px 6px rgba(0,0,0,0.35),0 0 0 0.5px rgba(0,0,0,0.15); } /* Nutzer-Wunsch 2026-09-17 ("icon Block für Glocke und co unter den Icons mit Text"): iPad/Mac- Sidebar (Menüposition links/rechts) -- statt nackter Icons mit einem am Icon schwebenden Zahlen-Badge (.gi-count-num, s.o., war für die horizontale Pille gedacht und kollidierte in der schmalen 220px-Spalte sichtbar mit den Nav-Links darüber) jetzt lesbare Zeilen (Icon+Text, wie eine typische iPad-App-Sidebar), klar als eigener Block unter den Nav-Links abgesetzt (Trennlinie per border-top). Aktiviert/Label-Text kommt aus gi-client.js (document.body.classList.toggle('gi-side-sidebar',...) + _giApplySideIconLabels()). */ body.gi-side-sidebar .userPanelItems{border-top:1px solid rgba(0,0,0,0.08);padding-top:20px!important;margin-top:4px;} html[data-color-scheme="dark"] body.gi-side-sidebar .userPanelItems{border-top-color:rgba(255,255,255,0.10);} @media (prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) body.gi-side-sidebar .userPanelItems{border-top-color:rgba(255,255,255,0.10);} } body.gi-side-sidebar .userPanelItems>li{width:100%!important;} body.gi-side-sidebar .userPanelItems>li>a, body.gi-side-sidebar .userPanelItems>li>button{ width:100%!important;justify-content:flex-start!important;gap:14px!important; } body.gi-side-sidebar .userPanelItems .gi-side-label{ font-size:15px;font-weight:600;white-space:nowrap;letter-spacing:-.1px;color:rgba(0,0,0,0.88); } html[data-color-scheme="dark"] body.gi-side-sidebar .userPanelItems .gi-side-label{color:rgba(255,255,255,0.94);} @media (prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) body.gi-side-sidebar .userPanelItems .gi-side-label{color:rgba(255,255,255,0.94);} } /* Zahlen-Badge: von "schwebt absolut übers Icon" auf "steht als eigenes Element rechts in der Zeile" umgestellt -- passt zur neuen Icon+Text-Zeile, statt sie zu verdecken. */ body.gi-side-sidebar .userPanelItems .gi-count-num{ position:static!important;margin-left:auto!important;top:auto!important;right:auto!important; flex:0 0 auto; } /* Nutzer-Wunsch 2026-09-11 (Vorschlag 2, "Long-Press-Vorschau"): kleine Glas-Bubble, die beim Antippen-und-Halten von Glocke/Moderation/Konversationen kurz die (seit dem Glow-Umbau nicht mehr sichtbare) Zahl anzeigt, ohne zu navigieren -- siehe gi-client.js. */ .gi-peek-tip{ position:fixed;z-index:100050;padding:8px 14px;border-radius:14px;font-size:13px;font-weight:600; white-space:nowrap;pointer-events:none;opacity:0;transform:scale(.85); transition:opacity .18s ease,transform .22s cubic-bezier(.34,1.56,.64,1); } .gi-peek-tip-show{opacity:1;transform:scale(1);} /* Nutzer-Wunsch 2026-09-13: gleicher Grund wie beim Kontrollzentrum-Dropdown -- position:fixed heißt, dahinter kann beliebiger Seiteninhalt liegen, ein Blur-Hintergrund kann Kontrast gegen die feste Textfarbe (die Zahl) da nicht garantieren. Blickdicht statt Glas. */ html[data-color-scheme="dark"] .gi-peek-tip{background:rgb(28,28,30);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,0.4);} @media(prefers-color-scheme:dark){html:not([data-color-scheme="light"]) .gi-peek-tip{background:rgb(28,28,30);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,0.4);}} html[data-color-scheme="light"] .gi-peek-tip{background:rgb(242,242,247);color:rgba(0,0,0,0.85);box-shadow:0 8px 24px rgba(0,0,0,0.18);} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .gi-peek-tip{background:rgb(242,242,247);color:rgba(0,0,0,0.85);box-shadow:0 8px 24px rgba(0,0,0,0.18);}} /* Nutzer-Wunsch 2026-09-10 ("Menü noch mehr 'shiny'"): ein Licht-Sweep-Overlay (.gi-pill-shine, mix-blend-mode:overlay) wurde hier versucht -- Nutzer-Report ("kaputt auf dem iPhone", doppelte/geisterhafte Kreis-Artefakte am Logo) zeigte einen Rendering-Fehler, vermutlich die bekannte Unverträglichkeit von mix-blend-mode mit backdrop-filter in Safari/WKWebView. Sofort wieder entfernt (siehe gi-client.js für den ebenfalls entfernten JS-Teil). Die Glanzkanten-Verstärkung (dkShadowPill/ltShadowPill, gi-client.js) bleibt bestehen. */ .messageList>.message+.message,.messageList>li+li{margin-top:0!important;padding-top:24px!important;} html[data-color-scheme="dark"] .messageList>.message+.message,html[data-color-scheme="dark"] .messageList>li+li{border-top:2px solid rgba(255,255,255,0.18)!important;} @media(prefers-color-scheme:dark){html:not([data-color-scheme="light"]) .messageList>.message+.message,html:not([data-color-scheme="light"]) .messageList>li+li{border-top:2px solid rgba(255,255,255,0.18)!important;}} html[data-color-scheme="light"] .messageList>.message+.message,html[data-color-scheme="light"] .messageList>li+li{border-top:2px solid rgba(0,0,0,0.18)!important;} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .messageList>.message+.message,html:not([data-color-scheme="dark"]) .messageList>li+li{border-top:2px solid rgba(0,0,0,0.18)!important;}} html{ background: radial-gradient(ellipse 75% 55% at 31% 8%, rgba(var(--gi-c1-rgb),0.113) 0%, transparent 65%), radial-gradient(ellipse 74% 52% at 50% 8%, rgba(var(--gi-c2-rgb),0.10) 0%, transparent 65%), radial-gradient(ellipse 80% 62% at 72% 7%, rgba(var(--gi-c3-rgb),0.163) 0%, transparent 65%), #ffffff !important; background-attachment:fixed!important; } html[data-color-scheme="dark"]{ background: radial-gradient(ellipse 75% 55% at 31% 8%, rgba(var(--gi-c1-rgb),0.138) 0%, transparent 65%), radial-gradient(ellipse 74% 48% at 50% 8%, rgba(var(--gi-c2-rgb),0.113) 0%, transparent 65%), radial-gradient(ellipse 80% 60% at 72% 7%, rgba(var(--gi-c3-rgb),0.163) 0%, transparent 65%), #07070f !important; background-attachment:fixed!important; } /* Nutzer-Report 2026-09-15 ("weißer Blitz beim Zurück-Wischen, sollte schwarz sein"): DAS war die eigentliche Ursache, nicht die WKWebView-Wisch-Mechanik (dort wurden zuvor drei native Fixversuche ohne jede Wirkung gemacht, siehe WebView.swift-Historie). Die obige Grundregel html{background:...#ffffff} greift IMMER beim allerersten Rendern -- das dunkle Overwrite oben kommt erst über [data-color-scheme="dark"], ein Attribut, das JS erst NACH dem ersten Paint setzt. Jede Seite (auch das Ziel eines Zurück-Wisches) ist dadurch kurz zwangsläufig weiß, bis das JS greift -- klassisches FOUC. Genau dasselbe Muster (Attribut-Selektor + @media(prefers-color-scheme)-Fallback für den blinden Fleck VOR dem JS) wird im Rest dieser Datei längst konsequent für jede andere Dark-Mode-Regel verwendet (siehe z.B. .gi-peek-tip oben) -- nur ausgerechnet bei der wichtigsten Regel (dem Grundhintergrund selbst) hier gefehlt. Fallback ergänzt, sodass bereits der ALLERERSTE Paint (vor jedem JS) stimmt. */ @media(prefers-color-scheme:dark){ html:not([data-color-scheme="light"]){ background: radial-gradient(ellipse 75% 55% at 31% 8%, rgba(var(--gi-c1-rgb),0.138) 0%, transparent 65%), radial-gradient(ellipse 74% 48% at 50% 8%, rgba(var(--gi-c2-rgb),0.113) 0%, transparent 65%), radial-gradient(ellipse 80% 60% at 72% 7%, rgba(var(--gi-c3-rgb),0.163) 0%, transparent 65%), #07070f !important; background-attachment:fixed!important; } } /* Alle Header-Hintergründe entfernen */ #pageHeader,.pageHeader, #pageHeaderContainer,.pageHeaderContainer, #pageHeaderFacade,.pageHeaderFacade, #pageHeaderPanel,.pageHeaderPanel{ background:transparent!important; background-color:transparent!important; box-shadow:none!important; border-bottom:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* body transparent — Gradient kommt von html */ html[data-color-scheme="dark"] body, html[data-color-scheme="light"] body, body{ background:transparent!important; min-height:100vh!important; /* Nutzer-Report 2026-09-12 ("Home"-Seite, Rubberband "springt nicht zurück"): per rekursivem Diagnose-Walk bestätigt -- selbst ist 146px höher als window.innerHeight, obwohl kein einziges Kind-Element so weit reicht. Klassischer iOS-WKWebView-"100vh"-Bug: 100vh weicht dort vom tatsächlichen sichtbaren Bereich ab. War vorher unsichtbar, weil der (jetzt auf der Home-Seite versteckte) Footer genau diesen Bereich mit echtem Inhalt gefüllt hat -- ohne ihn wird daraus echter, aber leerer Scroll-Bereich, der (weil kein echtes Overscroll) nie zurückfedert. 100dvh brachte KEINE Änderung (Nutzer-Report) -- in dieser WKWebView offenbar identisch fehlerhaft wie 100vh, kein Dynamic-Toolbar-Fall wie in Safari. Robusterer Ersatz: --gi-real-vh wird per JS aus window.innerHeight gesetzt (siehe gi-client.js), das ist nachweislich der korrekte Wert (der Diagnose-Walk fand darin keinen einzigen überstehenden Nachfahren). var() mit 100vh-Fallback, falls JS noch nicht gelaufen ist. */ min-height:calc(var(--gi-real-vh, 100vh))!important; } /* Nutzer-Report 2026-09-16 ("Footer erscheint mitten im Menü auf Home, aber nicht auf Übersicht"): per Diagnose-Beacon nachgemessen -- kein kaputter Sticky-Footer, sondern ein Grenzfall. #main ist nativ flex:1 0 auto (Sticky-Footer-Technik, #pageContainer=flex-column), das streckt #main aber nur, wenn die Summe aller Kinder UNTER der min-height des Containers liegt -- übersteigt der tatsächliche Inhalt bereits die Bildschirmhöhe (bei Home aktuell nur ~1430px vs. 1254px Viewport, also nur ~176px Scroll-Puffer insgesamt), greift das Strecken gar nicht erst, obwohl der Footer dabei trotzdem schon ein Stück ins erste sichtbare Fenster hineinragt -- genau dort, wo die feste Menüleiste sitzt. Auf der Übersicht fällt das nie auf (dort ist der Inhalt ohnehin um ein Vielfaches länger als der Bildschirm). Explizite Mindesthöhe auf #main selbst (statt sich nur auf die automatische Flex-Verteilung zu verlassen) garantiert: der Footer beginnt NIE innerhalb des ersten sichtbaren Fensters, unabhängig davon, wie wenig Inhalt gerade da ist. */ #main{ min-height:calc(var(--gi-real-vh, 100vh))!important; } /* Gradient-Scrim oberhalb des Pills: Inhalt scrollt in Farbe rein, kein zweites backdrop-filter (würde Safari-Compositing brechen). body::before = fixed Gradient von Hintergrundfarbe → transparent, sitzt zwischen Inhalt (z-index auto) und Pill (z-index 200). */ body{ padding-bottom:env(safe-area-inset-bottom,0px)!important; } /* Mobile: Liquid Glass Pill (v84) — .pageHeader ist WoltLabs fixed Mobile-Header */ @media(max-width:768px),(orientation:portrait){ /* Logo wird per JS zu body verschoben und unterhalb der Pill positioniert */ .pageHeaderLogo,#pageHeaderLogo{ display:none!important; } /* Pill: visuell als Glas-Pille mit gesättigtem Hintergrund (sichtbar auf dunklem BG) */ .pageHeader,#pageHeader{ left:6px!important; right:6px!important; top:env(safe-area-inset-top,20px)!important; border-radius:22px!important; overflow:visible!important; backdrop-filter:blur(28px) saturate(180%)!important; -webkit-backdrop-filter:blur(28px) saturate(180%)!important; z-index:200!important; border:none!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:center!important; gap:28px!important; padding:10px 20px!important; height:auto!important; min-height:50px!important; box-sizing:border-box!important; /* Fallback = Dark-Gradient */ background:linear-gradient( 180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.16) 12%, rgba(28,32,50,0.82) 40%, rgba(14,16,28,0.96) 100% )!important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5625), inset 0 -1px 0 rgba(255,255,255,0.125), 0 0 0 1px rgba(255,255,255,0.275), 0 10px 40px rgba(0,0,0,0.6875), 0 2.5px 10px rgba(0,0,0,0.375)!important; } /* Dark Mode */ html[data-color-scheme="dark"] .pageHeader, html[data-color-scheme="dark"] #pageHeader{ background:linear-gradient( 180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.16) 12%, rgba(28,32,50,0.82) 40%, rgba(14,16,28,0.96) 100% )!important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5625), inset 0 -1px 0 rgba(255,255,255,0.125), 0 0 0 1px rgba(255,255,255,0.275), 0 10px 40px rgba(0,0,0,0.6875), 0 2.5px 10px rgba(0,0,0,0.375)!important; } /* Light Mode: gleicher Blur/Sättigung wie Dark, heller Gradient mit Kontrast */ html[data-color-scheme="light"] .pageHeader, html[data-color-scheme="light"] #pageHeader{ background:linear-gradient( 180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.55) 18%, rgba(245,246,250,0.38) 55%, rgba(238,240,248,0.52) 100% )!important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,1.0), inset 0 -1px 0 rgba(0,0,0,0.125), 0 0 0 1px rgba(0,0,0,0.175), 0 10px 40px rgba(0,0,0,0.225), 0 2.5px 10px rgba(0,0,0,0.125)!important; } .pageHeaderContainer,#pageHeaderContainer{ display:none!important; } /* WoltLab-Menü-Overlay: startet erst unterhalb der Pille */ .pageMenuContainer{ top:calc(env(safe-area-inset-top,0px) + 80px)!important; z-index:250!important; } .pageHeader,#pageHeader{ z-index:400!important; } } /* Sidebar- und Bottom-Boxen: Containers transparent — hohe Spezifität um WoltLab-Grau zu schlagen */ .boxesSidebarRight, .boxesSidebarLeft, .sidebar, .boxesBottom, .boxesTop{ background:transparent!important; background-color:transparent!important; } html aside.boxesSidebarRight,html aside.boxesSidebarLeft,html div.sidebar, html .boxesBottom,html .boxesTop{ background:transparent!important; background-color:transparent!important; } html body aside.boxesSidebarRight,html body aside.boxesSidebarLeft,html body div.sidebar{ background:transparent!important; background-color:transparent!important; } /* Rechte Sidebar: kein eigener Hintergrund — Boxen bringen ihren eigenen */ .boxesSidebarRight,.sidebar.boxesSidebarRight{ background:transparent!important; background-color:transparent!important; } html:not([data-color-scheme="dark"]) .boxesSidebarRight, html:not([data-color-scheme="dark"]) .sidebar.boxesSidebarRight{ background:transparent!important; background-color:transparent!important; } html[data-color-scheme="light"] .boxesSidebarRight, html[data-color-scheme="light"] .sidebar.boxesSidebarRight{ background:transparent!important; background-color:transparent!important; } @media(prefers-color-scheme:light){ html:not([data-color-scheme="dark"]) .boxesSidebarRight, html:not([data-color-scheme="dark"]) .sidebar.boxesSidebarRight{ background:transparent!important; background-color:transparent!important; } } .boxesSidebarRight .box:not(.boxBorderless), .boxesSidebarLeft .box:not(.boxBorderless), .sidebar .box:not(.boxBorderless), .boxesBottom .box:not(.boxBorderless), .boxesTop .box:not(.boxBorderless){ border:none!important; background:linear-gradient(135deg,#ffffff 0%,#f0f4ff 100%)!important; background-color:transparent!important; border-radius:20px!important; overflow:hidden!important; box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 30px -10px rgba(0,0,0,.16)!important; } html[data-color-scheme="dark"] .boxesSidebarRight .box:not(.boxBorderless), html[data-color-scheme="dark"] .boxesSidebarLeft .box:not(.boxBorderless), html[data-color-scheme="dark"] .sidebar .box:not(.boxBorderless), html[data-color-scheme="dark"] .boxesBottom .box:not(.boxBorderless), html[data-color-scheme="dark"] .boxesTop .box:not(.boxBorderless){ background:transparent!important; background-color:transparent!important; } @media (prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) .boxesSidebarRight .box:not(.boxBorderless), html:not([data-color-scheme="light"]) .boxesSidebarLeft .box:not(.boxBorderless), html:not([data-color-scheme="light"]) .sidebar .box:not(.boxBorderless), html:not([data-color-scheme="light"]) .boxesBottom .box:not(.boxBorderless), html:not([data-color-scheme="light"]) .boxesTop .box:not(.boxBorderless){ background:transparent!important; background-color:transparent!important; } } html[data-color-scheme="light"] .sidebar.boxesSidebarRight section.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="light"] .sidebar.boxesSidebarRight div.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="light"] .boxesSidebarLeft section.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="light"] .boxesSidebarLeft div.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="light"] .boxesBottom section.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="light"] .boxesBottom div.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="light"] .boxesTop section.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="light"] .boxesTop div.box:not(.mainMenu):not(.boxBorderless){box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(0,0,0,.125),0 0 0 1px rgba(0,0,0,.175),0 10px 40px rgba(0,0,0,.225),0 2.5px 10px rgba(0,0,0,.125)!important;} html:not([data-color-scheme="dark"]) .sidebar.boxesSidebarRight section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .sidebar.boxesSidebarRight div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesSidebarLeft section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesSidebarLeft div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesBottom section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesBottom div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesTop section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesTop div.box:not(.mainMenu):not(.boxBorderless){box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(0,0,0,.125),0 0 0 1px rgba(0,0,0,.175),0 10px 40px rgba(0,0,0,.225),0 2.5px 10px rgba(0,0,0,.125)!important;} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .sidebar.boxesSidebarRight section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .sidebar.boxesSidebarRight div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesSidebarLeft section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesSidebarLeft div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesBottom section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesBottom div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesTop section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesTop div.box:not(.mainMenu):not(.boxBorderless){box-shadow:inset 0 1.5px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(0,0,0,.125),0 0 0 1px rgba(0,0,0,.175),0 10px 40px rgba(0,0,0,.225),0 2.5px 10px rgba(0,0,0,.125)!important;}} /* Sidebar-Boxen: gleiche Karte wie RecentActivity — Dark + Light (hohe Spezifität 0,6,1) */ html[data-color-scheme="dark"] .sidebar.boxesSidebarRight section.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="dark"] .sidebar.boxesSidebarRight div.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="dark"] .boxesSidebarLeft section.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="dark"] .boxesSidebarLeft div.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="dark"] .boxesBottom section.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="dark"] .boxesTop section.box:not(.mainMenu):not(.boxBorderless){background:#120d14!important;box-shadow:0 1px 3px rgba(0,0,0,.20),0 18px 36px -12px rgba(0,0,0,.45)!important;border-radius:20px!important;overflow:hidden!important;} html:not([data-color-scheme="light"]) .sidebar.boxesSidebarRight section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="light"]) .sidebar.boxesSidebarRight div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="light"]) .boxesSidebarLeft section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="light"]) .boxesSidebarLeft div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="light"]) .boxesBottom section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="light"]) .boxesTop section.box:not(.mainMenu):not(.boxBorderless){background:#120d14!important;box-shadow:0 1px 3px rgba(0,0,0,.20),0 18px 36px -12px rgba(0,0,0,.45)!important;border-radius:20px!important;overflow:hidden!important;} @media(prefers-color-scheme:dark){html:not([data-color-scheme="light"]) .sidebar.boxesSidebarRight section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="light"]) .sidebar.boxesSidebarRight div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="light"]) .boxesSidebarLeft section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="light"]) .boxesSidebarLeft div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="light"]) .boxesBottom section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="light"]) .boxesTop section.box:not(.mainMenu):not(.boxBorderless){background:#120d14!important;box-shadow:0 1px 3px rgba(0,0,0,.20),0 18px 36px -12px rgba(0,0,0,.45)!important;border-radius:20px!important;overflow:hidden!important;}} html[data-color-scheme="light"] .sidebar.boxesSidebarRight section.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="light"] .sidebar.boxesSidebarRight div.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="light"] .boxesSidebarLeft section.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="light"] .boxesSidebarLeft div.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="light"] .boxesBottom section.box:not(.mainMenu):not(.boxBorderless),html[data-color-scheme="light"] .boxesTop section.box:not(.mainMenu):not(.boxBorderless){background:#ffffff!important;box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 30px -10px rgba(0,0,0,.16)!important;border-radius:20px!important;overflow:hidden!important;} html:not([data-color-scheme="dark"]) .sidebar.boxesSidebarRight section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .sidebar.boxesSidebarRight div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesSidebarLeft section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesSidebarLeft div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesBottom section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesTop section.box:not(.mainMenu):not(.boxBorderless){background:#ffffff!important;box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 30px -10px rgba(0,0,0,.16)!important;border-radius:20px!important;overflow:hidden!important;} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .sidebar.boxesSidebarRight section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .sidebar.boxesSidebarRight div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesSidebarLeft section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesSidebarLeft div.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesBottom section.box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesTop section.box:not(.mainMenu):not(.boxBorderless){background:#ffffff!important;box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 30px -10px rgba(0,0,0,.16)!important;border-radius:20px!important;overflow:hidden!important;}} /* Sidebar-Container transparent — kein eckiger Rahmen um die Boxen */ .boxesSidebarRight,.boxesSidebarLeft,.boxesBottom,.boxesTop,.sidebar{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;} aside.sidebar.boxesSidebarRight,aside.sidebar.boxesSidebarRight>.boxContainer,aside.sidebar.boxesSidebarRight>.boxesInner,aside.sidebar.boxesSidebarRight .boxContainer,aside.sidebar.boxesSidebarRight .boxesInner,.boxesSidebarLeft>.boxContainer,.boxesSidebarLeft>.boxesInner,.boxesSidebarLeft .boxContainer,.boxesSidebarLeft .boxesInner{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;} /* aside overflow:visible — sonst werden box-shadows der Kind-Boxen abgeclippt */ aside.sidebar.boxesSidebarRight{overflow:visible!important;} /* iPad landscape: Sidebar-Oberkante bündig mit Hauptinhalt. WoltLab selbst setzt auf .boxesContentTop ein margin-top:40px, das die Sidebar nie mitbekommen hat -- per vollständigem DOM/Style-Schnappschuss am echten Gerät verifiziert (nicht geraten): das ist die GESAMTE Differenz, ein fester, von Box-Typ/Inhalt unabhängiger Wert. Alle bisherigen JS-Messversuche (_giDesktopAlign) litten darunter, dass sie diesen konstanten Wert mit wechselnden, teils noch nicht fertigen Zwischenzuständen verwechselten. */ /* Nutzer-Report 2026-09-28 (iPad-App am Mac, "Box oben rechts wandert 2-3x", per Diagnose-Beacon über mehrere Runden kalibriert): ein einzelner Container-weiter padding-top-Wert ging zunächst von einem festen, box-typ-unabhängigen Versatz aus (Messung mit "Neu"/NewestMembers als erste Box ergab 10px). Als NACH dem Übersicht-AJAX-Umbau "Diskussionen"/LatestPosts als erste Box gemessen wurde, zeigte sich aber ein ANDERER Versatz (40px) -- die beiden Box-Typen haben offenbar unterschiedliches internes Padding (LatestPosts nutzt eine per JS gegen die native Liste ausgetauschte Chip-Darstellung, siehe _giRebuildThreadChips() in gi-client.js). Ein Container-weiter Wert kann beide nie gleichzeitig treffen. Jetzt stattdessen PRO Box-Typ kalibriert, nur auf der per _giMarkFirstSidebarBox() (gi-client.js) markierten, tatsächlich ersten sichtbaren Box -- reine Klassen-Markierung, kein gemessener Pixel-Wert, also immun gegen das ursprüngliche Timing-Wandern. */ @media(min-width:769px) and (orientation:landscape){ aside.sidebar.boxesSidebarRight [data-box-identifier="com.woltlab.wcf.NewestMembers"].gi-first-sidebox{margin-top:10px!important;} aside.sidebar.boxesSidebarRight [data-box-identifier="com.woltlab.wbb.LatestPosts"].gi-first-sidebox{margin-top:0px!important;} } /* Menü links/rechts (App-eigene vertikale Sidebar, data-gi-menu-pos): WoltLabs natives margin-top:40px auf .boxesContentTop (s.o.) war NUR für den Ausgleich mit aside.sidebar gedacht -- die App-Sidebar hier ist eine komplett eigene, fest positionierte Spalte ohne Bezug zu diesem nativen Höhen-Ausgleich. Per Diagnose-Beacon bestätigt (Nutzer-Report 2026-09-18, "Übersicht/Forum/Artikel sitzen im Querformat zu tief"): dieser Wert war der verbliebene Rest-Überschuss, nachdem #pageContainer bereits korrigiert war. */ html[data-gi-menu-pos="left"] .boxesContentTop,html[data-gi-menu-pos="right"] .boxesContentTop{margin-top:0!important;} /* Nutzer-Report 2026-10-01 ("Abstand Hero Card -> nächste Box mal wieder zu gering, Mac und iPad"): Hero-Wrap (padding-bottom 6px, siehe Hero-HTML) war gegen WoltLabs nativen 40px-Abstand von .boxesContentTop kalibriert. Bei Menü links/rechts ist genau dieser Abstand oben auf 0 gesetzt -- bisher glich ein JS-Block (additive Live-Messung, einmal pro Seitenladung) den Rest aus und lag dabei wiederholt daneben (Messung während Lade-/Einblendphase, Wert blieb dauerhaft stehen). Jetzt fest: dieselben 40px direkt am Hero-Wrap (= normaler Box-Abstand), unabhängig von Timing/Messung. Bei Menü oben/unten bleibt es beim nativen 40px von .boxesContentTop (Margin-Collapsing). */ html[data-gi-menu-pos="left"] [data-gi-hero-wrap],html[data-gi-menu-pos="right"] [data-gi-hero-wrap]{margin-bottom:40px!important;} /* Nutzer-Report 2026-10-03 ("Abstand Artikel-Kachel -> UNN-Kachel zu gering"): zwei Hero-Wraps direkt hintereinander trennten nur die 6px padding-bottom (der 40px-Abstand kommt bei Menue oben/unten erst von .boxesContentTop NACH der letzten Karte). Bei Menue links/rechts liefert die Regel oben schon 40px. */ html:not([data-gi-menu-pos="left"]):not([data-gi-menu-pos="right"]) [data-gi-hero-wrap]~[data-gi-hero-wrap]{margin-top:26px!important;} /* Ist die erste Hero-Karte (z.B. "Neuester Artikel") weggeklickt (display:none), ist die naechste die erste SICHTBARE: kein 26px-Abstand nach oben mehr, sonst steht sie 26px unter der ersten Sidebar-Box (Nutzer-Report 2026-10-05, per align-probe gemessen: gap 26). Folgt dagegen eine sichtbare Karte davor, gilt wieder der Abstand. */ html:not([data-gi-menu-pos="left"]):not([data-gi-menu-pos="right"]) [data-gi-hero-wrap]:is([style*="display: none"],[style*="display:none"])~[data-gi-hero-wrap]{margin-top:0!important;} html:not([data-gi-menu-pos="left"]):not([data-gi-menu-pos="right"]) [data-gi-hero-wrap]:not([style*="display: none"]):not([style*="display:none"])~[data-gi-hero-wrap]{margin-top:26px!important;} /* Margin-Collapsing: die erste (sichtbare) Box in .boxesContentTop trägt ihr eigenes margin-top:40px unabhängig vom Container -- ein CSS-:first-child-Versuch hier scheiterte zuverlässig daran, dass bei individueller Nutzer-Box-Reihenfolge nicht zwingend die erste DOM-Box auch die erste SICHTBARE ist. Läuft jetzt stattdessen per JS auf die tatsächlich erste sichtbare Box (_giFixTopMarginForSideMenu() in gi-client.js, gleiches Muster wie _giFixSidebarAlign()). */ /* Nutzer-Report 2026-09-26 ("Übersicht sitzt bei Logo+Begrüßung an niedriger als Home"): mehrere JS-Timing-Ansätze (wrap.marginBottom additiv -> dokumentierter WebKit-Render-Lag-Bug, dann erste-Box.marginTop dynamisch berechnet -> ein dauerhaft aktiver MutationObserver setzte die Korrektur bei jeder Box-Änderung irgendwo auf der Seite wieder zurück) scheiterten alle an Timing/Observer-Kaskaden. Jetzt wie bei Home (.gi-fy-section:first-of-type{margin-top:-39px} weiter unten in dieser Datei): reiner, statischer CSS-Wert, kein JS berechnet mehr etwas -- _giFixTopMarginForSideMenu() markiert nur noch (per Klasse), WELCHE Box die tatsächlich erste sichtbare ist, den Korrekturwert selbst liefert ausschließlich diese CSS-Regel. Per Messung kalibriert. Erste Messung (-126px) ging noch von einer parallel laufenden, alten dynamischen wrap.marginBottom-Korrektur aus (Zielwert 15px) -- die lief inzwischen NICHT mehr parallel (in gi-client.js für diesen Fall bewusst deaktiviert, s. dort), wrap.marginBottom ist jetzt nachweislich 0. Nutzer-Report 2026-09-26 (Folgefehler: "Begrüßung immer noch verdeckt", per Panel bestätigt -- derselbe -89px-Wert ergab je nach Ungelesen-Listeninhalt (Anzahl/Reihenfolge angepinnter Themen ändert offenbar das Margin-Collapsing mit der box-eigenen Titel-Überschrift) rectTop 193px BEIM EINEN TEST und 245px beim ANDEREN -- eine Schwankung von >50px bei identischem CSS-Wert, also inhaltsabhängig, nicht timing-abhängig. Ein einzelner fixer Wert kann diese Content-Varianz nicht exakt treffen -- stattdessen genug Sicherheitsabstand: derselbe Wert wie Home (-39px), der in Homes eigenen Messungen zuverlässig im positiven (nicht überlappenden) Bereich blieb. Nur auf der echten Übersicht (Dashboard, NICHT Home) und nur wenn Logo/ Begrüßung sichtbar sind (data-gi-nothing-shown regelt den anderen Fall bereits per JS/ _giFixLogoTop()). */ body[data-page-identifier="com.woltlab.wcf.Dashboard"]:not([data-gi-home-page]):not([data-gi-nothing-shown]) .boxesContentTop .box.gi-first-box{margin-top:-39px!important;} /* Nutzer-Report 2026-10-01 ("Abstand Hero Card -> nächste Box zu gering, Mac und iPad", per Messung bestätigt: 7px statt 46px): die -39px oben ziehen die erste Box unter Logo/Begrüßung hoch. Steht aber eine SICHTBARE Hero-Karte dazwischen (Hero-Wrap direkt in #content, vor .boxesContentTop), ist die erste Box gar nicht mehr direkt unter dem Logo -- von WoltLabs 40px bleiben dann 1px + 6px Wrap-Padding = 7px. Dann kein Hochziehen (0): Abstand = nativer 40px-Abstand (collapsed mit dem Box-Margin) + 6px Wrap-Padding = 46px, wie im Seitenmenü-Fall. Das Ausblenden der Hero-Karte setzt nur display:none am Wrap (bleibt im DOM) -- ":not([style*=display: none])" macht die Regel dadurch live gültig/ungültig, ohne JS: ist die Karte weggeklickt, greift wieder die -39px-Regel oben. ID (#content) für höhere Spezifität gegenüber der Regel darüber. */ body[data-page-identifier="com.woltlab.wcf.Dashboard"]:not([data-gi-home-page]):not([data-gi-nothing-shown]) #content:has(> [data-gi-hero-wrap]:not([style*="display: none"]):not([style*="display:none"])) .boxesContentTop .box.gi-first-box{margin-top:0!important;} /* Hauptinhalt-Boxen: gleiche Karte wie Sidebar */ html[data-color-scheme="light"] .boxesContentTop .box:not(.mainMenu):not(.boxBorderless), html[data-color-scheme="light"] .boxesContentBottom .box:not(.mainMenu):not(.boxBorderless){background:#ffffff!important;box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 30px -10px rgba(0,0,0,.16)!important;border-radius:20px!important;overflow:hidden!important;} html:not([data-color-scheme="dark"]) .boxesContentTop .box:not(.mainMenu):not(.boxBorderless), html:not([data-color-scheme="dark"]) .boxesContentBottom .box:not(.mainMenu):not(.boxBorderless){background:#ffffff!important;box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 30px -10px rgba(0,0,0,.16)!important;border-radius:20px!important;overflow:hidden!important;} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .boxesContentTop .box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="dark"]) .boxesContentBottom .box:not(.mainMenu):not(.boxBorderless){background:#ffffff!important;box-shadow:0 1px 3px rgba(0,0,0,.06),0 14px 30px -10px rgba(0,0,0,.16)!important;border-radius:20px!important;overflow:hidden!important;}} html[data-color-scheme="dark"] .boxesContentTop .box:not(.mainMenu):not(.boxBorderless), html[data-color-scheme="dark"] .boxesContentBottom .box:not(.mainMenu):not(.boxBorderless){background:#120d14!important;box-shadow:0 1px 3px rgba(0,0,0,.20),0 18px 36px -12px rgba(0,0,0,.45)!important;border-radius:20px!important;overflow:hidden!important;} html:not([data-color-scheme="light"]) .boxesContentTop .box:not(.mainMenu):not(.boxBorderless), html:not([data-color-scheme="light"]) .boxesContentBottom .box:not(.mainMenu):not(.boxBorderless){background:#120d14!important;box-shadow:0 1px 3px rgba(0,0,0,.20),0 18px 36px -12px rgba(0,0,0,.45)!important;border-radius:20px!important;overflow:hidden!important;} @media(prefers-color-scheme:dark){html:not([data-color-scheme="light"]) .boxesContentTop .box:not(.mainMenu):not(.boxBorderless),html:not([data-color-scheme="light"]) .boxesContentBottom .box:not(.mainMenu):not(.boxBorderless){background:#120d14!important;box-shadow:0 1px 3px rgba(0,0,0,.20),0 18px 36px -12px rgba(0,0,0,.45)!important;border-radius:20px!important;overflow:hidden!important;}} /* Scroll-to-top Button: vollständig ausgeblendet */ .pageActionButtonToTop{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;} /* pageAction clipboard buttons — zentriert, kein Kasten, Pill-Pills */ .pageAction{ justify-content:center!important; background:transparent!important; box-shadow:none!important; border:none!important; bottom:env(safe-area-inset-bottom,4px)!important; left:0!important;right:0!important; padding-bottom:4px!important; } .pageAction .pageActionButtons{ background:transparent!important; box-shadow:none!important; overflow:visible!important; gap:8px!important; display:flex!important; } .pageAction .pageActionButton:not(:first-child){margin-left:0!important;} .pageAction .pageActionButton button.buttonPrimary, .pageAction .button.buttonPrimary{ border-radius:100px!important; font-size:12px!important; font-weight:600!important; letter-spacing:.1px!important; padding:7px 18px!important; height:auto!important; min-height:0!important; line-height:1.3!important; box-shadow:0 4px 16px rgba(0,0,0,.28),0 1px 4px rgba(0,0,0,.18)!important; backdrop-filter:blur(16px) saturate(1.8)!important; -webkit-backdrop-filter:blur(16px) saturate(1.8)!important; } html:not([data-color-scheme="light"]) .pageAction .button.buttonPrimary{ background:#120d14!important; color:rgba(255,255,255,.88)!important; border:1px solid rgba(255,255,255,.10)!important; } html[data-color-scheme="light"] .pageAction .button.buttonPrimary{ background:#ffffff!important; color:rgba(0,0,0,.78)!important; border:1px solid rgba(0,0,0,.10)!important; } @media(prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) .pageAction .button.buttonPrimary{ background:#120d14!important; color:rgba(255,255,255,.88)!important; border:1px solid rgba(255,255,255,.10)!important; } } @media(prefers-color-scheme:light){ html:not([data-color-scheme="dark"]) .pageAction .button.buttonPrimary{ background:#ffffff!important; color:rgba(0,0,0,.78)!important; border:1px solid rgba(0,0,0,.10)!important; } } /* .pageAction ("Ein Beitrag" etc.) bei Desktop-Chrome: Position (ober-/unterhalb der Navleiste, je nach Menüposition) wird per JS gesetzt (_giPositionPageAction() in gi-client.js) -- Optik bleibt bewusst die bestehende Mobil-Pille (Nutzer-Wunsch 2026-08-17: "orientiere dich an den anderen WLS-Buttons, die wir schon haben"), keine eigene CSS-Sonderbehandlung mehr nötig. (Vorherige Versuche: Größe/Position 1:1 in die Leiste zwingen sah "abgeschnitten" aus; komplett ins Navleisten-DOM verschieben brach das Menü. Beide zurückgerollt.) */ /* Section-Labels ausblenden — Inhalt erklärt sich selbst */ .box:not(.mainMenu):not(.boxBorderless) h2.boxTitle, .box:not(.mainMenu):not(.boxBorderless) .boxTitle, section.dashboardBoxRecentActivity h2.sectionTitle{ display:none!important; } /* Angepinnte Threads: linker Akzentstreifen + Badge (absolut positioniert, kein overflow-clip) */ li.tabularListRow:has(.wbbThreadSticky){ position:relative!important; border-left:3px solid rgba(91,128,245,0.55)!important; border-radius:0 14px 14px 0!important; } li.tabularListRow:has(.wbbThreadSticky)::before{ content:'Angepinnt'!important; position:absolute!important; top:8px!important;right:10px!important; display:inline-flex!important;align-items:center!important; font-size:10px!important;font-weight:600!important;letter-spacing:.2px!important; padding:2px 7px!important;border-radius:20px!important; background:rgba(91,128,245,0.14)!important; color:rgba(91,128,245,0.9)!important; pointer-events:none!important; z-index:1!important; } html[data-color-scheme="dark"] li.tabularListRow:has(.wbbThreadSticky)::before{ background:rgba(91,128,245,0.22)!important; color:rgba(140,165,255,0.95)!important; } .wbbStickyIcon{ display:none!important; } /* Unzuverlässige Read/Unread-Indikatoren und dot-Separatoren ausblenden */ li.columnLastPost{ display:none!important; } ul.messageGroupInfo{ display:none!important; } /* Footer: transparent */ .boxesFooter,.pageFooter,.pageFooterCopyright,.pageFooterLinks{ background:transparent!important; background-color:transparent!important; } /* .boxesFooterBoxes (Wrapper um Tags-Box etc. unterhalb des Threads) hat WoltLab-natives rgb(33,33,33) — eigene Klasse, war bisher nicht in der Transparenz-Liste erfasst. */ .boxesFooterBoxes{ background:transparent!important; background-color:transparent!important; } /* Genug Abstand am Footer-Ende damit pageAction-Buttons nichts verdecken -- 52px reichte knapp nicht für die untere Chrome-Leiste (Pille bzw. bei "Menü unten" die ~60px hohe Desktop-Navleiste auf iPad), Footer-Text schimmerte sichtbar durch den Blur-Streifen (Nutzer-Report 2026-08-17, besonders auf iPad auffällig). Auf 100px angehoben, deckt sowohl die Mobil-Pille (min-height 50px) als auch die Desktop-Navleiste (60px) samt etwas Luft ab. Nutzer-Report 2026-09-16 ("Footer liegt bei 'Menü unten' hinter der Leiste"): die Mobil- Pille ist seither ("Pille und Kreise 30% größer") von 50px auf 65px min-height gewachsen, diese Reserve wurde dabei nie nachgezogen. Ein erster, knapp bemessener Versuch (+15px auf 115px) reichte in der Praxis immer noch nicht (Nutzer-Report, Screenshot zeigte weiterhin Überlappung) -- Nutzer-Wunsch danach: lieber sicher zu viel Reserve als nochmal "mittendrin" hängen. Auf 130px angehoben (bereits einmal nachweislich ausreichend getestet), keine Feinjustage mehr auf einen knapperen Wert. KORREKTUR (Nutzer-Report direkt danach, "Abstand Links->Copyright viel zu groß"): ein zusätzlicher erster Versuch hatte dieselbe Reserve ALS margin-bottom auch auf die FooterMenu-Box (die Links) gelegt -- FooterMenu steht im WoltLab-Markup aber VOR diesem Element, wodurch die Reserve mitten im Footer (zwischen Links und Copyright) statt an dessen tatsächlichem Ende (hier, nach dem Copyright-Text) landete. Wieder entfernt -- diese einzelne Regel hier reicht, weil #pageFooterCopyright bereits das letzte Element im Footer ist. */ #pageFooterCopyright{ padding-bottom:calc(130px + env(safe-area-inset-bottom,8px))!important; font-size:11px!important; line-height:1.5!important; text-align:center!important; } /* Footer (Impressum/Datenschutzerklärung/Netiquette/...) liegt in einer eigenen "FooterMenu"- Box, per Diagnose bestätigt: .box[data-box-identifier="com.woltlab.wcf.FooterMenu"] nav ol.boxMenu li a.boxMenuLink -- .pageFooterLinks existiert in dieser WoltLab-Version nicht. ol.boxMenu ist von Haus aus display:inline-flex (nur so breit wie der Inhalt) und dadurch linksbündig -- display:flex+width:100% geben der Zeile erst die volle Breite, in der justify-content:center überhaupt etwas zu verteilen hat. */ .box[data-box-identifier="com.woltlab.wcf.FooterMenu"] ol.boxMenu{ display:flex!important; width:100%!important; justify-content:center!important; flex-wrap:wrap!important; } .box[data-box-identifier="com.woltlab.wcf.FooterMenu"] .boxMenuLinkTitle{ font-size:11px!important; } html[data-color-scheme="dark"] .pageFooterCopyright, html[data-color-scheme="dark"] .pageFooterCopyright *, html[data-color-scheme="dark"] .box[data-box-identifier="com.woltlab.wcf.FooterMenu"] .boxMenuLink{color:rgba(255,255,255,0.58)!important;} html[data-color-scheme="light"] .pageFooterCopyright, html[data-color-scheme="light"] .pageFooterCopyright *, html[data-color-scheme="light"] .box[data-box-identifier="com.woltlab.wcf.FooterMenu"] .boxMenuLink{color:rgba(0,0,0,0.58)!important;} @media(prefers-color-scheme:dark){ html:not([data-color-scheme="light"]) .pageFooterCopyright, html:not([data-color-scheme="light"]) .pageFooterCopyright *, html:not([data-color-scheme="light"]) .box[data-box-identifier="com.woltlab.wcf.FooterMenu"] .boxMenuLink{color:rgba(255,255,255,0.58)!important;} } @media(prefers-color-scheme:light){ html:not([data-color-scheme="dark"]) .pageFooterCopyright, html:not([data-color-scheme="dark"]) .pageFooterCopyright *, html:not([data-color-scheme="dark"]) .box[data-box-identifier="com.woltlab.wcf.FooterMenu"] .boxMenuLink{color:rgba(0,0,0,0.58)!important;} } /* Trennlinien entfernen (aus DevTools verifizierte Selektoren) */ .recentActivityList__switchContext{border:none!important;} h2.boxTitle{border:none!important;} .recentActivityListItem{border-bottom:none!important;} html[data-color-scheme="dark"] .entryCardList__item{border:none!important;box-shadow:0 1px 3px rgba(0,0,0,.20),0 16px 32px -12px rgba(0,0,0,.45)!important;border-radius:20px!important;overflow:hidden!important;} html[data-color-scheme="light"] .entryCardList__item{border:none!important;box-shadow:0 1px 3px rgba(0,20,80,.06),0 12px 26px -10px rgba(0,20,80,.16)!important;border-radius:20px!important;overflow:hidden!important;} @media(prefers-color-scheme:dark){html:not([data-color-scheme="light"]) .entryCardList__item{border:none!important;box-shadow:0 1px 3px rgba(0,0,0,.20),0 16px 32px -12px rgba(0,0,0,.45)!important;border-radius:20px!important;overflow:hidden!important;}} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .entryCardList__item{border:none!important;box-shadow:0 1px 3px rgba(0,20,80,.06),0 12px 26px -10px rgba(0,20,80,.16)!important;border-radius:20px!important;overflow:hidden!important;}} /* Nutzer-Report 2026-10-01 ("Pille mit den Punkten bei Mouseover hat einen schwarzen Kasten"): WoltLab legt hinter die Hover-Buttons einer Artikelkarte einen eigenen Hintergrund (var(--wcfContentBackground)) samt Schatten und 4px-Rundung -- die Pille selbst (button.dropdownToggle) hat bereits ihren eigenen Hintergrund/Rand, der Kasten ist doppelt. */ .entryCardList__item__buttons{border:none!important;background:transparent!important;box-shadow:none!important;gap:8px!important;align-items:center!important;} /* Nutzer-Wunsch 2026-10-01 ("Markierungskästchen wirkt jetzt verloren -- warum nicht beide im Liquid-Glass-Design?"): Pillen + Kästchen bekommen dasselbe Glas-Rezept wie die Menüpille (Blur+Sättigung, Glanzverlauf, Lichtkante innen, feiner Außenring, weicher Schatten). Folge-Report ("halten sich nicht an den Liquid-Glass-Regler"): Blur/Sättigung/Tönung kommen aus --gi-cb-blur/-sat/-tint/-solid, die gi-client.js (window._giApplyCardBtnGlass) aus window._giGlassScale ableitet und bei jeder Reglerbewegung live neu setzt -- Fallbackwerte hier = Standardstellung des Reglers. Farben je Schema per Custom Properties, EIN Anwendungsblock je Elementgruppe. Spezifität (html body ...) schlägt die globalen .button:not(.buttonPrimary)- Regeln (0,4,1). */ html[data-color-scheme="dark"] .entryCardList__item__buttons,html[data-color-scheme="dark"] .contentHeaderNavigation,html[data-color-scheme="dark"] .contentInteractionButtonContainer,html[data-color-scheme="dark"] .listView__header__buttons,html[data-color-scheme="dark"] .formSubmit,html[data-color-scheme="dark"] #gi-quote-btnwrap,html[data-color-scheme="dark"] .gi-glass,html[data-color-scheme="dark"] #gi-btt,html[data-color-scheme="dark"] #gi-refresh,html[data-color-scheme="dark"] .button,html[data-color-scheme="dark"] .pagination__link,html[data-color-scheme="dark"] .reactionPopoverContent{--gi-cb-bg:linear-gradient(180deg,rgba(255,255,255,calc(.20*var(--gi-cb-tint,1))),rgba(255,255,255,calc(.07*var(--gi-cb-tint,1)))),var(--gi-cb-solid,linear-gradient(transparent,transparent));--gi-cb-bd:rgba(255,255,255,.24);--gi-cb-sh:inset 0 1px 1.5px rgba(255,255,255,.48),0 0 0 .5px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.34);--gi-cb-fg:rgba(255,255,255,.94);--gi-cb-box:rgba(255,255,255,.85);} @media(prefers-color-scheme:dark){html:not([data-color-scheme="light"]) .entryCardList__item__buttons,html:not([data-color-scheme="light"]) .contentHeaderNavigation,html:not([data-color-scheme="light"]) .contentInteractionButtonContainer,html:not([data-color-scheme="light"]) .listView__header__buttons,html:not([data-color-scheme="light"]) .formSubmit,html:not([data-color-scheme="light"]) #gi-quote-btnwrap,html:not([data-color-scheme="light"]) .gi-glass,html:not([data-color-scheme="light"]) #gi-btt,html:not([data-color-scheme="light"]) #gi-refresh,html:not([data-color-scheme="light"]) .button,html:not([data-color-scheme="light"]) .pagination__link,html:not([data-color-scheme="light"]) .reactionPopoverContent{--gi-cb-bg:linear-gradient(180deg,rgba(255,255,255,calc(.20*var(--gi-cb-tint,1))),rgba(255,255,255,calc(.07*var(--gi-cb-tint,1)))),var(--gi-cb-solid,linear-gradient(transparent,transparent));--gi-cb-bd:rgba(255,255,255,.24);--gi-cb-sh:inset 0 1px 1.5px rgba(255,255,255,.48),0 0 0 .5px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.34);--gi-cb-fg:rgba(255,255,255,.94);--gi-cb-box:rgba(255,255,255,.85);}} html[data-color-scheme="light"] .entryCardList__item__buttons,html[data-color-scheme="light"] .contentHeaderNavigation,html[data-color-scheme="light"] .contentInteractionButtonContainer,html[data-color-scheme="light"] .listView__header__buttons,html[data-color-scheme="light"] .formSubmit,html[data-color-scheme="light"] #gi-quote-btnwrap,html[data-color-scheme="light"] .gi-glass,html[data-color-scheme="light"] #gi-btt,html[data-color-scheme="light"] #gi-refresh,html[data-color-scheme="light"] .button,html[data-color-scheme="light"] .pagination__link,html[data-color-scheme="light"] .reactionPopoverContent{--gi-cb-bg:linear-gradient(180deg,rgba(255,255,255,calc(.72*var(--gi-cb-tint,1))),rgba(255,255,255,calc(.38*var(--gi-cb-tint,1)))),var(--gi-cb-solid,linear-gradient(transparent,transparent));--gi-cb-bd:rgba(255,255,255,.80);--gi-cb-sh:inset 0 1px 1.5px rgba(255,255,255,.95),0 0 0 .5px rgba(0,0,0,.08),0 6px 16px rgba(0,20,80,.22);--gi-cb-fg:rgba(0,0,0,.78);--gi-cb-box:rgba(0,0,0,.55);} @media(prefers-color-scheme:light){html:not([data-color-scheme="dark"]) .entryCardList__item__buttons,html:not([data-color-scheme="dark"]) .contentHeaderNavigation,html:not([data-color-scheme="dark"]) .contentInteractionButtonContainer,html:not([data-color-scheme="dark"]) .listView__header__buttons,html:not([data-color-scheme="dark"]) .formSubmit,html:not([data-color-scheme="dark"]) #gi-quote-btnwrap,html:not([data-color-scheme="dark"]) .gi-glass,html:not([data-color-scheme="dark"]) #gi-btt,html:not([data-color-scheme="dark"]) #gi-refresh,html:not([data-color-scheme="dark"]) .button,html:not([data-color-scheme="dark"]) .pagination__link,html:not([data-color-scheme="dark"]) .reactionPopoverContent{--gi-cb-bg:linear-gradient(180deg,rgba(255,255,255,calc(.72*var(--gi-cb-tint,1))),rgba(255,255,255,calc(.38*var(--gi-cb-tint,1)))),var(--gi-cb-solid,linear-gradient(transparent,transparent));--gi-cb-bd:rgba(255,255,255,.80);--gi-cb-sh:inset 0 1px 1.5px rgba(255,255,255,.95),0 0 0 .5px rgba(0,0,0,.08),0 6px 16px rgba(0,20,80,.22);--gi-cb-fg:rgba(0,0,0,.78);--gi-cb-box:rgba(0,0,0,.55);}} /* Nachtmodus-Wärme (Nutzer-Wunsch 2026-10-02): von 22 bis 6 Uhr (Gerätezeit, html.gi-warm aus gi-client.js) bekommen alle Glas-Flächen */ /* einen warmen statt kühlweißen Ton -- nur Glas-Variablen, KEINE App-weiten Textfarben. */ html.gi-warm[data-color-scheme="dark"] .entryCardList__item__buttons,html.gi-warm[data-color-scheme="dark"] .contentHeaderNavigation,html.gi-warm[data-color-scheme="dark"] .contentInteractionButtonContainer,html.gi-warm[data-color-scheme="dark"] .listView__header__buttons,html.gi-warm[data-color-scheme="dark"] .formSubmit,html.gi-warm[data-color-scheme="dark"] #gi-quote-btnwrap,html.gi-warm[data-color-scheme="dark"] .gi-glass,html.gi-warm[data-color-scheme="dark"] #gi-btt,html.gi-warm[data-color-scheme="dark"] #gi-refresh,html.gi-warm[data-color-scheme="dark"] .button,html.gi-warm[data-color-scheme="dark"] .pagination__link,html.gi-warm[data-color-scheme="dark"] .reactionPopoverContent{--gi-cb-bg:linear-gradient(180deg,rgba(255,240,222,calc(.20*var(--gi-cb-tint,1))),rgba(255,240,222,calc(.07*var(--gi-cb-tint,1)))),var(--gi-cb-solid,linear-gradient(transparent,transparent));--gi-cb-bd:rgba(255,240,222,.24);--gi-cb-sh:inset 0 1px 1.5px rgba(255,240,222,.48),0 0 0 .5px rgba(255,240,222,.12),0 6px 18px rgba(0,0,0,.34);--gi-cb-fg:rgba(255,240,222,.94);--gi-cb-box:rgba(255,240,222,.85);} @media(prefers-color-scheme:dark){html.gi-warm:not([data-color-scheme="light"]) .entryCardList__item__buttons,html.gi-warm:not([data-color-scheme="light"]) .contentHeaderNavigation,html.gi-warm:not([data-color-scheme="light"]) .contentInteractionButtonContainer,html.gi-warm:not([data-color-scheme="light"]) .listView__header__buttons,html.gi-warm:not([data-color-scheme="light"]) .formSubmit,html.gi-warm:not([data-color-scheme="light"]) #gi-quote-btnwrap,html.gi-warm:not([data-color-scheme="light"]) .gi-glass,html.gi-warm:not([data-color-scheme="light"]) #gi-btt,html.gi-warm:not([data-color-scheme="light"]) #gi-refresh,html.gi-warm:not([data-color-scheme="light"]) .button,html.gi-warm:not([data-color-scheme="light"]) .pagination__link,html.gi-warm:not([data-color-scheme="light"]) .reactionPopoverContent{--gi-cb-bg:linear-gradient(180deg,rgba(255,240,222,calc(.20*var(--gi-cb-tint,1))),rgba(255,240,222,calc(.07*var(--gi-cb-tint,1)))),var(--gi-cb-solid,linear-gradient(transparent,transparent));--gi-cb-bd:rgba(255,240,222,.24);--gi-cb-sh:inset 0 1px 1.5px rgba(255,240,222,.48),0 0 0 .5px rgba(255,240,222,.12),0 6px 18px rgba(0,0,0,.34);--gi-cb-fg:rgba(255,240,222,.94);--gi-cb-box:rgba(255,240,222,.85);}} html.gi-warm[data-color-scheme="light"] .entryCardList__item__buttons,html.gi-warm[data-color-scheme="light"] .contentHeaderNavigation,html.gi-warm[data-color-scheme="light"] .contentInteractionButtonContainer,html.gi-warm[data-color-scheme="light"] .listView__header__buttons,html.gi-warm[data-color-scheme="light"] .formSubmit,html.gi-warm[data-color-scheme="light"] #gi-quote-btnwrap,html.gi-warm[data-color-scheme="light"] .gi-glass,html.gi-warm[data-color-scheme="light"] #gi-btt,html.gi-warm[data-color-scheme="light"] #gi-refresh,html.gi-warm[data-color-scheme="light"] .button,html.gi-warm[data-color-scheme="light"] .pagination__link,html.gi-warm[data-color-scheme="light"] .reactionPopoverContent{--gi-cb-bg:linear-gradient(180deg,rgba(255,240,222,calc(.72*var(--gi-cb-tint,1))),rgba(255,240,222,calc(.38*var(--gi-cb-tint,1)))),var(--gi-cb-solid,linear-gradient(transparent,transparent));--gi-cb-bd:rgba(255,240,222,.80);--gi-cb-sh:inset 0 1px 1.5px rgba(255,240,222,.95),0 0 0 .5px rgba(0,0,0,.08),0 6px 16px rgba(0,20,80,.22);--gi-cb-fg:rgba(0,0,0,.78);--gi-cb-box:rgba(0,0,0,.55);} @media(prefers-color-scheme:light){html.gi-warm:not([data-color-scheme="dark"]) .entryCardList__item__buttons,html.gi-warm:not([data-color-scheme="dark"]) .contentHeaderNavigation,html.gi-warm:not([data-color-scheme="dark"]) .contentInteractionButtonContainer,html.gi-warm:not([data-color-scheme="dark"]) .listView__header__buttons,html.gi-warm:not([data-color-scheme="dark"]) .formSubmit,html.gi-warm:not([data-color-scheme="dark"]) #gi-quote-btnwrap,html.gi-warm:not([data-color-scheme="dark"]) .gi-glass,html.gi-warm:not([data-color-scheme="dark"]) #gi-btt,html.gi-warm:not([data-color-scheme="dark"]) #gi-refresh,html.gi-warm:not([data-color-scheme="dark"]) .button,html.gi-warm:not([data-color-scheme="dark"]) .pagination__link,html.gi-warm:not([data-color-scheme="dark"]) .reactionPopoverContent{--gi-cb-bg:linear-gradient(180deg,rgba(255,240,222,calc(.72*var(--gi-cb-tint,1))),rgba(255,240,222,calc(.38*var(--gi-cb-tint,1)))),var(--gi-cb-solid,linear-gradient(transparent,transparent));--gi-cb-bd:rgba(255,240,222,.80);--gi-cb-sh:inset 0 1px 1.5px rgba(255,240,222,.95),0 0 0 .5px rgba(0,0,0,.08),0 6px 16px rgba(0,20,80,.22);--gi-cb-fg:rgba(0,0,0,.78);--gi-cb-box:rgba(0,0,0,.55);}} html body .entryCardList__item__buttons .dropdownToggle.button.small, html body .entryCardList__item__buttons .listView__selectItem__label, html body .listView__header__buttons .listView__selectAllItems__label{ background:var(--gi-cb-bg)!important; -webkit-backdrop-filter:blur(var(--gi-cb-blur,14px)) saturate(var(--gi-cb-sat,165%))!important;backdrop-filter:blur(var(--gi-cb-blur,14px)) saturate(var(--gi-cb-sat,165%))!important; border:1px solid var(--gi-cb-bd)!important; box-shadow:var(--gi-cb-sh)!important; color:var(--gi-cb-fg)!important; border-radius:100px!important; height:30px!important;box-sizing:border-box!important; } html body .entryCardList__item__buttons .listView__selectItem__label, html body .listView__header__buttons .listView__selectAllItems__label{ display:inline-flex!important;align-items:center!important;justify-content:center!important; width:30px!important;padding:0!important;margin:0!important;cursor:pointer!important; } html body .entryCardList__item__buttons input.listView__selectItem, html body .listView__header__buttons input.listView__selectAllItems{ -webkit-appearance:none!important;appearance:none!important; width:15px!important;height:15px!important;margin:0!important;cursor:pointer!important; border:1.5px solid var(--gi-cb-box)!important;border-radius:5px!important;background-color:transparent!important; background-repeat:no-repeat!important;background-position:center!important;background-size:11px 11px!important; transition:background-color .15s,border-color .15s!important; } html body .entryCardList__item__buttons input.listView__selectItem:checked, html body .listView__header__buttons input.listView__selectAllItems:checked{ background-color:rgba(var(--gi-c2-rgb,142,142,150),.95)!important;border-color:transparent!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; } /* Listen-Kopfzeile: gleiche Höhe wie "Sortierung"/"Filter" (33px); "teilweise markiert" (indeterminate) geht bei appearance:none sonst verloren -- als Strich im selben Theme-Ton. */ html body .listView__header__buttons .listView__selectAllItems__label{width:33px!important;height:33px!important;} /* Nutzer-Wunsch 2026-10-01: "Sortierung"/"Filter" (und Bearbeiten) in der Listen-Kopfzeile ebenfalls im Glas-Look, damit sie zum Alle-markieren-Kästchen daneben passen. Höhe bleibt die natürliche (33px). */ /* Nutzer-Wunsch 2026-10-01: Seitenkopf-Buttons (.contentHeaderNavigation = "Antworten", "Artikel hinzufügen", ... / .contentInteractionButtonContainer = "Abonniert", "Alle als gelesen markieren", "···", ...) auf ALLEN Seiten im Glas-Look (erst nur Artikelliste, dann auf Wunsch global). Spezifität: wiederholtes .button (0,5,2) schlägt die globalen .button:not(.buttonPrimary)- und .buttonPrimary-Regeln (0,4,1), ohne eine Seiten-ID zu brauchen. */ html body .contentHeaderNavigation .button.button.button.button, html body .contentInteractionButtonContainer .button.button.button.button{ background:var(--gi-cb-bg)!important; -webkit-backdrop-filter:blur(var(--gi-cb-blur,14px)) saturate(var(--gi-cb-sat,165%))!important;backdrop-filter:blur(var(--gi-cb-blur,14px)) saturate(var(--gi-cb-sat,165%))!important; border:1px solid var(--gi-cb-bd)!important; box-shadow:var(--gi-cb-sh)!important; color:var(--gi-cb-fg)!important; } html body .contentHeaderNavigation .button.button.button.button:hover, html body .contentInteractionButtonContainer .button.button.button.button:hover{filter:brightness(1.12);} /* Nutzer-Wunsch 2026-10-09: die Pillen-Gruppe ("Alle als gelesen markieren", "···") schliesst optisch mit den Inhalten der Boxen ab, nicht mit deren Kante: 6px nach innen (16px war zu viel, 8px noch zu viel) */ html body .contentInteractionButtonContainer{margin-right:6px!important;} /* Nutzer-Wunsch 2026-10-01: "Vorschau"/"Antworten" (und die Absende-Buttons der Editor-Formulare: Thema erstellen usw.) unter der Textbox im Glas-Look, am Liquid-Glass-Regler wie alle anderen. Bewusst NUR Formulare mit Editor: .formSubmit gibt es auf jeder Seite (Anmeldung, Einstellungen, ...), die bleiben unverändert. Schnellantwort = .messageQuickReplyContent (kein
    -Vorfahre), Vollformulare = form:has(.ck-editor). Höhe/Maße bleiben die natürlichen. */ html body .messageQuickReplyContent .formSubmit .button.button.button, html body form:has(.ck-editor) .formSubmit .button.button.button, html body form:has(.ck-editor) .formSubmit input[type="submit"]{ background:var(--gi-cb-bg)!important; -webkit-backdrop-filter:blur(var(--gi-cb-blur,14px)) saturate(var(--gi-cb-sat,165%))!important;backdrop-filter:blur(var(--gi-cb-blur,14px)) saturate(var(--gi-cb-sat,165%))!important; border:1px solid var(--gi-cb-bd)!important; box-shadow:var(--gi-cb-sh)!important; color:var(--gi-cb-fg)!important; } html body .messageQuickReplyContent .formSubmit .button.button.button:hover, html body form:has(.ck-editor) .formSubmit .button.button.button:hover, html body form:has(.ck-editor) .formSubmit input[type="submit"]:hover{filter:brightness(1.12);} /* "Absenden" der Vollformulare ist ein nacktes (WoltLab-Primärblau, eckiger) -- Pillenform wie die anderen, Rand 1px wie die Glas-Buttons. */ html body form:has(.ck-editor) .formSubmit input[type="submit"]{border-radius:100px!important;cursor:pointer;} /* Nutzer-Wunsch 2026-10-01: die schwebenden Zitat-Buttons ("Zitat einfügen"/"Zitat speichern", Eigenbau quoteScript in gi-client.js) im selben Liquid-Glass-Look, am Regler hängend (--gi-cb-*). Vorher feste Inline-Farben (dunkles rgba, kein Blur). Sitzen fix über Inhalt/Editor -- der Blur trägt die Lesbarkeit. Die Inline-Styles in _mkBtn() enthalten nur noch Maße/Form. */ html body #gi-quote-btnwrap button{ background:var(--gi-cb-bg)!important; -webkit-backdrop-filter:blur(var(--gi-cb-blur,14px)) saturate(var(--gi-cb-sat,165%))!important;backdrop-filter:blur(var(--gi-cb-blur,14px)) saturate(var(--gi-cb-sat,165%))!important; border:1px solid var(--gi-cb-bd)!important; box-shadow:var(--gi-cb-sh)!important; color:var(--gi-cb-fg)!important; } html body #gi-quote-btnwrap button:hover{filter:brightness(1.12);} /* Generische Glas-Fläche (Zitat-Karte, Zitat-Sammlung, Ungelesen-Chip, Reaktions-Popover) -- hängt wie alle --gi-cb-*-Flächen am Liquid-Glass-Regler. */ /* Nutzer-Wunsch 2026-10-01 (Meinungsänderung): ALLE Buttons im Liquid-Glass-Look, am Regler in den App-Einstellungen -- konsistent (vorher blieben Beitrags-Pillen, Suche und Seitenzahlen bewusst ohne Glas). Jetzt global über .button (wiederholt -> Spezifität (0,5,2) schlägt die globalen .button:not(.buttonPrimary)-/.buttonPrimary-Regeln (0,4,1)), Seitenzahlen separat. Maße/Höhen bleiben die natürlichen. Die --gi-cb-*-Variablen sind dafür auch direkt auf .button/.pagination__link definiert (s. Scope-Listen oben). Ausgenommen: Reaktions-Zähler (.reactionSummary, reine Info-Chips). */ html body .button.button.button.button:not(.recentActivityList__switchContextButton){ background:var(--gi-cb-bg)!important; -webkit-backdrop-filter:blur(var(--gi-cb-blur,14px)) saturate(var(--gi-cb-sat,165%))!important;backdrop-filter:blur(var(--gi-cb-blur,14px)) saturate(var(--gi-cb-sat,165%))!important; border:1px solid var(--gi-cb-bd)!important; box-shadow:var(--gi-cb-sh)!important; color:var(--gi-cb-fg)!important; border-radius:100px!important; } html body .button.button.button.button:not(.recentActivityList__switchContextButton):hover{filter:brightness(1.12);} html body .pagination__link.pagination__link.pagination__link{ background:var(--gi-cb-bg)!important; -webkit-backdrop-filter:blur(var(--gi-cb-blur,14px)) saturate(var(--gi-cb-sat,165%))!important;backdrop-filter:blur(var(--gi-cb-blur,14px)) saturate(var(--gi-cb-sat,165%))!important; border:1px solid var(--gi-cb-bd)!important; box-shadow:var(--gi-cb-sh)!important; color:var(--gi-cb-fg)!important; border-radius:100px!important; min-width:34px;box-sizing:border-box;text-align:center; } html body .pagination__link.pagination__link.pagination__link--current{ background:linear-gradient(rgba(var(--gi-c2-rgb,142,142,150),.42),rgba(var(--gi-c2-rgb,142,142,150),.42)),var(--gi-cb-bg)!important; font-weight:700; } html body .pagination__item{margin:0 3px;} /* "GIF"-Abzeichen am Emoji-Knopf (Nutzer-Wunsch 2026-10-02 "gibt's das auch in funky?"): wandernder Regenbogen-Verlauf, leicht schräg, Buchstaben hüpfen nacheinander. Animation nur mit .gi-eb-live (Knopf im Bild), nie bei reduzierter Bewegung. */ .gi-eb-tag{display:inline-flex;align-items:center;gap:1px;font-size:12px;font-weight:900;letter-spacing:.5px;color:#fff;padding:3px 7px 4px;border-radius:8px;transform:rotate(-3deg);background:linear-gradient(110deg,#ff3d81,#ff9a3d,#ffe53d,#3dff9a,#3dc9ff,#8a5cff,#ff3d81);background-size:320% 100%;box-shadow:0 2px 8px rgba(255,61,129,.45),inset 0 1px 1px rgba(255,255,255,.55);text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.6);} .gi-eb-tag i{font-style:normal;display:inline-block;} @keyframes gi-gifbg{0%{background-position:0% 50%;}100%{background-position:320% 50%;}} @keyframes gi-gifhop{0%,70%,100%{transform:translateY(0);}35%{transform:translateY(-3px) scale(1.18);}} @keyframes gi-gifwob{0%,100%{transform:rotate(-5deg) scale(1);}50%{transform:rotate(-1deg) scale(1.07);}} /* v703: Nutzer "zu viel" -> nur noch ein sehr langsames Wandern des Verlaufs, kein Hüpfen, kein Wackeln */ .gi-emoji-btn.gi-eb-live .gi-eb-tag{animation:gi-gifbg 12s linear infinite;} @media(prefers-reduced-motion:reduce){.gi-emoji-btn.gi-eb-live .gi-eb-tag,.gi-emoji-btn.gi-eb-live .gi-eb-tag i{animation:none!important;}} /* ===== v688: Swipe-Hinweis, Zitat-Optionen, Ungelesen-Spur, Reaktions-Bogen, Ruhe-Modus ===== */ #gi-swipe-ind{position:fixed;z-index:99989;top:0;left:0;padding:12px 20px;border-radius:100px;font-size:16px;font-weight:600;letter-spacing:0;pointer-events:none;opacity:0;white-space:pre;box-shadow:0 8px 24px rgba(0,0,0,.30);transition:box-shadow .15s;} /* Schwelle erreicht: keine Akzentfarbe -- nur kraeftigerer Rand und etwas groesser (per JS) */ html body #gi-swipe-ind.gi-reach{box-shadow:0 8px 26px rgba(0,0,0,.36),inset 0 0 0 1.4px rgba(255,255,255,.65)!important;} #gi-qopts{position:fixed;z-index:2147483647;display:none;flex-direction:column;gap:6px;padding:10px;border-radius:22px;min-width:200px;} #gi-qopts button{background:transparent!important;color:var(--gi-cb-fg)!important;border:1px solid var(--gi-cb-bd)!important;border-radius:100px;padding:9px 14px;font-size:14px;font-weight:700;text-align:left;cursor:pointer;} #gi-qopts .gi-qopts-cap{font-size:11px;font-weight:700;opacity:.65;padding:0 4px 2px;} #gi-unseen-rail{position:fixed;right:2px;top:calc(env(safe-area-inset-top,0px) + 110px);bottom:130px;width:20px;z-index:99988;pointer-events:none;} #gi-unseen-rail i{position:absolute;right:2px;width:5px;height:14px;border-radius:3px;background:rgba(var(--gi-c2-rgb,48,209,88),.95);box-shadow:0 0 6px rgba(var(--gi-c2-rgb,48,209,88),.7);pointer-events:auto;cursor:pointer;} #gi-unseen-rail i::before{content:"";position:absolute;left:-14px;right:-6px;top:-8px;bottom:-8px;} /* Ruhe-Modus: nach längerem Lesen werden die Glas-Knöpfe im Thread leiser (leichter Fade), bis man wieder tippt. */ html.gi-calm .messageFooterButtons .button,html.gi-calm .pagination__link,html.gi-calm .contentInteractionButtonContainer .button{opacity:.74;} .messageFooterButtons .button,.pagination__link,.contentInteractionButtonContainer .button{transition:opacity 1.2s ease;} html.gi-calm.gi-touch .messageFooterButtons .button,html.gi-calm.gi-touch .pagination__link,html.gi-calm.gi-touch .contentInteractionButtonContainer .button{opacity:1;transition-duration:.25s;} @media(prefers-reduced-motion:reduce){html.gi-calm .messageFooterButtons .button,html.gi-calm .pagination__link,html.gi-calm .contentInteractionButtonContainer .button{opacity:1;}} /* Reaktions-Leiste (v699): ruhige Glas-Kapsel nach iOS-Vorbild. Nutzer-Report 2026-10-02: der Bogen mit unterschiedlich hohen Icons, Leuchten, Drehung und Konfetti wirkte "billig". Jetzt: alle Icons auf einer Linie, gleichmäßige Abstände, Glas wie alle anderen Flächen; beim Darüberfahren ein sanfter Dock-Effekt (Icon unter dem Finger wächst und hebt sich leicht aus der Kapsel, Nachbarn folgen weich) + dezentes Namens-Etikett. */ .reactionPopoverContent.gi-arc{width:max-content!important;max-width:calc(100vw - 16px)!important;padding:8px 10px!important;border-radius:999px!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;transform-origin:50% 100%;} .reactionPopoverContent.gi-arc ul.reactionTypeButtonList{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;grid-template-columns:none!important;width:auto!important;gap:4px!important;align-items:center!important;overflow:visible!important;border-radius:0!important;padding:0!important;margin:0!important;} .reactionPopoverContent.gi-arc li.reactionTypeButton{min-height:0!important;padding:0!important;width:36px!important;height:36px!important;flex:0 0 36px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:50%!important;position:relative;transform-origin:50% 100%;transition:transform .2s cubic-bezier(.2,.9,.3,1.2)!important;transform:translateY(calc((1 - var(--gi-s,1)) * 10px)) scale(var(--gi-s,1));} .reactionPopoverContent.gi-arc .reactionTypeButtonTitle{display:none!important;} .reactionPopoverContent.gi-arc li.reactionTypeButton.gi-hot{z-index:3;} .reactionPopoverContent.gi-arc li.reactionTypeButton.gi-hot img,.reactionPopoverContent.gi-arc li.reactionTypeButton.gi-hot svg,.reactionPopoverContent.gi-arc li.reactionTypeButton.gi-hot .gi-reaction-emoji{filter:drop-shadow(0 5px 6px rgba(0,0,0,.32));} .reactionPopoverContent.gi-arc li.reactionTypeButton.gi-hot .reactionTypeButtonTitle{display:block!important;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) scale(calc(1 / var(--gi-s,1)));transform-origin:50% 100%;padding:4px 10px;border-radius:100px;background:rgba(22,22,26,.9);color:#fff!important;font-size:12px!important;font-weight:600!important;white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.3);} /* Einblenden: Kapsel federt kurz auf, Icons steigen gestaffelt (22ms pro Icon) auf -- ohne Drehung */ @keyframes gi-rise{0%{opacity:0;transform:translateY(8px) scale(.6);}100%{opacity:1;transform:none;}} .reactionPopoverContent.gi-arc li.reactionTypeButton img.reactionType,.reactionPopoverContent.gi-arc li.reactionTypeButton svg.gi-reaction-svg,.reactionPopoverContent.gi-arc li.reactionTypeButton .gi-reaction-emoji{animation:gi-rise .3s cubic-bezier(.2,.9,.3,1.1) both!important;animation-delay:calc(var(--gi-i,0) * 22ms + 40ms)!important;} .reactionPopoverContent.gi-arc li.reactionTypeButton img,.reactionPopoverContent.gi-arc li.reactionTypeButton svg{transition:filter .15s;} /* Seite hinter der Auswahl: nur leicht abgedunkelt (kein Blur) */ #gi-react-veil{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.26);opacity:0;pointer-events:none;transition:opacity .22s ease;} #gi-react-veil.on{opacity:1;} @media(prefers-reduced-motion:reduce){.reactionPopoverContent.gi-arc li.reactionTypeButton img.reactionType,.reactionPopoverContent.gi-arc li.reactionTypeButton svg.gi-reaction-svg,.reactionPopoverContent.gi-arc li.reactionTypeButton .gi-reaction-emoji{animation:none!important;}} /* Nutzer-Wunsch 2026-10-02: Nach-oben-/Neu-laden-Button (mit Fortschrittsring) am selben Liquid-Glass-Look wie alle anderen Buttons (--gi-cb-*) statt am älteren Pillen-Look aus _giUpdateBttGlass (gi-client.js). Doppelte ID-Spezifität (2,0,2) schlägt die Scheme-Regeln aus dem Client-