Toggle search
Toggle menu
115
248
25
2.7K
SpiritVale Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Join the Playtest on Steam Now: SpiritVale

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
More actions
← Older editNewer edit →
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 1: Line 1:
/* ============================================================
/* ============================================================
SpiritVale Wiki — Citizen.css
SpiritVale Wiki — Citizen.css
Blue System v0.2 (Hard Theme Override)
Blue System v0.4 (Citizen theme -> SV token bridge)
- Light: light blue canvas (not white)
- Anchors to site swatch: #1F2937
- Dark: very dark blue canvas
- Day: darker “light mode” (still readable, not washed out)
- Uses Citizen’s documented theme classes:
- Night: deeper dark mode
  .skin-theme-clientpref-day / night / os
- Exports Citizen theme vars -> Common.css --sv-ui-* tokens
- Forces page canvas containers to use our surfaces
- Mobile (<=500): no frosted glass / no transparency
- Mobile (<=500): no frosted glass / no transparency
============================================================ */
============================================================ */
Line 18: Line 17:


/* ------------------------------------------------------------
/* ------------------------------------------------------------
1) LIGHT MODE (Day)
1) DARK MODE (Night) — deeper than site swatch
------------------------------------------------------------ */
------------------------------------------------------------ */
:root.skin-theme-clientpref-day{
:root.skin-theme-clientpref-night{
/* Primary (accent) hue -> blue */
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__l:56% !important;
--color-progressive-oklch__l:62% !important;


/* Surfaces (set directly so it cannot “stay white”) */
/* Citizen surfaces */
--color-surface-0:#bcd4ff !important;
--color-surface-0:#0f172a !important;
--color-surface-1:#c9dcff !important;
--color-surface-1:#1f2937 !important; /* site swatch */
--color-surface-2:#d6e5ff !important;
--color-surface-2:#273449 !important;
--color-surface-3:#a7c6ff !important;
--color-surface-3:#2e3f59 !important;
--color-surface-4:#93b7ff !important;
--color-surface-4:#364a69 !important;


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


/* Text */
/* Text (bright, readable) */
--color-emphasized:#0b1a33 !important;
--color-emphasized:#f5f9ff !important;
--color-base:#1f3556 !important;
--color-base:#d7e2f4 !important;
--color-subtle:#456083 !important;
--color-subtle:#b6c6e0 !important;


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


/* Some MW/Citizen pieces use these fixed vars */
--background-color-base-fixed:var(--color-surface-0) !important;
--background-color-base-fixed:var(--color-surface-0) !important;
/* Export -> SV tokens (Common.css uses these everywhere) */
--sv-ui-bg0:var(--color-surface-0);
--sv-ui-bg1:var(--color-surface-1);
--sv-ui-bg2:var(--color-surface-2);
--sv-ui-bg3:var(--color-surface-3);
--sv-ui-line1:#3b4b63;
--sv-ui-line2:#4b6388;
--sv-ui-text1:var(--color-emphasized);
--sv-ui-text2:var(--color-base);
--sv-ui-text3:var(--color-subtle);
--sv-ui-accent:var(--color-link);
--sv-ui-accent2:var(--color-visited);
--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
}
}


