mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-11 05:56:16 +00:00
141 lines
4.4 KiB
Plaintext
141 lines
4.4 KiB
Plaintext
/*
|
|
* Citizen
|
|
*
|
|
* All LESS variables used in the skin must be defined here
|
|
* Use CSS variables from tokens.less is preferrable
|
|
* Only import this stylesheet when LESS variables is nessecary
|
|
*
|
|
* Related files:
|
|
* - Citizen tokens: skins.citizen.styles/tokens.less
|
|
* - Override MW skin default variables: mediawiki.less/mediawiki.skin.variables.less
|
|
*
|
|
*/
|
|
|
|
/* Imports */
|
|
/*
|
|
* MediaWiki mixins
|
|
* @see https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.less/mediawiki.mixins.less
|
|
*/
|
|
@import 'mediawiki.mixins';
|
|
/*
|
|
* MediaWiki skin variables
|
|
* mediawiki.less/mediawiki.skin.variables.less
|
|
* @see https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.less/mediawiki.skin.defaults.less
|
|
*/
|
|
@import 'mediawiki.skin.variables.less';
|
|
|
|
/* == Spacing == */
|
|
@space-unit: 1rem;
|
|
|
|
/* == Fonts == */
|
|
/*
|
|
* --font-family-citizen-base-xx are default fonts prioritized by Citizen.
|
|
* --font-family-language-xx are language-specific fonts from language RL module.
|
|
* It is empty by default but populated by Citizen language modules such as the CJK one.
|
|
*/
|
|
// Citizen sans-serif fonts
|
|
@font-family-base: var( --font-family-citizen-base ), var( --font-family-language-base ), system-ui, -apple-system, sans-serif;
|
|
// Citizen serif fonts
|
|
@font-family-serif: var( --font-family-citizen-serif ), var( --font-family-language-serif ), 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
|
|
// Citizen monospace fonts
|
|
@font-family-monospace: var( --font-family-citizen-monospace ), var( --font-family-language-monospace ), 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', 'Courier New', monospace;
|
|
|
|
/* == Colors == */
|
|
/* Base theme */
|
|
@color-primary__h: 220;
|
|
@color-primary__s: 60%;
|
|
@color-primary__l: 50%;
|
|
|
|
/*
|
|
* Syntax highlight colors
|
|
* Based on Material Theme Lighter
|
|
* https://material-theme.site
|
|
*/
|
|
@color-syntax-red: #e53935;
|
|
@color-syntax-orange: #f76d47;
|
|
@color-syntax-yellow: #e2931d;
|
|
@color-syntax-green: #91b859;
|
|
@color-syntax-cyan: #39adb5;
|
|
@color-syntax-blue: #6182b8;
|
|
@color-syntax-paleblue: #8796b0;
|
|
@color-syntax-purple: #9c3eda;
|
|
@color-syntax-brown: #916b53;
|
|
@color-syntax-pink: #ff5370;
|
|
@color-syntax-violet: #945eb8;
|
|
@color-syntax-grey: #90a4ae;
|
|
|
|
/*
|
|
* Syntax highlight colors
|
|
* Based on Material Theme Palenight
|
|
* https://material-theme.site
|
|
*/
|
|
@color-syntax-red-dark: #f07178;
|
|
@color-syntax-orange-dark: #f78c6c;
|
|
@color-syntax-yellow-dark: #ffcb6b;
|
|
@color-syntax-green-dark: #c3e88d;
|
|
@color-syntax-cyan-dark: #89ddff;
|
|
@color-syntax-blue-dark: #82aaff;
|
|
@color-syntax-paleblue-dark: #b2ccd6;
|
|
@color-syntax-purple-dark: #c792ea;
|
|
@color-syntax-brown-dark: #916b53;
|
|
@color-syntax-pink-dark: #ff9cac;
|
|
@color-syntax-violet-dark: #bb80b3;
|
|
@color-syntax-grey-dark: #676E95;
|
|
|
|
/* == Box model properties == */
|
|
/* `--*size` variables are used for `*width` & `*height` properties. */
|
|
@size-icon: 1.25rem;
|
|
// Not in the header section it is also used outside of header
|
|
@header-size: 3.5rem;
|
|
// 67.5rem at 16px font size
|
|
// We use px because it would be frustrating if max-width changes with font size
|
|
@width-layout: 1080px;
|
|
// TODO: Revise this number, fixed value isn't great but we need it for b
|
|
@width-toc: 240px;
|
|
|
|
/* Paddings */
|
|
@padding-page: 16px;
|
|
|
|
/* Transitions */
|
|
@transition-hover: var( --transition-duration-base ) var( --transition-timing-function-ease );
|
|
@transition-menu: var( --transition-duration-medium ) var( --transition-timing-function-ease-out );
|
|
|
|
/*
|
|
* Framework
|
|
*/
|
|
@html-font-size: 100%;
|
|
@icon-size: 1.125rem; // 18px, TODO: Replace this var
|
|
@icon-box-size: @icon-size + @icon-margin * 2;
|
|
@icon-margin: 3px;
|
|
|
|
/*
|
|
* Legacy colors
|
|
*
|
|
* They are used by the SMW skinstyles and a few MW UI stuff.
|
|
* Those styles should be updated to the new standard.
|
|
* After that we can remove all theses LESS variables.
|
|
*/
|
|
@color-base: #54595d;
|
|
@color-base--emphasized: #202122;
|
|
@color-base--subtle: #72777d;
|
|
|
|
@color-primary: #36c;
|
|
@color-primary--hover: #5b84d6;
|
|
@color-primary--active: #2a4b8d;
|
|
|
|
@dark-bg-10: #1d2129;
|
|
@dark-bg-20: #22262d;
|
|
@dark-bg-30: #24272f;
|
|
@dark-bg-40: #2b2f36;
|
|
@dark-bg-50: #33363d;
|
|
@dark-bg-60: #34383f;
|
|
|
|
/*
|
|
* Used by Math and WikiHiero for recolor
|
|
* TODO: Figure out a way to do recolor with CSS variable
|
|
* e.g. If the primary color is changed on wiki, it won't be reflected here.
|
|
*/
|
|
@dark-color-base: hsl( @color-primary__h, 25%, 80% );
|
|
@dark-color-base--emphasized: hsl( @color-primary__h, 80%, 95% );
|
|
@dark-color-base--subtle: hsl( @color-primary__h, 25%, 65% );
|