Mobile.css: Difference between revisions
Visvatmadeva (talk | contribs) No edit summary |
Visvatmadeva (talk | contribs) No edit summary |
||
Line 3: | Line 3: | ||
.mobilehide { | .mobilehide { | ||
display: none; | display: none; | ||
} | |||
.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, | |||
/* Temporary fix for bug 53437 - nav boxes can disrupt reading experience on smaller screens | |||
TODO: Update template to have nomobile class */ | |||
#content .vertical-navbox, | |||
#content .navbox { | |||
display: none; | |||
} | |||
/* Tablet specific styling */ | |||
@media all and (min-width: 768px) { | |||
#content .vertical-navbox, | |||
#content .navbox { | |||
display: inherit; | |||
} | |||
} | |||
/* 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 */ | |||
.infobox .navbar { | |||
font-size: 100%; | |||
} | |||
.navbox .navbar { | |||
display: block; | |||
font-size: 100%; | |||
} | |||
.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 .hlist dt:after { | |||
content: ": "; | |||
} | |||
#content .hlist dd:after, | |||
#content .hlist li:after { | |||
content: " · "; | |||
font-weight: bold; | |||
} | |||
#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 */ | |||
#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; | |||
} | |||
#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 */ | |||
#content .hlist ol { | |||
counter-reset: listitem; | |||
} | |||
#content .hlist ol > li { | |||
counter-increment: listitem; | |||
} | |||
#content .hlist ol > li:before { | |||
content: " " counter(listitem) " "; | |||
white-space: nowrap; | |||
} | |||
#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) " "; | |||
} | |||
/* Unbulleted lists e.g. Barack Obama page */ | |||
.plainlist ul { | |||
list-style: none; | |||
} | |||
/* 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; | |||
} | |||
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 <ref group="Note"> --> "[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 {{div col}}, {{reflist}} and {{refbegin}} */ | |||
.column-count, | |||
.references-column-count { | |||
-moz-column-count: 1 !important; | |||
-webkit-column-count: 1 !important; | |||
column-count: 1 !important; | |||
} | } |
Latest revision as of 10:39, 4 November 2015
/* CSS placed here will affect users of the mobile site */ .mobilehide { display: none; } .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, /* Temporary fix for bug 53437 - nav boxes can disrupt reading experience on smaller screens TODO: Update template to have nomobile class */ #content .vertical-navbox, #content .navbox { display: none; } /* Tablet specific styling */ @media all and (min-width: 768px) { #content .vertical-navbox, #content .navbox { display: inherit; } } /* 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 */ .infobox .navbar { font-size: 100%; } .navbox .navbar { display: block; font-size: 100%; } .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 .hlist dt:after { content: ": "; } #content .hlist dd:after, #content .hlist li:after { content: " · "; font-weight: bold; } #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 */ #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; } #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 */ #content .hlist ol { counter-reset: listitem; } #content .hlist ol > li { counter-increment: listitem; } #content .hlist ol > li:before { content: " " counter(listitem) " "; white-space: nowrap; } #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) " "; } /* Unbulleted lists e.g. Barack Obama page */ .plainlist ul { list-style: none; } /* 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; } 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 <ref group="Note"> --> "[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 {{div col}}, {{reflist}} and {{refbegin}} */ .column-count, .references-column-count { -moz-column-count: 1 !important; -webkit-column-count: 1 !important; column-count: 1 !important; }