js/loader + css: highlight containers loading slow

I missused the "impact" CSS class for this as it perfectly fit's this
use case. A container loading slow IS an impact. Added CSS transitions,
this way it feels better on modern browsers. The longer it takes to
load a page the darker will get it's background.

public/css/icinga/layout-colors.less

@@ -26,14 +26,18 @@
   background-color: white;
 }
 
-.container {
-  background-color: white;
-}
-
 #col1.impact, #col2.impact, #col3.impact {
   background-color: #ddd;
+  transition: background-color 0.5s linear;
+  -moz-transition: background-color 1.5s linear;
+  -o-transition: background-color 1.5s linear;
+  -webkit-transition: background-color 1.5s linear;
   .controls {
     background-color: #ddd;
+    transition: background-color 0.5s linear;
+    -moz-transition: background-color 1.5s linear;
+    -o-transition: background-color 1.5s linear;
+    -webkit-transition: background-color 1.5s linear;
   }
 }
 

public/css/icinga/tabs.less

@@ -55,8 +55,12 @@ ul.tabs li.active a, ul.tabs li.dropdown:hover a, ul.tabs li.dropdown.hover a {
   color: #333;
 }
 
-.impact ul.tabs li.active a, .impact ul.tabs li.dropdown:hover {
-  background: white;
+.impact ul.tabs li.active a, .impact ul.tabs li.dropdown:hover, .impact ul.tabs li.dropdown.hover a {
+  background-color: #ddd;
+  transition: background-color 0.5s linear;
+  -moz-transition: background-color 1.5s linear;
+  -o-transition: background-color 1.5s linear;
+  -webkit-transition: background-color 1.5s linear;
 }
 
 ul.tabs li a:hover {

public/js/icinga/loader.js

@@ -118,6 +118,9 @@
             if (id) {
                 this.requests[id] = req;
             }
+            if (! autorefresh) {
+                req.$target.addClass('impact');
+            }
             this.icinga.ui.refreshDebug();
             return req;
         },