rework video player buttons

dashboard-ui/css/mediaplayer-video.css

@@ -47,7 +47,7 @@
 }
 
 .videoTopControls {
-    padding: .7em 1em;
+    padding: 1em;
     background-color: rgba(0, 0, 0, .5);
     position: absolute;
     left: 0;
@@ -61,10 +61,6 @@
     vertical-align: top;
 }
 
-.videoControls .currentTime {
-    margin-top: 25px;
-}
-
 #slider-tooltip {
     z-index: 99999;
     position: absolute;
@@ -135,11 +131,11 @@
 
 #mediaPlayer .ui-slider-track, .nowPlayingBar .ui-slider-track, .nowPlayingPage .ui-slider-track {
     border-color: #2ad !important;
-    height: 2px!important;
+    height: 2px !important;
 }
 
 #videoPlayer .inactive {
-    display: none!important;
+    display: none !important;
 }
 
 .idlePlayer video {
@@ -149,6 +145,7 @@
 #mediaPlayer .sliderContainer {
     position: relative;
     top: 5px;
+    vertical-align: middle;
 }
 
 /****************************************/
@@ -190,10 +187,11 @@
 
 @media all and (max-width: 555px) {
     #mediaPlayer .videoControls .previousTrackButton, #mediaPlayer .videoControls .nextTrackButton {
-        display: none!important;
+        display: none !important;
     }
+
     .videoTopControlsLogo {
-        display: none!important;
+        display: none !important;
     }
 }
 

dashboard-ui/css/mediaplayer.css

@@ -9,15 +9,19 @@
     vertical-align: top;
 }
 
-.nowPlayingBar .mediaButton {
+.mediaButton {
     vertical-align: middle;
     font-size: 30px;
-    color: #e8e8e8!important;
+    color: #e8e8e8 !important;
     margin: 0 10px;
     min-width: 30px;
     text-align: center;
 }
 
+.videoTopControls .mediaButton {
+    font-size: 26px;
+}
+
 #mediaElement {
     display: inline-block;
     position: relative;
@@ -28,14 +32,20 @@
     font-weight: normal;
     position: relative;
     top: -7px;
-    margin: 0 30px 0 3px;
-    max-width: 200px;
+    margin: 0 0 0 3px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     vertical-align: middle;
     text-align: left;
     font-size: 15px;
+    max-width: 200px;
+}
+
+@media (min-width: 800px) {
+    .nowPlayingText {
+        margin-right: 30px;
+    }
 }
 
 .nowPlayingDoubleText {
@@ -59,18 +69,12 @@
 
 .currentTime {
     display: inline-block;
-    position: relative;
-    top: -10px;
+    vertical-align: middle;
     max-width: 110px;
     margin-right: 2em;
     font-weight: normal;
 }
 
-.nowPlayingBar .currentTime {
-    top: inherit;
-    vertical-align: middle;
-}
-
 .mediaSlider {
     position: relative;
     top: -10px;
@@ -108,7 +112,7 @@
 }
 
 .volumeButton {
-    margin-right: .5em!important;
+    margin-right: .5em !important;
 }
 
 ::-ms-thumb {
@@ -141,7 +145,7 @@ input[type="range"]::-ms-fill-upper {
         margin-bottom: 0;
     }
 
-        .nowPlayingBar .mediaButton:not(.unpauseButton):not(.pauseButton):not(.remoteControlButton) {
+        .nowPlayingBar .mediaButton:not(.unpauseButton):not(.pauseButton):not(.remoteControlButton):not(.stopButton) {
             display: none;
         }
 
@@ -149,7 +153,7 @@ input[type="range"]::-ms-fill-upper {
         float: right;
     }
 
-    .nowPlayingBar .unpauseButton, .nowPlayingBar .pauseButton {
+    .nowPlayingBar .unpauseButton, .nowPlayingBar .pauseButton, .nowPlayingBar .stopButton {
         float: right;
     }
 
@@ -158,7 +162,7 @@ input[type="range"]::-ms-fill-upper {
     }
 
     .nowPlayingBar {
-        padding: 10px 5px 10px 0;
+        padding: 10px 5px 10px 10px;
         text-align: left;
     }
 }