MediaWiki:Common.css
Jump to navigation
Jump to search
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.
/* CSS placed here will be applied to all skins */
/* ============================================================
Transmissible brand styling for FemWiki
------------------------------------------------------------
Paste this into MediaWiki:Common.css
URL: https://femwiki.org/index.php?title=MediaWiki:Common.css
(You must be logged in as a sysop / administrator to edit it.)
============================================================ */
/* ---------- Fonts ----------
Rubik is loaded from Google Fonts (free).
Avenir is proprietary; Nunito Sans is the free fallback.
To swap in real Avenir later, replace the @import line below
with your Adobe Fonts kit URL and update the body font-family. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;700&family=Nunito+Sans:wght@500;700;800&display=swap');
/* ---------- Brand tokens ---------- */
:root {
--tm-blue: #2780ad; /* core blue */
--tm-blue-dark: #1f6588; /* hover / visited */
--tm-green: #62c465; /* core green */
--tm-green-soft: #c6ebbe; /* extended */
--tm-bg-pale: #e6f7ff; /* core pale blue background */
--tm-bg-mint: #e4fde1; /* extended pale green */
--tm-accent-blue: #b2e2ff; /* extended light blue */
--tm-accent-yel: #f4f2b5; /* extended pale yellow */
--tm-ink: #2a2d34; /* core near-black for text */
--tm-grey: #70747a; /* extended grey */
}
/* ---------- Base typography ---------- */
body,
.mw-body,
#mw-content-text,
#bodyContent {
font-family: 'Avenir Next', 'Avenir', 'Nunito Sans', system-ui, -apple-system, sans-serif;
font-weight: 500;
color: var(--tm-ink);
background-color: white;
line-height: 1.55;
}
/* Strong/bold elements use the heavier Avenir/Nunito weight */
strong, b, .subtitle {
font-weight: 800;
}
/* All headings: Rubik */
h1, h2, h3, h4, h5, h6,
#firstHeading,
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-heading {
font-family: 'Rubik', system-ui, sans-serif;
font-weight: 500;
color: var(--tm-ink);
}
#firstHeading,
.mw-body h1 {
border-bottom: 2px solid var(--tm-blue);
padding-bottom: 0.3em;
margin-bottom: 0.6em;
}
.mw-body h2 {
border-bottom: 1px solid var(--tm-green-soft);
padding-bottom: 0.2em;
}
/* ---------- Page chrome (Vector legacy) ---------- */
/* The strip behind the top bar */
#mw-page-base {
background: var(--tm-bg-pale);
background-image: none;
}
/* The dark strip immediately above the content */
#mw-head-base {
background-color: var(--tm-blue);
border-bottom: 3px solid var(--tm-green);
}
#mw-head {
background-color: var(--tm-blue);
}
/* Personal tools (login / your username, top right) */
#p-personal ul li a,
#p-personal ul li a:link {
color: white;
}
#p-personal ul li a:hover {
color: var(--tm-bg-pale);
text-decoration: underline;
}
/* Page action tabs: Read / Edit / View history etc. */
.vector-menu-tabs,
.vectorTabs {
background: transparent;
}
.vector-menu-tabs li,
.vector-menu-tabs li a,
.vectorTabs li a {
background-image: none;
background-color: transparent;
color: white;
}
.vector-menu-tabs li.selected,
.vectorTabs li.selected {
background-color: white;
}
.vector-menu-tabs li.selected a,
.vectorTabs li.selected a {
color: var(--tm-blue-dark);
}
.vector-menu-tabs li a:hover {
color: var(--tm-bg-pale);
}
/* ---------- Sidebar ---------- */
#mw-panel {
background: transparent;
}
#mw-panel .portal h3,
#mw-panel .vector-menu-heading {
font-family: 'Rubik', system-ui, sans-serif;
color: var(--tm-blue-dark);
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 500;
}
#mw-panel .portal .body a,
#mw-panel .vector-menu-content a {
color: var(--tm-blue);
}
#mw-panel .portal .body a:hover {
color: var(--tm-blue-dark);
text-decoration: underline;
}
/* ---------- Content area ---------- */
#content,
.mw-body {
border: 1px solid var(--tm-accent-blue);
background-color: white;
border-radius: 4px;
}
/* ---------- Readable body text (Wikipedia-matched, 15px) ---------- */
.mw-body,
.mw-body-content,
#mw-content-text,
#bodyContent {
font-size: 15px;
line-height: 1.6;
}
/* Keep the page title proportionally sized */
#firstHeading,
.mw-body h1 {
font-size: 1.8em;
}
.mw-body h2 { font-size: 1.5em; }
.mw-body h3 { font-size: 1.2em; }
.mw-body h4 { font-size: 1.1em; }
/* ---------- Links ---------- */
a,
a:link {
color: var(--tm-blue);
text-decoration: none;
}
a:visited {
color: var(--tm-blue-dark);
}
a:hover {
color: var(--tm-blue-dark);
text-decoration: underline;
}
/* Red (missing-page) links stay red — MediaWiki convention */
a.new,
a.new:visited {
color: #b32424;
}
/* External links */
a.external,
a.extiw {
color: var(--tm-blue);
}
/* ---------- Search box ---------- */
#searchInput,
#simpleSearch input[type="search"] {
border: 1px solid var(--tm-accent-blue);
border-radius: 3px;
padding: 0.35em 0.6em;
font-family: inherit;
}
#searchInput:focus {
border-color: var(--tm-blue);
outline: 2px solid var(--tm-accent-blue);
outline-offset: 0;
}
#searchButton,
#mw-searchButton {
background-color: var(--tm-blue);
}
/* ---------- Buttons & form submits ---------- */
.mw-ui-button,
input[type="submit"],
input[type="button"],
button.cdx-button,
button.mw-ui-button {
background-color: var(--tm-blue);
color: white;
border: 1px solid var(--tm-blue-dark);
border-radius: 3px;
padding: 0.45em 0.95em;
font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
font-weight: 700;
cursor: pointer;
}
.mw-ui-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
background-color: var(--tm-blue-dark);
color: white;
}
.mw-ui-button.mw-ui-progressive,
.cdx-button--action-progressive {
background-color: var(--tm-green);
border-color: #4ea552;
color: white;
}
.mw-ui-button.mw-ui-progressive:hover {
background-color: #4ea552;
}
/* ---------- Tables ---------- */
table.wikitable {
border: 1px solid var(--tm-accent-blue);
background-color: white;
border-collapse: collapse;
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
background-color: var(--tm-bg-pale);
color: var(--tm-ink);
border: 1px solid var(--tm-accent-blue);
font-family: 'Rubik', sans-serif;
font-weight: 500;
}
table.wikitable > tr > td,
table.wikitable > * > tr > td {
border: 1px solid var(--tm-accent-blue);
}
/* ---------- TOC, infoboxes, callouts ---------- */
.toc,
.toccolours {
background-color: var(--tm-bg-pale);
border: 1px solid var(--tm-accent-blue);
border-radius: 4px;
}
.toctitle h2 {
font-family: 'Rubik', sans-serif;
color: var(--tm-blue-dark);
border: none;
}
/* MediaWiki standard message boxes */
.warningbox,
.mw-message-box-warning {
background-color: var(--tm-accent-yel);
border: 1px solid #c4c269;
color: var(--tm-ink);
}
.successbox,
.mw-message-box-success {
background-color: var(--tm-bg-mint);
border: 1px solid var(--tm-green);
color: var(--tm-ink);
}
.messagebox,
.mw-message-box-notice {
background-color: var(--tm-bg-pale);
border: 1px solid var(--tm-accent-blue);
color: var(--tm-ink);
}
.errorbox,
.mw-message-box-error {
background-color: #fde7e7;
border: 1px solid #d33;
color: var(--tm-ink);
}
/* ---------- Code blocks ---------- */
code,
pre,
.mw-code,
tt {
background-color: var(--tm-bg-pale);
border: 1px solid var(--tm-accent-blue);
border-radius: 3px;
font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', 'Courier New', monospace;
padding: 0.1em 0.3em;
}
pre,
.mw-code {
padding: 0.8em 1em;
overflow-x: auto;
}
/* ---------- Blockquotes ---------- */
blockquote {
border-left: 4px solid var(--tm-green);
background-color: var(--tm-bg-pale);
padding: 0.6em 1em;
margin: 1em 0;
color: var(--tm-ink);
font-style: italic;
}
/* ---------- Footer ---------- */
#footer,
#mw-footer {
background: var(--tm-bg-pale);
border-top: 3px solid var(--tm-green);
color: var(--tm-grey);
font-size: 0.85em;
}
#footer a,
#mw-footer a {
color: var(--tm-blue-dark);
}
/* ---------- Category navigation at page bottom ---------- */
#catlinks,
.catlinks {
background-color: var(--tm-bg-mint);
border: 1px solid var(--tm-green-soft);
border-radius: 4px;
padding: 0.4em 0.6em;
}
/* ---------- "Powered by MediaWiki" — keep, just tone ---------- */
#footer-poweredbyico img,
#footer-copyrightico img {
opacity: 0.7;
}