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 v4
* Fixes: light mode, image sizing, nation grid
*/
/* ─── DARK MODE (default, matches EazyDocs) ────────────────────────────────── */
html.skin-citizen-dark,
html[data-citizen-theme="dark"],
.skin-citizen {
--color-surface-0: #111111;
--color-surface-1: #161618;
--color-surface-2: #1c1c1f;
--color-surface-3: #242427;
--color-surface-4: #2c303a;
--color-base: #eaeaea;
--color-base--emphasized: #f6f6f6;
--color-base--subtle: #9daab6;
--color-primary: #844725;
--color-primary--hover: #a0603a;
--color-primary--active: #6b3a1f;
--color-link: #d4b896;
--color-link--hover: #e8d0b0;
--color-link--active: #c4a070;
--color-link-new: #e06060;
--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 — parchment theme ─────────────────────────────────────────── */
html[data-citizen-theme="light"],
html.skin-citizen-light {
--color-surface-0: #f5f0e8 !important;
--color-surface-1: #ebe5da !important;
--color-surface-2: #e0d8cc !important;
--color-surface-3: #d4c9b8 !important;
--color-surface-4: #c8bca4 !important;
--color-base: #1a1a1e !important;
--color-base--emphasized: #111111 !important;
--color-base--subtle: #555555 !important;
--color-primary: #844725 !important;
--color-primary--hover: #a0603a !important;
--color-primary--active: #6b3a1f !important;
--color-link: #6b3a1f !important;
--color-link--hover: #844725 !important;
--color-link--active: #4a2810 !important;
--color-link-new: #cc3333 !important;
}
/* Force light mode backgrounds on body/main surfaces */
html[data-citizen-theme="light"] body,
html[data-citizen-theme="light"] .citizen-body,
html[data-citizen-theme="light"] .citizen-header,
html[data-citizen-theme="light"] .citizen-footer {
background-color: #f5f0e8 !important;
color: #1a1a1e !important;
}
html[data-citizen-theme="light"] .citizen-drawer__card {
background-color: #ebe5da !important;
}
html[data-citizen-theme="light"] .citizen-drawer__menu a {
color: #1a1a1e !important;
}
html[data-citizen-theme="light"] .citizen-drawer__menu a:hover {
color: #844725 !important;
}
html[data-citizen-theme="light"] .mw-heading h2,
html[data-citizen-theme="light"] .mw-body-content h2,
html[data-citizen-theme="light"] #mw-content-text h2 {
color: #844725 !important;
border-bottom-color: #844725;
}
html[data-citizen-theme="light"] .mw-heading h3,
html[data-citizen-theme="light"] .mw-body-content h3 {
color: #844725 !important;
}
html[data-citizen-theme="light"] .wikitable {
background-color: #ebe5da;
color: #1a1a1e;
border-color: #c8bca4;
}
html[data-citizen-theme="light"] .wikitable th {
background-color: rgba(132, 71, 37, 0.15);
color: #1a1a1e;
border-color: #c8bca4;
}
html[data-citizen-theme="light"] .wikitable td {
border-color: #c8bca4;
}
html[data-citizen-theme="light"] .citizen-toc a {
color: #555 !important;
}
html[data-citizen-theme="light"] .citizen-toc a:hover {
color: #844725 !important;
}
html[data-citizen-theme="light"] .citizen-toc .citizen-toc__link--active {
color: #844725 !important;
}
html[data-citizen-theme="light"] .citizen-search__card {
background-color: #ebe5da !important;
}
html[data-citizen-theme="light"] .citizen-search input {
color: #1a1a1e !important;
}
html[data-citizen-theme="light"] .citizen-search input::placeholder {
color: rgba(0, 0, 0, 0.4);
}
html[data-citizen-theme="light"] .infobox {
background-color: #ebe5da;
}
html[data-citizen-theme="light"] .infobox th {
color: #1a1a1e;
}
/* ─── HEADINGS (brown accent) ──────────────────────────────────────────────── */
.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 ─────────────────────────────────────────────────────────────── */
.mw-body-content p, .mw-body-content li, .mw-body-content dd {
font-size: 1.05rem;
line-height: 1.9;
}
/* ─── IMAGE SIZING — constrain external images ─────────────────────────────── */
.mw-body-content img:not(.mw-file-element):not([class*="citizen"]):not([class*="oo-ui"]) {
max-width: 350px;
max-height: 450px;
height: auto;
width: auto;
object-fit: cover;
border-radius: 6px;
float: right;
margin: 0 0 1em 1.5em;
}
/* Images inside gallery or grid should not float */
.mw-body-content .nation-grid img,
.mw-body-content .gallery img {
float: none !important;
margin: 0 !important;
max-width: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 0;
}
/* ─── NATION IMAGE GRID ────────────────────────────────────────────────────── */
.nation-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 1.5em 0;
max-width: 900px;
}
.nation-grid-item {
position: relative;
overflow: hidden;
border-radius: 8px;
aspect-ratio: 2/3;
background: #1c1c1f;
}
.nation-grid-item a {
display: block;
width: 100%;
height: 100%;
text-decoration: none !important;
position: relative;
}
.nation-grid-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
transition: transform 0.3s ease, filter 0.3s ease;
max-width: none !important;
max-height: none !important;
float: none !important;
margin: 0 !important;
border-radius: 0 !important;
}
.nation-grid-item:hover img {
transform: scale(1.05);
filter: brightness(0.8);
}
.nation-grid-item .nation-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px;
background: linear-gradient(transparent, rgba(0,0,0,0.75));
color: #f6f6f6;
font-size: 1.1rem;
font-weight: 600;
font-style: italic;
text-align: center;
pointer-events: none;
}
@media (max-width: 600px) {
.nation-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ─── 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 ────────────────────────────────────────────────────── */
.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 ───────────────────────────────────────────────────────────────── */
.citizen-search__card {
border-radius: 20px;
overflow: hidden;
}
.citizen-search input {
color: #f8f8f8;
}
.citizen-search input::placeholder {
color: rgba(255, 255, 255, 0.45);
}
.citizen-typeahead-option--active,
.citizen-typeahead-option:hover {
background-color: rgba(212, 184, 150, 0.1) !important;
}
/* ─── WIKITABLE ────────────────────────────────────────────────────────────── */
.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 ──────────────────────────────────────────────────────────────── */
.cdx-button--action-progressive {
--cdx-color-progressive: #844725;
--cdx-color-progressive--hover: #a0603a;
--cdx-color-progressive--active: #6b3a1f;
}
/* ─── RED LINKS ────────────────────────────────────────────────────────────── */
.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; }
.mw-body-content img:not(.mw-file-element):not([class*="citizen"]):not([class*="oo-ui"]) {
float: none;
display: block;
margin: 1em auto !important;
max-width: 100%;
}
}