MediaWiki:Mobile.css

/**
You are editing the global css file for all mobile site users.
With Great Power Comes Great Responsibility.

Some words of caution:
* Avoid any changes which impact layout on a mobile device.
** Please be careful not to introduce any margin / padding rules. These should be done inside the template itself via an inline style.
** Be especially cautious when a template is likely to be used within the top 480px of the screen (the content that the user will see first on a mobile device).
* Do not use display:none. Instead edit the template and markup the element you want to hide with the `nomobile` class.
* Try to keep rules as generic and minimal as possible. Do not have 2 selectors doing the same thing. Introduce a common class and use that instead.
* For big changes consult the [https://grafana.wikimedia.org/dashboard/db/mobile-2g grafana dashboard] to ensure you don't introduce any performance regressions.
* Group common css rules together where possible.

If you are looking for .mobile-float-reset (see [[:phab:T56176]]), use TemplateStyles instead.
.mobile-float-reset {    
	float: none !important;    
	width: 100% !important;    
}  
*/

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

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

/* Hide the images */
.geo-nondefault, .geo-multi-punct,
/* Hide stuff meant for accounts with special permissions. Made visible again in
   [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-patroller.css]] and
   [[MediaWiki:Group-autoconfirmed.css]]. */
.checkuser-show,
.sysop-show,
.templateeditor-show,
.extendedmover-show,
.patroller-show,
.extendedconfirmed-show,
.autoconfirmed-show,
/* Copied from Common.css - allow for hiding text in compact form e.g. clean up templates */
.hide-when-compact,
/* portal pages are badly formatted. Until this changes these should be hidden. (see https://phabricator.wikimedia.org/T86495) */
.noprint.portal {
	display: none;
}

/*
.infobox
DO NOT style infobox's here. That should be taken care of in the associated templates via template styles. Styles here will lead to flash of unstyled content on mobile.
*/
/* removed inline from module as we work toward Tstyles support
 * Use three classes to match specificity of MobileFrontend/Minerva selectors */
.content .mw-parser-output .infobox-header,
.content .mw-parser-output .infobox-subheader,
.content .mw-parser-output .infobox-above,
.content .mw-parser-output .infobox-title,
.content .mw-parser-output .infobox-image,
.content .mw-parser-output .infobox-full-data,
.content .mw-parser-output .infobox-below {
	text-align: center;
}

/* Unbulleted lists e.g. Barack Obama page*/
.plainlist ul {
	list-style: none;
	padding-left: 0; /* Reset Minerva defaults */
}

/* 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;
}

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

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


/* The message body cell(s), such as for {{Commonscat}}.
 * this is a very small subset of the styles from Common.css
 * just to make sure the box isn't squashed without any spacing
 * which looks out of place with visuals of other nearby elements
 */
.mbox-text {
	/* @noflip */
	padding: 0.25em 0.9em;
}

/* 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;
}


/**
******************DEPRECATED STYLES ************************************
These styles will be removed shortly. Please see inline comments.
**/


/*
FIXME: DUPLICATES Template:Hlist/styles.css
Note the mobile skin provides a `hlist-separated` class for this purpose. Use this class name alongside the hlist class instead as this will result in a FOUC.
Should be removed and moved to templates.
*/
/* Counter hlist indenting of Minerva*/
/*.mw-parser-output .hlist ul,*/
/*.mw-parser-output .hlist ol {*/
/*	padding-left: 0;*/
/*}*/
/* reset hlist margins of Minerva
do not add li here (see T235416) */
/*.mw-parser-output .hlist dd,*/
/*.mw-parser-output .hlist dt {*/
/*	margin-right: 0;*/
/*}*/
/* do not add li here. Minerva provides it already*/
/*.mw-parser-output .hlist dd:after {*/
/*	content: " · ";*/
/*	font-weight: bold;*/
/*}*/
/*.mw-parser-output .hlist dt:after {*/
/*	content: ": ";*/
/*}*/

/* Should be removed and moved to templates once TemplateStyles is live */
/*.heading-holder .hlist li:after,*/
/*.mw-parser-output .hlist dd:last-child:after,*/
/*.mw-parser-output .hlist dt:last-child:after,*/
/*.mw-parser-output .hlist li:last-child:after {*/
/*	content: none;*/
/*}*/
/* Add parentheses around nested lists */
/* Should be removed and moved to templates once TemplateStyles is live */
/*.mw-parser-output .hlist dd dd:first-child:before,*/
/*.mw-parser-output .hlist dd dt:first-child:before,*/
/*.mw-parser-output .hlist dd li:first-child:before,*/
/*.mw-parser-output .hlist dt dd:first-child:before,*/
/*.mw-parser-output .hlist dt dt:first-child:before,*/
/*.mw-parser-output .hlist dt li:first-child:before,*/
/*.mw-parser-output .hlist li dd:first-child:before,*/
/*.mw-parser-output .hlist li dt:first-child:before,*/
/*.mw-parser-output .hlist li li:first-child:before {*/
/*	content: " (";*/
/*	font-weight: normal;*/
/*}*/
/* Should be removed and moved to templates once TemplateStyles is live */
/*.mw-parser-output .hlist dd dd:last-child:after,*/
/*.mw-parser-output .hlist dd dt:last-child:after,*/
/*.mw-parser-output .hlist dd li:last-child:after,*/
/*.mw-parser-output .hlist dt dd:last-child:after,*/
/*.mw-parser-output .hlist dt dt:last-child:after,*/
/*.mw-parser-output .hlist dt li:last-child:after,*/
/*.mw-parser-output .hlist li dd:last-child:after,*/
/*.mw-parser-output .hlist li dt:last-child:after,*/
/*.mw-parser-output .hlist li li:last-child:after {*/
	/* content: ") " !important; /* Override hlist-separated being dumb */