/* ------------------------------------------------------------
/* ------------------------------------------------------------
2) DARK MODE (Night)
2) LIGHT MODE (Day) — the site swatch becomes the canvas
(“25% lighter than dark mode” concept: Day uses #1F2937 as surface-0)
------------------------------------------------------------ */
------------------------------------------------------------ */
:root.skin-theme-clientpref-night{
:root.skin-theme-clientpref-day{
/* Primary (accent) hue -> blue */
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__l:60% !important;
--color-progressive-oklch__l:62% !important;


/* Surfaces (very dark blues) */
/* Citizen surfaces */
--color-surface-0:#050d1a !important;
--color-surface-0:#1f2937 !important; /* site swatch */
--color-surface-1:#071225 !important;
--color-surface-1:#273449 !important;
--color-surface-2:#0b1a33 !important;
--color-surface-2:#2e3f59 !important;
--color-surface-3:#10264b !important;
--color-surface-3:#364a69 !important;
--color-surface-4:#14315f !important;
--color-surface-4:#3f5580 !important;


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


/* Text */
/* IMPORTANT: keep text LIGHT in day mode since the canvas is still dark */
--color-emphasized:#eaf2ff !important;
--color-emphasized:#f5f9ff !important;
--color-base:#c9d8f2 !important;
--color-base:#d7e2f4 !important;
--color-subtle:#9fb3d8 !important;
--color-subtle:#b6c6e0 !important;


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


--background-color-base-fixed:var(--color-surface-0) !important;
--background-color-base-fixed:var(--color-surface-0) !important;
/* Export -> SV tokens */
--sv-ui-bg0:var(--color-surface-0);
--sv-ui-bg1:var(--color-surface-1);
--sv-ui-bg2:var(--color-surface-2);
--sv-ui-bg3:var(--color-surface-3);
--sv-ui-line1:#4b6388;
--sv-ui-line2:#5f7fb4;
--sv-ui-text1:var(--color-emphasized);
--sv-ui-text2:var(--color-base);
--sv-ui-text3:var(--color-subtle);
--sv-ui-accent:var(--color-link);
--sv-ui-accent2:var(--color-visited);
--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.35);
}
}


Line 93: Line 118:
3) AUTOMATIC MODE (OS)
3) AUTOMATIC MODE (OS)
------------------------------------------------------------ */
------------------------------------------------------------ */
@media (prefers-color-scheme:light){
@media (prefers-color-scheme:dark){
:root.skin-theme-clientpref-os{
:root.skin-theme-clientpref-os{
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__l:56% !important;
--color-progressive-oklch__l:62% !important;
--color-surface-0:#dbeaff !important;
 
--color-surface-1:#e8f2ff !important;
--color-surface-0:#0f172a !important;
--color-surface-2:#f3f8ff !important;
--color-surface-1:#1f2937 !important;
--color-surface-3:#cfe3ff !important;
--color-surface-2:#273449 !important;
--color-surface-4:#bdd7ff !important;
--color-surface-3:#2e3f59 !important;
--color-surface-0-oklch__l:93% !important;
--color-surface-4:#364a69 !important;
 
--color-surface-0-oklch__l:10% !important;
--color-surface-0-oklch__c:0.040 !important;
--color-surface-0-oklch__c:0.040 !important;
--color-emphasized:#0b1a33 !important;
 
--color-base:#1f3556 !important;
--color-emphasized:#f5f9ff !important;
--color-subtle:#456083 !important;
--color-base:#d7e2f4 !important;
--color-link:#0b63f0 !important;
--color-subtle:#b6c6e0 !important;
--color-visited:#2b7bff !important;
 
--color-link:#6aa6ff !important;
--color-visited:#8cbcff !important;
 
--background-color-base-fixed:var(--color-surface-0) !important;
--background-color-base-fixed:var(--color-surface-0) !important;
--sv-ui-bg0:var(--color-surface-0);
--sv-ui-bg1:var(--color-surface-1);
--sv-ui-bg2:var(--color-surface-2);
--sv-ui-bg3:var(--color-surface-3);
--sv-ui-line1:#3b4b63;
--sv-ui-line2:#4b6388;
--sv-ui-text1:var(--color-emphasized);
--sv-ui-text2:var(--color-base);
--sv-ui-text3:var(--color-subtle);
--sv-ui-accent:var(--color-link);
--sv-ui-accent2:var(--color-visited);
--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
}
}
}
}
@media (prefers-color-scheme:dark){
 
@media (prefers-color-scheme:light){
:root.skin-theme-clientpref-os{
:root.skin-theme-clientpref-os{
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__l:60% !important;
--color-progressive-oklch__l:62% !important;
--color-surface-0:#050d1a !important;
 
--color-surface-1:#071225 !important;
--color-surface-0:#1f2937 !important;
--color-surface-2:#0b1a33 !important;
--color-surface-1:#273449 !important;
--color-surface-3:#10264b !important;
--color-surface-2:#2e3f59 !important;
--color-surface-4:#14315f !important;
--color-surface-3:#364a69 !important;
--color-surface-0-oklch__l:10% !important;
--color-surface-4:#3f5580 !important;
 
--color-surface-0-oklch__l:18% !important;
--color-surface-0-oklch__c:0.040 !important;
--color-surface-0-oklch__c:0.040 !important;
--color-emphasized:#eaf2ff !important;
 
--color-base:#c9d8f2 !important;
--color-emphasized:#f5f9ff !important;
--color-subtle:#9fb3d8 !important;
--color-base:#d7e2f4 !important;
--color-link:#5aa6ff !important;
--color-subtle:#b6c6e0 !important;
--color-visited:#7bb8ff !important;
 
--color-link:#8cbcff !important;
--color-visited:#b0d0ff !important;
 
--background-color-base-fixed:var(--color-surface-0) !important;
--background-color-base-fixed:var(--color-surface-0) !important;
--sv-ui-bg0:var(--color-surface-0);
--sv-ui-bg1:var(--color-surface-1);
--sv-ui-bg2:var(--color-surface-2);
--sv-ui-bg3:var(--color-surface-3);
--sv-ui-line1:#4b6388;
--sv-ui-line2:#5f7fb4;
--sv-ui-text1:var(--color-emphasized);
--sv-ui-text2:var(--color-base);
--sv-ui-text3:var(--color-subtle);
--sv-ui-accent:var(--color-link);
--sv-ui-accent2:var(--color-visited);
--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.35);
}
}
}
}


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


