Ensure a good experience for ARES-6 error reporting
[WebKit-https.git] / PerformanceTests / ARES-6 / styles.css
index 323b828..2c9910f 100644 (file)
@@ -6,8 +6,7 @@ html {
 
 body {
     margin: 0;
-    background: #2C2C3C url('swoop.svg') no-repeat;
-    background-size: 50vw;
+    background-color: #2C2C3C;
     width: 100%;
     font-size: 1.6rem;
     font-weight: 400;
@@ -15,7 +14,19 @@ body {
     color: #9B9B9B;
     box-sizing: border-box;
     padding: 6vw 9vw;
-    perspective: 1000px;
+}
+
+.swoop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-image: url('swoop.svg');
+    background-repeat: no-repeat;
+    background-size: 50vw;
+    width: 0;
+    animation: wipe-in 1s ease-in 0ms forwards;
 }
 
 header,
@@ -35,14 +46,6 @@ p a:hover {
     text-decoration: underline;
 }
 
-.flip {
-       transition: 0.6s;
-       transform-style: preserve-3d;
-
-       position: relative;
-    display: flex;
-}
-
 header {
     display: flex;
     flex-wrap: wrap;
@@ -61,6 +64,8 @@ p {
     color: #ffffff;
     font-size: 1.8rem;
     margin-bottom: 3rem;
+    opacity: 0;
+    animation: fade-in 1s ease-in 200ms forwards;
 }
 
 .about h2 {
@@ -74,6 +79,9 @@ p {
     overflow: hidden;
     margin: 1px 1rem 1px 0;
     font-size: 0;
+
+    opacity: 0;
+    animation: scale-in 1100ms ease-out 0ms forwards;
 }
 
 .start {
@@ -83,10 +91,13 @@ p {
     background-color: transparent;
     border: 5px solid #E7B135;
     font-size: 2.4rem;
-    line-height: 5.4rem;
     font-weight: 600;
     text-transform: uppercase;
     color: #E7B135;
+
+    opacity: 0;
+    animation: flicker-in 500ms ease-out 1s forwards;
+
 }
 
 .start.ready {
@@ -101,7 +112,7 @@ p {
 
 .start:after {
     content: '';
-    display: block;  
+    display: block;
     position: absolute;
     right: 0;
     top: 0;
@@ -129,6 +140,13 @@ p {
     border-bottom: 1px solid #979797;
     margin-right: 1rem;
     margin-bottom: 3rem;
+    opacity: 0;
+    animation: fade-in 1s ease-out 700ms forwards;
+    min-width: 40%;
+}
+
+.test:nth-child(odd) {
+    animation-delay: 900ms;
 }
 
 .overall h2,
@@ -136,21 +154,28 @@ p {
     border-bottom: 1px solid #979797;
 }
 
-.test .indicator {
-    color: #E7B135;
-    opacity: 0;
-    
-    position: absolute;
-    left: -1.2rem;
+.test .running {
+    color: #ffffff;
 }
 
-.test .indicator.running {
-    animation: test-running 1s;
+#status {
+    line-height: 5.4rem;
 }
 
-@keyframes test-running {
-  0%   { opacity: 0; }
-  100%  { opacity: 1; }
+.failed {
+    color: #ff5744;
+}
+
+#status.failed {
+    font-size: 1.5rem;
+}
+
+.test .failed:before {
+    content: '\2716';
+}
+
+.test .running:before {
+    content: '\25b8';
 }
 
 .score {
@@ -178,7 +203,7 @@ p {
 .score .units {
     font-size: 4rem;
     font-weight: 600;
-    
+
 }
 
 .score .margin {
@@ -191,6 +216,8 @@ p {
 
 .overall {
     margin-bottom: 3rem;
+    opacity: 0;
+    animation: fade-in 1s ease-out 500ms forwards;
 }
 
 .overall .score  {
@@ -201,33 +228,73 @@ p {
     top: 0.5rem;
 }
 
-.testing, .about {
-    background-color: #2C2C3C;
-       -webkit-backface-visibility: hidden;
+.about h2 {
+    margin-top: 3rem;
+    opacity: 0;
+    animation: fade-in 1s ease-out 500ms forwards;
+}
 
-       position: absolute;
-       top: 0;
-       left: 0;
+.button {
+    display: inline-block;
+    position: relative;
+    border: 5px solid #E7B135;
+    padding: 1rem 3rem;
+    text-transform: uppercase;
+    font-weight: bold;
+    transition: background 0.2s ease-out, color 0.2s ease-out;
 }
 
-.testing {
-    width: 100%;
-       z-index: 2;
-       transform: rotateY(0deg);
-    padding-bottom: 10rem;
+.button:hover {
+    background-color: #E7B135;
+    color: #2C2C3C;
+    text-decoration: none;
 }
 
-.about {
-       transform: rotateY(180deg);
+.button.return:before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-top: 2rem solid #E7B135;
+    border-right: 2rem solid transparent;
+    border-bottom: 0 solid transparent;
+    border-left: 0 solid transparent;
 }
 
-#about:target {
-       transform: rotateY(180deg);
-    
+#magic {
+    opacity: 0;
+}
+
+@keyframes fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes scale-in {
+  0%   { opacity: 0; transform: scale(0.8); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes flicker-in {
+  0%   { opacity: 0; }
+  30%  { opacity: 0.3; }
+  40%  { opacity: 0; }
+  50%  { opacity: 0.1; }
+  60%  { opacity: 0; }
+  70%  { opacity: 0.4; }
+  80%  { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes wipe-in {
+  0%   { width: 0; }
+  100%  { width: 100vw; }
 }
 
 @media only screen and (max-width: 784px) {
-    
     .logo {
         width: 100%;
         margin-bottom: 1rem;
@@ -236,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;
+    }
+}