MediaWiki:Mobile.css: Difference between revisions

From Zelda Wiki, the Zelda encyclopedia
Jump to navigation Jump to search
No edit summary
No edit summary
 
(26 intermediate revisions by the same user not shown)
Line 1: Line 1:
/*  
/*  
[[Category:Deprecated Skins]]
[[Category:Skin Styles]]
   
   
CSS placed here will be applied to the mobile view regardless what the current mobile skin is.
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:
Mobile.css has been largely phased out in favor of:
1. TemplateStyles, for template-specific styles (see [[:Category:Template Styles]])
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)
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)
3. Skin-specific styles ([[MediaWiki:Timeless.css]] is the mobile skin 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");
@import url("/w/index.php?title=MediaWiki:Timeless.css&action=raw&ctype=text/css");


/* Variables */
.nomobile, .no-mobile {
body {
display: none;
--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 {
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;
}
}


Line 568: Line 19:
/* These styles should be removed once we migrate away from portable infoboxes */
/* These styles should be removed once we migrate away from portable infoboxes */
.pi-title ~ p {
.pi-title ~ p {
     background-color: var(--zw-background-header);
     background-color: var(--mw-bg-header);
     border-radius: var(--zw-border-radius-2);
     border-radius: var(--zw-border-radius-2);
     padding: var(--zw-space-2);
     padding: var(--zw-space-2);
Line 580: Line 31:
}
}
.pi-data:not(:first-of-type) {
.pi-data:not(:first-of-type) {
     background-color: var(--zw-background-header);
     background-color: var(--mw-bg-header);
     border: 1px solid #4b6d8c;
     border: 1px solid #4b6d8c;
     border-radius: 0.5rem;
     border-radius: 0.5rem;
Line 592: Line 43:
     text-align: right;
     text-align: right;
     display: flex;
     display: flex;
     flex-basis: 10rem;
     flex-basis: 8.5rem;
     justify-content: right;
     justify-content: right;
     margin: 0;
     margin: 0;
Line 598: Line 49:
}
}
.pi-data-value {
.pi-data-value {
     background-color: var(--zw-background-infobox);
     background-color: var(--zw-bg-infobox);
}
 
/* 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;
}
 
/* 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;
}
}

Latest revision as of 22:16, 5 November 2022

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

Mobile.css has been largely 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]] is the mobile skin at time of writing)
*/

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

.nomobile, .no-mobile {
	display: none;
}

/* 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);
}
Retrieved from "https://zeldawiki.wiki/w/index.php?title=MediaWiki:Mobile.css&oldid=968570"