Layout SAO

www

Desta vez eu trouxe um novo modelo para comentários inventado por mim. Admito, estou muito orgulhosa dele. Tudo porque, apesar de me basear num modelo normal, fiz tantas alterações que ele ficou irreconhecível. Por exemplo? Bem abaixo deixo o gif com os hovers e uma lista de personalizações de que me orgulho:

Meus amados:

• O título do autor ficou numa ribbon com hover, além do letter spacing
• A data está fora da ribbon, e da caixa de comentários - e tem hover
• O fundo dos comentários muda, sendo coberto por 5 tonalidades rosa de direções diferentes.
• Tem contagem de comentários ao lado de cada um deles, com bordas, sombras e arredondamentos
• Permite o acréscimo de um fundo numa sequência de comentários, ou só numa sequência de respostas.
• Os botões "eliminar" e "responder" têm hover, sombra, borda, cantos arredondados, e partem de baixo da caixinha
• O avatar tem a forma de uma flor, e ficou atrás da ribbon
• A única coisa que não tem hover é a caixa de comentários.

/*Início do código de comentários personalizados*/
#comments h4, #comments .comment-author a, #comments .comment-timestamp a { /*Texto "X comentários:"*/
color: #fcb6c5; /*Cor da fonte*/
font-family: Colonna MT; /*Fonte do texto*/
font-size: 30px; /*Tamanho da fonte*/
text-align: center;
-webkit-transition-duration: .60s;
}
#comments h4:hover, #comments .comment-author a:hover, #comments .comment-timestamp a:hover {
letter-spacing: 2px;
-webkit-transition-duration: .60s;
}
#comments { /*Área geral dos comentários*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhA695Ay2gLTwT_oOsZSlptNCC7_K01ZRbMVu-hfkbeB603RT213XO4JJ6yAzmHDOhUgOFJnhjaqkfcxxwLITCWsyUkgTSKct4nB0SM1YaMAuR_Ao3OmItO1PK0MK2YSdmAP_X204p0aE/s1600/miku2.png) repeat;
padding: 5px;
margin: 19px 0px 0px 0px;
border-radius: 0px 0px 5px 5px;
-webkit-transition-duration: .60s;
}
#comments:hover {
box-shadow: inset 0 0 10px 5px #fcb6c5, inset 0 0 10px 15px #ffc7d4, inset 0 0 15px 25px #ffcfd9, inset 0 0 20px 40px #ffdee4, inset -900px 0 0 0 #ffedf1;
-webkit-transition-duration: 3s;
}
.comments .comment-block {
margin: 40px 5px 15px -5px; /*Espaço entre o avatar e o corpo do comentário*/
}
.comment-header { /*enquadramento do nome do autor do comentário*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHOtQde1SVAy1Phk9xlFHIKTK682gvtpz1nqREicf9KmLSWHIfp1YqHj7TyMiP8YFYVpTxQ69WxHJrFgNIFrnz5s8Th87N1mmIsOBJrbciwl_g7aoxr8X0QVqU_fnh8ecexcJ0CiCcZh0/s1600/miku2.png) no-repeat;
widht: 590px;
height: 40px;
margin: 20px 100px -30px -100px;
padding: 1px;
-webkit-transition-duration: .60s;
}
.comment-header:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSUB5sZ2NTCjcpjDq5pYknQf-934ljWqnFXe6Sb75Pb2RkUGA9-qfCfh1DAlR_u9n1nTrQP7XSMdeqDcDYVHksC0A830Vy091QmhRAtWFqqU1R23rNdJ2oBoht8reopSQpgPUAivOI43s/s1600/miku1.png) no-repeat;
-webkit-transition-duration: .60s;
}
.comment-header a { /*autor do comentário - letras*/
color: #6da9c9 !important;
font-family: Colonna MT;
font-size: 20px;
font-weight: normal;
-webkit-transition-duration: .60s;
}
.comment-header a:hover {
color: #fa8c9c !important;
letter-spacing: 2px;
-webkit-transition-duration: .60s;
text-decoration: none;
}
.comments .comments-content .datetime { /*enquadramento da data e hora*/
background: #a8d5ed;
border-radius: 5px;
box-shadow: 2px 2px 3px 6d7f87;
margin: 50px -320px -30px 320px;
padding: 0px 2px 0px 2px;
-webkit-transition-duration: .60s;
}
.comments .comments-content .datetime:hover {
background: #ffc2cc;
-webkit-transition-duration: .60s;
}
.comments .comments-content .datetime a { /* Data e hora - letras */
font-size: 8px !important;
font-family: silkscreen;
-webkit-transition-duration: .60s;
}
.comments .comments-content .datetime a:hover {
color: #fa8c9c !important;
letter-spacing: 0px;
-webkit-transition-duration: .60s;
}
.comments .comments-content .comment-content { /*Bloco de texto do comentário*/
margin: -22px 0px 10px 33px; /*Espaço entre o bloco de texto do comentário e o nome do autor*/
position: relative;
background: #F1F6FE;
border: 1px solid #DCE7F9;
padding: 10px 6px 6px 6px;
color: #6a4675;
text-shadow: 1px 1px 1px #ffffff;
font-size: 10px;
font-family: silkscreen;
-webkit-transition-duration: .60s;
}
.comments:hover .comments-content:hover .comment-content:hover {
border-radius: 0px 10px 10px 10px
-webkit-transition-duration: .60s;
}
.comments .avatar-image-container { /*avatar*/
-webkit-mask-image: url(http://i36.tinypic.com/254vbpj.png);
mask-image: url(http://i36.tinypic.com/254vbpj.png); /*forma do avatar em base*/
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px; /*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
padding: 3px;
}
.comments .avatar-image-container img { /*avatar também*/
opacity: 0.70;
max-width: 50px;
max-height: 50px;
min-height: 50px;
min-width: 50px; /*Tamanho do avatar. Troque todos os 50 pelo tamanho desejado*/
-webkit-transition-duration: .60s;
}
.comments .avatar-image-container img:hover {
opacity: 1.0;
-webkit-transition-duration: .60s;
}
.comments .comments-content .comment { /*espaçamento entre os comentários e as bordas*/
padding: 3px 2px 5px 2px !important;
}
.comments .comment .comment-actions a { /*botões responder e excluir*/
margin: 5px 0px -25px 35px !important;
padding: 15px 2px 5px 2px !important;
font-size: 9px;
color: #fff !important;
font-family: silkscreen;
font-weight: normal;
background: #cfdbe3;
box-shadow: inset 0 0 15px #b5bec4, 0 0 3px #b5bec4;
border-radius: 0px 0px 10px 10px;
border: 2px solid #8bc1e0;
border-top: 0px solid #cccccc;
-webkit-transition-duration: .60s;
}
.comments .comment .comment-actions a:hover {
color: #ffffff; !important;
text-decoration: none;
background: #fcccd6;
box-shadow: inset 0 0 15px #ebbcc5, 0 0 3px #ebbcc5;
border-radius: 0px 0px 5px 5px;
border: 2px solid #f291a5;
border-top: 0px solid #cccccc;
-webkit-transition-duration: .60s;
}
.comments .comment-thread.inline-thread { /*fundo dos comentários de resposta*/
background-color: transparent !important;
padding: 0.5em 1em;
border-radius: 5px;
border: 0!important;
margin-right: -15px
}
.comments .continue { border-top: none;}
.comments .continue a {display: none;}
.comments-content {  counter-reset: contarcomentarios;  }
.comment-thread li:before {  /*contagem de comentários*/
content: counter(contarcomentarios);
counter-increment: contarcomentarios;
float: right;
padding: 5px 10px 5px 15px !important;
font-size: 9px;
color: #ffffff !important;
font-family: silkscreen;
font-weight: bold;
background: #cfdbe3;
box-shadow: inset 0 0 15px #b5bec4, 0 0 3px #b5bec4;
border-radius: 15px 0px 0px 15px;
border: 2px solid #8bc1e0;
border-right: 0px solid #cccccc;
margin: 0px -15px 0px 25px;
-webkit-transition-duration: .60s;
}
.comment-thread li { /*enquadramento de uma sequência de comentários*/
background: transparent;
}

/*Final do código de comentários personalizados*/