fix: Color inversion of sponsors on hover/focus (#1132)

preactjs · May 19, 2024 · 9592f32 · 9592f32
1 parent aee18ed
commit 9592f32
Showing 1 changed file with 15 additions and 16 deletions.
diff --git a/src/components/sponsors/style.module.css b/src/components/sponsors/style.module.css
@@ -33,24 +33,8 @@
 		color: transparent !important;
 		/* Fix IE 11 border */
 		background: none !important;
-
-		&:hover svg,
-		&:focus svg {
-			filter: grayscale(0);
-			opacity: 1;
-		}
-
-		@media (prefers-color-scheme: dark) {
-			&:hover svg,
-			&:focus svg {
-				filter: invert(0) hue-rotate(0deg) grayscale(0)
-					drop-shadow(0 0 0.5px #fff) drop-shadow(0 5px 10px #000)
-					drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
-			}
-		}
 	}
 
-	img,
 	svg {
 		height: 3rem;
 		width: auto;
@@ -64,5 +48,20 @@
 		@media (prefers-color-scheme: dark) {
 			filter: invert(0.862745) hue-rotate(180deg) grayscale(1);
 		}
+
+		&:hover,
+		&:focus {
+			filter: grayscale(0);
+			opacity: 1;
+		}
+
+		@media (prefers-color-scheme: dark) {
+			&:hover,
+			&:focus {
+				filter: invert(0) hue-rotate(0deg) grayscale(0)
+					drop-shadow(0 0 0.5px #fff) drop-shadow(0 5px 10px #000)
+					drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
+			}
+		}
 	}
 }