120 lines
2.2 KiB
CSS
120 lines
2.2 KiB
CSS
.webrtc{
|
|
display: none;
|
|
position: absolute;
|
|
right: 0px;
|
|
height: 100%;
|
|
width: 300px;
|
|
}
|
|
.webrtc.active{
|
|
display: block;
|
|
}
|
|
.webrtc, .activeCam{}
|
|
.activeCam video{
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 20%;
|
|
top: 10px;
|
|
right: 10px;
|
|
margin: 5px;
|
|
}
|
|
.activeCam video#myCamVideo{
|
|
width: 200px;
|
|
height: 100px;
|
|
}
|
|
|
|
/*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: 64px;
|
|
height: 64px;
|
|
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.active div{
|
|
transform: translateY(0);
|
|
}
|
|
.btn-cam-action div:hover{
|
|
background: #407cf7;
|
|
box-shadow: 4px 4px 48px #666;
|
|
transition: 280ms;
|
|
}
|
|
.btn-micro{
|
|
transition: all .3s;
|
|
left: 168px;
|
|
}
|
|
.btn-video{
|
|
transition: all .2s;
|
|
left: 84px;
|
|
}
|
|
.btn-call{
|
|
transition: all .1s;
|
|
left: 0px;
|
|
}
|
|
.btn-cam-action div img{
|
|
height: 32px;
|
|
width: 40px;
|
|
top: calc(48px - 32px);
|
|
left: calc(48px - 35px);
|
|
position: relative;
|
|
}
|
|
|
|
/*Phone Animation*/
|
|
.phone-open{
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
width: 50px;
|
|
height: 50px;
|
|
left: calc(50% - 70px);
|
|
padding: 20px;
|
|
bottom: 20px;
|
|
box-shadow: 2px 2px 24px #444;
|
|
background-color: green;
|
|
opacity: 0;
|
|
transition: all .4s ease-in-out;
|
|
}
|
|
.phone-open.active{
|
|
opacity: 1;
|
|
animation-name: phone-move;
|
|
animation-duration: 0.4s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
.phone-open:hover{
|
|
animation: none;
|
|
cursor: pointer;
|
|
}
|
|
@keyframes phone-move {
|
|
0% {
|
|
left: calc(50% - 70px);
|
|
bottom: 20px;
|
|
}
|
|
25% {
|
|
left: calc(50% - 65px);
|
|
bottom: 15px;
|
|
}
|
|
25% {
|
|
left: calc(50% - 75px);
|
|
bottom: 25px;
|
|
}
|
|
} |