styling of the multiselect broken in gin darkmode

I just can't figure out how to apply the changes from my fork, but anyways, applying these changes to pb.css should do it:

@media (prefers-color-scheme: dark) {
  .pb-filter__multi-dropdown__items div{
    background-color: #2a2a2d;
    border-bottom: 1px solid rgba(212, 212, 218, 0.34);
  }

  .pb-filter__multi-dropdown__items div:hover,
  .pb-filter__multi-dropdown__items div:focus {
    background-color: #2a2a2de8;
  }
}

Hi @rkoller and @simobm,

I was reviewing this issue, and I believe it would be more appropriate to address it within the Gin Admin theme rather than making changes here. Could you please confirm if this approach makes sense, or if I might be overlooking something?

Move the Project browser specific styling from gin theme to project browser's scope. 📌 Move the Project browser specific styling from gin theme to project browser's scope. Active this issue moves the styling from gin to the Project browser's scope.I think once this is in then fixing all the css related issue specific to gin would be easier.
Attaching the issue for reference.

This is how the dropdown looks:-

Marking NR.

The background and text color of Filter by category items is different from other filters eg Security advisory coverage.
Also suggested some css change.

It needs a round of manual testing and also i'm not sure about the css rule for hovering over the div.Already added the questions for the same.

Hi @utkarsh_33, While reviewing this issue, I had a few observations.

1. It seems that dark mode-related changes would be more appropriately placed in the gin.css file rather than pb.css, as all other Gin-
specific styling is handled there. Would you agree with this approach?

2. If we want it to look similar with the other select dropdowns we need to change the colour of text to black like other select dropdowns
when it gets focus or hover.

3. But i noticed in light mode this dropdown is not similar with other select dropdowns so we may consider it and can obtain the background color for before and after hover like this also.

I used this code for the changes

.gin--dark-mode .pb-filter__multi-dropdown__items--visible {
  background-color: var(--gin-bg-layer);
}
.gin--dark-mode .pb-filter__multi-dropdown__items--visible div:hover,
.gin--dark-mode .pb-filter__multi-dropdown__items--visible div:focus {
  background-color: var(--gin-bg-layer2);
}

I think it makes sense to move the css rules to gin.css.I think i didn’t completely get how points 2 and 3 makes it similar to other dropdown.If you think it makes sense then you can push the changes accordingly.

My 2nd point was that in your previous commit bd6e4af7 after hovering over the div it is getting blue color as i thought you were trying to make the hover same as the other dropdowns like e.g. Security Advisory Coverage, Maintenance Status etc. I was saying if we follow this we need to change the color of the text from white to black when it get blue bg color while hovering.

Alternatively we may pick the design as i mentioned in my 3rd point it may look good as in light mode also Filter by category is not identical with other select dropdowns.

As you make the changes in the MR now. I think it is looking good. Let's wait for feedback from others.

Gave this a quick manual test and confirmed that the selector looks awful in 2.0.x with Gin's dark mode enabled, and much nicer with this MR applied!

The CSS doesn't look problematic to me either. As far as I can tell, we're good to go here.

confirmed fixed with manual testing.

Automatically closed - issue fixed for 2 weeks with no activity.