MediaWiki:Minerva.css: Difference between revisions

@import 'mediawiki.skin.variables.less';
@import 'mixins.less';

/* 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 [[phab: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 );
  }
}

/* [[phab:T201233]] */
@media ( max-width: 719px /* @max-width-breakpoint-tablet */) {
  span.mwe-math-element-block,
  dd .mwe-math-element-inline {
    overflow-x: scroll;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
  }
}

/**
 * Ambox classes are nested in a top-level class
 * This class is appended to the DOM via JS
 * THESE RULES ONLY APPLY TO MINERVA skin.
 **/
@ambox-padding: 8px;
@ambox-icon-padding: @ambox-padding * 4;
@line-height-content: 1.65;

body.skin-minerva .mw-parser-output .ambox,
/* Be more specific than .content table styles in Minerva */
body.skin-minerva .mw-parser-output table.ambox {
	display: block;
	margin: 0;
}

.client-js body.skin-minerva .mw-parser-output .ambox {
	cursor: pointer;
	width: auto;
	// !important needed to override core ambox styles
	background: @background-color-interactive-subtle !important;
	color: @color-subtle;
	margin-bottom: 1px;

	tbody {
		display: table;
		width: 100%;
	}

	// Assuming that most ambox templates wrap content in this element.
	// See https://en.wikipedia.org/w/index.php?title=Module:Message_box&action=raw (search for 'mbox-text-span').
	// https://phabricator.wikimedia.org/T206887 suggests .mbox-text-div is also needed.
	.mbox-text-div,
	.mbox-text-span {
		display: block;
		max-height: @line-height-content * 2em;
		// All will have this height (approx 2 lines) even if a single line e.g. {{dictdef}} when on mobile.
		// Overriden later in tablet styles.
		height: @line-height-content * 2em;
		overflow: hidden;
	}

	// Wrestle with inline styles that editors may place on elements inside the ambox
	div {
		// e.g. on mw-collapsible inside Multiple issues template
		margin: 0 !important;
		// e.g. on Template:Expand Russian
		padding: 0 !important;
	}

	td,
	div.mbox-text {
		position: relative;
		// Override !important above if this is a div
		padding: @ambox-padding @ambox-padding @ambox-padding @ambox-icon-padding !important;

		> div,
		> span {
			font-size: unit( ( 13 / 16 ), rem );
		}
	}

	// All text should be treated the same
	b {
		font-weight: inherit;
	}

	// Hide links in new treatment
	a {
		color: inherit !important;
		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ) !important;

		&:hover,
		&:focus {
			text-decoration: none;
			outline: inherit;
		}
	}

	small,
	.hide-when-compact,
	/* Template:Expand Russian */
	.mw-collapsible-content,
	/* Remove empty leftmost column when present (.mbox-empty-cell)
	 * and .verbose and any hr tags that might be present in the ambox
	 * See https://en.wikipedia.org/w/index.php?
	 *   title=Special:WhatLinksHere/Template:Proposed_deletion_notify
	 * (https://phabricator.wikimedia.org/T197265) */
	.mbox-empty-cell,
	hr,
	.verbose,
	/* Nested amboxes (multiple issues) */
	table,
	.mbox-image {
		display: none;
	}

	.minerva-ambox-icon {
		position: absolute;
		left: @ambox-padding;
		top: 11px;
	}

	.ambox-learn-more {
		color: @color-progressive;
		position: absolute;
		right: @ambox-padding;
		bottom: @ambox-padding;
		z-index: @z-index-base;
		line-height: @line-height-content; // sets height for fade & aligns "learn more" to ambox text.

		/* creates a fade under the "learn more" button to avoid overlapping text. */
		&::before {
			content: '';
			position: absolute;
			z-index: @z-index-bottom;
			bottom: 0;
			right: 0;
			width: 100%; // width & height defined by length of "learn more".
			height: 100%;
			box-sizing: content-box; // explicitly setting box-sizing so padding extends beyond 100%.
			padding-left: 4em;
			background: linear-gradient( to right, transparent 0, @background-color-interactive-subtle 3em );
		}
	}

	@media screen and ( min-width: @min-width-breakpoint-tablet ) {
		.mbox-text-div,
		.mbox-text-span {
			height: auto;
			margin-bottom: @ambox-padding * 3 !important; // important offsets `.ambox div { margin:0!important}` which offsets inline styles.
		}

		.ambox-learn-more {
			left: @ambox-icon-padding;
			right: 0;
			background: none;

			// Move blur to far right last line
			// https://phabricator.wikimedia.org/T197931#4475197
			&::before {
				top: unit( -@line-height-content, em );
				width: 10px;
			}
		}
	}
}

// FIXME: [T367519] This is temporarily restricted to .skin-minerva to provide a short term fix for T367462.
// The expectation is that this CSS will be revised to exclude the .skin-minerva class in future,
// or limited to the Minerva skin via a skinStyle.
body.skin--responsive.skin-minerva .mw-parser-output {
	.hatnote,
	.dablink,
	.rellink {
		padding: 5px 7px;
		color: @color-subtle;
		font-size: unit( ( 13 / 16 ), rem );
		background-color: @background-color-interactive-subtle;
		margin-bottom: 1px;
		overflow: hidden;

		a {
			color: @color-progressive;
		}
	}
}

// FIXME [T367519] This is temporarily restricted to .skin-minerva to provide a short term fix for T367462
// The expectation is that this CSS will be revised to exclude the .skin-minerva class in future,
// and/or appropriate bits limited to the Minerva skin via a skinStyle.
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;
		}
	}
}

