MediaWiki:Common.css: Difference between revisions
Auto-deploy CSS update |
Auto-deploy CSS update |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 238: | Line 238: | ||
padding: 6px 4px 2px; | padding: 6px 4px 2px; | ||
line-height: 1.4; | line-height: 1.4; | ||
} | |||
/* ===== Table of contents ===== | |||
Vector 2022 drops the sidebar table of contents below 1120px and replaces it | |||
with a dropdown in the title bar, which on a reference article means losing | |||
the one control that makes a long dial timeline navigable. The left column | |||
is still 200px wide and empty at those widths, so keep the real TOC down to | |||
1000px and hide the title-bar fallback that would otherwise double it. */ | |||
@media screen and (min-width: 1000px) and (max-width: 1119px) { | |||
.client-js .mw-table-of-contents-container.vector-toc-landmark, | |||
.client-js #vector-toc-pinned-container, | |||
.client-js .vector-sticky-pinned-container { | |||
display: block; | |||
} | |||
#vector-page-titlebar-toc, | |||
.vector-page-titlebar .vector-page-titlebar-toc { | |||
display: none; | |||
} | |||
} | } | ||
| Line 248: | Line 266: | ||
.rp-lead { | .rp-lead { | ||
margin: 0.2em 0 1.4em; | margin: 0.2em 0 1.4em; | ||
clear: both; | |||
} | |||
/* Keep a section's figures inside that section. A tall right-floated thumb | |||
near the end of one section otherwise overhangs the next heading and its | |||
first paragraphs, which is where the "images interfering with each other" | |||
messiness comes from. Scoped to parser output so it never touches the | |||
skin's own headings. */ | |||
.mw-parser-output h2, | |||
.mw-parser-output h3, | |||
.mw-parser-output .mw-heading2, | |||
.mw-parser-output .mw-heading3 { | |||
clear: both; | |||
} | } | ||
.rp-lead .thumb, | .rp-lead .thumb, | ||
| Line 259: | Line 290: | ||
background: none !important; | background: none !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
/* Centring has to happen here, not on the image. MediaWiki wraps the file | |||
in an inline <a>, so `margin: 0 auto` on the img centres it inside an | |||
anchor that has already shrunk to fit — which left a height-capped | |||
portrait lead 342px wide sitting flush against the left margin of a | |||
1053px column. Centre the inline flow instead. */ | |||
text-align: center; | |||
} | |||
.rp-lead a { | |||
display: inline-block; | |||
} | } | ||
.rp-lead img { | .rp-lead img { | ||
/* Landscape heroes fill the column, which is the look we want. Most of the | |||
width: 100%; | corpus is not landscape yet (27 landscape, 90 square, 83 portrait), and | ||
at full column width a 2:3 portrait renders about 1140px tall — it buries | |||
the intro instead of introducing it. Capping the height keeps a landscape | |||
hero untouched (a 3:2 at this width is ~507px) while a portrait one | |||
becomes a tall centered figure rather than a wall. Height, not a crop: | |||
nothing is cut off a watch photograph. */ | |||
max-height: 520px; | |||
width: auto; | |||
max-width: 100%; | |||
height: auto; | height: auto; | ||
display: inline-block; | |||
border: 1px solid #d4e0d8; | border: 1px solid #d4e0d8; | ||
border-radius: 8px; | border-radius: 8px; | ||
| Line 270: | Line 319: | ||
.rp-lead .thumbcaption, | .rp-lead .thumbcaption, | ||
.rp-lead figcaption { | .rp-lead figcaption { | ||
text-align: | text-align: center; | ||
font-size: 0.82em; | font-size: 0.82em; | ||
color: #5a6b60; | color: #5a6b60; | ||
| Line 304: | Line 353: | ||
background: none; | background: none; | ||
border: none; | border: none; | ||
/* A gallery is a full-width comparison plate and must never share a line | |||
with a floated figure. Without this, packed mode measures the narrowed | |||
gutter beside the float and lays out ragged rows at inconsistent sizes — | |||
seen live on Reference:5513, where a 250px right float bled 348px down | |||
from the previous section and broke the Special-branches plate into a | |||
1-then-2 stagger. */ | |||
clear: both; | |||
} | } | ||
li.gallerybox { | li.gallerybox { | ||