MediaWiki:Citizen.css
Jump to navigation
Jump to search
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.
/* All CSS here will be loaded for users of the Citizen skin */
:root {
/* Disables images scaling when hovered with the mouse. Remove this declaration if you want to have it back. */
--transform-image-hover: unset;
--font-family-citizen-base: Arial, sans serif;
--xiv-heading-font: Noto Sans, sans serif;
/* This section handles colors, in a Citizen-y way. */
/* You can strip it all out and swap in anything you like, but maintaining this will keep skin-wide color consistent and responsive.*/
/* Change the below value to change the accent color - Edit buttons, links, etc. */
--color-progressive-oklch__h: 265;
/* Change the below hue value to change the background color - pages, headers, etc. */
/* This only does anything if the 'chroma' values are not 0. */
--xiv-surface-oklch__h: 80;
/* This sets the width of the sidebar, and adjusts everything necessary to match. */
--xiv-sidebar-size: 12rem;
/* These are the background colors, derived from the color-scheme responsive settings below. */
/* Be prepared to fix a bunch of stuff if you replace the oklch() values with fixed colors. */
--color-surface-0: oklch(var(--color-surface-0-oklch__l) var(--color-surface-0-oklch__c) var(--xiv-surface-oklch__h));
--color-surface-1: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--xiv-surface-oklch__h));
--color-surface-2: oklch(var(--color-surface-2-oklch__l) var(--color-surface-2-oklch__c) var(--xiv-surface-oklch__h));
--color-surface-3: oklch(var(--color-surface-3-oklch__l) var(--color-surface-3-oklch__c) var(--xiv-surface-oklch__h));
--color-surface-4: oklch(var(--color-surface-4-oklch__l) var(--color-surface-4-oklch__c) var(--xiv-surface-oklch__h));
/* This block lets you set the 'lightness' values of the surface colors in light mode. */
/* They should stay in order from brightest at 0 to darkest at 4. */
--xiv-cs0-light__l: 1;
--xiv-cs1-light__l: 0.925;
--xiv-cs2-light__l: 0.9;
--xiv-cs3-light__l: 0.85;
--xiv-cs4-light__l: 0.8;
/* This block lets you set the 'lightness' values of the surface colors in dark mode. */
/* They should stay in order from darkest at 0 brightest at 4. */
--xiv-cs0-dark__l: 0.2;
--xiv-cs1-dark__l: 0.25;
--xiv-cs2-dark__l: 0.3;
--xiv-cs3-dark__l: 0.4;
--xiv-cs4-dark__l: 0.5;
/* This block lets you set the 'chroma' values of the surface colors in light mode. */
--xiv-cs0-light__c: 0;
--xiv-cs1-light__c: 0;
--xiv-cs2-light__c: 0;
--xiv-cs3-light__c: 0;
--xiv-cs4-light__c: 0;
/* This block lets you set the 'chroma' values of the surface colors in dark mode. */
--xiv-cs0-dark__c: 0;
--xiv-cs1-dark__c: 0;
--xiv-cs2-dark__c: 0;
--xiv-cs3-dark__c: 0;
--xiv-cs4-dark__c: 0;
/* Text chroma */
--color-base-oklch__c: 0;
--color-subtle-oklch__c: 0;
--color-emphasized-oklch__c: 0;
}
.skin-theme-clientpref-day .mw-header,
.skin-theme-clientpref-day .citizen-page-container {
background: var(--color-surface-1);
}
#bodyContent {
padding: 0 1rem 1rem 1rem;
margin: 0 -1rem -1rem -1rem;
border-radius: var(--border-radius-base);
}
.skin-theme-clientpref-night #bodyContent {
background: var(--color-surface-1);
}
.skin-theme-clientpref-day #bodyContent {
background: var(--color-surface-0);
}
@media (prefers-color-scheme: light) {
.skin-theme-clientpref-os #bodyContent {
background: var(--color-surface-0);
}
}
@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os #bodyContent {
background: var(--color-surface-1);
}
}
@media (prefers-color-scheme: light) {
.skin-theme-clientpref-os .citizen-sticky-header-background {
background: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
}
}
.skin-theme-clientpref-day .citizen-sticky-header-background {
background: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));
}
#firstHeading h1, h2, h3, h4 {
font-family: var(--xiv-heading-font);
}
#mw-panel-toc {
backdrop-filter: unset;
}
body {
background-image: none;
}
.citizen-sitenotice-container {
background-color: var(--color-surface-0);
}
#citizen-main-menu .citizen-ui-icon {
display: none;
}
/* The desktop sidebar happens here. If you're finding that people who want the sidebar aren't getting it, you can shrink the 'min-width' number directly below. Set the sidebar size back at the top. */
/* Right now, it is set to avoid squishing the main column as much as possible. Decreasing this number will make squish the content of article pages at certain widths, so be careful. Decreasing it below 1120px will break things. */
@media (min-width: 1600px) {
.citizen-page-container {
padding-left: calc(var(--header-size) + var(--xiv-sidebar-size))
}
.citizen-drawer__header {
padding: var(--space-sm);
border-bottom: unset;
}
.citizen-drawer__siteinfo {
flex-direction: column-reverse;
row-gap: var(--space-md);
}
.citizen-siteStats {
flex-wrap: wrap;
row-gap: var(--space-xs);
justify-content: space-between;
}
.mw-logo-wordmark {
font-size: 1rem;
text-wrap: wrap;
text-align: center;
}
.citizen-drawer .citizen-dropdown-details {
display: none;
}
.citizen-drawer__logo {
display: none;
}
#citizen-drawer__card {
transform: unset;
margin: unset;
border-radius: unset;
background: unset;
backdrop-filter: unset;
box-shadow: unset;
border: unset;
min-width: unset;
content-visibility: visible;
max-height: 100vh;
width: var(--xiv-sidebar-size);
border-right: var(--border-base);
left: calc(100% + 1px);
}
.skin-theme-clientpref-day #citizen-drawer__card {
background: var(--color-surface-1);
}
.skin-theme-clientpref-night #citizen-drawer__card {
background: var(--color-surface-0);
}
@media (prefers-color-scheme: light) {
.skin-theme-clientpref-os #citizen-drawer__card {
background: var(--color-surface-1);
}
}
@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os #citizen-drawer__card {
background: var(--color-surface-0);
}
}
#citizen-drawer__card .citizen-menu__card-content {
opacity: unset;
overflow: unset;
display: flex;
flex-direction: column;
}
.citizen-sticky-header-container {
padding-left: var(--xiv-sidebar-size);
}
#citizen-main-menu {
margin-bottom: unset;
grid-template-columns: 1fr;
overflow-y: scroll;
}
#citizen-main-menu .citizen-menu__heading {
padding: var(--space-sm);
}
#citizen-main-menu .mw-list-item a {
min-height: 2rem;
}
}
/* These blocks shuffle some custom properties around to set the colors based on the above values. Changing them won't do much good. */
:root.skin-theme-clientpref-day {
--color-surface-0-oklch__c: var(--xiv-cs0-light__c);
--color-surface-1-oklch__c: var(--xiv-cs1-light__c);
--color-surface-2-oklch__c: var(--xiv-cs2-light__c);
--color-surface-3-oklch__c: var(--xiv-cs3-light__c);
--color-surface-4-oklch__c: var(--xiv-cs4-light__c);
--color-surface-0-oklch__l: var(--xiv-cs0-light__l);
--color-surface-1-oklch__l: var(--xiv-cs1-light__l);
--color-surface-2-oklch__l: var(--xiv-cs2-light__l);
--color-surface-3-oklch__l: var(--xiv-cs3-light__l);
--color-surface-4-oklch__l: var(--xiv-cs4-light__l);
}
@media (prefers-color-scheme: light) {
:root.skin-theme-clientpref-os {
--color-surface-0-oklch__c: var(--xiv-cs0-light__c);
--color-surface-1-oklch__c: var(--xiv-cs1-light__c);
--color-surface-2-oklch__c: var(--xiv-cs2-light__c);
--color-surface-3-oklch__c: var(--xiv-cs3-light__c);
--color-surface-4-oklch__c: var(--xiv-cs4-light__c);
--color-surface-0-oklch__l: var(--xiv-cs0-light__l);
--color-surface-1-oklch__l: var(--xiv-cs1-light__l);
--color-surface-2-oklch__l: var(--xiv-cs2-light__l);
--color-surface-3-oklch__l: var(--xiv-cs3-light__l);
--color-surface-4-oklch__l: var(--xiv-cs4-light__l);
}
}
:root.skin-theme-clientpref-night {
--color-base-oklch__c: 0;
--color-subtle-oklch__c: 0;
--color-emphasized-oklch__c: 0;
--color-surface-0-oklch__c: var(--xiv-cs0-dark__c);
--color-surface-1-oklch__c: var(--xiv-cs1-dark__c);
--color-surface-2-oklch__c: var(--xiv-cs2-dark__c);
--color-surface-3-oklch__c: var(--xiv-cs3-dark__c);
--color-surface-4-oklch__c: var(--xiv-cs4-dark__c);
--color-surface-0-oklch__l: var(--xiv-cs0-dark__l);
--color-surface-1-oklch__l: var(--xiv-cs1-dark__l);
--color-surface-2-oklch__l: var(--xiv-cs2-dark__l);
--color-surface-3-oklch__l: var(--xiv-cs3-dark__l);
--color-surface-4-oklch__l: var(--xiv-cs4-dark__l);
}
@media (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-base-oklch__c: 0;
--color-subtle-oklch__c: 0;
--color-emphasized-oklch__c: 0;
--color-surface-0-oklch__c: var(--xiv-cs0-dark__c);
--color-surface-1-oklch__c: var(--xiv-cs1-dark__c);
--color-surface-2-oklch__c: var(--xiv-cs2-dark__c);
--color-surface-3-oklch__c: var(--xiv-cs3-dark__c);
--color-surface-4-oklch__c: var(--xiv-cs4-dark__c);
--color-surface-0-oklch__l: var(--xiv-cs0-dark__l);
--color-surface-1-oklch__l: var(--xiv-cs1-dark__l);
--color-surface-2-oklch__l: var(--xiv-cs2-dark__l);
--color-surface-3-oklch__l: var(--xiv-cs3-dark__l);
--color-surface-4-oklch__l: var(--xiv-cs4-dark__l);
}
}