Merge pull request #4337 from Icinga/feature/icinga-dark-theme-login

Feature/icinga dark theme login

application/forms/Authentication/LoginForm.php

@@ -50,7 +50,7 @@ class LoginForm extends Form
                 'autocapitalize'    => 'off',
                 'autocomplete'      => 'username',
                 'class'             => false === isset($formData['username']) ? 'autofocus' : '',
-                'label'             => $this->translate('Username'),
+                'placeholder'       => $this->translate('Username'),
                 'required'          => true
             )
         );
@@ -60,7 +60,7 @@ class LoginForm extends Form
             array(
                 'required'      => true,
                 'autocomplete'  => 'current-password',
-                'label'         => $this->translate('Password'),
+                'placeholder'   => $this->translate('Password'),
                 'class'         => isset($formData['username']) ? 'autofocus' : ''
             )
         );

application/layouts/scripts/body.phtml

@@ -3,6 +3,8 @@
 use Icinga\Web\Url;
 use Icinga\Web\Notification;
 use Icinga\Authentication\Auth;
+use ipl\Html\HtmlString;
+use ipl\Web\Widget\Icon;
 
 $moduleName = $this->layout()->moduleName;
 if ($moduleName !== 'default') {
@@ -70,7 +72,25 @@ if ($this->layout()->inlineLayout) {
     $notifications = Notification::getInstance();
     if ($notifications->hasMessages()) {
         foreach ($notifications->popMessages() as $m) {
-            echo '<li class="' . $m->type . '">' . $this->escape($m->message) . '</li>';
+            switch ($m->type) {
+                case 'success':
+                    $icon = new HtmlString(new Icon('check-circle'));
+                    break;
+                case 'error':
+                    $icon = new HtmlString(new Icon('times'));
+                    break;
+                case 'warning':
+                    $icon = new HtmlString(new Icon('exclamation-triangle'));
+                    break;
+                case 'info':
+                    $icon = new HtmlString(new Icon('info-circle'));
+                    break;
+                default:
+                    $icon = '';
+                    break;
+            }
+
+            echo '<li class="' . $m->type . '">' . $icon . $this->escape($m->message) . '</li>';
         }
     }
   ?></ul>

application/views/scripts/about/index.phtml

@@ -2,7 +2,7 @@
     <?= $tabs ?>
 </div>
 <div id="about" class="content content-centered">
-    <?= $this->img('img/icinga-logo-big-dark.png', null, array('width' => 320)) ?>
+    <?= $this->img('img/icinga-logo-big.svg', null, array('class' => 'icinga-logo', 'width' => 320)) ?>
     <dl class="name-value-list">
     <?php if (isset($version['appVersion'])): ?>
         <dt><?= $this->translate('Icinga Web 2 Version') ?></dt>

application/views/scripts/authentication/login.phtml

@@ -1,7 +1,5 @@
 <div id="login">
-    <div class="login-wrapper">
+    <div class="login-form" data-base-target="layout">
-        <div class="login-form centered-ghost" data-base-target="layout">
-            <div class="login-form-content centered-content">
         <div role="status" class="sr-only">
             <?= $this->translate(
                 'Welcome to Icinga Web 2. For users of the screen reader Jaws full and expectant compliant'
@@ -9,7 +7,7 @@
                 . ' Chrome, Safari and Firefox.'
             ) ?>
         </div>
-                <div class="logo-wrapper"><div id="icinga-logo" class="invert" aria-hidden="true"></div></div>
+        <div class="logo-wrapper"><div id="icinga-logo" aria-hidden="true"></div></div>
         <?php if ($requiresSetup): ?>
             <p class="config-note"><?= sprintf(
                 $this->translate(
@@ -28,7 +26,6 @@
             <?= $this->qlink($this->translate('icinga.com'), 'https://icinga.com') ?>
         </div>
     </div>
-        </div>
     <ul id="social">
         <li>
         <?= $this->qlink(
@@ -67,4 +64,10 @@
         </li>
     </ul>
 </div>
-</div>
+<div id="orb-analytics" class="orb" ><?= $this->img('img/orb-analytics.png'); ?></div>
+<div id="orb-automation" class="orb"><?= $this->img('img/orb-automation.png'); ?></div>
+<div id="orb-cloud" class="orb"><?= $this->img('img/orb-cloud.png'); ?></div>
+<div id="orb-icinga" class="orb"><?= $this->img('img/orb-icinga.png'); ?></div>
+<div id="orb-infrastructure"  class="orb"><?= $this->img('img/orb-infrastructure.png'); ?></div>
+<div id="orb-metrics" class="orb" ><?= $this->img('img/orb-metrics.png'); ?></div>
+<div id="orb-notifactions" class="orb"><?= $this->img('img/orb-notifications.png'); ?></div>

modules/monitoring/application/views/scripts/show/contact.phtml

@@ -13,7 +13,7 @@
 </div>
 <?php return; endif ?>
 
-  <table class="avp" style="width: 70%">
+  <table class="name-value-table">
     <tbody>
       <tr>
         <th style="width: 20%"></th>

modules/monitoring/public/css/module.less

@@ -7,21 +7,6 @@
   padding: .25em @gutter;
   line-height: 1.3;
 
-  &:before {
-    background: -webkit-linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
-    background:    -moz-linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
-    background:     -ms-linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
-    background:      -o-linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
-    background:         linear-gradient(bottom, @body-bg-color 0%, rgba(255,255,255,0) 100%);
-    content: "";
-    display: block;
-    height: 6px;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: -7px;
-  }
-
   .services-summary,
   .hosts-summary {
     float: right;
@@ -621,7 +606,7 @@ form.instance-features span.description, form.object-features span.description {
     text-align: left;
     margin-right: 0;
     width: @name-value-table-name-width;
-    color: @gray;
+    color: @text-color-light;
 
     label {
       font-size: inherit;

public/css/icinga/badges.less

@@ -8,7 +8,7 @@
   .bg-stateful();
   .rounded-corners();
 
-  background-color: @gray-light;
+  background-color: @gray;
   color: @badge-color;
   display: inline-block;
   font-family: @font-family-wide;

public/css/icinga/base.less

@@ -2,13 +2,15 @@
 
 // Black colors
 @black: #535353;
+@white: #fff;
 
 // Gray colors
-@gray: #7F7F7F;
+@gray: #c4c4c4;
-@gray-semilight: #A9A9A9;
+@gray-semilight: #888;
-@gray-light: #C9C9C9;
+@gray-light: #5c5c5c;
-@gray-lighter: #EEEEEE;
+@gray-lighter: #4b4b4b;
-@gray-lightest: #F7F7F7;
+@gray-lightest: #3a3a3a;
+
 @disabled-gray: #9a9a9a;
 
 
@@ -28,10 +30,10 @@
 @color-pending: #77aaff;
 
 // Icinga colors
-@icinga-blue: #0095BF;
+@icinga-blue: #00C3ED;
 @icinga-secondary: #EF4F98;
-@low-sat-blue: #dae3e6;
+@low-sat-blue: #404d72;
-@low-sat-blue-dark: #becbcf;
+@low-sat-blue-dark: #434374;
 @icinga-blue-light: #a5c4cd;
 @icinga-blue-dark: #0081a6;
 
@@ -42,27 +44,28 @@
 @color-notification-warning: @color-warning-handled;
 
 // Background color for <body>
-@body-bg-color: #fff;
+@body-bg-color: #282E39;
 
 // Text colors
-@text-color: @black;
+@text-color: @white;
 @text-color-inverted: @body-bg-color;
-@text-color-light: @gray;
+@text-color-light: fade(@text-color, 75%);
 @text-color-on-icinga-blue: @body-bg-color;
 
 // Text color on <a>
 @link-color: @text-color;
 
-@tr-active-color: #E5F9FF;
+@tr-active-color: rgba(0,195,237,0.5);
-@tr-hover-color: #F5FDFF;
+@tr-hover-color: rgba(0,195,237,0.2);
 
 // Menu colors
-@menu-bg-color: #494949;
+@menu-bg-color: #06062B;
-@menu-active-bg-color: #333;
+@menu-active-bg-color: #181742;
-@menu-flyout-bg-color: @body-bg-color;
+@menu-color: #DBDBDB;
-@menu-color: @text-color-inverted;
+@menu-active-color: @text-color;
 @menu-highlight-color: @icinga-blue;
 @menu-2ndlvl-color: #c4c4c4;
+@menu-2ndlvl-highlight-bg-color: @tr-hover-color;
 @menu-2ndlvl-highlight-color: @text-color-inverted;
 @menu-flyout-bg-color: @body-bg-color;
 @menu-flyout-color: @text-color;

public/css/icinga/controls.less

@@ -26,7 +26,7 @@ input.search {
   .transition(border 0.3s ease);
   .transition(background-image 0.2s ease);
 
-  background-image: url(../img/icons/search.png);
+  background-image: url(../img/icons/search_white.png);
   background-repeat: no-repeat;
   background-size: 1em 1em;
   background-position: .25em center;
@@ -113,7 +113,7 @@ input.search {
     }
 
     &.disabled {
-      color: @gray-light;
+      color: @disabled-gray;
       cursor: no-drop;
     }
 

public/css/icinga/forms.less

@@ -82,10 +82,6 @@ form.inline {
       margin-left: 0;
     }
 
-    .control-info {
-      opacity: .5;
-    }
-
     .errors {
       margin: 0;
     }
@@ -129,8 +125,8 @@ form.icinga-form.inline .control-label-group {
     margin-right: 0;
   }
 
-  &:hover:before {
+  &:hover {
-    color: black;
+    opacity: 1;
   }
 }
 

public/css/icinga/layout-structure.less

@@ -31,6 +31,18 @@ body {
   flex-direction: column;
   position: relative;
   z-index: 2;
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 1em;
+    background: linear-gradient(to left, rgba(0,0,0,.1), rgba(0,0,0,0));
+    z-index: 0;
+  }
 }
 
 #main {

public/css/icinga/layout.less

@@ -32,7 +32,7 @@
 }
 
 #header-logo-container {
-  background: @icinga-blue;
+  background: @menu-bg-color;
   height: 6em;
   padding: 1.25em;
   width: 16em;
@@ -200,37 +200,62 @@
   list-style-type: none;
   margin: 0;
   padding: 0;
+  padding-left: 12em;
 }
 
 #notifications > li {
-  background: no-repeat 1em center;
+  color: @text-color;
-  border-top: 1px solid @gray-light;
-  color: @body-bg-color;
   display: block;
   line-height: 2.5em;
-  padding-left: 3em;
+  border-left: .5em solid @gray-light;
+  background: @body-bg-color;
+  margin-bottom: 1px;
+  box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
+
+  .icon {
+    padding: .5em;
+    width: 3em;
+    text-align: center;
+  }
 
   &:hover {
     cursor: pointer;
   }
 
   &.error {
-    background-color: @color-notification-error;
+    border-color: @color-down;
-    background-image: url(../img/icons/error_white.png);
+    background: @color-down;
+    color: @body-bg-color;
+
+    .icon {
+      color: @body-bg-color;
+    }
   }
 
   &.info {
-    background-color: @color-notification-info;
+    border-color: @color-pending;
+
+    .icon {
+      color: @color-pending;
+    }
   }
 
   &.success {
-    background-color: @color-notification-success;
+    border-color: @color-ok;
-    background-image: url(../img/icons/success.png);
+
-    color: @text-color;
+    .icon {
+      color: @color-ok;
+    }
   }
 
   &.warning {
-    background-color: @color-notification-warning;
+    border-color: @color-warning;
+    background: @color-warning;
+    color: @body-bg-color;
+
+    .icon {
+      color: @body-bg-color;
+    }
   }
 }
 

public/css/icinga/login.less

@@ -3,19 +3,21 @@
 // Login page styles
 
 #login {
-
   height: 100%;
-  background-color: @icinga-blue;
+  background-color: @menu-bg-color;
   background-repeat:  no-repeat;
   background-position: center center;
-  background-image: url(../img/icingaweb2-background.jpg);
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   // fallback ie 9
   background-size: 100% 100%;
   background-size: cover;
 
   .login-wrapper {
     height: 100%;
-    max-width: 85em;
     padding: 0 1em;
     margin: 0 auto;
     z-index: 2;
@@ -23,24 +25,16 @@
   }
 
   .login-form {
+    width: 24em;
     position: relative;
-    background: white;
+    z-index: 10;
-    min-width: 288px;
-    height: 100%;
-    width: 33%;
-    box-shadow: 0 0 4em 1em rgba(0, 0, 0, 0.2);
-  }
-
-  .logo-wrapper {
-    position: absolute;
-    top: 1em; right: 1em; left: 1em;
   }
 
   #icinga-logo {
     width: 100%;
     max-width: 18em;
     height: auto;
-    margin: 0 auto;
+    margin: 0 auto 2em auto;
 
     &:after {
       content: "";
@@ -71,13 +65,12 @@
     padding: 0;
   }
 
-  .control-group {
+  .form-errors,
-    margin: 0 auto; // Center horizontally
+  input[type="text"],
+  input[type="password"] {
+    &:not(:last-child) {
+      margin-bottom: 1em;
     }
-
-  .control-group,
-  .form-errors {
-    width: 24em;
   }
 
   .control-label-group {
@@ -89,7 +82,6 @@
 
   input[type=password],
   input[type=text] {
-    border: solid 1px @gray-light;
     display: block;
     height: 2.5em;
     margin: 0;
@@ -108,8 +100,7 @@
   }
 
   .form-controls {
-    margin-bottom: 2em;
+    margin-top: 1.5em;
-    margin-top: 2em;
   }
 
   input[type=submit] {
@@ -197,27 +188,15 @@
 }
 
 #login-footer {
-  position: absolute;
+  padding: .5em 0;
-  right: 2em; bottom: .25em; left: 2em;
-  border-top: 1px solid @gray-light;
-  padding: .5em;
-  font-size: @font-size-small;
-
-  &:after {
-    content: "";
-    display: block;
-    clear: both;
-  }
 
   p {
-    float: left;
     margin-bottom: 0;
   }
 
   a {
-    float: right;
     font-weight: @font-weight-bold;
-    color: @icinga-blue;
+    color: @icinga-secondary;
 
     &:hover {
       text-decoration: none;
@@ -225,3 +204,151 @@
     }
   }
 }
+
+
+.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);
+  }
+}

public/css/icinga/main.less

@@ -324,7 +324,7 @@ a:hover > .icon-cancel {
     content: "";
     display: block;
     height: 2em;
-    background: linear-gradient(rgba(255,255,255,0), white);
+    background: linear-gradient(fade(@body-bg-color, 0), @body-bg-color);
     position: absolute;
     bottom: 0;
     left: 0;
@@ -337,7 +337,7 @@ a:hover > .icon-cancel {
 
   &:after {
     opacity: 0;
-    background: linear-gradient(rgba(238,238,238,0), #eee);
+    background: linear-gradient(fade(@body-bg-color, 0), @body-bg-color);
   }
 }
 

public/css/icinga/menu.less

@@ -11,7 +11,6 @@
 
 #menu {
   background-color: @menu-bg-color;
-  box-shadow: inset -.5em 0 1em rgba(0, 0, 0, .3);
   width: 100%;
   flex: 1;
   overflow: auto;
@@ -69,6 +68,8 @@
   color: @menu-color;
 
   &.active {
+    color: @menu-active-color;
+
     > a > .badge {
       display: none;
     }
@@ -91,7 +92,7 @@
 
   &:not(.selected) > a:hover,
   &:not(.selected) > a:focus {
-    background-color: mix(#000, @menu-bg-color, 20);
+    background-color: fade(@menu-bg-color, 50%)
   }
 
   // Balance icon weight for non active menu items
@@ -122,7 +123,7 @@
     position: absolute;
     right: -.75em;
 
-    background-color: #fff;
+    background-color: @body-bg-color;
     box-shadow: 0 0 1em 0 rgba(0,0,0,0.6);
     content: "";
     display: block;
@@ -162,10 +163,11 @@
     position: absolute;
     top: .5em;
     right: -.75em;
+    z-index: 3;
   }
 
   &.active > a {
-    color: @menu-color;
+    color: @menu-2ndlvl-highlight-color;
   }
 }
 
@@ -322,7 +324,7 @@
       }
 
       a.badge {
-         color: white;
+         color: @text-color-inverted;
          flex: 0 1 auto;
          margin-right: 1em;
          padding: .25em;
@@ -452,10 +454,11 @@ input[type=text].search-input {
   background: none;
   border: none;
   padding: 0;
-  color: @gray-light;
+  color: @text-color-light;
   position: absolute;
   bottom: 0.2em;
   right: 0;
+  z-index: 3;
 
   i {
     background-color: @body-bg-color;
@@ -497,11 +500,7 @@ html.no-js  #toggle-sidebar {
   &.nav-item:not(.badge-nav-item) {
     &:not(.selected):not(.active):hover,
     &:not(.selected):not(.active):focus {
-      background-color: darken(@menu-bg-color, 20);
+      background-color: @menu-2ndlvl-highlight-bg-color;
-
-      > a {
-        color: @menu-2ndlvl-highlight-color;
-      }
     }
   }
 }
@@ -519,7 +518,7 @@ html.no-js  #toggle-sidebar {
   }
 
   &.badge-nav-item a.badge {
-    color: white;
+    color: @text-color-inverted;
     flex: 0 1 auto;
     margin-right: 1em;
     padding: .25em;
@@ -534,11 +533,7 @@ html.no-js  #toggle-sidebar {
 #layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
   &.badge-nav-item:not(.selected) {
     &:hover {
-      background-color: darken(@menu-bg-color, 20);
+      background-color: @menu-2ndlvl-highlight-bg-color;
-
-      a {
-        color: white;
-      }
     }
   }
 }

public/css/icinga/responsive.less

@@ -118,71 +118,6 @@
   .dashboard > div.container {
     width: 100%;
   }
-
-  #login {
-    #icinga-logo {
-      max-width: 12em;
-    }
-
-    .login-wrapper {
-      padding: 0 1em;
-    }
-
-    .login-form {
-      width: 100%;
-    }
-
-    .login-form-content.centered-content {
-      max-width: 100%;
-    }
-  }
-
-  #social {
-    width: 100%;
-    text-align: center;
-    bottom: 3em;
-  }
-
-  #social > li a i {
-    color: gray;
-    text-shadow: none;
-  }
-}
-
-#layout.wide-layout {
-
-  .login-wrapper {
-    // use as centered-ghost
-    text-align: center;
-    vertical-align: middle;
-    letter-spacing: -.417em;
-  }
-
-  // use as centered-ghost
-  .login-wrapper:before {
-    content: "";
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-  }
-
-  // use as centered-ghost
-  .login-wrapper > * {
-    letter-spacing: normal;
-  }
-
-  .login-form {
-    // use as centered-content
-    display: inline-block;
-    vertical-align: middle;
-
-    // Style as box
-    width: 30em;
-    margin: 0;
-    border-radius: 1em;
-    height: auto;
-    padding: 12.5em 0 4em 0;
-  }
 }
 
 // Dashboard

