mediawiki-skins-Citizen/resources/skins.citizen.styles/common/cssvariables.less

/*
 * 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-inverted-primary: #fff;

	--color-surface-0__s: 30%;
	--color-surface-0__l: 96%;

	--color-surface-1__s: 40%;
	--color-surface-1__l: 94%;

	--color-surface-2__s: 30%;
	--color-surface-2__l: 92%;

	--color-surface-3__s: 20%;
	--color-surface-3__l: 90%;

	--color-surface-4__s: 10%;
	--color-surface-4__l: 88%;

	--color-surface-0: ~'hsl( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ) )';
	--color-surface-1: ~'hsl( var( --color-primary__h ), var( --color-surface-1__s ), var( --color-surface-1__l ) )';
	--color-surface-2: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), var( --color-surface-2__l ) )';
	--color-surface-3: ~'hsl( var( --color-primary__h ), var( --color-surface-3__s ), var( --color-surface-3__l ) )';
	--color-surface-4: ~'hsl( var( --color-primary__h ), var( --color-surface-4__s ), var( --color-surface-4__l ) )';

	--color-surface-2--hover: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) + var( --delta-lightness-hover-state ) ) )';
	--color-surface-2--active: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) - var( --delta-lightness-hover-state ) ) )';

	--box-shadow-card: @box-shadow-card;
	--box-shadow-dialog: @box-shadow-dialog;

	--font-grade: 0;

	/* Foreground Colors */
	--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;

	/* 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;

	/* Filter */
	--filter-invert-primary: invert( 1 ) hue-rotate( 180deg );
	--filter-invert-fixed: invert( 1 ) hue-rotate( 180deg );

	--overflow-gradient-size: 2rem;
}

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-progressive )';
	--color-link--hover: ~'var( --color-progressive--hover )';
	--color-link--active: ~'var( --color-progressive--active )';
}

.theme-dark-old() {
	--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;
}
/**
 * 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;
}