public/css/viewports.css
#trtc_dashboard {
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 50px solid transparent;
}
.trtc_row {
width:100%;
position: relative;
}
.trtc_column {
height: 100%;
float: left;
position: relative;
}
.trtc_viewport {
position: relative;
float: left;
box-sizing: border-box;
border: 5px solid transparent;
}
.trtc_viewport video {
height: 100%;
width: 100%;
object-fit: contain;
}
.trtc_view {
height: 100%;
width: 100%;
position: relative;
}
.trtc_label {
position: absolute;
opacity: 0.8;
color: #ffffff;
background: #000000;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
}
.trtc_local_mute {
position: absolute;
height:29px;
width:29px;
top:0;
right:0;
background-image: url('../images/speaker.svg');
opacity:0;
}
.trtc_local_mute_muted {
opacity:0.7;
background-image: url('../images/muted_speaker.svg');
}
.trtc_usericon {
display: none;
height: 100%;
width: 100%;
object-fit: contain;
}
.trtc_muted {
display: none;
position: absolute;
top: 30px;
right: 15px;
height: 50px;
width: 50px;
object-fit: contain;
opacity: 0.3;
}
.video_mirror {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
.trtc_audiometer {
position: absolute;
height: 2px;
}
.trtc_audiometerfill {
background: #00ff00;
width: 0%;
height: 100%;
}