MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2024-11-14 22:29:20 +08:00
Code Issues Releases Wiki Activity

more responsive

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/chat.html
View File

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

30
public/css/chat.css
View File

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

2
public/js/chat.js
View File

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