I may be wrong, but I don’t think that with the current implementation it is possible to target the header of an active module. The only way that I could think of is using the has selector to find headers where the first button is checked, but that doesn’t seem to work, e.g.:
#right #module-header:has(> button:first-child:checked) { ... }
Maybe someone who knows better can confirm whether this is possible?
Nice, I integrated this but using a pastel green color to stay closer to the spirit of the gray themes. Here is the updated snippet with accents:
@define-color header_color shade(@plugin_bg_color, 0.7);
@define-color active_module_icon_fg #9FE2BF;
@define-color active_module_icon_fg_hover #9FE2BF;
/* Shape and border of module headers. */
#left #module-header,
#right #module-header,
#right #basics-header-box {
background-color: @header_color;
border-radius: 0px;
margin: 0px;
padding: 4px;
}
#left #module-header {
border-top-right-radius: 10px;
}
#right #module-header,
#right #basics-header-box {
border-top-left-radius: 10px;
}
/* Remove the 1px light gray border between widgets in the quick settings. */
#basics-box-labels widget {
border: 0px;
}
/* Make active modules stand out a bit more. */
#right #module-header > button:first-child:checked,
#right #basics-header-box > button:first-child:checked {
color: @active_module_icon_fg;
}
#right #module-header > button:first-child:hover,
#right #basics-header-box > button:first-child:hover {
background-color: black;
}
/* Special handling for "module order". */
#right > box:last-child #module-header {
background-color: @bg_color;
border-radius: 0px;
margin-right: 0.9em;
}
And here it’s how it looks:
