Unschärfe bei Bubble Popup Card

Integrationen
1

blur2
blur21920×973 68.1 KB

Weiß jemand ob es möglich ist den ganzen Hintergrund bei der Bubble Popup Crad in Unschärfe zu verschwinden lassen und nicht nur der Bereich des Popups? Die Unschärfe des Popups habe ich mit .bubble-pop-up-background { background: transparent !important; } erreicht.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    auto_close: "30000"
    styles: |-
      .bubble-pop-up { --bubble-pop-up-border-radius: 15px; }
       .bubble-button-card-container { background: rgba(0,0,0,0.3) !important; } 
       .bubble-button-card-container { border-radius: 15px !important; } 
       .bubble-button-background { border-radius: 15px !important; }
       .bubble-pop-up-background { background: transparent !important; } 
    modules:
      - default
    hash: "#wohnzimnmer-klima"
    entity: sensor.temperatur_wohnzimmer_temperature
    button_type: state
    show_state: false
    name: Temperatur
    sub_button:
      - entity: sensor.temperatur_wohnzimmer_temperature
        show_background: false
        show_icon: false
        show_last_changed: false
        show_state: true
  - type: custom:bubble-card
    card_type: separator
    modules:
      - default
  - type: custom:simple-thermostat
    card_mod:
      style: |
        ha-card {
          --ha-card-background: rgba(0,0,0,0.3);
          --ha-card-border-radius: 15px;
          --ha-card-border-color: transparent;
        }
    entity: climate.wohnzimmer
    header: false
    step_size: 0.5
    layout:
      mode:
        names: true
        icons: true
        headings: false
    hide:
      temperature: true
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: button
        entity: binary_sensor.3_balkontur
        styles: |
          .bubble-button-card-container {
            background: rgba(0,0,0,0.3) !important;
          }
          .bubble-button-card-container { border-radius: 15px !important; }
          .bubble-button-background { border-radius: 15px !important; }
        name: Status
        button_type: state
        modules:
          - default
      - type: custom:bubble-card
        card_type: button
        entity: binary_sensor.3_balkontur_battery
        styles: |
          .bubble-button-card-container {
            background: rgba(0,0,0,0.3) !important;
          }
          .bubble-button-card-container { border-radius: 15px !important; }
          .bubble-button-background { border-radius: 15px !important; }
        name: Akku
        button_type: state
        sub_button: []
  - type: custom:bubble-card
    card_type: separator
    modules:
      - default
  - type: custom:mini-graph-card
    card_mod:
      style: |
        ha-card {
          --ha-card-background: rgba(0,0,0,0.3);
          --ha-card-border-radius: 15px;
          --ha-card-border-color: transparent;
        }
    entities:
      - sensor.temperatur_wohnzimmer_temperature
    hour24: true
    decimals: 1
    smoothing: true
    hours_to_show: 24
    points_per_hour: 50
    line_width: 3
    animate: true
    update_interval: 600
    name: Temperatur
    show:
      labels: false
    color_thresholds:
      - value: 21
        color: "#00BFFF"
      - value: 22
        color: "#f39c12"
      - value: 23
        color: "#d35400"
      - value: 24
        color: "#c0392b"
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        styles: >
          .bubble-button-card-container { background: rgba(0,0,0,0.3)
          !important; } .bubble-button-card-container { border-radius: 15px
          !important; } .bubble-button-background { border-radius: 15px
          !important; }
        card_type: button
        button_type: state
        entity: sensor.1_wohnzimmer_heating
        name: Ventilstellung
        show_state: false
        show_name: true
        show_attribute: false
        attribute: friendly_name
        show_last_changed: true
        sub_button:
          - entity: sensor.1_wohnzimmer_heating
            show_background: false
            show_name: false
            show_last_changed: false
            show_state: true
            show_icon: false
        icon: mdi:pipe-valve
        grid_options:
          columns: 6
          rows: 1
        modules:
          - default
      - type: custom:bubble-card
        styles: >
          .bubble-button-card-container { background: rgba(0,0,0,0.3)!important; }                
          .bubble-button-card-container { border-radius: 15px !important; } 
          .bubble-button-background { border-radius: 15px !important; }
        card_type: button
        button_type: state
        entity: sensor.temperatur_wohnzimmer_battery
        name: Batterie
        show_state: false
        sub_button:
          - entity: sensor.temperatur_wohnzimmer_battery
            show_icon: false
            show_state: true
            show_background: false
        grid_options:
          columns: 6
          rows: 1
        modules:
          - default
  - type: custom:bubble-card
    card_type: separator
    modules:
      - default
  - type: custom:mini-graph-card
    card_mod:
      style: |
        ha-card {
          --ha-card-background: rgba(0,0,0,0.3);
          --ha-card-border-radius: 15px;
          --ha-card-border-color: transparent;
        }
    entities:
      - sensor.temperatur_wohnzimmer_humidity
    hour24: true
    decimals: 1
    smoothing: true
    hours_to_show: 24
    points_per_hour: 50
    line_width: 3
    animate: true
    update_interval: 300
    name: Luftfeuchtigkeit
    show:
      labels: false
    color_thresholds:
      - value: 40
        color: "#00BFFF"
      - value: 60
        color: "#f39c12"
      - value: 65
        color: "#d35400"
      - value: 70
        color: "#c0392b"
  - type: custom:bubble-card
    styles: >
      .bubble-button-card-container { background: rgba(0,0,0,0.3) !important; }
      .bubble-button-card-container { border-radius: 15px !important; }
      .bubble-button-background { border-radius: 15px !important; }
    card_type: button
    button_type: state
    entity: sensor.2_kuche_heating
    name: Ventilstellung
    show_state: false
    show_name: true
    show_attribute: false
    attribute: friendly_name
    show_last_changed: true
    sub_button:
      - entity: sensor.1_wohnzimmer_heating
        show_background: false
        show_name: false
        show_last_changed: false
        show_state: true
        show_icon: false
    icon: mdi:pipe-valve
    modules:
      - default
  - type: custom:bubble-card
    card_type: separator
