MediaWiki:Common.css: Difference between revisions

Revision as of 02:16, 15 January 2026

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


/*
 * This is the CSS for all skins (for both mobile and desktop) on mediawiki.org.
 * Styling inside .mw-parser-output should generally use TemplateStyles.
 */

/* Force lining numbers in headers (for fonts like Georgia) */
h1,
h2,
.firstHeading {
    font-variant-numeric: lining-nums;
}

/* Consistent size for sub/sup */
.mw-body sub,
.mw-body sup {
    font-size: 80%;
}

/* Public Domain background in the Help namespace */
.action-view.ns-12 #bodyContent {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/6/67/PD-icon-faded.png);
	background-repeat: no-repeat;
	/* @noflip */
	background-position: right 5em;
}

/*
 * Hide elements on the main page. 
 */
.page-MediaWiki #lastmod,
.page-MediaWiki #siteSub,
.page-MediaWiki #contentSub,
.page-MediaWiki .subtitle,
.page-MediaWiki #jump-to-nav,
/* can be removed when Template:Main_page translations are updated. */ 
.page-MediaWiki #firstHeading,
[lang="en"] .page-MediaWiki .mw-parser-output h2 {
	display: none; 
}

[lang="en"] .page-MediaWiki #firstHeading {
  font-size: 1.5em;
  display: block;
}

/* Give a bit of space to the TOC */
#toc {
	margin: 1em 0;
}

/* Fonts for Persian language for consistency with other Wikimedia wikis */
:lang(fa) {
	font-family: '.Arabic UI Text', Tahoma, 'Iranian Sans', 'Noto Sans Arabic', 'DejaVu Sans', sans-serif;
}

/* Div based "warning" style fmbox messages. */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
	clear: both;
	margin: 0.2em 0;
	border: 1px solid var( --border-color-error, #9f3526 );
	background-color: var( --background-color-error-subtle, #ffdbdb );
	color: var( --color-base, #202122 );
	padding: 0.25em 0.9em;
	box-sizing: border-box;
}

/* Hide confusing "Discussion" tab on [[Project:Support_desk]].
 * For sanity, only do this if [[Project_talk:Support_desk]] is a
 * redirect (which goes back to [[Project:Support_desk]]).
 * If that is changed for some reason, it automatically comes back.
 */
.page-Project_Support_desk #ca-talk a.mw-redirect {
	display: none;
}


/* Newly added on 15 Jan 2026 */
/* Infoboxes */
.infobox {
	border: 1px solid #a2a9b1;
	color: black;
	padding: 0.2em;
	font-size: 88%;
	line-height: 1.5em;
	border-spacing: 3px;
	margin: 0.5em 0;
}

@media screen {
	.infobox {
		background-color: var(--background-color-neutral-subtle, #f8f9fa);
    }
}

@media (max-width: 640px) {
	.infobox {
		width: 100%;
	}
    
	.infobox .nowrap {
		white-space: normal;
	}
}

@media (min-width: 640px) {
	.infobox {
		/* @noflip */
		margin-left: 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;
}