Message { display: flex flex-direction: column box-shadow: #dadada 1px 2px 8px border: 1px solid #f5f5f5 background: white position: relative font-size: 120% 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 { margin-bottom: 15px } } -reply { font-size: 100% header { div.main { a.avatar { img { width: 30px } } } } } -new { border-color: #ffe794 } header { margin: 15px 15px margin-bottom: 5px; display: flex div.mini { flex: 1 } div.main { display: flex flex: 1 a.avatar { img { width: 50px } } div.main { div.name { font-size: 120% a { color: #444 font-weight: bold } } div.meta { font-size: 90% } margin-left: 10px } } div.meta { span.flag { width: 12px height: 12px background-repeat: no-repeat background-position: center display: inline-block vertical-align: middle; margin-top: -3px; -new { background-image: svg(new) } @svg new { width: 12px height: 12px content: "" } } em { display: inline-block padding: 4px } a.channel { display: inline-block padding: 4px } span.likes { color: #ffffff; background: linear-gradient(45deg, #859c88, #87d47d); padding: 5px 8px; border-radius: 10px; display: inline-block; vertical-align: top; margin: -2px 0; } 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 15px (img) { max-width: 100% } } a.backlink { display: block; border-top: 1px solid #e2e0e0; margin: 0 -1px; padding: 10px 15px; background: #f3f2f2; border-bottom: 1px solid #d1d0d0; color: #8f8f8f; margin-top: -1px; font-size: 9pt; :hover { text-decoration: none color: #777 } } footer { margin: 10px 10px; border-top: 1px solid #eee; padding-top: 10px; margin-top: 5px; padding-left: 5px; div.actions { a { margin-right: 10px; color: #9a9a9a; font-weight: bold; padding: 5px :hover { background: #cbeeff; color: #3b7ba2; text-decoration: none; border-color: #8eafc1; } } } } }