dashboards: fix mini-media-player gradient and artwork centering in screensaver #7

Merged

jmaroeder merged 1 commit from jmaroeder/wallpanel-screensaver-layout-fix into main

2026-06-12 19:32:33 +00:00

jmaroeder commented

2026-06-12 19:32:16 +00:00

Owner

Summary

The dark gradient overlay at the bottom of the screensaver album art came from .mmp-player inside mini-media-player's shadow DOM — it always gets linear-gradient(to top, rgba(0,0,0,0.5) 25%, transparent 100%) for any full-cover* artwork mode, even with all controls hidden
The album art centering issue: .cover defaults to background-size: cover; the full-cover-fit override to contain only applies when both artwork='full-cover-fit' and --has-artwork class are present on ha-card
The previous card_mod targeted ha-card (the host element) — this never reached .cover or .mmp-player inside mini-media-player's shadow root

Fix

Target .cover and .mmp-player directly in card_mod CSS (which is injected into mini-media-player's shadow root):

.cover { background-size: contain !important; background-position: center center !important; }
.mmp-player { background: transparent !important; }

Test plan

Let Fire HD wallpanel idle into screensaver while music is playing
Confirm album art is centered with black letterbox bars (not cropped/filled)
Confirm no dark gradient overlay at bottom of artwork

## Summary - The dark gradient overlay at the bottom of the screensaver album art came from `.mmp-player` inside mini-media-player's shadow DOM — it always gets `linear-gradient(to top, rgba(0,0,0,0.5) 25%, transparent 100%)` for any `full-cover*` artwork mode, even with all controls hidden - The album art centering issue: `.cover` defaults to `background-size: cover`; the `full-cover-fit` override to `contain` only applies when both `artwork='full-cover-fit'` and `--has-artwork` class are present on ha-card - The previous card_mod targeted `ha-card` (the host element) — this never reached `.cover` or `.mmp-player` inside mini-media-player's shadow root ## Fix Target `.cover` and `.mmp-player` directly in card_mod CSS (which is injected into mini-media-player's shadow root): ```css .cover { background-size: contain !important; background-position: center center !important; } .mmp-player { background: transparent !important; } ``` ## Test plan - [ ] Let Fire HD wallpanel idle into screensaver while music is playing - [ ] Confirm album art is centered with black letterbox bars (not cropped/filled) - [ ] Confirm no dark gradient overlay at bottom of artwork

jmaroeder added 1 commit

2026-06-12 19:32:16 +00:00

dashboards: fix mini-media-player gradient and artwork centering in screensaver

Deploy to Home Assistant / deploy (push) Successful in 5s

Details

1f770fbc65

Target .cover and .mmp-player directly in card_mod since they live in mini-media-player's shadow root — background-* on ha-card never reached .cover's sizing/position. Removes the overlay gradient from .mmp-player which shows even when all controls are hidden.