From 25fe449d8007d209f1e55f28af7d9a1b83626a83 Mon Sep 17 00:00:00 2001
From: Tobias Reich <tobias.reich.ich@gmail.com>
Date: Sun, 8 Mar 2015 23:35:36 +0100
Subject: [PATCH] Added ":active" to clickable areas

---
 dist/main.css                | Bin 33401 -> 34182 bytes
 src/styles/_content.scss     |  11 +++++------
 src/styles/_contextmenu.scss |   2 ++
 src/styles/_header.scss      |  10 ++++++++++
 src/styles/_infobox.scss     |  25 +++++++++++++++++++++----
 src/styles/_message.scss     |   5 ++++-
 6 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/dist/main.css b/dist/main.css
index 3ea76a7707014db6450fd4a001ee7d3d15ce9b85..48188218a17f509065235f8c9e3155d559e1a825 100644
GIT binary patch
delta 627
zcmey_!qnEyv_Z#A-6}D;B(p44Au~5!M>#n^uOv0EL_x10BflgcNve8so12D6QhrfN
zYLRYoeolUom9jyaSz?mWW*M_zOq(}Y`m%2Jv0uPAS=nA=a!#`9W<Ez=Rte?IytMqJ
z{0arVjMPM+RvidcJ$a*-{A5NCk<EH;T8tb}d#WcZCTj8;np-3%>Oc*jtdOU{Z-^qK
z3DhUHIm$hpdGbZCl+8=LH!)4VAE!FG!CPgrski>*9=~`2n8WolfgZ|C20MOoK!7-t
zh34kFe!Cgr8s-P+<5j#rU?1;h-gs-q$!|<JCU1$;nLNis52{;k@{|Nak<^sT5<J#T
z-j#4=^SVT4#>w)|tdpYx1h5*!lx#JbCz+2Q8WmWaJ=rkX4ivPTbCLs?Cs&IqPgcwj
zo_s!oZSs$_>wHGVI=P8O>6v*7dO+sn55l61I+OFgWtGb_Q%W+xf=KcuMTvREY57ID
zP}ND&leIFIDku~eB<5LV<d>xuDZpHimYI`drJQPLYHpf3Ss_CbYhdv}R3#Z185o%Z
eRf%jqpP|n=S=mx(@(eez$rlR5H;Wdf2mk=OB;7#(

delta 434
zcmY+AJuCxp0L61heN~aP2`Z#o;_G^cMssZwA)y^Ar3*0#*WTe&@3=c3C4xjmA_iVe
zA~XgTA^sK<MvF}hHX{ogldnM--+RCJhPS#-zpv1zjF;?rpJ>y>sA{NqFznTCaY_>m
zSylXOlO8ZMLDA)J`On8|s<e#t@pS=rQg{DA!>X3_>v3URs%3rH<ZQH$CkwuQQ<W>O
zDu$#O4px+>Wl_=?m#hq{F?IIWna8tk$7N>$-CRfRTGJFsw{a#khpeP5SWl7LP=5xT
z9VJ`AY#g~N@M5(h6*i-*B_B$-9IFuyr%^Lhk;76Xi>!ywXe>syiQauoAr|$Lx9Eul
z7efUUgUh%BR|Dnv7%E1mP=#GFmmCfTC=`CJEQ>YR6lzcsyFq0~=~gg@JjQ4$)5Y^V
zUV9q9fIhTK9;Dlx<XURTz(#L14id$vmG3Pcok<GXh^#nRkB-SXTchXihyEE^G)BL(
gKN$0S-%n{jVZ++k4mnS7xtK4^Lnvh-&MC3z6NMU~x&QzG

diff --git a/src/styles/_content.scss b/src/styles/_content.scss
index 57ed598..c212891 100644
--- a/src/styles/_content.scss
+++ b/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 {
diff --git a/src/styles/_contextmenu.scss b/src/styles/_contextmenu.scss
index 1240128..0283915 100644
--- a/src/styles/_contextmenu.scss
+++ b/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 {
diff --git a/src/styles/_header.scss b/src/styles/_header.scss
index cc5e1d3..3b9e582 100644
--- a/src/styles/_header.scss
+++ b/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; }
diff --git a/src/styles/_infobox.scss b/src/styles/_infobox.scss
index ceacf8b..bd3d174 100644
--- a/src/styles/_infobox.scss
+++ b/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 {
diff --git a/src/styles/_message.scss b/src/styles/_message.scss
index 2b7ba51..37c3611 100644
--- a/src/styles/_message.scss
+++ b/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;