MediaWiki:Minerva.css

Revision as of 23:18, 26 April 2025 by NeonWabbit (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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;
		}
	}
}

/* Force navboxes to display on Minerva skin */
.navbox, .navbox-inner {
  display: block !important;
}

@media screen and (max-width: 720px) {
  .navbox, .vertical-navbox {
    max-width: 90vw !important;
    overflow-x: auto !important;
    margin: 1em auto;
    padding: 0.5em;
    border: 1px solid #aaa;
    box-sizing: border-box;
  }

  .navbox-group, .navbox-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5em;
    justify-content: center;
    padding: 0.5em;
  }

  .navbox-group > li,
  .navbox-list > li {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
  }
}

/* Force navbox layout to stack on mobile */
@media screen and (max-width: 720px) {
  .navbox td,
  .navbox th,
  .navbox tr,
  .navbox tbody,
  .navbox-subgroup {
    display: block;
  }

  .navbox-list ul {
    display: flex;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0.5em;
    gap: 0.5em;
  }

  .navbox-group-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background: #ccd2d8;
    padding: 0.2em 0.85em;
  }

  .navbox-title {
    text-align: center;
    padding: 0.25em 0.85em;
    background: #666;
    color: white;
    font-size: 1.4em;
  }

  .navbox-list li {
    display: inline-flex;
    align-items: center;
    margin: 0 0.5em;
  }

  /* Optional: hide navbox images for mobile */
  .navbox img {
    display: none;
  }
}