MediaWiki:Mobile.css: Difference between revisions
Content deleted Content added
Nick Parrott (talk | contribs) No edit summary |
Caleb Cooper (talk | contribs) No edit summary |
||
Line 1:
/**
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 [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.
Do not put specific styles for the following into this file:
== Template:Navbar (.navbar) ==
See [[Template:Navbar/styles.css]] ([[Template_talk:Navbar#Request%3A_Add_template_styles_to_existing_stylesheet]])
== Template:Hlist (.hlist) ==
See [[Template:Hlist/styles.css]]
*/
/* Mobile template hacks (see phab T56176)
If you are looking for the following, please update your template to use TemplateStyles:
.mobile-float-reset {
float: none !important;
width: 100% !important;
}
*/
/* CSS for Support-Wiki Boxes and Rows */
.suppwiki_row {
display: flex;
flex-direction: row;
flex-flow: row wrap;
justify-content: space-between;
padding: 0;
margin: 0 -5px 0 -5px;
}
.suppwiki_box {
flex: 1;
margin: 5px;
min-width: 210px;
border: 1px solid #CCC;
padding: 0 10px 10px 10px;
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}
.suppwiki_box .header_icon {
float: left;
margin-right: 8px;
}
.suppwiki_box .items {
border-top: 1px solid #CCC;
padding-top: 0.5em;
}
.suppwiki_box p:last-child {
margin-bottom: 0;
}
.suppwiki_boxcontents_small {
font-size: 95%;
}
/* Custom Pre, Code and SyntaxHighlight layout and style */
Line 12 ⟶ 75:
line-height: 1.6em;
font-size: 11px;
border: 1px solid #ddd;
padding: 0.3em 0.3em 0.3em 0.3em;
margin: 0.3em 0.3em 0.3em 0.3em;
}
pre.scroll, .mw-highlight.scroll pre {
width: auto;
min-width: 0;
max-width: 95%;
overflow-y: hidden;
overflow: visible;
overflow-x: auto;
display: inline-block;
white-space: pre;
}
width: auto;
display: inline-block;
white-space: pre;
}
.mw-highlight { display:inline; }
/* Default Pre's in Grey and Black with Yellow Highlight */
code.basic, pre.basic, div.basic pre, div.basic {
background-color: #f8f9fa;
color: black;
}
.basic .hll {
background-color: #ffffcc;
color: black;
border: 0 solid #ffffcc;
border-radius: 0;
}
.orange-highlight .hll {
background-color: #ff8300;
color: black;
border: 1px solid #cc6900;
border-radius: 0;
}
.blue-highlight .hll {
background-color: #15f4ee;
color: black;
border: 1px solid #0acac5;
border-radius: 0;
}
.green-highlight .hll {
background-color: #83f52c;
color: black;
border: 1px solid #65dd0a;
border-radius: 0;
}
.pink-highlight .hll {
background-color: #ff5aac;
color: black;
border: 1px solid #ff1589;
border-radius: 0;
}
/* Pre's in Black and Green */
code.shell, pre.shell, div.shell pre,
code.black-green, pre.black-green, div.black-green pre {
background-color: black;
color: green;
}
div.black-green .hll, div.shell .hll {
background-color: green;
color: black;
border:
border-radius:
}
/*
code.esx, pre.esx, div.esx pre,
code.black-white, pre.black-white, div.black-white pre {
background-color: black;
color: white;
}
div.black-white .hll, div.esx .hll {
background-color: white;
color: black;
border:
border-radius:
}
/*
code.net, pre.net, div.net pre,
code.blue-white, pre.blue-white, div.blue-white pre {
background-color: #034f84;
color: white;
}
div.blue-white .hll, div.net .hll {
background-color: white;
color: #034f84;
border:
border-radius:
}
span.hll { display: inline
Line 114 ⟶ 214:
/* Allow TOC to use newspaper columns */
div.three-columns ul {
-ms-column-count: 3; /* IE */
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-ms-column-gap: 40px; /* IE */
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-ms-column-rule: 1px outset #aaa; /* IE */
-webkit-column-rule: 1px outset #aaa; /* Chrome, Safari, Opera */
-moz-column-rule: 1px outset #aaa; /* Firefox */
Line 127 ⟶ 230:
}
div.three-columns ul ul{
-ms-column-count: 1; /* IE */
-webkit-column-count: 1; /* Chrome, Safari, Opera */
-moz-column-count: 1; /* Firefox */
Line 133 ⟶ 237:
div.four-columns ul {
-ms-column-count: 4; /* IE */
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
-ms-column-gap: 40px; /* IE */
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-ms-column-rule: 1px outset #aaa; /* IE */
-webkit-column-rule: 1px outset #aaa; /* Chrome, Safari, Opera */
-moz-column-rule: 1px outset #aaa; /* Firefox */
column-rule: 1px outset #aaa;
}
div.four-columns ul ul {
-ms-column-count: 1; /* IE */
-webkit-column-count: 1; /* Chrome, Safari, Opera */
-moz-column-count: 1; /* Firefox */
Line 152 ⟶ 260:
div.six-columns ul {
-ms-column-count: 6; /* IE */
-webkit-column-count: 6; /* Chrome, Safari, Opera */
-moz-column-count: 6; /* Firefox */
column-count: 6;
-ms-column-gap: 40px; /* IE */
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-ms-column-rule: 1px outset #aaa; /* IE */
-webkit-column-rule: 1px outset #aaa; /* Chrome, Safari, Opera */
-moz-column-rule: 1px outset #aaa; /* Firefox */
column-rule: 1px outset #aaa;
}
div.six-columns ul ul {
-ms-column-count: 1; /* IE */
-webkit-column-count: 1; /* Chrome, Safari, Opera */
-moz-column-count: 1; /* Firefox */
Line 183 ⟶ 295:
/* for toggle position */
float:left;
margin-right:0.2em;
}
Line 214 ⟶ 328:
.reset-this {
animation : none;
animation-delay :
animation-direction : normal;
animation-duration :
animation-fill-mode : none;
animation-iteration-count : 1;
Line 230 ⟶ 344:
background-origin : padding-box;
background-position : 0 0;
background-repeat : repeat;
background-size : auto auto;
Line 273 ⟶ 385:
column-fill : balance;
column-gap : normal;
column-rule : medium none
column-rule-color : currentColor;
column-rule-style : none;
Line 375 ⟶ 487:
@author [[User:Edokter]]
*/
.hlist-border dl,
.hlist-border ol,
.hlist-border ul,
.hlist dl,
.hlist ol,
.hlist ul {
}
.hlist-border li {
border-radius: 10px;
border: 2px solid blue;
padding: 0.3em 0.3em 0.3em 0.3em;
margin: 0.3em 0.3em 0.3em 0.3em;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li
.hlist-border dd,
.hlist-border dt,
.hlist-border li {
display: inline;
}
/* Display nested lists inline */
Line 395 ⟶ 521:
.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
.hlist-border.inline dl,
.hlist-border.inline ol,
.hlist-border.inline ul,
.hlist-border dl dl, .hlist-border dl ol, .hlist-border dl ul,
.hlist-border ol dl, .hlist-border ol ol, .hlist-border ol ul,
.hlist-border ul dl, .hlist-border ul ol, .hlist-border ul ul {
display: inline;
}
/* Hide empty list items */
.hlist-border .mw-empty-li,
.hlist .mw-empty-li {
}
/* Generate interpuncts */
.hlist-border dt:after,
.hlist dt:after {
}
/**
* Note hlist style usage differd in
* the Minerva skin. Remember .hlist is a class defined in core as well! Please check Minerva desktop (and Minerva.css) when changing
* See https://phabricator.wikimedia.org/T213239
*/
.hlist dd:after,
.hlist li:after {
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
}
/* Add parentheses around nested lists */
Line 420 ⟶ 560:
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
}
/* Put ordinals in front of ordered list items */
.hlist ol {
}
.hlist ol > li {
}
.hlist ol > li:before {
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
}
.arrow ul {
list-style: none;
Line 473 ⟶ 614:
-o-transform: rotate(-90deg); /* Opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
}
/* 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;
}
/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-parser-output .mw-collapsible-toggle {
font-weight: normal;
/* @noflip */
text-align: right;
padding-right: 0.2em;
padding-left: 0.2em;
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
/* @noflip */
float: left;
/* @noflip */
text-align: left;
}
/* For template documentation */
/* TemplateStyles */
.template-documentation {
clear: both;
margin: 1em 0 0 0;
border: 1px solid #a2a9b1;
background-color: #ecfcf4;
padding: 1em;
}
/* 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-patroller.css]] and
[[MediaWiki:Group-autoconfirmed.css]]. */
.checkuser-show,
.sysop-show,
.templateeditor-show,
.extendedmover-show,
.patroller-show,
.extendedconfirmed-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;
}
}
/*
Should be moved into Template:Cite_web
Styling for citations (CSS3). Breaks long urls, etc., rather than overflowing box */
.citation {
word-wrap: break-word;
}
/*
.infobox
DO NOT style infobox's here. That should be taken care of in the associated templates via template styles. Styles here will lead to flash of unstyled content on mobile.
*/
/* Default styling for Navbar template
TODO: Move to Navbar template ASAP
*/
.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;
padding-left: 0; /* Reset Minerva defaults */
}
.visualhide {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Geographical coordinates hidden in mobile. Any styles relating to them should be put inside
.[[Template:Coord/link]]
*/
/* 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
Enabled
*/
.mw-parser-output .nowrap,
.nowraplinks a,
.nowraplinks .selflink,
sup.reference a {
white-space: nowrap;
}
.mw-parser-output .infobox .nowrap {
white-space: normal !important;
}
/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
white-space: normal;
}
/* 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
Fix for T116318
*/
.flagicon img {
min-width: 25px;
}
/* Prevent unnecessary margin at the bottom of centralnotices */
.cnotice {
margin-bottom: 0 !important;
}
/* The message body cell(s), such as for {{Commonscat}}.
* this is a very small subset of the styles from Common.css
* just to make sure the box isn't squashed without any spacing
* which looks out of place with visuals of other nearby elements
*/
.mbox-text {
/* @noflip */
padding: 0.25em 0.9em;
}
/**
******************DEPRECATED STYLES ************************************
These styles will be removed shortly. Please see inline comments.
**/
/*
Generate interpuncts
FIXME: Move to template.
*/
/* Can be removed when T169315 is resolved */
#content .hlist-separated li:after {
font-size: 0.8em;
color: #333;
}
/*
FIXME: DUPLICATES Template:Hlist/styles.css
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.
*/
/* Counter hlist indenting of Minerva*/
.mw-parser-output .hlist ul,
.mw-parser-output .hlist ol {
padding-left: 0;
}
/* reset hlist margins of Minerva
do not add li here (see T235416) */
.mw-parser-output .hlist dd,
.mw-parser-output .hlist dt {
margin-right: 0;
}
/* do not add li here. Minerva provides it already*/
.mw-parser-output .hlist dd:after {
content: " · ";
font-weight: bold;
}
.mw-parser-output .hlist dt:after {
content: ": ";
}
/* Should be removed and moved to templates once TemplateStyles is live */
.heading-holder hlist li:after,
.mw-parser-output .hlist dd:last-child:after,
.mw-parser-output .hlist dt:last-child:after,
.mw-parser-output .hlist li:last-child:after {
content: none;
}
/* Add parentheses around nested lists */
/* Should be removed and moved to templates once TemplateStyles is live */
.mw-parser-output .hlist dd dd:first-child:before, .mw-parser-output .hlist dd dt:first-child:before, .mw-parser-output .hlist dd li:first-child:before,
.mw-parser-output .hlist dt dd:first-child:before, .mw-parser-output .hlist dt dt:first-child:before, .mw-parser-output .hlist dt li:first-child:before,
.mw-parser-output .hlist li dd:first-child:before, .mw-parser-output .hlist li dt:first-child:before, .mw-parser-output .hlist li li:first-child:before {
content: " (";
font-weight: normal;
}
/* Should be removed and moved to templates once TemplateStyles is live */
.mw-parser-output .hlist dd dd:last-child:after, .mw-parser-output .hlist dd dt:last-child:after, .mw-parser-output .hlist dd li:last-child:after,
.mw-parser-output .hlist dt dd:last-child:after, .mw-parser-output .hlist dt dt:last-child:after, .mw-parser-output .hlist dt li:last-child:after,
.mw-parser-output .hlist li dd:last-child:after, .mw-parser-output .hlist li dt:last-child:after, .mw-parser-output .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 */
.mw-parser-output .hlist ol {
counter-reset: listitem;
}
/* Should be removed and moved to templates once TemplateStyles is live */
.mw-parser-output .hlist ol > li {
counter-increment: listitem;
}
/* Should be removed and moved to templates once TemplateStyles is live */
.mw-parser-output .hlist ol > li:before {
content: " " counter(listitem) " ";
white-space: nowrap;
}
/* Should be removed and moved to templates once TemplateStyles is live */
.mw-parser-output .hlist dd ol > li:first-child:before,
.mw-parser-output .hlist dt ol > li:first-child:before,
.mw-parser-output .hlist li ol > li:first-child:before {
content: " (" counter(listitem) " ";
}
/* https://phabricator.wikimedia.org/T180396#5317728 */
@media print {
.navbox, .hatnote, .ambox { display: none; }
}
| |||