Added ":active" to clickable areas

src/styles/_content.scss

@@ -41,6 +41,11 @@
 		&.active img {
 			border-color: $colorBlue;
 		}
+
+		&:active img {
+			transition: none;
+			border-color: darken($colorBlue, 15%);
+		}
 	}
 
 	/* Album ------------------------------------------------*/
@@ -59,12 +64,6 @@
 		&:hover img:nth-child(2) { transform: rotate(5deg) translateY(-8px) translateX(12px); }
 	}
 
-	/* Photo ------------------------------------------------*/
-	.photo:active  {
-		transition-duration: .1s;
-		transform: scale(.98);
-	}
-
 	/* Album/Photo Overlay ------------------------------------------------*/
 	.album .overlay,
 	.photo .overlay {

src/styles/_contextmenu.scss

@@ -34,6 +34,8 @@
 			cursor: default;
 
 			&:hover { background: linear-gradient(to bottom, $colorBlue, darken($colorBlue, 5%)); }
+
+			&:active { background: linear-gradient(to bottom, darken($colorBlue, 10%), darken($colorBlue, 15%)); }
 		}
 
 			tr td .cover {

src/styles/_header.scss

@@ -50,6 +50,11 @@ header {
 
 		&:hover .iconic { fill: white(1); }
 
+		&:active .iconic {
+			transition: none;
+			fill: white(.8);
+		}
+
 		&.editable .iconic { display: inline-block; }
 	}
 
@@ -81,6 +86,11 @@ header {
 
 		&:hover .iconic { fill: white(1); }
 
+		&:active .iconic {
+			transition: none;
+			fill: white(.8);
+		}
+
 		&--star.active .iconic { fill: #f0ef77; }
 
 		&--eye.active .iconic { fill: #ff9737; }

src/styles/_infobox.scss

@@ -47,6 +47,11 @@
 		}
 
 		&:hover .iconic { fill: white(1); }
+
+		&:active .iconic {
+			transition: none;
+			fill: white(.8);
+		}
 	}
 
 	.bumper {
@@ -81,12 +86,17 @@
 		width: 15px;
 
 		.iconic {
-			fill: #888;
+			fill: white(.5);
 			filter: drop-shadow($shadow);
 			transition: fill .2s ease-out;
 		}
 
-		&:hover .iconic { fill: #fff; }
+		&:hover .iconic { fill: white(1); }
+
+		&:active .iconic {
+			transition: none;
+			fill: white(.8);
+		}
 	}
 
 	/* Divider ------------------------------------------------*/
@@ -150,7 +160,7 @@
 		background-color: black(.5);
 		border-radius: 100px;
 		font-size: 12px;
-		transition: background-color .3s;
+		transition: background-color .2s;
 
 		&:hover { background-color: black(.3); }
 	}
@@ -162,13 +172,20 @@
 		width: 0;
 		overflow: hidden;
 		transform: scale(0);
-		transition: width .3s, margin .3s, transform .3s;
+		transition: width .2s, margin .2s, transform .2s, fill .2s ease-out;
 
 		.iconic {
 			fill: $colorRed;
 			width: 8px;
 			filter: drop-shadow($shadowLight);
 		}
+
+		&:hover .iconic { fill: lighten($colorRed, 10%); }
+
+		&:active .iconic {
+			transition: none;
+			fill: darken($colorRed, 10%);
+		}
 	}
 
 	#tags .tag:hover span {

src/styles/_message.scss

@@ -57,7 +57,10 @@
 		&:hover { background: white(.02); }
 
 		&:active,
-		&--active { background: black(.1); }
+		&--active {
+			transition: none;
+			background: black(.1);
+		}
 
 		&#basicModal__action {
 			color: $colorBlue;