update app footer

dashboard-ui/css/nowplayingbar.css

@@ -52,18 +52,14 @@
 
 /* Now playing bar */
 .nowPlayingBar {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
     /* Above everything, except for the video player and popup overlays */
-    z-index: 1097;
     color: #fff;
-    background-color: #1C1C1F;
+    background: #222326;
     text-align: center;
     /*box-shadow: 0 -2px 2px 0 rgba(0,0,0,.14),-1px 5px 1px rgba(0,0,0,.12);*/
     will-change: transform;
     contain: layout style;
+    font-size: 90%;
 }
 
 .hiddenNowPlayingBar .nowPlayingBar {
@@ -105,17 +101,17 @@
         vertical-align: bottom;
     }
 
-     .nowPlayingImage img {
-        height: 64px;
+    .nowPlayingImage img {
+        height: 56px;
     }
 
-        .nowPlayingBar .nowPlayingImage {
-            width: 64px;
-            height: 64px;
-            background-position: center center;
-            background-repeat: no-repeat;
-            background-size: contain;
-        }
+.nowPlayingBar .nowPlayingImage {
+    width: 56px;
+    height: 56px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
 
 .nowPlayingBarText {
     display: inline-block;
@@ -165,7 +161,7 @@
 .nowPlayingBarCenter {
     vertical-align: middle;
     text-align: center;
-    margin-top: 6px;
+    margin-top: 3px;
     /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
     z-index: 2;
     position: absolute;
@@ -176,7 +172,7 @@
 
 .nowPlayingBarPositionContainer {
     position: absolute !important;
-    left: 64px;
+    left: 56px;
     top: -8px;
     right: 0;
     z-index: 1;
@@ -186,6 +182,10 @@
         background: #333;
     }
 
+.headroom--unpinned .nowPlayingBarPositionContainer {
+    display: none;
+}
+
 .noMediaProgress .nowPlayingBarPositionContainer {
     display: none;
 }