187 lines
7.5 KiB
CSS
187 lines
7.5 KiB
CSS
/* ============================================================================
|
|
flowRS app shell: the page around an exported app, and the parts of the kit the
|
|
server draws its own way. Tokens only (styles/tokens.css): no colour is spelled here.
|
|
============================================================================ */
|
|
|
|
html,
|
|
body.frs-body {
|
|
margin: 0;
|
|
background: var(--fr-bg);
|
|
color: var(--fr-text);
|
|
}
|
|
.frs-page { display: flex; flex-direction: column; }
|
|
/* In an MCP host's frame: as tall as the content (the host sizes the frame from it). */
|
|
.fr-runonly.frs-embedded { min-height: 0; }
|
|
|
|
/* The bar: the app's name, what its program is doing, the skin switch. */
|
|
.frs-bar {
|
|
border-bottom: 1px solid var(--fr-border);
|
|
background: var(--fr-surface-1);
|
|
font-family: var(--fr-font-ui);
|
|
font-size: var(--fr-fs-sm);
|
|
}
|
|
.frs-bar-inner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--fr-space-2) var(--fr-space-4);
|
|
max-width: 1328px;
|
|
margin: 0 auto;
|
|
padding: var(--fr-space-3) var(--fr-space-6);
|
|
}
|
|
.frs-name { margin: 0; font-weight: var(--fr-fw-strong); color: var(--fr-text); overflow-wrap: anywhere; }
|
|
.frs-status { margin: 0; flex: 1; min-width: 0; color: var(--fr-text-2); font-variant-numeric: tabular-nums; }
|
|
.frs-skin { text-decoration: none; }
|
|
.frs-skin:focus-visible { outline: 2px solid var(--fr-focus); outline-offset: 2px; }
|
|
|
|
/* ---- Charts drawn on the server --------------------------------------------
|
|
The plot is a grid: a gutter for the y labels (its width a class, from the longest
|
|
label), the marks stretched to the plot with the markers over them in px, the x labels
|
|
under them. */
|
|
.frs-plot {
|
|
display: grid;
|
|
/* Room for the top tick's label, centred on the plot's top edge. */
|
|
padding-top: var(--fr-space-2);
|
|
grid-template-columns: var(--frs-gutter) minmax(0, 1fr);
|
|
grid-template-rows: 220px 24px;
|
|
container-type: inline-size;
|
|
}
|
|
.frs-gutter-s { --frs-gutter: 36px; }
|
|
.frs-gutter-m { --frs-gutter: 52px; }
|
|
.frs-gutter-l { --frs-gutter: 72px; }
|
|
.frs-gutter-xl { --frs-gutter: 96px; }
|
|
.frs-yaxis,
|
|
.frs-marks,
|
|
.frs-points,
|
|
.frs-xaxis { display: block; width: 100%; height: 100%; overflow: visible; }
|
|
.frs-yaxis { grid-column: 1; grid-row: 1; }
|
|
/* The markers share the marks' cell: no viewBox, so a circle is round in px, its centre a
|
|
percentage of the same box the marks stretch to. */
|
|
.frs-marks,
|
|
.frs-points { grid-column: 2; grid-row: 1; }
|
|
.frs-corner { grid-column: 1; grid-row: 2; }
|
|
.frs-xaxis { grid-column: 2; grid-row: 2; }
|
|
/* Over the marks, but only the dots themselves take the pointer (their tooltips): the
|
|
overlay's empty box lets it through to the hit areas under it. */
|
|
.frs-points { pointer-events: none; }
|
|
.frs-dot { stroke: var(--fr-surface-1); stroke-width: 1; pointer-events: visiblePainted; }
|
|
|
|
/* The x axis's narrow ticks (the plan's `narrow` set) take over in a plot narrower than the
|
|
full set fits: chart.rs works that width out from the labels and names it by a class. A
|
|
container query, so a narrow card on a wide screen swaps as a phone does. */
|
|
.frs-ticks-narrow { display: none; }
|
|
@container (max-width: 239.98px) {
|
|
.frs-narrow-240 .frs-ticks-full { display: none; }
|
|
.frs-narrow-240 .frs-ticks-narrow { display: block; }
|
|
}
|
|
@container (max-width: 319.98px) {
|
|
.frs-narrow-320 .frs-ticks-full { display: none; }
|
|
.frs-narrow-320 .frs-ticks-narrow { display: block; }
|
|
}
|
|
@container (max-width: 399.98px) {
|
|
.frs-narrow-400 .frs-ticks-full { display: none; }
|
|
.frs-narrow-400 .frs-ticks-narrow { display: block; }
|
|
}
|
|
@container (max-width: 479.98px) {
|
|
.frs-narrow-480 .frs-ticks-full { display: none; }
|
|
.frs-narrow-480 .frs-ticks-narrow { display: block; }
|
|
}
|
|
@container (max-width: 559.98px) {
|
|
.frs-narrow-560 .frs-ticks-full { display: none; }
|
|
.frs-narrow-560 .frs-ticks-narrow { display: block; }
|
|
}
|
|
@container (max-width: 639.98px) {
|
|
.frs-narrow-640 .frs-ticks-full { display: none; }
|
|
.frs-narrow-640 .frs-ticks-narrow { display: block; }
|
|
}
|
|
@container (max-width: 719.98px) {
|
|
.frs-narrow-720 .frs-ticks-full { display: none; }
|
|
.frs-narrow-720 .frs-ticks-narrow { display: block; }
|
|
}
|
|
@container (max-width: 799.98px) {
|
|
.frs-narrow-800 .frs-ticks-full { display: none; }
|
|
.frs-narrow-800 .frs-ticks-narrow { display: block; }
|
|
}
|
|
@container (max-width: 959.98px) {
|
|
.frs-narrow-960 .frs-ticks-full { display: none; }
|
|
.frs-narrow-960 .frs-ticks-narrow { display: block; }
|
|
}
|
|
@container (max-width: 1199.98px) {
|
|
.frs-narrow-1200 .frs-ticks-full { display: none; }
|
|
.frs-narrow-1200 .frs-ticks-narrow { display: block; }
|
|
}
|
|
|
|
/* A sparkline's last point: a circle in px laid over the stretched line, so it is round at
|
|
any width. */
|
|
.frs-spark-marks {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
}
|
|
.frs-spark-end { fill: var(--fr-accent); }
|
|
.fr-tone-mark-accent .frs-spark-end { fill: var(--fr-accent); }
|
|
|
|
/* A lamp whose verdict is neither pass nor fail (a clear fault lamp's "neutral"): the
|
|
plain lamp, its word in the secondary ink. */
|
|
.fr-led-verdict.fr-verdict-none .fr-led-word { color: var(--fr-text-2); }
|
|
/* A verdict not yet measured, or neither pass nor fail: the badge's own quiet look. */
|
|
.fr-badge.fr-tone-neutral { background: var(--fr-layer-pressed); color: var(--fr-text-2); }
|
|
|
|
/* A meter's track and fill, drawn as SVG so no style attribute moves the bar. */
|
|
.frs-meter { display: block; width: 100%; height: 8px; border-radius: var(--fr-radius-full); }
|
|
.frs-meter-track { fill: var(--fr-layer-track); }
|
|
.frs-meter-fill { fill: var(--fr-accent); }
|
|
.fr-tone-mark-good .frs-meter-fill { fill: var(--fr-good); }
|
|
.fr-tone-mark-warn .frs-meter-fill { fill: var(--fr-warn); }
|
|
.fr-tone-mark-crit .frs-meter-fill { fill: var(--fr-crit); }
|
|
.fr-tone-mark-info .frs-meter-fill { fill: var(--fr-info); }
|
|
.frs-meter-target { stroke: var(--fr-text); stroke-width: 2; }
|
|
.frs-meter-vertical .frs-meter { width: 16px; height: 120px; }
|
|
|
|
/* A long table scrolls inside its card. */
|
|
.frs-table-cap { max-height: 420px; }
|
|
.fr-chart-data .frs-table-cap { max-height: 240px; }
|
|
|
|
/* A control as the exported program has it: its value, fixed. */
|
|
.frs-fixed-value {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 40px;
|
|
height: auto;
|
|
font-variant-numeric: tabular-nums;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* An app's own drawing (Svg): inks by meaning. */
|
|
.frs-ink-text { fill: var(--fr-text); stroke: var(--fr-text); }
|
|
.frs-ink-accent { fill: var(--fr-accent); stroke: var(--fr-accent); }
|
|
.frs-ink-good { fill: var(--fr-good); stroke: var(--fr-good); }
|
|
.frs-ink-warn { fill: var(--fr-warn); stroke: var(--fr-warn); }
|
|
.frs-ink-crit { fill: var(--fr-crit); stroke: var(--fr-crit); }
|
|
.frs-ink-info { fill: var(--fr-info); stroke: var(--fr-info); }
|
|
.frs-stroke { fill: none; }
|
|
text.frs-ink-text,
|
|
text.frs-ink-accent,
|
|
text.frs-ink-good,
|
|
text.frs-ink-warn,
|
|
text.frs-ink-crit,
|
|
text.frs-ink-info { stroke: none; }
|
|
.frs-svg-text { font-family: var(--fr-font-ui); font-size: var(--fr-fs-sm); }
|
|
.frs-svg-small { font-family: var(--fr-font-ui); font-size: var(--fr-fs-xs); }
|
|
|
|
@media (max-width: 479px) {
|
|
.frs-bar-inner { padding: var(--fr-space-3) var(--fr-space-4); }
|
|
.frs-plot { grid-template-rows: 180px 24px; }
|
|
}
|
|
|
|
/* ---- Live controls --------------------------------------------------------
|
|
A control the program takes while it runs is the kit's own (slider, number field,
|
|
switch, select); the slider's fill is an SVG rectangle whose width the page's script
|
|
sets as an attribute, so no style attribute is ever written. */
|
|
.frs-track { display: block; width: 100%; }
|
|
.frs-slider-fill { fill: var(--fr-accent); }
|