policychanges/css/styles.css

178 lines
2.1 KiB
CSS

html,body{
height:100%;
}
body{
background: #3f3f3f;
margin:0;
padding:0;
position: relative;
font-family: 'American Typewriter','Marker Felt';
}
#tetris{
left:50%;
top:50%;
position: absolute;
background: #555;
}
#scene{
height:100%;
position: absolute;
background: #2f2f2f;
left:120px;
}
#leftSide {
height:100%;
position: absolute;
top:0px;
left:0px;
width:120px;
text-align: center;
}
#leftInfo{
height:100%;
width:120px;
margin:0 auto;
}
#hold{
position:relative;
width:80px;
height:360px;
background: #2f2f2f;
margin:10px auto;
}
#gameOver{
height:100%;
position: absolute;
right:120px;
background:rgba(0,0,0,.75);
z-index:999;
color:#ffe100;
text-align: center;
display: none;
}
#gameOver h1{
margin-top:50%;
}
#gameOver a,#gameOver a:visited{
color:#66bc29;
text-decoration: none;
}
#gameOver h3{
color:orange;
}
#side{
height:100%;
position: absolute;
top:0;
right:0;
text-align: center;
}
#info{
width:120px;
margin:0 auto;
}
#preview{
width:80px;
height:360px;
top:0px;
background: #2f2f2f;
margin:10px auto;
}
#levelInfo{
color:#fff;
font-size:18px;
margin:10px 0;
}
#level{
color:orange;
font-size:32px;
}
#scoreInfo{
color:#fff;
font-size: 18px;
margin-top:0;
}
#score{
color:orange;
font-family: 'Chalkboard SE';
}#linesInfo{
color:#fff;
font-size: 18px;
margin-top:0;
}
#lines{
color:orange;
font-family: 'Chalkboard SE';
}
#rewardInfo{
color:yellow;
font-weight: bold;
height:20px;
}
.invisible{
visibility: hidden;
}
.animated {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}