MediaWiki:Minerva.css: Difference between revisions

/* Reset user agent styles. We don't reset small or blockquote here deliberately */
cite,
dfn {
	font-style: inherit;
}

q {
	quotes: '"' '"' "'" "'";
}

/* Hide stuff meant for accounts with special permissions. Made visible again in
   [[MediaWiki:Group-sysop.css]] and so on for other groups. */
.checkuser-show,
.sysop-show,
.user-show, 
.templateeditor-show,
.extendedmover-show,
.patroller-show,
.extendedconfirmed-show,
.autoconfirmed-show {
	display: none;
}

/* Prevent flags in tables from collapsing
Fix for T116318
*/
.flagicon img {
	min-width: 23px;
}

/* Prevent unnecessary margin at the bottom of centralnotices */
.cnotice {
	margin-bottom: 0 !important;
}

/*
 * BELOW HERE THERE BE SOONTOBE TEMPLATESTYLES THINGS;
 * SEE [[MediaWiki talk:Common.css/to do]]
 */
.mw-parser-output .infobox-header,
.mw-parser-output .infobox-subheader,
.mw-parser-output .infobox-above,
.mw-parser-output .infobox-title,
.mw-parser-output .infobox-image,
.mw-parser-output .infobox-full-data,
.mw-parser-output .infobox-below {
	text-align: center;
}

/* Prevent line breaks in silly places:
   1) Where desired
   2) Links when we don't want them to
*/
.mw-parser-output .nowrap,
.nowraplinks a {
	white-space: nowrap;
}
.mw-parser-output .infobox .nowrap {
	white-space: normal !important;
}
/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
	white-space: normal;
}

/* Generic class texhtml class for inline math */
span.texhtml {
	font-family: serif;
	white-space: nowrap;
}

/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
	font-weight: normal;
	/* @noflip */
	text-align: left;
}

/********* General fixes for night mode - please sync any changes here with [[MediaWiki:Vector.css]] *********/

@media screen {
  html.skin-theme-clientpref-night .navbox a:not(.new):not(.mw-selflink):link,
  html.skin-theme-clientpref-night .infobox a:not(.new):not(.mw-selflink):link {
    color: var( --color-progressive ) !important;
  }
  /* T370074 */
  html.skin-theme-clientpref-night .mw-parser-output section > figure img,
  html.skin-theme-clientpref-night .mw-parser-output section > div > figure img,
  html.skin-theme-clientpref-night .mw-parser-output > figure img { 
      background: var( --background-color-disabled-fixed, #C8CCD1 );
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .navbox a:not(.new):not(.mw-selflink):link,
  html.skin-theme-clientpref-os .infobox a:not(.new):not(.mw-selflink):link {
    color: var( --color-progressive ) !important;
  }
  /* T370074 */
  html.skin-theme-clientpref-os .mw-parser-output section > figure img,
  html.skin-theme-clientpref-os .mw-parser-output section > div > figure img,
  html.skin-theme-clientpref-os .mw-parser-output > figure img { 
      background: var( --background-color-disabled-fixed, #C8CCD1 );
  }
}

body.skin--responsive.skin-minerva .mw-parser-output {
	.infobox {
		// Unfloat tables and infoboxes:;
		// A lot of templates introduce floating and horizontal margins inline styles
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		font-size: 90%;
		position: relative;
		border: @border-width-base @border-style-base @border-color-muted;
		margin-bottom: 2em;
		color: @color-base;
		background-color: @background-color-interactive-subtle;
		display: flex;
		flex: 1 1 100%;
		flex-flow: column nowrap;
		width: 100% !important;
		max-width: 100% !important;
		text-align: start;

		caption {
			padding: 10px 10px 0;
			text-align: center;
		}

		th,
		td {
			vertical-align: top;
			border: 0;
			border-bottom: @border-width-base @border-style-base @border-color-muted;
			padding: 7px 10px;
		}

		tbody > tr > td,
		tbody > tr > th {
			flex: 1 0;
		}

		td:only-child,
		th:only-child {
			width: 100%;
		}

		tr:last-child th,
		tr:last-child td {
			border: 0;
		}

		& > tbody,
		& > caption {
			display: flex;
			flex-flow: column nowrap;
		}

		& > tbody > tr {
			min-width: 100%;
			display: flex;
			flex-flow: row nowrap;
		}
	}
}

/* Tablet specific styling */
@media all and ( min-width: @min-width-breakpoint-tablet ) {
	body.skin-minerva.skin--responsive .mw-parser-output {
		// Float infoboxes to the right of the page
		.infobox {
			margin: 0.5em 0 1em 35px !important;
			// Note this is fixed to ensure that we leave enough space for the sections to the infoboxes left
			// FIXME [Templates]: Inline styles force us to use !important
			max-width: 320px !important;
			width: auto !important;
			float: right !important;
			clear: right !important;
		}
	}
}