POOLab18-SlopifyV2/res/template/base.css

* {
	margin: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	background-color: #0d130d;
	font-family: Ubuntu;
	font-size: 16pt;
	color: white;
}

#navbar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "back title space";
	place-items: center;
	text-align: center;
	border-bottom: solid #3e5b3e 1px;
	padding: 0.4em 0.8em;
	gap: 0.8em;
}

#navbar .back {
	grid-area: back;
}

#back-btn {
	width: 2em;
	height: 2em;
	position: relative;
}

#back-btn::before {
	content: "";
	border: solid white 4px;
	border-style: solid none none solid;
	position: absolute;
	inset: 0;
	transform: rotate(-45deg);
	width: 0.5em;
	height: 0.5em;
	margin: auto;
}

#navbar .title {
	grid-area: title;
}

#body {
	display: flex;
	flex-direction: column;
	padding: 2em;
	gap: 1em;
}

#crumbs {
	display: flex;
	gap: 1em;
	align-items: center;
}

#crumbs .sep {
	position: relative;
	width: 0.5em;
	height: 0.5em;
}

#crumbs .sep::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border: white 0.2em;
	border-style: solid solid none none;
	transform: translate(-50%, -50%) rotate(45deg);
}

a {
	color: #00bf00;
}

table {
	border-collapse: collapse;
}

th, td {
	border: solid white 1px;
	padding: 0.5em 1em;
}

tr:nth-child(even) {
	background-color: #aeaeae21;
}

th {
	cursor: pointer;
	position: relative;
}

th.sort-asc::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.5em;
	transform: translate(-50%, -25%);
	border: solid transparent 0.2em;
	border-top-color: white;
}

th.sort-desc::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.5em;
	transform: translate(-50%, -55%);
	border: solid transparent 0.2em;
	border-bottom-color: white;
}