MediaWiki:Common.css
MediaWiki interface page
More actions
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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*
* Menhirs Fate Wiki - Citizen Skin Customization v3
* Closely matches EazyDocs (menhirsfate.com/wiki) design
* while retaining full Citizen functionality and accessibility.
*/
/* ─── FONT ─────────────────────────────────────────────────────────────────── */
/* Scala Sans is the EazyDocs font — use a close system fallback */
/* ─── DARK MODE (default, matches EazyDocs) ────────────────────────────────── */
html.skin-citizen-dark,
html[data-citizen-theme="dark"],
.skin-citizen {
/* Surface colors - matched to EazyDocs #111111 base */
--color-surface-0: #111111;
--color-surface-1: #161618;
--color-surface-2: #1c1c1f;
--color-surface-3: #242427;
--color-surface-4: #2c303a;
/* Text - HIGH CONTRAST for accessibility */
--color-base: #eaeaea;
--color-base--emphasized: #f6f6f6;
--color-base--subtle: #9daab6;
/* Primary accent - brown from MF brand, used sparingly */
--color-primary: #844725;
--color-primary--hover: #a0603a;
--color-primary--active: #6b3a1f;
/* Links - warm gold, high contrast on dark bg */
--color-link: #d4b896;
--color-link--hover: #e8d0b0;
--color-link--active: #c4a070;
--color-link-new: #e06060;
/* Font - Scala Sans approximation */
--font-family-base: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-family-heading: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* ─── LIGHT MODE ───────────────────────────────────────────────────────────── */
html.skin-citizen-light,
html[data-citizen-theme="light"] {
--color-surface-0: #f5f0e8;
--color-surface-1: #ebe5da;
--color-surface-2: #e0d8cc;
--color-surface-3: #d4c9b0;
--color-surface-4: #c8bca4;
--color-base: #1a1a1e;
--color-base--emphasized: #111;
--color-base--subtle: #555;
--color-primary: #844725;
--color-primary--hover: #a0603a;
--color-link: #6b3a1f;
--color-link--hover: #844725;
}
/* ─── HEADINGS (brown accent — large enough to be readable) ────────────────── */
.mw-page-title-main,
.firstHeading,
#firstHeading {
color: var(--color-base--emphasized) !important;
font-weight: 600;
letter-spacing: 0.3px;
}
.mw-heading h2,
.mw-body-content h2,
#mw-content-text h2 {
color: #844725 !important;
font-weight: 600;
font-size: 1.6em;
border-bottom: 1px solid #844725;
padding-bottom: 6px;
margin-top: 1.5em;
}
.mw-heading h3,
.mw-body-content h3,
#mw-content-text h3 {
color: #844725 !important;
font-weight: 600;
font-size: 1.3em;
margin-top: 1.3em;
}
.mw-heading h4,
.mw-body-content h4 {
color: #a0603a !important;
font-weight: 600;
}
/* ─── BODY TEXT — matches EazyDocs sizing ──────────────────────────────────── */
.mw-body-content p,
.mw-body-content li,
.mw-body-content dd {
font-size: 1.05rem;
line-height: 1.9;
}
/* ─── DRAWER (left sidebar) ────────────────────────────────────────────────── */
.citizen-drawer__card {
background-color: #111111;
}
.citizen-drawer__menu a {
transition: color 0.2s ease, background-color 0.2s ease;
}
.citizen-drawer__menu a:hover {
color: #d4b896;
}
/* ─── TABLE OF CONTENTS — blue-grey like EazyDocs right sidebar ────────────── */
.citizen-toc a {
color: #9daab6;
font-size: 0.85rem;
transition: color 0.2s ease;
}
.citizen-toc a:hover {
color: #d4b896;
}
.citizen-toc .citizen-toc__link--active {
color: #844725 !important;
font-weight: 600;
}
.citizen-toc__top a {
color: #9daab6;
}
/* ─── SEARCH — pill-shaped like EazyDocs filter ────────────────────────────── */
.citizen-search__card {
border-radius: 20px;
overflow: hidden;
}
.citizen-search input {
color: #f8f8f8;
}
.citizen-search input::placeholder {
color: rgba(255, 255, 255, 0.45);
}
/* Search result hover */
.citizen-typeahead-option--active,
.citizen-typeahead-option:hover {
background-color: rgba(212, 184, 150, 0.1) !important;
}
/* ─── WIKITABLE — dark theme ──────────────────────────────────────────────── */
.wikitable {
background-color: #161618;
color: #eaeaea;
border: 1px solid #333;
border-collapse: collapse;
}
.wikitable th {
background-color: rgba(132, 71, 37, 0.2);
color: #f6f6f6;
border: 1px solid #333;
padding: 10px 12px;
font-weight: 600;
}
.wikitable td {
border: 1px solid #333;
padding: 8px 12px;
}
.wikitable tr:nth-child(even) {
background-color: #1c1c1f;
}
.wikitable tr:hover {
background-color: rgba(212, 184, 150, 0.06);
}
/* ─── INFOBOX ─────────────────────────────────────────────────────────────── */
.infobox {
background-color: #161618;
border: 1px solid #844725;
border-radius: 4px;
}
.infobox-title {
background-color: #844725;
color: #fff;
padding: 10px 15px;
font-size: 1.15em;
font-weight: 700;
text-align: center;
}
.infobox th {
background-color: rgba(132, 71, 37, 0.15);
color: #ede2c6;
padding: 6px 12px;
text-align: right;
width: 40%;
font-weight: 600;
}
.infobox td {
padding: 6px 12px;
}
/* ─── CATEGORY TAGS ───────────────────────────────────────────────────────── */
.mw-category-group h3 {
color: #844725;
}
/* ─── FOOTER ──────────────────────────────────────────────────────────────── */
.citizen-footer {
background-color: #111111;
border-top: 1px solid #242427;
}
.citizen-footer a {
color: #d4b896;
}
.citizen-footer a:hover {
color: #e8d0b0;
}
/* ─── EDIT INTERFACE ──────────────────────────────────────────────────────── */
textarea,
.mw-editfont-monospace {
background-color: #1c1c1f;
color: #eaeaea;
border: 1px solid #333;
}
/* ─── BUTTONS — brown brand accent ────────────────────────────────────────── */
.cdx-button--action-progressive {
--cdx-color-progressive: #844725;
--cdx-color-progressive--hover: #a0603a;
--cdx-color-progressive--active: #6b3a1f;
}
/* ─── RED LINKS (missing pages) ───────────────────────────────────────────── */
.mw-body-content a.new {
color: #e06060 !important;
}
/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.mw-page-title-main,
.firstHeading {
font-size: 1.6em !important;
}
.infobox {
float: none !important;
width: 100% !important;
margin: 1em 0 !important;
}
}
/* ─── NATION GRID BACKGROUND IMAGES ────────────────────────────────────────── */
.nation-avereaux { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/11/DSC02283-684x1024.jpg'); }
.nation-wonder { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/11/DSC02033-684x1024.jpg'); }
.nation-valdraeth { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/11/DSC02067-684x1024.jpg'); }
.nation-portavas { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/11/MF_13_IntroRules-684x1024.jpg'); }
.nation-hammerstadt { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/11/MF_11_DamageGameEffects-681x1024.jpg'); }
.nation-urdrevan { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/10/DSC03197-684x1024.jpg'); }
.nation-kairos { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/10/DSC02402-684x1024.jpg'); }
.nation-syradonia { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/10/DSC02552-684x1024.jpg'); }
.nation-morvalis { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/10/DSC02441-684x1024.jpg'); }