views:
- type: sections
max_columns: 4
title: Main
path: main-home
icon: mdi:home
sections:
- type: grid
cards:
- type: custom:stack-in-card
mode: vertical
keep:
outer_padding: false
margin: true
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: >-
sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1
icon_color: '{{states(''sensor.livingroom_temp_color_no_rgb'')}}'
icon: mdi:thermometer
use_entity_picture: true
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: more-info
content: >-
{% if
is_state('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1','unavailable')
%}
-
{% elif
is_state('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1','unknown')
%}
-
{% else %}
{{states('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1')}}°
{% endif %}
- type: template
entity: >-
sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2
icon_color: light-blue
icon: mdi:water-percent
name: ''
use_entity_picture: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
content: >-
{% if
is_state('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2','unavailable')
%}
-
{% else %}
{{states('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2')}}%
{% endif %}
- type: template
entity: sensor.xiaomi_cn_2005161482_va3_hcho_density_p_3_11
icon_color: light-green
icon: mdi:air-filter
name: ''
use_entity_picture: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
content: >-
{% if
is_state('sensor.xiaomi_cn_2005161482_va3_hcho_density_p_3_11','unavailable')
%}
-
{% else %}
{{states('sensor.xiaomi_cn_2005161482_va3_hcho_density_p_3_11')}}%
{% endif %}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
icon: mdi:lightbulb-group
content: |-
{% if is_state('sensor.lights_of_count','0') %}
{% else %}
{{states('sensor.lights_of_count')}}
{% endif %}
icon_color: |-
{% set state = states('sensor.lights_of_count')|float %}
{% if state <= 0 %} grey
{% else %} amber
{% endif %}
hold_action:
action: none
tap_action:
action: none
entity: sensor.lights_of_count
- type: template
double_tap_action:
action: none
icon: mdi:air-conditioner
content: |-
{% if is_state('sensor.aircondition_of_count','0') %}
{% else %}
{{states('sensor.aircondition_of_count')}}
{% endif %}
icon_color: >-
{% set state =
states('sensor.aircondition_of_count')|float %}
{% if state <= 0 %} grey
{% else %} amber
{% endif %}
hold_action:
action: none
tap_action:
action: none
entity: sensor.aircondition_of_count
- type: template
double_tap_action:
action: none
icon: mdi:water
content: |-
{% if is_state('sensor.water_damage_count','0') %}
{% else %}
{{states('sensor.water_damage_count')}}
{% endif %}
icon_color: >-
{% set state = states('sensor.water_damage_count')|float
%}
{% if state <= 0 %} grey
{% else %} blue
{% endif %}
hold_action:
action: none
tap_action:
action: none
entity: sensor.water_damage_count
alignment: center
- type: custom:swipe-card
mode: vertical
keep:
outer_padding: false
margin: true
box_shadow: false
background: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card{
box-shadow: none;
}
entity: input_boolean.on_state
double_tap_action:
action: none
icon: mdi:home
icon_color: green
layout: vertical
hold_action:
action: none
tap_action:
action: navigate
navigation_path: main-home
primary_info: none
secondary_info: name
name: 首页
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card{
box-shadow: none;
}
entity: switch.cuco_cn_2006579195_v3_on_p_2_1
icon: mdi:server
icon_color: light-blue
layout: vertical
primary_info: none
secondary_info: name
tap_action:
action: navigate
navigation_path: home-server
hold_action:
action: none
double_tap_action:
action: none
name: 机房
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card{
box-shadow: none;
}
entity: light.quan_wu_zhao_ming
icon_color: yellow
secondary_info: name
layout: vertical
name: Lights
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: more-info
primary_info: none
icon: mdi:lamps
card_mod:
style: |
ha-card {
background-color: rgba(255, 255, 255, 0) !important;
box-shadow: none !important;
padding: 2px 0px 2px 0px;
}
column_span: 4
- type: grid
cards:
- type: custom:mushroom-title-card
title: Light
- type: custom:button-card
entity: light.quan_wu_zhao_ming
show_icon: true
show_name: true
show_state: true
show_label: true
name: 灯光状态
icon: mdi:lightbulb-group
state_display: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
const percentage = allLeafLights.length > 0 ? Math.round((onLights.length / allLeafLights.length) * 100) : 0;
return `${percentage}%`;
]]]
label: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
if (onLights.length === 0) {
return '所有灯光已关闭';
} else {
return `${onLights.length}/${allLeafLights.length} 盏灯亮着`;
}
]]]
styles:
card:
- height: 80px
- background: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
const percentage = allLeafLights.length > 0 ? (onLights.length / allLeafLights.length) : 0;
// 胶囊形状背景
if (percentage === 0) {
// 全关状态 - 深色胶囊
return 'linear-gradient(145deg, rgba(35,45,65,0.95), rgba(25,35,55,0.9))';
} else {
// 进度条效果 - 亮色表示开启比例
const progressPercent = percentage * 100;
return `
linear-gradient(to right,
rgba(255,210,60,0.8) 0%,
rgba(255,190,40,0.9) ${progressPercent}%,
rgba(50,70,110,0.3) ${progressPercent}%,
rgba(35,55,95,0.4) 100%
)
`;
}
]]]
- border-radius: 45px !important
- box-shadow: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
const percentage = allLeafLights.length > 0 ? (onLights.length / allLeafLights.length) : 0;
if (percentage === 0) {
return 'inset 3px 3px 6px rgba(0,0,0,0.4), inset -3px -3px 6px rgba(80,100,140,0.2), 0 2px 8px rgba(0,0,0,0.3)';
} else {
return 'inset 2px 2px 4px rgba(0,0,0,0.3), inset -2px -2px 4px rgba(255,255,255,0.1), 0 6px 20px rgba(255,190,40,0.4)';
}
]]]
- border: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
if (onLights.length === 0) {
return '1px solid rgba(70,90,130,0.4)';
} else {
return '1px solid rgba(255,190,40,0.6)';
}
]]]
- padding: 12px 20px
- display: flex
- align-items: center
- position: relative
- overflow: hidden
grid:
- grid-template-areas: '"icon name state" "icon label label"'
- grid-template-columns: min-content 1fr min-content
- grid-template-rows: 1fr 1fr
- gap: 0px 12px
icon:
- width: 50px
- height: 50px
- grid-area: icon
- color: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
if (onLights.length === 0) {
return 'rgba(140,160,200,0.7)';
} else {
return 'rgba(255,220,60,1)';
}
]]]
- filter: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
if (onLights.length === 0) {
return 'none';
} else {
return 'drop-shadow(0 0 12px rgba(255,220,60,0.8))';
}
]]]
name:
- font-size: 15px
- font-weight: 700
- color: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
if (onLights.length === 0) {
return 'rgba(180,200,240,0.9)';
} else {
return 'rgba(255,255,255,1)';
}
]]]
- grid-area: name
- align-self: end
- justify-self: start
- text-shadow: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
if (onLights.length === 0) {
return 'none';
} else {
return '0 1px 3px rgba(0,0,0,0.5)';
}
]]]
state:
- font-size: 22px
- font-weight: bold
- color: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
if (onLights.length === 0) {
return 'rgba(160,180,220,0.9)';
} else {
return 'rgba(255,240,150,1)';
}
]]]
- grid-area: state
- align-self: end
- justify-self: end
- text-shadow: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
if (onLights.length === 0) {
return 'none';
} else {
return '0 0 12px rgba(255,220,60,0.7)';
}
]]]
label:
- font-size: 13px
- font-weight: 600
- color: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
if (onLights.length === 0) {
return 'rgba(160,180,220,0.9)';
} else {
return 'rgba(255,255,240,1)';
}
]]]
- grid-area: label
- align-self: start
- justify-self: start
- margin-top: 2px
- text-shadow: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
if (onLights.length === 0) {
return 'none';
} else {
return '0 1px 2px rgba(0,0,0,0.4)';
}
]]]
custom_fields:
progress_indicator: |
[[[
const getAllLightEntities = (entityId) => {
const entityState = states[entityId];
if (!entityState) return [];
if (entityState.attributes && entityState.attributes.entity_id) {
const childEntities = entityState.attributes.entity_id;
let allLights = [];
childEntities.forEach(childId => {
allLights = allLights.concat(getAllLightEntities(childId));
});
return allLights;
} else {
return [entityId];
}
};
const allLeafLights = getAllLightEntities('light.quan_wu_zhao_ming');
const onLights = allLeafLights.filter(eid => states[eid] && states[eid].state === 'on');
const percentage = allLeafLights.length > 0 ? (onLights.length / allLeafLights.length) : 0;
if (percentage === 0) {
return '';
} else {
const progressWidth = percentage * 100;
return `
`;
}
]]]
styles_css: |
ha-card {
position: relative;
overflow: hidden;
}
.custom-fields {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
icon: mdi:ceiling-light-multiple
card_layout: large
rows: '0.8'
- type: custom:mushroom-light-card
entity: light.pmfbj_cn_1187112198_xsx340_s_2
name: 客厅主灯
use_light_color: false
icon: mdi:ceiling-light-multiple
icon_color: accent
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
- type: custom:mushroom-light-card
entity: light.shhf_cn_1129134246_sflt11_s_2_light
name: 餐桌
icon_color: orange
fill_container: true
show_brightness_control: true
use_light_color: false
show_color_temp_control: true
show_color_control: false
icon: mdi:ceiling-fan-light
primary_info: name
grid_options:
columns: 6
rows: 2
- type: custom:mushroom-light-card
entity: light.pmfbj_cn_1186735998_xsx340_s_2
name: 主卧
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
- type: custom:mushroom-light-card
entity: light.pmfbj_cn_1186772227_xsx340_s_2
name: 次卧灯
use_light_color: false
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
collapsible_controls: false
- type: custom:mushroom-light-card
entity: light.opple_cn_2005385416_moat_s_2_light
name: 阳台灯
icon: mdi:light-recessed
icon_color: accent
fill_container: true
show_brightness_control: true
show_color_temp_control: true
- type: custom:mushroom-light-card
entity: light.pmfbj_cn_1186744390_xsx340_s_2
name: 书房灯
icon: mdi:ceiling-light
icon_color: light-blue
fill_container: true
show_brightness_control: true
show_color_temp_control: true
- type: custom:mushroom-light-card
entity: light.panpan_cn_876603548_y18_s_3_light
icon: ''
show_brightness_control: false
show_color_temp_control: false
use_light_color: false
show_color_control: false
grid_options:
columns: 12
rows: 2
column_span: 1
- type: grid
cards:
- type: custom:mushroom-title-card
title: 空调
- type: custom:vertical-stack-in-card
cards:
- type: thermostat
entity: climate.qdhkl_cn_2113954983_b19c
show_current_as_primary: false
features:
- type: climate-hvac-modes
grid_options:
columns: 12
rows: 6
theme: Mushroom Shadow
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.qdhkl_cn_2113954983_b19c
icon: mdi:power
alignment: end
card_mod:
style: >
ha-card {
/* ================================ */
/* USER CONFIG HERE */
/* ================================ */
/* 1. ACTIVE STATES */
{% set active_states = ['on'] %}
/* 2. POSITIONING */
{% set pos_y = 'top' %}
{% set pos_y_val = '8px' %}
{% set pos_x = 'right' %}
{% set pos_x_val = '28px' %}
/* 3. SIZING */
{% set icon_size = '25px' %}
{% set text_size = '13px' %}
{% set badge_height = '6px' %}
{% set border_radius = '6px' %}
{% set border_thickness = '0.5px' %}
/* 4. COLORS (HEX, RGB, Color Name) */
/* --- Active --- */
{% set active_bg = '#b86836' %}
{% set active_icon = '#d4f228' %}
{% set active_text = 'white' %}
{% set active_border = 'transparent' %}
{% set active_opacity = 0.3 %}
/* --- Inactive --- */
{% set inactive_bg = 'grey' %}
{% set inactive_icon = 'grey' %}
{% set inactive_text = 'darkgrey' %}
{% set inactive_border = 'transparent' %}
{% set inactive_opacity = 0.3 %}
/* 5. ANIMATIONS */
/* Options: pulse, shake, wobble */
/* flash, heartbeat, swing, vibrate */
{% set anim_type = 'pulse' %}
/* true = 24/7, false = only when active */
{% set always_animate = false %}
{% set anim_intensity_sec = 0.5 %} /* 0.1 to 1 */
{% set anim_duration_sec = 1 %}
{% set anim_delay_sec = 1 %}
/* ================================== */
/* USER CONFIG END (DONT TOUCH BELOW) */
/* ================================== */
{% set current_state = states(config.chips[0].entity) %}
{% set is_active = current_state != 'off' %}
{% if is_active %}
{% set current_bg = active_bg %}
{% set current_icon = active_icon %}
{% set current_text = active_text %}
{% set current_border = active_border %}
{% set current_op = active_opacity %}
{% set current_anim = anim_type %}
{% else %}
{% set current_bg = inactive_bg %}
{% set current_icon = inactive_icon %}
{% set current_text = inactive_text %}
{% set current_border = inactive_border %}
{% set current_op = inactive_opacity %}
{% set current_anim = anim_type if always_animate else 'none' %}
{% endif %}
{% set master_cycle = anim_duration_sec + anim_delay_sec %}
{% set iterations = (anim_duration_sec / anim_intensity_sec) | round(0, 'floor') | int if anim_intensity_sec > 0 else 0 %}
{% set step_percent = (anim_intensity_sec / master_cycle) * 100 if master_cycle > 0 else 0 %}
--chip-padding: {{ badge_height }};
--chip-border-radius: {{ border_radius }};
--chip-border-width: 0px !important;
--ha-card-border-width: 0px !important;
--chip-box-shadow: 0 0 0 {{ border_thickness }} {{ current_border }} !important;
--text-color: {{ current_icon }} !important;
--color: {{ current_icon }} !important;
--chip-background: color-mix(in srgb, {{ current_bg }}, transparent {{ (1 - current_op) * 100 }}%) !important;
--chip-font-size: {{ text_size }} !important;
--chip-icon-size: {{ icon_size }} !important;
--mdc-icon-size: {{ icon_size }} !important;
--chip-height: auto !important;
--primary-text-color: {{ current_text }} !important;
--secondary-text-color: {{ current_text }} !important;
position: absolute !important;
{{ pos_y }}: {{ pos_y_val }};
{{ pos_x }}: {{ pos_x_val }};
z-index: 1;
border: none !important;
border-radius: {{ border_radius }} !important;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
overflow: visible !important;
will-change: transform;
{% if current_anim != 'none' and iterations > 0 and master_cycle > 0 %}
animation: anim-{{ config.chips[0].entity | replace('.', '-') }}-{{ anim_type }} {{ master_cycle }}s infinite linear;
{% endif %}
}
ha-state-icon, ha-icon {
display: flex;
align-items: center;
justify-content: center;
width: {{ icon_size }} !important;
height: {{ icon_size }} !important;
}
{% if config.chips[0].content is not defined or
config.chips[0].content | length == 0 %}
ha-card { padding: 5px !important; border-radius: 50% !important; aspect-ratio: 1/1; justify-content: center; }
.content { display: none; }
{% else %}
ha-card { padding: 0 10px !important; }
.content { padding-left: 5px; font-weight: bold; }
{% endif %}
{% if current_anim != 'none' and iterations > 0 and
master_cycle > 0 %}
@keyframes anim-{{ config.chips[0].entity | replace('.',
'-') }}-{{ anim_type }} {
{% for i in range(iterations) %}
{% set t = i * step_percent %}
{% if anim_type == 'pulse' %}
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1.15, 1.15, 1); }
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
{% elif anim_type == 'shake' %}
{{ t + 0 }}% { transform: rotateZ(0deg); }
{{ t + (step_percent * 0.25) }}% { transform: rotateZ(-10deg); }
{{ t + (step_percent * 0.75) }}% { transform: rotateZ(10deg); }
{{ t + step_percent }}% { transform: rotateZ(0deg); }
{% elif anim_type == 'flash' %}
{{ t + 0 }}% { opacity: 1; }
{{ t + (step_percent * 0.5) }}% { opacity: 0; }
{{ t + step_percent }}% { opacity: 1; }
{% elif anim_type == 'wobble' %}
{{ t + 0 }}% { transform: translate3d(0%, 0, 0); }
{{ t + (step_percent * 0.3) }}% { transform: translate3d(-15%, 0, 0) rotateZ(-5deg); }
{{ t + (step_percent * 0.6) }}% { transform: translate3d(10%, 0, 0) rotateZ(3deg); }
{{ t + step_percent }}% { transform: translate3d(0%, 0, 0); }
{% elif anim_type == 'heartbeat' %}
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
{{ t + (step_percent * 0.25) }}% { transform: scale3d(1.15, 1.15, 1); }
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1, 1, 1); }
{{ t + (step_percent * 0.75) }}% { transform: scale3d(1.15, 1.15, 1); }
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
{% elif anim_type == 'swing' %}
{{ t + 0 }}% { transform: rotateZ(0deg); }
{{ t + (step_percent * 0.4) }}% { transform: rotateZ(15deg); }
{{ t + (step_percent * 0.8) }}% { transform: rotateZ(-10deg); }
{{ t + step_percent }}% { transform: rotateZ(0deg); }
{% elif anim_type == 'vibrate' %}
{{ t + 0 }}% { transform: translate3d(0, 0, 0); }
{{ t + (step_percent * 0.2) }}% { transform: translate3d(-2px, 2px, 0); }
{{ t + (step_percent * 0.4) }}% { transform: translate3d(-2px, -2px, 0); }
{{ t + (step_percent * 0.6) }}% { transform: translate3d(2px, 2px, 0); }
{{ t + (step_percent * 0.8) }}% { transform: translate3d(2px, -2px, 0); }
{{ t + step_percent }}% { transform: translate3d(0, 0, 0); }
{% endif %}
{% endfor %}
}
{% endif %}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.qdhkl_cn_2113955096_b19c
show_temperature_control: true
collapsible_controls: true
hvac_modes:
- heat
- cool
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.qdhkl_cn_2113955096_b19c
icon: mdi:power
alignment: end
card_mod:
style: >
ha-card {
/* ================================ */
/* USER CONFIG HERE */
/* ================================ */
/* 1. ACTIVE STATES */
{% set active_states = ['on'] %}
/* 2. POSITIONING */
{% set pos_y = 'top' %}
{% set pos_y_val = '4px' %}
{% set pos_x = 'right' %}
{% set pos_x_val = '4px' %}
/* 3. SIZING */
{% set icon_size = '22px' %}
{% set text_size = '13px' %}
{% set badge_height = '2px' %}
{% set border_radius = '5px' %}
{% set border_thickness = '0.5px' %}
/* 4. COLORS (HEX, RGB, Color Name) */
/* --- Active --- */
{% set active_bg = '#b86836' %}
{% set active_icon = '#d4f228' %}
{% set active_text = 'white' %}
{% set active_border = 'transparent' %}
{% set active_opacity = 0.3 %}
/* --- Inactive --- */
{% set inactive_bg = 'grey' %}
{% set inactive_icon = 'grey' %}
{% set inactive_text = 'darkgrey' %}
{% set inactive_border = 'transparent' %}
{% set inactive_opacity = 0.3 %}
/* 5. ANIMATIONS */
/* Options: pulse, shake, wobble */
/* flash, heartbeat, swing, vibrate */
{% set anim_type = 'pulse' %}
/* true = 24/7, false = only when active */
{% set always_animate = false %}
{% set anim_intensity_sec = 0.5 %} /* 0.1 to 1 */
{% set anim_duration_sec = 1 %}
{% set anim_delay_sec = 1 %}
/* ================================== */
/* USER CONFIG END (DONT TOUCH BELOW) */
/* ================================== */
{% set current_state = states(config.chips[0].entity) %}
{% set is_active = current_state != 'off' %}
{% if is_active %}
{% set current_bg = active_bg %}
{% set current_icon = active_icon %}
{% set current_text = active_text %}
{% set current_border = active_border %}
{% set current_op = active_opacity %}
{% set current_anim = anim_type %}
{% else %}
{% set current_bg = inactive_bg %}
{% set current_icon = inactive_icon %}
{% set current_text = inactive_text %}
{% set current_border = inactive_border %}
{% set current_op = inactive_opacity %}
{% set current_anim = anim_type if always_animate else 'none' %}
{% endif %}
{% set master_cycle = anim_duration_sec + anim_delay_sec %}
{% set iterations = (anim_duration_sec / anim_intensity_sec) | round(0, 'floor') | int if anim_intensity_sec > 0 else 0 %}
{% set step_percent = (anim_intensity_sec / master_cycle) * 100 if master_cycle > 0 else 0 %}
--chip-padding: {{ badge_height }};
--chip-border-radius: {{ border_radius }};
--chip-border-width: 0px !important;
--ha-card-border-width: 0px !important;
--chip-box-shadow: 0 0 0 {{ border_thickness }} {{ current_border }} !important;
--text-color: {{ current_icon }} !important;
--color: {{ current_icon }} !important;
--chip-background: color-mix(in srgb, {{ current_bg }}, transparent {{ (1 - current_op) * 100 }}%) !important;
--chip-font-size: {{ text_size }} !important;
--chip-icon-size: {{ icon_size }} !important;
--mdc-icon-size: {{ icon_size }} !important;
--chip-height: auto !important;
--primary-text-color: {{ current_text }} !important;
--secondary-text-color: {{ current_text }} !important;
position: absolute !important;
{{ pos_y }}: {{ pos_y_val }};
{{ pos_x }}: {{ pos_x_val }};
z-index: 1;
border: none !important;
border-radius: {{ border_radius }} !important;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
overflow: visible !important;
will-change: transform;
{% if current_anim != 'none' and iterations > 0 and master_cycle > 0 %}
animation: anim-{{ config.chips[0].entity | replace('.', '-') }}-{{ anim_type }} {{ master_cycle }}s infinite linear;
{% endif %}
}
ha-state-icon, ha-icon {
display: flex;
align-items: center;
justify-content: center;
width: {{ icon_size }} !important;
height: {{ icon_size }} !important;
}
{% if config.chips[0].content is not defined or
config.chips[0].content | length == 0 %}
ha-card { padding: 5px !important; border-radius: 50% !important; aspect-ratio: 1/1; justify-content: center; }
.content { display: none; }
{% else %}
ha-card { padding: 0 10px !important; }
.content { padding-left: 5px; font-weight: bold; }
{% endif %}
{% if current_anim != 'none' and iterations > 0 and
master_cycle > 0 %}
@keyframes anim-{{ config.chips[0].entity | replace('.',
'-') }}-{{ anim_type }} {
{% for i in range(iterations) %}
{% set t = i * step_percent %}
{% if anim_type == 'pulse' %}
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1.15, 1.15, 1); }
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
{% elif anim_type == 'shake' %}
{{ t + 0 }}% { transform: rotateZ(0deg); }
{{ t + (step_percent * 0.25) }}% { transform: rotateZ(-10deg); }
{{ t + (step_percent * 0.75) }}% { transform: rotateZ(10deg); }
{{ t + step_percent }}% { transform: rotateZ(0deg); }
{% elif anim_type == 'flash' %}
{{ t + 0 }}% { opacity: 1; }
{{ t + (step_percent * 0.5) }}% { opacity: 0; }
{{ t + step_percent }}% { opacity: 1; }
{% elif anim_type == 'wobble' %}
{{ t + 0 }}% { transform: translate3d(0%, 0, 0); }
{{ t + (step_percent * 0.3) }}% { transform: translate3d(-15%, 0, 0) rotateZ(-5deg); }
{{ t + (step_percent * 0.6) }}% { transform: translate3d(10%, 0, 0) rotateZ(3deg); }
{{ t + step_percent }}% { transform: translate3d(0%, 0, 0); }
{% elif anim_type == 'heartbeat' %}
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
{{ t + (step_percent * 0.25) }}% { transform: scale3d(1.15, 1.15, 1); }
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1, 1, 1); }
{{ t + (step_percent * 0.75) }}% { transform: scale3d(1.15, 1.15, 1); }
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
{% elif anim_type == 'swing' %}
{{ t + 0 }}% { transform: rotateZ(0deg); }
{{ t + (step_percent * 0.4) }}% { transform: rotateZ(15deg); }
{{ t + (step_percent * 0.8) }}% { transform: rotateZ(-10deg); }
{{ t + step_percent }}% { transform: rotateZ(0deg); }
{% elif anim_type == 'vibrate' %}
{{ t + 0 }}% { transform: translate3d(0, 0, 0); }
{{ t + (step_percent * 0.2) }}% { transform: translate3d(-2px, 2px, 0); }
{{ t + (step_percent * 0.4) }}% { transform: translate3d(-2px, -2px, 0); }
{{ t + (step_percent * 0.6) }}% { transform: translate3d(2px, 2px, 0); }
{{ t + (step_percent * 0.8) }}% { transform: translate3d(2px, -2px, 0); }
{{ t + step_percent }}% { transform: translate3d(0, 0, 0); }
{% endif %}
{% endfor %}
}
{% endif %}
grid_options:
columns: 6
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.qdhkl_cn_2113966364_b19c
show_temperature_control: true
collapsible_controls: true
hvac_modes:
- heat
- cool
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.qdhkl_cn_2113966364_b19c
icon: mdi:power
alignment: end
card_mod:
style: >
ha-card {
/* ================================ */
/* USER CONFIG HERE */
/* ================================ */
/* 1. ACTIVE STATES */
{% set active_states = ['on'] %}
/* 2. POSITIONING */
{% set pos_y = 'top' %}
{% set pos_y_val = '4px' %}
{% set pos_x = 'right' %}
{% set pos_x_val = '4px' %}
/* 3. SIZING */
{% set icon_size = '22px' %}
{% set text_size = '13px' %}
{% set badge_height = '2px' %}
{% set border_radius = '5px' %}
{% set border_thickness = '0.5px' %}
/* 4. COLORS (HEX, RGB, Color Name) */
/* --- Active --- */
{% set active_bg = '#b86836' %}
{% set active_icon = '#d4f228' %}
{% set active_text = 'white' %}
{% set active_border = 'transparent' %}
{% set active_opacity = 0.3 %}
/* --- Inactive --- */
{% set inactive_bg = 'grey' %}
{% set inactive_icon = 'grey' %}
{% set inactive_text = 'darkgrey' %}
{% set inactive_border = 'transparent' %}
{% set inactive_opacity = 0.3 %}
/* 5. ANIMATIONS */
/* Options: pulse, shake, wobble */
/* flash, heartbeat, swing, vibrate */
{% set anim_type = 'pulse' %}
/* true = 24/7, false = only when active */
{% set always_animate = false %}
{% set anim_intensity_sec = 0.5 %} /* 0.1 to 1 */
{% set anim_duration_sec = 1 %}
{% set anim_delay_sec = 1 %}
/* ================================== */
/* USER CONFIG END (DONT TOUCH BELOW) */
/* ================================== */
{% set current_state = states(config.chips[0].entity) %}
{% set is_active = current_state != 'off' %}
{% if is_active %}
{% set current_bg = active_bg %}
{% set current_icon = active_icon %}
{% set current_text = active_text %}
{% set current_border = active_border %}
{% set current_op = active_opacity %}
{% set current_anim = anim_type %}
{% else %}
{% set current_bg = inactive_bg %}
{% set current_icon = inactive_icon %}
{% set current_text = inactive_text %}
{% set current_border = inactive_border %}
{% set current_op = inactive_opacity %}
{% set current_anim = anim_type if always_animate else 'none' %}
{% endif %}
{% set master_cycle = anim_duration_sec + anim_delay_sec %}
{% set iterations = (anim_duration_sec / anim_intensity_sec) | round(0, 'floor') | int if anim_intensity_sec > 0 else 0 %}
{% set step_percent = (anim_intensity_sec / master_cycle) * 100 if master_cycle > 0 else 0 %}
--chip-padding: {{ badge_height }};
--chip-border-radius: {{ border_radius }};
--chip-border-width: 0px !important;
--ha-card-border-width: 0px !important;
--chip-box-shadow: 0 0 0 {{ border_thickness }} {{ current_border }} !important;
--text-color: {{ current_icon }} !important;
--color: {{ current_icon }} !important;
--chip-background: color-mix(in srgb, {{ current_bg }}, transparent {{ (1 - current_op) * 100 }}%) !important;
--chip-font-size: {{ text_size }} !important;
--chip-icon-size: {{ icon_size }} !important;
--mdc-icon-size: {{ icon_size }} !important;
--chip-height: auto !important;
--primary-text-color: {{ current_text }} !important;
--secondary-text-color: {{ current_text }} !important;
position: absolute !important;
{{ pos_y }}: {{ pos_y_val }};
{{ pos_x }}: {{ pos_x_val }};
z-index: 1;
border: none !important;
border-radius: {{ border_radius }} !important;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
overflow: visible !important;
will-change: transform;
{% if current_anim != 'none' and iterations > 0 and master_cycle > 0 %}
animation: anim-{{ config.chips[0].entity | replace('.', '-') }}-{{ anim_type }} {{ master_cycle }}s infinite linear;
{% endif %}
}
ha-state-icon, ha-icon {
display: flex;
align-items: center;
justify-content: center;
width: {{ icon_size }} !important;
height: {{ icon_size }} !important;
}
{% if config.chips[0].content is not defined or
config.chips[0].content | length == 0 %}
ha-card { padding: 5px !important; border-radius: 50% !important; aspect-ratio: 1/1; justify-content: center; }
.content { display: none; }
{% else %}
ha-card { padding: 0 10px !important; }
.content { padding-left: 5px; font-weight: bold; }
{% endif %}
{% if current_anim != 'none' and iterations > 0 and
master_cycle > 0 %}
@keyframes anim-{{ config.chips[0].entity | replace('.',
'-') }}-{{ anim_type }} {
{% for i in range(iterations) %}
{% set t = i * step_percent %}
{% if anim_type == 'pulse' %}
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1.15, 1.15, 1); }
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
{% elif anim_type == 'shake' %}
{{ t + 0 }}% { transform: rotateZ(0deg); }
{{ t + (step_percent * 0.25) }}% { transform: rotateZ(-10deg); }
{{ t + (step_percent * 0.75) }}% { transform: rotateZ(10deg); }
{{ t + step_percent }}% { transform: rotateZ(0deg); }
{% elif anim_type == 'flash' %}
{{ t + 0 }}% { opacity: 1; }
{{ t + (step_percent * 0.5) }}% { opacity: 0; }
{{ t + step_percent }}% { opacity: 1; }
{% elif anim_type == 'wobble' %}
{{ t + 0 }}% { transform: translate3d(0%, 0, 0); }
{{ t + (step_percent * 0.3) }}% { transform: translate3d(-15%, 0, 0) rotateZ(-5deg); }
{{ t + (step_percent * 0.6) }}% { transform: translate3d(10%, 0, 0) rotateZ(3deg); }
{{ t + step_percent }}% { transform: translate3d(0%, 0, 0); }
{% elif anim_type == 'heartbeat' %}
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
{{ t + (step_percent * 0.25) }}% { transform: scale3d(1.15, 1.15, 1); }
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1, 1, 1); }
{{ t + (step_percent * 0.75) }}% { transform: scale3d(1.15, 1.15, 1); }
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
{% elif anim_type == 'swing' %}
{{ t + 0 }}% { transform: rotateZ(0deg); }
{{ t + (step_percent * 0.4) }}% { transform: rotateZ(15deg); }
{{ t + (step_percent * 0.8) }}% { transform: rotateZ(-10deg); }
{{ t + step_percent }}% { transform: rotateZ(0deg); }
{% elif anim_type == 'vibrate' %}
{{ t + 0 }}% { transform: translate3d(0, 0, 0); }
{{ t + (step_percent * 0.2) }}% { transform: translate3d(-2px, 2px, 0); }
{{ t + (step_percent * 0.4) }}% { transform: translate3d(-2px, -2px, 0); }
{{ t + (step_percent * 0.6) }}% { transform: translate3d(2px, 2px, 0); }
{{ t + (step_percent * 0.8) }}% { transform: translate3d(2px, -2px, 0); }
{{ t + step_percent }}% { transform: translate3d(0, 0, 0); }
{% endif %}
{% endfor %}
}
{% endif %}
grid_options:
columns: 6
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.qdhkl_cn_2113955084_b19c
show_temperature_control: true
collapsible_controls: true
fill_container: false
grid_options:
columns: 12
rows: 1
hvac_modes:
- heat
- cool
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.qdhkl_cn_2113955084_b19c
icon: mdi:power
alignment: end
card_mod:
style: >
ha-card {
/* ================================ */
/* USER CONFIG HERE */
/* ================================ */
/* 1. ACTIVE STATES */
{% set active_states = ['on'] %}
/* 2. POSITIONING */
{% set pos_y = 'top' %}
{% set pos_y_val = '4px' %}
{% set pos_x = 'right' %}
{% set pos_x_val = '4px' %}
/* 3. SIZING */
{% set icon_size = '22px' %}
{% set text_size = '13px' %}
{% set badge_height = '2px' %}
{% set border_radius = '5px' %}
{% set border_thickness = '0.5px' %}
/* 4. COLORS (HEX, RGB, Color Name) */
/* --- Active --- */
{% set active_bg = '#b86836' %}
{% set active_icon = '#d4f228' %}
{% set active_text = 'white' %}
{% set active_border = 'transparent' %}
{% set active_opacity = 0.3 %}
/* --- Inactive --- */
{% set inactive_bg = 'grey' %}
{% set inactive_icon = 'grey' %}
{% set inactive_text = 'darkgrey' %}
{% set inactive_border = 'transparent' %}
{% set inactive_opacity = 0.3 %}
/* 5. ANIMATIONS */
/* Options: pulse, shake, wobble */
/* flash, heartbeat, swing, vibrate */
{% set anim_type = 'pulse' %}
/* true = 24/7, false = only when active */
{% set always_animate = false %}
{% set anim_intensity_sec = 0.5 %} /* 0.1 to 1 */
{% set anim_duration_sec = 1 %}
{% set anim_delay_sec = 1 %}
/* ================================== */
/* USER CONFIG END (DONT TOUCH BELOW) */
/* ================================== */
{% set current_state = states(config.chips[0].entity) %}
{% set is_active = current_state != 'off' %}
{% if is_active %}
{% set current_bg = active_bg %}
{% set current_icon = active_icon %}
{% set current_text = active_text %}
{% set current_border = active_border %}
{% set current_op = active_opacity %}
{% set current_anim = anim_type %}
{% else %}
{% set current_bg = inactive_bg %}
{% set current_icon = inactive_icon %}
{% set current_text = inactive_text %}
{% set current_border = inactive_border %}
{% set current_op = inactive_opacity %}
{% set current_anim = anim_type if always_animate else 'none' %}
{% endif %}
{% set master_cycle = anim_duration_sec + anim_delay_sec %}
{% set iterations = (anim_duration_sec / anim_intensity_sec) | round(0, 'floor') | int if anim_intensity_sec > 0 else 0 %}
{% set step_percent = (anim_intensity_sec / master_cycle) * 100 if master_cycle > 0 else 0 %}
--chip-padding: {{ badge_height }};
--chip-border-radius: {{ border_radius }};
--chip-border-width: 0px !important;
--ha-card-border-width: 0px !important;
--chip-box-shadow: 0 0 0 {{ border_thickness }} {{ current_border }} !important;
--text-color: {{ current_icon }} !important;
--color: {{ current_icon }} !important;
--chip-background: color-mix(in srgb, {{ current_bg }}, transparent {{ (1 - current_op) * 100 }}%) !important;
--chip-font-size: {{ text_size }} !important;
--chip-icon-size: {{ icon_size }} !important;
--mdc-icon-size: {{ icon_size }} !important;
--chip-height: auto !important;
--primary-text-color: {{ current_text }} !important;
--secondary-text-color: {{ current_text }} !important;
position: absolute !important;
{{ pos_y }}: {{ pos_y_val }};
{{ pos_x }}: {{ pos_x_val }};
z-index: 1;
border: none !important;
border-radius: {{ border_radius }} !important;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
overflow: visible !important;
will-change: transform;
{% if current_anim != 'none' and iterations > 0 and master_cycle > 0 %}
animation: anim-{{ config.chips[0].entity | replace('.', '-') }}-{{ anim_type }} {{ master_cycle }}s infinite linear;
{% endif %}
}
ha-state-icon, ha-icon {
display: flex;
align-items: center;
justify-content: center;
width: {{ icon_size }} !important;
height: {{ icon_size }} !important;
}
{% if config.chips[0].content is not defined or
config.chips[0].content | length == 0 %}
ha-card { padding: 5px !important; border-radius: 50% !important; aspect-ratio: 1/1; justify-content: center; }
.content { display: none; }
{% else %}
ha-card { padding: 0 10px !important; }
.content { padding-left: 5px; font-weight: bold; }
{% endif %}
{% if current_anim != 'none' and iterations > 0 and
master_cycle > 0 %}
@keyframes anim-{{ config.chips[0].entity | replace('.',
'-') }}-{{ anim_type }} {
{% for i in range(iterations) %}
{% set t = i * step_percent %}
{% if anim_type == 'pulse' %}
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1.15, 1.15, 1); }
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
{% elif anim_type == 'shake' %}
{{ t + 0 }}% { transform: rotateZ(0deg); }
{{ t + (step_percent * 0.25) }}% { transform: rotateZ(-10deg); }
{{ t + (step_percent * 0.75) }}% { transform: rotateZ(10deg); }
{{ t + step_percent }}% { transform: rotateZ(0deg); }
{% elif anim_type == 'flash' %}
{{ t + 0 }}% { opacity: 1; }
{{ t + (step_percent * 0.5) }}% { opacity: 0; }
{{ t + step_percent }}% { opacity: 1; }
{% elif anim_type == 'wobble' %}
{{ t + 0 }}% { transform: translate3d(0%, 0, 0); }
{{ t + (step_percent * 0.3) }}% { transform: translate3d(-15%, 0, 0) rotateZ(-5deg); }
{{ t + (step_percent * 0.6) }}% { transform: translate3d(10%, 0, 0) rotateZ(3deg); }
{{ t + step_percent }}% { transform: translate3d(0%, 0, 0); }
{% elif anim_type == 'heartbeat' %}
{{ t + 0 }}% { transform: scale3d(1, 1, 1); }
{{ t + (step_percent * 0.25) }}% { transform: scale3d(1.15, 1.15, 1); }
{{ t + (step_percent * 0.5) }}% { transform: scale3d(1, 1, 1); }
{{ t + (step_percent * 0.75) }}% { transform: scale3d(1.15, 1.15, 1); }
{{ t + step_percent }}% { transform: scale3d(1, 1, 1); }
{% elif anim_type == 'swing' %}
{{ t + 0 }}% { transform: rotateZ(0deg); }
{{ t + (step_percent * 0.4) }}% { transform: rotateZ(15deg); }
{{ t + (step_percent * 0.8) }}% { transform: rotateZ(-10deg); }
{{ t + step_percent }}% { transform: rotateZ(0deg); }
{% elif anim_type == 'vibrate' %}
{{ t + 0 }}% { transform: translate3d(0, 0, 0); }
{{ t + (step_percent * 0.2) }}% { transform: translate3d(-2px, 2px, 0); }
{{ t + (step_percent * 0.4) }}% { transform: translate3d(-2px, -2px, 0); }
{{ t + (step_percent * 0.6) }}% { transform: translate3d(2px, 2px, 0); }
{{ t + (step_percent * 0.8) }}% { transform: translate3d(2px, -2px, 0); }
{{ t + step_percent }}% { transform: translate3d(0, 0, 0); }
{% endif %}
{% endfor %}
}
{% endif %}
- type: grid
cards:
- type: custom:mushroom-title-card
title: Devices
column_span: 4
- type: grid
cards:
- type: custom:mushroom-fan-card
entity: fan.xiaomi_cn_2196552583_p90_s_2_fan
icon_animation: true
fill_container: false
show_percentage_control: true
show_oscillate_control: true
show_direction_control: false
collapsible_controls: false
- type: custom:mushroom-fan-card
entity: fan.shhf_cn_1129134246_sflt11_s_11_fan
name: 风扇
icon: ''
icon_animation: true
show_percentage_control: true
show_oscillate_control: false
show_direction_control: true
- type: custom:mushroom-fan-card
entity: fan.xiaomi_cn_2005161482_va3_s_2_air_purifier
name: 空气净化器
icon_animation: true
fill_container: false
show_percentage_control: true
show_oscillate_control: false
show_direction_control: false
collapsible_controls: false
grid_options:
columns: 12
rows: 2
- type: custom:mushroom-cover-card
entity: cover.panpan_cn_876603548_y18_s_2_airer
name: 晾衣架
show_buttons_control: true
show_position_control: false
grid_options:
columns: 12
rows: 2
header:
layout: responsive
badges_position: bottom
badges_wrap: wrap
background:
opacity: 80
alignment: center
size: cover
repeat: repeat
attachment: fixed
cards: []
theme: ios-dark-mode-light-blue
visible:
- user: 7a6c93d08acc4692bfd561154bb386df
- user: 7809f2c31fda449b8e7c5a0d2eaf5fd5
- type: sections
max_columns: 4
title: home-server
path: home-server
icon: mdi:server
theme: Mushroom Shadow
sections:
- type: grid
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.on_state
icon: mdi:home
tap_action:
action: navigate
navigation_path: /lovelace/main-home
hold_action:
action: none
double_tap_action:
action: none
name: 首页
primary_info: none
secondary_info: name
fill_container: false
layout: horizontal
grid_options:
columns: 6
rows: 1
icon_color: green
card_mod:
style: |
ha-card{
box-shadow: none;
}
- type: custom:mushroom-entity-card
entity: sensor.pan_ke_feng_de_iphone_battery_level
tap_action:
action: more-info
icon: ''
icon_color: white
primary_info: name
secondary_info: none
name: Pan's Phone
grid_options:
rows: 1
card_mod:
style:
.: |
ha-card {
/* ====== USER SETTINGS ===== */
{% set charging_entity =
'binary_sensor.anasbox_is_charging' %}
/* ========================= */
/* ======= FONT SETTINGS ======= */
--card-primary-font-size: 15px !important;
--card-secondary-font-size: 12px !important;
--card-primary-font-weight: bold !important;
/* --- LOGIC --- */
{% set level = states(config.entity) | float(0) %}
{% set is_charging = is_state(charging_entity, 'on') %}
/* 1. Determine Color */
{% if is_charging %}
{% set color = '0, 255, 255' %} /* Cyan (Charging) */
{% elif level <= 20 %}
{% set color = '244, 67, 54' %} /* Red */
{% elif level <= 60 %}
{% set color = '255, 152, 0' %} /* Orange */
{% else %}
{% set color = '0, 255, 100' %} /* Green */
{% endif %}
/* --- PASS VARIABLES TO CSS --- */
--custom-level: {{ level }}%;
--custom-color: rgba({{ color }}, 0.8);
--custom-bubble: {{ 'block' if is_charging else 'none' }};
/* Icon Glow */
--custom-icon-shadow: {{ '0 0 15px rgba(' ~ color ~ ', 0.6)' if is_charging else 'none' }};
/* Text Color */
--text-color: {{ 'rgba(' ~ color ~ ', 1)' if level < 100 else 'rgba(255,255,255,0.7)' }};
/* --- CARD STYLING --- */
background: #1c1c1c !important;
border: none !important;
border-radius: 12px;
position: relative;
overflow: hidden;
transition: all 0.5s ease;
/* Ambient Glow behind the liquid */
background-image: radial-gradient(circle at 24px 24px, rgba({{ color }}, 0.15) 0%, transparent 60%) !important;
}
/* Icon Styling */
mushroom-shape-icon {
--icon-size: 45px;
display: flex;
padding-right: 10px;
padding-bottom: 5px;
}
/* --- PERCENTAGE BADGE (Top Right) --- */
ha-card::before {
content: '{{ level | round(0) }}%';
position: absolute;
top: 12px; right: 12px;
font-size: 1rem; font-weight: 700;
color: var(--text-color);
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2px 6px; border-radius: 4px;
}
/* --- PROGRESS BAR TRACK --- */
ha-card::after {
content: '';
position: absolute;
bottom: 0; left: 0;
height: 4px;
width: {{ level }}%;
background: linear-gradient(90deg, transparent, rgb({{ color }}));
box-shadow: 0 0 10px rgb({{ color }});
transition: width 0.5s ease;
}
mushroom-shape-icon$: |
.shape {
/* --- LOGIC INJECTION --- */
--liquid-level: var(--custom-level);
--liquid-color: var(--custom-color);
--bubble-display: var(--custom-bubble);
/* Container Setup */
background: rgba(255, 255, 255, 0.05) !important;
overflow: hidden !important; /* Keeps the liquid inside the circle */
position: relative;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: var(--custom-icon-shadow) !important;
}
/* THE LIQUID (Wavy Fill) */
.shape::before {
content: '';
position: absolute;
left: -50%;
width: 200%;
height: 200%;
/* The top is calculated based on battery level (100% - level) */
top: calc(100% - var(--liquid-level));
background: var(--liquid-color);
border-radius: 40%; /* Creates the "Wave" shape when rotated */
/* The Wave Animation */
animation: liquid-wave 6s linear infinite;
opacity: 0.8;
}
/* CHARGING BUBBLES */
.shape::after {
content: '';
display: var(--bubble-display);
position: absolute;
inset: 0;
background-image:
radial-gradient(2px 2px at 20% 80%, rgba(255,255,255,0.8), transparent),
radial-gradient(2px 2px at 50% 70%, rgba(255,255,255,0.8), transparent),
radial-gradient(3px 3px at 80% 90%, rgba(255,255,255,0.8), transparent);
background-size: 100% 100%;
animation: bubbles-rise 0.7s linear infinite;
}
/* Ensure the MDI Icon sits on top of the liquid */
ha-icon {
position: relative;
z-index: 2;
/* Blend the icon slightly so it looks submerged */
mix-blend-mode: overlay;
color: white !important;
}
/* --- ANIMATIONS --- */
@keyframes liquid-wave {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes bubbles-rise {
0% { transform: translateY(10px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(-20px); opacity: 0; }
}
column_span: 4
- type: grid
cards:
- type: custom:mushroom-title-card
title: Hello Mother Fucker
alignment: center
- square: false
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: >-
sensor.xiaomi_cn_blt_3_1ni9qhv584c03_mini_temperature_p_2_1001
tap_action:
action: more-info
icon: mdi:thermometer
name: 温度
primary_info: state
secondary_info: name
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{# ========== CONFIG ========== #}
{# == Updated: entity auto generated == #}
{% set temp = states(config.entity) | float(0) %}
{# ------------------------------------------- #}
{# TEMPERATURE → COLOR + EFFECT PRESETS #}
{# ------------------------------------------- #}
{# DEFAULTS (will be overridden by ranges) #}
{% set rgb = '0,140,255' %}
{% set anim = 'temp-cold-breathe' %}
{% set glow_anim = 'temp-cold-glow' %}
{% set halo_anim = 'temp-cold-halo' %}
{% set duration = 4.0 %}
{% set intensity = 0.5 %}
{# RANGES / COLORS #}
{# You can change temp numbers below if needed #}
{% if temp < 16 %}
{# BLUE #}
{% set rgb = '0,140,255' %}
{% set anim = 'temp-cold-breathe' %}
{% set glow_anim = 'temp-cold-glow' %}
{% set halo_anim = 'temp-cold-halo' %}
{% set duration = 4.4 %}
{% set intensity = 0.4 %}
{% elif temp < 18 %}
{# YELLOW #}
{% set rgb = '255,210,40' %}
{% set anim = 'temp-cool-wave' %}
{% set glow_anim = 'temp-cool-glow' %}
{% set halo_anim = 'temp-cool-halo' %}
{% set duration = 3.4 %}
{% set intensity = 0.55 %}
{% elif temp < 20 %}
{# ORANGE #}
{% set rgb = '255,150,40' %}
{% set anim = 'temp-comfy-breathe' %}
{% set glow_anim = 'temp-comfy-glow' %}
{% set halo_anim = 'temp-comfy-halo' %}
{% set duration = 3.0 %}
{% set intensity = 0.6 %}
{% elif temp < 22 %}
{# DARK ORANGE #}
{% set rgb = '255,115,20' %}
{% set anim = 'temp-warm-pulse' %}
{% set glow_anim = 'temp-warm-glow' %}
{% set halo_anim = 'temp-warm-halo' %}
{% set duration = 2.4 %}
{% set intensity = 0.8 %}
{% else %}
{# RED #}
{% set rgb = '255,40,40' %}
{% set anim = 'temp-hot-shimmer' %}
{% set glow_anim = 'temp-hot-glow' %}
{% set halo_anim = 'temp-hot-halo' %}
{% set duration = 2.0 %}
{% set intensity = 1.0 %}
{% endif %}
{# Apply variables #}
--temp-rgb: {{ rgb }};
--temp-intensity: {{ intensity }};
--shape-animation: {{ anim }} {{ duration }}s ease-in-out infinite;
--temp-glow-animation: {{ glow_anim }} {{ (duration * 0.9) | round(2) }}s ease-in-out infinite;
--temp-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
opacity: 1;
/* Icon color follows the temperature */
--icon-color: rgba({{ rgb }}, 1);
/* KILL THE THEME BLUE & MAKE SHAPE NEUTRAL */
background-color: rgba(77, 77, 77,0.1) !important;
box-shadow: none !important;
border: 1px solid rgba(255,255,255,0.06);
position: relative;
transform-origin: 50% 60%;
animation: var(--shape-animation);
}
/* Glow layers */
.shape::before,
.shape::after {
content: '';
position: absolute;
border-radius: inherit;
pointer-events: none;
}
.shape::before {
inset: -8px;
animation: var(--temp-glow-animation);
}
.shape::after {
inset: -22px;
animation: var(--temp-halo-animation);
mix-blend-mode: screen;
}
/* ========== COLD ========== */
@keyframes temp-cold-breathe {
0% { transform: scale(0.96); }
50% { transform: scale(1.03); }
100% { transform: scale(0.96); }
}
@keyframes temp-cold-glow {
0% {
box-shadow:
0 0 20px 0 rgba(var(--temp-rgb), 0.6),
0 0 34px 6 rgba(var(--temp-rgb), 0.55);
}
50% {
box-shadow:
0 0 30px 4 rgba(var(--temp-rgb), 0.95),
0 0 50px 10px rgba(var(--temp-rgb), 0.85);
}
100% {
box-shadow:
0 0 20px 0 rgba(var(--temp-rgb), 0.6),
0 0 34px 6 rgba(var(--temp-rgb), 0.55);
}
}
@keyframes temp-cold-halo {
0% {
box-shadow:
0 0 80px 20px rgba(var(--temp-rgb), 0.35),
0 -20px 80px -14px rgba(220, 240, 255, 0.55);
}
50% {
box-shadow:
0 0 130px 36px rgba(var(--temp-rgb), 0.5),
0 -34px 100px -8px rgba(240, 250, 255, 0.8);
}
100% {
box-shadow:
0 0 80px 20px rgba(var(--temp-rgb), 0.35),
0 -20px 80px -14px rgba(220, 240, 255, 0.55);
}
}
/* ========== COOL ========== */
@keyframes temp-cool-wave {
0% { transform: translateX(0); }
25% { transform: translateX(-1px); }
50% { transform: translateX(1px) translateY(-1px); }
75% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}
@keyframes temp-cool-glow {
0% {
box-shadow:
0 0 22px 0 rgba(var(--temp-rgb), 0.6),
0 0 34px 4 rgba(var(--temp-rgb), 0.7);
}
50% {
box-shadow:
0 0 28px 2 rgba(var(--temp-rgb), 0.95),
0 0 48px 12px rgba(var(--temp-rgb), 0.85);
}
100% {
box-shadow:
0 0 22px 0 rgba(var(--temp-rgb), 0.6),
0 0 34px 4 rgba(var(--temp-rgb), 0.7);
}
}
@keyframes temp-cool-halo {
0% {
box-shadow:
0 0 90px 26px rgba(var(--temp-rgb), 0.35),
0 18px 80px -12px rgba(0, 220, 255, 0.35);
}
50% {
box-shadow:
0 0 140px 42px rgba(var(--temp-rgb), 0.45),
0 30px 110px -10px rgba(0, 255, 255, 0.5);
}
100% {
box-shadow:
0 0 90px 26px rgba(var(--temp-rgb), 0.35),
0 18px 80px -12px rgba(0, 220, 255, 0.35);
}
}
/* ========== COMFY ========== */
@keyframes temp-comfy-breathe {
0% { transform: scale(0.98); }
50% { transform: scale(1.05); }
100% { transform: scale(0.98); }
}
@keyframes temp-comfy-glow {
50% {
box-shadow:
0 0 26px 4 rgba(var(--temp-rgb), 0.9),
0 0 42px 10px rgba(var(--temp-rgb), 0.85);
}
}
@keyframes temp-comfy-halo {
50% {
box-shadow:
0 0 120px 40px rgba(var(--temp-rgb), 0.45),
0 26px 80px -10px rgba(180,255,200,0.5);
}
}
/* ========== WARM ========== */
@keyframes temp-warm-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.07); }
100% { transform: scale(1); }
}
@keyframes temp-warm-glow {
50% {
box-shadow:
0 0 30px 4 rgba(var(--temp-rgb), 0.95),
0 0 54px 14px rgba(var(--temp-rgb), 0.9);
}
}
@keyframes temp-warm-halo {
50% {
box-shadow:
0 0 140px 48px rgba(var(--temp-rgb), 0.55),
0 26px 100px -10px rgba(255,210,150,0.5);
}
}
/* ========== HOT ========== */
@keyframes temp-hot-shimmer {
0% { transform: scale(1); filter: blur(0); }
50% { transform: scale(1.08); filter: blur(0.6px); }
100% { transform: scale(1); filter: blur(0); }
}
@keyframes temp-hot-glow {
50% {
box-shadow:
0 0 34px 6 rgba(var(--temp-rgb), 1),
0 0 62px 14px rgba(var(--temp-rgb), 0.95);
}
}
@keyframes temp-hot-halo {
50% {
box-shadow:
0 0 160px 60px rgba(var(--temp-rgb), 0.6),
0 34px 120px -12px rgba(255,150,100,0.6);
}
}
.: |
mushroom-shape-icon {
--icon-size: 48px;
--icon-color: rgba(var(--hum-rgb),1) !important;
display: flex;
margin: -16px 0 10px -20px !important;
padding-right: 22px;
padding-bottom: 18px;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
/* FONT SIZE & SPACING SETTINGS */
--card-primary-font-size: 1.4rem !important;
/* Increases vertical space between primary and secondary */
--card-primary-line-height: 1.3 !important;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- >-
sensor.xiaomi_cn_blt_3_1ni9qhv584c03_mini_temperature_p_2_1001
hours_to_show: 24
line_width: 5
show:
name: false
icon: false
state: false
labels: false
legend: false
color_thresholds:
- value: 0
color: blue
- value: 16
color: lightblue
- value: 18
color: orange
- value: 21
color: red
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
opacity: 50%;
border: none;
width: 250px;
mask-image: radial-gradient(
ellipse at center,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0) 90%
);
}
card_mod:
style:
.: |
ha-card {
background: none;
box-shadow: none;
border: none;
margin: 8px 12px;
position: absolute;
bottom: -10px;
right: -10px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: >-
sensor.xiaomi_cn_blt_3_1ni9qhv584c03_mini_relative_humidity_p_2_1002
tap_action:
action: more-info
icon: mdi:water-percent
name: 湿度
primary_info: state
secondary_info: name
card_mod:
style:
mushroom-shape-icon$: >
.shape {
{# ========== CONFIG ========== #}
{# == Updated: entity auto generated == #}
{% set hum = states(config.entity) | float(0) %}
{# DEFAULTS #}
{% set rgb = '120,210,255' %}
{% set anim = 'hum-good-breathe' %}
{% set glow_anim = 'hum-good-glow' %}
{% set halo_anim = 'hum-good-halo' %}
{% set duration = 3.2 %}
{# RANGES
< 40 -> BAD (dark blue)
40-60 -> GOOD (light blue)
> 60 -> MIDDLE / humid (medium blue)
#}
{% if hum < 40 %}
{# BAD - dry - dark blue #}
{% set rgb = '0,80,200' %}
{% set anim = 'hum-bad-pulse' %}
{% set glow_anim = 'hum-bad-glow' %}
{% set halo_anim = 'hum-bad-halo' %}
{% set duration = 2.8 %}
{% elif hum <= 60 %}
{# GOOD - light blue #}
{% set rgb = '120,210,255' %}
{% set anim = 'hum-good-breathe' %}
{% set glow_anim = 'hum-good-glow' %}
{% set halo_anim = 'hum-good-halo' %}
{% set duration = 3.4 %}
{% else %}
{# MIDDLE / humid - medium blue #}
{% set rgb = '40,140,255' %}
{% set anim = 'hum-mid-wave' %}
{% set glow_anim = 'hum-mid-glow' %}
{% set halo_anim = 'hum-mid-halo' %}
{% set duration = 3.0 %}
{% endif %}
--hum-rgb: {{ rgb }};
--shape-animation: {{ anim }} {{ duration }}s ease-in-out infinite;
--hum-glow-animation: {{ glow_anim }} {{ (duration * 0.9) | round(2) }}s ease-in-out infinite;
--hum-halo-animation: {{ halo_anim }} {{ (duration * 1.1) | round(2) }}s ease-in-out infinite;
/* Icon color follows humidity color */
--icon-color: rgba({{ rgb }}, 1);
/* Neutral pill so theme blue does not leak through */
background-color: rgba(77,77,77,0.2) !important;
box-shadow: none !important;
border: 1px solid rgba(255,255,255,0.06);
opacity: 1;
position: relative;
transform-origin: 50% 60%;
animation: var(--shape-animation);
}
/* Glow layers */
.shape::before,
.shape::after {
content: '';
position: absolute;
border-radius: inherit;
pointer-events: none;
}
.shape::before {
inset: -8px;
animation: var(--hum-glow-animation);
}
.shape::after {
inset: -22px;
animation: var(--hum-halo-animation);
mix-blend-mode: screen;
}
/* ========== GOOD - light blue ========== */
@keyframes hum-good-breathe {
0% { transform: scale(0.98); }
50% { transform: scale(1.04); }
100% { transform: scale(0.98); }
}
@keyframes hum-good-glow {
0% {
box-shadow:
0 0 18px 0 rgba(var(--hum-rgb), 0.55),
0 0 30px 4 rgba(var(--hum-rgb), 0.6);
}
50% {
box-shadow:
0 0 24px 4 rgba(var(--hum-rgb), 0.9),
0 0 44px 10px rgba(var(--hum-rgb), 0.85);
}
100% {
box-shadow:
0 0 18px 0 rgba(var(--hum-rgb), 0.55),
0 0 30px 4 rgba(var(--hum-rgb), 0.6);
}
}
@keyframes hum-good-halo {
0% {
box-shadow:
0 0 80px 24px rgba(var(--hum-rgb), 0.35),
0 18px 70px -12px rgba(180,230,255,0.3);
}
50% {
box-shadow:
0 0 120px 40px rgba(var(--hum-rgb), 0.45),
0 26px 90px -10px rgba(200,240,255,0.45);
}
100% {
box-shadow:
0 0 80px 24px rgba(var(--hum-rgb), 0.35),
0 18px 70px -12px rgba(180,230,255,0.3);
}
}
/* ========== MIDDLE / humid - medium blue ==========
*/
@keyframes hum-mid-wave {
0% { transform: translateX(0); }
25% { transform: translateX(-1px); }
50% { transform: translateX(1px) translateY(-1px); }
75% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}
@keyframes hum-mid-glow {
0% {
box-shadow:
0 0 20px 0 rgba(var(--hum-rgb), 0.6),
0 0 32px 4 rgba(var(--hum-rgb), 0.7);
}
50% {
box-shadow:
0 0 28px 3 rgba(var(--hum-rgb), 0.95),
0 0 48px 10px rgba(var(--hum-rgb), 0.85);
}
100% {
box-shadow:
0 0 20px 0 rgba(var(--hum-rgb), 0.6),
0 0 32px 4 rgba(var(--hum-rgb), 0.7);
}
}
@keyframes hum-mid-halo {
0% {
box-shadow:
0 0 90px 26px rgba(var(--hum-rgb), 0.4),
0 18px 80px -12px rgba(80,190,255,0.35);
}
50% {
box-shadow:
0 0 135px 42px rgba(var(--hum-rgb), 0.5),
0 28px 105px -10px rgba(100,210,255,0.5);
}
100% {
box-shadow:
0 0 90px 26px rgba(var(--hum-rgb), 0.4),
0 18px 80px -12px rgba(80,190,255,0.35);
}
}
/* ========== BAD - dry - dark blue ========== */
@keyframes hum-bad-pulse {
0% { transform: scale(0.97); }
40% { transform: scale(1.03); }
100% { transform: scale(0.97); }
}
@keyframes hum-bad-glow {
0% {
box-shadow:
0 0 18px 0 rgba(var(--hum-rgb), 0.6),
0 0 28px 4 rgba(var(--hum-rgb), 0.7);
}
50% {
box-shadow:
0 0 26px 4 rgba(var(--hum-rgb), 0.95),
0 0 44px 12px rgba(var(--hum-rgb), 0.9);
}
100% {
box-shadow:
0 0 18px 0 rgba(var(--hum-rgb), 0.6),
0 0 28px 4 rgba(var(--hum-rgb), 0.7);
}
}
@keyframes hum-bad-halo {
0% {
box-shadow:
0 0 80px 22px rgba(var(--hum-rgb), 0.45),
0 18px 75px -10px rgba(0,70,160,0.5);
}
50% {
box-shadow:
0 0 130px 40px rgba(var(--hum-rgb), 0.6),
0 26px 100px -8px rgba(0,90,190,0.65);
}
100% {
box-shadow:
0 0 80px 22px rgba(var(--hum-rgb), 0.45),
0 18px 75px -10px rgba(0,70,160,0.5);
}
}
.: |
mushroom-shape-icon {
--icon-size: 48px;
--icon-color: rgba(var(--hum-rgb),1) !important;
display: flex;
margin: -16px 0 10px -20px !important;
padding-right: 22px;
padding-bottom: 18px;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
/* FONT SIZE & SPACING SETTINGS */
--card-primary-font-size: 1.4rem !important;
/* Increases vertical space between primary and secondary */
--card-primary-line-height: 1.3 !important;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- >-
sensor.xiaomi_cn_blt_3_1ni9qhv584c03_mini_relative_humidity_p_2_1002
line_color: lightblue
line_width: 5
hours_to_show: 24
show:
name: false
icon: false
state: false
labels: false
legend: false
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
opacity: 50%;
border: none;
width: 250px;
mask-image: radial-gradient(
ellipse at center,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0) 90%
);
}
card_mod:
style:
.: |
ha-card {
background: none;
box-shadow: none;
border: none;
margin: 8px 12px;
position: absolute;
bottom: -10px;
right: -10px;
}
columns: 2
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
icon: ''
card_layout: large
rows: '0.5'
- type: custom:mushroom-entity-card
entity: binary_sensor.lumi_cn_775597154_acn001_contact_state_p_2_1
tap_action:
action: more-info
icon: mdi:door
name: 机柜门
icon_color: red
primary_info: state
secondary_info: name
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set is_open = is_state(config.entity, 'on') %}
/* LOGIC: Define colors and animations based on state */
{% if is_open %}
/* OPEN: Red, Dark Red Shape, Animated */
--icon-color-set: rgb(244, 67, 54);
--shape-color-set: rgba(160, 0, 0, 0.15);
--shape-animation: door-soft-open 1.7s ease-in-out infinite;
/* Increased duration slightly for smoother persistent glow */
--glow-animation: door-soft-glow 2.5s ease-in-out infinite;
--beam-animation: door-soft-beam 2.5s ease-in-out infinite;
--icon-filter: drop-shadow(0 0 6px rgba(160, 0, 0, 0.95));
{% else %}
/* CLOSED: Green, Dark Green Shape, Static */
--icon-color-set: rgb(76, 175, 80);
--shape-color-set: rgba(0, 80, 0, 0.4);
--shape-animation: none;
--glow-animation: none;
--beam-animation: none;
--icon-filter: none;
{% endif %}
/* Apply the variable colors defined above */
background-color: var(--shape-color-set) !important;
/* Standard positioning */
position: relative;
transform-origin: 25% 50%;
animation: var(--shape-animation);
}
/* Color and Filter for the Icon itself */
.shape ha-icon {
color: var(--icon-color-set) !important;
filter: var(--icon-filter);
}
/* --- ANIMATION LAYERS --- */
.shape::before,
.shape::after {
content: '';
position: absolute;
border-radius: inherit;
pointer-events: none;
}
/* Inner Glow */
.shape::before {
inset: -10px;
animation: var(--glow-animation);
}
/* Outer Beam */
.shape::after {
inset: -15px;
animation: var(--beam-animation);
mix-blend-mode: screen;
}
/* --- KEYFRAMES --- */
@keyframes door-soft-open {
0% { transform: rotate(0deg); }
40% { transform: rotate(-9deg); }
70% { transform: rotate(-6deg); }
100% { transform: rotate(0deg); }
}
@keyframes door-soft-glow {
0% {
box-shadow:
0 0 20px 0 rgba(160, 0, 0, 0.7),
0 0 40px 6 rgba(160, 0, 0, 0.6),
0 0 80px 14px rgba(160, 0, 0, 0.4);
}
50% {
box-shadow:
0 0 30px 4 rgba(200, 0, 0, 1),
0 0 70px 16px rgba(200, 0, 0, 0.95),
0 0 120px 28px rgba(200, 0, 0, 0.7);
}
100% {
box-shadow:
0 0 20px 0 rgba(160, 0, 0, 0.7),
0 0 40px 6 rgba(160, 0, 0, 0.6),
0 0 80px 14px rgba(160, 0, 0, 0.4);
}
}
/* UPDATED: Huge halo now never fully disappears */
@keyframes door-soft-beam {
0% {
/* Small, persistent base glow */
box-shadow:
0 0 40px 10px rgba(160, 0, 0, 0.3),
0 0 60px 20px rgba(100, 0, 0, 0.2);
opacity: 0.4;
}
50% {
/* Maximum Intense Glow */
box-shadow:
0 0 160px 60px rgba(230, 20, 20, 0.8),
0 0 230px 100px rgba(160, 0, 0, 0.7);
opacity: 1;
}
100% {
/* Return to base glow */
box-shadow:
0 0 40px 10px rgba(160, 0, 0, 0.3),
0 0 60px 20px rgba(100, 0, 0, 0.2);
opacity: 0.4;
}
}
.: |
mushroom-shape-icon {
--icon-size: 48px;
display: flex;
margin: -5px 0 10px -14px !important;
padding-right: 22px;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
}
grid_options:
columns: 12
rows: 1
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
icon: ''
card_layout: large
rows: '0.5'
- type: custom:mushroom-light-card
entity: light.lemesh_cn_2077009002_wy0d02_s_2_light
use_light_color: true
show_color_temp_control: true
show_brightness_control: true
collapsible_controls: false
show_color_control: true
name: 机柜灯
icon_color: auto
grid_options:
columns: 12
rows: 2
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{# ========== USER CONFIG ========== #}
{% set state_entity = 'light.lemesh_cn_2077009002_wy0d02_s_2_light' %}
{% set active_value = 'on' %}
{# ======== TRIGGER ======== #}
{% set trigger_active = (states(state_entity) == active_value) %}
{# ======== COLOR FROM ENTITY (rgb_color) ======== #}
{% set rgb = state_attr(config.entity, 'rgb_color') %}
{% if rgb is not none %}
{% set r = (rgb[0] | int) %}
{% set g = (rgb[1] | int) %}
{% set b = (rgb[2] | int) %}
{% else %}
{# fallback for CT-only lights #}
{% set r = 255 %}
{% set g = 240 %}
{% set b = 200 %}
{% endif %}
{% if trigger_active %}
--shape-animation: lamp-sweep 1.8s ease-in-out infinite;
opacity: 1;
{% else %}
--shape-animation: none;
opacity: 0.5;
{% endif %}
position: relative;
transform-origin: 50% 60%;
}
@keyframes lamp-sweep {
0% {
filter: brightness(1.1);
box-shadow:
0 0 12px 4px rgba({{ r }}, {{ g }}, {{ b }}, 0.9),
0 30px 40px -10px rgba({{ r }}, {{ g }}, {{ b }}, 0.0);
transform: rotate(-4deg) scale(1);
}
25% {
filter: brightness(1.4);
box-shadow:
0 0 18px 8px rgba({{ r }}, {{ g }}, {{ b }}, 1),
-8px 35px 45px -12px rgba({{ r }}, {{ g }}, {{ b }}, 0.5);
transform: rotate(3deg) scale(1.02);
}
50% {
filter: brightness(1.2);
box-shadow:
0 0 24px 10px rgba({{ r }}, {{ g }}, {{ b }}, 0.9),
8px 35px 45px -12px rgba({{ r }}, {{ g }}, {{ b }}, 0.5);
transform: rotate(-2deg) scale(1.03);
}
75% {
filter: brightness(1.5);
box-shadow:
0 0 18px 8px rgba({{ r }}, {{ g }}, {{ b }}, 1),
-6px 30px 40px -12px rgba({{ r }}, {{ g }}, {{ b }}, 0.4);
transform: rotate(2deg) scale(1.01);
}
100% {
filter: brightness(1.1);
box-shadow:
0 0 12px 4px rgba({{ r }}, {{ g }}, {{ b }}, 0.8),
0 30px 40px -10px rgba({{ r }}, {{ g }}, {{ b }}, 0.0);
transform: rotate(-4deg) scale(1);
}
}
.: |
mushroom-shape-icon {
--icon-size: 65px;
display: flex;
margin: -18px 0px 0px -18px !important;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
}
icon: mdi:led-strip-variant
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
icon: ''
card_layout: large
rows: '0.5'
- type: custom:mushroom-entity-card
entity: switch.cuco_cn_2006579195_v3_on_p_2_1
tap_action:
action: none
icon: mdi:power-socket-au
icon_color: light-blue
name: Nas 插座
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{# ========== USER CONFIG ========== #}
{# true = number mode, false = state mode #}
{% set use_number = false %}
{# STATE MODE SETTINGS #}
{% set state_entity = 'switch.cuco_cn_2006579195_v3_on_p_2_1' %}
{% set active_value = 'on' %}
{# OPTIONAL: NUMBER MODE SETTINGS #}
{% set number_entity = 'sensor.plug_power' %}
{# '>' '<' '=' '>=' '<=' #}
{% set number_operator = '>' %}
{% set threshold = 0.0 %}
{# ========== END USER CONFIG ====== #}
{# ======== TRIGGER DECISION LOGIC ======== #}
{% if use_number %}
{% set num = states(number_entity) | float(0) %}
{% if number_operator == '>' %}
{% set trigger_active = (num > threshold) %}
{% elif number_operator == '<' %}
{% set trigger_active = (num < threshold) %}
{% elif number_operator == '=' %}
{% set trigger_active = (num == threshold) %}
{% elif number_operator == '>=' %}
{% set trigger_active = (num >= threshold) %}
{% elif number_operator == '<=' %}
{% set trigger_active = (num <= threshold) %}
{% else %}
{% set trigger_active = false %}
{% endif %}
{% else %}
{% set trigger_active = (states(state_entity) == active_value) %}
{% endif %}
{# =========== END TRIGGER LOGIC =========== #}
{% if trigger_active %}
{# adjust speed based on this plug's own power attribute #}
{% set p = state_attr(config.entity, 'current_power_w') | float(0) %}
{% set dur = 1.6 - (p / 800) %}
--shape-animation: ultra-plug-on {{ [0.4, dur] | max | round(2) }}s ease-in-out infinite;
--plug-glow-animation: ultra-plug-glow 1.8s ease-in-out infinite;
--plug-arcs-animation: ultra-plug-arcs 1.2s linear infinite;
opacity: 1;
{% else %}
--shape-animation: none;
--plug-glow-animation: none;
--plug-arcs-animation: none;
opacity: 0.7;
{% endif %}
transform-origin: 50% 50%;
position: relative;
}
.shape::before,
.shape::after {
content: '';
position: absolute;
inset: -4px;
border-radius: inherit;
pointer-events: none;
}
.shape::before {
animation: var(--plug-glow-animation);
}
.shape::after {
animation: var(--plug-arcs-animation);
}
@keyframes ultra-plug-on {
0% { transform: scale(1); }
25% { transform: scale(1.05) translateY(-1px); }
50% { transform: scale(1.08) translateY(-2px); }
75% { transform: scale(1.04) translateY(-1px); }
100% { transform: scale(1); }
}
@keyframes ultra-plug-glow {
0% {
box-shadow:
0 0 10px 3px rgba(var(--rgb-{{ config.icon_color }}), 0.6),
0 0 20px 8px rgba(var(--rgb-{{ config.icon_color }}), 0.3);
}
50% {
box-shadow:
0 0 18px 6px rgba(var(--rgb-{{ config.icon_color }}), 0.9),
0 0 32px 12px rgba(var(--rgb-{{ config.icon_color }}), 0.4);
}
100% {
box-shadow:
0 0 10px 3px rgba(var(--rgb-{{ config.icon_color }}), 0.6),
0 0 20px 8px rgba(var(--rgb-{{ config.icon_color }}), 0.3);
}
}
@keyframes ultra-plug-arcs {
0% {
box-shadow:
-10px -6px 0 -4px rgba(var(--rgb-{{ config.icon_color }}), 0.0),
12px 4px 0 -4px rgba(var(--rgb-{{ config.icon_color }}), 0.0);
}
25% {
box-shadow:
-10px -6px 0 -4px rgba(var(--rgb-{{ config.icon_color }}), 0.7),
12px 4px 0 -4px rgba(var(--rgb-{{ config.icon_color }}), 0.4);
}
50% {
box-shadow:
-6px 2px 0 -4px rgba(var(--rgb-{{ config.icon_color }}), 0.3),
10px -8px 0 -4px rgba(var(--rgb-{{ config.icon_color }}), 0.7);
}
75% {
box-shadow:
-12px 4px 0 -4px rgba(var(--rgb-{{ config.icon_color }}), 0.5),
8px 0 0 -4px rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
100% {
box-shadow:
-10px -6px 0 -4px rgba(var(--rgb-{{ config.icon_color }}), 0.0),
12px 4px 0 -4px rgba(var(--rgb-{{ config.icon_color }}), 0.0);
}
}
.: |
mushroom-shape-icon {
--icon-size: 65px;
display: flex;
margin: -18px 0 10px -20px !important;
padding-right: 10px;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
}
grid_options:
columns: 12
rows: 1.5
- type: custom:mushroom-entity-card
entity: sensor.cuco_cn_2006579195_v3_electric_power_p_11_2
icon: mdi:nas
icon_color: red
hold_action:
action: more-info
double_tap_action:
action: none
name: Nas Plug
card_mod:
style:
.: |
ha-card {
/* ================= USER SETTINGS ================= */
{% set power_entity = 'sensor.cuco_cn_2006579195_v3_electric_power_p_11_2' %}
{% set max_w = 60 %}
/* ================================================= */
/* --- LOGIC --- */
{% set current_w = states(power_entity) | float(0) %}
/* ACTIVE determines if animations/glows are ON (depends only on power) */
{% set active = current_w > 0 %}
/* Calculate Load Percentage */
{% set width_pct = (current_w / max_w * 100) | round(2) %}
{% if width_pct > 100 %}{% set width_pct = 100 %}{% endif %}
/* --- PASS VARIABLES TO CSS --- */
/* Define the color we want the effects to use (from config) */
--active-color: var(--rgb-{{ config.icon_color }});
--bar-width: {{ width_pct }}%;
--bar-opacity: {{ 1 if active else 0 }};
/* Text color: If power > 0, show colored text. Else dim. */
--text-color: {{ 'rgba(var(--active-color), 1)' if active else 'rgba(255,255,255,0.5)' }};
/* PASS ANIMATION VARIABLES DOWN TO SHADOW DOM */
--shape-animation: {{ 'ultra-plug-on 3s ease-in-out infinite' if active else 'none' }};
--plug-glow-animation: {{ 'ultra-plug-glow 3s ease-in-out infinite' if active else 'none' }};
--plug-arcs-animation: {{ 'ultra-plug-arcs 3s linear infinite' if active else 'none' }};
--effect-opacity: {{ 1 if active else 0 }};
/* --- CARD STYLING --- */
{% if active %}
background-color: #1c1c1c !important;
border: none !important;
background-image:
radial-gradient(circle at 24px 24px, rgba(var(--active-color), 0.35) 0%, rgba(var(--active-color), 0.1) 40%, transparent 80%),
linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.1)) !important;
background-size: 100% 100%, 100% 6px !important;
background-position: top left, bottom left !important;
background-repeat: no-repeat !important;
{% else %}
/* When Power is 0: Clean slate */
background-image: none !important;
box-shadow: none !important;
{% endif %}
border-radius: 12px;
position: relative;
overflow: hidden;
transition: all 0.5s ease;
}
/* --- WATTAGE BADGE (Top Right) --- */
ha-card::before {
content: '{{ current_w | round(1) }} W';
position: absolute;
top: 12px;
right: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--text-color);
/* Only show badge background if active */
background: {{ 'rgba(0, 0, 0, 0.2)' if active else 'transparent' }};
border: {{ '1px solid rgba(255, 255, 255, 0.1)' if active else 'none' }};
padding: 4px 8px;
border-radius: 6px;
backdrop-filter: blur(2px);
transition: all 0.5s ease;
z-index: 2;
}
/* --- ACTIVE PROGRESS BAR (BEAM) --- */
ha-card::after {
content: '';
position: absolute;
bottom: 0; left: 0;
height: 6px;
width: var(--bar-width);
background: linear-gradient(90deg,
rgba(var(--active-color), 0.4) 0%,
rgba(var(--active-color), 1) 100%
);
box-shadow: 0 -2px 15px rgba(var(--active-color), 0.9);
opacity: var(--bar-opacity);
transition: width 0.5s ease-out, opacity 0.5s ease;
animation: current-flow 1.5s infinite linear;
}
@keyframes current-flow {
0% { filter: brightness(1); opacity: 0.8; }
50% { filter: brightness(1.5); opacity: 1; }
100% { filter: brightness(1); opacity: 0.8; }
}
mushroom-shape-icon {
--icon-size: 65px;
display: flex;
margin: -18px 0 10px -20px !important;
padding-right: 15px;
padding-bottom: 15px;
}
mushroom-shape-icon$: >
.shape {
/* Receive animation variables from Main Card logic */
animation: var(--shape-animation) !important;
overflow: visible !important;
position: relative;
}
/* Create the Pseudo-Elements for Glow and Arcs */
.shape::before,
.shape::after {
content: '';
position: absolute;
inset: -4px;
border-radius: inherit;
pointer-events: none;
opacity: var(--effect-opacity);
}
/* Glow Layer */
.shape::before {
animation: var(--plug-glow-animation);
}
/* Electric Arcs Layer */
.shape::after {
animation: var(--plug-arcs-animation);
}
/* --- ANIMATION KEYFRAMES --- */
/* Note: We use var(--active-color) so the glow stays green
even if icon is gray */
@keyframes ultra-plug-on {
0% { transform: scale(1); }
25% { transform: scale(1.05) translateY(-1px); }
50% { transform: scale(1.08) translateY(-2px); }
75% { transform: scale(1.04) translateY(-1px); }
100% { transform: scale(1); }
}
@keyframes ultra-plug-glow {
0% {
box-shadow:
0 0 10px 3px rgba(var(--active-color), 0.6),
0 0 20px 8px rgba(var(--active-color), 0.3);
}
50% {
box-shadow:
0 0 18px 6px rgba(var(--active-color), 0.9),
0 0 32px 12px rgba(var(--active-color), 0.4);
}
100% {
box-shadow:
0 0 10px 3px rgba(var(--active-color), 0.6),
0 0 20px 8px rgba(var(--active-color), 0.3);
}
}
@keyframes ultra-plug-arcs {
0% {
box-shadow:
-10px -6px 0 -4px rgba(var(--active-color), 0.0),
12px 4px 0 -4px rgba(var(--active-color), 0.0);
}
25% {
box-shadow:
-10px -6px 0 -4px rgba(var(--active-color), 0.7),
12px 4px 0 -4px rgba(var(--active-color), 0.4);
}
50% {
box-shadow:
-6px 2px 0 -4px rgba(var(--active-color), 0.3),
10px -8px 0 -4px rgba(var(--active-color), 0.7);
}
75% {
box-shadow:
-12px 4px 0 -4px rgba(var(--active-color), 0.5),
8px 0 0 -4px rgba(var(--active-color), 0.2);
}
100% {
box-shadow:
-10px -6px 0 -4px rgba(var(--active-color), 0.0),
12px 4px 0 -4px rgba(var(--active-color), 0.0);
}
}
grid_options:
columns: 12
rows: 1.5
- type: custom:mushroom-entity-card
entity: sensor.cuco_cn_2006579195_v3_power_consumption_p_11_1
tap_action:
action: more-info
name: 用电量
icon: mdi:lightning-bolt
primary_info: state
secondary_info: name
icon_color: light-grey
card_mod:
style: |
ha-card {
/* ===== LOGIC & SETTINGS ===== */
{% set state = states(config.entity) %}
/* 1. Get the Grass Sensor Data */
{% set grass = states('sensor.cuco_cn_2006579195_v3_power_consumption_p_11_1') %}
/* 2. Define Colors based on state */
{% if state in ['high', 'very-high', 'red'] %}
{% set c1 = '255, 65, 108' %} /* Red RGB */
{% set c2 = '255, 75, 43' %} /* Orange RGB */
{% set speed = '4s' %}
{% elif state in ['moderate', 'medium', 'orange'] %}
{% set c1 = '247, 151, 30' %} /* Orange RGB */
{% set c2 = '255, 210, 0' %} /* Yellow RGB */
{% set speed = '7s' %}
{% else %}
{% set c1 = '0, 242, 96' %} /* Green RGB */
{% set c2 = '5, 117, 230' %} /* Blue RGB */
{% set speed = '12s' %}
{% endif %}
/* 3. Pass variables to CSS */
--aura-color-1: rgba({{ c1 }}, 0.6);
--aura-color-2: rgba({{ c2 }}, 0.6);
--speed: {{ speed }};
/* 4. Card Body Styling */
background: #101010 !important;
border-radius: 25px;
border: 1px solid rgba(255,255,255,0.08);
position: relative;
overflow: hidden;
box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
ha-card::before {
content: "";
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
z-index: 0;
/* Two radial gradients in one element */
background-image:
radial-gradient(circle at 50% 50%, var(--aura-color-1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, var(--aura-color-2) 0%, transparent 50%);
filter: blur(60px);
opacity: 0.8;
animation: rotate-aura var(--speed) linear infinite;
}
ha-card::after {
/* INJECT THE DATA HERE */
content: '{{ grass }}';
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
z-index: 10;
/* Badge Styling (Like the battery example) */
color: white;
font-weight: 700;
font-size: 14px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(4px);
padding: 4px 10px;
border-radius: 12px;
text-shadow: 0 1px 2px black;
}
/* --- GLASS SURFACE OVERLAY --- */
mushroom-shape-icon {
--icon-size: 68px;
--icon-color: rgba(var(--voc-rgb),1) !important;
display: flex;
margin: -18px 0 10px -15px !important;
padding-right: 22px;
padding-bottom: 10px;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
--card-primary-font-size: 1.2rem !important;
--card-primary-line-height: 1.3 !important;
}
/* Typography */
.mushroom-state-info span.primary {
color: white !important;
font-weight: 600 !important;
font-size: 16px !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.mushroom-state-info span.secondary {
color: rgba(255,255,255,0.8) !important;
}
/* Icon Styling */
mushroom-shape-icon {
--icon-size: 60px;
--icon-color: white !important;
}
ha-state-icon {
color: white !important;
}
/* Animation */
@keyframes rotate-aura {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
grid_options:
columns: 12
rows: 1.5
column_span: 1
cards: []
visible:
- user: 7a6c93d08acc4692bfd561154bb386df
- user: 7809f2c31fda449b8e7c5a0d2eaf5fd5
- type: masonry
path: wash
cards:
- type: custom:mushroom-entity-card
entity: sensor.875060396221041554_bsh_common_setting_powerstate
name: 洗衣机
icon: mdi:washing-machine
primary_info: name
secondary_info: state
tap_action:
action: more-info
icon_color: light-grey
fill_container: false
card_mod:
style:
.: |
ha-card {
/* ======================== */
/* USER CONFIGURATION */
/* ======================== */
/* 1. ENTITIES (Update these!) */
{% set ent_status = 'sensor.bshcn_cn_x_13164_37533621_875060396221041554_e0ec0342_k7d00w_status_p_2_24' %}
{% set ent_timerem = 'sensor.bshcn_cn_x_13164_37533621_875060396221041554_e0ec0342_k7d00w_left_time_p_2_1' %}
{% set max_time = 120 %}
{% set ent_power = 'sensor.smart_plug_power' %}
/* OPTIONAL Progress Percentage Sensor (if exists) */
{% set ent_percent = 'sensor.875060396221041554_bsh_common_option_programprogress' %}
/* 2. SIZES (Px) */
--config-icon-size: 65px;
--config-font-primary: 15px;
--config-font-secondary: 12px;
--config-font-badge: 12px;
/* ======================== */
/* --- SENSORS & TIME --- */
{% set status = states(ent_status) %}
{% set status_clean = status | replace('-', ' ') | title %}
{% set time_rem = states(ent_timerem) | int(0) %}
{% set raw_percent = states(ent_percent) | float(-1) %}
/* --- POWER CALCULATION --- */
{% set power_w = states(ent_power) | float(0) | round %}
{% set power_text = ' • ' ~ power_w ~ 'W' if power_w > 0 else '' %}
/* Format Time (min -> Xh Ym) */
{% set hours = (time_rem / 60) | int %}
{% set mins = time_rem % 60 %}
{% set time_formatted = '%dh %02dm' | format(hours, mins) %}
/* --- PROGRESS CALCULATION --- */
{% if status | lower in ['idle', 'off', 'standby', 'unknown', 'unavailable'] %}
{% set progress = 0 %}
{% set badge_text = status_clean ~ power_text %}
{% else %}
/* LOGIC: Use Sensor if available, otherwise Calculate */
{% if raw_percent >= 0 %}
/* Use the sensor provided percentage */
{% set progress = raw_percent | int %}
{% else %}
/* Fallback: Calculate based on max_time */
{% set max_cycle_time = max_time %}
{% set calc_prog = ((max_cycle_time - time_rem) / max_cycle_time * 100) | int %}
{% set progress = [5, [calc_prog, 100] | min] | max %}
{% endif %}
{% set badge_text = status_clean ~ ' • ' ~ time_formatted ~ power_text %}
{% endif %}
/* --- STATE DEFINITIONS --- */
{% set s_lower = status | lower %}
{% set is_running = s_lower in ['wash', 'washing', 'rinse', 'rinsing', 'pre-wash', 'soak'] %}
{% set is_spinning = s_lower in ['spin', 'spinning'] %}
{% set is_drying = s_lower in ['dry', 'drying'] %}
{% set is_done = s_lower in ['finished', 'complete', 'end'] %}
/* --- ASSIGN ANIMATIONS --- */
{% if is_drying %}
{% set color = '255, 152, 0' %} /* Orange */
{% set anim_type = 'steam-rise 2s ease-in-out infinite' %}
{% set icon_shake = 'none' %}
{% set wave_anim = 'wave 4s linear infinite' %}
{% set overlay_img = 'linear-gradient(0deg, transparent, rgba(255,255,255,0.5), transparent)' %}
{% elif is_spinning %}
{% set color = '0, 255, 255' %} /* cyan */
{% set anim_type = 'none' %}
{% set icon_shake = 'washer-spin-smooth 0.8s linear infinite' %}
{% set wave_anim = 'wave 2s linear infinite' %} /* Fast Wave */
{% set overlay_img = 'radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 60%)' %}
{% elif is_done %}
{% set color = '76, 175, 80' %} /* Green */
{% set anim_type = 'sparkle 2s infinite' %}
{% set icon_shake = 'none' %}
{% set wave_anim = 'wave 4s linear infinite' %}
{% set overlay_img = 'radial-gradient(circle, rgba(255,255,255,0.8) 10%, transparent 60%)' %}
{% elif is_running %}
{% set color = '33, 150, 243' %} /* Blue */
{% set anim_type = 'bubbles 1s linear infinite' %}
{% set icon_shake = 'shake 1.5s ease-in-out infinite' %} /* Slow Shake */
{% set wave_anim = 'wave 4s linear infinite' %}
{% set overlay_img = 'radial-gradient(2px 2px at 20% 80%, white, transparent), radial-gradient(2px 2px at 50% 70%, white, transparent)' %}
{% else %}
{% set color = '158, 158, 158' %} /* Grey */
{% set anim_type = 'none' %}
{% set icon_shake = 'none' %}
{% set wave_anim = 'none' %}
{% set overlay_img = 'none' %}
{% endif %}
/* --- OUTPUT VARIABLES --- */
--wm-color: {{ color }};
--wm-level: {{ progress }}%;
--wm-anim-overlay: {{ anim_type }};
--wm-anim-shake: {{ icon_shake }};
--wm-anim-wave: {{ wave_anim }};
--wm-overlay-bg: {{ overlay_img }};
--wm-badge-content: "{{ badge_text }}";
transition: all 0.5s ease;
overflow: hidden;
}
/* BADGE */
ha-card::before {
content: var(--wm-badge-content);
position: absolute;
top: 10px; right: 10px;
background: rgba(var(--wm-color), 0.15);
color: rgb(var(--wm-color));
border: 1px solid rgba(var(--wm-color), 0.3);
padding: 2px 10px;
border-radius: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: var(--config-font-badge);
}
/* BAR */
ha-card::after {
content: '';
position: absolute;
bottom: 0; left: 0;
height: 4px;
width: var(--wm-level);
background: rgb(var(--wm-color));
box-shadow: 0 0 10px rgb(var(--wm-color));
transition: width 0.5s ease;
}
mushroom-shape-icon$: |
.shape {
--icon-size: var(--config-icon-size) !important;
background: rgba(255, 255, 255, 0.05) !important;
overflow: hidden;
position: relative;
border: 1px solid rgba(255,255,255,0.1);
/* Apply the animation determined by the Logic below */
animation: var(--wm-anim-shake) !important;
transform-origin: center center;
}
/* Wave Layer */
.shape::before {
content: '';
position: absolute;
left: -50%;
width: 200%; height: 200%;
top: calc(100% - var(--wm-level));
background: rgba(var(--wm-color), 0.6);
border-radius: 40%;
animation: var(--wm-anim-wave);
}
/* Overlay Layer (Bubbles/Steam) */
.shape::after {
content: '';
position: absolute;
inset: 0;
background-image: var(--wm-overlay-bg);
background-size: 100% 100%;
animation: var(--wm-anim-overlay);
z-index: 2;
}
/* The Icon Itself */
ha-icon {
z-index: 3;
mix-blend-mode: overlay;
color: white !important;
}
/* --- KEYFRAMES --- */
@keyframes wave {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes shake {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(5deg) translateY(-1px); }
75% { transform: rotate(-5deg) translateY(1px); }
}
@keyframes bubbles {
0% { transform: translateY(10px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(-20px); opacity: 0; }
}
@keyframes steam-rise {
0% { opacity: 0; transform: translateY(5px); }
50% { opacity: 0.8; }
100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes sparkle {
0%, 100% { opacity: 0.3; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.1); }
}
@keyframes washer-spin-smooth {
0% {
transform: rotate(0deg) translate(0,0);
box-shadow: inset 0 0 0 2px rgba(var(--wm-color), 0.7);
}
25% { transform: rotate(90deg) translate(0.5px, 0.5px); }
50% { transform: rotate(180deg) translate(0,0); }
75% { transform: rotate(270deg) translate(-0.5px, -0.5px); }
100% {
transform: rotate(360deg) translate(0,0);
box-shadow: inset 0 0 0 2px rgba(var(--wm-color), 0.7);
}
}
mushroom-state-info$: |
.container .primary {
font-size: var(--config-font-primary) !important;
}
.container .secondary {
font-size: var(--config-font-secondary) !important;
}
grid_options:
columns: 12
rows: 1
icon: mdi:washing-machine
visible:
- user: 7a6c93d08acc4692bfd561154bb386df
- user: 7809f2c31fda449b8e7c5a0d2eaf5fd5
- type: sections
max_columns: 4
title: 测试
path: unknown
sections:
- type: grid
cards:
- type: heading
heading: 新建部件
visible:
- user: 7a6c93d08acc4692bfd561154bb386df
- user: 7809f2c31fda449b8e7c5a0d2eaf5fd5
cards: []
- type: sections
path: anashost
max_columns: 4
title: Anashost
icon: mdi:test-tube
sections:
- type: grid
cards:
- type: heading
heading: 新建部件
- type: custom:stack-in-card
mode: vertical
keep:
outer_padding: false
margin: true
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: >-
sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1
icon_color: '{{states(''sensor.livingroom_temp_color_no_rgb'')}}'
icon: mdi:thermometer
use_entity_picture: true
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: more-info
content: >-
{% if
is_state('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1','unavailable')
%}
-
{% elif
is_state('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1','unknown')
%}
-
{% else %}
{{states('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1')}}°
{% endif %}
- type: template
entity: >-
sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2
icon_color: light-blue
icon: mdi:water-percent
name: ''
use_entity_picture: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
content: >-
{% if
is_state('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2','unavailable')
%}
-
{% else %}
{{states('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2')}}%
{% endif %}
- type: template
double_tap_action:
action: none
icon: mdi:lightbulb-group
content: |-
{% if is_state('sensor.lights_of_count','0') %}
{% else %}
{{states('sensor.lights_of_count')}}
{% endif %}
icon_color: |-
{% set state = states('sensor.lights_of_count')|float %}
{% if state <= 0 %} grey
{% else %} amber
{% endif %}
hold_action:
action: none
tap_action:
action: none
entity: sensor.lights_of_count
- type: template
double_tap_action:
action: none
icon: mdi:water
content: |-
{% if is_state('sensor.water_damage_count','0') %}
{% else %}
{{states('sensor.water_damage_count')}}
{% endif %}
icon_color: >-
{% set state = states('sensor.water_damage_count')|float
%}
{% if state <= 0 %} grey
{% else %} blue
{% endif %}
hold_action:
action: none
tap_action:
action: none
entity: sensor.water_damage_count
alignment: center
- type: custom:swipe-card
mode: vertical
keep:
outer_padding: false
margin: true
box_shadow: false
background: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card{
box-shadow: none;
}
entity: input_boolean.on_state
double_tap_action:
action: none
icon: mdi:home
icon_color: teal
layout: vertical
hold_action:
action: none
tap_action:
action: navigate
navigation_path: main-home
primary_info: none
secondary_info: name
name: 首页
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card{
box-shadow: none;
}
entity: input_boolean.on_state
icon: mdi:server
icon_color: white
layout: vertical
primary_info: none
secondary_info: name
tap_action:
action: navigate
navigation_path: home-server
hold_action:
action: none
double_tap_action:
action: none
name: 机房
- type: custom:mushroom-entity-card
card_mod:
style: |
ha-card{
box-shadow: none;
}
entity: light.quan_wu_zhao_ming
icon_color: yellow
secondary_info: name
layout: vertical
name: Lights
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: more-info
primary_info: none
icon: mdi:lamps
- type: custom:stack-in-card
mode: vertical
keep:
outer_padding: false
margin: true
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: >-
sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1
icon_color: '{{states(''sensor.livingroom_temp_color_no_rgb'')}}'
icon: mdi:thermometer
use_entity_picture: true
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: more-info
content: >-
{% if
is_state('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1','unavailable')
%}
-
{% elif
is_state('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1','unknown')
%}
-
{% else %}
{{states('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1')}}°
{% endif %}
- type: template
entity: >-
sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2
icon_color: light-blue
icon: mdi:water-percent
name: ''
use_entity_picture: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
content: >-
{% if
is_state('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2','unavailable')
%}
-
{% else %}
{{states('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2')}}%
{% endif %}
- type: template
double_tap_action:
action: none
icon: mdi:lightbulb-group
content: |-
{% if is_state('sensor.lights_of_count','0') %}
{% else %}
{{states('sensor.lights_of_count')}}
{% endif %}
icon_color: |-
{% set state = states('sensor.lights_of_count')|float %}
{% if state <= 0 %} grey
{% else %} amber
{% endif %}
hold_action:
action: none
tap_action:
action: none
entity: sensor.lights_of_count
- type: template
double_tap_action:
action: none
icon: mdi:water
content: |-
{% if is_state('sensor.water_damage_count','0') %}
{% else %}
{{states('sensor.water_damage_count')}}
{% endif %}
icon_color: >-
{% set state = states('sensor.water_damage_count')|float
%}
{% if state <= 0 %} grey
{% else %} blue
{% endif %}
hold_action:
action: none
tap_action:
action: none
entity: sensor.water_damage_count
alignment: center
- type: custom:stack-in-card
mode: vertical
keep:
outer_padding: false
margin: true
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: >-
sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1
icon_color: '{{states(''sensor.livingroom_temp_color_no_rgb'')}}'
icon: mdi:thermometer
use_entity_picture: true
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: more-info
content: >-
{% if
is_state('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1','unavailable')
%}
-
{% elif
is_state('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1','unknown')
%}
-
{% else %}
{{states('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1')}}°
{% endif %}
- type: template
entity: >-
sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2
icon_color: light-blue
icon: mdi:water-percent
name: ''
use_entity_picture: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
content: >-
{% if
is_state('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2','unavailable')
%}
-
{% else %}
{{states('sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2')}}%
{% endif %}
- type: template
double_tap_action:
action: none
icon: mdi:lightbulb-group
content: |-
{% if is_state('sensor.lights_of_count','0') %}
{% else %}
{{states('sensor.lights_of_count')}}
{% endif %}
icon_color: |-
{% set state = states('sensor.lights_of_count')|float %}
{% if state <= 0 %} grey
{% else %} amber
{% endif %}
hold_action:
action: none
tap_action:
action: none
entity: sensor.lights_of_count
- type: template
double_tap_action:
action: none
icon: mdi:water
content: |-
{% if is_state('sensor.water_damage_count','0') %}
{% else %}
{{states('sensor.water_damage_count')}}
{% endif %}
icon_color: >-
{% set state = states('sensor.water_damage_count')|float
%}
{% if state <= 0 %} grey
{% else %} blue
{% endif %}
hold_action:
action: none
tap_action:
action: none
entity: sensor.water_damage_count
alignment: center
card_mod:
style: |
ha-card {
background-color: rgba(255, 255, 255, 0) !important;
box-shadow: none !important;
padding: 2px 0px 2px 0px;
}
visible:
- user: 7a6c93d08acc4692bfd561154bb386df
- user: 7809f2c31fda449b8e7c5a0d2eaf5fd5
cards: []
- type: sections
max_columns: 4
title: 中控
path: control-center
icon: mdi:view-dashboard
theme: ios-dark-mode-light-blue
sections:
- type: grid
column_span: 4
cards:
- type: picture
image:
media_content_id: /local/images/lbxx.jpg
media_content_type: ''
metadata:
navigateIds:
- {}
- media_content_type: ''
media_content_id: __MANUAL_ENTRY__
grid_options:
rows: auto
columns: 3
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
grid_options:
columns: 12
rows: 2
custom_fields:
greeting: |
[[[
const h = new Date().getHours();
if (h < 6) return "夜深了";
if (h < 11) return "早上好";
if (h < 14) return "中午好";
if (h < 18) return "下午好";
return "晚上好";
]]]
clock: |
[[[
return new Date().toLocaleTimeString(
'zh-CN',
{ hour: '2-digit', minute: '2-digit', hour12: false }
);
]]]
date: |
[[[
return new Date().toLocaleDateString(
'zh-CN',
{ month: 'long', day: 'numeric', weekday: 'long' }
);
]]]
subtitle: |
[[[
const leak = Number(states['sensor.water_damage_count']?.state ?? 0);
const lights = Number(states['sensor.lights_of_count']?.state ?? 0);
const ac = Number(states['sensor.aircondition_of_count']?.state ?? 0);
if (leak > 0) return `⚠ 检测到 ${leak} 个水浸告警`;
if (lights === 0 && ac === 0) return "家里一切正常";
return `${lights} 盏灯开启 · ${ac} 台空调运行`;
]]]
styles:
card:
- height: 120px
- padding: 20px 24px
- border-radius: 24px
- border: none
- background: >-
linear-gradient(135deg, rgba(32,35,42,0.95),
rgba(20,22,27,0.95))
- box-shadow: none
grid:
- grid-template-areas: |
"greeting clock"
"subtitle date"
- grid-template-columns: 1fr auto
- grid-template-rows: 1fr 1fr
custom_fields:
greeting:
- justify-self: start
- align-self: end
- font-size: 30px
- font-weight: 700
- color: white
subtitle:
- justify-self: start
- align-self: start
- font-size: 14px
- color: rgba(255,255,255,0.55)
clock:
- justify-self: end
- align-self: end
- font-size: 32px
- font-weight: 600
- color: white
date:
- justify-self: end
- align-self: start
- font-size: 14px
- color: rgba(255,255,255,0.55)
- type: grid
column_span: 4
cards:
- type: custom:button-card
entity: weather.he_feng_tian_qi_heweather
show_icon: false
show_name: false
show_state: false
grid_options:
columns: 6
rows: 3
custom_fields:
weather_icon: |
[[[
const s = entity?.state;
const isNight =
states['sun.sun']?.state === 'below_horizon';
if (s === 'sunny')
return isNight ? '🌙' : '☀️';
if (s === 'clear-night')
return '🌙';
if (s === 'cloudy')
return '☁️';
if (s === 'partlycloudy')
return isNight ? '☁️' : '⛅';
if (s === 'fog')
return '🌫️';
if (s === 'windy' || s === 'windy-variant')
return '🌬️';
if (s === 'rainy')
return '🌧️';
if (s === 'pouring')
return '🌧️';
if (s === 'lightning' || s === 'lightning-rainy')
return '⛈️';
if (s === 'hail')
return '🌨️';
if (s === 'snowy' || s === 'snowy-rainy')
return '❄️';
return '🌤️';
]]]
temp: |
[[[
const temp = Number(entity?.attributes?.temperature);
return Number.isFinite(temp)
? `${Math.round(temp)}°`
: '--°';
]]]
condition: |
[[[
const textEntity =
states['sensor.he_feng_tian_qi_heweather_text'];
if (
textEntity &&
!['unknown', 'unavailable'].includes(textEntity.state)
) {
return textEntity.state;
}
const map = {
sunny: '晴',
'clear-night': '晴',
cloudy: '阴',
partlycloudy: '多云',
fog: '雾',
rainy: '小雨',
pouring: '大雨',
lightning: '雷电',
'lightning-rainy': '雷雨',
hail: '冰雹',
snowy: '雪',
'snowy-rainy': '雨夹雪',
windy: '有风',
'windy-variant': '大风'
};
return map[entity?.state] ?? '--';
]]]
forecast: |
[[[
const feelsLike =
Number(entity?.attributes?.apparent_temperature);
if (Number.isFinite(feelsLike)) {
return `今天 · 体感 ${Math.round(feelsLike)}°`;
}
return '今天';
]]]
humidity: |
[[[
const humidity =
Number(entity?.attributes?.humidity);
return Number.isFinite(humidity)
? `湿度 ${Math.round(humidity)}%`
: '湿度 --';
]]]
styles:
card:
- height: 175px
- border-radius: 24px
- border: none
- padding: 22px
- overflow: hidden
- background: |
linear-gradient(
145deg,
#334b68 0%,
#23334a 55%,
#172131 100%
)
- box-shadow: none
grid:
- grid-template-areas: |
"weather_icon temp"
"weather_icon condition"
"forecast humidity"
- grid-template-columns: 1.3fr 1fr
- grid-template-rows: 2fr 1fr 1fr
custom_fields:
weather_icon:
- font-size: 74px
- align-self: center
- justify-self: center
- animation: weatherFloat 5s ease-in-out infinite
temp:
- font-size: 46px
- font-weight: 700
- justify-self: start
- align-self: end
- color: white
condition:
- font-size: 17px
- align-self: start
- justify-self: start
- color: rgba(255,255,255,0.7)
forecast:
- font-size: 13px
- align-self: end
- justify-self: center
- color: rgba(255,255,255,0.6)
humidity:
- font-size: 13px
- align-self: end
- justify-self: start
- color: rgba(255,255,255,0.6)
extra_styles: |
@keyframes weatherFloat {
0% {
transform: translateY(0px) scale(1);
}
50% {
transform: translateY(-6px) scale(1.03);
}
100% {
transform: translateY(0px) scale(1);
}
}
- square: false
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: >-
sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_temperature_p_2_1
tap_action:
action: more-info
icon: mdi:thermometer
name: 温度
primary_info: state
secondary_info: name
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{# ========== CONFIG ========== #}
{# == Updated: entity auto generated == #}
{% set temp = states(config.entity) | float(0) %}
{# ------------------------------------------- #}
{# TEMPERATURE → COLOR + EFFECT PRESETS #}
{# ------------------------------------------- #}
{# DEFAULTS (will be overridden by ranges) #}
{% set rgb = '0,140,255' %}
{% set anim = 'temp-cold-breathe' %}
{% set glow_anim = 'temp-cold-glow' %}
{% set halo_anim = 'temp-cold-halo' %}
{% set duration = 4.0 %}
{% set intensity = 0.5 %}
{# RANGES / COLORS #}
{# You can change temp numbers below if needed #}
{% if temp < 16 %}
{# BLUE #}
{% set rgb = '0,140,255' %}
{% set anim = 'temp-cold-breathe' %}
{% set glow_anim = 'temp-cold-glow' %}
{% set halo_anim = 'temp-cold-halo' %}
{% set duration = 4.4 %}
{% set intensity = 0.4 %}
{% elif temp < 18 %}
{# YELLOW #}
{% set rgb = '255,210,40' %}
{% set anim = 'temp-cool-wave' %}
{% set glow_anim = 'temp-cool-glow' %}
{% set halo_anim = 'temp-cool-halo' %}
{% set duration = 3.4 %}
{% set intensity = 0.55 %}
{% elif temp < 20 %}
{# ORANGE #}
{% set rgb = '255,150,40' %}
{% set anim = 'temp-comfy-breathe' %}
{% set glow_anim = 'temp-comfy-glow' %}
{% set halo_anim = 'temp-comfy-halo' %}
{% set duration = 3.0 %}
{% set intensity = 0.6 %}
{% elif temp < 22 %}
{# DARK ORANGE #}
{% set rgb = '255,115,20' %}
{% set anim = 'temp-warm-pulse' %}
{% set glow_anim = 'temp-warm-glow' %}
{% set halo_anim = 'temp-warm-halo' %}
{% set duration = 2.4 %}
{% set intensity = 0.8 %}
{% else %}
{# RED #}
{% set rgb = '255,40,40' %}
{% set anim = 'temp-hot-shimmer' %}
{% set glow_anim = 'temp-hot-glow' %}
{% set halo_anim = 'temp-hot-halo' %}
{% set duration = 2.0 %}
{% set intensity = 1.0 %}
{% endif %}
{# Apply variables #}
--temp-rgb: {{ rgb }};
--temp-intensity: {{ intensity }};
--shape-animation: {{ anim }} {{ duration }}s ease-in-out infinite;
--temp-glow-animation: {{ glow_anim }} {{ (duration * 0.9) | round(2) }}s ease-in-out infinite;
--temp-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
opacity: 1;
/* Icon color follows the temperature */
--icon-color: rgba({{ rgb }}, 1);
/* KILL THE THEME BLUE & MAKE SHAPE NEUTRAL */
background-color: rgba(77, 77, 77,0.1) !important;
box-shadow: none !important;
border: 1px solid rgba(255,255,255,0.06);
position: relative;
transform-origin: 50% 60%;
animation: var(--shape-animation);
}
/* Glow layers */
.shape::before,
.shape::after {
content: '';
position: absolute;
border-radius: inherit;
pointer-events: none;
}
.shape::before {
inset: -8px;
animation: var(--temp-glow-animation);
}
.shape::after {
inset: -22px;
animation: var(--temp-halo-animation);
mix-blend-mode: screen;
}
/* ========== COLD ========== */
@keyframes temp-cold-breathe {
0% { transform: scale(0.96); }
50% { transform: scale(1.03); }
100% { transform: scale(0.96); }
}
@keyframes temp-cold-glow {
0% {
box-shadow:
0 0 20px 0 rgba(var(--temp-rgb), 0.6),
0 0 34px 6 rgba(var(--temp-rgb), 0.55);
}
50% {
box-shadow:
0 0 30px 4 rgba(var(--temp-rgb), 0.95),
0 0 50px 10px rgba(var(--temp-rgb), 0.85);
}
100% {
box-shadow:
0 0 20px 0 rgba(var(--temp-rgb), 0.6),
0 0 34px 6 rgba(var(--temp-rgb), 0.55);
}
}
@keyframes temp-cold-halo {
0% {
box-shadow:
0 0 80px 20px rgba(var(--temp-rgb), 0.35),
0 -20px 80px -14px rgba(220, 240, 255, 0.55);
}
50% {
box-shadow:
0 0 130px 36px rgba(var(--temp-rgb), 0.5),
0 -34px 100px -8px rgba(240, 250, 255, 0.8);
}
100% {
box-shadow:
0 0 80px 20px rgba(var(--temp-rgb), 0.35),
0 -20px 80px -14px rgba(220, 240, 255, 0.55);
}
}
/* ========== COOL ========== */
@keyframes temp-cool-wave {
0% { transform: translateX(0); }
25% { transform: translateX(-1px); }
50% { transform: translateX(1px) translateY(-1px); }
75% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}
@keyframes temp-cool-glow {
0% {
box-shadow:
0 0 22px 0 rgba(var(--temp-rgb), 0.6),
0 0 34px 4 rgba(var(--temp-rgb), 0.7);
}
50% {
box-shadow:
0 0 28px 2 rgba(var(--temp-rgb), 0.95),
0 0 48px 12px rgba(var(--temp-rgb), 0.85);
}
100% {
box-shadow:
0 0 22px 0 rgba(var(--temp-rgb), 0.6),
0 0 34px 4 rgba(var(--temp-rgb), 0.7);
}
}
@keyframes temp-cool-halo {
0% {
box-shadow:
0 0 90px 26px rgba(var(--temp-rgb), 0.35),
0 18px 80px -12px rgba(0, 220, 255, 0.35);
}
50% {
box-shadow:
0 0 140px 42px rgba(var(--temp-rgb), 0.45),
0 30px 110px -10px rgba(0, 255, 255, 0.5);
}
100% {
box-shadow:
0 0 90px 26px rgba(var(--temp-rgb), 0.35),
0 18px 80px -12px rgba(0, 220, 255, 0.35);
}
}
/* ========== COMFY ========== */
@keyframes temp-comfy-breathe {
0% { transform: scale(0.98); }
50% { transform: scale(1.05); }
100% { transform: scale(0.98); }
}
@keyframes temp-comfy-glow {
50% {
box-shadow:
0 0 26px 4 rgba(var(--temp-rgb), 0.9),
0 0 42px 10px rgba(var(--temp-rgb), 0.85);
}
}
@keyframes temp-comfy-halo {
50% {
box-shadow:
0 0 120px 40px rgba(var(--temp-rgb), 0.45),
0 26px 80px -10px rgba(180,255,200,0.5);
}
}
/* ========== WARM ========== */
@keyframes temp-warm-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.07); }
100% { transform: scale(1); }
}
@keyframes temp-warm-glow {
50% {
box-shadow:
0 0 30px 4 rgba(var(--temp-rgb), 0.95),
0 0 54px 14px rgba(var(--temp-rgb), 0.9);
}
}
@keyframes temp-warm-halo {
50% {
box-shadow:
0 0 140px 48px rgba(var(--temp-rgb), 0.55),
0 26px 100px -10px rgba(255,210,150,0.5);
}
}
/* ========== HOT ========== */
@keyframes temp-hot-shimmer {
0% { transform: scale(1); filter: blur(0); }
50% { transform: scale(1.08); filter: blur(0.6px); }
100% { transform: scale(1); filter: blur(0); }
}
@keyframes temp-hot-glow {
50% {
box-shadow:
0 0 34px 6 rgba(var(--temp-rgb), 1),
0 0 62px 14px rgba(var(--temp-rgb), 0.95);
}
}
@keyframes temp-hot-halo {
50% {
box-shadow:
0 0 160px 60px rgba(var(--temp-rgb), 0.6),
0 34px 120px -12px rgba(255,150,100,0.6);
}
}
.: |
mushroom-shape-icon {
--icon-size: 48px;
--icon-color: rgba(var(--hum-rgb),1) !important;
display: flex;
margin: -16px 0 10px -20px !important;
padding-right: 22px;
padding-bottom: 18px;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
/* FONT SIZE & SPACING SETTINGS */
--card-primary-font-size: 1.4rem !important;
/* Increases vertical space between primary and secondary */
--card-primary-line-height: 1.3 !important;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- >-
sensor.xiaomi_cn_blt_3_1ni9qhv584c03_mini_temperature_p_2_1001
hours_to_show: 24
line_width: 5
show:
name: false
icon: false
state: false
labels: false
legend: false
color_thresholds:
- value: 0
color: blue
- value: 16
color: lightblue
- value: 18
color: orange
- value: 21
color: red
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
opacity: 50%;
border: none;
width: 250px;
mask-image: radial-gradient(
ellipse at center,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0) 90%
);
}
card_mod:
style:
.: |
ha-card {
background: none;
box-shadow: none;
border: none;
margin: 8px 12px;
position: absolute;
bottom: -10px;
right: -10px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: >-
sensor.miaomiaoc_cn_blt_3_1ndt1bnq04c04_t1_relative_humidity_p_2_2
tap_action:
action: more-info
icon: mdi:water-percent
name: 湿度
primary_info: state
secondary_info: name
card_mod:
style:
mushroom-shape-icon$: >
.shape {
{# ========== CONFIG ========== #}
{# == Updated: entity auto generated == #}
{% set hum = states(config.entity) | float(0) %}
{# DEFAULTS #}
{% set rgb = '120,210,255' %}
{% set anim = 'hum-good-breathe' %}
{% set glow_anim = 'hum-good-glow' %}
{% set halo_anim = 'hum-good-halo' %}
{% set duration = 3.2 %}
{# RANGES
< 40 -> BAD (dark blue)
40-60 -> GOOD (light blue)
> 60 -> MIDDLE / humid (medium blue)
#}
{% if hum < 40 %}
{# BAD - dry - dark blue #}
{% set rgb = '0,80,200' %}
{% set anim = 'hum-bad-pulse' %}
{% set glow_anim = 'hum-bad-glow' %}
{% set halo_anim = 'hum-bad-halo' %}
{% set duration = 2.8 %}
{% elif hum <= 60 %}
{# GOOD - light blue #}
{% set rgb = '120,210,255' %}
{% set anim = 'hum-good-breathe' %}
{% set glow_anim = 'hum-good-glow' %}
{% set halo_anim = 'hum-good-halo' %}
{% set duration = 3.4 %}
{% else %}
{# MIDDLE / humid - medium blue #}
{% set rgb = '40,140,255' %}
{% set anim = 'hum-mid-wave' %}
{% set glow_anim = 'hum-mid-glow' %}
{% set halo_anim = 'hum-mid-halo' %}
{% set duration = 3.0 %}
{% endif %}
--hum-rgb: {{ rgb }};
--shape-animation: {{ anim }} {{ duration }}s ease-in-out infinite;
--hum-glow-animation: {{ glow_anim }} {{ (duration * 0.9) | round(2) }}s ease-in-out infinite;
--hum-halo-animation: {{ halo_anim }} {{ (duration * 1.1) | round(2) }}s ease-in-out infinite;
/* Icon color follows humidity color */
--icon-color: rgba({{ rgb }}, 1);
/* Neutral pill so theme blue does not leak through */
background-color: rgba(77,77,77,0.2) !important;
box-shadow: none !important;
border: 1px solid rgba(255,255,255,0.06);
opacity: 1;
position: relative;
transform-origin: 50% 60%;
animation: var(--shape-animation);
}
/* Glow layers */
.shape::before,
.shape::after {
content: '';
position: absolute;
border-radius: inherit;
pointer-events: none;
}
.shape::before {
inset: -8px;
animation: var(--hum-glow-animation);
}
.shape::after {
inset: -22px;
animation: var(--hum-halo-animation);
mix-blend-mode: screen;
}
/* ========== GOOD - light blue ========== */
@keyframes hum-good-breathe {
0% { transform: scale(0.98); }
50% { transform: scale(1.04); }
100% { transform: scale(0.98); }
}
@keyframes hum-good-glow {
0% {
box-shadow:
0 0 18px 0 rgba(var(--hum-rgb), 0.55),
0 0 30px 4 rgba(var(--hum-rgb), 0.6);
}
50% {
box-shadow:
0 0 24px 4 rgba(var(--hum-rgb), 0.9),
0 0 44px 10px rgba(var(--hum-rgb), 0.85);
}
100% {
box-shadow:
0 0 18px 0 rgba(var(--hum-rgb), 0.55),
0 0 30px 4 rgba(var(--hum-rgb), 0.6);
}
}
@keyframes hum-good-halo {
0% {
box-shadow:
0 0 80px 24px rgba(var(--hum-rgb), 0.35),
0 18px 70px -12px rgba(180,230,255,0.3);
}
50% {
box-shadow:
0 0 120px 40px rgba(var(--hum-rgb), 0.45),
0 26px 90px -10px rgba(200,240,255,0.45);
}
100% {
box-shadow:
0 0 80px 24px rgba(var(--hum-rgb), 0.35),
0 18px 70px -12px rgba(180,230,255,0.3);
}
}
/* ========== MIDDLE / humid - medium blue ==========
*/
@keyframes hum-mid-wave {
0% { transform: translateX(0); }
25% { transform: translateX(-1px); }
50% { transform: translateX(1px) translateY(-1px); }
75% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}
@keyframes hum-mid-glow {
0% {
box-shadow:
0 0 20px 0 rgba(var(--hum-rgb), 0.6),
0 0 32px 4 rgba(var(--hum-rgb), 0.7);
}
50% {
box-shadow:
0 0 28px 3 rgba(var(--hum-rgb), 0.95),
0 0 48px 10px rgba(var(--hum-rgb), 0.85);
}
100% {
box-shadow:
0 0 20px 0 rgba(var(--hum-rgb), 0.6),
0 0 32px 4 rgba(var(--hum-rgb), 0.7);
}
}
@keyframes hum-mid-halo {
0% {
box-shadow:
0 0 90px 26px rgba(var(--hum-rgb), 0.4),
0 18px 80px -12px rgba(80,190,255,0.35);
}
50% {
box-shadow:
0 0 135px 42px rgba(var(--hum-rgb), 0.5),
0 28px 105px -10px rgba(100,210,255,0.5);
}
100% {
box-shadow:
0 0 90px 26px rgba(var(--hum-rgb), 0.4),
0 18px 80px -12px rgba(80,190,255,0.35);
}
}
/* ========== BAD - dry - dark blue ========== */
@keyframes hum-bad-pulse {
0% { transform: scale(0.97); }
40% { transform: scale(1.03); }
100% { transform: scale(0.97); }
}
@keyframes hum-bad-glow {
0% {
box-shadow:
0 0 18px 0 rgba(var(--hum-rgb), 0.6),
0 0 28px 4 rgba(var(--hum-rgb), 0.7);
}
50% {
box-shadow:
0 0 26px 4 rgba(var(--hum-rgb), 0.95),
0 0 44px 12px rgba(var(--hum-rgb), 0.9);
}
100% {
box-shadow:
0 0 18px 0 rgba(var(--hum-rgb), 0.6),
0 0 28px 4 rgba(var(--hum-rgb), 0.7);
}
}
@keyframes hum-bad-halo {
0% {
box-shadow:
0 0 80px 22px rgba(var(--hum-rgb), 0.45),
0 18px 75px -10px rgba(0,70,160,0.5);
}
50% {
box-shadow:
0 0 130px 40px rgba(var(--hum-rgb), 0.6),
0 26px 100px -8px rgba(0,90,190,0.65);
}
100% {
box-shadow:
0 0 80px 22px rgba(var(--hum-rgb), 0.45),
0 18px 75px -10px rgba(0,70,160,0.5);
}
}
.: |
mushroom-shape-icon {
--icon-size: 48px;
--icon-color: rgba(var(--hum-rgb),1) !important;
display: flex;
margin: -16px 0 10px -20px !important;
padding-right: 22px;
padding-bottom: 18px;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
/* FONT SIZE & SPACING SETTINGS */
--card-primary-font-size: 1.4rem !important;
/* Increases vertical space between primary and secondary */
--card-primary-line-height: 1.3 !important;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- >-
sensor.xiaomi_cn_blt_3_1ni9qhv584c03_mini_relative_humidity_p_2_1002
line_color: lightblue
line_width: 5
hours_to_show: 24
show:
name: false
icon: false
state: false
labels: false
legend: false
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
opacity: 50%;
border: none;
width: 250px;
mask-image: radial-gradient(
ellipse at center,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0) 90%
);
}
card_mod:
style:
.: |
ha-card {
background: none;
box-shadow: none;
border: none;
margin: 8px 12px;
position: absolute;
bottom: -10px;
right: -10px;
}
- type: custom:mushroom-entity-card
entity: sensor.xiaomi_cn_2005161482_va3_air_quality_p_3_3
tap_action:
action: more-info
icon: mdi:air-filter
name: 卧室
primary_info: state
secondary_info: name
fill_container: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{# ========== CONFIG ========== #}
{% set voc = states('sensor.livingroom_air_quality_voc') | float(0) %}
{# DEFAULTS (will be overridden by ranges) #}
{% set rgb = '40,200,120' %}
{% set anim = 'voc-clean-breathe' %}
{% set glow_anim = 'voc-clean-glow' %}
{% set halo_anim = 'voc-clean-halo' %}
{% set duration = 4.0 %}
{% set intensity = 0.5 %}
{# RANGES / COLORS #}
{# You can change numbers below if needed #}
{% if voc < 100 %}
{# GREEN #}
{% set rgb = '40,200,120' %}
{% set anim = 'voc-clean-breathe' %}
{% set glow_anim = 'voc-clean-glow' %}
{% set halo_anim = 'voc-clean-halo' %}
{% set duration = 4.4 %}
{% set intensity = 0.45 %}
{% elif voc < 200 %}
{# YELLOW-GREEN #}
{% set rgb = '140,220,80' %}
{% set anim = 'voc-good-wave' %}
{% set glow_anim = 'voc-good-glow' %}
{% set halo_anim = 'voc-good-halo' %}
{% set duration = 3.6 %}
{% set intensity = 0.55 %}
{% elif voc < 300 %}
{# YELLOW #}
{% set rgb = '255,210,40' %}
{% set anim = 'voc-fair-breathe' %}
{% set glow_anim = 'voc-fair-glow' %}
{% set halo_anim = 'voc-fair-halo' %}
{% set duration = 3.0 %}
{% set intensity = 0.7 %}
{% elif voc < 400 %}
{# ORANGE #}
{% set rgb = '255,140,40' %}
{% set anim = 'voc-poor-pulse' %}
{% set glow_anim = 'voc-poor-glow' %}
{% set halo_anim = 'voc-poor-halo' %}
{% set duration = 2.4 %}
{% set intensity = 0.9 %}
{% else %}
{# RED #}
{% set rgb = '255,50,50' %}
{% set anim = 'voc-bad-shimmer' %}
{% set glow_anim = 'voc-bad-glow' %}
{% set halo_anim = 'voc-bad-halo' %}
{% set duration = 2.0 %}
{% set intensity = 1.0 %}
{% endif %}
{# Apply variables #}
--voc-rgb: {{ rgb }};
--voc-intensity: {{ intensity }};
--shape-animation: {{ anim }} {{ duration }}s ease-in-out infinite;
--voc-glow-animation: {{ glow_anim }} {{ (duration * 0.9) | round(2) }}s ease-in-out infinite;
--voc-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
opacity: 1;
/* Icon color follows VOC level */
--icon-color: rgba({{ rgb }}, 1);
/* Shape neutral base */
background-color: rgba(77, 77, 77,0.1) !important;
box-shadow: none !important;
border: 1px solid rgba(255,255,255,0.06);
position: relative;
transform-origin: 50% 60%;
animation: var(--shape-animation);
}
/* Glow layers */
.shape::before,
.shape::after {
content: '';
position: absolute;
border-radius: inherit;
pointer-events: none;
}
.shape::before {
inset: -8px;
animation: var(--voc-glow-animation);
}
.shape::after {
inset: -22px;
animation: var(--voc-halo-animation);
mix-blend-mode: screen;
}
/* ========== CLEAN ========== */
@keyframes voc-clean-breathe {
0% { transform: scale(0.96); }
50% { transform: scale(1.03); }
100% { transform: scale(0.96); }
}
@keyframes voc-clean-glow {
0% {
box-shadow:
0 0 20px 0 rgba(var(--voc-rgb), 0.55),
0 0 34px 6 rgba(var(--voc-rgb), 0.5);
}
50% {
box-shadow:
0 0 30px 4 rgba(var(--voc-rgb), 0.9),
0 0 50px 10px rgba(var(--voc-rgb), 0.85);
}
100% {
box-shadow:
0 0 20px 0 rgba(var(--voc-rgb), 0.55),
0 0 34px 6 rgba(var(--voc-rgb), 0.5);
}
}
@keyframes voc-clean-halo {
0% {
box-shadow:
0 0 80px 20px rgba(var(--voc-rgb), 0.28),
0 -20px 80px -14px rgba(200, 255, 230, 0.45);
}
50% {
box-shadow:
0 0 130px 36px rgba(var(--voc-rgb), 0.42),
0 -34px 100px -8px rgba(220, 255, 240, 0.65);
}
100% {
box-shadow:
0 0 80px 20px rgba(var(--voc-rgb), 0.28),
0 -20px 80px -14px rgba(200, 255, 230, 0.45);
}
}
/* ========== GOOD ========== */
@keyframes voc-good-wave {
0% { transform: translateX(0); }
25% { transform: translateX(-1px); }
50% { transform: translateX(1px) translateY(-1px); }
75% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}
@keyframes voc-good-glow {
0% {
box-shadow:
0 0 22px 0 rgba(var(--voc-rgb), 0.55),
0 0 34px 4 rgba(var(--voc-rgb), 0.6);
}
50% {
box-shadow:
0 0 28px 2 rgba(var(--voc-rgb), 0.9),
0 0 48px 12px rgba(var(--voc-rgb), 0.8);
}
100% {
box-shadow:
0 0 22px 0 rgba(var(--voc-rgb), 0.55),
0 0 34px 4 rgba(var(--voc-rgb), 0.6);
}
}
@keyframes voc-good-halo {
0% {
box-shadow:
0 0 90px 26px rgba(var(--voc-rgb), 0.3),
0 18px 80px -12px rgba(140, 255, 120, 0.25);
}
50% {
box-shadow:
0 0 140px 42px rgba(var(--voc-rgb), 0.4),
0 30px 110px -10px rgba(160, 255, 140, 0.4);
}
100% {
box-shadow:
0 0 90px 26px rgba(var(--voc-rgb), 0.3),
0 18px 80px -12px rgba(140, 255, 120, 0.25);
}
}
/* ========== FAIR ========== */
@keyframes voc-fair-breathe {
0% { transform: scale(0.98); }
50% { transform: scale(1.05); }
100% { transform: scale(0.98); }
}
@keyframes voc-fair-glow {
50% {
box-shadow:
0 0 26px 4 rgba(var(--voc-rgb), 0.85),
0 0 42px 10px rgba(var(--voc-rgb), 0.8);
}
}
@keyframes voc-fair-halo {
50% {
box-shadow:
0 0 120px 40px rgba(var(--voc-rgb), 0.42),
0 26px 80px -10px rgba(255, 245, 180, 0.5);
}
}
/* ========== POOR ========== */
@keyframes voc-poor-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.07); }
100% { transform: scale(1); }
}
@keyframes voc-poor-glow {
50% {
box-shadow:
0 0 30px 4 rgba(var(--voc-rgb), 0.95),
0 0 54px 14px rgba(var(--voc-rgb), 0.9);
}
}
@keyframes voc-poor-halo {
50% {
box-shadow:
0 0 140px 48px rgba(var(--voc-rgb), 0.52),
0 26px 100px -10px rgba(255, 210, 150, 0.5);
}
}
/* ========== BAD ========== */
@keyframes voc-bad-shimmer {
0% { transform: scale(1); filter: blur(0); }
50% { transform: scale(1.08); filter: blur(0.6px); }
100% { transform: scale(1); filter: blur(0); }
}
@keyframes voc-bad-glow {
50% {
box-shadow:
0 0 34px 6 rgba(var(--voc-rgb), 1),
0 0 62px 14px rgba(var(--voc-rgb), 0.95);
}
}
@keyframes voc-bad-halo {
50% {
box-shadow:
0 0 160px 60px rgba(var(--voc-rgb), 0.6),
0 34px 120px -12px rgba(255, 140, 120, 0.6);
}
}
.: |
mushroom-shape-icon {
--icon-size: 48px;
--icon-color: rgba(var(--voc-rgb),1) !important;
display: flex;
margin: -10px 0 10px -20px !important;
padding-right: 22px;
padding-bottom: 10px;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
--card-primary-font-size: 1.5rem !important;
--card-primary-line-height: 1.3 !important;
}
- type: custom:mushroom-entity-card
entity: sensor.water_damage_count
tap_action:
action: none
icon: mdi:water
name: 水浸设备数
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{# ========== USER CONFIG ========== #}
{# true = number mode, false = state mode #}
{% set use_number = true %}
{# STATE MODE SETTINGS #}
{% set state_entity = 'switch.plug_6_local' %}
{% set active_value = 'on' %}
{# OPTIONAL: NUMBER MODE SETTINGS #}
{% set number_entity = 'sensor.water_damage_count' %}
{# '>' '<' '=' '>=' '<=' #}
{% set number_operator = '>' %}
{% set threshold = 0.0 %}
{# ========== END USER CONFIG ====== #}
{# ======== TRIGGER DECISION LOGIC ======== #}
{% if use_number %}
{% set num = states(number_entity) | float(0) %}
{% if number_operator == '>' %}
{% set trigger_active = (num > threshold) %}
{% elif number_operator == '<' %}
{% set trigger_active = (num < threshold) %}
{% elif number_operator == '=' %}
{% set trigger_active = (num == threshold) %}
{% elif number_operator == '>=' %}
{% set trigger_active = (num >= threshold) %}
{% elif number_operator == '<=' %}
{% set trigger_active = (num <= threshold) %}
{% else %}
{% set trigger_active = false %}
{% endif %}
{% else %}
{# default: simple equality state trigger #}
{% set trigger_active = (states(state_entity) == active_value) %}
{% endif %}
{# =========== END TRIGGER LOGIC =========== #}
{% if trigger_active %}
--shape-animation: doorbell-ring 0.9s ease-out infinite;
opacity: 1;
{% else %}
--shape-animation: none;
opacity: 0.8;
{% endif %}
transform-origin: 50% 50%;
}
@keyframes doorbell-ring {
0% {
transform: scale(1.05);
box-shadow:
0 0 0 0 rgba(var(--rgb-{{ config.icon_color }}), 1),
0 0 0 0 rgba(var(--rgb-{{ config.icon_color }}), 0.8),
0 0 0 0 rgba(var(--rgb-{{ config.icon_color }}), 0.4);
}
30% {
transform: scale(0.95);
box-shadow:
0 0 0 4px rgba(var(--rgb-{{ config.icon_color }}), 0.9),
0 0 0 10px rgba(var(--rgb-{{ config.icon_color }}), 0.7),
0 0 0 18px rgba(var(--rgb-{{ config.icon_color }}), 0.4);
}
60% {
transform: scale(1.02);
box-shadow:
0 0 0 10px rgba(var(--rgb-{{ config.icon_color }}), 0.0),
0 0 0 18px rgba(var(--rgb-{{ config.icon_color }}), 0.2),
0 0 0 26px rgba(var(--rgb-{{ config.icon_color }}), 0.0);
}
100% {
transform: scale(1);
box-shadow:
0 0 0 0 rgba(var(--rgb-{{ config.icon_color }}), 0.0),
0 0 0 0 rgba(var(--rgb-{{ config.icon_color }}), 0.0),
0 0 0 0 rgba(var(--rgb-{{ config.icon_color }}), 0.0);
}
}
@keyframes doorbell-idle {
0% { transform: scale(1); }
50% { transform: scale(1.03); }
100% { transform: scale(1); }
}
.: |
mushroom-shape-icon {
--icon-size: 65px;
display: flex;
margin: -18px 0 10px -20px !important;
padding-right: 10px;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
}
columns: 2
- type: grid
column_span: 4
cards:
- type: heading
heading: 快捷控制
icon: mdi:lightning-bolt
heading_style: title
- type: custom:mushroom-template-card
entity: light.quan_wu_zhao_ming
primary: 全屋灯光
secondary: >
{% set n = states('sensor.lights_of_count') | int(0) %} {% if n >
0 %}{{ n }} 盏开启{% else %}全部关闭{% endif %}
icon: mdi:lightbulb-group
icon_color: >
{% if states('sensor.lights_of_count') | int(0) > 0 %}amber{% else
%}grey{% endif %}
tap_action:
action: more-info
hold_action:
action: toggle
grid_options:
columns: 4
rows: 1
- type: custom:mushroom-template-card
entity: climate.qdhkl_cn_2113954983_b19c
primary: 空调
secondary: |
{% if is_state(config.entity,'off') %}
已关闭
{% else %}
{{ state_attr(config.entity,'temperature') }}°C
{% endif %}
icon: mdi:snowflake
icon_color: >
{% if is_state(config.entity,'off') %}grey{% else %}blue{% endif
%}
tap_action:
action: more-info
grid_options:
columns: 4
rows: 1
- type: custom:mushroom-template-card
entity: fan.xiaomi_cn_2005161482_va3_s_2_air_purifier
primary: 空气净化器
secondary: |
{% if is_state(config.entity,'on') %}运行中{% else %}已关闭{% endif %}
icon: mdi:air-purifier
icon_color: |
{% if is_state(config.entity,'on') %}cyan{% else %}grey{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
grid_options:
columns: 4
rows: 1
- type: custom:mushroom-template-card
entity: fan.xiaomi_cn_2196552583_p90_s_2_fan
primary: 风扇
secondary: |
{% if is_state(config.entity,'on') %}运行中{% else %}已关闭{% endif %}
icon: mdi:fan
icon_color: >
{% if is_state(config.entity,'on') %}light-blue{% else %}grey{%
endif %}
tap_action:
action: toggle
hold_action:
action: more-info
grid_options:
columns: 4
rows: 1
- type: custom:mushroom-template-card
entity: cover.panpan_cn_876603548_y18_s_2_airer
primary: 晾衣架
secondary: |
{{ states(config.entity) }}
icon: mdi:hanger
icon_color: teal
tap_action:
action: more-info
grid_options:
columns: 4
rows: 1
- type: custom:mushroom-template-card
entity: switch.cuco_cn_2006579195_v3_on_p_2_1
primary: NAS
secondary: >
{{ states('sensor.cuco_cn_2006579195_v3_electric_power_p_11_2') }}
W
icon: mdi:nas
icon_color: |
{% if is_state(config.entity,'on') %}red{% else %}grey{% endif %}
tap_action:
action: navigate
navigation_path: home-server
grid_options:
columns: 4
rows: 1
- type: grid
column_span: 4
cards:
- type: heading
heading: 房间灯光
icon: mdi:floor-plan
heading_style: title
- type: custom:mushroom-light-card
entity: light.pmfbj_cn_1187112198_xsx340_s_2
name: 客厅
icon: mdi:sofa
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
grid_options:
columns: 4
rows: 2
- type: custom:mushroom-light-card
entity: light.shhf_cn_1129134246_sflt11_s_2_light
name: 餐桌
icon: mdi:table-chair
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
grid_options:
columns: 4
rows: 2
- type: custom:mushroom-light-card
entity: light.pmfbj_cn_1186735998_xsx340_s_2
name: 主卧
icon: mdi:bed-king
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
grid_options:
columns: 4
rows: 2
- type: custom:mushroom-light-card
entity: light.pmfbj_cn_1186772227_xsx340_s_2
name: 次卧
icon: mdi:bed-single
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
grid_options:
columns: 4
rows: 2
- type: custom:mushroom-light-card
entity: light.pmfbj_cn_1186744390_xsx340_s_2
name: 书房
icon: mdi:desk
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
grid_options:
columns: 4
rows: 2
- type: custom:mushroom-light-card
entity: light.opple_cn_2005385416_moat_s_2_light
name: 阳台
icon: mdi:balcony
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
grid_options:
columns: 4
rows: 2
header:
layout: responsive
badges_position: bottom
badges_wrap: wrap
background:
opacity: 80
alignment: center
size: cover
repeat: repeat
attachment: fixed
cards: []
- title: 首页
path: home
icon: mdi:home
type: sections
max_columns: 4
sections:
- type: grid
cards:
- type: custom:button-card
show_icon: false
show_name: false
show_state: false
grid_options:
columns: 12
rows: 2
custom_fields:
greeting: |
[[[
const h = new Date().getHours();
if (h < 6) return "夜深了";
if (h < 11) return "早上好";
if (h < 14) return "中午好";
if (h < 18) return "下午好";
return "晚上好";
]]]
clock: |
[[[
return new Date().toLocaleTimeString(
'zh-CN',
{
hour: '2-digit',
minute: '2-digit',
hour12: false
}
);
]]]
date: |
[[[
return new Date().toLocaleDateString(
'zh-CN',
{
month: 'long',
day: 'numeric',
weekday: 'long'
}
);
]]]
subtitle: |
家里一切正常
styles:
card:
- height: 130px
- padding: 20px 24px
- border-radius: 24px
- border: none
- background: |
linear-gradient(
135deg,
rgba(32,35,42,0.95),
rgba(20,22,27,0.95)
)
- box-shadow: none
grid:
- grid-template-areas: |
"greeting clock"
"subtitle date"
- grid-template-columns: 1fr auto
- grid-template-rows: 1fr 1fr
custom_fields:
greeting:
- justify-self: start
- align-self: end
- font-size: 30px
- font-weight: 700
- color: white
subtitle:
- justify-self: start
- align-self: start
- font-size: 14px
- color: rgba(255,255,255,0.55)
clock:
- justify-self: end
- align-self: end
- font-size: 32px
- font-weight: 600
- color: white
date:
- justify-self: end
- align-self: start
- font-size: 14px
- color: rgba(255,255,255,0.55)
- type: grid
cards:
- type: custom:button-card
entity: weather.home
show_icon: false
show_name: false
show_state: false
grid_options:
columns: 6
rows: 4
custom_fields:
weather_icon: |
[[[
const s = entity?.state;
if (s === "sunny")
return "☀️";
if (s === "clear-night")
return "🌙";
if (s === "cloudy")
return "☁️";
if (s === "partlycloudy")
return "⛅";
if (["rainy","pouring"].includes(s))
return "🌧️";
if (s === "lightning")
return "⛈️";
return "🌤️";
]]]
temp: |
[[[
const temp =
states['sensor.outdoor_temperature']?.state ?? '--';
return `${temp}°`;
]]]
condition: |
[[[
const map = {
sunny: "晴",
cloudy: "多云",
partlycloudy: "局部多云",
rainy: "下雨",
pouring: "大雨",
"clear-night": "晴朗"
};
return map[entity?.state] ?? entity?.state ?? "--";
]]]
forecast: |
[[[
return "今天 · 舒适";
]]]
humidity: |
[[[
const hum =
states['sensor.outdoor_humidity']?.state ?? '--';
return `湿度 ${hum}%`;
]]]
styles:
card:
- height: 210px
- border-radius: 24px
- border: none
- padding: 22px
- overflow: hidden
- background: |
linear-gradient(
145deg,
#334b68 0%,
#23334a 55%,
#172131 100%
)
- box-shadow: none
grid:
- grid-template-areas: |
"weather_icon temp"
"weather_icon condition"
"forecast humidity"
- grid-template-columns: 1fr 1.3fr
- grid-template-rows: 1fr auto auto
custom_fields:
weather_icon:
- font-size: 74px
- align-self: center
- justify-self: center
- animation: weatherFloat 5s ease-in-out infinite
temp:
- font-size: 46px
- font-weight: 700
- justify-self: start
- align-self: end
- color: white
condition:
- font-size: 17px
- justify-self: start
- color: rgba(255,255,255,0.7)
forecast:
- font-size: 13px
- justify-self: start
- color: rgba(255,255,255,0.6)
humidity:
- font-size: 13px
- justify-self: end
- color: rgba(255,255,255,0.6)
extra_styles: |
@keyframes weatherFloat {
0% {
transform: translateY(0px) scale(1);
}
50% {
transform: translateY(-6px) scale(1.03);
}
100% {
transform: translateY(0px) scale(1);
}
}
- type: custom:button-card
show_icon: false
show_name: false
grid_options:
columns: 6
rows: 4
custom_fields:
title: 家庭状态
temperature: |
[[[
return `
${states['sensor.living_room_temperature']?.state ?? '--'}°C
`;
]]]
humidity: |
[[[
return `
${states['sensor.living_room_humidity']?.state ?? '--'}%
`;
]]]
door: |
[[[
const door =
states['binary_sensor.front_door']?.state;
if (door === 'on') {
return `
门已打开
`;
}
return `
门窗正常
`;
]]]
water: |
[[[
const leak =
states['binary_sensor.water_leak']?.state;
if (leak === 'on') {
return `
检测到漏水
`;
}
return `
水浸正常
`;
]]]
styles:
card:
- height: 210px
- border-radius: 24px
- border: none
- padding: 22px
- background: rgba(30,32,38,0.96)
- box-shadow: none
grid:
- grid-template-areas: |
"title title"
"temperature humidity"
"door water"
- grid-template-columns: 1fr 1fr
- grid-template-rows: auto 1fr 1fr
- gap: 12px
custom_fields:
title:
- justify-self: start
- font-size: 17px
- font-weight: 600
- color: white
- margin-bottom: 5px
temperature:
- justify-self: stretch
- align-self: stretch
- display: flex
- align-items: center
- gap: 10px
- padding: 14px
- border-radius: 18px
- background: rgba(255,255,255,0.05)
- color: white
- font-size: 17px
humidity:
- justify-self: stretch
- align-self: stretch
- display: flex
- align-items: center
- gap: 10px
- padding: 14px
- border-radius: 18px
- background: rgba(255,255,255,0.05)
- color: white
- font-size: 17px
door:
- justify-self: stretch
- display: flex
- align-items: center
- gap: 10px
- padding: 14px
- border-radius: 18px
- background: rgba(255,255,255,0.05)
- color: white
water:
- justify-self: stretch
- display: flex
- align-items: center
- gap: 10px
- padding: 14px
- border-radius: 18px
- background: rgba(255,255,255,0.05)
- color: white
column_span: 4
- type: grid
cards:
- type: heading
heading: 快捷控制
icon: mdi:lightning-bolt
heading_style: title
- type: custom:mushroom-template-card
entity: light.living_room
primary: 客厅灯
secondary: |
{% if is_state('light.living_room','on') %}
已开启
{% else %}
已关闭
{% endif %}
icon: mdi:ceiling-light
icon_color: |
{% if is_state('light.living_room','on') %}
amber
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
grid_options:
columns: 3
rows: 2
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity,'on') %}
animation: lightGlow 2.2s ease-in-out infinite;
{% endif %}
}
@keyframes lightGlow {
0%,100% {
box-shadow:
0 0 0 rgba(255,190,60,0);
}
50% {
box-shadow:
0 0 22px rgba(255,190,60,.55);
}
}
.: |
ha-card {
height: 112px;
border-radius: 22px;
border: none;
background: rgba(30,32,38,.96);
}
- type: custom:mushroom-template-card
entity: climate.living_room
primary: 空调
secondary: |
{% if is_state('climate.living_room','off') %}
已关闭
{% else %}
{{ state_attr('climate.living_room','temperature') }}°C
{% endif %}
icon: mdi:snowflake
icon_color: |
{% if is_state('climate.living_room','off') %}
grey
{% else %}
blue
{% endif %}
tap_action:
action: more-info
grid_options:
columns: 3
rows: 2
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if not is_state(config.entity,'off') %}
animation:
airconSpin 8s linear infinite;
{% endif %}
}
@keyframes airconSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.: |
ha-card {
height: 112px;
border-radius: 22px;
border: none;
background: rgba(30,32,38,.96);
}
- type: custom:mushroom-template-card
entity: media_player.apple_tv
primary: 影院
secondary: |
{% if is_state('media_player.apple_tv','playing') %}
正在播放
{% elif is_state('media_player.apple_tv','idle') %}
待机
{% else %}
已关闭
{% endif %}
icon: mdi:television-play
icon_color: |
{% if is_state('media_player.apple_tv','playing') %}
deep-purple
{% else %}
grey
{% endif %}
tap_action:
action: more-info
grid_options:
columns: 3
rows: 2
card_mod:
style: |
ha-card {
height:112px;
border-radius:22px;
border:none;
background:rgba(30,32,38,.96);
}
- type: custom:mushroom-template-card
entity: input_boolean.home_mode
primary: 回家模式
secondary: 一键回家
icon: mdi:home-heart
icon_color: |
{% if is_state(config.entity,'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: toggle
grid_options:
columns: 4
rows: 2
card_mod:
style: |
ha-card {
height:112px;
border-radius:22px;
border:none;
background:rgba(30,32,38,.96);
}
- type: custom:mushroom-template-card
entity: input_boolean.sleep_mode
primary: 睡眠模式
secondary: 晚安
icon: mdi:weather-night
icon_color: |
{% if is_state(config.entity,'on') %}
indigo
{% else %}
grey
{% endif %}
tap_action:
action: toggle
grid_options:
columns: 4
rows: 2
card_mod:
style: |
ha-card {
height:112px;
border-radius:22px;
border:none;
background:rgba(30,32,38,.96);
}
- type: custom:mushroom-template-card
primary: 全屋关灯
secondary: 一键关闭
icon: mdi:lightbulb-group-off
icon_color: grey
tap_action:
action: call-service
service: light.turn_off
target:
entity_id: light.all_lights
grid_options:
columns: 4
rows: 2
card_mod:
style: |
ha-card {
height:112px;
border-radius:22px;
border:none;
background:rgba(30,32,38,.96);
}
column_span: 4
- type: grid
cards:
- type: heading
heading: 房间
icon: mdi:floor-plan
heading_style: title
- type: custom:button-card
grid_options:
columns: 5
rows: 3
show_icon: false
show_name: false
custom_fields:
room: 客厅
icon: |
temp: |
[[[
return `${
states['sensor.living_room_temperature']?.state ?? '--'
}°`;
]]]
humidity: |
[[[
return `${
states['sensor.living_room_humidity']?.state ?? '--'
}%`;
]]]
lights: |
[[[
const on =
states['light.living_room']?.state === 'on';
return on ? '💡 开启' : '💡 关闭';
]]]
climate: |
[[[
const on =
states['climate.living_room']?.state !== 'off';
return on ? '❄ 空调开启' : '❄ 空调关闭';
]]]
tap_action:
action: navigate
navigation_path: /dashboard-home/living-room
styles:
card:
- height: 160px
- border-radius: 24px
- border: none
- padding: 18px
- background: rgba(30,32,38,.96)
grid:
- grid-template-areas: |
"icon room"
"temp humidity"
"lights climate"
- grid-template-columns: auto 1fr
- grid-template-rows: auto 1fr auto
- column-gap: 12px
custom_fields:
icon:
- width: 44px
- height: 44px
- border-radius: 14px
- background: rgba(255,255,255,.07)
- display: flex
- align-items: center
- justify-content: center
- color: white
room:
- justify-self: start
- font-size: 20px
- font-weight: 600
- color: white
temp:
- font-size: 30px
- color: white
- justify-self: start
- align-self: center
humidity:
- font-size: 15px
- color: rgba(255,255,255,.55)
- justify-self: end
- align-self: center
lights:
- font-size: 12px
- color: rgba(255,255,255,.7)
climate:
- font-size: 12px
- color: rgba(255,255,255,.7)
- type: custom:button-card
grid_options:
columns: 5
rows: 3
show_icon: false
show_name: false
custom_fields:
room: 就餐区
icon: |
temp: |
[[[
return `${
states['sensor.dining_temperature']?.state ?? '--'
}°`;
]]]
presence: |
[[[
return states['binary_sensor.dining_presence']?.state === 'on'
? '👤 有人'
: '○ 无人';
]]]
light: |
[[[
return states['light.dining_room']?.state === 'on'
? '💡 灯光开启'
: '💡 灯光关闭';
]]]
styles:
card:
- height: 160px
- border-radius: 24px
- border: none
- padding: 18px
- background: rgba(30,32,38,.96)
grid:
- grid-template-areas: |
"icon room"
"temp temp"
"presence light"
- grid-template-columns: auto 1fr
custom_fields:
icon:
- width: 44px
- height: 44px
- border-radius: 14px
- background: rgba(255,255,255,.07)
- display: flex
- align-items: center
- justify-content: center
- color: white
room:
- justify-self: start
- font-size: 20px
- font-weight: 600
- color: white
temp:
- justify-self: start
- align-self: center
- font-size: 30px
- color: white
presence:
- font-size: 12px
- color: rgba(255,255,255,.7)
light:
- font-size: 12px
- color: rgba(255,255,255,.7)
- type: custom:button-card
grid_options:
columns: 5
rows: 3
show_icon: false
show_name: false
custom_fields:
room: 主卧
icon: |
temp: |
[[[
return `${
states['sensor.bedroom_temperature']?.state ?? '--'
}°`;
]]]
humidity: |
[[[
return `${
states['sensor.bedroom_humidity']?.state ?? '--'
}%`;
]]]
lights: |
[[[
return states['light.bedroom']?.state === 'on'
? '💡 开启'
: '💡 关闭';
]]]
styles:
card:
- height: 160px
- border-radius: 24px
- border: none
- padding: 18px
- background: rgba(30,32,38,.96)
grid:
- grid-template-areas: |
"icon room"
"temp humidity"
"lights lights"
- grid-template-columns: auto 1fr
custom_fields:
icon:
- width: 44px
- height: 44px
- border-radius: 14px
- background: rgba(255,255,255,.07)
- display: flex
- align-items: center
- justify-content: center
- color: white
room:
- justify-self: start
- font-size: 20px
- font-weight: 600
- color: white
temp:
- font-size: 30px
- color: white
humidity:
- justify-self: end
- color: rgba(255,255,255,.55)
lights:
- font-size: 12px
- color: rgba(255,255,255,.7)
- type: custom:button-card
grid_options:
columns: 5
rows: 3
show_icon: false
show_name: false
custom_fields:
room: 卫生间
icon: |
temp: |
[[[
return `${
states['sensor.bathroom_temperature']?.state ?? '--'
}°`;
]]]
humidity: |
[[[
return `${
states['sensor.bathroom_humidity']?.state ?? '--'
}%`;
]]]
styles:
card:
- height: 160px
- border-radius: 24px
- border: none
- padding: 18px
- background: rgba(30,32,38,.96)
grid:
- grid-template-areas: |
"icon room"
"temp humidity"
- grid-template-columns: auto 1fr
custom_fields:
icon:
- width: 44px
- height: 44px
- border-radius: 14px
- background: rgba(255,255,255,.07)
- display: flex
- align-items: center
- justify-content: center
- color: white
room:
- justify-self: start
- font-size: 20px
- font-weight: 600
- color: white
temp:
- font-size: 30px
- color: white
humidity:
- justify-self: end
- color: rgba(255,255,255,.55)
column_span: 4
- type: grid
cards:
- type: heading
heading: 正在运行
icon: mdi:motion-play
heading_style: title
- type: custom:mushroom-template-card
entity: climate.living_room
primary: 客厅空调
secondary: |
{% if is_state(config.entity,'off') %}
已关闭
{% else %}
制冷中 · {{ state_attr(config.entity,'temperature') }}°C
{% endif %}
icon: mdi:air-conditioner
icon_color: |
{% if is_state(config.entity,'off') %}
grey
{% else %}
blue
{% endif %}
tap_action:
action: more-info
grid_options:
columns: 4
rows: 2
card_mod:
style: |
ha-card {
min-height:110px;
border-radius:22px;
border:none;
background:rgba(30,32,38,.96);
}
- type: custom:mushroom-template-card
entity: media_player.apple_tv
primary: Apple TV
secondary: |
{% if is_state(config.entity,'playing') %}
{{ state_attr(config.entity,'media_title') | default('正在播放') }}
{% else %}
待机
{% endif %}
icon: mdi:apple
icon_color: |
{% if is_state(config.entity,'playing') %}
purple
{% else %}
grey
{% endif %}
tap_action:
action: more-info
grid_options:
columns: 4
rows: 2
card_mod:
style: |
ha-card {
min-height:110px;
border-radius:22px;
border:none;
background:rgba(30,32,38,.96);
}
- type: custom:mushroom-template-card
entity: sensor.water_purifier_tds
primary: 净水器
secondary: |
TDS {{ states(config.entity) }}
icon: mdi:water-pump
icon_color: cyan
tap_action:
action: more-info
grid_options:
columns: 4
rows: 2
card_mod:
style: |-
ha-card {
min-height:110px;
border-radius:22px;
border:none;
background:rgba(30,32,38,.96);
}
column_span: 4
visible:
- user: 7a6c93d08acc4692bfd561154bb386df
- user: 7809f2c31fda449b8e7c5a0d2eaf5fd5
cards: []