Message { display: flex flex-direction: column background: #383736 position: relative font-size: 120% line-height: 1.4 flex-shrink: 0 (highlight) { background-color: yellow } :focus { z-index: 1 } -data { header { div.main { font-size: 80% a.avatar { img { width: 25px } } } } (pre) { overflow: auto max-height: 200px } } -mini { header { font-size: 100% div.main { a.avatar { img { width: 40px height: 40px } } } } } -missing { header { div.main { div.main { margin-left: 0 } } } section { font-size: 90% font-style: italic color: #777 } } -compact { section { max-height: 300px } } -reply { header { font-size: 100% div.meta { a.channel { display: none; } span.private { (img) { width: 40px height: 40px } } } div.main { a.avatar { img { width: 40px height: 40px } } } } } -new { box-shadow: 0 0 1px #efef00; z-index: 1; } header { font-size: 120% margin: 20px 20px 0 display: flex div.mini { flex: 1 } div.main { display: flex flex: 1 a.avatar { img { border-radius: 3px width: 50px height: 50px } } div.main { div.name { a { color: #c3c3c3 font-weight: bold :hover { color: #ddd } } } div.meta { font-size: 75% color: #8a8a8a; (a) { color: #b3b8e0 :hover { color: #dfdfe2 } } } margin-left: 10px } } div.meta { display: flex; flex-direction: column-reverse; align-items: flex-end; justify-content: flex-end; span.flag { width: 12px height: 12px background-repeat: no-repeat background-position: center display: inline-block vertical-align: middle; -new { width: auto height: auto color: #757474 :before { content: '✸ new' font-size: 75% } :hover { color: #efef00 } :first-letter { color: #efef00 } } } em { display: inline-block padding: 4px } a.channel { font-size: 75%; :hover { color: #c1cdf0 } } a.likes { font-size: 75%; ::before { content: '❤ ' color: #ff2f92 } :hover { color: #ff2f92 } } (a.Timestamp) { font-size: 75% font-weight: normal } span.private { display: inline-block; margin: -3px -3px 3px 4px; position: relative; a { display: inline-block :first-child { img { border-top-left-radius: 3px border-bottom-left-radius: 3px } } :last-child { img { border-top-right-radius: 3px border-bottom-right-radius: 3px } } img { margin: 0 vertical-align: bottom border: none } } :after { content: 'private'; position: absolute; background: rgba(0,0,0,0.75); bottom: 0; left: -1px; font-size: 10px; padding: 1px 4px; border-top-right-radius: 3px; color: #ccc; pointer-events: none; white-space: nowrap } } } } section { margin: 0 padding: 0 20px max-height: 1500px overflow: hidden -expanded { max-height: none } (img) { max-width: 100% } } a.backlink { display: block; padding: 10px 20px background: #2d2c2c color: #757474; margin-top: -1px; font-size: 9pt; :hover { text-decoration: none color: #aaa } } footer { margin: 5px 0 20px; padding: 0 20px div.expander { text-align: center; background-color: #383736; -truncated { padding-top: 50px; margin-top: -50px; -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0)); a { :before { content: '▼ '; font-size: 80% } } } } div.actions { a.like { :before { content: "❤ " } :hover { background: #ff2f92 } } a.unlike { :before { content: "" } :hover { background: #434141 } } a { font-size: 13px background: #2d2c2c padding: 6px 10px border-radius: 3px color: #ccc display: inline-block text-align: center transition: background-color 0.25s ease, color 0.25s ease :before { content: "↩ " } :hover { background: #45b754 color: white } } a + a { margin-left: 10px; } } } }