@import "common.css";

html,body {
    padding:0;margin:0;
    font-family: "PingFang SC","Helvetica Neue","Helvetica","Hiragino Sans GB","Microsoft YaHei","Arial","sans-serif";
    color:var(--text);
    font-size:12px;
}

.content-wrapper.sign {
    padding:0;margin:0;box-sizing:border-box;
    background:var(--wrapper-background) url('/static/image/svg/light-bg01.png') no-repeat center left;
    background-size:auto 72%;
    .container {position:relative;height:100vh;box-sizing:border-box;width:54rem;}
}

.sign-wrapper {
    position:relative;width:50rem;margin-left:2rem;padding:2.6rem 0 4rem 0;
    background:var(--background);box-sizing:border-box;overflow:hidden;
    box-shadow:0.15rem 0.1rem 0.6rem 0.2rem rgba(var(--secondary-rgb),0.35);
    .no-l-border {border-left:none !important;}
    .no-r-border {border-right:none !important;}
    .msg-box {position:absolute;display:none;left:0;top:0;width:100%;height:3rem;line-height:3rem;text-align:center;font-size:1.1rem;}
    .msg-box.info {background:rgba(var(--primary-rgb), 0.25);color:var(--primary);}
    .msg-box.success {background:rgba(var(--success-rgb), 0.25);color:var(--success);}
    .msg-box.error {background:rgba(var(--error-rgb), 0.25);color:var(--error);}
}
.sign-wrapper.sign-in {height:28.6rem;top:max(8.2rem,calc(50vh - 14.3rem - 4rem));}
.sign-wrapper.sign-up {height:36.2rem;top:max(8.2rem,calc(50vh - 18.1rem - 4rem));}
.sign-wrapper.sign-pw {height:33.8rem;top:max(8.2rem,calc(50vh - 16.9rem - 4rem));}

.form-wrapper {
    width:100%;padding:0;margin:0;box-sizing:border-box;
    .line {overflow:hidden;display:flex;justify-content:center;align-items:center;padding:0.72rem 0;}
    .label {
        height:3.8rem;line-height:3.8rem;background:var(--wrapper-background);
        border:0.1rem solid rgba(var(--secondary-rgb), 0.25);
        width:7rem;text-align:center;font-size:1.1rem;
    }
    .input {
        height:3.8rem;line-height:3.8rem;outline:none;padding:0 1rem;
        border:0.1rem solid rgba(var(--secondary-rgb), 0.25);
        color:var(--text);font-size:1.1rem;
    }
    .action {width:9rem;height:3.8rem;border:0.1rem solid rgba(var(--secondary-rgb), 0.25);}

    .input.mobile {width:30rem;}
    .input.pwd {width:30rem;}
    .input.vcode {width:21rem;}

    .line.header {
        position:relative;justify-content:space-between;margin:0 5.4rem 0.5rem 5.4rem;
        .title {font-size:1.54rem;font-weight:bold;border-bottom:0.32rem solid var(--primary);color:var(--primary);}
        .opt-wrapper {
            .item {font-size:1.1rem;padding-left:1.4rem;}
            .item:hover {color:var(--primary);font-weight:bold;}
            .iconfont {position:relative;top:0.1rem;}
        }
    }

    .line.passwd {
        position:relative;
        .eye {position:absolute;display:block;top:1.8rem;right:calc(5.4rem + 1rem);width:1.8rem;height:1.8rem;}
        .eye .iconfont {font-weight:bold;font-size:1.6rem;}
    }

    .line img.vcode {height:3rem;width:8rem;position:relative;margin-top:0.4rem;margin-left:0.5rem;cursor:pointer;}
    .line .btn-send {display:inline-block;font-size:1.1rem;}
    .line .btn-send:hover {color:var(--primary);font-weight:bold;}
    .line .btn-send.disabled {color:var(--secondary);}
    .line .btn-send.disabled:hover {color:var(--secondary);font-weight:normal;}

    .line.privacy {
        justify-content:flex-start;margin:0 5.3rem;font-size:1.02rem;padding:1.2rem 0 0 0;
        .checkbox {display:inline-block;width:1.2rem;height:1.2rem;line-height:1.2rem;margin-right:0.4rem;}
        a {color:var(--primary);}
        a:hover {font-weight:bold;}
    }

    .line.submit {
        .submit {
            width:39rem;outline:none;height:3.2rem;line-height:3.2rem;
            border:0.1rem solid var(--primary);
            background:var(--primary);color:var(--background);border:none;
            cursor:pointer;margin-top:1rem;font-size:1.2rem;font-weight:bold;
        }
        .submit.disabled {background-color:var(--light-grey);color:var(--text);}
    }

    .line.submit.sign-up {padding-top:0;}
}

.footer {
    position:fixed;width:100vw;left:0;bottom:0;height:3rem;
    .info {text-align:center;font-size:1.1rem;}
}

/* verify code */
.vcode-mask-layer {display:none;}
.vcode-wrapper {
    display:none;position:fixed;z-index:1000;left:calc(50vw - 12rem);top:calc(50vh - 6.5rem - 2rem);background:var(--background);width:24rem;height:13rem;
    padding:2.4rem 1.5rem 1.6rem 1.5rem;border-radius:0.3rem;overflow:hidden;
    .close {position:absolute;top:0.35rem;right:0.35rem;font-size:1.2rem;font-weight:bold;}
    .close:hover {color:var(--primary);}
    .reload {position:absolute;top:0.5rem;right:2.6rem;font-weight:bold;font-size:1.2rem;}
    .reload:hover {color:var(--primary);}
    .img-wrapper {
        img {width:100%;height:8rem;box-sizing:border-box;border:0.1rem solid rgba(var(--secondary-rgb), 0.25);border-radius:0.3rem;}
    }
    .input-wrapper {
        margin-top:0.8rem;overflow:hidden;border:0.1rem solid rgba(var(--secondary-rgb), 0.25);
        .input {
            float:left;width:18.4rem;box-sizing:border-box;height:3.6rem;line-height:3.6rem;padding:0 1rem;
            outline:none;font-weight:bold;border:none;font-size:1.2rem;letter-spacing:0.5rem;
        }
        .input.error {background:rgba(var(--error-rgb), 0.25);}
        .submit {
            float:right;height:3.4rem;line-height:3.4rem;margin-top:0.1rem;width:5.3rem;padding:0;border:none;outline:none;
            cursor:pointer;font-size:1.2rem;
        }
    }
}