Multimedia player: Made volume slider's layout more consistent across…

… browsers.

* Adjusted the volume slider's "thumb" (thick vertical line) dimensions, vertical position, inner colour and background colour to look virtually identical across all mainstream browsers. These changes are especially noticeable in Webkit/Blink browsers.
* Prevented Webkit/Blink browsers from defaulting to using a negative outline offset that overlaps the slider track/thumb.
* Moved volume thumb's width and height SCSS variable declarations into the core variables file.
* Added a border SCSS variable for the volume slider's thumb.

src/_variables.scss

@@ -219,7 +219,10 @@ $mm-ctrl-outline-color: #4aafff !default;
 $mm-ctrl-cc-color: #4aafff !default;
 
 $mm-volume-bg-color: #aaa !default;
+$mm-volume-thumb-border: 1px solid #707070 !default;
 $mm-volume-thumb-color: #fff !default;
+$mm-volume-thumb-height: 1.3em !default;
+$mm-volume-thumb-width: 10px !default;
 
 
 //== Tabs

src/plugins/multimedia/_base.scss

@@ -2,9 +2,6 @@
   Multimedia Player Code
  */
 
-$mm-volume-thumb-height: 1.3em;
-$mm-volume-thumb-width: 10px;
-
 %multimedia-display-none {
 	display: none;
 }
@@ -306,13 +303,24 @@ $mm-volume-thumb-width: 10px;
 			padding: 0;
 			width: 7em;
 
+			&:focus {
+				/* Prevent Webkit/Blink browsers from defaulting to a -2px outline offset. */
+				outline-offset: 0;
+			}
+
 			&::-webkit-slider-runnable-track {
 				background: $mm-volume-bg-color;
 				height: 4px;
 			}
 
 			&::-webkit-slider-thumb {
-				margin-top: -8px;
+				-webkit-appearance: none;
+				background: $mm-volume-thumb-color;
+				border: $mm-volume-thumb-border;
+				box-sizing: content-box;
+				height: $mm-volume-thumb-height;
+				margin-top: -9px;
+				width: $mm-volume-thumb-width;
 			}
 
 			&::-moz-range-track {
@@ -321,6 +329,8 @@ $mm-volume-thumb-width: 10px;
 			}
 
 			&::-moz-range-thumb {
+				background: $mm-volume-thumb-color;
+				border: $mm-volume-thumb-border;
 				border-radius: 0;
 				height: $mm-volume-thumb-height;
 				width: $mm-volume-thumb-width;
@@ -342,8 +352,9 @@ $mm-volume-thumb-width: 10px;
 
 			&::-ms-thumb {
 				background: $mm-volume-thumb-color;
-				border: 1px outset #fff;
-				height: 1.3em;
+				border: $mm-volume-thumb-border;
+				height: $mm-volume-thumb-height;
+				width: $mm-volume-thumb-width;
 			}
 		}
 	}
@@ -366,7 +377,8 @@ $mm-volume-thumb-width: 10px;
 
 	.fd-slider-handle {
 		background: $mm-volume-thumb-color;
-		border: 1px outset #fff;
+		border: $mm-volume-thumb-border;
+		box-sizing: content-box;
 		width: $mm-volume-thumb-width;
 	}
 }