Jump to content

Editing Module:Sidebar/styles.css

Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.

Latest revision Your text
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: var(--background-color-neutral-subtle, #f8f9fa);
background: #f8f9fa;
border: 1px solid var(--border-color-base, #a2a9b1);
border: 1px solid #aaa;
padding: 0.2em;
padding: 0.2em;
border-spacing: 0.4em 0;
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
.sidebar a {
* !important on the declaration. So we have to be mean for Minerva users.
white-space: nowrap;
* Mobile removes the element entirely with `wgMFRemovableClasses` in
}
* https://github.com/wikimedia/operations-mediawiki-config/blob/master/
 
wmf-config/InitialiseSettings.php#L16992
.sidebar-wraplinks a {
* which is why displaying it categorically with display: table works.
white-space: normal;
* 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;
}
}


Line 50: Line 29:


.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 61: Line 37:
float: none;
float: none;
clear: both;
clear: both;
/* @noflip */
margin: 0.5em 1em 1em 0;
margin: 0.5em 1em 1em 0;
}
}


.sidebar-outer-title {
.sidebar-outer-title {
padding: 0 0.4em 0.2em;
padding-bottom: 0.2em;
font-size: 125%;
font-size: 125%;
line-height: 1.2em;
line-height: 1.2em;
Line 73: Line 48:


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


Line 79: Line 54:
.sidebar-pretitle-with-top-image,
.sidebar-pretitle-with-top-image,
.sidebar-caption {
.sidebar-caption {
padding: 0.2em 0.4em 0;
padding-top: 0.2em;
line-height: 1.2em;
line-height: 1.2em;
}
}


.sidebar-pretitle {
.sidebar-pretitle {
padding: 0.4em 0.4em 0;
padding-top: 0.4em;
line-height: 1.2em;
line-height: 1.2em;
}
}
Line 90: Line 65:
.sidebar-title,
.sidebar-title,
.sidebar-title-with-pretitle {
.sidebar-title-with-pretitle {
padding: 0.2em 0.8em;
padding: 0.2em 0.4em;
font-size: 145%;
font-size: 145%;
line-height: 1.2em;
line-height: 1.2em;
Line 96: Line 71:


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


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


.sidebar-heading {
.sidebar-heading {
padding: 0.1em 0.4em;
padding: 0.1em;
}
}


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


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


.sidebar-above,
.sidebar-above,
.sidebar-below {
.sidebar-below {
padding: 0.3em 0.8em;
padding: 0.3em 0.4em;
font-weight: bold;
font-weight: bold;
}
}
Line 130: Line 105:
text-align: right;
text-align: right;
font-size: 115%;
font-size: 115%;
padding: 0 0.4em 0.4em;
}
 
.sidebar-collapse .sidebar-navbar {
padding-top: 0.6em;
}
 
.sidebar-collapse .mw-collapsible-toggle {
margin-top: 0.2em;
}
}


.sidebar-list-title {
.sidebar-list-title {
padding: 0 0.4em;
text-align: left;
text-align: left;
font-weight: bold;
font-weight: bold;
Line 141: Line 122:
}
}


/* centered text with mw-collapsible headers is finicky */
@media (max-width: 720px) {
.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 :(
/* users have wide latitude to set arbitrary width and margin :(
  "Super-specific" selector to prevent overriding this appearance by
  "Super-specific" selector to prevent overriding this appearance by
Line 155: Line 129:
width: 100% !important;
width: 100% !important;
clear: both;
clear: both;
float: none !important; /* Remove when we div based; Minerva is dumb */
float: none;
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.
*/
}
 
/* 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;
}
}
}
Please note that all contributions to OrangDev Labs Wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see OrangDev Labs Wiki:Copyrights for details). Do not submit copyrighted work without permission!
Cancel Editing help (opens in new window)
Preview page with this template

Templates used on this page:

Retrieved from "https://projecthome.skywiki.org/wiki/Module:Sidebar/styles.css"