@@ Line 20: / Line 20: @@
 /* ===== Page title ===== */
 .mw-page-title-main,
-.mw-first-heading {
+.mw-first-heading,
-     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+.mw-body h1.firstHeading,
+.vector-body h1 {
+     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
      font-weight: 800;
      font-size: 2.3em;
@@ Line 236: / Line 238: @@
      padding: 6px 4px 2px;
      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
+px 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;
+    }
+}
+/* ===== Lead image =====
+   A reader arriving from a search result confirms one thing first: is this the
+   watch I am looking at. A 220px crop floated into the margin answers that
+   badly, so references lead with the hero shot at column width. Placed by
+   scripts/place_hero.py as <div class="rp-lead"> wrapping a centered thumb,
+   which keeps the caption and keeps MultimediaViewer's click-to-enlarge. */
+.rp-lead {
+    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 .thumbinner,
+.rp-lead figure {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    float: none !important;
+    border: none !important;
+    background: none !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
+px column. Centre the inline flow instead. */
+    text-align: center;
+}
+.rp-lead a {
+    display: inline-block;
+}
+.rp-lead img {
+    /* Landscape heroes fill the column, which is the look we want. Most of the
+       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;
+    display: inline-block;
+    border: 1px solid #d4e0d8;
+    border-radius: 8px;
+    background: #fff;
+}
+.rp-lead .thumbcaption,
+.rp-lead figcaption {
+    text-align: center;
+    font-size: 0.82em;
+    color: #5a6b60;
+    padding: 8px 2px 0 !important;
+    border-top: 1px solid #e3eae5;
+    margin-top: 8px;
+}
+/* The magnify pointer is redundant when the whole image opens the lightbox. */
+.rp-lead .magnify {
+    display: none;
+}
+@media (max-width: 640px) {
+    .rp-lead {
+        margin-bottom: 1.1em;
+    }
+    .rp-lead img {
+        border-radius: 6px;
+    }
+}
+/* ===== Galleries =====
+   MediaWiki ships galleries as grey-bordered boxes with a byte count under
+   each cell, which is the single least pristine thing on a watch page. The
+   rules below strip the chrome back to the photograph: uniform tiles, one
+   consistent gutter, captions that read as labels, and a hover state that
+   signals the MultimediaViewer lightbox is there. */
+ul.gallery {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    margin: 1.2em 0 1.6em;
+    padding: 0;
+    background: 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
+-then-2 stagger. */
+    clear: both;
+}
+li.gallerybox {
+    margin: 0 !important;
+    border: none !important;
+    background: none !important;
+    vertical-align: top;
+}
+li.gallerybox div.thumb {
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 1px solid #d4e0d8 !important;
+    border-radius: 8px;
+    background: #fff !important;
+    overflow: hidden;
+    transition: box-shadow 0.18s ease, transform 0.18s ease,
+                border-color 0.18s ease;
+}
+li.gallerybox div.thumb img {
+    display: block;
+    border-radius: 7px;
+}
+/* The lightbox is the point of a gallery — say so on hover. */
+li.gallerybox div.thumb:hover {
+    border-color: #1b5e3b !important;
+    box-shadow: 0 6px 18px rgba(27, 94, 59, 0.16);
+    transform: translateY(-2px);
+}
+li.gallerybox div.thumb a {
+    cursor: zoom-in;
+}
+li.gallerybox .gallerytext {
+    padding: 7px 2px 0 !important;
+    font-size: 0.8em;
+    line-height: 1.4;
+    color: #5a6b60;
+    text-align: center;
+}
+li.gallerybox .gallerytext p {
+    margin: 0;
+}
+/* Byte counts and pixel dimensions belong on a File: page, not under a
+   photograph of a 5513. $wgGalleryOptions suppresses them server-side; this
+   is the belt-and-braces for galleries written with explicit attributes. */
+li.gallerybox .gallerytext .bytes,
+li.gallerybox .gallerytext .fileinfo {
+    display: none;
+}
+/* Packed mode sets its own inline widths — don't fight them, just keep the
+   rhythm consistent. */
+ul.mw-gallery-packed li.gallerybox,
+ul.mw-gallery-packed-hover li.gallerybox,
+ul.mw-gallery-packed-overlay li.gallerybox {
+    margin: 0 !important;
+}
+ul.mw-gallery-packed li.gallerybox div.thumb {
+    background: #fff !important;
+}
+@media (max-width: 600px) {
+    ul.gallery {
+        gap: 8px;
+    }
+    li.gallerybox .gallerytext {
+        font-size: 0.75em;
+    }
 }
 /* ===== Breadcrumb ===== */
 .mw-parser-output > small:first-of-type,
-.mw-parser-output > p > small:first-child:last-child {
+.mw-parser-output > p:first-of-type > small:first-child {
      display: block;
      margin: 0 0 0.9em;
@@ Line 249: / Line 437: @@
 }
 .mw-parser-output > small:first-of-type a,
-.mw-parser-output > p > small:first-child:last-child a {
+.mw-parser-output > p:first-of-type > small:first-child a {
      color: #1b5e3b;
      font-weight: 600;
 }
 .mw-parser-output > small:first-of-type b,
-.mw-parser-output > p > small:first-child:last-child b {
+.mw-parser-output > p:first-of-type > small:first-child b {
      color: #1b3a2d;
 }

MediaWiki:Common.css: Difference between revisions