From 5390415aa7d55e3c402753fa57f06d395cfdbe2d Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 17 Jun 2024 01:12:59 +0600
Subject: [PATCH] web: use hover effects only when supported

---
 .../save/buttons/DownloadButton.svelte          | 17 +++++++++--------
 web/src/components/sidebar/SidebarTab.svelte    | 10 ++++++----
 web/src/routes/+layout.svelte                   |  8 +++++---
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index 2e0838cb..655ea4b1 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -121,19 +121,20 @@
         margin-bottom: 0.1rem;
     }
 
-    #download-button:hover {
-        background: var(--button-hover-transparent);
-    }
-
     #download-button:disabled {
         cursor: unset;
     }
 
-    #download-button:disabled:hover {
-        background: none;
-    }
-
     :global(#input-container.focused) #download-button {
         border-left: 2px var(--secondary) solid;
     }
+
+    @media (hover: hover) {
+        #download-button:hover {
+            background: var(--button-hover-transparent);
+        }
+        #download-button:disabled:hover {
+            background: none;
+        }
+    }
 </style>
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index 563564f0..36e8db53 100644
--- 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);
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index bfc6deff..fc5609ce 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -130,9 +130,11 @@
         transform: scale(0.95);
     }
 
-    :global(button:hover) {
-        background-color: var(--button-hover);
-        z-index: 1;
+    @media (hover: hover) {
+        :global(button:hover) {
+            background-color: var(--button-hover);
+            z-index: 1;
+        }
     }
 
     :global(.center-column-container) {