MediaWiki:Common.css: Difference between revisions

From Formula One Wiki
Jump to navigation Jump to search
m
m
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
@import url('https://use.typekit.net/oov2wcw.css');
@import url('https://use.typekit.net/bus4qvu.css');


.skin-minerva.page-Main_Page #firstHeading {
.skin-minerva.page-Main_Page #firstHeading {
Line 14: Line 14:
}
}


/* ===== Century Gothic page title with 0.35% outline ===== */
/* Global variables (use the EXACT family names exposed by the kit CSS) */
:root{
:root{
  /* If you use an Adobe Fonts kit, replace "century-gothic" below with the EXACT family name from your kit CSS */
   --font-prominent: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
   --cg-stack: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
   --font-body: "myriad-pro", "Myriad Pro", "Myriad", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   --title-outline: 0.0035em;           /* 0.35% of font-size */
 
   --title-outline-colour: #000;         /* outline colour */
  --outline-size: 0.0035em; /* 0.35% */
   --outline-colour: #000;
}
}


/* Vector 2022 and legacy skins */
/* Default = Myriad Pro for non-prominent text */
html, body, .mw-body, .mw-parser-output, .vector-body,
.mw-content-ltr, .mw-content-rtl,
p, li, a, span, strong, em, small, td, th, caption, dt, dd,
.vector-menu-content, .mw-portlet, #mw-panel,
#p-personal, #mw-head,
input, button, select, textarea {
  font-family: var(--font-body) !important;
  -webkit-text-stroke: 0; text-stroke: 0; text-shadow: none; /* no outline on body text */
}
 
/* Prominent elements = Century Gothic + 0.35% outline */
h1#firstHeading,
h1#firstHeading,
#firstHeading .mw-page-title-main,
#firstHeading .mw-page-title-main,
.firstHeading {
.firstHeading,
   font-family: var(--cg-stack) !important;
.mw-headline,
#mw-panel .vector-menu-heading,
.vector-menu-heading {
   font-family: var(--font-prominent) !important;


   /* WebKit/Chromium stroke */
   /* Outline */
   -webkit-text-stroke: var(--title-outline) var(--title-outline-colour);
   -webkit-text-stroke: var(--outline-size) var(--outline-colour);
   text-stroke: var(--title-outline) var(--title-outline-colour); /* future-friendly */
   text-stroke: var(--outline-size) var(--outline-colour);
 
  /* Keep the normal text colour as the fill */
   -webkit-text-fill-color: currentColor;
   -webkit-text-fill-color: currentColor;


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


/* Optional: make sure subtitles don't clash */
/* Keep code/math monospace and un-outlined */
#siteSub, .subtitle { text-shadow: none; -webkit-text-stroke: 0; }
pre, code, kbd, samp, tt, .mw-code, .mw-highlight, .mwe-math-element {
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  text-shadow: none !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

Latest revision as of 14:58, 10 October 2025

/* CSS placed here will be applied to all skins */
@import url('https://use.typekit.net/bus4qvu.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;
}

/* Global variables (use the EXACT family names exposed by the kit CSS) */
:root{
  --font-prominent: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
  --font-body: "myriad-pro", "Myriad Pro", "Myriad", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --outline-size: 0.0035em;  /* 0.35% */
  --outline-colour: #000;
}

/* Default = Myriad Pro for non-prominent text */
html, body, .mw-body, .mw-parser-output, .vector-body,
.mw-content-ltr, .mw-content-rtl,
p, li, a, span, strong, em, small, td, th, caption, dt, dd,
.vector-menu-content, .mw-portlet, #mw-panel,
#p-personal, #mw-head,
input, button, select, textarea {
  font-family: var(--font-body) !important;
  -webkit-text-stroke: 0; text-stroke: 0; text-shadow: none; /* no outline on body text */
}

/* Prominent elements = Century Gothic + 0.35% outline */
h1#firstHeading,
#firstHeading .mw-page-title-main,
.firstHeading,
.mw-headline,
#mw-panel .vector-menu-heading,
.vector-menu-heading {
  font-family: var(--font-prominent) !important;

  /* Outline */
  -webkit-text-stroke: var(--outline-size) var(--outline-colour);
  text-stroke: var(--outline-size) var(--outline-colour);
  -webkit-text-fill-color: currentColor;

  /* Firefox fallback for outline */
  text-shadow:
    var(--outline-size) 0 0 var(--outline-colour),
    calc(-1 * var(--outline-size)) 0 0 var(--outline-colour),
    0 var(--outline-size) 0 var(--outline-colour),
    0 calc(-1 * var(--outline-size)) 0 var(--outline-colour),
    var(--outline-size) var(--outline-size) 0 var(--outline-colour),
    calc(-1 * var(--outline-size)) var(--outline-size) 0 var(--outline-colour),
    var(--outline-size) calc(-1 * var(--outline-size)) 0 var(--outline-colour),
    calc(-1 * var(--outline-size)) calc(-1 * var(--outline-size)) 0 var(--outline-colour);
}

/* Keep code/math monospace and un-outlined */
pre, code, kbd, samp, tt, .mw-code, .mw-highlight, .mwe-math-element {
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  text-shadow: none !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
Retrieved from "https://formula1.wiki/index.php?title=MediaWiki:Common.css&oldid=275"