#Bubble card card mod stuff

1 messages · Page 1 of 1 (latest)

native basalt
# 
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: '#lights'
    entity: light.living_room_lights
    name: "\_"
    icon: mdi:chart-bubble
    margin_top_mobile: 18px
    margin_top_desktop: 50%
    width_desktop: 95%
    card_mod:
      style: |
        :host {
          background-color: transparent;
          --dialog-backdrop-filter: blur(0.8em) brightness(1.2);
        }
        ha-card { 
          color: red;
        }
        #header-container {
          background-color: transparent;
          div {
            background-color: transparent !important;
          }
        }
        h2 {
          font-family: Arial;
          font-size: 28px !important;
          color: white;
          background-color: transparent;
        }
        .header-icon {
          color: orange;
          background-color: blue;
          display: none;
        }
        .close-pop-up {
          background-color: light-gray;
          --card-mod-icon-color: white;
          width: 50px;
          height: 50px;
        }
        ha-dialog$: |
          div.mdc-dialog div.mdc-dialog__scrim {
            background: rgba(100, 100, 100, 0.7);
          }```
subtle pine
#

ah, thanks for the code, I figured how to target classes with card mod and figured it out!

      style: |
        .power-button {
          color: red;
        }```
image.png
native basalt
#

I could have swore I tried that earlier.

#

It's weird that the .power-button takes up almost the whole width.

image.png
subtle pine
#

yeah, i just tried the background and got the same thing...

#

that's weird

#

but weirdly if i manually go into it and go from the .power-button class down a level into ha-svg-icon and change it in dev tools, i can get it to work

image.png