Config-Layout: breiter, zweispaltig, Schalter lesbar, Texte aufklappbar
Drei Sachen, die die Seite erschlagend gemacht haben. Die Schalter klebten am Text, weil `.field > label` spezifischer ist als `.toggle` — die Regel hat den Schalter zu einem Block in Versalien gemacht und Beschriftung plus Hinweis in eine Zeile gequetscht. Jetzt steht der Schalter links, Beschriftung und Hinweis darüber/darunter, in normaler Schrift. Der Schalter ist außerdem so groß wie der auf den Modul-Karten. Der Inhalt war auf 1060px begrenzt, obwohl hier Formulare stehen und keine Fließtexte. Jetzt 1440px, und die reinen Formular-Tabs (Feeds, Community, Support, System) stellen ihre Blöcke ab 1180px nebeneinander. Feeds ist damit 1448 statt 2453 Pixel hoch. Tabs mit Editor oder Vorschau — Composer, Seiten, Server, Brand — bleiben einspaltig. Der Texte-Tab zeigte 27 offene Textfelder gleichzeitig. Jetzt ist es eine Liste zum Aufklappen: pro Zeile Name und erste Zeile des Texts, geöffnet wird eine nach der anderen. Ungespeicherte Änderungen sind an der Marke und einem Balken am Rand erkennbar. Nebenbei: eine geänderte Adresse (#feeds) wechselte den Bereich nicht, weil niemand auf hashchange gehört hat. Aufgefallen ist das erst, weil ein Test durch reine Hash-Navigation stillschweigend auf dem alten Tab blieb. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
+105
-24
@@ -622,7 +622,9 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
|
||||
}
|
||||
|
||||
/* ── SETTINGS-LAYOUT (Sidebar + Content) ───────────── */
|
||||
.content-wide { max-width: 1060px; }
|
||||
/* Config-Seite: deutlich breiter als Lesetexte — hier stehen Formulare und
|
||||
Karten nebeneinander, schmal erzwingt sonst unnötiges Scrollen. */
|
||||
.content-wide { max-width: 1440px; padding-left: 2rem; padding-right: 2rem; }
|
||||
|
||||
.settings-layout {
|
||||
display: flex;
|
||||
@@ -710,6 +712,17 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
|
||||
|
||||
.settings-content { flex: 1; min-width: 0; animation: riseIn .3s ease both; }
|
||||
|
||||
/* Tabs, die nur aus Formular-Blöcken bestehen, stellen ihre Blöcke ab genug
|
||||
Breite nebeneinander — halbiert das Scrollen, ohne das Innenleben eines
|
||||
Blocks anzufassen. Tabs mit Editoren und Vorschauen bleiben einspaltig. */
|
||||
@media (min-width: 1180px) {
|
||||
.settings-content.dense { columns: 2; column-gap: 1.25rem; }
|
||||
.settings-content.dense > .settings-section {
|
||||
break-inside: avoid;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section-intro {
|
||||
color: var(--muted);
|
||||
font-weight: 300;
|
||||
@@ -861,26 +874,55 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
|
||||
transition: border-color .2s;
|
||||
}
|
||||
.field select:focus, .field input[type="text"]:focus { border-color: var(--neon); }
|
||||
/* Auf breiten Schirmen sollen Eingabefelder nicht über die halbe Seite laufen */
|
||||
.field select, .field input[type="text"], .field input[type="number"] { max-width: 44rem; }
|
||||
.field select option { background: #0d0d0d; }
|
||||
|
||||
.toggle { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
|
||||
/* Schalter links, Beschriftung und Hinweis rechts gestapelt — vorher klebten
|
||||
alle drei in einer Zeile aneinander. Fehlt der Hinweis, bleibt Zeile 2 leer
|
||||
und kostet keine Höhe.
|
||||
Der Typ-Selektor muss sein: `.field > label` weiter oben ist spezifischer
|
||||
als eine einzelne Klasse und hat die Schalter sonst wieder zu Blöcken in
|
||||
Versalien gemacht. */
|
||||
label.toggle {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
column-gap: 1rem; row-gap: .2rem;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: .15rem 0;
|
||||
margin-bottom: 0;
|
||||
/* Beschriftung des Schalters ist Fließtext, nicht die Versalien-Feldzeile */
|
||||
font-family: inherit; font-size: inherit;
|
||||
letter-spacing: normal; text-transform: none;
|
||||
color: inherit;
|
||||
}
|
||||
.toggle input {
|
||||
appearance: none;
|
||||
width: 34px; height: 18px; flex-shrink: 0;
|
||||
background: #222; border: 1px solid rgba(255, 255, 255, .15);
|
||||
grid-column: 1; grid-row: 1;
|
||||
width: 42px; height: 24px; flex-shrink: 0;
|
||||
background: var(--bg3); border: 1px solid var(--border);
|
||||
position: relative; cursor: pointer;
|
||||
transition: background .2s, border-color .2s;
|
||||
}
|
||||
.toggle input::after {
|
||||
content: '';
|
||||
position: absolute; top: 2px; left: 2px;
|
||||
width: 12px; height: 12px;
|
||||
background: var(--muted);
|
||||
width: 18px; height: 18px;
|
||||
background: var(--muted2);
|
||||
transition: transform .2s, background .2s;
|
||||
}
|
||||
.toggle input:checked { background: rgba(245, 197, 24, .2); border-color: var(--neon); }
|
||||
.toggle input:checked::after { transform: translateX(16px); background: var(--neon); }
|
||||
.toggle > span:first-of-type { color: var(--text); font-size: .95rem; }
|
||||
.toggle:hover input { border-color: var(--neon); }
|
||||
.toggle input:checked { background: var(--neon); border-color: var(--neon); }
|
||||
.toggle input:checked::after { transform: translateX(18px); background: #0a0a0a; }
|
||||
.toggle > span:first-of-type {
|
||||
grid-column: 2; grid-row: 1;
|
||||
color: var(--text); font-size: .95rem;
|
||||
}
|
||||
.toggle .field-hint {
|
||||
grid-column: 2; grid-row: 2;
|
||||
margin-left: 0; font-size: .82rem; line-height: 1.4;
|
||||
}
|
||||
|
||||
/* API-Keys */
|
||||
.key-list { margin-bottom: 1.2rem; border: 1px solid rgba(255, 255, 255, .06); }
|
||||
@@ -1744,22 +1786,56 @@ button.with-icon, a.with-icon { justify-content: center; }
|
||||
.mod-switch:hover { border-color: var(--neon); }
|
||||
|
||||
/* ── TEXT-VORLAGEN ─────────────────────────────────── */
|
||||
/* Kurze Vorlagen teilen sich eine Zeile, mehrzeilige bekommen die volle Breite */
|
||||
/* Vorlagen als Liste zum Aufklappen — 27 offene Felder auf einmal erschlagen.
|
||||
Zugeklappt sieht man Namen und erste Zeile, das reicht zum Wiederfinden. */
|
||||
.tpl-list {
|
||||
display: grid; gap: .9rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
|
||||
display: flex; flex-direction: column;
|
||||
border: 1px solid rgba(255, 255, 255, .06);
|
||||
border-radius: 10px; overflow: hidden;
|
||||
}
|
||||
.tpl-card.long { grid-column: 1 / -1; }
|
||||
.tpl-card {
|
||||
display: flex; flex-direction: column; gap: .6rem;
|
||||
padding: 1.1rem 1.2rem;
|
||||
transition: border-color .2s;
|
||||
.tpl-row { border-bottom: 1px solid rgba(255, 255, 255, .06); }
|
||||
.tpl-row:last-child { border-bottom: 0; }
|
||||
.tpl-row.open { background: rgba(255, 255, 255, .015); }
|
||||
.tpl-row.dirty { box-shadow: inset 2px 0 0 var(--neon); }
|
||||
|
||||
.tpl-head {
|
||||
display: flex; align-items: center; gap: .7rem;
|
||||
width: 100%; text-align: left;
|
||||
background: none; border: 0;
|
||||
padding: .7rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: background .15s;
|
||||
}
|
||||
.tpl-head:hover { background: rgba(255, 255, 255, .03); }
|
||||
.tpl-head-main {
|
||||
flex: 1; min-width: 0;
|
||||
display: flex; align-items: baseline; gap: .8rem;
|
||||
}
|
||||
.tpl-card.dirty { border-color: var(--neon); }
|
||||
.tpl-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
|
||||
.tpl-name {
|
||||
font-family: var(--display); font-size: 1.05rem;
|
||||
font-family: var(--display); font-size: 1.02rem;
|
||||
letter-spacing: .04em; color: var(--text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* Erste Zeile des aktuellen Texts als Vorschau */
|
||||
.tpl-peek {
|
||||
flex: 1; min-width: 0;
|
||||
font-family: var(--mono); font-size: .74rem;
|
||||
color: var(--muted2);
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.tpl-row.open .tpl-peek { opacity: 0; }
|
||||
.tpl-caret { color: var(--muted2); flex: none; transition: transform .2s; }
|
||||
.tpl-caret.up { transform: rotate(180deg); color: var(--neon); }
|
||||
|
||||
.tpl-body {
|
||||
display: flex; flex-direction: column; gap: .7rem;
|
||||
padding: 0 1rem 1rem;
|
||||
animation: riseIn .2s ease both;
|
||||
}
|
||||
.tpl-vars-label {
|
||||
font-family: var(--mono); font-size: .6rem;
|
||||
letter-spacing: .15em; text-transform: uppercase;
|
||||
color: var(--muted2); align-self: center; margin-right: .2rem;
|
||||
}
|
||||
.tpl-badge {
|
||||
font-family: var(--mono); font-size: .55rem;
|
||||
@@ -1769,11 +1845,11 @@ button.with-icon, a.with-icon { justify-content: center; }
|
||||
}
|
||||
.tpl-badge.muted { color: var(--muted2); border-color: var(--border); }
|
||||
.tpl-input {
|
||||
width: 100%; resize: vertical;
|
||||
font-family: var(--mono); font-size: .82rem; line-height: 1.55;
|
||||
color: var(--text); background: var(--bg2);
|
||||
width: 100%; max-width: 62rem; resize: vertical;
|
||||
font-family: var(--mono); font-size: .84rem; line-height: 1.6;
|
||||
color: var(--text); background: #0d0d0d;
|
||||
border: 1px solid var(--border); border-radius: 5px;
|
||||
padding: .6rem .7rem;
|
||||
padding: .7rem .8rem;
|
||||
}
|
||||
.tpl-input:focus { outline: none; border-color: var(--neon); }
|
||||
.tpl-vars { display: flex; flex-wrap: wrap; gap: .35rem; }
|
||||
@@ -1787,3 +1863,8 @@ button.with-icon, a.with-icon { justify-content: center; }
|
||||
.tpl-var:hover { color: var(--neon); border-color: var(--neon); }
|
||||
.tpl-actions { display: flex; gap: .5rem; align-items: center; }
|
||||
.tpl-actions .btn { font-size: .6rem; padding: .4rem .9rem; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
/* Schmal ist für die Vorschau kein Platz mehr — Name und Marken reichen */
|
||||
.tpl-peek { display: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user