MediaWiki:Common.css: Difference between revisions

Revision as of 03:10, 27 July 2026

/*

Common CSS for all skins

See https://design.wikimedia.org/style-guide/visual-style_colors.html

*/

/* Larger conditions-area in AbuseFilter for some */
#wpFilterRules {
	min-height: 250px;
}

/* Larger notes-area in AbuseFilter for some */
#wpFilterNotes {
	min-height: 150px;
}

/* Style for "notices" */
.notice {
	margin: 1em;
	padding: 0.2em;
}

#disambig {
	border-top: 3px double var(--border-color-subtle, #c8ccd1);
	border-bottom: 3px double var(--border-color-subtle, #c8ccd1);
}

/* Add arrows to toggle-blocks for collapsible elements */
.mw-collapsible-toggle-expanded.mw-collapsible-arrowtoggle,
.mw-collapsible-toggle-expanded .mw-collapsible-arrowtoggle {
	padding-left: 20px !important;
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/10/MediaWiki_Vector_skin_action_arrow.png');
	background-repeat: no-repeat;
	background-position: left center;
}

.mw-collapsible-toggle-collapsed.mw-collapsible-arrowtoggle,
.mw-collapsible-toggle-collapsed .mw-collapsible-arrowtoggle {
	padding-left: 20px !important;
	background-repeat: no-repeat;
}

.mw-content-ltr .mw-collapsible-toggle-collapsed.mw-collapsible-arrowtoggle,
.mw-content-ltr .mw-collapsible-toggle-collapsed .mw-collapsible-arrowtoggle {
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/41/MediaWiki_Vector_skin_right_arrow.png');
	/* @noflip */
	background-position: left center;
}

.mw-content-rtl .mw-collapsible-toggle-collapsed.mw-collapsible-arrowtoggle,
.mw-content-rtl .mw-collapsible-toggle-collapsed .mw-collapsible-arrowtoggle {
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/MediaWiki_Vector_skin_left_arrow.png');
	/* @noflip */
	background-position: right center;
}

/* Metadata */
table.metadata {
	border: 1px solid var(--border-color-base, #a2a9b1);
	display: none;
	speak: none;
}

/* Class for links with loudspeaker icon next to them */
.audiolink a {
	background: url("//upload.wikimedia.org/wikipedia/commons/f/f7/Loudspeaker.png") center left no-repeat !important;
	padding-left: 16px !important;
	padding-right: 0 !important;
}

/* When this would make a red link, hide it. For links where #ifexist cannot be used due to high number of requests. See [[meta:Help:Page_existence]]
*/
.hidden-redlink a.new {
	display: none;
	speak: none;
}

.client-nojs .scriptonly {
	display: none;
}

.client-js .noscript {
	display: none;
}

/* Infobox templates */
.infobox {
	border: 1px solid var(--border-color-base, #a2a9b1);
	background-color: var(--background-color-neutral-subtle, #f8f9fa);
	margin-bottom: 0.5em;
	/* @noflip */
	margin-left: 1em;
	padding: 0.2em;
	/* @noflip */
	float: right;
	/* @noflip */
	clear: right;
}

.infobox td,
.infobox th {
	vertical-align: middle;
}

.infobox caption {
	font-size: larger;
	margin-left: inherit;
}

.infobox.bordered {
	border-collapse: collapse;
}

.infobox.bordered td,
.infobox.bordered th {
	border: 1px solid var(--border-color-base, #a2a9b1);
}

.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
	border: 0 solid var(--border-color-base, #a2a9b1);
}

.infobox.sisterproject {
	width: 20em;
	font-size: 90%;
}

/**
 * Customisation of the interface
 */

/* Add a checker background to custom image rendering templates. */
/* For standard thumbnails, galleries, file history, file description preview this happens by default. */
.com-checker img:hover {
	background: url("//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png") repeat;
}

/* Moved upload link from toolbox into the MediaWiki:Sidebar thus suppressing the old duplicate */
#p-tb #t-upload {
	display: none;
}

/* Make sure the license dropdown of the upload form doesn't extend beyond the browser's
 window, even if there are some long license descriptions. (If that happens, the description
 box *also* goes beyond the right edge of the window.)
*/
#wpLicense {
	width: 100%;
	overflow: hidden;
}

/* Give the upload form a little breathing space. */
#upload * td {
	padding-bottom: 8px;
}

#mw-upload-table * td {
	padding-bottom: 8px;
}

/* Styling for Abuse Filter tags */
.mw-tag-markers {
	font-style: italic;
	font-size: 90%;
}

/* Something nice for lists in RTL languages */
div.RTL * ul {
	margin-right: 10px;
	display: table;
}

div.RTL * ol {
	margin-right: 10px;
	display: table;
}

/* Special:Search styles */

.mw-search-results li {
	padding: 0.25em 1em;
	border-bottom: 1px solid var(--border-color-subtle, #d3daed);
}

.mw-search-results li:nth-child(odd) {
	background-color: var(--background-color-interactive-subtle, #f6f8fc);
}

/* https://phabricator.wikimedia.org/T320459#8310207 */
/* https://phabricator.wikimedia.org/T367122 */
.searchResultImage .searchResultImage-thumbnail img {
	object-fit: contain;
	object-position: center;
	border: none;
}

.searchResultImage .searchResultImage-thumbnail {
	width: 120px;
	height: initial;
	max-height: 180px;
}

/* Main pages */


/* Hide title and "Nominate for deletion" button when viewing the main page (but not when editing it or viewing the talk page).
 * The "mw-mainpage" class is for all localised main pages in [[MediaWiki:MainPages.js]].
 */

/* Optimise for "Main Page" because the scripts don't apply until after page load so it flashes briefly.
 * Support IE6: ".page" must go after ".action" as IE6 only supports one class per element and uses the last one. If reversed, the rule will hide headings on all pages.
 */
.action-view.page-Main_Page #firstHeading,
.mw-mainpage #firstHeading,
.mw-mainpage #t-ajaxquickdelete,
.mw-mainpage #localNotice,
.mw-mainpage #siteSub,
.mw-mainpage #catlinks {
	display: none;
}

#mainpage-potd a img {
	width: 100% !important;
	-ms-interpolation-mode: bicubic;
	height: auto !important;
	max-width: 600px !important;
}

.utoc .tocnumber {
	display: none;
}

.utoc #toc ul,
.utoc .toc ul {
	line-height: 1.5em;
	list-style-type: square;
	margin: .3em 0 0 1.5em;
	padding: 0;
}

/* Necessary for displaying text in the upper right edge. (Used in [[Template:Shortcut]].) */
#content span.coordinates a.external.text:after,
#content span.coordinates a.external.autonumber:after {
	content: "";
}

