@import "base.less";
@import "view.less";
@import "detail-item.less";
@import "detail-card.less";
@import "loading.less";
@import "sweetalert.less";

.pageView{
	z-index: 2;
	overflow: hidden;
}
.detail-item{
	padding-top: 10px;
	// @media screen and (min-width: 320px){
	// 	padding-top: 100px;
	// }
	@media screen and (min-width: 375px){
		padding-top: 13px;
	}
	@media screen and (min-width: 414px){
		padding-top: 15px;
	}
	@media screen and (min-width: 768px){
		padding-top: 25px;
	}
	.content{
		position: relative;

		.video-celebrity-info{
			padding: 0 5px;
			margin: 5px 5px 0 0;

			a{
				color: #fff;
			}

			@media screen and (min-width: 768px){
				padding: 5px 10px;
				margin: 10px 10px 0 0;		

			}
		}



		.score-star{
			color: #FFA200;
			background-image: url('img/detail/star_ui_new.png?v=1');
			background-repeat: no-repeat;
			margin: 5px 5px 0 0;
			
			@media screen and (min-width: 320px){
				padding-left: 120px;
				background-size: 160px auto;
				font-size: 1.3em;
				width: 2px;
			}
			@media screen and (min-width: 768px){
				padding-left: 170px;
				width: 45px;
				height: 38px;
				line-height: 38px;
				background-size: 150px auto;
				font-size: 1.6em;
			}
		}
		@media screen and (min-width: 320px){
			.star-0{
				background-position: 8px 4px;
			}
			.star-5{
				background-position: 8px -25px;
			}
			.star-10{
				background-position: 8px -55px;
			}
			.star-15{
				background-position: 8px -85px;
			}
			.star-20{
				background-position: 8px -114px;
			}
			.star-25{
				background-position: 8px -144px;
			}
			.star-30{
				background-position: 8px -174px;
			}
			.star-35{
				background-position: 8px -203px;
			}
			.star-40{
				background-position: 8px -233px;
			}
			.star-45{
				background-position: 8px -262px;
			}
			.star-50{
				background-position: 8px -292px;
			}
		}
		@media screen and (min-width: 768px){
			padding-top: 16px;
			.star-0{
				background-position: 8px -299px;
			}
			.star-5{
				background-position: 8px -334px;
			}
			.star-10{
				background-position: 8px -369px;
			}
			.star-15{
				background-position: 8px -405px;
			}
			.star-20{
				background-position: 8px -440px;
			}
			.star-25{
				background-position: 8px -476px;
			}
			.star-30{
				background-position: 8px -511px;
			}
			.star-35{
				background-position: 8px -546px;
			}
			.star-40{
				background-position: 8px -582px;
			}
			.star-45{
				background-position: 8px -617px;
			}
			.star-50{
				background-position: 8px -652px;
			}
		}
	}
	.background{
		// height: 175px;
		// box-shadow: 0 -100px 40px #000 inset;
		// @media screen and (min-width: 375px){
		// 	height: 150px;
		// }
		// @media screen and (min-width: 414px){
		// 	height: 165px;
		// }
		// height: 80px;
		// box-shadow: 0 -40px 40px @backgroundColor inset;

		// @media screen and (min-width: 375px){
		// 	height: 100px;
		// 	box-shadow: 0 -50px 50px @backgroundColor inset;
		// }
		// @media screen and (min-width: 414px){
		// 	height: 120px;
		// 	box-shadow: 0 -60px 60px @backgroundColor inset;
		// }
		// @media screen and (min-width: 768px){
		// 	height: 160px;
		// 	box-shadow: 0 -80px 80px @backgroundColor inset;
		// }
		// filter: none;
	}	
}
.follow-content{
	padding-right: 1%;
	box-sizing: border-box;
	float: right;

	@media screen and (min-width: 768px){
		padding-right: 2%;
	}
}
.follow{
	display: block;
	display: none;
}
@media screen and (min-width: 320px){
	.follow{
		right: 2px;
		width: 35px;
		height: 35px;
		background: url('img/playerSubscribe@2x.png?v=1') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=1');
		background-size: cover;
	}
}
@media screen and (min-width: 375px){
	.follow{
		right: 3px;
		width: 35px;
		height: 35px;
		background: url('img/playerSubscribe@2x.png?v=1') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=1');
		background-size: cover;
	}
}
@media screen and (min-width: 414px) {
	.follow{
		right: 4px;
		width: 35px;
		height: 35px;
		background: url('img/playerSubscribe@2x.png?v=1') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=1');
		background-size: cover;
	}
}

