Variable-ize colors (thanks dozens!)

1 files changed, 46 insertions, 21 deletions

@@ -1,4 +1,21 @@
+:root {
+    --main-background: white;
+    --main-foreground: black;
+    --alt-background: #eee;
+    --alt-foreground: black;
+    --fresh-background: inherit;
+    --fresh-foreground: inherit;
+    --stale-background: inherit;
+    --stale-foreground: inherit;
+    --hover-background: yellow;
+    --hover-foreground: inherit;
+    --active-background: cyan;
+    --active-foreground: inherit;
+}
+
 body {
+    background: var(--main-background);
+    color: var(--main-foreground);
     font: 16px/1.2 sans-serif;
 }
 
@@ -70,17 +87,22 @@ td {
 tr:nth-child(even),
 #feedlist li:nth-child(even)
 {
-    background: white;
+    background: var(--main-background);
 }
 
 tr:nth-child(even):last-child {
-    border-bottom: #eee;
+    border-bottom: 1px solid var(--alt-background);
 }
 
 tr:nth-child(odd),
 #feedlist li:nth-child(odd)
 {
-    background: #eee;
+    background: var(--alt-background);
+}
+
+aside {
+    flex-grow: 1;
+    text-align: right;
 }
 
 aside li {
@@ -89,10 +111,14 @@ aside li {
 
 .fresh {
     font-weight: bold;
+    background: var(--fresh-background);
+    color: var(--fresh-foreground);
 }
 .fresh nav,
 .stale {
     font-weight: normal;
+    background: var(--stale-background);
+    color: var(--stale-foreground);
 }
 
 a {
@@ -108,11 +134,13 @@ a:link {
 a:visited { color: inherit; }
 
 a:hover {
-    background: yellow;
+    background: var(--hover-background);
+    color: var(--hover-foreground);
 }
 
 a:active {
-    background: cyan;
+    background: var(--active-background);
+    color: var(--active-foreground);
 }
 
 .yt a { color: #ff0000; }
@@ -166,21 +194,18 @@ footer a:link {
 }
 
 @media screen and (prefers-color-scheme: dark) {
-    body {background: black; color: white; }
-    tr:nth-child(even),
-    #feedlist li:nth-child(even)
-    {
-        background: black;
-    }
-    tr:nth-child(even):last-child {
-        border-bottom: #222;
-    }
-    tr:nth-child(odd),
-    #feedlist li:nth-child(odd)
-    {
-        background: #222;
+    :root {
+        --main-background: black;
+        --main-foreground: white;
+        --alt-background: #222;
+        --alt-foreground: white;
+        --fresh-background: inherit;
+        --fresh-foreground: inherit;
+        --stale-background: inherit;
+        --stale-foreground: inherit;
+        --hover-background: inherit;
+        --hover-foreground: yellow;
+        --active-background: inherit;
+        --active-foreground: cyan;
     }
-    a:hover {color: yellow; background: inherit;}
-    a:active {color: cyan; background: inherit;}
-    .entry-extra a {color: cyan;}
 }