MediaWiki:Common.css: Difference between revisions

Latest revision as of 01:29, 5 September 2026

/* Rolexopedia — clean reference site with deep green accents */

/* ===== Typography ===== */
body, .mw-body, .mw-body-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    color: #1a1a1a;
}
/* Override Vector 2022's 0.875rem (14px) body text */
.vector-body,
.mw-parser-output,
.mw-body-content {
    font-size: 1rem !important;
}
/* Tighten paragraph spacing */
.mw-body-content p {
    margin: 0.4em 0;
}

/* ===== Page title ===== */
.mw-page-title-main,
.mw-first-heading,
.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;
    letter-spacing: -0.03em;
    line-height: 1.1;
    border-bottom: none !important;
    color: #1b3a2d;
    margin-bottom: 0.2em;
}
/* Vector draws a grey hairline under the title bar via ::after; the
   breadcrumb + spacing does that job here. */
.vector-page-titlebar::after,
.mw-body-header::after {
    display: none !important;
}

/* ===== Headings — sans, deep green, light rule ===== */
.mw-body-content h2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-bottom: 1px solid #d4e0d8;
    padding-bottom: 0.25em;
    margin-top: 1.4em;
    margin-bottom: 0.4em;
    color: #1b3a2d;
}

.mw-body-content h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.2em;
    font-weight: 650;
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 1.1em;
    margin-bottom: 0.25em;
    color: #1b3a2d;
}

.mw-body-content h4 {
    margin-top: 0.6em;
    margin-bottom: 0.15em;
}

/* ===== Links — dark green ===== */
.mw-body-content a:not(.new) {
    color: #1b5e3b;
    text-decoration: none;
}
.mw-body-content a:not(.new):hover {
    color: #0f3d25;
    text-decoration: underline;
}
.mw-body-content a.new {
    color: #b33;
}

/* ===== Header bar — light with green accent ===== */
.vector-header,
.mw-header {
    background: #f7f9f7 !important;
    border-bottom: 2px solid #2d5e3f !important;
}
/* Site name — dark green */
.mw-logo-wordmark {
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    color: #1b3a2d !important;
}
.vector-header a {
    color: #1b3a2d !important;
}
.vector-header a:hover {
    color: #0f3d25 !important;
}

/* ===== Search box ===== */
.vector-search-box-input {
    border-radius: 6px !important;
    border: 1px solid #c8d6cc !important;
}
.vector-search-box-input:focus {
    border-color: #2d5e3f !important;
    box-shadow: 0 0 0 1px #2d5e3f33 !important;
}

/* ===== Content area — centered, TOC as left sidebar ===== */
/* Let Vector 2022 keep its grid but widen + center it */
.mw-page-container {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 1em !important;
}
.mw-body {
    padding: 0.8em 0;
}
/* Disable the limited-width feature that offsets content */
.vector-feature-limited-width-clientpref-1 .mw-content-container,
.vector-feature-limited-width-content-enabled .mw-content-container {
    max-width: none !important;
}
/* Header centered */
.vector-header-container {
    max-width: 1240px !important;
    margin: 0 auto !important;
}

/* ===== TOC sidebar — clean, no overlap ===== */
.vector-column-start {
    width: 200px !important;
    min-width: 200px !important;
}
/* Prevent TOC from overlapping content */
.vector-toc {
    position: sticky;
    top: 1em;
}
.vector-sidebar-container-no-toc ~ .mw-content-container {
    margin-left: 0 !important;
}

/* ===== Tables — horizontal rules only, rounded frame ===== */
.wikitable {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d4e0d8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    font-size: 0.92em;
    margin: 0.6em 0 1em;
}
.wikitable th {
    background: #eef3ef;
    font-weight: 600;
    font-size: 0.82em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.55em 0.9em;
    border: none;
    border-bottom: 1px solid #d4e0d8;
    text-align: left;
    color: #2f5541;
    vertical-align: bottom;
}
.wikitable td {
    padding: 0.5em 0.9em;
    border: none;
    border-bottom: 1px solid #eef3ef;
    vertical-align: top;
}
.wikitable tr:last-child td {
    border-bottom: none;
}
.wikitable tr:nth-child(even) td {
    background: #fafcfa;
}

/* Core-facts table on reference pages: key/value card. The class is set
   by import_reference.py and by the 2026-09-05 backfill pass. */
.wikitable.rp-facts {
    width: auto;
    min-width: min(100%, 480px);
    max-width: 640px;
    font-size: 0.95em;
}
.wikitable.rp-facts td:first-child {
    white-space: nowrap;
}
.wikitable.rp-facts th {
    display: none;
}
.wikitable.rp-facts td:first-child {
    width: 32%;
    font-size: 0.8em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #5a7a63;
    font-weight: 600;
    background: #f7faf8 !important;
    padding-top: 0.7em;
}
.wikitable.rp-facts td:last-child {
    font-weight: 500;
    color: #1a1a1a;
    background: #fff !important;
}

/* ===== Images ===== */
.thumb {
    border: none !important;
    background: none !important;
}
.thumbinner,
figure[typeof~="mw:File/Thumb"],
figure[typeof~="mw:File/Frame"] {
    border: 1px solid #d4e0d8 !important;
    border-radius: 8px;
    background: #fafcfa !important;
    padding: 6px !important;
    overflow: hidden;
}
figure[typeof~="mw:File/Thumb"] > a > img,
figure[typeof~="mw:File/Frame"] > a > img {
    border-radius: 4px;
    background: #fff;
}
.thumbcaption,
figure[typeof~="mw:File/Thumb"] > figcaption,
figure[typeof~="mw:File/Frame"] > figcaption {
    font-size: 0.82em;
    color: #5a6b60;
    padding: 6px 4px 2px;
    line-height: 1.4;
}

/* ===== Breadcrumb ===== */
.mw-parser-output > small:first-of-type,
.mw-parser-output > p:first-of-type > small:first-child {
    display: block;
    margin: 0 0 0.9em;
    font-size: 0.82em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #5a7a63;
}
.mw-parser-output > small:first-of-type 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:first-of-type > small:first-child b {
    color: #1b3a2d;
}

/* ===== TOC — dark green links ===== */
.vector-toc {
    font-size: 0.88em;
    border-left: 1px solid #e3ebe5;
    padding-left: 0.8em !important;
}
.vector-toc .vector-pinnable-header-label {
    color: #5a7a63 !important;
    font-size: 0.8em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.vector-toc a,
.vector-toc .vector-toc-link,
.vector-toc-text,
.sidebar-toc a,
.sidebar-toc .sidebar-toc-link {
    color: #1b5e3b !important;
}
.vector-toc a:hover,
.vector-toc .vector-toc-link:hover,
.sidebar-toc a:hover {
    color: #0f3d25 !important;
}
/* Active TOC item */
.vector-toc .vector-toc-list-item-active > .vector-toc-link,
.sidebar-toc .sidebar-toc-list-item-active > a {
    color: #1b3a2d !important;
    font-weight: 600;
}

/* ===== Categories ===== */
#catlinks {
    background: #f3f7f4;
    border: 1px solid #d4e0d8;
    border-radius: 4px;
    padding: 0.5em 1em;
    font-size: 0.85em;
    margin-top: 1.2em;
}

/* ===== Strip wiki UI ===== */

/* Hide "Reference:" namespace prefix from h1 on Reference pages.
   Wiki URL stays /wiki/Reference:5513; visible h1 is just "5513".
   ns-3000 = NS_REFERENCE (custom namespace defined in LocalSettings.php). */
body.ns-3000 .mw-page-title-namespace,
body.ns-3000 .mw-page-title-separator {
    display: none !important;
}