@media screen and (min-width: 768px) {
	.follow{
		right: 10px;
		width: 50px;
		height: 50px;
		background: url('img/playerSubscribe@2x.png?v=1') top center no-repeat;
		background-size: cover;
	}
	.hasfollow{
		background-image: url('img/playerSubscribed@2x.png?v=1');
		background-size: cover;
	}
}
.detail-item{
	.thumb{
		padding-left: 3%;
		display: block;
		float: left;
		box-sizing: border-box;
		min-height: 1px;
		@media screen and (min-width: 667px){
			width: 20%;
		}
	}
	.content{
		padding: 0 3%;
		// padding-top: 8px;
		width: 70%;
		display: block;
		float: left;
		box-sizing: border-box;
		@media screen and (min-width: 375px){
			// padding-top: 28px;
		}
		@media screen and (min-width: 414px){
			// padding-top: 42px;
		}
		@media screen and (min-width: 667px){
			padding: 0 5%;
			width: 80%;
		}
		.viewedInfo{
			background: none;
			padding: 3px 0;
		}
		// .actions{
		// 	margin-top: 55px;

		// 	@media screen and (min-width: 667px){
		// 		margin-top: 65px;
		// 	}
		// 	.gap{
		// 		width: 7%;
		// 	}
		// 	a{
		// 		border: 1px solid rgba(255, 255, 255, 0.6);
		// 		line-height: 2.2em;
		// 		height: 2.2em;
		// 		text-align: left;
		// 		font-size: 1.0em;
		// 		font-weight: normal;
		// 		@media screen and (min-width: 667px){
		// 			font-size: 1.1em;
		// 			line-height: 2.4em;
		// 			height: 2.4em;
		// 		}
		// 	}
		// 	a.play{
		// 		background: url('img/detail/detail_play@2x.png?v=1') 17px 5px no-repeat;
		// 		background-size: 20px 20px;
		// 		padding-left: 45px;
		// 		&:active{
		// 			background-color: rgba(255, 255, 255, 0.2);
		// 		}
		// 	}
		// 	a.download{
		// 		background: url('img/detail/detail_download@2x.png?v=1') 17px 5px no-repeat;
		// 		background-size: 20px 20px;
		// 		padding-left: 45px;
		// 		&:active{
		// 			background-color: rgba(255, 255, 255, 0.2);
		// 		}
		// 	}
		// 	a.complex-episode{
		// 		background: url('img/detail/detail_download@2x.png?v=1') 5px 5px no-repeat;
		// 		background-size: 20px 20px;
		// 		padding-left: 29px;
		// 		&:active{
		// 			background-color: rgba(255, 255, 255, 0.2);
		// 		}
		// 	}	
		// 	@media screen and (min-width: 320px){
		// 		a.play{
		// 			background: url('img/detail/detail_play@2x.png?v=1') 17px 5px no-repeat;
		// 			background-size: 20px 20px;
		// 			padding-left: 45px;
		// 		}
		// 		a.download{
		// 			background: url('img/detail/detail_download@2x.png?v=1') 17px 5px no-repeat;
		// 			background-size: 20px 20px;
		// 			padding-left: 45px;
		// 		}
		// 		a.complex-episode{
		// 			background: url('img/detail/detail_download@2x.png?v=1') 8px 5px no-repeat;
		// 			background-size: 20px 20px;
		// 			padding-left: 33px;
		// 		}
		// 	}
		// 	@media screen and (min-width: 375px){
		// 		a.play{
		// 			background: url('img/detail/detail_play@2x.png?v=1') 25px 5px no-repeat;
		// 			background-size: 20px 20px;
		// 			padding-left: 55px;
		// 		}
		// 		a.download{
		// 			background: url('img/detail/detail_download@2x.png?v=1') 25px 5px no-repeat;
		// 			background-size: 20px 20px;
		// 			padding-left: 55px;
		// 		}
		// 		a.complex-episode{
		// 			background: url('img/detail/detail_download@2x.png?v=1') 16px 5px no-repeat;
		// 			background-size: 20px 20px;
		// 			padding-left: 42px;
		// 		}
		// 	}
		// 	@media screen and (min-width: 414px){
		// 		a.play{
		// 			background: url('img/detail/detail_play@2x.png?v=1') 30px 5px no-repeat;
		// 			background-size: 20px 20px;
		// 			padding-left: 62px;
		// 		}
		// 		a.download{
		// 			background: url('img/detail/detail_download@2x.png?v=1') 30px 5px no-repeat;
		// 			background-size: 20px 20px;
		// 			padding-left: 62px;
		// 		}
		// 		a.complex-episode{
		// 			background: url('img/detail/detail_download@2x.png?v=1') 21px 5px no-repeat;
		// 			background-size: 20px 20px;
		// 			padding-left: 50px;
		// 		}
		// 	}
		// 	@media screen and (min-width: 667px){
		// 		a.play{
		// 			background: url('img/detail/detail_play@2x.png?v=1') 70px 4px no-repeat;
		// 			background-size: 35px 35px;
		// 			padding-left: 125px;
		// 		}
		// 		a.download{
		// 			background: url('img/detail/detail_download@2x.png?v=1') 65px 4px no-repeat;
		// 			background-size: 35px 35px;
		// 			padding-left: 125px;
		// 		}
		// 		a.complex-episode{
		// 			background: url('img/detail/detail_download@2x.png?v=1') 60px 4px no-repeat;
		// 			background-size: 35px 35px;
		// 			padding-left: 115px;
		// 		}
		// 	}
		// }
	}
	.actions{
		// a{
		// 	border: 1px solid rgba(255, 255, 255, 0.6);
		// 	line-height: 2.2em;
		// 	height: 2.2em;
		// 	text-align: left;
		// 	font-size: 1.0em;
		// 	font-weight: normal;
		// 	@media screen and (min-width: 667px){
		// 		font-size: 1.1em;
		// 		line-height: 2.4em;
		// 		height: 2.4em;
		// 	}
		// }
		a.play{
			background: url('img/detail/detail_play@2x.png?v=1') 40px 7px no-repeat;
			background-size: 20px 20px;
			padding-left: 35px;
			&:active{
				background-color: rgba(255, 255, 255, 0.2);
			}
		}
		a.download{
			background: url('img/detail/detail_download@2x.png?v=1') 40px 6px no-repeat;
			background-size: 20px 20px;
			padding-left: 35px;
			&:active{
				background-color: rgba(255, 255, 255, 0.2);
			}
		}
		a.complex-episode{
			background: url('img/detail/detail_download@2x.png?v=1') 25px 6px no-repeat;
			background-size: 20px 20px;
			padding-left: 33px;
			&:active{
				background-color: rgba(255, 255, 255, 0.2);
			}
		}
		a.downloading{
			background: url('img/wait.svg') 17px 6px no-repeat;
			background-size: 18px;
		}

		a.downloaded{
			background: url('img/download_done.svg') 17px 6px no-repeat;
			background-size: 18px;
		}	
		@media screen and (min-width: 375px){
			a.play{
				background: url('img/detail/detail_play@2x.png?v=1') 55px 7px no-repeat;
				background-size: 20px 20px;
				padding-left: 35px;
			}
			a.download{
				background: url('img/detail/detail_download@2x.png?v=1') 55px 6px no-repeat;
				background-size: 20px 20px;
				padding-left: 35px;
			}
			a.complex-episode{
				background: url('img/detail/detail_download@2x.png?v=1') 40px 6px no-repeat;
				background-size: 20px 20px;
				padding-left: 35px;
			}
			a.downloading{
				background: url('img/wait.svg') 25px 6px no-repeat;
				background-size: 18px;
			}

			a.downloaded{
				background: url('img/download_done.svg') 25px 6px no-repeat;
				background-size: 18px;
			}
		}
		@media screen and (min-width: 414px){
			a.play{
				background: url('img/detail/detail_play@2x.png?v=1') 60px 6px no-repeat;
				background-size: 20px 20px;
				padding-left: 45px;
			}
			a.download{
				background: url('img/detail/detail_download@2x.png?v=1') 60px 6px no-repeat;
				background-size: 20px 20px;
				padding-left: 45px;
			}
			a.complex-episode{
				background: url('img/detail/detail_download@2x.png?v=1') 45px 6px no-repeat;
				background-size: 20px 20px;
				padding-left: 45px;
			}
			a.downloading{
					background: url('img/wait.svg') 30px 6px no-repeat;
					background-size: 18px;
				}

				a.downloaded{
					background: url('img/download_done.svg') 30px 6px no-repeat;
					background-size: 18px;
				}
		}
		@media screen and (min-width: 667px){
			a.play{
				background: url('img/detail/detail_play@2x.png?v=1') 125px 4px no-repeat;
				background-size: 35px 35px;
				padding-left: 70px;
			}
			a.download{
				background: url('img/detail/detail_download@2x.png?v=1') 125px 4px no-repeat;
				background-size: 35px 35px;
				padding-left: 70px;
			}
			a.complex-episode{
				background: url('img/detail/detail_download@2x.png?v=1') 110px 4px no-repeat;
				background-size: 35px 35px;
				padding-left: 90px;
			}
			a.downloading{
					background: url('img/wait.svg') 65px 6px no-repeat;
					background-size: 31px;
				}

				a.downloaded{
					background: url('img/download_done.svg') 65px 6px no-repeat;
					background-size: 31px;
				}
		}
	}
}   
.siteListWrapper{
	// padding-left: 0;
	// padding-top: 10px;
	// padding-bottom: 15px;
	// padding-right: 0;
	// position: absolute;
	.siteList{
		a{
			background-image: url("img/source/other_off@2x.png?v=7");
			background-position: left center;
			// padding-left: 0;
			// padding-right: 8px;
		}
	}
}

