16f3b43974
Some checks failed
CI / skinny-install (aco) (push) Successful in 1m12s
CI / skinny-install (api) (push) Successful in 30s
CI / skinny-install (bcda) (push) Successful in 36s
CI / skinny-install (bib) (push) Successful in 35s
CI / skinny-install (bls) (push) Successful in 27s
CI / skinny-install (ccw) (push) Successful in 32s
CI / skinny-install (cli) (push) Successful in 41s
CI / skinny-install (cms) (push) Successful in 37s
CI / skinny-install (conf) (push) Successful in 38s
CI / skinny-install (opps) (push) Successful in 33s
CI / skinny-install (perf) (push) Successful in 38s
CI / skinny-install (pfs) (push) Successful in 38s
CI / skinny-install (rex) (push) Successful in 34s
Deploy / build-scan-report (push) Failing after 46s
Infra CI / notebooks (push) Failing after 25s
Infra CI / zotero (push) Successful in 12s
Infra CI / docs (push) Failing after 16s
CI / lint-test (push) Failing after 11m2s
Infra CI / mc (push) Successful in 21s
Infra CI / api (push) Successful in 29s
Package Supply Chain / pkg-supply-chain (push) Failing after 41s
Mail: Maddy on DO (corwins.media+Resend, fhirworx.io+Postmark), touchless/stateless/idempotent. Gitea SMTP via env_file. CMS inbox at cmsupdates@mail.fhirworx.io with IMAP→bib poller. Bib: regulations.gov v4 client, Federal Register discovery, 164K comment backfill (running), IMAP email ingest, Zotero sync routing. PRISMA: altcha PoW solver, CrossRef DOI resolution, 83/129 PDFs. Zotero: schema parity, ops module, CLI, fail-fast guard. CI: docs.Dockerfile COPY glob fix (tracks #341). Infra: Gitea+marimo fhirworx themes, IOM/OIG modules.
607 lines
24 KiB
CSS
607 lines
24 KiB
CSS
/* =============================================================================
|
|
Fhirworx — Gitea theme (light variant)
|
|
=============================================================================
|
|
Structural reference: Gitea v1.25.4 web_src/css/themes/theme-gitea-light.css.
|
|
Variable ORDER in :root below mirrors upstream line-for-line so future Gitea
|
|
version bumps produce clean 3-way diffs (git merge). Only the VALUES change.
|
|
Component overrides (below :root) target selectors that can't be reshaped by
|
|
variable values alone (e.g. #navbar dark-surface sweep).
|
|
========================================================================== */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
|
|
|
gitea-theme-meta-info {
|
|
--theme-display-name: "Fhirworx";
|
|
}
|
|
|
|
:root {
|
|
/* --- Fhirworx source-of-truth palette ----------------------------------- */
|
|
--fw-background: #F7F5F0; /* cream body */
|
|
--fw-foreground: #1A1A18; /* near-black body text */
|
|
--fw-card: #FFFFFF; /* pure-white surfaces (separates from body) */
|
|
--fw-card-hover: #F3F0EA;
|
|
--fw-primary: #1C2B3A; /* dark navy; nav + primary button */
|
|
--fw-primary-foreground: #F7F5F0;
|
|
--fw-secondary: #EDEBE6; /* warm beige subtle bg */
|
|
--fw-muted-foreground: #6B6B68;
|
|
--fw-border: #B8B3A4; /* warm beige-darker (visible on cream) */
|
|
--fw-nav-bg: #1C2B3A;
|
|
--fw-nav-text: #F0F4F8;
|
|
--fw-nav-hover-bg: #253748;
|
|
--fw-nav-active-bg: #2E4359;
|
|
--fw-destructive: #C0392B;
|
|
--fw-link: #2D5F7F; /* editorial blue link */
|
|
--fw-chart-3: #A88B5C;
|
|
--fw-chart-5: #C8702A;
|
|
|
|
/* Font pipeline: Gitea composes
|
|
--fonts-regular: var(--fonts-override, var(--fonts-proportional)), ...
|
|
in base.css:59. Setting --fonts-override here propagates to every .ui.*
|
|
component, tab, button, dropdown, menu — single hook, whole UI. */
|
|
--fonts-override: "Source Serif 4", Georgia, serif;
|
|
--fonts-monospace: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
|
|
/* ======================================================================= */
|
|
/* BELOW: Gitea variables in upstream order (theme-gitea-light.css). */
|
|
/* Any variable present upstream MUST be present here (clean-diff rule). */
|
|
/* ======================================================================= */
|
|
|
|
--is-dark-theme: false;
|
|
--color-primary: var(--fw-primary);
|
|
--color-primary-contrast: var(--fw-primary-foreground);
|
|
--color-primary-dark-1: #172530;
|
|
--color-primary-dark-2: #121F28;
|
|
--color-primary-dark-3: #0E1920;
|
|
--color-primary-dark-4: #0A1418;
|
|
--color-primary-dark-5: #060D11;
|
|
--color-primary-dark-6: #030609;
|
|
--color-primary-dark-7: #010203;
|
|
--color-primary-light-1: #2E4A63;
|
|
--color-primary-light-2: #3F6683;
|
|
--color-primary-light-3: #5684A3;
|
|
--color-primary-light-4: #7BA0BC;
|
|
--color-primary-light-5: #A5BCCD;
|
|
--color-primary-light-6: #D2DDE6;
|
|
--color-primary-light-7: #EEF2F6;
|
|
--color-primary-alpha-10: #1C2B3A19;
|
|
--color-primary-alpha-20: #1C2B3A33;
|
|
--color-primary-alpha-30: #1C2B3A4B;
|
|
--color-primary-alpha-40: #1C2B3A66;
|
|
--color-primary-alpha-50: #1C2B3A80;
|
|
--color-primary-alpha-60: #1C2B3A99;
|
|
--color-primary-alpha-70: #1C2B3AB3;
|
|
--color-primary-alpha-80: #1C2B3ACC;
|
|
--color-primary-alpha-90: #1C2B3AE1;
|
|
--color-primary-hover: var(--color-primary-light-1);
|
|
--color-primary-active: var(--color-primary-dark-1);
|
|
|
|
/* Secondary drives nearly every 1px border in Gitea (segments, tables,
|
|
menus, inputs, dropdowns). Must be distinct from body. */
|
|
--color-secondary: var(--fw-border);
|
|
--color-secondary-dark-1: #A49F90;
|
|
--color-secondary-dark-2: #908B7D;
|
|
--color-secondary-dark-3: #7D7869;
|
|
--color-secondary-dark-4: #6A6558;
|
|
--color-secondary-dark-5: #5A554A;
|
|
--color-secondary-dark-6: #49453C;
|
|
--color-secondary-dark-7: #3A372F;
|
|
--color-secondary-dark-8: #2C2924;
|
|
--color-secondary-dark-9: #221F1B;
|
|
--color-secondary-dark-10: #181613;
|
|
--color-secondary-dark-11: #0F0E0C;
|
|
--color-secondary-dark-12: #050504;
|
|
--color-secondary-dark-13: #010100;
|
|
--color-secondary-light-1: #C7C3B6;
|
|
--color-secondary-light-2: #D4D0C4;
|
|
--color-secondary-light-3: #E0DCD1;
|
|
--color-secondary-light-4: #ECE9E1;
|
|
--color-secondary-alpha-10: #B8B3A419;
|
|
--color-secondary-alpha-20: #B8B3A433;
|
|
--color-secondary-alpha-30: #B8B3A44B;
|
|
--color-secondary-alpha-40: #B8B3A466;
|
|
--color-secondary-alpha-50: #B8B3A480;
|
|
--color-secondary-alpha-60: #B8B3A499;
|
|
--color-secondary-alpha-70: #B8B3A4B3;
|
|
--color-secondary-alpha-80: #B8B3A4CC;
|
|
--color-secondary-alpha-90: #B8B3A4E1;
|
|
--color-secondary-button: var(--color-secondary-dark-4);
|
|
--color-secondary-hover: var(--color-secondary-dark-5);
|
|
--color-secondary-active: var(--color-secondary-dark-6);
|
|
|
|
/* console colors */
|
|
--color-console-fg: #F7F5F0;
|
|
--color-console-fg-subtle: #BDC4CC;
|
|
--color-console-bg: #0F1419;
|
|
--color-console-border: #2A323A;
|
|
--color-console-hover-bg: #1E2730;
|
|
--color-console-active-bg: #2A323A;
|
|
--color-console-menu-bg: #1A2028;
|
|
--color-console-menu-border: #3A4552;
|
|
|
|
/* named colors (darkened where upstream hue fails AA on cream) */
|
|
--color-red: var(--fw-destructive);
|
|
--color-orange: var(--fw-chart-5);
|
|
--color-yellow: #D4A017;
|
|
--color-olive: #8B9A4C;
|
|
--color-green: #247058; /* 5.45:1 on cream (upstream #21ba45 = 2.9:1) */
|
|
--color-teal: #3A9A94;
|
|
--color-blue: var(--fw-link);
|
|
--color-violet: #6B52A3;
|
|
--color-purple: #8A4BA8;
|
|
--color-pink: #B85890;
|
|
--color-brown: var(--fw-chart-3);
|
|
--color-black: var(--fw-foreground);
|
|
--color-red-light: #D66A5C;
|
|
--color-orange-light: #DB8A4C;
|
|
--color-yellow-light: #E5C04A;
|
|
--color-olive-light: #B3C45C;
|
|
--color-green-light: #4EA988;
|
|
--color-teal-light: #5FB5AF;
|
|
--color-blue-light: #4E82A3;
|
|
--color-violet-light: #8974B8;
|
|
--color-purple-light: #A26BC0;
|
|
--color-pink-light: #CE7AAA;
|
|
--color-brown-light: #C0A280;
|
|
--color-black-light: #4A4A47;
|
|
--color-red-dark-1: #A93024;
|
|
--color-orange-dark-1: #B4621F;
|
|
--color-yellow-dark-1: #B38712;
|
|
--color-olive-dark-1: #6E7A38;
|
|
--color-green-dark-1: #1E5E49;
|
|
--color-teal-dark-1: #2C7E78;
|
|
--color-blue-dark-1: #244B63;
|
|
--color-violet-dark-1: #55418A;
|
|
--color-purple-dark-1: #6E388A;
|
|
--color-pink-dark-1: #963F70;
|
|
--color-brown-dark-1: #876F49;
|
|
--color-black-dark-1: #26252B;
|
|
--color-red-dark-2: #8D2720;
|
|
--color-orange-dark-2: #9A5018;
|
|
--color-yellow-dark-2: #8F6C0E;
|
|
--color-olive-dark-2: #54602A;
|
|
--color-green-dark-2: #17483A;
|
|
--color-teal-dark-2: #225F5B;
|
|
--color-blue-dark-2: #1C3A4E;
|
|
--color-violet-dark-2: #42336C;
|
|
--color-purple-dark-2: #562B6C;
|
|
--color-pink-dark-2: #723057;
|
|
--color-brown-dark-2: #6B583A;
|
|
--color-black-dark-2: #18181C;
|
|
|
|
/* ansi (terminal) — leave upstream values, these render on dark console bg */
|
|
--color-ansi-black: #1E2327;
|
|
--color-ansi-red: #CC4848;
|
|
--color-ansi-green: #87AB63;
|
|
--color-ansi-yellow: #CC9903;
|
|
--color-ansi-blue: #3A8AC6;
|
|
--color-ansi-magenta: #D22E8B;
|
|
--color-ansi-cyan: #00918A;
|
|
--color-ansi-white: var(--color-console-fg-subtle);
|
|
--color-ansi-bright-black: #46494D;
|
|
--color-ansi-bright-red: #D15A5A;
|
|
--color-ansi-bright-green: #93B373;
|
|
--color-ansi-bright-yellow: #EAAF03;
|
|
--color-ansi-bright-blue: #4E96CC;
|
|
--color-ansi-bright-magenta: #D74397;
|
|
--color-ansi-bright-cyan: #00B6AD;
|
|
--color-ansi-bright-white: var(--color-console-fg);
|
|
|
|
/* other */
|
|
--color-grey: var(--fw-muted-foreground);
|
|
--color-grey-light: #8A8A87;
|
|
--color-gold: var(--fw-chart-3);
|
|
--color-white: #FFFFFF;
|
|
|
|
/* diff colors — softened for cream body */
|
|
--color-diff-added-linenum-bg: #CDEED6;
|
|
--color-diff-added-row-bg: #E2F5E8;
|
|
--color-diff-added-row-border: #C2E0CB;
|
|
--color-diff-added-word-bg: #A8E0B7;
|
|
--color-diff-moved-row-bg: #EEF4D8;
|
|
--color-diff-moved-row-border: #D4DE93;
|
|
--color-diff-removed-linenum-bg: #F5C8C5;
|
|
--color-diff-removed-row-bg: #FAE8E8;
|
|
--color-diff-removed-row-border: #EBBFBF;
|
|
--color-diff-removed-word-bg: #F3B5BC;
|
|
--color-diff-inactive: #EEECE7;
|
|
|
|
--color-error-border: #D48B8B;
|
|
--color-error-bg: #F6E5E4;
|
|
--color-error-bg-active:#E8ADAD;
|
|
--color-error-bg-hover: #F0C8C8;
|
|
--color-error-text: #8E2E2E;
|
|
--color-success-border: #A3C293;
|
|
--color-success-bg: #E8F2DD;
|
|
--color-success-text: #264F26;
|
|
--color-warning-border: #C9BA9B;
|
|
--color-warning-bg: #F8F0DC;
|
|
--color-warning-text: #5A3D10;
|
|
--color-info-border: #A5BCCD;
|
|
--color-info-bg: #E8F0F6;
|
|
--color-info-text: var(--color-blue); /* distinct from primary navy */
|
|
|
|
--color-red-badge: var(--color-red);
|
|
--color-red-badge-bg: #C0392B1A;
|
|
--color-red-badge-hover-bg: #C0392B4D;
|
|
--color-green-badge: var(--color-green);
|
|
--color-green-badge-bg: #2470581A;
|
|
--color-green-badge-hover-bg:#2470584D;
|
|
--color-yellow-badge: var(--color-yellow);
|
|
--color-yellow-badge-bg: #D4A0171A;
|
|
--color-yellow-badge-hover-bg:#D4A0174D;
|
|
--color-orange-badge: var(--color-orange);
|
|
--color-orange-badge-bg: #C8702A1A;
|
|
--color-orange-badge-hover-bg:#C8702A4D;
|
|
|
|
--color-git: #F05133;
|
|
--color-logo: var(--fw-primary);
|
|
|
|
/* target-based colors */
|
|
--color-body: var(--fw-background);
|
|
--color-box-header: var(--fw-secondary);
|
|
--color-box-body: var(--fw-card);
|
|
--color-box-body-highlight: var(--color-primary-light-7);
|
|
--color-text-dark: #0D0D0C;
|
|
--color-text: var(--fw-foreground);
|
|
--color-text-light: #2E2E2C;
|
|
--color-text-light-1: #454542;
|
|
--color-text-light-2: #595955;
|
|
--color-text-light-3: #6E6E6A;
|
|
--color-footer: var(--color-nav-bg);
|
|
--color-timeline: var(--fw-border);
|
|
--color-input-text: var(--color-text-dark);
|
|
--color-input-background: var(--fw-card);
|
|
--color-input-toggle-background: var(--fw-border);
|
|
--color-input-border: var(--color-secondary);
|
|
--color-input-border-hover: var(--color-secondary-dark-2);
|
|
|
|
/* Striped-table "--color-light": upstream is ~3% black on white; on cream
|
|
that's ~1.5% darker = invisible stripe. Opaque light-tan instead. */
|
|
--color-light: #EFECE5;
|
|
--color-light-mimic-enabled: rgba(0, 0, 0, calc(16 / 255 * 222 / 255 / var(--opacity-disabled)));
|
|
--color-light-border: #00001728;
|
|
--color-hover: #00001710;
|
|
--color-hover-opaque: var(--fw-card-hover);
|
|
--color-active: #0000171F;
|
|
|
|
/* Dropdown/menu panel bg: upstream uses #f8f9fb (off-white). We promote to
|
|
pure white so panels over the cream body have a real surface break.
|
|
This is THE variable the user's recent "transparent dropdown" bug hit —
|
|
if it resolves to `initial`/transparent the panel disappears. */
|
|
--color-menu: var(--fw-card);
|
|
--color-card: var(--fw-card);
|
|
--color-markup-table-row: #00306008;
|
|
--color-markup-code-block: #00306010;
|
|
--color-markup-code-inline:#00306014;
|
|
--color-button: var(--fw-card);
|
|
--color-code-bg: var(--fw-card);
|
|
--color-shadow: #00001726;
|
|
--color-shadow-opaque: var(--fw-border);
|
|
--color-secondary-bg: var(--fw-secondary);
|
|
--color-expand-button: var(--color-primary-light-6);
|
|
--color-placeholder-text: var(--color-text-light-3);
|
|
--color-editor-line-highlight: var(--color-primary-light-7);
|
|
--color-project-column-bg: var(--color-secondary-light-4);
|
|
--color-caret: var(--color-text-dark);
|
|
--color-reaction-bg: #0000170A;
|
|
--color-reaction-hover-bg: var(--color-primary-light-6);
|
|
--color-reaction-active-bg: var(--color-primary-light-5);
|
|
--color-tooltip-text: var(--fw-primary-foreground);
|
|
--color-tooltip-bg: #111B25F0;
|
|
|
|
/* NAVBAR — fhirworx signature: dark navy bar over cream body. */
|
|
--color-nav-bg: var(--fw-nav-bg);
|
|
--color-nav-hover-bg: var(--fw-nav-hover-bg);
|
|
--color-nav-text: var(--fw-nav-text);
|
|
--color-secondary-nav-bg: var(--color-secondary-light-4);
|
|
|
|
--color-label-text: var(--fw-foreground);
|
|
--color-label-bg: #94908648;
|
|
--color-label-hover-bg: #9490869E;
|
|
--color-label-active-bg: #949086E6;
|
|
|
|
--color-accent: var(--fw-primary);
|
|
--color-small-accent: var(--color-primary-light-6);
|
|
--color-highlight-fg: var(--fw-chart-3);
|
|
--color-highlight-bg: #FFF3C4;
|
|
--color-overlay-backdrop: #000017C0;
|
|
|
|
/* Convenience aliases consumed by fhirworx custom templates. */
|
|
--color-warning: #7F5E08; /* AA both as bg and fg on cream (5.5:1) */
|
|
--color-success: var(--color-green);
|
|
--color-info: var(--color-blue);
|
|
--color-error: var(--color-red);
|
|
--color-primary-foreground: var(--fw-primary-foreground);
|
|
|
|
accent-color: var(--color-accent);
|
|
|
|
/* `light only` opts out of Chrome auto-dark, Firefox content-override, and
|
|
Safari Reader dark. `only` keyword is critical — plain `light` allows UA
|
|
overrides; `light only` forbids them. */
|
|
color-scheme: light only;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Component polish — rules the variable system cannot express.
|
|
============================================================================ */
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: "Playfair Display", Georgia, serif;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Dark navbar accent line (Gitea nav id is #navbar, not .navbar). */
|
|
#navbar {
|
|
border-bottom: 3px solid var(--fw-foreground);
|
|
}
|
|
|
|
/* ---------- #navbar dark-surface sweep --------------------------------------
|
|
Fhirworx inverts the nav: DARK bar over LIGHT body. Gitea base CSS assumes
|
|
nav luminance ≈ body luminance, so any Fomantic class with its own color
|
|
rule (.ui.button, .ui.label, .ui.input, .ui.dropdown, .ui.menu .item) leaks
|
|
near-black text into the dark bar — invisible. Sweep forces nav-text color
|
|
on every interactive descendant. `#navbar` id-specificity (1-1-0) beats
|
|
Fomantic's single-class rules (0-1-0) without !important. */
|
|
|
|
#navbar,
|
|
#navbar a,
|
|
#navbar button,
|
|
#navbar .item,
|
|
#navbar .ui.button,
|
|
#navbar .ui.label,
|
|
#navbar .ui.menu,
|
|
#navbar .ui.menu .item,
|
|
#navbar .ui.dropdown,
|
|
#navbar .ui.dropdown > .text,
|
|
#navbar .ui.input,
|
|
#navbar #navbar-expand-toggle,
|
|
#navbar .navbar-left > *,
|
|
#navbar .navbar-right > *,
|
|
#navbar .navbar-mobile-right > * {
|
|
color: var(--color-nav-text);
|
|
}
|
|
|
|
/* SVG icons in nav: follow currentcolor so the sweep above reaches them. */
|
|
#navbar svg,
|
|
#navbar svg path,
|
|
#navbar svg circle,
|
|
#navbar svg rect,
|
|
#navbar svg polygon {
|
|
fill: currentcolor;
|
|
color: currentcolor;
|
|
}
|
|
|
|
/* Hover/active state across all interactive elements in nav */
|
|
#navbar a:hover,
|
|
#navbar button:hover,
|
|
#navbar .ui.button:hover,
|
|
#navbar .item:hover,
|
|
#navbar .item.active,
|
|
#navbar #navbar-expand-toggle:hover {
|
|
background: var(--color-nav-hover-bg);
|
|
color: var(--fw-primary-foreground);
|
|
}
|
|
|
|
/* Fomantic backgrounds inside #navbar must clear so nav bg shows through. */
|
|
#navbar .ui.button,
|
|
#navbar .item.button {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Dropdown popouts FROM the navbar are floating panels OVER the body; they
|
|
should NOT inherit the dark nav palette. Flip to body (cream surface, dark
|
|
text). This is the main acute pain point — without these 4 rules the menu
|
|
panels render with transparent bg + near-black text = invisible. */
|
|
#navbar .ui.dropdown > .menu {
|
|
background: var(--color-menu);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-secondary);
|
|
}
|
|
#navbar .ui.dropdown > .menu .item,
|
|
#navbar .ui.dropdown > .menu a.item,
|
|
#navbar .ui.dropdown > .menu .header.item {
|
|
color: var(--color-text);
|
|
background: transparent;
|
|
}
|
|
#navbar .ui.dropdown > .menu .item:hover,
|
|
#navbar .ui.dropdown > .menu .item.selected,
|
|
#navbar .ui.dropdown > .menu .item.active {
|
|
background: var(--color-hover);
|
|
color: var(--color-text);
|
|
}
|
|
#navbar .ui.dropdown > .menu .item svg,
|
|
#navbar .ui.dropdown > .menu .item .svg {
|
|
color: var(--color-text);
|
|
fill: currentcolor;
|
|
}
|
|
#navbar .ui.dropdown > .menu .divider {
|
|
border-color: var(--color-secondary);
|
|
}
|
|
|
|
/* Notification badge: Gitea sets color:var(--color-nav-bg) on the count span
|
|
(navbar.css:111), assuming nav-bg is light enough to read on the primary-
|
|
colored badge bg. In fhirworx nav-bg == primary — same color = invisible.
|
|
Force badge text to primary-contrast. */
|
|
#navbar a.item .notification_count,
|
|
#navbar a.item .header-stopwatch-dot {
|
|
color: var(--fw-primary-foreground);
|
|
background: var(--fw-chart-5); /* orange badge, visible on navy */
|
|
border-color: var(--fw-nav-bg);
|
|
}
|
|
#navbar a.item:hover .notification_count,
|
|
#navbar a.item:hover .header-stopwatch-dot {
|
|
border-color: var(--fw-nav-hover-bg);
|
|
}
|
|
|
|
/* Navbar search input on dark bg: use a slightly-lifted navy so the input is
|
|
visible against the bar, with near-white placeholder. */
|
|
#navbar input,
|
|
#navbar .ui.input input {
|
|
background: var(--fw-nav-hover-bg);
|
|
color: var(--fw-nav-text);
|
|
border-color: var(--fw-nav-active-bg);
|
|
}
|
|
#navbar input::placeholder,
|
|
#navbar .ui.input input::placeholder {
|
|
color: var(--color-console-fg-subtle);
|
|
}
|
|
|
|
/* Footer — same dark-surface inversion as navbar. Footer bg defaults to
|
|
var(--color-nav-bg) (= dark navy in fhirworx); without overriding, every
|
|
text descendant inherits var(--color-text) (= near-black) → contrast 1.2:1.
|
|
Force every text/icon descendant to nav-text, same as the #navbar sweep. */
|
|
.page-footer {
|
|
border-top: 3px solid var(--fw-foreground);
|
|
font-family: var(--fonts-monospace);
|
|
font-size: 12px;
|
|
color: var(--color-nav-text);
|
|
}
|
|
.page-footer,
|
|
.page-footer a,
|
|
.page-footer span,
|
|
.page-footer strong,
|
|
.page-footer .left-links,
|
|
.page-footer .right-links,
|
|
.page-footer .flex-text-inline,
|
|
.page-footer .ui.dropdown,
|
|
.page-footer .item {
|
|
color: var(--color-nav-text);
|
|
}
|
|
.page-footer a:hover {
|
|
color: var(--fw-primary-foreground);
|
|
}
|
|
.page-footer svg,
|
|
.page-footer svg path {
|
|
fill: currentcolor;
|
|
}
|
|
.commit-sha, .sha, [class*="sha"],
|
|
.branch-name, .tag-name, .file-name, code.ref {
|
|
font-family: var(--fonts-monospace);
|
|
}
|
|
|
|
/* Yellow / olive / orange labels + buttons: white on these hues fails WCAG
|
|
AA. Use --fw-foreground (near-black). The .ui.ui.ui chain matches
|
|
Fomantic's triple-class specificity for state-modified labels. */
|
|
.ui.ui.ui.yellow.label,
|
|
.ui.ui.ui.olive.label,
|
|
.ui.ui.ui.orange.label,
|
|
.ui.yellow.button,
|
|
.ui.olive.button,
|
|
.ui.orange.button,
|
|
.ui.yellow.button:hover,
|
|
.ui.olive.button:hover,
|
|
.ui.orange.button:hover {
|
|
color: var(--fw-foreground);
|
|
}
|
|
|
|
/* Basic-green label text must darken for AA on cream (base green is 3.8:1). */
|
|
.ui.basic.green.label,
|
|
.ui.basic.green.labels .label {
|
|
color: var(--color-green-dark-1);
|
|
border-color: var(--color-green-dark-1);
|
|
}
|
|
|
|
/* Grey-label hover: Fomantic flips text to var(--color-white) while bg stays
|
|
semi-transparent beige → invisible. Preserve label-text on hover. */
|
|
a.ui.ui.ui.grey.label:hover,
|
|
a.ui.ui.ui.grey.label:focus {
|
|
color: var(--color-label-text);
|
|
background: var(--color-label-hover-bg);
|
|
}
|
|
|
|
/* PR review-comments-counter uses --color-primary-light-4 (pale navy) bg
|
|
with cream text → fails contrast. Use opaque primary instead. */
|
|
.review-comments-counter {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-primary-contrast);
|
|
}
|
|
|
|
/* Card .extra divider uses --color-secondary-light-1 (paler than secondary
|
|
on cream = invisible divider). Force visible. */
|
|
.ui.card > .extra,
|
|
.ui.cards .card > .extra {
|
|
border-top-color: var(--color-secondary);
|
|
}
|
|
|
|
/* `.text.small` at 0.75em serif renders poorly; keep system font for it. */
|
|
.text.small,
|
|
.flex-item-body .text.small {
|
|
font-family: var(--fonts-proportional), sans-serif;
|
|
}
|
|
|
|
/* base.css uses `color: var(--color-COLOR) !important` for .text.COLOR
|
|
helpers. Several hues fail AA on cream; route them through darker shades.
|
|
We must use !important here because base.css line 920-ish does too —
|
|
without !important we lose the cascade. */
|
|
.text.orange { color: var(--color-orange-dark-2) !important; /* AA: base.css uses !important */ }
|
|
.text.yellow { color: #7F5E08 !important; /* AA: base.css uses !important */ }
|
|
.text.olive { color: var(--color-olive-dark-2) !important; /* AA: base.css uses !important */ }
|
|
.text.teal { color: var(--color-teal-dark-2) !important; /* AA: base.css uses !important */ }
|
|
.text.brown { color: var(--color-brown-dark-2) !important; /* AA: base.css uses !important */ }
|
|
.text.pink { color: var(--color-pink-dark-1) !important; /* AA: base.css uses !important */ }
|
|
.text.gold { color: var(--color-brown-dark-2) !important; /* AA: base.css uses !important */ }
|
|
.text.green { color: var(--color-green-dark-1) !important; /* AA: base.css uses !important */ }
|
|
|
|
/* Flash messages: force readable text on pastel bg tints. */
|
|
.ui.positive.message, .ui.success.message { color: var(--color-success-text); }
|
|
.ui.negative.message, .ui.error.message { color: var(--color-error-text); }
|
|
.ui.warning.message { color: var(--color-warning-text); }
|
|
.ui.info.message { color: var(--color-info-text); }
|
|
|
|
/* Secondary-nav (repo breadcrumb strip) — use !important because Fomantic's
|
|
.ui.secondary.menu rule uses it too; matching specificity. */
|
|
.secondary-nav {
|
|
background: var(--color-secondary-nav-bg) !important; /* beats .ui.secondary.menu !important in Fomantic */
|
|
border-bottom: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
/* Link color: base.css sets `a { color: var(--color-primary) }`. In fhirworx
|
|
--color-primary = dark navy = same family as --color-text, so links look
|
|
identical to prose. Route real hyperlinks through a brighter blue. Exclude
|
|
UI atoms (.item/.button/.label/.tab) which carry Fomantic color logic. */
|
|
a:not(.item):not(.button):not(.label):not(.tab) {
|
|
color: var(--color-blue);
|
|
}
|
|
a:not(.item):not(.button):not(.label):not(.tab):hover {
|
|
color: var(--color-blue-dark-1);
|
|
}
|
|
a.muted, a.suppressed, a.silenced, .muted-links a {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Diff detail yellow count fails AA on cream */
|
|
.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(1) {
|
|
color: var(--color-yellow-dark-1);
|
|
}
|
|
|
|
/* ============================================================================
|
|
Defense against client-side dark mode (Chrome auto-dark, Firefox content-
|
|
override). Even with `color-scheme: light only`, some UAs still apply
|
|
per-element dark adjustments when prefers-color-scheme:dark. Re-assert.
|
|
============================================================================ */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
color-scheme: light only !important; /* beats UA-injected dark scheme */
|
|
--color-body: var(--fw-background) !important;
|
|
--color-text: var(--fw-foreground) !important;
|
|
--color-nav-bg: var(--fw-nav-bg) !important;
|
|
--color-nav-text: var(--fw-nav-text) !important;
|
|
--color-box-body: var(--fw-card) !important;
|
|
--color-card: var(--fw-card) !important;
|
|
--color-menu: var(--fw-card) !important;
|
|
}
|
|
body {
|
|
background: var(--fw-background) !important; /* beats UA dark bg */
|
|
color: var(--fw-foreground) !important; /* beats UA dark text */
|
|
}
|
|
#navbar {
|
|
background: var(--fw-nav-bg) !important; /* beats UA dark bg */
|
|
color: var(--fw-nav-text) !important; /* beats UA dark text */
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
#navbar { border-bottom: 3px solid CanvasText; }
|
|
}
|