/** This mixin should only be used where it's safe to do so. It should not be applied
to content which may have important information. */
.night-mode-strip-all-colors-when-safe() {
	background: inherit !important;
	color: inherit !important;
	/* If a border is defined retain it but make it black. If no border this won't do anything. */
	border-color: @border-color-subtle !important;
}

@media screen {
	.skin-theme-clientpref-night .page-Main_Page {
		.mw-parser-output :not( .notheme ):not( a ) {
			.night-mode-strip-all-colors-when-safe();
		}
	}
}

@media screen and ( prefers-color-scheme: dark ) {
	.skin-theme-clientpref-os .page-Main_Page {
		.mw-parser-output :not( .notheme ):not( a ) {
			.night-mode-strip-all-colors-when-safe();
		}
	}
}

@media screen {
	.skin-theme-clientpref-night .ns-100 {
		.mw-parser-output :not( .notheme ):not( a ) {
			.night-mode-strip-all-colors-when-safe();
		}
	}
}

@media screen and ( prefers-color-scheme: dark ) {
	.skin-theme-clientpref-os .ns-100 {
		.mw-parser-output :not( .notheme ):not( a ) {
			.night-mode-strip-all-colors-when-safe();
		}
	}
}

/* TODO: Check matches https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.base.styles/content/hacks.less#L188 onwards
before merging. */

/* T358385 */
[ bgcolor ] {
	// Important: this should correspond with the light mode theme version of color-base
	color: #333;
}

@selector-inline-style-color: ~'[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] )';

.mixin-links-in-styled-tables-readable() {
	/* Limited to article namespace. This should not be added to namespaces which reset colors e.g. Portal (100) */
	body.ns-0:not( .page-Main_Page  ) .mw-parser-output table:not( .infobox ):not( .navbox-inner ):not( .navbox ) {
		[bgcolor],
		&[style*="background"]:not([style*="transparent"]):not([style*="inherit"]),
		th@{selector-inline-style-color},
		td@{selector-inline-style-color},
		tr@{selector-inline-style-color} td {
			a:not( .mw-selflink ) {
				color: var( --color-base-fixed, #202122 );
				text-decoration: underline;
			}

			// For red links use a wavy underline, to distinguish them from standard links.
			a.new {
				text-decoration-style: wavy;
			}
		}
	}
}

@media screen {
	html.skin-theme-clientpref-night {
		// These colors become !important in night mode to avoid color contrast issues.
		.hatnote:not( .notheme ),
		.dablink:not( .notheme ),
		.rellink:not( .notheme ),
		.infobox:not( .notheme ) {
			color: @color-base !important;
			background-color: @background-color-interactive-subtle !important;
		}

		/* T357453 - attempt to strip colors from the majority of infoboxes in night mode (unless notheme specified) */
		// please forgive me for bypassing the linter there is no easy way to keep all of the infobox classes grouped without
		.infobox td,
		.infobox th,
		.infobox-above,
		/* T359644 */
		.infobox p,
		.infobox > div,
		.infobox caption,
		/* frwiki T359644 */
		.infobox--frwiki td,
		.infobox--frwiki th,
		.infobox--frwiki p,
		.infobox--frwiki > div,
		.infobox--frwiki caption,
		/* itwiki */
		.sinottico th,
		.infobox-header,
		/* T358164 General case that templates/extensions can opt into */
		.skin-nightmode-reset-color,
		.navigation-box,
		.metadata,
		/* T357735 */
		.quotebox,
		/* T357726 */
		.side-box,
		.side-box div,
		/* T358012 */
		.navbox,
		.navbox-subgroup,
		.navbox-group,
		.navbox-even,
		.navbox-abovebelow,
		.navbox-title {
			&:not( .notheme ) {
				.night-mode-strip-all-colors-when-safe();
			}
		}

		// T358797 - if a background color is specified, assume they wanted the day mode font color
		.mw-parser-output [ style*='background' ] {
			/* @color-base */
			color: #202122; // not !important so that if a color is also specified it will take priority
		}

		.mixin-links-in-styled-tables-readable();
	}
}

@media screen and ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os {
		/* T357453 */
		.infobox td,
		.infobox th,
		.infobox-above,
		/* T359644 */
		.infobox p,
		.infobox > div,
		.infobox caption,
		/* frwiki T359644 */
		.infobox--frwiki td,
		.infobox--frwiki th,
		.infobox--frwiki p,
		.infobox--frwiki > div,
		.infobox--frwiki caption,
		/* itwiki */
		.sinottico th,
		.infobox-header,
		/* T358164 General case that templates/extensions can opt into */
		.skin-nightmode-reset-color,
		.navigation-box,
		.metadata,
		/* T357735 */
		.quotebox,
		/* T357726 */
		.side-box,
		.side-box div,
		/* T358012 */
		.navbox,
		.navbox-subgroup,
		.navbox-group,
		.navbox-even,
		.navbox-abovebelow,
		.navbox-title {
			&:not( .notheme ) {
				.night-mode-strip-all-colors-when-safe();
			}
		}

		// These colors become !important in night mode to avoid color contrast issues.
		.hatnote:not( .notheme ),
		.dablink:not( .notheme ),
		.rellink:not( .notheme ),
		.infobox:not( .notheme ) {
			color: @color-base !important;
			background-color: @background-color-interactive-subtle !important;
		}

		// T358797 - if a background color is specified, assume they wanted the day mode font color
		.mw-parser-output [ style*='background' ] {
			/* @color-base */
			color: #202122; // not !important so that if a color is also specified it will take priority
		}

		.mixin-links-in-styled-tables-readable();
	}
}