Increase size of play/pause button (with card_mod) ?

[LeiChat]

Would be grateful for advice on how to increase the size of the button, please.

Looking at the card_mod example here: #823 and the rendered HTML for my dashboard, would it be mdc-icon-button I need to apply a style against?

[ColtonYYZ]

Try this:

    card_mod:
      style: |
        .entity__icon {
          --mdc-icon-size: 80px !important;
        }

[LeiChat]

Thanks for the suggestion. Couldn't get that to work though.

FWIW, I was able to tweak the card padding using the following:

card_mod:
  style: |
    div.mmp-player {
      padding-top: 6px !important;
      padding-bottom: 6px !important;
    }

I tried adding the --mdc-icon-size nested inside the div.mmp-player which did increase the size of the button container, which resulted in the play icon being pushed outside of the circle background.

I suppose I am looking to increase the svg icon and the circle, so it's easier to see and tap on the tablet.

ha-icon-button {
   transform: scale(1.2);
}
ha-svg-icon {
   transform: scale(1.5);
}

The above works when hacking the page using browser dev tools. But figuring out how to add that with card_mod is a different story.

[ColtonYYZ]

Yeah, this card uses a lot of VAR's for the calculations. This one is so convoluded!!

--mdc-icon-size: calc(var(--mmp-unit)* 0.6) !important;

When trying to figure that out, it goes deeper:

--mmp-unit: calc(var(--mmp-scale) * 40px)

Which goes deeper!

--mmp-scale: var(--mini-media-player-scale, 1);

So this means that the size of the icon is calculated using this formula:

--mdc-icon-size: calc(var((calc(var(var(--mini-media-player-scale, 1)) * 40px)))* 0.6)

LOL. Wouldn't it just be easier to say: 24px? Because I think that's what it turns out to be. OY!

Edit: Oddly enough, if you change the 0.6 in the following, to say 0.4, it makes the icon smaller. I tried 0.9 but it's hard for me to see if it actually changed it bigger slightly or not. If it did, maybe it's enough for your needs? Dunno.

        ha-card {
          --mdc-icon-size: calc(var(--mmp-unit)* 0.6) !important;
        }

[ColtonYYZ]

IGNORE MY PREVIOUS REPLIES. I FORGET THE OBVIOUS SOMETIMES. Just use the "Scale" option.. Hahaha

  - type: custom:mini-media-player
    entity: media_player.colton_s_echo_show
    artwork: none
    background: none

    scale: "10"

    mini-media-player-background-opacity: "0"
    mini-media-player-overlay-color: rgba(0,0,0,0)
    mini-media-player-overlay-color-stop: 100%
    mini-media-player-progress-height: 10px
    hide:
      name: true
      icon: true
      info: true
      power: true
      source: true
      sound_mode: true
      group_button: true
      controls: false
      prev: true
      next: true
      play_pause: false
      play_stop: true
      jump: true
      volume: true
      volume_level: true
      mute: true
      progress: true
      runtime: true
      runtime_remaining: true
      artwork_border: true
      power_state: true
      icon_state: true
      shuffle: true
      repeat: true
      state_label: true

[LeiChat]

Thank you. I'll make a note of 'scale' as I'm sure it will come in use for another dashboard.
In this instance I only want to scale the media controls button.

Applying styles for --mdc-icon-size seems to affect the container of the svg icon, rather than the button.

[ColtonYYZ]

Yes, I am aware that you only want to increase the control buttons. The code I provided you, only scales the Play/Pause button, as everything else is set to "TRUE" which means "Hidden". Play/Pause is set to FALSE so it would be the only button shown.

play_pause: false

You would/could repeat this code but turning on only the buttons you want to increase in size by increasing the number next to "scale"

😎

[LeiChat]

ha-icon-button {
    transform: scale(1.2);
}

and

svg {
    transform: scale(1.5);
}

has the desired effect but I am adding those in the browser dev tools window, rather than card_mod styles.