Cross-theme visual tweaks.

src/common/themes.css

@@ -4,6 +4,11 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+.__NoScript_Theme__ {
+  --focus-color-dark:  #8007;
+  --focus-color-light: #f787;
+}
+
 .__NoScript_Theme__, .__NoScript_Theme__[data-theme="dark"] {
   color-scheme: dark;
   --accent-color: #d12027;
@@ -14,7 +19,7 @@
   --bg-color2: #212026;
   --form-color1: #333;
   --form-color2: #111;
-  --focus-color: #8007;
+  --focus-color: var(--focus-color-dark);
   --tab-color1: #6668;
   --tab-color2: #3348;
   --form-check-color: var(--accent-color);
@@ -38,7 +43,7 @@
     --form-color2: #eee;
     --tab-color1: #ddda;
     --tab-color2: #8888;
-    --focus-color: #f787;
+    --focus-color: var(--focus-color-light);
   }
 
   .__NoScript_Theme__.vintage[data-theme="dark"] :is(input.preset, .icon) {
@@ -100,9 +105,10 @@
   --img-ui-clock: url(/img/vintage/ui-clock64.png);
 
   --icon-size: 1.8em;
-  --line-size: 1.5em;
+  --line-size: 1.7em;
   --popup-size: 600px;
 
-  --focus-color: #8cfa !important;
+  --focus-color-light: #8cf8 !important;
+  --focus-color-dark: #0468 !important;
 }
 

src/ui/ui.css

@@ -294,7 +294,7 @@ span.preset {
   outline: 0;
   opacity: .6;
   margin: 0 .5em 0.13em .5em;
-  background-size: contain;
+  background-size: calc(var(--line-size) - .2em);
   width: var(--line-size);
   height: var(--line-size);
 }
@@ -317,9 +317,7 @@ span.preset {
   opacity: 1;
   transform: none;
   min-width: 9.38em;
-  background-color: var(--bg-color1);
-  background-position-x: .3em;
-  border-radius: .5em;
+  background-position-x: 0;
 }
 
 .presets input.preset:focus {
@@ -354,6 +352,12 @@ span.preset {
   width: 80%;
   display: inline-flex;
 }
+:not(#presets) > .sites .site:not(.customizing) .presets input.preset:checked + label.preset {
+  background-image: linear-gradient(to right, transparent calc(var(--line-size) * 1.5), var(--bg-color1) 50%);
+  border-radius: calc(var(--line-size) / 2);
+}
+
+
 
 #presets-sizer .presets label {
    position: static;