MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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;
}
}