blankie
/
Waybar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
resources/style.css
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 {