#3315 closed enhancement (fixed)
activity/comment list button styles
Reported by: | DJPaul | Owned by: | DJPaul |
---|---|---|---|
Milestone: | 1.5 | Priority: | normal |
Severity: | Version: | 1.2 | |
Component: | Templates | Keywords: | needs-patch needs-ui |
Cc: |
Description
After r4611, it's more apparent that the blue and orange button styles on these screens are hard to see, especially on the grey style of nested comments.
It would be nice to tweak the colour of these "buttons" so they are easier to see, and hopefully pass the WCAG guidelines.
Attachments (11)
Change History (21)
#3
@
13 years ago
Another approach is to more concentrate on making these look like buttons, especially as we use these highlight colours in other parts of BP Default
#4
@
13 years ago
I've had a more 'what if play' and come up with a few options numbered in buttons.jpg/ Number 5 on the jpg shows a hover suggestion.
I would suggest we use CSS gradients too for this.
My personal preference would be also to use the number 3 version in buttons.jpg with number 5 as the hover effect.
#5
@
13 years ago
I could have sworn I posted some info here already after I attached the images earlier :-)
In any case, for the first image 070511-buttons-01.jpg, I just made some minor changes to the style like so:
a.bp-primary-action, .comment-reply-link, #reply-title small a { background: #ffffff none; border-radius: 4px 4px 4px 4px; border-color: #FFF9DB #FFE8C4 #FFE8C4 #FFF9DB; border-style: solid; border-width: 2px 2px 2px 2px; color: #FFA200; font-size: 11px; padding: 2px 6px; text-decoration: none; text-shadow: 0 1px 0 #eeeeee; } a.bp-secondary-action, span.highlight { background: #ffffff none; border-radius: 4px 4px 4px 4px; border-color: #EBF7FF #D6E9F5 #D6E9F5 #EBF7FF; border-style: solid; border-width: 2px 2px 2px 2px; color: #059AE7; font-size: 11px; padding: 2px 6px; text-decoration: none; }
For the second image, 070511-buttons-02.jpg, I just added some padding to the right and used sprite to add some spice :-)
I have had a bit of a play and come up with a few variations as shown in 2versions.jpg (in attached jpgs).
I've also included the contrast tool checker on this as there is a full WCAG pass and a partial one.
Explained.jpg goes into which is which and also has the colours to show.
At this point more looking for opinions and feedback than saying these are what we should be doing. So.. what you think :)
Also consider jpgs may not be properly showing contrast which is why included the colour swatches done through contrast checker.