more responsive

This commit is contained in:
ian ramzy 2020-03-31 00:18:15 -04:00
parent f481454328
commit 117463879d
3 changed files with 13 additions and 25 deletions

View File

@ -56,11 +56,7 @@
<div id="entire-chat">
<div id="chat-zone">
<form class="compose">
<textarea
type="text"
placeholder="Type a message"
style="overflow: -moz-scrollbars-none;"
></textarea>
<input type="text" placeholder="Type a message" />
</form>
<div class="chat-messages"></div>
</div>

View File

@ -141,7 +141,7 @@ a {
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 70%;
width: 65%;
height: auto;
max-height: 100%;
@ -153,6 +153,8 @@ a {
background-repeat: no-repeat;
background-position: center center;
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
object-fit: cover;
}
/*Neomorphic buttons*/
@ -220,13 +222,13 @@ button:hover {
position: absolute;
height: 100%;
right: 0;
width: 15vw;
width: 17.5vw;
padding: 0;
}
.compose {
width: calc(13vw - 40px);
height: 100px;
width: calc(17.5vw - 40px);
height: 60px;
font-family: "Heebo", sans-serif;
position: fixed;
bottom: 0;
@ -236,7 +238,7 @@ button:hover {
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30;
margin: 20px;
box-sizing: border-box;
padding: 12px;
padding: 16px;
background: #1c1d22;
overflow-x: hidden;
overflow: -moz-scrollbars-none;
@ -244,7 +246,7 @@ button:hover {
scrollbar-width: none;
}
.compose textarea {
.compose input {
font-family: inherit;
font-size: inherit;
border: none;
@ -256,17 +258,7 @@ button:hover {
color: white;
}
textarea {
overflow: scroll;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
}
textarea::-webkit-scrollbar {
width: 0 !important;
}
.compose textarea::placeholder {
.compose input::placeholder {
color: white;
}
@ -276,7 +268,7 @@ textarea::-webkit-scrollbar {
position: absolute;
height: 100%;
right: 0;
width: 15vw;
width: 17.5vw;
overflow: scroll;
font-family: "Heebo", sans-serif;
font-size: 0.8rem;
@ -301,7 +293,7 @@ textarea::-webkit-scrollbar {
.chat-messages {
overflow-x: hidden;
padding-bottom: 100px;
padding-bottom: 80px;
overflow: -moz-scrollbars-none;
}

View File

@ -14,7 +14,7 @@ const isWebRTCSupported =
window.RTCPeerConnection;
// Element vars
const chatInput = document.querySelector(".compose textarea");
const chatInput = document.querySelector(".compose input");
const pipVideo = document.getElementById("remote-video");
var VideoChat = {