mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-01 17:36:49 +00:00
156 lines
10 KiB
Plaintext
156 lines
10 KiB
Plaintext
/*
|
|
* Citizen
|
|
*
|
|
* Core MediaWiki skin tokens
|
|
* Used by supported extensions and other UI in the MW ecosystem
|
|
* @see https://phabricator.wikimedia.org/T349359
|
|
*/
|
|
|
|
@import 'mediawiki.skin.defaults.less';
|
|
|
|
/*
|
|
* Codex design tokens
|
|
* @see https://github.com/wikimedia/mediawiki/blob/master/resources/lib/codex-design-tokens/theme-wikimedia-ui.less
|
|
* TODO: Revisit on the next LTS release
|
|
*/
|
|
|
|
// Use import on MW 1.43
|
|
// @import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';
|
|
|
|
// Backported breakpoint variables
|
|
// @since MW 1.41
|
|
@min-width-breakpoint-mobile: 320px;
|
|
@min-width-breakpoint-tablet: 640px;
|
|
@min-width-breakpoint-desktop: 1120px;
|
|
@min-width-breakpoint-desktop-wide: 1680px;
|
|
@max-width-breakpoint-mobile: ( @min-width-breakpoint-tablet - 1px );
|
|
@max-width-breakpoint-tablet: ( @min-width-breakpoint-desktop - 1px );
|
|
@max-width-breakpoint-desktop: ( @min-width-breakpoint-desktop-wide - 1px );
|
|
|
|
// Backported CSS variables
|
|
// @version Codex Design Tokens v1.8.0
|
|
// @since MW 1.43
|
|
@color-base: var( --color-base, #202122 );
|
|
@color-base--hover: var( --color-base--hover, #404244 ); // Aimed to be replaced by `color.gray600` in future.
|
|
@color-emphasized: var( --color-emphasized, #000 );
|
|
@color-subtle: var( --color-subtle, #54595d );
|
|
@color-placeholder: var( --color-placeholder, #72777d );
|
|
@color-disabled: var( --color-disabled, #72777d );
|
|
@color-inverted: var( --color-inverted, #fff );
|
|
@color-inverted-fixed: var( --color-inverted-fixed, #fff ); // The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes.
|
|
@color-progressive: var( --color-progressive, #36c ); // 'Progressive' Color and states
|
|
@color-progressive--hover: var( --color-progressive--hover, #447ff5 );
|
|
@color-progressive--active: var( --color-progressive--active, #2a4b8d );
|
|
@color-progressive--focus: var( --color-progressive--focus, #36c );
|
|
@color-destructive: var( --color-destructive, #d73333 ); // 'Destructive' Color and states
|
|
@color-destructive--hover: var( --color-destructive--hover, #ff4242 );
|
|
@color-destructive--active: var( --color-destructive--active, #b32424 );
|
|
@color-destructive--focus: var( --color-destructive--focus, #36c );
|
|
@color-visited: var( --color-visited, #6b4ba1 ); // 'Visited' color. In combination with progressive. Used for default links.
|
|
@color-destructive--visited: var( --color-destructive--visited, #a55858 ); // Red link 'Visited' color. Used for visited red links.
|
|
@color-error: var( --color-error, #d73333 );
|
|
@color-warning: var( --color-warning, #edab00 ); // Note, this is only meant for warning icon for contrast reasons.
|
|
@color-success: var( --color-success, #14866d ); // Note, this needs to use a tone darker than Red and Yellow for contrast reasons with background White.
|
|
@color-notice: var( --color-notice, #202122 );
|
|
@color-content-added: var( --color-content-added, #096450 );
|
|
@color-content-removed: var( --color-content-removed, #b32424 );
|
|
@filter-invert-icon: var( --filter-invert-icon, 0 );
|
|
@filter-invert-primary-button-icon: var( --filter-invert-primary-button-icon, 1 );
|
|
@box-shadow-color-base: var( --box-shadow-color-base, #000 );
|
|
@box-shadow-color-progressive--active: var( --box-shadow-color-progressive--active, #2a4b8d );
|
|
@box-shadow-color-progressive--focus: var( --box-shadow-color-progressive--focus, #36c );
|
|
@box-shadow-color-progressive-selected: var( --box-shadow-color-progressive-selected, #36c );
|
|
@box-shadow-color-progressive-selected--hover: var( --box-shadow-color-progressive-selected--hover, #447ff5 );
|
|
@box-shadow-color-progressive-selected--active: var( --box-shadow-color-progressive-selected--active, #2a4b8d );
|
|
@box-shadow-color-destructive--focus: var( --box-shadow-color-destructive--focus, #36c );
|
|
@box-shadow-color-inverted: var( --box-shadow-color-inverted, #fff );
|
|
@box-shadow-color-transparent: var( --box-shadow-color-transparent, transparent );
|
|
@background-color-interactive: var( --background-color-interactive, #eaecf0 );
|
|
@background-color-interactive-subtle: var( --background-color-interactive-subtle, #f8f9fa );
|
|
@background-color-disabled: var( --background-color-disabled, #c8ccd1 ); // Components like Buttons, Checkboxes, Radios, ProgressBars….
|
|
@background-color-disabled-subtle: var( --background-color-disabled-subtle, #eaecf0 ); // Components like TextInputs, Selects….
|
|
@background-color-progressive: var( --background-color-progressive, #36c );
|
|
@background-color-progressive--hover: var( --background-color-progressive--hover, #447ff5 );
|
|
@background-color-progressive--active: var( --background-color-progressive--active, #2a4b8d );
|
|
@background-color-progressive--focus: var( --background-color-progressive--focus, #36c );
|
|
@background-color-progressive-subtle: var( --background-color-progressive-subtle, #eaf3ff );
|
|
@background-color-destructive: var( --background-color-destructive, #d73333 );
|
|
@background-color-destructive--hover: var( --background-color-destructive--hover, #ff4242 );
|
|
@background-color-destructive--active: var( --background-color-destructive--active, #b32424 );
|
|
@background-color-destructive--focus: var( --background-color-destructive--focus, #36c );
|
|
@background-color-destructive-subtle: var( --background-color-destructive-subtle, #fee7e6 );
|
|
@background-color-error: var( --background-color-error, #d73333 );
|
|
@background-color-error--hover: var( --background-color-error--hover, #ff4242 );
|
|
@background-color-error--active: var( --background-color-error--active, #b32424 );
|
|
@background-color-error-subtle: var( --background-color-error-subtle, #fee7e6 );
|
|
@background-color-warning-subtle: var( --background-color-warning-subtle, #fef6e7 );
|
|
@background-color-success-subtle: var( --background-color-success-subtle, #d5fdf4 );
|
|
@background-color-notice-subtle: var( --background-color-notice-subtle, #eaecf0 );
|
|
@background-color-content-added: var( --background-color-content-added, #afb6e9 );
|
|
@background-color-content-removed: var( --background-color-content-removed, #fc3 );
|
|
@background-color-backdrop-light: var( --background-color-backdrop-light, rgba( 255, 255, 255, 0.65 ) ); // Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask.
|
|
@background-color-backdrop-dark: var( --background-color-backdrop-dark, rgba( 0, 0, 0, 0.65 ) );
|
|
@background-color-base: var( --background-color-base, #fff ); // Background Colors for static elements (for page layout, sections, etc.) from here on.
|
|
@background-color-base-fixed: var( --background-color-base-fixed, #fff ); // The same as background-color-base in light mode, but does not change in dark mode. Use this for things that should be white in both modes.
|
|
@background-color-neutral: var( --background-color-neutral, #eaecf0 );
|
|
@background-color-neutral-subtle: var( --background-color-neutral-subtle, #f8f9fa );
|
|
@background-color-transparent: var( --background-color-transparent, transparent );
|
|
@background-color-inverted: var( --background-color-inverted, #101418 );
|
|
@background-color-button-quiet--hover: var( --background-color-button-quiet--hover, rgba( 0, 24, 73, 0.027 ) );
|
|
@background-color-button-quiet--active: var( --background-color-button-quiet--active, rgba( 0, 24, 73, 0.082 ) );
|
|
@background-color-input-binary--checked: var( --background-color-input-binary--checked, #36c );
|
|
@background-color-tab-list-item-framed--hover: var( --background-color-tab-list-item-framed--hover, rgba( 255, 255, 255, 0.3 ) );
|
|
@background-color-tab-list-item-framed--active: var( --background-color-tab-list-item-framed--active, rgba( 255, 255, 255, 0.65 ) );
|
|
@opacity-icon-base: var( --opacity-icon-base, 0.87 );
|
|
@opacity-icon-base--hover: var( --opacity-icon-base--hover, 0.74 );
|
|
@opacity-icon-base--selected: var( --opacity-icon-base--selected, 1 );
|
|
@opacity-icon-base--disabled: var( --opacity-icon-base--disabled, 0.51 );
|
|
@opacity-icon-placeholder: var( --opacity-icon-placeholder, 0.51 );
|
|
@opacity-icon-subtle: var( --opacity-icon-subtle, 0.67 );
|
|
@border-color-base: var( --border-color-base, #a2a9b1 );
|
|
@border-color-interactive: var( --border-color-interactive, #72777d );
|
|
@border-color-disabled: var( --border-color-disabled, #c8ccd1 );
|
|
@border-color-subtle: var( --border-color-subtle, #c8ccd1 );
|
|
@border-color-muted: var( --border-color-muted, #eaecf0 );
|
|
@border-color-inverted: var( --border-color-inverted, #fff );
|
|
@border-color-progressive: var( --border-color-progressive, #36c );
|
|
@border-color-progressive--hover: var( --border-color-progressive--hover, #447ff5 );
|
|
@border-color-progressive--active: var( --border-color-progressive--active, #2a4b8d );
|
|
@border-color-progressive--focus: var( --border-color-progressive--focus, #36c );
|
|
@border-color-destructive: var( --border-color-destructive, #d73333 );
|
|
@border-color-destructive--hover: var( --border-color-destructive--hover, #ff4242 );
|
|
@border-color-destructive--active: var( --border-color-destructive--active, #b32424 );
|
|
@border-color-destructive--focus: var( --border-color-destructive--focus, #36c );
|
|
@border-color-error: var( --border-color-error, #b32424 );
|
|
@border-color-error--hover: var( --border-color-error--hover, #ff4242 );
|
|
@border-color-warning: var( --border-color-warning, #a66200 );
|
|
@border-color-success: var( --border-color-success, #096450 );
|
|
@border-color-notice: var( --border-color-notice, #54595d );
|
|
@border-color-content-added: var( --border-color-content-added, #afb6e9 );
|
|
@border-color-content-removed: var( --border-color-content-removed, #fc3 );
|
|
@border-color-transparent: var( --border-color-transparent, transparent );
|
|
@border-color-divider: var( --border-color-divider, #a2a9b1 );
|
|
@outline-color-progressive--focus: var( --outline-color-progressive--focus, #36c ); // Use in places where no more customized focus styles are provided, for example on generic `:focus`.
|
|
|
|
// LESS variable override
|
|
@font-size-x-small: var( --font-size-x-small );
|
|
@font-size-small: var( --font-size-small );
|
|
@font-size-medium: var( --font-size-medium );
|
|
@font-size-large: var( --font-size-large );
|
|
@font-size-x-large: var( --font-size-x-large );
|
|
@font-size-xx-large: var( --font-size-xx-large );
|
|
@font-size-xxx-large: var( --font-size-xxx-large );
|
|
|
|
/*
|
|
* Skin variables that are not Codex tokens
|
|
* @see https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.less/mediawiki.skin.defaults.less
|
|
*/
|
|
@color-link: var( --color-link );
|
|
@color-link--visited: var( --color-link );
|
|
@color-link--active: var( --color-link--active );
|
|
@color-link-new: var( --color-link-red );
|
|
@color-link-new--visited: var( --color-link-red );
|
|
@color-link-external: var( --color-link );
|
|
@color-link-external--visited: var( --color-link );
|
|
@color-link-external--active: var( --color-link--active );
|