feat: perfect waybar

hypr/.config/hypr/hyprland.conf

@@ -197,11 +197,19 @@ bind = $mainMod, H, movefocus, l
 bind = $mainMod, J, movefocus, d
 bind = $mainMod, K, movefocus, u
 bind = $mainMod, L, movefocus, r
+bind = $mainMod, left, movefocus, l
+bind = $mainMod, down, movefocus, d
+bind = $mainMod, up, movefocus, u
+bind = $mainMod, right, movefocus, r
 
 bind = $mainMod SHIFT, H, swapwindow, l
 bind = $mainMod SHIFT, J, swapwindow, d
 bind = $mainMod SHIFT, K, swapwindow, u
 bind = $mainMod SHIFT, L, swapwindow, r
+bind = $mainMod SHIFT, left, swapwindow, l
+bind = $mainMod SHIFT, down, swapwindow, d
+bind = $mainMod SHIFT, up, swapwindow, u
+bind = $mainMod SHIFT, right, swapwindow, r
 
 # Switch workspaces with mainMod + [0-9]
 bind = $mainMod, 1, workspace, 1

waybar/.config/waybar/config.jsonc

@@ -11,30 +11,19 @@
   "gtk-layer-shell": true,
   "reload_style_on_change": true,
   "modules-left": [
-    "hyprland/workspaces",
+    "hyprland/workspaces"
-    "hyprland/window"
   ],
   "modules-center": [
     "clock"
   ],
   "modules-right": [
+    "tray",
     "network",
     "bluetooth",
     "pulseaudio",
-    "cpu",
-    "memory",
     "battery",
-    "tray",
     "custom/power"
   ],
-  "memory": {
-    "interval": 5,
-    "format": "󰍛 {}%"
-  },
-  "cpu": {
-    "interval": 5,
-    "format": "󰻠 {usage}%"
-  },
   "battery": {
     "states": {
       "warning": 30,
@@ -57,8 +46,8 @@
     "tooltip": true
   },
   "tray": {
-    "icon-size": 16,
+    "icon-size": 18,
-    "spacing": 6,
+    "spacing": 12,
     "rotate": 0
   },
   "custom/power": {
@@ -89,10 +78,7 @@
       "7": "󰎶",
       "8": "󰎹",
       "9": "󰎼",
-      "10": "󰽽",
+      "10": "󰽽"
-      "urgent": "",
-      "default": "",
-      "empty": ""
     }
   },
   "hyprland/window": {

waybar/.config/waybar/style.css

@@ -15,8 +15,7 @@
 * {
   color: @foreground;
   font-family: 'JetBrainsMono Nerd Font';
-  font-size: 15px;
+  font-size: 14px;
-  font-weight: 300;
 }
 
 window#waybar {
@@ -27,7 +26,7 @@ window#waybar {
 }
 
 window#waybar>box {
-  padding: 6px 3px;
+  padding: 3px 2px;
 }
 
 tooltip {
@@ -49,18 +48,29 @@ tooltip {
 #network,
 #bluetooth,
 #pulseaudio,
-#cpu,
-#memory,
 #battery,
 #tray,
 #custom-power {
-  background: alpha(@background, 0.56);
+  background: transparent;
-  border: 1px solid alpha(@foreground, 0.14);
+  border: none;
-  border-radius: 8px;
+  border-left: 1px solid alpha(@foreground, 0.18);
-  box-shadow: 0 8px 24px alpha(@background, 0.22);
+  border-radius: 0;
-  margin: 0 3px;
+  box-shadow: none;
+  margin: 0;
   padding: 0 10px;
-  min-height: 30px;
+  min-height: 20px;
+}
+
+#custom-launcher,
+#workspaces,
+#clock,
+#tray {
+  border-left: none;
+}
+
+#bluetooth,
+#pulseaudio {
+  border-left: none;
 }
 
 #workspaces {
@@ -70,16 +80,18 @@ tooltip {
 #workspaces button {
   all: initial;
   font-size: 18px;
-  min-width: 19px;
+  min-width: 24px;
-  padding: 0 3px;
+  padding: 0 4px;
-  margin: 4px 2px;
+  margin: 2px 2px;
   border-radius: 6px;
-  color: @foreground-muted;
   opacity: 0.9;
 }
 
 #workspaces button label {
+  color: inherit;
   font-size: 18px;
+  margin: 0;
+  padding: 0;
 }
 
 #workspaces button.empty {
@@ -93,63 +105,39 @@ tooltip {
 }
 
 #workspaces button.active {
-  color: @background;
+  color: @accent;
-  background: @accent;
+  background: alpha(@accent, 0.16);
-  opacity: 1;
+}
+
+#workspaces button.active label {
+  color: @accent;
+}
+
+#workspaces button.urgent {
+  color: @foreground;
+  background: alpha(@danger, 0.26);
+}
+
+#workspaces button.urgent label {
+  color: @foreground;
 }
 
 #window {
   color: @foreground-muted;
-  padding-right: 14px;
+  padding: 0 14px;
 }
 
 #clock {
-  color: @foreground;
   padding: 0 15px;
   box-shadow: none;
   border: none;
 }
 
-#network {
-  color: @accent-soft;
-}
-
-#bluetooth {
-  color: @type;
-}
-
-#pulseaudio {
-  color: @accent;
-}
-
-#cpu,
-#memory {
-  color: @warning;
-}
-
-#battery {
-  color: @accent-soft;
-}
-
-#battery.charging,
-#battery.plugged {
-  color: @accent;
-}
-
-#battery.warning:not(.charging) {
-  color: @warning;
-}
-
-#battery.critical:not(.charging) {
-  color: @danger;
-}
-
 #tray {
   padding: 0 12px;
 }
 
 #custom-power {
-  color: @danger;
   padding: 0px 16px 0px 12px;
 }
 
@@ -158,8 +146,6 @@ tooltip {
 #network:hover,
 #bluetooth:hover,
 #pulseaudio:hover,
-#cpu:hover,
-#memory:hover,
 #battery:hover,
 #tray:hover,
 #custom-power:hover,
@@ -170,7 +156,7 @@ tooltip {
 
 #custom-launcher:hover,
 #workspaces button.active:hover {
-  background: @accent;
+  background: alpha(@accent, 0.28);
 }
 
 .hidden {
@@ -196,7 +182,7 @@ menu#menu menuitem:hover {
 
 menu#menu menuitem.section-header {
   color: @foreground-muted;
-  font-size: 12px;
+  font-size: 14px;
   margin-top: 4px;
   padding: 4px 12px;
 }