Wait, What ?? I cannot customize Filters Panel from here !!
But, You already know I will 👽
With CSS code
<style>
.VirtualListBox .sf-element-list-box-item {
background-color: cadetblue;
color: floralwhite;
border-left: 3px solid chocolate;
}
.sfc-style-root .sf-element-panel-content.sfc-filter-panel .sf-element-search-field .sf-element-input {
padding-left: 5px;
padding-right: 18px;
color: #72eca6;
background-color: blueviolet;
border: 2px solid #72eca6;
border-radius: 4px;
}
.sf-element-panel-content.sfc-filter-panel .sf-element-filter {
position: absolute;
overflow: hidden;
color: #e0ec3b;
background-color: #454545;
border-color: darkorange;
border-radius: 18px 0px 0px 0px;
}
.sf-element-panel-content.sfc-filter-panel .sfpc-active .ContextButton {
visibility: visible;
background: #26a2ed;
border: 1px solid white;
}
</style>
JavaScript For HTML Sanitization Victims💃
if(!$('#AlienFilter').length){
$('body').append($(`<style id="AlienFilter">
.VirtualListBox .sf-element-list-box-item {
background-color: cadetblue;
color: floralwhite;
border-left: 3px solid chocolate;
}
.sfc-style-root .sf-element-panel-content.sfc-filter-panel .sf-element-search-field .sf-element-input {
padding-left: 5px;
padding-right: 18px;
color: #72eca6;
background-color: blueviolet;
border: 2px solid #72eca6;
border-radius: 4px;
}
.sf-element-panel-content.sfc-filter-panel .sf-element-filter {
position: absolute;
overflow: hidden;
color: #e0ec3b;
background-color: #454545;
border-color: darkorange;
border-radius: 18px 0px 0px 0px;
}
.sf-element-panel-content.sfc-filter-panel .sfpc-active .ContextButton {
visibility: visible;
background: #26a2ed;
border: 1px solid white;
}
</style>`, {
id: 'AlienFilter'
}));
}
I got this so far -
