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)
This commit is contained in:
@@ -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": " ",
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user