MediaWiki:Mobile.css

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

body, background: #0b284f none repeat scroll 0 0; color: #d2d2d2; }
 * 1) footer {

body.navigation-enabled .transparent-shield { background-color: rgba(18, 68, 111, 0.8) !important; }

.primary-navigation-enabled { background-color: #001226; }

.animations #mw-mf-page-center, body.navigation-enabled #mw-mf-page-center, .overlay-enabled, #content { background: #17456e none repeat scroll 0 0 !important; }
 * 1) mw-mf-page-center,

background: #001226 none repeat scroll 0 0; height: auto; min-height: 100%; }
 * 1) mw-mf-viewport {

background: #082750 none repeat scroll 0 0 !important; border-left-color: #001226 !important; }
 * 1) mw-mf-page-left {

border-bottom-color: #001226 !important; }
 * 1) mw-mf-page-left ul {

border-top-color: #001226 !important; }
 * 1) mw-mf-page-left li {

border-bottom-color: #001226 !important; }
 * 1) mw-mf-page-left li:last-child {

background-color: var(--zw-dark-2) }
 * 1) mw-mf-page-left li:hover,
 * 2) mw-mf-page-left a:hover {

color: white; }
 * 1) mw-mf-page-left ul li:hover a:visited,
 * 2) mw-mf-page-left ul li:hover a:active {

.client-js #mw-mf-page-left .icon-secondary, .client-js nav .icon-secondary { border-left-color: #001226 !important; }

.header-container.header-chrome { background: #082750 none repeat scroll 0 0; }

pre, .mw-code { background-color: #1D578B; border: 1px dashed #426787; color: #D2D2D2; font-size: 100% !important; }

/* table.diff, td.diff-otitle, td.diff-ntitle { background-color: transparent; }
 * Diff rendering

td.diff-addedline, td.diff-deletedline, td.diff-context { font-size: 90%; }

td.diff-addedline { background-color: #255A81; border-color: #B0FFB0; }

td.diff-deletedline { background-color: #255A81; border-color: #FFB0B0; }

td.diff-context { background-color: transparent; border-color: #BBB; color: #D2D2D2; }

td.diff-addedline .diffchange, td.diff-deletedline .diffchange { border-radius: 0.33em; color: black; padding: 0.25em; }

td.diff-addedline .diffchange { background: #90FF90; }

td.diff-deletedline .diffchange { background: #FF7070; }

/* 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;*/ /* Provided by another stylesheet */ width: 49%; }
 * 1) mainpage .categories img {

height: auto; /* Needed */ width: 100%; padding-bottom: 1em; }
 * 1) mf-zw-logo img {

div#mf-welcome-text { /* Extra specificity to override #css style */ margin: 1em 0; }

width: 100%; height: 125px; margin: 0 0 14px 0; overflow: hidden; }
 * 1) mf-maingames .game {

min-width: 100%; min-height: 100%; width: auto; height: auto; }
 * 1) mf-maingames .game img { /* May need more tweaking */

width: 100%; height: 100%; text-align: left; box-sizing: border-box; padding: 5%; /* Changed from 16px */ justify-content: flex-start; clip: auto; box-shadow: inset rgba(255, 255, 255, 0.1) 0 0 0 1px; z-index: 1; }
 * 1) mf-maingames .game a {

bottom: 12px; right: 16px; left: auto; }
 * 1) mf-maingames .game .year {

div#mf-NIWAnav { /* Extra specificity to override #css styles */ box-sizing:border-box; border:none; border-radius:2px; }

div#mf-NIWAnav .NIWA-header { /* Extra specificity to override #css styles */ display: table; /* Needed, probably in #css stylesheet too */ width: 100%; }

display: inline; }
 * 1) mf-NIWAnav .NIWA-header > div a {

display:flex; flex-direction: column; margin: 0; }
 * 1) mf-NIWAnav .body p:first-of-type {

margin: 16px; }
 * 1) mf-NIWAnav .body p:last-of-type {

div#mf-NIWAnav .cell { /* Extra specificity to override #css styles */ border-radius:5px; text-align:left; width:auto; padding:.7em 1em; overflow: hidden; /* Sticking-out text is hidden */ text-overflow: ellipsis; /* Long text cuts-off with ... */	white-space: nowrap; /* Long text doesn't break into two lines */ }

width: auto; margin-right: 4px; position: relative; top: -2px; }
 * 1) mf-NIWAnav .cell 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 */

