/* GENERIC ELEMENTS */
:root {
	--bg1: #FFF1;
	--bg2: #FFF2;
	--text: #FFF;
	--status-offline: #FFF2;
	--status-online: #4F4;
	--status-afk: #F84;
	--error: #F44;
	--compact-transition-duration: 0.2s;
}

a {
	color: inherit;
}

.webstats-tableheading {
	margin-top: 20px;
	font-size: 1.5em;
	font-weight: bold;
}

.webstats-tableheading > .webstats-pagination {
	margin-left: 50px;
}
.webstats-tableheading > .webstats-pagination * {
	margin-right: 3px;
}
.webstats-pagination.pagination-hidden {
	display: none;
}

.webstats-error-message {
	color: var(--error);
}

table {
	--row-height: 50px;
	--gap: 2px;
	border-spacing: var(--gap);
}

html.compact table {
	--row-height: 32px;
}

html.hide-offline tr.offline {
	display: none;
}

tr.current-player td:not(.empty) {
	background: var(--bg2);
	font-weight: bold;
}

td:not(.empty) {
	position: relative;
	height: var(--row-height);
	padding: 0px 20px;
	background: var(--bg1);
	text-align: right;
	white-space: nowrap;
	transition: height var(--compact-transition-duration), padding var(--compact-transition-duration);
}

td:not(.empty)[data-objective=Player] {
	text-align: left;
	padding-left: 40px;
}

td:not(.empty)[data-objective=Player][title="#server"] {
	padding-left: 20px;
}

td:not(.empty)::after {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: var(--relative);
	height: 100%;
	background: var(--bg2);
	z-index: -1;
}

td.skin, html.scroll-playernames td[data-objective=Player], html.scroll-playernames th[data-objective=Player] {
	position: sticky !important;
	z-index: 10;
}

html.scroll-playernames th[data-objective=Player] {
	left: 0;
	backdrop-filter: blur(5px);
}

html.scroll-playernames td[data-objective=Player] {
	left: calc(var(--row-height) + var(--gap));
	backdrop-filter: blur(5px);
	transition:
		height var(--compact-transition-duration),
		padding var(--compact-transition-duration),
		left var(--compact-transition-duration);
}

td.skin {
	left: 0;
	padding: 0px !important;
	background: transparent;
}

td.skin img {
	width: var(--row-height);
	-ms-interpolation-mode: nearest-neighbor;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-pixelated;
		image-rendering: pixelated;
	display: block;
	transition: width var(--compact-transition-duration);
}

td.skin[title="#server"] {
	/* "Console" image */
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAPElEQVQ4T2NUUlL6z0ABYBw1gGE0DBioHAZ3795lUFZWJildosQCRQaQoxnkVLgL0A2A8dFpdP8NfEICAMkiK2HeQ9JUAAAAAElFTkSuQmCC");
	background-size: cover;
	image-rendering: pixelated;
}

html.compact td:not(.empty){
	padding: 0px 10px;
}

html.compact td:not(.empty)[data-objective=Player]{
	padding-left: var(--row-height);
}

html.compact td:not(.empty)[data-objective=Player][title="#server"] {
	padding-left: 10px;
}

th {
	padding: 10px 20px;
	background: var(--bg2);
	cursor: pointer;
	transition: padding var(--compact-transition-duration);
}

html.compact th{
	padding: 5px 10px;
}

th.webstats-sort-column {
	position: relative;
}

th.webstats-sort-column::after {
	position: absolute;
	top: 10px;
	right: 10px;
	transition: top var(--compact-transition-duration), right var(--compact-transition-duration);
}

th.webstats-sort-column.ascending::after {
	content: "↑";
}

th.webstats-sort-column.descending::after {
	content: "↓";
}

html.compact th.webstats-sort-column::after {
	top: 5px;
	right: 5px;
}

.status {
	position: absolute;
	top: calc(50% - 5px);
	left: 15px;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: var(--status-offline);
	transition: top var(--compact-transition-duration), left var(--compact-transition-duration);
}

html.compact .status {
	left: 11px;
}

td[title="#server"] .status {
	display: none;
}

.status.online {
	background: var(--status-online);
}

.status.afk {
	background: var(--status-afk);
}

.mc-format.mc-black { color: #000000 }
.mc-format.mc-dark_blue { color: #0000AA }
.mc-format.mc-dark_green { color: #00AA00 }
.mc-format.mc-dark_aqua { color: #00AAAA }
.mc-format.mc-dark_red { color: #AA0000 }
.mc-format.mc-dark_purple { color: #AA00AA }
.mc-format.mc-gold { color: #FFAA00 }
.mc-format.mc-gray { color: #AAAAAA }
.mc-format.mc-dark_gray { color: #555555 }
.mc-format.mc-blue { color: #5555FF }
.mc-format.mc-green { color: #55FF55 }
.mc-format.mc-aqua { color: #55FFFF }
.mc-format.mc-red { color: #FF5555 }
.mc-format.mc-light_purple { color: #FF55FF }
.mc-format.mc-yellow { color: #FFFF55 }
.mc-format.mc-white { color: #FFFFFF }

.mc-format.mc-obfuscated { /* no style */ }
.mc-format.mc-bold { font-weight: bold }
.mc-format.mc-strikethrough { text-decoration: line-through }
.mc-format.mc-underline { text-decoration: underline }
.mc-format.mc-italic { font-style: italic }
.mc-format.mc-reset { /* no style */ }

/* POSITIONAL ELEMENTS */
body {
	margin: 0px;
	color: var(--text);
	background-color: #222;
	font-family: sans-serif;
}

main {
	margin: 100px auto;
	width: 60%;
	transition: width var(--compact-transition-duration);
}

main > span {
	margin-right: 10px;
}

/* MEDIA DIRECTIVES */
@media (prefers-color-scheme: dark) {
	:root {
		--bg1: #0003;
		--bg2: #0005;
		--text: #DDD;
	}
}

@media screen and (max-width: 700px) {
	main {
		width: 100%;
	}
}