Files
stack/assets/css/woodpecker.css
kert c81992184a
Some checks failed
CI / skinny-install (aco) (push) Successful in 54s
CI / skinny-install (api) (push) Successful in 32s
CI / skinny-install (bcda) (push) Successful in 33s
CI / skinny-install (bib) (push) Successful in 30s
CI / skinny-install (bls) (push) Successful in 26s
CI / lint-test (push) Successful in 3m19s
CI / skinny-install (ccw) (push) Successful in 27s
CI / skinny-install (cms) (push) Successful in 32s
CI / skinny-install (cli) (push) Successful in 38s
CI / skinny-install (conf) (push) Successful in 33s
CI / skinny-install (opps) (push) Successful in 43s
Infra CI / notebooks (push) Successful in 7s
Infra CI / zotero (push) Successful in 7s
Infra CI / docs (push) Failing after 10s
Infra CI / api (push) Successful in 13s
Infra CI / mc (push) Successful in 7s
CI / skinny-install (perf) (push) Successful in 31s
CI / skinny-install (pfs) (push) Successful in 30s
CI / skinny-install (rex) (push) Successful in 31s
Deploy / build-scan-report (push) Failing after 1m47s
feat: port fhirworx theme — editorial redesign based on hti5.org
Rip and replace nature/loch with fhirworx — a Federal Register / data
journalism aesthetic inspired by hti5.org.

Typography: Playfair Display for display headings, Source Serif 4 for
reading body, JetBrains Mono reserved for IDs, labels, metadata (docket
codes, commit hashes, query editors, file paths, ports). Stripped
carpet-bombed font-family: mono !important across inject.css and
per-service sheets; kept mono only where load-bearing (th, pre/code,
query editors, span IDs, badge/chip/tag, bucket names, query IDs).

