From 2fa29dbab31abbc231585992a34a40e5a9ba33f9 Mon Sep 17 00:00:00 2001 From: Volker E Date: Sat, 9 Sep 2017 01:39:13 -0700 Subject: [PATCH] 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 --- .../mediawiki.special.userlogin.common.css | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/resources/src/mediawiki.special/mediawiki.special.userlogin.common.css b/resources/src/mediawiki.special/mediawiki.special.userlogin.common.css index 4a48f460c1..2366249253 100644 --- 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%; -- 2.20.1