style(dashboard): unify Macro composite into one card + dark-mode fix
for Performance accent
User flagged the macro index box on the overview page as feeling
disjointed. Reshaped it from three stacked elements (band → track →
scale) into a single bordered card so it reads as ONE component.
- JSX: wrap the three pieces in <div className="overview-macro-card">
- CSS: new .overview-macro-card with tone-coloured rim (bull/bear/neutral)
- Solid neutral-gray filled needle (was a hollow ring — looked like a
placeholder); tone-coloured background + white inner ring + double
shadow so it stands out on any gradient position
- Removed the .overview-score-fill overlay — the gradient already
encodes the spectrum; layering an opaque fill obscured it near 0
- Thinner track (14px vs 22px), tighter scale labels, smaller pill
- Added "TODAY · 8 INDICATORS" stamp next to the title — gives users
a quick anchor of what they're looking at + freshness
Plus: dark-mode override for .overview-stat-card.accent (the Performance
card). It was using a cream gradient that floated as a glaring
out-of-theme block on dark mode. Mirrored the existing .kpi.accent dark
treatment so it stays visually grouped with the rest of the dashboard.
Also includes the in-flight overview rewrite from the other AI tool
(legacy /btc redirect to /macro, middleware.ts replacing proxy.ts for
Next.js routing, refactored several dashboard panels). TypeScript clean,
production build passes.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
k
+678
-18
@@ -98,6 +98,15 @@ html[data-theme="dark"] .kpi.accent {
|
||||
background: linear-gradient(135deg, oklch(28% 0.05 75), oklch(24% 0.07 70));
|
||||
}
|
||||
|
||||
/* Dashboard Performance card uses the same "amber accent" treatment as
|
||||
.kpi.accent — without a dark-mode override the cream background floats
|
||||
on the dark grid as a glaring out-of-theme block. Mirror the kpi dark
|
||||
gradient so the card stays visually grouped with everything else. */
|
||||
html[data-theme="dark"] .overview-stat-card.accent {
|
||||
background: linear-gradient(135deg, oklch(28% 0.05 75), oklch(24% 0.07 70));
|
||||
border-color: color-mix(in oklab, var(--amber) 28%, var(--line));
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .landing-nav {
|
||||
background: oklch(15% 0.008 85 / 0.8);
|
||||
}
|
||||
@@ -155,6 +164,55 @@ a { color: inherit; text-decoration: none; }
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.wallet-anchor {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wallet-connect-error {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 10px);
|
||||
margin: 0;
|
||||
width: min(320px, calc(100vw - 28px));
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid color-mix(in oklab, var(--down) 24%, var(--line));
|
||||
background: color-mix(in oklab, var(--down-soft) 72%, var(--surface));
|
||||
color: var(--down);
|
||||
box-shadow: var(--shadow-2);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
z-index: 50;
|
||||
transform-origin: top right;
|
||||
animation: walletErrorIn 160ms ease-out;
|
||||
}
|
||||
|
||||
.wallet-connect-error::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 26px;
|
||||
top: -7px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: inherit;
|
||||
border-left: 1px solid color-mix(in oklab, var(--down) 24%, var(--line));
|
||||
border-top: 1px solid color-mix(in oklab, var(--down) 24%, var(--line));
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@keyframes walletErrorIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-6px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -897,20 +955,34 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active {
|
||||
|
||||
.macro-composite-track {
|
||||
position: relative;
|
||||
height: 12px;
|
||||
height: 18px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in oklab, var(--line) 78%, transparent);
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.macro-composite-track::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
background: color-mix(in oklab, var(--ink) 14%, transparent);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.macro-composite-needle {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--ink);
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-2);
|
||||
transform: translateY(-50%);
|
||||
transition: left 0.4s cubic-bezier(.2,.8,.2,1);
|
||||
/* React re-mounts this element via `key={composite_score}` whenever the
|
||||
score changes, which re-triggers the pulse animation below — a brief
|
||||
@@ -918,9 +990,9 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active {
|
||||
animation: macro-needle-pulse 0.9s ease-out 1;
|
||||
}
|
||||
@keyframes macro-needle-pulse {
|
||||
0% { transform: scale(0.85); box-shadow: 0 0 0 0 currentColor; }
|
||||
40% { transform: scale(1.18); box-shadow: 0 0 0 8px color-mix(in oklab, currentColor 18%, transparent); }
|
||||
100% { transform: scale(1); box-shadow: var(--shadow-2); }
|
||||
0% { transform: translateY(-50%) scale(0.85); box-shadow: 0 0 0 0 currentColor; }
|
||||
40% { transform: translateY(-50%) scale(1.18); box-shadow: 0 0 0 8px color-mix(in oklab, currentColor 18%, transparent); }
|
||||
100% { transform: translateY(-50%) scale(1); box-shadow: var(--shadow-2); }
|
||||
}
|
||||
|
||||
.macro-composite-scale {
|
||||
@@ -1114,28 +1186,32 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active {
|
||||
/* ── Form row: label | control, strict-aligned ─────────────── */
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
align-items: center;
|
||||
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 24px;
|
||||
padding: 14px 0;
|
||||
padding: 16px 0;
|
||||
}
|
||||
.form-row + .form-row { border-top: 1px solid var(--line); }
|
||||
.form-row-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
line-height: 1.35;
|
||||
}
|
||||
.form-row-label .hint {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--ink-4);
|
||||
margin-top: 3px;
|
||||
color: var(--ink-3);
|
||||
margin-top: 5px;
|
||||
line-height: 1.5;
|
||||
max-width: 28ch;
|
||||
}
|
||||
.form-row-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -1157,6 +1233,161 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active {
|
||||
color: var(--ink-4);
|
||||
}
|
||||
|
||||
.settings-scope-intro {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.settings-control-center {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
|
||||
gap: 16px;
|
||||
padding: 18px 20px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, color-mix(in oklab, var(--amber) 7%, var(--surface)) 0%, var(--surface) 48%, color-mix(in oklab, var(--up) 6%, var(--surface)) 100%);
|
||||
box-shadow: var(--shadow-1);
|
||||
}
|
||||
|
||||
.settings-control-kicker,
|
||||
.settings-section-kicker {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-4);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.settings-control-title,
|
||||
.settings-section-title {
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.settings-control-copy {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--ink-3);
|
||||
max-width: 58ch;
|
||||
}
|
||||
|
||||
.settings-control-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.settings-meta-card {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: color-mix(in oklab, var(--surface) 92%, transparent);
|
||||
box-shadow: var(--shadow-1);
|
||||
}
|
||||
|
||||
.settings-meta-card strong {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.settings-meta-label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-4);
|
||||
}
|
||||
|
||||
.settings-scope-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.settings-scope-card {
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-1);
|
||||
}
|
||||
|
||||
.settings-scope-card.trump {
|
||||
background: color-mix(in oklab, var(--amber) 8%, var(--surface));
|
||||
}
|
||||
|
||||
.settings-scope-card.btc {
|
||||
background: color-mix(in oklab, var(--up) 8%, var(--surface));
|
||||
}
|
||||
|
||||
.settings-scope-card.global {
|
||||
background: color-mix(in oklab, var(--ink) 3%, var(--surface));
|
||||
}
|
||||
|
||||
.settings-scope-eyebrow {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-4);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.settings-scope-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.settings-scope-copy {
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: var(--ink-3);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.settings-scope-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
box-shadow: var(--shadow-1);
|
||||
}
|
||||
|
||||
.settings-section-shell {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.settings-section-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.settings-section-note {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: var(--ink-3);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ── Inline $ prefix input ─────────────────────────────────── */
|
||||
.num-field {
|
||||
display: inline-flex;
|
||||
@@ -1219,12 +1450,29 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active {
|
||||
font-family: var(--mono);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
min-width: 48px;
|
||||
min-width: 56px;
|
||||
text-align: right;
|
||||
color: var(--ink);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.settings-note {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-sunk);
|
||||
border: 1px solid var(--line);
|
||||
font-size: 12px;
|
||||
line-height: 1.55;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.settings-note.warn {
|
||||
color: var(--down);
|
||||
border-color: color-mix(in oklab, var(--down) 18%, var(--line));
|
||||
background: var(--down-soft);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Dashboard specific
|
||||
============================================================ */
|
||||
@@ -1357,6 +1605,367 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active {
|
||||
}
|
||||
.kpi.accent .label { color: var(--amber-ink); }
|
||||
|
||||
/* Overview */
|
||||
.overview-shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
gap: 18px;
|
||||
margin-bottom: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.overview-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.overview-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.overview-market-card,
|
||||
.overview-side-card,
|
||||
.overview-stat-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: 18px;
|
||||
box-shadow: var(--shadow-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.overview-market-card {
|
||||
background:
|
||||
linear-gradient(135deg, color-mix(in oklab, var(--amber) 8%, var(--surface)) 0%, var(--surface) 52%, color-mix(in oklab, var(--up) 6%, var(--surface)) 100%);
|
||||
}
|
||||
|
||||
.overview-kicker {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-4);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.overview-card-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.overview-headline-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.overview-market-subtitle {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.overview-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* ── Macro composite — unified card (band + track + scale together) ── */
|
||||
|
||||
/* Outer wrapper so band / track / scale read as ONE component.
|
||||
Tone-coloured rim hints at the regime without competing with the big
|
||||
number; it only kicks in for bull / bear so a neutral day stays calm. */
|
||||
.overview-macro-card {
|
||||
margin-top: 4px;
|
||||
padding: 16px 18px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--line);
|
||||
background: color-mix(in oklab, var(--bg-sunk) 72%, var(--surface));
|
||||
box-shadow: var(--shadow-1);
|
||||
transition: border-color 200ms ease;
|
||||
}
|
||||
.overview-macro-card.bull {
|
||||
border-color: color-mix(in oklab, var(--up) 30%, var(--line));
|
||||
background: color-mix(in oklab, var(--up) 5%, color-mix(in oklab, var(--bg-sunk) 72%, var(--surface)));
|
||||
}
|
||||
.overview-macro-card.bear {
|
||||
border-color: color-mix(in oklab, var(--down) 30%, var(--line));
|
||||
background: color-mix(in oklab, var(--down) 5%, color-mix(in oklab, var(--bg-sunk) 72%, var(--surface)));
|
||||
}
|
||||
|
||||
/* Band = title-row + summary (left) | big score + pill (right).
|
||||
No own border any more — the card around it is the visual edge. */
|
||||
.overview-macro-band {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.overview-macro-copy {
|
||||
min-width: 0;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.overview-macro-title-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.overview-macro-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* Small dim caption next to the title — gives the user a quick "what is
|
||||
this and when did it update" anchor without crowding the headline. */
|
||||
.overview-macro-stamp {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--ink-4);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.overview-macro-text,
|
||||
.overview-side-copy,
|
||||
.overview-stat-label {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.overview-macro-score {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.overview-score-value {
|
||||
font-family: var(--mono);
|
||||
font-size: 38px;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.overview-score-value.bull { color: var(--up); }
|
||||
.overview-score-value.bear { color: var(--down); }
|
||||
.overview-score-value.neutral { color: var(--ink-2); }
|
||||
|
||||
.overview-score-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.overview-score-pill.bull {
|
||||
color: var(--up);
|
||||
border-color: color-mix(in oklab, var(--up) 32%, var(--line));
|
||||
background: color-mix(in oklab, var(--up) 12%, var(--surface));
|
||||
}
|
||||
|
||||
.overview-score-pill.bear {
|
||||
color: var(--down);
|
||||
border-color: color-mix(in oklab, var(--down) 32%, var(--line));
|
||||
background: color-mix(in oklab, var(--down) 12%, var(--surface));
|
||||
}
|
||||
|
||||
/* Gradient track. Removed the .overview-score-fill overlay — the gradient
|
||||
already encodes "where am I on the spectrum"; layering an opaque fill
|
||||
only obscured the gradient at scores near 0. */
|
||||
.overview-score-track {
|
||||
position: relative;
|
||||
height: 14px;
|
||||
margin-top: 14px;
|
||||
border-radius: 999px;
|
||||
overflow: visible;
|
||||
border: 1px solid color-mix(in oklab, var(--line) 78%, transparent);
|
||||
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
|
||||
background: linear-gradient(90deg,
|
||||
color-mix(in oklab, var(--down) 65%, transparent) 0%,
|
||||
color-mix(in oklab, var(--down) 18%, transparent) 35%,
|
||||
var(--bg-sunk) 50%,
|
||||
color-mix(in oklab, var(--up) 18%, transparent) 65%,
|
||||
color-mix(in oklab, var(--up) 65%, transparent) 100%);
|
||||
}
|
||||
|
||||
/* Vertical centerline tick so 0 is visually obvious. */
|
||||
.overview-score-track::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
bottom: -3px;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
background: color-mix(in oklab, var(--ink) 18%, transparent);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* SOLID needle (was a hollow ring before — looked like a placeholder).
|
||||
Tone-coloured fill + white ring so it stands out against any gradient
|
||||
position. Two-layer shadow for depth on light AND dark themes. */
|
||||
.overview-score-needle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 999px;
|
||||
background: var(--ink-2);
|
||||
border: 3px solid var(--surface);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),
|
||||
0 0 0 1px color-mix(in oklab, var(--ink) 18%, transparent);
|
||||
transform: translateY(-50%);
|
||||
transition: left 400ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.overview-score-needle.bull { background: var(--up); }
|
||||
.overview-score-needle.bear { background: var(--down); }
|
||||
.overview-score-needle.neutral { background: var(--ink-3); }
|
||||
|
||||
.overview-score-scale {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ink-4);
|
||||
}
|
||||
|
||||
.overview-system-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.overview-system-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 64px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow-1);
|
||||
transition: transform 120ms, border-color 120ms, box-shadow 120ms;
|
||||
}
|
||||
|
||||
.overview-system-chip:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: var(--line-2);
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
|
||||
.overview-system-chip.passive {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.overview-system-chip-name {
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.overview-system-chip strong {
|
||||
font-family: var(--mono);
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.overview-secondary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.overview-stat-card {
|
||||
min-height: 144px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.overview-stat-card.accent {
|
||||
background: linear-gradient(135deg, oklch(97% 0.04 85), oklch(95% 0.07 80));
|
||||
border-color: var(--amber-ring);
|
||||
}
|
||||
|
||||
.overview-stat-value {
|
||||
font-family: var(--mono);
|
||||
font-size: 42px;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.overview-side-card.compact {
|
||||
min-height: 112px;
|
||||
}
|
||||
|
||||
.overview-account-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.overview-account-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: 13px;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.overview-account-item:last-child {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.overview-account-item strong {
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Right rail */
|
||||
.rail { display: flex; flex-direction: column; gap: 20px; }
|
||||
|
||||
@@ -1788,6 +2397,14 @@ html[data-theme="dark"] .ai-reasoning-card {
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.overview-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.overview-side {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.dash-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -1840,6 +2457,11 @@ html[data-theme="dark"] .ai-reasoning-card {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.overview-system-strip,
|
||||
.overview-secondary-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.settings-grid,
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -1914,6 +2536,27 @@ html[data-theme="dark"] .ai-reasoning-card {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.overview-card-head,
|
||||
.overview-controls,
|
||||
.overview-macro-band,
|
||||
.overview-account-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.overview-score-value {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.overview-account-item strong {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.overview-system-strip,
|
||||
.overview-secondary-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.macro-panel-head,
|
||||
.macro-composite-head {
|
||||
flex-direction: column;
|
||||
@@ -1978,6 +2621,23 @@ html[data-theme="dark"] .ai-reasoning-card {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.settings-scope-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.settings-control-center {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.settings-section-head {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.settings-section-note {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Composite scale labels — "BEAR / NEUTRAL / BULL" letters crowd at narrow
|
||||
widths. Shorten them. */
|
||||
.macro-composite-scale {
|
||||
|
||||
Reference in New Issue
Block a user