only use hover state if hover is available

WJTB-Radio · Apr 3, 2024 · 22b892d · 22b892d
1 parent c138c90
commit 22b892d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/src/app/(pages)/navigation.module.scss b/src/app/(pages)/navigation.module.scss
@@ -90,8 +90,11 @@
 	transition: color 0.15s ease-out;
 }
 
-.collabsible_button:hover {
-	color: var(--text-highlight-color);
+@media (hover: hover) {
+	.collabsible_button:hover {
+		color: var(--text-highlight-color);
+		border-left-color: var(--text-highlight-color);
+	}
 }
 
 .collabsible_button::before {
@@ -113,7 +116,3 @@
 .collabsible_button[data-state='open']::before {
 	rotate: 90deg;
 }
-
-.collabsible_button:hover::before {
-	border-left-color: var(--text-highlight-color);
-}
diff --git a/src/app/(pages)/players/volume.module.scss b/src/app/(pages)/players/volume.module.scss
@@ -122,9 +122,11 @@
 	background: transparent; /* Otherwise white in Chrome */
 }
 
-.slider:hover {
-	--thumb-color: var(--text-highlight-color);
-	--track-color: var(--text-shadow-color);
+@media(hover: hover) {
+	.slider:hover {
+		--thumb-color: var(--text-highlight-color);
+		--track-color: var(--text-shadow-color);
+	}
 }
 
 .slider::-webkit-slider-thumb {

diff --git a/src/app/(pages)/shows/shows.module.scss b/src/app/(pages)/shows/shows.module.scss
@@ -73,8 +73,10 @@
 	text-align: center;
 }
 
-.show:hover>h2 {
-	display: none;
+@media(hover: hover) {
+	.show:hover>h2 {
+		display: none;
+	}
 }
 
 .hover_card {
@@ -98,9 +100,11 @@
 	}
 }
 
-.show:hover .hover_card {
-	transform: scale(1) translate(0%, calc(50% - 6rem)) rotateY(0deg) rotateX(0deg) perspective(100px);
-	z-index: 1;
+@media(hover: hover) {
+	.show:hover .hover_card {
+		transform: scale(1) translate(0%, calc(50% - 6rem)) rotateY(0deg) rotateX(0deg) perspective(100px);
+		z-index: 1;
+	}
 }
 
 .day_buttons {
@@ -187,8 +191,10 @@
 	margin: 0;
 }
 
-.show:hover {
-	background-color: var(--bg3-color);
+@media(hover: hover) {
+	.show:hover {
+		background-color: var(--bg3-color);
+	}
 }
 
 .hover_card>h2 {