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.



body { --roundy-border-radius: 10px; /* Deprecated, use --zw-border-radius-2 instead */ /* Main Page */ --margin-main-page-game : 1.4px; /* Design tokens, based on https://polaris.shopify.com/tokens */ --zw-border-radius-1: 0.25rem; --zw-border-radius-2: 0.5rem; --zw-border-radius-3: 0.75rem; --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: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); --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: 48rem; --zw-breakpoints-l: 65rem; --zw-breakpoints-xl: 90rem; --zw-duration-300: 300ms; --zw-font-family-mono: ui-monospace, monospace; --zw-font-family-sans: -apple-system, BlinkMacSystemFont, '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; }

/* Themes */ body.skin-vector, body.skin-timeless { --zw-background-body: #0b284f; /* Outer site background */ --zw-background-header: #336089; /* Table headers */ --zw-background-highlight: #245681; /* Reference highlights, table row highlights */ --zw-background-infobox: #214d74; --zw-background-interactive: #17568c; /* Link-style buttons like Template:Category and Template:Main Page Categories */ --zw-background-interactive-hover: #153e63; --zw-background-interactive-pressed: #10304c; --zw-background-mediawiki: #336089; /* For surfaces/blocks added by MediaWiki - category list, captioned thumbnails, galleries, table of contents, etc. */ --zw-background-page: #17456e; /* Wiki page background */ --zw-background-surface: #17568c; /* For custom Zelda Wiki surface/blocks like tooltips, notices, Template:Comments and other block-style templates */ --zw-border: #426787; --zw-gradient-tab: linear-gradient(#1d679b, #1a4e7d); --zw-gradient-tab-hover: linear-gradient(#305f89, #17456e); --zw-gradient-tab-active: linear-gradient(#1d578b, #153e63); --zw-link: #f4f26b; --zw-link-filter: invert(84%) sepia(33%) saturate(594%) hue-rotate(12deg) brightness(101%) contrast(108%); /* Changes SVGs to --zw-link color */ --zw-link-hover: #fbfac9; --zw-link-visited: #e7ea12; --zw-text: #e6e6e6; --zw-text-red-link: #fe5368; --zw-text-red-link-hover: #feb8c1; --zw-text-filter: invert(100%) sepia(1%) saturate(503%) hue-rotate(196deg) brightness(111%) contrast(80%); /* Changes SVGs to --zw-text color */ --zw-text-success: #11a643; --zw-text-subdued: #bbbbbb; --zw-text-warning: #fe5368; }