From 0afb52b55a45326e3d3298442c54cfd34ee8cbb6 Mon Sep 17 00:00:00 2001 From: Florrie Date: Sun, 24 Mar 2019 13:45:28 -0300 Subject: Make styles...nicer --- extension/popup/index.html | 1 + extension/popup/main.js | 19 +++-------- extension/popup/style.css | 80 +++++++++++++++++++++++++++++++++++----------- 3 files changed, 67 insertions(+), 33 deletions(-) (limited to 'extension') 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 @@ +

Interactive BGM

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; } -- cgit 1.3.0-6-gf8a5