public/css/icinga/setup.less

@@ -421,8 +421,8 @@ form#setup_requirements {
     height: 15em;
     margin: 1em;
     padding: 0.3em;
-    border: 1px solid #ccc;
+    border: 1px solid @gray-semilight;
-    background-color: snow;
+    background-color: @gray-lightest;
 
     .header {
       height: 2.5em;

public/css/icinga/tabs.less

@@ -3,7 +3,7 @@
 // Styles for tab navigation of containers
 
 .tabs {
-  background-color: @icinga-blue;
+  background-color: @menu-bg-color;
   letter-spacing: -0.417em;
 }
 
@@ -27,11 +27,11 @@
   }
 
   > a {
-    color: @body-bg-color;
+    color: @menu-color;
 
     &:hover {
       text-decoration: none;
-      background: rgba(0,0,0,.1);
+      background: fade(@body-bg-color, 50%);
     }
   }
 

public/css/themes/colorblind.less

@@ -1,15 +1,15 @@
 /*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */
 
-@color-ok: #CCFFD7;
+@color-ok: fade(#77E08E, 50%);
 @color-critical: #FE5566;
-@color-critical-handled: #FF99AA;
+@color-critical-handled: fade(#FE5566, 50%);
 @color-warning: #EAD010;
-@color-warning-handled: #FFF399;
+@color-warning-handled: fade(#EAD010, 50%);
 @color-unknown: #7791E0;
-@color-unknown-handled: #B8C6FF;
+@color-unknown-handled: fade(#7791E0, 50%);
 @color-unreachable: @color-unknown;
 @color-unreachable-handled: @color-unknown-handled;
-@color-pending: #000000;
+@color-pending:fade(#FFFFFF, 75%);
 
 /* Adapt font color to match handled / unhandled states and maintain readability with text-shadows */
 .badge {
@@ -18,34 +18,34 @@
 
 .state-ok,
 .state-up {
-  color: black;
+  color: @text-color;
 }
 .state-warning,
 .state-critical,
 .state-down,
 .state-unknown {
   &.handled {
-    color: black;
+    color: @text-color;
   }
 }
 .state-warning,
 .state-critical,
 .state-down,
 .state-unknown {
-  color: white;
+  color: @text-color-inverted;
 }
 .state-warning:not(.handled) {
-  text-shadow: 0 0 3px mix(#000000, @color-warning, 60);
+  text-shadow: 0 0 3px mix(@text-color, @color-warning, 60);
 }
 .state-critical:not(.handled),
 .state-down:not(.handled) {
-  text-shadow: 0 0 1px mix(#000000, @color-critical, 20);
+  text-shadow: 0 0 1px mix(@text-color, @color-critical, 20);
 }
 .state-unknown:not(.handled),
 .state-unreachable:not(.handled) {
-  text-shadow: 0 0 1px mix(#000000, @color-unknown, 20);
+  text-shadow: 0 0 1px mix(@text-color, @color-unknown, 20);
 }
-
+:
 .processinfo .process > div.backend-running {
   color: @text-color;
 }

public/css/themes/high-contrast.less

@@ -2,6 +2,15 @@
 
 @icinga-blue: #006D8C;
 
+// Gray colors
+@gray: #7F7F7F;
+@gray-semilight: #A9A9A9;
+@gray-light: #C9C9C9;
+@gray-lighter: #EEEEEE;
+@gray-lightest: #F7F7F7;
+@disabled-gray: #9a9a9a;
+
+// State colors
 @color-ok: #006400;
 @color-critical: #EE0000;
 @color-critical-handled: #EE0000;
@@ -13,6 +22,12 @@
 @color-unreachable-handled: #800080;
 @color-pending: #0000EE;
 
+// Icinga colors
+@low-sat-blue: #dae3e6;
+
+// Background color for <body>
+@body-bg-color: @white;
+
 @text-color: #191919;
 @text-color-light: #555555;
 
@@ -26,8 +41,18 @@
   }
 }
 
+#menu ul.nav-level-1 > .nav-item.active > a,
+#menu .nav-level-1 > .nav-item.active:not(.selected) > a:hover {
+  color: @text-color;
+  background-color: @white;
+}
+
 #menu .nav-level-2 > .nav-item.active {
-  background-color: black;
+  background-color: @white;
+
+  a {
+    color: @text-color;
+  }
 
   > a:focus, > a:hover {
     opacity: 1;
@@ -48,37 +73,53 @@
   text-decoration: underline;
 }
 
-.badge {
+.badge:not(.handled),
-  background-color: @text-color-light;
+.state-badge:not(.handled) {
+  &.state-warning {
+    border: 1px solid @color-warning;
   }
 
-.badge.handled {
+  &.state-critical,
+  &.state-down {
+    border: 1px solid @color-critical;
+  }
+
+  &.state-unreachable {
+    border: 1px solid @color-unreachable;
+  }
+
+  &.state-unknown {
+    border: 1px solid @color-unknown;
+  }
+
+  &.state-ok,
+  &.state-up {
+    border: 1px solid @color-ok;
+  }
+}
+
+.badge.handled,
+.badge.state-ok,
+.state-badge.handled,
+.state-badge.state-ok {
   background-color: @body-bg-color !important;
-  color: @text-color;
+  color: @text-color !important;
 
   &.state-warning {
     border: 1px solid @color-warning-handled;
-    margin-top: -1px;
-  }
-
-  &.state-critical {
-    border: 1px solid @color-critical-handled;
-    margin-top: -1px;
   }
 
+  &.state-critical,
   &.state-down {
     border: 1px solid @color-critical-handled;
-    margin-top: -1px;
   }
 
   &.state-unreachable {
     border: 1px solid @color-unreachable-handled;
-    margin-top: -1px;
   }
 
   &.state-unknown {
     border: 1px solid @color-unknown-handled;
-    margin-top: -1px;
   }
 }
 
@@ -147,7 +188,8 @@
   }
 }
 
-.icinga-controls {
+.icinga-controls,
+.search-editor {
   input:not([type="checkbox"]):not([type="radio"]),
   .toggle-switch .toggle-slider:before,
   .toggle-switch > .toggle-slider,
@@ -162,3 +204,30 @@
     margin: 1px;
   }
 }
+
+.icinga-module.module-icingadb .list-item.overdue {
+  background: none;
+
+  header > *:not(time),
+  .caption {
+    opacity: 1;
+  }
+}
+
+.controls input.search,
+input.search {
+  background-image: url(../img/icons/search.png);
+}
+
+.search-bar,
+.button-link {
+  border: 1px solid @icinga-blue;
+}
+
+.view-mode-switcher > label {
+  border: 1px solid @icinga-blue;
+
+  &:not(:first-of-type) {
+    border-left: none;
+  }
+}

public/css/themes/icinga-light-theme.less

@@ -0,0 +1,50 @@
+
+@original-menu-bg-color: #06062B;
+@original-low-sat-blue: #404d72;
+
+@gray: #7F7F7F;
+@gray-semilight: #A9A9A9;
+@gray-light: #C9C9C9;
+@gray-lighter: #EEEEEE;
+@gray-lightest: #F7F7F7;
+
+@text-color: #535353;
+
+@body-bg-color: #F5F9FA;
+@menu-bg-color: #DEECF1;
+
+@menu-color: #676767;
+@menu-active-bg-color: #EDF7FC;
+
+@menu-2ndlvl-color: #7E8182;
+
+@low-sat-blue: #DEECF1;
+@low-sat-blue-dark: #c0cccd;
+
+#header-logo,
+#mobile-menu-logo,
+#about .icinga-logo {
+  filter: brightness(0.415) sepia(1) ~"saturate(0.1)" hue-rotate(144deg);
+}
+
+#menu input.search,
+.controls input.search,
+input.search {
+  background-image: url(../img/icons/search.png);
+}
+
+#login {
+  background-color: @original-menu-bg-color;
+
+  input[type=password],
+  input[type=text] {
+    background-color: @original-low-sat-blue;
+  }
+}
+
+.container {
+  &:before,
+  > .content:before {
+    background-image: url(../img/icinga-loader-light.gif)
+  }
+}

public/img/icinga-logo-compact-inverted.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 41 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <g>
+        <path d="M17.444,16.237L9.477,27.661M17.444,16.237L33.957,12.164M17.757,16.572L22.381,24.296M15.795,14.324L9.01,8.77M18.425,13.096L22.419,4.799" style="fill:none;fill-rule:nonzero;stroke:rgb(126,129,130);stroke-width:0.75px;"/>
+        <path d="M5.234,28.221C5.083,26.219 6.585,24.474 8.588,24.324C10.591,24.171 12.337,25.675 12.486,27.677C12.636,29.679 11.136,31.425 9.133,31.575C7.13,31.726 5.384,30.224 5.234,28.221" style="fill:rgb(126,129,130);fill-rule:nonzero;"/>
+        <path d="M21.246,24.377C21.317,23.756 21.878,23.312 22.5,23.383C23.121,23.455 23.565,24.017 23.494,24.637C23.42,25.258 22.86,25.702 22.24,25.631C21.619,25.56 21.174,24.998 21.246,24.377M7.546,9.604C7.155,8.805 7.486,7.839 8.286,7.449C9.085,7.057 10.05,7.389 10.442,8.188C10.832,8.987 10.502,9.953 9.702,10.343C8.902,10.734 7.938,10.402 7.546,9.604M31.367,12.036C31.275,10.821 32.186,9.762 33.403,9.669C34.618,9.578 35.678,10.489 35.77,11.705C35.861,12.921 34.95,13.98 33.733,14.072C32.518,14.163 31.458,13.252 31.367,12.036M21.386,0.631C22.588,-0.348 24.359,-0.168 25.34,1.034C26.32,2.236 26.139,4.008 24.937,4.988C23.734,5.967 21.963,5.786 20.984,4.584C20.002,3.381 20.184,1.611 21.386,0.631M13.79,11.561C16.099,9.679 19.499,10.025 21.384,12.334C23.264,14.644 22.918,18.043 20.61,19.928C18.298,21.808 14.899,21.463 13.018,19.152C11.132,16.843 11.481,13.442 13.79,11.561" style="fill:rgb(126,129,130);fill-rule:nonzero;"/>
+    </g>
+</svg>

public/img/select-icon.svg

@@ -1,6 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<svg height="32" viewBox="0 0 24 32" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m5.20126707.78766623 4.45386238 4.20402191c.16721345.15783356.16291017.40979541-.00961164.56277256-.081158.0719638-.18974398.11220597-.3027668.11220597h-8.90772462c-.24025844 0-.43502639-.17818569-.43502639-.39798892 0-.10340014.04398717-.20274128.12264801-.27698961l4.45386234-4.20402191c.16721345-.15783357.44262326-.16177048.61514507-.00879333.00325382.00288518.00645805.00581661.00961165.00879333z" fill="#00c3ed" transform="matrix(1 0 0 -1 7 20.666667)"/></svg>
-<svg width="253px" height="313px" viewBox="0 0 253 313" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="select-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <path d="M130.590338,127.704317 L181.781053,180.520134 C183.70293,182.503023 183.65347,185.668461 181.670581,187.590338 C180.737787,188.494431 179.489748,189 178.190714,189 L75.8092858,189 C73.0478621,189 70.8092858,186.761424 70.8092858,184 C70.8092858,182.700967 71.3148548,181.452928 72.2189475,180.520134 L123.409662,127.704317 C125.331539,125.721428 128.496977,125.671968 130.479866,127.593845 C130.517264,127.630092 130.554092,127.66692 130.590338,127.704317 Z" id="triangle" fill="#0095BF" transform="translate(127.000000, 156.500000) scale(1, -1) translate(-127.000000, -156.500000) "></path>
-    </g>
-</svg>