@import "./variables.less";
@import "./mixins.less";

html,
body{
    width: 100%;
    height: 100%;
}

body{
    -webkit-user-select: none;
    user-select: none;
    color: @BODY-TEXT-COLOR;
    font-size: @BODY-TEXT-FONTSIZE;
    //font-family: @BODY-TEXT-FONTFAMILY;
    // .white_gradient_border();
    background-color: @BODY-BG-COLOR;
    // -webkit-background-size: 100% 1px;
    // background-size: 100% 1px;
    // background-repeat: no-repeat;
    // background-position: bottom center;
}

ul{
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}

p{
    margin-bottom: 0;
}



//背景图片style
.bgImgSize(@width,@height,@bgImg,@bgPosition,@bgSize,@bool:false){
    width: @width;
    height: @height;
    &when not(@bool){
        background: url("@{IMAGE_PATH}/@{bgImg}") no-repeat @bgPosition;
    }
    &when(@bool){
        background: data-uri("@{IMAGE_PATH}/@{bgImg}") no-repeat @bgPosition;
    }  
    .background-size(@bgSize);
}

.bgImg(@bgImg,@bool:false){
    &when not(@bool){
        background-image: url("@{IMAGE_PATH}/@{bgImg}");    
    }
    &when(@bool){
        background-image: data-uri("@{IMAGE_PATH}/@{bgImg}");  
    }  
}

//tap row style
.tap_row(@tap-row-active-bg){
    &:active{
        background-color: @tap-row-active-bg;
    }
}

//tap icon/text style
.tap_font(@tap-font-active-color){
    &:active{
        color: @tap-font-active-color;
    }
}

