From 5427f04faed36dac06ca19f1a72f7d9758e4feae Mon Sep 17 00:00:00 2001 From: Ivan Dimitrov Date: Wed, 15 May 2024 19:21:13 +0300 Subject: [PATCH] waybar style cleanup --- modules/home/programs/waybar/default.nix | 141 ++++++++++++----------- modules/home/programs/waybar/style.css | 66 +++-------- 2 files changed, 88 insertions(+), 119 deletions(-) diff --git a/modules/home/programs/waybar/default.nix b/modules/home/programs/waybar/default.nix index 57908a4..2c5bda8 100644 --- a/modules/home/programs/waybar/default.nix +++ b/modules/home/programs/waybar/default.nix @@ -3,30 +3,8 @@ enable = true; catppuccin.enable = true; settings = { - mainBar = { - layer = "top"; - position = "top"; - height = 30; - output = [ - "eDP-1" - "HDMI-A-1" - ]; - modules-left = [ "sway/workspaces" ]; - modules-center = [ "clock#week" "clock#year" "clock#time" ]; - modules-right = [ "network" "pulseaudio" "memory" "cpu" "battery" ]; - - "clock#time" = { - format = "{:%H:%M:%S}"; - interval = 1; - }; - - "clock#week" = { - format = "{:%a}"; - }; - - "clock#year" = { - format = "{:%Y-%m-%d}"; - tooltip-format = "{calendar}"; + mainBar = + let calendar = { mode = "year"; mode-mon-col = 3; @@ -39,51 +17,82 @@ today = "{}"; }; }; - }; + tooltip-format = "{calendar}"; + in + { + layer = "top"; + position = "top"; + height = 30; + output = [ + "eDP-1" + "HDMI-A-1" + ]; + modules-left = [ "sway/workspaces" ]; + modules-center = [ "clock#week" "clock#year" "clock#time" ]; + modules-right = [ "network" "pulseaudio" "memory" "cpu" "battery" ]; - battery = { - format = "{icon} {capacity}% {time}"; - format-time = " {H} h {M} m"; - format-icons = [ "" "" "" "" "" ]; - states = { - warning = 30; - critical = 15; + "clock#time" = { + format = "{:%H:%M:%S}"; + interval = 1; + tooltip-format = tooltip-format; + calendar = calendar; + }; + + "clock#week" = { + format = "{:%a}"; + tooltip-format = tooltip-format; + calendar = calendar; + }; + + "clock#year" = { + format = "{:%Y-%m-%d}"; + tooltip-format = tooltip-format; + calendar = calendar; + }; + + battery = { + format = "{icon} {capacity}% {time}"; + format-time = " {H} h {M} m"; + format-icons = [ "" "" "" "" "" ]; + states = { + warning = 30; + critical = 15; + }; + }; + + cpu = { + format = " {usage}%"; + }; + + memory = { + format = " {percentage}%"; + interval = 5; + }; + + pulseaudio = { + format = "{icon} {volume}% | {format_source}"; + format-muted = "󰝟 {volume}% | {format_source}"; + format-source = "{volume}% "; + format-source-muted = "{volume}% "; + format-icons = { + headphone = ""; + default = [ "" "" "" ]; + }; + }; + + network = { + format-ethernet = "󰈁 | {bandwidthUpBytes} {bandwidthDownBytes}"; + format-wifi = "{icon} | {bandwidthUpBytes} {bandwidthDownBytes}"; + format-disconnected = "󰈂"; + format-icons = [ "󰤟" "󰤢" "󰤥" "󰤨" ]; + interval = 5; + }; + + "sway/workspaces" = { + disable-scroll = true; + all-outputs = true; }; }; - - cpu = { - format = " {usage}%"; - }; - - memory = { - format = " {percentage}%"; - interval = 5; - }; - - pulseaudio = { - format = "{icon} {volume}% | {format_source}"; - format-muted = "󰝟 {volume}% | {format_source}"; - format-source = "{volume}% "; - format-source-muted = "{volume}% "; - format-icons = { - headphone = ""; - default = [ "" "" "" ]; - }; - }; - - network = { - format-ethernet = "󰈁 | {bandwidthUpBytes} {bandwidthDownBytes}"; - format-wifi = "{icon} | {bandwidthUpBytes} {bandwidthDownBytes}"; - format-disconnected = "󰈂"; - format-icons = [ "󰤟" "󰤢" "󰤥" "󰤨" ]; - interval = 5; - }; - - "sway/workspaces" = { - disable-scroll = true; - all-outputs = true; - }; - }; }; systemd = { enable = true; diff --git a/modules/home/programs/waybar/style.css b/modules/home/programs/waybar/style.css index d7a5ebe..acf5026 100644 --- a/modules/home/programs/waybar/style.css +++ b/modules/home/programs/waybar/style.css @@ -5,53 +5,28 @@ 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; + border-bottom: 2px solid rgba(100, 114, 125, 0.5); + color: @rosewater; } #workspaces button { padding: 0 5px; - background-color: rgba(2, 6, 23, 0.5); - color: rgb(248, 250, 252); + background-color: @base; + color: @text; border-radius: 6px; } #workspaces button:hover { - background: rgba(2, 6, 23, 0.9); + background: @mantle; } #workspaces button.focused { - background-color: rgba(2, 6, 23, 0.9); - box-shadow: inset 0 -3px #ffffff; + background-color: @crust; + box-shadow: inset 0 -2px @sky; } #workspaces button.urgent { - background-color: rgba(69, 10, 10, .9);; -} - -#mode { - background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; + background-color: @maroon; } #clock, @@ -73,9 +48,9 @@ button:hover { #mpd { padding: 0 10px; color: @text; + background-color: @base; margin: 0 .5em; border-radius: 9999px; - background-color: @base; } #clock.week { @@ -97,18 +72,9 @@ button:hover { border-radius: 0px 9999px 9999px 0px; } -#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); + color: @text; + background-color: @green; } @keyframes blink { @@ -119,21 +85,15 @@ button:hover { } #battery.warning:not(.charging) { - background-color: rgba(69, 26, 3, .8); - color: rgb(255, 251, 235); + background-color: @red; } /* 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); + background-color: @maroon; animation-name: blink; animation-duration: 0.5s; animation-timing-function: steps(12); animation-iteration-count: infinite; animation-direction: alternate; } - -label:focus { - background-color: #000000; -}