Jump to content

MediaWiki:Common.css: Difference between revisions

From GAMAYUN+ Wiki
Port GAMAYUN CRT design tokens
 
Apply GAMAYUN+ CRT/phosphor visual system
Line 1: Line 1:
/* GAMAYUN shared design tokens, ported for MediaWiki (Vector skin) */
/* ==========================================================================
  GAMAYUN+ Wiki — Common.css
  Reskins the default Vector 2022 skin to match the shared GAMAYUN+ CRT/
  phosphor visual system used across gamayun.site subdomains.
 
  Source of truth for the custom properties below: the shared
  TheGiantApe/NordvokUtilityEnclosure gama.css (imported here), which is
  itself sourced from the main gamayun-site repo's css/gama.css.
  ========================================================================== */
 
@import url('https://cdn.jsdelivr.net/gh/TheGiantApe/NordvokUtilityEnclosure@main/gama.css');
 
/* --------------------------------------------------------------------------
  Temporary local fallback values, pending a push to the shared CDN repo.
  TheGiantApe/NordvokUtilityEnclosure exists but is currently EMPTY (no
  commits pushed yet), so the @import above 404s and the --void/--phosphor/
  etc. custom properties it's meant to define resolve to nothing until
  someone with push access to that repo lands its first commit. These
  values are copied verbatim from the real source (this site's own
  css/gama.css) - not invented - so the wiki isn't left completely
  unstyled in the meantime. Remove this block once the CDN import is live;
  the @import's own :root will then take over identically (browsers give
  a later same-specificity :root declaration priority, so nothing else
  needs to change).
  -------------------------------------------------------------------------- */
:root {
:root {
   --void: #0A0A0A;
   --void: #0A0A0A;
Line 7: Line 31:
   --phosphor-faint: rgba(0, 255, 102, 0.15);
   --phosphor-faint: rgba(0, 255, 102, 0.15);
   --phosphor-dim-text: #3C965F;
   --phosphor-dim-text: #3C965F;
  --amber: #ff9500;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
   --font-body: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
   --font-body: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}
}


body, #content, .mw-page-container, .vector-body {
/* ---- Base ---- */
   background: var(--void) !important;
html, body {
   color: var(--phosphor) !important;
  background: var(--void);
   font-family: var(--font-body) !important;
  color: var(--phosphor);
}
body.skin-vector-2022 {
  font-family: var(--font-mono);
}
#content,
.mw-page-container,
.vector-header-container,
.mw-footer-container {
   background: var(--void);
  color: var(--phosphor);
}
 
/* No rounded corners anywhere - sitewide GAMAYUN convention. */
* {
  border-radius: 0 !important;
}
 
a,
.mw-body a {
  color: var(--phosphor);
   text-decoration: none;
}
a:visited { color: var(--phosphor); }
a:hover, a:focus {
  color: var(--void);
  background: var(--phosphor);
}
a.new { color: var(--amber); }
 
/* ---- Header / top bar ---- */
.vector-header {
  background: var(--void-raised);
   border-bottom: 1px solid var(--phosphor-dim);
}
}
#mw-head, .vector-header-container, .vector-pinnable-header {
.mw-first-heading,
   background: var(--void-raised) !important;
.firstHeading {
   border-color: var(--phosphor-dim) !important;
  font-family: var(--font-mono);
   color: var(--phosphor);
   border-bottom: 1px solid var(--phosphor-dim);
  padding-bottom: 0.4rem;
}
}
#p-logo a, .mw-logo { filter: none; }
 
a { color: var(--phosphor) !important; }
/* ---- Search box ---- */
a:visited { color: var(--phosphor-dim-text) !important; }
#p-search,
a:hover { background: var(--phosphor) !important; color: var(--void) !important; }
#simpleSearch {
h1, h2, h3, h4 { color: var(--phosphor) !important; border-color: var(--phosphor-faint) !important; font-weight: normal !important; }
   background: var(--void);
