MediaWiki:Common.css: Difference between revisions

From Formula One Wiki
Jump to navigation Jump to search
Formula (talk | contribs) (font)
m
Line 14: Line 14:
}
}


/* 1) Config */
/* ===== Century Gothic page title with 0.35% outline ===== */
:root{
:root{
   /* If using Adobe Fonts: set the first item to the EXACT family name from your kit CSS
   /* If you use an Adobe Fonts kit, replace "century-gothic" below with the EXACT family name from your kit CSS */
    (often "century-gothic"). If not, keep "Century Gothic" first to use system-installed font. */
   --cg-stack: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
   --title-font: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
   --title-outline: 0.0035em;           /* 0.35% of font-size */
   --title-stroke: 0.0035em;       /* 0.35% of font size */
   --title-outline-colour: #000;         /* outline colour */
   --title-stroke-color: #000;     /* outline colour (auto-switched in dark mode below) */
}
}


/* 2) Target page titles across common skins */
/* Vector 2022 and legacy skins */
.mw-page-title-main,
h1#firstHeading,
h1#firstHeading,
#firstHeading .mw-page-title-main,
.firstHeading {
.firstHeading {
   font-family: var(--title-font) !important;
   font-family: var(--cg-stack) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* 3) True stroke where supported (Chromium/Edge/Safari) */
  /* WebKit/Chromium stroke */
@supports (-webkit-text-stroke: 1px black) {
   -webkit-text-stroke: var(--title-outline) var(--title-outline-colour);
  .mw-page-title-main,
  text-stroke: var(--title-outline) var(--title-outline-colour); /* future-friendly */
   h1#firstHeading,
  .firstHeading {
    -webkit-text-stroke: var(--title-stroke) var(--title-stroke-color);
    text-stroke: var(--title-stroke) var(--title-stroke-color);
    -webkit-text-fill-color: currentColor; /* preserve the fill as the current text colour */
    text-shadow: none; /* avoid double-thick look */
  }
}


/* 4) Firefox fallback: simulate stroke with shadows */
  /* Keep the normal text colour as the fill */
@supports not (-webkit-text-stroke: 1px black) {
  -webkit-text-fill-color: currentColor;
  .mw-page-title-main,
  h1#firstHeading,
  .firstHeading {
    text-shadow:
      var(--title-stroke) 0 0 var(--title-stroke-color),
      calc(-1 * var(--title-stroke)) 0 0 var(--title-stroke-color),
      0 var(--title-stroke) 0 var(--title-stroke-color),
      0 calc(-1 * var(--title-stroke)) 0 var(--title-stroke-color),
      var(--title-stroke) var(--title-stroke) 0 var(--title-stroke-color),
      calc(-1 * var(--title-stroke)) var(--title-stroke) 0 var(--title-stroke-color),
      var(--title-stroke) calc(-1 * var(--title-stroke)) 0 var(--title-stroke-color),
      calc(-1 * var(--title-stroke)) calc(-1 * var(--title-stroke)) 0 var(--title-stroke-color);
  }
}


/* 5) Dark mode: make the outline light for contrast */
  /* Firefox fallback: simulated outline via multi-direction shadows */
@media (prefers-color-scheme: dark) {
  text-shadow:
  :root { --title-stroke-color: rgba(255,255,255,0.85); }
    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);
}
}


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

Revision as of 14:31, 10 October 2025

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

/* ===== 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; }
Retrieved from "https://formula1.wiki/index.php?title=MediaWiki:Common.css&oldid=262"