Spaces:
Running
Running
File size: 3,990 Bytes
5ea40ce 39a61da b64beb5 39a61da b64beb5 39a61da 5dfaccc 39a61da 1cc98cf 5ea40ce 1cc98cf 39a61da 1cc98cf 39a61da | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | /* controls.css, shared interactive atoms used by every demo card:
the demo card frame, demo-toolbar row, action buttons, pill toggles,
stub placeholders for unbuilt demos, and the .status pill (idle /
streaming / error). */
/* --- Demo card (the interactive box inside each section) --- */
.demo {
background: #fff; border: 1px solid #ddd;
padding: 24px; margin: 24px 0;
}
.demo-toolbar {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
margin-bottom: 16px;
font-family: "JetBrains Mono", monospace; font-size: 10px;
color: #666; text-transform: uppercase; letter-spacing: 1px;
}
.demo-toolbar .spacer { flex: 1; }
/* --- Buttons ---
`.pill` size is the canonical pill size used across every demo (the
§7 Species tree toolbar set the precedent: 11px mono / 5px 11px
padding / 6px gap reads cleanly without dominating the toolbar).
Demo-specific stylesheets only override colour or text-transform,
never the size, so the pill rhythm stays identical between sections. */
button.action, .pill {
font-family: "JetBrains Mono", monospace;
font-size: 11px; font-weight: 400;
padding: 5px 11px; border: 1px solid #ccc; border-radius: 3px;
background: #fff; color: #555; cursor: pointer;
text-transform: uppercase; letter-spacing: 1.5px;
transition: all 0.15s;
}
button.action:hover, .pill:hover { border-color: #888; color: #1f1f1d; }
button.action.primary { background: #1f1f1d; color: #fff; border-color: #1f1f1d; }
button.action.primary:hover { background: #000; }
button.action:disabled { opacity: 0.4; cursor: not-allowed; }
button.action.primary:disabled { background: #888; border-color: #888; }
.pill.active { background: #1f1f1d; color: #fff; border-color: #1f1f1d; }
/* flex-wrap so pill rows (variants, genes, species…) break onto a second
line on narrow viewports instead of overflowing the .demo-toolbar to
the right. The 6px gap doubles as the row-gap when wrapping kicks in. */
.pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* Mobile: force the pills span onto its own toolbar row (`flex-basis: 100%`)
so labels like "color by" / "highlights" stack above and the pills get
the full card width to wrap into. Without this, the label eats horizontal
space, the pills get squeezed, and you end up with awkward orphan-pill
rows ("GENE LENGTH" alone, "MITOCHONDRIAL" alone). The spacer is dropped
too, otherwise it leaves a phantom blank row before the trailing action
buttons (which then wrap to their own row at their natural width). */
@media (max-width: 600px) {
.demo-toolbar .pills { flex: 0 0 100%; }
.demo-toolbar .spacer { display: none; }
}
/* --- Stub placeholder for unbuilt demos --- */
.stub {
padding: 48px 24px; text-align: center; color: #999;
font-family: "JetBrains Mono", monospace; font-size: 11px;
text-transform: uppercase; letter-spacing: 2px;
border: 1px dashed #ddd; background: #fff;
}
.stub-tag {
display: inline-block; padding: 2px 8px;
border: 1px solid #ddd; border-radius: 2px;
font-size: 9px; color: #aaa; margin-bottom: 8px;
}
/* --- Status pill (streaming / error / done · X bp) shared by demo
toolbars. Hidden by default until a real state happens, there's
no "idle" UI; before the user has done anything, no pill at all.
setStatus() in each demo adds/removes .is-hidden based on whether
it has something meaningful to show. --- */
.status {
font-family: "JetBrains Mono", monospace;
font-size: 10px; color: #666;
text-transform: uppercase; letter-spacing: 1.5px;
display: inline-flex; align-items: center; gap: 6px;
margin-left: 8px;
}
.status.is-hidden { display: none; }
.status .dot {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: #888;
}
/* `pulse` keyframe lives in base.css so it's defined before any consumer. */
.status.streaming .dot { background: #317f3f; animation: pulse 1.2s ease-in-out infinite; }
.status.error { color: #b00020; }
|