355 lines
10 KiB
CSS
355 lines
10 KiB
CSS
: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;
|
|
background-color: var(--ak-dark-background-light);
|
|
box-shadow: var(--pf-global--BoxShadow--lg-bottom);
|
|
}
|
|
|
|
/*****************************
|
|
* 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);
|
|
}
|
|
|
|
.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) {
|
|
.ak-static-page h1 {
|
|
color: var(--ak-dark-foreground);
|
|
}
|
|
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: transparent !important;
|
|
}
|
|
.pf-c-page__main-section.pf-m-light {
|
|
background-color: transparent;
|
|
}
|
|
.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: transparent;
|
|
}
|
|
.pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before {
|
|
border-color: transparent;
|
|
}
|
|
.pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current:first-child .pf-c-tabs__link::before {
|
|
border-color: transparent;
|
|
}
|
|
.pf-c-tabs__link::before {
|
|
border-color: transparent;
|
|
}
|
|
.pf-c-tabs__item.pf-m-current {
|
|
--pf-c-tabs__link--after--BorderColor: #fd4b2d;
|
|
}
|
|
.pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
|
|
background-color: transparent;
|
|
}
|
|
/* 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,
|
|
.pf-c-modal-box__header,
|
|
.pf-c-modal-box__footer,
|
|
.pf-c-modal-box__body {
|
|
background-color: var(--ak-dark-background);
|
|
}
|
|
/* 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);
|
|
--pf-c-notification-drawer__list-item--BorderBottomColor: var(
|
|
--ak-dark-background-lighter
|
|
) !important;
|
|
}
|
|
/* data list */
|
|
.pf-c-data-list {
|
|
border-top-color: var(--ak-dark-background-lighter);
|
|
}
|
|
.pf-c-data-list__item {
|
|
--pf-c-data-list__item--BackgroundColor: transparent;
|
|
--pf-c-data-list__item--BorderBottomColor: var(--ak-dark-background-lighter);
|
|
color: var(--ak-dark-foreground);
|
|
}
|
|
}
|
|
|
|
.pf-c-data-list__item {
|
|
background-color: transparent;
|
|
}
|