From 32ef82286a6c84157ed6d965341d67f033ffe363 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Tue, 5 May 2020 22:24:05 +0200
Subject: [PATCH] Improve navigation design and make it more compact

---
 resources/style/index.css | 65 ++++++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/resources/style/index.css b/resources/style/index.css
index b0f6066..c51069f 100644
--- a/resources/style/index.css
+++ b/resources/style/index.css
@@ -7,6 +7,7 @@ body {
     display: flex;
     flex-direction: column;
     height: 100%;
+    width: 48px;
 }
 
 #service-selector {
@@ -15,7 +16,11 @@ body {
     margin: 0;
     padding: 0;
 
-    overflow-y: auto;
+    overflow: hidden auto;
+}
+
+#service-selector::-webkit-scrollbar {
+    width: 6px;
 }
 
 #service-selector [draggable] {
@@ -29,14 +34,14 @@ body {
 }
 
 #service-selector .drag-target button {
-    height: 144px;
+    height: 56px;
     padding-top: 88px;
 }
 
 #service-selector .drag-target button::after,
 #service-last-drag-position.drag-target {
     content: "";
-    height: 72px;
+    height: 56px;
     border: 1px dashed #fff;
     box-sizing: border-box;
 
@@ -71,11 +76,12 @@ body {
 }
 
 #navigation button {
+    position: relative;
     display: block;
-    width: 100%;
-    padding: 16px;
+    width: 48px;
+    height: 48px;
     margin: 0;
-    height: 72px;
+    padding: 0;
 
     color: #fff;
     border: 0;
@@ -84,12 +90,17 @@ body {
     cursor: pointer;
 }
 
+#navigation button:focus {
+    outline-color: transparent;
+    background: #fff3 !important;
+}
+
 #navigation button img {
-    width: 32px;
+    width: 24px;
 }
 
 #navigation button i {
-    font-size: 32px;
+    font-size: 24px;
 }
 
 #service-selector li {
@@ -102,39 +113,39 @@ body {
 }
 
 #service-selector li.active button {
-    position: relative;
     background-color: #fff2;
 }
 
-#service-selector li.active button::before {
+#service-selector li.loaded button::before {
     content: "";
     display: block;
     position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    border-left: 4px solid #ffffff2e;
-}
-
-#service-selector li.loaded::after {
-    content: "";
-    position: absolute;
+    right: 0;
     top: 50%;
-    right: 2px;
     transform: translateY(-50%);
-    width: 4px;
-    height: 4px;
-
-    background-color: #fff;
-    border-radius: 100%;
+    height: 75%;
+    border-right: 4px solid #ffffff3e;
 }
 
+/*#service-selector li.loaded::after {*/
+/*    content: "";*/
+/*    position: absolute;*/
+/*    top: 50%;*/
+/*    right: 2px;*/
+/*    transform: translateY(-50%);*/
+/*    width: 4px;*/
+/*    height: 4px;*/
+
+/*    background-color: #fff;*/
+/*    border-radius: 100%;*/
+/*}*/
+
 #navigation button:hover {
     background-color: #fff3;
 }
 
 #history {
-    padding: 8px;
+    padding: 2px;
 }
 
 #history button {
@@ -145,8 +156,6 @@ body {
     font-size: 12px;
 
     background: #fff1;
-    border: 1px solid #fff4;
-    border-radius: 72px;
 
     color: #fff;
     cursor: pointer;