fix: hover only applies on devices that support it

docs/CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Next
 
 * Fix Organizer sorting behavior for notes, tags, and wishlist notes so that empty values sort along with other values.
+* Hover state only applies on supported devices
 
 ## 8.34.1 <span class="changelog-date">(2024-08-27)</span>
 

src/app/_variables.scss

@@ -136,3 +136,33 @@ $tempContainerZindex: 1000;
 @function dim-rgb-values-to-rgba($values, $alpha: 1) {
   @return #{'rgba(' + $values + ', ' + $alpha + ')'};
 }
+
+@mixin interactive($hover: false, $focus: false, $focusWithin: false, $active: false) {
+  // Declares hover rules only if a device can hover over elements. This avoids issues on mobile
+  // browsers where tapping an element triggers and persists its hover state.
+  @if $hover == true {
+    @media (any-hover: hover) {
+      &:hover {
+        @content;
+      }
+    }
+  }
+
+  @if $focus == true {
+    &:focus-visible {
+      @content;
+    }
+  }
+
+  @if $focusWithin == true {
+    &:focus-within {
+      @content;
+    }
+  }
+
+  @if $active == true {
+    &:active {
+      @content;
+    }
+  }
+}

src/app/accounts/MenuAccounts.m.scss

@@ -14,8 +14,7 @@
     > div {
       padding: 10px 2rem 10px 1rem;
 
-      &:hover,
-      &:focus {
+      @include interactive($hover: true, $focus: true) {
         color: var(--theme-text-invert);
         background-color: var(--theme-accent-primary);
       }

src/app/accounts/SelectAccount.m.scss

@@ -24,8 +24,8 @@
   &:active {
     outline: none;
   }
-  &:hover,
-  &:focus {
+
+  @include interactive($hover: true, $focus: true) {
     border-color: var(--theme-accent-primary);
     color: var(--theme-accent-primary);
     background-color: rgba(255, 255, 255, 0.1);

src/app/character-tile/CharacterTileButton.m.scss

@@ -23,8 +23,7 @@
 
   // Display an outline when hovering characters
   @media (hover: hover) {
-    &:hover,
-    &:active {
+    @include interactive($hover: true, $active: true) {
       @include selected-highlight;
     }
   }

src/app/compare/Compare.m.scss

@@ -69,8 +69,11 @@
     img {
       margin: 0;
     }
-    &:hover img {
-      filter: drop-shadow(0 0 1px black);
+
+    @include interactive($hover: true) {
+      img {
+        filter: drop-shadow(0 0 1px black);
+      }
     }
   }
 }

src/app/compare/CompareItem.m.scss

@@ -88,7 +88,8 @@
   background-image: url('images/close.png');
   background-position: center;
   background-repeat: no-repeat;
-  &:hover {
+
+  @include interactive($hover: true) {
     background-color: var(--theme-accent-primary);
   }
 }

src/app/destiny1/activities/activities.scss

@@ -82,7 +82,7 @@
     background-blend-mode: multiply;
     background: #666;
 
-    &:hover {
+    @include interactive($hover: true) {
       background: #aaa;
     }
   }

src/app/destiny1/loadout-builder/loadout-builder.scss

@@ -63,7 +63,8 @@ $and-color: #814bcf;
     vertical-align: middle;
     width: var(--item-size);
     height: var(--item-size);
-    &:hover {
+
+    @include interactive($hover: true) {
       opacity: 1;
       transition: 1s;
     }
@@ -97,9 +98,11 @@ $and-color: #814bcf;
     margin-bottom: 20px;
   }
 
-  .expand-configs:hover {
-    color: var(--theme-accent-primary);
-    cursor: pointer;
+  .expand-configs {
+    @include interactive($hover: true) {
+      color: var(--theme-accent-primary);
+      cursor: pointer;
+    }
   }
 
   .loadout-builder-item {
@@ -216,7 +219,8 @@ $and-color: #814bcf;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     cursor: pointer;
-    &:hover {
+
+    @include interactive($hover: true) {
       background-color: rgba(160, 160, 160, 0.8);
       border: 1px solid rgba(32, 32, 32, 0);
       color: rgba(245, 245, 245, 1);
@@ -370,14 +374,21 @@ $and-color: #814bcf;
       padding-left: 3px;
       padding-right: 3px;
       cursor: pointer;
+
+      @include interactive($hover: true) {
+        background-color: $or-color;
+      }
     }
 
-    & .perk:hover,
     & .active-perk-or {
       background-color: $or-color;
     }
 
-    &.shift-held .perk:hover,
+    &.shift-held .perk {
+      @include interactive($hover: true) {
+        background-color: $and-color;
+      }
+    }
     & .active-perk-and {
       background-color: $and-color;
     }

src/app/destiny1/loadout-drawer/LoadoutDrawerOptions.m.scss

@@ -44,8 +44,7 @@
     height: 32px;
   }
 
-  &:hover,
-  &:focus {
+  @include interactive($hover: true, $focus: true) {
     background: black;
     outline: none;
     border-bottom: 1px solid var(--theme-accent-primary);

src/app/dim-ui/CheckButton.m.scss

@@ -22,8 +22,7 @@
   }
 
   // Don't do hover
-  &:hover,
-  &:active {
+  @include interactive($hover: true, $active: true) {
     background-color: rgba(255, 255, 255, 0.2) !important;
     color: var(--theme-text) !important;
   }

src/app/dim-ui/ClosableContainer.m.scss

@@ -15,8 +15,8 @@
   right: 2px;
   background-image: url('images/close.png');
   background-color: rgba(100, 100, 100, 0.8);
-  &:hover,
-  &:focus-visible {
+
+  @include interactive($hover: true, $focus: true) {
     background-color: var(--theme-accent-primary);
     outline: none;
   }
@@ -27,7 +27,9 @@
     display: none;
   }
 
-  &:hover .close {
-    display: inline-block;
+  @include interactive($hover: true) {
+    .close {
+      display: inline-block;
+    }
   }
 }

src/app/dim-ui/CollapsibleTitle.m.scss

@@ -36,8 +36,7 @@
     letter-spacing: 2px;
     font-size: 14px;
 
-    &:hover,
-    &:focus-visible {
+    @include interactive($hover: true, $focus: true) {
       color: var(--theme-accent-primary);
 
       @include phone-portrait {
@@ -56,8 +55,7 @@
     }
   }
 
-  &:hover,
-  &:focus-within {
+  @include interactive($hover: true, $focusWithin: true) {
     background-color: rgba(0, 0, 0, 0.4);
   }
 

src/app/dim-ui/ConfirmButton.m.scss

@@ -1,3 +1,5 @@
+@use '../variables.scss' as *;
+
 .confirmButton {
   overflow: hidden;
   max-width: 100%;
@@ -26,12 +28,12 @@
     }
     color: var(--theme-text) !important;
 
-    &:hover {
+    @include interactive($hover: true) {
       background-color: #af7d27 !important;
     }
 
     &[class~='danger'] {
-      &:hover {
+      @include interactive($hover: true) {
         background-color: #a22 !important;
       }
     }

src/app/dim-ui/Dropdown.m.scss

@@ -66,9 +66,8 @@
   padding: 4px 8px;
   color: #999;
   transition: all 150ms ease-out;
-  &:active,
-  &:hover,
-  &:focus-visible {
+
+  @include interactive($hover: true, $active: true, $focus: true) {
     color: white;
   }
 }

src/app/dim-ui/ExpandableTextBlock.m.scss

@@ -1,7 +1,10 @@
+@use '../variables.scss' as *;
+
 .textBlockWrapper {
   position: relative;
   overflow: hidden;
-  &:hover {
+
+  @include interactive($hover: true) {
     cursor: pointer;
   }
   &::after {
@@ -10,8 +13,10 @@
     inset: 0;
     box-shadow: inset 0 -31px 20px -20px black;
   }
-  &.open:hover {
-    cursor: default;
+  &.open {
+    @include interactive($hover: true) {
+      cursor: default;
+    }
   }
   &.open::after {
     display: none;

src/app/dim-ui/FilterPills.m.scss

@@ -30,10 +30,8 @@
     background-color: rgb(255, 255, 255, 0.2);
   }
 
-  @media (hover: hover) {
-    &:hover {
-      border-color: rgba(255, 255, 255, 0.3);
-    }
+  @include interactive($hover: true) {
+    border-color: rgba(255, 255, 255, 0.3);
   }
 
   :global(.app-icon) {

src/app/dim-ui/PageWithMenu.m.scss

@@ -117,8 +117,7 @@
     font-size: 16px;
   }
 
-  &:hover,
-  &:focus-visible {
+  @include interactive($hover: true, $focus: true) {
     color: var(--theme-accent-primary);
 
     :global(.app-icon) {

src/app/dim-ui/SetFilterButton.m.scss

@@ -1,3 +1,5 @@
+@use '../variables.scss' as *;
+
 .setFilterButton {
   display: inline-block;
   cursor: pointer;
@@ -6,7 +8,8 @@
   padding: 0 6px;
   border-radius: 4px;
   text-align: center;
-  &:hover {
+
+  @include interactive($hover: true) {
     background-color: #68a0b7;
     color: #222;
   }

src/app/dim-ui/Sheet.m.scss

@@ -91,9 +91,8 @@ $control-color: rgba(255, 255, 255, 0.5);
     width: 24px;
     font-size: 24px;
   }
-  &:active,
-  &:hover,
-  &:focus-visible {
+
+  @include interactive($hover: true, $active: true, $focus: true) {
     color: var(--theme-accent-primary);
   }
 }

src/app/dim-ui/TileGrid.m.scss

@@ -31,7 +31,8 @@
   gap: 8px;
   box-sizing: border-box;
   position: relative;
-  &:hover {
+
+  @include interactive($hover: true) {
     background-color: rgba(255, 255, 255, 0.1);
   }
   &:focus-visible {

src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss

@@ -18,7 +18,8 @@
   span {
     font-size: 18px;
   }
-  &:hover {
+
+  @include interactive($hover: true) {
     color: black;
     background-color: var(--theme-accent-primary);
   }
@@ -71,7 +72,7 @@
 
   padding: 2px;
 
-  &:hover {
+  @include interactive($hover: true) {
     color: var(--theme-text-invert);
     background-color: var(--theme-accent-primary);
   }