deemixer/public/css/modules/base/base.css

@import './normalize.css';
@import './typography.css';

/* * {
	transition: background-color 500ms ease-in-out;
} */

html {
	height: 100vh;

	--main-scroll: #555;
	--panels-scroll: #2a2c2c;
	--accent-color: #0a84ff;
	--tag-background: #0062c4;
	--tag-text: #ffffff;
	--toast-background: #000000dd;
	--toast-secondary: #ffffff22;
	--toast-text: #ffffffde;
	--separator: #8f8f8f;

	--explicit-separator: 0.3125em;
}

html[data-theme='light'] {
	--main-background: #ffffff;
	--secondary-background: #eeeeee;
	--main-text: #333333;
	--main-text-inverted: #eeeeee;
	--panels-background: #222324;
	--panels-text: #ffffff;
	--accent-text: #ffffff;

	--table-bg: #ffffff;
	--table-zebra: #c9c9c9;
	--table-highlight: #8f8f8f;
}

html[data-theme='dark'] {
	--main-background: #141414;
	--secondary-background: #242424;
	--main-text: #eeeeee;
	--main-text-inverted: #333333;
	--panels-background: #1a1a1a;
	--panels-text: #ffffff;
	--accent-text: #dfdfdf;

	--table-bg: #141414;
	--table-zebra: #242424;
	--table-highlight: #747474;
}

html[data-theme='purple'] {
	--main-background: #0c041b;
	--secondary-background: #130a29;
	--main-text: #eeeeee;
	--accent-color: #460ead;
	--main-text-inverted: #100822;
	--panels-background: #100727;
	--panels-text: #ffffff;
	--accent-text: #dfdfdf;

	--table-bg: #0c041b;
	--table-zebra: #130a29;
	--table-highlight: #321874;
}

body {
	margin: 0px;
	width: 100%;
	height: 100%;
	font-family: 'Open Sans';
	overflow: hidden;
	background: var(--main-background);
	color: var(--main-text);
}