New custom CSS support is great

[sevmonster]

Thanks to #4804, we now have custom CSS that can touch every part of the DOM. With that, I started making my authentik look more like the new default look for Nextcloud, which is centered around a 25px frosted glass blur. Sadly, I had to do some hacky workarounds since authentik uses hex color values instead of RGB, but the end result is visual parity with Nextcloud.

Background is by David Groves on Unsplash. I have a cronjob to rotate the background for all my services every hour.

Screenshots

authentik

Nextcloud inspiration

CSS

I hereby release the below stylesheet into the public domain.

/*** global ***/
:root {
  --ak-accent: #3A244A;
  --ak-flow-background: url(https://picsum.photos/1920/1080) !important;
  --pf-global--primary-color--100: #70468E;
  --pf-global--primary-color--200: #55356c;
  --pf-global--primary-color--400: var(--ak-accent);
}
/* set up ::before psuedo-elems for hex transparency
 *
 * NOTE:
 * this is necessary as var() returns tokens, not strings, so:
 *   --a: #deadbe;
 *   x: var(--a)ef;
 * becomes:
 *   x: #deadbe ef;
 *
 * to get around this we use psuedo-elems with opacity; easier and less verbose
 * to just define the selectors here again instead of duplicating properties
 *
 * CSS Color Module Level 5 is not ready yet and would prevent this nasty shit
 */
.pf-c-login__main,
.pf-c-login__footer .pf-c-list,
.pf-c-page__sidebar {
  background-color: transparent !important;
  backdrop-filter: blur(25px);
}
.pf-c-login__main::before,
.pf-c-login__footer .pf-c-list::before,
.pf-c-page__sidebar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8;
}


/*** flows ***/
.pf-c-background-image {
  --pf-c-background-image--Filter: none;
}

.ak-login-container {
  /* fix #4830 */
  justify-content: initial;
}
.pf-c-login__header {
  margin-top: 10px;
}

/* give both the blur and color same radius */
.pf-c-login__main,
.pf-c-login__main::before {
  border-radius: 3px 3px 0 0;
}
.pf-c-login__footer .pf-c-list,
.pf-c-login__footer .pf-c-list::before {
  border-radius: 0 0 3px 3px;
}

.pf-c-login__main::before,
.pf-c-login__footer .pf-c-list::before {
  background-color: var(--pf-c-login__main--BackgroundColor);
}
.pf-c-login__footer {
  /* unset inverted colorscheme on footer since we're adding bg */
  --pf-global--Color--100: inherit;
  --pf-global--Color--200: inherit;
  --pf-global--BorderColor--100: inherit;
  --pf-global--primary-color--100: inherit;
  --pf-global--link--Color: inherit;
  --pf-global--link--Color--hover: inherit;
  --pf-global--BackgroundColor--100: inherit;
}

.pf-c-login__footer .pf-c-list {
    padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
    padding-bottom: var(--pf-c-login__footer--c-list--PaddingTop);
}

@media (prefers-color-scheme: dark) {
  .pf-c-login__main::before,
  .pf-c-login__footer .pf-c-list::before {
    background-color: var(--ak-dark-background);
  }
}


/*** user interface ***/
.header input {
  border-bottom-color: var(--pf-global--primary-color--100);
}


/*** admin interface ***/
.pf-c-page__sidebar {
  backdrop-filter: blur(10px);
}
.pf-c-page__sidebar::before {
  background-color: var(--pf-global--BackgroundColor--dark-300);
}
@media (prefers-color-scheme: dark) {
  .pf-c-page__sidebar::before {
     background-color: var(--ak-dark-background-light);
   }
  .pf-c-nav {
     background-color: transparent;
  }
}
.pf-c-nav__link.pf-m-current::after,
.pf-c-nav__link.pf-m-current:hover::after,
.pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
  --pf-c-nav__link--m-current--after--BorderColor: var(--ak-accent) !important;
}

[almereyda]

As I am unable to stop any changed URL for the background image, would you like to reveal a little more, how you change it?

[sevmonster]

I'm not sure what you mean. I just override the flow background image unconditionally. If you're talking about changing the default non-flow background (used on generic error pages), you need to overwrite /web/dist/assets/images/flow_background.jpg. Of course your custom css should be included on most of the pages as well so I doubt you would see it much if at all.

[terafirmanz]

@sevmonster line one imports from your website is this required as I like the rounded corners but hesitate to import external code dynamically to my authentication system? If required can you confirm what parts so one could include them in this and not import them?

[sevmonster]

You could have just visited the page to see what was being imported...

[terafirmanz]

fair enough not sure why I didn't: clearly lots on the mind.

I see at this stage it's only pulling in the background image.

[sevmonster]

Actually, I have updated the OP since it was silly in hindsight to include it. I am making changes internally that would have broken the variable anyway (it no longer exists in my stylesheet)

[hooray4me]

If using docker images, is there something special I need to do to mount the custom.css? Do I have to build it again? I have mounted it into both server and worker... If I exec into each, it shows the file mounted correctly, but it is not applied. Any help would be greatly appreciated.

version: "3.4"

