Waybar : Add hover and urgent effects.

This commit is contained in:
Dmitry Voronin 2024-05-24 05:31:15 +03:00
parent 36cea032be
commit 087de3c0d3
Signed by: voronind
SSH key fingerprint: SHA256:3kBb4iV2ahufEBNq+vFbUe4QYfHt98DHQjN7QaptY9k
3 changed files with 38 additions and 23 deletions

View file

@ -9,9 +9,9 @@
LC_MEASUREMENT = "ru_RU.UTF-8"; LC_MEASUREMENT = "ru_RU.UTF-8";
LC_MONETARY = "ru_RU.UTF-8"; LC_MONETARY = "ru_RU.UTF-8";
LC_NAME = "ru_RU.UTF-8"; LC_NAME = "ru_RU.UTF-8";
LC_NUMERIC = "ru_RU.UTF-8"; LC_NUMERIC = "en_GB.UTF-8";
LC_PAPER = "ru_RU.UTF-8"; LC_PAPER = "ru_RU.UTF-8";
LC_TELEPHONE = "ru_RU.UTF-8"; LC_TELEPHONE = "ru_RU.UTF-8";
LC_TIME = "ru_RU.UTF-8"; LC_TIME = "en_GB.UTF-8";
}; };
} }

View file

@ -1,29 +1,49 @@
{ style, ... }: { { style, ... }: let
paddingV = "0";
paddingH = "12px";
in {
text = '' text = ''
#pulseaudio, #pulseaudio,
#mpris, #mpris,
#cpu,
#battery, #battery,
#custom-display, #custom-display,
#language { #custom-powersave,
padding: 8px 0 8px 24px; #custom-powerlimit,
} #tray,
#temperature, #temperature,
#memory, #memory,
#cpu,
#clock,
#scratchpad,
#language {
padding: ${paddingV} ${paddingH};
border-top: ${toString(style.window.border)}px solid transparent;
border-bottom: ${toString(style.window.border)}px solid transparent;
}
#cpu {
padding-right: 0;
}
#temperature {
padding-left: 0;
padding-right: 0;
}
#memory {
padding-left: 0;
}
#custom-powersave, #custom-powersave,
#custom-powerlimit { #custom-powerlimit {
padding: 8px 0 8px 0; margin-left: -${paddingH};
padding-left: 0;
} }
#clock { #clock {
font-weight: bold; font-weight: bold;
} }
#tray {
padding: 8px 12px 8px 24px;
}
#battery:hover, #battery:hover,
#clock:hover, #clock:hover,
#cpu:hover, #cpu:hover,
@ -36,25 +56,26 @@
#pulseaudio:hover, #pulseaudio:hover,
#temperature:hover, #temperature:hover,
#tray:hover, #tray:hover,
#scratchpad:hover,
#workspaces button:hover { #workspaces button:hover {
background-color: #ff0000; background-color: rgba(${style.color.border-r},${style.color.border-g},${style.color.border-b},${toString(style.opacity.desktop)});
} }
#pulseaudio.muted, #pulseaudio.muted,
#battery.critical, #battery.critical,
#tray.needs-attention,
#custom-display.modified { #custom-display.modified {
border-top: ${toString(style.window.border)}px solid #${style.color.accent}; border-top: ${toString(style.window.border)}px solid #${style.color.accent};
} }
#workspaces button { #workspaces button {
padding: 0 4px; padding: ${paddingV} 4px;
border-top: ${toString(style.window.border)}px solid transparent; border-top: ${toString(style.window.border)}px solid transparent;
border-radius: 0;
} }
#workspaces button.focused { #workspaces button.focused {
border-top: ${toString(style.window.border)}px solid #${style.color.accent}; border-top: ${toString(style.window.border)}px solid #${style.color.accent};
} }
''; '';
# background-color: rgba(${style.color.border-r},${style.color.border-g},${style.color.border-b},${toString(style.opacity.desktop)});
} }

View file

@ -1,12 +1,6 @@
{ style, ... }: { { style, ... }: {
text = '' text = ''
window#waybar { window#waybar {
background: rgba(0, 0, 0, 0);
}
.modules-left,
.modules-right,
.modules-center {
background-color: rgba(${style.color.bg-r},${style.color.bg-g},${style.color.bg-b},${toString(style.opacity.desktop)}); background-color: rgba(${style.color.bg-r},${style.color.bg-g},${style.color.bg-b},${toString(style.opacity.desktop)});
border: ${toString(style.window.border)}px solid rgba(${style.color.border-r},${style.color.border-g},${style.color.border-b},${toString(style.opacity.desktop)}); border: ${toString(style.window.border)}px solid rgba(${style.color.border-r},${style.color.border-g},${style.color.border-b},${toString(style.opacity.desktop)});
} }