MediaWiki:Mobile.css: Difference between revisions
Jump to navigation
Jump to search
(Created page with "@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:ParallelStyles.css"); →=========================================================================: : →Default MediaWiki Styling: : /* ===============================================================...") |
No edit summary |
||
Line 1: | Line 1: | ||
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:ParallelStyles.css"); | @import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:ParallelStyles.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 [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. | |||
If you are looking for .mobile-float-reset (see [[:phab:T56176]]), use TemplateStyles instead. | |||
.mobile-float-reset { | |||
float: none !important; | |||
width: 100% !important; | |||
} | |||
*/ | |||
/* Reset | /* Reset user agent styles. We don't reset small or blockquote here deliberately */ | ||
cite, dfn { | cite, | ||
dfn { | |||
font-style: inherit; | font-style: inherit; | ||
} | } | ||
q { | q { | ||
quotes: '"' '"' "'" "'"; | quotes: '"' '"' "'" "'"; | ||
} | } | ||
/* | /* 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; | display: none; | ||
} | } | ||
/* | /* | ||
. | .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. | |||
*/ | |||
/* removed inline from module as we work toward Tstyles support | |||
* Use three classes to match specificity of MobileFrontend/Minerva selectors */ | |||
.content .mw-parser-output .infobox-header, | |||
.content .mw-parser-output .infobox-subheader, | |||
.content .mw-parser-output .infobox-above, | |||
.content .mw-parser-output .infobox-title, | |||
.content .mw-parser-output .infobox-image, | |||
.content .mw-parser-output .infobox-full-data, | |||
.content .mw-parser-output .infobox-below { | |||
text-align: center; | |||
/ | |||
. | |||
. | |||
. | |||
. | |||
. | |||
. | |||
. | |||
. | |||
. | |||
. | |||
. | |||
} | } | ||
/* Unbulleted lists */ | /* Unbulleted lists e.g. Barack Obama page*/ | ||
.plainlist ul { | .plainlist ul { | ||
list-style: none; | |||
list-style: none | padding-left: 0; /* Reset Minerva defaults */ | ||
} | } | ||
/* | /* Prevent line breaks in silly places: | ||
1) Where desired | |||
2) Links when we don't want them to | |||
*/ | |||
.mw-parser-output .nowrap, | |||
.nowraplinks a { | |||
. | |||
. | |||
. | |||
white-space: nowrap; | 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 texhtml class for inline math */ | ||
. | span.texhtml { | ||
font-family: serif; | |||
font- | |||
white-space: nowrap; | white-space: nowrap; | ||
} | } | ||
/* | /* 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 */ | /* @noflip */ | ||
padding: 0.25em 0.9em; | |||
padding: 0. | |||
} | } | ||
/* Normal font styling for wikitable row headers with scope="row" tag */ | /* Normal font styling for wikitable row headers with scope="row" tag */ | ||
.wikitable.plainrowheaders th[scope=row] { | .wikitable.plainrowheaders th[scope=row], | ||
.wikitable.plainrowheaders th[scope=rowgroup] { | |||
font-weight: normal; | font-weight: normal; | ||
/* @noflip */ | /* @noflip */ | ||
Line 477: | Line 126: | ||
} | } | ||
/* | /** | ||
******************DEPRECATED STYLES ************************************ | |||
These styles will be removed shortly. Please see inline comments. | |||
**/ | |||
/* | /* | ||
/* | 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, | |||
margin: 0; | .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; | |||
. | |||
font- | |||
} | } | ||
/* 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: ") " !important; /* Override hlist-separated being dumb */ | |||
. | |||
. | |||
. | |||
. | |||
. | |||
. | |||
font-weight: normal; | font-weight: normal; | ||
padding-left: 0; | |||
} | } | ||
/* | /* 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; | 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 !important; | |||
@media | |||
. | |||
. | |||
. | |||
} | } | ||
} | } |
Revision as of 02:12, 31 May 2022
@import url("/index.php?action=raw&ctype=text/css&title=MediaWiki:ParallelStyles.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 [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.
If you are looking for .mobile-float-reset (see [[:phab:T56176]]), use TemplateStyles instead.
.mobile-float-reset {
float: none !important;
width: 100% !important;
}
*/
/* Reset user agent styles. We don't reset small or blockquote here deliberately */
cite,
dfn {
font-style: inherit;
}
q {
quotes: '"' '"' "'" "'";
}
/* 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;
}
/*
.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.
*/
/* removed inline from module as we work toward Tstyles support
* Use three classes to match specificity of MobileFrontend/Minerva selectors */
.content .mw-parser-output .infobox-header,
.content .mw-parser-output .infobox-subheader,
.content .mw-parser-output .infobox-above,
.content .mw-parser-output .infobox-title,
.content .mw-parser-output .infobox-image,
.content .mw-parser-output .infobox-full-data,
.content .mw-parser-output .infobox-below {
text-align: center;
}
/* Unbulleted lists e.g. Barack Obama page*/
.plainlist ul {
list-style: none;
padding-left: 0; /* Reset Minerva defaults */
}
/* Prevent line breaks in silly places:
1) Where desired
2) Links when we don't want them to
*/
.mw-parser-output .nowrap,
.nowraplinks 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 texhtml class for inline math */
span.texhtml {
font-family: serif;
white-space: nowrap;
}
/* 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;
}
/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
font-weight: normal;
/* @noflip */
text-align: left;
}
/**
******************DEPRECATED STYLES ************************************
These styles will be removed shortly. Please see inline comments.
**/
/*
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: ") " !important; /* Override hlist-separated being dumb */
font-weight: normal;
padding-left: 0;
}
/* 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 !important;
}
}