Skip to content

Commit 62dbcc5

Browse files
greggmangreggman
committed
Support dark mode
1 parent 6a7030e commit 62dbcc5

File tree

1 file changed

+109
-29
lines changed

1 file changed

+109
-29
lines changed

‎standalone/index.html‎

Lines changed: 109 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,66 @@
1717
<link rel="stylesheet" href="third_party/normalize.min.css" />
1818
<script src="third_party/jquery/jquery-3.3.1.min.js"></script>
1919
<style>
20+
:root {
21+
color-scheme: light dark;
22+
23+
--fg-color: #000;
24+
--bg-color: #fff;
25+
--border-color: #888;
26+
27+
--results-fg-color: gray;
28+
--node-description-fg-color: #gray;
29+
--node-hover-bg-color: rgba(0, 0, 0, 0.1);
30+
31+
--testcaselogbtn-bg-color: #eee;
32+
--subtree-border-color: #ddd;
33+
--subtree-hover-left-border-color: #000;
34+
--multicase-border-color: #55f;
35+
--testcase-border-color: #bbf;
36+
--testcase-bg-color: #bbb;
37+
38+
--testcase-data-status-fail-bg-color: #fdd;
39+
--testcase-data-status-warn-bg-color: #ffb;
40+
--testcase-data-status-pass-bg-color: #cfc;
41+
--testcase-data-status-skip-bg-color: #eee;
42+
43+
--testcase-logs-bg-color: #white;
44+
--testcase-log-odd-bg-color: #fff;
45+
--testcase-log-even-bg-color: #f8f8f8;
46+
--testcase-log-text-fg-color: #666;
47+
--testcase-log-text-first-line-fg-color: #000;
48+
--button-image-filter: none;
49+
}
50+
@media (prefers-color-scheme: dark) {
51+
:root {
52+
--fg-color: #fff;
53+
--bg-color: #000;
54+
--border-color: #888;
55+
56+
--results-fg-color: #aaa;
57+
--node-description-fg-color: #aaa;
58+
--node-hover-bg-color: rgba(255, 255, 255, 0.1);
59+
60+
--testcaselogbtn-bg-color: #666;
61+
--subtree-border-color: #444;
62+
--subtree-hover-left-border-color: #FFF;
63+
--multicase-border-color: #338;
64+
--testcase-border-color: #55a;
65+
--testcase-bg-color: #888;
66+
67+
--testcase-data-status-fail-bg-color: #400;
68+
--testcase-data-status-warn-bg-color: #660;
69+
--testcase-data-status-pass-bg-color: #040;
70+
--testcase-data-status-skip-bg-color: #444;
71+
72+
--testcase-logs-bg-color: #black;
73+
--testcase-log-odd-bg-color: #000;
74+
--testcase-log-even-bg-color: #080808;
75+
--testcase-log-text-fg-color: #aaa;
76+
--testcase-log-text-first-line-fg-color: #fff;
77+
--button-image-filter: invert(100%);
78+
}
79+
}
2080
body {
2181
font-family: monospace;
2282
min-width: 400px;
@@ -31,6 +91,10 @@
3191
height: 1.2em;
3292
vertical-align: middle;
3393
}
94+
input[type=button],
95+
button {
96+
cursor: pointer;
97+
}
3498
.logo {
3599
height: 1.2em;
36100
float: left;
@@ -45,7 +109,7 @@
45109
}
46110

47111
#resultsVis {
48-
border-right: 1px solid gray;
112+
border-right: 1px solid var(--results-fg-color);
49113
}
50114

