zotonic_mod_authentication

@_logon_box_width: 400px;
@_horizontal_spacing: 20px;
@_button_spacing: 10px;
@_vertical_element_spacing: 15px; // Bootstrap default
@_border_color: #ddd;
@_background_color: #fff;
@_box_background_color: #f2f2f2;
@_error_color: #C21C3D;
@_error403_background_color: #e8e8e8;

body.err403 {
    background-color: @_error403_background_color;

    .z-logon-box {
        background-color: white;
        padding: 20px 10px;
    }
}

.z-logon-prompt {
    text-align: center;
    max-width: @_logon_box_width;
    margin: 40px auto;
}

.z-logon-back {
    float: left;
    margin: 40px 20px;
}

.z-logon-box {
    float: none;
    margin: @_vertical_element_spacing auto;

    width: @_logon_box_width;
    max-width: 100%;

    img.loading {
        display: block;
        margin: 0 auto;
        opacity: 0.5;
        height: 16px;
    }

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

    p {
        margin-bottom: @_button_spacing;
    }

    // full width submit button
    button[type="submit"],
    input[type="submit"] {
        width: 100%;
    }

    .z-logon-title,
    h2, h3, h4 {
        &:first-of-type {
            margin-top: 0;
        }
    }

    .z-logon-form {
        margin: @_vertical_element_spacing auto 0 auto;
    }

    /* Extra login options */
    .z-logon-extra {
        li {
            margin: 0 0 @_button_spacing 0 ;
        }

        .z-btn-social {
            display: block;
            text-align: center;
            text-decoration: none;
        }

        .z-logon-extra-separator {
            @_line_height: 16px;

            position: relative;
            z-index: 1;
            text-align: center;
            line-height: @_line_height;
            margin: @_vertical_element_spacing 0;

            &:before {
                // background behind "or"
                @_label_width: 40px;
                @_label_height: @_line_height;

                position: absolute;
                left: 50%;
                top: 50%;
                height: @_label_height;
                top: @_line_height/2;
                width: @_label_width;
                background-color: @_background_color;
                content: "";
                margin: -@_label_height/2 0 0 -@_label_width/2;
                z-index: -1;
            }

            &:after {
                // horizontal line
                position: absolute;
                left: 0;
                top: @_line_height/2;
                content: " ";
                width: 100%;
                border-bottom: 1px solid @_border_color;
                z-index: -2;
            }
        }
        .z-logon-extra-separator:first-child {
            display: none;
        }
    }

    /* Supporting options */
    .z-logon-support {
        margin: @_vertical_element_spacing 0 0 0;
        padding: @_vertical_element_spacing 0 0 0;

        &:empty {
            display: none;
        }
    }

    .alert {

        :first-child {
            margin-top: 0;
        }

        :last-child {
            margin-bottom: 0;
        }
    }

    // Overrides when the box is shown in a background-colored box
    &.z-logon-box-boxed {
        @_background_color: @_box_background_color;

        .z-logon-form {
            margin: @_vertical_element_spacing 0;
            padding: @_vertical_element_spacing @_horizontal_spacing;
            background-color: @_background_color;
        }

        .z-logon-extra {
            .z-logon-extra-separator {
                margin-left: -@_horizontal_spacing;
                margin-right: -@_horizontal_spacing;

                &:before {
                    background-color: @_background_color;
                }
            }
        }

        .z-logon-support {
            margin-left: -@_horizontal_spacing;
            margin-right: -@_horizontal_spacing;
            padding-left: @_horizontal_spacing;
            padding-right: @_horizontal_spacing;
            border-top: 1px solid @_border_color;

            p:last-child {
                margin-bottom: 0;
            }
        }
    }

    /* Sign up specific*/

    #signup_verify {
        display: none;
    }

    input#surprefix {
        width: 50px;
    }

    #signup_error_tos_agree,
    #signup_error_duplicate_username,
    #signup_error_duplicate_identity {
        display: none;
    }

    .error_tos_agree #signup_error_tos_agree,
    .error_duplicate_username #signup_error_duplicate_username,
    .error_duplicate_identity #signup_error_duplicate_identity,
    .error_custom_1 #signup_error_custom_1,
    .error_custom_2 #signup_error_custom_2 {
        display: block;
    }

    .z_validation_message {
        display: block;
        margin: 5px 0 0 0;
    }
}