mirror of
https://github.com/rad4day/Waybar.git
synced 2023-12-21 10:22:59 +01:00
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:
@ -41,19 +41,19 @@ window#waybar.chromium {
|
||||
padding: 0 5px;
|
||||
background-color: transparent;
|
||||
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 */
|
||||
#workspaces button:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
box-shadow: inherit;
|
||||
border-bottom: 3px solid #ffffff;
|
||||
box-shadow: inset 0 -3px #ffffff;
|
||||
}
|
||||
|
||||
#workspaces button.focused {
|
||||
background-color: #64727D;
|
||||
border-bottom: 3px solid #ffffff;
|
||||
box-shadow: inset 0 -3px #ffffff;
|
||||
}
|
||||
|
||||
#workspaces button.urgent {
|
||||
|
Reference in New Issue
Block a user