MediaWiki:Common.css: Difference between revisions

MediaWiki:Common.css (view source)

Revision as of 14:33, 10 October 2025

841 bytes added , Yesterday at 14:33

m

no edit summary

Formula

Bureaucrats, Interface administrators, Administrators

151

edits

@@ Line 14: / Line 14: @@
 }
-/* ===== Century Gothic page title with 0.35% outline ===== */
+/* === Global Century Gothic + bold page title (Vector 2022 & legacy) === */
-:root{
-   /* If you use an Adobe Fonts kit, replace "century-gothic" below with the EXACT family name from your kit CSS */
+/* (Optional) If you use Adobe Fonts, keep this import and swap to your kit URL. */
-   --cg-stack: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
-   --title-outline: 0.0035em;           /* 0.35% of font-size */
+/* 1) Config */
-   --title-outline-colour: #000;         /* outline colour */
+:root {
+   /* Put the EXACT Adobe family first if using a kit (often "century-gothic"). */
+   --wiki-font: "century-gothic", "Century Gothic", "URW Gothic L", "Apple Gothic", "Avant Garde", sans-serif;
+  /* Title look */
+  --title-weight: 700;          /* make the title actually bold */
+   --title-stroke: 0.01em;       /* 1% outline – beefier than 0.35% */
+   --title-stroke-colour: #000;
+}
+/* Dark mode contrast */
+@media (prefers-color-scheme: dark) {
+  :root { --title-stroke-colour: rgba(255,255,255,0.85); }
+}
+/* 2) Set the font site-wide (content, nav, menus, tables, forms) */
+html, body,
+.mw-body, .mw-parser-output, .vector-body,
+.vector-header, .vector-toc, .vector-menu, #mw-panel, /* legacy Vector side panel */
+.mw-headline, p, li, td, th, caption,
+h1, h2, h3, h4, h5, h6,
+input, textarea, select, button, .mw-ui-button {
+  font-family: var(--wiki-font) !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
-/* Vector 2022 and legacy skins */
+/* 3) Page title styling (works for Vector 2022 & legacy) */
+.mw-page-title-main,
 h1#firstHeading,
-#firstHeading .mw-page-title-main,
 .firstHeading {
-   font-family: var(--cg-stack) !important;
+   font-weight: var(--title-weight) !important;
+  line-height: 1.15;
+  letter-spacing: 0;
+}
-  /* WebKit/Chromium stroke */
+/* Real stroke where supported */
-   -webkit-text-stroke: var(--title-outline) var(--title-outline-colour);
+@supports (-webkit-text-stroke: 1px black) {
-  text-stroke: var(--title-outline) var(--title-outline-colour); /* future-friendly */
+   .mw-page-title-main,
+  h1#firstHeading,
-  /* Keep the normal text colour as the fill */
+  .firstHeading {
-  -webkit-text-fill-color: currentColor;
+    -webkit-text-stroke: var(--title-stroke) var(--title-stroke-colour);
+    text-stroke: var(--title-stroke) var(--title-stroke-colour);
+    -webkit-text-fill-color: currentColor;  /* keep normal fill */
+    text-shadow: none;                       /* avoid double effect */
+  }
+}
-  /* Firefox fallback: simulated outline via multi-direction shadows */
+/* Firefox fallback (simulate stroke with shadows) */
-   text-shadow:
+@supports not (-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),
+    text-shadow:
-    calc(var(--title-outline) * 1)  calc(var(--title-outline) * 1)  0 var(--title-outline-colour),
+      var(--title-stroke) 0 0 var(--title-stroke-colour),
-    calc(var(--title-outline) * -1) calc(var(--title-outline) * 1)  0 var(--title-outline-colour),
+      calc(-1 * var(--title-stroke)) 0 0 var(--title-stroke-colour),
-    calc(var(--title-outline) * 1)  calc(var(--title-outline) * -1) 0 var(--title-outline-colour),
+var(--title-stroke) 0 var(--title-stroke-colour),
-    calc(var(--title-outline) * -1) calc(var(--title-outline) * -1) 0 var(--title-outline-colour);
+calc(-1 * var(--title-stroke)) 0 var(--title-stroke-colour),
+      var(--title-stroke) var(--title-stroke) 0 var(--title-stroke-colour),
+      calc(-1 * var(--title-stroke)) var(--title-stroke) 0 var(--title-stroke-colour),
+      var(--title-stroke) calc(-1 * var(--title-stroke)) 0 var(--title-stroke-colour),
+      calc(-1 * var(--title-stroke)) calc(-1 * var(--title-stroke)) 0 var(--title-stroke-colour);
+  }
 }
-/* Optional: make sure subtitles don't clash */
+/* Keep subtitles clean */
-#siteSub, .subtitle { text-shadow: none; -webkit-text-stroke: 0; }
+#siteSub, .subtitle { -webkit-text-stroke: 0; text-stroke: 0; text-shadow: none; }