MediaWiki:Common.css: Difference between revisions
Appearance
Gama admin (talk | contribs) Port GAMAYUN CRT design tokens |
Apply GAMAYUN+ CRT/phosphor visual system |
||
| Line 1: | Line 1: | ||
/* GAMAYUN shared | /* ========================================================================== | ||
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 | /* ---- Base ---- */ | ||
background: var(--void) !important; | html, body { | ||
color: var(--phosphor) | 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 { | |||
border- | 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); | |||
background: var(--void | |||
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); }