diff options
Diffstat (limited to 'vnext/src/ui/Message.css')
| -rw-r--r-- | vnext/src/ui/Message.css | 210 |
1 files changed, 210 insertions, 0 deletions
diff --git a/vnext/src/ui/Message.css b/vnext/src/ui/Message.css new file mode 100644 index 00000000..18d3d0d5 --- /dev/null +++ b/vnext/src/ui/Message.css @@ -0,0 +1,210 @@ +.msg-cont .ir { + padding: 12px; +} +.msg-cont .ir img { + max-width: 100%; + height: auto; +} +.msg-cont > .h, +.msg-cont .msg-header { + padding: 12px; +} +.msg-cont > .l { + border-top: 1px solid #eee; + display: flex; + align-items: center; + justify-content: space-around; + background: #fdfdfe; +} +.msg-cont > .l a { + color: #88958d; + margin-right: 15px; + font-size: small; +} +.msg-tags { + color: #88958d; + margin-top: 12px; + min-height: 1px; +} +.badge, +.msg-tags > a { + color: #88958d; + display: inline-block; + font-size: small; +} +.msgthread { + margin-bottom: 0; +} +.msg-cont { + background: #FFF; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); + line-height: 140%; + margin-bottom: 12px; +} +.reply-new .msg-cont { + border-right: 5px solid #0C0; +} +.msg-ts { + font-size: small; + vertical-align: top; +} +.msg-ts, +.msg-ts > a { + color: #88958d; +} +.msg-txt { + margin: 0 0 12px; + padding: 12px; + word-wrap: break-word; + overflow-wrap: break-word; +} +q:before, +q:after { + content: ""; +} +q, +blockquote { + border-left: 3px solid #CCC; + color: #666; + display: block; + margin: 10px 0 10px 10px; + padding-left: 10px; + word-break: break-word; +} +.msg-media { + text-align: center; +} +.msg-links { + color: #88958d; + font-size: small; + margin: 5px 0 0 0; + padding: 12px; +} +.msg-comments { + color: #88958d; + font-size: small; + margin-top: 10px; + overflow: hidden; + text-indent: 10px; +} +.ta-wrapper { + border: 1px solid #DDD; + display: flex; + flex-grow: 1; +} +.msg-comment { + display: flex; + margin-top: 10px; +} +.msg-comment-hidden { + display: none; +} +.msg-comment textarea { + border: 0; + flex-grow: 1; + outline: none !important; + padding: 4px; + resize: vertical; + vertical-align: top; +} +.attach-photo { + cursor: pointer; +} +.attach-photo-active { + color: green; +} +.msg-comment input { + align-self: flex-start; + background: #EEE; + border: 1px solid #CCC; + color: #999; + margin: 0 0 0 6px; + position: sticky; + top: 70px; + vertical-align: top; + width: 50px; +} +.msg-recomms { + color: #88958d; + background: #fdfdfe; + font-size: small; + margin-bottom: 10px; + padding: 6px; + border-bottom: 1px solid #eee; + overflow: hidden; + text-indent: 10px; +} +.msg-summary, +.msg-summary a { + color: #88958d; + font-size: small; + padding: 12px; + text-align: right; +} +#replies .msg-txt, +#private-messages .msg-txt { + margin: 0; +} +.title2 { + background: #fff; + margin: 20px 0; + padding: 10px 20px; +} +.title2-right { + float: right; + line-height: 24px; +} +#content .title2 h2 { + font-size: x-large; + margin: 0; +} + +.embedContainer { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + padding: 12px; + margin: 30px -3px 15px -3px; +} +.embedContainer > * { + box-sizing: border-box; + flex-grow: 1; + margin: 3px; + min-width: 49%; +} +.embedContainer > .compact { + flex-grow: 0; +} +.embedContainer .picture img { + display: block; +} +.embedContainer img, +.embedContainer video { + max-width: 100%; + max-height: 80vh; +} +.embedContainer > .audio, +.embedContainer > .youtube { + min-width: 90%; +} +.embedContainer audio { + width: 100%; +} +.embedContainer iframe { + overflow: hidden; + resize: vertical; + display: block; +} +.msg-cont .nsfw .embedContainer img, +.msg-cont .nsfw .embedContainer video, +.msg-cont .nsfw .embedContainer iframe, +.msg-cont .nsfw .ir img { + opacity: 0.1; +} +.msg-cont .nsfw .embedContainer img:hover, +.msg-cont .nsfw .embedContainer video:hover, +.msg-cont .nsfw .embedContainer iframe:hover, +.msg-cont .nsfw .ir img:hover { + opacity: 1; +} |