🔹 Card-mod - Super-charge your themes!

gilles.blampain · October 2, 2024, 8:51pm

Ho sorry !
Will do !
Thanks for the heads up

Mariusthvdb · October 2, 2024, 8:51pm

haha right, you updated

this has to be the most complex card-mod setting we’ve encountered until now…

will test it soon, but truly hope we will be able to do

type: heading
card_mod:
  style: |
    ha-card {
      background: var(--card-background-color);
    }

soon…
or its theme version in our themes ofc, as a generic theme variable there would be most efficient

iamjosh · October 2, 2024, 9:00pm

This works:

type: heading
heading: Kitchen
heading_style: title
card_mod:
  style: |
    ha-card.type-heading {
      background: var(--card-background-color) !important;
    }

(!important only needed if overriding a card-mod theme.)

Snapshot_2024-10-02_16-59-36

Mariusthvdb · October 3, 2024, 6:32am

nice!

almost there now:

      - type: heading
        heading: Speciale scenes
        heading_style: title
        card_mod:
          style: |
            ha-card.type-heading {
              background: var(--background-color-off);
              --ha-heading-card-title-color: var(--text-color-off) !important;
              --ha-heading-card-title-font-size: 20px !important;
              --ha-heading-card-title-font-weight: 400;
              padding: 12px;
            }
            .content {
              justify-self: left !important;
            }

is the styling I always use for my header custom buttons,

button_default_title:
#  aspect_ratio: 12/1
  show_state: false
  show_icon: false
  tap_action:
    action: none
  styles:
    card:
#       - border: none
      - background: var(--background-color-off)
      - color: var(--text-color-off)
      - font-size: 20px #24px
      - font-weight: 400 #300
      #- letter-spacing: 0px
#      - font-weight: bold
      - padding: 12px
#       - pointer-events: none
    name:
      - justify-self: left

or type: entities cards via card-mod theme class:

        ha-card.class-header-margin .card-header {
          background: var(--background-color-off);
          font-weight: 400;
          font-size: 20px;
          color: var(--text-color-off);
          padding: 0px 12px;
          margin: 0px 0px 16px 0px;
        }

and this is an 98% succes (top is the new section type: heading, bottom is type: custom:button-card:

on the theme subject:
I had to take out the card-mod theme variables, because even the !important did not override that, card-mod-theme is more powerful, or, is applied later, which ever it is.

the margins aren’t an exact copy yet. I suppose I need to touch the .content with justify-self: left but this doesnt do it. Maybe I can somehow get it in the main ha-card.type-heading style differently, needs more study

Also now, the 2 entities I do have in there need customizing, as those colors are not inherited by the mod.

If @Ildar_Gabdullin reads this, maybe we need a separate post for the new family of mods? Both as card-mod, and here, as card-mod theming mods?

suppose its good to do so soon, because otherwise the posts will get scattered

update
adding height, and a bit more detailed padding does the job for now (for the bar and title, not yet for the embedded entities).

      - type: heading
        heading: Speciale Scenes
        heading_style: title
        card_mod:
          style: |
            ha-card.type-heading {
              background: var(--background-color-off);
              --ha-heading-card-title-color: var(--text-color-off) !important;
              --ha-heading-card-title-font-size: 20px !important;
              --ha-heading-card-title-font-weight: 400;
              height: 50px;
              padding: 12px 0 12px 8px;
            }

So next up is getting this into a class, and set it to the headings that dont need entities):

        ha-card.class-section-heading .container {
          background: var(--background-color-off);
          --ha-heading-card-title-color: var(--text-color-off) !important;
          --ha-heading-card-title-font-size: 20px !important;
          --ha-heading-card-title-font-weight: 400;
          height: 50px;
          padding: 12px 0 12px 8px;
        }

which again is close, but not yet there… huh, why dont the height and padding get applied? am I targeting the wrong element?:

      - type: heading
        heading: Speciale Scenes
        heading_style: title
        card_mod:
          class: class-section-heading
#           style: |
#             ha-card.type-heading {
#               background: var(--background-color-off);
#               --ha-heading-card-title-color: var(--text-color-off) !important;
#               --ha-heading-card-title-font-size: 20px !important;
#               --ha-heading-card-title-font-weight: 400;
#               height: 50px;
#               padding: 12px 0 12px 8px;
#             }

