diff --git a/docs/ACCEPTANCE.md b/docs/ACCEPTANCE.md index 95457d2..a9138d7 100644 --- a/docs/ACCEPTANCE.md +++ b/docs/ACCEPTANCE.md @@ -281,3 +281,28 @@ - Produktionsbuild sowie vollständige Unit- und E2E-Matrix gemäß Auftrag nicht ausgeführt - `git diff --check`: erfolgreich + +## Materialkorrektur 0.5.7 + +| Kriterium | Nachweis | Stand | +| -------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------- | +| Hintergrundlicht im Arbeitsbereich sichtbar | Fundus und Sendungsplanung ohne Popup in Dark/Light auf Desktop und Mobil visuell geprüft | erfüllt am 23.10.2026 | +| Popup erhält die Lichtstimmung | Editor mit leichtem `46%`-Backdrop und `6px` Blur gegen Ansicht ohne Popup verglichen | erfüllt am 23.10.2026 | +| Verschachtelte Ablaufkarten werden dunkler | berechnete RGBA-Werte von Außenglas, Abschnitt, Piece und Aktionsgruppe kontrolliert | erfüllt am 23.10.2026 | +| Graue Sonderflächen entfernt | aktive Tabs, private Recherche, Quellen-/Materialflächen und Aktionsgruppen visuell geprüft | erfüllt am 23.10.2026 | +| Schreibfelder bleiben ruhig und klar | deckende Feldfüllung, feine Kontur und unveränderter Goldfokus in beiden Editorbereichen geprüft | erfüllt am 23.10.2026 | +| Lightmode und Smartphone ohne Seitenüberlauf | Chromium-Messung bei 1440 × 1000 und 390 × 844 Pixeln in beiden Themes | erfüllt am 23.10.2026 | + +## Ausgeführte Prüfungen Materialkorrektur 0.5.7 + +- `npm run check`: 0 Fehler und 0 Warnungen +- `npm run build`: erfolgreich mit `@sveltejs/adapter-node` +- berechnete Styles vor und nach der Korrektur für App-Hintergrund, Navigation, + Ablauf-Panel, Abschnitte, Pieces, Aktionsgruppen, Dialog, Backdrop, Tabs, + Rechercheflächen und Schreibfelder kontrolliert +- gezielter Chromium-Lauf für Sendungsplanung sowie Piece-Editor mit + „Sendungstext“ und „Recherche & Quellen“ bei 1440 × 1000 und 390 × 844 Pixeln + in Light/Dark ohne Konsolenfehler oder horizontalen Seitenüberlauf +- Desktop-/Mobilaufnahmen mit und ohne Popup visuell verglichen +- vollständige Funktionstests gemäß Auftrag nicht ausgeführt +- `git diff --check`: erfolgreich diff --git a/docs/STATUS.md b/docs/STATUS.md index 270b198..1a5bb9e 100644 --- a/docs/STATUS.md +++ b/docs/STATUS.md @@ -7,6 +7,27 @@ Anmeldung, Rollen, persistente Inhaltsbearbeitung, Sendungsplanung, Live-Steuerung, Präsentationsausgabe und lokaler Betriebsweg sind dokumentiert. Etappe 6 wurde nicht begonnen. +## Materialkorrektur 0.5.7 + +- statische Gold-/Blauviolettlichter so positioniert und verstärkt, dass sie im + eigentlichen Arbeitsbereich statt fast ausschließlich hinter der Navigation + sichtbar werden +- gemeinsame Materialtokens auf Außenglas, dunkle Innenfläche und tiefe + Ablaufkarte reduziert; verschachtelte Abschnitte, Pieces und Aktionsgruppen + werden nach innen dunkler statt heller und blaugrau +- aktive Editortabs transparent goldgetönt und private Recherche sowie + Quellen-/Materialbereiche auf transparente Nachtblauflächen zurückgeführt +- Dialog-Backdrop von starker Abdunklung und Unschärfe auf eine leichtere + Trennung reduziert, sodass die Lichtstimmung bei geöffnetem Editor erhalten + bleibt +- deckende Schreibfelder, Goldfokus, Lightmode, Mobilansicht und lesbare + Komponentenfüllungen ohne verfügbaren Blur bleiben erhalten + +Die berechneten Hintergründe, Transparenzen, Filter und Begrenzungseigenschaften +wurden vor und nach der Korrektur in Chromium kontrolliert. Sendungsplanung, +Sendungstext und Recherche wurden bei 1440 × 1000 und 390 × 844 Pixeln in beiden +Themes visuell geprüft. + ## Oberflächenkorrektur 0.5.6 - sichtbare statische Gold- und Blauviolettlichter hinter den halbtransparenten diff --git a/package-lock.json b/package-lock.json index e0009be..185011d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "sendewerk", - "version": "0.5.6", + "version": "0.5.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "sendewerk", - "version": "0.5.6", + "version": "0.5.7", "dependencies": { "@node-rs/argon2": "^2.2.2", "better-sqlite3": "^13.0.3", diff --git a/package.json b/package.json index 216ed73..befbea5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sendewerk", "private": true, - "version": "0.5.6", + "version": "0.5.7", "type": "module", "engines": { "node": ">=22.17 <25" diff --git a/src/app.css b/src/app.css index 5434e9f..68e0257 100644 --- a/src/app.css +++ b/src/app.css @@ -17,6 +17,10 @@ --glass: rgb(252 254 255 / 68%); --glass-strong: rgb(250 252 255 / 84%); --glass-chrome: rgb(252 254 255 / 74%); + --material-inset: rgb(235 241 248 / 82%); + --material-deep: rgb(225 233 243 / 90%); + --ambient-gold: rgb(231 185 87 / 20%); + --ambient-violet: rgb(102 89 184 / 15%); --field: #f8fbfe; --text: #172033; --text-muted: #5d6a7d; @@ -47,12 +51,16 @@ color-scheme: dark; --bg: #0b1220; --bg-elevated: rgb(11 18 32 / 68%); - --panel: rgb(18 31 52 / 72%); + --panel: rgb(12 24 42 / 72%); --panel-strong: #111d30; - --panel-soft: rgb(28 43 65 / 62%); - --glass: rgb(15 27 46 / 62%); - --glass-strong: rgb(17 30 51 / 78%); - --glass-chrome: rgb(15 27 46 / 68%); + --panel-soft: rgb(7 16 30 / 76%); + --glass: rgb(10 22 39 / 64%); + --glass-strong: rgb(10 22 39 / 84%); + --glass-chrome: rgb(9 20 36 / 72%); + --material-inset: rgb(6 15 28 / 72%); + --material-deep: rgb(4 11 22 / 82%); + --ambient-gold: rgb(231 185 87 / 32%); + --ambient-violet: rgb(102 89 184 / 24%); --field: #101a2b; --text: #fff7e8; --text-muted: #a9b6c8; @@ -90,16 +98,8 @@ body { min-width: 20rem; min-height: 100vh; background: - radial-gradient( - ellipse 58rem 42rem at 2% -8%, - color-mix(in srgb, var(--gold) 18%, transparent), - transparent 68% - ), - radial-gradient( - ellipse 54rem 44rem at 96% 24%, - color-mix(in srgb, #6659b8 14%, transparent), - transparent 70% - ), + radial-gradient(ellipse 52rem 36rem at 14% -6%, var(--ambient-gold), transparent 66%), + radial-gradient(ellipse 58rem 44rem at 94% 18%, var(--ambient-violet), transparent 68%), var(--bg); background-attachment: fixed; color: var(--text); @@ -764,11 +764,14 @@ textarea:focus { .builder-pane { min-width: 0; padding: 0.9rem; - border: 1px solid var(--line); + border: 1px solid color-mix(in srgb, var(--gold) 12%, var(--line)); border-radius: var(--radius-medium); background: var(--glass); - box-shadow: var(--shadow-soft); - backdrop-filter: blur(18px) saturate(1.08); + box-shadow: + inset 0 1px rgb(255 255 255 / 7%), + var(--shadow-soft); + -webkit-backdrop-filter: blur(20px) saturate(1.16); + backdrop-filter: blur(20px) saturate(1.16); } .pane-heading { @@ -787,7 +790,7 @@ textarea:focus { .pane-heading > span { padding: 0.3rem 0.55rem; border-radius: 2rem; - background: var(--panel-soft); + background: var(--material-deep); color: var(--text-muted); font-size: 0.7rem; font-weight: 680; @@ -855,13 +858,14 @@ textarea:focus { .run-list { display: grid; - gap: 0; - border-top: 1px solid var(--line); + gap: 0.5rem; } .run-section { - padding: 0.78rem 0.2rem; - border-bottom: 1px solid var(--line); + padding: 0.78rem; + border: 1px solid var(--line); + border-radius: var(--radius-medium); + background: var(--material-inset); } .run-section > header { @@ -888,7 +892,7 @@ textarea:focus { height: 2rem; place-items: center; border-radius: 0.65rem; - background: color-mix(in srgb, var(--category) 16%, var(--panel-soft)); + background: color-mix(in srgb, var(--category) 18%, var(--material-deep)); color: var(--text-muted); font-size: 0.67rem; font-weight: 750; @@ -908,7 +912,7 @@ textarea:focus { padding: 0.55rem 0.65rem; border-radius: 0.72rem; border: 1px solid transparent; - background: color-mix(in srgb, var(--panel-soft) 68%, transparent); + background: var(--material-deep); transition: background-color 140ms ease, border-color 140ms ease; @@ -916,8 +920,8 @@ textarea:focus { .usage-row:hover, .usage-row:focus-within { - border-color: var(--line-strong); - background: var(--glass-strong); + border-color: color-mix(in srgb, var(--gold) 34%, var(--line)); + background: color-mix(in srgb, var(--gold) 4%, var(--material-deep)); } .section-drag-handle, @@ -3527,7 +3531,7 @@ textarea:focus { padding: 0.16rem; border: 1px solid var(--line); border-radius: 0.7rem; - background: var(--glass-strong); + background: color-mix(in srgb, var(--gold) 3%, var(--material-deep)); } .row-actions > form > button, @@ -3576,7 +3580,7 @@ textarea:focus { overflow: hidden; border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line-strong)); border-radius: var(--radius-large); - background: var(--glass-strong); + background: var(--glass); box-shadow: var(--shadow-large); color: var(--text); -webkit-backdrop-filter: blur(28px) saturate(1.12); @@ -3588,8 +3592,9 @@ textarea:focus { } .piece-editor-dialog::backdrop { - background: color-mix(in srgb, var(--bg) 76%, transparent); - backdrop-filter: blur(12px); + background: color-mix(in srgb, var(--bg) 46%, transparent); + -webkit-backdrop-filter: blur(6px) saturate(0.95); + backdrop-filter: blur(6px) saturate(0.95); } .piece-dialog-header { @@ -3667,8 +3672,8 @@ textarea:focus { } .piece-dialog-tabs button.active { - 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); + background: color-mix(in srgb, var(--gold) 15%, transparent); + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 48%, transparent); color: var(--text); } @@ -3678,7 +3683,7 @@ textarea:focus { padding: clamp(0.85rem, 2vw, 1.4rem); overflow: auto; overscroll-behavior: contain; - background: color-mix(in srgb, var(--bg) 88%, transparent); + background: var(--material-deep); } .piece-dialog-form { @@ -3741,7 +3746,7 @@ textarea:focus { 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)); + background: var(--material-inset); } .markdown-editor-heading { @@ -3776,7 +3781,7 @@ textarea:focus { padding: 0.22rem 0.4rem; border: 1px solid var(--line); border-radius: 0.45rem; - background: color-mix(in srgb, var(--panel-soft) 72%, transparent); + background: var(--material-inset); color: var(--text-muted); font-size: 0.65rem; cursor: pointer; @@ -3805,7 +3810,7 @@ textarea:focus { padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-medium); - background: color-mix(in srgb, var(--glass) 78%, transparent); + background: var(--material-inset); } .piece-meta-details summary {