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.

/* Temporary fix for https://phabricator.wikimedia.org/T143558 */ span .lazy-image-placeholder { display: inline; }

/* 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 */ .hlist dl, .hlist ol, .hlist ul { margin: 0; padding: 0; } /* Display list items inline */ .hlist dd, .hlist dt, .hlist li { margin: 0; display: inline; } /* Display nested lists inline */ .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: ": "; }   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,
 * 2) content .hlist li: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 */ .hatnote { font-style: italic; } .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 */ } div.hatnote + div.hatnote { margin-top: -0.5em; }

/* 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  */ .column-count, .references-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; }

/* Implement phpBB prosilver header bar */ .headerbar { background-color: #12A3EB; background-image: url('//www.financialwisdomforum.org/forum/styles/prosilver/theme/images/bg_header.gif'); background-repeat:repeat-x; color: #FFFFFF; }