MediaWiki:Common.css
MediaWiki interface page
More languages
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* =============================================================================
OHC Network Wiki -- site-wide CSS (all skins)
careui design system (https://careui.ohc.network, github.com/ohcnetwork/careui)
ported to MediaWiki. Values are resolved from Tailwind v4.3.2 ramps, which is
what careui's tokens indirect onto; careui's build-time syntax (@theme inline,
--alpha(), @custom-variant) does not survive outside a Tailwind build and has
been expanded here.
GENERATED -- do not hand-edit. Source: drafts/careui/gen.py in Wiki-NITC/wiki-mcp.
Companion: MediaWiki:Citizen.css (skin chrome).
============================================================================= */
/* ---- 1. Typefaces -----------------------------------------------------------
careui self-hosts these via the @fontsource-variable npm packages. This wiki
cannot (`woff2` is not in $wgFileExtensions), so we point @font-face at the
byte-identical, version-pinned files on jsDelivr.
These are VARIABLE fonts -- one file covers the whole 300-900 range, which is
both what careui uses and fewer bytes than the four static weights the old
ohc-fonts gadget pulled from Google Fonts + Fontshare.
Declared here rather than injected from JS (as ohc-fonts did) so the browser
discovers them during CSS parse instead of after a script round-trip.
-------------------------------------------------------------------------------- */
/* figtree-latin-ext-wght-normal */
@font-face {
font-family: 'Figtree Variable';
font-style: normal;
font-display: swap;
font-weight: 300 900;
src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree@5.2.10/files/figtree-latin-ext-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* figtree-latin-wght-normal */
@font-face {
font-family: 'Figtree Variable';
font-style: normal;
font-display: swap;
font-weight: 300 900;
src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree@5.2.10/files/figtree-latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* figtree-latin-ext-wght-italic */
@font-face {
font-family: 'Figtree Variable';
font-style: italic;
font-display: swap;
font-weight: 300 900;
src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree@5.2.10/files/figtree-latin-ext-wght-italic.woff2) format('woff2-variations');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* figtree-latin-wght-italic */
@font-face {
font-family: 'Figtree Variable';
font-style: italic;
font-display: swap;
font-weight: 300 900;
src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree@5.2.10/files/figtree-latin-wght-italic.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* geist-mono-latin-ext-wght-normal */
@font-face {
font-family: 'Geist Mono Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.2.8/files/geist-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* geist-mono-latin-wght-normal */
@font-face {
font-family: 'Geist Mono Variable';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5.2.8/files/geist-mono-latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ---- 2. careui token layer --------------------------------------------------
The single source of truth for colour on this wiki. Nothing outside this block
-- no TemplateStyles page, no skin file -- should contain a hex literal; they
reference `var(--ohc-*)` instead.
Named exactly after careui's semantic tokens so the mapping stays greppable
against careui's src/index.css.
-------------------------------------------------------------------------------- */
:root {
--ohc-background: #ffffff;
--ohc-soft-background: #fafafa; /* neutral-50 */
--ohc-muted-background: #f5f5f5; /* neutral-100 */
--ohc-strong-background: #e5e5e5; /* neutral-200 */
--ohc-muted: #f5f5f5; /* neutral-100 */
--ohc-foreground: #0a0a0a; /* neutral-950 */
--ohc-muted-foreground: #404040; /* neutral-700 */
--ohc-soft-foreground: #525252; /* neutral-600 */
--ohc-disabled-foreground: #d4d4d4; /* neutral-300 */
--ohc-placeholder-foreground: #737373; /* neutral-500 */
--ohc-inverse-foreground: #ffffff;
--ohc-card: #ffffff;
--ohc-card-foreground: #0a0a0a; /* neutral-950 */
--ohc-popover: #ffffff;
--ohc-popover-foreground: #0a0a0a; /* neutral-950 */
--ohc-primary: #006045; /* emerald-800 */
--ohc-primary-foreground: #ecfdf5; /* emerald-50 */
--ohc-secondary: #f5f5f5; /* neutral-100 */
--ohc-secondary-foreground: #171717; /* neutral-900 */
--ohc-accent: #f5f5f5; /* neutral-100 */
--ohc-accent-foreground: #171717; /* neutral-900 */
--ohc-destructive: #e7000b; /* red-600 */
--ohc-destructive-foreground: #fef2f2; /* red-50 */
--ohc-soft-border: #f5f5f5; /* neutral-100 */
--ohc-border: #e5e5e5; /* neutral-200 */
--ohc-strong-border: #d4d4d4; /* neutral-300 */
--ohc-stronger-border: #a1a1a1; /* neutral-400 */
--ohc-inverse-border: #ffffff;
--ohc-input: #d4d4d4; /* neutral-300 */
--ohc-ring: rgba(97, 95, 255, 0.75);
--ohc-primary-bg: #ecfdf5; /* emerald-50 */
--ohc-primary-border: #a4f4cf; /* emerald-200 */
--ohc-shadow-color: rgba(0, 0, 0, 0.10);
--ohc-shadow-color-strong: rgba(0, 0, 0, 0.18);
--ohc-chart-1: #f54900; /* orange-600 */
--ohc-chart-2: #009966; /* emerald-600 */
--ohc-chart-3: #104e64; /* cyan-900 */
--ohc-chart-4: #ffb900; /* amber-400 */
--ohc-chart-5: #f0b100; /* yellow-500 */
/* careui exposes the brand ramp itself for tints/subtle fills */
--ohc-primary-50: #ecfdf5;
--ohc-primary-100: #d0fae5;
--ohc-primary-200: #a4f4cf;
--ohc-primary-300: #5ee9b5;
--ohc-primary-400: #00d492;
--ohc-primary-500: #00bc7d;
--ohc-primary-600: #009966;
--ohc-primary-700: #007a55;
--ohc-primary-800: #006045;
--ohc-primary-900: #004f3b;
--ohc-primary-950: #002c22;
/* careui radius scale: --radius 0.625rem, steps at +/-4px */
--ohc-radius: 0.625rem; /* 10px */
--ohc-radius-sm: 6px;
--ohc-radius-md: 8px;
--ohc-radius-lg: 10px;
--ohc-radius-xl: 14px;
--ohc-radius-2xl: 18px;
--ohc-radius-3xl: 22px;
--ohc-radius-full: 9999px;
/* careui type */
--ohc-font-sans: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
--ohc-font-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
:root.skin-theme-clientpref-night,
:root.client-dark-mode {
--ohc-background: #0a0a0a; /* neutral-950 */
--ohc-soft-background: #171717; /* neutral-900 */
--ohc-muted-background: #262626; /* neutral-800 */
--ohc-strong-background: #404040; /* neutral-700 */
--ohc-muted: #262626; /* neutral-800 */
--ohc-foreground: #fafafa; /* neutral-50 */
--ohc-muted-foreground: #e5e5e5; /* neutral-200 */
--ohc-soft-foreground: #d4d4d4; /* neutral-300 */
--ohc-disabled-foreground: #404040; /* neutral-700 */
--ohc-placeholder-foreground: #525252; /* neutral-600 */
--ohc-inverse-foreground: #000000;
--ohc-card: #171717; /* neutral-900 */
--ohc-card-foreground: #ffffff;
--ohc-popover: #0a0a0a; /* neutral-950 */
--ohc-popover-foreground: #fafafa; /* neutral-50 */
--ohc-primary: #00d492; /* emerald-400 */
--ohc-primary-foreground: #002c22; /* emerald-950 */
--ohc-secondary: #262626; /* neutral-800 */
--ohc-secondary-foreground: #fafafa; /* neutral-50 */
--ohc-accent: #404040; /* neutral-700 */
--ohc-accent-foreground: #fafafa; /* neutral-50 */
--ohc-destructive: #ff6467; /* red-400 */
--ohc-destructive-foreground: #fef2f2; /* red-50 */
--ohc-soft-border: rgba(255, 255, 255, 0.05);
--ohc-border: rgba(255, 255, 255, 0.09);
--ohc-strong-border: rgba(255, 255, 255, 0.15);
--ohc-stronger-border: rgba(255, 255, 255, 0.22);
--ohc-inverse-border: #fafafa; /* neutral-50 */
--ohc-input: rgba(255, 255, 255, 0.15);
--ohc-ring: rgba(97, 95, 255, 0.75);
--ohc-primary-bg: #002c22; /* emerald-950 */
--ohc-primary-border: #006045; /* emerald-800 */
--ohc-shadow-color: rgba(0, 0, 0, 0.55);
--ohc-shadow-color-strong: rgba(0, 0, 0, 0.70);
--ohc-chart-1: #1447e6; /* blue-700 */
--ohc-chart-2: #00c950; /* green-500 */
--ohc-chart-3: #fe9a00; /* amber-500 */
--ohc-chart-4: #ad46ff; /* purple-500 */
--ohc-chart-5: #ff2056; /* rose-500 */
--ohc-status-success: #00d492; /* emerald-400 */
--ohc-status-success-bg: #002c22; /* emerald-950 */
--ohc-status-success-border: #006045; /* emerald-800 */
--ohc-status-info: #51a2ff; /* blue-400 */
--ohc-status-info-bg: #162456; /* blue-950 */
--ohc-status-info-border: #193cb8; /* blue-800 */
--ohc-status-warning: #ffb900; /* amber-400 */
--ohc-status-warning-bg: #461901; /* amber-950 */
--ohc-status-warning-border: #973c00; /* amber-800 */
--ohc-status-danger: #ff6467; /* red-400 */
--ohc-status-danger-bg: #460809; /* red-950 */
--ohc-status-danger-border: #9f0712; /* red-800 */
--ohc-status-accent: #c27aff; /* purple-400 */
--ohc-status-accent-bg: #3c0366; /* purple-950 */
--ohc-status-accent-border: #6e11b0; /* purple-800 */
--ohc-status-neutral: #a1a1a1; /* neutral-400 */
--ohc-status-neutral-bg: #0a0a0a; /* neutral-950 */
--ohc-status-neutral-border: #262626; /* neutral-800 */
}
@media ( prefers-color-scheme: dark ) {
:root.skin-theme-clientpref-os {
--ohc-background: #0a0a0a; /* neutral-950 */
--ohc-soft-background: #171717; /* neutral-900 */
--ohc-muted-background: #262626; /* neutral-800 */
--ohc-strong-background: #404040; /* neutral-700 */
--ohc-muted: #262626; /* neutral-800 */
--ohc-foreground: #fafafa; /* neutral-50 */
--ohc-muted-foreground: #e5e5e5; /* neutral-200 */
--ohc-soft-foreground: #d4d4d4; /* neutral-300 */
--ohc-disabled-foreground: #404040; /* neutral-700 */
--ohc-placeholder-foreground: #525252; /* neutral-600 */
--ohc-inverse-foreground: #000000;
--ohc-card: #171717; /* neutral-900 */
--ohc-card-foreground: #ffffff;
--ohc-popover: #0a0a0a; /* neutral-950 */
--ohc-popover-foreground: #fafafa; /* neutral-50 */
--ohc-primary: #00d492; /* emerald-400 */
--ohc-primary-foreground: #002c22; /* emerald-950 */
--ohc-secondary: #262626; /* neutral-800 */
--ohc-secondary-foreground: #fafafa; /* neutral-50 */
--ohc-accent: #404040; /* neutral-700 */
--ohc-accent-foreground: #fafafa; /* neutral-50 */
--ohc-destructive: #ff6467; /* red-400 */
--ohc-destructive-foreground: #fef2f2; /* red-50 */
--ohc-soft-border: rgba(255, 255, 255, 0.05);
--ohc-border: rgba(255, 255, 255, 0.09);
--ohc-strong-border: rgba(255, 255, 255, 0.15);
--ohc-stronger-border: rgba(255, 255, 255, 0.22);
--ohc-inverse-border: #fafafa; /* neutral-50 */
--ohc-input: rgba(255, 255, 255, 0.15);
--ohc-ring: rgba(97, 95, 255, 0.75);
--ohc-primary-bg: #002c22; /* emerald-950 */
--ohc-primary-border: #006045; /* emerald-800 */
--ohc-shadow-color: rgba(0, 0, 0, 0.55);
--ohc-shadow-color-strong: rgba(0, 0, 0, 0.70);
--ohc-chart-1: #1447e6; /* blue-700 */
--ohc-chart-2: #00c950; /* green-500 */
--ohc-chart-3: #fe9a00; /* amber-500 */
--ohc-chart-4: #ad46ff; /* purple-500 */
--ohc-chart-5: #ff2056; /* rose-500 */
}
}
/* ---- 3. Content typography --------------------------------------------------
careui's prose treatment, scoped to `.mw-parser-output` so it never leaks into
skin chrome.
Deviation from abdm_docs, deliberate: that project renders every prose
paragraph in `muted-foreground`, which suits short API-reference pages but
reads washed-out over long encyclopedic articles. Body copy here stays at
`--ohc-foreground` (careui's own `body` rule); `muted-foreground` is reserved
for captions and metadata.
Link treatment follows careui's component scale (`typography.tsx`:
`text-primary underline-offset-4 hover:underline`) rather than abdm_docs'
always-underlined docs variant -- underlining every link in a dense wiki
article is noise, and careui itself only underlines on hover.
-------------------------------------------------------------------------------- */
.mw-parser-output {
color: var( --ohc-foreground );
}
/* careui gets heading hierarchy from weight, not colour -- every heading is
--foreground; only the weight and size step down. */
.mw-parser-output h1 { font-weight: 700; }
.mw-parser-output h2,
.mw-parser-output h3 { font-weight: 600; }
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 { font-weight: 500; }
.mw-parser-output a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.mw-parser-output blockquote {
border-left: 2px solid var( --ohc-strong-border );
border-left-color: color-mix( in srgb, var( --ohc-primary ) 40%, transparent );
padding-left: 1.5rem;
font-style: italic;
color: var( --ohc-soft-foreground );
}
.mw-parser-output hr {
margin: 2.5rem 0;
border: 0;
border-top: 1px solid var( --ohc-border );
}
/* ---- Code ---------------------------------------------------------------- */
code,
kbd,
pre,
samp,
tt,
.mw-code,
.mw-highlight {
font-family: var( --ohc-font-mono );
font-feature-settings: normal;
}
.mw-parser-output code {
padding: 0.15em 0.4em;
font-size: 0.875em;
font-weight: 500;
color: var( --ohc-foreground );
background: var( --ohc-muted-background );
border-radius: var( --ohc-radius-sm );
}
.mw-parser-output pre,
.mw-parser-output .mw-code,
.mw-parser-output .mw-highlight pre {
padding: 1rem;
font-size: 0.8125rem;
line-height: 1.5rem;
color: var( --ohc-foreground );
background: var( --ohc-soft-background );
border: 1px solid var( --ohc-border );
border-radius: var( --ohc-radius-xl );
}
/* A code span inside a code block must not double up on chrome. */
.mw-parser-output pre code {
padding: 0;
background: transparent;
border-radius: 0;
}
/* careui Kbd */
kbd {
display: inline-block;
padding: 0.12em 0.5em;
font-size: 0.82em;
line-height: 1.6;
color: var( --ohc-foreground );
background: var( --ohc-muted-background );
border: 1px solid var( --ohc-border );
border-bottom-width: 2px;
border-radius: var( --ohc-radius-sm );
box-shadow: none;
}
/* ---- 4. Tables --------------------------------------------------------------
careui Table: no outer box, hairline row rules, a stronger rule under the
header, left-aligned semibold headers. `.wikitable` and `.cargoTable` are
unified here -- previously `.cargoTable` carried its own divergent styling
with hardcoded colours and no dark-mode support.
-------------------------------------------------------------------------------- */
.mw-parser-output table.wikitable,
.mw-parser-output table.cargoTable {
width: 100%;
max-width: 100%;
margin: 1rem 0;
font-size: 0.875rem;
line-height: 1.5;
color: var( --ohc-foreground );
background: transparent;
border: 0;
border-collapse: collapse;
}
.mw-parser-output table.wikitable > * > tr > th,
.mw-parser-output table.cargoTable th {
padding: 0.5rem 0.75rem;
text-align: left;
font-weight: 600;
color: var( --ohc-foreground );
background: transparent;
border: 0;
border-bottom: 1px solid var( --ohc-strong-border );
}
.mw-parser-output table.wikitable > * > tr > td,
.mw-parser-output table.cargoTable td {
padding: 0.5rem 0.75rem;
vertical-align: top;
background: transparent;
border: 0;
border-bottom: 1px solid var( --ohc-border );
}
.mw-parser-output table.wikitable > * > tr:hover > td,
.mw-parser-output table.cargoTable tbody tr:hover td {
background: var( --ohc-muted-background );
}
.mw-parser-output table.cargoTable tbody tr:last-child td {
border-bottom: 0;
}
@media ( max-width: 720px ) {
.mw-parser-output table.cargoTable {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
/* ---- 5. Site components -----------------------------------------------------
Behavioural chrome injected by MediaWiki:Citizen.js. All colour comes from the
token layer, so these follow light/dark automatically -- the previous revision
hardcoded the teal palette and did not adapt to dark mode.
-------------------------------------------------------------------------------- */
/* ohc-copy-code: pill "Copy" button on code blocks */
pre.ohc-copy-code {
position: relative;
}
pre.ohc-copy-code .ohc-copy-btn {
position: absolute;
top: 0.55em;
right: 0.55em;
z-index: 1;
padding: 0.4em 0.8em;
font-family: var( --ohc-font-sans );
font-size: 0.72em;
font-weight: 600;
line-height: 1;
color: var( --ohc-primary );
cursor: pointer;
background: var( --ohc-card );
border: 1px solid var( --ohc-border );
border-radius: var( --ohc-radius-full );
transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
pre.ohc-copy-code .ohc-copy-btn:hover {
color: var( --ohc-primary-foreground );
background: var( --ohc-primary );
transform: translateY( -1px );
}
pre.ohc-copy-code .ohc-copy-btn.ohc-copied {
color: var( --ohc-primary-foreground );
background: var( --ohc-primary );
}
pre.ohc-copy-code .ohc-copy-btn:focus-visible {
outline: 2px solid var( --ohc-ring );
outline-offset: 2px;
}
/* ohc-back-to-top: floating pill */
.ohc-to-top {
position: fixed;
right: 1.1em;
bottom: 1.1em;
z-index: 50;
width: 2.6em;
height: 2.6em;
font-size: 1.1em;
line-height: 1;
color: var( --ohc-primary-foreground );
cursor: pointer;
background: var( --ohc-primary );
border: 1px solid var( --ohc-border );
border-radius: var( --ohc-radius-full );
box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 );
opacity: 0;
transform: translateY( 0.5em );
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
}
.ohc-to-top--show {
opacity: 1;
transform: translateY( 0 );
pointer-events: auto;
}
.ohc-to-top:hover {
background: var( --ohc-primary-700 );
}
.ohc-to-top:focus-visible {
outline: 2px solid var( --ohc-ring );
outline-offset: 2px;
}
/* ohc-version-switcher: pill dropdown on doc pages */
.docs-version-switcher select {
padding-right: 0.6em;
font-family: inherit;
font-size: 1em;
font-weight: 700;
color: var( --ohc-primary );
cursor: pointer;
background: transparent;
border: none;
outline: none;
appearance: none;
-webkit-appearance: none;
}
.docs-version-switcher:hover {
background: var( --ohc-muted-background );
}
@media ( prefers-reduced-motion: reduce ) {
pre.ohc-copy-code .ohc-copy-btn,
.ohc-to-top {
transition: none;
}
}
/* ohc-doc-video: embedded flow demo videos (Widget:Video). Sized around the
floated Clinical/Documentation sidebar on desktop so it doesn't get pushed
below the sidebar and leave a blank gap. */
.mw-parser-output .ohc-doc-video {
display: block;
width: 100%;
max-width: 720px;
height: auto;
border-radius: var( --ohc-radius-lg );
background: #000;
}
@media ( min-width: 72.01em ) {
.mw-parser-output .ohc-doc-video {
width: calc( 100% - 20em );
}
}