.vector-menu-content, .mw-portlet { background: transparent !important; }
* { border-radius: 0 !important; }
input, textarea, select {
   background: var(--void-raised) !important;
  color: var(--phosphor) !important;
   border: 1px solid var(--phosphor-dim) !important;
   border: 1px solid var(--phosphor-dim) !important;
  color: var(--phosphor);
}
#simpleSearch input,
#searchInput {
  background: transparent;
  color: var(--phosphor);
  font-family: var(--font-mono);
}
#searchInput::placeholder { color: var(--phosphor-dim-text); }
/* ---- Content panel: "terminal panel" boxed look ---- */
.mw-body,
#content {
  border: 1px solid var(--phosphor-dim);
  background: var(--void);
}
.mw-body-content {
  color: var(--phosphor);
}
/* ---- Sidebar / navigation panels ---- */
#mw-panel,
#mw-panel-toc,
.vector-menu-content,
.vector-pinnable-element {
  background: var(--void-raised);
  border: 1px solid var(--phosphor-faint);
}
.vector-menu-heading {
  color: var(--phosphor);
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--phosphor-faint);
}
.vector-menu-content-list li a {
  color: var(--phosphor-dim-text);
}
.vector-menu-content-list li a:hover {
  color: var(--phosphor);
  background: var(--phosphor-faint);
}
/* ---- Tabs (views/associated-pages) ---- */
.vector-menu-tabs {
  border-bottom: 1px solid var(--phosphor-dim);
}
.vector-menu-tabs a {
  color: var(--phosphor-dim-text);
}
.vector-menu-tabs .selected a,
.vector-menu-tabs a:hover {
  color: var(--phosphor);
  background: var(--void-raised);
}
/* ---- Tables (infoboxes, wikitables) ---- */
.mw-body table.wikitable {
  background: var(--void-raised);
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
}
.mw-body table.wikitable > tr > th,
.mw-body table.wikitable > * > tr > th {
  background: var(--void);
  border: 1px solid var(--phosphor-faint);
  color: var(--phosphor);
}
.mw-body table.wikitable > tr > td,
.mw-body table.wikitable > * > tr > td {
  border: 1px solid var(--phosphor-faint);
}
/* ---- Cite / references ---- */
.mw-body ol.references,
.mw-body .reference {
  color: var(--phosphor-dim-text);
}
.mw-body sup.reference a {
  color: var(--amber);
}
/* ---- CategoryTree ---- */
.mw-body .CategoryTreeItem {
  color: var(--phosphor);
}
.CategoryTreeToggle {
  color: var(--phosphor-dim-text);
}
/* ---- Category page footer listing ---- */
#catlinks,
.mw-normal-catlinks,
.mw-hidden-catlinks {
  border: 1px solid var(--phosphor-dim);
  background: var(--void-raised);
  color: var(--phosphor-dim-text);
  padding: 0.5rem;
}
#catlinks a { color: var(--phosphor); }
/* ---- Footer ---- */
#footer {
  border-top: 1px solid var(--phosphor-dim);
  color: var(--phosphor-dim-text);
  font-family: var(--font-mono);
}
}
#footer a { color: var(--phosphor-dim-text); }
#footer a:hover { color: var(--phosphor); }

Revision as of 06:46, 7 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.

   Source of truth for the custom properties below: the shared
   TheGiantApe/NordvokUtilityEnclosure gama.css (imported here), which is
   itself sourced from the main gamayun-site repo's css/gama.css.
   ========================================================================== */

@import url('https://cdn.jsdelivr.net/gh/TheGiantApe/NordvokUtilityEnclosure@main/gama.css');

/* --------------------------------------------------------------------------
   Temporary local fallback values, pending a push to the shared CDN repo.
   TheGiantApe/NordvokUtilityEnclosure exists but is currently EMPTY (no
   commits pushed yet), so the @import above 404s and the --void/--phosphor/
   etc. custom properties it's meant to define resolve to nothing until
   someone with push access to that repo lands its first commit. These
   values are copied verbatim from the real source (this site's own
   css/gama.css) - not invented - so the wiki isn't left completely
   unstyled in the meantime. Remove this block once the CDN import is live;
   the @import's own :root will then take over identically (browsers give
   a later same-specificity :root declaration priority, so nothing else
   needs to change).
   -------------------------------------------------------------------------- */
