Toggle search
Toggle menu
5
588
6
963
Vanguard Galaxy Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older editNewer edit →
Content deleted Content added
Fix background selectors: target body.skin-citizen + .citizen-body-container
Scope cosmic background + dark palette to dark theme only; let light theme use Citizen defaults
Line 3: Line 3:
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
gap: 20px;
justify-content: center;
margin: 0 auto;
}
}

.inputbox-gallery > div {
.inputbox-gallery .image-frame {
width: calc(33.33% - 14px);
box-sizing: border-box;
border: 1px solid #ccc;
flex-shrink: 0;
padding: 10px;
text-align: center;
}
}

.page__main {
/* --- Vanguard Galaxy theme: dark-mode only --- */
background-color: rgba(var(--theme-page-background-color--rgb), 0.9);
/* Citizen sets these on <html>:
skin-theme-clientpref-night = explicit dark
skin-theme-clientpref-day = explicit light
skin-theme-clientpref-os = follow OS preference
We apply the cosmic background and dark-palette overrides only in dark contexts.
Light mode keeps Citizen defaults so text stays readable. */

/* Dark-palette colour overrides (links, surfaces, body text) */
html.skin-theme-clientpref-night,
@media (prefers-color-scheme: dark) {
}
}


html.skin-theme-clientpref-night body.skin-citizen,
/* Vanguard Galaxy — Citizen theme overrides (palette from VG_Banner.png logo region) */
.skin-citizen-dark, .skin-citizen-auto {
body.skin-citizen.has-vg-dark {
/* Accent: bright cyan from the VANGUARD wordmark glow */
--color-progressive: #34b2ec;
--color-progressive: #34b2ec;
--color-progressive--hover: #5ec5f0;
--color-progressive--hover: #5ec5f0;
--color-progressive--active: #1a93cb;
--color-progressive--active: #1a93cb;
--color-progressive--focus: #34b2ec;
--color-progressive--focus: #34b2ec;

--color-destructive: #ff6e5b;
--color-destructive: #ff6e5b;

/* Surfaces: deep space navy, graduated */
--color-surface-0: #05080f;
--color-surface-0: #05080f;
--color-surface-1: #0a1020;
--color-surface-1: #0a1020;
Line 32: Line 38:
--color-surface-3: #182240;
--color-surface-3: #182240;
--color-surface-4: #1f2c52;
--color-surface-4: #1f2c52;

--background-color-base: #0a1020;
--background-color-base: #0a1020;
--background-color-primary: #11192e;
--background-color-primary: #11192e;
--background-color-neutral-subtle: #182240;
--background-color-neutral-subtle: #182240;
--color-base: #e6edf6;

--color-base: #e6edf6; /* cool off-white body text */
--color-subtle: #8aa0c2;
--color-subtle: #8aa0c2;
--color-emphasized: #ffffff;
--color-emphasized: #ffffff;
--color-link: #8cd4f5; /* the bright VANGUARD glow */
--color-link: #8cd4f5;
--color-link--visited: #5ea0c2;
--color-link--visited: #5ea0c2;

--border-color-base: #1a2a4a;
--border-color-base: #1a2a4a;
--border-color-subtle: #15203a;
--border-color-subtle: #15203a;
}

--color-syntax-blue: #8cd4f5;
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body.skin-citizen {
--color-syntax-pink: #ff6e5b;
--color-progressive: #34b2ec;
--color-progressive--hover: #5ec5f0;
--color-progressive--active: #1a93cb;
--color-progressive--focus: #34b2ec;
--color-destructive: #ff6e5b;
--color-surface-0: #05080f;
--color-surface-1: #0a1020;
--color-surface-2: #11192e;
--color-surface-3: #182240;
--color-surface-4: #1f2c52;
--background-color-base: #0a1020;
--background-color-primary: #11192e;
--background-color-neutral-subtle: #182240;
--color-base: #e6edf6;
--color-subtle: #8aa0c2;
--color-emphasized: #ffffff;
--color-link: #8cd4f5;
--color-link--visited: #5ea0c2;
--border-color-base: #1a2a4a;
--border-color-subtle: #15203a;
}
}
}


