Hi, this dashboard looks very nice! What’s the easiest way to install this all? I’m a bit lost :-S
OK this code seems to be correct.
variables:
circle_input: "[[[ return states['sensor.wohnzimmer_luftbefeuchter_fuellstand'].state; ]]]"
But it only works when I apply the light template. Without I only get NaN. This was for testing purpose.
Why does it work with light, but without not?
hello everyone, it’s been some time since I can’t solve this problem. I also did a new configuration but I think the problem is in the ui-lovelace.yaml file if I delete the whole dashboard and leave only the sidebar everything looks correct
thanks in advance 
Okay, I can have a quick look. Can you post your full ui-lovelace.yaml here?
Between backticks of course
```yaml
```
That looks correct at least
-
If you have the same screen resolution as me, then maybe you have a smaller screen?
-
What browser are you using? I think there’s “Web Zoom and Scaling” in fullykiosk
-
Have you tried playing around with
mediaqueryat the beginning of ui-lovelace? You can set the breakpoints in px
I only use circle for percent values. For temp/time I created new climate/person
Sure thanks
button_card_templates: !include button_card_templates.yaml
kiosk_mode:
hide_header: true
views:
- type: custom:grid-layout
path: 0
layout:
#default
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar vardagsrum studio sovrum ."
"sidebar media övrigt hemma ."
"sidebar footer footer footer ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.5)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". sidebar sidebar ."
". vardagsrum sovrum ."
". studio övrigt ."
". media hemma ."
". footer footer ."
". . . ."
#portrait
"(max-width: 1200px)":
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(3, 1fr) 0
grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . ."
"sidebar vardagsrum sovrum ."
"sidebar studio övrigt ."
"sidebar media hemma ."
"sidebar footer footer ."
"sidebar . . ."
cards:
- type: custom:button-card #extra_styles fix
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar_template
- type: conditional
conditions:
- entity: input_boolean.laundry_display
state: 'on'
card:
type: custom:button-card
entity: timer.laundry
template: laundry
- type: grid
cards:
- type: button
icon: mdi:information-outline
tap_action:
!include popup/sidebar_information.yaml
hold_action:
action: none
- type: button
icon: mdi:arrow-up-bold-circle-outline
tap_action:
!include popup/sidebar_update.yaml
hold_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.hacs
#################################################
# #
# Home #
# #
#################################################
- type: grid
title: Home
view_layout:
grid-area: vardagsrum
columns: 2
cards:
- type: custom:button-card
entities:
entity: weather.casa
template:
- weather
- type: custom:button-card
entities:
entity: sensor.termometro_esterno_temperature_2
name: TH Esterno
hold_action:
none
custom_fields:
circle: >
[[[ if (entity.state >= '17.5') {
const volume = states['sensor.termometro_esterno_temperature_2'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#ffad1f"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state <= '17.4') {
const volume = states['sensor.termometro_esterno_temperature_2'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
]]]
humidity: >
[[[ return states['sensor.termometro_esterno_humidity'].state + '%';]]]
template:
- base
- thsensor
- type: custom:button-card
entities:
entity: sensor.th_xiaomi_temperatura
name: TH Soggiorno
custom_fields:
circle: >
[[[ if (entity.state >= '17.5') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#ffad1f"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state <= '17.4') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
]]]
humidity: >
[[[ return states['sensor.termometro_xiaomi_humidity'].state + '%';]]]
template:
- base
- thsensor
- type: custom:button-card
entities:
entity: sensor.582d343a97b4_temperature
name: TH Bagno
custom_fields:
circle: >
[[[ if (entity.state >= '17.5') {
const volume = states['sensor.582d343a97b4_temperature'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#ffad1f"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state <= '17.4') {
const volume = states['sensor.582d343a97b4_temperature'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
]]]
humidity: >
[[[ return states['sensor.582d343a97b4_humidity'].state + '%';]]]
template:
- base
- thsensor
#################################################
# #
# LUCI #
# #
#################################################
- type: grid
title: Luci
view_layout:
grid-area: studio
columns: 1
cards:
- type: custom:mod-card
style:
swipe-card:
$: |
.swiper-container {
padding: 0px 0px 20px 0px !important;
}
card:
type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
# effect: coverflow
# speed: 650
spaceBetween: 20
threshold: 7
# coverflowEffect:
# rotate: 80
# depth: 300
cards:
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: group.light #hue_group
name: Luce Tavolo
template:
- light
- icon_spot
- type: custom:button-card
entity: light.luce_cucina
name: Luce Cucina
template:
- light
- icon_spot
- type: custom:button-card
entity: light.piantana
name: Piantana
template:
- light
- icon_shade
- type: custom:button-card
entity: light.bulb2
name: Luce Camera
template:
- light
- icon_hue
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: light.yeelight_stripe
name: Led
template:
- light
- icon_hue
- type: custom:button-card
entity: switch.tasmota_1
name: Scaldasonno
custom_fields:
icon_plug: >
[[[ const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox="0 0 512 512"><style>@keyframes animate{10%, 20%, 100%{transform: rotateZ(0deg);}30%, 50%, 70%{transform: rotateZ(7deg);}90%{transform: rotateZ(3deg);}40%, 60%, 80%{transform: rotateZ(-7deg);}}.animate{animation: animate 1.35s cubic-bezier(0.5, 1, 0.89, 1); animation-fill-mode: both; transform-origin: 70% 80%; animation-delay: 0s;}</style>
<path d="m457 0h-402c-30.327 0-55 24.673-55 55v402c0 30.327 24.673 55 55 55h402c30.327 0 55-24.673 55-55v-402c0-30.327-24.673-55-55-55zm25 457c0 13.785-11.215 25-25 25h-402c-13.785 0-25-11.215-25-25v-402c0-13.785 11.215-25 25-25h402c13.785 0 25 11.215 25 25z"/><path d="m256 60c-108.075 0-196 87.925-196 196s87.925 196 196 196 196-87.925 196-196-87.925-196-196-196zm0 362c-91.533 0-166-74.467-166-166s74.467-166 166-166 166 74.467 166 166-74.467 166-166 166z"/><path d="m336 211c-24.813 0-45 20.187-45 45s20.187 45 45 45 45-20.187 45-45-20.187-45-45-45zm0 60c-8.271 0-15-6.729-15-15s6.729-15 15-15 15 6.729 15 15-6.729 15-15 15z"/><path d="m176 211c-24.813 0-45 20.187-45 45s20.187 45 45 45 45-20.187 45-45-20.187-45-45-45zm0 60c-8.271 0-15-6.729-15-15s6.729-15 15-15 15 6.729 15 15-6.729 15-15 15z"/><circle cx="437" cy="75" r="15"/><circle cx="75" cy="75" r="15"/><circle cx="437" cy="437" r="15"/><circle cx="75" cy="437" r="15"/></g></svg>`; ]]]
styles:
custom_fields:
icon_plug:
[top: 10%, left: 10.1%, width: 2.7vw, position: absolute,
fill: "[[[ return entity.state === 'on' ? '#516d82' : '#9da0a2'; ]]]"]
template: light
#################################################
# #
# SOGGIORNO #
# #
#################################################
- type: grid
title: Soggiorno
view_layout:
grid-area: sovrum
columns: 2
cards:
- type: custom:button-card
entity: light.bulb1 #hue_group
name: Luce TV
template:
- light
- icon_lamp
- type: custom:button-card
entity: media_player.samsung_tv_remote
name: TV
hold_action:
!include popup/tv_samsung_popup.yaml
template:
- base
- icon_tv
- loader
- type: custom:button-card
entity: climate.smarther_thermostat
name: Termostato
hold_action:
!include popup/condizionatore.yaml
show_name: true
custom_fields:
circle: >
[[[ if (entity.state === 'heat') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#ffad1f"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state === 'cool') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#575859" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state === 'dry') {
const volume = states['sensor.th_xiaomi_umidita'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#09f903"/>
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">%</tspan></text></svg>`; }
if (entity.state === 'fan_only') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#575859" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state === 'off') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none"/>
<text x="50%" y="54%" fill="#b2b2b2" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }]]]
state_display: >
[[[ if (entity.state === 'heat') {
const state = entity.attributes.temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="45%" text-anchor="middle" >Caldo fino a ${state}</text></svg>`; }
if (entity.state === 'cool') {
const state = entity.attributes.temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="45%" text-anchor="middle" >Freddo fino a ${state}</text></svg>`; }]]]
template:
- base
- climate
- type: custom:button-card
entity: climate.condizionatore_samsung
name: AC
hold_action:
!include popup/condizionatore.yaml
show_name: true
custom_fields:
circle: >
[[[ if (entity.state === 'heat') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#ffad1f"/>
<text x="50%" y="54%" fill="#e8eaed" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state === 'cool') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#575859" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state === 'dry') {
const volume = states['sensor.th_xiaomi_umidita'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#3B863D"/>
<text x="50%" y="54%" fill="#fcfcfc" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">%</tspan></text></svg>`; }
if (entity.state === 'fan_only') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" fill="#529dff"/>
<text x="50%" y="54%" fill="#fcfcfc" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }
if (entity.state === 'off') {
const volume = states['sensor.th_xiaomi_temperatura'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none"/>
<text x="50%" y="54%" fill="#b2b2b2" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">°</tspan></text></svg>`; }]]]
state_display: >
[[[ if (entity.state === 'heat') {
const state = entity.attributes.temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="45%" text-anchor="middle" >Caldo fino a ${state}</text></svg>`; }
if (entity.state === 'cool') {
const state = entity.attributes.temperature; return ` <text x="50%" y="54%" fill="#8d8e90" font-size="45%" text-anchor="middle" >Freddo fino a ${state}</text></svg>`; }]]]
template:
- base
- climate
#################################################
# #
# MEDIA #
# #
#################################################
- type: grid
title: Media
view_layout:
grid-area: media
columns: 1
cards:
- type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
# effect: coverflow
# speed: 650
spaceBetween: 20
threshold: 7
# coverflowEffect:
# rotate: 80
# depth: 300
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_select.conditional_media
state: tv
card:
type: custom:button-card
entity: media_player.samsung_tv_remote
tap_action:
action: none
template:
- conditional_media
- type: conditional
conditions:
- entity: input_select.conditional_media
state: Spotify
card:
type: custom:button-card
entity: media_player.spotify_andrea_guidi
template:
- conditional_media
- type: grid
columns: 2
cards:
- type: custom:button-card
name: Tv
entity: media_player.samsung_tv_remote
template:
- media
- icon_tv
- type: custom:button-card
entity: media_player.spotify_andrea_guidi
name: Spotify
template:
- media
- icon_spotify
- type: custom:button-card
entity: media_player.echo_dot_di_andrea
name: Alexa
template:
- base
- hifi
#################################################
# #
# SENSORI #
# #
#################################################
- type: grid
title: Sensori
view_layout:
grid-area: övrigt
columns: 2
cards:
- type: custom:button-card
entity: binary_sensor.0x158d00047bbd47_moisture #hue_group
name: Allarme
template:
- light
- icon_bathroom
- type: custom:button-card
entity: binary_sensor.sensore_porta_contact
name: Porta
template:
- base
- icon_closet
- lock
- type: "custom:button-card"
entity: sensor.garbage_today
aspect_ratio: 1/1
show_entity_picture: true
show_name: true
name: Rifiuti
show_icon: true
style:
- padding: 0px
styles:
entity_picture:
- width: 80%
- height: 100%
- padding-bottom: 0%
card:
- border-radius: 10%
- background-color: '#848484'
state:
- value: 'organico'
name: Organico
entity_picture: "/local/garbage image/organico.png"
styles:
card:
- background-color: '#3B863D'
- value: 'carta'
name: Carta
entity_picture: "/local/garbage image/carta.png"
styles:
card:
- background-color: '#00B1EB'
- value: 'plastica'
name: Plastica
entity_picture: "/local/garbage image/plastica.png"
styles:
card:
- background-color: '#F4A029'
- value: 'indifferenziato'
name: Indifferenziato
entity_picture: "/local/garbage image/indifferenziato.png"
styles:
card:
- background-color: '#848484'
- value: 'vetro'
name: Vetro
entity_picture: "/local/garbage image/vetro.png"
styles:
card:
- background-color: '#848484'
#################################################
# #
# CASA #
# #
#################################################
- type: grid
title: Casa
view_layout:
grid-area: hemma
columns: 1
cards:
- type: custom:mod-card
style:
swipe-card:
$: |
.swiper-container {
padding: 0px 0px 20px 0px !important;
}
card:
type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
# effect: coverflow
# speed: 650
spaceBetween: 20
threshold: 7
# coverflowEffect:
# rotate: 80
# depth: 300
cards:
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: person.andrea
name: Andrea
tap_action:
!include popup/person_andrea_popup.yaml
hold_action:
action: none
template: person
- type: custom:button-card
entity: person.adele
name: Adele
tap_action:
!include popup/person_adele_popup.yaml
hold_action:
action: none
template: person
- type: custom:button-card
entity: script.turn_off
name: Spegni tutto
hold_action:
action: none
template:
- base
- icon_away
- type: custom:button-card
entity: script.home_arrive
name: Antifurto
hold_action:
action: none
template:
- base
- icon_home
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: camera.cam1
name: cam 1
show_entity_picture: false
show_state: false
tap_action:
action: more-info
# hold_action:
custom_fields:
picture:
card:
type: picture-entity
entity: camera.cam_1
camera_view: live
show_state: false
show_name: false
elements:
- type: state-badge
entity: camera.cam1
style:
top: 20%
left: 15%
styles:
custom_fields:
picture:
[top: -7%, left: -75%, width: 190%, position: absolute]
template: base
- type: custom:button-card
entity: camera.cam2
name: cam 2
show_entity_picture: false
show_state: false
tap_action:
action: more-info
# hold_action:
custom_fields:
picture:
card:
type: picture-entity
entity: camera.cam_2
camera_view: live
show_state: false
show_name: false
elements:
- type: state-badge
entity: camera.cam2
style:
top: 20%
left: 15%
styles:
custom_fields:
picture:
[top: -7%, left: -75%, width: 190%, position: absolute]
template: base
- type: custom:button-card
entity: camera.cam3
name: cam 3
show_entity_picture: false
show_state: false
tap_action:
action: more-info
# hold_action:
custom_fields:
picture:
card:
type: picture-entity
entity: camera.cam_3
camera_view: live
show_state: false
show_name: false
elements:
- type: state-badge
entity: camera.cam3
style:
top: 20%
left: 15%
styles:
custom_fields:
picture:
[top: -7%, left: -75%, width: 190%, position: absolute]
template: base
- type: custom:button-card
entity: camera.cam4
name: cam 4
show_entity_picture: false
show_state: false
tap_action:
action: more-info
# hold_action:
custom_fields:
picture:
card:
type: picture-entity
entity: camera.cam_4
camera_view: live
show_state: false
show_name: false
elements:
- type: state-badge
entity: camera.cam4
style:
top: 20%
left: 15%
styles:
custom_fields:
picture:
[top: -7%, left: -75%, width: 190%, position: absolute]
template: base
Okay, you’ve made a lot of changes so it’s super hard to compare. I tried your ui-lovelace and, after removing the templates that I don’t have, I can’t see the issues you’ve circled.
So it’s probably not related but you’ve made config mistakes on lines:
106, 112, 116, 137, 160, 194, 558
1 Like
Hello and thanks for all your amazing work !
I have a problem regarding closing button in all my popup : it’s not vertically centered. I found the css line in blue causing this. When disabled on Chrome it’s fine but I didn’t manage to correct it in my theme.
Can you help me please ?
You pointed me to the right track! It was in the Web Zoom and Scaling of Fully Kiosk Browser. I had to disable the View in Desktop Mode option.
Thanks!
Thanks but was already in my themes.yaml file…
frontend:
themes:
####################################################
# #
# THEME #
# #
####################################################
Dark:
#default dark mode
primary-text-color: '#e0e1e1'
primary-background-color: '#222627'
secondary-background-color: '#202020'
card-background-color: '#222627'
primary-color: '#e0e1e1'
app-header-text-color: var(--primary-text-color)
app-header-background-color: var(--primary-background-color)
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
sidebar-background-color: var(--card-background-color)
divider-color: var(--secondary-background-color)
#edited
ha-card-box-shadow: none
ha-card-background: none
grid-card-gap: 5%
masonry-view-card-margin: 0px
state-icon-color: '#fea00b'
state-icon-active-color: '#3182b7'
switch-checked-color: '#fea00b'
switch-unchecked-button-color: '#3b4041'
switch-unchecked-track-color: '#0c0d0d'
paper-slider-knob-color: '#fea00b'
paper-slider-knob-start-color: '#fea00b'
paper-slider-pin-color: '#fea00b'
paper-slider-active-color: '#626a6f'
paper-slider-container-color: '#202020'
mdc-dialog-scrim-color: rgba(0, 0, 0, 0.5)
paper-toast-color: var(--primary-text-color)
paper-toast-background-color: '#1b1b1bf2'
vertical-stack-card-margin: 0
#En +
paper-item-icon-color: '#9da0a2'
paper-item-icon-active-color: '#fea00b'
#ha-card-header-color: 'rgba(255, 255, 255, 0.8)'
#ha-card-header-font-size: 24px
#bar-card-border-radius: '0.3em'
#custom variables
ha-card-background-color: rgba(34,38,39,0.9)
ha-card-header-background-color: rgba(48,52,52,0.8)
custom-layout-card-padding: 3.3vw
custom-button-card-border-radius: 8%
sidebar-time-font-size: 4vw
sidebar-time-line-height: 3vw
sidebar-font-size: 1.3vw
sidebar-line-height: 1.6vw
card-content-padding: 1.8em 2.2em 1.8em 2em
lovelace-background: center / cover no-repeat url("/local/background.png") fixed
####################################################
# #
# CARD-MOD #
# #
####################################################
card-mod-theme: tablet
card-mod-view: |
.: |
hui-view {
background: none !important;
min-height: 100vh
}
#################################################
# #
# GRID CARD HEADINGS #
# #
#################################################
grid-layout$:
hui-grid-card:
$: |
/* default */
h1 {
font-size: 2.5vw !important;
line-height: 0 !important;
font-family: SF Text !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.8) !important;
padding: 1vw 0 2vw 0 !important;
}
/* portrait */
@media screen and (max-width: 1200px) {
h1 {
font-size: 3.3vw !important;
line-height: 1.1vw !important;
}
}
/* phone */
@media screen and (max-width: 800px) {
h1 {
font-size: 5.5vw !important;
line-height: 6vw !important;
margin: 2vw 0 0 0 !important;
}
}
#################################################
# #
# SWIPE CARD MARGIN #
# #
#################################################
$swipe-card$:
hui-horizontal-stack-card$:
.: |
hui-conditional-card {
margin: 0 !important;
}
#################################################
# #
# SIDEBAR VERTICAL-STACK #
# #
#################################################
grid-layout$hui-vertical-stack-card$: |
#root {
background-color: rgba(0, 0, 0, 0.06);
border-radius: 0;
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
min-height: 100vh;
}
/* phone */
@media screen and (max-width: 800px) {
#root {
background-color: rgba(0,0,0,0);
border-right: none;
min-height: 100%;
margin-left: -0.8%;
margin-bottom: -6%;
}
}
#################################################
# #
# SIDEBAR BOTTOM ICONS #
# #
#################################################
"grid-layout$hui-vertical-stack-card$hui-grid-card":
.: |
hui-grid-card {
display: flex;
flex: auto;
align-items: flex-end;
}
/* phone */
@media screen and (max-width: 800px) {
hui-grid-card {
position: absolute;
right: 5.5vw;
}
}
$: |
#root {
width: 100%;
padding: 0 13% 25% 13%;
}
/* phone */
@media screen and (max-width: 800px) {
#root {
padding: 0 0 0 55%;
}
}
#conditional color
"$hui-button-card:last-of-type$": |
{% if is_state('binary_sensor.template_sidebar_update_color', 'on') %}
ha-card, ha-state-icon {
color: rgb(35, 78 ,106) !important;
opacity: 1 !important;
animation: update 1.5s ease-out infinite;
}
ha-card:hover {
filter: brightness(130%);
animation-play-state: paused;
}
{% endif %}
@keyframes update {
0% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(0.98);
}
55% {
transform: scale(1.02);
}
60% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
card-mod-card: |
.header .card-header {
font-family: SF Text;
letter-spacing: 0.005em;
font-size: 1.6em;
font-weight: 500;
padding: 1em 0 0 1.68em;
line-height: initial;
cursor: default;
}
.content .card-content {
padding: var(--card-content-padding);
}
/* * * * * * * * * * * * * * * * * *
* *
* BUTTON CARD *
* *
* * * * * * * * * * * * * * * * * */
.type-button {
display: block;
--paper-item-icon-color: var(--state-icon-color);
opacity: 0.2;
transition: 0.4s;
height: initial;
}
.type-button:hover {
opacity: 0.5;
transition: none;
}
.type-button:active {
opacity: 0.7;
transition: none;
}
/* * * * * * * * * * * * * * * * * *
* *
* CUSTOM BAR CARD *
* *
* * * * * * * * * * * * * * * * * */
.type-custom-bar-card bar-card-name {
padding-left: 0.25em;
}
.type-custom-bar-card bar-card-iconbar {
padding-left: 0.23em;
}
.type-custom-bar-card bar-card-value {
font-size: 1em;
font-weight: 400;
color: #e0e1e1;
letter-spacing: 0.01em;
text-shadow: none;
margin-right: auto;
margin-top: 5px;
}
.type-custom-bar-card bar-card-backgroundbar {
background: none;
}
.type-custom-bar-card bar-card-background {
background: radial-gradient(circle, rgba(52, 57, 58, 0.1) 0%, rgba(17, 18, 18, 0.2) 75%);
box-shadow: inset 0 0 25px #00000045;
border-radius: 0.3em;
overflow: hidden;
}
card-mod-more-info-yaml: |
.: |
app-toolbar {
background: none !important;
}
.main-title {
margin-top: 5px;
font-family: SF Text;
letter-spacing: 0.005em;
}
mwc-icon-button {
margin-top: -2px;
color: #9e9e9e;
}
"mwc-icon-button":
$: |
button > mwc-ripple {
margin-top: 3px;
}
"layout-card$grid-layout$": |
#root {
margin: 0 !important;
}
$: |
.mdc-dialog__scrim {
-webkit-backdrop-filter: blur(1.5em);
backdrop-filter: blur(1.5em);
transition: none !important;
}
.mdc-dialog .mdc-dialog__container {
background: none;
}
.mdc-dialog__surface {
background: linear-gradient(180deg,
var(--ha-card-header-background-color) 0%,
var(--ha-card-header-background-color) 4.6em,
var(--ha-card-background-color) 4.6em,
var(--ha-card-background-color) 100%) !important;
box-shadow: none !important;
border-radius: 1em !important;
}
.mdc-dialog--closing {
display: none !important;
}
#################################################
# #
# CUSTOM LIGHT POPUP CARD #
# #
#################################################
"hui-entities-card$light-popup-card$": |
#popup {
margin: -2.4em 0 1.4em 0;
isolation: isolate;
}
input[type=range] {
cursor: grab;
}
#brightnessValue {
color: rgba(255, 255, 255, 0.8);
margin: 1.3vh 0 0 0;
font-size: 2em;
font-weight: 400;
position: absolute;
z-index: 100;
font-family: SF Display;
letter-spacing: 0.02em;
pointer-events: none;
mix-blend-mode: difference;
text-align: center;
}
#popup>div.range-holder>input[type=range] {
--slider-thumb-color: #b4b4b4 !important;
}
#popup>div.range-holder>input[type=range]::-webkit-slider-thumb {
cursor: grabbing;
}
but did you try to change the value and call frontend.reload_themes?
Yes, tried with 20px, 0px and -20px to see if something change but no luck
It’s because you decided to change card-mod-view-yaml to card-mod-view
mm i removed template but same error… can you please me share the code??
thanks
I didn’t save it, unfortunately. Use my ui-lovelace and add your stuff back in, one section at a time and you’ll see what’s causing it.
1 Like
