MediaWiki:Common.css: Difference between revisions

Revision as of 05:26, 10 May 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:      #11151f;
  --akka-surface-2:    #161b27;
  --akka-line:         #1d2334;
  --akka-line-bright:  #2d3548;
  --akka-text:         #f4eed7;
  --akka-text-mute:    #c8cee0;
  --akka-text-faint:   #8c92a6;
  --akka-accent:       #f6c91e;
  --akka-accent-blue:  #4d8cf5;
  --akka-cta-hi:       #2f7af5;
  --akka-cta-lo:       #1f5fcf;
  --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-icon {
  content: url('https://akkadev.games/assets/akka-mark-history.svg');
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
}
.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: #f06a3a !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: #f06a3a !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;
}