#content div.coordinates a.external.text:after,
#content div.coordinates a.external.autonumber:after {
	content: "";
}

#shortcut {
	display: none;
}

/**
 * Style for horizontal lists (separator following item).
 * @source mediawiki.org/wiki/Snippets/Horizontal_lists
 * @revision 6 (2014-05-09)
 * @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	margin: 0;
	display: inline;
}

/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
	display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li {
	display: none;
}

/* Generate interpuncts */
.hlist dt:after {
	content: ": ";
}

.hlist dd:after,
.hlist li:after {
	content: " · ";
	font-weight: bold;
}

.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
	content: none;
}

/* Add parentheses around nested lists */
.hlist dd dd:first-child:before,
.hlist dd dt:first-child:before,
.hlist dd li:first-child:before,
.hlist dt dd:first-child:before,
.hlist dt dt:first-child:before,
.hlist dt li:first-child:before,
.hlist li dd:first-child:before,
.hlist li dt:first-child:before,
.hlist li li:first-child:before {
	content: " (";
	font-weight: normal;
}

.hlist dd dd:last-child:after,
.hlist dd dt:last-child:after,
.hlist dd li:last-child:after,
.hlist dt dd:last-child:after,
.hlist dt dt:last-child:after,
.hlist dt li:last-child:after,
.hlist li dd:last-child:after,
.hlist li dt:last-child:after,
.hlist li li:last-child:after {
	content: ") ";
	font-weight: normal;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
	counter-reset: listitem;
}

.hlist ol>li {
	counter-increment: listitem;
}

.hlist ol>li:before {
	content: " " counter(listitem) " ";
	white-space: nowrap;
}

.hlist dd ol>li:first-child:before,
.hlist dt ol>li:first-child:before,
.hlist li ol>li:first-child:before {
	content: " (" counter(listitem) " ";
}

/* END of HLISTs */

/* Unbulleted lists */
.plainlist ul {
	line-height: inherit;
	list-style: none none;
	margin: 0;
}

.plainlist ul li {
	margin-bottom: 0;
}

/* Default style for navigation boxes */
.navbox {
	/* Navbox container style */
	border: 1px solid var(--border-color-base, #a2a9b1);
	width: 100%;
	box-sizing: border-box;
	margin: auto;
	clear: both;
	font-size: 88%;
	text-align: center;
	padding: 1px;
}

.navbox-inner,
.navbox-subgroup {
	width: 100%;
}

.navbox-group,
.navbox-title,
.navbox-abovebelow {
	padding: 0.25em 1em;
	/* Title, group and above/below styles */
	line-height: 1.5em;
	text-align: center;
}

th.navbox-group {
	/* Group style */
	white-space: nowrap;
	/* @noflip */
	text-align: right;
}

.navbox,
.navbox-subgroup {
	background: #fdfdfd;
	/* Background color */
}

.navbox-list {
	line-height: 1.8em;
	border-color: #fdfdfd;
	/* Must match background color */
}

.navbox th,
.navbox-title {
	background: #ccccff;
	/* Level 1 color */
}

.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
	background: #ddddff;
	/* Level 2 color */
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
	background: #e6e6ff;
	/* Level 3 color */
}

