staxman-old/static/css/screen.css

:root {
	--background: #13131E;
	--bg-raised: #171625;
	--text: #E0DFFE;
	--text-accent: #E796F3;

	--table-border-color: #5958B1;
	--table-border: 3px solid var(--table-border-color);
	--table-bg: #202248;

	--link: #FFC53D;
	--link-hover: #e28d0e;

	--button-color: #B1A9FF;
	--button-bg: #202248;
	--button-border: #5B5BD6;
	--button-bg-hover: #7E451D;

	--success-bright: #46A758;
	--success-bg: #113B29;
	--success-text: #3DD68C;

	--danger-bright: #E5484D;
	--danger-bg: #500F1C;
	--danger-text: #FF9592;

	background-color: var(--background);
	color: var(--text);
	font-family: Inter, sans-serif;
	scrollbar-width: thin;
}

code {
	font-family: "Iosevka Web", monospace;
	font-size: 11pt;
}

a[href],
a[href]:visited {
	color: var(--link);

	&:hover {
		color: var(--link-hover);
	}
}

body {
	display: flex;
	flex-direction: column;
}

nav {
	display: flex;
	width: 100%;
	background-color: var(--bg-raised);

	& a {
		flex: 1;
		display: flex;
		text-decoration: none;
		padding: 5px 8px;
		justify-content: center;
		max-width: 100px;
		box-shadow: inset 0 -2px var(--button-bg);
		font-size: 11pt;
		text-transform: uppercase;

		&[href],
		&[href]:visited {
			color: var(--button-color);
		}

		&:hover {
			background-color: #1E160F;
			box-shadow: inset 0 -2px var(--button-bg-hover);
		}
	}
}

main {
	padding: 10px;
}

body,
html {
	padding: 0;
	margin: 0;
}

button {
	background-color: var(--button-bg);
	color: var(--button-color);
	border: 1px solid var(--button-border);
	padding: 4px 8px;
	border-radius: 3px;

	&:hover {
		cursor: pointer;
		background-color: var(--button-bg-hover);
		color: var(--link-hover);
		border-color: var(--link-hover);
	}
}

table.table {
	background-color: var(--bg-raised);
	border: var(--table-border);
	border-radius: 3px;

	& th,
	& td {
		padding: 3px 5px;
	}

	& th {
		font-weight: bold;
	}

	& thead {
		background-color: var(--table-bg);
	}
}

.full-width {
	width: 100%;
	flex: 1;
}

input,
textarea {
	border: 1px solid var(--table-border-color);
	border-radius: 3px;
	background-color: var(--bg-raised);
	color: var(--text);
	padding: 4px;
}

pre {
	margin: 0;
	padding: 0;
}

h2 {
	display: flex;
	align-items: center;
	gap: 0.5ch;

	& form {
		display: flex;
		align-items: center;

		& button {
			padding: 2px 6px;
		}
	}
}