partey_workadventure/front/dist/resources/style/style.css
2020-04-25 20:29:03 +02:00

114 lines
2.1 KiB
CSS

.webrtc{
display: none;
}
.webrtc.active{
display: block;
}
.webrtc, .activeCam{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
}
.activeCam video{
position: absolute;
width: 100%;
height: 100%;
}
/*CSS size for 2 - 3 elements*/
video:nth-child(1):nth-last-child(3),
video:nth-child(2):nth-last-child(2),
video:nth-child(3):nth-last-child(1),
video:nth-child(1):nth-last-child(2),
video:nth-child(2):nth-last-child(1){
width: 50%;
}
video:nth-child(1):nth-last-child(3),
video:nth-child(2):nth-last-child(2),
video:nth-child(3):nth-last-child(1){
height: 50%;
}
/*CSS position for 2 elements*/
video:nth-child(1):nth-last-child(2){
left: 0;
}
video:nth-child(2):nth-last-child(1){
left: 50%;
}
/*CSS position for 3 elements*/
video:nth-child(1):nth-last-child(3){
top: 0;
left: 0;
}
video:nth-child(2):nth-last-child(2){
top: 0;
left: 50%;
}
video:nth-child(3):nth-last-child(1) {
top: 50%;
left: 25%;
}
.myCam{
height: 200px;
width: 300px;
position: absolute;
right: 10px;
background: black;
border: none;
bottom: 20px;
max-height: 17%;
max-width: 17%;
opacity: 1;
display: block;
transition: opacity 1s;
}
.myCam video{
width: 100%;
height: 100%;
}
.btn-cam-action div{
cursor: pointer;
position: absolute;
border: solid 0px black;
width: 64px;
height: 64px;
background: #666;
left: 6vw;
box-shadow: 2px 2px 24px #444;
border-radius: 48px;
transform: translateX(calc(-6vw - 96px));
transition-timing-function: ease-in-out;
}
.webrtc:hover .btn-cam-action.active div{
transform: translateX(0);
}
.btn-cam-action div:hover{
background: #407cf7;
box-shadow: 4px 4px 48px #666;
transition: 280ms;
}
.btn-micro{
bottom: 277px;
transition: all .3s;
}
.btn-video{
bottom: 177px;
transition: all .2s;
}
.btn-call{
bottom: 77px;
transition: all .1s;
}
.btn-cam-action div img{
height: 32px;
width: 40px;
top: calc(48px - 32px);
left: calc(48px - 35px);
position: relative;
}