lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases 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"> <div id="div-myCamVideo" class="video-container">
<video id="myCamVideo" autoplay muted></video> <video id="myCamVideo" autoplay muted></video>
</div> </div>
<div class="btn-cam-action"> </div>
<div class="btn-micro"> <div class="btn-cam-action">
<img id="microphone" src="resources/logos/microphone.svg"> <div class="btn-micro">
<img id="microphone-close" src="resources/logos/microphone-close.svg"> <img id="microphone" src="resources/logos/microphone.svg">
</div> <img id="microphone-close" src="resources/logos/microphone-close.svg">
<div class="btn-video"> </div>
<img id="cinema" src="resources/logos/cinema.svg"> <div class="btn-video">
<img id="cinema-close" src="resources/logos/cinema-close.svg"> <img id="cinema" src="resources/logos/cinema.svg">
</div> <img id="cinema-close" src="resources/logos/cinema-close.svg">
<div class="btn-monitor"> </div>
<img id="monitor" src="resources/logos/monitor.svg"> <div class="btn-monitor">
<img id="monitor-close" src="resources/logos/monitor-close.svg"> <img id="monitor" src="resources/logos/monitor.svg">
</div> <img id="monitor-close" src="resources/logos/monitor-close.svg">
</div> </div>
</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 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{