Icon replacements

couchpotato/static/scripts/page/settings.js

@@ -862,7 +862,7 @@ Option.Directories = new Class({
 			$(dir).addClass('is_empty');
 
 		// Add remove button
-		new Element('a.icon.delete', {
+		new Element('a.icon2.delete', {
 			'events': {
 				'click': self.delItem.bind(self, dir)
 			}
@@ -1371,7 +1371,7 @@ Option.Combined = new Class({
 
 		item[value_empty == value_count ? 'addClass' : 'removeClass']('is_empty');
 
-		new Element('a.icon.delete', {
+		new Element('a.icon2.delete', {
 			'events': {
 				'click': self.deleteCombinedItem.bind(self)
 			}

couchpotato/static/style/main.css

@@ -108,7 +108,7 @@ body > .spinner, .mask{
 	}
 
 .button {
-    background: #5082bc url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpi/v//vwMTAwPDfzjBgMpFI/7hFSOT9Y8qRuF3JLoHAQIMAHYtMmRA+CugAAAAAElFTkSuQmCC") repeat-x;
+    background: #5082bc;
     padding: 5px 10px 6px;
     color: #fff;
     text-decoration: none;
@@ -154,6 +154,7 @@ body > .spinner, .mask{
 	line-height: 1;
 	-webkit-font-smoothing: antialiased;
 	font-size: 15px;
+	color: #FFF;
 }
 
 .icon2.cog:before { content: "\e109"; }
@@ -161,6 +162,30 @@ body > .spinner, .mask{
 .icon2.search:before { content: "\e03e"; }
 .icon2.return-key:before { content: "\e111"; }
 .icon2.close:before { content: "\e04e"; }
+.icon2.trailer:before { content: "\e0e9"; }
+.icon2.download:before { content: "\e0c3"; }
+.icon2.edit:before { content: "\e068"; }
+.icon2.refresh:before { content: "\e04f"; font-weight: bold; }
+.icon2.delete:before { content: "\e04e"; }
+.icon2.directory:before { content: "\e097"; }
+.icon2.completed:before { content: "\e070"; }
+.icon2.info:before { content: "\e089"; }
+.icon2.attention:before { content: "\e009"; }
+.icon2.readd:before { 
+	display: inline-block; 
+	content: "\e04b"; 
+	transform: scale(-1, 1);
+}
+.icon2.imdb:before {
+	content: "IMDb";
+	color: #444;
+	padding: 2px;
+	border-radius: 3px;
+	background-color: #fbec98;
+	font: bold 8px Arial;
+	position: relative;
+	top: -3px;
+}
 .icon2.menu:before { 
 	content: "\e076  \e076  \e076"; 
 	line-height: 6px;
@@ -502,14 +527,7 @@ body > .spinner, .mask{
 	.select .selection {
 		display: inline-block;
 		padding: 0 30px 0 20px;
-		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(
-		    180deg,
-		    #5b9bd1 0%,
-		    #406db8 100%
-		);
+		background: #5b9bd1 url('../images/sprite.png') no-repeat 94% -53px;
 	}
 
 		.select .selection .selectionDisplay {
@@ -529,11 +547,9 @@ body > .spinner, .mask{
 	.select .list {
 		display: none;
 	  	background: #282d34;
-	  	border: 1px solid #1f242b;
 		position: absolute;
-		margin: 28px 0 0 0;
+		margin: 25px 0 0 0;
 		box-shadow: 0 20px 20px -10px rgba(0,0,0,0.4);
-		border-radius:3px;
 		z-index: 3;
 	}
 		.select.active .list {

couchpotato/static/style/settings.css

@@ -252,7 +252,7 @@
 		display: block;
 		text-align: right;
 		height: 20px;
-		margin: 0 0 -37px;
+		margin: 0 0 -38px;
 	}
 		.page .advanced_toggle .check {
 			margin: 0;
@@ -262,18 +262,24 @@
 			color: #edc07f;
 		}
 
-	.page .directory {
+	.page form .directory {
 		display: inline-block;
 		padding: 0 4% 0 4px;
 		font-size: 13px;
 		width: 30%;
-		background-image: url('../images/icon.folder.gif');
-		background-repeat: no-repeat;
-		background-position: 97% center;
 		overflow: hidden;
 		vertical-align: top;
+		position: relative;
 	}
-		.page .directory > span {
+		.page form .directory:after {
+			content: "\e097";
+			position: absolute;
+			right: 7px;
+			top: 2px;
+			font-family: 'Elusive-Icons';
+			color: #f5e39c;
+		}
+		.page form .directory > span {
 			height: 25px;
 			display: inline-block;
 			float: right;
@@ -281,15 +287,19 @@
 			white-space: nowrap;
 			cursor: pointer;
 		}
+			.page form .directory span:empty:before {
+				content: 'No folder selected';
+				font-style: italic;
+				opacity: .3;
+			}
 
 	.page .directory_list {
 		z-index: 2;
 		position: absolute;
 		width: 450px;
-		margin: 28px 0 20px 18%;
+		margin: 28px 0 20px 18.4%;
 		background: #5c697b;
-		border-radius: 3px;
-		box-shadow: 0 0 50px rgba(0,0,0,0.55);
+		box-shadow: 0 20px 40px -20px rgba(0,0,0,0.55);
 	}
 
 		.page .directory_list .pointer {
@@ -299,7 +309,7 @@
 			display: block;
 			position: absolute;
 			width: 0px;
-			margin: -6px 0 0 22%;
+			margin: -6px 0 0 45%;
 		}
 
 	.page .directory_list ul {
@@ -311,11 +321,14 @@
 	}
 
 		.page .directory_list li {
-			padding: 4px 10px;
+			padding: 4px 30px 4px 10px;
 			cursor: pointer;
 			margin: 0 !important;
 			border-top: 1px solid rgba(255,255,255,0.1);
 			background: url('../images/right.arrow.png') no-repeat 98% center;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
 		}
 		.page .directory_list li:last-child {
 			border-bottom: 1px solid rgba(255,255,255,0.1);
@@ -341,7 +354,10 @@
 	.page .directory_list .actions {
 		clear: both;
 		padding: 4% 4% 2%;
-		min-height: 25px;
+		min-height: 45px;
+		position: relative;
+		width: 100%;
+		text-align: right;
 	}
 
 		.page .directory_list .actions label {
@@ -350,7 +366,7 @@
 			padding: 0;
 		}
 			.page .directory_list .actions .inlay {
-				margin: -2px 0 0 7px;
+				margin: 0 0 0 7px;
 			}
 
 		.page .directory_list .actions .back {
@@ -360,6 +376,9 @@
 			padding: 0;
 			line-height: 120%;
 			vertical-align: top;
+			position: absolute;
+			text-align: left;
+			left: 4%;
 		}
 
 	.page .directory_list .actions:last-child {
@@ -373,10 +392,10 @@
 		}
 
 		.page .directory_list .actions:last-child > .clear {
-			left: -90%;
-			position: relative;
-	background-color: #af3128;
-}
+			left: 4%;
+			position: absolute;
+			background-color: #af3128;
+		}
 
 		.page .directory_list .actions:last-child > .cancel {
 			font-weight: bold;
@@ -563,8 +582,10 @@
 		display: none;
 		width: 22px;
 		height: 22px;
+		line-height: 22px;
+		text-align: center;
 		vertical-align: middle;
-		background-position: left center;
+		color: #fe3d3d;
 	}
 	.page .combined_table .ctrlHolder:hover .delete {
 		display: inline-block;