From 4f3c627303534e5f466c791517536dbf3b8b02b5 Mon Sep 17 00:00:00 2001 From: Andre Ramnitz Date: Mon, 7 Oct 2024 23:41:04 +0200 Subject: [PATCH] waybar: let's try a new style --- config/dot-config/waybar/config.jsonc | 126 +++++++++--------- config/dot-config/waybar/style.css | 181 +++++++++++++++----------- 2 files changed, 165 insertions(+), 142 deletions(-) diff --git a/config/dot-config/waybar/config.jsonc b/config/dot-config/waybar/config.jsonc index cd235f22..98f2acc6 100644 --- a/config/dot-config/waybar/config.jsonc +++ b/config/dot-config/waybar/config.jsonc @@ -3,27 +3,24 @@ "layer": "top", // Waybar at top layer "position": "top", // Waybar position (top|bottom|left|right) "width": 3440, // Waybar width - "height": 20, // Waybar height, leave blank for auto + "height": 30, // Waybar height, leave blank for auto "spacing": 1, // Gaps between modules (4px) - "modules-left": ["custom/launcher", "hyprland/workspaces", "custom/pipespacer", "hyprland/window", "hyprland/submap"], - "modules-center": ["mpd"], + "modules-left": ["custom/launcher", "hyprland/workspaces", "custom/voidspacer", "mpd"], + "modules-center": ["hyprland/window", "hyprland/submap"], "modules-right": [ - "tray", - "custom/pipespacer", + "custom/voidspacer", "cpu", "memory", - "custom/pipespacer", "group/temps", - "custom/pipespacer", "group/gammarelay", - "custom/pipespacer", "wireplumber", - "custom/pipespacer", "hyprland/language", - "custom/pipespacer", - "idle_inhibitor", - "custom/pipespacer", + "custom/voidspacer", + "tray", + "custom/voidspacer", "clock", + "idle_inhibitor", + "custom/voidspacer", "custom/notification", ], @@ -84,7 +81,7 @@ }, "hyprland/language": { - "format": " {} ", + "format": " 󰌌 {} ", "format-en": "en", "format-de": "de", }, @@ -164,18 +161,18 @@ }, "tray": { - "icon-size": 16, + "icon-size": 24, "spacing": 8, }, "cpu": { - "format": "{usage:2} 󰍛", + "format": "{usage:2}% ", "on-click": "footclient -a popup btop -p 3", "interval": 1, }, "memory": { - "format": "{percentage:2} 󰳿", + "format": "{percentage:2}% 󰳿", "on-click": "footclient -a popup btop -p 4", "interval": 1, }, @@ -183,26 +180,26 @@ "temperature": { "hwmon-path": "/sys/class/hwmon/hwmon5/temp1_input", "critical-threshold": 42, - "format": "󰞍 {temperatureC}°C", + "format": "{temperatureC}°C 󰞍", "on-click-right": "foot -a popup /usr/local/bin/fan2go-tui", }, "temperature#cpu": { "hwmon-path": "/sys/class/hwmon/hwmon3/temp1_input", "critical-threshold": 95, - "format": " {temperatureC}°C ", + "format": "{temperatureC}°C ", }, "temperature#board": { "hwmon-path": "/sys/class/hwmon/hwmon4/temp1_input", "critical-threshold": 85, - "format": "󰇅 {temperatureC}°C ", + "format": "{temperatureC}°C 󰇅", }, "temperature#gpu": { "hwmon-path": "/sys/class/drm/card0/device/hwmon/hwmon0/temp2_input", "critical-threshold": 110, - "format": "󰍹 {temperatureC}°C ", + "format": "{temperatureC}°C 󰍹", }, "network": { @@ -235,9 +232,9 @@ "on-click": "pavucontrol", }, - "pipewire": { + "wireplumber": { "scroll-step": 5, // %, can be a float - "format": "{volume} {icon}", + "format": "{volume} {icon}", "format-bluetooth": "{icon} {volume}%", "format-bluetooth-muted": " {icon}", "format-muted": " ", @@ -253,11 +250,12 @@ "default": ["", "", ""], }, "on-click": "pavucontrol", + "on-click-right": "helvum", }, "clock": { "timezone": "Europe/Berlin", - "tooltip-format": "{:%Y %B}\n{calendar}", + "tooltip-format": "{calendar}", "format-alt": "{:%Y-%m-%d}", "smooth-scrolling-threshold": "single", "calendar": { @@ -332,69 +330,67 @@ }, "custom/gammarelay-temperature": { - "format": "{} ", + "format": "{} ", "exec": "wl-gammarelay-rs watch {t}", "on-scroll-up": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateTemperature n +100", "on-scroll-down": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateTemperature n -100", - "on-click": "$HOME/.config/hypr/scripts/gammarelay-auto-temp.py > /dev/null 2>&1 &", - "on-click-middle": "busctl --user -- set-property rs.wl-gammarelay / rs.wl.gammarelay Temperature q 6500", + "on-click-middle": "$HOME/.config/hypr/scripts/gammarelay-auto-temp.py > /dev/null 2>&1 &", "on-click-right": "pkill -f '/usr/lib/python-exec/python3.12/python /home/andy/.config/hypr/scripts/gammarelay-auto-temp.py'", "interval": "2", }, "custom/gammarelay-brightness": { - "format": "{}% ", + "format": "{}% ", "exec": "wl-gammarelay-rs watch {bp}", "on-scroll-up": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateBrightness d +0.02", "on-scroll-down": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateBrightness d -0.02", "interval": "2", }, "custom/gammarelay-gamma": { - "format": "{} 𝛄", + "format": "{} 𝛄", "exec": "wl-gammarelay-rs watch {g}", "on-scroll-up": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateGamma d +0.02", "on-scroll-down": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateGamma d -0.02", "interval": "2", }, - "group/system": { - "orientation": "inherit", - "drawer": { - "transition-duration": 500, - "children-class": "not-system", - }, - "modules": ["custom/powermenu", "idle_inhibitor", "custom/wallpaper"], - }, "group/gammarelay": { - "orientation": "inherit", - "drawer": { - "transition-duration": 500, - "children-class": "not-gammarelay", - "transition-left-to-right": false, + "orientation": "horizontal", + "drawer": { + "transition-duration": 500, + "children-class": "not-gammarelay", + "transition-left-to-right": false, + "click-to-reveal": 1, + }, + "modules": [ + "custom/gammarelay-temperature", + "custom/gammarelay-gamma", + "custom/gammarelay-brightness", + ], }, - "modules": [ - "custom/gammarelay-temperature", - "custom/gammarelay-gamma", - "custom/gammarelay-brightness", - ], - }, - "group/temps": { - "orientation": "inherit", - "drawer": { - "transition-duration": 750, - "children-class": "not-temps", - "transition-left-to-right": false, + "group/temps": { + "orientation": "horizontal", + "drawer": { + "transition-duration": 500, + "children-class": "not-temps", + "transition-left-to-right": false, + "click-to-reveal": 1, + }, + "modules": [ + "temperature", + "temperature#cpu", + "temperature#board", + "temperature#gpu", + ], + }, + "custom/pipespacer": { + "format": "󰇙", + "max-length": 1, + "tooltip": false, + }, + "custom/voidspacer": { + "format": " ", + "max-length": 1, + "tooltip": false, }, - "modules": [ - "temperature", - "temperature#cpu", - "temperature#board", - "temperature#gpu", - ], - }, - "custom/pipespacer": { - "format": "|", - "max-length": 3, - "tooltip": false, - }, } diff --git a/config/dot-config/waybar/style.css b/config/dot-config/waybar/style.css index 0d27246d..41bea8ad 100644 --- a/config/dot-config/waybar/style.css +++ b/config/dot-config/waybar/style.css @@ -3,9 +3,9 @@ /* ----------------------------------- window ----------------------------------- */ * { - font-family: "SF Mono Nerd Font"; - font-size: 11pt; - min-height: 12px; + font-family: "Iosevka Nerd Font Propo"; + font-size: 16px; + min-height: 11px; padding: 0; margin: 0; } @@ -43,11 +43,9 @@ tooltip label { margin-right: 1px; margin-bottom: 3px; color: @base00; - background: @base09; + background: @base0D; border: 1px solid alpha(@base02, 0.9); border-radius: 4px 8px 4px 8px; - font-size: 13pt; - font-weight: 500; } #workspaces { @@ -58,7 +56,6 @@ tooltip label { margin-left: 0px; margin-right: 0px; margin-bottom: 2px; - font-size: 13pt; background: none; } @@ -72,7 +69,6 @@ tooltip label { margin-left: 1px; margin-right: 1px; margin-bottom: 2px; - font-weight: 500; transition: all 0.3s ease; } @@ -82,7 +78,7 @@ tooltip label { text-shadow: inherit; color: @base01; opacity: 0.8; - background: @base0F; + background: alpha(@base07, 0.8); border: inherit; padding: 0 8px; transition: all 0.3s ease; @@ -92,7 +88,7 @@ tooltip label { #workspaces button.focused, #workspaces button.active { border-radius: 8px; - background: @base09; + background: @base0C; border: 1px solid @base02; padding: 0 8px; color: @base00; @@ -132,10 +128,12 @@ tooltip label { #window { border-radius: 0px; color: @base05; - background: none; - border: none; + background: alpha(@base03, 0.3); padding-left: 10px; padding-right: 10px; + border: none; + border-radius: 4px; + margin: 2px; } window#waybar { @@ -143,7 +141,7 @@ window#waybar { border-left: 2px solid @base01; border-right: 2px solid @base01; border-bottom: 2px solid @base01; - background-color: alpha(@base00, 0.95); + background-color: alpha(@base00, 0.92); transition-property: background-color; transition-duration: 0.5s; /*background-image: url("/home/andy/dotfiles/config/waybar/textures/D_0.65.png"); @@ -158,62 +156,45 @@ window#waybar { } /* ------------------------------------ modules right ------------------------------ */ -#tray { - padding-left: 8px; - padding-right: 8px; - color: @base00; - background-color: alpha(@base00, 0.3); - background: none; - border: none; -} - -#pulseaudio { - padding-left: 8px; - padding-right: 8px; - color: @base0C; - background-color: alpha(@base09, 0.3); - font-weight: 600; - background: none; - border: none; -} - #wireplumber { padding-left: 8px; padding-right: 8px; color: @base0C; - background-color: alpha(@base09, 0.3); - font-weight: 600; - background: none; + background-color: alpha(@base0C, 0.1); border: none; + border-radius: 8px; + margin: 2px; } #cpu { padding-left: 8px; padding-right: 4px; - color: @base0A; - background-color: alpha(@base0A, 0.3); - font-weight: 600; - background: none; + color: @base0B; + background-color: alpha(@base0B, 0.1); border: none; + border-radius: 8px; + margin: 2px; } + #memory { padding-left: 4px; padding-right: 8px; color: @base0A; - background-color: alpha(@base0A, 0.3); - font-weight: 600; - background: none; + background-color: alpha(@base0A, 0.1); border: none; + border-radius: 8px; + margin-top: 2px; + margin-bottom: 2px; } -#clock { - padding-left: 8px; - padding-right: 12px; - color: @base05; - background-color: alpha(@base00, 0.3); - font-weight: 600; - background: none; - border: none; +#language { + padding-left: 4px; + padding-right: 8px; + color: @base09; + background-color: alpha(@base09, 0.1); + border-radius: 8px; + margin-top: 2px; + margin-bottom: 2px; } #temperature, @@ -224,9 +205,10 @@ window#waybar { padding-left: 8px; padding-right: 8px; color: @base0D; - background-color: alpha(@base0D, 0.3); - background: none; - border: none; + background-color: alpha(@base0D, 0.1); + border-radius: 8px; + margin-top: 2px; + margin-bottom: 2px; } #temperature.critical, @@ -237,9 +219,10 @@ window#waybar { padding-left: 8px; padding-right: 8px; color: @base08; - background-color: alpha(@base08, 0.3); - background: none; - border: none; + background-color: alpha(@base08, 0.1); + border-radius: 8px; + margin-top: 2px; + margin-bottom: 2px; } #custom-gammarelay-temperature, @@ -247,20 +230,11 @@ window#waybar { #custom-gammarelay-brightness { padding-left: 8px; padding-right: 8px; - color: @base09; - background-color: alpha(@base09, 0.3); - background: none; - border: none; -} - -#idle_inhibitor, -#custom-wallpaper { - padding-left: 8px; - padding-right: 8px; - color: @base0E; - background-color: alpha(@base0E, 0.3); - background: none; - border: none; + color: @base08; + background-color: alpha(@base08, 0.1); + border-radius: 8px; + margin-top: 2px; + margin-bottom: 2px; } #custom-powermenu { @@ -268,8 +242,9 @@ window#waybar { padding-right: 8px; color: @base09; background-color: alpha(@base09, 0.3); - background: none; - border: none; + border-radius: 8px; + margin-top: 2px; + margin-bottom: 2px; } #custom-pipespacer { @@ -286,14 +261,66 @@ window#waybar { margin-right: 1px; margin-bottom: 3px; color: @base00; - background: @base09; + background: @base0E; border: 1px solid alpha(@base02, 0.5); border-radius: 8px 4px 8px 4px; - font-size: 13pt; - font-weight: 500; } -#language { - color: @base09; +#cpu:hover, +#memory:hover, +#clock:hover, +#custom-gammarelay-brightness:hover, +#custom-gammarelay-gamma:hover, +#custom-gammarelay-temperature:hover, +#language:hover, +#temperature#chipset.critical:hover, +#temperature#chipset:hover, +#temperature#cpu.critical:hover, +#temperature#cpu:hover, +#temperature#gpu.critical:hover, +#temperature#gpu:hover, +#temperature#vrm.critical:hover, +#temperature#vrm:hover, +#temperature.critical:hover, +#temperature:hover, +#wireplumber:hover, +#custom-wallpaper:hover { + background-color: alpha(@base05, 0.2); +} + +#idle_inhibitor:hover { + background-color: alpha(@base07, 0.8); +} + +#idle_inhibitor, +#custom-wallpaper { + padding-left: 8px; + padding-right: 8px; + color: @base00; + background-color: alpha(@base0D, 0.9); + border-radius: 8px; + margin-top: 4px; + margin-bottom: 4px; +} + +#tray { + padding-left: 8px; + padding-right: 8px; + color: @base00; + background-color: alpha(@base02, 0.3); + border: none; + border-radius: 8px; + margin: 2px; +} + +#clock { + font-size: 18px; + padding-left: 8px; + padding-right: 12px; + color: @base0C; + background-color: alpha(@base0C, 0.3); + border-radius: 8px; + margin-top: 4px; + margin-bottom: 4px; } -- 2.51.2