search

Alexays / Waybar

Highly customizable Wayland bar for Sway and Wlroots based compositors. :v: :tada:
MIT License
6.63k stars 707 forks source link

[Question] How to do stepped corners? #2708

Closed isiko closed 10 months ago

isiko commented 11 months ago

I'm trying to recreate the 37C3 theme, and as per their styleguide corners should be stepped.

Heres an example:

20231130_13h57m08s_grim

In their Website they do this by using a clip-path, but when trying to copy the CSS to my Waybar config, Waybar can't read the CSS. Is this just not possible with Waybar or is there a workaround to this?

Here's the example from their Website:

.btn {
  clip-path:polygon(0px 6px,6px 6px,6px 0px,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  font-weight:500;
  letter-spacing:0.1em
}
apiraino commented 10 months ago

Waybar relies on GTK CSS capabilities, so if GTK (either 3.0 or 4.0) does not support clip-path, unfortunately nothing Waybar can do about it

isiko commented 10 months ago

I already expected something like that, sadly :/