tultemplategen/styles.css

:root {
	--tul-color: #5948AD;
	--fs-color: #888B95;
	--ft-color: #924C14;
	--fp-color: #0076D5;
	--ef-color: #65A812;
	--fua-color: #006443;
	--fm-color: #EA7603;
	--fzs-color: #00B0BE;
	--cxi-color: #C20019;
	
	--accent-color: var(--tul-color);

	--background-color: color-mix(in srgb, var(--accent-color) 5%, white);
	--shadow-color: color-mix(in srgb, var(--accent-color), gray);

	--button-color: var(--background-color);
	--button-hover-color: white;
	--button-border-color: color-mix(in srgb, var(--accent-color), white);

	--button-accent-color: var(--accent-color);
	--button-accent-hover-color: color-mix(in srgb, var(--accent-color), white 25%);
}

[data-faculty= "fs"] { --accent-color: var( --fs-color); }
[data-faculty= "ft"] { --accent-color: var( --ft-color); }
[data-faculty= "fp"] { --accent-color: var( --fp-color); }
[data-faculty= "ef"] { --accent-color: var( --ef-color); }
[data-faculty="fua"] { --accent-color: var(--fua-color); }
[data-faculty= "fm"] { --accent-color: var( --fm-color); }
[data-faculty="fzs"] { --accent-color: var(--fzs-color); }
[data-faculty="cxi"] { --accent-color: var(--cxi-color); }

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "Noto Sans", sans-serif;
	font-size: 20px;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--background-color);

	transition: background-color 0.25s;
}

.main-container {
	padding: 24px;
	width: 600px;
	height: 500px;

	box-shadow: 0 0 20px var(--shadow-color);
	background-color: white;
	border-radius: 16px;

	transition: box-shadow 0.25s;
}

.main-content {
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;

	opacity: 1;
	transition: opacity 0.25s;
}

.main-content > * {
	flex-grow: 0;
}

h1 {
	margin: 0;

	font-weight: bold;
	text-align: center;
	font-size: 32px;
}

.paragraphs {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.paragraphs > p {
	margin: 0;
}

a, a:visited, a:active {
	color: black;
}

.horizontal-list {
	width: 100%;

	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 8px;
}

.horizontal-list > .filler {
	flex-grow: 1;
}

button, .button {
	box-sizing: border-box;
	flex-grow: 0;
	padding: 8px 16px;

	text-decoration: none;
	font-family: inherit;
	font-size: 100%;
	border: 1px var(--button-border-color) solid;
	color: black;
	background-color: var(--button-color);
	border-radius: 8px;
	cursor: pointer;

	transition: color 0.25s, background-color 0.25s, border 0.25s;
}

button:hover, .button:hover {
	background-color: white;
}

button.narrow, .button.narrow {
	padding: 4px 16px;
	font-size: 16px;
	width: 100%;
	text-align: left;
}

button.expand, .button.expand {
	flex-grow: 2;
	flex-basis: 0;
}

button.accent, .button.accent {
	color: white;
	border: 1px var(--button-accent-color) solid;
	background-color: var(--button-accent-color);
}

button.accent:hover, .button.accent:hover {
	background-color: var(--button-accent-hover-color);
	border: 1px var(--button-accent-hover-color) solid;
}

button:disabled, .button:disabled {
	border: 1px gray solid;
	background-color: lightgray;
	color: black;
	cursor: not-allowed;
}

button:disabled:hover, .button:disabled:hover {
	border: 1px gray solid;
	background-color: lightgray;
	color: black;
}

.vertical-spacer {
	height: 16px
}

.vertical-list {
	flex-grow: 1;
	width: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.slide-animation {
	position: relative;

	opacity: 1;
	left: 0;

	transition: left 0.25s, opacity 0.25s;
}

.slide-from-left {
	animation: 0.25s forwards from-left;
}

.slide-from-right {
	animation: 0.25s forwards from-right;
}

.slide-to-left {
	animation: 0.25s forwards to-left;
}

.slide-to-right {
	animation: 0.25s forwards to-right;
}

@keyframes from-left {
	from {
		opacity: 0;
		left: -16px;
	}
	to {
		opacity: 1;
		left: 0;
	}
}

@keyframes from-right {
	from {
		opacity: 0;
		left: 16px;
	}
	to {
		opacity: 1;
		left: 0;
	}
}

@keyframes to-left {
	from {
		opacity: 1;
		left: 0;
	}
	to {
		opacity: 0;
		left: -16px;
	}
}

@keyframes to-right {
	from {
		opacity: 1;
		left: 0;
	}
	to {
		opacity: 0;
		left: 16px;
	}
}

input[type="checkbox"] {
	width: 16px;
	margin: 0;
}

label {
	flex-grow: 1;
	text-align: left;
	user-select: none;
}

input[type="text"] {
	flex-grow: 0;
	padding: 8px 16px;

	font-family: inherit;
	font-size: 100%;
	border: 1px var(--button-border-color) solid;
	color: black;
	background-color: var(--button-color);
	border-radius: 8px;

	box-sizing: border-box;
	width: 100%;
}

input[type="text"]::placeholder {
	color: gray;
}

input[type="text"]:disabled::placeholder {
	color: lightgray;
}

input[type="text"]:disabled {
	background-color: white;
	color: lightgray;
}

.zmp-logo {
	position: absolute;
	bottom: 20px;
	height: 1em;
}