about summary refs log tree commit diff stats
diff options
context:
space:
mode:
-rw-r--r--style.css67
1 files changed, 46 insertions, 21 deletions
diff --git a/style.css b/style.css index a6a11f9..0934393 100644 --- a/style.css +++ b/style.css
@@ -1,4 +1,21 @@
1:root {
2 --main-background: white;
3 --main-foreground: black;
4 --alt-background: #eee;
5 --alt-foreground: black;
6 --fresh-background: inherit;
7 --fresh-foreground: inherit;
8 --stale-background: inherit;
9 --stale-foreground: inherit;
10 --hover-background: yellow;
11 --hover-foreground: inherit;
12 --active-background: cyan;
13 --active-foreground: inherit;
14}
15
1body { 16body {
17 background: var(--main-background);
18 color: var(--main-foreground);
2 font: 16px/1.2 sans-serif; 19 font: 16px/1.2 sans-serif;
3} 20}
4 21
@@ -70,17 +87,22 @@ td {
70tr:nth-child(even), 87tr:nth-child(even),
71#feedlist li:nth-child(even) 88#feedlist li:nth-child(even)
72{ 89{
73 background: white; 90 background: var(--main-background);
74} 91}
75 92
76tr:nth-child(even):last-child { 93tr:nth-child(even):last-child {
77 border-bottom: #eee; 94 border-bottom: 1px solid var(--alt-background);
78} 95}
79 96
80tr:nth-child(odd), 97tr:nth-child(odd),
81#feedlist li:nth-child(odd) 98#feedlist li:nth-child(odd)
82{ 99{
83 background: #eee; 100 background: var(--alt-background);
101}
102
103aside {
104 flex-grow: 1;
105 text-align: right;
84} 106}
85 107
86aside li { 108aside li {
@@ -89,10 +111,14 @@ aside li {
89 111
90.fresh { 112.fresh {
91 font-weight: bold; 113 font-weight: bold;
114 background: var(--fresh-background);
115 color: var(--fresh-foreground);
92} 116}
93.fresh nav, 117.fresh nav,
94.stale { 118.stale {
95 font-weight: normal; 119 font-weight: normal;
120 background: var(--stale-background);
121 color: var(--stale-foreground);
96} 122}
97 123
98a { 124a {
@@ -108,11 +134,13 @@ a:link {
108a:visited { color: inherit; } 134a:visited { color: inherit; }
109 135
110a:hover { 136a:hover {
111 background: yellow; 137 background: var(--hover-background);
138 color: var(--hover-foreground);
112} 139}
113 140
114a:active { 141a:active {
115 background: cyan; 142 background: var(--active-background);
143 color: var(--active-foreground);
116} 144}
117 145
118.yt a { color: #ff0000; } 146.yt a { color: #ff0000; }
@@ -166,21 +194,18 @@ footer a:link {
166} 194}
167 195
168@media screen and (prefers-color-scheme: dark) { 196@media screen and (prefers-color-scheme: dark) {
169 body {background: black; color: white; } 197 :root {
170 tr:nth-child(even), 198 --main-background: black;
171 #feedlist li:nth-child(even) 199 --main-foreground: white;
172 { 200 --alt-background: #222;
173 background: black; 201 --alt-foreground: white;
174 } 202 --fresh-background: inherit;
175 tr:nth-child(even):last-child { 203 --fresh-foreground: inherit;
176 border-bottom: #222; 204 --stale-background: inherit;
177 } 205 --stale-foreground: inherit;
178 tr:nth-child(odd), 206 --hover-background: inherit;
179 #feedlist li:nth-child(odd) 207 --hover-foreground: yellow;
180 { 208 --active-background: inherit;
181 background: #222; 209 --active-foreground: cyan;
182 } 210 }
183 a:hover {color: yellow; background: inherit;}
184 a:active {color: cyan; background: inherit;}
185 .entry-extra a {color: cyan;}
186} 211}