resources/mediawiki.ui/mixins/effects.less

   1 /* Mixins for visual effects in CSS3 */
   2
   3 @import "../settings/colors";
   4
   5 // ----------------------------------------------------------------------------
   6 // Gradients
   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
  14 }
  15
  16 // ----------------------------------------------------------------------------
  17 // Button styling
  18 // ----------------------------------------------------------------------------
  19
  20 .buttonColors(@baseColor: @agoraGray) {
  21         // Background color
  22         .vertical-gradient(lighten(@baseColor, 7.5%), @baseColor);
  23
  24         border: 1px solid darken(@baseColor, 2%);
  25
  26         &:hover,
  27         &.mw-ui-hover {
  28                 .vertical-gradient(lighten(@baseColor, 12.5%), lighten(@baseColor, 7.5%));
  29                 text-decoration: none;
  30         }
  31
  32         &:active,
  33         &.mw-ui-active {
  34                 background-image: none;
  35                 background-color: darken(@baseColor, 3%);
  36         }
  37
  38         &:disabled,
  39         &.mw-ui-disabled {
  40                 background-image: none;
  41                 background-color: @baseColor;
  42                 opacity: 0.5;
  43         }
  44 }
  45
  46 .buttonColors(@baseColor: @agoraGray) when (lightness(@baseColor) >= 50%) {
  47         color: #000;
  48 }
  49
  50 .buttonColors(@baseColor: @agoraGray) when (lightness(@baseColor) < 50%) {
  51         color: #fff;
  52 }