I have changed my custom button card to make use of the circle sensor card for the brightness. Now i want to have thie icon of the bulb and the circle on the same heigt next to eachother (circle sensor little smaller). Any suggestion on how to do this?
#*****************************************************************
#* AUTHOR Lubbert Kramer terug
#* Github https://github.com/lubbertkramer/home_assistant_config
#*****************************************************************
default:
- size: 40%
- lock: false
- color: auto
- spin: false
- show_state: true
- show_label: false
- show_last_changed: false
- tap_action: toggle
- hold_action: more-info
- aspect_ratio: 1/1
card:
type: custom:button-card
name: '[[name]]'
deep_press: false
icon: 'mdi:[[icon]]'
size: '[[size]]'
color: '[[color]]'
lock: '[[lock]]'
aspect_ratio: '[[aspect_ratio]]'
entity: '[[entity]]'
show_state: '[[show_state]]'
show_label: '[[show_label]]'
show_last_changed: '[[show_last_changed]]'
tap_action:
action: '[[tap_action]]'
haptic: light
hold_action:
action: '[[hold_action]]'
haptic: heavy
styles:
card:
- border-radius: var(--theme-border-radius)
- --ha-card-background: var(--theme-button-card-color-state-on)
grid:
- grid-template-areas: '"i i" "n s"'
- grid-template-columns: 1fr lfr
- grid-template-rows: 1fr min-content min-content min-content
img_cell:
- align-self: start
- text-align: start
- margin-right: 60px
name:
- font-family: Helvetica
- font-size: 15px
- font-weight: bold
- text-transform: capitalize
- justify-self: start
- padding-left: 10px
state:
- font-family: Helvetica
- font-size: 14px
- font-weight: bold
- text-transform: capitalize
- padding: 0px 10px
- justify-self: start
- padding-left: 10px
label:
- font-family: Helvetica
- font-size: 14px
- font-weight: bold
- padding: 0px 10px
- justify-self: start
- padding-right: 10px
custom_fields:
brightness:
#- fill: '#FFFFFF10'
#- gradient: true
- max: 100
- min: 0
#- stroke_color: '#03a9f4'
#- stroke_width: 15
- height: 2.15vw
- opacity: 0.7
- width: 2.15vw
- overflow: visible
- position: absolute
- right: 15px
- top: 20px
# - right: 7%
# - top: 7%
custom_fields:
brightness:
card:
type: custom:circle-sensor-card
entity: '[[brightness]]'
max: 100
min: 0
#fill: '#007AF1'
stroke_width: 15
stroke_color: var(--theme-button-icon-color-state-on)
gradient: true
font_style:
color: var(--theme-button-name-color-state-on)
label: >
[[[
if (typeof(entity) === 'undefined') return;
if ('brightness' in entity.attributes)
{
if (entity.attributes
&& (entity.attributes.brightness <= 255)) {
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
}
}
]]]
state:
- value: "[[[ return '' + entity.state + ''; ]]]"
spin: '[[spin]]'
styles:
card:
- --ha-card-background: "[[[ return 'var(--theme-button-card-color-state-' + entity.state + ')'; ]]]"
icon:
- color: "[[[ return 'var(--theme-button-icon-color-state-' + entity.state + ')'; ]]]"
- animation: "[[[ return 'var(--theme-button-icon-animation-state-' + entity.state + ')'; ]]]"
lock:
- color: "[[[ return 'var(--theme-button-lock-color-state-' + entity.state + ')'; ]]]"
label:
- color: "[[[ return 'var(--theme-button-label-color-state-' + entity.state + ')'; ]]]"
name:
- color: "[[[ return 'var(--theme-button-name-color-state-' + entity.state + ')'; ]]]"
state:
- color: "[[[ return 'var(--theme-button-state-color-state-' + entity.state + ')'; ]]]"
custom_fields:
brightness:
- fill: "[[[ return 'var(--theme-button-card-color-state-' + entity.state + ')'; ]]]"