fix: stop revealing elements on hover if hover is not supported

Fixes #3162

src/components/home/navigation.vue

@@ -221,7 +221,7 @@ function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
 	// This is a bit hacky: since we do have to filter out the archived items from the list
 	// for vue draggable updating it is not as simple as replacing it.
 	// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
-	// because now all archived lists are sorted after the active ones. This is fine because they are sorted 
+	// because now all archived lists are sorted after the active ones. This is fine because they are sorted
 	// later when showing them anyway, and it makes the merging happening here a lot easier.
 	const lists = [
 		...activeLists,
@@ -246,8 +246,8 @@ async function saveListPosition(e: SortableEvent) {
 	// If the list was dragged to the last position, Safari will report e.newIndex as the size of the listsActive
 	// array instead of using the position. Because the index is wrong in that case, dragging the list will fail.
 	// To work around that we're explicitly checking that case here and decrease the index.
-	const newIndex = e.newIndex === listsActive.length ? e.newIndex - 1 : e.newIndex 
-	
+	const newIndex = e.newIndex === listsActive.length ? e.newIndex - 1 : e.newIndex
+
 	const list = listsActive[newIndex]
 	const listBefore = listsActive[newIndex - 1] ?? null
 	const listAfter = listsActive[newIndex + 1] ?? null
@@ -346,9 +346,20 @@ $vikunja-nav-selected-width: 0.4rem;
 				transition: $transition;
 			}
 
-			&:hover .menu-list-dropdown {
+			& .menu-list-dropdown {
 				opacity: 1;
 			}
+
+			@media(hover: hover) and (pointer: fine) {
+				& .menu-list-dropdown {
+					opacity: 0;
+				}
+
+				&:hover .menu-list-dropdown {
+					opacity: 1;
+				}
+			}
+
 		}
 
 		.menu-item-icon {
@@ -418,7 +429,6 @@ $vikunja-nav-selected-width: 0.4rem;
 				opacity: 1;
 			}
 		}
-		
 		&:not(.dragging-disabled) .handle {
 			cursor: grab;
 		}
@@ -427,7 +437,7 @@ $vikunja-nav-selected-width: 0.4rem;
 
 .top-menu {
 	margin-top: math.div($navbar-padding, 2);
- 
+
 	.menu-list {
 		li {
 			font-weight: 600;
@@ -490,11 +500,24 @@ $vikunja-nav-selected-width: 0.4rem;
 		}
 	}
 
+
 	.favorite.is-favorite,
-	.list-menu:hover .favorite {
+	.list-menu .favorite {
 		opacity: 1;
 	}
 
+	@media(hover: hover) and (pointer: fine) {
+		.favorite.is-favorite,
+		.list-menu .favorite {
+			opacity: 0;
+		}
+
+		.favorite.is-favorite,
+		.list-menu:hover .favorite {
+			opacity: 1;
+		}
+	}
+
 	.list-menu-title {
 		overflow: hidden;
 		text-overflow: ellipsis;

src/components/list/partials/ListCard.vue

@@ -160,10 +160,20 @@ const listStore = useListStore()
 	}
 }
 
-.list-card:hover .favorite {
+.list-card .favorite {
 	opacity: 1;
 }
 
+@media(hover: hover) and (pointer: fine) {
+	.list-card .favorite {
+		opacity: 0;
+	}
+
+	.list-card:hover .favorite {
+		opacity: 1;
+	}
+}
+
 .background-fade-in {
   opacity: 0;
   transition: opacity $transition;
@@ -173,4 +183,4 @@ const listStore = useListStore()
     opacity: 1;
   }
 }
-</style>
+</style>

src/components/tasks/partials/singleTaskInList.vue

@@ -9,13 +9,13 @@
 			@change="markAsDone"
 			v-model="task.done"
 		/>
-		
+
 		<ColorBubble
 			v-if="showListColor && listColor !== '' && currentList.id !== task.listId"
 			:color="listColor"
 			class="mr-1"
 		/>
-		
+
 		<div
 			:class="{ 'done': task.done, 'show-list': showList && taskList !== null}"
 			class="tasktext"
@@ -287,7 +287,7 @@ function hideDeferDueDatePopup(e) {
 	cursor: pointer;
 	border-radius: $radius;
 	border: 2px solid transparent;
-	
+
 	color: var(--text);
 	transition: color ease $transition-duration;
 
@@ -354,10 +354,6 @@ function hideDeferDueDatePopup(e) {
 		}
 	}
 
-	&:hover .favorite {
-		opacity: 1;
-	}
-
 	.handle {
 		opacity: 0;
 		transition: opacity $transition;
@@ -365,10 +361,33 @@ function hideDeferDueDatePopup(e) {
 		cursor: grab;
 	}
 
-	&:hover .handle {
+	& .favorite {
 		opacity: 1;
 	}
 
+	& .handle {
+		opacity: 1;
+	}
+
+	@media(hover: hover) and (pointer: fine) {
+		& .favorite {
+			opacity: 0;
+		}
+
+		&:hover .favorite {
+			opacity: 1;
+		}
+
+		& .handle {
+			opacity: 0;
+		}
+
+		&:hover .handle {
+			opacity: 1;
+		}
+	}
+
+
 	:deep(.fancycheckbox) {
 		height: 18px;
 		padding-top: 0;
@@ -420,4 +439,4 @@ function hideDeferDueDatePopup(e) {
 		margin-bottom: 0;
 	}
 }
-</style>
+</style>