🟣 Rounded - Dashboard guide

[remsta (Remi)]

Anyone got any info on how you can get a single banner across the top? and then the individual lights underneath?
https://www.reddit.com/r/homeassistant/comments/17fc5nc/home_assistant_tablet_dashboard/#lightbox

[uszek]

YES, THANK YOU!!!
This worked perfectly, finally I can hand over the dashboard to my spouse

[uszek]

You can try using the vertical stack, something like mushroom title card as first, and below it add the grid with your light toggles.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Lights
    alignment: center
  - square: true
    type: grid
    cards:
      - type: custom:mushroom-light-card
        entity: light.your_light_entity_here
        fill_container: true
        layout: vertical
      - type: custom:mushroom-light-card
        entity: light.your_light_entity_here
        fill_container: true
        layout: vertical
      - type: custom:mushroom-light-card
        entity: light.your_light_entity_here
        fill_container: true
        layout: vertical

[Tchikaboum]

[quote=“LE0N, post:2, topic:543043”]

6 zone cards

Here we also highlight one of the six buttons. In the code I use two helpers. A toggle for selecting and deselecting the area and a date helper for keeping track of the last cleaned date.

type: custom:button-card
icon: mdi:sofa-single
entity: input_boolean.woonkamer_robotstofzuiger_selecteren_voor_stofzuigen
name: Woonkamer
label: '[[[return states["sensor.robotstofzuiger_laatst_actief_woonkamer"].state ]]]'
show_label: true
tap_action:
  action: toggle
  haptic: medium
state:
  - value: 'on'
    styles:
      card:
        - background-color: var(--yellow)
        - box-shadow: none
      icon:
        - color: var(--black)
      name:
        - color: var(--black)
      label:
        - color: var(--black)
        - opacity: '0.5'
  - value: 'off'
    styles:
      card:
        - background: var(--contrast2)
        - box-shadow: none
      icon:
        - width: 24px
        - color: var(--contrast20)
      name:
        - color: var(--contrast20)
      label:
        - color: var(--contrast9)
styles:
  icon:
    - width: 24px
  img_cell:
    - justify-content: flex-start
    - margin-top: '-4px'
  name:
    - font-family: In case of a custom font, otherwise you can remove this line
    - justify-self: start
    - font-size: 12px
    - margin-bottom: 0px
  card:
    - height: 84px
    - border-radius: 24px
    - padding: 12px 0 12px 14px
    - box-sizing: border-box
    - '--mdc-ripple-press-opacity': 0
  label:
    - font-family: In case of a custom font, otherwise you can remove this line
    - justify-self: start
    - font-size: 12px

Hi everyone, if somone can help me with this one. I would like to add helpers for each room, but I don’t know how to make it. I have already all numbers for each room

Thanks a lot and have a nice day.

[NdR (Andrea Montanari)]

Hello!

Where can I find the layouts mentioned in your code?

Thanks

[Nemu]

Bit off topic, but as I mentioned, that I will release my swipe card here. I just want to share the link to my post with github page.

CSS-Swip-Card - Simple Swipe card with lots of customization options

Hello Community, here is my CSS-Swipe-Card, which is my first custom card for Home Assistant. I´ve created it for my personal use in the first place, but as it´s working really well, I´m sure others might enjoy it too. CSS-Swipe-Card Yes, there is already a swiper-card. First, this card is amazing and comes with lots of features. So why a new card? my card is based on CSS and JS and is not based on a third party library With CSS-Swipe-Card you can use custom:button-card with nested buttons …

Some more options to make my rounded dashboard complete.

[beecho01 (James Beeching)]

Hi All,

Wanted to show what I’ve been doing based off the rounded theme.
Happy to answer any questions .

---

Added specific assistant targeting via an animated image custom:button-card.

---

Imported a card_mod css change to the theme (with slight modifications) to the rounding and animation on the sidebar selection, found in: GitHub - Nerwyn/material-rounded-theme: A Material You and Google Home app influenced theme for Home Assistant

---

Used some styling cues from the Unifi application that I am fond of, showing a status dot and arrows.

---

A nice clean sub-view of important devices based on similar styling to the above.

---

Another view of an important sub-view.

[NdR (Andrea Montanari)]

Thank you @beecho01

I’m testing Assist with OpenAI APIs and I was searching for a nice way to use it from my rounded dashboard. Thanks!

