/* ========================================================================== adminFormLayout - Formularraster der Bearbeitungsformulare Der Bestand benutzt nicht fuer Daten, sondern als Raster fuer Formularfelder: Beschriftung links, Feld rechts, in 41 der 51 Ansichten zweimal je Zeile (Beschriftung, Feld, Beschriftung, Feld). Verbreitung: 51 der 88 Ansichten, 457 x filterCellHeader / 454 x filterCellContent. Alle geprueften Zeilen haben hoechstens VIER Zellen - beim Stapeln bleibt die Lesereihenfolge deshalb von selbst korrekt: Beschriftung, ihr Feld, naechste Beschriftung, ihr Feld. Diese Datei aendert kein Markup. ACHTUNG: Alle Angaben in PIXELN, nicht in rem. screen.css setzt die Wurzel-Schriftgroesse auf 9pt = 12px; jede rem-Angabe waere hier also ein Viertel kleiner als erwartet (55rem = 660px statt 880px). Spezifitaet: layout.css - wo frueher .filterTable, .filterCellHeader und .filterContainer definiert waren - ist geloescht. Zu diesen Klassen gibt es im Bestand KEINE Regel mehr; hier konkurriert nur noch inline style=. ========================================================================== */ /* ========================================================================== 1. Der Container ========================================================================== Umgeschaltet wird nach dem Platz, den das FORMULAR hat, nicht nach der Fensterbreite - gleiches Muster wie .cs-liste in liste.css. Zwei Container mit demselben Namen, weil das Formular in zwei Tiefen vorkommt. Container Queries loesen immer gegen den NAECHSTEN benannten Vorfahren auf, damit greift automatisch der jeweils richtige: - .filterContainer umgibt 72 der 73 filterTable-Vorkommen. Er ist der tatsaechliche Platz, den ein Feldblock hat. - .cs-inhalt (#contentCell) faengt den Rest ab: die eine Ansicht ohne .filterContainer (calendar/edit-calendar-booking-ajax) und alles, was NEBEN den Bloecken steht - vor allem die Schaltflaechenreihe am Formularende. Geprueft, weil ein Container-Kontext zum umschliessenden Block fuer position:fixed werden kann: in den Views und in screen.css/admin/*.css steht kein position:fixed unterhalb von .cs-inhalt. Zur Laufzeit tut es genau eines - das Vollbild von TinyMCE im Kalender-Formular. Nachgemessen mit und ohne diese Datei: der Editor deckt in beiden Faellen 1440x900 ab, also das ganze Fenster. Kein Nebeneffekt. */ .cs-neu .cs-inhalt, .cs-neu .filterContainer { container-type: inline-size; container-name: formular; } /* ========================================================================== 2. Abschnitte als Bloecke - gilt in JEDER Breite ========================================================================== Die Formulare gliedern sich bereits ueber

("Kunden Details", "Tour Details", "Verursacher des Schadens"). Der zugehoerige Feldblock steht darunter in einem .filterContainer - der aber seit dem Wegfall von layout.css voellig ungestaltet war. Ueberschrift und Felder verschmolzen dadurch zu einer einzigen langen Kolonne (Gestaltgesetz der Naehe griff ins Leere). Der Block bekommt seine Flaeche zurueck. */ .cs-neu .cs-inhalt h2 { margin: var(--cs-abstand-5) 0 var(--cs-abstand-2); font-size: var(--cs-schrift-gross); line-height: 1.3; } .cs-neu .cs-inhalt h2:first-child { margin-top: 0; } .cs-neu .filterContainer { margin-bottom: var(--cs-abstand-4); padding: var(--cs-abstand-2) var(--cs-abstand-3); background: var(--cs-flaeche); border: 1px solid var(--cs-linie); border-radius: var(--cs-radius); } /* ========================================================================== 3. Grundlage des Rasters - gilt in JEDER Breite ========================================================================== */ .cs-neu table.filterTable { width: 100%; } .cs-neu table.filterTable > tbody > tr > td, .cs-neu table.filterTable > tr > td { /* Nur rechts Luft, und wenig davon: bei vier Zellen je Zeile geht jeder Millimeter viermal ab. Mit 12px brach die Filterleiste auf /touren bei 1440px in eine zusaetzliche Zeile um - gemessen, deshalb 8px und rechts aussen nichts. */ padding: var(--cs-abstand-1) var(--cs-abstand-2) var(--cs-abstand-1) 0; text-align: left; /* Buchungslinks und E-Mail-Adressen sind ein einziges "Wort" von ueber 300px - ohne das schoebe eine einzige URL die ganze Zeile auf. */ overflow-wrap: break-word; } .cs-neu table.filterTable > tbody > tr > td:last-child, .cs-neu table.filterTable > tr > td:last-child { padding-right: 0; } /* Beschriftung - eine Stimme in allen Breiten. Der Ausschluss ist noetig: partials/galleryupload und partials/tourgalleryupload missbrauchen filterCellHeader als Huelle fuer das komplette Upload-Widget (daher dort auch 1 Header / 0 Content). Ohne den Ausschluss bekaeme die ganze Ablageflaeche Beschriftungstypografie. */ .cs-neu table.filterTable td.filterCellHeader:not(:has(div, table, input, select, textarea)) { color: var(--cs-text-leise); font-size: var(--cs-schrift-klein); font-weight: 600; line-height: 1.35; } .cs-neu table.filterTable td.filterCellHeader:not(:has(div, table, input, select, textarea)) label { color: inherit; font-weight: inherit; } /* Pflichtfeldkennzeichnung. Das "(*)" steht heute als blanker Text IM Beschriftungstext, an 200+ Stellen. CSS kann keinen Text auswaehlen - eine einheitliche Gestaltung des Zeichens selbst ist ohne Markup- oder Skriptaenderung nicht moeglich und wurde hier bewusst NICHT ueber einen Ratealgorithmus erzwungen. Was bleibt und hier passiert: die Beschriftung, in der das Zeichen steht, ist ueberall gleich gesetzt (Regel darueber), und fuer die spaetere Umstellung liegt der Haken schon bereit. Ein Umschreiben der Views kann dann (*) setzen, ohne dass hier noch einmal etwas zu entscheiden waere. */ .cs-neu .cs-pflicht { margin-left: 2px; color: #b3261e; font-weight: 700; white-space: nowrap; } /* Felder: Hoehe, Schriftgroesse und Kastenmodell kommen aus base.css und gelten dort fuer die ganze Oberflaeche. Hier steht nur das Sicherheitsnetz fuer das Formularraster - falls eine Ansicht ein Feld ausserhalb der base.css-Auswahl mitbringt. 16px ist Pflicht: darunter zoomt Safari unter iOS beim Hineintippen die Seite auf. Ein Breitendeckel steht hier bewusst NICHT: diese Auswahl trifft auch die 51 Bearbeitungsformulare, wo ein Feld ueber die ganze Zeile richtig ist. Der Deckel gilt nur fuer die Filterleiste, siehe "Filterfelder: Breitendeckel" weiter unten. Hier stand eine Zeit lang trotzdem max-width: min(100%, 320px) - ein Rest davon, dass der Deckel zuerst an dieser Stelle versucht wurde. Beim Zuruecknehmen wurde nur der Kommentar geaendert, nicht die Deklaration; die Felder ALLER Bearbeitungsformulare blieben dadurch gedeckelt. */ .cs-neu table.filterTable input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .cs-neu table.filterTable select, .cs-neu table.filterTable textarea { min-height: var(--cs-ziel); font-size: var(--cs-schrift-feld); max-width: 100%; box-sizing: border-box; } /* ---- Schaltflaechen, die als gebaut sind ------------- Sechzehn Stellen im Admin: "Rechnung versenden", "Zahlungsbestaetigung versenden", "Gutscheinanschreiben versenden", "Abrechnung versenden", "zurueck zur Uebersicht". ZWEI Fehler, der erste ist der auffaellige: 1. Die Symbolschrift verschlingt den Text. Die Klasse steht im Bestand als class="button far fa-envelope" - und `far` setzt font-family: "Font Awesome 5 Pro" auf das SELBST. Diese Schrift enthaelt keine Buchstaben, also faellt der Browser fuer die Beschriftung auf seine Standardschrift zurueck: "Rechnung versenden" stand als Serifentext mitten in einer serifenlosen Oberflaeche. Gemessen an /gutscheine/tour-gutschein-bearbeiten und /touren/buchung-bearbeiten - font-family des Textes war dort tatsaechlich "Font Awesome 5 Pro". Gemeldet als "ungestylete links". Die Schrift kommt darum am Element zurueck, und das Symbol bekommt sie ausdruecklich am ::before - dort gehoert sie hin. 2. Sie sahen aus wie aus einer anderen Anwendung: hellgruene Flaeche mit dunkelgruenem Rand aus screen.css, waehrend jede Liste daneben den Hausknopf zeigt. Jetzt dieselbe Bauform wie .cs-knopf. Ohne Markup-Aenderung: die Bestandsklassen bleiben, damit auch die zwoelf Stellen ohne Symbol (mytours, disclaimeradmin) mitgenommen werden. */ .cs-neu a.button, .cs-neu a.button_disabled { display: inline-flex; align-items: center; justify-content: center; gap: var(--cs-abstand-2); min-height: var(--cs-ziel); max-width: 100%; padding: 0 var(--cs-abstand-4); margin: 2px 4px 2px 0; border-radius: var(--cs-radius); font-family: var(--cs-schrift-ui); font-size: var(--cs-schrift-normal); text-decoration: none; } .cs-neu a.button { background: var(--cs-flaeche); border: 1px solid #cfd8c0; color: #4a6b0a; } /* Der gesperrte Zustand traegt im Bestand einen Durchstrich. Der macht die Beschriftung schlechter lesbar, ohne mehr zu sagen als die gedaempfte Farbe - er entfaellt. Anklickbar bleibt der Verweis: er hat kein href, aber ein onclick, das den Grund nennt ("Buchung muss bezahlt sein."). */ .cs-neu a.button_disabled { background: var(--cs-flaeche-leise); border: 1px solid var(--cs-linie); color: var(--cs-text-leise); cursor: not-allowed; text-decoration: none; } /* Das Symbol steht im ::before, das die Bestandsklasse fa-envelope fuellt. Nur die Schrift muss hier gesetzt werden - der Inhalt kommt von dort. font-weight 400 ist der Regular-Schnitt, passend zu `far`. */ .cs-neu a.button::before, .cs-neu a.button_disabled::before { font-family: "Font Awesome 5 Pro"; font-weight: 400; font-size: 16px; flex: none; } /* Beruehrung statt Hervorhebung: auf dem Handy gibt es kein Ueberfahren, darum nur ein leiser Zustand fuer Maus und Tastatur. */ .cs-neu a.button:hover, .cs-neu a.button:focus-visible { background: #f2f6ea; border-color: var(--cs-gruen-hell); } /* Ein Link, der ALLEIN in einer Feldzelle steht, ist dort das Bedienelement und war 17px hoch. Links MITTEN im Fliesstext bleiben unberuehrt - sie auf 44px zu ziehen wuerde den Textfluss zerreissen. */ .cs-neu table.filterTable td.filterCellContent > a:only-child { display: inline-flex; align-items: center; min-height: var(--cs-ziel); max-width: 100%; } /* Die Schaltflaechenreihe am Formularende traegt im Bestand style="float: left|right" - inline, also nicht ueberschreibbar ohne !important. Statt dagegen anzukaempfen bekommt sie nur Luft, damit die Knoepfe nicht aneinanderkleben. */ .cs-neu .cs-inhalt form > input[type=submit], .cs-neu .cs-inhalt form > input[type=button] { margin-bottom: var(--cs-abstand-2); } /* ========================================================================== 4. Gestapelt - wenn dem Formular weniger als 880px Platz bleiben ========================================================================== 880px ist derselbe Umschaltpunkt wie in liste.css und in shell.css fuer den einklappbaren Filterblock. Zwei Beschriftungs-/Feldpaare nebeneinander brauchen gemessen rund 860px; darunter faellt das Raster auf eine Spalte. 390er Fenster -> .filterContainer innen 364px -> gestapelt 1440er Fenster -> .filterContainer innen 1154px -> zweispaltig wie bisher (Container Queries messen den Inhaltskasten, die 12px Innenabstand des Blocks zaehlen also nicht mit.) ========================================================================== */ @container formular (max-width: 880px) { /* ---- Raster aufloesen ------------------------------------------------- Nur die AEUSSERE Tabelle wird zu Bloecken. Die Kindkombinatoren halten verschachtelte Tabellen (4 Ansichten) bewusst in Tabellenform - sie sind nicht per CSS zu loesen und werden einzeln behandelt. */ .cs-neu table.filterTable, .cs-neu table.filterTable > tbody, .cs-neu table.filterTable > tbody > tr, .cs-neu table.filterTable > tbody > tr > td, .cs-neu table.filterTable > tr, .cs-neu table.filterTable > tr > td { display: block; width: 100%; max-width: 100%; } /* Breitenangaben als HTML-Attribut (width="150") und feste Zellhoehen verlieren im Blockfluss ihren Sinn. */ .cs-neu table.filterTable > tbody > tr > td, .cs-neu table.filterTable > tr > td { height: auto; padding: 0; border: 0; vertical-align: baseline; } /* ---- Beschriftung ueber ihrem Feld ------------------------------------ Der Abstand sitzt bewusst an der Beschriftung, nicht an der Zeile: eine Zeile enthaelt oft ZWEI Paare, und getrennt werden muessen die Paare, nicht die Zeilen. */ .cs-neu table.filterTable td.filterCellHeader { padding: var(--cs-abstand-4) 0 var(--cs-abstand-1); white-space: normal; } .cs-neu table.filterTable > tbody > tr:first-child > td.filterCellHeader:first-child, .cs-neu table.filterTable > tr:first-child > td.filterCellHeader:first-child { padding-top: var(--cs-abstand-2); } .cs-neu table.filterTable td.filterCellContent { padding: 0 0 var(--cs-abstand-2); } /* Leere Platzhalterzellen erzeugen sonst eine Luecke ohne Inhalt. */ .cs-neu table.filterTable > tbody > tr > td:empty, .cs-neu table.filterTable > tr > td:empty { display: none; } /* ---- Felder fuellen die Breite ----------------------------------------- !important ist hier noetig und bewusst gesetzt: der Bestand traegt 164 inline-style-Breiten (bis 650px) direkt am Feld - allein edittour hat 32 Stueck. Inline schlaegt jede Klassenregel; ohne !important bliebe ein 650px breites Feld in einem 356px breiten Block stehen. Die Regel gilt ausschliesslich im gestapelten Zustand. Angesetzt wird an td, nicht an .filterCellContent: settings/editsetting legt seine 80-Spalten-Textarea in ein

OHNE Klasse (daher dort 5 Header / 4 Content). Das "> *:not(table) >" nimmt Felder EINER Huellebene mit und haelt verschachtelte Tabellen heraus. type=date ist ausgenommen. Ein Datumsfeld hat eine feste Form (TT.MM.JJJJ plus Kalendersymbol) und braucht gemessene 141px; auf die Zellbreite gestreckt stand es mit 320px da und sah aus, als koenne man mehr hineinschreiben. Die Zelle bleibt 320px breit - diese Spalte traegt auch die Auswahlfelder -, aber das Feld zeigt jetzt seine wahre Groesse. Ausgenommen wird HIER, statt eine eigene Regel dagegen zu schreiben: width steht mit !important, dagegen haette nur ein zweites !important geholfen. Alle Angaben in PIXELN (siehe oben). */ .cs-neu table.filterTable > tbody > tr > td > input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=image]):not([type=date]):not([type=time]), .cs-neu table.filterTable > tbody > tr > td > select, .cs-neu table.filterTable > tbody > tr > td > textarea, .cs-neu table.filterTable > tbody > tr > td > *:not(table) > input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=image]):not([type=date]):not([type=time]), .cs-neu table.filterTable > tbody > tr > td > *:not(table) > select, .cs-neu table.filterTable > tbody > tr > td > *:not(table) > textarea, .cs-neu table.filterTable > tr > td > input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=image]):not([type=date]):not([type=time]), .cs-neu table.filterTable > tr > td > select, .cs-neu table.filterTable > tr > td > textarea, .cs-neu table.filterTable > tr > td > *:not(table) > input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=image]):not([type=date]):not([type=time]), .cs-neu table.filterTable > tr > td > *:not(table) > select, .cs-neu table.filterTable > tr > td > *:not(table) > textarea { width: 100% !important; max-width: 100%; margin-left: 0; margin-right: 0; } /* Textfelder behalten eine brauchbare Hoehe, verlieren aber die feste Breite (inline bis 650px). */ .cs-neu table.filterTable td textarea { min-height: 120px; } /* ---- Mehrere Auswahllisten in einer Zelle ------------------------------ Tag / Monat / Jahr stehen im Bestand als drei . Die Zelle gibt es nicht mehr. */ .cs-neu .cs-guidewahl--angefragt { font-weight: 700; } .cs-neu .cs-guidewahl { display: flex; align-items: center; gap: var(--cs-abstand-2); min-height: var(--cs-ziel); cursor: pointer; } .cs-neu .cs-guidewahl input[type=checkbox] { flex: none; margin: 0; } .cs-neu .cs-guidewahl__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Bearbeitungsformular: ausgewogene Spalten auf dem Schreibtisch ------ Gemeldet: "die desktop-view auf .../tour-bearbeiten?tourId=20334 ist noch nicht ausgewogen". Gemessen bei 1440px: die vier Spalten waren 76 | 103 | 112 | 830 Pixel breit. Das linke Feld bekam 103px und schnitt "Bitte wählen Baden-Baden" ab, das rechte hatte 830px fuer "Ja/Nein". Ursache ist die Tabellenaufteilung "auto" in Verbindung mit den Zeilen, die ueber colspan="3" laufen (Tour-Datum, Uhrzeit, GPS-Track, Buchen-Link, Tour Information): sie binden keine einzelne Spalte, also faellt der ganze Ueberschuss der letzten zu. Frueher hielt die Textflaeche ueber ihren rowspan die Spalten 3 und 4 zusammen - der ist entfallen, seit Status und Preis sich eine Zeile teilen. table-layout: fixed nimmt der Tabelle das Verhandeln ab; die Breiten stehen dann in der ERSTEN Zeile. Beschriftung 15% (bei 1122px = 168px, "Tour Guide Anmeldung" braucht 140), Feld 35%. :has(> td:nth-child(4)) ist die Sicherung: nur Tabellen, deren erste Zeile wirklich vier Zellen hat, bekommen die Vorgabe. Im Buchungsformular gibt es Tabellen mit nur einer Zeile und weniger Zellen - fuer die waere eine feste Vierteilung falsch. Alle Angaben in PIXELN bzw. Prozent (siehe oben). */ @container formular (min-width: 881px) { .cs-neu #saveForm table.filterTable:has(> tbody > tr:first-child > td:nth-child(4)), .cs-neu #saveForm table.filterTable:has(> tr:first-child > td:nth-child(4)) { table-layout: fixed; } .cs-neu #saveForm table.filterTable > tbody > tr:first-child > td:nth-child(odd), .cs-neu #saveForm table.filterTable > tr:first-child > td:nth-child(odd) { width: 15%; } .cs-neu #saveForm table.filterTable > tbody > tr:first-child > td:nth-child(even), .cs-neu #saveForm table.filterTable > tr:first-child > td:nth-child(even) { width: 35%; } } /* ---- Bearbeitungsformular: ausgewaehlte Zeilen zweispaltig --------------- Der gestapelte Block oben loest das Formularraster unter 880px auf: eine Beschriftung, darunter ihr Feld, eines pro Zeile. Fuer lange Felder ist das richtig - ein Tour-Name oder eine Textflaeche braucht die volle Breite. Fuer KURZE Felder ist es verschwenderisch: gemessen an "Anzahl Geräte" belegt ein Feldblock 88px, davon sind 44px das Feld und 44px Beschriftung und Abstand. Zwei solche Bloecke nebeneinander sparen also 88px je Zeile. Welche Zeile das darf, entscheidet die Ansicht ueber die Klasse cs-paar - nicht eine Regel, die raet. Der Betreiber hat sie ausgewaehlt: "beginne damit tour-stadt und tour-guide in eine zeile zu stellen, anzahl geräte und guide-mail-versenden auch in eine zeile". Bauart wie in der Filterleiste: zwei Rasterzeilen, spaltenweise gefuellt. Damit landet Zelle 1 (Beschriftung) ueber Zelle 2 (ihr Feld), und Zelle 3 ueber Zelle 4 - jedes Paar bleibt zusammen, ohne Markup-Umbau. KEINE Untergrenze. Ein erster Versuch begann bei 480px - der Betreiber arbeitet bei 422px Fenster, die Regel haette bei ihm nie gegriffen. Genau dieser Fehler ist mir in dieser Sitzung schon einmal unterlaufen. Der Preis auf schmalen Geraeten: eine lange Beschriftung wie "Guide Mail versenden" bricht in ihrer Haelfte auf zwei Zeilen um. Das kostet weniger, als beide Felder untereinander zu stellen. Alle Angaben in PIXELN (siehe oben). */ @container formular (max-width: 880px) { .cs-neu #saveForm table.filterTable > tbody > tr.cs-paar, .cs-neu #saveForm table.filterTable > tr.cs-paar { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--cs-abstand-5); align-items: start; } /* Die Beschriftung sitzt UNTEN in ihrer Rasterzeile, direkt ueber ihrem Feld. Beide Beschriftungen einer Paar-Zeile teilen sich EINE Rasterzeile, deren Hoehe die laengere bestimmt. Bricht eine auf zwei Zeilen um ("Abteilung/Ansprechpartner", "Bestätigungs E-Mail versenden"), haengt die kuerzere mit align-items: start oben und laesst darunter Luft - gemessen sprang der Abstand zum eigenen Feld zwischen 5, 21 und 36px. Vom Betreiber gesehen: "die feld-namen sind nur in den ersten 4 feldern auf richtiger höhe". Mit align-self: end steht jede Beschriftung buendig ueber ihrem Feld, unabhaengig davon, wie hoch die Nachbarin ist. */ .cs-neu #saveForm table.filterTable > tbody > tr.cs-paar > td.filterCellHeader, .cs-neu #saveForm table.filterTable > tr.cs-paar > td.filterCellHeader { align-self: end; } } /* ---- Filterfelder: Breitendeckel ---------------------------------------- Ein mit einer Zeile und drei Zellen. Die Fehlermeldung teilt Farbe und Bauform mit .disabledBooking weiter oben - dort haengt sie an einem Bestands-Klassennamen, den ich fuer einen anderen Zweck nicht mitbenutzen wollte. #8a3b00 kommt auf 7.8:1 gegen Weiss; reines Rot schafft nur 4.0:1. Alle Angaben in PIXELN. */ .cs-neu .cs-meldung { display: flex; flex-direction: column; gap: var(--cs-abstand-2); margin: 0 0 var(--cs-abstand-4); padding: var(--cs-abstand-3) var(--cs-abstand-4); border: 1px solid currentColor; border-left-width: 4px; border-radius: var(--cs-radius); background: var(--cs-flaeche); } .cs-neu .cs-meldung--fehler { color: #8a3b00; } .cs-neu .cs-meldung h3 { margin: 0; font-size: var(--cs-schrift-normal); } /* Zahl und Knopf nebeneinander, sobald Platz ist - auf dem Handy untereinander, damit die Zahl nicht auf zwei Zeichen zusammenschrumpft. */ .cs-neu .cs-ergebnis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-abstand-3); margin: var(--cs-abstand-3) 0; padding: var(--cs-abstand-3) var(--cs-abstand-4); border: 1px solid var(--cs-linie); border-radius: var(--cs-radius); background: var(--cs-flaeche); } .cs-neu .cs-ergebnis__zahl { flex: 1 1 200px; margin: 0; font-size: var(--cs-schrift-normal); } .cs-neu .cs-ergebnis__zahl span { font-size: var(--cs-schrift-gross); font-weight: 700; } /* Die beiden Datumsfelder sind jQuery-UI-Datepicker und erwarten dd.mm.yyyy - darum KEIN , das wuerde ein anderes Format an invoices_check() liefern. Sie bekommen aber die Zielhoehe und duerfen die Zelle fuellen, statt in Bestandsbreite dazustehen. */ .cs-neu #contentContent .datepicker { min-height: var(--cs-ziel); max-width: 200px; width: 100%; } /* ========================================================================== Ankreuzfelder als Gitter ========================================================================== Betreiber zu "Tour-Guide bearbeiten": "könnten doch die sprachen und städte zwei- bis dreispaltig sein". Vorher stand dort Text
- eine Spalte, und anklickbar war nur das rund 22px grosse Kaestchen. Der Name daneben war blosser Text. Das
, mit der liegende Bilder frueher senkrecht zentriert wurden. Das ganze Bild zeigt die Lightbox. */ .cs-neu .cs-bildkachel__verweis { display: block; } .cs-neu .cs-bildkachel__bild { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* Die Leiste liegt UEBER dem unteren Bildrand, nicht darunter - sonst waere die Kachel bei drei Spalten zur Haelfte Bedienelement. */ .cs-neu .cs-bildkachel__leiste { display: flex; justify-content: space-around; align-items: center; gap: 2px; padding: 2px; background: rgba(0, 0, 0, .55); } .cs-neu .cs-bildkachel__knopf, .cs-neu .cs-bildkachel__wahl { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: var(--cs-ziel); padding: 0; border: 0; border-radius: var(--cs-radius); background: none; color: #fff; font-size: var(--cs-schrift-normal); cursor: pointer; } .cs-neu .cs-bildkachel__knopf:hover, .cs-neu .cs-bildkachel__wahl:hover { background: rgba(255, 255, 255, .18); } /* Warnfarbe auf dunklem Grund: #ff8a4c statt #8a3b00, das auf Schwarz nicht traegt. */ .cs-neu .cs-bildkachel__knopf--warnung { color: #ff8a4c; } /* Das Radiofeld selbst ist unsichtbar - sichtbar ist der Stern, und der zeigt durch seine Fuellung, ob dieses Bild die Vorschau ist. */ .cs-neu .cs-bildkachel__wahl input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); } .cs-neu .cs-bildkachel__wahl:has(input:checked) { color: var(--cs-gruen-hell); } .cs-neu .cs-bildkachel__wahl:has(input:checked) i { font-weight: 900; } /* Sichtbarer Fokus - auf schwarzem Grund braucht es einen hellen Ring. */ .cs-neu .cs-bildkachel__knopf:focus-visible, .cs-neu .cs-bildkachel__wahl:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: -2px; } /* ========================================================================== Zustandszeichen statt Bitmaps ========================================================================== Drei Stellen trugen Zustaende als Bild: die Gutschein-Pruefung beim Anlegen einer Buchung (accept/exclamation/spacer), die Sanduhr am angefragten Guide im Kalender und der Haken auf dem gewaehlten Tag im Mehrtage-Waehler. Allen dreien fehlte eine Beschriftung - man sah ein Symbol und musste raten. Das Zeichen kommt jetzt aus der Hausschrift, der Text steht im title und in einer nur-sr-Zeile daneben. FARBE ALLEIN TRAEGT DIE AUSSAGE NICHT: Haken und Ausrufezeichen sind auch ohne Farbunterscheidung verschiedene Formen. */ .cs-neu .cs-pruefzeichen { display: inline-flex; align-items: center; justify-content: center; min-width: var(--cs-ziel); min-height: var(--cs-ziel); } .cs-neu .cs-pruefzeichen::before { font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: var(--cs-schrift-gross); line-height: 1; } /* \f058 = check-circle, \f06a = exclamation-circle. #4a6b0a und #8a3b00 sind dieselben Werte wie am Hausknopf und am Warnabzeichen - beide ueber 7:1 auf Weiss. Das gruene #5c5 aus screen.css schafft nur 1.8:1. */ .cs-neu .cs-pruefzeichen[data-stand="gut"]::before { content: "\f058"; color: #4a6b0a; } .cs-neu .cs-pruefzeichen[data-stand="fehler"]::before { content: "\f06a"; color: #8a3b00; } .cs-neu .cs-pruefzeichen[data-stand="leer"]::before { content: ""; } /* Sanduhr am angefragten Guide - sie stand vorher absolut positioniert halb ueber dem Namen. */ .cs-neu .cs-angefragt { display: inline-flex; align-items: center; margin-left: var(--cs-abstand-2); color: #8a3b00; } /* Haken auf dem gewaehlten Tag im Mehrtage-Waehler. Die Bitmap war ueber negative Raender in die Zellenecke gezogen; hier genuegt die Verankerung. */ .cs-neu .cs-tagmarke { position: absolute; top: 2px; left: 2px; color: var(--cs-gruen-dunkel); font-size: var(--cs-schrift-normal); } /* ---- Ankreuzfeld allein in seiner Zelle ---------------------------------- Die meisten Kaestchen im Admin sitzen in einem