Make active workspaces on other monitors a different color again

hyprland/.config/waybar/config

@@ -6,7 +6,7 @@
 	"margin-top": 16,
 	"margin-left": 16,
 	"margin-right": 16,
-	"modules-left": ["hyprland/workspaces", "sway/mode"],
+	"modules-left": ["hyprland/workspaces", "hyprland/window", "sway/mode"],
 	"modules-right": ["tray"],
 	"hyprland/workspaces": {
 		"all-outputs": false,
@@ -18,6 +18,7 @@
 		}
 	},
 	"hyprland/window": {
+		"separate-outputs": true,
 		"format": "{}"
 	},
 	"tray": {

hyprland/.config/waybar/style.css

@@ -24,7 +24,7 @@ window#waybar {
 	border-radius: 8px;
 }
 
-/* swaywm stuff */
+/* Hypr stuff */
 #workspaces {
 }
 #workspaces button {
@@ -53,6 +53,11 @@ window#waybar {
 	font-weight: bold;
 }
 #workspaces button.visible {
+	color: rgba(40, 40, 40, 0.8);
+	background: #458588;
+	font-weight: bold;
+}
+#workspaces button.active {
 	color: rgba(40, 40, 40, 0.8);
 	background: #83a598;
 	font-weight: bold;
@@ -61,17 +66,26 @@ window#waybar {
 	color: #fabd2f;
 	font-weight: bold;
 }
-#mode {
-	background: #fb4934;
-	color: rgba(235, 219, 178, 0.8);
+/* Window and mode display */
+#window {
+	color: rgba(235, 219, 178, 0.4);
 	padding: 0 1em;
+	border-radius: 8px;
+}
+window#waybar.empty #window {
+	/* We do this so it properly hides when on an empty workspace */
+	padding: 0;
+}
+window#waybar.solo #window {
+	/* Nothing */
+}
+window#waybar.floating #window {
+	/* Workspace contains only floating windows */
+	color: rgba(40, 40, 40, 0.8);
+	background: #8ec07c;
 }
 
 /* widgets */
-#window {
-	color: #ebdbb2;
-	padding: 0 1em;
-}
 #pulseaudio {
 	padding: 0 1em;
 	color: #ebdbb2;