authentik/web/src/authentik.css

html {
    --pf-c-nav__link--PaddingTop: 0.5rem;
    --pf-c-nav__link--PaddingRight: 0.5rem;
    --pf-c-nav__link--PaddingBottom: 0.5rem;
    --pf-c-nav__link--PaddingLeft: 0.5rem;
}

.pf-c-page__header {
    z-index: 0;
}

/* Ensure card is displayed on small screens */
.pf-c-login__main {
    display: block;
}

/* login page's icons */
.pf-c-login__main-footer-links-item-link img {
    fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
    width: 100%;
    max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
    height: 100%;
    max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
}

/* fix multiple selects height */
select[multiple] {
    height: initial;
}

/* Form with user */
.form-control-static {
    margin-top: var(--pf-global--spacer--sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.form-control-static .left {
    display: flex;
    align-items: center;
}
.form-control-static img {
    margin-right: var(--pf-global--spacer--xs);
}
.form-control-static a {
    padding-top: var(--pf-global--spacer--xs);
    padding-bottom: var(--pf-global--spacer--xs);
    line-height: var(--pf-global--spacer--xl);
}

/* Static OTP Tokens, authentik.stages.otp_static */
.ak-otp-tokens {
    list-style: circle;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    margin-left: var(--pf-global--spacer--xs);
}
.ak-otp-tokens li {
    font-size: var(--pf-global--FontSize--2xl);
    font-family: monospace;
}

/* Fix pre elements within alerts */
.pf-c-alert pre {
    white-space: pre-wrap;
}

.pf-c-content h1 {
    display: flex;
    align-items: flex-start;
}
.pf-c-content h1 i {
    font-style: normal;
}
.pf-c-content h1 :first-child {
    margin-right: var(--pf-global--spacer--sm);
}

.subtext {
    font-size: var(--pf-global--FontSize--sm);
}

.pf-c-page__main {
    z-index: auto !important;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ak-dark-foreground: #fafafa;
        --ak-dark-foreground-darker: #bebebe;
        --ak-dark-foreground-link: #5a5cb9;
        --ak-dark-background: #18191a;
        --ak-dark-background-darker: #000000;
        --ak-dark-background-light: #1c1e21;
        --ak-dark-background-lighter: #2b2e33;

        --pf-global--Color--100: var(--ak-dark-foreground);
        --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
        --pf-global--link--Color: var(--ak-dark-foreground-link);
    }
    /* Global page background colour */
    .pf-c-page {
        --pf-c-page--BackgroundColor: var(--ak-dark-background);
    }
    .pf-c-title {
        color: var(--ak-dark-foreground);
    }
    /* Header sections */
    .pf-c-page__main-section {
        background-color: var(--ak-dark-background);
    }
    .pf-c-page__main-section.pf-m-light {
        background-color: var(--ak-dark-background-light);
    }
    .pf-c-content {
        color: var(--ak-dark-foreground);
    }
    /* Card */
    .pf-c-card {
        --pf-c-card--BackgroundColor: var(--ak-dark-background-light);
    }
    .pf-c-card__header-main,
    .pf-c-card__body {
        color: var(--ak-dark-foreground);
    }
    .pf-c-toolbar {
        --pf-c-toolbar--BackgroundColor: var(--ak-dark-background-light);
    }
    .pf-c-pagination.pf-m-bottom {
        background-color: var(--ak-dark-background-light);
    }
    /* table */
    .pf-c-table {
        --pf-c-table--BackgroundColor: var(--ak-dark-background-light);
        --pf-c-table--BorderColor: var(--ak-dark-background-lighter);
        --pf-c-table--cell--Color: var(--ak-dark-foreground);
    }
    .pf-c-table__text {
        color: var(--ak-dark-foreground) !important;
    }
    .pf-c-table__sort-indicator i {
        color: var(--ak-dark-foreground) !important;
    }
    /* class for pagination text */
    .pf-c-options-menu__toggle {
        color: var(--ak-dark-foreground);
    }
    /* table icon used for expanding rows */
    .pf-c-table__toggle-icon {
        color: var(--ak-dark-foreground);
    }
    /* inputs */
    .pf-c-form-control {
        --pf-c-form-control--BorderTopColor: var(--ak-dark-background-lighter);
        --pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter);
        --pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter);
        --pf-global--BackgroundColor--100: transparent;
        background-color: var(--ak-dark-background-light);
        color: var(--ak-dark-foreground);
    }
    .pf-c-form-control[readonly] {
        background-color: var(--ak-dark-background-light);
    }
    .pf-c-button.pf-m-control {
        --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter) var(--ak-dark-background-lighter) var(--pf-c-button--m-control--after--BorderBottomColor) var(--ak-dark-background-lighter);
        background-color: var(--ak-dark-background-light);
        color: var(--ak-dark-foreground);
    }
    .pf-m-tertiary,
    .pf-c-button.pf-m-tertiary {
        --pf-c-button--after--BorderColor: var(--ak-dark-foreground-darker);
        color: var(--ak-dark-foreground-darker);
    }
    .pf-m-tertiary:hover,
    .pf-c-button.pf-m-tertiary:hover {
        --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter);
    }
    .pf-c-form__label-text {
        color: var(--ak-dark-foreground);
    }
    .pf-c-check__label {
        color: var(--ak-dark-foreground);
    }
    /* inputs help text */
    .pf-c-form__helper-text {
        color: var(--ak-dark-foreground);
    }
    /* modal */
    .pf-c-modal-box__header {
        background-color: var(--ak-dark-background-light);
    }
    .pf-c-modal-box__body {
        background-color: var(--ak-dark-background-light);
    }
    .pf-c-modal-box__footer {
        background-color: var(--ak-dark-background-light);
    }
    /* sidebar */
    .pf-c-nav {
        background-color: var(--ak-dark-background-light);
    }
    /* flows */
    .pf-c-login__main {
        background-color: var(--ak-dark-background);
    }
    .pf-c-login__main-body {
        color: var(--ak-dark-foreground);
    }
    .pf-c-login__main-footer-links-item-link > img {
        filter: invert(1);
    }
    .form-control-static {
        color: var(--ak-dark-foreground);
    }
}