/* Hide Discussion tab */
#ca-talk,
li#ca-talk {
    display: none !important;
}

/* Hide View history */
#ca-history,
li#ca-history {
    display: none !important;
}

/* Hide "Read" tab (redundant) */
#ca-view,
li#ca-view {
    display: none !important;
}

/* Hide "Reference" / namespace tab label — title is enough */
#ca-nstab-reference,
#ca-nstab-main,
li#ca-nstab-reference,
li#ca-nstab-main {
    display: none !important;
}

/* Hide View source for logged-out */
body:not(.mw-user-logged-in) #ca-viewsource,
body:not(.mw-user-logged-in) li#ca-viewsource {
    display: none !important;
}

/* Clean up tab bar */
.vector-page-toolbar {
    border-bottom: none !important;
}
nav.vector-menu-tabs {
    border-bottom: none !important;
}
.mw-body .vector-page-toolbar-container {
    border-bottom: none !important;
}

/* Hide Tools dropdown */
#vector-page-tools {
    display: none !important;
}
/* Hide the entire page toolbar row (empty after removing all tabs) */
.vector-page-toolbar {
    display: none !important;
}

/* Hide "Create account" */
body:not(.mw-user-logged-in) #pt-createaccount,
body:not(.mw-user-logged-in) li#pt-createaccount {
    display: none !important;
}

/* Hide categories for anonymous */
body:not(.mw-user-logged-in) #catlinks {
    display: none !important;
}

/* Hide sidebar hamburger for anonymous */
body:not(.mw-user-logged-in) .vector-main-menu-landmark {
    display: none !important;
}

/* ===== Footer — minimal ===== */
#footer {
    border-top: 1px solid #d4e0d8;
    text-align: center;
    padding: 1em 0;
    color: #999;
    font-size: 0.82em;
}
#footer-info-copyright {
    display: none;
}
#footer-places {
    display: none;
}
#footer-icons {
    display: none;
}

/* ===== External links ===== */
.mw-parser-output a.external {
    background: none !important;
    padding-right: 0 !important;
}
.mw-parser-output a.external::after {
    content: " \2197";
    font-size: 0.75em;
    color: #999;
}

/* ===== Lists ===== */
.mw-body-content ul, .mw-body-content ol {
    margin: 0.3em 0;
    padding-left: 1.5em;
}
.mw-body-content li {
    margin: 0.15em 0;
}

