|
|
| Line 67: |
Line 67: |
| | { | | { |
| | margin-top: 68px; | | margin-top: 68px; |
| − | }
| + | width: 100%; |
| − | | + | |
| − | /* NAVIGATION ---------------------------------------------------------------- */
| + | |
| − | | + | |
| − | #analyzer_button, #gas_button, #randomizer_button
| + | |
| − | {
| + | |
| | clear: both; | | clear: both; |
| − | margin: 20px 10px 10px 10px;
| |
| − | float: right;
| |
| | background-color: #FFFFFF; | | background-color: #FFFFFF; |
| − | padding: 10px 20px;
| |
| − | border: 1px solid #E05454;
| |
| − | border-radius: 10px;
| |
| | } | | } |
| | | | |
| − | #analyzer_button:hover, #gas_button:hover, #randomizer_button:hover
| |
| − | {
| |
| − | background-color: #FFE0E0;
| |
| − | }
| |
| − |
| |
| − | #gas_button
| |
| − | {
| |
| − | float: left;
| |
| − | padding: 5px 10px;
| |
| − | }
| |
| − |
| |
| − | #analyzer_button:hover > #wheel, #gas_button:hover > #catcher, #randomizer_button:hover > #square
| |
| − | {
| |
| − | -webkit-animation-play-state: running;
| |
| − | -moz-animation-play-state: running;
| |
| − | -ms-animation-play-state: running;
| |
| − | -o-animation-play-state: running;
| |
| − | animation-play-state: running;
| |
| − | }
| |
| − |
| |
| − | #wheel
| |
| − | {
| |
| − | -webkit-animation: spin 3s linear infinite;
| |
| − | -moz-animation: spin 3s linear infinite;
| |
| − | -ms-animation: spin 3s linear infinite;
| |
| − | -o-animation: spin 3s linear infinite;
| |
| − | animation: spin 3s linear infinite;
| |
| − |
| |
| − | -webkit-animation-play-state: paused;
| |
| − | -moz-animation-play-state: paused;
| |
| − | -ms-animation-play-state: paused;
| |
| − | -o-animation-play-state: paused;
| |
| − | animation-play-state: paused;
| |
| − | }
| |
| − |
| |
| − | #catcher
| |
| − | {
| |
| − | -webkit-animation: flip 2s linear infinite;
| |
| − | -moz-animation: flip 2s linear infinite;
| |
| − | -ms-animation: flip 2s linear infinite;
| |
| − | -o-animation: flip 2s linear infinite;
| |
| − | animation: flip 2s linear infinite;
| |
| − |
| |
| − | -webkit-animation-play-state: paused;
| |
| − | -moz-animation-play-state: paused;
| |
| − | -ms-animation-play-state: paused;
| |
| − | -o-animation-play-state: paused;
| |
| − | animation-play-state: paused;
| |
| − | }
| |
| − |
| |
| − | #square
| |
| − | {
| |
| − | -webkit-animation: wobble 0.5s linear infinite;
| |
| − | -moz-animation: wobble 0.5s linear infinite;
| |
| − | -ms-animation: wobble 0.5s linear infinite;
| |
| − | -o-animation: wobble 0.5s linear infinite;
| |
| − | animation: wobble 0.5s linear infinite;
| |
| − |
| |
| − | -webkit-animation-play-state: paused;
| |
| − | -moz-animation-play-state: paused;
| |
| − | -ms-animation-play-state: paused;
| |
| − | -o-animation-play-state: paused;
| |
| − | animation-play-state: paused;
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes spin
| |
| − | {
| |
| − | 100%
| |
| − | {
| |
| − | -webkit-transform: rotate(360deg);
| |
| − | -moz-transform: rotate(360deg);
| |
| − | -ms-transform: rotate(360deg);
| |
| − | -o-transform: rotate(360deg);
| |
| − | transform: rotate(360deg);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes spin
| |
| − | {
| |
| − | 100%
| |
| − | {
| |
| − | -webkit-transform: rotate(360deg);
| |
| − | -moz-transform: rotate(360deg);
| |
| − | -ms-transform: rotate(360deg);
| |
| − | -o-transform: rotate(360deg);
| |
| − | transform: rotate(360deg);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes flip
| |
| − | {
| |
| − | 100%
| |
| − | {
| |
| − | -webkit-transform: rotateY(360deg);
| |
| − | -moz-transform: rotateY(360deg);
| |
| − | -ms-transform: rotateY(360deg);
| |
| − | -o-transform: rotateY(360deg);
| |
| − | transform: rotateY(360deg);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes flip
| |
| − | {
| |
| − | 100%
| |
| − | {
| |
| − | -webkit-transform: rotateY(360deg);
| |
| − | -moz-transform: rotateY(360deg);
| |
| − | -ms-transform: rotateY(360deg);
| |
| − | -o-transform: rotateY(360deg);
| |
| − | transform: rotateY(360deg);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes wobble
| |
| − | {
| |
| − | 0%
| |
| − | {
| |
| − | -webkit-transform: rotate(0deg);
| |
| − | -moz-transform: rotate(0deg);
| |
| − | -ms-transform: rotate(0deg);
| |
| − | -o-transform: rotate(0deg);
| |
| − | transform: rotate(0deg);
| |
| − | }
| |
| − | 25%
| |
| − | {
| |
| − | -webkit-transform: rotate(15deg);
| |
| − | -moz-transform: rotate(15deg);
| |
| − | -ms-transform: rotate(15deg);
| |
| − | -o-transform: rotate(15deg);
| |
| − | transform: rotate(15deg);
| |
| − | }
| |
| − | 75%
| |
| − | {
| |
| − | -webkit-transform: rotate(-15deg);
| |
| − | -moz-transform: rotate(-15deg);
| |
| − | -ms-transform: rotate(-15deg);
| |
| − | -o-transform: rotate(-15deg);
| |
| − | transform: rotate(-15deg);
| |
| − | }
| |
| − | 100%
| |
| − | {
| |
| − | -webkit-transform: rotate(0deg);
| |
| − | -moz-transform: rotate(0deg);
| |
| − | -ms-transform: rotate(0deg);
| |
| − | -o-transform: rotate(0deg);
| |
| − | transform: rotate(0deg);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @keyframes wobble
| |
| − | {
| |
| − | 0%
| |
| − | {
| |
| − | -webkit-transform: rotate(0deg);
| |
| − | -moz-transform: rotate(0deg);
| |
| − | -ms-transform: rotate(0deg);
| |
| − | -o-transform: rotate(0deg);
| |
| − | transform: rotate(0deg);
| |
| − | }
| |
| − | 25%
| |
| − | {
| |
| − | -webkit-transform: rotate(15deg);
| |
| − | -moz-transform: rotate(15deg);
| |
| − | -ms-transform: rotate(15deg);
| |
| − | -o-transform: rotate(15deg);
| |
| − | transform: rotate(15deg);
| |
| − | }
| |
| − | 75%
| |
| − | {
| |
| − | -webkit-transform: rotate(-15deg);
| |
| − | -moz-transform: rotate(-15deg);
| |
| − | -ms-transform: rotate(-15deg);
| |
| − | -o-transform: rotate(-15deg);
| |
| − | transform: rotate(-15deg);
| |
| − | }
| |
| − | 100%
| |
| − | {
| |
| − | -webkit-transform: rotate(0deg);
| |
| − | -moz-transform: rotate(0deg);
| |
| − | -ms-transform: rotate(0deg);
| |
| − | -o-transform: rotate(0deg);
| |
| − | transform: rotate(0deg);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* BUTTONS ------------------------------------------------------------*/
| |
| − |
| |
| − | .button_big
| |
| − | {
| |
| − | background-color:#FFFFFF;
| |
| − | color: #000000;
| |
| − | font-size:18px;
| |
| − | border-radius:5px;
| |
| − | border: 1px solid #777777;
| |
| − | width:160px;
| |
| − | height:35px;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .button_small
| |
| − | {
| |
| − | background-color:#FFFFFF;
| |
| − | color:#000000;
| |
| − | font-size:18px;
| |
| − | border-radius:5px;
| |
| − | border: 1px solid #777777;
| |
| − | width:90px;
| |
| − | height:26px;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .button_big.red, .button_small.red
| |
| − | {
| |
| − | border-color: #E05454;
| |
| − | }
| |
| − |
| |
| − | .button_big.red:hover, .button_small.red:hover
| |
| − | {
| |
| − | background-color: #FFE0E0;
| |
| − | border-color: #E05454;
| |
| − | border-width: 2px;
| |
| − | }
| |
| − |
| |
| − | .button_big:hover, .button_small:hover
| |
| − | {
| |
| − | background-color: #D5D5D5;
| |
| − | border-color: #000000;
| |
| − | border-width: 2px;
| |
| − | }
| |
| | </style> | | </style> |
| | </head> | | </head> |
| | </html> | | </html> |