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

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

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

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

/* MISC */
.caption {
	font-size: 12px;
}