CSS gradient "fix"

couchpotato/static/scripts/library/prefix_free.js

@@ -1,5 +1,5 @@
 /**
- * StyleFix 1.0.3
+ * StyleFix 1.0.3 & PrefixFree 1.0.7
  * @author Lea Verou
  * MIT license
  */
@@ -122,9 +122,9 @@ var self = window.StyleFix = {
 			.splice(index === undefined? self.fixers.length : index, 0, fixer);
 	},
 	
-	fix: function(css, raw) {
+	fix: function(css, raw, element) {
 		for(var i=0; i<self.fixers.length; i++) {
-			css = self.fixers[i](css, raw) || css;
+			css = self.fixers[i](css, raw, element) || css;
 		}
 		
 		return css;
@@ -157,11 +157,9 @@ function $(expr, con) {
 })();
 
 /**
- * PrefixFree 1.0.6
- * @author Lea Verou
- * MIT license
+ * PrefixFree
  */
-(function(root, undefined){
+(function(root){
 
 if(!window.StyleFix || !window.getComputedStyle) {
 	return;
@@ -181,9 +179,17 @@ function fix(what, before, after, replacement, css) {
 }
 
 var self = window.PrefixFree = {
-	prefixCSS: function(css, raw) {
+	prefixCSS: function(css, raw, element) {
 		var prefix = self.prefix;
 		
+		// Gradient angles hotfix
+		if(self.functions.indexOf('linear-gradient') > -1) {
+			// Gradients are supported with a prefix, convert angles to legacy
+			css = css.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig, function ($0, delim, repeating, deg) {
+				return delim + (repeating || '') + 'linear-gradient(' + (90-deg) + 'deg';
+			});
+		}
+		
 		css = fix('functions', '(\\s|:|,)', '\\s*\\(', '$1' + prefix + '$2(', css);
 		css = fix('keywords', '(\\s|:)', '(\\s|;|\\}|$)', '$1' + prefix + '$2$3', css);
 		css = fix('properties', '(^|\\{|\\s|;)', '\\s*:', '$1' + prefix + '$2:', css);
@@ -205,6 +211,9 @@ var self = window.PrefixFree = {
 		// Fix double prefixing
 		css = css.replace(RegExp('-' + prefix, 'g'), '-');
 		
+		// Prefix wildcard
+		css = css.replace(/-\*-(?=[a-z]+)/gi, self.prefix);
+		
 		return css;
 	},
 	

couchpotato/static/style/main.css

@@ -271,7 +271,7 @@ body > .spinner, .mask{
 		box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 3px rgba(0,0,0,.7);
 		background-color: #1b79b8;
 		text-shadow: none;
-		background-image: linear-gradient(0deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 100%);
+		background-image: -*-linear-gradient(0deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 100%);
 	}
 
 	.header .notification_menu .wrapper {
@@ -355,7 +355,7 @@ body > .spinner, .mask{
 		border-radius:30px;
 
 		box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20);
-		background: url('../images/sprite.png') no-repeat 94% -53px, linear-gradient(
+		background: url('../images/sprite.png') no-repeat 94% -53px, -*-linear-gradient(
 		    270deg,
 		    #5b9bd1 0%,
 		    #406db8 100%
@@ -431,7 +431,7 @@ body > .spinner, .mask{
 	border: 1px solid #252930;
 	box-shadow: inset 0 1px 0px rgba(255,255,255,0.20), 0 0 3px rgba(0,0,0, 0.2);
 	background: rgb(55,62,74);
-	background-image: linear-gradient(
+	background-image: -*-linear-gradient(
 	    90deg,
 	    rgb(55,62,74) 0%,
 	    rgb(73,83,98) 100%
@@ -520,7 +520,7 @@ body > .spinner, .mask{
 		text-align: center;
 		color: #000;
 		text-shadow: none;
-		background-image: linear-gradient(
+		background-image: -*-linear-gradient(
 		    45deg,
 		    rgb(200,200,200) 0%,
 		    rgb(255,255,255) 100%
@@ -592,7 +592,7 @@ body > .spinner, .mask{
 		overflow: hidden;
 		transition: all .6s cubic-bezier(0.9,0,0.1,1);
 		box-shadow: 0 1px 1px rgba(0,0,0,0.35), inset 0 1px 0px rgba(255,255,255,0.20);
-		background-image: linear-gradient(
+		background-image: -*-linear-gradient(
 		    270deg,
 		    #5b9bd1 0%,
 		    #406db8 100%

couchpotato/static/style/page/settings.css

@@ -16,7 +16,7 @@
 		padding: 40px 0;
 		margin: 0;
 		min-height: 470px;
-		background-image: linear-gradient(
+		background-image: -*-linear-gradient(
 		    20deg,
 		    rgba(0,0,0,0) 50%,
 		    rgba(0,0,0,0.3) 100%
@@ -365,7 +365,7 @@
 				border-radius: 2px;
 			}
 			.page .tag_input > ul:hover > li.choice {
-				background: linear-gradient(
+				background: -*-linear-gradient(
 				    270deg,
 				    rgba(255,255,255,0.3) 0%,
 				    rgba(255,255,255,0.1) 100%
@@ -373,7 +373,7 @@
 			}
 			.page .tag_input > ul > li.choice:hover,
 			.page .tag_input > ul > li.choice.selected {
-				background: linear-gradient(
+				background: -*-linear-gradient(
 				    270deg,
 				    #5b9bd1 0%,
 				    #406db8 100%
@@ -412,7 +412,7 @@
 				margin: -9px 0 0 -16px;
 				border-radius: 30px 30px 0 0;
 				cursor: pointer;
-				background: url('../../images/icon.delete.png') no-repeat center 2px, linear-gradient(
+				background: url('../../images/icon.delete.png') no-repeat center 2px, -*-linear-gradient(
 				   270deg,
 				    #5b9bd1 0%,
 				    #5b9bd1 100%