tegwick
da3b7d66f0
Vendor whynot-design Layer 1 (tokens, CSS) and Layer 2 (<wn-*> components) via scripts/sync-whynot-design.sh with a pinned ref. Migrate the observatory shell to canonical web components, keep observatory-specific layout in styles.css, and add vendor integrity tests plus correct JS MIME types on the dev server.
196 lines
No EOL
3.3 KiB
CSS
196 lines
No EOL
3.3 KiB
CSS
/* Observatory layout — extends whynot-design (Layer 1). No gradients, no shadows on cards. */
|
|
|
|
body {
|
|
background: var(--paper);
|
|
}
|
|
|
|
.obs-main {
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
padding: var(--sp-6) var(--sp-5) var(--sp-9);
|
|
}
|
|
|
|
.obs-period {
|
|
display: grid;
|
|
gap: 6px;
|
|
min-width: 132px;
|
|
}
|
|
|
|
wn-top-nav [slot="right"] {
|
|
display: flex;
|
|
align-items: end;
|
|
gap: var(--sp-3);
|
|
}
|
|
|
|
.obs-section {
|
|
margin-bottom: var(--sp-7);
|
|
}
|
|
|
|
.obs-section__head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--sp-3);
|
|
margin-bottom: var(--sp-4);
|
|
}
|
|
|
|
.obs-section__rule {
|
|
flex: 1;
|
|
border-top: 1px solid var(--border-soft);
|
|
}
|
|
|
|
.obs-section-note {
|
|
margin: 0 0 var(--sp-4);
|
|
max-width: 60ch;
|
|
}
|
|
|
|
.obs-metric-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--sp-3);
|
|
}
|
|
|
|
.obs-metric__value {
|
|
font: 500 28px/1.1 var(--ff-sans);
|
|
letter-spacing: -0.02em;
|
|
color: var(--fg-1);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.obs-budget-meter {
|
|
height: 8px;
|
|
border: 1px solid var(--border);
|
|
background: var(--paper-2);
|
|
margin-bottom: var(--sp-4);
|
|
}
|
|
|
|
.obs-budget-meter__fill {
|
|
height: 100%;
|
|
width: 0;
|
|
background: var(--ink);
|
|
transition: width 0.25s ease;
|
|
}
|
|
|
|
.obs-field-sheet {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-2);
|
|
background: var(--paper);
|
|
padding: 0 var(--sp-4);
|
|
}
|
|
|
|
.obs-split {
|
|
display: grid;
|
|
grid-template-columns: 1.35fr 1fr;
|
|
gap: var(--sp-6);
|
|
margin-bottom: var(--sp-2);
|
|
}
|
|
|
|
.obs-liquidity-list {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-2);
|
|
background: var(--paper);
|
|
padding: 0 var(--sp-4);
|
|
}
|
|
|
|
.obs-liquidity-row {
|
|
display: grid;
|
|
grid-template-columns: 72px 1fr 88px;
|
|
gap: var(--sp-3);
|
|
align-items: center;
|
|
padding: var(--sp-3) 0;
|
|
border-bottom: 1px solid var(--border-soft);
|
|
}
|
|
|
|
.obs-liquidity-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.obs-liquidity-row__period {
|
|
font: 400 12px var(--ff-mono);
|
|
color: var(--fg-3);
|
|
}
|
|
|
|
.obs-liquidity-row__value {
|
|
font: 500 12px var(--ff-mono);
|
|
color: var(--fg-1);
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.obs-liquidity-row__value--neg {
|
|
color: var(--fg-2);
|
|
}
|
|
|
|
.obs-liquidity-row__bar-wrap {
|
|
height: 10px;
|
|
border: 1px solid var(--border-soft);
|
|
background: var(--paper-2);
|
|
position: relative;
|
|
}
|
|
|
|
.obs-liquidity-row__bar {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: var(--ink);
|
|
}
|
|
|
|
.obs-liquidity-row__bar--neg {
|
|
right: 50%;
|
|
background: var(--ink-4);
|
|
}
|
|
|
|
.obs-liquidity-row__bar--pos {
|
|
left: 50%;
|
|
background: var(--ink);
|
|
}
|
|
|
|
.obs-infra-list {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-2);
|
|
background: var(--paper);
|
|
padding: 0 var(--sp-4);
|
|
}
|
|
|
|
.obs-table-wrap {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-2);
|
|
overflow-x: auto;
|
|
background: var(--paper);
|
|
}
|
|
|
|
.obs-table {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.obs-num {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.obs-footer {
|
|
padding-top: var(--sp-5);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.obs-footer a {
|
|
color: var(--fg-1);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
wn-banner {
|
|
display: block;
|
|
margin-bottom: var(--sp-4);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.obs-split {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
wn-top-nav [slot="right"] {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
} |