From a89e6808726af540aa57263fd0decd97e79ead67 Mon Sep 17 00:00:00 2001 From: Nikolai Papin Date: Thu, 19 Mar 2026 02:21:29 +0300 Subject: [PATCH] refactor(waybar): reorganize top bar with groups and add new modules - config_top.jsonc: - Group modules into traygroup, pomodorogroup, bench, general - Add weather, language, CPU, memory, temperature modules with icons and states - Add pomodoro preset buttons (10m,20m,30m,1h,1h30m) - Split battery into #watt (power draw) and #charge (charge level) - Add invisible separators for spacing - config_bottom.jsonc: - Remove unused modules from left/right, add margin-top - style_top.css: - Style new groups and modules, define state-based colors for CPU/memory/temperature - Add hover effects and critical animation for paused pomodoro - style_bottom.css: - Style minimized taskbar buttons - Fix side panel group selector (use #group) --- waybar/config_bottom.jsonc | 7 +- waybar/config_top.jsonc | 138 ++++++++++++++++++++++++++++++++-- waybar/style/style_bottom.css | 6 +- waybar/style/style_top.css | 124 ++++++++++++++++++++++++++---- 4 files changed, 247 insertions(+), 28 deletions(-) diff --git a/waybar/config_bottom.jsonc b/waybar/config_bottom.jsonc index 850c214..49dfdbc 100644 --- a/waybar/config_bottom.jsonc +++ b/waybar/config_bottom.jsonc @@ -7,24 +7,19 @@ "height": 30, "margin-left": 5, "margin-right": 5, + "margin-top": 5, "margin-bottom": 5, "position": "bottom", "layer": "top", "spacing": 0, "reload_style_on_change": true, "modules-left": [ - "tray", - "custom/pomodoro" ], "modules-center": [ "wlr/taskbar", "custom/launcher" ], "modules-right": [ - "battery", - "cpu", - "memory", - "temperature" ], "custom/separator": { "format": " ", diff --git a/waybar/config_top.jsonc b/waybar/config_top.jsonc index 676692b..d542a9f 100644 --- a/waybar/config_top.jsonc +++ b/waybar/config_top.jsonc @@ -8,22 +8,121 @@ "margin-left": 5, "margin-right": 5, "margin-top": 5, + "margin-bottom": 5, + "position": "top", "layer": "top", "spacing": 0, "reload_style_on_change": true, "modules-left": [ + "custom/weather", + "custom/separator_invisible", + "group/pomodorogroup", + "custom/separator_invisible", "mpd" ], "modules-center": [ "hyprland/workspaces" ], "modules-right": [ - "pulseaudio", - "pulseaudio/slider", - "battery", - "network", - "clock" + "group/traygroup", + "custom/separator_invisible", + "group/bench", + "custom/separator_invisible", + "group/general" ], + "group/traygroup": { + "orientation": "inherit", + "modules": [ + "hyprland/language", + "tray" + ] + }, + "group/pomodorogroup": { + "orientation": "inherit", + "modules": [ + "custom/pomodoro", + "custom/pomodoro10", + "custom/pomodoro20", + "custom/pomodoro30", + "custom/pomodoro60", + "custom/pomodoro90" + ], + "drawer": { + + } + }, + "group/bench": { + "orientation": "inherit", + "modules": [ + "battery#watt", + "cpu", + "memory", + "temperature" + ] + }, + "group/general": { + "orientation": "inherit", + "modules": [ + "pulseaudio", + "pulseaudio/slider", + "battery#charge", + "network", + "clock" + ] + }, + "hyprland/language": { + "format": "{}", + "format-en": "🇬🇧", + "format-ru": "🇷🇺" + }, + "battery#watt": { + "interval": 5, + "format": "{power:.0f}W |", + "on-click": "sh -c 'swaync-client -cp & ~/.config/rofi/scripts/dmenu_powermodemenu.sh'" + }, + "cpu": { + "format": "{icon}", + "tooltip": true, + "interval": 3, + "format-icons": [ + "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥" + ], + "states": { + "s1": 0, + "s2": 10, + "s3": 30, + "s4": 50, + "s5": 70 + }, + "on-click": "kitty btop" + }, + "memory": { + "format": "{icon}", + "interval": 3, + "format-icons": [ + "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥" + ], + "states": { + "s1": 20, + "s2": 30, + "s3": 50, + "s4": 60, + "s4": 70 + }, + "tooltip-format": "{used:0.1f}GiB used", + "tooltip": true, + "on-click": "kitty btop" + }, + "temperature": { + "format": "{icon}", + "interval": 10, + "format-icons": [ + "󰄰", "󰄰", "󰄰", "󰄰", "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥" + ], + "warning-threshold": 60, + "critical-threshold": 80, + "on-click": "kitty btop" + }, "tray": { "icon-size": 18, "spacing": 10, @@ -131,7 +230,7 @@ "on-click-right": "mode" } }, - "battery": { + "battery#charge": { "full-at": 98, "states": { "good": 85, @@ -179,11 +278,38 @@ "interval": "once", "tooltip": false }, + "custom/weather": { + "format": "{}°C", + "tooltip": true, + "interval": 3600, + "exec": "wttrbar --location Moskau --nerd --mph --date-format %d.%m.%Y", + "return-type": "json" + }, "custom/pomodoro": { "format": "{}", "return-type": "json", "exec": "~/.local/bin/waybar-module-pomodoro --persist -w 20 -s 5 -l 20 -i 3 -p '' -a '' --autob", "on-click": "~/.local/bin/waybar-module-pomodoro toggle", "on-click-right": "~/.local/bin/waybar-module-pomodoro reset" + }, + "custom/pomodoro10": { + "format": "10m", + "on-click": "~/.local/bin/waybar-module-pomodoro set-work 10" + }, + "custom/pomodoro20": { + "format": "20m", + "on-click": "~/.local/bin/waybar-module-pomodoro set-work 20" + }, + "custom/pomodoro30": { + "format": "30m", + "on-click": "~/.local/bin/waybar-module-pomodoro set-work 30" + }, + "custom/pomodoro60": { + "format": "1h", + "on-click": "~/.local/bin/waybar-module-pomodoro set-work 60" + }, + "custom/pomodoro90": { + "format": "1h30m", + "on-click": "~/.local/bin/waybar-module-pomodoro set-work 90" } } diff --git a/waybar/style/style_bottom.css b/waybar/style/style_bottom.css index 315edbe..de3fbbd 100644 --- a/waybar/style/style_bottom.css +++ b/waybar/style/style_bottom.css @@ -122,6 +122,10 @@ window#waybar.chromium { min-height: 20px; } +#taskbar button.minimized { + color: alpha(@accent, 0.5); +} + #taskbar.empty { padding: 0; } @@ -158,7 +162,7 @@ window#waybar.chromium { /* -------------------------------------------------------------------------- SIDE PANEL GROUPS -------------------------------------------------------------------------- */ -.modules-left, .modules-right { +#group { /* Layout & Box Model */ border: 1px solid @border-color; border-radius: 15px; diff --git a/waybar/style/style_top.css b/waybar/style/style_top.css index 900302f..713ac27 100644 --- a/waybar/style/style_top.css +++ b/waybar/style/style_top.css @@ -46,19 +46,27 @@ window#waybar.chromium { #mpd, #mpris, #custom-pomodoro, +#custom-weather, #clock, #battery, #network, #pulseaudio, #pulseaudio-slider, -#custom-separator, #scratchpad, +#language, +#cpu, +#memory, +#temperature, #tray { padding: 0 10px; color: @text-primary; transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease; } +#custom-separator-invisible { + padding: 0 30px; +} + /* -------------------------------------------------------------------------- WORKSPACES -------------------------------------------------------------------------- */ @@ -124,13 +132,51 @@ window#waybar.chromium { text-shadow: 0px 0px 8px @text-primary; } +/* -------------------------------------------------------------------------- + BATTERY + -------------------------------------------------------------------------- */ +#language { + padding-right: 0; + padding-left: 12px; +} + +/* -------------------------------------------------------------------------- + BATTERY + -------------------------------------------------------------------------- */ +#battery.watt { + padding-right: 0; +} + +/* -------------------------------------------------------------------------- + CPU + -------------------------------------------------------------------------- */ +#cpu { + font-size: 20px; +} + +/* -------------------------------------------------------------------------- + MEMORY + -------------------------------------------------------------------------- */ +#memory { + font-size: 20px; + padding: 0; +} + +/* -------------------------------------------------------------------------- + TEMPERATURE + -------------------------------------------------------------------------- */ +#temperature { + font-size: 20px; +} + /* -------------------------------------------------------------------------- SIDE PANEL GROUPS -------------------------------------------------------------------------- */ -#mpd, #mpris, #workspaces, .modules-right { +#general, #bench, #workspaces, #mpd, #traygroup, #custom-weather, #pomodorogroup { /* Layout & Box Model */ border: 1px solid @border-color; border-radius: 15px; + margin: 2.5px; /* Colors */ background-color: @bg-panel; @@ -176,17 +222,22 @@ window#waybar.chromium { CUSTOM MODULES -------------------------------------------------------------------------- */ #custom-pomodoro { - color: @text-secondary; + color: @text-primary; border-radius: 0 0 10px 10px; } +#pomodorogroup .drawer-child * { + color: @text-primary; + margin-right: 10px; +} + /* -------------------------------------------------------------------------- STATE-BASED STYLES -------------------------------------------------------------------------- */ /* POMODORO STATES */ #custom-pomodoro.work { - color: @accent; + color: @attention; } #custom-pomodoro.break { @@ -195,8 +246,7 @@ window#waybar.chromium { } #custom-pomodoro.pause { - color: @attention; - text-shadow: 0px 0px 4px @attention; + animation: critical 0.5s 50; } /* MPD STATES */ @@ -219,29 +269,59 @@ window#waybar.chromium { #mpd.paused, #mpris.paused { font-weight: normal; - color: @text-secondary; + color: @text-primary; } /* BATTERY STATES */ -#battery.charging, -#battery.plugged { +#battery.charge.charging, +#battery.charge.plugged { color: @success; text-shadow: 0px 0px 8px @success; transition: color 0.3s, box-shadow 0.3s, background 0.3s; } -#battery.warning:not(.charging) { +#battery.charge.warning:not(.charging) { color: @warning; text-shadow: 0px 0px 8px @warning; transition: color 0.3s, box-shadow 0.3s, background 0.3s; } -#battery.critical:not(.charging) { +#battery.charge.critical:not(.charging) { color: @danger; text-shadow: 0px 0px 8px @danger; transition: color 0.3s, box-shadow 0.3s, background 0.3s; } +/* CPU && MEMORY STATES */ +#cpu.s1, #memory.s1, #temperature.s1 { + color: @text-primary; + transition: color 0.3s, text-shadow 0.3s, background 0.3s; +} + +#cpu.s2, #memory.s2 { + color: @text-primary; + text-shadow: 0px 0px 2px @text-primary; + transition: color 0.3s, text-shadow 0.3s, background 0.3s; +} + +#cpu.s3, #memory.s3 { + color: @attention; + text-shadow: 0px 0px 2px @attention; + transition: color 0.3s, text-shadow 0.3s, background 0.3s; +} + +#cpu.s4, #memory.s4, #temperature.warning { + color: @warning; + text-shadow: 0px 0px 2px @warning; + transition: color 0.3s, text-shadow 0.3s, background 0.3s; +} + +#cpu.s5, #memory.s5, #temperature.critical { + color: @danger; + text-shadow: 0px 0px 2px @danger; + transition: color 0.3s, text-shadow 0.3s, background 0.3s; +} + /* -------------------------------------------------------------------------- HOVER EFFECTS -------------------------------------------------------------------------- */ @@ -254,7 +334,10 @@ window#waybar.chromium { #network:hover, #pulseaudio:hover, #custom-pomodoro:hover, +#custom-weather:hover, #scratchpad:hover, +#language:hover, +#pomodorogroup .drawer-child *:hover, #tray:hover { color: @accent; text-shadow: 0px 0px 8px @accent; @@ -270,10 +353,6 @@ window#waybar.chromium { /* -------------------------------------------------------------------------- LAYOUT UTILITIES -------------------------------------------------------------------------- */ -#window, -#workspaces { - margin: 0 2.5px; -} .modules-left > widget:first-child > #workspaces { margin-left: 0; @@ -290,3 +369,18 @@ window#waybar.chromium { 0% { color: @text-primary; } 100% { color: @accent; } } + +@keyframes critical { + 0% { + color: @attention; + text-shadow: 0px 0px 8px @attention; + } + 50% { + color: @accent; + text-shadow: 0px 0px 8px @accent; + } + 100% { + color: @attention; + text-shadow: 0px 0px 8px @attention; + } +}