Need help with CardMod styling

Configuration Frontend
1

Hello, please help styling this particular part of a slide-confirm-card(via HACS) :

Code of the card:

type: custom:slide-confirm-card
card_mod:
  style: |
    .card-content {
      padding: 5px !important;
      padding-left: 10px;
      padding-right: 10px;
    }
sliders:
  - name: null
    icon: null
    textUnconfirmed: WALK
    textConfirmed: OPEN!
    iconUnconfirmed: mdi:lock
    iconConfirmed: mdi:lock-open
    confirm_action:
      action: call-service
      service: script.open-gate
      target: {}

immagine
immagine1722×250 30.5 KB

I can style the .card-content class successfully:

type: custom:slide-confirm-card
card_mod:
  style: |
    .card-content {
      padding: 5px !important;
      padding-left: 10px;
      padding-right: 10px;
    }

But I cannot reference the DOM shadow-root class .slide-confirm-track.

Can someone please help? @itsbrianburton
Thanks!

2

Using this will work

card_mod:
  style: |
      div {
      padding: 5px 5px 5px 5px !important;
          }
3

Maybe I’ve explained myself in a wrong way.
I want to add a different background color for the .slide-confirm-track class but since it is within a shadow box, the normal css coding (which works for .card-content class) is not working.

4

Like this?

image
image768×408 15.1 KB

card_mod:
     style:
      slide-confirm$: |
        .slide-confirm {
          background-color: purple;
          }

or

card_mod:
  style:
    slide-confirm:nth-child(1)$: |
      .slide-confirm {
        background-color: purple;
            }
    slide-confirm:nth-child(2)$: |
      .slide-confirm {
        background-color: red;
           }

image
image772×396 15.2 KB

5

Still ain’t working… :frowning:

card_mod:
  style: |
    .card-content {
      padding: 5px !important;
      padding-left: 10px;
      padding-right: 10px;
    }
    slide-confirm$: |
        .slide-confirm-track {
          background-color: purple !;
    }
6

Try it without the .card-content: before stating it doesn’t work. You added additional code. that needs to be defined different.

card_mod:
  style:
    slide-confirm:nth-child(1)$: |
      .slide-confirm {
        background-color:purple;
        
            }
    slide-confirm:nth-child(2)$: |
      .slide-confirm {
        background-color:red;
           }
    .: |
     div {
       padding: 25px 15px 15px 25px !important;
          }

My screenshots are to validate the code I provide works.

Here is a sample card code

type: custom:slide-confirm-card
sliders:
  - name: null
    icon: null
    textUnconfirmed: Slide to Turn On
    textConfirmed: Light On
    iconUnconfirmed: mdi:lamp
    confirm_action:
      action: call-service
      service: light.turn_on
      target:
       entity_id: light.night_stand
  - name: null
    icon: null
    textUnconfirmed: Slide to Turn OFF
    textConfirmed: Light OFF
    iconUnconfirmed: mdi:lamp
    iconConfirmed: mdi:lock-open
    confirm_action:
      action: call-service
      service: light.turn_off
      target:
       entity_id: light.night_stand
card_mod:
  style:
    slide-confirm:nth-child(1)$: |
      .slide-confirm {
        background-color:purple;
        
            }
    slide-confirm:nth-child(2)$: |
      .slide-confirm {
        background-color:red;
           }
    .: |
     div {
       padding: 25px 15px 15px 25px !important;
          }
1 Like
7

Is it possible to change the icon color? I’m trying but I just can change the background.
Thanks