MediaWiki:Common.css: Difference between revisions

Latest revision as of 05:12, 22 June 2026

/* ==========================================================================
   AKKA Game Studios — wiki theme
   Cosmic Editorial palette + Fraunces/Inter typography matching akkadev.games.
   Skin: Vector 2022. Edit in MediaWiki:Common.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap');

:root {
  --akka-bg:           #060810;
  --akka-bg-deep:      #04050b;
  --akka-surface:      #121826;
  --akka-surface-2:    #1b2d5a;
  --akka-line:         #1d2334;
  --akka-line-bright:  #2d3548;
  --akka-text:         #f4eed7;
  --akka-text-mute:    #7c8aa5;
  --akka-text-faint:   #4d5468;
  --akka-accent:       #fdcd08;
  --akka-accent-blue:  #286de3;
  --akka-cta-hi:       #3d7ee8;
  --akka-cta-lo:       #165cb7;
  --akka-display:      'Fraunces', 'Bodoni Moda', Georgia, serif;
  --akka-smcp:         'Space Grotesk', sans-serif;
  --akka-body:         'Inter', system-ui, -apple-system, sans-serif;
}

/* Global body --------------------------------------------------------- */
html, body { background: var(--akka-bg); }
body {
  color: var(--akka-text);
  font-family: var(--akka-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.mw-page-container,
.mw-page-container-inner,
body.skin-vector-2022 .mw-page-container { background: transparent; }

/* Header (top bar) ---------------------------------------------------- */
.vector-header-container,
.vector-header {
  background: var(--akka-bg-deep) !important;
  border-bottom: 1px solid var(--akka-line);
  color: var(--akka-text);
}

/* Logo: img element. content: trick to swap source via CSS only. */
.mw-logo-wordmark,
.mw-logo .mw-logo-wordmark {
  color: var(--akka-text) !important;
  font-family: var(--akka-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mw-logo-container.skin-invert { filter: none; }

/* Header text + icons */
.vector-header a,
.vector-header-end a,
.vector-header .cdx-button { color: var(--akka-text-mute); }
.vector-header a:hover,
.vector-header .cdx-button:hover { color: var(--akka-text); }

/* Icons — make them inherit text color so they show up on dark bg.
   Vector 2022 uses CSS masks with background-color for icons. MW default is
   dark which becomes invisible against our dark header. */
.vector-icon,
.mw-ui-icon-element,
[class*="mw-ui-icon-"] { background-color: currentColor !important; }
.cdx-icon { color: inherit; fill: currentColor; }
.cdx-button .cdx-icon { fill: currentColor; }

/* Search input */
.cdx-text-input__input,
.vector-search-box input {
  background: var(--akka-surface);
  color: var(--akka-text);
  border-color: var(--akka-line-bright);
}
.cdx-text-input__input::placeholder { color: var(--akka-text-faint); }

/* Sidebar / main menu (vector-2022 left rail) ------------------------- */
.vector-main-menu-container,
.vector-main-menu,
.vector-pinnable-element { background: var(--akka-bg-deep); border-color: var(--akka-line); }
.vector-main-menu-link, .vector-menu a, .mw-portlet a { color: var(--akka-text-mute); }
.vector-main-menu-link:hover, .vector-menu a:hover, .mw-portlet a:hover { color: var(--akka-text); background: var(--akka-surface); }
.vector-main-menu h3,
.mw-portlet-label,
.vector-menu-heading {
  color: var(--akka-accent);
  font-family: var(--akka-smcp);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 700;
}

/* Main content card --------------------------------------------------- */
.mw-body,
.mw-body-content {
  background: var(--akka-surface);
  color: var(--akka-text);
  border-radius: 14px;
  border: 1px solid var(--akka-line);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.mw-body-header { border-bottom: 1px solid var(--akka-line); padding-bottom: 0.75rem; margin-bottom: 1rem; }

/* Headings ------------------------------------------------------------ */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
#firstHeading {
  font-family: var(--akka-display);
  color: var(--akka-text);
  font-weight: 500;
  letter-spacing: -0.02em;
  border-color: var(--akka-line);
}
#firstHeading { font-size: clamp(2rem, 4vw, 2.6rem); }
.mw-body h2 { font-size: 1.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--akka-line); }
.mw-body h3 { font-size: 1.25rem; }

/* Body text ----------------------------------------------------------- */
.mw-body p, .mw-body li, .mw-body dt, .mw-body dd { color: var(--akka-text); }
.mw-body p { margin: 0 0 1rem; }

/* Links --------------------------------------------------------------- */
.mw-body a, .mw-parser-output a { color: var(--akka-accent-blue); }
.mw-body a:hover, .mw-parser-output a:hover { color: var(--akka-accent); text-decoration: underline; }
.mw-body a.new, .mw-parser-output a.new { color: #ff8c42 !important; }
.mw-body a.external::after { display: none; }

/* Page tabs (Read/Edit/View history/Tools) — Vector 2022.
   The skin defines selected tabs with high-specificity rules + !important
   that target a.mw-list-item__link and similar nested selectors. We use
   body.skin-vector-2022 prefix and target both possible link patterns. */
body.skin-vector-2022 .vector-menu-tabs li,
body.skin-vector-2022 .vector-menu-tabs li a,
body.skin-vector-2022 .vector-menu-tabs li a:visited,
body.skin-vector-2022 li.vector-tab-noicon,
body.skin-vector-2022 li.vector-tab-noicon a,
body.skin-vector-2022 li.vector-tab-noicon a:visited,
body.skin-vector-2022 li.vector-tab-noicon a.mw-list-item__link,
body.skin-vector-2022 li.vector-tab-noicon.selected a,
body.skin-vector-2022 li.vector-tab-noicon.selected a:visited,
body.skin-vector-2022 li.vector-tab-noicon.selected a.mw-list-item__link,
body.skin-vector-2022 .vector-page-toolbar a,
body.skin-vector-2022 .vector-page-toolbar .cdx-tab,
body.skin-vector-2022 .cdx-tab,
body.skin-vector-2022 .cdx-tab a {
  color: var(--akka-text) !important;
  background: transparent !important;
}
body.skin-vector-2022 li.vector-tab-noicon a:hover,
body.skin-vector-2022 .cdx-tab:hover { color: var(--akka-accent) !important; }
body.skin-vector-2022 li.selected.vector-tab-noicon,
body.skin-vector-2022 .vector-menu-tabs li.selected {
  border-bottom: 2px solid var(--akka-accent) !important;
}
body.skin-vector-2022 li.selected.vector-tab-noicon a,
body.skin-vector-2022 .vector-menu-tabs li.selected a {
  font-weight: 600 !important;
}
/* Red links for missing pages stay distinct */
body.skin-vector-2022 li.new.vector-tab-noicon a,
body.skin-vector-2022 li.new.vector-tab-noicon a:visited,
body.skin-vector-2022 li.new.vector-tab-noicon a.mw-list-item__link { color: #ff8c42 !important; }

/* Buttons ------------------------------------------------------------- */
.cdx-button.cdx-button--action-progressive,
.cdx-button--action-progressive {
  background: linear-gradient(180deg, var(--akka-cta-hi) 0%, var(--akka-cta-lo) 100%) !important;
  color: #fff !important;
  border-color: var(--akka-cta-lo) !important;
}
.cdx-button--weight-quiet { color: var(--akka-text-mute); background: transparent; }
.cdx-button--weight-quiet:hover { color: var(--akka-text); background: var(--akka-surface); }

/* Tables -------------------------------------------------------------- */
.mw-body table, .wikitable {
  background: var(--akka-surface-2);
  color: var(--akka-text);
  border-color: var(--akka-line-bright);
}
.wikitable th { background: var(--akka-bg-deep); color: var(--akka-accent); border-color: var(--akka-line-bright); }
.wikitable td, .wikitable th { border-color: var(--akka-line); }

/* Code blocks --------------------------------------------------------- */
code, pre {
  background: var(--akka-bg-deep);
  color: var(--akka-text);
  border: 1px solid var(--akka-line);
  border-radius: 6px;
  font-family: 'Space Grotesk', monospace;
}

/* TOC ----------------------------------------------------------------- */
.toc, .mw-pt-translate-header { background: var(--akka-surface-2); border: 1px solid var(--akka-line); border-radius: 10px; }

/* Footer -------------------------------------------------------------- */
.mw-footer-container,
#footer,
.mw-footer {
  background: var(--akka-bg-deep);
  color: var(--akka-text-mute);
  border-top: 1px solid var(--akka-line);
}
.mw-footer a { color: var(--akka-accent-blue); }
.mw-footer a:hover { color: var(--akka-accent); }

/* "Powered by MediaWiki" badge — invert + dim */
.mw-footer .noprint a img,
#footer .noprint a img,
.mw-footer-icons img {
  filter: invert(1) hue-rotate(180deg) brightness(0.85);
  opacity: 0.55;
  transition: opacity 140ms ease;
}
.mw-footer .noprint a:hover img,
.mw-footer-icons:hover img { opacity: 0.95; }

/* Edit mode form ------------------------------------------------------ */
#wpTextbox1 {
  background: var(--akka-bg-deep);
  color: var(--akka-text);
  border: 1px solid var(--akka-line-bright);
  font-family: 'Space Grotesk', monospace;
}

/* Misc ---------------------------------------------------------------- */
hr { border-color: var(--akka-line); }
.mw-indicators { color: var(--akka-text-mute); }
.mw-jump-link { color: var(--akka-accent-blue); }

/* Dropdown labels acting as fake buttons (Tools dropdown, TOC toggle, etc.).
   These are LABEL elements with cdx-button classes — vendor sets dark color
   that doesn't fall through our .cdx-button selectors. */
body.skin-vector-2022 label.cdx-button,
body.skin-vector-2022 label.vector-dropdown-label,
body.skin-vector-2022 .vector-page-titlebar label,
body.skin-vector-2022 .vector-page-titlebar .vector-icon,
body.skin-vector-2022 .vector-toc-collapse-button,
body.skin-vector-2022 .vector-toc-pinnable-header label,
body.skin-vector-2022 .vector-page-toolbar label,
body.skin-vector-2022 .vector-dropdown-label-text {
  color: var(--akka-text) !important;
}
body.skin-vector-2022 label.cdx-button:hover,
body.skin-vector-2022 label.vector-dropdown-label:hover,
body.skin-vector-2022 .vector-page-titlebar label:hover { color: var(--akka-accent) !important; }

/* Dropdown chevron arrows — these are ::after pseudo-elements using a CSS
   mask + dark background-color. Make them inherit current color. */
body.skin-vector-2022 .vector-dropdown-label::after,
body.skin-vector-2022 .cdx-button::after,
body.skin-vector-2022 .cdx-button--has-icon::before,
body.skin-vector-2022 [class*="cdx-button"]::after {
  background-color: currentColor !important;
}

/* Sticky header (appears when page is scrolled) — Vector 2022 has a separate
   #vector-sticky-header inner element with default white background that our
   .vector-header rule doesn't reach. Make it match the main header. */
body.skin-vector-2022 #vector-sticky-header,
body.skin-vector-2022 .vector-sticky-header {
  background: var(--akka-bg-deep) !important;
  color: var(--akka-text) !important;
  border-bottom: 1px solid var(--akka-line) !important;
}
body.skin-vector-2022 #vector-sticky-header a,
body.skin-vector-2022 .vector-sticky-header a,
body.skin-vector-2022 .vector-sticky-header .cdx-button { color: var(--akka-text-mute) !important; }
body.skin-vector-2022 #vector-sticky-header a:hover,
body.skin-vector-2022 .vector-sticky-header a:hover,
body.skin-vector-2022 .vector-sticky-header .cdx-button:hover { color: var(--akka-text) !important; }
body.skin-vector-2022 #vector-sticky-search-form {
  background: var(--akka-surface) !important;
}
body.skin-vector-2022 #vector-sticky-search-form input {
  background: var(--akka-surface) !important;
  color: var(--akka-text) !important;
  border-color: var(--akka-line-bright) !important;
}

/* Floating fake-button labels (TOC index, Tools menu, etc.) — kill the white default bg */
body.skin-vector-2022 label.cdx-button--fake-button,
body.skin-vector-2022 label.cdx-button--fake-button--enabled,
body.skin-vector-2022 .vector-dropdown-label.cdx-button,
body.skin-vector-2022 .vector-page-titlebar-toc label,
body.skin-vector-2022 .vector-page-titlebar .cdx-button,
body.skin-vector-2022 .vector-page-toolbar .cdx-button,
body.skin-vector-2022 .vector-sticky-header .cdx-button,
body.skin-vector-2022 .vector-sticky-header label.cdx-button {
  background: transparent !important;
  border-color: var(--akka-line) !important;
  color: var(--akka-text) !important;
}
body.skin-vector-2022 label.cdx-button--fake-button:hover,
body.skin-vector-2022 .vector-dropdown-label.cdx-button:hover,
body.skin-vector-2022 .vector-page-titlebar .cdx-button:hover,
body.skin-vector-2022 .vector-sticky-header .cdx-button:hover {
  background: var(--akka-surface) !important;
  border-color: var(--akka-line-bright) !important;
  color: var(--akka-accent) !important;
}
/* Vector dropdown panels (open menu content under TOC/Tools/User) — was white */
body.skin-vector-2022 .vector-dropdown-content,
body.skin-vector-2022 .vector-menu-dropdown,
body.skin-vector-2022 .vector-unpinned-container {
  background: var(--akka-bg-deep) !important;
  border: 1px solid var(--akka-line) !important;
  color: var(--akka-text) !important;
}
/* Pinnable-header pin/unpin buttons inside floating menus — were light gray */
body.skin-vector-2022 .vector-pinnable-header-toggle-button,
body.skin-vector-2022 .vector-toc-collapse-button,
body.skin-vector-2022 .vector-toc-toggle {
  background: transparent !important;
  color: var(--akka-text-mute) !important;
}
body.skin-vector-2022 .vector-pinnable-header-toggle-button:hover,
body.skin-vector-2022 .vector-toc-collapse-button:hover,
body.skin-vector-2022 .vector-toc-toggle:hover {
  background: var(--akka-surface) !important;
  color: var(--akka-text) !important;
}

/* Categories bar at page bottom — was white */
body.skin-vector-2022 .catlinks,
body.skin-vector-2022 #catlinks {
  background: var(--akka-bg-deep) !important;
  border: 1px solid var(--akka-line) !important;
  color: var(--akka-text-mute) !important;
}
body.skin-vector-2022 .catlinks a,
body.skin-vector-2022 #catlinks a { color: var(--akka-accent-blue) !important; }
body.skin-vector-2022 .catlinks a.new,
body.skin-vector-2022 #catlinks a.new { color: #ff8c42 !important; }

/* Docked sidebar wrappers (when viewport is wide enough that sidebars pin instead of float) */
body.skin-vector-2022 .vector-pinned-container {
  background: var(--akka-bg-deep) !important;
  border: 1px solid var(--akka-line) !important;
  color: var(--akka-text) !important;
}
/* TOC entry links inside the docked Contents panel */
body.skin-vector-2022 .vector-toc-link,
body.skin-vector-2022 .vector-toc a {
  color: var(--akka-accent-blue) !important;
  background: transparent !important;
}
body.skin-vector-2022 .vector-toc-link:hover,
body.skin-vector-2022 .vector-toc a:hover {
  color: var(--akka-accent) !important;
}
body.skin-vector-2022 .vector-toc-list-item-active > .vector-toc-link {
  color: var(--akka-accent) !important;
  font-weight: 600 !important;
}
/* Section sub-headings inside docked panels (ACTIONS, GENERAL, TEXT, WIDTH, COLOR) */

/* Small section sub-headings inside docked panels (ACTIONS, GENERAL on Tools; TEXT, WIDTH, COLOR (BETA) on Appearance).
   Important: scope tightly so radio labels (Small/Standard/Large/Wide/etc.) are not affected. */
body.skin-vector-2022 .vector-menu-heading,
body.skin-vector-2022 .mw-portlet-label,
body.skin-vector-2022 .vector-pinned-container > .cdx-label,
body.skin-vector-2022 .vector-pinned-container .cdx-field > .cdx-label {
  color: var(--akka-accent) !important;
  font-family: var(--akka-smcp);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700 !important;
}
/* Make sure radio labels (Small/Standard/Large/Wide/Standard/Wide/Automatic/Light) stay normal */
body.skin-vector-2022 .cdx-radio__label,
body.skin-vector-2022 .cdx-checkbox__label,
body.skin-vector-2022 .cdx-radio .cdx-label,
body.skin-vector-2022 .cdx-checkbox .cdx-label {
  color: var(--akka-text) !important;
  font-family: var(--akka-body) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}
/* Contents (TOC) panel header + links — Vector default colors leak through here */
body.skin-vector-2022 .vector-toc .vector-pinnable-header-label,
body.skin-vector-2022 .vector-toc .vector-pinnable-header,
body.skin-vector-2022 .vector-toc h2 {
  color: var(--akka-text) !important;
}
body.skin-vector-2022 .vector-toc-link,
body.skin-vector-2022 .vector-toc a.vector-toc-link {
  color: var(--akka-accent-blue) !important;
}

/* Vector's "scroll-hint fade" pseudo at the bottom of the sticky pinned column is a hard-coded white gradient.
   Repaint it to fade into the dark sidebar bg, or kill it entirely. */
body.skin-vector-2022 .vector-sticky-pinned-container::after,
body.skin-vector-2022 .vector-sticky-pinned-container::before {
  background-image: none !important;
  background: transparent !important;
}

/* OOUI popup notifications (e.g. "The appearance menu has moved here.") — OOUI bakes white bg */
body.skin-vector-2022 .oo-ui-popupWidget-popup,
body.skin-vector-2022 .vector-popup-notification .oo-ui-popupWidget-popup {
  background: var(--akka-bg-deep) !important;
  border: 1px solid var(--akka-line-bright) !important;
  color: var(--akka-text) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}
body.skin-vector-2022 .oo-ui-popupWidget-body,
body.skin-vector-2022 .oo-ui-popupWidget-body p {
  color: var(--akka-text) !important;
}
/* The anchor arrow on the popup — OOUI draws it via ::before/::after with white fill */
body.skin-vector-2022 .oo-ui-popupWidget-anchor::before {
  border-bottom-color: var(--akka-line-bright) !important;
}
body.skin-vector-2022 .oo-ui-popupWidget-anchor::after {
  border-bottom-color: var(--akka-bg-deep) !important;
}

/* Wikipedia-style infobox — right-floated dossier panel themed to the AKKA palette */
body.skin-vector-2022 table.infobox {
  float: right;
  clear: right;
  margin: 0 0 1.25rem 1.5rem;
  width: 290px;
  max-width: 40%;
  background: var(--akka-bg-deep) !important;
  border: 1px solid var(--akka-line) !important;
  border-radius: 8px;
  font-size: 0.93em;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
body.skin-vector-2022 table.infobox caption {
  text-transform: none !important;
  font-variant: normal !important;
  background: var(--akka-surface-2);
  color: var(--akka-accent) !important;
  font-family: var(--akka-smcp);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--akka-line);
  text-align: center;
}
body.skin-vector-2022 table.infobox th,
body.skin-vector-2022 table.infobox td {
  padding: 0.4rem 0.7rem;
  vertical-align: top;
  border: 0 !important;
  background: transparent !important;
}
body.skin-vector-2022 table.infobox th {
  color: var(--akka-text-mute) !important;
  font-weight: 500 !important;
  text-align: left;
  width: 40%;
  white-space: nowrap;
}
body.skin-vector-2022 table.infobox td {
  color: var(--akka-text);
}
body.skin-vector-2022 table.infobox tr + tr th,
body.skin-vector-2022 table.infobox tr + tr td {
  border-top: 1px solid var(--akka-line) !important;
}
@media (max-width: 720px) {
  body.skin-vector-2022 table.infobox {
    float: none;
    margin: 0 0 1rem 0;
    width: 100%;
    max-width: 100%;
  }
}

/* Wikipedia-style infobox — right-floated panel with the article title at the top.
   Themed for the AKKA dark palette but otherwise mirrors Wikipedia's neutral look:
   no uppercase, no yellow accents — readers should recognize it as an infobox. */
body.skin-vector-2022 table.infobox {
  float: right;
  clear: right;
  margin: 0 0 1.25rem 1.5rem;
  width: 300px;
  max-width: 40%;
  background: var(--akka-surface) !important;
  border: 1px solid var(--akka-line-bright) !important;
  border-radius: 4px;
  font-size: 0.92em;
  border-collapse: collapse;
  line-height: 1.45;
}
body.skin-vector-2022 table.infobox caption {
  background: var(--akka-surface-2);
  color: var(--akka-text) !important;
  font-family: var(--akka-display);
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--akka-line-bright);
  text-align: center;
  letter-spacing: -0.01em;
}
body.skin-vector-2022 table.infobox th[colspan],
body.skin-vector-2022 table.infobox .infobox-header {
  background: var(--akka-surface-2);
  color: var(--akka-text) !important;
  text-align: center;
  padding: 0.45rem 0.75rem;
  border-top: 1px solid var(--akka-line-bright);
  border-bottom: 1px solid var(--akka-line-bright);
  font-weight: 600;
  font-family: var(--akka-display);
}
body.skin-vector-2022 table.infobox th,
body.skin-vector-2022 table.infobox td {
  padding: 0.4rem 0.75rem;
  vertical-align: top;
  border: 0 !important;
  background: transparent !important;
  text-align: left;
}
body.skin-vector-2022 table.infobox th {
  color: var(--akka-text) !important;
  font-weight: 600 !important;
  width: 38%;
  white-space: nowrap;
}
body.skin-vector-2022 table.infobox td {
  color: var(--akka-text);
}
body.skin-vector-2022 table.infobox tr + tr > th,
body.skin-vector-2022 table.infobox tr + tr > td {
  border-top: 1px solid var(--akka-line) !important;
}
@media (max-width: 720px) {
  body.skin-vector-2022 table.infobox {
    float: none;
    margin: 0 0 1rem 0;
    width: 100%;
    max-width: 100%;
  }
}