From a2b6c45125def4c6dac05b0dc767288122f9436a Mon Sep 17 00:00:00 2001
From: Ondrej Zara <ondrej.zara@gmail.com>
Date: Tue, 26 Mar 2019 17:07:52 +0100
Subject: [PATCH] styling

---
 app/app.css            | 36 +++++++++++++++---------------------
 app/css/app.less       |  3 +++
 app/css/component.less |  3 ---
 app/css/player.less    | 12 ++++++++++--
 app/css/queue.less     | 11 +----------
 app/index.html         |  8 +++++---
 6 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/app/app.css b/app/app.css
index 1424fe8..9c80f2a 100644
--- a/app/app.css
+++ b/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;
 }
diff --git a/app/css/app.less b/app/css/app.less
index a1ffb8d..aa265e3 100644
--- a/app/css/app.less
+++ b/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;
diff --git a/app/css/component.less b/app/css/component.less
index dce52f9..a6f8dfd 100644
--- a/app/css/component.less
+++ b/app/css/component.less
@@ -34,9 +34,6 @@
 
 		button {
 			flex-shrink: 0;
-			width: 32px;
-			height: 32px;
-			font-size: 32px;
 		}
 	}
 }
diff --git a/app/css/player.less b/app/css/player.less
index 285183d..43d8659 100644
--- a/app/css/player.less
+++ b/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; }
+	}
+
 }
\ No newline at end of file
diff --git a/app/css/queue.less b/app/css/queue.less
index 1f7ebc8..ed581a4 100644
--- a/app/css/queue.less
+++ b/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; }
-}
\ No newline at end of file
+}
diff --git a/app/index.html b/app/index.html
index a22234e..532d60b 100644
--- a/app/index.html
+++ b/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>