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
 
Line 1: Line 1:
/* SpiritVale Wiki — Citizen.css */
/* SpiritVale Wiki — Citizen.css */
/* Theme tokens, Citizen skin overrides, and global chrome polish. */
/* Theme tokens, Citizen skin overrides, and global chrome polish. */
/* -------------------------------------------------------------------------- */
/* Canonical ownership map                                                    */
/* -------------------------------------------------------------------------- */
/* Citizen.css is the theme/chrome layer. It owns:                            */
/* - skin tokens and color-role overrides                                      */
/* - Citizen shell/chrome presentation                                        */
/* - 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                                                        */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
Line 335: Line 363:


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* 11) Mobile glass removal */
/* 11) Default viewpoint safety (<640px)                                      */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
@media (max-width:500px){
/* Mobile glass removal stays theme-owned and is mapped to the default        */
/* viewpoint of the canonical ladder.                                        */
@media (max-width:639px){
   :root{
   :root{
     --backdrop-filter-frosted-glass:none !important;
     --backdrop-filter-frosted-glass:none !important;

Latest revision as of 22:39, 7 March 2026

/* SpiritVale Wiki — Citizen.css */
/* Theme tokens, Citizen skin overrides, and global chrome polish. */
/* -------------------------------------------------------------------------- */
/* Canonical ownership map                                                     */
/* -------------------------------------------------------------------------- */
/* Citizen.css is the theme/chrome layer. It owns:                             */
/* - skin tokens and color-role overrides                                      */
/* - Citizen shell/chrome presentation                                         */
/* - 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                                                         */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* 1) Shared tokens */
/* -------------------------------------------------------------------------- */
:root{
  --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);
}

/* -------------------------------------------------------------------------- */
/* 3) Day mode */
/* -------------------------------------------------------------------------- */
:root.skin-theme-clientpref-day{
  --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-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;

  --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) OS mode */
/* -------------------------------------------------------------------------- */
@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-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);
  }
}

@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-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;

    --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);
  }
}

/* -------------------------------------------------------------------------- */
/* 5) Page canvas */
/* -------------------------------------------------------------------------- */
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);
}

/* -------------------------------------------------------------------------- */
/* 6) Search trigger */
/* -------------------------------------------------------------------------- */
.citizen-search-trigger{
  transition:transform 0.15s ease-in-out;
}

.citizen-search-trigger:hover{
  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){
  background:#172d26 !important;
  border-color:#18c37e !important;
  color:#ffffff !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;
}

.diff-addedline .diffchange a,
.diff-addedline .diffchange a:visited,
.diff-deletedline .diffchange a,
.diff-deletedline .diffchange a:visited{
  color:var(--color-link) !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/index.php?title=MediaWiki:Citizen.css&oldid=2738"
Last modified
This page was last edited on 7 March 2026, at 22:39.