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 +
+ 4. Enable extra buttons when hovering over cards on desktop + +- 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`. +
+ +
### 🆗 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%;