MediaWiki:Mobile.css

/** You are editing the global css file for all mobile site users. With Great Power Comes Great Responsibility.

Some words of caution:
 * Avoid any changes which impact layout on a mobile device.
 * Please be careful not to introduce any margin / padding rules. These should be done inside the template itself via an inline style.
 * Be especially cautious when a template is likely to be used within the top 480px of the screen (the content that the user will see first on a mobile device)
 * Do not use display:none. Instead edit the template and markup the element you want to hide with the `nomobile` class.
 * Try to keep rules as generic and minimal as possible. Do not have 2 selectors doing the same thing. Introduce a common class and use that instead
 * For big changes consult the grafana dashboard to ensure you don't introduce any performance regressions.
 * Group common css rules together where possible.

/* Mobile template hacks (see bug 54176) */ .mobile-float-reset { float: none !important; width: 100% !important; }

/* Hide the images */ .compact-ambox table .mbox-image, .compact-ambox table .mbox-imageright, .compact-ambox table .mbox-empty-cell, /* Allow for hiding text in compact form */ .compact-ambox .hide-when-compact, .geo-nondefault, .geo-multi-punct, /* Hide stuff meant for accounts with special permissions. Made visible again in  MediaWiki:Group-sysop.css, MediaWiki:Group-accountcreator.css and MediaWiki:Group-autoconfirmed.css. */ .sysop-show, .accountcreator-show, .autoconfirmed-show, /* Copied from Common.css - allow for hiding text in compact form e.g. clean up templates */ .hide-when-compact, /* portal pages are badly formatted. Until this changes these should be hidden. (see https://phabricator.wikimedia.org/T86495) */ .noprint.portal { display: none; }

/* For linked citation numbers and document IDs, where the number need not be shown on a screen or a handheld, but should be included in the printed version TODO: Move to Citation template when templates have stylesheets See https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates @media screen, handheld { .citation *.printonly { display: none; } } /* Styling for citations (CSS3). Breaks long urls, etc., rather than overflowing box .citation { word-wrap: break-word; }

/* Default styling for Navbar template TODO: Move to Navbar template when templates have stylesheets See https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates .navbar { display: inline; font-size: 88%; font-weight: normal; } .navbar ul { display: inline; white-space: nowrap; } .navbar li { word-spacing: -0.125em; } .navbar.mini li span { font-variant: small-caps; } /* Navbar styling when nested in infobox and navbox */ .navbox .navbar, .infobox .navbar { font-size: 100%; } .navbox .navbar { display: block; } .navbox-title .navbar { /* @noflip */ float: left; /* @noflip */ text-align: left; /* @noflip */ margin-right: 0.5em; width: 6em; }

/* Style for horizontal lists (separator following item). @source mediawiki.org/wiki/Snippets/Horizontal_lists @revision 6 (2014-05-09) @author User:Edokter */

/* Display list items inline */ .hlist dd, .hlist dt, .hlist li {   display: inline; } /* Display nested lists inline */ /* Disabled temporarily due to T131423 .hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,*/ .hlist dl dl, .hlist dl ol, .hlist dl ul, .hlist ol dl, .hlist ol ol, .hlist ol ul, .hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; } /* Generate interpuncts */ content: ": "; } /* Note the mobile skin provides a `hlist-separated` class for this purpose. Use this class name alongside the hlist class instead as this will result in a FOUC. */   content: " · "; font-weight: bold; }   content: none; } /* Add parentheses around nested lists */ content: " (";   font-weight: normal; }    content: ") "; font-weight: normal; } /* Put ordinals in front of ordered list items */ counter-reset: listitem; }   counter-increment: listitem; }   content: " " counter(listitem) " "; white-space: nowrap; }   content: " (" counter(listitem) " "; } /* Unbulleted lists e.g. Barack Obama page */ .plainlist ul {    list-style: none; }
 * 1) content .hlist dt:after {
 * 1) content .hlist dd:after {
 * 1) content .hlist dd:last-child:after,
 * 2) content .hlist dt:last-child:after,
 * 3) content .hlist li:last-child:after {
 * 1) content .hlist dd dd:first-child:before, #content .hlist dd dt:first-child:before, #content .hlist dd li:first-child:before,
 * 2) content .hlist dt dd:first-child:before, #content .hlist dt dt:first-child:before, #content .hlist dt li:first-child:before,
 * 3) content .hlist li dd:first-child:before, #content .hlist li dt:first-child:before, #content .hlist li li:first-child:before {
 * 1) content .hlist dd dd:last-child:after, #content .hlist dd dt:last-child:after, #content .hlist dd li:last-child:after,
 * 2) content .hlist dt dd:last-child:after, #content .hlist dt dt:last-child:after, #content .hlist dt li:last-child:after,
 * 3) content .hlist li dd:last-child:after, #content .hlist li dt:last-child:after, #content .hlist li li:last-child:after {
 * 1) content .hlist ol {
 * 1) content .hlist ol > li {
 * 1) content .hlist ol > li:before {
 * 1) content .hlist dd ol > li:first-child:before,
 * 2) content .hlist dt ol > li:first-child:before,
 * 3) content .hlist li ol > li:first-child:before {

/* CODE FOR COMPACT AMBOX */ /* Remove borders, backgrounds, padding, etc. Please document here what pages use this .compact-ambox table.ambox { border: none; border-collapse: collapse; background: transparent; margin: 0 0 0 1.6em !important; padding: 0 !important; width: auto; display: block; } .compact-ambox table.mbox-small-left { font-size: 100%; width: auto; margin: 0; } /* Style the text cell as a list item and remove its padding */ .compact-ambox table .mbox-text { padding: 0 !important; margin: 0 !important; } .compact-ambox table .mbox-text-span { display: list-item; line-height: 1.5em; list-style-type: square; list-style-image: url("data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs="); }

.visualhide { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Hatnotes and disambiguation notices Please review the default hatnote styles provided by MobileFrontend before adding here. .hatnote i { font-style: normal; } div.hatnote { /* @noflip */ /*padding-left: 1.6em; margin-bottom: 0.5em; commented out until https://phabricator.wikimedia.org/T130846 is resolved*/ }

/* Geographical coordinates defaults. See Template:Coord/link for how these are used. The classes "geo", "longitude", and "latitude" are used by the Geo microformat. */ .geo-default, .geo-dms, .geo-dec { display: inline; }

.longitude, .latitude            { white-space: nowrap; }

/* Prevent line breaks in silly places: 1) Where desired  2) Links when we don't want them to   3) Bold "links" to the page itself   4) Ref tags with group names  --> "[Note 1]" Please document here what pages use this .nowrap, .nowraplinks a, .nowraplinks .selflink, sup.reference a { white-space: nowrap; } /* But allow wrapping where desired: */ .wrap, .wraplinks a { white-space: normal; }

/* hidden sortkey for tablesorter */ td .sortkey, th .sortkey { display: none; speak: none; }

/* Pie chart: Transparent borders */ .transborder { border: solid transparent; }

/* Generic class for Times-based serif, texhtml class for inline math */ .times-serif, span.texhtml { font-family: serif; } span.texhtml { white-space: nowrap; }

/* Disabling column-count for, and Rule should be removed when T149394 is deployed. .column-count { -moz-column-count: 1 !important; -webkit-column-count: 1 !important; column-count: 1 !important; }

/* Prevent flags in tables from collapsing */ .flagicon img { min-width: 25px; }