MediaWiki:Common.css: Difference between revisions

/*
 * This is the CSS common to all desktop skins on en.Wikipedia.
 * Styling inside .mw-parser-output should generally use TemplateStyles.
 */
/* 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),
.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,
#editpage-specialchars {
	display: none;
}

/* Different margin on references */
.references {
	margin-bottom: 0.5em;
}

/* Cite customizations */
span[rel="mw:referencedBy"] {
	counter-reset: mw-ref-linkback 0;
}
span[rel='mw:referencedBy'] > a::before {
	content: counter(mw-ref-linkback, lower-alpha);
	font-size: 80%;
	font-weight: bold;
	font-style: italic;
}
a[rel="mw:referencedBy"]::before {
	font-weight: bold;
	content: "^";
}
span[rel="mw:referencedBy"]::before {
	content: "^ ";
}

/* jQuery makeCollapsible toggle */
.mw-parser-output .mw-collapsible-toggle:not(.mw-ui-button) {
	font-weight: normal;
	padding: 0 0.2em;
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
	float: left;
}

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

/* PDF icon override */
.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;
	padding: 8px 18px 8px 0;
}

/* System messages / warnings */
.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#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;
	box-sizing: border-box;
}
.mw-contributions-blocked-notice-partial
  .mw-warning-with-logexcerpt.mw-warning-with-logexcerpt {
	border-color: #fc3;
	background-color: var(--background-color-warning-subtle, #fef6e7);
}

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

/* Prevent float overlaps */
#mw-subcategories,
#mw-pages,
#mw-category-media,
#filehistory,
#wikiPreview,
#wikiDiff {
	clear: both;
}

/* Hide special-group content by default */
.checkuser-show,
.sysop-show,
.abusefilter-show,
.abusefilter-helper-show,
.patroller-show,
.templateeditor-show,
.extendedmover-show,
.extendedconfirmed-show,
.autoconfirmed-show,
.user-show {
	display: none;
}

/* Hide editnotice elements */
.ve-ui-mwNoticesPopupTool-item .editnotice-redlink,
.ve-ui-mwNoticesPopupTool-item .mbox-image,
.ve-ui-mwNoticesPopupTool-item .mbox-imageright {
	display: none !important;
}

/* Permissions-errors list */
ul.permissions-errors {
	margin: 0;
}
ul.permissions-errors > li {
	list-style: none;
}

/* Inline math */
span.mwe-math-mathml-inline {
	font-size: 118%;
}
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
	margin: 0.6em 0 0.6em 1.6em !important;
}
.mwe-math-mathml-display math {
	display: inline;
}

/* Checkerboard for transparent PNGs */
@media screen {
	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;
	}
	#siteSub {
		display: block;
	}
	.references {
		font-size: 90%;
	}
}

/* Hide some portlets / special cases */
.flaggedrevs_draft_synced,
.flaggedrevs_stable_synced,
#t-upload,
.mw-special-Book #coll-downloadbox {
	display: none;
}

/* =========================================================================
   TEMPLATESTYLES + INFOBOX
   ————————————————————————————————————————————————————————————————
   Your infobox rules, light mode first, then dark overrides.
   ======================================================================= */

/* ——— Infobox (light mode) ——— */
.infobox {
	border: 1px solid #a2a9b1;
	color: #202122;
	background-color: #f8f9fa;
	padding: 0.2em;
	font-size: 88%;
	line-height: 1.5em;
	border-spacing: 3px;
}
@media (min-width: 640px) {
	.infobox {
		margin: 0.5em 0 0.5em 1em;
		float: right;
		clear: right;
		width: 22em;
	}
}
@media (max-width: 640px) {
	.infobox {
		width: 100%;
	}
	.infobox .nowrap {
		white-space: normal;
	}
}

/* Common infobox parts */
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
	text-align: center;
}
.infobox .infobox-label,
.infobox .infobox-data,
.infobox th,
.infobox td {
	vertical-align: top;
	text-align: left;
}

/* —— Deep-blue headers on every infobox —— */
.infobox .infobox-header {
	background: #003B6F;
	color: #ffffff;
}

/* make the infobox title bolder and a bit bigger */
table.infobox > .infobox-title {
  font-size: 1.25em !important;
  font-weight: 700   !important;
}

/* Serverbuild-specific (optional) */
table.infobox.serverbuild .infobox-header {
	/* adjust here if you like */
}

/* ——— Dark-mode overrides ——— */
@media screen {
	/* box background + all text light */
	html.skin-theme-clientpref-night .infobox,
	html.skin-theme-clientpref-os    .infobox {
		background-color: var(--surface-secondary) !important;
		color: var(--text-primary)      !important;
	}

	/* but keep your headers deep blue with white text */
	html.skin-theme-clientpref-night .infobox .infobox-header,
	html.skin-theme-clientpref-os    .infobox .infobox-header {
		background: #003B6F !important;
		color:      #ffffff  !important;
	}
}

/* Button styling for RP infobox (works in light/dark) */
.bwmc-btn a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none !important;
  background: #4a90e2;
  color: #fff !important;
  border: 1px solid #407fca;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
/* Remove any external-link icon and keep hover clean */
.bwmc-btn a.external {
  background-image: none !important;
  padding-right: 14px; /* so removing the icon doesn't shrink the pill */
}
.bwmc-btn a:hover {
  filter: brightness(1.05);
  text-decoration: none !important;
}