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