diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js
index 421a1d0c..87862fb8 100755
--- a/src/js/components/PlaybackControls.js
+++ b/src/js/components/PlaybackControls.js
@@ -155,10 +155,7 @@ const PlaybackControls = () => {
{playbackPosition ? : '-'}
-
+
{currentTrack ? : '-'}
diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss
index eb9653c7..536ebd45 100755
--- a/src/scss/components/_playback-controls.scss
+++ b/src/scss/components/_playback-controls.scss
@@ -11,9 +11,10 @@
align-content: center;
&__background {
- height: 100%;
- width: 100%;
position: absolute;
+ width: 100%;
+ height: 100%;
+ bottom: 0;
z-index: -1;
}
@@ -225,7 +226,8 @@
}
@include responsive($bp_medium) {
- padding-top: 8px;
+ padding-top: 2px;
+ padding-bottom: 4px;
&--touch-enabled .control.next {
display: none;
@@ -280,10 +282,19 @@
&.progress {
position: absolute;
- top: -3px;
+ top: auto;
+ bottom: -10px;
left: 0;
right: 0;
+ .slider__track {
+ border-radius: 0;
+
+ &__progress {
+ border-radius: 0;
+ }
+ }
+
.time {
display: none;
}
@@ -337,7 +348,7 @@
position: absolute;
display: flex;
right: 0;
- bottom: 70px;
+ bottom: 60px;
padding-right: 10px;
text-align: right;
width: 100px;
@@ -349,7 +360,7 @@
display: flex;
right: 100px;
left: 10px;
- bottom: 68px;
+ bottom: 58px;
@include resolution(2) {
right: 115px;