Tweak tabs a little.

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;
     }

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>
 

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) {