waybar style cleanup

modules/home/programs/waybar/default.nix

@@ -3,30 +3,8 @@
     enable = true;
     catppuccin.enable = true;
     settings = {
-      mainBar = {
+      mainBar =
-        layer = "top";
+        let
-        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 = "<tt><small>{calendar}</small></tt>";
           calendar = {
             mode = "year";
             mode-mon-col = 3;
@@ -39,51 +17,82 @@
               today = "<span color='#ff6699'><b><u>{}</u></b></span>";
             };
           };
-        };
+          tooltip-format = "<tt><small>{calendar}</small></tt>";
+        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 = {
+          "clock#time" = {
-          format = "{icon} {capacity}% {time}";
+            format = "{:%H:%M:%S}";
-          format-time = " {H} h {M} m";
+            interval = 1;
-          format-icons = [ "" "" "" "" "" ];
+            tooltip-format = tooltip-format;
-          states = {
+            calendar = calendar;
-            warning = 30;
+          };
-            critical = 15;
+
+          "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 = "<span color='#4f46e5'></span>  {usage}%";
+          };
+
+          memory = {
+            format = "<span color='#7c3aed'></span>  {percentage}%";
+            interval = 5;
+          };
+
+          pulseaudio = {
+            format = "<span color='#16a34a'>{icon}</span> {volume}% | {format_source}";
+            format-muted = "<span color='#b91c1c'>󰝟</span> {volume}% | {format_source}";
+            format-source = "{volume}% <span color='#16a34a'></span>";
+            format-source-muted = "{volume}% <span color='#b91c1c'></span>";
+            format-icons = {
+              headphone = "";
+              default = [ "" "" "" ];
+            };
+          };
+
+          network = {
+            format-ethernet = "<span color='#06b6d4'>󰈁</span> | <span color='#ea580c'></span> {bandwidthUpBytes}  <span color='#ea580c'></span> {bandwidthDownBytes}";
+            format-wifi = "<span color='#06b6d4'>{icon}</span> | <span color='#ea580c'></span> {bandwidthUpBytes}  <span color='#ea580c'></span> {bandwidthDownBytes}";
+            format-disconnected = "<span color='#b91c1c'>󰈂</span>";
+            format-icons = [ "󰤟" "󰤢" "󰤥" "󰤨" ];
+            interval = 5;
+          };
+
+          "sway/workspaces" = {
+            disable-scroll = true;
+            all-outputs = true;
           };
         };
-
-        cpu = {
-          format = "<span color='#4f46e5'></span>  {usage}%";
-        };
-
-        memory = {
-          format = "<span color='#7c3aed'></span>  {percentage}%";
-          interval = 5;
-        };
-
-        pulseaudio = {
-          format = "<span color='#16a34a'>{icon}</span> {volume}% | {format_source}";
-          format-muted = "<span color='#b91c1c'>󰝟</span> {volume}% | {format_source}";
-          format-source = "{volume}% <span color='#16a34a'></span>";
-          format-source-muted = "{volume}% <span color='#b91c1c'></span>";
-          format-icons = {
-            headphone = "";
-            default = [ "" "" "" ];
-          };
-        };
-
-        network = {
-          format-ethernet = "<span color='#06b6d4'>󰈁</span> | <span color='#ea580c'></span> {bandwidthUpBytes}  <span color='#ea580c'></span> {bandwidthDownBytes}";
-          format-wifi = "<span color='#06b6d4'>{icon}</span> | <span color='#ea580c'></span> {bandwidthUpBytes}  <span color='#ea580c'></span> {bandwidthDownBytes}";
-          format-disconnected = "<span color='#b91c1c'>󰈂</span>";
-          format-icons = [ "󰤟" "󰤢" "󰤥" "󰤨" ];
-          interval = 5;
-        };
-
-        "sway/workspaces" = {
-          disable-scroll = true;
-          all-outputs = true;
-        };
-      };
     };
     systemd = {
       enable = true;

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);
+    border-bottom: 2px solid rgba(100, 114, 125, 0.5);
-    color: #ffffff;
+    color: @rosewater;
-    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;
 }
 
 #workspaces button {
     padding: 0 5px;
-    background-color: rgba(2, 6, 23, 0.5);
+    background-color: @base;
-    color: rgb(248, 250, 252);
+    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);
+    background-color: @crust;
-    box-shadow: inset 0 -3px #ffffff;
+    box-shadow: inset 0 -2px @sky;
 }
 
 #workspaces button.urgent {
-    background-color: rgba(69, 10, 10, .9);;
+    background-color: @maroon;
-}
-
-#mode {
-    background-color: #64727D;
-    box-shadow: inset 0 -3px #ffffff;
 }
 
 #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);
+    color: @text;
-    background-color: rgba(5, 46, 22, .8);
+    background-color: @green;
 }
 
 @keyframes blink {
@@ -119,21 +85,15 @@ button:hover {
 }
 
 #battery.warning:not(.charging) {
-    background-color: rgba(69, 26, 3, .8);
+    background-color: @red;
-    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);
+    background-color: @maroon;
-    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;
-}