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),

/* Avoid FOUC/reflows on collapsed elements. */
.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,

/* Hide charinsert base for those not using the gadget */
#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: "^ ";
}

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

.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
	float: left;
}

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

/* PDF link 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 styled similarly to fmbox */
.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;
}

/* Partial block notice */
.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 floating boxes from overlapping category listings, file histories, etc. */
#mw-subcategories,
#mw-pages,
#mw-category-media,
#filehistory,
#wikiPreview,
#wikiDiff {
	clear: both;
}

/* Hide stuff meant for accounts with special permissions. */
.checkuser-show,
.sysop-show,
.abusefilter-show,
.abusefilter-helper-show,
.patroller-show,
.templateeditor-show,
.extendedmover-show,
.extendedconfirmed-show,
.autoconfirmed-show,
.user-show {
	display: none;
}

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

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

/* Math styles */
span.mwe-math-mathml-inline {
	font-size: 118%;
}
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
	margin-left: 1.6em !important;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
}
.mwe-math-mathml-display math {
	display: inline;
}

/* Gallery checkerboard (non-main/user/portal ns) */
@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 flagged revisions notice if none pending, plus some special-case hides */
.flaggedrevs_draft_synced,
.flaggedrevs_stable_synced,
#t-upload,
.mw-special-Book #coll-downloadbox {
	display: none;
}

/*
 * BELOW HERE THERE BE TEMPLATESTYLES THINGS;
 * SEE [[MediaWiki talk:Common.css/to do]]
 */

/* ——— Your other TemplateStyles components come here ——— */

/*
 * Put anything you mean to be a sitewide addition above the TemplateStyles
 * comment above.
 */

/* ===========================================================
   Consolidated Infobox styles (light + dark + serverbuild)
   =========================================================== */

/* Light-mode infobox (default) */
.infobox {
  border:            1px solid #a2a9b1;
  color:             #202122;
  background-color:  #f8f9fa;
  padding:           0.2em;
  font-size:         88%;
  line-height:       1.5em;
  border-spacing:    3px;
}

/* Float & width */
@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 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;
}

/* “Serverbuild” child infobox header color */
table.infobox.serverbuild .infobox-header {
  background: #003B6F;
  color:      #ffffff;
}

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

  /* Force _all_ nested infobox text to light color */
  html.skin-theme-clientpref-night .infobox *,
  html.skin-theme-clientpref-os      .infobox * {
    color: var(--text-primary) !important;
  }

  /* Keep your deep-blue serverbuild header */
  html.skin-theme-clientpref-night table.infobox.serverbuild .infobox-header,
  html.skin-theme-clientpref-os      table.infobox.serverbuild .infobox-header {
    background-color: #003B6F !important;
    color:            #ffffff  !important;
  }

  /* Brighten the caption/title if needed */
  html.skin-theme-clientpref-night table.infobox caption.infobox-title,
  html.skin-theme-clientpref-os      table.infobox caption.infobox-title,
  html.skin-theme-clientpref-night table.infobox .infobox-title,
  html.skin-theme-clientpref-os      table.infobox .infobox-title {
    color: #f8f9fa !important;
  }
}