From 358cdd918df267ebd661a668e88ca11ac577dd9b Mon Sep 17 00:00:00 2001
From: Alain Takoudjou <alain.takoudjou@nexedi.com>
Date: Thu, 29 Oct 2020 09:55:32 +0100
Subject: [PATCH] make video control buttons more visible

---
 static/sfu.css  | 11 +++++++----
 static/sfu.html |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/static/sfu.css b/static/sfu.css
index 0d5df13..380cc47 100644
--- a/static/sfu.css
+++ b/static/sfu.css
@@ -406,6 +406,10 @@ textarea.form-reply {
   top: 5px;
 }
 
+.vc-overlay {
+  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 7%) 0%, rgb(0 0 0 / 24%) 100%);
+}
+
 .peer:hover > .video-controls, .peer:hover > .top-video-controls {
     opacity: 1;
     transition: all .7s ease-out;
@@ -413,10 +417,9 @@ textarea.form-reply {
 
 .video-controls span, .top-video-controls span {
     margin-right: 20px;
-    transition: all .5s ease-out;
-    opacity: .5;
+    transition: all .7s ease-out;
+    opacity: 1;
     cursor: pointer;
-    text-shadow: 2px 2px 4px rgba(123, 123, 123, 0.65);
 }
 
 .video-controls span:last-child {
@@ -424,7 +427,7 @@ textarea.form-reply {
 }
 
 .video-controls span:hover, .top-video-controls span:hover {
-    opacity: 1;
+    opacity: .5;
     transition: opacity .5s ease-out;
 }
 
diff --git a/static/sfu.html b/static/sfu.html
index 56d34b1..9863995 100644
--- a/static/sfu.html
+++ b/static/sfu.html
@@ -197,7 +197,7 @@
     </div>
 
     <div id="videocontrols-template" class="invisible">
-      <div class="video-controls">
+      <div class="video-controls vc-overlay">
         <span class="volume" title="Volume">
           <i class="fa fa-volume-up" data-type="bt-volume" aria-hidden="true"></i>
         </span>