mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-14 18:15:49 +00:00
415 lines
13 KiB
Plaintext
415 lines
13 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 == */
|
||
/**
|
||
* 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 Colors */
|
||
@background-color-dp-00: @color-base100;
|
||
@background-color-dp-00--rgb: red(@background-color-dp-00), green(@background-color-dp-00), blue(@background-color-dp-00);
|
||
@background-color-dp-01: @color-base100;
|
||
@background-color-dp-02: @color-base100;
|
||
@background-color-dp-03: @color-base100;
|
||
@background-color-dp-04: @color-base100;
|
||
@background-color-dp-06: @color-base100;
|
||
@background-color-dp-08: @color-base100;
|
||
@background-color-dp-12: @color-base100;
|
||
@background-color-dp-16: @color-base100;
|
||
@background-color-dp-24: @color-base100;
|
||
|
||
@background-color-overlay: rgba( 255, 255, 255, 0.95 ); //base100 95% opacity
|
||
|
||
@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.4 );
|
||
@background-color-icon--hover: rgba( 0, 0, 0, 0.6 );
|
||
@background-color-icon--active: rgba( 0, 0, 0, 0.8 );
|
||
@background-color-quiet: transparent;
|
||
@background-color-quiet--hover: rgba( 0, 0, 0, 0.03 );
|
||
@background-color-quiet--active: rgba( 0, 0, 0, 0.05 );
|
||
|
||
@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;
|
||
|
||
/* Opacity */
|
||
@opacity-base--disabled: 0.2;
|
||
@opacity-icon-base: 0.4;
|
||
@opacity-icon-base--hover: 0.6;
|
||
@opacity-icon-base--active: 0.8;
|
||
|
||
/* == Box Model properties == */
|
||
/* `--*size` variables are used for `*width` & `*height` properties. */
|
||
@size-icon: 20px;
|
||
@height-header: 56px;
|
||
@width-layout: @width-breakpoint-desktop - 2 * @padding-page;
|
||
@width-toc: @width-breakpoint-desktop-wide - @width-breakpoint-desktop;
|
||
|
||
/* Paddings */
|
||
@padding-page: 20px;
|
||
|
||
/* 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 );
|
||
|
||
/**
|
||
* 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
|
||
|
||
/* Background Colors */
|
||
@dark-background-color-dp-00: @dark-color-base0;
|
||
@dark-background-color-dp-00--rgb: red(@dark-background-color-dp-00), green(@dark-background-color-dp-00), blue(@dark-background-color-dp-00);
|
||
@dark-background-color-dp-01: @dark-color-base10;
|
||
@dark-background-color-dp-02: @dark-color-base20;
|
||
@dark-background-color-dp-03: @dark-color-base30;
|
||
@dark-background-color-dp-04: @dark-color-base40;
|
||
@dark-background-color-dp-06: @dark-color-base50;
|
||
@dark-background-color-dp-08: @dark-color-base60;
|
||
@dark-background-color-dp-12: @dark-color-base70;
|
||
@dark-background-color-dp-16: @dark-color-base80;
|
||
@dark-background-color-dp-24: @dark-color-base90;
|
||
|
||
@dark-background-color-overlay: rgba( 19, 26, 33, 0.95 ); //base0 95% opacity
|
||
|
||
@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.4 );
|
||
@dark-background-color-icon--hover: rgba( 255, 255, 255, 0.6 );
|
||
@dark-background-color-icon--active: rgba( 255, 255, 255, 0.2 );
|
||
// @dark-background-color-quiet: transparent;
|
||
@dark-background-color-quiet--hover: rgba( 255, 255, 255, 0.03 );
|
||
@dark-background-color-quiet--active: rgba( 255, 255, 255, 0.05 );
|
||
|
||
@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 );
|
||
|
||
/* Opacity */
|
||
// @dark-opacity-icon-base: 0.4;
|
||
// @dark-opacity-icon-base--hover: 0.6;
|
||
@dark-opacity-icon-base--active: 0.2;
|
||
|
||
/* 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 );
|
||
|
||
/* Technical debt below */
|
||
/*
|
||
* Framework
|
||
*/
|
||
@html-font-size: 100%;
|
||
@margin-side: 20px;
|
||
@page-width: 860px;
|
||
@footer-width: 1290px;
|
||
@icon-size: 18px;
|
||
@icon-box-size: @icon-size + @icon-margin * 2;
|
||
@icon-margin: 3px;
|
||
@icon-padding: 15px;
|
||
@header-height: 56px;
|
||
@sidebar-sitename-height: 69px;
|
||
@drawer-width: 300px;
|
||
@padding-menu-item: 10px 15px;
|
||
@padding-menu-item-big: 10px 20px;
|
||
@negative-margin: (@footer-width - @page-width) / -2;
|
||
|
||
@search-bar-width: 500px;
|
||
@search-bar-height: 42px;
|
||
@search-loader-progress-bar-height: 2px;
|
||
|
||
@border-radius-small: 4px;
|
||
@border-radius-medium: @border-radius-small * 2;
|
||
@border-radius-large: @border-radius-small * 3;
|
||
|
||
/*
|
||
* Colors
|
||
*/
|
||
|
||
// Wikimedia colors
|
||
@base-0: #000;
|
||
@base-10: #202122;
|
||
@base-20: #54595d;
|
||
@base-30: #72777d;
|
||
@base-50: #a2a9b1;
|
||
@base-70: #c8ccd1;
|
||
@base-80: #eaecf0;
|
||
@base-90: #f8f9fa;
|
||
@base-100: #fff;
|
||
|
||
@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;
|
||
|
||
@menu-background: @base-100;
|
||
@opacity-icon: 0.3;
|
||
@opacity-icon-active: 0.5;
|
||
@color-item-text: @base-30;
|
||
@color-item-text-hover: @base-20;
|
||
@color-item-text-active: @accent-50;
|
||
@color-item-header: @base-10;
|
||
@menu-item-link-hover: @base-80;
|
||
@menu-item-link-active: @accent-90;
|
||
|
||
@color-content-text: @base-20;
|
||
@color-content-header: @base-10;
|
||
@color-content-caption: @base-30;
|
||
|
||
// Citizen colors
|
||
@header-background-color-light: @base-100;
|
||
@header-background-color-dark: @dark-bg-0;
|
||
|
||
@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: @base-80;
|
||
|
||
// 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;
|
||
|
||
/*
|
||
* Transitions
|
||
*/
|
||
@transition-color: color 0.55s ease;
|
||
@transition-color-quick: color 0.2s ease;
|
||
@transition-transform: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-transform-quick: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-width: width 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-width-quick: width 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-height: height 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-height-quick: height 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-margin: margin 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-margin-quick: margin 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-padding: padding 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-padding-quick: padding 0.2s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-background: background 0.55s ease;
|
||
@transition-background-quick: background 0.2s ease;
|
||
@transition-opacity: opacity 0.55s ease;
|
||
@transition-opacity-quick: opacity 0.2s ease;
|
||
@transition-border: border 0.55s ease;
|
||
@transition-border-quick: border 0.2s ease;
|
||
@transition-box-shadow: box-shadow 0.55s ease;
|
||
@transition-box-shadow-quick: box-shadow 0.2s ease;
|
||
@transition-border-color: border-color 0.55s ease;
|
||
@transition-border-color-quick: border-color 0.2s ease;
|
||
@transition-filter: filter 0.55s ease;
|
||
@transition-filter-quick: filter 0.2s ease;
|
||
|
||
/*
|
||
* 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;
|
||
|
||
/*
|
||
* 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-line-height: 1.6;
|
||
@content-margin-top: 0.8rem;
|
||
|
||
@ui-menu-text: 14px;
|
||
@ui-menu-text-big: 15px;
|
||
@ui-menu-header: 16px;
|
||
|
||
@footer-line-height: 1.4;
|
||
|
||
/*
|
||
* Viewports
|
||
*/
|
||
|
||
@screen0: @page-width - @margin-side * 7; // 720px
|
||
@screen1: @page-width + @margin-side * 2; // 900px
|
||
@screen2: @footer-width; // 1290px
|
||
@screen3: @footer-width + @margin-side * 8; // 1450px
|
||
@screen4: @footer-width - (@negative-margin * 2); // 1720px
|