html
{
color: #FFF;
background-image: url('bg.jpg');
background-size: cover;
font-family: "Roboto Condensed";
}
body,html
{
padding: 0px;
margin: 0px;
width: 100%;
}
#shutdown
{
position: absolute;
right: 50px;
bottom: 50px;
cursor: pointer;
opacity: 0.5;
width: 96px;
transition: opacity ease 0.3s;
}
.error-icon
{
font-size: 1.1em;
font-weight: bold;
color: #F00;
}
#shutdown:hover
{
opacity: 1;
}
#users a.user
{
transition: opacity ease 0.15s;
}
a.user
{
text-align: center;
text-decoration: none;
color: white;
margin-top: 2em;
display: block;
}
.avatar
{
object-fit: cover;
width: 96px;
height: 96px;
border-radius: 48px;
}
.name
{
display: block;
}
#password_prompt, #password_entry
{
display: block;
font-size: 20px;
}
#users
{
position: absolute;
bottom: 50px;
left: 50px;
}
#message_container
{
font-size: 20px;
}
#password_entry
{
color: #333;
opacity: inherit;
background-color: #FFF;
padding: 0.2em;
border: 1px solid #DDD;
border-radius: 5px;
}
#message_container, #password_container
{
height: 96px;
display: table;
position: absolute;
padding-left: 2em;
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.15s, opacity 0.15s linear;
}
#password_container.shown, #message_container.shown
{
visibility: visible;
opacity: 1;
transition: opacity 0.15s linear 0.05s;
}
#message_label, #password_container > form
{
display: table-cell;
vertical-align: middle;
}
#date, #time
{
font-family: Roboto;
text-align: right;
color: #FFF;
}
#date
{
margin-top: 50px;
margin-right: 65px;
font-size: 50px;
}
#time
{
margin-right: 30px;
font-size: 240px;
}
#session_list
{
position: absolute;
top: 50px;
left: 50px;
border: 1px solid #DDD;
border-radius: 5px;
padding: 0.2em;
color: #333;
padding-right: 2em;
background: url('drop-down.svg') no-repeat right #FFF;
-webkit-appearance: none;
-moz-appearance: none; /* only for when testing */
}