/*	font-weight: normal;*/
/*	padding-left: 0;*/
/*}*/

/* Put ordinals in front of ordered list items */
/* Should be removed and moved to templates once TemplateStyles is live */
/*.mw-parser-output .hlist ol {*/
/*	counter-reset: listitem;*/
/*}*/

/* Should be removed and moved to templates once TemplateStyles is live */
/*.mw-parser-output .hlist ol > li {*/
/*	counter-increment: listitem;*/
/*}*/

/* Should be removed and moved to templates once TemplateStyles is live */
/*.mw-parser-output .hlist ol > li:before {*/
/*	content: " " counter(listitem) " ";*/
/*	white-space: nowrap;*/
/*}*/

/* Should be removed and moved to templates once TemplateStyles is live */
/*.mw-parser-output .hlist dd ol > li:first-child:before,*/
/*.mw-parser-output .hlist dt ol > li:first-child:before,*/
/*.mw-parser-output .hlist li ol > li:first-child:before {*/
/*	content: " (" counter(listitem) " ";*/
/*}*/

/* https://phabricator.wikimedia.org/T180396#5317728 */

@media print {
	.navbox,
	.hatnote,
	.ambox {
		display: none !important;
	}
}


/* Try to use nearest neighbour scaling for pixelated images */
.pixel-image,
.invslot-item-image,
.sprite {
	image-rendering: optimizeSpeed;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}


/* Classes corresponding to Minecraft formatting codes */
.format-0 {
	color: #000;
	text-shadow: 0.125em 0.125em 0 #000;
}

.format-1 {
	color: #00A;
	text-shadow: 0.125em 0.125em 0 #00002A;
}

.format-2 {
	color: #0A0;
	text-shadow: 0.125em 0.125em 0 #002A00;
}

.format-3 {
	color: #0AA;
	text-shadow: 0.125em 0.125em 0 #002A2A;
}

.format-4 {
	color: #A00;
	text-shadow: 0.125em 0.125em 0 #2A0000;
}

.format-5 {
	color: #A0A;
	text-shadow: 0.125em 0.125em 0 #2A002A;
}

.format-6 {
	color: #FA0;
	text-shadow: 0.125em 0.125em 0 #2A2A00;
}

.format-7 {
	color: #AAA;
	text-shadow: 0.125em 0.125em 0 #2A2A2A;
}

.format-8 {
	color: #555;
	text-shadow: 0.125em 0.125em 0 #151515;
}

.format-9 {
	color: #55F;
	text-shadow: 0.125em 0.125em 0 #15153F;
}

.format-a {
	color: #5F5;
	text-shadow: 0.125em 0.125em 0 #153F15;
}

.format-b {
	color: #5FF;
	text-shadow: 0.125em 0.125em 0 #153F3F;
}

.format-c {
	color: #F55;
	text-shadow: 0.125em 0.125em 0 #3F1515;
}

.format-d {
	color: #F5F;
	text-shadow: 0.125em 0.125em 0 #3F153F;
}

.format-e {
	color: #FF5;
	text-shadow: 0.125em 0.125em 0 #3F3F15;
}

.format-f,
#minetip-tooltip {
	color: #FFF;
	text-shadow: 0.125em 0.125em 0 #3F3F3F;
}

.format-l {
	font-weight: bold;
	letter-spacing: 0.125em;
}

.format-m {
	text-decoration: line-through;
}

.format-n {
	text-decoration: underline;
}

.format-o {
	font-style: italic;
}

/* Styling for minecraft style tooltip */
#minetip-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	background-color: #100010;
	background-color: rgba(16, 0, 16, 0.94);
	padding: 0.375em;
	font-family: Minecraft, sans-serif;
	font-size: 16px;
	word-spacing: 4px;
	white-space: nowrap;
	line-height: 1.25em;
	margin: 0.125em 0.25em;
	pointer-events: none;
	z-index: 9999;
}

#minetip-tooltip::before {
	content: "";
	position: absolute;
	top: 0.125em;
	right: -0.125em;
	bottom: 0.125em;
	left: -0.125em;
	border: 0.125em solid #100010;
	border-style: none solid;
	border-color: rgba(16, 0, 16, 0.94);
}

#minetip-tooltip::after {
	content: "";
	position: absolute;
	top: 0.125em;
	right: 0;
	bottom: 0.125em;
	left: 0;
	border: 0.125em solid #2D0A63;
	border-image: -webkit-linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)) 1;
	border-image: linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)) 1;
}

#minetip-tooltip > .description,
#minetip-tooltip > .minetip-description {
	display: block;
	margin-top: 0.25em;
}

/* Styling for tooltip */
.explain {
	border-bottom: 0;
	text-decoration: underline dotted;
	cursor: help;
}

/* Show help cursor when an abbr element has a title attribute */
abbr[title] {
	cursor: help;
}