.pageView .detail-cards{
	// .buttons{
	// 	visibility: hidden;
	// 	width: 70%;
	// 	margin: 20px auto 10px;
	// 	border: 1px solid rgba(255, 255, 255, 0.6);
	// 	border-radius: 5px;
	// 	line-height: 30px;
	// 	@media screen and (min-width: 768px){
	// 		line-height: 40px;
	// 	}
	// 	.button{
	// 		color: rgba(255, 255, 255, 1);
	// 	}
	// 	.button.current{
	// 		background: rgba(255, 255, 255, 0.6);
	// 		color: #111111;
	// 	}
	// 	.separator{
	// 		background: rgba(255, 255, 255, 0.6);
	// 		display: table-cell;
	// 		line-height: 30px;
	// 		width: 1px;
	// 	}
	// }
	.cards{
		border: none;
		box-shadow: none;
		.card{
			padding: 3%;
		}
		.card#card-select{
			@media screen and (min-width: 320px){
				padding: 0 0 3%;
			}
			@media screen and (min-width: 375px){
				padding: 0 0 3%;
			}
			@media screen and (min-width: 414px){
				padding: 0 0 3%;
			}
			@media screen and (min-width: 768px){
				padding: 0 0 3%;
			}
			
		}
		.card#card-summary{
			line-height: 1.5em;
			padding: 0 3% 3%;
			.video-celebrity{
				.grayLineBottom();
				// box-shadow: inset 0 -1px 1px -1px @linkActiveBgColor;
				padding-bottom: 10px;
				padding-top: 5%;
				margin-bottom: 15px;
				@media screen and (min-width: 768px){
					padding-top: 3%;
				}
			}
			div{
				color: @infoTextColor;
				.video-celebrity-info{
					margin: 0 0 5px 0;
					// color: rgba(255, 255, 255, 0.5);
					.video-celebrity-title{
						// width: 15%;
						// color: rgba(255, 255, 255, 0.8);
						// float: left;
					}
					.video-celebrity-words{
						// float: left;
						// width: 85%;
					}
				}
				.long-info{
					.video-celebrity-title{
						// width: 25%;
					}
					.video-celebrity-words{
						// width: 75%;
					}
				}
			}
			
		}
		#card-related{
			@media screen and (min-width: 320px){
				padding: 5% 1%;
			}
			@media screen and (min-width: 375px){
				padding: 5% 2%;
			}
			@media screen and (min-width: 414px){
				padding: 5% 0;
			}
			@media screen and (min-width: 768px){
				padding: 3% 1%;
			}
			
		}
		
	}
}
.tvList{
	padding: 5% 1% 0;
	@media screen and (min-width: 768px){
		padding-top: 3%;
	}
	a{
		margin: 0 2% 3%;
		width: 21%;
	}
}
.rangeSelectWrapper .rangeSelect{
	// padding-top: 2%;
	-webkit-transform: translateZ(0px);
}
.yearSelectWrapper .yearSelect{
	padding: 5px 0px;
	-webkit-transform: translateZ(0px);

	@media screen and (min-width: 768px){
		a{
			padding: 10px 24px;
		}
	}
	
} 
.list_item .touch-link .icon{
	padding-left: 10px;

	@media screen and (min-width: 375px){
		padding-left: 12px;
	}
	
	@media screen and (min-width: 768px){
		padding-left: 24px;
	}
}

