New design

index.html

@@ -45,8 +45,11 @@
 				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#plus"></use></svg>
 			</a>
 			<a class="button_divider"></a>
-			<input id="search" type="text" name="search" placeholder="Search …">
-			<a id="clearSearch">&times;</a>
+			<a class="button right" id="button_search" title="Search">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#magnifying-glass"></use></svg>
+			</a>
+			<!-- <input id="search" type="text" name="search" placeholder="Search …">
+			<a id="clearSearch">&times;</a> -->
 		</div>
 		<div class="toolbar" id="tools_album">
 			<a class="button left" id="button_back_home" title="Close Album">

src/scripts/build.coffee

@@ -59,10 +59,10 @@ build.album = (data) ->
 
 	if lychee.publicMode is false
 
-		if data.star is '1' then		html += "<a class='badge icon-star'></a>"
-		if data.public is '1' then		html += "<a class='badge icon-share'></a>"
-		if data.unsorted is '1' then	html += "<a class='badge icon-reorder'></a>"
-		if data.recent is '1' then		html += "<a class='badge icon-time'></a>"
+		if data.star is '1' then		html += "<a class='badge'>#{ build.iconic('star') }</a>"
+		if data.public is '1' then		html += "<a class='badge'>#{ build.iconic('eye') }</a>"
+		if data.unsorted is '1' then	html += "<a class='badge'>#{ build.iconic('list') }</a>"
+		if data.recent is '1' then		html += "<a class='badge'>#{ build.iconic('clock') }</a>"
 
 	html += "</div>"
 
@@ -94,8 +94,8 @@ build.photo = (data) ->
 
 	html += "</div>"
 
-	if data.star is '1' then html += "<a class='badge icon-star'></a>"
-	if lychee.publicMode is false and data.public is '1' and album.json.public isnt '1' then html += "<a class='badge icon-share'></a>"
+	if data.star is '1' then html += "<a class='badge'>#{ build.iconic('star') }</a>"
+	if lychee.publicMode is false and data.public is '1' and album.json.public isnt '1' then html += "<a class='badge'>#{ build.iconic('eye') }</a>"
 
 	html += "</div>"
 

src/styles/_content.scss

@@ -8,22 +8,6 @@
 	width: 100%;
 	min-height: calc(100% - 90px);
 	-webkit-overflow-scrolling: touch;
-
- 	// Adds a gradient to the top
-	&::before {
-		content: '';
-		position: absolute;
-		left: 0px;
-		width: 100%;
-		height: 20px;
-		background: linear-gradient(to bottom, #262626, #222);
-		border-top: 1px solid #333;
-	}
-
-	// Removes the gradient when using the view
-	&.view::before {
-		display: none;
-	}
 }
 
 	/* Photo ------------------------------------------------*/
@@ -70,7 +54,7 @@
 			height: 200px;
 			background-color: #222;
 			border-radius: 2px;
-			border: 2px solid #ccc;
+			border: 2px solid #bbb;
 
 			&:first-child,
 			&:nth-child(2) {
@@ -91,7 +75,7 @@
 
 		&:hover img,
 		&.active img {
-			box-shadow: 0 0 5px #005ecc;
+			box-shadow: 0 0 3px #2293EC;
 		}
 	}
 
@@ -150,12 +134,11 @@
 	.album .badge,
 	.photo .badge {
 		position: absolute;
-		margin-top: -1px;
-		margin-left: 12px;
+		margin: -1px 0 0 12px;
 		padding: 12px 7px 3px 7px;
-		background: linear-gradient(to bottom, #d64b4b 0%, #ab2c2c 100%);
-		box-shadow: 0 0 3px rgba(0, 0, 0, .8);
-		border-radius: 0 0 3px 3px;
+		box-shadow: 0 0 2px rgba(0, 0, 0, .6);
+		background: #d02a32;
+		border-radius: 0 0 5px 5px;
 		border: 1px solid #fff;
 		border-top: none;
 		color: #fff;
@@ -163,55 +146,23 @@
 		text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
 		opacity: .9;
 
-		&::after {
-			content: '';
-			position: absolute;
-			margin-top: -12px;
-			margin-left: -26px;
-			width: 38px;
-			height: 5px;
-			background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
-			opacity: .4;
-		}
+		&:nth-child(2n) { margin-left: 57px; }
 
-		&:nth-child(2n) {
-			margin-left: 57px;
+		.iconic {
+			fill: #fff;
+			width: 21px;
+			filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .1) );
 		}
 	}
 