//单行省略
.text_oneRow_ellipsis(){
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

//多行省略
.text_moreRow_ellipsis(@rowNumber){
    overflow: hidden;
    text-overflow: ellipsis;
    .old-display-box(); 
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @rowNumber;
}

//组件iconfont
.defaultIconfont(@fontSize,@lineHeight:1){
    font-family: defaultIconfont;
    font-size: @fontSize;
    -webkit-font-smoothing: antialiased;
    line-height: @lineHeight;
}

//项目iconfont
.iconfont(@fontSize,@lineHeight:1){
    font-family: iconfont;
    font-size: @fontSize;
    -webkit-font-smoothing: antialiased;
    line-height: @lineHeight;
}

//top/bottom border
.defaultBorder(@positionPro:bottom,@startVal:0,@endVal:0,@borderBg:@DEFAULT-BORDER-COLOR){
    content: '';
    position: absolute;
    @{positionPro}: 0;
    left: @startVal;
    right: @endVal;
    height: 1px;/*no*/
    //.transform(scaleY(0.5));
    background: @borderBg;
}

//使用transform的垂直居中
.transformV_center(@positionPro,@positionVal){
    position: absolute;
    top: 50%;
    @{positionPro}: @positionVal;
    .transform(translateY(-50%));
}

//使用transform的水平垂直居中
.transform_center(){
    position: absolute;
    top: 50%;
    left: 50%;
    .transform(translate(-50%,-50%));
}

//使用margin的水平垂直居中
.margin_center(@width,@height){
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: @width;
    height: @height;
    margin: auto;
}

//遮罩蒙版
.mask(@zIndex:1051,@bgColor:@BACKDROP-BG-COLOR){
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: @zIndex;
    background-color: @bgColor;
}



//自定义按钮组件
.button(@width:275px){
    // .custom-button{
        width: @width;
        border-radius: 5px;
        background-color: @CUSTOM-BUTTON-COMPONENT-BG;
        border: 1px solid;/*no*/
        color: @CUSTOM-BUTTON-COMPONENT-COLOR;
        font-size: @CUSTOM-BUTTON-COMPONENT-FONTSIZE;
        //按钮 active
        .tap_row(@CUSTOM-BUTTON-COMPONENT-ACTIVE-BG);
        //按钮 不可控
        &.disabled{
            background-color: @CUSTOM-BUTTON-COMPONENT-DISABLED-BG;
            color: @CUSTOM-BUTTON-COMPONENT-DISABLED-COLOR;
        }       
    // }
}

.buttonPosition(){
    position: absolute;
    bottom: 65px; 
    left: 0;
    right: 0;  
}

.mediaPosition(@guideBtnBool: false,@guideStepBool:false,@switchBool:false,@loginBtnBool:false){
    @media (min-width: 360px/*no*/) and(max-height: 570px/*no*/){
        .custom-button{
            bottom: 45px;
        }

        //指引蒙层
        &when(@guideBtnBool){
            .guide-dialog{
                & .guideStep2, 
                & .guideStep4, 
                & .guideStep6{
                    bottom: 45px;
                }
            }
        }

        &when(@guideStepBool){
            .guide-dialog{
                .guideStep5{
                    bottom: 96px;
//                  .guideStep5Cont p{
//                      padding: 12px 0;
//                  }
                }
            }
        }

        &when(@switchBool){
            .custom-select{
                bottom: 178px;
            }
            
            .position{
                bottom: 102px;
            }
            .custom-setHijack-switch{
                margin-top: 14px;
            }
        }

        &when(@loginBtnBool){
            .custom-guide-button{
                bottom: 45px;
            }
        }

    }    
}

//自定义输入框组件
.textInput(@marginTop: 17px,@paddingTopOrBottom: 8px,@fontSize: inherit){
    margin-top: @marginTop;
    input{
        padding-top: @paddingTopOrBottom;
        padding-bottom: @paddingTopOrBottom;
        padding-right: 25px;
        font-size: @fontSize;
        &::-webkit-input-placeholder{
            color: @CUSTOM-TEXT-COMPONENT-INPUT-PLACEHOLDER-COLOR;
        }
    }
    .u-text-icon{
        font-size: @CUSTOM-TEXT-COMPONENT-ICON-FONTSIZE;
        width: 48px;
        padding-left: 9px;
        vertical-align: text-bottom;
    }
    .u-text-clear,
    .u-text-see{
        &:before{
            font-family: iconfont;
            color: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-COLOR;   
            font-size: @CUSTOM-TEXT-COMPONENT-DEFAULTICON-FONTSIZE;              
        }
    }
    //x icon
    .u-text-clear{
        right: -7px;
        &:before{
            content: '\e724';
        }            
    }
    &:after{
        .white_gradient_border();
    }
}

.passwordInput(){
    .custom-password-text{
        input{
            padding-right: 58px;
            &[type = text] ~ .u-text-see:before{
                content: '\e60e';
            }
        }
        //x icon
        .u-text-clear{
            right: 25px;
        }        
        //眼睛 icon
        .u-text-see{
            right: -7px;
            &:before{
                content: '\e6b2';
            }
        }        
    }
}

.custom-loading(){
    .custom-loading{
        background-color: @CUSTOM-BACKDROP-BG;
        .u-loading-box{
            color: #00ffff;
            .u-loading-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); 
                }
            }
            .u-loading-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);
        }
    });     
}

.custom-comm-loading(){
    .custom-comm-loading{
        background-color: @CUSTOM-BACKDROP-BG;
        .u-comm-loading-button{
            bottom: 134px;
            width: 100px;
            color: #00ffff;
            font-size: 12px;
            background-color: transparent;
            padding: 18px 0 5px;
            &:after{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 1px;/*no*/
                .blue_gradient_border();
            }
            .tap_row(transparent);
            &.disabled{
                background-color: transparent;
            }
        }
    }
}

.custom-process(){
    .custom-process{
        background-color: @CUSTOM-BACKDROP-BG;
        .u-process-button{
            bottom: 134px;
            width: 100px;
            color: #00ffff;
            font-size: 12px;
            background-color: transparent;
            padding: 18px 0 5px;
            &:after{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 1px;/*no*/
                .blue_gradient_border();
            }
            .tap_row(transparent);
            &.disabled{
                background-color: transparent;
            }
        }
    }
}


//自定义弹出框组件
.custom-dialog(){
    .custom-dialog{
        background-color: @CUSTOM-BACKDROP-BG;
        .u-dialog-box{
            width: 335px;
            border-radius: 5px;
            background-color: @CUSTOM-DIALOG-COMPONENT-BOX-BG;
            border: 1px solid;/*no*/
            color: @CUSTOM-DIALOG-COMPONENT-COLOR;
            padding-bottom: 15px;
            .u-dialog-content{
                width: 100%;
                height: 158px;
                .display-box();
                .box-arrangement();
                .box-horizontal-alignment();
                .box-vertical-alignment();
                font-size: @CUSTOM-DIALOG-COMPONENT-CONTENT-FONTSIZE;
                line-height: 24px;
                padding: 0 22px;
                span{
                    .bgImgSize(51px,51px,"green_unbind_icon.png",center,cover);
                    margin-bottom: 12px;
                    display: block;
                }
                &:after{
                    display: none;
                }
            }
            .u-dialog-button{
                border-spacing: 25px 0;
                .u-dialog-cancel,
                .u-dialog-confirm{
                    .button(130px);
                    padding: 10px 0;
                }
                //取消 button
                .u-dialog-cancel:after{
                    display: none;
                }
            }
        }
    }
}

