Make media play button in media browser more visible when hovering (#23760)

This commit is contained in:
Jan-Philipp Benecke 2025-01-16 10:53:16 +01:00 committed by GitHub
parent 57edb86c5c
commit e5d2f2d94b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

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