/* Der Umschaltpunkt richtet sich nach dem Platz, den die LISTE hat - nicht nach der Fensterbreite. Dadurch wird sie auch in einem schmalen Panel zur Karte. */ .cs-liste { container-type: inline-size; container-name: liste; } .cs-liste__tabelle { width: 100%; border-collapse: collapse; font-size: var(--cs-schrift-normal); } .cs-liste__tabelle th { text-align: left; padding: var(--cs-abstand-2) var(--cs-abstand-3); background: #f0f2ec; color: #4a5340; font-size: var(--cs-schrift-klein); white-space: nowrap; } .cs-liste__tabelle td { padding: var(--cs-abstand-2) var(--cs-abstand-3); border-top: 1px solid var(--cs-linie); vertical-align: top; } .cs-liste__tabelle tbody tr:nth-child(even) { background: #fbfcfa; } .cs-liste__leer { padding: var(--cs-abstand-5) var(--cs-abstand-3); color: var(--cs-text-leise); text-align: center; } /* In der TABELLENFORM stehen die Aktionen nebeneinander. Ohne diese Regel bekommt die Spalte von der automatischen Tabellenaufteilung nur so viel Platz, wie der Rest uebrig laesst, und stapelt die Knoepfe untereinander - bei fuenf Aktionen also fuenf Zeilen. Gemessen an der Tourenliste: die Spalte bekam 132 statt der noetigen 511 Pixel, und JEDE Tabellenzeile wurde dadurch 128 bis 257 Pixel hoch. Vom Betreiber gemeldet: "wenn ich sehr breite fenster habe sind die buttons rechts untereinander und brauchen unnoetig viel platz". Mit nowrap fordert die Spalte die Breite an, die sie braucht; der Platz kommt aus den Textspalten, die dank cs-langtext schmaler werden duerfen. Stand vorher zweimal einzeln da (#liste-guideinfo, #liste-touren) und fehlte bei fuenf weiteren Listen. Beim dritten Mal gehoert es in die Komponente - sonst braucht jede neue Liste denselben Eintrag. Auf der KARTE muss umgebrochen werden duerfen: dort ist die Zelle so breit wie die Karte. Jeder Kartenblock nimmt die Regel darum zurueck. */ .cs-liste__aktionen { white-space: nowrap; } /* ACHTUNG: Angaben in PIXELN, nicht in rem. screen.css:8 setzt die Wurzel-Schriftgroesse auf 9pt = 12px - eine rem-Angabe waere hier also ein Viertel kleiner als erwartet (55rem = 660px statt 880px). Umschaltpunkt 880px, an den tatsaechlichen Containerbreiten ausgerichtet: 390er Fenster -> Container ~366 -> Karten 768er Fenster -> Container ~744 -> Karten (7 Spalten brauchen 941px) 1024er Fenster -> Container ~1000 -> Tabelle passt 1440er Fenster -> Container ~1150 -> Tabelle Bei 40rem blieb zwischen 640 und 940 eine seitwaerts scrollende Tabelle. */ /* ---- Karten ------------------------------------------------------------ Unter 40rem verfuegbarer Breite wird aus jeder Zeile eine Karte. Gleiches DOM, andere Darstellung. */ @container liste (max-width: 880px) { .cs-liste__tabelle, .cs-liste__tabelle tbody, .cs-liste__tabelle tr, .cs-liste__tabelle td { display: block; } /* Auf der Karte duerfen die Aktionen umbrechen - die Zelle ist hier so breit wie die Karte. Nimmt die Grundregel zurueck (siehe .cs-liste__aktionen). */ .cs-liste__aktionen { white-space: normal; } .cs-liste__tabelle thead { display: none; } .cs-liste__tabelle tr { margin-bottom: var(--cs-abstand-2); padding: var(--cs-abstand-3); background: var(--cs-flaeche); border: 1px solid var(--cs-linie); border-left: 3px solid var(--cs-linie); border-radius: var(--cs-radius); } .cs-liste__tabelle tbody tr:nth-child(even) { background: var(--cs-flaeche); } .cs-liste__tabelle td { padding: 2px 0; border-top: 0; } /* Beschriftung vor den Wert setzen - sie steht sonst nur im thead. */ .cs-liste__tabelle td::before { content: attr(data-label) ": "; color: var(--cs-text-leise); font-size: var(--cs-schrift-klein); } /* Die Kopfzeile der Karte braucht keine Beschriftung. */ .cs-liste__primaer { font-size: var(--cs-schrift-gross); font-weight: 600; margin-bottom: var(--cs-abstand-1); } .cs-liste__tabelle td.cs-liste__primaer::before { content: none; } } /* ---- Feldpriorisierung -------------------------------------------------- Zurueckstufen, nicht weglassen. */ @container liste (max-width: 880px) { /* prio 2 bleibt sichtbar, aber leiser. */ .cs-liste__tabelle td[data-prio="2"] { font-size: var(--cs-schrift-klein); color: var(--cs-text-leise); } /* Zellen ohne Aussage verschwinden auf der Karte - in der Tabelle bleiben sie, damit die Spalten stimmen. */ .cs-liste__tabelle td[data-leer="ja"] { display: none; } /* prio 3 wird eingeklappt - NICHT entfernt. Sonst verlieren die mobilen Nutzer Daten, die am Desktop sichtbar sind. */ .cs-liste__tabelle td[data-prio="3"] { display: none; } .cs-liste tr[data-detail="offen"] td[data-prio="3"] { display: block; } .cs-liste__mehr { display: inline-flex; align-items: center; min-height: var(--cs-ziel); margin-top: var(--cs-abstand-1); background: none; border: 0; padding: 0; color: var(--cs-gruen-dunkel); font-size: var(--cs-schrift-klein); cursor: pointer; } } /* Breit gibt es keinen Aufklapper - dort stehen alle Spalten ohnehin. */ @container liste (min-width: 881px) { .cs-liste__mehr { display: none; } } /* ---- Status und Aktionen ------------------------------------------------ */ .cs-status { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: var(--cs-schrift-klein); font-weight: 600; white-space: nowrap; } /* offen und gebucht lagen zu dicht beieinander (Delta R14/G6/B1) - auf dem Handy im Sonnenlicht nicht trennbar. Jetzt ueber Helligkeit UND Form: offen ist hell mit Rahmen, gebucht ist gefuellt und dunkler. */ .cs-status[data-art="offen"] { background: #f4faE6; color: #3f5c08; box-shadow: inset 0 0 0 1px #b7d16a; } .cs-status[data-art="gebucht"] { background: #2f7a25; color: #fff; } .cs-status[data-art="zu"] { background: #ececec; color: #555; } /* vorbei war transparent und las sich dadurch nicht als Abzeichen, sondern wie versehentlich grauer Text. */ .cs-status[data-art="vorbei"] { background: #f2f2f2; color: #7a7a7a; box-shadow: inset 0 0 0 1px #e0e0e0; } /* "Keine Anmeldung" in der Tour-Uebersicht ist der Zustand, der Handeln verlangt - im Bestand ein Warndreieck. Mit einer der drei Arten darueber stuende der dringendste Fall so ruhig da wie der erledigte: "zu" ist grau, "offen" ist hellgruen. Darum eine vierte Art, gefuellt und deutlich waermer - sie unterscheidet sich von "gebucht" auch dann, wenn Rot und Gruen nicht getrennt werden koennen (Helligkeit 4,9:1 zu Weiss). */ .cs-status[data-art="warnung"] { background: #8a3b00; color: #fff; } .cs-knopf { display: inline-flex; align-items: center; justify-content: center; /* Abstand zwischen Symbol und Beschriftung. Bei den symbolonly-Knoepfen bleibt er wirkungslos: deren .cs-nur-sr steht absolut und ist damit kein Flex-Element mehr. */ gap: var(--cs-abstand-2); min-height: var(--cs-ziel); padding: 0 var(--cs-abstand-3); margin: 2px 4px 2px 0; border: 1px solid #cfd8c0; border-radius: var(--cs-radius); /* Hintergrund und Schrift MUESSEN gesetzt sein, sonst sieht die Klasse auf und auf