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

/*
 * Citizen - CSS variables
 * https://starcitizen.tools
*/

@import '../../variables.less';

/**
 * Base theme
 */
:root {
	--background-color-overlay: @background-color-overlay;
	--background-color-overlay--lighter: @background-color-overlay--lighter;

	--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-base: @color-base;
	--color-base--emphasized: @color-base--emphasized;
	--color-base--subtle: @color-base--subtle;

	--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 Colors */
	--border-color-base: @border-color-base;
	--border-color-base--lighter: @border-color-base--lighter;
	--border-color-base--darker: @border-color-base--darker;
	--border-color-input: @border-color-input;
	--border-color-input--hover: @border-color-input--hover;

	/* 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-size-h1: 1.75rem;
	--font-size-h2: 1.375rem;
	--font-size-h3: 1.125rem;
	--font-size-h4: 1rem;
	--font-size-h5: 1rem;
	--font-size-h6: 1rem;

	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
}

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;

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

/**
 * Dark theme
 */
:root.skin-citizen-dark {
	--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;

	/* 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;
	--border-color-input: @dark-border-color-input;
	--border-color-input--hover: @dark-border-color-input--hover;
}

@media ( min-width: @width-breakpoint-tablet ) {
	:root {
		--font-size-h1: 2rem;
		--font-size-h2: 1.5rem;
		--font-size-h3: 1.25rem;
		--font-size-h4: 1.125rem;
	}

	html {
		--padding-page: @padding-page * 1.5;
	}
}

@media ( min-width: @width-breakpoint-desktop ) {
	html {
		--padding-page: @padding-page * 2;
		--header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )';
	}
}