[Thekholm]

How about sharing the code? Really like the Network devices page! Nice work, can I steel some of it?

/Thek

[laurens362]

Got a yaml for your entire Dashboard ?? This looks insane!

[beecho01 (James Beeching)]

Hi All,

I have set up a quick GitHub repository as I was exceeding the character limit on here!
beecho01/homeassistant-setup

Big thanks for the feedback. It’s really validating!

Thanks
beecho01

[Nemu]

If you like to apply some custom styling to your chatbot (like color changes, when its recording or background colors),
here a button card with the whole imtegration of the code pen code.
just needs some more “love”/adjustments to keep the animation from running infinite.

type: custom:button-card
entity: your.entity_id
name: Chatbot
label: Animated
show_name: true
show_state: false
show_icon: false
show_label: true
tap_action:
  action: none
styles:
  grid:
    - grid-template-areas: '"n ." "l ."'
    - grid-template-columns: 1fr min-content
    - grid-template-rows: 1fr min-content
  card:
    - padding: 32px
    - background: var(--background-color)
    - height: 256px
  name:
    - justify-self: start
    - align-self: end
    - margin: 0 0 0 8px
    - font-size: var(--fs-400)
    - font-family: Montserrat
    - font-weight: 500
    - color: var(--primary-text-color)
    - opacity: 0.66
    - z-index: 1
  label:
    - justify-self: start
    - align-self: end
    - margin: 0 0 8px 8px
    - font-size: var(--fs-600)
    - font-family: Montserrat
    - font-weight: 500
    - color: var(--primary-text-color)
    - z-index: 1
  custom_fields:
    custom_html:
      - position: absolute
      - left: 0
      - top: 0
      - right: 0
      - bottom: 0
      - z-index: 0
custom_fields:
  custom_html: |
    [[[
      return `
      <div class="container">
        <div id="chatbot">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div id="chatbot-corner"></div>
        <div id="antenna">
          <div id="beam"></div>
          <div id="beam-pulsar"></div>
        </div>
      </div>
      `
    ]]]
