1 /* Mixins for visual effects in CSS3 */
3 @import "../settings/colors";
5 // ----------------------------------------------------------------------------
7 // ----------------------------------------------------------------------------
8 .vertical-gradient(@startColor: lighten(@agoraGray, 95%), @endColor: @agoraGray, @startPos: 0, @endPos: 100%) {
9 background-color: @endColor;
10 background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+
11 background-image: -webkit-gradient( linear, left top, left bottom, color-stop( @startPos, @startColor ), color-stop( @endPos, @endColor ) ); // Safari 4+, Chrome 2+
12 background-image: -webkit-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Safari 5.1+, Chrome 10+
13 background-image: linear-gradient( @startColor @startPos, @endColor @endPos ); // Standard
16 // ----------------------------------------------------------------------------
18 // ----------------------------------------------------------------------------
20 .buttonColors(@baseColor: @agoraGray) {
22 .vertical-gradient(lighten(@baseColor, 7.5%), @baseColor);
24 border: 1px solid darken(@baseColor, 2%);
28 .vertical-gradient(lighten(@baseColor, 12.5%), lighten(@baseColor, 7.5%));
29 text-decoration: none;
34 background-image: none;
35 background-color: darken(@baseColor, 3%);
40 background-image: none;
41 background-color: @baseColor;
46 .buttonColors(@baseColor: @agoraGray) when (lightness(@baseColor) >= 50%) {
50 .buttonColors(@baseColor: @agoraGray) when (lightness(@baseColor) < 50%) {