/** * WebinarIgnition – Admin-Farben, sauber getrennt (Tobias 2026-10-05) * * ZWEI WEGE, EIN FILE — das ist der Kern dieser Datei: * * 1. INNEN = body.wi-admin-screen * Auf jeder WI-Seite (Dashboard, Create, Liste, Editor, Einstellungen, Agent) * gelten die Brand-Farben SOFORT. Die Body-Class setzt inc/menu.php * (wi_admin_body_class_brand_screen). Kein Waehlen noetig. * * 2. AUSSEN = body.admin-color-webinarignition * Auf allen fremden wp-admin-Screens (Profil, Plugins, WP-Dashboard …) gilt * die Markenfarbe NUR, wenn der Nutzer das Schema „WebinarIgnition" im Profil * gewaehlt hat. Abwaehlbar — dann greift sein WP-Schema (Fresh/Midnight/…). * * Die Datei ist bewusst KEINE Ueberschreibung der neun WP-Schemata mehr. * Vorher (Commit 03abdeca8) zog ein globaler !important-Block alle Schemata auf * Orange, auch mitten im fremden wp-admin. Das war nicht abwaehlbar und hat * WordPress' eigenes Chrome beschaedigt — der Fehler, den Tobias gemeldet hat. * * Grundsatz: KEIN Angriff auf Buttons, die uns nicht gehoeren. * Der frueher globale `.btn`-Rahmen hat gruene Speichern-Buttons und schwarze * Icon-Buttons orange umrandet, weisser Text wurde auf Orange unlesbar. * Hier gibt es keinen globalen .btn-Rahmen mehr. * * Letzte Aenderung: 2026-10-05 */ /* ===================================================================== * 0. Die Farbwerte an EINEM Ort * ===================================================================== */ :root { --wi-brand: #e64f1d; --wi-brand-rgb: 230, 79, 29; --wi-brand-10: #ba3f17; /* dunkler, fuer Hover */ --wi-brand-20: #8d3011; /* noch dunkler, fuer Aktiv */ --wi-brand-soft: #ff8a5c; /* heller, fuer Text auf dunklem Menue */ /* Cremige Flaechen (Tobias 2026-10-05: "cremefarben, wie die Flamme"). * Alle Werte stammen aus der Marke selbst (--wi-color-bone-white/-off-white). */ --wi-cream: #f9f6ee; /* Grundflaeche */ --wi-cream-2: #fdfbf6; /* Karten/Panels, einen Hauch heller */ --wi-cream-3: #f3ede0; /* Hover/aktive Zeile, waermer */ --wi-cream-line: rgba(230, 79, 29, 0.16); /* Trenner in Flammen-Ton */ --wi-ink: #3c2f26; /* dunkle Schrift auf Creme (warm, kein kaltes Schwarz) */ --wi-ink-soft: #6b5c50; /* gedämpfte Schrift */ } /* ===================================================================== * 1. AUSSEN: das Wortpress-Farbschema „WebinarIgnition" * * Greift NUR bei body.admin-color-webinarignition — also nur, wenn im Profil * gewaehlt. Bewusst OHNE !important: WordPress' eigenes Schema soll hier * gleich stark bleiben, unsere Wahl gewinnt ueber die Spezifitaet. * Menue/Admin-Bar bleiben WP-Standard (Tobias: "nur die Farbe"). * ===================================================================== */ body.admin-color-webinarignition { --wp-admin-theme-color: var(--wi-brand); --wp-admin-theme-color--rgb: var(--wi-brand-rgb); --wp-admin-theme-color-darker-10: var(--wi-brand-10); --wp-admin-theme-color-darker-10--rgb: 186, 63, 23; --wp-admin-theme-color-darker-20: var(--wi-brand-20); --wp-admin-theme-color-darker-20--rgb: 141, 48, 17; } /* Die Kachel-Farben im Profil (WP liest diese Variablen fuer den aktiven Zustand) */ body.admin-color-webinarignition #adminmenu li.current a.menu-top, body.admin-color-webinarignition #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, body.admin-color-webinarignition #adminmenu li.wp-has-current-submenu .wp-submenu-head, body.admin-color-webinarignition .wp-core-ui .button-primary, body.admin-color-webinarignition .wp-core-ui .button-primary:hover, body.admin-color-webinarignition .wp-core-ui .button-primary:focus { background: var(--wi-brand); border-color: var(--wi-brand); color: #fff; } body.admin-color-webinarignition .wp-core-ui .button-primary:hover, body.admin-color-webinarignition .wp-core-ui .button-primary:focus { background: var(--wi-brand-10); border-color: var(--wi-brand-10); } /* Fokusring in der Markenfarbe — nur mit gewaehltem Schema */ body.admin-color-webinarignition a:focus, body.admin-color-webinarignition .wp-core-ui .button:focus { box-shadow: 0 0 0 2px var(--wi-brand); } /* ===================================================================== * 2. INNEN: WI-Seiten bekommen die Brand-Farben sofort * Scope: body.wi-admin-screen (gesetzt in inc/menu.php) * ===================================================================== */ /* WP-Chrome auf WI-Seiten: Theme-Farbe der Seite auf Markenfarbe. * Das faerbt Buttons/Links/Toggles innerhalb unserer Seite, laesst aber das * Menue und die Admin-Bar unberuehrt (die haengen an WP, nicht an uns). */ body.wi-admin-screen { --wp-admin-theme-color: var(--wi-brand); --wp-admin-theme-color--rgb: var(--wi-brand-rgb); --wp-admin-theme-color-darker-10: var(--wi-brand-10); --wp-admin-theme-color-darker-20: var(--wi-brand-20); } /* Primaere Buttons auf unseren Seiten — Text bleibt bewusst weiss, * weil der Grund hier IMMER orange ist. Keine fremden Buttons. */ body.wi-admin-screen .wp-core-ui .button-primary, body.wi-admin-screen .button-primary { background: var(--wi-brand); border-color: var(--wi-brand); color: #fff; text-shadow: none; box-shadow: none; } body.wi-admin-screen .wp-core-ui .button-primary:hover, body.wi-admin-screen .wp-core-ui .button-primary:focus, body.wi-admin-screen .button-primary:hover, body.wi-admin-screen .button-primary:focus { background: var(--wi-brand-10); border-color: var(--wi-brand-10); color: #fff; } body.wi-admin-screen .wp-core-ui .button-primary:active, body.wi-admin-screen .button-primary:active { background: var(--wi-brand-20); border-color: var(--wi-brand-20); } /* WICHTIG — die Korrektur zum gemeldeten Fehler: * Ein gruener oder neutraler Button (z. B. „Save & Update", Icon-Buttons) darf * beim Hover NICHT orange werden. Vorher zog eine globale Regel den Grund auf * Orange, der weisse Text war dann unlesbar. Hier bleibt jeder Button, der nicht * ausdruecklich .button-primary ist, in seinen eigenen Farben. */ body.wi-admin-screen .button:not(.button-primary):hover, body.wi-admin-screen .button:not(.button-primary):focus, body.wi-admin-screen .button-secondary:hover, body.wi-admin-screen .button-secondary:focus { background: inherit; border-color: inherit; color: inherit; } /* Der Admin-Bar „Aktualisieren"-Punkt und aehnliche WP-Knoepfe behalten ihr * WP-Aussehen; nur unsere eigenen Elemente werden gefaerbt. */ /* Menue auf WI-Seiten: aktiver Punkt in Markenfarbe (nur innen) */ body.wi-admin-screen #adminmenu li.current a.menu-top, body.wi-admin-screen #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, body.wi-admin-screen #adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head, body.wi-admin-screen #adminmenu li.wp-has-current-submenu .wp-submenu-head, body.wi-admin-screen #adminmenu li.current.menu-top { background: var(--wi-brand); color: #fff; } /* Untermenue-Punkt: heller, aber lesbar auf dunklem Sockel. * Vorher war hier #ff8a5c auf zu dunklem Grund kaum lesbar. */ body.wi-admin-screen #adminmenu .wp-submenu a:focus, body.wi-admin-screen #adminmenu .wp-submenu a:hover, body.wi-admin-screen #adminmenu li.current a.wp-submenu-head, body.wi-admin-screen #adminmenu .wp-submenu li.current a { color: var(--wi-brand-soft); } /* Zaehler-Blase */ body.wi-admin-screen #adminmenu .awaiting-mod, body.wi-admin-screen #adminmenu .update-plugins { background-color: var(--wi-brand); color: #fff; } /* Fokusring auf unseren Seiten */ body.wi-admin-screen a:focus, body.wi-admin-screen .wp-core-ui .button:focus { box-shadow: 0 0 0 2px var(--wi-brand); } /* ===================================================================== * 3. WI-Eigenmarkup: die alten Direktorangen an EINE Variable ziehen * (nur auf unseren Seiten — kein Leak in fremdes wp-admin) * ===================================================================== */ body.wi-admin-screen .editItem:hover, body.wi-admin-screen #mWrapper .editSelected, body.wi-admin-screen #mWrapper .webinarStatusSelected, body.wi-admin-screen #mWrapper .webinarStatus:hover { background-color: var(--wi-brand); border-color: var(--wi-brand); } body.wi-admin-screen #mWrapper .editItem:hover { color: #fff; } /* Die alten fest eingetragenen Blautoene im WI-Admin-CSS auf Markenfarbe. * Diese Elemente gehoeren UNS — hier ist der Uebergriff gewollt und bleibt. */ body.wi-admin-screen .wi-admin-details > summary::before, body.wi-admin-screen .wi-setup-checklist__status, body.wi-admin-screen .wi-create-mode-compare__time, body.wi-admin-screen .wi-create-inventory__icon-link { color: var(--wi-brand); } body.wi-admin-screen .wi-setup-checklist { border-left-color: var(--wi-brand); } body.wi-admin-screen .wi-setup-checklist__bar-fill, body.wi-admin-screen .wi-wire__btn, body.wi-admin-screen .wi-wire__hero, body.wi-admin-screen .wi-create-mode-card__badge, body.wi-admin-screen .wi-create-mode-compare__num { background: var(--wi-brand); } body.wi-admin-screen .wi-create-type-card:hover, body.wi-admin-screen .wi-create-type-card.is-selected, body.wi-admin-screen .wi-create-mode-compare__row:hover, body.wi-admin-screen .wi-create-mode-compare__row.is-selected, body.wi-admin-screen .wi-create-other-btn.is-selected, body.wi-admin-screen .wi-create-inventory__logo-thumb-btn:hover, body.wi-admin-screen .wi-create-color-box__brand-thumb:hover { border-color: var(--wi-brand); box-shadow: 0 0 0 1px var(--wi-brand); } /* ===================================================================== * 4. NEUER LOOK auf WI-Seiten (Tobias: "damit die Leute merken, es hat sich * was getan"). Bewusst dezent und nur innen — kein Eingriff in WP-Chrome. * ===================================================================== */ /* Kopfzeile der WI-Seiten: schmaler Marken-Streifen, der dem Auge sofort * signalisiert, dass man in WebinarIgnition ist. * Gemessen 2026-10-05: die WI-Seiten haben KEIN .wrap > h1 (der Editor nutzt * .editTop, die Liste .editTop/editURLWE). Darum hier die echten Traeger. */ body.wi-admin-screen .editTop, body.wi-admin-screen .editableSectionHeadingDASH { position: relative; padding-left: 14px; } body.wi-admin-screen .editTop::before, body.wi-admin-screen .editableSectionHeadingDASH::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: var(--wi-brand); } /* Zusaetzlich: jede klassische WP-Kopfzeile INNEN (Einstellungen, Agent) */ body.wi-admin-screen .wrap > h1.wp-heading-inline, body.wi-admin-screen .wrap > h2.wp-heading-inline { position: relative; padding-left: 14px; } body.wi-admin-screen .wrap > h1.wp-heading-inline::before, body.wi-admin-screen .wrap > h2.wp-heading-inline::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; border-radius: 2px; background: var(--wi-brand); } /* Karten/Panels auf unseren Seiten: gleicher Radius wie WP 7.0 Modern, * damit der neue Look zusammenhaengt statt zufaellig wirkt. */ body.wi-admin-screen .wi-setup-checklist, body.wi-admin-screen .wi-create-mode-compare, body.wi-admin-screen .wi-create-inventory, body.wi-admin-screen .wi-create-color-box, body.wi-admin-screen .wi-admin-details { border-radius: 8px; } /* Knopf-Farbe bei Hover heller statt dunkler, wo der Grund dunkel ist — * der gemeldete Fall "on hover dunkler, ich wollte von dunkel weg". */ body.wi-admin-screen .wi-setup-checklist__tip, body.wi-admin-screen .wi-setup-checklist__hint { color: #50575e; } /* ===================================================================== * 5. CREMIG-FLAMMIGER INNENRAUM (Tobias 2026-10-05) * * Das WI-Innere war dunkel (Kopfleiste #1e1e1e, Tab-Leiste #202020, * Accordion-Zeilen #212121, Panels #1f1f1f, dazu ein dunkles noise.png). * Das biegen wir hier auf die Creme-Palette der Marke um. * * Grundsatz: NUR unter body.wi-admin-screen — die alten Dateien bleiben * unangetastet, alles haengt an EINEM Ort. Ausserhalb von WI aendert sich * nichts. * * Das dunkle noise.png wird abgeschaltet: es legt einen grauen Schleier * ueber jede Flaeche und ist der Hauptgrund fuer den "ollen" Eindruck. * ===================================================================== */ /* --- 5.1 Kopfleiste + Navigationssockel --- */ body.wi-admin-screen #mWrapper, body.wi-admin-screen #mHeader, body.wi-admin-screen #mLogo, body.wi-admin-screen #mNav, body.wi-admin-screen #container { background-color: var(--wi-cream) !important; background-image: none !important; border-color: var(--wi-cream-line) !important; } /* #container ist der Traeger hinter Titel/Tabs/Inhalt. Gemessen 2026-10-05: * rgb(53,51,55) + noise.png -> das war der dunkle Balken im Screenshot. * Ohne diese Regel bleibt der ganze Editor-Kopf dunkel, egal was innen passiert. */ body.wi-admin-screen #container { padding: 10px 10px 2px; } body.wi-admin-screen #mLogo { border-bottom: 1px solid var(--wi-cream-line) !important; } /* Der Lizenz-Titel stand weiss auf dunkel -> jetzt dunkel auf creme */ body.wi-admin-screen #licenseTitle, body.wi-admin-screen .mLogoIMG span { color: var(--wi-ink) !important; } /* Die neue Wortmarke: Flamme + dunkler Schriftzug (UI/index.php) */ body.wi-admin-screen .wi-brand-mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; max-width: 100%; overflow: hidden; } body.wi-admin-screen .wi-brand-flame { width: 42px; height: 42px; object-fit: contain; display: block; flex: 0 0 auto; } body.wi-admin-screen .wi-brand-word { font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--wi-ink); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } body.wi-admin-screen .wi-brand-word em { font-style: normal; color: var(--wi-brand); } /* Der Mikrofon-Kasten links im Titel-Balken war #202020 (dunkel) -> * jetzt Feuer-Orange, damit er auf Creme sichtbar bleibt. */ body.wi-admin-screen .apptopIcon { background-color: var(--wi-brand) !important; color: #fff !important; border-radius: 8px; } body.wi-admin-screen .apptopIcon i, body.wi-admin-screen .apptopIcon .dashicons { color: #fff !important; } /* Der Speichern-Knopf bleibt GRUEN, seine Schrift muss aber weiss sein. * Vorher erbte er die neue dunkle Textfarbe und war auf Gruen unlesbar. */ body.wi-admin-screen #saveIt, body.wi-admin-screen #saveIt > a, body.wi-admin-screen .appactionz a, body.wi-admin-screen .editTop .btn { color: #fff !important; } /* --- 5.2 Tab-Leiste (.editNav) + Tab-Punkte (.editItem) --- */ body.wi-admin-screen .editNav { background-color: var(--wi-cream) !important; background-image: none !important; border-bottom: 1px solid var(--wi-cream-line); } body.wi-admin-screen .editItem { color: var(--wi-ink-soft) !important; border-right: 1px solid var(--wi-cream-line) !important; } body.wi-admin-screen .editItem i { color: var(--wi-ink-soft) !important; } /* Aktiver + gehoverter Tab: Feuer-Orange mit weisser Schrift (bleibt Kontrast) */ body.wi-admin-screen .editSelected, body.wi-admin-screen .editSelected i, body.wi-admin-screen .editItem:hover, body.wi-admin-screen .editItem:hover i { background-color: var(--wi-brand) !important; background-image: none !important; color: #fff !important; border-right-color: var(--wi-brand) !important; } /* --- 5.3 Die Kopfbalken der Bereiche: .editTop + Accordion-Zeilen --- */ /* Der Titel-Balken (.editTop) liegt auf einem dunklen Traeger. Gemessen * 2026-10-05: .editTop selbst ist transparent, die Flaeche kam von der * alten Sektion darunter. Darum die ganze Sektion mit creme hinterlegen. */ body.wi-admin-screen .editTop, body.wi-admin-screen .editTop .appinfo { background-color: transparent !important; } body.wi-admin-screen .editTop { color: var(--wi-ink) !important; } body.wi-admin-screen .editTop .appinfo .weName, body.wi-admin-screen .editTop .appinfo .appTitle, body.wi-admin-screen .editTop .apptopTitle { color: var(--wi-ink) !important; } /* Der Ein-/Ausklapp-Schalter "Draft/Published" (toggle-switchy) und die * Leiste darum waren dunkel -> creme mit Flammen-Rand. * Gemessen 2026-10-05: das Label erbte color:#fff und war auf Creme unsichtbar. */ body.wi-admin-screen .editTop .toggle-switchy, body.wi-admin-screen .editTop .toggle-switchy + .label, body.wi-admin-screen .editTop .toggle-switchy .label { color: var(--wi-ink) !important; } body.wi-admin-screen .editTop .toggle-switchy > input + .toggle { background-color: var(--wi-cream-3) !important; border-color: var(--wi-cream-line) !important; } /* Die dunklen Accordion-Kopfzeilen ("Protected access" etc.) -> creme, * Text dunkel, Icon bleibt Orange. Der Pfeil hatte weisse Farbe. */ body.wi-admin-screen .editableSectionHeading, body.wi-admin-screen .editableSectionHeading_open, body.wi-admin-screen .editableSectionHeadingDASH { background-color: var(--wi-cream-2) !important; background-image: none !important; color: var(--wi-ink) !important; border-color: var(--wi-cream-line) !important; } body.wi-admin-screen .editableSectionHeading > a, body.wi-admin-screen .editableSectionHeadingDASH > a, body.wi-admin-screen .editableSectionHeadingDASH > a:active, body.wi-admin-screen .editableSectionHeadingDASH > a:hover, body.wi-admin-screen .editableSectionHeadingDASH > a:visited { color: var(--wi-ink) !important; } body.wi-admin-screen .editableSectionHeading:hover, body.wi-admin-screen .editableSectionHeading_open { background-color: var(--wi-cream-3) !important; } /* Die Icon-Kachel links in der Accordion-Zeile bleibt das Feuer. * Gemessen 2026-10-05: die Kachel (.editableSectionIcon) war rgba(0,0,0,.03) * mit weisser Schrift -> auf Creme praktisch unsichtbar. Jetzt Feuer-Orange * mit weisser Schrift. * WICHTIG: NUR .editableSectionIcon — NICHT .ctrl. Die Text-Badges * ("Webinar Date:", "Total Registrants:") tragen ebenfalls .ctrl und wuerden * sonst einen orangen Chip bekommen (Tobias 2026-10-05: "Nur die Schrift"). */ body.wi-admin-screen .editableSectionHeading .editableSectionIcon, body.wi-admin-screen .editableSectionHeadingDASH .editableSectionIcon, body.wi-admin-screen .editableSectionHeading_open .editableSectionIcon { background-color: var(--wi-brand) !important; color: #fff !important; } body.wi-admin-screen .editableSectionHeading .editableSectionIcon i, body.wi-admin-screen .editableSectionHeadingDASH .editableSectionIcon i, body.wi-admin-screen .editableSectionHeading .editableSectionIcon .dashicons, body.wi-admin-screen .editableSectionHeading_open .editableSectionIcon i { color: #fff !important; } /* --- 5.4 Grosse Flaechen: Listen, Panels, Wrapper --- */ body.wi-admin-screen .editArea, body.wi-admin-screen .dashHeaderListing, body.wi-admin-screen .dashList, body.wi-admin-screen .createWrapper, body.wi-admin-screen .wi-list-apps { background-color: var(--wi-cream) !important; background-image: none !important; color: var(--wi-ink); } body.wi-admin-screen .dashHeaderListing { color: var(--wi-ink-soft) !important; } /* --- 5.5 Der Editor-Inhalt: heller Grund, dunkle Schrift --- */ body.wi-admin-screen .editSection, body.wi-admin-screen .editArea .inputTitle, body.wi-admin-screen .editArea label { color: var(--wi-ink); } /* Hinweis-/Hilfetexte bleiben gedaempft, aber lesbar auf Creme. */ body.wi-admin-screen .editSection .wi-hint, body.wi-admin-screen .editArea .description, body.wi-admin-screen .editArea small { color: var(--wi-ink-soft); } /* --- 5.6 Die Webinar-LISTE: Filter-Tabs + Karten-Titel --- * Gemessen 2026-10-05: die Filter-Links ("All (264)", "Active" ...) und die * Karten-Header erbten color:#fff und waren auf Creme unsichtbar. */ body.wi-admin-screen #container .dashHeaderListing, body.wi-admin-screen #container .dashHeaderListing a, body.wi-admin-screen #container ul li a, body.wi-admin-screen #container .editableSectionHeadingDASH .wi-heading, body.wi-admin-screen #container .editableSectionHeadingDASH .editableSectionTitleDash, body.wi-admin-screen .wi-list-apps a, body.wi-admin-screen .wi-webinars-admin-toolbar a { color: var(--wi-ink) !important; } /* Zahlen in Klammern und Zusatz ("Unlinked SC") etwas gedaempft */ body.wi-admin-screen #container .dashHeaderListing .count, body.wi-admin-screen #container .dashHeaderListing span { color: var(--wi-ink-soft) !important; } /* Die Icon-Kachel der LISTEN-Karten bleibt das Feuer. * Gemessen 2026-10-05: rgba(0,0,0,.25) mit weissem Icon -> grauer Kasten auf * Creme. Jetzt Feuer-Orange mit weisser Schrift; der graue Grund verschwindet. * WICHTIG: nur die ICON-Kachel (.editableSectionIcon), NICHT die Text-Badges * (.ctrl) — die sollen ohne Chip nur Text sein (Tobias 2026-10-05). */ body.wi-admin-screen .wi-list-apps .wi-webinar .editableSectionIcon, body.wi-admin-screen .wi-list-apps .wi-webinar > .editableSectionIcon { background-color: var(--wi-brand) !important; color: #fff !important; } body.wi-admin-screen #listapps > div > div > a > div > span:first-child, body.wi-admin-screen #listapps .editableSectionIcon { background-color: var(--wi-brand) !important; color: #fff !important; } body.wi-admin-screen #listapps .editableSectionIcon i, body.wi-admin-screen #listapps > div > div > a > div > span:first-child i { color: #fff !important; } /* Datum/Uhrzeit- und Registrant-Badges in den Karten: dunkler Text auf * hellem Grund. Vorher weiss-auf-orange, was als oranger Block erschien * und den Text schwer lesbar machte. */ body.wi-admin-screen #listapps .wi-event-countdown--admin, body.wi-admin-screen #listapps .appMeta, body.wi-admin-screen #listapps .appMeta b { color: var(--wi-ink) !important; } /* Die Karten-Badges (.ctrl: EVERGREEN, Webinar Date, Total Registrants) * waren weiss-auf-orange. Tobias 2026-10-05: "Der Hintergrund um die Schrift * ist einfach nicht schoen. Nur die Schrift reicht." -> kein Chip, kein Rand, * kein Grund. Nur dunkler Text auf dem Creme der Karte. * WICHTIG: body.wi-admin-webinars-list mit in den Selektor — die Originaldatei * setzt dort .ctrl auf rgba(255,250,245,.95) !important mit hoeherer * Spezifitaet; body.wi-admin-screen allein gewinnt dagegen nicht. */ body.wi-admin-screen.wi-admin-webinars-list .wi-list-apps .editableSectionHeadingDASH .ctrl, body.wi-admin-screen.wi-admin-webinars-list .wi-list-apps .editableSectionHeadingDASH a .ctrl, body.wi-admin-screen.wi-admin-webinars-list .wi-list-apps .editableSectionHeading .ctrl, body.wi-admin-screen #listapps .wi-webinar .ctrl, body.wi-admin-screen #listapps .wi-webinar .ctrl span { background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; color: var(--wi-ink) !important; } /* Titel + Unterzeile der Liste-Karten auf dunkel (waren gegen #fff geerbt). */ body.wi-admin-screen #listapps .editableSectionWebinarTitle, body.wi-admin-screen #listapps .editableSectionTitle, body.wi-admin-screen #listapps .editableSectionTitleDash, body.wi-admin-screen #listapps .wi-heading { color: var(--wi-ink) !important; } body.wi-admin-screen #listapps .editableSectionTitleSmall { color: var(--wi-ink-soft) !important; } /* Ist-Zustand-Badges in den Karten behalten ihren Status-Ton (gruen/rot/gelb), * bekommen aber einen lesbaren Rahmen auf Creme. */ body.wi-admin-screen .wi-list-setup-progress { box-shadow: none !important; } /* --- 5.7 WI-Panel-Koepfe + Status-Schalter (tab1 "Webinar status") --- * Gemessen 2026-10-05: .weDashWebinarTitle war #333 + noise.png mit weisser * Schrift; die Status-Buttons .webinarStatus #3a383c. Das war der grosse * dunkle Block mitten auf der Overview. */ body.wi-admin-screen .weDashWebinarTitle, body.wi-admin-screen .wi-dash-webinar-title, body.wi-admin-screen .weDashWebinarTitle h2, body.wi-admin-screen .weDashWebinarTitle p, body.wi-admin-screen .dashWebinarTitleCopy h2, body.wi-admin-screen .dashWebinarTitleCopy p { color: var(--wi-ink) !important; } body.wi-admin-screen .weDashWebinarTitle, body.wi-admin-screen .wi-dash-webinar-title { background-color: var(--wi-cream-2) !important; background-image: none !important; text-shadow: none !important; border: 1px solid var(--wi-cream-line); border-bottom: 0; } body.wi-admin-screen .dashWebinarTitleIcon i { color: var(--wi-brand) !important; } /* Die Status-Schalter (Countdown / Live / Replay / Closed) */ body.wi-admin-screen .webinarStatus { background-color: var(--wi-cream-3) !important; color: var(--wi-ink) !important; text-shadow: none !important; } /* Tobias 2026-10-08: Die Icons trugen eine FESTE helle Farbe (#F9F6EE) und * waren damit auf creme (inaktiv) wie auf orange (aktiv) praktisch unsichtbar. * Gemessen: .webinarStatus i -> rgb(249,246,238). Jetzt wie in der Live-Konsole: * inaktiv dunkel, aktiv weiss — das Icon erbt die Textfarbe mit. */ body.wi-admin-screen .webinarStatus i, body.wi-admin-screen .webinarStatus svg { color: var(--wi-ink) !important; fill: var(--wi-ink) !important; } body.wi-admin-screen .webinarStatus:hover, body.wi-admin-screen .webinarStatusSelected, body.wi-admin-screen .webinarStatusSelected:hover { background-color: var(--wi-brand) !important; color: #fff !important; } /* Tobias 2026-10-16: Der aktive Schalter blieb trotz !important dunkel — die * Inline-Kritik-CSS aus inc/wi-admin-functions.php (Body-End-Styles) setzt * .webinarStatus{color:#3c2f26} und liegt in der Kaskade hinter allem. Diese * Regel mit zusaetzlicher #mWrapper-Ebene und dem Attribut-Selektor gewinnt * eindeutig, unabhaengig von der Reihenfolge. Text UND Inhalt weiss. */ body.wi-admin-screen #mWrapper ul.webinarStatusGroup a.webinarStatusSelected, body.wi-admin-screen #mWrapper ul.webinarStatusGroup a.webinarStatus:hover, body.wi-admin-screen ul.webinarStatusGroup a.webinarStatusSelected, body.wi-admin-screen ul.webinarStatusGroup a.webinarStatus:hover { background-color: var(--wi-brand) !important; color: #fff !important; } body.wi-admin-screen .webinarStatus:hover i, body.wi-admin-screen .webinarStatus:hover svg, body.wi-admin-screen .webinarStatusSelected i, body.wi-admin-screen .webinarStatusSelected svg { color: #fff !important; fill: #fff !important; } /* Ausgegraute ("Replay" ohne Aufnahme) bleiben erkennbar inaktiv, aber * lesbar auf Creme — vorher #2a282c mit #8a8888. */ body.wi-admin-screen a.webinarStatus.wi-master-replay-disabled, body.wi-admin-screen a.webinarStatus.wi-master-replay-disabled:hover { background-color: #efe9dd !important; color: #9a9086 !important; } body.wi-admin-screen a.webinarStatus.wi-master-replay-disabled i, body.wi-admin-screen a.webinarStatus.wi-master-replay-disabled svg { color: #9a9086 !important; fill: #9a9086 !important; } /* --- 5.8 Alle verbleibenden dunklen WI-Flaechen (gemessen 2026-10-05) --- * Aus webinarignition-admin.css zusammengetragen: jede Regel mit einem dunklen * Wert (#333/#212121/#202020/#1e1e1e/#1f1f1f/#161616/#121212/#353337/#3a383c * oder var(--wi-color-black-light)/var(--wi-color-light-black-bg)). * Hier gezielt auf Creme gezogen — nur unter body.wi-admin-screen. */ /* Kleine dunkle Helfer */ body.wi-admin-screen .pagination a:hover, body.wi-admin-screen kbd { background-color: var(--wi-cream-3) !important; color: var(--wi-ink) !important; } /* Ausgewaehlte Bild-/Medienkachel (dub_select_image_selected) */ body.wi-admin-screen .dub_select_image_selected { background-color: var(--wi-cream-3) !important; border-color: var(--wi-brand) !important; } /* Datums-Kopf (weDashDateTitle): war dunkelbraun -> warmes Creme */ body.wi-admin-screen .weDashDateTitle { background-color: var(--wi-cream-2) !important; background-image: none !important; color: var(--wi-ink) !important; } body.wi-admin-screen .weDashDateTitle h2, body.wi-admin-screen .weDashDateTitle p { color: var(--wi-ink) !important; } body.wi-admin-screen .weDashDateTitle .dashWebinarTitleIcon i { color: var(--wi-brand) !important; } /* Die Listen-/Zeilen-Hintergruende (.dashHeaderListing, .dashList) */ body.wi-admin-screen .dashHeaderListing, body.wi-admin-screen .dashList { background-color: var(--wi-cream) !important; color: var(--wi-ink-soft) !important; } /* Gehoverte Accordion-Zeile */ body.wi-admin-screen .editableSectionHeading:hover, body.wi-admin-screen .editableSectionHeading_open { background-color: var(--wi-cream-3) !important; color: var(--wi-ink) !important; } /* --- 5.9 Die Onboarding-Karte ("Create your first webinar") --- * Die Karte liegt INNERHALB von #listapps.wi-list-apps (nicht in #container) * und ist fuer DUNKLEN Grund gebaut: .wi-onboarding-hero__title color:#fff, * Karte rgba(255,255,255,.07) -> auf Creme unsichtbar (gemessen 2026-10-05). * * Warum die frueheren Regeln nicht griffen: der Browser hielt eine 1 Jahr * gecachte Altfassung dieser Datei (?ver=4.19.371, dieser Block fehlte) — * die enqueue-Stelle gibt dem Stylesheet keinen Inhalts-Fingerprint mit. * Der Fix wird darum mit #listapps-Scope (hoehere Spezifitaet als die Liste- * Regel "body.wi-admin-screen .wi-list-apps a") UND !important festgenagelt. */ body.wi-admin-screen #listapps .wi-onboarding-hero, body.wi-admin-screen .wi-onboarding-hero, body.wi-admin-screen [aria-label="Create your first webinar"] { background-color: var(--wi-cream-2) !important; border-color: var(--wi-cream-line) !important; color: var(--wi-ink) !important; } body.wi-admin-screen #listapps .wi-onboarding-hero__title, body.wi-admin-screen #listapps .wi-onboarding-hero__lead, body.wi-admin-screen .wi-onboarding-hero__title, body.wi-admin-screen .wi-onboarding-hero p, body.wi-admin-screen .wi-onboarding-hero strong, body.wi-admin-screen .wi-onboarding-hero__lead { color: var(--wi-ink) !important; } body.wi-admin-screen #listapps .wi-onboarding-hero a, body.wi-admin-screen #listapps .wi-onboarding-hero__mcp-toggle, body.wi-admin-screen .wi-onboarding-hero a, body.wi-admin-screen .wi-onboarding-hero__secondary a, body.wi-admin-screen .wi-onboarding-hero__mcp-toggle, body.wi-admin-screen .wi-onboarding-hero__mcp a { color: var(--wi-brand) !important; } /* Die ausgeklappte MCP-Fussnote war im Original ein dunkler Kasten * (rgba(0,0,0,.25)) mit hellem Text — auf dem cremigen Grund ein Fremdkoerper. * Hier hell und lesbar, der Fussnoten-Link in Marken-Orange. */ body.wi-admin-screen #listapps .wi-onboarding-hero__mcp, body.wi-admin-screen .wi-onboarding-hero__mcp { background: var(--wi-cream-3) !important; color: var(--wi-ink-soft) !important; } /* --- 5.10 Sicherheitsnetz: Fliesstext auf WI-Seiten dunkel --- * Garantiert "alle Texte sichtbar" (Tobias 2026-10-05) fuer Ueberschriften * und Absaetze, die vorher weiss auf dunkel geerbt haben. Beschreibungs- und * Hinweistexte bleiben bewusst gedaempft (--wi-ink-soft). */ body.wi-admin-screen #container h1, body.wi-admin-screen #container h2, body.wi-admin-screen #container h3, body.wi-admin-screen #container h4, body.wi-admin-screen #container p, body.wi-admin-screen #container label, body.wi-admin-screen #container strong, body.wi-admin-screen #container b { color: var(--wi-ink) !important; } body.wi-admin-screen #container .description, body.wi-admin-screen #container small, body.wi-admin-screen #container .wi-hint, body.wi-admin-screen #container .editableSectionTitleSmall { color: var(--wi-ink-soft) !important; } /* ===================================================================== * 6. WARNUNG: NICHT die GANZE Datei umfaerben */ /* --- 5.11 Icon-Feinheiten (Tobias 2026-10-05) --- * Gemessen 2026-10-05 im Editor auf Staging (browser.inspect): * .editNav .editItem i (inaktiv, 2. Tab) -> color rgb(107, 92, 80) = #6b5c50 * .editNav .editSelected i (aktiv) -> color rgb(255,255,255) auf rgb(230,79,29) * Beides hier festgenagelt, damit die inaktiven Tab-Icons nicht wieder in ein * fast-schwarzes Erben zurueckfallen — gedaempft, aber klar lesbar. * * Die Kachel .editableSectionIcon der Accordion-Kopfzeilen ist im Original * (webinarignition-admin.css) background-color: rgba(0,0,0,.25) mit weissem * Icon. Auf dem cremefarbenen Grund ergibt das einen dunklen Kasten, der wie * "ausgeschaltet" wirkt. Abschnitt 5.3 faerbte nur .ctrl (kommt in diesem * Markup nicht vor) und den Icon-Text weiss — nicht aber den Kachel-Grund. * Hover/offen und die Listen-Karten (#listapps) sind laengst orange; hier * ziehen wir die Editor-Accordion-Kacheln nach. Der weisse Icon-Text bleibt * ueber 5.3 erhalten. */ body.wi-admin-screen .editNav .editItem i { color: #6b5c50 !important; /* inaktive Tab-Icons: gedaempft, aber sichtbar */ } body.wi-admin-screen .editNav .editSelected i { color: #fff !important; /* aktiver Tab: weiss auf Orange */ } body.wi-admin-screen .editableSectionHeading .editableSectionIcon, body.wi-admin-screen .editableSectionHeading_open .editableSectionIcon { background-color: var(--wi-brand) !important; background-image: none !important; } /* --- 5.13 Countdown-Chip im Titel-Balken ("Running for 4d 23h") --- * Gemessen 2026-10-05: .editTop .wi-event-countdown--admin hat color:#fff * (inc/lp/css/wi-event-countdown.css:83). Auf dem jetzt cremigen .editTop war * der Chip damit unlesbar (Tobias' Screenshot "Running for 4d 23h not seen"). * Hier dunkel auf Creme, das Label gedaempft. */ body.wi-admin-screen .editTop .wi-event-countdown--admin, body.wi-admin-screen .wi-event-countdown--admin { color: var(--wi-ink) !important; } body.wi-admin-screen .editTop .wi-event-countdown--admin .wi-event-countdown-label, body.wi-admin-screen .wi-event-countdown--admin .wi-event-countdown-label { color: var(--wi-ink-soft) !important; opacity: 1 !important; } body.wi-admin-screen .editTop .wi-event-countdown--admin .wi-event-countdown-value, body.wi-admin-screen .wi-event-countdown--admin .wi-event-countdown-value { color: var(--wi-ink) !important; } /* Die Markierungs-Blaustreifen (Auswahl im Titel-Bereich) waren #7da7d9-artig. * Auf Creme ziehen wir sie auf einen warmen hellen Auswahl-Ton. */ body.wi-admin-screen .editTop ::selection, body.wi-admin-screen #container ::selection { background: rgba(230, 79, 29, 0.22); color: var(--wi-ink); } /* --- 5.14 Onboarding-Karte, elternunabhaengig (2026-10-05) --- * Die Karte (.wi-onboarding-hero) liegt in der Webinar-Liste mal innerhalb, * mal ausserhalb von #listapps — der #listapps-Scope in 5.9/5.12 griff darum * nicht zuverlaessig. Diese Regeln haengen NUR an body.wi-admin-screen und * schlagen die dunklen Originalwerte (weisser Text, rgba(255,255,255,.07)). */ body.wi-admin-screen .wi-onboarding-hero { background-color: var(--wi-cream-2) !important; border-color: var(--wi-cream-line) !important; color: var(--wi-ink) !important; } body.wi-admin-screen .wi-onboarding-hero__title, body.wi-admin-screen .wi-onboarding-hero__lead, body.wi-admin-screen .wi-onboarding-hero__secondary, body.wi-admin-screen .wi-onboarding-hero p { color: var(--wi-ink) !important; } body.wi-admin-screen .wi-onboarding-hero a, body.wi-admin-screen .wi-onboarding-hero__mcp-toggle, body.wi-admin-screen .wi-onboarding-hero__secondary a { color: var(--wi-brand) !important; } body.wi-admin-screen .wi-onboarding-hero__mcp { background: var(--wi-cream-3) !important; color: var(--wi-ink-soft) !important; } /* --- 5.12 Restliche dunkle Balken: die schwebende Speicher-Leiste (.appactionz) --- * Gemessen 2026-10-05 auf Staging (browser.inspect, Tab 1/3/6, desktop + mobil): * .appactionz -> desktop (1440): Hintergrund rgba(0,0,0,0) = okay * .appactionz -> schwebend, <=1024px: rgb(28,27,30) = DUNKLER BALKEN * Beim Scrollen zieht assets/webinarignition-admin.js (Zeile 102-148) die Zeile * .appactionz — Status-Umschalter "Draft" + "Save & Update" — auf position:fixed. * Unter 1025px setzt es dabei INLINE `bar.style.background = 'rgba(28, 27, 30, 0.96)'` * (Zeile 132). Genau das war der schwarze, schwebende Balken, der ueber dem * Tab-Inhalt klebt (Tobias' Screenshot). Bei breiten Fenstern bleibt der Grund * bewusst transparent (`bar.style.background = ''`). * * Tobias 2026-10-08: Vorher lag hier DAUERHAFT ein Cremefeld mit Rand + Schatten * auf der Zeile Countdown/Toggle/Save — im ruhenden Kopfbalken erschien das als * weisser Kasten um "Startet in 12T 18Std". Gewuenscht: KEIN Hintergrund im Kopf. * Der Grund/Rahmen/Schatten kommt jetzt NUR im schwebenden Zustand — und den * setzt das JS selbst (assets/webinarignition-admin.js, Zeile 139-143: cremiger * Grund + Flammen-Rand + warmes Schatten). Diese CSS-Vorgabe von 2026-10-05 * haette ihn nur doppelt; hier faellt sie weg. Der gestrichene Grund-Fix fuer * den dunklen Balken bleibt als Absicherung: das JS setzt ihn nur mobil, daher * decken die Media-Regeln unten weiter den schmalen Bereich ab. */ body.wi-admin-screen .appactionz { background-color: transparent !important; background-image: none !important; color: var(--wi-ink) !important; } /* Tobias 2026-10-16: "Startet in 12T 18Std ohne Hintergrund bitte." * Der Balken bekam unter 1025px einen cremigen Grund mit Rand und Schatten — * das war der weisse Kasten um den Countdown. Jetzt auch schwebend OHNE * Grund/Rand/Schatten; die Leiste bleibt per JS position:fixed und schwebt * frei ueber dem Inhalt. */ @media screen and (max-width: 1024px) { body.wi-admin-screen .appactionz { background-color: transparent !important; border: 0 !important; box-shadow: none !important; } } /* --- 5.15 Free-Kopf: einheitlich grau, eine Reihe, kein Abschneiden --- * Tobias 2026-10-05: In der Free-Version soll die Marke GRAU sein (wie vorher), * sichtbar "Free", alles auf einer Linie und ohne dass "WebinarIgnition" * links aus dem Kopf ragt. Der Header traegt dafuer die Klasse .wi-head--free * (UI/index.php). Nur Farben/Layout des Kopfes, keine Funktion. */ body.wi-admin-screen .wi-head--free #mLogo, body.wi-admin-screen .wi-head--free #mLogo .webinar_logo_license_cont { align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 12px !important; overflow: visible !important; } /* Wortmarke grau + kleiner, damit sie NIE abgeschnitten wird */ body.wi-admin-screen .wi-head--free .wi-brand-mark { color: #6b6560 !important; max-width: 100% !important; overflow: visible !important; flex-wrap: nowrap !important; } body.wi-admin-screen .wi-head--free .wi-brand-flame { width: 38px !important; height: 38px !important; opacity: 0.55 !important; /* Flamme gedaempft = grauer Gesamteindruck */ filter: grayscale(1) !important; } /* Sicherheitsnetz (Tobias 2026-10-06): in der Free-Version darf der GANZE Kopf * keinerlei Farbe zeigen. Falls ein Element (Bild, Icon) noch eine Farbe * mitbringt, wird sie hier zuverlaessig entfernt. */ body.wi-admin-screen .wi-head--free #mLogo, body.wi-admin-screen .wi-head--free #mLogo *, body.wi-admin-screen .wi-head--free .wi-brand-mark, body.wi-admin-screen .wi-head--free .wi-brand-mark * { filter: grayscale(1) !important; } body.wi-admin-screen .wi-head--free .wi-brand-word { color: #6b6560 !important; /* einheitliches Grau fuer "Webinar" UND "Ignition" */ font-size: 21px !important; /* kleiner, damit alles in die Breite passt */ white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } body.wi-admin-screen .wi-head--free .wi-brand-word em { color: #6b6560 !important; /* das rote "Ignition" wird ebenfalls grau */ } /* Der Lizenz-Text ("Free") in derselben Reihe, gleiche Schriftgroesse */ body.wi-admin-screen .wi-head--free #licenseTitle { color: #6b6560 !important; font-size: 21px !important; line-height: 1 !important; padding-top: 0 !important; align-self: center !important; white-space: nowrap !important; } /* Auch alle Texte im Free-Kopf grau (z. B. Reste des alten Logos) */ body.wi-admin-screen .wi-head--free #mHeader, body.wi-admin-screen .wi-head--free #mLogo { color: #6b6560 !important; } /* Auf schmalen Schirmen etwas kleiner, damit nichts abgeschnitten wird */ @media screen and (max-width: 1100px) { body.wi-admin-screen .wi-head--free .wi-brand-word, body.wi-admin-screen .wi-head--free #licenseTitle { font-size: 18px !important; } body.wi-admin-screen .wi-head--free .wi-brand-flame { width: 32px !important; height: 32px !important; } } /* --- 5.16 Der graue InteL-Kasten in der Webinar-Liste --- * Tobias 2026-10-05: "der dunkle Kasten" in der Liste. Gemessen: das Board * (.wi-sc-unlinked-board) ist WP-Standardgrau rgb(240,240,241) mit weissen * Zeilen darin — auf dem warmen Creme wirkt das wie ein kalter Fremdkoerper. * Hier auf die Marken-Creme-Palette gezogen, damit es EIN Guss ist. * Quelle der Box: inc/wi-page-mode-admin.php (inline-