// ------------------------------------ // Posts .Post { padding: 20px; margin: -1px -20px; transition: 0.2s box-shadow, top 0.2s, opacity 0.2s; position: relative; top: 0; border-radius: @border-radius; .clearfix(); &.editing { top: 5px; opacity: 0.5; } } .Post-header { margin-bottom: 15px; color: @muted-color; &, a { color: @muted-color; } > ul { list-style-type: none; padding: 0; margin: 0; > li { display: inline; margin-right: 10px; } } } .PostUser { margin: 0; display: inline; font-weight: normal; position: relative; h3 { display: inline; } h3, h3 a { color: @heading-color; font-weight: bold; font-size: 14px; } .UserOnline { & .icon { font-size: 12px; } & .fa-circle { color: @online-user-circle-color; } } .UserCard { position: absolute; top: -10px; left: -100px; z-index: @zindex-dropdown; .transition(~"opacity 0.2s, transform 0.2s"); transform: scale(0.95); transform-origin: left top; opacity: 0; &.in { transform: scale(1); opacity: 1; } } } .PostUser-badges { text-align: right; white-space: nowrap; pointer-events: none; .Badge { margin-left: -10px; position: relative; pointer-events: auto; } } .Post-body { font-size: 14px; line-height: 1.7; position: relative; overflow: auto; p, ul, ol, blockquote { margin-bottom: 1em; } a { border-bottom: 1px solid @control-bg; font-weight: 600; &:hover, &:focus, &:active { text-decoration: none; border-color: @link-color; } } blockquote { font-size: inherit; border: 0; background: @control-bg; color: @control-color; border-radius: @border-radius; padding: 8px 15px; border-top: 2px dotted @body-bg; border-bottom: 2px dotted @body-bg; margin: 1em 0; } // Inline code code { font-family: source-code-pro, Monaco, Consolas, "Courier New", monospace; padding: 5px; background: @code-bg; color: @code-color; line-height: 1.3; font-size: 90%; border-radius: 4px } // Code blocks pre { border: 0; padding: 15px; background: @code-bg; color: #666; font-size: 90%; border-radius: @border-radius; code { padding: 0; background: none; color: inherit; line-height: inherit; font-size: 100%; border-radius: 0; } } h1 { font-size: 160%; } h2 { font-size: 120%; font-weight: bold; } h3 { font-size: 100%; font-weight: bold; text-transform: uppercase; } h4, h5, h6 { font-size: 100%; font-weight: bold; } img, iframe { max-width: 100%; } } .Post--hidden { .Post-header, .Post-header a, .PostUser h3, .PostUser h3 a { color: @muted-more-color; } &:not(.revealContent) .Post-header { margin-bottom: 0; } .Post-body, .Post-footer, h3 .Avatar, .PostUser-badges { position: absolute; visibility: hidden; opacity: 0; margin-top: -5px; .transition(~"margin-top 0.2s, opacity 0.2s"); } &.revealContent { .Post-body, .Post-footer, h3 .Avatar, .PostUser-badges { visibility: visible; opacity: 0.5; margin-top: 0; } .Post-body, .Post-footer, .PostUser-badges { position: static; } } .Post-header .Button--more { background: fade(@muted-more-color, 30%); color: @muted-more-color; } } .Post--loading { opacity: 0.5; } .PostMeta { display: inline; } .PostMeta .Dropdown-menu { width: 420px; padding: 10px; color: @muted-color; @media @phone { padding: 15px !important; } } .PostMeta-number { color: @text-color; font-weight: bold; } .PostMeta-time, .PostMeta-ip { margin-left: 5px; } .PostMeta-permalink { margin-top: 10px; a& { display: block; overflow: hidden; text-overflow: ellipsis; } } .EventPost-icon { float: left; } .EventPost { &, a { color: @muted-color; } a { font-weight: bold; } } .EventPost-info { font-size: 14px; } .Post-footer, .Post-actions { > ul { list-style-type: none; padding: 0; margin: 0; } &, a { color: @muted-color; } a { display: inline-block; .icon { display: none; } } } .Post-footer { margin-top: 5px; > ul { > li { margin-bottom: 5px; } } .icon { font-size: 14px; margin-right: 5px; } } .Post-actions { margin-top: -5px; float: right; position: relative; .transition(opacity 0.2s); .EventPost &, .Post--hidden:not(.revealContent) & { margin-top: -27px; margin-bottom: -15px; } @media @tablet-up { .no-touch & { opacity: 0; } } > ul { > li { margin-right: 0; margin-left: -5px; display: inline-block; vertical-align: top; } } .Post:hover &, &.open { opacity: 1; } } .PostPreview { color: @muted-color; padding-left: 50px; line-height: 1.7em; .PostPreview-excerpt { word-wrap: break-word; } .Avatar { float: left; margin-left: -50px; .Avatar--size(32px); } .username { color: @text-color; font-weight: bold; margin-right: 5px; } time { margin-right: 5px; text-transform: uppercase; font-size: 11px; font-weight: 600; } } @media @phone { .Post-header { .Avatar { .Avatar--size(32px); vertical-align: middle; margin-right: 5px; } } .PostUser-badges { position: absolute; top: -12px; left: 6px; width: 32px; .Badge { .Badge--size(20px); margin-left: -13px; } } .EventPost { padding-left: 50px; } .EventPost-icon { font-size: 18px; margin-left: -30px; margin-top: 2px; } } @avatar-column-width: 85px; @media @tablet-up { .Post { padding-left: 20px + @avatar-column-width; } .CommentPost:not(.Post--hidden), .ReplyPlaceholder { min-height: 64px + 40px; // avatar height + padding } .PostUser-avatar { left: -@avatar-column-width; position: absolute; .Avatar--size(64px); } .PostUser-badges { float: left; position: relative; margin-left: -@avatar-column-width + 5px; margin-top: -3px; width: 64px; } .EventPost-icon { text-align: right; margin-left: -@avatar-column-width; width: 64px; font-size: 22px; } } .ReplyPlaceholder { font-size: 15px; cursor: text; overflow: hidden; margin-top: 50px; border: 2px dashed @control-bg; color: @muted-color; border-radius: 10px; .Post-header { margin: 0; color: inherit; } } @media @tablet-up { .ReplyPlaceholder { border-color: transparent; transition: border-color 0.2s; .Post-header { padding-top: 18px; position: relative; } .Avatar { margin-top: -18px; } &:hover { border-color: @control-bg; } } .LoadingPost .Post-header { position: relative; } }