diff --git a/less/register.less b/less/register.less index 3fd96df..69bb5e0 100644 --- a/less/register.less +++ b/less/register.less @@ -9,4 +9,48 @@ font-size: 1.25rem; line-height: 2rem; } +} + +.register-block { + margin-top: 15px; + + .help-block { + font-size: 13px; + } + + .register-success { + .form-control { + border-color: #5cb85c; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"); + padding-right: 2.25rem; + background-repeat: no-repeat; + background-position: center right .625rem; + -webkit-background-size: 1.25rem 1.25rem; + background-size: 1.25rem 1.25rem; + } + + .register-feedback { + color: #5cb85c; + display: block; + margin-top: .25rem; + } + } + + .register-danger { + .form-control { + border-color: #d9534f; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E"); + padding-right: 2.25rem; + background-repeat: no-repeat; + background-position: center right .625rem; + -webkit-background-size: 1.25rem 1.25rem; + background-size: 1.25rem 1.25rem; + } + + .register-feedback { + color: #d9534f; + display: block; + margin-top: .25rem; + } + } } \ No newline at end of file diff --git a/templates/register.tpl b/templates/register.tpl index 2076bdd..45f5d20 100644 --- a/templates/register.tpl +++ b/templates/register.tpl @@ -2,7 +2,7 @@ <div class="row register"> <div class="{register_window:spansize}"> - <div class="well well-lg"> + <div class="register-block"> <div class="alert alert-danger<!-- IF !error --> hidden<!-- ENDIF !error -->" id="register-error-notify" > <strong>[[error:registration-error]]</strong> <p>{error}</p> @@ -11,48 +11,32 @@ <div class="form-group"> <label for="email" class="col-lg-4 control-label">[[register:email_address]]</label> <div class="col-lg-8"> - <div class="input-group"> - <input class="form-control" type="email" placeholder="[[register:email_address_placeholder]]" name="email" id="email" autocorrect="off" autocapitalize="off" /> - <span class="input-group-addon"> - <span id="email-notify"><i class="fa fa-circle-o"></i></span> - </span> - </div> + <input class="form-control" type="email" placeholder="[[register:email_address_placeholder]]" name="email" id="email" autocorrect="off" autocapitalize="off" /> + <span class="register-feedback" id="email-notify"></span> <span class="help-block">[[register:help.email]]</span> </div> </div> <div class="form-group"> <label for="username" class="col-lg-4 control-label">[[register:username]]</label> <div class="col-lg-8"> - <div class="input-group"> - <input class="form-control" type="text" placeholder="[[register:username_placeholder]]" name="username" id="username" autocorrect="off" autocapitalize="off" autocomplete="off" /> - <span class="input-group-addon"> - <span id="username-notify"><i class="fa fa-circle-o"></i></span> - </span> - </div> + <input class="form-control" type="text" placeholder="[[register:username_placeholder]]" name="username" id="username" autocorrect="off" autocapitalize="off" autocomplete="off" /> + <span class="register-feedback" id="username-notify"></span> <span class="help-block">[[register:help.username_restrictions, {minimumUsernameLength}, {maximumUsernameLength}]]</span> </div> </div> <div class="form-group"> <label for="password" class="col-lg-4 control-label">[[register:password]]</label> <div class="col-lg-8"> - <div class="input-group"> - <input class="form-control" type="password" placeholder="[[register:password_placeholder]]" name="password" id="password" /> - <span class="input-group-addon"> - <span id="password-notify"><i class="fa fa-circle-o"></i></span> - </span> - </div> + <input class="form-control" type="password" placeholder="[[register:password_placeholder]]" name="password" id="password" /> + <span class="register-feedback" id="password-notify"></span> <span class="help-block">[[register:help.minimum_password_length, {minimumPasswordLength}]]</span> </div> </div> <div class="form-group"> <label for="password-confirm" class="col-lg-4 control-label">[[register:confirm_password]]</label> <div class="col-lg-8"> - <div class="input-group"> - <input class="form-control" type="password" placeholder="[[register:confirm_password_placeholder]]" name="password-confirm" id="password-confirm" /> - <span class="input-group-addon"> - <span id="password-confirm-notify"><i class="fa fa-circle-o"></i></span> - </span> - </div> + <input class="form-control" type="password" placeholder="[[register:confirm_password_placeholder]]" name="password-confirm" id="password-confirm" /> + <span class="register-feedback" id="password-confirm-notify"></span> </div> </div> @@ -78,7 +62,7 @@ <!-- IF alternate_logins --> <div class="col-md-6"> - <div class="well well-lg"> + <div class="alt-register-block"> <h4>[[register:alternative_registration]]</h4> <ul class="alt-logins"> <!-- BEGIN authentication -->