mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-15 10:38:19 +00:00
211 lines
5.8 KiB
Plaintext
211 lines
5.8 KiB
Plaintext
/*
|
||
* 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;
|
||
|
||
/*
|
||
* Colors
|
||
*/
|
||
|
||
// Wikimedia colors
|
||
@base-0: #000;
|
||
@base-10: #222;
|
||
@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
|
||
@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-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-height: height 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-margin: margin 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-padding: padding 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||
@transition-background-quick: background 0.2s ease;
|
||
@transition-background: background 0.55s 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-filter: filter 0.55s 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
|