From eae8dae5f3735a677b25e15721e83b81a08611e1 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Tue, 10 Feb 2026 09:17:31 -0600 Subject: feat(waybar): add menu module with Arch logo and circular workspace indicators Add custom/menu module at far left of bar with Arch logo SVG background. Left-click opens fuzzel, right-click opens wlogout. Workspace buttons now use pixel-sized circles (34x32px with border-radius: 50%) instead of pill shapes. Both dupre and hudson theme CSS files synced with new sizing. Co-Authored-By: Claude Opus 4.6 --- dotfiles/hyprland/.config/themes/dupre/waybar.css | 24 +++++++++++++++++----- dotfiles/hyprland/.config/themes/hudson/waybar.css | 24 +++++++++++++++++----- .../hyprland/.config/waybar/arch-logo-hudson.svg | 4 ++++ dotfiles/hyprland/.config/waybar/arch-logo.svg | 4 ++++ dotfiles/hyprland/.config/waybar/config | 8 ++++++++ dotfiles/hyprland/.config/waybar/style.css | 24 +++++++++++++++++----- 6 files changed, 73 insertions(+), 15 deletions(-) create mode 100644 dotfiles/hyprland/.config/waybar/arch-logo-hudson.svg create mode 100644 dotfiles/hyprland/.config/waybar/arch-logo.svg (limited to 'dotfiles/hyprland/.config') diff --git a/dotfiles/hyprland/.config/themes/dupre/waybar.css b/dotfiles/hyprland/.config/themes/dupre/waybar.css index 20d6a99..64ad36c 100644 --- a/dotfiles/hyprland/.config/themes/dupre/waybar.css +++ b/dotfiles/hyprland/.config/themes/dupre/waybar.css @@ -19,18 +19,32 @@ window#waybar { } #workspaces button { - padding: 0.5rem; - margin: 0.2rem; + min-width: 34px; + min-height: 32px; + padding: 0; + margin: 0.15rem; background-color: transparent; color: #969385; - border-radius: 1rem; + border-radius: 50%; transition: all 0.3s ease; } #workspaces button.active { background: #d7af5f; color: #151311; +} + +#custom-menu { + background-image: url("/home/cjennings/.config/waybar/arch-logo.svg"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; border-radius: 1rem; + min-width: 2.0rem; + padding: 0; + margin: 0.15rem; + transition: all 0.3s ease; } #workspaces button.urgent { @@ -40,7 +54,7 @@ window#waybar { .modules-right, .modules-left { background-color: #151311; border-radius: 1rem; - padding: 0.2rem 0.6rem; + padding: 0.1rem 0.6rem; margin: 0.3rem; border: 0.095rem solid #d7af5f; box-shadow: 0rem 0.2rem 0.4rem rgba(0,0,0,0.5); @@ -58,7 +72,7 @@ window#waybar { #clock, #custom-layout, #window { - padding: 0.4rem; + padding: 0.45rem; margin: 0.3rem; color: #969385; background-color: transparent; diff --git a/dotfiles/hyprland/.config/themes/hudson/waybar.css b/dotfiles/hyprland/.config/themes/hudson/waybar.css index 299f1c2..da1ad75 100644 --- a/dotfiles/hyprland/.config/themes/hudson/waybar.css +++ b/dotfiles/hyprland/.config/themes/hudson/waybar.css @@ -19,18 +19,32 @@ window#waybar { } #workspaces button { - padding: 0.5rem; - margin: 0.2rem; + min-width: 34px; + min-height: 32px; + padding: 0; + margin: 0.15rem; background-color: transparent; color: #bbbbbb; - border-radius: 1rem; + border-radius: 50%; transition: all 0.3s ease; } #workspaces button.active { background: #daa520; color: #222222; +} + +#custom-menu { + background-image: url("/home/cjennings/.config/waybar/arch-logo-hudson.svg"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; border-radius: 1rem; + min-width: 2.0rem; + padding: 0; + margin: 0.15rem; + transition: all 0.3s ease; } #workspaces button.urgent { @@ -40,7 +54,7 @@ window#waybar { .modules-right, .modules-left { background-color: #222222; border-radius: 1rem; - padding: 0.2rem 0.6rem; + padding: 0.1rem 0.6rem; margin: 0.3rem; border: 0.095rem solid #daa520; box-shadow: 0rem 0.2rem 0.4rem rgba(0,0,0,0.5); @@ -57,7 +71,7 @@ window#waybar { #clock, #custom-layout, #window { - padding: 0.4rem; + padding: 0.45rem; margin: 0.3rem; color: #bbbbbb; background-color: transparent; diff --git a/dotfiles/hyprland/.config/waybar/arch-logo-hudson.svg b/dotfiles/hyprland/.config/waybar/arch-logo-hudson.svg new file mode 100644 index 0000000..2ee808e --- /dev/null +++ b/dotfiles/hyprland/.config/waybar/arch-logo-hudson.svg @@ -0,0 +1,4 @@ + + + + diff --git a/dotfiles/hyprland/.config/waybar/arch-logo.svg b/dotfiles/hyprland/.config/waybar/arch-logo.svg new file mode 100644 index 0000000..0c03976 --- /dev/null +++ b/dotfiles/hyprland/.config/waybar/arch-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/dotfiles/hyprland/.config/waybar/config b/dotfiles/hyprland/.config/waybar/config index 422096f..5582dc6 100644 --- a/dotfiles/hyprland/.config/waybar/config +++ b/dotfiles/hyprland/.config/waybar/config @@ -7,6 +7,7 @@ "margin-right": 10, "modules-left": [ + "custom/menu", "hyprland/workspaces", "custom/layout", "hyprland/window" @@ -33,6 +34,13 @@ ] }, + "custom/menu": { + "format": " ", + "tooltip": false, + "on-click": "fuzzel", + "on-click-right": "pgrep -x wlogout || wlogout -b 3 -T 600 -B 600 -L 1200 -R 1200 -c 20 -r 20" + }, + "hyprland/workspaces": { "disable-scroll": true, "all-outputs": true, diff --git a/dotfiles/hyprland/.config/waybar/style.css b/dotfiles/hyprland/.config/waybar/style.css index 6d67642..45ce837 100644 --- a/dotfiles/hyprland/.config/waybar/style.css +++ b/dotfiles/hyprland/.config/waybar/style.css @@ -19,18 +19,32 @@ window#waybar { } #workspaces button { - padding: 0.5rem; - margin: 0.2rem; + min-width: 34px; + min-height: 32px; + padding: 0; + margin: 0.15rem; background-color: transparent; color: #bbbbbb; - border-radius: 1rem; + border-radius: 50%; transition: all 0.3s ease; } #workspaces button.active { background: #daa520; color: #222222; +} + +#custom-menu { + background-image: url("/home/cjennings/.config/waybar/arch-logo.svg"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-color: transparent; border-radius: 1rem; + min-width: 2.0rem; + padding: 0; + margin: 0.15rem; + transition: all 0.3s ease; } #workspaces button.urgent { @@ -40,7 +54,7 @@ window#waybar { .modules-right, .modules-left { background-color: #222222; border-radius: 1rem; - padding: 0.2rem 0.6rem; + padding: 0.1rem 0.6rem; margin: 0.3rem; border: 0.095rem solid #daa520; box-shadow: 0rem 0.2rem 0.4rem rgba(0,0,0,0.5); @@ -58,7 +72,7 @@ window#waybar { #clock, #custom-layout, #window { - padding: 0.4rem; + padding: 0.45rem; margin: 0.3rem; color: #bbbbbb; background-color: transparent; -- cgit v1.2.3