Styling cleanup

couchpotato/static/scripts/library/prefix_free.js

@@ -1,5 +1,5 @@
 /**
- * StyleFix 1.0.2
+ * StyleFix 1.0.3
  * @author Lea Verou
  * MIT license
  */
@@ -52,8 +52,10 @@ var self = window.StyleFix = {
 						});
 
 						// behavior URLs shoudn’t be converted (Issue #19)
-						css = css.replace(RegExp('\\b(behavior:\\s*?url\\(\'?"?)' + base, 'gi'), '$1');
+						// base should be escaped before added to RegExp (Issue #81)
-					}
+						var escaped_base = base.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");
+						css = css.replace(RegExp('\\b(behavior:\\s*?url\\(\'?"?)' + escaped_base, 'gi'), '$1');
+						}
 					
 					var style = document.createElement('style');
 					style.textContent = css;
@@ -63,6 +65,8 @@ var self = window.StyleFix = {
 					
 					parent.insertBefore(style, link);
 					parent.removeChild(link);
+					
+					style.media = link.media; // Duplicate is intentional. See issue #31
 				}
 		};
 
@@ -84,6 +88,9 @@ var self = window.StyleFix = {
 	},
 
 	styleElement: function(style) {
+		if (style.hasAttribute('data-noprefix')) {
+			return;
+		}
 		var disabled = style.disabled;
 		
 		style.textContent = self.fix(style.textContent, true, style);
@@ -150,7 +157,7 @@ function $(expr, con) {
 })();
 
 /**
- * PrefixFree 1.0.5
+ * PrefixFree 1.0.6
  * @author Lea Verou
  * MIT license
  */
@@ -160,36 +167,39 @@ if(!window.StyleFix || !window.getComputedStyle) {
 	return;
 }
 
