MediaWiki:Common.css: Difference between revisions

From Formula One Wiki
Jump to navigation Jump to search
m
m
Line 14: Line 14:
}
}


/* --- Weights you want --- */
:root{
:root{
   /* Exact family names as exposed by your Adobe kit CSS */
   --body-regular: 400; /* paragraphs */
  --font-prominent: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
   --body-strong: 600;  /* stronger than before (was 500) */
  --font-body: "myriad-pro", "Myriad Pro", "Myriad", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
   --ui-strong:   700;   /* optional: for menus/nav if needed */
 
  --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 */
/* Body text defaults (Myriad Pro) */
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, 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-weight: var(--body-regular);
   font-synthesis: none; /* avoid browser-synthesised bold/italic looking chunky */
  /* IMPORTANT:
    If your Adobe kit DOES include 600, keep synthesis off.
    If it DOESN'T include 600 yet, temporarily allow weight synthesis
    (remove the next line or set to 'weight') to get visible bold. */
   font-synthesis: none;
}
}


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


/* Page title & section headings */
/* Optional: make UI labels punchier than body bold */
h1#firstHeading,
#firstHeading .mw-page-title-main,
.firstHeading,
.mw-headline,
#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-heading,
.vector-menu-heading {
.vector-menu-heading,
  font-family: var(--font-prominent) !important;
#p-personal .vector-menu-heading,
 
.vector-menu-content .selected > a {
  -webkit-text-stroke: var(--outline-size) var(--outline-colour);
   font-weight: var(--ui-strong) !important;
   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 {
/* Keep headings (Century Gothic + outline) as you already set */
  -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) {
@supports (font-variation-settings: normal) {
   html, body, .mw-body, .mw-parser-output, .vector-body {  
   html, body, .mw-body, .mw-parser-output, .vector-body {
     font-variation-settings: "wght" 440;       /* comfy body weight */
     font-variation-settings: "wght" 430; /* comfy regular */
  }
  b, strong, .mw-parser-output b, .mw-parser-output strong {
    font-variation-settings: "wght" 575; /* solid bold without going chunky */
    font-weight: 600; /* fallback */
   }
   }
   b, strong,
   /* Optional UI emphasis */
   .mw-parser-output b, .mw-parser-output strong {  
   #mw-panel .vector-menu-heading, .vector-menu-heading {
     font-variation-settings: "wght" 600;       /* lighter-than-700 bold */
     font-variation-settings: "wght" 640;
    font-weight: 700; /* fallback */
   }
   }
}
}

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

/* --- Weights you want --- */
:root{
  --body-regular: 400;  /* paragraphs */
  --body-strong: 600;   /* stronger than before (was 500) */
  --ui-strong:   700;   /* optional: for menus/nav if needed */
}

/* Body text defaults (Myriad Pro) */
html, body, .mw-body, .mw-parser-output, .vector-body,
.mw-content-ltr, .mw-content-rtl,
p, li, a, span, small, td, th, caption, dt, dd {
  font-weight: var(--body-regular);
  /* IMPORTANT:
     If your Adobe kit DOES include 600, keep synthesis off.
     If it DOESN'T include 600 yet, temporarily allow weight synthesis
     (remove the next line or set to 'weight') to get visible bold. */
  font-synthesis: none;
}

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

/* Optional: make UI labels punchier than body bold */
#mw-panel .vector-menu-heading,
.vector-menu-heading,
#p-personal .vector-menu-heading,
.vector-menu-content .selected > a {
  font-weight: var(--ui-strong) !important;
}

/* Keep headings (Century Gothic + outline) as you already set */

@supports (font-variation-settings: normal) {
  html, body, .mw-body, .mw-parser-output, .vector-body {
    font-variation-settings: "wght" 430; /* comfy regular */
  }
  b, strong, .mw-parser-output b, .mw-parser-output strong {
    font-variation-settings: "wght" 575; /* solid bold without going chunky */
    font-weight: 600; /* fallback */
  }
  /* Optional UI emphasis */
  #mw-panel .vector-menu-heading, .vector-menu-heading {
    font-variation-settings: "wght" 640;
    font-weight: 700; /* fallback */
  }
}
Retrieved from "https://formula1.wiki/index.php?title=MediaWiki:Common.css&oldid=274"