@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-comm-loading();

.custom-comm-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;
		    }
	    }
	}
}

.topCpnt{
	height: 256px;
	position: relative;
	padding-top: 34px;
	&:before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;/*no*/
		.white_gradient_border();
	}
}

.doorbellBg{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin: 0 auto;
	.linear-gradient(#00ffff,#fff,#fff,#fff,#00ffff);
	background: linear-gradient(#00ffff,#fff,#fff,#fff,#00ffff);
	padding: 3px; 
	position: relative;
	.doorbellCircle{
		width: 100%;
	    height: 100%;
	    background-color: #22313F;
	    border-radius: 50%;
	    .doorbell{
			.margin_center(106px,106px);
			border: 2px solid #00ffff;/*no*/
			border-radius: 50%;
			.bgImg("gray_door_icon.png");
			background-position: center;
			background-repeat: no-repeat;
			background-color: #242635;
			.background-size(80px 80px);
			&:before,
			&:after{
			    content: '';
			    position: absolute;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;
			    border-radius: 50%;
			}
			div{
				position: absolute;
			    top: 30px;
				left: 0;
				right: 0;
				margin: 0 auto;
//				.bgImgSize(40px,40px,"green_default_icon.png",center,cover);
                width: 40px;
                height: 40px;
                background-size: 40px 40px;
				.transform-origin(center 5px);
			}
	    }
	    .active{
            div{
                .animation(shake 1s linear infinite);
            }
        }
	}
	.doorbellTip{
		position: absolute;
		bottom: 17px;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 12px;
		span{
			margin-right: 10px;
		}
	}
}

.wifiRemote{
    display: none;
}

.default_img{
    .bgImg("green_default_icon.png"); 
}

.doorbell_img{
    .bgImg("green_doorbell_icon.png"); 
}

.remoteOpendoor_img{
    .bgImg("green_remoteOpendoor_icon.png");
    .wifiRemote{
        display: block;
        .margin_center(30px,30px);
        left: 6px;
        li{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            border: 2px solid #00FFFF;/*no*/
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-radius: 60px;
            .animation(stretchdelay 1.5s infinite);
            &:nth-child(1){
                width: 100%;
                height: 100%;
                .animation-delay(-0.9s);
            }
            &:nth-child(2){
                width: 20px;
                height: 20px;
                .animation-delay(-1.2s);
            }
            &:nth-child(3){
                width: 10px;
                height: 10px;
            }
        }
    }
}

.hijack_img{
    .bgImg("red_hijack_icon.png");
}

.securityAlarm_img{
    .bgImg("red_securityAlarm_icon.png");
//  &:before{
//      content: '';
//      display: block;
//      position: absolute;
//      top: 0;
//      left: 0;
//      .bgImgSize(100%,100%,"red_securityAlarmLight_icon.png",center,cover);
//      .animation(alarmLight 2.5s linear infinite);
//  }
}

.redDoorbellBg{
    .linear-gradient(#ff4799,#fff,#fff,#fff,#ff4799);
    background: linear-gradient(#ff4799,#fff,#fff,#fff,#ff4799);
    .doorbellCircle{
        background-color: #2f283a;
        .doorbell{
            border: 2px solid #ff4799;/*no*/
        }
    }
}

.active .doorbellCircle .doorbell{
	&:before,
	&:after{
		.animation(aperture 2s linear infinite);
	}
	&:after{
		.animation-delay(-1s);
	}
}

.warmingActive .doorbellCircle .doorbell{
    &:before,
    &:after{
        .animation(redAperture 2s linear infinite);
    }
    &:after{
        .animation-delay(-1s);
    }
}

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

.keyframes(shake,{
	0%,50%,100%{
		.transform(rotate(0deg));
	}
	25%{
		.transform(rotate(-30deg));
	}
	75%{
		.transform(rotate(30deg));
	}
});

.keyframes(remoteOpendoor,{
    0%{
        background-position: 0 0;
    }
    33.33%{
        background-position: -37.5px 0;
    }
    66.66%{
        background-position: -75px 0;
    }
    100% {
        background-position: 0 0;
    }
});

.keyframes(stretchdelay,{
    0%,
    100% {
        border-right-color: transparent;
    }
    40% {
        border-right-color: #00FFFF;
    }
});

.keyframes(alarmLight,{
    0%,
    100%{
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
});

.batteryState{
	text-align: right;
	padding-right: 25px;
	span{
		&:nth-child(1){
			.iconfont(24px);
			color: #00ffff;
			vertical-align: middle;
		}
		&:nth-child(2){
		    width: 35px;
		    display: inline-block;
		    vertical-align: middle;
		    text-align: left;
		    font-size: 13px;	
		    line-height: 1;
		    margin-left: 6px;		
		}
	}
	&.yellowWarning span:nth-child(1){
		color: #f99b22;
	}
	&.redWarning span:nth-child(1){
		color: #fc2168;
	}
}

.bindDoorlock{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto;
    background-color: @BINDDOORLOCK-BG-COLOR;
    border: 3px solid @BINDDOORLOCK-BORDER-COLOR;
    position: relative;
    p{
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    margin: auto;
	    .bgImgSize(106px,106px,"green_bindDoorlock_icon.png",center 24px,30px 30px);
	    border-radius: 50%;
	    border: 2px solid;/*no*/
	    color: @BINDDOORLOCK-TEXT-COLOR;
	    text-align: center;
	    padding-top: 57px;   	
    }	
}

.title{
	background-repeat: no-repeat;
    background-position: 16px center;
	.bgImg("white_message_icon.png");
	font-size: 13px;
	.background-size(20px 20px);
	padding-left: 42px;
	line-height: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.u-marquee();

.custom-marquee{
	height: 36px;
	text-align: center;
	position: relative;
	color: #fff;
 	.u-marquee-text{	
		line-height: 36px;
		display: block;
	}
	&:before{
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    height: 1px;/*no*/
		.white_gradient_border();
		z-index: 1;
	}
	&:after{
	    content: '';
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    height: 1px;/*no*/
		.white_gradient_border();
	}
}

.title ~ .custom-marquee{
	color: #73747B;
	&:before{		
	    left: 125px;
	}
	&.active{		
		color: #91929a;
	}	
}

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

.deviceHandle{
	position: absolute;
	top: 300px;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: 13px;
}

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

.u-switch();

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

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

//门锁用户
.doorlockUser .custom-switch .u-switch-handle:before{
	.bgImg("doorlockUser.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");
}

//门锁管理
.doorlockManage .custom-switch .u-switch-handle:before{
	.bgImg("doorlockManage.png");
}

.custom-switch{
    width: 100%;
    height: auto;
    text-align: center;
	.u-switch-handle{
		position: relative;
		top: 0;
		left: 0;
    	.transform(none);
	    width: 55px;
	    height: 55px;
	    border-width: 1px;/*no*/
    	border-radius: 50%;
	    margin-right: 7px;
	    display: inline-block;
	    vertical-align: middle;
    	&: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;
		text-align: center;
	    display: inline-block;
	    vertical-align: middle;
	}
	&.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{
    .u-switch-handle{
        position: relative;
        &:after{
            content: '';
            position: absolute;
            top: 3.55px;
            right: 3.55px;
            width: 9px;/*no*/
            height: 9px;/*no*/
            border-radius: 50%;
            background-color: #fc2168;
            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();
	}
}

.remoteOpendoorPage{
	.mask(1051,@BODY-BG-COLOR);
}

//
.custom-marquee .u-marquee-text {
  display: block;
  line-height: 0.96rem;
}

.active .u-marquee-text {
  -webkit-animation: none;
  animation: none;
}

.u-notification{
	.mask(1051,@CUSTOM-BACKDROP-BG);
	.u-notification-box{
		width: 335px;
		height: 300px;
		.transform_center();
		background-color: #242635;
		color: #00ffff;
		border: 1px solid;/*no*/
		border-radius: 5px;
		.u-notification-title{
			position: relative;
			padding-top: 10px;
			font-size: 16px;
			text-align: center;
		}
		.u-notification-close{
			position: absolute;
			top: 0;
			right: 0;
			width: 40px;
			height: 100%;
			padding-top: 10px;
			.iconfont(25px);
		}
		.u-notification-content{
			.bgImgSize(100%,147px,"noticeContBg.png",center,auto 100%);
			padding-top: 61px;
		}
		.u-notification-switch{
   			width: 150px;
			margin: 15px auto;
    		padding: 10px 0;
			text-align: center;
			font-size: 12px;
			.u-notification-switch-handle{
				display: inline-block;
				vertical-align: middle;
				position: relative;
				margin-right: 10px;
				width: 17px;
				height: 17px;
				&:before{					
					position: absolute;
					top: 0;
					left: 0;
					.iconfont(17px);
				}
			}
			&.u-notification-switch-on .u-notification-switch-handle:before{
				content: '\e6aa';
			}
			&.u-notification-switch-off .u-notification-switch-handle:before{
				content: '\e6a9';
			}
		}
		.u-notification-button{
			li{
				.button(235px);
		    	line-height: 1;
		    	margin: 0 auto;	
		    	text-align: center;
	    		padding: 10px 0;
    		}		
		}
		.clearfix{
			overflow: hidden;
			padding: 0 54px;
		}
		.leftCont{
			float: left;
		}
		.rightCont{
			float: right;
		}
		.logo{
			.bgImgSize(15px,15px,"logo1.png",center,cover);
			display: inline-block;
			vertical-align: middle;    
			margin: 0 -8px 0 8px;
		}
		.smallFont{
			color: #00b2b2;
			font-size: 16px;
			.transform(scale(0.5));
			display: inline-block;
			vertical-align: middle;    
		}
		.tip{
			text-align: center;
			font-size: 12px;
			margin-top: 9px;
			line-height: 16px;
		}
	}
}