MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search
m
no edit summary
m
m
Line 15: Line 15:


/* 1) A variable you can reuse */
/* 1) A variable you can reuse */
:root { --font-sans: "century-gothic", "Century Gothic", "Apple Gothic", "URW Gothic L", "Avant Garde", sans-serif; }
/* ===== 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 */
/* 2) Vector 2022 (new Vector) overrides */

Navigation menu