That’s for the color when last changed is less then 1h:
state:
- operator: template
value: >
var last_changed = new Date(entity.last_changed);
var now = new Date();
return (now - last_changed) / 1000 / 60 / 60 <= 1
Use layout: icon_name_state2nd
It is indeed a vertical-stack-in-card, with lots of stuff inside:
- type: vertical-stack
cards:
- type: custom:button-card
name: Alexa
styles: *card-header-style
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_select.alexa_source
color_type: card
name: Webradio
icon: mdi:radio
layout: icon_name
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.alexa_source
option: 'Webradio'
styles:
card:
- font-size: 0.8em
- font-weight: bold
state:
- value: 'Webradio'
color: white
name: ▾ Webradio ▾
- operator: default
color: var(--paper-card-background-color)
- type: custom:button-card
entity: input_select.alexa_source
color_type: card
name: Spotify
icon: mdi:spotify
layout: icon_name
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.alexa_source
option: 'Spotify'
styles:
card:
- font-size: 0.8em
- font-weight: bold
state:
- value: 'Spotify'
color: white
name: ▾ Spotify ▾
- operator: default
color: var(--paper-card-background-color)
- type: custom:button-card
entity: input_select.alexa_source
color_type: card
name: Predefined
icon: mdi:format-list-bulleted-square
layout: icon_name
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.alexa_source
option: 'Predefined'
styles:
card:
- font-size: 0.8em
- font-weight: bold
state:
- value: 'Predefined'
color: white
name: ▾ Predefined ▾
- operator: default
color: var(--paper-card-background-color)
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_select.alexa_destination
name: Office
icon: mdi:amazon-alexa
layout: icon_name
size: 20px
styles:
card:
- font-size: 0.8em
- font-weight: bold
- height: 40px
grid:
- grid-template-columns: min-content min-content
- width: min-content
- margin: auto
- grid-gap: 0px 10px
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.alexa_destination
option: 'Office'
state:
- value: 'Office'
color: var(--paper-item-icon-active-color)
styles:
name:
- color: var(--paper-item-icon-active-color)
- operator: default
color: var(--primary-text-color)
- type: custom:button-card
entity: input_select.alexa_destination
name: Bathroom
icon: mdi:amazon-alexa
layout: icon_name
size: 20px
styles:
card:
- font-size: 0.8em
- font-weight: bold
- height: 40px
grid:
- grid-template-columns: min-content min-content
- width: min-content
- margin: auto
- grid-gap: 0px 10px
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.alexa_destination
option: 'Bathroom'
state:
- value: 'Bathroom'
color: var(--paper-item-icon-active-color)
styles:
name:
- color: var(--paper-item-icon-active-color)
- operator: default
color: var(--primary-text-color)
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_select.alexa_source
state: Predefined
card:
type: custom:card-modder
style:
padding: 5px 16px
card:
type: entities
show_header_toggle: false
entities:
- input_select.predefined_music
- type: conditional
conditions:
- entity: input_select.alexa_source
state_not: Predefined
card:
type: custom:card-modder
style:
padding: 5px 16px
card:
type: entities
show_header_toggle: false
entities:
- input_text.alexa_music_input
- type: custom:button-card
icon: mdi:play
show_name: false
styles:
card:
- width: 60px
- height: 100%
tap_action:
action: call-service
service: script.alexa_play
service_data:
useless: useless
It’s a vertical stack in card with 6 buttons inside:
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.player1_power
icon: mdi:disc-player
name: Player 1
size: 30%
lock: true
styles:
card:
- font-size: 0.8em
- height: 100%
- type: vertical-stack
cards:
- type: custom:button-card
entity: input_select.subwoofer_preset
name: Subwoofer
layout: icon_name
size: 20px
tap_action:
action: none
show_icon: true
styles:
grid:
- grid-template-columns: min-content min-content
- width: min-content
- margin: auto
- grid-gap: 0px 10px
card:
- font-size: 0.8em
- type: custom:button-card
entity: input_select.subwoofer_preset
name: 'OFF'
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.subwoofer_preset
option: 'Off'
styles:
card:
- font-size: 0.8em
- font-weight: bold
state:
- value: 'Off'
styles:
name:
- color: var(--paper-item-icon-active-color)
- type: custom:button-card
entity: input_select.subwoofer_preset
name: 'LFC'
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.subwoofer_preset
option: 'LFC'
styles:
card:
- font-size: 0.8em
- font-weight: bold
state:
- value: 'LFC'
styles:
name:
- color: var(--paper-item-icon-active-color)
- type: custom:button-card
entity: input_select.subwoofer_preset
name: 'LINE-IN'
show_icon: false
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.subwoofer_preset
option: 'Line-In'
styles:
card:
- font-size: 0.8em
- font-weight: bold
state:
- value: 'Line-In'
styles:
name:
- color: var(--paper-item-icon-active-color)
- type: custom:button-card
entity: switch.player2_power
icon: mdi:disc-player
name: Player 2
size: 30%
lock: true
styles:
card:
- font-size: 0.8em
- height: 100%
Before the weekend so that you have time to play with 