Mediawiki:common.css
| Line 3,438: | Line 3,438: | ||
--icon-dropdown-cosmoBlue: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48dGl0bGU+IGRvd24gPC90aXRsZT48cGF0aCBmaWxsPSIjZDZlZGZmIiBkPSJNOS45IDIuOSA2IDYuOCAyLjEgMi45IDEgNGw1IDUgNS01eiIvPjwvc3ZnPg=="); | --icon-dropdown-cosmoBlue: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48dGl0bGU+IGRvd24gPC90aXRsZT48cGF0aCBmaWxsPSIjZDZlZGZmIiBkPSJNOS45IDIuOSA2IDYuOCAyLjEgMi45IDEgNGw1IDUgNS01eiIvPjwvc3ZnPg=="); | ||
} | |||
/* ============================================================================= | |||
STARLIGHT WIKI — Timeless theme | |||
Phase 1 · oklch token layer + core re-theme (matched to the main MudBlazor site) | |||
HOW TO USE THIS FILE (for now): | |||
Paste this block at the very BOTTOM of MediaWiki:Common.css to preview. | |||
Being last, these rules win over the old hard-coded ones at equal specificity, | |||
so you can see the new theme without deleting anything yet. Once you're happy | |||
with the direction, Phase 2 folds everything into one clean file and removes | |||
the old duplicated blocks (department tables, dupes, dead code). | |||
Only CORE surfaces are re-themed here (the parts visible in your screenshots | |||
plus the main reading surfaces). Department color tables (MED/ENG/SEC/…) are | |||
intentionally left for Phase 2 so their meaning-carrying hues get converted | |||
deliberately rather than flattened into the brand palette. | |||
============================================================================= */ | |||
:root { | |||
/* ---- Brand palette — mirrors the main site ---- */ | |||
--primary: oklch(0.86 0.27 160.35); /* green */ | |||
--primary-paler: oklch(0.70 0.21 161.79); | |||
--secondary: oklch(0.80 0.19 214.03); /* cyan */ | |||
--tertiary: oklch(0.79 0.23 300.86); /* purple */ | |||
--error: oklch(0.79 0.23 19.63); /* red */ | |||
--warning: oklch(0.89 0.22 109.10); /* yellow */ | |||
/* ---- Neutral surface ramp (dark -> light) ---- | |||
Anchored near the site's own darkness (~0.16 L) and stepped up just enough | |||
to keep stacked panels readable. Old hex each level replaces is noted. */ | |||
--wiki-surface-0: oklch(0.16 0 0); /* page background (was #1b1b1f) */ | |||
--wiki-surface-1: oklch(0.19 0 0); /* content / info blocks (was #212126) */ | |||
--wiki-surface-2: oklch(0.23 0 0); /* tables, inputs, cards (was #27272e) */ | |||
--wiki-surface-3: oklch(0.27 0 0); /* code, popovers, pre (was #303037) */ | |||
--wiki-border: oklch(0.31 0 0); /* hairline borders (was #37373e) */ | |||
/* ---- Text ---- */ | |||
--wiki-text: oklch(0.86 0 0); /* body text (was lightgrey) */ | |||
--wiki-text-muted: oklch(0.75 0 0); | |||
/* ---- Semantic roles ---- */ | |||
--wiki-accent: var(--primary); /* header lines, emphasis (was blue/red) */ | |||
--wiki-accent-strong: var(--primary-paler); | |||
--wiki-link: var(--secondary); /* links stay cyan, like the site */ | |||
--wiki-link-hover: oklch(0.93 0.07 214); | |||
--wiki-link-visited: color-mix(in oklch, var(--secondary) 55%, var(--wiki-surface-1)); | |||
--wiki-link-external: color-mix(in oklch, var(--secondary) 70%, var(--wiki-surface-1)); | |||
/* ---- Re-point the file's existing tokens so rules already using them update ---- */ | |||
--text-color: var(--wiki-text); | |||
--link-color: var(--wiki-link); | |||
--border-color: var(--wiki-border); | |||
--bg-color: var(--wiki-surface-0); | |||
--bg-color-light: var(--wiki-surface-1); | |||
--bg-color-light-x2: var(--wiki-surface-2); | |||
--bg-color-light-x3: var(--wiki-surface-3); | |||
--background-color-base: var(--wiki-surface-0); | |||
--background-color-interactive: var(--wiki-surface-2); | |||
--border-color-base: var(--wiki-border); | |||
--color-base: var(--wiki-text); | |||
} | |||
/* ---------- Page / body backgrounds ---------- */ | |||
.mediawiki, | |||
.mw-page-container, | |||
#mw-page-base, | |||
#mw-panel, | |||
#mw-content-container, | |||
#mw-header-container, | |||
#mw-content-wrapper, | |||
#mw-content, | |||
#p-logo { | |||
background: var(--wiki-surface-0); | |||
color: var(--wiki-text); | |||
border-color: var(--wiki-surface-0); | |||
} | |||
.mw-body { | |||
background: var(--wiki-surface-1); | |||
color: var(--wiki-text); | |||
border-color: #000; | |||
} | |||
/* ---------- Text ---------- */ | |||
p, h1, h2, h3, h4, h5, h6, li { | |||
color: var(--wiki-text); | |||
} | |||
/* ---------- Links ---------- */ | |||
a, | |||
.vector-menu-portal .vector-menu-content li a, | |||
.vector-menu-tabs li a, | |||
body.skin--responsive #p-cactions li a, | |||
a:visited, | |||
.vector-menu-portal .vector-menu-content li a:visited, | |||
.vector-menu-tabs li a:visited, | |||
body.skin--responsive #p-cactions li a:visited { | |||
color: var(--wiki-link); | |||
} | |||
a:hover, | |||
a:visited:hover { | |||
color: var(--wiki-link-hover); | |||
} | |||
a.extiw:visited, | |||
a.external:visited, | |||
.mw-parser-output a.extiw:visited, | |||
.mw-parser-output a.external:visited, | |||
body.skin--responsive #p-cactions li a.external:visited { | |||
color: var(--wiki-link-external); | |||
} | |||
/* ---------- Section headers: green accent underline ---------- */ | |||
.mw-body h2 { | |||
border-bottom: solid 2px var(--wiki-accent); | |||
} | |||
#mw-site-navigation .sidebar-chunk h3, | |||
#mw-related-navigation .sidebar-chunk h3 { | |||
border-bottom: solid 2px var(--wiki-accent); | |||
} | |||
/* ---------- Sidebar chunks / portlets ---------- */ | |||
#mw-site-navigation .sidebar-chunk, | |||
#mw-related-navigation .sidebar-chunk, | |||
body.skin--responsive .portlet, | |||
body.skin--responsive .pBody { | |||
background: var(--wiki-surface-1); | |||
color: var(--wiki-text); | |||
border: 1px solid #000; | |||
border-radius: 1.4rem; | |||
} | |||
/* ---------- Tables ---------- */ | |||
.wikitable { | |||
background: var(--wiki-surface-2); | |||
color: var(--wiki-text); | |||
border: 1px solid #000; | |||
} | |||
.wikitable > * > tr > th { | |||
background: var(--wiki-surface-2); | |||
color: var(--wiki-text); | |||
} | |||
.wikitable > * > tr > td { | |||
background: var(--wiki-surface-3); | |||
} | |||
.toc, | |||
.toccolours { | |||
background: var(--wiki-surface-2); | |||
border: 1px solid #000; | |||
color: var(--wiki-text); | |||
} | |||
ul#filetoc, | |||
.toc, | |||
.toccolours, | |||
.mw-warning { | |||
background-color: var(--wiki-surface-2) !important; | |||
border-color: #000 !important; | |||
} | |||
/* ---------- Code / pre ---------- */ | |||
code { | |||
background-color: var(--wiki-surface-3); | |||
border-color: var(--wiki-surface-3); | |||
color: var(--wiki-text); | |||
} | |||
pre, | |||
.mw-code { | |||
background-color: var(--wiki-surface-3); | |||
border-color: var(--wiki-surface-3); | |||
color: var(--wiki-text); | |||
} | |||
/* ---------- Search / inputs ---------- */ | |||
#simpleSearch { | |||
background: var(--wiki-surface-2); | |||
border: 1px solid var(--wiki-border); | |||
color: var(--wiki-text); | |||
} | |||
#searchInput { | |||
color: var(--wiki-text); | |||
} | |||
.mw-editform #wpTextbox1, | |||
textarea { | |||
background: var(--wiki-surface-3); | |||
border: 1px solid var(--wiki-border); | |||
color: var(--wiki-text); | |||
} | |||
/* ============================================================================= | |||
HEADER / NAV BUG FIXES (Timeless medium-width layout) | |||
============================================================================= */ | |||
/* 1. Kill the duplicated dark bar under the header. #mw-header-nav-hack is the | |||
wrapper Timeless inserts when the header wraps to a second row; the border | |||
+ solid fill it was given rendered as a second line. */ | |||
#mw-header-nav-hack { | |||
border-top: 0 !important; | |||
background: transparent !important; | |||
} | |||
/* 2. Stop the icon-invert hack from darkening the "Navigation" label text. | |||
(Page tools reads fine with no inversion, so Navigation will too.) */ | |||
#site-navigation h2, | |||
#site-navigation h2 span { | |||
filter: none !important; | |||
color: var(--wiki-text); | |||
} | |||
/* 3. Recolor the header accent line to green. | |||
NOTE: in Timeless the red accent line is usually set by the skin itself | |||
(MediaWiki:Timeless.css / skin config), not this file. If a red line | |||
survives, Inspect the element that draws it and tell me its selector — | |||
this is a best-effort override for the common ones. */ | |||
#mw-header, | |||
#mw-header-container, | |||
.color-bar, | |||
.color-middle { | |||
border-color: var(--wiki-accent); | |||
} | } | ||