From 239157df303022d1cd3a6c16c6dc061b108cddd7 Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Thu, 23 Apr 2015 13:41:20 +0200
Subject: [PATCH] Update test styles.

---
 test/index.html.jade |   4 +-
 test/styles.less     | 323 +++++++++++++++++++------------------------
 test/util/mocha.js   |   2 +-
 3 files changed, 143 insertions(+), 186 deletions(-)

diff --git a/test/index.html.jade b/test/index.html.jade
index 309b65e4..03c8da7c 100644
--- a/test/index.html.jade
+++ b/test/index.html.jade
@@ -11,7 +11,7 @@ html
         script( src="scripts.js" )
 
     body
+        div#report
+            a( href='index.html' ) h5ai #{pkg.version} test suite
         div#mocha-overlay
-            div#report
-                a( href='index.html' ) h5ai #{pkg.version} test suite
             div#mocha
diff --git a/test/styles.less b/test/styles.less
index 369287b1..3aa7ae61 100644
--- a/test/styles.less
+++ b/test/styles.less
@@ -5,50 +5,51 @@
 @col-green: #4caf50;
 @col-grey: #555;
 
-#mocha-overlay {
+#report {
+    font-family: arial, sans;
     position: fixed;
     left: 0;
     top: 0;
     right: 0;
+    background: @col-grey;
+    z-index: 10000;
+    color: #fff;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 32px;
+    height: 32px;
+    padding: 0 8px;
+
+    a, a:active, a:visited, a:hover {
+        display: block;
+        color: #fff;
+        text-decoration: none;
+    }
+    &.pass {
+        background: @col-green;
+    }
+    &.fail {
+        background: @col-red;
+    }
+}
+
+#mocha-overlay {
+    font-family: arial, sans;
+    position: fixed;
+    left: 0;
+    top: 32px;
+    right: 0;
     bottom: 0;
     background: #fff;
     z-index: 10000;
     overflow: auto;
-
-    #report {
-        position: fixed;
-        left: 0;
-        top: 0;
-        right: 0;
-        background: @col-grey;
-        z-index: 1;
-        color: #fff;
-        font-size: 14px;
-        font-weight: bold;
-        line-height: 32px;
-        padding: 0 8px;
-
-        a, a:active, a:visited, a:hover {
-            display: block;
-            color: #fff;
-            text-decoration: none;
-        }
-    }
-
-    &.pass #report {
-        background: @col-green;
-    }
-
-    &.fail #report {
-        background: @col-red;
-    }
 }
 
 #mocha {
     max-width: 900px;
     margin: 80px auto;
 
-    ul, li {
+    ul, li, h1, h2 {
         margin: 0;
         padding: 0;
     }
@@ -57,34 +58,12 @@
         list-style: none;
     }
 
-    h1, h2 {
-        margin: 0;
-    }
-
     h2 {
         font-size: 12px;
         font-weight: normal;
         cursor: pointer;
     }
 
-    code {
-        .comment {
-            color: #ddd;
-        }
-        .init {
-            color: #2f6fad;
-        }
-        .string {
-            color: #5890ad;
-        }
-        .keyword {
-            color: #8a6343;
-        }
-        .number {
-            color: #2f6fad;
-        }
-    }
-
     .hidden {
         display: none;
     }
@@ -101,124 +80,63 @@
         &:hover {
             background: #eee;
         }
-    }
 
-    .test.fail, .test pre.error {
-        color: @col-red-text;
-    }
+        &.fail {
+            color: @col-red-text;
+        }
 
-    .test .duration {
-        display: inline-block;
-        color: @col-grey;
-        border: none;
-        box-shadow: none;
-        font-size: 9px;
-        margin-left: 12px;
-    }
+        &::before {
+            content: ' ';
+            display: block;
+            width: 10px;
+            height: 10px;
+            float: left;
+            margin-right: 8px;
+            background: @col-grey;
+            border-radius: 20px;
+            position: relative;
+            top: 3px;
+        }
+        &.pass::before {
+            background: @col-green;
+        }
+        &.fail::before {
+            background: @col-red;
+        }
+        &.pending::before {
+            background: @col-grey;
+        }
 
-    .test.medium .duration {
-        background: #c09853;
-    }
+        .duration {
+            display: inline-block;
+            color: @col-grey;
+            border: none;
+            box-shadow: none;
+            font-size: 9px;
+            margin-left: 12px;
+        }
+        &.medium .duration {
+            background: #c09853;
+        }
+        &.slow .duration {
+            background: #b94a48;
+        }
 
