Rev 6340 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
.chat {
background-color: $bg-color;
border-radius: $border-radius;
border: 1px solid $border-primary;
height: 80vh;
display: flex;
flex-direction: column;
.chat_header {
border-bottom: 1px solid $border-primary;
padding: 1rem .5rem;
position: relative;
text-align: center;
h2 {
font-size: 1.5rem;
font-weight: 500;
}
&> {
a {
display: inline-flex;
width: fit-content;
}
button {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
display: none;
}
}
}
@media (max-width: 768px) {
padding: 0 0.5rem;
.chat_header>button {
display: inline-flex;
}
}
}
.messages_container {
display: flex;
flex-flow: column-reverse;
flex-wrap: nowrap;
height: 85%;
padding: 0 1.5rem 0.5rem;
overflow: auto;
}
.message_wrapper {
display: flex;
flex-direction: column;
}
.chat__input-container {
border-top: 1px solid $border-primary;
padding: 0.5rem;
position: relative;
form {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
textarea {
resize: none;
}
}
.chatInput {
border: none;
outline: none;
flex: 1;
padding: 0.5rem 1rem;
border-radius: 30px;
background: $bg-color-secondary;
&:focus {
background: $bg-color-secondary;
}
}
.send_btn,
.icon_btn {
border: none;
display: grid;
font-size: 1.5rem;
place-items: center;
color: $font-color;
}
.chatUserImage {
width: 15%;
object-fit: cover;
}