/*! * # Fomantic-UI 2.9.2 - Comment * https://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * https://opensource.org/licenses/MIT * */ /******************************* Standard *******************************/ /* -------------- Comments --------------- */ .ui.comments { margin: 1.5em 0; max-width: 650px; } .ui.comments:first-child { margin-top: 0; } .ui.comments:last-child { margin-bottom: 0; } /* -------------- Comment --------------- */ .ui.comments .comment { position: relative; background: none; margin: 0.5em 0 0; padding: 0.5em 0 0; border: none; border-top: none; line-height: 1.2; } .ui.comments .comment:first-child { margin-top: 0; padding-top: 0; } /* -------------------- Nested Comments --------------------- */ .ui.comments .comment > .comments { margin: 0 0 0.5em 0.5em; padding: 1em 0 1em 1em; } .ui.comments .comment > .comments::before { position: absolute; top: 0; left: 0; } .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 0 0; } .ui.comments .comment img.avatar, .ui.comments .comment .avatar img { display: block; margin: 0 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: 0 0.5em 0 0; } .ui.comments .comment .metadata > :last-child { margin-right: 0; } /* -------------------- Comment Text --------------------- */ .ui.comments .comment .text { margin: 0.25em 0 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: 0 0.75em 0 0; color: rgba(0, 0, 0, 0.4); } .ui.comments .comment .actions a:last-child { margin-right: 0; } .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 0 2em 2.25em; box-shadow: -1px 0 0 rgba(34, 36, 38, 0.15); } /* -------------------- Minimal --------------------- */ .ui.minimal.comments .comment .actions { opacity: 0; position: absolute; top: 0; right: 0; left: auto; transition: opacity 0.2s ease; transition-delay: 0.1s; } .ui.minimal.comments .comment > .content:hover > .actions { opacity: 1; } /* ------------------- Sizes -------------------- */ .ui.comments { font-size: 1rem; } .ui.mini.comments { font-size: 0.78571429rem; } .ui.tiny.comments { font-size: 0.85714286rem; } .ui.small.comments { font-size: 0.92857143rem; } .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; } /* ------------------- Inverted -------------------- */ .ui.inverted.comments .comment { background-color: #1b1c1d; } .ui.inverted.comments .comment .author, .ui.inverted.comments .comment .text { color: rgba(255, 255, 255, 0.9); } .ui.inverted.comments .comment .metadata, .ui.inverted.comments .comment .actions a { color: rgba(255, 255, 255, 0.7); } .ui.inverted.comments .comment a.author:hover, .ui.inverted.comments .comment .actions a.active, .ui.inverted.comments .comment .actions a:hover { color: #ffffff; } .ui.inverted.threaded.comments .comment > .comments { box-shadow: -1px 0 0 #555; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/