Help needed with Paper Buttons Row

Configuration Frontend
1

I made a remote with a simple “display”, but after the latest update of Paper Buttons Row all the display CSS styling stopped working. I’ve been looking at the code and comparing it to the repository guide for two days now, and I’m completely stuck. Could someone please take a glance at it and tell me what I’m missing?

Paper Buttons Row - GitHub

Skärmbild 2021-02-28 165003
Skärmbild 2021-02-28 165003351×537 16.3 KB

type: 'custom:mod-card'
card_mod:
  style: |
    ha-card {
      border: 4px outset rgb(60,60,60);
      border-radius: 30px;
      padding: 20px 20px 20px 20px;
      background: rgb(40,40,40);
      text-align: center;
    }
card:
  type: vertical-stack
  title: Logitech Harmony
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          color_type: blank-card
          styles:
            card:
              - height: 15px
    - type: horizontal-stack
      cards:
        - type: 'custom:paper-buttons-row'
          buttons:
            - entity: sensor.harmony_hub
              layout: icon|state
              state_icons:
                Apple TV: 'hass:apple'
                Xbox 360: 'hass:microsoft-xbox'
                PS4 PRO: 'hass:sony-playstation'
                Bluetooth: 'hass:bluetooth'
                Chromecast: 'hass:cast'
                Apple TV (Headphones): 'hass:headphones'
                PowerOff: 'hass:power'
              name: true
              state_text:
                Apple TV: Apple TV
                Xbox 360: Xbox 360
                PS4 PRO: PS4 PRO
                Bluetooth: Bluetooth
                Chromecast: Chromecast
                Apple TV (Headphones): Apple TV (Headphones)
                PowerOff: Power Off
              state-styles:
                Apple TV:
                  icon:
                    color: 'rgb(253,216,53)'
                    size: 25px
                  name:
                    color: 'rgb(7,155,229)'
                  button:
                    background: 'linear-gradient(to bottom, #101010 5%, #000000 100%)'
                    height: 45px
                    width: 200px
                    border: '4px outset rgb(75,75,75)'
                    border-radius: 15px
                Xbox 360:
                  icon:
                    color: 'rgb(253,216,53)'
                    size: 25px
                  name:
                    color: 'rgb(7,155,229)'
                  button:
                    background: 'linear-gradient(to bottom, #101010 5%, #000000 100%)'
                    height: 45px
                    width: 200px
                    border: '4px outset rgb(75,75,75)'
                    border-radius: 15px
                PS4 PRO:
                  icon:
                    color: 'rgb(253,216,53)'
                    size: 25px
                  name:
                    color: 'rgb(7,155,229)'
                  button:
                    background: 'linear-gradient(to bottom, #101010 5%, #000000 100%)'
                    height: 45px
                    width: 200px
                    border: '4px outset rgb(75,75,75)'
                    border-radius: 15px
                Chromecast:
                  icon:
                    color: 'rgb(253,216,53)'
                    size: 25px
                  name:
                    color: 'rgb(7,155,229)'
                  button:
                    background: 'linear-gradient(to bottom, #101010 5%, #000000 100%)'
                    height: 45px
                    width: 200px
                    border: '4px outset rgb(75,75,75)'
                    border-radius: 15px
                Apple TV (Headphones):
                  icon:
                    color: 'rgb(253,216,53)'
                    size: 25px
                  name:
                    color: 'rgb(7,155,229)'
                  button:
                    background: 'linear-gradient(to bottom, #101010 5%, #000000 100%)'
                    height: 45px
                    width: 200px
                    border: '4px outset rgb(75,75,75)'
                    border-radius: 15px
                PowerOff:
                  icon:
                    color: 'rgb(7,115,158)'
                    size: 25px
                  name:
                    color: 'rgb(7,115,158)'
                  button:
                    background: 'linear-gradient(to bottom, #101010 5%, #000000 100%)'
                    height: 45px
                    width: 200px
                    border: '4px outset rgb(20,20,20)'
                    border-radius: 15px
    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          color_type: blank-card
          styles:
            card:
              - height: 15px
    - type: horizontal-stack
      cards:
        - type: markdown
          content: Apple TV
          card_mod:
            style: |
              ha-card {
                  background-color: transparent; border: none; box-shadow: none;
                  text-align: center;
                  height: 10px
                  width: 90px
                  padding: 0px 0px 0px 0px;
              }
        - type: markdown
          content: Xbox 360
          card_mod:
            style: |
              ha-card {
                  background-color: transparent; border: none; box-shadow: none;
                  text-align: center;
                  height: 10px
                  width: 90px
                  padding: 0px 0px 0px 0px;
              }
        - type: markdown
          content: PS4 Pro
          card_mod:
            style: |
              ha-card {
                  background-color: transparent; border: none; box-shadow: none;
                  text-align: center;
                  height: 10px
                  width: 90px
                  padding: 0px 0px 0px 0px;
              }
    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          color_type: blank-card
        - type: 'custom:button-card'
          entity: script.40950206
          icon: 'hass:apple'
          styles:
            card:
              - border: '4px outset rgb(75,75,75)'
              - border-radius: 15px
              - height: 90px
              - width: 90px
              - margin: 0px 0px 0px 0px
              - box-shadow: '0px 0px 0px 0px rgb(99,99,99)'
              - background: 'linear-gradient(to bottom, #404040 5%, #202020 100%)'
            icon:
              - color: 'rgb(7,155,229)'
            name:
              - color: 'rgb(225,225,225)'
          tap_action:
            action: toggle
          show_name: false
          name: Apple TV
          hold_action:
            action: none
        - type: 'custom:button-card'
          color_type: blank-card
        - type: 'custom:button-card'
          entity: script.36812634
          icon_height: 30px
          icon: 'hass:microsoft-xbox'
          styles:
            card:
              - border: '4px outset rgb(75,75,75)'
              - border-radius: 15px
              - height: 90px
              - width: 90px
              - margin: 0px 0px 0px 0px
              - box-shadow: '0px 0px 0px 0px rgb(99,99,99)'
              - background: 'linear-gradient(to bottom, #404040 5%, #202020 100%)'
            icon:
              - color: 'rgb(7,155,229)'
            name:
              - color: 'rgb(225,225,225)'
          tap_action:
            action: toggle
          show_name: false
          name: Xbox 360
          hold_action:
            action: none
        - type: 'custom:button-card'
          color_type: blank-card
        - type: 'custom:button-card'
          entity: script.36812788
          icon_height: 30px
          icon: 'hass:sony-playstation'
          styles:
            card:
              - border: '4px outset rgb(75,75,75)'
              - border-radius: 15px
              - height: 90px
              - width: 90px
              - margin: 0px 0px 0px 0px
              - box-shadow: '0px 0px 0px 0px rgb(99,99,99)'
              - background: 'linear-gradient(to bottom, #404040 5%, #202020 100%)'
            icon:
              - color: 'rgb(7,155,229)'
            name:
              - color: 'rgb(225,225,225)'
          tap_action:
            action: toggle
          show_name: false
          name: PS4 Pro
          hold_action:
            action: none
        - type: 'custom:button-card'
          color_type: blank-card
    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          color_type: blank-card
          styles:
            card:
              - height: 5px
    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          color_type: blank-card
          styles:
            card:
              - width: 100%
        - type: markdown
          content: Chromecast
          card_mod:
            style: |
              ha-card {
                  background-color: transparent; border: none; box-shadow: none;
                  text-align: center;
                  height: 10px
                  width: 90px
                  padding: 0px 0px 0px 0px;
              }
        - type: 'custom:button-card'
          color_type: blank-card
          styles:
            card:
              - width: 100%
        - type: markdown
          content: (Headphones)
          card_mod:
            style: |
              ha-card {
                  background-color: transparent; border: none; box-shadow: none;
                  text-align: center;
                  height: 10px
                  width: 90px
                  padding: 0px 0px 0px 0px;
              }
        - type: 'custom:button-card'
          color_type: blank-card
          styles:
            card:
              - width: 100%
    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          color_type: blank-card
        - type: 'custom:button-card'
          entity: script.46807215
          icon_height: 30px
          icon: 'hass:cast'
          styles:
            card:
              - border: '4px outset rgb(75,75,75)'
              - border-radius: 15px
              - height: 90px
              - width: 90px
              - margin: 0px 0px 0px 0px
              - box-shadow: '0px 0px 0px 0px rgb(99,99,99)'
              - background: 'linear-gradient(to bottom, #404040 5%, #202020 100%)'
            icon:
              - color: 'rgb(7,155,229)'
            name:
              - color: 'rgb(225,225,225)'
          tap_action:
            action: toggle
          show_name: false
          name: Chromecast
          hold_action:
            action: none
        - type: 'custom:button-card'
          color_type: blank-card
          styles:
            card:
              - height: 5px
        - type: 'custom:button-card'
          entity: script.46807139
          icon_height: 30px
          icon: 'hass:headphones'
          styles:
            card:
              - border: '4px outset rgb(75,75,75)'
              - border-radius: 15px
              - height: 90px
              - width: 90px
              - margin: 0px 0px 0px 0px
              - box-shadow: '0px 0px 0px 0px rgb(99,99,99)'
              - background: 'linear-gradient(to bottom, #404040 5%, #202020 100%)'
            icon:
              - color: 'rgb(7,155,229)'
            name:
              - color: 'rgb(225,225,225)'
          tap_action:
            action: toggle
          show_name: false
          name: Apple TV (Headphones)
          hold_action:
            action: none
        - type: 'custom:button-card'
          color_type: blank-card
    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          color_type: blank-card
          styles:
            card:
              - height: 90px
1 Like
2

I am having the same problem. The correct conditional colors are not showing and the centering is off. Interestingly, it all looks fine in the Android mobile app. I believe the problem started with core 2021.3, but it is difficult to tell cause & effect with a few different versions changing at the same time.