MediaWiki:Mobile.css

/*

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

color: var(--zw-text); background-color: var(--zw-background); }
 * 1) content {

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

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

background: transparent; }
 * 1) mw-mf-diffview .mw-diff-inline-moved {

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

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

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

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

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

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

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

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

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

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

color: #ff8581; }
 * 1) bodyContent a.new {

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

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

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

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

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

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

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

/* 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(--zw-background-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(--zw-background-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: 10rem; justify-content: right; margin: 0; border: 1px solid var(--zw-border) } .pi-data-value { background-color: var(--zw-background-infobox); }

/* Template:Tab2 */ /* centering image in 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; }

/* 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 */ background-color: var(--zw-header); }
 * 1) knight-challenges-page-container {

text-align: center; }
 * 1) knight-challenges-page-banner {

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

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