Putting a wider onhover surface when clicking on one of the buttons to manage screen sharing or video/mic

This commit is contained in:
David Négrier 2020-08-20 22:57:34 +02:00
parent 2ae19b9f30
commit f60b02f1dc
2 changed files with 22 additions and 15 deletions

View File

@ -68,6 +68,7 @@
<div id="div-myCamVideo" class="video-container"> <div id="div-myCamVideo" class="video-container">
<video id="myCamVideo" autoplay muted></video> <video id="myCamVideo" autoplay muted></video>
</div> </div>
</div>
<div class="btn-cam-action"> <div class="btn-cam-action">
<div class="btn-micro"> <div class="btn-micro">
<img id="microphone" src="resources/logos/microphone.svg"> <img id="microphone" src="resources/logos/microphone.svg">
@ -82,7 +83,6 @@
<img id="monitor-close" src="resources/logos/monitor-close.svg"> <img id="monitor-close" src="resources/logos/monitor-close.svg">
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>

View File

@ -79,6 +79,13 @@ video#myCamVideo{
} }
.btn-cam-action {
position: absolute;
bottom: 0px;
right: 0px;
width: 450px;
height: 150px;
}
/*btn animation*/ /*btn animation*/
.btn-cam-action div{ .btn-cam-action div{
cursor: pointer; cursor: pointer;
@ -93,7 +100,7 @@ video#myCamVideo{
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
bottom: 20px; bottom: 20px;
} }
#activeCam:hover .btn-cam-action div{ .btn-cam-action:hover div{
transform: translateY(0); transform: translateY(0);
} }
.btn-cam-action div:hover{ .btn-cam-action div:hover{
@ -106,7 +113,7 @@ video#myCamVideo{
right: 44px; right: 44px;
} }
.btn-video{ .btn-video{
transition: all .2s; transition: all .25s;
right: 134px; right: 134px;
} }
.btn-monitor{ .btn-monitor{