API tools faq
paste
MambaWamba

Home Assistant Dashboard 2

MambaWamba
Dec 31st, 2025
26
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 127.08 KB | Software | 0 0
raw download clone embed print report
  1. # ============================================================
  2. # CARD TYPES USED IN THIS DASHBOARD:
  3. #
  4. # - custom:bubble-card
  5. # - custom:mini-graph-card
  6. # - custom:clock-weather-card
  7. # - custom:hourly-weather
  8. # - custom:purifier-card
  9. # - custom:navbar-card
  10. # LAYOUT TYPES USED:
  11. # - sections
  12. # - grid
  13. # - vertical-stack
  14. #
  15. # NOTE:
  16. # Some entity IDs, domains, IP addresses, and account identifiers
  17. # have been replaced with generic placeholders for public sharing.
  18. # ============================================================
  19.  
  20. type: sections
  21. max_columns: 6
  22. title: Home Lab
  23. sections:
  24.   - type: grid
  25.     cards:
  26.       - type: custom:bubble-card
  27.         card_type: separator
  28.         name: Home
  29.         icon: mdi:home-roof
  30.         sub_button: []
  31.         card_layout: large-2-rows
  32.         modules: []
  33.         rows: "1"
  34.         styles: |
  35.          .bubble-line {
  36.             background: white;
  37.             opacity: 0.1;
  38.           }
  39.       - type: vertical-stack
  40.         cards:
  41.           - type: custom:mini-graph-card
  42.             name: Living Room
  43.             icon: mdi:gamepad-square
  44.             align_icon: left
  45.             entities:
  46.               - entity: sensor.rm_4_mini_2_temperature
  47.                 name: Temperature
  48.                 show_line: true
  49.                 show_points: true
  50.                 show_state: true
  51.             font_size_header: 10
  52.             show:
  53.               labels: true
  54.               labels_secondary: true
  55.               name: true
  56.               icon: true
  57.               legend: false
  58.               average: false
  59.               extrema: true
  60.             upper_bound: 30
  61.             lower_bound: 22
  62.             line_width: 2
  63.             hours_to_show: 12
  64.             points_per_hour: 20
  65.             update_interval: 6
  66.             refresh_interval: 6
  67.             height: 240
  68.             layout_options:
  69.               grid_columns: 2
  70.               grid_rows: auto
  71.             color_thresholds:
  72.               - value: 29
  73.                 color: "#FF0000"
  74.               - value: 28
  75.                 color: "#0DDE34"
  76.               - value: 25
  77.                 color: "#8AD0F8"
  78.               - value: 23
  79.                 color: white
  80.             card_mod:
  81.               style: |
  82.                ha-card {
  83.                   background: rgba(255, 255, 255, 0.1);
  84.                   border-radius: 8px 8px 0 0 ;
  85.                   #backdrop-filter: blur(20px) saturate(150%);
  86.                   #-webkit-backdrop-filter: blur(20px) saturate(150%);
  87.                   border: none;
  88.                   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  89.                   position: relative;
  90.                   overflow: hidden;
  91.                 }
  92.  
  93.                 ha-card::before {
  94.                   content: '';
  95.                   position: absolute;
  96.                   top: -50%;
  97.                   left: -50%;
  98.                   width: 200%;
  99.                   height: 200%;
  100.                   pointer-events: none;
  101.                 }
  102.                 .states.flex .state .state__value.ellipsis {
  103.                   font-size: 2.1em;
  104.                 }
  105.                 ha-icon {
  106.                   color: white;
  107.                 }
  108.           - type: custom:mini-graph-card
  109.             name: Indoor Conditions
  110.             icon: mdi:weather-cloudy
  111.             align_icon: left
  112.             entities:
  113.               - entity: sensor.rm_4_mini_2_humidity
  114.                 name: Humidity
  115.                 show_line: true
  116.                 show_points: true
  117.                 show_state: true
  118.             font_size_header: 10
  119.             show:
  120.               labels: true
  121.               labels_secondary: true
  122.               name: false
  123.               icon: false
  124.               legend: false
  125.               average: false
  126.               extrema: false
  127.             line_width: 2
  128.             upper_bound: 90
  129.             lower_bound: 40
  130.             hours_to_show: 12
  131.             points_per_hour: 20
  132.             update_interval: 6
  133.             refresh_interval: 6
  134.             height: 200
  135.             layout_options:
  136.               grid_columns: 2
  137.               grid_rows: auto
  138.             color_thresholds:
  139.               - value: 70
  140.                 color: "#FF0096"
  141.               - value: 65
  142.                 color: "#C39BF5"
  143.               - value: 55
  144.                 color: "#9E6FFF"
  145.               - value: 45
  146.                 color: "#BF9FFF"
  147.             card_mod:
  148.               style: |
  149.                ha-card {
  150.                   margin-top: -5%;
  151.                   #border-top: none;
  152.                   background: rgba(255, 255, 255, 0.1);
  153.                   border-radius: 8px;
  154.                   border-radius: 0 0 8px 8px;
  155.                   #backdrop-filter: blur(20px) saturate(150%);
  156.                   #-webkit-backdrop-filter: blur(20px) saturate(150%);
  157.                   border: none;
  158.                   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  159.                   position: relative;
  160.                   overflow: hidden;
  161.                 }
  162.  
  163.                 ha-card::before {
  164.                   content: '';
  165.                   position: absolute;
  166.                   top: -50%;
  167.                   left: -50%;
  168.                   width: 200%;
  169.                   height: 200%;
  170.  
  171.                   pointer-events: none;
  172.                 }
  173.                 .states.flex .state .state__value.ellipsis {
  174.                   font-size: 2.1em;
  175.                 }
  176.         grid_options:
  177.           columns: 6
  178.           rows: auto
  179.       - type: vertical-stack
  180.         cards:
  181.           - type: custom:mini-graph-card
  182.             name: Bedroom
  183.             icon: mdi:bed-double
  184.             align_icon: left
  185.             entities:
  186.               - entity: sensor.rm_4_mini_temperature
  187.                 name: Temperature
  188.                 show_line: true
  189.                 show_points: true
  190.                 show_state: true
  191.             font_size_header: 10
  192.             show:
  193.               labels: true
  194.               labels_secondary: true
  195.               name: true
  196.               icon: true
  197.               legend: false
  198.               average: false
  199.               extrema: true
  200.             line_width: 2
  201.             upper_bound: 30
  202.             lower_bound: 22
  203.             hours_to_show: 12
  204.             points_per_hour: 20
  205.             update_interval: 6
  206.             refresh_interval: 6
  207.             height: 240
  208.             layout_options:
  209.               grid_columns: 2
  210.               grid_rows: auto
  211.             color_thresholds:
  212.               - value: 29
  213.                 color: "#FF0000"
  214.               - value: 28
  215.                 color: "#0DDE34"
  216.               - value: 25
  217.                 color: "#8AD0F8"
  218.               - value: 23
  219.                 color: white
  220.             card_mod:
  221.               style: |
  222.                ha-card {
  223.                   background: rgba(255, 255, 255, 0.1);
  224.                   border-radius: 8px 8px 0 0 ;
  225.                   #backdrop-filter: blur(20px) saturate(150%);
  226.                   #-webkit-backdrop-filter: blur(20px) saturate(150%);
  227.                   border: none;
  228.                   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  229.                   position: relative;
  230.                   overflow: hidden;
  231.                 }
  232.  
  233.                 ha-card::before {
  234.                   content: '';
  235.                   position: absolute;
  236.                   top: -50%;
  237.                   left: -50%;
  238.                   width: 200%;
  239.                   height: 200%;
  240.                   pointer-events: none;
  241.                 }
  242.                 .states.flex .state .state__value.ellipsis {
  243.                   font-size: 2.1em;
  244.                 }
  245.                 ha-icon {
  246.                   color: white;
  247.                 }
  248.           - type: custom:mini-graph-card
  249.             name: Indoor Conditions
  250.             icon: mdi:weather-cloudy
  251.             align_icon: left
  252.             entities:
  253.               - entity: sensor.rm_4_mini_humidity
  254.                 name: Humidity
  255.                 show_line: true
  256.                 show_points: true
  257.                 show_state: true
  258.             font_size_header: 10
  259.             show:
  260.               labels: true
  261.               labels_secondary: true
  262.               name: false
  263.               icon: false
  264.               legend: false
  265.               average: false
  266.               extrema: false
  267.             line_width: 2
  268.             upper_bound: 90
  269.             lower_bound: 40
  270.             hours_to_show: 12
  271.             points_per_hour: 20
  272.             update_interval: 6
  273.             refresh_interval: 6
  274.             height: 200
  275.             layout_options:
  276.               grid_columns: 2
  277.               grid_rows: auto
  278.             color_thresholds:
  279.               - value: 70
  280.                 color: "#FF0096"
  281.               - value: 65
  282.                 color: "#C39BF5"
  283.               - value: 55
  284.                 color: "#9E6FFF"
  285.               - value: 45
  286.                 color: "#BF9FFF"
  287.             card_mod:
  288.               style: |
  289.                ha-card {
  290.                   margin-top: -5%;
  291.                   #border-top: none;
  292.                   background: rgba(255, 255, 255, 0.1);
  293.                   border-radius: 8px;
  294.                   border-radius: 0 0 8px 8px;
  295.                   #backdrop-filter: blur(20px) saturate(150%);
  296.                   #-webkit-backdrop-filter: blur(20px) saturate(150%);
  297.                   border: none;
  298.                   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  299.                   position: relative;
  300.                   overflow: hidden;
  301.                 }
  302.  
  303.                 ha-card::before {
  304.                   content: '';
  305.                   position: absolute;
  306.                   top: -50%;
  307.                   left: -50%;
  308.                   width: 200%;
  309.                   height: 200%;
  310.  
  311.                   pointer-events: none;
  312.                 }
  313.                 .states.flex .state .state__value.ellipsis {
  314.                   font-size: 2.1em;
  315.                 }
  316.         grid_options:
  317.           columns: 6
  318.           rows: auto
  319.       - type: custom:bubble-card
  320.         card_type: separator
  321.         button_type: state
  322.         name: " "
  323.         icon: ""
  324.         sub_button: []
  325.         show_name: true
  326.         show_icon: true
  327.         scrolling_effect: true
  328.         card_layout: large-2-rows
  329.         rows: "0.5"
  330.         tap_action:
  331.           action: more-info
  332.         button_action:
  333.           tap_action:
  334.             action: more-info
  335.         entity: update.plex_media_server_arbiter_224
  336.         show_last_changed: false
  337.         show_attribute: false
  338.         force_icon: true
  339.         modules: []
  340.         styles: |
  341.          .bubble-line {
  342.             background: white;
  343.             opacity: 0.1;
  344.           }
  345.       - type: custom:bubble-card
  346.         card_type: button
  347.         button_type: state
  348.         entity: sensor.core_300s_series_filter_lifetime
  349.         card_layout: large-2-rows
  350.         name: Filter Lifetime
  351.         icon: mdi:air-filter
  352.         show_icon: true
  353.         show_state: true
  354.         show_name: false
  355.         grid_options:
  356.           columns: 3
  357.           rows: 1
  358.         styles: |-
  359.           .bubble-button-card-container {
  360.              border-radius: 8px !important;
  361.              }
  362.         scrolling_effect: false
  363.         show_last_changed: false
  364.         modules:
  365.          - BBL_SBL
  366.         card_mod:
  367.           style: >-
  368.             {% set val = states('sensor.core_300s_series_filter_lifetime') |
  369.            float(0) %}
  370.  
  371.  
  372.             {% if val < 100 %}
  373.               {% set bg = '#2196f34A' %}  {# blue, 48% opacity #}
  374.             {% elif val < 80 %}
  375.               {% set bg = '#5C793399' %}  {# green, 80% opacity #}
  376.             {% elif val < 25 %}
  377.               {% set bg = '#ffeb3b99' %}  {# yellow, 80% opacity #}
  378.             {% else %}
  379.               {% set bg = '#f4433699' %}  {# red, 80% opacity #}
  380.             {% endif %}
  381.  
  382.  
  383.             {% set r = (bg[1:3] | int(base=16)) / 255 %}
  384.  
  385.             {% set g = (bg[3:5] | int(base=16)) / 255 %}
  386.  
  387.             {% set b = (bg[5:7] | int(base=16)) / 255 %}
  388.  
  389.             {% set luminance = 0.299 * r + 0.587 * g + 0.114 * b %}
  390.  
  391.  
  392.             .bubble-button-card-container {
  393.               background: linear-gradient(
  394.                 to right,
  395.                 {{ bg }} {{ val }}%,
  396.                 rgba(255, 255, 255, 0.05) {{ val }}%
  397.               ) !important;
  398.  
  399.               color: {% if luminance > 0.5 %}
  400.                 rgb(0, 0, 0);
  401.               {% else %}
  402.                 rgb(255, 255, 255);
  403.               {% endif %};
  404.  
  405.               #backdrop-filter: blur(20px) saturate(150%);
  406.               #-webkit-backdrop-filter: blur(20px) saturate(150%);
  407.               border: none !important;
  408.               box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  409.               position: relative;
  410.               overflow: hidden;
  411.             }
  412.  
  413.             .bubble-icon-container {
  414.  
  415.             background: none !important;
  416.  
  417.             backdrop-filter: none !important;
  418.  
  419.             -webkit-backdrop-filter: none !important;
  420.  
  421.             border: none !important;
  422.  
  423.             box-shadow: none !important;
  424.  
  425.             }
  426.       - graph: line
  427.         type: sensor
  428.         entity: sensor.core_300s_series_pm2_5
  429.         name: Air Quality
  430.         detail: 2
  431.         layout_options:
  432.           grid_columns: 1
  433.           grid_rows: 1
  434.         theme: Graphite-bubble-v2
  435.         icon: mdi:air-filter
  436.         hours_to_show: 3
  437.         card_mod:
  438.           style: |
  439.            ha-card {
  440.               color: white;
  441.               background: rgba(255, 255, 255, 0.1) !important;
  442.               margin: 0%;
  443.               border-radius:8px;
  444.               #border: solid rgba(39, 41, 43, 1) 2px;
  445.               box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  446.               #backdrop-filter: blur(20px) saturate(150%);
  447.               #-webkit-backdrop-filter: blur(20px) saturate(150%);
  448.             }
  449.             ha-card .name {
  450.               color: white !important;       /* Sensor name */
  451.             }
  452.             ha-card .measurement {
  453.               color: white !important;       /* Sensor name */
  454.             }
  455.       - type: custom:bubble-card
  456.         card_type: empty-column
  457.         grid_options:
  458.           columns: 3
  459.           rows: 1
  460.       - type: custom:bubble-card
  461.         card_type: empty-column
  462.         card_layout: large
  463.         rows: "0.5"
  464.     column_span: 1
  465.   - type: grid
  466.     cards:
  467.       - type: custom:bubble-card
  468.         card_type: separator
  469.         name: Devices
  470.         icon: hue:room-attic
  471.         sub_button: []
  472.         card_layout: large-2-rows
  473.         modules: []
  474.         rows: "1"
  475.         styles: |
  476.          .bubble-line {
  477.             background: white;
  478.             opacity: 0.1;
  479.           }
  480.       - type: heading
  481.         icon: mdi:youtube-gaming
  482.         heading: Living Room
  483.         heading_style: subtitle
  484.         card_mod:
  485.           style: |
  486.            * {
  487.               color: white;
  488.             }
  489.       - type: custom:bubble-card
  490.         card_type: button
  491.         sub_button:
  492.           - entity: script.ac_temp_down
  493.             tap_action:
  494.               action: toggle
  495.             name: "Off"
  496.             show_name: false
  497.             icon: mdi:power
  498.           - entity: script.ac_cool_mode_25_med
  499.             show_name: false
  500.             show_attribute: false
  501.             show_last_changed: false
  502.             show_state: false
  503.             tap_action:
  504.               action: toggle
  505.             name: Cool
  506.             show_icon: true
  507.             icon: mdi:snowflake
  508.             state_background: false
  509.           - entity: script.ac_dry_mode_24
  510.             tap_action:
  511.               action: toggle
  512.             name: Dry
  513.             show_state: false
  514.             show_name: false
  515.             icon: mdi:water-percent
  516.           - entity: script.ac_led_off_2
  517.             name: "LED "
  518.             show_name: false
  519.             tap_action:
  520.               action: toggle
  521.             icon: mdi:lightbulb-alert-outline
  522.         name: Climate
  523.         icon: mdi:air-filter
  524.         scrolling_effect: false
  525.         show_icon: false
  526.         force_icon: false
  527.         show_state: false
  528.         show_attribute: false
  529.         show_last_changed: false
  530.         attribute: supported_features
  531.         show_name: false
  532.         tap_action:
  533.           action: toggle
  534.         card_layout: large
  535.         button_type: name
  536.         styles: >-
  537.           .bubble-sub-button-container {
  538.             justify-content: center;
  539.             width: 100%;
  540.             scale: 1;
  541.             }
  542.           .bubble-sub-button-2 {
  543.             color: rgba(25, 199, 242,1);
  544.             }
  545.           .bubble-sub-button-3 {
  546.             color: rgba(228, 148, 77,1);
  547.             }
  548.           .bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover,
  549.           .bubble-sub-button-5:hover {
  550.             background-color: rgba(39, 41, 43, 0.5) !important;
  551.             }
  552.         modules:
  553.          - BBL_SBL
  554.         grid_options:
  555.           columns: 12
  556.           rows: 1
  557.         show_last_updated: false
  558.       - type: custom:bubble-card
  559.         card_type: button
  560.         sub_button:
  561.           - entity: script.air_purifier_toggle_2
  562.             tap_action:
  563.               action: toggle
  564.             name: Toggle Off/On
  565.             show_name: false
  566.             icon: mdi:power
  567.           - entity: script.air_purifier_mode_auto
  568.             show_name: false
  569.             show_attribute: false
  570.             show_last_changed: false
  571.             show_state: false
  572.             tap_action:
  573.               action: toggle
  574.             name: Auto
  575.             show_icon: true
  576.             icon: ""
  577.             state_background: false
  578.           - entity: script.air_purifier_speed_cycle
  579.             tap_action:
  580.               action: toggle
  581.             name: Speed Toggle
  582.             show_state: false
  583.             show_name: false
  584.             icon: mdi:fan-minus
  585.           - entity: script.air_purifier_timer_cycle
  586.             name: Timer
  587.             show_name: false
  588.             tap_action:
  589.               action: toggle
  590.           - name: Reset
  591.             show_name: false
  592.             tap_action:
  593.               action: toggle
  594.             icon: ""
  595.             entity: script.air_purifier_reset
  596.         name: Air Purifier
  597.         icon: mdi:air-purifier
  598.         scrolling_effect: false
  599.         show_icon: true
  600.         force_icon: false
  601.         show_state: false
  602.         show_attribute: false
  603.         show_last_changed: false
  604.         attribute: supported_features
  605.         show_name: false
  606.         tap_action:
  607.           action: none
  608.         card_layout: large
  609.         button_type: name
  610.         styles: >-
  611.           .bubble-button-card-container {
  612.             #background: rgba(39, 41, 43, 0.5);
  613.             }
  614.           .bubble-icon-container {
  615.             background: none !important;
  616.             backdrop-filter: none !important;
  617.             -webkit-backdrop-filter: none !important;
  618.             border: none !important;
  619.             box-shadow: none !important;
  620.             }
  621.           .bubble-sub-button-icon {
  622.             --mdc-icon-size: 23px !important;
  623.           } .bubble-sub-button-1, .bubble-sub-button-2, .bubble-sub-button-3,
  624.           .bubble-sub-button-4, .bubble-sub-button-5 {
  625.             #color: white;
  626.             background: none !important;
  627.             backdrop-filter: none;
  628.             -webkit-backdrop-filter: none;
  629.             border: none !important;
  630.             box-shadow: none;
  631.             }
  632.           .bubble-sub-button-container {
  633.             display: flex;
  634.             justify-content: right;
  635.             align-items: center;
  636.             width: 8%;
  637.             justify-content: flex;
  638.             }
  639.           .bubble-sub-button-1:hover {
  640.             transition: 0.5s;
  641.             background-color: rgba(227, 79, 79,1);;
  642.             }
  643.           .bubble-sub-button-2 {
  644.             color: rgba(125, 99, 242,1);
  645.             }
  646.           .bubble-sub-button-3 {
  647.             color: rgba(228, 148, 87,1);
  648.             }
  649.             .bubble-sub-button-4 {
  650.             color: rgba(28, 148, 255,1);
  651.             }
  652.             .bubble-sub-button-5 {
  653.             color: rgba(128,255, 177,0.5);
  654.             }
  655.           .bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover,
  656.           .bubble-sub-button-5:hover {
  657.             background-color: rgba(39, 41, 43, 0.5) !important;
  658.             }
  659.         entity: switch.device_plug
  660.         modules:
  661.          - BBL_SBL
  662.         grid_options:
  663.           columns: 12
  664.           rows: auto
  665.         show_last_updated: false
  666.         icon_border_progress: []
  667.       - type: custom:bubble-card
  668.         card_type: button
  669.         button_type: slider
  670.         modules:
  671.          - default
  672.           - get_state_attribute
  673.           - sub_button_coloring
  674.           - main_button_coloring
  675.           - BBL_SBL
  676.           - subbutton_animations
  677.         entity: light.bedroom_lamps
  678.         name: Living Room
  679.         icon: mdi:floor-lamp-dual
  680.         show_attribute: true
  681.         get_state_attribute:
  682.           - entity: sensor.aqara_temp_humidity_sensor_temperature
  683.           - entity: sensor.aqara_temp_humidity_sensor_humidity
  684.         sub_button:
  685.           - entity: switch.device_plug
  686.             icon: mdi:fan
  687.             state_background: false
  688.             tap_action:
  689.               action: toggle
  690.             show_state: false
  691.           - entity: script.air_purifier_toggle
  692.             tap_action:
  693.               action: toggle
  694.             icon: mdi:air-filter
  695.             light_background: true
  696.             state_background: false
  697.           - icon: hue:plug-eu
  698.             tap_action:
  699.               action: more-info
  700.             state_background: false
  701.             entity: switch.device_hub
  702.           - entity: button.wake_on_lan_58_11_22_b0_46_45
  703.             icon: hue:room-computer
  704.         sub_button_coloring:
  705.           button_1:
  706.             entity: light.master_toilet_bulb_zb
  707.             on_color: "#A699C0"
  708.             on_icon_color: "#4D4356"
  709.           defaults:
  710.             off_color: "#353535"
  711.             off_icon_color: "#DBDBDB"
  712.           button_2:
  713.             entity: switch.bathroom_fan
  714.             on_color: "#8B7781"
  715.             on_icon_color: "#E5C4D3"
  716.           button_3:
  717.             entity: switch.master_toilet_fan
  718.             on_color: "#415671"
  719.             on_icon_color: "#97B4C2"
  720.         main_button_coloring:
  721.           entity: light.bathroom_dimmer
  722.           on_color: "#DEAEA9"
  723.           on_icon_color: "#DEAEA9"
  724.         grid_options:
  725.           columns: 12
  726.           rows: 1
  727.         card_layout: large-sub-buttons-grid
  728.         subbutton_animations:
  729.           subbutton1:
  730.             animation: spin
  731.             condition:
  732.               - condition: state
  733.                 entity_id: switch.device_plug
  734.                 state:
  735.                  - "on"
  736.         conditional_icon:
  737.           advanced_settings:
  738.             color_true: cyan
  739.             color_false: black
  740.           icon_true: mdi:floor-lamp-dual
  741.           icon_false: mdi:floor-lamp-dual-outline
  742.         scrolling_effect: false
  743.         show_name: false
  744.       - type: custom:bubble-card
  745.         card_type: button
  746.         button_type: name
  747.         modules:
  748.          - BBL_SBL
  749.         scrolling_effect: false
  750.         show_icon: false
  751.         show_name: false
  752.         sub_button:
  753.           - entity: script.random_lamp_colors
  754.             show_name: false
  755.             show_state: false
  756.             tap_action:
  757.               action: toggle
  758.             hide_when_parent_unavailable: false
  759.             state_background: false
  760.             name: Random
  761.             icon: mdi:vanity-light
  762.             show_background: false
  763.             show_icon: true
  764.             show_last_changed: false
  765.             show_attribute: false
  766.           - entity: scene.morning
  767.             show_name: false
  768.             show_state: false
  769.             tap_action:
  770.               action: toggle
  771.             hide_when_parent_unavailable: false
  772.             name: Morning
  773.             icon: mdi:weather-sunset-up
  774.             state_background: false
  775.             show_background: false
  776.           - entity: scene.late_night
  777.             show_name: false
  778.             show_state: false
  779.             tap_action:
  780.               action: toggle
  781.             hide_when_parent_unavailable: false
  782.             state_background: true
  783.             name: Late Night
  784.             icon: mdi:weather-night
  785.             show_last_changed: false
  786.             show_attribute: false
  787.           - entity: scene.movie
  788.             show_name: false
  789.             show_state: false
  790.             tap_action:
  791.               action: toggle
  792.             hide_when_parent_unavailable: false
  793.             name: Movies
  794.             icon: mdi:movie-open
  795.           - entity: scene.relax
  796.             show_name: false
  797.             show_state: false
  798.             tap_action:
  799.               action: toggle
  800.             hide_when_parent_unavailable: false
  801.             name: Relax
  802.             icon: mdi:sofa
  803.           - entity: scene.work
  804.             show_name: false
  805.             show_state: false
  806.             tap_action:
  807.               action: toggle
  808.             hide_when_parent_unavailable: false
  809.             name: Work
  810.             icon: mdi:briefcase
  811.         card_layout: large
  812.         name: Scenes
  813.         styles: >-
  814.           .bubble-button-card-container {
  815.               background: none !important;
  816.               backdrop-filter: none !important;
  817.               border: none !important;
  818.               box-shadow: none !important;
  819.           }
  820.  
  821.           .bubble-sub-button-container {
  822.             display: flex;
  823.             justify-content: center;
  824.             align-items: center;
  825.             width: 100%;
  826.             justify-content: flex;
  827.             }
  828.           .bubble-sub-button {
  829.              backdrop-filter: blur(20px) saturate(150%);
  830.             -webkit-backdrop-filter: blur(20px) saturate(150%);
  831.             #transform: scale(0.9);
  832.             #background: transparent !important;
  833.           } .bubble-sub-button-1 {
  834.             color: pink !important;
  835.             }
  836.           .bubble-sub-button-1:hover {
  837.             transition: 0.5s;
  838.             background-color: rgba(227, 79, 79,1);
  839.             }
  840.           .bubble-sub-button-2 {
  841.             color: rgba(228, 148, 77,1);
  842.             }
  843.           .bubble-sub-button-3 {
  844.             color: rgba(25, 199, 242,1);
  845.             }
  846.             .bubble-sub-button-4 {
  847.             color: lightyellow;
  848.             }
  849.             .bubble-sub-button-5 {
  850.             color: maroon;
  851.             }
  852.             .bubble-sub-button-6 {
  853.             color: grey;
  854.             }
  855.           .bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover,
  856.           .bubble-sub-button-5:hover {
  857.             background-color: rgba(39, 41, 43, 0.5) !important;
  858.             }
  859.         rows: "0.8"
  860.         grid_options:
  861.           columns: full
  862.           rows: "0.8"
  863.       - type: custom:bubble-card
  864.         card_type: separator
  865.         button_type: state
  866.         name: " "
  867.         icon: ""
  868.         sub_button: []
  869.         show_name: true
  870.         show_icon: true
  871.         scrolling_effect: true
  872.         card_layout: large-2-rows
  873.         rows: "0.5"
  874.         tap_action:
  875.           action: more-info
  876.         button_action:
  877.           tap_action:
  878.             action: more-info
  879.         entity: update.plex_media_server
  880.         show_last_changed: false
  881.         show_attribute: false
  882.         force_icon: true
  883.         modules: []
  884.         styles: |
  885.          .bubble-line {
  886.             background: white;
  887.             opacity: 0.1;
  888.           }
  889.       - type: heading
  890.         icon: mdi:bed
  891.         heading: Bed Room
  892.         heading_style: subtitle
  893.         card_mod:
  894.           style: |
  895.            * {
  896.               color: white;
  897.             }
  898.       - type: custom:bubble-card
  899.         card_type: button
  900.         sub_button:
  901.           - entity: script.turn_off_ac
  902.             tap_action:
  903.               action: toggle
  904.             name: "Off"
  905.             show_name: false
  906.             icon: mdi:power
  907.           - entity: script.ac_cool_mode_26
  908.             show_name: false
  909.             show_attribute: false
  910.             show_last_changed: false
  911.             show_state: false
  912.             tap_action:
  913.               action: toggle
  914.             name: Cool
  915.             show_icon: true
  916.             icon: mdi:snowflake
  917.             state_background: false
  918.           - entity: script.ac_temp_up
  919.             tap_action:
  920.               action: toggle
  921.             name: Dry
  922.             show_state: false
  923.             show_name: false
  924.             icon: mdi:water-percent
  925.           - entity: script.ac_led_off
  926.             name: "LED "
  927.             show_name: false
  928.             tap_action:
  929.               action: toggle
  930.             icon: mdi:lightbulb-alert-outline
  931.         name: Climate
  932.         icon: mdi:air-filter
  933.         scrolling_effect: false
  934.         show_icon: false
  935.         force_icon: false
  936.         show_state: false
  937.         show_attribute: false
  938.         show_last_changed: false
  939.         attribute: supported_features
  940.         show_name: false
  941.         tap_action:
  942.           action: toggle
  943.         card_layout: large
  944.         button_type: name
  945.         styles: >-
  946.           .bubble-sub-button-container {
  947.             justify-content: center;
  948.             width: 100%;
  949.             scale: 1;
  950.             }
  951.           .bubble-sub-button-2 {
  952.             color: rgba(25, 199, 242,1);
  953.             }
  954.           .bubble-sub-button-3 {
  955.             color: rgba(228, 148, 77,1);
  956.             }
  957.           .bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover,
  958.           .bubble-sub-button-5:hover {
  959.             background-color: rgba(39, 41, 43, 0.5) !important;
  960.             }
  961.         modules:
  962.          - BBL_SBL
  963.         grid_options:
  964.           columns: 12
  965.           rows: 1
  966.         show_last_updated: false
  967.       - type: custom:purifier-card
  968.         entity: fan.core_300s_series
  969.         stats: null
  970.         shortcuts:
  971.           - name: 25%
  972.             icon: mdi:circle-slice-2
  973.             percentage: 25
  974.           - name: 50%
  975.             icon: mdi:circle-slice-4
  976.             percentage: 50
  977.           - name: 100%
  978.             icon: mdi:circle-slice-8
  979.             percentage: 100
  980.           - name: Auto
  981.             icon: mdi:brightness-auto
  982.             preset_mode: auto
  983.           - name: Silent
  984.             icon: mdi:weather-night
  985.             preset_mode: sleep
  986.         show_name: false
  987.         show_state: false
  988.         show_toolbar: true
  989.         compact_view: true
  990.         grid_options:
  991.           columns: 12
  992.           rows: auto
  993.         card_mod:
  994.           style: |-
  995.             ha-card {
  996.               --pc-background: rgba(255, 255, 255, 0);
  997.               --pc-divider-color: rgba(255, 255, 255, 0.1);
  998.               --pc-toolbar-background: rgba(255, 255, 255, 0.0);
  999.               --pc-toolbar-icon-color: white;
  1000.               --pc-divider-color:: rgba(255, 255, 255, 0.1);
  1001.               --pc-spacing: 0px;
  1002.               #padding: 0px !important;
  1003.               #margin-top: -5%;
  1004.               background: rgba(255, 255, 255, 0.1);
  1005.               border-radius: 8px;
  1006.               #backdrop-filter: blur(20px) saturate(150%);
  1007.               #-webkit-backdrop-filter: blur(20px) saturate(150%);
  1008.               border: none;
  1009.               box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  1010.               #position: relative;
  1011.               #overflow: hidden;
  1012.             }
  1013.             .preview {
  1014.             display: none;
  1015.             }
  1016.  
  1017.             @keyframes spin {
  1018.               0%   { transform: rotate(0deg); }
  1019.               100% { transform: rotate(360deg); }
  1020.             }
  1021.  
  1022.             ha-icon {
  1023.               #color: white !important;
  1024.               {% if is_state('fan.core_300s_series', 'on') %}
  1025.               #animation: spin 1s linear infinite;
  1026.               --pc-toolbar-icon-color: cyan !important;
  1027.               {% else %}
  1028.               animation: none;
  1029.               {% endif %}
  1030.             }
  1031.       - type: custom:bubble-card
  1032.         card_type: button
  1033.         button_type: slider
  1034.         modules:
  1035.          - default
  1036.           - BBL_SBL
  1037.           - subbutton_animations
  1038.         entity: light.bedroom_lamp_1
  1039.         name: Bed Room
  1040.         icon: mdi:floor-lamp-torchiere
  1041.         show_attribute: true
  1042.         sub_button:
  1043.           - entity: switch.device_plug_2
  1044.             icon: mdi:fan
  1045.             state_background: false
  1046.             tap_action:
  1047.               action: toggle
  1048.             show_state: false
  1049.           - entity: script.air_purifier_toggle
  1050.             tap_action:
  1051.               action: toggle
  1052.             icon: mdi:air-filter
  1053.             light_background: true
  1054.             state_background: false
  1055.           - icon: hue:plug-eu
  1056.             tap_action:
  1057.               action: more-info
  1058.             state_background: false
  1059.             entity: switch.device_hub
  1060.         sub_button_coloring:
  1061.           button_1:
  1062.             entity: light.master_toilet_bulb_zb
  1063.             on_color: "#A699C0"
  1064.             on_icon_color: "#4D4356"
  1065.           defaults:
  1066.             off_color: "#353535"
  1067.             off_icon_color: "#DBDBDB"
  1068.           button_2:
  1069.             entity: switch.bathroom_fan
  1070.             on_color: "#8B7781"
  1071.             on_icon_color: "#E5C4D3"
  1072.           button_3:
  1073.             entity: switch.master_toilet_fan
  1074.             on_color: "#415671"
  1075.             on_icon_color: "#97B4C2"
  1076.         main_button_coloring:
  1077.           entity: light.bathroom_dimmer
  1078.           on_color: "#DEAEA9"
  1079.           on_icon_color: "#DEAEA9"
  1080.         grid_options:
  1081.           columns: 12
  1082.           rows: 1
  1083.         card_layout: large-sub-buttons-grid
  1084.         subbutton_animations:
  1085.           subbutton1:
  1086.             animation: spin
  1087.             condition:
  1088.               - condition: state
  1089.                 entity_id: switch.device_plug_2
  1090.                 state:
  1091.                  - "on"
  1092.         scrolling_effect: false
  1093.         show_name: false
  1094.       - type: custom:bubble-card
  1095.         card_type: separator
  1096.         button_type: state
  1097.         name: " "
  1098.         icon: ""
  1099.         sub_button: []
  1100.         show_name: true
  1101.         show_icon: true
  1102.         scrolling_effect: true
  1103.         card_layout: large-2-rows
  1104.         rows: "0.5"
  1105.         tap_action:
  1106.           action: more-info
  1107.         button_action:
  1108.           tap_action:
  1109.             action: more-info
  1110.         entity: update.plex_media_server
  1111.         show_last_changed: false
  1112.         show_attribute: false
  1113.         force_icon: true
  1114.         modules: []
  1115.         styles: |
  1116.          .bubble-line {
  1117.             background: white;
  1118.             opacity: 0.1;
  1119.           }
  1120.       - type: custom:bubble-card
  1121.         card_type: button
  1122.         button_type: slider
  1123.         modules:
  1124.          - default
  1125.           - BBL_SBL
  1126.         entity: light.hallway_lamp
  1127.         name: Hallway
  1128.         icon: mdi:floor-lamp
  1129.         show_attribute: true
  1130.         sub_button:
  1131.           - tap_action:
  1132.               action: toggle
  1133.             icon: mdi:air-filter
  1134.             light_background: true
  1135.             state_background: false
  1136.             entity: sensor.nas_today_s_consumption_cost
  1137.           - icon: mdi:printer-3d
  1138.             tap_action:
  1139.               action: more-info
  1140.             state_background: false
  1141.             entity: switch.printer_hub
  1142.         sub_button_coloring:
  1143.           button_1:
  1144.             entity: light.master_toilet_bulb_zb
  1145.             on_color: "#A699C0"
  1146.             on_icon_color: "#4D4356"
  1147.           defaults:
  1148.             off_color: "#353535"
  1149.             off_icon_color: "#DBDBDB"
  1150.           button_2:
  1151.             entity: switch.bathroom_fan
  1152.             on_color: "#8B7781"
  1153.             on_icon_color: "#E5C4D3"
  1154.           button_3:
  1155.             entity: switch.master_toilet_fan
  1156.             on_color: "#415671"
  1157.             on_icon_color: "#97B4C2"
  1158.         main_button_coloring:
  1159.           entity: light.bathroom_dimmer
  1160.           on_color: "#DEAEA9"
  1161.           on_icon_color: "#DEAEA9"
  1162.         grid_options:
  1163.           columns: 12
  1164.           rows: 1
  1165.         card_layout: large-sub-buttons-grid
  1166.     column_span: 1
  1167.   - type: grid
  1168.     cards:
  1169.       - type: custom:bubble-card
  1170.         card_type: button
  1171.         grid_options:
  1172.           columns: 12
  1173.           rows: 1
  1174.         event_action:
  1175.           tap_action:
  1176.             action: more-info
  1177.           double_tap_action:
  1178.             action: none
  1179.           hold_action:
  1180.             action: none
  1181.         button_type: state
  1182.         entity: input_boolean.toggle_sections
  1183.         button_action:
  1184.           tap_action:
  1185.             action: none
  1186.         scrolling_effect: false
  1187.         show_icon: false
  1188.         show_name: false
  1189.         show_state: false
  1190.         styles: |2-
  1191.                 .bubble-button-card-container {
  1192.                   background: transparent;
  1193.                   backdrop-filter: none;
  1194.                   border: none;
  1195.                   box-shadow: none;
  1196.                   #border-bottom: solid 1px rgba(255,255,255,0.2);
  1197.                   #outline: 1px solid rgba(255,255,255,0.1) !important;
  1198.                  
  1199.                   }
  1200.       - type: custom:clock-weather-card
  1201.         entity: weather.forecast_home
  1202.         sun_entity: sun.sun
  1203.         temperature_sensor: sensor.outdoor_temp
  1204.         humidity_sensor: sensor.outdoor_humidity
  1205.         weather_icon_type: fill
  1206.         animated_icon: true
  1207.         forecast_rows: 4
  1208.         locale: en-SG
  1209.         time_pattern: h:mm a
  1210.         time_format: 12
  1211.         date_pattern: cccc, d MMMM yyyy
  1212.         hide_today_section: false
  1213.         hide_forecast_section: false
  1214.         show_humidity: true
  1215.         hide_clock: false
  1216.         hide_date: false
  1217.         hourly_forecast: false
  1218.         use_browser_time: false
  1219.         time_zone: null
  1220.         show_decimal: true
  1221.         apparent_sensor: sensor.real_feel_temperature
  1222.         aqi_sensor: sensor.air_quality_index
  1223.         card_mod:
  1224.           style: |
  1225.            ha-card {
  1226.               background: none;
  1227.               #background: rgba(255,255,255,0.1);
  1228.               border-radius: 8px;
  1229.               #backdrop-filter: blur(20px) saturate(150%);
  1230.               #-webkit-backdrop-filter: blur(20px) saturate(150%);
  1231.               #box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  1232.               box-shadow: none;
  1233.             }
  1234.         grid_options:
  1235.           columns: 12
  1236.           rows: auto
  1237.       - type: custom:hourly-weather
  1238.         entity: weather.forecast_home
  1239.         offset: "0"
  1240.         icons: true
  1241.         show_wind: "false"
  1242.         show_date: "false"
  1243.         show_precipitation_amounts: false
  1244.         show_precipitation_probability: false
  1245.         num_segments: "12"
  1246.         name: " "
  1247.         grid_options:
  1248.           columns: 12
  1249.           rows: 2
  1250.         visibility:
  1251.           - condition: state
  1252.             entity: input_boolean.toggle_weather
  1253.             state: "off"
  1254.         label_spacing: "3"
  1255.         card_mod:
  1256.           style: |
  1257.            ha-card {
  1258.               background: none;
  1259.               #background: rgba(255,255,255,0.1);
  1260.               border-radius: 8px;
  1261.               #backdrop-filter: blur(20px) saturate(150%);
  1262.               #-webkit-backdrop-filter: blur(20px) saturate(150%);
  1263.               #box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  1264.               box-shadow: none;
  1265.             }
  1266.       - type: custom:bubble-card
  1267.         card_type: empty-column
  1268.         grid_options:
  1269.           columns: 3
  1270.           rows: 1
  1271.     column_span: 1
  1272.   - type: grid
  1273.     cards:
  1274.       - type: custom:bubble-card
  1275.         card_type: separator
  1276.         button_type: state
  1277.         name: Media
  1278.         icon: mdi:plex
  1279.         sub_button: []
  1280.         show_name: true
  1281.         show_icon: true
  1282.         scrolling_effect: true
  1283.         card_layout: large-2-rows
  1284.         rows: 1
  1285.         tap_action:
  1286.           action: more-info
  1287.         button_action:
  1288.           tap_action:
  1289.             action: more-info
  1290.         entity: update.plex_media_server
  1291.         show_last_changed: false
  1292.         show_attribute: false
  1293.         force_icon: true
  1294.         modules: []
  1295.         styles: |
  1296.          .bubble-line {
  1297.             background: white;
  1298.             opacity: 0.1;
  1299.           }
  1300.       - type: custom:bubble-card
  1301.         card_type: button
  1302.         button_type: name
  1303.         name: Plex
  1304.         icon: " "
  1305.         show_name: false
  1306.         force_icon: true
  1307.         show_icon: false
  1308.         show_last_changed: false
  1309.         show_attribute: false
  1310.         attribute: friendly_name
  1311.         tap_action:
  1312.           action: more-info
  1313.           url_path: http://192.168.1.100:32400/web/index.html#!/
  1314.         styles: >-
  1315.           .bubble-button-card-container {
  1316.             #background: rgba(255, 255, 255, 0.1);
  1317.             background-image: url("/local/icons/png/plex_2.png");
  1318.             #backdrop-filter: blur(20px) saturate(150%);
  1319.             #-webkit-backdrop-filter: blur(20px) saturate(150%);
  1320.             background-size: 50%;
  1321.             background-position: left;
  1322.             background-position-x: 50%;
  1323.             background-repeat: no-repeat;
  1324.             position: relative;
  1325.             overflow: hidden;
  1326.             z-index: 0;
  1327.           }
  1328.  
  1329.           .bubble-button-card-container::before { content: ''; position:
  1330.           absolute; top: 0; left: 0; width: 200%; height: 200%; background:
  1331.             radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%),
  1332.             linear-gradient(135deg, transparent, rgba(255,255,255,0.05), transparent);
  1333.           background-size: 200% 200%; opacity: 0; transition: opacity 0.3s ease;
  1334.           pointer-events: none; z-index: 1;
  1335.  
  1336.           }
  1337.  
  1338.  
  1339.           .bubble-button-card-container:hover::before {
  1340.  
  1341.           opacity: 0.4;
  1342.  
  1343.           background:
  1344.             radial-gradient(circle at center, rgba(215, 161, 3, 0.2) 0%, transparent 70%),
  1345.             linear-gradient(5deg, transparent, rgba(215, 161, 3, 0.2), transparent);
  1346.           animation: shimmerMove 2s ease 1 forwards;
  1347.  
  1348.           }
  1349.  
  1350.  
  1351.           @keyframes shimmerMove {
  1352.             0% {
  1353.               background-position: 20% 20%;
  1354.             }
  1355.             50% {
  1356.               background-position: 80% 80%;
  1357.             }
  1358.             100% {
  1359.               background-position: 80% 80%;
  1360.             }
  1361.           }
  1362.  
  1363.           .bubble-sub-button-1,.bubble-sub-button-2,.bubble-sub-button-3,.bubble-sub-button-4
  1364.           {
  1365.             background-color: rgba(0, 0, 5, 0) !important;
  1366.             color: white;
  1367.             transition: 0.3s;
  1368.           }
  1369.  
  1370.           .bubble-sub-button-1:hover,.bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover
  1371.           {
  1372.             opacity: 1;
  1373.             color: white !important;
  1374.             background-color: rgba(102, 102, 102, 0.15) !important;
  1375.             }
  1376.         sub_button:
  1377.           - entity: update.plex_media_server
  1378.             show_name: false
  1379.             show_state: false
  1380.             show_last_changed: false
  1381.             show_attribute: false
  1382.             attribute: media_series_title
  1383.             show_icon: false
  1384.             show_background: true
  1385.             icon: mdi:update
  1386.           - entity: sensor.nas_main
  1387.             show_state: false
  1388.             state_background: false
  1389.             show_icon: false
  1390.         button_action:
  1391.           tap_action:
  1392.             action: url
  1393.             url_path: http://192.168.1.100:32400/web/index.html#!/
  1394.         show_state: false
  1395.         card_layout: large-2-rows
  1396.         modules:
  1397.          - BBL_SBL
  1398.         rows: "1"
  1399.         grid_options:
  1400.           columns: 6
  1401.           rows: "1"
  1402.       - type: custom:bubble-card
  1403.         card_type: button
  1404.         button_type: name
  1405.         name: Jellyfin
  1406.         icon: " "
  1407.         show_name: false
  1408.         force_icon: true
  1409.         show_icon: false
  1410.         show_last_changed: false
  1411.         show_attribute: false
  1412.         attribute: friendly_name
  1413.         tap_action:
  1414.           action: more-info
  1415.           url_path: http://192.168.1.100:32400/web/index.html#!/
  1416.         styles: >-
  1417.           .bubble-button-card-container {
  1418.             #background: rgba(255, 255, 255, 0.1);
  1419.             background-image: url("/local/icons/png/jellyfin_light.png");
  1420.             #backdrop-filter: blur(20px) saturate(150%);
  1421.             #-webkit-backdrop-filter: blur(20px) saturate(150%);
  1422.             background-size: 80%;
  1423.             background-position: center;
  1424.             background-position-x: 50%;
  1425.             background-repeat: no-repeat;
  1426.             position: relative;
  1427.             overflow: hidden;
  1428.             z-index: 0;
  1429.           }
  1430.  
  1431.           .bubble-button-card-container::before { content: ''; position:
  1432.           absolute; top: 0; left: 0; width: 200%; height: 200%; background:
  1433.             radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%),
  1434.             linear-gradient(135deg, transparent, rgba(255,255,255,0.05), transparent);
  1435.           background-size: 200% 200%; opacity: 0; transition: opacity 0.3s ease;
  1436.           pointer-events: none; z-index: 1;
  1437.  
  1438.           }
  1439.  
  1440.  
  1441.           .bubble-button-card-container:hover::before {
  1442.  
  1443.           opacity: 0.4;
  1444.  
  1445.           background:
  1446.             radial-gradient(circle at center, rgba(8, 158, 219, 0.5) 0%, transparent 70%),
  1447.             linear-gradient(45deg, transparent, rgba(143, 104, 200, 0.7), transparent);
  1448.           animation: shimmerMove 2s ease 1 forwards;
  1449.  
  1450.           }
  1451.  
  1452.  
  1453.           @keyframes shimmerMove {
  1454.             0% {
  1455.               background-position: 20% 20%;
  1456.             }
  1457.             50% {
  1458.               background-position: 80% 80%;
  1459.             }
  1460.             100% {
  1461.               background-position: 80% 80%;
  1462.             }
  1463.           }
  1464.  
  1465.           .bubble-sub-button-1,.bubble-sub-button-2,.bubble-sub-button-3,.bubble-sub-button-4
  1466.           {
  1467.             background-color: rgba(0, 0, 5, 0) !important;
  1468.             color: white;
  1469.             transition: 0.3s;
  1470.           }
  1471.  
  1472.           .bubble-sub-button-1:hover,.bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover
  1473.           {
  1474.             opacity: 1;
  1475.             color: white !important;
  1476.             background-color: rgba(102, 102, 102, 0.15) !important;
  1477.             }
  1478.         sub_button:
  1479.           - show_name: false
  1480.             show_state: false
  1481.             show_last_changed: false
  1482.             show_attribute: false
  1483.             attribute: media_series_title
  1484.             show_icon: false
  1485.             show_background: true
  1486.             icon: mdi:update
  1487.             entity: sensor.nas_main_active_clients
  1488.         button_action:
  1489.           tap_action:
  1490.             action: url
  1491.             url_path: https://example.local234.me
  1492.         show_state: false
  1493.         card_layout: large-2-rows
  1494.         modules:
  1495.          - BBL_SBL
  1496.         rows: "1"
  1497.         grid_options:
  1498.           columns: 6
  1499.           rows: "1"
  1500.       - type: custom:bubble-card
  1501.         card_type: button
  1502.         button_type: name
  1503.         entity: binary_sensor.prowlarr_online
  1504.         name: Pasta
  1505.         icon: " "
  1506.         show_name: false
  1507.         force_icon: true
  1508.         show_icon: false
  1509.         show_last_changed: false
  1510.         show_attribute: false
  1511.         attribute: friendly_name
  1512.         tap_action:
  1513.           action: more-info
  1514.           url_path: https://www.pastatool.com/#authentication
  1515.         styles: |-
  1516.           .bubble-button-card-container {
  1517.             #background: rgba(39, 41, 43, 0.8);
  1518.             background-image: url("https://www.pastatool.com/images/Logo_Title_Large.png");
  1519.             background-size: 85%;
  1520.             }
  1521.         sub_button: []
  1522.         button_action:
  1523.           tap_action:
  1524.             action: url
  1525.             url_path: https://www.pastatool.com/#authentication
  1526.         show_state: false
  1527.         grid_options:
  1528.           columns: 3
  1529.           rows: 1
  1530.         card_layout: large
  1531.         scrolling_effect: false
  1532.         modules:
  1533.          - BBL_SBL
  1534.       - type: custom:bubble-card
  1535.         card_type: button
  1536.         button_type: name
  1537.         entity: binary_sensor.overseer_online
  1538.         name: Overseer
  1539.         icon: " "
  1540.         show_name: false
  1541.         force_icon: true
  1542.         show_icon: false
  1543.         show_last_changed: false
  1544.         show_attribute: false
  1545.         attribute: friendly_name
  1546.         tap_action:
  1547.           action: more-info
  1548.           url_path: https://example.local234.me
  1549.         styles: |
  1550.          .bubble-button-card-container {
  1551.             #background: rgba(255, 255, 255, 0.3);
  1552.             background-image: url("/local/icons/svg/overseer_long.svg");
  1553.                 #backdrop-filter: blur(20px) saturate(150%);
  1554.                 #-webkit-backdrop-filter: blur(20px) saturate(150%);
  1555.                 background-size: 85%;
  1556.                 background-position: center;
  1557.                 background-repeat: no-repeat;
  1558.                 #border: solid rgba(39, 41, 43, 1) 0px;
  1559.                 position: relative;
  1560.                 overflow: hidden;
  1561.                 z-index: 0;
  1562.               }
  1563.               .bubble-button-card-container::before {
  1564.               content: '';
  1565.               position: absolute;
  1566.               top: 0;
  1567.               left: 0;
  1568.               width: 200%;
  1569.               height: 200%;
  1570.               background:
  1571.                 radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%),
  1572.                 linear-gradient(135deg, transparent, rgba(255,255,255,0.05), transparent);
  1573.               background-size: 200% 200%;
  1574.               opacity: 0;
  1575.               transition: opacity 0.3s ease;
  1576.               pointer-events: none;
  1577.               z-index: 1;
  1578.               }
  1579.  
  1580.               .bubble-button-card-container:hover::before {
  1581.               opacity: 0.4;
  1582.               background:
  1583.                 radial-gradient(circle at center, rgba(196, 119, 255, 0.45) 0%, transparent 70%),
  1584.                 linear-gradient(5deg, transparent, rgba(196, 119, 255, 0.45), transparent);
  1585.               animation: shimmerMove 2s ease 1 forwards;
  1586.               }
  1587.  
  1588.                 @keyframes shimmerMove {
  1589.                   0% {
  1590.                     background-position: 20% 20%;
  1591.                   }
  1592.                   50% {
  1593.                     background-position: 80% 80%;
  1594.                   }
  1595.                   100% {
  1596.                     background-position: 80% 80%;
  1597.                   }
  1598.                 }
  1599.           .bubble-icon-container {
  1600.             background: transparent;
  1601.             padding: 0px;
  1602.             margin: 0px;
  1603.             border-radius: 0px;
  1604.           }
  1605.           .bubble-sub-button-1 {
  1606.             background-color: rgba(32, 29, 31, 0) !important;
  1607.             color: ${['200', '302', '303', '307'].includes(hass.states['sensor.overseer_http_status'].state) ? 'transparent' : 'rgba(255, 0, 0, 0.8)'} !important;
  1608.             padding: 0px;
  1609.             margin: 0px;
  1610.           }
  1611.           .bubble-sub-button-icon {
  1612.             --mdc-icon-size: 18px !important;
  1613.             border-radius: 100%;
  1614.             transform: scale(1);
  1615.             box-shadow: 0 0 0 rgba(0, 0, 0, 1);
  1616.             animation: pulse-animation 5s infinite;
  1617.           }
  1618.           @keyframes pulse-animation {
  1619.             0% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(252, 3, 3, 0); }
  1620.             70% { transform: scale(1); box-shadow: 0 0 0 0.6rem rgba(0, 0, 0, 0); }
  1621.             100% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  1622.           }
  1623.         sub_button: []
  1624.         button_action:
  1625.           tap_action:
  1626.             action: url
  1627.             url_path: https://example.local234.me
  1628.         show_state: false
  1629.         grid_options:
  1630.           columns: 3
  1631.           rows: 1
  1632.         card_layout: large
  1633.         modules:
  1634.          - BBL_SBL
  1635.         scrolling_effect: false
  1636.       - type: custom:bubble-card
  1637.         card_type: button
  1638.         button_type: name
  1639.         entity: binary_sensor.tautulli_online
  1640.         name: Tautulli
  1641.         icon: " "
  1642.         show_name: false
  1643.         force_icon: true
  1644.         show_icon: false
  1645.         show_last_changed: false
  1646.         show_attribute: false
  1647.         attribute: friendly_name
  1648.         tap_action:
  1649.           action: more-info
  1650.           url_path: https://example.local234.me
  1651.         styles: |-
  1652.           .bubble-button-card-container {
  1653.             #background: rgba(255, 255, 255, 0.2);
  1654.             background-image: url("/local/icons/png/logo-tautulli-45.png");
  1655.             background-size: 80%;
  1656.             background-position: left;
  1657.             background-position-x: 50%;
  1658.             #border: solid rgba(39, 41, 43, 1) 0px;
  1659.               }
  1660.                   .bubble-button-card-container::before {
  1661.               content: '';
  1662.               position: absolute;
  1663.               top: 0;
  1664.               left: 0;
  1665.               width: 200%;
  1666.               height: 200%;
  1667.               background:
  1668.                 radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%),
  1669.                 linear-gradient(135deg, transparent, rgba(255,255,255,0.05), transparent);
  1670.               background-size: 200% 200%;
  1671.               opacity: 0;
  1672.               transition: opacity 0.3s ease;
  1673.               pointer-events: none;
  1674.               z-index: 1;
  1675.               }
  1676.  
  1677.               .bubble-button-card-container:hover::before {
  1678.               opacity: 0.4;
  1679.               background:
  1680.                 radial-gradient(circle at center, rgba(215, 161, 3, 0.2) 0%, transparent 70%),
  1681.                 linear-gradient(5deg, transparent, rgba(215, 161, 3, 0.2), transparent);
  1682.               animation: shimmerMove 2s ease 1 forwards;
  1683.               }
  1684.  
  1685.                 @keyframes shimmerMove {
  1686.                   0% {
  1687.                     background-position: 20% 20%;
  1688.                   }
  1689.                   50% {
  1690.                     background-position: 80% 80%;
  1691.                   }
  1692.                   100% {
  1693.                     background-position: 80% 80%;
  1694.                   }
  1695.                 }  
  1696.         button_action:
  1697.           tap_action:
  1698.             action: url
  1699.             url_path: https://example.local234.me
  1700.         show_state: false
  1701.         card_layout: large-2-rows
  1702.         modules:
  1703.          - BBL_SBL
  1704.         scrolling_effect: false
  1705.         sub_button: []
  1706.         grid_options:
  1707.           columns: 3
  1708.           rows: auto
  1709.       - type: custom:bubble-card
  1710.         card_type: button
  1711.         button_type: name
  1712.         name: Jellystat
  1713.         icon: " "
  1714.         show_name: false
  1715.         force_icon: true
  1716.         show_icon: false
  1717.         show_last_changed: false
  1718.         show_attribute: false
  1719.         attribute: friendly_name
  1720.         tap_action:
  1721.           action: more-info
  1722.           url_path: http://192.168.1.100:3791
  1723.         styles: >-
  1724.           .bubble-button-card-container {
  1725.             #background: rgba(255, 255, 255, 0.1);
  1726.             background-image: url("/local/icons/png/jellystat.png");
  1727.             #backdrop-filter: blur(20px) saturate(150%);
  1728.             #-webkit-backdrop-filter: blur(20px) saturate(150%);
  1729.             background-size: 40%;
  1730.             background-position: center;
  1731.             background-position-x: 50%;
  1732.             background-repeat: no-repeat;
  1733.             position: relative;
  1734.             overflow: hidden;
  1735.             z-index: 0;
  1736.           }
  1737.  
  1738.           .bubble-button-card-container::before { content: ''; position:
  1739.           absolute; top: 0; left: 0; width: 200%; height: 200%; background:
  1740.             radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%),
  1741.             linear-gradient(135deg, transparent, rgba(255,255,255,0.05), transparent);
  1742.           background-size: 200% 200%; opacity: 0; transition: opacity 0.3s ease;
  1743.           pointer-events: none; z-index: 1;
  1744.  
  1745.           }
  1746.  
  1747.  
  1748.           .bubble-button-card-container:hover::before {
  1749.  
  1750.           opacity: 0.4;
  1751.  
  1752.           background:
  1753.             radial-gradient(circle at center, rgba(8, 158, 219, 0.5) 0%, transparent 70%),
  1754.             linear-gradient(45deg, transparent, rgba(143, 104, 200, 0.7), transparent);
  1755.           animation: shimmerMove 2s ease 1 forwards;
  1756.  
  1757.           }
  1758.  
  1759.  
  1760.           @keyframes shimmerMove {
  1761.             0% {
  1762.               background-position: 20% 20%;
  1763.             }
  1764.             50% {
  1765.               background-position: 80% 80%;
  1766.             }
  1767.             100% {
  1768.               background-position: 80% 80%;
  1769.             }
  1770.           }
  1771.  
  1772.           .bubble-sub-button-1,.bubble-sub-button-2,.bubble-sub-button-3,.bubble-sub-button-4
  1773.           {
  1774.             background-color: rgba(0, 0, 5, 0) !important;
  1775.             color: white;
  1776.             transition: 0.3s;
  1777.           }
  1778.  
  1779.           .bubble-sub-button-1:hover,.bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover
  1780.           {
  1781.             opacity: 1;
  1782.             color: white !important;
  1783.             background-color: rgba(102, 102, 102, 0.15) !important;
  1784.             }
  1785.         sub_button:
  1786.           - show_name: false
  1787.             show_state: false
  1788.             show_last_changed: false
  1789.             show_attribute: false
  1790.             attribute: media_series_title
  1791.             show_icon: false
  1792.             show_background: true
  1793.             icon: mdi:update
  1794.             entity: sensor.nas_main_active_clients
  1795.         button_action:
  1796.           tap_action:
  1797.             action: url
  1798.             url_path: http://192.168.1.100:3791
  1799.         show_state: false
  1800.         card_layout: large-2-rows
  1801.         modules:
  1802.          - BBL_SBL
  1803.         rows: "1"
  1804.         grid_options:
  1805.           columns: 3
  1806.           rows: 1
  1807.       - type: custom:bubble-card
  1808.         card_type: separator
  1809.         button_type: state
  1810.         name: " "
  1811.         icon: ""
  1812.         sub_button: []
  1813.         show_name: true
  1814.         show_icon: true
  1815.         scrolling_effect: true
  1816.         card_layout: large-2-rows
  1817.         rows: "0.5"
  1818.         tap_action:
  1819.           action: more-info
  1820.         button_action:
  1821.           tap_action:
  1822.             action: more-info
  1823.         entity: update.plex_media_server
  1824.         show_last_changed: false
  1825.         show_attribute: false
  1826.         force_icon: true
  1827.         modules: []
  1828.         styles: |
  1829.          .bubble-line {
  1830.             background: white;
  1831.             opacity: 0.1;
  1832.           }
  1833.       - type: custom:bubble-card
  1834.         card_type: button
  1835.         button_type: name
  1836.         name: Simkl
  1837.         icon: " "
  1838.         show_name: false
  1839.         force_icon: false
  1840.         show_icon: false
  1841.         show_last_changed: false
  1842.         show_attribute: false
  1843.         attribute: friendly_name
  1844.         tap_action:
  1845.           action: url
  1846.           url_path: https://simkl.com/example/dashboard/
  1847.         styles: |+
  1848.           .bubble-button-card-container {
  1849.             #background: rgba(39, 41, 43, 0.5);
  1850.             background-image: url("https://eu.simkl.in/img_blog_2012/logo.png");
  1851.             background-size: 60%;
  1852.           }
  1853.           .bubble-button-card-container:hover {
  1854.             #opacity: 0.9;
  1855.             #background-color: rgba(231, 231, 232, 0.45) !important;
  1856.           }
  1857.  
  1858.         sub_button: []
  1859.         button_action:
  1860.           tap_action:
  1861.             action: url
  1862.             url_path: https://simkl.com/example/dashboard/
  1863.         show_state: false
  1864.         card_layout: large
  1865.         grid_options:
  1866.           columns: 6
  1867.           rows: 1
  1868.         modules:
  1869.          - BBL_SBL
  1870.           - BBL_SL
  1871.         scrolling_effect: false
  1872.       - type: custom:bubble-card
  1873.         card_type: button
  1874.         button_type: name
  1875.         name: Yamtrack
  1876.         icon: " "
  1877.         show_name: false
  1878.         force_icon: true
  1879.         show_icon: false
  1880.         show_last_changed: false
  1881.         show_attribute: false
  1882.         attribute: friendly_name
  1883.         tap_action:
  1884.           action: more-info
  1885.           url_path: https://example.local234.me
  1886.         styles: |-
  1887.           .bubble-button-card-container {
  1888.             background: rgba(255, 255, 255, 0.2);
  1889.             background-image: url("/local/icons/png/yamtrack.png");
  1890.             #backdrop-filter: blur(20px) saturate(150%);
  1891.             #-webkit-backdrop-filter: blur(20px) saturate(150%);
  1892.             background-size: 135%;
  1893.             background-repeat: no-repeat;
  1894.             background-position: center;
  1895.           }
  1896.            .bubble-button-card-container::before {
  1897.             content: '';
  1898.             position: absolute;
  1899.             top: 0;
  1900.             left: 0;
  1901.             width: 200%;
  1902.             height: 200%;
  1903.             background:
  1904.               radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%),
  1905.               linear-gradient(135deg, transparent, rgba(255,255,255,0.05), transparent);
  1906.             background-size: 200% 200%;
  1907.             opacity: 0;
  1908.             transition: opacity 0.3s ease;
  1909.             pointer-events: none;
  1910.             z-index: 1;
  1911.             }
  1912.  
  1913.             .bubble-button-card-container:hover::before {
  1914.             opacity: 0.3;
  1915.             background:
  1916.               radial-gradient(circle at center, rgba(58, 50, 34, 0.45) 0%, transparent 70%),
  1917.               linear-gradient(15deg, transparent, rgba(138, 62, 229, 0.55), transparent);
  1918.             animation: shimmerMove 2s ease 1 forwards;
  1919.             }
  1920.  
  1921.               @keyframes shimmerMove {
  1922.                 0% {
  1923.                   background-position: 20% 20%;
  1924.                 }
  1925.                 50% {
  1926.                   background-position: 80% 80%;
  1927.                 }
  1928.                 100% {
  1929.                   background-position: 80% 80%;
  1930.                 }
  1931.               }
  1932.         sub_button: []
  1933.         button_action:
  1934.           tap_action:
  1935.             action: url
  1936.             url_path: https://example.local234.me
  1937.         show_state: false
  1938.         card_layout: large
  1939.         grid_options:
  1940.           columns: 6
  1941.           rows: 1
  1942.         modules:
  1943.          - BBL_SBL
  1944.         scrolling_effect: false
  1945.       - type: custom:bubble-card
  1946.         card_type: button
  1947.         button_type: name
  1948.         name: Kavita
  1949.         icon: " "
  1950.         show_name: false
  1951.         force_icon: true
  1952.         show_icon: false
  1953.         show_last_changed: false
  1954.         show_attribute: false
  1955.         attribute: friendly_name
  1956.         tap_action:
  1957.           action: url
  1958.           url_path: https://example.local234.me/home
  1959.         styles: |-
  1960.           .bubble-button-card-container {
  1961.             background: rgba(255, 255, 255, 0.1);
  1962.             background-image: url("/local/icons/png/kavita.png");
  1963.                 #backdrop-filter: blur(20px) saturate(150%);
  1964.             #-webkit-backdrop-filter: blur(20px) saturate(150%);
  1965.             background-size: 135%;
  1966.             background-repeat: no-repeat;
  1967.             background-position: center;
  1968.              }
  1969.            .bubble-button-card-container::before {
  1970.             content: '';
  1971.             position: absolute;
  1972.             top: 0;
  1973.             left: 0;
  1974.             width: 200%;
  1975.             height: 200%;
  1976.             background:
  1977.               radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%),
  1978.               linear-gradient(135deg, transparent, rgba(255,255,255,0.05), transparent);
  1979.             background-size: 200% 200%;
  1980.             opacity: 0;
  1981.             transition: opacity 0.3s ease;
  1982.             pointer-events: none;
  1983.             z-index: 1;
  1984.             }
  1985.  
  1986.             .bubble-button-card-container:hover::before {
  1987.             opacity: 0.3;
  1988.             background:
  1989.               radial-gradient(circle at center, rgba(58, 50, 34, 0.745) 0%, transparent 70%),
  1990.               linear-gradient(15deg, transparent, rgba(80, 161, 91, 0.85), transparent);
  1991.             animation: shimmerMove 2s ease 1 forwards;
  1992.             }
  1993.  
  1994.               @keyframes shimmerMove {
  1995.                 0% {
  1996.                   background-position: 20% 20%;
  1997.                 }
  1998.                 50% {
  1999.                   background-position: 80% 80%;
  2000.                 }
  2001.                 100% {
  2002.                   background-position: 80% 80%;
  2003.                 }
  2004.               }
  2005.         sub_button: []
  2006.         button_action:
  2007.           tap_action:
  2008.             action: url
  2009.             url_path: https://example.local234.me/home
  2010.         show_state: false
  2011.         card_layout: large
  2012.         modules:
  2013.          - BBL_SBL
  2014.         scrolling_effect: false
  2015.         rows: "1"
  2016.         grid_options:
  2017.           columns: 6
  2018.           rows: "1"
  2019.       - type: custom:bubble-card
  2020.         card_type: button
  2021.         button_type: name
  2022.         name: Synclounge
  2023.         icon: " "
  2024.         show_name: false
  2025.         force_icon: true
  2026.         show_icon: false
  2027.         show_last_changed: false
  2028.         show_attribute: false
  2029.         attribute: friendly_name
  2030.         tap_action:
  2031.           url_path: https://example.local234.me
  2032.         styles: |-
  2033.           .bubble-button-card-container {
  2034.             background: rgba(255, 255, 255, 0.2);
  2035.             background-image: url("/local/icons/png/synclounge.png");
  2036.                 #backdrop-filter: blur(20px) saturate(150%);
  2037.                 #-webkit-backdrop-filter: blur(20px) saturate(150%);
  2038.                 background-size: 75%;
  2039.                 background-position: center;
  2040.                 background-repeat: no-repeat;
  2041.                 #border: solid rgba(39, 41, 43, 1) 0px;
  2042.                 position: relative;
  2043.                 overflow: hidden;
  2044.                 z-index: 0;
  2045.               }
  2046.               .bubble-button-card-container::before {
  2047.               content: '';
  2048.               position: absolute;
  2049.               top: 0;
  2050.               left: 0;
  2051.               width: 200%;
  2052.               height: 200%;
  2053.               background:
  2054.                 radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%),
  2055.                 linear-gradient(135deg, transparent, rgba(255,255,255,0.05), transparent);
  2056.               background-size: 200% 200%;
  2057.               opacity: 0;
  2058.               transition: opacity 0.3s ease;
  2059.               pointer-events: none;
  2060.               z-index: 1;
  2061.               }
  2062.               .bubble-button-card-container:hover::before {
  2063.               opacity: 0.3;
  2064.               background:
  2065.                 radial-gradient(circle at center, rgba(58, 50, 34, 0.45) 0%, transparent 70%),
  2066.                 linear-gradient(65deg, transparent, rgba(229, 161, 36, 0.55), transparent);
  2067.               animation: shimmerMove 2s ease 1 forwards;
  2068.               }
  2069.  
  2070.                 @keyframes shimmerMove {
  2071.                   0% {
  2072.                     background-position: 20% 20%;
  2073.                   }
  2074.                   50% {
  2075.                     background-position: 80% 80%;
  2076.                   }
  2077.                   100% {
  2078.                     background-position: 80% 80%;
  2079.                   }
  2080.                 }
  2081.           .bubble-icon-container {
  2082.             background: transparent;
  2083.             padding: 0px;
  2084.             margin: 0px;
  2085.             border-radius: 0px;
  2086.           }
  2087.           .bubble-sub-button-1 {
  2088.             background-color: rgba(32, 29, 31, 0) !important;
  2089.             color: ${['200', '302', '303', '307'].includes(hass.states['sensor.overseer_http_status'].state) ? 'transparent' : 'rgba(255, 0, 0, 0.8)'} !important;
  2090.             padding: 0px;
  2091.             margin: 0px;
  2092.           }
  2093.           .bubble-sub-button-icon {
  2094.             --mdc-icon-size: 18px !important;
  2095.             border-radius: 100%;
  2096.             transform: scale(1);
  2097.             box-shadow: 0 0 0 rgba(0, 0, 0, 1);
  2098.             animation: pulse-animation 5s infinite;
  2099.           }
  2100.           @keyframes pulse-animation {
  2101.             0% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(252, 3, 3, 0); }
  2102.             70% { transform: scale(1); box-shadow: 0 0 0 0.6rem rgba(0, 0, 0, 0); }
  2103.             100% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
  2104.           }
  2105.         sub_button: []
  2106.         button_action:
  2107.           tap_action:
  2108.             action: url
  2109.             url_path: https://example.local234.me
  2110.         show_state: false
  2111.         grid_options:
  2112.           columns: 6
  2113.           rows: 1
  2114.         card_layout: large
  2115.         modules:
  2116.          - BBL_SBL
  2117.         scrolling_effect: false
  2118.       - type: custom:bubble-card
  2119.         card_type: separator
  2120.         button_type: state
  2121.         name: Services
  2122.         icon: mdi:nas
  2123.         sub_button: []
  2124.         show_name: true
  2125.         show_icon: true
  2126.         scrolling_effect: true
  2127.         card_layout: large-2-rows
  2128.         rows: 1
  2129.         tap_action:
  2130.           action: more-info
  2131.         button_action:
  2132.           tap_action:
  2133.             action: more-info
  2134.         entity: update.nas_main_dsm_update
  2135.         show_last_changed: false
  2136.         show_attribute: false
  2137.         force_icon: true
  2138.         styles: |
  2139.          .bubble-line {
  2140.             background: white;
  2141.             opacity: 0.1;
  2142.           }
  2143.       - type: custom:bubble-card
  2144.         card_type: button
  2145.         button_type: name
  2146.         name: qBittorrent
  2147.         icon: phu:qbittorrent
  2148.         show_name: false
  2149.         scrolling_effect: false
  2150.         styles: |2-
  2151.               .bubble-button-card-container {
  2152.                 background-image: url("/local/icons/png/qbittorrent.png");
  2153.                 background-size: 35%;
  2154.                 transition: 0.3s;
  2155.                 background-position-x: 15%;
  2156.                
  2157.                 }
  2158.               .bubble-sub-button-1 {
  2159.                 color: rgba(0, 255, 100, 0.7) !important;
  2160.               }
  2161.               .bubble-sub-button-2 {
  2162.                 color: rgba(255, 0, 0, 0.7) !important;
  2163.               }
  2164.               .bubble-sub-button-1,.bubble-sub-button-2,.bubble-sub-button-3,.bubble-sub-button-4 {
  2165.                 padding: 2px;
  2166.                 background-color: rgba(0, 0, 5, 0) !important;
  2167.                 color: white;
  2168.                 transition: 0.3s;
  2169.               }
  2170.               .bubble-sub-button-1:hover,.bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover {
  2171.                 opacity: 0.75;
  2172.                 color: white !important;
  2173.                 background-color: rgba(102, 102, 102, 0.15) !important;
  2174.                 }
  2175.                       .bubble-button-card-container::before {
  2176.               content: '';
  2177.               position: absolute;
  2178.               top: 0;
  2179.               left: 0;
  2180.               width: 200%;
  2181.               height: 200%;
  2182.               background:
  2183.                 radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%),
  2184.                 linear-gradient(135deg, transparent, rgba(255,255,255,0.05), transparent);
  2185.               background-size: 200% 200%;
  2186.               opacity: 0;
  2187.               transition: opacity 0.3s ease;
  2188.               pointer-events: none;
  2189.               z-index: 1;
  2190.               }
  2191.  
  2192.               .bubble-button-card-container:hover::before {
  2193.               opacity: 0.4;
  2194.               background:
  2195.                 radial-gradient(circle at center, rgba(53, 110, 191, 0.45) 0%, transparent 70%),
  2196.                 linear-gradient(5deg, transparent, rgba(53, 110, 191, 0.45), transparent);
  2197.               animation: shimmerMove 2s ease 1 forwards;
  2198.               }
  2199.  
  2200.                 @keyframes shimmerMove {
  2201.                   0% {
  2202.                     background-position: 20% 20%;
  2203.                   }
  2204.                   50% {
  2205.                     background-position: 80% 80%;
  2206.                   }
  2207.                   100% {
  2208.                     background-position: 80% 80%;
  2209.                   }
  2210.                 }
  2211.         sub_button:
  2212.           - entity: sensor.qbittorrent_download_speed
  2213.             icon: mdi:download
  2214.             show_name: false
  2215.             show_state: true
  2216.             state_background: false
  2217.           - entity: sensor.qbittorrent_upload_speed
  2218.             icon: mdi:upload
  2219.             show_name: false
  2220.             show_state: true
  2221.             show_last_changed: false
  2222.             state_background: false
  2223.           - entity: sensor.qbittorrent_status
  2224.             icon: mdi:list-status
  2225.             show_name: false
  2226.             show_state: true
  2227.             state_background: false
  2228.           - entity: sensor.qbittorrent_all_torrents
  2229.             icon: phu:qbittorrent
  2230.             show_last_changed: false
  2231.             show_state: true
  2232.             show_name: false
  2233.             show_attribute: false
  2234.             show_background: true
  2235.             state_background: false
  2236.             show_icon: false
  2237.         card_layout: large-2-rows
  2238.         modules:
  2239.          - BBL_SBL
  2240.         show_icon: false
  2241.         rows: "2"
  2242.         button_action:
  2243.           tap_action:
  2244.             action: url
  2245.             url_path: http://192.168.1.100:8090
  2246.         grid_options:
  2247.           columns: 6
  2248.           rows: 2
  2249.       - type: custom:bubble-card
  2250.         card_type: button
  2251.         button_type: name
  2252.         name: Sonarr
  2253.         icon: mdi:pirate
  2254.         show_name: false
  2255.         scrolling_effect: false
  2256.         styles: |2-
  2257.               .bubble-button-card-container {
  2258.                  background-image: url("/local/icons/png/sonarr.png");
  2259.                  background-size: 20%;
  2260.                  transition: 0.3s;
  2261.                  background-position-x: 15%;
  2262.                 }
  2263.               .bubble-sub-button-1, .bubble-sub-button-2,  .bubble-sub-button-3,  .bubble-sub-button-4  {
  2264.                 #color: rgba(0, 255, 100, 0.7) !important;
  2265.                 #background-size: 65%;
  2266.                 #background-position-x: center;
  2267.                 #background-position-y: center;
  2268.                 #background-repeat: no-repeat;
  2269.               }
  2270.               .bubble-sub-button-1 {
  2271.                 #background-image: url("/local/icons/png/sonarr.png");
  2272.               }
  2273.               .bubble-sub-button-2 {
  2274.                 #background-image: url("/local/icons/png/radarr.png");
  2275.               }
  2276.               .bubble-sub-button-3 {
  2277.                 #background-image: url("/local/icons/png/lidarr.png");
  2278.               }
  2279.               .bubble-sub-button-4 {
  2280.                 #background-image: url("/local/icons/png/prowlarr.png");
  2281.               }
  2282.               .bubble-sub-button-1,.bubble-sub-button-2,.bubble-sub-button-3,.bubble-sub-button-4 {
  2283.                 padding: 2px;
  2284.                 background-color: rgba(0, 0, 5, 0) !important;
  2285.                 color: white;
  2286.                 transition: 0.3s;
  2287.               }
  2288.               .bubble-sub-button-1:hover,.bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover {
  2289.                 opacity: 0.75;
  2290.                 color: white !important;
  2291.                 background-color: rgba(102, 102, 102, 0.15) !important;
  2292.                 }
  2293.         sub_button:
  2294.           - entity: sensor.sonarr_shows
  2295.             show_name: false
  2296.             show_state: true
  2297.             icon: fas:tv
  2298.           - show_state: true
  2299.             entity: sensor.sonarr_queue
  2300.         card_layout: large-2-rows
  2301.         modules:
  2302.          - BBL_SBL
  2303.         show_icon: false
  2304.         rows: "1"
  2305.         button_action:
  2306.           tap_action:
  2307.             action: url
  2308.             url_path: http://192.168.1.100:8989
  2309.         grid_options:
  2310.           columns: 6
  2311.           rows: 1
  2312.       - type: custom:bubble-card
  2313.         card_type: button
  2314.         button_type: name
  2315.         name: Radarr
  2316.         icon: phu:radarr
  2317.         show_name: false
  2318.         scrolling_effect: false
  2319.         styles: |2-
  2320.               .bubble-button-card-container {
  2321.                  background-image: url("/local/icons/png/radarr.png");
  2322.                  background-size: 20%;
  2323.                  transition: 0.3s;
  2324.                  background-position-x: 16%;
  2325.                 }
  2326.               .bubble-sub-button-1, .bubble-sub-button-2,  .bubble-sub-button-3,  .bubble-sub-button-4  {
  2327.                 #color: rgba(0, 255, 100, 0.7) !important;
  2328.                 #background-size: 65%;
  2329.                 #background-position-x: center;
  2330.                 #background-position-y: center;
  2331.                 #background-repeat: no-repeat;
  2332.               }
  2333.               .bubble-sub-button-1 {
  2334.                 #background-image: url("/local/icons/png/sonarr.png");
  2335.               }
  2336.               .bubble-sub-button-2 {
  2337.                 #background-image: url("/local/icons/png/radarr.png");
  2338.               }
  2339.               .bubble-sub-button-3 {
  2340.                 #background-image: url("/local/icons/png/lidarr.png");
  2341.               }
  2342.               .bubble-sub-button-4 {
  2343.                 #background-image: url("/local/icons/png/prowlarr.png");
  2344.               }
  2345.               .bubble-sub-button-1,.bubble-sub-button-2,.bubble-sub-button-3,.bubble-sub-button-4 {
  2346.                 padding: 2px;
  2347.                 background-color: rgba(0, 0, 5, 0) !important;
  2348.                 color: white;
  2349.                 transition: 0.3s;
  2350.               }
  2351.               .bubble-sub-button-1:hover,.bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover {
  2352.                 opacity: 0.75;
  2353.                 color: white !important;
  2354.                 background-color: rgba(102, 102, 102, 0.15) !important;
  2355.                 }
  2356.         sub_button:
  2357.           - entity: sensor.radarr_movies
  2358.             show_name: false
  2359.             show_state: true
  2360.             icon: mdi:movie-open
  2361.           - show_state: true
  2362.             entity: sensor.radarr_queue
  2363.         card_layout: large-2-rows
  2364.         modules:
  2365.          - BBL_SBL
  2366.         show_icon: false
  2367.         rows: "1"
  2368.         button_action:
  2369.           tap_action:
  2370.             action: url
  2371.             url_path: http://192.168.1.100:7878
  2372.         grid_options:
  2373.           columns: 6
  2374.           rows: 1
  2375.       - type: custom:bubble-card
  2376.         card_type: button
  2377.         button_type: name
  2378.         name: Immich
  2379.         icon: " "
  2380.         show_name: false
  2381.         force_icon: true
  2382.         show_icon: false
  2383.         show_last_changed: false
  2384.         show_attribute: false
  2385.         attribute: friendly_name
  2386.         tap_action:
  2387.           action: url
  2388.           url_path: https://example.local234.me/home
  2389.         styles: |-
  2390.           .bubble-button-card-container {
  2391.             background: rgba(255, 255, 255, 0.1);
  2392.             background-image: url("/local/icons/png/immich.png");
  2393.                 #backdrop-filter: blur(20px) saturate(150%);
  2394.             #-webkit-backdrop-filter: blur(20px) saturate(150%);
  2395.             background-size: 45%;
  2396.             background-repeat: no-repeat;
  2397.             background-position: center;
  2398.              }
  2399.            .bubble-button-card-container::before {
  2400.             content: '';
  2401.             position: absolute;
  2402.             top: 0;
  2403.             left: 0;
  2404.             width: 200%;
  2405.             height: 200%;
  2406.             background:
  2407.               radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%),
  2408.               linear-gradient(135deg, transparent, rgba(255,255,255,0.05), transparent);
  2409.             background-size: 200% 200%;
  2410.             opacity: 0;
  2411.             transition: opacity 0.3s ease;
  2412.             pointer-events: none;
  2413.             z-index: 1;
  2414.             }
  2415.  
  2416.             .bubble-button-card-container:hover::before {
  2417.             opacity: 0.3;
  2418.             background:
  2419.               radial-gradient(circle at center, rgba(58, 50, 34, 0.45) 0%, transparent 70%),
  2420.               linear-gradient(15deg, transparent, rgba(100, 0, 91, 0.55), transparent);
  2421.             animation: shimmerMove 2s ease 1 forwards;
  2422.             }
  2423.  
  2424.               @keyframes shimmerMove {
  2425.                 0% {
  2426.                   background-position: 20% 20%;
  2427.                 }
  2428.                 50% {
  2429.                   background-position: 80% 80%;
  2430.                 }
  2431.                 100% {
  2432.                   background-position: 80% 80%;
  2433.                 }
  2434.               }
  2435.         sub_button: []
  2436.         button_action:
  2437.           tap_action:
  2438.             action: url
  2439.             url_path: https://example.local234.me/
  2440.         show_state: false
  2441.         card_layout: large
  2442.         modules:
  2443.          - BBL_SBL
  2444.         scrolling_effect: false
  2445.         rows: "1"
  2446.         grid_options:
  2447.           columns: 3
  2448.           rows: "1"
  2449.       - type: custom:bubble-card
  2450.         card_type: button
  2451.         button_type: name
  2452.         name: Prowlarr
  2453.         icon: phu:prowlarr
  2454.         show_name: false
  2455.         scrolling_effect: false
  2456.         styles: |2-
  2457.               .bubble-button-card-container {
  2458.                  background-image: url("/local/icons/png/prowlarr.png");
  2459.                  background-size: 40%;
  2460.                  transition: 0.3s;
  2461.                  background-position-x: center;
  2462.                 }      
  2463.         sub_button: []
  2464.         card_layout: large-2-rows
  2465.         modules:
  2466.          - BBL_SBL
  2467.         show_icon: false
  2468.         rows: "1"
  2469.         button_action:
  2470.           tap_action:
  2471.             action: url
  2472.             url_path: http://192.168.1.100:9696
  2473.         grid_options:
  2474.           columns: 3
  2475.           rows: 1
  2476.       - type: custom:bubble-card
  2477.         card_type: button
  2478.         button_type: name
  2479.         name: Music
  2480.         icon: mdi:account-music
  2481.         show_name: false
  2482.         scrolling_effect: false
  2483.         styles: |2-
  2484.               .bubble-button-card-container {
  2485.                  background-image: url("/local/icons/png/navidrome.png");
  2486.                  background-size: 20%;
  2487.                  transition: 0.3s;
  2488.                  background-position-x: 16%;
  2489.                 }
  2490.               .bubble-sub-button-1, .bubble-sub-button-2,  .bubble-sub-button-3,  .bubble-sub-button-4  {
  2491.                 #color: rgba(0, 255, 100, 0.7) !important;
  2492.                 #background-size: 65%;
  2493.                 #background-position-x: center;
  2494.                 #background-position-y: center;
  2495.                 #background-repeat: no-repeat;
  2496.               }
  2497.              .bubble-sub-button-1 {
  2498.                 #background-image: url("/local/icons/png/musichoarders.png");
  2499.                 }
  2500.               .bubble-sub-button-2 {
  2501.                 #background-image: url("/local/icons/png/radarr.png");
  2502.               }
  2503.               .bubble-sub-button-3 {
  2504.                 #background-image: url("/local/icons/png/lidarr.png");
  2505.               }
  2506.               .bubble-sub-button-4 {
  2507.                 #background-image: url("/local/icons/png/prowlarr.png");
  2508.               }
  2509.               .bubble-sub-button-1,.bubble-sub-button-2,.bubble-sub-button-3,.bubble-sub-button-4 {
  2510.                 padding: 2px;
  2511.                 background-color: rgba(0, 0, 5, 0) !important;
  2512.                 color: white;
  2513.                 transition: 0.3s;
  2514.               }
  2515.               .bubble-sub-button-1:hover,.bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover {
  2516.                 opacity: 0.75;
  2517.                 color: white !important;
  2518.                 background-color: rgba(102, 102, 102, 0.15) !important;
  2519.                 }
  2520.         sub_button:
  2521.           - show_name: true
  2522.             show_state: true
  2523.             icon: mdi:music-box-multiple
  2524.             name: "Album Art‎ ‎ ‎ ‎ ‎  "
  2525.             tap_action:
  2526.               action: url
  2527.               url_path: https://covers.musichoarders.xyz
  2528.             show_icon: true
  2529.             show_background: true
  2530.         card_layout: large-2-rows
  2531.         modules:
  2532.          - BBL_SBL
  2533.         show_icon: false
  2534.         rows: "1"
  2535.         button_action:
  2536.           tap_action:
  2537.             action: url
  2538.             url_path: http://192.168.1.100:8338
  2539.         grid_options:
  2540.           columns: 6
  2541.           rows: 1
  2542.       - type: custom:bubble-card
  2543.         card_type: separator
  2544.         button_type: name
  2545.         name: Networking
  2546.         icon: mdi:router-network
  2547.         sub_button: []
  2548.         show_name: true
  2549.         show_icon: true
  2550.         scrolling_effect: true
  2551.         card_layout: large-2-rows
  2552.         styles: |
  2553.          .bubble-line {
  2554.             background: white;
  2555.             opacity: 0.1;
  2556.           }
  2557.         rows: 1
  2558.         tap_action:
  2559.           action: more-info
  2560.         button_action:
  2561.           tap_action:
  2562.             action: more-info
  2563.       - type: custom:bubble-card
  2564.         card_type: button
  2565.         button_type: name
  2566.         name: ""
  2567.         sub_button:
  2568.           - name: NextDNS
  2569.             icon: " "
  2570.             show_name: true
  2571.             tap_action:
  2572.               action: url
  2573.               url_path: https://my.nextdns.io
  2574.             show_icon: true
  2575.           - name: Tailscale
  2576.             icon: " "
  2577.             show_name: true
  2578.             tap_action:
  2579.               action: url
  2580.               url_path: https://login.tailscale.com/admin/dns
  2581.           - name: Cloudflare
  2582.             icon: " "
  2583.             show_name: true
  2584.             tap_action:
  2585.               action: url
  2586.               url_path: https://dash.cloudflare.com
  2587.         card_layout: large
  2588.         styles: |2-
  2589.             .bubble-button-card-container {
  2590.                #background: rgba(39, 41, 43, 0.5);
  2591.                #border: solid rgba(39, 41, 43, 1) 2px;
  2592.                
  2593.                }
  2594.                .bubble-sub-button-1 {
  2595.                 background-image: url("/local/icons/png/nextdns.png");
  2596.                 background-size: cover;
  2597.                 background-size: 25%;
  2598.                  background-position-x: 6%;
  2599.                  background-position-y: center;
  2600.                  background-repeat: no-repeat;
  2601.                 }
  2602.                 .bubble-sub-button-2 {
  2603.                 background-image: url("/local/icons/png/tailscale.png");
  2604.                 background-size: cover;
  2605.                 background-size: 25%;
  2606.                  background-position-x: 6%;
  2607.                  background-position-y: center;
  2608.                  background-repeat: no-repeat;
  2609.  
  2610.                 }
  2611.                 .bubble-sub-button-3 {
  2612.                 background-image: url("/local/icons/png/cloudflare_2.png");
  2613.                 background-size: cover;
  2614.                 background-size: 25%;
  2615.                  background-position-x: 6%;
  2616.                  background-position-y: center;
  2617.                  background-repeat: no-repeat;
  2618.  
  2619.                 }
  2620.         show_icon: true
  2621.         show_name: true
  2622.         icon: mdi:shield-home
  2623.         tap_action:
  2624.           action: none
  2625.         modules:
  2626.          - BBL_SBL
  2627.       - type: custom:bubble-card
  2628.         card_type: button
  2629.         button_type: name
  2630.         name: ""
  2631.         sub_button:
  2632.           - name: Modem
  2633.             icon: " "
  2634.             show_name: true
  2635.             tap_action:
  2636.               action: url
  2637.               url_path: null
  2638.             show_icon: true
  2639.           - name: Mesh
  2640.             icon: " "
  2641.             show_name: false
  2642.             tap_action:
  2643.               action: url
  2644.               url_path: null
  2645.             show_state: false
  2646.             show_icon: true
  2647.           - name: ISP
  2648.             icon: " "
  2649.             show_name: true
  2650.             tap_action:
  2651.               action: url
  2652.               url_path: null
  2653.           - name: " "
  2654.             show_name: true
  2655.             icon: ""
  2656.             show_icon: false
  2657.             tap_action:
  2658.               action: url
  2659.               url_path: https://speed.cloudflare.com/
  2660.           - icon: mdi:vpn
  2661.             show_name: false
  2662.             entity: input_boolean.toggle_network_stats
  2663.             tap_action:
  2664.               action: toggle
  2665.             show_state: false
  2666.             state_background: false
  2667.             show_background: true
  2668.         card_layout: large
  2669.         styles: |2-
  2670.             .bubble-button-card-container {
  2671.                #background: rgba(39, 41, 43, 0.5);
  2672.                #border: solid rgba(39, 41, 43, 1) 2px;
  2673.                
  2674.                }
  2675.                .bubble-sub-button-1 {
  2676.                 background-image: url("/local/icons/png/router.png");
  2677.                 background-size: cover;
  2678.                 background-size: 25%;
  2679.                  background-position-x: 6%;
  2680.                  background-position-y: center;
  2681.                  background-repeat: no-repeat;
  2682.                 }
  2683.                 .bubble-sub-button-2 {
  2684.                 background-image: url("/local/icons/png/netbox.png");
  2685.                 background-size: cover;
  2686.                 background-size: 60%;
  2687.                  background-position-x: center;
  2688.                  background-position-y: center;
  2689.                  background-repeat: no-repeat;
  2690.  
  2691.                 }
  2692.                 .bubble-sub-button-3 {
  2693.                 background-image: url("/local/icons/png/singtel.png");
  2694.                 background-size: cover;
  2695.                 background-size: 35%;
  2696.                  background-position-x: 16%;
  2697.                  background-position-y: center;
  2698.                  background-repeat: no-repeat;
  2699.  
  2700.                 }
  2701.                 .bubble-sub-button-4 {
  2702.                 background-image: url("https://cdn-1.webcatalog.io/catalog/speedtest/speedtest-icon.png");
  2703.                 background-size: cover;
  2704.                 background-size: 85%;
  2705.                  background-position-x: center;
  2706.                  background-position-y: center;
  2707.                  background-repeat: no-repeat;
  2708.  
  2709.                 }
  2710.         show_icon: true
  2711.         show_name: true
  2712.         icon: mdi:network-pos
  2713.         tap_action:
  2714.           action: url
  2715.           url_path: https://ipinfo.io/dashboard
  2716.         modules:
  2717.          - BBL_SBL
  2718.     visibility:
  2719.       - condition: state
  2720.         entity: input_boolean.toggle_sections
  2721.         state: "on"
  2722.   - type: grid
  2723.     cards:
  2724.       - type: custom:bubble-card
  2725.         card_type: separator
  2726.         button_type: name
  2727.         name: NAS
  2728.         icon: phu:synology-dsm
  2729.         show_name: true
  2730.         scrolling_effect: false
  2731.         sub_button: []
  2732.         card_layout: large-2-rows
  2733.         rows: "1"
  2734.         styles: |-
  2735.           .bubble-line {
  2736.             background: white;
  2737.             opacity: 0.1;
  2738.           }
  2739.       - type: custom:bubble-card
  2740.         card_type: button
  2741.         button_type: name
  2742.         name: Synology
  2743.         icon: null
  2744.         show_name: false
  2745.         scrolling_effect: false
  2746.         styles: |2-
  2747.               .bubble-button-card-container {
  2748.                 background: rgba(255,255,255, 0.1);
  2749.                 background-image: url("/local/icons/png/synology_v2.png");
  2750.                 background-repeat: no-repeat;
  2751.                 background-size: 25%;
  2752.                 transition: 0.3s;
  2753.                 background-position-x: 10%;
  2754.                 background-position-y: 50%;
  2755.                
  2756.                 }
  2757.               .bubble-sub-button-1,.bubble-sub-button-2,.bubble-sub-button-3,.bubble-sub-button-4,.bubble-sub-button-5, .bubble-sub-button-6 {
  2758.                 padding: 2px;
  2759.                 background-color: rgba(0, 0, 5, 0) !important;
  2760.                 color: white;
  2761.                 transition: 0.3s;
  2762.               }
  2763.               .bubble-sub-button-1:hover,.bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover {
  2764.                 opacity: 0.75;
  2765.                 color: white !important;
  2766.                 background-color: rgba(102, 102, 102, 0.15) !important;
  2767.                 }
  2768.               .bubble-sub-button-5 {
  2769.                 color: rgba(0, 255, 100, 0.7) !important;
  2770.               }
  2771.               .bubble-sub-button-6 {
  2772.                 color: rgba(255, 0, 0, 0.7) !important;
  2773.               }
  2774.         sub_button:
  2775.           - entity: sensor.nas_main_temperature
  2776.             show_state: true
  2777.             show_name: false
  2778.             name: Temp
  2779.             icon: mdi:thermometer
  2780.             state_background: false
  2781.             show_background: true
  2782.           - entity: sensor.nas_main_cpu_utilization_total
  2783.             show_state: true
  2784.             show_name: false
  2785.             icon: mdi:chip
  2786.             name: CPU Utilization
  2787.             state_background: false
  2788.           - entity: sensor.nas_main_memory_usage_real
  2789.             show_state: true
  2790.             show_name: false
  2791.             icon: mdi:memory
  2792.             name: Memory Usage Real
  2793.             state_background: false
  2794.           - entity: binary_sensor.nas_main_security_status
  2795.             show_state: true
  2796.             show_name: false
  2797.             icon: mdi:security
  2798.             name: Security Status
  2799.             state_background: false
  2800.           - entity: sensor.nas_main_download_throughput
  2801.             show_name: false
  2802.             state_background: false
  2803.             show_background: true
  2804.             show_state: true
  2805.             name: download
  2806.             icon: mdi:download
  2807.           - entity: sensor.nas_main_upload_throughput
  2808.             show_name: false
  2809.             state_background: false
  2810.             show_background: true
  2811.             show_state: true
  2812.             name: Upload
  2813.             icon: mdi:upload
  2814.         card_layout: large-2-rows
  2815.         modules:
  2816.          - BBL_SBL
  2817.         show_icon: false
  2818.         rows: "2"
  2819.         button_action:
  2820.           tap_action:
  2821.             action: url
  2822.             url_path: https://example.local234.me
  2823.         grid_options:
  2824.           columns: 12
  2825.           rows: 1
  2826.       - type: custom:bubble-card
  2827.         card_type: button
  2828.         button_type: name
  2829.         name: Portainer
  2830.         icon: mdi:pirate
  2831.         show_name: false
  2832.         scrolling_effect: false
  2833.         styles: |2-
  2834.               .bubble-button-card-container {
  2835.                  background-image: url("/local/icons/svg/portainer_1.svg");
  2836.                  background-size: 30%;
  2837.                  transition: 0.3s;
  2838.                  background-position-x: 12%;
  2839.                  
  2840.                 }
  2841.               .bubble-sub-button-1, .bubble-sub-button-2,  .bubble-sub-button-3,  .bubble-sub-button-4  {
  2842.                 color: rgba(0, 255, 100, 0.7) !important;
  2843.                 background-size: 65%;
  2844.                 background-position-x: center;
  2845.                 background-position-y: center;
  2846.                 background-repeat: no-repeat;
  2847.               }
  2848.               .bubble-sub-button-1 {
  2849.                 background-image: url("https://cdn.jsdelivr.net/gh/selfhst/icons/png/grafana.png");
  2850.               }
  2851.               .bubble-sub-button-2 {
  2852.                 background-image: url("/local/icons/png/scrutiny.png");
  2853.               }
  2854.               .bubble-sub-button-3 {
  2855.                 background-image: url("/local/icons/png/uptimekuma.png");
  2856.               }
  2857.               .bubble-sub-button-1,.bubble-sub-button-2,.bubble-sub-button-3,.bubble-sub-button-4 {
  2858.                 padding: 2px;
  2859.                 background-color: rgba(0, 0, 5, 0) !important;
  2860.                 color: white;
  2861.                 transition: 0.3s;
  2862.               }
  2863.               .bubble-sub-button-1:hover,.bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover {
  2864.                 opacity: 0.75;
  2865.                 color: white !important;
  2866.                 background-color: rgba(102, 102, 102, 0.15) !important;
  2867.                 }
  2868.         sub_button:
  2869.           - tap_action:
  2870.               action: url
  2871.               url_path: http://192.168.1.100:3340
  2872.             name: " "
  2873.             icon: ""
  2874.             show_name: false
  2875.             show_icon: true
  2876.           - icon: phu:radarr
  2877.             show_name: true
  2878.             show_state: false
  2879.             state_background: false
  2880.             show_icon: false
  2881.             name: " "
  2882.             show_background: true
  2883.             show_attribute: false
  2884.             show_last_changed: false
  2885.             show_last_updated: false
  2886.             tap_action:
  2887.               action: url
  2888.               url_path: http://192.168.1.100:6090/web/
  2889.           - icon: mdi:bulkhead-light
  2890.             show_name: true
  2891.             show_state: false
  2892.             show_last_changed: false
  2893.             state_background: false
  2894.             name: " "
  2895.             show_icon: false
  2896.             tap_action:
  2897.               action: url
  2898.               url_path: http://192.168.1.100:3444
  2899.         card_layout: large-sub-buttons-grid
  2900.         modules:
  2901.          - BBL_SBL
  2902.         show_icon: false
  2903.         rows: "2"
  2904.         button_action:
  2905.           tap_action:
  2906.             action: url
  2907.             url_path: http://192.168.1.100:9000
  2908.         grid_options:
  2909.           columns: 12
  2910.           rows: 1
  2911.       - type: custom:bubble-card
  2912.         card_type: button
  2913.         button_type: name
  2914.         name: Memory
  2915.         icon: mdi:memory
  2916.         show_name: true
  2917.         scrolling_effect: false
  2918.         styles: |2-
  2919.               .bubble-button-card-container {
  2920.                 #background: rgba(39, 41, 43, 0.1);
  2921.                 transition: 0.3s;
  2922.                 }
  2923.               .bubble-button-card-container:hover {
  2924.                 opacity: 0.75;
  2925.                 background-color: rgba(45, 170, 171, 0.75) !important;
  2926.                 }
  2927.               .bubble-icon {
  2928.                 --mdc-icon-size: 25px !important;
  2929.                 color: white !important;
  2930.  
  2931.               }
  2932.               .bubble-sub-button-1 {
  2933.                 padding: 2px;
  2934.                 font-size: 12px;
  2935.                 background-color: rgba(0, 0, 5, 0.1) !important;
  2936.                 color: white;
  2937.               }
  2938.               .bubble-sub-button-2 {
  2939.                 padding: 2px;
  2940.                 font-size: 12px;
  2941.                 background-color: rgba(0, 0, 5, 0.1) !important;
  2942.                 color: white;
  2943.               }
  2944.               .bubble-sub-button-3 {
  2945.                 padding: 2px;
  2946.                 font-size: 12px;
  2947.                 background-color: rgba(0, 0, 5, 0.1) !important;
  2948.                 color: white;
  2949.               }
  2950.               .bubble-sub-button-4 {
  2951.                 padding: 2px;
  2952.                 font-size: 12px;
  2953.                 background-color: rgba(0, 0, 5, 0.1) !important;
  2954.                 color: white;
  2955.               }
  2956.         sub_button:
  2957.           - entity: sensor.nas_main_memory_usage_real
  2958.             show_state: true
  2959.             show_name: false
  2960.             name: Memory Usage
  2961.             icon: mdi:memory-arrow-down
  2962.           - entity: sensor.nas_main_memory_total_real
  2963.             show_state: true
  2964.             show_name: false
  2965.             icon: mdi:gauge-full
  2966.             name: Memory Total Real
  2967.           - entity: sensor.nas_main_memory_available_swap
  2968.             show_state: true
  2969.             show_name: false
  2970.             icon: mdi:crop-free
  2971.             name: Memory Avail Swap
  2972.           - entity: sensor.nas_main_memory_cached
  2973.             show_state: true
  2974.             show_name: false
  2975.             icon: mdi:fullscreen-exit
  2976.             name: Memory Cached
  2977.         card_layout: large-2-rows
  2978.         tap_action:
  2979.           action: none
  2980.         modules:
  2981.          - BBL_SBL
  2982.         rows: "1"
  2983.       - type: custom:bubble-card
  2984.         card_type: separator
  2985.         button_type: state
  2986.         name: " "
  2987.         icon: ""
  2988.         sub_button: []
  2989.         show_name: true
  2990.         show_icon: true
  2991.         scrolling_effect: true
  2992.         card_layout: large-2-rows
  2993.         rows: "0.5"
  2994.         tap_action:
  2995.           action: more-info
  2996.         button_action:
  2997.           tap_action:
  2998.             action: more-info
  2999.         entity: update.plex_media_server
  3000.         show_last_changed: false
  3001.         show_attribute: false
  3002.         force_icon: true
  3003.         modules: []
  3004.         styles: |
  3005.          .bubble-line {
  3006.             background: white;
  3007.             opacity: 0.1;
  3008.           }
  3009.       - graph: line
  3010.         type: sensor
  3011.         entity: sensor.nas_main_volume_1_used_space
  3012.         name: V1 Used
  3013.         detail: 2
  3014.         theme: Graphite
  3015.         card_mod:
  3016.           style: |
  3017.            ha-card {
  3018.               color: white;
  3019.               background: rgba(255, 255, 255, 0.1) !important;
  3020.               margin: 0%;
  3021.               border-radius:8px;
  3022.               #border: solid rgba(39, 41, 43, 1) 2px;
  3023.               box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  3024.               #backdrop-filter: blur(20px) saturate(150%);
  3025.               #-webkit-backdrop-filter: blur(20px) saturate(150%);
  3026.             }
  3027.             ha-card .name {
  3028.               color: white !important;       /* Sensor name */
  3029.             }
  3030.             ha-card .measurement {
  3031.               color: white !important;       /* Sensor name */
  3032.             }
  3033.         grid_options:
  3034.           columns: 6
  3035.           rows: 2
  3036.       - graph: line
  3037.         type: sensor
  3038.         entity: sensor.system_monitor_disk_free
  3039.         name: V1 Avail.
  3040.         detail: 2
  3041.         layout_options:
  3042.           grid_columns: 1
  3043.           grid_rows: 1
  3044.         theme: Graphite
  3045.         card_mod:
  3046.           style: |
  3047.            ha-card {
  3048.               color: white;
  3049.               background: rgba(255, 255, 255, 0.1) !important;
  3050.               margin: 0%;
  3051.               border-radius:8px;
  3052.               #border: solid rgba(39, 41, 43, 1) 2px;
  3053.               box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  3054.               #backdrop-filter: blur(20px) saturate(150%);
  3055.               #-webkit-backdrop-filter: blur(20px) saturate(150%);
  3056.             }
  3057.             ha-card .name {
  3058.               color: white !important;       /* Sensor name */
  3059.             }
  3060.             ha-card .measurement {
  3061.               color: white !important;       /* Sensor name */
  3062.             }
  3063.       - type: custom:bubble-card
  3064.         card_type: button
  3065.         button_type: name
  3066.         name: Volume 1
  3067.         icon: mdi:fridge-industrial
  3068.         show_name: true
  3069.         scrolling_effect: false
  3070.         styles: |2-
  3071.                
  3072.               .bubble-button-card-container {
  3073.                 background: rgba(255, 255, 255, 0.2) !important;
  3074.                 transition: 0.3s;
  3075.                 border-radius: 0px;
  3076.                 }
  3077.  
  3078.               .bubble-button-card-container:hover {
  3079.                 opacity: 0.75;
  3080.                 #background-color: rgba(45, 170, 171, 0.75) !important;
  3081.                 }
  3082.               .bubble-icon {
  3083.                 --mdc-icon-size: 25px !important;
  3084.                 color: white !important;
  3085.               }
  3086.               .bubble-sub-button-1 {
  3087.                 background-color: rgba(0, 0, 5, 0.1) !important;
  3088.                 color: white;
  3089.               }
  3090.               .bubble-sub-button-2 {
  3091.                 background-color: rgba(0, 0, 5, 0.1) !important;
  3092.                 color: white;
  3093.               }
  3094.         sub_button:
  3095.           - entity: sensor.nas_main_volume_1_volume_used
  3096.             show_state: true
  3097.             show_name: false
  3098.             name: Volume 1 Used
  3099.             icon: mdi:database
  3100.           - entity: sensor.nas_main_volume_1_status
  3101.             show_state: true
  3102.             show_name: false
  3103.             icon: mdi:check-circle-outline
  3104.             name: Volume 1 Status
  3105.         card_layout: large
  3106.         tap_action:
  3107.           action: none
  3108.         modules:
  3109.          - BBL_SBL
  3110.         rows: "0.8"
  3111.       - type: custom:bubble-card
  3112.         card_type: button
  3113.         button_type: name
  3114.         name: Drive 1
  3115.         icon: mdi:harddisk
  3116.         show_name: true
  3117.         scrolling_effect: false
  3118.         styles: |2-
  3119.               .bubble-button-card-container {
  3120.                 background: transparent;
  3121.                 backdrop-filter: none;
  3122.                 border: none;
  3123.                 box-shadow: none;
  3124.                 #border-bottom: solid 1px rgba(255,255,255,0.2);
  3125.                 outline: 1px solid rgba(255,255,255,0.1) !important;
  3126.                
  3127.                 }
  3128.               * {
  3129.                 font-size: 98% !important;
  3130.                 #border-radius: 0px !important;
  3131.                 }
  3132.               .bubble-button-card-container {
  3133.                 #background: rgba(39, 41, 43, 0.8) !important;
  3134.                 transition: 0.3s;
  3135.                 #height: 35px !important;
  3136.                 }
  3137.               .bubble-icon {
  3138.                 --mdc-icon-size: 25px !important;
  3139.                 color: white !important;
  3140.               }
  3141.               .bubble-sub-button-icon {
  3142.                 --mdc-icon-size: 15px !important;
  3143.                 color: white !important;
  3144.                
  3145.               }
  3146.               .bubble-sub-button-1,.bubble-sub-button-2,.bubble-sub-button-3,.bubble-sub-button-4 {
  3147.                 padding: 2px;
  3148.                 background-color: rgba(0, 0, 5, 0) !important;
  3149.                 color: white;
  3150.                 transition: 0.3s;
  3151.               }
  3152.               .bubble-sub-button-1:hover,.bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover {
  3153.                 opacity: 0.75;
  3154.                 color: white !important;
  3155.                 background-color: rgba(102, 102, 102, 0.15) !important;
  3156.                 }
  3157.         sub_button:
  3158.           - entity: sensor.nas_main_drive_1_temperature
  3159.             show_state: true
  3160.             show_name: false
  3161.             name: Drive Temp
  3162.           - entity: binary_sensor.nas_main_drive_1_below_min_remaining_life
  3163.             show_state: true
  3164.             show_name: false
  3165.             icon: mdi:medication
  3166.             name: Drive Below Remain Life
  3167.           - entity: binary_sensor.nas_main_drive_1_exceeded_max_bad_sectors
  3168.             show_state: true
  3169.             show_name: false
  3170.             icon: mdi:cone
  3171.             name: Drive Exceeded Bad Sectors
  3172.           - entity: sensor.nas_main_drive_1_status_smart
  3173.             show_state: true
  3174.             show_name: false
  3175.             icon: mdi:harddisk-plus
  3176.             name: SMART Status
  3177.         card_layout: large
  3178.         modules:
  3179.          - BBL_SBL
  3180.         show_icon: false
  3181.         rows: "0.5"
  3182.       - type: custom:bubble-card
  3183.         card_type: button
  3184.         button_type: name
  3185.         name: Drive 2
  3186.         icon: mdi:harddisk
  3187.         show_name: true
  3188.         scrolling_effect: false
  3189.         styles: |2-
  3190.               .bubble-button-card-container {
  3191.                   background: transparent;
  3192.                   backdrop-filter: none;
  3193.                   border: none;
  3194.                   box-shadow: none;
  3195.                   #border-bottom: solid 1px rgba(255,255,255,0.2);
  3196.                   outline: 1px solid rgba(255,255,255,0.1) !important;
  3197.               }
  3198.               * {
  3199.                 font-size: 98% !important;
  3200.                 #border-radius: 0px !important;
  3201.                 }
  3202.               .bubble-button-card-container {
  3203.                 #background: rgba(39, 41, 43, 0.8) !important;
  3204.                 transition: 0.3s;
  3205.                 #height: 35px !important;
  3206.                 }
  3207.               .bubble-icon {
  3208.                 --mdc-icon-size: 25px !important;
  3209.                 color: white !important;
  3210.               }
  3211.               .bubble-sub-button-icon {
  3212.                 --mdc-icon-size: 15px !important;
  3213.                 color: white !important;
  3214.                
  3215.               }
  3216.               .bubble-sub-button-1,.bubble-sub-button-2,.bubble-sub-button-3,.bubble-sub-button-4 {
  3217.                 padding: 2px;
  3218.                 background-color: rgba(0, 0, 5, 0) !important;
  3219.                 color: white;
  3220.                 transition: 0.3s;
  3221.               }
  3222.               .bubble-sub-button-1:hover,.bubble-sub-button-2:hover,.bubble-sub-button-3:hover,.bubble-sub-button-4:hover {
  3223.                 opacity: 0.75;
  3224.                 color: white !important;
  3225.                 background-color: rgba(102, 102, 102, 0.15) !important;
  3226.                 }
  3227.         sub_button:
  3228.           - entity: sensor.nas_main_drive_2_temperature
  3229.             show_state: true
  3230.             show_name: false
  3231.             name: Drive Temp
  3232.           - entity: binary_sensor.nas_main_drive_2_below_min_remaining_life
  3233.             show_state: true
  3234.             show_name: false
  3235.             icon: mdi:medication
  3236.             name: Drive Below Remain Life
  3237.           - entity: binary_sensor.nas_main_drive_2_exceeded_max_bad_sectors
  3238.             show_state: true
  3239.             show_name: false
  3240.             icon: mdi:cone
  3241.             name: Drive Exceeded Bad Sectors
  3242.           - entity: sensor.nas_main_drive_2_status_smart
  3243.             show_state: true
  3244.             show_name: false
  3245.             icon: mdi:harddisk-plus
  3246.             name: SMART Status
  3247.         card_layout: large
  3248.         modules:
  3249.          - BBL_SBL
  3250.         show_icon: false
  3251.         rows: "0.5"
  3252.       - type: custom:bubble-card
  3253.         card_type: button
  3254.         button_type: name
  3255.         name: SSD
  3256.         icon: mdi:google-drive
  3257.         show_name: true
  3258.         scrolling_effect: false
  3259.         styles: |2-
  3260.                
  3261.               .bubble-button-card-container {
  3262.                 background: rgba(255, 255, 255, 0.2) !important;
  3263.                 transition: 0.3s;
  3264.                 border-radius: 0px;
  3265.                 }
  3266.  
  3267.               .bubble-button-card-container:hover {
  3268.                 opacity: 0.75;
  3269.                 #background-color: rgba(45, 170, 171, 0.75) !important;
  3270.                 }
  3271.               .bubble-icon {
  3272.                 --mdc-icon-size: 25px !important;
  3273.                 color: white !important;
  3274.               }
  3275.               .bubble-sub-button-1 {
  3276.                 background-color: rgba(0, 0, 5, 0.1) !important;
  3277.                 color: white;
  3278.               }
  3279.               .bubble-sub-button-2 {
  3280.                 background-color: rgba(0, 0, 5, 0.1) !important;
  3281.                 color: white;
  3282.               }
  3283.               .bubble-sub-button-3 {
  3284.                 background-color: rgba(0, 0, 5, 0.1) !important;
  3285.                 color: white;
  3286.               }
  3287.         sub_button:
  3288.           - entity: sensor.nas_main_usb_disk_1_partition_1_partition_used
  3289.             show_state: true
  3290.             show_name: false
  3291.             name: Volume UBS1 Used
  3292.             icon: mdi:database
  3293.           - entity: sensor.nas_main_usb_disk_1_status
  3294.             show_state: true
  3295.             show_name: false
  3296.             icon: mdi:check-circle-outline
  3297.             name: Volume UBS1 Status
  3298.         card_layout: large
  3299.         tap_action:
  3300.           action: none
  3301.         modules:
  3302.          - BBL_SBL
  3303.         rows: "0.8"
  3304.         button_action: {}
  3305.       - type: custom:bubble-card
  3306.         card_type: separator
  3307.         name: Power Draw
  3308.         icon: mdi:lightning-bolt
  3309.         sub_button: []
  3310.         card_layout: large
  3311.         styles: |
  3312.          .bubble-line {
  3313.             background: white;
  3314.             opacity: 0.1;
  3315.           }
  3316.       - type: vertical-stack
  3317.         cards:
  3318.           - type: custom:bubble-card
  3319.             card_type: button
  3320.             button_type: state
  3321.             entity: sensor.nas_current_consumption
  3322.             card_layout: large-2-rows
  3323.             name: NAS Power
  3324.             icon: mdi:flash
  3325.             show_icon: false
  3326.             show_state: true
  3327.             show_name: true
  3328.             grid_options:
  3329.               columns: 4
  3330.             rows: "0.7"
  3331.             styles: |-
  3332.               .bubble-button-card-container {
  3333.                  border-radius: 8px 8px 0 0 !important;
  3334.                  }
  3335.             card_mod:
  3336.               style: >-
  3337.                 {% set val = states('sensor.nas_current_consumption') | float(0)
  3338.                 %}
  3339.  
  3340.                 {% set pct = (val / 50 * 100) | round(1) %}
  3341.  
  3342.  
  3343.                 {% if val < 10 %}
  3344.                   {% set bg = '#2196f399' %}  {# blue, 80% opacity #}
  3345.                 {% elif val < 40 %}
  3346.                   {% set bg = '#5C793399' %}  {# green, 80% opacity #}
  3347.                 {% elif val < 45 %}
  3348.                   {% set bg = '#ffeb3b99' %}  {# yellow, 80% opacity #}
  3349.                 {% else %}
  3350.                   {% set bg = '#f4433699' %}  {# red, 80% opacity #}
  3351.                 {% endif %}
  3352.  
  3353.  
  3354.                 {% set r = (bg[1:3] | int(base=16)) / 255 %}
  3355.  
  3356.                 {% set g = (bg[3:5] | int(base=16)) / 255 %}
  3357.  
  3358.                 {% set b = (bg[5:7] | int(base=16)) / 255 %}
  3359.  
  3360.                 {% set luminance = 0.299 * r + 0.587 * g + 0.114 * b %}
  3361.  
  3362.  
  3363.                 .bubble-button-card-container {
  3364.                   background: linear-gradient(
  3365.                     to right,
  3366.                     {{ bg }} {{ pct }}%,
  3367.                     rgba(255, 255, 255, 0.05) {{ pct }}%
  3368.                   ) !important;
  3369.  
  3370.                   color: {% if luminance > 0.5 %}
  3371.                     rgb(0, 0, 0);
  3372.                   {% else %}
  3373.                     rgb(255, 255, 255);
  3374.                   {% endif %};
  3375.  
  3376.                   #backdrop-filter: blur(20px) saturate(150%);
  3377.                   #-webkit-backdrop-filter: blur(20px) saturate(150%);
  3378.                   border: none !important;
  3379.                   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  3380.                   position: relative;
  3381.                   overflow: hidden;
  3382.                 }
  3383.           - type: custom:mini-graph-card
  3384.             entities:
  3385.               - entity: sensor.nas_current_consumption
  3386.             name: NAS (Now)
  3387.             icon: mdi:server
  3388.             align_icon: left
  3389.             align_state: left
  3390.             unit: W
  3391.             font_size: 66
  3392.             font_size_header: 10
  3393.             show:
  3394.               labels: false
  3395.               name: false
  3396.               icon: false
  3397.               legend: false
  3398.               average: false
  3399.               extrema: false
  3400.             action: more-info
  3401.             hours_to_show: 3
  3402.             line_width: 3
  3403.             points_per_hour: 70
  3404.             color_thresholds:
  3405.               - value: 45
  3406.                 color: "#f44336"
  3407.               - value: 40
  3408.                 color: "#ffeb3b"
  3409.               - value: 35
  3410.                 color: "#5C7933"
  3411.               - value: 0
  3412.                 color: "#2196f3"
  3413.             height: 200
  3414.             grid_options:
  3415.               rows: null
  3416.               columns: 4
  3417.             card_mod:
  3418.               style: |-
  3419.                 .states.flex {
  3420.                    display: none;
  3421.                    position: absolute;
  3422.                    
  3423.                 }
  3424.                 .states.flex .state .state__value.ellipsis {
  3425.                   font-size: 1.4em;
  3426.                   align-self: center;
  3427.                 }
  3428.                 .graph .graph__container .graph__labels.--primary.flex {
  3429.                   color: rgba(78, 255, 0,0.6);
  3430.                 }
  3431.                 .graph .graph__legend div:nth-child(1) {
  3432.                     color: rgba(78, 255, 0,0.6);
  3433.                 }
  3434.                 .graph .graph__legend div:nth-child(2) {
  3435.                     color: #AB83FB;
  3436.                 }
  3437.                 .states.flex > .state .state__value.ellipsis::before {
  3438.                 content: "NAS";
  3439.                 color: rgba(78, 255, 0,0.6);
  3440.                 }
  3441.                 ha-card {
  3442.                 padding: 0px !important;
  3443.                 margin-top: -5%;
  3444.                 background: rgba(39, 41, 43, 0.5) !important;
  3445.                 #background: rgba(255, 255, 255, 0.1) !important;
  3446.                 backdrop-filter: blur(20px) saturate(150%) !important;
  3447.                 #-webkit-backdrop-filter: blur(20px) saturate(150%);
  3448.                 border: none;
  3449.                 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  3450.                 }
  3451.                 *{
  3452.                 border-radius: 0 0 8px 8px !important;
  3453.                 }
  3454.         grid_options:
  3455.           columns: 4
  3456.       - type: vertical-stack
  3457.         cards:
  3458.           - type: custom:bubble-card
  3459.             card_type: button
  3460.             button_type: state
  3461.             entity: sensor.misc_hub_current_consumption
  3462.             card_layout: large-2-rows
  3463.             name: PC Hub
  3464.             icon: mdi:flash
  3465.             show_icon: false
  3466.             show_state: true
  3467.             show_name: true
  3468.             rows: "0.7"
  3469.             grid_options:
  3470.               columns: 4
  3471.             styles: |-
  3472.               .bubble-button-card-container {
  3473.                  border-radius: 8px 8px 0 0 !important;
  3474.                  }
  3475.             card_mod:
  3476.               style: >-
  3477.                 {% set val = states('sensor.misc_hub_current_consumption') |
  3478.                float(0) %}
  3479.  
  3480.                 {% set pct = (val / 650 * 100) | round(1) %}
  3481.  
  3482.  
  3483.                 {% if val < 150 %}
  3484.                   {% set bg = '#2196f399' %}  {# blue, 80% opacity #}
  3485.                 {% elif val < 450 %}
  3486.                   {% set bg = '#5C793399' %}  {# green, 80% opacity #}
  3487.                 {% elif val < 550 %}
  3488.                   {% set bg = '#ffeb3b99' %}  {# yellow, 80% opacity #}
  3489.                 {% else %}
  3490.                   {% set bg = '#f4433699' %}  {# red, 80% opacity #}
  3491.                 {% endif %}
  3492.  
  3493.  
  3494.                 {% set r = (bg[1:3] | int(base=16)) / 255 %}
  3495.  
  3496.                 {% set g = (bg[3:5] | int(base=16)) / 255 %}
  3497.  
  3498.                 {% set b = (bg[5:7] | int(base=16)) / 255 %}
  3499.  
  3500.                 {% set luminance = 0.299 * r + 0.587 * g + 0.114 * b %}
  3501.  
  3502.  
  3503.                 .bubble-button-card-container {
  3504.                   background: linear-gradient(
  3505.                     to right,
  3506.                     {{ bg }} {{ pct }}%,
  3507.                     rgba(255, 255, 255, 0.1) {{ pct }}%
  3508.                   ) !important;
  3509.  
  3510.                   color: {% if luminance > 0.5 %}
  3511.                     rgb(0, 0, 0);
  3512.                   {% else %}
  3513.                     rgb(255, 255, 255);
  3514.                   {% endif %};
  3515.                  
  3516.                   #border: solid rgba(39, 41, 43, 1) 2px;
  3517.                 }
  3518.                  .bubble-button-card-container{
  3519.                   background: rgba(255, 255, 255, 0.1);
  3520.                   border-radius: 8px !impotant;
  3521.                   #backdrop-filter: blur(20px) saturate(150%);
  3522.                   #-webkit-backdrop-filter: blur(20px) saturate(150%);
  3523.                   border: none;
  3524.                   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  3525.                   position: relative;
  3526.                   overflow: hidden;
  3527.                  
  3528.                   }
  3529.           - type: custom:mini-graph-card
  3530.             entities:
  3531.               - entity: sensor.misc_hub_current_consumption
  3532.             name: NAS (Now)
  3533.             icon: mdi:server
  3534.             align_icon: left
  3535.             align_state: left
  3536.             unit: W
  3537.             font_size: 66
  3538.             font_size_header: 10
  3539.             show:
  3540.               labels: false
  3541.               name: false
  3542.               icon: false
  3543.               legend: false
  3544.               average: false
  3545.               extrema: false
  3546.             action: more-info
  3547.             hours_to_show: 3
  3548.             line_width: 3
  3549.             points_per_hour: 70
  3550.             color_thresholds:
  3551.               - value: 650
  3552.                 color: "#f44336"
  3553.               - value: 450
  3554.                 color: "#ffeb3b"
  3555.               - value: 250
  3556.                 color: "#5C7933"
  3557.               - value: 0
  3558.                 color: "#2196f3"
  3559.             height: 200
  3560.             grid_options:
  3561.               rows: null
  3562.               columns: 4
  3563.             card_mod:
  3564.               style: |
  3565.                .states.flex {
  3566.                    display: none;
  3567.                    position: absolute;
  3568.                    
  3569.                 }
  3570.                 .states.flex .state .state__value.ellipsis {
  3571.                   font-size: 1.4em;
  3572.                   align-self: center;
  3573.                 }
  3574.                 .graph .graph__container .graph__labels.--primary.flex {
  3575.                   color: rgba(78, 255, 0,0.6);
  3576.                 }
  3577.                 .graph .graph__legend div:nth-child(1) {
  3578.                     color: rgba(78, 255, 0,0.6);
  3579.                 }
  3580.                 .graph .graph__legend div:nth-child(2) {
  3581.                     color: #AB83FB;
  3582.                 }
  3583.                 .states.flex > .state .state__value.ellipsis::before {
  3584.                 content: "NAS";
  3585.                 color: rgba(78, 255, 0,0.6);
  3586.                 }
  3587.                 ha-card {
  3588.                 padding: 0px !important;
  3589.                 margin-top: -5%;
  3590.                 background: rgba(39, 41, 43, 0.5) !important;
  3591.                 backdrop-filter: blur(20px) saturate(150%) !important;
  3592.                 #-webkit-backdrop-filter: blur(20px) saturate(150%);
  3593.                 border: none;
  3594.                 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  3595.                 }
  3596.                 *{
  3597.                 border-radius: 0 0 8px 8px !important;
  3598.                 }
  3599.         grid_options:
  3600.           columns: 4
  3601.           rows: auto
  3602.       - type: vertical-stack
  3603.         cards:
  3604.           - type: custom:bubble-card
  3605.             card_type: button
  3606.             button_type: state
  3607.             entity: sensor.printer_hub_current_consumption
  3608.             card_layout: large-2-rows
  3609.             name: Printer Hub
  3610.             icon: mdi:flash
  3611.             show_icon: false
  3612.             show_state: true
  3613.             show_name: true
  3614.             rows: "0.7"
  3615.             grid_options:
  3616.               columns: 4
  3617.             styles: |-
  3618.               .bubble-button-card-container {
  3619.                  border-radius: 8px 8px 0 0 !important;
  3620.                  }
  3621.             card_mod:
  3622.               style: >-
  3623.                 {% set val = states('sensor.printer_hub_current_consumption') |
  3624.                float(0)
  3625.  
  3626.                 %}
  3627.  
  3628.  
  3629.                 {% set pct = (val / 350 * 100) | round(1) %}
  3630.  
  3631.  
  3632.  
  3633.                 {% if val < 90 %}
  3634.                   {% set bg = '#2196f399' %}  {# blue, 80% opacity #}
  3635.                 {% elif val < 250 %}
  3636.                   {% set bg = '#5C793399' %}  {# green, 80% opacity #}
  3637.                 {% elif val < 300 %}
  3638.                   {% set bg = '#ffeb3b99' %}  {# yellow, 80% opacity #}
  3639.                 {% else %}
  3640.                   {% set bg = '#f4433699' %}  {# red, 80% opacity #}
  3641.                 {% endif %}
  3642.  
  3643.  
  3644.  
  3645.                 {% set r = (bg[1:3] | int(base=16)) / 255 %}
  3646.  
  3647.  
  3648.                 {% set g = (bg[3:5] | int(base=16)) / 255 %}
  3649.  
  3650.  
  3651.                 {% set b = (bg[5:7] | int(base=16)) / 255 %}
  3652.  
  3653.  
  3654.                 {% set luminance = 0.299 * r + 0.587 * g + 0.114 * b %}
  3655.  
  3656.  
  3657.  
  3658.                 .bubble-button-card-container {
  3659.                   background: linear-gradient(
  3660.                     to right,
  3661.                     {{ bg }} {{ pct }}%,
  3662.                     rgba(255, 255, 255, 0.1) {{ pct }}%
  3663.                   ) !important;
  3664.  
  3665.                   color: {% if luminance > 0.5 %}
  3666.                     rgb(0, 0, 0);
  3667.                   {% else %}
  3668.                     rgb(255, 255, 255);
  3669.                   {% endif %};
  3670.                  
  3671.                   #border: solid rgba(39, 41, 43, 1) 2px;
  3672.                 }
  3673.                  .bubble-button-card-container{
  3674.                   background: rgba(255, 255, 255, 0.1);
  3675.                   border-radius: 8px !impotant;
  3676.                   #backdrop-filter: blur(20px) saturate(150%);
  3677.                   #-webkit-backdrop-filter: blur(20px) saturate(150%);
  3678.                   border: none;
  3679.                   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  3680.                   position: relative;
  3681.                   overflow: hidden;
  3682.                  
  3683.                   }
  3684.           - type: custom:mini-graph-card
  3685.             entities:
  3686.               - entity: sensor.printer_hub_current_consumption
  3687.             name: NAS (Now)
  3688.             icon: mdi:server
  3689.             align_icon: left
  3690.             align_state: left
  3691.             unit: W
  3692.             font_size: 66
  3693.             font_size_header: 10
  3694.             show:
  3695.               labels: false
  3696.               name: false
  3697.               icon: false
  3698.               legend: false
  3699.               average: false
  3700.               extrema: false
  3701.             action: more-info
  3702.             hours_to_show: 1
  3703.             line_width: 3
  3704.             points_per_hour: 70
  3705.             color_thresholds:
  3706.               - value: 350
  3707.                 color: "#f44336"
  3708.               - value: 250
  3709.                 color: "#ffeb3b"
  3710.               - value: 150
  3711.                 color: "#5C7933"
  3712.               - value: 0
  3713.                 color: "#2196f3"
  3714.             height: 200
  3715.             grid_options:
  3716.               rows: null
  3717.               columns: 4
  3718.             card_mod:
  3719.               style: |-
  3720.                 .states.flex {
  3721.                    display: none;
  3722.                    position: absolute;
  3723.                    
  3724.                 }
  3725.                 .states.flex .state .state__value.ellipsis {
  3726.                   font-size: 1.4em;
  3727.                   align-self: center;
  3728.                 }
  3729.                 .graph .graph__container .graph__labels.--primary.flex {
  3730.                   color: rgba(78, 255, 0,0.6);
  3731.                 }
  3732.                 .graph .graph__legend div:nth-child(1) {
  3733.                     color: rgba(78, 255, 0,0.6);
  3734.                 }
  3735.                 .graph .graph__legend div:nth-child(2) {
  3736.                     color: #AB83FB;
  3737.                 }
  3738.                 .states.flex > .state .state__value.ellipsis::before {
  3739.                 content: "NAS";
  3740.                 color: rgba(78, 255, 0,0.6);
  3741.                 }
  3742.                 ha-card {
  3743.                 padding: 0px !important;
  3744.                 margin-top: -5%;
  3745.                 background: rgba(39, 41, 43, 0.5) !important;
  3746.                 backdrop-filter: blur(20px) saturate(150%) !important;
  3747.                 #-webkit-backdrop-filter: blur(20px) saturate(150%);
  3748.                 border: none;
  3749.                 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  3750.                 }
  3751.                 *{
  3752.                 border-radius: 0 0 8px 8px !important;
  3753.                 }
  3754.         grid_options:
  3755.           columns: 4
  3756.           rows: auto
  3757.     visibility:
  3758.       - condition: state
  3759.         entity: input_boolean.toggle_sections
  3760.         state: "on"
  3761.   - type: grid
  3762.     cards:
  3763.       - type: custom:navbar-card
  3764.         desktop:
  3765.           position: bottom
  3766.           show_labels: popup_only
  3767.           show_popup_label_backgrounds: true
  3768.         mobile:
  3769.           show_labels: false
  3770.         routes:
  3771.           - icon: mdi:menu
  3772.             tap_action:
  3773.               action: toggle-menu
  3774.             double_tap_action:
  3775.               action: call-service
  3776.               service: input_boolean.toggle
  3777.               target:
  3778.                 entity_id: input_boolean.toggle_kiosk_mode
  3779.           - url: /lovelace/0
  3780.             icon: mdi:gitlab
  3781.             hold_action:
  3782.               action: call-service
  3783.               service: input_boolean.toggle
  3784.               service_data:
  3785.                 entity_id: input_boolean.toggle_sections
  3786.           - url: /lovelace/3d-print
  3787.             icon: mdi:printer-3d
  3788.           - icon: mdi:home
  3789.             label: ""
  3790.             url: /lovelace/3
  3791.           - url: /profile/general
  3792.             icon: mdi:account-cog
  3793.           - icon: mdi:arrow-up-right
  3794.             tap_action:
  3795.               action: open-popup
  3796.             popup:
  3797.               - icon: mdi:cog
  3798.                 url: /config/dashboard
  3799.                 label: Settings
  3800.               - icon: mdi:devices
  3801.                 url: /config/integrations/dashboard
  3802.                 label: Integrations
  3803.               - icon: mdi:code-block-braces
  3804.                 url: /config/automation/dashboard
  3805.                 label: Automation
  3806.               - icon: mdi:hammer
  3807.                 url: /developer-tools/yaml
  3808.                 label: Dev Tools
  3809.               - icon: mdi:home-analytics
  3810.                 url: /hacs/dashboard
  3811.                 label: HACS
  3812.               - icon: mdi:console
  3813.                 url: /dashboard-configuration/0
  3814.                 label: Config
  3815.               - icon: mdi:power
  3816.                 tap_action:
  3817.                   action: call-service
  3818.                   service: homeassistant.restart
  3819.                   service_data: {}
  3820.                   confirmation:
  3821.                     text: Are you sure you want to restart Home Assistant?
  3822.         styles: |-
  3823.           .navbar-card {
  3824.             background: rgba(0,0,0,0.81);
  3825.             --navbar-primary-color: rgba(255,255,255,0.5);
  3826.             height: 75px;
  3827.             gap: 3px;
  3828.           }
  3829.  
  3830.           .navbar-card.desktop{
  3831.             border-radius: 20px;
  3832.             border: 0px solid grey;
  3833.             background: rgba(255, 255, 255, 0.1);
  3834.             backdrop-filter: blur(20px) saturate(150%);
  3835.             -webkit-backdrop-filter: blur(20px) saturate(150%);
  3836.             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  3837.           }
  3838.           .navbar.desktop.bottom {
  3839.             bottom: 50px;
  3840.           }
  3841.           .label {
  3842.             display: box !important;
  3843.           }
  3844.             .navbar-card.mobile {
  3845.             box-shadow: var(--navbar-box-shadow-desktop);
  3846.             bottom: 25px;
  3847.             left: 10%;
  3848.             border-radius: 25px;
  3849.             justify-content: center;
  3850.             background: rgba(255, 255, 255, 0.1);
  3851.              backdrop-filter: blur(20px) saturate(150%);
  3852.             -webkit-backdrop-filter: blur(20px) saturate(150%);
  3853.             width: 80% !important;
  3854.            
  3855.           }
  3856.         haptic:
  3857.           tap_action: true
  3858.           url: true
  3859. icon: mdi:gitlab
  3860. cards: []
  3861. badges: []
  3862. dense_section_placement: true
  3863. background:
  3864.   opacity: 60
  3865.   alignment: center
  3866.   size: cover
  3867.   repeat: no-repeat
  3868.   attachment: fixed
  3869.   image:
  3870.     media_content_id: /local/backgrounds/art_lake.jpg
  3871. subview: false
  3872. header:
  3873.   layout: center
  3874.   badges_position: top
  3875.   badges_wrap: wrap
  3876. top_margin: false
  3877. theme: Graphite-bubble-v2
  3878.  
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!