MediaWiki:Common.css
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.
/* openjournal -- loaded into MediaWiki:Common.css by the seed step.
Edit it on-wiki at /wiki/MediaWiki:Common.css, or here and re-seed.
Colours are MediaWiki's Codex design tokens rather than literals, so this
file follows the reader's Light/Dark/Automatic choice without needing a
second set of rules. The hex values after each token are the light-mode
fallback, used only if a skin does not define the token. */
.oj-hero {
margin: 0 0 1.5em;
padding: 2em 0 1.6em;
border-bottom: 1px solid var( --border-color-subtle, #c8ccd1 );
}
.oj-hero-title {
font-size: 2.6em;
line-height: 1.1;
font-weight: 700;
letter-spacing: -0.02em;
color: var( --color-emphasized, #101418 );
}
.oj-hero-sub {
margin-top: 0.4em;
font-size: 1.05em;
color: var( --color-subtle, #54595d );
max-width: 34em;
}
/* One article in a feed. */
.oj-entry {
padding: 0.7em 0;
border-bottom: 1px solid var( --border-color-muted, #eaecf0 );
}
.oj-entry a {
font-size: 1.12em;
}
.oj-byline {
color: var( --color-subtle, #54595d );
font-size: 0.88em;
}
.oj-journal .oj-feed {
margin-top: 1.2em;
}
.oj-footnote {
color: var( --color-subtle, #54595d );
font-size: 0.92em;
}
/* The author list is a run of spans; CSS supplies the separators so there is
never a trailing one. */
.oj-authors span + span::before {
content: " \00b7 ";
color: var( --color-subtle, #54595d );
}
/* The "start a new article" box reads as a call to action, not a search field. */
.oj-journal .inputbox-element {
max-width: 26em;
}
/* ---------------------------------------------------------------- Dark mode
Codex's dark palette puts body text at #eaecf0 and headings at #f8f9fa on a
#101418 page: contrast ratios of 15.6:1 and 17.6:1. WCAG AAA asks for 7:1,
so that is roughly twice the contrast anyone needs, and on a near-black
ground it is where text starts to glow and smear (halation).
Soften the text and lift the page a little off black. The ratios below stay
above AAA, so nothing becomes harder to read:
headings #f8f9fa 17.6:1 -> #dfe3e7 13.7:1
body text #eaecf0 15.6:1 -> #ccd1d6 11.5:1
bylines #a2a9b1 7.8:1 -> #9fa6ae 7.2:1
These override Codex tokens, so everything on the page follows -- article
text, the skin's own chrome and the styles above alike. */
.oj-dark-palette,
html.skin-theme-clientpref-night {
--color-base: #ccd1d6;
--color-emphasized: #dfe3e7;
--color-subtle: #9fa6ae;
--background-color-base: #17191c;
}
/* The same, for readers on Automatic whose system is set to dark. */
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os {
--color-base: #ccd1d6;
--color-emphasized: #dfe3e7;
--color-subtle: #9fa6ae;
--background-color-base: #17191c;
}
}
/* A single external link styled as a button, for the one place that needs it:
the database dump on OpenJournal:Helping out. */
.oj-download {
margin: 1em 0;
}
.oj-download a {
display: inline-block;
padding: 0.55em 1.1em;
border-radius: 2px;
background: var( --background-color-progressive, #36c );
color: var( --color-inverted, #fff );
font-weight: 600;
text-decoration: none;
}
.oj-download a:hover {
background: var( --background-color-progressive--hover, #4b77d6 );
}
/* MediaWiki marks every external link with a small icon by default; it reads
oddly against a button. */
.oj-download a.external {
background-image: none;
padding-right: 1.1em;
}
/* Prev/next links at the bottom of each page of the front-page feed. */
.oj-pager {
display: flex;
justify-content: space-between;
margin-top: 1em;
padding-top: 0.6em;
border-top: 1px solid var( --border-color-muted, #eaecf0 );
font-size: 0.92em;
}
/* Either link can be absent (first or last page). flexbox alone can't tell
"only Older present" from "only Newer present" -- both are a lone
first-child -- so the template gives Older its own class to push right. */
.oj-pager .oj-older {
margin-left: auto;
}
/* Appearance (theme/font-size/width) is removed from every page rather than
relocated -- Vector wires it into the right column with no config to move
it, and Special:Preferences already has a real, working "Color" setting
under Appearance, so nothing is lost for anyone with an account; readers
without one still get the site's OJ_DEFAULT_THEME default. */
.vector-appearance-landmark {
display: none;
}
/* "Switch to old look" (legacy Vector opt-out), shown to logged-in users at
the bottom of the left menu. Vector hardcodes this with no config flag to
turn it off -- confirmed by rendering the component directly rather than
guessing from the template -- so it's removed the same way as Appearance. */
.vector-main-menu-action-opt-out {
display: none;
}
/* The right panel's "Last modified" link already says this. No config gate
exists for the footer's own copy (unlike Privacy/About/Disclaimers just
above, which are disabled the proper way, via their interface messages),
so it's hidden the same way Appearance and the old-look link are. */
#footer-info-lastmod {
display: none;
}
/* Vector deliberately gives the page title (h1) and h2 section headings a
serif font -- Wikipedia's own visual identity -- while body text, and
even h3-h6, stay sans-serif. Confirmed in skins.vector.styles: the rule
is .mw-body h1, .mw-body-content h1/h2 { font-family: 'Linux Libertine' ...
That split reads as inconsistent here, so headings inherit the body font
instead of overriding it -- one font, everywhere, and it stays that way
even if the body font ever changes. */
.mw-body h1,
.mw-body .mw-heading1,
.mw-body-content h1,
.mw-body-content .mw-heading1,
.mw-body-content h2,
.mw-body-content .mw-heading2 {
font-family: inherit;
}