//综艺LIST
.zongyi_list_item {
    .grayLineBottom();

    .touch-link {
        display: block;
        padding: 12px 0;

        & > * {
            display: table-cell;
            padding-left: 10px;
            vertical-align: middle;
            border-box: border-box;

            &:last-child {
                padding-right: 10px;
            }
        }
    }
    

    .detail {
        padding-right: 15px;
        width: 8px;
        background-origin: content-box;
        .retina('img/toDetail.png', 8px, auto, left, center);
    }

    .info {

        & > * {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: pre;
        }

        .name {
            margin: 0.2em 0;
            color: @titleColor;
        }

        // .summary {
        //     color: @infoColor;
        //     font-size: 0.85em;
        // }
    }
}



// iPad
@media screen and (min-width: 768px) {

    .zongyi_list_item {
        .touch-link {
            padding: 15px 0;

            & > * {
                display: table-cell;
                padding-left: 20px;
                vertical-align: middle;
                border-box: border-box;

                &:last-child {
                    padding-right: 20px;
                }
            }
        }
        
        .detail {
            padding-right: 30px;
            width: 16px;
            .retina('img/toDetail.png', 16px, auto, left, center);
        }

        .info {
            font-size: 1.1em;
        }
    }
}



// iPhone6
@media screen and (min-width: 375px) {

    .zongyi_list_item {

        .touch-link {

            & > * {
                padding-left: 15px;

                &:last-child {
                    padding-right: 15px;
                }
            }
        }
    }
}

