CSS: Modernize login style

public/css/icinga/login.less

@@ -3,21 +3,52 @@
 // Login page styles
 
 #login {
-  #icinga-logo {
+
-    .fadein();
+  height: 100%;
+  background-color: @icinga-blue;
+  background-image: radial-gradient(#2CABD7 20%, #01527F 100%);
+//   background: url('../img/icinga-hero-background.jpg') center center;
+  background-size: cover;
+
+  .login-wrapper {
+    height: 100%;
+    max-width: 85em;
+    padding: 0 2em;
+    margin: 0 auto;
+    z-index: 2;
+    position: relative
   }
 
-  background-color: @icinga-blue;
+  .login-form {
+    position: relative;
+    background: white;
+    min-width: 320px;
+    height: 100%;
+    width: 33%;
+    box-shadow: 0 0 4em 2em rgba(0,0,0,.4);
+  }
+
+  #icinga-logo {
+    width: 80%;
+    position: absolute;
+    top: 1em; left: 10%;
+    height: auto;
+
+    &:after {
+      content: "";
+      display: block;
+      width: 100%;
+      padding-bottom: 35%;
+    }
+  }
 
   .control-label {
-    color: @body-bg-color;
     font-size: 1em;
     line-height: @line-height;
   }
 
   .errors {
     background-color: @color-critical;
-    color: @body-bg-color;
     font-size: @font-size-small;
     margin: 2em 0 0 0;
 
@@ -40,11 +71,7 @@
 
   input[type=password],
   input[type=text] {
-    background-color: @gray-light; // IE8 fallback
+    border: solid 1px @gray-light;
-    background-color: rgba(255,255,255,0.2);
-    border: none;
-    border-bottom: solid 3px @body-bg-color;
-    color: @body-bg-color;
     display: block;
     height: 2.5em;
     margin: 0;
@@ -53,10 +80,7 @@
 
     &:focus {
       .rounded-corners(3px);
-      background-color: @body-bg-color;
-      border: none;
       border-radius: 0;
-      color: @icinga-blue;
       padding-bottom: 3px;
     }
   }
@@ -67,14 +91,20 @@
   }
 
   input[type=submit] {
-    .button(@icinga-blue, @body-bg-color);
+    border-radius: .25em;
+    background: @icinga-secondary;
+    color: white;
+    border: none;
     height: 2.5em;
     margin: 0;
     width: 100%;
+
+    &:hover {
+      background-color: darken(@icinga-secondary, 10)
+    }
   }
 
   .config-note {
-    color: white;
     background-color: @color-critical;
     margin: 0 auto 2em auto; // Center horizontally w/ bottom margin
     max-width: 50%;
@@ -88,16 +118,77 @@
   }
 }
 
+#social {
+  position: fixed;
+  right: 1em; bottom: 1em;
+  letter-spacing: -.417em;
+
+  > * {
+    letter-spacing: normal;
+  }
+
+  > li {
+    display: inline-block;
+
+    a {
+      display: block;
+      -webkit-transform: scale(1, 1);
+         -moz-transform: scale(1, 1);
+          -ms-transform: scale(1, 1);
+              transform: scale(1, 1);
+    }
+
+    i {
+      font-size: 3em;
+      color: white;
+      text-shadow: 0 0 .5em @deep-black;
+    }
+  }
+
+  > li a:hover {
+    -webkit-transform: scale(1.2, 1.2);
+       -moz-transform: scale(1.2, 1.2);
+        -ms-transform: scale(1.2, 1.2);
+            transform: scale(1.2, 1.2);
+  }
+
+  li:not(:last-child) {
+    margin-right: 2em;
+  }
+}
+
 #login-footer {
-  color: @body-bg-color;
+  position: absolute;
+  right: 2em; bottom: .25em; left: 2em;
+  border-top: 1px solid @gray-light;
+  padding: .5em;
   font-size: @font-size-small;
 
-  a {
+  &:after {
-    font-weight: @font-weight-bold;
+    content: "";
+    display: block;
+    clear: both;
+  }
 
-    // Social links
+  p {
-    &:hover > i {
+    float: left;
-      color: @text-color;
+    margin-bottom: 0;
+  }
+
+  a {
+    float: right;
+    font-weight: @font-weight-bold;
+    color: @icinga-blue;
+
+    &:hover {
+      text-decoration: none;
+      color: darken(@icinga-blue, 10);
     }
   }
 }
+
+canvas.particles-js-canvas-el {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  z-index: 1;
+}