|
|
Line 1: |
Line 1: |
| /* CSS placed here will affect users of the mobile site */ | | /* CSS placed here will affect users of the mobile site */ |
|
| |
|
| /**
| | /* Mobile format */ |
| You are editing the global css file for all mobile site users.
| | mobileformat=html |
| 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 [https://grafana.wikimedia.org/dashboard/db/mobile-2g 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 */
| |
| .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;
| |
| }
| |
| | |
| /* override default center aligning of th cells in some browsers,
| |
| * most th cells in infoboxes are row headers and left aligned */
| |
| .infobox > th {
| |
| /* @noflip */
| |
| text-align: left;
| |
| }
| |
| | |
| /* 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;
| |
| }
| |
| /* Unbulleted lists e.g. Barack Obama page */
| |
| .plainlist ul {
| |
| list-style: none;
| |
| }
| |
| | |
| .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 <ref group="Note"> --> "[Note 1]"
| |
| Please document here what pages use this
| |
| */
| |
| .mw-parser-output table:not(.infobox) .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;
| |
| }
| |
| | |
| /*
| |
| Enable custom list style types for lists of references
| |
| */
| |
| .reflist ol.references {
| |
| list-style-type: inherit;
| |
| }
| |
| | |
| /* Hanging indentation for Template:Refbegin */
| |
| .refbegin-hanging-indents > ul,
| |
| .refbegin-hanging-indents > dl {
| |
| list-style-type: none;
| |
| margin-left: 0;
| |
| }
| |
| .refbegin-hanging-indents > ul > li,
| |
| .refbegin-hanging-indents > dl > dd {
| |
| margin-left: 0;
| |
| padding-left: 1.0em;
| |
| text-indent: -1.0em;
| |
| list-style: none;
| |
| }
| |
| | |
| /* Prevent flags in tables from collapsing */
| |
| .flagicon img {
| |
| min-width: 25px;
| |
| }
| |
| | |
| /* Prevent unnecessary margin at the bottom of centralnotices */
| |
| .cnotice {
| |
| margin-bottom: 0 !important;
| |
| }
| |
| | |
| /**
| |
| ******************DEPRECATED STYLES ************************************
| |
| These styles will be removed shortly. Please see inline comments.
| |
| **/
| |
| | |
| | |
| /*
| |
| Generate interpuncts
| |
| Should be removed and moved to templates once TemplateStyles is live
| |
| */
| |
| #content .hlist dt:after {
| |
| content: ": ";
| |
| }
| |
| /* Can be removed when T169315 is resolved */
| |
| #content .hlist-separated li:after {
| |
| font-size: 0.8em;
| |
| color: #333;
| |
| }
| |
| /*
| |
| 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.
| |
| Should be removed and moved to templates once TemplateStyles is live
| |
| */
| |
| #content .hlist dd:after {
| |
| content: " · ";
| |
| font-weight: bold;
| |
| }
| |
| /* Should be removed and moved to templates once TemplateStyles is live */
| |
| #content .hlist dd:last-child:after,
| |
| #content .hlist dt:last-child:after,
| |
| #content .hlist li:last-child:after {
| |
| content: none;
| |
| }
| |
| /* Add parentheses around nested lists */
| |
| /* Should be removed and moved to templates once TemplateStyles is live */
| |
| #content .hlist dd dd:first-child:before, #content .hlist dd dt:first-child:before, #content .hlist dd li:first-child:before,
| |
| #content .hlist dt dd:first-child:before, #content .hlist dt dt:first-child:before, #content .hlist dt li:first-child:before,
| |
| #content .hlist li dd:first-child:before, #content .hlist li dt:first-child:before, #content .hlist li li:first-child:before {
| |
| content: " (";
| |
| font-weight: normal;
| |
| }
| |
| /* Should be removed and moved to templates once TemplateStyles is live */
| |
| #content .hlist dd dd:last-child:after, #content .hlist dd dt:last-child:after, #content .hlist dd li:last-child:after,
| |
| #content .hlist dt dd:last-child:after, #content .hlist dt dt:last-child:after, #content .hlist dt li:last-child:after,
| |
| #content .hlist li dd:last-child:after, #content .hlist li dt:last-child:after, #content .hlist li li:last-child:after {
| |
| content: ") ";
| |
| font-weight: normal;
| |
| }
| |
| /* Put ordinals in front of ordered list items */
| |
| /* Should be removed and moved to templates once TemplateStyles is live */
| |
| #content .hlist ol {
| |
| counter-reset: listitem;
| |
| }
| |
| /* Should be removed and moved to templates once TemplateStyles is live */
| |
| #content .hlist ol > li {
| |
| counter-increment: listitem;
| |
| }
| |
| /* Should be removed and moved to templates once TemplateStyles is live */
| |
| #content .hlist ol > li:before {
| |
| content: " " counter(listitem) " ";
| |
| white-space: nowrap;
| |
| }
| |
| /* Should be removed and moved to templates once TemplateStyles is live */
| |
| #content .hlist dd ol > li:first-child:before,
| |
| #content .hlist dt ol > li:first-child:before,
| |
| #content .hlist li ol > li:first-child:before {
| |
| content: " (" counter(listitem) " ";
| |
| }
| |