ВИД КОММЕНТАРИЕВ ( ВАРИАНТ 3 ) ДЛЯ UCOZ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

$COM_BODY$

<div class="comments-container"><ul id="comments-list" class="comments-list">$COM_BODY$</ul></div>

<li>  
<div class="comment-main-level">  
<div class="comment-avatar"><?if($USER_AVATAR_URL$)?>  
<?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$" title="$USERNAME$"><img src="$USER_AVATAR_URL$" alt="avatar" /></a>  
<?else?><a href="$PROFILE_URL$" title="$USERNAME$"><img src="$USER_AVATAR_URL$" alt="avatar" /></a><?endif?>  
<?else?><img src="/.s/img/icon/social/noavatar.png" alt="avatar" /><?endif?></div>  
<div class="comment-box"><div class="comment-head">  
<?if($UID$=1)?><h6 class="comment-name by-author">  
<?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>  
<?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$">$NAME$</a><?else?>$NAME$<?endif?><?endif?>  
<a href="#ent$ID$" onclick="prompt('', location.protocol + '//' + location.hostname + location.pathname + location.search + '#comEnt$ID$' ); if (document.getElementById('comEnt$ID$') ) { $('body').scrollTo({top:$('#comEnt$ID$').offset().top-54, left:0 }, 500 ); return false; }" name="ent$ID$"> <b>(# $NUMBER$)</b></a>  
</h6><?else?>  
<h6 class="comment-name"><?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>  
<?if($SOC_LINK$)?><a rel="nofollow" href="$SOC_LINK$">$NAME$</a><?else?>$NAME$<?endif?>  
<?endif?>  
<a href="#ent$ID$" onclick="prompt('', location.protocol + '//' + location.hostname + location.pathname + location.search + '#comEnt$ID$' ); if (document.getElementById('comEnt$ID$') ) { $('body').scrollTo({top:$('#comEnt$ID$').offset().top-54, left:0 }, 500 ); return false; }" name="ent$ID$"> <b>(# $NUMBER$)</b></a></h6>  
<?endif?></h6>  
<span style="font-size:9px;">$TIME$, $DATE$</span>  
<div style="float:right;">  
<?if($GOOD_COMMENT_URL$)?>   
<a href="$GOOD_COMMENT_URL$"><i class="fa fa-heart" aria-hidden="true"></i></a>   
<?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">   
<span itemprop="ratingValue"><b style="color:#339933;">$COMMENT_RATING$</b></span>   
</span><?else?> $COMMENT_RATING$<?endif?>   
<?else?><i class="fa fa-heart" aria-hidden="true"></i>   
<?if($COMMENT_RATING$ > 0)?><span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">   
<span itemprop="ratingValue">$COMMENT_RATING$</span></span>   
<?else?>$COMMENT_RATING$<?endif?><?endif?></div>  
</div>  
<div class="comment-content">  
$MESSAGE$  
<?if($ANSWER$)?><div class="uc-answer cAnswer"><b>Ответ</b>: $ANSWER$</div><?endif?>  
   <?if($ANSWER_URL$)?><div class="uc-answer-link"><a href="$ANSWER_URL$">Ответить</a></div><?endif?>  
<?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?>  
</div></div></div>  
</li>

.report-spam-toggle-wrapper {  
   text-align: center;  
   color: gray;  
   font-weight:700;  
   padding: 10pt 0;  
   margin: 10px 0px;  
   border:none!important;  
}

* {  
   margin: 0;  
   padding: 0;  
   -webkit-box-sizing: border-box;  
   -moz-box-sizing: border-box;  
   box-sizing: border-box;  
   }  

.com-order-block {  
padding:0px 0px 30px 0px;  
color:#595959;  
}  

.comments-container {  
   margin: 60px auto 15px;  
   width: 768px;  
}  

.comments-container a {  
text-decoration:none;  
}  

.comments-list {  
   margin-top: 30px;  
   position: relative;  
}  

.comments-list:before {  
   content: '';  
   width: 2px;  
   height: 100%;  
   background: #c7cacb;  
   position: absolute;  
   left: 32px;  
   top: 65px;  
}  

.comments-list:after {  
   content: '';  
   position: absolute;  
   background: #c7cacb;  
   bottom: 0px;  
   left: 28px;  
   width: 4px;  
   height: 4px;  
   border: 3px solid #dee1e3;  
   -webkit-border-radius: 50%;  
   -moz-border-radius: 50%;  
   border-radius: 50%;  
}  

.comments-list li {  
   margin-bottom: 15px;  
   display: block;  
   position: relative;  
}  

.comments-list li:after {  
   content: '';  
   display: block;  
   clear: both;  
   height: 0;  
   width: 0;  
}  

.comments-list .comment-avatar {  
   width: 65px;  
   height: 65px;  
   position: relative;  
   z-index: 99;  
   float: left;  
   border: 3px solid #FFF;  
   -webkit-border-radius: 30% 30% 0 ;   
   -moz-border-radius: 30% 30% 0 ;   
   border-radius: 30% 30% 0 ;   
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);  
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);  
   box-shadow: 0 1px 2px rgba(0,0,0,0.2);  
   overflow: hidden;  
}  

