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 edit
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* ============================================================
/* SpiritVale Wiki — Citizen.css */
SpiritVale Wiki — Citizen.css
/* Theme tokens, Citizen skin overrides, and global chrome polish. */
Blue System v0.2 (Hard Theme Override)
/* -------------------------------------------------------------------------- */
- Light: light blue canvas (not white)
/* Canonical ownership map                                                    */
- Dark: very dark blue canvas
/* -------------------------------------------------------------------------- */
- Uses Citizen’s documented theme classes:
/* Citizen.css is the theme/chrome layer. It owns:                             */
   .skin-theme-clientpref-day / night / os
/* - skin tokens and color-role overrides                                      */
- Forces page canvas containers to use our surfaces
/* - Citizen shell/chrome presentation                                        */
- Mobile (<=500): no frosted glass / no transparency
/* - theme-aware polish for globally shared UI                                */
============================================================ */
/* - global safety exceptions tied to the skin itself                          */
/*                                                                            */
/* Citizen.css does NOT own:                                                   */
/* - module layout for GameInfo, PatchHighlights, or other feature blocks      */
/* - template-local layout for Definitions, ClassInfobox, etc.                */
/* - the definition of what each breakpoint means                              */
/*                                                                            */
/* Responsive cleanup note: Citizen.css now maps its viewport-specific rules   */
/* to the canonical SpiritVale six-viewpoint ladder. It should still avoid    */
/* owning module/template layout behavior.                                    */
/* -------------------------------------------------------------------------- */
/* Canonical ladder                                                            */
/* -------------------------------------------------------------------------- */
/* - default: <640px                                                          */
/* - sm:      >=640px                                                          */
/* - md:     >=768px                                                          */
/* - lg:      >=1024px                                                        */
/* - xl:      >=1280px                                                        */
/* - 2xl:    >=1536px                                                        */
/* -------------------------------------------------------------------------- */


/* ------------------------------------------------------------
 
0) Shared tweaks
/* -------------------------------------------------------------------------- */
------------------------------------------------------------ */
/* 1) Shared tokens */
/* -------------------------------------------------------------------------- */
:root{
:root{
--transform-image-hover:none;
  --transform-image-hover:none;
}
 
/* -------------------------------------------------------------------------- */
/* 2) Night mode */
/* -------------------------------------------------------------------------- */
:root.skin-theme-clientpref-night{
  --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-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;
 
  --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);
}
}


/* ------------------------------------------------------------
/* -------------------------------------------------------------------------- */
1) LIGHT MODE (Day)
/* 3) Day mode */
------------------------------------------------------------ */
/* -------------------------------------------------------------------------- */
:root.skin-theme-clientpref-day{
: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:62% !important;
--color-progressive-oklch__l:56% !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;


/* Surfaces (set directly so it cannot “stay white”) */
  --color-surface-0-oklch__l:18% !important;
--color-surface-0:#bcd4ff !important;
  --color-surface-0-oklch__c:0.040 !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-emphasized:#f5f9ff !important;
--color-surface-0-oklch__l:93% !important;
  --color-base:#d7e2f4 !important;
--color-surface-0-oklch__c:0.040 !important;
  --color-subtle:#b6c6e0 !important;


/* Text */
  --color-link:#8cbcff !important;
--color-emphasized:#0b1a33 !important;
  --color-link--hover:#b0d0ff !important;
--color-base:#1f3556 !important;
  --color-link--active:#6aa6ff !important;
--color-subtle:#456083 !important;
  --color-visited:#b0d0ff !important;
  --color-visited--hover:#d2e6ff !important;
  --color-visited--active:#8cbcff !important;


/* Links (blue-only; kill purple visited) */
  --background-color-base-fixed:var(--color-surface-0) !important;
--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 */
  --sv-ui-bg0:var(--color-surface-0);
--background-color-base-fixed:var(--color-surface-0) !important;
  --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);
}
}


/* ------------------------------------------------------------
/* -------------------------------------------------------------------------- */
2) DARK MODE (Night)
/* 4) OS mode */
------------------------------------------------------------ */
/* -------------------------------------------------------------------------- */
:root.skin-theme-clientpref-night{
@media (prefers-color-scheme:dark){
/* Primary (accent) hue -> blue */
  :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:#0f172a !important;
    --color-surface-1:#1f2937 !important;
    --color-surface-2:#273449 !important;
    --color-surface-3:#2e3f59 !important;
    --color-surface-4:#364a69 !important;


/* Surfaces (very dark blues) */
    --color-surface-0-oklch__l:10% !important;
--color-surface-0:#050d1a !important;
    --color-surface-0-oklch__c:0.040 !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-emphasized:#f5f9ff !important;
--color-surface-0-oklch__l:10% !important;
    --color-base:#d7e2f4 !important;
--color-surface-0-oklch__c:0.040 !important;
    --color-subtle:#b6c6e0 !important;


/* Text */
    --color-link:#6aa6ff !important;
--color-emphasized:#eaf2ff !important;
    --color-link--hover:#8cbcff !important;
--color-base:#c9d8f2 !important;
    --color-link--active:#4f98ff !important;
--color-subtle:#9fb3d8 !important;
    --color-visited:#8cbcff !important;
    --color-visited--hover:#b0d0ff !important;
    --color-visited--active:#6aa6ff !important;


/* Links (blue-only) */
    --background-color-base-fixed:var(--color-surface-0) !important;
--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;
    --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);
  }
}
}


