I have a problem and hope someone can help me. How do I get the buttons round at the bottom?
this is my code…
type: custom:button-card
entity: group.wohnzimmer_all
aspect_ratio: 1
name: Wohnzimmer
color_type: card
show_state: true
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: Wohnzimmer
large: false
hide_header: true
style:
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
.mdc-top-app-bar {
background: none !important;
}
card:
type: vertical-stack
cards:
- type: custom:simple-thermostat
entity: climate.wohnzimmer
- type: entities
card_mod:
class: content
entities:
- entity: sensor.wandthermostat_wohnzimmer_temperature
name: Raumtemperatur
- entity: sensor.wandthermostat_wohnzimmer_humidity
name: Luftfeuchtigkeit
- entity: binary_sensor.wandthermostat_wohnzimmer_battery
name: Batterie
- type: custom:mini-graph-card
entities:
- color: '#385581'
entity: sensor.wandthermostat_wohnzimmer_temperature
line_width: 6
hour24: true
group: true
align_icon: left
align_state: right
align_header: left
hours_to_show: 24
show:
fill: fade
icon: false
name: false
state: false
name_adaptive_color: false
labels: hover
legend: false
tap_action:
action: none
custom_fields:
Brightness:
card:
type: custom:button-card
state:
- value: 'on'
color: rgba(65,65,63,0.2)
- value: 'off'
color: rgba(65,65,63,0.2)
entity: group.wohnzimmer_all
show_name: false
show_state: false
show_entity_picture: false
color_type: icon
color: rgba(65,65,63,0.2)
tap_action:
action: fire-dom-event
browser_mod:
command: popup
hide_header: true
large: false
style:
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
background: rgba(0,0,0,0.25);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background: none !important;
box-shadow: none;
border-radius: 0px;
}
.mdc-top-app-bar {
background: none !important;
}
card:
type: entities
entities:
- type: custom:light-popup-card
entity: light.wohnzimmer
icon: none
hideIcon: true
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: |
#root {
justify-content: center;
margin-top: 2em;
}
cards:
- type: custom:button-card
styles:
card:
- background: '#d8d9e1'
tap_action:
action: call-service
service: light.turn_on
service_data:
entity_id: light.wohnzimmer
color_temp: 153
- type: custom:button-card
styles:
card:
- background: '#d5b08d'
tap_action:
action: call-service
service: light.turn_on
service_data:
entity_id: light.wohnzimmer
color_temp: 326
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: |
#root {
justify-content: center;
margin-bottom: 1em;
}
cards:
- type: custom:button-card
styles:
card:
- background: '#ce944b'
tap_action:
action: call-service
service: light.turn_on
service_data:
entity_id: light.wohnzimmer
color_temp: 500
- type: custom:button-card
styles:
card:
- background: >-
radial-gradient(circle, rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 80%), conic-gradient(rgb(120, 39,
230), rgb(230, 34, 231), rgb(228, 5, 136), rgb(228, 25,
25), rgb(229, 105, 30), rgb(232, 226, 46), rgb(125, 230,
41), rgb(52, 232, 40), rgb(51, 231, 92), rgb(52, 232,
224), rgb(32, 125, 229), rgb(18, 39, 229), rgb(120, 39,
230))
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Wohnzimmer
hide_header: true
card:
type: custom:light-entity-card
entity: light.wohnzimmer
brightness: true
color_temp: true
full_width_sliders: false
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
persist_features: true
consolidate_entities: true
styles:
card:
- width: 40px
icon:
- width: 70%
style: |
ha-card {
box-shadow: none;
background: transparent
}
icon: mdi:brightness-6
show_entity_picture: true
styles:
card:
- width: 100px
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
name:
- justify-self: start
- padding-left: 7px
- font-weight: bold
- font-family: Sans-serif
- font-size: 13px
img_cell:
- justify-content: start
- padding-left: 19px
- padding-top: 7px
- align-items: start
- margin: none
state:
- justify-self: start
- font-color: red
- font-size: 15px
- padding-left: 7px
- padding-bottom: 10px
- text-transform: capitalize
- font-family: Sans-serif
- font-size: 13px
icon:
- width: 30%
custom_fields:
Brightness:
- position: absolute
- left: 60%
- top: 10%
- width: 60%
state:
- value: 'on'
entity_picture: \local\img\icons8-armchair-96.png
color: rgba(243, 241, 239, 1)
- value: 'off'
entity_picture: \local\img\icons8-armchair-96.png
color: rgba(65,65,63,0.2)
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
Thanks in advance