add hover darkening effect for thumbnails

assets/css/bootstrap-style.css

@@ -12938,6 +12938,13 @@ textarea.form-control-lg {
   max-height: 40vh;
 }
 
+.thumbnail-hover-dark img {
+  transition: opacity 0.2s;
+}
+.thumbnail-hover-dark img:hover {
+  opacity: 0.8;
+}
+
 h1, .h1 {
   font-size: 1.75rem;
   font-weight: 700;

assets/css/bootstrap-style.scss

@@ -175,6 +175,14 @@ $utilities: map-merge(
   max-height: 40vh;
 }
 
+.thumbnail-hover-dark img {
+  transition: opacity 0.2s;  // Smooth transition when hovering
+
+  &:hover {
+    opacity: 0.8;  // Apply darkening effect
+  }
+}
+
 /// Custom heading sizes (e.g., h1 gets h3 size, h2 gets h4 size, etc.)
 h1 {
   font-size: $h3-font-size;

assets/views/fragments/novel-tn.jet.html

@@ -1,6 +1,6 @@
 <div class="col">
   <!-- NOTE: bg-charcoal-surface1 doesn't look that nice, but the inconsistent content of the cards means that we need a way to visually group them -->
-  <div class="custom-novel-card bg-charcoal-surface1 p-3 d-flex flex-column">
+  <div class="custom-novel-card bg-charcoal-surface1 p-3 d-flex flex-column thumbnail-hover-dark">
     <div class="row g-3 flex-grow-1">
       <div class="col-4 col-md-2">
         <a href="/novel/{{ .ID }}" class="text-decoration-none">

assets/views/fragments/thumbnail-dt.jet.html

@@ -3,7 +3,7 @@
 {{- hideR18G := CookieList["pixivfe-HideArtR18G"] }}
 {{- hideAi := CookieList["pixivfe-HideArtAI"] }}
 {{- AiType := isset(.AiType) ? .AiType : 0}}
-<div class="position-relative h-100">
+<div class="position-relative h-100 thumbnail-hover-dark">
   <!-- Placing the anchor element out here so that the div that contains the tags acts as a hyperlink -->
   <a target="{{ target }}" href="/artworks/{{ .ID }}" class="d-block h-100">
   <div class="position-absolute top-0 start-0 p-2 d-flex justify-content-between w-100">