MediaWiki:Mobile.css: различия между версиями
Перейти к навигации
Перейти к поиску
Fayanzār (обсуждение | вклад) (Новая страница: «→CSS placed here will affect users of the mobile site: .infobox { border: 1px solid #a2a9b1; border-spacing: 3px; background-color: #f8f9fa; color: black...») |
Fayanzār (обсуждение | вклад) |
||
(не показаны 3 промежуточные версии этого же участника) | |||
Строка 1: | Строка 1: | ||
/* CSS placed here will affect users of the mobile site */ | /* CSS placed here will affect users of the mobile site */ | ||
− | .infobox { | + | /** |
− | + | 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; | ||
+ | } | ||
+ | */ | ||
+ | |||
+ | /* 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; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | 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. | ||
+ | */ | ||
+ | |||
+ | /* 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; | ||
+ | } | ||
+ | |||
+ | /* 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; | ||
+ | } | ||
+ | |||
+ | /* Enable custom list style types for lists of references */ | ||
+ | .reflist ol.references { | ||
+ | list-style-type: inherit; | ||
+ | } | ||
+ | |||
+ | /* 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; |
− | + | } | |
− | /* | + | |
− | + | /** | |
+ | ******************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 !important; } | ||
} | } |
Текущая версия на 09:26, 17 февраля 2021
/* CSS placed here will affect users of the mobile site */ /** 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; } */ /* 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; } /* 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. */ /* 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; } /* 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; } /* Enable custom list style types for lists of references */ .reflist ol.references { list-style-type: inherit; } /* 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 !important; } }