From e6831d9d8e8676fd326fdd398684fe4a5ef642fb Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 30 Jan 2020 14:27:38 +0100
Subject: [PATCH] Fixed broken hover state of the share buttons

---
 .../install/files/style/ui/shareButtons.scss  | 97 +++++++++++--------
 1 file changed, 59 insertions(+), 38 deletions(-)

diff --git a/wcfsetup/install/files/style/ui/shareButtons.scss b/wcfsetup/install/files/style/ui/shareButtons.scss
index 3c52c51542..51fc7ac124 100644
--- a/wcfsetup/install/files/style/ui/shareButtons.scss
+++ b/wcfsetup/install/files/style/ui/shareButtons.scss
@@ -37,80 +37,101 @@ $shareXingBackground: rgba(0, 101, 103, 1);
 	.jsShareFacebook {
 		background-color: $shareFacebookBackground;
 		color: rgba(255, 255, 255, 1);
-		
-		&:hover {
-			background-color: darken($shareFacebookBackground, 10%);
-			color: rgba(255, 255, 255, 1);
-		}
 	}
 	
 	.jsShareTwitter {
 		background-color: $shareTwitterBackground;
 		color: rgba(255, 255, 255, 1);
-		
-		&:hover {
-			background-color: darken($shareTwitterBackground, 10%);
-			color: rgba(255, 255, 255, 1);
-		}
 	}
 	
 	.jsShareGoogle {
 		background-color: $shareGoogleBackground;
 		color: rgba(255, 255, 255, 1);
-		
-		&:hover {
-			background-color: darken($shareGoogleBackground, 10%);
-			color: rgba(255, 255, 255, 1);
-		}
 	}
 	
 	.jsShareReddit {
 		background-color: $shareRedditBackground;
 		color: rgba(255, 255, 255, 1);
-		
-		&:hover {
-			background-color: darken($shareRedditBackground, 10%);
-			color: rgba(255, 255, 255, 1);
-		}
 	}
 	
 	.jsShareWhatsApp {
 		background-color: $shareWhatsAppBackground;
 		color: rgba(255, 255, 255, 1);
-		
-		&:hover {
-			background-color: darken($shareWhatsAppBackground, 10%);
-			color: rgba(255, 255, 255, 1);
-		}
 	}
 	
 	.jsShareLinkedIn {
 		background-color: $shareLinkedInBackground;
 		color: rgba(255, 255, 255, 1);
-		
-		&:hover {
-			background-color: darken($shareLinkedInBackground, 10%);
-			color: rgba(255, 255, 255, 1);
-		}
 	}
 	
 	.jsSharePinterest {
 		background-color: $sharePinterestBackground;
 		color: rgba(255, 255, 255, 1);
-		
-		&:hover {
-			background-color: darken($sharePinterestBackground, 10%);
-			color: rgba(255, 255, 255, 1);
-		}
 	}
 	
 	.jsShareXing {
 		background-color: $shareXingBackground;
 		color: rgba(255, 255, 255, 1);
+	}
+}
+
+/* hover states are only applied to non-touch devices to avoid "leftover" hover states after taps */
+html:not(.touch) {
+	.messageShareButtons {
+		.jsShareFacebook {
+			&:hover {
+				background-color: darken($shareFacebookBackground, 10%);
+				color: rgba(255, 255, 255, 1);
+			}
+		}
 		
-		&:hover {
-			background-color: darken($shareXingBackground, 10%);
-			color: rgba(255, 255, 255, 1);
+		.jsShareTwitter {
+			&:hover {
+				background-color: darken($shareTwitterBackground, 10%);
+				color: rgba(255, 255, 255, 1);
+			}
+		}
+		
+		.jsShareGoogle {
+			&:hover {
+				background-color: darken($shareGoogleBackground, 10%);
+				color: rgba(255, 255, 255, 1);
+			}
+		}
+		
+		.jsShareReddit {
+			&:hover {
+				background-color: darken($shareRedditBackground, 10%);
+				color: rgba(255, 255, 255, 1);
+			}
+		}
+		
+		.jsShareWhatsApp {
+			&:hover {
+				background-color: darken($shareWhatsAppBackground, 10%);
+				color: rgba(255, 255, 255, 1);
+			}
+		}
+		
+		.jsShareLinkedIn {
+			&:hover {
+				background-color: darken($shareLinkedInBackground, 10%);
+				color: rgba(255, 255, 255, 1);
+			}
+		}
+		
+		.jsSharePinterest {
+			&:hover {
+				background-color: darken($sharePinterestBackground, 10%);
+				color: rgba(255, 255, 255, 1);
+			}
+		}
+		
+		.jsShareXing {
+			&:hover {
+				background-color: darken($shareXingBackground, 10%);
+				color: rgba(255, 255, 255, 1);
+			}
 		}
 	}
 }
-- 
2.20.1