diff --git a/client/player.html b/client/player.html index c386927..6ad6b5c 100644 --- a/client/player.html +++ b/client/player.html @@ -346,7 +346,7 @@ div#control-container { margin-top: 25px; margin-top: 20px; } div#control-container div#repeat-container { - width: 25%; + width: 30%; float: left; padding-top: 20px; } div#control-container div#repeat-container div#repeat { @@ -361,17 +361,26 @@ div#control-container { width: 23px; height: 19px; cursor: pointer; - float: right; } + float: left; } div#control-container div#repeat-container div#shuffle.amplitude-shuffle-off { background: url("/webassets/shuffle-off.svg"); } div#control-container div#repeat-container div#shuffle.amplitude-shuffle-on { background: url("/webassets/shuffle-on.svg"); } + div#control-container div#repeat-container .speed { + + cursor: pointer; + font-size: 23px; + float:left; + line-height: 0.9; + margin-left: 10px; + color:#00A0FF; + } @media all and (-ms-high-contrast: none) { div#control-container *::-ms-backdrop, div#control-container div#control-container { margin-top: 40px; float: none; } } div#control-container div#central-control-container { - width: 50%; + width: 40%; float: left; } div#control-container div#central-control-container div#central-controls { width: 130px; @@ -407,7 +416,7 @@ div#control-container { margin-top: 10px; margin-left: -5px; } div#control-container div#volume-container { - width: 25%; + width: 30%; float: left; padding-top: 20px; } div#control-container div#volume-container div#shuffle-right { @@ -438,12 +447,23 @@ div#control-container:after { /* Small only */ @media screen and (max-width: 39.9375em) { + div#control-container div#central-control-container { + width: 50%; + } + div#control-container div#repeat-container { + width: 25%; + } + div#control-container div#volume-container { + width: 25%; + } div#amplitude-player div#repeat-container div#repeat { margin-left: auto; margin-right: auto; float: none; } div#amplitude-player div#repeat-container div#shuffle { display: none; } + div#amplitude-player div#repeat-container div#repeat { + display: none; } div#amplitude-player div#volume-container div.volume-controls { display: none; } div#amplitude-player div#volume-container div#shuffle-right { @@ -466,8 +486,8 @@ div#control-container:after { display: none; } div#amplitude-player div#repeat-container div#repeat { - margin-left: 10px; - margin-right: 20px; + margin-left: 0px; + margin-right: 10px; float: left; } div#amplitude-player div#volume-container div#shuffle-right { display: none; } } @@ -688,6 +708,7 @@ div#large-visualization{