diff --git a/library/Icinga/Web/StyleSheet.php b/library/Icinga/Web/StyleSheet.php index 53b56bd14..0c4900f7d 100644 --- a/library/Icinga/Web/StyleSheet.php +++ b/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) : ''; diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less index 74435b562..9450ce6a9 100644 --- a/public/css/icinga/base.less +++ b/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; diff --git a/public/css/icinga/login-orbs.less b/public/css/icinga/login-orbs.less new file mode 100644 index 000000000..b0426dd5e --- /dev/null +++ b/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; +} diff --git a/public/css/icinga/login.less b/public/css/icinga/login.less index 7b76c3069..f721d3742 100644 --- a/public/css/icinga/login.less +++ b/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; } diff --git a/public/css/icinga/mixins.less b/public/css/icinga/mixins.less index 2a7619b95..4268a49e8 100644 --- a/public/css/icinga/mixins.less +++ b/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; } diff --git a/public/css/themes/solarized-dark.less b/public/css/themes/solarized-dark.less index 04fd0e67d..39493e239 100644 --- a/public/css/themes/solarized-dark.less +++ b/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 { diff --git a/public/img/icingaweb2-background-orbs.jpg b/public/img/icingaweb2-background-orbs.jpg index fa4b71d21..bb6d40ed2 100644 Binary files a/public/img/icingaweb2-background-orbs.jpg and b/public/img/icingaweb2-background-orbs.jpg differ