From 73007838d639048af8755bcf616639ae03d94abc Mon Sep 17 00:00:00 2001
From: Tony Stork <tm24fan8@gmail.com>
Date: Tue, 6 Aug 2024 15:51:40 -0400
Subject: [PATCH] Add lightning and rain notifications to top of mobile
 dashboard

#1
---
 mobile_dashboard.yaml | 76 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/mobile_dashboard.yaml b/mobile_dashboard.yaml
index 27e0f1a..73d29bf 100644
--- a/mobile_dashboard.yaml
+++ b/mobile_dashboard.yaml
@@ -316,6 +316,82 @@ views:
               - condition: state
                 entity: sensor.weatheralerts_alerts_are_active
                 state: 'Yes'
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            entity: binary_sensor.lightning_warning
+            name: Lightning is in the area!
+            show_state: false
+            double_tap_action:
+              action: more-info
+            hold_action:
+              action: more-info
+            card_layout: large
+            styles: |
+              .is-unavailable {
+                opacity: 0.5 !important;
+              }
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${state === 'on' ? 'var(--warning-color)' : 'var(--background-color-2)'} !important;
+                transition: background-color 1s !important;
+              }
+              .bubble-icon-container {
+                background: ${state === 'on' ? 'var(--warning-color)' : 'var(--card-background-color)'} !important;
+              }
+              .bubble-icon-container::after {
+                opacity: ${state === 'on' ? 0.3 : 0} !important;
+                transition: all 1s !important;
+              }
+              .bubble-icon {
+                display: flex !important;
+                opacity: 0.5 !important;
+              }
+              .is-on .bubble-icon {
+                opacity: 1 !important;
+              }
+            visibility:
+              - condition: state
+                entity: binary_sensor.lightning_warning
+                state: 'on'
+          - type: custom:bubble-card
+            card_type: button
+            button_type: state
+            entity: binary_sensor.raining
+            name: It is currently raining
+            show_state: false
+            double_tap_action:
+              action: more-info
+            hold_action:
+              action: more-info
+            card_layout: large
+            styles: |
+              .is-unavailable {
+                opacity: 0.5 !important;
+              }
+              .bubble-button-background {
+                opacity: 1 !important;
+                background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--background-color-2)'} !important;
+                transition: background-color 1s !important;
+              }
+              .bubble-icon-container {
+                background: ${state === 'on' ? 'var(--accent-color)' : 'var(--card-background-color)'} !important;
+              }
+              .bubble-icon-container::after {
+                opacity: ${state === 'on' ? 0.3 : 0} !important;
+                transition: all 1s !important;
+              }
+              .bubble-icon {
+                display: flex !important;
+                opacity: 0.5 !important;
+              }
+              .is-on .bubble-icon {
+                opacity: 1 !important;
+              }
+            visibility:
+              - condition: state
+                entity: binary_sensor.raining
+                state: 'on'
           - type: custom:clock-weather-card
             entity: weather.iron_nerd_weather_station
             sun_entity: sun.sun