diaspora/app/assets/stylesheets/_mixins.css.scss

/* Mixin file for sass.  Here is where we define our variables and
   browser compatability functions used in all scss/sass files */

/* Diapora's default color palate */
$blue: #3f8fba;
$dark-blue: darken(#0984C8,10%);
$green: #8EDE3D;

$grey: #2b2b2b;
$light-grey: #ddd;

$red: #a80000;
$background: #fff;
$creation-blue: #0097ff;

$red: #a80000;
$background: #fff;
$creation-blue: #0097ff;

/* Transision defaults */
$speed: 0.1s;
$easing: linear;

$default-border-radius: 3px;

/* Style includes */
@mixin border-radius($tl:$default-border-radius, $tr:$tl, $br:$tl, $bl:$tl){
  -moz-border-radius: $tl $tr $br $bl;
  -webkit-border-radius: $tl $tr $br $bl;
  border-radius: $tl $tr $br $bl;
}

@mixin dropdown-shadow{
  @include box-shadow(0,0px,13px,rgba(20,20,20,0.5))
}

@mixin button-gradient($color){
  @include linear-gradient(lighten($color,20%), $color);
}

@mixin button-gradient-hover($color){
  @include linear-gradient(lighten($color,20%), darken(saturate($color,15%),10%));
}

@mixin button-gradient-hover-no-saturation($color){
  @include linear-gradient(lighten($color,20%), darken($color,15%));
}

/* Browser compatability */
@mixin box-shadow($left, $top, $blur, $color:#000){
  -webkit-box-shadow: $left $top $blur $color; 
  -moz-box-shadow: $left $top $blur $color; 
  box-shadow: $left $top $blur $color; 
}

@mixin linear-gradient($from, $to, $start:0%, $end:100%){
  background-image: mix($from,$to);

  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=$from, endColorstr=$to);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})";
  
  background-image: -webkit-gradient(linear, 0% $start, 0% $end, from($from), to($to));
  background-image: -moz-linear-gradient(top, $from $start, $to $end);
  background-image: -o-linear-gradient(top, $from $start, $to $end);
}

@mixin opacity($val){
  filter: alpha(opacity= $val* 100);
  -moz-opacity: $val;
  -khtml-opacity: $val;
  opacity: $val;
}

@mixin user-select($val){
  -webkit-user-select: $val;
  -moz-user-select: $val;
}

@mixin transition($type, $speed:$speed, $easing:$easing){
  -webkit-transition : $type $speed $easing;
     -moz-transition : $type $speed $easing;
       -o-transition : $type $speed $easing;
          transition : $type $speed $easing;
}

@mixin animate($name, $speed:$speed, $occurances:"") {
  -webkit-animation : $name $speed $occurances;
     -moz-animation : $name $speed $occurances;
      -ms-animation : $name $speed $occurances;
}

@mixin animation($name, $speed:0.2s, $easing:ease-in-out) {
  -webkit-animation: $name $speed $easing;
  -moz-animation: $name $speed $easing;
  -ms-animation: $name $speed $easing;
}

@mixin video-overlay(){
  .video-overlay {
    background : {
      color: rgba(0,0,0, .65);
      image : image-url('buttons/playbtn.png');
      repeat : no-repeat;
      position : 10px center;
      size : 60px 60px;
    }

    @include border-radius(70px, 10px, 10px, 70px);
    @include box-shadow(0, 0, 32px, rgba(255,255,255,.5));

    position : absolute;
    top : 50%;
    left : 10%;
    right : 10%;
    
    height: 60px;
    margin-top: -40px;
    padding: 10px 7px 10px 80px;
    overflow: hidden;

    line-height: 60px;

    & > div {
      display: inline-block;
      vertical-align: middle;
      max-width: 100%;
    }

    & > div > div {
      @include opacity(1.0);
      overflow: hidden;
      text-shadow: -1px -1px 0 #000, 0 0 7px #111;
      color: #F0F0F0;
      font-size: 0.9em;
      text-overflow: ellipsis;
    }

    .title {
      font-weight: bold;
      white-space: nowrap;
      line-height: .95em;
    }
    .meta {
      font-size: .94em;
      line-height: 1.3em;
      white-space: nowrap;
      @include opacity(.9);

      a {
        color: lighten($blue, 25%);
      }
      a:visited {
        color: $blue;
      }
    }
    .desc {
      font-size: .91em;
      line-height: .97em;
      max-height: 35px;
    }
  }
}