MediaWiki:Citizen.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.
/* ============================================================
SpiritVale Wiki — Citizen.css
Blue System v0.2 (Hard Theme Override)
- Light: light blue canvas (not white)
- Dark: very dark blue canvas
- Uses Citizen’s documented theme classes:
  .skin-theme-clientpref-day / night / os
- Forces page canvas containers to use our surfaces
- Mobile (<=500): no frosted glass / no transparency
============================================================ */

/* ------------------------------------------------------------
0) Shared tweaks
------------------------------------------------------------ */
:root{
--transform-image-hover:none;
}

/* ------------------------------------------------------------
1) LIGHT MODE (Day)
------------------------------------------------------------ */
:root.skin-theme-clientpref-day{
/* Primary (accent) hue -> blue */
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__l:56% !important;

/* Surfaces (set directly so it cannot “stay white”) */
--color-surface-0:#bcd4ff !important;
--color-surface-1:#c9dcff !important;
--color-surface-2:#d6e5ff !important;
--color-surface-3:#a7c6ff !important;
--color-surface-4:#93b7ff !important;

/* Also tune the OKLCH inputs so any derived/internal use matches */
--color-surface-0-oklch__l:93% !important;
--color-surface-0-oklch__c:0.040 !important;

/* Text */
--color-emphasized:#0b1a33 !important;
--color-base:#1f3556 !important;
--color-subtle:#456083 !important;

/* Links (blue-only; kill purple visited) */
--color-link:#0b63f0 !important;
--color-link--hover:#0a56d1 !important;
--color-link--active:#0847ad !important;
--color-visited:#2b7bff !important;
--color-visited--hover:#1f6fff !important;
--color-visited--active:#155fe0 !important;

/* Some MW/Citizen pieces use these fixed vars */
--background-color-base-fixed:var(--color-surface-0) !important;
}

/* ------------------------------------------------------------
2) DARK MODE (Night)
------------------------------------------------------------ */
:root.skin-theme-clientpref-night{
/* Primary (accent) hue -> blue */
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__l:60% !important;

/* Surfaces (very dark blues) */
--color-surface-0:#050d1a !important;
--color-surface-1:#071225 !important;
--color-surface-2:#0b1a33 !important;
--color-surface-3:#10264b !important;
--color-surface-4:#14315f !important;

/* Keep OKLCH inputs aligned */
--color-surface-0-oklch__l:10% !important;
--color-surface-0-oklch__c:0.040 !important;

/* Text */
--color-emphasized:#eaf2ff !important;
--color-base:#c9d8f2 !important;
--color-subtle:#9fb3d8 !important;

/* Links (blue-only) */
--color-link:#5aa6ff !important;
--color-link--hover:#7bb8ff !important;
--color-link--active:#3f95ff !important;
--color-visited:#7bb8ff !important;
--color-visited--hover:#9acbff !important;
--color-visited--active:#5aa6ff !important;

--background-color-base-fixed:var(--color-surface-0) !important;
}

/* ------------------------------------------------------------
3) AUTOMATIC MODE (OS)
------------------------------------------------------------ */
@media (prefers-color-scheme:light){
:root.skin-theme-clientpref-os{
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__l:56% !important;
--color-surface-0:#dbeaff !important;
--color-surface-1:#e8f2ff !important;
--color-surface-2:#f3f8ff !important;
--color-surface-3:#cfe3ff !important;
--color-surface-4:#bdd7ff !important;
--color-surface-0-oklch__l:93% !important;
--color-surface-0-oklch__c:0.040 !important;
--color-emphasized:#0b1a33 !important;
--color-base:#1f3556 !important;
--color-subtle:#456083 !important;
--color-link:#0b63f0 !important;
--color-visited:#2b7bff !important;
--background-color-base-fixed:var(--color-surface-0) !important;
}
}
@media (prefers-color-scheme:dark){
:root.skin-theme-clientpref-os{
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__l:60% !important;
--color-surface-0:#050d1a !important;
--color-surface-1:#071225 !important;
--color-surface-2:#0b1a33 !important;
--color-surface-3:#10264b !important;
--color-surface-4:#14315f !important;
--color-surface-0-oklch__l:10% !important;
--color-surface-0-oklch__c:0.040 !important;
--color-emphasized:#eaf2ff !important;
--color-base:#c9d8f2 !important;
--color-subtle:#9fb3d8 !important;
--color-link:#5aa6ff !important;
--color-visited:#7bb8ff !important;
--background-color-base-fixed:var(--color-surface-0) !important;
}
}

/* ------------------------------------------------------------
4) FORCE PAGE CANVAS BACKGROUNDS (this is the “still white” killer)
Citizen sets: body { background: var(--color-surface-0) }
We also remove any background-image/gradients on common wrappers.
------------------------------------------------------------ */
body.skin-citizen{
background-color:var(--color-surface-0) !important;
background-image:none !important;
color:var(--color-base) !important;
}
body.skin-citizen .citizen-body-container,
body.skin-citizen .citizen-page-container{
background-color:var(--color-surface-0) !important;
background-image:none !important;
}
body.skin-citizen .mw-body,
body.skin-citizen .mw-content-container{
background-color:transparent !important;
background-image:none !important;
}

/* ------------------------------------------------------------
5) Link visibility (keep obvious)
------------------------------------------------------------ */
body.skin-citizen .mw-parser-output a{
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:2px;
}
body.skin-citizen .mw-parser-output a:hover{
text-decoration-thickness:3px;
}

/* ------------------------------------------------------------
6) Citizen search trigger micro-interaction
------------------------------------------------------------ */
.citizen-search-trigger{
transition:transform 0.15s ease-in-out;
}
.citizen-search-trigger:hover{
transform:translateY(-2px);
}

/* ------------------------------------------------------------
7) Mobile hard rule: no frosted glass / no transparency (<=500)
------------------------------------------------------------ */
@media (max-width:500px){
:root{
--backdrop-filter-frosted-glass:none !important;
--opacity-glass:1 !important;
}
body.skin-citizen .citizen-menu__card,
body.skin-citizen .citizen-drawer__card,
body.skin-citizen .citizen-search__form,
body.skin-citizen .citizen-search__footer{
background:var(--color-surface-1) !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
}