800239 - Input field border colors are very faint (barely noticeable)

Status: RESOLVED FIXED

(support.mozilla.org :: General, defect, P4)

Description

[Ken Saunders]

Attachment: SUMO user input field

(sorry, wasn't sure of the proper component)

Border colors on the input fields at the URL's below (perhaps other places as well), are very light and at first glance, there doesn't appear to be a field at all.

background-color: rgb(250, 250, 250);
border-top-color: rgb(247, 247, 247); (same for others)

https://support.mozilla.org/users/register
https://support.mozilla.org/users/forgot-username
https://support.mozilla.org/users/pwreset
https://support.mozilla.org/users/resendconfirmation

Comment 1

[Ricky Rosario [:rrosario, :r1cky]]

This is implemented as designed (see https://bug762255.bugzilla.mozilla.org/attachment.cgi?id=651640 for example).

Assigning to Bram for feedback and next steps.

Comment 2

[Bram Pitoyo [:bram]]

Attachment: registration form - new input field

Comment 3

[Bram Pitoyo [:bram]]

Attachment: post a reply form - new input field

Comment 4

[Bram Pitoyo [:bram]]

This one should have better contrast while staying in harmony with the rest of the page. What do you think?

CSS values:

input {
background: #fff;
border-color: #b2b2b2;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px rgba(255,255,255,0.5);
transition: all linear .1s;
}

input:focus {
border-color: #42a4e0;
0 0 0 2px rgba(73,173,227,0.4);
transition: all linear .1s;
}

Comment 5

[Ken Saunders]

Excellent

Comment 6

[Kadir Topal [:atopal]]

Thanks, Bram!

Comment 7

[Ricky Rosario [:rrosario, :r1cky]]

minor CSS changes => 1pt

Comment 8

[Ricky Rosario [:rrosario, :r1cky]]

(sprint planning) this didn't make the cut

Comment 9

[Ricky Rosario [:rrosario, :r1cky]]

In a pull request:
https://github.com/mozilla/kitsune/pull/934

Comment 10

[Ricky Rosario [:rrosario, :r1cky]]

Landed and deployed:

https://github.com/mozilla/kitsune/commit/3c48561fac2e5a530ddb2275a6b34417e0f8aa49