MediaWiki:Common.css: Difference between revisions

Latest revision as of 16:53, 26 May 2026

/*
 * United Vinland Wiki — Custom Theme
 * Colonial/Federal period aesthetic: navy blue, antique gold, parchment
 */

/* === Color Variables === */
:root {
  --uv-navy: #0a1f3f;
  --uv-navy-light: #132d54;
  --uv-gold: #c5a44e;
  --uv-gold-light: #d4b96a;
  --uv-parchment: #f5f0e6;
  --uv-parchment-dark: #e8e0d0;
  --uv-brown: #2c1810;
  --uv-brown-light: #5c3a2e;
  --uv-cream: #faf7f0;
}

/* === Page Background === */
body {
  background-color: var(--uv-parchment-dark);
}

/* === Content Area & All Inner Containers === */
.mw-body,
.mw-page-container,
.mw-page-container-inner,
.mw-content-container,
.vector-body,
.vector-column-start,
.vector-column-end,
.vector-body-before-content,
.vector-sitenotice-container,
#content,
#bodyContent,
#mw-content-text,
.mw-parser-output,
.mw-body-content {
  background-color: var(--uv-parchment);
  color: var(--uv-brown);
}

.mw-body {
  border: 1px solid var(--uv-gold);
}

/* === Sidebar column background === */
.vector-column-start {
  background-color: var(--uv-parchment) !important;
}

/* === Pinnable containers (TOC sidebar, tools, etc.) === */
.vector-pinned-container,
.vector-main-menu-container,
.vector-toc-pinned-container {
  background-color: var(--uv-parchment) !important;
}

/* === Appearance/settings dropdown === */
.vector-appearance,
.vector-pinnable-header,
.vector-dropdown-content {
  background-color: var(--uv-cream);
  border-color: var(--uv-gold);
}

/* === Site Title / Logo === */
.mw-logo-wordmark,
.vector-menu-heading,
.mw-wiki-title {
  color: var(--uv-gold) !important;
  font-family: Georgia, 'Times New Roman', serif;
}

/* === Header Bar (Vector 2022) === */
.vector-header,
.vector-sticky-header,
.mw-header {
  background-color: var(--uv-parchment) !important;
  border-bottom: 2px solid var(--uv-gold);
}

.vector-header a,
.vector-sticky-header a {
  color: var(--uv-navy) !important;
}

.vector-header a:hover,
.vector-sticky-header a:hover {
  color: var(--uv-gold) !important;
}

/* === Sidebar === */
.vector-main-menu,
.vector-sidebar,
.mw-sidebar,
.vector-column-start .vector-main-menu {
  background-color: var(--uv-navy);
}

.vector-main-menu a,
.vector-sidebar a,
.mw-sidebar a {
  color: var(--uv-parchment) !important;
}

.vector-main-menu a:hover,
.vector-sidebar a:hover,
.mw-sidebar a:hover {
  color: var(--uv-gold) !important;
}

.vector-main-menu .vector-menu-heading,
.vector-sidebar .vector-menu-heading {
  color: var(--uv-gold) !important;
  font-family: Georgia, 'Times New Roman', serif;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--uv-gold);
  padding-bottom: 4px;
}

/* === Content Headings === */
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6,
#firstHeading {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--uv-navy);
}

#firstHeading {
  font-size: 2em;
  border-bottom: 3px solid var(--uv-gold);
  padding-bottom: 6px;
}

.mw-body-content h2 {
  border-bottom: 2px solid var(--uv-gold);
  padding-bottom: 4px;
}

.mw-body-content h3 {
  border-bottom: 1px solid var(--uv-gold-light);
  padding-bottom: 3px;
}

/* === Links === */
.mw-body-content a:not(.new) {
  color: var(--uv-navy);
  text-decoration-color: var(--uv-gold-light);
}

.mw-body-content a:not(.new):hover {
  color: var(--uv-navy-light);
  text-decoration-color: var(--uv-gold);
}

.mw-body-content a:visited:not(.new) {
  color: var(--uv-brown-light);
}

.mw-body-content a.new {
  color: #8b0000;
}

/* === Infobox (Character Template) === */
.infobox {
  background-color: var(--uv-cream);
  border: 2px solid var(--uv-gold);
  border-collapse: collapse;
  margin: 0 0 1em 1.5em;
  font-size: 0.9em;
}

