mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-13 13:49:19 +08:00
more responsive
This commit is contained in:
parent
f481454328
commit
117463879d
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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 = {
|
||||
|
Loading…
Reference in New Issue
Block a user