| 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; |
| } | | } |
| Line 130: |
Line 96: |
| 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-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;
| |
| }
| |
| } | | } |