šŸ’” UI eXtension - Add CSS styles to (almost) any part of the Home Assistant UI

Share your Projects! Custom Integrations
245

that syntax is really oddā€¦

take out the keyframe from the condition, and do:

card_mod:
  style:
    mushroom-entity-chip:nth-child(2)$: |
      ha-state-icon {
        animation: {{'fountain 1.5s ease infinite' if is_state('switch.fontein','on')  else 'none' }} 
      };
      @keyframes fountain {
        0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
        50% { clip-path: polygon(0 100%, 0 47%, 100% 47%, 100% 100%); }
        60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
        70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
        80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }

I didnt check if that actually works in the card because as Arganto says there are more than a few other syntax issues or, whether you target the correct element, not using mushroom myself.
Try with a minimal failing config and fix that step by step

also, since this is UIX thread, move to use that :wink:

1 Like
246

Adding to what others have suggested, ā€˜#ā€™ is not valid here. If you wish to comment out this needs to be CSS comment here /* */

You have not shared what issue you are seeing. That would help for reveiw.

I have tested a simple application of mushroom-entity-chip:nth-child(2)$: and it is working fine. So tidy up your templates, fix the CSS comment and see if that helps. Otherwise a single chip config would be much better than many as any issue you are seeing can be narrowed down.

1 Like
247

UIX styling yaml selectors are not CSS, but selectors on where to apply UIX.

Now UIX has template macros, the easiest way would be to use a macro for the common CSS and then include in each yaml CSS string.

Also, what are you trying to achieve? button-card ha-card shadow root only contains the slot of the container which is in light DOM. button-card also has its own styling so with variables you can likely achieve all you need without UIX at all.

248

Iā€™m reading up on Themes and would like to be able to use a Theme to house a chunk of UIX that I use on every instance of the hue-like-light-card across all my dashboards but, as usual :slight_smile:, Iā€™m struggling to understand what needs to go on the lines before the actual CSS in the theme yaml file from looking at the entities row example in the docs.

My UIX entry looks like this:

uix:
  style: |
    .text-area h2 {
      font-size: 14px !important;
    }
    ha-card {
      margin-bottom: -4px;
    }
    ha-icon::after {
      content: " ";
      top: -15%;
      left: -4px;
      height: 130%;
      width: 130%;
      border-radius: 50%;
      border: 0px;
      background-color: rgba(44, 44, 44, 0.5);
      position: absolute;
      z-index: -1;
    }
249

This was the trick dcapslock!
Thank you kindly for resolving it!
:slight_smile:

1 Like
250

Thank you for reply too Marius!
Unfort that didnā€™t workā€¦
But only the animation notā€¦
Just in case ya wanted to knownā€¦
Meanwhile im on uixā€¦and all worksā€¦yay!
Groetjes daar!.. :upside_down_face:

2 Likes
251

haha, jij ook, succes

1 Like
252

Thanks for the answer.

I already expected this, but my main intention was to raise awareness for this sort of edge case because I thought maybe noone has considered the case that two YAML selectors match the same slot and since YAML selectors use CSS syntax without detailed knowledge I would have guessed that they also share the same logic when it comes to merging.

Thank you for the interesting suggestion of using template macros. I will keep this in mind but in this case itā€™s maybe a little bit too much as itā€™s just two rules.

The reason Iā€™m doing it this way is that I try to aggressively circumvent code repetions to keep the code short and maintainable. The goal is to have multiple button cards displayed as if they were one card. Sort of like vertical-stack-in-card with horizontal layout, borders between the cards and in some cases unequal card widths. The first version of this I created quite some time ago before I had all the knowledge I have today so it might not be optimal.

The button-cards are placed in a grid-layout-card which itself is in a mod-card because grid-layout does not use ha-card or hui-card. I use uix to apply styles to the ha-card of mod-card to make it look like a real card and remove any margins and paddings from the grid- and button-cards and also set their borders correctly.

