Bubble Card - Icon Transparenz bei Switch und Slider aber nicht bei State

[Chopper]

Hallo Zusammen,

ich fuchse mich schon seit einiger Zeit in die Möglichkeiten von Bubble-Card rein. Bin jetzt aber auf einen “Effekt” gestoßen und finde einfach nicht den “Code” um diesen zu beheben.

Wenn ich eine Karte als “State” oder “Name / Text” konfiguriere ist das Icon am Anfang der Karte nicht transparent. Wenn ich diese jedoch als “Switch” oder “Slider” konfiguriere ist das Icon Transparent (wenn die Entität aus) und und nicht transparent wenn es an ist. Letzteren Effekt möchte ich aber nicht haben. Bei “Switch” oder “Slider” soll das Icon nicht in der Transparenz ändern unabhängig vom Status. In der Karten Konfiguration ist auch nur “Show Icon” und “Show Name” aktiv.

In dem beigefügten Bild ist z.B. die Speisekammer als Switch konfiguriert und die Entität ist “Ein” während der Technikraum als Switch mit Entität “Aus” ist.

Auch ist der Farbton trotz gleicher Style RGB Konfiguration unterschiedlich. Die “State” Karten sind etwas “Dunkel Gelb” und die Slider/Switch “Helleres Gelb”. Zu sehen auf dem Bild - Erdgeschoss ist als “State” Konfiguriert und die einzelnen Räume als “Switch”. Es ist nur eine Nuance, aber irgendwie macht mich das verrückt

Ich vermute irgendein "Overlay” das nur auf das Icon wirkt abhängig vom Status. Finde aber keine Option den auszustellen.

Folgend mein Code für den Style:

ha-card {--bubble-main-background-color: rgba(129,133,137,0.2)!important;}
.bubble-background {background-color: rgba(129,133,137,0)!important;} 
.bubble-name {font-size: 14px;} 
.bubble-icon {color: rgba(255,215,0,1) !important;}
.bubble-icon-container {background-color: rgba(129,133,137,0.0)!important;}
.bubble-sub-button-1 >ha-icon{color:${hass.states['light.licht_speisekammer'].state === 'on' ? 'rgba(255,140,0,1)' : 'rgba(255,215,0,1)'}!important;}

Vielleicht ist das auch der Monk in mir. Aber ich zeige mir den Status der Entitäten in meiner Übersicht über Sub-Buttons mit verschiedenen Icons und Farben an. Möchte aber auch ein paar Slider und Schalter in der Übersicht haben und dann sieht das komisch aus, wenn da auf einmal das “Haupt-Icon” seine Transparenz ändert.

Ich hoffe auf eure Hilfe!

[Schlumperdix]

ich rate mal …Hast du vielleicht die Option

use acccent color instead of light color übersehen?

Wenn du das aktivierst kannst du bei der background color und usw viel einstellen. Übernommen wird aber die accent color.

die kannst du bspw mittels

ha-card {
--bubble-accent-color: rgba(253, 184, 72, 0.4);
}

beeinflussen.

Wenn du das nicht willst, dann muss die Option überall aus.

Wewnn das Sub-Buttons sind (sieht danach aus) dann gibts die Option glaube gar nicht… Dann musst du wahrscheinlich ohnehin mit accent-color arbeiten

[Chopper]

Guter Hinweis!

Vielen Dank,

aber auch damit habe ich den gleichen Effekt. Mit Entität aus hat bubble-Icon Color

.bubble-icon {color: rgba(255,215,0,1) !important;}
ha-card {--bubble-accent-color: rgba(255, 215, 0, 1);}

zwar einen Effekt auf der Farbe, es bleibt aber Dunkler. Erst wenn die Entität An ist bekommt das Icon die korrekte Farbe. Mein Ziel ist es ja, dass die Farbe des Icons genauso “satt” ist, wie wenn die Lampe an ist.

Gibt es einen “icon-state” den man evtl. abstellen kann der das verursacht

[Schlumperdix]

Da fällt mir auf dem Icon nur das ein:

.bubble-icon {
  color: rgba(255,215,0,1) !important;
  opacity: 1 !important;
}

ich meine da würde standardmäßig die opacity unter 1 liegen.

Ich stelle das so dar:

.bubble-icon {
  color: ${
      state === 'on' ? 'rgba(255, 157, 0, 1)' :
      '#929292'} !important;
  opacity: 1 !important;
}

da habe ich den Effekt eigentlich nicht. Die Accent color ist bei mir an.

[Chopper]

Danke,

.bubble-icon {opacity: 1 !important}

damit ist das Icon bei Zustand aus nicht mehr transparent!!

Lustigerweise ist mir beim testen aufgefallen, dass es trotzdem noch etwas heller wird beim einschalten obwohl ich die Accent Color auf durchsichtig gestellt habe, da ich aber bei den Schaltern die Icon Farbe sowie ändere, wenn ich sie einschalte hat das keinen sichtbaren effekt.

ha-card {--bubble-accent-color: rgba(255, 215, 0, 0);}

Vielen Dank für deine Hilfe