feat(waybar): rizing

waybar/config.jsonc

@@ -43,14 +43,29 @@
   },
   "hyprland/workspaces": {
     "on-click": "activate",
-    "format": "{id}",
+    "format": "{windows}",
     "all-outputs": true,
     "disable-scroll": false,
     "active-only": false,
+    "window-rewrite": {
+      "class<firefox>": "󰈹 ",
+      "class<app.zen_browser.zen>": "󰈹 ",
+      "class<Code>": "󰨞 ",
+      "class<Alacritty>": "󰆍 ",
+      "class<Spotify>": "󰓇 ",
+      "class<org.telegram.desktop>": "󰍡 ",
+      "class<kitty>": " ",
+      "class<org.gnome.Nautilus>": " "
+    }
   },
   "hyprland/window": {
     "format": "{title}",
+    "format-empty": "󰟢  Desktop",
+    "icon": true,
+    "icon-size": 22,
+    "seperate-outputs": true
   },
+
   "tray": {
     "show-passive-items": true,
     "spacing": 10,
@@ -123,6 +138,9 @@
     "format-icons": {
       "none": "󰅺",
       "notification": "󰡟",
+      "dnd-notification": "󰂛",
+      "": "󱏬",
+      "inhibited": "󰂛"
     },
     "on-click": "sleep 0.1 && swaync-client -t -sw",
     "return-type": "json",

waybar/style.css

@@ -4,42 +4,70 @@
 * {
   min-height: 0;
   min-width: 0;
-  font-family: "Adwaita Sans", "JetBrainsMono Nerd Font";
+  font-family: "Lexend", "JetBrainsMono Nerd Font";
   font-size: 13px;
   font-weight: 400;
 }
 
+#workspaces {
+  background: transparent;
+}
+
 window#waybar {
   min-height: 0;
   background: transparent;
 }
 
-window#waybar.empty #window {
-  background-color: transparent;
+#window {
+  font-weight: 700;
 }
 
-
 #workspaces button {
-  padding: 0.1rem 0.6rem;
-  margin: 0.1rem 0.25rem;
+  padding-left: 8px;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  margin-left: 0;
+  margin-right: 4px;
+
+  min-height: 10px;
+  min-width: 24px;
+
   border-radius: 6px;
-  background-color: alpha(@bg, 0.6);
-  color: #cdd6f4;
+  background: alpha(@bg, 0.8);
+
+  transition: 
+    all 180ms cubic-bezier(.4,0,.2,1),
+    color 800ms cubic-bezier(.4, 0, .2, 1);
+
+  color: grey;
+}
+
+#workspaces button label {
+  font-size: 20px;
+  letter-spacing: -2px;
 }
 
 #workspaces button:hover {
-  color: #1e1e2e;
-  background-color: alpha(#cdd6f4, 0.3);
+  background: rgba(255,255,255,0.45);
+  background: alpha(@bg,0.8);
 }
 
 #workspaces button.active {
-  background-color: alpha(@accent, 0.6);
-  color: black
+  min-width: 34px;
+  background: white;
+  background: alpha(@bg,0.8);
+  color: white;
+  border: 2px solid alpha(grey, 0.2);
+}
+
+#workspaces button.visible {
+  background: alpha(@bg,0.8);
 }
 
 #workspaces button.urgent {
-  background-color: alpha(@bg, 0.5);
-  color: #f38ba8;
+  background: #ff5f5f;
 }
 
 #clock,