login.less: Implement login animation

public/css/icinga/login.less

@@ -8,7 +8,6 @@
   background-color: @menu-bg-color;
   background-repeat:  no-repeat;
   background-position: center center;
-  background-image: url(../img/icingaweb2-background-orbs.jpg);
 
   // fallback ie 9
   background-size: 100% 100%;
@@ -79,6 +78,10 @@
   .control-group,
   .form-errors {
     width: 24em;
+
+    &:not(:last-child) {
+      margin-bottom: 1em;
+    }
   }
 
   .control-label-group {
@@ -90,7 +93,6 @@
 
   input[type=password],
   input[type=text] {
-    border: solid 1px @gray-light;
     display: block;
     height: 2.5em;
     margin: 0;
@@ -109,8 +111,7 @@
   }
 
   .form-controls {
-    margin-bottom: 2em;
+    margin-top: 1.5em;
-    margin-top: 2em;
   }
 
   input[type=submit] {
@@ -173,9 +174,9 @@
       display: block;
       text-decoration: none;
       -webkit-transform: scale(1, 1);
-         -moz-transform: scale(1, 1);
+      -moz-transform: scale(1, 1);
-          -ms-transform: scale(1, 1);
+      -ms-transform: scale(1, 1);
-              transform: scale(1, 1);
+      transform: scale(1, 1);
     }
 
     i {
@@ -187,9 +188,9 @@
 
   > li a:hover {
     -webkit-transform: scale(1.2, 1.2);
-       -moz-transform: scale(1.2, 1.2);
+    -moz-transform: scale(1.2, 1.2);
-        -ms-transform: scale(1.2, 1.2);
+    -ms-transform: scale(1.2, 1.2);
-            transform: scale(1.2, 1.2);
+    transform: scale(1.2, 1.2);
   }
 
   li:not(:last-child) {
@@ -226,3 +227,150 @@
     }
   }
 }
+
+
+.orb {
+  position: absolute;
+  pointer-events: none;
+
+  animation: pulse 5s;
+
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+
+  transform-origin: center center;
+}
+
+.orb img {
+  height: auto;
+  width: 100%;
+}
+
+#orb-analytics {
+  top: -19%;
+  width: 25%;
+  left: 22.5%;
+  z-index: 0;
+
+  animation-name: pulseIntensely;
+
+  animation-duration: 7s;
+  animation-delay: -1s;
+  animation-direction: alternate-reverse;
+}
+
+#orb-analytics img {
+  opacity: .2;
+}
+
+#orb-automation {
+  bottom: -6%;
+  width: 60%;
+  left: 7%;
+  z-index: 0;
+  margin-left: -30%;
+  margin-bottom: -30%;
+
+
+  animation-duration: 2s;
+  animation-delay: -.5s
+}
+
+#orb-automation img {
+  opacity: .75;
+}
+
+#orb-cloud {
+  top: -6%;
+  width: 25%;
+  right: 4%;
+  z-index: 0;
+  margin-right: -12.5%;
+  margin-top: -12.5%;
+
+  animation-duration: 5s;
+  animation-delay: -.75s;
+}
+
+#orb-cloud img {
+  opacity: .4;
+}
+
+#orb-notifactions {
+  top: 7%;
+  right: 46%;
+  width: 10%;
+  margin: -5%;
+
+  animation-duration: 2s;
+  animation-delay: -.75s;
+}
+
+#orb-notifactions img {
+  opacity: .5;
+}
+
+#orb-metrics {
+  left: 5%;
+  top: 20%;
+  width: 35%;
+  margin: -17.5%;
+
+  animation-name: pulseIntensely;
+  animation-duration: 5s;
+  animation-delay: -1s;
+}
+
+#orb-metrics img {
+  opacity: .5;
+}
+
+#orb-icinga {
+  top: 50%;
+  right: 19%;
+  width: 75%;
+  margin: -37.5%;
+  z-index: 0;
+}
+
+#orb-icinga img {
+  opacity: .8;
+}
+
+#orb-infrastructure {
+  top: -36%;
+  left: -15%;
+  width: 30%;
+
+  animation-duration: 2s;
+  animation-delay: -1.5s;
+}
+
+#orb-infrastructure img {
+  opacity: .6;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: .75;
+    transform: scale3d(1, 1, 1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale3d(1.05, 1.05, 1);
+  }
+}
+
+@keyframes pulseIntensely {
+  0% {
+    opacity: .25;
+    transform: scale3d(1, 1, 1);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale3d(1.25, 1.25, 1);
+  }
+}