[SOLVED] How I can reduce circle size into colorpicker widget?

Apps & Services HABPanel
1

Dear,
I craeted a custom widget with an colorpicker inside, but I’d like reduce the selected color circle size.
I tried to insert into “style” tag of my widget very much css script, but without to have success.
Can you help me to find a correct css script, please?

Thanks

2

The class of the circle is .c-ckolor__picker
Set a class on a parent div of the color picker like

<div class="myclass">
   <widget-colorpicker ...></widget-colorpicker>
</div>

Then use this CSS:

.myclass .c-ckolor__picker {
    width: 30px !important;
    height: 30px !important;
    border-radius: 15px !important;
}

(border radius has to be half of the width/height to look like a circle)

1 Like
3

Thanks a lot!!!