Adaris

Module:Sidebar/styles.css: Difference between revisions

Newer edit →
Created page with "→{{pp-template}}: →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: var(--background-color-neutral-subtle, #f8f9fa); border: 1px solid var(--border-color-base, #a2a9b1); padding: 0.2em; text-align: center; line-height: 1.4em; font-size: 88%; border-collapse: collap..."
 
No edit summary
Tag: Reverted
Line 1: Line 1:
/* {{pp-template}} */
/* {{pp-template}} */
/* TODO: Invert width design to be "mobile first" */
/* Adaris parchment/brown sidebar styling */
 
.sidebar {
.sidebar {
/* TODO: Ask if we should have max-width 22em instead */
width: 22em;
width: 22em;
/* @noflip */
/* @noflip */
Line 10: Line 10:
/* @noflip */
/* @noflip */
margin: 0.5em 0 1em 1em;
margin: 0.5em 0 1em 1em;
background: var(--background-color-neutral-subtle, #f8f9fa);
 
border: 1px solid var(--border-color-base, #a2a9b1);
background: #f7efe3;
padding: 0.2em;
border: 2px solid #a67c52;
padding: 0.35em;
 
text-align: center;
text-align: center;
line-height: 1.4em;
line-height: 1.4em;
font-size: 88%;
font-size: 88%;
border-collapse: collapse;
border-collapse: collapse;
/* Timeless has display: none on .nomobile at mobile resolutions, so we
display: table;
* unhide it with display: table and let precedence and proximity win.
 
*/
border-radius: 10px;
display: table;  
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
color: #3f2a18;
}
 
/* Links inside sidebars */
.sidebar a {
color: #6f4322;
text-decoration: none;
}
}


/* Unfortunately, so does Minerva desktop, except Minerva drops an
.sidebar a:hover {
* !important on the declaration. So we have to be mean for Minerva users.
color: #8c6239;
* Mobile removes the element entirely with `wgMFRemovableClasses` in
text-decoration: underline;
* https://github.com/wikimedia/operations-mediawiki-config/blob/master/
}
wmf-config/InitialiseSettings.php#L16992
 
* which is why displaying it categorically with display: table works.
/* Minerva compatibility */
* 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 {
body.skin-minerva .sidebar {
display: table !important;
display: table !important;
/* also, minerva is way too aggressive about other stylings on tables.
float: right !important;
* TODO remove when this template gets moved to a div. plans on talk page.
margin: 0.5em 0 1em 1em !important;
* 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 47: Line 48:
margin: 0;
margin: 0;
border-spacing: 0;
border-spacing: 0;
background: #f7efe3;
}
}


/* Left / non-floating variants */
.sidebar-left {
.sidebar-left {
/* @noflip */
/* @noflip */
Line 65: Line 68:
}
}


/* Top title outside the main title area */
.sidebar-outer-title {
.sidebar-outer-title {
padding: 0 0.4em 0.2em;
padding: 0.35em 0.5em 0.45em;
font-size: 125%;
font-size: 125%;
line-height: 1.2em;
line-height: 1.2em;
font-weight: bold;
font-weight: bold;
color: #3f2a18;
}
}


/* Top image */
.sidebar-top-image {
.sidebar-top-image {
padding: 0.4em;
padding: 0.45em;
}
 
.sidebar-top-image img,
.sidebar-image img {
max-width: 100%;
height: auto;
border-radius: 5px;
border: 1px solid #8c6239;
}
}


/* Captions and pretitle */
.sidebar-top-caption,
.sidebar-top-caption,
.sidebar-pretitle-with-top-image,
.sidebar-pretitle-with-top-image,
.sidebar-caption {
.sidebar-caption {
padding: 0.2em 0.4em 0;
padding: 0.25em 0.5em 0.1em;
line-height: 1.2em;
line-height: 1.25em;
color: #5a3a20;
font-size: 95%;
}
}


.sidebar-pretitle {
.sidebar-pretitle {
padding: 0.4em 0.4em 0;
padding: 0.45em 0.5em 0.1em;
line-height: 1.2em;
line-height: 1.2em;
color: #5a3a20;
font-weight: bold;
}
}


/* Main sidebar title */
.sidebar-title,
.sidebar-title,
.sidebar-title-with-pretitle {
.sidebar-title-with-pretitle {
padding: 0.2em 0.8em;
padding: 0.35em 0.8em;
font-size: 145%;
font-size: 145%;
line-height: 1.2em;
line-height: 1.2em;
font-weight: bold;
background: #a67c52;
color: white;
border-bottom: 2px solid #8c6239;
border-radius: 6px 6px 0 0;
}
.sidebar-title a,
.sidebar-title-with-pretitle a {
color: white;
}
}


.sidebar-title a:hover,
.sidebar-title-with-pretitle a:hover {
color: #f7efe3;
}
/* Slightly tighter version when pretitle exists */
.sidebar-title-with-pretitle {
.sidebar-title-with-pretitle {
padding: 0.1em 0.4em;
padding: 0.25em 0.5em;
}
}


/* Main image section */
.sidebar-image {
.sidebar-image {
padding: 0.2em 0.4em 0.4em;
padding: 0.45em 0.45em 0.55em;
}
}


/* Section headings */
.sidebar-heading {
.sidebar-heading {
padding: 0.1em 0.4em;
padding: 0.35em 0.5em;
background: #a67c52;
color: white;
font-weight: bold;
border-top: 1px solid #8c6239;
border-bottom: 1px solid #8c6239;
}
}


/* General content rows */
.sidebar-content {
.sidebar-content {
padding: 0 0.5em 0.4em;
padding: 0.45em 0.65em;
border-bottom: 1px solid rgba(166, 124, 82, 0.35);
background: rgba(255, 255, 255, 0.25);
}
}


.sidebar-content-with-subgroup {
.sidebar-content-with-subgroup {
padding: 0.1em 0.4em 0.2em;
padding: 0.25em 0.5em 0.35em;
border-bottom: 1px solid rgba(166, 124, 82, 0.35);
}
}


/* Above / below bars */
.sidebar-above,
.sidebar-above,
.sidebar-below {
.sidebar-below {
padding: 0.3em 0.8em;
padding: 0.45em 0.8em;
font-weight: bold;
font-weight: bold;
background: #efe2cf;
color: #3f2a18;
border-top: 1px solid rgba(166, 124, 82, 0.45);
border-bottom: 1px solid rgba(166, 124, 82, 0.45);
}
}


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


/* Navbar */
.sidebar-navbar {
.sidebar-navbar {
text-align: right;
text-align: right;
font-size: 115%;
font-size: 115%;
padding: 0 0.4em 0.4em;
padding: 0.2em 0.45em 0.45em;
color: #6f4322;
}
}


/* List titles */
.sidebar-list-title {
.sidebar-list-title {
padding: 0 0.4em;
padding: 0.25em 0.5em;
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%;
background: #a67c52;
color: white;
border-top: 1px solid #8c6239;
border-bottom: 1px solid #8c6239;
}
.sidebar-list-title a {
color: white;
}
}


/* centered text with mw-collapsible headers is finicky */
.sidebar-list-title a:hover {
color: #f7efe3;
}
 
/* Centered text with mw-collapsible headers is finicky */
.sidebar-list-title-c {
.sidebar-list-title-c {
padding: 0 0.4em;
padding: 0.25em 0.5em;
text-align: center;
text-align: center;
margin: 0 3.3em;
margin: 0 3.3em;
background: #a67c52;
color: white;
font-weight: bold;
border-radius: 4px;
}
}


/* Optional: soften default table rows inside sidebar */
.sidebar td,
.sidebar th {
border-color: rgba(166, 124, 82, 0.35);
}
/* Mobile */
@media (max-width: 640px) {
@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 {
body.mediawiki .sidebar {
width: 100% !important;
width: 100% !important;
clear: both;
clear: both;
float: none !important; /* Remove when we div based; Minerva is dumb */
float: none !important;
margin-left: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
}
/* 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.
*/
}
}


Line 170: Line 245:
}
}


/* Disable backgrounds via style attribute in night mode Eg.https://phabricator.wikimedia.org/F55243859
/* Dark/night mode: keep parchment styling instead of transparent Wikimedia defaults */
* https://en.wikipedia.org/w/index.php?title=Laissez-faire
@media screen {
*/
html.skin-theme-clientpref-night .sidebar:not(.notheme) {
background: #f7efe3 !important;
color: #3f2a18 !important;
border-color: #a67c52 !important;
}
 
html.skin-theme-clientpref-night .sidebar:not(.notheme) .sidebar-list-title,
html.skin-theme-clientpref-night .sidebar:not(.notheme) .sidebar-title,
html.skin-theme-clientpref-night .sidebar:not(.notheme) .sidebar-title-with-pretitle,
html.skin-theme-clientpref-night .sidebar:not(.notheme) .sidebar-heading {
background: #a67c52 !important;
color: white !important;
}


@media screen {
html.skin-theme-clientpref-night .sidebar:not(.notheme) a {
    html.skin-theme-clientpref-night .sidebar:not( .notheme ) .sidebar-list-title,
color: #6f4322 !important;
    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 {
html.skin-theme-clientpref-night .sidebar:not(.notheme) .sidebar-title a,
    color: var( --color-progressive ) !important;
html.skin-theme-clientpref-night .sidebar:not(.notheme) .sidebar-title-with-pretitle a,
    }
html.skin-theme-clientpref-night .sidebar:not(.notheme) .sidebar-list-title a,
html.skin-theme-clientpref-night .sidebar:not(.notheme) .sidebar-heading a {
color: white !important;
}
}
}


@media screen and (prefers-color-scheme: dark) {
@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) {
html.skin-theme-clientpref-os .sidebar:not( .notheme ) .sidebar-title-with-pretitle {
background: #f7efe3 !important;
background: transparent !important;
color: #3f2a18 !important;
border-color: #a67c52 !important;
}
 
html.skin-theme-clientpref-os .sidebar:not(.notheme) .sidebar-list-title,
html.skin-theme-clientpref-os .sidebar:not(.notheme) .sidebar-title,
html.skin-theme-clientpref-os .sidebar:not(.notheme) .sidebar-title-with-pretitle,
html.skin-theme-clientpref-os .sidebar:not(.notheme) .sidebar-heading {
background: #a67c52 !important;
color: white !important;
}
}
 
html.skin-theme-clientpref-os .sidebar:not( .notheme ) .sidebar-title-with-pretitle a {
html.skin-theme-clientpref-os .sidebar:not(.notheme) a {
color: var( --color-progressive ) !important;
color: #6f4322 !important;
}
 
html.skin-theme-clientpref-os .sidebar:not(.notheme) .sidebar-title a,
html.skin-theme-clientpref-os .sidebar:not(.notheme) .sidebar-title-with-pretitle a,
html.skin-theme-clientpref-os .sidebar:not(.notheme) .sidebar-list-title a,
html.skin-theme-clientpref-os .sidebar:not(.notheme) .sidebar-heading a {
color: white !important;
}
}
}
}
Retrieved from "https://adaris.wiki/Module:Sidebar/styles.css"