viewer: fix sticky hover styling on links

This disables sticky hover styling on touch devices,
on which the virtual cursor doesn't leave the element after being tapped.
The fix can be applied to  elements by using the .link class.

GitHub: closes #94

1 files changed, 13 insertions, 0 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 4acaf13..d6b6562 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -62,6 +62,19 @@
   color: $disabled-color !important;
 }
 
+// Disable sticky hover styling on touch devices,
+// on which the virtual cursor doesn't leave the element after being tapped.
+// The fix can be applied to `a` elements by using the .link class.
+@media (hover:none), (hover:on-demand) {
+  .link:hover {
+    color: $link !important;
+  }
+
+  .disabled:hover {
+    color: $disabled-color !important;
+  }
+}
+
 // === Scrollbar styling
 
 .scrollbar {