2

Dazu müsste das Pop-Up in Fullscreen aufgehen. Wie man es dazu bringt, weiß ich nicht, wäre vielleicht ein Such-Ansatz.

1 „Gefällt mir“
3

Mit width_desktop: 100% geht das Popup in Fullscreen, die Karte aber auch in die Breite. Sieht dann nicht so gut aus wenn man nur eine Karte hat. Bei zwei oder drei in einem horizontal stack sieht es dann besser aus.

screen
screen1920×961 43.7 KB

Edit:

Mit width: 123px bekomme ich die Karte schmaler. Die wird dann aber linksbündig und ich habe noch nicht rausfinden können wie ich die wieder zentriert bekommen. Mit align: middle; oder padding: 100px; geht die Karte trotz width wieder in die volle Breite :confounded:

4

Da ich meinen letzten Beitrag nicht mehr bearbeiten kann dieser doppel post. Hab die Lösung gefunden. width auf 100% und meine Karte in einen horizontal stack mit einem Bubble Empty Colum Card links und rechts davon. Der Header bleibt dann zwar breit, die Karte kommt dann in normaler größe.

Sieht dann so aus:

bubb
bubb1920×966 45.7 KB

Und hier der Code falls jemand das so übernehmen will:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    auto_close: "30000"
    styles: |-
      .bubble-pop-up { --bubble-pop-up-border-radius: 15px; }
       .bubble-button-card-container { background: rgba(0,0,0,0.3) !important; } 
       .bubble-button-card-container { border-radius: 15px !important; } 
       .bubble-button-background { border-radius: 15px !important; } 
       .bubble-pop-up-background { background: transparent !important; } 
    modules:
      - default
    hash: "#flur"
    entity: light.flur
    sub_button:
      - entity: sensor.flur_verbrauch_power
        show_background: false
        show_state: true
    button_type: switch
    show_state: false
    show_attribute: true
    attribute: brightness
    width_desktop: 100%
  - type: horizontal-stack
    cards:
      - type: custom:bubble-card
        card_type: empty-column
      - type: custom:vertical-stack-in-card
        cards:
          - type: entities
            entities:
              - entity: light.flur
                secondary_info: brightness
              - type: custom:rgb-light-card
                entity: light.flur
                justify: center
                colors:
                  - kelvin: 6500
                    icon_color: "#ffedde"
                  - rgb_color:
                      - 1
                      - 255
                      - 170
                    brightness_pct: 50
                    transition: 1
                  - kelvin: 3000
                    icon_color: "#ffc107"
            state_color: true
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: rgba(0,0,0,0.3);
                  --ha-card-border-radius: 15px;
                  --ha-card-border-color: transparent;
                }
          - show_name: true
            show_icon: false
            show_state: true
            type: glance
            entities:
              - entity: sensor.flur_verbrauch_power
                name: Flur
          - show_name: false
            show_icon: false
            show_state: true
            type: glance
            entities:
              - entity: binary_sensor.bewegungsmelder_occupancy
                name: Flur
            state_color: true
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(0,0,0,0.3);
              --ha-card-border-radius: 15px;
              --ha-card-border-color: transparent;
            }
      - type: custom:bubble-card
        card_type: empty-column