|
|
|
@@ -197,13 +197,23 @@ button { font-family: inherit; }
|
|
|
|
|
.nav-group.expanded .nav-group-children { display: flex; }
|
|
|
|
|
.nav-group-children .nav-item { font-size: 13px; padding: 8px 12px; }
|
|
|
|
|
|
|
|
|
|
/* Kacheln nebeneinander (z.B. Im-/Export, Konto-Seite) */
|
|
|
|
|
/* Kacheln nebeneinander (z.B. Im-/Export, Konto-Seite). minmax(min(...,
|
|
|
|
|
100%), 1fr) statt eines nackten Pixelwerts -- eine Spalten-Mindestbreite
|
|
|
|
|
von z.B. 340px würde auf einem 375px-iPhone (abzüglich .content-Padding)
|
|
|
|
|
sonst waagerechten Overflow der ganzen Seite erzwingen, weil "auto-fit"
|
|
|
|
|
erst ab einer Breite größer als der Mindestwert umbricht. */
|
|
|
|
|
.settings-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
|
|
|
|
|
gap: 24px;
|
|
|
|
|
align-items: start;
|
|
|
|
|
}
|
|
|
|
|
/* Modifier für Seiten, die etwas breitere Karten brauchen (z.B. NGINX,
|
|
|
|
|
LDAP) -- ersetzt frühere inline style="grid-template-columns:..."
|
|
|
|
|
Overrides, die denselben 100%-Fallback nicht hatten. */
|
|
|
|
|
.settings-grid--wide {
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Navbar-Reihenfolge (Settings) */
|
|
|
|
|
.nav-order-list {
|
|
|
|
@@ -683,8 +693,19 @@ button { font-family: inherit; }
|
|
|
|
|
background: var(--bg-card);
|
|
|
|
|
border: 1px solid var(--border-soft);
|
|
|
|
|
border-radius: var(--radius);
|
|
|
|
|
/* 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; }
|
|
|
|
|
|
|
|
|
|
.table-toolbar {
|
|
|
|
|
display: flex;
|
|
|
|
@@ -792,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;
|
|
|
|
@@ -1156,8 +1183,14 @@ select {
|
|
|
|
|
Logs mit nur R). Feste/zu schmale Breiten haben die D-Spalte bei
|
|
|
|
|
Geräte zuvor lautlos in den Overflow geschoben. */
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
padding-right: 28px;
|
|
|
|
|
border-right: 1px solid var(--border-soft);
|
|
|
|
|
/* Fällt eine einzelne Spalte (z.B. Geräte mit vielen Rechten-Spalten)
|
|
|
|
|
trotz .permission-groups-row's flex-wrap auf einem schmalen Screen
|
|
|
|
|
für sich genommen noch zu breit aus, scrollt nur diese eine Spalte
|
|
|
|
|
waagerecht statt die Seite aufzureißen. */
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
}
|
|
|
|
|
.permission-group-col:last-child { border-right: none; padding-right: 0; }
|
|
|
|
|
.permission-group-header-cell { padding-left: 0 !important; }
|
|
|
|
@@ -1286,14 +1319,57 @@ select {
|
|
|
|
|
.content { padding: 18px 16px 40px; }
|
|
|
|
|
.topbar { padding: 10px 16px; }
|
|
|
|
|
.topbar-logo { opacity: 0.5; }
|
|
|
|
|
|
|
|
|
|
/* Ab hier iPad-Breite (900px ist bereits der bestehende Sidebar-
|
|
|
|
|
Umschaltpunkt) und schmaler: generische Button-/Toolbar-Zeilen
|
|
|
|
|
(.flex) sollen umbrechen statt seitlich überzulaufen -- betrifft vor
|
|
|
|
|
allem Kopfzeilen mit mehreren Aktions-Buttons (z.B. NGINX-, Logs-,
|
|
|
|
|
Verlauf-Seite) und nebeneinander angeordnete Formularfelder. */
|
|
|
|
|
.flex { flex-wrap: wrap; }
|
|
|
|
|
.section-head { flex-wrap: wrap; }
|
|
|
|
|
.term-toolbar, .log-toolbar { flex-wrap: wrap; row-gap: 8px; }
|
|
|
|
|
.detail-row { flex-wrap: wrap; }
|
|
|
|
|
.detail-row .v { text-align: left; }
|
|
|
|
|
|
|
|
|
|
/* Modal-Fußzeilen (Speichern/Abbrechen) und Tabellen-Kopfzeilen
|
|
|
|
|
(Suche + Aktion) sollen bei wenig Platz ebenfalls umbrechen statt
|
|
|
|
|
Buttons/Suchfeld ineinanderzuschieben. */
|
|
|
|
|
.modal-footer { flex-wrap: wrap; }
|
|
|
|
|
.table-toolbar .search-input { min-width: 0; flex: 1 1 160px; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 640px) {
|
|
|
|
|
.topbar-logo { display: none; }
|
|
|
|
|
|
|
|
|
|
/* Formulare mit zwei nebeneinander angeordneten Feldern (class="flex
|
|
|
|
|
gap-2" um zwei .field-Divs, z.B. HTTP-/HTTPS-Port bei NGINX) stapeln
|
|
|
|
|
auf Handy-Breite volle Breite pro Feld statt zwei sehr schmale
|
|
|
|
|
Eingaben nebeneinander zu erzwingen. */
|
|
|
|
|
form .flex > .field { flex-basis: 100%; }
|
|
|
|
|
|
|
|
|
|
.modal-header, .modal-body, .modal-footer { padding-left: 16px; padding-right: 16px; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 560px) {
|
|
|
|
|
.device-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
|
|
|
|
.topbar-title { font-size: 16px; }
|
|
|
|
|
.stat-row { grid-template-columns: repeat(2, 1fr); }
|
|
|
|
|
|
|
|
|
|
/* Button-Leisten in Kopfzeilen (z.B. section-head/card-Kopf mit
|
|
|
|
|
"RAW anzeigen" o.ä.) nehmen auf sehr schmalen Screens die volle
|
|
|
|
|
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