MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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; }