Add ha-card and background color option

[sdrapha]

Currently, tabbed card doesn't have a background, or a ha-card element that card-mod could modify.
So this is a feature request for that.

I was able to achieve what I wanted with an extra card_mod card as a parent card. But I would like to avoid that and have the options directly. Especially if new versions will implement an UI editor, since the card_mod card will nullify that and force it into yaml.

Desired outcome:

Click to expand the yaml code for my current card

type: horizontal-stack
cards:
  - type: custom:button-card
    template: vertical_title
    name: Living Room
    icon: mdi:sofa
    color: rgb(40,30,80)
    styles:
      grid:
        - grid-template-rows: 55px auto
  - type: custom:mod-card
    card_mod:
      style: |
        ha-card {
          background: rgba(40,30,80,0.4);  
        }
    card:
      type: custom:tabbed-card
      attributes:
        isMinWidthIndicator: true
      styles:
        '--mdc-typography-button-font-size': 13px
        '--mdc-theme-primary': var(--secondary-text-color)
        '--mdc-tab-text-label-color-default': var(--secondary-text-color)
        '--mdc-tab-color-default': var(--secondary-text-color)
        '--mdc-ripple-color': transparent
      tabs:
        - attributes:
            label: Living Room
            icon: mdi:sofa
          card:
            type: vertical-stack
            cards:
              - cards:
                  - entity: null
                    color: auto
                    color_type: icon
                    show_icon: true
                    icon: mdi:sofa
                    size: 2em
                    show_name: true
                    name: Scenes
                    styles:
                      card:
                        - height: 70px
                        - '--mdc-ripple-color': none
                        - padding: 0px
                        - margin: 0px
                      name:
                        - font-size: 1em
                        - align-self: end
                        - opacity: 75%
                      icon:
                        - color: var(--paper-item-icon-color)
                    tap_action: none
                    type: custom:button-card
                    0template: entity_label
                  - entity: script.living_room_nightlight
                    color: auto
                    color_type: icon
                    hold_action:
                      action: more-info
                    show_icon: true
                    0icon: mdi:brightness-3
                    size: 2em
                    show_name: true
                    name: Nightlight
                    styles:
                      card:
                        - height: 70px
                        - width: 70px
                        - '--mdc-ripple-color': none
                      name:
                        - font-size: 0.8em
                      icon:
                        - color: var(--paper-item-text-color)
                        - 0color: var(--paper-item-icon-color)
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      service_data:
                        entity_id: script.living_room_nightlight
                    type: custom:button-card
                    0template: entity_label
                  - entity: script.living_room_dim
                    color: auto
                    color_type: icon
                    hold_action:
                      action: more-info
                    show_icon: true
                    icon: mdi:brightness-5
                    size: 2em
                    show_name: true
                    name: Dim
                    styles:
                      card:
                        - height: 70px
                        - width: 70px
                        - '--mdc-ripple-color': none
                      name:
                        - font-size: 0.8em
                      icon:
                        - color: var(--paper-item-text-color)
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      service_data:
                        entity_id: script.living_room_dim
                    type: custom:button-card
                  - entity: script.living_room_bright
                    color: auto
                    color_type: icon
                    hold_action:
                      action: more-info
                    show_icon: true
                    icon: mdi:brightness-7
                    size: 2em
                    show_name: true
                    name: Bright
                    styles:
                      card:
                        - height: 70px
                        - width: 70px
                        - '--mdc-ripple-color': none
                      name:
                        - font-size: 0.8em
                      icon:
                        - color: var(--paper-item-text-color)
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      service_data:
                        entity_id: script.living_room_bright
                    type: custom:button-card
                type: horizontal-stack
              - type: custom:decluttering-card
                template: tunable_light
                variables:
                  - name: Living Room group
                  - icon: sofa
                  - entity: light.livingroom_lights
        - attributes:
            label: More
          card:
            type: vertical-stack
            cards:
              - cards:
                  - entity: null
                    color: auto
                    color_type: icon
                    show_icon: true
                    icon: mdi:sofa
                    size: 2em
                    show_name: true
                    name: Scenes
                    styles:
                      card:
                        - height: 70px
                        - '--mdc-ripple-color': none
                        - padding: 0px
                        - margin: 0px
                      name:
                        - font-size: 1em
                        - align-self: end
                        - opacity: 75%
                      icon:
                        - color: var(--paper-item-icon-color)
                    tap_action: none
                    type: custom:button-card
                    0template: entity_label
                  - entity: script.living_room_nightlight
                    color: auto
                    color_type: icon
                    hold_action:
                      action: more-info
                    show_icon: true
                    0icon: mdi:brightness-3
                    size: 2em
                    show_name: true
                    name: Nightlight
                    styles:
                      card:
                        - height: 70px
                        - width: 70px
                        - '--mdc-ripple-color': none
                      name:
                        - font-size: 0.8em
                      icon:
                        - color: var(--paper-item-text-color)
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      service_data:
                        entity_id: script.living_room_nightlight
                    type: custom:button-card
                    0template: entity_label
                  - entity: script.living_room_dim
                    color: auto
                    color_type: icon
                    hold_action:
                      action: more-info
                    show_icon: true
                    icon: mdi:brightness-5
                    size: 2em
                    show_name: true
                    name: Dim
                    styles:
                      card:
                        - height: 70px
                        - width: 70px
                        - '--mdc-ripple-color': none
                      name:
                        - font-size: 0.8em
                      icon:
                        - color: var(--paper-item-text-color)
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      service_data:
                        entity_id: script.living_room_dim
                    type: custom:button-card
                  - entity: script.living_room_bright
                    color: auto
                    color_type: icon
                    hold_action:
                      action: more-info
                    show_icon: true
                    icon: mdi:brightness-7
                    size: 2em
                    show_name: true
                    name: Bright
                    styles:
                      card:
                        - height: 70px
                        - width: 70px
                        - '--mdc-ripple-color': none
                      name:
                        - font-size: 0.8em
                      icon:
                        - color: var(--paper-item-text-color)
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      service_data:
                        entity_id: script.living_room_bright
                    type: custom:button-card
                type: horizontal-stack
              - type: custom:decluttering-card
                template: tunable_light
                variables:
                  - name: Living Room group
                  - icon: sofa
                  - entity: light.livingroom_lights
              - type: custom:decluttering-card
                template: tunable_light
                variables:
                  - name: Fireplace group
                  - icon: fireplace
                  - entity: light.fireplaces_lights
              - type: custom:decluttering-card
                template: tunable_light
                variables:
                  - name: Mini Lamps
                  - icon: lamps
                  - entity: light.minilamps_lights
 

[kinghat]

thanks for your request. i will move it to where i put them for future consideration.