MediaWiki:Common.css

From Formula One Wiki
Revision as of 14:25, 10 October 2025 by Formula (talk | contribs)
Jump to navigation Jump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
@import url('https://use.typekit.net/oov2wcw.css');

.skin-minerva.page-Main_Page #firstHeading {
    display: none;
}

/*  visualClear CSS class definition for SocialProfile extension
    because Vector does not include the definition anymore; see
    https://phabricator.wikimedia.org/T328235 and 
    https://phabricator.wikimedia.org/T287962 */
.visualClear {
	clear: both;
}

/* 1) A variable you can reuse */
/* ===== Century Gothic page title with 0.35% outline ===== */
:root{
  /* If you use an Adobe Fonts kit, replace "century-gothic" below with the EXACT family name from your kit CSS */
  --cg-stack: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
  --title-outline: 0.0035em;           /* 0.35% of font-size */
  --title-outline-colour: #000;         /* outline colour */
}


/* Vector 2022 and legacy skins */
h1#firstHeading,
#firstHeading .mw-page-title-main,
.firstHeading {
  font-family: var(--cg-stack) !important;

  /* WebKit/Chromium stroke */
  -webkit-text-stroke: var(--title-outline) var(--title-outline-colour);
  text-stroke: var(--title-outline) var(--title-outline-colour); /* future-friendly */

  /* Keep the normal text colour as the fill */
  -webkit-text-fill-color: currentColor;

  /* Firefox fallback: simulated outline via multi-direction shadows */
  text-shadow:
    calc(var(--title-outline) * 1)  0                          0 var(--title-outline-colour),
    calc(var(--title-outline) * -1) 0                          0 var(--title-outline-colour),
    0                          calc(var(--title-outline) * 1)  0 var(--title-outline-colour),
    0                          calc(var(--title-outline) * -1) 0 var(--title-outline-colour),
    calc(var(--title-outline) * 1)  calc(var(--title-outline) * 1)  0 var(--title-outline-colour),
    calc(var(--title-outline) * -1) calc(var(--title-outline) * 1)  0 var(--title-outline-colour),
    calc(var(--title-outline) * 1)  calc(var(--title-outline) * -1) 0 var(--title-outline-colour),
    calc(var(--title-outline) * -1) calc(var(--title-outline) * -1) 0 var(--title-outline-colour);
}

/* Optional: make sure subtitles don't clash */
#siteSub, .subtitle { text-shadow: none; -webkit-text-stroke: 0; }

/* 2) Vector 2022 (new Vector) overrides */
.skin-vector-2022 body,
.skin-vector-2022 .mw-body,
.skin-vector-2022 .vector-body,
.skin-vector-2022 .mw-parser-output {
  font-family: var(--font-sans) !important;
}

/* 3) Legacy Vector / MonoBook fallbacks */
.skin-vector body,
.skin-vector .mw-body,
.skin-monobook body,
.skin-monobook .mw-body,
.mw-parser-output,
body,
html {
  font-family: var(--font-sans) !important;
}

/* 4) Tables and headings (MW often styles these separately) */
.mw-body-content,
.mw-content-ltr,
.mw-content-rtl,
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output td,
.mw-parser-output th,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
  font-family: var(--font-sans) !important;
}