c1ca90ce4b
MonoBook supports two modes - one that is responsive and one that is not. To do this it adds 3 modules. These can be reduced to 1 module by loading all the code and adding client side checks to determine whether to use it. The skin--responsive class is added by core for responsive skins so can be used to make that check. This does lead to additional download for all users (particularly the addition of oojs-ui.styles.icons-alerts) but given the default behaviour is to load these, and non-responsive skin requires an opt in I don't see this as a problem. Thanks to gzip the increase in render blocking styles is minimal: Before: skins.monobook.styles: 15.21KB skins.monobook.responsive: 16.14KB After: skins.monobook.styles: 16.63KB See bug for QA plan. Bug: T285492 Change-Id: I76bb644145539c8ec0220704c8fe9a78a4819c03
23 lines
667 B
Text
23 lines
667 B
Text
@import 'variables.less';
|
|
|
|
/**
|
|
* Styles for responsive version of MonoBook.
|
|
* IMPORTANT: These must not be merged with screen-common.less
|
|
* Doing so will confuse the LESS compiler and it will de-duplicate shared styles
|
|
* resulting in the breaking of responsive mode.
|
|
* See https://github.com/wikimedia/less.php/issues/69 for more information.
|
|
*/
|
|
|
|
@media screen {
|
|
// Must only apply when the skin-responsive class is on the body element.
|
|
body.skin--responsive {
|
|
// These styles are not used at mobile resolution.
|
|
@media ( min-width: 551px ) {
|
|
@import 'screen-desktop.less';
|
|
}
|
|
|
|
@media ( max-width: 550px ) {
|
|
@import 'screen-mobile.less';
|
|
}
|
|
}
|
|
}
|