Light Code

type: custom:button-card
entity: light.luz_sala
name: Sala
icon: |
  [[[
    if (!entity || entity.state === 'unavailable')
      return 'mdi:cloud-off-outline';

    if (entity.state === 'off')
      return 'mdi:globe-light-outline';

    return 'mdi:globe-light';
  ]]]
tap_action:
  action: toggle
hold_action:
  action: more-info
styles:
  card:
    - border-radius: 18px
    - height: 102px
    - border: |
        [[[
          return entity && entity.state === 'on'
            ? '1px solid rgba(255,255,255,0.15)'
            : 'none';
        ]]]
    - background: |
        [[[
          if (!entity || entity.state === 'unavailable')
            return 'transparent';

          if (entity.state === 'on')
            return 'linear-gradient(145deg, rgba(255,215,0,0.25), rgba(255,255,255,0.05))';

          return 'transparent';
        ]]]
    - backdrop-filter: |
        [[[
          return entity && entity.state === 'on'
            ? 'blur(12px)'
            : 'none';
        ]]]
    - box-shadow: |
        [[[
          if (!entity || entity.state !== 'on')
            return 'none';

          const brightness = entity.attributes.brightness || 255;
          const glow = Math.round((brightness / 255) * 24);

          return `0 0 ${glow}px rgba(255,215,0,0.6)`;
        ]]]
    - transition: all 0.35s ease-in-out
    - display: flex
    - justify-content: center
    - align-items: center
    - flex-direction: column
  icon:
    - color: white
    - width: 60px
    - height: 60px
  name:
    - color: white
    - font-size: 14px
    - font-weight: 700
    - margin-top: 6px
    - text-shadow: 0 0 10px rgba(255,255,255,0.5)
extra_styles: |
  ha-card:active {
    transform: translateY(3px) scale(0.98);
  }