API tools faq
paste
PodPerson_HA

HA Dashboard - Button + Bubble Card

PodPerson_HA
Jul 6th, 2024 (edited)
236
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 79.84 KB | Source Code | 0 0
raw download clone embed print report
  1.    title: Quick
  2.     icon: 'mdi:timer'
  3.     path: default_view
  4.     badges: []
  5.     cards:
  6.       - type: vertical-stack ## 1st Page Column
  7.         cards:
  9.         - type: vertical-stack ## Group 1 - Security Buttons/States
  10.           cards:        
  11.           - type: custom:bubble-card
  12.             card_type: separator
  13.             name: Home
  14.             icon: mdi:home
  15.                      
  16.           - type: custom:stack-in-card
  17.             mode: horizontal
  18.             style:
  19.                   .: |
  20.                    ha-card {
  21.                       border-radius: 30px;
  22.                       margin: 0 auto;
  23.                       padding-top: 0px;
  24.                     }
  25.  
  26.  
  27.             cards:
  28.                 - type: 'custom:button-card' # Alarm
  29.                   entity: alarm_control_panel.security
  30.                   template: 1_alarm
  31.                   show_state: true
  32.                  
  33.                 - type: 'custom:button-card' # Door Lock
  34.                   template: 1_lock
  35.                   entity: lock.front_door
  36.                   show_name: true
  37.                   name: Door Lock
  38.                   show_state: true
  39.  
  40.                 - type: 'custom:button-card' # External Door Sensors
  41.                   template: 1_state_small
  42.                   entity: group.door_sensors_external
  43.                   name: External
  44.                   show_name: true
  45.                   show_state: false
  46.                   show_icon: true
  47.                   show_label: false
  48.                   show_last_changed: true
  49.                   custom_fields:
  50.                     msen: >
  51.                      [[[
  52.                         if (states['group.door_sensors_external'].state === 'off') return 'Off';
  53.                         if (states['binary_sensor.d_back'].state === 'on') var Bk = "Bk. "; else var Bk = '';
  54.                         if (states['binary_sensor.d_screen'].state === 'on') var S = "S. "; else var S = '';
  55.                         if (states['binary_sensor.d_laundry'].state === 'on') var F = "F. "; else var F = '';
  56.                         return (F + S + Bk);
  57.                       ]]]
  58.                   state:
  59.                     - color: var(--secondary-button-colour)
  60.                       icon: 'mdi:door-open'
  61.                       value: 'on'
  62.                     - color: var(--primary-button-colour)
  63.                       icon: 'mdi:door-closed'
  64.                       value: 'off'  
  65.                   styles:
  66.                     grid:
  67.                       - grid-template-areas: ' "i" "n" "msen" "l" '
  68.                       - grid-template-columns: 1fr
  69.                       - grid-template-rows: 1fr min-content min-content min-content
  70.                     custom_fields:
  71.                       msen:
  72.                         - font-size: 13px
  73.                         - color: var(primary-text-color)
  74.                         - align-self: middle
  75.                         - justify-self: middle
  76.  
  77.                 - type: 'custom:button-card' # Garage Door
  78.                   template: 1_garage_door
  79.                   show_state: true
  80.                   entity: cover.d_garage
  81.                   name: Garage
  82.              
  83.  
  84.                 - type: 'custom:button-card' #Motion Sensors
  85.                   template: 1_state_small
  86.                   entity: group.motion_sensors
  87.                   show_name: true
  88.                   show_state: false
  89.                   show_icon: true
  90.                   show_label: false
  91.                   show_last_changed: true
  92.                   name: Motion
  93.                   icon: 'mdi:help'
  94.                   custom_fields:
  95.                     msen: >
  96.                      [[[
  97.                         if (states['group.motion_sensors'].state === 'off') return 'Off';
  98.                         if (states['binary_sensor.ms_lounge'].state === 'on') var L = "L. "; else var L = '';
  99.                         if (states['binary_sensor.ms_kitchen'].state === 'on') var K = "K. "; else var K = '';
  100.                         if (states['binary_sensor.ms_bedroom'].state === 'on') var Bd = "Bd. "; else var Bd = '';
  101.                         if (states['binary_sensor.ms_laundry'].state === 'on') var C = "C. "; else var C = '';
  102.                         if (states['binary_sensor.ms_bathroom'].state === 'on') var Bt = "Bt. "; else var Bt = '';
  103.                         if (states['binary_sensor.ms_toilet'].state === 'on') var T = "T. "; else var T = '';
  104.                         if (states['binary_sensor.ms_garage'].state === 'on') var G = "G. "; else var G = '';
  105.                         return (L + K + Bd + C + Bt + T + G);
  106.                       ]]]
  107.                   state:
  108.                     - color: var(--secondary-button-colour)
  109.                       icon: 'mdi:run-fast'
  110.                       value: 'on'
  111.                     - color: var(--primary-button-colour)
  112.                       icon: 'mdi:walk'
  113.                       value: 'off'
  114.                   styles:
  115.                     grid:
  116.                       - grid-template-areas: ' "i" "n" "msen" "l" '
  117.                       - grid-template-columns: 1fr
  118.                       - grid-template-rows: 1fr min-content min-content min-content
  119.                     custom_fields:
  120.                       msen:
  121.                         - font-size: 13px
  122.                         - color: var(primary-text-color)
  123.                         - align-self: middle
  124.                         - justify-self: middle
  125.  
  126.         - type: vertical-stack ## Group 2 - Music
  127.           cards:
  128.           - type: custom:bubble-card   #
  129.             card_type: separator
  130.             name: Music
  131.             icon: mdi:music
  132.  
  133.           - type: custom:stack-in-card  # Music Player
  134.             mode: vertical
  135.             cards:
  136.               - type: custom:mini-media-player  # Music Player
  137.                 entity: media_player.kbs_music
  138.                 icon: mdi:apple
  139.                 artwork: none
  140.                 show_source: true
  141.                 group: true
  142.                 show_progress: true
  143.                 # info: scroll
  144.                 hide:
  145.                   volume_level: false
  146.                 style:  |
  147.                  :host {
  148.                      background-color: var(--secondary-background-color);
  149.                      border-top-left-radius: 35px;
  150.                      border-top-right-radius: 35px;
  151.                         }
  152.  
  153.  
  154.               - type: horizontal-stack  # Volume Buttons
  155.                 cards:
  157.                   - type: custom:button-card  # Vol 3
  158.                     template: haptic
  159.                     entity: input_number.kbs_music_airplay_vol_cur
  160.                     show_name: true
  161.                     show_state: false
  162.                     show_icon: false
  163.                     show_label: false
  164.                     name: 3
  165.                     tap_action:
  166.                       action: call-service
  167.                       service: input_number.set_value
  168.                       service_data:
  169.                         entity_id: input_number.kbs_music_airplay_vol_new
  170.                         value: 4
  171.                     state:
  172.                       - operator: template
  173.                         value: '[[[ return entity.state <= 4; ]]]'
  174.                         styles:
  175.                           name:
  176.                             - color: var(--secondary-button-colour)
  177.                       - value: '[[[ return entity.state > 4; ]]]'
  178.                         styles:
  179.                           name:
  180.                             - color: var(--primary-button-color)
  181.  
  182.                   - type: custom:button-card   # Vol 5
  183.                     template: haptic
  184.                     entity: input_number.kbs_music_airplay_vol_cur
  185.                     show_name: true
  186.                     show_state: false
  187.                     show_icon: false
  188.                     show_label: false
  189.                     name: 5
  190.                     tap_action:
  191.                       action: call-service
  192.                       service: input_number.set_value
  193.                       service_data:
  194.                         entity_id: input_number.kbs_music_airplay_vol_new
  195.                         value: 5
  196.                     state:
  197.                       - operator: template
  198.                         value: '[[[ return entity.state <= 5 && entity.state > 3; ]]]'
  199.                         styles:
  200.                           name:
  201.                             - color: var(--secondary-button-colour)
  202.                       - value: '[[[ return entity.state < 3; ]]]'
  203.                         styles:
  204.                           name:
  205.                             - color: var(--primary-button-color)
  206.                       - value: '[[[ return entity.state > 5; ]]]'
  207.                         styles:
  208.                           name:
  209.                             - color: var(--primary-button-color)
  210.  
  211.                   - type: custom:button-card   # Vol 10
  212.                     template: haptic
  213.                     entity: input_number.kbs_music_airplay_vol_cur
  214.                     show_name: true
  215.                     show_state: false
  216.                     show_icon: false
  217.                     show_label: false
  218.                     name: 10
  219.                     tap_action:
  220.                       action: call-service
  221.                       service: input_number.set_value
  222.                       service_data:
  223.                         entity_id: input_number.kbs_music_airplay_vol_new
  224.                         value: 10
  225.                     state:
  226.                       - operator: template
  227.                         value: '[[[ return entity.state <= 10 && entity.state > 5; ]]]'
  228.                         styles:
  229.                           name:
  230.                             - color: var(--secondary-button-colour)
  231.                       - value: '[[[ return entity.state < 25; ]]]'
  232.                         styles:
  233.                           name:
  234.                             - color: var(--primary-button-color)
  235.                       - value: '[[[ return entity.state > 5; ]]]'
  236.                         styles:
  237.                           name:
  238.                             - color: var(--primary-button-color)
  239.  
  240.                   - type: custom:button-card   # Vol 15
  241.                     template: haptic
  242.                     entity: input_number.kbs_music_airplay_vol_cur
  243.                     show_name: true
  244.                     show_state: false
  245.                     show_icon: false
  246.                     show_label: false
  247.                     name: 15
  248.                     tap_action:
  249.                       action: call-service
  250.                       service: input_number.set_value
  251.                       service_data:
  252.                         entity_id: input_number.kbs_music_airplay_vol_new
  253.                         value: 15
  254.                     state:
  255.                       - operator: template
  256.                         value: '[[[ return entity.state <= 15 && entity.state > 10; ]]]'
  257.                         styles:
  258.                           name:
  259.                             - color: var(--secondary-button-colour)
  260.                       - value: '[[[ return entity.state < 10; ]]]'
  261.                         styles:
  262.                           name:
  263.                             - color: var(--primary-button-color)
  264.                       - value: '[[[ return entity.state > 15; ]]]'
  265.                         styles:
  266.                           name:
  267.                             - color: var(--primary-button-color)
  268.  
  269.                   - type: custom:button-card   # Vol 20
  270.                     template: haptic
  271.                     entity: input_number.kbs_music_airplay_vol_cur
  272.                     show_name: true
  273.                     show_state: false
  274.                     show_icon: false
  275.                     show_label: false
  276.                     name: 20
  277.                     tap_action:
  278.                       action: call-service
  279.                       service: input_number.set_value
  280.                       service_data:
  281.                         entity_id: input_number.kbs_music_airplay_vol_new
  282.                         value: 20
  283.                     state:
  284.                       - operator: template
  285.                         value: '[[[ return entity.state <= 20 && entity.state > 15; ]]]'
  286.                         styles:
  287.                           name:
  288.                             - color: var(--secondary-button-colour)
  289.                       - value: '[[[ return entity.state < 15; ]]]'
  290.                         styles:
  291.                           name:
  292.                             - color: var(--primary-button-color)
  293.                       - value: '[[[ return entity.state > 20; ]]]'
  294.                         styles:
  295.                           name:
  296.                             - color: var(--primary-button-color)
  297.  
  298.                   - type: custom:button-card   # Vol 25
  299.                     template: haptic
  300.                     entity: input_number.kbs_music_airplay_vol_cur
  301.                     show_name: true
  302.                     show_state: false
  303.                     show_icon: false
  304.                     show_label: false
  305.                     name: 25
  306.                     tap_action:
  307.                       action: call-service
  308.                       service: input_number.set_value
  309.                       service_data:
  310.                         entity_id: input_number.kbs_music_airplay_vol_new
  311.                         value: 25
  312.                     state:
  313.                       - operator: template
  314.                         value: '[[[ return entity.state <= 25 && entity.state > 20; ]]]'
  315.                         styles:
  316.                           name:
  317.                             - color: var(--secondary-button-colour)
  318.                       - value: '[[[ return entity.state < 20; ]]]'
  319.                         styles:
  320.                           name:
  321.                             - color: var(--primary-button-color)
  322.                       - value: '[[[ return entity.state > 25; ]]]'
  323.                         styles:
  324.                           name:
  325.                             - color: var(--primary-button-color)
  326.  
  327.                   - type: custom:button-card  # Vol 30
  328.                     template: haptic
  329.                     entity: input_number.kbs_music_airplay_vol_cur
  330.                     show_name: true
  331.                     show_state: false
  332.                     show_icon: false
  333.                     show_label: false
  334.                     name: 30
  335.                     tap_action:
  336.                       action: call-service
  337.                       service: input_number.set_value
  338.                       service_data:
  339.                         entity_id: input_number.kbs_music_airplay_vol_new
  340.                         value: 30
  341.                     state:
  342.                       - operator: template
  343.                         value: '[[[ return entity.state <= 30 && entity.state > 25; ]]]'
  344.                         styles:
  345.                           name:
  346.                             - color: var(--secondary-button-colour)
  347.                       - value: '[[[ return entity.state < 25; ]]]'
  348.                         styles:
  349.                           name:
  350.                             - color: var(--primary-button-color)
  351.  
  352.                       - value: '[[[ return entity.state > 30; ]]]'
  353.                         styles:
  354.                           name:
  355.                             - color: red
  356.  
  357.  
  358.         - type: vertical-stack ## Group 3 - Lights
  359.           cards:
  361.             - type: custom:bubble-card
  362.               card_type: separator
  363.               name: Lights
  364.               icon: mdi:lightbulb-group
  365.  
  366.             - type: horizontal-stack # 1st Row Lights
  367.               cards:
  368.                 - type: custom:bubble-card # Lounge Light
  369.                   card_type: button
  370.                   button_type: slider
  371.                   scrolling_effect: false
  372.                   show_last_changed: true
  373.                   show_attribute: false
  374.                   show_state: false
  375.                   show_name: false
  376.                   columns: 1
  377.                   card_layout: large-2-rows
  378.                   entity: light.lounge
  379.                   tap_action:
  380.                     action: toggle
  381.                   double_tap_action:
  382.                     action: more-info
  383.                   sub_button:
  384.                     - name: Mode
  385.                       entity: input_select.light_lounge_mode
  386.                       card_type: select
  387.                       button_type: state
  388.                       show_icon: true
  389.                       show_background: false
  390.                       show_state: true
  391.                       icon: mdi:lightbulb-group-outline
  392.  
  393.                     - name: Temp
  394.                       entity: sensor.temp_lounge
  395.                       show_icon: true
  396.                       show_background: false
  397.                       show_state: true
  398.                   styles: |
  399.                        .bubble-name-container {
  400.                           margin-left: 0px;
  401.                           margin-right: 0px;
  402.                           font-size: 12px !important;
  403.                             }
  404.  
  405.                         .bubble-icon-container {
  406.                           margin-left: 0px;
  407.                           margin-right: 1px;
  408.                             }
  409.  
  410.                         .bubble-sub-button {
  411.                           margin-left: 0px;
  412.                           margin-right: -25px;
  413.                           background: none !important;
  414.                           border-radius: 0;
  415.                           font-size: 8px !important;
  416.                             }
  417.                         .bubble-state {
  418.                           font-size: 8px !important;
  419.                             }
  420.  
  421.                         .bubble-sub-button-2 > ha-icon {
  422.                          color: ${hass.states['sensor.temp_lounge'].state <= 15 ? 'var(--low-colour)'
  423.                          : hass.states['sensor.temp_lounge'].state <= 25 ? 'var(--primary-button-colour)'
  424.                          : 'var(--high-colour)'} !important;
  425.                           }
  426.                         .bubble-sub-button-2 {
  427.                          color: ${hass.states['sensor.temp_lounge'].state <= 15 ? 'var(--low-colour)'
  428.                          : hass.states['sensor.temp_lounge'].state <= 25 ? 'var(--primary-button-colour)'
  429.                          : 'var(--high-colour)'} !important;
  430.                         }
  431.  
  432.                         .bubble-sub-button-1 {
  433.                          color: ${hass.states['input_select.light_lounge_mode'].state === 'Bright' ? 'var(--light-bright)'
  434.                          : hass.states['input_select.light_lounge_mode'].state === 'Soft' ? 'var(--light-soft)'  
  435.                          : hass.states['input_select.light_lounge_mode'].state === 'Dim' ? 'var(--light-dim)'
  436.                          : hass.states['input_select.light_lounge_mode'].state === 'Dark' ? 'var(--light-dark)'
  437.                          : hass.states['input_select.light_lounge_mode'].state === 'Night' ? 'var(--light-soft)'
  438.                          : 'var(--primary-button-colour)'} !important;
  439.                         }
  440.                         .bubble-sub-button-1 > ha-icon {
  441.                          color: ${hass.states['input_select.light_lounge_mode'].state === 'Bright' ? 'var(--light-bright)'
  442.                          : hass.states['input_select.light_lounge_mode'].state === 'Soft' ? 'var(--light-soft)'  
  443.                          : hass.states['input_select.light_lounge_mode'].state === 'Dim' ? 'var(--light-dim)'
  444.                          : hass.states['input_select.light_lounge_mode'].state === 'Dark' ? 'var(--light-dark)'
  445.                          : hass.states['input_select.light_lounge_mode'].state === 'Night' ? 'var(--light-soft)'
  446.                          : 'var(--primary-button-colour)'} !important;
  447.                         }
  448.  
  449.                         ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_lounge'].state <= 15 ? 'mdi:thermometer-chevron-down'
  450.                           : hass.states['sensor.temp_lounge'].state <= 25 ? 'mdi:thermometer'
  451.                           : 'mdi:thermometer-chevron-up')}
  452.  
  453.                 - type: custom:bubble-card # Kitchen Light
  454.                   card_type: button
  455.                   button_type: slider
  456.                   scrolling_effect: false
  457.                   show_last_changed: true
  458.                   show_attribute: false
  459.                   show_state: false
  460.                   show_name: false
  461.                   columns: 1
  462.                   card_layout: large-2-rows
  463.                   entity: light.kitchen
  464.                   tap_action:
  465.                     action: toggle
  466.                   double_tap_action:
  467.                     action: more-info
  468.                   sub_button:
  469.                     - name: Mode
  470.                       entity: input_select.light_kitchen_mode
  471.                       show_icon: true
  472.                       icon:
  473.                       show_background: false
  474.                       show_state: true
  475.                       icon: mdi:lightbulb-group-outline
  476.  
  477.                     - name: Temp
  478.                       entity: sensor.temp_kitchen
  479.                       show_icon: true
  480.                       show_background: false
  481.                       show_state: true
  482.                   styles: |
  484.                         .bubble-name-container {
  485.                           margin-left: 0px;
  486.                           margin-right: 0px;
  487.                           font-size: 12px !important;
  488.                             }
  489.  
  490.                         .bubble-icon-container {
  491.                           margin-left: 0px;
  492.                           margin-right: 1px;
  493.                             }
  494.                         .bubble-sub-button {
  495.                           margin-left: 0px;
  496.                           margin-right: -25px;
  497.                           background: none !important;
  498.                           border-radius: 0;
  499.                           font-size: 8px !important;
  500.                             }
  501.                         .bubble-state {
  502.                           font-size: 8px !important;
  503.                             }
  504.  
  505.  
  506.                         .bubble-sub-button-2 > ha-icon {
  507.                          color: ${hass.states['sensor.temp_kitchen'].state <= 15 ? 'var(--low-colour)'
  508.                          : hass.states['sensor.temp_kitchen'].state <= 25 ? 'var(--primary-button-colour)'
  509.                          : 'var(--high-colour)'} !important;
  510.                           }
  511.                         .bubble-sub-button-2 {
  512.                          color: ${hass.states['sensor.temp_kitchen'].state <= 15 ? 'var(--low-colour)'
  513.                          : hass.states['sensor.temp_kitchen'].state <= 25 ? 'var(--primary-button-colour)'
  514.                          : 'var(--high-colour)'} !important;
  515.                         }
  516.  
  517.                         .bubble-sub-button-1 {
  518.                          color: ${hass.states['input_select.light_kitchen_mode'].state === 'Bright' ? 'var(--light-bright)'
  519.                          : hass.states['input_select.light_kitchen_mode'].state === 'Soft' ? 'var(--light-soft)'  
  520.                          : hass.states['input_select.light_kitchen_mode'].state === 'Dim' ? 'var(--light-dim)'
  521.                          : hass.states['input_select.light_kitchen_mode'].state === 'Dark' ? 'var(--light-dark)'
  522.                          : hass.states['input_select.light_kitchen_mode'].state === 'Night' ? 'var(--light-soft)'
  523.                          : 'var(--primary-button-colour)'} !important;
  524.                         }
  525.                         .bubble-sub-button-1 > ha-icon {
  526.                          color: ${hass.states['input_select.light_kitchen_mode'].state === 'Bright' ? 'var(--light-bright)'
  527.                          : hass.states['input_select.light_kitchen_mode'].state === 'Soft' ? 'var(--light-soft)'  
  528.                          : hass.states['input_select.light_kitchen_mode'].state === 'Dim' ? 'var(--light-dim)'
  529.                          : hass.states['input_select.light_kitchen_mode'].state === 'Dark' ? 'var(--light-dark)'
  530.                          : hass.states['input_select.light_kitchen_mode'].state === 'Night' ? 'var(--light-soft)'
  531.                          : 'var(--primary-button-colour)'} !important;
  532.                         }
  533.  
  534.                         ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_kitchen'].state <= 15 ? 'mdi:thermometer-chevron-down'
  535.                           : hass.states['sensor.temp_kitchen'].state <= 25 ? 'mdi:thermometer'
  536.                           : 'mdi:thermometer-chevron-up')}
  537.  
  538.             - type: horizontal-stack # 2nd Row Lights
  539.               cards:
  541.                 - type: conditional # Bedroom Globe
  542.                   conditions:
  543.                     - entity: input_select.light_bedroom
  544.                       state: "Globe"
  545.                   card:
  546.                       type: custom:bubble-card
  547.                       card_type: button
  548.                       button_type: slider
  549.                       scrolling_effect: false
  550.                       show_last_changed: true
  551.                       show_attribute: false
  552.                       show_state: false
  553.                       show_name: false
  554.                       columns: 1
  555.                       card_layout: large-2-rows
  556.                       entity: light.bedroom_globe
  557.                       tap_action:
  558.                         action: toggle
  559.                       double_tap_action:
  560.                         action: more-info
  561.                       hold_action:
  562.                         action: call-service
  563.                         service: input_select.select_option
  564.                         data:
  565.                           entity_id: input_select.light_bedroom
  566.                           option: "Lamp"
  567.                       sub_button:
  568.                         - name: Mode
  569.                           entity: input_select.light_bedroom_globe_mode
  570.                           show_icon: true
  571.                           icon:
  572.                           show_background: false
  573.                           show_state: true
  574.                           icon: mdi:lightbulb-group-outline
  575.  
  576.                         - name: Temp
  577.                           entity: sensor.temp_bedroom
  578.                           show_icon: true
  579.                           show_background: false
  580.                           show_state: true
  581.                       styles: |
  582.                        .bubble-name-container {
  583.                           margin-left: 0px;
  584.                           margin-right: 0px;
  585.                           font-size: 12px !important;
  586.                             }
  587.  
  588.                         .bubble-icon-container {
  589.                           margin-left: 0px;
  590.                           margin-right: 1px;
  591.                             }
  592.  
  593.                         .bubble-sub-button {
  594.                           margin-left: 0px;
  595.                           margin-right: -25px;
  596.                           background: none !important;
  597.                           border-radius: 0;
  598.                           font-size: 8px !important;
  599.                             }
  600.                         .bubble-state {
  601.                           font-size: 8px !important;
  602.                             }
  603.  
  604.                         .bubble-sub-button-2 > ha-icon {
  605.                          color: ${hass.states['sensor.temp_bedroom'].state <= 15 ? 'var(--low-colour)'
  606.                          : hass.states['sensor.temp_bedroom'].state <= 25 ? 'var(--primary-button-colour)'
  607.                          : 'var(--high-colour)'} !important;
  608.                           }
  609.                         .bubble-sub-button-2 {
  610.                          color: ${hass.states['sensor.temp_bedroom'].state <= 15 ? 'var(--low-colour)'
  611.                          : hass.states['sensor.temp_bedroom'].state <= 25 ? 'var(--primary-button-colour)'
  612.                          : 'var(--high-colour)'} !important;
  613.                         }
  614.  
  615.                         .bubble-sub-button-1 {
  616.                          color: ${hass.states['input_select.light_bedroom_globe_mode'].state === 'Bright' ? 'var(--light-bright)'
  617.                          : hass.states['input_select.light_bedroom_globe_mode'].state === 'Soft' ? 'var(--light-soft)'  
  618.                          : hass.states['input_select.light_bedroom_globe_mode'].state === 'Dim' ? 'var(--light-dim)'
  619.                          : hass.states['input_select.light_bedroom_globe_mode'].state === 'Dark' ? 'var(--light-dark)'
  620.                          : hass.states['input_select.light_bedroom_globe_mode'].state === 'Night' ? 'var(--light-soft)'
  621.                          : 'var(--primary-button-colour)'} !important;
  622.                         }
  623.                         .bubble-sub-button-1 > ha-icon {
  624.                          color: ${hass.states['input_select.light_bedroom_globe_mode'].state === 'Bright' ? 'var(--light-bright)'
  625.                          : hass.states['input_select.light_bedroom_globe_mode'].state === 'Soft' ? 'var(--light-soft)'  
  626.                          : hass.states['input_select.light_bedroom_globe_mode'].state === 'Dim' ? 'var(--light-dim)'
  627.                          : hass.states['input_select.light_bedroom_globe_mode'].state === 'Dark' ? 'var(--light-dark)'
  628.                          : hass.states['input_select.light_bedroom_globe_mode'].state === 'Night' ? 'var(--light-soft)'
  629.                          : 'var(--primary-button-colour)'} !important;
  630.                         }
  631.  
  632.                         ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_bedroom'].state <= 15 ? 'mdi:thermometer-chevron-down'
  633.                           : hass.states['sensor.temp_bedroom'].state <= 25 ? 'mdi:thermometer'
  634.                           : 'mdi:thermometer-chevron-up')}
  635.  
  636.                 - type: conditional  # Bedroom Lamp
  637.                   conditions:
  638.                     - entity: input_select.light_bedroom
  639.                       state: "Lamp"
  640.                   card:
  641.                       type: custom:bubble-card
  642.                       card_type: button
  643.                       button_type: slider
  644.                       scrolling_effect: false
  645.                       show_last_changed: true
  646.                       show_attribute: false
  647.                       show_state: false
  648.                       show_name: false
  649.                       columns: 1
  650.                       card_layout: large-2-rows
  651.                       entity: light.bedroom_lamp
  652.                       tap_action:
  653.                         action: toggle
  654.                       double_tap_action:
  655.                         action: more-info
  656.                       hold_action:
  657.                         action: call-service
  658.                         service: input_select.select_option
  659.                         data:
  660.                           entity_id: input_select.light_bedroom
  661.                           option: "Globe"
  662.                       sub_button:
  664.                         - name: Mode
  665.                           entity: input_select.light_bedroom_lamp_mode
  666.                           show_icon: true
  667.                           icon:
  668.                           show_background: false
  669.                           show_state: true
  670.                           icon: mdi:lightbulb-group-outline
  671.  
  672.                         - name: Temp
  673.                           entity: sensor.temp_bedroom
  674.                           show_icon: true
  675.                           show_background: false
  676.                           show_state: true
  677.                       styles: |
  678.                        .bubble-name-container {
  679.                           margin-left: 0px;
  680.                           margin-right: 0px;
  681.                           font-size: 12px !important;
  682.                             }
  683.  
  684.                         .bubble-icon-container {
  685.                           margin-left: 0px;
  686.                           margin-right: 1px;
  687.                             }
  688.  
  689.                         .bubble-sub-button {
  690.                           margin-left: 0px;
  691.                           margin-right: -25px;
  692.                           background: none !important;
  693.                           border-radius: 0;
  694.                           font-size: 8px !important;
  695.                             }
  696.                         .bubble-state {
  697.                           font-size: 8px !important;
  698.                             }
  699.  
  700.                         .bubble-sub-button-2 > ha-icon {
  701.                          color: ${hass.states['sensor.temp_bedroom'].state <= 15 ? 'var(--low-colour)'
  702.                          : hass.states['sensor.temp_bedroom'].state <= 25 ? 'var(--primary-button-colour)'
  703.                          : 'var(--high-colour)'} !important;
  704.                           }
  705.                         .bubble-sub-button-2 {
  706.                          color: ${hass.states['sensor.temp_bedroom'].state <= 15 ? 'var(--low-colour)'
  707.                          : hass.states['sensor.temp_bedroom'].state <= 25 ? 'var(--primary-button-colour)'
  708.                          : 'var(--high-colour)'} !important;
  709.                         }
  710.  
  711.                         .bubble-sub-button-1 {
  712.                          color: ${hass.states['input_select.light_bedroom_lamp_mode'].state === 'Bright' ? 'var(--light-bright)'
  713.                          : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Soft' ? 'var(--light-soft)'  
  714.                          : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Dim' ? 'var(--light-dim)'
  715.                          : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Dark' ? 'var(--light-dark)'
  716.                          : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Night' ? 'var(--light-soft)'
  717.                          : 'var(--primary-button-colour)'} !important;
  718.                         }
  719.                         .bubble-sub-button-1 > ha-icon {
  720.                          color: ${hass.states['input_select.light_bedroom_lamp_mode'].state === 'Bright' ? 'var(--light-bright)'
  721.                          : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Soft' ? 'var(--light-soft)'  
  722.                          : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Dim' ? 'var(--light-dim)'
  723.                          : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Dark' ? 'var(--light-dark)'
  724.                          : hass.states['input_select.light_bedroom_lamp_mode'].state === 'Night' ? 'var(--light-soft)'
  725.                          : 'var(--primary-button-colour)'} !important;
  726.                         }
  727.  
  728.                         ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_bedroom'].state <= 15 ? 'mdi:thermometer-chevron-down'
  729.                           : hass.states['sensor.temp_bedroom'].state <= 25 ? 'mdi:thermometer'
  730.                           : 'mdi:thermometer-chevron-up')}
  731.  
  732.  
  733.                 - type: custom:bubble-card ## Bathroom Light
  734.                   card_type: button
  735.                   button_type: slider
  736.                   scrolling_effect: false
  737.                   show_last_changed: true
  738.                   show_attribute: false
  739.                   show_state: false
  740.                   show_name: false
  741.                   columns: 1
  742.                   card_layout: large-2-rows
  743.                   entity: light.bathroom
  744.                   tap_action:
  745.                     action: toggle
  746.                   double_tap_action:
  747.                     action: more-info
  748.                   sub_button:
  749.                     - name: Mode
  750.                       entity: input_select.light_bathroom_mode
  751.                       show_icon: true
  752.                       icon:
  753.                       show_background: false
  754.                       show_state: true
  755.                       icon: mdi:lightbulb-group-outline
  756.  
  757.                     - name: Temp
  758.                       entity: sensor.temp_bathroom
  759.                       show_icon: true
  760.                       show_background: false
  761.                       show_state: true
  762.                   styles: |
  763.                        .bubble-name-container {
  764.                           margin-left: 0px;
  765.                           margin-right: 0px;
  766.                           font-size: 12px !important;
  767.                             }
  768.  
  769.                         .bubble-icon-container {
  770.                           margin-left: 0px;
  771.                           margin-right: 1px;
  772.                             }
  773.  
  774.                         .bubble-sub-button {
  775.                           margin-left: 0px;
  776.                           margin-right: -25px;
  777.                           background: none !important;
  778.                           border-radius: 0;
  779.                           font-size: 8px !important;
  780.                             }
  781.  
  782.                         .bubble-state {
  783.                           font-size: 8px !important;
  784.                             }
  785.  
  786.                         .bubble-sub-button-2 > ha-icon {
  787.                          color: ${hass.states['sensor.temp_bathroom'].state <= 15 ? 'var(--low-colour)'
  788.                          : hass.states['sensor.temp_bathroom'].state <= 25 ? 'var(--primary-button-colour)'
  789.                          : 'var(--high-colour)'} !important;
  790.                           }
  791.                         .bubble-sub-button-2 {
  792.                          color: ${hass.states['sensor.temp_bathroom'].state <= 15 ? 'var(--low-colour)'
  793.                          : hass.states['sensor.temp_bathroom'].state <= 25 ? 'var(--primary-button-colour)'
  794.                          : 'var(--high-colour)'} !important;
  795.                         }
  796.  
  797.                         .bubble-sub-button-1 {
  798.                          color: ${hass.states['input_select.light_bathroom_mode'].state === 'Bright' ? 'var(--light-bright)'
  799.                          : hass.states['input_select.light_bathroom_mode'].state === 'Soft' ? 'var(--light-soft)'  
  800.                          : hass.states['input_select.light_bathroom_mode'].state === 'Dim' ? 'var(--light-dim)'
  801.                          : hass.states['input_select.light_bathroom_mode'].state === 'Dark' ? 'var(--light-dark)'
  802.                          : hass.states['input_select.light_bathroom_mode'].state === 'Night' ? 'var(--light-soft)'
  803.                          : 'var(--primary-button-colour)'} !important;
  804.                         }
  805.                         .bubble-sub-button-1 > ha-icon {
  806.                          color: ${hass.states['input_select.light_bathroom_mode'].state === 'Bright' ? 'var(--light-bright)'
  807.                          : hass.states['input_select.light_bathroom_mode'].state === 'Soft' ? 'var(--light-soft)'  
  808.                          : hass.states['input_select.light_bathroom_mode'].state === 'Dim' ? 'var(--light-dim)'
  809.                          : hass.states['input_select.light_bathroom_mode'].state === 'Dark' ? 'var(--light-dark)'
  810.                          : hass.states['input_select.light_bathroom_mode'].state === 'Night' ? 'var(--light-soft)'
  811.                          : 'var(--primary-button-colour)'} !important;
  812.                         }
  813.  
  814.                         ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_bathroom'].state <= 15 ? 'mdi:thermometer-chevron-down'
  815.                           : hass.states['sensor.temp_bathroom'].state <= 25 ? 'mdi:thermometer'
  816.                           : 'mdi:thermometer-chevron-up')}
  817.                          
  818.             - type: horizontal-stack # 3rd Row Lights
  819.               cards:
  820.  
  821.                 - type: custom:bubble-card # Toilet Light
  822.                   card_type: button
  823.                   button_type: slider
  824.                   scrolling_effect: false
  825.                   show_last_changed: true
  826.                   show_attribute: false
  827.                   show_state: false
  828.                   show_name: false
  829.                   columns: 1
  830.                   card_layout: large-2-rows
  831.                   entity: light.toilet
  832.                   tap_action:
  833.                     action: toggle
  834.                   double_tap_action:
  835.                     action: more-info
  836.                   sub_button:
  837.                     - name: Mode
  838.                       entity: input_select.light_toilet_mode
  839.  
  840.                       show_icon: true
  841.                       icon:
  842.                       show_background: false
  843.                       show_state: true
  844.                       icon: mdi:lightbulb-group-outline
  845.  
  846.                     - name: Temp
  847.                       entity: sensor.temp_toilet
  848.                       show_icon: true
  849.                       show_background: false
  850.                       show_state: true
  851.                   styles: |
  852.                        .bubble-name-container {
  853.                           margin-left: 0px;
  854.                           margin-right: 0px;
  855.                           font-size: 12px !important;
  856.                             }
  857.  
  858.                         .bubble-icon-container {
  859.                           margin-left: 0px;
  860.                           margin-right: 1px;
  861.                             }
  862.  
  863.                         .bubble-sub-button {
  864.                           margin-left: 0px;
  865.                           margin-right: -25px;
  866.                           background: none !important;
  867.                           border-radius: 0;
  868.                           font-size: 8px !important;
  869.                             }
  870.                         .bubble-state {
  871.                           font-size: 8px !important;
  872.                             }
  873.  
  874.                         .bubble-sub-button-2 > ha-icon {
  875.                          color: ${hass.states['sensor.temp_toilet'].state <= 15 ? 'var(--low-colour)'
  876.                          : hass.states['sensor.temp_toilet'].state <= 25 ? 'var(--primary-button-colour)'
  877.                          : 'var(--high-colour)'} !important;
  878.                           }
  879.                         .bubble-sub-button-2 {
  880.                          color: ${hass.states['sensor.temp_toilet'].state <= 15 ? 'var(--low-colour)'
  881.                          : hass.states['sensor.temp_toilet'].state <= 25 ? 'var(--primary-button-colour)'
  882.                          : 'var(--high-colour)'} !important;
  883.                         }
  884.  
  885.                         .bubble-sub-button-1 {
  886.                          color: ${hass.states['input_select.light_toilet_mode'].state === 'Bright' ? 'var(--light-bright)'
  887.                          : hass.states['input_select.light_toilet_mode'].state === 'Soft' ? 'var(--light-soft)'  
  888.                          : hass.states['input_select.light_toilet_mode'].state === 'Dim' ? 'var(--light-dim)'
  889.                          : hass.states['input_select.light_toilet_mode'].state === 'Dark' ? 'var(--light-dark)'
  890.                          : hass.states['input_select.light_toilet_mode'].state === 'Night' ? 'var(--light-soft)'
  891.                          : 'var(--primary-button-colour)'} !important;
  892.                         }
  893.                         .bubble-sub-button-1 > ha-icon {
  894.                          color: ${hass.states['input_select.light_toilet_mode'].state === 'Bright' ? 'var(--light-bright)'
  895.                          : hass.states['input_select.light_toilet_mode'].state === 'Soft' ? 'var(--light-soft)'  
  896.                          : hass.states['input_select.light_toilet_mode'].state === 'Dim' ? 'var(--light-dim)'
  897.                          : hass.states['input_select.light_toilet_mode'].state === 'Dark' ? 'var(--light-dark)'
  898.                          : hass.states['input_select.light_toilet_mode'].state === 'Night' ? 'var(--light-soft)'
  899.                          : 'var(--primary-button-colour)'} !important;
  900.                         }
  901.  
  902.                         ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_toilet'].state <= 15 ? 'mdi:thermometer-chevron-down'
  903.                           : hass.states['sensor.temp_toilet'].state <= 25 ? 'mdi:thermometer'
  904.                           : 'mdi:thermometer-chevron-up')}
  905.                          
  906.  
  907.                 - type: custom:bubble-card # Laundry Light
  908.                   card_type: button
  909.                   button_type: slider
  910.                   scrolling_effect: false
  911.                   show_last_changed: true
  912.                   show_attribute: false
  913.                   show_state: false
  914.                   show_name: false
  915.                   columns: 1
  916.                   card_layout: large-2-rows
  917.                   entity: light.laundry
  918.                   tap_action:
  919.                     action: toggle
  920.                   double_tap_action:
  921.                     action: more-info
  922.                   sub_button:
  923.                     - name: Mode
  924.                       entity: input_select.light_laundry_mode
  925.                       show_icon: true
  926.                       icon:
  927.                       show_background: false
  928.                       show_state: true
  929.                       icon: mdi:lightbulb-group-outline
  930.  
  931.                     - name: Temp
  932.                       entity: sensor.temp_laundry
  933.                       show_icon: true
  934.                       show_background: false
  935.                       show_state: true
  936.                   styles: |
  937.                        .bubble-name-container {
  938.                           margin-left: 0px;
  939.                           margin-right: 0px;
  940.                           font-size: 12px !important;
  941.                             }
  942.  
  943.                         .bubble-icon-container {
  944.                           margin-left: 0px;
  945.                           margin-right: 1px;
  946.                             }
  947.  
  948.                         .bubble-sub-button {
  949.                           margin-left: 0px;
  950.                           margin-right: -25px;
  951.                           background: none !important;
  952.                           border-radius: 0;
  953.                           font-size: 8px !important;
  954.                             }
  955.                         .bubble-state {
  956.                           font-size: 8px !important;
  957.                             }
  958.  
  959.                         .bubble-sub-button-2 > ha-icon {
  960.                          color: ${hass.states['sensor.temp_laundry'].state <= 15 ? 'var(--low-colour)'
  961.                          : hass.states['sensor.temp_laundry'].state <= 25 ? 'var(--primary-button-colour)'
  962.                          : 'var(--high-colour)'} !important;
  963.                           }
  964.                         .bubble-sub-button-2 {
  965.                          color: ${hass.states['sensor.temp_laundry'].state <= 15 ? 'var(--low-colour)'
  966.                          : hass.states['sensor.temp_laundry'].state <= 25 ? 'var(--primary-button-colour)'
  967.                          : 'var(--high-colour)'} !important;
  968.                         }
  969.  
  970.                         .bubble-sub-button-1 {
  971.                          color: ${hass.states['input_select.light_laundry_mode'].state === 'Bright' ? 'var(--light-bright)'
  972.                          : hass.states['input_select.light_laundry_mode'].state === 'Soft' ? 'var(--light-soft)'  
  973.                          : hass.states['input_select.light_laundry_mode'].state === 'Dim' ? 'var(--light-dim)'
  974.                          : hass.states['input_select.light_laundry_mode'].state === 'Dark' ? 'var(--light-dark)'
  975.                          : hass.states['input_select.light_laundry_mode'].state === 'Night' ? 'var(--light-soft)'
  976.                          : 'var(--primary-button-colour)'} !important;
  977.                         }
  978.                         .bubble-sub-button-1 > ha-icon {
  979.                          color: ${hass.states['input_select.light_laundry_mode'].state === 'Bright' ? 'var(--light-bright)'
  980.                          : hass.states['input_select.light_laundry_mode'].state === 'Soft' ? 'var(--light-soft)'  
  981.                          : hass.states['input_select.light_laundry_mode'].state === 'Dim' ? 'var(--light-dim)'
  982.                          : hass.states['input_select.light_laundry_mode'].state === 'Dark' ? 'var(--light-dark)'
  983.                          : hass.states['input_select.light_laundry_mode'].state === 'Night' ? 'var(--light-soft)'
  984.                          : 'var(--primary-button-colour)'} !important;
  985.                         }
  986.  
  987.                         ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_laundry'].state <= 15 ? 'mdi:thermometer-chevron-down'
  988.                           : hass.states['sensor.temp_laundry'].state <= 25 ? 'mdi:thermometer'
  989.                           : 'mdi:thermometer-chevron-up')}
  990.  
  991.  
  992.       - type: vertical-stack # 2nd Page Colum
  993.         cards:
  994.         - type: vertical-stack # Group 1 - Blinds
  995.           cards:
  996.           - type: custom:bubble-card
  997.             card_type: separator
  998.             name: Blinds
  999.             icon: mdi:roller-shade
  1000.             show_state: true
  1001.  
  1002.  
  1003.           - type: horizontal-stack
  1004.             cards:
  1005.               - type: custom:bubble-card  # Lounge Blinds
  1006.                 card_type: button
  1007.                 button_type: slider
  1008.                 entity: cover.curtain_lounge
  1009.                 name: Lounge
  1010.                 show_state: false
  1011.                 show_attribute: true
  1012.                 attribute: current_position
  1013.                 card_layout: normal
  1014.                 icon_open: mdi:blinds-vertical
  1015.                 icon: mdi:blinds-vertical-closed
  1016.                 styles: |
  1017.                  .bubble-range-fill {
  1018.                     background: var(--cover-colour) !important;
  1019.                     opacity: 1 !important;
  1020.                   }
  1021.                   .bubble-icon {
  1022.                     color: var(--cover-colour) !important;
  1023.                     opacity: 1 !important;
  1024.                   }
  1025.  
  1026.               - type: custom:bubble-card  # Laundry Blinds
  1027.                 card_type: button
  1028.                 name: Laundry
  1029.                 button_type: slider
  1030.                 entity: cover.curtain_laundry
  1031.                 show_state: false
  1032.                 show_attribute: true
  1033.                 attribute: current_position
  1034.                 scrolling_effect: true
  1035.                 card_layout: normal
  1036.                 icon_open: mdi:roller-shade
  1037.                 icon: mdi:roller-shade-closed
  1038.                 styles: |
  1039.                  .bubble-range-fill {
  1040.                     background: var(--cover-colour) !important;
  1041.                     opacity: 1 !important;
  1042.                   }
  1043.                   .bubble-icon {
  1044.                     color: var(--cover-colour) !important;
  1045.                     opacity: 1 !important;
  1046.                   }
  1047.  
  1048.         - type: vertical-stack # Group 2 - Climate
  1049.           cards:
  1051.           - type: custom:bubble-card
  1052.             card_type: separator
  1053.             name: Climate
  1054.             icon: mdi:home-assistant
  1055.  
  1056.           - type: custom:bubble-card # Row 1 - Aircon
  1057.             card_type: button
  1058.             button_type: switch
  1059.             scrolling_effect: false
  1060.             show_last_changed: false
  1061.             show_attribute: true
  1062.             show_state: false
  1063.             show_name: false
  1064.             name: Aircon
  1065.             card_layout: large-2-rows
  1066.             entity: switch.aircon_change_settings
  1067.             double_tap_action:
  1068.               action: call-service
  1069.               service: switch.turn_off
  1070.               service_data:
  1071.                 entity_id: switch.aircon
  1072.             tap_action:
  1073.               action: call-service
  1074.               service: input_boolean.turn_on
  1075.               service_data:
  1076.                 entity_id: input_boolean.aircon_change_settings
  1077.             hold_action:
  1078.                action: call-service
  1079.                service: input_select.select_next
  1080.                service_data:
  1081.                 entity_id: input_select.aircon_mode
  1082.             sub_button:
  1084.               - name: Current Speed Settings
  1085.                 entity: input_select.aircon_speed
  1086.                 show_icon: true
  1087.                 icon: mdi:fan
  1088.                 show_background: false
  1089.                 show_state: true
  1090.                 show_name: false
  1091.  
  1092.  
  1093.               - name: Mode
  1094.                 entity: input_number.aircon_temp
  1095.                 show_icon: true
  1096.                 show_background: false
  1097.                 show_state: true
  1098.  
  1099.  
  1100.               - name: Fan Increase
  1101.                 entity: input_select.aircon_speed
  1102.                 show_name: false
  1103.                 show_icon: true
  1104.                 icon: mdi:fan-plus
  1105.                 show_background: false
  1106.                 show_state: false
  1107.                 tap_action:
  1108.                   action: call-service
  1109.                   service: input_select.select_next
  1110.                   service_data:
  1111.                     entity_id: input_select.aircon_speed
  1112.  
  1113.               - name: Fan Increase
  1114.                 entity: input_select.aircon_speed
  1115.                 show_name: false
  1116.                 show_icon: true
  1117.                 icon: mdi:fan-minus
  1118.                 show_background: false
  1119.                 show_state: false
  1120.                 tap_action:
  1121.                   action: call-service
  1122.                   service: input_select.select_previous
  1123.                   service_data:
  1124.                     entity_id: input_select.aircon_speed
  1125.  
  1126.               - name: Temp Increase
  1127.                 entity: input_number.aircon_temp
  1128.                 show_name: false
  1129.                 show_icon: true
  1130.                 icon: mdi:thermometer-plus
  1131.                 show_background: false
  1132.                 show_state: false
  1133.                 tap_action:
  1134.                   action: call-service
  1135.                   service: input_number.increment
  1136.                   service_data:
  1137.                     entity_id: input_number.aircon_temp
  1138.  
  1139.               - name: Temp Decrease
  1140.                 entity: input_number.aircon_temp
  1141.                 show_name: false
  1142.                 show_icon: true
  1143.                 icon: mdi:thermometer-minus
  1144.                 show_background: false
  1145.                 show_state: false
  1146.                 tap_action:
  1147.                   action: call-service
  1148.                   service: input_number.decrement
  1149.                   service_data:
  1150.                     entity_id: input_number.aircon_temp
  1151.             styles: |
  1152.              .bubble-button-background {
  1153.                 background-color: var(--primary-background-colour) !important;
  1154.               }
  1155.               ${card.querySelector('.bubble-state').innerText = hass.states['input_text.aircon_settings_last_sent_to_aircon'].state}
  1156.               .bubble-icon-container {
  1157.                 margin-left: 0px;
  1158.                 margin-right: 1px;
  1159.                   }
  1160.  
  1161.               .bubble-state {
  1162.                 font-size: 10px !important;
  1163.                 color: ${hass.states['sensor.aircon_settings_not_updated_since_change'].state == 'True' ? 'var(--primary-button-colour)'
  1164.                 : '' }  !important;
  1165.                 animation: ${hass.states['sensor.aircon_settings_not_updated_since_change'].state == 'True' ? 'blink 3s linear infinite'
  1166.                 : '' }  !important;
  1167.                   }
  1168.  
  1169.               {}
  1170.               .bubble-icon {
  1171.                 animation: ${hass.states['switch.aircon'].state == 'off' ? 'var(--primary-button-colour)'
  1172.                 : hass.states['input_select.aircon_speed'].state == '0' ? 'rotate 6s linear infinite'
  1173.                 : hass.states['input_select.aircon_speed'].state == '1' ? 'rotate 5s linear infinite'
  1174.                 : hass.states['input_select.aircon_speed'].state == '2' ? 'rotate 4s linear infinite'
  1175.                 : hass.states['input_select.aircon_speed'].state == '3' ? 'rotate 3s linear infinite'
  1176.                 : hass.states['input_select.aircon_speed'].state == '4' ? 'rotate 2s linear infinite'
  1177.                 : hass.states['input_select.aircon_speed'].state == '5' ? 'rotate 1s linear infinite'
  1178.                 : ''};
  1179.                 color: ${hass.states['switch.aircon'].state == 'off' ? ' '
  1180.                 : hass.states['input_select.aircon_mode'].state === 'Fan' ? 'var(--secondary-button-colour)'
  1181.                 : hass.states['input_select.aircon_mode'].state === 'Heat' ? 'var(--high-colour)'
  1182.                 : hass.states['input_select.aircon_mode'].state === 'Cool' ? 'var(--low-colour)'
  1183.                 : hass.states['input_select.aircon_mode'].state === 'Dry' ? 'var(--mid-colour)'
  1184.                 : 'var(--primary-button-colour)' }  !important;
  1185.                            
  1186.                 }
  1187.                      
  1188.               ${icon.setAttribute("icon", hass.states['input_select.aircon_mode'].state === 'Fan' ? 'mdi:fan'
  1189.                 : hass.states['input_select.aircon_mode'].state === 'Heat' ? 'mdi:white-balance-sunny'
  1190.                 : hass.states['input_select.aircon_mode'].state === 'Cool' ? 'mdi:snowflake'
  1191.                 : hass.states['input_select.aircon_mode'].state === 'Dry' ? 'mdi:water-percent'
  1192.                 : 'mdi:air-conditioner')}  !important;
  1193.                 }
  1194.                 {}
  1195.               @keyframes rotate {
  1196.                     0% {
  1197.                       transform: rotate(0deg);
  1198.                     }
  1199.                     100% {
  1200.                       transform: rotate(360deg);
  1201.                     }
  1202.                   }
  1203.               @keyframes blink {
  1204.                 50% {opacity: 0; }
  1205.               }
  1206.  
  1207.               .bubble-sub-button-1 > ha-icon {
  1208.                 color: ${hass.states['input_select.aircon_speed'].state === '0' ? 'var(--low-colour)'
  1209.                 : hass.states['input_select.aircon_speed'].state === '1' ? 'var(--low-colour)'
  1210.                 : hass.states['input_select.aircon_speed'].state === '2' ? 'var(--mid-colour)'
  1211.                 : hass.states['input_select.aircon_speed'].state === '3' ? 'var(--mid-colour)'
  1212.                 : hass.states['input_select.aircon_speed'].state === '4' ? 'var(--high-colour)'
  1213.                 : hass.states['input_select.aircon_speed'].state === '5' ? 'var(--high-colour)'
  1214.                 : 'var(--high-colour)'
  1215.                 }}
  1216.                {}
  1217.               ${subButtonIcon[1].setAttribute("icon", hass.states['input_number.aircon_temp'].state <= 16 ? 'mdi:thermometer-chevron-down'
  1218.                 : hass.states['input_number.aircon_temp'].state <= 20 ? 'mdi:thermometer'
  1219.                 : 'mdi:thermometer-chevron-up')}
  1220.               {}
  1221.               .bubble-sub-button-2 > ha-icon {
  1222.                color: ${hass.states['input_number.aircon_temp'].state <= 16 ? 'var(--low-colour)'
  1223.                : hass.states['input_number.aircon_temp'].state <= 20 ? 'var(--primary-button-colour)'
  1224.                : 'var(--high-colour)'} !important;
  1225.               }
  1226.  
  1227.               ${subButtonIcon[1].setAttribute("icon", hass.states['input_number.aircon_temp'].state <= 16 ? 'mdi:thermometer-chevron-down'
  1228.                 : hass.states['input_number.aircon_temp'].state <= 20 ? 'mdi:thermometer'
  1229.                 : 'mdi:thermometer-chevron-up')}
  1230.                {}
  1231.               .bubble-sub-button-3 > ha-icon {
  1232.                 color: ${'var(--primary-button-colour)' }  !important;
  1233.                 }
  1234.               .bubble-sub-button-4 > ha-icon {
  1235.                 color: ${'var(--primary-button-colour)' }  !important;
  1236.                 }
  1237.               .bubble-sub-button-5 > ha-icon {
  1238.                 color: ${'var(--primary-button-colour)' }  !important;
  1239.                 }
  1240.               .bubble-sub-button-6 > ha-icon {
  1241.                 color: ${'var(--primary-button-colour)' }  !important;
  1242.                 }
  1243.  
  1244.  
  1245.           - type: custom:stack-in-card  # Row 2 - Switches
  1246.             mode: horizontal
  1247.             style:
  1248.                 .: |
  1249.                  ha-card {
  1250.                     border-radius: 35px;
  1251.                     overflow: hidden;
  1252.                     margin: 0 auto;
  1253.                     padding-top: 0px;
  1254.                   }
  1255.             cards:
  1256.  
  1257.               - type: 'custom:button-card' # Bedtime Mode
  1258.                 template: quick_switch_toggle_bedtime
  1259.                 entity: switch.bedtime
  1260.                 name: Bedtime
  1261.  
  1262.               - type: 'custom:button-card' # Bedroom Fan
  1263.                 template: quick_switch_toggle_fan
  1264.                 entity: switch.bedroom_fan
  1265.                 name: Bd. Fan
  1266.              
  1267.  
  1268.               - type: 'custom:button-card'  # Dehumidfier
  1269.                 template: quick_switch_toggle_dehumidifier
  1270.                 entity: fan.dehumidifier
  1271.                 name: d.Hum
  1272.  
  1273.               - type: 'custom:button-card' # Aircon Switch
  1274.                 template: quick_switch_toggle_aircon
  1275.                 entity: switch.aircon
  1276.                 name: Aircon
  1277.                
  1278.  
  1279.               - type: 'custom:button-card'  # Electric Blanket
  1280.                 template: quick_switch_toggle_blanket
  1281.                 entity: switch.blanket
  1282.                 name: Blanket
  1283.  
  1284.  
  1285.  
  1286.           - type: custom:bubble-card  # Row 3 - Weather
  1287.             card_type: button
  1288.             button_type: state
  1289.             entity: sensor.launceston_extended_text_0
  1290.             name: Weather
  1291.             scrolling_effect: true
  1292.             show_state: true
  1293.             card_layout: large-2-rows
  1294.             columns: 1
  1295.            
  1296.  
  1297.             styles: >-
  1298.               .bubble-icon {
  1299.                 color: var(--primary-button-colour) !important;
  1300.               }
  1301.               .bubble-state {
  1302.                 font-size: 9px !important;
  1303.                   }
  1304.               .bubble-sub-button {
  1305.                 background: none !important;
  1306.                 font-size: 10px !important;
  1307.                 align-content: right;
  1308.                   }
  1309.               ${icon.setAttribute("icon", getWeatherIcon(hass.states['weather.launceston'].state))}
  1310.               ${card.querySelector('.bubble-name').innerText = "Outside: " + hass.states['sensor.launceston_min_to_max'].state}
  1311.              
  1312.        - type: vertical-stack # Group 3 - Work
  1313.          cards:    
  1314.  
  1315.          - type: custom:bubble-card
  1316.            card_type: separator
  1317.            name: Work
  1318.            icon: mdi:home-assistant
  1319.        
  1320.          - type: 'custom:button-card'  # Row 4 - Work
  1321.            template: work_details
  1322.            entity: sensor.work_message
  1323.            style:
  1324.                  .: |
  1325.                    ha-card {
  1326.                      border-radius: 35px;
  1327.                      overflow: hidden;
  1328.                      margin: 0 auto;
  1329.                      padding-top: 0px;
  1330.                    }
  1331.  
  1332.  
  1333.  
  1334.  
  1335. #### ui-lovelace file for Button Card Templates
  1336.  
  1337. button_card_templates:
  1338.  haptic:
  1339.    # triggers_update: all
  1340.    tap_action:
  1341.      haptic: light
  1342.      action: more-info
  1343.    hold_action:
  1344.      haptic: success
  1345.      action: more-info
  1346.    double_tap_action:
  1347.      haptic: success
  1348.      action: more-info
  1349.    state:
  1350.      - value: Unknown
  1351.        icon: 'mdi:help'
  1352.        color: black
  1353.    styles:
  1354.      card:
  1355.        # - border-radius: 40%
  1356.        - --mdc-ripple-color: var(--secondary-button-colour)
  1357.        - --mdc-ripple-press-opacity: 0.5
  1358.    style: |
  1359.        ha-card {
  1360.          box-shadow: none;
  1361.          ha-card-border-radius: 50px
  1362.          overflow: hidden;
  1363.        }
  1364.  
  1365.  1_state_small:
  1366.    template: haptic
  1367.    show_name: true
  1368.    show_state: false
  1369.    show_icon: true
  1370.    show_label: false
  1371.    show_last_changed: true
  1372.    styles:
  1373.      card:
  1374.        - font-weight: bold
  1375.        - font-size: 13px
  1376.        - color: var(primary-text-color)
  1377.        - align-self: start
  1378.        - justify-self: start
  1379.        - padding-bottom: 4px
  1380.        - text-shadow: 0px 0px 5px black
  1381.        - text-transform: capitalize
  1382.        - color: auto
  1383.      name:
  1384.        - font-size: 13px
  1385.        - color: var(primary-text-color)
  1386.        - align-self: middle
  1387.        - justify-self: middle
  1388.      label:
  1389.        - font-size: 8px
  1390.        - color: var(primary-text-color)
  1391.        - align-self: middle
  1392.        - justify-self: middle
  1393.      state:
  1394.        - font-size: 13px
  1395.        - color: var(primary-text-color)
  1396.        - align-self: middle
  1397.        - justify-self: middle
  1398.  
  1399.  1_lock:
  1400.    template: 1_state_small
  1401.    entity: lock.front_door
  1402.    tap_action:
  1403.      action: call-service
  1404.      service: script.turn_on
  1405.      service_data:
  1406.        entity_id: script.lock_toggle
  1407.    hold_action:
  1408.      action: more-info
  1409.    double_tap_action:
  1410.      action: call-service
  1411.      service: lock.unlock
  1412.      service_data:
  1413.        entity_id: lock.front_door
  1414.    state:
  1415.      - color: var(--primary-button-colour)
  1416.        icon: mdi:door-closed-lock
  1417.        value: 'on'
  1418.      - color: var(--secondary-button-colour)
  1419.        icon: mdi:door-open
  1420.        value: 'off'
  1421.  
  1422.  1_alarm:
  1423.    template: 1_state_small
  1424.    show_state: true
  1425.    tap_action:
  1426.      action: call-service
  1427.      service: switch.toggle
  1428.      service_data:
  1429.        entity_id: switch.security_home
  1430.    hold_action:
  1431.      action: call-service
  1432.      service: alarm_control_panel.alarm_disarm
  1433.      service_data:
  1434.        entity_id: alarm_control_panel.security
  1435.    double_tap_action:
  1436.      action: more-info
  1437.    state:
  1438.      - color: var(--low-colour)
  1439.        icon: 'mdi:shield-off'
  1440.        operator: template
  1441.        value: >
  1442.          [[[
  1443.            var kitdis = states['input_boolean.security_disarmed_occupied_kitchen'].state;
  1444.            var security = states['alarm_control_panel.security'].state;
  1445.            return (security === 'disarmed' && kitdis === 'on');
  1446.          ]]]
  1447.        label: 'Disarmed'
  1448.      - color: var(--high-colour)
  1449.        icon: 'mdi:shield-off'
  1450.        operator: template
  1451.        value: >
  1452.          [[[
  1453.            var delayarm = states['input_boolean.security_home_delayed_by_screen_door'].state;
  1454.            var security = states['alarm_control_panel.security'].state;
  1455.            return (security === 'disarmed' && delayarm === 'on');
  1456.          ]]]      
  1457.        label: >
  1458.          [[[
  1459.            return states['sensor.security_delay_arm_end'].state;
  1460.          ]]]    
  1461.        styles:
  1462.          icon:
  1463.            - animation: >
  1464.                 [[[
  1465.                    var rem = states['sensor.security_delay_arm_end_seconds'].state;
  1466.                    if (rem > 300) return 'blink 10s ease infinite';
  1467.                    if (rem > 180) return 'blink 5s ease infinite';
  1468.                    if (rem > 120) return 'blink 3s ease infinite';
  1469.                    if (rem > 60) return 'blink 2s ease infinite';
  1470.                    return 'blink 1s ease infinite';
  1471.                 ]]]        
  1472.      - color: var(--primary-button-colour)
  1473.        icon: 'mdi:shield-off'
  1474.        value: disarmed
  1475.        label: 'Disarmed'
  1476.      - color: var(--primary-button-colour)
  1477.        icon: 'mdi:shield-home'
  1478.        value: armed_home
  1479.        label: Home
  1480.      - color: var(--primary-button-colour)
  1481.        icon: 'mdi:shield-lock'
  1482.        value: armed_night
  1483.        label: Night
  1484.      - color: var(--primary-button-colour)
  1485.        icon: 'mdi:shield-key'
  1486.        value: armed_away
  1487.        label: Away
  1488.      - color: var(--secondary-button-colour)
  1489.        icon: 'mdi:bell-alert'
  1490.        styles:
  1491.          card:
  1492.            - animation: blink 3s ease infinite
  1493.        value: triggered
  1494.        label: Alarm!!
  1495.      - color: var(--primary-button-colour)
  1496.        icon: 'mdi:bell-alert'
  1497.        value: pending
  1498.        label: Pendings
  1499.  
  1500.  1_garage_door:
  1501.    template: 1_state_small
  1502.    show_last_changed: true
  1503.    state:
  1504.      - color: var(--secondary-button-colour)
  1505.        icon: 'mdi:garage-open-variant'
  1506.        value: 'open'
  1507.      - color: var(--secondary-button-colour)
  1508.        icon: 'mdi:garage-open-variant'
  1509.        value: 'opening'
  1510.      - color: var(--secondary-button-colour)
  1511.        icon: 'mdi:garage-open-variant'
  1512.        value: 'closing'
  1513.      - color: var(--primary-button-colour)
  1514.        icon: 'mdi:garage-variant'
  1515.        value: 'closed'
  1516.  
  1517.  
  1518.  quick_switch_toggle:
  1519.    template: haptic
  1520.    tap_action:
  1521.      action: toggle
  1522.    hold_action:
  1523.      action: more-info
  1524.    show_label: true
  1525.    show_last_changed: true
  1526.    styles:
  1527.      card:
  1528.        - font-weight: bold
  1529.        - font-size: 13px
  1530.        - color: var(primary-text-color)
  1531.        - align-self: start
  1532.        - justify-self: start
  1533.        - padding-bottom: 4px
  1534.        - text-shadow: 0px 0px 5px black
  1535.        - text-transform: capitalize
  1536.        - color: auto
  1537.      name:
  1538.        - font-weight: bold
  1539.        - font-size: 13px
  1540.        - color: var(primary-text-color)
  1541.        - align-self: middle
  1542.        - justify-self: middle
  1543.        - padding-bottom: 4px
  1544.      label:
  1545.        - font-size: 8px
  1546.        - color: var(primary-text-color)
  1547.        - align-self: middle
  1548.        - justify-self: middle
  1549.  
  1550.  quick_switch_toggle_bedtime:
  1551.    template: quick_switch_toggle
  1552.    state:
  1553.      - color: var(--secondary-button-colour)
  1554.        icon: 'mdi:sleep'
  1555.        value: 'on'
  1556.      - color: var(--primary-button-colour)
  1557.        icon: 'mdi:sleep-off'
  1558.        value: 'off'
  1559.  
  1560.  quick_switch_toggle_fan:  
  1561.    template: quick_switch_toggle
  1562.    name: Fan
  1563.    state:
  1564.      - color: var(--secondary-button-colour)
  1565.        icon: 'mdi:fan'
  1566.        value: 'on'
  1567.      - color: var(--primary-button-colour)
  1568.        icon: 'mdi:fan-off'
  1569.        value: 'off'
  1570.  
  1571.  quick_switch_toggle_dehumidifier:  
  1572.    template: quick_switch_toggle
  1573.    state:
  1574.      - color: var(--secondary-button-colour)
  1575.        icon: 'mdi:air-humidifier'
  1576.        value: 'on'
  1577.      - color: var(--primary-button-colour)
  1578.        icon: 'mdi:air-humidifier-off'
  1579.        value: 'off'
  1580.  
  1581.  quick_switch_toggle_bedtime:
  1582.    template: quick_switch_toggle
  1583.    state:
  1584.      - color: var(--secondary-button-colour)
  1585.        icon: 'mdi:sleep'
  1586.        value: 'on'
  1587.      - color: var(--primary-button-colour)
  1588.        icon: 'mdi:sleep-off'
  1589.        value: 'off'
  1590.  
  1591.  quick_switch_toggle_blanket:  
  1592.    template: quick_switch_toggle
  1593.    tap_action:
  1594.      action: toggle
  1595.    double_tap_action:
  1596.      action: call-service
  1597.      service: script.turn_on
  1598.      service_data:
  1599.        entity_id: script.blanket_10_minutes
  1600.    state:
  1601.      - color: var(--primary-button-colour)
  1602.        icon: 'mdi:heating-coil'
  1603.        value: 'off'
  1604.          
  1605.      - color: var(--high-colour)
  1606.        icon: 'mdi:heating-coil'
  1607.        value: 'on'
  1608.  
  1609.  quick_switch_toggle_aircon:  
  1610.    template: quick_switch_toggle
  1611.    double_tap_action:
  1612.      action: call-service
  1613.      service: input_select.select_next
  1614.      service_data:
  1615.        entity_id: input_select.aircon_mode
  1616.    state:
  1617.      - color: var(--primary-button-colour)
  1618.        icon: 'mdi:fan'
  1619.        operator: template
  1620.        value: >
  1621.          [[[
  1622.            var ac = states['switch.aircon'].state;
  1623.            return (ac === 'off' && /F/.test(states['input_select.aircon_mode'].state));
  1624.          ]]]
  1625.          
  1626.      - color: var(--secondary-button-colour)
  1627.        icon: 'mdi:fan'
  1628.        operator: template
  1629.        value: >
  1630.          [[[
  1631.            var ac = states['switch.aircon'].state;
  1632.            return (ac === 'on' &&  /F/.test(states['input_select.aircon_mode'].state));
  1633.          ]]]
  1634.      - color: var(--primary-button-colour)
  1635.        icon: 'mdi:snowflake'
  1636.        operator: template
  1637.        value: >
  1638.          [[[
  1639.            var ac = states['switch.aircon'].state;
  1640.            return (ac === 'off' && /C/.test(states['input_select.aircon_mode'].state));
  1641.          ]]]
  1642.      - color: var(--secondary-button-colour)
  1643.        icon: 'mdi:snowflake'
  1644.        operator: template
  1645.        value: >
  1646.          [[[
  1647.            var ac = states['switch.aircon'].state;
  1648.            return (ac === 'on' && /C/.test(states['input_select.aircon_mode'].state));
  1649.          ]]]
  1650.      - color: var(--primary-button-colour)
  1651.        icon: 'mdi:white-balance-sunny'
  1652.        operator: template
  1653.        value: >
  1654.          [[[
  1655.            var ac = states['switch.aircon'].state;
  1656.            return (ac === 'off' && /H/.test(states['input_select.aircon_mode'].state));
  1657.          ]]]
  1658.      - color: var(--secondary-button-colour)
  1659.        icon: 'mdi:white-balance-sunny'
  1660.        operator: template
  1661.        value: >
  1662.          [[[
  1663.            var ac = states['switch.aircon'].state;
  1664.            return (ac === 'on' && /H/.test(states['input_select.aircon_mode'].state));
  1665.          ]]]
  1666.  
  1667.  work_details:
  1668.    template: haptic
  1669.    show_icon: false
  1670.    show_state: true
  1671.    show_label: true
  1672.    show_name: false
  1673.    icon: 'mdi:store'
  1674.    styles:
  1675.      grid:
  1676.        - grid-template-areas: '"s" "l"'
  1677.        - grid-template-columns: 1fr
  1678.        - grid-template-rows: 1fr min-content
  1679.    tap_action:
  1680.      action: call-service
  1681.      service: input_boolean.toggle
  1682.      service_data:
  1683.        entity_id: input_boolean.work_annual_leave
  1684.    label: >
  1685.      [[[
  1686.        return states['sensor.work_lovelace_script'].state ;
  1687.      ]]]
  1688.    state:
  1689.      - operator: template
  1690.        value: >
  1691.          [[[
  1692.            return states['sensor.work_today_state'].state === 'At Work';
  1693.          ]]]
  1694.        color: var(--low-colour)
  1695.        icon: 'mdi:store'
  1696.      - operator: template
  1697.        value: >
  1698.          [[[
  1699.           return states['sensor.work_today_state'].state === 'On Leave';
  1700.          ]]]
  1701.        color: var(--secondary-button-colour)  
  1702.        icon: 'mdi:home-floor-l'
  1703.      - value: >
  1704.          [[[
  1705.           return states['sensor.work_today_state'].state === 'No Work Today';
  1706.          ]]]
  1707.        icon: 'mdi:store'
  1708.        color: var(--secondary-button-colour)
  1709.      - value: >
  1710.          [[[
  1711.           return states['sensor.work_today_state'].state === 'Working Today';
  1712.          ]]]
  1713.        icon: 'mdi:store'
  1714.        color: var(--primary-button-colour)
  1715.  
  1716.  
  1717. ### Light Button with 6 Sub buttons
  1718.  
  1719.  
  1720.            - type: custom:bubble-card
  1721.              card_type: button
  1722.              button_type: slider
  1723.              scrolling_effect: false
  1724.              show_last_changed: true
  1725.              show_attribute: true
  1726.              show_state: false
  1727.              show_name: false
  1728.              card_layout: large-2-rows
  1729.              entity: light.lounge
  1730.              tap_action:
  1731.                action: toggle
  1732.              double_tap_action:
  1733.                action: more-info
  1734.              hold_action:
  1735.                action: call-service
  1736.                data:
  1737.                  entity_id: input_select.light_lounge_mode
  1738.                  service: input_select.select_next
  1739.              sub_button:
  1740.  
  1741.                - name: Motion
  1742.                  entity: binary_sensor.ms_lounge
  1743.                  show_icon: true
  1744.                  show_background: false
  1745.                  show_state: true
  1746.  
  1747.                - name: Motion
  1748.                  entity: sensor.temp_lounge
  1749.                  show_icon: true
  1750.                  show_background: false
  1751.                  show_state: true
  1752.  
  1753.                - name: Mode
  1754.                  entity: input_select.light_lounge_mode
  1755.                  show_icon: true
  1756.                  icon: mdi:lightbulb-group-outline
  1757.                  show_background: false
  1758.                  show_state: true
  1759.  
  1760.                - name: Auto Mode
  1761.                  entity: switch.light_lounge_auto_default_mode
  1762.                  show_name: false
  1763.                  show_icon: true
  1764.                  show_background: false
  1765.                  show_state: true
  1766.  
  1767.  
  1768.                - name: Auto On
  1769.                  entity: automation.light_lounge_auto_on
  1770.                  show_name: false
  1771.                  show_icon: true
  1772.                  show_background: false
  1773.                  show_state: true
  1774.  
  1775.                - name: Auto Off
  1776.                  entity: automation.light_lounge_auto_off
  1777.                  show_name: false
  1778.                  show_icon: true
  1779.                  show_background: false
  1780.                  show_state: true
  1781.              styles: |
  1782.  
  1783.                ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.ms_lounge'].state === 'on' ? 'mdi:run-fast' : 'mdi:walk')}
  1784.                
  1785.                ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.temp_lounge'].state <= 15 ? 'mdi:thermometer-chevron-down'
  1786.                  : hass.states['sensor.temp_lounge'].state <= 25 ? 'mdi:thermometer'
  1787.                  : 'mdi:thermometer-chevron-up')}
  1788.                  
  1789.                ${subButtonIcon[3].setAttribute("icon", hass.states['switch.light_lounge_auto_default_mode'].state === 'off' ? 'mdi:transition-masked' : 'mdi:transition')}
  1790.                ${subButtonIcon[4].setAttribute("icon", hass.states['automation.light_lounge_auto_on'].state === 'off' ? 'mdi:motion-sensor-off' : 'mdi:motion-sensor')}
  1791.                ${subButtonIcon[5].setAttribute("icon", hass.states['automation.light_lounge_auto_off'].state === 'off' ? 'mdi:light-switch-off' : 'mdi:light-switch')}
  1792.  
  1793.                .bubble-icon-container {
  1794.                  margin-left: 0px;
  1795.                  margin-right: 1px;
  1796.                    }
  1797.  
  1798.                .bubble-state {
  1799.                  font-size: 10px !important
  1800.                    }
  1801.  
  1802.  
  1803.                .bubble-sub-button-1 {
  1804.                  color: ${hass.states['binary_sensor.ms_lounge'].state === 'on' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
  1805.                  }
  1806.                .bubble-sub-button-1 > ha-icon {
  1807.                  color: ${hass.states['binary_sensor.ms_lounge'].state === 'on' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
  1808.                  }
  1809.              
  1810.  
  1811.                .bubble-sub-button-2 {
  1812.                 color: ${hass.states['sensor.temp_lounge'].state <= 15 ? 'var(--low-colour)'
  1813.                 : hass.states['sensor.temp_lounge'].state <= 25 ? 'var(--primary-button-colour)'
  1814.                 : 'var(--high-colour)'} !important;
  1815.                }
  1816.                .bubble-sub-button-2 > ha-icon {
  1817.                 color: ${hass.states['sensor.temp_lounge'].state <= 15 ? 'var(--low-colour)'
  1818.                 : hass.states['sensor.temp_lounge'].state <= 25 ? 'var(--primary-button-colour)'
  1819.                 : 'var(--high-colour)'} !important;
  1820.                }
  1821.  
  1822.  
  1823.                .bubble-sub-button-3 {
  1824.                 color: ${hass.states['input_select.light_lounge_mode'].state === 'Bright' ? 'var(--light-bright)'
  1825.                 : hass.states['input_select.light_lounge_mode'].state === 'Soft' ? 'var(--light-soft)'  
  1826.                 : hass.states['input_select.light_lounge_mode'].state === 'Dim' ? 'var(--light-dim)'
  1827.                 : hass.states['input_select.light_lounge_mode'].state === 'Dark' ? 'var(--light-dark)'
  1828.                 : hass.states['input_select.light_lounge_mode'].state === 'Night' ? 'var(--light-soft)'
  1829.                 : 'var(--primary-button-colour)'} !important;
  1830.                }
  1831.                .bubble-sub-button-3 > ha-icon {
  1832.                 color: ${hass.states['input_select.light_lounge_mode'].state === 'Bright' ? 'var(--light-bright)'
  1833.                 : hass.states['input_select.light_lounge_mode'].state === 'Soft' ? 'var(--light-soft)'  
  1834.                 : hass.states['input_select.light_lounge_mode'].state === 'Dim' ? 'var(--light-dim)'
  1835.                 : hass.states['input_select.light_lounge_mode'].state === 'Dark' ? 'var(--light-dark)'
  1836.                 : hass.states['input_select.light_lounge_mode'].state === 'Night' ? 'var(--light-soft)'
  1837.                 : 'var(--primary-button-colour)'} !important;
  1838.                }
  1839.  
  1840.  
  1841.                .bubble-sub-button-4 {
  1842.                  color: ${hass.states['switch.light_lounge_auto_default_mode'].state === 'off' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
  1843.                }
  1844.                .bubble-sub-button-4 > ha-icon {
  1845.                  color: ${hass.states['switch.light_lounge_auto_default_mode'].state === 'off' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
  1846.                }
  1847.  
  1848.                .bubble-sub-button-5  {
  1849.                  color: ${hass.states['automation.light_lounge_auto_on'].state === 'off' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
  1850.                }
  1851.                .bubble-sub-button-5 > ha-icon {
  1852.                  color: ${hass.states['automation.light_lounge_auto_on'].state === 'off' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
  1853.                }
  1854.  
  1855.  
  1856.                .bubble-sub-button-6 {
  1857.                  color: ${hass.states['automation.light_lounge_auto_off'].state === 'off' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
  1858.                }
  1859.                .bubble-sub-button-6 > ha-icon {
  1860.                  color: ${hass.states['automation.light_lounge_auto_off'].state === 'off' ? 'var(--secondary-button-colour)' : 'var(--primary-button-colour)'} !important;
  1861.                }
  1862.  
  1863.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!