mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-26 15:24:22 +00:00
99 lines
4.2 KiB
Plaintext
99 lines
4.2 KiB
Plaintext
/**
|
|
* Base/light theme
|
|
*/
|
|
:root {
|
|
--color-primary__h: @color-primary__h;
|
|
--color-primary__s: @color-primary__s;
|
|
--color-primary__l: @color-primary__l;
|
|
|
|
--color-surface-0: ~'hsl( var( --color-primary__h ), 30%, 96% )';
|
|
--color-surface-1: ~'hsl( var( --color-primary__h ), 40%, 94% )';
|
|
--color-surface-2: ~'hsl( var( --color-primary__h ), 30%, 92% )';
|
|
--color-surface-3: ~'hsl( var( --color-primary__h ), 20%, 90% )';
|
|
--color-surface-4: ~'hsl( var( --color-primary__h ), 10%, 88% )';
|
|
|
|
--color-base--emphasized: ~'hsl( var( --color-primary__h ), 85%, 5% )';
|
|
--color-base: ~'hsl( var( --color-primary__h ), 30%, 20% )';
|
|
--color-base--subtle: ~'hsl( var( --color-primary__h ), 30%, 35% )';
|
|
|
|
--background-color-overlay: ~'hsla( var( --color-primary__h ), 25%, 94%, 0.95 )';
|
|
--background-color-overlay--lighter: ~'hsla( var( --color-primary__h ), 25%, 94%, 0.6 )';
|
|
|
|
--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: ~'hsl( var( --color-primary__h ), 30%, 94% )';
|
|
--color-surface-2--active: ~'hsl( var( --color-primary__h ), 30%, 90% )';
|
|
|
|
--background-color-destructive: rgba( 221, 51, 51, 0.1 );
|
|
--background-color-success: rgba( 0, 175, 137, 0.1 );
|
|
--background-color-warning: rgba( 255, 204, 51, 0.1 );
|
|
|
|
--background-image-destructive: linear-gradient( var( --background-color-destructive ), var( --background-color-destructive ) );
|
|
--background-image-success: linear-gradient( var( --background-color-success ), var( --background-color-success ) );
|
|
--background-image-warning: linear-gradient( var( --background-color-warning ), var( --background-color-warning ) );
|
|
|
|
--border-color-base: rgba( 0, 0, 0, 0.08 );
|
|
--border-color-subtle: rgba( 0, 0, 0, 0.05 );
|
|
--border-color-interactive: rgba( 0, 0, 0, 0.11 );
|
|
|
|
--box-shadow-card: @box-shadow-card;
|
|
--box-shadow-dialog: @box-shadow-dialog;
|
|
|
|
--surface-shadow: var( --color-primary__h ), 10%, 20%;
|
|
--shadow-strength: 0.02;
|
|
|
|
--font-grade: 0;
|
|
}
|
|
|
|
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: 60%;
|
|
|
|
--color-surface-0: ~'hsl( var( --color-primary__h ), 20%, 10% )';
|
|
--color-surface-1: ~'hsl( var( --color-primary__h ), 25%, 12% )';
|
|
--color-surface-2: ~'hsl( var( --color-primary__h ), 25%, 15% )';
|
|
--color-surface-3: ~'hsl( var( --color-primary__h ), 15%, 20% )';
|
|
--color-surface-4: ~'hsl( var( --color-primary__h ), 15%, 25% )';
|
|
|
|
--color-base--emphasized: ~'hsl( var( --color-primary__h ), 80%, 95% )';
|
|
--color-base: ~'hsl( var( --color-primary__h ), 25%, 80% )';
|
|
--color-base--subtle: ~'hsl( var( --color-primary__h ), 25%, 65% )';
|
|
|
|
--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% )';
|
|
|
|
--background-color-overlay: ~'hsla( var( --color-primary__h ), 20%, 10%, 0.95 )';
|
|
--background-color-overlay--lighter: ~'hsla( var( --color-primary__h ), 20%, 10%, 0.6 )';
|
|
|
|
--color-surface-2--hover: ~'hsl( var( --color-primary__h ), 30%, 19% )';
|
|
--color-surface-2--active: ~'hsl( var( --color-primary__h ), 30%, 11% )';
|
|
|
|
--border-color-base: rgba( 255, 255, 255, 0.05 );
|
|
--border-color-subtle: rgba( 255, 255, 255, 0.02 );
|
|
--border-color-interactive: rgba( 255, 255, 255, 0.08 );
|
|
|
|
--surface-shadow: var( --color-primary__h ), 50%, 3%;
|
|
--shadow-strength: 0.8;
|
|
|
|
--filter-invert: invert( 1 ) hue-rotate( 180deg );
|
|
|
|
--font-grade: -25;
|
|
|
|
// FIXME: Browsers seem to treat GRAD differently, disabling for now
|
|
// Dark theme usually have an illusion of thicker fonts
|
|
// So we have to tune it back
|
|
// font-variation-settings: 'GRAD' -90;
|
|
}
|