rob thijssen
aaf37baaca
The site answered "who is mining" thoroughly and "what is this economy doing"
not at all. Everything needed was already reachable and none of it was
assembled anywhere.
Measured against mainnet rather than assumed:
total issuance 5,682,913.17 QTC
endowed at genesis 5,670,000.00 QTC
mined since 12,913.17 QTC <- emission to date, printed nowhere else
accounts 1,925 counted, not inferred from indexed events
locks/holds/freezes/reserves 0 all four, counted
vesting schedules 48
referenda 0
reversible transfers 0
calls used 7 of 58
events fired 18 of 107
**No "circulating supply" field, deliberately.** With every immobilising map
empty it would equal total issuance exactly, and printing it as a separate
headline would assert a distinction this chain does not currently make. The page
states what was counted and lets that be read. Vesting is a count rather than a
sum for the same reason: this runtime's vesting does not touch the balances
locks, so what it holds and when it releases would be a guess.
**Signed extrinsics are separated from the total**, because three quarters of
this chain's extrinsics are inherents — 513 signed of 2,052 on the day measured
— and a single "transactions per day" line would be mostly clockwork, a number
that reads as adoption and is not.
Two kinds of certainty share the page and are kept apart. Supply and the map
sizes are chain state, read now. The daily activity is our index, and the
Activity panel prints the range it covered and says "the whole chain" or "a
partial index" — a chart whose axis claims a month over a week of data is the
failure this repository has already shipped twice.
One thing found while building it: a counter that has never moved is *absent*
from storage, not zero. `TechReferenda::ReferendumCount` and
`ReversibleTransfers::NextTransactionId` both read as nothing, and reporting
them unknown would have hidden the most interesting fact about them — that
governance and reversible transfers are shipped and have never been used.
`plain_value` falls back to the entry's declared default, which is only sound
because `StorageTarget` says whether it is `Default` or `Optional`.
Refs #17
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jp6a8EDar9ueEhAxzep4V5
1575 lines
37 KiB
CSS
1575 lines
37 KiB
CSS
/*
|
||
* blackbeard.observer — the design system.
|
||
*
|
||
* Dark, and only dark. This is a deliberate commitment rather than an omission:
|
||
* the site is a scoreboard for a proof-of-work chain, read in the same rooms as
|
||
* the miners it reports on, and a light variant would be a second palette to
|
||
* validate for the sake of a context this content does not have. `color-scheme`
|
||
* is stated so the browser paints form controls and scrollbars to match instead
|
||
* of flashing white.
|
||
*
|
||
* The two data colours were validated with the dataviz palette checker against
|
||
* the chart surface (#14110d): bronze #bd8829 passes the lightness band, chroma
|
||
* floor and 3:1 contrast. Bronze and crimson are adjacent hues and do NOT pass
|
||
* as a categorical pair — which is why no chart here uses them as two series.
|
||
* Every chart is single-series (magnitude, one hue); identity is carried by
|
||
* labels and row treatment, never by a second colour a reader has to tell apart.
|
||
*/
|
||
|
||
/* Two palettes, both selected rather than computed from each other.
|
||
*
|
||
* A light theme is not a dark theme with the lightness inverted. The bronze
|
||
* that carries every magnitude on this site reads at 6.6:1 against the
|
||
* warm-black and only **2.77:1** against paper — the validator says so — so
|
||
* light mode gets its own step of the same hue, dark enough to hold the
|
||
* surface, and the emphasis step moves *down* rather than up because on paper
|
||
* darker is louder. Every value below was chosen by the dataviz validator
|
||
* against the surface it actually sits on:
|
||
*
|
||
* node <skill>/scripts/validate_palette.js "#bd8829" --mode dark --surface "#14110d"
|
||
* node <skill>/scripts/validate_palette.js "#a8741c" --mode light --surface "#f5f1e8"
|
||
*
|
||
* Re-run both after touching any of them. The single-hue rule is unchanged and
|
||
* still load-bearing: bronze and crimson are adjacent hues that fail CVD
|
||
* separation as a categorical pair, in either theme.
|
||
*
|
||
* `data-theme` is always a concrete `dark` or `light`, resolved before first
|
||
* paint by the inline script in `index.html`. "Auto" is a stored *preference*,
|
||
* not a third set of values — which is what keeps this file to one definition
|
||
* per palette instead of one per palette per media query.
|
||
*/
|
||
:root,
|
||
:root[data-theme='dark'] {
|
||
color-scheme: dark;
|
||
|
||
/* Surfaces, warm-black — a cold grey reads as a developer tool, not a arena. */
|
||
--surface-0: #0d0b09;
|
||
--surface-1: #14110d;
|
||
--surface-2: #1c1813;
|
||
--surface-3: #262019;
|
||
--border: #2f2719;
|
||
--border-strong: #453923;
|
||
|
||
/* Ink. Contrast against --surface-1: 16.0, 6.3, 3.7. */
|
||
--text-primary: #f2ece0;
|
||
--text-secondary: #a2937c;
|
||
--text-muted: #7a6c59;
|
||
|
||
/* The single data hue: magnitude, share bars, the history area. */
|
||
--data: #bd8829;
|
||
--data-bright: #e0a63a;
|
||
--data-wash: rgba(189, 136, 41, 0.1);
|
||
|
||
/* Identity and alarm. Never a second series alongside --data. */
|
||
--accent: #d8453a;
|
||
--accent-bright: #f05a4c;
|
||
--accent-wash: rgba(216, 69, 58, 0.1);
|
||
|
||
--good: #3f9d76;
|
||
--warn: #d9a441;
|
||
|
||
--font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
|
||
--font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||
--font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
|
||
|
||
/* Washes and glows, kept as tokens because each one is a colour and the
|
||
light theme needs its own. A wash that works as a glow on warm-black is a
|
||
smear on paper at the same alpha. */
|
||
--glow: rgba(189, 136, 41, 0.08);
|
||
--good-halo: rgba(63, 157, 118, 0.18);
|
||
--data-chip: rgba(189, 136, 41, 0.18);
|
||
--row-rule: rgba(47, 39, 25, 0.55);
|
||
--mine-hover: rgba(216, 69, 58, 0.16);
|
||
--warn-border: rgba(217, 164, 65, 0.4);
|
||
--failed-chip: rgba(216, 69, 58, 0.12);
|
||
|
||
--rule: 1px solid var(--border);
|
||
--shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
|
||
}
|
||
|
||
/* Light. Contrast against --surface-1: 15.8, 6.9, 4.2 — the ink; then 3.6 for
|
||
* the data hue, 4.8 for the accent, 3.9 and 3.8 for the two status colours.
|
||
* All above the 3:1 the validator holds marks to, and the ink above 4.5.
|
||
*/
|
||
:root[data-theme='light'] {
|
||
color-scheme: light;
|
||
|
||
/* Warm paper, for the same reason the dark surfaces are warm-black: a cold
|
||
grey reads as a developer tool. Elevation runs the other way here — the
|
||
page is the lightest thing and each step above it is *darker*, which keeps
|
||
the ordering of visual weight the dark theme has. */
|
||
--surface-0: #fbf8f2;
|
||
--surface-1: #f5f1e8;
|
||
--surface-2: #ece7da;
|
||
--surface-3: #e2dbc9;
|
||
--border: #d9d0ba;
|
||
--border-strong: #b8ab8d;
|
||
|
||
--text-primary: #1b1710;
|
||
--text-secondary: #5b5142;
|
||
--text-muted: #7c7263;
|
||
|
||
/* The bronze, re-stepped. `--data-bright` is *darker* than `--data`: it is
|
||
the emphasis step, and emphasis on paper is weight, not glare. */
|
||
--data: #a8741c;
|
||
--data-bright: #8a5f10;
|
||
--data-wash: rgba(168, 116, 28, 0.12);
|
||
|
||
--accent: #c3382d;
|
||
--accent-bright: #a82c20;
|
||
--accent-wash: rgba(195, 56, 45, 0.1);
|
||
|
||
--good: #0f8a58;
|
||
--warn: #b8651a;
|
||
|
||
--glow: rgba(168, 116, 28, 0.09);
|
||
--good-halo: rgba(15, 138, 88, 0.16);
|
||
--data-chip: rgba(168, 116, 28, 0.16);
|
||
--row-rule: rgba(184, 171, 141, 0.5);
|
||
--mine-hover: rgba(195, 56, 45, 0.1);
|
||
--warn-border: rgba(184, 101, 26, 0.45);
|
||
--failed-chip: rgba(195, 56, 45, 0.09);
|
||
|
||
/* Down rather than up: an inset white highlight is how a dark surface catches
|
||
the light, and on paper the same gesture is a shadow. */
|
||
--shadow: 0 1px 0 rgba(27, 23, 16, 0.04) inset;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html,
|
||
body,
|
||
#root {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
background:
|
||
/* A faint warm glow behind the masthead, so the page has a top rather than
|
||
being a flat field. Fixed so it does not travel with the scroll. */
|
||
radial-gradient(120% 60% at 50% -10%, var(--glow), transparent 60%), var(--surface-0);
|
||
background-attachment: fixed;
|
||
color: var(--text-primary);
|
||
font-family: var(--font-body);
|
||
font-size: 15px;
|
||
line-height: 1.5;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* Visible focus everywhere. The site is a table of links; keyboard users need
|
||
to see where they are, and the default ring is invisible on this ground. */
|
||
:focus-visible {
|
||
outline: 2px solid var(--data-bright);
|
||
outline-offset: 2px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* ---- type ---------------------------------------------------------------- */
|
||
|
||
.display {
|
||
font-family: var(--font-display);
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.eyebrow {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.numeral {
|
||
font-family: var(--font-mono);
|
||
font-variant-numeric: tabular-nums;
|
||
/* Tabular figures are the whole point: a column of hashrates that shifts
|
||
horizontally on every update is unreadable on a page that updates every
|
||
few seconds. */
|
||
}
|
||
|
||
/* ---- layout -------------------------------------------------------------- */
|
||
|
||
.shell {
|
||
max-width: 1180px;
|
||
margin: 0 auto;
|
||
padding: 0 20px 72px;
|
||
}
|
||
|
||
.panel {
|
||
background: var(--surface-1);
|
||
border: var(--rule);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.panel-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 14px 18px;
|
||
border-bottom: var(--rule);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.panel-title {
|
||
font-family: var(--font-display);
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ---- masthead ------------------------------------------------------------ */
|
||
|
||
.masthead {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
padding: 22px 0 18px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.mark {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.mark-name {
|
||
font-family: var(--font-display);
|
||
font-size: 25px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
line-height: 1;
|
||
}
|
||
|
||
.mark-name span {
|
||
color: var(--data);
|
||
}
|
||
|
||
.mark-tagline {
|
||
font-size: 11px;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.masthead-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* ---- node panel ---------------------------------------------------------- */
|
||
|
||
.node-grid {
|
||
display: grid;
|
||
/* Two columns on a phone, as many as fit on a desktop. A CPU model is the
|
||
longest value here by far and gets the room it needs rather than wrapping
|
||
mid-word. */
|
||
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
|
||
gap: 1px;
|
||
background: var(--border);
|
||
border-top: var(--rule);
|
||
}
|
||
|
||
.node-field {
|
||
background: var(--surface-1);
|
||
padding: 11px 16px 13px;
|
||
}
|
||
|
||
.node-value {
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
margin-top: 5px;
|
||
/* A CPU model can be sixty characters. Wrapping is better than a scrollbar
|
||
in a cell this small. */
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.network-sparks {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 1px;
|
||
background: var(--border);
|
||
border-top: var(--rule);
|
||
}
|
||
|
||
.network-sparks .node-field {
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.node-filter {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 6px 10px;
|
||
border: var(--rule);
|
||
border-radius: 3px;
|
||
background: var(--surface-0);
|
||
color: var(--text-primary);
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.node-filter:focus-visible {
|
||
outline: 2px solid var(--data);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
/* ---- theme toggle -------------------------------------------------------- */
|
||
|
||
.theme-toggle {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* 32px, which is the smallest a lone icon control can be and still be a
|
||
comfortable target on a touch screen. The icon inside is 16. */
|
||
width: 32px;
|
||
height: 32px;
|
||
padding: 0;
|
||
border: var(--rule);
|
||
border-radius: 999px;
|
||
background: var(--surface-1);
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
/* Not the colour: `color-scheme` repaints the scrollbar and the form chrome
|
||
at the same instant, and a 150ms fade on the page while the gutter snaps is
|
||
worse than both moving together. */
|
||
transition:
|
||
border-color 0.15s ease,
|
||
color 0.15s ease;
|
||
}
|
||
|
||
.theme-toggle:hover {
|
||
color: var(--data-bright);
|
||
border-color: var(--border-strong);
|
||
}
|
||
|
||
.theme-toggle:focus-visible {
|
||
outline: 2px solid var(--data);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* ---- connection light ---------------------------------------------------- */
|
||
|
||
.status {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
font-size: 11px;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.status-dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: var(--text-muted);
|
||
flex: none;
|
||
}
|
||
|
||
.status-live .status-dot {
|
||
background: var(--good);
|
||
box-shadow: 0 0 0 3px var(--good-halo);
|
||
}
|
||
|
||
.status-reconnecting .status-dot,
|
||
.status-connecting .status-dot {
|
||
background: var(--warn);
|
||
animation: pulse 1.1s ease-in-out infinite;
|
||
}
|
||
|
||
.status-offline .status-dot {
|
||
background: var(--accent);
|
||
}
|
||
|
||
@keyframes pulse {
|
||
50% {
|
||
opacity: 0.25;
|
||
}
|
||
}
|
||
|
||
/* ---- chain switcher & window selector ------------------------------------ */
|
||
|
||
.segmented {
|
||
display: inline-flex;
|
||
border: var(--rule);
|
||
background: var(--surface-1);
|
||
}
|
||
|
||
.segmented a {
|
||
appearance: none;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--text-secondary);
|
||
font: inherit;
|
||
font-size: 12px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
padding: 7px 13px;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.segmented a + a {
|
||
border-left: var(--rule);
|
||
}
|
||
|
||
.segmented a:hover {
|
||
color: var(--text-primary);
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
.segmented a[aria-current='page'] {
|
||
background: var(--data-wash);
|
||
color: var(--data-bright);
|
||
}
|
||
|
||
/* ---- chain nav ----------------------------------------------------------- */
|
||
|
||
.chains {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px 28px;
|
||
flex-wrap: wrap;
|
||
padding: 0 0 18px;
|
||
}
|
||
|
||
/* One labelled group per kind of network. The gap between groups is wider than
|
||
the gap inside one, so the split reads before either label does. */
|
||
.chain-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
|
||
.chains-label {
|
||
flex: none;
|
||
}
|
||
|
||
.chains-list {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.chain-chip {
|
||
display: inline-flex;
|
||
/* The tracked chips are links now, so they arrive underlined. */
|
||
text-decoration: none;
|
||
align-items: center;
|
||
gap: 8px;
|
||
appearance: none;
|
||
background: var(--surface-1);
|
||
border: var(--rule);
|
||
color: var(--text-secondary);
|
||
font: inherit;
|
||
font-size: 13px;
|
||
padding: 6px 11px;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.chain-chip:hover:not(:disabled) {
|
||
color: var(--text-primary);
|
||
border-color: var(--border-strong);
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
.chain-chip.is-active {
|
||
color: var(--data-bright);
|
||
border-color: var(--data);
|
||
background: var(--data-wash);
|
||
}
|
||
|
||
.chain-name {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.chain-nodes {
|
||
font-family: var(--font-mono);
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
background: var(--surface-3);
|
||
padding: 1px 6px;
|
||
}
|
||
|
||
.chain-chip.is-active .chain-nodes {
|
||
color: var(--data-bright);
|
||
background: var(--data-chip);
|
||
}
|
||
|
||
/* ---- stat tiles ---------------------------------------------------------- */
|
||
|
||
.stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
|
||
gap: 1px;
|
||
background: var(--border);
|
||
border: var(--rule);
|
||
margin-bottom: 26px;
|
||
}
|
||
|
||
.stat {
|
||
background: var(--surface-1);
|
||
padding: 15px 18px 16px;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Two columns and five tiles leaves a blank cell. Letting the hero span the row
|
||
makes six, which fills the grid — and gives the headline number the width it
|
||
deserves on the screen where it is most cramped. */
|
||
@media (max-width: 620px) {
|
||
.stat-hero {
|
||
grid-column: 1 / -1;
|
||
}
|
||
}
|
||
|
||
.stat-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.stat-value {
|
||
font-family: var(--font-mono);
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 25px;
|
||
font-weight: 600;
|
||
line-height: 1.15;
|
||
margin-top: 7px;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.stat-hero .stat-value {
|
||
font-size: 33px;
|
||
color: var(--data-bright);
|
||
}
|
||
|
||
.stat-note {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
margin-top: 5px;
|
||
min-height: 1.2em;
|
||
}
|
||
|
||
.stat-note.nominal {
|
||
color: var(--warn);
|
||
}
|
||
|
||
/* The note line doubles as the sparkline's readout, so a hover changes its
|
||
text. Brightening it says the line is being read rather than captioned —
|
||
without moving anything, which at this size would be a flicker. */
|
||
.stat-note.reading {
|
||
color: var(--text-secondary);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* ---- sparklines ---------------------------------------------------------- */
|
||
|
||
/* Reserved on every tile, drawn on four: the fifth (height) has nothing worth
|
||
plotting, and an absent slot there would leave one tile's baselines out of
|
||
step with the rest of the row. */
|
||
.spark {
|
||
height: 30px;
|
||
margin-top: 9px;
|
||
}
|
||
|
||
.spark-svg {
|
||
display: block;
|
||
touch-action: none;
|
||
}
|
||
|
||
.spark-svg:focus-visible {
|
||
outline: 2px solid var(--data-bright);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* Single series, single hue — the same bronze every other mark on the site
|
||
uses. The palette's second colour is reserved for identity and alarm, and as
|
||
an adjacent hue it would not survive CVD as a second series here. */
|
||
.spark-line {
|
||
fill: none;
|
||
stroke: var(--data);
|
||
stroke-width: 2;
|
||
stroke-linejoin: round;
|
||
stroke-linecap: round;
|
||
}
|
||
|
||
/* Emphasis on the newest point, as a lighter step rather than a second hue.
|
||
`--data-bright` sits above the validator's categorical lightness band (L
|
||
0.762 against a 0.48–0.67 ceiling) — that check governs slots a reader has to
|
||
tell apart from each other, which a single-hue emphasis step is not. It is
|
||
the same token the hero figure already wears, and it clears contrast against
|
||
the tile surface. Do not "fix" it by giving the marker the accent colour. */
|
||
.spark-marker {
|
||
fill: var(--data-bright);
|
||
}
|
||
|
||
.spark-crosshair {
|
||
stroke: var(--border-strong);
|
||
stroke-width: 1;
|
||
}
|
||
|
||
/* The miner's identifiers, stacked label-over-value. A definition list because
|
||
that is what it is: terms and their values, which also gives a screen reader
|
||
the pairing without any ARIA. */
|
||
.identifiers {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 2px 12px;
|
||
margin: 8px 0 0;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.identifiers dt {
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
font-size: 9px;
|
||
align-self: center;
|
||
}
|
||
|
||
.identifiers dd {
|
||
margin: 0;
|
||
color: var(--text-secondary);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
/* ---- block facts --------------------------------------------------------- */
|
||
|
||
/* The same grid as the stat tiles: this is the same kind of content — a handful
|
||
of single values with a caveat each — and giving it a second look would say
|
||
the two are different sorts of fact when they are not. */
|
||
.facts {
|
||
display: grid;
|
||
/* Three, not auto-fit. There are exactly six facts, and auto-fit resolves to
|
||
five at this width — leaving one on a row of its own beside four empty
|
||
cells that read as a grid that failed to load. Six divides evenly by three
|
||
and by two, so every breakpoint below is a full rectangle. A seventh fact
|
||
would need this revisited, which is the right amount of friction. */
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1px;
|
||
background: var(--border);
|
||
border-bottom: var(--rule);
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.facts {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 460px) {
|
||
.facts {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.fact {
|
||
background: var(--surface-1);
|
||
padding: 14px 18px 15px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.fact-label {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.fact-value {
|
||
font-family: var(--font-mono);
|
||
font-size: 17px;
|
||
margin-top: 7px;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.fact-note {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* A value nobody has. Muted and in the body face so it does not read as data —
|
||
it is a sentence explaining an absence, and formatting it like a figure would
|
||
invite it to be compared with one. */
|
||
.fact-unknown {
|
||
font-family: var(--font-body);
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.block-links {
|
||
padding: 15px 18px 18px;
|
||
display: grid;
|
||
gap: 12px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.block-links a {
|
||
color: var(--text-secondary);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.block-links a:hover {
|
||
color: var(--data-bright);
|
||
}
|
||
|
||
/* The one place the accent hue belongs: not a series, a state. A block that
|
||
lost its height is the single most important thing its page can say. */
|
||
.badge {
|
||
margin-left: 10px;
|
||
padding: 2px 7px;
|
||
font-family: var(--font-body);
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.badge-warn {
|
||
background: var(--accent-wash);
|
||
color: var(--accent-bright);
|
||
border: 1px solid var(--accent);
|
||
}
|
||
|
||
a.ticker-height:hover {
|
||
color: var(--data-bright);
|
||
}
|
||
|
||
/* ---- leaderboard --------------------------------------------------------- */
|
||
|
||
.board {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.board th {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
text-align: right;
|
||
padding: 10px 14px;
|
||
border-bottom: var(--rule);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.board th:first-child,
|
||
.board th.left {
|
||
text-align: left;
|
||
}
|
||
|
||
.board td {
|
||
padding: 9px 14px;
|
||
border-bottom: 1px solid var(--row-rule);
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.board td:first-child,
|
||
.board td.left {
|
||
text-align: left;
|
||
}
|
||
|
||
.board tbody tr:hover {
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
/* The pinned row: a left rule and a wash, plus an explicit "YOU" chip. Three
|
||
redundant cues, none of them colour alone. */
|
||
.board tbody tr.mine {
|
||
background: var(--accent-wash);
|
||
box-shadow: inset 3px 0 0 var(--accent);
|
||
}
|
||
|
||
.board tbody tr.mine:hover {
|
||
background: var(--mine-hover);
|
||
}
|
||
|
||
.rank {
|
||
font-family: var(--font-mono);
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
width: 1%;
|
||
}
|
||
|
||
.rank-1,
|
||
.rank-2,
|
||
.rank-3 {
|
||
color: var(--data-bright);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.miner-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 9px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.miner-name {
|
||
font-weight: 600;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.miner-name.anonymous {
|
||
font-family: var(--font-mono);
|
||
font-weight: 400;
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.chip {
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
padding: 2px 6px;
|
||
border: 1px solid currentColor;
|
||
flex: none;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.chip-you {
|
||
color: var(--accent-bright);
|
||
}
|
||
|
||
.chip-named {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* A mapping resting on one block, or on a narrow lead. Dashed rather than a
|
||
second colour: the palette's accent is reserved for identity and alarm, and
|
||
this is neither — it is the same claim held more loosely, which a change in
|
||
border weight says without introducing a hue a reader has to decode. */
|
||
.chip-guess {
|
||
border-style: dashed;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
/* Share: the percentage as the direct label, the bar beneath it as magnitude.
|
||
One hue, 4px rounded data-end at the far side, square against the baseline it
|
||
grows from. */
|
||
.share-cell {
|
||
/* Wide enough that the bar has usable resolution between a 20% leader and
|
||
a 0.6% tail; narrower and every small miner's bar is the same sliver. */
|
||
min-width: 92px;
|
||
}
|
||
|
||
.share-bar {
|
||
position: relative;
|
||
height: 5px;
|
||
margin-top: 4px;
|
||
background: var(--surface-3);
|
||
}
|
||
|
||
.share-bar > i {
|
||
display: block;
|
||
height: 100%;
|
||
background: var(--data);
|
||
border-radius: 0 3px 3px 0;
|
||
}
|
||
|
||
tr.mine .share-bar > i {
|
||
background: var(--accent);
|
||
}
|
||
|
||
/* Below this width the table would need a horizontal scrollbar, and a column
|
||
behind a scrollbar is a column nobody reads. "Last block" is the one a reader
|
||
can most easily do without — the live ticker beside the table already says
|
||
who mined most recently. */
|
||
@media (max-width: 1320px) {
|
||
.board .last-seen {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* On a phone the table still scrolls inside its own box — which is correct for
|
||
a data table — but dropping the least load-bearing column and tightening the
|
||
cells means far less of it is behind that scroll. Blocks, share and estimated
|
||
hashrate, the three a miner actually came for, stay visible without scrolling. */
|
||
@media (max-width: 720px) {
|
||
.board .streak {
|
||
display: none;
|
||
}
|
||
|
||
.board th,
|
||
.board td {
|
||
padding: 9px 9px;
|
||
}
|
||
|
||
.miner-name {
|
||
max-width: 150px;
|
||
}
|
||
}
|
||
|
||
.pin-button {
|
||
appearance: none;
|
||
background: transparent;
|
||
border: 0;
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
font: inherit;
|
||
font-size: 15px;
|
||
line-height: 1;
|
||
padding: 3px 5px;
|
||
}
|
||
|
||
.pin-button:hover {
|
||
color: var(--data-bright);
|
||
}
|
||
|
||
.pin-button[aria-pressed='true'] {
|
||
color: var(--accent-bright);
|
||
}
|
||
|
||
/* ---- block ticker -------------------------------------------------------- */
|
||
|
||
.ticker-row {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr auto;
|
||
gap: 12px;
|
||
align-items: baseline;
|
||
padding: 8px 18px;
|
||
border-bottom: 1px solid var(--row-rule);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.ticker-row.mine {
|
||
background: var(--accent-wash);
|
||
box-shadow: inset 3px 0 0 var(--accent);
|
||
}
|
||
|
||
/* Newly arrived blocks flash once. Suppressed for reduced-motion, below. */
|
||
.ticker-row.fresh {
|
||
animation: arrive 1.4s ease-out;
|
||
}
|
||
|
||
@keyframes arrive {
|
||
from {
|
||
background: var(--data-wash);
|
||
}
|
||
}
|
||
|
||
.ticker-height {
|
||
font-family: var(--font-mono);
|
||
font-variant-numeric: tabular-nums;
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.ticker-gap {
|
||
font-family: var(--font-mono);
|
||
font-variant-numeric: tabular-nums;
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ---- chart --------------------------------------------------------------- */
|
||
|
||
.chart {
|
||
width: 100%;
|
||
display: block;
|
||
touch-action: none;
|
||
}
|
||
|
||
.chart .grid {
|
||
stroke: var(--border);
|
||
stroke-width: 1;
|
||
}
|
||
|
||
.chart .area {
|
||
fill: var(--data-wash);
|
||
}
|
||
|
||
.chart .line {
|
||
fill: none;
|
||
stroke: var(--data);
|
||
stroke-width: 2;
|
||
stroke-linejoin: round;
|
||
stroke-linecap: round;
|
||
}
|
||
|
||
.chart .crosshair {
|
||
stroke: var(--border-strong);
|
||
stroke-width: 1;
|
||
}
|
||
|
||
.chart .marker {
|
||
fill: var(--data);
|
||
stroke: var(--surface-1);
|
||
stroke-width: 2;
|
||
}
|
||
|
||
.chart-axis {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
fill: var(--text-muted);
|
||
}
|
||
|
||
.tooltip {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
background: var(--surface-3);
|
||
border: 1px solid var(--border-strong);
|
||
padding: 7px 10px;
|
||
font-size: 12px;
|
||
line-height: 1.45;
|
||
white-space: nowrap;
|
||
z-index: 5;
|
||
}
|
||
|
||
.tooltip-label {
|
||
color: var(--text-muted);
|
||
font-size: 10px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* ---- misc ---------------------------------------------------------------- */
|
||
|
||
.empty {
|
||
padding: 40px 18px;
|
||
text-align: center;
|
||
color: var(--text-muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.banner {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 11px 16px;
|
||
border: 1px solid var(--border-strong);
|
||
background: var(--surface-2);
|
||
font-size: 13px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.banner-warn {
|
||
border-color: var(--warn-border);
|
||
color: var(--warn);
|
||
}
|
||
|
||
.footer {
|
||
margin-top: 44px;
|
||
padding-top: 20px;
|
||
border-top: var(--rule);
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
display: flex;
|
||
gap: 18px;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.footer a {
|
||
color: var(--text-secondary);
|
||
text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
}
|
||
|
||
.footer a:hover {
|
||
color: var(--data-bright);
|
||
}
|
||
|
||
/* The source link, on its own line under the caveats. `flex-basis: 100%` rather
|
||
than a fourth flex item: `space-between` would otherwise strand a short line
|
||
against a long one, and this is a different kind of statement from the
|
||
three above it — where to check the numbers, not a caveat about them. */
|
||
.colophon {
|
||
flex-basis: 100%;
|
||
padding-top: 14px;
|
||
border-top: var(--rule);
|
||
}
|
||
|
||
/* Wide content scrolls inside its own box; the page never scrolls sideways. */
|
||
.scroll-x {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.two-col {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
|
||
gap: 22px;
|
||
align-items: start;
|
||
}
|
||
|
||
@media (max-width: 880px) {
|
||
.two-col {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
}
|
||
|
||
/* Motion is decoration here — the numbers carry the information, so it can all
|
||
go without losing anything. */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.001ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.001ms !important;
|
||
}
|
||
}
|
||
|
||
.visually-hidden {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0 0 0 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
/* ---- account activity ---------------------------------------------------- */
|
||
|
||
/* The buttons in a panel head. Written out once here rather than inline on each
|
||
one: they were four copies of the same eight declarations, and a fifth was
|
||
about to be a fifth copy. */
|
||
.panel-button {
|
||
padding: 7px 13px;
|
||
font: inherit;
|
||
font-size: 12px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* One event's fields on one line. They are read left to right as a phrase —
|
||
"0.31 QUAN", "to qzp2AxZw…rs8L" — so they flow rather than tabulate: the
|
||
fields differ per event type and a column per possible field would be mostly
|
||
empty. */
|
||
.event-fields {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: 4px 10px;
|
||
}
|
||
|
||
.event-field {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 5px;
|
||
}
|
||
|
||
.event-key {
|
||
color: var(--text-muted);
|
||
font-size: 10px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* Deliberately not `.last-seen`, which the leaderboard drops below 1320px. On
|
||
a payment history the date is the second thing anyone reads after the amount;
|
||
it only goes on a phone, where the table scrolls anyway. */
|
||
.event-when {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.board .event-when {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* The caveat under a panel, in the same register as the page footer: what the
|
||
numbers above are, and what they are not. */
|
||
.panel-note {
|
||
margin: 0;
|
||
padding: 12px 16px;
|
||
border-top: var(--rule);
|
||
color: var(--text-muted);
|
||
font-size: 11px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ---- runtime ------------------------------------------------------------- */
|
||
|
||
/* The version strip. Reuses the chain chip: it is the same gesture — a row of
|
||
short labels where one is current — and a second visual language for it
|
||
would say the two are different sorts of choice. */
|
||
.runtime-strip {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
padding: 14px 16px;
|
||
border-bottom: var(--rule);
|
||
}
|
||
|
||
.runtime-pallet {
|
||
border-bottom: var(--rule);
|
||
}
|
||
|
||
.runtime-pallets > .runtime-pallet:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
/* A whole-row target. A pallet's name is not the only part of the row worth
|
||
clicking — the counts beside it are what tells you whether opening it is
|
||
worth doing. */
|
||
.runtime-pallet-head {
|
||
display: grid;
|
||
grid-template-columns: 34px 1fr auto 20px;
|
||
align-items: center;
|
||
gap: 12px;
|
||
width: 100%;
|
||
appearance: none;
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--text-primary);
|
||
font: inherit;
|
||
text-align: left;
|
||
padding: 11px 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.runtime-pallet-head:hover {
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
.runtime-pallet-name {
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* The pallet index, and the variant indexes inside. Monospace and tabular
|
||
because they are the bytes on the wire, not decoration: reading down the
|
||
column is how you see that a pallet was inserted rather than appended. */
|
||
.runtime-index {
|
||
font-family: var(--font-mono);
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
background: var(--surface-3);
|
||
padding: 1px 6px;
|
||
text-align: right;
|
||
min-width: 26px;
|
||
}
|
||
|
||
.runtime-counts {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.runtime-chevron {
|
||
font-family: var(--font-mono);
|
||
color: var(--text-muted);
|
||
text-align: center;
|
||
}
|
||
|
||
.runtime-pallet-body {
|
||
padding: 4px 16px 18px;
|
||
background: var(--surface-1);
|
||
}
|
||
|
||
.runtime-group {
|
||
padding: 12px 0 4px;
|
||
}
|
||
|
||
.runtime-envelope {
|
||
padding: 14px 16px;
|
||
border-bottom: var(--rule);
|
||
}
|
||
|
||
.runtime-list {
|
||
list-style: none;
|
||
margin: 8px 0 0;
|
||
padding: 0;
|
||
display: grid;
|
||
gap: 5px;
|
||
}
|
||
|
||
/* Flow rather than a grid: the parts of a line are a name, sometimes a value,
|
||
sometimes a type and sometimes a sentence, and a column per possible part
|
||
would be four columns mostly empty. */
|
||
.runtime-list li {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: 4px 10px;
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.runtime-list code {
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
color: var(--text-primary);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
/* The compiled-in value, in the data hue: it is the one thing on the line that
|
||
is a fact about this runtime rather than about its shape. */
|
||
.runtime-value {
|
||
font-family: var(--font-mono);
|
||
font-variant-numeric: tabular-nums;
|
||
color: var(--data-bright);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.runtime-type {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
/* `optional` or `default`, which is a property of the entry and belongs on its
|
||
line rather than under it. */
|
||
.runtime-modifier {
|
||
font-size: 10px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Documentation the runtime carries. Given the whole remaining width so it
|
||
wraps as prose, because that is what it is. */
|
||
.runtime-doc {
|
||
flex-basis: 100%;
|
||
color: var(--text-secondary);
|
||
font-size: 11px;
|
||
padding-left: 36px;
|
||
}
|
||
|
||
.runtime-extensions {
|
||
counter-reset: none;
|
||
}
|
||
|
||
/* ---- section nav --------------------------------------------------------- */
|
||
|
||
/* A quieter register than the chain chips above it: choosing a chain changes
|
||
what every number on the page is about, and choosing a section only changes
|
||
which of them you are looking at. Words rather than chips says that. */
|
||
.sections {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 18px;
|
||
padding: 0 0 18px;
|
||
margin-top: -4px;
|
||
}
|
||
|
||
.section-link {
|
||
font-size: 12px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
text-decoration: none;
|
||
padding-bottom: 3px;
|
||
border-bottom: 1px solid transparent;
|
||
}
|
||
|
||
.section-link:hover {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* Underline rather than a fill: the current section is a position, and a filled
|
||
chip here would compete with the active chain chip directly above it. */
|
||
.section-link[aria-current='page'] {
|
||
color: var(--data-bright);
|
||
border-bottom-color: var(--data);
|
||
}
|
||
|
||
/* ---- pager --------------------------------------------------------------- */
|
||
|
||
.pager {
|
||
display: flex;
|
||
gap: 10px;
|
||
padding: 14px 16px;
|
||
border-top: var(--rule);
|
||
}
|
||
|
||
.pager button:disabled {
|
||
color: var(--text-muted);
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* The address beside a name on the accounts index. Muted and monospace: it is
|
||
the row's identity but not what a reader scans for, and one node name can
|
||
belong to several accounts. */
|
||
.account-address {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* A nested value inside a call's arguments — a `MultiAddress::Id` wrapper, or a
|
||
whole call inside a `Utility::batch_all`. Indented rather than bracketed:
|
||
the nesting is the structure the runtime describes, and flattening it would
|
||
lose which recipient belongs to which transfer. */
|
||
.event-nested {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: 4px 8px;
|
||
}
|
||
|
||
/* Where a history row came from, and whether it worked. `chip-submitted` is
|
||
deliberately quiet — it is a category, not a warning — and `chip-failed`
|
||
borrows the accent because it is the one thing on the row that changes what
|
||
the row means. */
|
||
.chip-submitted {
|
||
color: var(--text-muted);
|
||
border-color: var(--border);
|
||
}
|
||
|
||
.chip-failed {
|
||
color: var(--accent-bright);
|
||
border-color: var(--accent);
|
||
background: var(--failed-chip);
|
||
}
|
||
|
||
/* A hashrate and how far to trust it. The error rides beside the figure rather
|
||
than under it: the two are one statement, and separating them invites reading
|
||
the number alone. */
|
||
.rate-cell {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 6px;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.rate-error {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Under four blocks the error bar is wider than half the value. Dimming says
|
||
"this is a guess" in the same register the `node?` chip does for names —
|
||
without hiding a figure somebody may still want. */
|
||
.rate-weak {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* A call, its signature and its documentation, stacked. The signature is the
|
||
runtime's own and long enough to wrap, so it gets the width rather than a
|
||
column of its own. */
|
||
.call-cell {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: 3px 8px;
|
||
/* Bounded, so a long signature wraps inside its cell rather than widening
|
||
the table and pushing the counts — which are what the page is for — off
|
||
the side of the viewport. */
|
||
max-width: 60ch;
|
||
}
|
||
|
||
.call-cell .runtime-doc {
|
||
padding-left: 0;
|
||
}
|
||
|
||
/* Declared and never dispatched. Dimmed rather than hidden: the unused surface
|
||
is the half of this table nobody else shows. */
|
||
.call-unused {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.call-unused code {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* A decoded storage value and, when the chain held nothing, the note that this
|
||
is the runtime's default rather than something it wrote. */
|
||
.state-value {
|
||
display: inline-flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: 4px 10px;
|
||
}
|
||
|
||
/* A role the chain assigns. Data-hued rather than accent: it is a fact about
|
||
the account, not a warning about it, and the accent is spoken for by things
|
||
that need attention. */
|
||
.chip-role {
|
||
color: var(--data-bright);
|
||
border-color: var(--data);
|
||
background: var(--data-wash);
|
||
}
|
||
|
||
/* Endowed at genesis. Quieter than a role, because it is history rather than a
|
||
job — an account can be endowed and do nothing. */
|
||
.chip-genesis {
|
||
color: var(--text-secondary);
|
||
border-color: var(--border-strong);
|
||
}
|
||
|
||
/* Chips beside a panel title, which is a heading and therefore uppercased and
|
||
letter-spaced — neither of which a chip should inherit. */
|
||
.title-chips {
|
||
display: inline-flex;
|
||
gap: 6px;
|
||
margin-left: 10px;
|
||
vertical-align: middle;
|
||
letter-spacing: normal;
|
||
}
|
||
|
||
/* The citation under an account's title. Same shape as the chain-status
|
||
banners, in the data hue, because it explains rather than warns. */
|
||
.banner-role {
|
||
border-color: var(--data);
|
||
background: var(--data-wash);
|
||
color: var(--text-secondary);
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
|
||
.banner-doc {
|
||
display: block;
|
||
color: var(--text-muted);
|
||
font-size: 11px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* Events nested under the extrinsic that caused them. Indented and quieter
|
||
than the call above: they are its consequences, not siblings of it. */
|
||
.block-event-list {
|
||
margin-top: 6px;
|
||
padding-left: 10px;
|
||
border-left: 1px solid var(--border);
|
||
}
|
||
|
||
/* A testnet. Dashed rather than a colour, and a second channel behind the group
|
||
heading rather than the only one — a single visual difference reads as
|
||
decoration to anyone who has not been told what it means. */
|
||
.chain-chip.is-testnet {
|
||
border-style: dashed;
|
||
}
|