shadows

app/app.css

@@ -12,7 +12,7 @@ body {
   line-height: 1.25;
   background-color: var(--bg);
   color: var(--fg);
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
+  text-shadow: var(--shadow);
   max-width: 800px;
   margin: 0 auto;
   overflow: hidden;
@@ -41,7 +41,7 @@ button {
   cursor: pointer;
   flex-shrink: 0;
 }
-.art img {
+button .icon {
   vertical-align: top;
 }
 .long-line {
@@ -70,7 +70,6 @@ button {
   font-weight: normal;
 }
 .icon {
-  vertical-align: middle;
   width: 24px;
 }
 .icon path:not([fill]),
@@ -157,6 +156,9 @@ nav ul li.active {
   display: flex;
   flex-direction: column;
 }
+.component header {
+  display: flex;
+}
 .component ul {
   flex-grow: 1;
   overflow: auto;
@@ -176,6 +178,7 @@ nav ul li.active {
 .component li .info .icon {
   color: var(--primary);
   margin-right: var(--icon-spacing);
+  filter: drop-shadow(var(--shadow));
 }
 .component li .info h2 {
   font-size: var(--font-size-large);
@@ -201,6 +204,9 @@ nav ul li.active {
   display: flex;
   flex-direction: column;
 }
+#queue header {
+  display: flex;
+}
 #queue ul {
   flex-grow: 1;
   overflow: auto;
@@ -220,6 +226,7 @@ nav ul li.active {
 #queue li .info .icon {
   color: var(--primary);
   margin-right: var(--icon-spacing);
+  filter: drop-shadow(var(--shadow));
 }
 #queue li .info h2 {
   font-size: var(--font-size-large);
@@ -248,6 +255,9 @@ nav ul li.active {
   display: flex;
   flex-direction: column;
 }
+#library header {
+  display: flex;
+}
 #library ul {
   flex-grow: 1;
   overflow: auto;
@@ -267,6 +277,7 @@ nav ul li.active {
 #library li .info .icon {
   color: var(--primary);
   margin-right: var(--icon-spacing);
+  filter: drop-shadow(var(--shadow));
 }
 #library li .info h2 {
   font-size: var(--font-size-large);
@@ -290,7 +301,9 @@ nav ul li.active {
 #library .art img,
 #library .art .icon {
   width: 64px;
-  margin-right: var(--icon-spacing);
+}
+#library .art .icon {
+  filter: drop-shadow(var(--shadow));
 }
 #library .group {
   cursor: pointer;
@@ -318,6 +331,9 @@ nav ul li.active {
   display: flex;
   flex-direction: column;
 }
+#fs header {
+  display: flex;
+}
 #fs ul {
   flex-grow: 1;
   overflow: auto;
@@ -337,6 +353,7 @@ nav ul li.active {
 #fs li .info .icon {
   color: var(--primary);
   margin-right: var(--icon-spacing);
+  filter: drop-shadow(var(--shadow));
 }
 #fs li .info h2 {
   font-size: var(--font-size-large);
@@ -373,6 +390,9 @@ nav ul li.active {
   display: flex;
   flex-direction: column;
 }
+#playlists header {
+  display: flex;
+}
 #playlists ul {
   flex-grow: 1;
   overflow: auto;
@@ -392,6 +412,7 @@ nav ul li.active {
 #playlists li .info .icon {
   color: var(--primary);
   margin-right: var(--icon-spacing);
+  filter: drop-shadow(var(--shadow));
 }
 #playlists li .info h2 {
   font-size: var(--font-size-large);
@@ -427,6 +448,9 @@ nav ul li.active {
   align-items: center;
   justify-content: center;
 }
+#yt header {
+  display: flex;
+}
 #yt ul {
   flex-grow: 1;
   overflow: auto;
@@ -446,6 +470,7 @@ nav ul li.active {
 #yt li .info .icon {
   color: var(--primary);
   margin-right: var(--icon-spacing);
+  filter: drop-shadow(var(--shadow));
 }
 #yt li .info h2 {
   font-size: var(--font-size-large);
@@ -497,25 +522,44 @@ nav ul li.active {
     transform: rotate(360deg);
   }
 }
+.search {
+  display: flex;
+  align-items: center;
+  max-width: 50%;
+  margin-left: auto;
+  transition: all 300ms;
+}
 .search .icon {
   width: 32px;
+  cursor: pointer;
 }
 .search input {
   border: none;
   color: inherit;
   background-color: inherit;
   border-bottom: 1px solid var(--fg);
-  transition: all 300ms;
+  xtransition: all 300ms;
-  padding: 0;
-  width: 30%;
-}
-.search:not(.open) input {
   width: 0;
+  padding: 0;
+}
+.search.open {
+  flex-grow: 1;
+}
+.search.open input {
+  flex-grow: 1;
+}
+.art {
+  margin-right: var(--icon-spacing);
+}
+.art .icon,
+.art img {
+  vertical-align: top;
 }
 :root {
   --primary: dodgerblue;
   --fg: #fff;
   --bg: #333;
+  --shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
   --font-size-large: 112.5%;
   --icon-spacing: 4px;
 }

