From 0e9dc43640719df7d45e4556ada9d20ae0bead94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Fri, 19 Jul 2019 17:55:37 +0200 Subject: Add volume indicator for the local audio MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The volume is shown as a vertical bar next to the audio icon that grows and shrinks (with a fixed bottom position) depending on the volume level. The bar is coloured with a gradient from green to yellow to red for better clarity of the current volume. The previous way of indicating speech (a pulse animation in the audio icon) has not been modified; this is an additional visualization (only for the local audio) to provide a more noticeable feedback to the user. Both the existing button and the new bar had to be wrapped in a helper div to include the volume bar in the old layout. Signed-off-by: Daniel Calviño Sánchez --- css/video.scss | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) (limited to 'css') 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; +} -- cgit v1.2.3