mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-24 02:59:21 +08:00
572 lines
10 KiB
CSS
Vendored
572 lines
10 KiB
CSS
Vendored
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap");
|
|
|
|
/*Fade in page on load*/
|
|
@-webkit-keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* End Fade in page on load*/
|
|
|
|
body {
|
|
background: #16171b;
|
|
margin: 0;
|
|
padding: 0;
|
|
opacity: 0; /* make things invisible upon start */
|
|
-webkit-animation: fadeIn ease-in 1;
|
|
-moz-animation: fadeIn ease-in 1;
|
|
animation: fadeIn ease-in 1;
|
|
-webkit-animation-fill-mode: forwards;
|
|
-moz-animation-fill-mode: forwards;
|
|
animation-fill-mode: forwards;
|
|
-webkit-animation-duration: 0.3s;
|
|
-moz-animation-duration: 0.3s;
|
|
animation-duration: 0.3s;
|
|
overflow: hidden;
|
|
}
|
|
|
|
video {
|
|
background: #16171a;
|
|
}
|
|
|
|
#header {
|
|
position: absolute;
|
|
color: white;
|
|
font-family: "Fira Sans", sans-serif;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
white-space: nowrap;
|
|
top: 20px;
|
|
left: 20px;
|
|
float: left;
|
|
}
|
|
|
|
#header p,
|
|
img {
|
|
float: left;
|
|
padding: 7px;
|
|
}
|
|
|
|
#header,
|
|
a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*Moveable local video id*/
|
|
#moveable {
|
|
z-index: 100;
|
|
position: absolute;
|
|
width: 15%;
|
|
cursor: move;
|
|
}
|
|
|
|
/*Text inside local video*/
|
|
#moveable p {
|
|
z-index: 101;
|
|
position: absolute;
|
|
color: white;
|
|
font-family: "Heebo", sans-serif;
|
|
white-space: nowrap;
|
|
top: 50%;
|
|
left: 50%;
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
font-weight: bold;
|
|
background: rgba(0, 0, 0, 0.12);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#local-video {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 10px;
|
|
-webkit-transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
background: #16171a;
|
|
}
|
|
|
|
/*caption text*/
|
|
#remote-video-text {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
width: 65vw;
|
|
position: absolute;
|
|
top: calc(80%);
|
|
left: 20vw;
|
|
z-index: 1;
|
|
color: white;
|
|
font-family: "Heebo", sans-serif;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 0 0 10px 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
#remote-video {
|
|
padding: 0;
|
|
margin: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
width: 65%;
|
|
height: auto;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
border-radius: 10px;
|
|
background-image: url(../images/loader.gif);
|
|
background-size: 400px auto;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
#remote-video.fullscreen {
|
|
width: 100%;
|
|
}
|
|
|
|
/*Buttons*/
|
|
.multi-button button {
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
transition: all 0.3s ease-in-out;
|
|
color: gray;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 7px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
button:hover {
|
|
color: white;
|
|
}
|
|
|
|
.multi-button {
|
|
position: absolute;
|
|
left: calc(7.5vw - 40px);
|
|
top: 50%;
|
|
-ms-transform: translate(0%, -50%);
|
|
transform: translate(0%, -50%);
|
|
z-index: 999;
|
|
border-radius: 10px;
|
|
background: #16171a;
|
|
box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;
|
|
padding: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
/* grid-gap: 0.2rem; */
|
|
width: 40px;
|
|
}
|
|
|
|
.HoverState {
|
|
color: white;
|
|
font-family: "Heebo", sans-serif;
|
|
font-size: 0.8rem;
|
|
position: absolute;
|
|
left: 60px;
|
|
white-space: nowrap;
|
|
top: 0px;
|
|
font-weight: bold;
|
|
background: #16171a;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.buttonContainer {
|
|
position: relative;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/*.fa-phone-slash {*/
|
|
/* color: #470000;*/
|
|
/*}*/
|
|
|
|
/*End buttons*/
|
|
|
|
/*Text chat*/
|
|
#entire-chat {
|
|
position: absolute;
|
|
height: 100%;
|
|
right: 0;
|
|
width: 17.5vw;
|
|
padding: 0;
|
|
}
|
|
|
|
.compose {
|
|
width: calc(17.5vw - 40px);
|
|
height: 60px;
|
|
font-family: "Heebo", sans-serif;
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
border-radius: 20px;
|
|
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #292a30;
|
|
margin: 20px;
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
background: #1c1d22;
|
|
overflow-x: hidden;
|
|
overflow: -moz-scrollbars-none;
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.compose input {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
border: none;
|
|
width: 100%;
|
|
height: calc(100% - 5px);
|
|
resize: none;
|
|
outline: none;
|
|
background-color: inherit;
|
|
color: white;
|
|
}
|
|
|
|
.compose input::placeholder {
|
|
color: white;
|
|
}
|
|
|
|
#chat-zone {
|
|
padding-top: 20px;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
height: 100%;
|
|
right: 0;
|
|
width: 17.5vw;
|
|
overflow: scroll;
|
|
font-family: "Heebo", sans-serif;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
#chat-zone::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
}
|
|
|
|
#chat-zone .chat-messages .message-item {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
padding: 0 16px 4px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.chat-messages {
|
|
overflow-x: hidden;
|
|
padding-bottom: 80px;
|
|
overflow: -moz-scrollbars-none;
|
|
}
|
|
|
|
#chat-zone .chat-messages .message-item.customer {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
/*received messages*/
|
|
#chat-zone .message-item.moderator .message-bloc {
|
|
background-color: rgb(29, 30, 33);
|
|
color: #fff;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px;
|
|
max-width: 100%;
|
|
border-radius: 20px 20px 20px 5px;
|
|
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a;
|
|
}
|
|
|
|
/*sent messages*/
|
|
#chat-zone .message-item.customer .message-bloc {
|
|
background-color: rgb(47, 48, 52);
|
|
color: #fff;
|
|
border-radius: 20px 20px 5px 20px;
|
|
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a;
|
|
}
|
|
|
|
#chat-zone .chat-messages .message-item.customer .message-bloc {
|
|
margin-left: auto;
|
|
}
|
|
|
|
#chat-zone .chat-messages .message-item .message-bloc {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.message {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.message a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.cssanimation {
|
|
animation-duration: 1s;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.fadeInBottom {
|
|
animation-name: fadeInBottom;
|
|
}
|
|
@keyframes fadeInBottom {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(200%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/*End text chat*/
|
|
|
|
/* Begin mobile layout */
|
|
|
|
@media (max-width: 640px) {
|
|
/* @media (min-width: 320px) and (max-width: 480px) { */
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 1em;
|
|
}
|
|
|
|
#header {
|
|
z-index: 5;
|
|
}
|
|
|
|
#header img {
|
|
width: auto;
|
|
height: 2rem;
|
|
}
|
|
|
|
#header p {
|
|
margin: 0;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
#remote-video {
|
|
/* width: 75vw;
|
|
height: calc((16/9) * 75vw); */
|
|
width: 100%;
|
|
height: 100%;
|
|
/* border: 3px solid red; */
|
|
}
|
|
|
|
#moveable {
|
|
position: fixed;
|
|
top: 5rem;
|
|
left: 5rem;
|
|
min-width: 20%;
|
|
min-height: 10%;
|
|
width: initial;
|
|
height: initial;
|
|
max-width: 25%;
|
|
}
|
|
|
|
#moveable #local-video {
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
#moveable p {
|
|
text-align: center;
|
|
z-index: 101;
|
|
position: absolute;
|
|
color: white;
|
|
font-family: "Heebo", sans-serif;
|
|
white-space: pre-wrap;
|
|
top: 50%;
|
|
left: 50%;
|
|
-ms-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
background: rgba(0, 0, 0, 0.12);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
margin: 0;
|
|
}
|
|
|
|
#remote-video-text {
|
|
position: fixed;
|
|
top: 60% !important;
|
|
bottom: initial;
|
|
left: initial;
|
|
width: 80%;
|
|
height: auto;
|
|
margin: 0;
|
|
margin-left: 10%;
|
|
text-align: center;
|
|
}
|
|
|
|
.multi-button {
|
|
position: fixed;
|
|
left: 0;
|
|
top: initial;
|
|
bottom: 0;
|
|
width: 80vw;
|
|
height: 3rem;
|
|
margin: 0 10vw;
|
|
-ms-transform: translate(0%, 0%);
|
|
transform: translate(0%, 0%);
|
|
z-index: 999;
|
|
box-shadow: none;
|
|
border-radius: 10px;
|
|
padding: 0;
|
|
/* display: flex; */
|
|
flex-direction: row;
|
|
/* overflow: hidden; */
|
|
}
|
|
|
|
.buttonContainer {
|
|
position: relative;
|
|
height: 100%;
|
|
font-size: 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-width: 0;
|
|
width: 100%;
|
|
margin: 0;
|
|
/* line-height: 1.5rem; */
|
|
}
|
|
|
|
.multi-button button {
|
|
position: relative;
|
|
width: 100%;
|
|
border: none;
|
|
font-size: 2rem;
|
|
transition: all 0.3s ease-in-out;
|
|
color: gray;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 7px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.HoverState {
|
|
display: none !important;
|
|
}
|
|
|
|
.buttonContainer:nth-child(3),
|
|
.buttonContainer:nth-child(5) {
|
|
display: none;
|
|
}
|
|
|
|
#entire-chat {
|
|
position: absolute;
|
|
top: 3rem;
|
|
right: 0;
|
|
height: calc(100% - 3rem - 3rem);
|
|
width: 100vw;
|
|
/* padding: 1rem 0; */
|
|
padding: 0;
|
|
/* border: 3px solid green; */
|
|
text-align: center;
|
|
/* background: #16171a; */
|
|
}
|
|
|
|
#chat-zone {
|
|
position: relative;
|
|
padding-top: 20px;
|
|
width: 100%;
|
|
height: calc(100% - 2rem);
|
|
margin-left: 0;
|
|
/* box-shadow: 4px 4px 12px #030506, -4px -4px 12px #292a30; */
|
|
/* border: 5px solid blue */
|
|
border-radius: 10px;
|
|
/* background: #16171a; */
|
|
}
|
|
|
|
#chat-zone .message-item.moderator .message-bloc,
|
|
#chat-zone .message-item.customer .message-bloc {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.compose {
|
|
position: absolute;
|
|
font-size: 1rem;
|
|
left: 10%;
|
|
right: initial;
|
|
/* bottom: calc(3rem + 2rem); */
|
|
bottom: 0;
|
|
width: 80%;
|
|
height: 2rem;
|
|
margin: 0.5rem 0;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.compose input {
|
|
width: 90%;
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
.compose input::placeholder {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
/*Hide video controls on mobile*/
|
|
/*todo: still buggy on iOS, play/pause button pops up on load for iOS,
|
|
goes away after you press pause then play again*/
|
|
video ::-webkit-media-controls-panel {
|
|
display: none !important;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
video ::--webkit-media-controls-play-button {
|
|
display: none !important;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
video ::-webkit-media-controls-start-playback-button {
|
|
display: none !important;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/* End mobile layout */
|