Jump to content

MediaWiki:Common.css

From PentaLatin
Revision as of 03:21, 13 November 2026 by Admin (talk | contribs) (Mobile: let the File history table scroll sideways on narrow screens)

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.
/* PentaLatin Phase 2 placeholder branding.
   Simple warm terracotta/cream palette, no dark-mode handling yet (deferred
   until real branding assets/logo are chosen). Safe to replace wholesale later. */

:root {
	--pentalatin-primary: #B2472F;
	--pentalatin-primary-dark: #7A2E22;
	--pentalatin-cream: #F7F1E6;
}

body {
	background-color: var( --pentalatin-cream );
}

.mw-body,
.vector-body {
	background-color: #ffffff;
}

.vector-header-container,
.vector-header {
	background-color: var( --pentalatin-cream );
}

#firstHeading,
.firstHeading {
	font-family: Georgia, 'Times New Roman', serif;
	color: var( --pentalatin-primary-dark );
}

a {
	color: var( --pentalatin-primary );
}

a:visited {
	color: var( --pentalatin-primary-dark );
}

/* Phase 7 mobile fix (2026-11-12). With $wgVectorResponsive on, Vector turns content
   tables into scrollable blocks on narrow screens (display:block). Our infoboxes have a
   fixed 300px width, so the inner table shrank to its content and the red title bar
   stopped short. Keep infoboxes as real tables, never wider than the screen. */
.mw-parser-output table.infobox {
	display: table;
	max-width: 100%;
}

/* Phase 7 mobile fix (2026-11-12). The "File history" table on File: pages sits outside
   the article text, so Vector's own "scroll wide tables sideways" rule doesn't cover it;
   on a phone its last columns were cut off with no way to scroll to them. Same treatment
   as Vector's rule, same breakpoint. */
@media (max-width: 639px) {
	table.filehistory {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}
}