From 0a57e081563742c40d7a0b42acf3b662697acc51 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 29 May 2016 09:48:03 -0700
Subject: [PATCH] Tweak tabs a little.

---
 src/components/ha-view-tabs.html |  3 +++
 src/layouts/partial-cards.html   | 26 ++++++++++++++++++++------
 src/layouts/partial-cards.js     |  5 +++--
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/ha-view-tabs.html b/src/components/ha-view-tabs.html
index ba7cd2391e..bacd01a6d4 100644
--- a/src/components/ha-view-tabs.html
+++ b/src/components/ha-view-tabs.html
@@ -2,6 +2,9 @@
 
 <dom-module id="ha-view-tabs">
   <style>
+    :host {
+      --paper-tabs-selection-bar-color: #FFF;
+    }
     paper-tab {
       text-transform: uppercase;
     }
diff --git a/src/layouts/partial-cards.html b/src/layouts/partial-cards.html
index de1424c82e..d23099409e 100644
--- a/src/layouts/partial-cards.html
+++ b/src/layouts/partial-cards.html
@@ -17,14 +17,27 @@
       -moz-user-select: none;
     }
 
-    paper-scroll-header-panel {
-      --paper-scroll-header-panel-condensed-header: {
-        background-color: red;
-      };
+    paper-scroll-header-panel[has-views] paper-toolbar {
+      height: 104px;
     }
 
-    paper-scroll-header-panel[has-views] paper-toolbar {
-      height: 128px;
+    paper-toolbar:after {
+      content: "";
+      position: absolute;
+      left: 0px;
+      right: 0px;
+      bottom: -5px;
+      width: 100%;
+      height: 5px;
+      pointer-events: none;
+      opacity: 0;
+      box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
+      will-change: opacity;
+      transition: opacity 0.4s;
+    }
+
+    paper-scroll-header-panel.condensed paper-toolbar:after {
+      opacity: 1;
     }
 
     .menu-icon {
@@ -37,6 +50,7 @@
 
     .views {
       padding-left: 12px;
+      --paper-tabs-selection-bar-color: #FFF;
     }
   </style>
 
diff --git a/src/layouts/partial-cards.js b/src/layouts/partial-cards.js
index e657113f21..0422ce0889 100644
--- a/src/layouts/partial-cards.js
+++ b/src/layouts/partial-cards.js
@@ -135,11 +135,12 @@ export default new Polymer({
 
   headerScrollAdjust(ev) {
     if (!this.hasViews) return;
-    Polymer.Base.transform(`translateY(-${ev.detail.y}px)`, this.$.menu);
+    this.translate3d('0', `-${ev.detail.y}px`, '0', this.$.menu);
+    this.toggleClass('condensed', ev.detail.y === 56, this.$.panel);
   },
 
   computeHeaderHeight(hasViews) {
-    return hasViews ? 128 : 64;
+    return hasViews ? 104 : 64;
   },
 
   computeCondensedHeaderHeight(hasViews) {