syndicate-2017/examples/webchat/htdocs/style.css

209 lines
3.1 KiB
CSS

template {
display: none !important;
}
img.avatar {
border-radius: 24px;
}
/* --------------------------------------------------------------------------- */
.main-container {
display: flex;
height: 100vh;
flex-direction: column;
}
#main-div {
flex: 1;
overflow: auto;
}
.column-container {
display: flex;
flex-direction: column;
}
.column-fill {
flex: 1;
overflow: auto;
}
/* --------------------------------------------------------------------------- */
.alert-count {
background: red;
color: white;
padding: 0em 0.25em;
border-radius: 4px;
}
.hide-zero-count.count0 {
display: none;
}
.show-only-zero-count {
display: none;
}
.show-only-zero-count.count0 {
display: inherit;
}
.plural.count1 {
display: none;
}
.contact-list-present-false {
opacity: 0.3;
}
.align-right { text-align: right; }
.align-center { text-align: center; }
.cursor-interactive {
cursor: pointer;
}
.dropdown-marginal {
left: -1.1em;
display: inline-block;
width: 0px;
position: relative;
}
.forcewrap {
word-wrap: break-word !important;
xhyphens: auto;
}
.big-icon {
font-size: 1.75rem;
}
.invited-tick {
font-size: 2rem;
width: 48px;
height: 48px;
display: inline-block;
border-radius: 24px;
color: white;
background: darkgreen;
text-align: center;
line-height: 0px;
}
.invited-tick .icon {
position: relative;
top: 0.5rem;
}
.blurb-box {
}
.float-right { float: right; }
.main-container footer {
padding-top: 1rem;
text-align: right;
}
/* --------------------------------------------------------------------------- */
.conversation-control-panel {
font-size: 2rem;
}
.post-backdrop {
overflow-y: scroll;
}
.post {
margin: 20px;
}
.post .post-body {
background: white;
border: solid #d3d3d3 1px;
border-radius: 1.5rem;
padding: 1rem;
margin: 0 0px;
min-height: 60px;
}
.post p {
margin-bottom: 0;
}
.post.from-me .post-body {
background: #e8e8ff;
margin-left: 4rem;
margin-right: -1px;
}
.post.to-me .post-body {
margin-left: -1px;
margin-right: 4rem;
}
.post.from-me:after {
content: url('/speechbubble-r.png');
position: relative;
/* left: 100%; */
right: -100%;
top: -40px;
height: 0px;
width: 0px;
display: block;
}
.post.to-me:after {
content: url('/speechbubble-l.png');
position: relative;
left: -16px;
top: -40px;
height: 0px;
width: 0px;
display: block;
}
.post-date {
float: right;
height: 0.25em;
display: block;
font-size: 0.75rem;
padding-right: 0.5em;
}
.post-author {
/* font-weight: bold; */
font-size: 0.75rem;
position: relative;
top: -0.75em;
height: 0.75em;
}
.post-item {
}
.post-item-draft {
/* background: #e8e8ff; */
background: white;
border: solid #d3d3d3 1px;
border-radius: 1.5rem;
padding: 1rem;
margin: 1rem 0 0 0;
}
.post-item-draft .close-draft {
float: right;
}
.post-item-image {
max-width: 100%;
max-height: 50vh;
}
.post-item-draft .post-item-image {
max-width: 80%;
max-height: 30vh;
}