LJ5O
63c4940bce
This "Loading..." will help people to understand that the website is loading, and isn't just a blank page. I'll consider creating a nice css animation later, but I just wanted something quick and easy for now
106 lines
1.5 KiB
CSS
106 lines
1.5 KiB
CSS
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #2E86AB;
|
|
}
|
|
|
|
#loading{
|
|
position: absolute;
|
|
top:50%;
|
|
left:50%;
|
|
transform: translate(-50%, -50%);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 2em;
|
|
z-index:-1;
|
|
}
|
|
|
|
#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;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#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;
|
|
} |