weirdcat/dotfiles
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: transition for stopped and playing mpd widget

Browse Source
This commit is contained in:
Николай
2025-09-28 22:04:17 +03:00
parent 07eb65488c
commit 7978162b94
2 changed files with 21 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
waybar/config.jsonc
View File

@@ -107,7 +107,7 @@
}, },
"tooltip-format": "MPD (connected)", "tooltip-format": "MPD (connected)",
"tooltip-format-disconnected": "MPD (disconnected)", "tooltip-format-disconnected": "MPD (disconnected)",
"format-stopped": "", "format-stopped": " Stopping player...",
"on-click": "mpc toggle --password kapuchinamusica" "on-click": "mpc toggle --password kapuchinamusica"
}, },
"idle_inhibitor": { "idle_inhibitor": {
@@ -142,7 +142,7 @@
} }
}, },
"cpu": { "cpu": {
"format": "󰓅 {load:2.0f}%", "format": "󰓅 {usage}%",
"tooltip": false, "tooltip": false,
"interval": 3, "interval": 3,
"format-icons": [ "format-icons": [
@@ -158,7 +158,7 @@
}, },
"memory#swap": { "memory#swap": {
"format": "󰋊 {swapPercentage}%", "format": "󰋊 {swapPercentage}%",
"interval": 3, "interval": 10,
"format-icons": [ "format-icons": [
"󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥" "󰄰", "󰪞", "󰪟", "󰪠", "󰪡", "󰪢", "󰪣", "󰪤", "󰪥"
] ]
@@ -182,13 +182,13 @@
"warning": 30, "warning": 30,
"critical": 18 "critical": 18
}, },
"format": "{capacity}% {icon}", "format": "{icon} {capacity}%",
"format-full": "{capacity}% {icon}", "format-full": "{icon} {capacity}%",
"format-charging": "{capacity}% {icon}󱐋", "format-charging": "{icon}󱐋 {capacity}%",
"format-plugged": "{capacity}% {icon}", "format-plugged": "{icon} {capacity}%",
"format-alt": "{time} {icon}", "format-alt": "{time} {icon}",
// "format-good": "", // An empty format will hide the module // "format-good": "", // An empty format will hide the module
"format-full": "󰋑", "format-full": "󱈏",
"format-icons": ["󰂎", "", "", "󰁽", "", "󰁿", "", "󰂁", "󰂂", ""], "format-icons": ["󰂎", "", "", "󰁽", "", "󰁿", "", "󰂁", "󰂂", ""],
"tooltip-format": "{capacity}%, draws {power:2.1f}W, time is {time}" "tooltip-format": "{capacity}%, draws {power:2.1f}W, time is {time}"
}, },

21
waybar/style.css
View File

@@ -36,10 +36,11 @@ window#waybar.chromium {
} }
/* Common module styling */ /* Common module styling */
.modules-right, #mpd.playing, #mpd.paused { .modules-right, #mpd {
background: linear-gradient(to bottom, @bg-primary, @bg-secondary); background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
border: 3px solid @border-color; border: 3px solid @border-color;
border-top: none; border-top: none;
padding: 0 10px;
} }
.modules-left { .modules-left {
@@ -53,12 +54,8 @@ window#waybar.chromium {
} }
/* MPD player states */ /* MPD player states */
#mpd.stopped { #mpd {
border: none; transition: color 2s ease-out, border-bottom 2s ease-out, background 2s ease-out, border-color 2s ease-out;
border-radius: 0 0 10px 10px;
}
#mpd.playing, #mpd.paused {
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
} }
@@ -66,6 +63,12 @@ window#waybar.chromium {
color: @accent-alt; color: @accent-alt;
} }
#mpd.stopped {
border-color: transparent;
background: transparent;
color: transparent;
}
/* Workspaces */ /* Workspaces */
#workspaces { #workspaces {
background: linear-gradient(to bottom, @bg-primary, @bg-secondary); background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
@@ -132,7 +135,7 @@ window#waybar.chromium {
/* Module base styling */ /* Module base styling */
#clock, #battery, #cpu, #memory, #disk, #temperature, #backlight, #clock, #battery, #cpu, #memory, #disk, #temperature, #backlight,
#network, #pulseaudio, #wireplumber, #custom-media, #tray, #mode, #network, #pulseaudio, #wireplumber, #custom-media, #tray, #mode,
#idle_inhibitor, #scratchpad, #mpd { #idle_inhibitor, #scratchpad {
padding: 0 10px; padding: 0 10px;
color: @text-primary; color: @text-primary;
transition: color 2s ease-out, border-bottom 2s ease-out, background 2s ease-out; transition: color 2s ease-out, border-bottom 2s ease-out, background 2s ease-out;
@@ -148,7 +151,7 @@ window#waybar.chromium {
transition: color 0.5s ease-out, border-bottom 0.5s ease-out, background 0.5s ease-out; transition: color 0.5s ease-out, border-bottom 0.5s ease-out, background 0.5s ease-out;
} }
#mpd:hover { #mpd.playing:hover, #mpd.paused:hover {
color: @accent-color; color: @accent-color;
animation: hover 0.2s 1; animation: hover 0.2s 1;
} }