mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-30 09:04:26 +00:00
5ccfbcfdeb
This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch
417 lines
14 KiB
Plaintext
417 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;
|
||
|
||
/* == 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;
|
||
|
||
/* == Box model properties == */
|
||
/* `--*size` variables are used for `*width` & `*height` properties. */
|
||
@size-icon: 20px;
|
||
// Not in the header section it is also used outside of header
|
||
@height-header: 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
|
||
* system-ui - System UI font stack
|
||
* `-apple-system` - Firefox fallback for System UI font stack
|
||
*/
|
||
@fonts: 'Roboto', 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;
|
||
@footer-width: 1290px;
|
||
@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-quote-primary-size: 2rem * @content-scaling;
|
||
@content-quote-secondary-size: 1.4rem * @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;
|