From 31e05d56174f09d73f49a7bedf5fcf2135ddf7a3 Mon Sep 17 00:00:00 2001
From: perennial <mail@perennialte.ch>
Date: Tue, 8 Oct 2024 15:44:22 +1100
Subject: [PATCH] add hover darkening effect for thumbnails

---
 assets/css/bootstrap-style.css               | 7 +++++++
 assets/css/bootstrap-style.scss              | 8 ++++++++
 assets/views/fragments/novel-tn.jet.html     | 2 +-
 assets/views/fragments/thumbnail-dt.jet.html | 2 +-
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/assets/css/bootstrap-style.css b/assets/css/bootstrap-style.css
index b07e0dc..6aa98d6 100644
--- a/assets/css/bootstrap-style.css
+++ b/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;
diff --git a/assets/css/bootstrap-style.scss b/assets/css/bootstrap-style.scss
index fb8bb92..bae5aa6 100644
--- a/assets/css/bootstrap-style.scss
+++ b/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;
diff --git a/assets/views/fragments/novel-tn.jet.html b/assets/views/fragments/novel-tn.jet.html
index dd16ece..9091625 100644
--- a/assets/views/fragments/novel-tn.jet.html
+++ b/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">
diff --git a/assets/views/fragments/thumbnail-dt.jet.html b/assets/views/fragments/thumbnail-dt.jet.html
index 2eb7f09..9ef6e19 100644
--- a/assets/views/fragments/thumbnail-dt.jet.html
+++ b/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">