MediaWiki:Common.css: Difference between revisions

Revision as of 22:43, 13 July 2026

/* ===== Rumba Congolaise wiki — theme after frameinframe.nyc ===== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto+Condensed:wght@400;500;700&display=swap');

:root {
	--maroon:      #4a0e11;
	--maroon-dark: #2b0a0d;
	--ivory:       #f3ece0;
	--mint:        #45b87d;
	--mint-soft:   #8fcfa8;

	/* Override Vector-2022 / Codex design tokens so every component (TOC,
	   buttons, sidebar panels) inherits the theme instead of staying white. */
	--background-color-base: var(--maroon-dark) !important;
	--background-color-base-fixed: var(--maroon-dark) !important;
	--background-color-neutral: var(--maroon-dark) !important;
	--background-color-neutral-subtle: var(--maroon-dark) !important;
	--background-color-interactive: var(--maroon-dark) !important;
	--background-color-interactive-subtle: var(--maroon-dark) !important;
	--background-color-progressive-subtle: var(--maroon-dark) !important;
	--background-color-disabled: var(--maroon-dark) !important;
	--color-base: var(--mint) !important;
	--color-emphasized: var(--ivory) !important;
	--color-subtle: var(--mint-soft) !important;
	--color-disabled: var(--mint-soft) !important;
	--border-color-base: var(--mint) !important;
	--border-color-muted: var(--mint) !important;
	--border-color-subtle: var(--mint) !important;
	--border-color-interactive: var(--mint) !important;
}

html { background-color: var(--maroon) !important; }

/* Belt-and-suspenders: components with hardcoded (non-token) white boxes */
.vector-pinnable-element,
.vector-menu-content-list,
#toc, .vector-toc, .vector-toc-contents, .vector-toc-list,
.sidebar-toc, .cdx-button, .cdx-text-input__input {
	background-color: var(--maroon-dark) !important;
	color: var(--mint) !important;
	border-color: var(--mint) !important;
	box-shadow: none !important;
}
.vector-toc-text, .vector-toc-level-1-to-2 { color: var(--mint) !important; }

body,
.mw-page-container,
.mw-body,
#content,
.vector-body,
.mw-body-content {
	background-color: var(--maroon) !important;
	color: var(--mint) !important;
	font-family: 'Roboto Condensed', 'Segoe UI', Arial, sans-serif !important;
	font-weight: 400;
}

#content p,
#content li,
#content dd,
#content dt,
#content td,
#content th,
.mw-body-content p,
.mw-body-content li {
	color: var(--mint) !important;
	font-family: 'Roboto Condensed', 'Segoe UI', Arial, sans-serif !important;
	font-weight: 400;
}

/* Headings — bold condensed display face, like the wordmark */
h1, h2, h3, h4, h5, h6,
.firstHeading,
#firstHeading {
	font-family: 'Anton', 'Arial Narrow', sans-serif !important;
	color: var(--ivory) !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.firstHeading, #firstHeading { border-bottom: 3px solid var(--mint); padding-bottom: 0.2em; }

/* Site title / logo area, echoing the wordmark treatment */
.mw-logo-wordmark, #p-logo-text, .mw-logo-container {
	font-family: 'Anton', 'Arial Narrow', sans-serif !important;
	color: var(--ivory) !important;
	text-transform: uppercase;
}

/* Links */
a, a:visited { color: var(--mint) !important; font-weight: 700 !important; }
a:hover, a:focus { color: var(--mint-soft) !important; text-decoration: underline; }
a.new, a.new:visited { color: #c98a4a !important; }

/* Nav / sidebar / header bars — the darker maroon band, like the top nav */
#mw-panel, .vector-menu-content, .mw-portlet,
.mw-header, .vector-header, #p-logo,
.vector-pinnable-header {
	background-color: var(--maroon-dark) !important;
}
.vector-menu-heading, .mw-portlet-body h3 {
	font-family: 'Anton', 'Arial Narrow', sans-serif !important;
	color: var(--ivory) !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.vector-menu-content a, #mw-panel a { color: var(--mint) !important; font-weight: 500 !important; }

/* Page tab bars (Main Page/Discussion, Read/Edit/Edit source/View history) —
   these are also .vector-menu-content internally, so un-set the dark band
   the rule above gives them; blend into the page background instead. */
#left-navigation, #right-navigation,
#left-navigation .vector-menu-content, #right-navigation .vector-menu-content,
#p-namespaces, #p-views, #p-cactions {
	background-color: transparent !important;
}

/* Right-hand column (Tools / General / Appearance) — same treatment,
   blend into the page background instead of the darker band. */
.vector-column-end,
#vector-page-tools, #vector-appearance,
#p-tb, #p-cactions,
.vector-column-end .vector-menu-content,
.vector-column-end .mw-portlet {
	background-color: transparent !important;
}

/* Tables — Cargo output, wikitables */
table.wikitable, table.cargoTable, table.cargoDynamicTableFormat {
	background-color: var(--maroon-dark) !important;
	border: 2px solid var(--mint) !important;
	color: var(--mint) !important;
}
/* NOTE: prefixed with #content so specificity beats the generic
   "#content th { color: mint }" rule above — otherwise header labels
   render as mint-on-mint (invisible), since ID beats class regardless
   of !important or source order when specificity differs. */
#content table.wikitable th, #content table.cargoTable th,
#content table[style*="float:right"] th {
	font-family: 'Anton', 'Arial Narrow', sans-serif !important;
	background-color: var(--mint) !important;
	color: var(--maroon-dark) !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
table.wikitable td, table.cargoTable td { border-color: var(--mint) !important; }

/* Infoboxes from Group/Artist/Album/Place/Label templates */
table[style*="float:right"] { border: 2px solid var(--mint) !important; }

/* Category strip */
#catlinks {
	background-color: var(--maroon-dark) !important;
	color: var(--mint) !important;
	border-color: var(--mint) !important;
}

/* Footer — blend into the page background, no dark band */
#footer, .mw-footer {
	background-color: transparent !important;
	color: var(--mint) !important;
	border-color: var(--mint) !important;
}