Added some buttons so phone users can move
Also made sure that body takes full screen, so phone users can't scroll
This commit is contained in:
95
public/style.css
Normal file
95
public/style.css
Normal file
@@ -0,0 +1,95 @@
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #2E86AB;
|
||||
}
|
||||
|
||||
#notification_bar {
|
||||
position: absolute;
|
||||
top:20px;
|
||||
right: 0;
|
||||
|
||||
height: 80px;
|
||||
width: 0;
|
||||
/*width: 320px; 320 is the expended value, when showed by Jquery*/
|
||||
background-color: #1C232A;
|
||||
opacity: 0; /* Set to 0.9 when showed */
|
||||
z-index: 100;
|
||||
border-left: 24px solid #2E86AB;
|
||||
}
|
||||
|
||||
#notification_bar p{
|
||||
margin: 6px;
|
||||
color: #EAEAEA;
|
||||
font-size: 1em;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#picture_zoom{
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
bottom: 10%;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
border: 4px solid black;
|
||||
z-index: 100;
|
||||
|
||||
}
|
||||
#picture_zoom img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1000px) {
|
||||
#movement_keys{
|
||||
display: none;/*Those keys should be visible only on phones*/
|
||||
}
|
||||
}
|
||||
|
||||
#movement_keys{
|
||||
z-index: 101;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 170px;
|
||||
height: 115px;
|
||||
}
|
||||
|
||||
#movement_keys div{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
z-index: 102;
|
||||
background-color: #2E86AB;
|
||||
}
|
||||
|
||||
#key_up{
|
||||
position: absolute;
|
||||
top:5px;
|
||||
left:50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
#key_left{
|
||||
position: absolute;
|
||||
top:60px;
|
||||
left:5px;
|
||||
}
|
||||
#key_down{
|
||||
position: absolute;
|
||||
top:60px;
|
||||
left:60px;
|
||||
}
|
||||
#key_right{
|
||||
position: absolute;
|
||||
top:60px;
|
||||
right:5px;
|
||||
}
|
||||
Reference in New Issue
Block a user