🔹 Card-mod - Add css styles to any lovelace card

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:
image
Otherwise a standard color is displayed (also when the player is idle):
image
How to change the color:
image
image

Code
type: media-control
entity: media_player.kodi_iiyama
card_mod:
  style: |
    .background.no-image > * {
      background-color: cyan;
    }   

More examples are described here.

3 Likes