Use autoprefixer to create vendor prefixes for css automatically, eliminating need for vendor prefixes in code.

Update autoprefixer browser support. Add make command to see prefix outputs.

Remove vendor prefixes - handled by autoprefixer.

Rearrange elements.

Rearrange elements.

Makefile

@@ -25,6 +25,7 @@ CONFIG_PATH ?= /etc
 
 VENDOR = "$(CURDIR)/vendor"
 GOPATH = "$(VENDOR):$(CURDIR)"
+
 SYSTEM_GOPATH := /usr/share/gocode/src/
 OUTPUT := $(CURDIR)/bin
 OUTPUT_JS := $(CURDIR)/build/out
@@ -48,6 +49,11 @@ NODEJS_BIN_EXISTS := $(shell [ -x "$(NODEJS_BIN)" ] && echo 1 || echo 0)
 ifneq ($(NODEJS_BIN_EXISTS), 1)
     $(error "Can't find node.js runtime, please install / check your PATH")
 endif
+NPM_BIN_PATH := $(shell npm bin)
+
+# Tools
+AUTOPREFIXER := autoprefixer
+AUTOPREFIXER_BROWSER_SUPPORT := "> 1%, last 2 versions, Firefox ESR, Opera 12.1, Opera 12.0"
 
 build: get binary assets
 
@@ -83,11 +89,15 @@ assets: styles javascript
 styles:
 		sass --compass --scss $(SASSFLAGS) \
 			$(CURDIR)/src/styles/main.scss:$(CURDIR)/static/css/main.min.css
+		$(NPM_BIN_PATH)/$(AUTOPREFIXER) --browsers $(AUTOPREFIXER_BROWSER_SUPPORT) $(CURDIR)/static/css/main.min.css
 		sass --compass --scss $(SASSFLAGS) \
 			$(CURDIR)/src/styles/bootstrap.scss:$(CURDIR)/static/css/bootstrap.min.css
 		sass --compass --scss $(SASSFLAGS) \
 			$(CURDIR)/src/styles/font-awesome.scss:$(CURDIR)/static/css/font-awesome.min.css
 
+style-vendor-prefix-info:
+		$(NPM_BIN_PATH)/$(AUTOPREFIXER) --browsers $(AUTOPREFIXER_BROWSER_SUPPORT) --info
+
 releaseassets: RJSFLAGS = generateSourceMaps=false preserveLicenseComments=true
 releaseassets: SASSFLAGS = --style=compressed --no-cache
 releaseassets: dist_gopath assets

README.md

