pbaity
commented
4 years ago Hoping someone smart here can think up a simpler solution!
Clearly I am not this person, I gave it a try with the same result. I don't want to start writing a thousand rules for every instance of the rcx-box class, so I'm going to 1) wait for someone smarter to show up, that's saved me a few times already, and 2) open an issue with RocketChat to ask politely if they can give that little element a class or ID of it's own so it can be targeted with custom CSS. In the particular case of status icons, that seems reasonable.
If anyone finds otherwise, they can reopen this issue.
Describe the bug The user presence status icon color is overridden with the dark theme background color
To Reproduce Steps to reproduce the behavior:
Expected behavior The modal pop-up user card should have a colored presence status icon as it does in "light mode"
Screenshots
Additional context
I've spent some time trying to target and fix this but have run out of ideas.
This is caused from the styles "body.dark-mode .rcx-box" which is used as a generic catch-all that catches a bunch of areas, i tried targeting the presence icon with a ":not()" selector but CSS doesn't support enough complexity to target this (as there's no class name on the presence icon). So I'm a bit stuck as to how to target it.
Overwriting the generic "body.dark-mode .rcx-box" class with more specific would be possible, but seems like it would require a lot of definitions.
Hoping someone smart here can think up a simpler solution!