diff --git a/src/definitions/views/comment.less b/src/definitions/views/comment.less index 3c8193dcc..660c94c29 100755 --- a/src/definitions/views/comment.less +++ b/src/definitions/views/comment.less @@ -29,74 +29,117 @@ ---------------*/ .ui.comments { + margin: @margin; + max-width: @maxWidth; +} - +.ui.comments:first-child { + margin-top: 0em; } -.ui.comments a { - cursor: pointer; +.ui.comments:last-child { + margin-bottom: 0em; } - /*-------------- Comment ---------------*/ .ui.comments .comment { position: relative; - margin-top: 0.5em; - padding-top: 0.5em; + margin: @commentMargin; + padding: @commentPadding; + border: @commentBorder; + border-top: @commentDivider; + line-height: @commentLineHeight; } .ui.comments .comment:first-child { - margin-top: 0em; - padding-top: 0em; + margin-top: @firstCommentMargin; + padding-top: @firstCommentPadding; } - /*-------------------- - Avatar (Optional) + Nested Comments ---------------------*/ +.ui.comments .comment .comments { + margin: @nestedCommentsMargin; + padding: @nestedCommentsPadding; +} +.ui.comments .comment .comments:before{ + position: absolute; + top: 0px; + left: 0px; +} +/* One Deep */ +.ui.comments > .comment .comments { + margin-left: 1em; +} + +/*-------------- + Avatar +---------------*/ + .ui.comments .comment .avatar { - display: block; - float: left; - width: 4em; + display: @avatarDisplay; + width: @avatarWidth; + height: @avatarHeight; + float: @avatarFloat; + margin: @avatarMargin; } +.ui.comments .comment img.avatar, .ui.comments .comment .avatar img { display: block; margin: 0em auto; - - width: 3em; - height: 3em; - border-radius: 500px; + width: 100%; + height: 100%; + border-radius: @avatarBorderRadius; } /*-------------- - Content + Content ---------------*/ -.ui.comments .comment > .content, -.ui.comments .comment > .avatar { +.ui.comments .comment > .content { display: block; } -.ui.comments .comment .avatar ~ .content { - padding: 0em 1em; -} - /* If there is an avatar move content over */ .ui.comments .comment > .avatar ~ .content { - padding-top: 0.25em; - margin-left: 3.5em; + margin-left: @contentMargin; } +/*-------------- + Author +---------------*/ + +.ui.comments .comment .author { + font-size: @authorFontSize; + color: @authorColor; + font-weight: @authorFontWeight; +} +.ui.comments .comment a.author { + cursor: pointer; +} +.ui.comments .comment a.author:hover { + color: @authorHoverColor; +} + +/*-------------- + Metadata +---------------*/ + .ui.comments .comment .metadata { - display: inline-block; - margin-left: 0.3em; - color: rgba(0, 0, 0, 0.4); + display: @metadataDisplay; + margin-left: @metadataSpacing; + color: @metadataColor; + font-size: @metadataFontSize; } .ui.comments .comment .metadata > * { display: inline-block; - margin: 0em 0.3em 0em 0em; + margin: 0em @metadataContentSpacing 0em 0em; +} +.ui.comments .comment .metadata > :last-child { + margin-right: 0em; } /*-------------------- @@ -104,79 +147,58 @@ ---------------------*/ .ui.comments .comment .text { - margin: 0.25em 0em 0.5em; - word-wrap: break-word; + margin: @textMargin; + font-size: @textFontSize; + word-wrap: @textWordWrap; + color: @textColor; + line-height: @textLineHeight; } + /*-------------------- User Actions ---------------------*/ .ui.comments .comment .actions { - font-size: 0.9em; + font-size: @actionFontSize; } .ui.comments .comment .actions a { + cursor: pointer; display: inline-block; - margin: 0em 0.3em 0em 0em; - color: rgba(0, 0, 0, 0.3); + margin: 0em @actionContentDistance 0em 0em; + color: @actionLinkColor; +} +.ui.comments .comment .actions a:last-child { + margin-right: 0em; } .ui.comments .comment .actions a.active, .ui.comments .comment .actions a:hover { - color: rgba(0, 0, 0, 0.6); + color: @actionLinkHoverColor; } /*-------------------- Reply Form ---------------------*/ -.ui.comments .reply.form { - margin-top: 0.75em; - width: 100%; - max-width: 30em; +.ui.comments > .reply.form { + margin-top: @replyDistance; } .ui.comments .comment .reply.form { - margin-left: 2em; -} -.ui.comments > .reply.form { - margin-top: 1.5em; - max-width: 40em; + width: 100%; + margin-top: @commentReplyDistance; } .ui.comments .reply.form textarea { - height: 12em; + font-size: @replyFontSize; + height: @replyHeight; } +/******************************* + State +*******************************/ - -/*-------------------- - Nested Comments ----------------------*/ - -.ui.comments .comment .comments { - margin-top: 0.5em; - padding-top: 0.5em; - padding-bottom: 1em; -} -.ui.comments .comment .comments:before{ - position: absolute; - top: 0px; - left: 0px; -} -/* One Deep */ -.ui.comments > .comment .comments { - margin-left: 2em; - -} -/* Two Deep */ -.ui.comments > .comment > .comments > .comment > .comments { - margin-left: 1.75em; -} -/* Three Deep */ -.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments { - margin-left: 1.5em; -} -/* Four Deep or more */ -.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments { - margin-left: 0.5em; +.ui.collapsed.comments, +.ui.comments .collapsed.comments { + display: none; } @@ -189,12 +211,9 @@ ---------------------*/ .ui.threaded.comments .comment .comments { - margin-left: 2em !important; - padding-left: 2em !important; - - -webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); - -moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); - box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); + margin: @threadedCommentVerticalOffset 0em 0em @threadedCommentHorizontalOffset; + padding: @threadedCommentVerticalDistance 0em 0em @threadedCommentHorizontalDistance; + box-shadow: @threadedCommentBoxShadow; } /*-------------------- @@ -203,18 +222,12 @@ .ui.minimal.comments .comment .actions { opacity: 0; - - -webkit-transition: opacity 0.1s ease-out; - -moz-transition: opacity 0.1s ease-out; - -o-transition: opacity 0.1s ease-out; - -ms-transition: opacity 0.1s ease-out; - transition: opacity 0.1s ease-out; - - -webkit-transition-delay: 0.1s; - -moz-transition-delay: 0.1s; - -o-transition-delay: 0.1s; - -ms-transition-delay: 0.1s; - transition-delay: 0.1s; + position: @minimalActionPosition; + top: @minimalActionTop; + right: @minimalActionRight; + left: @minimalActionLeft; + transition: @minimalTransition; + transition-delay: @minimalTransitionDelay; } .ui.minimal.comments .comment > .content:hover > .actions { opacity: 1; @@ -225,5 +238,14 @@ ---------------------*/ .ui.small.comments { - font-size: 0.875em; + font-size: @small; +} +.ui.comments { + font-size: @medium; +} +.ui.large.comments { + font-size: @large; +} +.ui.huge.comments { + font-size: @huge; } \ No newline at end of file diff --git a/src/themes/packages/default/views/comment.variables b/src/themes/packages/default/views/comment.variables index 139d2996c..ccefc2246 100644 --- a/src/themes/packages/default/views/comment.variables +++ b/src/themes/packages/default/views/comment.variables @@ -4,15 +4,100 @@ /*------------------- - View + View --------------------*/ +@maxWidth: 650px; +@margin: 1.5em 0em; + /*------------------- Elements --------------------*/ +/* Comment */ +@commentMargin: 0.75em 0em 0em; +@commentPadding: 0.75em 0em 0em; +@commentDivider: none; +@commentBorder: none; +@commentLineHeight: 1.2; +@firstCommentMargin: 0em; +@firstCommentPadding: 0em; + +/* Nested Comment */ +@nestedCommentsMargin: 0em 0em 0.5em 0em; +@nestedCommentsPadding: 1em 0em 0em 1em; + +/* Avatar */ +@avatarDisplay: block; +@avatarFloat: left; +@avatarWidth: 2.5em; +@avatarHeight: auto; +@avatarSpacing: 1em; +@avatarMargin: (@commentLineHeight - 1em) 0em 0em; +@avatarBorderRadius: 0.25rem; + +/* Content */ +@contentMargin: @avatarWidth + @avatarSpacing; + +/* Author */ +@authorFontSize: 1em; +@authorColor: @textColor; +@authorHoverColor: @linkHoverColor; +@authorFontWeight: bold; + +/* Metadata */ +@metadataDisplay: inline-block; +@metadataFontSize: 0.9em; +@metadataSpacing: 0.5em; +@metadataContentSpacing: 0.5em; +@metadataColor: @lightTextColor; + +/* Text */ +@textFontSize: 1em; +@textMargin: 0.25em 0em 0.5em; +@textWordWrap: break-word; +@textLineHeight: 1.3; + +/* Actions */ +@actionFontSize: 0.9em; +@actionContentDistance: 0.3em; +@actionLinkColor: @unselectedTextColor; +@actionLinkHoverColor: @selectedTextColor; +/* Reply */ +@replyDistance: 2em; +@replyHeight: 12em; +@replyFontSize: 1em; +@replyMaxWidth: 40em; + +@commentReplyDistance: @replyDistance; +@commentReplyMaxWidth: 30em; /*------------------- Variations ---------------------*/ \ No newline at end of file +--------------------*/ + +/* Threaded */ +@threadedCommentVerticalOffset: -1.5em; +@threadedCommentHorizontalOffset: (@avatarWidth / 2); +@threadedCommentBoxShadow: -1px 0px 0px rgba(0, 0, 0, 0.05); + +@threadedCommentVerticalDistance: 2em; +@threadedCommentHorizontalDistance: 2em; + +/* Minimal */ +@minimalActionPosition: absolute; +@minimalActionTop: 0px; +@minimalActionRight: 0px; +@minimalActionLeft: auto; + +@minimalTransitionDelay: 0.1s; +@minimalEasing: @defaultEasing; +@minimalDuration: 0.2s; +@minimalTransition: opacity @minimalDuration @minimalEasing; + +/* Sizes */ +@small: 0.9em; +@medium: 1em; +@large: 1.1em; +@huge: 1.2em; \ No newline at end of file