From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 30 Jan 2020 13:27:38 +0000 (+0100)
Subject: Fixed broken hover state of the share buttons
X-Git-Tag: 5.2.2~24
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e6831d9d8e8676fd326fdd398684fe4a5ef642fb;p=GitHub%2FWoltLab%2FWCF.git

Fixed broken hover state of the share buttons
---

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);
+			}
 		}
 	}
 }