Module:Sidebar/styles.css: Difference between revisions
some slight re orderings |
m 46 revisions imported from wikipedia:Module:Sidebar/styles.css |
||
| (36 intermediate revisions by 6 users not shown) | |||
| Line 1: | Line 1: | ||
. | /* {{pp-template}} */ | ||
/* TODO: Invert width design to be "mobile first" */ | |||
.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; | ||
margin: 0 0 1em 1em; | /* @noflip */ | ||
background: #f8f9fa; | margin: 0.5em 0 1em 1em; | ||
border: 1px solid # | background: var(--background-color-neutral-subtle, #f8f9fa); | ||
border: 1px solid var(--border-color-base, #a2a9b1); | |||
padding: 0.2em; | padding: 0.2em; | ||
text-align: center; | text-align: center; | ||
line-height: 1.4em; | line-height: 1.4em; | ||
font-size: 88%; | font-size: 88%; | ||
border-collapse: collapse; | |||
/* 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; | |||
/* also, minerva is way too aggressive about other stylings on tables. | |||
* TODO remove when this template gets moved to a div. plans on talk page. | |||
* We always float right on Minerva because that's a lot of extra CSS | |||
* otherwise. */ | |||
float: right !important; | |||
margin: 0.5em 0 1em 1em !important; | |||
} | |||
.sidebar-subgroup { | |||
width: 100%; | width: 100%; | ||
margin: 0; | margin: 0; | ||
| Line 20: | Line 50: | ||
.sidebar-left { | .sidebar-left { | ||
/* @noflip */ | |||
float: left; | float: left; | ||
/* @noflip */ | |||
clear: left; | clear: left; | ||
margin: 0 1em 1em 0; | /* @noflip */ | ||
margin: 0.5em 1em 1em 0; | |||
} | } | ||
| Line 28: | Line 61: | ||
float: none; | float: none; | ||
clear: both; | clear: both; | ||
margin: 0 1em 1em 0; | /* @noflip */ | ||
margin: 0.5em 1em 1em 0; | |||
} | } | ||
. | .sidebar-outer-title { | ||
padding | padding: 0 0.4em 0.2em; | ||
font-size: 125%; | font-size: 125%; | ||
line-height: 1.2em; | line-height: 1.2em; | ||
| Line 39: | Line 73: | ||
.sidebar-top-image { | .sidebar-top-image { | ||
padding: 0.4em | padding: 0.4em; | ||
} | } | ||
| Line 45: | Line 79: | ||
.sidebar-pretitle-with-top-image, | .sidebar-pretitle-with-top-image, | ||
.sidebar-caption { | .sidebar-caption { | ||
padding | padding: 0.2em 0.4em 0; | ||
line-height: 1.2em; | line-height: 1.2em; | ||
} | } | ||
.sidebar-pretitle { | .sidebar-pretitle { | ||
padding | padding: 0.4em 0.4em 0; | ||
line-height: 1.2em; | line-height: 1.2em; | ||
} | } | ||
| Line 56: | Line 90: | ||
.sidebar-title, | .sidebar-title, | ||
.sidebar-title-with-pretitle { | .sidebar-title-with-pretitle { | ||
padding: 0.2em 0. | padding: 0.2em 0.8em; | ||
font-size: 145%; | font-size: 145%; | ||
line-height: 1.2em; | line-height: 1.2em; | ||
| Line 62: | Line 96: | ||
.sidebar-title-with-pretitle { | .sidebar-title-with-pretitle { | ||
padding | padding: 0.1em 0.4em; | ||
} | } | ||
.sidebar-image { | .sidebar-image { | ||
padding: 0.2em 0 0.4em; | padding: 0.2em 0.4em 0.4em; | ||
} | } | ||
.sidebar-heading { | .sidebar-heading { | ||
padding: 0.1em; | padding: 0.1em 0.4em; | ||
} | } | ||
.sidebar-content { | .sidebar-content { | ||
padding: 0 0. | padding: 0 0.5em 0.4em; | ||
} | } | ||
.sidebar-content-with-subgroup { | .sidebar-content-with-subgroup { | ||
padding: 0.1em 0 0.2em; | padding: 0.1em 0.4em 0.2em; | ||
} | } | ||
.sidebar-above, | .sidebar-above, | ||
.sidebar-below { | .sidebar-below { | ||
padding: 0.3em 0. | padding: 0.3em 0.8em; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
| Line 96: | Line 130: | ||
text-align: right; | text-align: right; | ||
font-size: 115%; | font-size: 115%; | ||
padding: 0 0.4em 0.4em; | |||
padding | |||
} | } | ||
.sidebar-list-title { | .sidebar-list-title { | ||
padding: 0 0.4em; | |||
text-align: left; | text-align: left; | ||
font-weight: bold; | font-weight: bold; | ||
line-height: 1.6em; | line-height: 1.6em; | ||
font-size: 105%; | font-size: 105%; | ||
} | |||
/* centered text with mw-collapsible headers is finicky */ | |||
.sidebar-list-title-c { | |||
padding: 0 0.4em; | |||
text-align: center; | |||
margin: 0 3.3em; | |||
} | |||
@media (max-width: 640px) { | |||
/* users have wide latitude to set arbitrary width and margin :( | |||
"Super-specific" selector to prevent overriding this appearance by | |||
lower level sidebars too */ | |||
body.mediawiki .sidebar { | |||
width: 100% !important; | |||
clear: both; | |||
float: none !important; /* Remove when we div based; Minerva is dumb */ | |||
margin-left: 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. | |||
*/ | |||
} | |||
/* Fixes: T367463 */ | |||
body.skin--responsive .sidebar a > img { | |||
max-width: none !important; | |||
} | |||
/* Disable backgrounds via style attribute in night mode Eg.https://phabricator.wikimedia.org/F55243859 | |||
* https://en.wikipedia.org/w/index.php?title=Laissez-faire | |||
*/ | |||
@media screen { | |||
html.skin-theme-clientpref-night .sidebar:not( .notheme ) .sidebar-list-title, | |||
html.skin-theme-clientpref-night .sidebar:not( .notheme ) .sidebar-title-with-pretitle { | |||
background: transparent !important; | |||
} | |||
html.skin-theme-clientpref-night .sidebar:not( .notheme ) .sidebar-title-with-pretitle a { | |||
color: var( --color-progressive ) !important; | |||
} | |||
} | |||
@media screen and (prefers-color-scheme: dark) { | |||
html.skin-theme-clientpref-os .sidebar:not( .notheme ) .sidebar-list-title, | |||
html.skin-theme-clientpref-os .sidebar:not( .notheme ) .sidebar-title-with-pretitle { | |||
background: transparent !important; | |||
} | |||
html.skin-theme-clientpref-os .sidebar:not( .notheme ) .sidebar-title-with-pretitle a { | |||
color: var( --color-progressive ) !important; | |||
} | |||
} | |||
@media print { | |||
body.ns-0 .sidebar { | |||
display: none !important; | |||
} | |||
} | } | ||