app/css/app.less

@@ -10,7 +10,7 @@ body {
 	line-height: 1.25;
 	background-color: var(--bg);
 	color: var(--fg);
-	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
+	text-shadow: var(--shadow);
 	max-width: 800px;
 	margin: 0 auto;
 	overflow: hidden;
@@ -39,10 +39,8 @@ button {
 	line-height: 1;
 	cursor: pointer;
 	flex-shrink: 0;
-}
 
-.art img {
+	.icon { vertical-align: top; }
-	vertical-align: top;
 }
 
 .long-line {
@@ -71,4 +69,5 @@ button {
 @import "playlists.less";
 @import "yt.less";
 @import "search.less";
+@import "art.less";
 @import "variables.less";

app/css/art.less

@@ -0,0 +1,7 @@
+.art {
+	margin-right: var(--icon-spacing);
+	.icon, img {
+		vertical-align: top;
+	}
+
+}

app/css/component.less

@@ -3,6 +3,10 @@
 	display: flex;
 	flex-direction: column;
 
+	header {
+		display: flex;
+	}
+
 	ul {
 		flex-grow: 1;
 		overflow: auto;
@@ -23,6 +27,7 @@
 			.icon {
 				color: var(--primary);
 				margin-right: var(--icon-spacing);
+				filter: drop-shadow(var(--shadow));
 			}
 
 			h2 {

app/css/icons.less

@@ -1,5 +1,4 @@
 .icon {
-	vertical-align: middle;
 	width: 24px;
 
 	path, polygon, circle {

app/css/library.less

@@ -3,7 +3,10 @@
 
 	.art img, .art .icon {
 		width: 64px;
-		margin-right: var(--icon-spacing);
+	}
+
+	.art .icon {
+		filter: drop-shadow(var(--shadow));
 	}
 
 	.group {

app/css/search.less

@@ -1,6 +1,13 @@
 .search {
+	display: flex;
+	align-items: center;
+	max-width: 50%;
+	margin-left: auto;
+	transition: all 300ms;
+
 	.icon {
 		width: 32px;
+		cursor: pointer;
 	}
 
 	input {
@@ -8,14 +15,15 @@
 		color: inherit;
 		background-color: inherit;
 		border-bottom: 1px solid var(--fg);
-		transition: all 300ms;
+		xtransition: all 300ms;
+		width: 0;
 		padding: 0;
-		width: 30%;
 	}
 
-	&:not(.open) {
+	&.open {
+		flex-grow: 1;
 		input {
-			width: 0;
+			flex-grow: 1;
 		}
 	}
 }

app/css/variables.less

@@ -2,6 +2,7 @@
 	--primary: dodgerblue;
 	--fg: #fff;
 	--bg: #333;
+	--shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
 
 	--font-size-large: 112.5%;
 	--icon-spacing: 4px;

app/js/fs.js

@@ -13,8 +13,6 @@ function buildHeader(path) {
 	let header = node.querySelector("header");
 	html.clear(header);
 
-	header.appendChild(search.getNode());
-
 	let button = html.button({}, "/", header);
 	button.addEventListener("click", e => list(""));
 
@@ -23,6 +21,8 @@ function buildHeader(path) {
 		let path = all.slice(0, index+1).join("/");
 		button.addEventListener("click", e => list(path));
 	});
+
+	header.appendChild(search.getNode());
 }
 
 function buildDirectory(data, parent) {

app/js/lib/mpd.js

@@ -39,7 +39,7 @@ function serializeFilter(filter) {
 	let tokens = ["("];
 	Object.entries(filter).forEach(([key, value], index) => {
 		index && tokens.push(" AND ");
-		tokens.push(`(${key} == "${value}")`);
+		tokens.push(`(${key} == "${escape(value)}")`);
 	});
 	tokens.push(")");
 

app/js/library.js

@@ -13,8 +13,6 @@ function buildHeader(filter) {
 	let header = node.querySelector("header");
 	html.clear(header);
 
-	header.appendChild(search.getNode());
-
 	let button = html.button({}, "Music Library", header);
 	button.addEventListener("click", e => listArtists());
 
@@ -31,6 +29,8 @@ function buildHeader(filter) {
 			button.addEventListener("click", e => listSongs(albumFilter));
 		}
 	}
+
+	header.appendChild(search.getNode());
 }
 
 function buildAlbum(album, filter, parent) {