/*
	This program 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.

	This program 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 This program.  If not, see <https://www.gnu.org/licenses/>.
*/

@font-face { font-family: Roboto; src: url('/static/fonts/Roboto/Roboto-Regular.ttf'); }

body {
	font-family: Roboto;
	font-size: medium;
	margin: 0;
	color: var(--text-c);
	background-color: var(--bg-c);
}

div.offline-warning {
	top: 0;
	position: sticky;
	padding: 10px;
	text-align: center;
	box-shadow: 0px 0px 5px #888;
	border-bottom: 0.4em solid var(--bg-c-warn);
	background-color: var(--bg-c-secondary);
	color: var(--text-c-secondary);
}

/* Messageblock animation */
@keyframes msgblock-anim{
	0%{}
	75%{
		opacity: 1;
		transform: translateX(-50%) rotateX(0deg);
	}
	100%{
		opacity: 0;
		transform: translateX(-50%) rotateX(90deg);
	}
}

div.msgblock {
	/* Center */
	left: 50%;
	transform: translateX(-50%); 
	/* General positioning and appearance */
	top: 1%;
	padding: 1px 1em;
	border-radius: 0.2em;
	background-color: var(--bg-c-secondary);
	color: var(--text-c-secondary);
	box-shadow: 0px 0px 5px #888;
	/* Animation stuff */
	position: absolute;
	animation-name: msgblock-anim;
	animation-duration: 5000ms;
	animation-fill-mode: forwards;
}
	div.warnmsg {
		border-left: 1em solid var(--bg-c-warn)
	}
	div.infomsg {
		border-left: 1em solid var(--bg-c-info)
	}

a {
	color: var(--link-c);
}
	a:hover {
		background-color: var(--link-c-hover);
		border-radius: 2px;
	}

div.container {
	margin: 2%;
}

div.footer {
	margin: 0;
	color: var(--text-c-secondary);
	background-color: var(--bg-c-secondary);
	display: flex;
	flex-wrap: wrap;
}
	div.footer div {
		flex: 1;
	}
	div.footer div.left {
		text-transform: uppercase;
		text-align: left;
	}
	div.footer div.center {
		text-align: center;
	}
	div.footer div.right {
		text-align: right;
	}
	div.footer p {
		padding: 1px 16px;
	}
	div.footer a {
		color: var(--link-c-secondary);
	}
		div.footer a:hover {
			background-color: var(--link-c-hover-secondary);
			border-radius: 2px;
		}

table, th, td {
	border: 1px solid var(--table-border-c);
	border-collapse: collapse;
	padding: 10px;
}

nav ul {
	margin: 0;
	padding: 0;
	background-color: var(--bg-c-secondary);
	list-style-type: none;
	overflow: hidden;
}
nav li {
	float: left;
}
	nav li a {
		display: block;
		color: var(--link-c-nav);
		text-align: center;
		padding: 9px 11px;
		margin: 5px;
		text-decoration: none;
	}
	nav li a:hover, nav li a:focus {
		background-color: var(--bg-nav-c-hover);
		color: var(--nav-c-hover);
		border-radius: 5px;
	}

input, textarea {
	color: var(--input-text-c);
	border-radius: 5px;
	padding: 4px 6px;
	margin: 8px 0;
	box-sizing: border-box;
	outline: none;
	background-color: var(--input-bg-c);
	border: 3px solid var(--input-border-c);
	transition: outline 0.5s;
}
	input:focus, textarea:focus {
		border: 3px solid var(--input-border-c-focus);
	}
	input:hover, textarea:hover {
		background-color: var(--input-bg-c-hover);
	}

textarea {
	font-family: Roboto;
	min-width: 10em;
	min-height: 10em;
	width: 354.6px;
	height: 15em;
}

select {
	color: var(--select-text-c);
	border-radius: 5px;
	padding: 4px 6px;
	margin: 8px 0;
	box-sizing: border-box;
	outline: none;
	background-color: var(--select-bg-c);
	border: 3px solid var(--select-border-c);
}

div.userlist {
	border-left: 3px solid var(--text-c);
	padding-left: 15px;
	width: max-content;
	margin-left: 1%;
}
	div.userlist ul {
		height: 200px;
		overflow-y: auto;
		padding: 0;
	}
		div.userlist ul li {
			list-style-type: none;
			list-style-position:inside;
		}

#select-all {
	margin-top: 0px;
	margin-bottom: 20px;
}

#select-all:checked ~ div.userlist {
	opacity: 0.5;
	pointer-events: none;
}

span.icon-trash, span.icon-restore, span.icon-copyleft {
	display: block;
}
	span.icon-trash .alt, span.icon-restore .alt, span.icon-copyleft .alt {
		display: none;
	}
	span.icon-trash {
		background-image: url('/static/icons/trash.png');
		width: 1em;
		height: calc(1em * calc(48 / 37)); /* 1em * image aspect ratio */
		background-size: 1em auto;
		background-repeat: no-repeat;
	}
	span.icon-restore {
		background-image: url('/static/icons/restore.png');
		width: 1.45em;
		height: calc(1.45em * calc(48 / 56)); /* 1.45em * image aspect ratio */
		background-size: 1.45em auto;
		background-repeat: no-repeat;
	}
	span.icon-copyleft {
		display: inline-block;
		background-image: url('/static/icons/copyleft.png');
		width: 1em;
		height: 1em;
		background-size: 1em auto;
		background-repeat: no-repeat;
	}

div.post {
	border: 1px solid var(--table-border-c);
	padding: 10px;
	margin-bottom: 20px;
}

	div.post img {
		width: 200px;
		margin: 10px;
	}