Modelo de comentário - IV

 

 yoo~~

 Estilo de modelo de comentário 4,  ele é do sugar html, um blog antigo que foi clonado igual yummy, que era uns dos meus blog to juntando modelos mais rápido possivel, para vocês personalizar, ele funciona apenas para o travel, não sei como é o modelo simples, estou pesquisando para isso!! 

Espero que gostem, tutorial, e um modelo simples, tente por em /* Comments, e cole o modelo abaixo desse código, é só clicar em leia mais

o post fica mais natural possivel~~

    /* personalizar comentário by: sugarhtml */
    @font-face { font-family: silkscreen; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
    .comments{clear:both;margin-top:10px;margin-bottom:0;line-height:18px;font-size:13px}
    .comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
    .comments .comment .comment-actions a,.comments .comment .continue a{
    display:inline-block;
    margin:0 0 10px 10px;
    padding:0 15px;
    color:#fff !important; /*--- cor da fonte do botão reply--- */
    text-align:center;
    text-decoration:none;
    font-size:8px;
    font-family: "silkscreen";
    background: #d8e1e5;  /*--- cor de fundo do botão reply--- */
    height:26px;
    line-height:28px;
    font-weight:normal;
    cursor:pointer;
    }
    .comments .comment .comment-actions a:hover,.comments .comment .continue a:hover {
    text-decoration: none;
    background:#d8e1e5; /*--- cor de fundo do botão reply houver--- */
    }
    .comments .comments-content .comment-thread ol{
    list-style-type:none;padding:0;text-align:none}
    .comments .comments-content .inline-thread{padding:0}
    .comments .comments-content .comment-thread{margin:8px 0}
    .comments .comments-content .comment-thread:empty{display:none}
    .comment-replies{margin-top:1em;margin-left:40px;}
    .comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
    .comments .comments-content .comment:first-child{padding-top:16px}
    .comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
    .comments .comments-content .comment-body{position:relative;
    }
    .comments .comments-content .user{font-style:normal;font-weight:normal}
    .comments .comments-content .user a{font-weight:normal;text-decoration:none;}
    .comments .comments-content .icon.blog-author{
    background-repeat: no-repeat;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
    width:18px;
    height:18px;
    display:inline-block;
    margin:0 0 -4px 6px;
    float:right;
    }
    .comments .comments-content .datetime a{
    font-size:8px;
    text-decoration:none; color:#d8e2e6; /* -- cor do link da data do comentário -- */
    }
    .comment-content{margin:0 0 8px;padding:0 5px;
    }
    .comments .comment-block{
    margin-left:65px;
    position:relative;
    background:#f1f1f1; /* -- cor de fundo do comentário -- */
    font-size:8px;
    font-family: "silkscreen";
    }
    .comment-header{ /*--- linha onde fica o nome do autor do comentário --- */
    background-color:#d8e1e5;   /*--- cor de fundo--- */
    font-size:8px;
    font-family: "silkscreen";
    padding:5px;
    }
    .comment-header a{
    color: $(link.color); /*--- cor do link nome do autor do comentario --- */
    }
    .comments .comments-content .owner-actions{position:absolute;right:0;top:0}
    .comments .comments-replybox{border:none;height:230px;width:100%}
    .comments .comment-replybox-thread{margin-top:0}
    .comments .comment-replybox-single{margin-top:5px;margin-left:48px}
    .comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
    .comments .thread-toggle{cursor:pointer;display:inline-block}
    .comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
    .comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
    .comments .thread-chrome.thread-collapsed{display:none}
    .comments .thread-toggle{display:inline-block}
    .comments .thread-toggle .thread-arrow{
    display:inline-block;
    height:6px;
    width:7px;
    overflow:visible;
    margin:0.3em;
    padding-right:4px;
    }
    .comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
    }
    .comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
    }
    .avatar-image-container{
    float:left
    vertical-align:middle;
    overflow:hidden;
    width:65px !important;
    height:51px !important;
    max-width:65px !important;
    max-height:51px !important}
    .comments .avatar-image-container img{
    padding:2px;
    border:1px solid #ccc;
    width:45px !important;
    height:45px !important
    ;max-width:45px !important;
    max-height:45px !important;
    }
    /* Fim da personalização by: sugarhtml - liihchan