MediaWiki:Common.css: Difference between revisions

MediaWiki:Common.css (view source)

Revision as of 14:29, 10 October 2025

460 bytes removed , Yesterday at 14:29

font

Formula

Bureaucrats, Interface administrators, Administrators

151

edits

@@ Line 14: / Line 14: @@
 }
-/* 1) A variable you can reuse */
+/* 1) Config */
-/* ===== 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 */
+   /* If using Adobe Fonts: set the first item to the EXACT family name from your kit CSS
-   --cg-stack: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
+     (often "century-gothic"). If not, keep "Century Gothic" first to use system-installed font. */
-   --title-outline: 0.0035em;           /* 0.35% of font-size */
+   --title-font: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
-   --title-outline-colour: #000;         /* outline colour */
+   --title-stroke: 0.0035em;        /* 0.35% of font size */
+   --title-stroke-color: #000;      /* outline colour (auto-switched in dark mode below) */
 }
+/* 2) Target page titles across common skins */
-/* Vector 2022 and legacy skins */
+.mw-page-title-main,
 h1#firstHeading,
-#firstHeading .mw-page-title-main,
 .firstHeading {
-   font-family: var(--cg-stack) !important;
+   font-family: var(--title-font) !important;
+   -webkit-font-smoothing: antialiased;
-  /* WebKit/Chromium stroke */
+   -moz-osx-font-smoothing: grayscale;
-   -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 */
+/* 3) True stroke where supported (Chromium/Edge/Safari) */
-  text-shadow:
+@supports (-webkit-text-stroke: 1px black) {
-    calc(var(--title-outline) * 1)  0                          0 var(--title-outline-colour),
+  .mw-page-title-main,
-    calc(var(--title-outline) * -1) 0                          0 var(--title-outline-colour),
+  h1#firstHeading,
-                          calc(var(--title-outline) * 1)  0 var(--title-outline-colour),
+  .firstHeading {
-                          calc(var(--title-outline) * -1) 0 var(--title-outline-colour),
+     -webkit-text-stroke: var(--title-stroke) var(--title-stroke-color);
-     calc(var(--title-outline) * 1)  calc(var(--title-outline) * 1)  0 var(--title-outline-colour),
+     text-stroke: var(--title-stroke) var(--title-stroke-color);
-     calc(var(--title-outline) * -1) calc(var(--title-outline) * 1)  0 var(--title-outline-colour),
+     -webkit-text-fill-color: currentColor; /* preserve the fill as the current text colour */
-     calc(var(--title-outline) * 1)  calc(var(--title-outline) * -1) 0 var(--title-outline-colour),
+     text-shadow: none; /* avoid double-thick look */
-     calc(var(--title-outline) * -1) calc(var(--title-outline) * -1) 0 var(--title-outline-colour);
+  }
 }
-/* Optional: make sure subtitles don't clash */
+/* 4) Firefox fallback: simulate stroke with shadows */
-#siteSub, .subtitle { text-shadow: none; -webkit-text-stroke: 0; }
+@supports not (-webkit-text-stroke: 1px black) {
+  .mw-page-title-main,
-/* 2) Vector 2022 (new Vector) overrides */
+  h1#firstHeading,
-.skin-vector-2022 body,
+  .firstHeading {
-.skin-vector-2022 .mw-body,
+    text-shadow:
-.skin-vector-2022 .vector-body,
+      var(--title-stroke) 0 0 var(--title-stroke-color),
-.skin-vector-2022 .mw-parser-output {
+      calc(-1 * var(--title-stroke)) 0 0 var(--title-stroke-color),
-  font-family: var(--font-sans) !important;
+var(--title-stroke) 0 var(--title-stroke-color),
+calc(-1 * var(--title-stroke)) 0 var(--title-stroke-color),
+      var(--title-stroke) var(--title-stroke) 0 var(--title-stroke-color),
+      calc(-1 * var(--title-stroke)) var(--title-stroke) 0 var(--title-stroke-color),
+      var(--title-stroke) calc(-1 * var(--title-stroke)) 0 var(--title-stroke-color),
+      calc(-1 * var(--title-stroke)) calc(-1 * var(--title-stroke)) 0 var(--title-stroke-color);
+  }
 }
-/* 3) Legacy Vector / MonoBook fallbacks */
+/* 5) Dark mode: make the outline light for contrast */
-.skin-vector body,
+@media (prefers-color-scheme: dark) {
-.skin-vector .mw-body,
+  :root { --title-stroke-color: rgba(255,255,255,0.85); }
-.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) */
+/* 6) Keep subtitles clean */
-.mw-body-content,
+#siteSub, .subtitle { -webkit-text-stroke: 0; text-stroke: 0; text-shadow: none; }
-.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;
-}