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

Ildar_Gabdullin · February 18, 2021, 6:00pm

Styling "custom:mini-media-player"

Font-size for all text:

type: 'custom:mini-media-player'
name: Player
toggle_power: true
entity: media_player.kodi_rpi_1
artwork: full-cover
card_mod:
  style: |
    ha-card {
      font-size: 25px !important;
    }

Colored player’s name (+font-size):

card_mod:
  style: |
    .entity__info__name {
      font-size: 25px !important;
      color: magenta !important;
    }

Colored movie’s (or song) name (+font-size):

card_mod:
  style: |
    .entity__info__media {
      font-size: 25px !important;
      color: magenta !important;
    }

Colored icon:

card_mod:
  style: |
    .entity__icon {
      color: magenta !important;
    }

Alternatively - the icon may be styled by using a stock “--mmp-icon-color” variable:

card_mod:
  style: |
    ha-card {
      --mmp-icon-color: cyan !important;
    }

Colored “power” button:

card_mod:
  style:
    mmp-powerstrip $: |
      ha-icon-button {
        color: cyan !important;
      }

Colored buttons (except “power” button):

card_mod:
  style:
    mmp-media-controls $: |
      ha-icon-button {
        color: cyan !important;
      }

Colored play-control buttons:

card_mod:
  style:
    mmp-media-controls $: |
      .flex.mmp-media-controls__media ha-icon-button {
        color: cyan !important;
      }

Colored play-control buttons (different colors):
(Updated 28.02.21 because of this post)

card_mod:
  style:
    mmp-media-controls $: |
      .flex.mmp-media-controls__media ha-icon-button:nth-child(1) {
        color: cyan !important;
      }
      .flex.mmp-media-controls__media ha-icon-button:nth-child(2) {
        color: red !important;
      }
      .flex.mmp-media-controls__media ha-icon-button:nth-child(3) {
        color: lightgreen !important;
      }

Colored “mute” button:

    card_mod:
      style:
        mmp-media-controls $: |
          .mmp-media-controls__volume.flex ha-icon-button {
            color: cyan !important;
          }

Colored progress bar:

    card_mod:
      style:
        mmp-progress $: |
          .mmp-progress:before {
            background-color: cyan !important;
          }
        .: |
          mmp-progress {
            --mmp-accent-color: magenta;
          }

Colored volume slider:

    card_mod:
      style: |
        ha-card {
          --md-slider-inactive-track-color: cyan;
          --md-slider-active-track-color: red;
          --md-slider-handle-color: green;
        }

Transparent cover:

card_mod:
  style: |
    .mmp__bg .cover {
      opacity: 0.1 !important;
    }

Alternatively - the opacity may be styled by using a stock “--mmp-artwork-opacity” variable:

card_mod:
  style: |
    ha-card {
      --mmp-artwork-opacity: 0.3 !important;
    }

Colored shortcut buttons:

type: custom:mini-media-player
name: Player
toggle_power: true
card_mod:
  style:
    mmp-shortcuts $: |
      mmp-button ha-icon {
        color: cyan;
      }
      mmp-button {
        background-color: green;
      }
artwork: full-cover
entity: media_player.kodi_iiyama
shortcuts:
  columns: 4
  buttons:
    - icon: mdi:dog
      type: source
      id: aaaa
    - icon: mdi:dog
      type: script
      id: script.test_script
    - icon: mdi:dog
      type: script
      id: script.test_script
    - icon: mdi:dog
      type: script
      id: script.test_script

For some particular button:

card_mod:
  style:
    mmp-shortcuts $: |
      mmp-button:nth-of-type(2) ha-icon {
        color: cyan;
      }
      mmp-button:nth-of-type(2) {
        background-color: green;
      }

Colored shortcut name - similarly to colored icon:

card_mod:
  style:
    mmp-shortcuts $: |
      mmp-button span {
        color: cyan;
      }
      mmp-button {
        background-color: green;
      }

More examples are described here.