🟦 Neobrutal Zebar

✨ Features

• Process icons for current workspace, with current focus indicator.
• System information meters, with dynamic coloring and animations.
• Spotify, currently playing song.
• Configuration using CSS-variables.

[!IMPORTANT]

This configuration is it's early development. Contributions are welcome, especially to the process icon map, as I only mapped the ones I use that could not be automapped.

🖼️ Showcase

Fullscreen

Workspaces

https://github.com/user-attachments/assets/38e4a09f-1583-4e2a-84e5-6da7156402b2

System info

https://github.com/user-attachments/assets/185f238c-03b8-4f63-87a2-2d36d6b31039

🚀 Getting started

Getting the config in place

Download the neobrutal-zebar.zip from the latest release. Unzip the contents inside your zebar config directory.

Replacing values

In order for imports to work you will need to update some paths in the files

1. config.yaml

In order for zebar to able to import the css file, you need to url encode all special character, this can be done via services like https://www.urldecoder.org/.

For instance if you zebar config is stored at C:/Users/MyCoolUsername/.glzr/zebar. Your import link would look like this: http://asset.localhost/C:/Users/MyCoolUsername/.glzr/zebar/styles/global.css. Everything following localhost/ needs to be url encoded for the import to work inside the yaml. This would mean that you would take C:/Users/MyCoolUsername/.glzr/zebar/styles/global.css and paste it to https://www.urldecoder.org/ and replace the import with that string. The resulting string will then look like this: "http://asset.localhost/C%3A%2FUsers%2FMyCoolUsername%2F.glzr%2Fzebar%2Fstyles%2Fglobal.css"

# Change the following line to match your path
@import "http://asset.localhost/>> PATH TO YOUR YOUR GLZR CONFIG FOLDER<<.glzr%2Fzebar%2Fstyles%2Fglobal.css";

2. styles/global.css

/* Change the following imports, you don't need to url encode these like in config.yaml */
@import "http://asset.localhost/>> PATH TO YOUR YOUR GLZR CONFIG FOLDER<</.glzr/zebar/styles/themes/rose-pine.css";
@import "http://asset.localhost/>> PATH TO YOUR YOUR GLZR CONFIG FOLDER<</.glzr/zebar/styles/config.css";
@import "http://asset.localhost/>> PATH TO YOUR YOUR GLZR CONFIG FOLDER<</.glzr/zebar/styles/animations.css";
@import "http://asset.localhost/>> PATH TO YOUR YOUR GLZR CONFIG FOLDER<</.glzr/zebar/styles/bar.css";
@import "http://asset.localhost/>> PATH TO YOUR YOUR GLZR CONFIG FOLDER<</.glzr/zebar/styles/group-left.css";
@import "http://asset.localhost/>> PATH TO YOUR YOUR GLZR CONFIG FOLDER<</.glzr/zebar/styles/group-center.css";
@import "http://asset.localhost/>> PATH TO YOUR YOUR GLZR CONFIG FOLDER<</.glzr/zebar/styles/group-right.css";

Configuring CSS-variables

In styles/config.css there exists a lot of configuration available to tweak.

🎨 Themes

🌷Rosé Pine (default)

😸 Catppuccin

Utilizes Catppuccin Palette, configure css variables accoriding to your liking.

🍳 Recipies

Soft Brutal

```css --radius: 9999px; ```

Round bars without shadow

```css --border-size: 1px; --radius: 9999px; --shadow-size-bar: 0px; --shadow-size-button: 0px; ```

📜 License

This project is licensed under the MIT License - see the LICENSE file