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;