From aae38e970c1143a8eea9bc99f3a5add8afe89f57 Mon Sep 17 00:00:00 2001
From: Matthias Schmidt <gravatronics@live.com>
Date: Thu, 4 Jul 2019 18:41:03 +0200
Subject: [PATCH] Apply button hover styles only on non-touch devices

The hover styles can cause the visual illusion on touch devices of buttons still being active even if their active state has been removed after a tap as they are still in a hover state.
---
 wcfsetup/install/files/style/ui/button.scss | 33 ++++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/wcfsetup/install/files/style/ui/button.scss b/wcfsetup/install/files/style/ui/button.scss
index f6c011f4a4..32b440acec 100644
--- a/wcfsetup/install/files/style/ui/button.scss
+++ b/wcfsetup/install/files/style/ui/button.scss
@@ -29,8 +29,7 @@ a.button { // a.button is required to override link formatting, such as drop-dow
 		color: inherit;
 	}
 	
-	&.active,
-	&:hover {
+	&.active {
 		background-color: $wcfButtonBackgroundActive;
 		color: $wcfButtonTextActive;
 		text-decoration: none;
@@ -60,13 +59,39 @@ a.button.buttonPrimary { // a.button is required to override link formatting, su
 	background-color: $wcfButtonPrimaryBackground;
 	color: $wcfButtonPrimaryText;
 	
-	&.active,
-	&:hover {
+	&.active {
 		background-color: $wcfButtonPrimaryBackgroundActive;
 		color: $wcfButtonPrimaryTextActive;
 	}
 }
 
+/* hover states are only applied to non-touch devices to avoid "leftover" hover states after taps */
+html:not(.touch) {
+	button,
+	input[type="button"],
+	input[type="reset"],
+	input[type="submit"],
+	.button,
+	a.button {
+		&:hover {
+			background-color: $wcfButtonBackgroundActive;
+			color: $wcfButtonTextActive;
+			text-decoration: none;
+		}
+	}
+	
+	button.buttonPrimary,
+	input[type="button"].buttonPrimary,
+	input[type="submit"],
+	.button.buttonPrimary,
+	a.button.buttonPrimary { // a.button is required to override link formatting, such as dropdown buttons
+		&:hover {
+			background-color: $wcfButtonPrimaryBackgroundActive;
+			color: $wcfButtonPrimaryTextActive;
+		}
+	}
+}
+
 /* disabled state */
 button,
 input[type="button"],
-- 
2.20.1