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

```yaml 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.