.comments-list .comment-avatar img {  
   width: 100%;  
   height: 100%;  
}  

.comment-main-level:after {  
   content: '';  
   width: 0;  
   height: 0;  
   display: block;  
   clear: both;  
}  

.comments-list .comment-box {  
   width: 680px;  
   float: right;  
   position: relative;  
   -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);  
   -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);  
   box-shadow: 0 1px 1px rgba(0,0,0,0.15);  
}  

.comments-list .comment-box:before, .comments-list .comment-box:after {  
   content: '';  
   height: 0;  
   width: 0;  
   position: absolute;  
   display: block;  
   border-width: 10px 12px 10px 0;  
   border-style: solid;  
   border-color: transparent #FCFCFC;  
   top: 8px;  
   left: -11px;  
}  

.comments-list .comment-box:before {  
   border-width: 11px 13px 11px 0;  
   border-color: transparent rgba(0,0,0,0.05);  
   left: -12px;  
}  

.comment-box .comment-head {  
   background: #FCFCFC;  
   padding: 10px 12px;  
   border-bottom: 1px solid #E5E5E5;  
   overflow: hidden;  
   -webkit-border-radius: 4px 4px 0 0;  
   -moz-border-radius: 4px 4px 0 0;  
   border-radius: 4px 4px 0 0;  
}  

.comment-box .comment-head i {  
   float: right;  
   margin-left: 5px;  
   position: relative;  
   top: 3px;  
   color: #A6A6A6;  
   cursor: pointer;  
   -webkit-transition: color 0.3s ease;  
   -o-transition: color 0.3s ease;  
   transition: color 0.3s ease;  
}  

.comment-box .comment-head i:hover {  
   color: #cc0000;  
}  

.comment-box .comment-name {  
   color: #283035;  
   font-size: 14px;  
   font-weight: 700;  
   float: left;  
   margin-right: 10px;  
}  

.comment-box .comment-name a {  
   color: #283035;  
}  

.comment-box .comment-head span {  
   float: left;  
   color: #999;  
   font-size: 13px;  
   position: relative;  
   top: 1px;  
}  

.comment-box .comment-content {  
   background: #FFF;  
   padding: 12px;  
   font-size: 12px;  
   color: #595959;  
   -webkit-border-radius: 0 0 4px 4px;  
   -moz-border-radius: 0 0 4px 4px;  
   border-radius: 0 0 4px 4px;  
}  

.comment-box .comment-name.by-author, .comment-box .comment-name.by-author a {color: #03658c;}  
.comment-box .comment-name.by-author:after {  
   content: 'Админ';  
   background: #f4786e;  
   color: #FFF;  
   font-size: 10px;  
   padding: 3px 5px;  
   font-weight: 700;  
   margin-left: 5px;  
   -webkit-border-radius: 3px;  
   -moz-border-radius: 3px;  
   border-radius: 3px;  
}  

@media only screen and (max-width: 766px) {  
   .comments-container {  
   width: 480px;  
   }  

   .comments-list .comment-box {  
   width: 390px;  
   }  

}