MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
Content deleted Content added
Scope cosmic background + dark palette to dark theme only; let light theme use Citizen defaults |
Move cosmic theme into the VanguardGalaxy skin; this block is now redundant |
||
| Line 12: | Line 12: | ||
text-align: center; |
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; } |
|||
Revision as of 21:16, 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;
}