You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
184 lines
3.0 KiB
184 lines
3.0 KiB
@charset "UTF-8";
|
|
|
|
html,body {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 540px;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #ece060;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.snake-game {
|
|
position: relative;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.snake-game canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.snake-controller {
|
|
position: absolute;
|
|
top: 60%;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.snake-switch {
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 53px;
|
|
background: url(../images/switch@2x.png) 0 0 no-repeat;
|
|
background-size: 100% 100%;
|
|
top: 160px;
|
|
right: 30px;
|
|
border: 0 none;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
outline: 0;
|
|
}
|
|
|
|
.snake-trigger {
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: url(../images/pause@2x.png) 0 0 no-repeat;
|
|
background-size: 100% 100%;
|
|
top: 160px;
|
|
left: 30px;
|
|
border: 0 none;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
outline: 0;
|
|
}
|
|
.snake-trigger:checked {
|
|
background-image: url(../images/play@2x.png);
|
|
}
|
|
|
|
.snake-direction {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
width: 160px;
|
|
height: 160px;
|
|
margin-left: -80px;
|
|
border: 2px solid #414042;
|
|
background-color: #414042;
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
transform: rotateZ(45deg);
|
|
-webkit-transform: rotateZ(45deg);
|
|
}
|
|
|
|
.snake-up, .snake-right, .snake-down, .snake-left {
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 80px;
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.snake-up::after,
|
|
.snake-right::after,
|
|
.snake-down::after,
|
|
.snake-left::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 40px;
|
|
top: 40px;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-width: 2px 0 0 2px;
|
|
border-color: #414042;
|
|
border-style: solid;
|
|
transform-origin: left top;
|
|
-webkit-transform-origin: left top;
|
|
}
|
|
|
|
.snake-up {
|
|
top: -1px;
|
|
left: -1px;
|
|
}
|
|
|
|
.snake-right {
|
|
top: -1px;
|
|
right: -1px;
|
|
}
|
|
.snake-right::after {
|
|
transform: rotate(90deg);
|
|
-webkit-transform: rotate(90deg);
|
|
}
|
|
|
|
.snake-down {
|
|
bottom: -1px;
|
|
right: -1px;
|
|
}
|
|
|
|
.snake-down::after {
|
|
transform: rotate(180deg);
|
|
-webkit-transform: rotate(180deg);
|
|
}
|
|
|
|
.snake-left {
|
|
bottom: -1px;
|
|
left: -1px;
|
|
}
|
|
|
|
.snake-left::after {
|
|
transform: rotate(270deg);
|
|
-webkit-transform: rotate(270deg);
|
|
}
|
|
|
|
.snake-direction.up .snake-up,
|
|
.snake-direction.right .snake-right,
|
|
.snake-direction.down .snake-down,
|
|
.snake-direction.left .snake-left
|
|
{
|
|
background-color: rgba(188, 188, 188, .7);
|
|
}
|
|
|
|
.snake-timer {
|
|
position: absolute;
|
|
top: 172px;
|
|
right: 0;
|
|
left: 0;
|
|
margin: 0 auto;
|
|
width: 200px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.snake-speed {
|
|
position: absolute;
|
|
top: 206px;
|
|
right: 0;
|
|
left: 0;
|
|
margin: 0 auto;
|
|
width: 120px;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background-color: #ffeeee;
|
|
box-shadow: inset 1px 1px 3px -1px rgba(0, 0, 0, .3);
|
|
}
|
|
|
|
.snake-speed-thumb {
|
|
position: absolute;
|
|
top: -3px;
|
|
left: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 100%;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
|
|
background-color: #fff;
|
|
}
|
|
|
|
|
|
|
|
|