Style CSS Treaded Comment

<style>
li.comment{padding:3px 3px 10px 3px;background:#4f697e;border:0 dotted #507aa5;border-radius:6px}li.comment{padding:3px!important;border:0 dotted #507aa5;border-radius:6px;position:relative}li.comment a:link,li.comment a{color:#fff;text-shadow:1px 1px 1px #4f697e}li.comment:hover{color:#b11b40}li.comment .avatar-image-container{position:absolute;right:25px;top:30px;padding:1px!important;width:30px;height:30px;border:1px solid #507aa5;background:#123456;box-shadow:0 0 4px #ccc;border-radius:6px;opacity:.3;filter:alpha(opacity=30)}li.comment .avatar-image-container,.comment-block{transition:.4s;-o-transition:.4s;-moz-transition:.4s;-webkit-transition:.4s;-ms-transition:.4s}.comments .thread-toggle{text-align:center;padding:3px 6px}.comment-thread{background:transparent;padding:5px;border-radius:3px}.comment-block{font-family:&#39;lucida grande&#39;,tahoma,verdana,arial,sans-serif;font-size:11px;background-color:#eee;background:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#4f697e));background:-webkit-linear-gradient(top,#eee,#4f697e);background:-moz-linear-gradient(top,#eee,#4f697e);background:-ms-linear-gradient(top,#eee,#4f697e);background:-o-linear-gradient(top,#eee,#4f697e);color:#000;padding:10px;border-bottom-right-radius:100px;margin:3px!important}li.comment:hover .avatar-image-container{opacity:1.0;filter:alpha(opacity=100);-webkit-transform:translate(0px,-50px);-moz-transform:translate(0px,-50px);-o-transform:translate(0px,-50px);-transform:translate(0px,-50px);z-index:999;-moz-box-shadow:0 0 70px #fff;-webkit-box-shadow:0 0 70px #fff;-o-box-shadow:0 0 70px #fff}li.comment .avatar-image-container img{width:32px;height:32px;display:block;margin:0!important;border-radius:4px}.inline-thread{background-color:#123456;background:-webkit-gradient(linear,left top,left bottom,from(#123456),to(#eee));background:-webkit-linear-gradient(top,#123456,#eee);background:-moz-linear-gradient(top,#123456,#eee);background:-ms-linear-gradient(top,#123456,#eee);background:-o-linear-gradient(top,#123456,#eee);border-radius:6px;padding:8px 4px}.comment-replies,.comment-replybox-single{background:#4f697e;border-radius:4px;padding-left:10px}.thread-dropContainer,.thread-expanded{background:transparent}.comment-block{margin:3px!important}.comment-thread.inline-thread{margin-left:-10px!important}.comment-block:hover{background-color:#123456;background:-webkit-gradient(linear,left top,left bottom,from(#123456),to(#eee));background:-webkit-linear-gradient(top,#123456,#eee);background:-moz-linear-gradient(top,#123456,#eee);background:-ms-linear-gradient(top,#123456,#eee);background:-o-linear-gradient(top,#123456,#eee);color:#ddd}.comment-header{background:-webkit-gradient(linear,left top,left bottom,from(#123456),to(#eee));background:-webkit-linear-gradient(top,#123456,#eee);background:-moz-linear-gradient(top,#123456,#eee);background:-ms-linear-gradient(top,#123456,#eee);background:-o-linear-gradient(top,#123456,#eee);text-align:left;padding:0 5px;text-transform:uppercase;border-bottom-right-radius: 100px;}li.comment:hover .comment-header .datetime a{display:none;}li.comment:hover .comment-header{text-align:right}.comment-replybox-thread{margin-left:2px;margin-right:2px;padding-left:10px;padding-top:7px;border-radius:6px;background:#4f697e;position:relative}.comment-replybox-thread:hover{padding:7px 0 0 10px;background-color:#123456;background:-webkit-gradient(linear,left top,left bottom,from(#123456),to(#eee));background:-webkit-linear-gradient(top,#123456,#eee);background:-moz-linear-gradient(top,#123456,#eee);background:-ms-linear-gradient(top,#123456,#eee);background:-o-linear-gradient(top,#123456,#eee)}
.comment-form{color:#fff;font-family:&#39;lucida grande&#39;,tahoma,verdana,arial,sans-serif;font-size:11px;}.comment-form a{color:#ddd}
.comment-replybox-thread:before{
position:absolute;content:&quot;&quot;;
left:0;top:0;
width:100%;
height:100%;
background-color:#123456;
background:-webkit-gradient(linear,left top,left bottom,from(#123456),to(#eee));
background:-webkit-linear-gradient(top,#123456,#eee);
background:-moz-linear-gradient(top,#123456,#eee);
background:-ms-linear-gradient(top,#123456,#eee);
background:-o-linear-gradient(top,#123456,#eee);
opacity:0.6;
filter:alpha(opacity=60);
border-radius:6px;
}
.comment-replybox-thread:hover:before{
width:100%;
height:0.5%;
overflow:hidden;
}
.comment-actions a{padding:0px 3px!important;font-size:10px;margin-right:6px;background-color:#eee;background:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#4f697e));background:-webkit-linear-gradient(top,#eee,#4f697e);background:-moz-linear-gradient(top,#eee,#4f697e);background:-ms-linear-gradient(top,#eee,#4f697e);background:-o-linear-gradient(top,#eee,#4f697e);color:#ddd;border-radius:3px;text-transform:uppercase;font-weight:bold}.comment-actions a:hover{color:#fff!important;background-color:#123456;background:-webkit-gradient(linear,left top,left bottom,from(#123456),to(#eee));background:-webkit-linear-gradient(top,#123456,#eee);background:-moz-linear-gradient(top,#123456,#eee);background:-ms-linear-gradient(top,#123456,#eee);background:-o-linear-gradient(top,#123456,#eee);text-decoration:none!important}
.comment-block,.comment-replybox-thread,.comment-replybox-thread:before{
transition:0.5s linear;
-o-transition:0.5s linear;
-moz-transition:0.5s linear;
-webkit-transition:0.5s linear;
-ms-transition:0.5s linear;
}
</style>

0 Responses to "Style CSS Treaded Comment"

Tambahkan komentar