MediaWiki:Citizen.css
MediaWiki interface page
More actions
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 */
/* 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;
}
}