Music player styles

platypush/backend/http/static/css/application.css

@@ -24,23 +24,31 @@ main {
     margin: auto;
 }
 
+    ul.tab-nav {
+        padding-left: 0 !important;  /* Override skeleton-tabs default */
+    }
+
 .tab-content {
     border: 1px solid #bbb;
     border-top: 0;
     padding: 20px;
-    margin: -25px 0 auto 5px;
+    margin-top: -25px;
 }
 
     .playback-controls {
-        text-align: right;
+        text-align: center;
     }
 
     .button[disabled] {
         background: rgba(240,240,240,1)
     }
 
+    .track-info {
+        text-align: center;
+        margin-bottom: 15px;
+    }
 
-    .now-playing > .artist {
+        .track-info > .artist {
             font-weight: bold;
             display: block;
         }

platypush/backend/http/static/js/music.mpd.js

@@ -27,7 +27,7 @@ $(document).ready(function() {
 
     var updateControls = function(status, track) {
         var $playbackControls = $('.playback-controls');
-        var $curTrack = $('.now-playing');
+        var $curTrack = $('.track-info');
 
         if (status) {
             switch (status.state.toLowerCase()) {

platypush/backend/http/templates/plugins/music.mpd.html

@@ -1,13 +1,14 @@
 <script type="text/javascript" src="{{ url_for('static', filename='js/music.mpd.js') }}"></script>
 
 <div class="row">
-    <div class="six columns now-playing">
+    <div class="ten columns offset-by-one track-info">
         <span class="no-track">No media is being played</span>
         <span class="artist"></span>
         <span class="track"></span>
     </div>
 
-    <div class="six columns playback-controls">
+    <div class="row">
+        <div class="eight columns offset-by-two playback-controls">
             <button data-action="previous">
                 <i class="fa fa-step-backward"></i>
             </button>
@@ -29,4 +30,5 @@
             </button>
         </div>
     </div>
+</div>