MediaWiki:Mobile.css

/* 
[[Category:Deprecated Skins]]
 
CSS placed here will be applied to the mobile view regardless what the current mobile skin is.

Mobile.css is being phased out in favor of:
1. TemplateStyles, for template-specific styles (see [[:Category:Template Styles]])
2. [[MediaWiki:Gadget-Site.css]], for site-wide CSS applied to all skins (desktop and mobile)
3. Skin-specific styles ([[MediaWiki:Timeless.css]] at time of writing)

Use media queries in these files to target specific device widths. 
You can use the widths defined at [[MediaWiki:Variables.css]].
*/

@import url("/w/index.php?title=MediaWiki:Variables.css&action=raw&ctype=text/css");
@import url("/w/index.php?title=MediaWiki:Site.css&action=raw&ctype=text/css");
@import url("/w/index.php?title=MediaWiki:Timeless.css&action=raw&ctype=text/css");

/* Variables */
body {
	--roundy-border-radius: 10px;
	
	/* Colors */
	--zw-background: #17456e;
	--zw-border: #426787;
	--zw-dark-1: #163d5f;
	--zw-dark-2: #0c2236;
	--zw-header: #1d578b;
	--zw-light: #1e5c93;
	--zw-links: #e7ea12;
	--zw-text: #d2d2d2;
}

#content,
footer {
	color: var(--zw-text);
	background-color: var(--zw-background);
}

.header-container.header-chrome {
	background: var(--zw-dark-1);
}

.content pre,
.mw-code {
    background-color: var(--zw-header);
    border: 1px dashed var(--zw-border);
}

#mw-mf-diffview .mw-diff-inline-moved {
	background: transparent;
}

/* Causes images to be resized using nearest-neighbor interpolation.
 * This prevents sprites, 2D game screenshots, and other pixel art from appearing blurry when resized (namely in galleries).
 * This comes at the cost of a slight reduction in quality for thumbnails of any other kind of image (e.g. screenshots and artwork)
 */
img,
canvas {
	image-rendering:-moz-crisp-edges;
	image-rendering:-o-crisp-edges;
	image-rendering:-webkit-optimize-contrast;
	-ms-interpolation-mode:nearest-neighbor;
	image-rendering:crisp-edges;
	image-rendering:pixelated;
}

img.default-scaling,
canvas.default-scaling {
	image-rendering:initial;
}

/* ***************************** Main Page ***************************** */
/* Note that even in Mobile View, the #css stylesheet is loaded */

/* Template:Main Page Games */
div.game-container {
	margin: 0 auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

div.game-container div.game {
	width: 100%;
	height: 125px;
	margin: 0 0 14px 0;
	overflow: hidden;
	display: inline-block;
	position: relative;
	font-size: 0;
}

div.game-container div.game span.year {
	bottom: 12px;
	right: 16px;
	left: auto;
	color: rgba(255, 255, 255, 0.9);
	position: absolute;
	font-size: 12px;
	z-index: 10;
}

div.game-container div.game a {
	width: 100%;
	height: 100%;
	text-align: left;
	box-sizing: border-box;
	padding: 5%;
	justify-content: flex-start;
	clip: auto;
	box-shadow: inset rgba(255, 255, 255, 0.1) 0 0 0 1px;
	z-index: 1;
	font-style: normal;
	color: rgba(255, 255, 255, 0.9);
	position: absolute;
	line-height: 29px;
	font-size: 25px;
	text-decoration: none;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
}

div.game-container div.game img {
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	vertical-align: middle;
}

#mf-zw-logo img {
	height: auto;
	max-width: 500px;
	width: 100%;
}

/* ************************ End Main Page styles ************************ */

/* Style/reposition the site notice's [dismiss] */
#localNotice > .globalNoticeDismiss { /* span is for extra specificity */
	margin: 0 5px; /* Reasonable distance from the 10px border-radius */
	height: 0;
}

.overlay,
.overlay-header-container,
.overlay-footer-container,
.search-overlay .overlay-header,
.search-overlay .results {
	background-color: #082750 !important;
}

.overlay-header {
	border-color: #426787 !important;
}

.overlay-content {
	background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0 !important;
}

.overlay-title h2 {
	border-bottom: medium none !important;
}

