From ce0bdb4369eedf2513f3283e4786ead49323cd02 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sat, 5 Feb 2022 07:42:17 -0500
Subject: [PATCH] More CSS fine tuning

Additionally, have a list of preset colors for the color
picker (unlike Firefox, Chromium's built-in color picker
does not have a list of preset colors by default).
---
 src/css/codemirror.css     |  2 +-
 src/css/common.css         |  4 ++++
 src/css/logger-ui.css      |  2 +-
 src/css/settings.css       |  2 +-
 src/css/themes/default.css |  9 ++++++++-
 src/settings.html          | 17 ++++++++++++++++-
 6 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/css/codemirror.css b/src/css/codemirror.css
index b80db6568..161590cc6 100644
--- a/src/css/codemirror.css
+++ b/src/css/codemirror.css
@@ -33,7 +33,7 @@
 .CodeMirror-line::selection,
 .CodeMirror-line > span::selection,
 .CodeMirror-line > span > span::selection {
-    background-color: var(--cm-selection-surface);
+    background-color: var(--cm-selection-focused-surface);
     }
 .CodeMirror-linenumber {
     color: var(--cm-gutter-ink);
diff --git a/src/css/common.css b/src/css/common.css
index a77241dc1..d8bb7aff7 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -55,6 +55,10 @@ a {
     color: var(--link-ink);
         fill: var(--link-ink);
     }
+a:hover {
+    color: var(--link-hover-ink);
+        fill: var(--link-hover-ink);
+    }
 code, .code {
     background-color: var(--surface-2);
     font-family: monospace;
diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index f6d808df0..302899793 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -127,7 +127,7 @@ textarea {
     transform: scaleY(1);
     }
 #netInspector #filterExprPicker {
-    background-color: var(--surface-1);
+    background-color: var(--surface-0);
     border: 1px solid gray;
     display: none;
     position: absolute;
diff --git a/src/css/settings.css b/src/css/settings.css
index fa51ab8d3..93599af95 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -4,7 +4,7 @@ body {
 
 .synopsis {
     color: var(--ink-1);
-    font-size: 90%;
+    font-size: var(--font-size-smaller);
     opacity: var(--medium-em);
     }
 
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index 65f289fb9..c9a2f2cb8 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -127,11 +127,13 @@
  * */
 :root {
     --font-size: 14px;
+    --font-size-smaller: 13px;
     --font-family: Inter, sans-serif;
 }
 
 :root.mobile {
     --font-size: 16px;
+    --font-size-smaller: 14px;
 }
 
 /*
@@ -222,6 +224,9 @@
     --accent-ink-3: var(--ink-1);
     --accent-surface-1: rgb(var(--primary-40));
 
+    --link-ink: rgb(var(--primary-40));
+    --link-hover-ink: rgb(var(--primary-30));
+
     /* buttons */
     --button-surface-rgb: var(--gray-80);
 
@@ -305,6 +310,9 @@
 
     --accent-surface-1: rgb(var(--primary-70));
 
+    --link-ink: rgb(var(--primary-70));
+    --link-hover-ink: rgb(var(--primary-80));
+
     /* buttons */
     --button-surface-rgb: var(--gray-30);
 
@@ -371,7 +379,6 @@
     --accent-ink-1: var(--surface-0);
     --accent-ink-3: var(--ink-1);
 
-    --link-ink: var(--accent-surface-1);
     --subtil-ink: var(--accent-surface-1);
 
     --fieldset-header-surface: transparent;
diff --git a/src/settings.html b/src/settings.html
index 883ce3a3a..911639869 100644
--- a/src/settings.html
+++ b/src/settings.html
@@ -31,7 +31,22 @@
 <div class="fieldset">
     <div class="fieldset-header" data-i18n="settingsAppearance"></div>
     <div class="li"><label><span data-i18n="settingsThemeLabel">_</span>&emsp;<select data-setting-name="uiTheme" data-setting-type="value"><option value="auto">Auto<option value="light">Light<option value="dark">Dark</select></label></div>
-    <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="uiAccentCustom" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsThemeAccent0Label">_</span></label>&emsp;<input type="color" data-setting-name="uiAccentCustom0" data-setting-type="value"></div>
+    <div class="li">
+        <label><span class="input checkbox"><input type="checkbox" data-setting-name="uiAccentCustom" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsThemeAccent0Label">_</span></label>&emsp;
+        <input type="color" list="preset-accent-colors" data-setting-name="uiAccentCustom0" data-setting-type="value">
+        <datalist id="preset-accent-colors">
+            <option value="#f75782"><!-- h:0...360 step 40 S:90 Luv:60 -->
+            <option value="#cc7f2b">
+            <option value="#9c932b">
+            <option value="#56a22b">
+            <option value="#2ea283">
+            <option value="#309fa6">
+            <option value="#3498d6">
+            <option value="#ad75f4">
+            <option value="#f542d6">
+            <option value="#919191"><!-- h:0 S:0 Luv:60 -->
+        </datalist>
+    </div>
     <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsColorBlindPrompt">_</span></label></div>
     <div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsTooltipsPrompt">_</span></label></div>
 </div>