Fix spacing between icons on Waybar (#1411)

* Update style.css

Fixes the uneven spacing between icons on waybar by updating styling.css with Propo font family.
However, Propo introduces a small issue as the volume icons don't have the same with. As a consequence, icons left of volume will move based on the displayed volume icon. To solve this, I added a non-Propo font to the pipewire module as well - this way the volume icons have fixed length but eats a bit into the spacing towards the CPU icon. But I see this as the best trade-off.

* Update waybar config.jsonc

* Update tray spacing in waybar config

* Modify margins in style.css

Adjusted margins for various elements.

* Update waybar css for even spacing

* Update Waybar config tray spacing
This commit is contained in:
brink-lab
2025-10-18 13:32:38 +02:00
committed by GitHub
parent 80907fcf4f
commit 920b1a983f
2 changed files with 16 additions and 7 deletions

View File

@@ -122,7 +122,7 @@
"modules": ["custom/expand-icon", "tray"] "modules": ["custom/expand-icon", "tray"]
}, },
"custom/expand-icon": { "custom/expand-icon": {
"format": " ", "format": "",
"tooltip": false "tooltip": false
}, },
"custom/screenrecording-indicator": { "custom/screenrecording-indicator": {
@@ -133,6 +133,6 @@
}, },
"tray": { "tray": {
"icon-size": 12, "icon-size": 12,
"spacing": 12 "spacing": 17
} }
} }

View File

@@ -7,7 +7,7 @@
border: none; border: none;
border-radius: 0; border-radius: 0;
min-height: 0; min-height: 0;
font-family: CaskaydiaMono Nerd Font; font-family: 'CaskaydiaMono Nerd Font';
font-size: 12px; font-size: 12px;
} }
@@ -30,11 +30,8 @@
opacity: 0.5; opacity: 0.5;
} }
#tray,
#cpu, #cpu,
#battery, #battery,
#network,
#bluetooth,
#pulseaudio, #pulseaudio,
#custom-omarchy, #custom-omarchy,
#custom-screenrecording-indicator, #custom-screenrecording-indicator,
@@ -43,8 +40,20 @@
margin: 0 7.5px; margin: 0 7.5px;
} }
#tray {
margin-right: 16px;
}
#bluetooth {
margin-right: 17px;
}
#network {
margin-right: 13px;
}
#custom-expand-icon { #custom-expand-icon {
margin-right: 7px; margin-right: 20px;
} }
tooltip { tooltip {