Custom css does not override inline stylesheet css.

[Cookie-Monster-Coder]

trafficstars

Describe the bug Custom css does not override inline stylesheet css.

To Reproduce Steps to reproduce the behavior:

1. Add custom css in custom.css
2. Refresh page
3. See that it does not override stylesheet css

Expected behavior To override stylesheet css

Screenshots If applicable, add screenshots to help explain your problem.

Logs Output of docker-compose logs or kubectl logs respectively

Version and Deployment (please complete the following information):

• authentik version: 2022.3.3
• Deployment: docker-compose

Additional context Add any other context about the problem here.

[girlpunk]

As a temporary workaround, you may be able to use the CSS !important property (https://www.w3schools.com/css/css_important.asp)

[Cookie-Monster-Coder]

!important property

I have tried putting !important, but it still doesn't work. It seems like the inline css can't be overwritten.

Wouldn't it be a better/standard method to use a .css file instead of inline or hard-coded in the html?

[BeryJu]

!important property

I have tried putting !important, but it still doesn't work. It seems like the inline css can't be overwritten.

Wouldn't it be a better/standard method to use a .css file instead of inline or hard-coded in the html?

Thats exactly how the custom.css file is loaded? I did some quick testing and the custom style was applied successfully; can you post your CSS?

[Cookie-Monster-Coder]

!important property

I have tried putting !important, but it still doesn't work. It seems like the inline css can't be overwritten. Wouldn't it be a better/standard method to use a .css file instead of inline or hard-coded in the html?

Thats exactly how the custom.css file is loaded? I did some quick testing and the custom style was applied successfully; can you post your CSS?

Here is what I tried doing now:

/* User customisable */
.pf-c-button.pf-m-primary {
  background-color: red !important;
}

It doesn't work, but when I change it in style editor in inspect element (inline style sheet #63) it works.

[andrinbr]

Same here. CSS seems to get overriden by inline CSS from some script.

Enabling compatibility mode "solved" the issue for me.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Cookie-Monster-Coder]

Not stale. Still an issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Cookie-Monster-Coder]

Not stale

[a-camacho]

Not stale, have the same problem. We can customize body for example, but not elements that are styled inline.

Thanks

[tobz]

Looking into using custom CSS myself, my theory is that this is related to the use a shadow DOM: https://stackoverflow.com/questions/71035789/select-element-in-shadow-root-with-css-only

For example, using document.querySelectorAll(...) in the Chrome dev console when on the identification stage for an authentication flow lets you select anything that is outside of the shadow root attached to the primary ak-flow-executor element. You can see div objects, and so on, select by classes, all of the expected stuff. If you try to select any element inside the shadow root, it fails.

If you first, however, select the shadow root element and then try and query against that, things work as expected:

As mentioned in the Stack Overflow post, this can seemingly be allowed by defining part attributes on elements within a shadow DOM tree, which appear to be similar to the classic id attribute for regular elements.

Without that happening, custom CSS appears entirely useless: the only things it has access to change are things you can already control such as the background image for a given flow.

[a-camacho]

Without that happening, custom CSS appears entirely useless: the only things it has access to change are things you can already control such as the background image for a given flow.

That is exactly that. Could we have the POV of Authentik authors : would you allow people to override those things, or has it been made that way to prevent exactly that ?

Thanks

[BeryJu]

Custom CSS is certainly not intended to not work, but it is true that in the current state it can't do much due to how Shadow DOMs work The solution above with ::part() would certainly work, however there would be a lot of overhead to add part attributes to elements all of the place (which elements should have a part attribute?) not to mention cluttering the code with part attributes everywhere The other solution that could work is to do a semi-hacky way to load the custom css in each elements' shadow dom, which would solve the issue but I'd rather not do

The way I'd prefer to do this is to have the authentik interfaces (flow/admin/user) be available as NPM packages, and make it really easy for people to build on top of that, and then add those custom interfaces back into authentik (also in a way where people could build completely custom login/etc interfaces from scratch and they'd be served on the authentik domain)

[tobz]

The segmented packages idea sounds good to me.

For example, I really don't care what the admin/user portions look like because I only ever use social/federated auth sources... so theming the flow interface is all I would want to do, etc.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sevmonster]

If you were to add the custom.css to the shadow DOMs for example through an import here, would that not work during runtime i.e. with a user modified file on a Docker volume? I am ignorant to TypeScript and the other shenanigans being used here.

Edit: That is exactly the case.