Line 1: |
Line 1: |
| + | /* {{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: #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.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 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-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. |
| + | */ |
| + | } |