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}} */
.vertical-navbox {
/* 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;
/* @noflip */
margin: 0 0 1em 1em;
margin: 0.5em 0 1em 1em;
background: #f8f9fa;
background: var(--background-color-neutral-subtle, #f8f9fa);
border: 1px solid #aaa;
border: 1px solid var(--border-color-base, #a2a9b1);
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
.vertical-navbox-subgroup {
* !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 50: Line 20:


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


Line 61: Line 28:
float: none;
float: none;
clear: both;
clear: both;
/* @noflip */
margin: 0 1em 1em 0;
margin: 0.5em 1em 1em 0;
}
}


.sidebar-outer-title {
.vertical-navbox > caption {
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 39:


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


Line 79: Line 45:
.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 56:
.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 62:


.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;
}
}
.sidebar-navbar {
text-align: right;
font-size: 115%;
}


.sidebar-collapse .sidebar-above,
.sidebar-collapse .sidebar-above,
Line 127: Line 99:
}
}


.sidebar-navbar {
.sidebar-collapse .sidebar-navbar {
text-align: right;
padding-top: 0.6em;
font-size: 115%;
}
padding: 0 0.4em 0.4em;
 
.sidebar-collapse .NavFrame {
margin: 0;
font-size: 95%;
border: none; /* temporary */
padding: 0; /* temporary */
}
}


.sidebar-list-title {
.sidebar-collapse .NavHead {
padding: 0 0.4em;
line-height: 1.6em;
text-align: left;
font-weight: bold;
font-weight: bold;
line-height: 1.6em;
position: relative;
font-size: 105%;
font-size: 105%;
background: transparent; /* temporary */
text-align: left;
}
}


/* centered text with mw-collapsible headers is finicky */
.sidebar-collapse .NavFrame p,
.sidebar-list-title-c {
.sidebar-collapse .NavContent p {
padding: 0 0.4em;
font-size: 100%;
text-align: center;
margin: 0 3.3em;
}
}


@media (max-width: 640px) {
.sidebar-collapse div.NavContent {
/* users have wide latitude to set arbitrary width and margin :(
font-size: 105%;
  "Super-specific" selector to prevent overriding this appearance by
padding: 0.2em 0.4em;
  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 */
.sidebar-collapse .NavFrame + .NavFrame {
body.skin--responsive .sidebar a > img {
border-top-style: hidden; /* not sure if this should be hidden or none based on MDN; common.css has both (why) */
max-width: none !important;
}
}


/* Disable backgrounds via style attribute in night mode Eg.https://phabricator.wikimedia.org/F55243859
/*Pretty sure I don't really want this; need to see how mw-collapsible reacts */
* https://en.wikipedia.org/w/index.php?title=Laissez-faire
.sidebar-collapse a.NavToggle {
*/
position: absolute;
 
top: 0;
@media screen {
/* @noflip */
    html.skin-theme-clientpref-night .sidebar:not( .notheme ) .sidebar-list-title,
right: 3px;
    html.skin-theme-clientpref-night .sidebar:not( .notheme ) .sidebar-title-with-pretitle {
font-weight: normal;
  background: transparent !important;
font-size: 90%;
    }
 
    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) {
/* Styling for JQuery makeCollapsible, matching that of collapseButton
html.skin-theme-clientpref-os .sidebar:not( .notheme ) .sidebar-list-title,
.mw-parser-output .mw-collapsible-toggle {
html.skin-theme-clientpref-os .sidebar:not( .notheme ) .sidebar-title-with-pretitle {
font-weight: normal;
background: transparent !important;
/* @noflip
}
text-align: right;
padding-right: 0.2em;
html.skin-theme-clientpref-os .sidebar:not( .notheme ) .sidebar-title-with-pretitle a {
padding-left: 0.2em;
color: var( --color-progressive ) !important;
}
}
}


@media print {
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
body.ns-0 .sidebar {
/* @noflip
display: none !important;
float: left;
}
/* @noflip
text-align: left;
}
}
*/
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"