video_metadata/static/default.css

/*
	This file is part of video_metadata.

	video_metadata 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.

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


* { box-sizing: border-box; }

body {
	font-family: 'sans';
	background-color: #ccc;
	margin: 5;
	padding: 0;
}

ul {
	list-style-type: none;
	padding: 2px;
	margin: 0;
}

.debug {
	width: 500px;
	height: 200px;
	margin: 5px;
	background-color: #aaa;
	overflow: auto;
	overflow-x: hidden;
}

.query_item {
	display: grid;
	grid-template-columns: 92px 308px;
	width: 400px;
	height: 138px;
	background-color: #aaa;
}

.query_details {
	font-size: 0.75em;
	overflow: auto;
	overflow-x: hidden;
}

.directory {
	border: 1px solid black;
	background-color: #abc;
}

.file {	font-size: 0.75em; }
.movie { background-color: #89b441; }
.tv_show { background-color: #ccf; }
.none { background-color: #ccc; }
.unknown { background-color: #c77; }

.depth_1 { margin-left: 20px; }
.depth_2 { margin-left: 40px; }
.depth_3 { margin-left: 60px; }
.depth_4 { margin-left: 80px; }
.depth_5 { margin-left: 100px; }
.horizontal_list li { display: inline; }

#query_container {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 400px 400px 400px;
	grid-gap: 1rem;
}

#header li { display: inline; }

#info {
	position: absolute;
	right: 0;
	top: 0;
	width: 350px;
	height: 200px;
	background-color: #aaa;
}

#main_container {
	width: 100%;
	margin-top: 200px;
	background-color: #aaa;
}