player css

app/css/style.min.css

@@ -6816,9 +6816,9 @@ div#player{
 	right: left;
 }
 #amplitude-volume-slider{
-	width: 70%;
+	width: 80%;
 	margin: 0 auto;
-  line-height:14px;
+  padding-right:35px;
 }
 .current-track {
   margin:20px 0 0;
@@ -6845,13 +6845,13 @@ input[type=range]::-webkit-slider-thumb {
 
   box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
   border: 1px solid #333;
-  height: 36px;
+  height: 26px;
   width: 16px;
   border-radius: 3px;
   background: #f7f7f7;
   cursor: pointer;
   -webkit-appearance: none;
-  margin-top: -14px;
+  margin-top: -8px;
 }
 input[type=range]:focus::-webkit-slider-runnable-track {
   background: #367ebd;
@@ -6960,7 +6960,7 @@ meter {
   line-height: 50px;
   border-radius: 50%;
   text-align: center;
-  margin: -40px 0 0 0;
+  margin: -50px 0 0 0;
   cursor: pointer;
   float: right;
   position: relative;
@@ -7115,7 +7115,7 @@ video {
 }
 .scrollable-list {
   overflow: scroll;
-  height: 220px;
+  height: 198px;
 }
 ::-webkit-scrollbar {
   -webkit-appearance: none;

app/index.html

@@ -40,11 +40,13 @@
                   </div>
                   <div id="controls">
                      <div id="amplitude-play-pause" class="amplitude-paused"></div>
-                     <!--<meter name="volume" value="9" min="0" max="10" low="0" high="10"></meter>-->             
-                     <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: -4px 0 0 0;font-size:20px"></span>
-                     <input type="range" class="bar" name="volume" id="amplitude-volume-slider" min=1 max=100 value=90/>
-                     <output class="volume" for="volume">90</output>
-                     <span class="glyphicon glyphicon-volume-up" aria-hidden="true" style="float:right;margin:-15px 0 0;font-size:20px"></span>
+                     <br />
+                     <div class="row">
+                        <!--<meter name="volume" value="9" min="0" max="10" low="0" high="10"></meter>-->             
+                        <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: -6px 0 0 20px;font-size:20px"></span>
+                        <input type="range" class="bar" name="volume" id="amplitude-volume-slider" min=1 max=100 value=80>
+                        <span class="glyphicon glyphicon-volume-up" aria-hidden="true" style="float:right;margin:-15px 20px 0 0;font-size:20px"></span>
+                     </div>
                   </div>
                </div>
            

src/css/main.css

@@ -55,9 +55,9 @@ div#player{
 	right: left;
 }
 #amplitude-volume-slider{
-	width: 70%;
+	width: 80%;
 	margin: 0 auto;
-  line-height:14px;
+  padding-right:35px;
 }
 .current-track {
   margin:20px 0 0;
@@ -84,13 +84,13 @@ input[type=range]::-webkit-slider-thumb {
 
   box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
   border: 1px solid #333;
-  height: 36px;
+  height: 26px;
   width: 16px;
   border-radius: 3px;
   background: #f7f7f7;
   cursor: pointer;
   -webkit-appearance: none;
-  margin-top: -14px;
+  margin-top: -8px;
 }
 input[type=range]:focus::-webkit-slider-runnable-track {
   background: #367ebd;
@@ -199,7 +199,7 @@ meter {
   line-height: 50px;
   border-radius: 50%;
   text-align: center;
-  margin: -40px 0 0 0;
+  margin: -50px 0 0 0;
   cursor: pointer;
   float: right;
   position: relative;
@@ -354,7 +354,7 @@ video {
 }
 .scrollable-list {
   overflow: scroll;
-  height: 220px;
+  height: 198px;
 }
 ::-webkit-scrollbar {
   -webkit-appearance: none;

src/index.html

@@ -40,11 +40,13 @@
                   </div>
                   <div id="controls">
                      <div id="amplitude-play-pause" class="amplitude-paused"></div>
-                     <!--<meter name="volume" value="9" min="0" max="10" low="0" high="10"></meter>-->             
-                     <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: -4px 0 0 0;font-size:20px"></span>
-                     <input type="range" class="bar" name="volume" id="amplitude-volume-slider" min=1 max=100 value=90/>
-                     <output class="volume" for="volume">90</output>
-                     <span class="glyphicon glyphicon-volume-up" aria-hidden="true" style="float:right;margin:-15px 0 0;font-size:20px"></span>
+                     <br />
+                     <div class="row">
+                        <!--<meter name="volume" value="9" min="0" max="10" low="0" high="10"></meter>-->             
+                        <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: -6px 0 0 20px;font-size:20px"></span>
+                        <input type="range" class="bar" name="volume" id="amplitude-volume-slider" min=1 max=100 value=80>
+                        <span class="glyphicon glyphicon-volume-up" aria-hidden="true" style="float:right;margin:-15px 20px 0 0;font-size:20px"></span>
+                     </div>
                   </div>
                </div>