developer/galaxy-game
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

feat(ui): visual design system — tokens + light/dark theming (F1) #26

Merged
developer merged 2 commits from feature/ui-finalize-f1-tokens into development 2026-05-22 05:37:11 +00:00
Conversation 0 Commits 2 Files Changed 73
+515 -497
58 changed files with 515 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4ad96b0ef7 - Show all commits
ui/docs/design-system.md
+24 -7
View File
@@ -88,16 +88,33 @@ them in sync.
- Directional one-off drop shadows that are not part of the elevation - Directional one-off drop shadows that are not part of the elevation
scale may stay as literal `rgba(0, 0, 0, …)` (they read acceptably in scale may stay as literal `rgba(0, 0, 0, …)` (they read acceptably in
both themes); reach for `--shadow-*` for standard elevation. both themes); reach for `--shadow-*` for standard elevation.
- Overlay scrims — a translucent layer dimming the app behind a modal,
or darkening a map/WebGL canvas so floating chrome stays readable —
stay literal `rgba(…)`. They sit over arbitrary content, not a themed
surface, so a surface token would be wrong; there is no `--color-scrim`
until a third caller justifies one.
- Data-visualisation surfaces keep a fixed palette. The battle scene
(`battle-player/battle-scene.svelte`) is a self-contained SVG
visualisation — like the WebGL map canvas — and stays dark in both
themes; its only themed neighbours are the surrounding chrome
(`battle-viewer.svelte`). Re-theming a viz surface for light is a
dedicated design task, not a token swap.
- Spacing-scale adoption is gradual — colour tokens are the priority; - Spacing-scale adoption is gradual — colour tokens are the priority;
existing one-off paddings are migrated opportunistically, not churned existing one-off paddings are migrated opportunistically, not churned
en masse. en masse.
## Migration status ## Migration status
The token system and the always-visible in-game chrome (header, account All component `<style>` blocks reference the tokens — the chrome
menu, sidebar frame, tab bar, bottom tabs, shell background) reference (header, account menu, sidebar, tabs, shell) and every view body
tokens and switch cleanly between light and dark. The view bodies (calculator, inspectors, tables, report, lobby, auth, map overlays,
(calculator, inspectors, tables, lobby, auth, map overlays, battle, battle, mail, toasts). The whole app switches coherently between light
mail) are migrated incrementally; until a view is migrated its and dark from a single token change.
hard-coded colours stay dark in both themes. F1 is complete when no
literal theme colours remain in component `<style>` blocks. The only remaining literal colours are the documented exceptions above:
the battle-scene data-viz palette, the overlay scrims, and the
directional / deliberate drop shadows.
The default theme is **dark** while light coherence is being verified
across the migrated views; once the owner signs off on light, the
default can flip to `system`.
ui/frontend/src/lib/active-view/battle.svelte
+3 -3
View File
@@ -180,16 +180,16 @@ viewer keeps its prop-driven contract.
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
color: #d6dcf2; color: var(--color-text);
} }
.status { .status {
margin: 2rem auto; margin: 2rem auto;
max-width: 880px; max-width: 880px;
color: #93a0d0; color: var(--color-text-muted);
font-size: 0.95rem; font-size: 0.95rem;
text-align: center; text-align: center;
} }
.status.error { .status.error {
color: #e08585; color: var(--color-danger);
} }
</style> </style>
ui/frontend/src/lib/active-view/designer-science.svelte
+17 -17
View File
@@ -353,7 +353,7 @@ fractions is a Phase 21 decision documented in
.hint, .hint,
.not-found { .not-found {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.85rem; font-size: 0.85rem;
} }
.form { .form {
@@ -369,32 +369,32 @@ fractions is a Phase 21 decision documented in
gap: 0.6rem; gap: 0.6rem;
} }
.row span { .row span {
color: #aab; color: var(--color-text-muted);
font-size: 0.85rem; font-size: 0.85rem;
} }
.row input { .row input {
font: inherit; font: inherit;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
background: #0a0e1a; background: var(--color-bg);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
} }
.row input[aria-invalid="true"] { .row input[aria-invalid="true"] {
border-color: #d97a7a; border-color: var(--color-danger);
} }
.sum { .sum {
margin: 0; margin: 0;
font-size: 0.85rem; font-size: 0.85rem;
color: #aab; color: var(--color-text-muted);
} }
.sum[data-sum-ok="false"] { .sum[data-sum-ok="false"] {
color: #d97a7a; color: var(--color-danger);
} }
.error { .error {
margin: 0; margin: 0;
font-size: 0.8rem; font-size: 0.8rem;
color: #d97a7a; color: var(--color-danger);
} }
.fields { .fields {
margin: 0; margin: 0;
@@ -408,7 +408,7 @@ fractions is a Phase 21 decision documented in
display: contents; display: contents;
} }
.field dt { .field dt {
color: #aab; color: var(--color-text-muted);
font-size: 0.85rem; font-size: 0.85rem;
} }
.field dd { .field dd {
@@ -425,24 +425,24 @@ fractions is a Phase 21 decision documented in
font-size: 0.9rem; font-size: 0.9rem;
padding: 0.3rem 0.7rem; padding: 0.3rem 0.7rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.actions button:not(:disabled):hover { .actions button:not(:disabled):hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
.actions button:disabled { .actions button:disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5; opacity: 0.5;
} }
.actions .delete { .actions .delete {
color: #d97a7a; color: var(--color-danger);
} }
.actions .delete:not(:disabled):hover { .actions .delete:not(:disabled):hover {
border-color: #d97a7a; border-color: var(--color-danger);
color: #f0a0a0; color: var(--color-danger);
} }
</style> </style>
ui/frontend/src/lib/active-view/mail.svelte
+9 -9
View File
@@ -135,9 +135,9 @@ pane, system-item pane, compose form) live under
.compose-btn { .compose-btn {
font: inherit; font: inherit;
padding: 0.35rem 0.75rem; padding: 0.35rem 0.75rem;
border: 1px solid #444; border: 1px solid var(--color-border);
background: #1a1a1a; background: var(--color-surface-raised);
color: #fff; color: var(--color-text);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
@@ -146,10 +146,10 @@ pane, system-item pane, compose form) live under
cursor: not-allowed; cursor: not-allowed;
} }
.status { .status {
color: #888; color: var(--color-text-muted);
} }
.status.error { .status.error {
color: #c62828; color: var(--color-danger);
} }
.panes { .panes {
display: grid; display: grid;
@@ -159,10 +159,10 @@ pane, system-item pane, compose form) live under
} }
.list-pane, .list-pane,
.detail-pane { .detail-pane {
border: 1px solid #2a2a2a; border: 1px solid var(--color-border-subtle);
border-radius: 6px; border-radius: 6px;
padding: 0.75rem; padding: 0.75rem;
background: #111; background: var(--color-surface);
overflow: hidden; overflow: hidden;
} }
.list-pane { .list-pane {
@@ -174,9 +174,9 @@ pane, system-item pane, compose form) live under
font: inherit; font: inherit;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border: 1px solid #444; border: 1px solid var(--color-border);
background: transparent; background: transparent;
color: #fff; color: var(--color-text);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
ui/frontend/src/lib/active-view/mail/compose.svelte
+12 -11
View File
@@ -160,8 +160,8 @@ surfaces the resulting 403 inline.
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
background: #161616; background: var(--color-surface-overlay);
border: 1px solid #2a2a2a; border: 1px solid var(--color-border-subtle);
border-radius: 8px; border-radius: 8px;
min-width: min(420px, 90vw); min-width: min(420px, 90vw);
max-width: min(560px, 95vw); max-width: min(560px, 95vw);
@@ -188,15 +188,15 @@ surfaces the resulting 403 inline.
flex-direction: column; flex-direction: column;
gap: 0.2rem; gap: 0.2rem;
font-size: 0.85rem; font-size: 0.85rem;
color: #ccc; color: var(--color-text-muted);
} }
input, input,
textarea, textarea,
select { select {
font: inherit; font: inherit;
padding: 0.4rem 0.5rem; padding: 0.4rem 0.5rem;
border: 1px solid #444; border: 1px solid var(--color-border);
background: #111; background: var(--color-surface);
color: inherit; color: inherit;
border-radius: 4px; border-radius: 4px;
} }
@@ -209,22 +209,23 @@ surfaces the resulting 403 inline.
footer button { footer button {
font: inherit; font: inherit;
padding: 0.35rem 0.75rem; padding: 0.35rem 0.75rem;
border: 1px solid #444; border: 1px solid var(--color-border);
background: #1a1a1a; background: var(--color-surface-raised);
color: #fff; color: var(--color-text);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
footer button[type="submit"] { footer button[type="submit"] {
background: #2a4d7d; background: var(--color-accent);
border-color: #2a4d7d; border-color: var(--color-accent);
color: var(--color-accent-contrast);
} }
footer button:disabled { footer button:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
.error { .error {
color: #c62828; color: var(--color-danger);
font-size: 0.85rem; font-size: 0.85rem;
margin: 0; margin: 0;
} }
ui/frontend/src/lib/active-view/mail/system-item-pane.svelte
+2 -2
View File
@@ -82,7 +82,7 @@ available for incoming rows that the caller has read.
.title { .title {
margin: 0; margin: 0;
font-size: 1rem; font-size: 1rem;
color: #b3a14c; color: var(--color-warning);
} }
.subject { .subject {
font-weight: 700; font-weight: 700;
@@ -96,7 +96,7 @@ available for incoming rows that the caller has read.
align-self: flex-start; align-self: flex-start;
font: inherit; font: inherit;
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
border: 1px solid #444; border: 1px solid var(--color-border);
background: transparent; background: transparent;
color: inherit; color: inherit;
border-radius: 4px; border-radius: 4px;
ui/frontend/src/lib/active-view/mail/thread-list.svelte
+6 -6
View File
@@ -95,14 +95,14 @@ here.
cursor: pointer; cursor: pointer;
} }
.row.active .row-btn { .row.active .row-btn {
border-color: #555; border-color: var(--color-border-strong);
background: #1c1c1c; background: var(--color-surface-raised);
} }
.row.has-unread .title { .row.has-unread .title {
font-weight: 700; font-weight: 700;
} }
.row.standalone .title { .row.standalone .title {
color: #b3a14c; color: var(--color-warning);
} }
.title { .title {
grid-column: 1 / span 1; grid-column: 1 / span 1;
@@ -116,12 +116,12 @@ here.
text-align: center; text-align: center;
font-size: 0.75rem; font-size: 0.75rem;
border-radius: 999px; border-radius: 999px;
background: #2a4d7d; background: var(--color-accent);
color: #fff; color: var(--color-accent-contrast);
} }
.snippet { .snippet {
grid-column: 1 / span 2; grid-column: 1 / span 2;
color: #999; color: var(--color-text-muted);
font-size: 0.85rem; font-size: 0.85rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
ui/frontend/src/lib/active-view/mail/thread-pane.svelte
+11 -11
View File
@@ -186,17 +186,17 @@ sits at the bottom of the pane.
.message { .message {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-radius: 6px; border-radius: 6px;
background: #1c1c1c; background: var(--color-surface-raised);
border: 1px solid #2a2a2a; border: 1px solid var(--color-border-subtle);
} }
.message.outgoing { .message.outgoing {
background: #15252e; background: var(--color-accent-subtle);
} }
.meta { .meta {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 0.8rem; font-size: 0.8rem;
color: #999; color: var(--color-text-muted);
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.subject { .subject {
@@ -212,7 +212,7 @@ sits at the bottom of the pane.
margin-right: 0.5rem; margin-right: 0.5rem;
font: inherit; font: inherit;
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
border: 1px solid #444; border: 1px solid var(--color-border);
background: transparent; background: transparent;
color: inherit; color: inherit;
border-radius: 4px; border-radius: 4px;
@@ -227,8 +227,8 @@ sits at the bottom of the pane.
.reply textarea { .reply textarea {
font: inherit; font: inherit;
padding: 0.5rem; padding: 0.5rem;
border: 1px solid #444; border: 1px solid var(--color-border);
background: #111; background: var(--color-surface);
color: inherit; color: inherit;
border-radius: 4px; border-radius: 4px;
resize: vertical; resize: vertical;
@@ -237,9 +237,9 @@ sits at the bottom of the pane.
align-self: flex-end; align-self: flex-end;
font: inherit; font: inherit;
padding: 0.35rem 0.75rem; padding: 0.35rem 0.75rem;
border: 1px solid #444; border: 1px solid var(--color-border);
background: #1a1a1a; background: var(--color-surface-raised);
color: #fff; color: var(--color-text);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
@@ -248,7 +248,7 @@ sits at the bottom of the pane.
cursor: not-allowed; cursor: not-allowed;
} }
.error { .error {
color: #c62828; color: var(--color-danger);
font-size: 0.85rem; font-size: 0.85rem;
margin: 0; margin: 0;
} }
ui/frontend/src/lib/active-view/map-toggles.svelte
+11 -11
View File
@@ -238,13 +238,13 @@ bottom-tabs bar.
font-size: 1.4rem; font-size: 1.4rem;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
background: rgba(20, 24, 42, 0.85); background: rgba(20, 24, 42, 0.85);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
} }
.trigger:hover { .trigger:hover {
background: #1c2238; background: var(--color-surface-hover);
} }
.surface { .surface {
position: absolute; position: absolute;
@@ -254,11 +254,11 @@ bottom-tabs bar.
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
background: #14182a; background: var(--color-surface-overlay);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); box-shadow: var(--shadow-lg);
padding: 0.5rem; padding: 0.5rem;
z-index: 50; z-index: 50;
} }
@@ -274,7 +274,7 @@ bottom-tabs bar.
font-size: 0.75rem; font-size: 0.75rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: #aab; color: var(--color-text-muted);
padding: 0 0 0.15rem 0; padding: 0 0 0.15rem 0;
} }
label { label {
@@ -287,11 +287,11 @@ bottom-tabs bar.
cursor: pointer; cursor: pointer;
} }
label:hover { label:hover {
background: #1c2238; background: var(--color-surface-hover);
} }
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
accent-color: #6dd2ff; accent-color: var(--color-accent);
} }
.wrap-row { .wrap-row {
display: flex; display: flex;
@@ -301,7 +301,7 @@ bottom-tabs bar.
font-size: 0.9rem; font-size: 0.9rem;
} }
.wrap-label { .wrap-label {
color: #aab; color: var(--color-text-muted);
font-size: 0.75rem; font-size: 0.75rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
ui/frontend/src/lib/active-view/map.svelte
+6 -6
View File
@@ -726,7 +726,7 @@ preference the store already manages.
min-height: 0; min-height: 0;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: #0a0e1a; background: var(--color-bg);
} }
canvas { canvas {
display: block; display: block;
@@ -740,8 +740,8 @@ preference the store already manages.
transform: translateX(-50%); transform: translateX(-50%);
padding: 0.4rem 0.9rem; padding: 0.4rem 0.9rem;
background: rgba(20, 24, 42, 0.85); background: rgba(20, 24, 42, 0.85);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 6px; border-radius: 6px;
z-index: 10; z-index: 10;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
@@ -749,8 +749,8 @@ preference the store already manages.
margin: 0; margin: 0;
} }
.overlay.error { .overlay.error {
background: #4a1820; background: var(--color-danger-subtle);
border-color: #6d2530; border-color: var(--color-danger);
color: #ffb4b4; color: var(--color-danger);
} }
</style> </style>
ui/frontend/src/lib/active-view/report.svelte
+1 -1
View File
@@ -173,7 +173,7 @@ TOC and the body iterate the same data.
.report-view > :global(.report-toc) { .report-view > :global(.report-toc) {
position: sticky; position: sticky;
top: 0; top: 0;
background: #0a0e1a; background: var(--color-bg);
padding: 0.5rem 0; padding: 0.5rem 0;
z-index: 5; z-index: 5;
} }
ui/frontend/src/lib/active-view/report/report-toc.svelte
+14 -14
View File
@@ -128,15 +128,15 @@ The active section is computed by the orchestrator
font-size: 0.85rem; font-size: 0.85rem;
text-align: left; text-align: left;
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
background: #11172a; background: var(--color-surface);
color: #cfd7ff; color: var(--color-accent);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.back-to-map:hover { .back-to-map:hover {
background: #1a2240; background: var(--color-surface-hover);
color: #e8eaf6; color: var(--color-text);
} }
.desktop { .desktop {
display: block; display: block;
@@ -152,7 +152,7 @@ The active section is computed by the orchestrator
.desktop a { .desktop a {
display: block; display: block;
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
color: #aab; color: var(--color-text-muted);
text-decoration: none; text-decoration: none;
font-size: 0.85rem; font-size: 0.85rem;
line-height: 1.3; line-height: 1.3;
@@ -160,13 +160,13 @@ The active section is computed by the orchestrator
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
} }
.desktop a:hover { .desktop a:hover {
color: #e8eaf6; color: var(--color-text);
background: #11172a; background: var(--color-surface);
} }
.desktop a.active { .desktop a.active {
color: #e8eaf6; color: var(--color-text);
background: #11172a; background: var(--color-surface);
border-left-color: #4a6cf7; border-left-color: var(--color-accent);
} }
.mobile { .mobile {
display: none; display: none;
@@ -175,9 +175,9 @@ The active section is computed by the orchestrator
width: 100%; width: 100%;
font: inherit; font: inherit;
padding: 0.4rem 0.5rem; padding: 0.4rem 0.5rem;
background: #0a0e1a; background: var(--color-bg);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
} }
.visually-hidden { .visually-hidden {
ui/frontend/src/lib/active-view/report/section-approaching-groups.svelte
+5 -5
View File
@@ -68,11 +68,11 @@ class when the group lands and a battle roster forms.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -85,15 +85,15 @@ class when the group lands and a battle roster forms.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-battles.svelte
+5 -5
View File
@@ -61,11 +61,11 @@ decision log called out.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.ids { .ids {
@@ -83,18 +83,18 @@ decision log called out.
gap: 0.6rem; gap: 0.6rem;
} }
.label { .label {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.7rem; font-size: 0.7rem;
} }
.uuid { .uuid {
color: #cfd7ff; color: var(--color-accent);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
text-decoration: underline; text-decoration: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
} }
.uuid:hover { .uuid:hover {
color: #ffffff; color: var(--color-text);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-bombings.svelte
+9 -9
View File
@@ -94,11 +94,11 @@ Decoder sorts by `planetNumber` already.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -111,19 +111,19 @@ Decoder sorts by `planetNumber` already.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
.wiped td { .wiped td {
color: #c97a7a; color: var(--color-danger);
} }
.wiped-badge { .wiped-badge {
display: inline-block; display: inline-block;
@@ -131,9 +131,9 @@ Decoder sorts by `planetNumber` already.
font-size: 0.7rem; font-size: 0.7rem;
letter-spacing: 0.06em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
background: #4a1010; background: var(--color-danger-subtle);
color: #ffcaca; color: var(--color-danger);
border: 1px solid #8a3030; border: 1px solid var(--color-danger);
border-radius: 3px; border-radius: 3px;
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-cargo-routes.svelte
+5 -5
View File
@@ -83,11 +83,11 @@ has many routes.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -100,15 +100,15 @@ has many routes.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-foreign-planets.svelte
+5 -5
View File
@@ -85,11 +85,11 @@ as the local planets table plus an `owner` column.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -102,15 +102,15 @@ as the local planets table plus an `owner` column.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-foreign-sciences.svelte
+6 -6
View File
@@ -97,18 +97,18 @@ unit even when the section spans many races.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.race-header { .race-header {
margin: 0.75rem 0 0.3rem; margin: 0.75rem 0 0.3rem;
font-size: 0.85rem; font-size: 0.85rem;
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -121,15 +121,15 @@ unit even when the section spans many races.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-foreign-ship-classes.svelte
+6 -6
View File
@@ -99,18 +99,18 @@ incoming groups.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.race-header { .race-header {
margin: 0.75rem 0 0.3rem; margin: 0.75rem 0 0.3rem;
font-size: 0.85rem; font-size: 0.85rem;
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -123,15 +123,15 @@ incoming groups.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-foreign-ship-groups.svelte
+5 -5
View File
@@ -77,11 +77,11 @@ to groups the player doesn't own.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -94,15 +94,15 @@ to groups the player doesn't own.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-galaxy-summary.svelte
+4 -4
View File
@@ -48,11 +48,11 @@ section is never empty as long as the report has loaded.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.kv { .kv {
@@ -63,14 +63,14 @@ section is never empty as long as the report has loaded.
font-size: 0.9rem; font-size: 0.9rem;
} }
.kv dt { .kv dt {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.kv dd { .kv dd {
margin: 0; margin: 0;
color: #e8eaf6; color: var(--color-text);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-my-fleets.svelte
+5 -5
View File
@@ -70,11 +70,11 @@ in orbit has neither); empty cells in those columns are normal.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -87,15 +87,15 @@ in orbit has neither); empty cells in those columns are normal.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-my-planets.svelte
+5 -5
View File
@@ -83,11 +83,11 @@ column set (matches `ReportPlanet` shape).
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -100,15 +100,15 @@ column set (matches `ReportPlanet` shape).
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-my-sciences.svelte
+5 -5
View File
@@ -64,11 +64,11 @@ table).
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -81,15 +81,15 @@ table).
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-my-ship-classes.svelte
+5 -5
View File
@@ -67,11 +67,11 @@ drafts immediately, matching the ship-class designer's behaviour.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -84,15 +84,15 @@ drafts immediately, matching the ship-class designer's behaviour.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-my-ship-groups.svelte
+6 -6
View File
@@ -91,11 +91,11 @@ shown together with `load` when carrying.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -108,19 +108,19 @@ shown together with `load` when carrying.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
.uuid { .uuid {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: #cfd7ff; color: var(--color-accent);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-player-status.svelte
+9 -9
View File
@@ -92,11 +92,11 @@ highlight so the user can locate themselves quickly.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -109,30 +109,30 @@ highlight so the user can locate themselves quickly.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
.local td { .local td {
background: #11203d; background: var(--color-accent-subtle);
} }
.extinct td { .extinct td {
color: #889; color: var(--color-text-faint);
} }
.marker { .marker {
margin-left: 0.4rem; margin-left: 0.4rem;
font-size: 0.75rem; font-size: 0.75rem;
color: #aab; color: var(--color-text-muted);
} }
.extinct-marker { .extinct-marker {
color: #c97a7a; color: var(--color-danger);
letter-spacing: 0.08em; letter-spacing: 0.08em;
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-ships-in-production.svelte
+5 -5
View File
@@ -73,11 +73,11 @@ reads `#17 (Castle)` rather than just `#17`.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -90,15 +90,15 @@ reads `#17 (Castle)` rather than just `#17`.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-unidentified-groups.svelte
+5 -5
View File
@@ -57,11 +57,11 @@ radar that doesn't even resolve to a planet.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -74,15 +74,15 @@ radar that doesn't even resolve to a planet.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-uninhabited-planets.svelte
+5 -5
View File
@@ -74,11 +74,11 @@ are intentionally omitted.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -91,15 +91,15 @@ are intentionally omitted.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-unknown-planets.svelte
+5 -5
View File
@@ -59,11 +59,11 @@ else is known.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -76,15 +76,15 @@ else is known.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
</style> </style>
ui/frontend/src/lib/active-view/report/section-votes.svelte
+7 -7
View File
@@ -78,12 +78,12 @@ explanatory text on the races table.
.grid-section h2 { .grid-section h2 {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
font-size: 1.05rem; font-size: 1.05rem;
color: #e8eaf6; color: var(--color-text);
} }
.grid-section h3 { .grid-section h3 {
margin: 1rem 0 0.4rem; margin: 1rem 0 0.4rem;
font-size: 0.85rem; font-size: 0.85rem;
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
@@ -95,19 +95,19 @@ explanatory text on the races table.
font-size: 0.9rem; font-size: 0.9rem;
} }
.kv dt { .kv dt {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.kv dd { .kv dd {
margin: 0; margin: 0;
color: #e8eaf6; color: var(--color-text);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -119,10 +119,10 @@ explanatory text on the races table.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
ui/frontend/src/lib/active-view/table-races.svelte
+22 -22
View File
@@ -345,21 +345,21 @@ data fetching is performed here — the layout is responsible.
align-items: baseline; align-items: baseline;
} }
.summary-label { .summary-label {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.summary-value { .summary-value {
color: #e8eaf6; color: var(--color-text);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.vote-picker select { .vote-picker select {
font: inherit; font: inherit;
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
background: #0a0e1a; background: var(--color-bg);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
} }
.vote-picker select:disabled { .vote-picker select:disabled {
@@ -368,7 +368,7 @@ data fetching is performed here — the layout is responsible.
} }
.note { .note {
margin: 0; margin: 0;
color: #889; color: var(--color-text-muted);
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1.35; line-height: 1.35;
} }
@@ -381,16 +381,16 @@ data fetching is performed here — the layout is responsible.
.filter { .filter {
font: inherit; font: inherit;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
background: #0a0e1a; background: var(--color-bg);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
flex: 1 1 12rem; flex: 1 1 12rem;
min-width: 8rem; min-width: 8rem;
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -402,17 +402,17 @@ data fetching is performed here — the layout is responsible.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
.sort { .sort {
font: inherit; font: inherit;
@@ -441,22 +441,22 @@ data fetching is performed here — the layout is responsible.
letter-spacing: 0.05em; letter-spacing: 0.05em;
padding: 0.2rem 0.55rem; padding: 0.2rem 0.55rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.stance-button:hover { .stance-button:hover {
color: #e8eaf6; color: var(--color-text);
} }
.stance-button.war.active { .stance-button.war.active {
background: #4a1010; background: var(--color-danger-subtle);
color: #ffcaca; color: var(--color-danger);
border-color: #8a3030; border-color: var(--color-danger);
} }
.stance-button.peace.active { .stance-button.peace.active {
background: #103a1a; background: var(--color-success-subtle);
color: #c8f2cf; color: var(--color-success);
border-color: #2f7a45; border-color: var(--color-success);
} }
</style> </style>
ui/frontend/src/lib/active-view/table-sciences.svelte
+14 -14
View File
@@ -250,9 +250,9 @@ data fetching is performed here — the layout is responsible.
.filter { .filter {
font: inherit; font: inherit;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
background: #0a0e1a; background: var(--color-bg);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
flex: 1 1 12rem; flex: 1 1 12rem;
min-width: 8rem; min-width: 8rem;
@@ -262,18 +262,18 @@ data fetching is performed here — the layout is responsible.
font-size: 0.9rem; font-size: 0.9rem;
padding: 0.3rem 0.7rem; padding: 0.3rem 0.7rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.new:hover { .new:hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -285,11 +285,11 @@ data fetching is performed here — the layout is responsible.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
@@ -298,7 +298,7 @@ data fetching is performed here — the layout is responsible.
cursor: pointer; cursor: pointer;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
.sort { .sort {
font: inherit; font: inherit;
@@ -322,12 +322,12 @@ data fetching is performed here — the layout is responsible.
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.15rem 0.5rem; padding: 0.15rem 0.5rem;
background: transparent; background: transparent;
color: #d97a7a; color: var(--color-danger);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.delete:hover { .delete:hover {
border-color: #d97a7a; border-color: var(--color-danger);
} }
</style> </style>
ui/frontend/src/lib/active-view/table-ship-classes.svelte
+14 -14
View File
@@ -241,9 +241,9 @@ data fetching is performed here — the layout is responsible.
.filter { .filter {
font: inherit; font: inherit;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
background: #0a0e1a; background: var(--color-bg);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
flex: 1 1 12rem; flex: 1 1 12rem;
min-width: 8rem; min-width: 8rem;
@@ -253,18 +253,18 @@ data fetching is performed here — the layout is responsible.
font-size: 0.9rem; font-size: 0.9rem;
padding: 0.3rem 0.7rem; padding: 0.3rem 0.7rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.new:hover { .new:hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
.status { .status {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid { .grid {
@@ -276,11 +276,11 @@ data fetching is performed here — the layout is responsible.
.grid td { .grid td {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
text-align: left; text-align: left;
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
font-size: 0.9rem; font-size: 0.9rem;
} }
.grid th { .grid th {
color: #aab; color: var(--color-text-muted);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
font-size: 0.75rem; font-size: 0.75rem;
@@ -289,7 +289,7 @@ data fetching is performed here — the layout is responsible.
cursor: pointer; cursor: pointer;
} }
.grid tbody tr:hover { .grid tbody tr:hover {
background: #11172a; background: var(--color-surface);
} }
.sort { .sort {
font: inherit; font: inherit;
@@ -313,12 +313,12 @@ data fetching is performed here — the layout is responsible.
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.15rem 0.5rem; padding: 0.15rem 0.5rem;
background: transparent; background: transparent;
color: #d97a7a; color: var(--color-danger);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.delete:hover { .delete:hover {
border-color: #d97a7a; border-color: var(--color-danger);
} }
</style> </style>
ui/frontend/src/lib/active-view/table.svelte
+1 -1
View File
@@ -53,6 +53,6 @@ e2e specs (`game-shell.spec.ts`, `view-menu`) keep matching.
} }
.active-view p { .active-view p {
margin: 0; margin: 0;
color: #555; color: var(--color-text-muted);
} }
</style> </style>
ui/frontend/src/lib/battle-player/battle-viewer.svelte
+15 -15
View File
@@ -238,7 +238,7 @@ matching `pkg/model/report/battle.go` and it plays back.
min-height: 0; min-height: 0;
margin: 0 auto; margin: 0 auto;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
color: #d6dcf2; color: var(--color-text);
font-family: inherit; font-family: inherit;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -263,19 +263,19 @@ matching `pkg/model/report/battle.go` and it plays back.
} }
.back-btn { .back-btn {
appearance: none; appearance: none;
background: #1f2748; background: var(--color-surface-raised);
color: #d6dcf2; color: var(--color-text);
border: 1px solid #2c3568; border: 1px solid var(--color-border);
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
font-size: 0.8rem; font-size: 0.8rem;
} }
.back-btn:hover { .back-btn:hover {
background: #2a3463; background: var(--color-surface-hover);
} }
.progress { .progress {
color: #93a0d0; color: var(--color-text-muted);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-size: 0.85rem; font-size: 0.85rem;
flex: 0 0 auto; flex: 0 0 auto;
@@ -283,8 +283,8 @@ matching `pkg/model/report/battle.go` and it plays back.
text-align: right; text-align: right;
} }
.scene { .scene {
background: #0a0d1a; background: var(--color-bg);
border: 1px solid #1e264a; border: 1px solid var(--color-border-subtle);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
flex: 1 1 auto; flex: 1 1 auto;
@@ -294,7 +294,7 @@ matching `pkg/model/report/battle.go` and it plays back.
width: 100%; width: 100%;
margin: 0; margin: 0;
flex: 0 0 auto; flex: 0 0 auto;
accent-color: #6d7bb5; accent-color: var(--color-accent);
} }
.log { .log {
flex: 0 1 auto; flex: 0 1 auto;
@@ -306,7 +306,7 @@ matching `pkg/model/report/battle.go` and it plays back.
} }
.log h3 { .log h3 {
margin: 0 0 0.3rem; margin: 0 0 0.3rem;
color: #93a0d0; color: var(--color-text-muted);
font-size: 0.75rem; font-size: 0.75rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@@ -318,12 +318,12 @@ matching `pkg/model/report/battle.go` and it plays back.
padding: 0; padding: 0;
font-size: 0.85rem; font-size: 0.85rem;
overflow-y: auto; overflow-y: auto;
color: #c6cdf0; color: var(--color-text-muted);
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-height: 0;
} }
.log li { .log li {
border-bottom: 1px solid #1c2240; border-bottom: 1px solid var(--color-border-subtle);
} }
.log-row-btn { .log-row-btn {
display: block; display: block;
@@ -338,11 +338,11 @@ matching `pkg/model/report/battle.go` and it plays back.
} }
.log-row-btn:hover, .log-row-btn:hover,
.log-row-btn:focus-visible { .log-row-btn:focus-visible {
background: #131a36; background: var(--color-surface-hover);
} }
.log li[data-current="true"] .log-row-btn { .log li[data-current="true"] .log-row-btn {
color: #ffe27a; color: var(--color-accent);
font-weight: 600; font-weight: 600;
background: #1a2240; background: var(--color-accent-subtle);
} }
</style> </style>
ui/frontend/src/lib/battle-player/playback-controls.svelte
+7 -7
View File
@@ -119,8 +119,8 @@ nowhere to go and step-forward when the timeline is at its end.
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.4rem;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
background: #131934; background: var(--color-surface);
border: 1px solid #1e264a; border: 1px solid var(--color-border-subtle);
border-radius: 4px; border-radius: 4px;
} }
.spacer { .spacer {
@@ -128,9 +128,9 @@ nowhere to go and step-forward when the timeline is at its end.
} }
button { button {
appearance: none; appearance: none;
background: #1f2748; background: var(--color-surface-raised);
color: #d6dcf2; color: var(--color-text);
border: 1px solid #2c3568; border: 1px solid var(--color-border);
padding: 0.35rem 0.7rem; padding: 0.35rem 0.7rem;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
@@ -139,7 +139,7 @@ nowhere to go and step-forward when the timeline is at its end.
min-width: 2.5rem; min-width: 2.5rem;
} }
button:hover:not(:disabled) { button:hover:not(:disabled) {
background: #2a3463; background: var(--color-surface-hover);
} }
button:disabled { button:disabled {
opacity: 0.4; opacity: 0.4;
@@ -150,6 +150,6 @@ nowhere to go and step-forward when the timeline is at its end.
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.log-toggle.active { .log-toggle.active {
background: #2a3463; background: var(--color-surface-hover);
} }
</style> </style>
ui/frontend/src/lib/calculator/ship-design-area.svelte
+8 -8
View File
@@ -172,13 +172,13 @@ calculator math — so the ship-group upgrade flow can reuse it later.
gap: 0.35rem; gap: 0.35rem;
} }
.col-head { .col-head {
color: #8890b0; color: var(--color-text-muted);
font-size: 0.7rem; font-size: 0.7rem;
text-align: center; text-align: center;
text-transform: lowercase; text-transform: lowercase;
} }
.label { .label {
color: #aab; color: var(--color-text-muted);
font-size: 0.8rem; font-size: 0.8rem;
} }
input { input {
@@ -187,19 +187,19 @@ calculator math — so the ship-group upgrade flow can reuse it later.
width: 100%; width: 100%;
min-width: 0; min-width: 0;
padding: 0.2rem 0.35rem; padding: 0.2rem 0.35rem;
background: #0a0e1a; background: var(--color-bg);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
input[data-computed="true"], input[data-computed="true"],
input[readonly] { input[readonly] {
color: #9fb0ff; color: var(--color-accent);
background: #11162a; background: var(--color-surface-raised);
} }
input[aria-invalid="true"] { input[aria-invalid="true"] {
border-color: #d97a7a; border-color: var(--color-danger);
} }
.tech-cell { .tech-cell {
display: flex; display: flex;
ui/frontend/src/lib/header/history-banner.svelte
+5 -5
View File
@@ -51,9 +51,9 @@ budget.
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
padding: 0.4rem 0.9rem; padding: 0.4rem 0.9rem;
background: #2a2438; background: var(--color-surface);
color: #efe9c8; color: var(--color-warning);
border-bottom: 1px solid #45375a; border-bottom: 1px solid var(--color-border);
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -69,12 +69,12 @@ budget.
padding: 0.25rem 0.65rem; padding: 0.25rem 0.65rem;
background: transparent; background: transparent;
color: inherit; color: inherit;
border: 1px solid #6c5a8a; border: 1px solid var(--color-border-strong);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
} }
.return:hover { .return:hover {
background: #3a3050; background: var(--color-surface-hover);
} }
</style> </style>
ui/frontend/src/lib/header/turn-navigator.svelte
+9 -9
View File
@@ -177,14 +177,14 @@ Selecting a row calls `gameState.viewTurn(N)`; the row that matches
padding: 0.25rem 0.55rem; padding: 0.25rem 0.55rem;
background: transparent; background: transparent;
color: inherit; color: inherit;
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
line-height: 1; line-height: 1;
} }
.step:hover:not(:disabled), .step:hover:not(:disabled),
.trigger:hover:not(:disabled) { .trigger:hover:not(:disabled) {
background: #1c2238; background: var(--color-surface-hover);
} }
.step:disabled, .step:disabled,
.trigger:disabled { .trigger:disabled {
@@ -204,10 +204,10 @@ Selecting a row calls `gameState.viewTurn(N)`; the row that matches
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #14182a; background: var(--color-surface-overlay);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); box-shadow: var(--shadow-lg);
z-index: 50; z-index: 50;
} }
.row { .row {
@@ -224,11 +224,11 @@ Selecting a row calls `gameState.viewTurn(N)`; the row that matches
cursor: pointer; cursor: pointer;
} }
.row:hover { .row:hover {
background: #1c2238; background: var(--color-surface-hover);
} }
.row.viewed { .row.viewed {
font-weight: 600; font-weight: 600;
background: #1a2040; background: var(--color-surface-raised);
} }
.label { .label {
flex: 1; flex: 1;
@@ -243,8 +243,8 @@ Selecting a row calls `gameState.viewTurn(N)`; the row that matches
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
padding: 0.05rem 0.4rem; padding: 0.05rem 0.4rem;
background: #2a3150; background: var(--color-border);
color: #d8def0; color: var(--color-text);
border-radius: 999px; border-radius: 999px;
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
ui/frontend/src/lib/header/view-menu.svelte
+10 -10
View File
@@ -157,12 +157,12 @@ polishes microcopy.
padding: 0.25rem 0.6rem; padding: 0.25rem 0.6rem;
background: transparent; background: transparent;
color: inherit; color: inherit;
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
.trigger:hover { .trigger:hover {
background: #1c2238; background: var(--color-surface-hover);
} }
.icon-dropdown { .icon-dropdown {
display: inline; display: inline;
@@ -185,10 +185,10 @@ polishes microcopy.
min-width: 14rem; min-width: 14rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #14182a; background: var(--color-surface-overlay);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); box-shadow: var(--shadow-lg);
z-index: 50; z-index: 50;
} }
.surface > button, .surface > button,
@@ -213,12 +213,12 @@ polishes microcopy.
text-align: center; text-align: center;
font-size: 0.75rem; font-size: 0.75rem;
border-radius: 999px; border-radius: 999px;
background: #2a4d7d; background: var(--color-accent);
color: #fff; color: var(--color-accent-contrast);
} }
.surface > button:hover, .surface > button:hover,
.surface > details > summary:hover { .surface > details > summary:hover {
background: #1c2238; background: var(--color-surface-hover);
} }
.surface > details > summary { .surface > details > summary {
list-style: none; list-style: none;
@@ -238,7 +238,7 @@ polishes microcopy.
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: 0.5rem; padding-left: 0.5rem;
border-left: 1px solid #2a3150; border-left: 1px solid var(--color-border);
margin: 0 0.5rem 0.25rem; margin: 0 0.5rem 0.25rem;
} }
.sub > button { .sub > button {
@@ -251,7 +251,7 @@ polishes microcopy.
cursor: pointer; cursor: pointer;
} }
.sub > button:hover { .sub > button:hover {
background: #1c2238; background: var(--color-surface-hover);
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.surface { .surface {
ui/frontend/src/lib/inspectors/planet-sheet.svelte
+7 -7
View File
@@ -98,9 +98,9 @@ dismiss from the IA section §6 land in Phase 35 polish.
bottom: 3.25rem; bottom: 3.25rem;
max-height: calc(100vh - 6rem); max-height: calc(100vh - 6rem);
overflow-y: auto; overflow-y: auto;
background: #14182a; background: var(--color-surface-overlay);
color: #e8eaf6; color: var(--color-text);
border-top: 1px solid #2a3150; border-top: 1px solid var(--color-border);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
z-index: 40; z-index: 40;
} }
@@ -113,13 +113,13 @@ dismiss from the IA section §6 land in Phase 35 polish.
font-size: 1rem; font-size: 1rem;
padding: 0.2rem 0.55rem; padding: 0.2rem 0.55rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.close:hover { .close:hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
</style> </style>
ui/frontend/src/lib/inspectors/planet.svelte
+17 -17
View File
@@ -344,7 +344,7 @@ field with five buttons.
font-size: 0.75rem; font-size: 0.75rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: #aab; color: var(--color-text-muted);
} }
.name { .name {
margin: 0; margin: 0;
@@ -361,7 +361,7 @@ field with five buttons.
display: contents; display: contents;
} }
.field dt { .field dt {
color: #aab; color: var(--color-text-muted);
font-size: 0.85rem; font-size: 0.85rem;
} }
.field dd { .field dd {
@@ -371,7 +371,7 @@ field with five buttons.
} }
.hint { .hint {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.85rem; font-size: 0.85rem;
} }
.action { .action {
@@ -381,14 +381,14 @@ field with five buttons.
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.2rem 0.55rem; padding: 0.2rem 0.55rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.action:hover { .action:hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
.rename { .rename {
display: flex; display: flex;
@@ -397,23 +397,23 @@ field with five buttons.
} }
.rename-label { .rename-label {
font-size: 0.85rem; font-size: 0.85rem;
color: #aab; color: var(--color-text-muted);
} }
.rename-input { .rename-input {
font: inherit; font: inherit;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
background: #0a0e1a; background: var(--color-bg);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
} }
.rename-input[aria-invalid="true"] { .rename-input[aria-invalid="true"] {
border-color: #d97a7a; border-color: var(--color-danger);
} }
.rename-error { .rename-error {
margin: 0; margin: 0;
font-size: 0.8rem; font-size: 0.8rem;
color: #d97a7a; color: var(--color-danger);
} }
.rename-actions { .rename-actions {
display: flex; display: flex;
@@ -425,15 +425,15 @@ field with five buttons.
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.25rem 0.65rem; padding: 0.25rem 0.65rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.rename-confirm:not(:disabled):hover, .rename-confirm:not(:disabled):hover,
.rename-cancel:hover { .rename-cancel:hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
.rename-confirm:disabled { .rename-confirm:disabled {
cursor: not-allowed; cursor: not-allowed;
ui/frontend/src/lib/inspectors/planet/cargo-routes.svelte
+12 -12
View File
@@ -262,7 +262,7 @@ The component is purposely deferential to the existing infrastructure:
.title { .title {
margin: 0; margin: 0;
font-size: 0.85rem; font-size: 0.85rem;
color: #aab; color: var(--color-text-muted);
font-weight: 500; font-weight: 500;
} }
.slots { .slots {
@@ -276,7 +276,7 @@ The component is purposely deferential to the existing infrastructure:
display: contents; display: contents;
} }
.slot-label { .slot-label {
color: #aab; color: var(--color-text-muted);
font-size: 0.85rem; font-size: 0.85rem;
align-self: center; align-self: center;
} }
@@ -290,25 +290,25 @@ The component is purposely deferential to the existing infrastructure:
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.empty { .empty {
color: #888; color: var(--color-text-muted);
font-style: italic; font-style: italic;
} }
.destination { .destination {
color: #e8eaf6; color: var(--color-text);
} }
.action { .action {
font: inherit; font: inherit;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.15rem 0.5rem; padding: 0.15rem 0.5rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.action:not(:disabled):hover { .action:not(:disabled):hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
.action:disabled { .action:disabled {
cursor: not-allowed; cursor: not-allowed;
@@ -320,19 +320,19 @@ The component is purposely deferential to the existing infrastructure:
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
background: rgba(255, 224, 130, 0.1); background: var(--color-warning-subtle);
border: 1px solid #ffe082; border: 1px solid var(--color-warning);
border-radius: 4px; border-radius: 4px;
} }
.pick-message { .pick-message {
color: #ffe082; color: var(--color-warning);
font-size: 0.85rem; font-size: 0.85rem;
flex: 1; flex: 1;
} }
.no-destinations { .no-destinations {
margin: 0; margin: 0;
font-size: 0.8rem; font-size: 0.8rem;
color: #888; color: var(--color-text-muted);
font-style: italic; font-style: italic;
} }
</style> </style>
ui/frontend/src/lib/inspectors/planet/production.svelte
+9 -9
View File
@@ -322,7 +322,7 @@ they carry more user intent).
.title { .title {
margin: 0; margin: 0;
font-size: 0.85rem; font-size: 0.85rem;
color: #aab; color: var(--color-text-muted);
font-weight: 500; font-weight: 500;
} }
.row { .row {
@@ -339,21 +339,21 @@ they carry more user intent).
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.25rem 0.55rem; padding: 0.25rem 0.55rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.seg:not(:disabled):hover, .seg:not(:disabled):hover,
.sub-seg:not(:disabled):hover { .sub-seg:not(:disabled):hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
.seg.active, .seg.active,
.sub-seg.active { .sub-seg.active {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
background: rgba(109, 140, 255, 0.15); background: var(--color-accent-subtle);
} }
.seg:disabled, .seg:disabled,
.sub-seg:disabled { .sub-seg:disabled {
@@ -363,7 +363,7 @@ they carry more user intent).
.empty { .empty {
margin: 0; margin: 0;
font-size: 0.8rem; font-size: 0.8rem;
color: #888; color: var(--color-text-muted);
font-style: italic; font-style: italic;
} }
</style> </style>
ui/frontend/src/lib/inspectors/planet/ship-groups.svelte
+5 -5
View File
@@ -162,7 +162,7 @@ ship-groups table view with an additional `(planet, race)` filter.
font-size: 0.85rem; font-size: 0.85rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: #aab; color: var(--color-text-muted);
} }
.rows { .rows {
list-style: none; list-style: none;
@@ -195,17 +195,17 @@ ship-groups table view with an additional `(planet, race)` filter.
cursor: pointer; cursor: pointer;
} }
.select:hover { .select:hover {
border-color: #2a3150; border-color: var(--color-border);
background: #0d1224; background: var(--color-surface-hover);
} }
.race { .race {
font-weight: 600; font-weight: 600;
} }
.class { .class {
color: #cdd; color: var(--color-text-muted);
} }
.count, .count,
.mass { .mass {
color: #aab; color: var(--color-text-muted);
} }
</style> </style>
ui/frontend/src/lib/inspectors/ship-group-sheet.svelte
+7 -7
View File
@@ -90,9 +90,9 @@ mounted by the in-game shell layout only while the active tool is
bottom: 3.25rem; bottom: 3.25rem;
max-height: calc(100vh - 6rem); max-height: calc(100vh - 6rem);
overflow-y: auto; overflow-y: auto;
background: #14182a; background: var(--color-surface-overlay);
color: #e8eaf6; color: var(--color-text);
border-top: 1px solid #2a3150; border-top: 1px solid var(--color-border);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
z-index: 40; z-index: 40;
} }
@@ -105,13 +105,13 @@ mounted by the in-game shell layout only while the active tool is
font-size: 1rem; font-size: 1rem;
padding: 0.2rem 0.55rem; padding: 0.2rem 0.55rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.close:hover { .close:hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
</style> </style>
ui/frontend/src/lib/inspectors/ship-group.svelte
+3 -3
View File
@@ -267,7 +267,7 @@ variant — for Phase 19 the inspector is intentionally read-only.
font-size: 0.75rem; font-size: 0.75rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: #aab; color: var(--color-text-muted);
} }
.name { .name {
margin: 0; margin: 0;
@@ -284,7 +284,7 @@ variant — for Phase 19 the inspector is intentionally read-only.
display: contents; display: contents;
} }
.field dt { .field dt {
color: #aab; color: var(--color-text-muted);
font-size: 0.85rem; font-size: 0.85rem;
} }
.field dd { .field dd {
@@ -294,7 +294,7 @@ variant — for Phase 19 the inspector is intentionally read-only.
} }
.hint { .hint {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.85rem; font-size: 0.85rem;
} }
</style> </style>
ui/frontend/src/lib/inspectors/ship-group/actions.svelte
+21 -21
View File
@@ -1151,14 +1151,14 @@ modernize cost preview backed by `core.blockUpgradeCost`.
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.2rem 0.55rem; padding: 0.2rem 0.55rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.action:not(:disabled):hover { .action:not(:disabled):hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
.action:disabled { .action:disabled {
cursor: not-allowed; cursor: not-allowed;
@@ -1169,25 +1169,25 @@ modernize cost preview backed by `core.blockUpgradeCost`.
flex-direction: column; flex-direction: column;
gap: 0.4rem; gap: 0.4rem;
padding: 0.5rem; padding: 0.5rem;
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
background: #0d1224; background: var(--color-surface-raised);
} }
.form label { .form label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.2rem; gap: 0.2rem;
font-size: 0.85rem; font-size: 0.85rem;
color: #aab; color: var(--color-text-muted);
} }
.form input[type="number"], .form input[type="number"],
.form input[type="text"], .form input[type="text"],
.form select { .form select {
font: inherit; font: inherit;
padding: 0.25rem 0.4rem; padding: 0.25rem 0.4rem;
background: #0a0e1a; background: var(--color-bg);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
} }
.form .destination-readonly { .form .destination-readonly {
@@ -1199,7 +1199,7 @@ modernize cost preview backed by `core.blockUpgradeCost`.
font-size: 0.85rem; font-size: 0.85rem;
} }
.form .destination-readonly .label { .form .destination-readonly .label {
color: #aab; color: var(--color-text-muted);
} }
.form-actions { .form-actions {
display: flex; display: flex;
@@ -1211,14 +1211,14 @@ modernize cost preview backed by `core.blockUpgradeCost`.
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.25rem 0.65rem; padding: 0.25rem 0.65rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.form-actions button.primary { .form-actions button.primary {
color: #e8eaf6; color: var(--color-text);
border-color: #4f6dd9; border-color: var(--color-accent);
} }
.form-actions button:disabled { .form-actions button:disabled {
cursor: not-allowed; cursor: not-allowed;
@@ -1227,25 +1227,25 @@ modernize cost preview backed by `core.blockUpgradeCost`.
.preview { .preview {
margin: 0; margin: 0;
font-size: 0.85rem; font-size: 0.85rem;
color: #aab; color: var(--color-text-muted);
} }
.warning { .warning {
margin: 0; margin: 0;
font-size: 0.85rem; font-size: 0.85rem;
color: #d9a07a; color: var(--color-warning);
} }
.locked { .locked {
margin: 0; margin: 0;
padding: 0.4rem 0.55rem; padding: 0.4rem 0.55rem;
font-size: 0.85rem; font-size: 0.85rem;
color: #aab; color: var(--color-text-muted);
background: #14182a; background: var(--color-surface-overlay);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
} }
.hint { .hint {
margin: 0; margin: 0;
font-size: 0.8rem; font-size: 0.8rem;
color: #888; color: var(--color-text-muted);
} }
</style> </style>
ui/frontend/src/lib/sidebar/calculator-tab.svelte
+37 -37
View File
@@ -690,15 +690,15 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.25rem; padding: 0.25rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.modes button.active { .modes button.active {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
background: #11162a; background: var(--color-surface-raised);
} }
.namebar { .namebar {
display: flex; display: flex;
@@ -710,13 +710,13 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
font: inherit; font: inherit;
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.25rem 0.4rem; padding: 0.25rem 0.4rem;
background: #0a0e1a; background: var(--color-bg);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
} }
.name[aria-invalid="true"] { .name[aria-invalid="true"] {
border-color: #d97a7a; border-color: var(--color-danger);
} }
.create, .create,
.delete { .delete {
@@ -724,21 +724,21 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.25rem 0.55rem; padding: 0.25rem 0.55rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.create:not(:disabled):hover { .create:not(:disabled):hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
.create:disabled { .create:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
.delete { .delete {
color: #d97a7a; color: var(--color-danger);
align-self: flex-start; align-self: flex-start;
} }
.load { .load {
@@ -755,23 +755,23 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
font-size: 0.75rem; font-size: 0.75rem;
padding: 0.15rem 0.4rem; padding: 0.15rem 0.4rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.seg button.active { .seg button.active {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
.custom-load { .custom-load {
width: 4rem; width: 4rem;
font: inherit; font: inherit;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.15rem 0.3rem; padding: 0.15rem 0.3rem;
background: #0a0e1a; background: var(--color-bg);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
} }
.results, .results,
@@ -787,12 +787,12 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
gap: 0.35rem; gap: 0.35rem;
} }
.col-head { .col-head {
color: #8890b0; color: var(--color-text-muted);
font-size: 0.7rem; font-size: 0.7rem;
text-align: center; text-align: center;
} }
.label { .label {
color: #aab; color: var(--color-text-muted);
font-size: 0.8rem; font-size: 0.8rem;
} }
.cell { .cell {
@@ -812,20 +812,20 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
font: inherit; font: inherit;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.15rem 0.3rem; padding: 0.15rem 0.3rem;
background: #0a0e1a; background: var(--color-bg);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
text-align: right; text-align: right;
} }
.cell.locked input { .cell.locked input {
color: #9fb0ff; color: var(--color-accent);
border-color: #6d8cff; border-color: var(--color-accent);
} }
.cell.infeasible input { .cell.infeasible input {
border-color: #d97a7a; border-color: var(--color-danger);
color: #f0a0a0; color: var(--color-danger);
} }
.lock { .lock {
flex: none; flex: none;
@@ -846,7 +846,7 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
opacity: 0.2; opacity: 0.2;
} }
.planet { .planet {
border-top: 1px solid #20253a; border-top: 1px solid var(--color-border-subtle);
padding-top: 0.5rem; padding-top: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -854,13 +854,13 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
} }
.hint { .hint {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
font-size: 0.8rem; font-size: 0.8rem;
} }
.planet-name { .planet-name {
margin: 0; margin: 0;
font-size: 0.8rem; font-size: 0.8rem;
color: #cdd3f0; color: var(--color-text);
} }
.planet-stats { .planet-stats {
margin: 0; margin: 0;
@@ -873,7 +873,7 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
display: contents; display: contents;
} }
.planet-stats dt { .planet-stats dt {
color: #aab; color: var(--color-text-muted);
font-size: 0.8rem; font-size: 0.8rem;
} }
.planet-stats dd { .planet-stats dd {
@@ -884,11 +884,11 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
} }
.rrow.total .label { .rrow.total .label {
grid-column: 1 / 3; grid-column: 1 / 3;
color: #cdd3f0; color: var(--color-text);
white-space: nowrap; white-space: nowrap;
} }
input[aria-invalid="true"] { input[aria-invalid="true"] {
border-color: #d97a7a; border-color: var(--color-danger);
} }
.seg button:disabled { .seg button:disabled {
opacity: 0.4; opacity: 0.4;
@@ -897,6 +897,6 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
.full-capacity { .full-capacity {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
font-size: 0.8rem; font-size: 0.8rem;
color: #9fb0ff; color: var(--color-accent);
} }
</style> </style>
ui/frontend/src/lib/sidebar/inspector-tab.svelte
+1 -1
View File
@@ -157,6 +157,6 @@ from the Phase 10 stub.
.tool > p { .tool > p {
margin: 0; margin: 0;
padding: 0 1rem 1rem; padding: 0 1rem 1rem;
color: #888; color: var(--color-text-muted);
} }
</style> </style>
ui/frontend/src/lib/sidebar/order-tab.svelte
+37 -37
View File
@@ -264,7 +264,7 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
} }
.empty { .empty {
margin: 0; margin: 0;
color: #888; color: var(--color-text-muted);
} }
.commands { .commands {
list-style: none; list-style: none;
@@ -280,12 +280,12 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.4rem 0.5rem; padding: 0.4rem 0.5rem;
background: #14182a; background: var(--color-surface-overlay);
border: 1px solid #20253a; border: 1px solid var(--color-border-subtle);
border-radius: 4px; border-radius: 4px;
} }
.index { .index {
color: #aab; color: var(--color-text-muted);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.label { .label {
@@ -300,28 +300,28 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
letter-spacing: 0.04em; letter-spacing: 0.04em;
padding: 0.1rem 0.4rem; padding: 0.1rem 0.4rem;
border-radius: 999px; border-radius: 999px;
border: 1px solid #2a3150; border: 1px solid var(--color-border);
color: #aab; color: var(--color-text-muted);
} }
.status-applied { .status-applied {
color: #8be9a3; color: var(--color-success);
border-color: #2f6d3f; border-color: var(--color-success);
} }
.status-rejected { .status-rejected {
color: #d97a7a; color: var(--color-danger);
border-color: #6d2f2f; border-color: var(--color-danger);
} }
.status-invalid { .status-invalid {
color: #d6b86c; color: var(--color-warning);
border-color: #6d562f; border-color: var(--color-warning);
} }
.status-submitting { .status-submitting {
color: #6d8cff; color: var(--color-accent);
border-color: #2f3f6d; border-color: var(--color-border);
} }
.status-conflict { .status-conflict {
color: #d99a4b; color: var(--color-warning);
border-color: #6d4a2f; border-color: var(--color-warning);
} }
.banner { .banner {
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
@@ -331,28 +331,28 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
line-height: 1.3; line-height: 1.3;
} }
.banner-conflict { .banner-conflict {
color: #f1bf78; color: var(--color-warning);
background: #2a1f10; background: var(--color-warning-subtle);
border: 1px solid #6d4a2f; border: 1px solid var(--color-warning);
} }
.banner-paused { .banner-paused {
color: #d4d4d4; color: var(--color-text-muted);
background: #1a1f2a; background: var(--color-surface);
border: 1px solid #2f3f55; border: 1px solid var(--color-border);
} }
.delete { .delete {
font: inherit; font: inherit;
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.2rem 0.55rem; padding: 0.2rem 0.55rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.delete:hover { .delete:hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
.sync { .sync {
display: flex; display: flex;
@@ -360,38 +360,38 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
justify-content: space-between; justify-content: space-between;
gap: 0.5rem; gap: 0.5rem;
font-size: 0.8rem; font-size: 0.8rem;
color: #aab; color: var(--color-text-muted);
} }
.sync-error { .sync-error {
color: #d97a7a; color: var(--color-danger);
} }
.sync-synced { .sync-synced {
color: #8be9a3; color: var(--color-success);
} }
.sync-syncing { .sync-syncing {
color: #6d8cff; color: var(--color-accent);
} }
.sync-offline { .sync-offline {
color: #b9a566; color: var(--color-warning);
} }
.sync-conflict { .sync-conflict {
color: #d99a4b; color: var(--color-warning);
} }
.sync-paused { .sync-paused {
color: #d4d4d4; color: var(--color-text-muted);
} }
.sync-retry { .sync-retry {
font: inherit; font: inherit;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.15rem 0.5rem; padding: 0.15rem 0.5rem;
background: transparent; background: transparent;
color: #aab; color: var(--color-text-muted);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.sync-retry:hover { .sync-retry:hover {
color: #e8eaf6; color: var(--color-text);
border-color: #6d8cff; border-color: var(--color-accent);
} }
</style> </style>
ui/frontend/src/lib/toast-host.svelte
+6 -6
View File
@@ -69,9 +69,9 @@ active so the surrounding shell layout is not perturbed.
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
padding: 0.6rem 0.85rem; padding: 0.6rem 0.85rem;
background: #1a2034; background: var(--color-surface-overlay);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2c3354; border: 1px solid var(--color-border);
border-radius: 0.5rem; border-radius: 0.5rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
font-size: 0.9rem; font-size: 0.9rem;
@@ -82,7 +82,7 @@ active so the surrounding shell layout is not perturbed.
} }
.toast-action { .toast-action {
background: transparent; background: transparent;
color: #8ab4f8; color: var(--color-accent);
border: none; border: none;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
@@ -96,7 +96,7 @@ active so the surrounding shell layout is not perturbed.
} }
.toast-close { .toast-close {
background: transparent; background: transparent;
color: #94a3b8; color: var(--color-text-muted);
border: none; border: none;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1; line-height: 1;
@@ -104,6 +104,6 @@ active so the surrounding shell layout is not perturbed.
padding: 0 0.25rem; padding: 0 0.25rem;
} }
.toast-close:hover { .toast-close:hover {
color: #e8eaf6; color: var(--color-text);
} }
</style> </style>
ui/frontend/src/routes/__debug/map/+page.svelte
+9 -9
View File
@@ -168,15 +168,15 @@
height: 100vh; height: 100vh;
margin: 0; margin: 0;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
color: #e8eaf6; color: var(--color-text);
background: #0a0e1a; background: var(--color-bg);
} }
header { header {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
border-bottom: 1px solid #20253a; border-bottom: 1px solid var(--color-border-subtle);
} }
h1 { h1 {
margin: 0; margin: 0;
@@ -190,15 +190,15 @@
} }
button { button {
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
background: #1c2238; background: var(--color-surface-hover);
color: #e8eaf6; color: var(--color-text);
border: 1px solid #2a3150; border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
} }
button:hover { button:hover {
background: #232b48; background: var(--color-surface-hover);
} }
.canvas-wrap { .canvas-wrap {
flex: 1; flex: 1;
@@ -212,7 +212,7 @@
} }
.error { .error {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: #4a1820; background: var(--color-danger-subtle);
color: #ffb4b4; color: var(--color-danger);
} }
</style> </style>
ui/frontend/src/routes/lobby/+page.svelte
+8 -8
View File
@@ -526,9 +526,9 @@
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
padding: 0.75rem; padding: 0.75rem;
border: 1px solid #ccc; border: 1px solid var(--color-border);
border-radius: 0.4rem; border-radius: 0.4rem;
background: #fafafa; background: var(--color-surface-raised);
text-align: left; text-align: left;
font: inherit; font: inherit;
cursor: pointer; cursor: pointer;
@@ -537,8 +537,8 @@
button.card:disabled { button.card:disabled {
cursor: not-allowed; cursor: not-allowed;
color: #777; color: var(--color-text-faint);
background: #f0f0f0; background: var(--color-surface);
} }
li.card { li.card {
@@ -546,7 +546,7 @@
} }
.meta { .meta {
color: #555; color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -554,7 +554,7 @@
align-self: flex-start; align-self: flex-start;
padding: 0.1rem 0.5rem; padding: 0.1rem 0.5rem;
border-radius: 999px; border-radius: 999px;
background: #e7e7e7; background: var(--color-surface-raised);
font-size: 0.8rem; font-size: 0.8rem;
} }
@@ -587,9 +587,9 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.4rem 0.75rem; padding: 0.4rem 0.75rem;
border: 1px dashed #888; border: 1px dashed var(--color-text-muted);
border-radius: 0.4rem; border-radius: 0.4rem;
background: #f7f7f7; background: var(--color-surface-raised);
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
} }
ui/frontend/src/routes/lobby/create/+page.svelte
+2 -2
View File
@@ -263,7 +263,7 @@
} }
details { details {
border: 1px solid #ddd; border: 1px solid var(--color-border);
border-radius: 0.4rem; border-radius: 0.4rem;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
display: flex; display: flex;
@@ -287,6 +287,6 @@
} }
small { small {
color: #666; color: var(--color-text-muted);
} }
</style> </style>
ui/frontend/src/routes/login/+page.svelte
+1 -1
View File
@@ -351,6 +351,6 @@
[role="alert"] { [role="alert"] {
margin-top: 1rem; margin-top: 1rem;
color: #b00020; color: var(--color-danger);
} }
</style> </style>