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.
172 lines
2.3 KiB
172 lines
2.3 KiB
#up-arrow {
|
|
background-image: url(../assets/rotate.svg);
|
|
width: 50px;
|
|
height: 50px;
|
|
position: absolute;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#down-arrow {
|
|
background-image: url(../assets/drop.svg);
|
|
width: 44px;
|
|
height: 45px;
|
|
position: absolute;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
background-color: white;
|
|
}
|
|
|
|
#left-arrow {
|
|
background-image: url(../assets/left-arrow.svg);
|
|
width: 45px;
|
|
height: 45px;
|
|
position: absolute;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
background-color: white;
|
|
}
|
|
|
|
#right-arrow {
|
|
background-image: url(../assets/right-arrow.svg);
|
|
width: 45px;
|
|
height: 45px;
|
|
position: absolute;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
background-color: white;
|
|
}
|
|
|
|
.arrowkeys {
|
|
display: block;
|
|
}
|
|
|
|
@media only screen and (min-width: 500px) {
|
|
|
|
#canvas {
|
|
width: 60vw;
|
|
right: 20vw;
|
|
left: 20vw;
|
|
}
|
|
|
|
#up-arrow {
|
|
top: 40vh;
|
|
left: 5vw;
|
|
}
|
|
|
|
#down-arrow {
|
|
top: 55vh;
|
|
left: 5.3vw;
|
|
}
|
|
|
|
#left-arrow {
|
|
top: 47vh;
|
|
left: 80.5vw;
|
|
}
|
|
|
|
#right-arrow {
|
|
top: 47vh;
|
|
left: 90.5vw;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 800px) {
|
|
|
|
#canvas {
|
|
width: 50vw;
|
|
right: 25vw;
|
|
left: 25vw;
|
|
}
|
|
|
|
#up-arrow {
|
|
top: 40vh;
|
|
left: 11vw;
|
|
}
|
|
|
|
#down-arrow {
|
|
top: 55vh;
|
|
left: 11.3vw;
|
|
}
|
|
|
|
#left-arrow {
|
|
top: 47vh;
|
|
left: 80vw;
|
|
}
|
|
|
|
#right-arrow {
|
|
top: 47vh;
|
|
left: 90vw;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 1100px) {
|
|
|
|
#canvas {
|
|
width: 40vw;
|
|
right: 30vw;
|
|
left: 30vw;
|
|
}
|
|
|
|
#up-arrow {
|
|
top: 40vh;
|
|
left: 13vw;
|
|
}
|
|
|
|
#down-arrow {
|
|
top: 55vh;
|
|
left: 13.3vw;
|
|
}
|
|
|
|
#left-arrow {
|
|
top: 47vh;
|
|
left: 80vw;
|
|
}
|
|
|
|
#right-arrow {
|
|
top: 47vh;
|
|
left: 90vw;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
|
|
#canvas {
|
|
width: 100vw;
|
|
height: 70vh;
|
|
}
|
|
|
|
#up-arrow {
|
|
background-size: 40px;
|
|
background-repeat: no-repeat;
|
|
top: 82vh;
|
|
left: 13vw;
|
|
}
|
|
|
|
#down-arrow {
|
|
background-size: 38px;
|
|
background-repeat: no-repeat;
|
|
top: 91vh;
|
|
left: 13.5vw;
|
|
}
|
|
|
|
#left-arrow {
|
|
background-size: 41px;
|
|
background-repeat: no-repeat;
|
|
top: 85vh;
|
|
left: 60vw;
|
|
}
|
|
|
|
#right-arrow {
|
|
background-size: 41px;
|
|
background-repeat: no-repeat;
|
|
top: 85vh;
|
|
left: 75vw;
|
|
}
|
|
|
|
}
|