Romain Mallard
fbfdbc6083
All checks were successful
Deploy React / build-and-deploy (push) Successful in 16s
111 lines
1.4 KiB
CSS
111 lines
1.4 KiB
CSS
|
|
.chatWidget {
|
|
margin :5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
background: var(--card);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
height: 93vh;
|
|
}
|
|
|
|
.convHeader {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
padding: 8px;
|
|
overflow-y: auto;
|
|
height: 10%;
|
|
}
|
|
|
|
.convList{
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0.5rem;
|
|
padding: 8px;
|
|
|
|
}
|
|
|
|
.convcard {
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--panel);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.convcard:hover {
|
|
background: var(--border);
|
|
}
|
|
|
|
.senderBox{
|
|
display: flex;
|
|
height: 18%;
|
|
}
|
|
|
|
.senderBox * {
|
|
border: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.textbox{
|
|
width: 70%;
|
|
}
|
|
|
|
.sendbutton{
|
|
width: 30%;
|
|
border-radius: 0%;
|
|
}
|
|
|
|
|
|
.messageCard {
|
|
height: 70%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
|
|
background: var(--messageCard);
|
|
overflow-y:scroll;
|
|
}
|
|
|
|
/* Messages */
|
|
.msg {
|
|
margin: 5px;
|
|
max-width: 70%;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 10px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.msg--mine {
|
|
align-self: flex-end;
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.msg--theirs {
|
|
align-self: flex-start;
|
|
background: var(--panel);
|
|
}
|
|
|
|
.createConvBox {
|
|
margin: 5px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.createConvBox > * {
|
|
margin: 5px;
|
|
|
|
}
|
|
|
|
.convUtils{
|
|
width: 25%;
|
|
}
|
|
|
|
.convUtils button {
|
|
margin: 3px;
|
|
|
|
} |