FancyCaptcha: Align to WikimediaUI Style Guide

Aligning FancyCaptcha appearance to WikimediaUI color palette and
guidelines, adding `border-radius`, reducing `padding` slightly to
`8px` base and bring captcha and input closer together.

Bug: T152025
Change-Id: I26d9aadb7456ea6b7ba68a40cb4c624e995d9341

diff --git a/resources/src/mediawiki.special/mediawiki.special.userlogin.common.css b/resources/src/mediawiki.special/mediawiki.special.userlogin.common.css
index 4a48f46..2366249 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.userlogin.common.css
+++ b/resources/src/mediawiki.special/mediawiki.special.userlogin.common.css
@@ -40,11 +40,12 @@ section.mw-form-header {
 }
 
 .fancycaptcha-captcha-container {
-       background-color: #f8f8f8;
-       border: 1px solid #c9c9c9;
-       padding: 10px;
-       text-align: center;
+       background-color: #f8f9fa;
        margin-bottom: 15px;
+       border: 1px solid #c8ccd1;
+       border-radius: 2px;
+       padding: 8px;
+       text-align: center;
 }
 
 .mw-createacct-captcha-assisted {
@@ -54,13 +55,20 @@ section.mw-form-header {
 
 /* Put a border around the fancycaptcha-image-container. */
 .fancycaptcha-captcha-and-reload {
-       border: 1px solid #c9c9c9;
+       border: 1px solid #c8ccd1;
+       border-radius: 2px 2px 0 0;
        /* Other display formats end up too wide */
        display: table-cell;
        width: 270px;
        background-color: #fff;
 }
 
+.fancycaptcha-captcha-container .mw-ui-input {
+       margin-top: -1px;
+       border-color: #c8ccd1;
+       border-radius: 0 0 2px 2px;
+}
+
 /* Make the fancycaptcha-image-container full-width within its parent. */
 .fancycaptcha-image-container {
        width: 100%;