51115
/* tree nodes */
@@ -56,21 +120,37 @@
56120
padding: 0px 2px 0px 1px;
57121
}
58122
.nodeheader:hover {
59-
background: rgba(0, 0, 0, 0.1);
123+
background: var(--node-hover-bg-color);
60124
}
61125
.subtreerun,
62126
.leafrun,
63127
.nodelink,
64128
.collapsebtn,
65129
.testcaselogbtn {
66-
display: inline-block;
130+
display: inline-flex;
67131
flex-shrink: 0;
68132
flex-grow: 0;
133+
justify-content: center;
134+
align-items: center;
135+
text-decoration: none;
69136
vertical-align: top;
70-
background-color: #eee;
137+
color: var(--fg-color);
138+
background-color: var(--testcaselogbtn-bg-color);
71139
background-repeat: no-repeat;
72140
background-position: center;
73-
border: 1px solid #888;
141+
border: 1px solid var(--border-color);
142+
}
143+
.subtreerun::before,
144+
.leafrun::before,
145+
.nodelink::before,
146+
.collapsebtn::before,
147+
.testcaselogbtn::before {
148+
content: "";
149+
width: 100%;
150+
height: 100%;
151+
background-repeat: no-repeat;
152+
background-position: center;
153+
filter: var(--button-image-filter);
74154
}
75155
@media (pointer: fine) {
76156
.subtreerun,
@@ -96,13 +176,13 @@
96176
height: 36px;
97177
}
98178
}
99-
.subtreerun {
179+
.subtreerun::before {
100180
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAAB5JREFUCNdjOMDAsIGBoYeBoZmBoaEBRPaARQ4wAABTfwX/l/WQvgAAAABJRU5ErkJggg==);
101181
}
102-
.leafrun {
182+
.leafrun::before {
103183
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANklEQVQoU2NkYGD4zwABjFAagwJJwBTBJDEUY1OEoRifIrhiYhSBHYvuJnSHM5LtJry+wxlOAGPTCQmAB/WwAAAAAElFTkSuQmCC);
104184
}
105-
.nodelink {
185+
.nodelink::before {
106186
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAACRJREFUCNdjYGBg+P+BoUGAYesFhj4BhvsFDPYNDHwMCMTAAACqJwbp3VgbrAAAAABJRU5ErkJggg==);
107187
}
108188
.nodetitle {
@@ -123,7 +203,7 @@
123203
}
124204
.nodedescription {
125205
margin: 0 0 0 1em;
126-
color: gray;
206+
color: var(--node-description-fg-color);
127207
white-space: pre-wrap;
128208
font-size: 80%;
129209
}
@@ -135,20 +215,20 @@
135215
padding: 3px 0 0 3px;
136216
border-width: 1px 0 0;
137217
border-style: solid;
138-
border-color: #ddd;
218+
border-color: var(--subtree-border-color);
139219
}
140220
.subtree::before {
141221
float: right;
142222
margin-right: 3px;
143223
}
144224
.subtree[data-status='fail'], .subtree[data-status='passfail'] {
145-
background: linear-gradient(90deg, #fdd, #fdd 16px, #fff 16px);
225+
background: linear-gradient(90deg, var(--testcase-data-status-fail-bg-color), var(--testcase-data-status-fail-bg-color) 16px, var(--bg-color) 16px);
146226
}
147227
.subtree[data-status='fail']::before {
148228
content: "⛔"
149229
}
150230
.subtree[data-status='pass'] {
151-
background: linear-gradient(90deg, #cfc, #cfc 16px, #fff 16px);
231+
background: linear-gradient(90deg, var(--testcase-data-status-pass-bg-color), var(--testcase-data-status-pass-bg-color) 16px, var(--bg-color) 16px);
152232
}
153233
.subtree[data-status='pass']::before {
154234
content: "✔"
@@ -157,17 +237,17 @@
157237
content: "✔/⛔"
158238
}
159239
.subtree:hover {
160-
border-left-color: #000;
240+
border-left-color: var(--subtree-hover-left-border-color);
161241
}
162242
.subtree.multifile > .subtreechildren > .subtree.multitest,
163243
.subtree.multifile > .subtreechildren > .subtree.multicase {
164244
border-width: 2px 0 0 1px;
165-
border-color: #55f;
245+
border-color: var(--multicase-border-color);
166246
}
167247
.subtree.multitest > .subtreechildren > .subtree.multicase,
168248
.subtree.multitest > .subtreechildren > .testcase {
169249
border-width: 2px 0 0 1px;
170-
border-color: #bbf;
250+
border-color: var(--testcase-border-color);
171251
}
172252
.subtreechildren {
173253
margin-left: 9px;
@@ -179,8 +259,8 @@
179259
padding: 3px;
180260
border-width: 1px 0 0 0;
181261
border-style: solid;
182-
border-color: gray;
183-
background: #bbb;
262+
border-color: var(--border-color);
263+
background: var(--testcase-bg-color);
184264
}
185265
.testcase:first-child {
186266
margin-top: 3px;
@@ -190,25 +270,25 @@
190270
margin-top: -1.1em;
191271
}
192272
.testcase[data-status='fail'] {
193-
background: #fdd;
273+
background: var(--testcase-data-status-fail-bg-color);
194274
}
195275
.testcase[data-status='fail']::after {
196276
content: "⛔"
197277
}
198278
.testcase[data-status='warn'] {
199-
background: #ffb;
279+
background: var(--testcase-data-status-warn-bg-color);
200280
}
201281
.testcase[data-status='warn']::after {
202282
content: "⚠"
203283
}
204284
.testcase[data-status='pass'] {
205-
background: #cfc;
285+
background: var(--testcase-data-status-pass-bg-color);
206286
}
207287
.testcase[data-status='pass']::after {
208288
content: "✔"
209289
}
210290
.testcase[data-status='skip'] {
211-
background: #eee;
291+
background: var(--testcase-data-status-skip-bg-color);
212292
}
213293
.testcase .nodequery {
214294
font-weight: normal;
@@ -224,31 +304,31 @@
224304
width: calc(100% - 6px);
225305
border-width: 0 0px 0 1px;
226306
border-style: solid;
227-
border-color: gray;
228-
background: white;
307+
border-color: var(--border-color);
308+
background: var(--testcase-logs-bg-color);
229309
}
230310
.testcaselog {
231311
display: flex;
232312
}
233313
.testcaselog:nth-child(odd) {
234-
background: #fff;
314+
background: var(--testcase-log-odd-bg-color);
235315
}
236316
.testcaselog:nth-child(even) {
237-
background: #f8f8f8;
317+
background: var(--testcase-log-even-bg-color);
238318
}
239-
.testcaselogbtn {
240-
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAACRJREFUCNdjYGBg+H+AwUGBwV+BQUGAQX0CiNQQYFABk8ogLgBsYQUt2gNKPwAAAABJRU5ErkJggg==);
319+
.testcaselogbtn::before {
320+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAACRJREFUCNdjYGBg+H+AwUGBwV+BQUGAQX0CiNQQYFABk8ogLgBsYQUt2gNKPwAAAABJRU5ErkJggg==);
241321
}
242322
.testcaselogtext {
243323
flex: 1 0;
244324
font-size: 10pt;
245325
white-space: pre-wrap;
246326
word-break: break-word;
247327
margin: 0;
248-
color: #666;
328+
color: var(--testcase-log-text-fg-color)
249329
}
250330
.testcaselogtext::first-line {
251-
color: #000;
331+
color: var(--testcase-log-text-first-line-fg-color);
252332
}
253333

254334
@media only screen and (max-width: 600px) {

0 commit comments

Comments
 (0)