Revision as of 06:33, 23 February 2026

/* ============================================================
SpiritVale Wiki — Citizen.css
Blue System v0.4 (Citizen theme -> SV token bridge)
- Anchors to site swatch: #1F2937
- Day: darker “light mode” (still readable, not washed out)
- Night: deeper dark mode
- Exports Citizen theme vars -> Common.css --sv-ui-* tokens
- Mobile (<=500): no frosted glass / no transparency
============================================================ */

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

/* ------------------------------------------------------------
1) DARK MODE (Night) — deeper than site swatch
------------------------------------------------------------ */
:root.skin-theme-clientpref-night{
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__l:62% !important;

/* Citizen surfaces */
--color-surface-0:#0f172a !important;
--color-surface-1:#1f2937 !important; /* site swatch */
--color-surface-2:#273449 !important;
--color-surface-3:#2e3f59 !important;
--color-surface-4:#364a69 !important;

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

/* Text (bright, readable) */
--color-emphasized:#f5f9ff !important;
--color-base:#d7e2f4 !important;
--color-subtle:#b6c6e0 !important;

/* Links (blue-only) */
--color-link:#6aa6ff !important;
--color-link--hover:#8cbcff !important;
--color-link--active:#4f98ff !important;
--color-visited:#8cbcff !important;
--color-visited--hover:#b0d0ff !important;
--color-visited--active:#6aa6ff !important;

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

/* Export -> SV tokens (Common.css uses these everywhere) */
--sv-ui-bg0:var(--color-surface-0);
--sv-ui-bg1:var(--color-surface-1);
--sv-ui-bg2:var(--color-surface-2);
--sv-ui-bg3:var(--color-surface-3);
--sv-ui-line1:#3b4b63;
--sv-ui-line2:#4b6388;
--sv-ui-text1:var(--color-emphasized);
--sv-ui-text2:var(--color-base);
--sv-ui-text3:var(--color-subtle);
--sv-ui-accent:var(--color-link);
--sv-ui-accent2:var(--color-visited);
--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
}

