/* * Angleichung Bootstrap 5 an die Masse von Bootstrap 3. * * Der Frontend-Umbau hat Bootstrap 3.3.6 gegen 5.3.8 getauscht. Die Breakpoints wandern * dabei bewusst auf den Standard von Bootstrap 5 (CLAUDE.md, Abschnitt 9) - * die Rasterklassen sind dafuer in den Templates um eine Stufe verschoben. * * Drei Masse aendern sich dadurch aber zusaetzlich, und zwar sichtbar auf * jeder Seite. Weil die oberste Projektregel lautet "die Seite soll aussehen * wie bisher", werden sie hier zurueckgeholt: * * 1. Containerbreite. Bootstrap 3: 750 / 970 / 1170 px. * Bootstrap 5: 540 / 720 / 960 / 1140 / 1320 px. Bei 1400 px Fensterbreite * war der Inhalt dadurch 1320 statt 1170 px breit - 150 px mehr. * 2. Spaltenabstand. Bootstrap 3 arbeitet mit 15 px Innenabstand je Spalte, * macht 30 px zwischen zwei Spalten. Bootstrap 5 nimmt 1.5rem = 24 px. * 3. Zeilenhoehe des Fliesstextes. Bootstrap 3: 1.428571429. * Bootstrap 5: 1.5. Bei 17 px Schrift sind das 24,3 gegen 25,5 px - was * sich ueber eine lange Seite zu mehreren Dutzend Pixeln summiert. * * Nicht zurueckgeholt wird, was Bootstrap 3 an tat: * `html { font-size: 10px }`. Bootstrap 5 laesst die Browservorgabe stehen, * und das ist richtig so - die 10 px waren der Grund, warum rem-basierte * Bausteine auf dieser Seite auf 62,5 % ihrer Groesse rendeten (siehe die * Reparatur des Barrierefreiheits-Widgets im Upgrade-Log). Das eigene CSS des * Sitepackages kommt ohne ein einziges rem aus und ist davon nicht betroffen. * * Diese Datei wird direkt nach bootstrap.min.css geladen und vor dem eigenen * CSS - sie korrigiert Bootstrap, gibt dem Sitepackage aber nicht das letzte * Wort aus der Hand. */ /* ── 1. Containerbreiten wie in Bootstrap 3 ─────────────────────────────── */ /* Bootstrap 3 gibt dem Container unterhalb von 768 px gar keine Hoechstbreite; Bootstrap 5 setzt ab 576 px bereits 540 px. Zuruecknehmen. */ @media (min-width: 576px) { .container, .container-sm { max-width: none; } } @media (min-width: 768px) { .container, .container-sm, .container-md { max-width: 750px; } } @media (min-width: 992px) { .container, .container-sm, .container-md, .container-lg { max-width: 970px; } } @media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1170px; } } /* Bootstrap 5 hat mit xxl eine fuenfte Stufe, die es in Bootstrap 3 nicht gab. Oberhalb von 1400 px bleibt es deshalb bei 1170 px. */ @media (min-width: 1400px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1170px; } } /* ── 2. Spaltenabstand: 30 px statt 24 px ───────────────────────────────── */ /* --bs-gutter-x steuert in Bootstrap 5 beides zugleich: den negativen Aussenabstand der Zeile und den Innenabstand der Spalten. Ein Wert genuegt. */ .row { --bs-gutter-x: 30px; } .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { --bs-gutter-x: 30px; } /* ── 3. Zeilenhoehe des Fliesstextes ────────────────────────────────────── */ body { line-height: 1.428571429; } /* ── 4. Formulare: die Abstaende von Bootstrap 3 ────────────────────────── */ /* * EXT:powermail liefert gemischte Auszeichnung aus: die Bootstrap-3-Klasse * .form-group steht neben den Bootstrap-5-Klassen .col-form-label und * .col-md-6. Bootstrap 5 kennt .form-group nicht mehr - dort uebernimmt die * Hilfsklasse .mb-3. Damit verlor jedes Feld seine 15 px Abstand nach unten * und jedes Label seine 5 px. Bei 20 Feldern und 14 Labels sind das rund * 370 px, um die die Formularseiten kuerzer wurden. * * Die Klasse bleibt in Gebrauch, solange die eigenen Powermail-Templates * deaktiviert sind (siehe MEMORY.md). Deshalb hier nachgereicht statt in den * Templates ersetzt. */ .form-group { margin-bottom: 15px; } /* * Der Abstand allein genuegt nicht. Bootstrap 5 gibt .col-form-label * zusaetzlich rund 7 px Innenabstand oben und unten, damit das Label neben * einem Eingabefeld auf dessen Grundlinie sitzt. Bootstrap 3 kannte die Klasse * nicht; dort trug das Label nur 5 px Abstand nach unten. Bei zwoelf Labels * summiert sich der Unterschied auf ueber hundert Pixel. Beim ersten Versuch * wurde nur der Gruppenabstand nachgereicht - die Seite war danach 290 px zu * lang statt 70 px zu kurz. Deshalb beides zusammen. */ .form-group > label, .powermail_label, .form-group .col-form-label { padding-top: 0; padding-bottom: 0; margin-bottom: 5px; } /* * Formularfelder: Groesse und Rahmenfarbe wie in Bootstrap 3. * * Bootstrap 3 rechnete mit 14 px Grundschrift, Bootstrap 5 mit 1rem = 16 px. * Die Felder sind dadurch zwar gleich hoch (32 px in beiden Faellen, * nachgemessen), die Beschriftung darin ist aber sichtbar groesser. Dazu die * Rahmenfarbe: #ccc gegen #dee2e6. */ .form-control, .form-select, .form-control-plaintext { font-size: 14px; border-color: #ccc; } /* * Auswahlfelder behalten ihr Bedienelement. * * Bootstrap 5 setzt in `.form-control` `appearance: none` und ueberlaesst das * Pfeilsymbol der eigenen Klasse `.form-select`. EXT:powermail zeichnet seine * `