Updated toolbar icons

index.html

@@ -29,39 +29,72 @@
 	<!-- Header -->
 	<header>
 
+		<!-- Title -->
+		<a id="title"></a>
+
 		<!-- Buttons -->
-		<div id="tools_albums">
-			<a class="button left icon-cog" id="button_settings" title="Settings"></a>
-			<a class="button left icon-signout" id="button_signin" title="Sign In"></a>
+		<div class="toolbar" id="tools_albums">
+			<a class="button left" id="button_settings" title="Settings">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#cog"></use></svg>
+			</a>
+			<a class="button left" id="button_signin" title="Sign In">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#account-login"></use></svg>
+			</a>
 			<a id="hostedwith">Hosted with Lychee</a>
-			<a class="button right icon icon-plus button_add" title="Add"></a>
+			<a class="button right button_add" title="Add">
+				<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" class="button right">&times;</a>
 		</div>
-		<div id="tools_album">
-			<a class="button left icon-arrow-left" id="button_back_home" title="Close Album"></a>
-			<a class="button right icon icon-plus button_add" title="Add"></a>
+		<div class="toolbar" id="tools_album">
+			<a class="button left" id="button_back_home" title="Close Album">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#chevron-left"></use></svg>
+			</a>
+			<a class="button right button_add" title="Add">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#plus"></use></svg>
+			</a>
 			<a class="button_divider"></a>
-			<div class="tools" id="button_trash_album" title="Delete Album"><a class="icon-trash"></a></div>
-			<div class="tools" id="button_info_album" title="Show Info"><a class="icon-info-sign"></a></div>
-			<div class="tools" id="button_archive" title="Download Album"><a class="icon-circle-arrow-down"></a></div>
-			<div class="tools" id="button_share_album" title="Share Album"><a class="icon-share"></a></div>
+			<a class="button right" id="button_trash_album" title="Delete Album">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#trash"></use></svg>
+			</a>
+			<a class="button right" id="button_info_album" title="Show Info">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#info"></use></svg>
+			</a>
+			<a class="button right" id="button_archive" title="Download Album">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#cloud-download"></use></svg>
+			</a>
+			<a class="button right" id="button_share_album" title="Share Album">
+				<svg viewBox="0 0 8 8" class="iconic iconic--eye"><use xlink:href="src/images/iconic.svg#eye"></use></svg>
+			</a>
 		</div>
-		<div id="tools_photo">
-			<a class="button left icon-arrow-left" id="button_back" title="Close Photo"></a>
-			<div class="tools" id="button_more" title="More"><a class="icon-caret-down"></a></div>
+		<div class="toolbar" id="tools_photo">
+			<a class="button left" id="button_back" title="Close Photo">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#chevron-left"></use></svg>
+			</a>
+			<a class="button right" id="button_more" title="More">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#ellipses"></use></svg>
+			</a>
 			<a class="button_divider"></a>
-			<div class="tools" id="button_trash" title="Delete"><a class="icon-trash"></a></div>
-			<div class="tools" id="button_move" title="Move"><a class="icon-folder-open"></a></div>
-			<div class="tools" id="button_info" title="Show Info"><a class="icon-info-sign"></a></div>
+			<a class="button right" id="button_trash" title="Delete">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#trash"></use></svg>
+			</a>
+			<a class="button right" id="button_info" title="Show Info">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#info"></use></svg>
+			</a>
+			<a class="button right" id="button_move" title="Move">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#folder"></use></svg>
+			</a>
 			<a class="button_divider"></a>
-			<div class="tools" id="button_share" title="Share Photo"><a class="icon-share"></a></div>
-			<div class="tools" id="button_star" title="Star Photo"><a class="icon-star-empty"></a></div>
+			<a class="button right button--eye" id="button_share" title="Share Photo">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#eye"></use></svg>
+			</a>
+			<a class="button right button--star" id="button_star" title="Star Photo">
+				<svg viewBox="0 0 8 8" class="iconic"><use xlink:href="src/images/iconic.svg#star"></use></svg>
+			</a>
 		</div>
 