//错误提示
.errorTip(@height:40px){
    color: @ERRORTIP-TEXT-COLOR;
    font-size: @ERRORTIP-TEXT-FONTSIZE;
    .transform(scale(0.7));
    text-align: center;
    height: @height;
    line-height: @height;
}

//上拉加载
.listLoad(){
    color: @LIST-LOAD-COLOR;
    font-size: @LIST-LOAD-FONTSIZE;
    .transform(scale(0.7));
    height: 35px;
    line-height: 35px;
}

//list 无内容
.listNoCont(@bgImg:"noCont.png",@bgSize:61px 61px,@fontSize:@LIST-NOCONTTIP-FONTSIZE,@paddingTop:88px){
    .bgImg(@bgImg);
    background-position: top center;
    background-repeat: no-repeat;
    .background-size(@bgSize);
    color: @LIST-NOCONTTIP-COLOR;
    font-size: @fontSize;    
    padding-top: @paddingTop;
}

.white_gradient_border(){
    .linear-gradient(left,@WHITE-GRADIENTBORDER-STARTCOLOR,@WHITE-GRADIENTBORDER-CENTERCOLOR,@WHITE-GRADIENTBORDER-ENDCOLOR);
    background: linear-gradient(to right,@WHITE-GRADIENTBORDER-STARTCOLOR,@WHITE-GRADIENTBORDER-CENTERCOLOR,@WHITE-GRADIENTBORDER-ENDCOLOR);
}

.blue_gradient_border(){
    .linear-gradient(left,@BLUE-GRADIENTBORDER-STARTCOLOR,@BLUE-GRADIENTBORDER-CENTERCOLOR,@BLUE-GRADIENTBORDER-ENDCOLOR);
    background: linear-gradient(to right,@BLUE-GRADIENTBORDER-STARTCOLOR,@BLUE-GRADIENTBORDER-CENTERCOLOR,@BLUE-GRADIENTBORDER-ENDCOLOR);
}

.noBottomGradient(){
    .noBottomGradient{
        background-image: none;
    }   
}

.inputBox(@paddingTop,@paddingBottom,@height,@bgImg,@bgYPosition,@bgSize){
    .inputBox{
        position: relative;
        margin: 0 42px;
        padding: @paddingTop 0 @paddingBottom;
        .bgImgSize(auto,@height,@bgImg,center @bgYPosition,@bgSize);        
    }
}

.help(){
    margin: 30px 38px 58px;
    li{
        color: @HELP-TEXT-COLOR;
        padding-left: 12px;
        text-indent: -12px;
        line-height: 16px;
        min-height: 60px;
        &:first-child{
            color: inherit;
            font-size: @HELP-TITLE-FONTSIZE;
            min-height: auto;
            margin-bottom: 34px;
        }
    }
}

.linkText(){
    .linkText{
        text-align: center;
        span{
            position: relative;
            color: @LINKTEXT-TEXT-COLOR;
            font-size: @LINKTEXT-TEXT-FONTSIZE;
            display: inline-block;
            min-width: 100px;
            padding: 16px 26px 2px;
            margin-top: 20px;
            &:after{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 1px;/*no*/
                .blue_gradient_border();
            }
        }
    }
}

.unbindState-dialog(){
    .unbindState-dialog{
        .mask(1051,@CUSTOM-BACKDROP-BG);
        div{
            .transform_center();
            width: 335px;
            height: 213px;
            .display-box();
            .box-arrangement();
            .box-horizontal-alignment();
            .box-vertical-alignment();
            color: #00ffff;
            font-size: 16px;
            border: 1px solid;/*no*/
            border-radius: 5px;
            img{
                display: block;
                width: 65px;
                height: 65px;
                margin-bottom: 14px;
            }
        }
    }
}