workadventure/front/dist/resources/style/style.css

90 lines
1.6 KiB
CSS
Raw Normal View History

2020-05-12 00:22:55 +02:00
body{
overflow: hidden;
}
2020-05-03 14:29:45 +02:00
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{}
2020-04-25 20:29:03 +02:00
.activeCam video{
position: absolute;
2020-05-03 14:29:45 +02:00
height: 25%;
top: 10px;
margin: 5px;
2020-05-03 14:29:45 +02:00
right: -100px;
transition: all 0.2s ease;
}
2020-05-03 17:19:42 +02:00
.webrtc:hover .activeCam video{
2020-05-03 14:29:45 +02:00
right: 10px;
}
.activeCam video#myCamVideo{
width: 200px;
2020-05-03 14:29:45 +02:00
height: 113px;
2020-04-25 20:29:03 +02:00
}
/*CSS size for 2 - 3 elements*/
.activeCam video:nth-child(1){
/*this is for camera of user*/
top: 75%;
2020-04-25 20:29:03 +02:00
}
.activeCam video:nth-child(2){
top: 0%;
2020-04-25 20:29:03 +02:00
}
.activeCam video:nth-child(3){
top: 25%;
2020-04-25 20:29:03 +02:00
}
.activeCam video:nth-child(4) {
2020-04-25 20:29:03 +02:00
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;
}
2020-05-03 17:19:42 +02:00
.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;
}
2020-05-03 17:19:42 +02:00
/*.btn-call{
transition: all .1s;
left: 0px;
2020-05-03 17:19:42 +02:00
}*/
.btn-cam-action div img{
height: 22px;
width: 30px;
top: calc(48px - 37px);
left: calc(48px - 41px);
position: relative;
}