MediaWiki:Common.css: Difference between revisions

Latest revision as of 16:06, 11 September 2026

/* 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 {
	padding: 2em 0 1.6em;
}

.oj-hero-title {
	font-size: 2.6em;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var( --color-emphasized, #101418 );
}

/* 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 );
}

.oj-download a.external {
	background-image: none;
	padding-right: 1.1em;
}

.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;
}

.vector-appearance-landmark {
	display: none;
}

.vector-main-menu-action-opt-out {
	display: none;
}

/* Make images respect divs width settings */
.mw-parser-output img {
	max-width: 100%;
	height: auto;
}



/* 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;
}