Skip to content

Instantly share code, notes, and snippets.

@CollotsSpot

CollotsSpot/Dashboard

Created June 28, 2024 22:49
Show Gist options
  • Save CollotsSpot/fd132ffa99e761f57282553f95e7f880 to your computer and use it in GitHub Desktop.
Save CollotsSpot/fd132ffa99e761f57282553f95e7f880 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Dashboard
kiosk_mode:
hide_header: true
title:
views:
- title: Home
path: home
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- view_layout:
grid-area: one
type: custom:button-card
tap_action:
action: call-service
service: light.turn_off
target:
entity_id: light.all_lights
entity: sensor.lights_on
icon: mdi:lightbulb
color: rgba(255, 196, 126, 1)
show_state: true
state:
- value: 0
icon: mdi:lightbulb-off
color: var(--primary-color)
styles:
state:
- color: rgba(0,0,0,0)
icon:
- margin: 0 0 0 0
- width: 27px
- value: 10
styles:
icon:
- width: 23px
- margin: 0 0 0 -22px
state:
- font-size: 20px
- margin: 0 0 0 15px
- value: 11
styles:
icon:
- width: 23px
- margin: 0 0 0 -22px
state:
- font-size: 20px
- margin: 0 0 0 15px
- value: 12
styles:
icon:
- width: 23px
- margin: 0 0 0 -22px
state:
- font-size: 20px
- margin: 0 0 0 15px
- value: 13
styles:
icon:
- width: 23px
- margin: 0 0 0 -22px
state:
- font-size: 20px
- margin: 0 0 0 15px
- value: 14
styles:
icon:
- width: 23px
- margin: 0 0 0 -22px
state:
- font-size: 20px
- margin: 0 0 0 15px
- value: 15
styles:
icon:
- width: 23px
- margin: 0 0 0 -22px
state:
- font-size: 20px
- margin: 0 0 0 15px
show_name: false
styles:
grid:
- grid-template-areas: '"i n"'
card:
- padding: 4px
- width: 45px
- height: 45px
- border-radius: 99px
- margin: 0 0 0 0
icon:
- width: 25px
- margin: 0 0 0 -15px
state:
- position: absolute
- font-size: 22px
- font-weight: 800
- margin: 1px 0 0 18px
- color: var(--primary-color)
- view_layout:
grid-area: two
type: custom:button-card
tap_action:
action: navigate
navigation_path: '#heating'
entity: sensor.wiser_heating
icon: mdi:radiator
color: '#FF8080'
state:
- value: 'Off'
icon: mdi:radiator-off
color: var(--primary-color)
show_name: false
styles:
card:
- width: 45px
- height: 45px
- border-radius: 99px
- margin: 0 0 0 0
icon:
- width: 28px
- view_layout:
grid-area: three
type: custom:button-card
tap_action:
action: navigate
navigation_path: '#network'
entity: binary_sensor.dga4134_2208jcbj3_wan_status
icon: mdi:server-network
color: var(--primary-color)
state:
- value: 'off'
color: red
show_name: false
styles:
card:
- width: 45px
- height: 45px
- border-radius: 99px
- margin: 0 0 0 0
icon:
- width: 27px
- view_layout:
grid-area: four
type: custom:button-card
tap_action:
action: navigate
navigation_path: '#volume'
icon: mdi:speaker-wireless
color: var(--primary-color)
state:
- value: 'off'
color: red
show_name: false
styles:
card:
- width: 45px
- height: 45px
- border-radius: 99px
- margin: 0 0 0 0
icon:
- width: 29px
- margin: 0 0 0 3px
- view_layout:
grid-area: five
type: custom:button-card
entity: todo.shopping_list
tap_action:
action: navigate
navigation_path: '#shopping'
icon: mdi:cart
color: rgba(221,87,70,0.8)
state:
- value: '0'
color: var(--primary-color)
show_name: false
styles:
card:
- width: 45px
- height: 45px
- border-radius: 99px
- margin: 0 0 0 0
icon:
- margin: 3px 0 0 0
- width: 28px
- view_layout:
grid-area: six
type: conditional
conditions:
- condition: state
entity: sensor.m48_bridge_status
state: Closed
card:
type: custom:button-card
tap_action:
action: url
url_path: >-
https://nationalhighways.co.uk/travel-updates/the-severn-bridges/
entity: sensor.m48_bridge_status
icon: mdi:bridge
color: rgba(221,87,70,0.8)
show_name: false
styles:
card:
- width: 45px
- height: 45px
- border-radius: 99px
- margin: 0 0 0 0
icon:
- width: 34px
- view_layout:
grid-area: seven
type: custom:button-card
tap_action:
action: call-service
service: |
[[[
this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true}));
return none;
]]]
hold_action:
action: url
url_path:
icon: mdi:cog
color: var(--primary-color)
show_name: false
styles:
card:
- width: 45px
- height: 45px
- border-radius: 99px
- margin: 0 0 0 -8px
icon:
- width: 30px
layout:
grid-template-columns: >-
min-content min-content min-content min-content min-content
min-content 1fr min-content
grid-template-rows: min-content
grid-template-areas: '"one two three four five six . seven"'
- type: custom:state-switch
entity: sensor.shield_content
states:
movie:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#livingroommedia'
entity: media_player.shield
show_entity_picture: true
show_name: false
show_icon: false
custom_fields:
info:
card:
type: custom:button-card
name: >
[[[return
`<marquee>${states['media_player.shield'].attributes.media_title}
<marquee>`]]]
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- margin-top: 90px
name:
- justify-self: stretch
- font-size: 28px
- font-weight: bold
- color: var(--primary-color)
previous:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_previous_track
target:
entity_id: media_player.shield
icon: mdi:skip-previous
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.shield
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.shield
entity: media_player.shield
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.shield
icon: mdi:skip-next
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
volumedown:
card:
type: custom:button-card
tap_action:
action: call-service
service: script.volume_change_incremental
data:
media_player: media_player.denon_avr_3310
increment: -0.05
icon: mdi:volume-medium
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
volumeup:
card:
type: custom:button-card
tap_action:
action: call-service
service: script.volume_change_incremental
data:
media_player: media_player.denon_avr_3310
increment: 0.05
icon: mdi:volume-high
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 24px
- color: var(--primary-color)
imdb:
card:
type: custom:config-template-card
variables:
imdb_url: states['sensor.imdb_url'].state
entities:
- sensor.imdb_url
card:
type: custom:button-card
entity: sensor.imdb_url
icon: mdi:magnify
show_name: false
tap_action:
action: url
url_path: ${imdb_url}
styles:
icon:
- width: 24px
- color: var(--primary-color)
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
styles:
grid:
- grid-template-areas: '"i info" "i buttons"'
- grid-template-columns: max-content 1fr
- grid-template-rows: min-content min-content
card:
- background: none
- box-shadow: none
- border-radius: 0px
- padding: 0 0px 0 0px
- margin: 10px 0 0px 7px
custom_fields:
previous:
- position: absolute
- bottom: 0%
- left: 28%
- margin: 0 0 0 14px
- justify-self: start
play:
- position: absolute
- bottom: 0%
- left: 39.2%
- margin: 0 0 0 14px
- justify-self: start
next:
- position: absolute
- bottom: 0%
- left: 50.4%
- margin: 0 0 0 14px
- justify-self: start
volumedown:
- position: absolute
- bottom: 0%
- left: 61.6%
- margin: 0 0 0 14px
- justify-self: start
volumeup:
- position: absolute
- bottom: 0%
- left: 72.8%
- margin: 0 0 0 14px
- justify-self: start
imdb:
- position: absolute
- bottom: 0%
- left: 84%
- margin: 0 0 0 14px
- justify-self: start
entity_picture:
- width: 110px
- height: 165px
- border-radius: 15px
- type: custom:button-card
custom_fields:
progress:
card:
type: conditional
conditions:
- condition: state
entity: sensor.shield_media_position
state_not: unavailable
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.shield_media_position
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- margin: 0px 0 0 6px
state:
- color: var(--primary-color)
- font-weight: 550
- font-size: 16px
remaining:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.shield_media_remaining
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- margin: 0 0 0 0px
state:
- color: rgba(96,114,116,0.6)
- font-weight: 550
- font-size: 16px
duration:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.shield_media_duration
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- margin: 0 20px 0 -4px
state:
- color: var(--primary-color)
- font-weight: 550
- font-size: 16px
track:
card:
type: custom:my-slider-v2
entity: media_player.shield
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 2px 0 0 4px
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 10px
track:
- background: var(--button-background-color)
- border-radius: 99px
- padding: 7px 0px 0 0px
- width: 90%
- height: 0.25px
- margin: 5px 0 0 0
progress:
- background: '#6F8081'
- border-radius: 99px
- height: 7px
- margin: '-7px 0px 0 0px'
thumb:
- background: '#6F8081'
- width: 15px
- height: 15px
- border-radius: 99px
- margin: '-4px -3px 0 0px'
styles:
grid:
- grid-template-areas: '"progress track remaining duration"'
- grid-template-columns: max-content 1fr max-content max-content
- grid-template-rows: min-content
card:
- background: none
- box-shadow: none
- padding: none
- margin: '-15px 0 -25px 0'
tvshow:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#diningroom'
entity: media_player.shield
show_entity_picture: true
show_name: false
custom_fields:
info:
card:
type: vertical-stack
cards:
- type: custom:button-card
name: >
[[[return
`<marquee>${states['media_player.shield'].attributes.media_title.split('
- ')[0]} <\marquee>`]]]
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- margin: 35px 0 0 0
name:
- justify-self: stretch
- font-size: 28px
- font-weight: bold
- color: var(--primary-color)
- type: custom:button-card
label: >
[[[return
`<marquee>${states['media_player.shield'].attributes.media_title.split('
- ')[1]} <\marquee>`]]]
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- margin: '-13px 0 0 0'
label:
- justify-self: stretch
- font-size: 22px
- font-weight: 500
- color: rgba(96,114,116,0.6)
- type: custom:button-card
label: >
[[[return
`<marquee>${states['media_player.shield'].attributes.media_title.split('
- ')[2]} <\marquee>`]]]
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- margin: '-13px 0 0px 0'
label:
- justify-self: stretch
- font-size: 24px
- font-weight: 500
- color: var(--primary-color)
previous:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_previous_track
target:
entity_id: media_player.shield
icon: mdi:skip-previous
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.shield
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.shield
entity: media_player.shield
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.shield
icon: mdi:skip-next
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
volumedown:
card:
type: custom:button-card
tap_action:
action: call-service
service: script.volume_change_incremental
data:
media_player: media_player.denon_avr_3310
increment: -0.05
icon: mdi:volume-medium
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
volumeup:
card:
type: custom:button-card
tap_action:
action: call-service
service: script.volume_change_incremental
data:
media_player: media_player.denon_avr_3310
increment: 0.05
icon: mdi:volume-high
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 24px
- color: var(--primary-color)
imdb:
card:
type: custom:config-template-card
variables:
imdb_url: states['sensor.imdb_url'].state
entities:
- sensor.imdb_url
card:
type: custom:button-card
entity: sensor.imdb_url
icon: mdi:magnify
show_name: false
tap_action:
action: url
url_path: ${imdb_url}
styles:
icon:
- width: 24px
- color: var(--primary-color)
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
styles:
grid:
- grid-template-areas: '"i info" "i buttons"'
- grid-template-columns: max-content 1fr
- grid-template-rows: min-content min-content
card:
- background: none
- box-shadow: none
- border-radius: 0px
- padding: 0 0px 0 0px
- margin: 10px 0 0px 7px
custom_fields:
previous:
- position: absolute
- bottom: 0%
- left: 28%
- margin: 0 0 0 14px
- justify-self: start
play:
- position: absolute
- bottom: 0%
- left: 39.2%
- margin: 0 0 0 14px
- justify-self: start
next:
- position: absolute
- bottom: 0%
- left: 50.4%
- margin: 0 0 0 14px
- justify-self: start
volumedown:
- position: absolute
- bottom: 0%
- left: 61.6%
- margin: 0 0 0 14px
- justify-self: start
volumeup:
- position: absolute
- bottom: 0%
- left: 72.8%
- margin: 0 0 0 14px
- justify-self: start
imdb:
- position: absolute
- bottom: 0%
- left: 84%
- margin: 0 0 0 14px
- justify-self: start
entity_picture:
- width: 110px
- height: 165px
- border-radius: 15px
- type: custom:button-card
custom_fields:
progress:
card:
type: conditional
conditions:
- condition: state
entity: sensor.shield_media_position
state_not: unavailable
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.shield_media_position
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- margin: 0px 0 0 6px
state:
- color: rgba(96,114,116,1)
- font-weight: 550
- font-size: 16px
remaining:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.shield_media_remaining
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- margin: 0 0 0 0px
state:
- color: rgba(96,114,116,0.6)
- font-weight: 550
- font-size: 16px
duration:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.shield_media_duration
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- margin: 0 20px 0 -4px
state:
- color: var(--primary-color)
- font-weight: 550
- font-size: 16px
track:
card:
type: custom:my-slider-v2
entity: media_player.shield
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 2px 0 0 4px
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 10px
track:
- background: var(--button-background-color)
- border-radius: 99px
- padding: 7px 0px 0 0px
- width: 90%
- height: 0.25px
- margin: 5px 0 0 0
progress:
- background: '#6F8081'
- border-radius: 99px
- height: 7px
- margin: '-7px 0px 0 0px'
thumb:
- background: '#6F8081'
- width: 15px
- height: 15px
- border-radius: 99px
- margin: '-4px -3px 0 0px'
styles:
grid:
- grid-template-areas: '"progress track remaining duration"'
- grid-template-columns: max-content 1fr max-content max-content
- grid-template-rows: min-content
card:
- background: none
- box-shadow: none
- padding: none
- margin: '-15px 0 -25px 0'
youtube:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#livingroommedia'
entity: media_player.shield
show_entity_picture: false
show_name: false
show_icon: true
icon: mdi:youtube
custom_fields:
info:
card:
type: vertical-stack
cards:
- type: custom:button-card
name: >
[[[return
`<marquee>${states['media_player.shield'].attributes.media_artist}
<marquee>`]]]
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- margin-top: 13px
name:
- justify-self: stretch
- font-size: 24px
- font-weight: bold
- color: var(--primary-color)
- type: custom:button-card
name: >
[[[return
`<marquee>${states['media_player.shield'].attributes.media_title}
<marquee>`]]]
show_label: true
show_icon: false
styles:
card:
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
- margin-top: '-11px'
name:
- justify-self: stretch
- font-size: 20px
- font-weight: bold
- color: var(--primary-color)
previous:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_previous_track
target:
entity_id: media_player.shield
icon: mdi:skip-previous
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.shield
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.shield
entity: media_player.shield
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.shield
icon: mdi:skip-next
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
volumedown:
card:
type: custom:button-card
tap_action:
action: call-service
service: script.volume_change_incremental
data:
media_player: media_player.denon_avr_3310
increment: -0.05
icon: mdi:volume-medium
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
volumeup:
card:
type: custom:button-card
tap_action:
action: call-service
service: script.volume_change_incremental
data:
media_player: media_player.denon_avr_3310
increment: 0.05
icon: mdi:volume-high
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 24px
- color: var(--primary-color)
imdb:
card:
type: custom:config-template-card
variables:
imdb_url: states['sensor.imdb_url'].state
entities:
- sensor.imdb_url
card:
type: custom:button-card
entity: sensor.imdb_url
icon: mdi:magnify
show_name: false
tap_action:
action: url
url_path: ${imdb_url}
styles:
icon:
- width: 24px
- color: var(--primary-color)
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
styles:
grid:
- grid-template-areas: '"i info" "i buttons"'
- grid-template-columns: max-content 1fr
- grid-template-rows: min-content min-content
card:
- background: none
- box-shadow: none
- border-radius: 0px
- padding: 0 0px 0 0px
- margin: 10px 0 0px 7px
icon:
- background: rgba(255,255,255,0.5)
- border-radius: 15px
- color: red
- height: 90px
- width: 90px
- padding: 10px
- margin: 0px 0 0 0
custom_fields:
previous:
- position: absolute
- bottom: 0%
- left: 28%
- margin: 0 0 0 14px
- justify-self: start
play:
- position: absolute
- bottom: 0%
- left: 39.2%
- margin: 0 0 0 14px
- justify-self: start
next:
- position: absolute
- bottom: 0%
- left: 50.4%
- margin: 0 0 0 14px
- justify-self: start
volumedown:
- position: absolute
- bottom: 0%
- left: 61.6%
- margin: 0 0 0 14px
- justify-self: start
volumeup:
- position: absolute
- bottom: 0%
- left: 72.8%
- margin: 0 0 0 14px
- justify-self: start
imdb:
- position: absolute
- bottom: 0%
- left: 84%
- margin: 0 0 0 14px
- justify-self: start
entity_picture:
- width: 110px
- height: 165px
- border-radius: 15px
- type: custom:button-card
custom_fields:
progress:
card:
type: conditional
conditions:
- condition: state
entity: sensor.shield_media_position
state_not: unavailable
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.shield_media_position
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- margin: 0px 0 0 6px
state:
- color: rgba(96,114,116,1)
- font-weight: 550
- font-size: 16px
remaining:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.shield_media_remaining
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- margin: 0 0 0 0px
state:
- color: rgba(96,114,116,0.6)
- font-weight: 550
- font-size: 16px
duration:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.shield_media_duration
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- margin: 0 20px 0 -4px
state:
- color: var(--primary-color)
- font-weight: 550
- font-size: 16px
track:
card:
type: custom:my-slider-v2
entity: media_player.shield
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 1px 0 0 4px
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 10px
track:
- background: var(--button-background-color)
- border-radius: 99px
- padding: 7px 0px 0 0px
- width: 90%
- height: 0.3px
- margin: 6px 0 0 0
progress:
- background: '#6F8081'
- border-radius: 99px
- height: 7px
- margin: '-7px 0px 0 0px'
thumb:
- background: '#6F8081'
- width: 15px
- height: 15px
- border-radius: 99px
- margin: '-4px -3px 0 0px'
styles:
grid:
- grid-template-areas: '"progress track remaining duration"'
- grid-template-columns: max-content 1fr max-content max-content
- grid-template-rows: min-content
card:
- background: none
- box-shadow: none
- padding: none
- margin: '-15px 0 -25px 0'
- type: vertical-stack
cards:
- type: conditional
conditions:
- condition: state
entity: media_player.all_speakers
state_not: 'off'
- condition: state
entity: media_player.all_speakers
state_not: idle
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: media_player.all_speakers
show_entity_picture: true
entity_picture: |
[[[
if (states['media_player.all_speakers'].state == "off")
return "/local/images/empty.png";
else if (states['media_player.all_speakers'].state == "idle")
return "/local/images/empty.png";
else
return states['media_player.all_speakers'].attributes.entity_picture
]]]
show_name: false
show_icon: false
custom_fields:
artist:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_content
name: |
[[[
if (states['media_player.all_speakers'].attributes.media_artist != undefined)
return `<marquee>${states['media_player.all_speakers'].attributes.media_artist}<\marquee>`;
]]]
show_label: true
show_icon: false
state:
- value: radio
styles:
name:
- color: rgba(0,0,0,0)
styles:
card:
- align-self: start
- height: 27px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 24px
- font-weight: bold
- color: var(--primary-color)
album:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_content
name: |
[[[
if (states['media_player.all_speakers'].attributes.media_album_name != undefined)
return `<marquee>${states['media_player.all_speakers'].attributes.media_album_name}<\marquee>`;
]]]
show_icon: false
state:
- value: radio
styles:
name:
- color: rgba(0,0,0,0)
styles:
card:
- align-self: start
- height: 23px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 19px
- font-weight: 500
- color: rgba(96,114,116,0.6)
title:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_content
name: |
[[[
if (states['media_player.all_speakers'].attributes.media_title != undefined)
return `<marquee>${states['media_player.all_speakers'].attributes.media_title}<\marquee>`;
]]]
show_icon: false
state:
- value: radio
styles:
name:
- font-size: 24px
- margin-top: '-4px'
styles:
card:
- align-self: start
- height: 28px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 19px
- font-weight: 500
- color: var(--primary-color)
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.all_speakers
icon: mdi:skip-previous
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.all_speakers
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.all_speakers
entity: media_player.all_speakers
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.all_speakers
icon: mdi:skip-next
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
voldown:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.all_speakers
icon: mdi:volume-medium
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
volup:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.all_speakers
icon: mdi:volume-high
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 24px
- color: var(--primary-color)
wiki:
card:
type: custom:config-template-card
variables:
album_url: states['sensor.album_wiki_all_speakers'].state
entities:
- sensor.album_wiki_all_speakers
card:
type: custom:button-card
entity: sensor.album_wiki
icon: mdi:magnify
show_name: false
tap_action:
action: url
url_path: ${album_url}
styles:
icon:
- width: 22px
- color: var(--primary-color)
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
styles:
grid:
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
- grid-template-rows: min-content;
- grid-template-areas: '"previous play next voldown volup wiki"'
- justify-items: center
card:
- padding: 0 0 0 8px
- align-self: end
- background: none
- box-shadow: none
time:
card:
type: custom:button-card
custom_fields:
progress:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_media_position
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
state:
- color: rgba(96,114,116,1)
- font-weight: 550
- font-size: 16px
remaining:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_media_remaining
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- padding: 0 5px 0 0
state:
- color: rgba(96,114,116,0.6)
- font-weight: 550
- font-size: 16px
duration:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_media_duration
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
state:
- color: var(--primary-color)
- font-weight: 550
- font-size: 16px
track:
card:
type: custom:my-slider-v2
entity: media_player.all_speakers
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 4px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 10px
track:
- background: var(--button-background-color)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 91%
- height: 7px
- margin: 4px 0 0 0
progress:
- background: '#6F8081'
- border-radius: 99px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: '#6F8081'
- width: 15px
- height: 15px
- border-radius: 99px
- margin: '-4px -3px 0 0px'
styles:
grid:
- grid-template-areas: '"progress track remaining duration"'
- grid-template-columns: max-content 1fr max-content max-content
- grid-template-rows: min-content
card:
- padding: 5px 5px 5px 5px
- background: none
- box-shadow: none
styles:
grid:
- grid-template-areas: '"i artist" "i album" "i title" "i buttons" "time time"'
- grid-template-columns: max-content 1fr
- grid-template-rows: max-content max-content max-content max-content;
card:
- background: none
- box-shadow: none
- border-radius: 0px
- padding: 0px 0px 0 5px
- margin: 5px 0 -10px 0
entity_picture:
- align-self: start
- justify-self: start
- width: 110px
- height: 110px
- border-radius: 15px
- type: conditional
conditions:
- condition: state
entity: media_player.bedroom_hifi
state_not: 'off'
- condition: state
entity: media_player.bedroom_hifi
state_not: idle
- condition: state
entity: media_player.all_speakers
state: 'off'
- condition: state
entity: media_player.all_speakers
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: media_player.bedroom_hifi
show_entity_picture: true
entity_picture: |
[[[
if (states['media_player.bedroom_hifi'].state == "off")
return "/local/images/empty.png";
else if (states['media_player.bedroom_hifi'].state == "idle")
return "/local/images/empty.png";
else
return states['media_player.bedroom_hifi'].attributes.entity_picture
]]]
show_name: false
show_icon: false
custom_fields:
artist:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.bedroom_content
name: |
[[[
if (states['media_player.bedroom_hifi'].attributes.media_artist != undefined)
return `<marquee>${states['media_player.bedroom_hifi'].attributes.media_artist}<\marquee>`;
]]]
show_label: true
show_icon: false
state:
- value: radio
styles:
name:
- color: rgba(0,0,0,0)
styles:
card:
- align-self: start
- height: 27px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 24px
- font-weight: bold
- color: var(--primary-color)
album:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.bedroom_content
name: |
[[[
if (states['media_player.bedroom_hifi'].attributes.media_album_name != undefined)
return `<marquee>${states['media_player.bedroom_hifi'].attributes.media_album_name}<\marquee>`;
]]]
show_icon: false
state:
- value: radio
styles:
name:
- color: rgba(0,0,0,0)
styles:
card:
- align-self: start
- height: 23px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 19px
- font-weight: 500
- color: rgba(96,114,116,0.6)
title:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.bedroom_content
name: |
[[[
if (states['media_player.bedroom_hifi'].attributes.media_title != undefined)
return `<marquee>${states['media_player.bedroom_hifi'].attributes.media_title}<\marquee>`;
]]]
show_icon: false
state:
- value: radio
styles:
name:
- font-size: 24px
- margin-top: '-4px'
styles:
card:
- align-self: start
- height: 28px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 19px
- font-weight: 500
- color: var(--primary-color)
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.bedroom_hifi
icon: mdi:skip-previous
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.bedroom_hifi
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.bedroom_hifi
entity: media_player.bedroom_hifi
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.bedroom_hifi
icon: mdi:skip-next
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
voldown:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.bedroom_hifi
icon: mdi:volume-medium
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
volup:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.bedroom_hifi
icon: mdi:volume-high
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 24px
- color: var(--primary-color)
wiki:
card:
type: custom:config-template-card
variables:
album_url: states['sensor.album_wiki_bedroom'].state
entities:
- sensor.album_wiki_bedroom
card:
type: custom:button-card
entity: sensor.album_wiki
icon: mdi:magnify
show_name: false
tap_action:
action: url
url_path: ${album_url}
styles:
icon:
- width: 22px
- color: var(--primary-color)
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
styles:
grid:
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
- grid-template-rows: min-content;
- grid-template-areas: '"previous play next voldown volup wiki"'
- justify-items: center
card:
- padding: 0 0 0 8px
- align-self: end
- background: none
- box-shadow: none
time:
card:
type: custom:button-card
custom_fields:
progress:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.bedroom_media_position
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
state:
- color: rgba(96,114,116,1)
- font-weight: 550
- font-size: 16px
remaining:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.bedroom_media_remaining
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- padding: 0 5px 0 0
state:
- color: rgba(96,114,116,0.6)
- font-weight: 550
- font-size: 16px
duration:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.bedroom_media_duration
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
state:
- color: var(--primary-color)
- font-weight: 550
- font-size: 16px
track:
card:
type: custom:my-slider-v2
entity: media_player.bedroom_hifi
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 4px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 10px
track:
- background: var(--button-background-color)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 91%
- height: 7px
- margin: 4px 0 0 0
progress:
- background: '#6F8081'
- border-radius: 99px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: '#6F8081'
- width: 15px
- height: 15px
- border-radius: 99px
- margin: '-4px -3px 0 0px'
styles:
grid:
- grid-template-areas: '"progress track remaining duration"'
- grid-template-columns: max-content 1fr max-content max-content
- grid-template-rows: min-content
card:
- padding: 5px 5px 5px 5px
- background: none
- box-shadow: none
styles:
grid:
- grid-template-areas: '"i artist" "i album" "i title" "i buttons" "time time"'
- grid-template-columns: max-content 1fr
- grid-template-rows: max-content max-content max-content max-content;
card:
- background: none
- box-shadow: none
- border-radius: 0px
- padding: 0px 0px 0 5px
- margin: 5px 0 -10px 0
entity_picture:
- align-self: start
- justify-self: start
- width: 110px
- height: 110px
- border-radius: 15px
- type: conditional
conditions:
- condition: state
entity: media_player.dining_room_hifi
state_not: 'off'
- condition: state
entity: media_player.dining_room_hifi
state_not: idle
- condition: state
entity: media_player.all_speakers
state: 'off'
- condition: state
entity: media_player.all_speakers
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: media_player.dining_room_hifi
show_entity_picture: true
entity_picture: |
[[[
if (states['media_player.dining_room_hifi'].state == "off")
return "/local/images/empty.png";
else if (states['media_player.dining_room_hifi'].state == "idle")
return "/local/images/empty.png";
else
return states['media_player.dining_room_hifi'].attributes.entity_picture
]]]
show_name: false
show_icon: false
custom_fields:
artist:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_content
name: |
[[[
if (states['media_player.dining_room_hifi'].attributes.media_artist != undefined)
return `<marquee>${states['media_player.dining_room_hifi'].attributes.media_artist}<\marquee>`;
]]]
show_label: true
show_icon: false
state:
- value: radio
styles:
name:
- color: rgba(0,0,0,0)
styles:
card:
- align-self: start
- height: 27px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 24px
- font-weight: bold
- color: var(--primary-color)
album:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_content
name: |
[[[
if (states['media_player.dining_room_hifi'].attributes.media_album_name != undefined)
return `<marquee>${states['media_player.dining_room_hifi'].attributes.media_album_name}<\marquee>`;
]]]
show_icon: false
state:
- value: radio
styles:
name:
- color: rgba(0,0,0,0)
styles:
card:
- align-self: start
- height: 23px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 19px
- font-weight: 500
- color: rgba(96,114,116,0.6)
title:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_content
name: |
[[[
if (states['media_player.dining_room_hifi'].attributes.media_title != undefined)
return `<marquee>${states['media_player.dining_room_hifi'].attributes.media_title}<\marquee>`;
]]]
show_icon: false
state:
- value: radio
styles:
name:
- font-size: 24px
- margin-top: '-4px'
styles:
card:
- align-self: start
- height: 28px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 19px
- font-weight: 500
- color: var(--primary-color)
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.dining_room_hifi
icon: mdi:skip-previous
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.dining_room_hifi
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.dining_room_hifi
entity: media_player.dining_room_hifi
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.dining_room_hifi
icon: mdi:skip-next
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
voldown:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.dining_room_hifi
icon: mdi:volume-medium
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
volup:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.dining_room_hifi
icon: mdi:volume-high
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 24px
- color: var(--primary-color)
wiki:
card:
type: custom:config-template-card
variables:
album_url: states['sensor.album_wiki_dining_room'].state
entities:
- sensor.album_wiki_dining_room
card:
type: custom:button-card
entity: sensor.album_wiki
icon: mdi:magnify
show_name: false
tap_action:
action: url
url_path: ${album_url}
styles:
icon:
- width: 22px
- color: var(--primary-color)
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
styles:
grid:
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
- grid-template-rows: min-content;
- grid-template-areas: '"previous play next voldown volup wiki"'
- justify-items: center
card:
- padding: 0 0 0 8px
- align-self: end
- background: none
- box-shadow: none
time:
card:
type: custom:button-card
custom_fields:
progress:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.dining_room_media_position
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
state:
- color: rgba(96,114,116,1)
- font-weight: 550
- font-size: 16px
remaining:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.dining_room_media_remaining
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- padding: 0 5px 0 0
state:
- color: rgba(96,114,116,0.6)
- font-weight: 550
- font-size: 16px
duration:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.dining_room_media_duration
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
state:
- color: var(--primary-color)
- font-weight: 550
- font-size: 16px
track:
card:
type: custom:my-slider-v2
entity: media_player.dining_room_hifi
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 4px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 10px
track:
- background: var(--button-background-color)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 91%
- height: 7px
- margin: 4px 0 0 0
progress:
- background: '#6F8081'
- border-radius: 99px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: '#6F8081'
- width: 15px
- height: 15px
- border-radius: 99px
- margin: '-4px -3px 0 0px'
styles:
grid:
- grid-template-areas: '"progress track remaining duration"'
- grid-template-columns: max-content 1fr max-content max-content
- grid-template-rows: min-content
card:
- padding: 5px 5px 5px 5px
- background: none
- box-shadow: none
styles:
grid:
- grid-template-areas: '"i artist" "i album" "i title" "i buttons" "time time"'
- grid-template-columns: max-content 1fr
- grid-template-rows: max-content max-content max-content max-content;
card:
- background: none
- box-shadow: none
- border-radius: 0px
- padding: 0px 0px 0 5px
- margin: 5px 0 -10px 0
entity_picture:
- align-self: start
- justify-self: start
- width: 110px
- height: 110px
- border-radius: 15px
- type: conditional
conditions:
- condition: state
entity: media_player.living_room_hifi
state_not: 'off'
- condition: state
entity: media_player.living_room_hifi
state_not: idle
- condition: state
entity: media_player.all_speakers
state: 'off'
- condition: state
entity: media_player.all_speakers
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: media_player.living_room_hifi
show_entity_picture: true
entity_picture: |
[[[
if (states['media_player.living_room_hifi'].state == "off")
return "/local/images/empty.png";
else if (states['media_player.living_room_hifi'].state == "idle")
return "/local/images/empty.png";
else
return states['media_player.living_room_hifi'].attributes.entity_picture
]]]
show_name: false
show_icon: false
custom_fields:
artist:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_content
name: |
[[[
if (states['media_player.living_room_hifi'].attributes.media_artist != undefined)
return `<marquee>${states['media_player.living_room_hifi'].attributes.media_artist}<\marquee>`;
]]]
show_label: true
show_icon: false
state:
- value: radio
styles:
name:
- color: rgba(0,0,0,0)
styles:
card:
- align-self: start
- height: 27px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 24px
- font-weight: bold
- color: var(--primary-color)
album:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_content
name: |
[[[
if (states['media_player.living_room_hifi'].attributes.media_album_name != undefined)
return `<marquee>${states['media_player.living_room_hifi'].attributes.media_album_name}<\marquee>`;
]]]
show_icon: false
state:
- value: radio
styles:
name:
- color: rgba(0,0,0,0)
styles:
card:
- align-self: start
- height: 23px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 19px
- font-weight: 500
- color: rgba(96,114,116,0.6)
title:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_content
name: |
[[[
if (states['media_player.living_room_hifi'].attributes.media_title != undefined)
return `<marquee>${states['media_player.living_room_hifi'].attributes.media_title}<\marquee>`;
]]]
show_icon: false
state:
- value: radio
styles:
name:
- font-size: 24px
- margin-top: '-4px'
styles:
card:
- align-self: start
- height: 28px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 19px
- font-weight: 500
- color: var(--primary-color)
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.living_room_hifi
icon: mdi:skip-previous
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.living_room_hifi
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.living_room_hifi
entity: media_player.living_room_hifi
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.living_room_hifi
icon: mdi:skip-next
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
voldown:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.living_room_hifi
icon: mdi:volume-medium
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
volup:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.living_room_hifi
icon: mdi:volume-high
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 24px
- color: var(--primary-color)
wiki:
card:
type: custom:config-template-card
variables:
album_url: states['sensor.album_wiki_living_room'].state
entities:
- sensor.album_wiki_living_room
card:
type: custom:button-card
entity: sensor.album_wiki
icon: mdi:magnify
show_name: false
tap_action:
action: url
url_path: ${album_url}
styles:
icon:
- width: 22px
- color: var(--primary-color)
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
styles:
grid:
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
- grid-template-rows: min-content;
- grid-template-areas: '"previous play next voldown volup wiki"'
- justify-items: center
card:
- padding: 0 0 0 8px
- align-self: end
- background: none
- box-shadow: none
time:
card:
type: custom:button-card
custom_fields:
progress:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.living_room_media_position
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
state:
- color: rgba(96,114,116,1)
- font-weight: 550
- font-size: 16px
remaining:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.living_room_media_remaining
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- padding: 0 5px 0 0
state:
- color: rgba(96,114,116,0.6)
- font-weight: 550
- font-size: 16px
duration:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.living_room_media_duration
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
state:
- color: var(--primary-color)
- font-weight: 550
- font-size: 16px
track:
card:
type: custom:my-slider-v2
entity: media_player.living_room_hifi
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 4px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 10px
track:
- background: var(--button-background-color)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 91%
- height: 7px
- margin: 4px 0 0 0
progress:
- background: '#6F8081'
- border-radius: 99px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: '#6F8081'
- width: 15px
- height: 15px
- border-radius: 99px
- margin: '-4px -3px 0 0px'
styles:
grid:
- grid-template-areas: '"progress track remaining duration"'
- grid-template-columns: max-content 1fr max-content max-content
- grid-template-rows: min-content
card:
- padding: 5px 5px 5px 5px
- background: none
- box-shadow: none
styles:
grid:
- grid-template-areas: '"i artist" "i album" "i title" "i buttons" "time time"'
- grid-template-columns: max-content 1fr
- grid-template-rows: max-content max-content max-content max-content;
card:
- background: none
- box-shadow: none
- border-radius: 0px
- padding: 0px 0px 0 5px
- margin: 5px 0 -10px 0
entity_picture:
- align-self: start
- justify-self: start
- width: 110px
- height: 110px
- border-radius: 15px
- type: conditional
conditions:
- condition: state
entity: media_player.kitchen_speaker
state_not: 'off'
- condition: state
entity: media_player.kitchen_speaker
state_not: idle
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: media_player.kitchen_speaker
show_entity_picture: true
entity_picture: |
[[[
if (states['media_player.kitchen_speaker'].state == "off")
return "/local/images/empty.png";
else if (states['media_player.kitchen_speaker'].state == "idle")
return "/local/images/empty.png";
else
return states['media_player.kitchen_speaker'].attributes.entity_picture
]]]
show_name: false
show_icon: false
custom_fields:
artist:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_content
name: |
[[[
if (states['media_player.kitchen_speaker'].attributes.media_artist != undefined)
return `<marquee>${states['media_player.kitchen_speaker'].attributes.media_artist}<\marquee>`;
]]]
show_label: true
show_icon: false
state:
- value: radio
styles:
name:
- color: rgba(0,0,0,0)
styles:
card:
- align-self: start
- height: 27px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 24px
- font-weight: bold
- color: var(--primary-color)
album:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_content
name: |
[[[
if (states['media_player.kitchen_speaker'].attributes.media_album_name != undefined)
return `<marquee>${states['media_player.kitchen_speaker'].attributes.media_album_name}<\marquee>`;
]]]
show_icon: false
state:
- value: radio
styles:
name:
- color: rgba(0,0,0,0)
styles:
card:
- align-self: start
- height: 23px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 19px
- font-weight: 500
- color: rgba(96,114,116,0.6)
title:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.all_speakers_content
name: |
[[[
if (states['media_player.kitchen_speaker'].attributes.media_title != undefined)
return `<marquee>${states['media_player.kitchen_speaker'].attributes.media_title}<\marquee>`;
]]]
show_icon: false
state:
- value: radio
styles:
name:
- font-size: 24px
- margin-top: '-4px'
styles:
card:
- align-self: start
- height: 28px
- box-shadow: none
- background: none
- padding: 0px
- border-radius: 0px
name:
- align-self: start
- justify-self: stretch
- font-size: 19px
- font-weight: 500
- color: var(--primary-color)
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.kitchen_speaker
icon: mdi:skip-previous
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
play:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.kitchen_speaker
hold_action:
action: call-service
service: media_player.turn_off
target:
entity_id:
- media_player.kitchen_speaker
entity: media_player.kitchen_speaker
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
next:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.kitchen_speaker
icon: mdi:skip-next
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
voldown:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id:
- media_player.kitchen_speaker
icon: mdi:volume-medium
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 26px
- color: var(--primary-color)
volup:
card:
type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id:
- media_player.kitchen_speaker
icon: mdi:volume-high
show_name: false
styles:
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 24px
- color: var(--primary-color)
wiki:
card:
type: custom:config-template-card
variables:
album_url: >-
states['sensor.album_wiki_kitchen_speaker'].state
entities:
- sensor.album_wiki_kitchen_speaker
card:
type: custom:button-card
entity: sensor.album_wiki
icon: mdi:magnify
show_name: false
tap_action:
action: url
url_path: ${album_url}
styles:
icon:
- width: 22px
- color: var(--primary-color)
card:
- width: 33px
- height: 33px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
styles:
grid:
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
- grid-template-rows: min-content;
- grid-template-areas: '"previous play next voldown volup wiki"'
- justify-items: center
card:
- padding: 0 0 0 8px
- align-self: end
- background: none
- box-shadow: none
time:
card:
type: custom:button-card
custom_fields:
progress:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.kitchen_speaker_media_position
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
state:
- color: rgba(96,114,116,1)
- font-weight: 550
- font-size: 16px
remaining:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.kitchen_speaker_media_remaining
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
- padding: 0 5px 0 0
state:
- color: rgba(96,114,116,0.6)
- font-weight: 550
- font-size: 16px
duration:
card:
type: custom:button-card
tap_action:
action: none
entity: sensor.kitchen_speaker_media_duration
show_state: true
show_icon: false
show_name: false
styles:
card:
- background: none
- border-radius: 0
- box-shadow: none
state:
- color: var(--primary-color)
- font-weight: 550
- font-size: 16px
track:
card:
type: custom:my-slider-v2
entity: media_player.kitchen_speaker
mode: seekbar
min: 0
max: 100
styles:
card:
- height: 20px
- box-shadow: none
- margin: 4px 0 0 0
- background: none
container:
- border-radius: 0px
- background: none
- padding: 0 0 0 10px
track:
- background: var(--button-background-color)
- border-radius: 99px
- padding: 0 0px 0 0px
- width: 91%
- height: 7px
- margin: 4px 0 0 0
progress:
- background: '#6F8081'
- border-radius: 99px
- height: 7px
- margin: 0 0 0 0
thumb:
- background: '#6F8081'
- width: 15px
- height: 15px
- border-radius: 99px
- margin: '-4px -3px 0 0px'
styles:
grid:
- grid-template-areas: '"progress track remaining duration"'
- grid-template-columns: max-content 1fr max-content max-content
- grid-template-rows: min-content
card:
- padding: 5px 5px 5px 5px
- background: none
- box-shadow: none
styles:
grid:
- grid-template-areas: '"i artist" "i album" "i title" "i buttons" "time time"'
- grid-template-columns: max-content 1fr
- grid-template-rows: max-content max-content max-content max-content;
card:
- background: none
- box-shadow: none
- border-radius: 0px
- padding: 0px 0px 0 5px
- margin: 5px 0 -10px 0
entity_picture:
- align-self: start
- justify-self: start
- width: 110px
- height: 110px
- border-radius: 15px
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: People
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#chris'
entity: person.person
name: Chris
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: '#79AC78'
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: '#chris'
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: '#chris'
icon: mdi:face-man
styles:
card:
- background: none
- border-radius: 99px
- box-shadow: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 53%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 53%
- font-size: 14px
- font-weight: 550
- color: '#51829B'
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#kat'
entity: person.person
name: Kat
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: '#79AC78'
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: '#kat'
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: '#kat'
icon: mdi:face-woman
styles:
card:
- background: none
- border-radius: 0px
- box-shadow: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 54%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 54%
- font-size: 14px
- font-weight: 550
- color: '#51829B'
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#dad'
entity: person.person
name: Dad
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: '#79AC78'
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: '#dad'
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: '#dad'
icon: mdi:face-man-outline
styles:
card:
- background: none
- border-radius: 99px
- box-shadow: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 54%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 54%
- font-size: 14px
- font-weight: 550
- color: '#51829B'
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Rooms
- square: false
type: grid
cards:
- type: custom:button-card
name: Bedroom
icon: mdi:bed
tap_action:
action: navigate
navigation_path: '#bedroom'
show_label: true
label: |
[[[
return states['sensor.wiser_lts_temperature_bedroom'].state + "°C • " + states['sensor.ep1_living_room_humidity'].state + "%"
]]]
custom_fields:
btn:
card:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: light.bedroom_lights
icon: mdi:lamp
show_name: false
state:
- value: 'on'
styles:
card:
- background-color: var(--selected-yellow)
- value: 'off'
styles:
card:
- background-color: rgba(96,114,116,0.2)
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 99px
- box-shadow: none
icon:
- width: 25px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatebedroom'
entity: climate.wiser_bedroom
icon: mdi:thermometer
show_name: false
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 99px
- box-shadow: none
- background: |
[[[
if (states['climate.wiser_bedroom'].attributes.is_heating == true)
return "rgba(255, 155, 155, 0.8)";
else
return "rgba(96,114,116,0.2)";
]]]
icon:
- width: 25px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#diningroommedia'
entity: media_player.bedroom_hifi
icon: mdi:speaker
show_name: false
state:
- value: playing
styles:
card:
- background-color: var(--office-pink)
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 99px
- box-shadow: none
- background-color: rgba(96,114,116,0.2)
icon:
- width: 25px
- color: var(--primary-color)
styles:
grid:
- grid-template-areas: '"n btn" "l btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 15px 15px 15px 15px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 19px
- font-weight: 600
- color: var(--primary-color)
label:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 13px
- font-weight: 500
- color: var(--primary-color)
- opacity: 0.6
img_cell:
- justify-content: start
- position: absolute
- width: 120px
- height: 120px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: var(--bedroom-blue)
- border-radius: 500px
icon:
- width: 60px
- color: black
- opacity: '0.5'
show_state: true
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#cellar'
name: Cellar
icon: mdi:stairs-down
show_label: true
label: |
[[[
return states['sensor.temperature_humidity_sensor_temperature'].state + "°C • " + states['sensor.temperature_humidity_sensor_humidity'].state + "%"
]]]
styles:
grid:
- grid-template-areas: '"n btn" "l btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 15px 15px 41px 15px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 19px
- font-weight: 600
- color: var(--primary-color)
label:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 13px
- font-weight: 500
- color: var(--primary-color)
- opacity: 0.6
img_cell:
- justify-content: start
- position: absolute
- width: 120px
- height: 120px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: var(--cellar-brown)
- border-radius: 500px
icon:
- width: 60px
- color: black
- opacity: '0.5'
show_state: true
- type: custom:button-card
name: Dining Room
icon: mdi:silverware-fork-knife
tap_action:
action: navigate
navigation_path: '#diningroom'
show_label: true
label: |
[[[
return states['sensor.wiser_lts_temperature_dining_room'].state + "°C • " + states['sensor.wiser_lts_humidity_dining_room'].state + "%"
]]]
custom_fields:
btn:
card:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: light.dining_room_lights
icon: mdi:lamp
show_name: false
state:
- value: 'on'
styles:
card:
- background-color: var(--selected-yellow)
- value: 'off'
styles:
card:
- background-color: rgba(96,114,116,0.2)
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 99px
- box-shadow: none
icon:
- width: 25px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatediningroom'
entity: climate.wiser_dining_room
icon: mdi:thermometer
show_name: false
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 99px
- box-shadow: none
- background: |
[[[
if (states['climate.wiser_dining_room'].attributes.is_heating == true)
return "rgba(255, 155, 155, 0.8)";
else
return "rgba(96,114,116,0.2)";
]]]
icon:
- width: 25px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#diningroommedia'
entity: media_player.dining_room_hifi
icon: mdi:speaker
show_name: false
state:
- value: playing
styles:
card:
- background-color: var(--office-pink)
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 99px
- box-shadow: none
- background-color: rgba(96,114,116,0.2)
icon:
- width: 25px
- color: var(--primary-color)
styles:
grid:
- grid-template-areas: '"n btn" "l btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 15px 15px 15px 15px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 19px
- font-weight: 600
- color: var(--primary-color)
label:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 13px
- font-weight: 500
- color: var(--primary-color)
- opacity: 0.6
img_cell:
- justify-content: start
- position: absolute
- width: 120px
- height: 120px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: var(--dining-room-green)
- border-radius: 500px
icon:
- width: 60px
- color: black
- opacity: '0.5'
show_state: true
- type: custom:button-card
name: Hallways
icon: mdi:door-closed
tap_action:
action: navigate
navigation_path: '#hallways'
show_label: true
label: |
[[[
return states['sensor.landing_switch_device_temperature'].state + "°C • " + states['sensor.wiser_lts_humidity_dining_room'].state + "%"
]]]
custom_fields:
btn:
card:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: light.hallway_lights
icon: mdi:lamp
show_name: false
state:
- value: 'on'
styles:
card:
- background-color: var(--selected-yellow)
- value: 'off'
styles:
card:
- background-color: rgba(96,114,116,0.2)
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 99px
- box-shadow: none
icon:
- width: 25px
- color: var(--primary-color)
styles:
grid:
- grid-template-areas: '"n btn" "l btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 15px 15px 41px 15px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 19px
- font-weight: 600
- color: var(--primary-color)
label:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 13px
- font-weight: 500
- color: var(--primary-color)
- opacity: 0.6
img_cell:
- justify-content: start
- position: absolute
- width: 120px
- height: 120px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: var(--hallway-red)
- border-radius: 500px
icon:
- width: 60px
- color: black
- opacity: '0.5'
show_state: true
- type: custom:button-card
name: Living Room
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: '#livingroom'
show_label: true
label: |
[[[
return states['sensor.wiser_lts_temperature_living_room'].state + "°C • " + states['sensor.ep1_living_room_humidity'].state + "%"
]]]
custom_fields:
btn:
card:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: light.living_room_lights
icon: mdi:lamp
show_name: false
state:
- value: 'on'
styles:
card:
- background-color: var(--selected-yellow)
- value: 'off'
styles:
card:
- background-color: rgba(96,114,116,0.2)
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 99px
- box-shadow: none
icon:
- width: 25px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatelivingroom'
entity: climate.wiser_living_room
icon: mdi:thermometer
show_name: false
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 99px
- box-shadow: none
- background: |
[[[
if (states['climate.wiser_living_room'].attributes.is_heating == true)
return "rgba(255, 155, 155, 0.8)";
else
return "rgba(96,114,116,0.2)";
]]]
icon:
- width: 25px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#livingroommedia'
entity: media_player.shield
icon: mdi:speaker
show_name: false
state:
- value: playing
styles:
card:
- background-color: var(--office-pink)
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 99px
- box-shadow: none
- background-color: |
[[[
if ( states['media_player.shield'].state == 'playing' )
return 'var(--office-pink)';
else if ( states['media_player.living_room_hifi'].state == 'playing' )
return 'var(--office-pink)';
else
return 'rgba(96,114,116,0.2)';
]]]
icon:
- width: 25px
- color: var(--primary-color)
styles:
grid:
- grid-template-areas: '"n btn" "l btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 15px 15px 15px 15px
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 19px
- font-weight: 600
- color: var(--primary-color)
label:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 13px
- font-weight: 500
- color: var(--primary-color)
- opacity: 0.6
img_cell:
- justify-content: start
- position: absolute
- width: 120px
- height: 120px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: var(--living-room-yellow)
- border-radius: 500px
icon:
- width: 60px
- color: black
- opacity: '0.5'
show_state: true
- type: custom:button-card
name: Office
icon: mdi:desk
tap_action:
action: navigate
navigation_path: '#office'
show_label: true
label: |
[[[
return states['sensor.hallway_switch_device_temperature'].state + "°C • " + states['sensor.everything_presence_one_7e8508_humidity'].state + "%"
]]]
custom_fields:
btn:
card:
type: vertical-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#officemedia'
entity: media_player.lg_webos_tv_a2f0
icon: mdi:speaker
show_name: false
state:
- value: 'on'
styles:
card:
- background-color: var(--office-pink)
styles:
card:
- padding: 4px
- width: 37px
- height: 37px
- border-radius: 99px
- box-shadow: none
- background-color: rgba(96,114,116,0.2)
icon:
- width: 25px
- color: var(--primary-color)
styles:
grid:
- grid-template-areas: '"n btn" "l btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 15px 15px 41px 15px
custom_fields:
btn:
- justify-content: end
- align-self: end
- margin: 0 0 -27px 0
name:
- justify-self: start
- align-self: start
- font-size: 19px
- font-weight: 600
- color: var(--primary-color)
label:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 13px
- font-weight: 500
- color: var(--primary-color)
- opacity: 0.6
img_cell:
- justify-content: start
- position: absolute
- width: 120px
- height: 120px
- left: 0
- bottom: 0
- margin: 0 0 -20px -20px
- background: var(--office-pink)
- border-radius: 500px
icon:
- width: 60px
- color: black
- opacity: '0.5'
show_state: true
columns: 2
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#bedroom'
hide_backdrop: false
margin_top_mobile: 100px
bg_color: null
bg_blur: 0
margin: 8px
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: min-content 1fr min-content
grid-template-rows: min-content
grid-template-areas: '"one . two"'
cards:
- type: custom:mushroom-title-card
title: Bedroom
card_mod:
style: |
ha-card {
margin-top: -18px;
margin-left: -10px;
- view_layout:
grid-area: two
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace
icon: mdi:close
color: var(--primary-color)
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 25px
- type: horizontal-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:thermometer
show_icon: true
styles:
card:
- width: 40px
- margin: 10px 0px 0 10px
icon:
- height: 25px
- width: 25px
- padding: 5px
- color: var(--primary-color)
- background: var(--button-background-color)
- border-radius: 99px
- type: custom:button-card
entity: sensor.wiser_lts_temperature_bedroom
name: Temperature
show_icon: false
show_state: true
styles:
card:
- margin: 7px 0 0 0px
name:
- color: var(--primary-color)
- font-size: 16px
- font-weight: bold
- justify-self: start
state:
- color: var(--primary-color)
- font-size: 14px
- font-weight: regular
- justify-self: start
- type: custom:mini-graph-card
entities:
- sensor.wiser_lts_temperature_bedroom
line_color: rgba(255,155,155,1)
line_width: 7
animate: true
show:
name: false
state: false
icon: false
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:water
show_icon: true
styles:
card:
- width: 40px
- margin: 10px 0px 0 10px
icon:
- height: 25px
- width: 25px
- padding: 5px
- color: var(--primary-color)
- background: var(--button-background-color)
- border-radius: 99px
- type: custom:button-card
entity: sensor.ep1_living_room_humidity
name: Humidity
show_icon: false
show_state: true
styles:
card:
- margin: 7px 0 0 0px
name:
- color: var(--primary-color)
- font-size: 16px
- font-weight: bold
- justify-self: start
state:
- color: var(--primary-color)
- font-size: 14px
- font-weight: regular
- justify-self: start
- type: custom:mini-graph-card
entities:
- sensor.ep1_living_room_humidity
line_color: rgba(81,130,155,0.8)
line_width: 7
animate: true
show:
name: false
state: false
icon: false
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Heating
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatebedroom'
entity: climate.wiser_bedroom
icon: mdi:thermometer
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 27px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatebedroom'
entity: sensor.wiser_lts_temperature_bedroom
show_icon: false
show_name: false
show_state: true
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 90px
- height: 37px
- box-shadow: none
- background: none
- border-radius: 1px
state:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-climate-card
entity: climate.wiser_bedroom
primary_info: none
secondary_info: none
icon_type: none
show_temperature_control: true
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 16px;
color: var(--primary-color) !important;
}
#container {
background: {{ 'rgba(255, 155, 155, 0.8)' if state_attr('climate.wiser_bedroom', 'is_heating') else 'var(--button-background-color)' }};;
padding: 0px;
}
#container .button:nth-child(1) {
padding-left: 20px;
--card-mod-icon-color: rgba(81,130,155,1);
background: none;
--control-icon-size: 25px;
--card-mod-icon: mdi:arrow-down-bold;
}
#container .button:nth-child(3) {
padding-right: 20px;;
--card-mod-icon-color: rgba(231,41,41,0.6);
background: none;
--control-icon-size: 25px;
--card-mod-icon: mdi:arrow-up-bold;
}
.: |
ha-card {
margin-top: -15px;
background: none;
box-shadow: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Lights
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.bedroom_lights
icon: mdi:lightbulb-group
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.bedroom_lights
name: All Lights
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 90px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.bedroom_lights
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.brolly_light
icon: mdi:umbrella-beach
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.brolly_light
name: Brolly Light
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 90px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.brolly_light
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.the_lady
icon: mdi:lamp
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.the_lady
name: The Lady
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 90px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:button-card
card_mod:
style: |
ha-card {
box-shadow: none;
}
entity: light.the_lady
show_name: false
show_icon: false
state:
- value: 'on'
styles:
card:
- background-color: '#FF9800'
- value: 'off'
styles:
card:
- background-color: rgba(0,0,0,0.03)
styles:
card:
- margin-top: '-3px'
- margin-left: 13px
- justify-self: start
- height: 40px
- width: 1380%
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#cellar'
bg_blur: 0
hide_backdrop: false
margin_top_mobile: 200px
bg_color: '#efefef'
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
bg_opacity: 100
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: min-content 1fr min-content
grid-template-rows: min-content
grid-template-areas: '"one . two"'
cards:
- type: custom:mushroom-title-card
title: Cellar
alignment: start
card_mod:
style: |
ha-card {
margin-top: -18px;
margin-left: -10px;
- view_layout:
grid-area: two
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace
icon: mdi:close
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- type: horizontal-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:thermometer
show_icon: true
styles:
card:
- width: 40px
- margin: 10px 0px 0 10px
icon:
- height: 25px
- width: 25px
- padding: 5px
- color: var(--primary-color)
- background: var(--button-background-color)
- border-radius: 99px
- type: custom:button-card
entity: sensor.temperature_humidity_sensor_temperature
name: Temperature
show_icon: false
show_state: true
styles:
card:
- margin: 7px 0 0 0px
name:
- color: var(--primary-color)
- font-size: 16px
- font-weight: bold
- justify-self: start
state:
- color: var(--primary-color)
- font-size: 14px
- font-weight: regular
- justify-self: start
- type: custom:mini-graph-card
entities:
- sensor.temperature_humidity_sensor_temperature
line_color: rgba(255,155,155,1)
line_width: 7
animate: true
show:
name: false
state: false
icon: false
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:water
show_icon: true
styles:
card:
- width: 40px
- margin: 10px 0px 0 10px
icon:
- height: 25px
- width: 25px
- padding: 5px
- color: var(--primary-color)
- background: var(--button-background-color)
- border-radius: 99px
- type: custom:button-card
entity: sensor.temperature_humidity_sensor_humidity
name: Humidity
show_icon: false
show_state: true
styles:
card:
- margin: 7px 0 0 0px
name:
- color: var(--primary-color)
- font-size: 16px
- font-weight: bold
- justify-self: start
state:
- color: var(--primary-color)
- font-size: 14px
- font-weight: regular
- justify-self: start
- type: custom:mini-graph-card
entities:
- sensor.temperature_humidity_sensor_humidity
line_color: rgba(81,130,155,0.8)
line_width: 7
animate: true
show:
name: false
state: false
icon: false
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#diningroom'
bg_blur: 0
hide_backdrop: false
margin_top_mobile: 20px
bg_color: '#efefef'
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: max-content 1fr min-content
grid-template-rows: min-content
grid-template-areas: '"one . two"'
cards:
- type: custom:mushroom-title-card
title: Dining Room
alignment: start
card_mod:
style: |
ha-card {
margin-top: -18px;
margin-left: -10px;
- view_layout:
grid-area: two
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace
icon: mdi:close
color: var(--primary-color)
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- type: horizontal-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:thermometer
show_icon: true
styles:
card:
- width: 40px
- margin: 10px 0px 0 10px
icon:
- height: 25px
- width: 25px
- padding: 5px
- color: var(--primary-color)
- background: var(--button-background-color)
- border-radius: 99px
- type: custom:button-card
entity: sensor.wiser_lts_temperature_dining_room
name: Temperature
show_icon: false
show_state: true
styles:
card:
- margin: 7px 0 0 0px
name:
- color: var(--primary-color)
- font-size: 16px
- font-weight: bold
- justify-self: start
state:
- color: var(--primary-color)
- font-size: 14px
- font-weight: regular
- justify-self: start
- type: custom:mini-graph-card
entities:
- sensor.wiser_lts_temperature_dining_room
line_color: rgba(255,155,155,1)
line_width: 7
animate: true
show:
name: false
state: false
icon: false
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:water
show_icon: true
styles:
card:
- width: 40px
- margin: 10px 0px 0 10px
icon:
- height: 25px
- width: 25px
- padding: 5px
- color: var(--primary-color)
- background: var(--button-background-color)
- border-radius: 99px
- type: custom:button-card
entity: sensor.wiser_lts_humidity_dining_room
name: Humidity
show_icon: false
show_state: true
styles:
card:
- margin: 7px 0 0 0px
name:
- color: var(--primary-color)
- font-size: 16px
- font-weight: bold
- justify-self: start
state:
- color: var(--primary-color)
- font-size: 14px
- font-weight: regular
- justify-self: start
- type: custom:mini-graph-card
entities:
- sensor.wiser_lts_humidity_dining_room
line_color: rgba(81,130,155,0.8)
line_width: 7
animate: true
show:
name: false
state: false
icon: false
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Heating
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatebedroom'
entity: climate.wiser_dining_room
icon: mdi:thermometer
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 35px
- height: 35px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatediningroom'
entity: sensor.wiser_lts_temperature_dining_room
show_icon: false
show_name: false
show_state: true
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 95px
- height: 37px
- box-shadow: none
- background: none
- border-radius: 1px
state:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-climate-card
entity: climate.wiser_dining_room
primary_info: none
secondary_info: none
icon_type: none
show_temperature_control: true
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 16px;
color: rgba(96,114,116,1) !important;
}
#container {
background: {{ 'rgba(255, 155, 155, 0.8)' if state_attr('climate.wiser_dining_room', 'is_heating') else 'rgba(50, 50, 50, 0.09)' }};;
padding: 0px;
}
#container .button:nth-child(1) {
padding-left: 20px;
--card-mod-icon-color: rgba(81,130,155,1);
background: none;
--control-icon-size: 25px;
--card-mod-icon: mdi:arrow-down-bold;
}
#container .button:nth-child(3) {
padding-right: 20px;;
--card-mod-icon-color: rgba(231, 41, 41,0.6);
background: none;
--control-icon-size: 25px;
--card-mod-icon: mdi:arrow-up-bold;
}
.: |
ha-card {
margin-top: -15px;
background: none;
box-shadow: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Lights
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.dining_room_lights
icon: mdi:lightbulb-group
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.dining_room_lights
name: All Lights
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 95px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.dining_room_lights
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.blue_lamp
icon: mdi:lamp
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.blue_lamp
name: Blue Lamp
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 95px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.blue_lamp
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.dining_room_ceiling_light
icon: mdi:chandelier
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.dining_room_ceiling_light
name: Ceiling Light
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 95px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.dining_room_ceiling_light
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.glass_lamp
icon: mdi:lamp
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.glass_lamp
name: Glass Lamp
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 95px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.glass_lamp
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#hallways'
bg_blur: 0
hide_backdrop: false
margin_top_mobile: 160px
bg_color: '#efefef'
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: max-content 1fr min-content
grid-template-rows: min-content
grid-template-areas: '"one . two"'
cards:
- type: custom:mushroom-title-card
title: Hallways
alignment: start
card_mod:
style: |
ha-card {
margin-top: -18px;
margin-left: -10px;
- view_layout:
grid-area: two
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace
icon: mdi:close
color: var(--primary-color)
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- type: horizontal-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:thermometer
show_icon: true
styles:
card:
- width: 40px
- margin: 10px 0px 0 10px
icon:
- height: 25px
- width: 25px
- padding: 5px
- color: var(--primary-color)
- background: var(--button-background-color)
- border-radius: 99px
- type: custom:button-card
entity: sensor.hallway_switch_device_temperature
name: Temperature
show_icon: false
show_state: true
styles:
card:
- margin: 7px 0 0 0px
name:
- color: var(--primary-color)
- font-size: 16px
- font-weight: bold
- justify-self: start
state:
- color: var(--primary-color)
- font-size: 14px
- font-weight: regular
- justify-self: start
- type: custom:mini-graph-card
entities:
- sensor.hallway_switch_device_temperature
line_color: rgba(255,155,155,1)
line_width: 7
animate: true
show:
name: false
state: false
icon: false
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:water
show_icon: true
styles:
card:
- width: 40px
- margin: 10px 0px 0 10px
icon:
- height: 25px
- width: 25px
- padding: 5px
- color: var(--primary-color)
- background: var(--button-background-color)
- border-radius: 99px
- type: custom:button-card
entity: sensor.wiser_lts_humidity_dining_room
name: Humidity
show_icon: false
show_state: true
styles:
card:
- margin: 7px 0 0 0px
name:
- color: var(--primary-color)
- font-size: 16px
- font-weight: bold
- justify-self: start
state:
- color: var(--primary-color)
- font-size: 14px
- font-weight: regular
- justify-self: start
- type: custom:mini-graph-card
entities:
- sensor.wiser_lts_humidity_dining_room
line_color: rgba(81,130,155,0.8)
line_width: 7
animate: true
show:
name: false
state: false
icon: false
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Lights
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.hallway_lights
icon: mdi:lightbulb-group
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.hallway_lights
name: All Lights
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0px
- padding: 0px
- width: 105px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.hallway_lights
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.hallway_light
icon: mdi:ceiling-light
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.hallway_light
name: Hallway Light
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0px
- padding: 0px
- width: 105px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.hallway_light
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.landing_light_1
icon: mdi:ceiling-light
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.landing_light_1
name: Landing Light
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0px
- padding: 0px
- width: 105px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.landing_light_1
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.landing_light_2
icon: mdi:ceiling-light
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.landing_light_2
name: Landing Light
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0px
- padding: 0px
- width: 105px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.landing_light_2
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#livingroom'
bg_blur: 0
hide_backdrop: false
margin_top_mobile: 10px
bg_color: '#efefef'
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: max-content 1fr min-content
grid-template-rows: min-content
grid-template-areas: '"one . two"'
cards:
- type: custom:mushroom-title-card
title: Living Room
alignment: start
card_mod:
style: |
ha-card {
margin-top: -18px;
margin-left: -10px;
- view_layout:
grid-area: two
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace
icon: mdi:close
color: var(--primary-color)
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- type: horizontal-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:thermometer
show_icon: true
styles:
card:
- width: 40px
- margin: 10px 0px 0 10px
icon:
- height: 25px
- width: 25px
- padding: 5px
- color: var(--primary-color)
- background: var(--button-background-color)
- border-radius: 99px
- type: custom:button-card
entity: sensor.wiser_lts_temperature_living_room
name: Temperature
show_icon: false
show_state: true
styles:
card:
- margin: 7px 0 0 0px
name:
- color: var(--primary-color)
- font-size: 16px
- font-weight: bold
- justify-self: start
state:
- color: var(--primary-color)
- font-size: 14px
- font-weight: regular
- justify-self: start
- type: custom:mini-graph-card
entities:
- sensor.wiser_lts_temperature_living_room
line_color: rgba(255,155,155,1)
line_width: 7
animate: true
show:
name: false
state: false
icon: false
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:water
show_icon: true
styles:
card:
- width: 40px
- margin: 10px 0px 0 10px
icon:
- height: 25px
- width: 25px
- padding: 5px
- color: var(--primary-color)
- background: var(--button-background-color)
- border-radius: 99px
- type: custom:button-card
entity: sensor.ep1_living_room_humidity
name: Humidity
show_icon: false
show_state: true
styles:
card:
- margin: 7px 0 0 0px
name:
- color: var(--primary-color)
- font-size: 16px
- font-weight: bold
- justify-self: start
state:
- color: var(--primary-color)
- font-size: 14px
- font-weight: regular
- justify-self: start
- type: custom:mini-graph-card
entities:
- sensor.ep1_living_room_humidity
line_color: rgba(81,130,155,0.8)
line_width: 7
animate: true
show:
name: false
state: false
icon: false
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Heating
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatelivingroom'
entity: climate.wiser_living_room
icon: mdi:thermometer
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 35px
- height: 35px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatelivingroom'
entity: sensor.wiser_lts_temperature_living_room
show_icon: false
show_name: false
show_state: true
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 100px
- height: 37px
- box-shadow: none
- background: none
- border-radius: 1px
state:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-climate-card
entity: climate.wiser_living_room
primary_info: none
secondary_info: none
icon_type: none
show_temperature_control: true
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 16px;
color: rgba(96,114,116,1) !important;
}
#container {
background: {{ 'rgba(255, 155, 155, 0.8)' if state_attr('climate.wiser_living_room', 'is_heating') else 'rgba(50, 50, 50, 0.09)' }};;
padding: 0px;
}
#container .button:nth-child(1) {
padding-left: 20px;
--card-mod-icon-color: rgba(81,130,155,1);
background: none;
--control-icon-size: 25px;
--card-mod-icon: mdi:arrow-down-bold;
}
#container .button:nth-child(3) {
padding-right: 20px;;
--card-mod-icon-color: rgba(231,41,41,0.6);
background: none;
--control-icon-size: 25px;
--card-mod-icon: mdi:arrow-up-bold;
}
.: |
ha-card {
margin-top: -15px;
background: none;
box-shadow: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Lights
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.living_room_lights
icon: mdi:lightbulb-group
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.living_room_lights
name: All Lights
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 100px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.living_room_lights
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.living_room_ceiling_light
icon: mdi:chandelier
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.living_room_ceiling_light
name: Ceiling Light
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 100px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.living_room_ceiling_light
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.fire
icon: mdi:fireplace
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.fire
name: Fire
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 100px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:button-card
card_mod:
style: |
ha-card {
box-shadow: none;
}
entity: light.fire
show_name: false
show_icon: false
state:
- value: 'on'
styles:
card:
- background-color: '#FF9800'
- value: 'off'
styles:
card:
- background-color: rgba(0,0,0,0.03)
styles:
card:
- margin-top: '-3px'
- margin-left: 13px
- justify-self: start
- height: 40px
- width: 1310%
- type: custom:gap-card
height: 0.01
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.geisha_lamp_1
icon: mdi:lamp
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.geisha_lamp_1
name: Geisha Lamp
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 100px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.geisha_lamp_1
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.geisha_lamp_2
icon: mdi:lamp
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.geisha_lamp_2
name: Geisha Lamp
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 100px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.geisha_lamp_2
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.red_lamp
icon: mdi:lamp
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.red_lamp
name: Red Lamp
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 100px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.red_lamp
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.tall_lamp
icon: mdi:floor-lamp
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.tall_lamp
name: Tall Lamp
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 100px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.tall_lamp
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.tv_light
icon: mdi:television
show_name: false
styles:
card:
- margin: '-2px 0 0 15px'
- padding: 4px
- width: 40px
- height: 40px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- color: var(--primary-color)
- type: custom:button-card
tap_action:
action: toggle
hold_action:
action: more-info
entity: light.tv_light
name: TV Light
show_icon: false
show_name: true
show_state: false
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 100px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-light-card
entity: light.tv_light
primary_info: none
secondary_info: none
icon_type: none
use_light_color: true
show_brightness_control: true
card_mod:
style: |
ha-card {
margin-top: -15px;
box-shadow: none;
background: none;
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#office'
bg_blur: 0
hide_backdrop: false
margin_top_mobile: 200px
bg_color: '#efefef'
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: max-content 1fr min-content
grid-template-rows: min-content
grid-template-areas: '"one . two"'
cards:
- type: custom:mushroom-title-card
title: Office
alignment: start
card_mod:
style: |
ha-card {
margin-top: -18px;
margin-left: -10px;
- view_layout:
grid-area: two
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace
icon: mdi:close
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- type: horizontal-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:thermometer
show_icon: true
styles:
card:
- width: 40px
- margin: 10px 0px 0 10px
icon:
- height: 25px
- width: 25px
- padding: 5px
- color: var(--primary-color)
- background: var(--button-background-color)
- border-radius: 99px
- type: custom:button-card
entity: sensor.hallway_switch_device_temperature
name: Temperature
show_icon: false
show_state: true
styles:
card:
- margin: 7px 0 0 0px
name:
- color: var(--primary-color)
- font-size: 16px
- font-weight: bold
- justify-self: start
state:
- color: var(--primary-color)
- font-size: 14px
- font-weight: regular
- justify-self: start
- type: custom:mini-graph-card
entities:
- sensor.hallway_switch_device_temperature
line_color: rgba(255,155,155,1)
line_width: 7
animate: true
show:
name: false
state: false
icon: false
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: var(--card-background-color);
}
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
icon: mdi:water
show_icon: true
styles:
card:
- width: 40px
- margin: 10px 0px 0 10px
icon:
- height: 25px
- width: 25px
- padding: 5px
- color: var(--primary-color)
- background: var(--button-background-color)
- border-radius: 99px
- type: custom:button-card
entity: sensor.everything_presence_one_7e8508_humidity
name: Humidity
show_icon: false
show_state: true
styles:
card:
- margin: 7px 0 0 0px
name:
- color: var(--primary-color)
- font-size: 16px
- font-weight: bold
- justify-self: start
state:
- color: var(--primary-color)
- font-size: 14px
- font-weight: regular
- justify-self: start
- type: custom:mini-graph-card
entities:
- sensor.everything_presence_one_7e8508_humidity
line_color: rgba(81,130,155,0.8)
line_width: 7
animate: true
show:
name: false
state: false
icon: false
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Kodi
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: call-service
service: kodi.call_method
target:
entity_id: media_player.office_kodi
data:
method: VideoLibrary.Scan
name: Update Library
icon: mdi:kodi
show_state: true
styles:
grid:
- grid-template-areas: '"i n" "i s"'
- grid-template-columns: auto
- grid-template-rows: auto
card:
- height: 50px
- width: 180px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
name:
- position: absolute
- bottom: 27%
- left: 27%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
icon:
- position: absolute
- bottom: 0%
- left: 10%
- width: 30px
- color: var(--primary-color)
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#climatebedroom'
bg_color: '#efefef'
margin_top_mobile: 300px
bg_blur: 0
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: custom:gap-card
height: 50
- type: thermostat
entity: climate.wiser_bedroom
name: ' '
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--primary-text-color: var(--primary-color);
--secondary-text-color: var(--primary-color);
--state-climate-heat-color: #D37676;
.more-info {
width: 0;
}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#climatediningroom'
bg_blur: 0
bg_color: '#efefef'
margin_top_mobile: 300px
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: custom:gap-card
height: 50
- type: thermostat
entity: climate.wiser_dining_room
name: ' '
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--primary-text-color: var(--primary-color);
--secondary-text-color: var(--primary-color);
--state-climate-heat-color: #D37676;
.more-info {
width: 0;
}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#climatelivingroom'
bg_blur: 0
bg_color: '#efefef'
margin_top_mobile: 300px
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: custom:gap-card
height: 50
- type: thermostat
entity: climate.wiser_living_room
name: ' '
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--primary-text-color: var(--primary-color);
--secondary-text-color: var(--primary-color);
--state-climate-heat-color: #D37676;
.more-info {
width: 0;
}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#chris'
margin_top_mobile: 350px
bg_color: '#efefef'
bg_blur: 30
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: map
entities:
- entity: person.person
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#kat'
margin_top_mobile: 350px
bg_color: '#efefef'
bg_blur: 30
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: map
entities:
- entity: person.person
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#dad'
margin_top_mobile: 350px
bg_color: '#efefef'
bg_blur: 30
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: map
entities:
- entity: person.person
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#network'
bg_blur: 0
bg_color: '#efefef'
margin_top_mobile: 200px
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: min-content 1fr min-content
grid-template-rows: min-content
grid-template-areas: '"one . two"'
cards:
- type: custom:mushroom-title-card
title: Network
alignment: start
card_mod:
style: |
ha-card {
margin-top: -18px;
margin-left: -10px;
- view_layout:
grid-area: two
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace
icon: mdi:close
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- type: custom:gap-card
height: 25px
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Daily Download Total
- chart_type: bar
period: day
type: statistics-graph
entities:
- sensor.dga4134_2208jcbj3_data_received
days_to_show: 7
stat_types:
- change
hide_legend: true
logarithmic_scale: false
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Internet Speed
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.speedtest_download
name: Download
show_icon: true
show_name: true
show_state: true
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 0px
name:
- position: absolute
- bottom: 45%
- left: 44%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 20%
- left: 44%
- font-size: 15px
- font-weight: 550
- color: rgba(96,114,116,0.7)
icon:
- position: absolute
- bottom: 11%
- left: 2%
- height: 55px
- color: var(--dining-room-green)
- type: custom:button-card
entity: sensor.speedtest_upload
name: Upload
icon: mdi:speedometer-slow
show_icon: true
show_name: true
show_state: true
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 0px
name:
- position: absolute
- bottom: 45%
- left: 44%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 20%
- left: 44%
- font-size: 15px
- font-weight: 550
- color: rgba(96,114,116,0.7)
icon:
- position: absolute
- bottom: 11%
- left: 2%
- height: 55px
- color: var(--bedroom-blue)
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#heating'
bg_blur: 0
hide_backdrop: false
margin_top_mobile: 250px
bg_color: '#efefef'
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: min-content 1fr min-content
grid-template-rows: min-content
grid-template-areas: '"one . two"'
cards:
- type: custom:mushroom-title-card
title: Heating
alignment: start
card_mod:
style: |
ha-card {
margin-top: -18px;
margin-left: -10px;
- view_layout:
grid-area: two
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace
icon: mdi:close
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- type: custom:gap-card
- type: vertical-stack
cards:
- type: custom:gap-card
height: 3
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatebedroom'
entity: climate.wiser_bedroom
icon: mdi:thermometer
show_name: false
styles:
card:
- margin: 0 0 0 15px
- padding: 4px
- width: 35px
- height: 35px
- border-radius: 99px
- box-shadow: none
- background: rgba(50,50,50,0.1)
icon:
- width: 27px
- color: '#607274'
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatebedroom'
entity: sensor.wiser_lts_temperature_bedroom
name: Bedroom
show_icon: false
show_name: true
show_state: true
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 100px
- height: 37px
- box-shadow: none
- background: none
- border-radius: 1px
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: '#607274'
state:
- justify-self: start
- padding-left: 5px
- font-size: 14px
- font-weight: regular
- color: '#607274'
- type: custom:mushroom-climate-card
entity: climate.wiser_bedroom
primary_info: none
secondary_info: none
icon_type: none
show_temperature_control: true
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 16px;
color: rgba(96,114,116,1) !important;
}
#container {
background: {{ 'rgba(255, 155, 155, 0.8)' if state_attr('climate.wiser_bedroom', 'is_heating') else 'rgba(50, 50, 50, 0.09)' }};;
padding: 0px;
}
#container .button:nth-child(1) {
padding-left: 20px;
--card-mod-icon-color: rgba(81,130,155,1);
background: none;
--control-icon-size: 25px;
--card-mod-icon: mdi:arrow-down-bold;
}
#container .button:nth-child(3) {
padding-right: 20px;;
--card-mod-icon-color: rgba(231,41,41,0.6);
background: none;
--control-icon-size: 25px;
--card-mod-icon: mdi:arrow-up-bold;
}
.: |
ha-card {
margin-top: -15px;
background: none;
box-shadow: none;
}
- type: custom:gap-card
height: 3
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatebedroom'
entity: climate.wiser_dining_room
icon: mdi:thermometer
show_name: false
styles:
card:
- margin: 0 0 0 15px
- padding: 4px
- width: 35px
- height: 35px
- border-radius: 99px
- box-shadow: none
- background: rgba(50,50,50,0.1)
icon:
- width: 30px
- color: '#607274'
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatediningroom'
entity: sensor.wiser_lts_temperature_dining_room
name: Dining Room
show_icon: false
show_name: true
show_state: true
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 100px
- height: 37px
- box-shadow: none
- background: none
- border-radius: 1px
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: '#607274'
state:
- justify-self: start
- padding-left: 5px
- font-size: 14px
- font-weight: regular
- color: '#607274'
- type: custom:mushroom-climate-card
entity: climate.wiser_dining_room
primary_info: none
secondary_info: none
icon_type: none
show_temperature_control: true
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 16px;
color: rgba(96,114,116,1) !important;
}
#container {
background: {{ 'rgba(255, 155, 155, 0.8)' if state_attr('climate.wiser_dining_room', 'is_heating') else 'rgba(50, 50, 50, 0.09)' }};;
padding: 0px;
}
#container .button:nth-child(1) {
padding-left: 20px;
--card-mod-icon-color: rgba(81,130,155,1);
background: none;
--control-icon-size: 25px;
--card-mod-icon: mdi:arrow-down-bold;
}
#container .button:nth-child(3) {
padding-right: 20px;;
--card-mod-icon-color: rgba(231,41,41,0.6);
background: none;
--control-icon-size: 25px;
--card-mod-icon: mdi:arrow-up-bold;
}
.: |
ha-card {
margin-top: -15px;
background: none;
box-shadow: none;
}
- type: custom:gap-card
height: 3
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatelivingroom'
entity: climate.wiser_living_room
icon: mdi:thermometer
show_name: false
styles:
card:
- margin: 0 0 0 15px
- padding: 4px
- width: 35px
- height: 35px
- border-radius: 99px
- box-shadow: none
- background: rgba(50,50,50,0.1)
icon:
- width: 30px
- color: '#607274'
- type: custom:button-card
tap_action:
action: navigate
navigation_path: '#climatelivingroom'
entity: sensor.wiser_lts_temperature_living_room
name: Living Room
show_icon: false
show_name: true
show_state: true
styles:
card:
- margin: 0 0 0 0
- padding: 0px
- width: 100px
- height: 37px
- box-shadow: none
- background: none
- border-radius: 1px
name:
- justify-self: start
- padding-left: 5px
- font-size: 16px
- font-weight: bold
- color: '#607274'
state:
- justify-self: start
- padding-left: 5px
- font-size: 14px
- font-weight: regular
- color: '#607274'
- type: custom:mushroom-climate-card
entity: climate.wiser_living_room
primary_info: none
secondary_info: none
icon_type: none
show_temperature_control: true
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 16px;
color: rgba(96,114,116,1) !important;
}
#container {
background: {{ 'rgba(255, 155, 155, 0.8)' if state_attr('climate.wiser_living_room', 'is_heating') else 'rgba(50, 50, 50, 0.09)' }};;
padding: 0px;
}
#container .button:nth-child(1) {
padding-left: 20px;
--card-mod-icon-color: rgba(81,130,155,1);
background: none;
--control-icon-size: 25px;
--card-mod-icon: mdi:arrow-down-bold;
}
#container .button:nth-child(3) {
padding-right: 20px;;
--card-mod-icon-color: rgba(231,41,41,0.6);
background: none;
--control-icon-size: 25px;
--card-mod-icon: mdi:arrow-up-bold;
}
.: |
ha-card {
margin-top: -15px;
background: none;
box-shadow: none;
}
- type: custom:gap-card
- type: custom:scheduler-card
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
include:
- climate
- climate.bedroom
exclude: []
title: false
display_options:
primary_info: '{entity}: {action}'
secondary_info:
- relative-time
icon: entity
show_header_toggle: false
tags: []
discover_existing: true
time_step: 10
sort_by:
- title
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#diningroommedia'
margin_top_mobile: 200px
bg_color: '#efefef'
bg_blur: 30
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace
icon: mdi:close
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(0,0,0,0.1)
icon:
- width: 25px
view_layout:
grid-area: e
- type: custom:mushroom-title-card
title: >-
{{ state_attr('media_player.dining_room_hifi', 'media_artist')
}}
alignment: start
card_mod:
style: |
ha-card {
margin: -15px 0 0 0;
--title-font-weight: 600
view_layout:
grid-area: a
- type: custom:mini-media-player
card_mod:
style: |
:host{
--ha-card-border-radius: 20px;
--mini-media-player-scale: 1.3
}
ha-card {
aspect-ratio: 1/1;
}
entity: media_player.dining_room_hifi
tap_action:
action: navigate
navigation_path: '#lms'
artwork: full-cover
hide:
controls: true
icon: true
volume: true
power: true
name: true
progress: false
title: true
info: true
runtime: false
view_layout:
grid-area: m
- type: custom:mushroom-title-card
card_mod:
style: |
ha-card {
margin-top: -25px;
subtitle: >-
{{ state_attr('media_player.dining_room_hifi',
'media_album_name') }}
alignment: start
view_layout:
grid-area: an
- type: custom:mushroom-title-card
card_mod:
style: |
ha-card {
margin-top: -35px;
--subtitle-font-weight: 600;
subtitle: >-
{{ state_attr('media_player.dining_room_hifi', 'media_title')
}}
alignment: start
view_layout:
grid-area: t
- type: custom:button-card
tap_action:
action: call-service
service: media_player.media_previous_track
target:
entity_id: media_player.dining_room_hifi
icon: mdi:skip-previous
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(0,0,0,0.1)
icon:
- width: 30px
view_layout:
grid-area: c1
- type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.dining_room_hifi
entity: media_player.dining_room_hifi
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(0,0,0,0.1)
icon:
- width: 30px
- color: '#607274'
view_layout:
grid-area: c2
- type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.dining_room_hifi
icon: mdi:skip-next
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(0,0,0,0.1)
icon:
- width: 30px
view_layout:
grid-area: c3
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id: media_player.dining_room_hifi
icon: mdi:volume-minus
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(0,0,0,0.1)
icon:
- width: 30px
view_layout:
grid-area: c4
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id: media_player.dining_room_hifi
icon: mdi:volume-plus
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(0,0,0,0.1)
icon:
- width: 30px
view_layout:
grid-area: c5
layout:
grid-template-columns: 0.25fr 1fr 1fr 1fr 1fr 1fr
grid-template-rows: min-content min-content min-content min-content min-content
grid-template-areas: |
"a a a a a e"
"m m m m m m"
"an an an an an an"
"t t t t t t"
". c1 c2 c3 c4 c5"
- type: vertical-stack
cards:
- type: conditional
conditions:
- condition: state
entity: media_player.shield
state: playing
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#livingroommedia'
margin_top_mobile: 100px
bg_color: '#efefef'
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
margin: 10px
hide_backdrop: false
shadow_opacity: 0
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-title-card
title: >-
{{ state_attr('media_player.shield',
'media_title').split(' - ')[0] }}
card_mod:
style: |
ha-card {
margin: -20px 0 -20px 0;
--title-font-weight: 600;
alignment: start
view_layout:
grid-area: a
- type: custom:config-template-card
variables:
large_poster: states['sensor.large_stremio_poster'].state
entities:
- sensor.large_stremio_poster
card:
type: custom:button-card
entity: media_player.shield
show_name: false
show_entity_picture: true
entity_picture: ${large_poster}
styles:
card:
- background: none
- box-shadow: none
- border-radius: 0px
entity_picture:
- width: 100%
- height: 550px
- border-radius: 20px
view_layout:
grid-area: m
- type: custom:mini-media-player
entity: media_player.shield
artwork: none
hide:
controls: true
icon: true
volume: true
power: true
name: true
progress: false
title: true
info: true
runtime: false
runtime_remaining: true
card_mod:
style: |
:host{
--ha-card-background: linear-gradient(0deg, rgba(255,255,255,0.6), rgba(0,0,0,0) 15%);
--ha-card-box-shadow: none;
--ha-card-border-radius: 20px;
--mini-media-player-scale: 1.6;
}
ha-card {
margin-top: 14px;
height: 550px;
width: 100%;
}
view_layout:
grid-area: m
- type: custom:button-card
tap_action:
action: call-service
service: media_player.media_previous_track
target:
entity_id: media_player.shield
icon: mdi:skip-previous
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
view_layout:
grid-area: c1
- type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.shield
entity: media_player.shield
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: '#607274'
view_layout:
grid-area: c2
- type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.shield
icon: mdi:skip-next
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
view_layout:
grid-area: c3
- type: custom:button-card
entity: media_player.shield
tap_action:
action: toggle
icon: mdi:power
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 30px
- color: '#607274'
view_layout:
grid-area: c4
- type: custom:config-template-card
variables:
imdb_url: states['sensor.imdb_url'].state
entities:
- sensor.imdb_url
card:
type: custom:button-card
entity: sensor.imdb_url
icon: mdi:magnify
show_name: false
tap_action:
action: url
url_path: ${imdb_url}
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- color: '#607274'
view_layout:
grid-area: c5
layout:
grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 0.5fr
grid-template-rows: min-content min-content min-content
grid-template-areas: |
"a a a a a a a"
"m m m m m m m"
". c1 c2 c3 c4 c5 ."
- type: conditional
conditions:
- condition: state
entity: media_player.living_room_hifi
state_not: 'off'
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#livingroommedia'
margin_top_mobile: 200px
bg_color: '#efefef'
bg_blur: 30
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace
icon: mdi:close
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(0,0,0,0.1)
icon:
- width: 25px
view_layout:
grid-area: e
- type: custom:mushroom-title-card
title: >-
{{ state_attr('media_player.living_room_hifi',
'media_artist') }}
alignment: start
card_mod:
style: |
ha-card {
margin: -15px 0 0 0;
--title-font-weight: 600
view_layout:
grid-area: a
- type: custom:mini-media-player
card_mod:
style: |
:host{
--ha-card-border-radius: 20px;
--mini-media-player-scale: 1.3
}
ha-card {
aspect-ratio: 1/1;
}
entity: media_player.living_room_hifi
tap_action:
action: navigate
navigation_path: '#lms'
artwork: full-cover
hide:
controls: true
icon: true
volume: true
power: true
name: true
progress: false
title: true
info: true
runtime: false
view_layout:
grid-area: m
- type: custom:mushroom-title-card
card_mod:
style: |
ha-card {
margin-top: -25px;
subtitle: >-
{{ state_attr('media_player.living_room_hifi',
'media_album_name') }}
alignment: start
view_layout:
grid-area: an
- type: custom:mushroom-title-card
card_mod:
style: |
ha-card {
margin-top: -35px;
--subtitle-font-weight: 600;
subtitle: >-
{{ state_attr('media_player.living_room_hifi',
'media_title') }}
alignment: start
view_layout:
grid-area: t
- type: custom:button-card
tap_action:
action: call-service
service: media_player.media_previous_track
target:
entity_id: media_player.dining_room_hifi
icon: mdi:skip-previous
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(0,0,0,0.1)
icon:
- width: 30px
view_layout:
grid-area: c1
- type: custom:button-card
tap_action:
action: call-service
service: media_player.media_play_pause
target:
entity_id: media_player.living_room_hifi
entity: media_player.living_room_hifi
icon: mdi:play
state:
- value: playing
icon: mdi:pause
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(0,0,0,0.1)
icon:
- width: 30px
- color: '#607274'
view_layout:
grid-area: c2
- type: custom:button-card
tap_action:
action: call-service
service: media_player.media_next_track
target:
entity_id: media_player.living_room_hifi
icon: mdi:skip-next
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(0,0,0,0.1)
icon:
- width: 30px
view_layout:
grid-area: c3
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_down
target:
entity_id: media_player.living_room_hifi
icon: mdi:volume-minus
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(0,0,0,0.1)
icon:
- width: 30px
view_layout:
grid-area: c4
- type: custom:button-card
tap_action:
action: call-service
service: media_player.volume_up
target:
entity_id: media_player.living_room_hifi
icon: mdi:volume-plus
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(0,0,0,0.1)
icon:
- width: 30px
view_layout:
grid-area: c5
layout:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-rows: >-
min-content min-content min-content min-content
min-content
grid-template-areas: |
"a a a a a a e"
"m m m m m m m"
"an an an an an an an"
"t t t t t t t"
". c1 c2 c3 c4 c5 ."
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#shopping'
bg_blur: 0
bg_color: '#efefef'
margin_top_mobile: 20px
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: max-content 1fr min-content
grid-template-rows: min-content
grid-template-areas: '"one . two"'
cards:
- type: custom:mushroom-title-card
title: Shopping List
card_mod:
style: |
ha-card {
margin-top: -18px;
margin-left: -10px;
- view_layout:
grid-area: two
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace
icon: mdi:close
color: var(--primary-color)
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: var(--button-background-color)
icon:
- width: 25px
- type: todo-list
entity: todo.shopping_list
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#volume'
bg_blur: 0
hide_backdrop: false
margin_top_mobile: 100px
bg_color: '#efefef'
styles: |
#root {
background-color: var(--primary-background-color) !important;
}
.pop-up > :first-child {
display: none !important;
}
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: min-content 1fr min-content
grid-template-rows: min-content
grid-template-areas: '"one . two"'
cards:
- type: custom:mushroom-title-card
title: Volume
alignment: start
card_mod:
style: |
ha-card {
margin-top: -18px;
margin-left: -10px;
- view_layout:
grid-area: two
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace
icon: mdi:close
color: '#607274'
show_name: false
styles:
card:
- width: 40px
- height: 40px
- border-radius: 99px
- box-shadow: none
- background: rgba(96,114,116,0.2)
icon:
- width: 25px
- type: custom:gap-card
height: 100px
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Multi-Room
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: media_player.bedroom_hifi
name: Bedroom
show_icon: false
show_name: true
show_state: false
state:
- value: 'off'
styles:
name:
- color: var(--button-background-color)
styles:
card:
- margin: 0 -10px 0 0
- padding: 0px
- width: 120px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: end
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-media-player-card
entity: media_player.bedroom_hifi
primary_info: none
secondary_info: none
icon_type: none
volume_controls:
- volume_set
card_mod:
style:
mushroom-media-player-volume-control$:
mushroom-slider$: >
.slider {
height: 30px !important;
--main-color: var(--primary-color) !important;
--bg-color: var(--button-background-color)
!important;
.: |
ha-card {
margin-top: 8px;
background: none;
box-shadow: none;
height: 30px !important;
}
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: media_player.all_speakers
name: All Speakers
show_icon: false
show_name: true
show_state: false
state:
- value: 'off'
styles:
name:
- color: var(--button-background-color)
styles:
card:
- margin: 0 -10px 0 0
- padding: 0px
- width: 120px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: end
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-media-player-card
entity: media_player.all_speakers
primary_info: none
secondary_info: none
icon_type: none
volume_controls:
- volume_set
card_mod:
style:
mushroom-media-player-volume-control$:
mushroom-slider$: >
.slider {
height: 30px !important;
--main-color: var(--primary-color) !important;
--bg-color: var(--button-background-color)
!important;
.: |
ha-card {
margin-top: 8px;
background: none;
box-shadow: none;
height: 30px !important;
}
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: media_player.dining_room_hifi
name: Dining Room
show_icon: false
show_name: true
show_state: false
state:
- value: 'off'
styles:
name:
- color: var(--button-background-color)
styles:
card:
- margin: 0 -10px 0 0
- padding: 0px
- width: 120px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: end
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-media-player-card
entity: media_player.dining_room_hifi
primary_info: none
secondary_info: none
icon_type: none
volume_controls:
- volume_set
card_mod:
style:
mushroom-media-player-volume-control$:
mushroom-slider$: >
.slider {
height: 30px !important;
--main-color: var(--primary-color) !important;
--bg-color: var(--button-background-color)
!important;
.: |
ha-card {
margin-top: 8px;
background: none;
box-shadow: none;
height: 30px !important;
}
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: media_player.living_room_hifi
name: Living Room
show_icon: false
show_name: true
show_state: false
state:
- value: 'off'
styles:
name:
- color: var(--button-background-color)
styles:
card:
- margin: 0 -10px 0 0
- padding: 0px
- width: 120px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: end
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-media-player-card
entity: media_player.living_room_hifi
primary_info: none
secondary_info: none
icon_type: none
volume_controls:
- volume_set
card_mod:
style:
mushroom-media-player-volume-control$:
mushroom-slider$: >
.slider {
height: 30px !important;
--main-color: var(--primary-color) !important;
--bg-color: var(--button-background-color)
!important;
.: |
ha-card {
margin-top: 8px;
background: none;
box-shadow: none;
height: 30px !important;
}
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: media_player.kitchen_speaker
name: Kitchen
show_icon: false
show_name: true
show_state: false
state:
- value: 'off'
styles:
name:
- color: var(--button-background-color)
styles:
card:
- margin: 0 -10px 0 0
- padding: 0px
- width: 120px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: end
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-media-player-card
entity: media_player.kitchen_speaker
primary_info: none
secondary_info: none
icon_type: none
volume_controls:
- volume_set
card_mod:
style:
mushroom-media-player-volume-control$:
mushroom-slider$: >
.slider {
height: 30px !important;
--main-color: var(--primary-color) !important;
--bg-color: var(--button-background-color)
!important;
.: |
ha-card {
margin-top: 8px;
background: none;
box-shadow: none;
height: 30px !important;
}
- type: custom:mushroom-title-card
title: ''
subtitle: TV
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.amplifier
name: Amplifier
show_icon: false
show_name: true
show_state: false
state:
- value: 'off'
styles:
name:
- color: var(--button-background-color)
styles:
card:
- margin: 0 -10px 0 0
- padding: 0px
- width: 120px
- height: 37px
- box-shadow: none
- background: none
name:
- justify-self: end
- font-size: 16px
- font-weight: bold
- color: var(--primary-color)
- type: custom:mushroom-media-player-card
entity: media_player.denon_avr_3310
primary_info: none
secondary_info: none
icon_type: none
volume_controls:
- volume_set
card_mod:
style:
mushroom-media-player-volume-control$:
mushroom-slider$: >
.slider {
height: 30px !important;
--main-color: var(--primary-color) !important;
--bg-color: var(--button-background-color)
!important;
.: |
ha-card {
margin-top: 8px;
background: none;
box-shadow: none;
height: 30px !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment