diff --git a/modules/home/programs/waybar/default.nix b/modules/home/programs/waybar/default.nix index b1c147a..7de1c17 100644 --- a/modules/home/programs/waybar/default.nix +++ b/modules/home/programs/waybar/default.nix @@ -11,7 +11,8 @@ "HDMI-A-1" ]; modules-left = [ "sway/workspaces" ]; - modules-right = [ "network" "pulseaudio" "memory" "battery" "clock" ]; + modules-center = [ "clock" ]; + modules-right = [ "network" "pulseaudio" "memory" "cpu" "battery" ]; clock = { format = "{:%a %Y-%m-%d %H:%M:%S %Z}"; @@ -33,8 +34,12 @@ }; }; + cpu = { + format = " {usage}%"; + }; + memory = { - format = " {percentage}%"; + format = " {percentage}%"; interval = 5; }; @@ -42,10 +47,9 @@ format = "{icon} {volume}% | {format_source}"; format-source = "{volume}% "; format-source-muted = ""; - format-muted = ""; format-icons = { headphone = ""; - default = [ "" "" ]; + default = [ "" "" "" ]; }; }; @@ -67,5 +71,6 @@ enable = true; target = "sway-session.target"; }; + style = builtins.readFile ./style.css; }; } diff --git a/modules/home/programs/waybar/style.css b/modules/home/programs/waybar/style.css new file mode 100644 index 0000000..0b5ad49 --- /dev/null +++ b/modules/home/programs/waybar/style.css @@ -0,0 +1,129 @@ +* { + font-family: FontAwesome, 'Fira Code'; + font-size: 13px; +} + +window#waybar { + background-color: rgba(43, 48, 59, 0.1); + border-bottom: 3px solid rgba(100, 114, 125, 0.5); + color: #ffffff; + transition-property: background-color; + transition-duration: .5s; +} + +window#waybar.hidden { + opacity: 0.2; +} + +button { + /* Use box-shadow instead of border so the text isn't offset */ + box-shadow: inset 0 -3px transparent; + /* Avoid rounded borders under each button name */ + border: none; + border-radius: 0; +} + +/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ +button:hover { + background: inherit; + box-shadow: inset 0 -3px #ffffff; +} + +/* you can set a style on hover for any module like this */ +#pulseaudio:hover { + background-color: #a37800; +} + +#workspaces button { + padding: 0 5px; + background-color: transparent; + color: #ffffff; +} + +#workspaces button:hover { + background: rgba(0, 0, 0, 0.2); +} + +#workspaces button.focused { + background-color: #64727D; + box-shadow: inset 0 -3px #ffffff; +} + +#workspaces button.urgent { + background-color: #eb4d4b; +} + +#mode { + background-color: #64727D; + box-shadow: inset 0 -3px #ffffff; +} + +#clock, +#battery, +#cpu, +#memory, +#disk, +#temperature, +#backlight, +#network, +#pulseaudio, +#wireplumber, +#custom-media, +#tray, +#mode, +#idle_inhibitor, +#scratchpad, +#power-profiles-daemon, +#mpd { + padding: 0 10px; + color: rgb(2, 6, 23); + margin: 0 .5em; + border-radius: 9999px; + background-color: rgba(248, 250, 252, .8); +} + +#window, +#workspaces { + margin: 0 4px; +} + +#workspaces { + margin-left: 0; +} + +#battery.charging, #battery.plugged { + color: rgb(240, 253, 244); + background-color: rgba(5, 46, 22, .8); +} + +#pulseaudio.muted { + background-color: rgba(115, 115, 115, .8) +} + +@keyframes blink { + to { + background-color: #ffffff; + color: #000000; + } +} + +#battery:not(.charging) { + background-color: rgba(69, 26, 3, .8); + color: rgb(255, 251, 235); +} + +/* Using steps() instead of linear as a timing function to limit cpu usage */ +#battery.critical:not(.charging) { + background-color: rgba(69, 10, 10, .8); + color: rgb(254, 242, 242); + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: steps(12); + animation-iteration-count: infinite; + animation-direction: alternate; +} + +label:focus { + background-color: #000000; +} +