From ea4624d8c026bd9711fe76fde83dfae54eeed63f Mon Sep 17 00:00:00 2001
From: Josef Citrine <josefcitrine@googlemail.com>
Date: Tue, 12 Jul 2016 00:08:43 +0100
Subject: [PATCH] Updated player and mobile styles

---
 .../assets/styles/components/player.less      | 58 ++++++++++---------
 resources/assets/styles/layout.less           |  3 +-
 resources/assets/styles/mobile.less           | 31 +++++++---
 3 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/resources/assets/styles/components/player.less b/resources/assets/styles/components/player.less
index 44795fc2..319af696 100644
--- a/resources/assets/styles/components/player.less
+++ b/resources/assets/styles/components/player.less
@@ -21,45 +21,44 @@
 
 body.is-logged {
   .track-player {
-    margin-right: 130px;
+    margin-right: @pfm-sidebar-size;
   }
 }
 
 .track-player {
-  padding: 10px;
+  padding: 0;
 
   .image {
     float: left;
-    width: 43px;
-    height: 43px;
+    width: 64px;
+    height: 64px;
     position: relative;
     overflow: hidden;
-    padding: 1px;
 
     img {
       .box-shadow(none);
 
       display: block;
-      width: 40px;
-      height: 40px;
+      width: 64px;
+      height: 64px;
       padding: 0px;
-      border: 1px solid #bcbcbc;
     }
 
     .loader {
-      .transition(top 250ms linear);
+      .transition(top 250ms @swift-ease-out);
 
       z-index: 1000;
       background: rgba(0, 0, 0, .6);
       color: #fff;
       position: absolute;
-      top: -50px;
-      left: 2px;
-      width: 42px;
-      height: 42px;
-      line-height: 43px;
+      top: -64px;
+      left: 0;
+      width: 64px;
+      height: 66px;
+      line-height: 65px;
       text-align: center;
       font-size: 16px;
+      margin-top: -2px;
 
       &.showing {
         top: 2px;
@@ -68,13 +67,14 @@ body.is-logged {
   }
 
   .inner {
-    margin-left: 55px;
+    margin-left: 75px;
   }
 
   .song, .artist {
     .ellipsis();
     line-height: normal;
     display: block;
+    font-size: 17px;
 
     a {
       color: #555;
@@ -88,6 +88,7 @@ body.is-logged {
 
   .song {
     font-weight: bold;
+    padding-top: 12px;
   }
 
   .volume-slider {
@@ -97,13 +98,14 @@ body.is-logged {
   }
 
   .transport {
-    .border-radius(4px);
-
     background: #aaa;
     height: 5px;
-    position: relative;
+    position: absolute;
     cursor: pointer;
-    margin-top: 4px;
+    bottom: 58px;
+    left: 64px;
+    width: 100%;
+    width: ~"calc(100% - 244px)";
 
     .bar {
       z-index: 500;
@@ -116,8 +118,6 @@ body.is-logged {
     }
 
     .bar, .loader-bar {
-      .border-radius(4px);
-
       position: absolute;
       top: 0px;
       left: 0px;
@@ -130,9 +130,10 @@ body.is-logged {
     margin: 0px;
     padding: 0px;
     float: right;
+    margin-top: 12px;
 
     li.status {
-      font-size: 10pt;
+      font-size: 14px;
       margin-top: 12px;
       margin-right: 5px;
 
@@ -146,15 +147,16 @@ body.is-logged {
       float: left;
       margin: 0px;
       padding: 0px;
-      font-size: 15pt;
+      font-size: 24px;
 
       > a {
         display: block;
-        padding: 5px 0px;
-        width: 40px;
+        padding: 6px 0px;
+        width: 44px;
         text-align: center;
         color: #5A5A5A;
         text-decoration: none !important;
+        .border-radius(22px);
 
         &:hover {
           text-decoration: none;
@@ -188,12 +190,16 @@ body.is-logged {
       &.volume {
         position: relative;
 
+        > a {
+          .border-radius(0);
+        }
+
         .volume-slider {
           display: none;
           z-index: 1000;
           position: absolute;
           left: 0px;
-          top: 33px;
+          bottom: 44px;
           width: 100%;
           height: 150px;
           background: #ddd;
diff --git a/resources/assets/styles/layout.less b/resources/assets/styles/layout.less
index 0a77c30f..13b6470c 100644
--- a/resources/assets/styles/layout.less
+++ b/resources/assets/styles/layout.less
@@ -78,7 +78,7 @@ header {
   width: 100%;
   bottom: 0;
   z-index: 1010;
-  box-shadow: 0 0 8px rgba(0,0,0,0.5);
+  box-shadow: 0 0 6px rgba(0,0,0,0.3);
 }
 
 .sidebar {
@@ -265,6 +265,7 @@ header {
     height: @pfm-top-bar-size;
     width: 100%;
     top: 0;
+    .material-shadow(1);
 
     .burger-wrapper {
         top:20px;
diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less
index ec78e866..53574375 100644
--- a/resources/assets/styles/mobile.less
+++ b/resources/assets/styles/mobile.less
@@ -37,6 +37,7 @@
 
   .top-bar {
     margin-left: 0;
+    box-shadow: 0 0 0 transparent;
 
     .burger-wrapper {
       display: block;
@@ -103,11 +104,17 @@
 
   .search-results {
     width: 100%;
+
+    .-column1, .-column2 {
+      padding: 0;
+      width: 100%;
+      float: none;
+      clear: both;
+    }
   }
 
   .track-player {
     margin-right: 0px !important;
-    padding: 5px 10px;
 
     .inner {
       margin-left: 0px !important;
@@ -118,19 +125,33 @@
     }
 
     .buttons {
+      margin-top: 15px;
+      margin-right: 5px;
+
       li.volume, li.status  {
         display: none;
       }
+
+      li {
+        font-size: 20px;
+        a {
+          width: 40px;
+        }
+      }
     }
 
     .song, .artist {
       margin-bottom: 4px;
+      margin-left: 5px;
     }
 
     .transport {
       border-radius: 0px !important;
       margin-top: 4px;
       height: 10px;
+      left: 0;
+      width: 100%;
+      bottom: 55px;
 
       .bar, .loader-bar {
         border-radius: 0px;
@@ -342,10 +363,10 @@
       background: #84528a;
       top: 64px;
       left: 0;
-      height: 41px;
+      height: 44px;
       width: 100%;
       border-bottom: 0;
-      z-index: 100;
+      z-index: 600;
 
       li {
         a {
@@ -363,10 +384,6 @@
     }
   }
 
-  .fixed-tabs {
-    padding-top: 41px;
-  }
-
   .secondary-content {
     margin-top: 5px;
   }