.search-content.overlay-header {
	background-color: #426787 !important;
}

.results .page-list li {
	background-color: #17456e !important;
	border-bottom: 1px solid #426787 !important;
	margin-bottom: 1px !important;
}

.overlay .panel,
.page-list li,
.topic-title-list li,
.site-link-list li {
	border-color: #426787 !important;
	color: #d2d2d2;
}

.page-list li > a,
.page-list li > a > h3,
.topic-title-list li > a,
.topic-title-list li > a > h3,
.site-link-list li > a,
.site-link-list li > a > h3 {
	border-bottom: medium none !important;
	color: #f4f26b;
}

.page-list li > a:active,
.page-list li > a:hover,
.page-list li > a:visited,
.topic-title-list li > a:active,
.topic-title-list li > a:hover,
.topic-title-list li > a:visited,
.site-link-list li > a:active,
.site-link-list li > a:hover,
.site-link-list li > a:visited {
	color: #e8e760;
}

.list-thumb.list-thumb-none {
	background-color: #17456e;
}

.mw-mobile-mode .searchresults ul.mw-search-results .mw-search-result-data {
	color: #808080;
}

.overlay.media-viewer img {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.overlay.media-viewer div.details {
	background: #1d578b none repeat scroll 0 0;
}

div.editor-overlay .summary-request,
div.overlay .license {
	color: #b6b6b6;
}

#powerSearchText {
	background: #fff none repeat scroll 0 0 !important;
	width: 60vw !important;
}

footer .last-modified-bar {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
	color: #d2d2d2;
}

footer .last-modified-bar a {
	color: #d2d2d2;
}

footer .last-modified-bar a:nth-child(2) {
	color: #f4f26b;
}

#footer {
	border-top-color: #1d578b !important;
}

#footer ul,
#footer ul li {
	color: #b6b6b6;
	text-align: left !important;
}

.footer-places li:first-of-type {
	padding-left: 0 !important;
}

.section-heading .icon {
	margin-top: 0.2em;
}

a {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	color: #f4f26b;
	text-decoration: none;
}

a:visited,
div.drawer.references a{
	color: var(--zw-links);
}

a:active {
	color: #f4f26b;
}

a:hover {
	text-decoration: underline;
}

a.stub {
	color: #f4f26b;
}

#bodyContent a.new {
	color: #ff8581;
}

a.new,
#p-personal a.new {
	color: #ff8581;
}

a.new:visited,
#p-personal a.new:visited {
	color: #ff8581;
}

a.mw-ui-button,
a.mw-ui-button.mw-ui-progressive,
a.mw-ui-button.mw-ui-primary {
	background: #0b284f none repeat scroll 0 0;
	color: #d2d2d2;
}

a.mw-ui-button:hover,
a.mw-ui-button.mw-ui-progressive:hover,
a.mw-ui-button.mw-ui-primary:hover {
	color: #b6b6b6;
}

a.mw-ui-button:active,
a.mw-ui-button.mw-ui-progressive:active,
a.mw-ui-button.mw-ui-primary:active {
	background: #17315a none repeat scroll 0 0;
	color: #d2d2d2;
}

a.mw-ui-button:focus,
a.mw-ui-button.mw-ui-progressive:focus,
a.mw-ui-button.mw-ui-primary:focus {
	border-color: rgba(204, 204, 204, 0.75);
}

div.toc-mobile,
.client-js div.toc-mobile {
	background-color: #1d578b;
	border: 1px solid #426787;
	min-width: 250px;
}

div.toc-mobile .collapsible-heading,
.client-js div.toc-mobile .collapsible-heading {
	border-bottom: medium none !important;
	margin-bottom: 0 !important;
}

div.toc-mobile .collapsible-heading .indicator,
.client-js div.toc-mobile .collapsible-heading .indicator {
	margin-right: 5px !important;
}

.content .mw-parser-output > h2 .indicator, .content .section-heading .indicator,
.mw-ui-icon.mw-ui-icon-before:before,
.icon-arrow-down,
.icon-arrow-up {
	filter: invert(1);
}

div.toc-mobile .collapsible-block,
.client-js div.toc-mobile .collapsible-block {
	margin-left: 15px;
	margin-right: 15px;
}

hr {
	background-color: #426787;
	color: #426787;
	border: 1px solid #426787;
}

