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; } /*.webrtc{ display: none; position: absolute; right: 0px; height: 100%; width: 300px; } .webrtc.active{ display: block; }*/ /*.webrtc, .activeCam{}*/ /*.activeCam*/ .video-container{ position: relative; /*height: 25%; top: 10px; margin: 5px; right: -100px; transition: all 0.2s ease;*/ /*border-color: black; border-style: solid; border-width: 0.2px;*/ background-color: #00000099; } /*.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*/ #div-myCamVideo { position: absolute; right: 0; bottom: 0; } video#myCamVideo{ width: 15vw; -webkit-transform: scaleX(-1); transform: scaleX(-1); /*width: 200px;*/ /*height: 113px;*/ } /*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(12vh); transition-timing-function: ease-in-out; bottom: 20px; } #activeCam: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; } /* New layout */ body { margin: 0; height: 100vh; width: 100vw; } .main-container { height: 100vh; width: 100vw; display: flex; align-items: stretch; } @media (min-aspect-ratio: 1/1) { .main-container { flex-direction: row; } .game-overlay { flex-direction: row; } .sidebar { flex-direction: column; } .sidebar > div { max-height: 21%; } } @media (max-aspect-ratio: 1/1) { .main-container { flex-direction: column; } .game-overlay { flex-direction: column; } .sidebar { flex-direction: row; align-items: flex-end; } .sidebar > div { max-width: 21%; } } .game { flex-basis: 100%; position: relative; /* Position relative is needed for the game-overlay. */ } /* A potentially shared website could appear in an iframe in the cowebsite space. */ .cowebsite { flex-basis: 100%; transition: flex-basis 0.5s; } /*.cowebsite:hover { flex-basis: 100%; }*/ .cowebsite iframe { width: 100%; height: 100%; } .game-overlay { display: none; position: absolute; width: 100%; height: 100%; /* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */ } .game-overlay.active { display: flex; } .game-overlay video { width: 100% } .main-section { flex: 0 0 75%; display: flex; justify-content: start; /*align-items: flex-start;*/ flex-wrap: wrap; } .main-section > div { margin: 5%; flex-basis: 90%; /*flex-shrink: 2;*/ } .sidebar { flex: 0 0 25%; display: flex; } .sidebar > div { margin: 2%; } /* Let's make sure videos are vertically centered if they need to be cropped */ .media-container { display: flex; justify-content: center; flex-direction: column; overflow: hidden; } .chat-mode { display: flex; width: 100%; flex-wrap: wrap; align-items: flex-start; padding: 1%; } .chat-mode div { margin: 1%; max-height: 96%; } .chat-mode.one-col > div { flex-basis: 98%; } .chat-mode.two-col > div { flex-basis: 48%; } .chat-mode.three-col > div { flex-basis: 31.333333%; } .chat-mode.four-col > div { flex-basis: 23%; } .chat-mode > div:last-child { flex-grow: 5; }