RomRider
commented
4 years ago Could you share the complete configuration please?
Closed Kroontje closed 4 years ago
RomRider
commented
4 years ago Could you share the complete configuration please?
Kroontje
commented
4 years ago Configuration of the card you mean? Sure, here it is:
cards:
- type: custom:stack-in-card
mode: horizontal
title: Televisie woonkamer
cards:
- type: vertical-stack
cards:
- type: "custom:button-card"
icon: mdi:monitor
color_type: card
color: "#70AE98"
color_off: rgb(245, 245, 245)
entity: switch.harmony_tvkijken
show_name: false
styles:
card:
- --keep-background: 'true'
tap_action:
action: toggle
state:
- value: 'TV kijken'
color: "#70AE98"
- value: 'off'
styles:
icon:
- color: 'var(--text-color)'
- type: conditional
conditions:
- entity: switch.harmony_tvkijken
state: 'on'
card:
type: "custom:button-card"
color_type: icon
color: rgb(220, 220, 220)
icon: mdi:volume-mute
styles:
card:
- --keep-background: 'true'
tap_action:
action: call-service
service: script.mute_samsung_tv_woonkamer
service_data:
entity_id: media_player.samsung_tv_woonkamer
entity_id: media_player.samsung_tv_woonkamer
state:
- value: 'false'
styles:
card:
- color: "#F0A35E"
- --keep-background: 'true'
- type: conditional
conditions:
- entity: switch.harmony_appletv
state: 'on'
card:
type: "custom:button-card"
color_type: icon
color: rgb(220, 220, 220)
icon: mdi:volume-mute
styles:
card:
- --keep-background: 'true'
tap_action:
action: call-service
service: script.mute_denon_avr_x2000
service_data:
entity_id: media_player.denon_avr_x2000
- type: conditional
conditions:
- entity: switch.harmony_xboxone
state: 'on'
card:
type: "custom:button-card"
color_type: icon
color: rgb(220, 220, 220)
icon: mdi:volume-mute
styles:
card:
- --keep-background: 'true'
tap_action:
action: call-service
service: script.mute_denon_avr_x2000
service_data:
entity_id: media_player.denon_avr_x2000
- type: conditional
conditions:
- entity: switch.harmony_tvkijkenreceiver
state: 'on'
card:
type: "custom:button-card"
color_type: icon
color: rgb(220, 220, 220)
icon: mdi:volume-mute
styles:
card:
- --keep-background: 'true'
tap_action:
action: call-service
service: script.mute_denon_avr_x2000
service_data:
entity_id: media_player.denon_avr_x2000
- type: vertical-stack
cards:
- type: "custom:button-card"
icon: mdi:monitor-speaker
color_type: card
# color: rgb(117, 189, 111)
color: "#70AE98"
color_off: rgb(245, 245, 245)
entity: switch.harmony_tvkijkenreceiver
show_name: false
styles:
card:
- --keep-background: 'true'
tap_action:
action: toggle
state:
- value: 'TV kijken receiver'
color: "#70AE98"
- value: 'off'
styles:
icon:
- color: 'var(--text-color)'
- type: conditional
conditions:
- entity: switch.harmony_tvkijken
state: 'on'
card:
type: "custom:button-card"
color_type: icon
color: rgb(220, 220, 220)
icon: mdi:volume-minus
styles:
card:
- --keep-background: 'true'
tap_action:
action: call-service
service: media_player.volume_down
service_data:
entity_id: media_player.samsung_tv_woonkamer
- type: conditional
conditions:
- entity: switch.harmony_appletv
state: 'on'
card:
type: "custom:button-card"
color_type: icon
color: rgb(220, 220, 220)
icon: mdi:volume-minus
styles:
card:
- --keep-background: 'true'
tap_action:
action: call-service
service: media_player.volume_down
service_data:
entity_id: media_player.denon_avr_x2000
- type: conditional
conditions:
- entity: switch.harmony_xboxone
state: 'on'
card:
type: "custom:button-card"
color_type: icon
color: rgb(220, 220, 220)
icon: mdi:volume-minus
styles:
card:
- --keep-background: 'true'
tap_action:
action: call-service
service: media_player.volume_down
service_data:
entity_id: media_player.denon_avr_x2000
- type: conditional
conditions:
- entity: switch.harmony_tvkijkenreceiver
state: 'on'
card:
type: "custom:button-card"
color_type: icon
color: rgb(220, 220, 220)
icon: mdi:volume-minus
styles:
card:
- --keep-background: 'true'
tap_action:
action: call-service
service: media_player.volume_down
service_data:
entity_id: media_player.denon_avr_x2000
- type: vertical-stack
cards:
- type: "custom:button-card"
icon: mdi:apple
color_type: card
# color: rgb(117, 189, 111)
color: "#70AE98"
color_off: rgb(245, 245, 245)
entity: switch.harmony_appletv
show_name: false
styles:
card:
- --keep-background: 'true'
tap_action:
action: toggle
state:
- value: 'Apple TV kijken'
# color: rgb(117, 189, 111)
color: "#70AE98"
- value: 'off'
styles:
icon:
- color: 'var(--text-color)'
- type: conditional
conditions:
- entity: switch.harmony_tvkijken
state: 'on'
card:
type: "custom:button-card"
color_type: icon
color: rgb(220, 220, 220)
icon: mdi:volume-plus
styles:
card:
- --keep-background: 'true'
tap_action:
action: call-service
service: media_player.volume_up
service_data:
entity_id: media_player.samsung_tv_woonkamer
- type: conditional
conditions:
- entity: switch.harmony_appletv
state: 'on'
card:
type: "custom:button-card"
color_type: icon
color: rgb(220, 220, 220)
icon: mdi:volume-plus
styles:
card:
- --keep-background: 'true'
tap_action:
action: call-service
service: media_player.volume_up
service_data:
entity_id: media_player.denon_avr_x2000
- type: conditional
conditions:
- entity: switch.harmony_xboxone
state: 'on'
card:
type: "custom:button-card"
color_type: icon
color: rgb(220, 220, 220)
icon: mdi:volume-plus
styles:
card:
- --keep-background: 'true'
tap_action:
action: call-service
service: media_player.volume_up
service_data:
entity_id: media_player.denon_avr_x2000
- type: conditional
conditions:
- entity: switch.harmony_tvkijkenreceiver
state: 'on'
card:
type: "custom:button-card"
color_type: icon
color: rgb(220, 220, 220)
icon: mdi:volume-plus
styles:
card:
- --keep-background: 'true'
tap_action:
action: call-service
service: media_player.volume_up
service_data:
entity_id: media_player.denon_avr_x2000
- type: vertical-stack
cards:
- type: "custom:button-card"
icon: mdi:xbox
color_type: card
color: "#70AE98"
color_off: rgb(245, 245, 245)
entity: switch.harmony_xboxone
show_name: false
styles:
card:
- --keep-background: 'true'
tap_action:
action: toggle
state:
- value: 'Xbox One'
color: "#70AE98"
- value: 'off'
styles:
icon:
- color: 'var(--text-color)'
- type: "custom:button-card"
icon: mdi:power
color_type: card
color: "#CA7E8D"
color_off: rgb(245, 245, 245)
entity: switch.harmony_turnoff
show_name: false
styles:
card:
- --keep-background: 'true'
tap_action:
action: toggle
state:
- value: 'PowerOff'
color: "#CA7E8D"
- value: 'off'
styles:
icon:
- color: 'var(--text-color)'This is the card:
RomRider
commented
4 years ago I can't reproduce, this is quite strange... Are you using the latest button-card? (I'm running HA 0.107 and button-card 3.2.3)
Also, is your stack-in-card inside something else?
Kroontje
commented
4 years ago Yes, using the latest HA-Core and button-card..
This has something to do with the customized theme i use. Can you reproduce it with this settings in your theme?
background-color: '#F7F8F9'
border-color: '#E8E8E8'
ha-card-box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'I see, that's how CSS works unfortunately.
Your ha-card-box-shadow is set to inset which means that the border is inside the card and not outside the card. Since it's inside, any component inside the card will cover that border and this is why it happens. Not much I can do here.
If you change your value to:
ha-card-box-shadow: '0px 0px 0px 1px var(--border-color)'
You'll have the result you expect and no perceptible difference :)
Kroontje
commented
4 years ago Cool, problem solved. Thanks!
Checklist:
Release with the issue: current Last working release (if known):
Browser and Operating System: Microsoft Edge (new), Firefox and Chrome
Description of problem: The borders from the theme(s) and border-radius are not applied when I use the style:
- --keep-background: 'true'on the 'stacked' custom button:card.Javascript errors shown in the web inspector (if applicable):
Additional information: