diff --git a/public/css/icinga/login.less b/public/css/icinga/login.less index 1c06f9aaa..27f3605c7 100644 --- a/public/css/icinga/login.less +++ b/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: 2em; + margin-top: 1.5em; } input[type=submit] { @@ -173,9 +174,9 @@ display: block; text-decoration: none; -webkit-transform: scale(1, 1); - -moz-transform: scale(1, 1); - -ms-transform: scale(1, 1); - transform: scale(1, 1); + -moz-transform: scale(1, 1); + -ms-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); - -ms-transform: scale(1.2, 1.2); - 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) { @@ -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); + } +} \ No newline at end of file