extra_styles: |
  .container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 200px;
    width: 200px;
    animation: up-down 7.5s infinite ease-in-out;
  }
  #chatbot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 85px;
    border: 12px solid #3D3E45;
    border-radius: 80px;
  }
  #chatbot-corner {
    position: absolute;
    top: 140px;
    left: 55px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 25px solid #3D3E45;
    transform: rotate(140deg);
  }
  #antenna {
    position: absolute;
    top: 25px;
    left: 100px;
    height: 20px;
    width: 10px;
    background-color: #3D3E45;
    animation: antenna-appear 7.5s infinite ease-in-out;
  }
  #beam {
    position: absolute;
    top: -12px;
    left: -5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #3D3E45;
    animation: beam-appear 7.5s infinite ease-in-out;
  }
  #beam-pulsar {
    position: absolute;
    top: -12px;
    left: -5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #3D3E45;
    animation: beam-pulsar-appear 7.5s infinite ease-in-out;
  }
  .dot {
    height: 17.5px;
    width: 17.5px;
    position: absolute;
    top: 50%;
    background-color: #3D3E45;
    border-radius: 50%;
    animation: pulse-outer 7.5s infinite ease-in-out;
  }
  .dot:nth-child(1) {
    left: 30px;
    transform: translateY(-50%);
  }
  .dot:nth-child(2) {
    left: 75px;
    transform: translate(-50%, -50%);
    animation: pulse-inner 7.5s infinite ease-in-out;
    animation-delay: 0.2s;
  }
  .dot:nth-child(3) {
    right: 30px;
    transform: translateY(-50%);
    animation-delay: 0.4s;
  }
  @keyframes pulse-inner {
    0% { transform: translate(-50%, -50%) scale(1); }
    7.5% { transform: translate(-50%, -50%) scale(1.5); }
    15% { transform: translate(-50%, -50%) scale(1); }
    22.5% { transform: translate(-50%, -50%) scale(1.5); }
    30% { transform: translate(-50%, -50%) scale(1); }
    37.5% { transform: translate(-50%, -50%) scale(1.5); }
    45% { transform: translate(-50%, -50%) scale(1) rotate(-370deg); height: 17.5px; border-radius: 50%; }
    50% { transform: translate(-50%, -50%) rotate(10deg); height: 10px; border-radius: 50% 50% 48px 48px / 50% 50% 30px 30px; }
    55% { transform: translate(-50%, -50%) rotate(-10deg); }
    60% { transform: translate(-50%, -50%) rotate(10deg); }
    65% { transform: translate(-50%, -50%) rotate(0deg); }
    85% { transform: translate(-50%, -50%) rotate(0deg); height: 10px; border-radius: 50% 50% 48px 48px / 50% 50% 30px 30px; }
    92.5% { transform: translate(-50%, -50%) rotate(0deg); height: 10px; border-radius: 50% 50% 40px 40px / 50% 50% 25px 25px; }
    100% { transform: translate(-50%, -50%) rotate(-360deg); height: 17.5px; border-radius: 50%; }
  }
  @keyframes pulse-outer {
    0% { transform: translateY(-50%) scale(1); }
    7.5% { transform: translateY(-50%) scale(1.5); }
    15% { transform: translateY(-50%) scale(1); }
    22.5% { transform: translateY(-50%) scale(1.5); }
    30% { transform: translateY(-50%) scale(1); }
    37.5% { transform: translateY(-50%) scale(1.5); }
    45% { transform: translateY(-50%) scale(1); height: 17.5px; }
    55% { transform: translateY(-50%) scale(1); height: 5px; }
    60% { height: 17.5px; }
    75% { height: 17.5px; }
    80% { transform: translateY(-50%) scale(1); height: 5px; }
    85% { height: 17.5px; }
    100% { height: 17.5px; }
  }
  @keyframes antenna-appear {
    0% { visibility: hidden; top: 45px; height: 0 }
    50% { visibility: hidden; top: 45px; height: 0 }
    55% { visibility: visible; top: 25px; height: 20px; }
    95% { visibility: visible; top: 25px; height: 20px; }
    100% { top: 45px; height: 0; }
  }
  @keyframes beam-appear {
    0% { visibility: hidden; top: -12px; height: 0 }
    50% { visibility: hidden; top: -12px; height: 0 }
    55% { visibility: visible; top: -12px; height: 20px; width: 20px; }
    100% { visibility: visible; top: -12px; height: 20px; width: 20px; }
  }
  @keyframes beam-pulsar-appear {
    0% { visibility:hidden; top: -12px; height: 0 }
    50% { visibility: hidden; top: -12px; height: 0 }
    55% { visibility: visible; top: -12px; left: -5px; height: 20px; width: 20px; opacity: 1 }
    65% { top: -25px; left: -15px; height: 40px; width: 40px; opacity: 0; visibility: visible; }
    74% { visibility: hidden; opacity: 0; }
    75% { visibility: visible; top: -12px; left: -5px; height: 20px; width: 20px; opacity: 1 }
    85% { top: -25px; left: -15px; height: 40px; width: 40px; opacity: 0; visibility: visible; }
    94% { visibility: hidden; opacity: 0; }
    100% { visibility: hidden; opacity: 0; }
  }
  @keyframes up-down {
    0% { transform: translate(-50%, -50%); }
    12.5% { transform: translate(-50%, -48%); }
    25% { transform: translate(-50%, -50%); }
    37.5% { transform: translate(-50%, -48%); }
    50% { transform: translate(-50%, -50%); }
    62.5% { transform: translate(-50%, -48%); }
    75% { transform: translate(-50%, -50%); }
    87.5% { transform: translate(-50%, -48%); }
    100% { transform: translate(-50%, -50%); }
  }

[beecho01 (James Beeching)]

Ah brilliant! I was trying to do this originally, but via an iframe.
Might give this a go later

[Nemu]

yeah, I guess I have seen one guy using button card as I do, with extra styles. That opened the doors to a new world for me. The card and code gets so clean and straight forward. I use it a lot in my upcoming dashboard.

[beecho01 (James Beeching)]

Do you know if I can use root variable css in this method. I wanted to scale based on a variable calculation, rather than fixed values. I think the one in the animated picture is 40px or similar. The codepen one is 200px if I remember correctly.

Something like:

:root {
  --width: 40;
  --scaler: calc(var(--width) / 200);
}

Or could you add something like that in the theme file to be called as a global variable?

Thanks
beecho01

[Nemu]

I have adjusted the code of the chatbot card.