/* ------------------------------------------------------------
2) LIGHT MODE (Day) — the site swatch becomes the canvas
(“25% lighter than dark mode” concept: Day uses #1F2937 as surface-0)
------------------------------------------------------------ */
:root.skin-theme-clientpref-day{
--color-progressive-oklch__h:225 !important;
--color-progressive-oklch__c:0.170 !important;
--color-progressive-oklch__l:62% !important;

/* Citizen surfaces */
--color-surface-0:#1f2937 !important; /* site swatch */
--color-surface-1:#273449 !important;
--color-surface-2:#2e3f59 !important;
--color-surface-3:#364a69 !important;
--color-surface-4:#3f5580 !important;

/* Align internal OKLCH */
--color-surface-0-oklch__l:18% !important;
--color-surface-0-oklch__c:0.040 !important;

/* IMPORTANT: keep text LIGHT in day mode since the canvas is still dark */
--color-emphasized:#f5f9ff !important;
--color-base:#d7e2f4 !important;
--color-subtle:#b6c6e0 !important;

/* Links (blue-only) */
--color-link:#8cbcff !important;
--color-link--hover:#b0d0ff !important;
--color-link--active:#6aa6ff !important;
--color-visited:#b0d0ff !important;
--color-visited--hover:#d2e6ff !important;
--color-visited--active:#8cbcff !important;

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

/* Export -> SV tokens */
--sv-ui-bg0:var(--color-surface-0);
--sv-ui-bg1:var(--color-surface-1);
--sv-ui-bg2:var(--color-surface-2);
--sv-ui-bg3:var(--color-surface-3);
--sv-ui-line1:#4b6388;
--sv-ui-line2:#5f7fb4;
--sv-ui-text1:var(--color-emphasized);
--sv-ui-text2:var(--color-base);
--sv-ui-text3:var(--color-subtle);
--sv-ui-accent:var(--color-link);
--sv-ui-accent2:var(--color-visited);
--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.35);
}

/* ------------------------------------------------------------
3) AUTOMATIC MODE (OS)
------------------------------------------------------------ */
@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:62% !important;

--color-surface-0:#0f172a !important;
--color-surface-1:#1f2937 !important;
--color-surface-2:#273449 !important;
--color-surface-3:#2e3f59 !important;
--color-surface-4:#364a69 !important;

--color-surface-0-oklch__l:10% !important;
--color-surface-0-oklch__c:0.040 !important;

--color-emphasized:#f5f9ff !important;
--color-base:#d7e2f4 !important;
--color-subtle:#b6c6e0 !important;

--color-link:#6aa6ff !important;
--color-visited:#8cbcff !important;

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

--sv-ui-bg0:var(--color-surface-0);
--sv-ui-bg1:var(--color-surface-1);
--sv-ui-bg2:var(--color-surface-2);
--sv-ui-bg3:var(--color-surface-3);
--sv-ui-line1:#3b4b63;
--sv-ui-line2:#4b6388;
--sv-ui-text1:var(--color-emphasized);
--sv-ui-text2:var(--color-base);
--sv-ui-text3:var(--color-subtle);
--sv-ui-accent:var(--color-link);
--sv-ui-accent2:var(--color-visited);
--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
}
}

@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:62% !important;

--color-surface-0:#1f2937 !important;
--color-surface-1:#273449 !important;
--color-surface-2:#2e3f59 !important;
--color-surface-3:#364a69 !important;
--color-surface-4:#3f5580 !important;

--color-surface-0-oklch__l:18% !important;
--color-surface-0-oklch__c:0.040 !important;

--color-emphasized:#f5f9ff !important;
--color-base:#d7e2f4 !important;
--color-subtle:#b6c6e0 !important;

--color-link:#8cbcff !important;
--color-visited:#b0d0ff !important;

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

--sv-ui-bg0:var(--color-surface-0);
--sv-ui-bg1:var(--color-surface-1);
--sv-ui-bg2:var(--color-surface-2);
--sv-ui-bg3:var(--color-surface-3);
--sv-ui-line1:#4b6388;
--sv-ui-line2:#5f7fb4;
--sv-ui-text1:var(--color-emphasized);
--sv-ui-text2:var(--color-base);
--sv-ui-text3:var(--color-subtle);
--sv-ui-accent:var(--color-link);
--sv-ui-accent2:var(--color-visited);
--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.35);
}
}

/* ------------------------------------------------------------
4) FORCE PAGE CANVAS BACKGROUNDS
------------------------------------------------------------ */
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;
}
body.skin-citizen .mw-parser-output{
color:var(--color-base);
}

/* ------------------------------------------------------------
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;
}
}
Retrieved from "https://spiritvale.info/wiki/index.php?title=MediaWiki:Citizen.css&oldid=2380"
Last modified
This page was last edited on 23 February 2026, at 06:33.