1. type: custom:stack-in-card
2. cards:
3.   - type: custom:layout-card
4.     layout_type: grid
5.     layout:
6.       width: 100%
7.       grid-template-columns: 100%
8.       grid-template-rows: auto
9.     cards:
10.       - type: custom:mushroom-template-card
11.         primary: SYSTEM -  {{(states('sensor.rpi_uptime'))}}
12.         secondary: Home Assistant - {{(states('sensor.ha_uptime'))}}
13.         icon: mdi:home-assistant
14.         icon_color: blue
15.         layout: horizontal
16.         tap_action:
17.           action: navigate
18.           navigation_path: /lovelace-mushroom/paths
19.         badge_color: blue
20.         badge_icon: |
21.           {% if is_state('sensor.updates_available', '1') %}
22.             mdi:numeric-1-circle
23.           {% elif is_state('sensor.updates_available', '2') %}
24.             mdi:numeric-2-circle
25.           {% elif is_state('sensor.updates_available', '3') %}
26.             mdi:numeric-3-circle
27.           {% elif is_state('sensor.updates_available', '4') %}
28.             mdi:numeric-4-circle
29.           {% elif is_state('sensor.updates_available', '5') %}
30.             mdi:numeric-5-circle
31.           {% elif is_state('sensor.updates_available', '6') %}
32.             mdi:numeric-6-circle
33.           {% elif is_state('sensor.updates_available', '7') %}
34.             mdi:numeric-7-circle
35.           {% elif is_state('sensor.updates_available', '8') %}
36.             mdi:numeric-8-circle
37.           {% elif is_state('sensor.updates_available', '9') %}
38.             mdi:numeric-9-circle
39.           {% endif %}
40.         hold_action:
41.           action: fire-dom-event
42.           browser_mod:
43.             service: browser_mod.popup
44.             data:
45.               title: Dostępne aktualizacje
46.               content:
47.                 type: custom:auto-entities
48.                 filter:
49.                   include:
50.                     - domain: update
51.                       state: 'on'
52.                 card:
53.                   type: entities
54.                   show_header_toggle: false
55.         card_mod:
56.           style:
57.             mushroom-shape-icon$: ''
58.             .: |
59.               ha-state-icon {
60.                 {% if not is_state('sensor.updates_available', '0') %}
61.                 animation: surprise 3s ease infinite;
62.                 {% endif %}                      
63.               }
64.               @keyframes surprise {
65.                 0%, 20%, 100% { transform: translateY(0); }
66.                 2.5% { transform: translateY(-6px) rotate(-14deg); }
67.                 5% { transform: translateY(-6px) rotate(11deg); }
68.                 7.5% { transform: translateY(-6px) rotate(-8deg); }
69.                 10% { transform: translateY(-6px) rotate(5deg); }
70.                 12.5% { transform: translateY(0); }
71.                 15% { transform: translateY(-3px) }
72.               }
73.               .shape {
74.                 {% if not is_state('sensor.updates_available', '0') %}
75.                 --shape-animation: ping 2s infinite;
76.                 {% endif %}
77.               }
78.               @keyframes ping {
79.                 0% {
80.                   box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7);
81.                 }
82.                
83.                 100% {
84.                   box-shadow: 0 0 5px 15px transparent;
85.                 }
86.               }
87.               ha-card {
88.                 {% if not is_state('sensor.updates_available', '0') %}
89.                 box-shadow: 0px 0px 8px 4px rgba(var(--rgb-blue), 0.8) !important;
90.                 {% else %}
91.                 box-shadow: var(--ha-card-box-shadow) !important;
92.                 {% endif %}
93.                 --badge-size: 22px;
94.                 background: var(--card-background-color) !important;
95.                 margin-left: 5px;
96.                 margin-right: 5px;
97.                 border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
98.               }
99.               /* Add subtle color on hover */
100.               :host {
101.                 --mush-icon-size: 60px;        
102.                 --mush-card-primary-font-size: 13px;
103.                 --mush-card-secondary-font-size: 11px;
104.               }
105.               ha-card:hover {
106.                 background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
107.               }
108.     card_mod:
109.       style: |
110.         ha-card {
111.           border: none;
112.           box-shadow: none;
113.           }