Hello,
Here is where Iām at
cards:
- type: vertical-stack
cards:
- type: "custom:stack-in-card"
keep:
background: true
outer_padding: true
margin: true
modus: vertical
triggers_update:
- sun.sun
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
title: Master Colour Spots
cards:
- type: light
entity: light.lamp_colour_l1_master
name: L1
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: light
entity: light.lamp_colour_r1_master
name: R1
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: light
entity: light.lamp_colour_l2_master
name: L2
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: light
entity: light.lamp_colour_r2_master
name: R2
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: light
entity: light.lamp_colour_r3_master
name: R3
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: entities
entities:
- type: "custom:slider-entity-row"
entity: input_number.input_color
full_row: true
hide_state: true
card_mod:
style: |
ha-card {
background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
height: 50px !important;
}
- type: entities
entities:
- type: "custom:slider-entity-row"
entity: input_number.input_color_temp
full_row: true
hide_state: true
card_mod:
style: |
ha-card {
background: linear-gradient(to right, rgb(195, 209, 255) 0%, rgb(255,255,255) 50%, rgb(255, 169, 87) 100%);
height: 50px !important;
}
resulting
I would like to get the light buttons inside the stack like the rest of my buttons, example
![image](https://community-assets.home-assistant.io/original/3X/9/0/906f389befdd4b3735ea49bc145767850cde65db.png)
code associated
styles:
card:
- width: 120px
- height: 100px
- margin: 3px
- padding: 5px
- border-radius: 15px
- background-color: var(--primary-background-color)
- box-shadow: >
[[[
if (states['sun.sun'].state == "below_horizon")
return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
else if (states['sun.sun'].state == "above_horizon")
return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
]]]
which I can easy use with the custom:button-card but I have trouble getting it into the code above.
Finally, I would like to get the slider more in the middle so I can make the cards a bit smaller still.