.header, .page-actions-menu, .mw-mf-special #content .content-header { border-color: #426787; }

.page-actions-menu { border-top: none; margin-bottom: 12px; }

.page-heading { margin-bottom: 0; }

input.search { background: #082750 none repeat scroll 0 0 !important; color: #d2d2d2 !important; }

.search-overlay { background-color: rgba(0, 0, 0, 0.8) !important; }

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

h1, h2, h3, h4, h5, h6 { border-bottom: 1px solid #426787 !important; color: #d2d2d2; padding-top: 0; width: auto; }

.mw-headline { display: inline-block; font-family: "Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,"Liberation Sans",sans-serif; }

.mw-body h1, .mw-body h2 { font-family: "Linux Libertine",Georgia,Times,serif; }

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

.tabcontainer .tab { background-color: #1d578b; background-image: -moz-linear-gradient(center top, #1d679b, #1a4e7d); border: 2px solid #426787; border-radius: 2px; cursor: pointer; float: left; margin: 0 1px 2px; padding: 3px; text-align: center; white-space: nowrap; }

.tabcontainer .tab:hover { background-color: #24527c; background-image: -moz-linear-gradient(center top, #305f89, #17456e); color: #f4f26b; }

.tabcontainer .tab.active { background-color: #17456e !important; background-image: -moz-linear-gradient(center top, #1d578b, #17456e); color: #f4f26b; }

.mw-ui-icon.mw-ui-icon-element { filter: brightness(10) opacity(0.65); }

.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 for infoboxes */ div.media-template div.tabcontents.vertical-centered-content > div.content > a > img { position: relative; top: 50%; transform: translateY(-50%); }

/* Template:Media */ @media screen and (max-width: 414px) { div.media-template div.tabcontents div.tabcontainer span.tab.explain { font-size: 0.81em; } }

@media screen and (max-width: 375px) { div.media-template div.tabcontents div.tabcontainer span.tab.explain { font-size: 0.78em; } }

@media screen and (max-width: 360px) { div.media-template div.tabcontents div.tabcontainer span.tab.explain { font-size: 0.73em; } }

@media screen and (max-width: 320px) { div.media-template div.tabcontents div.tabcontainer span.tab.explain { font-size: 0.61em; } }

/* 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 { border-radius: var(--roundy-border-radius); padding: 5px; box-sizing: border-box; border-collapse: separate; }

table.wikitable > * > tr > th { background-color: transparent; }

table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td { border-color: transparent; }

table.infobox tr.infobox-field th, table.wikitable td { padding: 10px; }

table.infobox tr.infobox-field th:first-child, table.wikitable td:first-child { border-radius: var(--roundy-border-radius) 0px 0px var(--roundy-border-radius); }

table.infobox tr.infobox-field th:last-child, table.wikitable td:last-child { border-radius: 0px var(--roundy-border-radius) var(--roundy-border-radius) 0px; }

table.infobox tr.infobox-field th:first-child:last-child, table.wikitable td:first-child:last-child { border-radius: var(--roundy-border-radius) var(--roundy-border-radius) var(--roundy-border-radius) var(--roundy-border-radius); }

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

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

/* STYLE */ table.wikitable { background-color: var(--zw-light); }

table.infobox tr.infobox-field:nth-child(odd):not(:first-child) th, table.wikitable tr:nth-child(odd) td { background-color: var(--zw-dark-1); }

table.infobox tr.infobox-field:nth-child(even) th, table.wikitable tr:nth-child(even) td { background-color: var(--zw-background); }

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