src/static/style/_vars.scss
@use 'sass:math';

// scss & css variables

:root {
	--scale: 1.0;
	--primary-var: 240, 128, 128;
	--image-height-limited: 70vh;
	--border-color: rgb(128 128 128 / 14%);
	--v-widthM: 50rem;
	--v-widthL: 60rem;

	&:not(.theme-override) {
		--bg-color: #121212;
		--bg-el1-color: #1f1f1f;
		--bg-el2-color: #292929;
		--text-color: #e4e4e4;
		--text-on-primary: var(--text-color);
		--primary: lightcoral;
		--primary-contrast: #e65d5d;
		--shadow-color: #0000009c;
		--dark-shadow-color: black;
		--controls-bg: #121212ad;
		--controls-color: var(--text-color);
		--controls-link-color: var(--link-color);
		--progress-bar-color: var(--primary);
		--progress-bar-tip: var(--text-color);
		--primary-faint: #875e5e;
		--primary-transparent: #f07f7f80;
		--link-color: #7da3f9;
		--switcher-bg-hover: #333333;
		--switcher-bg-active: #404040;
		--switcher-bg-selected: #616161;
		--divider-color: var(--border-color);
		--user-admin-bg: darkred;
		--user-admin-color: #ff3939;
		--user-mod-bg: green;
		--user-mod-color: lightgreen;
		--cancel-btn-bg: #5b5b5b;
		--upvote-hover: #efc77b;
		--upvote-filled: orange;
		--downvote-hover: #99abe3;
		--downvote-filled: royalblue;
		--transparent-btn-hover: #ffffff1a;
		--transparent-btn-active: #ffffff40;
		--input-element-bg: #4a4a4a;
		--scrollbar-color: #e4e4e4a6;
		--scrollbar-color-hover: #e4e4e4;
		--code-bg: #363636;
		--table-header-bg: #4e4e4e;
		--table-header-divider: #2d2d2d;
		--table-row-alt-bg: #313131;
		--table-row-hover-bg: #3e3e3e;
		--tooltip-bg: black;
		--quote-color: cornflowerblue;
		--comment-collapser-bg: rgba(4, 4, 4, 0.6);
		--comment-collapser-hover-bg: rgba(0, 0, 0, 0.8);
		--header-bg: var(--bg-color);
		--header-stroke: var(--text-color);
		--fab-root-filter: grayscale(1) brightness(0.5) opacity(0.65);
		--fab-root-filter-active: grayscale(1) brightness(.4) opacity(1);
		--fab-root-shadow: var(--shadow-color);
		--seen-post-brightness: 0.75;
	}

	&.theme-override.theme-light {
		--bg-color: #ffffff;
		--bg-el1-color: var(--bg-color);
		--bg-el2-color: #f1f1f1;
		--text-color: #2c2c2c;
		--text-on-primary: white;
		--primary-contrast: #f57272;
		--primary: #ff4747;
		--shadow-color: #0000000d;
		--dark-shadow-color: #0000006d;
		--controls-bg: #121212ad;
		--controls-color: #e4e4e4;
		--controls-link-color: #7da3f9;
		--progress-bar-color: lightcoral;
		--progress-bar-tip: #e4e4e4;
		--primary-faint: #875e5e;
		--primary-transparent: #f07f7f80;
		--link-color: #5589ff;
		--switcher-bg-hover: #ebebeb;
		--switcher-bg-active: #dcdcdc;
		--switcher-bg-selected: #c4c4c4;
		--divider-color: var(--border-color);
		--user-admin-bg: darkred;
		--user-admin-color: #cf0808;
		--user-mod-bg: green;
		--user-mod-color: #31cd31;
		--cancel-btn-bg: #5b5b5b;
		--upvote-hover: #e29709;
		--upvote-filled: orange;
		--downvote-hover: #547eff;
		--downvote-filled: royalblue;
		--transparent-btn-hover: #00000009;
		--transparent-btn-active: #00000018;
		--input-element-bg: var(--bg-el2-color);
		--scrollbar-color: #a3a3a3a6;
		--scrollbar-color-hover: #a3a3a3d9;
		--code-bg: var(--bg-el2-color);
		--table-header-bg: #e0e0e0;
		--table-header-divider: var(--border-color);
		--table-row-alt-bg: #f5f5f5;
		--table-row-hover-bg: #eaeaea;
		--tooltip-bg: white;
		--quote-color: cornflowerblue;
		--comment-collapser-bg: rgba(4, 4, 4, 0.15);
		--comment-collapser-hover-bg: rgba(0, 0, 0, 0.25);
		--header-bg: var(--bg-color);
		--header-stroke: #c3c3c4;
		--fab-root-filter: grayscale(1) brightness(1) opacity(0.3);
		--fab-root-filter-active: grayscale(1) brightness(1) opacity(0.5);
		--fab-root-shadow: #00000026;
		--seen-post-brightness: 0.95;
	}
}

