Creating a visually interesting themed remote control using the glance card with card-mod

I have been using the harmony integration to create a remote control in an glance card that pops up when I activate certain devices. In it’s basic configuration, it wasn’t as easy as it could be to pick the right button with a quick glance. So I decided to use the black art of card-mod to fix this. This is as far as I have got.

Ideally I would like there to be either horizontal gaps between the buttons with a background as well as vertical gaps, or possibly no gaps at all. Despite a good couple of hours looking at the page source, my CSS is weak and I cannot get it to work.

Here is the source for the above. Any suggestions gratefully received.

This also causes the button highlight on press to look a little odd. That’s low priority, but something that would make that fit with the theme would also be welcome.

type: conditional
conditions:
  - entity: switch.living_room_watch_a_blu_ray
    state: 'on'
card:
  type: glance
  card_mod:
    style: |
      .: |
        #states > * {
            margin: -1px 0px !important;
        }
  entities:
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:rewind
      name: Rew
      card_mod:
        style: |
          :host {
            background-color: var(--light-primary-color);
            color: var(--primary-background-color);
            --paper-item-icon-color: --var(--primary-background-color);
          }
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: Rewind
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:arrow-up-bold-outline
      name: Up
      card_mod:
        style: |
          :host {
            background-color: var(--primary-color);
            color: var(--primary-background-color);
            --paper-item-icon-color: --var(--primary-background-color);
          }
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: DirectionUp
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:fast-forward
      name: FF
      card_mod:
        style: |
          :host {
            background-color: var(--light-primary-color);
            color: var(--primary-background-color);
            --paper-item-icon-color: --var(--primary-background-color);
          }
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: FastForward
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:home
      name: Home
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: Home
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:arrow-left-bold-outline
      name: Left
      card_mod:
        style: |
          :host {
            background-color: var(--primary-color);
            color: var(--primary-background-color);
            --paper-item-icon-color: --var(--primary-background-color);
          }
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: DirectionLeft
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:circle-outline
      name: Select
      card_mod:
        style: |
          :host {
            background-color: var(--primary-color);
            color: var(--primary-background-color);
            --paper-item-icon-color: --var(--primary-background-color);
          }
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: Select
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:arrow-right-bold-outline
      name: Right
      card_mod:
        style: |
          :host {
            background-color: var(--primary-color);
            color: var(--primary-background-color);
            --paper-item-icon-color: --var(--primary-background-color);
          }
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: Direction Right
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:menu
      name: Menu
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: Menu
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:skip-previous
      name: Ch-
      card_mod:
        style: |
          :host {
            background-color: var(--light-primary-color);
            color: var(--primary-background-color);
            --paper-item-icon-color: --var(--primary-background-color);
          }
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: ChapterPrev
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:arrow-down-bold-outline
      name: Down
      card_mod:
        style: |
          :host {
            background-color: var(--primary-color);
            color: var(--primary-background-color);
            --paper-item-icon-color: --var(--primary-background-color);
          }
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: DirectionDown
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:skip-next
      name: Ch+
      card_mod:
        style: |
          :host {
            background-color: var(--light-primary-color);
            color: var(--primary-background-color);
            --paper-item-icon-color: --var(--primary-background-color);
          }
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: ChapterNext
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:arrange-bring-to-front
      name: Title
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: Title
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:play
      name: Play
      card_mod:
        style: |
          :host {
            color: var(--state-icon-active-color);
            --paper-item-icon-color: var(--state-icon-active-color);
          }
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: Play
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:pause
      name: Pause
      card_mod:
        style: |
          :host {
            color: var(--state-icon-active-color);
            --paper-item-icon-color: var(--state-icon-active-color);
          }
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: Pause
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:stop
      name: Stop
      card_mod:
        style: |
          :host {
            color: var(--state-icon-active-color);
            --paper-item-icon-color: var(--state-icon-active-color);
          }
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: Stop
        target:
          entity_id: remote.living_room
    - entity: switch.living_room_watch_a_blu_ray
      icon: mdi:eject
      name: Eject
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          device: 62214072
          command: Eject
        target:
          entity_id: remote.living_room
  show_state: false
  state_color: false
  title: BluRay player
  columns: 4
  show_name: true

You would be better off using the custom button card.

https://community.home-assistant.io/t/how-do-i-actually-make-a-tv-remote-control-work-well-in-the-gui/212392/2?u=tom_l

Possibly, but surely there is a way to do what i want what card-mod as well?