MediaWiki:Common.css: Difference between revisions

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


/* 1) A variable you can reuse */
/* 1) Config */
/* ===== Century Gothic page title with 0.35% outline ===== */
:root{
:root{
   /* If you use an Adobe Fonts kit, replace "century-gothic" below with the EXACT family name from your kit CSS */
   /* If using Adobe Fonts: set the first item to the EXACT family name from your kit CSS
   --cg-stack: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
    (often "century-gothic"). If not, keep "Century Gothic" first to use system-installed font. */
   --title-outline: 0.0035em;           /* 0.35% of font-size */
   --title-font: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
   --title-outline-colour: #000;         /* outline colour */
   --title-stroke: 0.0035em;       /* 0.35% of font size */
   --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(--cg-stack) !important;
   font-family: var(--title-font) !important;
 
   -webkit-font-smoothing: antialiased;
  /* WebKit/Chromium stroke */
   -moz-osx-font-smoothing: grayscale;
   -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 */
/* 3) True stroke where supported (Chromium/Edge/Safari) */
  text-shadow:
@supports (-webkit-text-stroke: 1px black) {
    calc(var(--title-outline) * 1) 0                          0 var(--title-outline-colour),
  .mw-page-title-main,
    calc(var(--title-outline) * -1) 0                          0 var(--title-outline-colour),
  h1#firstHeading,
    0                          calc(var(--title-outline) * 1)  0 var(--title-outline-colour),
  .firstHeading {
    0                          calc(var(--title-outline) * -1) 0 var(--title-outline-colour),
     -webkit-text-stroke: var(--title-stroke) var(--title-stroke-color);
     calc(var(--title-outline) * 1)  calc(var(--title-outline) * 1)  0 var(--title-outline-colour),
     text-stroke: var(--title-stroke) var(--title-stroke-color);
     calc(var(--title-outline) * -1) calc(var(--title-outline) * 1)  0 var(--title-outline-colour),
     -webkit-text-fill-color: currentColor; /* preserve the fill as the current text colour */
     calc(var(--title-outline) * 1)  calc(var(--title-outline) * -1) 0 var(--title-outline-colour),
     text-shadow: none; /* avoid double-thick look */
     calc(var(--title-outline) * -1) calc(var(--title-outline) * -1) 0 var(--title-outline-colour);
  }
}
}


/* Optional: make sure subtitles don't clash */
/* 4) Firefox fallback: simulate stroke with shadows */
#siteSub, .subtitle { text-shadow: none; -webkit-text-stroke: 0; }
@supports not (-webkit-text-stroke: 1px black) {
 
  .mw-page-title-main,
/* 2) Vector 2022 (new Vector) overrides */
  h1#firstHeading,
.skin-vector-2022 body,
  .firstHeading {
.skin-vector-2022 .mw-body,
    text-shadow:
.skin-vector-2022 .vector-body,
      var(--title-stroke) 0 0 var(--title-stroke-color),
.skin-vector-2022 .mw-parser-output {
      calc(-1 * var(--title-stroke)) 0 0 var(--title-stroke-color),
  font-family: var(--font-sans) !important;
      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);
  }
}
}


/* 3) Legacy Vector / MonoBook fallbacks */
/* 5) Dark mode: make the outline light for contrast */
.skin-vector body,
@media (prefers-color-scheme: dark) {
.skin-vector .mw-body,
  :root { --title-stroke-color: rgba(255,255,255,0.85); }
.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) */
/* 6) Keep subtitles clean */
.mw-body-content,
#siteSub, .subtitle { -webkit-text-stroke: 0; text-stroke: 0; text-shadow: none; }
.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;
}

Revision as of 14:29, 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;
}

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

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

/* 3) True stroke where supported (Chromium/Edge/Safari) */
@supports (-webkit-text-stroke: 1px black) {
  .mw-page-title-main,
  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 */
@supports not (-webkit-text-stroke: 1px black) {
  .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 */
@media (prefers-color-scheme: dark) {
  :root { --title-stroke-color: rgba(255,255,255,0.85); }
}

/* 6) Keep subtitles clean */
#siteSub, .subtitle { -webkit-text-stroke: 0; text-stroke: 0; text-shadow: none; }
Retrieved from "https://formula1.wiki/index.php?title=MediaWiki:Common.css&oldid=261"