/* * Dunkelmodus für die öffentliche Website. * * Die Verwaltung hat ihren Dunkelmodus seit Längerem; er lebt in * verwaltung.css und färbt alles, was das Plugin selbst zeichnet. Diese * Datei kümmert sich um das, was das Theme zeichnet: Kopfleiste, Menü, * Divi-Abschnitte, Karten, Fußzeile, Fließtext. * * Drei Entscheidungen, die den Aufbau erklären: * * 1. Die Leinwand entspricht exakt --emp-grund aus verwaltung.css. Dadurch * gehen die Plugin-Bereiche (Statusgitter, Anmeldeformular) ohne Naht in * die Seite über — sie färben sich ohnehin schon selbst mit. * * 2. Erst eine allgemeine Regel für ALLE Abschnitte, danach die Einzelfälle. * Wer später einen Abschnitt hinzufügt, bekommt dadurch schlimmstenfalls * die dunkle Leinwand statt des Markenblaus — nie eine weiße Fläche im * dunklen Bild. * * 3. Die Wellen zwischen den Abschnitten sind SVG-Bilder mit fest * eingebackener Farbe. Sie werden am Ende der Datei durch umgefärbte * Fassungen ersetzt, sonst stünden helle Keile im dunklen Bild. */ :root[data-emp-theme="dark"] { /* Leinwand, weiße Abschnitte, Kopfleiste — deckungsgleich mit --emp-grund. */ --oef-grund: #1c1f24; /* Die hellblauen Bänder (#6593cd). Bleiben als Band erkennbar, ohne im Dunkeln zu leuchten. */ --oef-band: #232e40; /* Die dunkelblauen Karten, Klappkästen und die Fußzeile (#3a4f84). Dunkler als das Band, damit die Schichtung erhalten bleibt. */ --oef-karte: #1a2333; /* Die eine weiße Karte im blauen Band — heller als das Band, wie im Hellmodus auch. */ --oef-karte-hell: #2c3444; --oef-rahmen: #39414e; --oef-text: #ccd2da; --oef-text-stark: #e8eaee; --oef-text-leise: #a2a9b3; /* Markenblau als Schrift: #3a4f84 und #6593cd sind auf dunklem Grund nicht lesbar, deshalb aufgehellt bei gleichem Farbton. */ --oef-marke: #8fb4e4; --oef-link: #6cb6e0; } /* ============================================================ Leinwand ============================================================ */ :root[data-emp-theme="dark"] body, :root[data-emp-theme="dark"] #page-container, :root[data-emp-theme="dark"] #et-main-area, :root[data-emp-theme="dark"] #main-content, :root[data-emp-theme="dark"] article { background-color: var(--oef-grund); color: var(--oef-text); } /* ============================================================ Kopfleiste und Menü ============================================================ */ :root[data-emp-theme="dark"] #main-header, :root[data-emp-theme="dark"] #top-header, :root[data-emp-theme="dark"] #main-header.et-fixed-header, :root[data-emp-theme="dark"] .et_mobile_menu, :root[data-emp-theme="dark"] #mobile_menu { background-color: var(--oef-grund); box-shadow: 0 1px 0 var(--oef-rahmen); } :root[data-emp-theme="dark"] #top-menu a, :root[data-emp-theme="dark"] .et_mobile_menu a, :root[data-emp-theme="dark"] #et_search_icon::before, :root[data-emp-theme="dark"] .mobile_nav .select_page { color: var(--oef-text); } :root[data-emp-theme="dark"] #top-menu li.current-menu-item > a, :root[data-emp-theme="dark"] #top-menu a:hover { color: var(--oef-link); } :root[data-emp-theme="dark"] .et_mobile_menu li a { border-color: var(--oef-rahmen); } /* Das Logo ist dunkelblaue Schrift auf durchsichtigem Grund — auf der dunklen Leinwand wäre es praktisch unsichtbar. Umkehren plus halbe Farbdrehung hebt die Helligkeit an und behält den Blauton bei. */ :root[data-emp-theme="dark"] #logo { filter: invert(1) hue-rotate(180deg); } /* ============================================================ Abschnitte — erst allgemein, dann die Einzelfälle Das !important ist nicht Bequemlichkeit: Divi setzt dieselben Farben als „.et_pb_section_1.et_pb_section" ebenfalls mit !important. Dagegen hilft kein Gewicht, sondern nur ein eigenes !important. Die Abschnittsnummern werden doppelt genannt (.et_pb_section.et_pb_section_1) und tragen bewusst KEIN #page-container. Damit wiegen sie schwerer als Divi, aber leichter als die Verwaltungsregel in verwaltung.css, die auf Seiten mit Dashboard alles auf den Seitengrund zieht. So bekommt jede Seite von selbst das Richtige: die öffentliche ihre Bänder, die Verwaltung ihren ruhigen Grund — ganz ohne zweite :has()-Abfrage. Die Nummern vergibt Divi je Seite neu; ohne diese Rangfolge hätte ein „Abschnitt 1" der Verwaltungsseite ein blaues Band abbekommen. ============================================================ */ :root[data-emp-theme="dark"] .et_pb_section { background-color: var(--oef-grund) !important; } /* Die drei Markenbänder der Startseite. */ :root[data-emp-theme="dark"] .et_pb_section.et_pb_section_1, :root[data-emp-theme="dark"] .et_pb_section.et_pb_section_2, :root[data-emp-theme="dark"] .et_pb_section.et_pb_section_3 { background-color: var(--oef-band) !important; } /* Fußzeile aus dem Theme Builder. */ :root[data-emp-theme="dark"] .et_pb_section.et_pb_section_0_tb_footer { background-color: var(--oef-karte) !important; } /* Der Kopfbereich behält sein Foto. Nur abgedunkelt, damit er im dunklen Bild nicht als Leuchtfläche steht. */ :root[data-emp-theme="dark"] .et_pb_section_parallax { background-color: transparent; } :root[data-emp-theme="dark"] .et_parallax_bg { filter: brightness(0.55); } /* ============================================================ Karten, Klappkästen ============================================================ */ :root[data-emp-theme="dark"] .et_pb_blurb_0, :root[data-emp-theme="dark"] .et_pb_toggle, :root[data-emp-theme="dark"] .et_pb_toggle_open, :root[data-emp-theme="dark"] .et_pb_toggle_close { background-color: var(--oef-karte); border-color: var(--oef-rahmen); } :root[data-emp-theme="dark"] .et_pb_blurb_1 { background-color: var(--oef-karte-hell); } /* ============================================================ Schrift ============================================================ */ :root[data-emp-theme="dark"] .et_pb_text, :root[data-emp-theme="dark"] .et_pb_blurb_description, :root[data-emp-theme="dark"] .et_pb_toggle_content, :root[data-emp-theme="dark"] #main-content p, :root[data-emp-theme="dark"] #main-content li { color: var(--oef-text); } :root[data-emp-theme="dark"] #main-content h1, :root[data-emp-theme="dark"] #main-content h2, :root[data-emp-theme="dark"] #main-content h3, :root[data-emp-theme="dark"] #main-content h4, :root[data-emp-theme="dark"] #main-content h5, :root[data-emp-theme="dark"] #main-content h6, :root[data-emp-theme="dark"] .et_pb_toggle_title { color: var(--oef-text-stark); } :root[data-emp-theme="dark"] #main-content a:not(.et_pb_button):not(.icon) { color: var(--oef-link); } /* ============================================================ Markenblau als Schrift #3a4f84 ist auf Weiß eine gute Überschriftenfarbe und auf dunklem Grund eine unlesbare: gemessen 1,56:1 gegen die Karte und 2,07:1 gegen die Leinwand. Verlangt sind 4,5:1, für große Schrift 3:1. --oef-marke ist derselbe Farbton, nur so weit aufgehellt, dass er beides schafft. Divi setzt das Blau am Klapptext selbst, und alles darin erbt es — auch das Symbol, das keine eigene Farbe hat. Deshalb wird zuerst der Kasten umgefärbt und erst danach die Überschrift: Wer wie das Symbol im linken Kasten schon eine eigene Farbe mitbringt, behält sie so. Ein !important stünde dem im Weg und ist hier auch nicht nötig — die Kästen liegen außerhalb von #main-content, und genau deshalb hatte die allgemeine Überschriftenregel im Abschnitt darüber sie nie erwischt. ============================================================ */ :root[data-emp-theme="dark"] #page-container .et_pb_blurb { color: var(--oef-text); } :root[data-emp-theme="dark"] #page-container .et_pb_blurb .et_pb_module_header, :root[data-emp-theme="dark"] #page-container .et_pb_blurb .et_pb_module_header span { color: var(--oef-marke); } /* Zwei Symbole tragen das Blau nicht geerbt, sondern von Divi einzeln zugewiesen; geerbte Farben umzufärben hilft dort nicht. Die übrigen Symbole sind bereits weiß und werden absichtlich nicht mitgenannt. */ :root[data-emp-theme="dark"] #page-container .et_pb_blurb_1 .et-pb-icon, :root[data-emp-theme="dark"] #page-container .et_pb_icon_0 .et-pb-icon { color: var(--oef-marke); } /* ============================================================ Formularfelder Die Anmeldeformulare des Plugins und das Kontaktformular von Divi zeichnen ihre Felder weiß. Im dunklen Bild standen sie als leuchtende Blöcke — der auffälligste Fehler der ersten Fassung. Verwaltungsseiten sind hier nicht gemeint: deren Felder färbt verwaltung.css bereits über .emp-dashboard / .m40-dashboard. Die Werte sind dieselben, damit ein Feld überall gleich aussieht. Gefärbt wird über die Variablen aus verwaltung.css und nicht über eigene: Die Felder stehen mitten in den Plugin-Bausteinen, und die färben sich von dort. Zwei Farbsätze nebeneinander würden auffallen. Neben #page-container stehen .emp-modal und .m40-modal, und zwar notgedrungen: Die Anmeldefenster von Gebetskette und Messen werden beim Öffnen an den Seitenkörper gehängt, damit sie über der Kopfleiste liegen können (siehe empFensterFreistellen in script.js). Sie stehen dann außerhalb von #page-container — mit der ID allein blieben genau ihre Felder weiß. Die drei Namen stecken zusammen in einem :is(), weil :is() das Gewicht seines schwersten Gliedes annimmt: Alle drei wiegen dadurch so viel wie die ID, und die brauchen wir gegen Divis eigene Feldfarben. ============================================================ */ :root[data-emp-theme="dark"] :is( #page-container, .emp-modal, .m40-modal ) :is( .emp-form, .emp-reg-form, .m40-form, .m40-reg-form, .et_pb_contact_form ) :is( input, select, textarea ) { background-color: var(--emp-flaeche-hoch); color: var(--emp-text); border-color: var(--emp-rahmen-stark); } /* Das Suchfeld in der Kopfleiste zeichnet Divi ebenfalls weiß. Es wird zurzeit gar nicht ausgegeben — darstellung.php schaltet die Lupe ab. Die Regel bleibt trotzdem stehen: Wer die Suche zurückholt, soll sie nicht im Hellen wiederfinden. */ :root[data-emp-theme="dark"] #main-header .et-search-form input, :root[data-emp-theme="dark"] #et_top_search .et-search-field { background-color: transparent; color: var(--emp-text); } /* Der Platzhaltertext („– Bitte wählen –", „Deine E-Mail") wäre sonst so hell wie der Eingabetext und ließe ein leeres Feld gefüllt aussehen. */ :root[data-emp-theme="dark"] :is( #page-container, .emp-modal, .m40-modal ) ::placeholder { color: var(--emp-text-still); opacity: 1; } /* Das Kalendersymbol in Datumsfeldern ist schwarz gezeichnet — auf dunklem Grund verschwände es. Gleiche Nachbesserung wie in der Verwaltung. */ :root[data-emp-theme="dark"] :is( #page-container, .emp-modal, .m40-modal ) input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); } /* ============================================================ Knöpfe des Themes Anders als bei den Abschnitten kommt Divi hier ohne !important aus — „body #page-container .et_pb_section .et_pb_button_0". Ein eigenes #page-container wiegt schwerer, das genügt. Die beiden Blautöne sind die abgedunkelten Marken-Blaus — #6593cd wird zu #3d6ea8, #3a4f84 zu #33507d. Weiße Schrift bleibt darauf gut lesbar. ============================================================ */ :root[data-emp-theme="dark"] #page-container .et_pb_button { color: #ffffff; } :root[data-emp-theme="dark"] #page-container .et_pb_button_0 { background-color: #3d6ea8; border-color: #3d6ea8; } :root[data-emp-theme="dark"] #page-container .et_pb_button_1 { background-color: #33507d; border-color: #33507d; } /* Der Absendeknopf des Divi-Kontaktformulars trägt keine der beiden Nummern und blieb deshalb außen vor: dunkelblaue Schrift auf durchsichtigem Grund, 2,07:1. Er bekommt dasselbe wie Knopf 0. Die lange Selektorkette ist kein Zierrat: Divi färbt diesen einen Knopf über „body #page-container .et_pb_section .et_pb_contact_form_0…" mit !important. Kürzer wiegt zu leicht. */ :root[data-emp-theme="dark"] #page-container .et_pb_section .et_pb_module.et_pb_contact_form_container .et_pb_contact_submit { background-color: #3d6ea8 !important; border-color: #3d6ea8 !important; color: #ffffff !important; } /* ============================================================ Die Wellen zwischen den Abschnitten Umgefärbte Fassungen der von Divi erzeugten SVGs. Weiß wird zur Leinwand, #6593CD zum Band, #3A4F84 zur Kartenfarbe. ============================================================ */ :root[data-emp-theme="dark"] .et_pb_section.et_pb_section_1 > .et_pb_top_inside_divider { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMxYzFmMjQiPjxwYXRoIGQ9Ik0xNTYgMzUuNDFsOTUuNDYgMzQuNzMgMTIwLjA0LjI1IDcxLjUgMzMuMjQgOTAuMDktMy44OUw2NDAgMTM3LjI1bDEwMi4zOS0zNy4wNiA4NS41NSAxMC42MSA4OC4xMS03LjE3TDk5MiA2NS4wOGw3My4yMSA1LjMxTDExMzIgNDguMzVsNzctLjQyTDEyODAgMEgwbDY0LjggMzguNTcgOTEuMi0zLjE2eiIgZmlsbC1vcGFjaXR5PSIuNSIvPjxwYXRoIGQ9Ik0xNTYgMjguMzJsOTUuNDYgMjcuNzkgMTIwLjA0LjJMNDQzIDgyLjlsOTAuMDktMy4xMUw2NDAgMTA5LjhsMTAyLjM5LTI5LjY1IDg1LjU1IDguNDkgODguMTEtNS43NEw5OTIgNTIuMDdsNzMuMjEgNC4yNEwxMTMyIDM4LjY4bDc3LS4zNEwxMjgwIDBIMGw2NC44IDMwLjg2IDkxLjItMi41NHoiLz48L2c+PC9zdmc+"); } :root[data-emp-theme="dark"] .et_pb_section.et_pb_section_1 > .et_pb_bottom_inside_divider { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMxYzFmMjQiPjxwYXRoIGQ9Ik0xMDkzLjQ4IDEzMS44NUwxNzMgOTRhNzYuODUgNzYuODUgMCAwIDEtMzYuNzktMTEuNDZMMCAwdjE0MGgxMjgwVjBsLTEzMS44MSAxMTEuNjhjLTE2LjQ3IDEzLjk2LTM1LjQ3IDIwLjk2LTU0LjcxIDIwLjE3eiIvPjwvZz48L3N2Zz4="); } :root[data-emp-theme="dark"] .et_pb_section.et_pb_section_2 > .et_pb_top_inside_divider { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMxYzFmMjQiPjxwYXRoIGQ9Ik0xMjgwIDBMNjQwIDcwIDAgMHYxNDBsNjQwLTcwIDY0MCA3MFYweiIgZmlsbC1vcGFjaXR5PSIuNSIvPjxwYXRoIGQ9Ik0xMjgwIDBIMGw2NDAgNzAgNjQwLTcweiIvPjwvZz48L3N2Zz4="); } :root[data-emp-theme="dark"] .et_pb_section.et_pb_section_4 > .et_pb_top_inside_divider { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMyMzJlNDAiPjxwYXRoIGQ9Ik0wIDB2NjBzNTczLjA5IDgwIDEyODAgODBWMHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAwdjMwczU3My4wOSAxMTAgMTI4MCAxMTBWMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCAwczU3My4wOSAxNDAgMTI4MCAxNDBWMHoiLz48L2c+PC9zdmc+"); } :root[data-emp-theme="dark"] .et_pb_section.et_pb_section_4 > .et_pb_bottom_inside_divider { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMxYTIzMzMiPjxwYXRoIGQ9Ik0wIDB2MTQwaDEyODBMMCAweiIgZmlsbC1vcGFjaXR5PSIuNSIvPjxwYXRoIGQ9Ik0wIDQydjk4aDEyODBMMCA0MnoiLz48L2c+PC9zdmc+"); } /* ============================================================ Der Umschalter — gilt in BEIDEN Darstellungen, steht deshalb außerhalb der Dunkelmodus-Regeln. Er wird zweimal ausgegeben: als Knopf in der Kopfleiste (für den Rechner) und als Menüpunkt (für das aufklappbare Handy-Menü). Sichtbar ist immer nur einer. Zwei Ausgaben statt einer, weil beide an ganz verschiedenen Stellen im Seitengerüst hängen — die Kopfleiste kennt das Handy-Menü nicht und umgekehrt. ============================================================ */ /* Die zweite Zeile ist für das Handy-Menü: Divi setzt dort „.et_mobile_menu li a { display: block }" und schlägt damit die erste. Ohne Reihe säße das Zeichen auf der Grundlinie der Schrift und stünde sichtbar höher als das Wort „Darstellung". */ .emp-menue-darstellung > a, .et_mobile_menu li.emp-menue-darstellung > a { display: flex; align-items: center; gap: 8px; } /* Mond bei Hell (er führt in den Dunkelmodus), Sonne bei Dunkel. */ .emp-menue-darstellung .emp-menue-sonne { display: none; } :root[data-emp-theme="dark"] .emp-menue-darstellung .emp-menue-mond { display: none; } :root[data-emp-theme="dark"] .emp-menue-darstellung .emp-menue-sonne { display: inline; } /* ------------------------------------------------------------ Der Knopf in der Kopfleiste Divi legt Menü, Lupe und Handy-Symbol nebeneinander, indem es sie nach rechts fließen lässt. Bei fließenden Elementen steht das erste ganz außen — der Knopf käme so LINKS neben die Lupe, obwohl er im Quelltext dahinter steht. Deshalb wird die Leiste auf eine Reihe umgestellt: dann zählt wieder die Reihenfolge im Quelltext. Ausgerichtet wird an der OBERKANTE und nicht an der Mitte. Die Menüpunkte tragen unten 33 px Abstand, mit dem Divi den Aufklappbereich der Untermenüs offen hält; dieser Abstand zählt zur Höhe der Reihe. Eine Mitte läge dadurch weit unter der Schriftzeile, und Lupe wie Knopf rutschten nach unten weg. An der Oberkante steht die Lupe genau dort, wo Divi sie ohne uns auch hätte. ------------------------------------------------------------ */ #et-top-navigation { display: flex; align-items: flex-start; justify-content: flex-end; } /* Der Knopf bekommt die Zeilenhöhe der Menüwörter und legt sein Zeichen mittig hinein. Dadurch sitzt es auf derselben Höhe wie „Home" und „Messen" — und nicht auf der Höhe des Kastens, der sie umgibt. */ #emp-darstellung-knopf { flex: none; margin-left: 22px; /* derselbe Abstand, den Divi der Lupe gibt */ /* Ohne position bliebe der Knopf unanklickbar: Divi legt den Logo-Bereich absolut über die ganze Breite der Kopfleiste, und was absolut liegt, deckt alles Unpositionierte zu. Die Lupe steht aus demselben Grund auf position: relative. */ position: relative; } #emp-darstellung-knopf > a { padding: 0; height: 14px; /* Zeilenhöhe der Menüpunkte */ align-items: center; } /* Am Rechner steht nur das Zeichen: neben einer Lupe ohne Beschriftung wäre ein Wort daneben ein Fremdkörper. */ #emp-darstellung-knopf .emp-menue-wort { display: none; } /* ------------------------------------------------------------ Derselbe Umschalter im Handy-Menü Am Rechner ausgeblendet, sonst stünde er zweimal da. ------------------------------------------------------------ */ #top-menu .emp-menue-darstellung-handy { display: none; } /* Unter 981 px klappt Divi das Menü hinter den Hamburger. Ab da tritt der Menüpunkt an die Stelle des Kopfknopfes — und zwar MIT dem Wort „Darstellung": In einer aufgeklappten Liste aus Wörtern wäre ein einzelnes Zeichen ohne Beschriftung nicht zu deuten. Der Kopfknopf verschwindet dafür, sonst stünde der Umschalter zweimal da. */ @media ( max-width: 980px ) { #emp-darstellung-knopf { display: none; } #mobile_menu .emp-menue-darstellung-handy, .et_mobile_menu .emp-menue-darstellung-handy { display: block; } }