Jump to content

MediaWiki:Minerva.css

From Primal Idle Wiki

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.
/* ============================================================================
 * Primal Idle Wiki — Minerva (mobile skin) accents
 *
 * Loaded ONLY on the Minerva skin (as MediaWiki:Minerva.css), on TOP of the
 * sitewide MediaWiki:Common.css. Common.css already provides the palette
 * variables (:root { --pi-* }) and the dark content styling; Minerva's own
 * native night mode ($wgMinervaNightMode) handles the header/menu chrome.
 *
 * So this file stays deliberately small: just the amber brand accents on links
 * and headings so the mobile skin reads as the same product. It avoids
 * overriding Minerva's internal chrome, which night mode styles correctly.
 *
 * Source file: theme/minerva.css → published to MediaWiki:Minerva.css by
 * scripts/sync-theme.mjs (SOURCE_CSS=theme/minerva.css TARGET_PAGE=MediaWiki:Minerva.css).
 * ==========================================================================*/

/* Amber links, matching the desktop theme. */
.mw-body a,
.mw-body a.external,
.content a {
  color: var(--pi-link, #f0b968);
}
.mw-body a:visited,
.content a:visited {
  color: var(--pi-link-visited, #cf9bd6);
}
.mw-body a.new,
.content a.new {
  color: var(--pi-danger, #e05b5b);
}

/* Section headings pick up the display face + amber, like desktop. */
.mw-body h1,
.mw-body h2 {
  font-family: var(--pi-display, 'Roboto Slab', Georgia, serif);
  font-weight: 400;
}
#firstHeading,
.mw-body h1 {
  color: var(--pi-accent, #f0a53c);
}

/* Keep the responsive helpers from Common.css working here too: wide tables
 * scroll rather than stretch the page (Minerva is always a narrow viewport). */
.content .wikitable,
.mw-parser-output .wikitable {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}