From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 23 Dec 2021 16:56:11 +0000 (+0100)
Subject: Removed hover states on touch devices
X-Git-Tag: 5.5.0_Alpha_1~242^2~25
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=b74e8d8b8393b8f58012c8517b8e388dd00415be;p=GitHub%2FWoltLab%2FWCF.git

Removed hover states on touch devices
---

diff --git a/wcfsetup/install/files/style/ui/userMenu.scss b/wcfsetup/install/files/style/ui/userMenu.scss
index d0bdde1b63..d7caa12d76 100644
--- a/wcfsetup/install/files/style/ui/userMenu.scss
+++ b/wcfsetup/install/files/style/ui/userMenu.scss
@@ -50,7 +50,7 @@
 .userMenuHeader {
 	align-items: center;
 	display: grid;
-    min-height: 44px;
+	min-height: 44px;
 	grid-template-areas: "title buttons";
 	grid-template-columns: auto max-content;
 }
@@ -76,12 +76,15 @@
 
 .userMenuButton {
 	align-items: center;
-    display: flex;
-    height: 44px;
-    justify-content: center;
+	display: flex;
+	height: 44px;
+	justify-content: center;
+	width: 44px;
+}
+
+body:not(.touch) .userMenuButton {
 	transform: scale(1);
 	transition: transform 0.24s ease-in-out;
-    width: 44px;
 
 	&:hover {
 		transform: scale(1.5);
@@ -121,10 +124,6 @@
 	position: relative;
 	transition: background-color 0.12s linear;
 
-	&:hover {
-		background-color: var(--background-color-active);
-	}
-
 	&[data-is-unread="true"] .userMenuItemLink::before {
 		right: 30px;
 	}
@@ -146,6 +145,10 @@
 	}
 }
 
+body:not(.touch) .userMenuItem:hover {
+	background-color: var(--background-color-active);
+}
+
 .userMenuItemLink,
 .userMenuItemLink:hover {
 	color: inherit;
@@ -197,12 +200,15 @@
 		opacity: 1;
 		position: absolute;
 		top: calc(50% - 5px);
-		transition: left 0.12s ease-in-out, opacity 0.12s ease-in-out;
 		width: 10px;
 	}
 }
 
-.userMenuItem:hover .userMenuItemUnread::before {
+body:not(.touch) .userMenuItemUnread::before {
+	transition: left 0.12s ease-in-out, opacity 0.12s ease-in-out;
+}
+
+body:not(.touch) .userMenuItem:hover .userMenuItemUnread::before {
 	opacity: 0;
 	left: 0;
 }
@@ -212,9 +218,12 @@
 	opacity: 1;
 	position: relative;
 	left: 0;
+	width: 100%;
+}
+
+body:not(.touch) .userMenuItemMarkAsRead {
 	transform: scale(1);
 	transition: opacity 0.12s ease-in-out, left 0.12s ease-in-out, transform 0.24s ease-in-out;
-	width: 100%;
 
 	&:hover {
 		transform: scale(1.5);