style(workspaces): align text with other modules

Currently, the bottom border on workspace buttons eats into the box size
and causes the text to sit higher than in other modules. This is ugly
when there are other modules (like the window title) right next to the
workspace module. To fix the issue, create the bottom border using an
inset box-shadow, which doesn't affect the box's content sizing.
This commit is contained in:
Thomas Hebb 2020-08-29 22:56:26 -07:00
parent 44119db436
commit 1b22e2b320

View File

@ -41,19 +41,19 @@ window#waybar.chromium {
padding: 0 5px; padding: 0 5px;
background-color: transparent; background-color: transparent;
color: #ffffff; color: #ffffff;
border-bottom: 3px solid transparent; /* Use box-shadow instead of border so the text isn't offset */
box-shadow: inset 0 -3px transparent;
} }
/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
#workspaces button:hover { #workspaces button:hover {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
box-shadow: inherit; box-shadow: inset 0 -3px #ffffff;
border-bottom: 3px solid #ffffff;
} }
#workspaces button.focused { #workspaces button.focused {
background-color: #64727D; background-color: #64727D;
border-bottom: 3px solid #ffffff; box-shadow: inset 0 -3px #ffffff;
} }
#workspaces button.urgent { #workspaces button.urgent {