Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding colors for cam/mic/screen share button

Browse source 
Microphone and camera are now red when disabled.
Screen-share is green when enabled.
Also, they are now always partially visible (they were completely hidden previously until hovering in the lower right corner)
This commit is contained in:
David Négrier 2020-08-22 15:26:40 +02:00
parent 91f422d0c3
commit b7c2f8be7b
3 changed files with 22 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
front/dist/index.html vendored
View file

@ -70,15 +70,15 @@
</div>
</div>
<div class="btn-cam-action">
<div class="btn-micro">
<div id="btn-micro" 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">
<div id="btn-video" 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">
<div id="btn-monitor" class="btn-monitor">
<img id="monitor" src="resources/logos/monitor.svg">
<img id="monitor-close" src="resources/logos/monitor-close.svg">
</div>

8
front/dist/resources/style/style.css vendored
View file

@ -96,10 +96,16 @@ video#myCamVideo{
background: #666;
box-shadow: 2px 2px 24px #444;
border-radius: 48px;
transform: translateY(12vh);
transform: translateY(40px);
transition-timing-function: ease-in-out;
bottom: 20px;
}
.btn-cam-action div.disabled {
background: #d75555;
}
.btn-cam-action div.enabled {
background: #73c973;
}
.btn-cam-action:hover div{
transform: translateY(0);
}