/* ============================================================ */ /* ZL-Portal: 3-Spalten-Layout, kein Seiten-Scroll */ /* ============================================================ */ /* ============================================================ */ /* Farb-Variablen (fuer Darkmode) */ /* -- ALLE Farben im Rest der Datei laufen ueber diese Variablen */ /* (var(--name)), NICHT mehr als feste Hex-Werte. Der zweite */ /* Block (html[data-theme="dark"]) ueberschreibt dieselben Namen */ /* mit den dunklen Gegenstuecken -- der Rest der Datei muss dafuer */ /* NICHT angefasst werden. Umschalter siehe details_ansicht.php */ /* (eigenes Profil) + js.js: darkmode_umschalten()/darkmode_init(). */ /* Manche Farben (z.B. weisse Schrift auf einem kraeftig-blauen/ */ /* -roten Button, oder die Label-Farbe aus der DB) bleiben BEWUSST */ /* als fester Wert im Code stehen -- die betroffene Flaeche bleibt */ /* in beiden Modi gleich kraeftig eingefaerbt, eine Variable waere */ /* dort nur unnoetiger Umweg. -- */ /* ============================================================ */ :root { /* -- Flaechen -- */ --bg: #fff; /* Karten/Popups/Eingabefelder + Seiten-Hintergrund (siehe body weiter unten) */ --bg_subtle: #eee; /* feststehende Kopf-/Fussleisten (Header links, Chat-Kopf, Eingabe-Bereich, ...) */ --bg_hover: #f5f5f5; /* Zeilen-Hover + Ruhezustand der runden Icon-Buttons */ --bg_strong: #f0f0f0; /* Nachrichten-Bubble (fremd), Trenner-Zeile, staerkerer Hover */ --bg_btn_hover: #ececec; /* Hover der grauen Text-Buttons (Block/Loeschen/Verschieben/...) */ --bg_kbd: #f8f8f8; /* -Tasten in der Tastenkombinationen-Uebersicht */ --bg_active: #eef4ff; /* aktive Zeile links, aktive Reaktion */ --bg_chip: #eef4fb; /* Empfaenger-Chip, Drag&Drop-Hervorhebung */ --bg_own_msg: #dcf1ff; /* eigene Nachrichten-Bubble */ --bg_warn_soft: #fffbe6; /* Betreff-Zeile "Thema erstellen" */ --bg_marked: #ffe9a8; /* markierte Nachricht (Mehrfachauswahl) */ --marked_outline: #f0b400; /* -- Schrift -- */ --text: #333; /* Standard-Text */ --text_secondary: #666; --text_muted: #999; --text_faint: #888; --text_dim: #555; --text_dimmer: #aaa; --strong: #000; /* hoechster Kontrast (Ungelesen-Badge/-Text) -- kippt im Dark Mode auf weiss */ --strong_contrast: #fff; /* Gegenfarbe zu --strong (Text AUF dem --strong-Badge) */ /* -- Rahmen -- */ --border: #eee; /* duenne Trennlinien (Zeilen, Popups) */ --border_input: #ccc; /* Eingabefelder/Buttons */ --border_column: #ddd; /* Spaltenraender, Kopf-/Fussleisten-Rahmen */ --trenner_border: #e0e0e0; /* -- Akzentfarbe (Senden-Button, Links, Fortschrittsbalken) -- */ --accent: #0078d4; --accent_hover: #005fa3; /* -- Fehler/Loeschen (rot) -- */ --err: #c00; --err_border: #f3c2c2; --err_bg: #fff0f0; --err_bg_hover: #ffe1e1; --close: #900; /* X-Buttons (Popup schliessen, Chip entfernen, ...) */ /* -- Warnung/Stummgeschaltet/Wiedervorlage (gelb-braun) -- */ --warn: #a06e00; --warn_border: #f0d9a0; --warn_bg: #fff8e8; --warn_bg_hover: #fff0cc; /* -- Erfolg/Hinzugefuegt (gruen) -- bisher nur fuers Versions-Diff (siehe #zl_diff_popup) gebraucht, eingefuegte Zeilen -- */ --success: #2e7d32; --success_bg: #eaf7ea; --prio: #e02020; /* Prio-Badge (kraeftiges Rot, bewusst anders als --err) */ --overlay: rgba(0,0,0,0.4); /* Abdunkler hinter Popups */ color-scheme: light; /* -- Gegenstueck zu color-scheme:dark weiter unten -- */ } /* -- Dark-Werte fuer GENAU dieselben Variablennamen -- Umschaltung passiert rein ueber das data-theme-Attribut an , siehe h.php (frueher Inline- Read gegen Aufblitzen im hellen Modus) + js.js -- */ html[data-theme="dark"] { --bg: #1a1a1a; --bg_subtle: #262626; --bg_hover: #2e2e2e; --bg_strong: #333333; --bg_btn_hover: #3a3a3a; --bg_kbd: #2a2a2a; --bg_active: #16324a; --bg_chip: #1c3a52; --bg_own_msg: #123a52; --bg_warn_soft: #3a3410; --bg_marked: #5c4a12; --marked_outline: #f0b400; --text: #e6e6e6; --text_secondary: #b3b3b3; --text_muted: #999999; --text_faint: #9a9a9a; --text_dim: #bdbdbd; --text_dimmer: #888888; --strong: #fff; --strong_contrast: #000; --border: #333333; --border_input: #555555; --border_column: #3d3d3d; --trenner_border: #3d3d3d; --accent: #3b9eff; --accent_hover: #2f86d6; --err: #ff6b6b; --err_border: #5c2b2b; --err_bg: #3a1f1f; --err_bg_hover: #4a2626; --close: #d9534f; --warn: #e0b84d; --warn_border: #5c4a1f; --warn_bg: #3a3315; --warn_bg_hover: #4a4020; --success: #6fcf73; --success_bg: #163a1a; --prio: #ff4d4d; --overlay: rgba(0,0,0,0.6); /* -- sagt dem Browser selbst Bescheid (native Scrollbars, Formular-Chrome ohne eigenes CSS wie das Erstanmeldungs-Formular in h.php) -- */ color-scheme: dark; } * { box-sizing: border-box; font-family: arial; } html { height: 100%; margin: 0; padding: 0; overscroll-behavior-x: none; /* kein Browser-Zurueck bei zu weit links wischen, kein Vorwaerts bei zu weit rechts */ overscroll-behavior-y: auto; /* PTR (Pull-to-Refresh) erhalten */ } body { /* 100dvh: schrumpft dynamisch wenn Tastatur kommt -- iOS kann Body dann nicht hochscrollen */ height: 100%; /* Fallback fuer aeltere Browser */ height: 100dvh; margin: 0; padding: 0; /* kein overflow:hidden hier -- PTR (native Pull-to-Refresh) muss durch body laufen koennen */ /* -- Grundfarbe der ganzen Seite (fuer Darkmode): alle Bereiche OHNE eigenen background (z.B. #liste_bereich/#topic_ansicht/#details_ansicht) zeigen dadurch automatisch die richtige Flaeche durch, ohne dort jeweils extra etwas setzen zu muessen -- */ background: var(--bg); color: var(--text); } /* -- Eingabefelder/Textareas/Selects OHNE eigene Hintergrundfarbe (z.B. .profil_textarea/.profil_api_url_input, .popup_suche) wuerden sonst beim nativen Browser-Weiss bleiben, obendrein bekommen Formularfelder Text-/ Hintergrundfarbe NICHT zuverlaessig von body vererbt -- deshalb hier EIN gemeinsamer Grundstand fuer alle. Selektoren mit eigener background- Angabe (z.B. #suche_input) ueberschreiben das ganz normal per Spezifitaet -- ergibt in beiden Faellen denselben, schon vorhandenen hellen Wert, im Dark Mode wird dadurch aber WIRKLICH jedes Feld mit umgefaerbt -- */ input, textarea, select { background: var(--bg); color: var(--text); } /* -- Farbwaehler (Labels: Hintergrund-/Schriftfarbe, Editor: Text-/BG-Farbe) -- nativer ist im Browser-Standard recht klein (~ 44x23px), die aktuell gewaehlte Farbe darin ist dadurch kaum zu erkennen -- deutlich groesseres Klickfeld dafuer -- */ input[type="color"] { width: 3em; height: 2.2em; padding: 2px; cursor: pointer; } /* -- Aeusserer Rahmen: nimmt exakt die volle Viewport-Hoehe ein -- */ #spalten { display: flex; flex-direction: row; height: 100vh; /* Fallback fuer aeltere Browser */ height: 100dvh; /* dvh: dynamisch — schrumpft wenn Tastatur aufgeht oder Browser-Chrome ein-/ausgeblendet wird */ width: 100%; overflow-x: auto; /* mobil: horizontal wischbar */ /* KEIN overflow-y hier gesetzt (= visible): #spalten hat selbst keinen vertikalen Ueberlauf (Hoehe ist fix), das eigentliche Scrollen passiert in #liste_bereich/#topic_ansicht. So bleibt vertikales Overscroll komplett nativ -- fuer Pull-to-Refresh wichtig! */ scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* verhindert NUR horizontal, dass Wischen in der Snap-Zeile Browser-Vor/Zurueck ausloest */ } /* ============================================================ */ /* Mobil: jede Spalte = 1 Bildschirmbreite, Snap-Punkt */ /* ============================================================ */ #spalte_topics, #spalte_chat, #spalte_editor, #spalte_details { scroll-snap-align: start; scroll-snap-stop: always; flex: 0 0 100%; height: 100%; border-right: 1px solid var(--border_column); /* KEIN overflow-y hier (= visible): kein eigener vertikaler Ueberlauf noetig, damit natives Pull-to-Refresh ungehindert bis zum Body durchlaufen kann */ overflow-x: hidden; /* -- Absicherung auf Spalten-Ebene: KEINE Spalte darf jemals selbst horizontal scrollbar sein (haerteste Grenze -- faengt z.B. auch ein zu breites natives hier drin --*/ .format_dropdown_tabelle_menu label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; font-size: 13px; color: var(--text); } .format_dropdown_tabelle_menu input[type="number"] { width: 50px; padding: 3px 6px; border: 1px solid var(--border_input); border-radius: 4px; background: var(--bg); color: var(--text); font-size: 13px; } /* -- "Einfuegen"-Button im Tabelle-Dropdown: eigener Button-Look (Rahmen, zentriert) statt des generischen .format_dropdown_menu button (linksbuendig, kein Rahmen/Hintergrund -- sieht dort wie reiner Text aus, nicht als Button erkennbar -- Bugreport). Hintergrund/Schrift/Hover kommen aus der gemeinsamen .push_modal_btn_ja-Regel weiter oben (dieselbe Klasse steht dort in der Selektor-Liste), hier nur noch Groesse/Rahmen/Ausrichtung, die sich vom breiten Popup-Button unterscheiden. Hoehere Selektor-Spezifitaet (2 Klassen + Element) noetig, damit es .format_dropdown_menu button zuverlaessig ueberschreibt --*/ .format_dropdown_tabelle_menu button.format_dropdown_tabelle_einfuegen_btn { margin-top: 4px; padding: 6px 10px; border: 1px solid var(--border_input); border-radius: 4px; font-size: 13px; text-align: center; white-space: nowrap; } /* -- Speichern: letzter Button IN DERSELBEN Formatierungs-Leiste (Anforderung: keine eigene Zeile mehr), aber rechtsbuendig -- margin-left:auto schiebt ihn innerhalb seiner eigenen Zeile des flex-wrap ganz nach rechts (frisst den gesamten uebrigen Platz VOR sich auf), ohne die vorherigen Buttons umzubauen. Faellt die Leiste um (schmaler Bildschirm), rutscht er ganz natuerlich als erster in die naechste Zeile und steht dort weiterhin ganz rechts -- funktioniert unabhaengig davon, wie viele Buttons/Zeilen es sind --*/ #zl_speichern_btn { margin-left: auto; background: var(--accent); color: #fff; border-color: var(--accent); font-weight: bold; } #zl_speichern_btn:hover { background: var(--accent_hover); }