@@ -10,10 +10,11 @@ The latest version of Spreed Speak Freely can be found on GitHub:
 
   - [Go](http://golang.org) >= 1.1.0
   - [NodeJS](http://nodejs.org/)
+      + [autoprefixer](https://www.npmjs.org/package/autoprefixer)
+      + [po2json](https://github.com/mikeedwards/po2json)
   - [Sass](http://sass-lang.com/) >= 3.2.0
   - [Compass](http://compass-style.org/)
   - [Babel](http://babel.pocoo.org/)
-  - [po2json](https://github.com/mikeedwards/po2json)
   - make
 
 

src/styles/components/_audiolevel.scss

@@ -29,19 +29,15 @@
   z-index: 6;
   .audio-level {
     background: #9dd53a; /* Old browsers */
-    background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
+    background: gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
     background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
+    border-radius: 0 0 2px 2px;
     height: 4px;
-    position: absolute;
-    margin: 0 auto;
     left: 0;
+    margin: 0 auto;
+    position: absolute;
     right: 0;
+    transition: width 0.05s ease-in-out;
     width: 0;
-    @include border-radius(0 0 2px 2px);
-    @include transition(width 0.05s ease-in-out);
   }
 }

src/styles/components/_bar.scss

@@ -29,21 +29,19 @@
 }
 
 .bar {
-  // without height bar jumps and disappears on reload
-  // use em to scale with text.
-  height: #{$minbarheight/$base-font-size}em;
   background-color: $componentbg;
+  box-shadow: 0 2px 10px 0 $componentfg3;
   color: $componentfg1;
   font: bold 1em/40px $font-sans-serif;
+  // without height bar jumps and disappears on reload, use em to scale with text.
+  height: #{$minbarheight/$base-font-size}em;
   text-align: center;
-  // @include adjust-leading-to(2);
+  touch-callout: none;
-  @include box-shadow(0 2px 10px 0 $componentfg3);
+  user-select: none;
   // @include debug-vertical-alignment();
-  @include touch-callout(none);
-  @include user-select(none);
   @include breakpt($breakpoint-medium) {
     z-index: 40;
-    @include box-shadow(none);
+    box-shadow: none;
   }
   .btn {
     position: relative;
@@ -66,7 +64,6 @@
     text-align: left;
     width: 90px;
     vertical-align: middle;
-    // @include adjust-font-size-to(11px,0.4);
     span {
       font-style: italic;
       left: 38px;
@@ -166,11 +163,10 @@
     padding: 0;
     text-align: center;
     width: 42px;
-    // @include adjust-font-size-to(24px);
     &:focus {
       border: none;
       outline: none;
-      @include box-shadow(0);
+      box-shadow: 0;
     }
     &:hover {
       background-color: none;

src/styles/global/_animations.scss

@@ -28,7 +28,7 @@
   &.ng-hide-add {
     opacity: 1;
     display: block !important;
-    @include transition(all linear 0.5s);
+    transition: all linear 0.5s;
     &.ng-hide-add-active {
       opacity: 0;
     }
@@ -36,7 +36,7 @@
   &.ng-hide-remove {
     opacity: 0;
     display: block !important;
-    @include transition(all linear 0.5s);
+    transition: all linear 0.5s;
     &.ng-hide-remove-active {
       opacity: 1;
     }

src/styles/global/_base.scss

@@ -100,8 +100,8 @@ a {
   right: 15%;
   top: 15%;
   z-index: 20000;
-  @include transition-property(opacity);
+  transition-property: opacity;
-  @include transition-duration(.5s);
+  transition-duration: .5s;
   div {
     color: $lighter-text;
     display: block;
@@ -124,7 +124,7 @@ a {
   position: absolute;
   right: 0;
   top: 44px;
-  @include user-select(none);
+  user-select: none;
 }
 
 .welcome {

src/styles/global/_mixins.scss

@@ -4,54 +4,3 @@
     @content;
   }
 }
-
-@mixin user-select($select) {
-  -khtml-user-select: $select;
-  -moz-user-select: $select;
-  -ms-user-select: $select;
-  -o-user-select: $select;
-  -webkit-user-select: $select;
-  user-select: $select;
-}
-
-@mixin touch-callout($callout) {
-  -webkit-touch-callout: $callout;
-}
-
-@mixin box-shadow($shadow) {
-  -webkit-box-shadow: $shadow;
-  box-shadow: $shadow;
-}
-
-@mixin transition-property($property) {
-  transition-property: $property;
-  -webkit-transition-property: $property;
-}
-
-@mixin transition-duration($duration) {
-  transition-duration: $duration;
-  -webkit-transition-duration: $duration;
-}
-
-@mixin transition($transition) {
-  transition: $transition;
-  -moz-transition: $transition;
-  -o-transition: $transition;
-  -webkit-transition: $transition;
-}
-
-@mixin border-radius($radius) {
-  border-radius: $radius;
-  -moz-border-radius: $radius;
-  -webkit-border-radius: $radius;
-}
-
-@mixin linear-gradient($gradient...) {
-  background: #9dd53a; /* Old browsers */
-  background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
-  background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
-  background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
-  background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
-}

src/styles/global/_overlaybar.scss

@@ -26,8 +26,8 @@
   padding: 3px 8px 0 30px;
   position: absolute;
   text-shadow: 0 0 5px black;
+  user-select: none;
   vertical-align: middle;
-  @include user-select(none);
 }
 
 .overlaybar {

src/styles/global/_variables.scss

@@ -45,6 +45,8 @@ $breakpoint-medium: 700px;
 $breakpoint-large: 1280px;
 
 $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
+
+// compass
 $base-font-size: 13px;
 $base-line-height: 19px;
 

src/styles/main.scss

@@ -22,8 +22,6 @@
 // must set custom compass variables before import of compass
 @import "global/variables";
 @import "compass";
-// auto import of user-interface not in css3 partial of compass 12.2
-@import "compass/css3/user-interface";
 @import "libs/libs";
 
 @import "global/mixins";