From 1de49788ac0da3bc513aa395ab0aeedadb07ffc2 Mon Sep 17 00:00:00 2001
From: Gunther Brunner <gunta85@gmail.com>
Date: Mon, 15 Jun 2015 23:22:27 +0900
Subject: [PATCH] Colorize stats style. Add mouseover brightness to device
 image.

---
 .../device-list/icons/device-list-icons.css   | 21 ++++++++++++++-----
 .../device-list/stats/device-list-stats.css   |  7 ++-----
 .../device-list/stats/device-list-stats.jade  |  8 +++----
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/res/app/device-list/icons/device-list-icons.css b/res/app/device-list/icons/device-list-icons.css
index e0bfd373..0919f82a 100644
--- a/res/app/device-list/icons/device-list-icons.css
+++ b/res/app/device-list/icons/device-list-icons.css
@@ -20,9 +20,20 @@ ul.devices-icon-view li {
   text-align: center;
 }
 
-ul.devices-icon-view li:hover {
-  background-color: #fbfbfb;
+ul.devices-icon-view li:active {
+  -webkit-filter: brightness(95%);
+  filter: brightness(95%);
+}
 
+
+ul.devices-icon-view li:hover {
+  /*border: 1px solid dodgerblue;*/
+  background-color: #fcfcfc;
+}
+
+ul.devices-icon-view li:hover .device-photo-small img {
+  -webkit-filter: brightness(120%);
+  filter: brightness(120%);
 }
 
 ul.devices-icon-view .device-photo-small {
@@ -56,10 +67,10 @@ ul.devices-icon-view .device-product {
 }
 
 ul.devices-icon-view .device-is-busy {
-  /*box-shadow: inset 0 0 10px #e6e6e6;*/
-  /*background: #e6e6e6 !important;*/
-  opacity: 0.7;
+  opacity: 0.6;
   cursor: not-allowed;
+  /*-webkit-filter: grayscale(100%);*/
+  /*filter: grayscale(100%);*/
 }
 
 ul.devices-icon-view .device-is-busy .btn {
diff --git a/res/app/device-list/stats/device-list-stats.css b/res/app/device-list/stats/device-list-stats.css
index f0df8f72..777ce800 100644
--- a/res/app/device-list/stats/device-list-stats.css
+++ b/res/app/device-list/stats/device-list-stats.css
@@ -1,14 +1,13 @@
 /* TODO: REFORMAT device-stats */
 
 .device-stats {
-  min-height: 120px;
-  height: 120px;
+  min-height: 100px;
+  height: 100px;
   text-align: center;
 }
 
 .device-stats [class^="col-"],
 .device-stats [class*="col-"] {
-  border-right: 1px solid #e6e6e6;
   height: 100%;
   margin-bottom: 0;
 }
@@ -22,9 +21,7 @@
 .device-stats [class*="col-"] .number {
   font-size: 3.8em;
   font-weight: 100;
-  color: #007aff;
   line-height: 1.4em;
-  padding-top: 8px;
   letter-spacing: -0.06em;
 }
 
diff --git a/res/app/device-list/stats/device-list-stats.jade b/res/app/device-list/stats/device-list-stats.jade
index 5132f4ba..5e9bba1d 100644
--- a/res/app/device-list/stats/device-list-stats.jade
+++ b/res/app/device-list/stats/device-list-stats.jade
@@ -1,21 +1,21 @@
 .widget-container.device-stats
   .col-xs-3
-    .number
+    .number.color-red
       .icon.fa.fa-globe.visitors
       span(class='counter', data-type='total') 0
     .text(translate) Total devices
   .col-xs-3
-    .number
+    .number.color-green
       .icon.fa.fa-check.visitors
       span(class='counter', data-type='usable') 0
     .text(translate) Usable devices
   .col-xs-3
-    .number
+    .number.color-orange
       .icon.fa.fa-users.visitors
       span(class='counter', data-type='busy') 0
     .text(translate) Busy devices
   .col-xs-3
-    .number
+    .number.color-blue
       .icon.fa.fa-user.visitors(ng-class='{"fa-trophy": $root.adminMode, "fa-user": !$root.adminMode}')
       span(class='counter', data-type='using') 0
     .text(ng-bind='currentUser.name')