well, they did get applied, but somehow the calculation is different, because it targets a dfferent element apparently. This works:

        ha-card.class-section-heading .container {
          background: red;
          --ha-heading-card-title-color: var(--text-color-off) !important;
          --ha-heading-card-title-font-size: 20px !important;
          --ha-heading-card-title-font-weight: 400;
          height: 24px;
          padding: 12px 8px 12px 12px;
        }

and Ive set the background to red in this test to be able to see the right padding, which I also set as an extra guard to fit the embedded entities:

It;s an exact match now, and I hope Ive got the first functional card-mod theming class in my config

now we know how to mod the colors, we can also template them… a whole new world of options lies ahead

NightWatcher · October 3, 2024, 6:35am

Is there any way, to style all hui-section containers with a theme?

I tested it with a few modified examples, but none of them worked.

My last try:

room_theme:
  card-mod-theme: room_theme
  card-mod-view-yaml: |
    hui-section$: |
      #root {
        border: 1px solid rgb(0, 0, 0) !important;
      }

Ildar_Gabdullin · October 3, 2024, 10:53am

Was already done for “normal” card-mod.
Only variables were not mentioned there.

dmatik · October 3, 2024, 11:02am

Hi,
Anybody able to change the font-family of new titles badges in 2024.10.0, in section view?
I was able to fix the title itself font family, but not able to get to badges.
Meaning is in theme of course.

Thanks in advance.

Mariusthvdb · October 3, 2024, 2:16pm

at the end of the day, I made 2 classes:

        ha-card.class-section-heading .container {
          background: var(--background-color-off);
          --ha-heading-card-title-color: var(--text-color-off) !important;
          --ha-heading-card-title-font-size: 20px !important;
          --ha-heading-card-title-font-weight: 400;
          height: 24px;
          padding: 12px 8px 12px 12px;
        }

        ha-card.class-section-heading-no-color .container {
          /*background: var(--background-color-off);*/
          /*--ha-heading-card-title-color: var(--text-color-off) !important;*/
          --ha-heading-card-title-font-size: 20px !important;
          --ha-heading-card-title-font-weight: 400;
          height: 24px;
          padding: 12px 8px 12px 12px;
        }

so I can do a generic:

type: heading
heading: Schakelaars
heading_style: title
card_mod:
  class: class-section-heading

but, when I require some colorized notification in that header, I can combine the class with a local card_mod for the colors, depending on a state:

    - type: heading
      heading: Aanwezigheid
      heading_style: title
      card_mod:
        class: class-section-heading-no-color
        style: |
          ha-card.type-heading {
            {% set thuis = is_state('binary_sensor.familie_thuis','on') %}
            background: {{'green' if thuis else 'dimgray'}};
            --ha-heading-card-title-color:
              {{'var(--active-color)' if thuis else 'black'}} !important;
          }

for now this is flexibility enough.

I do still hope to be able to find the element for the individual entity in the badges in the header

matata · October 4, 2024, 6:54am

Hello and please… is possible styling new badge?

type: entity
show_name: false
show_state: true
show_icon: true
entity: input_boolean.vacuum_automaticke_vysavani_zahajeno
color: ""
card_mod:
  style:
    /*code*/

TimoJ · October 4, 2024, 10:38am

HA 2024.10 has added “from the top” open animations to all dialog/more-info popup windows (or made them more visible/annoying than before). Is it possible to remove them or adjust animation timing with a card mod theme?
I can’t figure out what I should change.

Ildar_Gabdullin · October 4, 2024, 11:35am

It could be caused by a slower opening the popups. Check if this happens on a fresh HA setup or in a safe mode.

Mariusthvdb · October 4, 2024, 11:44am

no, it’s new, and though initially I liked it on the restart menu, (for me that is not inside the user side of HA), I have grown to find them truly obnoxious in all confirmation popups etc etc.

There must be some setting we can kill the animation for…

let’s find the PR that added it

suppose its the move to ha-md-dialog

github.com/home-assistant/frontend

Migrate dialog restart to ha-md-dialog

home-assistant:dev ← home-assistant:dialog-restart-md

opened 02:31PM - 19 Sep 24 UTC

wendevlin

+190 -169

