2021-01-12 19:31:35 +00:00
|
|
|
/*
|
|
|
|
|
* Citizen - CSS variables
|
|
|
|
|
* https://starcitizen.tools
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
@import '../../variables.less';
|
|
|
|
|
|
2021-01-12 23:23:58 +00:00
|
|
|
/**
|
|
|
|
|
* Base theme
|
|
|
|
|
*/
|
2021-01-12 19:31:35 +00:00
|
|
|
:root {
|
|
|
|
|
/* Background Colors */
|
|
|
|
|
--background-color-dp-00: @background-color-dp-00;
|
|
|
|
|
--background-color-dp-01: @background-color-dp-01;
|
|
|
|
|
--background-color-dp-02: @background-color-dp-02;
|
|
|
|
|
--background-color-dp-03: @background-color-dp-03;
|
|
|
|
|
--background-color-dp-04: @background-color-dp-04;
|
|
|
|
|
--background-color-dp-06: @background-color-dp-06;
|
|
|
|
|
--background-color-dp-08: @background-color-dp-08;
|
|
|
|
|
--background-color-dp-12: @background-color-dp-12;
|
|
|
|
|
--background-color-dp-16: @background-color-dp-16;
|
|
|
|
|
--background-color-dp-24: @background-color-dp-24;
|
|
|
|
|
|
2021-01-29 16:47:33 +00:00
|
|
|
--background-color-overlay: @background-color-overlay;
|
2021-03-05 18:43:11 +00:00
|
|
|
--background-color-overlay--lighter: @background-color-overlay--lighter;
|
2021-01-29 16:47:33 +00:00
|
|
|
|
2021-01-12 19:31:35 +00:00
|
|
|
--background-color-framed: @background-color-framed;
|
|
|
|
|
--background-color-framed--hover: @background-color-framed--hover;
|
|
|
|
|
--background-color-framed--active: @background-color-framed--active;
|
2021-01-15 00:09:15 +00:00
|
|
|
--background-color-input: @background-color-input;
|
2021-01-12 19:31:35 +00:00
|
|
|
--background-color-icon: @background-color-icon;
|
|
|
|
|
--background-color-icon--hover: @background-color-icon--hover;
|
|
|
|
|
--background-color-icon--active: @background-color-icon--active;
|
|
|
|
|
--background-color-quiet--hover: @background-color-quiet--hover;
|
|
|
|
|
--background-color-quiet--active: @background-color-quiet--active;
|
2021-01-12 20:46:40 +00:00
|
|
|
|
2021-01-12 19:31:35 +00:00
|
|
|
--background-color-destructive: @background-color-destructive;
|
2021-01-14 20:27:06 +00:00
|
|
|
--background-color-warning: @background-color-warning;
|
|
|
|
|
--background-color-success: @background-color-success;
|
2021-01-12 19:31:35 +00:00
|
|
|
|
|
|
|
|
/* Foreground Colors */
|
|
|
|
|
--color-base: @color-base;
|
|
|
|
|
--color-base--emphasized: @color-base--emphasized;
|
|
|
|
|
--color-base--subtle: @color-base--subtle;
|
|
|
|
|
|
2021-01-14 17:53:29 +00:00
|
|
|
--color-destructive: @color-destructive;
|
|
|
|
|
--color-destructive--hover: @color-destructive--hover;
|
|
|
|
|
--color-destructive--active: @color-destructive--active;
|
|
|
|
|
|
2021-01-14 20:27:06 +00:00
|
|
|
--color-warning: @color-warning;
|
|
|
|
|
--color-success: @color-success;
|
|
|
|
|
|
2021-03-18 16:59:48 +00:00
|
|
|
--color-link-new: @color-link-new;
|
|
|
|
|
--color-link-new--hover: @color-link-new--hover;
|
|
|
|
|
--color-link-new--active: @color-link-new--active;
|
|
|
|
|
|
2021-01-14 17:20:15 +00:00
|
|
|
/* Opacity */
|
2021-01-14 20:27:06 +00:00
|
|
|
--opacity-base--disabled: @opacity-base--disabled;
|
2021-01-14 17:20:15 +00:00
|
|
|
--opacity-icon-base: @opacity-icon-base;
|
|
|
|
|
--opacity-icon-base--hover: @opacity-icon-base--hover;
|
|
|
|
|
--opacity-icon-base--active: @opacity-icon-base--active;
|
|
|
|
|
|
2021-01-16 00:56:59 +00:00
|
|
|
/* Size */
|
|
|
|
|
--size-icon: @size-icon;
|
|
|
|
|
|
2021-01-12 19:31:35 +00:00
|
|
|
/* Border Colors */
|
|
|
|
|
--border-color-base: @border-color-base;
|
|
|
|
|
--border-color-base--lighter: @border-color-base--lighter;
|
|
|
|
|
--border-color-base--darker: @border-color-base--darker;
|
2021-01-14 20:27:06 +00:00
|
|
|
--border-color-input: @border-color-input;
|
|
|
|
|
--border-color-input--hover: @border-color-input--hover;
|
2021-03-09 18:13:49 +00:00
|
|
|
|
2021-05-27 14:35:21 +00:00
|
|
|
/* Border radius */
|
|
|
|
|
--border-radius--small: @border-radius--small;
|
|
|
|
|
--border-radius--medium: @border-radius--medium;
|
|
|
|
|
--border-radius--large: @border-radius--large;
|
|
|
|
|
|
2021-03-09 18:13:49 +00:00
|
|
|
/* Fonts */
|
|
|
|
|
--font-family-base: @fonts;
|
|
|
|
|
--font-family-serif: @fonts-serif;
|
|
|
|
|
--font-family-monospace: @fonts-monospace;
|
2021-01-12 19:31:35 +00:00
|
|
|
}
|
|
|
|
|
|
2021-01-16 21:14:04 +00:00
|
|
|
html {
|
|
|
|
|
/* Size */
|
|
|
|
|
--height-header: @height-header;
|
|
|
|
|
--width-layout: @width-layout;
|
2021-08-05 15:24:52 +00:00
|
|
|
--line-height: @line-height;
|
2021-01-16 21:14:04 +00:00
|
|
|
|
2021-03-18 17:39:13 +00:00
|
|
|
/* Margin */
|
|
|
|
|
--margin-layout: ~'calc( ( 100vw - var( --width-layout ) ) / 2 )';
|
2021-01-16 21:14:04 +00:00
|
|
|
|
2021-03-18 17:39:13 +00:00
|
|
|
/* Padding */
|
|
|
|
|
--padding-page: @padding-page;
|
2021-04-19 16:42:08 +00:00
|
|
|
--padding-page--negative: ~'calc( var( --padding-page) * -1 )';
|
2021-02-04 15:38:29 +00:00
|
|
|
}
|
|
|
|
|
|
2021-01-12 23:23:58 +00:00
|
|
|
/**
|
|
|
|
|
* Dark theme
|
|
|
|
|
*/
|
2021-01-12 19:31:35 +00:00
|
|
|
:root.skin-citizen-dark {
|
|
|
|
|
/* Background Colors */
|
|
|
|
|
--background-color-dp-00: @dark-background-color-dp-00;
|
|
|
|
|
--background-color-dp-01: @dark-background-color-dp-01;
|
|
|
|
|
--background-color-dp-02: @dark-background-color-dp-02;
|
|
|
|
|
--background-color-dp-03: @dark-background-color-dp-03;
|
|
|
|
|
--background-color-dp-04: @dark-background-color-dp-04;
|
|
|
|
|
--background-color-dp-06: @dark-background-color-dp-06;
|
|
|
|
|
--background-color-dp-08: @dark-background-color-dp-08;
|
|
|
|
|
--background-color-dp-12: @dark-background-color-dp-12;
|
|
|
|
|
--background-color-dp-16: @dark-background-color-dp-16;
|
|
|
|
|
--background-color-dp-24: @dark-background-color-dp-24;
|
|
|
|
|
|
2021-01-29 16:47:33 +00:00
|
|
|
--background-color-overlay: @dark-background-color-overlay;
|
2021-03-05 18:43:11 +00:00
|
|
|
--background-color-overlay--lighter: @dark-background-color-overlay--lighter;
|
2021-01-29 16:47:33 +00:00
|
|
|
|
2021-01-12 19:31:35 +00:00
|
|
|
--background-color-framed: @dark-background-color-framed;
|
|
|
|
|
--background-color-framed--hover: @dark-background-color-framed--hover;
|
|
|
|
|
--background-color-framed--active: @dark-background-color-framed--active;
|
2021-01-15 00:09:15 +00:00
|
|
|
--background-color-input: @dark-background-color-input;
|
2021-01-12 19:31:35 +00:00
|
|
|
--background-color-icon: @dark-background-color-icon;
|
|
|
|
|
--background-color-icon--hover: @dark-background-color-icon--hover;
|
|
|
|
|
--background-color-icon--active: @dark-background-color-icon--active;
|
|
|
|
|
--background-color-quiet--hover: @dark-background-color-quiet--hover;
|
|
|
|
|
--background-color-quiet--active: @dark-background-color-quiet--active;
|
|
|
|
|
|
|
|
|
|
--background-color-destructive: @dark-background-color-destructive;
|
2021-01-14 20:27:06 +00:00
|
|
|
--background-color-warning: @dark-background-color-warning;
|
|
|
|
|
--background-color-success: @dark-background-color-success;
|
2021-01-12 19:31:35 +00:00
|
|
|
|
|
|
|
|
/* Foreground Colors */
|
|
|
|
|
--color-base: @dark-color-base;
|
|
|
|
|
--color-base--emphasized: @dark-color-base--emphasized;
|
|
|
|
|
--color-base--subtle: @dark-color-base--subtle;
|
|
|
|
|
|
2021-03-18 16:59:48 +00:00
|
|
|
--color-link-new: @dark-color-link-new;
|
|
|
|
|
--color-link-new--hover: @dark-color-link-new--hover;
|
|
|
|
|
--color-link-new--active: @dark-color-link-new--active;
|
|
|
|
|
|
2021-01-14 17:20:15 +00:00
|
|
|
/* Opacity */
|
|
|
|
|
--opacity-icon-base--active: @dark-opacity-icon-base--active;
|
|
|
|
|
|
2021-01-12 19:31:35 +00:00
|
|
|
/* Border Colors */
|
|
|
|
|
--border-color-base: @dark-border-color-base;
|
|
|
|
|
--border-color-base--lighter: @dark-border-color-base--lighter;
|
|
|
|
|
--border-color-base--darker: @dark-border-color-base--darker;
|
2021-01-14 20:27:06 +00:00
|
|
|
--border-color-input: @dark-border-color-input;
|
|
|
|
|
--border-color-input--hover: @dark-border-color-input--hover;
|
2021-01-12 19:31:35 +00:00
|
|
|
}
|
2021-02-04 15:38:29 +00:00
|
|
|
|
|
|
|
|
.skin-citizen-dark {
|
|
|
|
|
.mw-header {
|
|
|
|
|
// Used for header gradient only
|
|
|
|
|
--background-color-dp-00--rgb: @dark-background-color-dp-00--rgb;
|
|
|
|
|
}
|
|
|
|
|
}
|
