japanese-drum-game/public/src/css/game.css
2018-10-25 17:18:41 +03:00

105 lines
1.6 KiB
CSS

#game{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
background-size: cover;
background-position: center;
}
#game.default-bg{
background-size: calc(100vh / 720 * 512);
}
#canvas{
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
#pause-menu{
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.75);
z-index: 5;
}
#pause-menu button{
width: 90%;
height: 25%;
display: block;
margin: 0 auto;
cursor: pointer;
border:.5vmin solid #ae7a26;
background: #fff;
color: #000;
font-family: TnT, Meiryo, sans-serif;
font-size: 3.5vmin;
border-radius: 1.5vmin;
outline: none;
}
#pause-menu button:hover,
#pause-menu .window:not(:hover) button.selected{
color:white;
background:#0c6577;
border-color:#fa5d3a;
}
#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%;
}
#touch-buttons{
display: none;
position: absolute;
top: 8vh;
right: 2vh;
opacity: 0.5;
z-index: 5;
}
#touch-buttons img{
width: 12.5vmin;
height: 12.5vmin;
}
.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;
}