diff --git a/main.yaml b/main.yaml index b0f5081..38656bd 100644 --- a/main.yaml +++ b/main.yaml @@ -4569,87 +4569,703 @@ views: 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); + columns: 4 + - type: custom:vertical-stack-in-card + cards: + - type: custom:button-card + show_icon: false + show_name: false + show_state: false + grid_options: + columns: 12 + row: 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' } + ); + ]]] + 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: custom:mushroom-chips-card + chips: + - type: template + entity: sensor.lights_of_count + icon: mdi:lightbulb-group + content: |- + {% if is_state('sensor.lights_of_count','0') %} + + {% else %} + {{states('sensor.lights_of_count')}} + {% endif %} + alignment: end + card_mod: + style: > + ha-card { + /* ================================== */ + /* USER CONFIG HERE */ + /* ================================== */ - 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) + /* 1. ACTIVE STATE (NUMERIC) */ + {% set threshold_below = false %} + {% set threshold_above = 1 %} + + /* 2. POSITIONING */ + {% set pos_y = 'bottom' %} + {% set pos_y_val = '15px' %} + {% set pos_x = 'left' %} + {% set pos_x_val = '5px' %} + + /* 3. SIZING */ + {% set icon_size = '18px' %} + {% set text_size = '12px' %} + {% set badge_height = '5px' %} + {% set border_radius = '10px' %} + {% set border_thickness = '1px' %} + + /* 4. COLORS (HEX, RGB, Color Name) */ + /* --- Active --- */ + {% set active_bg = '#a63a3a' %} + {% set active_icon = 'yellow' %} + {% set active_text = 'white' %} + {% set active_border = '#ab1c1c' %} + {% set active_opacity = 0 %} + + /* --- 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 = 'none' %} + + /* 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 = 2 %} + {% set anim_delay_sec = 5 %} + + /* ================================== */ + /* USER CONFIG END (DONT TOUCH BELOW) */ + /* ================================== */ + + {% set current_state = states(config.chips[0].entity) %} + {% set state_num = current_state | float(-99999) %} + + {% set check_below = threshold_below | string | lower != 'false' %} + {% set check_above = threshold_above | string | lower != 'false' %} + + {% set is_active_below = check_below and state_num != -99999 and state_num <= (threshold_below | float(-99999)) %} + {% set is_active_above = check_above and state_num != -99999 and state_num >= (threshold_above | float(-99999)) %} + + {% set is_active = is_active_below or is_active_above %} + + {% 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:mushroom-chips-card + chips: + - type: template + entity: sensor.aircondition_of_count + icon: mdi:air-conditioner + content: |- + {% if is_state('sensor.aircondition_of_count','0') %} + + {% else %} + {{states('sensor.aircondition_of_count')}} + {% endif %} + alignment: end + card_mod: + style: > + ha-card { + /* ================================== */ + /* USER CONFIG HERE */ + /* ================================== */ + + /* 1. ACTIVE STATE (NUMERIC) */ + {% set threshold_below = false %} + {% set threshold_above = 1 %} + + /* 2. POSITIONING */ + {% set pos_y = 'bottom' %} + {% set pos_y_val = '15px' %} + {% set pos_x = 'left' %} + {% set pos_x_val = '40px' %} + + /* 3. SIZING */ + {% set icon_size = '18px' %} + {% set text_size = '12px' %} + {% set badge_height = '5px' %} + {% set border_radius = '10px' %} + {% set border_thickness = '1px' %} + + /* 4. COLORS (HEX, RGB, Color Name) */ + /* --- Active --- */ + {% set active_bg = '#a63a3a' %} + {% set active_icon = '#42A5F5' %} + {% set active_text = 'white' %} + {% set active_border = '#ab1c1c' %} + {% set active_opacity = 0 %} + + /* --- 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 = 'none' %} + + /* 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 = 2 %} + {% set anim_delay_sec = 5 %} + + /* ================================== */ + /* USER CONFIG END (DONT TOUCH BELOW) */ + /* ================================== */ + + {% set current_state = states(config.chips[0].entity) %} + {% set state_num = current_state | float(-99999) %} + + {% set check_below = threshold_below | string | lower != 'false' %} + {% set check_above = threshold_above | string | lower != 'false' %} + + {% set is_active_below = check_below and state_num != -99999 and state_num <= (threshold_below | float(-99999)) %} + {% set is_active_above = check_above and state_num != -99999 and state_num >= (threshold_above | float(-99999)) %} + + {% set is_active = is_active_below or is_active_above %} + + {% 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:mushroom-chips-card + chips: + - type: template + entity: fan.quan_wu_feng_shan + icon: mdi:fan + content: |- + {% if is_state('fan.quan_wu_feng_shan','0') %} + + {% else %} + {{states('fan.quan_wu_feng_shan')}} + {% endif %} + alignment: end + card_mod: + style: > + ha-card { + /* ================================== */ + /* USER CONFIG HERE */ + /* ================================== */ + + /* 1. ACTIVE STATE (NUMERIC) */ + {% set threshold_below = false %} + {% set threshold_above = 1 %} + + /* 2. POSITIONING */ + {% set pos_y = 'bottom' %} + {% set pos_y_val = '15px' %} + {% set pos_x = 'left' %} + {% set pos_x_val = '75px' %} + + /* 3. SIZING */ + {% set icon_size = '18px' %} + {% set text_size = '12px' %} + {% set badge_height = '5px' %} + {% set border_radius = '10px' %} + {% set border_thickness = '1px' %} + + /* 4. COLORS (HEX, RGB, Color Name) */ + /* --- Active --- */ + {% set active_bg = '#a63a3a' %} + {% set active_icon = '#42A5F5' %} + {% set active_text = 'white' %} + {% set active_border = '#ab1c1c' %} + {% set active_opacity = 0 %} + + /* --- 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 = 'none' %} + + /* 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 = 2 %} + {% set anim_delay_sec = 5 %} + + /* ================================== */ + /* USER CONFIG END (DONT TOUCH BELOW) */ + /* ================================== */ + + {% set current_state = states(config.chips[0].entity) %} + {% set state_num = current_state | float(-99999) %} + + {% set check_below = threshold_below | string | lower != 'false' %} + {% set check_above = threshold_above | string | lower != 'false' %} + + {% set is_active_below = check_below and state_num != -99999 and state_num <= (threshold_below | float(-99999)) %} + {% set is_active_above = check_above and state_num != -99999 and state_num >= (threshold_above | float(-99999)) %} + + {% set is_active = is_active_below or is_active_above %} + + {% 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 column_span: 4 cards: @@ -6377,6 +6993,8 @@ views: /* 组合卡片边缘与内部卡片之间的距离 */ padding: 2px 4px !important; } + grid_options: + columns: 10 - square: false type: grid cards: @@ -7476,7 +8094,7 @@ views: hold_action: action: more-info grid_options: - columns: 4 + columns: 5 rows: 1 - type: custom:mushroom-template-card entity: fan.xiaomi_cn_2196552583_p90_s_2_fan @@ -7536,7 +8154,7 @@ views: show_brightness_control: true show_color_temp_control: true grid_options: - columns: 4 + columns: 6 rows: 2 - type: custom:mushroom-light-card entity: light.shhf_cn_1129134246_sflt11_s_2_light @@ -7546,7 +8164,7 @@ views: show_brightness_control: true show_color_temp_control: true grid_options: - columns: 4 + columns: 6 rows: 2 - type: custom:mushroom-light-card entity: light.pmfbj_cn_1186735998_xsx340_s_2 @@ -7556,7 +8174,7 @@ views: show_brightness_control: true show_color_temp_control: true grid_options: - columns: 4 + columns: 6 rows: 2 - type: custom:mushroom-light-card entity: light.pmfbj_cn_1186772227_xsx340_s_2 @@ -7566,7 +8184,7 @@ views: show_brightness_control: true show_color_temp_control: true grid_options: - columns: 4 + columns: 6 rows: 2 - type: custom:mushroom-light-card entity: light.pmfbj_cn_1186744390_xsx340_s_2 @@ -7576,7 +8194,7 @@ views: show_brightness_control: true show_color_temp_control: true grid_options: - columns: 4 + columns: 6 rows: 2 - type: custom:mushroom-light-card entity: light.opple_cn_2005385416_moat_s_2_light @@ -7586,7 +8204,7 @@ views: show_brightness_control: true show_color_temp_control: true grid_options: - columns: 4 + columns: 6 rows: 2 header: layout: responsive