Ensure a good experience for ARES-6 error reporting
[WebKit-https.git] / PerformanceTests / ARES-6 / styles.css
index 03b51ba..2c9910f 100644 (file)
@@ -26,7 +26,7 @@ body {
     background-repeat: no-repeat;
     background-size: 50vw;
     width: 0;
-    animation: wipe-in 1s ease-in 0 forwards;
+    animation: wipe-in 1s ease-in 0ms forwards;
 }
 
 header,
@@ -81,7 +81,7 @@ p {
     font-size: 0;
 
     opacity: 0;
-    animation: scale-in 1100ms ease-out 0 forwards;
+    animation: scale-in 1100ms ease-out 0ms forwards;
 }
 
 .start {
@@ -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;
@@ -143,7 +142,9 @@ p {
     margin-bottom: 3rem;
     opacity: 0;
     animation: fade-in 1s ease-out 700ms forwards;
+    min-width: 40%;
 }
+
 .test:nth-child(odd) {
     animation-delay: 900ms;
 }
@@ -153,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 {
@@ -256,6 +264,10 @@ p {
     border-left: 0 solid transparent;
 }
 
+#magic {
+    opacity: 0;
+}
+
 @keyframes fade-in {
   0%   { opacity: 0; }
   100% { opacity: 1; }
@@ -291,10 +303,35 @@ p {
     .start {
         width: 100%;
     }
-
     .test {
         flex: none;
-
         width: 100%;
     }
-}
\ No newline at end of file
+    #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;
+    }
+}