mediawiki-skins-Citizen/resources/variables.less

/*
 * Citizen - Navigation Styles
 * https://starcitizen.tools
*/

// Import MediaWiki-supplied mixins
@import 'mediawiki.mixins';

/*
 * 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;

@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;

@color-link: #3366cc;
@color-link-active: #5b84d6;
@color-link-new: #dd3333;
@color-link-new-active: #e35b5b;
// @color-link-visited: #6b4ba1;
// @color-link-visited-active: #886eb3;

// 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;

@dark-color-link: @color-link-active;
@dark-color-link-new: @color-link-new-active;
// @dark-color-link-visited: @color-link-visited-active;

/*
 * 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
*/

/**
 * System font stack for sans-serif fonts
 *
 * `Roboto` – Default font, Android 4.0+ system font, OFL licensed
 * `-apple-system` ('San Francisco' font) – Support Safari 9+ macOS and iOS, Firefox macOS
 * `BlinkMacSystemFont` ('San Francisco' font) – Chrome 48+ macOS and iOS
 * `Segoe UI` – Windows Vista & newer
 * `Oxygen` - Linux, KDE
 * `Ubuntu` - Linux, Ubuntu
 * `Cantarell` - Linux, GNOME
 * `Helvetica, Arial, sans-serif` – (Generic) Web fallback
 * Note that standard `system-ui` value has resulted in unresolved side-effects in certain OS/language combinations as of now and is therefore not included.
 */
@fonts: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
/**
 * Citizen title font stack
 *
 * `Titillium Web` – Futuristic, Closet to Univia Pro, OFL licensed
 * `Univia Pro` - Fallback font if Univia Pro is present
 * Fallback using primary fonts
 */
@fonts-secondary: 'Titillium Web', @fonts;
/**
 * Citizen serif font stack
 *
 * `Georgia` – Windows, Mac
 * `serif` – (Generic) web font fallback
 */
@fonts-serif: Georgia, serif;
/**
 * System font stack for monospace fonts
 *
 * `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: '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