/* ------------------------------------------------------------
3) AUTOMATIC MODE (OS)
------------------------------------------------------------ */
@media (prefers-color-scheme:light){
@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:56% !important;
    --color-progressive-oklch__l:62% !important;
--color-surface-0:#dbeaff !important;
 
--color-surface-1:#e8f2ff !important;
    --color-surface-0:#1f2937 !important;
--color-surface-2:#f3f8ff !important;
    --color-surface-1:#273449 !important;
--color-surface-3:#cfe3ff !important;
    --color-surface-2:#2e3f59 !important;
--color-surface-4:#bdd7ff !important;
    --color-surface-3:#364a69 !important;
--color-surface-0-oklch__l:93% !important;
    --color-surface-4:#3f5580 !important;
--color-surface-0-oklch__c:0.040 !important;
 
--color-emphasized:#0b1a33 !important;
    --color-surface-0-oklch__l:18% !important;
--color-base:#1f3556 !important;
    --color-surface-0-oklch__c:0.040 !important;
--color-subtle:#456083 !important;
 
--color-link:#0b63f0 !important;
    --color-emphasized:#f5f9ff !important;
--color-visited:#2b7bff !important;
    --color-base:#d7e2f4 !important;
--background-color-base-fixed:var(--color-surface-0) !important;
    --color-subtle:#b6c6e0 !important;
}
 
}
    --color-link:#8cbcff !important;
@media (prefers-color-scheme:dark){
    --color-link--hover:#b0d0ff !important;
:root.skin-theme-clientpref-os{
    --color-link--active:#6aa6ff !important;
--color-progressive-oklch__h:225 !important;
    --color-visited:#b0d0ff !important;
--color-progressive-oklch__c:0.170 !important;
    --color-visited--hover:#d2e6ff !important;
--color-progressive-oklch__l:60% !important;
    --color-visited--active:#8cbcff !important;
--color-surface-0:#050d1a !important;
 
--color-surface-1:#071225 !important;
    --background-color-base-fixed:var(--color-surface-0) !important;
--color-surface-2:#0b1a33 !important;
 
--color-surface-3:#10264b !important;
    --sv-ui-bg0:var(--color-surface-0);
--color-surface-4:#14315f !important;
    --sv-ui-bg1:var(--color-surface-1);
--color-surface-0-oklch__l:10% !important;
    --sv-ui-bg2:var(--color-surface-2);
--color-surface-0-oklch__c:0.040 !important;
    --sv-ui-bg3:var(--color-surface-3);
--color-emphasized:#eaf2ff !important;
    --sv-ui-line1:#4b6388;
--color-base:#c9d8f2 !important;
    --sv-ui-line2:#5f7fb4;
--color-subtle:#9fb3d8 !important;
    --sv-ui-text1:var(--color-emphasized);
--color-link:#5aa6ff !important;
    --sv-ui-text2:var(--color-base);
--color-visited:#7bb8ff !important;
    --sv-ui-text3:var(--color-subtle);
--background-color-base-fixed:var(--color-surface-0) !important;
    --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)
/* 5) Page canvas */
Citizen sets: body { background: var(--color-surface-0) }
/* -------------------------------------------------------------------------- */
We also remove any background-image/gradients on common wrappers.
------------------------------------------------------------ */
body.skin-citizen{
body.skin-citizen{
background-color:var(--color-surface-0) !important;
  background-color:var(--color-surface-0) !important;
background-image:none !important;
  background-image:none !important;
color:var(--color-base) !important;
  color:var(--color-base) !important;
}
}
body.skin-citizen .citizen-body-container,
body.skin-citizen .citizen-body-container,
body.skin-citizen .citizen-page-container{
body.skin-citizen .citizen-page-container{
background-color:var(--color-surface-0) !important;
  background-color:var(--color-surface-0) !important;
background-image:none !important;
  background-image:none !important;
}
}
body.skin-citizen .mw-body,
body.skin-citizen .mw-body,
body.skin-citizen .mw-content-container{
body.skin-citizen .mw-content-container{
background-color:transparent !important;
  background-color:transparent !important;
background-image:none !important;
  background-image:none !important;
}
}


/* ------------------------------------------------------------
body.skin-citizen .mw-parser-output{
5) Link visibility (keep obvious)
  color:var(--color-base);
------------------------------------------------------------ */
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
/* 6) Search trigger */
------------------------------------------------------------ */
/* -------------------------------------------------------------------------- */
.citizen-search-trigger{
.citizen-search-trigger{
transition:transform 0.15s ease-in-out;
  transition:transform 0.15s ease-in-out;
}
}
.citizen-search-trigger:hover{
.citizen-search-trigger:hover{
transform:translateY(-2px);
  transform:translateY(-2px);
}
 
/* -------------------------------------------------------------------------- */
/* 7) Dropdown readability */
/* -------------------------------------------------------------------------- */
body.skin-citizen .oo-ui-menuSelectWidget,
body.skin-citizen .oo-ui-menuSelectWidget .oo-ui-labelElement-label,
body.skin-citizen .oo-ui-menuSelectWidget .oo-ui-menuOptionWidget,
body.skin-citizen .oo-ui-menuSelectWidget .oo-ui-menuOptionWidget a,
body.skin-citizen .cdx-menu,
body.skin-citizen .cdx-menu-item__text,
body.skin-citizen .cdx-menu-item__label{
  color:#0b1a33 !important;
}
 
/* -------------------------------------------------------------------------- */
/* 8) Native select readability */
/* -------------------------------------------------------------------------- */
body.skin-citizen select#namespace:focus,
body.skin-citizen select#mw-search-ns:focus,
body.skin-citizen select[name="namespace"]:focus{
  background:#f3f8ff !important;
  color:#0b1a33 !important;
}
 
body.skin-citizen select#namespace:focus option,
body.skin-citizen select#mw-search-ns:focus option,
body.skin-citizen select[name="namespace"]:focus option{
  color:#0b1a33 !important;
}
 
/* -------------------------------------------------------------------------- */
/* 9) Message banners */
/* -------------------------------------------------------------------------- */
:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt):not(.cdx-message--inline){
  background:#2a2c30 !important;
  border:1px solid rgba(255,255,255,0.20) !important;
  color:#ffffff !important;
}
 
:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt)
:where(.cdx-message__content,.mw-message-box__content,div,p,ul,li,span,strong,bdi){
  color:inherit !important;
}
 
:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a,
:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a:visited{
  color:var(--color-link) !important;
  text-decoration:underline;
  text-underline-offset:2px;
}
 
:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a:hover,
:where(.cdx-message,.mw-message-box,.mw-warning-with-logexcerpt) a:visited:hover{
  color:var(--color-link--hover) !important;
}
 
:where(.cdx-message--warning,.mw-message-box-warning,.mw-warning-with-logexcerpt):not(.cdx-message--inline){
  background:#302617 !important;
  border-color:#f5b000 !important;
  color:#ffffff !important;
}
 
:where(.cdx-message--error,.mw-message-box-error):not(.cdx-message--inline){
  background:#3e1d17 !important;
  border-color:#ff3b30 !important;
  color:#ffffff !important;
}
}


/* ------------------------------------------------------------
:where(.cdx-message--success,.mw-message-box-success):not(.cdx-message--inline){
7) Mobile hard rule: no frosted glass / no transparency (<=500)
  background:#172d26 !important;
------------------------------------------------------------ */
  border-color:#18c37e !important;
@media (max-width:500px){
  color:#ffffff !important;
:root{
}
--backdrop-filter-frosted-glass:none !important;
 
--opacity-glass:1 !important;
.cdx-message.cdx-message--warning:not(.cdx-message--inline) .cdx-message__icon{
  color:#f5b000 !important;
}
 
.cdx-message.cdx-message--error:not(.cdx-message--inline) .cdx-message__icon{
  color:#ff3b30 !important;
}
 
.cdx-message.cdx-message--success:not(.cdx-message--inline) .cdx-message__icon{
  color:#18c37e !important;
}
 
/* -------------------------------------------------------------------------- */
/* 10) Diff highlights */
/* -------------------------------------------------------------------------- */
.diff-addedline .diffchange{
  background:#172d26 !important;
  color:#ffffff !important;
}
 
.diff-deletedline .diffchange{
  background:#3e1d17 !important;
  color:#ffffff !important;
}
}
body.skin-citizen .citizen-menu__card,
 
body.skin-citizen .citizen-drawer__card,
.diff-addedline .diffchange a,
body.skin-citizen .citizen-search__form,
.diff-addedline .diffchange a:visited,
body.skin-citizen .citizen-search__footer{
.diff-deletedline .diffchange a,
background:var(--color-surface-1) !important;
.diff-deletedline .diffchange a:visited{
-webkit-backdrop-filter:none !important;
  color:var(--color-link) !important;
backdrop-filter:none !important;
}
}
.diff-addedline .diffchange a:hover,
.diff-addedline .diffchange a:visited:hover,
.diff-deletedline .diffchange a:hover,
.diff-deletedline .diffchange a:visited:hover{
  color:var(--color-link--hover) !important;
}
/* -------------------------------------------------------------------------- */
/* 11) Default viewpoint safety (<640px)                                      */
/* -------------------------------------------------------------------------- */
/* Mobile glass removal stays theme-owned and is mapped to the default        */
/* viewpoint of the canonical ladder.                                        */
@media (max-width:639px){
  :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/MediaWiki:Citizen.css"