Minor cross-theme visual tweakings.

Author: hackademix

src/common/themes.css

@@ -34,17 +34,18 @@
   --line-size: 1.7em;
   --popup-size: 640px;
 
+  --bg-preset-color: var(--form-color2);
   --bg-focused-row: linear-gradient(to bottom, var(--form-color1) 0, var(--form-color2) 70%, var(--bg-color1) 100%) no-repeat;
   --bg-odd-row: var(--bg-color2);
-  --bg-even-row: var(--form-color1);
+  --bg-even-row: var(--tab-color1);
   --border-row-sep: none;
 }
 
 
 .__NoScript_Theme__.vintage {
 
   --focus-color-light: #8cf8 !important;
-  --focus-color-dark: #0468 !important;
+  --focus-color-dark: #2488 !important;
 
   --img-noscript-options: url(/img/vintage/noscript-options.png);
   --img-ui-revoke-temp: url(/img/vintage/ui-revoke-temp64.png);
@@ -72,13 +73,9 @@
   --line-size: 1.5em;
   --popup-size: 600px;
 
-  --bg-focused-row: var(--focus-color);
-  --bg-odd-row: var(--bg-color2);
-  --bg-even-row: var(--bg-color1);
-  --border-row-sep: none;
+  --bg-focused-row: linear-gradient(to bottom, transparent 0, transparent 60%, var(--focus-color) 100%);
 }
 
-
 .__NoScript_Theme__, .__NoScript_Theme__[data-theme="dark"] {
   color-scheme: dark;
   --accent-color: #d12027;
@@ -90,7 +87,7 @@
   --form-color1: #333;
   --form-color2: #111;
   --focus-color: var(--focus-color-dark);
-  --tab-color1: #6668;
+  --tab-color1: #334;
   --tab-color2: #3348;
   --form-check-color: var(--accent-color);
   --form-control-color: var(--form-color2);
@@ -112,7 +109,7 @@
     --bg-color2: #fff;
     --form-color1: #ccc;
     --form-color2: #eee;
-    --tab-color1: #ddda;
+    --tab-color1: #ddd;
     --tab-color2: #8888;
     --focus-color: var(--focus-color-light);
   }

src/ui/popup.css

@@ -241,7 +241,7 @@ html:not(.mobile) #scrollable {
 }
 
 #sites {
-  margin: 0.5em 0.25em;
+  margin: 0;
 }
 
 #content {

src/ui/ui.css

@@ -180,9 +180,12 @@ input[type="checkbox"] {
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
-  background-color: var(--bg-odd-row);
   image-rendering: -webkit-optimize-contrast;
 }
+.vintage .sites {
+  image-rendering: auto;
+}
+
 .sites tr, .sites td {
   margin: 0;
   padding: 0;
@@ -192,7 +195,7 @@ input[type="checkbox"] {
 }
 
 html:not(.mobile) .sites > tr.site:not(.customizing):is(:focus-within, :hover) {
-  background: var(--bg-focused-row);
+  background-image: var(--bg-focused-row);
   border-color: transparent;
 }
 
@@ -201,10 +204,15 @@ html:not(.mobile) .sites > tr.site:not(.customizing):is(:focus-within, :hover) {
   border-top: var(--border-row-sep);
 }
 
-.sites > tr.site:nth-child(even):not(.customizing) {
+.sites > tr.site:nth-of-type(even):not(.customizing) {
   background-color: var(--bg-even-row);
 }
 
+.sites > tr.site:nth-of-type(odd):not(.customizing) {
+  background-color: var(--bg-odd-row);
+}
+
+
 .sites > tr.site:first-of-type, tr.site:focus-within + tr, .sites > tr.customizing, .sites > tr.customizing + tr.site, .customizer, .customizer + tr.site  {
   border-color: transparent;
 }
@@ -364,7 +372,7 @@ span.preset {
 }
 
 :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(--form-color2) 50%);
+  background-image: linear-gradient(to right, transparent calc(var(--line-size) * 1.5), var(--bg-preset-color) 50%);
   border-radius: calc(var(--line-size) / 2);
 }