I really like this! I had been playing around with expanding the slider and reducing the device name to solve for the wasted space, but using shorter names wasn’t always viable. I tweaked your code a bit to preserve the accessibilty of the slider on the end and make the text a little easier to read when brightness is reduced.
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
flex-shrink: 1;
flex-grow: 1;
padding-left: 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--primary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
flex-shrink: 1;
flex-grow: 0;
margin-right: 10px;
padding: 0 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--secondary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--secondary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
--secondary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.: |
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}
mushroom-button:nth-child(2)$: |
:host {
z-index: 1;
# margin-right: 5px !important;
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: rgba{{state_attr(config.entity,'rgb_color')[0], state_attr(config.entity,'rgb_color')[1], state_attr(config.entity,'rgb_color')[2], 0.9}} !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
# --icon-color: #dedede !important;
{% endif %}
{% endif %}
}
mushroom-button:nth-child(3)$: |
:host {
z-index: 1;
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: rgba{{state_attr(config.entity,'rgb_color')[0], state_attr(config.entity,'rgb_color')[1], state_attr(config.entity,'rgb_color')[2], 0.9}} !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #dedede !important;
{% endif %}
{% endif %}
}
mushroom-light-brightness-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (config.show_color_control == true and config.show_color_temp_control == true) %}
width: calc(100% - 190px);
{% elif (config.show_color_control == false and config.show_color_temp_control == true) %}
width: calc(100% - 136px);
{% elif (config.show_color_control == true and config.show_color_temp_control == false) %}
width: calc(100% - 136px);
{% else %}
width: calc(100% - 80px);
{% endif %}
left: 68px;
top: 18.2%;
}
.slider-track-background {
background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
}
mushroom-light-color-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (config.show_color_temp_control == true) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
mushroom-light-color-temp-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (config.show_color_control == true) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
.: |
.actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
flex-grow: 0;
flex-shrink: 0;
}
mushroom-state-info {
display: flex;
}
Edit: For some reason, lights without RGB or tunable white would not show correctly. I made an adjustment to the CSS in order to address this. There’s probably a “better” way to align the brightness percentage text using flexbox, but this works well enough:
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
flex-shrink: 0;
flex-grow: 0;
{% else %}
flex-shrink: 1;
flex-grow: 1;
{% endif %}
padding-left: 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
text-shadow: 0px 0px 7px orange;
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--primary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
{% if states(config.entity) == 'on' %}
position: absolute;
right: 15px;
top: 23px;
{% else %}
{% endif %}
{% else %}
flex-shrink: 1;
{% endif %}
flex-grow: 0;
margin-right: 10px;
padding: 0 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
text-shadow: 0px 0px 7px orange;
--secondary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--secondary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
--secondary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.: |
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}
mushroom-light-brightness-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% set rgb = (state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy')) and config.show_color_control != false %}
{% set color_temp = state_attr(config.entity, 'supported_color_modes')|contains('color_temp') and config.show_color_temp_control != false %}
{% if (rgb == true and color_temp == true) %}
width: calc(100% - 190px);
{% elif (rgb == false and color_temp == true) %}
width: calc(100% - 136px);
{% elif (rgb == true and color_temp == false) %}
width: calc(100% - 136px);
{% else %}
width: calc(100% - 80px);
{% endif %}
left: 68px;
top: 18.2%;
}
.slider-track-background {
background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
}
mushroom-light-color-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (state_attr(config.entity, 'supported_color_modes')|contains('color_temp') == true and config.show_color_temp_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
mushroom-light-color-temp-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if ((state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy') == true) and config.show_color_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
.: |
.actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
flex-grow: 9;
flex-shrink: 1;
{% else %}
flex-grow: 0;
flex-shrink: 0;
{% endif %}
}
mushroom-state-info {
display: flex;
}