-	.album .badge.icon-star,
-	.photo .badge.icon-star {
-		padding: 12px 8px 3px 8px;
-
-		&::after { margin-left: -29px; }
-	}
-
-	.album .badge.icon-share,
-	.photo .badge.icon-share {
-		padding: 12px 6px 3px 8px;
-
-		&::after { margin-left: -31px; }
-	}
-
-	.album .badge.icon-time,
-	.photo .badge.icon-time {
-		padding: 12px 8px 3px 9px;
-
-		::after { margin-left: -29px; }
-	}
-
-	.album .badge.icon-reorder::after {
-		margin-left: -30px;
-	}
-
 	/* Divider ------------------------------------------------*/
 	.divider {
 		float: left;
+		margin: 50px 0 0;
+		padding: 10px 0;
 		width: 100%;
-		margin-top: 50px;
 		opacity: 0;
-		border-top: 1px solid rgba(255, 255, 255, .03);
-		box-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+		background: rgba(0, 0, 0, .15);
 
 		&:first-child {
 			margin-top: 0;
@@ -220,11 +171,10 @@
 
 		h1 {
 			float: left;
-			margin: 20px 0 0 30px;
-			color: #fff;
+			margin: 0 0 0 30px;
+			color: rgba(255, 255, 255, .6);
 			font-size: 14px;
 			font-weight: bold;
-			text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
 		}
 	}
 
@@ -238,8 +188,8 @@
 		margin-top: -60px;
 		margin-left: -90px;
 		padding-top: 20px;
-		color: rgba(20, 20, 20, 1);
-		text-shadow: 0px 1px 0px rgba(255, 255, 255, .05);
+		color: rgba(15, 15, 15, 1);
+		text-shadow: 0px 1px 0px rgba(255, 255, 255, .01);
 		text-align: center;
 
 		.icon {

src/styles/_contextmenu.scss

@@ -6,23 +6,20 @@
 .basicContext {
 
 	padding: 5px 0 6px;
-	background: linear-gradient(to bottom, #444 0%, #2f2f2f 100%);
-	border: 1px solid rgba(0, 0, 0, .5);
-	border-bottom: 1px solid rgba(0, 0, 0, .6);
+	background: linear-gradient(to bottom, #333, #252525);
+	border: 1px solid rgba(0, 0, 0, .7);
+	border-bottom: 1px solid rgba(0, 0, 0, .8);
 	border-radius: 5px;
-	box-shadow: 0 1px 4px rgba(0, 0, 0, .15), inset 0px 1px 0px rgba(255, 255, 255, .08);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .05);
 
 	/* Item ------------------------------------------------*/
 	tr {
 		margin-bottom: 2px;
 		color: #eee;
 		font-size: 14px;
-		text-shadow: 0 -1px 0px rgba(0, 0, 0, .2);
+		text-shadow: 0 -1px 0px rgba(0, 0, 0, .1);
 
-		&.separator {
-			background-color: rgba(0, 0, 0, .2);
-			border-bottom: 1px solid rgba(255, 255, 255, .1);
-		}
+		&.separator { background-color: rgba(0, 0, 0, .3); }
 	}
 
 		tr td {
@@ -32,9 +29,7 @@
 			border-radius: 0;
 			transition: none;
 
-			&:hover {
-				background: linear-gradient(to bottom, #6a84f2, #4967F0);
-			}
+			&:hover { background: linear-gradient(to bottom, #2293EC, darken(#2293EC, 2%)); }
 		}
 
 			tr td .albumCover {

src/styles/_header.scss

@@ -7,8 +7,8 @@ header {
 	position: fixed;
 	height: 49px;
 	width: 100%;
-	background: linear-gradient(to bottom, #3E3E3E, #282828);
-	border-bottom: 1px solid #161616;
+	background: linear-gradient(to bottom, #222222, #1a1a1a);
+	border-bottom: 1px solid #0f0f0f;
 	z-index: 1;
 	transition: transform .3s ease-out;
 
@@ -29,15 +29,7 @@ header {
 		background: none;
 		border-bottom: none;
 
-		&.error {
-			background-color: rgba(10, 10, 10, .99);
-		}
-
-		.button,
-		#title,
-		.tools {
-			text-shadow: none !important;
-		}
+		&.error { background-color: rgba(10, 10, 10, .99); }
 	}
 
 	/* Title ------------------------------------------------*/
@@ -50,7 +42,7 @@ header {
 		font-size: 16px;
 		font-weight: bold;
 		text-align: center;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
 
 		&.editable { cursor: pointer; }
 	}
@@ -68,7 +60,7 @@ header {
 	/* Button ------------------------------------------------*/
 	.button {
 		display: inline-block;
-		padding: 16px 8px 12px;
+		padding: 17px 8px 15px;
 		width: 15px;
 		cursor: pointer;
 
@@ -77,7 +69,7 @@ header {
 		&.right { float: right; }
 
 		.iconic {
-			fill: #888;
+			fill: #aaa;
 			filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) );
 			transition: fill .2s ease;
 		}
@@ -106,10 +98,9 @@ header {
 		width: 80px;
 		margin: 12px 12px 0 0;
 		padding: 5px 12px 6px 12px;
-		background-color: #383838;
+		background-color: #222;
 		color: #fff;
-		border: 1px solid rgba(0, 0, 0, .6);
-		box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
+		border: 0;
 		outline: none;
 		border-radius: 50px;
 		opacity: .6;
@@ -144,14 +135,12 @@ header {
 		margin: 13px 9px;
 		color: #888;
 		font-size: 13px;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
+		border-radius: 100px;
 		display: none;
 		cursor: pointer;
 
-		&:hover {
-			background-color: rgba(0, 0, 0, .2);
-			border-radius: 100px;
-		}
+		&:hover { background-color: rgba(0, 0, 0, .3); }
 	}
 
 }

src/styles/_infobox.scss

@@ -19,8 +19,8 @@
 	right: -370px;
 	width: 350px;
 	height: 100%;
-	background-color: rgba(20, 20, 20, .98);
-	box-shadow: -1px 0 2px rgba(0, 0, 0, .8);
+	background-color: rgba(30, 30, 30, .98);
+	box-shadow: -1px 0 2px rgba(0, 0, 0, .7);
 	transform: translateX(0);
 	transition: transform .3s cubic-bezier(.51, .92, .24, 1.15);
 
@@ -54,8 +54,8 @@
 		float: left;
 		height: 49px;
 		width: 100%;
-		background-image: linear-gradient(to bottom, #2A2A2A, #131313);
-		border-bottom: 1px solid rgba(0, 0, 0, .7);
+		background: linear-gradient(to bottom, #1f1f1f, #1a1a1a);
+		border-bottom: 1px solid #0f0f0f;
 	}
 
 	.header h1 {
@@ -66,7 +66,7 @@
 		font-size: 16px;
 		font-weight: bold;
 		text-align: center;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
+		text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
 	}
 
 	.header .close {
@@ -88,21 +88,15 @@
 	/* Seperator ------------------------------------------------*/
 	.separator {
 		float: left;
+		padding: 8px 0;
 		width: 100%;
-		border-top: 1px solid rgba(255, 255, 255, .02);
-		box-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
-
-		&:first-child {
-			border-top: 1px solid rgba(255, 255, 255, .02);
-			box-shadow: none;
-		}
+		background: rgba(0, 0, 0, .15);
 
 		h1 {
-			margin: 20px 0 5px 20px;
-			color: #fff;
+			margin: 0 0 0 20px;
+			color: rgba(255, 255, 255, .6);
 			font-size: 14px;
 			font-weight: bold;
-			text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 		}
 	}
 
@@ -150,15 +144,14 @@
 
 	#tags .tag {
 		float: left;
-		padding: 4px 7px;
+		padding: 6px 10px;
 		margin: 0 6px 8px 0;
 		background-color: rgba(0, 0, 0, .5);
-		border: 2px solid rgba(255, 255, 255, .3);
 		border-radius: 100px;
 		font-size: 12px;
-		transition: border .3s;
+		transition: background-color .3s;
 
-		&:hover { border: 2px solid #aaa; }
+		&:hover { background-color: rgba(0, 0, 0, .3); }
 	}
 
 	#tags .tag span {

src/styles/main.scss

@@ -17,7 +17,7 @@ body {
 }
 
 body {
-	background-color: #222;
+	background-color: #1d1d1d;
 	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	font-size: 12px;
 	-webkit-font-smoothing: antialiased;