81 lines
1.4 KiB
CSS
81 lines
1.4 KiB
CSS
.webrtc{
|
|
display: none;
|
|
}
|
|
.webrtc.active{
|
|
display: block;
|
|
}
|
|
.myCam{
|
|
display: none;
|
|
}
|
|
.myCam.active{
|
|
display: block;
|
|
}
|
|
.webrtc, .activeCam{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: black;
|
|
}
|
|
.webrtc video{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.myCam{
|
|
height: 200px;
|
|
width: 300px;
|
|
position: absolute;
|
|
right: 10px;
|
|
background: black;
|
|
border: none;
|
|
bottom: 20px;
|
|
max-height: 17%;
|
|
max-width: 17%;
|
|
opacity: 1;
|
|
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;
|
|
} |