Message { display: flex flex-direction: column background: white 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% margin-bottom: 15px div.main { a.avatar { img { width: 40px height: 40px } } } } } -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 } } } } } -missing { header { div.main { div.main { margin-left: 0 } } } section { font-size: 90% font-style: italic color: #777 } } -new, -unread { box-shadow: 0 0 1px #ffc600; z-index: 1; } header { font-size: 120% margin: 15px 20px 0 display: flex div.mini { flex: 1 } div.main { display: flex flex: 1 a.avatar { img { width: 50px height: 50px } } div.main { div.name { a { color: #444 font-weight: bold } } div.meta { font-size: 90% } 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; margin-top: -3px; -unread { :after { content: ' unread' font-size: 75% color: #b7b7b7 } } -new { :after { content: ' new' font-size: 75% color: #b7b7b7 } } -new, -unread { width: auto height: auto :before { color: #ffcf04 content: '✸' } :first-letter { font-size: 100% } } } em { display: inline-block padding: 4px } a.channel { font-weight: bold; } a.likes { color: #286bc3; font-size:90%; } span.private { display: inline-block; margin: -3px -3px 3px 4px; border: 4px solid #525050; position: relative; a { display: inline-block img { margin: 0 vertical-align: bottom border: none } } :after { content: 'private'; position: absolute; background: #525050; bottom: 0; left: -1px; font-size: 10px; padding: 2px 4px 0 2px; border-top-right-radius: 5px; color: white; font-weight: bold; pointer-events: none; white-space: nowrap } } } } section { margin: 0 padding: 0 20px max-height: 1500px overflow: hidden (img) { max-width: 100% } -expanded { max-height: none } } a.backlink { display: block; border-top: 1px solid #EEE; padding: 10px 15px; background: #ffffff; color: #8f8f8f; margin-top: -1px; font-size: 9pt; :hover { text-decoration: none color: #777 } } footer { margin: 5px 0 20px; padding: 0 20px div.expander { text-align: center; background-color: white; -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 { opacity: 0.4 transition: opacity 0.2s font-weight: bold color: #333 :hover { opacity: 1 text-decoration: none; } } a + a { margin-left: 25px; } } } }