From 2454e4a0374c79951ff3ce6cd0f8628608bc63d6 Mon Sep 17 00:00:00 2001 From: Nick Beckley Date: Wed, 2 Sep 2026 20:05:23 +0000 Subject: [PATCH] Improve review page visual hierarchy --- PlotLine.Tests/Program.cs | 9 +- PlotLine/wwwroot/css/onboarding.css | 123 +++++++++++++++++++++------- 2 files changed, 101 insertions(+), 31 deletions(-) diff --git a/PlotLine.Tests/Program.cs b/PlotLine.Tests/Program.cs index bf5179f..4d35d89 100644 --- a/PlotLine.Tests/Program.cs +++ b/PlotLine.Tests/Program.cs @@ -797,6 +797,10 @@ static void StoryIntelligenceReviewCentreUsesIndependentTileGrid() } Assert(css.Contains(".story-review-centre-grid", StringComparison.Ordinal), "Review Centre grid CSS should exist."); + Assert(css.Contains(".story-review-centre-tile {\n min-height: 12rem;", StringComparison.Ordinal), "Review Centre should use dedicated review tiles."); + Assert(css.Contains("background: var(--plotline-panel, var(--bs-body-bg));", StringComparison.Ordinal), "Review Centre tiles should use theme-aware surfaces."); + Assert(css.Contains("[data-theme=\"dark\"] .story-review-centre-tile", StringComparison.Ordinal), "Review Centre tiles should have dark-theme surface protection."); + Assert(!css.Contains(".story-review-centre-tile {\n min-height: 12rem;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: .85rem;\n border: 1px solid rgba(31, 42, 68, .1);\n border-radius: 8px;\n padding: 1rem;\n background: rgba(255, 255, 255, .64);", StringComparison.Ordinal), "Review Centre tiles should not use hard-coded light slab backgrounds."); Assert(css.Contains("grid-template-columns: repeat(3, minmax(0, 1fr))", StringComparison.Ordinal), "Desktop Review Centre should use three columns."); Assert(css.Contains("@media (max-width: 980px)", StringComparison.Ordinal) && css.Contains("grid-template-columns: repeat(2, minmax(0, 1fr))", StringComparison.Ordinal), "Tablet Review Centre should use two columns."); @@ -952,7 +956,10 @@ static void StoryIntelligenceReviewModulePagesOmitWizardChrome() var stylesheet = File.ReadAllText(Path.Combine(root, "wwwroot/css/onboarding.css")); Assert(stylesheet.Contains(".story-review-card-header", StringComparison.Ordinal), "Shared review candidate header CSS should be present."); Assert(stylesheet.Contains("justify-content: space-between;", StringComparison.Ordinal), "Review candidate headers should align title and status consistently."); - Assert(stylesheet.Contains("border-bottom: 1px solid rgba(31, 42, 68, .1);", StringComparison.Ordinal), "Review candidate headers should be visually separated from card bodies."); + Assert(stylesheet.Contains("border-bottom: 1px solid color-mix(in srgb, var(--plotline-accent", StringComparison.Ordinal), "Review candidate headers should be visually separated from card bodies."); + Assert(stylesheet.Contains("[data-theme=\"dark\"] .story-review-card-header", StringComparison.Ordinal), "Review candidate headers should have dark-theme contrast rules."); + Assert(stylesheet.Contains("[data-theme=\"dark\"] .story-review-note", StringComparison.Ordinal), "Nested evidence and context blocks should stay subordinate in dark theme."); + Assert(stylesheet.Contains(".story-character-card__body .form-select", StringComparison.Ordinal), "Review card form controls should use scoped theme-aware contrast."); var knowledgeView = File.ReadAllText(Path.Combine(root, "Views/Onboarding/StoryIntelligenceKnowledge.cshtml")); var relationshipsView = File.ReadAllText(Path.Combine(root, "Views/Onboarding/StoryIntelligenceRelationships.cshtml")); diff --git a/PlotLine/wwwroot/css/onboarding.css b/PlotLine/wwwroot/css/onboarding.css index 3474d5e..d8c006b 100644 --- a/PlotLine/wwwroot/css/onboarding.css +++ b/PlotLine/wwwroot/css/onboarding.css @@ -1392,21 +1392,33 @@ summary.story-review-chapter-heading { .story-review-note { margin: 0; - border-left: 4px solid rgba(47, 111, 99, .45); - border-radius: 8px; - padding: .8rem 1rem; - background: rgba(47, 111, 99, .07); + border: 1px solid color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 72%, transparent); + border-left: 3px solid color-mix(in srgb, var(--plotline-accent, #2f6f63) 38%, var(--plotline-line, rgba(31, 42, 68, .12))); + border-radius: 6px; + padding: .65rem .8rem; + background: color-mix(in srgb, var(--plotline-panel, var(--bs-body-bg)) 92%, var(--plotline-accent, #2f6f63)); color: var(--bs-secondary-color); } +.story-review-note strong { + display: block; + margin-bottom: .2rem; + color: var(--bs-body-color); + font-size: .84rem; +} + +.story-review-note p { + margin-bottom: 0; +} + .story-review-note ul { - margin: .35rem 0 0; + margin: .25rem 0 0; padding-left: 1.1rem; } .story-review-note--warning { - border-left-color: rgba(176, 58, 46, .5); - background: rgba(176, 58, 46, .07); + border-left-color: color-mix(in srgb, var(--plotline-danger, #b03a2e) 58%, var(--plotline-line, rgba(31, 42, 68, .12))); + background: color-mix(in srgb, var(--plotline-panel, var(--bs-body-bg)) 92%, var(--plotline-danger, #b03a2e)); } .story-review-card-actions { @@ -1462,20 +1474,21 @@ summary.story-review-chapter-heading { .story-character-card-grid, .story-future-stage-grid { display: grid; - gap: .75rem; + gap: 1rem; } .story-character-card { - border: 1px solid rgba(31, 42, 68, .1); + border: 1px solid color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 82%, var(--plotline-accent, #2f6f63)); border-radius: 8px; - background: rgba(255, 255, 255, .64); + background: var(--plotline-panel, var(--bs-body-bg)); + box-shadow: var(--plotline-shadow-subtle, 0 8px 20px rgba(31, 42, 68, .06)); overflow: hidden; } .story-review-card-header { align-items: center; - background: rgba(47, 111, 99, .07); - border-bottom: 1px solid rgba(31, 42, 68, .1); + background: linear-gradient(180deg, color-mix(in srgb, var(--plotline-accent, #2f6f63) 18%, var(--plotline-panel, var(--bs-body-bg))), color-mix(in srgb, var(--plotline-accent, #2f6f63) 10%, var(--plotline-panel, var(--bs-body-bg)))); + border-bottom: 1px solid color-mix(in srgb, var(--plotline-accent, #2f6f63) 34%, var(--plotline-line, rgba(31, 42, 68, .12))); cursor: pointer; display: flex; flex-wrap: wrap; @@ -1491,8 +1504,9 @@ summary.story-review-chapter-heading { } .story-review-card-header strong { - color: var(--bs-body-color); - font-size: 1rem; + color: var(--plotline-ink, var(--bs-body-color)); + font-size: 1.04rem; + font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; } @@ -1506,8 +1520,9 @@ summary.story-review-chapter-heading { } .story-review-card-header em { - color: var(--plotdirector-green, #2f6f63); + color: var(--plotline-accent-dark, #2f6f63); flex: 0 0 auto; + font-weight: 800; text-align: right; } @@ -1539,9 +1554,11 @@ summary.story-review-chapter-heading { display: flex; flex-wrap: wrap; gap: .75rem; - border: 0; - padding: 0; - margin: 0; + border: 1px solid color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 75%, transparent); + border-radius: 6px; + padding: .7rem .8rem; + margin: .1rem 0 0; + background: color-mix(in srgb, var(--plotline-panel, var(--bs-body-bg)) 96%, var(--plotline-line, rgba(31, 42, 68, .12))); } .story-character-actions legend { @@ -1559,6 +1576,19 @@ summary.story-review-chapter-heading { font-weight: 700; } +.story-character-card__body .form-control, +.story-character-card__body .form-select { + background-color: var(--app-input-bg, var(--bs-body-bg)); + border-color: color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 86%, var(--plotline-ink, var(--bs-body-color))); + color: var(--app-input-text, var(--bs-body-color)); +} + +.story-character-card__body .form-control:focus, +.story-character-card__body .form-select:focus { + border-color: var(--plotline-accent, #2f6f63); + box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--plotline-accent, #2f6f63) 18%, transparent); +} + .story-future-stage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1rem 0; @@ -1621,24 +1651,28 @@ summary.story-review-chapter-heading { flex-direction: column; justify-content: space-between; gap: .85rem; - border: 1px solid rgba(31, 42, 68, .1); + border: 1px solid color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 82%, var(--plotline-accent, #2f6f63)); border-radius: 8px; padding: 1rem; - background: rgba(255, 255, 255, .64); + background: var(--plotline-panel, var(--bs-body-bg)); + box-shadow: var(--plotline-shadow-subtle, 0 8px 20px rgba(31, 42, 68, .06)); } .story-review-centre-tile--primary { - border-color: rgba(122, 74, 39, .32); - box-shadow: 0 10px 24px rgba(122, 74, 39, .08); + border-color: color-mix(in srgb, var(--plotline-accent, #7a4a27) 46%, var(--plotline-line, rgba(31, 42, 68, .12))); + box-shadow: 0 10px 24px color-mix(in srgb, var(--plotline-accent, #7a4a27) 16%, transparent); } .story-review-centre-tile--locked { - background: rgba(255, 255, 255, .46); + background: color-mix(in srgb, var(--plotline-panel, var(--bs-body-bg)) 88%, var(--plotline-line, rgba(31, 42, 68, .12))); } .story-review-centre-tile h2 { margin: 0; - font-size: 1.05rem; + color: var(--plotline-ink, var(--bs-body-color)); + font-size: 1.08rem; + font-weight: 800; + line-height: 1.25; } .story-review-centre-tile p { @@ -1649,16 +1683,16 @@ summary.story-review-chapter-heading { .story-review-centre-tile__status { display: block; - font-weight: 700; - color: var(--bs-body-color); + font-weight: 800; + color: var(--plotline-ink, var(--bs-body-color)); } .story-review-centre-tile__status--ready { - color: #146c43; + color: var(--plotline-success, #146c43); } .story-review-centre-tile__status--warning { - color: #7a4a27; + color: var(--plotline-warning, #7a4a27); } .story-review-centre-tile__status--locked { @@ -1672,14 +1706,43 @@ summary.story-review-chapter-heading { .story-review-centre-tile .btn.disabled { pointer-events: none; color: var(--bs-secondary-color); - border-color: rgba(31, 42, 68, .16); - background: rgba(31, 42, 68, .04); + border-color: color-mix(in srgb, var(--plotline-line, rgba(31, 42, 68, .12)) 80%, transparent); + background: color-mix(in srgb, var(--plotline-panel, var(--bs-body-bg)) 94%, var(--plotline-line, rgba(31, 42, 68, .12))); } .story-review-centre-actions { justify-content: flex-start; } +[data-theme="dark"] .story-character-card, +[data-theme="dark"] .story-review-centre-tile { + background: var(--plotline-surface-elevated, #2a231e); + border-color: color-mix(in srgb, var(--plotline-border-soft, rgba(231, 214, 190, .16)) 82%, var(--plotline-accent, #d49a62)); +} + +[data-theme="dark"] .story-review-card-header { + background: linear-gradient(180deg, color-mix(in srgb, var(--plotline-accent, #d49a62) 24%, var(--plotline-surface-elevated, #2a231e)), color-mix(in srgb, var(--plotline-accent, #d49a62) 14%, var(--plotline-surface-elevated, #2a231e))); + border-bottom-color: color-mix(in srgb, var(--plotline-accent, #d49a62) 46%, var(--plotline-border-soft, rgba(231, 214, 190, .16))); +} + +[data-theme="dark"] .story-review-note, +[data-theme="dark"] .story-character-actions, +[data-theme="dark"] .story-review-centre-tile .btn.disabled { + background: color-mix(in srgb, var(--plotline-surface-elevated, #2a231e) 92%, var(--plotline-bg, #14110f)); + border-color: color-mix(in srgb, var(--plotline-border-soft, rgba(231, 214, 190, .16)) 78%, transparent); +} + +[data-theme="dark"] .story-review-note { + border-left-color: color-mix(in srgb, var(--plotline-accent, #d49a62) 48%, var(--plotline-border-soft, rgba(231, 214, 190, .16))); +} + +[data-theme="dark"] .story-character-card__body .form-control, +[data-theme="dark"] .story-character-card__body .form-select { + background-color: var(--app-input-bg, #211b17); + border-color: color-mix(in srgb, var(--plotline-border-soft, rgba(231, 214, 190, .16)) 84%, var(--plotline-text-muted, #b9aa99)); + color: var(--app-input-text, #f4eadc); +} + .story-scene-preview-list { display: grid; gap: .65rem;