:root { --ak-accent: #fd4b2d; --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-light-ish: #212427; --ak-dark-background-lighter: #2b2e33; } 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; } html > form > input { position: absolute; top: -2000px; left: -2000px; } .pf-c-page__header { z-index: 0; } /***************************** * Login adjustments *****************************/ /* Ensure card is displayed on small screens */ .pf-c-login__main { display: block; position: relative; } .ak-login-container { height: calc(100vh - var(--pf-global--spacer--lg) - var(--pf-global--spacer--lg)); width: 35rem; display: flex; flex-direction: column; justify-content: space-evenly; } .pf-c-login__header { flex-grow: 1; } .pf-c-login__footer { flex-grow: 2; } .pf-c-login__footer ul.pf-c-list.pf-m-inline { justify-content: center; } /***************************** * End Login adjustments *****************************/ .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); } /* ensure background on non-flow pages match */ .pf-c-background-image::before { background-image: var(--ak-flow-background); background-position: center; } .pf-m-success { color: var(--pf-global--success-color--100) !important; } .pf-m-warning { color: var(--pf-global--warning-color--100); } .pf-m-danger { color: var(--pf-global--danger-color--100); } .ak-static-page h1 { color: var(--ak-dark-foreground); } .form-help-text { color: var(--pf-global--Color--100); } /* Fix alignment issues with images in tables */ .pf-c-table tbody > tr > * { vertical-align: middle; } @media (prefers-color-scheme: dark) { body { background-color: var(--ak-dark-background) !important; } :root { --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-drawer__content { --pf-c-drawer__content--BackgroundColor: var(--ak-dark-background); } .pf-c-title { color: var(--ak-dark-foreground); } .pf-u-mb-xl { color: var(--ak-dark-foreground); } /* Header sections */ .pf-c-page__main-section { --pf-c-page__main-section--BackgroundColor: var(--ak-dark-background); } .sidebar-trigger, .notification-trigger { background-color: var(--ak-dark-background-light) !important; } .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); color: var(--ak-dark-foreground); } .pf-c-card__title, .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); } .pf-c-table__sort:not(.pf-m-selected) .pf-c-table__button .pf-c-table__text { color: var(--ak-dark-foreground) !important; } .pf-c-table__sort-indicator i { color: var(--ak-dark-foreground) !important; } .pf-c-table__expandable-row.pf-m-expanded { --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var( --ak-dark-background-lighter ); } /* tabs */ .pf-c-tabs { background-color: var(--ak-dark-background-light); } .pf-c-tabs__item.pf-m-current { --pf-c-tabs__link--after--BorderColor: #fd4b2d; } /* tabs, vertical */ .pf-c-tabs.pf-m-vertical .pf-c-tabs__link { background-color: var(--ak-dark-background-light); } /* table, on mobile */ @media screen and (max-width: 1200px) { .pf-m-grid-xl.pf-c-table tbody:first-of-type { border-top-color: var(--ak-dark-background); } .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) { border-bottom-color: var(--ak-dark-background); } } /* 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); } /* expandable elements */ .pf-c-expandable-section__toggle-text { color: var(--ak-dark-foreground); } .pf-c-expandable-section__toggle-icon { color: var(--ak-dark-foreground); } /* header for form group */ .pf-c-form__field-group-header-title-text { color: var(--ak-dark-foreground); } .pf-c-form__field-group { border-bottom: 0; } /* inputs */ optgroup, option { color: var(--ak-dark-foreground); } optgroup:checked, option:checked { color: var(--ak-dark-background); } .pf-c-input-group { --pf-c-input-group--BackgroundColor: transparent; } .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; --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light); color: var(--ak-dark-foreground); } .pf-c-form-control:disabled { background-color: var(--ak-dark-background-light); } .pf-c-form-control[readonly] { background-color: var(--ak-dark-background-light); } .pf-c-button.pf-m-plain:hover { color: var(--ak-dark-foreground); } .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); } .form-help-text { color: var(--ak-dark-foreground); } .pf-c-dropdown__toggle::before { border-color: transparent; } .pf-c-toggle-group__button { color: var(--ak-dark-foreground) !important; } .pf-c-toggle-group__button:not(.pf-m-selected) { background-color: var(--ak-dark-background-light) !important; } .pf-c-toggle-group__button.pf-m-selected { color: var(--ak-dark-foreground) !important; background-color: var(--pf-global--primary-color--100) !important; } /* inputs help text */ .pf-c-form__helper-text:not(.pf-m-error) { 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, .pf-c-login__main-header, .pf-c-login__main-header-desc { color: var(--ak-dark-foreground); } .pf-c-login__main-footer-links-item img { filter: invert(1); } .pf-c-login__main-footer-band { background-color: var(--ak-dark-background-lighter); color: var(--ak-dark-foreground); } .form-control-static { color: var(--ak-dark-foreground); } /* notifications */ .pf-c-drawer__panel { background-color: var(--ak-dark-background); } .pf-c-notification-drawer { --pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background); } .pf-c-notification-drawer__header { background-color: var(--ak-dark-background-lighter); color: var(--ak-dark-foreground); } .pf-c-notification-drawer__list-item { background-color: var(--ak-dark-background-light-ish); color: var(--ak-dark-foreground); } /* data list */ .pf-c-data-list__item { --pf-c-data-list__item--BackgroundColor: var(--ak-dark-background-light); --pf-c-data-list__item--BorderBottomColor: var(--ak-dark-background-lighter); color: var(--ak-dark-foreground); } }