/* Tighten wordmark in header */
/* Cosmic background — dark mode only */
html.skin-theme-clientpref-night body.skin-citizen {
.citizen-header__siteTitle img.citizen-header__sitelogo,
background-color: #05080f;
.mw-logo-wordmark { max-height: 36px; width: auto; }
background-image:

linear-gradient( rgba(5, 8, 15, 0.65), rgba(5, 8, 15, 0.50) ),
/* Vanguard Galaxy starfield + nebula background (Citizen) */
url("/images/9/9c/VG-Hero-Background.jpg");
body.skin-citizen {
background-color: #05080f;
background-size: cover;
background-image:
background-position: center top;
background-attachment: fixed;
linear-gradient( rgba(5, 8, 15, 0.65), rgba(5, 8, 15, 0.50) ),
background-repeat: no-repeat;
url("/images/9/9c/VG-Hero-Background.jpg");
}
background-size: cover;
@media (prefers-color-scheme: dark) {
background-position: center top;
html.skin-theme-clientpref-os body.skin-citizen {
background-attachment: fixed;
background-repeat: no-repeat;
background-color: #05080f;
background-image:
linear-gradient( rgba(5, 8, 15, 0.65), rgba(5, 8, 15, 0.50) ),
url("/images/9/9c/VG-Hero-Background.jpg");
background-size: cover;
background-position: center top;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
}


/* Translucent content panel so the starfield reads behind it */
/* Translucent content panel + glass header — dark mode only */
body.skin-citizen .citizen-body-container,
html.skin-theme-clientpref-night body.skin-citizen .citizen-body-container,
body.skin-citizen #mw-content {
html.skin-theme-clientpref-night body.skin-citizen #mw-content {
background-color: rgba(10, 16, 32, 0.86);
background-color: rgba(10, 16, 32, 0.86);
backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
}
html.skin-theme-clientpref-night body.skin-citizen .citizen-header {

background-color: rgba(5, 8, 15, 0.92);
/* Header bar — opaque enough to read links over the artwork */
backdrop-filter: blur(8px);
body.skin-citizen .citizen-header {
background-color: rgba(5, 8, 15, 0.92);
backdrop-filter: blur(8px);
}
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body.skin-citizen .citizen-body-container,
html.skin-theme-clientpref-os body.skin-citizen #mw-content {
background-color: rgba(10, 16, 32, 0.86);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
html.skin-theme-clientpref-os body.skin-citizen .citizen-header {
background-color: rgba(5, 8, 15, 0.92);
backdrop-filter: blur(8px);
}
}

/* Header wordmark sizing — both modes */
body.skin-citizen .citizen-header__siteTitle img.citizen-header__sitelogo,
body.skin-citizen .mw-logo-wordmark { max-height: 36px; width: auto; }

Revision as of 14:19, 20 May 2026

/* CSS placed here will be applied to all skins */
.inputbox-gallery {
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px;
    justify-content: center;
}

.inputbox-gallery .image-frame {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

/* --- Vanguard Galaxy theme: dark-mode only --- */
/* Citizen sets these on <html>:
     skin-theme-clientpref-night = explicit dark
     skin-theme-clientpref-day   = explicit light
     skin-theme-clientpref-os    = follow OS preference
   We apply the cosmic background and dark-palette overrides only in dark contexts.
   Light mode keeps Citizen defaults so text stays readable. */

/* Dark-palette colour overrides (links, surfaces, body text) */
html.skin-theme-clientpref-night,
@media (prefers-color-scheme: dark) {
}

html.skin-theme-clientpref-night body.skin-citizen,
body.skin-citizen.has-vg-dark {
  --color-progressive:          #34b2ec;
  --color-progressive--hover:   #5ec5f0;
  --color-progressive--active:  #1a93cb;
  --color-progressive--focus:   #34b2ec;
  --color-destructive: #ff6e5b;
  --color-surface-0: #05080f;
  --color-surface-1: #0a1020;
  --color-surface-2: #11192e;
  --color-surface-3: #182240;
  --color-surface-4: #1f2c52;
  --background-color-base:     #0a1020;
  --background-color-primary:  #11192e;
  --background-color-neutral-subtle: #182240;
  --color-base:       #e6edf6;
  --color-subtle:     #8aa0c2;
  --color-emphasized: #ffffff;
  --color-link:           #8cd4f5;
  --color-link--visited:  #5ea0c2;
  --border-color-base:    #1a2a4a;
  --border-color-subtle:  #15203a;
}
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os body.skin-citizen {
    --color-progressive:          #34b2ec;
    --color-progressive--hover:   #5ec5f0;
    --color-progressive--active:  #1a93cb;
    --color-progressive--focus:   #34b2ec;
    --color-destructive: #ff6e5b;
    --color-surface-0: #05080f;
    --color-surface-1: #0a1020;
    --color-surface-2: #11192e;
    --color-surface-3: #182240;
    --color-surface-4: #1f2c52;
    --background-color-base:     #0a1020;
    --background-color-primary:  #11192e;
    --background-color-neutral-subtle: #182240;
    --color-base:       #e6edf6;
    --color-subtle:     #8aa0c2;
    --color-emphasized: #ffffff;
    --color-link:           #8cd4f5;
    --color-link--visited:  #5ea0c2;
    --border-color-base:    #1a2a4a;
    --border-color-subtle:  #15203a;
  }
}

/* Cosmic background — dark mode only */
html.skin-theme-clientpref-night body.skin-citizen {
  background-color: #05080f;
  background-image:
    linear-gradient( rgba(5, 8, 15, 0.65), rgba(5, 8, 15, 0.50) ),
    url("/images/9/9c/VG-Hero-Background.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os body.skin-citizen {
    background-color: #05080f;
    background-image:
      linear-gradient( rgba(5, 8, 15, 0.65), rgba(5, 8, 15, 0.50) ),
      url("/images/9/9c/VG-Hero-Background.jpg");
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
}

/* Translucent content panel + glass header — dark mode only */
html.skin-theme-clientpref-night body.skin-citizen .citizen-body-container,
html.skin-theme-clientpref-night body.skin-citizen #mw-content {
  background-color: rgba(10, 16, 32, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html.skin-theme-clientpref-night body.skin-citizen .citizen-header {
  background-color: rgba(5, 8, 15, 0.92);
  backdrop-filter: blur(8px);
}
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os body.skin-citizen .citizen-body-container,
  html.skin-theme-clientpref-os body.skin-citizen #mw-content {
    background-color: rgba(10, 16, 32, 0.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  html.skin-theme-clientpref-os body.skin-citizen .citizen-header {
    background-color: rgba(5, 8, 15, 0.92);
    backdrop-filter: blur(8px);
  }
}

/* Header wordmark sizing — both modes */
body.skin-citizen .citizen-header__siteTitle img.citizen-header__sitelogo,
body.skin-citizen .mw-logo-wordmark { max-height: 36px; width: auto; }
Retrieved from "https://wiki.vanguardgalaxy.com/index.php?title=MediaWiki:Common.css&oldid=3086"
Last modified
This page was last edited on 20 May 2026, at 14:19.
Copyright
Content is available under Creative Commons Attribution unless otherwise noted.