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