# ${card.querySelector('.bubble-state').innerText = "It's currently " + hass.states['weather.forecast_home'].state} # Change Entity Status string change show_state to false # bubble-feedback-container margin # var(--bubble-button-accent-color, var(--bubble-accent-color, var(--accent-color))) # .bubble-sub-button-2 { # background-color: rgba(${hass.states['light.led_bett'].attributes.rgb_color}); # } --- title: Testing icon: mdi:test-tube panel: true visible: - user: 1614b22cbef54f979741cf8a6b3413ec # Alex cards: - type: custom:layout-card layout_type: custom:vertical-layout layout: max_cols: 3 cards: - type: vertical-stack cards: - type: custom:bubble-card card_type: separator # name: Kitchen icon: mdi:countertop-outline sub_button: - name: Temp icon: mdi:thermometer-lines entity: sensor.climate_kitchen_01_temperature show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Humidity icon: mdi:water-percent entity: sensor.climate_kitchen_01_humidity show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Light Level icon: mdi:weather-sunny entity: sensor.presence_kitchen_light_level_2 show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: PM2.5 icon: mdi:blur entity: sensor.climate_kitchen_02_pm25 show_name: false show_icon: true show_state: true show_background: false show_attribute: false styles: | .bubble-feedback-container { margin: 0px; } - type: custom:bubble-card card_type: button button_type: switch name: Light entity: input_boolean.kitchen_light_state icon: mdi:lightbulb-group show_state: true show_background: false tap_action: action: toggle button_action: tap_action: action: navigate navigation_path: '#kitchen' sub_button: - icon: mdi:lightbulb-group entity: scene.kitchen_all show_state: false show_background: true tap_action: action: call-service service: input_select.select_option service_data: entity_id: input_select.kitchen_scenes option: "All" - icon: mdi:countertop-outline entity: scene.kitchen_work_zone_only show_state: false show_background: true tap_action: action: call-service service: input_select.select_option service_data: entity_id: input_select.kitchen_scenes option: "Work Zone Only" - icon: mdi:food-turkey entity: scene.kitchen_dinning_zone_only show_state: false show_background: true tap_action: action: call-service service: input_select.select_option service_data: entity_id: input_select.kitchen_scenes option: "Dinning Zone Only" - icon: mdi:ceiling-light-multiple entity: scene.kitchen_ceiling_only show_state: false show_background: true tap_action: action: call-service service: input_select.select_option service_data: entity_id: input_select.kitchen_scenes option: "Ceiling Only" styles: | .bubble-sub-button-1 > ha-icon { color: ${hass.states['input_select.kitchen_scenes'].state === 'All' ? 'rgb(255, 152, 0)' : ''} !important; } .bubble-sub-button-2 > ha-icon { color: ${hass.states['input_select.kitchen_scenes'].state === 'Work Zone Only' ? 'rgb(255, 152, 0)' : ''} !important; } .bubble-sub-button-3 > ha-icon { color: ${hass.states['input_select.kitchen_scenes'].state === 'Dinning Zone Only' ? 'rgb(255, 152, 0)' : ''} !important; } .bubble-sub-button-4 > ha-icon { color: ${hass.states['input_select.kitchen_scenes'].state === 'Ceiling Only' ? 'rgb(255, 152, 0)' : ''} !important; } - type: custom:bubble-card card_type: separator icon: mdi:countertop-outline sub_button: - name: People icon: mdi:account-group entity: sensor.kitchen_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false tap_action: action: data entity_id: image.kitchen_person - name: Cats icon: mdi:cat entity: sensor.kitchen_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:sofa sub_button: - name: People icon: mdi:account-group entity: sensor.living_room_01_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.living_room_01_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:sofa sub_button: - name: People icon: mdi:account-group entity: sensor.living_room_02_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.living_room_02_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:stairs sub_button: - name: People icon: mdi:account-group entity: sensor.stairway_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.stairway_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:bed-king sub_button: - name: People icon: mdi:account-group entity: sensor.bedroom_master_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.bedroom_master_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:bed sub_button: - name: People icon: mdi:account-group entity: sensor.bedroom_max_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.bedroom_max_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:bed sub_button: - name: People icon: mdi:account-group entity: sensor.bedroom_olivia_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.bedroom_olivia_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:garage-variant sub_button: - name: People icon: mdi:account-group entity: sensor.garage_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.garage_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:bubble-card card_type: separator icon: mdi:home-circle-outline sub_button: - name: People icon: mdi:account-group entity: sensor.pergola_person_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - name: Cats icon: mdi:cat entity: sensor.pergola_cat_count show_name: false show_icon: true show_state: true show_background: false show_attribute: false - type: custom:layout-break - type: vertical-stack cards: - type: custom:bubble-card card_type: button button_type: switch name: Vacuum entity: vacuum.roborock_s5_max icon: mdi:robot-vacuum show_state: true show_last_changed: true tap_action: action: more-info button_action: tap_action: action: more-info sub_button: - name: Return to dock icon: mdi:home show_background: false tap_action: action: call-service service: vacuum.return_to_base target: entity_id: vacuum.roborock_s5_max - name: Pause icon: mdi:pause show_background: false tap_action: action: call-service service: vacuum.pause target: entity_id: vacuum.roborock_s5_max - name: Start icon: mdi:play tap_action: action: call-service service: vacuum.start target: entity_id: vacuum.roborock_s5_max styles: >- .bubble-button-card-container { /* Change the background color when the vacuum get an error (optional), more details in the styles template section */ background: ${state === 'error' ? 'rgb(200, 80, 40)' : ''} !important; } - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: 'CyberPower UPS #1' entity: sensor.ups_cyberpower_01_status icon: mdi:power-plug-battery show_state: true show_attribute: true tap_action: action: more-info button_action: tap_action: action: more-info sub_button: - name: Battery entity: sensor.ups_cyberpower_01_battery_level icon: mdi:battery show_name: false show_icon: true show_state: true show_background: false - name: Time Left entity: sensor.ups_cyberpower_01_time_left icon: mdi:timer show_name: false show_icon: true show_state: true show_background: false - name: Load entity: sensor.ups_cyberpower_01_load_percentage icon: mdi:battery-arrow-down show_name: false show_icon: true show_state: true show_background: false - name: Transfers entity: sensor.ups_cyberpower_01_transfers icon: mdi:sync show_name: false show_icon: true show_state: true show_background: false styles: | .bubble-button-background { opacity: 1 !important; background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : '' } !important; } ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_01_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_01_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )} - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: 'CyberPower UPS #2' entity: sensor.ups_cyberpower_02_status icon: mdi:power-plug-battery show_state: true show_attribute: true tap_action: action: more-info button_action: tap_action: action: more-info sub_button: - name: Battery entity: sensor.ups_cyberpower_02_battery_level icon: mdi:battery show_name: false show_icon: true show_state: true show_background: false - name: Time Left entity: sensor.ups_cyberpower_02_time_left icon: mdi:timer show_name: false show_icon: true show_state: true show_background: false - name: Load entity: sensor.ups_cyberpower_02_load_percentage icon: mdi:battery-arrow-down show_name: false show_icon: true show_state: true show_background: false - name: Transfers entity: sensor.ups_cyberpower_02_transfers icon: mdi:sync show_name: false show_icon: true show_state: true show_background: false styles: | .bubble-button-background { opacity: 1 !important; background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : '' } !important; } ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_02_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_02_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )} - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: 'CyberPower UPS #3' entity: sensor.ups_cyberpower_03_status icon: mdi:power-plug-battery show_state: true show_attribute: true tap_action: action: more-info button_action: tap_action: action: more-info sub_button: - name: Battery entity: sensor.ups_cyberpower_03_battery_level icon: mdi:battery show_name: false show_icon: true show_state: true show_background: false - name: Time Left entity: sensor.ups_cyberpower_03_time_left icon: mdi:timer show_name: false show_icon: true show_state: true show_background: false - name: Load entity: sensor.ups_cyberpower_03_load_percentage icon: mdi:battery-arrow-down show_name: false show_icon: true show_state: true show_background: false - name: Transfers entity: sensor.ups_cyberpower_03_transfers icon: mdi:sync show_name: false show_icon: true show_state: true show_background: false styles: | .bubble-button-background { opacity: 1 !important; background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : '' } !important; } ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_03_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_03_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )} - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: 'CyberPower UPS #4' entity: sensor.ups_cyberpower_04_status icon: mdi:power-plug-battery show_state: true show_attribute: true tap_action: action: more-info button_action: tap_action: action: more-info sub_button: - name: Battery entity: sensor.ups_cyberpower_04_battery_level icon: mdi:battery show_name: false show_icon: true show_state: true show_background: false - name: Time Left entity: sensor.ups_cyberpower_04_time_left icon: mdi:timer show_name: false show_icon: true show_state: true show_background: false - name: Load entity: sensor.ups_cyberpower_04_load_percentage icon: mdi:battery-arrow-down show_name: false show_icon: true show_state: true show_background: false - name: Transfers entity: sensor.ups_cyberpower_04_transfers icon: mdi:sync show_name: false show_icon: true show_state: true show_background: false styles: | .bubble-button-background { opacity: 1 !important; background-color: ${ state === 'COMMLOST' ? 'rgb(255, 179, 179)' : state === 'ONBATT' ? 'rgb(255, 221, 153)' : '' } !important; } ${icon.setAttribute("icon", hass.states['sensor.ups_cyberpower_04_status'].state === 'COMMLOST' ? 'mdi:power-plug-off-outline' : hass.states['sensor.ups_cyberpower_04_status'].state === 'ONBATT' ? 'mdi:car-battery' : 'mdi:power-plug-battery' )} - type: horizontal-stack cards: - type: custom:bubble-card card_type: button entity: sun.sun card_layout: large-2-rows grid_options: columns: 6 rows: 3 show_attribute: false show_name: true show_icon: true scrolling_effect: true show_state: true hold_action: action: navigate navigation_path: plan button_action: tap_action: action: navigate navigation_path: plan tap_action: action: navigate navigation_path: plan button_type: state name: Family Room icon: mdi:television sub_button: - entity: sun.sun - entity: sun.sun - entity: sun.sun - entity: sun.sun styles: | :host{ --icon-Background-Color: #FF595E ; --color-yellow: 255, 202, 58 ; --color-blue: 25, 130, 196 ; --color-green: 138, 201, 38 ; --color-purple: 106, 76, 147 ; } .card-content { width: 100%; margin: 0 !important; } .bubble-button-card { display: grid; grid-template-areas: 'n n n b' 'l l l b' 'i i . b' 'i i . b'; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1.5fr 0.5fr 1fr 1fr; justify-items: center; } .bubble-icon-container { grid-area: i; border-radius: 50% !important; width: 150% !important; height: 150% !important; max-width: none !important; max-height: none !important; position: absolute !important; place-self: center !important; margin: 0px 0px 0px 0px !important; padding: 0px, 0px, 0px, 0px !important; background-color: var(--icon-Background-Color); } .bubble-icon { width: 40%; position: relative !important; --mdc-icon-size: 100px !important; opacity: 0.5 !important; } .bubble-name-container { grid-area: n; justify-self: start; margin-left: 20px; max-width: calc(100% -(12px + 0px)); } .bubble-name { font-weight: bold; font-size: 16px; } .bubble-state { font-weight: bold; font-size: 14px; } .large .bubble-sub-button-container { grid-area: b; display: flex !important; flex-wrap: wrap; flex-direction: column; gap: calc((100% - 4 * 36px)/5) !important; justify-content: flex-start; width: auto !important; right: 0px !important; padding-right: 0px !important; height: 100% !important; top: calc((100% - 4 * 36px)/5) !important; } .large .bubble-button-card-container { height: 210px !important; } .large .bubble-sub-button { height: 36px !important; } - type: custom:bubble-card card_type: button entity: sun.sun card_layout: large-2-rows grid_options: columns: 6 rows: 3 show_attribute: false show_name: true show_icon: true scrolling_effect: true show_state: true hold_action: action: navigate navigation_path: plan button_action: tap_action: action: navigate navigation_path: plan tap_action: action: navigate navigation_path: plan button_type: state name: Family Room icon: mdi:television sub_button: - entity: sun.sun - entity: sun.sun - entity: sun.sun - entity: sun.sun styles: | :host{ --icon-Background-Color: #FF595E ; --color-yellow: 255, 202, 58 ; --color-blue: 25, 130, 196 ; --color-green: 138, 201, 38 ; --color-purple: 106, 76, 147 ; } .card-content { width: 100%; margin: 0 !important; } .bubble-button-card { display: grid; grid-template-areas: 'n n n b' 'l l l b' 'i i . b' 'i i . b'; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1.5fr 0.5fr 1fr 1fr; justify-items: center; } .bubble-icon-container { grid-area: i; border-radius: 50% !important; width: 150% !important; height: 150% !important; max-width: none !important; max-height: none !important; position: absolute !important; place-self: center !important; margin: 0px 0px 0px 0px !important; padding: 0px, 0px, 0px, 0px !important; background-color: var(--icon-Background-Color); } .bubble-icon { width: 40%; position: relative !important; --mdc-icon-size: 100px !important; opacity: 0.5 !important; } .bubble-name-container { grid-area: n; justify-self: start; margin-left: 20px; max-width: calc(100% -(12px + 0px)); } .bubble-name { font-weight: bold; font-size: 16px; } .bubble-state { font-weight: bold; font-size: 14px; } .large .bubble-sub-button-container { grid-area: b; display: flex !important; flex-wrap: wrap; flex-direction: column; gap: calc((100% - 4 * 36px)/5) !important; justify-content: flex-start; width: auto !important; right: 0px !important; padding-right: 0px !important; height: 100% !important; top: calc((100% - 4 * 36px)/5) !important; } .large .bubble-button-card-container { height: 210px !important; overflow: hidden !important; } .large .bubble-sub-button { height: 36px !important; } - type: custom:layout-break - type: vertical-stack cards: - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: Energy entity: sensor.power_house_total_1mon icon: mdi:transmission-tower show_state: true button_action: tap_action: action: navigate navigation_path: '#energy' sub_button: - entity: sensor.power_house_total_1d show_background: false show_state: true - entity: sensor.power_house_total_1mon show_state: true show_background: false icon: mdi:calendar-week - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: Gas entity: sensor.gas_monthly icon: mdi:meter-gas show_state: true button_action: tap_action: action: navigate navigation_path: '#gas' sub_button: - entity: sensor.gas_daily show_background: false show_state: true - entity: sensor.gas_monthly show_state: true show_background: false icon: mdi:calendar-week - type: custom:bubble-card card_type: button button_type: state card_layout: large-2-rows name: Water entity: sensor.water_monthly icon: mdi:cup-water show_state: true button_action: tap_action: action: navigate navigation_path: '#water' sub_button: - entity: sensor.water_daily show_background: false show_state: true - entity: sensor.water_monthly show_state: true show_background: false icon: mdi:calendar-week # remote.living_room_harmony_hub # # activity_list: ShTV+AVR+TV, ShTV+AVR+Prj # current_activity: ShTV+AVR+TV # activity_starting: null # devices_list: LG TV, Pioneer AV Receiver VSX-LX505, LG Projector, Nvidia Shield TV Pro 2019 # last_activity: ShTV+AVR+TV # friendly_name: Living Room Harmony Hub # supported_features: 4 - type: custom:bubble-card card_type: button entity: remote.living_room_harmony_hub sub_button: - name: TV icon: mdi:television show_background: true show_state: false tap_action: action: select.select_option data: option: 'ShTV+AVR+TV' - name: Projector icon: mdi:projector show_background: true show_state: false tap_action: action: select.select_option data: option: 'ShTV+AVR+Prj' styles: | .bubble-button-background { opacity: 1 !important; background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important; } /* .bubble-button-card-container { background-color: ${state === 'on' ? 'rgb(255, 150, 0)' : ''} !important; opacity: 1 !important; } */ .bubble-sub-button-1 { background-color: white !important; } .bubble-sub-button-1 > ha-icon { color: ${ hass.states['remote.living_room_harmony_hub'].attributes.current_activity === 'ShTV+AVR+TV' ? 'rgb(255, 152, 0)' : '' } !important; } .bubble-sub-button-2 { background-color: white !important; } .bubble-sub-button-2 > ha-icon { color: ${ hass.states['remote.living_room_harmony_hub'].attributes.current_activity === 'ShTV+AVR+Prj' ? 'rgb(255, 152, 0)' : '' } !important; } # source_list: Windows 11, PlayStation 4 Pro, Nvidia Shield TV, Unifi Protect, TV/Nothing, Sonos, ChromeCast/Network, Bluetooth # volume_level: 1 # is_volume_muted: false # source: PlayStation 4 Pro # sound_mode: DOLBY ATMOS/DOLBY SURROUND ··· PLII/PLIIx MOVIE # video_out: yes,out # video_information: # video_input_port: HDMI 2 # input_resolution: 4K(3840x2160) 59 Hz # input_color_schema: RGB # input_color_depth: 24bit # output_resolution: 4K(3840x2160) 59 Hz # output_color_schema: RGB # output_color_depth: 24bit # friendly_name: VSX-LX505 # supported_features: 69516 - type: custom:bubble-card card_type: button button_type: switch card_layout: normal name: Pioneer VSX-LX505 entity: media_player.onkyo_receiver icon: mdi:audio-video show_state: true show_background: false show_attribute: true attribute: source button_action: tap_action: action: toggle sub_button: - entity: script.receiver_switch_to_shield_tv icon: mdi:television-classic show_background: true show_state: false tap_action: action: toggle - entity: script.receiver_switch_to_playstation icon: mdi:controller show_background: true show_state: false tap_action: action: toggle - entity: script.receiver_switch_to_security icon: mdi:camera-metering-matrix show_background: true show_state: false tap_action: action: toggle - entity: script.receiver_switch_to_windows icon: mdi:laptop show_background: true show_state: false tap_action: action: toggle styles: | .bubble-button-background { opacity: 1 !important; background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important; } .bubble-sub-button-1 > ha-icon { color: ${ hass.states['media_player.onkyo_receiver'].attributes.source === 'Nvidia Shield TV' ? 'rgb(255, 152, 0)' : '' } !important; } .bubble-sub-button-2 > ha-icon { color: ${ hass.states['media_player.onkyo_receiver'].attributes.source === 'PlayStation 4 Pro' ? 'rgb(255, 152, 0)' : '' } !important; } .bubble-sub-button-3 > ha-icon { color: ${ hass.states['media_player.onkyo_receiver'].attributes.source === 'Unifi Protect' ? 'rgb(255, 152, 0)' : '' } !important; } .bubble-sub-button-4 > ha-icon { color: ${ hass.states['media_player.onkyo_receiver'].attributes.source === 'Windows 11' ? 'rgb(255, 152, 0)' : '' } !important; } # media_player.playstation_4_pro # # playing # # source_list: BATTLEFIELD 4, Battlefield™ 1, Call of Duty®: Modern Warfare® 2 Campaign Remastered, DIABLO III: REAPER OF SOULS – ULTIMATE EVIL EDITION, DiRT Rally, Fall Guys, Fortnite, Gran Turismo® 7, Gran Turismo™SPORT, Grand Theft Auto V (PS4™), Terraria: PS4™ Edition, XCOM® 2 # media_content_id: CUSA00419 # media_content_type: game # media_title: Grand Theft Auto V (PS4™) # source: Grand Theft Auto V (PS4™) # entity_picture: /api/media_player_proxy/media_player.playstation_4_pro?token=007ca02b0380f3ac9c545f072bbc59c1d0630ff327babffc223e2ef6bf940f71&cache=5cf70801995f315e # friendly_name: PlayStation 4 Pro # supported_features: 6529 - type: custom:bubble-card card_type: button entity: media_player.nvidia_shield_tv_living_room_2 sub_button: - entity: switch.android_tv_youtube icon: mdi:youtube show_background: true show_state: false tap_action: action: toggle - entity: switch.android_tv_netflix icon: mdi:netflix show_background: true show_state: false tap_action: action: toggle - entity: switch.android_tv_plex icon: mdi:plex show_background: true show_state: false tap_action: action: toggle styles: | .bubble-button-background { opacity: 1 !important; background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important; } .bubble-sub-button-1 { background-color: white !important; } .bubble-sub-button-1 > ha-icon { color: ${ hass.states['media_player.nvidia_shield_tv_living_room_2'].attributes.app_id === 'com.google.android.youtube.tv,' ? 'rgb(255, 152, 0)' : '' } !important; } .bubble-sub-button-2 { background-color: white !important; } .bubble-sub-button-2 > ha-icon { color: ${ hass.states['media_player.nvidia_shield_tv_living_room_2'].attributes.app_id === 'com.netflix.ninja' ? 'rgb(255, 152, 0)' : '' } !important; } .bubble-sub-button-3 { background-color: white !important; } .bubble-sub-button-3 > ha-icon { color: ${ hass.states['media_player.nvidia_shield_tv_living_room_2'].attributes.app_id === 'com.plexapp.android' ? 'rgb(255, 152, 0)' : '' } !important; } - type: custom:bubble-card card_type: climate entity: climate.living_room sub_button: - name: HVAC modes menu select_attribute: hvac_modes show_arrow: false state_background: false - type: vertical-stack cards: - type: custom:bubble-card card_type: pop-up hash: '#kitchen' name: Kitchen icon: mdi:fridge - type: custom:bubble-card card_type: button button_type: slider name: Sink entity: light.kitchen_sink_01 show_state: true tap_action: action: toggle button_action: tap_action: action: toggle - type: custom:bubble-card card_type: button button_type: slider name: LED entity: light.kitchen_led_01 show_state: true tap_action: action: toggle button_action: tap_action: action: toggle - type: custom:bubble-card card_type: button button_type: slider name: 'Ceiling #1' entity: light.kitchen_ceiling_01 show_state: true tap_action: action: toggle button_action: tap_action: action: toggle - type: custom:bubble-card card_type: button button_type: slider name: 'Ceiling #2' entity: light.kitchen_ceiling_02 show_state: true tap_action: action: toggle button_action: tap_action: action: toggle