src/css/messages.css
html, body, main {
height: 100%;
}
body {
min-width: 0;
}
body > main > .inner {
height: 100%;
padding: 0;
max-width: none;
min-height: 0;
}
body > main > .inner .main {
padding: 0;
}
/* Hangouts-style CSS via https://css-tricks.com/replicating-google-hangouts-chat/ */
.discussion {
/* Stacked DIV CSS via http://stackoverflow.com/a/18972314/3402854 */
width: 100%;
position: absolute;
top: 0;
bottom: 0;
overflow: auto;
/* End stacked DIV CSS */
list-style: none;
margin: 0 0 80px 0;
padding: 0 0 50px 0;
}
.discussion li {
padding: 0.5rem;
overflow: hidden;
display: flex;
}
.discussion .avatar {
width: 40px;
position: relative;
}
.discussion .avatar img {
display: block;
width: 100%;
}
.other .avatar:after {
content: "";
position: absolute;
top: 0;
right: -1px;
width: 0;
height: 0;
border: 5px solid white;
border-left-color: transparent;
border-bottom-color: transparent;
}
.self {
justify-content: flex-end;
align-items: flex-end;
}
.self .modation-messages {
order: 1;
border-bottom-right-radius: 0;
}
.self .avatar {
order: 2;
}
.self .avatar:after {
content: "";
position: absolute;
bottom: 0;
left: -1px;
width: 0;
height: 0;
border: 5px solid white;
border-right-color: transparent;
border-top-color: transparent;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.self .name, .self .spacer {
display: none;
}
.modation-messages {
background: white;
padding: 10px;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.modation-messages p {
font-size: 0.8rem;
margin: 0 0 0.2rem 0;
}
.modation-messages time {
font-size: 0.7rem;
color: #ccc;
}
/* End Hangouts CSS */
.write-message {
width: 100%;
position: absolute;
bottom: 0;
}
.write-message textarea {
height: 80px;
position: absolute;
bottom: 0;
margin: 0;
}
.factory {
display: none;
}