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 - MediaWiki Citizen Skin Customization v2
* Targets the actual Citizen skin class structure.
*/
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap');
:root {
--mf-brown: #844725;
--mf-brown-light: #8b7355;
--mf-brown-hover: #a0603a;
--mf-parchment: #e8ddc4;
--mf-cream: #ede2c6;
--mf-dark-bg: #131417;
--mf-text-light: #eaeaea;
}
html.skin-citizen-dark, html[data-citizen-theme="dark"], .skin-citizen {
--color-surface-0: #131417;
--color-surface-1: #1a1a1e;
--color-surface-2: #222226;
--color-surface-3: #2a2a2e;
--color-surface-4: #383838;
--color-base: #eaeaea;
--color-base--emphasized: #f8f8f8;
--color-base--subtle: #b0b0b0;
--color-primary: #844725;
--color-primary--hover: #a0603a;
--color-primary--active: #6b3a1f;
--color-link: #8b7355;
--color-link--hover: #a0603a;
--color-link--active: #844725;
--color-link-new: #c44;
--font-family-base: "Crimson Text", Georgia, "Times New Roman", serif;
--font-family-heading: "Crimson Text", Georgia, serif;
}
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: #844725;
--color-link--hover: #6b3a1f;
}
.citizen-header { background-color: var(--mf-dark-bg); }
.citizen-drawer__logo img { max-height: 65px; }
.citizen-drawer__card {
background-color: #111111;
border-right: 1px solid #2a2a2e;
}
.citizen-drawer__header { border-bottom: 1px solid #2a2a2e; }
.citizen-drawer__menu a {
color: var(--mf-cream);
font-family: "Crimson Text", Georgia, serif;
transition: color 0.2s ease;
}
.citizen-drawer__menu a:hover { color: var(--mf-brown-light); }
.citizen-drawer__sitetitle {
font-family: "Crimson Text", Georgia, serif;
color: #f6f6f6;
}
.mw-page-title-main, .firstHeading, #firstHeading {
font-family: "Crimson Text", Georgia, serif !important;
color: #f8f8f8 !important;
font-weight: 700;
letter-spacing: 0.5px;
}
.mw-heading h2, .mw-body-content h2, #mw-content-text h2 {
color: var(--mf-brown) !important;
font-family: "Crimson Text", Georgia, serif;
border-bottom: 1px solid rgba(132, 71, 37, 0.3);
padding-bottom: 6px;
}
.mw-heading h3, .mw-body-content h3, #mw-content-text h3 {
color: var(--mf-brown) !important;
font-family: "Crimson Text", Georgia, serif;
}
.mw-heading h4, .mw-body-content h4 {
color: var(--mf-brown-light) !important;
font-family: "Crimson Text", Georgia, serif;
}
.mw-body-content p, .mw-body-content li, .mw-body-content dd {
line-height: 1.85;
}
.mw-body-content a:not(.cdx-button):not(.citizen-dropdown-summary),
#mw-content-text a:not(.cdx-button) {
color: var(--mf-brown-light);
transition: color 0.2s ease;
}
.mw-body-content a:not(.cdx-button):hover,
#mw-content-text a:not(.cdx-button):hover {
color: var(--mf-brown-hover);
}
.mw-body-content a.new { color: #c44 !important; }
.citizen-toc__card { background-color: var(--color-surface-1, #1a1a1e); }
.citizen-toc a { color: var(--mf-cream); font-size: 13px; }
.citizen-toc a:hover { color: var(--mf-brown-light); }
.citizen-toc .citizen-toc__link--active {
color: var(--mf-brown) !important;
font-weight: 600;
}
.citizen-search__card {
background-color: var(--color-surface-2, #222226);
border: 1px solid #494949;
}
.citizen-search input { color: #f1f1f1; }
.citizen-search input::placeholder { color: rgba(255, 255, 255, 0.5); }
.citizen-search .citizen-typeahead-option--active,
.citizen-search .citizen-typeahead-option:hover {
background-color: rgba(132, 71, 37, 0.15);
}
.wikitable {
background-color: #1a1a1e;
color: var(--mf-text-light);
border: 1px solid #3a3a3e;
border-collapse: collapse;
}
.wikitable th {
background-color: rgba(132, 71, 37, 0.2);
color: #f8f8f8;
border: 1px solid #3a3a3e;
padding: 10px 12px;
font-weight: 600;
}
.wikitable td { border: 1px solid #3a3a3e; padding: 8px 12px; }
.wikitable tr:nth-child(even) { background-color: #1e1e22; }
.wikitable tr:hover { background-color: rgba(132, 71, 37, 0.08); }
.infobox {
background-color: #1a1a1e;
border: 1px solid var(--mf-brown);
border-radius: 4px;
}
.infobox-title {
background-color: var(--mf-brown);
color: #fff;
padding: 10px 15px;
font-family: "Crimson Text", Georgia, serif;
font-size: 20px;
font-weight: 700;
text-align: center;
}
.infobox-image img { max-width: 100%; border-radius: 2px; }
.infobox th {
background-color: rgba(132, 71, 37, 0.15);
color: var(--mf-cream);
padding: 6px 12px;
text-align: right;
width: 40%;
font-weight: 600;
}
.infobox td { padding: 6px 12px; color: var(--mf-text-light); }
.mw-category-group h3 { color: var(--mf-brown); }
.citizen-footer {
background-color: #111111;
border-top: 1px solid #2a2a2e;
}
.citizen-footer a { color: var(--mf-brown-light); }
.citizen-footer a:hover { color: var(--mf-brown-hover); }
.citizen-footer__sitetitle { font-family: "Crimson Text", Georgia, serif; }
textarea, .mw-editfont-monospace {
background-color: #1a1a1e;
color: var(--mf-text-light);
border: 1px solid #494949;
}
.cdx-button--action-progressive {
--cdx-color-progressive: var(--mf-brown);
--cdx-color-progressive--hover: var(--mf-brown-hover);
--cdx-color-progressive--active: #6b3a1f;
}
@media (max-width: 768px) {
.mw-page-title-main, .firstHeading { font-size: 28px !important; }
.infobox { float: none !important; width: 100% !important; margin: 1em 0 !important; }
}