MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
m |
m |
||
Line 15: | Line 15: | ||
/* 1) A variable you can reuse */ | /* 1) A variable you can reuse */ | ||
:root { -- | /* ===== Century Gothic page title with 0.35% outline ===== */ | ||
:root{ | |||
/* If you use an Adobe Fonts kit, replace "century-gothic" below with the EXACT family name from your kit CSS */ | |||
--cg-stack: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif; | |||
--title-outline: 0.0035em; /* 0.35% of font-size */ | |||
--title-outline-colour: #000; /* outline colour */ | |||
} | |||
/* Vector 2022 and legacy skins */ | |||
h1#firstHeading, | |||
#firstHeading .mw-page-title-main, | |||
.firstHeading { | |||
font-family: var(--cg-stack) !important; | |||
/* WebKit/Chromium stroke */ | |||
-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 */ | |||
text-shadow: | |||
calc(var(--title-outline) * 1) 0 0 var(--title-outline-colour), | |||
calc(var(--title-outline) * -1) 0 0 var(--title-outline-colour), | |||
0 calc(var(--title-outline) * 1) 0 var(--title-outline-colour), | |||
0 calc(var(--title-outline) * -1) 0 var(--title-outline-colour), | |||
calc(var(--title-outline) * 1) calc(var(--title-outline) * 1) 0 var(--title-outline-colour), | |||
calc(var(--title-outline) * -1) calc(var(--title-outline) * 1) 0 var(--title-outline-colour), | |||
calc(var(--title-outline) * 1) calc(var(--title-outline) * -1) 0 var(--title-outline-colour), | |||
calc(var(--title-outline) * -1) calc(var(--title-outline) * -1) 0 var(--title-outline-colour); | |||
} | |||
/* Optional: make sure subtitles don't clash */ | |||
#siteSub, .subtitle { text-shadow: none; -webkit-text-stroke: 0; } | |||
/* 2) Vector 2022 (new Vector) overrides */ | /* 2) Vector 2022 (new Vector) overrides */ |
Revision as of 14:25, 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) A variable you can reuse */ /* ===== Century Gothic page title with 0.35% outline ===== */ :root{ /* If you use an Adobe Fonts kit, replace "century-gothic" below with the EXACT family name from your kit CSS */ --cg-stack: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif; --title-outline: 0.0035em; /* 0.35% of font-size */ --title-outline-colour: #000; /* outline colour */ } /* Vector 2022 and legacy skins */ h1#firstHeading, #firstHeading .mw-page-title-main, .firstHeading { font-family: var(--cg-stack) !important; /* WebKit/Chromium stroke */ -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 */ text-shadow: calc(var(--title-outline) * 1) 0 0 var(--title-outline-colour), calc(var(--title-outline) * -1) 0 0 var(--title-outline-colour), 0 calc(var(--title-outline) * 1) 0 var(--title-outline-colour), 0 calc(var(--title-outline) * -1) 0 var(--title-outline-colour), calc(var(--title-outline) * 1) calc(var(--title-outline) * 1) 0 var(--title-outline-colour), calc(var(--title-outline) * -1) calc(var(--title-outline) * 1) 0 var(--title-outline-colour), calc(var(--title-outline) * 1) calc(var(--title-outline) * -1) 0 var(--title-outline-colour), calc(var(--title-outline) * -1) calc(var(--title-outline) * -1) 0 var(--title-outline-colour); } /* Optional: make sure subtitles don't clash */ #siteSub, .subtitle { text-shadow: none; -webkit-text-stroke: 0; } /* 2) Vector 2022 (new Vector) overrides */ .skin-vector-2022 body, .skin-vector-2022 .mw-body, .skin-vector-2022 .vector-body, .skin-vector-2022 .mw-parser-output { font-family: var(--font-sans) !important; } /* 3) Legacy Vector / MonoBook fallbacks */ .skin-vector body, .skin-vector .mw-body, .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) */ .mw-body-content, .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; }