@import "../public/public.less";
@import "../public/header.less";

//远程开门
.inputBox{
	width: 250px;
	margin: 145px auto 50px;
	padding-bottom: 40px;
}

.u-text();

.custom-text{
	.textInput();
}

.errorTip{
	position: absolute;
	left: 0;
	right: 0;
	.errorTip();
}

.u-button();

.custom-button{
	.button();
}

.u-commstatus-loading();

.custom-commstatus-loading();

//智能指纹锁
.u-carousel();

.custom-carousel{
	.u-carousel-indicators{
	    text-align: left;
	    padding-left: 18px;
	    bottom: 16px;
	    li{
	    	width: 8px;
		    height: 8px;
		    margin: 0 3px;
		    &.active{
		    	opacity: 1;
		    	background-color: @CUSTOM-CAROUSEL-COMPONENT-INDICATORS-ACTIVE-BG;
		    }
	    }
	}
}

.u-marquee();

.custom-marquee{
	height: 20px;
	text-align: center;
	position: relative;
 	.u-marquee-text{	
		line-height: 20px;
	}
	&:before{
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    height: 1px;/*no*/
		.white_gradient_border();
	}
	&:after{
	    content: '';
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    height: 1px;/*no*/
		.white_gradient_border();
	}
}

.marquee(5s,~"0,20px",~"0,-100%");

.deviceHandle{
	position: absolute;
	top: 294px;
	bottom: 0;
	left: 0;
	width: 100%;
}

.switchGroup{
	position: absolute;
	top: 20px;
	bottom: 0;
	left: 0;
	width: 100%;
	.col-xs-6{
		height: 50%;
		padding: 0;
		.display-box();
		.box-horizontal-alignment();
		.box-vertical-alignment();
	}
	&:before{
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: auto;
		height: 1px;/*no*/
		.blue_gradient_border();
	}
	&:after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		margin: auto;
		width: 1px;/*no*/
	    .linear-gradient(@BLUE-GRADIENTBORDER-STARTCOLOR,@BLUE-GRADIENTBORDER-CENTERCOLOR,@BLUE-GRADIENTBORDER-ENDCOLOR);
	    background: linear-gradient(@BLUE-GRADIENTBORDER-STARTCOLOR,@BLUE-GRADIENTBORDER-CENTERCOLOR,@BLUE-GRADIENTBORDER-ENDCOLOR);
	}	
}

.u-switch();

//开门记录
.opendoorRecord .custom-switch .u-switch-handle:before{
	.bgImg("opendoorRecord.png");
}

//安全报警
.securityAlarm .custom-switch .u-switch-handle:before{
	.bgImg("securityAlarm.png");
}

//远程开门
.remoteOpendoor .custom-switch{
 	.u-switch-handle:before{
		.bgImg("remoteOpendoor.png");
	}
	&.u-switch-on .u-switch-handle{
		.animation(aperture 2s linear infinite);
		&:after{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			.animation(aperture 2s linear -1s infinite);
		}
	}	
}

.keyframes(aperture,{
  	0%{
        .box-shadow(0 0 0 0 rgba(0,255,255,1));
  	}
  	100%{
        .box-shadow(0 0 0 10px rgba(0,255,255,0));
  	}
});

//劫持报警
.hijackAlarm .custom-switch .u-switch-handle:before{
	.bgImg("hijackAlarm.png");
}

.custom-switch{
    width: 100%;
    height: auto;
	.u-switch-handle{
		position: relative;
		top: 0;
		left: 0;
    	.transform(none);
	    width: 55px;
	    height: 55px;
	    border-width: 1px;/*no*/
    	border-radius: 50%;
	    margin: 0 auto;
    	&:before{
		    top: 0;
		    bottom: 0;
    		right: 0;
		    margin: auto;
    		width: 27px;
    		height: 27px;
		    border-radius: 0;
    		background-color: @OPACITY;
		    .box-shadow(none);
    		background-repeat: no-repeat;
    		.background-size(54px 27px);
    	}
	}
	.u-switch-text{
	    font-size: @CUSTOM-SWITCH-COMPONENT-TEXT-FONTSIZE;
	    margin-top: 15px;
		text-align: center;
	}
	&.u-switch-on, 
	&.u-switch-off{
		.u-switch-handle{
			border-color: inherit;
			.box-shadow(none);
			background-color: @CUSTOM-SWITCH-COMPONENT-HANDLE-BG;
			&:before{
				left: 0;
			}
		}
	}
	&.u-switch-on{
		color: @CUSTOM-SWITCH-COMPONENT-ONSTATE-COLOR;
		.u-switch-handle:before{
			background-position: 0 0;
		}
	}
	&.u-switch-off,
	&.disabled{
		opacity: 1;
		color: @CUSTOM-SWITCH-COMPONENT-OFFSTATE-COLOR;
		.u-switch-handle:before{
			background-position: -27px 0;
		}
	}
}

.newMsg .custom-switch:before{
	content: '\e681';
	position: absolute;
	top: 0;
    right: 52px;
	.iconfont(@NEWMSG-ICON-FONTSIZE);
	color: @NEWMSG-ICON-COLOR;
	z-index: 3;
}

.followServiceNumber-dialog{
	.mask(1051,rgba(0, 0, 0, 0.9));
	.followServiceNumber-dialog-box{
		ul{
			margin: 35px 0 -15px;
			li{
				font-size: 15px;
				text-align: center;
			    line-height: 18px;
			    margin-bottom: 40px;
			    &:first-child{
			    	font-size: 19px;
   					margin-bottom: 60px;
			    }
			    &:nth-child(3){
			    	color: #00ffff;
    				margin-bottom: 20px;
			    }
			    p{
			    	width: 200px;
				    height: 200px;
				    border: 1px solid #91929a;/*no*/
				    margin: 0 auto;
			    }
			    span{
			    	color: #FFF54E;
			    }
			}
		}
		.linkText();
	}
}