MediaWiki:Common.css: Difference between revisions

m
no edit summary
m
m
 
Line 14: Line 14:
}
}


/* --- Weights you want --- */
/* Global variables (use the EXACT family names exposed by the kit CSS) */
:root{
:root{
   --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-colour: #000;
}
}


/* Body text defaults (Myriad Pro) */
/* Default = Myriad Pro for non-prominent text */
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, small, td, th, caption, dt, dd {
p, li, a, span, strong, em, small, td, th, caption, dt, dd,
   font-weight: var(--body-regular);
.vector-menu-content, .mw-portlet, #mw-panel,
   /* IMPORTANT:
#p-personal, #mw-head,
    If your Adobe kit DOES include 600, keep synthesis off.
input, button, select, textarea {
    If it DOESN'T include 600 yet, temporarily allow weight synthesis
   font-family: var(--font-body) !important;
    (remove the next line or set to 'weight') to get visible bold. */
   -webkit-text-stroke: 0; text-stroke: 0; text-shadow: none; /* no outline on body text */
  font-synthesis: none;
}
}


/* Bold in normal context */
/* Prominent elements = Century Gothic + 0.35% outline */
b, strong,
h1#firstHeading,
.mw-parser-output b, .mw-parser-output strong,
#firstHeading .mw-page-title-main,
p b, p strong, li b, li strong, td b, td strong, th b, th strong {
.firstHeading,
   font-weight: var(--body-strong) !important;
.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;


/* Optional: make UI labels punchier than body bold */
  /* Firefox fallback for outline */
#mw-panel .vector-menu-heading,
  text-shadow:
.vector-menu-heading,
    var(--outline-size) 0 0 var(--outline-colour),
#p-personal .vector-menu-heading,
    calc(-1 * var(--outline-size)) 0 0 var(--outline-colour),
.vector-menu-content .selected > a {
    0 var(--outline-size) 0 var(--outline-colour),
  font-weight: var(--ui-strong) !important;
    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 headings (Century Gothic + outline) as you already set */
/* Keep code/math monospace and un-outlined */
 
pre, code, kbd, samp, tt, .mw-code, .mw-highlight, .mwe-math-element {
@supports (font-variation-settings: normal) {
  -webkit-text-stroke: 0 !important;
  html, body, .mw-body, .mw-parser-output, .vector-body {
   text-stroke: 0 !important;
    font-variation-settings: "wght" 430; /* comfy regular */
  text-shadow: none !important;
   }
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  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 */
  }
}
}