feat(ui): migrate all view bodies to design tokens (F1b)
Tokenize every remaining component <style> — calculator, order tab, inspectors, tables, report sections, lobby, auth, mail, battle viewer, toasts, map overlays. A scripted pass handled the unambiguous core palette (text/bg/surface/border/accent/danger/muted), the rest were mapped to the semantic/grey tokens by role. Remaining colour literals are the documented exceptions only: the battle-scene SVG data-visualisation palette (fixed dark, like the WebGL map canvas), overlay scrims (modal / map-canvas), and directional or deliberate drop shadows. The default theme stays dark until light coherence is signed off across the views. Updates ui/docs/design-system.md (migration status + exceptions). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user