MediaWiki:Common.css: Difference between revisions

MediaWiki:Common.css (view source)

Revision as of 14:31, 10 October 2025

382 bytes removed , Yesterday at 14:31

m

no edit summary

Formula

Bureaucrats, Interface administrators, Administrators

151

edits

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