Icon replacements

couchpotato/core/plugins/movie/static/movie.actions.js

@@ -1,6 +1,6 @@
 var MovieAction = new Class({
 
-	class_name: 'action icon',
+	class_name: 'action icon2',
 
 	initialize: function(movie){
 		var self = this;
@@ -82,7 +82,7 @@ MA.Release = new Class({
 	create: function(){
 		var self = this;
 
-		self.el = new Element('a.releases.icon.download', {
+		self.el = new Element('a.releases.download', {
 			'title': 'Show the releases that are available for ' + self.movie.getTitle(),
 			'events': {
 				'click': self.show.bind(self)
@@ -147,11 +147,11 @@ MA.Release = new Class({
 					new Element('span.age', {'text': self.get(release, 'age')}),
 					new Element('span.score', {'text': self.get(release, 'score')}),
 					new Element('span.provider', { 'text': provider, 'title': provider }),
-					release.info['detail_url'] ? new Element('a.info.icon', {
+					release.info['detail_url'] ? new Element('a.info.icon2', {
 						'href': release.info['detail_url'],
 						'target': '_blank'
-					}) : null,
-					new Element('a.download.icon', {
+					}) : new Element('a'),
+					new Element('a.download.icon2', {
 						'events': {
 							'click': function(e){
 								(e).preventDefault();
@@ -160,7 +160,7 @@ MA.Release = new Class({
 							}
 						}
 					}),
-					new Element('a.delete.icon', {
+					new Element('a.delete.icon2', {
 						'events': {
 							'click': function(e){
 								(e).preventDefault();
@@ -243,13 +243,13 @@ MA.Release = new Class({
 			self.trynext_container = new Element('div.buttons.trynext').inject(self.movie.info_container);
 
 			self.trynext_container.adopt(
-				self.next_release ? [new Element('a.icon.readd', {
+				self.next_release ? [new Element('a.icon2.readd', {
 					'text': self.last_release ? 'Download another release' : 'Download the best release',
 					'events': {
 						'click': self.tryNextRelease.bind(self)
 					}
 				}),
-				new Element('a.icon.download', {
+				new Element('a.icon2.download', {
 					'text': 'pick one yourself',
 					'events': {
 						'click': function(){
@@ -257,7 +257,7 @@ MA.Release = new Class({
 						}
 					}
 				})] : null,
-				new Element('a.icon.completed', {
+				new Element('a.icon2.completed', {
 					'text': 'mark this movie done',
 					'events': {
 						'click': function(){
@@ -293,7 +293,7 @@ MA.Release = new Class({
 		var self = this;
 
 		var release_el = self.release_container.getElement('#release_'+release.id),
-			icon = release_el.getElement('.download.icon');
+			icon = release_el.getElement('.download.icon2');
 
 		self.movie.busy(true);
 

couchpotato/core/plugins/movie/static/movie.css

@@ -412,13 +412,14 @@
 
 		.movies .data .actions {
 			position: absolute;
-			bottom: 20px;
+			bottom: 17px;
 			right: 20px;
 			line-height: 0;
 			top: 0;
+			display: block;
+			width: auto;
 			opacity: 0;
 			display: none;
-			width: 0;
 		}
 			@media all and (max-width: 480px) {
 				.movies .data .actions {
@@ -429,7 +430,6 @@
 			.movies .movie:hover .data .actions {
 				opacity: 1;
 				display: inline-block;
-				width: auto;
 			}
 		
 			.movies.details_list .data .actions {
@@ -451,14 +451,24 @@
 			.movies .movie:hover .action:hover { opacity: 1; }
 
 			.movies .data .action {
-				background-repeat: no-repeat;
-				background-position: center;
 				display: inline-block;
-				width: 26px;
-				height: 26px;
-				padding: 3px;
+				height: 22px;
+				min-width: 33px;
+				padding: 0 5px;
+				line-height: 26px;
+				text-align: center;
+				font-size: 13px;
+				color: #FFF;
+				margin-left: 1px;
 			}
-			
+				.movies .data .action.trailer { color: #FFF; }
+				.movies .data .action.download { color: #b9dec0; }
+				.movies .data .action.edit { color: #c6b589; }
+				.movies .data .action.refresh { color: #cbeecc; }
+				.movies .data .action.delete { color: #e9b0b0; }
+				.movies .data .action.directory { color: #ffed92; }
+				.movies .data .action.readd { color: #c2fac5; }
+		
 			.movies.mass_edit_list .movie .data .actions {
 				display: none;
 			}
@@ -524,8 +534,10 @@
 						text-decoration: line-through;
 						color: rgba(255,255,255,0.4);
 					}
-					.movies .options .table .item.ignored .delete {
-						background-image: url('../images/icon.undo.png');
+					.movies .options .table .item.ignored .delete:before {
+						display: inline-block; 
+						content: "\e04b"; 
+						transform: scale(-1, 1);
 					}
 
 				.movies .options .table .item:last-child { border: 0; }
@@ -571,10 +583,12 @@
 							width: 30px !important;
 							height: 20px;
 							opacity: 0.8;
+							line-height: 25px;
 						}
-						.movies .options .table a:hover {
-							opacity: 1;
-						}
+						.movies .options .table a:hover { opacity: 1; }
+						.movies .options .table a.download { color: #a7fbaf; }
+						.movies .options .table a.delete { color: #fda3a3; }
+						.movies .options .table .ignored a.delete { color: #b5fda3; }
 
 				.movies .options .table .head > * {
 					font-weight: bold;
@@ -642,11 +656,10 @@
 				.movies .movie .trynext {
 					display: inline;
 					position: absolute;
-					right: 145px;
+					right: 180px;
 					z-index: 2;
 					opacity: 0;
 					background: #4e5969;
-					min-width: 300px;
 					text-align: right;
 					height: 100%;
 					top: 0;
@@ -659,7 +672,7 @@
 					}
 					.movies.mass_edit_list .trynext { display: none; }
 					.wanted .movies .movie .trynext {
-						padding-right: 50px;
+						padding-right: 30px;
 					}
 					.movies .movie:hover .trynext {
 						opacity: 1;
@@ -667,7 +680,7 @@
 					
 					.movies.details_list .movie .trynext {
 						background: #47515f;
-						padding: 2px 0;
+						padding: 0;
 						right: 0;
 						height: 25px;
 					}
@@ -678,8 +691,14 @@
 						margin-right: 10px;
 						color: #FFF;
 						height: 100%;
-						line-height: 30px;
+						line-height: 27px;
+						font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
 					}
+						.movies .movie .trynext a:before {
+							margin: 2px 0 0 -20px;
+							position: absolute;
+							font-family: 'Elusive-Icons';
+						}
 						.movies.details_list .movie .trynext a {
 							line-height: 23px;
 						}

couchpotato/core/plugins/movie/static/movie.js

@@ -139,9 +139,6 @@ var Movie = new Class({
 							'text': self.data.library.year || 'n/a'
 						})
 					),
-					self.rating = new Element('div.rating.icon', {
-						'text': self.data.library.rating
-					}),
 					self.description = new Element('div.description', {
 						'text': self.data.library.plot
 					}),
@@ -199,9 +196,6 @@ var Movie = new Class({
 				self.actions.adopt(action)
 		});
 
-		if(!self.data.library.rating)
-			self.rating.hide();
-
 	},
 
 	addQuality: function(quality_id){

couchpotato/core/plugins/profile/static/profile.css

@@ -13,11 +13,11 @@
 
 	.profile > .delete {
 		position: absolute;
-		padding: 25px 20px;
-		background-position: center;
+		padding: 16px;
 		right: 0;
 		cursor: pointer;
 		opacity: 0.6;
+		color: #fd5353;
 	}
 		.profile > .delete:hover {
 			opacity: 1;
@@ -29,6 +29,7 @@
 
 	.profile .qualities {
 		min-height: 80px;
+		padding-top: 0;
 	}
 
 	.profile .formHint {
@@ -97,11 +98,13 @@
 		}
 
 		.profile .types .type .delete {
-			background-position: left center;
 			height: 20px;
 			width: 20px;
+			line-height: 20px;
 			visibility: hidden;
 			cursor: pointer;
+			font-size: 13px;
+			color: #fd5353;
 		}
 
 		.profile .types .type:hover:not(.is_empty) .delete {

couchpotato/core/plugins/profile/static/profile.js

@@ -24,7 +24,7 @@ var Profile = new Class({
 		var data = self.data;
 
 		self.el = new Element('div.profile').adopt(
-			self.delete_button = new Element('span.delete.icon', {
+			self.delete_button = new Element('span.delete.icon2', {
 				'events': {
 					'click': self.del.bind(self)
 				}
@@ -256,7 +256,7 @@ Profile.Type = new Class({
 					}
 				})
 			),
-			new Element('span.delete.icon', {
+			new Element('span.delete.icon2', {
 				'events': {
 					'click': self.del.bind(self)
 				}

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;