@import "default.scss";
@import "dark.scss";

view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image {
	box-sizing: border-box;
}

image {
	display: block;
	height: auto;
}

button {
	padding: 0;
	margin: 0;
	
	&::after {
		border: none;
	}
}

uni-page-body,
html,
body {  
	height: 100%;
}

.placeholder {
	color: #999;
	font-weight: normal;
}

.uicon-arrow-left {
	font-weight: bold !important;
}

.page_container {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.page_content {
	height: 100%;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	
	.main_content {
		flex: 1;
	}
	
	.alert_box {
		width: 100%;
		padding: 0 40rpx;
		position: absolute;
		bottom: 30rpx;
		left: 0;
	
		.item {
			padding: 20rpx;
			border-radius: 20rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.text {
				color: #fff;
			}
			
			.btn {
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
			}
		}
	}
}

// 语音输入弹窗
.record_popup_mask {
	width: 100%;
	position: relative;
	
	.info {
		position: absolute;
		top: -300rpx;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(0, 0, 0, 0.8);
		border-radius: 8rpx;
		color: #fff;
		font-size: 28rpx;
		padding: 20rpx 40rpx;
	}
	
	.p_head {
		padding: 20rpx 0;
		
		.icon {
			width: 100rpx;
			height: 50rpx;
			margin: 0 auto;
			border-radius: 50rpx;
			background: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.p_main {
		.textarea {
			width: 100%;
			height: 240rpx;
			padding: 0 40rpx;
			font-size: 32rpx;
		}
	}
	
	.p_footer {
		.tips {
			padding: 20rpx 0;
			text-align: center;
			font-size: 28rpx;
			color: #999;
		}
		
		.touchs {
			padding: 20rpx 0 100rpx 0;
			position: relative;

			.action {
				display: flex;
				align-items: center;
				justify-content: center;
				
				.left {
					font-size: 32rpx;
				}
				
				.center {
					margin: 0 150rpx;
					
					.icon {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
				.right {
					font-size: 32rpx;
					outline: none;
					background: transparent;
				}
			}

			.mask {
				width: 140%;
				height: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				border-radius: 100% 100% 0 0;
				margin-left: -20%;
				padding: 0 25%;
				
				.sounds {
					margin-top: 80rpx;
					position: relative;
					display: flex;
					align-items: center;
					
					@keyframes sound {
						100% {
							height: 10rpx;
							border-radius: 50%;
							filter: contrast(2);
						}
					}
					
					.item {
						position: absolute;
						width: 10rpx;
						border-radius: 12rpx;
						background: #1f94ea;
						
						animation-iteration-count: infinite !important;
						animation-direction: alternate !important;
						
						&:first-child,
						&:last-child {
							height: 10rpx !important;
							animation-duration: 0s !important;
						}
					}
					
					.item:nth-child(7n-6) {
						height: 20rpx;
						background: #42B8FE;
						animation: sound 0.3s ease;
					}
		
					.item:nth-child(7n-5) {
						height: 40rpx;
						background: #3FBAFD;
						animation: sound 0.6s ease;
					}
		
					.item:nth-child(7n-4) {
						height: 30rpx;
						background: #2752F7;
						animation: sound 0.57s ease;
					}
		
					.item:nth-child(7n-3) {
						height: 60rpx;
						background: #2952FC;
						animation: sound 0.52s ease;
					}
		
					.item:nth-child(7n-2) {
						height: 30rpx;
						background: #2453FB;
						animation: sound 0.4s ease;
					}
		
					.item:nth-child(7n-1) {
						height: 50rpx;
						background: #40BAF9;
						animation: sound 0.3s ease;
					}
		
					.item:nth-child(7n) {
						height: 40rpx;
						background: #2953FD;
						animation: sound 0.7s ease;
					}
				}
			}
		}
	}
}