1 files changed, 64 insertions, 14 deletions

diff --git a/extension/popup/style.css b/extension/popup/style.css
index d4ac7b2..c05071f 100644
--- a/extension/popup/style.css
+++ b/extension/popup/style.css
@@ -4,7 +4,7 @@ body, html {
     padding: 0;
     margin: 0;
     min-width: 300px;
-    max-width: 400px;
+    max-width: 600px;
 }
 
 body {
@@ -35,15 +35,20 @@ ul, p {
     margin: 4px 0;
 }
 
-li {
+ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+.content li {
     padding: 3px;
 }
 
-li:nth-child(even) {
+.content li:nth-child(even) {
     background-color: white;
 }
 
-li:nth-child(odd) {
+.content li:nth-child(odd) {
     background-color: #DDDDDD;
 }
 
@@ -53,14 +58,14 @@ h1 {
     text-align: center;
 }
 
-h2 {
+.content h2 {
     font-size: 0.9em;
     margin: 2px 0;
     text-align: center;
     overflow: hidden;
 }
 
-h2:before, h2:after {
+.content h2:before, .content h2:after {
     background-color: black;
     content: '';
     display: inline-block;
@@ -70,12 +75,12 @@ h2:before, h2:after {
     width: 50%;
 }
 
-h2:before {
+.content h2:before {
     right: 0.5em;
     margin-left: -50%;
 }
 
-h2:after {
+.content h2:after {
     left: 0.5em;
     margin-right: -50%;
 }
@@ -91,14 +96,59 @@ h2:after {
     display: none;
 }
 
-#loading-screen p, #invalid-host-screen {
-    text-align: center;
-    font-style: oblique;
+.screen.has-sidebar {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: 0;
+    background-color: #CCD;
 }
 
-#track-list {
-    list-style: none;
-    padding-left: 0;
+.content {
+    min-width: 300px;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+    background-color: #EEE;
+}
+
+.sidebar {
+    min-width: 200px;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.sidebar h2 {
+    font-size: 0.9em;
+    margin: 0;
+    white-space: nowrap;
+}
+
+.sidebar li {
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    text-indent: 14px;
+}
+
+.sidebar li.rule {
+    cursor: pointer;
+}
+
+.content-screen {
+    width: 100%;
+    height: 100%;
+}
+
+.content-screen:not(.visible) {
+    display: none;
+}
+
+#loading-screen p, #invalid-host-screen, #no-rule-content {
+    text-align: center;
+    font-style: italic;
 }
 
 #track-list li.track button {