css: Disable login orb animation and all orbs for themes

fixes #4437

library/Icinga/Web/StyleSheet.php

@@ -28,6 +28,18 @@ class StyleSheet
      */
     const DEFAULT_MODE = 'dark';
 
+    /**
+     * The themes that are compatible with the default theme
+     *
+     * @var array
+     */
+    const THEME_WHITELIST = [
+        'colorblind',
+        'high-contrast',
+        'solarized-dark',
+        'Winter'
+    ];
+
     /**
      * RegEx pattern for matching full css @media query of theme mode
      *
@@ -163,6 +175,10 @@ class StyleSheet
             $this->lessCompiler->setTheme($themePath);
         }
 
+        if (! $themePath || in_array($theme, self::THEME_WHITELIST, true)) {
+            $this->lessCompiler->addLessFile('css/icinga/login-orbs.less');
+        }
+
         $mode = 'none';
         if ($user = Auth::getInstance()->getUser()) {
             $file = $themePath !== null ? file_get_contents($themePath) : '';

public/css/icinga/base.less

@@ -85,6 +85,7 @@
 @form-info-bg-color: fade(@color-ok, 20%);
 @form-error-bg-color: fade(@color-critical, 30%);
 @form-warning-bg-color: fade(@color-warning, 40%);
+@login-box-background: fade(#0B0B2F, 30%);
 
 // Other colors
 @color-granted: #59cd59;

public/css/icinga/login-orbs.less

@@ -0,0 +1,104 @@
+/*! Icinga Web 2 | (c) 2021 Icinga GmbH | GPLv2+ */
+
+#login {
+  background-image: none;
+
+  .login-form {
+    background: none;
+    box-shadow: none;
+  }
+}
+
+.orb {
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  transform-origin: center center;
+}
+
+.orb img {
+  height: auto;
+  width: 100%;
+}
+
+#orb-analytics {
+  top: -19%;
+  width: 25%;
+  left: 22.5%;
+  z-index: 0;
+}
+
+#orb-analytics img {
+  opacity: .2;
+}
+
+#orb-automation {
+  bottom: -6%;
+  width: 60%;
+  left: 7%;
+  z-index: 0;
+  margin-left: -30%;
+  margin-bottom: -30%;
+}
+
+#orb-automation img {
+  opacity: .75;
+}
+
+#orb-cloud {
+  top: -6%;
+  width: 25%;
+  right: 4%;
+  z-index: 0;
+  margin-right: -12.5%;
+  margin-top: -12.5%;
+}
+
+#orb-cloud img {
+  opacity: .4;
+}
+
+#orb-notifactions {
+  top: 7%;
+  right: 46%;
+  width: 10%;
+  margin: -5%;
+}
+
+#orb-notifactions img {
+  opacity: .5;
+}
+
+#orb-metrics {
+  left: 5%;
+  top: 20%;
+  width: 35%;
+  margin: -17.5%;
+}
+
+#orb-metrics img {
+  opacity: .5;
+}
+
+#orb-icinga {
+  left: 50%;
+  top: 50%;
+  margin-top: -38.5em;
+  margin-left: -38em;
+  width: 75em;
+  z-index: 0;
+}
+
+#orb-icinga img {
+  opacity: .8;
+}
+
+#orb-infrastructure {
+  top: -36%;
+  left: -15%;
+  width: 30%;
+}
+
+#orb-infrastructure img {
+  opacity: .6;
+}

public/css/icinga/login.less

@@ -5,21 +5,21 @@
 #login {
   height: 100%;
   .var(background-color, menu-bg-color);
+  background-image: url(../img/icingaweb2-background-orbs.jpg);
   background-repeat:  no-repeat;
-  background-position: center center;
+  background-size: cover;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
 
-  // fallback ie 9
-  background-size: 100% 100%;
-  background-size: cover;
-
   .login-form {
-    width: 24em;
+    width: 36em;
     position: relative;
     z-index: 10;
+    padding: 2em 6em;
+    .var(background-color, login-box-background);
+    .box-shadow(0, 0, 1em, 1em, ~"var(--login-box-background, @{login-box-background})");
   }
 
   #icinga-logo {
@@ -173,150 +173,6 @@
   }
 }
 
-
 .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 {
-  left: 50%;
-  top: 50%;
-  margin-top: -37.5em;
-  margin-left: -37.5em;
-  width: 75em;
-  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);
-  }
+  display: none;
 }

public/css/icinga/mixins.less

@@ -1,8 +1,11 @@
 /*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */
 
 .box-shadow(@x: 0.2em; @y: 0.2em; @blur: 0.2em; @spread: 0; @color: rgba(83, 83, 83, 0.25)) {
+  -webkit-box-shadow: @x @y @blur @spread extract-variable-default(@color);
   -webkit-box-shadow: @arguments;
+     -moz-box-shadow: @x @y @blur @spread extract-variable-default(@color);
      -moz-box-shadow: @arguments;
+          box-shadow: @x @y @blur @spread extract-variable-default(@color);
           box-shadow: @arguments;
 }
 

public/css/themes/solarized-dark.less

@@ -102,16 +102,7 @@ input, select {
 }
 
 #login {
-  background: @base02;
-
-  .control-label {
-    color: @base0;
-  }
-
-  input[type=submit] {
-    color: @base0;
-    background-color: @base02;
-  }
+  background: #06062B;
 }
 
 #login-footer {