html: Use CSS3 for zebra-striping the tables.

Most browsers support the :nth-child selector by now, which allows us to
zebra-stripe the tables in CSS rather than making the python code
annotate every row with an 'a' or 'b' class.

While we're at it, stripe the pass/fail/crash results too.  Based on
some CSS fragments, this was the intent all along, but didn't work.

This also changes the striping slightly: it now stripes purely based on
whether the row is even/odd, rather than striping on a per-group basis.

Signed-off-by: Kenneth Graunke <kenneth@whitecape.org>
Reviewed-by: Dylan Baker <baker.dylan.c@gmail.com>

1 files changed, 19 insertions, 75 deletions

diff --git a/templates/index.css b/templates/index.css
index 6d9e903a3..0e48e1cba 100644
--- a/templates/index.css
+++ b/templates/index.css
@@ -31,92 +31,36 @@ td:first-child > div {
 	background-color: #c8c838
 }
 
-.a {
-	background-color: #ffff95
-}
-
-.b {
-	background-color: #e1e183
-}
-
-.skip {
-	text-align: right;
-	background-color: #b0b0b0;
-}
-
-.warn {
-	text-align: right;
-	background-color: #ff9020;
-}
-
-.fail {
+td.skip, td.warn, td.fail, td.pass, td.trap, td.abort, td.crash {
 	text-align: right;
-	background-color: #ff2020;
 }
 
-.pass {
-	text-align: right;
-	background-color: #20ff20;
-}
-
-.crash {
-	text-align: right;
-	background-color: #000000;
+td.trap, td.abort, td.crash {
 	color: #ffffff;
 }
 
-.skipa {
-	text-align: right;
-	background-color: #d0d0d0;
-}
-
-.warna {
-	text-align: right;
-	background-color: #ffc050;
-}
-
-.faila {
-	text-align: right;
-	background-color: #ff5050;
-}
-
-.passa {
-	text-align: right;
-	background-color: #50ff50;
-}
-
-.crasha {
-	text-align: right;
-	background-color: #141414;
+td.trap a, td.abort a, td.crash a {
 	color: #ffffff;
 }
 
-.skipb {
-	text-align: right;
-	background-color: #c0c0c0;
-}
+tr:nth-child(odd)  > td > div:not(.head) { background-color: #ffff95 }
+tr:nth-child(even) > td > div:not(.head) { background-color: #e1e183 }
 
-.warnb {
-	text-align: right;
-	background-color: #ffa040;
-}
+tr:nth-child(odd)  td.pass  { background-color: #20ff20; }
+tr:nth-child(even) td.pass  { background-color: #15e015; }
 
-.failb {
-	text-align: right;
-	background-color: #ff4040;
-}
+tr:nth-child(odd)  td.skip  { background-color: #b0b0b0; }
+tr:nth-child(even) td.skip  { background-color: #a0a0a0; }
 
-.passb {
-	text-align: right;
-	background-color: #40ff40;
-}
+tr:nth-child(odd)  td.warn  { background-color: #ff9020; }
+tr:nth-child(even) td.warn  { background-color: #ef8010; }
 
-.crashb {
-	text-align: right;
-	background-color: #0a0a0a;
-	color: #ffffff;
-}
+tr:nth-child(odd)  td.fail  { background-color: #ff2020; }
+tr:nth-child(even) td.fail  { background-color: #e00505; }
 
-td.crasha a, td.crashb a {
-	color: #ffffff;
-}
+tr:nth-child(odd)  td.trap  { background-color: #111111; }
+tr:nth-child(even) td.trap  { background-color: #000000; }
+tr:nth-child(odd)  td.abort { background-color: #111111; }
+tr:nth-child(even) td.abort { background-color: #000000; }
+tr:nth-child(odd)  td.crash { background-color: #111111; }
+tr:nth-child(even) td.crash { background-color: #000000; }