.error-notice{
	color: #000;
	text-align: center;
	font-size: 1.2em;

	p{
		margin-top: 40px;
	}

	.unfollow{
		color: #000;
		display: inline-block;
		padding: 7px 15px;
		border: 1px solid #000;
		border-radius: 3px;
	}
}

.no-play{
	color: #fff;
	text-align: center;
}

.i-want{
	display: block;
	margin: 1em auto;
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: rgb(255, 255, 255);
	width: 35%;
	height: 2.2em;
	line-height: 2.2em;
	text-align: center;
	border-radius: 4px;
}


.sweet-alert{

	@media screen and (min-width: 375px){
		left: 30px;
		right: 30px;
	}
	

	@media screen and (min-width: 768px){

		left: 50%;
		right: auto;
		
	}
}

.sweet-alert h2, .sweet-alert fieldset{
	display: none;
}

.sweet-alert p{
	text-align: left;
	padding: 0;
	margin: 0;
	color: #555;
}

.report-con p{
	padding: 10px;

	@media screen and (min-width: 768px){

		padding: 20px;
		
	}
}

.sweet-alert .video-report{
	width: auto;
	height: auto;
	margin: 0;
	display: inline;
}


.episode{
	position: relative;

	.icon-tv{
		position: absolute;
		right: 3px;
		top: 3px;
		background-repeat: no-repeat;
		background-size: 10px;
		height: 10px;
		width: 10px;
	}

	.downloading{
		background-image: url('img/wait_list.svg');
	}

	.downloaded{
		background-image: url('img/done_list.svg');
	}

	@media screen and (min-width: 768px){

		.icon-tv{
			right: 5px;
			top: 5px;
		}
		
	}
	.summary{
		position: relative;
		.icon-show{
			position: absolute;
			right: 0;
			bottom: 0;
			background-repeat: no-repeat;
			background-size: 10px;
			background-position: center left;
			height: 16px;
			width: auto;
			font-size: 0.9em;
			padding-left: 12px; 
			line-height: 16px;

		}

		@media screen and (min-width: 375px){
			
		}

		@media screen and (min-width: 414px){

			
		}

		@media screen and (min-width: 768px){
			.icon-show{
				height: 16px;
				font-size: 0.9em;
				padding-left: 12px; 
				line-height: 16px;
			}
			
		}
	}
	
}