.infobox th,
.infobox .infobox-header {
  background-color: var(--uv-navy);
  color: var(--uv-gold);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.1em;
  padding: 8px 12px;
  text-align: center;
  border: 1px solid var(--uv-gold);
}

.infobox td {
  padding: 5px 10px;
  border: 1px solid var(--uv-parchment-dark);
}

.infobox .infobox-label {
  background-color: var(--uv-parchment-dark);
  font-weight: bold;
  color: var(--uv-navy);
  width: 35%;
}

.infobox .infobox-data {
  background-color: var(--uv-cream);
}

/* === Table of Contents === */
.toc,
.toccolours {
  background-color: var(--uv-cream);
  border: 1px solid var(--uv-gold);
  padding: 10px;
}

.toc h2,
.toc .toctitle {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--uv-navy);
}

.toc a {
  color: var(--uv-navy);
}

.toc a:hover {
  color: var(--uv-gold);
}

/* Vector 2022 TOC sidebar — hidden */
.vector-toc,
.vector-toc-pinned-container,
#vector-toc-pinned-container,
.vector-column-end {
  display: none !important;
}

/* === Category Links Bar === */
.catlinks {
  background-color: var(--uv-cream);
  border: 1px solid var(--uv-gold);
  padding: 8px 12px;
  margin-top: 1.5em;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.9em;
}

.catlinks a {
  color: var(--uv-navy);
}

.catlinks a:hover {
  color: var(--uv-gold);
}

/* === Tables (general) === */
.wikitable {
  background-color: var(--uv-cream);
  border: 1px solid var(--uv-gold);
}

.wikitable th {
  background-color: var(--uv-navy);
  color: var(--uv-gold);
  font-family: Georgia, 'Times New Roman', serif;
  border: 1px solid var(--uv-gold);
  padding: 6px 10px;
}

.wikitable td {
  border: 1px solid var(--uv-parchment-dark);
  padding: 5px 8px;
}

/* === Search Box === */
.vector-search-box input[type="search"],
.vector-search-box-input {
  background-color: var(--uv-cream);
  border: 1px solid var(--uv-gold);
  color: var(--uv-brown);
}

.vector-search-box input[type="search"]:focus,
.vector-search-box-input:focus {
  border-color: var(--uv-gold-light);
  box-shadow: 0 0 4px rgba(197, 164, 78, 0.3);
}

/* === Footer === */
.vector-footer,
#footer {
  background-color: var(--uv-navy);
  color: var(--uv-parchment);
  border-top: 2px solid var(--uv-gold);
}

.vector-footer a,
#footer a {
  color: var(--uv-gold-light) !important;
}

.vector-footer a:hover,
#footer a:hover {
  color: var(--uv-gold) !important;
}

/* === Tabs (Actions: Read / Edit / History) === */
.vector-menu-tabs a {
  color: var(--uv-navy) !important;
}

.vector-menu-tabs a:hover {
  color: var(--uv-gold) !important;
}

.vector-menu-tabs .selected a {
  color: var(--uv-navy) !important;
  border-bottom: 2px solid var(--uv-gold);
}

/* === Body text tuning === */
.mw-body-content {
  font-size: 0.95em;
  line-height: 1.65;
}

/* === Remove Vector 2022 fade/gradient borders === */
.vector-main-menu::after,
.vector-main-menu-container::after,
.vector-toc::after,
.vector-toc-pinned-container::after,
.vector-column-start::after,
.vector-pinned-container::after,
.vector-sticky-pinned-container::after,
.vector-sidebar::after,
.mw-panel::after {
  display: none !important;
}

.vector-main-menu,
.vector-main-menu-container,
.vector-toc,
.vector-toc-pinned-container,
.vector-column-start,
.vector-pinned-container,
.vector-sticky-pinned-container,
.vector-sidebar,
.mw-panel {
  box-shadow: none !important;
  border-image: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  background-color: var(--uv-parchment) !important;
  border: none !important;
}

/* === Decorative flourish on page title === */
#firstHeading::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--uv-gold);
  margin-top: 4px;
}

/* === Responsive Infobox === */
.infobox {
  float: right;
  width: auto;
  min-width: 160px;
  max-width: 250px;
  padding: 6px;
  font-size: 0.85em;
}

@media screen and (max-width: 720px) {
  .infobox {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1em 0;
    font-size: 0.85em;
  }
}

/* Hide duplicate logo icon */
.mw-logo-icon { display: none !important; }

/* Shrink header logo */
.mw-logo-wordmark { max-width: 86px; max-height: 60px; }