only hover on hover capable devices

quoid · quoid · commit e5ddc4baaae0 · 2021-10-03T14:05:47.000-04:00
diff --git a/src/popup/Components/PopupItem.svelte b/src/popup/Components/PopupItem.svelte
@@ -16,8 +16,10 @@
         user-select: none;
     }
 
-    .item:hover {
-        background-color: rgba(255, 255, 255, 0.075);
+    @media (hover: hover) {
+        .item:hover {
+            background-color: rgba(255, 255, 255, 0.075);
+        }
     }
 
     .item:active {
diff --git a/src/shared/Components/Dropdown.svelte b/src/shared/Components/Dropdown.svelte
@@ -82,9 +82,11 @@
         pointer-events: none;
     }
 
-    ul :global(li:hover:not(.separator)) {
-        background-color: var(--color-blue);
-        color: var(--color-black);
+    @media (hover: hover) {
+        ul :global(li:hover:not(.separator)) {
+            background-color: var(--color-blue);
+            color: var(--color-black);
+        }
     }
 
 </style>
diff --git a/src/shared/Components/IconButton.svelte b/src/shared/Components/IconButton.svelte
@@ -45,8 +45,10 @@
         width: 66.7%;
     }
 
-    button:hover :global(svg) {
-        opacity: 1;
+    @media (hover: hover) {
+        button:hover :global(svg) {
+            opacity: 1;
+        }
     }
 </style>
 

Original file line number	Diff line number	Diff line change
`@@ -82,9 +82,11 @@`
`82`	`82`	`pointer-events: none;`
`83`	`83`	`}`
`84`	`84`
`85`		`- ul :global(li:hover:not(.separator)) {`
`86`		`- background-color: var(--color-blue);`
`87`		`- color: var(--color-black);`
	`85`	`+ @media (hover: hover) {`
	`86`	`+ ul :global(li:hover:not(.separator)) {`
	`87`	`+ background-color: var(--color-blue);`
	`88`	`+ color: var(--color-black);`
	`89`	`+ }`
`88`	`90`	`}`
`89`	`91`
`90`	`92`	`</style>`