#I'm stuck on this with card_mod. I get

1 messages · Page 1 of 1 (latest)

woven goblet
# 
type: glance
entities:
  - sensor.date_time_iso
  - sensor.disk_use_percent_home
  - entity: sensor.memory_use_percent
    card_mod:
      style: |
        state-badge {
          {% if states(config.entity) | int < 50 %}
            color: white;
            animation: rotation 2s linear infinite;
          {% else %}
            color: red;
            animation: blink 2s linear infinite;
          {% endif %}
        }
        @keyframes rotation {
          0% { transform: rotate(0deg); }
          100% {transform: rotate(360deg); }
        }
        @keyframes blink {
          50% { opacity: 0; }```(In the screenshot, I change the code from `< 50` to `< 5'` for demonstration.
firefox_EY3HE2CJy7.gif
cosmic remnant
#

Thx - will try it tonight 🙏

woven goblet
#

I forgot to mention something I noticed about your code. You have animation: rotation linear infinite; but it does not have a time interval. (You have this instance and then a second instance that does have the interval.) I removed the time interval from my code and it prevented the animation from working.

#

I was also playing with some card_mod trying to get some other stuff that be modified. The screenshot looks goofy but it is useful to see what changes are being made. (The name Memory Usage ABCDEF was because I was playing with the text alignment and overflow.) yaml div.name { display: true; text-align: right !important; text-overflow: clip !important; color: red; background-color: white; font-weight: bold; font-style: italic; font-family: Helvetica; font-size: 13px; font-stretch: condensed; font-variant: small-caps; letter-spacing: 0px !important; } div { text-align: right; color: darkblue; background-color: lightblue; font-weight: bold; font-family: Arial; font-size: 13px; }

image.png
cosmic remnant
#

I'm still very green around the CSS anchors etc trying to find my feet - It's a learning curve, but should be worth it in the end... 🙂

cosmic remnant
woven goblet
#

You're welcome. If you want to get even fancier with it, you can add an ELIF (or more) for more customization.

cosmic remnant
#

Cool! Thinking of next either making the glance card smaller or the icons bigger... Or chaging the glance card to a custom entities row with the two fans next to each other on a single line to save screen real estate.

woven goblet
#

Meant to get back with you sooner. You'll find you will never finish your dashboard. Just like with your card above, there will be something you want to change, tweak, or improve. Or you'll come across something that you'll want to implement.

#

This is one of my first cards that I "designed". It is a horizontal-stack with a light-brightness-preset-row card and a slider-entity-row card. I ended up not using it but it was a good learning experience.

image.png
#

One of my "main" buttons is oversized and has had several upgrades over the past two years. I've turned them into templates that greatly reduced the amount of repetitve code. I've added a spot that shows how long the light has been on, the current color_temp/RGB, double tapping enable/disables the automatic light automation and shows an indicator, it changes color when the light is using RGB. I recently added a real-time countdown timer showing how long the light will remain on. I more recently embedded a timer-bar-card at the bottom that counts down the timer.

image.png
cosmic remnant
#

so true - It is a constant state of change, but each time it just makes it better 🙂

#

I ended up with this instead of the glance card.

#

I'm slowly but surely getting my head around the CSS anchors to use with card_mod, but it is still al ot of hit and miss. I'm pretty sure if someone who understands it peaks over my shoulders they will crack themselves up laughing...

desert grove
woven goblet
# 
type: horizontal-stack
title: bedroom1
card_mod:
  style: |
    ha-card {
      border: solid 1px var(--primary-text-color);
      background-color: rgba(0, 0, 0, 0)
    }
cards:
  - type: custom:light-brightness-preset-row
    entity: light.bedroom1
    name: ' '
    reverseButtons: true
    customSetpoints: true
    lowBrightness: 30
    medBrightness: 127
    hiBrightness: 255
  - type: custom:slider-entity-row
    entity: light.bedroom1
    toggle: false
    hide_state: true
    hide_when_off: true
    full_row: true
    haptic: light
    min: 5
    step: 10```
#

Now, the big red button above (the one that has the realtime countdown timer)... well that whole thing is about 175 lines of code to replicate the whole thing. I'll see if I can pull some of the important bits of code out and simplify it.

desert grove