.list-header {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	color: inherit;
}

.mw-mf-special #content .content-header {
	padding-top: 1em;
}

.mw-mf-special #content .content-header h2 {
	border-bottom: medium none !important;
}

.mw-mf-user {
	color: #d2d2d2;
}

.page-list .info,
.page-list .component,
.topic-title-list .info,
.topic-title-list .component,
.site-link-list .info,
.site-link-list .component {
	color: #b6b6b6;
}

.page-list.side-list .list-thumb,
.topic-title-list.side-list .list-thumb,
.site-link-list.side-list .list-thumb {
	color: #b6b6b6;
}

.minoredit {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.page-summary h2,
.page-summary h3 {
	color: #d2d2d2;
}

.page-summary h2 a,
.page-summary h3 a {
	color: #f4f26b;
}

#mw-mf-diffview #mw-mf-userinfo {
	background: #0b284f none repeat scroll 0 0;
}

#mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count {
	color: #b6b6b6;
}

#mw-mf-diffview #mw-mf-userinfo .mw-mf-edit-count div {
	color: #d2d2d2;
}

.mw-mf-special .content h2 {
	color: #d2d2d2;
}
.profile .card {
	background-color: #1d578b;
	border-color: #426787;
	color: #d2d2d2;
}

.profile a {
	color: #f4f26b;
}

.profile .footer {
	color: #d2d2d2;
}

.header .branding-box h1 span,
.header .branding-box a span {
	color: white;
}

/* This makes galleries etc. look squashed
.content table.wikitable,
.content table.prettytable,
.content [style*="width"] {
	width: auto !important;
}
*/
ul.gallery {
	text-align: center;
	padding-left: 0;
}

@media screen and (max-width: 720px) {
	.gallery .gallerybox {
		width: calc(50% - 6px - 1em) !important;
		margin-left: 0.5em;
		margin-right: 0.5em;
	}
}

@media screen and (max-width: 354px) {
	.gallerybox, 
	.gallerybox div {
		width: 100% !important;
	}
}

button.icon.cancel {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}

button.icon.cancel::before,
button.icon.cancel::after {
	background: #cfcfd0 none repeat scroll 0 0;
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	top: 50%;
	width: 100%;
}

button.icon.cancel::before {
	transform: rotate(45deg);
}

button.icon.cancel::after {
	transform: rotate(-45deg);
}

.content table[style*="border:1px"][style*="padding:2px"] td {
	padding: 1em;
}

td[style*="font-size:11px"],
td[style*="font-size: 11px"],
span[style*="font-size:6pt"],
span[style*="font-size: 6pt"] {
	font-size: inherit;
}

/* Gallery image boxes */
li.gallerybox div.thumb {
	background-color: #1D578B;
	border: 1px solid #426787;
	border-radius: var(--roundy-border-radius);
	margin: 0;
}

/* fileinfo styling */
.fileinfo {
	background-color: #1d578b;
	border: 1px solid #426787;
	border-radius: var(--roundy-border-radius);
	font-size:12px;
	margin: 1em auto;
	border-collapse:unset;
}

.fileinfo th{
	width:60px;
	border:none;
	text-align:left;
	padding:4px;
}

.fileinfo td{
	border:1px solid #426787;
	border-radius: var(--roundy-border-radius);
	background-color:#17456e;
	padding:4px;
}

