Bubble Card Layout wie Standardkacheln

Dashboard/Cards/Frontend
,
1

Hallo zusammen,
ich nutze gerne die Standard Karten von HA aber auch die Bubble Card.
Leider habe ich keine Möglichkeit gefunden die Bubble Card so zu formatieren, dass sie optisch (also Hintergrund) mit der Standard Kachel von HA passt.
Beispiel:
image

Oben sind 2 Standard Kachelkarten und dann 2 Bubble Cards.
Die erste Bubble Card ist nicht formatiert und die 2. Bubble Card habe ich wie folgt angepasst:

styles: |
ha-card {
–bubble-main-background-color: rgba(40,40,40,0.7) !important;
}

Das passt dann z.B. für das Mushroom Template (Dark Mode) gut aber sobald ein anderes Template ausgewählt wird, passt es halt nicht mehr.

Die Frage ist also ob es eine Möglichkeit gibt die Bubble Card so zu formatieren, dass sie - egal welches Template - zu den Standard-Karten passt?

Danke und Gruß
Micha

2

Ich habe das (bei einer Bubble Select) so implementiert:

styles: |
  ha-card {
    --bubble-main-background-color: var(--primary-background-color) !important;
  }

Das hat bei mir auch mit themes die Dark/Light switch funktioniert.

4

Funktioniert bei mir leider nicht … ich denke, es muss noch irgendwie eine Transparenz mit eingestellt werden damit es so aussieht wie der Hintergrund einer Standard Karte…

image
Theme ist ios dark mode blue red

Hab ein Einstellung gefunden, mit der es recht gut passt:

styles: |
  ha-card {
    --bubble-main-background-color: var(--ha-card-background) !important;
  }

:crayon:by HarryP: Zusammenführung Doppelpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)

5

funktioniert aber leider nicht mehr, wenn zwischen dark und light gewechselt wird :frowning:

6

Ich hänge mich mal hier dran.

Ich würde gerne die Farbe vom Slider anpassen.
Ha aber in 2 Stunden suche nichts gefunden.

Wer kann helfen? :slight_smile:

7

2 Stunden Suche… ehrlich :wink:

Da ist die Frage was du da benötigst…

Grundlegende Farben der Karte an sich erreichst du so:

ha-card {
/* Farbe des Buttons */
  --bubble-main-background-color: #FARB-CODE !important;
/* Farbe des Icon Kreises */
  --bubble-secondary-background-color: #FARB-CODE !important;
}

Speziell für den Slider dann z.B.

.bubble-range-fill {
  background-color: #FARB-CODE !important;
}

Das steht eigentlich alles in der Doku:

8

Danke..wusste nicht das ich es brauche bis ich es eben gesehen habe :rofl: Meine Kacheln sind weiss und die Bubble Card war leicht grau. Jetzt passt es…

9

@Schlumperdix ja ehrlich, inkl. divers YT-Videos und auf der GitHub Seite war ich auch.
Und ich hab es sogar mit dem .bubble-range-fill versuch aber es hat aus irgend einem Grund nicht funktioniert.

Aber jetzt tut es! :slight_smile:

Danke schön!!

11

Eine Alternative könnte folgendes Bubble-card 3 Modul sein:

image
image470×405 16 KB

Du könntest folgendes Module ausprobieren:

image
image476×328 15.8 KB

Gruß, Lars

1 „Gefällt mir“
12

ich habe bei den obigen Posts bemerkt, dass die meisten die Bubble-Card mit dem Card-Mod stylen. Das ist unnötig, den Card-Mod braucht man in den meisten Fällen bei der Bubble-Card nicht. Die Bubble-Card bietet eigene Styling-Optionen

z.B. …

type: custom:bubble-card
card_type: button
button_type: switch
entity: input_boolean.test_schalter
styles: |-
  .bubble-container {
    --bubble-border-radius: 0px !important;
    --bubble-backdrop-filter: blur(5.1px);
    -webkit-backdrop-filter: blur(5.1px);
    backdrop-filter: blur(5px);
    overlay-backdrop-opacity: 1;
    overlay-backdrop-background-color: rgba(0, 0, 0, 0.32);
    transition: all 150ms ease-in-out;
    box-shadow: rgba(255, 255, 255, 0.05) 0 0 1px 1px inset;
    background: rgba(7, 189, 223, 0.15);
    background-image: linear-gradient(180deg, rgba(206, 211, 234, 0.07) 0%, transparent 100%);
  }
13

Ich mache mit der Bubble-Card auch viel und habe fast alle Dashboards damit aufgebaut.

So sehe ich das auch.

Ich sehe bei deinen Postigs aber sehr oft auch CSS-Klassen, die ich in der Doku nicht finden kann. Gibt es irgendwo eine vollständige Refferenz, die man zu Rate ziehen kann?