Got it. It works perfectly with the aspect ratio moved further out in to the card. Thank you so much. This is exactly what I wanted.
card:
- aspect-ratio: 0.8 #moved out to here
- border-width: 0
- background: |
[[[
return `linear-gradient(0deg,
${variables.tint} 0%,
${variables.tint} ${variables.level}%,
${variables.bg} 0%,
${variables.bg} 100%)`;
]]]
My whole working card is attached below.
views:
- title: Home
cards:
- square: false
type: grid
cards:
- type: entity
entity: counter.paper_used
name: Paper remaining in tray
unit: sheets
state_color: false
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.hl_l8250cdn_cyan_toner_remaining
triggers_update: '[[[ return entity; ]]]'
variables:
tint: cyan
bg: rgba(0,0,0,0)
level: |
[[[ return entity?.state || 0; ]]]
show_state: false
show_icon: false
show_name: false
styles:
card:
- aspect-ratio: 0.8
- border-width: 0
- background: |
[[[
return `linear-gradient(0deg,
${variables.tint} 0%,
${variables.tint} ${variables.level}%,
${variables.bg} 0%,
${variables.bg} 100%)`;
]]]
- type: custom:button-card
entity: sensor.hl_l8250cdn_magenta_toner_remaining
triggers_update: '[[[ return entity; ]]]'
variables:
tint: magenta
bg: rgba(0,0,0,0)
level: |
[[[ return entity?.state || 0; ]]]
show_state: false
show_icon: false
show_name: false
styles:
card:
- aspect-ratio: 0.8
- border-width: 0
- background: |
[[[
return `linear-gradient(0deg,
${variables.tint} 0%,
${variables.tint} ${variables.level}%,
${variables.bg} 0%,
${variables.bg} 100%)`;
]]]
- type: custom:button-card
entity: sensor.hl_l8250cdn_yellow_toner_remaining
triggers_update: '[[[ return entity; ]]]'
variables:
tint: yellow
bg: rgba(0,0,0,0)
level: |
[[[ return entity?.state || 0; ]]]
show_state: false
show_icon: false
show_name: false
styles:
card:
- aspect-ratio: 0.8
- border-width: 0
- background: |
[[[
return `linear-gradient(0deg,
${variables.tint} 0%,
${variables.tint} ${variables.level}%,
${variables.bg} 0%,
${variables.bg} 100%)`;
]]]
- type: custom:button-card
entity: sensor.hl_l8250cdn_black_toner_remaining
triggers_update: '[[[ return entity; ]]]'
variables:
tint: white
bg: rgba(0,0,0,0)
level: |
[[[ return entity?.state || 0; ]]]
show_state: false
show_icon: false
show_name: false
styles:
card:
- aspect-ratio: 0.8
- border-width: 0
- background: |
[[[
var toner = 2 * (states['sensor.hl_l8250cdn_black_toner_remaining'].state);
return `linear-gradient(0deg,
${variables.tint} 0%,
${variables.tint} ${variables.level}%,
${variables.bg} 0%,
${variables.bg} 100%)`;
]]]
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: icon
entity: sensor.hl_l8250cdn_cyan_toner_remaining
layout: vertical
show_state: true
show_name: true
show_label: true
color: rgb(0, 255, 255)
- type: custom:button-card
color_type: icon
entity: sensor.hl_l8250cdn_magenta_toner_remaining
layout: vertical
show_state: true
show_name: true
show_label: true
color: rgb(255, 0, 255)
- type: custom:button-card
color_type: icon
entity: sensor.hl_l8250cdn_yellow_toner_remaining
layout: vertical
show_state: true
show_name: true
show_label: true
color: rgb(255, 255, 0)
- type: custom:button-card
color_type: icon
entity: sensor.hl_l8250cdn_black_toner_remaining
layout: vertical
show_state: true
show_name: true
show_label: true
color: rgb(255, 255, 255)
columns: 1