web version
This commit is contained in:
Mahdi Dibaiee
399
web/static/css/main.css
Normal file
399
web/static/css/main.css
Normal file
@ -0,0 +1,399 @@
|
||||
/*
|
||||
Copyright 2014 Nebez Briefkani
|
||||
floppybird - main.css
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
@-webkit-keyframes animLand {
|
||||
0% { background-position: 0px 0px; }
|
||||
100% { background-position: -335px 0px; }
|
||||
}
|
||||
@-moz-keyframes animLand {
|
||||
0% { background-position: 0px 0px; }
|
||||
100% { background-position: -335px 0px; }
|
||||
}
|
||||
@-o-keyframes animLand {
|
||||
0% { background-position: 0px 0px; }
|
||||
100% { background-position: -335px 0px; }
|
||||
}
|
||||
@keyframes animLand {
|
||||
0% { background-position: 0px 0px; }
|
||||
100% { background-position: -335px 0px; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes animSky {
|
||||
0% { background-position: 0px 100%; }
|
||||
100% { background-position: -275px 100%; }
|
||||
}
|
||||
@-moz-keyframes animSky {
|
||||
0% { background-position: 0px 100%; }
|
||||
100% { background-position: -275px 100%; }
|
||||
}
|
||||
@-o-keyframes animSky {
|
||||
0% { background-position: 0px 100%; }
|
||||
100% { background-position: -275px 100%; }
|
||||
}
|
||||
@keyframes animSky {
|
||||
0% { background-position: 0px 100%; }
|
||||
100% { background-position: -275px 100%; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes animBird {
|
||||
from { background-position: 0px 0px; }
|
||||
to { background-position: 0px -96px; }
|
||||
}
|
||||
@-moz-keyframes animBird {
|
||||
from { background-position: 0px 0px; }
|
||||
to { background-position: 0px -96px; }
|
||||
}
|
||||
@-o-keyframes animBird {
|
||||
from { background-position: 0px 0px; }
|
||||
to { background-position: 0px -96px; }
|
||||
}
|
||||
@keyframes animBird {
|
||||
from { background-position: 0px 0px; }
|
||||
to { background-position: 0px -96px; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes animPipe {
|
||||
0% { left: 900px; }
|
||||
100% { left: -100px; }
|
||||
}
|
||||
@-moz-keyframes animPipe {
|
||||
0% { left: 900px; }
|
||||
100% { left: -100px; }
|
||||
}
|
||||
@-o-keyframes animPipe {
|
||||
0% { left: 900px; }
|
||||
100% { left: -100px; }
|
||||
}
|
||||
@keyframes animPipe {
|
||||
0% { left: 900px; }
|
||||
100% { left: -100px; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes animCeiling {
|
||||
0% { background-position: 0px 0px; }
|
||||
100% { background-position: -63px 0px; }
|
||||
}
|
||||
@-moz-keyframes animCeiling {
|
||||
0% { background-position: 0px 0px; }
|
||||
100% { background-position: -63px 0px; }
|
||||
}
|
||||
@-o-keyframes animCeiling {
|
||||
0% { background-position: 0px 0px; }
|
||||
100% { background-position: -63px 0px; }
|
||||
}
|
||||
@keyframes animCeiling {
|
||||
0% { background-position: 0px 0px; }
|
||||
100% { background-position: -63px 0px; }
|
||||
}
|
||||
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after
|
||||
{
|
||||
/* border box */
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
/* gpu acceleration */
|
||||
-webkit-transition: translate3d(0,0,0);
|
||||
/* select disable */
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#gamecontainer
|
||||
{
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Screen - Game
|
||||
*/
|
||||
#gamescreen
|
||||
{
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
#sky
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-image: url('../assets/sky.png');
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0px 100%;
|
||||
background-color: #4ec0ca;
|
||||
|
||||
-webkit-animation: animSky 7s linear infinite;
|
||||
animation: animSky 7s linear infinite;
|
||||
}
|
||||
|
||||
#flyarea
|
||||
{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 200px;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#ceiling
|
||||
{
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
height: 16px;
|
||||
width: 300px;
|
||||
background-image: url('../assets/ceiling.png');
|
||||
background-repeat: repeat-x;
|
||||
|
||||
-webkit-animation: animCeiling 481ms linear infinite;
|
||||
animation: animCeiling 481ms linear infinite;
|
||||
}
|
||||
|
||||
#land
|
||||
{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
background-image: url('../assets/land.png');
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0px 0px;
|
||||
background-color: #ded895;
|
||||
|
||||
-webkit-animation: animLand 2516ms linear infinite;
|
||||
animation: animLand 2516ms linear infinite;
|
||||
}
|
||||
|
||||
#bigscore
|
||||
{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#bigscore img
|
||||
{
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
#splash
|
||||
{
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
top: 75px;
|
||||
left: 65px;
|
||||
width: 188px;
|
||||
height: 170px;
|
||||
background-image: url('../assets/splash.png');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#scoreboard
|
||||
{
|
||||
position: absolute;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
top: 64px;
|
||||
left: 43px;
|
||||
width: 236px;
|
||||
height: 280px;
|
||||
background-image: url('../assets/scoreboard.png');
|
||||
background-repeat: no-repeat;
|
||||
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#medal
|
||||
{
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
top: 114px;
|
||||
left: 32px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
#currentscore
|
||||
{
|
||||
position: absolute;
|
||||
top: 105px;
|
||||
left: 107px;
|
||||
width: 104px;
|
||||
height: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#currentscore img
|
||||
{
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
#highscore
|
||||
{
|
||||
position: absolute;
|
||||
top: 147px;
|
||||
left: 107px;
|
||||
width: 104px;
|
||||
height: 14px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#highscore img
|
||||
{
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
#replay
|
||||
{
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
top: 205px;
|
||||
left: 61px;
|
||||
height: 115px;
|
||||
width: 70px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.boundingbox
|
||||
{
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
#player
|
||||
{
|
||||
left: 60px;
|
||||
top: 200px;
|
||||
}
|
||||
|
||||
.bird
|
||||
{
|
||||
position: absolute;
|
||||
width: 34px;
|
||||
height: 24px;
|
||||
background-image: url('../assets/bird.png');
|
||||
|
||||
-webkit-animation: animBird 300ms steps(4) infinite;
|
||||
animation: animBird 300ms steps(4) infinite;
|
||||
}
|
||||
|
||||
.pipe
|
||||
{
|
||||
position: absolute;
|
||||
left: -100px;
|
||||
width: 52px;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
text-align: left;
|
||||
|
||||
/*-webkit-animation: animPipe 7500ms linear;*/
|
||||
/*animation: animPipe 7500ms linear;*/
|
||||
}
|
||||
|
||||
.pipe_upper
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 52px;
|
||||
background-image: url('../assets/pipe.png');
|
||||
background-repeat: repeat-y;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.pipe_upper:after
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 52px;
|
||||
height: 26px;
|
||||
background-image: url('../assets/pipe-down.png');
|
||||
}
|
||||
|
||||
.pipe_lower
|
||||
{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 52px;
|
||||
background-image: url('../assets/pipe.png');
|
||||
background-repeat: repeat-y;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.pipe_lower:after
|
||||
{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 52px;
|
||||
height: 26px;
|
||||
background-image: url('../assets/pipe-up.png');
|
||||
}
|
||||
|
||||
#footer
|
||||
{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
#footer a,
|
||||
#footer a:link,
|
||||
#footer a:visited,
|
||||
#footer a:hover,
|
||||
#footer a:active
|
||||
{
|
||||
padding: 2px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.links {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: middle;
|
||||
}
|
||||
|
||||
.github {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.github .fa {
|
||||
font-size: 20px;
|
||||
}
|
||||
2
web/static/css/reset.css
Normal file
2
web/static/css/reset.css
Normal file
@ -0,0 +1,2 @@
|
||||
/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
|
||||
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
|
||||
Reference in New Issue
Block a user