Add module class to the root elements of the modules

[alebastr]

At some point, my draft style for Fedora configuration was looking like that:

Warning: ugly CSS fragment inside

/* Common module rules */
.modules-left > widget > label,
.modules-center > widget > label,
.modules-right > widget > label {
  color: inherit;
  margin: 0;
  padding: 0 10px;
}

box.vertical.modules-left > widget > label,
box.vertical.modules-center > widget > label,
box.vertical.modules-right > widget > label {
  padding: 10px 0;
}

window#waybar:not(.bottom):not(.left):not(.right) .modules-left > widget > label,
window#waybar:not(.bottom):not(.left):not(.right) .modules-center > widget > label,
window#waybar:not(.bottom):not(.left):not(.right) .modules-right > widget > label {
  box-shadow: inset 0 -2px;
}

window#waybar.bottom .modules-left > widget > label,
window#waybar.bottom .modules-center > widget > label,
window#waybar.bottom .modules-right > widget > label {
  box-shadow: inset 0 2px;
}

window#waybar.left .modules-left > widget > label,
window#waybar.left .modules-center > widget > label,
window#waybar.left .modules-right > widget > label {
  box-shadow: inset -2px 0;
}

window#waybar.right .modules-left > widget > label,
window#waybar.right .modules-center > widget > label,
window#waybar.right .modules-right > widget > label {
  box-shadow: inset 2px 0;
}

(Actually, it was worse - there's also a .modules-xxx > widget > box. And #image)

Two obvious ideas to optimize that:

• Ensure that the position class on windows is always set and :not(.bottom):not(.left):not(.right) can be shortened to .top.
• Introduce a shorter selector for each module, like label.module/box.module/etc...

After that, the style was reduced to a rather tolerable

/* Common module rules */
label.module { /* or .module:not(box) */
  color: inherit;
  margin: 0;
  padding: 0 10px;
}

box.vertical label.module {
  padding: 10px 0;
}

window#waybar.top label.module {
  box-shadow: inset 0 -2px;
}

window#waybar.bottom label.module {
  box-shadow: inset 0 2px;
}

window#waybar.left label.module {
  box-shadow: inset -2px 0;
}

window#waybar.right label.module {
  box-shadow: inset 2px 0;
}

Part of bar.cpp refactoring should also simplify adding support for position property of Sway IPC (see sway-bar(5)/get_bar_config in sway-ipc(7)). But that functionality does not belong here and is not finished yet.

---

A Styling wiki update could look like that (after Module Group Styling):

Generic module style

A style with the .module selector would affect all the modules. In practice, you may prefer to use more specific label.module and box.module selectors.

label.module {
    padding: 0 10px;
    box-shadow: inset 0 -3px;
}
box.module button:hover {
    box-shadow: inset 0 -3px #ffffff;
}

You need to remember about selector specificity when overriding the style for a specific module:

/*
 * Show border for all simple text modules when the bar is in a top or bottom position.
 * a=1 b=2 c=2 -> specificity = 122
 */
window#waybar.top label.module {
    box-shadow: inset 0 -3px;
}
window#waybar.bottom label.module {
    box-shadow: inset 0 3px;
}
/*
 * But hide the border for sway/window (need to include `window#waybar` to increase specificity)
 * a=2 b=0 c=1 -> specificity = 201
 */
window#waybar #window {
    box-shadow: none;
}

[Alexays]

LGTM thx :)