added prefixer.less

2013-06-25 22:42:44 -07:00 · 2013-06-25 22:42:44 -07:00 · 3b80d59197
parent ab28b50c7e
commit 3b80d59197
8 changed files with 483 additions and 144 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -33,7 +33,8 @@ module.exports = function (grunt) {
            'UI/Content/Messenger/messenger.css'             : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger.css',
            'UI/Content/Messenger/messenger.future.css'      : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger-theme-future.css',
            
-            'UI/Content/bootstrap.toggle-switch.css'         : 'http://raw.github.com/ghinda/css-toggle-switch/gh-pages/toggle-switch.css'          
+            'UI/Content/bootstrap.toggle-switch.css'         : 'http://raw.github.com/ghinda/css-toggle-switch/gh-pages/toggle-switch.css',          
+            'UI/Content/prefixer.less'                       : 'http://raw.github.com/JoelSutherland/LESS-Prefixer/master/prefixer.less'          
        },

        clean: {
@ -41,6 +42,14 @@ module.exports = function (grunt) {
        },

        less  : {
+
+            options:{
+                dumpLineNumbers : 'false',
+                compress        : false,
+                yuicompress     : false,
+                ieCompat        : false
+            },
+
            bootstrap: {
                src : "UI/Content/bootstrap/bootstrap.less",
                dest: "_output/UI/Content/bootstrap.css"
--- a/UI/AddSeries/addSeries.less
+++ b/UI/AddSeries/addSeries.less
@ -2,79 +2,78 @@
@import "../shared/Styles/clickable.less";

 .result-list {
-
-  font-size: 14px;
-  text-align: left;
-  padding-bottom: 30px;
+  font-size      : 14px;
+  text-align     : left;
+  padding-bottom : 30px;
 }

 .existing-root-folder-view {
  h1 {
-    padding: 10px 0 20px 0;
+    padding : 10px 0 20px 0;
  }
 }

 .add-series-import-btn {
-  margin: 0px 40px;
-  width: 1080px;
+  margin : 0px 40px;
+  width  : 1080px;
 }

 .add-series-search {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  padding-left: 20px;
+  margin-top    : 20px;
+  margin-bottom : 20px;
+  padding-left  : 20px;

  *[class*='icon-'] {
-    font-size: 28px;
-    height: 30px;
-    width: 40px;
-    padding-top: 14px;
+    font-size   : 28px;
+    height      : 30px;
+    width       : 40px;
+    padding-top : 14px;
  }
  input {
-    height: 50px;
+    height : 50px;
  }

 }

 .folder-name-matches {
-  padding-left: 20px;
-  padding-top: 10px;
+  padding-left : 20px;
+  padding-top  : 10px;
 }

 .add-series-poster {
-  min-width: 138px;
-  min-height: 203px;
-  max-width: 138px;
-  max-height: 203px;
+  min-width  : 138px;
+  min-height : 203px;
+  max-width  : 138px;
+  max-height : 203px;
 }

 .unmapped-folder-view {
  .card;
-  margin-top: 20px;
-  padding: 20px;
+  margin-top : 20px;
+  padding    : 20px;
  .folder-header {
-    font-weight: 300;
+    font-weight : 300;
    select {
-      margin-bottom: 0;
-      font-size: 16px;
+      margin-bottom : 0;
+      font-size     : 16px;
    }
    input {
-      margin-bottom: 0;
+      margin-bottom : 0;
    }
  }
 }

 .search-item {

-  padding-bottom: 20px;
+  padding-bottom : 20px;
  a {
-    color: #343434;
+    color : #343434;
  }
  a:hover {
-    text-decoration: none;
+    text-decoration : none;
  }
  select {
-    font-size: 16px;
+    font-size : 16px;
  }
 }

@ -83,20 +82,20 @@
 }

 .new-series-overview {
-  text-overflow: ellipsis;
-  white-space: pre-line;
-  overflow: hidden;
-  height: 125px;
+  text-overflow : ellipsis;
+  white-space   : pre-line;
+  overflow      : hidden;
+  height        : 125px;
 }

 .new-series-add {
-  margin-left: 20px;
+  margin-left : 20px;
 }

-.new-series-loadmore {
+.loadmore {
  .clickable;
-  font-size: 30px;
-  font-weight: 300;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  font-size      : 30px;
+  font-weight    : 300;
+  padding-top    : 10px;
+  padding-bottom : 10px;
 }
--- a/UI/Content/Backgrid/paginator.less
+++ b/UI/Content/Backgrid/paginator.less
@ -1,15 +1,11 @@
+@import "/content/prefixer";
+
 .backgrid-paginator {
  text-align            : center;
-  -webkit-box-sizing    : border-box;
-  -moz-box-sizing       : border-box;
  box-sizing            : border-box;
  border-top            : none;
-  -webkit-border-radius : 0 0 4px 4px;
-  -moz-border-radius    : 0 0 4px 4px;
-  border-radius         : 0 0 4px 4px;
-
-
-
+  .box-sizing(border-box);
+  .border-radios(0 0 4px 4px);

  ul {
    display  : inline-block;
--- a/UI/Content/base.less
+++ b/UI/Content/base.less
@ -8,6 +8,7 @@
@import "menu";
@import "backgrid/backgrid";
@import "../shared/styles/clickable";
+@import "/content/prefixer";

 .progress {
  width         : 125px;
@ -38,7 +39,6 @@
  box-shadow       : none;
 }

-
 .line &>[class^="icon-"], .line &>[class*=" icon-"] {
  margin-top  : 1em;
  height      : 1em;
@ -81,10 +81,10 @@

  &:hover {
    text-decoration : none;
-    opacity         : 0.4;
+    .opacity         (0.4);
  }

-  opacity   : 0.2;
+  .opacity   (0.2);
  position  : fixed;
  bottom    : 50px;
  right     : 50px;
--- a/UI/Content/menu.less
+++ b/UI/Content/menu.less
@ -1,22 +1,24 @@
-#main-menu-region {
+@import "/content/prefixer";
+
+#main-menu-region {
  i:before {
-    font-size: 35px;
+    font-size : 35px;
  }
  i {
-    width: 40px;
+    width : 40px;
  }
 }

 #in-sub-nav li a {
-  color: #b9b9b9;
+  color : #b9b9b9;

 }

 #in-sub-nav {
-  margin-bottom: 80px;
+  margin-bottom : 80px;
 }

 .backdrop #in-sub-nav {
-  background-color: #000000;
-  opacity: 0.85;
+  background-color : #000000;
+  .opacity(0.85);
 }
--- a/UI/Content/prefixer.less
+++ b/UI/Content/prefixer.less
@ -0,0 +1,336 @@
+//---------------------------------------------------
+//  LESS Prefixer
+//---------------------------------------------------
+//
+//  All of the CSS3 fun, none of the prefixes!
+//
+//  As a rule, you can use the CSS properties you
+//  would expect just by adding a '.':
+//
+//  box-shadow => .box-shadow(@args)
+//
+//  Also, when shorthand is available, arguments are
+//  not parameterized. Learn CSS, not LESS Prefixer.
+//
+//  -------------------------------------------------
+//  TABLE OF CONTENTS
+//  (*) denotes a syntax-sugar helper
+//  -------------------------------------------------
+//
+//      .animation(@args)
+//          .animation-delay(@delay)
+//          .animation-direction(@direction)
+//          .animation-duration(@duration)
+//          .animation-iteration-count(@count)
+//          .animation-name(@name)
+//          .animation-play-state(@state)
+//          .animation-timing-function(@function)
+//      .background-size(@args)
+//      .border-radius(@args)
+//      .box-shadow(@args)
+//          .inner-shadow(@args) *
+//      .box-sizing(@args)
+//          .border-box() *
+//          .content-box() *
+//      .columns(@args)
+//          .column-count(@count)
+//          .column-gap(@gap)
+//          .column-rule(@args)
+//          .column-width(@width)
+//      .gradient(@default,@start,@stop) *
+//          .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
+//          .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
+//      .opacity(@factor)
+//      .transform(@args)
+//          .rotate(@deg)
+//          .scale(@factor)
+//          .translate(@x,@y)
+//          .translate3d(@x,@y,@z)
+//          .translateHardware(@x,@y) *
+//      .text-shadow(@args)
+//      .transition(@args)
+//          .transition-delay(@delay)
+//          .transition-duration(@duration)
+//          .transition-property(@property)
+//          .transition-timing-function(@function)
+//
+//
+//
+//  Credit to LESS Elements for the motivation and
+//  to CSS3Please.com for implementation.
+//
+//  Copyright (c) 2012 Joel Sutherland
+//  MIT Licensed:
+//  http://www.opensource.org/licenses/mit-license.php
+//
+//---------------------------------------------------
+
+
+// Animation
+
+.animation(@args) {
+    -webkit-animation: @args;
+    -moz-animation: @args;
+    -ms-animation: @args;
+    -o-animation: @args;
+}
+.animation-delay(@delay) {
+    -webkit-animation-delay: @delay;
+    -moz-animation-delay: @delay;
+    -ms-animation-delay: @delay;
+    -o-animation-delay: @delay;
+}
+.animation-direction(@direction) {
+    -webkit-animation-direction: @direction;
+    -moz-animation-direction: @direction;
+    -ms-animation-direction: @direction;
+    -o-animation-direction: @direction;
+}
+.animation-duration(@duration) {
+    -webkit-animation-duration: @duration;
+    -moz-animation-duration: @duration;
+    -ms-animation-duration: @duration;
+    -o-animation-duration: @duration;
+}
+.animation-iteration-count(@count) {
+    -webkit-animation-iteration-count: @count;
+    -moz-animation-iteration-count: @count;
+    -ms-animation-iteration-count: @count;
+    -o-animation-iteration-count: @count;
+}
+.animation-name(@name) {
+    -webkit-animation-name: @name;
+    -moz-animation-name: @name;
+    -ms-animation-name: @name;
+    -o-animation-name: @name;
+}
+.animation-play-state(@state) {
+    -webkit-animation-play-state: @state;
+    -moz-animation-play-state: @state;
+    -ms-animation-play-state: @state;
+    -o-animation-play-state: @state;
+}
+.animation-timing-function(@function) {
+    -webkit-animation-timing-function: @function;
+    -moz-animation-timing-function: @function;
+    -ms-animation-timing-function: @function;
+    -o-animation-timing-function: @function;
+}
+
+
+// Background Size
+
+.background-size(@args) {
+    -webkit-background-size: @args;
+    -moz-background-size: @args;
+    background-size: @args;
+}
+
+
+// Border Radius
+
+.border-radius(@args) {
+    -webkit-border-radius: @args;
+    -moz-border-radius: @args;
+    border-radius: @args;
+
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+}
+
+
+// Box Shadows
+
+.box-shadow(@args) {
+    -webkit-box-shadow: @args;
+    -moz-box-shadow: @args;
+    box-shadow: @args;
+}
+.inner-shadow(@args) {
+    .box-shadow(inset @args);
+}
+
+
+// Box Sizing
+
+.box-sizing(@args){
+    -webkit-box-sizing: @args;
+    -moz-box-sizing: @args;
+    box-sizing: @args;
+}
+.border-box(){
+    .box-sizing(border-box);
+}
+.content-box(){
+    .box-sizing(content-box);
+}
+
+
+// Columns
+
+.columns(@args){
+    -webkit-columns: @args;
+    -moz-columns: @args;
+    columns: @args;
+}
+.column-count(@count) {
+    -webkit-column-count: @count;
+    -moz-column-count: @count;
+    column-count: @count;
+}
+.column-gap(@gap) {
+    -webkit-column-gap: @gap;
+    -moz-column-gap: @gap;
+    column-gap: @gap;
+}
+.column-width(@width){
+    -webkit-column-width: @width;
+    -moz-column-width: @width;
+    column-width: @width;
+}
+.column-rule(@args){
+    -webkit-column-rule: @rule;
+    -moz-column-rule: @rule;
+    column-rule: @rule;
+}
+
+
+// Gradients
+
+.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
+    .linear-gradient-top(@default,@start,0%,@stop,100%);
+}
+.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
+    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
+    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
+    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
+    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
+    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
+}
+.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
+    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+}
+.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
+    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+}
+.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
+    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
+    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
+    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
+    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
+    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
+}
+.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
+    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
+}
+.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
+    background-color: @default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
+    background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+    background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
+}
+
+
+// Opacity
+
+.opacity(@factor){
+    opacity: @factor;
+    @iefactor: @factor*100;
+    filter: alpha(opacity=@iefactor);
+}
+
+
+// Text Shadow
+
+.text-shadow(@args){
+    text-shadow: @args;
+}
+
+
+// Transforms
+
+.transform(@args) {
+    -webkit-transform: @args; 
+    -moz-transform: @args; 
+    -ms-transform: @args; 
+    -o-transform: @args; 
+    transform: @args;
+}
+.rotate(@deg:45deg){
+    .transform(rotate(@deg));
+}
+.scale(@factor:.5){
+    .transform(scale(@factor));
+}
+.translate(@x,@y){
+    .transform(translate(@x,@y));
+}
+.translate3d(@x,@y,@z) {
+    .transform(translate3d(@x,@y,@z));
+}
+.translateHardware(@x,@y){
+    .translate(@x,@y);
+    -webkit-transform: translate3d(@x,@y,0);
+    -moz-transform: translate3d(@x,@y,0);
+}
+
+
+// Transitions
+
+.transition(@args:200ms) {
+    -webkit-transition: @args;
+    -moz-transition: @args;
+    -o-transition: @args;
+    transition: @args;
+}
+.transition-delay(@delay:0) {
+    -webkit-transition-delay: @delay;
+    -moz-transition-delay: @delay;
+    -o-transition-delay: @delay;
+    transition-delay: @delay;
+}
+.transition-duration(@duration:200ms) {
+    -webkit-transition-duration: @duration;
+    -moz-transition-duration: @duration;
+    -o-transition-duration: @duration;
+    transition-duration: @duration;
+}
+.transition-property(@property:all) {
+    -webkit-transition-property: @property;
+    -moz-transition-property: @property;
+    -o-transition-property: @property;
+    transition-property: @property;
+}
+.transition-timing-function(@function:ease) {
+    -webkit-transition-timing-function: @function;
+    -moz-transition-timing-function: @function;
+    -o-transition-timing-function: @function;
+    transition-timing-function: @function;
+}
+
--- a/UI/Series/series.less
+++ b/UI/Series/series.less
@ -1,155 +1,152 @@
@import "../Shared/Styles/card.less";
@import "../Shared/Styles/clickable.less";
+@import "/content/prefixer";

 .series-item {
-  padding-bottom: 30px;
+  padding-bottom : 30px;

  :hover {
-    text-decoration: none;
+    text-decoration : none;
  }

  h2 {
-    margin-top: 0px;
+    margin-top : 0px;
  }

  a {
-    color: #000000;
+    color : #000000;
  }
 }

 .series-page-header {
-  background: #000000;
-  color: #ffffff;
-  opacity: 0.9;
-  padding: 30px 30px;
-  margin: 50px 10px;
-  opacity: 0.9;
+  background : #000000;
+  color      : #ffffff;
+  .opacity(0.9);
+  padding    : 30px 30px;
+  margin     : 50px 10px;
 }

 .series-season {
  .card;
-  margin: 80px 10px;
-  padding: 20px 40px;
-  opacity: 0.9;
-
+  margin  : 80px 10px;
+  padding : 20px 40px;
+  .opacity(0.9);
 }

 .series-posters {
-  list-style-type: none;
+  list-style-type : none;

  li {
-    display: inline-block;
-    vertical-align: top;
+    display        : inline-block;
+    vertical-align : top;
  }

  .series-posters-item {

    .card;
    .clickable;
-    margin-bottom: 20px;
-    height: 295px;
+    margin-bottom : 20px;
+    height        : 295px;

    .center {
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-      text-align: center;
+      display      : block;
+      margin-left  : auto;
+      margin-right : auto;
+      text-align   : center;
    }

    .progress {
-      left: 22px;
-      margin-top: 5px;
+      left       : 22px;
+      margin-top : 5px;
    }

    .title {
-      position: absolute;
-      left: -10000px;
-      top: auto;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
+      position : absolute;
+      left     : -10000px;
+      top      : auto;
+      width    : 1px;
+      height   : 1px;
+      overflow : hidden;
    }

    .labels {
-      display: inline-block;
-      opacity: 0.75;
-      width: 170px;
+      display : inline-block;
+      .opacity(0.75);
+      width   : 170px;

      :hover {
-        cursor: default;
+        cursor : default;
      }

      .label {
-        margin-top: 3px;
-        display: block;
+        margin-top : 3px;
+        display    : block;
      }

      .tooltip {
-        opacity: 1;
+        .opacity(1);
      }
    }
  }

  .series-poster-container {
-    position: relative;
-    overflow: hidden;
-    display: inline-block;
+    position : relative;
+    overflow : hidden;
+    display  : inline-block;

    .ended-banner {
-      color: #eeeeee;
-      background-color: #b94a48;
-      -moz-box-shadow: 2px 2px 20px #888888;
-      -moz-transform: rotate(45deg);
-      -moz-transform-origin: 50% 50%;
-      -webkit-transform: rotate(45deg);
-      -webkit-transform-origin: 50% 50%;
-      position: absolute;
-      width: 300px;
-      top: 175px;
-      left: -122px;
-      text-align: center;
-      opacity: 0.9;
+      color                    : #eeeeee;
+      background-color         : #b94a48;
+      .box-shadow(2px 2px 20px #888888);
+      -moz-transform-origin    : 50% 50%;
+      -webkit-transform-origin : 50% 50%;
+      position                 : absolute;
+      width                    : 300px;
+      top                      : 175px;
+      left                     : -122px;
+      text-align               : center;
+      .opacity(0.9);
+
+      .transform(rotate(45deg));
    }

    .series-controls {
-      position: absolute;;
-      top: 0px;
-      overflow: hidden;
-      background-color: #eeeeee;
-      width: 100%;
-      text-align: right;
-      padding-right: 20px;
-      opacity: 0.8;
-      display: none;
+      position         : absolute;;
+      top              : 0px;
+      overflow         : hidden;
+      background-color : #eeeeee;
+      width            : 100%;
+      text-align       : right;
+      padding-right    : 20px;
+      .opacity(0.8);
+      display          : none;
    }

    .series-poster {
-      width: 168px;
+      width : 168px;
    }
  }

 }

 .series-detail-overview {
-  margin-bottom: 50px;
+  margin-bottom : 50px;
 }

-@import "../shared/Styles/clickable.less";
-
 .series-season {
  .episode-number-cell {
-    width: 22px;
+    width : 22px;
  }
  .episode-air-date-cell {
-    width: 150px;
+    width : 150px;
  }

  .episode-status-cell {
-    width: 100px;
+    width : 100px;
  }

  .episode-title-cell {
-    cursor: pointer;
+    cursor : pointer;
  }
 }

@ -157,23 +154,23 @@

  .episode-overview {

-    font-style: italic;
+    font-style : italic;
  }

  .episode-file-info {

-    margin-top: 30px;
-    font-size: 12px;
+    margin-top : 30px;
+    font-size  : 12px;
  }
 }

 .season-grid {
  .toggle-cell {
-    width: 10px;
+    width : 10px;
  }
 }

 .season-search {
  .clickable;
-  font-size: 24px;
+  font-size : 24px;
 }
--- a/UI/Shared/Styles/card.less
+++ b/UI/Shared/Styles/card.less
@ -1,10 +1,10 @@
+@import "/Content/prefixer";
+
 .card() {
-  margin :10px;
-  background-color: #ffffff;
-  padding: 10px;
-  box-shadow: 0px 0px 10px 1px #e1e1e1;
-  color: #444444;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  margin           : 10px;
+  background-color : #ffffff;
+  padding          : 10px;
+  color            : #444444;
+  .box-shadow( 0px 0px 10px 1px #e1e1e1);
+  .border-radius(3px);
 }