Waybar spacing issues

[qasimsk20]

Propo versions of Nerd Fonts should be used in the waybar for correct spacing

[brink-lab]

Great that you are raising this too! I opened a discussion on this topic not long ago https://github.com/basecamp/omarchy/discussions/1254#discussion-8812071.

Do you know where to find a proper version of Nerd Fonts? Haven't been able to myself. I will be happy to update the config and create a PR to address the issue, if we can locate the right font.

[qasimsk20]

The way Omarchy currently installs the fonts is enough. The only thing I did was manually change the style.css inside waybar to correct the spacing. We already have the Propo versions; we just need to make waybar use them. Thanks for taking the initiative of making a PR.

[brink-lab]

You're right. Updating the waybar css with "font-family: CaskaydiaMono Nerd Font Propo" solves the spacing issue. But it introduces another one: The volume icon is not the same width in all its states. The low volume icon is narrower than the high volume icon. This means that all icons to the left of the volume icon moves when the volume icon changes.

Any ideas for how to solve this? Maybe we can assign a fixed width to the volume icons - or we need to find another set of volume icons in the style of e.g. Apple's.

[brink-lab]

Tinkered a bit. The best compromise is probably to update with Propo font for all waybar symbols, and then within the pipewire audio module, set it to non-Propo font.

I will make a PR for that.

[brink-lab]

PR created: https://github.com/basecamp/omarchy/pull/1411

[qasimsk20]

@import url("mocha.css");

• { font-family: CaskaydiaMono Nerd Font Propo; font-size: 16px; min-height: 0; font-weight: bold; }

/* Hydrangea Menu Button with Monaspace Radon */ #custom-omarchy { font-family: "Monaspace Radon Var", "CaskaydiaMono Nerd Font Propo", monospace; font-weight: bold; color: @mauve; background-color: transparent; padding: 0 8px; margin: 0 2px; font-size: 16px; letter-spacing: 1px; }

/* #custom-omarchy:hover { / / background-color: @surface0; / / color: @blue; / / } */

window#waybar { background: transparent; background-color: @crust; color: @overlay0; transition-property: background-color; transition-duration: 0.1s; }

#window { margin: 8px; padding-left: 8; padding-right: 8; }

button { box-shadow: inset 0 -3px transparent; border: none; border-radius: 0; }

button:hover { background: inherit; color: @mauve; }

/* Omarchy Workspaces with Catppuccin Styling */ #workspaces button { padding: 0 4px; color: @subtext0; }

#workspaces button.focused { background-color: rgba(0, 0, 0, 0.3); color: @mauve; border-top: 2px solid @mauve; }

#workspaces button.active { background-color: transparent; background-color: rgba(0, 0, 0, 0.3); color: @mauve; }

#workspaces button.urgent { background-color: @red; }

/* Omarchy Menu Button */ #custom-omarchy { color: @mauve; background-color: transparent; padding: 0 8px; margin: 0 4px; }

#custom-omarchy:hover { background-color: @surface0; }

/* Clock with Catppuccin Styling and Omarchy Functionality */ #clock { color: @text; background-color: transparent; font-size: 16px; font-weight: 600; padding: 6px 12px; margin: 0; }

#clock:hover { background-color: @surface0; }

/* Update Button */ #custom-update { color: @yellow; background-color: transparent; padding: 0 8px; margin: 0 4px; }

#custom-update:hover { background-color: @surface0; }

/* Network Module */ #network { color: @blue; background-color: transparent; font-size: 18px; padding: 2px 4px; margin: 0 4px; }

#network.disconnected { color: @red; }

#network:hover { background-color: @surface0; }

/* Brightness Module */ #backlight { padding: 2px 4px; color: @yellow; background-color: transparent; }

#brightness:hover { background-color: @surface0; }

/* Bluetooth Module */ #bluetooth { color: @blue; background-color: transparent; padding: 2px 4px; margin: 0 4px; }

#bluetooth:hover { background-color: @surface0; }

/* Pulseaudio Module */ #pulseaudio { color: @lavender; background-color: transparent; font-size: 16px; padding: 2px 4px; margin: 0 4px; }

#pulseaudio.muted { color: @overlay2; }

#pulseaudio:hover { background-color: @surface0; }

