cryptgeon/packages/frontend/src/app.css

@import '@fontsource/fira-mono';

* {
	box-sizing: border-box;
}

:root {
	font-family: 'Fira Mono', monospace;

	--ui-bg-0: #111;
	--ui-bg-0-85: #111111d9;
	--ui-bg-1: #333;
	--ui-bg-2: #444;
	--ui-text-0: #fefefe;
	--ui-text-1: #eee;
	--ui-clr-primary: hsl(186, 65%, 55%);
	--ui-clr-primary-alt: hsl(186, 85%, 35%);
	--ui-clr-error: hsl(357, 77%, 51%);
	--ui-clr-error-alt: hsl(357, 87%, 41%);

	--ui-anim: all 150ms ease;
}

@media (prefers-color-scheme: light) {
	:root {
		--ui-bg-0: #fefefe;
		--ui-bg-0-85: #fefefed9;
		--ui-bg-1: #eee;
		--ui-bg-2: #e2e2e2;
		--ui-text-0: #111;
		--ui-text-1: #333;
	}
}

:root[theme='dark'] {
	--ui-bg-0: #111 !important;
	--ui-bg-0-85: #111111d9 !important;
	--ui-bg-1: #333 !important;
	--ui-bg-2: #444 !important;
	--ui-text-0: #fefefe !important;
	--ui-text-1: #eee !important;
}
:root[theme='light'] {
	--ui-bg-0: #fefefe !important;
	--ui-bg-0-85: #fefefed9 !important;
	--ui-bg-1: #eee !important;
	--ui-bg-2: #e2e2e2 !important;
	--ui-text-0: #111 !important;
	--ui-text-1: #333 !important;
}

.error-text {
	color: var(--ui-clr-error);
}

body {
	min-height: 100vh;
	margin: 0;
	background-color: var(--ui-bg-0);
	color: var(--ui-text-0);
}

a {
	color: inherit;
	text-decoration: inherit;
	box-sizing: content-box;
	border-bottom: 2px solid var(--ui-bg-2);
	cursor: pointer;
}

a:active {
	border-color: var(--ui-clr-primary);
}

a:hover {
	border-color: var(--ui-text-0);
}

input,
textarea,
button {
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	transition: var(--ui-anim);
	font-family: inherit;
	font-size: inherit;
	background: inherit;
	color: inherit;
	border: none;
	padding-inline: initial;
}

*:disabled,
.disabled {
	opacity: 0.5;
}

fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

.box {
	width: 100%;
	min-height: min(calc(100vh - 30rem), 20rem);
	margin: 0;
	border: 2px solid var(--ui-bg-1);
	resize: vertical;
	outline: none;
	padding: 0.5rem;
}

@media screen and (max-width: 30rem) {
	.box {
		min-height: calc(100vh - 25rem);
	}
}

.box:hover,
.box:focus {
	border-color: var(--ui-clr-primary);
}

.tr {
	text-align: right;
}

hr {
	border: none;
	border-bottom: 2px solid var(--ui-bg-1);
	margin: 1rem 0;
}

p {
	margin: 0;
}