-		<a id="title"></a>
-
 	</header>
 
 	<!-- Content -->

src/scripts/view.js

@@ -447,14 +447,14 @@ view.photo = {
 
 	star: function() {
 
-		$('#button_star a').removeClass('icon-star-empty icon-star');
 		if (photo.json.star==1) {
 			// Starred
-			$('#button_star a').addClass('icon-star');
-			$('#button_star').attr('title', 'Unstar Photo');
+			$('#button_star')
+				.addClass('active')
+				.attr('title', 'Unstar Photo');
 		} else {
 			// Unstarred
-			$('#button_star a').addClass('icon-star-empty');
+			$('#button_star').removeClass('active');
 			$('#button_star').attr('title', 'Star Photo');
 		}
 
@@ -464,13 +464,15 @@ view.photo = {
 
 		if (photo.json.public==1||photo.json.public==2) {
 			// Photo public
-			$('#button_share a').addClass('active');
-			$('#button_share').attr('title', 'Share Photo');
+			$('#button_share')
+				.addClass('active')
+				.attr('title', 'Share Photo');
 			if (photo.json.init) $('#infobox .attr_visibility').html('Public');
 		} else {
 			// Photo private
-			$('#button_share a').removeClass('active');
-			$('#button_share').attr('title', 'Make Public');
+			$('#button_share')
+				.removeClass('active')
+				.attr('title', 'Make Public');
 			if (photo.json.init) $('#infobox .attr_visibility').html('Private');
 		}
 

src/styles/_header.scss

@@ -55,38 +55,41 @@ header {
 		&.editable { cursor: pointer; }
 	}
 
+	/* Toolbars ------------------------------------------------*/
+	.toolbar {
+		display: none;
+		position: absolute;
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		padding: 0 10px;
+	}
+
 	/* Button ------------------------------------------------*/
 	.button {
-		color: #888;
-		font-family: 'FontAwesome';
-		font-size: 21px;
-		font-weight: bold;
-		text-decoration: none !important;
+		display: inline-block;
+		padding: 16px 8px 12px;
+		width: 15px;
 		cursor: pointer;
-		text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
 
-		&:hover {
-			color: #fff;
-		}
+		&.left { float: left; }
 
-		&.left {
-			float: left;
-			position: absolute;
-			padding: 16px 10px 8px 18px;
-		}
+		&.right { float: right; }
 
-		&.right {
-			float: right;
-			position: relative;
-			padding: 16px 19px 13px 11px;
+		.iconic {
+			fill: #888;
+			filter: drop-shadow( 0 -1px 0 rgba(0, 0, 0, .2) );
+			transition: fill .2s ease;
 		}
-	}
 
-	#tools_albums,
-	#tools_album,
-	#tools_photo,
-	#button_signin {
-		display: none;
+		&:hover .iconic { fill: #fff; }
+
+		&--star.active .iconic { fill: #f0ef77; }
+
+		&--eye.active .iconic { fill: #ff9737; }
+
+		&#button_signin { display: none; }
+
 	}
 
 	/* Button Divider ------------------------------------------------*/
@@ -129,24 +132,6 @@ header {
 		&:hover { opacity: 1; }
 	}
 
-	/* Tools ------------------------------------------------*/
-	.tools {
-		float: right;
-		padding: 14px 8px;
-		color: #888;
-		font-size: 21px;
-		text-shadow: 0 -1px 0 #222;
-		cursor: pointer;
-
-		&:first-of-type { margin-right: 6px; }
-
-		&:hover a { color: #fff; }
-
-		.icon-star { color: #f0ef77; }
-
-		.icon-share.active { color: #ff9737; }
-	}
-
 	/* Hosted with Lychee ------------------------------------------------*/
 	#hostedwith {
 		float: right;

src/styles/main.scss

@@ -42,6 +42,11 @@ input {
 	user-select: text !important;
 }
 
+.iconic {
+	width: 100%;
+	height: 100%;
+}
+
 @import 'animations';
 @import 'content';
 @import 'contextmenu';