+// Private helper
+function fix(what, before, after, replacement, css) {
+	what = self[what];
+	
+	if(what.length) {
+		var regex = RegExp(before + '(' + what.join('|') + ')' + after, 'gi');
+
+		css = css.replace(regex, replacement);
+	}
+	
+	return css;
+}
+
 var self = window.PrefixFree = {
 	prefixCSS: function(css, raw) {
 		var prefix = self.prefix;
 		
-		function fix(what, before, after, replacement) {
+		css = fix('functions', '(\\s|:|,)', '\\s*\\(', '$1' + prefix + '$2(', css);
-			what = self[what];
+		css = fix('keywords', '(\\s|:)', '(\\s|;|\\}|$)', '$1' + prefix + '$2$3', css);
-			
+		css = fix('properties', '(^|\\{|\\s|;)', '\\s*:', '$1' + prefix + '$2:', css);
-			if(what.length) {
-				var regex = RegExp(before + '(' + what.join('|') + ')' + after, 'gi');
-
-				css = css.replace(regex, replacement);
-			}
-		}
-		
-		fix('functions', '(\\s|:|,)', '\\s*\\(', '$1' + prefix + '$2(');
-		fix('keywords', '(\\s|:)', '(\\s|;|\\}|$)', '$1' + prefix + '$2$3');
-		fix('properties', '(^|\\{|\\s|;)', '\\s*:', '$1' + prefix + '$2:');
 		
 		// Prefix properties *inside* values (issue #8)
 		if (self.properties.length) {
 			var regex = RegExp('\\b(' + self.properties.join('|') + ')(?!:)', 'gi');
 			
-			fix('valueProperties', '\\b', ':(.+?);', function($0) {
+			css = fix('valueProperties', '\\b', ':(.+?);', function($0) {
 				return $0.replace(regex, prefix + "$1")
-			});
+			}, css);
 		}
 		
 		if(raw) {
-			fix('selectors', '', '\\b', self.prefixSelector);
+			css = fix('selectors', '', '\\b', self.prefixSelector, css);
-			fix('atrules', '@', '\\b', '@' + prefix + '$1');
+			css = fix('atrules', '@', '\\b', '@' + prefix + '$1', css);
 		}
 		
 		// Fix double prefixing
@@ -198,11 +208,25 @@ var self = window.PrefixFree = {
 		return css;
 	},
 	
-	// Warning: prefixXXX functions prefix no matter what, even if the XXX is supported prefix-less
+	property: function(property) {
+		return (self.properties.indexOf(property)? self.prefix : '') + property;
+	},
+	
+	value: function(value, property) {
+		value = fix('functions', '(^|\\s|,)', '\\s*\\(', '$1' + self.prefix + '$2(', value);
+		value = fix('keywords', '(^|\\s)', '(\\s|$)', '$1' + self.prefix + '$2$3', value);
+		
+		// TODO properties inside values
+		
+		return value;
+	},
+	
+	// Warning: Prefixes no matter what, even if the selector is supported prefix-less
 	prefixSelector: function(selector) {
 		return selector.replace(/^:{1,2}/, function($0) { return $0 + self.prefix })
 	},
 	
+	// Warning: Prefixes no matter what, even if the property is supported prefix-less
 	prefixProperty: function(property, camelCase) {
 		var prefixed = self.prefix + property;
 		
@@ -334,7 +358,9 @@ var keywords = {
 	'zoom-out': 'cursor',
 	'box': 'display',
 	'flexbox': 'display',
-	'inline-flexbox': 'display'
+	'inline-flexbox': 'display',
+	'flex': 'display',
+	'inline-flex': 'display'
 };
 
 self.functions = [];

couchpotato/static/style/main.css

@@ -21,9 +21,9 @@ body {
 	}
 
 * {
-  -moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
+ 	   -moz-box-sizing: border-box;
-  box-sizing: border-box;
+			box-sizing: border-box;
 }
 
 pre {
@@ -267,10 +267,9 @@ body > .spinner, .mask{
 		font-size: 8px;
 		margin: -5px 0 0 15px;
 		box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 3px rgba(0,0,0,.7);
-		background: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.3)), to(rgba(255,255,255,.1)));
-		background: -moz-linear-gradient(center bottom, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 100%);
 		background-color: #1b79b8;
 		text-shadow: none;
+		background-image: linear-gradient(0deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 100%);
 	}
 
 	.header .notification_menu .wrapper {
@@ -354,16 +353,8 @@ 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, -webkit-gradient(
+		    270deg,
-		    linear,
-		    left bottom,
-		    left top,
-		    color-stop(0, #406db8),
-		    color-stop(1, #5b9bd1)
-		);
-		background: url('../images/sprite.png') no-repeat 94% -53px, -moz-linear-gradient(
-		    center top,
 		    #5b9bd1 0%,
 		    #406db8 100%
 		);
@@ -448,15 +439,8 @@ 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: -webkit-gradient(
+	background-image: linear-gradient(
-	    linear,
+	    90deg,
-	    left bottom,
-	    left top,
-	    color-stop(0, rgb(55,62,74)),
-	    color-stop(1, rgb(73,83,98))
-	);
-	background-image: -moz-linear-gradient(
-	    center bottom,
 	    rgb(55,62,74) 0%,
 	    rgb(73,83,98) 100%
 	);
@@ -544,15 +528,8 @@ body > .spinner, .mask{
 		text-align: center;
 		color: #000;
 		text-shadow: none;
-		background-image: -webkit-gradient(
+		background-image: linear-gradient(
-		    linear,
+		    45deg,
-		    left bottom,
-		    right top,
-		    color-stop(0, rgb(200,200,200)),
-		    color-stop(1, rgb(255,255,255))
-		);
-		background-image: -moz-linear-gradient(
-		    left bottom,
 		    rgb(200,200,200) 0%,
 		    rgb(255,255,255) 100%
 		);

couchpotato/static/style/page/settings.css

@@ -16,17 +16,9 @@
 		padding: 40px 0;
 		margin: 0;
 		min-height: 470px;
-
+		background-image: linear-gradient(
-		background-image: -webkit-gradient(
+		    20deg,
-		    linear,
+		    rgba(0,0,0,0) 50%,
-		    right top,
-		    40% 4%,
-		    color-stop(0, rgba(0,0,0, 0.3)),
-		    color-stop(1, rgba(0,0,0, 0))
-		);
-		background-image: -moz-linear-gradient(
-		    10% 0% 16deg,
-		    rgba(0,0,0,0) 0%,
 		    rgba(0,0,0,0.3) 100%
 		);
 	}
@@ -364,30 +356,16 @@
 				border-radius: 2px;
 			}
 			.page .tag_input > ul:hover > li.choice {
-				background: -webkit-gradient(
+				background: linear-gradient(
-				    linear,
+				    270deg,
-				    left bottom,
-				    left top,
-				    color-stop(0, rgba(255,255,255,0.1)),
-				    color-stop(1, rgba(255,255,255,0.3))
-				);
-				background: -moz-linear-gradient(
-				    center top,
 				    rgba(255,255,255,0.3) 0%,
 				    rgba(255,255,255,0.1) 100%
 				);
 			}
 			.page .tag_input > ul > li.choice:hover,
 			.page .tag_input > ul > li.choice.selected {
-				background: -webkit-gradient(
+				background: linear-gradient(
-				    linear,
+				    270deg,
-				    left bottom,
-				    left top,
-				    color-stop(0, #406db8),
-				    color-stop(1, #5b9bd1)
-				);
-				background: -moz-linear-gradient(
-				    center top,
 				    #5b9bd1 0%,
 				    #406db8 100%
 				);
@@ -425,15 +403,8 @@
 				margin: -9px 0 0 -16px;
 				border-radius: 30px 30px 0 0;
 				cursor: pointer;
-				background: url('../../images/icon.delete.png') no-repeat center 2px, -webkit-gradient(
+				background: url('../../images/icon.delete.png') no-repeat center 2px, -webkit-linear-gradient(
-				    linear,
+				   270deg,
-				    left bottom,
-				    left top,
-				    color-stop(0, #5b9bd1),
-				    color-stop(1, #5b9bd1)
-				);
-				background: url('../../images/icon.delete.png') no-repeat center 2px, -moz-linear-gradient(
-				    center top,
 				    #5b9bd1 0%,
 				    #5b9bd1 100%
 				);

couchpotato/templates/_desktop.html

@@ -10,9 +10,7 @@
 
 		<script type="text/javascript" src="{{ url_for('web.static', filename='scripts/library/mootools.js') }}"></script>
 		<script type="text/javascript" src="{{ url_for('web.static', filename='scripts/library/mootools_more.js') }}"></script>
-		{% if not env.get('dev') %}
 		<script type="text/javascript" src="{{ url_for('web.static', filename='scripts/library/prefix_free.js') }}"></script>
-		{% endif %}
 		<script type="text/javascript" src="{{ url_for('web.static', filename='scripts/library/uniform.js') }}"></script>
 		<script type="text/javascript" src="{{ url_for('web.static', filename='scripts/library/form_replacement/form_check.js') }}"></script>
 		<script type="text/javascript" src="{{ url_for('web.static', filename='scripts/library/form_replacement/form_radio.js') }}"></script>