MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary Tags: Mobile edit Mobile web edit |
No edit summary Tags: Mobile edit Mobile web edit |
||
| Line 256: | Line 256: | ||
backdrop-filter:none !important; | backdrop-filter:none !important; | ||
} | } | ||
} | |||
/* ------------------------------------------------------------ | |||
Dropdown menu readability (light menu panels need dark text) | |||
------------------------------------------------------------ */ | |||
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{ | |||
color:#0b1a33 !important; | |||
} | |||
/* Codex menus (some widgets use these) */ | |||
body.skin-citizen .cdx-menu, | |||
body.skin-citizen .cdx-menu-item__text, | |||
body.skin-citizen .cdx-menu-item__label{ | |||
color:#0b1a33 !important; | |||
} | } | ||
Revision as of 04:47, 25 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;
}
}
/* ------------------------------------------------------------
Dropdown menu readability (light menu panels need dark text)
------------------------------------------------------------ */
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{
color:#0b1a33 !important;
}
/* Codex menus (some widgets use these) */
body.skin-citizen .cdx-menu,
body.skin-citizen .cdx-menu-item__text,
body.skin-citizen .cdx-menu-item__label{
color:#0b1a33 !important;
}