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

//引导页
// .noBottomGradient();

#app{
	width: 100%;
	height: 100%;
}

.guideBg{
	.bgImgSize(100%,100%,"guideBg.png",center,100% 100%);
	p{
	    position: absolute;
	    bottom: 42px;
	    left: 0;
	    width: 100%;
	    text-align: center;
	    font-size: @GUIDE-FOOTER-FONTSIZE;		
	}
}

//登录、注册、忘记密码
.inputBox(184px,40px,380px,"logo.png",75px,64px 64px);

.u-text();

.custom-text,
.custom-password-text,
.custom-code-text{
	.textInput();
}

.u-button();

//验证码
.code{
	margin-top: 17px;
	position: relative;
	&:after{
	    content: '';
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    height: 1px;/*no*/
		.white_gradient_border();
	}
}

.custom-code-text{
	width: 170px;
	margin-top: 0;
	&:after{
		display: none;
	}
}

//验证码 button
.custom-code-button{
	position: absolute;
    top: 5px;
    right: 0;
	.button(93px);
	padding: 4px 0;
	.transform(scale(0.7));
}

//密码
.passwordInput();

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

.custom-button{
	.button();
}

.custom-guide-button{
	.buttonPosition();
	.button();
}

.mediaPosition(false,fasle,false,true);

.link{
    width: 275px;
    margin: 5px auto;
	overflow: hidden;
	span{
		color: @LINK-TEXT-COLOR;
	    font-size: @LINK-TEXT-FONTSIZE;
	    .transform(scale(0.7));
	    padding: 15px;
		&:nth-child(1){
			float: left;
			margin-left: -25px;
		}
		&:nth-child(2){
			float: right;
			margin-right: -25px;
		}
	}
}

//loading页面
.u-process();

.custom-process{
    .u-process-content{
        .u-process-text{
            font-size: 16px;
        }
    }
}

//checkwgtu
.checkwgtu{
    .mask(1050);
    .checkwgtu-box{
        .transformV_center(left,0);
        right: 0;
        .checkwgtu-icon{
            width: 30px;/*no*/
            height: 30px;/*no*/
            background-position: center;
            background-repeat: no-repeat;
            .bgImg("white_loading_icon.png");
            .background-size(cover);
            margin: 0 auto;
            .animation(loading 1s steps(12, end) infinite);
        }
        .checkwgtu-text{ 
            color: @LOADING-COMPONENT-TEXT-COLOR;
            margin-top: 12px;
            text-align: center;
        }
    }
}


.custom-checkwgtu{
    background-color: @CUSTOM-BACKDROP-BG;
    .checkwgtu-box{
        color: #00ffff;
        .checkwgtu-icon{
            font-size: 16px;
            margin: 0 auto;
            width: 3.750em;
            height: 3.750em;
            position: relative;
            background: none;
            .animation(none);
            &:before{
                content: '';
                .margin_center(0.500em,0.500em);              
                border-radius: 50%;
                .transform(translateZ(0) scale(0.55)); 
                .animation(loading 1.3s infinite linear); 
            }
        }
        .checkwgtu-text{ 
            color: inherit;
            font-size: 16px;
            margin-top: 20px;
        }
    }
}

.keyframes(loading,{
    0%,
    100% {
        .box-shadow(0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0);
    }
    12.5% {
        .box-shadow(0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em);
    }
    25% {
        .box-shadow(0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em);
    }
    37.5% {
        .box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em);
    }
    50% {
        .box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em);
    }
    62.5% {
        .box-shadow(0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em);
    }
    75% {
        .box-shadow(0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0);
    }
    87.5% {
        .box-shadow(0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em);
    }
});   