MediaWiki:Common.css: Difference between revisions

Content deleted Content added

Inline

Latest revision as of 22:26, 2 June 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;
}

/* ── Version stamps ({{Ver}} / Module:GameVersion) ───────────────── */
.ver-ok,
.ver-beta,
.ver-stale {
    display: inline-block;
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1.4;
    padding: 0 0.45em;
    border-radius: 0.4em;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}
.ver-ok {
    color: #093;
    background: rgba(0, 153, 51, 0.14);
    border: 1px solid rgba(0, 153, 51, 0.45);
}
.ver-beta {
    color: #2563c0;
    background: rgba(37, 99, 192, 0.14);
    border: 1px solid rgba(37, 99, 192, 0.5);
}
.ver-stale {
    color: #c0392b;
    background: rgba(192, 57, 43, 0.14);
    border: 1px solid rgba(192, 57, 43, 0.5);
}

@@ Line 13: / Line 13: @@
 }
+/* ── Version stamps ({{Ver}} / Module:GameVersion) ───────────────── */
-/* --- Vanguard Galaxy theme: dark-mode only --- */
+.ver-ok,
-/* Citizen sets these on <html>:
+.ver-beta,
-     skin-theme-clientpref-night = explicit dark
+.ver-stale {
-     skin-theme-clientpref-day   = explicit light
+    display: inline-block;
-     skin-theme-clientpref-os    = follow OS preference
+    font-size: 0.78em;
-   We apply the cosmic background and dark-palette overrides only in dark contexts.
+    font-weight: 700;
-   Light mode keeps Citizen defaults so text stays readable. */
+    line-height: 1.4;
+    padding: 0 0.45em;
-/* Dark-palette colour overrides (links, surfaces, body text) */
+    border-radius: 0.4em;
-html.skin-theme-clientpref-night,
+    white-space: nowrap;
-@media (prefers-color-scheme: dark) {
+    vertical-align: middle;
+    cursor: help;
 }
+.ver-ok {
+    color: #093;
-html.skin-theme-clientpref-night body.skin-citizen,
+    background: rgba(0, 153, 51, 0.14);
-body.skin-citizen.has-vg-dark {
+    border: 1px solid rgba(0, 153, 51, 0.45);
-  --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;
 }
+.ver-beta {
-@media (prefers-color-scheme: dark) {
+    color: #2563c0;
-  html.skin-theme-clientpref-os body.skin-citizen {
+    background: rgba(37, 99, 192, 0.14);
-    --color-progressive:          #34b2ec;
+    border: 1px solid rgba(37, 99, 192, 0.5);
-    --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;
-  }
 }
+.ver-stale {
+    color: #c0392b;
-/* Cosmic background — dark mode only */
+    background: rgba(192, 57, 43, 0.14);
-html.skin-theme-clientpref-night body.skin-citizen {
+    border: 1px solid rgba(192, 57, 43, 0.5);
-  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; }