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-container{ position: relative; transition: all 0.2s ease; background-color: #00000099; } .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; } .video-container img.active{ display: block; } .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; } .video-container img.report{ right: 5px; left: auto; } .video-container video{ height: 100%; } .video-container#div-myCamVideo{ border: none; } #div-myCamVideo { position: absolute; right: 0; bottom: 0; } video#myCamVideo{ width: 15vw; -webkit-transform: scaleX(-1); transform: scaleX(-1); /*width: 200px;*/ /*height: 113px;*/ } .btn-cam-action { position: absolute; bottom: 0px; right: 0px; width: 450px; height: 150px; } /*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(40px); transition-timing-function: ease-in-out; bottom: 20px; } .btn-cam-action div.disabled { background: #d75555; } .btn-cam-action div.enabled { background: #73c973; } .btn-cam-action:hover 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 .25s; right: 134px; } .btn-monitor{ transition: all .2s; right: 224px; } /*.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; position: absolute; } @media (min-aspect-ratio: 1/1) { .game-overlay { flex-direction: row; } .sidebar { flex-direction: column; } .sidebar > div { max-height: 21%; } .sidebar > div:hover { max-height: 25%; } #cowebsite { right: 0; top: 0; width: 50%; height: 100vh; } #cowebsite.loading { transform: translateX(90%); } #cowebsite.hidden { transform: translateX(100%); } } @media (max-aspect-ratio: 1/1) { .game-overlay { flex-direction: column; } .sidebar { flex-direction: row; align-items: flex-end; } .sidebar > div { max-width: 21%; } .sidebar > div:hover { max-width: 25%; } #cowebsite { left: 0; bottom: 0; width: 100%; height: 50%; } #cowebsite.loading { transform: translateY(90%); } #cowebsite.hidden { transform: translateY(100%); } } #game { width: 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 { position: fixed; transition: transform 0.5s; } #cowebsite.loading { background-color: gray; } #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: 2%; flex-basis: 96%; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s; cursor: pointer; /*flex-shrink: 2;*/ } .main-section > div:hover { margin: 0%; flex-basis: 100%; } .sidebar { flex: 0 0 25%; display: flex; } .sidebar > div { margin: 2%; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s; cursor: pointer; } .sidebar > div:hover { margin: 0%; } /* 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%; transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s; cursor: pointer; } .chat-mode > div:hover { margin: 0%; } .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; } .message-container, .main-console{ position: absolute; width: 80%; height: 80%; min-height: 200px; max-height: 80%; top: -80%; left: 10%; background: #000000a6; z-index: 200; transition: all 0.1s ease-out; } .message-container{ height: auto; border-radius: 0 0 10px 10px; color: white; top: 0; } .message-container .content-message{ position: relative; padding: 20px; margin: 20px; overflow: scroll; max-height: 400px; } .main-console div.console, .message-container div.clear { position: absolute; color: white; z-index: 200; transition: all 0.1s ease-out; top: calc(100% + 2px); width: 200px; height: 40px; background-color: #2d2d2dba; left: calc(50% - 100px); border-radius: 15px 15px 15px 15px; text-align: center; } .message-container div.clear{ width: 100px; left: calc(50% - 50px); } .main-console div.console img, .message-container div.clear img{ margin-top: 6px; width: 30px; height: 30px; cursor: pointer; padding: 0 5px; transition: all .5s ease; transform: rotateY(0); opacity: 0.5; } .main-console div.console img:hover, .message-container div.clear img:hover{ opacity: 1; } .main-console div.console img.active, .message-container div.clear img{ transform: rotateY(3.142rad); opacity: 1; } .main-console div.console p, .message-container div.clear p{ margin-top: 12px; } .main-console div.console:hover, .message-container div.clear:hover { cursor: pointer; top: calc(100% + 5px); transform: scale(1.2) translateY(3px); } .main-console #input-send-text{ min-height: 200px; } .main-console #input-send-text .ql-editor{ color: white; min-height: 200px; max-height: 300px; } .main-console .ql-toolbar{ background: white; } .main-console .btn-action{ margin: 10px; text-align: center; } .main-console .btn-action .btn{ border: 1px solid black; background-color: #00000000; color: #ffda01; border-radius: 10px; padding: 10px 30px; transition: all .2s ease; } .main-console .btn-action .btn:hover{ cursor: pointer; background-color: #ffda01; color: black; border: 1px solid black; transform: scale(1.1); } .main-console .menu { padding: 20px; color: #ffffffa6; text-align: center; } .main-console .menu span { margin: 20px; cursor: pointer; } .main-console .menu span.active { color: white; border-bottom: solid 1px white; } .main-console section{ text-align: center; display: none; } .main-console section.active{ display: block; } .main-console section div.upload{ text-align: center; border: solid 1px #ffda01; height: 150px; margin: 10px 200px; padding: 20px; min-height: 200px; } .main-console section div.upload label{ color: #ffda01; } .main-console section div.upload input{ display: none; } .main-console section div.upload label img{ height: 150px; cursor: pointer; } .main-console section div.upload label img{ cursor: pointer; } /*audio html when audio message playing*/ .main-container .audio-playing { position: absolute; width: 200px; height: 54px; right: -210px; top: 40px; transition: all 0.1s ease-out; background-color: black; border-radius: 30px 0 0 30px; display: inline-flex; } .main-container .audio-playing.active{ right: 0; } .main-container .audio-playing img{ width: 30px; border-radius: 50%; background-color: #ffda01; padding: 10px; } .main-container .audio-playing p{ color: white; margin-left: 10px; } /*REPORT input*/ div.modal-report-user{ position: absolute; width: 800px; height: 600px; left: calc(50% - 400px); top: 100px; background-color: #000000ad; } .modal-report-user textarea{ position: absolute; height: 200px; z-index: 999; top: 200px; background-color: #000000; color: white; width: calc(100% - 60px); margin: 30px; } .modal-report-user img{ position: absolute; height: 50px; width: 50px; z-index: 999; left: calc(50% - 25px); top: 10px; } .modal-report-user img#cancel-report-user{ position: absolute; z-index: 999; right: 0; left: auto; top: 0; cursor: pointer; width: 15px; height: 15px; margin: 10px; } .modal-report-user button{ position: absolute; top: 450px; left: calc(50% - 50px); width: 100px; border: 1px solid black; background-color: #00000000; color: #ffda01; border-radius: 10px; padding: 10px 30px; transition: all .2s ease; } .modal-report-user button:hover{ cursor: pointer; background-color: #ffda01; color: black; border: 1px solid black; transform: scale(1.1); } .modal-report-user p#title-report-user{ font-size: 30px; color: white; position: absolute; top: 30px; width: 100%; text-align: center; } .modal-report-user p#body-report-user{ font-size: 24px; color: white; position: absolute; top: 70px; width: 100%; text-align: left; padding: 30px; max-width: calc(800px - 60px); /* size of modal - padding*/ }