kiosk_mode:
admin_settings:
kiosk: false
ignore_entity_settings: true
non_admin_settings:
kiosk: false
entity_settings:
- entity:
input_boolean.kiosk_mode: 'on'
kiosk: true
- entity:
input_boolean.kiosk_mode: 'off'
kiosk: false
background-image: >-
center / cover no-repeat fixed
url('/local/themes/ios-themes/homekit-bg-blue-red.jpeg')
background: transparent
title: Home
views:
- path: home
title: Home
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
position: static;
z-index: 3;
top: 8px;
left: 8px;
right: 8px;
height: 45px;
padding: 4px 10px;
border-radius: 10px;
background-color: rgba(10, 10, 10, .5);
-webkit-backdrop-filter: blur(100px);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: >
{% if
states('sensor.count_of_maintenance_equal_or_less_than_zero')
| int > 0 %}
fapro:circle-exclamation-solid
{% else %}
fapro:gear-solid
{% endif %}
icon_color: >
{% if
states('sensor.count_of_maintenance_equal_or_less_than_zero')
| int > 0 %}
red
{% else %}
white
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/system
- type: spacer
- type: entity
entity: sensor.total_lights_on
tap_action:
action: navigate
navigation_path: /lovelace/lights
icon_color: primary
icon: fapro:lightbulb-on-solid
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.locked_doors_count
tap_action:
action: navigate
navigation_path: /lovelace/security
use_entity_picture: false
icon: fapro:lock-open-solid
icon_color: '#D20F44'
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.media_on
icon_color: '#0171A4'
tap_action:
action: navigate
navigation_path: /lovelace/Media
icon: fapro:tv-retro-solid
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/scenes
icon: fapro:floppy-disk-solid
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Climate
secondary: ''
icon: fapro:circle-sort-solid
badge_icon: ''
tap_action:
action: navigate
navigation_path: /lovelace/climate
card_mod:
style:
.: |
ha-card {
background: transparent;
--card-primary-font-size: 22px !important;
--card-secondary-font-size: 50px !important;
--card-primary-line-height: 25px;
overflow: visible;
top: 10px;
right: 10px;
padding-bottom: 5px;
padding-top: 10px;
}
ha-state-icon {
--icon-symbol-size: 18px;
}
mushroom-shape-icon$: |
.shape {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
left: 5px;
background: transparent !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 18px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: weather.forecast_home
tap_action:
action: more-info
icon: fas:cloud-sun
alignment: end
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 21px;
right: 5px;
width: ;
--chip-padding: 4px;
padding-top: 10px;
}
- type: horizontal-stack
cards:
- type: custom:mod-card
style: >
ha-card {
white-space: nowrap;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
ha-card::-webkit-scrollbar { /* For Chrome, Safari, and
Opera */
display: none;
}
card:
type: horizontal-stack
cards:
- type: custom:mod-card
style: |
ha-card {
margin-left: 0px;
margin-right: 0px;
}
card:
type: custom:button-card
entity: climate.basement
name: Basement
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.basement_living_temperature'].state + "°";
]]]
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: /lovelace/climate-basement/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 60px
- width: null
- border-radius: 10px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: left
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: null
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 30px
- justify-self: left
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- width: 30px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: custom:mod-card
style: >
ha-card {
white-space: nowrap;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
ha-card::-webkit-scrollbar { /* For Chrome, Safari, and
Opera */
display: none;
}
card:
type: horizontal-stack
cards:
- type: custom:mod-card
style: |
ha-card {
margin-left: 0px;
margin-right: 0px;
}
card:
type: custom:button-card
entity: climate.main_floor
name: Main Floor
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.living_room_temperature'].state + "°";
]]]
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: /lovelace/climate-main-floor/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 60px
- width: null
- border-radius: 10px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: left
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: null
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 30px
- justify-self: left
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- width: 30px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: horizontal-stack
cards:
- type: custom:mod-card
style: >
ha-card {
white-space: nowrap;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
ha-card::-webkit-scrollbar { /* For Chrome, Safari, and
Opera */
display: none;
}
card:
type: horizontal-stack
cards:
- type: custom:mod-card
style: |
ha-card {
margin-left: 0px;
margin-right: 0px;
}
card:
type: custom:button-card
entity: climate.upstairs
name: Upstairs
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.madeline_bedroom_ecobee_sensor_temperature'].state + "°";
]]]
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: /lovelace/climate-upstairs/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 60px
- width: null
- border-radius: 10px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: left
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: null
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 30px
- justify-self: left
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- width: 30px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: custom:gap-card
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: ''
icon: fapro:couch-solid
badge_icon: ''
tap_action:
action: navigate
navigation_path: /lovelace/living-room
card_mod:
style:
.: |
ha-card {
background: transparent;
--card-primary-font-size: 22px !important;
--card-secondary-font-size: 50px !important;
--card-primary-line-height: 25px;
overflow: visible;
top: 10px;
right: 10px;
padding-bottom: 5px;
padding-top: 10px;
}
ha-state-icon {
--icon-symbol-size: 18px;
}
mushroom-shape-icon$: |
.shape {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
left: 5px;
background: transparent !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 18px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.living_room_light_count
tap_action:
action: more-info
- type: entity
entity: sensor.living_room_temperature
tap_action:
action: more-info
icon: fapro:temperature-three-quarters-solid
alignment: end
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 21px;
right: 5px;
width: ;
--chip-padding: 4px;
padding-top: 10px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.living_room_apple_tv_status
name: Apple TV
icon: phu:apple-tv
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: input_boolean.living_room_nintendo_status
name: Nintendo Switch
icon: null
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-living-room/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
icon:
- width: 50px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.living_room_lamps
name: Lamps
icon: mdi:lamp
show_state: true
tap_action:
action: toggle
double_tap_action:
action: fire-dom-event
local_conditional_card:
action: toggle
ids:
- home_livingroom_lamps
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.living_room_nook_accent_light
name: Bookshelf
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.living_room_accent_light
name: Accent
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.living_room_ceiling_fan_light
name: Ceiling Fan
icon: mdi:ceiling-fan-light
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: fan.living_room_ceiling_fan
name: Ceiling Fan
icon: mdi:fan
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#28B9F2'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.kitchen_lights
name: Kitchen
icon: mdi:lightbulb-group
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Master Bedroom
secondary: ''
icon: fapro:bed-front-solid
badge_icon: ''
tap_action:
action: navigate
navigation_path: ''
fill_container: true
card_mod:
style:
.: |
ha-card {
background: transparent;
--card-primary-font-size: 22px !important;
--card-secondary-font-size: 50px !important;
--card-primary-line-height: 25px;
overflow: visible !important;
top: 10px;
right: 10px;
padding-bottom: 5px;
padding-top: 10px;
width: 110%;
}
ha-state-icon {
--icon-symbol-size: 18px;
}
mushroom-shape-icon$: |
.shape {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
left: 5px;
background: transparent !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 18px;
overflow: visible;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.bedroom_temperature
tap_action:
action: more-info
icon: fapro:temperature-three-quarters-solid
alignment: end
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 21px;
right: 5px;
width: ;
--chip-padding: 4px;
padding-top: 10px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.master_bedroom_apple_tv_status
name: Apple TV
icon: phu:apple-tv
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: custom:button-card
entity: light.master_bedroom_sconces
name: Wall Sconces
icon: mdi:wall-sconce
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.master_bedroom_ceiling_fan_light
name: Ceiling Fan
icon: mdi:ceiling-fan-light
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: fan.master_bedroom_ceiling_fan
name: Ceiling Fan
icon: mdi:fan
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#28B9F2'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.master_bathroom_lights
name: Bathroom
icon: mdi:bathtub
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Theater
secondary: ''
icon: mdi:theater
badge_icon: ''
tap_action:
action: navigate
navigation_path: ''
fill_container: true
card_mod:
style:
.: |
ha-card {
background: transparent;
--card-primary-font-size: 22px !important;
--card-secondary-font-size: 50px !important;
--card-primary-line-height: 25px;
overflow: visible !important;
top: 10px;
right: 10px;
padding-bottom: 5px;
padding-top: 10px;
width: 110%;
}
ha-state-icon {
--icon-symbol-size: 20px;
}
mushroom-shape-icon$: |
.shape {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
left: 5px;
background: transparent !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 18px;
overflow: visible;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.theater_smart_sensor_temperature
tap_action:
action: more-info
icon: fapro:temperature-three-quarters-solid
alignment: end
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 21px;
right: 5px;
width: ;
--chip-padding: 4px;
padding-top: 10px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.theater_apple_tv_status
name: Apple TV
icon: phu:apple-tv
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-theater/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: input_boolean.theater_playstation_5_status
name: Playstation 5
icon: null
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-living-room/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
icon:
- width: 70px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.theater_nintendo_switch_status
name: Nintendo Switch
icon: null
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
icon:
- width: 50px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: custom:button-card
entity: light.theater_rear_lights
name: Rear
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.theater_main_lights
name: Main
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.theater_snack_lights
name: Snack Area
icon: mdi:popcorn
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.theater_screen_lights
name: Front
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.theater_star_ceiling
name: Star Ceiling
icon: mdi:weather-night
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.basement_lights_other_than_theater_room
name: Outside Theater
icon: mdi:lightbulb-group
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Gym
secondary: ''
icon: fapro:dumbbell-solid
badge_icon: ''
tap_action:
action: navigate
navigation_path: ''
fill_container: true
card_mod:
style:
.: |
ha-card {
background: transparent;
--card-primary-font-size: 22px !important;
--card-secondary-font-size: 50px !important;
--card-primary-line-height: 25px;
overflow: visible !important;
top: 10px;
right: 10px;
padding-bottom: 5px;
padding-top: 10px;
width: 110%;
}
ha-state-icon {
--icon-symbol-size: 18px;
}
mushroom-shape-icon$: |
.shape {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
left: 5px;
background: transparent !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 18px;
overflow: visible;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.gym_temperature
tap_action:
action: more-info
icon: fapro:temperature-three-quarters-solid
alignment: end
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 21px;
right: 5px;
width: ;
--chip-padding: 4px;
padding-top: 10px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.gym_apple_tv_status
name: Apple TV
icon: phu:apple-tv
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: custom:button-card
entity: light.gym_all_recessed_lights_light_group_helper
name: Recessed
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.gym_flush_mount_light_group
name: Flush Mount
icon: mdi:ceiling-light
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.gym_accent_lights_govee_mqtt
name: Accent Lights
icon: mdi:white-balance-iridescent
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:gap-card
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Guest Bedroom
secondary: ''
icon: fapro:bed-front-solid
badge_icon: ''
tap_action:
action: navigate
navigation_path: ''
fill_container: true
card_mod:
style:
.: |
ha-card {
background: transparent;
--card-primary-font-size: 22px !important;
--card-secondary-font-size: 50px !important;
--card-primary-line-height: 25px;
overflow: visible !important;
top: 10px;
right: 10px;
padding-bottom: 5px;
padding-top: 10px;
width: 110%;
}
ha-state-icon {
--icon-symbol-size: 18px;
}
mushroom-shape-icon$: |
.shape {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
left: 5px;
background: transparent !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 18px;
overflow: visible;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.guest_bathroom_sensorpush_temperature
tap_action:
action: more-info
icon: fapro:temperature-three-quarters-solid
alignment: end
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 21px;
right: 5px;
width: ;
--chip-padding: 4px;
padding-top: 10px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.guest_bedroom_apple_tv_status
name: Apple TV
icon: phu:apple-tv
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-guest-bedroom/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: custom:button-card
entity: light.guest_bedroom_main_lights
name: Main
icon: mdi:dome-light
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.bonus_table_lamps
name: Lamps
icon: mdi:lamp
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.guest_bathroom_lights
name: Bathroom
icon: mdi:bathtub
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:gap-card
- type: custom:mushroom-title-card
title: Navigation
title_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:button-card
name: Settings
icon: mdi:cog
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/system/
hold_action:
action: toggle
styles:
card:
- height: 90px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- font-weight: 600
- font-size: 14px
- padding-top: 10px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
icon:
- width: 35px
- opacity: 0.8
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: custom:button-card
name: Home Test
icon: mdi:home
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/hometest/
hold_action:
action: toggle
styles:
card:
- height: 90px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- font-weight: 600
- font-size: 14px
- padding-top: 10px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
icon:
- width: 35px
- opacity: 0.8
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
name: Music
icon: fapro:music-solid
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/sonos/
hold_action:
action: toggle
styles:
card:
- height: 90px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- font-weight: 600
- font-size: 14px
- padding-top: 10px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
icon:
- width: 30px
- opacity: 0.8
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: custom:button-card
name: Rooms
icon: fapro:couch-solid
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/rooms/
hold_action:
action: toggle
styles:
card:
- height: 90px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- font-weight: 600
- font-size: 14px
- padding-top: 10px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
icon:
- width: 35px
- opacity: 0.8
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: Living Room
title_tap_action:
action: navigate
navigation_path: /lovelace/living-room
subtitle: ''
card_mod:
style: |
ha-card {
white-space: nowrap;
width: 300px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.living_room_light_count
tap_action:
action: more-info
- type: entity
entity: sensor.living_room_temperature
tap_action:
action: more-info
icon: fapro:temperature-three-quarters-solid
alignment: end
card_mod:
style: |
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 22px;
right: 4px;
width: ;
--chip-padding: 4px;
}
- type: custom:gap-card
height: 50
visibility:
- condition: user
users:
- 706a915a37944af29b0455cbdaaac0b2
- 52645528b8994aaf9c866b5cfee0e9eb
- 8951be133a354960924e83723f60553b
- 07e74bacee50477a8560a4724bcc5b1d
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#bedroom'
margin_top_mobile: '-56px'
bg_opacity: '0'
bg_blur: '25'
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: max-content
card:
- background-color: transparent
- webkit-backdrop-filter: blur(0px); !important
- box-shadow: none
- border-radius: 20px
- border-width: 0px
- margin: 0px
- padding: 10px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: media_player.gym
show_name: false
show_icon: false
show_label: false
show_entity_picture: true
styles:
card:
- background: none
- padding: 0px
- border-radius: 20px
- border-width: 0px
- padding-bottom: 20px
entity_picture:
- height: 100%
- width: 100%
- object-fit: cover
- border-radius: 20px
- type: custom:button-card
entity: media_player.gym
show_name: false
show_icon: false
custom_fields:
title:
card:
type: custom:button-card
tap_action:
action: none
name: |
[[[
if (states['media_player.gym'].attributes.media_title != undefined)
return states['media_player.gym'].attributes.media_title;
]]]
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: center
- padding-top: 5px
- font-size: 20px
- font-weight: 600
- color: rgba(255,255,255,0.9)
artist:
card:
type: custom:button-card
tap_action:
action: none
name: |
[[[
if (states['media_player.gym'].attributes.media_artist != undefined)
return states['media_player.gym'].attributes.media_artist;
]]]
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: center
- font-size: 20px
- font-weight: 400
- color: rgba(255,255,255,0.3)
entity:
card:
type: custom:button-card
tap_action:
action: none
name: |
[[[
if (states['media_player.gym'].attributes.media_album_name != undefined)
return states['media_player.gym'].attributes.media_album_name;
]]]
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: center
- font-size: 20px
- font-weight: 400
- color: rgba(255,255,255,0.3)
styles:
grid:
- grid-template-areas: ' "i" "title" "artist" "entity" '
- grid-template-columns: 1fr
- grid-template-rows: max-content 1fr 1fr 1fr
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0 5px
- margin: 5px 0 10px 0
- type: custom:my-slider-v2
entity: media_player.gym
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 20px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 5px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 97%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
entity: media_player.gym
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
buttons:
card:
type: custom:button-card
custom_fields:
previous:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_previous_track
target:
entity_id: media_player.gym
icon: mdi:rewind
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin: 0px
icon:
- width: 35px
- color: rgba(255,255,255,0.5)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.gym
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.gym
entity: media_player.gym
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin-bottom: 0px
icon:
- width: 45px
- color: rgba(255,255,255,0.5)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.gym
icon: mdi:fast-forward
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 35px
- color: rgba(255,255,255,0.5)
star:
card:
type: custom:button-card
tap_action:
action: url
url_path: shortcuts://run-shortcut?name=HomeKit
icon: mdi:apple-keyboard-command
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 25px
- color: rgba(255,255,255,0.5)
menu:
card:
type: custom:button-card
entity: media_player.gym
tap_action:
action: more-info
icon: mdi:menu
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 25px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-columns: 2fr 3fr 3fr 3fr 2fr
- grid-template-rows: min-content
- grid-template-areas: '"star previous play next menu"'
card:
- padding: 0 0 0 0px
- margin: 3px 0px -6px 0px
- align-self: end
- background: none
- box-shadow: none
- border-width: 0px
- border-radius: 0px
styles:
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: max-content max-content max-content max-content;
- align-items: end
card:
- background: transparent
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 15px 0px
- margin: 0px 0px 0px 0px
- type: custom:button-card
entity: media_player.gym
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
volume_control:
card:
type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.gym
icon: mdi:volume-medium
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
- type: custom:my-slider-v2
entity: media_player.gym
attribute: volume_level
min: 0
max: 100
step: 2
styles:
card:
- box-shadow: none
- margin: 9px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 0px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- width: 100%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.gym
icon: mdi:volume-high
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-areas: '"volume_control"'
- grid-template-columns: 1fr
- grid-template-rows: max-content;
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0px 0px
- margin-bottom: '-5px'
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#living-room'
margin_top_mobile: '-56px'
bg_opacity: '0'
bg_blur: '25'
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: max-content
card:
- background-color: transparent
- webkit-backdrop-filter: blur(0px); !important
- box-shadow: none
- border-radius: 20px
- border-width: 0px
- margin: 0px
- padding: 10px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: media_player.gym
show_name: false
show_icon: false
show_label: false
show_entity_picture: true
styles:
card:
- background: none
- padding: 0px
- border-radius: 20px
- border-width: 0px
- padding-bottom: 20px
entity_picture:
- height: 100%
- width: 100%
- object-fit: cover
- border-radius: 20px
- type: custom:button-card
entity: media_player.gym
show_name: false
show_icon: false
custom_fields:
title:
card:
type: custom:button-card
tap_action:
action: none
name: |
[[[
if (states['media_player.gym'].attributes.media_title != undefined)
return states['media_player.gym'].attributes.media_title;
]]]
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: center
- padding-top: 5px
- font-size: 20px
- font-weight: 600
- color: rgba(255,255,255,0.9)
artist:
card:
type: custom:button-card
tap_action:
action: none
name: |
[[[
if (states['media_player.gym'].attributes.media_artist != undefined)
return states['media_player.gym'].attributes.media_artist;
]]]
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: center
- font-size: 20px
- font-weight: 400
- color: rgba(255,255,255,0.3)
entity:
card:
type: custom:button-card
tap_action:
action: none
name: |
[[[
if (states['media_player.gym'].attributes.media_album_name != undefined)
return states['media_player.gym'].attributes.media_album_name;
]]]
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: center
- font-size: 20px
- font-weight: 400
- color: rgba(255,255,255,0.3)
styles:
grid:
- grid-template-areas: ' "i" "title" "artist" "entity" '
- grid-template-columns: 1fr
- grid-template-rows: max-content 1fr 1fr 1fr
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0 5px
- margin: 5px 0 10px 0
- type: custom:my-slider-v2
entity: media_player.gym
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 20px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 5px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 97%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
entity: media_player.gym
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
buttons:
card:
type: custom:button-card
custom_fields:
previous:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_previous_track
target:
entity_id: media_player.gym
icon: mdi:rewind
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin: 0px
icon:
- width: 35px
- color: rgba(255,255,255,0.5)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.gym
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.gym
entity: media_player.gym
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin-bottom: 0px
icon:
- width: 45px
- color: rgba(255,255,255,0.5)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.gym
icon: mdi:fast-forward
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 35px
- color: rgba(255,255,255,0.5)
star:
card:
type: custom:button-card
tap_action:
action: url
url_path: shortcuts://run-shortcut?name=HomeKit
icon: mdi:apple-keyboard-command
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 25px
- color: rgba(255,255,255,0.5)
menu:
card:
type: custom:button-card
entity: media_player.gym
tap_action:
action: more-info
icon: mdi:menu
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 25px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-columns: 2fr 3fr 3fr 3fr 2fr
- grid-template-rows: min-content
- grid-template-areas: '"star previous play next menu"'
card:
- padding: 0 0 0 0px
- margin: 3px 0px -6px 0px
- align-self: end
- background: none
- box-shadow: none
- border-width: 0px
- border-radius: 0px
styles:
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: max-content max-content max-content max-content;
- align-items: end
card:
- background: transparent
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 15px 0px
- margin: 0px 0px 0px 0px
- type: custom:button-card
entity: media_player.gym
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
volume_control:
card:
type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.gym
icon: mdi:volume-medium
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
- type: custom:my-slider-v2
entity: media_player.gym
attribute: volume_level
min: 0
max: 100
step: 2
styles:
card:
- box-shadow: none
- margin: 9px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 0px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- width: 100%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.gym
icon: mdi:volume-high
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-areas: '"volume_control"'
- grid-template-columns: 1fr
- grid-template-rows: max-content;
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0px 0px
- margin-bottom: '-5px'
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
icon: mdi:home
subview: false
background: transparent
theme: ios-dark-mode-blue-red-alternative
- title: Rooms
path: rooms
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: fapro:arrow-left-solid
- type: spacer
- type: template
icon: fapro:couch-solid
content: Rooms
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: null
icon: null
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px) !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- show_name: true
show_icon: false
type: button
tap_action:
action: toggle
name: All
icon: ''
icon_height: 25px
entity: input_boolean.room_dashboard_all
show_state: false
- show_name: true
show_icon: false
type: button
tap_action:
action: toggle
name: Basement
icon: ''
icon_height: 25px
entity: input_boolean.room_dashboard_basement
- type: horizontal-stack
cards:
- show_name: true
show_icon: false
type: button
tap_action:
action: toggle
name: Main
icon: ''
icon_height: 25px
entity: input_boolean.room_dashboard_main_floor
- show_name: true
show_icon: false
type: button
tap_action:
action: toggle
name: Upstairs
icon: ''
icon_height: 25px
entity: input_boolean.room_dashboard_upstairs
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: All Rooms
- type: entities
entities:
- entity: input_boolean.living_room_apple_tv_status
name: Apple TV
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room/
- entity: input_boolean.living_room_nintendo_status
name: Nintendo Switch
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-living-room/
- type: divider
- entity: light.living_room_accent_light
name: Accent Light
- entity: light.living_room_nook_accent_light
secondary_info: none
name: Nook Accent Light
- entity: light.living_room_ceiling_fan_light
name: Ceiling Fan Light
tap_action:
action: navigate
navigation_path: /lovelace/climate
secondary_info: none
- entity: light.living_room_table_lamp
name: Table Lamps
- type: divider
- entity: sensor.living_room_temperature
name: Temperature
tap_action:
action: navigate
navigation_path: /lovelace/climate/
show_header_toggle: true
state_color: true
title: Living Room
- type: entities
entities:
- entity: input_boolean.master_bedroom_apple_tv_status
name: Apple TV
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom/
- type: divider
- entity: fan.master_bedroom_ceiling_fan
name: Ceiling Fan
- entity: light.master_bedroom_ceiling_fan_light
name: Ceiling Fan Light
tap_action:
action: navigate
navigation_path: /lovelace/climate
secondary_info: none
- entity: light.master_bedroom_sconces
secondary_info: none
name: Sconces
- entity: light.living_room_table_lamp
name: Table Lamps
- type: divider
- entity: light.master_bathroom_vanity_lights
name: Bathroom Vanity Lights
secondary_info: none
- entity: light.master_bathroom_main_lights
name: Bathroom Main Lights
- entity: light.master_bathroom_toilet_light
name: Bathroom Toilet
- entity: switch.master_bedroom_closet_light
icon: mdi:lightbulb
name: Closet
- type: divider
- entity: sensor.bedroom_temperature
name: Temperature
tap_action:
action: navigate
navigation_path: /lovelace/climate/
show_header_toggle: false
state_color: true
title: Master Bedroom
- type: entities
entities:
- entity: sensor.theater_smart_sensor_temperature
name: Temperature
- entity: light.theater_screen_lights
name: Screen Lights
- entity: light.theater_main_lights
name: Main Lights
- entity: light.theater_rear_lights
name: Rear Lights
- entity: light.theater_snack_lights
name: Snack Lights
- entity: switch.theater_star_ceiling
name: Star Ceiling
show_header_toggle: true
title: Theater
- type: entities
entities:
- entity: sensor.madeline_bedroom_ecobee_sensor_temperature
name: Temperature
- entity: light.rear_bedroom_main_lights
name: Main Light
- entity: light.rear_bedroom_table_lamp
name: Table Lamp
show_header_toggle: true
title: Madeline's Bedroom
- type: entities
entities:
- entity: light.kitchen_main_lights
name: Main Lights
- entity: light.kitchen_under_cabinet
name: Cabinet Lights
- entity: light.kitchen_sink_light
name: Sink Light
- entity: light.kitchen_table_lights
name: Kitchen Table Lights
show_header_toggle: true
title: Kitchen
- type: entities
entities:
- entity: sensor.gym_temperature
name: Temperature
- entity: light.basement_game_area_main_lights
name: Main Lights
- entity: light.gym_accent_lights
show_header_toggle: true
title: Gym
- type: entities
entities:
- entity: light.bonus_table_lamps
name: Table Lamps
- entity: light.guest_bedroom_main_lights
name: Main Light
- entity: light.guest_bathroom_vanity_lights
name: Bathroom Vanity Lights
- entity: light.guest_bathroom_toilet
name: Bathroom Toilet Light
show_header_toggle: true
title: Guest Bedroom
- type: entities
entities:
- entity: light.dining_room_chandelier
name: Chandelier Light
show_header_toggle: true
title: Dining Room
- type: entities
entities:
- entity: sensor.office_temperature
name: Temperature
- entity: light.office_floor_lamp
name: Floor Lamp
- entity: light.office_table_lamp
name: Table Lamp
show_header_toggle: true
title: Office
- type: entities
entities:
- entity: light.downstairs_hallway_main_lights
name: Hallway Main Light
show_header_toggle: true
title: Downstairs Hallway
- type: entities
entities:
- entity: light.downstairs_bathroom_main_lights
name: Vanity Lights
show_header_toggle: true
title: Downstairs Bathroom
- type: entities
entities:
- entity: light.laundry_room_main_lights
name: Main Light
show_header_toggle: true
title: Laundry Room
- type: entities
entities:
- entity: switch.garage_main_lights
name: Main Lights
show_header_toggle: true
title: Garage
- type: entities
entities:
- entity: switch.exterior_rear_flood
name: Rear Flood Lights
show_header_toggle: true
title: Exterior
- type: entities
entities:
- entity: light.front_foyer_chandelier
name: Chandelier Light
show_header_toggle: true
title: Foyer
- type: entities
entities:
- entity: light.front_porch_sconces
name: Sconces
show_header_toggle: true
title: Front Porch
- type: entities
entities:
- entity: light.bonus_main_light
name: Main Light - Far
- entity: light.bonus_desk_light
name: Main Light - Close
show_header_toggle: true
title: Bonus
- type: entities
entities:
- entity: sensor.basement_living_temperature
name: Temperature
- entity: light.basement_sitting_area_accent_lights
name: Accent Lights
- entity: light.basement_sitting_area_main_lights
name: Main Lights
show_header_toggle: true
title: Basement Living
- type: entities
entities:
- entity: light.basement_bathroom_main_lights
name: Main Light
- entity: light.basement_bathroom_vanity_lights
name: Vanity Lights
- entity: light.basement_bathroom_shower_lights
name: Shower Light
show_header_toggle: true
title: Basement Bathroom
- type: entities
entities:
- entity: light.basement_stairs_main_lights
name: Stair Lights
- entity: light.basement_stairs_sconces
name: Stair Sconces
show_header_toggle: true
title: Basement Stairs
- type: entities
entities:
- entity: light.basement_hallway_sconces
name: Sconces
show_header_toggle: true
title: Basement Hallway
- type: entities
entities:
- entity: light.stairs_main_lights
name: Main Lights
show_header_toggle: true
title: Stairs
- type: custom:gap-card
height: 50
visibility:
- condition: state
entity: input_boolean.room_dashboard_all
state: 'on'
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Main Floor
- type: entities
entities:
- entity: input_boolean.living_room_apple_tv_status
name: Apple TV
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room/
- entity: input_boolean.living_room_nintendo_status
name: Nintendo Switch
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-living-room/
- type: divider
- entity: light.living_room_accent_light
name: Accent Light
- entity: light.living_room_nook_accent_light
secondary_info: none
name: Nook Accent Light
- entity: light.living_room_ceiling_fan_light
name: Ceiling Fan Light
tap_action:
action: navigate
navigation_path: /lovelace/climate
secondary_info: none
- entity: light.living_room_table_lamp
name: Table Lamps
- type: divider
- entity: sensor.living_room_temperature
name: Temperature
tap_action:
action: navigate
navigation_path: /lovelace/climate/
show_header_toggle: true
state_color: true
title: Living Room
- type: entities
entities:
- entity: input_boolean.master_bedroom_apple_tv_status
name: Apple TV
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom/
- type: divider
- entity: fan.master_bedroom_ceiling_fan
name: Ceiling Fan
- entity: light.master_bedroom_ceiling_fan_light
name: Ceiling Fan Light
tap_action:
action: navigate
navigation_path: /lovelace/climate
secondary_info: none
- entity: light.master_bedroom_sconces
secondary_info: none
name: Sconces
- entity: light.living_room_table_lamp
name: Table Lamps
- type: divider
- entity: light.master_bathroom_vanity_lights
name: Bathroom Vanity Lights
secondary_info: none
- entity: light.master_bathroom_main_lights
name: Bathroom Main Lights
- entity: light.master_bathroom_toilet_light
name: Bathroom Toilet
- entity: switch.master_bedroom_closet_light
icon: mdi:lightbulb
name: Closet
- type: divider
- entity: sensor.bedroom_temperature
name: Temperature
tap_action:
action: navigate
navigation_path: /lovelace/climate/
show_header_toggle: false
state_color: true
title: Master Bedroom
- type: entities
entities:
- entity: light.kitchen_main_lights
name: Main Lights
- entity: light.kitchen_under_cabinet
name: Cabinet Lights
- entity: light.kitchen_sink_light
name: Sink Light
- entity: light.kitchen_table_lights
name: Kitchen Table Lights
show_header_toggle: true
title: Kitchen
- type: entities
entities:
- entity: light.bonus_table_lamps
name: Table Lamps
- entity: light.guest_bedroom_main_lights
name: Main Light
- entity: light.guest_bathroom_vanity_lights
name: Bathroom Vanity Lights
- entity: light.guest_bathroom_toilet
name: Bathroom Toilet Light
show_header_toggle: true
title: Guest Bedroom
- type: entities
entities:
- entity: light.dining_room_chandelier
name: Chandelier Light
show_header_toggle: true
title: Dining Room
- type: entities
entities:
- entity: sensor.office_temperature
name: Temperature
- entity: light.office_floor_lamp
name: Floor Lamp
- entity: light.office_table_lamp
name: Table Lamp
show_header_toggle: true
title: Office
- type: entities
entities:
- entity: light.downstairs_hallway_main_lights
name: Hallway Main Light
show_header_toggle: true
title: Downstairs Hallway
- type: entities
entities:
- entity: light.downstairs_bathroom_main_lights
name: Vanity Lights
show_header_toggle: true
title: Downstairs Bathroom
- type: entities
entities:
- entity: light.laundry_room_main_lights
name: Main Light
show_header_toggle: true
title: Laundry Room
- type: entities
entities:
- entity: switch.garage_main_lights
name: Main Lights
show_header_toggle: true
title: Garage
- type: entities
entities:
- entity: switch.exterior_rear_flood
name: Rear Flood Lights
show_header_toggle: true
title: Exterior
- type: entities
entities:
- entity: light.front_foyer_chandelier
name: Chandelier Light
show_header_toggle: true
title: Foyer
- type: entities
entities:
- entity: light.front_porch_sconces
name: Sconces
show_header_toggle: true
title: Front Porch
- type: custom:gap-card
height: 50
visibility:
- condition: state
entity: input_boolean.room_dashboard_main_floor
state: 'on'
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Basement
- type: entities
entities:
- entity: sensor.theater_smart_sensor_temperature
name: Temperature
- entity: light.theater_screen_lights
name: Screen Lights
- entity: light.theater_main_lights
name: Main Lights
- entity: light.theater_rear_lights
name: Rear Lights
- entity: light.theater_snack_lights
name: Snack Lights
- entity: switch.theater_star_ceiling
name: Star Ceiling
show_header_toggle: true
title: Theater
- type: entities
entities:
- entity: sensor.gym_temperature
name: Temperature
- entity: light.basement_game_area_main_lights
name: Main Lights
- entity: light.gym_accent_lights
show_header_toggle: true
title: Gym
- type: entities
entities:
- entity: sensor.basement_living_temperature
name: Temperature
- entity: light.basement_sitting_area_accent_lights
name: Accent Lights
- entity: light.basement_sitting_area_main_lights
name: Main Lights
show_header_toggle: true
title: Basement Living
- type: entities
entities:
- entity: light.basement_bathroom_main_lights
name: Main Light
- entity: light.basement_bathroom_vanity_lights
name: Vanity Lights
- entity: light.basement_bathroom_shower_lights
name: Shower Light
show_header_toggle: true
title: Basement Bathroom
- type: entities
entities:
- entity: light.basement_stairs_main_lights
name: Stair Lights
- entity: light.basement_stairs_sconces
name: Stair Sconces
show_header_toggle: true
title: Basement Stairs
- type: entities
entities:
- entity: light.basement_hallway_sconces
name: Sconces
show_header_toggle: true
title: Basement Hallway
- type: custom:gap-card
height: 50
visibility:
- condition: state
entity: input_boolean.room_dashboard_basement
state: 'on'
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Upstairs
- type: entities
entities:
- entity: sensor.madeline_bedroom_ecobee_sensor_temperature
name: Temperature
- entity: light.rear_bedroom_main_lights
name: Main Light
- entity: light.rear_bedroom_table_lamp
name: Table Lamp
show_header_toggle: true
title: Madeline's Bedroom
- type: entities
entities:
- entity: light.bonus_table_lamps
name: Table Lamps
- entity: light.guest_bedroom_main_lights
name: Main Light
- entity: light.guest_bathroom_vanity_lights
name: Bathroom Vanity Lights
- entity: light.guest_bathroom_toilet
name: Bathroom Toilet Light
show_header_toggle: true
title: Guest Bedroom
- type: entities
entities:
- entity: light.bonus_main_light
name: Main Light - Far
- entity: light.bonus_desk_light
name: Main Light - Close
show_header_toggle: true
title: Bonus
- type: entities
entities:
- entity: light.stairs_main_lights
name: Main Lights
show_header_toggle: true
title: Stairs
- type: custom:gap-card
height: 50
visibility:
- condition: state
entity: input_boolean.room_dashboard_upstairs
state: 'on'
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
icon: phu:rooms-living
theme: ios-dark-mode-blue-red
- title: Lights
path: lights
icon: phu:bulb-group-classic-3-alt
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: fapro:arrow-left-solid
- type: spacer
- type: template
icon: fapro:lightbulb-on-solid
content: Lights
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: null
icon: null
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px) !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
- type: vertical-stack
cards:
- type: vertical-stack
cards: []
- type: custom:mushroom-light-card
entity: light.living_room_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Living Room
- type: custom:mushroom-light-card
entity: light.master_bedroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Master Bedroom
- type: custom:mushroom-light-card
entity: light.master_bathroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Master Bathroom
show_color_control: false
tap_action:
action: more-info
use_light_color: false
show_color_temp_control: false
- type: custom:mushroom-light-card
entity: light.theater_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Theater
- type: custom:mushroom-light-card
entity: light.madeline_s_bedroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Madeline's Bedroom
- type: custom:mushroom-light-card
entity: light.kitchen_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Kitchen
- type: custom:mushroom-light-card
entity: light.gym_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Gym
- type: custom:mushroom-light-card
entity: light.guest_bedroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Guest Bedroom
- type: custom:mushroom-light-card
entity: light.guest_bathroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Guest Bathroom
- type: custom:mushroom-light-card
entity: light.dining_room_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Dining Room
- type: custom:mushroom-light-card
entity: light.office_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Office
- type: custom:mushroom-light-card
entity: light.downstairs_hallway_main_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Downstairs Hallway
- type: custom:mushroom-light-card
entity: light.downstairs_bathroom_main_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Downstairs Bathroom
- type: custom:mushroom-light-card
entity: light.laundry_room_main_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Laundry Room
- type: custom:mushroom-light-card
entity: light.garage_entry_main_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Garage Entry
- type: custom:mushroom-light-card
entity: light.front_foyer_chandelier
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Foyer Chandelier
- type: custom:mushroom-light-card
entity: light.front_porch_sconces
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Front Porch
- type: custom:mushroom-light-card
entity: light.bonus_room_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Bonus Room
- type: custom:gap-card
height: 50
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 3000
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
theme: ios-dark-mode-blue-red
- title: Climate
path: climate
icon: mdi:fan
subview: false
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: fapro:arrow-left-solid
- type: spacer
- type: template
icon: fapro:temperature-list
content: Climate Overview
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: null
icon: null
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px) !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Temperature
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.master_bedroom_sensorpush_temperature
name: Master Bedroom
layout: horizontal
- type: custom:mushroom-entity-card
entity: sensor.living_room_sensorpush_temperature
name: Living Room
layout: horizontal
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.basement_living_sensorpush_temperature
name: Basement Living
layout: horizontal
- type: custom:mushroom-entity-card
entity: sensor.madeline_bedroom_ecobee_sensor_temperature
name: Madeline's Room
layout: horizontal
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.outside_sensorpush_sensor_temperature
name: Outside
layout: horizontal
- type: custom:mushroom-entity-card
name: Madeline's Room
layout: horizontal
- type: custom:mushroom-title-card
title: ''
subtitle: Humidity
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.master_bedroom_sensorpush_humidity
name: Master Bedroom
layout: horizontal
- type: custom:mushroom-entity-card
entity: sensor.living_room_sensorpush_humidity
name: Living Room
layout: horizontal
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.basement_living_sensorpush_humidity
name: Basement Living
layout: horizontal
- type: custom:mushroom-entity-card
entity: sensor.guest_bathroom_sensorpush_humidity
name: Guest Bathroom
layout: horizontal
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.outside_sensorpush_sensor_humidity
name: Outside
layout: horizontal
- type: custom:mushroom-entity-card
name: Guest Bathroom
layout: horizontal
- type: custom:mushroom-title-card
title: ''
subtitle: Pressure
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
name: Master Bedroom
layout: horizontal
entity: sensor.master_bedroom_sensorpush_pressure
- type: custom:mushroom-entity-card
entity: sensor.outside_sensorpush_sensor_pressure
name: Outside
layout: horizontal
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.basement_living_sensorpush_pressure
name: Basement Living
layout: horizontal
- type: custom:mushroom-entity-card
name: Guest Bathroom
layout: horizontal
entity: sensor.guest_bathroom_sensorpush_pressure
- type: custom:gap-card
height: 50
- type: custom:button-card
custom_fields:
cluster:
card:
type: custom:flex-horseshoe-card
entities:
- entity: sensor.gym_temperature
attribute: temperature
decimals: 0
unit: °
area: Nursery
tap_action:
action: navigate
navigation_path: '#weather'
- entity: sensor.temperature_range
name: OUT
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 59
styles:
- font-size: 5.6em;
- font-weight: bold;
names:
- id: 1
entity_index: 1
xpos: 50
ypos: 85
styles:
- font-size: 2.2em;
- font-weight: bold;
- letter-spacing: 0.15em;
- color: rgba(255,255,255,0.3)
horseshoe_state:
width: 15
horseshoe_scale:
min: 0
max: 100
color: rgba(49,209,88,0.3)
width: 15
color_stops:
'0': rgba(49,209,88,1)
'40': rgba(49,209,88,1)
card_mod:
style: |
ha-card {
background-color: transparent;
margin: -5px;
}
styles:
grid:
- grid-template-areas: '"cluster"'
grid-template-columns: 1fr;
grid-template-rows: 1fr;
card:
- padding: 0px
border-radius: 0px
height: 60px
width: 60px
background-color: transparent
margin-top: '-3px'
margin-right: '-10px'
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
style: |
ha-card-border-width: 0
ha-card {
border: none
}
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 1px !important;
border: none
}
primary: Basement
secondary: |
Currently: {{ state_attr('climate.basement', 'hvac_action') }}
icon: |-
{% set mode = states('climate.basement') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'heat_cool' %}
mdi:autorenew
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: >-
{% set status = state_attr('climate.basement','hvac_action')
%}
{% if status == 'off' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
border: none
}
#ha-card .current--value {
# color: #ffffff;
#}
header {
margin-bottom: 12px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #9e9e9e;
}
entity: climate.basement
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
dry: false
fan_only: false
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
border: none;
}
alignment: justify
chips:
- type: template
entity: climate.basement
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
style: |
ha-card {
border: none
}
- type: weather
entity: weather.forecast_home
show_conditions: true
show_temperature: true
style: |
ha-card {
border: none
}
- type: template
double_tap_action:
action: none
content: '{{ states(entity) }}% Humidity'
entity: sensor.basement_current_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
style: |
ha-card {
border: none
}
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
#--st-mode-background: #262626;
margin-left: 12px;
margin-right: 12px;
border: none
}
ha-card .mode-item.active.off {
#background: #363636;
#color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.heat_cool {
background: #493516;
color: #ff9800;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.basement
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
cool:
name: Cool
heat_cool:
name: Auto
- type: grid
square: false
columns: 3
cards:
- type: custom:mushroom-entity-card
entity: sensor.basement_living_temperature
primary_info: state
secondary_info: name
name: Inside
icon_color: green
style: |
ha-card {
border: none
}
- type: custom:mushroom-entity-card
entity: sensor.outside_sensorpush_sensor_temperature
primary_info: state
secondary_info: name
name: Outside
icon_color: blue
style: |
ha-card {
border: none
}
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.3px;
--st-mode-background: #262626;
margin-right: 12px;
border: none;
}
ha-card .mode-item.active.eco {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active.boost {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.none {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.basement
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
preset:
none:
icon: mdi:circle-medium
eco:
icon: mdi:leaf
boost:
icon: mdi:rocket-launch
away: false
- type: custom:mini-graph-card
entities:
- entity: sensor.basement_living_temperature
name: Inside Temperature
color: '#4caf50'
- entity: sensor.outside_sensorpush_sensor_temperature
name: Outside Temperature
color: '#2196f3'
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
points: hover
fill: fade
labels: false
labels_secondary: false
style: |
ha-card {
border: none
}
theme: ios-dark-mode-blue-red
- icon: si:sonos
title: Sonos
path: sonos
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: fapro:arrow-left-solid
- type: spacer
- type: template
icon: fapro:music-solid
content: Music
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: null
icon: null
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px) !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: static;
bottom: 98px !important;
top: 61px;
left: 8px;
right: 8px;
height: 100%;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: custom:sonos-card
sections:
- player
- volumes
- groups
- grouping
- media browser
showVolumeUpAndDownButtons: true
entities:
- basement
- media_player.kitchen
- media_player.living_room
- media_player.office
- media_player.gym
- media_player.gym_2
- media_player.basement_living
- media_player.master_bedroom
predefinedGroups:
- name: ''
media: ''
entities:
- player: media_player.gym_group
volume: 0
heightPercentage: 100
widthPercentage: 100
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
theme: ios-dark-mode-blue-red
- title: Scenes
path: scenes
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: fapro:arrow-left-solid
- type: spacer
- type: template
icon: fapro:floppy-disk-solid
content: Scenes
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: null
icon: null
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px) !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Goodnight
secondary: ''
icon: mdi:weather-night
layout: vertical
tap_action:
action: perform-action
perform_action: scene.turn_on
data: {}
target:
entity_id: scene.bedtime
- type: custom:mushroom-template-card
primary: House Off
secondary: ''
icon: mdi:power
layout: vertical
tap_action:
action: call-service
target:
entity_id: scene.house_off
data: {}
perform_action: scene.turn_on
- type: custom:mushroom-template-card
primary: Sunset Automation
secondary: ''
icon: mdi:weather-sunset
layout: vertical
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
icon: mdi:content-save
theme: ios-dark-mode-blue-red
- title: Security
path: security
icon: mdi:shield-home
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: fapro:arrow-left-solid
- type: spacer
- type: template
icon: fapro:lock-solid
content: Security
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: null
icon: null
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px) !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
- type: vertical-stack
cards:
- type: custom:gap-card
height: 25
- type: horizontal-stack
cards:
- type: custom:mushroom-lock-card
entity: lock.basement_door
name: Basement
secondary_info: none
layout: vertical
- type: custom:mushroom-lock-card
entity: lock.front_door
name: Front Door
layout: vertical
secondary_info: none
- type: custom:mushroom-lock-card
entity: lock.garage_door
name: Garage
layout: vertical
secondary_info: none
- type: custom:mushroom-title-card
title: ''
subtitle: Living Room
- type: custom:webrtc-camera
url: rtsp://localhost:41311/71c759d6cee1ed21?resolution=low
show_connection_status: true
show_latency: true
media: video,audio
ui: true
title: null
style: >
.mode {display: none}.screenshot {display: none}.pictureinpicture
{display:
none}
- type: custom:mushroom-title-card
title: ''
subtitle: Office
- type: custom:webrtc-camera
url: rtsp://localhost:33151/3e48b9fd5f4dc5c5
media: video,audio
ui: true
title: null
style: >
.mode {display: none}.screenshot {display: none}.pictureinpicture
{display:
none}
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Front Door
- show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.front_door_doorbell
image: https://demo.home-assistant.io/stub_config/bedroom.png
- type: custom:mushroom-title-card
title: ''
subtitle: Garage
- show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.garage_camera
image: https://demo.home-assistant.io/stub_config/bedroom.png
- type: custom:mushroom-chips-card
chips:
- type: spacer
- type: custom:gap-card
height: 50
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
theme: ios-dark-mode-blue-red-alternative
- title: Media
path: Media
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
-webkit-backdrop-filter: blur(10px);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: fapro:arrow-left-solid
- type: spacer
- type: template
icon: fapro:tv-retro-solid
content: Media
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: null
icon: null
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px) !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Apple TV
- type: custom:mushroom-entity-card
entity: input_boolean.living_room_apple_tv_status
name: 'Living Room '
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room
fill_container: false
hold_action:
action: toggle
layout: horizontal
- type: custom:mushroom-entity-card
entity: input_boolean.master_bedroom_apple_tv_status
name: Master Bedroom
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom
layout: horizontal
- type: custom:mushroom-entity-card
entity: input_boolean.theater_apple_tv_status
name: Theater
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-theater
fill_container: false
hold_action:
action: toggle
layout: horizontal
- type: custom:mushroom-entity-card
entity: input_boolean.guest_bedroom_apple_tv_status
name: Guest Bedroom
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-guest-bedroom
layout: horizontal
- type: custom:mushroom-entity-card
entity: input_boolean.gym_apple_tv_status
name: Gym - Not Configured
tap_action:
action: none
fill_container: false
hold_action:
action: toggle
layout: horizontal
- type: custom:mushroom-entity-card
tap_action:
action: none
layout: horizontal
name: Bonus - Not Configured
entity: input_boolean.gym_apple_tv_status
- type: custom:mushroom-title-card
title: ''
subtitle: Gaming
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.theater_nintendo_switch_status
name: Theater
layout: horizontal
- type: custom:mushroom-entity-card
entity: input_boolean.living_room_nintendo_status
name: Living Room
layout: horizontal
- type: custom:mushroom-entity-card
entity: input_boolean.theater_playstation_5_status
name: Theater
layout: horizontal
- type: custom:gap-card
height: 50
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
theme: ios-dark-mode-blue-red
- title: System
path: system
icon: mdi:cog
theme: ios-dark-mode-blue-red-alternative
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
position: static;
z-index: 3;
top: 8px;
left: 8px;
right: 8px;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
-webkit-backdrop-filter: blur(100px);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
icon: fapro:bars-regular
- type: spacer
- type: entity
entity: sensor.total_lights_on
tap_action:
action: navigate
navigation_path: /lovelace/lights
icon_color: primary
icon: fapro:lightbulb-on-solid
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.locked_doors_count
tap_action:
action: navigate
navigation_path: /lovelace/security
use_entity_picture: false
icon: fapro:lock-open-solid
icon_color: '#D20F44'
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.media_on
icon_color: '#0171A4'
tap_action:
action: navigate
navigation_path: /lovelace/Media
icon: fapro:tv-retro-solid
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.count_of_maintenance_equal_or_less_than_zero
tap_action:
action: navigate
navigation_path: /lovelace/system
icon: fas:triangle-exclamation
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/scenes
icon: fapro:floppy-disk-solid
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
- type: entities
entities:
- entity: input_boolean.automatic_light_control
name: Automatic Light Control
icon: mdi:lightbulb-multiple-outline
- type: divider
- entity: input_boolean.kiosk_mode
title: System Control
show_header_toggle: false
- type: entities
entities:
- entity: sensor.days_until_cat_litter_change
icon: mdi:cat
name: Cat Litter
tap_action:
action: none
hold_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.add_14_days_to_cat_litter_sensor_timer
- type: divider
- entity: sensor.days_sleepme_clean
icon: mdi:bed-empty
name: SleepMe
tap_action:
action: none
hold_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.reset_sleepme_clean_time
- type: divider
- entity: sensor.days_hvac_filter_change
name: HVAC Filters
icon: mdi:air-filter
tap_action:
action: none
hold_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.reset_hvac_filter_timer
- type: divider
- entity: sensor.days_bedroom_return_filter_change
name: Bedroom Return Filter
icon: mdi:air-filter
tap_action:
action: none
hold_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.reset_bedroom_return_filter_timer
- type: divider
- entity: sensor.days_humidifier_filter_change
name: Dehumidifier Filters
icon: mdi:air-filter
tap_action:
action: none
hold_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.reset_humidifier_filter_timer
title: Maintenance
- type: entities
entities:
- entity: sensor.dryer_dryer_completion_time
name: Dryer
icon: mdi:tumble-dryer
- entity: sensor.washer_washer_completion_time
name: Washer
icon: mdi:washing-machine
- type: divider
- entity: binary_sensor.refrigerator_contact
name: Refrigerator Door
icon: mdi:fridge
title: Appliances
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .9);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 23px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 2px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 600
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 23px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 2px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: null
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: 2px
- padding: 0px
- opacity: 0.5
- top: 2px
name:
- font-size: 10px
- align-self: center
- font-weight: null
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 23px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 2px
name:
- font-size: 10px
- align-self: center
- font-weight: null
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 23px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 2px
name:
- font-size: 10px
- align-self: center
- font-weight: null
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: vertical-stack
cards:
- type: entities
card_mod:
style: |
ha-card {
border-style: none;
background:
--mush-title-padding: 0px 0px 0px;
}
entities:
- type: custom:mushroom-title-card
title: Home Assistant Server
subtitle: >
Core v{{ state_attr('update.home_assistant_core_update',
'installed_version') }} - OS v{{
state_attr('update.home_assistant_operating_system_update','installed_version')
}} - Supervisor v{{
state_attr('update.home_assistant_supervisor_update',
'installed_version') }}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.processor_temperature
icon_color: orange
- type: entity
entity: sensor.processor_use
icon_color: blue
- type: entity
entity: sensor.memory_use_percent
icon_color: orange
- type: entity
entity: sensor.disk_use_percent_config
icon_color: deep-purple
- type: custom:mushroom-title-card
title: Home Assistant Core
card_mod:
style: |
h1.title {
font-size: 20px;
padding: 0px 5px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: update.home_assistant_core_update
icon: mdi:package-variant-closed-check
content: >-
{{ state_attr('update.home_assistant_core_update',
'installed_version')}}
icon_color: green
tap_action:
action: more-info
- type: template
entity: update.home_assistant_core_update
icon: mdi:package-variant
content: >-
{{ state_attr('update.home_assistant_core_update',
'latest_version')}}
icon_color: purple
tap_action:
action: more-info
- type: custom:mushroom-update-card
entity: update.home_assistant_core_update
name: Core
show_buttons_control: true
icon_type: entity-picture
layout: horizontal
- type: custom:mushroom-title-card
title: Home Assistant Operating System
card_mod:
style: |
h1.title {
font-size: 20px;
padding: 0px 5px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: update.home_assistant_operating_system_update
icon: mdi:package-variant-closed-check
content: >-
{{
state_attr('update.home_assistant_operating_system_update',
'installed_version')}}
icon_color: green
tap_action:
action: more-info
- type: template
entity: update.home_assistant_operating_system_update
icon: mdi:package-variant
content: >-
{{
state_attr('update.home_assistant_operating_system_update',
'latest_version')}}
icon_color: purple
tap_action:
action: more-info
- type: custom:mushroom-update-card
entity: update.home_assistant_operating_system_update
name: Operating System
show_buttons_control: true
icon_type: entity-picture
layout: horizontal
- type: custom:mushroom-title-card
title: Home Assistant Supervisor
card_mod:
style: |
h1.title {
font-size: 20px;
padding: 0px 5px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: update.home_assistant_supervisor_update
icon: mdi:package-variant-closed-check
content: >-
{{ state_attr('update.home_assistant_supervisor_update',
'installed_version')}}
icon_color: green
tap_action:
action: more-info
- type: template
entity: update.home_assistant_supervisor_update
icon: mdi:package-variant
content: >-
{{ state_attr('update.home_assistant_supervisor_update',
'latest_version')}}
icon_color: purple
tap_action:
action: more-info
- type: custom:mushroom-update-card
entity: update.home_assistant_supervisor_update
name: Supervisor
show_buttons_control: true
icon_type: entity-picture
layout: horizontal
- type: custom:gap-card
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /lovelace/remotetest5
icon: mdi:account-music
icon_height: 25px
name: Remote Test 5
- title: Living Room
path: living-room
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
position: static;
z-index: 3;
top: 8px;
left: 8px;
right: 8px;
height: 45px;
padding: 4px 10px;
border-radius: 10px;
background-color: rgba(10, 10, 10, .5);
-webkit-backdrop-filter: blur(100px);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: fapro:arrow-left-solid
- type: spacer
- type: entity
entity: sensor.total_lights_on
tap_action:
action: navigate
navigation_path: /lovelace/lights
icon_color: primary
icon: fapro:lightbulb-on-solid
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.locked_doors_count
tap_action:
action: navigate
navigation_path: /lovelace/security
use_entity_picture: false
icon: fapro:lock-open-solid
icon_color: '#D20F44'
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.media_on
icon_color: '#0171A4'
tap_action:
action: navigate
navigation_path: /lovelace/Media
icon: fapro:tv-retro-solid
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/scenes
icon: fapro:floppy-disk-solid
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Lights
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.living_room_lamps
name: Lamps
icon: mdi:lamp
show_state: true
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.living_room_nook_accent_light
name: Bookshelf
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.living_room_accent_light
name: Accent
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.living_room_ceiling_fan_light
name: Ceiling Fan
icon: mdi:ceiling-fan-light
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Climate
- type: horizontal-stack
cards:
- type: custom:button-card
entity: fan.living_room_ceiling_fan
name: Ceiling Fan
icon: mdi:fan
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#28B9F2'
name:
- color: black
state:
- color: black
- type: custom:gap-card
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Media
card_mod:
style: |
ha-card: {
--card-primary-font-size: 50px !important;
--card-secondary-font-size: 50px !important;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.living_room_apple_tv_status
name: Apple TV
icon: phu:apple-tv
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: input_boolean.living_room_nintendo_status
name: Nintendo Switch
icon: null
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-living-room/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
icon:
- width: 50px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
theme: ios-dark-mode-blue-red-alternative
- title: 'Climate: Main Floor'
path: climate-main-floor
theme: ios-dark-mode-blue-red
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: template
content: Main Floor Climate
icon: mdi:home-thermometer
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/climate
icon: mdi:thermometer-plus
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: vertical-stack
cards:
- type: thermostat
entity: climate.main_floor
theme: ios-dark-mode-blue-red
name: ' '
features:
- style: dropdown
type: climate-hvac-modes
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.living_room_sensorpush_temperature
name: Living Room
- type: custom:mushroom-entity-card
entity: sensor.living_room_sensorpush_humidity
name: Living Room
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.master_bedroom_sensorpush_temperature
name: Bedroom
- type: custom:mushroom-entity-card
entity: sensor.master_bedroom_sensorpush_humidity
name: Bedroom
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- title: 'Climate: Basement'
path: climate-basement
theme: ios-dark-mode-blue-red
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: template
content: Basement Climate
icon: mdi:home-thermometer
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/climate
icon: mdi:thermometer-plus
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: vertical-stack
cards:
- type: thermostat
entity: climate.basement
theme: ios-dark-mode-blue-red
name: ' '
features:
- style: dropdown
type: climate-hvac-modes
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.basement_living_sensorpush_temperature
name: Basement Living
- type: custom:mushroom-entity-card
entity: sensor.basement_living_sensorpush_humidity
name: Basement Living
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.theater_smart_sensor_temperature
name: Theater
- type: custom:mushroom-entity-card
entity: sensor.gym_temperature
name: Gym
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- title: 'Climate: Upstairs'
path: climate-upstairs
theme: ios-dark-mode-blue-red
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: template
content: Upstairs Climate
icon: mdi:home-thermometer
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/climate
icon: mdi:thermometer-plus
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: vertical-stack
cards:
- type: thermostat
entity: climate.upstairs
theme: ios-dark-mode-blue-red
name: ' '
features:
- style: dropdown
type: climate-hvac-modes
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.madeline_bedroom_ecobee_sensor_temperature
name: Madeline's Room
- type: custom:mushroom-entity-card
entity: sensor.guest_bathroom_sensorpush_temperature
name: Guest Bathroom
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.guest_bathroom_sensorpush_humidity
name: Guest Bathroom
- type: custom:mushroom-entity-card
entity: sensor.guest_bathroom_sensorpush_humidity
name: Guest Bathroom
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- title: 'ATV Remote: Master Bedroom'
path: atv-remote-master-bedroom
icon: ''
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
position: fixed;
right: 8px;
left: 8px;
top: 8px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.master_bedroom_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Master Bedroom On
- type: conditional
conditions:
- condition: state
entity: input_boolean.master_bedroom_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Master Bedroom Off
- type: spacer
- type: entity
entity: input_boolean.master_bedroom_apple_tv_status
tap_action:
action: toggle
icon: mdi:power
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
top: 61px;
left: 8px;
right: 8px;
height: 45px;
background: RGBA(0, 0, 0, 0.5);
opacity: 1;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 30
cards:
- type: custom:button-card
icon: phu:apple-tv
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.master_bedroom_2
data:
source: TV
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:netflix
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.master_bedroom_2
data:
source: netflix
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: phu:disney-plus
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.master_bedroom_2
data:
source: disney+
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:prime
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.master_bedroom_2
data:
source: prime
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:hbo
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.master_bedroom_2
data:
source: max
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:android-tv-card
remote_id: remote.master_bedroom
media_player_id: media_player.master_bedroom_2
autofill_entity_id: true
rows:
- - touchpad
custom_actions:
- type: button
name: power
tap_action:
action: key
key: wakeup
icon: mdi:power
hold_action:
action: key
key: suspend
- type: button
name: menu
tap_action:
action: key
key: menu
icon: mdi:backspace
- type: button
name: home
tap_action:
action: key
key: home
icon: mdi:home
hold_action:
action: more-info
- icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
name: skip-backward
type: button
- icon: mdi:fast-forward-10
action: key
name: skip-forward
tap_action:
key: skip_forward
action: key
type: button
- type: button
name: play
tap_action:
action: key
key: play
icon: mdi:play
- type: button
name: pause
tap_action:
action: key
key: pause
icon: mdi:pause
- type: button
name: up
tap_action:
action: key
key: up
hold_action:
action: repeat
icon: mdi:chevron-up
- type: button
name: down
tap_action:
action: key
key: down
hold_action:
action: repeat
icon: mdi:chevron-down
- type: button
name: left
tap_action:
action: key
key: left
hold_action:
action: repeat
icon: mdi:chevron-left
- type: button
name: right
tap_action:
action: key
key: right
hold_action:
action: repeat
icon: mdi:chevron-right
- type: button
name: center
tap_action:
action: key
key: select
icon: mdi:checkbox-blank-circle
double_tap_action:
action: key
key: menu
- type: button
name: primevideo
tap_action:
action: perform-action
data:
source: Prime Video
perform_action: media_player.select_source
icon: primevideo
- type: button
name: netflix
tap_action:
action: perform-action
data:
source: Netflix
perform_action: media_player.select_source
icon: mdi:netflix
- type: button
name: spotify
tap_action:
action: perform-action
data:
source: Spotify
perform_action: media_player.select_source
icon: mdi:spotify
- type: button
name: disney
tap_action:
action: perform-action
data:
source: Disney+
perform_action: media_player.select_source
icon: disney
- type: button
name: youtube
tap_action:
action: perform-action
data:
source: YouTube
perform_action: media_player.select_source
icon: mdi:youtube
- type: button
name: appletv
tap_action:
action: perform-action
data:
source: TV
perform_action: media_player.select_source
icon: appletv
- type: button
name: max
tap_action:
action: perform-action
data:
source: HBO Max
perform_action: media_player.select_source
icon: max
- type: button
name: skyshowtime
tap_action:
action: perform-action
data:
source: SkyShowtime
perform_action: media_player.select_source
icon: showtime
- type: button
name: plex
tap_action:
action: perform-action
data:
source: Plex
perform_action: media_player.select_source
icon: mdi:plex
- type: button
name: discovery
tap_action:
action: perform-action
data:
source: discovery+
perform_action: media_player.select_source
icon: discovery
- type: button
name: viaplay
tap_action:
action: perform-action
data:
source: Viaplay
perform_action: media_player.select_source
icon: viaplay
- type: button
name: tv2play
tap_action:
action: perform-action
data:
source: TV 2 Play
perform_action: media_player.select_source
icon: tv2play
- type: button
name: nrktv
tap_action:
action: perform-action
data:
source: NRK TV
perform_action: media_player.select_source
icon: nrktv
- type: button
name: allente
tap_action:
action: perform-action
data:
source: Allente
perform_action: media_player.select_source
icon: allente
- type: touchpad
name: touchpad
tap_action:
action: key
key: select
up:
tap_action:
action: key
key: up
hold_action:
action: repeat
name: up
type: button
down:
tap_action:
action: key
key: down
hold_action:
action: repeat
name: down
type: button
left:
tap_action:
action: key
key: left
hold_action:
action: repeat
name: left
type: button
right:
tap_action:
action: key
key: right
hold_action:
action: repeat
name: right
type: button
styles: |-
toucharea {
height: 430px;
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png');
background-color: RGBA(0,0,0,0);
background-size: 65%;
background-repeat: no-repeat;
background-position: center;
border-radius: 0;
opacity: 1;
top: 0px;
bottom: 0px;
position: static !important;
left: 0px;
right: 0px;
width: inherit;
}
double_tap_action:
action: key
key: menu
platform: Apple TV
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 10 !important;
position: fixed !important; /* Change to fixed or absolute as needed */
background: RGBA(0, 0, 0, 0.5);
left: 8px;
right: 8px;
top: 106px !important;
bottom: 238px;
padding-top: 0px;
padding-bottom: 0px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
bottom: 168px;
left: 8px;
right: 8px;
height: 70px;
background: RGBA(0, 0, 0, 0.5);
opacity: 1;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:backspace
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.master_bedroom
data:
command: menu
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:play-pause
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.master_bedroom
data:
command: select
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:home
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.master_bedroom
data:
command: home
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
bottom: 88px;
left: 8px;
right: 8px;
height: 80px;
background: RGBA(0,0,0,0);
-webkit-backdrop-filter: blur(10px);
opacity: 1;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 88px;
left: 8px;
right: 8px;
width: 20%;
desktop-width: 25px;
height: 10%;
background: RGBA(0,0,0,0.99);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: entities
entities:
- type: custom:slider-entity-row
entity: media_player.master_bedroom
full_row: true
toggle: true
step: 1
card_mod:
style: |
ha-card {
padding-bottom: 0px;
padding: 0px;
top: 0px;
padding-top: 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
subview: false
theme: ios-dark-mode-blue-red
- title: 'ATV Remote: Living Room'
path: atv-remote-living-room
icon: ''
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 10px;
position: fixed;
right: 8px;
left: 8px;
top: 8px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Living Room On
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Living Room Off
- type: spacer
- type: entity
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: toggle
icon: mdi:power
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
top: 61px;
left: 8px;
right: 8px;
height: 45px;
background: RGBA(0, 0, 0, 0.5);
opacity: 1;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 30
cards:
- type: custom:button-card
icon: phu:apple-tv
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: TV
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:netflix
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: netflix
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: phu:disney-plus
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: disney+
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:prime
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: prime
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:hbo
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: max
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:android-tv-card
remote_id: remote.living_room
media_player_id: media_player.living_room_2
autofill_entity_id: true
rows:
- - touchpad
custom_actions:
- type: button
name: power
tap_action:
action: key
key: wakeup
icon: mdi:power
hold_action:
action: key
key: suspend
- type: button
name: menu
tap_action:
action: key
key: menu
icon: mdi:backspace
- type: button
name: home
tap_action:
action: key
key: home
icon: mdi:home
hold_action:
action: more-info
- icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
name: skip-backward
type: button
- icon: mdi:fast-forward-10
action: key
name: skip-forward
tap_action:
key: skip_forward
action: key
type: button
- type: button
name: play
tap_action:
action: key
key: play
icon: mdi:play
- type: button
name: pause
tap_action:
action: key
key: pause
icon: mdi:pause
- type: button
name: up
tap_action:
action: key
key: up
hold_action:
action: repeat
icon: mdi:chevron-up
- type: button
name: down
tap_action:
action: key
key: down
hold_action:
action: repeat
icon: mdi:chevron-down
- type: button
name: left
tap_action:
action: key
key: left
hold_action:
action: repeat
icon: mdi:chevron-left
- type: button
name: right
tap_action:
action: key
key: right
hold_action:
action: repeat
icon: mdi:chevron-right
- type: button
name: center
tap_action:
action: key
key: select
icon: mdi:checkbox-blank-circle
double_tap_action:
action: key
key: menu
- type: button
name: primevideo
tap_action:
action: perform-action
data:
source: Prime Video
perform_action: media_player.select_source
icon: primevideo
- type: button
name: netflix
tap_action:
action: perform-action
data:
source: Netflix
perform_action: media_player.select_source
icon: mdi:netflix
- type: button
name: spotify
tap_action:
action: perform-action
data:
source: Spotify
perform_action: media_player.select_source
icon: mdi:spotify
- type: button
name: disney
tap_action:
action: perform-action
data:
source: Disney+
perform_action: media_player.select_source
icon: disney
- type: button
name: youtube
tap_action:
action: perform-action
data:
source: YouTube
perform_action: media_player.select_source
icon: mdi:youtube
- type: button
name: appletv
tap_action:
action: perform-action
data:
source: TV
perform_action: media_player.select_source
icon: appletv
- type: button
name: max
tap_action:
action: perform-action
data:
source: HBO Max
perform_action: media_player.select_source
icon: max
- type: button
name: skyshowtime
tap_action:
action: perform-action
data:
source: SkyShowtime
perform_action: media_player.select_source
icon: showtime
- type: button
name: plex
tap_action:
action: perform-action
data:
source: Plex
perform_action: media_player.select_source
icon: mdi:plex
- type: button
name: discovery
tap_action:
action: perform-action
data:
source: discovery+
perform_action: media_player.select_source
icon: discovery
- type: button
name: viaplay
tap_action:
action: perform-action
data:
source: Viaplay
perform_action: media_player.select_source
icon: viaplay
- type: button
name: tv2play
tap_action:
action: perform-action
data:
source: TV 2 Play
perform_action: media_player.select_source
icon: tv2play
- type: button
name: nrktv
tap_action:
action: perform-action
data:
source: NRK TV
perform_action: media_player.select_source
icon: nrktv
- type: button
name: allente
tap_action:
action: perform-action
data:
source: Allente
perform_action: media_player.select_source
icon: allente
- type: touchpad
name: touchpad
tap_action:
action: key
key: select
up:
tap_action:
action: key
key: up
hold_action:
action: repeat
name: up
type: button
down:
tap_action:
action: key
key: down
hold_action:
action: repeat
name: down
type: button
left:
tap_action:
action: key
key: left
hold_action:
action: repeat
name: left
type: button
right:
tap_action:
action: key
key: right
hold_action:
action: repeat
name: right
type: button
styles: |-
toucharea {
height: 410px;
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png');
background-color: RGBA(0,0,0,0);
background-size: 55%;
background-repeat: no-repeat;
background-position: center;
border-radius: 0px 0px 0px 0px;
opacity: 1;
padding-top: 0px;
padding-bottom: 20px;
position: null;
padding-left: 0px;
padding-right: 0px;
width: auto;
}
double_tap_action:
action: key
key: menu
platform: Apple TV
keyboard_id: media_player.living_room_3
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 1 !important;
position: fixed !important; /* Change to fixed or absolute as needed */
background: RGBA(0, 0, 0, 0.5);
left: 8px;
right: 8px;
top: 106px !important;
bottom: 273px;
padding-top: 0px;
padding-bottom: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 0px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: max-content
card:
- background-color: rgba(0,0,0,0.5)
- webkit-backdrop-filter: blur(10px); !important;}
- box-shadow: none
- border-radius: 0px 0px 10px 10px
- border-width: 0px
- padding: 15px
- margin: 0px
- height: 185px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:my-slider-v2
entity: media_player.living_room_2
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 20px 0 0 0
- background: none
container:
- border-radius: 10px
- background: none
- padding: 0 0 0 5px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 97%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
entity: media_player.gym
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
buttons:
card:
type: custom:button-card
custom_fields:
previous:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: menu
icon: mdi:backspace
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin: 0px
icon:
- width: 40px
- color: rgba(255,255,255,0.8)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.living_room_2
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.living_room_2
entity: media_player.living_room_2
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin-bottom: 0px
icon:
- width: 55px
- color: rgba(255,255,255,0.8)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: home
icon: mdi:home
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 40px
- color: rgba(255,255,255,0.8)
star:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: left
icon: mdi:rewind-10
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
menu:
card:
type: custom:button-card
entity: media_player.living_room_2
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: right
icon: mdi:fast-forward-10
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-columns: 2fr 3fr 3fr 3fr 2fr
- grid-template-rows: min-content
- grid-template-areas: '"star previous play next menu"'
card:
- padding: 0 0 0 0px
- margin: 3px 0px -6px 0px
- align-self: end
- background: none
- box-shadow: none
- border-width: 0px
- border-radius: 0px
styles:
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: max-content max-content max-content max-content;
- align-items: end
card:
- background: transparent
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 15px 0px
- margin: 0px 0px 0px 0px
- type: custom:button-card
entity: media_player.rx_a1070_main
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
volume_control:
card:
type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.rx_a1070_main
icon: mdi:volume-medium
show_name: false
styles:
card:
- border-radius: 25px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
- type: custom:my-slider-v2
entity: media_player.rx_a1070_main
attribute: volume_level
min: 0
max: 100
step: 2
styles:
card:
- box-shadow: none
- margin: 9px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 0px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- width: 100%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.rx_a1070_main
icon: mdi:volume-high
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-areas: '"volume_control"'
- grid-template-columns: 1fr
- grid-template-rows: max-content;
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0px 0px
- margin-bottom: '-5px'
card_mod:
style: |
@media (max-width: 767px) {
:host {
position: fixed !important;
bottom: 88px;
left: 8px;
right: 8px;
}
ha-card {
background-color: rgba(0, 0, 0, 0.3); !important;
-webkit-backdrop-filter: blur(10px); !important;}
border-top-left-radius: 25px !important;
border-top-right-radius: 25px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: 1x solid rgba(100, 100, 100, 0.5);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
subview: false
theme: ios-dark-mode-blue-red
- title: 'ATV Remote: Theater'
path: atv-remote-theater
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
position: fixed;
right: 8px;
left: 8px;
top: 8px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.theater_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Theater On
- type: conditional
conditions:
- condition: state
entity: input_boolean.theater_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Theater Off
- type: spacer
- type: entity
entity: input_boolean.theater_apple_tv_status
tap_action:
action: toggle
icon: mdi:power
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
top: 61px;
left: 8px;
right: 8px;
height: 45px;
background: RGBA(0, 0, 0, 0.5);
opacity: 1;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 30
cards:
- type: custom:button-card
icon: phu:apple-tv
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.theater
data:
source: TV
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:netflix
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.theater
data:
source: netflix
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: phu:disney-plus
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.theater
data:
source: disney+
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:prime
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.theater
data:
source: prime
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:hbo
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.theater
data:
source: max
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:android-tv-card
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 10 !important;
position: fixed !important; /* Change to fixed or absolute as needed */
background: RGBA(0, 0, 0, 0.5);
left: 8px;
right: 8px;
top: 106px !important;
bottom: 238px;
padding-top: 0px;
padding-bottom: 0px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
remote_id: remote.theater
media_player_id: media_player.theater
autofill_entity_id: true
rows:
- - touchpad
touchpad_style:
height: 430px
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png')
background-color: RGBA(0,0,0,0)
background-size: 65%
background-repeat: no-repeat
background-position: center
border-radius: 0
opacity: 1
top: 0px
bottom: 0px
position: static !important
left: 0px
right: 0px
width: inherit
custom_actions:
power:
icon: mdi:power
tap_action:
action: key
key: wakeup
hold_action:
action: key
key: suspend
menu:
icon: mdi:backspace
tap_action:
action: key
key: menu
home:
tap_action:
action: key
key: home
hold_action:
action: more-info
skip-backward:
icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
skip-forward:
icon: mdi:fast-forward-10
action: key
key: skip_forward
play:
tap_action:
action: key
key: play
pause:
tap_action:
action: key
key: pause
up:
tap_action:
action: key
key: up
down:
tap_action:
action: key
key: down
left:
tap_action:
action: key
key: left
right:
tap_action:
action: key
key: right
center:
tap_action:
action: key
key: select
double_tap_action:
action: key
key: menu
primevideo:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Prime Video
netflix:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Netflix
spotify:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Spotify
disney:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Disney+
youtube:
tap_action:
action: call-service
service: media_player.select_source
data:
source: YouTube
appletv:
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV
max:
tap_action:
action: call-service
service: media_player.select_source
data:
source: HBO Max
skyshowtime:
tap_action:
action: call-service
service: media_player.select_source
data:
source: SkyShowtime
plex:
icon: mdi:plex
tap_action:
action: call-service
service: media_player.select_source
data:
source: Plex
discovery:
icon: discovery
tap_action:
action: call-service
service: media_player.select_source
data:
source: discovery+
viaplay:
icon: viaplay
tap_action:
action: call-service
service: media_player.select_source
data:
source: Viaplay
tv2play:
icon: tv2play
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV 2 Play
nrktv:
icon: nrktv
tap_action:
action: call-service
service: media_player.select_source
data:
source: NRK TV
allente:
icon: allente
tap_action:
action: call-service
service: media_player.select_source
data:
source: Allente
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
bottom: 168px;
left: 8px;
right: 8px;
height: 70px;
background: RGBA(0, 0, 0, 0.5);
opacity: 1;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:backspace
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.theater
data:
command: menu
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:play-pause
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.theater
data:
command: select
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:home
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.theater
data:
command: home
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
bottom: 88px;
left: 8px;
right: 8px;
height: 80px;
background: RGBA(0,0,0,0);
-webkit-backdrop-filter: blur(10px);
opacity: 1;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 88px;
left: 8px;
right: 8px;
width: 20%;
desktop-width: 25px;
height: 10%;
background: RGBA(0,0,0,0.99);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: entities
entities:
- type: custom:slider-entity-row
entity: media_player.marantz_sr7013_2
full_row: true
toggle: true
step: 1
card_mod:
style: |
ha-card {
padding-bottom: 0px;
padding: 0px;
top: 0px;
padding-top: 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
theme: ios-dark-mode-blue-red
- title: 'ATV Remote: Guest Bedroom'
path: atv-remote-guest-bedroom
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
position: static;
z-index: 3;
top: 8px;
left: 8px;
right: 8px;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
background-color: rgba(0, 0, 0, .5);
-webkit-backdrop-filter: blur(100px);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: fapro:arrow-left-solid
- type: spacer
- type: entity
entity: sensor.total_lights_on
tap_action:
action: navigate
navigation_path: /lovelace/lights
icon_color: primary
icon: fapro:lightbulb-on-solid
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.locked_doors_count
tap_action:
action: navigate
navigation_path: /lovelace/security
use_entity_picture: false
icon: fapro:lock-open-solid
icon_color: '#D20F44'
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.media_on
icon_color: '#0171A4'
tap_action:
action: navigate
navigation_path: /lovelace/Media
icon: fapro:tv-retro-solid
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/scenes
icon: fapro:floppy-disk-solid
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
- type: custom:stack-in-card
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
padding-left: 20px;
padding-right: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
position: fixed;
right: 8px;
left: 8px;
top: 61px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: mdi:lightbulb-on
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.guest_bedroom_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Guest Bedroom On
- type: conditional
conditions:
- condition: state
entity: input_boolean.guest_bedroom_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Guest Bedroom Off
- type: spacer
- type: entity
entity: input_boolean.guest_bedroom_apple_tv_status
tap_action:
action: toggle
icon: mdi:power
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:android-tv-card
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 10 !important;
position: fixed !important; /* Change to fixed or absolute as needed */
background: RGBA(0, 0, 0, 0.5);
left: 8px;
right: 8px;
top: 106px !important;
bottom: 238px;
padding-top: 0px;
padding-bottom: 0px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
remote_id: remote.guest_bedroom_apple_tv
media_player_id: media_player.guest_bedroom_apple_tv
autofill_entity_id: true
rows:
- - touchpad
touchpad_style:
height: 400px
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png')
background-color: RGBA(0,0,0,0)
background-size: 65%
background-repeat: no-repeat
background-position: center
border-radius: 0
opacity: 1
top: 0px
bottom: 0px
position: static !important
left: 0px
right: 0px
width: inherit
custom_actions:
power:
icon: mdi:power
tap_action:
action: key
key: wakeup
hold_action:
action: key
key: suspend
menu:
icon: mdi:backspace
tap_action:
action: key
key: menu
home:
tap_action:
action: key
key: home
hold_action:
action: more-info
skip-backward:
icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
skip-forward:
icon: mdi:fast-forward-10
action: key
key: skip_forward
play:
tap_action:
action: key
key: play
pause:
tap_action:
action: key
key: pause
up:
tap_action:
action: key
key: up
down:
tap_action:
action: key
key: down
left:
tap_action:
action: key
key: left
right:
tap_action:
action: key
key: right
center:
tap_action:
action: key
key: select
double_tap_action:
action: key
key: menu
primevideo:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Prime Video
netflix:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Netflix
spotify:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Spotify
disney:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Disney+
youtube:
tap_action:
action: call-service
service: media_player.select_source
data:
source: YouTube
appletv:
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV
max:
tap_action:
action: call-service
service: media_player.select_source
data:
source: HBO Max
skyshowtime:
tap_action:
action: call-service
service: media_player.select_source
data:
source: SkyShowtime
plex:
icon: mdi:plex
tap_action:
action: call-service
service: media_player.select_source
data:
source: Plex
discovery:
icon: discovery
tap_action:
action: call-service
service: media_player.select_source
data:
source: discovery+
viaplay:
icon: viaplay
tap_action:
action: call-service
service: media_player.select_source
data:
source: Viaplay
tv2play:
icon: tv2play
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV 2 Play
nrktv:
icon: nrktv
tap_action:
action: call-service
service: media_player.select_source
data:
source: NRK TV
allente:
icon: allente
tap_action:
action: call-service
service: media_player.select_source
data:
source: Allente
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
bottom: 168px;
left: 8px;
right: 8px;
height: 70px;
background: RGBA(0, 0, 0, 0.5);
opacity: 1;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:backspace
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.guest_bedroom_apple_tv
data:
command: menu
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:play-pause
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.guest_bedroom_apple_tv
data:
command: select
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:home
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.guest_bedroom_apple_tv
data:
command: home
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
bottom: 88px;
left: 8px;
right: 8px;
height: 80px;
background: RGBA(0,0,0,0);
-webkit-backdrop-filter: blur(10px);
opacity: 1;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 88px;
left: 8px;
right: 8px;
width: 20%;
desktop-width: 25px;
height: 10%;
background: RGBA(0,0,0,0.99);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: entities
entities:
- type: custom:slider-entity-row
entity: media_player.sony_kd_50x80j_2
full_row: true
toggle: true
step: 1
card_mod:
style: |
ha-card {
padding-bottom: 0px;
padding: 0px;
top: 0px;
padding-top: 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
theme: ios-dark-mode-blue-red
- title: 'ATV Remote: Gym'
path: atv-remote-gym
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
left: px;
right: px;
height: 45px;
padding: px;
}
cards:
- type: grid
square: false
cards:
- type: button
show_name: false
show_icon: true
icon: mdi:menu
icon_height: 25px
tap_action:
action: call-service
service: browser.sidebar_toggle
card_mod:
style: |
ha-card {
width: 50%;
margin-top: -3px; /* Adjust as needed */
box-sizing: border-box;
}
- type: markdown
content: Home
card_mod:
style: |
ha-card {
width: 200%;
right: 50%;
text-align: center;
margin-top: -3px; /* Adjust as needed */
box-sizing: border-box;
}
- type: button
show_name: false
show_icon: true
icon: mdi:content-save
icon_height: 25px
tap_action:
action: navigate
navigation_path: /lovelace/scenes
card_mod:
style: |
ha-card {
width: 50%;
left: 50%;
margin-top: -3px; /* Adjust as needed */
box-sizing: border-box;
}
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 90px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: RGBA(0,0,0,0.5);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- opacity: 1
- type: custom:button-card
icon: phu:apple-tv
tap_action:
action: toggle
entity: input_boolean.menu_apple_tv
styles:
icon:
- width: 60px
- color: white
- opacity: 0.5
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: phu:playstation-5
tap_action:
action: toggle
entity: input_boolean.menu_playstation
styles:
icon:
- width: 60px
- color: white
- opacity: 0.5
- top: 2px
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:nintendo-switch
tap_action:
action: navigate
navigation_path: '#nintendoswitch'
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: /lovelace/lights
styles:
icon:
- width: 50px
- color: white
- opacity: 0.5
- top: '-2px'
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: conditional
conditions:
- condition: state
entity: input_boolean.menu_apple_tv
state: 'on'
card:
type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 99;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: RGBA(0,0,0,0.3);
opacity: 1;
border-radius: 0px;
padding: 25px;
overflow: hidden !important; /* Prevent scrolling */
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: vertical-stack
square: false
rows: 5
cards:
- type: custom:button-card
name: >
[[[ return
(states['input_boolean.master_bedroom_apple_tv_status'].state
== 'on') ? 'Bedroom Apple TV' : 'Bedroom Apple TV';
]]]
show_state: true
show_icon: false
icon: mdi:star-four-points-circle-outline
entity: input_boolean.master_bedroom_apple_tv_status
tap_action:
action: call-service
service: script.menu_bedroom_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Living Room Apple TV
show_state: true
show_icon: false
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: call-service
service: script.menu_living_room_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Theater Apple TV
show_state: true
show_icon: false
entity: input_boolean.theater_apple_tv_status
tap_action:
action: call-service
service: script.menu_theater_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Guest Bedroom Apple TV
show_state: true
show_icon: false
entity: input_boolean.guest_bedroom_apple_tv_status
tap_action:
action: call-service
service: script.menu_guest_bedroom_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Gym Apple TV
show_state: true
show_icon: false
entity: input_boolean.gym_apple_tv_status
tap_action:
action: call-service
service: script.menu_gym_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Close
show_state: false
show_icon: false
tap_action:
action: toggle
entity: input_boolean.menu_apple_tv
styles:
card:
- height: 50px
background: none
box-shadow: none
top: '-3px'
name:
- font-size: 14px
- justify-self: Center
- color: grey
- type: conditional
conditions:
- condition: state
entity: input_boolean.menu_playstation
state: 'on'
card:
type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 99;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: RGBA(0,0,0,0.3);
opacity: 1;
border-radius: 0px;
padding: 25px;
overflow: hidden !important; /* Prevent scrolling */
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: vertical-stack
square: false
rows: 5
cards:
- type: custom:button-card
name: >
[[[ return
(states['input_boolean.master_bedroom_apple_tv_status'].state
== 'on') ? 'Bedroom Apple TV' : 'Bedroom Apple TV';
]]]
show_state: true
show_icon: false
entity: input_boolean.theater_playstation_5_status
tap_action:
action: call-service
service: script.menu_theater_playstation_5
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Close
show_state: false
show_icon: false
tap_action:
action: toggle
entity: input_boolean.menu_playstation
styles:
card:
- height: 50px
background: none
box-shadow: none
top: '-3px'
name:
- font-size: 14px
- justify-self: Center
- color: grey
- type: conditional
conditions:
- condition: state
entity: input_boolean.menu_apple_tv
state: 'on'
card:
type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
body, html {
overflow: hidden; /* Prevent scrolling */
}
ha-card {
z-index: 0;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
background: RGBA(0,0,0,0.2);
opacity: 1;
border-radius: 0px;
padding: 20px;
overflow: hidden !important; /* Prevent scrolling */
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0 !important;
position: relative !important; /* Change to fixed or absolute as needed */
}
cards:
- type: custom:android-tv-card
remote_id: remote.theater
media_player_id: media_player.theater
autofill_entity_id: true
rows:
- - touchpad
- - menu
- play
- home
touchpad_style:
height: 370px
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png')
background-color: transparent
background-size: 200px
background-repeat: no-repeat
background-position: center
opacity: 1
custom_actions:
power:
icon: mdi:power
tap_action:
action: key
key: wakeup
hold_action:
action: key
key: suspend
menu:
icon: mdi:backspace
tap_action:
action: key
key: menu
home:
tap_action:
action: key
key: home
hold_action:
action: more-info
skip-backward:
icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
skip-forward:
icon: mdi:fast-forward-10
action: key
key: skip_forward
play:
tap_action:
action: key
key: play
pause:
tap_action:
action: key
key: pause
up:
tap_action:
action: key
key: up
down:
tap_action:
action: key
key: down
left:
tap_action:
action: key
key: left
right:
tap_action:
action: key
key: right
center:
tap_action:
action: key
key: select
double_tap_action:
action: key
key: menu
primevideo:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Prime Video
netflix:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Netflix
spotify:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Spotify
disney:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Disney+
youtube:
tap_action:
action: call-service
service: media_player.select_source
data:
source: YouTube
appletv:
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV
max:
tap_action:
action: call-service
service: media_player.select_source
data:
source: HBO Max
skyshowtime:
tap_action:
action: call-service
service: media_player.select_source
data:
source: SkyShowtime
plex:
icon: mdi:plex
tap_action:
action: call-service
service: media_player.select_source
data:
source: Plex
discovery:
icon: discovery
tap_action:
action: call-service
service: media_player.select_source
data:
source: discovery+
viaplay:
icon: viaplay
tap_action:
action: call-service
service: media_player.select_source
data:
source: Viaplay
tv2play:
icon: tv2play
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV 2 Play
nrktv:
icon: nrktv
tap_action:
action: call-service
service: media_player.select_source
data:
source: NRK TV
allente:
icon: allente
tap_action:
action: call-service
service: media_player.select_source
data:
source: Allente
- type: custom:mushroom-number-card
display_mode: slider
- type: entities
entities:
- type: custom:slider-entity-row
entity: media_player.marantz_sr7013_2
full_row: true
toggle: true
step: 1
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
theme: ios-dark-mode-blue-red
- title: 'Nintendo Remote: Living Room'
path: nintendo-remote-living-room
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 1;
position: fixed;
top: 8px;
left: 8px;
right: 8px;
height: 45px;
}
cards:
- type: grid
square: false
cards:
- type: button
show_name: false
show_icon: true
icon: mdi:home
icon_height: 25px
tap_action:
action: navigate
navigation_path: /lovelace/home
card_mod:
style: |
ha-card {
width: 50%;
margin-top: -3px;
box-sizing: border-box;
}
- type: conditional
conditions:
- entity: input_boolean.living_room_nintendo_status
state: 'on'
card:
type: markdown
content: Living Room Nintendo Switch On
card_mod:
style: |
ha-card {
width: 200%;
right: 50%;
text-align: center;
margin-top: -3px;
box-sizing: border-box;
background: transparent;
}
- type: conditional
conditions:
- entity: input_boolean.living_room_nintendo_status
state: 'off'
card:
type: markdown
content: Living Room Nintendo Switch Off
card_mod:
style: |
ha-card {
width: 200%;
right: 50%;
text-align: center;
margin-top: -3px;
box-sizing: border-box;
}
- type: button
show_name: false
show_icon: true
icon: mdi:power-standby
icon_height: 23px
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.living_room_nintendo_status
card_mod:
style: |
ha-card {
width: 50%;
left: 50%;
margin-top: -3px;
margin-bottom: 2px;
box-sizing: border-box;
}
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 10 !important;
position: fixed !important; /* Change to fixed or absolute as needed */
background: RGBA(0, 0, 0, 0.5);
border-radius: 5px;
left: 8px;
right: 8px;
top: 61px !important;
bottom: 98px;
padding-top: 30px;
padding-bottom: 30px !important;
}
}
cards:
- type: custom:android-tv-card
remote_id: remote.living_room
media_player_id: ''
autofill_entity_id: true
rows:
- - touchpad
touchpad_style:
height: 611px
background-image: >-
url('https://upload.wikimedia.org/wikipedia/commons/5/5d/Nintendo_Switch_Logo.svg')
background-color: RGBA(0,0,0,0)
background-size: 65%
background-repeat: no-repeat
background-position: center
border-radius: 0
opacity: 1
top: '-20px'
bottom: 10px
position: absolute !important
left: 10px
right: 10px
width: inherit
custom_actions:
power:
icon: mdi:power
tap_action:
action: key
key: wakeup
hold_action:
action: key
key: suspend
menu:
icon: mdi:backspace
tap_action:
action: key
key: menu
home:
tap_action:
action: key
key: home
hold_action:
action: more-info
skip-backward:
icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
skip-forward:
icon: mdi:fast-forward-10
action: key
key: skip_forward
play:
tap_action:
action: key
key: play
pause:
tap_action:
action: key
key: pause
up:
tap_action:
action: key
key: up
down:
tap_action:
action: key
key: down
left:
tap_action:
action: key
key: left
right:
tap_action:
action: key
key: right
center:
tap_action:
action: key
key: select
double_tap_action:
action: key
key: menu
primevideo:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Prime Video
netflix:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Netflix
spotify:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Spotify
disney:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Disney+
youtube:
tap_action:
action: call-service
service: media_player.select_source
data:
source: YouTube
appletv:
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV
max:
tap_action:
action: call-service
service: media_player.select_source
data:
source: HBO Max
skyshowtime:
tap_action:
action: call-service
service: media_player.select_source
data:
source: SkyShowtime
plex:
icon: mdi:plex
tap_action:
action: call-service
service: media_player.select_source
data:
source: Plex
discovery:
icon: discovery
tap_action:
action: call-service
service: media_player.select_source
data:
source: discovery+
viaplay:
icon: viaplay
tap_action:
action: call-service
service: media_player.select_source
data:
source: Viaplay
tv2play:
icon: tv2play
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV 2 Play
nrktv:
icon: nrktv
tap_action:
action: call-service
service: media_player.select_source
data:
source: NRK TV
allente:
icon: allente
tap_action:
action: call-service
service: media_player.select_source
data:
source: Allente
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 90px;
background: RGBA(0,0,0,0.9);
opacity: 1;
border-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 10%;
background: RGBA(0,0,0,0.90);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 1
styles:
z-index: 10
cards:
- type: custom:mushroom-number-card
display_mode: slider
- type: entities
entities:
- type: custom:slider-entity-row
entity: media_player.rx_a1070_main
card_mod:
style: |
ha-card {
margin-bottom: 50px; /* Adjust this value to move the card up */
}
full_row: true
toggle: true
step: 1
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
theme: ios-dark-mode-blue-red
- title: 'Nintendo Remote: Theater'
path: nintendo-remote-theater
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 90px;
background: RGBA(0,0,0,0.80);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- opacity: 0.5
- type: custom:button-card
icon: phu:apple-tv
tap_action:
action: navigate
navigation_path: '#appletv'
styles:
icon:
- width: 60px
- color: white
- opacity: 0.5
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: phu:playstation-5
tap_action:
action: navigate
navigation_path: '#playstation5'
styles:
icon:
- width: 60px
- color: white
- opacity: 0.5
- top: 2px
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:nintendo-switch
tap_action:
action: navigate
navigation_path: '#nintendoswitch'
styles:
icon:
- width: 40px
- color: white
- opacity: 1
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: /lovelace/lights
styles:
icon:
- width: 50px
- color: white
- opacity: 0.5
- top: '-2px'
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
styles: |
#root {
border-radius: 0px;
max-height: 480px;
}
card_mod:
style: |
.close-pop-up {
display: none !important;
}
margin: 8px
close_on_click: true
bg_blur: 10
bg_opacity: 99
hash: '#appletv'
trigger_state: 'on'
trigger_close: true
shadow_opacity: 90
bg_color: rgba(10. 10. 10. 10)
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: RGBA(0,0,0,0.0);
opacity: 1;
border-radius: 0px;
padding: 25px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -3;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 5px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 0 !important;
border-radius: 0px;
padding: 10px;
}
}
card:
type: vertical-stack
square: false
rows: 6
cards:
- type: custom:button-card
name: Bedroom AppleTV
show_state: true
show_icon: false
entity: input_boolean.master_bedroom_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Living Room AppleTV
show_state: true
show_icon: false
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Theater AppleTV
show_state: true
show_icon: false
entity: input_boolean.theater_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-theater
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Guest Bedroom AppleTV
show_state: true
show_icon: false
entity: input_boolean.guest_bedroom_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-guest-bedroom
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Gym AppleTV
show_state: true
show_icon: false
entity: input_boolean.gym_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-gym
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Cancel
show_icon: false
tap_action:
action: navigate
navigation_path: '#appletv'
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 16px
- justify-self: Center
- color: gray
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
styles: |
#root {
border-radius: 0px;
max-height: 287px;
}
margin: 8px
close_on_click: true
bg_blur: 10
bg_opacity: 99
hash: '#playstation5'
trigger_state: 'on'
trigger_close: true
shadow_opacity: 90
bg_color: rgba(10. 10. 10. 10)
card_mod:
style: |
.close-pop-up {
display: none !important;
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: RGBA(0,0,0,0.0);
opacity: 1;
border-radius: 0px;
padding: 25px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -3;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 5px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 0 !important;
border-radius: 0px;
padding: 10px;
}
}
card:
type: vertical-stack
square: false
rows: 2
cards:
- type: custom:button-card
name: Theater Playstation 5
show_state: true
show_icon: false
entity: input_boolean.theater_playstation_5_status
tap_action:
action: navigate
navigation_path: /lovelace/ps5-remote-theater
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Cancel
show_icon: false
tap_action:
action: navigate
navigation_path: '#playstation5'
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 16px
- justify-self: Center
- color: gray
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
styles: |
#root {
border-radius: 0px;
max-height: 337px;
}
margin: 8px
close_on_click: true
bg_blur: 10
bg_opacity: 99
hash: '#nintendoswitch'
trigger_state: 'on'
trigger_close: true
shadow_opacity: 90
bg_color: rgba(10. 10. 10. 10)
card_mod:
style: |
.close-pop-up {
display: none !important;
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: RGBA(0,0,0,0.0);
opacity: 1;
border-radius: 0px;
padding: 25px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -3;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 5px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 0 !important;
border-radius: 0px;
padding: 10px;
}
}
card:
type: vertical-stack
square: false
rows: 3
cards:
- type: custom:button-card
name: Living Room Nintendo Switch
show_state: true
show_icon: false
entity: input_boolean.living_room_nintendo_status
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-living-room
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Theater Nintendo Switch
show_state: true
show_icon: false
entity: input_boolean.theater_nintendo_switch_status
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-theater
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Cancel
show_icon: false
tap_action:
action: navigate
navigation_path: '#nintendoswitch'
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 16px
- justify-self: Center
- color: gray
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: entity
entity: input_boolean.theater_nintendo_switch_status
tap_action:
action: none
- type: spacer
- type: action
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.theater_nintendo_switch_status
data: {}
icon: mdi:power
- type: custom:mushroom-title-card
title: Theater Nintendo
alignment: start
subtitle: ''
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0 !important;
position: relative !important; /* Change to fixed or absolute as needed */
}
cards:
- type: custom:android-tv-card
remote_id: null
media_player_id: null
autofill_entity_id: true
rows:
- - touchpad
- - null
- null
- null
touchpad_style:
height: 370px
background-image: >-
url('https://upload.wikimedia.org/wikipedia/commons/5/5d/Nintendo_Switch_Logo.svg')
background-color: transparent
background-size: 200px
background-repeat: no-repeat
background-position: center
opacity: 1
custom_actions:
power:
icon: mdi:power
tap_action:
action: key
key: wakeup
hold_action:
action: key
key: suspend
menu:
icon: mdi:backspace
tap_action:
action: key
key: menu
home:
tap_action:
action: key
key: home
hold_action:
action: more-info
skip-backward:
icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
skip-forward:
icon: mdi:fast-forward-10
action: key
key: skip_forward
play:
tap_action:
action: key
key: play
pause:
tap_action:
action: key
key: pause
up:
tap_action:
action: key
key: up
down:
tap_action:
action: key
key: down
left:
tap_action:
action: key
key: left
right:
tap_action:
action: key
key: right
center:
tap_action:
action: key
key: select
double_tap_action:
action: key
key: menu
primevideo:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Prime Video
netflix:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Netflix
spotify:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Spotify
disney:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Disney+
youtube:
tap_action:
action: call-service
service: media_player.select_source
data:
source: YouTube
appletv:
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV
max:
tap_action:
action: call-service
service: media_player.select_source
data:
source: HBO Max
skyshowtime:
tap_action:
action: call-service
service: media_player.select_source
data:
source: SkyShowtime
plex:
icon: mdi:plex
tap_action:
action: call-service
service: media_player.select_source
data:
source: Plex
discovery:
icon: discovery
tap_action:
action: call-service
service: media_player.select_source
data:
source: discovery+
viaplay:
icon: viaplay
tap_action:
action: call-service
service: media_player.select_source
data:
source: Viaplay
tv2play:
icon: tv2play
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV 2 Play
nrktv:
icon: nrktv
tap_action:
action: call-service
service: media_player.select_source
data:
source: NRK TV
allente:
icon: allente
tap_action:
action: call-service
service: media_player.select_source
data:
source: Allente
- type: custom:mushroom-number-card
display_mode: slider
- type: entities
entities:
- type: custom:slider-entity-row
entity: media_player.rx_a1070_main
full_row: true
toggle: true
step: 1
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
theme: ios-dark-mode-blue-red
- title: 'PS5 Remote: Theater'
path: ps5-remote-theater
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 90px;
background: RGBA(0,0,0,0.80);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- opacity: 0.5
- type: custom:button-card
icon: phu:apple-tv
tap_action:
action: navigate
navigation_path: '#appletv'
styles:
icon:
- width: 60px
- color: white
- opacity: 0.5
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: phu:playstation-5
tap_action:
action: navigate
navigation_path: '#playstation5'
styles:
icon:
- width: 60px
- color: white
- opacity: 1
- top: 2px
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:nintendo-switch
tap_action:
action: navigate
navigation_path: '#nintendoswitch'
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: /lovelace/lights
styles:
icon:
- width: 50px
- color: white
- opacity: 0.5
- top: '-2px'
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
styles: |
#root {
border-radius: 0px;
max-height: 480px;
}
card_mod:
style: |
.close-pop-up {
display: none !important;
}
margin: 8px
close_on_click: true
bg_blur: 10
bg_opacity: 99
hash: '#appletv'
trigger_state: 'on'
trigger_close: true
shadow_opacity: 90
bg_color: rgba(10. 10. 10. 10)
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: RGBA(0,0,0,0.0);
opacity: 1;
border-radius: 0px;
padding: 25px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -3;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 5px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 0 !important;
border-radius: 0px;
padding: 10px;
}
}
card:
type: vertical-stack
square: false
rows: 6
cards:
- type: custom:button-card
name: Bedroom AppleTV
show_state: true
show_icon: false
entity: input_boolean.master_bedroom_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Living Room AppleTV
show_state: true
show_icon: false
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Theater AppleTV
show_state: true
show_icon: false
entity: input_boolean.theater_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-theater
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Guest Bedroom AppleTV
show_state: true
show_icon: false
entity: input_boolean.guest_bedroom_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-guest-bedroom
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Gym AppleTV
show_state: true
show_icon: false
entity: input_boolean.gym_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-gym
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Cancel
show_icon: false
tap_action:
action: navigate
navigation_path: '#appletv'
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 16px
- justify-self: Center
- color: gray
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
styles: |
#root {
border-radius: 0px;
max-height: 287px;
}
margin: 8px
close_on_click: true
bg_blur: 10
bg_opacity: 99
hash: '#playstation5'
trigger_state: 'on'
trigger_close: true
shadow_opacity: 90
bg_color: rgba(10. 10. 10. 10)
card_mod:
style: |
.close-pop-up {
display: none !important;
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: RGBA(0,0,0,0.0);
opacity: 1;
border-radius: 0px;
padding: 25px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -3;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 5px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 0 !important;
border-radius: 0px;
padding: 10px;
}
}
card:
type: vertical-stack
square: false
rows: 2
cards:
- type: custom:button-card
name: Theater Playstation 5
show_state: true
show_icon: false
entity: input_boolean.theater_playstation_5_status
tap_action:
action: navigate
navigation_path: /lovelace/ps5-remote-theater
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Cancel
show_icon: false
tap_action:
action: navigate
navigation_path: '#playstation5'
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 16px
- justify-self: Center
- color: gray
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
styles: |
#root {
border-radius: 0px;
max-height: 337px;
}
margin: 8px
close_on_click: true
bg_blur: 10
bg_opacity: 99
hash: '#nintendoswitch'
trigger_state: 'on'
trigger_close: true
shadow_opacity: 90
bg_color: rgba(10. 10. 10. 10)
card_mod:
style: |
.close-pop-up {
display: none !important;
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: RGBA(0,0,0,0.0);
opacity: 1;
border-radius: 0px;
padding: 25px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -3;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 5px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 0 !important;
border-radius: 0px;
padding: 10px;
}
}
card:
type: vertical-stack
square: false
rows: 3
cards:
- type: custom:button-card
name: Living Room Nintendo Switch
show_state: true
show_icon: false
entity: input_boolean.living_room_nintendo_status
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-living-room
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Theater Nintendo Switch
show_state: true
show_icon: false
entity: input_boolean.theater_nintendo_switch_status
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-theater
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Cancel
show_icon: false
tap_action:
action: navigate
navigation_path: '#nintendoswitch'
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 16px
- justify-self: Center
- color: gray
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: entity
entity: input_boolean.theater_playstation_5_status
tap_action:
action: none
- type: spacer
- type: action
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.theater_playstation_5_status
data: {}
icon: mdi:power
- type: custom:mushroom-title-card
title: Theater Playstation 5
alignment: start
subtitle: ''
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0 !important;
position: relative !important; /* Change to fixed or absolute as needed */
}
cards:
- type: custom:android-tv-card
remote_id: null
media_player_id: null
autofill_entity_id: true
rows:
- - touchpad
- - null
- null
- null
touchpad_style:
height: 370px
background-image: url('https://i.ibb.co/HpBnztM/pngwing-com.png')
background-color: transparent
background-size: 300px
background-repeat: no-repeat
background-position: center
opacity: 1
custom_actions:
power:
icon: mdi:power
tap_action:
action: key
key: wakeup
hold_action:
action: key
key: suspend
menu:
icon: mdi:backspace
tap_action:
action: key
key: menu
home:
tap_action:
action: key
key: home
hold_action:
action: more-info
skip-backward:
icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
skip-forward:
icon: mdi:fast-forward-10
action: key
key: skip_forward
play:
tap_action:
action: key
key: play
pause:
tap_action:
action: key
key: pause
up:
tap_action:
action: key
key: up
down:
tap_action:
action: key
key: down
left:
tap_action:
action: key
key: left
right:
tap_action:
action: key
key: right
center:
tap_action:
action: key
key: select
double_tap_action:
action: key
key: menu
primevideo:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Prime Video
netflix:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Netflix
spotify:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Spotify
disney:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Disney+
youtube:
tap_action:
action: call-service
service: media_player.select_source
data:
source: YouTube
appletv:
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV
max:
tap_action:
action: call-service
service: media_player.select_source
data:
source: HBO Max
skyshowtime:
tap_action:
action: call-service
service: media_player.select_source
data:
source: SkyShowtime
plex:
icon: mdi:plex
tap_action:
action: call-service
service: media_player.select_source
data:
source: Plex
discovery:
icon: discovery
tap_action:
action: call-service
service: media_player.select_source
data:
source: discovery+
viaplay:
icon: viaplay
tap_action:
action: call-service
service: media_player.select_source
data:
source: Viaplay
tv2play:
icon: tv2play
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV 2 Play
nrktv:
icon: nrktv
tap_action:
action: call-service
service: media_player.select_source
data:
source: NRK TV
allente:
icon: allente
tap_action:
action: call-service
service: media_player.select_source
data:
source: Allente
- type: custom:mushroom-number-card
display_mode: slider
- type: entities
entities:
- type: custom:slider-entity-row
entity: media_player.rx_a1070_main
full_row: true
toggle: true
step: 1
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .8);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
border-top: .5px solid rgba(100, 100, 100, 0.2);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
}
/* Styles for desktop devices */
@media (min-width: 766px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 400
- padding-top: 6px
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 24px
- height: 24px
img_cell:
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 8px
- height: null
- width: 74px
name:
- font-size: 10px
- align-self: center
- font-weight: 300
- padding-top: 6px
theme: ios-dark-mode-blue-red
- title: Menu Test
path: menu-test
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
position: absolute;
top: 8px;
left: 8px;
right: 8px;
height: 45px;
}
cards:
- type: grid
square: false
cards:
- type: button
show_name: false
show_icon: true
icon: mdi:menu
icon_height: 25px
tap_action:
action: toggle
card_mod:
style: |
ha-card {
width: 50%;
margin-top: -3px; /* Adjust as needed */
box-sizing: border-box;
}
- type: markdown
content: Living Room
card_mod:
style: |
ha-card {
width: 200%;
right: 50%;
text-align: center;
margin-top: -3px; /* Adjust as needed */
box-sizing: border-box;
}
- type: button
show_name: false
show_icon: true
icon: mdi:home
icon_height: 25px
tap_action:
action: toggle
card_mod:
style: |
ha-card {
width: 50%;
left: 50%;
margin-top: -3px; /* Adjust as needed */
box-sizing: border-box;
}
- type: custom:gap-card
height: 4
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 0;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 90px;
background: RGBA(0,0,0,0.9);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.5);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- opacity: 0.5
- type: custom:button-card
icon: phu:apple-tv
tap_action:
action: navigate
navigation_path: '#appletv'
styles:
icon:
- width: 60px
- color: white
- opacity: 0.5
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: phu:playstation-5
tap_action:
action: navigate
navigation_path: '#playstation5'
styles:
icon:
- width: 60px
- color: white
- opacity: 0.5
- top: 2px
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:nintendo-switch
tap_action:
action: navigate
navigation_path: '#nintendoswitch'
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: /lovelace/lights
styles:
icon:
- width: 50px
- color: white
- opacity: 0.5
- top: '-2px'
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
styles: |
#root {
border-radius: 0px;
max-height: 480px;
}
card_mod:
style: |
.close-pop-up {
display: none !important;
}
margin: 8px
close_on_click: true
bg_blur: 10
bg_opacity: 99
hash: '#appletv'
trigger_state: 'on'
trigger_close: true
shadow_opacity: 90
bg_color: rgba(10. 10. 10. 10)
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: RGBA(0,0,0,0.0);
opacity: 1;
border-radius: 0px;
padding: 25px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -3;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 5px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 0 !important;
border-radius: 0px;
padding: 10px;
}
}
card:
type: vertical-stack
square: false
rows: 6
cards:
- type: custom:button-card
name: Bedroom AppleTV
show_state: true
show_icon: false
entity: input_boolean.master_bedroom_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Living Room AppleTV
show_state: true
show_icon: false
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Theater AppleTV
show_state: true
show_icon: false
entity: input_boolean.theater_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-theater
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Guest Bedroom AppleTV
show_state: true
show_icon: false
entity: input_boolean.guest_bedroom_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-guest-bedroom
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Gym AppleTV
show_state: true
show_icon: false
entity: input_boolean.gym_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-gym
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Cancel
show_icon: false
tap_action:
action: navigate
navigation_path: '#appletv'
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 16px
- justify-self: Center
- color: gray
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
styles: |
#root {
border-radius: 0px;
max-height: 287px;
}
margin: 8px
close_on_click: true
bg_blur: 10
bg_opacity: 99
hash: '#playstation5'
trigger_state: 'on'
trigger_close: true
shadow_opacity: 90
bg_color: rgba(10. 10. 10. 10)
card_mod:
style: |
.close-pop-up {
display: none !important;
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: RGBA(0,0,0,0.0);
opacity: 1;
border-radius: 0px;
padding: 25px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -3;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 5px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 0 !important;
border-radius: 0px;
padding: 10px;
}
}
card:
type: vertical-stack
square: false
rows: 2
cards:
- type: custom:button-card
name: Theater Playstation 5
show_state: true
show_icon: false
entity: input_boolean.theater_playstation_5_status
tap_action:
action: navigate
navigation_path: /lovelace/ps5-remote-theater
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Cancel
show_icon: false
tap_action:
action: navigate
navigation_path: '#playstation5'
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 16px
- justify-self: Center
- color: gray
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
styles: |
#root {
border-radius: 0px;
max-height: 337px;
}
margin: 8px
close_on_click: true
bg_blur: 10
bg_opacity: 99
hash: '#nintendoswitch'
trigger_state: 'on'
trigger_close: true
shadow_opacity: 90
bg_color: rgba(10. 10. 10. 10)
card_mod:
style: |
.close-pop-up {
display: none !important;
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: RGBA(0,0,0,0.0);
opacity: 1;
border-radius: 0px;
padding: 25px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -3;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 5px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 0 !important;
border-radius: 0px;
padding: 10px;
}
}
card:
type: vertical-stack
square: false
rows: 3
cards:
- type: custom:button-card
name: Living Room Nintendo Switch
show_state: true
show_icon: false
entity: input_boolean.living_room_nintendo_status
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-living-room
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Theater Nintendo Switch
show_state: true
show_icon: false
entity: input_boolean.theater_nintendo_switch_status
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-theater
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Cancel
show_icon: false
tap_action:
action: navigate
navigation_path: '#nintendoswitch'
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 16px
- justify-self: Center
- color: gray
- type: entities
entities:
- light.master_bathroom_lights
- sensor.sun_next_dawn
- sensor.sun_next_dusk
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
position: absolute;
top: 8px;
left: 8px;
right: 8px;
height: 45px;
padding: 4px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: weather
entity: weather.forecast_home
show_temperature: true
show_conditions: true
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/default_view
icon: mdi:home
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: conditional
conditions:
- condition: user
users:
- 52645528b8994aaf9c866b5cfee0e9eb
card:
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 90px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(10px);
background: RGBA(0,0,0,0.5);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:home
tap_action:
action: call-service
service: script.menu_home_2
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- opacity: 1
- type: custom:button-card
icon: phu:apple-tv
tap_action:
action: navigate
navigation_path: '#appletv'
styles:
icon:
- width: 60px
- color: white
- opacity: 0.5
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: phu:playstation-5
tap_action:
action: navigate
navigation_path: '#playstation5'
styles:
icon:
- width: 60px
- color: white
- opacity: 0.5
- top: 2px
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:nintendo-switch
tap_action:
action: navigate
navigation_path: '#nintendoswitch'
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:lightbulb-group
tap_action:
action: call-service
service: script.menu_lights
styles:
icon:
- width: 50px
- color: white
- opacity: 0.5
- top: '-2px'
img_cell:
- width: 60px
- height: 60px
card:
- background: none
- padding: 0
- type: conditional
conditions:
- condition: state
entity: input_boolean.menu_apple_tv
state: 'on'
card:
type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 99;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: RGBA(0,0,0,0.3);
opacity: 1;
border-radius: 0px;
padding: 25px;
overflow: hidden !important; /* Prevent scrolling */
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: vertical-stack
square: false
rows: 5
cards:
- type: custom:button-card
name: >
[[[ return
(states['input_boolean.master_bedroom_apple_tv_status'].state
== 'on') ? 'Bedroom Apple TV' : 'Bedroom Apple
TV'; ]]]
show_state: true
show_icon: false
entity: input_boolean.master_bedroom_apple_tv_status
tap_action:
action: call-service
service: script.menu_bedroom_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
padding: 25px
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: >
[[[ return
(states['input_boolean.living_room_apple_tv_status'].state
== 'on') ? 'Living Room Apple TV' : 'Living Room
Apple TV'; ]]]
show_state: true
show_icon: false
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: call-service
service: script.menu_living_room_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: >
[[[ return
(states['input_boolean.theater_apple_tv_status'].state
== 'on') ? 'Theater Apple TV' : 'Theater Apple
TV'; ]]]
show_state: true
show_icon: false
entity: input_boolean.theater_apple_tv_status
tap_action:
action: call-service
service: script.menu_theater_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: >
[[[ return
(states['input_boolean.guest_bedroom_apple_tv_status'].state
== 'on') ? 'Guest Bedroom Apple TV' : 'Guest
Bedroom Apple TV'; ]]]
show_state: true
show_icon: false
entity: input_boolean.guest_bedroom_apple_tv_status
tap_action:
action: call-service
service: script.menu_guest_bedroom_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: >
[[[ return
(states['input_boolean.gym_apple_tv_status'].state ==
'on') ? 'Gym Apple TV' : 'Gym Apple TV'; ]]]
show_state: true
show_icon: false
entity: input_boolean.gym_apple_tv_status
tap_action:
action: call-service
service: script.menu_gym_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Close
show_state: false
show_icon: false
tap_action:
action: toggle
entity: input_boolean.menu_apple_tv
styles:
card:
- height: 50px
background: none
box-shadow: none
top: '-3px'
name:
- font-size: 14px
- justify-self: Center
- color: grey
- type: conditional
conditions:
- condition: state
entity: input_boolean.menu_playstation
state: 'on'
card:
type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 99;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: RGBA(0,0,0,0.3);
opacity: 1;
border-radius: 0px;
padding: 25px;
overflow: hidden !important; /* Prevent scrolling */
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: vertical-stack
square: false
rows: 2
cards:
- type: custom:button-card
name: >
[[[ return
(states['input_boolean.theater_playstation_5_status'].state
== 'on') ? 'Theater Playstation 5' : 'Theater
Playstation 5'; ]]]
show_state: true
show_icon: false
entity: input_boolean.theater_playstation_5_status
tap_action:
action: call-service
service: script.menu_theater_playstation_5
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Close
show_state: false
show_icon: false
tap_action:
action: toggle
entity: input_boolean.menu_playstation
styles:
card:
- height: 50px
background: none
box-shadow: none
top: '-3px'
name:
- font-size: 14px
- justify-self: Center
- color: grey
- type: conditional
conditions:
- condition: state
entity: input_boolean.menu_nintendo_switch
state: 'on'
card:
type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 99;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: RGBA(0,0,0,0.3);
opacity: 1;
border-radius: 0px;
padding: 25px;
overflow: hidden !important; /* Prevent scrolling */
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: vertical-stack
square: false
rows: 5
cards:
- type: custom:button-card
name: >
[[[ return
(states['input_boolean.living_room_nintendo_status'].state
== 'on') ? 'Living Room Nintendo Switch' :
'Living Room Nintendo Switch'; ]]]
show_state: true
show_icon: false
entity: input_boolean.living_room_nintendo_status
tap_action:
action: call-service
service: script.menu_living_room_nintendo_switch
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: >
[[[ return
(states['input_boolean.theater_nintendo_switch_status'].state
== 'on') ? 'Theater Nintendo Switch' : 'Theater
Nintendo Switch'; ]]]
show_state: true
show_icon: false
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: call-service
service: script.menu_living_room_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Close
show_state: false
show_icon: false
tap_action:
action: toggle
entity: input_boolean.menu_nintendo_switch
styles:
card:
- height: 50px
background: none
box-shadow: none
top: '-3px'
name:
- font-size: 14px
- justify-self: Center
- color: grey
- type: conditional
conditions:
- condition: state
entity: input_boolean.menu_apple_tv
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 10;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
background: RGBA(0,0,0,0.1);
opacity: 1;
border-radius: 0px;
padding: 20px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.menu_playstation
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 10;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
background: RGBA(0,0,0,0.1);
opacity: 1;
border-radius: 0px;
padding: 20px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.menu_nintendo_switch
state: 'on'
card:
type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 10;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
top: 0px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
background: RGBA(0,0,0,0.1);
opacity: 1;
border-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
- title: test
path: test
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
background: RGBA(0,0,0,0.8);
opacity: 1;
border-radius: 0px;
padding: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 0px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:menu-down
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- width: 40px
- color: white
card:
- background: none
- padding: 0
- top: 4px
- type: custom:button-card
name: >
[[[ return
(states['input_boolean.living_room_apple_tv_status'].state
== 'on') ? 'Living Room ON' : 'Living Room OFF'; ]]]
tap_action:
action: navigate
navigation_path: '#appletv'
styles:
icon:
- width: 40px
- color: white
card:
- background: none
- padding: 0
- top: 15px
name:
- font-size: 16px
- text-align: center
- white-space: nowrap
- overflow: hidden
- text-overflow: ellipsis
- type: custom:button-card
icon: mdi:power
tap_action:
action: toggle
entity: input_boolean.living_room_apple_tv_status
styles:
icon:
- width: 25px
- color: white
card:
- background: none
- padding: 0
- top: 12px
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
bottom: 90px;
left: 0px;
right: 0px;
height: 45px;
background: RGBA(0,0,0,0.8);
opacity: 1;
border-radius: 0px;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:backspace
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 5px
card:
- background: none
- padding: 20
- type: custom:button-card
icon: mdi:play-pause
tap_action:
action: navigate
navigation_path: '#appletv'
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 5px
card:
- background: none
- padding: 20
- type: custom:button-card
icon: mdi:home
tap_action:
action: navigate
navigation_path: '#appletv'
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 5px
card:
- background: none
- padding: 20
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 45px;
background: RGBA(0,0,0,0.8);
opacity: 1;
border-radius: 0px;
padding: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 10%;
background: RGBA(0,0,0,0.90);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 1
styles:
z-index: 10
cards:
- type: custom:mushroom-number-card
display_mode: slider
- type: entities
entities:
- type: custom:slider-entity-row
entity: media_player.rx_a1070_main
card_mod: null
full_row: true
toggle: true
step: 1
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 10 !important;
position: absolute !important; /* Change to fixed or absolute as needed */
background: RGBA(0,0,0,0.50);
border-radius: 5px;
left: 10px;
right: 10px;
top: 55px !important;
bottom: 190px;
padding-top: 10px;
padding-bottom: 10px !important;
}
}
cards:
- type: horizontal-stack
cards:
- show_name: false
show_icon: false
type: button
icon: phu:apple-tv
icon_height: 25px
img_cell:
- width: 60px
- height: 60px
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: TV
icon: phu:apple-tv
icon_height: 40px
img_cell:
- width: 60px
- height: 60px
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: TV
icon: mdi:netflix
icon_height: 25px
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: TV
icon: phu:disney-plus
icon_height: 25px
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: TV
icon: si:prime
icon_height: 25px
- show_name: false
show_icon: false
type: button
tap_action:
action: toggle
icon: phu:apple-tv
icon_height: 25px
- type: custom:android-tv-card
remote_id: remote.living_room
media_player_id: media_player.living_room_2
autofill_entity_id: true
rows:
- - touchpad
touchpad_style:
height: 500px
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png')
background-color: RGBA(0,0,0,0)
background-size: 65%
background-repeat: no-repeat
background-position: center
border-radius: 0
opacity: 1
top: '-20px'
bottom: 10px
position: absolute !important
left: 10px
right: 10px
width: inherit
custom_actions:
power:
icon: mdi:power
tap_action:
action: key
key: wakeup
hold_action:
action: key
key: suspend
menu:
icon: mdi:backspace
tap_action:
action: key
key: menu
home:
tap_action:
action: key
key: home
hold_action:
action: more-info
skip-backward:
icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
skip-forward:
icon: mdi:fast-forward-10
action: key
key: skip_forward
play:
tap_action:
action: key
key: play
pause:
tap_action:
action: key
key: pause
up:
tap_action:
action: key
key: up
down:
tap_action:
action: key
key: down
left:
tap_action:
action: key
key: left
right:
tap_action:
action: key
key: right
center:
tap_action:
action: key
key: select
double_tap_action:
action: key
key: menu
primevideo:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Prime Video
netflix:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Netflix
spotify:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Spotify
disney:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Disney+
youtube:
tap_action:
action: call-service
service: media_player.select_source
data:
source: YouTube
appletv:
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV
max:
tap_action:
action: call-service
service: media_player.select_source
data:
source: HBO Max
skyshowtime:
tap_action:
action: call-service
service: media_player.select_source
data:
source: SkyShowtime
plex:
icon: mdi:plex
tap_action:
action: call-service
service: media_player.select_source
data:
source: Plex
discovery:
icon: discovery
tap_action:
action: call-service
service: media_player.select_source
data:
source: discovery+
viaplay:
icon: viaplay
tap_action:
action: call-service
service: media_player.select_source
data:
source: Viaplay
tv2play:
icon: tv2play
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV 2 Play
nrktv:
icon: nrktv
tap_action:
action: call-service
service: media_player.select_source
data:
source: NRK TV
allente:
icon: allente
tap_action:
action: call-service
service: media_player.select_source
data:
source: Allente
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 5;
position: fixed;
top: 45px;
bottom: 30%
left: 0px;
right: 0px;
width: 100%;
height: 100%;
background: RGBA(0,0,0,0.0);
opacity: 1;
border-radius: 5px;
padding: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
background: RGBA(0,0,0,0.8);
opacity: 1;
border-radius: 0px;
padding: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 0px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:close
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- width: 25px
- color: white
card:
- background: none
- padding: 0
- top: 12px
- type: custom:button-card
name: >
[[[ return
(states['input_boolean.living_room_apple_tv_status'].state ==
'on') ? 'On' : 'Off'; ]]]
tap_action:
action: navigate
navigation_path: '#appletv'
styles:
icon:
- width: 40px
- color: white
card:
- background: none
- padding: 0
- top: 15px
- opacity: '.9'
name:
- font-size: 15px
- text-align: center
- white-space: nowrap
- overflow: hidden
- text-overflow: null
- opacity: 0.9
- type: custom:button-card
icon: mdi:power
tap_action:
action: toggle
entity: input_boolean.living_room_apple_tv_status
styles:
icon:
- width: 25px
- color: white
card:
- background: none
- padding: 0
- top: 12px
- type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Good Evening, {{user}}!
{% elif (time >= 12) %}
Good Afternoon, {{user}}!
{% elif (time >= 5) %}
Good Morning, {{user}}!
{% else %}
Hello, {{user}}!
{% endif %}
subtitle: >
{% set devices = [] %}
{% if is_state('input_boolean.living_room_apple_tv_status', 'on') -%}
{% set devices = devices + ['Living Room Apple TV'] %}
{%- endif %}
{% if is_state('input_boolean.living_room_nintendo_status', 'on') -%}
{% set devices = devices + ['Living Room Nintendo Switch'] %}
{%- endif %}
{% if is_state('input_boolean.master_bedroom_apple_tv_status', 'on')
-%}
{% set devices = devices + ['Bedroom Apple TV'] %}
{%- endif %}
{% if is_state('input_boolean.theater_apple_tv_status', 'on') -%}
{% set devices = devices + ['Theater Apple TV'] %}
{%- endif %}
{% if is_state('input_boolean.theater_playstation_5_status', 'on') -%}
{% set devices = devices + ['Theater Playstation 5'] %}
{%- endif %}
{% if is_state('input_boolean.theater_nintendo_switch_status', 'on')
-%}
{% set devices = devices + ['Theater Nintendo Switch'] %}
{%- endif %}
{% if is_state('input_boolean.guest_bedroom_apple_tv_status', 'on')
-%}
{% set devices = devices + ['Guest Bedroom Apple TV'] %}
{%- endif %}
{% if is_state('input_boolean.gym_apple_tv_status', 'on') -%}
{% set devices = devices + ['Gym Apple TV'] %}
{%- endif %}
{%- if devices | length == 0 -%}
The no devices are currently on.
{%- elif devices | length == 1 -%}
The {{ devices[0] }} is on.
{%- else -%}
The {{ devices[:-1] | join(', ') }} and {{ devices[-1] }} are on.
{%- endif %}
{%- set pickup_day = (now().weekday() == 3) -%}
{%- set pickup_time = (5 <= now().hour < 9) -%}
{%- if pickup_day and pickup_time -%}
The today is trash pickup day.
{%- endif %}
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
position: absolute;
top: 8px;
left: 8px;
right: 8px;
height: 45px;
padding: 4px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: weather
entity: weather.forecast_home
show_temperature: true
show_conditions: true
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/default_view
icon: mdi:home
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: template
content: Home
icon: mdi:home
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/scenes
icon: mdi:content-save
- type: entity
entity: sensor.locked_doors_count
tap_action:
action: navigate
navigation_path: /lovelace/security
use_entity_picture: false
icon: fapro:lock-solid
icon_color: '#D20F44'
- type: entity
entity: sensor.media_on
icon_color: purple
tap_action:
action: navigate
navigation_path: /lovelace/Media
icon: fapro:tv-retro-solid
- type: conditional
conditions:
- condition: state
entity: input_boolean.maintenance_is_due
state: 'on'
chip:
type: entity
entity: input_boolean.maintenance_is_due
content_info: none
icon_color: red
tap_action:
action: navigate
navigation_path: /config
icon: fas:triangle-exclamation
- type: entity
entity: sensor.count_of_maintenance_equal_or_less_than_zero
tap_action:
action: navigate
navigation_path: /lovelace/system
icon: fas:triangle-exclamation
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.guest_bedroom_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Guest Bedroom On
- type: conditional
conditions:
- condition: state
entity: input_boolean.guest_bedroom_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Guest Bedroom Off
- type: spacer
- type: entity
entity: input_boolean.guest_bedroom_apple_tv_status
tap_action:
action: toggle
icon: mdi:power
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: tv
icon: phu:apple-tv
- type: action
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: Netflix
icon: mdi:netflix
- type: action
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: Disney+
icon: phu:disney-plus
- type: action
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: Prime Video
icon: si:prime
- type: action
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: Max
icon: si:hbo
alignment: justify
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: horizontal-stack
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 10px;
border-radius: 5px;
position: fixed;
right: 8px;
left: 8px;
top: 61px;
background: RGBA(0, 0, 0, 0.5);
display: flex;
align-items: center;
}
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: TV
icon: phu:apple-tv
icon_height: 25px
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
}
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: TV
icon: phu:apple-tv
icon_height: 25px
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
}
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: TV
icon: phu:apple-tv
icon_height: 25px
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
}
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: TV
icon: phu:apple-tv
icon_height: 25px
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
}
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: TV
icon: phu:apple-tv
icon_height: 25px
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#lights'
hide_backdrop: false
bg_blur: '0'
bg_opacity: '0'
styles: |
#root {
-webkit-backdrop-filter: blur(1px);
}
@media (max-width: 767px) {
.bubble-pop-up-container {
padding-left: 8px;
padding-right: 8px;
background: RGBA(0,0,0,0);
-webkit-mask-image: none;
mask-image: none;
padding-bottom: 0px;
padding-top: 0px;
-webkit-backdrop-filter: blur(25px);
overflow-y: auto !important;
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
height: 100%;
--vertical-stack-card-gap: 8px;
--horizontal-stack-card-gap: 8px;
--stack-card-gap: 8px;
max-height: 100vh;
gap: 8px !important;
}
}
.close-pop-up {
display: none !important;
z-index: 0;
}
.bubble-pop-up {
border-radius: 0px;
overflow-y: auto !important;
top: 0;
bottom: 0;
z-index: 0;
padding: 0 !important;
}
.bubble-header-container {
display: none;
}
close_on_click: false
shadow_opacity: '0'
margin: 7px
close_by_clicking_outside: true
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 999;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/
icon: mdi:arrow-down
- type: spacer
- type: template
content: Lights
icon: mdi:lightbulb-group
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/
icon: mdi:power
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mushroom-light-card
entity: light.living_room_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Living Room
- type: custom:mushroom-light-card
entity: light.master_bedroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Master Bedroom
- type: custom:mushroom-light-card
entity: light.theater_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Theater
- type: custom:mushroom-light-card
entity: light.madeline_s_bedroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Madeline's Bedroom
- type: custom:mushroom-light-card
entity: light.kitchen_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Kitchen
- type: custom:mushroom-light-card
entity: light.gym_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Gym
- type: custom:mushroom-light-card
entity: light.guest_bedroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Guest Bedroom
- type: custom:mushroom-light-card
entity: light.guest_bathroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Guest Bathroom
- type: custom:mushroom-light-card
entity: light.dining_room_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Dining Room
- type: custom:mushroom-light-card
entity: light.office_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Office
- type: custom:mushroom-light-card
entity: light.downstairs_hallway_main_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Downstairs Hallway
- type: custom:mushroom-light-card
entity: light.downstairs_bathroom_main_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Downstairs Bathroom
- type: custom:mushroom-light-card
entity: light.laundry_room_main_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Laundry Room
- type: custom:mushroom-light-card
entity: light.garage_entry_main_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Garage Entry
- type: custom:mushroom-light-card
entity: light.front_foyer_chandelier
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Foyer Chandelier
- type: custom:mushroom-light-card
entity: light.front_porch_sconces
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Front Porch
- type: custom:mushroom-light-card
entity: light.bonus_room_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Bonus Room
- type: custom:gap-card
height: 50
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#lights'
hide_backdrop: false
bg_blur: '0'
bg_opacity: '0'
styles: |
#root {
-webkit-backdrop-filter: blur(1px);
}
@media (max-width: 767px) {
.bubble-pop-up-container {
padding-left: 8px;
padding-right: 8px;
background: RGBA(0,0,0,0);
-webkit-mask-image: none;
mask-image: none;
padding-bottom: 0px;
padding-top: 0px;
-webkit-backdrop-filter: blur(25px);
overflow-y: auto !important;
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
height: 100%;
--vertical-stack-card-gap: 8px;
--horizontal-stack-card-gap: 8px;
--stack-card-gap: 8px;
max-height: 100vh;
gap: 8px !important;
}
}
.close-pop-up {
display: none !important;
z-index: 0;
}
.bubble-pop-up {
border-radius: 0px;
overflow-y: auto !important;
top: 0;
bottom: 0;
z-index: 0;
padding: 0 !important;
}
.bubble-header-container {
display: none;
}
close_on_click: false
shadow_opacity: '0'
margin: 7px
close_by_clicking_outside: true
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 999;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
tap_action:
action: navigate
navigation_path: '#lights'
icon: mdi:arrow-down
content: slide
- type: spacer
- type: template
content: Lights
icon: mdi:lightbulb-group
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/
icon: mdi:power
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mushroom-light-card
entity: light.living_room_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Living Room
- type: custom:mushroom-light-card
entity: light.master_bedroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Master Bedroom
- type: custom:mushroom-light-card
entity: light.master_bathroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Master Bathroom
- type: custom:mushroom-light-card
entity: light.theater_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Theater
- type: custom:mushroom-light-card
entity: light.madeline_s_bedroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Madeline's Bedroom
- type: custom:mushroom-light-card
entity: light.kitchen_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Kitchen
- type: custom:mushroom-light-card
entity: light.gym_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Gym
- type: custom:mushroom-light-card
entity: light.guest_bedroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Guest Bedroom
- type: custom:mushroom-light-card
entity: light.guest_bathroom_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Guest Bathroom
- type: custom:mushroom-light-card
entity: light.dining_room_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Dining Room
- type: custom:mushroom-light-card
entity: light.office_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Office
- type: custom:mushroom-light-card
entity: light.downstairs_hallway_main_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Downstairs Hallway
- type: custom:mushroom-light-card
entity: light.downstairs_bathroom_main_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Downstairs Bathroom
- type: custom:mushroom-light-card
entity: light.laundry_room_main_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Laundry Room
- type: custom:mushroom-light-card
entity: light.garage_entry_main_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Garage Entry
- type: custom:mushroom-light-card
entity: light.front_foyer_chandelier
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Foyer Chandelier
- type: custom:mushroom-light-card
entity: light.front_porch_sconces
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Front Porch
- type: custom:mushroom-light-card
entity: light.bonus_room_lights
show_brightness_control: false
collapsible_controls: false
fill_container: false
name: Bonus Room
- type: custom:gap-card
height: 50
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: climate.basement
name: Basement
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.basement_living_temperature'].state + "°";
]]]
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/climate-basement/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 100px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: center
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: 0px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 10px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- height: 35px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: custom:button-card
entity: climate.main_floor
name: Main Floor
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.living_room_temperature'].state + "°";
]]]
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/climate-main-floor/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 100px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: center
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: 0px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 10px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- height: 35px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: climate.upstairs
name: Upstairs
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.madeline_bedroom_ecobee_sensor_temperature'].state + "°";
]]]
layout: vertical
tap_action:
action: navigate
navigation_path: /lovelace/climate-upstairs/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 100px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: center
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: 0px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 10px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- height: 35px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: custom:gap-card
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Good Evening, {{user}}!
{% elif (time >= 12) %}
Good Afternoon, {{user}}!
{% elif (time >= 5) %}
Good Morning, {{user}}!
{% else %}
Hello, {{user}}!
{% endif %}
subtitle: >-
{% set devices = [] %}
{% if is_state('input_boolean.living_room_apple_tv_status', 'on')
-%}
{% set devices = devices + ['Living Room Apple TV'] %}
{%- endif %}
{% if is_state('input_boolean.living_room_nintendo_status', 'on')
-%}
{% set devices = devices + ['Living Room Nintendo Switch'] %}
{%- endif %}
{% if is_state('input_boolean.master_bedroom_apple_tv_status', 'on')
-%}
{% set devices = devices + ['Bedroom Apple TV'] %}
{%- endif %}
{% if is_state('input_boolean.theater_apple_tv_status', 'on') -%}
{% set devices = devices + ['Theater Apple TV'] %}
{%- endif %}
{% if is_state('input_boolean.theater_playstation_5_status', 'on')
-%}
{% set devices = devices + ['Theater Playstation 5'] %}
{%- endif %}
{% if is_state('input_boolean.theater_nintendo_switch_status', 'on')
-%}
{% set devices = devices + ['Theater Nintendo Switch'] %}
{%- endif %}
{% if is_state('input_boolean.guest_bedroom_apple_tv_status', 'on')
-%}
{% set devices = devices + ['Guest Bedroom Apple TV'] %}
{%- endif %}
{% if is_state('input_boolean.gym_apple_tv_status', 'on') -%}
{% set devices = devices + ['Gym Apple TV'] %}
{%- endif %}
{%- if devices | length == 0 -%}
No devices are currently on.
{%- elif devices | length == 1 -%}
The {{ devices[0] }} is on.
{%- else -%}
The {{ devices[:-1] | join(', ') }} and {{ devices[-1] }} are on.
{%- endif %}
{%- set current_hour = now().hour -%}
{%- if current_hour >= 6 and current_hour < 8 and user ==
'8951be133a354960924e83723f60553b' -%}
{%- if states('sensor.waze_travel_time') is not none -%}
It will take you {{ states('sensor.waze_travel_time') }} minutes to get to work.
{%- else -%}
Travel time to work is not available.
{%- endif -%}
{%- endif -%}
style: |
ha-card {
margin-top: px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Climate
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace/climate
- type: custom:mod-card
style: |
ha-card {
display: flex;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
ha-card::-webkit-scrollbar { /* For Chrome, Safari, and Opera */
display: none;
}
card:
type: horizontal-stack
cards:
- type: custom:mod-card
style: |
ha-card {
margin-left: 0px;
margin-right: 0px;
}
card:
type: custom:button-card
entity: climate.basement
name: Basement
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.basement_living_temperature'].state + "°";
]]]
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: /lovelace/climate-basement/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 50px
- width: 150px
- border-radius: 25px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: left
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: null
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 25px
- justify-self: left
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- height: 35px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: custom:mod-card
style: |
ha-card {
margin-left: 0px;
margin-right: 0px;
}
card:
type: custom:button-card
entity: climate.main_floor
name: Main Floor
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.living_room_temperature'].state + "°";
]]]
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: /lovelace/climate-main-floor/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 50px
- width: 150px
- border-radius: 25px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: left
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: null
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 25px
- justify-self: left
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- height: 35px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: custom:mod-card
style: |
ha-card {
margin-left: 0px;
margin-right: 0px;
}
card:
type: custom:button-card
entity: climate.upstairs
name: Upstairs
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.madeline_bedroom_ecobee_sensor_temperature'].state + "°";
]]]
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: /lovelace/climate-upstairs/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 50px
- width: 150px
- border-radius: 25px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: left
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: null
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 25px
- justify-self: left
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- height: 35px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: custom:grid-layout
layout:
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))
grid-auto-flow: column
grid-auto-columns: minmax(100px, 1fr)
style: |
ha-card {
overflow-x: auto;
display: flex;
}
cards:
- type: custom:button-card
name: Lights
icon: mdi:lightbulb-group
entity: sensor.lights_on
show_state: true
layout: icon_name_state2nd
styles:
card:
- border-radius: 25px
- padding-left: 10px
- padding-right: 10px
- padding-top: 5px
- padding-bottom: 5px
- width: auto
icon:
- width: 20px
- padding-right: 5px
- color: |
[[[
return (entity.state > 1) ? 'yellow' : 'white';
]]]
name:
- font-size: 12px
- font-weight: bold
- justify-self: start
state:
- font-size: 10px
- justify-self: start
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: max-content
card:
- background-color: rgba(0,0,0,0.5)
- webkit-backdrop-filter: blur(10px); !important;}
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 10px
- margin: 0px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:android-tv-card
remote_id: remote.living_room
media_player_id: media_player.living_room_2
autofill_entity_id: true
rows:
- - touchpad
platform: Apple TV
keyboard_id: media_player.living_room_3
custom_actions: []
styles: |
toucharea {
height: 500px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Kodi-logo-Thumbnail-light-transparent.png/600px-Kodi-logo-Thumbnail-light-transparent.png?20141126003611");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 1.0;;
}
card_mod:
style: |
@media (max-width: 767px) {
:host {
position: fixed !important;
top: 63px;
bottom: 400px;
left: 8px;
right: 8px;
}
ha-card {
background-color: rgba(0, 0, 0, 0.3); !important;
-webkit-backdrop-filter: blur(10px); !important;}
border-radius: 5px !important;
}
}
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
position: fixed;
right: 8px;
left: 8px;
top: 8px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Living Room On
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Living Room Off
- type: spacer
- type: entity
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: toggle
icon: mdi:power
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:android-tv-card
remote_id: remote.living_room
media_player_id: media_player.living_room_2
autofill_entity_id: true
rows:
- - touchpad
custom_actions:
- type: button
name: power
tap_action:
action: key
key: wakeup
icon: mdi:power
hold_action:
action: key
key: suspend
- type: button
name: menu
tap_action:
action: key
key: menu
icon: mdi:backspace
- type: button
name: home
tap_action:
action: key
key: home
icon: mdi:home
hold_action:
action: more-info
- icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
name: skip-backward
type: button
- icon: mdi:fast-forward-10
action: key
name: skip-forward
tap_action:
key: skip_forward
action: key
type: button
- type: button
name: play
tap_action:
action: key
key: play
icon: mdi:play
- type: button
name: pause
tap_action:
action: key
key: pause
icon: mdi:pause
- type: button
name: up
tap_action:
action: key
key: up
hold_action:
action: repeat
icon: mdi:chevron-up
- type: button
name: down
tap_action:
action: key
key: down
hold_action:
action: repeat
icon: mdi:chevron-down
- type: button
name: left
tap_action:
action: key
key: left
hold_action:
action: repeat
icon: mdi:chevron-left
- type: button
name: right
tap_action:
action: key
key: right
hold_action:
action: repeat
icon: mdi:chevron-right
- type: button
name: center
tap_action:
action: key
key: select
icon: mdi:checkbox-blank-circle
double_tap_action:
action: key
key: menu
- type: button
name: primevideo
tap_action:
action: perform-action
data:
source: Prime Video
perform_action: media_player.select_source
icon: primevideo
- type: button
name: netflix
tap_action:
action: perform-action
data:
source: Netflix
perform_action: media_player.select_source
icon: mdi:netflix
- type: button
name: spotify
tap_action:
action: perform-action
data:
source: Spotify
perform_action: media_player.select_source
icon: mdi:spotify
- type: button
name: disney
tap_action:
action: perform-action
data:
source: Disney+
perform_action: media_player.select_source
icon: disney
- type: button
name: youtube
tap_action:
action: perform-action
data:
source: YouTube
perform_action: media_player.select_source
icon: mdi:youtube
- type: button
name: appletv
tap_action:
action: perform-action
data:
source: TV
perform_action: media_player.select_source
icon: appletv
- type: button
name: max
tap_action:
action: perform-action
data:
source: HBO Max
perform_action: media_player.select_source
icon: max
- type: button
name: skyshowtime
tap_action:
action: perform-action
data:
source: SkyShowtime
perform_action: media_player.select_source
icon: showtime
- type: button
name: plex
tap_action:
action: perform-action
data:
source: Plex
perform_action: media_player.select_source
icon: mdi:plex
- type: button
name: discovery
tap_action:
action: perform-action
data:
source: discovery+
perform_action: media_player.select_source
icon: discovery
- type: button
name: viaplay
tap_action:
action: perform-action
data:
source: Viaplay
perform_action: media_player.select_source
icon: viaplay
- type: button
name: tv2play
tap_action:
action: perform-action
data:
source: TV 2 Play
perform_action: media_player.select_source
icon: tv2play
- type: button
name: nrktv
tap_action:
action: perform-action
data:
source: NRK TV
perform_action: media_player.select_source
icon: nrktv
- type: button
name: allente
tap_action:
action: perform-action
data:
source: Allente
perform_action: media_player.select_source
icon: allente
- type: touchpad
name: touchpad
tap_action:
action: key
key: select
up:
tap_action:
action: key
key: up
hold_action:
action: repeat
name: up
type: button
down:
tap_action:
action: key
key: down
hold_action:
action: repeat
name: down
type: button
left:
tap_action:
action: key
key: left
hold_action:
action: repeat
name: left
type: button
right:
tap_action:
action: key
key: right
hold_action:
action: repeat
name: right
type: button
styles: |-
toucharea {
height: 440px;
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png');
background-color: RGBA(0,0,0,0);
background-size: 65%;
background-repeat: no-repeat;
background-position: center;
border-radius: 5px;
opacity: 1;
padding-top: 10px;
padding-bottom: 10px;
position: null;
padding-left: 20px;
padding-right: 20px;
width: null;
}
double_tap_action:
action: key
key: menu
platform: Apple TV
keyboard_id: media_player.living_room_3
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 10 !important;
position: fixed !important; /* Change to fixed or absolute as needed */
background: RGBA(0, 0, 0, 0.5);
left: 8px;
right: 8px;
top: 64px !important;
bottom: 438px;
padding-top: 0px;
padding-bottom: 0px !important;
padding-left: 20px !important;
padding-right: 20px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: max-content
card:
- background-color: rgba(0,0,0,0.5)
- webkit-backdrop-filter: blur(10px); !important;}
- box-shadow: none
- border-radius: 5px
- border-width: 0px
- padding: 10px
- margin: 0px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: media_player.living_room_2
show_entity_picture: true
entity_picture: null
show_name: false
show_icon: false
custom_fields:
entity:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace/remote
name: Living Room Apple TV
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: start
- padding-left: 15px
- font-size: 13px
- font-weight: 600
- color: rgba(255,255,255,0.3)
title:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace/remote
name: Living Room
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: start
- padding-left: 15px
- padding-top: 5px
- font-size: 20px
- font-weight: 600
- color: rgba(255,255,255,0.9)
artist:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace/remote
name: Living Room
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: start
- padding-left: 15px
- font-size: 20px
- font-weight: 400
- color: rgba(255,255,255,0.3)
styles:
grid:
- grid-template-areas: '"i entity" "i title" "i artist" "i album" '
- grid-template-columns: max-content 1fr
- grid-template-rows: max-content max-content max-content;
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0 5px
- margin: 5px 0 -10px 0
entity_picture:
- align-self: start
- justify-self: start
- width: 70px
- border-radius: 10px
- type: custom:my-slider-v2
entity: media_player.living_room_2
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 20px 0 0 0
- background: none
container:
- border-radius: 10px
- background: none
- padding: 0 0 0 5px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 97%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
entity: media_player.gym
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
buttons:
card:
type: custom:button-card
custom_fields:
previous:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: left
icon: mdi:rewind
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin: 0px
icon:
- width: 35px
- color: rgba(255,255,255,0.5)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.living_room_2
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.living_room_2
entity: media_player.living_room_2
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin-bottom: 0px
icon:
- width: 45px
- color: rgba(255,255,255,0.5)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.living_room_2
icon: mdi:fast-forward
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 35px
- color: rgba(255,255,255,0.5)
star:
card:
type: custom:button-card
tap_action:
action: url
url_path: shortcuts://run-shortcut?name=HomeKit
icon: mdi:apple-keyboard-command
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 25px
- color: rgba(255,255,255,0.5)
menu:
card:
type: custom:button-card
entity: media_player.living_room_2
tap_action:
action: more-info
icon: mdi:menu
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 25px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-columns: 2fr 3fr 3fr 3fr 2fr
- grid-template-rows: min-content
- grid-template-areas: '"star previous play next menu"'
card:
- padding: 0 0 0 0px
- margin: 3px 0px -6px 0px
- align-self: end
- background: none
- box-shadow: none
- border-width: 0px
- border-radius: 0px
styles:
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: max-content max-content max-content max-content;
- align-items: end
card:
- background: transparent
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 15px 0px
- margin: 0px 0px 0px 0px
- type: custom:button-card
entity: media_player.rx_a1070_main
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
volume_control:
card:
type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.rx_a1070_main
icon: mdi:volume-medium
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
- type: custom:my-slider-v2
entity: media_player.rx_a1070_main
attribute: volume_level
min: 0
max: 100
step: 2
styles:
card:
- box-shadow: none
- margin: 9px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 0px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- width: 100%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.rx_a1070_main
icon: mdi:volume-high
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-areas: '"volume_control"'
- grid-template-columns: 1fr
- grid-template-rows: max-content;
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0px 0px
- margin-bottom: '-5px'
card_mod:
style: |
@media (max-width: 767px) {
:host {
position: fixed !important;
bottom: 88px;
left: 8px;
right: 8px;
height: !important;
}
ha-card {
background-color: rgba(0, 0, 0, 0.3); !important;
-webkit-backdrop-filter: blur(10px); !important;}
border-radius: 5px !important;
height: 300px;
}
}
- type: custom:local-conditional-card
id: living_room_remote_navbar_sources
default: hide
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
position: fixed;
z-index: 3;
top: 8px;
left: 8px;
right: 8px;
height: 45px;
padding: 4px 10px;
border-radius: 10px;
background-color: rgba(10, 10, 10, .5);
-webkit-backdrop-filter: blur(100px);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- living_room_media_control_appletv: show
- living_room_media_control_nintendo: hide
- living_room_remote_navbar_sources: hide
- living_room_remote_navbar_main: show
- living_room_audio_control_appletv: show
- living_room_audio_control_gaming: hide
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Apple TV
- type: template
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- living_room_media_control_appletv: hide
- living_room_media_control_nintendo: show
- living_room_remote_navbar_sources: hide
- living_room_remote_navbar_main: show
- living_room_audio_control_gaming: show
- living_room_audio_control_appletv: hide
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:nintendo-switch
content: Nintendo Switch
- type: spacer
- type: entity
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: fire-dom-event
local_conditional_card:
action: toggle
ids:
- living_room_remote_navbar_main
- living_room_remote_navbar_sources
icon: mdi:close
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:local-conditional-card
default: hide
card:
type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 999;
position: fixed;
top: 61px;
bottom: 88px;
left: 8px !important;
right: 8px !important;
background: RGBA(0,0,0,0.3);
opacity: 1;
border-radius: 10px 10px 10px 10px;
padding: 25px;
-webkit-backdrop-filter: blur(30px);
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -3;
position: fixed;
bottom: 0px;
left: 8px;
right: 8px;
width: 20%;
desktop-width: 5px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 0 !important;
border-radius: 0px;
padding: 10px;
animation: slideInFromTop 0.5s ease-out forwards;
}
}
card:
type: vertical-stack
square: false
rows: 3
cards:
- type: custom:button-card
name: Apple TV
icon: mdi:apple
show_state: true
show_icon: false
entity: input_boolean.master_bedroom_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Nintendo Switch
show_state: true
show_icon: false
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
- type: custom:button-card
name: Playstation 5
show_state: true
show_icon: false
entity: input_boolean.theater_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-theater
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
id: living_room_sources_menu
- type: custom:mod-card
style: |
ha-card {
display: flex;
position: static;
left: 0px;
right: 0px;
margin-right: -8px;
margin-left: -8px;
padding-left: 8px;
padding: 0px 0px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
ha-card::-webkit-scrollbar { /* For Chrome, Safari, and Opera */
display: none;
}
card:
type: horizontal-stack
cards:
- type: custom:mod-card
style: |
ha-card {
margin-left: 0px;
margin-right: 0px;
}
card:
type: custom:button-card
entity: climate.basement
name: Basement
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.basement_living_temperature'].state + "°";
]]]
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: /lovelace/climate-basement/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 50px
- width: 150px
- border-radius: 25px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: left
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: null
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 25px
- justify-self: left
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- height: 35px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: custom:mod-card
style: |
ha-card {
margin-left: 0px;
margin-right: 0px;
}
card:
type: custom:button-card
entity: climate.main_floor
name: Main Floor
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.living_room_temperature'].state + "°";
]]]
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: /lovelace/climate-main-floor/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 50px
- width: 150px
- border-radius: 25px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: left
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: null
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 25px
- justify-self: left
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- height: 35px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: custom:mod-card
style: |
ha-card {
margin-left: 0px;
margin-right: 0px;
}
card:
type: custom:button-card
entity: climate.upstairs
name: Upstairs
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.madeline_bedroom_ecobee_sensor_temperature'].state + "°";
]]]
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: /lovelace/climate-upstairs/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 50px
- width: 150px
- border-radius: 25px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: left
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: null
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 25px
- justify-self: left
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- height: 35px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
position: static;
z-index: 3;
top: 8px;
left: 8px;
right: 8px;
height: 45px;
padding: 4px 10px;
border-radius: 10px;
background-color: rgba(10, 10, 10, .5);
-webkit-backdrop-filter: blur(100px);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: fas:house
tap_action:
action: navigate
navigation_path: /lovelace/hometest
- type: spacer
- type: entity
entity: sensor.total_lights_on
tap_action:
action: navigate
navigation_path: /lovelace/lights
icon_color: primary
icon: fapro:lightbulb-on-solid
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.locked_doors_count
tap_action:
action: navigate
navigation_path: /lovelace/security
use_entity_picture: false
icon: fapro:lock-open-solid
icon_color: '#D20F44'
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.media_on
icon_color: '#0171A4'
tap_action:
action: navigate
navigation_path: /lovelace/Media
icon: fapro:tv-retro-solid
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.count_of_maintenance_equal_or_less_than_zero
icon_color: '#FF3B2F'
tap_action:
action: navigate
navigation_path: /lovelace/system
icon: fas:triangle-exclamation
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: spacer
- type: action
tap_action:
action: navigate
navigation_path: /lovelace/scenes
icon: fapro:floppy-disk-solid
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.living_room_temperature
tap_action:
action: none
icon: fapro:circle-sort-solid
alignment: end
card_mod:
style: |
:host {
display: flex;
justify-content: flex-end;
--chip-background: rgba(0, 0, 0, 0) !important;
}
theme: ios-dark-mode-blue-red
- title: Remote Test
path: remote-test
theme: ios-dark-mode-blue-red
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
position: fixed;
right: 8px;
left: 8px;
top: 8px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.master_bedroom_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Master Bedroom On
- type: conditional
conditions:
- condition: state
entity: input_boolean.master_bedroom_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Select Apple TV Below
- type: spacer
- type: entity
entity: input_boolean.master_bedroom_apple_tv_status
tap_action:
action: toggle
icon: mdi:power
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
top: 61px;
bottom: 88px;
left: 8px;
right: 8px;
background: RGBA(0, 0, 0, 0.5);
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
rows: null
columns: 1
style:
z-index: 30
cards:
- type: vertical-stack
cards:
- type: custom:button-card
name: Bedroom Apple TV
show_state: true
show_icon: false
entity: input_boolean.master_bedroom_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
state:
- value: 'on'
styles:
name:
- font-weight: bold
state:
- color: white
- opacity: 0.7
- value: 'off'
styles:
name:
- font-weight: normal
- opacity: 0.9
- type: custom:button-card
name: Living Room Apple TV
show_state: true
show_icon: false
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
state:
- value: 'on'
styles:
name:
- font-weight: bold
state:
- color: white
- opacity: 0.7
- value: 'off'
styles:
name:
- font-weight: normal
- opacity: 0.9
- type: custom:button-card
name: Theater Apple TV
show_state: true
show_icon: false
entity: input_boolean.theater_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-theater
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
state:
- value: 'on'
styles:
name:
- font-weight: bold
state:
- color: white
- opacity: 0.7
- value: 'off'
styles:
name:
- font-weight: normal
- opacity: 0.9
- type: custom:button-card
name: Guest Bedroom Apple TV
show_state: true
show_icon: false
entity: input_boolean.guest_bedroom_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-guest-bedroom
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
state:
- value: 'on'
styles:
name:
- font-weight: bold
state:
- color: white
- opacity: 0.7
- value: 'off'
styles:
name:
- font-weight: normal
- opacity: 0.9
- type: custom:button-card
name: Gym Apple TV
show_state: true
show_icon: false
entity: input_boolean.gym_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-gym
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 20px
- justify-self: Center
state:
- font-size: 14px
- color: gray
- justify-self: Center
state:
- value: 'on'
styles:
name:
- font-weight: bold
state:
- color: white
- opacity: 0.7
- value: 'off'
styles:
name:
- font-weight: normal
- opacity: 0.9
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
top: 106px !important;
bottom: 283px;
left: 8px;
right: 8px;
background: RGBA(0, 0, 0, 0.5);
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
opacity: 0;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 1
style:
z-index: 30
cards:
- type: custom:button-card
name: Bedroom
show_state: false
show_icon: false
entity: input_boolean.master_bedroom_apple_tv_status
tap_action:
action: call-service
service: script.menu_bedroom_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 28px
- justify-self: center
- color: white
- type: custom:button-card
name: Living Room
show_state: false
show_icon: false
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: call-service
service: script.menu_living_room_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 28px
- justify-self: center
- color: white
- type: custom:button-card
name: Theater
show_state: false
show_icon: false
entity: input_boolean.theater_apple_tv_status
tap_action:
action: call-service
service: script.menu_theater_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 28px
- justify-self: center
- color: white
- type: custom:button-card
name: Guest Bedroom
show_state: false
show_icon: false
entity: input_boolean.guest_bedroom_apple_tv_status
tap_action:
action: call-service
service: script.menu_guest_bedroom_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 28px
- justify-self: center
- color: white
- type: custom:button-card
name: Gym
show_state: false
show_icon: false
entity: input_boolean.gym_apple_tv_status
tap_action:
action: call-service
service: script.menu_gym_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 28px
- justify-self: center
- color: white
- type: custom:android-tv-card
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 10 !important;
position: fixed !important; /* Change to fixed or absolute as needed */
background: RGBA(0, 0, 0, 0.5);
left: 8px;
right: 8px;
top: 1px !important;
height: 2px;
padding-top: 0px;
padding-bottom: 0px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
opacity: 0;
}
}
remote_id: remote.master_bedroom
media_player_id: media_player.master_bedroom_2
autofill_entity_id: true
rows:
- - touchpad
touchpad_style:
height: 1px
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png')
background-color: RGBA(0,0,0,0)
background-size: 65%
background-repeat: no-repeat
background-position: center
border-radius: 0
opacity: 1
top: 0px
bottom: 0px
position: static !important
left: 0px
right: 0px
width: inherit
custom_actions:
power:
icon: mdi:power
tap_action:
action: key
key: wakeup
hold_action:
action: key
key: suspend
menu:
icon: mdi:backspace
tap_action:
action: key
key: menu
home:
tap_action:
action: key
key: home
hold_action:
action: more-info
skip-backward:
icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
skip-forward:
icon: mdi:fast-forward-10
action: key
key: skip_forward
play:
tap_action:
action: key
key: play
pause:
tap_action:
action: key
key: pause
up:
tap_action:
action: key
key: up
down:
tap_action:
action: key
key: down
left:
tap_action:
action: key
key: left
right:
tap_action:
action: key
key: right
center:
tap_action:
action: key
key: select
double_tap_action:
action: key
key: menu
primevideo:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Prime Video
netflix:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Netflix
spotify:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Spotify
disney:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Disney+
youtube:
tap_action:
action: call-service
service: media_player.select_source
data:
source: YouTube
appletv:
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV
max:
tap_action:
action: call-service
service: media_player.select_source
data:
source: HBO Max
skyshowtime:
tap_action:
action: call-service
service: media_player.select_source
data:
source: SkyShowtime
plex:
icon: mdi:plex
tap_action:
action: call-service
service: media_player.select_source
data:
source: Plex
discovery:
icon: discovery
tap_action:
action: call-service
service: media_player.select_source
data:
source: discovery+
viaplay:
icon: viaplay
tap_action:
action: call-service
service: media_player.select_source
data:
source: Viaplay
tv2play:
icon: tv2play
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV 2 Play
nrktv:
icon: nrktv
tap_action:
action: call-service
service: media_player.select_source
data:
source: NRK TV
allente:
icon: allente
tap_action:
action: call-service
service: media_player.select_source
data:
source: Allente
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
bottom: 213px;
left: 8px;
right: 8px;
height: 70px;
background: RGBA(0, 0, 0, 0.5);
opacity: 1;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
opacity: 0;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:backspace
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.master_bedroom
data:
command: menu
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:play-pause
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.master_bedroom
data:
command: select
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:home
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.master_bedroom
data:
command: home
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 0;
position: fixed;
bottom: 133px;
left: 8px;
right: 8px;
height: 80px;
background: RGBA(0,0,0,0);
-webkit-backdrop-filter: blur(10px);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
opacity: 0;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 88px;
left: 8px;
right: 8px;
width: 20%;
desktop-width: 25px;
height: 10%;
background: RGBA(0,0,0,0.99);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: entities
entities:
- type: custom:slider-entity-row
entity: media_player.master_bedroom
full_row: true
toggle: true
step: 1
card_mod:
style: |
ha-card {
padding-bottom: 0px;
padding: 0px;
top: 0px;
padding-top: 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: -2;
height: 90px;
padding: 4px 10px;
border-radius: 5px;
position: fixed;
right: 0px;
left: 0px;
bottom: 80px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
opacity: 0
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: spacer
- type: template
tap_action:
action: navigate
navigation_path: /lovelace/
hold_action:
action: none
double_tap_action:
action: none
icon: null
content: Living Room
- type: template
tap_action:
action: navigate
navigation_path: /lovelace/
hold_action:
action: none
double_tap_action:
action: none
icon: null
content: Master Bedroom
- type: template
tap_action:
action: navigate
navigation_path: /lovelace/
hold_action:
action: none
double_tap_action:
action: none
icon: null
content: Theater
- type: template
tap_action:
action: navigate
navigation_path: /lovelace/
hold_action:
action: none
double_tap_action:
action: none
icon: null
content: Guest Bedroom
- type: spacer
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(10px);
background: RGBA(0,0,0,0.5);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- width: 35px
- color: white
img_cell:
- width: 40px
- height: 40px
card:
- background: none
- padding: 0
- opacity: 0.5
- type: custom:button-card
icon: mdi:television-play
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- width: 35px
- color: white
- opacity: 1
img_cell:
- width: 40px
- height: 40px
- align-items: center
- justify-content: center
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:music
tap_action:
action: navigate
navigation_path: /lovelace/sonos/
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
- top: px
img_cell:
- width: 35px
- height: 40px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:shield-home
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- width: 35px
- color: white
- opacity: 0.5
img_cell:
- width: 40px
- height: 40px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:lightbulb-group
entity: sensor.lights_on_on
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
- top: '-2px'
img_cell:
- width: 40px
- height: 40px
card:
- background: none
- padding: 0
- title: Remote Menu
path: remote-menu
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
position: fixed;
right: 8px;
left: 8px;
top: 8px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.master_bedroom_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Master Bedroom On
- type: conditional
conditions:
- condition: state
entity: input_boolean.master_bedroom_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Select Apple TV Below
- type: spacer
- type: entity
entity: input_boolean.master_bedroom_apple_tv_status
tap_action:
action: toggle
icon: mdi:power
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
top: 61px;
bottom: 88px;
left: 8px;
right: 8px;
background: RGBA(0, 0, 0, 0.5);
border-color: white;
border-width: 3px;
padding: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
rows: null
columns: 1
style:
z-index: 30
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.living_room_apple_tv_status
name: 'Living Room '
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room
fill_container: false
hold_action:
action: toggle
layout: horizontal
- type: custom:mushroom-entity-card
entity: input_boolean.master_bedroom_apple_tv_status
name: Master Bedroom
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom
layout: horizontal
- type: custom:mushroom-entity-card
entity: input_boolean.theater_apple_tv_status
name: Theater
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room
fill_container: false
hold_action:
action: toggle
layout: horizontal
- type: custom:mushroom-entity-card
entity: input_boolean.guest_bedroom_apple_tv_status
name: Guest Bedroom
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom
layout: horizontal
- type: custom:mushroom-entity-card
entity: input_boolean.gym_apple_tv_status
name: Gym
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room
fill_container: false
hold_action:
action: toggle
layout: horizontal
- type: custom:mushroom-entity-card
entity: input_boolean.gym_apple_tv_status
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom
layout: horizontal
name: Bonus
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
top: 106px !important;
bottom: 283px;
left: 8px;
right: 8px;
background: RGBA(0, 0, 0, 0.5);
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
opacity: 0;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 1
style:
z-index: 30
cards:
- type: custom:button-card
name: Bedroom
show_state: false
show_icon: false
entity: input_boolean.master_bedroom_apple_tv_status
tap_action:
action: call-service
service: script.menu_bedroom_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 28px
- justify-self: center
- color: white
- type: custom:button-card
name: Living Room
show_state: false
show_icon: false
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: call-service
service: script.menu_living_room_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 28px
- justify-self: center
- color: white
- type: custom:button-card
name: Theater
show_state: false
show_icon: false
entity: input_boolean.theater_apple_tv_status
tap_action:
action: call-service
service: script.menu_theater_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 28px
- justify-self: center
- color: white
- type: custom:button-card
name: Guest Bedroom
show_state: false
show_icon: false
entity: input_boolean.guest_bedroom_apple_tv_status
tap_action:
action: call-service
service: script.menu_guest_bedroom_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 28px
- justify-self: center
- color: white
- type: custom:button-card
name: Gym
show_state: false
show_icon: false
entity: input_boolean.gym_apple_tv_status
tap_action:
action: call-service
service: script.menu_gym_appletv
styles:
card:
- height: 50px
background: none
box-shadow: none
name:
- font-size: 28px
- justify-self: center
- color: white
- type: custom:android-tv-card
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 10 !important;
position: fixed !important; /* Change to fixed or absolute as needed */
background: RGBA(0, 0, 0, 0.5);
left: 8px;
right: 8px;
top: 1px !important;
height: 2px;
padding-top: 0px;
padding-bottom: 0px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
opacity: 0;
}
}
remote_id: remote.master_bedroom
media_player_id: media_player.master_bedroom_2
autofill_entity_id: true
rows:
- - touchpad
touchpad_style:
height: 1px
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png')
background-color: RGBA(0,0,0,0)
background-size: 65%
background-repeat: no-repeat
background-position: center
border-radius: 0
opacity: 1
top: 0px
bottom: 0px
position: static !important
left: 0px
right: 0px
width: inherit
custom_actions:
power:
icon: mdi:power
tap_action:
action: key
key: wakeup
hold_action:
action: key
key: suspend
menu:
icon: mdi:backspace
tap_action:
action: key
key: menu
home:
tap_action:
action: key
key: home
hold_action:
action: more-info
skip-backward:
icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
skip-forward:
icon: mdi:fast-forward-10
action: key
key: skip_forward
play:
tap_action:
action: key
key: play
pause:
tap_action:
action: key
key: pause
up:
tap_action:
action: key
key: up
down:
tap_action:
action: key
key: down
left:
tap_action:
action: key
key: left
right:
tap_action:
action: key
key: right
center:
tap_action:
action: key
key: select
double_tap_action:
action: key
key: menu
primevideo:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Prime Video
netflix:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Netflix
spotify:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Spotify
disney:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Disney+
youtube:
tap_action:
action: call-service
service: media_player.select_source
data:
source: YouTube
appletv:
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV
max:
tap_action:
action: call-service
service: media_player.select_source
data:
source: HBO Max
skyshowtime:
tap_action:
action: call-service
service: media_player.select_source
data:
source: SkyShowtime
plex:
icon: mdi:plex
tap_action:
action: call-service
service: media_player.select_source
data:
source: Plex
discovery:
icon: discovery
tap_action:
action: call-service
service: media_player.select_source
data:
source: discovery+
viaplay:
icon: viaplay
tap_action:
action: call-service
service: media_player.select_source
data:
source: Viaplay
tv2play:
icon: tv2play
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV 2 Play
nrktv:
icon: nrktv
tap_action:
action: call-service
service: media_player.select_source
data:
source: NRK TV
allente:
icon: allente
tap_action:
action: call-service
service: media_player.select_source
data:
source: Allente
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
bottom: 213px;
left: 8px;
right: 8px;
height: 70px;
background: RGBA(0, 0, 0, 0.5);
opacity: 1;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
opacity: 0;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:backspace
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.master_bedroom
data:
command: menu
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:play-pause
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.master_bedroom
data:
command: select
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:home
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.master_bedroom
data:
command: home
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 0;
position: fixed;
bottom: 133px;
left: 8px;
right: 8px;
height: 80px;
background: RGBA(0,0,0,0);
-webkit-backdrop-filter: blur(10px);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
opacity: 0;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 88px;
left: 8px;
right: 8px;
width: 20%;
desktop-width: 25px;
height: 10%;
background: RGBA(0,0,0,0.99);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: entities
entities:
- type: custom:slider-entity-row
entity: media_player.master_bedroom
full_row: true
toggle: true
step: 1
card_mod:
style: |
ha-card {
padding-bottom: 0px;
padding: 0px;
top: 0px;
padding-top: 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: -2;
height: 90px;
padding: 4px 10px;
border-radius: 5px;
position: fixed;
right: 0px;
left: 0px;
bottom: 80px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
opacity: 0
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: spacer
- type: template
tap_action:
action: navigate
navigation_path: /lovelace/
hold_action:
action: none
double_tap_action:
action: none
icon: null
content: Living Room
- type: template
tap_action:
action: navigate
navigation_path: /lovelace/
hold_action:
action: none
double_tap_action:
action: none
icon: null
content: Master Bedroom
- type: template
tap_action:
action: navigate
navigation_path: /lovelace/
hold_action:
action: none
double_tap_action:
action: none
icon: null
content: Theater
- type: template
tap_action:
action: navigate
navigation_path: /lovelace/
hold_action:
action: none
double_tap_action:
action: none
icon: null
content: Guest Bedroom
- type: spacer
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(10px);
background: RGBA(0,0,0,0.5);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- width: 35px
- color: white
img_cell:
- width: 40px
- height: 40px
card:
- background: none
- padding: 0
- opacity: 0.5
- type: custom:button-card
icon: mdi:television-play
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- width: 35px
- color: white
- opacity: 1
img_cell:
- width: 40px
- height: 40px
- align-items: center
- justify-content: center
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:music
tap_action:
action: navigate
navigation_path: /lovelace/sonos/
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
- top: px
img_cell:
- width: 35px
- height: 40px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:shield-home
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- width: 35px
- color: white
- opacity: 0.5
img_cell:
- width: 40px
- height: 40px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:lightbulb-group
entity: sensor.lights_on_on
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- width: 40px
- color: white
- opacity: 0.5
- top: '-2px'
img_cell:
- width: 40px
- height: 40px
card:
- background: none
- padding: 0
- title: Theater Test Remote
path: theater-test-remote
theme: ios-dark-mode-blue-red
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
position: fixed;
right: 8px;
left: 8px;
top: 8px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: entity
entity: sensor.total_lights_on
tap_action:
action: navigate
navigation_path: /lovelace/lights
icon_color: primary
icon: fapro:lightbulb-on-solid
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.locked_doors_count
tap_action:
action: navigate
navigation_path: /lovelace/security
use_entity_picture: false
icon: fapro:lock-open-solid
icon_color: '#D20F44'
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.media_on
icon_color: '#0171A4'
tap_action:
action: navigate
navigation_path: /lovelace/Media
icon: fapro:tv-retro-solid
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: entity
entity: sensor.count_of_maintenance_equal_or_less_than_zero
icon_color: '#FF3B2F'
tap_action:
action: navigate
navigation_path: /lovelace/system
icon: fas:triangle-exclamation
card_mod:
style: |
ha-card {
--chip-padding: 4px;
}
- type: spacer
- type: entity
entity: input_boolean.theater_apple_tv_status
tap_action:
action: toggle
icon: mdi:power
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
position: fixed;
right: 8px;
left: 8px;
top: 53px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.theater_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Theater On
- type: conditional
conditions:
- condition: state
entity: input_boolean.theater_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Apple TV
- type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:sony-playstation
content: Playstation 5
- type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:nintendo-switch
content: Nintendo Switch
- type: spacer
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
top: 106px;
left: 8px;
right: 8px;
height: 45px;
background: RGBA(0, 0, 0, 0.5);
opacity: 1;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 30
cards:
- type: custom:button-card
icon: phu:apple-tv
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.theater
data:
source: TV
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:netflix
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.theater
data:
source: netflix
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: phu:disney-plus
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.theater
data:
source: disney+
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:prime
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.theater
data:
source: prime
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:hbo
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.theater
data:
source: max
styles:
icon:
- width: 25px
- color: white
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:android-tv-card
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 10 !important;
position: fixed !important; /* Change to fixed or absolute as needed */
background: RGBA(0, 0, 0, 0.5);
left: 8px;
right: 8px;
top: 151px !important;
bottom: 238px;
padding-top: 0px;
padding-bottom: 0px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
remote_id: remote.theater
media_player_id: media_player.theater
autofill_entity_id: true
rows:
- - touchpad
touchpad_style:
height: 430px
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png')
background-color: RGBA(0,0,0,0)
background-size: 65%
background-repeat: no-repeat
background-position: center
border-radius: 0
opacity: 1
top: 0px
bottom: 0px
position: static !important
left: 0px
right: 0px
width: inherit
custom_actions:
power:
icon: mdi:power
tap_action:
action: key
key: wakeup
hold_action:
action: key
key: suspend
menu:
icon: mdi:backspace
tap_action:
action: key
key: menu
home:
tap_action:
action: key
key: home
hold_action:
action: more-info
skip-backward:
icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
skip-forward:
icon: mdi:fast-forward-10
action: key
key: skip_forward
play:
tap_action:
action: key
key: play
pause:
tap_action:
action: key
key: pause
up:
tap_action:
action: key
key: up
down:
tap_action:
action: key
key: down
left:
tap_action:
action: key
key: left
right:
tap_action:
action: key
key: right
center:
tap_action:
action: key
key: select
double_tap_action:
action: key
key: menu
primevideo:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Prime Video
netflix:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Netflix
spotify:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Spotify
disney:
tap_action:
action: call-service
service: media_player.select_source
data:
source: Disney+
youtube:
tap_action:
action: call-service
service: media_player.select_source
data:
source: YouTube
appletv:
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV
max:
tap_action:
action: call-service
service: media_player.select_source
data:
source: HBO Max
skyshowtime:
tap_action:
action: call-service
service: media_player.select_source
data:
source: SkyShowtime
plex:
icon: mdi:plex
tap_action:
action: call-service
service: media_player.select_source
data:
source: Plex
discovery:
icon: discovery
tap_action:
action: call-service
service: media_player.select_source
data:
source: discovery+
viaplay:
icon: viaplay
tap_action:
action: call-service
service: media_player.select_source
data:
source: Viaplay
tv2play:
icon: tv2play
tap_action:
action: call-service
service: media_player.select_source
data:
source: TV 2 Play
nrktv:
icon: nrktv
tap_action:
action: call-service
service: media_player.select_source
data:
source: NRK TV
allente:
icon: allente
tap_action:
action: call-service
service: media_player.select_source
data:
source: Allente
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
bottom: 168px;
left: 8px;
right: 8px;
height: 70px;
background: RGBA(0, 0, 0, 0.5);
opacity: 1;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: mdi:backspace
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.theater
data:
command: menu
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:play-pause
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.theater
data:
command: select
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:home
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.theater
data:
command: home
styles:
icon:
- width: 40px
- color: white
img_cell:
- width: 70px
- height: 70px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
bottom: 88px;
left: 8px;
right: 8px;
height: 80px;
background: RGBA(0,0,0,0);
-webkit-backdrop-filter: blur(10px);
opacity: 1;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 88px;
left: 8px;
right: 8px;
width: 20%;
desktop-width: 25px;
height: 10%;
background: RGBA(0,0,0,0.99);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: entities
entities:
- type: custom:slider-entity-row
entity: media_player.marantz_sr7013_2
full_row: true
toggle: true
step: 1
card_mod:
style: |
ha-card {
padding-bottom: 0px;
padding: 0px;
top: 0px;
padding-top: 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(50px);
background: rgba(15, 1, 31, .9);
opacity: 1;
border-radius: 0px;
padding: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 25px
- height: 25px
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 5px
name:
- font-size: 11px
- align-self: center
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 25px
- height: 25px
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 5px
name:
- font-size: 11px
- align-self: center
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 25px
- height: 25px
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 5px
name:
- font-size: 11px
- align-self: center
- title: Music Player
path: music-player
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 5px;
position: absolute;
right: 8px;
left: 8px;
top: 8px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Living Room On
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Living Room Off
- type: spacer
- type: entity
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: toggle
icon: mdi:power
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: max-content
card:
- background-color: transparent
- webkit-backdrop-filter: blur(0px); !important
- box-shadow: none
- border-radius: 20px
- border-width: 0px
- margin: 0px
- padding: 10px
- top: 50px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:android-tv-card
remote_id: remote.living_room
media_player_id: media_player.living_room_2
autofill_entity_id: true
rows:
- - touchpad
- type: custom:button-card
entity: media_player.gym
show_name: false
show_icon: false
custom_fields:
title:
card:
type: custom:button-card
tap_action:
action: none
name: |
[[[
if (states['media_player.gym'].attributes.media_title != undefined)
return states['media_player.gym'].attributes.media_title;
]]]
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: center
- padding-top: 5px
- font-size: 20px
- font-weight: 600
- color: rgba(255,255,255,0.9)
artist:
card:
type: custom:button-card
tap_action:
action: none
name: |
[[[
if (states['media_player.gym'].attributes.media_artist != undefined)
return states['media_player.gym'].attributes.media_artist;
]]]
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: center
- font-size: 20px
- font-weight: 400
- color: rgba(255,255,255,0.3)
entity:
card:
type: custom:button-card
tap_action:
action: none
name: |
[[[
if (states['media_player.gym'].attributes.media_album_name != undefined)
return states['media_player.gym'].attributes.media_album_name;
]]]
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: center
- font-size: 20px
- font-weight: 400
- color: rgba(255,255,255,0.3)
styles:
grid:
- grid-template-areas: ' "i" "title" "artist" "entity" '
- grid-template-columns: 1fr
- grid-template-rows: max-content 1fr 1fr 1fr
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0 5px
- margin: 5px 0 10px 0
- type: custom:my-slider-v2
entity: media_player.gym
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 20px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 5px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 97%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
entity: media_player.gym
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
buttons:
card:
type: custom:button-card
custom_fields:
previous:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_previous_track
target:
entity_id: media_player.gym
icon: mdi:rewind
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin: 0px
icon:
- width: 35px
- color: rgba(255,255,255,0.5)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.gym
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.gym
entity: media_player.gym
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin-bottom: 0px
icon:
- width: 45px
- color: rgba(255,255,255,0.5)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.gym
icon: mdi:fast-forward
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 35px
- color: rgba(255,255,255,0.5)
star:
card:
type: custom:button-card
tap_action:
action: url
url_path: shortcuts://run-shortcut?name=HomeKit
icon: mdi:apple-keyboard-command
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 25px
- color: rgba(255,255,255,0.5)
menu:
card:
type: custom:button-card
entity: media_player.gym
tap_action:
action: more-info
icon: mdi:menu
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 25px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-columns: 2fr 3fr 3fr 3fr 2fr
- grid-template-rows: min-content
- grid-template-areas: '"star previous play next menu"'
card:
- padding: 0 0 0 0px
- margin: 3px 0px -6px 0px
- align-self: end
- background: none
- box-shadow: none
- border-width: 0px
- border-radius: 0px
styles:
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: max-content max-content max-content max-content;
- align-items: end
card:
- background: transparent
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 15px 0px
- margin: 0px 0px 0px 0px
- type: custom:button-card
entity: media_player.gym
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
volume_control:
card:
type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.gym
icon: mdi:volume-medium
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
- type: custom:my-slider-v2
entity: media_player.gym
attribute: volume_level
min: 0
max: 100
step: 2
styles:
card:
- box-shadow: none
- margin: 9px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 0px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- width: 100%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.gym
icon: mdi:volume-high
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-areas: '"volume_control"'
- grid-template-columns: 1fr
- grid-template-rows: max-content;
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0px 0px
- margin-bottom: '-5px'
- position: static
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(50px);
background: rgba(15, 1, 31, .9);
opacity: 1;
border-radius: 0px;
padding: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 25px
- height: 25px
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 5px
name:
- font-size: 11px
- align-self: center
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 25px
- height: 25px
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 5px
name:
- font-size: 11px
- align-self: center
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 25px
- height: 25px
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 5px
name:
- font-size: 11px
- align-self: center
theme: ios-dark-mode-blue-red
- title: Remotetest3
path: remotetest3
theme: ios-dark-mode-blue-red
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 25px;
position: fixed;
right: 8px;
left: 8px;
top: 8px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Living Room On
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Living Room Off
- type: spacer
- type: entity
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: toggle
icon: mdi:power
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:android-tv-card
remote_id: remote.living_room
media_player_id: media_player.living_room_2
autofill_entity_id: false
rows:
- - touchpad
custom_actions:
- type: button
name: power
tap_action:
action: key
key: wakeup
icon: mdi:power
hold_action:
action: key
key: suspend
- type: button
name: menu
tap_action:
action: key
key: menu
icon: mdi:backspace
- type: button
name: home
tap_action:
action: key
key: home
icon: mdi:home
hold_action:
action: more-info
- icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
name: skip-backward
type: button
- icon: mdi:fast-forward-10
action: key
name: skip-forward
tap_action:
key: skip_forward
action: key
type: button
- type: button
name: play
tap_action:
action: key
key: play
icon: mdi:play
- type: button
name: pause
tap_action:
action: key
key: pause
icon: mdi:pause
- type: button
name: up
tap_action:
action: key
key: up
hold_action:
action: repeat
icon: mdi:chevron-up
- type: button
name: down
tap_action:
action: key
key: down
hold_action:
action: repeat
icon: mdi:chevron-down
- type: button
name: left
tap_action:
action: key
key: left
hold_action:
action: repeat
icon: mdi:chevron-left
- type: button
name: right
tap_action:
action: key
key: right
hold_action:
action: repeat
icon: mdi:chevron-right
- type: button
name: center
tap_action:
action: key
key: select
icon: mdi:checkbox-blank-circle
double_tap_action:
action: key
key: menu
- type: button
name: primevideo
tap_action:
action: perform-action
data:
source: Prime Video
perform_action: media_player.select_source
icon: primevideo
- type: button
name: netflix
tap_action:
action: perform-action
data:
source: Netflix
perform_action: media_player.select_source
icon: mdi:netflix
- type: button
name: spotify
tap_action:
action: perform-action
data:
source: Spotify
perform_action: media_player.select_source
icon: mdi:spotify
- type: button
name: disney
tap_action:
action: perform-action
data:
source: Disney+
perform_action: media_player.select_source
icon: disney
- type: button
name: youtube
tap_action:
action: perform-action
data:
source: YouTube
perform_action: media_player.select_source
icon: mdi:youtube
- type: button
name: appletv
tap_action:
action: perform-action
data:
source: TV
perform_action: media_player.select_source
icon: appletv
- type: button
name: max
tap_action:
action: perform-action
data:
source: HBO Max
perform_action: media_player.select_source
icon: max
- type: button
name: skyshowtime
tap_action:
action: perform-action
data:
source: SkyShowtime
perform_action: media_player.select_source
icon: showtime
- type: button
name: plex
tap_action:
action: perform-action
data:
source: Plex
perform_action: media_player.select_source
icon: mdi:plex
- type: button
name: discovery
tap_action:
action: perform-action
data:
source: discovery+
perform_action: media_player.select_source
icon: discovery
- type: button
name: viaplay
tap_action:
action: perform-action
data:
source: Viaplay
perform_action: media_player.select_source
icon: viaplay
- type: button
name: tv2play
tap_action:
action: perform-action
data:
source: TV 2 Play
perform_action: media_player.select_source
icon: tv2play
- type: button
name: nrktv
tap_action:
action: perform-action
data:
source: NRK TV
perform_action: media_player.select_source
icon: nrktv
- type: button
name: allente
tap_action:
action: perform-action
data:
source: Allente
perform_action: media_player.select_source
icon: allente
- type: touchpad
name: touchpad
tap_action:
action: key
key: select
up:
tap_action:
action: key
key: up
hold_action:
action: repeat
name: up
type: button
down:
tap_action:
action: key
key: down
hold_action:
action: repeat
name: down
type: button
left:
tap_action:
action: key
key: left
hold_action:
action: repeat
name: left
type: button
right:
tap_action:
action: key
key: right
hold_action:
action: repeat
name: right
type: button
styles: |-
toucharea {
height: 440px;
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png');
background-color: RGBA(255,255,255,0.3);
background-size: 65%;
background-repeat: no-repeat;
background-position: center;
border-radius: 5px;
opacity: 1;
padding-top: 10px;
padding-bottom: 10px;
position: null;
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
double_tap_action:
action: key
key: menu
platform: Apple TV
keyboard_id: media_player.living_room_3
haptics: false
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 10 !important;
position: static !important; /* Change to fixed or absolute as needed */
background: RGBA(rgba(255,255,255,0.3);
left: 0px !important;
right: 0px !important;
top: 64px !important;
bottom: 338px;
padding-top: 0px;
padding-bottom: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: max-content
card:
- background-color: rgba(255,255,255,0.2)
- webkit-backdrop-filter: blur(10px); !important;}
- box-shadow: none
- border-radius: 0px 0px 50px 50px
- border-width: 0px
- padding: 20px
- margin: 0px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: media_player.living_room_2
show_entity_picture: true
entity_picture: null
show_name: false
show_icon: false
custom_fields:
entity:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace/remote
name: Living Room Apple TV
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: start
- padding-left: 15px
- font-size: 13px
- font-weight: 600
- color: rgba(255,255,255,0.3)
title:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace/remote
name: Living Room
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: start
- padding-left: 15px
- padding-top: 5px
- font-size: 20px
- font-weight: 600
- color: rgba(255,255,255,0.9)
artist:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace/remote
name: Living Room
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: start
- padding-left: 15px
- font-size: 20px
- font-weight: 400
- color: rgba(255,255,255,0.3)
styles:
grid:
- grid-template-areas: '"i entity" "i title" "i artist" "i album" '
- grid-template-columns: max-content 1fr
- grid-template-rows: max-content max-content max-content;
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0 5px
- margin: 5px 0 -10px 0
entity_picture:
- align-self: start
- justify-self: start
- width: 70px
- border-radius: 10px
- type: custom:my-slider-v2
entity: media_player.living_room_2
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 20px 0 0 0
- background: none
container:
- border-radius: 10px
- background: none
- padding: 0 0 0 5px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 97%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
entity: media_player.gym
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
buttons:
card:
type: custom:button-card
custom_fields:
previous:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: left
icon: mdi:rewind
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin: 0px
icon:
- width: 35px
- color: rgba(255,255,255,0.5)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.living_room_2
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.living_room_2
entity: media_player.living_room_2
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin-bottom: 0px
icon:
- width: 45px
- color: rgba(255,255,255,0.5)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.living_room_2
icon: mdi:fast-forward
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 35px
- color: rgba(255,255,255,0.5)
star:
card:
type: custom:button-card
tap_action:
action: url
url_path: shortcuts://run-shortcut?name=HomeKit
icon: mdi:apple-keyboard-command
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 25px
- color: rgba(255,255,255,0.5)
menu:
card:
type: custom:button-card
entity: media_player.living_room_2
tap_action:
action: more-info
icon: mdi:menu
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 25px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-columns: 2fr 3fr 3fr 3fr 2fr
- grid-template-rows: min-content
- grid-template-areas: '"star previous play next menu"'
card:
- padding: 0 0 0 0px
- margin: 3px 0px -6px 0px
- align-self: end
- background: none
- box-shadow: none
- border-width: 0px
- border-radius: 0px
styles:
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: max-content max-content max-content max-content;
- align-items: end
card:
- background: transparent
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 15px 0px
- margin: 0px 0px 0px 0px
- type: custom:button-card
entity: media_player.rx_a1070_main
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
volume_control:
card:
type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.rx_a1070_main
icon: mdi:volume-medium
show_name: false
styles:
card:
- border-radius: 25px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
- type: custom:my-slider-v2
entity: media_player.rx_a1070_main
attribute: volume_level
min: 0
max: 100
step: 2
styles:
card:
- box-shadow: none
- margin: 9px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 0px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- width: 100%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.rx_a1070_main
icon: mdi:volume-high
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-areas: '"volume_control"'
- grid-template-columns: 1fr
- grid-template-rows: max-content;
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0px 0px
- margin-bottom: '-5px'
card_mod:
style: |
@media (max-width: 767px) {
:host {
position: fixed !important;
bottom: 0px;
left: 0px;
right: 0px;
height: !important;
}
ha-card {
background-color: rgba(0, 0, 0, 0.3); !important;
-webkit-backdrop-filter: blur(10px); !important;}
height: 300px;
border-top-left-radius: 25px !important;
border-top-right-radius: 25px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: max-content
card:
- background-color: rgba(0,0,0,0.5)
- webkit-backdrop-filter: blur(10px); !important;}
- box-shadow: none
- border-radius: 25px 25px 25px 25px
- border-width: 0px
- padding: 10px
- margin: 0px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: media_player.living_room_2
show_entity_picture: true
entity_picture: null
show_name: false
show_icon: false
custom_fields:
entity:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace/remote
name: Living Room Apple TV
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: start
- padding-left: 15px
- font-size: 13px
- font-weight: 600
- color: rgba(255,255,255,0.3)
title:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace/remote
name: Living Room
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: start
- padding-left: 15px
- padding-top: 5px
- font-size: 20px
- font-weight: 600
- color: rgba(255,255,255,0.9)
artist:
card:
type: custom:button-card
name: Living Room
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- border-width: 0px
name:
- justify-self: start
- padding-left: 15px
- font-size: 20px
- font-weight: 400
- color: rgba(255,255,255,0.3)
styles:
grid:
- grid-template-areas: '"i entity" "i title" "i artist" "i album" '
- grid-template-columns: max-content 1fr
- grid-template-rows: max-content max-content max-content;
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0 5px
- margin: 5px 0 5px 0
entity_picture:
- align-self: start
- justify-self: start
- width: 70px
- border-radius: 10px
card_mod:
style: |
@media (max-width: 767px) {
:host {
position: fixed !important;
top: 63px;
left: 8px;
right: 8px;
height: !important;
}
ha-card {
background-color: rgba(0, 0, 0, 0.3); !important;
-webkit-backdrop-filter: blur(10px); !important;}
height: 300px;
border-top-left-radius: 25px !important;
border-top-right-radius: 25px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
- title: remotetest4
path: remotetest4
theme: ios-dark-mode-blue-red-alternative
cards:
- type: vertical-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
z-index: 0;
height: 45px;
padding: 4px 10px;
border-radius: 10px;
position: fixed;
right: 8px;
left: 8px;
top: 8px;
}
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Living Room On
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Living Room Off
- type: spacer
- type: entity
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: toggle
icon: mdi:power
content_info: none
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
top: 61px;
left: 8px;
right: 8px;
height: 45px;
background: RGBA(0, 0, 0, 0.5);
opacity: 1;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 30
cards:
- type: custom:button-card
icon: phu:apple-tv
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: TV
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:netflix
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: netflix
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: phu:disney-plus
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: disney+
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:prime
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: prime
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:hbo
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: max
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:android-tv-card
remote_id: remote.living_room
media_player_id: media_player.living_room_2
autofill_entity_id: true
rows:
- - touchpad
custom_actions:
- type: button
name: power
tap_action:
action: key
key: wakeup
icon: mdi:power
hold_action:
action: key
key: suspend
- type: button
name: menu
tap_action:
action: key
key: menu
icon: mdi:backspace
- type: button
name: home
tap_action:
action: key
key: home
icon: mdi:home
hold_action:
action: more-info
- icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
name: skip-backward
type: button
- icon: mdi:fast-forward-10
action: key
name: skip-forward
tap_action:
key: skip_forward
action: key
type: button
- type: button
name: play
tap_action:
action: key
key: play
icon: mdi:play
- type: button
name: pause
tap_action:
action: key
key: pause
icon: mdi:pause
- type: button
name: up
tap_action:
action: key
key: up
hold_action:
action: repeat
icon: mdi:chevron-up
- type: button
name: down
tap_action:
action: key
key: down
hold_action:
action: repeat
icon: mdi:chevron-down
- type: button
name: left
tap_action:
action: key
key: left
hold_action:
action: repeat
icon: mdi:chevron-left
- type: button
name: right
tap_action:
action: key
key: right
hold_action:
action: repeat
icon: mdi:chevron-right
- type: button
name: center
tap_action:
action: key
key: select
icon: mdi:checkbox-blank-circle
double_tap_action:
action: key
key: menu
- type: button
name: primevideo
tap_action:
action: perform-action
data:
source: Prime Video
perform_action: media_player.select_source
icon: primevideo
- type: button
name: netflix
tap_action:
action: perform-action
data:
source: Netflix
perform_action: media_player.select_source
icon: mdi:netflix
- type: button
name: spotify
tap_action:
action: perform-action
data:
source: Spotify
perform_action: media_player.select_source
icon: mdi:spotify
- type: button
name: disney
tap_action:
action: perform-action
data:
source: Disney+
perform_action: media_player.select_source
icon: disney
- type: button
name: youtube
tap_action:
action: perform-action
data:
source: YouTube
perform_action: media_player.select_source
icon: mdi:youtube
- type: button
name: appletv
tap_action:
action: perform-action
data:
source: TV
perform_action: media_player.select_source
icon: appletv
- type: button
name: max
tap_action:
action: perform-action
data:
source: HBO Max
perform_action: media_player.select_source
icon: max
- type: button
name: skyshowtime
tap_action:
action: perform-action
data:
source: SkyShowtime
perform_action: media_player.select_source
icon: showtime
- type: button
name: plex
tap_action:
action: perform-action
data:
source: Plex
perform_action: media_player.select_source
icon: mdi:plex
- type: button
name: discovery
tap_action:
action: perform-action
data:
source: discovery+
perform_action: media_player.select_source
icon: discovery
- type: button
name: viaplay
tap_action:
action: perform-action
data:
source: Viaplay
perform_action: media_player.select_source
icon: viaplay
- type: button
name: tv2play
tap_action:
action: perform-action
data:
source: TV 2 Play
perform_action: media_player.select_source
icon: tv2play
- type: button
name: nrktv
tap_action:
action: perform-action
data:
source: NRK TV
perform_action: media_player.select_source
icon: nrktv
- type: button
name: allente
tap_action:
action: perform-action
data:
source: Allente
perform_action: media_player.select_source
icon: allente
- type: touchpad
name: touchpad
tap_action:
action: key
key: select
up:
tap_action:
action: key
key: up
hold_action:
action: repeat
name: up
type: button
down:
tap_action:
action: key
key: down
hold_action:
action: repeat
name: down
type: button
left:
tap_action:
action: key
key: left
hold_action:
action: repeat
name: left
type: button
right:
tap_action:
action: key
key: right
hold_action:
action: repeat
name: right
type: button
styles: |-
toucharea {
height: 410px;
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png');
background-color: RGBA(0,0,0,0);
background-size: 55%;
background-repeat: no-repeat;
background-position: center;
border-radius: 0px 0px 0px 0px;
opacity: 1;
padding-top: 0px;
padding-bottom: 20px;
position: null;
padding-left: 0px;
padding-right: 0px;
width: auto;
}
double_tap_action:
action: key
key: menu
platform: Apple TV
keyboard_id: media_player.living_room_3
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 1 !important;
position: fixed !important; /* Change to fixed or absolute as needed */
background: RGBA(0, 0, 0, 0.5);
left: 8px;
right: 8px;
top: 106px !important;
bottom: 281px;
padding-top: 0px;
padding-bottom: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 0px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: max-content
card:
- background-color: rgba(0,0,0,0.5)
- webkit-backdrop-filter: blur(10px); !important;}
- box-shadow: none
- border-radius: 10px 10px 10px 10px
- border-width: 0px
- padding: 15px
- margin: 0px
- height: 185px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:my-slider-v2
entity: media_player.living_room_2
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 20px 0 0 0
- background: none
container:
- border-radius: 10px
- background: none
- padding: 0 0 0 5px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 97%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
entity: media_player.gym
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
buttons:
card:
type: custom:button-card
custom_fields:
previous:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: menu
icon: mdi:backspace
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin: 0px
icon:
- width: 40px
- color: rgba(255,255,255,0.8)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.living_room_2
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.living_room_2
entity: media_player.living_room_2
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin-bottom: 0px
icon:
- width: 55px
- color: rgba(255,255,255,0.8)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: home
icon: mdi:home
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 40px
- color: rgba(255,255,255,0.8)
star:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: left
icon: mdi:rewind-10
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
menu:
card:
type: custom:button-card
entity: media_player.living_room_2
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: right
icon: mdi:fast-forward-10
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-columns: 2fr 3fr 3fr 3fr 2fr
- grid-template-rows: min-content
- grid-template-areas: '"star previous play next menu"'
card:
- padding: 0 0 0 0px
- margin: 3px 0px -6px 0px
- align-self: end
- background: none
- box-shadow: none
- border-width: 0px
- border-radius: 0px
styles:
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: max-content max-content max-content max-content;
- align-items: end
card:
- background: transparent
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 15px 0px
- margin: 0px 0px 0px 0px
- type: custom:button-card
entity: media_player.rx_a1070_main
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
volume_control:
card:
type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.rx_a1070_main
icon: mdi:volume-medium
show_name: false
styles:
card:
- border-radius: 25px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
- type: custom:my-slider-v2
entity: media_player.rx_a1070_main
attribute: volume_level
min: 0
max: 100
step: 2
styles:
card:
- box-shadow: none
- margin: 9px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 0px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- width: 100%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.rx_a1070_main
icon: mdi:volume-high
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-areas: '"volume_control"'
- grid-template-columns: 1fr
- grid-template-rows: max-content;
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0px 0px
- margin-bottom: '-5px'
card_mod:
style: |
@media (max-width: 767px) {
:host {
position: fixed !important;
bottom: 88px;
left: 8px;
right: 8px;
}
ha-card {
background-color: rgba(0, 0, 0, 0.3); !important;
-webkit-backdrop-filter: blur(10px); !important;}
border-top-left-radius: 25px !important;
border-top-right-radius: 25px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(50px);
background: rgba(15, 1, 31, .9);
opacity: 1;
border-radius: 0px;
padding: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 25px
- height: 25px
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 5px
name:
- font-size: 11px
- align-self: center
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 25px
- height: 25px
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 5px
name:
- font-size: 11px
- align-self: center
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 25px
- height: 25px
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 5px
name:
- font-size: 11px
- align-self: center
- title: remotetest5
path: remotetest5
theme: ios-dark-mode-blue-red-alternative
cards:
- type: vertical-stack
cards:
- type: custom:local-conditional-card
id: living_room_remote_navbar_main
default: show
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
position: static;
z-index: 3;
top: 8px;
left: 8px;
right: 8px;
height: 45px;
padding: 4px 10px;
border-radius: 10px;
background-color: rgba(10, 10, 10, .5);
-webkit-backdrop-filter: blur(100px);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: fapro:arrow-left-solid
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_apple_tv_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: phu:apple-tv
content: Living Room On
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_nintendo_status
state: 'on'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:nintendo-switch
content: Living Room On
- type: conditional
conditions:
- condition: state
entity: input_boolean.living_room_nintendo_status
state: 'off'
- condition: state
entity: input_boolean.living_room_apple_tv_status
state: 'off'
chip:
type: template
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:television
content: Living Room Off
- type: spacer
- type: template
icon: fapro:bars-regular
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- living_room_remote_sources: show
- living_room_remote_appletv_title: hide
- living_room_remote_navbar_sources: show
- living_room_remote_navbar_main: hide
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
--mush-card-primary-font-size: 28px;
}
ha-card {
--card-primary-font-size: 30px !important;
--card-secondary-font-size: 30px;
--chip-icon-size: 15px;
}
persist_state: false
- type: custom:local-conditional-card
id: living_room_remote_navbar_sources
default: hide
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
position: fixed;
z-index: 3;
top: 8px;
left: 8px;
right: 8px;
height: 45px;
padding: 4px 10px;
border-radius: 10px;
background-color: rgba(10, 10, 10, .5);
-webkit-backdrop-filter: blur(100px);
}
card:
type: grid
square: false
columns: 1
style:
z-index: 10
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: fapro:arrow-left-solid
- type: spacer
- type: template
content: Selecting...
- type: spacer
- type: template
icon: mdi:close
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- living_room_remote_sources: hide
- living_room_remote_appletv_title: show
- living_room_remote_navbar_sources: hide
- living_room_remote_navbar_main: show
card_mod:
style: |
:host {
--chip-background: rgba(0, 0, 0, 0) !important; /* Change this to your desired color */
}
- type: custom:local-conditional-card
id: living_room_remote_appletv_title
default: show
card:
type: custom:button-card
entity: input_boolean.living_room_apple_tv_status
show_name: false
show_icon: false
custom_fields:
title: Living Room Apple TV
icon:
card:
type: custom:button-card
icon: mdi:lightbulb-group
show_name: false
show_entity_picture: false
show_state: false
styles:
card:
- background: none
- box-shadow: none
- padding: 0
icon:
- color: var(--primary-color)
- width: 24px
tap_action:
action: toggle
entity: light.living_room_lamps
icon2:
card:
type: custom:button-card
icon: mdi:power
show_name: false
show_entity_picture: false
show_state: false
styles:
card:
- background: none
- box-shadow: none
- padding: 0
icon:
- color: var(--primary-color)
- width: 24px
tap_action:
action: toggle
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: toggle
styles:
grid:
- grid-template-areas: '"title icon icon2"'
- grid-template-columns: 1fr max-content max-content
- align-items: start
custom_fields:
title:
- justify-self: start
- padding-left: 15px
- font-size: 16px
- font-weight: bold
- color: var(--primary-text-color)
- margin-top: null
icon:
- justify-self: end
- padding-right: 15px
- width: 24px
- margin-top: '-5px'
icon2:
- justify-self: end
- padding-right: 15px
- padding-left: 15px
- width: 24px
- margin-top: '-5px'
card:
- border-radius: 10px 10px 0px 0px
- left: 8px !important
- right: 8px !important
- position: fixed
- top: 61px
- width: auto
- height: 45px
- background: RGBA(0,0,0,0.5)
- webkit-backdrop-filter: blur(30px)
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 999;
position: fixed;
top: ;
left: 0px !important;
right: 8px !important;
background: RGBA(0,0,0,0.3);
opacity: 1;
border-radius: 10px 10px 10px 10px;
padding: 0px;
-webkit-backdrop-filter: blur(30px);
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -3;
position: fixed;
left: 8px;
right: 8px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 0 !important;
border-radius: 0px;
padding: 10px;
animation: slideInFromTop 0.5s ease-out forwards;
}
}
- type: custom:local-conditional-card
id: living_room_remote_sources
default: hide
card:
type: custom:button-card
entity: input_boolean.living_room_apple_tv_status
show_name: false
show_icon: false
custom_fields:
title: Change Remote Type
icon:
card:
type: custom:button-card
icon: phu:apple-tv
show_name: false
show_entity_picture: false
show_state: false
styles:
card:
- background: none
- box-shadow: none
- padding: 0
icon:
- color: white
- width: 40px
tap_action:
action: toggle
entity: light.living_room_lamps
icon2:
card:
type: custom:button-card
icon: mdi:nintendo-switch
show_name: false
show_entity_picture: false
show_state: false
styles:
card:
- background: none
- box-shadow: none
- padding: 0
icon:
- color: white
- width: 24px
tap_action:
action: toggle
entity: input_boolean.living_room_apple_tv_status
tap_action:
action: toggle
styles:
grid:
- grid-template-areas: '"title icon icon2"'
- grid-template-columns: 1fr max-content max-content
- align-items: start
custom_fields:
title:
- justify-self: start
- padding-left: 15px
- font-size: 16px
- font-weight: light
- color: var(--primary-text-color)
- opacity: 0.5
- margin-top: null
icon:
- justify-self: end
- padding-right: 15px
- width: 24px
- margin-top: '-5px'
icon2:
- justify-self: end
- padding-right: 15px
- padding-left: 15px
- width: 24px
- margin-top: '-5px'
card:
- border-radius: 10px 10px 0px 0px
- left: 8px !important
- right: 8px !important
- position: fixed
- top: 61px
- width: auto
- height: 45px
- background: RGBA(0,0,0,0.5)
- webkit-backdrop-filter: blur(30px)
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 999;
position: fixed;
top: ;
left: 0px !important;
right: 8px !important;
background: RGBA(0,0,0,0.3);
opacity: 1;
border-radius: 10px 10px 10px 10px;
padding: 0px;
-webkit-backdrop-filter: blur(30px);
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -3;
position: fixed;
left: 8px;
right: 8px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 0 !important;
border-radius: 0px;
padding: 10px;
animation: slideInFromTop 0.5s ease-out forwards;
}
}
- type: custom:local-conditional-card
id: atv_sources_living_room
card:
type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 2;
position: fixed;
top: 61px;
left: 8px;
right: 8px;
height: 45px;
background: RGBA(0, 0, 0, 0.5);
opacity: 1;
border-color: white;
border-width: 3px;
padding: 0px;
padding-left: 30px;
padding-right: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
desktop-width: 25px;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 5px;
padding-left: 25%;
/* Center the card horizontally */
margin-left: auto;
margin-right: auto;
}
}
@media (min-width:100%) {
ha-card {
width:100%;
left:100%;
}
}
card:
type: grid
square: false
columns: 6
self-align: start
style:
z-index: 30
cards:
- type: custom:button-card
icon: phu:apple-tv
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: TV
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:netflix
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: netflix
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: phu:disney-plus
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: disney+
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:prime
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: prime
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:hbo
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: max
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: si:hbo
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_2
data:
source: max
styles:
icon:
- width: 25px
- color: rgba(255,255,255,0.8)
img_cell:
- width: 40px
- height: 40px
- top: 10px
card:
- background: none
- padding: 0
default: hide
- type: custom:local-conditional-card
id: living_room_media_control_appletv
default: show
card:
type: custom:android-tv-card
remote_id: remote.living_room
media_player_id: media_player.living_room_2
autofill_entity_id: true
rows:
- - touchpad
custom_actions:
- type: button
name: power
tap_action:
action: key
key: wakeup
icon: mdi:power
hold_action:
action: key
key: suspend
- type: button
name: menu
tap_action:
action: key
key: menu
icon: mdi:backspace
- type: button
name: home
tap_action:
action: key
key: home
icon: mdi:home
hold_action:
action: more-info
- icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
name: skip-backward
type: button
- icon: mdi:fast-forward-10
action: key
name: skip-forward
tap_action:
key: skip_forward
action: key
type: button
- type: button
name: play
tap_action:
action: key
key: play
icon: mdi:play
- type: button
name: pause
tap_action:
action: key
key: pause
icon: mdi:pause
- type: button
name: up
tap_action:
action: key
key: up
hold_action:
action: repeat
icon: mdi:chevron-up
- type: button
name: down
tap_action:
action: key
key: down
hold_action:
action: repeat
icon: mdi:chevron-down
- type: button
name: left
tap_action:
action: key
key: left
hold_action:
action: repeat
icon: mdi:chevron-left
- type: button
name: right
tap_action:
action: key
key: right
hold_action:
action: repeat
icon: mdi:chevron-right
- type: button
name: center
tap_action:
action: key
key: select
icon: mdi:checkbox-blank-circle
double_tap_action:
action: key
key: menu
- type: button
name: primevideo
tap_action:
action: perform-action
data:
source: Prime Video
perform_action: media_player.select_source
icon: primevideo
- type: button
name: netflix
tap_action:
action: perform-action
data:
source: Netflix
perform_action: media_player.select_source
icon: mdi:netflix
- type: button
name: spotify
tap_action:
action: perform-action
data:
source: Spotify
perform_action: media_player.select_source
icon: mdi:spotify
- type: button
name: disney
tap_action:
action: perform-action
data:
source: Disney+
perform_action: media_player.select_source
icon: disney
- type: button
name: youtube
tap_action:
action: perform-action
data:
source: YouTube
perform_action: media_player.select_source
icon: mdi:youtube
- type: button
name: appletv
tap_action:
action: perform-action
data:
source: TV
perform_action: media_player.select_source
icon: appletv
- type: button
name: max
tap_action:
action: perform-action
data:
source: HBO Max
perform_action: media_player.select_source
icon: max
- type: button
name: skyshowtime
tap_action:
action: perform-action
data:
source: SkyShowtime
perform_action: media_player.select_source
icon: showtime
- type: button
name: plex
tap_action:
action: perform-action
data:
source: Plex
perform_action: media_player.select_source
icon: mdi:plex
- type: button
name: discovery
tap_action:
action: perform-action
data:
source: discovery+
perform_action: media_player.select_source
icon: discovery
- type: button
name: viaplay
tap_action:
action: perform-action
data:
source: Viaplay
perform_action: media_player.select_source
icon: viaplay
- type: button
name: tv2play
tap_action:
action: perform-action
data:
source: TV 2 Play
perform_action: media_player.select_source
icon: tv2play
- type: button
name: nrktv
tap_action:
action: perform-action
data:
source: NRK TV
perform_action: media_player.select_source
icon: nrktv
- type: button
name: allente
tap_action:
action: perform-action
data:
source: Allente
perform_action: media_player.select_source
icon: allente
- type: touchpad
name: touchpad
tap_action:
action: key
key: select
up:
tap_action:
action: key
key: up
hold_action:
action: repeat
name: up
type: button
down:
tap_action:
action: key
key: down
hold_action:
action: repeat
name: down
type: button
left:
tap_action:
action: key
key: left
hold_action:
action: repeat
name: left
type: button
right:
tap_action:
action: key
key: right
hold_action:
action: repeat
name: right
type: button
styles: |-
toucharea {
height: 410px;
background-image: url('https://i.ibb.co/pbf8yC8/swipe-nav.png');
background-color: RGBA(0,0,0,0);
background-size: 55%;
background-repeat: no-repeat;
background-position: center;
border-radius: 0px 0px 0px 0px;
opacity: 1;
padding-top: 0px;
padding-bottom: 20px;
position: null;
padding-left: 0px;
padding-right: 0px;
width: auto;
}
double_tap_action:
action: key
key: menu
platform: Apple TV
keyboard_id: media_player.living_room_3
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 1 !important;
position: fixed !important; /* Change to fixed or absolute as needed */
background: RGBA(0, 0, 0, 0.5);
left: 8px;
right: 8px;
top: 106px !important;
bottom: 273px;
padding-top: 0px;
padding-bottom: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 0px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
-webkit-backdrop-filter: blur(30px);
}
}
- type: custom:local-conditional-card
id: living_room_media_control_nintendo
default: hide
card:
type: custom:android-tv-card
remote_id: remote.living_room
media_player_id: media_player.living_room_2
autofill_entity_id: true
rows:
- - touchpad
custom_actions:
- type: button
name: power
tap_action:
action: key
key: wakeup
icon: mdi:power
hold_action:
action: key
key: suspend
- type: button
name: menu
tap_action:
action: key
key: menu
icon: mdi:backspace
- type: button
name: home
tap_action:
action: key
key: home
icon: mdi:home
hold_action:
action: more-info
- icon: mdi:rewind-10
tap_action:
action: key
key: skip_backward
name: skip-backward
type: button
- icon: mdi:fast-forward-10
action: key
name: skip-forward
tap_action:
key: skip_forward
action: key
type: button
- type: button
name: play
tap_action:
action: key
key: play
icon: mdi:play
- type: button
name: pause
tap_action:
action: key
key: pause
icon: mdi:pause
- type: button
name: up
tap_action:
action: key
key: up
hold_action:
action: repeat
icon: mdi:chevron-up
- type: button
name: down
tap_action:
action: key
key: down
hold_action:
action: repeat
icon: mdi:chevron-down
- type: button
name: left
tap_action:
action: key
key: left
hold_action:
action: repeat
icon: mdi:chevron-left
- type: button
name: right
tap_action:
action: key
key: right
hold_action:
action: repeat
icon: mdi:chevron-right
- type: button
name: center
tap_action:
action: key
key: select
icon: mdi:checkbox-blank-circle
double_tap_action:
action: key
key: menu
- type: button
name: primevideo
tap_action:
action: perform-action
data:
source: Prime Video
perform_action: media_player.select_source
icon: primevideo
- type: button
name: netflix
tap_action:
action: perform-action
data:
source: Netflix
perform_action: media_player.select_source
icon: mdi:netflix
- type: button
name: spotify
tap_action:
action: perform-action
data:
source: Spotify
perform_action: media_player.select_source
icon: mdi:spotify
- type: button
name: disney
tap_action:
action: perform-action
data:
source: Disney+
perform_action: media_player.select_source
icon: disney
- type: button
name: youtube
tap_action:
action: perform-action
data:
source: YouTube
perform_action: media_player.select_source
icon: mdi:youtube
- type: button
name: appletv
tap_action:
action: perform-action
data:
source: TV
perform_action: media_player.select_source
icon: appletv
- type: button
name: max
tap_action:
action: perform-action
data:
source: HBO Max
perform_action: media_player.select_source
icon: max
- type: button
name: skyshowtime
tap_action:
action: perform-action
data:
source: SkyShowtime
perform_action: media_player.select_source
icon: showtime
- type: button
name: plex
tap_action:
action: perform-action
data:
source: Plex
perform_action: media_player.select_source
icon: mdi:plex
- type: button
name: discovery
tap_action:
action: perform-action
data:
source: discovery+
perform_action: media_player.select_source
icon: discovery
- type: button
name: viaplay
tap_action:
action: perform-action
data:
source: Viaplay
perform_action: media_player.select_source
icon: viaplay
- type: button
name: tv2play
tap_action:
action: perform-action
data:
source: TV 2 Play
perform_action: media_player.select_source
icon: tv2play
- type: button
name: nrktv
tap_action:
action: perform-action
data:
source: NRK TV
perform_action: media_player.select_source
icon: nrktv
- type: button
name: allente
tap_action:
action: perform-action
data:
source: Allente
perform_action: media_player.select_source
icon: allente
- type: touchpad
name: touchpad
tap_action:
action: key
key: select
up:
tap_action:
action: key
key: up
hold_action:
action: repeat
name: up
type: button
down:
tap_action:
action: key
key: down
hold_action:
action: repeat
name: down
type: button
left:
tap_action:
action: key
key: left
hold_action:
action: repeat
name: left
type: button
right:
tap_action:
action: key
key: right
hold_action:
action: repeat
name: right
type: button
styles: |-
toucharea {
height: 410px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5d/Nintendo_Switch_Logo.svg');
background-color: RGBA(0,0,0,0);
background-size: 55%;
background-repeat: no-repeat;
background-position: center;
border-radius: 0px 0px 0px 0px;
opacity: 1;
padding-top: 0px;
padding-bottom: 20px;
position: null;
padding-left: 0px;
padding-right: 0px;
width: auto;
}
double_tap_action:
action: key
key: menu
platform: Apple TV
keyboard_id: media_player.living_room_3
card_mod:
style: |
@media (max-width: 767px) {
ha-card {
z-index: 1 !important;
position: fixed !important; /* Change to fixed or absolute as needed */
background: RGBA(0, 0, 0, 0.5);
left: 8px;
right: 8px;
top: 106px !important;
bottom: 273px;
padding-top: 0px;
padding-bottom: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 0px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
- type: custom:local-conditional-card
id: living_room_audio_control_appletv
default: show
card:
type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: max-content
card:
- background-color: rgba(0,0,0,0.5)
- webkit-backdrop-filter: blur(10px) !important;}
- box-shadow: none
- border-radius: 0px 0px 10px 10px
- border-width: 0px
- padding: 15px
- margin: 0px
- height: 185px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:my-slider-v2
entity: media_player.living_room_2
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 20px 0 0 0
- background: none
container:
- border-radius: 10px
- background: none
- padding: 0 0 0 5px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 97%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
entity: media_player.gym
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
buttons:
card:
type: custom:button-card
custom_fields:
previous:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: menu
icon: mdi:backspace
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin: 0px
icon:
- width: 40px
- color: rgba(255,255,255,0.8)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.living_room_2
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.living_room_2
entity: media_player.living_room_2
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin-bottom: 0px
icon:
- width: 55px
- color: rgba(255,255,255,0.8)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: home
icon: mdi:home
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 40px
- color: rgba(255,255,255,0.8)
star:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: left
icon: mdi:rewind-10
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
menu:
card:
type: custom:button-card
entity: media_player.living_room_2
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: right
icon: mdi:fast-forward-10
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-columns: 2fr 3fr 3fr 3fr 2fr
- grid-template-rows: min-content
- grid-template-areas: '"star previous play next menu"'
card:
- padding: 0 0 0 0px
- margin: 3px 0px -6px 0px
- align-self: end
- background: none
- box-shadow: none
- border-width: 0px
- border-radius: 0px
styles:
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: max-content max-content max-content max-content;
- align-items: end
card:
- background: transparent
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 15px 0px
- margin: 0px 0px 0px 0px
- type: custom:button-card
entity: media_player.rx_a1070_main
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
volume_control:
card:
type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.rx_a1070_main
icon: mdi:volume-medium
show_name: false
styles:
card:
- border-radius: 25px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
- type: custom:my-slider-v2
entity: media_player.rx_a1070_main
attribute: volume_level
min: 0
max: 100
step: 2
styles:
card:
- box-shadow: none
- margin: 9px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 0px
track:
- background: rgba(255,255,255,0.3)
- border-radius: 99px
- width: 100%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.9)
- border-radius: 25px 0px 0px 25px
- height: 7px
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.rx_a1070_main
icon: mdi:volume-high
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-areas: '"volume_control"'
- grid-template-columns: 1fr
- grid-template-rows: max-content;
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0px 0px
- margin-bottom: '-5px'
card_mod:
style: |
@media (max-width: 767px) {
:host {
position: fixed !important;
bottom: 88px;
left: 8px;
right: 8px;
}
ha-card {
background-color: rgba(0, 0, 0, 0.3); !important;
-webkit-backdrop-filter: blur(10px); !important;}
border-top-left-radius: 25px !important;
border-top-right-radius: 25px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
- type: custom:local-conditional-card
id: living_room_audio_control_gaming
default: hide
card:
type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
grid:
- grid-template-areas: '"content"'
- grid-template-columns: 1fr
- grid-template-rows: max-content
card:
- background-color: rgba(0,0,0,0.5)
- webkit-backdrop-filter: blur(10px); !important;}
- box-shadow: none
- border-radius: 0px 0px 10px 10px
- border-width: 0px
- padding: 15px
- margin: 0px
- height: 185px
custom_fields:
content:
card:
type: vertical-stack
cards:
- type: custom:my-slider-v2
entity: media_player.living_room_2
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 20px 0 0 0
- background: none
container:
- border-radius: 10px
- background: none
- padding: 0 0 0 5px
track:
- background: transparent
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 97%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: transparent
- border-radius: 25px 0px 0px 25px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: transparent
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
entity: media_player.gym
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
buttons:
card:
type: custom:button-card
custom_fields:
previous:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: menu
icon: mdi:backspace
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin: 0px
icon:
- width: 40px
- color: rgba(255,255,255,0.2)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.living_room_2
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.living_room_2
entity: media_player.living_room_2
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
- padding: 0px
- margin-bottom: 0px
icon:
- width: 55px
- color: rgba(255,255,255,0.2)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: home
icon: mdi:home
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 40px
- color: rgba(255,255,255,0.2)
star:
card:
type: custom:button-card
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: left
icon: mdi:rewind-10
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.2)
menu:
card:
type: custom:button-card
entity: media_player.living_room_2
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.living_room
data:
command: right
icon: mdi:fast-forward-10
show_name: false
styles:
card:
- border-radius: 5px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.2)
styles:
grid:
- grid-template-columns: 2fr 3fr 3fr 3fr 2fr
- grid-template-rows: min-content
- grid-template-areas: '"star previous play next menu"'
card:
- padding: 0 0 0 0px
- margin: 3px 0px -6px 0px
- align-self: end
- background: none
- box-shadow: none
- border-width: 0px
- border-radius: 0px
styles:
grid:
- grid-template-areas: '"buttons"'
- grid-template-columns: 1fr
- grid-template-rows: max-content max-content max-content max-content;
- align-items: end
card:
- background: transparent
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 15px 0px
- margin: 0px 0px 0px 0px
- type: custom:button-card
entity: media_player.rx_a1070_main
show_entity_picture: false
show_name: false
show_icon: false
custom_fields:
volume_control:
card:
type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.rx_a1070_main
icon: mdi:volume-medium
show_name: false
styles:
card:
- border-radius: 25px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.2)
- type: custom:my-slider-v2
entity: media_player.rx_a1070_main
attribute: volume_level
min: 0
max: 100
step: 2
styles:
card:
- box-shadow: none
- margin: 9px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 0px
track:
- background: rgba(255,255,255,0.2)
- border-radius: 99px
- width: 100%
- height: 7px
- margin: 0px 0 0 0
progress:
- background: rgba(255,255,255,0.2)
- border-radius: 25px 0px 0px 25px
- height: 7px
thumb:
- background: rgba(255,255,255,0.9)
- width: 5px
- height: 7px
- border-radius: 0px
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.rx_a1070_main
icon: mdi:volume-high
show_name: false
styles:
card:
- border-radius: 5px
- width: 30px
- border-width: 0px
- box-shadow: none
- background: rgba(255,255,255,0.0)
- align-self: end
- align-content: end
icon:
- width: 20px
- color: rgba(255,255,255,0.5)
styles:
grid:
- grid-template-areas: '"volume_control"'
- grid-template-columns: 1fr
- grid-template-rows: max-content;
- align-items: end
card:
- background: none
- box-shadow: none
- border-radius: 0px
- border-width: 0px
- padding: 0px 0px 0px 0px
- margin-bottom: '-5px'
card_mod:
style: |
@media (max-width: 767px) {
:host {
position: fixed !important;
bottom: 88px;
left: 8px;
right: 8px;
}
ha-card {
background-color: rgba(0, 0, 0, 0.3); !important;
-webkit-backdrop-filter: blur(10px); !important;}
border-top-left-radius: 25px !important;
border-top-right-radius: 25px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
}
- type: custom:button-card
show_name: false
show_icon: false
custom_fields:
embedded_card:
card:
type: custom:android-tv-card
remote_id: remote.living_room
media_player_id: media_player.living_room_2
autofill_entity_id: true
rows:
- - touchpad
styles:
toucharea:
- height: 410px
- background-image: url('/config/images/swipe-nav.png')
- background-color: rgba(0, 0, 0, 0.9)
- background-size: 55%
- background-repeat: no-repeat
- background-position: center
- border-radius: 0px
- opacity: 1
- padding-top: 0px
- padding-bottom: 20px
- padding-left: 0px
- padding-right: 0px
- width: auto
- top: 90px
styles:
custom_fields:
embedded_card:
- overflow: unset
- width: 100%
- height: auto
card:
- padding: 0
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .9);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 23px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 2px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: null
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 23px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 2px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: null
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: 2px
- padding: 0px
- opacity: 0.5
- top: 2px
name:
- font-size: 10px
- align-self: center
- font-weight: null
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 23px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 2px
name:
- font-size: 10px
- align-self: center
- font-weight: 600
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 23px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 2px
name:
- font-size: 10px
- align-self: center
- font-weight: null
- title: hometest
path: hometest
cards:
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(120px);
-webkit-backdrop-filter: blur(150px);
background: rgba(15, 1, 31, .9);
opacity: 1;
border-radius: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 5px;
}
}
card:
type: grid
square: false
columns: 5
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 23px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 2px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- font-weight: 600
- type: custom:button-card
icon: fapro:circle-sort-solid
name: Climate
tap_action:
action: navigate
navigation_path: /lovelace/climate
styles:
icon:
- color: white
- width: 23px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 2px
name:
- font-size: 10px
- align-self: center
- opacity: 1
- type: custom:button-card
icon: fapro:lightbulb-on-solid
name: Lights
tap_action:
action: navigate
navigation_path: /lovelace/lights/
styles:
icon:
- color: white
- width: 24px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: 2px
- padding: 0px
- opacity: 0.5
- top: 2px
name:
- font-size: 10px
- align-self: center
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 23px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 2px
name:
- font-size: 10px
- align-self: center
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 23px
- height: null
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 2px
name:
- font-size: 10px
- align-self: center
- type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Climate
secondary: ''
icon: fapro:circle-sort-solid
badge_icon: ''
tap_action:
action: navigate
navigation_path: /lovelace/climate
card_mod:
style:
.: |
ha-card {
background: transparent;
--card-primary-font-size: 22px !important;
--card-secondary-font-size: 50px !important;
--card-primary-line-height: 25px;
overflow: visible;
top: 10px;
right: 10px;
padding-bottom: 5px;
padding-top: 10px;
}
ha-state-icon {
--icon-symbol-size: 18px;
}
mushroom-shape-icon$: |
.shape {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
left: 5px;
background: transparent !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 18px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: weather.forecast_home
tap_action:
action: more-info
icon: fas:cloud-sun
alignment: end
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 21px;
right: 5px;
width: ;
--chip-padding: 4px;
padding-top: 10px;
}
- type: horizontal-stack
cards:
- type: custom:mod-card
style: >
ha-card {
white-space: nowrap;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
ha-card::-webkit-scrollbar { /* For Chrome, Safari, and
Opera */
display: none;
}
card:
type: horizontal-stack
cards:
- type: custom:mod-card
style: |
ha-card {
margin-left: 0px;
margin-right: 0px;
}
card:
type: custom:button-card
entity: climate.basement
name: Basement
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.basement_living_temperature'].state + "°";
]]]
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: /lovelace/climate-basement/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 60px
- width: null
- border-radius: 10px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: left
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: null
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 30px
- justify-self: left
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- width: 30px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: custom:mod-card
style: >
ha-card {
white-space: nowrap;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
ha-card::-webkit-scrollbar { /* For Chrome, Safari, and
Opera */
display: none;
}
card:
type: horizontal-stack
cards:
- type: custom:mod-card
style: |
ha-card {
margin-left: 0px;
margin-right: 0px;
}
card:
type: custom:button-card
entity: climate.main_floor
name: Main Floor
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.living_room_temperature'].state + "°";
]]]
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: /lovelace/climate-main-floor/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 60px
- width: null
- border-radius: 10px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: left
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: null
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 30px
- justify-self: left
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- width: 30px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: horizontal-stack
cards:
- type: custom:mod-card
style: >
ha-card {
white-space: nowrap;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
ha-card::-webkit-scrollbar { /* For Chrome, Safari, and
Opera */
display: none;
}
card:
type: horizontal-stack
cards:
- type: custom:mod-card
style: |
ha-card {
margin-left: 0px;
margin-right: 0px;
}
card:
type: custom:button-card
entity: climate.upstairs
name: Upstairs
icon: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'fapro:temperature-arrow-down-solid';
if (entity.attributes.hvac_action === 'heating') return 'fapro:temperature-arrow-up-solid';
return 'fapro:fan-solid';
]]]
show_state: false
show_icon: true
show_label: true
label: |
[[[
return states['sensor.madeline_bedroom_ecobee_sensor_temperature'].state + "°";
]]]
layout: icon_state_name2nd
tap_action:
action: navigate
navigation_path: /lovelace/climate-upstairs/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 60px
- width: null
- border-radius: 10px
- background-color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'rgba(255, 255, 255,.8)';
if (entity.attributes.hvac_action === 'heating') return 'rgba(255, 255, 255,.8)';
return '';
]]]
name:
- justify-self: left
- padding-bottom: 0px
- font-weight: 600
- font-size: 14px
- top-margin: null
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
label:
- font-size: 14px
- font-weight: 400
- padding-bottom: 30px
- justify-self: left
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return 'black';
if (entity.attributes.hvac_action === 'heating') return 'black';
return 'white';
]]]
state:
- justify-self: center
- font-size: 28px
- font-weight: 600
- padding-bottom: 10px
icon:
- width: 30px
- color: |
[[[
if (entity.attributes.hvac_action === 'cooling') return '#0A84FF';
if (entity.attributes.hvac_action === 'heating') return '#D70015';
return 'white';
]]]
state:
- value: 'off'
styles:
card: null
icon: null
- value: idle
styles:
card: null
icon: null
- value: cooling
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- value: heating
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
name:
- color: black
state:
- color: black
label:
- color: black
- type: custom:gap-card
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: ''
icon: fapro:couch-solid
badge_icon: ''
tap_action:
action: navigate
navigation_path: /lovelace/living-room
card_mod:
style:
.: |
ha-card {
background: transparent;
--card-primary-font-size: 22px !important;
--card-secondary-font-size: 50px !important;
--card-primary-line-height: 25px;
overflow: visible;
top: 10px;
right: 10px;
padding-bottom: 5px;
padding-top: 10px;
}
ha-state-icon {
--icon-symbol-size: 18px;
}
mushroom-shape-icon$: |
.shape {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
left: 5px;
background: transparent !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 18px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.living_room_light_count
tap_action:
action: more-info
- type: entity
entity: sensor.living_room_temperature
tap_action:
action: more-info
icon: fapro:temperature-three-quarters-solid
alignment: end
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 21px;
right: 5px;
width: ;
--chip-padding: 4px;
padding-top: 10px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.living_room_apple_tv_status
name: Apple TV
icon: phu:apple-tv
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-living-room/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: input_boolean.living_room_nintendo_status
name: Nintendo Switch
icon: null
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-living-room/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
icon:
- width: 50px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.living_room_lamps
name: Lamps
icon: mdi:lamp
show_state: true
tap_action:
action: toggle
double_tap_action:
action: fire-dom-event
local_conditional_card:
action: toggle
ids:
- home_livingroom_lamps
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.living_room_nook_accent_light
name: Bookshelf
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.living_room_accent_light
name: Accent
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.living_room_ceiling_fan_light
name: Ceiling Fan
icon: mdi:ceiling-fan-light
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: fan.living_room_ceiling_fan
name: Ceiling Fan
icon: mdi:fan
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#28B9F2'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.kitchen_lights
name: Kitchen
icon: mdi:lightbulb-group
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.living_room_lamps
label: Bedroom
template: null
custom_card_light:
entity: '[[[ return entity.entity_id ]]]'
name: |
[[[
var bri = (Math.round(states[entity.entity_id].attributes.brightness / 2.55));
return ' ' + (bri ? bri + '%': 'Uit');
]]]
show_name: true
show_icon: true
show_label: true
show_state: false
styles:
grid:
- grid-template-areas: |
'i switch'
'n n'
'l l'
'slider slider'
- grid-template-rows: 3rem 1fr min-content min-content
- grid-template-columns: 1fr 1fr
card:
- height: 100%
- padding: 10px
img_cell:
- justify-self: start
- align-self: start
- width: 20px
- height: 20px
- overflow: visible
icon:
- justify-self: start
- align-self: start
- width: 18px
- height: 18px
- overflow: visible
name:
- text-align: left
- font-size: var(--fs-400)
- font-family: Montserrat
- font-weight: 700
- justify-self: start
- align-self: end
- overflow: visible
- font-size: 1.2rem
label:
- text-align: left
- font-size: var(--fs-300)
- font-family: Montserrat
- font-weight: 500
- justify-self: start
- align-self: center
- color: var(--color-dark-gray)
- overflow: visible
- padding-bottom: 10px
custom_fields:
switch:
- width: 25px
- justify-self: end
- align-self: start
- color: var(--color-dark-gray)
- margin-top: '-4px'
state:
- value: 'off'
icon: fapro:bulb
styles:
icon:
- color: var(--color-dark-gray)
custom_fields:
switch:
- color: var(--color-light-gray-nav)
- transform: rotate(180deg)
- value: 'on'
icon: fapro:lightbulb-on
styles:
card:
- background: var(--color-gold)
name:
- color: var(--color-white)
label:
- color: var(--color-white)
icon:
- color: var(--color-white)
custom_fields:
switch:
- color: var(--color-white)
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: '[[[ return entity.entity_id ]]]'
styles:
card:
- height: 30px
container:
- border-radius: 8px
progress:
- height: 100%
- background: white
track:
- background: '#EEEEEE'
thumb:
- height: 30%
- background: var(--color-gold)
- position: absolute
- right: 7px
- top: 11px
- width: 3px
- border-radius: 500px
- value: unavailable
name: '?'
icon: fapro:lightbulb
styles:
icon:
- color: var(--color-dark-gray)
custom_fields:
switch: |
[[[
if (entity.state == "on"){
return '';
} else if (entity.state == "unavailable") {
return '';
} else {
return '';
}
]]]
hold_action:
action: more-info
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Master Bedroom
secondary: ''
icon: fapro:bed-front-solid
badge_icon: ''
tap_action:
action: navigate
navigation_path: ''
fill_container: true
card_mod:
style:
.: |
ha-card {
background: transparent;
--card-primary-font-size: 22px !important;
--card-secondary-font-size: 50px !important;
--card-primary-line-height: 25px;
overflow: visible !important;
top: 10px;
right: 10px;
padding-bottom: 5px;
padding-top: 10px;
width: 110%;
}
ha-state-icon {
--icon-symbol-size: 18px;
}
mushroom-shape-icon$: |
.shape {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
left: 5px;
background: transparent !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 18px;
overflow: visible;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.bedroom_temperature
tap_action:
action: more-info
icon: fapro:temperature-three-quarters-solid
alignment: end
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 21px;
right: 5px;
width: ;
--chip-padding: 4px;
padding-top: 10px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.master_bedroom_apple_tv_status
name: Apple TV
icon: phu:apple-tv
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: custom:button-card
entity: light.master_bedroom_sconces
name: Wall Sconces
icon: mdi:wall-sconce
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.master_bedroom_ceiling_fan_light
name: Ceiling Fan
icon: mdi:ceiling-fan-light
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: fan.master_bedroom_ceiling_fan
name: Ceiling Fan
icon: mdi:fan
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#28B9F2'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.master_bathroom_lights
name: Bathroom
icon: mdi:bathtub
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Theater
secondary: ''
icon: mdi:theater
badge_icon: ''
tap_action:
action: navigate
navigation_path: ''
fill_container: true
card_mod:
style:
.: |
ha-card {
background: transparent;
--card-primary-font-size: 22px !important;
--card-secondary-font-size: 50px !important;
--card-primary-line-height: 25px;
overflow: visible !important;
top: 10px;
right: 10px;
padding-bottom: 5px;
padding-top: 10px;
width: 110%;
}
ha-state-icon {
--icon-symbol-size: 20px;
}
mushroom-shape-icon$: |
.shape {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
left: 5px;
background: transparent !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 18px;
overflow: visible;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.theater_smart_sensor_temperature
tap_action:
action: more-info
icon: fapro:temperature-three-quarters-solid
alignment: end
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 21px;
right: 5px;
width: ;
--chip-padding: 4px;
padding-top: 10px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.theater_apple_tv_status
name: Apple TV
icon: phu:apple-tv
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-theater/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: input_boolean.theater_playstation_5_status
name: Playstation 5
icon: null
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/nintendo-remote-living-room/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
icon:
- width: 70px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.theater_nintendo_switch_status
name: Nintendo Switch
icon: null
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
icon:
- width: 50px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: custom:button-card
entity: light.theater_rear_lights
name: Rear
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.theater_main_lights
name: Main
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.theater_snack_lights
name: Snack Area
icon: mdi:popcorn
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.theater_screen_lights
name: Front
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.theater_star_ceiling
name: Star Ceiling
icon: mdi:weather-night
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.basement_lights_other_than_theater_room
name: Outside Theater
icon: mdi:lightbulb-group
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Gym
secondary: ''
icon: fapro:dumbbell-solid
badge_icon: ''
tap_action:
action: navigate
navigation_path: ''
fill_container: true
card_mod:
style:
.: |
ha-card {
background: transparent;
--card-primary-font-size: 22px !important;
--card-secondary-font-size: 50px !important;
--card-primary-line-height: 25px;
overflow: visible !important;
top: 10px;
right: 10px;
padding-bottom: 5px;
padding-top: 10px;
width: 110%;
}
ha-state-icon {
--icon-symbol-size: 18px;
}
mushroom-shape-icon$: |
.shape {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
left: 5px;
background: transparent !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 18px;
overflow: visible;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.gym_temperature
tap_action:
action: more-info
icon: fapro:temperature-three-quarters-solid
alignment: end
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 21px;
right: 5px;
width: ;
--chip-padding: 4px;
padding-top: 10px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.gym_apple_tv_status
name: Apple TV
icon: phu:apple-tv
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-master-bedroom/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: custom:button-card
entity: light.gym_all_recessed_lights_light_group_helper
name: Recessed
icon: mdi:light-recessed
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.gym_flush_mount_light_group
name: Flush Mount
icon: mdi:ceiling-light
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.gym_accent_lights_govee_mqtt
name: Accent Lights
icon: mdi:white-balance-iridescent
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:gap-card
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Guest Bedroom
secondary: ''
icon: fapro:bed-front-solid
badge_icon: ''
tap_action:
action: navigate
navigation_path: ''
fill_container: true
card_mod:
style:
.: |
ha-card {
background: transparent;
--card-primary-font-size: 22px !important;
--card-secondary-font-size: 50px !important;
--card-primary-line-height: 25px;
overflow: visible !important;
top: 10px;
right: 10px;
padding-bottom: 5px;
padding-top: 10px;
width: 110%;
}
ha-state-icon {
--icon-symbol-size: 18px;
}
mushroom-shape-icon$: |
.shape {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
left: 5px;
background: transparent !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 18px;
overflow: visible;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.guest_bathroom_sensorpush_temperature
tap_action:
action: more-info
icon: fapro:temperature-three-quarters-solid
alignment: end
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 21px;
right: 5px;
width: ;
--chip-padding: 4px;
padding-top: 10px;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.guest_bedroom_apple_tv_status
name: Apple TV
icon: phu:apple-tv
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/atv-remote-guest-bedroom/
hold_action:
action: toggle
styles:
card:
- padding: 0px
- height: 128px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: vertical-stack
cards:
- type: custom:button-card
entity: light.guest_bedroom_main_lights
name: Main
icon: mdi:dome-light
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:button-card
entity: light.bonus_table_lamps
name: Lamps
icon: mdi:lamp
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
entity: light.guest_bathroom_lights
name: Bathroom
icon: mdi:bathtub
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
layout: icon_name_state2nd
styles:
card:
- padding: 0px
- height: 60px
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: start
- padding-left: null
- font-weight: 600
- font-size: 14px
state:
- justify-self: start
- font-size: 12px
- font-weight: 300
- padding-bottom: 10px
- padding-top: px
icon:
- width: 35px
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255,.8)
icon:
- color: '#FF9500'
name:
- color: black
state:
- color: black
- type: custom:gap-card
- type: custom:mushroom-title-card
title: Navigation
title_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:button-card
name: Settings
icon: mdi:cog
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/system/
hold_action:
action: toggle
styles:
card:
- height: 90px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- font-weight: 600
- font-size: 14px
- padding-top: 10px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
icon:
- width: 35px
- opacity: 0.8
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: custom:button-card
name: Home Test
icon: mdi:home
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/hometest/
hold_action:
action: toggle
styles:
card:
- height: 90px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- font-weight: 600
- font-size: 14px
- padding-top: 10px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
icon:
- width: 35px
- opacity: 0.8
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:button-card
name: Music
icon: fapro:music-solid
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/sonos/
hold_action:
action: toggle
styles:
card:
- height: 90px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- font-weight: 600
- font-size: 14px
- padding-top: 10px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
icon:
- width: 30px
- opacity: 0.8
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: custom:button-card
name: Rooms
icon: fapro:couch-solid
show_state: true
tap_action:
action: navigate
navigation_path: /lovelace/rooms/
hold_action:
action: toggle
styles:
card:
- height: 90px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: center
name:
- justify-self: center
- font-weight: 600
- font-size: 14px
- padding-top: 10px
state:
- justify-self: center
- font-size: 12px
- font-weight: 300
icon:
- width: 35px
- opacity: 0.8
state:
- value: 'off'
styles:
card: null
icon: null
- value: 'on'
styles:
card:
- background-color: rgba(255, 255, 255, 0.8)
icon:
- color: '#0171A4'
name:
- color: black
state:
- color: black
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: Living Room
title_tap_action:
action: navigate
navigation_path: /lovelace/living-room
subtitle: ''
card_mod:
style: |
ha-card {
white-space: nowrap;
width: 300px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.living_room_light_count
tap_action:
action: more-info
- type: entity
entity: sensor.living_room_temperature
tap_action:
action: more-info
icon: fapro:temperature-three-quarters-solid
alignment: end
card_mod:
style: |
:host {
width: 50px;
--chip-background: rgba(0, 0, 0, 0) !important;
}
ha-card {
top: 22px;
right: 4px;
width: ;
--chip-padding: 4px;
}
- type: custom:gap-card
height: 50
visibility:
- condition: user
users:
- 706a915a37944af29b0455cbdaaac0b2
- 52645528b8994aaf9c866b5cfee0e9eb
- 8951be133a354960924e83723f60553b
- 07e74bacee50477a8560a4724bcc5b1d
- type: custom:mod-card
card_mod:
style: |
/* Styles for mobile devices */
@media (max-width: 767px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 80px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(50px);
background: rgba(15, 1, 31, .9);
opacity: 1;
border-radius: 0px;
padding: 0px;
}
}
/* Styles for desktop devices */
@media (min-width: 768px) {
ha-card {
z-index: -1;
position: fixed;
bottom: 0px;
left: 0px;
width: 20%;
height: 75px;
background: RGBA(0,0,0,0.50);
opacity: 1;
border-radius: 0px;
padding: 10px;
}
}
card:
type: grid
square: false
columns: 3
style:
z-index: 10
cards:
- type: custom:button-card
icon: fas:house
name: Home
tap_action:
action: navigate
navigation_path: /lovelace/home
styles:
icon:
- color: white
- width: 25px
- height: 25px
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 1
- top: 5px
name:
- font-size: 11px
- align-self: center
- opacity: 1
- type: custom:button-card
icon: fapro:tv-retro-solid
name: Media
tap_action:
action: navigate
navigation_path: /lovelace/Media
styles:
icon:
- color: white
- width: 25px
- height: 25px
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 5px
name:
- font-size: 11px
- align-self: center
- type: custom:button-card
icon: fapro:shield-check-solid
name: Security
tap_action:
action: navigate
navigation_path: /lovelace/security/
styles:
icon:
- color: white
- width: 25px
- height: 25px
img_cell:
- height: 35px
- width: 35px
- display: flex
- align-items: flex-end
- justify-content: center
card:
- background: none
- padding: 0px
- opacity: 0.5
- top: 5px
name:
- font-size: 11px
- align-self: center
- type: custom:mushroom-light-card
entity: light.living_room_lamps
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
name: ' '
layout: vertical
icon_type: none
secondary_info: none
primary_info: none
card_mod:
style: |
ha-card {
height: 90px !important;
padding: 25px
}
- type: custom:mushroom-light-card
entity: light.living_room_lamps
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
name: ' '
layout: vertical
icon_type: none
secondary_info: none
primary_info: none
card_mod:
style: |
ha-card {
height: 60px !important;
padding: 5px
}