Customize: beautify hover, focus, and active states for the partial edit shortcut button

[michaelarestad]

Currently, the focus style changes the border to almost black. It was done that way for accessibility, but I suspect that value would be lost on any theme with a dark background. I added a box shadow for the focus style that is basically a second border. The focus style was toned down to a simple background color change that is the same as the primary button hover.

[michaelarestad]

Looks like this:

[westonruter]

@sirbrillig thoughts?

[transl8or]

I like that approach and tested his suspicion with a color change in Twenty Seventeen to the dark color theme and changing the theme to Twenty Fourteen. The button gets smaller on hover on the dark background.

(The Hide Controls Arrow would also need some design refinements. Its not centered in Firefox.)

[sirbrillig]

I am not a great person to ask about subtle styles, but I agree with the premise in this ticket and I think those icons look good to me, so 👍

[westonruter]

@sirbrillig What about the centering in Firefox that @transl8or raised?

@melchoyce Do you 👍 on the design changes?

[melchoyce]

Yup 👍

[westonruter]

@transl8or I'm not seeing a Firefox issue with the Hide Controls button. Anyway, that would be a separate issue.

@michaelarestad Good to commit. Let me know if you'd like me to commit as well.

[westonruter]

In 39228:

Customize: Improve styles for hover, focus, and active states on edit shortcuts.

Props michaelarestad.
Fixes #38758.