Styling stock Media player card
Colored player’s name & icon:
Code
type: media-control
entity: media_player.kodi_rpi_1
style:
.player:
.top-info: |
.icon-name {
color: red;
}
Colored player’s name:
Code
type: media-control
entity: media_player.kodi_rpi_1
style:
.player:
.top-info: |
.icon-name div {
color: red;
}
Colored player’s icon:
Code
type: media-control
entity: media_player.kodi_rpi_1
style:
.player:
.top-info: |
.icon-name ha-state-icon {
color: red;
}
Colored movie’s title:
Code
type: media-control
entity: media_player.kodi_rpi_1
style:
.player: |
.title-controls .media-info {
color: red;
}
Colored music album’s title & artist (different colors):
Note: the upper style (red) will be used for movie’s title too.
Code
type: media-control
entity: media_player.kodi_rpi_1
style:
.player: |
.title-controls .media-info {
color: red;
}
hui-marquee {
color: green;
}
Colored “more-info” button:
Code
type: media-control
entity: media_player.kodi_rpi_1
style:
.player:
.top-info: |
.more-info {
color: red;
}
Colored bottom buttons:
Code
type: media-control
entity: media_player.kodi_rpi_1
style:
.player: |
.title-controls .controls {
color: red;
}
Colored botom control buttons:
Code
type: media-control
entity: media_player.kodi_iiyama
card_mod:
style:
.player: |
.title-controls .controls ha-icon-button:not(.browse-media) {
color: red;
}
Colored “power” button:
Code
type: media-control
entity: media_player.kodi_iiyama
card_mod:
style:
.player: |
.title-controls .controls ha-icon-button:nth-child(1) {
color: red;
}
Colored botom control buttons (different colors):
Code
type: media-control
entity: media_player.kodi_iiyama
card_mod:
style:
.player: |
.title-controls .controls ha-icon-button:nth-child(1) {
color: cyan;
}
.title-controls .controls ha-icon-button:nth-child(2) {
color: green;
}
.title-controls .controls ha-icon-button:nth-child(3) {
color: red;
}
.title-controls .controls ha-icon-button:nth-child(4) {
color: magenta;
}
Colored “browse media” button:
Code
type: media-control
entity: media_player.kodi_rpi_1
style:
.player: |
.browse-media {
color: red;
}
Colored progress-bar:
Code
type: media-control
entity: media_player.kodi_iiyama
card_mod:
style: |
.player mwc-linear-progress {
--mdc-theme-primary: magenta !important;
--mdc-linear-progress-buffer-color: cyan !important;
}
Colored background:
When a media with a defined cover art is played, then the "background-color"
is automatically set dependingly on the cover:
Otherwise a standard color is displayed (also when the player is idle):
How to change the color:
Code
type: media-control
entity: media_player.kodi_iiyama
card_mod:
style: |
.background.no-image > * {
background-color: cyan;
}
More examples are described here.