web: use hover effects only when supported

2024-06-17 01:12:59 +06:00
parent 95aeec3380
commit 5390415aa7
3 changed files with 20 additions and 15 deletions
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -63,10 +63,6 @@
        opacity: 1;
    }

-    .sidebar-tab:hover {
-        opacity: 1;
-    }
-
    .sidebar-tab:focus-visible {
        box-shadow: 0 0 0 3px var(--blue) inset;
        outline: none;
@@ -78,6 +74,12 @@
        color: var(--sidebar-highlight);
    }

+    @media (hover: hover) {
+        .sidebar-tab:hover {
+            opacity: 1;
+        }
+    }
+
    @media screen and (max-width: 535px) {
        .sidebar-tab {
            padding: 5px var(--padding);