Clean up settings sidebar items

* Fix ordering of dictionaries sidebar anchor link

* Fix transparent25 having 50% transparency

* Put advanced line next to advanced settings category

<rikaitan.link>YzI0ZDRjOWIzOWNlZWMxYjVmZDEzM2RmNzc0YzQxOTcyZTllYmJkYwo=</rikaitan.link>

Author: jason-ojisan

ext/css/settings.css

@@ -70,7 +70,7 @@
     --content-dimmer-color: rgba(0, 0, 0, 0.1);
     --advanced-color: #6640be;
     --advanced-color-lighter: hsl(258, 50%, 75%);
-    --advanced-color-transparent25: rgba(102, 64, 190, 0.5);
+    --advanced-color-transparent50: rgba(102, 64, 190, 0.5);
 
     --modal-padding-horizontal: 1em;
     --modal-padding-vertical: 0.625em;
@@ -456,6 +456,7 @@ a.heading-link-light {
     cursor: pointer;
     transition: background-color var(--animation-duration) ease-in-out;
     box-sizing: border-box;
+    position: relative;
 }
 .outline-item,
 .outline-item:hover {
@@ -760,10 +761,18 @@ select.short-height {
     height: 100%;
     width: 0.25em;
 }
+.outline-item.advanced-only::after {
+    content: '';
+    background-color: var(--advanced-color-lighter);
+    position: absolute;
+    left: 0;
+    height: 100%;
+    width: 0.25em;
+}
 .advanced-toggle {
     --accent-color: var(--advanced-color);
     --accent-color-lighter: var(--advanced-color-lighter);
-    --accent-color-transparent25: var(--advanced-color-transparent25);
+    --accent-color-transparent25: var(--advanced-color-transparent50);
 }
 
 /* Debug settings */
@@ -777,6 +786,14 @@ select.short-height {
     height: 100%;
     width: 0.25em;
 }
+.outline-item.debug-only::after {
+    content: '';
+    background-color: var(--danger-color-lighter);
+    position: absolute;
+    left: 0;
+    height: 100%;
+    width: 0.25em;
+}
 .debug-toggle {
     --accent-color: var(--danger-color);
     --accent-color-lighter: var(--danger-color-lighter);

ext/settings.html

@@ -25,8 +25,8 @@
     <div class="sidebar"><div class="sidebar-inner scrollbar">
         <div class="sidebar-body">
             <a href="#profile"          class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="profile"></span></span><span class="outline-item-label">Profile</span></a>
-            <a href="#dictionaries"     class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="book"></span><span class="outline-item-left-warning-badge no-dictionaries-enabled-warning" hidden><div class="badge warning-badge"><span class="icon" data-icon="exclamation-point-short"></span></div></span></span><span class="outline-item-label">Dictionaries</span></a>
             <a href="#general"          class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="cog"></span></span><span class="outline-item-label">General</span></a>
+            <a href="#dictionaries"     class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="book"></span><span class="outline-item-left-warning-badge no-dictionaries-enabled-warning" hidden><div class="badge warning-badge"><span class="icon" data-icon="exclamation-point-short"></span></div></span></span><span class="outline-item-label">Dictionaries</span></a>
             <a href="#scanning"         class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="scanning"></span></span><span class="outline-item-label">Scanning</span></a>
             <a href="#popup"            class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup"></span></span><span class="outline-item-label">Popup Behavior</span></a>
             <a href="#appearance"       class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="palette"></span></span><span class="outline-item-label">Appearance</span></a>