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

//添加设备
// .noBottomGradient();

.addDevice li{    
    margin: 44px 44px 0 44px;
    border: 1px solid;/*no*/
    border-radius: 5px;
    color: @ADDDEVICE-TEXT-COLOR;
    font-size: @ADDDEVICE-TEXT-FONTSIZE;
    height: 150px;
    line-height: 150px;
    padding-left: 50px;
    .tap_row(@ADDDEVICE-ROW-ACTIVE-BG);  
    font-size: 16px;
    img{
        margin-right: 25px;
        width: 60px;
        height: 60px;
    }
}

.addDevice p{
    width: 100%;
    font-size: 12px;
    line-height: 32px;
    color: #cfcfd1;
    text-align: center;
}

.info{
    .help();
    li{
        text-indent: 0;
    }
}

//产品型号
.u-list();

.custom-device-list{
    position: absolute;
    top: 44px;
    bottom: 0;
    left: 0;
    height: auto;   
    .u-list-scroll .u-list-row{     
        height: 75px;
        padding: 0 35px 0 41px;
        .u-list-left-image{
            width: 24px;
            height: 54px;
            margin-right: 39px;
        }
        .u-list-title{
            font-size: 16px;
            line-height: 20px;
        }
        .u-list-right-icon{
            font-family: iconfont;
        }
        &:after{
            .white_gradient_border();
        }
    } 
    .u-list-load{
        .listLoad();
    }
    .u-list-tip{
        .listNoCont("noDevice.png");
    }
}

//配置Wi-Fi
.wifiAddHelp{
    .help();
    position: relative;
    li{
        text-indent: 0;
        &:last-child{
            color: #FFF;
            padding-left: 36px;
            &:before{
                color: #00FFFF;
                content:'\e648';
                .iconfont(16px);
                line-height: 2;
                position: absolute;
                left: 12px;
            }
        }
    }
}

.u-button();

.custom-help-button,
.custom-button{
    .button();
}

//连接Wi-Fi
.inputBox(184px,22px,auto,"connectWifi.png",40px,77px 122px);

.wifi{
    width: 100%;
    display: table;
    position: relative;
    margin-top: 17px;
    span{
        .iconfont(@WIFI-ICON-FONTSIZE);
        width: 48px;
        padding-left: 9px;
        display: table-cell;
        vertical-align: text-bottom;
    }
    p{
        padding: 8px 0;
        display: table-cell;
        color: @WIFI-TEXT-COLOR;
    }
    &:after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;/*no*/
        .white_gradient_border();
    }
}

.u-text();

.custom-password-text{
    margin-top: 17px;
    input{
        padding-top: 8px;
        padding-bottom: 8px;
        padding-right: 70px;
        &[type = text] ~ .u-text-see:before{
            content: '\e60e';
        }       
        &::-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: 25px;
        &:before{
            content: '\e724';
        }            
    }          
    //眼睛 icon
    .u-text-see{
        right: -7px;
        &:before{
            content: '\e6b2';
        }
    }
    &:after{
        .white_gradient_border();
    }
}

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

//配置Wi-Fi提醒
.remind{
    width: 312px;
    margin: 0 auto;
    li{
        color: @REMIND-TEXT-COLOR;
        font-size: @REMIND-TEXT-FONTSIZE;
        .transform(scale(0.7));
        padding-left: 46px;
        margin-bottom: 10px;
        line-height: 1;
        &:first-child{
            padding-left: 0;
        }
    }    
}

.custom-button{
    .buttonPosition();
}

.mediaPosition();

//.u-comm-loading();
.u-process();

//.custom-comm-loading();

//
.scanContent {
	position: fixed;
	top: 1.173rem;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0,0,0,0);
}

.noticeContent{
    color: #c8225b;
    line-height: 1.5;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 12px ;
    span{
        &:first-child{
           .iconfont(20px);
           position: relative;
           top: 3px;/*no*/
        }
    }
}

.custom-process .u-process-button{
    text-align: center;
    bottom: 65px;
}

.custom-process-button{
    .button();
    text-align: center;
    line-height: 1;
    margin: 0 auto;
    padding: 10px 0;
    .transition(background-color 0.2s linear);
    background-clip: padding-box;
}

.custom-process-cancelButton{
    position: relative;
    color: @LINKTEXT-TEXT-COLOR;
    font-size: @LINKTEXT-TEXT-FONTSIZE;
    display: inline-block;
    min-width: 100px;
    padding: 16px 26px 2px;
    margin-top: 10px;
    &:after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;/*no*/
        .blue_gradient_border();
    }
    &.disabled{
        background-color: transparent;
    }
}

.u-process{
    .u-process-content{
        .loader{
            &:before{
                .transform(translateZ(0) scale(0.7)); 
            }
        }
    }
}

.custom-process{
   .u-process-content{
        top: 180px;
        bottom: 175px;
        .transform(none);
    } 
}

.u-process.u-process-status-0{
    .u-process-content{
        .loading{
            position: relative;
            .loading-text{
                position: absolute;
                left: 0;
                top: 0;
                font-size: 16px;
                line-height: 3.750em;
                width: 100%;
                text-align: center;
            }
        }
    }
}

.u-process.u-process-status-1,.u-process.u-process-status-2{
    .u-process-content{
        .loading{
            .loading-text{
                display: none;
            }
        }
    }
}

//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);
    }
});   