.navbox-even {
	background: #f7f7f7;
	/* Even row striping */
}

.navbox-odd {
	background: transparent;
	/* Odd row striping */
}

table.navbox+table.navbox {
	/* Single pixel border between adjacent navboxes */
	margin-top: -1px;
}

.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
	padding: 0.125em 0;
	/* Adjust hlist padding in navboxes */
}

ol+table.navbox,
ul+table.navbox {
	margin-top: 0.5em;
	/* Prevent lists from clinging to navboxes */
}

/* Default styling for Navbar template */
.navbar {
	display: inline;
	font-size: 88%;
	font-weight: normal;
}

.navbar ul {
	display: inline;
	white-space: nowrap;
}

.navbar li {
	word-spacing: -0.125em;
}

.navbar.mini li span {
	font-variant: small-caps;
}

/* Navbar styling when nested in infobox and navbox */
.infobox .navbar {
	font-size: 100%;
}

.navbox .navbar {
	display: block;
	font-size: 100%;
}

.navbox-title .navbar {
	/* intentionally is flipped */
	float: left;
	/* intentionally is flipped */
	text-align: left;
	/* intentionally is flipped */
	margin-right: 0.5em;
	width: 6em;
}

/* Put on gallery_details the same styles as on gallery */
table.gallery_details {
	border: 1px solid var(--border-color-subtle, #c8ccd1);
	margin: 2px;
	padding: 2px;
	background-color: var(--background-color-base, #fff);
}

table.gallery_details tr {
	vertical-align: top;
}

table.gallery_details td {
	vertical-align: top;
	background-color: var(--background-color-neutral-subtle, #f8f9fa);
	border: 2px solid var(--border-color-inverted, #fff);
}

/* Small font-size for hidden categories,
 per [[Commons:Village_pump/Archive/2010Mar#Hidden_categories:_change_the_default_setting_for_logged-in_users]]
*/
#mw-hidden-catlinks {
	font-size: 87% !important;
}

/* Geographical coordinates defaults. See [[Template:Coord/link]]
 for how these are used. The classes "geo", "longitude", and
 "latitude" are used by the [[Geo microformat]].
 */
.geo-default,
.geo-dms,
.geo-dec {
	display: inline;
}

.geo-nondefault,
.geo-multi-punct {
	display: none;
}

.longitude,
.latitude {
	white-space: nowrap;
}

/* Fix link color in jQuery dialogs */
.ui-dialog a {
	color: var(--color-progressive, #36c) !important;
}

/* Class for template content that should be shown locally, even if JS is disabled,
 but should not be visible on file pages shown on other sites.
 Use with style="display:none". Interacts with collapsible divs (see above).
*/
div.show-on-commons {
	display: block !important;
}


/* Note that image has annotations at Commons; visible only on other projects.
 See https://commons.wikimedia.org/w/index.php?title=Template_talk:ImageNote&oldid=55319045
*/
.annotationboxforwikipedia,
.hide-on-commons {
	display: none;
}

/* Allow limiting of which header levels are shown in a TOC;
 <div class="toclimit-3">, for instance, will limit to
 showing ==headings== and ===headings=== but no further
 (as long as there are no =headings= on the page, which
 there shouldn't be according to the MoS).
 */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none
}

/* Redirects in categories, on [[Special:Allpages]], and [[Special:Prefixindex]] */
.redirect-in-category,
.allpagesredirect a {
	color: gray;
}

/* Hide deletion-instructions headers inside closed deletion requests (redundant) */
.delh .massdeletionrequest-header {
	display: none;
}

/* Message box templates */
.messagebox {
	border: 1px solid var(--border-color-base, #a2a9b1);
	background: var(--background-color-interactive-subtle, #f8f9fa);
	width: 80%;
	margin: 0 auto 1em;
	padding: 0.2em;
}

.messagebox.merge {
	border: 1px solid #cf9fff;
	background: #f5edf5;
	text-align: center;
}

.messagebox.cleanup {
	border: 1px solid #9f9fff;
	background: #efefff;
	text-align: center;
}

.messagebox.standard-talk {
	border: 1px solid #c0c090;
	background: #f8eaba;
}

/**
 * TO BE PORTED TO TEMPLATESTYLES
 * Used by:
 * - [[Module:Message box]] (via [[Template:Mbox]], [[Template:Tmbox]], [[Template:Cmbox]])
 * - [[Template:Dmbox]]
 * - [[Template:Fmbox]]
 */
th.mbox-text,
td.mbox-text {
	/* The message body cell(s) */
	border: none;
	padding: 0.25em 0.9em;
	/* 0.9em left/right */
	width: 100%;
	/* Make all mboxes the same width regardless of text length */
}

td.mbox-image {
	/* The left image cell */
	border: none;
	padding: 2px 0 2px 0.9em;
	/* 0.9em left, 0px right */
	text-align: center;
}

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

/* Div based "system" style fmbox messages.
   Used in [[MediaWiki:Readonly lag]]. */
div.mw-lag-warn-normal,
div.fmbox-system {
	clear: both;
	margin: 0.2em 0;
	border: 1px solid var(--border-color-base, #a2a9b1);
	background-color: var(--background-color-neutral-subtle, #f8f9fa);
	padding: 0.25em 0.9em;
}

/* These mbox-small classes must be placed after all other
   ambox/tmbox/ombox etc classes. "body.mediawiki" is so
   they override "table.ambox + table.ambox" above. */
body.mediawiki table.mbox-small {
	/* For the "small=yes" option. */
	clear: right;
	float: right;
	margin: 4px 0 4px 1em;
	width: 238px;
	font-size: 88%;
	line-height: 1.25em;
}

body.mediawiki table.mbox-small-left {
	/* For the "small=left" option. */
	margin: 4px 1em 4px 0;
	width: 238px;
	border-collapse: collapse;
	font-size: 88%;
	line-height: 1.25em;
}

#catlinks li {
	padding: 0 .3em;
	margin: 0;
}

#catlinks li:first-child {
	padding-left: 0;
}

/* Styling the parameter fields in [[Template:Information]] and related templates
   also here (besides on [[MediaWiki:Filepage.css]]) to ensure proper preview
   on other pages than those in the file namespace */
.fileinfo-paramfield {
	background: #ccf;
	/* @noflip */
	text-align: right;
	/* @noflip */
	padding-right: 0.4em;
	width: 15%;
	font-weight: bold;
}

/********* General fixes for night mode *********/
html.skin-theme-clientpref-night .fileinfo-paramfield {
	background: #2a2a5c;
	color: white;
}

html.skin-theme-clientpref-night .fileinfotpl-type-artwork tbody>tr>th[style*="#ccf"] {
	background-color: #2a2a5c !important;
	;
	color: white;
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .fileinfo-paramfield {
		background: #2a2a5c;
		color: white;
	}

	html.skin-theme-clientpref-os .fileinfotpl-type-artwork tbody>tr>th[style*="#ccf"] {
		background-color: #2a2a5c !important;
		;
		color: white;
	}
}

/* == END copy of [[Module:Information/styles.css]] == */

/* Allow users to edit the orange on the main page in their personal CSS files */
.bg-orange {
	background: #fad67d;
}

/* Partially support HTML5 bdi tag on old browsers that don't support
   it and reassign its default value on modern browsers,
   needed for better i18n even on old browsers
   isolation on signature-talk will resolve mix of RTL/LTR on RTL UI*/
bdi,
.signature-talk {
	unicode-bidi: embed;
	/* fallback, it is not completely same but will work on most cases */
	unicode-bidi: -webkit-isolate;
	unicode-bidi: -moz-isolate;
	unicode-bidi: isolate;
}

/* Turn off some irrelevant MediaWiki help page links */
.mw-special-Upload #mw-indicator-mw-helplink {
	display: none;
}

/* Same as .mw-references-columns (Cite extension)
 * replacement for hardcoded [[Template:Column-width]]
 */
.responsive-columns {
	column-width: 35em;
}

/* Allow custom list styles in reference sections */
.reflist ol.references {
	list-style-type: inherit;
}

/* T156351: Support for Parsoid's Cite implementation */
span[rel="mw:referencedBy"] {
	counter-reset: mw-ref-linkback 0;
}

span[rel="mw:referencedBy"]>a::before {
	font-weight: bold;
	font-style: italic;
	content: counter(mw-ref-linkback, lower-alpha);
}







/* Increase height of upload description field at Special:Upload
 * Applies only when uploading a new file, not for the one-line input box when overwriting.
 */
textarea#wpUploadDescription {
	height: 20em;
}

/* Workaround for T330527, T270741 */
.filehistory td:last-child,
.listfiles .TablePager_col_img_description {
	word-break: break-word;
	min-width: auto;
}

/* T367463: Fix for license templates with two images like [[Template:Money-BR]] */
body.skin--responsive table.layouttemplate img {
	max-width: none !important;
}

/* Remove bullets when there are multiple page errors */
ul.permissions-errors { margin: 0; }
ul.permissions-errors > li { list-style:none }