600130 - Tweet background gradients don't display correctly

Status: RESOLVED DUPLICATE of bug 600695

(support.mozilla.org :: Army of Awesome, task)

Description

[William Reynolds [:williamr]]

1. The alternate rows for tweets should have a gray gradient. This appears in the css under #tweets li.alt, but it doesn't look like the "alt" class is in the html. Let's add it in for each alternate row.

2. The alternate and hover gradients do not appear in WebKit since we're currently only using the -moz-linear-gradient properties. We need to add the -webkit-gradient property to #tweets li.alt and #tweets li:hover.

WebKit reference: http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html

Design reference: http://people.mozilla.com/~williamr/communitycare/1-landingpage.jpg

Comment 1

[Alex Buchanan [:abuchanan]]

[custcare 0237be4] bug 600130, css, background gradients
 2 files changed, 2 insertions(+), 2 deletions(-)


will close when I push to master

Comment 2

[Alex Buchanan [:abuchanan]]

http://github.com/jsocol/kitsune/commit/dbe13b7e2ff867ec63b5e61ec41cf9bb529a2b10

Comment 3

[Stephen Donner [:stephend] Not actively reading bugmail]

William, can you take this one?  Thanks.

Comment 4

[William Reynolds [:williamr]]

Looks good in Firefox, but not in Chrome or Safari yet (WebKit). I think these are the properties we need:

#tweets li.alt {
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F5F5F5));
}

#tweets li:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFD), to(#FDEFA6));
}

And you can remove line 367: "/* todo: add webkit gradient property */"