MediaWiki:Common.css: Difference between revisions

Revision as of 20:26, 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);
}
/* Running text is antique-silver, NOT full-saturation phosphor. Paragraphs
   of #00FF66 on black is a genuine contrast/readability problem - phosphor
   is the accent (headings, links, chrome), not the body colour. */
.mw-body-content {
  color: var(--antique-silver, #C8D5C0);
}

/* ---- Content headings ----
   Vector's own defaults were coming through untouched: a serif family
   (Linux Libertine) and near-white (#101418 inverted -> #fff), so every
   heading read as stock MediaWiki sitting inside a GAMA panel. Mono +
   phosphor puts them back in the same voice as the rest of the site. */
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6,
.mw-body-content h1 .mw-headline,
.mw-body-content h2 .mw-headline,
.mw-body-content h3 .mw-headline,
.mw-body-content h4 .mw-headline,
.mw-body-content h5 .mw-headline,
.mw-body-content h6 .mw-headline {
  font-family: var(--font-mono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace);
  color: var(--phosphor, #00FF66);
}
.mw-body-content h2 {
  border-bottom: 1px solid var(--phosphor-dim, rgba(0, 255, 102, 0.4));
  padding-bottom: 0.3rem;
}
/* h3 is a subsection marker, not a second page title - dim rule, and a
   terminal-style prefix so the hierarchy reads without relying on size. */
.mw-body-content h3 {
  border-bottom: 1px solid var(--phosphor-faint, rgba(0, 255, 102, 0.15));
  padding-bottom: 0.2rem;
}
.mw-body-content h3 .mw-headline::before {
  content: "> ";
  color: var(--phosphor-dim-text, #3C965F);
}

/* ---- 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 ----
   The <categorytree> extension renders every entry as a plain <div>, not a
   real <ul>/<li>, so the article lists under each Main Page category came
   out as an unmarked run of links - no bullets, no indent, nothing telling
   you it was a list. display:list-item gives them real markers without
   needing the extension to change its markup. */
.mw-body .CategoryTreeItem {
  color: var(--phosphor, #00FF66);
}
.mw-body .CategoryTreeChildren {
  margin-left: 1.25rem;
}
.mw-body .CategoryTreeChildren .CategoryTreeItem {
  display: list-item;
  list-style: square outside;
  margin-left: 1rem;
  padding-left: 0.15rem;
}
.mw-body .CategoryTreeChildren .CategoryTreeItem::marker {
  color: var(--phosphor-dim, rgba(0, 255, 102, 0.4));
}
/* The root node carries this empty span as a spacer where a toggle would
   go on an expandable node; with hideroot=on it should never appear, but
   zero it out so it can't add a phantom indent if one slips through. */
.mw-body .CategoryTreeEmptyBullet {
  display: none;
}
.mw-body .CategoryTreeNotice {
  color: var(--phosphor-dim-text, #3C965F);
  font-style: italic;
}
.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); }