mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-25 06:47:16 +00:00
258 lines
8.5 KiB
Plaintext
258 lines
8.5 KiB
Plaintext
/*
|
|
* Citizen - CSS variables
|
|
* https://starcitizen.tools
|
|
*/
|
|
|
|
@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: ~'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;
|
|
|
|
--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;
|
|
|
|
/* Foreground Colors */
|
|
--color-destructive: @color-destructive;
|
|
--color-destructive--hover: @color-destructive--hover;
|
|
--color-destructive--active: @color-destructive--active;
|
|
|
|
--color-warning: @color-warning;
|
|
--color-success: @color-success;
|
|
|
|
--color-text-error: @color-text-error;
|
|
--color-text-warning: @color-text-warning;
|
|
--color-text-success: @color-text-success;
|
|
|
|
--color-link-new: @color-link-new;
|
|
--color-link-new--hover: @color-link-new--hover;
|
|
--color-link-new--active: @color-link-new--active;
|
|
|
|
--color-syntax-red: @color-syntax-red;
|
|
--color-syntax-orange: @color-syntax-orange;
|
|
--color-syntax-yellow: @color-syntax-yellow;
|
|
--color-syntax-green: @color-syntax-green;
|
|
--color-syntax-cyan: @color-syntax-cyan;
|
|
--color-syntax-blue: @color-syntax-blue;
|
|
--color-syntax-paleblue: @color-syntax-paleblue;
|
|
--color-syntax-purple: @color-syntax-purple;
|
|
--color-syntax-brown: @color-syntax-brown;
|
|
--color-syntax-pink: @color-syntax-pink;
|
|
--color-syntax-violet: @color-syntax-violet;
|
|
--color-syntax-grey: @color-syntax-grey;
|
|
|
|
/* Opacity */
|
|
--opacity-base--disabled: @opacity-base--disabled;
|
|
--opacity-icon-base: @opacity-icon-base;
|
|
--opacity-icon-base--hover: @opacity-icon-base--hover;
|
|
--opacity-icon-base--active: @opacity-icon-base--active;
|
|
|
|
/* Size */
|
|
--size-icon: @size-icon;
|
|
|
|
/* Border radius */
|
|
--border-radius--small: @border-radius--small;
|
|
--border-radius--medium: @border-radius--medium;
|
|
--border-radius--large: @border-radius--large;
|
|
--border-radius--pill: @border-radius--pill;
|
|
|
|
/* Fonts */
|
|
--font-family-base: @font-family-base;
|
|
--font-family-serif: @font-family-serif;
|
|
--font-family-monospace: @font-family-monospace;
|
|
--font-family-citizen-base: 'Roboto';
|
|
--font-family-citizen-serif: 'Roboto Serif';
|
|
--font-family-citizen-monospace: 'Roboto Mono';
|
|
--font-family-language-base: '';
|
|
--font-family-language-serif: '';
|
|
--font-family-language-monospace: '';
|
|
|
|
--font-size-x-small: 0.75rem;
|
|
--font-size-small: 0.875rem;
|
|
--font-size-medium: 1rem;
|
|
--font-size-large: 1rem;
|
|
--font-size-x-large: 1.125rem;
|
|
--font-size-xx-large: 1.375rem;
|
|
--font-size-xxx-large: 1.75rem;
|
|
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: ~'calc( var( --font-weight-normal ) + 100)';
|
|
--font-weight-semibold: ~'calc( var( --font-weight-normal ) + 200)';
|
|
--font-weight-bold: ~'calc( var( --font-weight-normal ) + 300)';
|
|
|
|
/* Transitions */
|
|
--transition-hover: @transition-hover;
|
|
}
|
|
|
|
html {
|
|
/* Size */
|
|
--header-size: @header-size;
|
|
--header-card-maxheight: 70vh;
|
|
--width-layout: @width-layout;
|
|
--width-layout--extended: ~'calc( var( --width-layout ) * 1.5 )';
|
|
--width-toc: @width-toc;
|
|
--line-height: @line-height-md;
|
|
--line-height-xs: @line-height-xs;
|
|
--line-height-sm: @line-height-sm;
|
|
--toolbar-size: 2.5rem;
|
|
|
|
/* Spacing */
|
|
--space-unit: @space-unit;
|
|
--space-xxs: ~'calc( 0.25 * var( --space-unit ) )';
|
|
--space-xs: ~'calc( 0.5 * var( --space-unit ) )';
|
|
--space-sm: ~'calc( 0.75 * var( --space-unit ) )';
|
|
--space-md: ~'var( --space-unit )';
|
|
--space-lg: ~'calc( 1.25 * var( --space-unit ) )';
|
|
--space-xl: ~'calc( 1.5 * var( --space-unit ) )';
|
|
--space-xxl: ~'calc( 2 * var( --space-unit ) )';
|
|
|
|
/* Margin */
|
|
--margin-layout: ~'calc( ( 100vw - var( --width-layout ) ) / 2 )';
|
|
|
|
/* Padding */
|
|
--padding-page: @padding-page;
|
|
}
|
|
|
|
:lang( ja ),
|
|
:lang( ko ),
|
|
:lang( zh ) {
|
|
/* CJK languages need increased line-height for readability */
|
|
--line-height: 1.75;
|
|
}
|
|
|
|
a {
|
|
--color-link: ~'var( --color-primary )';
|
|
--color-link--hover: ~'var( --color-primary--hover )';
|
|
--color-link--active: ~'var( --color-primary--active )';
|
|
}
|
|
|
|
.theme-dark-old() {
|
|
--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;
|
|
|
|
--color-text-error: @dark-color-text-error;
|
|
--color-text-warning: @dark-color-text-warning;
|
|
--color-text-success: @dark-color-text-success;
|
|
|
|
--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;
|
|
|
|
--color-syntax-red: @color-syntax-red-dark;
|
|
--color-syntax-orange: @color-syntax-orange-dark;
|
|
--color-syntax-yellow: @color-syntax-yellow-dark;
|
|
--color-syntax-green: @color-syntax-green-dark;
|
|
--color-syntax-cyan: @color-syntax-cyan-dark;
|
|
--color-syntax-blue: @color-syntax-blue-dark;
|
|
--color-syntax-paleblue: @color-syntax-paleblue-dark;
|
|
--color-syntax-purple: @color-syntax-purple-dark;
|
|
--color-syntax-brown: @color-syntax-brown-dark;
|
|
--color-syntax-pink: @color-syntax-pink-dark;
|
|
--color-syntax-violet: @color-syntax-violet-dark;
|
|
|
|
/* Opacity */
|
|
--opacity-icon-base--active: @dark-opacity-icon-base--active;
|
|
}
|
|
/**
|
|
* Dark theme
|
|
*/
|
|
:root.skin-theme-clientpref-night {
|
|
.theme-dark-old();
|
|
}
|
|
|
|
@media ( prefers-color-scheme: dark ) {
|
|
:root.skin-theme-clientpref-os {
|
|
.theme-dark-old();
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-tablet ) {
|
|
:root {
|
|
--font-size-x-small: 0.8125rem;
|
|
--font-size-large: 1.125rem;
|
|
--font-size-x-large: 1.25rem;
|
|
--font-size-xx-large: 1.5rem;
|
|
--font-size-xxx-large: 2rem;
|
|
}
|
|
|
|
html {
|
|
--padding-page: @padding-page * 1.5;
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop ) {
|
|
html {
|
|
--padding-page: @padding-page * 2;
|
|
--header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )';
|
|
}
|
|
}
|
|
|
|
@media ( prefers-contrast: more ) {
|
|
:root {
|
|
--font-weight-normal: 500;
|
|
}
|
|
}
|
|
|
|
@media ( prefers-contrast: less ) {
|
|
:root {
|
|
--font-weight-normal: 300;
|
|
}
|
|
}
|
|
|
|
.citizen-animations-ready {
|
|
/* Only apply transition when page is ready for it */
|
|
--transition-menu: @transition-menu;
|
|
}
|