You can’t install it, like I can’t one-click install your configuration. Maybe in the future we’ll have lovelace blueprints?
I want a the loader to appear both when turning on as well as turning off a slow responding device.
OMG 
have you selected the tablet theme in the ha UI?
Thanks, got it after some tweaking!
If anyone runs into the same issue, I had to remove this:
fill="var(--button-card-light-color-no-temperature)"
which was on most of my entities (I had just copied Mattias first examples under “Belysning”, “Skrivbord” etc.). The right code I needed was the one he has defined under “Stäng allt” and “Hemma”
Thanks for your reply i understand now
Sorry to disturb i have a another question, i can’t display my google home and spotify player when i swipe the card with plex it’s empty, see below ( i have a problem with the poster plex because plex is not recognizing the tvshow but it’s a another problem) :
my button card template is up to date :
conditional_media:
template: ['base', 'shared_media']
state_display: >
[[[ if (entity.attributes.media_title === 'Nothing playing' || entity.attributes.media_title === 'No title' && entity.state === 'paused' ) { return 'Inget spelas'; }
if (entity.attributes.media_title === 'No title' && entity.state === 'playing') { return 'Ingen titel'; }
else { return entity.attributes.media_title; } ]]]
custom_fields:
media_image: >
<svg viewBox="0 0 50 50" />
blur: >
[[[ if (entity.attributes.entity_picture != null) {
return '<svg viewBox="0 0 50 50" />'; } ]]]
overlay: >
[[[ if (entity.state != 'off' && entity.state != 'idle' && entity.state != 'standby' && entity.state != 'unavailable') {
return '<svg viewBox="0 0 50 50" />'; } ]]]
play_pause: >
[[[ const style = `<style>.scale-up { animation: scale-up 0.3s; cubic-bezier(.05,.5,.3,1) 1; transform-origin: center center; }
@keyframes scale-up { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }</style>`;
if (entity.state === 'playing') { return `<svg viewBox="0 0 166 166">${style}<path class="scale-up" d="M0 0h59.9v166H0zm106.1 0H166v166h-59.9z"/></svg>`; }
if (entity.state === 'paused') { return `<svg viewBox="0 0 166 166">${style}<path class="scale-up" d="M0 0l166 83L0 166z"/></svg>`; } ]]]
styles:
custom_fields:
media_image:
[background-image:
"[[[ return entity.attributes.entity_picture == null ? 'linear-gradient(0deg, rgba(115, 115, 115, 0.2) 0%, rgba(115, 115, 115, 0.2) 100%)'
: 'linear-gradient(0deg, rgba(13,17,19,0.9) 0%, rgba(13,17,19,0) 50%), url(' + entity.attributes.entity_picture + ')'; ]]]",
background-size: cover, top: 0%, left: 0%, width: 100%, position: absolute]
blur:
[background-image:
"[[[ return entity.attributes.entity_picture == null ? 'none' : 'url(' + entity.attributes.entity_picture + ')'; ]]]",
background-size: cover, top: 0%, left: 0%, width: 100%, filter: blur(4px), clip-path: inset(16vw 0 0 0), position: absolute]
overlay:
[background:
"[[[ return entity.attributes.entity_picture == null ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.4)'; ]]]",
background-size: cover, z-index: 0, top: 16vw, left: 0%, width: 100%, opacity: 1, position: absolute]
play_pause:
[filter:
"[[[ return entity.attributes.entity_picture == null ? 'none' : 'drop-shadow(0 0 1.3vw rgba(0,0,0,0.7))'; ]]]",
fill: '#dedede', top: 0, right: 0, bottom: 0, left: 0, margin: auto, width: 21%, height: 21%, position: absolute]
icon:
[fill:
"[[[ if (entity.state === 'off' || entity.state === 'idle' || entity.state === 'standby' ||
entity.state === 'unknown' || entity.state === 'unavailable') return '#9da0a2';
else return 'rgba(255, 255, 255, 0.8)'; ]]]",
top: 5.35%, left: 5.35%, width: 2.95vw, position: absolute]
name:
[top: 79.8%, left: 5.3%, position: absolute, line-height: 2vw, z-index: 10]
state:
[top: 87.5%, left: 5.3%, position: absolute, line-height: 2vw, z-index: 10,
white-space: nowrap, overflow: hidden, text-overflow: ellipsis, max-width: 90%]
and i have my input select with the conditional_media :
conditional_media:
initial: Senast nedladdat
options:
['Senast nedladdat', 'Chambre Kelia', 'Chambre Liam', 'Spotify', 'Salon', 'Bureau']
the swipe card and the button cars are working for the temperature for example
i don’t know what i’m missing ?
any idea ? thanks
Hi great work ! I like the news rss, can you share the code ?
Thanks
Hello, Im new on home assistant, I will wish know if this theme can be complety applied on my installation of HA. Now just I can see red error on dashboard. Thank you
When i turn off youre theme the slider works kind off. I will take a screenshot when i getting home.
The light popup card works normaly on another HA i’m running when i openend it on ipad/iphone.
After some more testing, I realize that the issue only happens for Switches. Could that be true? I guess Switches doesn’t have an entity.state property (since the state isn’t known at any given time?)!? If you would want to evaluate entity.state for Switches, how would you do (I haven’t found that you use actual Switches in your Lovelace)?
Thanks!
@Mattias_Persson Hey, awesome work! This thing looks sleek.
I just don´t know where I can start. Are you planing to do a more step to step guide ? or even a Youtube-tutorial ? Would be helpful
Greets
Hi @Mattias_Persson great work. A question on your covid scrape sensor, is that site just for Sweden?
I don’t have an answer but the right one doesn’t look right either?
Yes, public health agency of sweden. More detailed than the built in Coronavirus integration. The actual relevant data is in html (???) inside the json so I had to do some weird regex to extract that, and you probably don’t have to. I think I googled “arcgis api [country]”.
I found out that when i remove some part of the themes.yaml the slider is working in portret mode on iphone. When i use the phone in landscape mode then it turns to the grey like i post before.
#popup>div.range-holder>input[type=range]::-webkit-slider-thumb {
cursor: grabbing;
}
Yeah looks interesting. Do I have to sign up for a paid account with arcgis or can I get free access for personal use.