170 lines
2.2 KiB
CSS
170 lines
2.2 KiB
CSS
html,body{
|
|
height:100%;
|
|
}
|
|
|
|
|
|
body{
|
|
background: #000000;
|
|
margin:0;
|
|
padding:0;
|
|
position: relative;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
}
|
|
#divbg {
|
|
pointer-events: none;
|
|
}
|
|
#bg {
|
|
pointer-events: none;
|
|
}
|
|
#tetris{
|
|
left:42%;
|
|
top:50%;
|
|
position: absolute;
|
|
background:rgba(0,0,0,0);
|
|
width:560px;
|
|
|
|
}
|
|
|
|
#scene{
|
|
height:100%;
|
|
position: absolute;
|
|
left:210px;
|
|
boarder:1px solid #6666;
|
|
background:rgba(1,1,1,.10);
|
|
}
|
|
|
|
|
|
#leftSide {
|
|
height:100%;
|
|
position: absolute;
|
|
left:0px;
|
|
width:210px;
|
|
text-align: left;
|
|
background:rgba(20,20,20,.5);
|
|
}
|
|
|
|
#leftInfo{
|
|
overflow:hidden;
|
|
overflow-y:scroll;
|
|
height:200px;
|
|
width:200px;
|
|
margin:0 auto;
|
|
background:rgba(1,1,1,.7);
|
|
border: 1px solid #6666;
|
|
}
|
|
|
|
#leftInfo ul {padding:2%;}
|
|
|
|
#hold{
|
|
left:45%;
|
|
position:relative;
|
|
width:80px;
|
|
height:400px;
|
|
margin:5px auto;
|
|
background: rgba(0,0,0,.8); /*rgba(50,50,50,.5);*/
|
|
}
|
|
|
|
#gameOver{
|
|
height:100%;
|
|
position: absolute;
|
|
right:120px;
|
|
left:210px;
|
|
background:rgba(0,0,0,.75);
|
|
z-index:999;
|
|
color:#2f2f2f;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
|
|
#gameOver h1{
|
|
margin-top:50%;
|
|
}
|
|
|
|
#gameOver a,#gameOver a:visited{
|
|
color:dodgerblue;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#gameOver h3{
|
|
color:DimGrey;
|
|
}
|
|
|
|
#side{
|
|
height:100%;
|
|
position: absolute;
|
|
top:-10px;
|
|
right:0;
|
|
left:560px;
|
|
text-align: center;
|
|
background:rgba(255,255,255,0);
|
|
}
|
|
|
|
#info{
|
|
height:700px;
|
|
width:210px;
|
|
left:210px;
|
|
margin:0 auto;
|
|
background:rgba(20,20,20,.5);
|
|
}
|
|
|
|
#preview{
|
|
width:80px;
|
|
height:400px;
|
|
top:0px;
|
|
margin:10px auto;
|
|
background:rgba(0,0,0,.8);
|
|
}
|
|
|
|
|
|
#levelInfo{
|
|
color:DimGrey;
|
|
font-size:18px;
|
|
margin:10px 0;
|
|
background:rgba(255,255,255,0);
|
|
}
|
|
#level{
|
|
color:dodgerblue;
|
|
font-size:18px;
|
|
background:rgba(255,255,255,0);;
|
|
}
|
|
|
|
#scoreInfo{
|
|
color:DimGrey;
|
|
font-size: 18px;
|
|
margin-top:0;
|
|
background:rgba(255,255,255,0);
|
|
}
|
|
|
|
#score{
|
|
color:dodgerblue;
|
|
font-family: 'Arial';
|
|
background:rgba(255,255,255,0);
|
|
|
|
}
|
|
|
|
#linesInfo{
|
|
|
|
margin-top:0;
|
|
|
|
visibility: collapse;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
#bg {
|
|
-webkit-filter: blur(3px);
|
|
filter: blur(0px);
|
|
} |