/* Copyright (C) 2020  Gloria Mundi
 * 
 *  This file is part of the AoC Leaderboard Viewer.
 *
 *  The AoC Leaderboard Viewer is free software: you can redistribute it
 *  and/or modify it under the terms of the GNU General Public License
 *  as published by the Free Software Foundation, either version 3 of
 *  the License, or (at your option) any later version.
 *
 *  The AoC Leaderboard Viewer is distributed in the hope that it will
 *  be useful, but WITHOUT ANY WARRANTY; without even the implied
 *  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *  See the GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with the AoC Leaderboard Viewer. If not, see
 *  <https://www.gnu.org/licenses/>.
 */
html {
	height: 100%;
}

body {
	display: flex;
	flex-flow: column;
	min-height: calc(100% - 16px);
	margin: 8px;
	background-color: #0f0f23;
	color: #ccc;
	font-family: "Source Code Pro", monospace;
	font-size: 14pt;
	min-width: 60em;
}

#header {
	font-weight: bold;
	margin-bottom: 2em;
	display: flex;
	flex-flow: row;
}

#main {
	flex: 1;
	-webkit-text-size-adjust: none;
	flex-flow: row wrap;
}

.warning {
	margin: -8px -8px 8px -8px;
	padding: 8px;
	text-align: center;
	background-color: #f00;
	color: #fff;
	font-size: 2em;
}

.red {
	color: #faa;
}

.pseudo-select {
	display: inline-block;
	position: relative;
	cursor: default;
}

.pseudo-select > .current::after {
	content: " [v]";
}

.pseudo-select:hover > .possible {
	min-width: 100%;
	background-color: #0f0f23;
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
}

input[type=checkbox] { display: none; }

input[type=checkbox] + label::before {
	content: "[ ] ";
}

input[type=checkbox]:checked + label::before {
	content: "[X] ";
}

input[type=radio] { display: none; }

a, button, input[type=radio] + label, .pseudo-select > .current {
	text-decoration: none;
	color: #090;
}

a:hover, a:active, button:hover, button:active,
  input[type=radio]:checked + label {
	color: #9f9;
}

/* Styling the option doesn't really work. I'll just leave it here, maybe it
   works in some browsers. */
select, option {
	background: inherit;
	border: none;
	padding: 0 2px;
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	color: inherit;
	appearance: none;
}

button {
	background: transparent;
	border: none;
	padding: 0 2px;
	font-family: inherit;
	font-size: inherit;
	margin: 0;
}

.day {
	font-weight: normal;
	vertical-align: bottom;
	width: 1ch;
	word-break: break-all;
}

.rank, .score { text-align: right; }

.score {
	min-width: 3ch;
	padding-left: 1ch !important;
	padding-right: 1ch !important;
}

.username { padding-left: 2ch !important; }

#table-wrapper {
	flex: 1;
	min-width: max-content;
}

#table {
	border-collapse: collapse;
}

#table td, #table th {
	margin: 0;
	padding: 0;
}

#source-wrapper {
	flex: 1;
	text-align: end;
}

#ordering {
	margin-bottom: 1em;
}

.gray, .day, :disabled + label { color: #333; }
.silver { color: #99c; }
.gold { color: #ff6; }

#reload, #lb-select {
	margin-left: 2ch;
	margin-right: 2ch;
}

#graph-wrapper {
	display: flex;
	flex-flow: column;
	min-width: 50%;
}

#graph-aspect-ratio {
	position: relative;
	flex: 1;
	padding-top: 70%;
	width: 100%;
}

#graph {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.graph-controls-grid {
	display: grid;
	column-gap: 1ch;
	width: max-content;
}

.graph-controls-y {
	grid-column: 1;
	align-self: end;
	text-align: right;
}

.graph-controls-local {
	grid-column: 2;
}

.graph-controls-x {
	grid-column: 3;
	align-self: start;
}

text {
	fill: #ccc;
}

.bg-line {
	stroke: #333;
}

@font-face {
	font-family: 'Source Code Pro';
	font-style: normal;
	font-weight: 300;
	src: url(source-code-pro.ttf) format('truetype');
}