JakeStanger/ironbar

Fork 0

mirror of https://github.com/JakeStanger/ironbar.git synced 2026-07-11 08:15:21 +01:00

[GH-ISSUE #979] [Workspaces] CSS selector for non-visible workspaces that do have windows #4519

New issue

Open

opened 2026-05-23 00:54:02 +01:00 by JakeStanger · 7 comments

JakeStanger commented

2026-05-23 00:54:02 +01:00

Owner

Originally created by @vtsionis on GitHub (May 13, 2025).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/979

After searching through open and closed issues I couldn't find something related to my request.

In the documentation for the Workspaces module, you can use the .workspaces .item.visible and the .workspaces .item.focused CSS selectors to target the corresponding workspace(s).

But how about targeting a non-visible workspace that does have an open window at the moment? Something like .workspaces .item.active or similar concept. I am not sure if that is even technically possible but I would love to know your opinion on this.

Originally created by @vtsionis on GitHub (May 13, 2025). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/979 After searching through open and closed issues I couldn't find something related to my request. In the documentation for the Workspaces module, you can use the `.workspaces .item.visible` and the `.workspaces .item.focused` CSS selectors to target the corresponding workspace(s). But how about targeting a non-visible workspace that does have an open window at the moment? Something like `.workspaces .item.active` or similar concept. I am not sure if that is even technically possible but I would love to know your opinion on this.

JakeStanger added the

T:Module Enhancement

M:Workspaces

A:Config

labels

2026-05-23 00:54:02 +01:00

JakeStanger commented

2026-05-23 00:54:02 +01:00

Author

Owner

@postsolar commented on GitHub (May 14, 2025):

.workspaces > .item:not(.visible) {
  background: green;
}

Is it this or am I misunderstanding something?

@postsolar commented on GitHub (May 14, 2025): ```css .workspaces > .item:not(.visible) { background: green; } ``` Is it this or am I misunderstanding something?

JakeStanger commented

2026-05-23 00:54:02 +01:00

Author

Owner

@vtsionis commented on GitHub (May 14, 2025):

@postsolar Although that is pure CSS selectors mastery, unfortunately not what I am looking for.
Let me add some screenshots to clarify the case in point.

This is the current behavior with workspace 11 being focused:

.workspaces .item.focused {
  background-color: #50FA7B;
  color: #282A36;
 }

Let's say that I also have one or more windows open in workspaces 12 and 14, while the focused workspace is still 11. Then the module would ideally look something like this:

with the corresponding (draft) CSS:

.workspaces .item.active {
  background-color: #BD93F9;
  color: #21222C;
}

In comparison to @postsolar's snippet, which would look something like this:

I hope that my request is now a bit more clear with the provided screenshots.

@vtsionis commented on GitHub (May 14, 2025): @postsolar Although that is pure CSS selectors mastery, unfortunately not what I am looking for. Let me add some screenshots to clarify the case in point. This is the current behavior with workspace `11` being focused: ```css .workspaces .item.focused { background-color: #50FA7B; color: #282A36; } ``` ![Image](https://github.com/user-attachments/assets/59d18a1b-ff34-4256-a975-e620e5f14025) Let's say that I also have one or more windows open in workspaces `12` and `14`, while the focused workspace is still `11`. Then the module would ideally look something like this: ![Image](https://github.com/user-attachments/assets/34401b07-913c-4030-ba8c-a675cd86f8e3) with the corresponding (draft) CSS: ```css .workspaces .item.active { background-color: #BD93F9; color: #21222C; } ``` In comparison to @postsolar's snippet, which would look something like this: ![Image](https://github.com/user-attachments/assets/9981ea47-fa72-44b4-839b-54d2669c28ea) I hope that my request is now a bit more clear with the provided screenshots.

JakeStanger commented

2026-05-23 00:54:02 +01:00

Author

Owner

@JakeStanger commented on GitHub (May 14, 2025):

Although it is the opposite of the inactive selector, I'm not sure I like active as a name, as it's easily confused with the existing focused.

That's given me an idea though...

If I'm understanding correctly, you could view what you're after as selecting everything BUT inactive workspaces. So you could adapt postsolar's idea:

.workspaces > .item:not(.inactive) {
  background: green;
}

If you need to be more specific to avoid clashing with focused, you can chain another :not on the end (I think)

.workspaces > .item:not(.inactive):not(.focused) {
  background: green;
}

@JakeStanger commented on GitHub (May 14, 2025): Although it *is* the opposite of the `inactive` selector, I'm not sure I like `active` as a name, as it's easily confused with the existing `focused`. That's given me an idea though... If I'm understanding correctly, you could view what you're after as selecting everything BUT inactive workspaces. So you could adapt postsolar's idea: ```css .workspaces > .item:not(.inactive) { background: green; } ``` If you need to be more specific to avoid clashing with `focused`, you can chain another `:not` on the end (I think) ```css .workspaces > .item:not(.inactive):not(.focused) { background: green; } ```

JakeStanger commented

2026-05-23 00:54:02 +01:00

Author

Owner

@vtsionis commented on GitHub (May 15, 2025):

Unfortunately still not what I am going for.

Full disclosure, I am using a Hyprland plugin called split-monitor-workspaces which allows me to have a set of 10 workspaces per monitor (1 to 10 on monitor A and 11 to 20 on monitor B) which are also always visible regardless if they have an open window on them or not. Basically, it is similar to how AwesomeWM handles workspaces. So I don't know if my setup complicates things.

In the below screenshot, I have at least one open window on:

worksace 1 (visible on monitor A) targeted by .visible class
workspace 4
worspaces 11 (visible on monitor B, and the mouse cursor is on it) targeted by .focused class
workspace 12

which with the below style.css snippet:

.workspaces {
  background-color: @BG;
  border: 1px solid @BORDER;
}
.workspaces .item.visible {
  background-color: @SECONDARY;
  color: @BGD;
}
.workspaces .item.focused {
  background-color: @ACTIVE;
  color: @BG;
}

produce this end result:

Now what I would like to have is a class that targets workspace 4 and 12 that do have an open window but are not visible nor focused. I also agree that .active is not a good choice but as we know, naming things is hard. Maybe something like .non-empty? Just a thought.

@vtsionis commented on GitHub (May 15, 2025): Unfortunately still not what I am going for. Full disclosure, I am using a Hyprland plugin called `split-monitor-workspaces` which allows me to have a set of 10 workspaces per monitor (1 to 10 on monitor A and 11 to 20 on monitor B) which are also always visible regardless if they have an open window on them or not. Basically, it is similar to how AwesomeWM handles workspaces. So I don't know if my setup complicates things. In the below screenshot, I have at least one open window on: - worksace 1 (visible on monitor A) targeted by `.visible` class - workspace 4 - worspaces 11 (visible on monitor B, and the mouse cursor is on it) targeted by `.focused` class - workspace 12 which with the below `style.css` snippet: ```css .workspaces { background-color: @BG; border: 1px solid @BORDER; } .workspaces .item.visible { background-color: @SECONDARY; color: @BGD; } .workspaces .item.focused { background-color: @ACTIVE; color: @BG; } ``` produce this end result: ![Image](https://github.com/user-attachments/assets/bcd27c21-0871-4ec1-85ad-72121effbae6) Now what I would like to have is a class that targets workspace 4 and 12 that do have an open window but are not visible nor focused. I also agree that `.active` is not a good choice but as we know, naming things is hard. Maybe something like `.non-empty`? Just a thought.

JakeStanger commented

2026-05-23 00:54:02 +01:00

Author

Owner

@JakeStanger commented on GitHub (Sep 7, 2025):

Current plan is to add a new `.populated class name. Use-case has increased with Niri gaining traction.

@JakeStanger commented on GitHub (Sep 7, 2025): Current plan is to add a new `.populated class name. Use-case has increased with Niri gaining traction.

JakeStanger commented

2026-05-23 00:54:02 +01:00

Author

Owner

@carmanaught commented on GitHub (Apr 6, 2026):

I don't know if you already found this out yourself @vtsionis, but I've been trying to style labels the same way and I've found that as long as you set the styling you want on the relevant states including the base .item, I think you can get the styling you want. I'm also putting this here for anyone else coming across this, since I was trying to achieve the same thing.

Specifically, the .workspaces .item affects the items generally, so you can treat that as your "workspace populated but not active or empty", then make sure that the .workspaces .item.inactive and .workspaces .item.focused are set.

I think what you're wanting should work like this (assuming some color choices here):

.workspaces .item {
  background-color: #BD93F9;
  color: #21222C;
}
.workspaces .item.inactive {
  background-color: unset;
  color: #FFF;
}
.workspaces .item.focused {
  background-color: #50FA7B;
  color: #282A36;
}

That said, it will be best to have the specific .populated class name to target the relevant workspaces, rather than applying styling to the base .item.

@carmanaught commented on GitHub (Apr 6, 2026): I don't know if you already found this out yourself @vtsionis, but I've been trying to style labels the same way and I've found that as long as you set the styling you want on the relevant states including the base `.item`, I think you can get the styling you want. I'm also putting this here for anyone else coming across this, since I was trying to achieve the same thing. Specifically, the `.workspaces .item` affects the items generally, so you can treat that as your "workspace populated but not active or empty", then make sure that the `.workspaces .item.inactive` and `.workspaces .item.focused` are set. I think what you're wanting should work like this (assuming some color choices here): ```css .workspaces .item { background-color: #BD93F9; color: #21222C; } .workspaces .item.inactive { background-color: unset; color: #FFF; } .workspaces .item.focused { background-color: #50FA7B; color: #282A36; } ``` That said, it will be best to have the specific `.populated` class name to target the relevant workspaces, rather than applying styling to the base `.item`.

JakeStanger commented

2026-05-23 00:54:02 +01:00

Author

Owner

@vtsionis commented on GitHub (Apr 8, 2026):

Nice thinking @carmanaught but it still doesn't work for me. I've also moved away from using Hyprland and Ironbar some time ago, so I didn't do much else on the matter.

As a test though, I did try out the suggested snippet, unfortunately without any success. I would like to clarify again that I'm using the split-monitor-workspaces Hyprland plugin to have separate workspaces per monitor. Maybe that is adding more complexity to what I'm trying to achieve.

In the below screenshot, you can see at the top is my bar from Ashell. Workspace 1 is focused, workspace 3 has an open Firefox window while all the rest of the workspaces have no window open.

In comparison with the Ironbar at the bottom, I do get the focused workspace 1 but no indication of the open window on workspace 3. It has the same style as all the rest of the "unpopulated" workspaces.

Regardless though, I also think that a dedicated .populated class is the proper way to go here.

@vtsionis commented on GitHub (Apr 8, 2026): Nice thinking @carmanaught but it still doesn't work for me. I've also moved away from using Hyprland and `Ironbar` some time ago, so I didn't do much else on the matter. As a test though, I did try out the suggested snippet, unfortunately without any success. I would like to clarify again that I'm using the `split-monitor-workspaces` Hyprland plugin to have separate workspaces per monitor. Maybe that is adding more complexity to what I'm trying to achieve. In the below screenshot, you can see at the top is my bar from `Ashell`. Workspace 1 is focused, workspace 3 has an open Firefox window while all the rest of the workspaces have no window open. <img width="654" height="67" alt="Image" src="https://github.com/user-attachments/assets/2aa952b1-3f17-4081-b103-e7316bf079fc" /> In comparison with the `Ironbar` at the bottom, I do get the focused workspace 1 but no indication of the open window on workspace 3. It has the same style as all the rest of the "unpopulated" workspaces. Regardless though, I also think that a dedicated `.populated` class is the proper way to go here.