lightdm-uestibulum/css/lightdm-uestibulum.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');

* { margin: 0; padding: 0; }

h1 { font-size: 1.5vw; }
h2 { font-size: 1vw; }

$colorFG: white;
$colorBG: black;
$colorAccent: orange;

body {
  color: $colorFG;
  font-family: 'Exo 2'
}

.bg {
  display: block;
  opacity: 0;
  transition: 1s;

  position: fixed;
  width: 100%;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.morning #bg-morning { opacity: 1; }
.afternoon #bg-afternoon { opacity: 1; }
.evening #bg-evening { opacity: 1; }
.night #bg-night { opacity: 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; }
  }
}

#clock-panel {
  background: rgba(0, 0, 0, 0.3);
  font-size: 6vw;
  font-weight: 500;
  padding: 1vw 2vw;
  width: 100%;
  z-index: 1;
}

#login-panel {

  z-index: 2;

  input[type=password] {
    background: none;
    border: none;
    border-bottom: 2px solid $colorFG;
    color: $colorFG;
    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; }
  }
}

.failed-auth {
  input[type=password] {
    color: red;
    border-color: red !important;
  }
  #fail-msg { opacity: 1 !important; }
}

@keyframes throb {
  from { opacity: 1; }
  to { opacity: 0; }
}

.throb { animation: alternate infinite 2s throb; }


.evening {
  #clock-panel {
    border-bottom: 2px solid $colorFG;
    text-align: right;

    position: absolute;
    right: 0;
    top: 0;
  }

  #login-panel {
    position: absolute;
    bottom: 2vw;
    left: 1vw;
  }

  #session-panel {
    position: absolute;
    bottom: 0.5vw;
    left: 1vw;
  }
}

.morning, .night, .afternoon {
  #clock-panel {
    border-top: 2px solid $colorFG;

    position: absolute;
    left: 0;
    bottom: 0;
  }

  #login-panel {
    position: absolute;
    bottom: 2vw;
    left: 20vw;
  }

  #session-panel {
    position: absolute;
    bottom: 0.5vw;
    left: 20vw;
  }
}

.morning {
  #clock-panel { text-shadow: 0 0 0.2vw #446688; }
  #users:hover #user-display, #sessions:hover #session-display,
  #users-list li:hover, #sessions-list li.session:hover {
    color: #0088aa;
    text-shadow: 0 0 0.5vw black;
  }
  #power-panel { opacity: 0.7; }
}

.afternoon {
  #clock-panel { text-shadow: 0 0 2vw #448844; }
  #users:hover #user-display, #sessions:hover #session-display,
  #users-list li:hover, #sessions-list li.session:hover {
    color: #00aa00;
    text-shadow: 0 0 0.5vw black;
  }
}

.evening {
  #clock-panel { text-shadow: 0 0 2vw #faaa3b; }
  #users:hover #user-display, #sessions:hover #session-display,
  #users-list li:hover, #sessions-list li.session:hover {
    color: orange;
    text-shadow: 0 0 0.5vw black;
  }
  #power-panel { opacity: 0.7; }
}

.night {
  #clock-panel { text-shadow: 0 0 2vw #884488; }
  #users:hover #user-display, #sessions:hover #session-display,
  #users-list li:hover, #sessions-list li.session:hover {
    color: #8822bb;
    text-shadow: 0 0 0.2vw black;
  }
}

/*.night {
  #clock-panel {

  }

  #login-panel {
    position: absolute;
    bottom: 2vw;
    left: 2vw;
  }
}*/