|
|
|
@@ -693,14 +693,17 @@ button { font-family: inherit; }
|
|
|
|
|
background: var(--bg-card);
|
|
|
|
|
border: 1px solid var(--border-soft);
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
/* overflow-x:auto statt hidden -- Tabellen mit vielen Spalten (Geräte,
|
|
|
|
|
Switche, Papierkorb, ...) würden auf Handy/Tablet sonst entweder die
|
|
|
|
|
ganze Seite waagerecht aufreißen oder (mit overflow:hidden) Spalten
|
|
|
|
|
einfach lautlos abschneiden. Scrollt jetzt NUR die Tabelle selbst,
|
|
|
|
|
der Rest der Seite bleibt an Ort und Stelle -- dasselbe Muster wie
|
|
|
|
|
Bootstraps .table-responsive. */
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
overflow-y: hidden;
|
|
|
|
|
/* Zurück auf overflow:hidden (nur für die abgerundeten Ecken) --
|
|
|
|
|
JEDES Template, das .table-wrap verwendet, hat bereits einen eigenen
|
|
|
|
|
<div style="overflow-x:auto;"> exakt um die <table> herum (nicht um
|
|
|
|
|
die ganze Karte). overflow-x:auto zusätzlich HIER hätte einen zweiten,
|
|
|
|
|
verschachtelten Scroll-Container um denselben Inhalt erzeugt -- live
|
|
|
|
|
auf einem iPhone-Viewport nachgewiesen: bei der aufklappbaren
|
|
|
|
|
Rechte-Tabelle (Gruppen-Seite) landete der Inhalt dadurch dauerhaft
|
|
|
|
|
unsichtbar bei negativem x. Die Tabellen scrollen also weiterhin
|
|
|
|
|
horizontal, nur über den bereits vorhandenen inneren Wrapper, nicht
|
|
|
|
|
zusätzlich über die Karte selbst. */
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.table-wrap table.data-table { min-width: 560px; }
|
|
|
|
|
|
|
|
|
@@ -810,6 +813,12 @@ table.data-table {
|
|
|
|
|
========================================================================== */
|
|
|
|
|
|
|
|
|
|
.field { margin-bottom: 15px; }
|
|
|
|
|
/* Zwei .field nebeneinander in einer .flex-Zeile (z.B. HTTP-/HTTPS-Port
|
|
|
|
|
bei NGINX) -- als Klasse statt inline style="flex:1", damit die
|
|
|
|
|
Mobile-Stapel-Regel (siehe @media max-width:640px weiter unten) sie
|
|
|
|
|
per externem Stylesheet überschreiben kann; ein inline style gewinnt
|
|
|
|
|
sonst grundsätzlich gegen jede @media-Regel, ganz gleich wie spezifisch. */
|
|
|
|
|
.field--half { flex: 1; min-width: 0; }
|
|
|
|
|
.field label {
|
|
|
|
|
display: block;
|
|
|
|
|
font-size: 12.5px;
|
|
|
|
@@ -1351,4 +1360,16 @@ select {
|
|
|
|
|
Breite ein statt als schmaler Block rechts zu kleben. */
|
|
|
|
|
.section-head > .btn,
|
|
|
|
|
.section-head > .btn-sm { flex: 1 1 100%; }
|
|
|
|
|
|
|
|
|
|
/* Auf einem iPhone quetschen die beiden rechten Topbar-Pillen (Prüf-
|
|
|
|
|
Countdown + DHCP) .topbar-left (flex:1 1 0%, min-width:0) so weit
|
|
|
|
|
zusammen, dass der Seitentitel über seine eigene Spaltenbreite
|
|
|
|
|
hinausläuft und sichtbar mit der Pille kollidiert (per Playwright-
|
|
|
|
|
Screenshot auf 393px Breite nachgewiesen: .topbar-title ragte 24.5px
|
|
|
|
|
über .topbar-lefts berechnete Breite hinaus). Titel und Pillen
|
|
|
|
|
bekommen ab hier je eine eigene Zeile statt sich einen Platz zu
|
|
|
|
|
teilen, der für beide zusammen nicht reicht. */
|
|
|
|
|
.topbar { flex-wrap: wrap; row-gap: 6px; }
|
|
|
|
|
.topbar-left { flex: 1 1 100%; }
|
|
|
|
|
.topbar-right { flex: 1 1 100%; justify-content: flex-start; }
|
|
|
|
|
}
|
|
|
|
|
alientimandClaude Sonnet 5