services:
  redis:
    image: docker.io/library/postgres:12-alpine
    command: --save 60 1 --loglevel warning
    restart: unless-stopped
    healthcheck:
      test: ["CMD-SHELL", "redis-cli ping | grep PONG"]
      start_period: 20s
      interval: 30s
      retries: 5
      timeout: 3s
    volumes:
      - redis:/data
    networks:
      - apps
  server:
    image: ghcr.io/goauthentik/server:2023.10.5
    restart: unless-stopped
    command: server
    environment:
      AUTHENTIK_REDIS__HOST: redis
      AUTHENTIK_POSTGRESQL__HOST: postgres
      AUTHENTIK_POSTGRESQL__USER: ${PG_USER:-authentik}
      AUTHENTIK_POSTGRESQL__NAME: ${PG_DB:-authentik}
      AUTHENTIK_POSTGRESQL__PASSWORD: ${PG_PASS}
    volumes:
      - ./media:/media
      - ./custom-templates:/templates
      - ${PWD}/custom.css:/web/dist/custom.css
    env_file:
      - .env
    expose:
      - "9000"
      - "9443"
    networks:
      - apps
    depends_on:
      - redis
  worker:
    image: ghcr.io/goauthentik/server:2023.10.5
    restart: unless-stopped
    command: worker
    environment:
      AUTHENTIK_REDIS__HOST: redis
      AUTHENTIK_POSTGRESQL__HOST: postgres
      AUTHENTIK_POSTGRESQL__USER: ${PG_USER:-authentik}
      AUTHENTIK_POSTGRESQL__NAME: ${PG_DB:-authentik}
      AUTHENTIK_POSTGRESQL__PASSWORD: ${PG_PASS}
    user: root
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./media:/media
      - ./certs:/certs
      - ./custom-templates:/templates
      - ${PWD}/custom.css:/web/dist/custom.css
    env_file:
      - .env
    networks:
      - apps
    depends_on:
      - redis
networks:
  apps:
    external: true
volumes:
  redis:
    driver: local

[arpanghosh8453]

I am having the same issue, I checked and I can cat the file contents so it's mounted and readable by the container user (Authentik) but it's still not being applied. I have used the above CSS example file as contents. Any suggestions @terafirmanz ?

[terafirmanz]

@arpanghosh8453 I hate to ask the obvious questions but are you running the latest version that supports the custom css file?

Also in your browser open the dev tools and disable the cache on the network tab to make sure it is loading fresh. Then in that tab refresh the page and under css see if you are getting the file:

[arpanghosh8453]

Thanks a lot for getting back to me @terafirmanz. I checked that for sure. I was so confused why it's not working. When I open the file from inside container, I see the contents, but when I open it from the browser inspect, I get that files contains a single default comment only.

Then I realized it's Cloudflare who is serving the cached content and not refreshing it even if I do hard refresh on my end. Funny story but then I purged the cache, and everything was great!

I even customized the configured source buttons to make them look professional :) I LOVE the new look 💯

[Mrs-Feathers]

wow that looks beautiful. how did you get the source buttons like that? whatever image i put, i can't get it to be bigger than a small circle with text beside it

[arpanghosh8453]

@Mrs-Feathers I have the following in my custom.css to override the default styling of source buttons.

.pf-c-button.pf-m-link {
    color: #fff;
    background-color: #282828;
    padding: 10px 20px 4px 20px;
    border-radius: 40px;
    border: 2px solid #f4ebeb;
  }

.pf-c-button.pf-m-link:hover {
    background-color: #444444;
  }

[hexxone]

Looks great! Thanks for sharing!

I also extended the concept a bit by customising the "User Library" view in a similar way:

E.g.:

.pf-c-card,
.pf-c-expandable-section {
    backdrop-filter: blur(25px);
    border-radius: 7px 7px 7px 7px !important;
}

.pf-c-card {
    background-color: #35353535 !important;
}

ak-expand,
.pf-c-expandable-section {
    background-color: transparent !important;
}

.pf-c-expandable-section.pf-m-display-lg::after {
    top: 5px;
    bottom: 5px;
    border-radius: 7px 7px 7px 7px !important;
    transition: all 0.3s;
}

.pf-c-expandable-section.pf-m-expanded::after {
    box-shadow: 1px 0px 4px #06c;
}

.pf-c-expandable-section button {
    width: 100%;
}

.pf-c-sidebar__panel .pf-c-card {
    background-color: #1c1e21 !important; /** Fix for /if/admin/#/core/applications Sidebar **/
}

[sevmonster]

Very cool, I planned to do this but never got around to it. I am planning a full site redesign so I will definitely be back here later :)

Do note you can simply use border-radius: 7px, you do not need to specify all 4 dimensions.

[bunnypranav]

@sevmonster
Wonderful design, thanks for making it open source.
It would be very helpful if you could make a light mode version, as there are some people (like me) who also prefer light mode sometimes

[sevmonster]

It respects prefers-color-scheme

[bunnypranav]

Could you suggest any color for the light mode version (replacement for purple)?

[sevmonster]

Not particularly? authentik (as well as my customization) has a very neutral and greyscale color theme by default excluding the accent and primary colors so anything should work. Adjust them to your taste.

[moschny]

With latest authentik, not working properly: the exchanged background image for the login screen is shown briefly, but then authentik's own background is loaded. Anyone else seeing this behavior?

[arukaraz]

It looks like they are enforcing their background to the div somehow replacing every other background property you use for it.
I worked around this by adding this class override to the custom.css file, and now the Picsum background is displaying correctly again.

.pf-c-background-image { --ak-flow-background: inherit !important; }

[SirWobbyTheFirst]

How do I override the link colour for the "Sign up" and "Forgot username or password?" links at the bottom of the log in dialog? I've attached a screenshot, where I have been able to change the button colour and I basically want the links at the bottom to match it. I have tried defining the variables --pf-global--link-color and --pf-global--link-hover in root within the CSS file where the other colours are defined based on the F12 tools in Firefox and Edge but the colour never changes.