Old stuff/old_sites/threejs/18/css/style.css
(Deskargatu)
body {
margin: 0;
width:100%;
height:100%;
overflow:hidden;
font-family:Verdana, sans-serif;
}
canvas { width: 100%; height: 100% }
.loader
{
font-size:4vh;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
background:black;
}
.loader.hidden
{
display:none;
}
.loader-content
{
position:absolute;
top:50%;
width:100%;
transform:translateY(-50%);
}
.loader h1
{
text-align:center;
color:white;
}
.loader-progress
{
position:relative;
margin:20px auto;
width:80%;
height:50px;
background:#555;
}
.loader-text
{
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}
.loader-progress span
{
display:block;
background:white;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
}
.gui
{
font-family:sans-serif;
position:absolute;
opacity:1;
transition:opacity 1.0s ease 0.5s;
z-index:3;
bottom:0px;
height:9vh;
width:100%;
background:rgba(0,0,0,0.5);
font-size:5vh;
color:white;
}
.hidden
{
opacity:0;
}
.bones_attachments
{
height:100%;
position:relative;
left:2vh;
display:inline-block;
text-align:center;
margin:0px;
}
.bone_attachment
{
position:relative;
display:inline-block;
height:5vh;
margin:0px 0.7vh;
width:5vh;
background:rgba(255,255,255,0.5);
top:50%;
transform:translateY(-50%);
border:1px solid rgba(0,0,0,0.5);
cursor:pointer;
}
.bone_attachment.selected
{
border:1px solid rgba(255,255,255,0.5);
}
.punch { background:url(../gui/punch.png) center center no-repeat; background-size:80%; }
.stick { background:url(../gui/stick.png) center center no-repeat; background-size:100%; }
.hammer { background:url(../gui/hammer.png) center center no-repeat; background-size:100%; }
.bone_attachment .bone_attachment-hover
{
display:none;
width:auto;
height:auto;
padding:0.1em 0.2em;
background:rgba(0,0,0,0.5);
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
text-transform:uppercase;
font-size:0.3em;
}
.bone_attachment:hover .bone_attachment-hover
{
display:block;
}
.staminabar
{
pointer-events:none;
display:inline-block;
position:relative;
top:50%;
left:10vh;
transform:translateY(-50%);
width:10vw;
background:#808080;
height:5vh;
}
.staminabar_filled
{
display:block;
position:absolute;
top:0px;
left:0px;
width:30%;
height:100%;
background:#c0c17e;
}
.life
{
pointer-events:none;
position:absolute;
top:50%;
transform:translateY(-50%);
right:10px;
text-transform:uppercase;
text-shadow:0px 0px 2px #000;
}