MIND/frontend/static/css/general.css

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 1rem;
}

:root {
	--color-light: #ffffff;
	--color-light-gray: #6b6b6b;
	--color-gray: #3c3c3c;
	--color-dark: #1b1b1b;

	--color-error: #db5461;
	--color-success: #54db68;
	
	--header-height: 4.5rem;
	--nav-width: 4rem;
	--rem-clamp: clamp(.5rem, 2vw, 1rem);
	--default-shadow: 0 1px 2px 0 rgb(0 0 0 / 60%), 0 2px 6px 2px rgb(0 0 0 / 30%);
}

/*  */
/* Default properties */
/*  */
img {
	width: 100%;
}

button,
label {
	border: 0;
	border-radius: 4px;
	background-color: var(--color-dark);
	color: var(--color-light);
}

button:hover,
label:hover {
	cursor: pointer;
}

input:not([type="checkbox"]),
select,
textarea,
.as-button {
	border: 2px solid var(--color-gray);
	border-radius: 4px;
	padding: .6rem;
	outline: 0;
	background-color: var(--color-dark);
	color: var(--color-light);
	
	box-shadow: var(--default-shadow);

	font-size: 1rem;
}

input::placeholder,
textarea::placeholder {
	color: var(--color-gray);
}

input[type="datetime-local"] {
	color-scheme: dark;
}

svg path,
svg rect {
	fill: var(--color-light);
}

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
	background-color: var(--color-dark);
}

::-webkit-scrollbar-thumb {
	-webkit-border-radius: 6px;
	background-color: var(--color-gray);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--color-light-gray);
}

/*  */
/* Utility classes */
/*  */
.hidden {
	display: none !important;
}

.error,
.error-container p {
	color: var(--color-error) !important;
	font-size: 1rem !important;
}

.error-container p {
	display: block !important;
}

.error-icon path,
.error-icon rect,
.error-container path,
.error-container rect {
	fill: var(--color-error) !important;
}

.error-input,
.error-container input {
	border: 2px solid var(--color-error) !important;
}

.success {
	color: var(--color-success) !important;
	font-size: 1rem !important;
}

/*  */
/* General styling */
/*  */
body {
	height: 100vh;
	overflow-x: hidden;

	background-color: var(--color-dark);
	color: var(--color-light);
}

noscript {
	display: block;
	max-width: 95%;
	margin-inline: 1rem;
	margin-bottom: 1rem;

	border-radius: 4px;
	padding: 1rem;
	background-color: var(--color-error);
	color: var(--color-light);
}

/*  */
/* Header */
/*  */
header {
	width: 100%;
	height: var(--header-height);
	
	display: flex;
	align-items: center;

	padding: 1rem;
	box-shadow: var(--default-shadow);
	background-color: var(--color-gray);
}

header > div {
	height: 100%;
	transform: translateX(-2.6rem);

	display: flex;
	align-items: center;
	gap: 1rem;
	
	transition: transform .3s ease-in-out;
}

#toggle-nav {
	--height: 1.5rem;
	height: var(--height);
	
	background-color: transparent;
}

#toggle-nav svg {
	height: var(--height);
	width: var(--height);
}

header img {
	height: 3rem;
	width: fit-content;
}

/*  */
/* Nav */
/*  */
.nav-divider {
	position: relative;
	height: calc(100% - var(--header-height));
	
	display: flex;

	padding-block: var(--rem-clamp);
}

body:has(#nav-switch:checked) .nav-divider > nav {
	left: var(--rem-clamp);
}

body:has(#nav-switch:checked) .nav-divider > .window-container {
	margin-left: calc(var(--nav-width) + var(--rem-clamp));
}

nav {
	--padding: .5rem;
	z-index: 1;
	position: absolute;
	left: var(--rem-clamp);
	height: calc(100% - (2 * var(--rem-clamp)));
	width: var(--nav-width);
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: var(--padding);
	overflow-y: auto;

	padding: var(--padding);
	border-radius: 4px;
	background-color: var(--color-gray);
	
	transition: left .3s ease-in-out;
}

nav > div {
	width: 100%;
	
	display: flex;
	flex-direction: column;
	gap: var(--padding);
}

nav > div > button {
	width: 100%;

	display: flex;
	justify-content: center;
	align-items: center;
	
	padding: .5rem;
	border: 0;
	border-radius: 4px;
	background-color: var(--color-dark);
	color: var(--color-light);
	
	transition: background-color .1s ease-in-out;
}

nav > div > button:hover {
	background-color: var(--color-gray);
}

nav > div > button svg {
	height: 1.8rem;
	width: 2rem;
}

/*  */
/* Window management */
/*  */
.window-container {
	margin-left: calc(4rem + var(--rem-clamp));
	width: 100%;

	display: flex;
	overflow: hidden;

	transition: margin-left .3s ease-in-out;
}

.window-container > :where(#home, .extra-window-container) {
	width: 100%;
	flex: 0 0 auto;

	translate: 0 0;
	transition: translate .5s ease-in-out;
}

.window-container.inter-window-ani > :where(#home, .extra-window-container) {
	transition: translate .5s ease-in-out,
				transform .5s ease-in-out;
}

.extra-window-container {
	--y-offset: 0%;
	transform: translateY(var(--y-offset));
}

.extra-window-container > div {
	height: 100%;
	overflow-y: auto;
}

.window-container.show-window > :where(#home, .extra-window-container) {
	translate: -100% 0;
}

.window-container.show-window > .extra-window-container {
	transform: translateY(var(--y-offset));
}

/*  */
/* Styling extra window */
/*  */
.extra-window-container > div {
	padding: var(--rem-clamp);
}

.extra-window-container > div > h2 {
	text-align: center;
	font-size: clamp(1.3rem, 5vw, 2rem);
	margin-bottom: 2rem;
}

.extra-window-container > div > h2:not(:first-of-type) {
	margin-top: 1.5rem;
}

.extra-window-container > div > p {
	text-align: center;
}

@media (max-width: 543px) {
	.window-container {
		margin-left: 0;
	}

	nav {
		left: -100%;
	}
}