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.

diff --git a/wcfsetup/install/files/style/ui/button.scss b/wcfsetup/install/files/style/ui/button.scss
index f6c011f4a448844ba691b1bcb43c4b904fec055d..32b440acec53d5c7aef9875da6ce1a4a2a5a02da 100644 (file)
--- 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"],