Make styles...nicer

author: Florrie <towerofnix@gmail.com> 2019-03-24 13:45:28 -0300
committer: Florrie <towerofnix@gmail.com> 2019-03-24 13:45:28 -0300
commit: 0afb52b55a45326e3d3298442c54cfd34ee8cbb6 (patch)
tree: 145f449f6c15c04b2aaa0f32f0c4c9be0d54c0d7
parent: bcd073c5aa5498035175910f571a081bd52cf9be (diff)
3 files changed, 67 insertions, 33 deletions
diff --git a/extension/popup/index.html b/extension/popup/index.html
index e7d1cb9..a287345 100644
--- a/extension/popup/index.html
+++ b/extension/popup/index.html
@@ -6,6 +6,7 @@
         <link rel="stylesheet" href="style.css">
     </head>
     <body>
+        <h1>Interactive BGM</h1>
         <div class="screen visible" id="loading-screen">
             <p>Loading...</p>
         </div>
diff --git a/extension/popup/main.js b/extension/popup/main.js
index d5beeee..cb51c75 100644
--- a/extension/popup/main.js
+++ b/extension/popup/main.js
@@ -230,6 +230,8 @@ function loadRuleScreen({tab, rule, saveRule, deleteRule}) {
 
         span.style.cursor = 'pointer';
 
+        span.classList.add('scope');
+
         const getSubordinateSpans = () => {
             const index = allSpans.indexOf(span);
             return allSpans.slice(0, index + 1);
@@ -240,25 +242,15 @@ function loadRuleScreen({tab, rule, saveRule, deleteRule}) {
             return allSpans.slice(index + 1);
         };
 
-        const updateStyle = s => {
-            if (s.dataset.selected === 'yes') {
-                s.style.color = '#000000';
-            } else {
-                s.style.color = '#777777';
-            }
-        };
-
-        updateStyle(span);
-
         span.addEventListener('mouseenter', () => {
             for (const s of getSubordinateSpans()) {
-                s.style.color = 'orange';
+                s.classList.add('highlighted');
             }
         });
 
         span.addEventListener('mouseleave', () => {
             for (const s of getSubordinateSpans()) {
-                updateStyle(s);
+                s.classList.remove('highlighted');
             }
         });
 
@@ -270,13 +262,12 @@ function loadRuleScreen({tab, rule, saveRule, deleteRule}) {
             }
 
             for (const s of getSubordinateSpans()) {
+                s.classList.remove('highlighted');
                 setSelected(s, isSelected(span));
-                updateStyle(s);
             }
 
             for (const s of getSuperiorSpans()) {
                 setSelected(s, false);
-                updateStyle(s);
             }
 
             save(getSubordinateSpans().filter(isSelected).map(s => s.dataset.partValue));
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;
 }
author	Florrie <towerofnix@gmail.com>	2019-03-24 13:45:28 -0300
committer	Florrie <towerofnix@gmail.com>	2019-03-24 13:45:28 -0300
commit	0afb52b55a45326e3d3298442c54cfd34ee8cbb6 (patch)
tree	145f449f6c15c04b2aaa0f32f0c4c9be0d54c0d7
parent	bcd073c5aa5498035175910f571a081bd52cf9be (diff)