mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-27 07:41:07 +00:00
b89873d99c
This is by default disabled since it is only used for wikis with CJK language, and also it adds around 100kb to the startup stylesheet. The fonts are subsetted with Google Fonts slicing pattern, so it should be performance friendly
423 lines
14 KiB
Plaintext
423 lines
14 KiB
Plaintext
/*
|
||
* Citizen - LESS variables
|
||
* https://starcitizen.tools
|
||
*/
|
||
|
||
// Import MediaWiki-supplied mixins
|
||
@import 'mediawiki.mixins';
|
||
|
||
/* == Breakpoints == */
|
||
/**
|
||
* Minimum available screen width at which a device can be considered a mobile device
|
||
* Many older feature phones have screens smaller than this value.
|
||
*/
|
||
@width-breakpoint-mobile: 320px;
|
||
|
||
/**
|
||
* Minimum available screen width at which a device can be considered a tablet
|
||
* The number is currently based on the device width of a Samsung Galaxy S5 mini and is low
|
||
* enough to cover iPad (768px).
|
||
*/
|
||
@width-breakpoint-tablet: 720px;
|
||
|
||
/* Minimum available screen width at which a device can be considered a desktop. */
|
||
@width-breakpoint-desktop: 1000px;
|
||
|
||
/* Wider desktop breakpoint */
|
||
@width-breakpoint-desktop-wide: 1300px;
|
||
|
||
/* Width when content center on pages with ToC */
|
||
@width-breakpoint-desktop-wider: @width-breakpoint-desktop + @width-toc * 2;
|
||
|
||
/* Extra wide desktop breakpoint */
|
||
@width-breakpoint-desktop-extrawide: 2000px;
|
||
|
||
/* == Spacing == */
|
||
@space-unit: 1rem;
|
||
|
||
/* == Colors == */
|
||
/* Base theme */
|
||
@diff-hoverstate: 2;
|
||
|
||
@color-primary__h: 220;
|
||
@color-primary__s: 60%;
|
||
@color-primary__l: 50%;
|
||
|
||
@color-surface-0: ~'hsl( 0, 0%, 100% )';
|
||
@color-surface-1: ~'hsl( 0, 0%, 100% )';
|
||
@color-surface-2: ~'hsl( 210, 17%, 98% )';
|
||
@color-surface-3: ~'hsl( 220, 17%, 93% )';
|
||
@color-surface-4: ~'hsl( 213, 9%, 80% )';
|
||
|
||
@color-surface-2--hover: ~'hsl( 210, 17%, 'unit( 98 + @diff-hoverstate, % )~' )';
|
||
@color-surface-2--active: ~'hsl( 210, 17%, 'unit( 98 - @diff-hoverstate, % )~' )';
|
||
|
||
/*
|
||
* 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;
|
||
|
||
/* Dark theme */
|
||
@diff-hoverstate-dark: 4;
|
||
|
||
@color-primary__l-dark: 60%;
|
||
|
||
@color-surface-0-dark: ~'hsl( 210, 27%, 10% )';
|
||
@color-surface-1-dark: ~'hsl( 212, 15%, 17% )';
|
||
@color-surface-2-dark: ~'hsl( 208, 14%, 18% )';
|
||
@color-surface-3-dark: ~'hsl( 210, 11%, 21% )';
|
||
@color-surface-4-dark: ~'hsl( 210, 10%, 24% )';
|
||
|
||
@color-surface-2-dark--hover: ~'hsl( 208, 14%, 'unit( 18 + @diff-hoverstate-dark, % )~' )';
|
||
@color-surface-2-dark--active: ~'hsl( 208, 14%, 'unit( 18 - @diff-hoverstate-dark, % )~' )';
|
||
|
||
/*
|
||
* 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;
|
||
|
||
/**
|
||
* Based WikimediaUI (`wmui`) color palette
|
||
* See https://design.wikimedia.org/style-guide/visual-style_colors.html
|
||
* Don't use those variables directly, instead define your vars
|
||
* referring to them as applied further below.
|
||
*/
|
||
|
||
@color-base0: #000; // = HSB 0°, 0%, 0%
|
||
@color-base10: #202122; // = HSB 210°, 6%, 13%
|
||
@color-base20: #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff`
|
||
@color-base30: #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff`
|
||
@color-base50: #a2a9b1; // = HSB 212°, 8%, 69%
|
||
@color-base70: #c8ccd1; // = HSB 213°, 4%, 82%
|
||
@color-base80: #eaecf0; // = HSB 220°, 3%, 94%
|
||
@color-base90: #f8f9fa; // = HSB 210°, 1%, 98%
|
||
@color-base100: #fff; // = HSB 0°, 0%, 100%
|
||
|
||
@color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
|
||
@color-accent50: #36c; // = HSB 220°, 75%, 80%
|
||
@color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%
|
||
|
||
@color-red30: #b32424; // = HSB 360°, 80%, 70%
|
||
@color-red50: #d33; // = HSB 360°, 77%, 87%
|
||
@color-red90: #fee7e6; // = HSB 3°, 9%, 100%
|
||
|
||
@color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
|
||
@color-yellow50: #fc3; // = HSB 45°, 80%, 100%
|
||
@color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%
|
||
|
||
@color-green30: #14866d; // = HSB 167°, 85%, 53%
|
||
@color-green50: #00af89; // = HSB 167°, 100%, 69%
|
||
@color-green90: #d5fdf4; // = HSB 166°, 16%, 99%
|
||
|
||
@color-accent50--lighten: #5b84d6;
|
||
@color-red50--lighten: #e35b5b;
|
||
|
||
@color-accent-30--darken: #26437f;
|
||
|
||
@background-color-overlay: rgba( 255, 255, 255, 0.95 ); //base100 95% opacity
|
||
@background-color-overlay--lighter: rgba( 255, 255, 255, 0.6 );
|
||
|
||
@background-color-framed: @color-base90;
|
||
@background-color-framed--hover: @color-base100;
|
||
@background-color-framed--active: @color-base70;
|
||
|
||
@background-color-input: rgba( 255, 255, 255, 0.5 );
|
||
|
||
@background-color-icon: rgba( 0, 0, 0, 0.6 );
|
||
@background-color-icon--hover: rgba( 0, 0, 0, 0.8 );
|
||
@background-color-icon--active: rgba( 0, 0, 0, 1 );
|
||
@background-color-quiet: transparent;
|
||
@background-color-quiet--hover: rgba( 0, 0, 0, 0.07 );
|
||
@background-color-quiet--active: rgba( 0, 0, 0, 0.09 );
|
||
|
||
@background-color-primary--hover: @color-accent90;
|
||
@background-color-primary--active: rgba( 41, 98, 204, 0.1 );
|
||
@background-color-destructive: @color-red90;
|
||
@background-color-warning: @color-yellow90;
|
||
@background-color-success: @color-green90;
|
||
|
||
/* Foreground colors */
|
||
@color-base: @color-base20;
|
||
@color-base--emphasized: @color-base10;
|
||
@color-base--subtle: @color-base30;
|
||
|
||
@color-primary: @color-accent50;
|
||
@color-primary--hover: @color-accent50--lighten;
|
||
@color-primary--active: @color-accent30;
|
||
|
||
@color-destructive: @color-red50;
|
||
@color-destructive--hover: @color-red50--lighten;
|
||
@color-destructive--active: @color-red30;
|
||
|
||
@color-warning: @color-yellow50;
|
||
@color-success: @color-green50;
|
||
|
||
@color-link: @color-accent50;
|
||
@color-link--hover: @color-accent50--lighten;
|
||
@color-link--active: @color-accent30;
|
||
@color-link-new: @color-red50;
|
||
@color-link-new--hover: @color-red50--lighten;
|
||
@color-link-new--active: @color-red30;
|
||
|
||
/* Opacity */
|
||
@opacity-base--disabled: 0.3;
|
||
@opacity-icon-base: 0.6;
|
||
@opacity-icon-base--hover: 0.8;
|
||
@opacity-icon-base--active: 1;
|
||
|
||
/* Z-Index */
|
||
// @z-index-base: 0; - WMUI
|
||
@z-index-page-header: 11;
|
||
@z-index-site-header: 91;
|
||
@z-index-overlay: 101; // WMUI
|
||
|
||
/* == 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;
|
||
@width-layout: @width-breakpoint-desktop - 2 * @padding-page;
|
||
@width-toc: @width-breakpoint-desktop-wide - @width-breakpoint-desktop;
|
||
|
||
/* Paddings */
|
||
@padding-page: 20px;
|
||
@line-height: 1.6;
|
||
|
||
/* Border */
|
||
/* Border colors */
|
||
@border-color-base: rgba( 0, 0, 0, 0.05 );
|
||
@border-color-base--lighter: rgba( 0, 0, 0, 0.02 );
|
||
@border-color-base--darker: rgba( 0, 0, 0, 0.08 );
|
||
// To blend better with OOUI styles
|
||
@border-color-input: @border-color-base;
|
||
@border-color-input--hover: rgba( 0, 0, 0, 0.4 );
|
||
|
||
/* Border radius */
|
||
@border-radius--small: 4px;
|
||
@border-radius--medium: @border-radius--small * 2;
|
||
@border-radius--large: @border-radius--small * 3;
|
||
|
||
/* Transitions */
|
||
@transition-timing-fast: 100ms;
|
||
@transition-timing-slow: 250ms;
|
||
|
||
@transition-color: color @transition-timing-fast ease;
|
||
@transition-background: background @transition-timing-fast ease;
|
||
@transition-border-color: border-color @transition-timing-fast ease;
|
||
@transition-opacity: opacity @transition-timing-fast ease;
|
||
|
||
@transition-transform: transform @transition-timing-slow cubic-bezier(0.215,0.61,0.355,1);
|
||
// Only used with transform
|
||
@transition-opacity--transform: opacity @transition-timing-slow ease;
|
||
// Execute after every transition is done
|
||
// Need to use with transition-delay: 0ms
|
||
@transition-visibility--transform: visibility 0ms linear @transition-timing-slow;
|
||
@transition-height: height @transition-timing-slow cubic-bezier(0.215,0.61,0.355,1);
|
||
|
||
/* Box shadow */
|
||
// Based on https://web.dev/building-a-color-scheme/#rad-shadow
|
||
@box-shadow-card: 0 2.8px 2.2px -4px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03))', 0 6.7px 5.3px -4px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01))', 0 12.5px 10px -4px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02))', 0 22.3px 17.9px -4px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02))', 0 41.8px 33.4px -4px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03))', 0 100px 80px -4px ~'hsl(var(--surface-shadow) / var(--shadow-strength))';
|
||
@box-shadow-dialog: 0 2.8px 2.2px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03))', 0 6.7px 5.3px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01))', 0 12.5px 10px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02))', 0 22.3px 17.9px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02))', 0 41.8px 33.4px ~'hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03))', 0 100px 80px ~'hsl(var(--surface-shadow) / var(--shadow-strength))';
|
||
|
||
/* Fonts */
|
||
/**
|
||
* Citizen font stack for sans-serif fonts
|
||
*
|
||
* `Roboto` – Default font
|
||
* `Noto Sans CJK` - CJK font
|
||
* system-ui - System UI font stack
|
||
* `-apple-system` - Firefox fallback for System UI font stack
|
||
*/
|
||
@fonts: 'Roboto', 'Noto Sans CJK', system-ui, -apple-system, sans-serif;
|
||
/**
|
||
* Citizen serif font stack
|
||
*
|
||
* `Georgia` – Windows, Mac
|
||
* `serif` – (Generic) web font fallback
|
||
*/
|
||
@fonts-serif: Georgia, serif;
|
||
/**
|
||
* System font stack for monospace fonts
|
||
*
|
||
* `SFMono-Regular` - macOS 10.12+
|
||
* `Menlo` – macOS 10.6+
|
||
* `Roboto Mono` - Android 4.0+
|
||
* `Consolas` – Windows Vista & newer
|
||
* `Liberation Mono` – Fedora, Ubuntu, … OFL licensed
|
||
* `'Courier New', monospace` – (Generic) web font fallback
|
||
*/
|
||
@fonts-monospace: 'SFMono-Regular', 'Menlo', 'Roboto Mono', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
|
||
|
||
/**
|
||
* Dark theme color palette
|
||
* Background color is used instead of shadow to show elevation
|
||
* and hierarchy in dark theme
|
||
* See https://material.io/design/color/dark-theme.html#properties
|
||
*/
|
||
@dark-color-base0: #131a21; // Surface color
|
||
@dark-color-base10: #1f262c; // 5% white overlay
|
||
@dark-color-base20: #242a31; // 7% white overlay
|
||
@dark-color-base30: #262c32; // 8% white overlay
|
||
@dark-color-base40: #282f35; // 9% white overlay
|
||
@dark-color-base50: #2d3339; // 11% white overlay
|
||
@dark-color-base60: #30363c; // 12% white overlay
|
||
@dark-color-base70: #343a40; // 14% white overlay
|
||
@dark-color-base80: #363c42; // 15% white overlay
|
||
@dark-color-base90: #393f45; // 16% white overlay
|
||
|
||
@dark-background-color-overlay: rgba( 19, 26, 33, 0.95 );
|
||
@dark-background-color-overlay--lighter: rgba( 19, 26, 33, 0.6 );
|
||
|
||
@dark-background-color-framed: @dark-color-base10;
|
||
@dark-background-color-framed--hover: @dark-color-base30;
|
||
@dark-background-color-framed--active: @dark-color-base0;
|
||
|
||
@dark-background-color-input: rgba( 0, 0, 0, 0.5 );
|
||
|
||
@dark-background-color-icon: rgba( 255, 255, 255, 0.6 );
|
||
@dark-background-color-icon--hover: rgba( 255, 255, 255, 0.8 );
|
||
@dark-background-color-icon--active: rgba( 255, 255, 255, 0.4 );
|
||
// @dark-background-color-quiet: transparent;
|
||
@dark-background-color-quiet--hover: rgba( 255, 255, 255, 0.07 );
|
||
@dark-background-color-quiet--active: rgba( 255, 255, 255, 0.03 );
|
||
|
||
@dark-background-color-primary--hover: @color-accent30;
|
||
@dark-background-color-primary--active: @color-accent-30--darken;
|
||
|
||
@dark-background-color-destructive: @color-red30;
|
||
@dark-background-color-warning: @color-yellow30;
|
||
@dark-background-color-success: @color-green30;
|
||
|
||
/* Foreground colors */
|
||
@dark-color-base: rgba( 255, 255, 255, 0.6 );
|
||
@dark-color-base--emphasized: rgba( 255, 255, 255, 0.87 );
|
||
@dark-color-base--subtle: rgba( 255, 255, 255, 0.38 );
|
||
|
||
@dark-color-link: @color-accent50--lighten;
|
||
@dark-color-link--hover: @color-accent90;
|
||
@dark-color-link--active: @color-accent30;
|
||
@dark-color-link-new: @color-red50--lighten;
|
||
@dark-color-link-new--hover: @color-red90;
|
||
@dark-color-link-new--active: @color-red30;
|
||
|
||
/* Opacity */
|
||
// @dark-opacity-icon-base: 0.4;
|
||
// @dark-opacity-icon-base--hover: 0.6;
|
||
@dark-opacity-icon-base--active: 0.4;
|
||
|
||
/* Border colors */
|
||
@dark-border-color-base: rgba( 255, 255, 255, 0.05 );
|
||
@dark-border-color-base--lighter: rgba( 255, 255, 255, 0.02 );
|
||
@dark-border-color-base--darker: rgba( 255, 255, 255, 0.08 );
|
||
@dark-border-color-input: @dark-border-color-base;
|
||
@dark-border-color-input--hover: rgba( 255, 255, 255, 0.5 );
|
||
|
||
/*
|
||
* Framework
|
||
*/
|
||
@html-font-size: 100%;
|
||
@margin-side: 20px;
|
||
@icon-size: 1.125rem; // 18px, TODO: Replace this var
|
||
@icon-box-size: @icon-size + @icon-margin * 2;
|
||
@icon-margin: 3px;
|
||
@icon-padding: 15px;
|
||
@padding-menu-item: 10px 15px;
|
||
@padding-menu-item-big: 10px 20px;
|
||
@height-progress-bar: 2px;
|
||
|
||
/*
|
||
* Text hierarchy
|
||
*/
|
||
// Scaling for content text
|
||
@content-scaling: 0.625;
|
||
@toc-scaling: 0.75;
|
||
|
||
// Wikimedia scale - https://design.wikimedia.org/style-guide/visual-style_typography.html
|
||
@content-h1-size: 3.2rem * @content-scaling;
|
||
@content-h2-size: 2.4rem * @content-scaling;
|
||
@content-h3-size: 2rem * @content-scaling;
|
||
@content-h4-size: 1.8rem * @content-scaling;
|
||
@content-h5-size: 1.6rem * @content-scaling;
|
||
@content-h6-size: 1.6rem * @content-scaling;
|
||
@content-body-size: 1.6rem * @content-scaling;
|
||
@content-lead-paragraph-size: 1.8rem * @content-scaling;
|
||
@content-caption-size: 1.3rem * @content-scaling;
|
||
@content-small-text-size: 1.3rem * @content-scaling;
|
||
@content-monospace-size: 1.4rem * @content-scaling;
|
||
@content-margin-top: 0.8rem;
|
||
|
||
@ui-menu-text: 14px;
|
||
@ui-menu-header: 16px;
|
||
|
||
/*
|
||
* 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.
|
||
*/
|
||
|
||
@accent-10: #2a4b8d;
|
||
@accent-50: #36c;
|
||
@accent-90: #eaf3ff;
|
||
|
||
@red-30: #b32424;
|
||
@red-50: #d33;
|
||
@red-90: #fee7e6;
|
||
|
||
@green-30: #14866d;
|
||
@green-50: #00af89;
|
||
@green-90: #d5fdf4;
|
||
|
||
@yellow-30: #ac6600;
|
||
@yellow-50: #fc3;
|
||
@yellow-90: #fef6e7;
|
||
|
||
@color-footer-background-40: #0f1418;
|
||
@color-footer-background-50: #131a21;
|
||
@color-footer-background-60: #1a252d;
|
||
@color-footer-text: #979c9f;
|
||
@color-footer-link: #cfdee8;
|
||
@color-footer-link-active: #eaecf0;
|
||
|
||
// Dark mode colors
|
||
@dark-bg-0: #11151d;
|
||
@dark-bg-10: #1d2129;
|
||
@dark-bg-20: #22262d;
|
||
@dark-bg-30: #24272f;
|
||
@dark-bg-40: #2b2f36;
|
||
@dark-bg-50: #33363d;
|
||
@dark-bg-60: #34383f;
|
||
|
||
@dark-text-100: #e0e1e2;
|
||
@dark-text-90: #c1c2c5;
|
||
@dark-text-80: #a0a1a5;
|
||
@dark-text-70: #86888c;
|
||
@dark-text-60: #6c6e73;
|