geso.css

/* Colors: http://colorpalettes.net/tag/sea-water-color/ */

body {
	color: #15222a;
	background-color: #f4f1ea;
}

a {
	color: #0390e8;
	text-decoration: none;
}

a:hover {
	color: #23b0f8;
}

a:focus, a:active {
	color: #48b4a5;
}

@media screen and (max-width: 400px) {
	h2 {
		text-align: center;
	}
}

/******************************************************************************
/* State
 */

#state {
	background-color: #255a62;
	color: #f4f1ea;
	font-size: 1.1em;
}

#state {
	padding: 1px;
}

#state .statusline {
	padding-bottom: 5px;
	border-bottom: 1px solid #48b4a5;
}

#state .statusline, #state .actions {
	margin: 10px;
}


#status {
	text-transform: capitalize;
	font-weight: bold;
	padding-right: 10px;
}

#state #file:before {
	position: relative;
	bottom: 2px;
	padding-right: 7px;
}

#state #file:empty:after {
	content: 'Nothing to play.';
	font-style: italic;
}

#state .actions {
	line-height: 1.5em;
}

#state .actions a {
	color: #93cadf;
	padding: 2px 10px;
}

#state.off .actions a.on,
#state.playing .actions a.play,
#state.paused .actions a.pause {
	color: #ccc;
}

#state .actions .section {
	display: block;
}

#state .actions .section b {
	padding-right: 10px;
}

/******************************************************************************
/* Menu
 */

ul.menu {
	padding: 0;
}

.menu li {
	display: inline;
	padding: 1px;
	line-height: 40px;
}

.menu li a {
	padding: 10px;
}

.menu .current a {
	background-color: #4bafc9;
}

.menu .current a {
	color: #f4f1ea;
}

.menu form {
	display: inline;
}

.menu input[type="text"] {
	margin-left: 10px;
}

.menu input {
	background-color: #f4f1ea;
	border: 1px solid #48b4a5;
	padding: 7px;
}

@media screen and (max-width: 600px) {
	.menu input[type="submit"] {
		display: none;
	}
}

/******************************************************************************
/* Commands
 */

.commands {
	list-style-type: none;
	padding: 0 0 0 10px;
}

.commands a, .commands li {
	padding: 5px;
}

/******************************************************************************
/* Library
 */

.library {
	padding: 0 10px;
}

.library ul {
	list-style-type: none;
	padding-left: 0;
}

.library ul ul {
	padding-left: 25px;
}

.library li.dir {
	padding: 5px 0;
}

.library li.dir span {
	font-weight: bold;
}

.library li.file {
	padding: 5px 0;
}

/******************************************************************************
/* YouTube
 */

.youtube {
	list-style-type: none;
	padding: 0;
}

.youtube li {
	padding: 5px 10px 5px 7px;
	margin: 5px 0;
	background-color: #ffffff;
	border-left: 3px solid #ffffff;
}

.youtube .playing { border-left-color: #5BA9EA; }
.youtube .running { border-left-color: #FFC96E; }

.youtube img {
	width: 320px;
	text-align: center;
}

.youtube img,
.youtube .title,
.youtube .meta,
.youtube .description {
	display: block;
	padding: 4px 0;
}

.youtube .title {
	font-size: 1.2em;
}

.youtube .meta {
	color: #65727a;
}

.youtube .description {
	font-size: 0.9em;
}

@media screen and (max-width: 499px) {
	.youtube img {
		width: 100%;
		display: block;
		margin: auto;
	}
}

@media screen and (min-width: 500px) {
	.youtube img {
		width: 320px;
		float: left;
		padding: 0 10px 0 0;
	}
	.youtube .title,
	.youtube .meta,
	.youtube .description {
		margin-left: 335px;
	}
}

@media screen and (min-width: 500px) and (max-width: 800px) {
	.youtube img {
		width: 40%;
	}
	.youtube .title,
	.youtube .meta,
	.youtube .description {
		margin-left: 42%;
	}
}

.ytdl:empty:after {
	content: 'No videos are being downloaded.';
	font-style: italic;
	padding-left: 10px;
}

.ytdl td {
	padding: 4px 10px;
}

.ytdl .status {
	text-transform: capitalize;
}

.ytdl .canceled .status { color: #E80566; }
.ytdl .failed .status { color: #D92422; }
.ytdl .done .status { color: #2DC134; }
.ytdl .downloading .status { color: #ECA125; }

.ytdl .do a {
	padding: 5px;
}