/* * # Semantic UI * https://github.com/Semantic-Org/Semantic-UI * http://www.semantic-ui.com/ * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/*******************************
Standard
*******************************/
/*————–
Comments
—————*/
.ui.comments {
margin: 1.5em 0em; max-width: 650px;
} .ui.comments:first-child {
margin-top: 0em;
} .ui.comments:last-child {
margin-bottom: 0em;
}
/*————–
Comment
—————*/
.ui.comments .comment {
position: relative; background: none; margin: 0.5em 0em 0em; padding: 0.5em 0em 0em; border: none; border-top: none; line-height: 1.2;
} .ui.comments .comment:first-child {
margin-top: 0em; padding-top: 0em;
}
/*——————–
Nested Comments
———————*/
.ui.comments .comment .comments {
margin: 0em 0em 0.5em 0.5em; padding: 1em 0em 1em 1em;
} .ui.comments .comment .comments:before {
position: absolute; top: 0px; left: 0px;
} .ui.comments .comment .comments .comment {
border: none; border-top: none; background: none;
}
/*————–
Avatar
—————*/
.ui.comments .comment .avatar {
display: block; width: 2.5em; height: auto; float: left; margin: 0.2em 0em 0em;
} .ui.comments .comment img.avatar, .ui.comments .comment .avatar img {
display: block; margin: 0em auto; width: 100%; height: 100%; border-radius: 0.25rem;
}
/*————–
Content
—————*/
.ui.comments .comment > .content {
display: block;
}
/* If there is an avatar move content over */ .ui.comments .comment > .avatar ~ .content {
margin-left: 3.5em;
}
/*————–
Author
—————*/
.ui.comments .comment .author {
font-size: 1em; color: rgba(0, 0, 0, 0.8); font-weight: bold;
} .ui.comments .comment a.author {
cursor: pointer;
} .ui.comments .comment a.author:hover {
color: #00b2f3;
}
/*————–
Metadata
—————*/
.ui.comments .comment .metadata {
display: inline-block; margin-left: 0.5em; color: rgba(0, 0, 0, 0.4); font-size: 0.875em;
} .ui.comments .comment .metadata > * {
display: inline-block; margin: 0em 0.5em 0em 0em;
} .ui.comments .comment .metadata > :last-child {
margin-right: 0em;
}
/*——————–
Comment Text
———————*/
.ui.comments .comment .text {
margin: 0.25em 0em 0.5em; font-size: 1em; word-wrap: break-word; color: rgba(0, 0, 0, 0.8); line-height: 1.3;
}
/*——————–
User Actions
———————*/
.ui.comments .comment .actions {
font-size: 0.875em;
} .ui.comments .comment .actions a {
cursor: pointer; display: inline-block; margin: 0em 0.75em 0em 0em; color: rgba(0, 0, 0, 0.4);
} .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.8);
}
/*——————–
Reply Form
———————*/
.ui.comments > .reply.form {
margin-top: 1em;
} .ui.comments .comment .reply.form {
width: 100%; margin-top: 1em;
} .ui.comments .reply.form textarea {
font-size: 1em; height: 12em;
}
/*******************************
State
*******************************/
.ui.collapsed.comments, .ui.comments .collapsed.comments, .ui.comments .collapsed.comment {
display: none;
}
/*******************************
Variations
*******************************/
/*——————–
Threaded
———————*/
.ui.threaded.comments .comment .comments {
margin: -1.5em 0 -1em 1.25em; padding: 3em 0em 2em 2.25em; box-shadow: -1px 0px 0px rgba(39, 41, 43, 0.15);
}
/*——————–
Minimal
———————*/
.ui.minimal.comments .comment .actions {
opacity: 0; position: absolute; top: 0px; right: 0px; left: auto; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; -webkit-transition-delay: 0.1s; transition-delay: 0.1s;
} .ui.minimal.comments .comment > .content:hover > .actions {
opacity: 1;
}
/*——————–
Sizes
———————*/
.ui.small.comments {
font-size: 0.9em;
} .ui.comments {
font-size: 1em;
} .ui.large.comments {
font-size: 1.1em;
} .ui.huge.comments {
font-size: 1.2em;
}
/*******************************
Theme Overrides
*******************************/
/*******************************
User Variable Overrides
*******************************/