MediaWiki:Common.less/variables.less: Difference between revisions
(Created page with "→====================== THEME VARIABLES ======================: // colors are sorted from darkest to lightest // See <https://davidwalsh.name/sass-color-variables-dont-suck> for naming system // Don't change any of this unless you know what you're doing →------------------ brand colors ------------------: // blues @chathams-blue: #115883; @jelly-bean: #246c97; @steel-blue: #438ab5; @fountain-blue: #6ba5c8; @spindle:...") |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
/* ====================== THEME VARIABLES ====================== */// colors are sorted from darkest to lightest// See <https://davidwalsh.name/sass-color-variables-dont-suck> for naming system// Don't change any of this unless you know what you're doing/* ------------------ brand colors ------------------ */// blues@chathams-blue: #115883;@jelly-bean: #246c97;@steel-blue: #438ab5;@fountain-blue: #6ba5c8;@spindle: #c1deee;@selago: #f6fbfe;@nav-blue: #d8e5ff;// gray-blues@grey-gray: #ddd;@river-bed: #444e5a;@shuttle-gray: #5d6773;@gray-chateau: #949eaa;@loblolly: #bdc5cd;@mystic: #e4eaee;@black-haze: #f9fafa;// grays@mineshaft: #333;@tundora: #4c4c4c;@boulder: #777;@silver: #ccc;@gallery: #eee;@alabaster: #f9f9f9;// dark mode@black-pearl: #071022;@big-stone: #172136;@cloud-burst: #222e45;@pickled-bluewood: #313e59;@waikawa-grey: #596e96;@portage: #8cabe6;// BROWN dark mode@ebony-brown: #1b1612;@mocha-brown: #28221d;@cacao-brown: #312a25;@sable-brown: #3e362f;@driftwood-brown: #5e5248;@taupe-brown: #736559;@kharid-sand: #b79d7e;@slate-grey: #98a2b6;@ivory-white: #f4eaea;/* ------------------- other brands ------------------- */// Discord@discord-bg: #5865f2;@discord-bg-dark: #525ee0;@discord-bg-darker: #4c57d0;/* ------------------- status colors ------------------- */// reds@mocaccino: #801c13;@old-brick: #9f261e;@flamingo: #ee4231;@apricot-peach: #fbc0ba;@bridesmaid: #feecea;// oranges@antique-bronze: #7a3f08;@korma: #b55e0c;@ecstasy: #f7861b;@corvette: #fbcfa6;@lace: #fef0e4;// yellows@cinnamon: #786300;@olive: #a48900;@supernova: #f9d000;@golden: #fcea94;@half-dutch: #fef9de;// greens@san-felix: #2e5e05;@la-palma: #3c780a;@lima: #6bc71f;@caper: #c3e8a3;@frost: #ecf8e3;// blues@regal-blue: #03436b;@venice-blue: #0b5884;@curious-blue: #3ea6e6;@jordy-blue: #aad9f5;@tropical-blue: #e5f3fc;// purples@honey-flower: #3d276b;@seance: #4f348b;@medium-purple: #855cd8;@perfume: #cfc0f0;@heliotrope: #f0ecfa;// pinks@cosmic: #6d3662;@cannon-pink: #984c89;@lavender: #e874cf;@cherub: #f5c8ec;@french-lilac: #fceef9;// other@black: #000;@white: #fff;/* ---------------- shadows ---------------- */@box-shadow: 0 .25rem .35rem -0.25rem rgba(0,0,0,.1);@box-shadow-dark: 0 .25rem .35rem -0.25rem rgba(0,0,0,.3);/* --------------------- border-radius --------------------- */// from wmui:// <https://github.com/wikimedia/wikimedia-ui-base/blob/master/wikimedia-ui-base.less>@border-radius: 2px;@border-radius-circle: 50%;@border-radius-round: 9999px;/* --------------------- breakpoints --------------------- */// also from wmui// mobile@width-breakpoint-mobile: 320px;// tablet@width-breakpoint-tablet: 720px;// desktop@width-breakpoint-desktop: 1000px;// Wider desktop@width-breakpoint-desktop-wide: 1200px;@width-breakpoint-desktop-extrawide: 2000px;/* ------------------------ easing curves <https://easings.net> ------------------------ */@ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);@ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);/* ----------------- typefaces ----------------- */// imported in [[MediaWiki:Common.less/fonts.less]]@serif-stack: 'PT Serif', 'Palatino', 'Georgia', serif;@sans-serif-stack: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;/* Weird gloop styles */@BODY_MAIN: var(--body-main);@BODY_LIGHT: var(--body-light);@BODY_MID: var(--body-mid);@BODY_DARK: var(--body-dark);@BODY_BORDER: var(--body-border);@BUTTON_BORDER: var(--button-border);@BUTTON_DARK: var(--button-dark);@BUTTON_LIGHT: var(--button-light);@SIDEBAR: var(--sidebar);@SEARCH_BOX: var(--search-box);@LINK_COLOR: var(--link-color);@REDLINK_COLOR: var(--redlink-color);@TEXT_COLOR: var(--text-color);// colours for /highlight.less@ADMIN_BLUE: var(--admin-blue);@BEARCAT_GREEN: var(--bearcat-green);@AWB_PURPLE: var(--awb-purple);@JMOD_CROWN: "Jagex_small_logo.png";// Link colours@RSW_BLUE: var(--rsw-blue);@OSRSW_BROWN: var(--osrsw-brown);@infobox-background: @BODY_LIGHT;@infobox-header-color: @BODY_DARK;@infobox-border-color: @BODY_BORDER;@infobox-subheader-color: @BODY_DARK; |
|||
/* ====================== |
|||
THEME VARIABLES |
|||
====================== */ |
|||
// colors are sorted from darkest to lightest |
|||
// See <https://davidwalsh.name/sass-color-variables-dont-suck> for naming system |
|||
// Don't change any of this unless you know what you're doing |
|||
/* ------------------ |
|||
brand colors |
|||
------------------ */ |
|||
// blues |
|||
@chathams-blue: #115883; |
|||
@jelly-bean: #246c97; |
|||
@steel-blue: #438ab5; |
|||
@fountain-blue: #6ba5c8; |
|||
@spindle: #c1deee; |
|||
@selago: #f6fbfe; |
|||
@nav-blue: #d8e5ff; |
|||
// gray-blues |
|||
@grey-gray: #ddd; |
|||
@river-bed: #444e5a; |
|||
@shuttle-gray: #5d6773; |
|||
@gray-chateau: #949eaa; |
|||
@loblolly: #bdc5cd; |
|||
@mystic: #e4eaee; |
|||
@black-haze: #f9fafa; |
|||
// grays |
|||
@mineshaft: #333; |
|||
@tundora: #4c4c4c; |
|||
@boulder: #777; |
|||
@silver: #ccc; |
|||
@gallery: #eee; |
|||
@alabaster: #f9f9f9; |
|||
// dark mode |
|||
@black-pearl: #071022; |
|||
@big-stone: #172136; |
|||
@cloud-burst: #222e45; |
|||
@pickled-bluewood: #313e59; |
|||
@waikawa-grey: #596e96; |
|||
@portage: #8cabe6; |
|||
// BROWN dark mode |
|||
@ebony-brown: #1b1612; |
|||
@mocha-brown: #28221d; |
|||
@cacao-brown: #312a25; |
|||
@sable-brown: #3e362f; |
|||
@driftwood-brown: #5e5248; |
|||
@taupe-brown: #736559; |
|||
@kharid-sand: #b79d7e; |
|||
@slate-grey: #98a2b6; |
|||
@ivory-white: #f4eaea; |
|||
/* ------------------- |
|||
other brands |
|||
------------------- */ |
|||
// Discord |
|||
@discord-bg: #5865f2; |
|||
@discord-bg-dark: #525ee0; |
|||
@discord-bg-darker: #4c57d0; |
|||
/* ------------------- |
|||
status colors |
|||
------------------- */ |
|||
// reds |
|||
@mocaccino: #801c13; |
|||
@old-brick: #9f261e; |
|||
@flamingo: #ee4231; |
|||
@apricot-peach: #fbc0ba; |
|||
@bridesmaid: #feecea; |
|||
// oranges |
|||
@antique-bronze: #7a3f08; |
|||
@korma: #b55e0c; |
|||
@ecstasy: #f7861b; |
|||
@corvette: #fbcfa6; |
|||
@lace: #fef0e4; |
|||
// yellows |
|||
@cinnamon: #786300; |
|||
@olive: #a48900; |
|||
@supernova: #f9d000; |
|||
@golden: #fcea94; |
|||
@half-dutch: #fef9de; |
|||
// greens |
|||
@san-felix: #2e5e05; |
|||
@la-palma: #3c780a; |
|||
@lima: #6bc71f; |
|||
@caper: #c3e8a3; |
|||
@frost: #ecf8e3; |
|||
// blues |
|||
@regal-blue: #03436b; |
|||
@venice-blue: #0b5884; |
|||
@curious-blue: #3ea6e6; |
|||
@jordy-blue: #aad9f5; |
|||
@tropical-blue: #e5f3fc; |
|||
// purples |
|||
@honey-flower: #3d276b; |
|||
@seance: #4f348b; |
|||
@medium-purple: #855cd8; |
|||
@perfume: #cfc0f0; |
|||
@heliotrope: #f0ecfa; |
|||
// pinks |
|||
@cosmic: #6d3662; |
|||
@cannon-pink: #984c89; |
|||
@lavender: #e874cf; |
|||
@cherub: #f5c8ec; |
|||
@french-lilac: #fceef9; |
|||
// other |
|||
@black: #000; |
|||
@white: #fff; |
|||
/* ---------------- |
|||
shadows |
|||
---------------- */ |
|||
@box-shadow: 0 .25rem .35rem -0.25rem rgba(0,0,0,.1); |
|||
@box-shadow-dark: 0 .25rem .35rem -0.25rem rgba(0,0,0,.3); |
|||
/* --------------------- |
|||
border-radius |
|||
--------------------- */ |
|||
// from wmui: |
|||
// <https://github.com/wikimedia/wikimedia-ui-base/blob/master/wikimedia-ui-base.less> |
|||
@border-radius: 2px; |
|||
@border-radius-circle: 50%; |
|||
@border-radius-round: 9999px; |
|||
/* --------------------- |
|||
breakpoints |
|||
--------------------- */ |
|||
// also from wmui |
|||
// mobile |
|||
@width-breakpoint-mobile: 320px; |
|||
// tablet |
|||
@width-breakpoint-tablet: 720px; |
|||
// desktop |
|||
@width-breakpoint-desktop: 1000px; |
|||
// Wider desktop |
|||
@width-breakpoint-desktop-wide: 1200px; |
|||
@width-breakpoint-desktop-extrawide: 2000px; |
|||
/* ------------------------ |
|||
easing curves |
|||
<https://easings.net> |
|||
------------------------ */ |
|||
@ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); |
|||
@ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); |
|||
/* ----------------- |
|||
typefaces |
|||
----------------- */ |
|||
// imported in [[MediaWiki:Common.less/fonts.less]] |
|||
@serif-stack: 'PT Serif', 'Palatino', 'Georgia', serif; |
|||
@sans-serif-stack: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif; |
|||
/* Weird gloop styles */ |
|||
@BODY_MAIN: var(--body-main); |
|||
@BODY_LIGHT: var(--body-light); |
|||
@BODY_MID: var(--body-mid); |
|||
@BODY_DARK: var(--body-dark); |
|||
@BODY_BORDER: var(--body-border); |
|||
@BUTTON_BORDER: var(--button-border); |
|||
@BUTTON_DARK: var(--button-dark); |
|||
@BUTTON_LIGHT: var(--button-light); |
|||
@SIDEBAR: var(--sidebar); |
|||
@SEARCH_BOX: var(--search-box); |
|||
@LINK_COLOR: var(--link-color); |
|||
@REDLINK_COLOR: var(--redlink-color); |
|||
@TEXT_COLOR: var(--text-color); |
|||
// colours for /highlight.less |
|||
@ADMIN_BLUE: var(--admin-blue); |
|||
@BEARCAT_GREEN: var(--bearcat-green); |
|||
@AWB_PURPLE: var(--awb-purple); |
|||
@JMOD_CROWN: "Jagex_small_logo.png"; |
|||
// Link colours |
|||
@RSW_BLUE: var(--rsw-blue); |
|||
@OSRSW_BROWN: var(--osrsw-brown); |
|||
@infobox-background: @BODY_LIGHT; |
|||
@infobox-header-color: @BODY_DARK; |
|||
@infobox-border-color: @BODY_BORDER; |
|||
@infobox-subheader-color: @BODY_DARK; |
Revision as of 17:12, 17 October 2024
/* ====================== THEME VARIABLES ====================== */// colors are sorted from darkest to lightest// See <https://davidwalsh.name/sass-color-variables-dont-suck> for naming system// Don't change any of this unless you know what you're doing/* ------------------ brand colors ------------------ */// blues@chathams-blue: #115883;@jelly-bean: #246c97;@steel-blue: #438ab5;@fountain-blue: #6ba5c8;@spindle: #c1deee;@selago: #f6fbfe;@nav-blue: #d8e5ff;// gray-blues@grey-gray: #ddd;@river-bed: #444e5a;@shuttle-gray: #5d6773;@gray-chateau: #949eaa;@loblolly: #bdc5cd;@mystic: #e4eaee;@black-haze: #f9fafa;// grays@mineshaft: #333;@tundora: #4c4c4c;@boulder: #777;@silver: #ccc;@gallery: #eee;@alabaster: #f9f9f9;// dark mode@black-pearl: #071022;@big-stone: #172136;@cloud-burst: #222e45;@pickled-bluewood: #313e59;@waikawa-grey: #596e96;@portage: #8cabe6;// BROWN dark mode@ebony-brown: #1b1612;@mocha-brown: #28221d;@cacao-brown: #312a25;@sable-brown: #3e362f;@driftwood-brown: #5e5248;@taupe-brown: #736559;@kharid-sand: #b79d7e;@slate-grey: #98a2b6;@ivory-white: #f4eaea;/* ------------------- other brands ------------------- */// Discord@discord-bg: #5865f2;@discord-bg-dark: #525ee0;@discord-bg-darker: #4c57d0;/* ------------------- status colors ------------------- */// reds@mocaccino: #801c13;@old-brick: #9f261e;@flamingo: #ee4231;@apricot-peach: #fbc0ba;@bridesmaid: #feecea;// oranges@antique-bronze: #7a3f08;@korma: #b55e0c;@ecstasy: #f7861b;@corvette: #fbcfa6;@lace: #fef0e4;// yellows@cinnamon: #786300;@olive: #a48900;@supernova: #f9d000;@golden: #fcea94;@half-dutch: #fef9de;// greens@san-felix: #2e5e05;@la-palma: #3c780a;@lima: #6bc71f;@caper: #c3e8a3;@frost: #ecf8e3;// blues@regal-blue: #03436b;@venice-blue: #0b5884;@curious-blue: #3ea6e6;@jordy-blue: #aad9f5;@tropical-blue: #e5f3fc;// purples@honey-flower: #3d276b;@seance: #4f348b;@medium-purple: #855cd8;@perfume: #cfc0f0;@heliotrope: #f0ecfa;// pinks@cosmic: #6d3662;@cannon-pink: #984c89;@lavender: #e874cf;@cherub: #f5c8ec;@french-lilac: #fceef9;// other@black: #000;@white: #fff;/* ---------------- shadows ---------------- */@box-shadow: 0 .25rem .35rem -0.25rem rgba(0,0,0,.1);@box-shadow-dark: 0 .25rem .35rem -0.25rem rgba(0,0,0,.3);/* --------------------- border-radius --------------------- */// from wmui:// <https://github.com/wikimedia/wikimedia-ui-base/blob/master/wikimedia-ui-base.less>@border-radius: 2px;@border-radius-circle: 50%;@border-radius-round: 9999px;/* --------------------- breakpoints --------------------- */// also from wmui// mobile@width-breakpoint-mobile: 320px;// tablet@width-breakpoint-tablet: 720px;// desktop@width-breakpoint-desktop: 1000px;// Wider desktop@width-breakpoint-desktop-wide: 1200px;@width-breakpoint-desktop-extrawide: 2000px;/* ------------------------ easing curves <https://easings.net> ------------------------ */@ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);@ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);/* ----------------- typefaces ----------------- */// imported in MediaWiki:Common.less/fonts.less@serif-stack: 'PT Serif', 'Palatino', 'Georgia', serif;@sans-serif-stack: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif;/* Weird gloop styles */@BODY_MAIN: var(--body-main);@BODY_LIGHT: var(--body-light);@BODY_MID: var(--body-mid);@BODY_DARK: var(--body-dark);@BODY_BORDER: var(--body-border);@BUTTON_BORDER: var(--button-border);@BUTTON_DARK: var(--button-dark);@BUTTON_LIGHT: var(--button-light);@SIDEBAR: var(--sidebar);@SEARCH_BOX: var(--search-box);@LINK_COLOR: var(--link-color);@REDLINK_COLOR: var(--redlink-color);@TEXT_COLOR: var(--text-color);// colours for /highlight.less@ADMIN_BLUE: var(--admin-blue);@BEARCAT_GREEN: var(--bearcat-green);@AWB_PURPLE: var(--awb-purple);@JMOD_CROWN: "Jagex_small_logo.png";// Link colours@RSW_BLUE: var(--rsw-blue);@OSRSW_BROWN: var(--osrsw-brown);@infobox-background: @BODY_LIGHT;@infobox-header-color: @BODY_DARK;@infobox-border-color: @BODY_BORDER;@infobox-subheader-color: @BODY_DARK;