activity/comment list button styles

[DJPaul]

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.

[karmatosed]

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.

Please consider jpgs may not be properly showing contrast which is why included the colour swatches done through contrast checker.

At this point more looking for opinions and feedback than saying these are what we should be doing. So.. what you think :)

[DJPaul]

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

[karmatosed]

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 vesion in buttons.jpg with number 5 as the hover effect.

[mercime]

slight change to buttons

[mercime]

slight change to button with sprite

[mercime]

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 :-)

[DJPaul]

Thank you very much for your designs on this, the issue's been resolved with the recent activity / comment styling updates.

[mercime]

Saw the resolution in testbp.org and l like it :-)