How to decrease the space between icons

[janemba]

Hello,

I'm using group for some icons with a simple CSS style:

#hardware{
	 font-weight: normal;
         padding: 0px;
         margin: 0px;
	 color: @fg;
	 background-color: @bg;
}

I'm trying to reduce the space between icons but my style has no effects.

[JarKz]

Try change spacing option in main config file.
You can read more here: https://github.com/Alexays/Waybar/wiki/Configuration

[janemba]

I checked for it but unfortunately, its the gap size between modules and not icons.

[JarKz]

I didn't seen that you meant group, my bad. Try #hardware * selector, should work if you mean the space between group's inner elements.

[janemba]

Thank you it works fine.

Unfortunately, with that selector I'm having a radius for all icons instead of having the radius only on the edges. Is there a way to preserve it ?

I tried to suppress and manually put the radius at the edges from the first and last icons:

#hardware * {
    border-radius: 0;
    font-weight: normal;
    padding: 0 3px;
    margin: 0 3px;
    color: @fg;
    background-color: @bg;
}

#power-profiles-daemon {
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
}

#battery {
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}

But the radius is not appearing for those icons in the group.

[JarKz]

As I understand you right, you mean the radius of group bar. To have this, you can use #hardware selector as well:

#hardware * {
    /* this radius option kinda useless but I leave here */
    border-radius: 0;
    font-weight: normal;
    padding: 0 3px;
    margin: 0 3px;
    color: @fg;
}

/* apply the radius only to group bar */
#hardware {
    border-radius: 20px;
    background-color: @bg;
}

And it should work fine if background applies only to the 'hardware' group bar and inner modules doesn't have background.

[janemba]

Perfect, thank you.