• used font-size in px instead of my predefined values
• deleted font-family
• adjusted the keyframes as I missed the detail, that the mouth is spinning to the bottom and up again. Now it should be pretty identical with the original animation

type: custom:button-card
entity: your.entity_id
name: Chatbot
label: Animated
show_name: true
show_state: false
show_icon: false
show_label: true
tap_action:
  action: none
styles:
  grid:
    - grid-template-areas: '"n ." "l ."'
    - grid-template-columns: 1fr min-content
    - grid-template-rows: 1fr min-content
  card:
    - padding: 32px
    - background: white
    - height: 256px
  name:
    - justify-self: start
    - align-self: end
    - margin: 0 0 0 8px
    - font-size: 16px
    - font-weight: 500
    - color: black
    - opacity: 0.66
    - z-index: 1
  label:
    - justify-self: start
    - align-self: end
    - margin: 0 0 8px 8px
    - font-size: 24px
    - font-weight: 500
    - color: black
    - z-index: 1
  custom_fields:
    custom_html:
      - position: absolute
      - left: 0
      - top: 0
      - right: 0
      - bottom: 0
      - z-index: 0
custom_fields:
  custom_html: |
    [[[
      return `
      <div class="container">
        <div id="chatbot">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
        <div id="chatbot-corner"></div>
        <div id="antenna">
          <div id="beam"></div>
          <div id="beam-pulsar"></div>
        </div>
      </div>
      `
    ]]]
