From b919dd203a8c765446686b9bec7cd2b0e1a18663 Mon Sep 17 00:00:00 2001 From: Andre Ramnitz Date: Mon, 18 Nov 2024 01:08:15 +0100 Subject: [PATCH] waybar: reorder some modules into groups --- dot-config/waybar/config.jsonc | 57 +++-- dot-config/waybar/style.css | 391 +++++++++++++++++---------------- 2 files changed, 243 insertions(+), 205 deletions(-) diff --git a/dot-config/waybar/config.jsonc b/dot-config/waybar/config.jsonc index 64b1a939..9ba4dcb0 100644 --- a/dot-config/waybar/config.jsonc +++ b/dot-config/waybar/config.jsonc @@ -11,23 +11,16 @@ "mpd" ], "modules-center": [ - "hyprland/window", - "hyprland/submap" + "hyprland/submap", + "hyprland/window" ], "modules-right": [ - "custom/voidspacer", - "cpu", - "memory", - "group/temps", - "group/gammarelay", + "group/sysmon", + "group/display", "network", "wireplumber", - "hyprland/language", - "custom/voidspacer", - "tray", "custom/voidspacer", - "clock", - "idle_inhibitor", + "group/trayclock", "custom/voidspacer", "custom/notification" ], @@ -61,12 +54,12 @@ "rewrite-default": "👉 {title}", "rewrite": { "(.*) – Mozilla Firefox": " $1", - "(.*) - qutebrowser": " $1", + "(.*) - qutebrowser": " $1", "(.*) - Kakoune": " $1", "(.*) - Dolphin": " $1", "lfrun(.*)": "󰀶 $1", - "NCMPCPP(.*)": "󰲹 $1", - "Threema(.*)": "󰭺 $1" + "Now playing(.*)": " Now playing $1", + "Threema(.*)": "󰭺 $1", }, "on-click": "hyprctl dispatch pseudo", "on-click-right": "~/.config/hypr/scripts/mousefocus_toggle.sh", @@ -122,6 +115,7 @@ "mpd": { "format": "mpd: {stateIcon} {artist} - {album} - {title} ⸨{songPosition}|{queueLength}⸩ {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}", "format-disconnected": "", + "format-paused": "", "format-stopped": "", "unknown-tag": "N/A", "interval": 2, @@ -183,8 +177,8 @@ "on-scroll-down": "mpc volume -5 > /dev/null 2>&1" }, "tray": { - "icon-size": 24, - "spacing": 8 + "icon-size": 18, + "spacing": 6 }, "cpu": { //"format": "{usage:2}% ", @@ -302,10 +296,10 @@ "escape": true }, "idle_inhibitor": { - "format": "{icon}", + "format": "{icon} ", "format-icons": { - "activated": "", - "deactivated": "" + "activated": " on", + "deactivated": " off" } }, "custom/wallpaper": { @@ -340,6 +334,29 @@ "on-scroll-down": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateGamma d -0.02", "interval": "2" }, + "group/trayclock": { + "orientation": "horizontal", + "modules": [ + "tray", + "clock", + ] + }, + "group/display": { + "orientation": "horizontal", + "modules": [ + "idle_inhibitor", + "group/gammarelay", + "hyprland/language" + ] + }, + "group/sysmon": { + "orientation": "horizontal", + "modules": [ + "cpu", + "group/temps", + "memory" + ] + }, "group/gammarelay": { "orientation": "inherit", "drawer": { diff --git a/dot-config/waybar/style.css b/dot-config/waybar/style.css index c39c3416..40a9f2b2 100644 --- a/dot-config/waybar/style.css +++ b/dot-config/waybar/style.css @@ -4,8 +4,8 @@ /* ----------------------------------- window ----------------------------------- */ * { font-family: "Iosevka Nerd Font Propo"; - font-size: 16px; - min-height: 11px; + font-size: 13px; + min-height: 7px; padding: 0; margin: 0; } @@ -34,33 +34,7 @@ tooltip label { color: @base05; } -/* ------------------------------------ modules individual config ------------------------------- */ -#custom-launcher { - padding-left: 10px; - padding-right: 10px; - margin-top: 2px; - margin-left: 1px; - margin-right: 1px; - margin-bottom: 3px; - color: @base00; - background: @base0D; - border: 1px solid @base03; - border-radius: 4px 8px 4px 8px; -} - -#custom-notification { - padding-left: 10px; - padding-right: 10px; - margin-top: 2px; - margin-left: 1px; - margin-right: 1px; - margin-bottom: 3px; - color: @base00; - background: @base0E; - border: 1px solid @base03; - border-radius: 8px 4px 8px 4px; -} - +/* ------------------------------------ workspaces begin ------------------------------ */ #workspaces { border-radius: 0px; padding-left: 5px; @@ -78,7 +52,7 @@ tooltip label { color: @base00; border: 1px solid @base03; padding: 0 8px; - margin-top: 1px; + margin-top: 2px; margin-left: 1px; margin-right: 1px; margin-bottom: 2px; @@ -112,215 +86,293 @@ tooltip label { color: @base00; transition: all 0.3s ease; } +/* ------------------------------------ workspaces end ------------------------------ */ -#mpd { - border-radius: 0px; - padding-left: 8px; - padding-right: 8px; - margin-top: 2px; +/* ------------------------------------ modules individual config ------------------------------- */ +#custom-launcher { + padding-left: 10px; + padding-right: 10px; + margin-top: 1px; margin-left: 1px; margin-right: 1px; margin-bottom: 2px; - color: @base05; - background: none; - border: none; + color: @base00; + background: @base0D; + border: 1px solid @base01; + border-radius: 4px 8px 4px 8px; } -#mpris { - padding-left: 8px; - padding-right: 8px; +#custom-notification { + padding-left: 10px; + padding-right: 10px; + margin-top: 1px; + margin-left: 1px; + margin-right: 1px; + margin-bottom: 2px; color: @base00; - background: none; + background: @base0E; + border: 1px solid @base01; + border-radius: 8px 4px 8px 4px; +} + +#mpd { + padding-left: 4px; + padding-right: 4px; + color: @base0D; + background-color: alpha(@base0D, 0.1); border: none; + border-radius: 0px 0px 4px 4px; + margin-top: 0px; + margin-bottom: 4px; + border-top: none; + border-left: 1px solid; + border-right: 1px solid; + border-bottom: 1px solid; + border-color: alpha(@base0D, 0.4); } -#tray { +#mpris { padding-left: 8px; padding-right: 8px; color: @base00; - background-color: alpha(@base02, 0.8); + background: none; border: none; - border-radius: 8px; - margin-top: 2px; - margin-left: 1px; - margin-right: 1px; - margin-bottom: 2px; } #window { - border-radius: 0px; - color: @base05; - background: alpha(@base03, 0.3); padding-left: 10px; padding-right: 10px; - border: none; - border-radius: 4px; - margin: 2px; + color: @base05; + background-color: alpha(@base04, 0.1); + border-radius: 0px 0px 4px 4px; + margin-top: 0px; + margin-bottom: 4px; + border-top: none; + border-left: 1px solid; + border-right: 1px solid; + border-bottom: 1px solid; + border-color: alpha(@base04, 0.4); } window#waybar { - border-top: 0px solid @base01; - border-left: 2px solid @base01; - border-right: 2px solid @base01; - border-bottom: 2px solid @base01; - background-color: alpha(@base00, 0.92); + border-top: none; + border-left: 1px solid @base00; + border-right: 1px solid @base00; + border-bottom: 1px solid @base00; + background-color: alpha(@base01, 0.92); transition-property: background-color; transition-duration: 0.5s; - /*background-image: url("/home/andy/dotfiles/config/waybar/textures/D_0.65.png"); - background-position: topleft; - background-repeat: repeat-x; - */ + /*background: linear-gradient(180deg, rgba(21,21,21,1) 0%, rgba(21,21,21,1) 45%, rgba(32,32,32,0.3) 100%);*/ } #submap { - color: @base00; - background-color: @base08; -} - -/* ------------------------------------ modules bulk config ------------------------------ */ -#wireplumber { - padding-left: 8px; - padding-right: 8px; - color: @base0C; - background-color: alpha(@base0C, 0.1); - border: none; - border-radius: 0px 0px 4px 4px; + font-weight: 500; + padding-left: 6px; + padding-right: 6px; + color: @base08; + background-color: alpha(@base08, 0.1); + border-radius: 0px 4px 4px 0px; margin-top: 0px; - margin-bottom: 2px; - border-top: 0px solid; + margin-bottom: 4px; + border-top: none; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; - border-color: alpha(@base0C, 0.4); + border-color: alpha(@base08, 0.4); } +/* ------------------------------------ sysmon group begin ------------------------------ */ #cpu { - padding-left: 8px; - padding-right: 4px; + padding-left: 6px; + padding-right: 6px; color: @base0B; background-color: alpha(@base0B, 0.1); border: none; - border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 0px 4px; margin-top: 0px; - margin-bottom: 2px; - border-top: 0px solid; + margin-bottom: 4px; + border-top: none; border-left: 1px solid; - border-right: 1px solid; + border-right: none; border-bottom: 1px solid; border-color: alpha(@base0B, 0.4); } - +#temperature, +#temperature#cpu, +#temperature#chipset, +#temperature#vrm, +#temperature#gpu { + padding-left: 6px; + padding-right: 6px; + color: @base0B; + background-color: alpha(@base0B, 0.1); + border-radius: 0px 0px 0px 0px; + margin-top: 0px; + margin-bottom: 4px; + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid; + border-color: alpha(@base0B, 0.4); +} +#temperature.critical, +#temperature#cpu.critical, +#temperature#chipset.critical, +#temperature#vrm.critical, +#temperature#gpu.critical { + padding-left: 6px; + padding-right: 6px; + color: @base08; + background-color: alpha(@base08, 0.1); + border-radius: 0px 0px 0px 0px; + margin-top: 0px; + margin-bottom: 4px; + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid; + border-color: alpha(@base08, 0.4); +} #memory { - padding-left: 4px; - padding-right: 8px; - color: @base0A; - background-color: alpha(@base0A, 0.1); + padding-left: 6px; + padding-right: 6px; + color: @base0B; + background-color: alpha(@base0B, 0.1); border: none; - border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 4px 0px; margin-top: 0px; - margin-bottom: 2px; - border-top: 0px solid; - border-left: 1px solid; + margin-bottom: 4px; + border-top: none; + border-left: none; border-right: 1px solid; border-bottom: 1px solid; - border-color: alpha(@base0A, 0.4); + border-color: alpha(@base0B, 0.4); } +/* ------------------------------------ sysmon group end ------------------------------ */ -#network { - padding-left: 4px; - padding-right: 4px; - color: @base0E; - background-color: alpha(@base0E, 0.1); - border: none; - border-radius: 0px 0px 4px 4px; +/* ------------------------------------ trayclock group begin ------------------------------ */ +#tray { + padding-left: 6px; + padding-right: 6px; + color: @base00; + background-color: alpha(@base04, 0.1); + border-radius: 0px 0px 0px 4px; margin-top: 0px; - margin-bottom: 2px; - border-top: 0px solid; + margin-bottom: 4px; + border-top: none; border-left: 1px solid; + border-right: none; + border-bottom: 1px solid; + border-color: alpha(@base04, 0.4); +} + +#clock { + font-weight: 500; + padding-left: 6px; + padding-right: 6px; + color: @base06; + background-color: alpha(@base04, 0.1); + border-radius: 0px 0px 4px 0px; + margin-top: 0px; + margin-bottom: 4px; + border-top: none; + border-left: none; border-right: 1px solid; border-bottom: 1px solid; - border-color: alpha(@base0E, 0.4); + border-color: alpha(@base04, 0.4); } +/* ------------------------------------ trayclock group end ------------------------------ */ -#language { - padding-left: 2px; +/* ------------------------------------ display group begin ------------------------------ */ +#idle_inhibitor { + padding-left: 6px; padding-right: 2px; - color: @base09; - background-color: alpha(@base09, 0.1); - border-radius: 0px 0px 4px 4px; + color: @base0A; + background-color: alpha(@base0A, 0.1); + border-radius: 0px 0px 0px 4px; margin-top: 0px; - margin-bottom: 2px; - border-top: 0px solid; + margin-bottom: 4px; + border-top: none; border-left: 1px solid; - border-right: 1px solid; + border-right: none; border-bottom: 1px solid; - border-color: alpha(@base09, 0.4); + border-color: alpha(@base0A, 0.4); } -#temperature, -#temperature#cpu, -#temperature#chipset, -#temperature#vrm, -#temperature#gpu { - padding-left: 8px; - padding-right: 8px; - color: @base0D; - background-color: alpha(@base0D, 0.1); - border-radius: 0px 0px 4px 4px; +#custom-gammarelay-temperature, +#custom-gammarelay-gamma, +#custom-gammarelay-brightness { + padding-left: 4px; + padding-right: 4px; + color: @base0A; + background-color: alpha(@base0A, 0.1); + border-radius: 0px 0px 0px 0px; margin-top: 0px; - margin-bottom: 2px; - border-top: 0px solid; - border-left: 1px solid; + margin-bottom: 4px; + border-top: none; + border-left: none; + border-right: none; + border-bottom: 1px solid; + border-color: alpha(@base0A, 0.4); +} +#language { + padding-left: 2px; + padding-right: 2px; + color: @base0A; + background-color: alpha(@base0A, 0.1); + border-radius: 0px 0px 4px 0px; + margin-top: 0px; + margin-bottom: 4px; + border-top: none; + border-left: none; border-right: 1px solid; border-bottom: 1px solid; - border-color: alpha(@base0D, 0.4); + border-color: alpha(@base0A, 0.4); } +/* ------------------------------------ display group end ------------------------------ */ -#temperature.critical, -#temperature#cpu.critical, -#temperature#chipset.critical, -#temperature#vrm.critical, -#temperature#gpu.critical { - padding-left: 8px; - padding-right: 8px; - color: @base08; - background-color: alpha(@base08, 0.1); +/* ------------------------------------ modules bulk config ------------------------------ */ +#wireplumber { + padding-left: 6px; + padding-right: 6px; + color: @base0C; + background-color: alpha(@base0C, 0.1); + border: none; border-radius: 0px 0px 4px 4px; margin-top: 0px; - margin-bottom: 2px; - border-top: 0px solid; + margin-bottom: 4px; + border-top: none; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; - border-color: alpha(@base08, 0.4); + border-color: alpha(@base0C, 0.4); } -#custom-gammarelay-temperature, -#custom-gammarelay-gamma, -#custom-gammarelay-brightness { - padding-left: 8px; - padding-right: 8px; - color: @base08; - background-color: alpha(@base08, 0.1); +#network { + padding-left: 4px; + padding-right: 4px; + color: @base09; + background-color: alpha(@base09, 0.1); + border: none; border-radius: 0px 0px 4px 4px; margin-top: 0px; - margin-bottom: 2px; - border-top: 0px solid; + margin-bottom: 4px; + border-top: none; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; - border-color: alpha(@base08, 0.4); + border-color: alpha(@base09, 0.4); } #custom-powermenu { - padding-left: 8px; - padding-right: 8px; + padding-left: 4px; + padding-right: 4px; color: @base09; background-color: alpha(@base09, 0.3); border-radius: 0px 0px 4px 4px; margin-top: 0px; - margin-bottom: 2px; - border-top: 0px solid; + margin-bottom: 4px; + border-top: none; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; @@ -361,34 +413,3 @@ window#waybar { background-color: alpha(@base07, 0.7); } -#idle_inhibitor, -#custom-wallpaper { - padding-left: 4px; - padding-right: 4px; - color: @base0D; - background-color: alpha(@base0D, 0.3); - border-radius: 0px 0px 4px 4px; - margin-top: 0px; - margin-bottom: 2px; - border-top: 0px solid; - border-left: 1px solid; - border-right: 1px solid; - border-bottom: 1px solid; - border-color: alpha(@base0D, 0.4); -} - -#clock { - padding-left: 8px; - padding-right: 12px; - color: @base0C; - background-color: alpha(@base0C, 0.3); - border-radius: 0px 0px 4px 4px; - margin-top: 0px; - margin-bottom: 2px; - border-top: 0px solid; - border-left: 1px solid; - border-right: 1px solid; - border-bottom: 1px solid; - border-color: alpha(@base0C, 0.4); -} - -- 2.51.2