You are right that I could use the style properties of the button-cards for it and in the beginning I did that but it required a lot of code repetitions. Back then I used frontend manahed dashboards so YAML anchors were no option as well.

253

You could apply uix on the button-cards directly, only set a class, and put your css in a theme. All much tidier and less lines of code.

254

Just came here to sayā€¦

uix_path($0)

Bless you Darren :sparkling_heart:

2 Likes
255

:stopwatch: Not long nowā€¦ :stopwatch:

I was away last week so behind in the new feature I have alluded to recently.

What is it :question:

element is card, badge, row and in future other types including picture-element, sections

  • would you like to template everything of stock/custom Frontend elements?
  • would you like to have actions send data to that element which can then be used in templates? (think buttons to change any parameter of an element including visibility)
  • would you like to add tooltips to a target element in the element?
  • would you like to change a data attribute of an element? (test use case being add/remove/change title attribute to alter Browserā€™s tooltip behaviour)
  • would you like to add a tile icon to the element, with action support?
  • would you like to add a state badge to the element?
  • would you like to save your shared config for thing (it will have a real name) in UIX integration backend, making the configs available everywhere not just one dashboard in UI mode?
  • would you like a system where element augmentations can be requested and are easily added without breaking core thing?

Well, soon this will be available. Not long now until UIX 6.0.0-beta.1

5 Likes
256

Talking about that Darrynā€¦
Is it possible to add this in theme.yaml ?

uix:
    style:
       ha-tile-info$: |
        .info {
         margin-top: -12px!important;
          }
         ha-tile-icon$: |
         div.container {
         margin-top: -9px;
         } 
         .container::before {
           opacity: 0 !important;
         }
       .: |
         ha-card {
         height: 42px !important;
         }

That way all my tiles i have are all the sameā€¦
Instead adding it in all cardsā€¦
Thanksā€¦

257

Yes. Check out theme doco if you are new to themes.

1 Like
258

a little guidline is needed thoā€¦
did try several things now but guess im to stupid
uix-card: | not working
uix-tile-yaml neighterā€¦
using the wrong syntacs?
always keen to learn new thingsā€¦

259

Maker sure you have defined uix-theme to match your theme name.

1 Like
260

For a starter (and this may not be the entire solution), it will need to be uix-card-yaml: | as you are trying to create classes with shadow roots.

See ā€˜Updating uix-<thing> variable to uix-<thing>-yaml variableā€™ here.

Incidentally, @dcapslock, for the example code given on that page under ā€˜Navigating the shadow DOMā€™, shouldnā€™t it read uix-row-yaml: | - or have I misunderstood?

1 Like
261

heck yes I would :wink:

if all of those GitHub repo notifications we got last couple of days are anything to go by, weā€™re in for some exciting news and features indeedā€¦

holding breath/crossing fingers hereā€¦
dont wait too long now Darryn

Iā€™d love to step into the forge of my setup and mold those new features into shape, letting sparks fly as I hammer them into place on the anvil.

1 Like
262

hi m8ā€¦
yeah i did try thisā€¦
also i have that theme stuff inā€¦(already had with card-mod)
but the uix-card-yaml:
did mess up the whole setupā€¦
so that wasnā€™t indeed the trickā€¦
guess i need more help on thisā€¦
underneath is what i have and works for anything i needed
but not for the tile card as i postedā€¦

  uix-theme: light
  uix-card: |
    ha-card {
    border: 1px outset grey !important;
    }
    :host {
    --mdc-text-field-idle-line-color: transparent;
    }

so im a bit lost nowā€¦(guess age plays a trick) lol

263

Good pick up. Thank you. I have updated just now.

1 Like
264

As per advice from @reste_narquois, look at the format when using uix-<thing>-yaml, in your case uix-card-yaml. Check out the doco on updating Updating uix-<thing> variable to uix-<thing>-yaml variable

1 Like