You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
271 lines
4.7 KiB
271 lines
4.7 KiB
/*! |
|
* # Semantic UI 2.4.1 - Comment |
|
* http://github.com/semantic-org/semantic-ui/ |
|
* |
|
* |
|
* 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.87); |
|
font-weight: bold; |
|
} |
|
.ui.comments .comment a.author { |
|
cursor: pointer; |
|
} |
|
.ui.comments .comment a.author:hover { |
|
color: #1e70bf; |
|
} |
|
|
|
/*-------------- |
|
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.87); |
|
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; |
|
-webkit-box-shadow: -1px 0px 0px rgba(34, 36, 38, 0.15); |
|
box-shadow: -1px 0px 0px rgba(34, 36, 38, 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.mini.comments { |
|
font-size: 0.78571429rem; |
|
} |
|
.ui.tiny.comments { |
|
font-size: 0.85714286rem; |
|
} |
|
.ui.small.comments { |
|
font-size: 0.92857143rem; |
|
} |
|
.ui.comments { |
|
font-size: 1rem; |
|
} |
|
.ui.large.comments { |
|
font-size: 1.14285714rem; |
|
} |
|
.ui.big.comments { |
|
font-size: 1.28571429rem; |
|
} |
|
.ui.huge.comments { |
|
font-size: 1.42857143rem; |
|
} |
|
.ui.massive.comments { |
|
font-size: 1.71428571rem; |
|
} |
|
|
|
|
|
/******************************* |
|
Theme Overrides |
|
*******************************/ |
|
|
|
|
|
|
|
/******************************* |
|
User Variable Overrides |
|
*******************************/ |
|
|
|
|