/* * # Semantic - Comment * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/*******************************
Theme
*******************************/
@type : ‘view’; @element : ‘comment’;
@import ‘../../theme.config’;
/*******************************
Standard
*******************************/
/*————–
Comments
—————*/
.ui.comments {
margin: @margin; max-width: @maxWidth;
}
.ui.comments:first-child {
margin-top: 0em;
} .ui.comments:last-child {
margin-bottom: 0em;
}
/*————–
Comment
—————*/
.ui.comments .comment {
position: relative; background: @commentBackground; margin: @commentMargin; padding: @commentPadding; border: @commentBorder; border-top: @commentDivider; line-height: @commentLineHeight;
} .ui.comments .comment:first-child {
margin-top: @firstCommentMargin; padding-top: @firstCommentPadding;
}
/*——————–
Nested Comments
———————*/
.ui.comments .comment .comments {
margin: @nestedCommentsMargin; padding: @nestedCommentsPadding;
} .ui.comments .comment .comments:before{
position: absolute; top: 0px; left: 0px;
} .ui.comments .comment .comments .comment {
border: @nestedCommentBorder; border-top: @nestedCommentDivider; background: @nestedCommentBackground;
}
/*————–
Avatar
—————*/
.ui.comments .comment .avatar {
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: 100%; height: 100%; border-radius: @avatarBorderRadius;
}
/*————–
Content
—————*/
.ui.comments .comment > .content {
display: block;
} /* If there is an avatar move content over */ .ui.comments .comment > .avatar ~ .content {
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: @metadataDisplay; margin-left: @metadataSpacing; color: @metadataColor; font-size: @metadataFontSize;
} .ui.comments .comment .metadata > * {
display: inline-block; margin: 0em @metadataContentSpacing 0em 0em;
} .ui.comments .comment .metadata > :last-child {
margin-right: 0em;
}
/*——————–
Comment Text
———————*/
.ui.comments .comment .text {
margin: @textMargin; font-size: @textFontSize; word-wrap: @textWordWrap; color: @textColor; line-height: @textLineHeight;
}
/*——————–
User Actions
———————*/
.ui.comments .comment .actions {
font-size: @actionFontSize;
} .ui.comments .comment .actions a {
cursor: pointer; display: inline-block; 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: @actionLinkHoverColor;
}
/*——————–
Reply Form
———————*/
.ui.comments > .reply.form {
margin-top: @replyDistance;
} .ui.comments .comment .reply.form {
width: 100%; margin-top: @commentReplyDistance;
} .ui.comments .reply.form textarea {
font-size: @replyFontSize; height: @replyHeight;
}
/*******************************
State
*******************************/
.ui.collapsed.comments, .ui.comments .collapsed.comments, .ui.comments .collapsed.comment {
display: none;
}
/*******************************
Variations
*******************************/
/*——————–
Threaded
———————*/
.ui.threaded.comments .comment .comments {
margin: @threadedCommentMargin; padding: @threadedCommentPadding; box-shadow: @threadedCommentBoxShadow;
}
/*——————–
Minimal
———————*/
.ui.minimal.comments .comment .actions {
opacity: 0; position: @minimalActionPosition; top: @minimalActionTop; right: @minimalActionRight; left: @minimalActionLeft; transition: @minimalTransition; transition-delay: @minimalTransitionDelay;
} .ui.minimal.comments .comment > .content:hover > .actions {
opacity: 1;
}
/*——————–
Sizes
———————*/
.ui.small.comments {
font-size: @small;
} .ui.comments {
font-size: @medium;
} .ui.large.comments {
font-size: @large;
} .ui.huge.comments {
font-size: @huge;
}
.loadUIOverrides();