Palette: warm cream (#F7F5F0) background, near-black warm foreground,
deep federal navy (#1C2B3A) primary/sidebar, indigo chart scale +
teal (support) + amber (opposition) semantic accents. PALETTE extended
to 8 colours (+ plum, gray, sepia) for categorical notebook charts.

Rename (no backwards compat):
- assets/nature.py → assets/fhirworx.py
- assets/css/loch.css → assets/css/fhirworx.css
- theme-loch.css → theme-fhirworx.css (Gitea)
- Altair theme registered as "fhirworx" via new alt.theme.register
  decorator API, eliminating the altair 5.5 deprecation warning
- Traefik inject-loch middleware → inject-fhirworx
- Gitea DEFAULT_THEME=fhirworx
- Delete empty theme-throwback.css stub

Rewrote infra/nginx/index.html and infra/gitea/custom/templates/home.tmpl
with editorial masthead (rule-line + Playfair headline + mono identifier
+ serif tagline + rule-line-thin), SERVICES eyebrow + Infrastructure h2,
tiles with .tile-eyebrow / .tile-title / .tile-desc / .tile-port
structure. Stripped letter-spacing: 2-4px tricks and text-transform:
uppercase from non-metadata elements across all per-service sheets.

Propagated import renames: src/conf/connect.py, src/aco/dag.py,
notebooks/acodb_explorer.py, tests/conf/test_connect.py,
tests/test_notebook_layout.py, docs/src/css/custom.css, README.md,
README.md.j2, compose.yml, infra/traefik/dynamic/services.yml.
2026-04-10 14:37:20 -04:00

403 lines
9.1 KiB
CSS

/* HTI-5 — Federal Register editorial design system for Woodpecker CI */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
/* HTI-5 Color Palette */
--background: #F7F5F0;
--foreground: #1A1A18;
--card: #FAFAF7;
--primary: #1C2B3A;
--primary-foreground: #F7F5F0;
--secondary: #EDEBE6;
--muted-foreground: #6B6B68;
--border: #D4D0C8;
--sidebar: #1C2B3A;
--sidebar-foreground: #B8C5D0;
--sidebar-accent: #253748;
--sidebar-accent-foreground: #EEE9E0;
--destructive: #C0392B;
--chart-4: #2E8B6E;
--chart-5: #C8702A;
--font-display: "Playfair Display", Georgia, serif;
--font-body: "Source Serif 4", Georgia, serif;
--font-mono: "JetBrains Mono", "Fira Code", monospace;
/* Woodpecker color overrides — mapped from hti5 tokens */
--color-wp-primary-100: #B8C5D0;
--color-wp-primary-200: #7A96AE;
--color-wp-primary-300: #1C2B3A;
--color-wp-primary-400: #162030;
--color-wp-primary-500: #0E1520;
--color-wp-success-100: #56B397;
--color-wp-success-200: #2E8B6E;
--color-wp-error-100: #D9534F;
--color-wp-error-200: #C0392B;
--color-wp-warning-100: #DDA060;
--color-wp-warning-200: #C8702A;
--color-wp-gray-100: #1A1A18;
--color-wp-gray-200: #6B6B68;
--color-wp-gray-300: #D4D0C8;
--color-wp-gray-400: #EDEBE6;
--color-wp-gray-500: #F7F5F0;
--color-wp-gray-600: #FAFAF7;
}
/* Global styles */
body,
html {
font-family: var(--font-body) !important;
background: var(--background) !important;
color: var(--foreground) !important;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
line-height: 1.3 !important;
}
h1 { font-size: 22px !important; color: var(--foreground) !important; }
h2 { font-size: 17px !important; color: var(--primary) !important; }
h3 { font-size: 14px !important; color: var(--foreground) !important; }
/* Header/Navbar */
header,
nav,
.navbar,
[class*="header"],
[class*="Header"] {
background: var(--sidebar) !important;
border-bottom: 3px solid var(--foreground) !important;
}
/* Sidebar */
aside,
[class*="sidebar"],
[class*="Sidebar"] {
background: var(--sidebar) !important;
border-right: 1px solid var(--sidebar-border, var(--sidebar-accent)) !important;
}
/* Main content area */
main,
[class*="content"],
[class*="Content"] {
background: transparent !important;
}
/* Cards and panels */
[class*="card"],
[class*="Card"],
[class*="panel"],
[class*="Panel"],
[class*="box"],
[class*="Box"] {
background: var(--card) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius, 0.2rem) !important;
}
/* Buttons — serif body for button labels */
button,
[class*="btn"],
[class*="Btn"],
[class*="button"],
[class*="Button"] {
font-family: var(--font-body) !important;
font-weight: 500 !important;
border-radius: var(--radius, 0.2rem) !important;
transition: all 0.15s ease !important;
}
/* Primary buttons */
[class*="primary"],
[class*="Primary"],
button[type="submit"] {
background: var(--primary) !important;
color: var(--primary-foreground) !important;
border: 1px solid var(--primary) !important;
}
[class*="primary"]:hover,
[class*="Primary"]:hover,
button[type="submit"]:hover {
background: var(--sidebar-accent) !important;
color: var(--sidebar-accent-foreground) !important;
}
/* Success/green buttons */
[class*="success"],
[class*="Success"],
[class*="green"],
[class*="Green"] {
background: var(--chart-4) !important;
color: #fff !important;
border: 1px solid var(--chart-4) !important;
}
[class*="success"]:hover,
[class*="Success"]:hover {
opacity: 0.85 !important;
}
/* Danger/red buttons */
[class*="danger"],
[class*="Danger"],
[class*="error"],
[class*="Error"],
[class*="red"],
[class*="Red"] {
background: var(--destructive) !important;
color: #fff !important;
}
/* Forms */
input,
textarea,
select {
font-family: var(--font-body) !important;
background: var(--card) !important;
color: var(--foreground) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius, 0.2rem) !important;
padding: 8px 12px !important;
}
/* Pipeline/repo names — Playfair for titles */
[class*="pipeline-name"],
[class*="PipelineName"],
[class*="repo-name"],
[class*="RepoName"] {
font-family: var(--font-display) !important;
font-weight: 700 !important;
}
/* Commit hashes, build numbers, durations — mono */
[class*="commit-hash"],
[class*="CommitHash"],
[class*="build-number"],
[class*="BuildNumber"],
[class*="duration"],
[class*="Duration"],
[class*="timestamp"],
[class*="Timestamp"] {
font-family: var(--font-mono) !important;
font-size: 12px !important;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--primary) !important;
outline: none !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent) !important;
}
/* Tables */
table {
background: var(--card) !important;
border: 1px solid var(--border) !important;
border-collapse: collapse !important;
}
th {
background: var(--primary) !important;
color: var(--primary-foreground) !important;
font-family: var(--font-mono) !important;
font-size: 10px !important;
text-transform: uppercase !important;
padding: 10px 12px !important;
border: 1px solid var(--sidebar-accent) !important;
}
td {
background: var(--card) !important;
color: var(--foreground) !important;
padding: 8px 12px !important;
border: 1px solid var(--border) !important;
}
tr:nth-child(even) td {
background: var(--secondary) !important;
}
tr:hover td {
background: var(--secondary) !important;
}
/* Pipeline/build status colors */
[class*="running"],
[class*="Running"],
[class*="pending"],
[class*="Pending"] {
color: var(--chart-5) !important;
}
[class*="success"],
[class*="Success"],
[class*="passed"],
[class*="Passed"] {
color: var(--chart-4) !important;
}
[class*="failure"],
[class*="Failure"],
[class*="failed"],
[class*="Failed"],
[class*="error"],
[class*="Error"] {
color: var(--destructive) !important;
}
/* Build logs */
pre,
code,
[class*="log"],
[class*="Log"],
[class*="console"],
[class*="Console"] {
font-family: var(--font-mono) !important;
background: var(--secondary) !important;
color: var(--foreground) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius, 0.2rem) !important;
}
/* Inline code */
code {
background: var(--secondary) !important;
color: var(--primary) !important;
padding: 2px 6px !important;
border: none !important;
}
/* Links */
a {
color: var(--primary) !important;
text-decoration: none !important;
}
a:hover {
color: var(--foreground) !important;
text-decoration: underline !important;
}
/* Dropdowns */
[class*="dropdown"],
[class*="Dropdown"],
[class*="menu"],
[class*="Menu"],
[class*="popover"],
[class*="Popover"] {
background: var(--card) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius, 0.2rem) !important;
}
[class*="dropdown"] li:hover,
[class*="menu"] li:hover,
[role="menuitem"]:hover,
[role="option"]:hover {
background: var(--secondary) !important;
}
/* Badges and tags */
[class*="badge"],
[class*="Badge"],
[class*="tag"],
[class*="Tag"],
[class*="label"],
[class*="Label"] {
font-family: var(--font-mono) !important;
font-size: 11px !important;
border-radius: var(--radius, 0.2rem) !important;
}
/* Tooltips */
[role="tooltip"],
[class*="tooltip"],
[class*="Tooltip"] {
font-family: var(--font-body) !important;
font-size: 13px !important;
background: var(--card) !important;
color: var(--foreground) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius, 0.2rem) !important;
}
/* Progress bars */
progress,
[class*="progress"],
[class*="Progress"] {
background: var(--secondary) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius, 0.2rem) !important;
}
progress::-webkit-progress-bar {
background: var(--secondary) !important;
}
progress::-webkit-progress-value {
background: var(--primary) !important;
}
/* Scrollbars */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--secondary);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--muted-foreground);
}
/* Selection */
::selection {
background: var(--primary) !important;
color: var(--primary-foreground) !important;
}
/* Icons - ensure visibility */
svg,
[class*="icon"],
[class*="Icon"] {
fill: currentColor;
}
/* Avatar images */
img[class*="avatar"],
[class*="avatar"] img {
border: 1px solid var(--border) !important;
border-radius: var(--radius, 0.2rem) !important;
}
/* Repo/pipeline list items */
[class*="item"],
[class*="Item"],
[class*="list-item"],
[class*="ListItem"] {
border-bottom: 1px solid var(--border) !important;
}
[class*="item"]:hover,
[class*="Item"]:hover {
background: var(--secondary) !important;
}