extra_styles: |
  .container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 200px;
    width: 200px;
    animation: up-down 7.5s infinite ease-in-out;
  }
  #chatbot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 85px;
    border: 12px solid #3D3E45;
    border-radius: 80px;
  }
  #chatbot-corner {
    position: absolute;
    top: 140px;
    left: 55px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 25px solid #3D3E45;
    transform: rotate(140deg);
  }
  #antenna {
    position: absolute;
    top: 25px;
    left: 100px;
    height: 20px;
    width: 10px;
    background-color: #3D3E45;
    animation: antenna-appear 7.5s infinite ease-in-out;
  }
  #beam {
    position: absolute;
    top: -12px;
    left: -5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #3D3E45;
    animation: beam-appear 7.5s infinite ease-in-out;
  }
  #beam-pulsar {
    position: absolute;
    top: -12px;
    left: -5px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #3D3E45;
    animation: beam-pulsar-appear 7.5s infinite ease-in-out;
  }
  .dot {
    height: 17.5px;
    width: 17.5px;
    position: absolute;
    top: 50%;
    background-color: #3D3E45;
    border-radius: 50%;
    animation: pulse-outer 7.5s infinite ease-in-out;
  }
  .dot:nth-child(1) {
    left: 30px;
    transform: translateY(-50%);
  }
  .dot:nth-child(2) {
    left: 75px;
    transform: translate(-50%, -50%);
    animation: pulse-inner 7.5s infinite ease-in-out;
    animation-delay: 0.2s;
  }
  .dot:nth-child(3) {
    right: 30px;
    transform: translateY(-50%);
    animation-delay: 0.4s;
  }
  @keyframes pulse-inner {
    0% { transform: translate(-50%, -50%) scale(1); }
    7.5% { transform: translate(-50%, -50%) scale(1.5); }
    15% { transform: translate(-50%, -50%) scale(1); }
    22.5% { transform: translate(-50%, -50%) scale(1.5); }
    30% { transform: translate(-50%, -50%) scale(1); }
    37.5% { transform: translate(-50%, -50%) scale(1.5); }
    45% { transform: translate(-50%, -50%) scale(1) rotate(-360deg); height: 17.5px; border-radius: 50%; }
    50% { transform: translate(-50%, 100%) scale(1.5) rotate(10deg); height: 10px; border-radius: 50% 50% 48px 48px / 50% 50% 30px 30px; }
    55% { transform: translate(-50%, 100%) scale(1.5) rotate(-10deg); }
    60% { transform: translate(-50%, 100%) scale(1.5) rotate(10deg); }
    65% { transform: translate(-50%, 100%) scale(1.5) rotate(0deg); }
    85% { transform: translate(-50%, 100%) scale(1.5) rotate(0deg); height: 10px; border-radius: 50% 50% 48px 48px / 50% 50% 30px 30px; }
    92.5% { transform: translate(-50%, 100%) scale(1.5)rotate(0deg); height: 10px; border-radius: 50% 50% 40px 40px / 50% 50% 25px 25px; }
    95% { transform: translate(-50%, -40%) scale(1.5)rotate(-360deg); height: 17.5px; border-radius: 50%; }
    100{ transform: translate(-50%, -50%) scale(1); }
  }
  @keyframes pulse-outer {
    0% { transform: translateY(-50%) scale(1); }
    7.5% { transform: translateY(-50%) scale(1.5); }
    15% { transform: translateY(-50%) scale(1); }
    22.5% { transform: translateY(-50%) scale(1.5); }
    30% { transform: translateY(-50%) scale(1); }
    37.5% { transform: translateY(-50%) scale(1.5); }
    45% { transform: translateY(-50%) scale(1); height: 17.5px; }
    55% { transform: translateY(-50%) scale(1); height: 5px; }
    60% { height: 17.5px; }
    75% { height: 17.5px; }
    80% { transform: translateY(-50%) scale(1); height: 5px; }
    85% { height: 17.5px; }
    100% { height: 17.5px; }
  }
  @keyframes antenna-appear {
    0% { visibility: hidden; top: 45px; height: 0 }
    50% { visibility: hidden; top: 45px; height: 0 }
    55% { visibility: visible; top: 25px; height: 20px; }
    95% { visibility: visible; top: 25px; height: 20px; }
    100% { top: 45px; height: 0; }
  }
  @keyframes beam-appear {
    0% { visibility: hidden; top: -12px; height: 0 }
    50% { visibility: hidden; top: -12px; height: 0 }
    55% { visibility: visible; top: -12px; height: 20px; width: 20px; }
    100% { visibility: visible; top: -12px; height: 20px; width: 20px; }
  }
  @keyframes beam-pulsar-appear {
    0% { visibility:hidden; top: -12px; height: 0 }
    50% { visibility: hidden; top: -12px; height: 0 }
    55% { visibility: visible; top: -12px; left: -5px; height: 20px; width: 20px; opacity: 1 }
    65% { top: -25px; left: -15px; height: 40px; width: 40px; opacity: 0; visibility: visible; }
    74% { visibility: hidden; opacity: 0; }
    75% { visibility: visible; top: -12px; left: -5px; height: 20px; width: 20px; opacity: 1 }
    85% { top: -25px; left: -15px; height: 40px; width: 40px; opacity: 0; visibility: visible; }
    94% { visibility: hidden; opacity: 0; }
    100% { visibility: hidden; opacity: 0; }
  }
  @keyframes up-down {
    0% { transform: translate(-50%, -50%); }
    12.5% { transform: translate(-50%, -48%); }
    25% { transform: translate(-50%, -50%); }
    37.5% { transform: translate(-50%, -48%); }
    50% { transform: translate(-50%, -50%); }
    62.5% { transform: translate(-50%, -48%); }
    75% { transform: translate(-50%, -50%); }
    87.5% { transform: translate(-50%, -48%); }
    100% { transform: translate(-50%, -50%); }
  }

[beecho01 (James Beeching)]

I’ve just answered my own question with a quick test too.

Adding the following into my theme to allow scaling via one value change and colours by mode:

  assistant-width: 50
  assistant-scaler: calc(var(--assistant-width) / 200)

  modes:
    dark:
      assistant-color: var(--white1)
    light:
      assistant-colour: var(--black1)

Reloading the yaml via restart and then adding the button config:

type: custom:button-card
show_name: false
show_state: false
show_icon: false
show_label: false
tap_action:
  action: none
styles:
  grid:
    - grid-template-areas: '"."'
    - grid-template-columns: min-content
    - grid-template-rows: min-content
  card:
    - padding: 32px
    - background: var(--background-color)
    - height: max-content
custom_fields:
  custom_html: |
    [[[
      return `
      <div class="assistant-container">
          <div id="assistant">
              <div class="assistant-dot"></div>
              <div class="assistant-dot"></div>
              <div class="assistant-dot"></div>
          </div>
          <div id="assistant-corner"></div>
          <div id="assistant-antenna">
              <div id="assistant-beam"></div>
              <div id="assistant-beam-pulsar"></div>
          </div>
      </div>
      `
    ]]]
