MediaWiki:Common.css: Difference between revisions

Revision as of 14:48, 10 October 2025 (view source) Formula (talk | contribs) m ← Older edit		Revision as of 14:49, 10 October 2025 (view source) Formula (talk | contribs) m Newer edit →
Line 14:		Line 14:
	}		}
	/* 1) Load your Adobe Fonts kit (must include Century Gothic + Myriad Pro) */
	/* 2) Global variables (use the EXACT family names exposed by your kit CSS) */
	:root{		:root{
	/* Exact family names as exposed by your Adobe kit CSS */		/* Exact family names as exposed by your Adobe kit CSS */
Line 31:		Line 28:
	}		}
	/* 3) Default = Myriad Pro for non-prominent text */		/* Body text uses Myriad Pro, with no fake bold/italic */
	html, body, .mw-body, .mw-parser-output, .vector-body,		html, body, .mw-body, .mw-parser-output, .vector-body,
	.mw-content-ltr, .mw-content-rtl,		.mw-content-ltr, .mw-content-rtl,
	p, li, a, span, strong, em, small, td, th, caption, dt, dd,		p, li, a, span, strong, em, small, td, th, caption, dt, dd,
	.vector-menu-content, .mw-portlet, #mw-panel,		.vector-menu-content, .mw-portlet, #mw-panel, #p-personal, #mw-head,
	#p-personal, #mw-head,
	input, button, select, textarea {		input, button, select, textarea {
	font-family: var(--font-body) !important;		font-family: var(--font-body) !important;
	-webkit-text-stroke: 0; text-stroke: 0; text-shadow: none; /* no outline on body text */		font-weight: var(--body-regular);
			font-synthesis: none; /* avoid browser-synthesised bold/italic looking chunky */
			}
			/* Make bold in normal context lighter than 700 */
			b, strong,
			.mw-parser-output b, .mw-parser-output strong,
			td b, td strong, th b, th strong, li b, li strong, p b, p strong {
			font-weight: var(--body-strong) !important;
	}		}
	/* 4) Prominent elements = Century Gothic + 0.35% outline */		/* Page title & section headings */
	h1#firstHeading,		h1#firstHeading,
	#firstHeading .mw-page-title-main,		#firstHeading .mw-page-title-main,
Line 51:		Line 55:
	font-family: var(--font-prominent) !important;		font-family: var(--font-prominent) !important;
	/* Outline */
	-webkit-text-stroke: var(--outline-size) var(--outline-colour);		-webkit-text-stroke: var(--outline-size) var(--outline-colour);
	text-stroke: var(--outline-size) var(--outline-colour);		text-stroke: var(--outline-size) var(--outline-colour);
Line 68:		Line 71:
	}		}
	/* 5) Keep code/math monospace and un-outlined */
	pre, code, kbd, samp, tt, .mw-code, .mw-highlight, .mwe-math-element {		pre, code, kbd, samp, tt, .mw-code, .mw-highlight, .mwe-math-element {
	-webkit-text-stroke: 0 !important;		-webkit-text-stroke: 0 !important;

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

:root{
  /* Exact family names as exposed by your Adobe kit CSS */
  --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 for prominent text */
  --outline-colour: #000;

  /* Weights (tune these) */
  --body-regular: 400;            /* normal paragraphs */
  --body-strong: 500;             /* lighter-than-bold for <b>/<strong> */
  /* If your kit lacks 500/Medium, change this to 600 (Semibold) */
}

/* Body text uses Myriad Pro, with no fake bold/italic */
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;
  font-weight: var(--body-regular);
  font-synthesis: none; /* avoid browser-synthesised bold/italic looking chunky */
}

/* Make bold in normal context lighter than 700 */
b, strong,
.mw-parser-output b, .mw-parser-output strong,
td b, td strong, th b, th strong, li b, li strong, p b, p strong {
  font-weight: var(--body-strong) !important;
}

/* Page title & section headings */
h1#firstHeading,
#firstHeading .mw-page-title-main,
.firstHeading,
.mw-headline,
#mw-panel .vector-menu-heading,
.vector-menu-heading {
  font-family: var(--font-prominent) !important;

  -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);
}

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

@supports (font-variation-settings: normal) {
  html, body, .mw-body, .mw-parser-output, .vector-body { 
    font-variation-settings: "wght" 440;        /* comfy body weight */
  }
  b, strong,
  .mw-parser-output b, .mw-parser-output strong { 
    font-variation-settings: "wght" 560;        /* lighter-than-700 bold */
  }
}