:root {
  --void: #0A0A0A;
  --void-raised: #10160f;
  --phosphor: #00FF66;
  --phosphor-dim: rgba(0, 255, 102, 0.4);
  --phosphor-faint: rgba(0, 255, 102, 0.15);
  --phosphor-dim-text: #3C965F;
  --amber: #ff9500;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --font-body: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ---- Base ---- */
html, body {
  background: var(--void);
  color: var(--phosphor);
}
body.skin-vector-2022 {
  font-family: var(--font-mono);
}
#content,
.mw-page-container,
.vector-header-container,
.mw-footer-container {
  background: var(--void);
  color: var(--phosphor);
}

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

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

/* ---- Header / top bar ---- */
.vector-header {
  background: var(--void-raised);
  border-bottom: 1px solid var(--phosphor-dim);
}
.mw-first-heading,
.firstHeading {
  font-family: var(--font-mono);
  color: var(--phosphor);
  border-bottom: 1px solid var(--phosphor-dim);
  padding-bottom: 0.4rem;
}

/* ---- Search box ---- */
#p-search,
#simpleSearch {
  background: var(--void);
  border: 1px solid var(--phosphor-dim) !important;
  color: var(--phosphor);
}
#simpleSearch input,
#searchInput {
  background: transparent;
  color: var(--phosphor);
  font-family: var(--font-mono);
}
#searchInput::placeholder { color: var(--phosphor-dim-text); }

/* ---- Content panel: "terminal panel" boxed look ---- */
.mw-body,
#content {
  border: 1px solid var(--phosphor-dim);
  background: var(--void);
}
.mw-body-content {
  color: var(--phosphor);
}

/* ---- Sidebar / navigation panels ---- */
#mw-panel,
#mw-panel-toc,
.vector-menu-content,
.vector-pinnable-element {
  background: var(--void-raised);
  border: 1px solid var(--phosphor-faint);
}
.vector-menu-heading {
  color: var(--phosphor);
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--phosphor-faint);
}
.vector-menu-content-list li a {
  color: var(--phosphor-dim-text);
}
.vector-menu-content-list li a:hover {
  color: var(--phosphor);
  background: var(--phosphor-faint);
}

/* ---- Tabs (views/associated-pages) ---- */
.vector-menu-tabs {
  border-bottom: 1px solid var(--phosphor-dim);
}
.vector-menu-tabs a {
  color: var(--phosphor-dim-text);
}
.vector-menu-tabs .selected a,
.vector-menu-tabs a:hover {
  color: var(--phosphor);
  background: var(--void-raised);
}

/* ---- Tables (infoboxes, wikitables) ---- */
.mw-body table.wikitable {
  background: var(--void-raised);
  border: 1px solid var(--phosphor-dim);
  color: var(--phosphor);
}
.mw-body table.wikitable > tr > th,
.mw-body table.wikitable > * > tr > th {
  background: var(--void);
  border: 1px solid var(--phosphor-faint);
  color: var(--phosphor);
}
.mw-body table.wikitable > tr > td,
.mw-body table.wikitable > * > tr > td {
  border: 1px solid var(--phosphor-faint);
}

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

/* ---- CategoryTree ---- */
.mw-body .CategoryTreeItem {
  color: var(--phosphor);
}
.CategoryTreeToggle {
  color: var(--phosphor-dim-text);
}

/* ---- Category page footer listing ---- */
#catlinks,
.mw-normal-catlinks,
.mw-hidden-catlinks {
  border: 1px solid var(--phosphor-dim);
  background: var(--void-raised);
  color: var(--phosphor-dim-text);
  padding: 0.5rem;
}
#catlinks a { color: var(--phosphor); }

/* ---- Footer ---- */
#footer {
  border-top: 1px solid var(--phosphor-dim);
  color: var(--phosphor-dim-text);
  font-family: var(--font-mono);
}
#footer a { color: var(--phosphor-dim-text); }
#footer a:hover { color: var(--phosphor); }