nick/PlotDirector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 10M.1: Word Companion Visual Polish

Browse Source
This commit is contained in:
Nick Beckley 2026-06-14 14:44:24 +01:00
parent 67116c3383
commit 4c5757fc63
1 changed files with 114 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
PlotLine/wwwroot/css/word-companion.css
View File

@ -1,12 +1,14 @@
:root { :root {
--companion-ink: #1e252b; --companion-ink: #2d241d;
--companion-muted: #66717b; --companion-muted: #7b7168;
--companion-paper: #fbfaf7; --companion-paper: #f8f1e6;
--companion-panel: #ffffff; --companion-panel: #fffaf2;
--companion-line: #d8ddd8; --companion-line: #e1d3bf;
--companion-accent: #2f6f63; --companion-accent: #6f4b2d;
--companion-accent-dark: #22534a; --companion-accent-dark: #4a321f;
--companion-soft: #eef5f2; --companion-gold: #b68a46;
--companion-soft: #f3eadc;
--companion-soft-strong: #ead9c1;
} }
* { * {
@ -21,17 +23,17 @@ body {
margin: 0; margin: 0;
min-width: 280px; min-width: 280px;
color: var(--companion-ink); color: var(--companion-ink);
background: #f4f6f4; background: var(--companion-paper);
font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
} }
.word-companion-shell { .word-companion-shell {
display: grid; display: grid;
gap: 10px; gap: 9px;
width: 100%; width: 100%;
max-width: 420px; max-width: 420px;
min-height: 100vh; min-height: 100vh;
padding: 10px; padding: 10px 11px;
} }
.word-companion-header { .word-companion-header {
@ -40,7 +42,7 @@ body {
justify-content: space-between; justify-content: space-between;
gap: 10px; gap: 10px;
border-bottom: 1px solid var(--companion-line); border-bottom: 1px solid var(--companion-line);
padding-bottom: 8px; padding-bottom: 7px;
} }
.word-companion-eyebrow { .word-companion-eyebrow {
@ -56,6 +58,7 @@ body {
margin: 0; margin: 0;
font-size: 1.12rem; font-size: 1.12rem;
line-height: 1.1; line-height: 1.1;
color: var(--companion-accent-dark);
} }
.word-companion-status, .word-companion-status,
@ -87,29 +90,35 @@ body {
} }
.word-companion-tabs { .word-companion-tabs {
display: grid; display: flex;
grid-template-columns: repeat(4, 1fr); flex-wrap: wrap;
gap: 3px; gap: 4px;
border: 1px solid var(--companion-line); border: 1px solid var(--companion-line);
border-radius: 8px; border-radius: 9px;
padding: 3px; padding: 4px;
background: #ffffff; background: #fff7eb;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
} }
.word-companion-tabs button { .word-companion-tabs button {
min-height: 30px; flex: 1 1 70px;
min-width: 0;
min-height: 29px;
border: 0; border: 0;
border-radius: 6px; border-radius: 7px;
background: transparent; background: transparent;
color: var(--companion-muted); color: var(--companion-muted);
font: inherit; font: inherit;
font-size: 0.78rem; font-size: 0.76rem;
font-weight: 800; font-weight: 800;
line-height: 1;
padding: 0 7px;
} }
.word-companion-tabs button.is-active { .word-companion-tabs button.is-active {
background: var(--companion-accent); background: linear-gradient(180deg, #7b5432 0%, var(--companion-accent-dark) 100%);
color: #ffffff; color: #fff9ef;
box-shadow: 0 1px 3px rgba(74, 50, 31, 0.18);
} }
.word-companion-tab-panel { .word-companion-tab-panel {
@ -119,11 +128,12 @@ body {
.word-companion-section { .word-companion-section {
display: grid; display: grid;
gap: 7px; gap: 8px;
border: 1px solid var(--companion-line); border: 1px solid var(--companion-line);
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
background: var(--companion-panel); background: var(--companion-panel);
box-shadow: 0 1px 2px rgba(74, 50, 31, 0.05);
} }
.word-companion-section span, .word-companion-section span,
@ -141,18 +151,18 @@ body {
.word-companion-section select { .word-companion-section select {
width: 100%; width: 100%;
min-height: 32px; min-height: 34px;
border: 1px solid var(--companion-line); border: 1px solid var(--companion-line);
border-radius: 6px; border-radius: 6px;
padding: 6px 8px; padding: 6px 8px;
background: #ffffff; background: #fffdf8;
color: var(--companion-ink); color: var(--companion-ink);
font: inherit; font: inherit;
} }
.word-companion-connection { .word-companion-connection {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr;
gap: 8px; gap: 9px;
} }
.word-companion-connection .word-companion-message { .word-companion-connection .word-companion-message {
@ -168,25 +178,25 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 8px; gap: 7px;
} }
.word-companion-header-actions { .word-companion-header-actions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-end; justify-content: flex-end;
gap: 6px; gap: 5px;
} }
.word-companion-section-header button { .word-companion-section-header button {
min-height: 30px; min-height: 29px;
border: 1px solid var(--companion-accent); border: 1px solid var(--companion-accent);
border-radius: 6px; border-radius: 6px;
padding: 5px 9px; padding: 5px 8px;
background: var(--companion-accent); background: var(--companion-accent);
color: #ffffff; color: #fff9ef;
font: inherit; font: inherit;
font-size: 0.78rem; font-size: 0.76rem;
font-weight: 700; font-weight: 700;
} }
@ -200,24 +210,24 @@ body {
.word-companion-actions { .word-companion-actions {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 8px; gap: 7px;
} }
.word-companion-actions button { .word-companion-actions button {
min-height: 34px; min-height: 33px;
border: 1px solid var(--companion-accent); border: 1px solid var(--companion-accent);
border-radius: 6px; border-radius: 6px;
padding: 6px 8px; padding: 6px 8px;
background: #ffffff; background: #fffdf8;
color: var(--companion-accent-dark); color: var(--companion-accent-dark);
font: inherit; font: inherit;
font-size: 0.84rem; font-size: 0.82rem;
font-weight: 800; font-weight: 800;
} }
.word-companion-actions .word-companion-primary-action { .word-companion-actions .word-companion-primary-action {
background: var(--companion-accent); background: linear-gradient(180deg, #7b5432 0%, var(--companion-accent-dark) 100%);
color: #ffffff; color: #fff9ef;
} }
.word-companion-actions button:disabled { .word-companion-actions button:disabled {
@ -249,7 +259,7 @@ body {
.word-companion-section strong { .word-companion-section strong {
min-width: 0; min-width: 0;
font-size: 0.98rem; font-size: 0.96rem;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
@ -261,18 +271,20 @@ body {
} }
.word-companion-scene-card { .word-companion-scene-card {
border: 1px solid rgba(47, 111, 99, 0.18); border: 1px solid rgba(111, 75, 45, 0.2);
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
background: var(--companion-soft); background: var(--companion-soft);
} }
.word-companion-scene-summary { .word-companion-scene-summary {
gap: 9px; gap: 8px;
} }
.word-companion-title-row strong { .word-companion-title-row strong {
color: var(--companion-accent-dark);
font-size: 1rem; font-size: 1rem;
line-height: 1.25;
} }
.word-companion-badges { .word-companion-badges {
@ -286,10 +298,10 @@ body {
align-items: center; align-items: center;
width: fit-content; width: fit-content;
min-height: 24px; min-height: 24px;
border: 1px solid rgba(47, 111, 99, 0.24); border: 1px solid rgba(111, 75, 45, 0.24);
border-radius: 999px; border-radius: 999px;
padding: 3px 8px; padding: 3px 8px;
background: #ffffff; background: #fffaf2;
color: var(--companion-accent-dark) !important; color: var(--companion-accent-dark) !important;
font-size: 0.74rem !important; font-size: 0.74rem !important;
font-weight: 800 !important; font-weight: 800 !important;
@ -307,17 +319,19 @@ body {
.word-companion-metrics { .word-companion-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
} }
.word-companion-metrics div { .word-companion-metrics div {
border: 1px solid rgba(47, 111, 99, 0.16); border: 1px solid rgba(111, 75, 45, 0.16);
border-radius: 6px; border-radius: 6px;
padding: 7px; padding: 7px;
background: #ffffff; background: #fffdf8;
} }
.word-companion-metrics strong { .word-companion-metrics strong {
font-size: 0.92rem; color: var(--companion-accent-dark);
font-size: 0.91rem;
} }
.word-companion-sync-meta { .word-companion-sync-meta {
@ -340,7 +354,7 @@ body {
.word-companion-scene-details, .word-companion-scene-details,
.word-companion-link-groups { .word-companion-link-groups {
display: grid; display: grid;
gap: 8px; gap: 7px;
} }
.word-companion-resolve-diagnostics div, .word-companion-resolve-diagnostics div,
@ -353,10 +367,18 @@ body {
.word-companion-resolve-diagnostics { .word-companion-resolve-diagnostics {
padding-top: 4px; padding-top: 4px;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
} }
.word-companion-resolve-diagnostics strong { .word-companion-resolve-diagnostics strong {
font-size: 0.86rem; color: var(--companion-ink);
font-size: 0.8rem;
line-height: 1.25;
}
.word-companion-resolve-diagnostics span {
font-size: 0.68rem;
letter-spacing: 0.01em;
} }
.word-companion-progress-sync { .word-companion-progress-sync {
@ -389,7 +411,7 @@ body {
margin: 0; margin: 0;
border: 1px solid var(--companion-line); border: 1px solid var(--companion-line);
border-radius: 6px; border-radius: 6px;
padding: 8px; padding: 9px;
background: var(--companion-soft); background: var(--companion-soft);
color: var(--companion-ink); color: var(--companion-ink);
font-size: 0.9rem; font-size: 0.9rem;
@ -399,7 +421,7 @@ body {
.word-companion-check-list { .word-companion-check-list {
display: grid; display: grid;
gap: 5px; gap: 4px;
} }
.word-companion-check-item { .word-companion-check-item {
@ -407,11 +429,11 @@ body {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
align-items: center; align-items: center;
gap: 7px; gap: 7px;
min-height: 30px; min-height: 29px;
border: 1px solid rgba(47, 111, 99, 0.18); border: 1px solid rgba(111, 75, 45, 0.18);
border-radius: 6px; border-radius: 6px;
padding: 5px 7px; padding: 5px 7px;
background: #ffffff; background: #fffdf8;
color: var(--companion-ink); color: var(--companion-ink);
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -436,11 +458,12 @@ body {
} }
.word-companion-create-link { .word-companion-create-link {
border-color: rgba(47, 111, 99, 0.38); border-color: rgba(182, 138, 70, 0.45);
background: #fff8ec;
} }
.word-companion-structure-preview { .word-companion-structure-preview {
border-color: rgba(47, 111, 99, 0.28); border-color: rgba(182, 138, 70, 0.35);
} }
.word-companion-preview-groups, .word-companion-preview-groups,
@ -452,7 +475,7 @@ body {
.word-companion-preview-group { .word-companion-preview-group {
border-top: 1px solid var(--companion-line); border-top: 1px solid var(--companion-line);
padding-top: 8px; padding-top: 7px;
} }
.word-companion-preview-group:first-child { .word-companion-preview-group:first-child {
@ -461,10 +484,10 @@ body {
} }
.word-companion-preview-item { .word-companion-preview-item {
border: 1px solid rgba(47, 111, 99, 0.18); border: 1px solid rgba(111, 75, 45, 0.16);
border-radius: 6px; border-radius: 6px;
padding: 7px; padding: 7px;
background: #ffffff; background: #fffdf8;
} }
.word-companion-preview-item span, .word-companion-preview-item span,
@ -541,7 +564,7 @@ body {
border: 1px solid var(--companion-line); border: 1px solid var(--companion-line);
border-radius: 6px; border-radius: 6px;
padding: 6px 8px; padding: 6px 8px;
background: #ffffff; background: #fffdf8;
color: var(--companion-ink); color: var(--companion-ink);
font: inherit; font: inherit;
} }
@ -552,7 +575,7 @@ body {
border-radius: 6px; border-radius: 6px;
padding: 5px 9px; padding: 5px 9px;
background: var(--companion-accent); background: var(--companion-accent);
color: #ffffff; color: #fff9ef;
font: inherit; font: inherit;
font-size: 0.82rem; font-size: 0.82rem;
font-weight: 700; font-weight: 700;
@ -577,10 +600,10 @@ body {
align-items: center; align-items: center;
gap: 7px; gap: 7px;
min-height: 32px; min-height: 32px;
border: 1px solid rgba(47, 111, 99, 0.18); border: 1px solid rgba(111, 75, 45, 0.18);
border-radius: 6px; border-radius: 6px;
padding: 5px 7px; padding: 5px 7px;
background: #ffffff; background: #fffdf8;
color: var(--companion-ink); color: var(--companion-ink);
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -600,7 +623,7 @@ body {
.word-companion-outline { .word-companion-outline {
display: grid; display: grid;
gap: 8px; gap: 7px;
padding-top: 4px; padding-top: 4px;
} }
@ -630,7 +653,7 @@ body {
.word-companion-summary { .word-companion-summary {
display: grid; display: grid;
gap: 8px; gap: 8px;
border: 1px solid rgba(47, 111, 99, 0.18); border: 1px solid rgba(111, 75, 45, 0.18);
border-radius: 8px; border-radius: 8px;
padding: 12px; padding: 12px;
background: var(--companion-soft); background: var(--companion-soft);
@ -648,7 +671,8 @@ body {
} }
.word-companion-collapsible { .word-companion-collapsible {
gap: 10px; gap: 8px;
background: #fff8ec;
} }
.word-companion-collapsible:not([open]) > :not(summary) { .word-companion-collapsible:not([open]) > :not(summary) {
@ -675,5 +699,27 @@ body {
.word-companion-footer { .word-companion-footer {
border-top: 1px solid var(--companion-line); border-top: 1px solid var(--companion-line);
margin-top: auto; margin-top: auto;
padding-top: 12px; padding-top: 7px;
font-size: 0.76rem;
}
@media (min-width: 390px) {
.word-companion-connection {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 340px) {
.word-companion-tabs button {
flex-basis: calc(50% - 4px);
}
.word-companion-metrics,
.word-companion-resolve-diagnostics {
grid-template-columns: 1fr;
}
.word-companion-actions {
grid-template-columns: 1fr;
}
} }