MediaWiki:Mobile.css: Difference between revisions

From Zelda Wiki, the Zelda encyclopedia
Jump to navigation Jump to search
No edit summary
No edit summary
 
(2 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]].
*/
*/


Line 17: Line 14:
.nomobile, .no-mobile {
.nomobile, .no-mobile {
display: none;
display: none;
}
/* ***************************** Main Page ***************************** */
#mf-zw-logo img {
height: auto;
max-width: 500px;
width: 100%;
}
}


Line 60: Line 50:
.pi-data-value {
.pi-data-value {
     background-color: var(--zw-bg-infobox);
     background-color: var(--zw-bg-infobox);
}
/* MISC */
.caption {
font-size: 12px;
}
}

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