Added volume support in the audio player. Fixes #14

docroot/css/lms.css

@@ -402,7 +402,6 @@ a:hover {
 }
 
 .Lms-player-btn {
-	font-size: 40px !important;
 	cursor: pointer;
 }
 
@@ -410,15 +409,20 @@ a:hover {
 	color: #337ab7;
 }
 
-.Lms-player-btn-playpause {
-	width: 40px;
-	margin-left: 8px;
-	margin-right: 8px;
+.Lms-player-btn-volume {
+	font-size: 18px !important;
+	margin: auto;
+}
+
+.Lms-player-btn-controls {
+	font-size: 40px !important;
+	text-align: center;
+	width: 0.9em;
 }
 
 .Lms-player-duration {
 	line-height: 40px;
-	text-align: center;
+	text-align: right;
 	color: darkgrey;
 	white-space: nowrap;
 }
@@ -448,14 +452,14 @@ a:hover {
 	background: transparent;
 }
 
-input[type="range"]::-webkit-slider-thumb {
+.Lms-player-seek::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	height: 0px;
 	width: 0px;
 }
 
-input[type="range"]::-moz-range-thumb {
+.Lms-player-seek::-moz-range-thumb {
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	height: 0px;
@@ -479,6 +483,54 @@ input[type="range"]::-moz-range-thumb {
 }
 
 .Lms-player-text {
-	margin-left:8px;
-	margin-right:8px;
+	margin-left: 8px;
+	margin-right: 8px;
 }
+
+.Lms-player-volume {
+	width: 125px;
+	height: 40px;
+	display: flex;
+}
+
+.Lms-player-volume-slider-container {
+	display: inline-block;
+	width: 85px;
+	margin: auto;
+}
+
+.Lms-player-volume-slider {
+	-webkit-appearance: none;
+	appearance: none;
+	width: 100%;
+	height: 8px;
+	background: lightgrey;
+	outline: none;
+	cursor: pointer;
+	border-radius: 4px;
+}
+
+.Lms-player-volume-slider::-webkit-slider-thumb {
+	-webkit-appearance: none; /* Override default look */
+	appearance: none;
+	width: 14px;
+	height: 14px;
+	border-radius: 7px;
+	background: darkgrey;
+}
+
+.Lms-player-volume-slider::-moz-range-thumb {
+	width: 14px;
+	height: 14px;
+	border-radius: 7px;
+	background: darkgrey;
+}
+
+.Lms-player-volume-slider::-webkit-slider-thumb:hover {
+	background: #337ab7;
+}
+
+.Lms-player-volume-slider::-moz-range-thumb:hover {
+	background: #337ab7;
+}
+