font-weight: bold;
}
-/* shuffled CAPTCHA */
+/**** shuffled CAPTCHA ****/
#wpCaptchaWord {
margin-top: 6px;
}
text-align: center;
}
-.mw-createacct-captcha-image-container {
- background-color: #fff;
- min-height: 95px;
-}
-
.mw-createacct-captcha-assisted {
display: block;
margin-top: 0.5em;
}
+/* Put a border around the fancycaptcha-image-container. */
.mw-createacct-captcha-and-reload {
border: 1px solid #c9c9c9;
- display: table-cell;
+ display: table-cell; /* Other display formats end up too wide */
width: 270px;
background-color: #FFF;
}
-.mw-createacct-captcha-and-reload .confirmedit-captcha-reload {
- display: block;
- float: right;
+/* Make the fancycaptcha-image-container full-width within its parent. */
+.fancycaptcha-image-container
+{
+ width: 100%;
}
-/* Benefits column CSS to the right (if it fits) of the form. */
+/**** Benefits column CSS to the right (if it fits) of the form. ****/
.mw-ui-container #userloginForm {
float: left;
}
$submit = $content.find( '#wpCreateaccount' ),
tabIndex,
$captchaStuff,
+ $captchaImageContainer,
helpMsg = mw.config.get( 'wgCreateacctImgcaptchaHelp' ),
- captchaImage;
+ helpHtml = '';
/*
* CAPTCHA
if ( $captchaStuff.length ) {
- // The FancyCaptcha image has this class in the ConfirmEdit extension
+ // The FancyCaptcha has this class in the ConfirmEdit extension
// after 2013-04-18.
- captchaImage = $captchaStuff.find( 'img.fancycaptcha-image' );
- if ( captchaImage.length !== 1 ) {
+ $captchaImageContainer = $captchaStuff.find( '.fancycaptcha-image-container' );
+ if ( $captchaImageContainer.length !== 1 ) {
return;
}
$captchaStuff.remove();
- // Insert another div before the submit button.
+ if ( helpMsg) {
+ helpHtml = '<small class="mw-createacct-captcha-assisted">' + helpMsg + '</small>';
+ }
+
+ // Insert another div before the submit button that will include the
+ // repositioned FancyCaptcha div, an input field, and possible help.
$submit.closest( 'div' )
.before( [
'<div>',
'<label for="wpCaptchaWord">' + mw.message( 'createacct-captcha' ).escaped() + '</label>',
'<div class="mw-createacct-captcha-container">',
- '<div class="mw-createacct-captcha-and-reload">',
- '<div class="mw-createacct-captcha-image-container">',
- '<img id="mw-createacct-captcha" alt="PLACEHOLDER">',
- '</div>',
- '</div>',
+ '<div class="mw-createacct-captcha-and-reload" />',
'<input id="wpCaptchaWord" name="wpCaptchaWord" type="text" placeholder="' +
mw.message( 'createacct-imgcaptcha-ph' ).escaped() +
'" tabindex="' + tabIndex + '" autocapitalize="off" autocorrect="off">',
- '<small class="mw-createacct-captcha-assisted">' + helpMsg + '</small>',
+ helpHtml,
'</div>',
'</div>'
].join( '' )
);
- // Replace the placeholder img with the img from the old CAPTCHA.
- captchaImage.replaceAll( $content.find( '#mw-createacct-captcha' ) );
-
- // Append CAPTCHA reload, if any.
- $( '.mw-createacct-captcha-and-reload' ).append( $captchaStuff.find( '.confirmedit-captcha-reload' ) );
+ // Stick the FancyCaptcha container inside our bordered and framed parents.
+ $captchaImageContainer
+ .prependTo( $content.find( '.mw-createacct-captcha-and-reload' ) );
// Find the input field, add the text (if any) of the existing CAPTCHA
// field (although usually it's blanked out on every redisplay),
.after( $captchaStuff.find( '#wpCaptchaId' ) );
}
- });
+ } );
}( mediaWiki, jQuery ) );