MediaWiki:Common.css: Difference between revisions

Revision as of 18:45, 11 August 2026

/* ==========================================================================
   GAMAYUN+ Wiki — Common.css
   Reskins the default Vector 2022 skin to match the shared GAMAYUN+ CRT/
   phosphor visual system used across gamayun.site subdomains.

   Lives on the wiki as MediaWiki:Common.css. This file is the versioned
   copy — edit here, then push to the wiki, not the other way round.

   Source of truth for the custom properties below: the self-hosted
   `ext.gamaTheme` ResourceLoader module (wiki-theme/resources/
   gama-tokens.css), served from the wiki's own origin. It defines both
   the Codex design tokens and the unprefixed --void/--phosphor/... names
   used throughout this file.

   HISTORY / DO NOT REINTRODUCE (2026-08-11): this file used to open with
       @import url('https://cdn.jsdelivr.net/gh/TheGiantApe/
                    NordvokUtilityEnclosure@main/gama.css');
   which was the ONLY definition of --void, --phosphor, --void-raised,
   --phosphor-dim, --phosphor-faint, --phosphor-dim-text, --amber and
   --font-mono. Whenever that third-party request failed — adblock list,
   DNS filtering, CDN outage, slow cold cache — every var() below became
   invalid-at-computed-value-time and resolved to `unset`. Those
   declarations still won the cascade over ext.gamaTheme's token layer,
   so every surface went transparent and the whole wiki rendered WHITE.
   Confirmed by reproducing it with cdn.jsdelivr.net blocked. The wiki's
   markup used zero classes from that 69KB file — it needed exactly 8
   variable values, which are now self-hosted.

   Every var() below also carries a literal fallback, so if a custom
   property ever goes undefined again the wiki degrades to the correct
   dark palette instead of collapsing to white.
   ========================================================================== */


/* ---- Base ---- */
html, body {
  background: var(--void, #0A0A0A);
  color: var(--phosphor, #00FF66);
}
body.skin-vector-2022 {
  font-family: var(--font-mono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace);
}
#content,
.mw-page-container,
.vector-header-container,
.mw-footer-container {
  background: var(--void, #0A0A0A);
  color: var(--phosphor, #00FF66);
}

/* No rounded corners anywhere - sitewide GAMAYUN convention. */
* {
  border-radius: 0 !important;
}

a,
.mw-body a {
  color: var(--phosphor, #00FF66);
  text-decoration: none;
}
a:visited { color: var(--phosphor, #00FF66); }
a:hover, a:focus {
  color: var(--void, #0A0A0A);
  background: var(--phosphor, #00FF66);
}
a.new { color: var(--amber, #ff9500); }

/* ---- Header / top bar ---- */
.vector-header {
  background: var(--void-raised, #10160f);
  border-bottom: 1px solid var(--phosphor-dim, rgba(0, 255, 102, 0.4));
}
.mw-first-heading,
.firstHeading {
  font-family: var(--font-mono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace);
  color: var(--phosphor, #00FF66);
  border-bottom: 1px solid var(--phosphor-dim, rgba(0, 255, 102, 0.4));
  padding-bottom: 0.4rem;
}

/* ---- Search box ---- */
#p-search,
#simpleSearch {
  background: var(--void, #0A0A0A);
  border: 1px solid var(--phosphor-dim, rgba(0, 255, 102, 0.4)) !important;
  color: var(--phosphor, #00FF66);
}
#simpleSearch input,
#searchInput {
  background: transparent;
  color: var(--phosphor, #00FF66);
  font-family: var(--font-mono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace);
}
#searchInput::placeholder { color: var(--phosphor-dim-text, #3C965F); }

/* ---- Content panel: "terminal panel" boxed look ---- */
.mw-body,
#content {
  border: 1px solid var(--phosphor-dim, rgba(0, 255, 102, 0.4));
  background: var(--void, #0A0A0A);
}
.mw-body-content {
  color: var(--phosphor, #00FF66);
}

/* ---- Sidebar / navigation panels ---- */
#mw-panel,
#mw-panel-toc,
.vector-menu-content,
.vector-pinnable-element {
  background: var(--void-raised, #10160f);
  border: 1px solid var(--phosphor-faint, rgba(0, 255, 102, 0.15));
}
.vector-menu-heading {
  color: var(--phosphor, #00FF66);
  font-family: var(--font-mono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace);
  border-bottom: 1px solid var(--phosphor-faint, rgba(0, 255, 102, 0.15));
}
.vector-menu-content-list li a {
  color: var(--phosphor-dim-text, #3C965F);
}
.vector-menu-content-list li a:hover {
  color: var(--phosphor, #00FF66);
  background: var(--phosphor-faint, rgba(0, 255, 102, 0.15));
}

/* ---- Tabs (views/associated-pages) ---- */
.vector-menu-tabs {
  border-bottom: 1px solid var(--phosphor-dim, rgba(0, 255, 102, 0.4));
}
.vector-menu-tabs a {
  color: var(--phosphor-dim-text, #3C965F);
}
.vector-menu-tabs .selected a,
.vector-menu-tabs a:hover {
  color: var(--phosphor, #00FF66);
  background: var(--void-raised, #10160f);
}

/* ---- Tables (infoboxes, wikitables) ---- */
.mw-body table.wikitable {
  background: var(--void-raised, #10160f);
  border: 1px solid var(--phosphor-dim, rgba(0, 255, 102, 0.4));
  color: var(--phosphor, #00FF66);
}
.mw-body table.wikitable > tr > th,
.mw-body table.wikitable > * > tr > th {
  background: var(--void, #0A0A0A);
  border: 1px solid var(--phosphor-faint, rgba(0, 255, 102, 0.15));
  color: var(--phosphor, #00FF66);
}
.mw-body table.wikitable > tr > td,
.mw-body table.wikitable > * > tr > td {
  border: 1px solid var(--phosphor-faint, rgba(0, 255, 102, 0.15));
}

/* ---- Cite / references ---- */
.mw-body ol.references,
.mw-body .reference {
  color: var(--phosphor-dim-text, #3C965F);
}
.mw-body sup.reference a {
  color: var(--amber, #ff9500);
}

/* ---- CategoryTree ---- */
.mw-body .CategoryTreeItem {
  color: var(--phosphor, #00FF66);
}
.CategoryTreeToggle {
  color: var(--phosphor-dim-text, #3C965F);
}

/* ---- Category page footer listing ---- */
#catlinks,
.mw-normal-catlinks,
.mw-hidden-catlinks {
  border: 1px solid var(--phosphor-dim, rgba(0, 255, 102, 0.4));
  background: var(--void-raised, #10160f);
  color: var(--phosphor-dim-text, #3C965F);
  padding: 0.5rem;
}
#catlinks a { color: var(--phosphor, #00FF66); }

/* ---- Footer ---- */
#footer {
  border-top: 1px solid var(--phosphor-dim, rgba(0, 255, 102, 0.4));
  color: var(--phosphor-dim-text, #3C965F);
  font-family: var(--font-mono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace);
}
#footer a { color: var(--phosphor-dim-text, #3C965F); }
#footer a:hover { color: var(--phosphor, #00FF66); }