diff --git a/src/common/themes.css b/src/common/themes.css index b7f6242..d7b6679 100644 --- a/src/common/themes.css +++ b/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; } diff --git a/src/ui/ui.css b/src/ui/ui.css index 92ab48c..dadf85d 100644 --- a/src/ui/ui.css +++ b/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); }