From 2c070e21df8c078880e33a80a6e996b256aae814 Mon Sep 17 00:00:00 2001
From: lscambo13 <ls.cambo13@gmail.com>
Date: Tue, 28 Jan 2025 13:48:34 -0800
Subject: [PATCH] dev: Reworked how floating mini buttons are styled, making
 their color easier to customise using a variable

---
 Theme/ElegantFin-theme-nightly.css | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css
index a7042aa..615b0e5 100644
--- a/Theme/ElegantFin-theme-nightly.css
+++ b/Theme/ElegantFin-theme-nightly.css
@@ -37,6 +37,9 @@
     --activeColor: rgb(119, 91, 244);
     --tableBodyColor: rgb(31 41 55 / 1);
     --uiAccentColor: rgb(117 111 226);
+    /* --btnPlayColor: rgb(41 154 93); */
+    --btnPlayColor: rgb(32, 32, 32);
+    --btnPlayBorderColor: color-mix(in srgb, var(--btnPlayColor), rgb(255, 255, 255) 5%);
     --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
     --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%);
     --hoverGradientA: linear-gradient(130deg, rgb(255 255 255 / 35%) 20%, rgb(255 255 255 / 15%) 40%);
@@ -246,17 +249,18 @@ html {
 }
 
 .cardOverlayContainer>.cardOverlayFab-primary,
-.listItemImageButton {
-    background-color: rgba(0, 0, 0, 0.9);
-    color: var(--textColor);
-    border: var(--defaultBorder);
+.listItemImageButton,
+.layout-mobile .cardOverlayButton-br>.cardOverlayButtonIcon {
+    background-color: var(--btnPlayColor) !important;
+    color: white;
+    border: var(--defaultLighterBorder);
+    border-color: var(--btnPlayBorderColor);
     font-size: 75%;
 }
 
 .cardOverlayContainer>.cardOverlayFab-primary:hover,
 .listItemImageButton:hover {
-    background-color: rgba(0, 0, 0, 0.75) !important;
-    color: unset;
+    color: white;
 }
 
 .layout-desktop .cardOverlayButton-br {
@@ -267,12 +271,6 @@ html {
     padding: .425em;
 }
 
-.layout-mobile .cardOverlayButton-br>.cardOverlayButtonIcon {
-    border: var(--defaultLighterBorder);
-    border-color: rgba(23, 23, 23, 0.6);
-    backdrop-filter: var(--blurSmallest);
-}
-
 .layout-mobile .portraitCard .cardOverlayButton-br,
 .layout-mobile .backdropCard .cardOverlayButton-br,
 .layout-mobile .cardOverlayButton-br[data-action="menu"] {
@@ -1689,11 +1687,15 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .paper-icon-button-light:hover:not(:disabled) {
+    .paper-icon-button-light:hover:not(:disabled, .cardOverlayButton) {
         color: #fff;
         background-color: rgb(255 255 255 / 5%);
     }
 
+    .actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check[style*="hidden"]):hover {
+        background-color: rgba(255, 255, 255, 0.125);
+    }
+
     .emby-select-withcolor:hover:not(.emby-select[disabled], :focus),
     .emby-input:hover:not(:focus),
     .emby-textarea:hover:not(:focus) {