## Breaking change  ## Proposed change  For the restart dialog use the material/web based ha-md-dialog instead of the ha-dialog. - Add workaround for ha-md-dialog to open a dialog inside a dialog - Add chevrons to restart actions ## Type of change  - [x] Dependency upgrade - [ ] Bugfix (non-breaking change which fixes an issue) - [ ] New feature (thank you!) - [ ] Breaking change (fix/feature causing existing functionality to break) - [ ] Code quality improvements to existing code or addition of tests ## Example configuration  ```yaml ``` ## Additional information  - This PR fixes or closes issue: fixes # - This PR is related to issue or discussion: - Link to documentation pull request: ## Checklist  - [ ] The code change is tested and works locally. - [ ] There is no commented out code in this PR. - [ ] Tests have been added to verify that the new code works. If user exposed functionality or configuration variables are added/changed: - [ ] Documentation added/updated for [www.home-assistant.io][docs-repository]  [docs-repository]: https://github.com/home-assistant/home-assistant.io ## Summary by CodeRabbit - **New Features** - Enhanced dialog functionality allowing multiple dialogs to overlay. - Transitioned to a Material Design dialog for improved visual consistency. - Added close button with an icon in the dialog header for better accessibility. - Updated list items for streamlined interactivity and context. - Improved layout consistency with new padding for slotted content. - **Bug Fixes** - Improved state management when closing dialogs. - **Chores** - Simplified internal methods for cleaner code and maintainability.

and

github.com/home-assistant/frontend

Migrate dialog-box to ha-md-dialog

home-assistant:dev ← home-assistant:dialog-box-md

opened 12:03PM - 17 Sep 24 UTC

wendevlin

+78 -64

## Breaking change  ## Proposed change  Us the material/web dialog ha-md-dialog for all dialog-boxes. ## Type of change  - [ ] Dependency upgrade - [ ] Bugfix (non-breaking change which fixes an issue) - [ ] New feature (thank you!) - [ ] Breaking change (fix/feature causing existing functionality to break) - [x] Code quality improvements to existing code or addition of tests ## Example configuration  ```yaml ``` ## Additional information  - This PR fixes or closes issue: fixes # - This PR is related to issue or discussion: - Link to documentation pull request: ## Checklist  - [ ] The code change is tested and works locally. - [ ] There is no commented out code in this PR. - [ ] Tests have been added to verify that the new code works. If user exposed functionality or configuration variables are added/changed: - [ ] Documentation added/updated for [www.home-assistant.io][docs-repository]  [docs-repository]: https://github.com/home-assistant/home-assistant.io ## Summary by CodeRabbit - **New Features** - Introduced a new dialog structure with enhanced action handling. - Updated dialog buttons for improved clarity and functionality. - **Improvements** - Added specific styles for alert dialogs to ensure consistent width. - Enhanced responsiveness of non-alert dialogs with media queries. - Improved rendering logic for dialog titles and content. - **Bug Fixes** - Improved handling of dialog states for cancellation and confirmation actions.

Ildar_Gabdullin · October 4, 2024, 11:46am

I really do not recall a similar PR… Will check it.
(have not noticed any changes in showing popups by my eyes)

TimoJ · October 4, 2024, 11:50am

It happens also in safe mode. Even restart options popup appears slowly/animated.

Ildar_Gabdullin · October 4, 2024, 11:55am

I also found only this md-dialog-box related PR but not sure if it is related…

Mariusthvdb · October 4, 2024, 12:01pm

yeah its here alright: frontend/src/components/ha-md-dialog.ts at 365b7129767cbc5278fe16eeed71689be771ae42 · home-assistant/frontend · GitHub

TimoJ · October 4, 2024, 12:01pm

Animation also makes more info charts to appear laggy. First I thought that my database was working very slowly but it’s just the animation… I can also see right side scrollbar appearing and then disappearing when the popup is fully shown. It looks bad.

popup1
popup2

Ildar_Gabdullin · October 4, 2024, 12:13pm

If this is not only about an animation but also about a general look - would be great to have 2 pictures side-by-side for comparing: old vs new.
(cannot do it myself, left & do not have access to PC)

Mariusthvdb · October 4, 2024, 12:38pm

at least I have my squared boxes back

Schermafbeelding 2024-10-04 om 14.38.45

    md-dialog-container-shape-start-start: var(--ha-card-border-radius)
    md-dialog-container-shape-start-end: var(--ha-card-border-radius)
    md-dialog-container-shape-end-start: var(--ha-card-border-radius)
    md-dialog-container-shape-end-end: var(--ha-card-border-radius)

no other overall variable, had to set all corners…

the silly animation is still there though

Ildar_Gabdullin · October 6, 2024, 8:43pm

Suggest you to ask in the card-mod thread, this is about themes.
Also, check the 1st post in the card-mod thread - link at the bottom - weather card, it may be useful.