<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="demo.css">
<title>Memondo Comments</title>
</head>
<body>
<div class="pagewidth">
<h1>Memondo Comments - HTML/CSS/JS example</h1>
<ul class="comment-list" data-next-comment="10">
<li id="comment-1" class="comment high" data-id="1" data-parent="0">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_jimmy_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-triangle-up"></i></button>
<span class="num">45</span>
<button class="btn btn-score-down"><i class="cicon-triangle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#1</a>
<a class="user-name" href="">Jimmy</a>
<span class="comment-date">on March 2, 2016 at 17:29</span>
</div>
<div class="comment-content">
<p>Well, that's America for ya. No, no, really, that's fascinating. Vamos the car, amigo! Sorry, lady! Nothing personal. I know, I know, it ain't fuckin' cool! You are out of control!</p>
<p>I ain't got time to swap details, asshole! Next time you'll listen. Well, you know what I mean! Hey, I'm serious. Get lost. You need receipt? For taxes? Might as well get the body bag, bro.</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-show-replies"><i class="cicon-replies"></i><span>3 replies</span></button>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-2" class="comment high" data-id="2" data-parent="0">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_tracey_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-triangle-up"></i></button>
<span class="num">22</span>
<button class="btn btn-score-down"><i class="cicon-triangle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#2</a>
<a class="user-name" href="">Tracey</a>
<span class="comment-date">on March 2, 2016 at 19:31</span>
</div>
<div class="comment-content">
<p>Who's got eyes??!! </p>
<p>Are you following me, kid? </p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-3" class="comment" data-id="3" data-parent="1">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_amanda_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-triangle-up"></i></button>
<span class="num">2</span>
<button class="btn btn-score-down"><i class="cicon-triangle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#3</a>
<a class="user-name" href="">Amanda</a>
<span class="label label-moderator">MODERATOR</span>
<span class="comment-date">on March 2, 2016 at 17:41</span>
</div>
<div class="comment-content">
<p><a href="">#1 @jimmy</a> This is U.S. military airspace. Divert now, or face the consequences.</p>
<p>Sir, leave the area now! This is for authorised personnel only. Drop the weapon! Oh shit, they got Charlie!</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-4" class="comment" data-id="4" data-parent="1">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_michael_jetski_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-triangle-up"></i></button>
<span class="num">17</span>
<button class="btn btn-score-down"><i class="cicon-triangle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#4</a>
<a class="user-name" href="">Michael</a>
<span class="comment-date">on March 2, 2016 at 17:52</span>
</div>
<div class="comment-content">
<p><a href="">#1 @jimmy</a> Arrgh, Jesus! This, was a nice car! You should get some help with that personality of yours!</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-show-replies"><i class="cicon-replies"></i><span>1 reply</span></button>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-5" class="comment" data-id="5" data-parent="4">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_jimmy_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-triangle-up"></i></button>
<span class="num">-1</span>
<button class="btn btn-score-down"><i class="cicon-triangle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#5</a>
<a class="user-name" href="">Jimmy</a>
<span class="comment-date">on March 2, 2016 at 17:55</span>
</div>
<div class="comment-content">
<p><a href="">#4 @michael</a> Eh, you keep on going dawg, you hear me? And people say I'm a disgrace to society? You punk-ass bitches is done, now! </p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-6" class="comment" data-id="6" data-parent="1">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_michael_jetski_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-triangle-up"></i></button>
<span class="num">0</span>
<button class="btn btn-score-down"><i class="cicon-triangle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#6</a>
<a class="user-name" href="">Michael</a>
<span class="comment-date">on March 2, 2016 at 17:57</span>
</div>
<div class="comment-content">
<p><a href="">#1 @jimmy</a> Jimbo! I love you, son. What's up, amigo? What's going on, <a href="">@tracey</a>? </p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-7" class="comment" data-id="7" data-parent="0">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_hunt_f_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-triangle-up"></i></button>
<span class="num">8</span>
<button class="btn btn-score-down"><i class="cicon-triangle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#7</a>
<a class="user-name" href="">Franklin</a>
<span class="label label-admin">ADMIN</span>
<span class="comment-date">on March 2, 2016 at 18:01</span>
</div>
<div class="comment-content">
<p>Man, your genetic experiment gone wrong, dawg!</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-8" class="comment low" data-id="8" data-parent="0">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_trevor_atv_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-triangle-up"></i></button>
<span class="num">-22</span>
<button class="btn btn-score-down"><i class="cicon-triangle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#8</a>
<a class="user-name" href="">Trevor</a>
<span class="comment-date">on March 2, 2016 at 18:12</span>
</div>
<div class="comment-content">
<p>Wanna hunt?</p>
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/wallpapers/games/v_frisk_me_1024x768.jpg" />
<p>How have you beeeeeeeeeen, <a href="">@amanda</a>? Wow... you are BIG! I mean, you're the size of a house!</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-show-replies"><i class="cicon-replies"></i><span>1 reply</span></button>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-9" class="comment" data-id="9" data-parent="8">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_frisk_me_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-triangle-up"></i></button>
<span class="num">19</span>
<button class="btn btn-score-down"><i class="cicon-triangle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#9</a>
<a class="user-name" href="">UnknownGirl89</a>
<span class="comment-date">on March 2, 2016 at 18:12</span>
</div>
<div class="comment-content">
<p><a href="">#8 @trevor</a> Can I join?</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/W35XSzAJz2I" frameborder="0" allowfullscreen></iframe>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li class="new-comment comment">
<div class="comment-lcol">
<a class="user-avatar" href="">
<!-- Firefox can't display dashed borders on rounded elements. -->
<!-- Read: https://bugzilla.mozilla.org/show_bug.cgi?id=382721 -->
<object class="larger-screens" type="image/svg+xml" data="data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><circle cy='40' cx='40' r='38' style='fill:rgb(255, 255, 255);stroke-width:1;stroke-opacity:1;stroke:rgb(214, 214, 214);stroke-dasharray:4;' /></svg>"></object>
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_heists_balaclava_256x256.jpg" alt="">
</a>
</div>
<div class="comment-rcol">
<div class="anonymous-user">
<div class="join">Join the conversation!</div>
<div>
<a class="btn btn-sign-up" href="">New user account</a>
</div>
<div>
<p>Already registered?</p>
<a class="btn btn-sign-up" href="">Sign in</a>
</div>
</div>
<div class="registered-user">
<div class="comment-header">
<a class="comment-id" href=""></a>
<a class="user-name" href="">UnknownGuy84</a>
<span class="comment-date"></span>
</div>
<div class="comment-content">
<form name="comment-form" method="post" action="">
<textarea name="comment" placeholder="Write your comment here..."></textarea>
<div class="submit-feedback"></div>
<div class="comment-actions">
<button type="submit" class="btn">POST COMMENT</button>
</div>
</form>
</div>
</div>
</div>
</li>
</ul>
<div class="col1">
<h1>Variation 1</h1>
<ul id="variation-1" class="comment-list" data-next-comment="10">
<li id="comment-1" class="comment high" data-id="1" data-parent="0">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_jimmy_256x256.jpg" alt="">
</a>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#1</a>
<a class="user-name" href="">Jimmy</a>
<span class="comment-date">on March 2, 2016 at 17:29</span>
</div>
<div class="comment-content">
<p>Well, that's America for ya. No, no, really, that's fascinating. Vamos the car, amigo! Sorry, lady! Nothing personal. I know, I know, it ain't fuckin' cool! You are out of control!</p>
<p>I ain't got time to swap details, asshole! Next time you'll listen. Well, you know what I mean! Hey, I'm serious. Get lost. You need receipt? For taxes? Might as well get the body bag, bro.</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-thumbs-up"></i></button>
<span class="num">45</span>
<button class="btn btn-score-down"><i class="cicon-thumbs-down"></i></button>
</div>
<button class="btn btn-show-replies"><i class="cicon-replies"></i><span>3 replies</span></button>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-2" class="comment high" data-id="2" data-parent="0">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_tracey_256x256.jpg" alt="">
</a>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#2</a>
<a class="user-name" href="">Tracey</a>
<span class="comment-date">on March 2, 2016 at 19:31</span>
</div>
<div class="comment-content">
<p>Who's got eyes??!! </p>
<p>Are you following me, kid? </p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-thumbs-up"></i></button>
<span class="num">22</span>
<button class="btn btn-score-down"><i class="cicon-thumbs-down"></i></button>
</div>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-3" class="comment" data-id="3" data-parent="1">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_amanda_256x256.jpg" alt="">
</a>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#3</a>
<a class="user-name" href="">Amanda</a>
<span class="label label-moderator">MODERATOR</span>
<span class="comment-date">on March 2, 2016 at 17:41</span>
</div>
<div class="comment-content">
<p><a href="">#1 @jimmy</a> This is U.S. military airspace. Divert now, or face the consequences.</p>
<p>Sir, leave the area now! This is for authorised personnel only. Drop the weapon! Oh shit, they got Charlie!</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-thumbs-up"></i></button>
<span class="num">2</span>
<button class="btn btn-score-down"><i class="cicon-thumbs-down"></i></button>
</div>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-4" class="comment" data-id="4" data-parent="1">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_michael_jetski_256x256.jpg" alt="">
</a>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#4</a>
<a class="user-name" href="">Michael</a>
<span class="comment-date">on March 2, 2016 at 17:52</span>
</div>
<div class="comment-content">
<p><a href="">#1 @jimmy</a> Arrgh, Jesus! This, was a nice car! You should get some help with that personality of yours!</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-thumbs-up"></i></button>
<span class="num">17</span>
<button class="btn btn-score-down"><i class="cicon-thumbs-down"></i></button>
</div>
<button class="btn btn-show-replies"><i class="cicon-replies"></i><span>1 reply</span></button>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-5" class="comment" data-id="5" data-parent="4">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_jimmy_256x256.jpg" alt="">
</a>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#5</a>
<a class="user-name" href="">Jimmy</a>
<span class="comment-date">on March 2, 2016 at 17:55</span>
</div>
<div class="comment-content">
<p><a href="">#4 @michael</a> Eh, you keep on going dawg, you hear me? And people say I'm a disgrace to society? You punk-ass bitches is done, now! </p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-thumbs-up"></i></button>
<span class="num">17</span>
<button class="btn btn-score-down"><i class="cicon-thumbs-down"></i></button>
</div>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-6" class="comment" data-id="6" data-parent="1">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_michael_jetski_256x256.jpg" alt="">
</a>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#6</a>
<a class="user-name" href="">Michael</a>
<span class="comment-date">on March 2, 2016 at 17:57</span>
</div>
<div class="comment-content">
<p><a href="">#1 @jimmy</a> Jimbo! I love you, son. What's up, amigo? What's going on, <a href="">@tracey</a>? </p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-thumbs-up"></i></button>
<span class="num">0</span>
<button class="btn btn-score-down"><i class="cicon-thumbs-down"></i></button>
</div>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-7" class="comment" data-id="7" data-parent="0">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_hunt_f_256x256.jpg" alt="">
</a>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#7</a>
<a class="user-name" href="">Franklin</a>
<span class="label label-admin">ADMIN</span>
<span class="comment-date">on March 2, 2016 at 18:01</span>
</div>
<div class="comment-content">
<p>Man, your genetic experiment gone wrong, dawg!</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-thumbs-up"></i></button>
<span class="num">8</span>
<button class="btn btn-score-down"><i class="cicon-thumbs-down"></i></button>
</div>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-8" class="comment low" data-id="8" data-parent="0">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_trevor_atv_256x256.jpg" alt="">
</a>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#8</a>
<a class="user-name" href="">Trevor</a>
<span class="comment-date">on March 2, 2016 at 18:12</span>
</div>
<div class="comment-content">
<p>Wanna hunt?</p>
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/wallpapers/games/v_frisk_me_1024x768.jpg" />
<p>How have you beeeeeeeeeen, <a href="">@amanda</a>? Wow... you are BIG! I mean, you're the size of a house!</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-thumbs-up"></i></button>
<span class="num">-22</span>
<button class="btn btn-score-down"><i class="cicon-thumbs-down"></i></button>
</div>
<button class="btn btn-show-replies"><i class="cicon-replies"></i><span>1 reply</span></button>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-9" class="comment" data-id="9" data-parent="8">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_frisk_me_256x256.jpg" alt="">
</a>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#9</a>
<a class="user-name" href="">UnknownGirl89</a>
<span class="comment-date">on March 2, 2016 at 18:12</span>
</div>
<div class="comment-content">
<p><a href="">#8 @trevor</a> Can I join?</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/W35XSzAJz2I" frameborder="0" allowfullscreen></iframe>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-thumbs-up"></i></button>
<span class="num">19</span>
<button class="btn btn-score-down"><i class="cicon-thumbs-down"></i></button>
</div>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li class="new-comment comment">
<div class="comment-lcol">
<a class="user-avatar" href="">
<!-- Firefox can't display dashed borders on rounded elements. -->
<!-- Read: https://bugzilla.mozilla.org/show_bug.cgi?id=382721 -->
<object class="larger-screens" type="image/svg+xml" data="data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><circle cy='40' cx='40' r='38' style='fill:rgb(255, 255, 255);stroke-width:1;stroke-opacity:1;stroke:rgb(214, 214, 214);stroke-dasharray:4;' /></svg>"></object>
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_heists_balaclava_256x256.jpg" alt="">
</a>
</div>
<div class="comment-rcol">
<div class="anonymous-user">
<div class="join">Join the conversation!</div>
<div>
<a class="btn btn-sign-up" href="">New user account</a>
</div>
<div>
<p>Already registered?</p>
<a class="btn btn-sign-up" href="">Sign in</a>
</div>
</div>
<div class="registered-user">
<div class="comment-header">
<a class="comment-id" href=""></a>
<a class="user-name" href="">UnknownGuy84</a>
<span class="comment-date"></span>
</div>
<div class="comment-content">
<form name="comment-form" method="post" action="">
<textarea name="comment" placeholder="Write your comment here..."></textarea>
<div class="submit-feedback"></div>
<div class="comment-actions">
<button type="submit" class="btn">POST COMMENT</button>
</div>
</form>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col2">
<h1>Variation 2</h1>
<ul id="variation-2" class="comment-list" data-next-comment="10">
<li id="comment-1" class="comment high" data-id="1" data-parent="0">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_jimmy_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-angle-up"></i></button>
<span class="num">45</span>
<button class="btn btn-score-down"><i class="cicon-angle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#1</a>
<a class="user-name" href="">Jimmy</a>
<span class="comment-date">on March 2, 2016 at 17:29</span>
</div>
<div class="comment-content">
<p>Well, that's America for ya. No, no, really, that's fascinating. Vamos the car, amigo! Sorry, lady! Nothing personal. I know, I know, it ain't fuckin' cool! You are out of control!</p>
<p>I ain't got time to swap details, asshole! Next time you'll listen. Well, you know what I mean! Hey, I'm serious. Get lost. You need receipt? For taxes? Might as well get the body bag, bro.</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-show-replies"><i class="cicon-replies"></i><span>3 replies</span></button>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-2" class="comment high" data-id="2" data-parent="0">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_tracey_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-angle-up"></i></button>
<span class="num">22</span>
<button class="btn btn-score-down"><i class="cicon-angle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#2</a>
<a class="user-name" href="">Tracey</a>
<span class="comment-date">on March 2, 2016 at 19:31</span>
</div>
<div class="comment-content">
<p>Who's got eyes??!! </p>
<p>Are you following me, kid? </p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-3" class="comment" data-id="3" data-parent="1">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_amanda_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-angle-up"></i></button>
<span class="num">2</span>
<button class="btn btn-score-down"><i class="cicon-angle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#3</a>
<a class="user-name" href="">Amanda</a>
<span class="label label-moderator">MODERATOR</span>
<span class="comment-date">on March 2, 2016 at 17:41</span>
</div>
<div class="comment-content">
<p><a href="">#1 @jimmy</a> This is U.S. military airspace. Divert now, or face the consequences.</p>
<p>Sir, leave the area now! This is for authorised personnel only. Drop the weapon! Oh shit, they got Charlie!</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-4" class="comment" data-id="4" data-parent="1">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_michael_jetski_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-angle-up"></i></button>
<span class="num">17</span>
<button class="btn btn-score-down"><i class="cicon-angle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#4</a>
<a class="user-name" href="">Michael</a>
<span class="comment-date">on March 2, 2016 at 17:52</span>
</div>
<div class="comment-content">
<p><a href="">#1 @jimmy</a> Arrgh, Jesus! This, was a nice car! You should get some help with that personality of yours!</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-show-replies"><i class="cicon-replies"></i><span>1 reply</span></button>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-5" class="comment" data-id="5" data-parent="4">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_jimmy_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-angle-up"></i></button>
<span class="num">-1</span>
<button class="btn btn-score-down"><i class="cicon-angle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#5</a>
<a class="user-name" href="">Jimmy</a>
<span class="comment-date">on March 2, 2016 at 17:55</span>
</div>
<div class="comment-content">
<p><a href="">#4 @michael</a> Eh, you keep on going dawg, you hear me? And people say I'm a disgrace to society? You punk-ass bitches is done, now! </p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-6" class="comment" data-id="6" data-parent="1">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_michael_jetski_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-angle-up"></i></button>
<span class="num">0</span>
<button class="btn btn-score-down"><i class="cicon-angle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#6</a>
<a class="user-name" href="">Michael</a>
<span class="comment-date">on March 2, 2016 at 17:57</span>
</div>
<div class="comment-content">
<p><a href="">#1 @jimmy</a> Jimbo! I love you, son. What's up, amigo? What's going on, <a href="">@tracey</a>? </p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-7" class="comment" data-id="7" data-parent="0">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_hunt_f_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-angle-up"></i></button>
<span class="num">8</span>
<button class="btn btn-score-down"><i class="cicon-angle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#7</a>
<a class="user-name" href="">Franklin</a>
<span class="label label-admin">ADMIN</span>
<span class="comment-date">on March 2, 2016 at 18:01</span>
</div>
<div class="comment-content">
<p>Man, your genetic experiment gone wrong, dawg!</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-8" class="comment low" data-id="8" data-parent="0">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_trevor_atv_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-angle-up"></i></button>
<span class="num">-22</span>
<button class="btn btn-score-down"><i class="cicon-angle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#8</a>
<a class="user-name" href="">Trevor</a>
<span class="comment-date">on March 2, 2016 at 18:12</span>
</div>
<div class="comment-content">
<p>Wanna hunt?</p>
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/wallpapers/games/v_frisk_me_1024x768.jpg" />
<p>How have you beeeeeeeeeen, <a href="">@amanda</a>? Wow... you are BIG! I mean, you're the size of a house!</p>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-show-replies"><i class="cicon-replies"></i><span>1 reply</span></button>
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li id="comment-9" class="comment" data-id="9" data-parent="8">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_frisk_me_256x256.jpg" alt="">
</a>
<div class="comment-score">
<button class="btn btn-score-up"><i class="cicon-angle-up"></i></button>
<span class="num">19</span>
<button class="btn btn-score-down"><i class="cicon-angle-down"></i></button>
</div>
</div>
<div class="comment-rcol">
<div class="comment-header">
<a class="comment-id" href="">#9</a>
<a class="user-name" href="">UnknownGirl89</a>
<span class="comment-date">on March 2, 2016 at 18:12</span>
</div>
<div class="comment-content">
<p><a href="">#8 @trevor</a> Can I join?</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/W35XSzAJz2I" frameborder="0" allowfullscreen></iframe>
</div>
<div class="comment-footer">
<div class="comment-footer-left">
<button class="btn btn-report" title="Report"><i class="cicon-report"></i></button>
</div>
<div class="comment-footer-right">
<button class="btn btn-reply"><i class="cicon-reply"></i></button>
</div>
</div>
</div>
</li>
<li class="new-comment comment">
<div class="comment-lcol">
<a class="user-avatar" href="">
<img src="http://media.rockstargames.com/rockstargames/img/global/downloads/buddyiconsconavatars/v_heists_balaclava_256x256.jpg" alt="">
</a>
</div>
<div class="comment-rcol">
<div class="anonymous-user">
<div class="join">Join the conversation!</div>
<div>
<a class="btn btn-sign-up" href="">New user account</a>
</div>
<div>
<p>Already registered?</p>
<a class="btn btn-sign-up" href="">Sign in</a>
</div>
</div>
<div class="registered-user">
<div class="comment-header">
<a class="comment-id" href=""></a>
<a class="user-name" href="">UnknownGuy84</a>
<span class="comment-date"></span>
</div>
<div class="comment-content">
<form name="comment-form" method="post" action="">
<textarea name="comment" placeholder="Write your comment here..."></textarea>
<div class="submit-feedback"></div>
<div class="comment-actions">
<button type="submit" class="btn">POST COMMENT</button>
</div>
</form>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="demo.js"></script>
</body>
</html>
var HIGH_SCORE = 20;
var LOW_SCORE = -20;
$('.comment-list')
.on('click', '.btn-show-replies', function() {
var $commentList = $(this).parents('.comment-list');
var $comment = $(this).parents('.comment');
var $children = $commentList.find('.comment[data-parent="' + $comment.data('id') + '"]').clone();
$comment.after(new Spinner());
setTimeout(function() { // Emulate request delay to show the spinner
$comment.next('.comments-spinner').remove();
$comment.after(
$('<li class="nested-comments">').append($children)
);
}, 1200);
})
.on('click', '.btn-score-up', function() {
var $comment = $(this).parents('.comment');
var $score = $(this).siblings('.num');
var num = parseInt($score.text());
$score.text(++num);
if (num >= HIGH_SCORE) $comment.addClass('high');
if (num > LOW_SCORE) $comment.removeClass('low');
})
.on('click', '.btn-score-down', function() {
var $comment = $(this).parents('.comment');
var $score = $(this).siblings('.num');
var num = parseInt($score.text());
$score.text(--num);
if (num <= LOW_SCORE) $comment.addClass('low');
if (num < HIGH_SCORE) $comment.removeClass('high');
}).on('click', '.new-comment .anonymous-user .btn', function(e) {
var $newComment = $(this).parents('.new-comment');
var nextCommentId = parseInt($newComment.parents('.comment-list').data('next-comment'));
var parentId = $newComment.parents('.comment').length ? parseInt($(this).parents('.comment').data('id')) : 0;
e.preventDefault();
$newComment.addClass('showing-form');
$newComment.data('parent', parentId);
$newComment.find('.comment-id').text('#' + nextCommentId);
$newComment.find('.comment-date').text('on ' + getCurrentDate());
$newComment.find('textarea').focus();
}).on('click', '.btn-reply', function(e) {
var $parentComment = $(this).parents('.comment');
var $newComment = $(this).parents('.comment-list').find('.new-comment:last').clone();
e.preventDefault();
$parentComment.after(
$('<li class="nested-comments">').append($newComment)
);
});
Number.prototype.pad = function(len) {
return (new Array(len + 1).join('0') + this).slice(-len);
}
function Spinner() {
var $spinner = $('<div class="comments-spinner"><div class="ball"></div></div>');
return $spinner.clone();
}
function getCurrentDate() {
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var d = new Date();
return monthNames[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear() + ' at ' + d.getHours().pad(2) + ':' + d.getMinutes().pad(2);
}
@background-color: #ededed;
@border-color: #d6d6d6;
@text-color: #151515;
@date-color: #939393;
@score-color: #939393;
@button-text-color: #939393;
@button-up-color: #23be5e;
@button-down-color: #c42619;
@high-color: #23be5e;
@low-color: #c42619;
@report-color: #c42619;
@role1-color: #c42619;
@role2-color: #23be5e;
@link-color: #3f92f4;
@error-color: #c42619;
@font-face {
font-family: 'comments-icons';
src: url('data:font/eot;base64,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');
src: url('data:font/eot;base64,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') format('embedded-opentype'),
url('data:application/x-font-ttf;base64,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') format('truetype'),
url('data:application/font-woff2;base64,d09GMgABAAAAAAZgAA0AAAAADTgAAAYIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCXhEICo1cij0BNgIkAz4LIgAEIAWDbweBKRuMCsiO1EbzFxkyqDaregbZ9CBRIsZazBRZMTaZxMmqDHcOZ4nDmkOSEyVZETv2xPRN9f') format('woff2'),
url('icons/comments-icons.svg?n43scg#comments-icons') format('svg');
font-weight: normal;
font-style: normal;
}
.comment-list {
padding: 0;
margin: 0;
list-style: none;
color: @text-color;
.comment {
position: relative;
display: block;
margin-bottom: 26px;
padding: 10px;
background-color: @background-color;
border: 1px solid @border-color;
@media @small-screen {
width: 100%;
background-color: transparent;
border: 0;
padding: 0;
}
&:last-child {
margin-bottom: 0;
}
a {
color: @link-color;
text-decoration: none;
}
.btn {
border: 0;
padding: 0;
background-color: transparent;
cursor: pointer;
color: @button-text-color;
}
.label {
position: relative;
display: inline-block;
top: -1px;
padding: 0 5px;
font-size: 8px;
line-height: 10px;
text-transform: uppercase;
color: #fff;
background: @text-color;
border-radius: 5px;
vertical-align: middle;
@media @small-screen {
line-height: 11px;
}
&.label-admin {
background-color: @role1-color;
}
&.label-moderator {
background-color: @role2-color;
}
}
.comment-lcol,
.comment-rcol {
display: block;
@media @small-screen {
display: table-cell;
}
}
.comment-lcol {
width: 100px;
height: 40px;
font-size: 0;
}
.comment-rcol {
width: 100%;
vertical-align: top;
@media @small-screen {
background-color: @background-color;
border: 1px solid @border-color;
padding: 10px;
&::before {
position: absolute;
display: block;
content: '';
left: 90px;
top: 30px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent @border-color transparent transparent;
}
&::after {
position: absolute;
display: block;
content: '';
left: 92px;
top: 30px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent @background-color transparent transparent;
}
}
}
.user-avatar {
display: inline-block;
width: 40px;
height: 40px;
font-size: 0;
@media @small-screen {
width: 80px;
height: 80px;
margin-right: 20px;
}
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.comment-score {
position: absolute;
display: inline-block;
top: 10px;
right: 10px;
height: 40px;
line-height: 40px;
font-size: 20px;
color: @score-color;
@media @small-screen {
position: static;
width: 80px;
height: auto;
margin-top: 10px;
line-height: 10px;
text-align: center;
background: #fff;
}
.btn-score-up,
.btn-score-down {
i {
font-size: 20px;
}
@media @small-screen {
display: block;
width: 20px;
margin: 0 auto;
i {
font-size: 28px;
}
}
}
.btn-score-up {
&:hover {
i {
color: @button-up-color;
}
}
}
.btn-score-down {
&:hover {
i {
color: @button-down-color;
}
}
}
}
.comment-header {
position: absolute;
top: 10px;
left: 60px;
line-height: 22px;
@media @small-screen {
position: static;
}
}
.comment-id {
font-size: 18px;
color: @link-color;
}
.user-name {
display: inline-block;
font-size: 18px;
color: @text-color;
&:hover {
color: @link-color;
}
}
.comment-date {
display: block;
font-size: 12px;
color: @date-color;
@media @small-screen {
display: inline-block;
}
}
.comment-content {
font-size: 15px;
line-height: 20px;
margin-bottom: 5px;
@media @small-screen {
min-height: 90px;
}
p {
margin: 16px 0;
}
img,
iframe {
display: block;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
}
.comment-footer {
display: table;
left: 0;
bottom: 0px;
width: 100%;
overflow: hidden;
.comment-footer-left,
.comment-footer-right {
display: table-cell;
vertical-align: bottom;
}
.comment-footer-right {
text-align: right;
}
.btn {
display: inline-block;
vertical-align: top;
height: 22px;
line-height: 22px;
overflow: hidden;
&:hover {
color: @link-color;
i {
color: @link-color;
}
}
i {
font-size: 18px;
}
}
.btn-show-replies {
span {
display: inline-block;
margin-left: 5px;
font-size: 12px;
font-weight: 700;
vertical-align: top;
}
}
.btn-report {
width: 18px;
i {
position: relative;
top: 3px;
}
&:hover {
i {
color: @report-color;
}
}
}
.btn-reply {
width: 18px;
i {
font-size: 20px;
}
}
}
&.high {
.comment-score {
color: @high-color;
}
.comment-content {
font-size: 16px;
}
}
&.low {
.comment-lcol,
.comment-rcol {
opacity: .65;
}
@media @small-screen {
.comment-lcol {
opacity: 1;
}
}
.comment-score {
color: @low-color;
}
}
}
.nested-comments {
position: relative;
padding-left: 26px;
margin-bottom: 26px;
@media @small-screen {
padding-left: 100px;
margin-top: -26px;
padding-top: 26px;
&::before {
position: absolute;
display: block;
content: '';
top: 0px;
left: 140px;
width: 1px;
height: 100%;
background-color: @border-color;
}
&::after {
position: absolute;
display: block;
content: '';
bottom: 0px;
left: 140px;
width: 60px;
height: 1px;
background-color: @border-color;
}
}
}
.new-comment {
background-color: transparent;
border: 1px dashed @border-color;
@media @small-screen {
border: 0;
}
.comment-lcol {
display: none;
@media @small-screen {
display: table-cell;
background-color: transparent;
border: 0;
}
}
.comment-rcol {
@media @small-screen {
background-color: transparent;
border: 1px dashed @border-color;
&::before,
&::after {
display: none;
}
}
}
.btn {
display: inline-block;
padding: 10px 26px;
margin-top: 10px;
background-color: @link-color;
color: #fff;
text-transform: uppercase;
font-size: 14px;
transition: opacity .25s;
&:hover {
opacity: .8;
}
}
&.showing-form {
background-color: @background-color;
border: 1px solid @border-color;
@media @small-screen {
background-color: transparent;
border: 0;
}
.comment-lcol {
display: block;
@media @small-screen {
display: table-cell;
}
.user-avatar {
img {
display: block;
}
object {
display: none;
}
}
}
.comment-rcol {
border: 0;
@media @small-screen {
background-color: @background-color;
border: 1px solid @border-color;
&::before,
&::after {
display: block;
}
}
}
.anonymous-user {
display: none;
}
.registered-user {
display: block;
}
}
.user-avatar {
img {
display: none;
}
object {
display: none;
width: 80px;
height: 80px;
// You can change the border color in the HTML document.
@media @small-screen {
display: block;
}
}
}
.anonymous-user {
padding: 26px 10px;
text-align: center;
.join {
font-size: 28px;
}
p {
margin: 26px 0 0 0;
font-size: 14px;
}
}
.registered-user {
display: none;
textarea {
width: 100%;
min-height: 120px;
margin: 16px 0 17px 0;
font-family: inherit;
border: 0;
resize: vertical;
background-color: @background-color;
}
.submit-feedback {
display: none;
position: relative;
padding-left: 26px;
color: @error-color;
font-size: 12px;
&::before {
position: absolute;
top: 0px;
left: 0px;
content: '\e900';
font-family: 'comments-icons';
font-size: 16px;
}
}
.comment-actions {
text-align: right;
}
}
}
.comments-spinner {
@keyframes comments-spinner {
from { transform: scale(0); opacity: 1; }
to { transform: scale(1); opacity: 0; }
}
@-o-keyframes comments-spinner {
from { -o-transform: scale(0); opacity: 1; }
to { -o-transform: scale(1); opacity: 0; }
}
@-ms-keyframes comments-spinner {
from { -ms-transform: scale(0); opacity: 1; }
to { -ms-transform: scale(1); opacity: 0; }
}
@-webkit-keyframes comments-spinner {
from { -webkit-transform: scale(0); opacity: 1; }
to { -webkit-transform: scale(1); opacity: 0; }
}
@-moz-keyframes comments-spinner {
from { -moz-transform: scale(0); opacity: 1; }
to { -moz-transform: scale(1); opacity: 0; }
}
display: block;
margin: 26px auto;
width: 30px;
height: 30px;
.ball {
display: inline-block;
position: relative;
width: 30px;
height: 30px;
vertical-align: middle;
background: rgba(80, 80, 80, 1);
border-radius: 50%;
}
.ball,
.ball:before,
.ball:after {
animation: comments-spinner 0.8s infinite ease-in-out;
-o-animation: comments-spinner 0.8s infinite ease-in-out;
-ms-animation: comments-spinner 0.8s infinite ease-in-out;
-webkit-animation: comments-spinner 0.8s infinite ease-in-out;
-moz-animation: comments-spinner 0.8s infinite ease-in-out;
}
.ball:before,
.ball:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
}
}
[class^="cicon-"], [class*=" cicon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'comments-icons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cicon-report:before {
content: "\e900";
}
.cicon-reply:before {
content: "\e901";
}
.cicon-arrow-down:before {
content: "\e902";
}
.cicon-arrow-up:before {
content: "\e903";
}
.cicon-replies:before {
content: "\e904";
}
.cicon-angle-down:before {
content: "\e905";
}
.cicon-thumbs-down:before {
content: "\e906";
}
.cicon-thumbs-up:before {
content: "\e907";
}
.cicon-angle-up:before {
content: "\e908";
}
.cicon-triangle-down:before {
content: "\e909";
}
.cicon-triangle-up:before {
content: "\e90a";
}
}
/* Generated by less 2.5.1 */
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@font-face {
font-family: 'comments-icons';
src: url('data:font/eot;base64,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');
src: url('data:font/eot;base64,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') format('embedded-opentype'), url('data:application/x-font-ttf;base64,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') format('truetype'), url('data:application/font-woff2;base64,d09GMgABAAAAAAZgAA0AAAAADTgAAAYIAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCXhEICo1cij0BNgIkAz4LIgAEIAWDbweBKRuMCsiO1EbzFxkyqDaregbZ9CBRIsZazBRZMTaZxMmqDHcOZ4nDmkOSEyVZETv2xPRN9f') format('woff2'), url('icons/comments-icons.svg?n43scg#comments-icons') format('svg');
font-weight: normal;
font-style: normal;
}
.comment-list {
padding: 0;
margin: 0;
list-style: none;
color: #151515;
}
.comment-list .comment {
position: relative;
display: block;
margin-bottom: 26px;
padding: 10px;
background-color: #ededed;
border: 1px solid #d6d6d6;
}
@media only screen and (min-width: 700px) {
.comment-list .comment {
width: 100%;
background-color: transparent;
border: 0;
padding: 0;
}
}
.comment-list .comment:last-child {
margin-bottom: 0;
}
.comment-list .comment a {
color: #3f92f4;
text-decoration: none;
}
.comment-list .comment .btn {
border: 0;
padding: 0;
background-color: transparent;
cursor: pointer;
color: #939393;
}
.comment-list .comment .label {
position: relative;
display: inline-block;
top: -1px;
padding: 0 5px;
font-size: 8px;
line-height: 10px;
text-transform: uppercase;
color: #fff;
background-color: #151515;
border-radius: 5px;
vertical-align: middle;
}
@media only screen and (min-width: 700px) {
.comment-list .comment .label {
line-height: 11px;
}
}
.comment-list .comment .label.label-admin {
background-color: #c42619;
}
.comment-list .comment .label.label-moderator {
background-color: #23be5e;
}
.comment-list .comment .comment-lcol,
.comment-list .comment .comment-rcol {
display: block;
}
@media only screen and (min-width: 700px) {
.comment-list .comment .comment-lcol,
.comment-list .comment .comment-rcol {
display: table-cell;
}
}
.comment-list .comment .comment-lcol {
width: 100px;
height: 40px;
font-size: 0;
}
.comment-list .comment .comment-rcol {
width: 100%;
vertical-align: top;
}
@media only screen and (min-width: 700px) {
.comment-list .comment .comment-rcol {
background-color: #ededed;
border: 1px solid #d6d6d6;
padding: 10px;
}
.comment-list .comment .comment-rcol::before {
position: absolute;
display: block;
content: '';
left: 90px;
top: 30px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #d6d6d6 transparent transparent;
}
.comment-list .comment .comment-rcol::after {
position: absolute;
display: block;
content: '';
left: 92px;
top: 30px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #ededed transparent transparent;
}
}
.comment-list .comment .user-avatar {
display: inline-block;
width: 40px;
height: 40px;
font-size: 0;
}
@media only screen and (min-width: 700px) {
.comment-list .comment .user-avatar {
width: 80px;
height: 80px;
margin-right: 20px;
}
}
.comment-list .comment .user-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.comment-list .comment .comment-score {
position: absolute;
display: inline-block;
top: 10px;
right: 10px;
height: 40px;
line-height: 40px;
font-size: 20px;
color: #939393;
}
@media only screen and (min-width: 700px) {
.comment-list .comment .comment-score {
position: static;
width: 80px;
height: auto;
margin-top: 10px;
line-height: 10px;
text-align: center;
background-color: #fff;
}
}
.comment-list .comment .comment-score .btn-score-up i,
.comment-list .comment .comment-score .btn-score-down i {
font-size: 20px;
}
@media only screen and (min-width: 700px) {
.comment-list .comment .comment-score .btn-score-up,
.comment-list .comment .comment-score .btn-score-down {
display: block;
width: 20px;
margin: 0 auto;
}
.comment-list .comment .comment-score .btn-score-up i,
.comment-list .comment .comment-score .btn-score-down i {
font-size: 28px;
}
}
.comment-list .comment .comment-score .btn-score-up:hover i {
color: #23be5e;
}
.comment-list .comment .comment-score .btn-score-down:hover i {
color: #c42619;
}
.comment-list .comment .comment-header {
position: absolute;
top: 10px;
left: 60px;
line-height: 22px;
}
@media only screen and (min-width: 700px) {
.comment-list .comment .comment-header {
position: static;
}
}
.comment-list .comment .comment-id {
font-size: 18px;
color: #3f92f4;
}
.comment-list .comment .user-name {
display: inline-block;
font-size: 18px;
color: #151515;
}
.comment-list .comment .user-name:hover {
color: #3f92f4;
}
.comment-list .comment .comment-date {
display: block;
font-size: 12px;
color: #939393;
}
@media only screen and (min-width: 700px) {
.comment-list .comment .comment-date {
display: inline-block;
}
}
.comment-list .comment .comment-content {
font-size: 15px;
line-height: 20px;
margin-bottom: 5px;
}
@media only screen and (min-width: 700px) {
.comment-list .comment .comment-content {
min-height: 90px;
}
}
.comment-list .comment .comment-content p {
margin: 16px 0;
}
.comment-list .comment .comment-content img,
.comment-list .comment .comment-content iframe {
display: block;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.comment-list .comment .comment-footer {
display: table;
left: 0;
bottom: 0px;
width: 100%;
overflow: hidden;
}
.comment-list .comment .comment-footer .comment-footer-left,
.comment-list .comment .comment-footer .comment-footer-right {
display: table-cell;
vertical-align: bottom;
}
.comment-list .comment .comment-footer .comment-footer-right {
text-align: right;
}
.comment-list .comment .comment-footer .btn {
display: inline-block;
vertical-align: top;
height: 22px;
line-height: 22px;
overflow: hidden;
}
.comment-list .comment .comment-footer .btn:hover {
color: #3f92f4;
}
.comment-list .comment .comment-footer .btn:hover i {
color: #3f92f4;
}
.comment-list .comment .comment-footer .btn i {
font-size: 18px;
}
.comment-list .comment .comment-footer .btn-show-replies span {
display: inline-block;
margin-left: 5px;
font-size: 12px;
font-weight: 700;
vertical-align: top;
}
.comment-list .comment .comment-footer .btn-report {
width: 18px;
}
.comment-list .comment .comment-footer .btn-report i {
position: relative;
top: 3px;
}
.comment-list .comment .comment-footer .btn-report:hover i {
color: #c42619;
}
.comment-list .comment .comment-footer .btn-reply {
width: 18px;
}
.comment-list .comment .comment-footer .btn-reply i {
font-size: 20px;
}
.comment-list .comment.high .comment-score {
color: #23be5e;
}
.comment-list .comment.high .comment-content {
font-size: 16px;
}
.comment-list .comment.low .comment-lcol,
.comment-list .comment.low .comment-rcol {
opacity: .65;
}
@media only screen and (min-width: 700px) {
.comment-list .comment.low .comment-lcol {
opacity: 1;
}
}
.comment-list .comment.low .comment-score {
color: #c42619;
}
.comment-list .nested-comments {
position: relative;
padding-left: 26px;
margin-bottom: 26px;
}
@media only screen and (min-width: 700px) {
.comment-list .nested-comments {
padding-left: 100px;
margin-top: -26px;
padding-top: 26px;
}
.comment-list .nested-comments::before {
position: absolute;
display: block;
content: '';
top: 0px;
left: 140px;
width: 1px;
height: 100%;
background-color: #d6d6d6;
}
.comment-list .nested-comments::after {
position: absolute;
display: block;
content: '';
bottom: 0px;
left: 140px;
width: 60px;
height: 1px;
background-color: #d6d6d6;
}
}
.comment-list .new-comment {
background-color: transparent;
border: 1px dashed #d6d6d6;
}
@media only screen and (min-width: 700px) {
.comment-list .new-comment {
border: 0;
}
}
.comment-list .new-comment .comment-lcol {
display: none;
}
@media only screen and (min-width: 700px) {
.comment-list .new-comment .comment-lcol {
display: table-cell;
background-color: transparent;
border: 0;
}
}
@media only screen and (min-width: 700px) {
.comment-list .new-comment .comment-rcol {
background-color: transparent;
border: 1px dashed #d6d6d6;
}
.comment-list .new-comment .comment-rcol::before,
.comment-list .new-comment .comment-rcol::after {
display: none;
}
}
.comment-list .new-comment .btn {
display: inline-block;
padding: 10px 26px;
margin-top: 10px;
background-color: #3f92f4;
color: #fff;
text-transform: uppercase;
font-size: 14px;
transition: opacity .25s;
}
.comment-list .new-comment .btn:hover {
opacity: .8;
}
.comment-list .new-comment.showing-form {
background-color: #ededed;
border: 1px solid #d6d6d6;
}
@media only screen and (min-width: 700px) {
.comment-list .new-comment.showing-form {
background-color: transparent;
border: 0;
}
}
.comment-list .new-comment.showing-form .comment-lcol {
display: block;
}
@media only screen and (min-width: 700px) {
.comment-list .new-comment.showing-form .comment-lcol {
display: table-cell;
}
}
.comment-list .new-comment.showing-form .comment-lcol .user-avatar img {
display: block;
}
.comment-list .new-comment.showing-form .comment-lcol .user-avatar object {
display: none;
}
.comment-list .new-comment.showing-form .comment-rcol {
border: 0;
}
@media only screen and (min-width: 700px) {
.comment-list .new-comment.showing-form .comment-rcol {
background-color: #ededed;
border: 1px solid #d6d6d6;
}
.comment-list .new-comment.showing-form .comment-rcol::before,
.comment-list .new-comment.showing-form .comment-rcol::after {
display: block;
}
}
.comment-list .new-comment.showing-form .anonymous-user {
display: none;
}
.comment-list .new-comment.showing-form .registered-user {
display: block;
}
.comment-list .new-comment .user-avatar img {
display: none;
}
.comment-list .new-comment .user-avatar object {
display: none;
width: 80px;
height: 80px;
}
@media only screen and (min-width: 700px) {
.comment-list .new-comment .user-avatar object {
display: block;
}
}
.comment-list .new-comment .anonymous-user {
padding: 26px 10px;
text-align: center;
}
.comment-list .new-comment .anonymous-user .join {
font-size: 28px;
}
.comment-list .new-comment .anonymous-user p {
margin: 26px 0 0 0;
font-size: 14px;
}
.comment-list .new-comment .registered-user {
display: none;
}
.comment-list .new-comment .registered-user textarea {
width: 100%;
min-height: 120px;
margin: 16px 0 17px 0;
font-family: inherit;
border: 0;
resize: vertical;
background-color: #ededed;
}
.comment-list .new-comment .registered-user .submit-feedback {
display: none;
position: relative;
padding-left: 26px;
color: #c42619;
font-size: 12px;
}
.comment-list .new-comment .registered-user .submit-feedback::before {
position: absolute;
top: 0px;
left: 0px;
content: '\e900';
font-family: 'comments-icons';
font-size: 16px;
}
.comment-list .new-comment .registered-user .comment-actions {
text-align: right;
}
.comment-list .comments-spinner {
display: block;
margin: 26px auto;
width: 30px;
height: 30px;
}
@keyframes comments-spinner {
from {
transform: scale(0);
opacity: 1;
}
to {
transform: scale(1);
opacity: 0;
}
}
@-o-keyframes comments-spinner {
from {
-o-transform: scale(0);
opacity: 1;
}
to {
-o-transform: scale(1);
opacity: 0;
}
}
@-ms-keyframes comments-spinner {
from {
-ms-transform: scale(0);
opacity: 1;
}
to {
-ms-transform: scale(1);
opacity: 0;
}
}
@-webkit-keyframes comments-spinner {
from {
-webkit-transform: scale(0);
opacity: 1;
}
to {
-webkit-transform: scale(1);
opacity: 0;
}
}
@-moz-keyframes comments-spinner {
from {
-moz-transform: scale(0);
opacity: 1;
}
to {
-moz-transform: scale(1);
opacity: 0;
}
}
.comment-list .comments-spinner .ball {
display: inline-block;
position: relative;
width: 30px;
height: 30px;
vertical-align: middle;
background-color: #505050;
border-radius: 50%;
}
.comment-list .comments-spinner .ball,
.comment-list .comments-spinner .ball:before,
.comment-list .comments-spinner .ball:after {
animation: comments-spinner 0.8s infinite ease-in-out;
-o-animation: comments-spinner 0.8s infinite ease-in-out;
-ms-animation: comments-spinner 0.8s infinite ease-in-out;
-webkit-animation: comments-spinner 0.8s infinite ease-in-out;
-moz-animation: comments-spinner 0.8s infinite ease-in-out;
}
.comment-list .comments-spinner .ball:before,
.comment-list .comments-spinner .ball:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
}
.comment-list [class^="cicon-"],
.comment-list [class*=" cicon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'comments-icons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.comment-list .cicon-report:before {
content: "\e900";
}
.comment-list .cicon-reply:before {
content: "\e901";
}
.comment-list .cicon-arrow-down:before {
content: "\e902";
}
.comment-list .cicon-arrow-up:before {
content: "\e903";
}
.comment-list .cicon-replies:before {
content: "\e904";
}
.comment-list .cicon-angle-down:before {
content: "\e905";
}
.comment-list .cicon-thumbs-down:before {
content: "\e906";
}
.comment-list .cicon-thumbs-up:before {
content: "\e907";
}
.comment-list .cicon-angle-up:before {
content: "\e908";
}
.comment-list .cicon-triangle-down:before {
content: "\e909";
}
.comment-list .cicon-triangle-up:before {
content: "\e90a";
}
body {
background-color: #fff;
font-family: 'Montserrat', sans-serif;
}
.btn {
font-family: 'Montserrat', sans-serif;
}
.pagewidth {
width: 100%;
max-width: 1160px;
margin: 0 auto;
}
.pagewidth > .col1,
.pagewidth > .col2 {
width: 100%;
float: left;
box-sizing: border-box;
}
@media only screen and (min-width: 1000px) {
.pagewidth > .col1,
.pagewidth > .col2 {
width: 50%;
}
}
.pagewidth > .col1 {
padding-right: 13px;
}
.pagewidth > .col2 {
padding-left: 13px;
}
#variation-1 .comment .comment-footer .btn span {
font-size: 14px;
}
#variation-1 .comment .comment-score {
display: inline-block;
width: 140px;
height: 45px;
line-height: 45px;
margin: 0;
text-align: right;
background-color: transparent;
}
@media only screen and (min-width: 700px) {
#variation-1 .comment .comment-score {
width: 120px;
height: 22px;
line-height: 22px;
}
}
#variation-1 .comment .comment-score * {
vertical-align: top;
}
#variation-1 .comment .comment-score span {
font-weight: 700;
}
@media only screen and (min-width: 700px) {
#variation-1 .comment .comment-score span {
font-size: 14px;
margin-bottom: 10px;
}
}
#variation-1 .comment .comment-score .btn {
position: relative;
display: inline-block;
width: 26px;
height: 26px;
line-height: 10px;
top: 8px;
margin: 0 2px;
background-color: #939393;
border-radius: 50px;
}
@media only screen and (min-width: 700px) {
#variation-1 .comment .comment-score .btn {
width: 18px;
height: 18px;
top: 1px;
margin: 0 2px;
line-height: 18px;
}
}
#variation-1 .comment .comment-score .btn i {
font-size: 19px;
color: #fff;
}
@media only screen and (min-width: 700px) {
#variation-1 .comment .comment-score .btn i {
font-size: 13px;
}
}
#variation-1 .comment .comment-score .btn-score-up:hover {
background-color: #23be5e;
}
#variation-1 .comment .comment-score .btn-score-down:hover {
background-color: #c42619;
}
@media only screen and (min-width: 700px) {
#variation-2 .comment .comment-lcol {
width: 80px;
}
}
#variation-2 .comment .comment-rcol::before {
left: 70px;
}
#variation-2 .comment .comment-rcol::after {
left: 71px;
}
#variation-2 .comment .user-avatar {
margin-right: 0;
}
#variation-2 .comment .user-avatar img {
border-radius: 0;
}
#variation-2 .comment .comment-score {
line-height: 16px;
}
#variation-2 .comment .comment-score .btn i {
position: relative;
left: 1px;
font-size: 18px;
}
#variation-2 .comment .comment-score .btn-score-down i {
top: -1px;
}
@media only screen and (min-width: 700px) {
#variation-2 .comment .comment-score .btn-score-down i {
top: 1px;
}
}
#variation-2 .comment .comment-score span {
padding-left: 2px;
}
#variation-2 .comment.low .comment-rcol {
opacity: 1;
}
#variation-2 .comment.low .comment-content {
opacity: .4;
transition: opacity .25s;
}
#variation-2 .comment.low .comment-content:hover {
opacity: 1;
}
/*# sourceMappingURL=style.css.map */