If not you have to set it on every tap action
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: test
style:
$: |
.mdc-dialog__scrim {
backdrop-filter: blur(20px) brightness(70%);
-webkit-backdrop-filter: blur(20px) brightness(70%);
}
card:
use card-mod-theme in conjunction with the default theme
Okay thanks!
Got it like that:
type: 'custom:button-card'
entity: light.tv_backlight_all
name: Lichtbutton FINAL
tap_action:
action: toggle
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: Helligkeit & Szenen
style:
$: |
.mdc-dialog__scrim {
backdrop-filter: blur(20px) brightness(70%);
-webkit-backdrop-filter: blur(20px) brightness(70%);
}
card:
still doesn’t work unfortunately
oh wow, quite a lot of unsupported browsers …
that was the issue, thanks a lot!
@Mattias_Persson and all others who use a wall-mounted tablet.
I just bought a Lenovo Tab M10 and the dashboard is not really smooth. Also the other lovelace-sites from HA are not smooth. The tablet runs a Qualcomm Snapdragon 429 (SDM429), 4x 2.00GHz (ARM Cortex-A53) as cpu and a Qualcomm Adreno 504 (iGPU) as GPU.
I thought displaying something like this should not need really much power. Can someone confirm that there is the need of something powerful to display it smooth and fluid?
Basically all tablets suck except iPad, and you can’t automate with iPad 
But why? I mean thats a website. Ok there is something to do for the tablet, but for example a game is much more work and they are running fine?
Is your tablet running fine? That would be my next attempt.
I mean my tablet is running fine but I definitely notice screen stutter. home-assistant frontend is pretty heavy, it used to be worse pre 0.109, that and cheapo android tablets…
Changed brwoser from wallpanel to fullykiosk, its running better. Seems that it is running on the edge 
But now the next problem: browser_mod update.
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: '[[[ return entity.attributes.friendly_name ]]]'
card:
type: entities
entities:
- type: custom:light-popup-card
entity: '[[[ return entity.entity_id ]]]'
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
...
copied exactly the changes from your github. But no popup is working. Did I miss something?
Cleared cache? Indentation between hold_action and action? Errors?
Cache is cleared, intendation is correct (code above has a copy paste mistake), no errors shown.
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: '[[[ return entity.attributes.friendly_name ]]]'
card:
type: entities
entities:
- type: custom:light-popup-card
entity: '[[[ return entity.entity_id ]]]'
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
toast is working. popup and more-info are not working.
€: missed the update for button-card. Had 3.4.1 running…
For some reason, I am not able to hit the buttons to toggle on and toggle off. I have to press and hold and slide the brightness up to turn on. How would I enable toggle on and off from hitting the buttons?
Also, how would I configure basic lights that do not offer brightness adjust or hue adjustments?
Hi, incredible job. Can you create a fast step-by-step guide to install your UI? I’m trying to figure out how to start 
Got this up an running, it is such a nice interface!
Only problem I’ve run into is getting the header bar to disapear and the sidebar?!
It’s not showing the clock as its hidden and just ruining the aesthetic.
I am not running fully kiosk, will be running in Chrome or Edge on a Win Tablet.
You have to set the theme to tablet in home assistant.
thomasloven just updated the card-mod. This need a little bit of rework to the code.
Ok done that and it helped with the sidebar, but the HA sidebar and top-bar are still showing, this normal?
Do you have kiosk mode installed?
Look at the original configuration file from Mattias.
The sibebar you can hide in your profile settings.
Can someone help me, how do i get the TV icon to work without input_boolean.
So i only have a on/off switch.
- type: custom:button-card
entity: switch.hub_tv_kijken
style:
top: 23.9%
left: 23.8%
width: 47.7%
custom_fields:
icon_tv: &icon_tv >
[[[ const boolean = states[entity.entity_id.replace(entity.entity_id.split('.')[0], 'input_boolean')].state;
const style = '<style>@keyframes animate_on{from{transform: scaleY(0);}to{transform: scaleY(1);}}.animate_on{animation: animate_on 1s; transform-origin: -100% 46%; animation-fill-mode: forwards;}@keyframes animate_off{from{transform: scaleY(1);}to{transform: scaleY(0);}}.animate_off{animation: animate_off 1s; transform-origin: -100% 46%; animation-fill-mode: forwards;}</style>';
const path = '<path d="M46 9.2v27.5H4.1V9.2H46m2.4-2.4H1.6v32.3h46.7c.1 0 .1-32.3.1-32.3zM11.9 43.2h26.3c.6 0 1.1-.4 1.1-1v-.3c0-.6-.4-1.1-1-1.1H11.9c-.6 0-1.1.4-1.1 1v.3a1.11 1.11 0 0 0 1.1 1.1z"/>';
const gradient = '<linearGradient id="A" gradientUnits="userSpaceOnUse" x1="5.401" y1="34.714" x2="43.817" y2="11.74"><stop offset="0" stop-color="#64acb7"/><stop offset="1" stop-color="#7fdbe9"/></linearGradient>';
if (entity.state === 'off' && boolean === 'off') { return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path class="animate_off" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
if (entity.state === 'on' && boolean === 'off') { return `<svg viewBox="0 0 50 50"> ${style} ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="#20262890"/><path class="animate_on" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
if (entity.state === 'on' && boolean === 'on') { return `<svg viewBox="0 0 50 50"> ${gradient} <path d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} </svg>`; }
else if (entity.state === 'off' && boolean === 'on') { return `<svg viewBox="0 0 50 50"> ${path} </svg>`; } ]]]
styles: &icon_tv_styles
custom_fields:
icon_tv:
[fill: "[[[ return entity.state === 'on' ? '#616161' : '#9da0a2'; ]]]",
top: 7%, left: 10.7%, width: 3.5vw, position: absolute]
template: ['base', 'loader']
No I don’t, I’ve removed all references to it, as will be running this on a Windows tablet, so can’t run kiosk mode unfortunately. (At least not yet).