extra_styles: |
  .assistant-container {
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    height: calc(200px * var(--assistant-scaler));
    width: calc(200px * var(--assistant-scaler));
    animation: up-down 7.5s infinite ease-in-out;
    background-color: var(--background-color);
  }
  .assistant-container #assistant {
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    width: calc(150px * var(--assistant-scaler));
    height: calc(85px * var(--assistant-scaler));
    border: calc(12px * var(--assistant-scaler)) solid var(--assistant-color);
    border-radius: 5rem;
  }
  .assistant-container #assistant-corner {
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    top: calc(105px * var(--assistant-scaler));
    left: calc(-65px * var(--assistant-scaler));
    width: 0;
    height: 0;
    border-left: calc(20px * var(--assistant-scaler)) solid transparent;
    border-right: calc(20px * var(--assistant-scaler)) solid transparent;
    border-top: calc(25px * var(--assistant-scaler)) solid var(--assistant-color);
    transform: rotate(140deg);
  }
  .assistant-container #assistant-antenna {
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    top: calc(-125px * var(--assistant-scaler));
    height: calc(20px * var(--assistant-scaler));
    width: calc(10px * var(--assistant-scaler));
    background-color: var(--assistant-color);
    animation: antenna-appear 7.5s infinite ease-in-out;
  }
  .assistant-container #assistant-antenna #assistant-beam {
    position: absolute;
    top: calc(-12.5px * var(--assistant-scaler));
    left: calc(-5px * var(--assistant-scaler));
    height: calc(20px * var(--assistant-scaler));
    width: calc(20px * var(--assistant-scaler));
    border-radius: 50%;
    background-color: var(--assistant-color);
    animation: beam-appear 7.5s infinite ease-in-out;
  }
  .assistant-container #assistant-antenna #assistant-beam-pulsar {
    position: absolute;
    top: calc(-12.5px * var(--assistant-scaler));
    left: calc(-5px * var(--assistant-scaler));
    height: calc(20px * var(--assistant-scaler));
    width: calc(20px * var(--assistant-scaler));
    border-radius: 50%;
    background-color: var(--assistant-color);
    animation: beam-pulsar-appear 7.5s infinite ease-in-out;
  }
  .assistant-container .assistant-dot {
    height: calc(17.5px * var(--assistant-scaler));
    width: calc(17.5px * var(--assistant-scaler));
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    left: calc(-65px * var(--assistant-scaler));
    background-color: var(--assistant-color);
    border-radius: 50%;
    animation: pulse-outer 7.5s infinite ease-in-out;
  }
  .assistant-container .assistant-dot:nth-child(2) {
    left: 0;
    animation: pulse-inner 7.5s infinite ease-in-out;
    animation-delay: 0.2s;
  }
  .assistant-container .assistant-dot:nth-child(3) {
    left: calc(65px * var(--assistant-scaler));
    animation: pulse-outer 7.5s infinite ease-in-out;
    animation-delay: 0.4s;
  }
  @keyframes pulse-inner {
      0% { transform: scale(1); }
      7.5% { transform: scale(1.5); }
      15% { transform: scale(1); }
      22.5% { transform: scale(1.5); }
      30% { transform: scale(1); }
      37.5% { transform: scale(1.5); }
      45% { top: 0; transform: scale(1); height: calc(17.5px * var(--assistant-scaler)); border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; transform: rotate(-370deg); }
      50% { top: calc(22.5px * var(--assistant-scaler)); height: calc(10px * var(--assistant-scaler)); border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 3rem; border-bottom-right-radius: 3rem; transform: rotate(10deg); }
      55% { transform: rotate(-10deg); }
      60% { transform: rotate(10deg); }
      65% { transform: rotate(-10deg); }
      85% { top: calc(22.5px * var(--assistant-scaler)); height: calc(10px * var(--assistant-scaler)); border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 3rem; border-bottom-right-radius: 3rem; transform: rotate(0deg); }
      92.5% { top: calc(22.5px * var(--assistant-scaler)); height: calc(10px * var(--assistant-scaler)); border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 2.5rem; border-bottom-right-radius: 2.5rem; transform: rotate(0deg); }
      100% { top: 0; height: calc(17.5px * var(--assistant-scaler)); border-radius: 50%; transform: rotate(-360deg); }
  }
  @keyframes pulse-outer {
      0% { transform: scale(1); }
      7.5% { transform: scale(1.5); }
      15% { transform: scale(1);  }
      22.5% { transform: scale(1.5); }
      30% { transform: scale(1); }
      37.5% {transform: scale(1.5); }
      45% { transform: scale(1); height: calc(17.5px * var(--assistant-scaler)); }
      55% { tranform: scale(1); height: calc(5px * var(--assistant-scaler)); }
      60% { height: calc(17.5px * var(--assistant-scaler)); }
      75% { height: calc(17.5px * var(--assistant-scaler)); }
      80% { tranform: scale(1); height: calc(5px * var(--assistant-scaler)); }
      85% { height: calc(17.5px * var(--assistant-scaler)); }
      100% { height: calc(17.5px * var(--assistant-scaler)); }
  }
  @keyframes antenna-appear {
      0% { visibility: hidden; top: calc(-100px * var(--assistant-scaler)); height: 0; } 
      50% { visibility: hidden; top: calc(-100px * var(--assistant-scaler)); height: 0; }
      55% { visibility: visible; top: calc(-125px * var(--assistant-scaler)); height: calc(20px * var(--assistant-scaler)); }
      95% { visibility: visible; top: calc(-125px * var(--assistant-scaler)); height: calc(20px * var(--assistant-scaler)); }
      100% { top: calc(-100px * var(--assistant-scaler)); height: 0; }
  }
  @keyframes beam-appear {
      0% { visibility: hidden; top: calc(-12.5px * var(--assistant-scaler)); height: 0; }
      50% { visibility: hidden; top: calc(-12.5px * var(--assistant-scaler)); height: 0; }
      55% { visibility: visible; top: calc(-12.5px * var(--assistant-scaler)); height: calc(20px * var(--assistant-scaler)); width: calc(20px * var(--assistant-scaler)); }
      100% { visibility: visible; top: calc(-12.5px * var(--assistant-scaler)); height: calc(20px * var(--assistant-scaler)); width: calc(20px * var(--assistant-scaler)); }
  }
  @keyframes beam-pulsar-appear {
      0% { visibility: hidden; top: calc(-12.5px * var(--assistant-scaler)); height: 0; }
      50% { visibility: hidden; top: calc(-12.5px * var(--assistant-scaler)); height: 0; }
      55% { visibility: visible; top: calc(-12.5px * var(--assistant-scaler)); left: calc(-5px * var(--assistant-scaler)); height: calc(20px * var(--assistant-scaler)); width: cal(20px * var(--assistant-scaler)); opacity: 1; }
      65% { top: calc(-25px * var(--assistant-scaler)); left: calc(-15px * var(--assistant-scaler)); height: calc(40px * var(--assistant-scaler)); width: calc(40px * var(--assistant-scaler)); opacity: 0; visibility: visible; }
      74% { visibility: hidden; opacity: 0; }
      75% { visibility: visible; top: calc(-12.5px * var(--assistant-scaler)); left: calc(-5px * var(--assistant-scaler)); height: calc(20px * var(--assistant-scaler)); width: calc(20px * var(--assistant-scaler)); opacity: 1; }
      85% { top: calc(-25px * var(--assistant-scaler)); left: calc(-15px * var(--assistant-scaler)); height: calc(40px * var(--assistant-scaler)); width: calc(40px * var(--assistant-scaler)); opacity: 0; visibility: visible; }
      94% { visibility: hidden; opacity: 0; }
      100% { visibility: hidden; opacity: 0; }
  }
  @keyframes up-down {
      0% { transform: translate(0); }
      2.5% { transform: translate(0, 2%); }
      25% { transform: translate(0); }
      37.5% { transform: translate(0, 2%); }
      50% { transform: translate(0); }
      62.5% { transform: translate(0, 2%); }
      75% { transform: translate(0); }
      87.5% { transform: translate(0, 2%); }
      100% { transform: translate(0); }
  }

Appears to give me what I am after!

Thanks for your help on this

[Nemu]

Or you create a custom card.
Ive alread made it. I just dont find/know the service call to open the voice assistant.

[Nemu]

Doesnt work on my end. I can see the card loading something and an animation. But its way too big. fill the complete card in white color.

got it working. Failure on my end

[beecho01 (James Beeching)]

I used the standard button card. You can then select assist from the gui interface. Select the specofic assistant.

I then switched to code view and copied it.

Not sure if that helps you work out something.