styling

app/app.css

@@ -1,7 +1,13 @@
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
 html {
   background-color: #fff;
 }
 body {
+  box-sizing: border-box;
   font-family: lato, sans-serif;
   line-height: 1.3;
   background-color: #333;
@@ -95,9 +101,16 @@ nav ul li.active {
 #player:not([data-flags~=repeat]) .repeat {
   opacity: 0.5;
 }
-#player button {
+#player .icon {
   width: 64px;
-  height: 64px;
+}
+#player .misc {
+  display: flex;
+  flex-direction: column;
+  width: 48px;
+}
+#player .misc .icon {
+  width: 48px;
 }
 .component {
   height: 100%;
@@ -130,9 +143,6 @@ nav ul li.active {
 }
 .component .grid button {
   flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  font-size: 32px;
 }
 #queue {
   height: 100%;
@@ -165,16 +175,6 @@ nav ul li.active {
 }
 #queue .grid button {
   flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  font-size: 32px;
-}
-#queue li {
-  display: flex;
-  flex-direction: row;
-}
-#queue li + li {
-  border-top: 1px solid #888;
 }
 #queue .current {
   font-weight: bold;
@@ -210,9 +210,6 @@ nav ul li.active {
 }
 #library .grid button {
   flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  font-size: 32px;
 }
 #fs {
   height: 100%;
@@ -245,7 +242,4 @@ nav ul li.active {
 }
 #fs .grid button {
   flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  font-size: 32px;
 }

app/css/app.less

@@ -1,8 +1,11 @@
+*, *::before, *::after { box-sizing: inherit; }
+
 html {
 	background-color: #fff;
 }
 
 body {
+	box-sizing: border-box;
 	font-family: lato, sans-serif;
 	line-height: 1.3;
 	background-color: #333;

app/css/component.less

@@ -34,9 +34,6 @@
 
 		button {
 			flex-shrink: 0;
-			width: 32px;
-			height: 32px;
-			font-size: 32px;
 		}
 	}
 }

app/css/player.less

@@ -9,8 +9,16 @@
 	&[data-state=play] .play { display: none; }
 	&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
 
-	button {
+	.icon {
 		width: 64px;
-		height: 64px;
 	}
+
+	.misc {
+		display: flex;
+		flex-direction: column;
+		@size: 96px / 2;
+		width: @size;
+		.icon { width: @size; }
+	}
+
 }

app/css/queue.less

@@ -1,14 +1,5 @@
 #queue {
 	.component;
 
-	li {
-		display: flex;
-		flex-direction: row;
-
-		+ li {
-			border-top: 1px solid #888;
-		}
-	}
-
 	.current { font-weight: bold; }
-}
+}

app/index.html

@@ -15,12 +15,14 @@
 					<span class="artist-album"></span>
 				</div>
 				<span class="elapsed"></span>/<span class="duration"></span>
+				<button class="prev"></button>
 				<button class="play"></button>
 				<button class="pause"></button>
-				<button class="prev"></button>
 				<button class="next"></button>
-				<button class="repeat"></button>
-				<button class="random"></button>
+				<div class="misc">
+					<button class="repeat"></button>
+					<button class="random"></button>
+				</div>
 			</section>
 		</header>
 		<main>