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

[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;
  }

[GerardWoldendorp]

@arpanghosh8453 Could you maybe share your custom css with us? Yours look very good and simple

[arpanghosh8453]

@GerardWoldendorp Here you go -

/*** global ***/

.pf-c-background-image {
  --ak-flow-background: url(https://picsum.photos/1920/1080) !important;
}

:root {
    --ak-accent: #3A244A;
    --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;
  }

  .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-login__main-footer-links-item {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

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

  .pf-c-button.pf-m-secondary {
    color: var(--pf-c-button--m-primary--Color);
    background-color: var(--pf-c-button--m-primary--BackgroundColor);
  }
  
  .pf-c-button.pf-m-secondary:hover {
    color: var(--pf-c-button--m-primary--hover--Color);
    background-color: var(--pf-c-button--m-primary--hover--BackgroundColor);
  }

  .separator::before, .separator::after {
    border-bottom: 1px solid rgb(255, 255, 255);
  }

  .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: 15px 15px 15px 15px;
  }
  .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;
    display: none; /* For removing footer with Powered by Authentik link */
  }
  
  .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;
  }

[masterwishx]

is it still Fine for latest version , or/and maybe you made some more cool changes ?

[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.

[sevmonster]

IIRC, you have to target the actual element to override the variables, because many of them are in their own segmented shadow DOM.

[parasiteoflife]

Anyone has a style to increase icon sizes? SSO logos are tiny, I don't know if it's something with my installation or Firefox, logos are 24x24