Minor fine tuning of some dashboard visuals

More left to do as per reference documentation:
- https://protocol.mozilla.org/
- https://material.io/

src/css/cloud-ui.css

@@ -66,7 +66,6 @@
     border: 1px solid var(--bg-1-border);
     bottom: 0;
     display: none;
-    left: 0;
     margin: 0.4em;
     padding: 0.4em;
     position: absolute;

src/css/common.css

@@ -24,10 +24,18 @@ body {
       -moz-user-select: none;
       -webkit-user-select: none;
     }
+a {
+    color: var(--link-ink);
+    }
 code {
     background-color: var(--bg-code);
     padding: 0 0.25em;
     }
+hr {
+    border: 0;
+    border-top: 1px solid var(--hor-separator-color);
+    margin: 1em 0;
+    }
 textarea {
     font-size: 90%;
     }
@@ -95,7 +103,7 @@ input[type="checkbox"] {
     -webkit-margin-end: 0.4em;
     }
 .ul {
-    margin: 0.5em 0;
+    margin: 1em 0;
     }
 .li {
     align-items: center;

src/css/dashboard.css

@@ -29,9 +29,8 @@ html, body {
 .tabButton {
     border: 0;
     border-bottom: 3px solid var(--bg-1);
-    color: var(--fg-dashboard-nav-off);
+    color: var(--dashboard-tab-ink);
-    fill: var(--fg-dashboard-nav-off);
+    fill: var(--dashboard-tab-ink);
-    cursor: pointer;
     padding: 0.5em 1.4em 0.3em 1.4em;
     text-decoration: none;
     white-space: nowrap;
@@ -40,9 +39,9 @@ html, body {
     outline: 0;
     }
 .tabButton.selected {
-    border-bottom: 3px solid var(--fg-dashboard-nav-on);
+    border-bottom: 3px solid var(--dashboard-tab-active-ink);
-    color: var(--fg-dashboard-nav-on);
+    color: var(--dashboard-tab-active-ink);
-    fill: var(--fg-dashboard-nav-on);
+    fill: var(--dashboard-tab-active-ink);
     }
 iframe {
     background-color: transparent;
@@ -76,6 +75,18 @@ body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] {
     display: none;
     }
 
+/* hover-able devices */
+:root.desktop .tabButton {
+    cursor: default;
+    }
+:root.desktop .tabButton:not(.selected) {
+    cursor: pointer;
+    }
+:root.desktop .tabButton:not(.selected):hover {
+    background-color: var(--dashboard-tab-surface-hover);
+    border-color: var(--dashboard-tab-surface-hover);
+    }
+
 /* touch-screen devices */
 :root.mobile #dashboard-nav {
     flex-wrap: nowrap;

src/css/settings.css

@@ -1,33 +1,9 @@
-hr {
-    border: 0;
-    border-top: 1px solid var(--hline-1);
-    margin: 1.5em 0;
-    }
-.body {
-    margin-top: 1em;
-    }
-.entries {
-    margin: 0.5em 0;
-    }
 .section {
     font-weight: bold;
-    margin-top: 0.75em;
     }
 .synopsis {
     font-size: 90%;
     }
-.entry {
-    align-items: center;
-    display: flex;
-    margin: 0.5em 0;
-    }
-.entry > * {
-    margin-inline-end: 0.5em;
-    -webkit-margin-end: 0.5em;
-    }
-.entry > input[type="checkbox"] {
-    align-self: center;
-    }
 [href="advanced-settings.html"] {
     display: none;
     }

src/css/themes/default.css

@@ -1,15 +1,24 @@
 /*
 
-    Notes:
+    References:
-
+    - https://protocol.mozilla.org/
-    `--fg-...`: used for color of text or small icons
+    - https://material.io/
-    `--bg-...`: used to color large areas on which text will be rendered
 
 */
 
+/* color names */
+:root {
+    --blue-50: #0060df;
+    --ink-80: #20123a;
+    --ink-80-a4: #20123a0a;
+    --light-gray-30: #e0e0e6;
+    --violet-70: #592acb;
+}
+
+/* components */
 :root {
     --bg-0: #fff;
-    --fg-0: hsla(261, 53%, 15%, 1);
+    --fg-0: var(--ink-80);
 
     --bg-1: hsla(240, 20%, 98%, 1);
     --bg-1-border: hsla(240, 20%, 90%, 1);
@@ -27,7 +36,9 @@
     --fg-0-30: hsla(261, 53%, 15%, 0.3);
     --fg-0-20: hsla(261, 53%, 15%, 0.2);
 
-    --hline-1: hsla(261, 53%, 15%, 0.2);
+    --link-ink: var(--violet-70);
+
+    --hor-separator-color: var(--light-gray-30);
 
     --bg-button: hsla(0, 0%, 90%, 1);
     --bg-button-hover: hsla(0, 0%, 83%, 1);
@@ -39,8 +50,9 @@
 
     --bg-transient-notice: hsla(60, 100%, 95%, 1);
 
-    --fg-dashboard-nav-off: var(--fg-0);
+    --dashboard-tab-ink: var(--ink-80);
-    --fg-dashboard-nav-on: #592acb;
+    --dashboard-tab-active-ink: var(--violet-70);
+    --dashboard-tab-surface-hover: var(--ink-80-a4);
 
     --fg-icon-info-lvl-0-dimmed: #888;
     --fg-icon-info-lvl-0: inherit;
@@ -56,10 +68,10 @@
     --large-icon-info-lvl-2: hsla(41, 100%, 47%, 1);
 
     --bg-tooltip: hsla(60, 100%, 97%, 1);
-    --fg-tooltip: var(--fg-0);
+    --fg-tooltip: var(--ink-80);
 
     /* popup panel */
-    --fg-popup-power: hsla(214, 100%, 44%, 1);
+    --fg-popup-power: var(--blue-50);
     --fg-popup-power-hover: opacity(80%);
     --bg-popup-cell-1: hsla(261, 0%, 93%, 1);
     --bg-popup-cell-2: rgb(224, 224, 230);

src/settings.html

@@ -22,6 +22,7 @@
         <div class="li"><label><input type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><span><span data-i18n="settingsCloudStorageEnabledPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">info-circle</a></span></label></div>
         <div class="li"><label><input type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><span><span data-i18n="settingsAdvancedUserPrompt"></span>&nbsp;<a class="fa-icon info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">cogs</a></span></label></div>
     </div>
+    <hr>
     <div class="section" data-i18n="3pGroupPrivacy"></div>
     <div class="ul">
         <div class="li"><label><input type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><span><span data-i18n="settingsPrefetchingDisabledPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-pre-fetching" target="_blank">info-circle</a></span></label></div>
@@ -29,6 +30,7 @@
         <div class="li"><label><input type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><span><span data-i18n="settingsWebRTCIPAddressHiddenPrompt"></span>&nbsp;<a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">info-circle</a></span></label></div>
         <div class="li"><label><input type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><span><span data-i18n="settingsNoCSPReportsPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">info-circle</a></span></label></div>
     </div>
+    <hr>
     <div class="section" data-i18n="settingPerSiteSwitchGroup"></div>
     <div class="ul">
         <div class="li synopsis"><span><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">info-circle</a></span></div>
@@ -37,9 +39,8 @@
         <div class="li"><label><input type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><span><span data-i18n="settingsNoRemoteFontsPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">info-circle</a></span></label></div>
         <div class="li"><label><input type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><span><span data-i18n="settingsNoScriptingPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">info-circle</a></span></label></div>
     </div>
-
+    <hr>
     <div id="localData" class="ul">
-        <hr>
         <div id="storageUsed" class="li"></div>
         <div style="margin: 1.5em 0">
             <div class="li" id="settingsLastBackupPrompt" style="display:none;"></div>