516 lines
12 KiB
CSS
516 lines
12 KiB
CSS
/* ---------------------------------------------------------------------------
|
||
* web1 — scientific instrument / research notebook
|
||
*
|
||
* Palette:
|
||
* page #fafaf8 off-white
|
||
* ink #1a1a1a charcoal
|
||
* mute #6b6b68 secondary text
|
||
* faint #b9b8b2 hairlines, disabled
|
||
* rule #e3e1db dividers
|
||
* accent #1f4e5f muted deep teal
|
||
* alarm #8a3a2a rust, for failures (sparingly)
|
||
* ------------------------------------------------------------------------- */
|
||
|
||
:root {
|
||
--page: #fafaf8;
|
||
--panel: #ffffff;
|
||
--ink: #1a1a1a;
|
||
--mute: #6b6b68;
|
||
--faint: #b9b8b2;
|
||
--rule: #e3e1db;
|
||
--rule-2: #ccc9c1;
|
||
--accent: #1f4e5f;
|
||
--accent-tint: #e9eff1;
|
||
--alarm: #8a3a2a;
|
||
--warm: #a77a2c;
|
||
--good: #3a6f3f;
|
||
|
||
--serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
|
||
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
|
||
"Inter", "Arial", sans-serif;
|
||
--mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", ui-monospace,
|
||
monospace;
|
||
|
||
--fs-base: 14px;
|
||
--lh-base: 1.55;
|
||
--space: 1rem;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background: var(--page);
|
||
color: var(--ink);
|
||
font-family: var(--sans);
|
||
font-size: var(--fs-base);
|
||
line-height: var(--lh-base);
|
||
font-feature-settings: "tnum" 1, "cv11" 1; /* tabular numerals */
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
code, kbd, pre, samp, .mono, .num {
|
||
font-family: var(--mono);
|
||
font-feature-settings: "tnum" 1;
|
||
}
|
||
|
||
a {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid transparent;
|
||
transition: border-color 120ms ease;
|
||
}
|
||
a:hover { border-bottom-color: var(--accent); }
|
||
|
||
hr {
|
||
border: 0;
|
||
border-top: 1px solid var(--rule);
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
/* ---------- shell ------------------------------------------------------- */
|
||
|
||
.masthead {
|
||
border-bottom: 1px solid var(--rule);
|
||
padding: 1.6rem 2.2rem 1.2rem;
|
||
background: var(--page);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
gap: 2rem;
|
||
}
|
||
.masthead .title {
|
||
font-family: var(--serif);
|
||
font-size: 1.55rem;
|
||
letter-spacing: -0.01em;
|
||
font-weight: 500;
|
||
margin: 0;
|
||
}
|
||
.masthead .title em {
|
||
font-style: italic;
|
||
color: var(--mute);
|
||
font-weight: 400;
|
||
}
|
||
.masthead .meta {
|
||
text-align: right;
|
||
color: var(--mute);
|
||
font-size: 0.78rem;
|
||
line-height: 1.5;
|
||
font-family: var(--mono);
|
||
}
|
||
.masthead .meta .dot {
|
||
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
|
||
background: var(--good); margin-right: 4px; vertical-align: 1px;
|
||
}
|
||
.masthead .meta .dot.bad { background: var(--alarm); }
|
||
|
||
main {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
|
||
gap: 0;
|
||
max-width: 1440px;
|
||
margin: 0 auto;
|
||
min-height: calc(100vh - 72px);
|
||
}
|
||
|
||
.col-left {
|
||
padding: 1.8rem 2rem 2rem 2.2rem;
|
||
border-right: 1px solid var(--rule);
|
||
}
|
||
.col-right {
|
||
padding: 1.8rem 2.2rem 2rem 2rem;
|
||
}
|
||
|
||
@media (max-width: 940px) {
|
||
main { grid-template-columns: 1fr; }
|
||
.col-left { border-right: 0; border-bottom: 1px solid var(--rule); }
|
||
}
|
||
|
||
/* ---------- typography / section labels -------------------------------- */
|
||
|
||
.section-label {
|
||
font-family: var(--sans);
|
||
font-size: 0.70rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: var(--mute);
|
||
margin: 0 0 0.6rem;
|
||
padding-bottom: 0.35rem;
|
||
border-bottom: 1px solid var(--rule);
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
}
|
||
.section-label .ordinal {
|
||
font-family: var(--mono);
|
||
font-weight: 500;
|
||
color: var(--faint);
|
||
font-size: 0.72rem;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.section + .section { margin-top: 1.9rem; }
|
||
|
||
.lead {
|
||
color: var(--mute);
|
||
font-size: 0.87rem;
|
||
font-style: italic;
|
||
font-family: var(--serif);
|
||
margin: 0.4rem 0 0.9rem;
|
||
max-width: 44ch;
|
||
}
|
||
|
||
/* ---------- form ------------------------------------------------------- */
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: max-content 1fr;
|
||
row-gap: 0.55rem;
|
||
column-gap: 1.2rem;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.form-grid label {
|
||
font-size: 0.82rem;
|
||
color: var(--ink);
|
||
font-variant-numeric: tabular-nums;
|
||
white-space: nowrap;
|
||
}
|
||
.form-grid label .hint {
|
||
display: block;
|
||
font-size: 0.72rem;
|
||
color: var(--mute);
|
||
font-style: italic;
|
||
font-family: var(--serif);
|
||
margin-top: 1px;
|
||
white-space: normal;
|
||
max-width: 24ch;
|
||
}
|
||
|
||
.form-grid input[type="text"],
|
||
.form-grid input[type="number"],
|
||
.form-grid select {
|
||
font-family: var(--mono);
|
||
font-size: 0.85rem;
|
||
color: var(--ink);
|
||
background: transparent;
|
||
border: 0;
|
||
border-bottom: 1px solid var(--rule-2);
|
||
padding: 3px 2px 4px;
|
||
width: 100%;
|
||
outline: none;
|
||
transition: border-color 120ms ease, background 120ms ease;
|
||
border-radius: 0;
|
||
}
|
||
.form-grid input[type="text"]:focus,
|
||
.form-grid input[type="number"]:focus,
|
||
.form-grid select:focus {
|
||
border-bottom-color: var(--accent);
|
||
background: var(--accent-tint);
|
||
}
|
||
.form-grid input[readonly] {
|
||
color: var(--mute);
|
||
background: transparent;
|
||
border-bottom-style: dotted;
|
||
}
|
||
|
||
.form-grid input[type="checkbox"] {
|
||
accent-color: var(--accent);
|
||
margin: 0;
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
select {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%),
|
||
linear-gradient(-45deg, transparent 50%, var(--mute) 50%);
|
||
background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%;
|
||
background-size: 5px 5px;
|
||
background-repeat: no-repeat;
|
||
padding-right: 18px;
|
||
}
|
||
|
||
/* reducer picker — a typographic list, not a dropdown */
|
||
.reducer-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 0.4rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-top: 1px solid var(--rule);
|
||
}
|
||
.reducer-list li { border-bottom: 1px solid var(--rule); }
|
||
.reducer-list input[type="radio"] { display: none; }
|
||
.reducer-list label {
|
||
display: grid;
|
||
grid-template-columns: 1.4rem 1fr auto;
|
||
gap: 0.6rem;
|
||
padding: 0.55rem 0.2rem 0.55rem 0.1rem;
|
||
cursor: pointer;
|
||
transition: background 100ms ease;
|
||
}
|
||
.reducer-list label:hover { background: var(--accent-tint); }
|
||
.reducer-list .mark {
|
||
font-family: var(--mono);
|
||
color: var(--faint);
|
||
text-align: center;
|
||
font-size: 0.9rem;
|
||
line-height: 1.1;
|
||
}
|
||
.reducer-list input:checked + label {
|
||
background: var(--accent-tint);
|
||
}
|
||
.reducer-list input:checked + label .mark { color: var(--accent); }
|
||
.reducer-list input:checked + label .name { color: var(--accent); font-weight: 600; }
|
||
.reducer-list .name {
|
||
font-family: var(--sans);
|
||
font-size: 0.88rem;
|
||
font-weight: 500;
|
||
}
|
||
.reducer-list .blurb {
|
||
display: block;
|
||
color: var(--mute);
|
||
font-size: 0.76rem;
|
||
font-style: italic;
|
||
font-family: var(--serif);
|
||
margin-top: 1px;
|
||
}
|
||
.reducer-list .pkg {
|
||
font-family: var(--mono);
|
||
color: var(--faint);
|
||
font-size: 0.72rem;
|
||
align-self: start;
|
||
}
|
||
|
||
/* advanced disclosure */
|
||
details.advanced {
|
||
margin-top: 0.8rem;
|
||
border-top: 1px dashed var(--rule);
|
||
padding-top: 0.6rem;
|
||
}
|
||
details.advanced > summary {
|
||
cursor: pointer;
|
||
list-style: none;
|
||
color: var(--mute);
|
||
font-size: 0.74rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
font-weight: 600;
|
||
padding: 0.2rem 0;
|
||
user-select: none;
|
||
}
|
||
details.advanced > summary::-webkit-details-marker { display: none; }
|
||
details.advanced > summary::before {
|
||
content: "[ + ]";
|
||
font-family: var(--mono);
|
||
color: var(--faint);
|
||
margin-right: 0.5rem;
|
||
letter-spacing: 0;
|
||
}
|
||
details.advanced[open] > summary::before { content: "[ − ]"; color: var(--accent); }
|
||
|
||
.advanced-body { padding-top: 0.5rem; }
|
||
|
||
/* submit */
|
||
.actions {
|
||
margin-top: 1.4rem;
|
||
padding-top: 1rem;
|
||
border-top: 1px solid var(--rule);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
button.submit {
|
||
font-family: var(--sans);
|
||
font-size: 0.82rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.09em;
|
||
text-transform: uppercase;
|
||
color: var(--page);
|
||
background: var(--accent);
|
||
border: 1px solid var(--accent);
|
||
padding: 0.55rem 1.2rem;
|
||
border-radius: 1px;
|
||
cursor: pointer;
|
||
transition: background 120ms ease;
|
||
}
|
||
button.submit:hover { background: #143642; }
|
||
button.submit:disabled { background: var(--faint); border-color: var(--faint); cursor: not-allowed; }
|
||
|
||
.actions .foot-note {
|
||
font-size: 0.72rem;
|
||
color: var(--mute);
|
||
font-style: italic;
|
||
font-family: var(--serif);
|
||
}
|
||
|
||
.flash {
|
||
padding: 0.6rem 0.8rem;
|
||
margin: 0.6rem 0;
|
||
border-left: 2px solid var(--accent);
|
||
background: var(--accent-tint);
|
||
font-size: 0.82rem;
|
||
}
|
||
.flash.err { border-left-color: var(--alarm); background: #f4e8e4; color: var(--alarm); }
|
||
|
||
/* ---------- runs list -------------------------------------------------- */
|
||
|
||
.run-count {
|
||
font-family: var(--mono);
|
||
color: var(--faint);
|
||
font-size: 0.72rem;
|
||
letter-spacing: 0;
|
||
text-transform: none;
|
||
}
|
||
|
||
.runs {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
border-top: 1px solid var(--rule);
|
||
}
|
||
.runs li.run {
|
||
border-bottom: 1px solid var(--rule);
|
||
padding: 0.85rem 0 0.85rem;
|
||
display: grid;
|
||
grid-template-columns: 5.5rem 1fr;
|
||
column-gap: 1rem;
|
||
align-items: start;
|
||
}
|
||
.runs li.run.just-submitted {
|
||
background: linear-gradient(to right, var(--accent-tint), transparent 60%);
|
||
padding-left: 0.55rem;
|
||
margin-left: -0.55rem;
|
||
}
|
||
|
||
.run .stamp {
|
||
font-family: var(--mono);
|
||
font-size: 0.72rem;
|
||
color: var(--mute);
|
||
line-height: 1.3;
|
||
padding-top: 2px;
|
||
}
|
||
.run .stamp .id {
|
||
display: block;
|
||
color: var(--faint);
|
||
font-size: 0.68rem;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.run .body { min-width: 0; }
|
||
|
||
.run .line1 {
|
||
display: flex;
|
||
gap: 0.55rem;
|
||
align-items: baseline;
|
||
flex-wrap: wrap;
|
||
}
|
||
.run .badge {
|
||
font-family: var(--mono);
|
||
font-size: 0.68rem;
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
padding: 1px 6px;
|
||
border: 1px solid currentColor;
|
||
border-radius: 1px;
|
||
line-height: 1.2;
|
||
}
|
||
.badge.running { color: var(--accent); background: var(--accent-tint); }
|
||
.badge.scheduled,
|
||
.badge.pending { color: var(--mute); }
|
||
.badge.completed { color: var(--good); background: #edf1ed; }
|
||
.badge.failed,
|
||
.badge.crashed,
|
||
.badge.cancelled { color: var(--alarm); background: #f4e8e4; }
|
||
|
||
.run .recipe {
|
||
font-family: var(--serif);
|
||
font-size: 0.92rem;
|
||
font-style: italic;
|
||
color: var(--ink);
|
||
}
|
||
.run .recipe .embedder { font-style: normal; font-family: var(--mono); font-size: 0.82rem; color: var(--accent); }
|
||
.run .recipe .generator { font-style: normal; font-family: var(--mono); font-size: 0.82rem; color: var(--mute); }
|
||
|
||
.run .paramline {
|
||
margin-top: 0.25rem;
|
||
font-family: var(--mono);
|
||
font-size: 0.72rem;
|
||
color: var(--mute);
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0 1.1rem;
|
||
row-gap: 2px;
|
||
}
|
||
.run .paramline .k { color: var(--faint); }
|
||
|
||
.run .outputs {
|
||
margin-top: 0.45rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0 1.2rem;
|
||
row-gap: 4px;
|
||
font-size: 0.8rem;
|
||
font-family: var(--sans);
|
||
}
|
||
.run .outputs .tag {
|
||
font-family: var(--mono);
|
||
font-size: 0.7rem;
|
||
color: var(--faint);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
margin-right: 0.25rem;
|
||
}
|
||
.run .outputs a[aria-disabled="true"] {
|
||
color: var(--faint);
|
||
font-style: italic;
|
||
cursor: default;
|
||
pointer-events: none;
|
||
}
|
||
.run .outputs a[aria-disabled="true"]::after {
|
||
content: " — waiting";
|
||
color: var(--faint);
|
||
font-size: 0.72rem;
|
||
font-family: var(--serif);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* empty runs */
|
||
.empty {
|
||
padding: 1.4rem 0;
|
||
color: var(--mute);
|
||
font-style: italic;
|
||
font-family: var(--serif);
|
||
border-bottom: 1px solid var(--rule);
|
||
}
|
||
|
||
/* footer */
|
||
.colophon {
|
||
max-width: 1440px;
|
||
margin: 0 auto;
|
||
padding: 1rem 2.2rem 2rem;
|
||
color: var(--faint);
|
||
font-size: 0.72rem;
|
||
font-family: var(--mono);
|
||
letter-spacing: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
border-top: 1px solid var(--rule);
|
||
}
|
||
.colophon span.k { color: var(--mute); }
|
||
|
||
/* subtle htmx indicator */
|
||
.htmx-indicator {
|
||
opacity: 0;
|
||
transition: opacity 180ms ease;
|
||
color: var(--mute);
|
||
font-family: var(--mono);
|
||
font-size: 0.74rem;
|
||
}
|
||
.htmx-request .htmx-indicator { opacity: 1; }
|
||
.htmx-request.htmx-indicator { opacity: 1; }
|