Screenshot container using the same brightness change as the links. (#8555)

Author: isoos

pkg/web_css/lib/src/_base.scss

@@ -125,17 +125,7 @@ a {
     text-decoration: underline;
   }
 
-  .light-theme & {
-    &:hover {
-      filter: brightness(80%);
-    }
-  }
-
-  .dark-theme & {
-    &:hover {
-      filter: brightness(120%);
-    }
-  }
+  @include variables.brightness-on-hover;
 }
 
 main {

pkg/web_css/lib/src/_list.scss

@@ -228,14 +228,8 @@
     min-width: 102px;
     margin-top: 10px;
     cursor: pointer;
-  }
-
-  .packages-screenshot-thumbnail {
-    transition: 200ms filter;
-  }
 
-  .packages-screenshot-thumbnail:hover {
-    filter: brightness(50%);
+    @include variables.brightness-on-hover;
   }
 
   .packages-title {

pkg/web_css/lib/src/_variables.scss

@@ -281,6 +281,22 @@
   }
 }
 
+@mixin brightness-on-hover {
+  transition: 0.3s filter;
+
+  .light-theme & {
+    &:hover {
+      filter: brightness(80%);
+    }
+  }
+
+  .dark-theme & {
+    &:hover {
+      filter: brightness(120%);
+    }
+  }
+}
+
 $device-desktop-min-width: 641px;
 $device-mobile-max-width: 640px;
 $device-tablet-max-width: 979px;