cms: Sveltia-Einflüsse im Admin (Suche, fixierte Action-Leiste, Status-Chips, Vorschau-Toggle)
- Sidebar-Suche, Gruppen mit Zähler, zweizeilige Einträge mit Datum - Editor-Kopf fixiert mit Speichern/Vorschau/Publizieren + Entwurf/Veröffentlicht-Chip - Vorschau-Pane ein-/ausblendbar - schwarze Topbar + Newsreader-Serif + Creme + Terracotta = Site-Look Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+113
-98
@@ -70,6 +70,7 @@ function Login() {
|
||||
function Dashboard({ email }) {
|
||||
const [entries, setEntries] = useState([]);
|
||||
const [current, setCurrent] = useState(null);
|
||||
const [query, setQuery] = useState('');
|
||||
const [msg, setMsg] = useState(null);
|
||||
|
||||
async function refresh() {
|
||||
@@ -80,15 +81,16 @@ function Dashboard({ email }) {
|
||||
useEffect(() => { if (!msg) return; const t = setTimeout(() => setMsg(null), 4000); return () => clearTimeout(t); }, [msg]);
|
||||
|
||||
async function open(entry) {
|
||||
try {
|
||||
const e = await api.read(entry.path);
|
||||
setCurrent(fromRead(e));
|
||||
} catch (err) { setMsg({ type: 'err', text: err.message }); }
|
||||
try { setCurrent(fromRead(await api.read(entry.path))); }
|
||||
catch (err) { setMsg({ type: 'err', text: err.message }); }
|
||||
}
|
||||
|
||||
// Nach Typ gruppieren.
|
||||
const q = query.trim().toLowerCase();
|
||||
const filtered = q
|
||||
? entries.filter((e) => e.title.toLowerCase().includes(q) || (e.section || '').includes(q))
|
||||
: entries;
|
||||
const groups = { beitrag: [], seite: [], rubrik: [] };
|
||||
for (const e of entries) (groups[e.kind] || groups.seite).push(e);
|
||||
for (const e of filtered) (groups[e.kind] || groups.seite).push(e);
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
@@ -96,22 +98,29 @@ function Dashboard({ email }) {
|
||||
<span className="logo">OPENBUREAU</span>
|
||||
<span className="logo-sub">Redaktion</span>
|
||||
<span className="spacer" />
|
||||
<span className="muted">{email}</span>
|
||||
<span className="who">{email}</span>
|
||||
<button className="ghost" onClick={() => supabase.auth.signOut()}>Abmelden</button>
|
||||
</header>
|
||||
|
||||
<div className="body">
|
||||
<aside>
|
||||
<button className="new" onClick={() => setCurrent({ ...EMPTY })}>＋ Neuer Beitrag</button>
|
||||
<div className="search">
|
||||
<span>⌕</span>
|
||||
<input placeholder="Suchen…" value={query} onChange={(e) => setQuery(e.target.value)} />
|
||||
</div>
|
||||
{['beitrag', 'seite', 'rubrik'].map((kind) => groups[kind].length > 0 && (
|
||||
<div className="group" key={kind}>
|
||||
<div className="group-title">{KIND_LABEL[kind]}</div>
|
||||
<div className="group-title">{KIND_LABEL[kind]} <span>{groups[kind].length}</span></div>
|
||||
<ul className="list">
|
||||
{groups[kind].map((e) => (
|
||||
<li key={e.path} className={current?.path === e.path ? 'active' : ''} onClick={() => open(e)}>
|
||||
<span className="dot" style={{ background: e.color ? hexOf(e.color) : 'var(--line)' }} />
|
||||
<span className="t">{e.title}{e.draft && <em className="draft-tag">Entwurf</em>}</span>
|
||||
{e.section && <span className="s">{e.section}</span>}
|
||||
<span className="t">
|
||||
<span className="t-title">{e.title}</span>
|
||||
<span className="t-meta">{[e.section, e.date].filter(Boolean).join(' · ')}</span>
|
||||
</span>
|
||||
{e.draft && <span className="draft-tag">Entwurf</span>}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -135,6 +144,7 @@ function Dashboard({ email }) {
|
||||
function Editor({ initial, onSaved, onMsg }) {
|
||||
const [f, setF] = useState(initial);
|
||||
const [previewUrl, setPreviewUrl] = useState(null);
|
||||
const [showPreview, setShowPreview] = useState(true);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const set = (k) => (e) => setF({ ...f, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
|
||||
|
||||
@@ -153,8 +163,7 @@ function Editor({ initial, onSaved, onMsg }) {
|
||||
try {
|
||||
await api.save(path, buildFrontmatter(f), f.body);
|
||||
const loaded = fromRead(await api.read(path));
|
||||
onSaved(loaded);
|
||||
setF(loaded);
|
||||
onSaved(loaded); setF(loaded);
|
||||
onMsg({ type: 'ok', text: 'Gespeichert.' });
|
||||
return path;
|
||||
} catch (e) { onMsg({ type: 'err', text: e.message }); return null; }
|
||||
@@ -164,11 +173,9 @@ function Editor({ initial, onSaved, onMsg }) {
|
||||
async function preview() {
|
||||
const path = await save();
|
||||
if (!path) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const res = await api.preview(path);
|
||||
setPreviewUrl(`${res.url}?t=${Date.now()}`);
|
||||
} catch (e) { onMsg({ type: 'err', text: e.message }); }
|
||||
setShowPreview(true); setBusy(true);
|
||||
try { const res = await api.preview(path); setPreviewUrl(`${res.url}?t=${Date.now()}`); }
|
||||
catch (e) { onMsg({ type: 'err', text: e.message }); }
|
||||
finally { setBusy(false); }
|
||||
}
|
||||
|
||||
@@ -177,91 +184,99 @@ function Editor({ initial, onSaved, onMsg }) {
|
||||
if (!path) return;
|
||||
if (!confirm('Diesen Eintrag live publizieren?')) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
const res = await api.publish(path);
|
||||
onMsg({ type: 'ok', text: `Live: ${res.url}` });
|
||||
} catch (e) { onMsg({ type: 'err', text: e.message }); }
|
||||
try { const res = await api.publish(path); onMsg({ type: 'ok', text: `Live: ${res.url}` }); }
|
||||
catch (e) { onMsg({ type: 'err', text: e.message }); }
|
||||
finally { setBusy(false); }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="editor">
|
||||
<div className="fields">
|
||||
<div className="path-row">
|
||||
{f.isNew ? (
|
||||
<>
|
||||
<label className="sm">Typ
|
||||
<select value={f.type} onChange={set('type')}>
|
||||
<option value="beitrag">Beitrag</option>
|
||||
<option value="seite">Seite</option>
|
||||
</select>
|
||||
</label>
|
||||
{f.type === 'beitrag' && (
|
||||
<label className="sm">Rubrik
|
||||
<select value={f.section} onChange={set('section')}>
|
||||
{SECTIONS.map((s) => <option key={s}>{s}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
<label>Slug<input value={f.slug} onChange={set('slug')} placeholder="z.B. neuer-beitrag" /></label>
|
||||
</>
|
||||
) : (
|
||||
<div className="pathlabel">{f.path}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<label className="big">Titel<input value={f.title} onChange={set('title')} /></label>
|
||||
|
||||
<div className="row">
|
||||
<label className="sm">Datum<input type="date" value={f.date} onChange={set('date')} /></label>
|
||||
<label className="xs">Reihenfolge<input type="number" value={f.weight} onChange={set('weight')} placeholder="weight" /></label>
|
||||
<label>Farbe
|
||||
<div className="colorpick">
|
||||
<span className="swatch" style={{ background: hexOf(f.color) }} />
|
||||
<select value={f.color} onChange={set('color')}>
|
||||
{COLORS.map(([v, label]) => <option key={v} value={v}>{label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<label className="sm">Layout
|
||||
<select value={f.layout} onChange={set('layout')}>
|
||||
{LAYOUTS.map((l) => <option key={l} value={l}>{l || '(automatisch)'}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label>Tags<input value={f.tags} onChange={set('tags')} placeholder="komma, getrennt" /></label>
|
||||
<label className="check"><input type="checkbox" checked={f.toc} onChange={set('toc')} /> Inhaltsverzeichnis</label>
|
||||
<label className="check"><input type="checkbox" checked={f.draft} onChange={set('draft')} /> Entwurf</label>
|
||||
</div>
|
||||
|
||||
<label>Kurztext (summary)<input value={f.summary} onChange={set('summary')} /></label>
|
||||
|
||||
<div className="row">
|
||||
<label>Cover-Bild<input value={f.cover_image} onChange={set('cover_image')} placeholder="/images/…jpg" /></label>
|
||||
<label>Externer Link<input value={f.external} onChange={set('external')} placeholder="https://…" /></label>
|
||||
</div>
|
||||
|
||||
<MarkdownEditor
|
||||
value={f.body}
|
||||
onChange={(body) => setF((p) => ({ ...p, body }))}
|
||||
onUpload={async (file) => (await api.upload(file)).url}
|
||||
onMsg={onMsg}
|
||||
/>
|
||||
|
||||
<div className="actions">
|
||||
<div className="editor-main">
|
||||
<div className="editor-head">
|
||||
<div className="crumb">{f.isNew ? 'Neuer Eintrag' : f.path}</div>
|
||||
<span className="spacer" />
|
||||
{f.draft
|
||||
? <span className="status draft">Entwurf</span>
|
||||
: <span className="status live">Veröffentlicht</span>}
|
||||
<button className="toggle" onClick={() => setShowPreview((v) => !v)} title="Vorschau ein/aus">
|
||||
{showPreview ? 'Vorschau ⤫' : 'Vorschau ⤢'}
|
||||
</button>
|
||||
<button onClick={save} disabled={busy}>Speichern</button>
|
||||
<button onClick={preview} disabled={busy}>Vorschau</button>
|
||||
<button className="primary" onClick={publish} disabled={busy}>Publizieren</button>
|
||||
</div>
|
||||
|
||||
<div className="fields">
|
||||
<div className="path-row">
|
||||
{f.isNew ? (
|
||||
<>
|
||||
<label className="sm">Typ
|
||||
<select value={f.type} onChange={set('type')}>
|
||||
<option value="beitrag">Beitrag</option>
|
||||
<option value="seite">Seite</option>
|
||||
</select>
|
||||
</label>
|
||||
{f.type === 'beitrag' && (
|
||||
<label className="sm">Rubrik
|
||||
<select value={f.section} onChange={set('section')}>
|
||||
{SECTIONS.map((s) => <option key={s}>{s}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
<label>Slug<input value={f.slug} onChange={set('slug')} placeholder="z.B. neuer-beitrag" /></label>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<label className="big">Titel<input value={f.title} onChange={set('title')} placeholder="Titel des Beitrags" /></label>
|
||||
|
||||
<div className="row">
|
||||
<label className="sm">Datum<input type="date" value={f.date} onChange={set('date')} /></label>
|
||||
<label className="xs">Reihenfolge<input type="number" value={f.weight} onChange={set('weight')} placeholder="weight" /></label>
|
||||
<label>Farbe
|
||||
<div className="colorpick">
|
||||
<span className="swatch" style={{ background: hexOf(f.color) }} />
|
||||
<select value={f.color} onChange={set('color')}>
|
||||
{COLORS.map(([v, label]) => <option key={v} value={v}>{label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<label className="sm">Layout
|
||||
<select value={f.layout} onChange={set('layout')}>
|
||||
{LAYOUTS.map((l) => <option key={l} value={l}>{l || '(automatisch)'}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label>Tags<input value={f.tags} onChange={set('tags')} placeholder="komma, getrennt" /></label>
|
||||
<label className="check"><input type="checkbox" checked={f.toc} onChange={set('toc')} /> Inhaltsverzeichnis</label>
|
||||
<label className="check"><input type="checkbox" checked={f.draft} onChange={set('draft')} /> Entwurf</label>
|
||||
</div>
|
||||
|
||||
<label>Kurztext (summary)<input value={f.summary} onChange={set('summary')} /></label>
|
||||
|
||||
<div className="row">
|
||||
<label>Cover-Bild<input value={f.cover_image} onChange={set('cover_image')} placeholder="/images/…jpg" /></label>
|
||||
<label>Externer Link<input value={f.external} onChange={set('external')} placeholder="https://…" /></label>
|
||||
</div>
|
||||
|
||||
<MarkdownEditor
|
||||
value={f.body}
|
||||
onChange={(body) => setF((p) => ({ ...p, body }))}
|
||||
onUpload={async (file) => (await api.upload(file)).url}
|
||||
onMsg={onMsg}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="preview">
|
||||
{previewUrl
|
||||
? <iframe title="Vorschau" src={previewUrl} />
|
||||
: <div className="empty small"><p>Vorschau erscheint hier nach „Vorschau“.</p></div>}
|
||||
</div>
|
||||
{showPreview && (
|
||||
<div className="preview">
|
||||
{previewUrl
|
||||
? <iframe title="Vorschau" src={previewUrl} />
|
||||
: <div className="empty small"><p>Auf „Vorschau“ klicken — die Seite erscheint hier in deinem echten Theme.</p></div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -280,19 +295,19 @@ function MarkdownEditor({ value, onChange, onUpload, onMsg }) {
|
||||
function wrap(pre, post = pre, placeholder = '') {
|
||||
const el = ta.current; const s = el.selectionStart, e = el.selectionEnd;
|
||||
const sel = value.slice(s, e) || placeholder;
|
||||
const next = value.slice(0, s) + pre + sel + post + value.slice(e);
|
||||
onChange(next); restore(s + pre.length, s + pre.length + sel.length);
|
||||
onChange(value.slice(0, s) + pre + sel + post + value.slice(e));
|
||||
restore(s + pre.length, s + pre.length + sel.length);
|
||||
}
|
||||
function linePrefix(prefix) {
|
||||
const el = ta.current; const s = el.selectionStart;
|
||||
const ls = value.lastIndexOf('\n', s - 1) + 1;
|
||||
const next = value.slice(0, ls) + prefix + value.slice(ls);
|
||||
onChange(next); restore(s + prefix.length, s + prefix.length);
|
||||
onChange(value.slice(0, ls) + prefix + value.slice(ls));
|
||||
restore(s + prefix.length, s + prefix.length);
|
||||
}
|
||||
function insert(text) {
|
||||
const el = ta.current; const s = el.selectionStart, e = el.selectionEnd;
|
||||
const next = value.slice(0, s) + text + value.slice(e);
|
||||
onChange(next); restore(s + text.length, s + text.length);
|
||||
onChange(value.slice(0, s) + text + value.slice(e));
|
||||
restore(s + text.length, s + text.length);
|
||||
}
|
||||
async function pickImage(ev) {
|
||||
const file = ev.target.files?.[0]; ev.target.value = '';
|
||||
@@ -330,7 +345,7 @@ function MarkdownEditor({ value, onChange, onUpload, onMsg }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Mapping DB-Lesart → Formular ───────────────────────────────────────────
|
||||
// ── Mapping Datei-Lesart → Formular ────────────────────────────────────────
|
||||
function fromRead(r) {
|
||||
const fm = r.frontmatter || {};
|
||||
return {
|
||||
|
||||
+47
-37
@@ -19,18 +19,17 @@
|
||||
--dark-text: #f0f0f0;
|
||||
--dark-muted: #a9a9a9;
|
||||
--ok: #5d7d4b;
|
||||
--amber: #b8902f;
|
||||
|
||||
--radius: 11px;
|
||||
--shadow: 0 10px 34px -22px rgba(40,20,10,.5);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body, #root { height: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--sans);
|
||||
font-size: 14.5px;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
margin: 0; font-family: var(--sans); font-size: 14.5px;
|
||||
color: var(--text); background: var(--bg);
|
||||
}
|
||||
button, input, select, textarea { font-family: inherit; font-size: inherit; color: var(--text); }
|
||||
.muted { color: var(--muted); }
|
||||
@@ -39,23 +38,20 @@ button, input, select, textarea { font-family: inherit; font-size: inherit; colo
|
||||
/* ── Login ── */
|
||||
.login {
|
||||
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
|
||||
padding: 36px 32px; width: 320px; display: flex; flex-direction: column; gap: 12px;
|
||||
box-shadow: 0 12px 40px -20px rgba(0,0,0,.3);
|
||||
padding: 36px 32px; width: 320px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow);
|
||||
}
|
||||
.login-brand { font-family: var(--display); font-weight: 700; letter-spacing: .14em; font-size: 20px; }
|
||||
.login-sub { font-family: var(--serif); font-style: italic; color: var(--muted); margin-bottom: 10px; }
|
||||
.err { color: var(--accent); margin: 4px 0 0; font-size: 13px; }
|
||||
|
||||
/* ── Inputs ── */
|
||||
/* ── Inputs / Buttons ── */
|
||||
input, select, textarea {
|
||||
background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
|
||||
padding: 9px 11px; width: 100%;
|
||||
background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; width: 100%;
|
||||
}
|
||||
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(181,74,44,.12); }
|
||||
|
||||
button {
|
||||
background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
|
||||
padding: 9px 16px; cursor: pointer; font-weight: 500; transition: .12s;
|
||||
padding: 8px 15px; cursor: pointer; font-weight: 500; transition: .12s; white-space: nowrap;
|
||||
}
|
||||
button:hover { border-color: var(--accent-soft); }
|
||||
button:disabled { opacity: .5; cursor: default; }
|
||||
@@ -64,33 +60,37 @@ button.primary:hover { background: #a23f23; }
|
||||
button.ghost { background: transparent; border-color: transparent; color: var(--dark-muted); }
|
||||
button.ghost:hover { color: #fff; border-color: var(--dark-muted); }
|
||||
|
||||
/* ── App-Rahmen ── */
|
||||
/* ── App / Topbar (schwarz wie der Site-Masthead) ── */
|
||||
.app { display: flex; flex-direction: column; height: 100%; }
|
||||
.topbar {
|
||||
display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 54px;
|
||||
background: var(--dark); color: var(--dark-text); flex: none;
|
||||
}
|
||||
.topbar { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 54px; background: var(--dark); color: var(--dark-text); flex: none; }
|
||||
.topbar .logo { font-family: var(--display); font-weight: 700; letter-spacing: .14em; }
|
||||
.topbar .logo-sub { font-family: var(--serif); font-style: italic; color: var(--dark-muted); font-size: 13px; }
|
||||
.topbar .spacer { flex: 1; }
|
||||
.topbar .muted { color: var(--dark-muted); font-size: 13px; }
|
||||
.topbar .who { color: var(--dark-muted); font-size: 13px; }
|
||||
|
||||
.body { display: flex; flex: 1; min-height: 0; }
|
||||
|
||||
/* ── Sidebar ── */
|
||||
aside { width: 280px; flex: none; border-right: 1px solid var(--line); background: var(--panel-2); padding: 14px; overflow: auto; }
|
||||
.new { width: 100%; margin-bottom: 16px; background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
/* ── Sidebar (Collections, Sveltia-artig) ── */
|
||||
aside { width: 290px; flex: none; border-right: 1px solid var(--line); background: var(--panel-2); padding: 14px; overflow: auto; }
|
||||
.new { width: 100%; margin-bottom: 12px; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
|
||||
.new:hover { background: #a23f23; }
|
||||
.search { display: flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; margin-bottom: 16px; }
|
||||
.search span { color: var(--muted); font-size: 17px; }
|
||||
.search input { border: none; background: transparent; padding: 9px 0; }
|
||||
.search input:focus { box-shadow: none; }
|
||||
|
||||
.group { margin-bottom: 18px; }
|
||||
.group-title { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 6px 7px; }
|
||||
.group-title { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 6px 8px; }
|
||||
.group-title span { background: var(--line); color: var(--muted); border-radius: 20px; padding: 1px 7px; font-size: 10px; letter-spacing: 0; }
|
||||
.list { list-style: none; margin: 0; padding: 0; }
|
||||
.list li { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; cursor: pointer; }
|
||||
.list li { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 9px; cursor: pointer; }
|
||||
.list li:hover { background: var(--panel); }
|
||||
.list li.active { background: var(--panel); box-shadow: inset 2px 0 0 var(--accent); }
|
||||
.list .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.12); }
|
||||
.list .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serif); font-size: 15px; }
|
||||
.list .s { font-size: 11px; color: var(--muted); }
|
||||
.draft-tag { font-style: normal; font-size: 10px; color: #b8902f; margin-left: 6px; font-family: var(--sans); }
|
||||
.list li.active { background: var(--panel); box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
|
||||
.list .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.12); }
|
||||
.list .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
|
||||
.list .t-title { font-family: var(--serif); font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.list .t-meta { font-size: 11px; color: var(--muted); }
|
||||
.draft-tag { font-size: 10px; color: var(--amber); border: 1px solid var(--amber); border-radius: 20px; padding: 1px 7px; flex: none; }
|
||||
|
||||
main { flex: 1; min-width: 0; }
|
||||
.empty { display: grid; place-items: center; height: 100%; color: var(--muted); font-family: var(--serif); font-style: italic; padding: 24px; text-align: center; }
|
||||
@@ -98,23 +98,35 @@ main { flex: 1; min-width: 0; }
|
||||
|
||||
/* ── Editor ── */
|
||||
.editor { display: flex; height: 100%; }
|
||||
.fields { width: 52%; padding: 22px 24px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
|
||||
.editor-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||||
.editor-head {
|
||||
display: flex; align-items: center; gap: 9px; padding: 11px 22px;
|
||||
border-bottom: 1px solid var(--line); background: var(--panel); flex: none;
|
||||
}
|
||||
.editor-head .crumb { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.editor-head .spacer { flex: 1; }
|
||||
.editor-head .toggle { background: transparent; border-color: transparent; color: var(--muted); }
|
||||
.editor-head .toggle:hover { color: var(--text); border-color: var(--line); }
|
||||
.status { font-size: 11px; border-radius: 20px; padding: 3px 10px; font-weight: 600; }
|
||||
.status.draft { color: var(--amber); background: rgba(184,144,47,.12); }
|
||||
.status.live { color: var(--ok); background: rgba(93,125,75,.14); }
|
||||
|
||||
.fields { flex: 1; padding: 22px 24px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
|
||||
.row { display: flex; gap: 12px; align-items: flex-end; }
|
||||
.path-row { display: flex; gap: 12px; align-items: flex-end; }
|
||||
.path-row:empty { display: none; }
|
||||
label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); flex: 1; }
|
||||
label.sm { flex: 0 0 150px; } label.xs { flex: 0 0 110px; }
|
||||
label.check { flex-direction: row; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap; }
|
||||
label.check input { width: auto; }
|
||||
label.big input { font-family: var(--serif); font-size: 22px; font-weight: 600; padding: 11px 13px; }
|
||||
|
||||
.path-row { display: flex; gap: 12px; align-items: flex-end; }
|
||||
.pathlabel { font-family: var(--mono); font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; }
|
||||
label.big input { font-family: var(--serif); font-size: 23px; font-weight: 600; padding: 11px 13px; }
|
||||
|
||||
.colorpick { display: flex; align-items: center; gap: 8px; }
|
||||
.colorpick .swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); flex: none; }
|
||||
.colorpick select { flex: 1; }
|
||||
|
||||
/* ── Markdown-Editor ── */
|
||||
.md { display: flex; flex-direction: column; flex: 1; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
|
||||
.md { display: flex; flex-direction: column; flex: 1; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
|
||||
.toolbar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 7px 9px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
|
||||
.tb { padding: 5px 9px; border: 1px solid transparent; background: transparent; border-radius: 6px; min-width: 30px; font-size: 13px; line-height: 1; }
|
||||
.tb:hover { background: var(--panel); border-color: var(--line); }
|
||||
@@ -122,10 +134,8 @@ label.big input { font-family: var(--serif); font-size: 22px; font-weight: 600;
|
||||
.md textarea { border: none; border-radius: 0; min-height: 320px; flex: 1; resize: vertical; font-family: var(--serif); font-size: 16px; line-height: 1.7; padding: 16px; }
|
||||
.md textarea:focus { box-shadow: none; }
|
||||
|
||||
.actions { display: flex; gap: 9px; padding-top: 4px; }
|
||||
|
||||
/* ── Vorschau-Pane ── */
|
||||
.preview { width: 48%; border-left: 1px solid var(--line); background: #fff; }
|
||||
.preview { width: 46%; flex: none; border-left: 1px solid var(--line); background: #fff; }
|
||||
.preview iframe { width: 100%; height: 100%; border: 0; }
|
||||
|
||||
/* ── Toast ── */
|
||||
|
||||
Reference in New Issue
Block a user