@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: 100px;
        height: 100px;
    }
}

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

//产品型号
.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%;
    display: inline-block;
    position: absolute;
    bottom: -200px;
    font-size: 12px ;
    span{
        &:first-child{
           .iconfont(20px);
        }
    }
}

.custom-process-button{
    position: absolute;
    bottom: inherit;
    left: 0;
    right: 0;
    width: 7.333rem;
    border-radius: 0.133rem;
    background-color: transparent;
    border: 1px solid;
    color: #00ffff;
    font-size: 0.427rem;
    text-align: center;
    line-height: 1;
    margin: 0 auto;
    padding: 0.267rem 0;
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    background-clip: padding-box;
    .tap_row(@CUSTOM-BUTTON-COMPONENT-ACTIVE-BG);
}

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

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

.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-content{
        top: 200px;
        .loading{
            .loading-text{
                display: none;
            }
        }
    }
}
    
.u-process.u-process-status-2{
    .u-process-content{
        top: 200px;
        .loading{
            .loading-text{
                display: none;
            }
        }
    }
}