/* gradient for mobile */
.gradient {
	background-image: linear-gradient(to bottom, #2D679B, #1A4E7D);
	background-image: -webkit-linear-gradient(top, #2D679B, #1A4E7D); /* Android Browser <= 4.3 */
}

/* Remove black background around sitenotices (globalNotice) */
.skin-minerva div.globalNotice { /* override existing style with div specificity */
	background: none;
}

/* Fix thumbnail caption color */
div.thumbinner,
div.thumbcaption,
html .thumbimage {
    background-color: var(--zw-header);
    color: inherit !important;
    border: none;
    border-radius: 10px;
    padding: 5px;
}

/* INFOBOXES */
table.infobox {
	padding: 5px;
	border-radius: var(--roundy-border-radius);
}

table.infobox tr.infobox-field td div.infobox-field-content {
	max-height: 175px;
	overflow: auto;
}

/* Template:Tab2 */
/* centering image in {{Media}} for infoboxes */
div.media-template div.tabcontents.vertical-centered-content > div.content > a > img {
	position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* FACELIFT */
/* All CSS placed under there is for the upcoming facelift of Zelda Wiki, place any other CSS above it */

/* COMMON */
/* MISC */
.caption {
	font-size: 12px;
}

.centered {
	text-align: center;
}

.no-mobile {
	display: none;
}

.roundy {
	border-radius: var(--roundy-border-radius);
	padding: 10px;
}

/* TABLES */
table.wikitable.compressed td:last-child {
	width: 100%;
}

table.wikitable.compressed th {
	padding-top: 15px;
}

/* NAVBOXES */
div.facelift-tabbed-navbox {
	background-color: #1e5c93;
}

/* LIST BOXES */
div.list-box-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

div.list-box {
	position: relative;
	margin: 8px;
	flex-basis: 100%;
	background-color: #1d578b;
	box-shadow: 2px 2px 2px #0c2236;
}

div.list-box:hover {
	background-color: #163d5f;
}

div.list-box span.list-box-link a {
	text-align: right;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	text-decoration: none;
}

div.list-box span.list-box-link a span.list-box-text {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	padding-right: 1em;
	font-size: large;
}

/* NATIVE SKIN FIXES */
.content table {
	display: table;
}

/* SITE NOTICE */
div#localNotice div.sitenotice-container {
	font-size:1.25em;
	text-align:center;
	background-color: var(--zw-header);
	padding:1em;
	border-radius: var(--roundy-border-radius);
}
.sitenotice-date {
	float:left;
	line-height:0;
	font-size:.8em;
}

.sitenotice-header {
	font-size: 1.5em;
	padding-top: 0.5em;
}

@media only screen and (max-width: 430px) {
  .sitenotice-header {
    font-size: 1.4em;
  }
}

@media only screen and (max-width: 390px) {
  .sitenotice-header {
    font-size: 1.3em;
  }
}

@media only screen and (max-width: 370px) {
  .sitenotice-header {
    font-size: 1.2em;
  }
  
  .sitenotice-body {
    font-size: 0.9em;
  }
}

@media only screen and (max-width: 340px) {
  .sitenotice-header {
    font-size: 1.1em;
  }
  
  .sitenotice-body {
    font-size: 0.8em;
  }
}

.sitenotice-body {
	padding-bottom: 0.5em;
}

.sitenotice-latest-announcements {
	float:right;
	line-height:0;
	font-size:.8em;
}

/* Citations */
ol.references li:target,
sup.reference:target {
	background-color: var(--zw-header);
}

div.drawer.references {
	background-color: var(--zw-dark-1);
}

/* Template:Ref */
div.references-small {
	max-height: 175px;
	overflow: auto;
	margin-bottom: 1em;
	padding: 0.5em;
}

/* Revisions */
div.mw-revision {
	color: white;
	background-color: var(--zw-dark-1);
	border-color: var(--zw-dark-2);
}

/* Knight Challenges page */
#knight-challenges-page-container {
	background-color: var(--zw-header);
}

#knight-challenges-page-banner {
	text-align: center;
}

#knight-challenges-page-banner img {
	max-width: 100%;
	height: auto;
}

div.knight-challenges-card {
	padding: 10px;
}

.knight-challenges-card-header {
	text-align: center;
}

.knight-challenges-card-content {
	border-radius: var(--roundy-border-radius);
	padding: 10px;
	background-color: var(--zw-background);
}

/* MAIN PAGE INFOBLOCKS */
.infoblock {
	background-color: var(--zw-header);
	border-radius: 5px;
	padding: 0.5em;
    margin-top: 0.5em;
    overflow: auto;
}

.infoblock-header {
	font-family:'Bowlby One';
	letter-spacing:1px;
	display:block;
	font-size:2em;
	line-height:1em;
	padding:0 .5em .2em .5em;
	text-transform:uppercase;
	text-align: center;
}

.infoblock-title {
	text-align: center;
	font-weight: 900;
	font-size: 1.2em;
}

.infoblock-content {
	text-align: left;
}

.infoblock-read-more {
	text-align: right;
}

td.nomenclature-flag {
	text-align: center;
}