Ilker ManapandClaude Opus 5.5
5bbc619a31
The control plane asks one node on each physical fabric to run
ibnetdiscover every five minutes and parses the text itself, so a
format the parser has not met is a control plane upgrade, not one on
every node. From the map it works out the switch tiers (leaf, spine,
core, by distance from the adapters), which adapter is which node's,
which cables trained below the rate the rest of their kind run at, and
whether the rails line up: every node's Nth adapter on its own leaf.
A page per fabric (/admin/fabrics) draws it: switches in their tiers,
adapters fanned out under their leaves, cables coloured by rate and
bundled, degraded ones marching red with a marker, and the cluster's
own adapters live - down ports glowing red, and particles running each
cable as fast as its adapter is sending and receiving, from the
counters. It zooms, pans, fades what a hovered switch or adapter does
not touch, opens a panel of detail on a click, colours by rail, finds a
node, and refreshes every fifteen seconds. The data is also at
/api/v1/fabrics/{id}/topology.
Placement reads the map: a replica spanning nodes takes nodes of one
leaf together when it can, and nodes whose cable trained short last.
Static assets are named by their content, as the stylesheet already
was.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
680 lines
41 KiB
CSS
680 lines
41 KiB
CSS
/* Deliberately one small stylesheet with no build step. The single-binary goal
|
|
rules out a JS toolchain, and nothing here needs one. */
|
|
:root {
|
|
color-scheme: light dark;
|
|
--bg: #fbfbfa;
|
|
--fg: #1c1c1a;
|
|
--muted: #6b6b66;
|
|
--line: #e3e3df;
|
|
--card: #ffffff;
|
|
--accent: #2f5d50;
|
|
--ok: #2f7a4f;
|
|
--warn: #9a6b1f;
|
|
--bad: #a33a32;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #17181a; --fg: #e8e8e4; --muted: #9a9a93; --line: #2c2e31;
|
|
--card: #1e2022; --accent: #7fb3a2; --ok: #6fbd8c; --warn: #d6a44e; --bad: #e07b72;
|
|
}
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0; background: var(--bg); color: var(--fg);
|
|
font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
.wrap { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
|
|
header { border-bottom: 1px solid var(--line); margin-bottom: 2rem; padding-bottom: 1.25rem; }
|
|
h1 { font-size: 1.5rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
|
|
h2 { font-size: 1.05rem; margin: 2.25rem 0 .75rem; letter-spacing: -.005em; }
|
|
.sub { color: var(--muted); margin: 0; }
|
|
nav { margin-top: .75rem; display: flex; gap: 1rem; flex-wrap: wrap; }
|
|
nav a { color: var(--accent); text-decoration: none; font-size: .9rem; }
|
|
nav a:hover { text-decoration: underline; }
|
|
table { width: 100%; border-collapse: collapse; font-size: .875rem; background: var(--card);
|
|
border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
|
|
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); }
|
|
th { font-weight: 600; color: var(--muted); font-size: .78rem; text-transform: uppercase;
|
|
letter-spacing: .04em; }
|
|
tr:last-child td { border-bottom: none; }
|
|
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
|
|
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
|
|
pre { background: var(--card); border: 1px solid var(--line); border-radius: 6px;
|
|
padding: .9rem 1rem; overflow-x: auto; }
|
|
.state { font-weight: 600; font-size: .8rem; }
|
|
.state-ready, .state-active { color: var(--ok); }
|
|
.state-pending, .state-starting, .state-draining, .state-cordoned { color: var(--warn); }
|
|
.state-failed, .state-lost, .state-unreachable, .state-revoked { color: var(--bad); }
|
|
.empty { color: var(--muted); font-style: italic; padding: .9rem 0; }
|
|
.note { color: var(--muted); font-size: .85rem; margin: .4rem 0 0; }
|
|
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line);
|
|
color: var(--muted); font-size: .8rem; display: flex; justify-content: space-between; gap: 1rem; }
|
|
button {
|
|
font: inherit; font-weight: 600; cursor: pointer;
|
|
background: var(--accent); color: var(--bg); border: none;
|
|
border-radius: 6px; padding: .55rem 1.1rem;
|
|
}
|
|
button:hover { filter: brightness(1.1); }
|
|
ul { padding-left: 1.2rem; }
|
|
li { margin: .25rem 0; }
|
|
a { color: var(--accent); }
|
|
.wrap.narrow { max-width: 30rem; }
|
|
label { display: block; margin: .9rem 0; font-size: .9rem; font-weight: 600; }
|
|
input[type=text], input[type=email], input[type=password], input[type=search] {
|
|
display: block; width: 100%; margin-top: .3rem; font: inherit; font-weight: 400;
|
|
padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px;
|
|
background: var(--card); color: var(--fg);
|
|
}
|
|
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
.error { color: var(--bad); border: 1px solid var(--bad); border-radius: 6px;
|
|
padding: .6rem .8rem; background: var(--card); }
|
|
form.inline { display: inline; }
|
|
button.link { background: none; color: var(--accent); padding: 0;
|
|
text-decoration: underline; font-weight: 400; font-size: .9rem; }
|
|
button.link.danger { color: var(--bad); }
|
|
.ok { color: var(--ok); border: 1px solid var(--ok); border-radius: 6px;
|
|
padding: .6rem .8rem; background: var(--card); }
|
|
select { font: inherit; padding: .35rem .4rem; border: 1px solid var(--line);
|
|
border-radius: 6px; background: var(--card); color: var(--fg); }
|
|
.chart-wrap { position: relative; margin: .5rem 0 1.5rem; }
|
|
.chart { width: 100%; height: 120px; display: block;
|
|
background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
|
|
.chart rect { transition: opacity .1s; }
|
|
.chart rect:hover { opacity: .65; }
|
|
.chart .axis { stroke: var(--line); stroke-width: 1; }
|
|
.chart-peak { position: absolute; top: .4rem; right: .6rem;
|
|
font-size: .72rem; color: var(--muted); }
|
|
.chart-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
|
|
@media (max-width: 720px) { .chart-row { grid-template-columns: 1fr; } }
|
|
.chat-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
|
|
.inline-label { font-size: .85rem; font-weight: 600; margin: 0; }
|
|
.inline-label select { margin-left: .4rem; font-weight: 400; }
|
|
.chat-log { min-height: 16rem; max-height: 55vh; overflow-y: auto; padding: .5rem;
|
|
background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
|
|
.bubble { white-space: pre-wrap; word-wrap: break-word; padding: .55rem .75rem;
|
|
margin: .4rem 0; border-radius: 8px; max-width: 46rem; }
|
|
.bubble.you { background: var(--accent); color: var(--bg); margin-left: auto; }
|
|
.bubble.assistant { background: var(--bg); border: 1px solid var(--line); }
|
|
.bubble.failed { color: var(--bad); border-color: var(--bad); }
|
|
.bubble .loading { min-width: 16rem; }
|
|
.bubble .loading .stage { font-size: .85rem; color: var(--muted); margin-bottom: .35rem; }
|
|
.bubble .loading progress { width: 100%; height: .5rem; accent-color: var(--accent); }
|
|
.chat-composer { display: flex; gap: .6rem; margin-top: .75rem; align-items: flex-end; }
|
|
.chat-composer textarea { flex: 1; font: inherit; padding: .5rem .6rem; resize: vertical;
|
|
border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); }
|
|
|
|
/* KaTeX sits inside a bubble that sets white-space: pre-wrap for plain text;
|
|
display maths needs to escape that or every fraction gets the newlines in
|
|
its own source. */
|
|
.bubble .katex-display { white-space: normal; margin: .6rem 0; overflow-x: auto; }
|
|
.bubble .katex { white-space: normal; }
|
|
.bubble.you .katex { color: inherit; }
|
|
/* A reply that stopped because it ran out of room, not because it was done. */
|
|
.note.truncated { color: var(--warn, #a15c00); margin: .2rem 0 .8rem; }
|
|
/* Offered under a reply that contains files worth keeping. */
|
|
.link.download { display: inline-block; margin: .3rem 0 .8rem; }
|
|
|
|
/* A usage bar inside a table cell. Drawn with two elements rather than a
|
|
gradient so the number stays selectable and readable by a screen reader. */
|
|
.meter { position: relative; min-width: 9rem; }
|
|
.meter > span {
|
|
display: block; height: .75rem; border-radius: 2px;
|
|
background: var(--accent); opacity: .55;
|
|
}
|
|
.meter > em { font-style: normal; font-size: .8rem; color: var(--muted); }
|
|
.bad { color: var(--bad); }
|
|
|
|
/* Chart palette.
|
|
*
|
|
* Roles rather than raw colours, so light and dark swap in one place and the
|
|
* charts are written against meaning. The values are a validated categorical
|
|
* set: every adjacent pair clears the colour-vision-deficiency separation
|
|
* threshold, and the dark column is the same hues re-stepped for the dark
|
|
* surface rather than an automatic flip of the light one.
|
|
*
|
|
* Checked with a validator rather than by eye, which is the only way anyone
|
|
* can honestly claim a palette is colourblind-safe. */
|
|
:root {
|
|
--viz-1: #2a78d6; /* blue */
|
|
--viz-2: #eb6834; /* orange */
|
|
--viz-3: #1baf7a; /* aqua */
|
|
--viz-4: #eda100; /* yellow */
|
|
--viz-grid: #e6e5e1;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
--viz-1: #3987e5;
|
|
--viz-2: #d95926;
|
|
--viz-3: #199e70;
|
|
--viz-4: #c98500;
|
|
--viz-grid: #2e2e2c;
|
|
}
|
|
}
|
|
:root[data-theme="dark"] {
|
|
--viz-1: #3987e5;
|
|
--viz-2: #d95926;
|
|
--viz-3: #199e70;
|
|
--viz-4: #c98500;
|
|
--viz-grid: #2e2e2c;
|
|
}
|
|
|
|
/* Stat tiles: the headline figures, which are numbers rather than charts. */
|
|
.tiles { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 1.25rem; }
|
|
.tile {
|
|
flex: 1 1 8.5rem; min-width: 8.5rem; padding: .6rem .75rem;
|
|
border: 1px solid var(--viz-grid); border-radius: 6px; background: var(--card);
|
|
}
|
|
.tile .v { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
|
|
.tile .k { font-size: .8rem; color: var(--muted); }
|
|
.tile svg { display: block; margin-top: .35rem; }
|
|
/* Ranked horizontal bars. A wrapper, not the SVG itself: .chart above is the
|
|
* fixed-height time-series box, and sharing the name gave these a 120px cage
|
|
* their taller content overflowed, over the table beneath them. Capped at the
|
|
* design width so scaling up never inflates the 12px labels. */
|
|
.ranked { margin: .25rem 0 1rem; }
|
|
.ranked svg { display: block; width: 100%; max-width: 720px; height: auto; }
|
|
|
|
/* The landing page.
|
|
*
|
|
* It is the only page here a stranger sees, and for most readers it is the whole
|
|
* product until they have a key. Everything below is layout and surface: the
|
|
* page still says exactly what it said before, and still names no model, no node
|
|
* and no count. */
|
|
.banner { border-radius: 6px; padding: .7rem .9rem; margin: 0 0 1.5rem;
|
|
border: 1px solid var(--line); background: var(--card); font-size: .875rem; }
|
|
.warn-banner { border-color: var(--warn); color: var(--warn); }
|
|
|
|
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
|
|
gap: 2rem; align-items: center; border-bottom: 1px solid var(--line);
|
|
margin-bottom: 2.25rem; padding-bottom: 2rem; }
|
|
.hero h1 { font-size: 2.6rem; line-height: 1; margin: 0 0 .5rem; letter-spacing: -.03em; }
|
|
.hero .sub { font-size: 1.15rem; color: var(--fg); font-weight: 500; }
|
|
.hero .lede { color: var(--muted); max-width: 34rem; margin: .75rem 0 0; }
|
|
.cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.35rem 0 0; }
|
|
.btn { display: inline-block; font-size: .9rem; font-weight: 600; text-decoration: none;
|
|
background: var(--accent); color: var(--bg); border: 1px solid var(--accent);
|
|
border-radius: 6px; padding: .5rem 1.1rem; }
|
|
.btn:hover { filter: brightness(1.1); }
|
|
.btn.ghost { background: none; color: var(--accent); border-color: var(--line); }
|
|
.btn.ghost:hover { border-color: var(--accent); filter: none; }
|
|
|
|
.schematic { margin: 0; }
|
|
.schematic svg { display: block; width: 100%; height: auto; }
|
|
.schematic figcaption { color: var(--muted); font-size: .8rem; margin-top: .6rem; }
|
|
@media (max-width: 760px) {
|
|
.hero { grid-template-columns: 1fr; gap: 1.5rem; }
|
|
.hero h1 { font-size: 2rem; }
|
|
}
|
|
|
|
/* The base URL is what a reader came for, so it is a headline rather than a
|
|
* line of prose with a colon in it. */
|
|
.url-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem;
|
|
background: var(--card); border: 1px solid var(--line);
|
|
border-left: 3px solid var(--accent); border-radius: 6px;
|
|
padding: .85rem 1.1rem; }
|
|
.url-card .k { font-size: .72rem; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: .06em; color: var(--muted); }
|
|
.url-card code { font-size: 1.05rem; word-break: break-all; }
|
|
|
|
.steps { list-style: none; padding: 0; margin: .5rem 0 0;
|
|
display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.steps > li { margin: 0; background: var(--card); border: 1px solid var(--line);
|
|
border-radius: 8px; padding: 1.1rem 1.1rem 1.25rem; }
|
|
.steps .n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem;
|
|
border-radius: 50%; background: var(--accent); color: var(--bg);
|
|
font-size: .8rem; font-weight: 700; }
|
|
.steps h3 { font-size: .98rem; margin: .6rem 0 .4rem; }
|
|
.steps p { margin: .4rem 0 0; font-size: .9rem; }
|
|
/* A card is narrower than a line of shell, and a block that scrolls sideways
|
|
* inside a card is one nobody discovers they can scroll. */
|
|
.steps pre { margin: .7rem 0 0; font-size: .78em;
|
|
white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
|
|
|
|
/* Tabs with no JavaScript: the radios carry the state, so the panel a reader
|
|
* chose survives everything including the script never loading. */
|
|
.tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .75rem; }
|
|
.tabs > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
|
|
.tabs > label { display: inline-block; margin: 0; cursor: pointer; font-size: .85rem;
|
|
font-weight: 600; color: var(--muted); padding: .35rem .85rem;
|
|
border: 1px solid transparent; border-radius: 999px; }
|
|
.tabs > label:hover { color: var(--fg); }
|
|
.tabs > input:checked + label { color: var(--fg); background: var(--card);
|
|
border-color: var(--line); }
|
|
.tabs > input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
.tabs > .panels { flex: 1 0 100%; }
|
|
.tabs .panel { display: none; margin: 0; }
|
|
.tabs > input:nth-of-type(1):checked ~ .panels > .panel:nth-child(1),
|
|
.tabs > input:nth-of-type(2):checked ~ .panels > .panel:nth-child(2),
|
|
.tabs > input:nth-of-type(3):checked ~ .panels > .panel:nth-child(3) { display: block; }
|
|
|
|
/* Copy buttons are injected by script, so they are positioned against the block
|
|
* they copy rather than reserving space that stays empty without one. */
|
|
pre { position: relative; }
|
|
pre .copy { position: absolute; top: .4rem; right: .4rem; padding: .15rem .5rem;
|
|
font-size: .72rem; font-weight: 600; background: var(--bg);
|
|
color: var(--muted); border: 1px solid var(--line); border-radius: 4px;
|
|
opacity: 0; transition: opacity .12s; }
|
|
pre:hover .copy, pre .copy:focus-visible { opacity: 1; }
|
|
pre .copy:hover { color: var(--fg); filter: none; }
|
|
|
|
.endpoints { list-style: none; padding: 0; margin: .5rem 0 0; }
|
|
.endpoints > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem;
|
|
padding: .55rem 0; border-bottom: 1px solid var(--line); margin: 0; }
|
|
.endpoints > li:last-child { border-bottom: none; }
|
|
.endpoints > li span { color: var(--muted); font-size: .85rem; }
|
|
/* A button revealed by hover is a button a phone never has. */
|
|
@media (hover: none) { pre .copy { opacity: 1; } }
|
|
|
|
/* The mirror page. A model version spills onto a second line under its row:
|
|
the catalog URL is long, and a column wide enough for it would squeeze every
|
|
other column on the table into uselessness. */
|
|
.url-row code, .error-row { font-size: .78rem; padding-top: 0; }
|
|
.url-row { color: var(--muted); }
|
|
.url-row code { color: var(--muted); }
|
|
.error-row { color: var(--bad); }
|
|
tr:has(+ .url-row) td, tr:has(+ .error-row) td { border-bottom: none; }
|
|
/* The fetch form's three short fields sit on one line on a wide screen and
|
|
stack on a narrow one, because two of them are a word long and a full-width
|
|
input for "2026-09" reads as though more is wanted. */
|
|
.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
|
|
.field-row label { flex: 1 1 12rem; }
|
|
.opt { font-weight: 400; color: var(--muted); font-size: .8rem; }
|
|
|
|
/* The row whose quota form is open. Tinted rather than outlined: a border
|
|
inside a table cell breaks the ruling of every column beside it. */
|
|
tr.editing > td { background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
|
|
tr.editing form { margin: .4rem 0; }
|
|
|
|
/* Multi-line time series. Thin marks, recessive grid: the data is the darkest
|
|
thing on the chart, which is the only rule that makes a chart readable. */
|
|
.chart-lines { height: 150px; }
|
|
.chart-lines .line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
|
|
.chart-lines .axis { stroke: var(--viz-grid); stroke-width: 1; }
|
|
.chart-lines .tick { fill: var(--muted); font-size: 9px; text-anchor: end; }
|
|
/* A legend is always present for two lines or more: colour alone is not an
|
|
encoding a reader can rely on. */
|
|
.legend { display: flex; flex-wrap: wrap; gap: .1rem 1rem; margin: .2rem 0 1rem; font-size: .8rem; }
|
|
.legend span { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
|
|
.legend i { width: 10px; height: 2px; border-radius: 1px; display: inline-block; }
|
|
.legend b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
|
|
.chart-title { font-size: .9rem; font-weight: 600; margin: 0 0 .3rem; }
|
|
|
|
/* The filter row above a report's charts.
|
|
One row, above the charts rather than beside them: the reader chooses what
|
|
they are looking at before they look, and a control column on the right is
|
|
found after the question has already been answered wrongly. Links rather
|
|
than a form, so the view is in the URL and can be shared. */
|
|
.filters { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
|
|
margin: 0 0 1rem; }
|
|
.filter-label { color: var(--muted); font-size: .78rem; text-transform: uppercase;
|
|
letter-spacing: .04em; margin-right: .2rem; }
|
|
.filter-label + .chip { margin-right: 0; }
|
|
.filters .filter-label:not(:first-child) { margin-left: 1rem; }
|
|
.chip { font-size: .85rem; text-decoration: none; color: var(--fg);
|
|
background: var(--card); border: 1px solid var(--line);
|
|
border-radius: 999px; padding: .25rem .7rem; }
|
|
.chip:hover { border-color: var(--accent); }
|
|
/* The selected one is filled, not merely outlined: an outline reads as
|
|
available rather than as chosen, and with four of them side by side the
|
|
difference has to survive a glance. */
|
|
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--bg);
|
|
font-weight: 600; }
|
|
|
|
/* People: the tenancy tree with its people and keys. Indented by level and
|
|
ruled on the left, so which team a project is in reads at a glance without
|
|
a table per level. */
|
|
.org { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
|
|
padding: .9rem 1rem; margin: 0 0 1rem; }
|
|
.team { margin: .8rem 0 0 .4rem; padding-left: .9rem; border-left: 2px solid var(--line); }
|
|
.node-head { display: flex; align-items: center; gap: .4rem .9rem; flex-wrap: wrap; }
|
|
.node-name { font-weight: 600; }
|
|
.org > .node-head .node-name { font-size: 1.05rem; }
|
|
.node-meta { color: var(--muted); font-size: .82rem; font-weight: 400; }
|
|
details.edit { display: inline-block; font-size: .85rem; }
|
|
details.edit > summary { cursor: pointer; color: var(--accent); list-style: none;
|
|
text-decoration: underline; }
|
|
details.edit > summary::-webkit-details-marker { display: none; }
|
|
details.edit[open] > summary { color: var(--muted); }
|
|
details.edit form { display: flex; gap: .4rem; align-items: center; margin: .35rem 0; }
|
|
details.edit input[type=text] { width: 14rem; }
|
|
details.project { margin: .45rem 0; border: 1px solid var(--line); border-radius: 6px;
|
|
background: var(--bg); }
|
|
details.project > summary { cursor: pointer; padding: .45rem .7rem; display: flex;
|
|
gap: .8rem; align-items: baseline; }
|
|
details.project[open] > summary { border-bottom: 1px solid var(--line); }
|
|
.project-body { padding: .6rem .7rem .8rem; display: grid; gap: .7rem; }
|
|
table.compact { font-size: .83rem; }
|
|
table.compact th, table.compact td { padding: .35rem .55rem; }
|
|
form.add { display: flex; gap: .4rem; margin: .5rem 0 0; }
|
|
form.add input[type=text], details.edit input[type=text] { margin: 0; padding: .35rem .55rem; }
|
|
form.add input[type=text] { max-width: 18rem; }
|
|
form.add button, button.small { padding: .3rem .7rem; font-size: .82rem; }
|
|
form.org-add { margin: 0 0 1rem; }
|
|
td.actions { white-space: nowrap; }
|
|
td.actions form + form { margin-left: .6rem; }
|
|
.tag { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
|
|
color: var(--accent); border: 1px solid var(--accent); border-radius: 4px;
|
|
padding: 0 .3rem; margin-left: .3rem; }
|
|
input.search { width: 100%; max-width: 26rem; margin: 0 0 .7rem; padding: .45rem .6rem;
|
|
font: inherit; border: 1px solid var(--line); border-radius: 6px;
|
|
background: var(--card); color: var(--fg); }
|
|
tr[hidden] { display: none; }
|
|
|
|
/* The mirror's list of what it holds: one line per version. */
|
|
table.held td.file { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
table.held td.actions > * + * { margin-left: .7rem; }
|
|
table.held .tag { margin: 0 .3rem 0 0; text-transform: none; letter-spacing: 0; }
|
|
|
|
/* The shared top menu. The page you are on is marked by weight and an
|
|
underline, not by colour alone. */
|
|
nav.menu { align-items: center; gap: .35rem 1.1rem; }
|
|
nav.menu a { font-size: .9rem; }
|
|
nav.menu a[aria-current="page"] { color: var(--fg); font-weight: 600;
|
|
text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35rem; }
|
|
nav.menu .menu-gap { flex: 1 1 auto; min-width: .5rem; }
|
|
nav.menu form.inline button.link { font-size: .9rem; text-decoration: none; color: var(--muted); }
|
|
nav.menu form.inline button.link:hover { color: var(--fg); text-decoration: underline; }
|
|
|
|
/* Ranked bars: label, bar, value, each taking the room it needs. */
|
|
.ranked { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(6rem, 1fr) max-content;
|
|
gap: .35rem .8rem; align-items: center; max-width: 100%; }
|
|
.ranked .rk { display: contents; }
|
|
.ranked .rk-label { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
max-width: 18rem; }
|
|
.ranked .rk-track { height: .7rem; }
|
|
.ranked .rk-bar { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
|
|
.ranked .rk-value { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums;
|
|
white-space: nowrap; }
|
|
|
|
/* A warning about the page as a whole, set apart from the notes around it. */
|
|
.banner-warn { border: 1px solid var(--warn); border-left-width: 4px; border-radius: 6px;
|
|
background: var(--card); padding: .6rem .8rem; margin: 0 0 1rem;
|
|
font-size: .88rem; color: var(--fg); }
|
|
|
|
/* Single-column forms read as a form, not as a row of the page. */
|
|
form.narrow, .narrow-form form { max-width: 30rem; }
|
|
|
|
/* CPU-only capacity: one line of figures in place of a GPU table. */
|
|
.capacity-cpu { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: .2rem 0 1rem; }
|
|
.capacity-cpu b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
|
|
.capacity-cpu span { color: var(--muted); font-size: .85rem; }
|
|
|
|
/* Quotas: the tenancy tree as a table. Depth is indentation and a guide line,
|
|
organizations are tinted, and a limit held from above is muted and arrowed. */
|
|
table.quota-tree td { vertical-align: top; }
|
|
table.quota-tree .q-where { padding-left: .8rem; }
|
|
table.quota-tree tr.q-depth-1 .q-where { padding-left: 2rem; }
|
|
table.quota-tree tr.q-depth-2 .q-where { padding-left: 3.2rem; }
|
|
table.quota-tree tr.q-depth-0 > td { background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
|
|
table.quota-tree tr.q-depth-0 .q-name { font-weight: 600; }
|
|
.q-kind { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-left: .3rem; }
|
|
.q-sub { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
|
|
.q-warn { color: var(--warn); }
|
|
.q-up { color: var(--muted); font-style: italic; cursor: help; }
|
|
.q-none { color: var(--line); }
|
|
.q-per { color: var(--muted); font-size: .8em; }
|
|
.q-spent { white-space: nowrap; }
|
|
.q-spend { font-variant-numeric: tabular-nums; display: inline-block; min-width: 3.5rem; text-align: right; }
|
|
.q-meter { display: inline-block; width: 5rem; height: .45rem; background: var(--line); border-radius: 3px;
|
|
margin: 0 .4rem 0 .6rem; vertical-align: middle; overflow: hidden; }
|
|
.q-meter i { display: block; height: 100%; background: var(--accent); }
|
|
.q-meter.hot i { background: var(--bad); }
|
|
.q-pct { font-size: .78rem; color: var(--muted); }
|
|
.q-act { text-align: right; white-space: nowrap; }
|
|
.q-form { max-width: 46rem; }
|
|
.q-form .field-row { align-items: flex-end; }
|
|
.q-form .field-row label { flex: 1 1 8rem; }
|
|
.q-form .field-row label.q-period { flex: 0 0 auto; }
|
|
.q-form-title { margin: .2rem 0 .4rem; font-size: .88rem; }
|
|
.q-form-actions { display: flex; gap: 1rem; align-items: center; margin-top: .6rem; }
|
|
.q-form-actions .danger { margin-left: auto; }
|
|
.q-legend { font-size: .8rem; color: var(--muted); margin: .5rem 0 0; }
|
|
details.explain { margin-top: 1.5rem; font-size: .88rem; color: var(--muted); }
|
|
details.explain > summary { cursor: pointer; color: var(--accent); }
|
|
details.explain p { max-width: 48rem; }
|
|
|
|
/* Memberships as removable chips. */
|
|
.chip-m { display: inline-flex; align-items: center; gap: .2rem; font-size: .78rem;
|
|
border: 1px solid var(--line); border-radius: 999px; padding: .05rem .15rem .05rem .55rem;
|
|
margin: .1rem .25rem .1rem 0; background: var(--card); white-space: nowrap; }
|
|
.chip-m form.inline { display: inline; }
|
|
.chip-x { background: none; color: var(--muted); padding: 0 .35rem; font-weight: 400; line-height: 1.2; }
|
|
.chip-x:hover { color: var(--bad); filter: none; }
|
|
td.where { max-width: 26rem; }
|
|
.scope-members { background: var(--card); border: 1px solid var(--line); border-radius: 6px;
|
|
padding: .5rem .6rem; margin: .4rem 0; min-width: 24rem; }
|
|
h3.limits-for { font-size: .92rem; margin: 1rem 0 .4rem; }
|
|
table.narrow-table { max-width: 30rem; }
|
|
.q-act a + a { margin-left: .8rem; }
|
|
.chip-role { font-size: .68rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
|
|
/* Runs: one fixed-width selector per model, so they line up down the column
|
|
whatever the names; a catalog name differing from the mirror's sits above. */
|
|
table.held .use { width: 9.5rem; margin: .1rem 0; }
|
|
table.held .use .as { display: block; font-size: .72rem; color: var(--muted);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
table.held .use .opt { font-size: .75rem; line-height: 1.3; }
|
|
table.held td.num { white-space: nowrap; }
|
|
table.held select.mode { width: 100%; padding: .15rem .3rem; font-size: .8rem; }
|
|
|
|
/* Link pills: the same look as .tabs, for choices that are addresses rather
|
|
than panels on one page — a filtered listing should survive a reload and be
|
|
worth sending to somebody. */
|
|
.pills { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
|
|
.pills a { font-size: .85rem; font-weight: 600; color: var(--muted); padding: .35rem .85rem;
|
|
border: 1px solid transparent; border-radius: 999px; text-decoration: none; }
|
|
.pills a:hover { color: var(--fg); }
|
|
.pills a.on { color: var(--fg); background: var(--card); border-color: var(--line); }
|
|
.pills.small a { font-size: .78rem; font-weight: 500; padding: .2rem .65rem; }
|
|
.explore-filters { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
|
|
.explore-search { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin: .5rem 0 .75rem; }
|
|
.explore-search input[type=search] { flex: 1 1 18rem; width: auto; margin: 0; }
|
|
.explore-search label.check { font-size: .85rem; color: var(--muted); display: inline-flex; gap: .35rem; align-items: center; margin: 0; }
|
|
table.explore td:first-child { max-width: 28rem; overflow-wrap: anywhere; }
|
|
table.explore td.num { white-space: nowrap; }
|
|
table.explore .cannot { color: var(--bad); }
|
|
.tag { display: inline-block; font-size: .7rem; font-weight: 600; color: var(--muted);
|
|
border: 1px solid var(--line); border-radius: 999px; padding: 0 .4rem; margin-left: .3rem; vertical-align: 1px; }
|
|
.tag.new { color: var(--accent); border-color: var(--accent); }
|
|
table.explore .from { font-size: .75rem; color: var(--muted); margin-top: .15rem; overflow-wrap: anywhere; }
|
|
.repo-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; color: var(--muted); margin: .25rem 0 .75rem; }
|
|
/* A README is written for its own site. Held to a box so the file list, which
|
|
is what this page is for, stays within reach below it. */
|
|
details.model-card { border: 1px solid var(--line); border-radius: 8px; background: var(--card); margin: 0 0 1rem; }
|
|
details.model-card > summary { cursor: pointer; padding: .5rem .8rem; font-weight: 600; font-size: .9rem; }
|
|
details.model-card .card-body { max-height: 28rem; overflow: auto; padding: 0 1rem 1rem; font-size: .88rem; line-height: 1.55; }
|
|
.card-body h1 { font-size: 1.25rem; } .card-body h2 { font-size: 1.1rem; } .card-body h3, .card-body h4 { font-size: .95rem; }
|
|
.card-body pre { overflow-x: auto; padding: .6rem .75rem; background: var(--bg); border-radius: 6px; font-size: .8rem; }
|
|
.card-body table { width: auto; max-width: 100%; display: block; overflow-x: auto; font-size: .8rem; }
|
|
.card-body td, .card-body th { padding: .25rem .5rem; }
|
|
.card-body a.img { font-size: .8rem; }
|
|
/* A repository opened beneath its row in the listing. */
|
|
table.explore tr.open > td { background: var(--bg); }
|
|
table.explore a.open-repo::before { content: "▸ "; color: var(--muted); text-decoration: none; display: inline-block; width: 1em; }
|
|
table.explore a.open-repo[aria-expanded="true"]::before { content: "▾ "; }
|
|
table.explore tr.repo-detail > td { background: var(--bg); padding: .75rem 1rem 1rem; border-top: 0; }
|
|
table.explore tr.repo-detail table { background: var(--card); }
|
|
table.explore tr.repo-detail td:first-child { max-width: none; }
|
|
/* A repository's files: name, version and button on one line, so a repository
|
|
of a dozen quantisations is a dozen lines rather than a dozen boxes. */
|
|
table.repo-files td { vertical-align: middle; }
|
|
table.repo-files td:first-child { overflow-wrap: anywhere; }
|
|
table.repo-files form.inline { display: flex; flex-wrap: nowrap; gap: .35rem; align-items: center; margin: 0; }
|
|
table.repo-files form.inline input[type=text] { display: inline-block; width: auto; margin: 0; padding: .3rem .45rem; font-size: .8rem; }
|
|
table.repo-files form.inline input[name=model] { width: 12rem; min-width: 0; flex: 1 1 12rem; }
|
|
table.repo-files form.inline input[name=version] { width: 6.5rem; }
|
|
table.repo-files form.inline button { padding: .3rem .7rem; font-size: .8rem; }
|
|
table.repo-files td:last-child { width: 1%; white-space: nowrap; }
|
|
table.repo-files td:last-child .opt { display: block; margin-bottom: .2rem; }
|
|
/* A finished reply, rendered from markdown. Wrapping goes back to normal:
|
|
pre-wrap, right for text as it streams, doubles every gap between blocks. */
|
|
.bubble.md { white-space: normal; }
|
|
.bubble.md > :first-child { margin-top: 0; }
|
|
.bubble.md > :last-child { margin-bottom: 0; }
|
|
.bubble.md p, .bubble.md ul, .bubble.md ol, .bubble.md pre, .bubble.md table, .bubble.md blockquote { margin: .5rem 0; }
|
|
.bubble.md ul, .bubble.md ol { padding-left: 1.4rem; }
|
|
.bubble.md h1, .bubble.md h2, .bubble.md h3, .bubble.md h4 { margin: .8rem 0 .35rem; font-size: 1rem; }
|
|
.bubble.md h1 { font-size: 1.15rem; }
|
|
.bubble.md code { font-size: .85em; background: var(--card); padding: .05rem .3rem; border-radius: 4px; }
|
|
.bubble.md pre { white-space: pre; overflow-x: auto; background: var(--card); border: 1px solid var(--line);
|
|
border-radius: 6px; padding: .6rem .75rem; }
|
|
.bubble.md pre code { background: none; padding: 0; font-size: .82rem; }
|
|
.bubble.md table { width: auto; max-width: 100%; display: block; overflow-x: auto; font-size: .85rem; }
|
|
.bubble.md th, .bubble.md td { padding: .25rem .6rem; border-bottom: 1px solid var(--line); }
|
|
.bubble.md blockquote { border-left: 3px solid var(--line); padding-left: .75rem; color: var(--muted); }
|
|
/* How much of a budget is gone, on a person's own page. */
|
|
.budget { max-width: 34rem; margin: .4rem 0 .6rem; }
|
|
.budget-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--muted); }
|
|
.budget-head b { color: var(--fg); font-variant-numeric: tabular-nums; }
|
|
.budget-bar { height: .5rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); overflow: hidden; margin-top: .25rem; }
|
|
.budget-bar > span { display: block; height: 100%; background: var(--accent); }
|
|
.budget.near .budget-bar > span { background: var(--warn); }
|
|
.budget.over .budget-bar > span { background: var(--bad); }
|
|
.budget.over .budget-head b { color: var(--bad); }
|
|
.own-use .tile { min-width: 9rem; }
|
|
/* Between what the cluster is and how it is being used, on the cluster page. */
|
|
hr.part { border: 0; border-top: 1px solid var(--line); margin: 2.25rem 0 .5rem; }
|
|
/* How full a node is, in the cluster page's node table and on its own page. */
|
|
td.load { white-space: nowrap; min-width: 8.5rem; }
|
|
.minibar { display: inline-block; width: 3.2rem; height: .45rem; border-radius: 999px; background: var(--bg);
|
|
border: 1px solid var(--line); overflow: hidden; vertical-align: middle; margin-right: .4rem; }
|
|
.minibar > span { display: block; height: 100%; background: var(--accent); }
|
|
.minibar.warm > span { background: var(--warn); }
|
|
.minibar.hot > span { background: var(--bad); }
|
|
.load-v { font-variant-numeric: tabular-nums; font-size: .85rem; }
|
|
table.nodes td:first-child code { white-space: nowrap; }
|
|
/* The mirror's table, grouped by model: a heading row, then its versions. */
|
|
table.held tr.model-group > td { background: var(--bg); padding-top: .7rem; border-bottom: 1px solid var(--line); }
|
|
table.held tr.model-group strong { font-size: .95rem; }
|
|
table.held tr.model-version > td:first-child { padding-left: 1.4rem; }
|
|
.tag.bad { color: var(--bad); border-color: var(--bad); }
|
|
ul.fabric-problems { list-style: none; padding: 0; margin: .25rem 0 .75rem; font-size: .88rem; }
|
|
ul.fabric-problems li { margin: .25rem 0; }
|
|
ul.fabric-problems li.info { color: var(--muted); }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
The fabric map. A dark surface in both themes: it is a picture of light
|
|
moving through cables, and glows and flows read on dark the way a
|
|
network operations wall does.
|
|
--------------------------------------------------------------------- */
|
|
.wrap.wide { max-width: 1400px; }
|
|
.fabric-head h2 { margin: .75rem 0 .1rem; }
|
|
.fabric-map {
|
|
--fm-bg: #0b1020; --fm-bg2: #111a33; --fm-fg: #dbe4ff; --fm-dim: #7c89ad; --fm-line: #1e2a4a;
|
|
--fm-xdr: #f472b6; --fm-ndr: #a78bfa; --fm-hdr: #38bdf8; --fm-edr: #34d399; --fm-slow: #fbbf24; --fm-bad: #fb7185;
|
|
position: relative; margin: .75rem 0 1.5rem; border-radius: 14px; overflow: hidden;
|
|
background: radial-gradient(1200px 500px at 50% -10%, #1b2a55 0%, var(--fm-bg) 55%) , var(--fm-bg);
|
|
border: 1px solid #1c2747; box-shadow: 0 20px 60px -30px rgba(40, 80, 200, .45), inset 0 1px 0 rgba(255,255,255,.04);
|
|
color: var(--fm-fg);
|
|
}
|
|
.fm-bar { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; justify-content: space-between; align-items: center;
|
|
padding: .8rem 1rem; border-bottom: 1px solid var(--fm-line); background: rgba(10, 16, 36, .55); backdrop-filter: blur(6px); }
|
|
.fm-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
|
|
.fm-stat { display: flex; flex-direction: column; line-height: 1.1; }
|
|
.fm-stat b { font-size: 1.15rem; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 18px rgba(120, 160, 255, .35); }
|
|
.fm-stat span { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fm-dim); }
|
|
.fm-stat.bad b { color: var(--fm-bad); text-shadow: 0 0 16px rgba(251, 113, 133, .55); }
|
|
.fm-stat.ok b { color: var(--fm-edr); }
|
|
.fm-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
|
|
.fm-tools .pills { margin: 0; }
|
|
.fm-tools button, .fm-tools .pills button {
|
|
font: inherit; font-size: .78rem; font-weight: 600; color: var(--fm-dim); background: transparent; cursor: pointer;
|
|
border: 1px solid var(--fm-line); border-radius: 999px; padding: .28rem .75rem; }
|
|
.fm-tools button:hover { color: var(--fm-fg); border-color: #2f3f6e; }
|
|
.fm-tools button.on { color: #fff; background: linear-gradient(180deg, #2a3b73, #1d2a55); border-color: #3b4f8f;
|
|
box-shadow: 0 0 14px rgba(100, 140, 255, .35); }
|
|
.fabric-map input.fm-search { display: inline-block; width: 11rem; font: inherit; font-size: .8rem; padding: .3rem .7rem; border-radius: 999px; margin: 0;
|
|
color: var(--fm-fg); background: rgba(255,255,255,.04); border: 1px solid var(--fm-line); }
|
|
.fm-stage { position: relative; }
|
|
.fm-canvas { min-height: 22rem; }
|
|
.fm-empty { padding: 4rem 2rem; text-align: center; color: var(--fm-dim); }
|
|
.fm-svg { display: block; width: 100%; cursor: grab; user-select: none; }
|
|
.fm-svg.dragging { cursor: grabbing; }
|
|
.fm-gridline { stroke: rgba(120, 150, 255, .06); stroke-width: 1; }
|
|
.fm-tier { fill: var(--fm-dim); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .75; text-anchor: middle; }
|
|
|
|
/* Cables, coloured by what they trained at. */
|
|
.fm-link { fill: none; stroke-linecap: round; opacity: .72; transition: opacity .2s, stroke-width .2s; }
|
|
.fm-link.sp-xdr { stroke: var(--fm-xdr); } .fm-link.sp-ndr { stroke: var(--fm-ndr); }
|
|
.fm-link.sp-hdr { stroke: var(--fm-hdr); } .fm-link.sp-edr { stroke: var(--fm-edr); } .fm-link.sp-slow { stroke: var(--fm-slow); }
|
|
.fm-link.host { opacity: .55; }
|
|
.mode-rails .fm-link.host { stroke: var(--rail); opacity: .8; }
|
|
.mode-rails .fm-link:not(.host) { stroke: #3a4670; opacity: .5; }
|
|
.fm-link.degraded { stroke: var(--fm-bad) !important; stroke-dasharray: 5 5; opacity: 1; filter: url(#fm-glow);
|
|
animation: fm-march 1s linear infinite, fm-pulse 1.6s ease-in-out infinite; }
|
|
@keyframes fm-march { to { stroke-dashoffset: -20; } }
|
|
@keyframes fm-pulse { 50% { stroke-opacity: .35; } }
|
|
.fm-warn circle { fill: #3b0d1a; stroke: var(--fm-bad); stroke-width: 1.5; filter: url(#fm-glow); }
|
|
.fm-warn text { fill: var(--fm-bad); font-size: 10px; font-weight: 800; text-anchor: middle; }
|
|
.fm-warn { cursor: help; }
|
|
|
|
/* Traffic: particles running the cables, up for sent, down for received. */
|
|
.fm-particle { filter: url(#fm-glow); pointer-events: none; }
|
|
.fm-particle.up { fill: #7dd3fc; } .fm-particle.down { fill: #c4b5fd; }
|
|
|
|
/* Switches. */
|
|
.fm-switch { cursor: pointer; }
|
|
.fm-switch rect { stroke-width: 1.2; transition: filter .2s; }
|
|
.fm-switch.t-leaf rect { stroke: #2dd4bf; } .fm-switch.t-spine rect { stroke: #a78bfa; } .fm-switch.t-core rect { stroke: #fbbf24; }
|
|
.fm-switch:hover rect, .fm-switch.hot rect { filter: url(#fm-glow); }
|
|
.fm-switch.has-bad rect { stroke: var(--fm-bad); }
|
|
.fm-name { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; }
|
|
.fm-sub { fill: var(--fm-dim); font-size: 8.5px; text-anchor: middle; }
|
|
.fm-use { stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-linecap: round; }
|
|
.fm-badge circle { fill: var(--fm-bad); filter: url(#fm-glow); }
|
|
.fm-badge text { fill: #fff; font-size: 9px; font-weight: 800; text-anchor: middle; }
|
|
|
|
/* Adapters. */
|
|
.fm-host { cursor: pointer; }
|
|
.fm-host circle { fill: #334066; stroke: #4b5a88; stroke-width: 1; }
|
|
.fm-host .fm-halo { fill: transparent; stroke: transparent; }
|
|
.fm-host.known circle:not(.fm-halo) { fill: #2dd4bf; stroke: #99f6e4; }
|
|
.mode-rails .fm-host.known circle:not(.fm-halo) { fill: var(--rail); stroke: #fff; }
|
|
.fm-host.known .fm-halo { stroke: rgba(45, 212, 191, .35); animation: fm-breathe 3s ease-in-out infinite; }
|
|
.fm-host.errs circle:not(.fm-halo) { stroke: var(--fm-slow); stroke-width: 2; }
|
|
.fm-host.down circle:not(.fm-halo) { fill: var(--fm-bad); stroke: #fecdd3; }
|
|
.fm-host.down .fm-halo { stroke: var(--fm-bad); animation: fm-breathe 1s ease-in-out infinite; }
|
|
.fm-host.found .fm-halo { stroke: #fff; stroke-width: 2; }
|
|
@keyframes fm-breathe { 50% { stroke-opacity: .1; r: 11; } }
|
|
.fm-hlabel { fill: var(--fm-dim); font-size: 8.5px; }
|
|
.fm-host:hover .fm-hlabel, .fm-host.hot .fm-hlabel { fill: #fff; }
|
|
|
|
/* Focus: hovering or choosing something fades what it does not touch. */
|
|
.fm-svg.focus .fm-link:not(.hot) { opacity: .08; }
|
|
.fm-svg.focus .fm-nodes > g:not(.hot) { opacity: .28; }
|
|
.fm-svg.focus .fm-link.hot { opacity: 1; stroke-width: 2.6; filter: url(#fm-glow); }
|
|
.fm-svg.focus .fm-particle { opacity: .35; }
|
|
.only-problems .fm-link:not(.degraded) { opacity: .06; }
|
|
.only-problems .fm-nodes > g:not(.has-bad):not(.down):not(.errs) { opacity: .2; }
|
|
|
|
.fm-tip { position: absolute; z-index: 3; max-width: 260px; pointer-events: none; font-size: .78rem; line-height: 1.45;
|
|
padding: .5rem .65rem; border-radius: 8px; background: rgba(12, 18, 40, .94); border: 1px solid #2c3b6b;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,.5); color: var(--fm-fg); }
|
|
.fm-panel { position: absolute; top: .75rem; right: .75rem; z-index: 2; width: 17rem; max-height: calc(100% - 1.5rem); overflow: auto;
|
|
padding: .85rem 1rem; border-radius: 12px; background: rgba(12, 18, 40, .92); border: 1px solid #2c3b6b;
|
|
box-shadow: 0 16px 40px rgba(0,0,0,.55); backdrop-filter: blur(8px); font-size: .82rem; }
|
|
.fm-panel h4 { margin: 0 0 .5rem; font-size: 1rem; color: #fff; }
|
|
.fm-panel dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: 0 0 .6rem; }
|
|
.fm-panel dt { color: var(--fm-dim); } .fm-panel dd { margin: 0; overflow-wrap: anywhere; }
|
|
.fm-panel code { background: none; color: var(--fm-fg); font-size: .75rem; }
|
|
.fm-panel a { color: #7dd3fc; }
|
|
.fm-panel ul { margin: .25rem 0; padding-left: 1rem; }
|
|
.fm-close { position: absolute; top: .4rem; right: .5rem; background: none; border: 0; color: var(--fm-dim); font-size: 1.2rem; cursor: pointer; }
|
|
.fm-bad { color: var(--fm-bad); } .fm-dim { color: var(--fm-dim); }
|
|
.fm-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding: .6rem 1rem .8rem; font-size: .74rem; color: var(--fm-dim);
|
|
border-top: 1px solid var(--fm-line); }
|
|
.fm-legend span { display: inline-flex; align-items: center; gap: .35rem; }
|
|
.fm-legend .sw { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
|
|
.fm-legend .sw.sp-xdr { background: var(--fm-xdr); } .fm-legend .sw.sp-ndr { background: var(--fm-ndr); }
|
|
.fm-legend .sw.sp-hdr { background: var(--fm-hdr); } .fm-legend .sw.sp-edr { background: var(--fm-edr); }
|
|
.fm-legend .sw.sp-slow { background: var(--fm-slow); }
|
|
.fm-legend .sw.degraded { background: repeating-linear-gradient(90deg, var(--fm-bad) 0 4px, transparent 4px 7px); }
|
|
.fm-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #334066; border: 1px solid #4b5a88; }
|
|
.fm-legend .dot.known { background: #2dd4bf; border-color: #99f6e4; } .fm-legend .dot.down { background: var(--fm-bad); }
|
|
.fm-legend .note { color: var(--fm-dim); opacity: .8; }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.fm-link.degraded, .fm-host .fm-halo { animation: none; }
|
|
}
|
|
.mode-rails .fm-host.down circle:not(.fm-halo) { fill: var(--fm-bad); stroke: #fecdd3; }
|
|
.fm-svg.focus .fm-warn { opacity: .25; }
|