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

/* Fix dumb default styling */
.content code,
.content pre {
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	color: black;
}

.content code {
	border-radius: 2px;
}

@media all and (max-width: 768px) {
	.gallerybox .thumb > div {
		margin: 15px !important;
		width: auto !important;
	}
}

td {
	background-color: #FFF;
}

/* Use black bullet points, instead of blue circles: [[File:List bullet.svg]] */
.content ul {
	list-style-image: url('filepath://List_bullet.svg');
}

/* Fix footer hlist separator colour */
.footer-content .hlist-separated li:after {
	color: #FFF;
}

/* Fix changes autocollapsing in recent changes */
.mw-changeslist-edit, .mw-changeslist-line {
	display: table-row !important;
}
.mw-changeslist-line-inner {
	padding-top: 1.5em;
}
.mw-enhanced-rc-nested {
    padding-top: 0.5em;
}

/* Alternating cell background */
.alternatecells:nth-child(odd) {
	background-color: #F9F9F9;
}

/* Alternating table rows, primarily used with [[Template:Infobox row]] */
.alternaterows tr:nth-child(even),
.infobox-rows tr:nth-child(even),
.alternaterows tr:nth-child(even) td,
.infobox-rows tr:nth-child(even) td {
	background-color: #F9F9F9;
}

/* Show TOC */
@media (max-width: 512px) {
	.skin-minerva .toc-mobile {
		display: block;
	}
}

/* Turn a list into a tree view style (See [[.minecraft]]) */
.treeview {
	margin-top: 0.3em;
}

.treeview .treeview-header {
	padding-left: 3px;
	font-weight: bold;
}
.treeview .treeview-header:last-child {
	border-color: #636363 !important;
	border-left-style: dotted;
}
.treeview .treeview-header:not(:last-child):before {
	content: none;
}
.treeview .treeview-header:last-child:before {
	border-bottom: 0;
}

.treeview ul,
.treeview li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-image: none;
}

.treeview li li {
	position: relative;
	padding-left: 13px;
	margin-left: 7px;
	border-left: 1px solid #636363;
}
.treeview li li:before {
	content: "";
	position: absolute;
	top: 0;
	left: -1px;
	width: 11px;
	height: 11px;
	border-bottom: 1px solid #636363;
}

.treeview li li:last-child:not(.treeview-continue) {
	border-color: transparent;
}
.treeview li li:last-child:not(.treeview-continue):before {
	border-left: 1px solid #636363;
	width: 10px;
}

.nbttree-inherited {
	background-color: #E6E6FA;
}

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

/* Simulate link styling for JS only links */
.jslink {
	color: #0645AD;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.jslink:hover {
	text-decoration: underline;
	cursor: pointer;
}
.jslink:active {
	color: #FAA700;
}

/* Hatnotes and disambiguation notices */
.hatnote {
	font-style: italic;
}
.hatnote i {
	font-style: normal;
}
div.hatnote {
	padding-left: 1.6em;
	margin-bottom: 0.5em;
}
div.hatnote + div.hatnote {
	margin-top: -0.5em;
}

/* Fix animated infobox images shifting the screen when images have different dimensions */
.content span.animated a > img,
.content span.animated a > .lazy-image-placeholder,
.content noscript span.animated > img {
    max-width: initial !important;
}

body.page-Main_Page #firstHeading {
    display: none;
}

/* Hide nomobile */
.nomobile {
	display: none;
}



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