blob: 69854418ab1d35bd4946e4dc89e742917be96c89 (
plain)
1
|
.comments-info-title{margin-top:1rem;margin-left:1rem}.comments-container{margin:0px 2rem 15px;width:100%}.comments-container>ul{list-style:none}.comments-container>ul>li>ul{list-style:none}.comments-list{margin-top:30px;position:relative}.comments-main{margin-left:1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.comment-main-level{margin-left:-30px}.comments-list:before{content:'';width:2px;height:100%;background:#c7cacb;position:absolute;left:2px;top:0}.comments-list:after{content:'';width:7px;height:7px;border:3px solid #dee1e3;border-radius:50%}.reply-list{margin-left:-15px}.reply-list:before,.reply-list:after{display:none}.reply-list li:before{content:'';width:60px;height:2px;background:#c7cacb;position:absolute;top:25px;left:-55px}.comments-list li{margin-bottom:15px;position:relative}.comments-list li:after{content:'';display:block;clear:both;height:0px;width:0px}.reply-list{padding-left:88px;clear:both;margin-top:15px}.comments-list .comment-avatar{width:65px;height:65px;position:relative;z-index:2;border:3px solid #FFF;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,0.2);overflow:hidden}.comments-list .comment-avatar img{width:100%;height:100%}.reply-list .comment-avatar{width:50px;height:50px}.comment-main-level:after{content:'';width:0;height:0;display:block;clear:both}.comments-list .comment-box{width:80%;position:relative;margin-left:1rem;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 #222;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}.reply-list .comment-box{width:75%}.comment-box .comment-head{background:#222;padding:10px 12px;border-bottom:1px solid #ccc;overflow:hidden;border-radius:4px 4px 0 0}.comment-box .comment-head i{float:right;margin-left:14px;position:relative;color:#A6A6A6;cursor:pointer;transition:color 0.3s ease}.comment-box .comment-head i:hover{color:red}.comment-box .comment-name{color:#283035;font-size:14px;font-weight:700;float:left;margin-right:10px}.comment-box .comment-name a{color:#007fdb}.comment-box .comment-head span{float:left;color:#999;font-size:13px;position:relative}.comment-box .comment-content{background:#333;padding:12px;font-size:15px;color:#fff;border-radius:0 0 4px 4px}.comment-box .comment-name.by-author{color:#00aee6}.comment-box .comment-name.by-author a{color:#00aee6}.comment-box .comment-name.by-author:after{content:'autor';background:#03658c;color:#FFF;font-size:12px;padding:3px 5px;font-weight:700;margin-left:10px;border-radius:3px}@media only screen and (max-width: 766px){.comments-container{width:480px}.comments-list .comment-box{width:390px}.reply-list .comment-box{width:320px}}@media only screen and (max-width: 480px){.comments-container{width:480px}.comments-list:before{left:-13px}.comments-list.reply-list{margin-left:-30px}.comments-list:after{left:-15px;position:relative}.comment-box .comment-head,.comment-box .comment-content{font-size:12px}.comments-list .comment-avatar{width:35px;height:35px}.comments-list .comment-box{max-width:250px}.reply-list .comment-box{max-width:170px}}@media only screen and (max-width: 360px){.comments-list .comment-avatar{width:35px;height:35px}.comments-list .comment-box{max-width:200px}.reply-list .comment-box{max-width:120px}}
|
