Michael has a proposal for some different colours and possibly a change in animation.

Michael, can you give details about the colour values?

/* Element Highlight: */ border-radius: 40px; background-image: -o-radial-gradient(50% 100%, rgba(0,149,220,0.25) 50%, rgba(0,149,220,0.35) 100%); background-image: -moz-radial-gradient(50% 100%, rgba(0,149,220,0.25) 50%, rgba(0,149,220,0.35) 100%); background-image: -webkit-radial-gradient(50% 100%, rgba(0,149,220,0.25) 50%, rgba(0,149,220,0.35) 100%); background-image: -ms-radial-gradient(50% 100%, rgba(0,149,220,0.25) 50%, rgba(0,149,220,0.35) 100%); background-image: radial-gradient(50% 100%, rgba(0,149,220,0.25) 50%, rgba(0,149,220,0.35) 100%); border: 1px solid #FFFFFF; -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.50); -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.50); box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.50);

Thanks mmaslaney, The result looks a bit different than the spec (attachment 8336360 [details]) so I'm asking for your ui-review.

Comment on attachment 8339061 [details] [diff] [review] v.1 CSS from comment 2 Review of attachment 8339061 [details] [diff] [review]: ----------------------------------------------------------------- It should really be a perfect circle, except in cases like the urlbar and search bar. Might be easiest to just specify this as part of the UITour.targets map? Also, the colour does indeed look off.

(In reply to mmaslaney from comment #2) > -webkit-box-shadow: Oh really?

Haha, Sketch spits out the CSS for all Engines...

Working on the color adjustment, the vibrancy is off compared with the spec.

NEW SPEC radial-gradient(50% 100%, rgba(0, 150, 220, 0.3) 50%, rgba(0, 150, 220, 0.5) 100%) Color saturation might be due to the skewed circles, which will be adjusted. Either way, I went ahead and bumped up the transparency to better match the mock. If the colors seem to vibrant after the shape adjustment, We can always revert back to the previous specs.

(In reply to Blair McBride [:Unfocused] from comment #5) > Comment on attachment 8339061 [details] [diff] [review] > v.1 CSS from comment 2 > > It should really be a perfect circle, except in cases like the urlbar and > search bar. That's bug 943765. > Might be easiest to just specify this as part of the UITour.targets map? > > Also, the colour does indeed look off. I'll update the colour with the new details from comment 9.

Include CSS change from comment 9.

This is better but still not the identical to the mockup. Good enough for now?

Can we try bumping up the outer transparency to: radial-gradient(50% 100%, rgba(0, 150, 220, 0.3) 50%, rgba(0, 150, 220, 0.6) 100%)

Comment on attachment 8342709 [details] Screen shot of menu button highlight with v.1.1 radial-gradient(50% 100%, rgba(0, 149, 220, 0.4) 50%, rgba(0, 149, 220, 0.6) 100%)

[17:31:17] <MattN> …http://grab.by/sAka (bottom one) [17:32:07] <mmaslaney> MattN: Beautiful, thanks for the tweak.

Er, late thought: Does this still look ok on a HiDPI display?

Matt, would you mind providing a screen shot of the UI highlight on a darker theme? I'm going to create an alternative to the default.

(In reply to Blair McBride [:Unfocused] from comment #17) > Er, late thought: Does this still look ok on a HiDPI display? Yep, LGTM.

(In reply to mmaslaney from comment #19) > Matt, would you mind providing a screen shot of the UI highlight on a darker > theme? I'm going to create an alternative to the default. Here is one on Frozen Fox. Since this change is now in Nightly, you can test other combinations/themes in your own build if you still have the preferences set from the work week. If you would like a change, please file a new bug blocking this one since this one is already resolved.