Mushroom card media control button size issue

Configuration Frontend
1

I am trying to edit the size of the mushroom card media control buttons, but the button gets cropped

image
image483Ă—319 4.82 KB

Can you tell me what i am missing here?

card_mod:
      style:
        mushroom-media-player-media-control$:
          mushroom-button:nth-child(1)$: |
            .button {
              height: 100px !important;
              width: 100px !important;
            }
        .: |

          ha-card {
            height: 300px !important;
          }
2

Try quoting this yaml key as the colon in the selector will be invalid yaml.

3

Just struggled through this myself. There is apparently a “mushroom-button-group” containing the media player buttons that also need to be resized. Example:

      card_mod:
        style:
          .: |
            ha-card {
              background: none !important;
              border:none;
              height: 100px !important;
            }
          mushroom-media-player-volume-control$:
            mushroom-button-group$: |
              .container {
                justify-content: center !important;
                height: 80px;
              }
            mushroom-button:nth-child(1)$: |
              .button ::slotted(*) {
                --control-icon-size: 40px;
              }
              .button {
                height: 80px !important;
              }
            mushroom-button:nth-child(2)$: |
              .button ::slotted(*) {
                --control-icon-size: 40px;
              }
              .button {
                height: 80px !important;
              }
2 Likes
4

@Paradox52525

Very nice. I hove only one issue left. When i resize the volumen button, it is out outside the scope.

image
image494Ă—229 4.8 KB

card_mod:
  style:
    mushroom-media-player-media-control$:
      mushroom-button-group$: |
        .container {
          justify-content: center !important;
          height: 100px;
        }
      mushroom-button:nth-child(1)$: |
        .button ::slotted(*) {
          --control-icon-size: 90px;
        }
        .button {
              height: 100px !important;
              width: 100px !important;
            }
      mushroom-button:nth-child(2)$: |
        .button ::slotted(*) {
          --control-icon-size: 50px;
        }
        .button {
              height: 100px !important;
              width: 100px !important;
            }
      mushroom-button:nth-child(3)$: |
        .button ::slotted(*) {
          --control-icon-size: 50px;
        }
        .button {
              height: 100px !important;
              width: 100px !important;
            }
      mushroom-button:nth-child(4)$: |
        .button ::slotted(*) {
          --control-icon-size: 50px;
        }

    mushroom-button:nth-child(2)$: |
      .button ::slotted(*) {
        --control-icon-size: 90px;
      }
      .button {
              height: 100px !important;
              width: 100px !important;
            }