YES, THANK YOU!!!
This worked perfectly, finally I can hand over the dashboard to my spouse 
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
[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.
Hello!
Where can I find the layouts mentioned in your code?
Thanks
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.
Some more options to make my rounded dashboard complete.
1 Like
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.
7 Likes
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!
How about sharing the code? Really like the Network devices page! Nice work, can I steel some of it?
/Thek
Got a yaml for your entire Dashboard ?? This looks insane!
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
3 Likes
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%); }
}
1 Like
Ah brilliant! I was trying to do this originally, but via an iframe.
Might give this a go later 
1 Like
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.
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
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%); }
}
2 Likes
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
3 Likes
Or you create a custom card. 
Ive alread made it. I just dont find/know the service call to open the voice assistant.
1 Like
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
1 Like
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.
Where do i need to paste that yaml code in the theme.yaml?
Of could you update your github ?