Enhanced contrast of basic alerts (Issue #53)

[optikfluffel]

Changed the font-color to #404040 and text-shadow to rgba(255, 255, 255, 0.3).

[wildchild]

Looking good!

[optikfluffel]

Changed the color of the error back to white. (like on a stop-sign ^^)
Should be better now :)

[vincemtnz]

Both .alert and .warning have good contrast. Not sure what to think about the other two, both white and black text seem to have readability issues on those shades of green / blue.

[qcom]

@optikfluffel looks great! Thanks for sharing. Although I do agree with @eyko about the green blue.

[andycole]

I'd prefer to see all the messages in white apart from the yellow one, which would have black text. That's the set-up I've used before for similar warnings/notifications

[bistory]

I agree with @andycole !

[asmallteapot]

I agree with @andycole. To @eyko’s point, perhaps an off–white (#ddd?) would look better on green and blue?

[vincemtnz]

I think I personally prefer dark text on .success and .info. In the image below, the dark text on green is a dark-green (#030), while the dark text on blue is a dark blue (#003). Maybe it's just my senses being picky…

Compared to the default white text:

After @flpatriot's suggestion, I also tried #ddd, but it's definitely a no-go.

[mdo]

We've actually redesigned these as part of the 1.1.1 release. Here's a peak at the new colors:

We've lowered the intensity of the alerts by making all colors less vibrant and a bit darker. The blue one needs a bit of love yet for better contrast, but I think this is a solid improvement for style and readability.

Thoughts?

[vincemtnz]

I think the dimmer yellow really works well, much closer to the "Tip: …" box we have under the comment box here. A more visible text shadow would help the blue, I personally tried and liked:

.alert-message.info { text-shadow: 0 0 1px rgba(0, 0, 0, 0.9); }

But I have it with white, is that a shade of grey?

Edit: If you're going for white-on-blue/green, I think this shadow allows for more readable text:

.alert-message.info, .alert-message.success { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); }

[optikfluffel]

I really like the dark-green and dark-blue styling from eyko ^^ and the small text on the red seems to be less readable than before xD

[bloqhead]

@eyko — That text is much easier to read. I dig it.

[mdo]

I dig the readability, but the light sources (between the text and the x dismiss) don't match in @eyko's options. I'll work on the contrast between color and background and bump the shadow up a few notches.

[mdo]

Alerts updated with new colors for the contrast in the branch 1.1.1-wip:

Red and blue are much darker, making just about everything more readable.