Module:Sidebar/styles.css: Difference between revisions
Adding protection template |
add css to force display on everything that hits nomobile |
||
| Line 1: | Line 1: | ||
/* {{pp-template}} */ | /* {{pp-template}} */ | ||
/* TODO: Invert width design to be "mobile first" */ | |||
.sidebar { | .sidebar { | ||
/* TODO: Ask if we should have max-width 22em instead */ | |||
width: 22em; | width: 22em; | ||
/* @noflip */ | |||
float: right; | float: right; | ||
/* @noflip */ | |||
clear: right; | clear: right; | ||
/* @noflip */ | |||
margin: 0.5em 0 1em 1em; | margin: 0.5em 0 1em 1em; | ||
background: #f8f9fa; | background: #f8f9fa; | ||
| Line 12: | Line 17: | ||
line-height: 1.4em; | line-height: 1.4em; | ||
font-size: 88%; | font-size: 88%; | ||
/* Timeless has display: none on .nomobile at mobile resolutions, so we | |||
* unhide it with display: table and let precedence and proximity win. | |||
*/ | |||
display: table; | |||
} | |||
/* Unfortunately, so does Minerva desktop, except Minerva drops an | |||
* !important on the declaration. So we have to be mean for Minerva users. | |||
* Mobile removes the element entirely with `wgMFRemovableClasses` in | |||
* https://github.com/wikimedia/operations-mediawiki-config/blob/master/ | |||
wmf-config/InitialiseSettings.php#L16992 | |||
* which is why displaying it categorically with display: table works. | |||
* We don't really want to expose the generic user in the wild on mobile to have | |||
* to deal with sidebars. (Maybe the ones with collapsible lists, so that | |||
* might be an improvement. That is blocked on [[:phab:T111565]].) | |||
*/ | |||
body.skin-minerva .sidebar { | |||
display: table !important; | |||
} | } | ||
| Line 28: | Line 51: | ||
} | } | ||
/* TODO: Investigate whether -left and -none are used. */ | |||
.sidebar-left { | .sidebar-left { | ||
/* @noflip */ | |||
float: left; | float: left; | ||
/* @noflip */ | |||
clear: left; | clear: left; | ||
/* @noflip */ | |||
margin: 0.5em 1em 1em 0; | margin: 0.5em 1em 1em 0; | ||
} | } | ||
| Line 37: | Line 64: | ||
float: none; | float: none; | ||
clear: both; | clear: both; | ||
/* @noflip */ | |||
margin: 0.5em 1em 1em 0; | margin: 0.5em 1em 1em 0; | ||
} | } | ||
| Line 132: | Line 160: | ||
margin-left: 0 !important; | margin-left: 0 !important; | ||
margin-right: 0 !important; | margin-right: 0 !important; | ||
} | } | ||
/* TODO: We might consider making all links wrap at small resolutions and then | |||
* only introduce nowrap at higher resolutions. Do when we invert the media | |||
* query. | |||
*/ | |||
} | } | ||