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); } /* 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); } }