From 0f0d8bc1fafe4dadc146cabfac3b23c96d2e65f0 Mon Sep 17 00:00:00 2001
From: lscambo13 <ls.cambo13@gmail.com>
Date: Wed, 28 May 2025 08:56:57 -0700
Subject: [PATCH] New: Allow users to bring back extra card buttons on hover on
 desktop

---
 README.md                          | 13 +++++++++++++
 Theme/ElegantFin-theme-nightly.css | 17 ++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 86048bf..a5fdce6 100644
--- a/README.md
+++ b/README.md
@@ -103,6 +103,19 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 
 </details>
 
+<details>
+  <summary><i>4. Enable extra buttons when hovering over cards on desktop</i></summary>
+
+- To enable watched and favorite buttons at the bottom right corner of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage.
+  ```
+  :root{
+    --extraCardButtonsVisibility: block;
+  }
+  ```
+- To disable them again, simply remove this code block or replace `block` with `none`.
+</details>
+
+
 <hr>
 
 ### 🆗 Tested on 
diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css
index 339214c..d0d859b 100644
--- a/Theme/ElegantFin-theme-nightly.css
+++ b/Theme/ElegantFin-theme-nightly.css
@@ -78,6 +78,8 @@
 
     /* to revert to old icons, use 'Material Icons'*/
     --iconPack: 'Material Icons Round';
+
+    --extraCardButtonsVisibility: none;
 }
 
 html {
@@ -322,10 +324,23 @@ html {
     color: white;
 }
 
-.layout-desktop .cardOverlayButton-br {
+.layout-desktop .cardOverlayButton-br button[data-action="menu"] {
     display: none;
 }
 
+.layout-desktop .cardOverlayButton-br,
+[dir=ltr].layout-desktop .cardOverlayButton-br {
+    bottom: .5em;
+    right: .5em;
+    display: var(--extraCardButtonsVisibility);
+    text-shadow: 0 0 4px #000000cf;
+}
+
+.layout-desktop .cardOverlayButton-br button {
+    color: var(--textColor);
+    text-shadow: 0 0 4px #000000cf;
+}
+
 .layout-mobile .cardOverlayButton {
     padding: 1em;
     font-size: 75%;