webui/css/password.css
#doors {
z-index: 1;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.door-outer {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #999999;
padding: 40px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #888888 0%, #555555 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #888888 0%, #555555 100%);
/* Opera */
background-image: -o-linear-gradient(top, #888888 0%, #555555 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #888888), color-stop(1, #555555));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #888888 0%, #555555 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #888888 0%, #555555 100%);
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}
.door-inner {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
-moz-box-shadow: 0 0 40px 40px rgb(64,64,64);
-webkit-box-shadow: 0 0 40px 40px rgb(64,64,64);
box-shadow: 0 0 40px 40px rgb(64,64,64);
}
#door-r {
left: 50%;
}
.sphere {
position: absolute;
top: 50%;
left: 0;
margin-top: -240px;
margin-left: -240px;
width: 480px;
height: 480px;
border-radius: 280px;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%,rgba(30, 30, 30, 1) 99%);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%,rgba(30, 30, 30, 1) 99%);
background: linear-gradient(top, rgba(0, 0, 0, 1) 0%,rgba(30, 30, 30, 1) 99%);
box-shadow: inset 0 -5px 30px rgba(255, 255, 255, 0.4), inset -2px -1px 40px rgba(0, 0, 0, 0.4), 0 0 1px black;
text-align: center;
}
.sphere::after {
content: "";
position: absolute;
width: 360px;
height: 240px;
border-radius: 240px / 160px;
left: 60px;
top: -1px;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 1%,rgba(42, 42, 42, 0) 100%);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 1%,rgba(42, 42, 42, 0) 100%);
background: linear-gradient(top, rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 1%,rgba(42, 42, 42, 0) 100%);
}
#passsphere input {
width: 350px;
height: 60px;
margin: 220px auto;
padding: 5px;
font-size: 36px;
background: #dddddd;
border: 5px solid #888888;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#passsphere button {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 60px;
margin-top: 80px;
margin-left: -75px;
font-size: 2em;
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
}
#passprompt {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
width: 360px;
height: 50px;
margin-top: -120px;
margin-left: -180px;
font-family: Helvetica, Verdana, sans-serif;
font-size: 48px;
font-weight: bold;
color: #AAAAAA;
-webkit-text-stroke: 2px #444444;
}
#passfield:focus {
border-color: rgba(82,168,236,0.8);
}