noby/workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
front/dist/index.html vendored
View File

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

11
front/dist/resources/style/style.css vendored
View File

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