Adding !important to CSS makes it impossible to do custom CSS

[mmgoilf]

Description:

As of recently many of the CSS rules have "!important" added to them, with these rules breaking custom CSS changes our team has put hard work into making to give our server a custom look and feel. Adding !important makes it impossible to make changes to these rules and breaks our custom CSS, along with the custom CSS of other people we have found on github, e.g: https://github.com/linusg/rocketchat-dark

Steps to reproduce:

1. Attempt to change a rule in CSS like the color of the text on the top header bar under .rcx-css-ps0pgs
2. Changes cannot be made due to !important

Expected behavior:

Custom CSS works as intended and allows you to make changes to all of the CSS, the custom CSS our team has worked hard to create does not break due to constant changes in the core CSS after every other update, with !important placed before these changes making it impossible for us to revert the changes.

Actual behavior:

It is seemingly impossible to add custom CSS for a large portion of the server due to !important rules:

Server Setup Information:

• Version of Rocket.Chat Server: 3.10.3
• Operating System: Ubuntu
• Deployment Method: docker
• Number of Running Instances: 1
• MongoDB Version: v3.6.3

Client Setup Information

• Desktop App or Browser Version: 3.1.1
• Operating System: Windows 10, Fedora, Arch Linux

[OmGuptaIND]

@mmgoilf I would like to work on this problem, it is still open?

[mmgoilf]

@mmgoilf I would like to work on this problem, it is still open?

Yes, it's still open.

[mmgoilf]

Update: Many CSS rules are easier to change now due to the addition of more variables like --rcx-color-neutral-800, but there are still some that appear to have no variable, but thankfully I have been able to fix much more of my custom CSS now.

[mmgoilf]

Here are a couple of examples of CSS rules I still can't change due to !important and seeming lack of variables:

The first one is particularly annoying because it makes the entire message in replies highlighted white when hovering over it, which is completely unreadable because we have a dark background with white text in our custom CSS:

[tassoevan]

Those !important statements come from automatically generated CSS rules that we use to quickly prototype our components as a more powerful replacement to simple style attributes. We're aware it's increasingly becoming a huge problem for custom CSS users, so I'd like to assure the next releases will come with softer rules in specificity. In short: !important statements can't be immediately removed, but we're going to drop them gradually.

[duven87]

Hello! last week I upgraded my old rocketchat version 2 to version 4.8.1 and the integrations-webhooks of jira, bamboo, etc the texts now appear as paragraphs, not using the full width of the window, and the links are cut and malformed. If you click on them they do not appear complete in browser with the new version. I found this ticket and it seems to be what I am talking about... With version 2 it worked correctly. Do you know if for the imminent release of version 5 it will be fixed? or is there any way to fix it with the latest stable version? or did I do something wrong when upgrading? I have roughly followed these steps: https://github.com/RocketChat/Rocket.Chat/issues/16827

BEFORE V. 2.0: NOW V. 4.8.1:

[SaiRev0]

Is the issue still open i would like to work this issue