1 files changed, 27 insertions, 0 deletions
diff --git a/css/video.scss b/css/video.scss
index 8a0d909a4..981e50b4e 100644
--- a/css/video.scss
+++ b/css/video.scss
@@ -446,3 +446,30 @@ video {
 		opacity: 1;
 	}
 }
+
+
+
+#muteWrapper {
+	display: inline-block;
+
+	/* Make the wrapper the positioning context of the volume indicator. */
+	position: relative;
+}
+
+#muteWrapper .volume-indicator {
+	position: absolute;
+
+	width: 3px;
+	right: 0px;
+
+	/* The button height is 44px; the volume indicator button is 36px at
+	 * maximum, but its value will be changed based on the current volume; the
+	 * height change will reveal more or less of the gradient, which has
+	 * absolute dimensions and thus does not change when the height changes. */
+	height: 36px;
+	bottom: 4px;
+
+	background: linear-gradient(0deg, green, yellow, red 36px);
+
+	opacity: 0.7;
+}