Suggestion: vivid tabs

[ildar170975]

Currently tabs have no border & background. I suggest to make tabs more vivid. It can be done by CSS styles. Check my proposals below. I am using card-mod to inject CSS properties.

Current default view with a default theme:

  - type: custom:tabbed-card
    attributes:
      icon: mdi:circle
    tabs:
      - card:
          type: entities
          entities:
            - sun.sun
        attributes:
          label: label 1
      - card:
          type: entity
          entity: sun.sun
        attributes:
          label: label 2

Suggestion:

  - type: custom:mod-card
    card_mod:
      style:
        tabbed-card:
          $: |
            mwc-tab {
              background: var(--ha-card-background, var(--card-background-color, white) );
              border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
              border-width: 1px;
              border-top-left-radius: 12px;
              border-top-right-radius: 12px;
              border-style: solid;
              overflow: hidden;
            }
            section article > * {
              --ha-card-border-radius: 0px 0px 12px 12px;
            }
    card:
      type: custom:tabbed-card
      attributes:
        icon: mdi:circle
      tabs:
        - card:
            type: entities
            entities:
              - sun.sun
          attributes:
            label: label 1
        - card:
            type: entity
            entity: sun.sun
          attributes:
            label: label 2

[kinghat]

this has already been requested here: https://github.com/kinghat/tabbed-card/discussions/32 im trying to keep all feature requests in the discussions area. my response to that request is largely the same. feel free to copy paste what you have posted above into that feature request and follow it.

i havent updated the issue template to funnel people to the discussions area for feature requests yet. if you have any other requests, please post them there.