1 files changed, 61 insertions, 19 deletions

diff --git a/extension/popup/style.css b/extension/popup/style.css
index 50d1448..61d937a 100644
--- a/extension/popup/style.css
+++ b/extension/popup/style.css
@@ -1,18 +1,59 @@
-body, html {
-    width: 100%;
+html, body, #top-level-container {
     height: 100%;
-    padding: 0;
-    margin: 0;
-    min-width: 300px;
-    max-width: 600px;
+}
+
+:root {
+    --bg-color: #EEE;
+    --bg-accent-color: #FFF;
+    --border-color: #111;
+    --text-color: #111;
+    --li-color: 0;
+    --even-li-color: rgba(var(--li-color), var(--li-color), var(--li-color), 0.05);
+    --odd-li-color: rgba(var(--li-color), var(--li-color), var(--li-color), 0.10);
+
+    --scope-selected: #000;
+    --scope-unselected: #777;
+    --scope-highlighted: orange;
 }
 
 body {
-    background-color: #EEEEEE;
-    color: black;
+    display: grid;
+    grid-template-areas:
+        "header"
+        "screen";
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    background-color: var(--bg-color);
+    color: var(--text-color);
     font-family: Helvetica, Arial, sans-serif;
 }
 
+body > h1 {
+    grid-area: header;
+    background-color: var(--bg-accent-color);
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text-color);
+    margin: 0;
+}
+
+.scope[data-selected=yes] {
+    color: var(--scope-selected);
+}
+
+.scope[data-selected=no] {
+    color: var(--scope-unselected);
+}
+
+.scope.highlighted {
+    color: var(--scope-highlighted);
+}
+
+.screen {
+    grid-area: screen;
+    overflow: hidden;
+}
+
 .content label {
     font-weight: 800;
 }
@@ -45,11 +86,11 @@ ul {
 }
 
 .content li:nth-child(even) {
-    background-color: white;
+    background-color: var(--even-li-color);
 }
 
 .content li:nth-child(odd) {
-    background-color: #DDDDDD;
+    background-color: var(--odd-li-color);
 }
 
 h1 {
@@ -66,7 +107,7 @@ h1 {
 }
 
 .content h2:before, .content h2:after {
-    background-color: black;
+    background-color: var(--text-color);
     content: '';
     display: inline-block;
     height: 1px;
@@ -86,8 +127,6 @@ h1 {
 }
 
 .screen {
-    width: 100%;
-    height: 100%;
     padding: 5px;
     box-sizing: border-box;
 }
@@ -102,7 +141,6 @@ h1 {
     justify-content: flex-start;
     align-items: stretch;
     padding: 0;
-    background-color: #CCD;
 }
 
 .content {
@@ -110,14 +148,16 @@ h1 {
     height: 100%;
     padding: 5px;
     box-sizing: border-box;
-    background-color: #EEE;
 }
 
 .sidebar {
-    min-width: 200px;
-    height: 100%;
-    padding: 5px;
+    width: 280px;
+    padding: 5px 10px;
     box-sizing: border-box;
+    overflow-y: scroll;
+    border-right: 1px solid var(--border-color);
+    flex-shrink: 0;
+    background-color: var(--bg-accent-color);
 }
 
 .sidebar h2 {
@@ -140,6 +180,8 @@ h1 {
 .content-screen {
     width: 100%;
     height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
 }
 
 .content-screen:not(.visible) {
@@ -155,7 +197,7 @@ h1 {
     float: right;
 }
 
-#track-list li.track label {
+#track-list li.track label, .sidebar label {
     display: block;
     white-space: nowrap;
 }