mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-01 01:16:38 +00:00
refactor: remove unused LESS variables
This commit is contained in:
alistair3149
parent
b91eb2fb5e
commit
b38254cb56
|
|
@ -71,7 +71,7 @@
|
||||||
|
|
||||||
@color-accent-30--darken: #26437f;
|
@color-accent-30--darken: #26437f;
|
||||||
|
|
||||||
/* Background Colors */
|
/* Background colors */
|
||||||
@background-color-dp-00: @color-base100;
|
@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-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-01: @color-base100;
|
||||||
|
|
@ -106,7 +106,7 @@
|
||||||
@background-color-warning: @color-yellow90;
|
@background-color-warning: @color-yellow90;
|
||||||
@background-color-success: @color-green90;
|
@background-color-success: @color-green90;
|
||||||
|
|
||||||
/* Foreground Colors */
|
/* Foreground colors */
|
||||||
@color-base: @color-base20;
|
@color-base: @color-base20;
|
||||||
@color-base--emphasized: @color-base10;
|
@color-base--emphasized: @color-base10;
|
||||||
@color-base--subtle: @color-base30;
|
@color-base--subtle: @color-base30;
|
||||||
|
|
@ -135,7 +135,7 @@
|
||||||
@opacity-icon-base--hover: 0.6;
|
@opacity-icon-base--hover: 0.6;
|
||||||
@opacity-icon-base--active: 0.8;
|
@opacity-icon-base--active: 0.8;
|
||||||
|
|
||||||
/* == Box Model properties == */
|
/* == Box model properties == */
|
||||||
/* `--*size` variables are used for `*width` & `*height` properties. */
|
/* `--*size` variables are used for `*width` & `*height` properties. */
|
||||||
@size-icon: 20px;
|
@size-icon: 20px;
|
||||||
@height-header: 56px;
|
@height-header: 56px;
|
||||||
|
|
@ -146,7 +146,7 @@
|
||||||
@padding-page: 20px;
|
@padding-page: 20px;
|
||||||
|
|
||||||
/* Border */
|
/* Border */
|
||||||
/* Border Colors */
|
/* Border colors */
|
||||||
@border-color-base: rgba( 0, 0, 0, 0.05 );
|
@border-color-base: rgba( 0, 0, 0, 0.05 );
|
||||||
@border-color-base--lighter: rgba( 0, 0, 0, 0.02 );
|
@border-color-base--lighter: rgba( 0, 0, 0, 0.02 );
|
||||||
@border-color-base--darker: rgba( 0, 0, 0, 0.08 );
|
@border-color-base--darker: rgba( 0, 0, 0, 0.08 );
|
||||||
|
|
@ -154,6 +154,65 @@
|
||||||
@border-color-input: @border-color-base;
|
@border-color-input: @border-color-base;
|
||||||
@border-color-input--hover: rgba( 0, 0, 0, 0.4 );
|
@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-color: color 500ms ease;
|
||||||
|
@transition-color-quick: color 200ms ease;
|
||||||
|
@transition-transform: transform 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||||
|
@transition-transform-quick: transform 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||||
|
@transition-width: width 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||||
|
@transition-width-quick: width 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||||
|
@transition-height: height 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||||
|
@transition-height-quick: height 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||||
|
@transition-margin: margin 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||||
|
@transition-margin-quick: margin 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||||
|
@transition-padding: padding 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||||
|
@transition-padding-quick: padding 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||||
|
@transition-background: background 500ms ease;
|
||||||
|
@transition-background-quick: background 200ms ease;
|
||||||
|
@transition-opacity: opacity 500ms ease;
|
||||||
|
@transition-opacity-quick: opacity 200ms ease;
|
||||||
|
@transition-border: border 500ms ease;
|
||||||
|
@transition-border-quick: border 200ms ease;
|
||||||
|
@transition-box-shadow: box-shadow 500ms ease;
|
||||||
|
@transition-box-shadow-quick: box-shadow 200ms ease;
|
||||||
|
@transition-border-color: border-color 500ms ease;
|
||||||
|
@transition-border-color-quick: border-color 200ms ease;
|
||||||
|
@transition-filter: filter 500ms ease;
|
||||||
|
@transition-filter-quick: filter 200ms 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;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Dark theme color palette
|
* Dark theme color palette
|
||||||
* Background color is used instead of shadow to show elevation
|
* Background color is used instead of shadow to show elevation
|
||||||
|
|
@ -171,7 +230,7 @@
|
||||||
@dark-color-base80: #363c42; // 15% white overlay
|
@dark-color-base80: #363c42; // 15% white overlay
|
||||||
@dark-color-base90: #393f45; // 16% white overlay
|
@dark-color-base90: #393f45; // 16% white overlay
|
||||||
|
|
||||||
/* Background Colors */
|
/* Background colors */
|
||||||
@dark-background-color-dp-00: @dark-color-base0;
|
@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-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-01: @dark-color-base10;
|
||||||
|
|
@ -207,7 +266,7 @@
|
||||||
@dark-background-color-warning: @color-yellow30;
|
@dark-background-color-warning: @color-yellow30;
|
||||||
@dark-background-color-success: @color-green30;
|
@dark-background-color-success: @color-green30;
|
||||||
|
|
||||||
/* Foreground Colors */
|
/* Foreground colors */
|
||||||
@dark-color-base: rgba( 255, 255, 255, 0.6 );
|
@dark-color-base: rgba( 255, 255, 255, 0.6 );
|
||||||
@dark-color-base--emphasized: rgba( 255, 255, 255, 0.87 );
|
@dark-color-base--emphasized: rgba( 255, 255, 255, 0.87 );
|
||||||
@dark-color-base--subtle: rgba( 255, 255, 255, 0.38 );
|
@dark-color-base--subtle: rgba( 255, 255, 255, 0.38 );
|
||||||
|
|
@ -224,44 +283,64 @@
|
||||||
// @dark-opacity-icon-base--hover: 0.6;
|
// @dark-opacity-icon-base--hover: 0.6;
|
||||||
@dark-opacity-icon-base--active: 0.2;
|
@dark-opacity-icon-base--active: 0.2;
|
||||||
|
|
||||||
/* Border Colors */
|
/* Border colors */
|
||||||
@dark-border-color-base: rgba( 255, 255, 255, 0.05 );
|
@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--lighter: rgba( 255, 255, 255, 0.02 );
|
||||||
@dark-border-color-base--darker: rgba( 255, 255, 255, 0.08 );
|
@dark-border-color-base--darker: rgba( 255, 255, 255, 0.08 );
|
||||||
@dark-border-color-input: @dark-border-color-base;
|
@dark-border-color-input: @dark-border-color-base;
|
||||||
@dark-border-color-input--hover: rgba( 255, 255, 255, 0.5 );
|
@dark-border-color-input--hover: rgba( 255, 255, 255, 0.5 );
|
||||||
|
|
||||||
/* Technical debt below */
|
|
||||||
/*
|
/*
|
||||||
* Framework
|
* Framework
|
||||||
*/
|
*/
|
||||||
@html-font-size: 100%;
|
@html-font-size: 100%;
|
||||||
@margin-side: 20px;
|
@margin-side: 20px;
|
||||||
@page-width: 860px;
|
|
||||||
@footer-width: 1290px;
|
@footer-width: 1290px;
|
||||||
@icon-size: 18px;
|
@icon-size: 18px;
|
||||||
@icon-box-size: @icon-size + @icon-margin * 2;
|
@icon-box-size: @icon-size + @icon-margin * 2;
|
||||||
@icon-margin: 3px;
|
@icon-margin: 3px;
|
||||||
@icon-padding: 15px;
|
@icon-padding: 15px;
|
||||||
@header-height: 56px;
|
|
||||||
@sidebar-sitename-height: 69px;
|
|
||||||
@drawer-width: 300px;
|
|
||||||
@padding-menu-item: 10px 15px;
|
@padding-menu-item: 10px 15px;
|
||||||
@padding-menu-item-big: 10px 20px;
|
@padding-menu-item-big: 10px 20px;
|
||||||
@negative-margin: (@footer-width - @page-width) / -2;
|
|
||||||
|
|
||||||
@search-bar-width: 500px;
|
@search-bar-width: 500px;
|
||||||
@search-bar-height: 42px;
|
@search-bar-height: 42px;
|
||||||
@search-loader-progress-bar-height: 2px;
|
@search-loader-progress-bar-height: 2px;
|
||||||
|
|
||||||
@border-radius-small: 4px;
|
/*
|
||||||
@border-radius-medium: @border-radius-small * 2;
|
* Text hierarchy
|
||||||
@border-radius-large: @border-radius-small * 3;
|
*/
|
||||||
|
// 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;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Colors
|
* Legacy colors
|
||||||
|
* TODO: Replace all of them with the new variables
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// Wikimedia colors
|
// Wikimedia colors
|
||||||
@base-0: #000;
|
@base-0: #000;
|
||||||
@base-10: #202122;
|
@base-10: #202122;
|
||||||
|
|
@ -289,24 +368,6 @@
|
||||||
@yellow-50: #fc3;
|
@yellow-50: #fc3;
|
||||||
@yellow-90: #fef6e7;
|
@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-40: #0f1418;
|
||||||
@color-footer-background-50: #131a21;
|
@color-footer-background-50: #131a21;
|
||||||
@color-footer-background-60: #1a252d;
|
@color-footer-background-60: #1a252d;
|
||||||
|
|
@ -328,93 +389,3 @@
|
||||||
@dark-text-80: #a0a1a5;
|
@dark-text-80: #a0a1a5;
|
||||||
@dark-text-70: #86888c;
|
@dark-text-70: #86888c;
|
||||||
@dark-text-60: #6c6e73;
|
@dark-text-60: #6c6e73;
|
||||||
|
|
||||||
/*
|
|
||||||
* Transitions
|
|
||||||
*/
|
|
||||||
@transition-color: color 500ms ease;
|
|
||||||
@transition-color-quick: color 200ms ease;
|
|
||||||
@transition-transform: transform 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
|
||||||
@transition-transform-quick: transform 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
|
||||||
@transition-width: width 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
|
||||||
@transition-width-quick: width 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
|
||||||
@transition-height: height 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
|
||||||
@transition-height-quick: height 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
|
||||||
@transition-margin: margin 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
|
||||||
@transition-margin-quick: margin 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
|
||||||
@transition-padding: padding 500ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
|
||||||
@transition-padding-quick: padding 200ms cubic-bezier(0.77, 0.2, 0.05, 1);
|
|
||||||
@transition-background: background 500ms ease;
|
|
||||||
@transition-background-quick: background 200ms ease;
|
|
||||||
@transition-opacity: opacity 500ms ease;
|
|
||||||
@transition-opacity-quick: opacity 200ms ease;
|
|
||||||
@transition-border: border 500ms ease;
|
|
||||||
@transition-border-quick: border 200ms ease;
|
|
||||||
@transition-box-shadow: box-shadow 500ms ease;
|
|
||||||
@transition-box-shadow-quick: box-shadow 200ms ease;
|
|
||||||
@transition-border-color: border-color 500ms ease;
|
|
||||||
@transition-border-color-quick: border-color 200ms ease;
|
|
||||||
@transition-filter: filter 500ms ease;
|
|
||||||
@transition-filter-quick: filter 200ms 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;
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue