diff --git a/css/lightdm-uestibulum.scss b/css/lightdm-uestibulum.scss new file mode 100644 index 0000000..af3c316 --- /dev/null +++ b/css/lightdm-uestibulum.scss @@ -0,0 +1,276 @@ +@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; + } +}*/ diff --git a/img/afternoon.jpg b/img/afternoon.jpg new file mode 100644 index 0000000..1fe4518 Binary files /dev/null and b/img/afternoon.jpg differ diff --git a/img/background.jpg b/img/evening.jpg similarity index 100% rename from img/background.jpg rename to img/evening.jpg diff --git a/img/morning.jpg b/img/morning.jpg new file mode 100644 index 0000000..a58c21d Binary files /dev/null and b/img/morning.jpg differ diff --git a/img/night.gif b/img/night.gif new file mode 100644 index 0000000..6ed8ac8 Binary files /dev/null and b/img/night.gif differ diff --git a/index.html b/index.html index 26c3ca4..ce4e9b1 100644 --- a/index.html +++ b/index.html @@ -9,19 +9,57 @@
-