1 files changed, 5 insertions, 14 deletions

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));