StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-15 02:24:04 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Citizen/resources/variables.less
alistair3149 ca7dd9fe86
feat(ooui): ✨ redo OOUI styles
2022-11-30 21:42:28 -05:00

370 lines
13 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
* 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;
/* Extra wide desktop breakpoint */
@width-breakpoint-desktop-extrawide: 2000px;
/* == Spacing == */
@space-unit: 1rem;
@line-height-xs: 1.25;
@line-height-sm: 1.375;
@line-height-md: 1.6;
/* == Fonts == */
/**
* Citizen sans-serif font stack
*
* `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
*
* `Noto Serif` - Not included yet
* `Noto Serif CJK` - Not included yet
* `Georgia` – Windows, Mac
* `serif` – (Generic) web font fallback
*/
@fonts-serif: 'Noto Serif', 'Noto Serif CJK', Georgia, serif;
/**
* Citizen monospace font stack
*
* `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;
/* == 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;
// TODO: Revise this number, fixed value isn't great but we need it for b
@width-toc: 240px;
/* Paddings */
@padding-page: 16px;
/* 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;
@border-radius--pill: 9999px;
@border-radius--circle: 100%;
/* 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 ease;
/* Shadow */
/* Box shadow */
// Based on https://web.dev/building-a-color-scheme/#rad-shadow
// TODO: Refactor this to support filter drop-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))';
/**
* 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%;
@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.
*/
// Dark mode colors
@dark-bg-10: #1d2129;
@dark-bg-20: #22262d;
@dark-bg-30: #24272f;
@dark-bg-40: #2b2f36;
@dark-bg-50: #33363d;
@dark-bg-60: #34383f;
Reference in a new issue View git blame Copy permalink