/**Comentários personalizados by Elaine Gaspareto**/
.comments{
clear:both;
margin-top:10px;
margin-bottom:0;
background:#FFF;/*--- cor de fundo --- */
border:1px solid #DDD;/*--- cor da borda--- */
padding:10px 5%}
.comments h4{
font:normal normal 20px oswald}
.comments ol{
list-style:none;
counter-reset:trackit;
margin:0}
.comments li.comment{
list-style:none;
position:relative;
counter-increment:trackit;
clear:both}
.icon.user.blog-author:after{
content:"Autor";/*--- Autor pode ser trocado--- */
position:absolute;
top:.4em;
left:1em;
color:#000; /*--- cor da palavra Autor--- */
font-size:70%}
.comments .comment-block:before{
content:counters(trackit,".");
position:absolute;
float:none;
z-index:10000;
left:-1.9em;
top:1.2em;
bottom:inherit;
background:#d9d2e9; /*--- cor de fundo do botão numerado--- */
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
font-size:25px;
color:#F7FCFF;/*--- cor de fonte da numeração--- */
text-align:center;
clear:both;
margin:0;
padding:8px 12px}
.comments .comment-replies
.comment-block:before{content:"{" counters(trackit,".")"}";
position:absolute;
right:.5em;
left:inherit;
top:inherit;
bottom:.5em;
float:none;
z-index:10000;
background:#f0ecfa;/*--- cor de fundo das respostas--- */
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
font-size:20px;
color:#ccc;
padding:8px 7px}
.comment-header{background:#d9d2e9}/*--- cor de fundo do nome do comentarista--- */
.comments .comments-content .comment-header,.comments
.comments-content .comment-content{
margin:5px 5px 10px;
padding:0 10px 0 75px}
.comments .comments-content .comment-replies .comment-block{
position:relative}
.comments .comments-content .comment-replies{
margin-left:2em;
margin-top:1em;
clear:both;
padding:0}
.comments .comment-thread.inline-thread{
background:#fff;
padding:0 0 0 2em}
.comments .comment-replies .comment-block{
float:right;
border:1px solid #e9e3f8;
min-height:100px;
width:90%;
margin-left:48px;
background:#fbfafc;
padding:0 0 3em}
.comments .comment-block{
float:right;
border:1px solid #e9e3f8;
min-height:100px;
width:90%;
margin-left:48px;
background:#f5f2ff;
padding:0 0 2em}
.comment-actions{
position:absolute;
left:4.5em;
bottom:.5em;
font-size:18px;
padding:0}
.comments .comment .comment-actions a{
padding-right:5px;
padding-top:5px;
margin:0}
.comments .comments-content .user a{
color:#000}
.comments .comments-content .user{
font-style:none;
font-weight:normal;
font-size:18px;}
.comments .comments-content .datetime,.comments
.comments-content .datetime a,.comments .comments-content .datetime a:hover{
margin-left:6px;
float:right;
text-transform:none;
margin-top:5px;
font-size:10px;
font-family:arial;
font-weight:normal;
color:#000}/*--- cor da data--- */
.comments .avatar-image-container{
background:transparent;
margin-left:0;
max-height:70px;
max-width:70px;
overflow:hidden;
width:70px;
height:70px;
position:absolute;
left:25px;
top:55px;
z-index:10;
padding:3px}
.comments .avatar-image-container img{
max-width:70px;
max-height:70px;
min-height:70px;
min-width:70px}
.comments .thread-toggle{
display:none}
/**Fim do código dos comentários**/
Modelo pronto para personalizar os comentários do blog
Views:
