MediaWiki:Mobile.css: Difference between revisions

From Sarkarverse
Jump to navigation Jump to search
m (Undo revision 54948 by Abhidevananda (talk))
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) " ";
}

Revision as of 01:32, 11 September 2017

/* CSS placed here will affect users of the mobile site */

/* Mobile format */
mobileformat=html