From b2467b87f56b5a310176a2f9facd0bfa60f811d4 Mon Sep 17 00:00:00 2001 From: Florian Heinz Date: Thu, 22 Oct 2026 20:41:34 +0200 Subject: [PATCH] Release 0.5.5 --- docs/ACCEPTANCE.md | 20 + docs/STATUS.md | 18 + package-lock.json | 4 +- package.json | 2 +- src/app.css | 876 +++++++----------- src/lib/components/MarkdownEditorField.svelte | 2 +- src/lib/components/UsageEditorDialog.svelte | 3 + src/routes/fundus/[id]/+page.svelte | 7 + 8 files changed, 365 insertions(+), 567 deletions(-) diff --git a/docs/ACCEPTANCE.md b/docs/ACCEPTANCE.md index e0ee587..aafc76d 100644 --- a/docs/ACCEPTANCE.md +++ b/docs/ACCEPTANCE.md @@ -237,3 +237,23 @@ - vollständige Unit- und E2E-Matrix nicht erneut ausgeführt, weil dieser Release ausschließlich Darstellung und redaktionelle Kurztexte verändert - `git diff --check`: erfolgreich + +## Oberflächenkorrektur 0.5.5 + +| Kriterium | Nachweis | Stand | +| ------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------- | +| Nachtblau und Glaswirkung erkennbar | berechnete Transparenz/Unschärfe und Desktop-/Mobilaufnahmen in Darkmode geprüft | erfüllt am 22.10.2026 | +| Schreibfelder im Ruhezustand sichtbar | deckende Feldfarbe, feine Kontur, Innenabstand und Textcursor im Piece-Editor geprüft | erfüllt am 22.10.2026 | +| Goldener Tastaturfokus | berechnete Fokusfarbe und Fokus-Schatten am Titelfeld geprüft; Cyanrahmen nicht mehr aktiv | erfüllt am 22.10.2026 | +| Inhaltsgerechte Feldhöhen | kurze Einleitung ist niedriger als ausführliche Moderationsfläche; beide bleiben skalierbar | erfüllt am 22.10.2026 | +| Lightmode und Smartphone erhalten | fünf Arbeitsansichten bei 1440 × 1000 und 390 × 844 Pixeln ohne Seitenüberlauf geprüft | erfüllt am 22.10.2026 | + +## Ausgeführte Prüfungen Oberflächenkorrektur 0.5.5 + +- `npm run check`: 0 Fehler und 0 Warnungen +- `npm run build`: erfolgreich mit `@sveltejs/adapter-node` +- gezielter Chromium-Lauf in Light/Dark und Desktop/Mobil ohne Konsolenfehler + oder horizontalen Seitenüberlauf; Glas-, Feld- und Fokuswerte zusätzlich + programmatisch geprüft +- vollständige Unit- und E2E-Matrix gemäß Auftrag nicht erneut ausgeführt +- `git diff --check`: erfolgreich diff --git a/docs/STATUS.md b/docs/STATUS.md index 1183196..bb66e04 100644 --- a/docs/STATUS.md +++ b/docs/STATUS.md @@ -7,6 +7,24 @@ Anmeldung, Rollen, persistente Inhaltsbearbeitung, Sendungsplanung, Live-Steuerung, Präsentationsausgabe und lokaler Betriebsweg sind dokumentiert. Etappe 6 wurde nicht begonnen. +## Oberflächenkorrektur 0.5.5 + +- dunkle Grundfläche mit sehr zurückhaltenden Gold-/Cyan-Lichtfeldern innerhalb + der Anwendung statt gleichmäßig deckender Blauflächen +- Navigation, große Arbeitsflächen und Piece-Dialog als dunkles beziehungsweise + helles Glas mit feiner Lichtkante, Unschärfe und ruhigem Schatten +- Gold für Dialogkontur, Fokus, aktive Zustände und Hauptaktionen; Cyan nur noch + für ergänzende redaktionelle Hinweise und Links +- klar abgegrenzte, weitgehend deckende Schreibfelder mit Goldfokus, Platzhaltern + und nach Textrolle abgestuften Höhen +- bestehende nachträgliche CSS-Override-Schicht entfernt und die Gestaltung in + gemeinsame Tokens und ursprüngliche Komponentenregeln zurückgeführt + +Geprüft wurden Typen, Produktionsbuild sowie gezielte Chromium-Ansichten von +Eingang, Fundus, Piece-Editor, Sendungsplanung und Live-Steuerung bei 1440 × 1000 +und 390 × 844 Pixeln in beiden Themes. Die vollständige Unit- und E2E-Matrix +bleibt wie beauftragt Schritt 3 vorbehalten. + ## Oberflächenrelease 0.5.4 - gemeinsame Light-/Dark-Tokens für ruhige Arbeitsflächen, Cyan als diff --git a/package-lock.json b/package-lock.json index f2d320a..f7b5d84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "sendewerk", - "version": "0.5.4", + "version": "0.5.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "sendewerk", - "version": "0.5.4", + "version": "0.5.5", "dependencies": { "@node-rs/argon2": "^2.2.2", "better-sqlite3": "^13.0.3", diff --git a/package.json b/package.json index 1286174..3ce7914 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sendewerk", "private": true, - "version": "0.5.4", + "version": "0.5.5", "type": "module", "engines": { "node": ">=22.17 <25" diff --git a/src/app.css b/src/app.css index dba2330..54c2c34 100644 --- a/src/app.css +++ b/src/app.css @@ -9,27 +9,33 @@ sans-serif; font-synthesis: none; color-scheme: light; - --bg: #f4f7fb; - --bg-elevated: rgba(255, 255, 255, 0.82); - --panel: #fdfefe; - --panel-strong: #ffffff; - --panel-soft: #edf2f7; + --bg: #edf2f7; + --bg-elevated: rgb(255 255 255 / 72%); + --panel: rgb(250 252 255 / 76%); + --panel-strong: #fbfdff; + --panel-soft: rgb(226 233 242 / 72%); + --glass: rgb(252 254 255 / 68%); + --glass-strong: rgb(250 252 255 / 84%); + --field: #f8fbfe; --text: #172033; --text-muted: #5d6a7d; --text-faint: #8491a3; - --line: #dce4ed; - --line-strong: #c5d0dd; + --line: rgb(104 124 150 / 22%); + --line-strong: rgb(93 113 139 / 38%); --accent: #087e98; --accent-soft: #dff5f8; --accent-text: #07586b; --gold: #e7b957; - --primary: #d9a43d; + --gold-strong: #9a6a12; + --focus: #bd8730; + --primary: #e7b957; --primary-text: #172033; --success: #247a5a; --warning: #9a6a12; --danger: #b34148; - --shadow: 0 16px 38px rgba(26, 45, 72, 0.09); - --shadow-large: 0 28px 70px rgba(16, 31, 52, 0.18); + --shadow-soft: 0 12px 32px rgb(33 49 72 / 8%); + --shadow: 0 18px 44px rgb(26 45 72 / 11%); + --shadow-large: 0 30px 80px rgb(16 31 52 / 20%); --sidebar-width: 14rem; --radius-large: 1.35rem; --radius-medium: 0.95rem; @@ -39,26 +45,32 @@ :root[data-theme='dark'] { color-scheme: dark; --bg: #0b1220; - --bg-elevated: rgba(21, 34, 56, 0.86); - --panel: #152238; - --panel-strong: #152238; - --panel-soft: #101c30; + --bg-elevated: rgb(11 18 32 / 68%); + --panel: rgb(18 31 52 / 72%); + --panel-strong: #111d30; + --panel-soft: rgb(28 43 65 / 62%); + --glass: rgb(15 27 46 / 62%); + --glass-strong: rgb(17 30 51 / 82%); + --field: #101a2b; --text: #fff7e8; --text-muted: #a9b6c8; --text-faint: #7f91a8; - --line: #30435c; - --line-strong: #415875; + --line: rgb(139 162 192 / 23%); + --line-strong: rgb(161 181 207 / 40%); --accent: #67dde8; --accent-soft: #17394c; --accent-text: #baf8ff; --gold: #e7b957; + --gold-strong: #f0c96f; + --focus: #e7b957; --primary: #e7b957; --primary-text: #0b1220; --success: #69d6a5; --warning: #e7b957; --danger: #ff8d91; - --shadow: 0 18px 42px rgba(0, 0, 0, 0.22); - --shadow-large: 0 32px 80px rgba(0, 0, 0, 0.42); + --shadow-soft: 0 14px 38px rgb(0 0 0 / 18%); + --shadow: 0 22px 52px rgb(0 0 0 / 28%); + --shadow-large: 0 36px 90px rgb(0 0 0 / 48%); } * { @@ -75,7 +87,19 @@ body { margin: 0; min-width: 20rem; min-height: 100vh; - background: var(--bg); + background: + radial-gradient( + ellipse 62rem 38rem at 88% -8%, + color-mix(in srgb, var(--gold) 7%, transparent), + transparent 70% + ), + radial-gradient( + ellipse 54rem 42rem at 4% 48%, + color-mix(in srgb, var(--accent) 6%, transparent), + transparent 72% + ), + var(--bg); + background-attachment: fixed; color: var(--text); font-size: 0.95rem; line-height: 1.5; @@ -103,10 +127,29 @@ a { } :focus-visible { - outline: 3px solid var(--accent); + outline: 2px solid var(--focus); outline-offset: 3px; } +input:not([type='checkbox']):not([type='radio']):not([type='hidden']), +select, +textarea { + caret-color: var(--gold); +} + +input:not([type='checkbox']):not([type='radio']):not([type='hidden']):focus, +select:focus, +textarea:focus { + border-color: var(--focus) !important; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 13%, transparent); + outline: 0; +} + +::placeholder { + color: var(--text-faint); + opacity: 0.82; +} + .sr-only { position: absolute; width: 1px; @@ -131,8 +174,9 @@ a { width: var(--sidebar-width); flex-direction: column; padding: 1.25rem 0.85rem 1rem; - border-right: 1px solid var(--line); - background: color-mix(in srgb, var(--bg-elevated) 90%, transparent); + border-right: 1px solid color-mix(in srgb, var(--gold) 20%, var(--line)); + background: var(--glass); + box-shadow: 10px 0 34px rgb(0 0 0 / 12%); backdrop-filter: blur(24px) saturate(1.3); overflow-y: auto; } @@ -157,8 +201,8 @@ a { gap: 0.14rem; padding: 0.37rem; border-radius: 0.53rem; - background: var(--accent); - box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent); + background: var(--gold); + box-shadow: 0 7px 18px color-mix(in srgb, var(--gold) 22%, transparent); } .brand-mark i { @@ -208,9 +252,10 @@ a { .main-navigation a.active, .utility-navigation a.active { - background: var(--panel-strong); - box-shadow: 0 7px 20px rgba(48, 48, 43, 0.07); - color: var(--accent); + border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--line)); + background: color-mix(in srgb, var(--gold) 11%, var(--glass-strong)); + box-shadow: inset 0 1px rgb(255 255 255 / 8%); + color: var(--text); } .sidebar-footer { @@ -396,7 +441,7 @@ a { align-items: center; gap: 0.6rem; border: 1px solid var(--line); - background: var(--panel); + background: var(--field); color: var(--text-muted); } @@ -426,6 +471,15 @@ a { color: var(--text-faint); } +.search-field:focus-within { + border-color: var(--focus); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 13%, transparent); +} + +.search-field input:focus { + box-shadow: none; +} + .filter-tabs, .mobile-pane-switch { display: flex; @@ -458,8 +512,8 @@ a { .filter-tabs button.active, .mobile-pane-switch button.active { - background: var(--panel-strong); - box-shadow: 0 3px 10px rgba(40, 40, 36, 0.08); + background: color-mix(in srgb, var(--gold) 11%, var(--glass-strong)); + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent); color: var(--text); } @@ -469,7 +523,9 @@ a { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-medium); - background: var(--panel); + background: var(--glass); + box-shadow: var(--shadow-soft); + backdrop-filter: blur(18px) saturate(1.08); } .piece-card { @@ -489,6 +545,11 @@ a { border-bottom: 0; } +.piece-card:hover, +.piece-card:focus-within { + background: color-mix(in srgb, var(--glass-strong) 84%, transparent); +} + .source-card > div, .live-kicker { display: flex; @@ -527,8 +588,8 @@ a { } .status-label.ready { - background: var(--accent-soft); - color: var(--accent-text); + background: color-mix(in srgb, var(--success) 14%, var(--panel)); + color: var(--success); } .piece-primary { @@ -621,8 +682,8 @@ a { padding: 0.65rem 0.9rem; border: 0; border-radius: 0.65rem; - background: var(--accent); - color: var(--panel-strong); + background: var(--primary); + color: var(--primary-text); cursor: pointer; font-weight: 650; } @@ -655,8 +716,9 @@ a { min-height: 2.45rem; padding: 0.55rem 0.8rem; border-radius: 0.72rem; - background: var(--text); - color: var(--bg); + background: var(--primary); + box-shadow: 0 8px 20px color-mix(in srgb, var(--gold) 18%, transparent); + color: var(--primary-text); font-size: 0.78rem; font-weight: 680; } @@ -699,7 +761,9 @@ a { padding: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-medium); - background: var(--panel); + background: var(--glass); + box-shadow: var(--shadow-soft); + backdrop-filter: blur(18px) saturate(1.08); } .pane-heading { @@ -838,7 +902,41 @@ a { gap: 0.65rem; padding: 0.55rem 0.65rem; border-radius: 0.72rem; - background: var(--panel-soft); + border: 1px solid transparent; + background: color-mix(in srgb, var(--panel-soft) 68%, transparent); + transition: + background-color 140ms ease, + border-color 140ms ease; +} + +.usage-row:hover, +.usage-row:focus-within { + border-color: var(--line-strong); + background: var(--glass-strong); +} + +.section-drag-handle, +.usage-drag-copy { + position: relative; +} + +.section-drag-handle { + padding-right: 7rem; +} + +.usage-drag-copy { + padding-left: 1.2rem; +} + +.usage-drag-copy::before { + position: absolute; + top: 50%; + left: -0.2rem; + color: var(--text-faint); + font-size: 1rem; + line-height: 1; + content: '⠿'; + transform: translateY(-50%); } .usage-row div { @@ -861,8 +959,8 @@ a { font-weight: 690; } .usage-status.current { - background: var(--accent-soft); - color: var(--accent-text); + background: color-mix(in srgb, var(--gold) 12%, var(--panel)); + color: var(--gold-strong); } .section-placeholder { margin: 0.5rem 0 0 2.8rem; @@ -944,8 +1042,9 @@ a { padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: 1.8rem; - background: var(--panel); + background: var(--glass); box-shadow: var(--shadow); + backdrop-filter: blur(20px) saturate(1.08); } .live-kicker { @@ -978,7 +1077,7 @@ a { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 0.9rem; - background: var(--panel-soft); + background: color-mix(in srgb, var(--panel-soft) 66%, transparent); } .moderation-card span, @@ -1026,7 +1125,9 @@ a { padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; - background: var(--panel); + background: var(--glass); + box-shadow: var(--shadow-soft); + backdrop-filter: blur(16px) saturate(1.06); } .next-card > span { color: var(--accent); @@ -1064,7 +1165,7 @@ a { width: 45%; height: 100%; border-radius: inherit; - background: var(--accent); + background: var(--gold); } .rail-section { display: grid; @@ -1090,8 +1191,8 @@ a { font-size: 0.64rem; } .rail-section.active { - background: var(--accent-soft); - color: var(--accent-text); + background: color-mix(in srgb, var(--gold) 10%, var(--panel)); + color: var(--text); } .readonly-actions { display: flex; @@ -1120,7 +1221,10 @@ a { padding: 0.75rem; border: 1px solid var(--line); border-radius: 1rem; - background: var(--panel); + border-color: color-mix(in srgb, var(--gold) 16%, var(--line)); + background: var(--glass); + box-shadow: var(--shadow-soft); + backdrop-filter: blur(20px) saturate(1.08); } .live-session-summary { @@ -1175,12 +1279,12 @@ a { margin-top: 0.35rem; padding: 0.5rem 0.55rem; border-radius: 0.65rem; - background: var(--panel-soft); + background: color-mix(in srgb, var(--panel-soft) 68%, transparent); } .live-run-item.current { - box-shadow: inset 3px 0 var(--accent); - background: var(--accent-soft); + box-shadow: inset 3px 0 var(--gold); + background: color-mix(in srgb, var(--gold) 9%, var(--panel)); } .live-run-item > div:first-child, @@ -1514,7 +1618,9 @@ a { .quiet-panel { border: 1px solid var(--line); border-radius: var(--radius-large); - background: var(--panel); + background: var(--glass); + box-shadow: var(--shadow-soft); + backdrop-filter: blur(18px) saturate(1.08); } .planned-panel { @@ -1671,7 +1777,7 @@ a { padding: 0.55rem 0.7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); - background: var(--panel-strong); + background: var(--field); color: var(--text); } @@ -1694,13 +1800,23 @@ a { color: var(--primary-text); } +.primary-button:hover:not(:disabled) { + background: color-mix(in srgb, var(--primary) 90%, white); + box-shadow: 0 10px 24px color-mix(in srgb, var(--gold) 24%, transparent); +} + .secondary-button, .logout-button { min-height: 2.35rem; padding: 0.48rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-small); - background: transparent; + background: color-mix(in srgb, var(--glass) 72%, transparent); +} + +.secondary-button:hover:not(:disabled) { + border-color: color-mix(in srgb, var(--gold) 42%, var(--line)); + background: color-mix(in srgb, var(--gold) 8%, var(--glass)); } .primary-button:disabled, @@ -1918,7 +2034,7 @@ a { padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 0.55rem; - background: var(--panel-strong); + background: var(--field); color: var(--text); } @@ -1994,7 +2110,7 @@ a { padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: 0.7rem; - background: var(--panel); + background: var(--field); color: var(--text); } @@ -2100,9 +2216,11 @@ a { } .piece-actions { - display: grid; - justify-items: end; - gap: 0.22rem; + display: flex; + align-items: center; + flex-wrap: wrap; + justify-content: flex-end; + gap: 0.55rem; } .danger-text { @@ -2110,7 +2228,8 @@ a { } .capture-panel { - padding: 1rem; + padding: clamp(1rem, 2vw, 1.35rem); + border-color: color-mix(in srgb, var(--gold) 18%, var(--line)); } .capture-panel h2, @@ -2148,11 +2267,13 @@ a { padding: 0.5rem 0.65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); - background: var(--panel-strong); + background: var(--field); color: var(--text); } .inbox-list { + display: grid; + gap: 0.45rem; margin-top: 1rem; } @@ -2161,9 +2282,20 @@ a { align-items: center; justify-content: space-between; gap: 1rem; - padding: 0.75rem 0; - border-bottom: 1px solid var(--line); + padding: 0.8rem 0.9rem; + border: 1px solid transparent; + border-radius: var(--radius-small); + background: color-mix(in srgb, var(--glass) 68%, transparent); font-size: 0.76rem; + transition: + background-color 140ms ease, + border-color 140ms ease; +} + +.inbox-item:hover, +.inbox-item:focus-visible { + border-color: var(--line); + background: var(--glass-strong); } .inbox-item > span:first-child { @@ -2174,6 +2306,11 @@ a { color: var(--text-muted); } +.inbox-item > span:last-child { + color: var(--accent); + font-weight: 720; +} + .archive-list { display: grid; gap: 0.65rem; @@ -2383,7 +2520,7 @@ a { padding: 0.55rem 0.65rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); - background: var(--panel-strong); + background: var(--field); color: var(--text); } @@ -2581,9 +2718,10 @@ a { padding: 0; resize: none; overflow: hidden; - border: 0; + border: 1px solid var(--line-strong); + border-radius: var(--radius-small); outline-offset: 0.3rem; - background: transparent; + background: var(--field); color: var(--text); font: inherit; font-size: clamp(1.65rem, 3.3vw, 2.8rem); @@ -2736,7 +2874,7 @@ a { resize: vertical; border: 1px solid var(--line-strong); border-radius: var(--radius-small); - background: var(--panel-strong); + background: var(--field); color: var(--text); font: inherit; font-size: 0.82rem; @@ -2879,7 +3017,7 @@ a { padding: 0.5rem 0.58rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); - background: var(--panel-strong); + background: var(--field); color: var(--text); } @@ -3021,7 +3159,9 @@ a { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-large); - background: var(--panel); + background: var(--glass); + box-shadow: var(--shadow-soft); + backdrop-filter: blur(18px) saturate(1.08); } .show-create-panel h2, @@ -3074,7 +3214,7 @@ a { padding: 0.48rem 0.58rem; border: 1px solid var(--line-strong); border-radius: 0.65rem; - background: var(--panel-strong); + background: var(--field); color: var(--text); } @@ -3219,22 +3359,44 @@ a { cursor: pointer; } +.usage-row .row-actions { + display: flex; + align-items: center; + gap: 0.18rem; + padding: 0.16rem; + border: 1px solid var(--line); + border-radius: 0.7rem; + background: var(--glass-strong); +} + +.row-actions > form > button, +.usage-edit-button { + border: 0; + background: transparent; +} + +.row-actions > form > button:hover:not(:disabled), +.usage-edit-button:hover { + background: color-mix(in srgb, var(--gold) 10%, var(--panel-soft)); + color: var(--gold-strong); +} + .usage-edit-button { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; padding: 0; - border: 1px solid var(--line-strong); + border: 0; border-radius: 0.6rem; - background: var(--panel-soft); + background: transparent; color: var(--text-muted); cursor: pointer; } .usage-edit-button:hover { - border-color: var(--accent); - color: var(--accent); + background: color-mix(in srgb, var(--gold) 10%, var(--panel-soft)); + color: var(--gold-strong); } .piece-editor-route { @@ -3251,11 +3413,12 @@ a { grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 0; overflow: hidden; - border: 1px solid var(--line-strong); + border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line-strong)); border-radius: var(--radius-large); - background: var(--panel-strong); + background: var(--glass-strong); box-shadow: var(--shadow-large); color: var(--text); + backdrop-filter: blur(28px) saturate(1.12); } .piece-editor-dialog[open] { @@ -3263,8 +3426,8 @@ a { } .piece-editor-dialog::backdrop { - background: color-mix(in srgb, #07110e 62%, transparent); - backdrop-filter: blur(6px); + background: color-mix(in srgb, var(--bg) 76%, transparent); + backdrop-filter: blur(12px); } .piece-dialog-header { @@ -3275,7 +3438,8 @@ a { gap: 1rem; padding: 0.9rem 1rem 0.75rem; border-bottom: 1px solid var(--line); - background: var(--panel-strong); + background: color-mix(in srgb, var(--glass-strong) 88%, transparent); + backdrop-filter: blur(20px) saturate(1.12); } .piece-dialog-heading { @@ -3301,13 +3465,14 @@ a { .piece-dialog-title textarea { width: 100%; min-width: 0; - height: 1.2em; - padding: 0; + height: 1.55em; + padding: 0.16rem 0.45rem; resize: none; overflow: hidden; - border: 0; + border: 1px solid var(--line-strong); + border-radius: 0.55rem; outline-offset: 0.2rem; - background: transparent; + background: var(--field); color: var(--text); font: inherit; font-size: clamp(1.25rem, 2.5vw, 1.85rem); @@ -3321,7 +3486,8 @@ a { gap: 0.25rem; padding: 0.45rem 1rem; border-bottom: 1px solid var(--line); - background: var(--panel-strong); + background: color-mix(in srgb, var(--glass-strong) 88%, transparent); + backdrop-filter: blur(20px) saturate(1.12); } .piece-dialog-tabs button { @@ -3336,8 +3502,9 @@ a { } .piece-dialog-tabs button.active { - background: var(--accent-soft); - color: var(--accent); + background: color-mix(in srgb, var(--gold) 13%, var(--panel)); + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 36%, transparent); + color: var(--text); } .piece-dialog-workspace { @@ -3346,6 +3513,7 @@ a { padding: clamp(0.85rem, 2vw, 1.4rem); overflow: auto; overscroll-behavior: contain; + background: color-mix(in srgb, var(--bg) 76%, transparent); } .piece-dialog-form { @@ -3353,7 +3521,7 @@ a { } .piece-editor-panel { - width: min(100%, 66rem); + width: min(100%, 62rem); margin: 0 auto; } @@ -3388,17 +3556,27 @@ a { gap: 0.8rem; } +.piece-writing-stack .markdown-editor-field:first-child { + padding-top: 0; +} + +.piece-writing-stack .markdown-editor-field:last-child { + border-bottom: 0; +} + .markdown-editor-field { display: block; - padding: 0.8rem; - border: 1px solid var(--line); - border-radius: var(--radius-medium); - background: var(--panel); + padding: 0.75rem 0; + border: 0; + border-bottom: 1px solid var(--line); + background: transparent; } .markdown-editor-field.private-field { - border-color: color-mix(in srgb, var(--gold) 38%, var(--line)); - background: color-mix(in srgb, var(--gold) 5%, var(--panel)); + padding: 0.85rem; + border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line)); + border-radius: var(--radius-medium); + background: color-mix(in srgb, var(--gold) 5%, var(--glass)); } .markdown-editor-heading { @@ -3433,7 +3611,7 @@ a { padding: 0.22rem 0.4rem; border: 1px solid var(--line); border-radius: 0.45rem; - background: var(--panel-soft); + background: color-mix(in srgb, var(--panel-soft) 72%, transparent); color: var(--text-muted); font-size: 0.65rem; cursor: pointer; @@ -3442,15 +3620,15 @@ a { .markdown-editor-field textarea { display: block; width: 100%; - min-height: 7.5rem; - padding: 0.65rem; + min-height: 5.5rem; + padding: 0.75rem 0.8rem; resize: vertical; border: 1px solid var(--line-strong); border-radius: var(--radius-small); - background: var(--panel-strong); + background: var(--field); color: var(--text); font: inherit; - font-size: 0.82rem; + font-size: 0.88rem; line-height: 1.55; } @@ -3461,7 +3639,7 @@ a { padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-medium); - background: var(--panel); + background: color-mix(in srgb, var(--glass) 78%, transparent); } .piece-meta-details summary { @@ -3512,7 +3690,7 @@ a { padding: 0.55rem 0.62rem; border: 1px solid var(--line-strong); border-radius: var(--radius-small); - background: var(--panel-strong); + background: var(--field); color: var(--text); } @@ -3540,7 +3718,7 @@ a { padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-medium); - background: var(--panel); + background: color-mix(in srgb, var(--glass) 78%, transparent); } .piece-source-summary strong, @@ -3572,7 +3750,7 @@ a { .piece-presentation-preview { min-width: 0; overflow: hidden; - border: 1px solid var(--line); + border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: var(--radius-medium); background: var(--presentation-bg, #0b1220); color: #fff7e8; @@ -3632,7 +3810,9 @@ a { gap: 0.8rem; padding: 0.65rem 1rem; border-top: 1px solid var(--line); - background: var(--panel-strong); + background: color-mix(in srgb, var(--glass-strong) 90%, transparent); + box-shadow: 0 -10px 30px rgb(0 0 0 / 10%); + backdrop-filter: blur(20px) saturate(1.12); } .piece-dialog-secondary-actions, @@ -3749,7 +3929,7 @@ a { padding: 0.6rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 0.7rem; - background: var(--panel-strong); + background: var(--field); color: var(--text); } @@ -4146,393 +4326,6 @@ a { display: none; } -/* Shared visual language: calm work surfaces, cyan interaction, one gold primary action. */ -.sidebar { - border-color: color-mix(in srgb, var(--line) 82%, transparent); - background: color-mix(in srgb, var(--bg-elevated) 92%, transparent); - box-shadow: 8px 0 28px color-mix(in srgb, var(--bg) 70%, transparent); -} - -.brand-mark { - background: var(--accent); - box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 24%, transparent); -} - -:root[data-theme='dark'] .brand-mark i { - background: var(--bg); -} - -.main-navigation a.active, -.utility-navigation a.active { - border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); - background: var(--accent-soft); - box-shadow: none; - color: var(--accent); -} - -.main-navigation a:hover, -.utility-navigation a:hover, -.theme-toggle:hover { - background: var(--panel-soft); -} - -.theme-toggle, -.logout-button { - border-color: var(--line); -} - -.primary-button, -.secondary-button, -.text-button, -.main-navigation a, -.utility-navigation a, -.inbox-item, -.piece-card, -.usage-row { - transition: - background-color 140ms ease, - border-color 140ms ease, - color 140ms ease, - box-shadow 140ms ease; -} - -.primary-button:hover:not(:disabled) { - background: color-mix(in srgb, var(--primary) 88%, white); - box-shadow: 0 9px 22px color-mix(in srgb, var(--gold) 26%, transparent); -} - -.secondary-button:hover:not(:disabled) { - border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); - background: var(--accent-soft); - color: var(--accent-text); -} - -.text-button, -.text-link, -.auth-link, -.source-feature a { - color: var(--accent); -} - -input, -select, -textarea { - caret-color: var(--accent); -} - -input:focus, -select:focus, -textarea:focus { - border-color: var(--accent) !important; -} - -.quiet-panel, -.builder-pane, -.show-create-panel, -.show-library, -.show-settings, -.live-current, -.next-card, -.live-progress, -.readonly-actions { - border-color: var(--line); - box-shadow: 0 8px 24px color-mix(in srgb, var(--bg) 64%, transparent); -} - -.capture-panel { - padding: clamp(1rem, 2vw, 1.35rem); - border: 0; - box-shadow: var(--shadow); -} - -.capture-form input, -.upload-form input, -.library-filters input, -.library-filters select { - border-color: var(--line-strong); - background: var(--panel-soft); -} - -.inbox-list { - display: grid; - gap: 0.45rem; -} - -.inbox-item { - padding: 0.8rem 0.9rem; - border: 1px solid transparent; - border-radius: var(--radius-small); - background: color-mix(in srgb, var(--panel) 76%, transparent); -} - -.inbox-item:hover, -.inbox-item:focus-visible { - border-color: var(--line); - background: var(--panel); -} - -.inbox-item > span:last-child { - color: var(--accent); - font-weight: 720; -} - -.piece-grid { - border-color: var(--line); - box-shadow: 0 8px 26px color-mix(in srgb, var(--bg) 70%, transparent); -} - -.piece-card:hover, -.piece-card:focus-within { - background: var(--panel-soft); -} - -.piece-actions { - display: flex; - align-items: center; - flex-wrap: wrap; - justify-content: flex-end; - gap: 0.55rem; -} - -.status-label.ready { - background: color-mix(in srgb, var(--success) 15%, var(--panel)); - color: var(--success); -} - -.show-state.ready, -.show-state.live { - color: var(--success); -} - -.live-link { - background: var(--primary); - color: var(--primary-text); -} - -.builder-workspace { - gap: 0.9rem; -} - -.builder-pane { - border: 0; - background: var(--panel); -} - -.run-list { - border-top-color: var(--line); -} - -.run-section { - padding: 0.8rem 0; -} - -.section-drag-handle, -.usage-drag-copy { - position: relative; -} - -.section-drag-handle { - padding-right: 7rem; -} - -.usage-drag-copy { - padding-left: 1.2rem; -} - -.usage-drag-copy::before { - position: absolute; - top: 50%; - left: -0.2rem; - color: var(--text-faint); - font-size: 1rem; - line-height: 1; - content: '⠿'; - transform: translateY(-50%); -} - -.usage-row { - padding: 0.55rem 0.6rem; - border: 1px solid transparent; - background: var(--panel-soft); -} - -.usage-row:hover, -.usage-row:focus-within { - border-color: var(--line-strong); - background: var(--panel-strong); -} - -.usage-row > div:first-child { - display: grid; - min-width: 0; -} - -.usage-row .row-actions { - display: flex; - align-items: center; - gap: 0.18rem; - padding: 0.16rem; - border: 1px solid var(--line); - border-radius: 0.7rem; - background: var(--panel); -} - -.row-actions > form > button, -.usage-edit-button { - border: 0; - background: transparent; -} - -.row-actions > form > button:hover:not(:disabled), -.usage-edit-button:hover { - background: var(--accent-soft); - color: var(--accent); -} - -.piece-editor-dialog { - border-color: color-mix(in srgb, var(--line-strong) 84%, transparent); - background: color-mix(in srgb, var(--panel-strong) 96%, transparent); - box-shadow: var(--shadow-large); - backdrop-filter: blur(24px) saturate(1.15); -} - -.piece-editor-dialog::backdrop { - background: color-mix(in srgb, var(--bg) 72%, transparent); - backdrop-filter: blur(10px); -} - -.piece-dialog-header, -.piece-dialog-tabs, -.piece-dialog-footer { - background: color-mix(in srgb, var(--panel-strong) 90%, transparent); - backdrop-filter: blur(20px) saturate(1.2); -} - -.piece-dialog-header { - padding: 1rem 1.15rem 0.8rem; -} - -.piece-dialog-tabs { - gap: 0.35rem; - padding: 0.45rem 1.15rem; -} - -.piece-dialog-tabs button { - min-height: 2.2rem; - padding-inline: 0.85rem; -} - -.piece-dialog-tabs button.active { - background: var(--accent-soft); - box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); - color: var(--accent); -} - -.piece-dialog-workspace { - background: var(--bg); -} - -.piece-editor-panel { - width: min(100%, 62rem); -} - -.piece-panel-heading { - margin-bottom: 0.7rem; -} - -.markdown-editor-field { - padding: 0.75rem 0; - border: 0; - border-bottom: 1px solid var(--line); - border-radius: 0; - background: transparent; -} - -.piece-writing-stack .markdown-editor-field:first-child { - padding-top: 0; -} - -.piece-writing-stack .markdown-editor-field:last-child { - border-bottom: 0; -} - -.markdown-editor-field.private-field { - padding: 0.85rem; - border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line)); - border-radius: var(--radius-medium); - background: color-mix(in srgb, var(--gold) 7%, var(--panel)); -} - -.markdown-editor-field textarea { - min-height: 8.5rem; - padding: 0.7rem 0.2rem; - border: 0; - border-bottom: 1px solid var(--line-strong); - border-radius: 0; - background: transparent; - font-size: 0.9rem; -} - -.markdown-editor-field textarea:focus { - border-bottom-color: var(--accent) !important; - outline: 0; -} - -.markdown-toolbar button { - border-color: transparent; - background: var(--panel-soft); -} - -.piece-meta-details, -.piece-source-editor, -.piece-media-panel, -.piece-source-summary { - border-color: var(--line); - background: color-mix(in srgb, var(--panel) 72%, transparent); - box-shadow: none; -} - -.piece-presentation-preview { - border-color: var(--line-strong); - box-shadow: 0 12px 28px color-mix(in srgb, var(--bg) 72%, transparent); -} - -.piece-dialog-primary-action .save-indicator { - color: var(--text-faint); -} - -.piece-dialog-primary-action .save-indicator.problem { - color: var(--danger); - font-weight: 720; -} - -.live-toolbar { - border: 0; - box-shadow: var(--shadow); -} - -.live-current { - border: 0; -} - -.moderation-card { - background: var(--panel-soft); -} - -.transition-card { - background: color-mix(in srgb, var(--gold) 9%, var(--panel)); -} - -.progress-track span { - background: var(--gold); -} - -.rail-section.active, -.live-run-item.current { - background: var(--accent-soft); - color: var(--accent-text); -} - @media (max-width: 72rem) { .library-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); @@ -4597,9 +4390,6 @@ textarea:focus { --mobile-header: 4rem; --mobile-nav: 4.6rem; } - body { - background: var(--bg); - } .sidebar { display: none; } @@ -4612,9 +4402,10 @@ textarea:focus { align-items: center; justify-content: space-between; padding: 0 0.85rem 0 0.45rem; - border-bottom: 1px solid var(--line); - background: color-mix(in srgb, var(--bg-elevated) 90%, transparent); - backdrop-filter: blur(20px) saturate(1.25); + border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line)); + background: var(--glass); + box-shadow: 0 8px 28px rgb(0 0 0 / 12%); + backdrop-filter: blur(24px) saturate(1.2); } .mobile-header .theme-toggle { width: auto; @@ -4634,9 +4425,10 @@ textarea:focus { height: calc(var(--mobile-nav) + env(safe-area-inset-bottom)); grid-template-columns: repeat(4, 1fr); padding: 0.45rem 0.35rem env(safe-area-inset-bottom); - border-top: 1px solid var(--line); - background: color-mix(in srgb, var(--bg-elevated) 92%, transparent); - backdrop-filter: blur(22px) saturate(1.3); + border-top: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line)); + background: var(--glass); + box-shadow: 0 -8px 28px rgb(0 0 0 / 12%); + backdrop-filter: blur(24px) saturate(1.2); } .mobile-navigation:has(a:nth-child(5)) { grid-template-columns: repeat(5, 1fr); @@ -4654,8 +4446,8 @@ textarea:focus { font-weight: 620; } .mobile-navigation a.active { - background: var(--accent-soft); - color: var(--accent); + background: color-mix(in srgb, var(--gold) 13%, var(--panel)); + color: var(--text); } .mobile-navigation a svg { width: 1.25rem; @@ -4880,6 +4672,7 @@ textarea:focus { .piece-dialog-tabs { overflow-x: auto; padding: 0.4rem 0.6rem; + scrollbar-width: none; } .piece-dialog-tabs button { flex: 1 0 auto; @@ -5040,6 +4833,9 @@ textarea:focus { .usage-row { grid-template-columns: minmax(0, 1fr) auto; } + .usage-row .row-actions { + align-self: center; + } .show-card, .show-card-facts { align-items: flex-start; @@ -5066,12 +4862,20 @@ textarea:focus { position: static; margin: 0.5rem 0 0 2.8rem; } + .section-drag-handle { + padding-right: 0; + } .section-editor { margin-left: 0; } .live-header-actions { width: 100%; - justify-content: space-between; + overflow-x: auto; + justify-content: flex-start; + padding-bottom: 0.2rem; + } + .live-header-actions > * { + flex: 0 0 auto; } .live-grid { grid-template-columns: 1fr; @@ -5080,6 +4884,12 @@ textarea:focus { padding: 1.3rem; border-radius: 1.3rem; } + .live-current-actions { + align-items: stretch; + } + .live-current-actions form:last-child { + margin-left: 0; + } .live-current h2 { margin: 1.1rem 0 1.5rem; } @@ -5126,66 +4936,6 @@ textarea:focus { } } -@media (max-width: 52rem) { - .mobile-header, - .mobile-navigation { - border-color: color-mix(in srgb, var(--line) 82%, transparent); - background: color-mix(in srgb, var(--bg-elevated) 90%, transparent); - box-shadow: 0 8px 28px color-mix(in srgb, var(--bg) 72%, transparent); - backdrop-filter: blur(24px) saturate(1.25); - } - - .mobile-navigation a.active { - background: var(--accent-soft); - color: var(--accent); - } - - .capture-panel, - .builder-pane, - .live-toolbar, - .live-current { - border-radius: var(--radius-large); - } - - .piece-dialog-tabs { - scrollbar-width: none; - } - - .piece-dialog-footer { - box-shadow: 0 -10px 30px color-mix(in srgb, var(--bg) 72%, transparent); - } - - .usage-row { - grid-template-columns: minmax(0, 1fr) auto; - } - - .usage-row .row-actions { - align-self: center; - } - - .section-drag-handle { - padding-right: 0; - } - - .live-header-actions { - overflow-x: auto; - justify-content: flex-start; - padding-bottom: 0.2rem; - } - - .live-header-actions > * { - flex: 0 0 auto; - } - - .live-current-actions { - align-items: stretch; - } - - .live-current-actions form:last-child { - margin-left: 0; - } -} - @media (prefers-reduced-motion: reduce) { *, *::before, diff --git a/src/lib/components/MarkdownEditorField.svelte b/src/lib/components/MarkdownEditorField.svelte index 83aa7a9..f8d5fd6 100644 --- a/src/lib/components/MarkdownEditorField.svelte +++ b/src/lib/components/MarkdownEditorField.svelte @@ -5,7 +5,7 @@ name, label, value = $bindable(), - rows = 7, + rows = 4, placeholder = '', privateField = false, form diff --git a/src/lib/components/UsageEditorDialog.svelte b/src/lib/components/UsageEditorDialog.svelte index 6d52e8b..6a2b589 100644 --- a/src/lib/components/UsageEditorDialog.svelte +++ b/src/lib/components/UsageEditorDialog.svelte @@ -228,6 +228,7 @@ >Titel @@ -236,6 +237,7 @@ name="presentationImageUrl" type="url" maxlength="2000" + placeholder="https://…" bind:value={draft.presentationImageUrl} /> @@ -244,6 +246,7 @@ name="presentationDescription" rows="3" maxlength="1000" + placeholder="Kurzer Text zur Vorschau" bind:value={draft.presentationDescription}> diff --git a/src/routes/fundus/[id]/+page.svelte b/src/routes/fundus/[id]/+page.svelte index c70b216..b315427 100644 --- a/src/routes/fundus/[id]/+page.svelte +++ b/src/routes/fundus/[id]/+page.svelte @@ -303,6 +303,7 @@ name="summary" rows="3" maxlength="2000" + placeholder="Worum geht es in wenigen Sätzen?" bind:value={draft.summary}>
@@ -367,6 +368,7 @@ >Name