mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-01 17:36:49 +00:00
47e1259bc3
* Looks more natural * Can be customized through the surface-shadow and shadow-strength CSS var * Light mode and dark mode have been different shadow now, it should be more visible in dark mode * Box-shadow is a CSS var, which can be used in templates and wiki CSS
60 lines
2.1 KiB
Plaintext
60 lines
2.1 KiB
Plaintext
@import '../../variables.less';
|
|
|
|
/**
|
|
* Base theme
|
|
*/
|
|
:root {
|
|
--color-primary__h: @color-primary__h;
|
|
--color-primary__s: @color-primary__s;
|
|
--color-primary__l: @color-primary__l;
|
|
|
|
--color-surface-0: @color-surface-0;
|
|
--color-surface-1: @color-surface-1;
|
|
--color-surface-2: @color-surface-2;
|
|
--color-surface-3: @color-surface-3;
|
|
--color-surface-4: @color-surface-4;
|
|
|
|
--color-primary: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), var( --color-primary__l ) )';
|
|
--color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) * 1.2 ) )';
|
|
--color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) * 0.8 ) )';
|
|
--background-color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 95% )';
|
|
--background-color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 90% )';
|
|
|
|
--color-surface-2--hover: @color-surface-2--hover;
|
|
--color-surface-2--active: @color-surface-2--active;
|
|
|
|
--box-shadow-card: @box-shadow-card;
|
|
--box-shadow-dialog: @box-shadow-dialog;
|
|
|
|
--surface-shadow: var( --color-primary__h ) 10% 20%;
|
|
--shadow-strength: 0.02;
|
|
}
|
|
|
|
a {
|
|
--color-link: ~'var( --color-primary )';
|
|
--color-link--hover: ~'var( --color-primary--hover )';
|
|
--color-link--active: ~'var( --color-primary--active )';
|
|
}
|
|
|
|
/**
|
|
* Dark theme
|
|
*/
|
|
:root.skin-citizen-dark {
|
|
--color-primary__l: @color-primary__l-dark;
|
|
|
|
--color-surface-0: @color-surface-0-dark;
|
|
--color-surface-1: @color-surface-1-dark;
|
|
--color-surface-2: @color-surface-2-dark;
|
|
--color-surface-3: @color-surface-3-dark;
|
|
--color-surface-4: @color-surface-4-dark;
|
|
|
|
--background-color-primary--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 15% )';
|
|
--background-color-primary--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 20% )';
|
|
|
|
--color-surface-2--hover: @color-surface-2-dark--hover;
|
|
--color-surface-2--active: @color-surface-2-dark--active;
|
|
|
|
--surface-shadow: var( --color-primary__h ) 50% 3%;
|
|
--shadow-strength: 0.8;
|
|
}
|