MediaWiki:Gadget-Variables.css

/* The CSS variables on this page constitute our wiki's design language. Please use them as much as possible to ensure a consistent site-wide design. Doing so allows us to easily change wiki colors (namely for April Fools events) and will eventually allow us to fully support both light and dark modes.

Unfortunately, Extension:TemplateStyles does not yet support variables at the time of writing. Until then, please copy the values instead of referencing the variables. https://phabricator.wikimedia.org/T320322 https://phabricator.wikimedia.org/T288201

The variables are placed in a gadget for minification and other ResourceLoader optimizations. They are separate from MediWiki:Gadget-Site.css partly because the code editor doesn't recognize variable definitions and it helps to contain the errors in one place.



/* mw-* variables are for overriding color values defined in MediaWiki stylesheets */ /* In an ideal world, MediaWiki would actually have their own CSS variables that we could override */ /* It would make custom theming a lot easier */ body { --mw-bg-button-primary: #36c; --mw-bg-body: var(--zw-bg-body); --mw-bg-header: var(--zw-bg-header); --mw-bg-highlight: var(--zw-bg-highlight); --mw-bg-page: var(--zw-bg-page); --mw-bg-surface: var(--zw-bg-header); /* For surfaces/blocks added by MediaWiki - category list, captioned thumbnails, galleries, table of contents, etc. */ --mw-bg-surface-warn: var(--zw-bg-header);

--mw-border: var(--zw-border); --mw-border-warn: var(--zw-border);

--mw-link: var(--zw-link); --mw-link-hover: var(--zw-link-hover); --mw-link-visited: var(--zw-link-visited); --mw-redlink: var(--zw-redlink); --mw-redlink-hover: var(--zw-redlink-hover);

--mw-text: var(--zw-text); --mw-text-filter: var(--zw-text-filter); --mw-text-button-frameless: #447ff5; --mw-text-button-frameless-hover: #36c; --mw-text-subdued: var(--zw-text-subdued); --mw-text-success: var(--zw-text-success); --mw-text-warning: var(--zw-text-warning); --mw-text-surface-warn: var(--zw-text); /* MediaWiki has two kinds of "warning" texts. One is red text (mw-text-warning above), the other black text on an orange background (this color) */ }

/* Design tokens, based on https://polaris.shopify.com/tokens */ body { --roundy-border-radius: 10px; /* Deprecated, use --zw-border-radius-2 instead */ --zw-border-radius-1: 0.25rem; --zw-border-radius-2: 0.5rem; --zw-border-radius-3: 0.75rem; --zw-border-radius-4: 1rem; --zw-border-base: var(--zw-border-width-1) solid var(--zw-border); --zw-border-width-1: 0.0625rem; --zw-border-width-2: 0.125rem; --zw-border-width-3: 0.1875rem; --zw-border-width-4: 0.25rem; --zw-border-width-5: 0.3125rem; --zw-box-shadow-1: 1px 1px 2px #000; --zw-box-shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); --zw-box-shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); --zw-breakpoints-s: 30.625rem; --zw-breakpoints-m: 53.125rem; --zw-breakpoints-l: 68.75rem; --zw-breakpoints-xl: 90rem; --zw-duration-300: 300ms; --zw-font-family-mono: ui-monospace, monospace; --zw-font-family-sans: system-ui, 'Segoe UI', 'Helvetica Neue', sans-serif;

--zw-space-025: 0.0625rem; --zw-space-05: 0.125rem; --zw-space-1: 0.25rem; --zw-space-2: 0.5rem; --zw-space-3: 0.75rem; --zw-space-4: 1rem; --zw-space-5: 1.25rem; --zw-space-6: 1.5rem; --zw-space-8: 2rem; --zw-space-10: 2.5rem; --zw-space-12: 3rem; --zw-space-16: 4rem; --zw-space-20: 5rem; --zw-space-24: 6rem; --zw-space-28: 7rem; --zw-space-32: 8rem; }

/* Default theme */ body, .zw-theme--wisdom { --zw-bg-alt: #163d5f; /* Alternating row color on tables with many rows */ --zw-bg-body: #0b284f; /* Outer site background */ --zw-bg-header: #336089; /* Table headers */ --zw-bg-highlight: #245681; /* Reference highlights, table row highlights */ --zw-bg-infobox: #214d74; --zw-bg-link: #17568c; /* Link-style buttons like Template:Category and Template:Main Page Categories */ --zw-bg-link-hover: #214b71; --zw-bg-link-pressed: #1b3d5e; --zw-bg-navbox-alt: #1a4d7a; /* Alternating row color for navboxes */ --zw-bg-page: #17456e; /* Wiki page background */ --zw-bg-surface: #17568c; /* For custom Zelda Wiki surface/blocks like tooltips, notices, Template:Comments and other block-style templates */ --zw-bg-toggle-gradient: linear-gradient(#1d679b, #1a4e7d); /* For Template:Tabs and Template:Hide */ --zw-bg-toggle-hover-gradient: linear-gradient(#305f89, #17456e); --zw-bg-toggle-active-gradient: linear-gradient(#1d578b, #153e63);

--zw-border: #426787; --zw-link: #f4f26b; --zw-link-filter: invert(84%) sepia(33%) saturate(594%) hue-rotate(12deg) brightness(101%) contrast(108%); /* Changes icons to --zw-link color */ --zw-link-rgb: 244, 242, 107; --zw-link-hover: #fbfac9; --zw-link-visited: #e7ea12; --zw-redlink: #fe5368; --zw-redlink-hover: #feb8c1;

--zw-text: #e6e6e6; --zw-text-filter: invert(100%) sepia(1%) saturate(503%) hue-rotate(196deg) brightness(111%) contrast(80%); /* Changes icons to --zw-text color */ --zw-text-success: #11a643; --zw-text-subdued: #bbbbbb; --zw-text-warning: #fe5368; }