Higher fidelity "Vintage Blue" theme.

Author: hackademix

src/common/themes.css

@@ -80,6 +80,11 @@
   --icon-size: 2.2em;
   --line-size: 1.7em;
   --popup-size: 640px;
+
+  --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);
+  --border-row-sep: none; /* 2px dotted var(--form-color2); */
 }
 
 .vintage {
@@ -111,5 +116,10 @@
 
   --focus-color-light: #8cf8 !important;
   --focus-color-dark: #0468 !important;
+
+  --bg-focused-row: var(--focus-color);
+  --bg-odd-row: var(--bg-color2);
+  --bg-even-row: var(--bg-color1);
+  --border-row-sep: none;
 }
 

src/ui/ui.css

@@ -180,7 +180,7 @@ input[type="checkbox"] {
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
-  background: var(--bg-color2);
+  background-color: var(--bg-odd-row);
   image-rendering: -webkit-optimize-contrast;
 }
 .sites tr, .sites td {
@@ -192,13 +192,19 @@ input[type="checkbox"] {
 }
 
 html:not(.mobile) .sites > tr.site:not(.customizing):is(:focus-within, :hover) {
-  background: linear-gradient(to bottom, var(--form-color1) 0, var(--bg-color2) 41%, var(--bg-color1) 100%) no-repeat;
+  background: var(--bg-focused-row);
   border-color: transparent;
 }
 
 .sites > tr.site:not(.customizing) {
-  border-top: 2px dotted var(--form-color1);
+  /* border-top: 2px dotted var(--form-color1); */
+  border-top: var(--border-row-sep);
+}
+
+.sites > tr.site:nth-child(even):not(.customizing) {
+  background-color: var(--bg-even-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;
 }
@@ -296,7 +302,7 @@ span.preset {
   -moz-appearance: none;
   background: var(--img-ui-no) no-repeat center;
   outline: 0;
-  opacity: .6;
+  opacity: .8;
   margin: 0 .5em 0.13em .5em;
   background-size: var(--line-size);
   width: var(--line-size);
@@ -340,7 +346,7 @@ span.preset {
   display: none;
   text-transform: uppercase;
   color: var(--fg-color2);
-  opacity: .7;
+  opacity: .8;
   position: absolute;
   left: 0;
   padding-left: 3em;
@@ -358,7 +364,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(--bg-color1) 50%);
+  background-image: linear-gradient(to right, transparent calc(var(--line-size) * 1.5), var(--form-color2) 50%);
   border-radius: calc(var(--line-size) / 2);
 }