/* CPU Module */ #cpu { color: @sapphire; background-color: transparent; padding: 2px 4px; margin: 0 4px; font-size: 16px; }

#cpu:hover { background-color: @surface0; }

/* Memory Module */ #memory { color: @teal;; min-height: 0; padding: 2px 4px; margin: 0 4px; background-color: transparent; border-radius: 0; transition: all 0.2s ease-in-out; }

#memory:hover { background-color: @surface0; }

/* Battery Module */ #battery { color: @green; background-color: transparent; font-size: 18px; padding: 2px 4px; margin: 0 4px; }

#battery.charging { color: @yellow; }

#battery.warning { color: @peach; }

#battery.critical { color: @red; }

#battery:hover { background-color: @surface0; }

/* Tray Module */ #tray { background-color: transparent; padding: 0 8px; margin: 0 4px; }

#tray > .passive { -gtk-icon-effect: dim; }

#tray > .needs-attention { -gtk-icon-effect: highlight; background-color: @red; }

/* Tray Expander */ #custom-expand-icon { color: @overlay0; background-color: transparent; padding: 0 4px; }

#custom-expand-icon:hover { background-color: @surface0; }

/* Group Styling */ .tray-group-item { background-color: transparent; padding: 0 4px; }

/* Tooltip */ tooltip { border-radius: 3px; background-color: @surface0; color: @text; }

/* Calendar specific styling */ calendar { background-color: @surface0; color: @text; border-radius: 8px; border: 1px solid @surface1; }

calendar:selected { background-color: @blue; color: @base; }

/* Animations */ @keyframes blink { to { background-color: transparent; color: @red; } }

this is my current waybar.css I had those issues with the volume icon but then I played with the paddings and got it right

[brink-lab]

Thanks for the input. However, I don't see any way to solve the volume icon problem optimally with the icons we are currently using. The underlying problem is that they don't all have the same width. Optimally, we need a set of icons that all have the same width. Apple has clearly faced the same issue, so they made a set of icons where all the "sound waves" are always visible, but where some of them dim in order to indicate the volume.

Our icons change the number of sound waves and hereby the width.

[qasimsk20]

There is a misalignment in the main config itself when using Propo fonts because DHH tried to center it I guess that is what even I did when I didn't know about Propo fonts. When you use Propo fonts and apply proper padding there is no problem at all

[brink-lab]

Not sure I follow you argument. Why is padding needed if we update to a propo font?

[qasimsk20]

Yeah you said it yourself but DHH didn't use Propo fonts though so he tried to make things look Proportionate by playing with the padding that is exactly What I did when I didn't know abt .. .... So we use the Propo font and equal minimal padding for all

[brink-lab]

Right, now I get your point. I hope the PR goes through. With propo font the spacing now looks like this

So thank you for suggesting the right font type. That was the missing piece, I had been looking for.

[qasimsk20]

Np glad to help the community grow. Its so fascinating that Arch Ricing is no different to creating an artwork you got to work on every minute detail possible so that the highlights are good

[emourad]

What about changing the battery icon when it needs to be charged #1213 ?

[brink-lab]

Like changing the icon? I have seen dhh comment that he only wants monochrome icons, so e.g letting it change color would likely not be an option.

I assume we could find a way to use another icon when batt is lower than e.g. 10%. But then let's submit it as a separate PR so it is easier to accept or reject. Personally, I don't really miss such a functionality.

[emourad]

Like changing the icon? I have seen dhh comment that he only wants monochrome icons, so e.g letting it change color would likely not be an option.

I assume we could find a way to use another icon when batt is lower than e.g. 10%. But then let's submit it as a separate PR so it is easier to accept or reject. Personally, I don't really miss such a functionality.

The main idea of having monochrome icons is to focus and not get distracted by the icons, which is perfect for work.

However, when it comes to a low battery level, it would be very hard to get distracted by the icon showing just the battery icon less filled up.

So, changing the battery colour on purpose would do exactly the opposite (distract you), which is perfectly fine.

I agree, submitting a separate PR is probably the best option; thanks for the suggestion 😊 @brink-lab

[ryanrhughes]

I believe this has been achieved but if not, let me know and I'll reopen.

[brink-lab]

@ryanrhughes I got a PR merged to solve this with 3.1.