183 lines
3.0 KiB
SCSS
183 lines
3.0 KiB
SCSS
//@import url('https://fonts.googleapis.com/css?family=Abel|Aldrich|Audiowide|Black+Ops+One|Cherry+Cream+Soda|Exo|Exo 2|Graduate|Josefin+Sans|Kelly+Slab|Michroma|Monoton|Nixie+One|Open+Sans+Condensed:300|Orbitron|Poiret+One|Press+Start+2P|Prompt|Rajdhani|Raleway|Russo+One|Signika|Syncopate|Teko');
|
|
|
|
@font-face {
|
|
font-family: Exo2;
|
|
src: local("Exo 2"), url(../fonts/Exo2-Medium.ttf);
|
|
}
|
|
|
|
* { margin: 0; padding: 0; }
|
|
|
|
h1 { font-size: 1.5vw; }
|
|
h2 { font-size: 1vw; }
|
|
|
|
body {
|
|
color: white;
|
|
font-family: Exo2
|
|
}
|
|
|
|
#background-image {
|
|
opacity: 1;
|
|
display: block;
|
|
transition: 1s;
|
|
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
#ui-container {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
#power-panel {
|
|
background: rgba(8, 8, 8, 0.3);
|
|
box-shadow: 0px 0px 0.5vw 0.5vw rgba(8, 8, 8, 0.3);
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
|
|
position: absolute;
|
|
bottom: 2vw;
|
|
right: 2vw;
|
|
z-index: 100;
|
|
|
|
#power-options {
|
|
border-radius: 10px;
|
|
padding: 0.5vw;
|
|
transition: 1s;
|
|
display: none;
|
|
|
|
ul {
|
|
list-style: none;
|
|
|
|
li {
|
|
margin-bottom: 1vw;
|
|
font-size: 1.5vw;
|
|
|
|
i { margin-right: 0.5vw; }
|
|
|
|
&:last-child { margin-bottom: 0; }
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&.active {
|
|
bottom: 1vw;
|
|
#power-options { display: block; }
|
|
#power-button { display: none; }
|
|
}
|
|
}
|
|
|
|
#login-panel {
|
|
|
|
z-index: 2;
|
|
|
|
input[type=password] {
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 2px solid white;
|
|
color: white;
|
|
font-size: 1vw;
|
|
margin-top: 0.5em;
|
|
opacity: 0;
|
|
transition: 0.5s;
|
|
width: 20em;
|
|
|
|
&.active { opacity: 0.5; }
|
|
}
|
|
|
|
#users {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
i {
|
|
opacity: 0;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
&:hover i { opacity: 1; }
|
|
|
|
#users-list {
|
|
list-style: none;
|
|
display: none;
|
|
}
|
|
|
|
&.select-user {
|
|
#user-display, i { display: none; }
|
|
#users-list { display: inline-block; }
|
|
}
|
|
}
|
|
|
|
#fail-msg {
|
|
color: red;
|
|
opacity: 0;
|
|
transition: 0.5s;
|
|
|
|
position: relative;
|
|
left: -1vw;
|
|
}
|
|
}
|
|
|
|
#session-panel {
|
|
opacity: 0.2;
|
|
transition: 0.5s;
|
|
z-index: 2;
|
|
&:hover { opacity: 1 };
|
|
|
|
#sessions-list li { display: inline-block; }
|
|
|
|
}
|
|
|
|
|
|
#sessions {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
#sessions-list {
|
|
list-style: none;
|
|
display: none;
|
|
}
|
|
|
|
&.select-session {
|
|
#session-display { display: none; }
|
|
#sessions-list { display: inline-block; }
|
|
}
|
|
}
|
|
|
|
@keyframes throb {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
#checking-credentials {
|
|
opacity: 0;
|
|
.c1, .c2, .c3 { animation: alternate infinite 2s throb; }
|
|
.c2 { animation-delay: 200ms; }
|
|
.c3 { animation-delay: 400ms; }
|
|
}
|
|
|
|
#login-panel.checking #checking-credentials { opacity: 1; }
|
|
|
|
.failed-auth {
|
|
input[type=password] {
|
|
color: red;
|
|
border-color: red !important;
|
|
}
|
|
#fail-msg { opacity: 1 !important; }
|
|
}
|
|
|
|
.lock-screen {
|
|
#session-panel { display: none !important; }
|
|
}
|
|
|
|
.throb { animation: alternate infinite 2s throb; }
|