From e5d2f2d94b661f3e1c284d908c6dea51c0355d4a Mon Sep 17 00:00:00 2001
From: Jan-Philipp Benecke <jan-philipp@bnck.me>
Date: Thu, 16 Jan 2025 10:53:16 +0100
Subject: [PATCH] Make media play button in media browser more visible when
 hovering (#23760)

---
 .../media-player/ha-media-player-browse.ts         | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index 5c20cf4a0b..38c0d29fe9 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -1106,7 +1106,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           position: absolute;
           transition: color 0.5s;
           border-radius: 50%;
-          top: calc(50% - 50px);
+          top: calc(50% - 40px);
           right: calc(50% - 35px);
           opacity: 0;
           transition: opacity 0.1s ease-out;
@@ -1117,12 +1117,17 @@ export class HaMediaPlayerBrowse extends LitElement {
           --mdc-icon-size: 48px;
         }
 
+        ha-card:hover .image {
+          filter: brightness(70%);
+          transition: filter 0.5s;
+        }
+
         ha-card:hover .play {
           opacity: 1;
         }
 
         ha-card:hover .play:not(.can_expand) {
-          color: var(--primary-color);
+          color: var(--primary-text-color);
         }
 
         ha-card:hover .play.can_expand {
@@ -1326,6 +1331,11 @@ export class HaMediaPlayerBrowse extends LitElement {
         ha-browse-media-tts {
           direction: var(--direction);
         }
+
+        ha-card:hover .play:not(.can_expand) {
+          background-color: var(--primary-color);
+          color: var(--text-primary-color);
+        }
       `,
     ];
   }