Hello everyone,
I created a pop-up bubble card (see picture & code below). I would like to adjust the size of the color control at the bottom to the same size as the slider at the top. Could someone please help me to adjust the code respectively? The part for the color control is at the bottom of the code.
Greetings
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#Stripe_Schlafen"
icon: mdi:led-strip
show_header: true
name: LED Stripe
force_icon: false
show_state: false
- type: grid
columns: 1
square: false
cards:
- type: custom:gap-card
height: 15
- type: custom:bubble-card
card_type: separator
name: Brightness
icon: mdi:brightness-6
styles: |
.separator-container div:last-child {
opacity: 1!important;
}
- type: custom:big-slider-card
entity: light.rgbw_stripe_szi_eltern
name: Deckenlampe
attribute: brightness
transition: 0.3
height: 70
background_color: "linear-gradient(90deg, #D3D3D3, #F5F5F5)"
icon_color: black
icon: mdi:led-strip-variant
show_percentage: true
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border-radius: 20px !important;
border: none !important; # Removes any border around the card
}
{% if is_state('light.rgbw_stripe_szi_eltern', 'on') %}
#name{
font-size:14px !important;
font-weight:300 !important;
opacity:0.7 !important;
}
#percentage{
font-size:16px !important;
font-weight:500 !important;
color: black !important;
}
#slider{
opacity: 1 !important;
background: linear-gradient(145deg, rgba(251,192,217,1) 0%, rgba(255,212,193,1) 100%) !important;
border-radius: 20px !important; # Makes the slider ends round
height: 40px !important; # Adjust the slider's height
}
.slider-thumb {
height: 40px !important; # Customize the thumb size
width: 40px !important;
border-radius: 50% !important; # Make the thumb round
}
{% else %}
#container{
background: black !important;
}
#name{
color: white !important;
font-size:14px !important;
font-weight:300 !important;
opacity:0.7 !important;
}
#percentage{
font-size:16px !important;
font-weight:500 !important;
color: white !important;
}
#icon{
opacity: 1 !important;
filter: none !important;
color: white !important;
}
{% endif %}
- type: custom:gap-card
height: 20
- type: custom:bubble-card
card_type: separator
name: Color Picker
icon: mdi:border-color
styles: |
.separator-container div:last-child {
opacity: 1!important;
}
- type: custom:mushroom-light-card
entity: light.rgbw_stripe_szi_eltern
show_brightness_control: false
show_color_control: true
icon_type: none
show_color_temp_control: false
name: " "
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
border-radius: 25px !important;
border: none !important; # Removes any border around the card
}
