How to create a CSS variable using card-mod

@LarsNiet wrote:

I saw this amazing plugin called card-mod which gives you the ability to style (almost) any element within the Home Assistant frontend. Since I am a frontend dev, I just love making everything as pretty and interactive as I can.

The problem with card-mod is that it’s quite limiting. If I really wanted to make my dashboard look like some insane Van Gogh, my ‘ui-lovelace.yaml’ file would be 50.000+ lines long. The problem here is that all styling has to be done inside this file.

Let me give an example to demonstrate this. I just wanted a simple animation for a icon in my custom banner-card. This looks like:

Even though this isn’t some crazy animation it takes up a lot of space in my lovelace files. For this simple animation I need these lines of code:

- type: custom:banner-card
            background: "rgba(0, 0, 0,0.5)"
            heading: "\U0001F39C Sonos"
            row_size: 4
            style: |
              h2 {
                margin: 28px;
              }
              .overlay-strip {
                border-radius: 0 0 20px 20px;
              }
              @-webkit-keyframes ha-icon {
                16.65% {
                  -webkit-transform: translateX(8px);
                  transform: translateX(8px);
                }
                33.3% {
                  -webkit-transform: translateX(-6px);
                  transform: translateX(-6px);
                }
                49.95% {
                  -webkit-transform: translateX(4px);
                  transform: translateX(4px);
                }
                66.6% {
                  -webkit-transform: translateX(-2px);
                  transform: translateX(-2px);
                }
                83.25% {
                  -webkit-transform: translateX(1px);
                  transform: translateX(1px);
                }
                100% {
                  -webkit-transform: translateX(0);
                  transform: translateX(0);
                }
              }
              @keyframes ha-icon {
                16.65% {
                  -webkit-transform: translateX(8px);
                  transform: translateX(8px);
                }
                33.3% {
                  -webkit-transform: translateX(-6px);
                  transform: translateX(-6px);
                }
                49.95% {
                  -webkit-transform: translateX(4px);
                  transform: translateX(4px);
                }
                66.6% {
                  -webkit-transform: translateX(-2px);
                  transform: translateX(-2px);
                }
                83.25% {
                  -webkit-transform: translateX(1px);
                  transform: translateX(1px);
                }
                100% {
                  -webkit-transform: translateX(0);
                  transform: translateX(0);
                }
              }
              ha-icon {
                display: inline-block;
                vertical-align: middle;
                -webkit-transform: perspective(1px) translateZ(0);
                transform: perspective(1px) translateZ(0);
                box-shadow: 0 0 1px rgba(0, 0, 0, 0);
              }
              ha-icon:hover, ha-icon:focus, ha-icon:active {
                -webkit-animation-name: ha-icon;
                animation-name: ha-icon;
                -webkit-animation-duration: 1s;
                animation-duration: 1s;
                -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
                -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;
              }

So, back to my question. Is there any way for me to split my lovelace file up in multiple pieces? I know it’s possible to do something like “style: !include mystyle.yaml” but this did not seem to work.

Any geniuses out here that can help me out?

edit:
After some more testing, just using “style: !include mystyle.yaml” does work. However, if I wanted to use this as a class for multiple elements, this is going to be a pain… Let’s say I wanted to change the margin on my H2 styling for a specific element, I would have to create another file for that. So this is a temporary fix but not what I was looking for.

For people that are interested in how I temporarily “fixed” it. I just changed style to:

style: !include "./css/wobble.yaml"

In the wobble.yaml file I simply copy pasted everything including the “|”.

Posts: 2

Participants: 2

Read full topic