Ensure a good experience for ARES-6 error reporting
[WebKit-https.git] / PerformanceTests / ARES-6 / styles.css
index 7606d3c..2c9910f 100644 (file)
@@ -91,7 +91,6 @@ p {
     background-color: transparent;
     border: 5px solid #E7B135;
     font-size: 2.4rem;
-    line-height: 5.4rem;
     font-weight: 600;
     text-transform: uppercase;
     color: #E7B135;
@@ -155,21 +154,28 @@ p {
     border-bottom: 1px solid #979797;
 }
 
-.test .indicator {
-    color: #E7B135;
-    opacity: 0;
+.test .running {
+    color: #ffffff;
+}
 
-    position: absolute;
-    left: -1.2rem;
+#status {
+    line-height: 5.4rem;
 }
 
-.test .indicator.running {
-    animation: test-running 1s;
+.failed {
+    color: #ff5744;
 }
 
-@keyframes test-running {
-  0%   { opacity: 0; }
-  100%  { opacity: 1; }
+#status.failed {
+    font-size: 1.5rem;
+}
+
+.test .failed:before {
+    content: '\2716';
+}
+
+.test .running:before {
+    content: '\25b8';
 }
 
 .score {
@@ -258,6 +264,10 @@ p {
     border-left: 0 solid transparent;
 }
 
+#magic {
+    opacity: 0;
+}
+
 @keyframes fade-in {
   0%   { opacity: 0; }
   100% { opacity: 1; }
@@ -293,10 +303,35 @@ p {
     .start {
         width: 100%;
     }
-
     .test {
         flex: none;
-
         width: 100%;
     }
+    #status {
+        line-height: 4.3rem;
+    }
+    .start {
+        font-size: 2.1rem;
+    }
+    #status.failed {
+        font-size: 1.4rem;
+    }
+    p {
+        font-size: 1.6rem;
+    }
+}
+
+@media only screen and (max-width: 320px) {
+    #status {
+        line-height: 3.8rem;
+    }
+    .start {
+        font-size: 1.9rem;
+    }
+    #status.failed {
+        font-size: 1.1rem;
+    }
+    p {
+        font-size: 1.4rem;
+    }
 }