I might need to start again, but a while ago I found a really slick and compact room card which I copied the code from and forgot about until now.
None of the entities / icons are displaying at the bottom, is there something obvious I’m missing here? (I’m a coding newb)
type: custom:vertical-stack-in-card
style: |
ha-card {
margin-left: 6px;
margin-right: -2px;
border-radius: 14px 5px 5px 5px !important;
margin-bottom: -4px !important;
border-color: rgb(0,0,0,0.05);
border-width: 2px;
}
cards:
- type: custom:mushroom-template-card
entity: group.lights_all_livingroom
icon: phu:rooms-living
badge_icon: >
{% if is_state(config.entity,'on') %} mdi:numeric-{{
states('group.lights_all_livingroom') }} {% endif %}
badge_color: transparent
icon_color: '{{ ''orange'' if is_state(config.entity,''on'') }}'
primary: Living Room
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.sequence
data:
sequence:
- service: input_select.select_option
data:
entity_id: input_select.xlivingdropdown
option: none
- service: browser_mod.navigate
data:
path: /lovelace/livingroom
hold_action:
action: call-service
service: mqtt.publish
service_data:
topic: zigbee2mqtt/Living Room/set
payload_template: |
{% if is_state('light.living','on') %}
{{ "off" }}
{% else %}
{{ "on" }}
{% endif %}
double_tap_action:
action: toggle
card_mod:
style: |
ha-card:active mushroom-shape-icon {
display: flex;
animation: clip 2.5s;
background-color: var(--amber-color);
transition: all 2s;
}
mushroom-shape-icon {
border-radius: 50px;
}
mushroom-badge-icon {
--main-color: rgba(var(--rgb-amber),0.5) !important;
--icon-color: rgba(var(--rgb-red),0.5) !important;
border-radius: 50px !important;
margin-right: -5px;
box-shadow: 0.5px 0.5px 0.5px 0.5px var(--grey-color);
}
@keyframes clip {
0% { box-shadow: 0 0 1px 1px var(--yellow-color) inset; }
50% { box-shadow: 0 0 5px 15px transparent inset; }
51% { box-shadow: 0 0 1px 1px var(--amber-color); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
:host { border-width: 0px !important;
}
mushroom-card {
box-shadow: 1px 1px 1px rgb(0,0,0,0.0);
}
mushroom-state-info {
align-self: end !important;
text-shadow: 1px 1px 1px rgb(125,125,125,0.1);
margin-top: -12px;
}
ha-card {
--card-primary-font-size: 1.4em;
--card-primary-font-weight: 400;
{{ 'background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,0,0.1) 100%);' if is_state(config.entity, 'on') }}
--icon-size: 1.7em !important;
--icon-symbol-size: 1.3em !important;
--badge-icon-size: 1.4em;
padding-bottom: 0 !important;
align-text: end;
}
- type: entities
entities:
- type: custom:paper-buttons-row
extra_styles: |
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
@keyframes flash {
20% { opacity: 0.5 ;}
100% { opacity: 1 ;}
}
buttons:
- entity: sensor.living_room_temperature
name: >
{% if is_state('sensor.living_room_temperature','unavailable') %}
{{ "00°c" }}{% else %}{{ states('sensor.living_room_temperature')
| round }}°c{% endif %}
icon: false
styles:
button:
font-size: 13px
font-weight: 600
margin: 0em -0.5px 0em -0.4em
align-text: left
padding-left: 0px
name:
color: rgb(125,125,125,0.8)
state_styles:
unavailable:
name:
color: rgb(0,0,0,0)
tap_action: none
hold_action: none
double_tap_action: none
- entity: media_player.samsung_q70
name: false
icon: mdi:television-classic-off
styles:
icon:
color: rgb(125,125,125,0.3)
'--mdc-icon-size': 20px
margin: 0px -0.5px
padding: 0px
state_styles:
'off':
icon:
color: rgb(125,125,125,0.8)
'on':
icon:
color: orange
state_icons:
'on': mdi:television-classic
tap_action:
action: call-service
service: browser_mod.sequence
service_data:
sequence:
- service: input_select.select_option
data:
entity_id: input_select.xlivingdropdown
option: media
- service: browser_mod.navigate
data:
path: /lovelace/livingroom
hold_action: none
double_tap_action: none
- entity: media_player.pioneer
name: false
icon: mdi:audio-video-off
styles:
icon:
color: rgb(125,125,125,0.3)
'--mdc-icon-size': 20px
margin: 0px -0.5px
padding: 0px
state_styles:
'off':
icon:
color: rgb(125,125,125,0.8)
'on':
icon:
color: orange
state_icons:
'on': mdi:audio-video
tap_action:
action: call-service
service: browser_mod.sequence
service_data:
sequence:
- service: input_select.select_option
data:
entity_id: input_select.xlivingdropdown
option: media
- service: browser_mod.navigate
data:
path: /lovelace/livingroom
hold_action: none
double_tap_action: none
- entity: binary_sensor.motion_sensor_home_security_motion_detection_4
name: false
icon: mdi:circle
styles:
icon:
color: rgb(125,125,125,0.3)
'--mdc-icon-size': 20px
margin: 0px -0.5px
padding: 0px
animation: >-
{% if is_state('binary_sensor.delay_motion_living','on') and
is_state('binary_sensor.living_motion_group','on') %} clip 2s
linear infinite {% endif %}
state_styles:
'on':
icon:
color: orange
'off':
icon:
color: rgb(125,125,125,0.8)
state_icons:
'off': mdi:motion-sensor-off
'on': mdi:motion-sensor
tap_action:
action: call-service
service: browser_mod.sequence
service_data:
sequence:
- service: input_select.select_option
data:
entity_id: input_select.xlivingdropdown
option: secure
- service: browser_mod.navigate
data:
path: /lovelace/livingroom
hold_action: none
double_tap_action: none
- entity: binary_sensor.delay_door_living
name: false
icon: |
{% if is_state('binary_sensor.living_door_door_open','on') %}
mdi:door-open
{% else %}
mdi:door-closed
{% endif %}
styles:
icon:
color: rgb(125,125,125,0.3)
'--mdc-icon-size': 20px
margin: 0px -0.5px
padding: 0px
animation: >-
{% if is_state('binary_sensor.delay_door_living','on') and
is_state('binary_sensor.living_door_door_open','on') %} flash
2s linear infinite {% endif %}
state_styles:
'off':
icon:
color: rgb(125,125,125,0.8)
'on':
icon:
color: orange
tap_action:
action: call-service
service: browser_mod.sequence
service_data:
sequence:
- service: input_select.select_option
data:
entity_id: input_select.xlivingdropdown
option: secure
- service: browser_mod.navigate
data:
path: /lovelace/livingroom
hold_action: none
double_tap_action: none
- entity: light.living_lights_smart
name: false
icon: mdi:lightbulb-question-outline
styles:
button:
padding-right: 0em
margin-right: 0em
icon:
color: rgb(125,125,125,0.3)
'--mdc-icon-size': 20px
padding: 0em
margin: 0px -0.4em 0px -0.5px
state_styles:
'off':
icon:
color: rgb(125,125,125,0.8)
'on':
icon:
color: orange
state_icons:
'on': mdi:lightbulb
'off': mdi:lightbulb-outline
tap_action:
action: call-service
service: browser_mod.sequence
service_data:
sequence:
- service: input_select.select_option
data:
entity_id: input_select.xlivingdropdown
option: lights
- service: browser_mod.navigate
data:
path: /lovelace/livingroom
hold_action: none
double_tap_action: none
styles:
justify-content: space-between
margin-top: '-1.2em'
margin-bottom: '-1.1em'
padding-left: 0em
padding-right: 0em
margin-left: 0em
margin-right: 0em
style: 'ha-card {background: none; !important;}'