-    .test.slow .duration {
-        background: #b94a48;
-    }
+        pre {
+            display: block;
+            float: left;
+            clear: left;
+            font: 12px monospace;
+            margin: 4px 0 16px 18px;
+            padding: 0 8px;
+            max-width: 80%;
+            word-wrap: break-word;
+            border-left: 2px solid @col-grey;
 
-    .test::before {
-        content: ' ';
-        display: block;
-        width: 10px;
-        height: 10px;
-        float: left;
-        margin-right: 8px;
-        background: @col-grey;
-        border-radius: 20px;
-        position: relative;
-        top: 3px;
-    }
-    .test.pass::before {
-        background: @col-green;
-    }
-    .test.fail::before {
-        background: @col-red;
-    }
-    .test.pending::before {
-        background: @col-grey;
-    }
-
-    .test pre {
-        display: block;
-        float: left;
-        clear: left;
-        font: 12px monaco, monospace;
-        margin: 4px 0 16px 16px;
-        padding: 4px;
-        max-width: 80%;
-        word-wrap: break-word;
-    }
-}
-
-#mocha-stats {
-    position: fixed;
-    top: 40px;
-    right: 20px;
-    margin: 0;
-    color: @col-grey;
-    z-index: 1;
-    font-size: 13px;
-
-    em {
-        font-style: normal;
-        font-size: 14px;
-    }
-
-    .progress {
-        float: right;
-        padding-top: 0;
-    }
-
-    em {
-        color: black;
-    }
-
-    a {
-        text-decoration: none;
-        color: inherit;
-    }
-
-    a:hover {
-        border-bottom: 1px solid #eee;
-    }
-
-    li {
-        display: inline-block;
-        margin: 0 5px;
-        list-style: none;
-        padding-top: 11px;
-    }
-
-    canvas {
-        width: 40px;
-        height: 40px;
-    }
-}
-
-#mocha-report {
-
-    &.pass .test.fail {
-        display: none;
-    }
-
-    &.fail .test.pass {
-        display: none;
-    }
-
-    &.pending .test.pass,
-    &.pending .test.fail {
-        display: none;
-    }
-    &.pending .test.pass.pending {
-        display: block;
+            &.error {
+                color: @col-red-text;
+            }
+        }
     }
 
     .suite {
@@ -262,27 +180,66 @@
         }
     }
 
-    > .suite {
-        margin: 24px 0;
+    #mocha-report {
+        > .suite {
+            margin: 24px 0;
 
-        > h1 {
-            height: 32px;
-            line-height: 32px;
-            font-size: 24px;
-            font-weight: bold;
-            margin: 24px 0 8px 0;
-        }
-    }
+            > h1 {
+                height: 32px;
+                line-height: 32px;
+                font-size: 24px;
+                font-weight: bold;
+                margin: 24px 0 8px 0;
+            }
 
-    > .suite > ul > .suite {
-        margin: 12px 0;
+            > ul > .suite {
+                margin: 12px 0;
 
-        > h1 {
-            height: 26px;
-            line-height: 26px;
-            font-size: 20px;
-            font-weight: bold;
-            margin: 16px 0 8px 0;
+                > h1 {
+                    height: 26px;
+                    line-height: 26px;
+                    font-size: 20px;
+                    font-weight: bold;
+                    margin: 16px 0 8px 0;
+                }
+            }
         }
     }
 }
+
+#mocha-stats {
+    position: fixed;
+    top: 40px;
+    right: 20px;
+    margin: 0;
+    color: @col-grey;
+    z-index: 1;
+    font-size: 13px;
+
+    em {
+        font-style: normal;
+        font-size: 14px;
+    }
+    a {
+        text-decoration: none;
+        color: inherit;
+
+        &:hover {
+            border-bottom: 1px solid #eee;
+        }
+    }
+    li {
+        display: inline-block;
+        margin: 0 5px;
+        list-style: none;
+        padding-top: 11px;
+    }
+    canvas {
+        width: 40px;
+        height: 40px;
+    }
+    .progress {
+        float: right;
+        padding-top: 0;
+    }
+}
diff --git a/test/util/mocha.js b/test/util/mocha.js
index 634e3cf3..bfd74920 100644
--- a/test/util/mocha.js
+++ b/test/util/mocha.js
@@ -26,7 +26,7 @@ function update() {
 
 function onEnd() {
 
-    $('#mocha-overlay').addClass($('.test.fail').length ? 'fail' : 'pass');
+    $('#report').addClass($('.test.fail').length ? 'fail' : 'pass');
 
     $('#mocha-overlay code').each(function () {