MediaWiki:Common.css: Difference between revisions

/* CSS placed here will be applied to all skins */
/* Reset italic styling set by user agent */
cite,
dfn {
	font-style: inherit;
}

/* Straight quote marks for <q> */
q {
	quotes: '"' '"' "'" "'";
}

/* Avoid collision of blockquote with floating elements by swapping margin and padding */
blockquote {
	overflow: hidden;
	margin: 1em 0;
	padding: 0 40px;
}

/* Consistent size for <small>, <sub> and <sup> */
small {
	font-size: 85%;
}

.mw-body-content sub,
.mw-body-content sup {
	font-size: 80%;
}

/* Same spacing for indented and unindented paragraphs on talk pages */
.ns-talk .mw-body-content dd {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}

/* Reduce page jumps by hiding collapsed/dismissed content */
.client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child),

/* Avoid FOUC/reflows on collapsed elements. */
/* This copies MediaWiki's solution for T42812 to apply to innercollapse/outercollapse (T325115). */
/* TODO: Use :is() selector at some reasonable future when support is good for Most Clients */
/* Reference: https://gerrit.wikimedia.org/g/mediawiki/core/+/ecda06cb2aef55b77c4b4d7ecda492d634419ead/resources/src/jquery/jquery.makeCollapsible.styles.less#75 */
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > p,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > table,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) > thead + tbody,
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) tr:not( :first-child ),
.client-js .outercollapse .innercollapse.mw-collapsible:not( .mw-made-collapsible ) .mw-collapsible-content,

/* Lists in wikitable data cells are always left-aligned */
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
	/* @noflip */
	text-align: left;
}

/* Change the external link icon to a PDF icon for all PDF files */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
	background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
	/* @noflip */
	padding: 8px 18px 8px 0;
}


/* Minimum thumb width */
@media (min-width: 640px) {
	figure[typeof~='mw:File/Thumb'],
	figure[typeof~='mw:File/Frame'],
	.thumbinner {
		min-width: 100px;
	}
}


@media screen {
	/* Put a chequered background behind images, only visible if they have transparency,
	 * except on main, user, and portal namespaces
	 */
	body:not(.ns-0):not(.ns-2):not(.ns-100) .gallerybox .thumb img {
		background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat;
	}
}


/* 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;
}

/* Remove underlines from certain links */
.nounderlines a,
.IPA a:link,
.IPA a:visited {
	text-decoration: none !important;
}

/* Prevent line breaks in silly places where desired (nowrap)
   and links when we don't want them to (nowraplinks a) */
.nowrap,
.nowraplinks a {
	white-space: nowrap;
}

/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
	white-space: normal;
}

/* No idea where this on wikipedia is but this fixes infoboxes... */
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .hatnote:not(.notheme), html.skin-theme-clientpref-os .dablink:not(.notheme), html.skin-theme-clientpref-os .rellink:not(.notheme), html.skin-theme-clientpref-os .infobox:not(.notheme) {
    color: var(--color-base,#202122) !important;
  }
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox td:not(.notheme), html.skin-theme-clientpref-os .infobox th:not(.notheme), html.skin-theme-clientpref-os .infobox-above:not(.notheme), html.skin-theme-clientpref-os .infobox p:not(.notheme), html.skin-theme-clientpref-os .infobox > div:not(.notheme), html.skin-theme-clientpref-os .infobox caption:not(.notheme), html.skin-theme-clientpref-os .infobox--frwiki td:not(.notheme), html.skin-theme-clientpref-os .infobox--frwiki th:not(.notheme), html.skin-theme-clientpref-os .infobox--frwiki p:not(.notheme), html.skin-theme-clientpref-os .infobox--frwiki > div:not(.notheme), html.skin-theme-clientpref-os .infobox--frwiki caption:not(.notheme), html.skin-theme-clientpref-os .sinottico th:not(.notheme), html.skin-theme-clientpref-os .infobox-header:not(.notheme), html.skin-theme-clientpref-os .skin-nightmode-reset-color:not(.notheme), html.skin-theme-clientpref-os .navigation-box:not(.notheme), html.skin-theme-clientpref-os .metadata:not(.notheme), html.skin-theme-clientpref-os .quotebox:not(.notheme), html.skin-theme-clientpref-os .side-box:not(.notheme), html.skin-theme-clientpref-os .side-box div:not(.notheme), html.skin-theme-clientpref-os .navbox:not(.notheme), html.skin-theme-clientpref-os .navbox-subgroup:not(.notheme), html.skin-theme-clientpref-os .navbox-group:not(.notheme), html.skin-theme-clientpref-os .navbox-even:not(.notheme), html.skin-theme-clientpref-os .navbox-abovebelow:not(.notheme), html.skin-theme-clientpref-os .navbox-title:not(.notheme) {
    background: inherit !important;
    color: inherit !important;
    border-color: var(--border-color-subtle,#c8ccd1) !important;
  }
}