/** default background color */
$background: var(--bg-color);
/** bg color for more important/elevated elements */
$background-el1: var(--bg-el1-color);
$background-el2: var(--bg-el2-color);
/** text color */
$text-color: var(--text-color);
/** text color on primary background */
$text-on-primary: var(--text-on-primary);
$modal-transparent-bg: #00000080;
$header-height: 5rem;
$post-actions-width: 2.2rem;
$post-padding: 1.75rem;
/** default border radius */
$border-radius: math.div($post-padding, 2);
$controls-height: 3rem;
$controls-bg: var(--controls-bg);
$controls-color: var(--controls-color);
$controls-link-color: var(--controls-link-color);
$progress-bar-color: var(--progress-bar-color);
$progress-bar-tip: var(--progress-bar-tip);
$shadow-color: var(--shadow-color);
$dark-shadow-color: var(--dark-shadow-color);
$progress-bar-hover-scale: 3;
/** primary accent */
$primary: var(--primary);
/** equal to $primary; should be used like rgba($primary-var, 0.5) */
$primary-var: var(--primary-var);
/** accent color as background with white text */
$primary-contrast: var(--primary-contrast);
$primary-faint: var(--primary-faint);
$primary-transparent: var(--primary-transparent);
/** view state width in portrait */
$widthP: calc(100vw - 3.4rem);
/** view state width in landscape */
$widthM: min(var(--v-widthM), calc(100vw - 6rem));
/** view state width+ in landscape */
$widthL: min(var(--v-widthL), calc(100vw - 6rem));
$widthMobile: 100vw;
$link-color: var(--link-color);
$border-color: var(--border-color);
$border-heavy-color: rgb(128 128 128 / 22%);
$image-height-limited: var(--image-height-limited);
$switcher-bg: $background-el2;
$switcher-bg-hover: var(--switcher-bg-hover);
$switcher-bg-active: var(--switcher-bg-active);
$switcher-bg-selected: var(--switcher-bg-selected);
$divider-color: var(--divider-color);
$user-admin-bg: var(--user-admin-bg);
$user-admin-color: var(--user-admin-color);
$user-mod-bg: var(--user-mod-bg);
$user-mod-color: var(--user-mod-color);
$cancel-btn-bg: var(--cancel-btn-bg);
$upvote-hover: var(--upvote-hover);
$upvote-filled: var(--upvote-filled);
$downvote-hover: var(--downvote-hover);
$downvote-filled: var(--downvote-filled);
$transparent-btn-hover: var(--transparent-btn-hover);
$transparent-btn-active: var(--transparent-btn-active);
$input-element-bg: var(--input-element-bg);
$scrollbar-color: var(--scrollbar-color);
$scrollbar-color-hover: var(--scrollbar-color-hover);
$code-bg: var(--code-bg);
$table-header-bg: var(--table-header-bg);
$table-header-divider: var(--table-header-divider);
$table-row-alt-bg: var(--table-row-alt-bg);
$table-row-hover-bg: var(--table-row-hover-bg);
$tooltip-bg: var(--tooltip-bg);
$comment-collapser-bg: var(--comment-collapser-bg);
$comment-collapser-hover-bg: var(--comment-collapser-hover-bg);
$quote-color: var(--quote-color);
$header-bg: var(--header-bg);
$header-stroke: var(--header-stroke);
$fab-root-filter: var(--fab-root-filter);
$fab-root-filter-active: var(--fab-root-filter-active);
$fab-root-shadow: var(--fab-root-shadow);
$seen-post-brightness: var(--seen-post-brightness);

$smaller-screen-max-width: 999px;
$mobile-screen-max-width: 500px;
$desktop-screen-min-width: 1000px;

%view-width-M {
	width: $widthM;
	@media (max-width: $smaller-screen-max-width) {
		width: $widthP;
	}
	@media (max-width: $mobile-screen-max-width) {
		width: $widthMobile;
	}
}
%view-width-L {
	width: $widthL;
	@media (max-width: $smaller-screen-max-width) {
		width: $widthP;
	}
	@media (max-width: $mobile-screen-max-width) {
		width: $widthMobile;
	}
}
