Hello I was wondering if there was a simple way of adding a browser mod pop-up to an already existing custom-card code without re-indenting each line. I’ve attached my code below. Im aware of what I need to add for a browser mod popup card, but technically my old code would all have to be reformatted to be a sub card of the browsermod card.
type: custom:vertical-stack-in-card
title: null
cards:
- type: picture-elements
image: /local/s3-empty.png
elements:
- type: image
entity: switch.luca_bedroom_watch_shield_tv
tap_action:
action: toggle
image: /local/nvidia1.svg
state_filter:
'on': invert(.5) sepia(1) saturate(8) hue-rotate(10deg)
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 50%
left: 40%
width: 1.5em
height: 1.5em
- type: image
entity: switch.luca_bedroom_watch_apple_tv
tap_action:
action: toggle
image: /local/apple.svg
state_filter:
'on': invert(.5) sepia(1) saturate(8) hue-rotate(10deg)
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 50%
left: 60%
width: 1.5em
height: 1.5em
- type: conditional
conditions:
- entity: switch.luca_bedroom_watch_shield_tv
state: 'on'
card:
type: picture-elements
image: /local/Blank_button.svg
elements:
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 79116293
command: DirectionDown
image: /local/arrow-down.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 42%
left: 50%
width: 1.5em
height: 1.5em
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 79116293
command: DirectionLeft
image: /local/arrow-left.svg
state_filter: null
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 25%
left: 35%
width: 1.5em
height: 1.5em
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 79116293
command: DirectionUp
image: /local/arrow-up.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 8%
left: 50%
width: 1.5em
height: 1.5em
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 79116293
command: DirectionRight
image: /local/arrow-right.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 25%
left: 65%
width: 1.5em
height: 1.5em
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 79116293
command: Select
image: /local/radiobox-marked.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 25%
left: 50%
width: 1.5em
height: 1.5em
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 79116293
command: Back
image: /local/arrow-left-top.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 60%
left: 15.5%
width: 1.5em
height: 1.5em
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 79116293
command: Home
image: /local/home.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 60%
left: 50%
width: 1.5em
height: 1.5em
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 79116293
command: Menu
image: /local/menu.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 60%
left: 84.5%
width: 1.5em
height: 1.5em
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 79116293
command: Rewind
image: /local/rewind.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 77%
left: 15.5%
width: 1.5em
height: 1.5em
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 79116293
command: Play
image: /local/play-pause.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 77%
left: 50%
width: 1.5em
height: 1.5em
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 79116293
command: FastForward
image: /local/fast-forward.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 77%
left: 84.5%
width: 1.5em
height: 1.5em
- type: conditional
conditions:
- entity: switch.luca_bedroom_watch_apple_tv
state: 'on'
card:
type: picture-elements
image: /local/Blank_button.svg
elements:
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 74821940
command: DirectionDown
image: /local/arrow-down.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 42%
left: 50%
- type: image
entity: luca_bedroom_watch_apple_tv
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 74821940
command: DirectionLeft
image: /local/arrow-left.svg
state_filter: null
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 25%
left: 35%
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 74821940
command: DirectionUp
image: /local/arrow-up.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 8%
left: 50%
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 74821940
command: DirectionRight
image: /local/arrow-right.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 25%
left: 65%
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 74821940
command: Select
image: /local/radiobox-marked.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 25%
left: 50%
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 74821940
command: Back
image: /local/arrow-left-top.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 60%
left: 15.5%
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 74821940
command: Home
image: /local/home.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 60%
left: 50%
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 74821940
command: Menu
image: /local/menu.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 60%
left: 84.5%
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 74821940
command: Rewind
image: /local/rewind.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 77%
left: 15.5%
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 74821940
command: Play
image: /local/play-pause.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 77%
left: 50%
- type: image
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.luca_bedroom
device: 74821940
command: FastForward
image: /local/fast-forward.svg
style:
padding: 15px
background-color: var(--sidebar-background-color)
border-radius: 50%
box-shadow: >-
0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px
18px 0 rgba(0,0,0,.12)
top: 77%
left: 84.5%
- type: conditional
conditions:
- entity: remote.luca_bedroom
state: 'on'
card:
type: custom:mini-media-player
entity: media_player.luca_s_bedroom_sound_touch_300
group: true
hide:
name: true
icon: true
controls: true
shuffle: true
power: true
info: true
source: true