MediaWiki:Common.css: Difference between revisions

Latest revision as of 00:49, 2 November 2025

/* CSS placed here will be applied to all skins */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

.mw-body h1, .mw-body .mw-heading1, .mw-body-content h1, .mw-body-content .mw-heading1, .mw-body-content h2, .mw-body-content .mw-heading2 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}

html, body {
  font-family: 'IBM Plex Sans', sans-serif;
}

.ve-ui-overlay {
  font-family: 'IBM Plex Sans', sans-serif;
}

@media screen {
    html.skin-theme-clientpref-night {
        --color-progressive: #66d6d7;
        --background-color-base: #0c0219;
        --background-color-neutral-subtle: #21192a;
        --background-color-progressive: #199798;
    }
}

@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os {
        --color-progressive: #66d6d7;
        --background-color-base: #0c0219;
        --background-color-neutral-subtle: #21192a;
        --background-color-progressive: #199798;
    }
}

@@ Line 13: / Line 13: @@
 }
-/* import infobox styles from enwiki for testing */
+.ve-ui-overlay {
+  font-family: 'IBM Plex Sans', sans-serif;
-/*
- * BELOW HERE THERE BE SOONTOBE TEMPLATESTYLES THINGS;
- * SEE [[MediaWiki talk:Common.css/to do]]
- * CSS is separated by component (which is why media queries are not joined)
- */
-/* Infoboxes */
-.infobox {
-	border: 1px solid #a2a9b1;
-	color: black;
-	padding: 0.2em;
-	font-size: 88%;
-	line-height: 1.5em;
-	border-spacing: 3px;
 }
 @media screen {
-	.infobox {
+    html.skin-theme-clientpref-night {
-		background-color: #f8f9fa;
+        --color-progressive: #66d6d7;
+        --background-color-base: #0c0219;
+        --background-color-neutral-subtle: #21192a;
+        --background-color-progressive: #199798;
      }
 }
-@media (max-width: 640px) {
+@media screen and (prefers-color-scheme: dark) {
-	.infobox {
+     html.skin-theme-clientpref-os {
-		width: 100%;
+        --color-progressive: #66d6d7;
-	}
+        --background-color-base: #0c0219;
+        --background-color-neutral-subtle: #21192a;
-	.infobox .nowrap {
+        --background-color-progressive: #199798;
-		white-space: normal;
+    }
-	}
-}
-@media (min-width: 640px) {
-	.infobox {
-		/* @noflip */
-		margin: 0.5em 0 0.5em 1em;
-		/* @noflip */
-		float: right;
-		/* @noflip */
-		clear: right;
-		width: 22em;
-	}
-}
-.infobox-header,
-.infobox-label,
-.infobox-above,
-.infobox-full-data,
-.infobox-data,
-.infobox-below,
-.infobox-subheader,
-.infobox-image,
-.infobox-navbar,
-/* Remove element selector when every .infobox thing is using the standard module/templates  */
-.infobox th,
-.infobox td {
-	vertical-align: top;
-}
-.infobox-label,
-.infobox-data,
-/* Remove element selector when every .infobox thing is using the standard module/templates  */
-.infobox th,
-.infobox td {
-	/* @noflip */
-	text-align: left;
-}
-/* Remove .infobox when element selectors above are removed */
-.infobox .infobox-above,
-.infobox .infobox-title,
-/* Remove element selector when every .infobox thing is using the standard module/templates  */
-.infobox caption {
-	font-size: 125%;
-	font-weight: bold;
-	text-align: center;
-}
-.infobox-title,
-/* Remove element selector when every .infobox thing is using the standard module/templates  */
-.infobox caption {
-	padding: 0.2em;
-}
-/* Remove .infobox when element selectors above are removed */
-.infobox .infobox-header,
-.infobox .infobox-subheader,
-.infobox .infobox-image,
-.infobox .infobox-full-data,
-.infobox .infobox-below {
-	text-align: center;
-}
-/* Remove .infobox when element selectors above are removed */
-.infobox .infobox-navbar {
-	/* @noflip */
-	text-align: right;
 }