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: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;
}

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

.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: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;
}

@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;
}

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

/* Extension:PortableInfobox generates odd HTML in the mobile view that we have to work around with CSS */
/* These styles should be removed once we migrate away from portable infoboxes */
.pi-title ~ p {
    background-color: var(--mw-bg-header);
    border-radius: var(--zw-border-radius-2);
    padding: var(--zw-space-2);
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0;
    text-align: center
}
.pi-title {
    display: none
}
.pi-data:not(:first-of-type) {
    background-color: var(--mw-bg-header);
    border: 1px solid #4b6d8c;
    border-radius: 0.5rem;
}
.skin-timeless #mw-content-text .pi-data-label {
    display: none;
}
.pi-data-label ~ p {
    font-weight: bold;
    padding: 0.5rem;
    text-align: right;
    display: flex;
    flex-basis: 8.5rem;
    justify-content: right;
    margin: 0;
    border: 1px solid var(--zw-border)
}
.pi-data-value {
    background-color: var(--zw-bg-infobox);
}

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

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

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