body{ overflow: hidden; } body .message-info{ width: 20%; height: auto; min-height: 30px; position: absolute; top: 5px; left: 40%; padding-top: 10px; text-align: center; } body .message-info.error{ background: red; } body .message-info.success{ background: green; } body .message-info.info{ background: dodgerblue; } body .message-info.warning{ background: #ffa500d6; } 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-container{ position: absolute; height: 25%; top: 10px; margin: 5px; right: -100px; transition: all 0.2s ease; border-color: black; border-style: solid; border-width: 0.2px; } .activeCam .video-container i{ position: absolute; width: 100px; height: 65px; left: calc(50% - 50px); top: calc(50% - 50px); background-color: black; border-radius: 50%; text-align: center; padding-top: 35px; font-size: 28px; color: white; } .activeCam .video-container img.active{ display: block; } .activeCam .video-container img{ position: absolute; display: none; width: 15px; height: 15px; background: #d93025; border-radius: 48px; left: 5px; bottom: 5px; padding: 10px; z-index: 2; } .activeCam .video-container video{ height: 100%; } .webrtc:hover .activeCam .video-container{ right: 10px; } .activeCam .video-container#div-myCamVideo{ border: none; } .activeCam .video-container video#myCamVideo{ width: 200px; height: 113px; } /*CSS size for 2 - 3 elements*/ .activeCam .video-container:nth-child(1){ /*this is for camera of user*/ top: 75%; } .activeCam .video-container:nth-child(2){ top: 0%; } .activeCam .video-container:nth-child(3){ top: 25%; } .activeCam .video-container: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; } /* Spinner */ .connecting-spinner { /*display: inline-block;*/ position: absolute; left: calc(50% - 68px); top: calc(50% - 68px); width: 130px; height: 130px; } .connecting-spinner:after { content: " "; display: block; width: 108px; height: 108px; margin: 8px; border-radius: 50%; border: 6px solid #fff; border-color: #fff transparent #fff transparent; animation: connecting-spinner 1.2s linear infinite; } @keyframes connecting-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .rtc-error { position: absolute; left: calc(50% - 68px); top: calc(50% - 68px); width: 130px; height: 130px; } .rtc-error:after { content: " "; display: block; width: 108px; height: 108px; margin: 8px; border-radius: 50%; border: 6px solid #f00; animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0; } } .webrtcsetup{ display: none; position: absolute; top: 140px; left: 0; right: 0; margin-left: auto; margin-right: auto; height: 50%; width: 50%; border: white 6px solid; } .webrtcsetup .background-img { position: relative; display: block; width: 40%; height: 60%; margin-left: auto; margin-right: auto; top: 50%; transform: translateY(-50%); } #myCamVideoSetup { width: 100%; height: 100%; } .webrtcsetup.active{ display: block; }