/* ===== Remove extra spacing from pandoc span anchors ===== */
/* Only target empty span anchors, not headline spans */
.mw-body-content > span[id]:empty,
.mw-body-content p + span[id]:empty {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

/* ===== Reference-page sections ===== */
/* Sources footer: long external-link list → two quiet columns. */
.mw-body-content h2:has(> #Sources) ~ ul {
    columns: 2;
    column-gap: 2.5em;
    font-size: 0.88em;
    color: #444;
    padding-left: 1.2em;
}
.mw-body-content h2:has(> #Sources) ~ ul li {
    break-inside: avoid;
    margin: 0 0 0.35em;
}
/* Related references: link + one-line gloss, as a light list. */
.mw-body-content h2:has(> #Related_references) + ul,
.mw-body-content h2:has(> #Related_references) + p + ul {
    list-style: none;
    padding: 0;
    margin: 0.4em 0 1em;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4em 1.4em;
}
.mw-body-content h2:has(> #Related_references) + ul li,
.mw-body-content h2:has(> #Related_references) + p + ul li {
    padding: 0.45em 0;
    border-top: 1px solid #eef3ef;
    font-size: 0.95em;
    line-height: 1.45;
}
@media (max-width: 720px) {
    .mw-body-content h2:has(> #Sources) ~ ul {
        columns: 1;
    }
    .mw-body-content h2:has(> #Related_references) + ul,
    .mw-body-content h2:has(> #Related_references) + p + ul {
        grid-template-columns: 1fr;
    }
}
/* Sub-family / era wrapper headings on family pages read better with air. */
.mw-body-content h2 + p {
    margin-top: 0.5em;
}

/* ===== Blockquotes ===== */
.mw-body-content blockquote {
    border-left: 3px solid #2d5e3f;
    margin: 0.6em 0;
    padding: 0.5em 1em;
    color: #444;
    font-style: italic;
}

/* ===== Responsive tables (mobile) ===== */
/* The multi-column serial-range and generation grids are wider than a phone
   screen, which made the whole page scroll horizontally (content-wider-than-
   screen — a mobile-usability fail under mobile-first indexing). Below the
   tablet breakpoint, let a wide table scroll inside its own box instead of
   pushing the page. display:block is what makes overflow-x take effect on a
   <table>; desktop layout is untouched. */
@media (max-width: 720px) {
    .mw-parser-output .wikitable {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================================
   Main Page — layout system (classes prefixed rp-). Scoped so article
   pages are unaffected. Grid falls back to one column on phones.
   ===================================================================== */
body.page-Main_Page .mw-first-heading,
body.page-Main_Page .vector-page-titlebar,
body.page-Main_Page #siteSub,
body.page-Main_Page .vector-body-before-content,
body.page-Main_Page #contentSub {
    display: none !important;
}
body.page-Main_Page .mw-body {
    padding-top: 0;
}
body.page-Main_Page .mw-body-content h2 {
    border-bottom: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.45em;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 2em 0 0.7em;
    padding: 0;
}
body.page-Main_Page .mw-body-content h2 .mw-editsection {
    display: none;
}

/* Hero */
.rp-hero {
    padding: 2.2em 0 1.8em;
    border-bottom: 1px solid #e3ebe5;
}
.rp-hero-title {
    font-size: 2.6em;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: #1b3a2d;
    margin: 0 0 0.35em;
}
.rp-hero-lede {
    font-size: 1.15em;
    line-height: 1.55;
    max-width: 62ch;
    color: #2b2b2b;
}
.rp-hero-lede p {
    margin: 0 0 0.6em !important;
}
.rp-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2.2em;
    margin-top: 1.4em;
}
.rp-stat b {
    display: block;
    font-size: 1.7em;
    font-weight: 700;
    color: #1b3a2d;
    line-height: 1.1;
}
.rp-stat span {
    font-size: 0.85em;
    color: #5a7a63;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Eyebrow label */
.rp-eyebrow {
    display: block;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5a7a63;
    margin-bottom: 0.3em;
}

/* Card grid */
.rp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1em;
    margin: 0.6em 0 0.4em;
}
.rp-grid.rp-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rp-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #d4e0d8;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.rp-card:hover {
    border-color: #9fb8a8;
    box-shadow: 0 8px 22px rgba(27, 58, 45, 0.12);
    transform: translateY(-2px);
}
.rp-card-img {
    aspect-ratio: 4 / 3;
    background: #f3f7f4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.rp-card-img a,
.rp-card-img span {
    display: block;
    width: 100%;
    height: 100%;
}
.rp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.rp-card-img.rp-cover img {
    object-fit: cover;
}
.rp-card-img.rp-cover-top img {
    object-position: center top;
}
.rp-card-body {
    padding: 0.85em 1em 1em;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}
.rp-card-title {
    font-size: 1.1em;
    font-weight: 700;
    color: #1b3a2d;
    line-height: 1.2;
}
.rp-card-title a {
    color: #1b3a2d !important;
}
.rp-card-meta {
    font-size: 0.82em;
    color: #5a7a63;
}
.rp-card-text {
    font-size: 0.92em;
    color: #333;
    line-height: 1.45;
}
.rp-card-text p {
    margin: 0 !important;
}

/* Featured (from the archive) */
.rp-featured {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.6em;
    align-items: center;
    padding: 1.4em;
    border: 1px solid #d4e0d8;
    border-radius: 10px;
    background: #fff;
}
.rp-featured-img {
    aspect-ratio: 1 / 1;
    background: #f3f7f4;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.rp-featured-img a,
.rp-featured-img span {
    display: block;
    width: 100%;
    height: 100%;
}
.rp-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.rp-featured-title {
    font-size: 1.5em;
    font-weight: 700;
    color: #1b3a2d;
    letter-spacing: -0.01em;
    margin-bottom: 0.4em;
}
.rp-featured-body {
    font-size: 1em;
    line-height: 1.55;
}
.rp-featured-body p {
    margin: 0 0 0.6em !important;
}
.rp-button {
    display: inline-block;
    margin-top: 0.4em;
    padding: 0.5em 1em;
    border-radius: 6px;
    background: #1b5e3b;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.92em;
    text-decoration: none !important;
}
.rp-button a,
.rp-button a:not(.new) {
    color: #fff !important;
    text-decoration: none !important;
}
.rp-button:hover {
    background: #0f3d25;
}

/* Reference index — one block per family, eras as rows, refs as chips */
.rp-index {
    border: 1px solid #d4e0d8;
    border-radius: 10px;
    background: #fff;
    padding: 1em 1.2em 0.6em;
    margin: 0 0 0.9em;
}
.rp-index-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    margin-bottom: 0.4em;
}
.rp-index-title {
    font-size: 1.15em;
    font-weight: 700;
    color: #1b3a2d;
}
.rp-index-title a {
    color: #1b3a2d !important;
}
.rp-index-more {
    font-size: 0.85em;
    white-space: nowrap;
}
.rp-era {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 0.3em 1em;
    padding: 0.55em 0;
    border-top: 1px solid #eef3ef;
    align-items: start;
}
.rp-era-name {
    font-size: 0.92em;
    font-weight: 600;
    color: #1b3a2d;
    line-height: 1.3;
}
.rp-era-name small {
    display: block;
    font-weight: 400;
    color: #5a7a63;
    font-size: 0.88em;
}
.rp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
}
.rp-chips a {
    display: inline-block;
    padding: 0.18em 0.65em;
    border: 1px solid #cfdcd3;
    border-radius: 999px;
    background: #f7faf8;
    font-size: 0.88em;
    line-height: 1.5;
    color: #1b5e3b !important;
    text-decoration: none !important;
    transition: background 0.1s ease, color 0.1s ease;
}
.rp-chips a:hover {
    background: #1b5e3b;
    border-color: #1b5e3b;
    color: #fff !important;
}

/* Recently updated */
.rp-recent ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}
.rp-recent li {
    padding: 0.55em 0;
    border-top: 1px solid #eef3ef;
    margin: 0 !important;
    line-height: 1.6;
}
.rp-recent li:last-child {
    border-bottom: 1px solid #eef3ef;
}
.rp-recent li b {
    display: inline-block;
    min-width: 9.5em;
    color: #5a7a63;
    font-weight: 600;
    font-size: 0.85em;
    letter-spacing: 0.02em;
}

/* Footnote */
.rp-footnote {
    margin-top: 2.5em;
    padding-top: 1em;
    border-top: 1px solid #e3ebe5;
    font-size: 0.85em;
    color: #666;
}

@media (max-width: 960px) {
    .rp-grid,
    .rp-grid.rp-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .rp-featured {
        grid-template-columns: 200px minmax(0, 1fr);
    }
}
@media (max-width: 600px) {
    .rp-hero-title {
        font-size: 2em;
    }
    .rp-grid,
    .rp-grid.rp-grid-4 {
        grid-template-columns: 1fr;
    }
    .rp-featured {
        grid-template-columns: 1fr;
    }
    .rp-era {
        grid-template-columns: 1fr;
        gap: 0.25em;
    }
    .rp-recent li b {
        display: block;
        min-width: 0;
    }
}