From fcd304182b3261e0653a50e1776a3549c36c8526 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 1 Feb 2021 10:53:34 +0100
Subject: [PATCH] specify :hover rule only for devices that can handle it

Since mobile device cannot handle :hover rule (hover is non sense for touch devices), specify css for only devices that effectivly handle it.

see https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
and https://caniuse.com/mdn-css_at-rules_media_hover for compatibility (quite good)
---
 app/assets/stylesheets/darkswarm/tabset.scss | 30 +++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/darkswarm/tabset.scss b/app/assets/stylesheets/darkswarm/tabset.scss
index 4f4ab3c7b9..225e4dd5f6 100644
--- a/app/assets/stylesheets/darkswarm/tabset.scss
+++ b/app/assets/stylesheets/darkswarm/tabset.scss
@@ -32,22 +32,24 @@
 
     border-bottom: 4px solid transparent;
 
-    &:hover, &:focus, &:active {
-      transition: all 0.4s ease-in-out;
-      border-bottom: 4px solid $clr-brick-bright;
-      cursor: pointer;
-
-      @include breakpoint(phablet) {
-        transition: none;
-        color: white;
-        background-color: $clr-brick-bright;
-      }
-
-      a {
-        color: $clr-brick-bright;
+    @media (hover: hover) {
+      &:hover {
+        transition: all 0.4s ease-in-out;
+        border-bottom: 4px solid $clr-brick-bright;
+        cursor: pointer;
 
         @include breakpoint(phablet) {
-          color: #ffffff;
+          transition: none;
+          color: white;
+          background-color: $clr-brick-bright;
+        }
+
+        a {
+          color: $clr-brick-bright;
+
+          @include breakpoint(phablet) {
+            color: #ffffff;
+          }
         }
       }
     }