AutorÃa | Ultima modificación | Ver Log |
.chat {
height: 100%;
height: 80vh;
display: grid;
grid-template-rows: 85% auto;
gap: 0.5rem;
@media (max-width: 768px) {
height: 100vh;
padding: 0 0.5rem;
}
}
.messagesContainer {
display: flex;
flex-flow: column-reverse;
flex-wrap: nowrap;
height: 85%;
padding: 0 1.5rem;
overflow: auto;
}
.messageWrapper {
display: flex;
flex-direction: column;
}
.chatInputContainer {
width: 100%;
height: fit-content;
position: relative;
form {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
}
.chatInput {
border: none;
width: 80%;
resize: none;
margin: 0.5rem 0;
padding: 0.5rem;
font-size: 1.2rem;
border-radius: 100px;
background: $bg-color-secondary;
&:focus {
background: $bg-color-secondary;
}
&::placeholder {
font-size: 1.2rem;
}
}
.sendBtn {
padding: 0.5rem;
font-size: 1.3rem;
font-weight: bolder;
border-radius: 5px;
margin-left: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.chatUserImage {
width: 15%;
object-fit: cover;
}
.inputIcon {
font-size: 1.5rem;
& + & {
margin-right: 0.5rem;
}
}