japanese-drum-game/public/src/css/game.css
2019-01-01 04:16:55 +03:00

97 lines
1.5 KiB
CSS

#game{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
background-size: calc(100vh / 720 * 512);
background-position: center;
}
#screen.view{
background-image: none;
background-color: #000;
}
#canvas{
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
#cursor{
position: fixed;
width: 1px;
height: 1px;
cursor: none;
pointer-events: none;
z-index: 1;
}
#touch-drum{
display: none;
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
text-align: center;
margin: auto;
overflow: hidden;
}
#touch-drum-img{
width: 100%;
height: 100%;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
}
#touch-buttons{
display: none;
position: absolute;
top: 8vh;
right: 2vh;
opacity: 0.5;
z-index: 5;
}
#touch-buttons div{
display: inline-block;
width: 12.5vmin;
height: 12.5vmin;
background-size: contain;
background-repeat: no-repeat;
}
.portrait #touch-buttons{
top: 11vh;
}
.touchp2 #touch-buttons{
top: -1.9vh;
}
.touch-visible #touch-drum,
.touch-visible #touch-buttons{
display: block;
}
.touch-visible .window{
width: 80vmin;
height: 53vmin;
}
.touch-visible #pause-menu .window button{
font-size: 5vmin;
}
.touch-visible #pause-menu .window button.selected{
color: #000;
background: #fff;
border-color: #ae7a26;
}
.touch-results #touch-pause-btn{
display: none;
}
#fade-screen{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
pointer-events: none;
z-index: 2;
transition: 1s background-color linear;
}