dwweb-pc/公共/移动版通用评论/css/main.css

@charset "UTF-8";
/*通用模块*/
/*通用组件*/
.u-comment-arrow { position: absolute; right: 10px; top: 7px; width: 0; height: 0; border-width: 5px; border-style: solid; border-color: #666 transparent transparent; font-size: 0; line-height: 0; }

/* 通用评论弹出层 */
.u-comment-popupnote { display: none; background-color: rgba(36, 36, 36, 0.95); max-width: 80%; padding: 1em 5%; position: absolute; top: 50%; left: 50%; }
.u-comment-popupnote p { color: #fff; text-align: center; }

body { background-color: #F5F5F5; }

ul { padding: 0px; margin: 0px; }

/*评论样式*/
.comment-wrapper { padding: 0 1em; height: 100%; }
.comment-wrapper .comment-hd { position: absolute; top: 10px; left: 0px; height: 2em; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; }
.comment-wrapper .comment-hd .tab { display: -webkit-box; -webkit-box-orient: horizontal; border: 1px solid #3263A0; border-radius: 3px; }
.comment-wrapper .comment-hd .tab > span { -webkit-box-flex: 1; display: block; text-align: center; height: 2em; line-height: 2em; color: #3264a0; font-size: .875em; }
.comment-wrapper .comment-hd .tab > span:active { background-color: #D9E9FC; }
.comment-wrapper .comment-hd .tab > span[class="selected"]:hover { background-color: #3263A0; }
.comment-wrapper .comment-hd .tab :first-child { border-radius: 3px 0px 0px 3px; }
.comment-wrapper .comment-hd .tab :last-child { border-radius: 0px 3px 3px 0px; }
.comment-wrapper .comment-hd .tab > .selected { color: #fff; background-color: #3263A0; }
.comment-wrapper .comment-bd { position: absolute; top: 2.5em; bottom: 44px; left: 0px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; }

.commentList { overflow: hidden; min-height: 300px; }
.commentList > li { padding: .5em 0 .7em; border-bottom: 1px solid #CCCCCC; position: relative; }
.commentList > li:last-child { border-bottom: 0px solid #fff; }
.commentList .hd { overflow: hidden; padding-bottom: .3em; position: relative; }
.commentList .hd > .info { float: left; }
.commentList .hd > .info .name { color: #666666; font-size: .875em; }
.commentList .hd > .info .time { color: #C2C2C2; margin-left: 5px; font-size: .75em; }
.commentList .hd > .action { position: absolute; top: 0px; right: 0px; }
.commentList .hd > .action .zan { color: #C2C2C2; font-size: .75em; height: 20px; line-height: 20px; display: block; }
.commentList .hd > .action .zan em { margin-right: 3px; }
.commentList .hd > .action .zan-normal > .icon { background-position: 0 -65px; }
.commentList .hd > .action .zan-active > .icon { background-position: 0 -20px; }
.commentList .bd .cont > p { color: #333333; line-height: 1.4em; }
.commentList .tooltip-layer { display: none; position: absolute; top: 0px; left: 50%; background-color: rgba(36, 36, 36, 0.95); z-index: 80; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.commentList .tooltip-layer .comment-action-bar { display: -webkit-box; -webkit-box-orient: horizontal; padding: 5px; }
.commentList .tooltip-layer li { padding-top: 4px; height: 50px; width: 60px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #fff; -webkit-box-flex: 1; }
.commentList .tooltip-layer li .text { display: block; text-align: center; font-size: .875em; }
.commentList .tooltip-layer li:active { background-color: #242424; }
.commentList .tooltip-layer .icon { width: 24px; height: 24px; background-image: url(../img/map-icon.png); background-repeat: none; -webkit-background-size: 50px 250px; background-size: 50px 250px; display: block; margin: 0 auto .4em; }
.commentList .tooltip-layer .zan > .icon { background-position: 0 -85px; }
.commentList .tooltip-layer .reply > .icon { background-position: 0 -40px; }
.commentList .tooltip-layer .u-comment-arrow { border-width: 10px; position: absolute; top: auto; bottom: -20px; left: 50%; margin-left: -10px; border-color: rgba(36, 36, 36, 0.95) transparent transparent; }
.commentList .tooltip-layer-bottom .u-comment-arrow { bottom: auto; top: -20px; border-color: transparent transparent rgba(36, 36, 36, 0.95) transparent; }

.comment-replyList-ctn { margin: 10px 5px 0px; }
.comment-replyList-ctn .comment-replyList { padding: 0 10px; border: 1px solid #C2C2C2; background-color: #FFFFFF; margin-bottom: .7em; }
.comment-replyList-ctn .comment-replyList > li { padding: .5em 0; border-bottom: 1px solid #CCCCCC; position: relative; }
.comment-replyList-ctn .comment-replyList > :last-child { border-bottom: 0px solid #ccc; }
.comment-replyList-ctn .replyList-hd { overflow: hidden; padding-bottom: .3em; }
.comment-replyList-ctn .replyList-hd > .info { float: left; }
.comment-replyList-ctn .replyList-hd > .info .name { color: #666666; font-size: .875em; }
.comment-replyList-ctn .replyList-hd > .info .time { color: #C2C2C2; margin-left: 5px; font-size: .75em; }
.comment-replyList-ctn .replyList-hd > .action { float: right; }
.comment-replyList-ctn .replyList-hd > .action .zan { color: #C2C2C2; font-size: .75em; }
.comment-replyList-ctn .replyList-bd .cont > p { color: #333333; line-height: 1.4em; }
.comment-replyList-ctn .comment-replyList-more { font-size: .812em; color: #666666; }
.comment-replyList-ctn .comment-replyList-more > a { color: #3264a0; }

.comment-post-ctn { position: absolute; bottom: 0px; left: 0px; background-color: #FFFFFF; width: 100%; padding: 0 1em; height: 43px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.comment-post-ctn > input { border: 1px solid #CCCCCC; padding: 0px; margin: 0px; box-sizing: border-box; height: 28px; margin-top: 7px; font-size: .875em; background-color: #F5F5F5; padding-left: 30px; }
.comment-post-ctn > .icon { position: absolute; top: 10px; left: 1.4em; height: 20px; width: 20px; background-image: url(../img/map-icon.png); background-repeat: no-repeat; background-position: 0 3px; -webkit-background-size: 50px 250px; background-size: 50px 250px; }

/* 评论发表页面样式 */
.comment-post { padding: 1em 0; }
.comment-post textarea { border: 1px #D0D0D0 solid; height: 10em; widows: 100%; }
.comment-post .post-button { display: block; background-color: #3D669B; text-align: center; border-radius: 3px; }
.comment-post .post-button input { display: block; background: none; border: none; color: #fff; width: 100%; height: 44px; line-height: 44px; padding: 0px; border-radius: 3px; }
.comment-post .post-button:active { background-color: #3488E7; }

.comment-wrapper--duowanapp .comment-hd .tab { border-color: #E5004D; }
.comment-wrapper--duowanapp .comment-hd .tab span { color: #e40450; }
.comment-wrapper--duowanapp .comment-hd .tab > .selected { background-color: #E5004D; }
.comment-wrapper--duowanapp .comment-post .post-button { background-color: #E5004D; }