💥 fixed hyprland/window, changed look

waybar/config.jsonc

@@ -8,11 +8,11 @@
     // Choose the order of the modules
     "modules-left": [
         "hyprland/workspaces",
-        "custom/media"
+        "hyprland/window"
     ],
     "modules-center": [
-        "hyprland/window",
-    	"clock"
+        "clock",
+        "custom/media"
     ],
     "modules-right": [
         "tray", 
@@ -23,12 +23,17 @@
     "hyprland/workspaces": {
         "disable-scroll": false,
         "all-outputs": true,
-        "warp-on-scroll": false,
+        "warp-on-scroll": true,
         "format": "{icon}",
         "format-icons": {
-            "urgent": "",
-            "focused": "",
+            "urgent": "",
+            "focused": "",
+            "active": "",
             "default": ""
+        },
+        "persistent-workspaces": {
+            "1": [],
+            "2": []
         }
     },
     "bluetooth": {
@@ -46,16 +51,22 @@
         "capslock": true,
         "format": "{name} {icon}",
         "format-icons": {
-            "locked": "",
-            "unlocked": ""
+            "locked": " ",
+            "unlocked": " "
         }
     },
     "hyprland/window": {
-        "format": "{icon} {count}",
-        "show-empty": true,
-        "max-length": 200,
-        "separate-outputs": true,
-        "format-icons": ["", ""],
+        "format": "{class}: {title}",
+        "show-empty": false,
+        "rewrite": {
+            ": ": "",
+            "firefox(.*)": "Firefox",
+            "(.*)kitty(.*)": "Kitty",
+            "Spotify(.*)": "Spotify",
+            "discord(.*) - Discord": "Discord$1",
+            "org.gnome.(.*)": "$1"
+            
+        },
         "escape": true
     },
     "custom/notifications": {
@@ -112,8 +123,8 @@
         }
     },
     "tray": {
-        // "icon-size": 21,
-        "spacing": 10
+        "icon-size": 16,
+        "spacing": 12
     },
     "clock": {
         "timezone": "",
@@ -123,7 +134,8 @@
     },
     "cpu": {
         "format": "{usage}% ",
-        "tooltip": false
+        "tooltip": true,
+        "escape": true
     },
     "memory": {
         "format": "{}% "
@@ -183,17 +195,13 @@
         // "scroll-step": 1, // %, can be a float
         "format": "{volume}% {icon} {format_source}",
         "format-bluetooth": "{volume}% {icon} {format_source}",
-        "format-bluetooth-muted": " {icon} {format_source}",
+        "format-bluetooth-muted": " {icon}",
         "format-muted": " {format_source}",
-        "format-source": "{volume}% ",
-        "format-source-muted": "",
+        "format-source": "{volume}%",
         "format-icons": {
             "headphone": "",
             "hands-free": "",
             "headset": "", 
-            "phone": "",
-            "portable": "",
-            "car": "",
             "default": ["", "", ""]
         },
 	    "exec-if": "which pavucontrol",
@@ -210,7 +218,7 @@
             "spotify": "",
             "default": "󰎇"
         },
-        "escape": true,
+        
         "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null", // Script in resources folder
 	"on-click": "playerctl --player spotify play-pause" // Change "spotify to your preferred player"
     }

waybar/style.css

@@ -2,16 +2,16 @@
 @import "mocha.css";
 
 window {
-    /* `otf-font-awesome` is required to be installed for icons */
     font-family: "0xProto Nerd Font Regular", "Font Awesome", sans-serif;
     font-size: 12px;
-    border-radius: 10px;
     color: @text;
 }
 
 * {
     color: @text;
-    border-radius: 10px;
+    border-radius: 12px;
+    margin-left: 0;
+    margin-right: 0;
 }
 
 window#waybar {
@@ -19,7 +19,7 @@ window#waybar {
 }
 
 window#waybar.hidden {
-    opacity: 0.2;
+    opacity: .1;
 }
 
 /*
@@ -37,7 +37,6 @@ window#waybar.termite {
 
 window#waybar.chromium {
     background-color: @base;
-    border: none;
 }
 
 button {
@@ -45,8 +44,7 @@ button {
     /*box-shadow: inset 0 -3px transparent;*/
     /* Avoid rounded borders under each button name */
     border: none;
-    border-radius: 2px;
-    background: transparent;
+    background: alpha(@base, .3);
     transition: 120ms ease-in;
 }
 
@@ -62,21 +60,20 @@ button:hover {
 
 #workspaces {
     background: alpha(@base, .3);
-    border-radius: 18px;
-    padding: 4px;
-    padding-bottom: 3px;
-    padding-top: 3px;
+    padding-top: 2px;
+    padding-bottom: 2px;
 }
 
 #workspaces button {
-    border-radius: 50%;
-    padding: 2px 6px;
-    color: @blue;
-    font-size: 18px;
+    color: @text;
+    padding-left: 6px;
+    padding-right: 6.9px;
+    font-size: 19px;
 }
 
 #workspaces button.active {
     background: alpha(shade(@blue, .5), .6);
+    /* Customize font size and stuff when in different states */
 }
 
 #workspaces button.urgent {
@@ -98,10 +95,6 @@ button:hover {
     background: alpha(@base, .3);
 }
 
-#backlight:hover {
-    background: alpha(@base, .5);
-}
-
 #mode {
     background-color: alpha(@yellow, .3);
     box-shadow: inset 0 -3px @text;
@@ -128,10 +121,10 @@ button:hover {
     color: @text;
 }
 
+/*
 #window,
-#workspaces {
-    margin: 0 4px;
-}
+#workspaces {}
+*/
 
 /* If workspaces is the leftmost module, omit left margin */
 .modules-left > widget:first-child > #workspaces {