| /* Copyright (c) 2015, the Dart project authors. Please see the AUTHORS file |
| * for details. All rights reserved. Use of this source code is governed by a |
| * BSD-style license that can be found in the LICENSE file. */ |
| |
| iframe { |
| /* We would use display: none here, but then Firefox fails to properly compute |
| * styles. See #274 */ |
| visibility: hidden; |
| } |
| |
| #play { |
| display: none; |
| cursor: pointer; |
| } |
| |
| #dark { |
| display: none; |
| } |
| |
| .paused #play { |
| display: block; |
| z-index: 1; |
| } |
| |
| .paused #dark { |
| display: block; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| top: 0; |
| right: 0; |
| background-color: rgba(0, 0, 0, 0.5); |
| } |
| |
| .paused #right-flank, .paused #right-ear, .paused #right-paw, |
| .paused #left-flank, .paused #left-ear, .paused #left-paw { |
| -webkit-animation-play-state: paused; |
| animation-play-state: paused; |
| } |
| |
| .debug body { |
| margin: 0; |
| padding: 0; |
| } |
| |
| .debug iframe { |
| visibility: visible; |
| border: none; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| } |
| |
| /* Compiled output from |
| * http://codepen.io/mknadler/pen/11b75cb014a3c382f54abf527655af21. */ |
| |
| svg { |
| position: absolute; |
| margin: auto; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| top: 0; |
| } |
| |
| #right-flank { |
| fill: #0074C1; |
| stroke-color: #0074C1; |
| -webkit-animation: right-flank 8s ease infinite alternate; |
| animation: right-flank 8s ease infinite alternate; |
| } |
| |
| #right-ear { |
| fill: #00B5AB; |
| stroke-color: #00B5AB; |
| -webkit-animation: right-ear 8s ease-in infinite alternate; |
| animation: right-ear 8s ease-in infinite alternate; |
| } |
| |
| #right-paw { |
| fill: #00A6E4; |
| stroke-color: #00A6E4; |
| -webkit-animation: right-paw 8s ease-out infinite alternate; |
| animation: right-paw 8s ease-out infinite alternate; |
| } |
| |
| #left-flank { |
| fill: #00B5AB; |
| stroke-color: #00B5AB; |
| -webkit-animation: left-flank 8s ease-in-out infinite alternate; |
| animation: left-flank 8s ease-in-out infinite alternate; |
| } |
| |
| #left-ear { |
| fill: #0074C1; |
| stroke-color: #0074C1; |
| -webkit-animation: left-ear 8s linear infinite alternate; |
| animation: left-ear 8s linear infinite alternate; |
| } |
| |
| #left-paw { |
| fill: #41C1BC; |
| stroke-color: #41C1BC; |
| -webkit-animation: left-paw 8s ease infinite alternate; |
| animation: left-paw 8s ease infinite alternate; |
| } |
| |
| @-webkit-keyframes left-ear { |
| 20% { |
| -webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6); |
| transform: translate(250px, 150px) rotateY(180deg) scale(0.6); |
| fill: #00A6E4; |
| } |
| 50% { |
| -webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1); |
| transform: translate(100px, 75px) rotateY(80deg) scale(1.1); |
| fill: #41C1BC; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #0074C1; |
| } |
| } |
| |
| @keyframes left-ear { |
| 20% { |
| -webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6); |
| transform: translate(250px, 150px) rotateY(180deg) scale(0.6); |
| fill: #00A6E4; |
| } |
| 50% { |
| -webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1); |
| transform: translate(100px, 75px) rotateY(80deg) scale(1.1); |
| fill: #41C1BC; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #0074C1; |
| } |
| } |
| @-webkit-keyframes right-ear { |
| 20% { |
| -webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6); |
| transform: translate(200px, 250px) rotateX(180deg) scale(0.6); |
| fill: #41C1BC; |
| } |
| 50% { |
| -webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1); |
| transform: translate(75px, 100px) rotateX(80deg) scale(1.1); |
| fill: #00A6E4; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #00B5AB; |
| } |
| } |
| @keyframes right-ear { |
| 20% { |
| -webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6); |
| transform: translate(200px, 250px) rotateX(180deg) scale(0.6); |
| fill: #41C1BC; |
| } |
| 50% { |
| -webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1); |
| transform: translate(75px, 100px) rotateX(80deg) scale(1.1); |
| fill: #00A6E4; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #00B5AB; |
| } |
| } |
| @-webkit-keyframes left-paw { |
| 20% { |
| -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6); |
| transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6); |
| fill: #00B5AB; |
| } |
| 50% { |
| -webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6); |
| transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6); |
| fill: #00B5AB; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #41C1BC; |
| } |
| } |
| @keyframes left-paw { |
| 20% { |
| -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6); |
| transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6); |
| fill: #00B5AB; |
| } |
| 50% { |
| -webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6); |
| transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6); |
| fill: #00B5AB; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #41C1BC; |
| } |
| } |
| @-webkit-keyframes right-paw { |
| 20% { |
| -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6); |
| transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6); |
| fill: #41C1BC; |
| } |
| 50% { |
| -webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6); |
| transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6); |
| fill: #41C1BC; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #00A6E4; |
| } |
| } |
| @keyframes right-paw { |
| 20% { |
| -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6); |
| transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6); |
| fill: #41C1BC; |
| } |
| 50% { |
| -webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6); |
| transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6); |
| fill: #41C1BC; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #00A6E4; |
| } |
| } |
| @-webkit-keyframes left-flank { |
| 20% { |
| -webkit-transform: translate(0px, 100px) scale(0.6); |
| transform: translate(0px, 100px) scale(0.6); |
| fill: #00A6E4; |
| } |
| 50% { |
| -webkit-transform: translate(0px, 100px) scale(0.4); |
| transform: translate(0px, 100px) scale(0.4); |
| fill: #00A6E4; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #00B5AB; |
| } |
| } |
| @keyframes left-flank { |
| 20% { |
| -webkit-transform: translate(0px, 100px) scale(0.6); |
| transform: translate(0px, 100px) scale(0.6); |
| fill: #00A6E4; |
| } |
| 50% { |
| -webkit-transform: translate(0px, 100px) scale(0.4); |
| transform: translate(0px, 100px) scale(0.4); |
| fill: #00A6E4; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #00B5AB; |
| } |
| } |
| @-webkit-keyframes right-flank { |
| 20% { |
| -webkit-transform: translate(100px, -25px) scale(0.6); |
| transform: translate(100px, -25px) scale(0.6); |
| fill: #41C1BC; |
| } |
| 50% { |
| -webkit-transform: translate(110px, 0px) scale(0.4); |
| transform: translate(110px, 0px) scale(0.4); |
| fill: #00A6E4; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #0074C1; |
| } |
| } |
| @keyframes right-flank { |
| 20% { |
| -webkit-transform: translate(100px, -25px) scale(0.6); |
| transform: translate(100px, -25px) scale(0.6); |
| fill: #41C1BC; |
| } |
| 50% { |
| -webkit-transform: translate(110px, 0px) scale(0.4); |
| transform: translate(110px, 0px) scale(0.4); |
| fill: #00A6E4; |
| } |
| 80% { |
| -webkit-transform: translate(0px, 0px) scale(1); |
| transform: translate(0px, 0px) scale(1); |
| fill: #0074C1; |
| } |
| } |