Mô đun:Sidebar/sandbox/styles.css

/ TODO: Invert width design to be "mobile first" /
.sidebar {
/ TODO: Ask if we should have max-width 22em instead /
width: 22em;
/ @noflip /
float: right;
/ @noflip /
clear: right;
/ @noflip /
margin: 0.5em 0 1em 1em;
background: f8f9fa;
border: 1px solid aaa;
padding: 0.2em;
border-spacing: 0.4em 0;
text-align: center;
line-height: 1.4em;
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.phpL16992
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 a {
white-space: nowrap;
}

.sidebar-wraplinks a {
white-space: normal;
}

.sidebar-subgroup {
width: 100%;
margin: 0;
border-spacing: 0;
}

/ TODO: Investigate whether -left and -none are used. /
.sidebar-left {
/ @noflip /
float: left;
/ @noflip /
clear: left;
/ @noflip /
margin: 0.5em 1em 1em 0;
}

.sidebar-none {
float: none;
clear: both;
/ @noflip /
margin: 0.5em 1em 1em 0;
}

.sidebar-outer-title {
padding-bottom: 0.2em;
font-size: 125%;
line-height: 1.2em;
font-weight: bold;
}

.sidebar-top-image {
padding: 0.4em 0;
}

.sidebar-top-caption,
.sidebar-pretitle-with-top-image,
.sidebar-caption {
padding-top: 0.2em;
line-height: 1.2em;
}

.sidebar-pretitle {
padding-top: 0.4em;
line-height: 1.2em;
}

.sidebar-title,
.sidebar-title-with-pretitle {
padding: 0.2em 0.4em;
font-size: 145%;
line-height: 1.2em;
}

.sidebar-title-with-pretitle {
padding-top: 0;
}

.sidebar-image {
padding: 0.2em 0 0.4em;
}

.sidebar-heading {
padding: 0.1em;
}

.sidebar-content {
padding: 0 0.1em 0.4em;
}

.sidebar-content-with-subgroup {
padding: 0.1em 0 0.2em;
}

.sidebar-above,
.sidebar-below {
padding: 0.3em 0.4em;
font-weight: bold;
}

.sidebar-collapse .sidebar-above,
.sidebar-collapse .sidebar-below {
border-top: 1px solid aaa;
border-bottom: 1px solid aaa;
}

.sidebar-navbar {
text-align: right;
font-size: 115%;
}

.sidebar-collapse .sidebar-navbar {
padding-top: 0.6em;
}

.sidebar-collapse .mw-collapsible-toggle {
margin-top: 0.2em;
}

.sidebar-list-title {
text-align: left;
font-weight: bold;
line-height: 1.6em;
font-size: 105%;
}

/ centered text with mw-collapsible headers is finicky /
.sidebar-list-title-c {
text-align: center;
margin: 0 3.3em;
}

@media (max-width: 720px) {
/ 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.
/
}