90 lines
1.6 KiB
CSS
90 lines
1.6 KiB
CSS
body{
|
|
overflow: hidden;
|
|
}
|
|
video{
|
|
-webkit-transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
}
|
|
.webrtc{
|
|
display: none;
|
|
position: absolute;
|
|
right: 0px;
|
|
height: 100%;
|
|
width: 300px;
|
|
}
|
|
.webrtc.active{
|
|
display: block;
|
|
}
|
|
.webrtc, .activeCam{}
|
|
.activeCam video{
|
|
position: absolute;
|
|
height: 25%;
|
|
top: 10px;
|
|
margin: 5px;
|
|
right: -100px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.webrtc:hover .activeCam video{
|
|
right: 10px;
|
|
}
|
|
.activeCam video#myCamVideo{
|
|
width: 200px;
|
|
height: 113px;
|
|
}
|
|
|
|
/*CSS size for 2 - 3 elements*/
|
|
.activeCam video:nth-child(1){
|
|
/*this is for camera of user*/
|
|
top: 75%;
|
|
}
|
|
.activeCam video:nth-child(2){
|
|
top: 0%;
|
|
}
|
|
.activeCam video:nth-child(3){
|
|
top: 25%;
|
|
}
|
|
.activeCam video:nth-child(4) {
|
|
top: 50%;
|
|
}
|
|
|
|
/*btn animation*/
|
|
.btn-cam-action div{
|
|
cursor: pointer;
|
|
position: absolute;
|
|
border: solid 0px black;
|
|
width: 44px;
|
|
height: 44px;
|
|
background: #666;
|
|
box-shadow: 2px 2px 24px #444;
|
|
border-radius: 48px;
|
|
transform: translateY(12vw);
|
|
transition-timing-function: ease-in-out;
|
|
bottom: 20px;
|
|
}
|
|
.webrtc:hover .btn-cam-action div{
|
|
transform: translateY(0);
|
|
}
|
|
.btn-cam-action div:hover{
|
|
background: #407cf7;
|
|
box-shadow: 4px 4px 48px #666;
|
|
transition: 280ms;
|
|
}
|
|
.btn-micro{
|
|
transition: all .3s;
|
|
right: 44px;
|
|
}
|
|
.btn-video{
|
|
transition: all .2s;
|
|
right: 134px;
|
|
}
|
|
/*.btn-call{
|
|
transition: all .1s;
|
|
left: 0px;
|
|
}*/
|
|
.btn-cam-action div img{
|
|
height: 22px;
|
|
width: 30px;
|
|
top: calc(48px - 37px);
|
|
left: calc(48px - 41px);
|
|
position: relative;
|
|
} |