mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-15 02:24:04 +00:00
216 lines
5.8 KiB
Plaintext
216 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;
|
||
|
||
@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;
|
||
|
||
@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
|
||
*/
|
||
|
||
/**
|
||
* 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
|