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