dwweb-pc/旧版多玩公共资源/移动版通用评论/sass/main.scss

@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,.95);
	max-width: 80%;
	padding: 1em 5%;
	position: absolute;
	top: 50%;
	left: 50%;
	p{
		color: #fff;
		text-align: center;
	}
}

body{
	background-color: #F5F5F5;
}
ul{padding: 0px; margin: 0px;}


/*评论样式*/

.comment-wrapper{
	padding: 0 1em;
	height: 100%;
	.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;
		.tab{
			display: -webkit-box;
			-webkit-box-orient:horizontal;
			border: 1px solid #3263A0;
			border-radius:3px;
			>span{
				-webkit-box-flex:1;
				display: block;
				text-align: center;
				height: 2em;
				line-height: 2em;
				color: #3264a0;
				font-size: .875em;
				&:active{
					background-color: #D9E9FC;
				}
				&[class="selected"]:hover{
					background-color: #3263A0;
				}
			}
			:first-child{
				border-radius:3px 0px 0px 3px;
			}
			:last-child{
				border-radius:0px 3px 3px 0px;
			}
			>.selected{
				color: #fff;
				background-color: #3263A0;
			}
		}
	}
	.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;
	>li{
		padding:.5em 0 .7em;
		border-bottom: 1px solid #CCCCCC;
		position: relative;
	}
	>li:last-child{
		border-bottom: 0px solid #fff;
	}
	.hd{
		overflow: hidden;
		padding-bottom: .3em;
		position: relative;
		>.info{
			float: left;
			.name{
				color: #666666;
				font-size: .875em;
			}
			.time{
				color: #C2C2C2;
				margin-left: 5px;
				font-size: .75em;
			}
		}
		>.action{
			position: absolute;
			top: 0px;
			right: 0px;
			.zan{
				color: #C2C2C2;
				font-size: .75em;
				height: 20px;
				line-height: 20px;
				display: block;
				em{
					margin-right: 3px;
				}
			}
			.zan-normal>.icon{
				background-position:0 -65px;
			}
			.zan-active>.icon{
				background-position:0 -20px;
				
			}
		}
	}
	.bd{
		.cont{
			>p{
				color: #333333;
				line-height: 1.4em;
			}
		}
	}
	.tooltip-layer{
		display: none;
		position: absolute;
		top: 0px;
		left: 50%;
		background-color:rgba(36,36,36,.95);
		z-index: 80;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		.comment-action-bar{
			display: -webkit-box;
			-webkit-box-orient:horizontal;
			padding: 5px;
		}
		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;
			.text{
				display: block;
				text-align: center;
				font-size: .875em;
			}
			&:active{
				background-color: #242424;
			}
		}
		.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;
		}
		.zan>.icon{
			background-position: 0 -85px;
		}
		.reply>.icon{
			background-position: 0 -40px;
		}
		.u-comment-arrow{
			border-width: 10px;
			position: absolute;
			top: auto;
			bottom: -20px;
			left: 50%;
			margin-left: -10px;
			border-color: rgba(36,36,36,.95) transparent transparent;		
		}
	}
	.tooltip-layer-bottom{
		.u-comment-arrow{
			bottom: auto;
			top: -20px;
			border-color: transparent transparent rgba(36,36,36,.95) transparent;
		}
	}

}

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

	.replyList-bd{
		.cont{
			>p{
				color: #333333;
				line-height: 1.4em;
			}
		}
	}

	.comment-replyList-more{
		font-size: .812em;
		color: #666666;
		>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;
	>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;
	}
	>.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;
	textarea{
		border: 1px #D0D0D0 solid;
		height: 10em;
		widows: 100%;
	}
	.post-button{
		display: block;
		background-color: #3D669B;
		text-align: center;
		border-radius:3px;
		input{
			display: block;
			background: none;
			border: none;
			color: #fff;
			width: 100%;
			height: 44px;
			line-height: 44px;
			padding: 0px;
			border-radius:3px;
		}
		&:active{
			background-color: #3488E7;
		}
	}
}

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